การสร้างเว็บไซต์ด้วย Adobe Dreamweaver CS4 ตอนที่สอง

ตอนที่สอง การกำหนด Page Layout คือเมนู ภาพและส่วนของเนื้อหา ปกติเวลาอกแบบ เราจะทำให้กระดาษหรือโปรแกรมออกแบบ เช่น Firework หรือ Photoshop เป็นต้น ซึ่งเราเรียนว่า Comp โดยปัจจุบันจะนิยมออกแบบให้เป็นแบบ CSS ซึ่งต้องการพื้นฐานของผู้ที่เคยทำหรือมีประสบการณ์ใกรสร้างเว็บไซต์มาบ้าง CSS จะให้ความสะดวกในการปรับแต่งแก้ไขมากกว่ากรออกแบบ Page layout แบบเดิม คือการใช้ตารางช่วยในจัดวางหน้าตาของเว็บ ซึ่งปัจจุบันไม่นิยมแล้ว
ขั้นตอนแรก

1 คลิกเมนู File เลือก New
2 คลิกำสั่ง Create
3 คลิกเมนู save as ใส่ index.html และกำหนด Page title เป็น Cafe Townsend
4 คลิกเมนู File เลือก save
การแทรกตารางลงในหน้า web page
1 คลิกเมนู Insert > Table.
2 ใส่ 3 ในช่องจำนวนแถว
3 ใส่ 1 ในช่องของคอลัม
4 ใส่ 700 ในช่องความกว้าง
5 ใน pop up เมนูกำหนดค่าให้เป็น pixel
6 ใส่ค่าขอบตารางเป็น 0
7 ใส่ 0 ในช่อง Cell Padding
8 ใส่ 0 ในช่อง Cell Spacing
แทรกตารางที่สองใต้ตารางที่หนึ่ง
แทรกตารางที่สามใต้ตารางที่สอง
การกำหนดคุณสมบัติขอตารางแรก
1เลือก View > Table Mode > Expanded Table Mode ตามภาพประกอบ

2 คลิกแถวที่ 1 กำหนดค่า H เป็น 90 กด Enter
3 คลิกแถวที่ 2 กำหนดค่า H เป็น 166 กด Enter
4 คลิกแถวที่ 3 กำหนดค่า H เป็น 24 กด Enter
การกำหนดคุณสมบัติขอตารางสอง

1 คลิกคอลัมที่ 1 กำหนดค่า W เป็น 140 กด Enter
2 คลิกคอลัมที่ 2 กำหนดค่า W เป็น 230 กด Enter
3 คลิกคอลัมที่ 3 กำหนดค่า W เป็น 330 กด Enter
โดยตารางที่สอง เราไม่กำหนดความสูง H เนื่องจากข้อความหรือรูปภาพที่ใส่เข้าไปจะเป็นตัวกำหนดความสูงเอง

การกำหนดคุณสมบัติขอตารางสาม

1 คลิกแถวที่ 1 กำหนดค่า H เป็น 24 กด Enter

ถ้าทำถูกต้องตามขั้นตอนและตามภาพตัวอย่างเราก็จะได้ เว็บเพจ Layout ที่มีรูปร่างหน้าตาประมาณนี้ครับ
# คลิก Exit Expanded Tables mode บนแถบเมนูด้านบน เพื่อกลับสู่มุมมอง Standard mode.
# คลิก Save .


การกำหนดกรอบรูปภาพ Image Placeholder

# คลิกที่ช่องแรกของตาราง .
# คิก Insert > Image Objects > Image Placeholder.
#

จากนั้นกำหนดค่า ตามตัวอย่าง :

* พิมพ์ banner_graphic ในช่อง Name text box.
* ใส่ค่า 700 ในช่อง W text box.
* ใส่ค่า 90 ในช่อง H text box.
* คลิก color box แล้วเลือกสี. ตามตัวอย่างกำหนดค่าเป็นสีแดงน้ำตาล(#993300).
* ปล่องช่อง Alternate Text text box ว่าง.
* คลิก save.

การกำหนดสีให้กับเพจและตารางที่เหลือ
# คลิก คอลัมแรกของตารางที่สอง .
# คลิก tag (cell tag) บริเวณด้านล่างของตาราง ตามภาพประกอบ .
ในช่องของ Background Color ใส่ค่า #993300 และกด Enter
สำหรับคอลัมที่สองและสาม ให้คลิก และกำหนดค่า ในช่องของ Background Color ใส่ค่า #F7EEDF และกด Enter

จากนั้นให้คลิกบริเวณที่ว่างนอกตาราง เพื่อกำหนดคุณสมบัติของเพจ
คลิก Modify > Page Properties.
กำหนดค่าสีของ Background Color #000000 คลิก OK
ก็จะเสร็จสิ้นขั้นตอนการกำหนด Page Layout ขั้นตอนต่อไปเราจะมาเรียนรู้วิธีการใส่รูปภาพและเนื้อหาเข้าไปในห้าเวบเพจที่เราได้จัดเตรียมไว้