ให้นักศึกษาเปิดโปรแกรม Dreamweaver และทำการสร้างตามแบบตัวอย่างทีละแบบ

กำหนดให้สร้าง folder ตามต้องการ เช่น d:\dc386

แบบที่ 1 :  คลิกดูตัวอย่าง

- สร้างหน้าเว็บด้วย Dreamweaver

- Page Properties + Background Color + ....(ให้กำหนดค่าสีเหมือนตัวอย่าง)

- Save file ชื่อ test01.html  เก็บไว้ใน folder ที่สร้าง

------------------------------------------------------------

แบบที่ 2 :  คลิกดูตัวอย่าง

- ให้เปิดโปรแกรม photoshop สร้างภาพพื้นหลังเป็นสีเดียว และบันทึกภาพลงใน Folder (ชื่อไฟล์ต้องไม่เป็นภาษาไทย ไม่ควรเคาะวรรค)

-  สร้างหน้าเว็บด้วย Dreamweaver + บันทึกหน้าเว็บไซต์ เช่น test02.html  มาไว้ที่ Folder เดียวกับรูปภาพก่อน

-  Page Properties + Background image + ....

-   Save file ชื่อ test02.html

------------------------------------------------------------

แบบที่ 3 :  คลิกดูตัวอย่าง

- สร้างภาพพื้นหลังเองด้วยโปรแกรม Photoshop และนำมาวางไว้ที่โปรแกรม Dreamweaver

- Save file ชื่อ test03.html

------------------------------------------------------------

แบบที่ 4 :  คลิกดูตัวอย่าง

- ให้หาภาพพื้นหลังที่เป็นแบบ pattern จากอินเทอร์เน็ต และนำมาวางไว้ที่โปรแกรม Dreamweaver

- Save file ชื่อ test04.html

------------------------------------------------------------

แบบที่ 5 :  คลิกดูตัวอย่าง

(Download ภาพพื้นหลัง)

------------------------------------------------------------

แบบที่ 6 :  คลิกดูตัวอย่าง

(Download ภาพพื้นหลัง)

- ให้บันทึกภาพพื้นหลังตามตัวอย่าง และนำมาวางไว้ที่โปรแกรม Dreamweaver

- เคาะแป้น enter ลงมาเรื่อยจนเกิด scroll bar

- Save file ชื่อ test05.html

- สังเกตผลที่ได้ เปรียบเทียบกับตัวอย่าง

Tip:  พิมพ์คำสั่งบรรทัดสีแดงเพิ่มตามตัวอย่าง โดยแทรกหน้า code ของโปรแกรม Dreamweaver

body {
background-image: url(bg03.jpg);
background-attachment:fixed;
}

------------------------------------------------------------