ใบความรู้ หน่วยที่ 2

หน่วยท่ี 2การวิเคราะหแ์ ละออกแบบ โครงสร้างเว็บไซต์

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

2.2 ลกั ษณะโครงสรา้ งของเว็บไซต์ ในการออกแบบเวบ็ ไซตท์ ีด่ คี วรตอ้ งวางโครงสรา้ งให้มีความสมดลุมกี ารออกแบบโครงสร้างเนื้อหา โดยตอ้ งวางแผนโครงสรา้ งให้ดี มีการเชื่อมตอ่ สมั พนั ธ์กนั ระหวา่ งรายการ (Menu) หรือโฮมเพจ (Home Page) กบั เนือ้ หาอืน่ ๆ รวมถงึ การเชอ่ื มโยงไปส่ภู าพส่อื มลั ตมิ เี ดยี และขอความตา่ ง ๆ ไดอ้ ยา่ งเหมาะสม เพอื่ ป้องกันไม่ให้ผใู้ ชง้ านนระบบหลงทางในขณะเขา้ สเู่ นื้อหาตา่ ง ๆในเว็บไซต์

โครงสร้างของเว็บไซต์แบบเรยี งตามลาดับ เป็นโครงสร้างเวบ็ ไซตแ์ บบเรยี งตามลาดับเปน็ โครงสรา้ งของเว็บไซตแ์ บบธรรมดา ทใ่ี ช้กันมากท่ีสดุ เนื่องจากง่ายต่อการจัดระบบข้อมลู ขอ้ มลู ท่ีนิยมจดั ดว้ ยโครงสร้างแบบน้ี มักเป็นขอ้ มลู ทีมีลักษณะเปน็ เร่ืองราวตามลาดับ ไม่ซับซ้อนมาก เหมาะกับเวบ็ ไซต์ทีมี ขนาดเลก็ เนือ้ หาไม่ซบั ซ้อน ใช้การลงิ ก์ (Link) ไปทลี ่ะหนา้

โครงสร้างของเวบ็ ไซตแ์ บบตาราง ลกั ษณะเด่น คอื การมีจุดเร่มิ ต้นเพยี งจุดเดยี ว นน่ั คอื โฮมเพจ (Home page) และเช่อื มโยงไปสู่เน้อื หาในลกั ษณะเป็นลาดับบนลงลา่ ง

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

โครงสรา้ งของเวบ็ ไซต์แบบใยแมงมุม โครงสรา้ งแบบใยแมงมมุ จะมีความยดื หยนุ่ มากทสี่ ุด โดยเนื้อหาทกุ หนา้ ในเว็บ สามารถจะเชอ่ื มโยงไปถงึ กนั ไดห้ มด จงึ เปน็ รปู แบบการเขา้ สูเ่ นอ้ื หาที่เปน็ อิสระ ซ่งึ ผูใ้ ช้ สามาถกาหนดวิธีการเข้าสเู่ นือ้ หาไดด้ ้วยตนเอง

2.3 ข้นั ตอนการออกแบบเวบ็ ไซต์1. กาหนดโครงสรา้ งเวบ็ ไซต์2. กาหนดการเชื่อมโยงระหว่างเว็บไซต์3. การออกแบบเว็บเพจแต่ละ่ หนา้4. การสรา้ งเวบ็ เพจแต่ละหนา้5. การลงทะเบียนขอพ้นื ที่เวบ็ ไซต์6. การอัปโหลดเว็บไซต์

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

2.4.1 การจดั เตรยี มตวั ข้อมลู ส่วนของเนื้อหา ในการจดั เตรียมขอ้ มลู ในสว่ นของเน้ือหานนั้ จะตอ้ งคานงึ ถงึ ประเภทของขอ้ มูลวา่ ข้อมลู ทีจะ จัดเก็บให้แสดงในส่วนเนือ้ หาเป็นข้อมลู ประเภทใดเพื่อใหผ้ ู้พฒั นาออกแบบวิธกี ารนาเสนอที่ น่าสนใจและแปลกใหม่ โดยสามารถแบง่ ประเภทของขอ้ มลู ดงั นี้ 1.ขอ้ มูลประเภทตัวอกั ษร เช่น เนือ้ หาข่าว รายละเอยี ดสินคา้ แตล่ ะช้นิ เพอ่ื ความสะดวก รวดเรว็ ในการใสร่ ายละเอียดบนเว็บไซต์ อาจพิมพ์ขอ้ มูลตวั อกั ษรเกบ็ ไว้โปรแกรม notepad, Microsoft word 2.ขอ้ มูลประเภทรูภาพประกอบไฟล์รูปภาพทีใ่ ช้อยู่ในปจั จุบันน้ีมีหลายประเภทแตไ่ ฟล์ รูปภาพท่ีนิยมใช้กับการพัฒนาเวบ็ เพจ ม3ี ประเภทคือ

