บทที่ 4 การพัฒนาเว็บไซต์ด้วย Framework

หน่วยที่ 4 การพัฒนาเว็บไซต์ด้วย Framework

  • 4. 1 ความหมายและความสำคัญของการออกแบบส่วนติดต่อกับผู้ใช้งาน (User Interface: UI)
  • 4.2 การใช้ Framework ในการออกแบบ (User Interface: UI)
  • 4.3 ขั้นตอนการออกแบบเว็บไซต์ด้วย CSS Framework
  • 4.4 Class ต่าง ๆ ของ Framework ที่ใช้ในการออกแบบหน้าเว็บเพจ (Layout Design)

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

4.2 การใช้ Framework ในการออกแบบ (Use Interface: UI)
    การออกแบบเว็บไซต์ในปัจจุบันมีเทคโนโลยีต่าง ๆ และเครื่องมือที่ทันสมัยอำนวยความสะดวกในการออกแบบหน้าเว็บเพจเพื่อลดขั้นตอนและเวลาในการทำงาน ซึ่งในอดีตการออกแบบหน้าเว็บเพจจำเป็นต้องเขียนคำสั่ง CSS (Cascading Style Sheet) เป็นจำนวนมากเพื่อควบคุมการแสดงผลบนหน้าเว็บเพจ เช่น การจัดตำแหน่ง ขนาดและสีตัวอักษร เป็นต้น ทั้งนี้การพัฒนาเว็บไซต์ในปัจจุบันจึงมีการพัฒนาชุดคำสั่งต่าง ๆ (CSS Framework) เพื่อใช้ในการออกแบบหน้าเว็บเพจและสามารถนำไปประยุกต์ใช้งานร่วมกันภายในทีมได้ ซึ่ง CSS Framework ที่นิยมเลือกใช้คือ Bootstrap

      การออกแบบส่วนติดต่อกับผู้ใช้งาน (User Interface: UI) มีขั้นตอนดังต่อไปนี้
1. เปิดโปรแกรมท่องเว็บไซต์ (Web Browser)
2. ป้อน URL ของเว็บไซต์ CSS Framework คือ http://getbootstrap.com
3. คลิกปุ่ม Download Bootstrap
4. ไฟล์ที่ได้จากการดาวน์โหลด ได้แก่ แฟ้มของ CSS, JS และ Font
5. สร้างโฟลเดอร์โปรเจกต์เพื่อรวบรวมไฟล์งาน รวมถึงไฟล์ CSS Framework ที่ดาวน์ โหลดมา
6. เปิดโปรแกรมที่ใช้สร้างเว็บไซต์ขึ้นมา ในตัวอย่างเลือกใช้โปรแกรม Adobe Dreamweaver CS6
7. คลิกเมนู Site > New Site
8. ตั้งชื่อ Site Name
9. คลิกปุ่ม Browse เพื่อเลือกตำแหน่งจัดเก็บข้อมูล
10. เลือกโฟลเดอร์ที่ต้องการจัดเก็บข้อมูล > คลิกปม Open > คลิกปุ่ม Select
11. เมื่อเลือกตำแหน่งจัดเก็บข้อมูลเรียบร้อยแล้ว จากนั้นคลิกปุ่ม Save เพื่อบันทึกการจัดเก็บข้อมูล
12. คลิกปุ่ม HTML เพื่อสร้างเอกสารเว็บเพจด้วยภาษา HTML
13. ปรากฎหน้าต่างที่ใช้ในการเขียนคำสั่งและการออกแบบ ซึ่งโปรแกรม Adobe DreamweaverCS6 สามารถเลือกดูมุมมองได้ 3 แบบ คือ มุมมองการเขียนคำสั่ง มุมมองการออกแบบ และผสมผสานกันทั้งสองมุมมองระหว่างการเขียนคำสั่งและการออกแบบ
14. เขียนคำสั่งเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstrap ดังนี้ ไฟล์ index.html

ไฟล์ index.html


15. บันทึกไฟล์ โดยตั้งชื่อว่า index.htm! และจัดเก็บไว้ในโฟลเดอร์โปรเจกต์เดียวกัน
16. ทดสอบการใช้งานเบื้องต้นของ CSS Framework ด้วย Bootstrap โดยเขียนคำสั่งดังนี้ลงในระหว่างแท็ก body จากนั้นกดคีย์ F12 เพื่อบันทึกและแสดงผลผ่าน Browser
17. แสดงผลลัพธ์ของการใช้ CSS Framework ด้วย Bootstrap

