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

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

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

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


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

1 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 ที่เกิดขึ้น การจัดหน้าเว็บเพจด้วยเลย์ เอาต์และเลเยอร์

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

8 ทำการออกแบบ Layout ตามที่กำหนดที่ต้องการ

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

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

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

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

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

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

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

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

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

18 4. สังเกตุผลลัพธ์จะเกิดขึ้น 3 เฟรมดังนี้ กด ALT เพื่อเลือก FRAME 4 TOP FRAME Main FRAME LEFT FRAME กด ALT การใช้งาน 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 = 0Right margin = 0 Top margin = 0 Bottom margin = 3 คลิกที่ปุ่ม OK

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

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

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

25 11. ปรับแต่งให้สวยงามและสังเกตุผลลัพธ์ 12. สังเกตุผลลัพธ์ การใส่ภาพและตารางลงใน Frame 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 CHAPTER 10 การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004.

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


Ads by Google