0 การสร้างเว็บไซต์ 0
1 การสร้างเว็บไซต์ 1 หน่วยที่ 2 การออกแบบเว็บไซต์ เว็บไซต์เป็นสื่อที่ช่วยเผยแพร่ข้อมูลาวสารและบริการต่าง ๆ ให้เป็นที่รู้จักอย่างแพร่หลายเว็บไซต์จึง เปรียบเสมือนหน้าตาและความน่าเชื่อถือของเจ้าของเว็บไซต์หากว่าผู้ที่เข้ามาเยี่ยมชมเว็บไซต์แล้วไม่ประทับใจกับ เว็บไซต์จะส่งผลในด้านอื่น ๆ โดยปริยาย การออกแบบเว็บไซต์ จึงเป็นการวางแผ่นการแสดงผลและการจัดวางข้อมูลต่าง ๆ ของเว็บไซต์ความ เหมาะสม มีประสิทธิภาพในการแสดงเนื้อหาแก่ผู้เยี่ยมชมเว็บไซต์ได้อย่างชัดเจน เข้าใจง่าย และเกิดความน่าสนใจ เนื้อหาทั้งเว็บไซต์ให้มากที่สุด เพราะหากมีการออกแบบและจัดวางเนื้อหาของเว็บไซต์ได้ไม่เหมาะสมจะทำให้ผู้ เยี่ยมชมไม่สามารถเข้าถึงข้อมูลที่ต้องการนำเสนอได้ครบถ้วน ส่งผลให้สูญเสียโอกาสในการนำเสนอข้อมูลส่วนอื่น แก่ผู้เข้าชม และการออกแบบเว็บไซต์จะต้องมีการดำเนินงานตามขั้นตอน เพื่อได้ผลงานออกมาในเวลาที่รวดเร็ว และมีคุณภาพและตรงตามความต้องการ 2.1 ประเภทของเว็บไซต์ เว็บไต์ที่เผยแพร่อยู่ในปัจจุบันสามารถแบ่งออกเป็นประเภทต่าง ๆ ตามลักษณะการทำงานของเว็บไซต์ได้เป็น 2 ประเภท ดังนี้ 1.Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML และบันทึกเป็นไฟล์นามสกุล .htm หรือ html ประกอบด้วยข้อความ รูปภาพ และไฟล์มัลติมีเดียต่าง ๆ ตามที่กำหนดไว้ในเว็บเพจเมื่อมีผู้เรียกดูเว็บเพจนั้น เว็บเซิร์ฟเวอร์ (Web Server) ก็จะส่งไฟล์นั้นไปให้ยังเครื่องที่ร้องขอ และแสดงผลออกทางโปรแกรมเว็บ เบราว์เซอร์บนเครื่องของผู้ชมนั้น Static Website เหมาะกับเว็บไซต์มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูล บ่อย ๆ และไม่มีการติดต่อฐานข้อมูลเว็บไซต์ประเกทนี้สามารถกำหนดรูปแบบการตกแต่งและเนื้อหาได้ตาม ต้องการแต่การแก้ไขเปลี่ยนแปลงค่อนข้างยุ่งยาก และไม่สามารถใช้งานฐานข้อมูลได้ 2. Dynamic Website เป็นเว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลได้ โดยไม่ต้องเขียนข้อมูลใน แต่ละหน้าเว็บเพจเอง เช่น กระดานข่าวหรือ Webboard ระบบสืบคันข้อมูลเว็บไซต์รูปแบบนี้จะถูกสร้างด้วย ภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นตัน และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจาก ฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจการทำงานของเว็บไซต์รูปแบบนี้จะต่างจากแบบ Static Website โดย เมื่อมีผู้เรียกดูหน้าเว็บเพจ ไฟล์หน้าเว็บเพจนั้นจะถูกแปลและกระทำคำสั่งและทำให้อยู่ในรูปแบบเอกสาร HTML ก่อนจึงส่งกลับให้ Web Server เพื่อส่งต่อไปให้ผู้ใช้งานต่อไป
2 การสร้างเว็บไซต์ 2 การสร้างเว็บไซต์รูปแบบนี้ ต้องอาศัยความรู้ในการเขียนโปรแกรมมากกว่าแบบแรกมาก นอกจากจะต้อง มีความรู้พื้นฐาน HTML แล้ว ยังต้องเขียนภาษา Server Side Script เป็น ต้องมีความรู้เรื่องการจัดการฐานข้อมูล ต้องเขียนภาษา SOL เพื่อจัดการกับข้อมูลในฐานข้อมูลได้ และอาจจะต้องอาศัยความรู้ด้านอื่นเพื่อให้เว็บเพจมี ประสิทธิภาพยิ่งขึ้น นอกจากนั้นยังสามารถแบ่งประเภทของเว็บไซต์ตามวัตฤประสงค์และประโยชน์จากการจัดทำ เว็บไซต์ จึงสามารถแบ่งออกเป็น 7 ประเภท ดังนี้ (บริษัทเดอะกูรู จำกัด 2557: ออนไลน์) 1. เว็บไซต์ส่วนตัว เป็นเว็บไซต์ที่สร้างขึ้นเพื่อเผยแพร่ข้อมูลส่วนตัว เช่น ข้อมูลเกี่ยวกับส่วนตัว เช่น ข้อมูล เกี่ยวกับส่วนตัว การศึกษา การงาน ความสนใจ เป็นต้น 2 เว็บไซต์เพื่อธุรกิจการค้า เป็นเว็บไซต์ที่มีจุดประสงค์เพื่อการค้าขายสินค้า การโฆษณาสินค้า การส่งเสริม การขาย ในเว็บไซต์จะมีข้อมูลของสินค้า ราคาและการบริการต่าง ๆ ซึ่งในปัจจุบันตลาดประเภทนี้ กำลังใช้กันมาก ขึ้น 3. เว็บไต์ที่เสนอข่าวประจำวัน เป็นเว็บไซต์ที่เสนอข้อมูลประเภทข่าว ซึ่งจะเปลี่ยนไปเป็นประจำวันเช่น เว็บไซต์ของหนังสือพิมพ์ไทยรัฐ เดลินิวส์ เป็นต้น 4.เว็บไซต์ส่งเสริมการบริการเป็นสื่อกลางของข้อมูล เป็นเว็บไซต์ที่มีจุดประสงค์เพื่อใช้แลกเปลี่ยนข้อมูล ตามกลุ่มสนใจ เช่น แบ่งตามอาชีพ ตามงานอดิเรก เป็นต้น 5. เว็บไซต์ที่สร้างขึ้นเพื่อชักชวนหรือโฆษณาชวนเชื่อ เป็นเว็บไซต์ที่เชิญชวนหรือชักนำให้คล้อยตามใน เรื่องที่ผู้สร้างต้องการ 6. เว็บไซต์เพื่อการสอน เป็นเว็บไซต์ที่สร้างขึ้นเป็นการสอนโดยเฉพาะเป็นรายวิชา อาจแยกย่อยเป็นหัว เรื่องเรื่องย่อย ๆ ก็ได้ สำหรับเว็บไซต์ประเภทนี้จะจำกัดผู้ใช้เฉพาะราย 7. เว็บไซต์ที่จำกัดเฉพาะสมาชิก เป็นเว็บไซต์ที่บริการเฉพาะสมาชิกเท่านั้น ใช้ต้องลงทะเบียนตามราคาที่ กำหนดโดย บัตรเครดิต หรือผ่านธนาคาร ให้บริการจึงจะให้หมายเลขสมาชิกและรหัสผ่าน แต่การขายสินค้าหรือบริการใด ๆ ของเว็บไซต์เหล่านี้ จะเชิญชวนผู้ที่สนใจโดยมีตัวอย่างสินค้าหรือบริการให้ศึกษาบางส่วนจนพอใจด้วย 2.2 การกำหนดขนาดของหน้าเว็บเพจ สิ่งที่ต้องคำนึงถึงอันดับแรกในการออกแบบและสร้างเว็บไซต์คือการกำหนดขนาดของหน้าเว็บเพจอันเป็น ส่วนสำคัญที่จะทำให้ผู้เข้าชมเว็บไซต์สามารถเข้าถึงข้อมูลได้อย่างครบถ้วนหรือไม่ เพราะถ้ากำหนดขนาดของหน้า เว็บเพจไม่เหมาะสมอาจทำให้ผู้เข้าชมเว็บไซต์ไม่สามารถมองเห็นบางส่วนของหน้าเว็บเพจเพราขนาดเล็กเกินไป หรือใหญ่เกินไปจนตกขอบจอภาพ หรือทำให้สัดส่วนของเว็บเพจผิดรูปไม่น่าสนใจ จึงควรคำนึงถึงขนาดของหน้า เว็บเพจเป็นหลักโดยพิจารณาจากแนวโน้มการใช้จอภาพในปัจจุบันที่ส่วนใหญ่เป็น
3 การสร้างเว็บไซต์ 3 จอภาพแบบ LCD หรือ LED ที่มีลักษณะเป็นจอ Widescreen มากกว่าจอสี่เหลี่ยมจัตุรัส หรือจอแบบ CRTฉะนั้นเราสามารถอนุมานได้ว่าขนาดของหน้าเว็บเพจที่จะสร้างควรมีขนาดเท่าไร หรืออาจจะใช้เทคนิค ทางด้านการใช้โปรแกรมจับหน้าจอหน้าเว็บไซต์อื่นมาวัดขนาดดูก็ได้ การออกแบบหน้าเว็บเพจให้พอดีกับจอภาพของผู้ใช้งานนั้นผู้ออกแบบและสร้างเว็บไซต์จะต้องทราบ ขนาดจอภาพที่ใช้เป็นหลัก ดังที่กล่าวมาจอภาพที่ใช้กันอยู่ในปัจจุบันจะเป็นจอภาพแบบ LCD หรือ LED ที่เป็น จอภาพแบบ Widescreen ซึ่งมีความละเอียดของหน้าจอตั้งแต่ขนาด 800 x 600 pixel ขึ้นไปจนถึงความละเอียด สูง ๆ เช่น 1920 x 1080 pixel ฉะนั้นในการกำหนดขนาดของหน้าเว็บเพจ ถ้ากำหนดขนาดหน้าเว็บเพจเล็กเมื่อ เปิดดูด้วยหน้าจอขนาดใหญ่หรือความละเอียดสูงก็อาจจะดูไม่สมดุล หรือถ้ากำหนดให้หน้าเว็บเพจมีขนาดใหญ่ เวลาแสดงผลกับจอภาพขนาดเล็กก็จะล้นขอบจอ ความละเอียดของหน้าจอที่ใช้กันมากที่สุดคือขนาด 1024 x 768 pixel ขนาด 1280 x 800 pixel หรือขนาด 1280 x 1024 pixel แต่มีผู้ใช้งานจำนวนหนึ่งที่ใช้จอความละเอียด เพียง 800 x 600 Pixel ดังนั้นการกำหนดขนาดของหน้าเว็บเพจที่นิยมในปัจจุบันมี 2 ขนาด คือ 1. ขนาดเว็บไซต์แบบ 800 x 600 Pixel เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดในปัจจุบันเป็น ขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากจอภาพมีขนาดเล็ก 2 ขนาดเว็บไซต์แบบ 1024 x 768 Pixel เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้จอคอมพิวเตอร์ ขนาดใหญ่ขึ้น นอกจากนั้นเรายังสามารถใช้ตารางช่วยในการออกแบบหน้าเว็บเพจ โดยกำหนดขนาดตารางกว้าง ประมาณ 800-1024 pixel แล้วกำหนด Align เป็น Center เพื่อจัดให้เนื้อหาอยู่กึ่งกลางตลอด การทำเช่นนี้ สามารถแก้ปัญหาเรื่องขนาดหน้าจอที่ผู้ใช้แตกต่างกันได้ ทำให้เว็บไซต์สามารถแสดงได้กับทุกขนาดจอภาพดังที่ เห็นในเว็บไซต์ต่าง ๆ ในปัจจุบัน ดังรูปที่ 2.1
4 การสร้างเว็บไซต์ 4 2.3 โครงสร้างเว็บไซต์ โครงสร้างเว็บไซต์ เป็นแผนผังของการเรียงลำดับเนื้อหาหรือการจัดวางตำแหน่งเว็บเพจทั้งหมด ที่จะทำ ให้เรารู้ว่าทั้งเว็บไซต์ประกอบด้วยเนื้อหาอะไรบ้างดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงเป็นเรื่องสำคัญที่จะทำ ให้สามารถออกแบบระบบ เนวิเกชั่นได้เหมาะสมและเป็นแนวทางการทำงานที่ขัดเจนสำหรับขั้นตอนต่อ ๆ ไปซึ่งมีโครงสร้างเว็บไซต์แบบต่างๆ ดังนี้ (บริษัท สยามไซเบอร์เอ็ด จำกัด 2557: ออนไลน์) 2.3.1 โครงสร้างเว็บไซต์แบบเรียงสำดับ (Sequential Structure) เป็นโครงสร้างข้อมูลในลักษณะที่ เป็นเรื่องราวตามลำดับของเวลา เช่น การเรียงสำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์โครงสร้าง แบบนี้ เหมาะกับเว็บไซต์ที่มี ขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การสิงก์ (Link) ไปทีละหน้าทิศทางของการเข้าสู่เนื้อหาภายในเว็บจะเป็นการดำเนิน เรื่องในลักษณะเส้นตรง โดยมีปุ่มเดินหน้าถอยหลังเป็นเครื่องมือหลักในกรกำหนดทิศทาง แต่ผู้ใช้ไม่สามารถ กำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ทำให้เสียเวลาเข้าสู้เนื้อหา รูปที่ 2.2 โครงสร้างเว็บไซต์แบบเรียงลำดับ 2.3:2 โครงสร้างเว็บไซต์แบบลำตับขั้น (Hierarchical Structure) เป็นโครงสร้างที่แบ่งเนื้อหา ออกเป็นส่วน ๆ และมีรายละเอียดย่อยในแต่ละส่วนลดหลั่นกันมาในลักษณะแผนภูมิจึงง่ายต่อการทำความเข้าใจ โครงสร้างของเนื้อหาเป็นวิธีที่ดีวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูลโครงสร้างแบบลำดับ ชั้นนี้มีจุดเริ่มตันจุดเดียวที่หน้าโฮมเพจ (Home Page ) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลง ล่าง
5 การสร้างเว็บไซต์ 5 รูปที่ 2.3 โครงสร้างเว็บไซต์แบบลำดับขั้น 2.3.3 โครงสร้างเว็บไซต์แบบตาราง (Grid Structure) เป็นโครงสร้างที่มีการเชื่อมโยงซึ่งกันและกัน ระหว่างเนื้อหาแต่ละส่วนเป็นโครงสร้างที่มีความยึดหยุ่นสำหรับผู้ใช้ โดยทุกเนื้อหามีความสำคัญเท่า ๆ กันหรือเป็น เนื้อหาย่อยเหมือนกันและมีลักษณะร่วมกัน ดังนั้นทุกเนื้อหาจึงเชื่อมโยงถึงกันได้ การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็น ลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ รูปที่ 2.4 โครงสร้างเว็บไซต์แบบตาราง
6 การสร้างเว็บไซต์ 6 โครงสร้างเว็บไซต์แบบตารางนี้ ควรใช้เนื้อหาที่มีลักษณะที่เหมือนกัน และสามารถใช้รูปแบบร่วมกันโดย นำหัวข้อทั้งหมดมาบรรจุลงในที่เดียวกันซึ่งโดยทั่วไปจะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดียวกับ โครงสร้างของเว็บ เมื่อผู้ใช้คลิกเลือกหัวข้อใดก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page) ที่แสดงรายละเอียดของหัวข้อ นั้น ๆ และภายในหน้านั้นก็จะมีการเชื่อมโยงไปยังหน้ารายละเอียดของหัวข้ออื่นที่เป็นเรื่องเดียวกัน 2.3.4 โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure) เป็นโครงสร้างที่ทุกหน้าเว็บเพจสามารถ เชื่อมโยงไปถึงกันได้หมด เป็นโครงสร้างที่มีความยืดหยุ่นมากที่สุด ที่ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วย ตนเองการเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีความคิดรวบยอด (Concept) เหมือนกัน ของแต่ละหน้าเป็นโครงสร้างที่มีรูปแบบโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยง ไม่ได้จำกัดเฉพาะเนื้อหาภายในเว็บนั้น ๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้ รูปที่ 2.5 โครงสร้างเว็บไซต์แบบใยแมงมุม โครงสร้างเว็บไซต์แบบนี้จะมีความยุ่งยากในการปรับปรุงหรือเพิ่มเนื้อหา นอกจากนี้การเชื่อมโยงระหว่าง ข้อมูลที่มีมากมายนั้นอาจทำให้ผู้ใช้เกิดการสับสนและเกิดปัญหาการเปิดเว็บเพจที่ไม่ได้ใช้ค้างไว้ได้ 2.4 การออกแบบหน้าจอเว็บเพจ การออกแบบหน้าเว็บเพจเป็นการวางโครงร่าง กำหนดตำแหน่งการจัดวางส่วนประกอบต่าง ๆ บนเว็บเพจ เพื่อการนำเสนอข้อมูลที่ครบถ้วนและเป็นที่สนใจแก่ผู้เข้าชม
7 การสร้างเว็บไซต์ 7 2.4.1 ส่วนประกอบของหน้าเว็บเพจ การกำหนดตำแหน่งการจัดวางส่วนประกอบต่าง ๆ บนเว็บเพจ ขึ้นอยู่กับการออกแบบและวัตถุประสงค์ของผู้สร้าง เว็บไซต์ซึ่งส่วนประกอบของเว็บเพจที่ตีโดยทั่วไปควรจะมีส่วนประกอบหลักดังนี้ รูปที่ 2.6 ส่วนประกอบของเว็บเพจ 1. ส่วนหัวของหน้าเว็บเพจ (Header)เป็นส่วนที่อยู่ตอนบนสุดของหน้าเว็บเพจเป็นส่วนที่บ่งบอกถึง ลักษณะและเนื้อหาของเว็บไซต์ เป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์มักใส่ภาพกราฟิกเพื่อสร้าง ความประทับใจ ส่วนใหญ่ประกอบด้วย (1) โลโก้ (Logo) เป็นสัญลักษณ์ตัวแทนของเว็บไซต์ และยังทำให้เว็บนำเชื่อถือ (2) ชื่อเว็บไซต์เป็นชื่อที่ระบุให้ทราบถึงเป้าหมายของเว็บไซต์ (3) เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์ 2. ส่วนเนื้อหา (Contents) เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ซึ่ง ประกอบด้วยข้อความตารางข้อมูล ภาพกราฟิก วิดีโอ และอื่น ๆ และอาจมีเมนูหลักหรือเมนูเฉพาะกลุ่มวางอยู่ใน ส่วนนี้ด้วย สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับใช้รูปแบบ ตัวอักษรที่อ่านง่ายและจัด Layout ให้เหมาะสมและเป็นระเบียบ 3. ส่วนเมนู (Navigator) เป็นส่วนช่วยให้การค้นหาข้อมูลได้สะดวกมากขึ้น ซึ่งเมนูส่วนใหญ่อยู่ด้านบน ด้านข้าย หรือด้านขวา เป็นหลัก ส่วนหลายเว็บในปัจจุบันมีการเพิ่มเมนูในส่วนเพราะเนื้อหามีความยาวเกินหนึ่ง หน้า หรือเพื่อเป็นการเพิ่มความสะดวกในการเข้าถึงเนื้อหาในส่วนอื่น ๆ
8 การสร้างเว็บไซต์ 8 4. ส่วนท้ายของหน้าเว็บเพจ (Footer) เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ นิยมวางระบบ นำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่นเจ้าของเว็บ ไซต์ ข้อความแสดงลิขสิทธิ์วิธีการติดต่อกับผู้ดูแลเว็บไซต์คำแนะนำการใช้เว็บไซต์เป็นต้น โดยปกส่วนหัวและส่วนท้าย มักแสดงเหมือนกันในทุกหน้าของเว็บเพจ 5. ช่องว่าง (Space) เป็นพื้นที่ว่าง ๆ ส่วนหนึ่งบนหน้าเว็บเพจที่ทำให้ดูแล้วผ่อนคลาย ไม่รู้สึกอึดอัด หรือ อาจจะเป็นแนวทางการออกแบบด้วยการกำหนดตำแหน่งการจัดวางส่วนประกอบต่าง ๆ บนเว็บเพจข้างตัน ไม่ใด้ กำหนดเป็นมาตรฐาน สามารถปรับเปลี่ยนหรือย้ายตำแหน่งได้ตามการออกแบบ แต่อาจทำให้ผู้เข้าชมเว็บไซต์เกิด ความสับสนได้ ดังนั้นเพื่อเป็นการเริ่มต้นการทำเว็บทีดี แนะนำให้ทำตามตัวอย่างมาตรฐานก่อน 2.4.2 การออกแบบระบบเนวิเกชั่น หรือระบบการเชื่อมโยงเว็บ (Navigation Design) การออกแบบโครงสร้างเว็บเพจที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบนิเนวิเกชั่นเป็นส่วนเริ่มใน การสร้างสิ่งแวดล้อมที่สื่อความหมาย เพื่อช่วยให้ผู้เข้าใช้เว็บไซต์ได้อย่างคล่องตัวโดยไม่หลงทาง ทำให้ผู้เข้าใช้ สามารถรู้ว่าตัวเองกำลังอยู่ที่ไหน ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อแบ่งออกเป็น 4 รูปแบบ ดังนี้ 1. ระบบเนวิเกชั่นแบบลำดับชั้น (Hierarchical) เป็นระบบเนวิเกชั่นพื้นฐานที่มีการเชื่อมโยงตามลำดับชั้น ของข้อมูลและมีการเคลื่อนที่เฉพาะแนวตั้งจากหน้าหลักไปยังหน้าย่อยถัดลงไปหรือย้อนกลับขึ้นมา ทำให้ต้อง อาศัยระบบเนวิกเกชั่นแบบอื่นเพิ่มเติม เพื่อให้มีความคล่องตัวยิ่งขึ้น ㆍ About o History ㆍThe Early Years ㆍModer Day o Management o Mission Statement o Locations o Product Line ㆍWidget 2000 ㆍWidget 2005 ㆍWidget 5000 New รูปที่ 2.7 ระบบเนวิเกชั่นแบบลำดับชั้น (Hierarchical) (ที่มา : http://www.codeproject.com)
9 การสร้างเว็บไซต์ 9 2. ระบบเนวิเกชั่นแบบโกลบอล (Global) เป็นระบบเนวิเกชั่นที่ใช้เชื่อมโยงไปยังส่วนหลัก ของเว็บไซต์ เป็นระบบที่ช่วยเสริมข้อจำกัดของแบบลำดับชั้น เนวิเกชั่นแบบโกลบอลนี้จะใช้เพื่อเชื่อมโยงไปยังส่วนหลัก ๆ ของ เว็บไซต์ ซึ่งอาจอยู่ในรูปของ เนวิเกชั่นบาร์ที่วางไว้ต้านบนหรือต้านล่างสุดของเว็บเพจทุกหน้าก็ได้ 3. ระบบเนวิเกชั่นแบบโลคอล (Local) เป็นระบบเนวิเกชั่นที่ใช้เชื่อมโยงไปยังหัวข้อย่อยหรือ รายละเอียดภายในหัวข้อหลักนั้น ๆ สำหรับเว็บที่มีความชับซ้อนมากนอกจากระบบเนวิกเกชั่นแบบโกลบอล แล้วยังอาจต้องใช้ระบบเนวิกเกชั่นแบบโลคอลหรือแบบเฉพาะส่วนเข้ามาช่วย 4. ระบบเนวิเกชั่นแบบเฉพาะที่ (Ad Hoc) เป็นระบบเนวิเกชั่นเฉพาะที่ตามความจำเป็นของเนื้อหา จึงก็คือส่วนเชื่อมโยงของคำหรือข้อความที่ น่าสนใจซึ่งฝังอยู่ในประโยคที่เชื่อมไปยังรายละเอียดเกี่ยวกับคำนั้น ๆ เพิ่มเติม ระบบเนวิเกชั่นที่สำคัญจะเป็นเนวิเกชั่นที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อ ผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซต์แล้วไม่อยากกลับมาเริ่มต้นใหม่ที่หน้าแรกระบบเนวิเกชั่นหลักทั้งแบบโก บอลและแบบโลคอลจึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใด ๆ ไปสู่ส่วนอื่นในเว็บไซต์ได้อย่างคล่องตัว ซึ่งเนวิเกชั่นมี ได้หลายรูปแบบเช่น 1.Navigation Bar เป็นเนวิเกชั่นที่ประกอบด้วยกลุ่มเชื่อมโยงที่รวมกันอยู่ในบริเวณหนึ่งของเว็บเพจซึ่ง อาจจะใช้ตัวอักษรหรือกราฟิกก็ได้
10 การสร้างเว็บไซต์ 10 รูปที่ 2.12 ลักษณะ Search Box 3. Menu เป็นเนวิเกชั่นแบบเมนูสำหรับเชื่องโยงไปยังเนื้อหาหลักของเว็บไซต์ ส่วนมากจะเป็นข้อความ หรือภาพกราฟิก และจะต้องปรากฏอยู่ทุกเว็บเพจ รูปที่ 2.13 ลักษณะ Menu 4. Pop-up Menu เป็นเนวิเกชั่นแบบรายการเลือกที่จะผุดขึ้นเมื่อคลิกเมาส์ที่ลูกศรหลังรายการนั้นอาจจะอยู่ใน หน้าเฉพาะที่มีรูปแบบเป็นระบบสารบัญ ระบบดัชนี หรือ Site Map
11 การสร้างเว็บไซต์ 11 รูปที่ 2.14 ลักษณะ Pop-up Menu 5. Image Map เป็นเนวิเกชั่นแบบแบ่งพื้นที่ย่อยในรูปภาพ เพื่อให้สามารถเชื่อมโยงไปยังไฟล์เอกสารเว็บเพจที่ แตกต่างกันได้ รูปที่ 2.15 ลักษณะ Image Map ในการออกแบบเว็บไซต์ต้องรู้หลักการสร้างเนวิเกชั่นที่เหมาะสม เพื่อจะสื่อถึงเนื้อหาได้อย่างชัดเจนและ นำสนใจ โดยจะต้องคำนึงถึงคุณสมบัติของระบบเนวิเกชั่นที่ดีต่าง ๆ ดังนี้ 1. ต้องอยู่ในตำแหน่งที่เห็นได้ขัดเจนและเข้าถึงง่าย 2. สามารถเข้าใจง่ายหรือมีข้อความกำกับชัดเจน 3. มีความสม่ำเสมอและเป็นระบบ 4. มีการตอบสนองเมื่อใช้งาน 5. มีจำนวนร้ายการพอเหมาะ ไม่มากเกินไป 6. มีหลากหลายทางเลือกให้ใช้ 7. มีส่วนเชื่อมโยงให้คลิกกลับไปยังหน้าโอมเพจได้เสมอ 2.4.3 แนวคิดการออกแบบเว็บไซต์ การออกแบบเว็บไซต์เป็นการวางแผนจัดลำดับเนื้อหาของเว็บไซต์ออกเป็นหมวดหมู่ เพื่อจัดทำโครงสร้างในการจัด วางหน้าเว็บเพจทั้งหมด ซึ่งการออกแบบเว็บไซต์ทั่วไปมีแนวคิดและหลักการที่ควรพิจารณ ดังนี้ 1. โครงสร้างที่ชัดเจน ควรจัดโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนที่ สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกันจะช่วยให้น่าใช้งานและง่ายต่อการอ่านเนื้อหาของผู้ใช้
12 การสร้างเว็บไซต์ 12 2. ความเรียบง่าย เป็นการจำกัดองค์ประกอบเสริมให้เหลือเพาะองค์ประกอบหลัก โดยเลือกเสนอสิ่งที่เรา ต้องการนำเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้า หากมีมากเกินไปจะรบกวนสายตาและ สร้างความรำคาญต่อผู้ใช้ได้ นอกจากนั้นควรจะใช้งานง่ายทำให้ผู้ใช้รู้สึก สบายใจต่อการอ่านและสามารถทำความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ต้องมาเสียเวลาอยู่กับการทำความ เข้าใจ 3. ความสม่ำเสมอ เป็นการสร้างความสม่ำเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบ เดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไปอาจทำให้ ผู้ใช้เกิดความสับสนและไม่แน่ใจว่ากำลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะณะนั้นการออกแบบเว็บไซต์ในแต่ละหน้า ควรที่จะมีรูปแบบ กราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอด 4. ความเป็นเอกลักษณ์ ในการออกแบบเว็บไซต์ต้องคำนึงถึงเอกลักษณ์และลักษณะขององค์กรการ เลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก 5. เนื้อหา เป็นสิ่งสำคัญที่สุดในเว็บไซต์เนื้อหาในเว็บไซต์ต้องสมบูรณ์และปรับปรุงพัฒนาให้ทันสมัยอยู่ เสมอ และไม่ไปช้ำกับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ 6. ระบบเนวิเกชั่นที่ดี การออกแบบเนวิเกชั่นควรให้เข้าใจง่าย ใช้งานได้สะดวก ใช้กราฟิกที่สื่อความหมาย ตำแหน่งของการวางเนวิเกชั่นให้สม่ำเสมอ 7. การเชื่อมโยงที่ดี อยู่ในรูปแบบที่เป็นมาตรฐาน ใช้คำสำหรับการเชื่อมโยงที่เข้าใจง่าย ชัดเจนและไม่สั้น จนเกินไป นอกจากนี้ในแต่ละเว็บเพจที่สร้างขึ้นมาควรมีจุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กำลังใช้งาน อยู่ด้วย 8. ความเหมาะสมในหน้าเว็บเพจ เนื้อหาที่นำเสนอในแต่ละหน้าเว็บเพจควรสั้น กระชับและทันสมัย หลีกเลี่ยงการใช้หน้าเว็บเพจที่มีลักษณะการเลื่อนขึ้นลง แต่ถ้าจำเป็นต้องมีควรจะให้ข้อมูลที่มีความสำคัญอยู่ บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิกด้านบนของหน้าจอถึงแม้จะดูสวยงามแต่จะทำให้ผู้ใช้ เสียเวลาในการได้รับข้อมูลที่ต้องการ นอกจากนี้การใช้รูปภาพเพื่อเป็นพื้นหลังไม่ควรเน้นสีสันที่ฉูดฉาดมากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง 9. ความรวดเร็ว ความรวดเร็วเป็นสิ่งสำคัญประการหนึ่ง ผู้ใช้จะเกิดอาการเบื่อหน่ายและหมดความสนใจ กับเว็บไซต์ที่ใช้เวลาในการแสดงผลนาน อันเนื่องมาจากการใช้ภาพกราฟิกหรือภาพเคลื่อนไหวจึงควรหลีกเลี่ยงการ ใช้ภาพขนาตใหญ่หรือภาพเคลื่อนไหวที่ไม่จำเป็น
13 การสร้างเว็บไซต์ 13 10. ความคงที่ของการทำงาน ระบบกรทำงานในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการ ออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ เช่น ส่วนเชื่อมโยงในเว็บไซต์ต้องใช้งานได้ตลอดเวลาปัญหาลิงค์ขาดซี่ง พบได้บ่อยเป็นปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่างมาก รูปที่ 2.16 ตัวอย่างเว็บไซต์ที่มีโครงสร้างชัดเจนและเรียบง่าย
14 การสร้างเว็บไซต์ 14 2.4.4 การจัดการไฟล์และโฟลเดอร์ของเว็บไซต์ ไฟล์(File) เป็นการเก็บข้อมูลและเนื้อหาต่าง ๆ แล้วบันทึกเก็บไว้ในชื่อ ๆ หนึ่ง ตามลักษณะของข้อมูลนั้น เช่นไฟล์Text Document เป็นการจัดเก็บข้อมูลประเภทตัวอักษร ไฟล์Application เป็นการจัดเก็บข้อมูล โปรแกรม หรือไฟล์HTML เป็นการจัดเก็บข้อมูลประเภท Hypertext โฟลเดอร์ (Folder) เป็นลักษณะของแฟ้มเก็บเอกสารหรือการเก็บไฟล์ต่าง ๆ รวมกันไว้เพื่อไม่ให้ไฟล์ต่าง ๆ ไม่กระจัดกระจาย หรือเพื่อใช้จัดเก็บไฟล์ต่าง ๆ ให้เป็นหมวดหมู่และสะดวกในการจัดการนอกจากนี้ภายใน โฟลเดอร์ยังสามารถสร้างโฟลเดอร์ย่อยลงไปอีกหลายชั้นเพื่อให้สามารถแยกสัดส่วนการเก็บให้เป็นระเบียบได้มาก ขึ้น การตั้งชื่อไฟล์หรือโฟลเดอร์ในการสร้างเว็บไซต์ควรใช้อักษรภาษาอังกฤษ หรือผสมกับตัวเลข0-9 หรือ สัญลักษณ์ขีดลบและขีดล่างเพื่อป้องกันปัญหาที่อาจจะเกิดขึ้นในการอ้างอิงตำแหน่งไฟล์หรือการเชื่อมโยงไฟล์ การจัดการไฟล์และโฟลเดอร์จะมีหลักการทั่วไปคือ เราจะสร้างโฟลเดอร์เพื่อใช้สำหรับเก็บไฟล์เว็บเพจแต่ ละชุดแต่ละเรื่อง และสามารถสร้างโฟลเดอร์ย่อยเพื่อใช้เก็บไฟล์ให้เป็นหมวดหมู่ เช่น การเก็บไฟล์รูปภาพไว้ใน โฟลเดอร์ เmages และควรตั้งชื่อโฟลเดอร์นั้น ๆ ให้สามารถสื่อความหมายได้ตรงกับวัตถุประสงค์ของการจัดเก็บ เพื่อป้องกันความสับสน จากนั้นจัดหาไฟล์รูปภาพที่เกี่ยวข้องกับเนื้อหาด้วยโปรแกรมจัดการภาพต่าง ๆ เช่น โปรแกรม Adobe Photoshop โปรแกรม Paint หรือคัดลอกจากไฟล์ Clipart for wed ใน CD-ROM ไว้ใน โฟลเดอร์ ส่วนการสร้างเอกสารเว็บเพจที่เขียนด้วยภาษา HTML หรือสร้างด้วยโปรแกรมสำเร็จรูปควรบันทึกลงใน โฟลเดอร์หลัก ดังแสดงในตัวอย่างการจัดเก็บไฟล์และโฟลเดอร์ของเว็บไซต์ รูปที่ 2.17 ลักษณะการจัดเก็บไฟล์และไฟล์เดอร์ในเว็บไซต์
15 การสร้างเว็บไซต์ 15 จากตัวอย่างการจัดก็บไฟล์และโฟลเดอร์ของเว็บไซต์จะเห็นว่าไฟล์Index.html ที่เป็นไฟล์Home Page จะถูกจัดเก็บไว้ในโฟลเดอร์หลักและไม่ควรจัดเก็บไว้ที่อื่น ซึ่งจะทำให้ไม่สามารถแสดงหน้าแรกของเว็บไซต์นั้น ๆ ได้ ส่วนโฟลเดอร์ต่าง ๆ ควรใช้จัดเก็บไฟล์ตามหมวดหมู่เพื่อความสะดวกในการจัดการทั้งการค้นหาและการอ้างถึง ในหน้าเว็บเพจ 2.5 ขั้นตอนการสร้างเว็บไซต์ หลักในการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ ได้ดังนี้ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์ ก่อนจะลงมือสร้างเว็บไซต์ เราต้องกำหนดชื่อเรื่อง เนื้อหาและรายละเอียดของเว็บเพจที่จะจัดทำเพื่อให้เห็นโครง ร่าง แบ่งเนื้อหาเป็นหมวดหมู่ต่าง ๆ ตามลำดับก่อนหลังเพื่อให้ง่ายต่อการจัดทำโครงร่างเว็บไซต์และให้ทราบถึง องค์ประกอบทั้งหมดของเว็บไซต์ หน้าแรกของเว็บไซต์(Home Page) จะต้องชื่อ index การตั้งชื่อเว็บเพจแต่ละ หน้าให้กำหนดชื่อเป็นภาษาอังกฤษตามด้วยนามสกุลของภาษาที่เราสร้างเว็บไซต์ เช่น index.html, teacher.html, activities.htm เป็นต้น โดยเก็บไว้ในโฟลเดอร์ ขั้นตอนที่ 2 กำหนดการเชื่อมโยงเว็บเพจ เป็นการกำหนดความสัมพันธ์ของการเชื่อมโยงในแต่ละหน้าเว็บ เพื่อให้สามารถกลับไปกลับมาระหว่างหน้าต่างๆ ได้ โดยแต่ละไฟล์จะมีความสัมพันธ์กัน รูปที่ 2.18 การกำหนดโครงสร้างของเว็บ
16 การสร้างเว็บไซต์ 16 ขั้นตอนที่3 ออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์ สามารถออกแบบให้สวยงามได้ โดยเฉพาะในหน้า โฮมเพจควรออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้เข้าชม ขั้นตอนนี้เรียกว่า การออกแบบเลย์เอาท์ซึ่ง สามารถเขียนลงในกระดาษ หรือใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบ รูปที่ 2.19 การออกแบบเว็บเพจ ขั้นตอนที่ 4 สร้างเว็บเพจด้วยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละเว็บเพจแสดงข้อความรูปภาพ วิดีโอ และเสียง ในรูปแบบที่ต้องการ ขั้นตอนที่5 ลงทะเบียนขอพื้นที่เว็บไซต์เมื่อออกแบบและสร้างเว็บไซต์เสร็จแล้วเป็นการเผยแพร่เว็บไซต์ สู่โลกของอินเทอร์เเน็ตให้คนอื่นเข้ามาเยี่ยมชม โดยการนำเว็บไซไปฝากกับผู้ให้บริการพื้นที่เว็บไซต์ สามารถเลือก ได้ทั้งทั้งแบบเสียค่าใช้จ่ายหรือแบบพื้นที่เว็บไซต์ฟรี ขั้นตอนที่ 6 อัพโหลดเว็บไซต์หลังจากสมัครขอบริการพื้นที่ฝากเว็บไซต์แล้ว จะต้องอัพโหลดไฟล์เว็บเพจ ไปยังพื้นที่ผู้ให้บริการซึ่งอาจจะอัพโหลดผ่านเว็บบราวเซอร์หรืออัพโหลดด้วยโปรแกรม เช่น CuteFTP,Filezilla,WS_FTP เป็นต้น
17 การสร้างเว็บไซต์ 17 สรุปสาระสำคัญ การออกแบบเว็บไซต์จึงเป็นการวางแผนการแสดงผลและการจัดวางข้อมูลต่าง ๆ ของเว็บไซต์ให้ความ เหมาะสม มีประสิทธิภาพในการแสดงเนื้อหาแก่ผู้เยี่ยมชมได้อย่างชัดเจน เข้าใจง่าย และเกิดความน่าสนใจให้มาก ที่สุด 1. ประเภทของเว็บไซต์ (1) Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML และบันทึกเป็นไฟล์นามสกุล .htmหรือ .html ประกอบด้วยข้อความ รูปภาพ และไฟล์มัลติมีเดียต่าง ๆ เมื่อมีผู้เรียกดูเว็บเพจ Web Server ก็จะส่งไฟล์ นั้นไปให้ยังเครื่องที่ร้องขอ และแสดงผลออกทางโปรแกรมเว็บเบราว์เชอร์บนเครื่องของผู้ชมนั้น (2) Dynamic Website เป็นเว็บไซต์ที่เว็บเพจสามารถเปลี่ยนแปลงข้อมูลได้ โดยไม่ต้องเขียนแต่ละเว็บ เพจเอง เช่น กระคานข่าวหรือ Web Board ระบบสืบคันข้อมูลเว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นต้น 2. การกำหนดขนาดของหน้าเว็บเพจ การกำหนดขนาดของหน้าเว็บเพจที่นิยมในปัจจุบันมี 2 ขนาด คือ (1) ขนาดเว็บไซต์แบบ 800 x 600 pixel เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดในปัจจุบันเป็น ขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากจอภาพมีขนาดเล็ก (2) ขนาดเว็บไซต์แบบ 1024 x 768 pixel เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้ จอคอมพิวเตอร์ขนาดใหญ่ขึ้น นอกจากนั้นเรายังสามารถใช้ตารางช่วยในการออกแบบหน้าเว็บเพจ โดยกำหนดขนาดตารางกว้าง ประมาณ 800-1024 pixel แล้วกำหนด Align เป็น Center เพื่อจัดให้เนื้อหาอยู่กึ่งกลางตลอด การทำเช่นนี่จะทำ ให้สามารถแก้ปัญหาเรื่องขนาดหน้าจอที่ผู้ใช้แตกต่างกัน ทำให้เว็บไซต์ของเราสามารถแสดงได้กับทุกชนาดจอภาพ ดังที่เห็นในเว็บไซต์ต่าง ๆ ในปัจจุบัน 3. โครงสร้างเว็บไซต์ (1) โครงสร้างเว็บไซต์แบบเรียงลำดับ (Sequential Structure) (2) โครงสร้างเว็บไซต์แบบลำดับขั้น (Hierarchical Structure) (3) โครงสร้างเว็บไซต์แบบตาราง (Grid Structure) (4) โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure)
18 การสร้างเว็บไซต์ 18 4. การออกแบบหน้าเว็บเพจ (1) ส่วนประกอบของหน้าเว็บเพจ (ก) ส่วนหัวของหน้าเว็บเพจ (Header) ประกอบตัวย โลโก้ (Logo) ชื่อเว็บไซต์ และเมนูหลักหรือ ลิงค์ (Navigation Bar) (ข) ส่วนเนื้อหา (Contents) (ค) ส่วนเมนู (Navigator) (ง) ส่วนท้ายของหน้าเว็บเพจ (Footer) (จ) ช่องว่าง (Space) (2) การออกแบบระบบเนวิเกชั่น หรือระบบการเชื่อมโยงเว็บ (Navigation Design) (ก) ระบบเนวิเกชั่นแบบลำตับชั้น(Hierarchical) (ข) ระบบเนวิเกชั่นแบบโกลบอล (Global) (ค) ระบบเนวิเกชั่นแบบโลคอล (Local) (ง) ระบบเนวิเกชั่นแบบเฉพาะที่ (Ad Hoc) (3) แนวคิดการออกแบบเว็บไซต์ (ก) โครงสร้างที่ชัดเจน (ข) ความเรียบง่าย (ค) ความสม่ำเสมอ (ง) ความเป็นเอกลักษณ์ (จ) เนื้อหา (ฉ) ระบบเนวิเกชั่นที่ดี (ช) การเชื่อมโยงที่ดี (ช) ความเหมาะสมในหน้าเว็บเพจ (ฌ) ความรวดเร็ว (ญ) ความคงที่ของการทำงาน 5. ขั้นตอนการสร้างเว็บไซต์ ขั้นตอนที่ 1 การกำหนดโครงสร้างของเว็บไซต์ ขั้นตอนที่ 2 การกำหนดการเชื่อมโยงเว็บเพจ ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์ ขั้นตอนที่ 4 การสร้างเว็บเพจ ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์ ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์