1. 1
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ปฏิบัติการที่ 13 การออกแบบเว็บไซต์ด้วยโปรแกรม Dream Weaver ครั้งที่ 2
วิชา 001272 คอมพิวเตอร์สารสนเทศขั้นพื้นฐาน
รหัส ชื่อ สาขา
คณะ หมู่เรียนที่ วันที่ เดือน พ.ศ
วัตถุประสงค์
1. เพื่อแนะนาการแทรกไฟล์ Flash
2. เพื่อแนะนาการกาหนดลิ้งค์ในบางส่วนของภาพด้วย Hotspot เมนูแบบ Rollover Image และ Navigation Bar
3. เพื่อแนะนาการ Upload File ขึ้นเว็บไซต์
**หมายเหตุ** ให้นิสิตเตรียมสร้าง Site ชื่อ MyWebsite ของก่อนเริ่ม ทาเหมือนปฏิบัติการที่ 12
ขั้นตอนที่ 1 การแทรกไฟล์ Flash หรือ Shock Wave File (SWF)
ขั้นตอนที่ 1.1 สร้างไฟล์รอ โดยการแทรกตารางขนาด 2 แถว 2 คอลัมน์ ขนาดตาราง 800 พิกเซล จากนั้นบันทึก
ไฟล์ก่อนชื่อ “mainpage.html”
ขั้นตอนที่ 1.2 แทรกแฟลช (Flash) แบบที่ 1 โดยลาก bannerflash.swf ที่อยู่ใน Image จาก Site ของเราไปวาง
บริเวณที่ต้องการ ก็จะแสดงดังรูปที่ 13.1
ขั้นตอนที่ 1.3 แทรกแฟลช แบบที่ 2 ทาโดยการเลือกไปที่เครื่องมือ ชุด Media
ซึ่งเมื่อกดไปแล้ว ก็จะมีหน้าต่างให้นิสิต browse หาไฟล์ SWF ซึ่งให้นิสิตเลือก bannerflash.swf จากนั้น
ก็จะแสดงดังรูปที่ 13.1 ให้กด Ctrl+S เพื่อบันทึกก่อนทดสอบรันด้วย F12
รูปที่ 13.1หลังการแทรกภาพ Flash
ขั้นตอนที่ 2 การกาหนดลิ้งค์ในบางส่วนของภาพด้วย Hotspot
ขั้นตอนที่ 2.1 ให้แทรกภาพ รูปภาพเหนือ North.jpg ลงไปในเพจ เพื่อที่จะทา Hotspot ซึ่งวิธีนี้จะทาให้มีลิ้งค์หลาย
อันในภาพเดียวกันได้
รูปที่ 13.2 แทรกภาพ

2. 2
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 2.2 จากนั้นเอาเมาส์ไปคลิกที่รูป ดูที่ Properties จะมองเห็น Hotspot มุมซ้ายล่าง
เลือกเป็นสี่เหลี่ยม เลือกเป็นวงกลม
เลือกวาดอิสระ (คลิกตามเส้นที่ต้องการ)
รูปที่ 13.2 กาหนดลิ้งค์ ภายใน Hotspot แต่ละจุด
ขั้นตอนที่ 3 การทาภาพลิ้งค์แบบ Rollover (เมื่อเอาเม้าส์ชี้ที่ภาพแล้วเปลี่ยนภาพเพื่อกดลิ้งค์)
ขั้นตอนที่ 3.1 เตรียมภาพ 2 ภาพก่อนเริ่มทา จากนั้นไปคลิกบริเวณที่ต้องการแทรก
ขั้นตอนที่ 3.2 กดไปที่ จากนั้นก็จะปรากฏหน้าต่างดังรูปที่
13.3 แล้วให้กาหนดค่าต่างๆดังรูป
รูปที่ 13.3 กาหนดค่า Rollover Image
ขั้นตอนที่ 3.3 บันทึกไฟล์แล้วลอง กด F12 รันดู
ชื่อ
ภาพแสดง
ภาพเมื่อชี้เม้าส์
ลิ้งค์ หรือ URL
ข้อความเมื่อชี้ภาพ