1.ไฟล์ประเภท GIF Graphics Interchange Format เป็นไฟลภ์ าพท่ีมีขนาดเล็กคณุ ภาพตา่ แสดงสีได้ 256 สี เนื่องจากถูกบบี อัด ขอ้ มูลให้มขี นาดเลก็ แตเ่ ป็นท่นี ิยมสาหรบั ผ้เู ขยี นเว็บเพจ เป็นอย่างมาก เพราะ สามารถทาเป็นภาพเคลอ่ื นไหว Animation และกาหนดให้แสดงภาพแบบโปรง่ แสงมองทะลุไปด้วนหลงั ไดไ้ ฟลป์ ระเภทส่วนใหญจ่ ะเป็น รูปวาด ภาพการต์ ูน ภาพเคลอ่ื นไหว รปู Icon, Emotion ป้ายโฆษณาแบบเนอร์ เป็นตน้

2. ไฟล์ประเภท JPEG หรอื JPG joint photographic Expert Group เป็นไฟลร์ ูปภาพทส่ี ามารถแสดงสีได้ 16.7 ลา้ นสี มคี วามคมชัดมาก ไฟลป์ ระเภทนีเ้ หมาะสมกบั ภาพที่ต้องการความ ละเอียดสงู เชน่ ภาพถา่ ยจากกลอ้ งดจิ ิตอล หรือ ภาพทแ่ี สดงการ ไลเ่ ฉดสี เป็นตน้

3.ไฟล์ประเภท PNG portable Network Graphic เปน็ ไฟล์ภาพท่ีนามาใชแ้ ทนทีไ่ ฟล์ประเภท GIF ท่ีเปน็ ไฟล์ขนาดเลก็ เมอื่ ขยายภาพทาใหเ้ ปน็ จุดๆ เนอื่ งจากไฟลป์ ระเภท PNG สามารถภาพได้เรว็ กว่า แตไ่ มแ่ พร่หลายมากนักเนื่องจากไมส่ ามารถทาเปน็ ภาพเคลอ่ื นไหวได้ และมีคุณสมบตั คิ ล้ายกันไฟล์ GIFจงั เหามะสมสาหรับภาพที่มเี รียบๆ เชน่ ภาพโลโก้ การ์ตนู สามารถกาหนดพนื้ หลงั ให้โปรง่ แสงได้ ส่วนไฟลป์ ระเภท PNG-24 เปน็ รปู แบบทีใ่ ช้สไี ด้ 16.7 ลา้ นสีเชน่ เดยี วกนั กบั ไฟล์ JPG เหมาะสาหรับภาถา่ ย

2.4.2 การจัดเกบ็ ไฟล์ขอ้ มูล ในการพัฒนาระบบเว็บไซต์นัน้ สง่ิ สาคญั ที่จะตอ้ งคานงึ ถงึ คอื การเก็บไฟลใ์ ห้เปน็ หมวดหมูหมเู่ พอ่ื ง่ายต่อการเขา้ ไปจัดการกบั เน้อื หาและตอ้ งการพฒั นา ซงึ่ ส่วน เวบ็ ไซตป์ ระเภท CMS จดั หมวดหมู่ไว้อย่างชัดเจนเพือ่ ให้ผู้พฒั นาประยุกต์ใช้ งานอย่างถูกต้อง

2.5 หลักการเลือกสีท่เี หามะสมกับงาน พัฒนาเว็บไซต์ สีน้นั มีความสาคัญอย่างยิ่งในการออกแบบและพัฒนาระบบเวบ็ ไซต์ การเลอื กสีใหเ้ ข้ากบั เน้อื หาของเว็บไซตจ์ ะทาใหเ้ ว็บไซต์จาทาให้เวบ็ ไซตม์ ีความนา่ เชอ่ื ถอื ยิง่ ขึน้ และยงั สง่ ผลอยา่ งมากกับความสวยงามความเปน็ เอกลักษณ์ให้กบั เวบ็ ไซตห์ รือองค์กรได้ จงึ มคี วามจาเปน็ ต้องสาศึกษาเกีย่ วกบั ทฤษฎีสี เพือ่ ใหส้ ามารถออกแบบและเลือกใช้สไี ด้อยา่ งเหามะสม