About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การ Layout โครงสร้างหน้าเว็บ (Web Page Layout) [Article ID : 164]


เรื่อง :: การ Layout โครงสร้างหน้าเว็บเพจหน้าเว็บเพจ

การ Layout คือ การกำหนดโครงร่างหรือโครงสร้างของหน้าเว็บเพจ ขั้นตอนนี้จะเป็นขั้นตอนแรกของการเริ่มออกแบบเว็บเพจ เนื่องจากว่า...ทุกเว็บเพจที่ดีต้องมีโครงร่างหรือโครงสร้าง เปรียบเสมือนบ้านหรืออาคารที่ดีต้องมีโครงสร้างที่ดีและมั่นคง เว็บเพจก็เช่นกัน เว็บเพจที่ดีก็ต้องมีการกำหนดโครงสร้างลงไปให้แน่นอนเช่นเดียวกัน

แนวคิด และขั้นตอนการเลย์เอาท์เว็บเพจ

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

1. ให้คุณทำการคิดและจินตนาการหน้าเว็บเพจของคุณ ว่าต้องการให้มีรูปแบบลักษณะอย่างไร ?
2. หลังจากนั้นให้เริ่มทำการ Layout ตามจินตนาการของคุณ โดยการเลย์เอาท์จะมีลักษณะเป็นการใช้ตารางในการจัดวางองค์ประกอบต่าง ๆ
3. การเลย์เอาท์ทั่ว ๆ ไป ให้เราแบ่งการวางองค์ประกอบหน้าเว็บออกเป็น 4 ส่วน คือ Header, Menu, Contents และ Footer
4. จากนั้นก็เริ่มลงมือทำการ Layout ได้เลยครับ

*อย่างไรให้ลองพิจารณาจากรูปด้านล่างนี้ประกอบ เพื่อให้เห็นภาพที่ได้อธิบายไปข้างต้นได้ชัดเจนมากยิ่งขึ้น

องค์ประกอบของหน้าเว็บ

เว็บโดยทั่วไปจะประกอบด้วยองค์ประกอบหลักอยู่ 4 ส่วน คือ

1. Header คือ ส่วนที่อาจจะเป็น Title หรือ Logo ของเว็บไซต์
2. Menu คือ ส่วนที่จะเป็นจุด Link เพื่อเชื่อมไปหาเพจในเนื้อหาอื่น ๆ ที่เราแบ่งออกไว้เป็น Category (หมวดหมู่)
3. Contents คือ ส่วนที่สำคัญที่สุด เป็นส่วนที่จะทำการนำเสนอข้อมูล หรืออื่น ๆ ให้แก่ผู้เยี่ยมชมเว็บไซต์ได้อ่าน
4. Footer คือ ส่วนสรุปจบท้ายของเว็บเพจ ในส่วนนี้อาจจะเป็น E-mail ของ Website หรือ การอ้างอิงสิทธิ์ หรืออื่นๆ

ในแต่ละส่วนประกอบข้างต้น ก็จะมีหน้าที่ในการแสดงผลที่แตกต่างกันออกไป ดังที่ได้อธิบาย

กำหนดโครงสร้างให้แก่หน้าเว็บ

เมื่อเริ่มกำหนดโครงสร้างออกเป็น 4 ส่วนแล้ว จากนั้นก็จะเริ่มทำการกำหนดโครงสร้างหน้าเว็บจริงกัน

ใช้ตารางกำหนดโครงสร้าง

การกำหนดโครงสร้างเบื้องต้น ให้เราใช้ตาราง (Table) ในการกำหนดโครงสร้างหน้าเว็บ ทั้งนี้เพื่อให้ง่ายต่อการทำความเข้าใจ และมองเห็นภาพรวมได้ง่าย จากตัวอย่างข้างต้น ถ้าเรานำตารางมาใช้ในการวิเคราะห์โครงสร้าง จะได้เป็นตารางที่มี 3 Rows กับ 2 Columns ( 3 x 2) ดังรูป

กำหนดความกว้างหน้าเว็บ

จากนั้นทำการกำหนดความกว้างของหน้าเว็บตามที่เราต้องการ ซึ่งการกำหนดความกว้างนี้ต้องดูความเหมาะสมต่าง ๆ ประกอบ เช่น
- ขนาดความกว้างหน้าจอ ของผู้เข้าเยี่ยมชมเว็บ
- ปริมาณเนื้อหาข้อมูลของเว็บไซต์เรา
- อื่น ๆ
*ให้เราพิจารณาตามความเหมาะสม
ตัวอย่างเช่น
- ขนาดความกว้างหน้าจอ (Resolution) ของผู้เยี่ยมชมเว็บปัจจุบัน (ปี 2016) นิยมใช้งานหน้าจอขนาด 1,600 x 900px
- ปริมาณเนื้อหาข้อมูลของเว็บไซต์ ปานกลาง
จากข้อมูลข้างต้น เราก็อาจจะกำหนดความกว้างของหน้าเว็บที่ขนาด 900px ก็น่าจะดูเหมาะสม (หรือไม่ควรเกิน 1,565px) เป็นต้น

ใช้ Dreamweaver วางโครงสร้างหน้าเว็บจริง ๆ กัน

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

