ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004
CHAPTER 10 การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004
2
สาระการเรียนรู้ ศึกษาถึงวิธีการสร้างหน้าเว็บเพจให้สวยงามด้วยโปรแกรม Macromedia Dreamweaver Mx2004 ให้สวยงามด้วยการใช้ Layout , Frame และ Table
3
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
การใช้งานเลย์เอาต์ (Layout) 1.สร้างหน้าเว็บเพจใหม่โดยการ คลิกเมาส์ขวาที่ Site >> เลือก New File 2.ตั้งชื่อไฟล์ว่า webpage > Enter เลือก 1 ตั้งชื่อ
4
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
3.Page Properties
5
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
4.คลิกที่ปุ่ม จากนั้นเลือก Layout 5.คลิกที่ เพื่อเข้าสู่การทำในโหมดของ Layout 6.คลิกที่ปุ่ม จากนั้น แดรกเมาส์สร้างขนาดขอว Layout หลักที่ต้องการ
6
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
7.สังเกตผลลัพธ์หลังจากสร้าง Layout ที่เกิดขึ้น 4 5 7 6
7
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
ทำการกำหนดขนาดความกว้าง – ยาวและสีของ Layout ได้ที่หน้าต่าง Properties width = 640 และ Height = 600
8
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
ทำการออกแบบ Layout ตามที่กำหนดที่ต้องการ
9
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
8.คลิกที่ปุ่ม จากนั้นแดรกเมาส์ครอบส่วนที่ต้องการ
10
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
9.ทำการออกแบบโครงสร้างตามภาพที่กำหนด 10 9
11
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
10.คลิกที่ Exit สังเกตผลลัพธ์ สังเกตผลลัพธ์
12
การจัดหน้าเว็บเพจด้วยเลย์เอาต์และเลเยอร์
11.นำภาพมาใส่ลงในตารางที่ได้และพิมพ์ข้อมความลงไป
13
การใช้งานเลเยอร์ Layer
1.คลิกที่ปุ่ม จากนั้นแดรกเมาส์สร้างขนาดของเลเยอร์ที่ต้องการ
14
การใช้งานเลเยอร์ Layer
2.ทดลองนำภาพหรือข้อความมาใส่ 3.คลิกที่ แดกเมาส์ย้ายตำแหน่งที่ต้องการ 2. ใส่ภาพ 3
15
การใช้งานเลเยอร์ Layer
นอกจากนี้สามารถปรับแต่งรูปภาพหรือข้อความภายใน Layer ภายใน Layer ได้อีก เช่นใส่กรอบและใส่สีพื้นเป็นต้น 4.บันทึกข้อมูลและคลิกที่ F12
16
การใช้งาน Frame 1.สร้างหน้าเว็บใหม่อีกครั้งจากนั้นตั้งชื่อไฟล์และ ดับเบิ้ลคลิกไฟล์ที่สร้างใหม่
17
การใช้งาน Frame 2.คลิกที่ปุ่ม จากนั้นเลือก Layout
3.คลิกที่ปุ่ม จากนั้นคลิกเลือกรูปแบบของเฟรม
18
การใช้งาน Frame 4.สังเกตุผลลัพธ์จะเกิดขึ้น 3 เฟรมดังนี้ กด ALT เพื่อเลือก FRAME TOP FRAME กด ALT 4 LEFT FRAME Main FRAME
19
การใส่ภาพและตารางลงใน Frame
1.คลิกเมนู Edit > Undo 2.คลิกที่ปุ่ม จากนั้นเลือกรูปแบบ Top Frame
20
การใส่ภาพและตารางลงใน Frame
1.คลิกเมนู Edit > Undo 2.คลิกที่ปุ่ม จากนั้นเลือกรูปแบบ Top Frame 1 2
21
การใส่ภาพและตารางลงใน Frame
3.คลิกในช่องเฟรมที่ 1 จากนั้นคลิกเมนู Modify > Page Properties 4.กำหนดค่า Background Color เป็นสีดำ Left margin = 0 Right margin = 0 Top margin = 0 Bottom margin = 3 คลิกที่ปุ่ม OK
22
การใส่ภาพและตารางลงใน Frame
5.คลิกที่ปุ่ม จากนั้นกำหนเค่า Row = 2 Table width = 740 pixels Column = 6 Border thickness = 0 pixels ที่ Header = none คลิกที่ปุ่ม ok
23
การใส่ภาพและตารางลงใน Frame
6.แดรกเมาส์ลากตารางที่ช่อง 1 – 6 จากนั้นคลิกปุ่ม เพื่อรวมเซลล์ 7.คลิกที่ Layout จากนั้นเลือก Common 8.คลิกในตารางที่ช้องที่ 1 คลิกปุ่ม แล้วเลือกภาพ 7 8
24
การใส่ภาพและตารางลงใน Frame
9.ที่ช่อง Properties กำหนดค่า Border = 1 เพื่อใส่เส้นกรอบให้กับภาพ 10.คลิกแถวที่ 2 ช่องสุดท้าย นำภาพมาใส่ตามตัวอย่าง
25
การใส่ภาพและตารางลงใน Frame
11. ปรับแต่งให้สวยงามและสังเกตุผลลัพธ์ 12. สังเกตุผลลัพธ์ 13.นำภาพใส่ไว้ทั้งหมด 4 ภาพโดยมีหัวข้อ NORTH, SOUTH, EAST, WEST 14.สังเกตผลลัพธ์
26
การบันทึกเฟรม 1.คลิกเมนู File > Save All
2.พิมพ์ชื่อไฟล์ที่ต้องการคลิกที่ SAVE คือ Index.htm 18 ตั้งชื่อ 2
27
การบันทึกเฟรม 3.หน้าต่าง Save As ปรากฎ เพื่อบันทึกเฟรมที่ 2 ลงให้ใส่ชื่อ Top เฟรม คลิกที่ Save ตั้งชื่อ 3
28
การบันทึกเฟรม 4.บันทึกข้อมูลและคลิกที่ F12 สังเกตุผลลัพธ์
29
THE END
งานนำเสนอที่คล้ายกัน