3. 3
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 4 การทาภาพลิ้งค์แบบเป็นชุดด้วย Images: Navigation Bar มีลักษณะที่เมื่อเอาเม้าส์ชี้ที่ภาพแล้วเปลี่ยนภาพ
เพื่อกดลิ้งค์ ซึ่งทาหลายๆภาพพร้อมกัน ส่วนใหญ่จะใช้เป็นเมนู
ขั้นตอนที่ 4.1 กดไปที่ จากนั้นก้จะปรากฏดังรูปที่ 13.4
ขั้นตอนที่ 4.2 กาหนดค่าคล้ายๆ ขั้นตอนที่ 3 แต่นิสิตสามารถทาได้หลายๆ ภาพพร้อมกันเป็นชุด เมื่อพอแล้วกด
OK ก็จะได้ชุดภาพที่เป็นเมนู ดังรูปที่ 13.5
รูปที่ 13.4 กาหนดค่า Navigation Bar
รูปที่ 13.5 แสดงผลการใช้ Navigation Bar
เพิ่ม ลบ ภาพ
ภาพแสดง
เมื่อชี้เม้าส์ที่ภาพ
เมื่อกดเม้าส์ที่ภาพ
เมื่อกดเม้าส์ที่ภาพ
ลิ้งค์หรือ URL
แสดงแนวตั้ง (Vertically)
แนวนอน (Horizontally)
ข้อความเมื่อชี้เม้าส์

4. 4
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 5 การ Upload file หรือการนาไฟล์ทั้งหมดที่ออกแบบไว้ ขึ้นเว็บไซต์
ขั้นตอนที่ 5.1 ในที่นี้ขอให้นิสิต เข้าเว็บ http://student.nu.ac.th ซึ่งเป็นบริการของ ม.นเรศวร จากนั้นสมัครสมาชิก
ใหม่ ถ้ามี User แล้วให้ เข้าสู่ระบบฯ
หมายเหตุ User และ Password ใช้อันเดียวกับระบบ Email ของ ม.นเรศวร แต่ก็ต้องสมัครก่อน เมื่อสมัครผ่านแล้ว จะได้
URL ของเว็บที่สมัครคือ http://student.nu.ac.th/<ชื่อเว็บที่ตั้ง>/ เช่น http://student.nu.ac.th/sanya
รูปที่ 13.6 ขั้นตอนการเข้าระบบ
ขั้นตอน 5.2 การจัดการไฟล์ จะต้องเข้าไปที่เมนู “File Manager” นิสิตจะต้องสร้างโฟลเดอร์บนเว็บให้เหมือนที่ได้
ออกแบบใน Site ของภายในเครื่องจริงของนิสิต โดยกดที่ “สร้าง Folder” ในที่นี้คือโฟลเดอร์ชื่อ images จากนั้นนาไฟล์ภาพมา
ใส่ให้หมด
รูปที่ 13.7 File Manager

5. 5
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 5.3 คลิกโฟลเดอร์ที่ต้องการก่อน Upload จากนั้นกดไปที่ “Upload ไฟล์ใหม่” ก็จะปรากกฏดังรูป เพื่อ
เพิ่มไฟล์ ถ้าไฟล์ชื่อ index.html ให้เอาไว้นอกสุด ส่วนรูปภาพ นิสิตต้องคลิกที่โฟลเดอร์ Images ก่อน Upload ภาพ
รูปที่ 13.8 เลือกไฟล์เพื่อ Upload
ขั้นตอนที่ 5.4 ในเว็บนี้นิสิตสามารถสร้าง Webboard ใช้ได้ฟรี โดยกดไปที่ “Webboard Manager” จากนั้นทาตาม
ขั้นตอน
รูปที่ 13.9 การสร้าง ฟรี Webboard
เมื่อสร้างเสร็จนิสิตจะได้โฟลเดอร์ขึ้นมาใหม่คือ Webboard
ดังนั้น URL คือ http://student.nu.ac.th/<ชื่อเว็บที่ตั้ง>/webboard ซึ่งสามารถปรับข้อความและสีได้
ตัวอย่างเช่น http://student.nu.ac.th/sanya/webboard
รูปที่ 13.10 ตัวอย่าง Webboard
ขั้นตอน 5.5 เมื่อต้องการออกจากระบบให้กด “ออกจากระบบ”
แบบฝึกหัด
ให้ออกแบบเว็บไซต์เป็นเกี่ยวกับประวัติส่วนตัวของนิสิตเอง โดยมีข้อมูลประกอบด้วย ชื่อ นามสกุล วันที่เกิด บ้านเกิด
สิ่งที่ชอบ ประวัติการศึกษา งานอดิเรกที่ชอบ เป็นต้น แล้วนาไปฝากไว้ที่เว็บไซต์จริงๆ เช่น ที่ http://student.nu.ac.th หรือ ที่
อื่นๆ ก็ได้