การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004 CHAPTER 10 การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004

สาระการเรียนรู้ ศึกษาถึงวิธีการสร้างหน้าเว็บเพจให้สวยงามด้วยโปรแกรม Macromedia Dreamweaver Mx2004 ให้สวยงามด้วยการใช้ Layout , Frame และ Table

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ การใช้งานเลย์เอาต์ (Layout) 1.สร้างหน้าเว็บเพจใหม่โดยการ คลิกเมาส์ขวาที่ Site >> เลือก New File 2.ตั้งชื่อไฟล์ว่า webpage > Enter เลือก 1 ตั้งชื่อ

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 3.Page Properties

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 4.คลิกที่ปุ่ม จากนั้นเลือก Layout 5.คลิกที่ เพื่อเข้าสู่การทำในโหมดของ Layout 6.คลิกที่ปุ่ม จากนั้น แดรกเมาส์สร้างขนาดขอว Layout หลักที่ต้องการ

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 7.สังเกตผลลัพธ์หลังจากสร้าง Layout ที่เกิดขึ้น 4 5 7 6

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ ทำการกำหนดขนาดความกว้าง – ยาวและสีของ Layout ได้ที่หน้าต่าง Properties width = 640 และ Height = 600

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ ทำการออกแบบ Layout ตามที่กำหนดที่ต้องการ

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 8.คลิกที่ปุ่ม จากนั้นแดรกเมาส์ครอบส่วนที่ต้องการ

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 9.ทำการออกแบบโครงสร้างตามภาพที่กำหนด 10 9

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 10.คลิกที่ Exit สังเกตผลลัพธ์ สังเกตผลลัพธ์

การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์ 11.นำภาพมาใส่ลงในตารางที่ได้และพิมพ์ข้อมความลงไป

การใช้งานเลเยอร์ Layer 1.คลิกที่ปุ่ม จากนั้นแดรกเมาส์สร้างขนาดของเลเยอร์ที่ต้องการ

การใช้งานเลเยอร์ Layer 2.ทดลองนำภาพหรือข้อความมาใส่ 3.คลิกที่ แดกเมาส์ย้ายตำแหน่งที่ต้องการ 2. ใส่ภาพ 3

การใช้งานเลเยอร์ Layer นอกจากนี้สามารถปรับแต่งรูปภาพหรือข้อความภายใน Layer ภายใน Layer ได้อีก เช่นใส่กรอบและใส่สีพื้นเป็นต้น 4.บันทึกข้อมูลและคลิกที่ F12

การใช้งาน Frame 1.สร้างหน้าเว็บใหม่อีกครั้งจากนั้นตั้งชื่อไฟล์และ ดับเบิ้ลคลิกไฟล์ที่สร้างใหม่

การใช้งาน Frame 2.คลิกที่ปุ่ม จากนั้นเลือก Layout 3.คลิกที่ปุ่ม จากนั้นคลิกเลือกรูปแบบของเฟรม

การใช้งาน Frame 4.สังเกตุผลลัพธ์จะเกิดขึ้น 3 เฟรมดังนี้ กด ALT เพื่อเลือก FRAME TOP FRAME กด ALT 4 LEFT FRAME Main FRAME

การใส่ภาพและตารางลงใน Frame 1.คลิกเมนู Edit > Undo 2.คลิกที่ปุ่ม จากนั้นเลือกรูปแบบ Top Frame

การใส่ภาพและตารางลงใน Frame 1.คลิกเมนู Edit > Undo 2.คลิกที่ปุ่ม จากนั้นเลือกรูปแบบ Top Frame 1 2

การใส่ภาพและตารางลงใน Frame 3.คลิกในช่องเฟรมที่ 1 จากนั้นคลิกเมนู Modify > Page Properties 4.กำหนดค่า Background Color เป็นสีดำ Left margin = 0 Right margin = 0 Top margin = 0 Bottom margin = 3 คลิกที่ปุ่ม OK

การใส่ภาพและตารางลงใน Frame 5.คลิกที่ปุ่ม จากนั้นกำหนเค่า Row = 2 Table width = 740 pixels Column = 6 Border thickness = 0 pixels ที่ Header = none คลิกที่ปุ่ม ok

การใส่ภาพและตารางลงใน Frame 6.แดรกเมาส์ลากตารางที่ช่อง 1 – 6 จากนั้นคลิกปุ่ม เพื่อรวมเซลล์ 7.คลิกที่ Layout จากนั้นเลือก Common 8.คลิกในตารางที่ช้องที่ 1 คลิกปุ่ม แล้วเลือกภาพ 7 8

การใส่ภาพและตารางลงใน Frame 9.ที่ช่อง Properties กำหนดค่า Border = 1 เพื่อใส่เส้นกรอบให้กับภาพ 10.คลิกแถวที่ 2 ช่องสุดท้าย นำภาพมาใส่ตามตัวอย่าง

การใส่ภาพและตารางลงใน Frame 11. ปรับแต่งให้สวยงามและสังเกตุผลลัพธ์ 12. สังเกตุผลลัพธ์ 13.นำภาพใส่ไว้ทั้งหมด 4 ภาพโดยมีหัวข้อ NORTH, SOUTH, EAST, WEST 14.สังเกตผลลัพธ์

การบันทึกเฟรม 1.คลิกเมนู File > Save All 2.พิมพ์ชื่อไฟล์ที่ต้องการคลิกที่ SAVE คือ Index.htm 18 ตั้งชื่อ 2

การบันทึกเฟรม 3.หน้าต่าง Save As ปรากฎ เพื่อบันทึกเฟรมที่ 2 ลงให้ใส่ชื่อ Top เฟรม คลิกที่ Save ตั้งชื่อ 3

การบันทึกเฟรม 4.บันทึกข้อมูลและคลิกที่ F12 สังเกตุผลลัพธ์

THE END