4.3 ขั้นตอนการออกแบบเว็บไซต์ด้วย CSS Framework
    การออกแบบเว็บไซต์ด้วย CSS Framework ช่วยให้การออกแบบเว็บไซมีความสะดวกรวดเร็วใน การออกแบบและพัฒนา เนื่องจาก CSS Framework เป็นคำสั่งสากลที่นักพัฒนาส่วนใหญ่รู้จักและใช้เป็นเครื่องมือในการออกแบบ อีกทั้งการใช้ CSS Framework ทำให้ลดการเขียนคำสั่งที่ใช้เขียนในการออกแบบ เช่น เขียนการจัดวาง Layout ของ Desktop แต่ไม่จำเป็นต้องเขียนคำสั่งควบคุม Layout Mobile เพราะ CSS Framework เป็นคำสั่งสำเร็จรูปที่ออกแบบมาเพื่อลดขั้นตอนและเวลาของนักพัฒนาเว็บไซต์การออกแบบเว็บไซต์ด้วย CSS Framework มีขั้นตอนดังต่อไปนี้ เขียนคำสั่งตามตัวอย่างข้างต้นเพื่อเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstra คำสั่ง ดังนี้

คำสั่งตามตัวอย่างข้างต้นเพื่อเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstra

จากคำสั่งข้างต้น อธิบายได้ดังนี้
หมายเลข 1 คือ การเริ่มต้นการใช้งานในรูปแบบ Responsive
หมายเลข 2 คือ การเรียกใช้งานไฟล์ CSS Framework ของ Bootstrap
หมายเลข 3 คือ การเรียกใช้งานไฟล์ JavaScript ของ Bootstrap
พิมพ์คำสั่งต่อไปนี้ลงในแท็ก body เพื่อสร้างแถบเมนู

คำสั่งตามตัวอย่างข้างต้นเพื่อเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstra
(ที่มา : http://getbootstrap.com)

จากการเขียนคำสั่งเม่นูโดยใช้ CSS Framework ของ Bootstrap อธิบายได้ว่า การสร้างเมนูด้วย CSS Framework ของ Bootstrap คือ การสร้างเมนูแบบเข้าถึงได้ทุกอุปกรณ์ (Responsive) โดยมีลักษณะการแสดงผลที่แตกต่างกันระหว่างการแสดงผลบนจอคอมพิวเตอร์และจอของมือถือซึ่งคำสั่งการใช้งานเมนูข้างต้นเป็นการเรียกใช้งาน Class ของ CSS Framework ที่ได้มีการเขียนคำสั่งไว้ โดยผู้พัฒนาจำเป็นต้องเขียนชื่อ Class ให้ตรงตามรูปแบบที่ CSS Framework กำหนด เพื่อให้ได้ผลลัพธ์ที่ตรงตามความต้องการ กดคีย์ F12 เพื่อแสดงผลลัพธ์
เขียนคำสั่งดังต่อไปนี้ลงในแท็บ body ต่อจากคำสั่งเมนูข้างต้นเพื่อสร้างแบบฟอร์ม Login

คำสั่งตามตัวอย่างข้างต้นเพื่อเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstra
(ที่มา : http://getbootstrap.com)

กดคีย์ F12 เพื่อบันทึกและแสดงผลลัพธ์ เปิดโปรแกรมท่องเว็บ (Web Browser) ขึ้นมา จากนั้นป้อน jquery.com ที่ URL Address เพื่อดาวโหลดJavaScript Framework ของ jQuery คลิกดาวน์โหลด jQuery คลิกเลือกประเภทที่ต้องการดาวน์โหลด ไฟล์ที่ดาวน์โหลดไปจัดเก็บไว้ในโฟลเดอร์ JS เพื่อให้อยู่ในโปรเจกต์เดียวกันหรืออาจเปลี่ยนชื่อไฟล์ jQuery ที่ดาวน์โหลดมา โดยการเรียกใช้ต้องเป็นชื่อเดียวกันกับชื่อเดียวกันหับชื่อที่เปลี่ยน เขียนคำสั่งต่อไปนี้ลงในแท็ก head เพื่อเรียกใช้ jQuery ที่ดาวนโหลดมาข้างต้น

คำสั่งตามตัวอย่างข้างต้นเพื่อเริ่มต้นการใช้งาน CSS Framework ด้วย Bootstra
(ที่มา : http://getbootstrap.com)

ทดสอบการใช้งาน jQuery โดยกดคีย์ -12 จากนั้นย่อโปรแกรมท่องเว็บไซต์ (Web Browser)ให้มีขนาดเท่ากับมือถือ คลิกปุ่มเมนูเพื่อแสดงรายการเมนูย่อย

4.4 Class ต่าง ๆ ของ Framework ที่ใช้ในการออกแบบหน้าเว็บเพจ (Layout Design)
    คำสั่งที่ใช้ในการออกแบบที่นิยมเลือกใช้มีดังนี้

Class ต่าง ๆ ของ Framework ที่ใช้ในการออกแบบหน้าเว็บเพจ
(ที่มา : http://getbootstrap.com)

ทั้งนี้ผู้อ่านสามารถศึกษารายละเอียดและ Clas ต่าง ๆ เช่น ไอคอน การวาง Layout การใช้งาน vaScript เพิ่มเติมได้ที่ http://getbootstrap.com