เรื่อง หลักการออกแบบเว็บไซต์
ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์
การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้าง
แผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า Site Map
ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า
ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ
เราต้องกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้า
เชื่อมโยงถึงกันเื่พื่อให้กลับไปกลับมา ระหว่างหน้า
ต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่
มีการเชื่อมโยงสัมพันธ์กันดังภาพ
ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า
นักเรียนสามารถออกแบบหน้าเว็บเพจแต่ละหน้า
ให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก ซึ่งเรียกว่า
โฮมเพจนักเรียนควรออกแบบให้สวยงามเพื่อดึงดูด
ความสนใจของผู้เข้าชม
ในขั้นตอนการออกแบบนี้ บางทีอาจเรียกว่า
การออกแบบเลย์เอาท์ (Lay Out) สามารถทำได้
้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรม
คอมพิวเตอร์ช่วยในการออกแบบก็ได้
ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า
นำเว็บเพจที่ออกแบบไ้ว้มาสร้างโดยใช้ภาษา
html หรืออาจใช้โปรแกรมสำเร็จรูป เช่น
FrontPage, Macromedia Dreamweaver
หรือโปรแกรมสำเร็จรูปอื่น ๆ ตามความถนัด
ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่
ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆ
สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือ
นำเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่ ที่ให้บริการ
(Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริการฟรี และ
แบบที่ต้องเสียค่าบริการ
ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์
หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่
สำหรับฝากเว็บไซต์แล้ว ให้ใช้โปรแกรมสำหรับ
อัปโหลด (Upload) เช่นโปรแกรม CuteFTP
เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเรา
ผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้
หมายเหตุ ในบทเรียนชุดนี้จะยังไม่ได้กล่าวถึง
การขอพื้นที่ และการอัปโหลดเว็บไซต์ จะใช้วิธี
การสอนแบบสาธิตในห้องเรียนต่อไป
รูปแบบโครงสร้างของเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ สามารถทำได้หลายแบบ ขึ้นอยู่กับลักษณะของข้อมูล ความถนัดของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้
1.โครงสร้างของเว็บไซต์แบบเรียงตามลำดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราว ตามลำดับ เช่น การเรียงลำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงค์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลัง เป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ทำให้เสียเวลา ในการเข้าสู่เนื้อหา
2.โครงสร้างของเว็บไซต์แบบลำดับขั้น (Hierarchical Structure)
เป็นโครงสร้างที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อย ๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหา ลักษณะเด่นคือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่าง
3.โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure)
โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยง ซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูลประวัติศาสตร์ สมัยสุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหัวข้อย่อยเหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และภาษา ในขณะที่ผู้ใช้กำลังศึกษาข้อมูลทางประวัติศาสตร์เกี่ยวกับ การปกครองในสมัยอยุธยา ผู้ใช้อาจศึกษาหัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อการปกครองในสมัยรัตนโกสินทร์ก่อนก็ได้เพื่อ
เปรียบเทียบลักษณะข้อมูลที่เกิดขึ้นคนละสมัย
4. โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วยตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหาภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้
1.ใช้ภาษาคอมพิวเตอร์ในการสร้าง
เครื่องมือที่ใช้ คือ โปรแกรม Text Editor เช่น NotePad
ใช้ภาษา HTML เป็นหลักในการสร้างเว็บเพจ
และใช้ภาษาอื่น ๆ เช่น JAVA Script ,PHP, ASP
ช่วยเสริมความสามารถของเว็บเพจ การสร้างเว็บเพจ
ด้วยวิธีการนี้ต้องอาศัยโปรแกรมที่เรียกว่า เท็กเอดิเตอร์
(Text Editor) เช่น โปรแกรม Notepad หรือ Editplus
ในการสร้าง
2.ใช้โปรแกรมสำเร็จรูปในการสร้าง
เครื่องมือที่ใช้ คือ โปรแกรมสำเร็จรูป เช่น Dreamweaver
ใช้โปรแกรมสำเร็จรูปต่างๆ ในการสร้างเว็บเพจ เช่น
โปรแกรม Front Page,Macromedia Dreamweaver
โดยโปรแกรมสำเร็จรูปนั้น มีเครื่องมืออำนวยความ
สะดวกในการสร้างและตกแต่งเว็บเพจ แต่สุดท้ายแล้ว
การจัดเก็บข้อมูลเว็บเพจก็ยังคงจัดเก็บในรูปแบบของไฟล์
HTML เช่นเดียวกับการเขียนด้วยภาษาคอมพิวเตอร์ในวิธี
ีแรก อาจสรุปได้ว่า การใช้โปรแกรมสำเร็จรูปในการเขียน
เว็บเพจ คือการใช้โปรแกรมสำเร็จรูปนั้น มาเขียนภาษา
HTML นั่นเอง และในโปรแกรมสำเร็จรูปก็ยังคงสามารถ
เขียนภาษา HTML หรือภาษาอื่น ๆ ในการเพิ่มความ
สามารถให้กับเว็บเพจ เช่น PHP, ASP , JAVA Script
ได้อีกด้วย
แบบฝึกหัดบทที่ 2 เรื่องหลักการออกแบบเว็บไซต์
1. ข้อใดคือความหมายของ โครงสร้างเว็บไซต์
ก. การวางแผนการจัดลำดับขั้นตอนการทำงานของแต่ละเว็บเพจโดยมีเนื้อหาสาระในเว็บเพจนั้น
ข. การวางแผนในการเชื่อมต่อกับอินเตอร์เน็ต
ค. การเริ่มต้นในการทำโครงสร้าง
ง. การลงมือทำโครงสร้างเว็บไซต์
2. ข้อใดไม่ใชไฟล์รูปภาพที่นิยม
ก. JPEG
ข. PNG
ค. GIF
ง. PDD
3.สีฟ้าและสีน้ำเงินให้ความรู้สึกอย่างไร
ก.ความอบอุ่น ความสดใส ความร้อน
ข. ความสงบ สดใส สุภาพ
ค. ความรู้สึกร่มเย็น เย็นสบาย
ง. เป็นสีแห่งการแผ่กระจาย อำนาจบารมี
4. สีเหลืองให้ความรู้สึกอย่างไร
ก.ความอบอุ่น ความสดใส ความร้อน
ข. แสงสว่าง อ่อนโยน บริสุทธิ์
ค. ความรู้สึกร่มเย็น เย็นสบาย
ง. เป็นสีแห่งการแผ่กระจาย อำนาจบารมี
5. ข้อใดให้ความหมายของความรู้สึกต่อสีนี้ถูกต้อง สีที่มีความสว่าง อ่อนโยน บริสุทธิ์
ก.สีแดง
ข.สีฟ้า,สีน้ำเงิน
ค.สีเขี่ยว
ง.สีส้ม
6. Grid Structure คือโครงสร้างแบบใด
ก.โครงสร้างแบบลำดับขั้น
ข.โครงสร้างแบบเรียงลำดับ
ค.โครงสร้างแบบตาราง
ง.โครงสร้างแบบใยแมงมุม
7. Web Stucture คือโครงสร้างแบบใด
ก.โครงสร้างแบบลำดับขั้น
ข.โครงสร้างแบบเรียงลำดับ
ค.โครงสร้างแบบตาราง
ง.โครงสร้างแบบใยแมงมุม
8. หลักการออกแบบโครงสร้างเว็บไซต์มีกี่ขั้นตอน
ก. 2 ขั้นตอน
ข. 4 ขั้นตอน
ค. 6 ขั้นตอน
ง. 8 ขั้นตอน
9.รูปแบบโครงสร้างเว็บไซต์มีกี่รูปแบบ
ก. 1 รูปแบบ
ข. 2 รูปแบบ
ค. 3 รูปแบบ
ง. 4 รูปแบบ
10 ข้อใดการเตรียมข้อมูล
ก. การเตรียมข้อมูลแบบตัวอักษร
ข. การเตรียมข้อมูลรูปแบบรูปภาพ
ค.การเตรียมข้อมูลในรูปแบบเสียง
ง.การเตรียมขัอมูลในเรื่องอิน้ตอร์เน็ต
ไม่มีความคิดเห็น:
แสดงความคิดเห็น