Page 14 - การพัฒนาหนังสืออิเล็กทรอนิกส์เพื่อการศึกษา เรื่อง การสร้างเว็บไซต์

หนวยการเรียนรู้ที่ 2
่

การออกแบบเวบไซต์
็

การออกแบบเวบไซต์
็
1. หลักการออกแบบเวบไซต์
็

สาระการเรียนรู้
่
็
�
่
็
การสร ้างเวบไชด์ทีดีควรนาความรู้ในหลายๆ ด้านมาประกอบกัน ไมว่าจะเปนความรู้ด้านภาษา
่
็
HTML ความรู้ด้านกราพิก ความรู้ด้านการออกแบบ ความรู้ด้านศิลปะและสี เพือท�าให้เวบไซค์
1. หลักการออกแบบเวบไซต์ ดูเหมาะสมสวยงามและมีเอกลักษณ์ทีท�าให้นาสนใจ ตังนนการออกแบบเวบไซต์จะต้องค�านงถึงผ้ ู
็
้
่
ั
็
่
ึ
2. หลักการเลือกใช ้สี เยียมชมเวบไซต์เปนส�าคัญ เชน การท�าเวบไชต์เพือการศึกษา ดังนนลักษณะของเวบไชต์ทออกมา
่
่
้
ั
็
็
็
็
็
3. การวางแผนการสร ้างเวบไซต์ ควรจะเปนไปอย่างเรียบง่ายสบายตา การใช ้งานและหาข้อมลต่างๆ ไมควรยุงยากขับซ ้อนมากเกิน
็
่
่
ู
็
่
4. การออกแบบข้อมลและการสร ้างแผนทีเวบไซต์ ไปนก
ู
็
ั
่
่
็
5. การจัดเตรียมสือเพือใช ้ในการสร ้างเวบไซต์ 1.1 การก�าหนดรนาดเวบเพจ ในปจจุบันเวบไซต์นอกจากจะสามารถเรียกดูได้ทางคอมพิวเตอร ์
ั
็
็
่
แล้วอุปกรณ์อืนๆ เช่น แทบเลต โทรศัพท์มือถือทีเปนแบบ Smart Phane กสามารถรียกดูใต้เช่นกัน
็
็
็
็
้
่
่
้
ั
่
ซึงขนาดหน้าจอทีแตกต่างกันไปตามอุปกรณ์นน โดยขึนอยูกับการออกแบบเวบไซต์ว่าต้องการให้
็
้
่
้
ิ
ี
็
แสดงบนอุปกรณ์ชนดไหน ส�าหรับเนอหาในหัวข้อนจะกลาวถึงการก�าหนดขนาดของเวบเพทีแสคง
ื
จุดประสงค์การเรียนรู้ บนคอมพิวเตอร ์เทานน ขนาดของเวยเพจทีนยมนามาใช ้เพือแสดงผลบนคอมพิวเตอร ์ในอดีตและ
้
่
ิ
�
็
ั
ปจจุบัน มีตังน ี ้
ั
่
็
็
1.1.1 เวบเพอชนาด 800x 600 pixels เปนชนาดทีสามารถใช ้โด้กับหน้าจอทุกขนาด
่
่
ั
ื
็
ในปจจุบันและเปนขนาดของการออกแบบเวบไชต์ทีใช ้ในอดีต เนองจากอดีตขนาดของจอคอมฟว
ิ
็
็
1. อธิบายหลักการออกบบเวบไซต์ เตอร ์มีขนาดเลกและความละเอียดของจอกยังไมมากเท่าทุกวันน ี ้
็
่
็
2. อธิบายหลักการเลือกใช ้สี 1.1.2 เวบเพจชนาด J026x 768 pixes เปนชนาดทีนยมในปจจุบัน เพราะผ้ใช ้นยมใช ้
่
ิ
ั
ิ
ู
็
็
็
3. อธิบายหลักการวางแผนการสร ้างเวบไซต์ จอคอมพิวเตอร ์ขนาดใหญ่ขึนเนองมาจากราคาจอคอมพิวเตอร ์ทีถูกลง ส�าหรับผ้ทีใช ้ควาละเอียด
่
่
้
่
ื
ู
่
็
ู
4. อธิบายการออกแบบข้อมลและการสร ้างแผนทีเวบไซต์ หน้าจอด�ากว่าน เวบไชค์จะนจอและทาให้เกิดแกบสกรอสบาร ์12 การออกแบบเวบไซด์ ส่วนใหญ่
้
็
ี
็
�
่
่
็
5.อธิบายหลักการจัดเตรียมสือเพือใช ้ในการสร ้างเวบไซต์ จะมองดูองค์ประกอบขององค์กร หนวยงาน หรือเนอหาทีนาเสนอเปนหลัก โดยมีหลักการออกแบบ
่
้
่
็
ื
�
ี
ดังน ้
้
่
็
ื
1.2 การออกแบบเวบไซต์ ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หนวยงาน หรือเนอหาที ่
นาเสนอเปนหลัก
�
็
่ ้
ั
็
็
�
่
1.2.1 การออกแบบหน้าของเวยไซต์ มีอยู 3 แบบ คือการออกแบบเวบไต์ทีเนนการนาเสนอ
้
่
้
็
ื
็
ื
�
เนอหา เปนการออกแบบเวบไชต์ทีเน้นการนาเสนอเนอหามากกว่ารูปภาพ โดยโครงสร ้างใช ้รูป
้
็
็
แบบตารางเปนหลัก มีการออกแบบหน้าตารูปแบบง่ายเชน มีเมนสารบัญและเนอหา เปนต้น การ
ื
ุ
่
่
่
่
ิ
็
ออกแบบเวบไชต์ทีเน้นภาพกราฟก เปนการออกแบบเวบไชต์ทีเน้นภาพกราฟกทีสวยงาม ซึงอาจ
ิ
็
็
จะใช ้โปรแกรม Photshop ส�าหรับกรตกแต่งภาพ ข้อดี สวยงาม
10 11