วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 1 [Article ID : 212]

อธิบายเว็บในแบบ Responsive ให้เข้าใจกันง่าย ๆ ก็คือ การออกแบบการแสดงผลของเว็บ ที่สามารถแสดงผลได้กับหลากหลายอุปกรณ์ เนื่องจาก ปัจจุบันการใช้งานเว็บไม่ได้มีแต่เฉพาะ Computer ประเภทตั้งโต๊ะ หรือ Notebook เท่านั้น ยังมีอุปกรณ์อื่น ๆ อีกที่สามารถใช้งานเว็บได่ อย่างเช่น Smart Phone ก็พวก iPhone, Android หรืออื่น ๆ ที่เราใช้กันอยู่ในปัจจุบันกับโทรศัพท์มือถือ หรือ Tablet นี้แหละครับ อุปกรณ์พวกนี้ เราจะพบว่า หน้าจออุปกรณ์นั้น มีขนาดที่หลากหลายมาก บางเครื่องหน้าจอเล็ก บางเครื่องหน้าจอใหญ่ ปัญหาเรื่องขนาดหน้าจอในการแสดงผลสำหรับเว็บจึงเกิดขึ้นมา ทำให้นักพัฒนาเว็บต้องคิดค้นหาวิธีในการออกแบบอย่างไรให้รองรับการแสดงผลได้ทุก ๆ อุปกรณ์ แม้จะไม่ 100% กับทุก ๆ ขนาดหน้าจอที่ใช้กันในปัจจุบัน แต่อย่างน้อยควรแสดงผลได้ดีกับอุปกรณ์ที่คนส่วนใหญ่นิยมใช้กัน นี่คือภาพรวมของเว็บในแบบ Responsive ครับ

สำหรับนักพัฒนาเว็บที่ใช้งานโปรแกรม Dreamweaver ในการออกแบบ โปรแกรม Dreamweaver จัดเตรียม Feature ซึ่งชื่อว่า Fluid Grid Layouts ไว้ช่วยนักพัฒนาเว็บในการออกแบบเว็บในแบบ Responsive ซึ่ง Feature นี้ มีมากับเวอร์ชั่น CS6 ขึ้นไป ดังรูป

จากรูปข้างต้น เมื่อได้ทำการ New Fluid Grid Layout...มาแล้ว จะพบหน้าจอสำหรับการกำหนดค่าเริ่มต้น ซึ่งการกำหนดค่านี้ จะเป็นการกำหนดถึงระบบ Grid ที่เราจะใช้ในการออกแบบ ดังรูป

*กดปุ่ม Create ที่หน้าต่างนี้

สำหรับระบบ Grid นั้น นักพัฒนาเว็บจะใช้ในการกำหนดขอบเขตของการแสดงผลในแต่ละพื้นที่ (หรือแบ่งพื้นที่หน้าจอออกเป็นส่วนๆ) ซึ่งส่วนใหญ่จะใช้ในการกำหนดการแสดงผลค่าความกว้าง (width) ของขอบเขตข้อมูลที่จะแสดงผล โดยที่ในการกำหนดค่าการแสดงผลนี้ ถ้าเป็นการออกแบบแต่เดิม นักออกแบบเว็บอาจจะใช้การกำหนดค่าเป็นหน่วย Pixel เช่น กำหนดค่าความกว้างของเว็บเป็น 900px และมีเมนูซ้าย 220px เป็นต้น
...แต่ถ้านักออกแบบเว็บต้องการออกแบบเว็บให้สามารถแสดงผลได้ทุกหน้าจออย่างเหมาะสม หรือเป็นแบบ Responsive แล้ว นักออกแบบเว็บจะไม่สามารถกำหนดขนาดให้ตายตัวแบบนั้นได้ เนื่องจาก...การกำหนดขนาดในลักษณะดังกล่าว จะเป็นการกำหนดขนาดในแบบ Fixed ซึ่งเมื่อเว็บเพจมีการแสดงผลกับหน้าจอที่มีขนาดที่แตกต่างกันแล้ว จะพบว่า..เว็บเพจไม่มีความยืดหยุ่น หรือปรับเปลี่ยนไปตามความเหมาะสมของขนาดหน้าจอในขนาดต่างๆ
ดังนั้น การที่นักพัฒนาเว็บได้มีการคิดค้นการใช้ระบบ Grid เข้ามาช่วยในการกำหนดค่าความกว้างต่าง ๆ ให้กับการแสดงผลนั้น จึงนับว่าเป็นทางออกที่ดี

ระบบ Grid ที่พูดถึงในบทความนี้ จะเป็นระบบการแสดงผลในแบบ Relative คือ ดูที่ความสัมพันธ์ของขนาดหน้าจอ นั่นหมายความว่า จะมีการปรับเปลี่ยนได้ตามขนาดหน้าจอที่ปรับเปลี่ยนไป ซึ่งกริดในลักษณะนี้ เราเรียกกันว่า  Fluid Grid

*ระบบ Grid ที่ใช้ในการออกแบบเว็บเพจมีหลายรูปแบบ

จากรูปข้างต้นในการ New File สำหรับการสร้างเว็บเพจในแบบ Responsive จะมีความหมายตามระบบ Grid โดยค่า Default ของโปรแกรม ดังนี้

• เมื่อมีการรับชมด้วยขนาดหน้าจอในแบบ Mobile หรือมือถือ ระบบกริดจะแบ่งหน้าจอแสดงผลเป็น 5 Columns
• เมื่อมีการรับชมด้วยขนาดหน้าจอในแบบ Tablet ระบบกริดจะแบ่งหน้าจอแสดงผล 8 Columns
• เมื่อมีการรับชมด้วยขนาดหน้าจอในแบบ Desktop Computer ระบบกริดจะแบ่งหน้าจอแสดงผล 10 Columns

*ซึ่งค่าเหล่านี้เราสามารถปรับเปลี่ยนได้ แต่เบื้องต้นให้ทำการใช้งานแบบค่า Default ไปก่อนนะครับ เพื่อการเรียนรู้

เมื่อเราสร้างไฟล์ในแบบ Fluid Grid Layout แล้วโปรแกรมจะสร้างไฟล์เว็บเพจให้เรา ดังรูป

เมื่อได้อ่านบทความมาถึงตรงนี้แล้ว ให้ทุกท่านทำการกดปุ่ม Create จากหน้าต่าง New Document และทำการบันทึก (Save) ไฟล์เก็บไว้ก่อนครับ รอติดตามอ่านตอนต่อไปในบทความหน้า....
คลิกอ่านตอนที่ 2