ทดลองใช้ Dreamweaver ทำเว็บเพจ (ตอนที่ 2)

Dreamweaver

    จากตอนที่ 1 ได้ทำการปรับระบบให้ Dreamweaver สามารถใช้งานกับภาษาไทยได้แล้วในบทนี้จะเป็นเนื้อหาการสร้างตัวเว็บเพจ

    จากรูปที่ได้ออกแบบไว้ในตอนที่ 1 ให้ก็ให้ตัดรูปออกมาเป็นส่วนๆ ซึ่งจะใช้โปรแกรมช่วยเช่น เครื่องมือ Slice tool ของ Photoshop หรือ Crop ของ Illustrator (อ่านรายละเอียดการตัดรูปได้ในหัวข้อ Photoshop ภายในเว็บ)

หลังจากตัดรูปออกมาจะได้รูปทั้งหมด 10 รูปดังนี้

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



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



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



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



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



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



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



8.กรอบของ search



9.รูป search



10.logo เว็บ



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



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

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

1.สร้างไซต์ใหม่

    การเริ่มทำเว็บไซต์ด้วย Dreamweaver ที่ถูกต้องจะต้องสร้าง site ขึ้นมาใน Dreamwerver ก่อนโดยเลือกที่ 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



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