การ Layout คือ การกำหนดโครงร่างหรือโครงสร้างของหน้าเว็บเพจ ขั้นตอนนี้จะเป็นขั้นตอนแรกของการเริ่มออกแบบเว็บเพจ เนื่องจากว่า...ทุกเว็บเพจที่ดีต้องมีโครงร่างหรือโครงสร้าง เปรียบเสมือนบ้านหรืออาคารที่ดีต้องมีโครงสร้างที่ดีและมั่นคง เว็บเพจก็เช่นกัน เว็บเพจที่ดีก็ต้องมีการกำหนดโครงสร้างลงไปให้แน่นอนเช่นเดียวกัน Show แนวคิด และขั้นตอนการเลย์เอาท์เว็บเพจสำหรับบทความนี้ ผมจะแนะนำการออกแบบเลย์เอาท์เพื่อให้มือใหม่ได้เข้าใจโครงสร้างของหน้าเว็บนะครับ อาจจะไม่เหมาะกับผู้ที่เคยผ่านงานออกแบบเว็บมาแล้ว ซึ่งบทความนี้จะนำเสนอการใช้ตาราง หรือ Tables ในการเลย์เอาท์ ทั้งนี้เพื่อให้มือใหม่ได้เข้าใจและมองภาพของโครงสร้างเว็บเพจได้อย่างชัดเจน และก่อนจะไปลงมือปฏิบัติการเลย์เอาท์เว็บจริง ๆ กัน สิ่งที่ต้องทราบเบื้องต้นก่อน มีดังนี้ 1. ให้คุณทำการคิดและจินตนาการหน้าเว็บเพจของคุณ ว่าต้องการให้มีรูปแบบลักษณะอย่างไร ? *อย่างไรให้ลองพิจารณาจากรูปด้านล่างนี้ประกอบ เพื่อให้เห็นภาพที่ได้อธิบายไปข้างต้นได้ชัดเจนมากยิ่งขึ้น องค์ประกอบของหน้าเว็บเว็บโดยทั่วไปจะประกอบด้วยองค์ประกอบหลักอยู่ 4 ส่วน คือ 1. Header คือ ส่วนที่อาจจะเป็น Title หรือ Logo ของเว็บไซต์ ในแต่ละส่วนประกอบข้างต้น ก็จะมีหน้าที่ในการแสดงผลที่แตกต่างกันออกไป ดังที่ได้อธิบาย กำหนดโครงสร้างให้แก่หน้าเว็บเมื่อเริ่มกำหนดโครงสร้างออกเป็น 4 ส่วนแล้ว จากนั้นก็จะเริ่มทำการกำหนดโครงสร้างหน้าเว็บจริงกัน ใช้ตารางกำหนดโครงสร้างการกำหนดโครงสร้างเบื้องต้น ให้เราใช้ตาราง (Table) ในการกำหนดโครงสร้างหน้าเว็บ ทั้งนี้เพื่อให้ง่ายต่อการทำความเข้าใจ และมองเห็นภาพรวมได้ง่าย จากตัวอย่างข้างต้น ถ้าเรานำตารางมาใช้ในการวิเคราะห์โครงสร้าง จะได้เป็นตารางที่มี 3 Rows กับ 2 Columns ( 3 x 2) ดังรูปกำหนดความกว้างหน้าเว็บจากนั้นทำการกำหนดความกว้างของหน้าเว็บตามที่เราต้องการ ซึ่งการกำหนดความกว้างนี้ต้องดูความเหมาะสมต่าง ๆ ประกอบ เช่น- ขนาดความกว้างหน้าจอ ของผู้เข้าเยี่ยมชมเว็บ - ปริมาณเนื้อหาข้อมูลของเว็บไซต์เรา - อื่น ๆ *ให้เราพิจารณาตามความเหมาะสม ตัวอย่างเช่น - ขนาดความกว้างหน้าจอ (Resolution) ของผู้เยี่ยมชมเว็บปัจจุบัน (ปี 2016) นิยมใช้งานหน้าจอขนาด 1,600 x 900px - ปริมาณเนื้อหาข้อมูลของเว็บไซต์ ปานกลาง จากข้อมูลข้างต้น เราก็อาจจะกำหนดความกว้างของหน้าเว็บที่ขนาด 900px ก็น่าจะดูเหมาะสม (หรือไม่ควรเกิน 1,565px) เป็นต้น ใช้ Dreamweaver วางโครงสร้างหน้าเว็บจริง ๆ กันหลังจากที่เราได้ทำการวางโครงสร้างอะไรต่าง ๆ ตามที่ไอ้อธิบายมาข้างต้นแล้ว ต่อมาเราจะมาใช้งานโปรแกรม Dreamweaver เพื่อวางโครงสร้างหน้าเว็บ ตามที่ได้อธิบายไว้ข้างต้น ดังนี้ 1. ทำการสร้างไฟล์ใหม่ขึ้นมา (New File..) 4. เราก็จะได้ตารางที่ใช้เป็นโครงสร้างหน้าเว็บเราแล้ว ดังรูป 5. จากนั้นให้เราทำการปรับแต่งตารางโครงสร้างนี้ เช่น ปรับความกว้าง ความสูงของแต่ละส่วน เพื่อให้มีโครงสร้างเป็นในแบบเว็บเพจ ตัวอย่างดังรูป *ซึ่งในส่วนนี้คุณอาจจะต้องอ่านเรื่องของการใช้งานตารางกับโปรแกรม Dreamweaver ประกอบ (อ่านได้ที่หน้าเว็บในส่วนของ Basic ครับ)เราก็จะได้โครงสร้างหน้าเว็บ พร้อมให้เราวางส่วนประกอบปลีกย่อยต่าง ๆ ลงไปเพื่อแสดงผลแล้ว เช่น วางโลโก้ไปที่ Header, วางลิงค์ Menu ลงไปที่ Menu, พิมพ์ข้อมูล-รูปภาพลงไปที่ Contents, พิมพ์ Copyright ลงไปที่ Footer เป็นต้น . ตัวอย่างเมื่อทำการนำข้อมูลลงสู่โครงสร้างเว็บเพจภาพด้านล่างคือตัวอย่างเมื่อได้นำข้อมูลต่าง ๆ ลงสู่โครงสร้างเว็บเพจที่ได้ทำการเลย์เอาท์โครงสร้างไว้ ทำอย่างไรให้หน้าเว็บแสดงตรงกลาง ?ปัญหานี้ผมต้องพบและอ่านบ่อย ๆ ที่หน้าเว็บบอร์ดของเว็บไซต์ หากคุณต้องการให้หน้าเว็บเพจคุณแสดงอยู่ในตำแหน่งตรงกลาง Web Browser และเว็บเพจได้ใช้ Table ในการวางโครงสร้างดังข้างต้น คุณก็ทำได้โดยการกำหนด Alignment ของตารางหลักที่ใช้ในการวางโครงสร้างเว็บเพจเป็น Center เพียงเท่านี้หน้าเว็บของคุณก็จะแสดงอยู่ตรงกึ่งกลางแล้วครับ บทความนี้ เป็นบทความสำหรับมือใหม่ เพื่อให้เข้าใจการเลย์เอาท์วางโครงสร้างของหน้าเว็บ ซึ่งในบทความแนะนำการใช้งานตารางหรือ Table เพื่อให้ง่ายต่อการทำความเข้าใจและมองเห็นภาพของโครงสร้างหน้าเว็บได้ชัดเจน แต่ทั้งนี้และทั้งนั้น ปัจจุบันการออกแบบเว็บในส่วนของการเลย์เอาท์โครงสร้างหน้าเว็บนี้ Web Designer นิยมใช้ CSS ร่วมกับ Tag ของ HTML 5 ในการวางโครงสร้างมากกว่าการใช้ตาราง ซึ่งเราควรจะศึกษากันต่อไป (หรืออ่านที่บทความของ DwThai.Com ก็ได้ครับ) บทความอื่นที่คุณอาจสนใจ |