ให้นักศึกษา เปิดโปรแกรม Dreamweaver และทำตามขั้นตอน ดังต่อไปนี้

(สร้าง Folder ชื่อ javascript  ก่อนจากนั้นแล้ว Save หน้าเว็บใหม่ชื่อ index.html)

------------------------------------------------------------------------------

โจทย์ที่ 1 การแทรก วันเดือนปี  <คลิกดูตัวอย่าง>

1. copy code file ไปวางหน้า code ตำแหน่งที่ต้องการ

Tip 1 :  ให้นักศึกษาเปลี่ยนสีตัวอักษรตามที่ต้องการ

แทรก คำสั่ง ระหว่าง Script ด้านบน   <p style="color: #00FF00; "> ......................    </p>

Tip 2 :  ให้นักศึกษากำหนดตำแหน่งชิดซ้าย หรือกึ่งกลาง

แทรก คำสั่ง ระหว่าง Script ด้านบน   <p style="color: #00FF00;  text-align: center;"> ......................    </p>

Tip 3 :  ให้นักศึกษาเปลี่ยนวัน เดือน ปี เป็นภาษาไทย

วันศุกร์ที่ 24 เดือน เมษายน ปี พ.ศ. 2558

------------------------------------------------------------------------------

โจทย์ที่ 2 การซ่อนรูปภาพตามเงื่อนไขต่างๆ <คลิกดูตัวอย่าง>

- ขึ้นบรรทัดใหม่ + คลิกเมนู insert
- เลือกคำสั่ง Layout Objects +  AP Div
- แทรกรูปภาพตามต้องการ (ใน AP Div)
- คลิกเมนู Window
- เลือกคำสั่ง Behaviors
- คลิกเครื่องหมาย +

- เลือกคำสั่ง Show-Hide Element (เงื่อนไขพื้นฐานคือ onClick)
- ทดสอบ

Tip 1  : ให้เปลี่ยนเงื่อนไขจากการคลิกที่ภาพ เป็น เลื่อนเมาส์ไปที่ภาพ และทำการปิดภาพ

Tip 2 : ให้ดูตัวอย่าง <คลิกดูตัวอย่าง> และทำตาม

------------------------------------------------------------------------------

โจทย์ที่ 3 เปิดหน้าต่างใหม่แบบ Popup <คลิกดูตัวอย่าง>

- ขึ้นบรรทัดใหม่ + คลิกเมนู insert 
- เลือกคำสั่ง Image แทรกรูปภาพตามต้องการ 
- คลิกที่รูปภาพแล้วเลือกคำสั่ง Behaviors
- คลิกเครื่องหมาย +

- เลือกคำสั่ง Open Browser Window + เลือกไฟล์รูปภาพที่มีขนาดใหญ่ขึ้น

Tip  : ปรับแต่งขนาดของหน้าต่าง หรือ เงื่อนไขต่างๆ ของ Popup โดยการดับเบิ้ลคลิกที่  คำสั่ง Open Browser Window

------------------------------------------------------------------------------

โจทย์ที่ 4 การแสดงกล่องข้อความ Popup Message <คลิกดูตัวอย่าง>

- ขึ้นบรรทัดใหม่ + คลิกเมนู insert 
- เลือกคำสั่ง Image แทรกรูปภาพตามต้องการ 
- คลิกที่รูปภาพแล้วเลือกคำสั่ง Behaviors
- คลิกเครื่องหมาย +

- เลือกคำสั่ง Popup Message

------------------------------------------------------------------------------

โจทย์ที่ 5 การสลับภาพ Swap Image <คลิกดูตัวอย่าง>

- ขึ้นบรรทัดใหม่ + คลิกเมนู insert 
- เลือกคำสั่ง Image แทรกรูปภาพตามต้องการ  3 ภาพตามตัวอย่าง
- คลิกรูปภาพด้านบนตั้งชื่อ ID เช่น qrcode

- คลิกที่รูปภาพด้านล่างรูปที่ 1 แล้วเลือกคำสั่ง Behaviors
- คลิกเครื่องหมาย +

- เลือกคำสั่ง  Swap Image + ในช่อง images: ให้เลือกบรรทัดตามที่ตั้งชื่อ ID ไว้ + จากนั้นคำสั่ง Set source to : ให้เลือกรูปภาพที่ต้องการเปลี่ยน (รูปภาพด้านล่างรูปที่ 1)

- คลิกที่รูปภาพด้านล่างรูปที่ 2 ทำเหมือนกับคำสั่งก่อนหน้านี้

------------------------------------------------------------------------------

** เมื่อทำแบบฝึกหัดเสร็จเรียบร้อยให้ upload folder :  javascript ขึ้น hosting ตนเอง

- เพิ่ม Link หน้าแรกของเว็บไซต์ชื่อ " การใช้เทคนิค JavaScript"   เชื่องโยงไปยัง  javascript/index.html  เลือก target = _blank

------------------------------------------------------------------------------

เพิ่มเติม (ไม่ต้องส่ง)

รูปภาพเลื่อนลงตามการเลื่อน Scroll Bar <คลิกดูตัวอย่าง>

เพิ่มลูกเล่นเวลาเลื่อนเมาส์  <คลิกดูตัวอย่าง>

การเปลี่ยน Font  <คลิกดูตัวอย่าง>

1. http://www.fontsquirrel.com/tools/webfont-generator
2. เลือก Expert
3. Add Font   (ตัวอย่าง Font)
4. คลิกเลือก No Subsetting
5. คลิกเลือก Yes, the fonts I'm uploading are legally eligible for web embedding.
6. คลิกปุ่ม Download Your KIT
7. รอการ Download file .zip 
8. Extract File zip  แล้วนำการเปลี่ยนชื่อ folder ตามต้องการเช่น  stylesheet  +  ย้าย Folder ไปยัง Folder เดียวกับไฟล์เว็บเพจ
9. เปิดหน้าเพจที่ต้องการแทรก Font 
10. เปิดหน้า Code แทรก <link href="/dc386/stylesheet/stylesheet.css" rel="stylesheet" type="text/css" /> ระหว่าง tag head

* อย่าลืมลบ /dc386/  ออกด้วย

11. ข้อความที่ต้องการเปลี่ยน Font ให้ใช้คำสั่งตามตัวอย่าง
<p style="font-family: dsn_freehandregular">พีราวิชญ์ ภาคนนท์กุล</p>