หน่วยการเรียนรู้ที่ 6
การเรียนรู้การออกแบบเว็บเพจด้วยเทคนิค Fluid Grid Layout

สาระสำคัญ

- การพัฒนาเว็บด้วยเทคนิค Fluid Grid Layout จะทำให้เว็บนั้นสามารถแสดงผลลัพธ์บนหน้าจอได้ 3 รูปแบบ คือ Mobile, Tablet และ Desktop หลักการที่ใช้พัฒนาเว็บนี้เรียกว่า Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ที่จะทำให้เว็บไซต์สามารถแสดงผลได้อย่างเหมาะสมบนอุปกรณ์ที่แตกต่างกันโดยใช้โค้ดร่วมกัน URL เดียวกัน การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่างร่วมกันไม่ว่าจะเป็น Fluid Grid Flexible Images และ CSS3 Media Queries

สมรรถนะประจำหน่วย

แสดงความรู้เกี่ยวกับการออกแบบเว็บเพจด้วยเทคนิค Grid Layout

จุดประสงค์การเรียนรู้

1. บอกลักษณะการทำงานของ Responsive Web Design ได้

2. อธิบายเกี่ยวกับ Layout ได้

3. อธิบายเกี่ยวกับเครื่องมือ Fluid Grid Layout ได้

4. บอกขั้นตอนการใช้เครื่องมือ Fluid Grid Layout สร้างเว็บไซต์ได้

5. อธิบายเกี่ยวกับ Div Tag และ Cascading Style Sheet ได้

6. ออกแบบหน้าเว็บด้วยเทคนิค Fluid Grid Layout ได้

เนื้อหาสาระการเรียนรู้

4.1 ความรู้เกี่ยวกับ Responsive Web Design

4.2 ความรู้เกี่ยวกับ Layout

4.3 หลักการสร้าง Layout ด้วย Fluid Grid Layout

4.4 การสร้าง Layout ด้วย Fluid Grid Layout

4.5 ความรู้เกี่ยวกับ Div Tag และ Cascading Style Sheet

4.6 การจัดการ Div Tag บน Fluid Grid Layout

1.ความรู้เกี่ยวกับ Responsive Web Design

ความหมาย และ ความสำคัญ ของ Responsive Web Design

ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS)

ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา

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

หลักการของ Responsive Web Design

การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries

เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น

ต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น

สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

ข้อเสียของ Responsive Web Design

อย่างไรก็ตาม Responsive Web Design ก็ยังมีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น

2.ความรู้เกี่ยวกับ Layout

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

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

3.หลักการสร้าง Layout ด้วย Fluid Grid Layout

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

การออกแบบเว็บเพจด้วย Fluid Grid layout มี 2 รูปแบบคือ

1 graceful degradation คือการออกแบบสำหรับ Desktop ก่อนแล้วค่อยมาออกแบบสำหรับ mobile ทีหลังวิธีนี้จะเน้นไปที่การใช้ประโยชน์จากเทคโนโลยีที่มีอยู่ให้มากที่สุดเท่าที่จะเป็นไปได้ในขณะนั้นแล้วค่อยลดบางส่วนที่ทำไม่ได้หรือไม่เหมาะสมออกในโมบายโดยมีข้อแม้ที่ว่า Content และฟังก์ชันที่จำเป็นจะต้องอยู่ครบ

2 Progressive enhancement

จะตรงข้ามกับ graceful degradation คือการออกแบบสำหรับโมบายก่อนแล้วค่อยมาออกแบบสำหรับ Desktop ทีหลังวิธีนี้เกิดหลังจากที่คนเห็นว่า graceful degradation นั้นมีข้อเสียตรงที่ต้องมาติดตัดสินใจว่าจะตัดส่วนไหนออกบ้าง ในโมบายในทางกลับกันวิธี Progressive enhancement จะเน้นไปที่ Content และฟังก์ชั่นพื้นฐานที่สำคัญที่สุดก่อนหลังจากนั้นค่อยมาคิดต่อว่าจะสามารถเสริมส่วนไหนที่จะทำให้ดีขึ้นได้บ้างถึงแม้วิธีนี้จะทำได้ยากแต่ถ้าสามารถออกแบบให้รองรับ mobile ได้เราก็สามารถออกแบบให้รองรับ Device อื่นๆได้

4.การสร้าง Layout ด้วย Fluid Grid Layout

4. การสร้าง Layout ด้วย Fluid Grid Layout

เรียกใช้ fluid Grid layout ในโปรแกรม Adobe Dreamweaver CS6 ที่สามารถเรียกใช้ได้ดังนี้

1.เลือกจากรายการ create New เเล้วไปที่ fluid Grid layout บนหน้าต่าง Welcome Screen

2. หลังจากนั้นจะปรากฏหน้าต่างสำหรับตั้งค่าต่างๆให้กับ fluid Grid layout

3. หลังจากที่กดปุ่ม create โปรแกรมแต่จัดให้ตั้งชื่อว่า Style sheet file (*.css)

3.1 พิมพ์ชื่อที่ต้องการ

3.2 กดปุ่ม save

5.ความรู้เกี่ยวกับ Div Tag และ Cascading Style Sheet

ในช่วงก่อนๆนั้นการวาง Layout มักจะใช้คำสั่ง Table ในการจัดวาง เพื่อออกแบบเค้าโครงของหน้าเว็บเพจ หรือทั้งเว็บไซต์ วิธีการนี้เพียงแค่เราเข้าใจคำสั่งที่เกี่ยวกับตาราง (Table) อันได้แก่ table , tr , td เป็นต้น ก็จะสามารถสร้างหรือออกแบบโครงสร้าง หรือเลย์เอาท์

(Layout) ได้ดั่งใจ

แต่ปัญหาคือเมื่อเพจนั้นถูกเปิดขึ้น มันจะแสดงเนื้อหาหลังจากที่โหลด Table เสร็จเสิ้น หรือจะอ่านขึ้นมูลจากด้านบนลงสู่ด้านล่าง และการใช้ Table ในการจัด Layout ทำให้ใช้เวลาในการโหลดหน้าเว็บพอสมควร เว็บโปรแกรมเมอร์ส่วนใหญ่จึงหันมาใช้แท็กง่ายๆอย่างแท็ก DIV หรือแท็ก P แทน และใช้ CSS ในการกำหนดว่าจะใช้บล็อกไหนเป็น Header บล็อกไหนเป็น Footer ดังภาพ

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C

ประโยชน์ของ CSS

1.CSS มีคุณสมบัติมากกว่า tag ของ html เช่น การกำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของข้อความที่กล่าวมาแล้ว

2.CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผล กับเอกสารทั้งหมด หมายถึงกำหนด ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด ทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร

3.CSS สามารถกำหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถนำมาใช้ร่วม กับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด

CSS กับ HTML / XHTML นั้นทำหน้าที่คนละอย่างกัน โดย HTML / XHTML จะทำหน้าที่ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการแสดงผล ส่วน CSS จะทำหน้าที่ในการตกแต่งเอกสารให้สวยงาม เรียกได้ว่า HTML /XHTML คือส่วน coding ส่วน CSS คือส่วน design

div คือ แท็กประเภทนึงของ html ใช้สำหรับครอบวัตถุที่เราต้องการ เพื่อจัดรูปแบบต่างๆ ให้กับวัตถุในตำแหน่งนั้นๆ สามารถใส่ค่าไปตรงๆ ใน div นั้น หรือ ใส่ id กับ class เพื่อใช้อ้างอิงกับการจัด CSS ได้ตามความเหมาะสม