1. ทำการสร้างไฟล์ใหม่ขึ้นมา (New File..)
2. ที่หน้าต่าง Insert เลือกที่ Table เพื่อสร้างตาราง ซึ่งตารางที่สร้างนี้จะเป็นตารางที่ใช้ในการกำหนดโครงสร้างหน้าเว็บ ดังรูป 3. จากนั้นที่หน้าต่าง Table ให้ทำการกำหนดค่าตามที่ได้อธิบายไปในขั้นตอนของการกำหนดโครงสร้างหน้าเว็บจะได้ ดังรูป *Rows : 3, Columns : 2, Table width : 900px

4. เราก็จะได้ตารางที่ใช้เป็นโครงสร้างหน้าเว็บเราแล้ว ดังรูป 5. จากนั้นให้เราทำการปรับแต่งตารางโครงสร้างนี้ เช่น ปรับความกว้าง ความสูงของแต่ละส่วน เพื่อให้มีโครงสร้างเป็นในแบบเว็บเพจ ตัวอย่างดังรูป *ซึ่งในส่วนนี้คุณอาจจะต้องอ่านเรื่องของการใช้งานตารางกับโปรแกรม Dreamweaver ประกอบ (อ่านได้ที่หน้าเว็บในส่วนของ Basic ครับ)
เราก็จะได้โครงสร้างหน้าเว็บ พร้อมให้เราวางส่วนประกอบปลีกย่อยต่าง ๆ ลงไปเพื่อแสดงผลแล้ว เช่น วางโลโก้ไปที่ Header, วางลิงค์ Menu ลงไปที่ Menu, พิมพ์ข้อมูล-รูปภาพลงไปที่ Contents, พิมพ์ Copyright ลงไปที่ Footer เป็นต้น .

ตัวอย่างเมื่อทำการนำข้อมูลลงสู่โครงสร้างเว็บเพจ

ภาพด้านล่างคือตัวอย่างเมื่อได้นำข้อมูลต่าง ๆ ลงสู่โครงสร้างเว็บเพจที่ได้ทำการเลย์เอาท์โครงสร้างไว้

ทำอย่างไรให้หน้าเว็บแสดงตรงกลาง ?

ปัญหานี้ผมต้องพบและอ่านบ่อย ๆ ที่หน้าเว็บบอร์ดของเว็บไซต์ หากคุณต้องการให้หน้าเว็บเพจคุณแสดงอยู่ในตำแหน่งตรงกลาง Web Browser และเว็บเพจได้ใช้ Table ในการวางโครงสร้างดังข้างต้น คุณก็ทำได้โดยการกำหนด Alignment ของตารางหลักที่ใช้ในการวางโครงสร้างเว็บเพจเป็น Center เพียงเท่านี้หน้าเว็บของคุณก็จะแสดงอยู่ตรงกึ่งกลางแล้วครับ
บทความนี้ เป็นบทความสำหรับมือใหม่ เพื่อให้เข้าใจการเลย์เอาท์วางโครงสร้างของหน้าเว็บ ซึ่งในบทความแนะนำการใช้งานตารางหรือ Table เพื่อให้ง่ายต่อการทำความเข้าใจและมองเห็นภาพของโครงสร้างหน้าเว็บได้ชัดเจน แต่ทั้งนี้และทั้งนั้น ปัจจุบันการออกแบบเว็บในส่วนของการเลย์เอาท์โครงสร้างหน้าเว็บนี้ Web Designer นิยมใช้ CSS ร่วมกับ Tag ของ HTML 5 ในการวางโครงสร้างมากกว่าการใช้ตาราง ซึ่งเราควรจะศึกษากันต่อไป (หรืออ่านที่บทความของ DwThai.Com ก็ได้ครับ)
...และขอย้ำว่าเราต้อง Layout หน้าเว็บนะครับ เพราะผมเห็นมือใหม่หลาย ๆ ท่าน ใช้วิธีการ...อยากจะวางอะไรก็วาง ไม่มีโครงสร้างเว็บเพจ ผลท้ายสุดความเป็นเว็บไม่มี แต่กลับมีความเป็นเอกสาร Ms Word ขึ้นมาแทน...สวัสดีครับ.
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การตรวจสอบรูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page

เรื่อง : การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้...  

Insert รูปภาพกับ Dreamweaver แล้วรูปไม่แสดงที่ Browser

เรื่อง : ใช้ Dreamweaver แทรกรูปภาพแล้วรูปไม่แสดงที่ Web Browser คำถามที่ผมมักจะพบอยู่บ่อย ๆ กับการใช้งาน Dreamwe...  

ชื่อไฟล์กับเว็บไซต์ (File Name for Web)

เรื่อง : การตั้งชื่อไฟล์ที่ใช้กับเว็บไซต์ ชื่อไฟล์ (File Name)...หลาย ๆ คนคงนึกขำ หรือนึกไม่อยากอ่านกับ...  

การใช้ Developer Tools ใน Web Browser

เรื่อง : มารู้จักเครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่มีมากับ Web Browser บทความนี้มาพูดถึงเรื่อง Feature ที่มีมากับ Web Br...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*