หน่วยการเรียนรู้ 7

การใช้เลย์เอาท์

เลย์เอาท์ ใช้สำหรับการออกแบบหน้าเว็บ จัดส่วนต่าง ๆ ของหน้าเว็บตามต้องการ เลย์เอาท์ มี 2 แบบ คือ Layout Table และ Layout Cell ช่วยในการออกแบบหน้าเว็บ การใช้ Layout Table และ Layout Cell ต้องไปที่ View > Table Mode > Layout Mode จะพบหน้าจอดังภาพ

การสร้าง Layout Table

ให้คลิกเลือกที่รูป

แล้วนำมาลากเป็นรูปสี่เหลี่ยม โปรแกรมจะวาดขอบเขตของตารางให้ ดังภาพ

เราสามารถปรับความกว้างและความยาวของตารางโดยการคลิกลากปุ่มรอบขอบเขตของตาราง

ถ้าต้องการแก้ไขปรับปรุงตาราง ต้องแก้ไขที่ property ของตาราง ดังนี้

• 1. Fixed เป็นการกำหนดความกว้างความสูงแบบตายตัว โดยมีหน่วยเป็น pixel

  2. Autostretch เป็นการกำหนดช่องตารางขวามือสุด สามารถยืดหดได้ตามขนาดของหน้าจอ

  3. Height เป็นการกำหนดความสูง

  4. CellPad กำหนดระยะห่างจากเนื้อหาใน cell กับขอบ Cell

  5. CellSpace กำหนดระยะห่างระหว่าง Cell

  6. Clear Row Heights ปกติ Dreamweaver จะกำหนดความสูงของ Cell ทุก Cell ในตาราง ควรจะคลิกปุ่มนี้เมื่อเติมข้อมูลลงใน Cell แล้วเท่านั้น

  7. Make Widths Consistent บางครั้งอาจจะมีข้อมูลใน Cell ที่ทำให้ Cell ขยายออกไป เช่น กำหนดความกว้างของ Cell เท่ากับ 100 แต่นำภาพขนาดเกินความกว้างของ Cell ทำให้ Cell ขยายออกไป จึงทำให้ ค่าความกว้างที่กำหนด กับที่เป็นจริงไม่ตรงกัน ความกว้างที่ขยายออกไป จะอยู่ในวงเล็บ

• 1. Remove All Spacers เอากราฟฟิกของโปรแกรมที่ใช้สำหรับทำให้ตารางมีความกว้างตามกำหนด

  2. Remove Nesting

  3. Remove Nesting เอาตารางที่อยู่ในตารางอื่นออก โดยไม่ทำให้เนื้อหายังคงอยู่เหมือนเดิม

  4. Bg เป็นการกำหนดสีพื้นของตาราง

การสร้าง Layout Cell

ให้คลิกเลือกที่รูป

แล้วนำมาลากเป็นรูปสี่เหลี่ยม โปรแกรมจะวาดขอบเขตของตารางให้ ดังภาพ

เมื่อสร้างเสร็จ Cell จะอยู่ในสภาพพร้อมที่จะรับข้อความ ถ้าดู Property ในขณะนี้ จะพบว่าเป็น Property ของตัวอักษร

ถ้าต้องการเปลี่ยนแปลงลักษณะของ Cell ให้นำเคอร์เซอร์มาที่เส้นขอบ เส้นขอบจะเปลี่ยนเป็นสีแดง ซึ่งสามารถคลิกได้

ให้คลิกเลือกที่เส้นขอบ จะเกิดเส้นและมีปุ่มรอบ ๆ พร้อมกันนั้น จะเห็น Property ของ cell สามารถเปลี่ยนแปลงได้

ถ้าต้องการย้ายตำแหน่ง อาจจะคลิกที่เส้นขอบแล้วลากไปยังตำแหน่งที่ต้องการ

ในกรณีที่ความกว้างที่กำหนด กับความกว้างของ Cell ที่เป็นจริงไม่เท่ากัน เนื่องมาจากข้อมูลใน Cell ทำให้ Cell มีความกว้างเพิ่มขึ้น สามารถที่จะคลิกที่ลูกศรเพื่อกำหนดความกว้างของ Cell นั้น ๆ ให้ตรงตามจริงได้

โครงสร้างของหน้าเว็บ

การออกแบบเว็บ นิยมใช้ตารางเป็นกรอบกำหนดส่วนต่าง ๆ ทั้งนี้เพราะ HTML ไม่เหมือนการพิมพ์เอกสารทั่ว ๆ ไป เพราะ เป็นการนำภาพและข้อความมาต่อ ๆ กัน ถ้าต้องการขึ้นบรรทัดใหม่ จะต้องมี TAG บอกให้ขึ้นบรรทัดใหม่ การย่อหน้า การเว้นวรรค ไม่สามารถทำได้เหมือนโปรแกรมพิมพ์เอกสารโดยทั่วไป ดังนั้นการกำหนดว่า อะไรจะอยู่ส่วนไหนของหน้าจอ วิธีที่สะดวกและง่ายที่สุด คือการใช้ตาราง

