Page 13 - การสร้างเว็บไซต์

่
็
1.3 กำรออกแบบเวบไชด์ทีดี ควรมีลักษณะดังต่อไปน ี ้
่
็
ู
ู
กำรออกแบบเวบไซต์ 1.3.1โครงสร ้ำงทีชัดเจน ผ้ออกแบบเวบไชด์ควรจัดโครงสร ้ำงหรือจัตระเบียบของข้อมล
็
่
้
็
ทีชัดเจบแยกอยเนอหำออกเปนส่วนต่ำงๆ
ื
่
่
1.3.2 กำรใช ้งำนทีง่ำย ลักษณะของเวบทีมีกำรใช ้งำนง่ำย จะช่วยให้ผ้ใช ้รู้สึกสบำย ต่อ
็
ู
้
่
ู
็
กำรอ่ำนและสำมำรถท�ำควำมข้ำใจกับเนอหำได้อย่ำงเตมที ผ้ออกแบบควรก�ำหนดปุมกำรใช ้งำนที ่
ื
่
้
่
ื
่
็
ชัดเจนเหมำะสมโดยเฉพำะปุมควบคุมเส้นทำงกำรเข้ำสูเนอหำ (Navigaloa) ไมว่ำจะเปนเดินหน้ำ
่
1. หลักกำรออกแบบเวบไซต์ ่
็
็
็
็
็
หรือถอยหลัง หำกเปนเวบไชทีมีเวบเพจจ�ำนวนมำกควรจะจัดท�ำแผนผังของเวบไซต์ (Sแe Map
้
่
่
่
ี
ู
เพือช่วยให้ผ้ใช ้รู้ว่ำตอนนอยู ณจุดใด หรือมีเครืองมือสีบคัน (Seach Engine) เพือช่วยในกำร
่
่
ู
ค้นหำข้อมลทีต้องกำร
่
่
่
่
่
็
่
็
กำรสร ้ำงเวบไชด์ทีดีควรนำควำมรู้ในหลำยๆ ด้ำนมำประกอบกัน ไมว่ำจะเปนควำมรู้ด้ำนภำษำ 1.3.3 กำรเชือมโยง link ครจัดอยูในรูปแบทีเปนมำตรฐำนทัวไป กำรเชือมโยงมำกและ
่
�
็
่
่
่
่
HTML ควำมรู้ด้ำนกรำพิก ควำมรู้ด้ำนกำรออกแบบ ควำมรู้ด้ำนศิลปะและสี เพือท�ำให้เวบไซค์ กระจัดกระจำยอยูทัวไปอำจก่อให้เกิดควำมสับสนค�ำทีใช ้ส�ำหรับกำรเชือมโยงจะต้องเข้ำใจงำยมี
็
่
่
้
่
้
้
่
่
้
็
ดูเหมำะสมสวยงำมและมีเอกลักษณ์ทีท�ำให้นำสนใจ ตังนนกำรออกแบบเวบไซต์จะต้องค�ำนงถึงผ้ ู ควำมชัดเจนและไมสันจนเกินไปนอกจำกนในเเต่ละเวบเพจทีสร ้ำงขึนมำควรมีจุดเชือมโยงกลับ
่
่
ั
ี
ึ
็
่
่
้ ่
้
้
่
็
ู
ั
็
่
ี
็
็
เยียมชมเวบไซต์เปนส�ำคัญ เชน กำรท�ำเวบไชต์เพือกำรศึกษำ ดังนนลักษณะของเวบไชต์ทออกมำ มำยังหน้ำแรกของเวบไซต์ทีก�ำลังใช ้งำนอยูด้วยทังนเผือว่ำผ้ใช ้เกิดหลงทำงและไมทรำบว่ำจะท�ำ
่
็
็
่
่
่
่
่
่
่
ู
ควรจะเปนไปอย่ำงเรียบงำยสบำยตำ กำรใช ้งำนและหำข้อมลต่ำงๆ ไมควรยุงยำกขับซ ้อนมำกเกิน อย่ำงไรต่อไป จะได้มีหนทำงกลับมำสูจุดเริมตันใหม ระวังอำจให้มีหน้ำทีไมมีกำรเชือมโยง (Oเplan
่
็
่
ู
�
ั
ไปนก Page) เพรำะจะทำให้ผ้ใช ้ไมรู้จะท�ำอย่ำงไรต่อไป
่
้
้
ั
็
�
1.1 กำรก�ำหนดรนำดเวบเพจ ในปจจุบันเวบไซต์นอกจำกจะสำมำรถเรียกดูได้ทำงคอมพิวเตอร ์ 1.3.4 ควำมเหมำะสมในหน้ำจอ เนอหำทีนำเสนอในแต่ละหน้ำจอควรสัน กระชับ และทันมัย
็
ื
่
่
่
้
่
็
็
็
ู
็
แล้วอุปกรณ์อืนๆ เช่น แทบเลต โทรศัพท์มือถือทีเปนแบบ Smart Phane กสำมำรถรียกดูใต้เช่น หลีกเลียงกำรใช ้หน้ำจอทีมีลักษณะกำรเสือนขึนลง Saollang) แต่ถ้ำจ�ำเปนต้องมีควรจะให้ข้อมล
็
้
่
่
้
่
่
ั
ั
่
กัน ซึงขนำดหน้ำจอทีแตกต่ำงกันไปตำมอุปกรณ์นน ดังนนในกำรก�ำหนดนำดเวบเพจต้องค�ำนงถึง ทีมีควำมส�ำคัญอยูบริเวณด้ำนบนสุดของหน้ำจอหลีกเสียงกำรใช ้กรำพิกด้ำนบนของหน้ำจอเพรำะ
็
ึ
่
่
้
ู
ู
็
อุปกรณ์ทีจะเรียกดูเวบไชต์ด้วย โดยขึนอยูกับกำรออกแบบเวบไซต์ว่ำต้องกำรให้แสดงบนอุปกรณ์ ถึงแม้จะดูสวยงำมแต่จะท�ำให้ผ้ใช ้เสียเวลำในกำรได้รับข้อมลทีต้องกำร และหำกต้องมีกำรใช ้ภำพ
่
็
่
้
้
้
้
่
ั
ื
็
็
ี
ื
ชนดไหน ส�ำหรับเนอหำในหัวข้อนจะกลำวถึงกำรก�ำหนดขนำดของเวบเพทีแสคงบนคอมพิวเตอร ์ ประกอบกควรใช ้เฉพำะทีมีควำมสัมพันธ์กับเนอหำเทำนน
ิ
่
่
้
้
่
ิ
็
เทำนน ขนำดของเวยเพจทีนยมนำมำใช ้เพือแสดงผลบนคอมพิวเตอร ์ในอดีตและปจจุบัน มีตังน ี ้ 1.3.5 กำรใช ้รูปภำพเพือเปนพืนหลัง (Badground) ไมควรเน้นสีสันทีฉดฉำดมำกนก
�
็
ั
ั
ู
่
ั
้
่
่
็
1.1.1 เวบเพอชนำด 800x 600 pixels เปนชนำดทีสำมำรถใช ้โด้กับหน้ำจอทุกขนำด เพรำะอำจจะไปลดควำมเด่นชัดของเนอหำลง ควรใช ้ภำพทีมีสีอ่อนๆ ไมสว่ำงจนเกินไป ส่วนกำร
็
ื
่
่
่
่
่
่
็
ิ
ในปจจุบันและเปนขนำดของกำรออกแบบเวบไชต์ทีใช ้ในอดีต เนองจำกอดีตขนำดของจอคอมฟว ใช ้เทคนคต่ำงๆเช่น ภำพเคลือนไหวหรือตัวอักษวิง (Maqure) ซึงอำจจะเกิดกำรรบกวนกำรอ่ำนได้
ั
ิ
ื
็
่
่
้
่
็
ั
�
่
่
็
เตอร ์มีขนำดเลกและควำมละเอียดของจอกยังไมมำกเท่ำทุกวันน ี ้ ควรใช ้เฉพำะทีจ�ำเปนจริงๆ เท่ำนน ตัวอักษรทีนำมำแสดงบนจอภำพควรเลือกขนำดทีอ่ำนงำยไมมี
็
่
่
ั
1.1.2 เวบเพจชนำด J026x 768 pixes เปนชนำดทีนยมในปจจุบัน เพรำะผ้ใช ้นยมใช ้ สีสันและเวดลำยมำกเกินไป
ิ
ู
็
็
ิ
่
่
่
่
่
้
่
ู
็
ู
่
จอคอมพิวเตอร ์ขนำดใหญ่ขึนเนองมำจำกรำคำจอคอมพิวเตอร ์ทีถูกลง ส�ำหรับผ้ทีใช ้ควำละเอียด 1.3.6 ควำมรวดเร็ว เปนสิงส�ำคัญส�ำหรับผ้ใช ้ ซึงผ้ใช ้อำจจะเกิดอำกำรเบือหนำยและหมด
ื
ู
่
่
้
หน้ำจอด�ำกว่ำน เวบไชค์จะนจอและทำให้เกิดแกบสกรอสบำร ์12 กำรออกแบบเวบไซด์ ส่วนใหญ่ ควำมสนใจเวบทีใช ้เวลำในกำรแสดงนำน สำเหตุส�ำคัญทีจะท�ำให้กรแสดงผลนำน คือ กำรใช ้ภำพ
็
�
็
็
ี
้
่
้
่
่
ั
ิ
่
็
จะมองดูองค์ประกอบขององค์กร หนวยงำน หรือเนอหำทีนำเสนอเปนหลัก โดยมีหลักกำรออกแบบ กรำฟกหรือภำพเคลือนไหวทีขนำดใหญ่เเละมีมำกเกินไป จำกนนในกำรออกแบบจึงควรหลีกเสียง
ื
�
่
่
ิ
่
็
ดังน ี ้ กำรใช ้ภำพขนำดใหญ่หรือภำพเคลือนไหวทีไมจ�ำเปน และพยำยำมใช ้กรำฟกแทนตัวอักษรธรรมดำ
่
้
่
็
่
ื
1.2 กำรออกแบบเวบไซต์ ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หนวยงำน หรือเนอหำที ่ ให้น้อยทีสุดโดยไมควรใช ้กิน 2-3 บรรทัดในแต่ละหน้ำจอ
้
นำเสนอเปนหลัก 1.4 กำรออกแบบโรงสร ้ำงเวบไชด์ คือ กำรวำงแผนกำรจัดล�ำดับเนอหำสำระของเวบไซด์
�
็
ื
็
็
้
่
่
่ ้
็
ู
่
1.2.1 กำรออกแบบหน้ำของเวยไซต์ มีอยู 3 แบบ คือกำรออกแบบเวบไต์ทีเนนกำรนำเสนอ ออกเปนหมวดหม ู ่ เพือจัดท�ำเปนโครงสร ้ำงในกำรจัดวำงหน้ำเวบเพจทังหมดท�ำให้ผ้เข้ำเยียมชม
็
็
ั
็
�
็
้
่
้
่
่
้
�
็
ื
็
ื
็
็
็
เนอหำ เปนกำรออกแบบเวไชต์ทีเน้นกำรนำเสนอเนอหำมำกกว่ำรูปภำพ โดยโครงสร ้งใช ้รูปแบบ สำมำรถคันหำข้อมลในเวบเพจได้อย่ำงเปนระบบ ซึงถือว่ำเปนชันตอนทีส�ำคัญของกำรออกแบบ
ู
้
่
่
้
ู
ื
็
ื
ุ
็
่
ตำรำงเปนหลัก มีกำรออกแบบหน้ำตำรูปแบบงำยเชน มีเมนสำรบัญและเนอหำ เปนต้น2 กำร โครงสร ้ำงหรือจัดระเบียบของข้อมลทีชัดน แยกย่อยเนอหำออกเปนส่วนต่ำงๆ ทีมีควำมสัมพันธ์กัน
็
่
่
่
่
่
่
็
็
็
็
็
ิ
ออกแบบเวบไชต์ทีเน้นภำพกรำฟก เปนกำรออกแบบเวบไชต์ทีเน้นภำพกรำฟกทีสวยงำม ซึงอำจ จะช่วยให้นำใช ้งำนและงำยต่อกำรเข้ำใช ้งำนเวบไซต์ หลักในกำรออกแบบโครงสร ้ำงเวบไชด์ ควร
ิ
�
จะใช ้โปรแกรม Photshop ส�ำหรับกรตกแต่งภำพ ข้อดี สวยงำม นำสนใจ ข้อเสีย อำจจะใช ้เวลำใน พิจำรณำดังน ี ้
่
่
่
้
้
็
ื
็
็
็
็
กำรโหลดเวบนำน กำรออกแบบวบไชต์ทีมีทังภำพและเนอหำ เปนกำรออกแบบเวบทีนยมในปจจุบัน 1.4.1 ก�ำหนดวัตประสงค์ของกำรสร ้ำงเวบไซต์ว่ำท�ำเพืออะไร
ั
ิ
่
่
่
็
่
้
่
ซึงประกอบด้วข้อควำม รูปภำพ โดยมีกำรจัดองค์ประกอบต่ำงๆ เพือให้เวีบนำสนใจ 1.4.2 ก�ำหนดกลุมเปำหมำยของผ้ทีจะเข้ำมำดูเวบไซต์
ู
่
้
่
ื
1.2.2 กำรเลือกใช ้ทโโลวบไซค์เพือให้มีควำมเหมำะสมกับงำน เช่น HTMLS, CSS. 1.4.3 วำงแผนเกียวกับกำรจัดรูปแบบโครงสร ้ำงเนอหำ
็
่ ้
่
ื
ู
็
็
Semantic Wb เปนต้น กำรออกแบบเวบไซด์ต้องมีกำรจัดโครงสรัำงหรือจัดระเบียบชัอมลทีชัดเจนกำรทีเนอหำมีควำมต่อ
้
่
้
่
ื
่
1.2.3 เลือกโปรแกรมเบรำมีซอร ์ทีใช ้ในกำรแสดงเวบไซด์ เช่น TE, Chrome, Safarl, เนองไปไมสินสุดหรือกระจำยมำกเกินไปอำจท�ำให้กิดควมสับสนด่อผ้ใช ้ได้ ฉะนนจึงควรออกแบบ
็
ู
ั
Firefox ให้มีลักษณะทีชัดเจนแยกยอยออกเปนส่วนต่ำงๆ
่
็
่
เปนต้น ซึงโปรแกรมเบรำว์เซอร ์แต่ละตัวแสดงผลกำรท�ำงำนต่ำงกัน
็
12 13