หลังจากที่เราได้ออกแบบเว็บไซต์เรียบร้อยแล้ว ในบทนี้เราจะเอาเว็บไซต์ที่เราออกแบบนั้นมาแบ่งเป็นส่วนๆ สำหรับเครื่องมือนั้นก็มีหลายตัวเช่น Photoshop เราสามารถใช้ slice tools ในการแบ่งภาพใหญ่ๆออกเป็นส่วนเล็กๆ

ตามการออกแบบในหน้าแรกเราสามารถแบ่งเว็บไซต์ออกได้เป็น 10 ส่วน

1. พื้นหลังของเว็บเพจ

2. พื้นหลังของส่วนแสดง menu

3. ขอบล่างของส่วนแสดง menu

4. ขอบบนของกรอบแสดงเนื้อหา

5. ขอบล่างของกรอบแสดงเนื้อหา

6. ขอบขวาของ search

7. ขอบซ้ายของ search

8. กรอบของ search

9. รูป search

10. logo เว็บ

11. สัญลักษณ์ @

เก็บรูปทั้งหมดไว้ในโฟล์เดอร์ชื่อ images

ขึ้นตอนการสร้างเว็บเพจด้วย Dreamweaver

1. สร้างไซต์ใหม่
เริ่มทำเว็บไซต์ด้วย Dreamweaver ที่ถูกต้องจะต้องสร้าง site ขึ้นมาใน Dreamweaver ก่อนโดยเลือกที่ site > new site ตามรูปด้านล่างเพื่อเป็นการสร้างฐานข้อมูลใหม่ให้กับ Dreamweaver

เมื่อเลือกแล้วจะมีหน้าต่างขึ้นมาดังภาพด้านล่าง มีรายละเอียดดังนี้

Site name ใส่ชื่อของเว็บไซต์ เช่น ตัวอย่าง ตั้งว่า Ex
Local root folder เป็น folder ที่ใช้ในการเก็บไฟล์ทั้งหมดในเว็บไซต์
Default images folder เป็น folder ที่ใช้เก็บไฟล์รูป โดยจะต้องสร้างอยู่ใน Local root folder

เมื่อสร้างเสร็จจะเป็นดังรูปด้านล่าง ให้นำรูปที่เราตัดไว้ทั้ง 10 รูปไปเก็บไว้ที่โฟล์เดอร์ images ที่สร้างขึ้น

2. สร้าง CSS file
สร้าง css folder สำหรับกำหนดรูปแบบในเว็บไซต์ (สามารถอ่านรายละเอียดได้ในหัวข้อ CSS ) สร้าง folder โคยคลิกขวาที่ชื่อเว็บไซต์ดังรูป

เมื่อสร้าง css folder เรียบร้อยแล้วขั้นตอนต่อไปคือสร้างไฟล์ css คลิกที่หน้าจอคำว่า CSS ดังรูป

เขียน CSS ตามไฟล์ที่แสดง สามารถอ่านรายละเอียดได้ในไฟล์

คลิกเพื่อดูรายละเอียดไฟล์ CSS

เมื่อเขียนเสร็จแล้ว save ในชื่อ style.css ใน CSS folder

บทนี้ก็จบเพียงเท่านี้ บทต่อไปจะเป็นการใส่รูปและเนื้อหา ในเว็บเพจ