ตารางประกอบด้วย ตาราง (table) และห้องของตาราง (cell) เราจะนำภาพและข้อความมาไว้ในห้อง ส่วนตารางไม่สามารถนำภาพหรือข้อความบรรจุโดยตรง แต่มีหน้าที่หลักในการกำหนดตำแหน่ง และเป็นที่สำหรับวาดห้องของตาราง

เราจะใช้ตารางในการออกแบบหน้าเว็บ ของศูนย์การศึกษานอกโรงเรียนภาคกลาง ดังนี้

จะเห็นหน้าเว็บนี้ ประกอบไปด้วย 3 ส่วนคือ

• • ส่วนที่ 1 ส่วนหัว

  • ส่วนที่ 2 ส่วนซีกซ้ายสำหรับเมนู

• ส่วนที่ 3 ส่วนหลักสำหรับเนื้อหา

  • Dreamweaver ให้ความสะดวกในการออกแบบหน้าเว็บโดยมีเครื่องมือสำหรับวางตาราง (layout table) และห้องของตาราง (layout cell) ไว้ให้เรียบร้อยแล้ว ถ้าต้องการจัดอะไร อยู่แหน่งใด ก็ให้วาดตารางและห้องของตาราง ตามตำแหน่งที่ต้องการ โปรแกรม Dreamweaver จะทำหน้าที่แปลงเป็นโค้ด HTML ให้ทันที ทำให้การออกแบบหน้าเว็บ ทำได้ง่ายและรวดเร็ว

การสร้างเลย์เอาท์เทเบิ้ล และเลย์เอาท์เซลล์

การใช้ตารางมี 3 ลักษณะ คือ

• 1. Standard Mode เป็นการใช้ตามปกติ ใช้สำหรับนำเสนอข้อมูลในรูปตาราง

  2. Expanded Tables Mode ใช้สำหรับการทำงานกับตาราง โปรแกรมจะขยายตาราง ทำให้มองเห็นชัดเจนขึ้น สามารถคลิกเมาส์ในตำแหน่งที่ถูกต้องได้ดีขึ้น

1. Layout Mode ใช้สำหรับการออกแบบหน้าเว็บ

2. เราสามารถเข้าหน้าออกแบบด้วยตาราง โดยไปที่ View > Table Mode > Layout Mode หรือโดยการคลิกที่เมนู ดังภาพ

1. ในภาพ เมื่อคลิกเมนู Layout จะเห็น Table Mode เป็น 3 ลักษณะ โดยปกติเมื่อเข้ามา จะอยู่ในลักษณะ Standard Mode ถ้าดูบนแถบเมนู จะเห็นว่าเครื่องมือบางอย่างที่ใช้งานได้ แต่บางอย่างก็ไม่สามารถใช้งานได้ ในที่นี้เราต้องการออกแบบหน้าเว็บ ให้คลิกแถบ Layout ดังภาพ

1. จะสังเกตเห็นว่าเมื่อกดปุ่ม Layout เครื่องมือบนแถบเครื่องมือจะสามารถใช้ได้ 2 เครื่องมือ คือ

   1. • เครื่องมือสำหรับวาดตาราง

      • เครื่องมือสำหรับวาดห้องตาราง

• 1. หลักการออกแบบหน้าเว็บด้วยตาราง

     1. layout cell จะต้องอยู่ใน layout table

     2. ถ้าวาด layout cell ก่อน โปรแกรม Dreamweaver จะวาดตารางครอบ cell นั้น ๆ

     3. ตารางสามารถซ้อนตารางได้

     4. ถ้ามีข้อความหรือภาพในหน้าเว็บ และจะสร้างตารางใหม่ในบริเวณพื้นที่ว่าง ตารางใหม่จะสร้างได้เฉพาะใต้รูป หรือ ข้อความ เท่านั้น

     5. ช่องตาราง หรือ cell จะถูกบังคับด้วยขนาดของตารางของมัน จะกำหนดขนาดจนเกินออกไปนอกตารางไม่ได้

     6. ในกรณีที่มีการซ้อนตาราง ข้อความ หรือภาพภายในตารางย่อย จะไม่ถูกกระทบกระเทือนเมื่อมีการเปลี่ยนแปลงขนาดของตารางภายนอก

  2. ขั้นตอนการออกแบบหน้าเว็บด้วยตาราง

• • 1. เลือก Layout Mode โดยไปที่ View > Table Mode > Layout Mode หรือ คลิกเลือก Layout บนแถบ Insert แล้วคลิก Layout