หน้าแรก บริการของ dwthai.com เกี่ยวกับ dwthai.com ติดต่อ dwthai.com
พื้นฐานการใช้งาน การใช้งานที่มากกว่างาน Design ขยายความสามารถให้ DW เรื่องของ Script บทความน่ารู้
มุม Download
พูดคุยสนทนาตามประสาคนทำเว็บ
หาเพื่อนคุยคอเดียวกันกับ MSN
ติ-ชมเราบ้าง

 

:: ติดต่อเรา ::
webmaster_dwthai@yahoo.com
webmaster@dwthai.com

08 - 9495 - 7296
-------
-----------------------------------

 

This website best view with
Internet Explorer 5.5 up
or
Netscape version.7 up
  

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

และแล้วก็มาถึงคิวของบทความที่ทุกคนรอคอยนะครับ คือ เรื่องของการเลย์เอาท์ (layout) หรือการออกแบบโครงสร้างเว็บเพจ หวังว่าบทความนี้จะเป็นประโยชน์ต่อผู้ที่ต้องการออกแบบเว็บนะครับ

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

:: การ Layout ::

การเลย์เอาท์ webpage

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

 

 

 

ขั้นตอน

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

<< ตัวอย่างการเลย์เอาท์ >>

Header
MENU

 

Content

 

 

Footer

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

เมื่อเริ่มกำหนดโครงสร้างออกเป็น 4 ส่วนแล้ว จากนั้นก็จะเริ่มทำการกำหนดโครงสร้าง ๆ จริง ๆ กับโปรแกรม Dreamweaver โดยการกำหนดเป็นตาราง (Table) เพื่อให้ง่ายต่อการวาง Object ลงไป จากตัวอย่าง ผมทำการเลย์เอาท์โดยการกำหนดเป็น 3 Rows กับ 2 Columns และให้กำหนดความกว้างของตารางเป็น 760 หรือ 780 pixel ดังรูป
วิธีการเลย์เอาท์เว็บ
เหตุผลที่เราต้องกำหนดขนาดตารางเป็นดังนี้ เนื่องจาก ต้องการรองรับการแสดงผลสำหรับหน้าจอที่เป็นความละเอียด 800*600 pixel และที่ไม่ทำการกำหนดเต็มลงไป 800 pixel เลยนั้น  ก็เนื่องจากว่า...เราต้องคำนึงถึงขนาดของ Scroll Bar ของ Browser อีกด้วย

จากนั้นเราก็สามารถวาง Object ต่าง ๆ ลงไปในตาราง ในจุดนี่...เราอาจจะมีการซ้อนตาราง (Nested) ลงไปในตารางหลักของเราอีกก็ได้ แต่เราไม่ควรมีการใช้ตารางที่ซ้อนตารางมากเกินไป เนื่องจากว่า จะมีผลอย่างมากต่อการ LOAD ในขณะเรียกชมเว็บเพจนั้น หากจุดใดของตารางเราต้องการจะมีการ Merges Cell (การรวมเซลของตาราง) ก็สามารถกระทำได้ ทั้งนี้ให้เป็นไปตามจุดประสงค์ของเรา...

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

ปัญหานี้ผมต้องพบและอ่านบ่อย ๆ ที่หน้าเว็บบอร์ดของเว็บไซต์ ซึ่งปัญหานี้แท้จริงแล้วง่ายมาก ถ้าคุณเข้าใจวิธีการใช้งานตารางเพื่อการ layout หน้าเว็บเพจ เนื่องจาก...หากคุณต้องการให้หน้าเว็บเพจคุณแสดงอยู่ในตำแหน่งตรงกลาง Browser คุณก็ทำได้โดย กำหนด Align ของตารางหลักที่ใช้ในการเลย์เอาท์เว็บเพจเป็น center เพียงเท่านี้หน้าเว็บของคุณก็จะแสดงอยู่ตรงกึ่งกลางแล้ว

การกำหนดขนาดเป็น pixel กับเป็นแบบ percent (%) แตกต่างกันอย่างไร

การกำหนดขนาดเป็น pixel ลงไปกับการเลย์เอาท์เว็บเพจหรืออื่น ๆ จะเป็นการกำหนดค่าที่ตายตัวลงไปเลยว่า...เราต้องการขนาดเท่านี้แน่นอนไม่มีการเปลี่ยนแปลง เพราะถ้าเราปล่อยให้มีการเปลี่ยนแปลง หน้าเว็บเพจเราอาจจะเละไม่ได้รูปในแบบที่เราต้องการเมื่อผู้ใช้เรียกชม เช่น เรากำหนดควากว้างของตารางเป็น 150 pixel ไม่ว่าผู้ชมจะเข้ามาด้วยหน้าจอที่ Resolution ที่เท่าไหร่ เขาก็จะเห็นความกว้างของตารางในขนาด 150 pixel เท่ากันเสมอ

แต่การกำหนดเป็น percent (%) จะเป็นการกำหนดแบบยืดหยุ่น เพราะตารางหรือการเลย์เอาท์ของเราจะขึ้นอยู่กับขนาดความละเอียดของจอภาพ (Resolution) ของผู้ชมว่าเป็นเท่าไหร่ เช่น ถ้าเรากำหนดขนาดตารางเป็น 100% ลงไป ผู้ชมเมื่อชมด้วยหน้าจอเป็น 800*600 ขนาดเว็บเพจก็จะเต็มหน้าจอเขาพอดี แต่ถ้าเขาชมด้วย 1024*768 เว็บเพจของเราก็จะพอดีและเต็มหน้าจอของเขาอีกเช่นเดียวกัน เนื่องจากเป็นการกำหนดความกว้างแบบ 100 % คืออย่างไรไม่ว่าหน้าจอไหนก็เต็มพื้นที่ 100% เช่นเดียวกัน

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

BACK TOP


สงวนลิขสิทธิ์ © 2546-2550 โดย dwthai.com ห้ามการ copy ส่วนใดส่วนหนึ่งของเว็บไซต์แห่งนี้.
Copyright ©2003-2007 dwthai.com. All rights reserved. This website was created by : S.raksasuk.