การสร้างตารางพื้นฐาน | การจัดการข้อความและรูปภาพ | การจัดการตารางที่ซับซ้อน

ในบทที่แล้วเราได้ทดลองสร้างตารางด้วยคำสั่งพื้นฐานกันไปแล้ว คงจะได้เห็นกันแล้วว่า ตารางมีส่วนสำคัญในการออกแบบหน้าตาเว็บเพจ ช่วยให้การจัดวางตำแหน่งของข้อความ รูปภาพต่างๆ อยู่ในตำแหน่งที่ต้องการได้ ทำให้ดูเป็นหมวดหมู่น่าสนใจ เราสามารถกำหนดขนาดของตารางเพื่อควบคุมการแสดงผลของหน้าเว็บไซต์ให้คงที่ แม้ผู้ชมจะดูผ่านหน้าจอด้วยขนาดที่มีความละเอียดแตกต่างกัน (640, 800, 1024 หรือมากกว่า) การแสดงผลของเว็บเพจก็จะไม่ผิดเพี้ยนไปจากที่ออกแบบไว้ ในบทนี้เราจะเรียนรู้เพิ่มเติมในเรื่องการจัดวางข้อความและรูปภาพในตาราง ให้แสดงผลสวยงาม กำหนดระยะห่างจากเส้นขอบของตาราง ความกว้างและความสูงของตารางให้เหมาะสมกับรูปภาพ

Cell Width (Cilumn Width) : การกำหนดความกว้างของตาราง

จากบทเรียนที่ผ่านมาเราได้ทดลองสร้างตารางที่มี 2 แถวและ 2 คอลัมน์ กันมาแล้วดังตัวอย่าง
 

ในตัวอย่างข้างบนจะพบว่า ตารางแต่ละช่องจะถูกแบ่งให้มีขนาดเท่ากันโดยอัตโนมัติ ไม่ว่าจะดูด้วยบราวเซอร์ที่ขนาดหน้าจอเท่าใด เราสามารถกำหนดให้การแสดงผลในแต่ละช่อง (เซล หรือคอลัมน์) มีขนาดที่ต่างกันได้ด้วยการกำหนดความกว้างภายในเซล <TD WIDTH="pixcel/percent"> ด้วยหน่วยพิกเซลหรือเปอร์เซนต์ก็ได้
 

Cell padding : ระยะห่างจากเส้นขอบของตาราง

เราสามารถกำหนดระยะห่าง ทั้งแนวตั้งและแนวนอนของข้อความและรูปภาพ จากเส้นขอบภายในช่องตารางได้ ด้วยการกำหนดค่า CELLPADDING="x" เมื่อ x มีหน่วยเป็นพิกเซล (ค่าปกติถ้าไม่ค่า padding จะมีค่าเป็น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบสามารถกำหนดค่าให้เป็น 0 ได้
 

Cell spacing : ระยะห่างระหว่างช่องตาราง

ในการสร้างตารางขนาด 2 แถว 2 คอลัมน์ (4 ช่อง) นั้น ถ้าเราจินตนาการถึงรูปสี่เหลี่ยมใหญ่ที่มีรูปสี่เหลี่ยมเล็ก 4 รูปวางซ้อนกันอยู่จะทำให้เรามองเห็นว่า ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบของสี่เหลี่ยมใหญ่ภายนอก และเส้นขอบของสี่เหลี่ยมเล็กที่อยู่ภายใน ระยะห่างระหว่างเส้นขอบทั้งสองนี้เราเรียกว่า Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถ้าเราต้องการเส้นขอบที่บางมากๆ สามารถกำหนดเป็นค่า 0 ได้
 

Tables and Images : ตารางและรูปภาพ

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

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

Working with graphic editing programs : การตกแต่งภาพกราฟิก

ในการออกแบบเว็บเพจให้ดูดี มีความสวยงามนั้น เราจำเป็นจะต้องใช้โปรแกรมตกแต่งรูปภาพซึ่งมีอยู่มากมายในท้องตลาด โปรแกรมที่เป็นที่นิยมและถือว่าเป็นสุดยอดของโปรแกรมตกแต่งภาพ ต้องยกให้ PhotoShop แต่ก็แพงมากเช่นเดียวกัน เราสามารถดาวน์โหลดโปรแกรมเวอร์ชั่นทดลองมาใช้งานได้ หรือจะไปใช้โปรแกรมอื่นๆ เช่น PaintShop Pro, Ulead PhotoImpact, PhtoScape มาใช้งานก็ได้

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

END : สรุปคำสั่งที่ใช้ในบทนี้

Next