งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004"— ใบสำเนางานนำเสนอ:

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


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

งานนำเสนอที่คล้ายกัน


Ads by Google