|
|
|
|
Layout เป็นเครื่องมือสำหรับใช้ในการออกแบบหน้าเว็บเพจ จัดองค์ประกอบต่างๆในหน้าเว็บเพจให้มีรูปแบบต่างๆ
เหมาะสมกับการใช้งานในลักษณะต่างๆ ทำให้เกิดความสะดวกในการออกแบบเว็บเพจยิ่งขึ้น
โปรแกรม Dreamweaver มีส่วน View และ Layout ซึ่งเลือกได้จากแถบ Layout โดยมีไอคอนให้เลือกสลับมุมมองการทำงาน
ระหว่างมุมมองมาตรฐาน (Standard View) และมุมมอง Layout (Layout View) (ดูรูปที่
1)
|
|
รูปที่ 1 เครื่องมือออกแบบ Layout
รูปที่ 2 Layout Table และ Layout Cell
|
การออกแบบ Layout
1. คลิกปุ่ม Layout View จากแถบ Layout เพื่อเปลี่ยนเป็นมุมมอง Layout
2. ในส่วน Layout คลิกไอคอน Draw Layout Table
แล้วลากเมาส์วาดเลเอาท์แบบตาราง
3. คลิกไอคอน Draw Layout Cell และวาดเลเอาท์แบบเซลล์ ลงในตาราง ตามจำนวนที่ต้องการ
จะได้ตารางและเซลล์ตามรูปที่ 2 และ รูปที่ 3
4. ปรับขนาดตารางและเซลล์ตามความเหมาะสม
5. คลิกไอคอน Standard View เพื่อกลับไปสู่มุมมองมาตรฐาน
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Layout Table และ Layout Cell
ลักษณะของ Layout Cell จะมีเส้นกรอบสีน้ำเงินล้อมรอบ ส่วนตารางมีเส้นสีเขียวล้อมรอบ
แต่ละตารางสามารถแยกออกจากกันได้ แสดงขนาดความกว้างของตารางด้านบน
การออกแบบเว็บเพจโดยใช้ Layout ควรกำหนด Table Layout ก่อน แล้วจึงใส่ Layout
Cell ในส่วนต่าง (ดูรูปที่2 ประกอบ)
|
รูปที่ 3 Layout Table และ Layout Cell
|
|
|
|
การปรับคุณสมบัติของ
Layout
การปรับรายละเอียดของ Layout ให้กดเมาส์ที่ Layout Cell หรือ Layout
Table แล้วระบุรายการที่ต้องการแก้ไข ในหน้าต่าง Properties ดังมีรายละเอียดในรูป
Layout Cell Properties (รูปที่ 4) และ Layout Table Properties (รูปที่
5)
รายละเอียดของ Layout Cell Properties
รูปที่
4Layout Cell Properties
Width ความกว้างของเซลล์ Fixed ความกว้างแบบคงที่ Autostretch ขยายความกว้างได้
Height ความสูงของเซลล์
Horz ตำแหน่งข้อมูลในแนวนอนของเซลล์
Vert ตำแหน่งข้อมูลในแนวตั้งของเซลล์
Bg สีพื้นของเซลล์
No Wrap กำหนดให้ยกเลิกการตัดข้อความในเซลล์
รายละเอียดของ Layout Table Properties
รูปที่ 5 Layout Table Properties
Width ความกว้างของตาราง Fixed ความกว้างแบบคงที่ Autostretch ขยายความกว้างได้
Height ความสูงของตาราง
CellPad ระยะห่างระหว่างข้อความกับตาราง
CellSpace ระยะห่างระหว่างเซลล์ในตาราง
Bg สีพื้นของตาราง
|
|
|
กิจกรรมที่
7
1. File > New เพื่อสร้างเว็บเพจใหม่
2. Modify > Page Properties
3. ออกแบบหน้าเว็บเพจ โดยใช้ Layout Table และ Layout Cell
4. ใส่ข้อความและรูปภาพตามความเหมาะสม
5. บันทึกไฟล์ลงใน Folder ที่กำหนดไว้แล้ว ด้วยคำสั่ง File > Save
|
|
|
การออกแบบหน้าเว็บเพจ
(Layout)