About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

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


เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 1

บทความนี้มีด้วยกัน 3 ตอนครับ จะเป็นบทความที่ว่าด้วยเรื่องของ Responsive Web Design (RWD) ซึ่งปัจจุบัน (2015) เป็นเทรนด์ของการออกแบบเว็บที่เหล่านักพัฒนาเว็บให้ความสนใจ และออกแบบเว็บในหลักการของ RWD นี้ จะอย่างไรลองติดตามอ่านกันครับ

Responsive Web Design คืออะไร ?

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

ตัวอย่างของเว็บในแบบ Responsive ให้ท่านลองย่อหน้าจอ Web Browser เพื่อรับชมเว็บ DwThai.Com หรือใช้ Mobile ในการรับชมเว็บ DwThai.Com ดูครับ น่าจะเข้าใจมากยิ่งขึ้น

แล้วจะออกแบบเว็บในแบบ Responsive ได้อย่างไร

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

Using Fluid Grid Layout

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

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

ระบบ Grid คืออะไร ?

สำหรับระบบ 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 ไปก่อนนะครับ เพื่อการเรียนรู้

ไฟล์ที่ได้จาก New Fluid Grid Layout..

เมื่อเราสร้างไฟล์ในแบบ Fluid Grid Layout แล้วโปรแกรมจะสร้างไฟล์เว็บเพจให้เรา ดังรูป
เมื่อได้อ่านบทความมาถึงตรงนี้แล้ว ให้ทุกท่านทำการกดปุ่ม Create จากหน้าต่าง New Document และทำการบันทึก (Save) ไฟล์เก็บไว้ก่อนครับ รอติดตามอ่านตอนต่อไปในบทความหน้า....
คลิกอ่านตอนที่ 2
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



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

การทำสี Background ในแบบ Gradient ด้วย CSS

เรื่อง : วิธีทำสีพื้นหลังแบบ Gradient ด้วย CSS (Gradient Background Color) CSS3 มีค่าของ...  

สารพัดปัญหา Dreamweaver ติดต่อกับ Database (MySQL) ไม่ได้

เรื่อง: ปัญหาการใช้โปรแกรม Dreamweaver สร้าง Connection กับฐานข้อมูลไม่ได้ "Dreamweaver ติดต่อกั...  

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only)

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar *Dreamweaver CC ไม่มีให้ใช้ครับ Spry เป็น Framework...  

สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้

เรือง :: สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้ (Drag Layer by Dreamweaver)สำหรับบทความนี้เป็นบทความการป...  


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

*
*
*