การพัฒนาเว็บ เพจ ( Web Page)

การพัฒนาเว็บเพจ(Web Page) วิชา การสร้างเว็บด้วยโปรแกรม Text Editor รหัสวิชา ง20205 ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์

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

เว็บไซต์ (Website) คือ ชุดของข้อมูลที่ต้องนำเสนอบนระบบอินเตอร์เน็ต ประกอบด้วย เว็บเพจ (Web Page) ตั้งแต่ 1 หน้า ขึ้นไป เว็บเพจ (Webpage)คือ ไฟล์ HTML 1 ไฟล์ที่แสดงผลบนบราวเซอร์นั่นเอง โฮมเพจ(Homepage)คือ เว็บเพจหน้าแรกของเว็บไซต์ หรือเปรียบหน้าเหมือหน้าปกหนังสือ คำที่ควรรู้จักก่อนสร้างเว็บไซต์

ตัวอย่าง Homepage Website Webpage

URL (Universal Resource Location)คือ มาตรฐานในการกำหนดที่อยู่ของเว็บไซต์ในเครือข่ายอินเทอร์เน็ต หรือเรียกอีกอย่างว่าที่อยู่ของเว็บไซต์ (Internet Address) เช่นhttp://www.hi.ac.th บราวเซอร์ (Browser)คือ โปรแกรมแสดงเว็บเพจหรือหน้าเว็บไซต์ที่ถูกสร้างขึ้นมาจากภาษา HTML เช่น Internet Explorer, Mozilla Firefox, Opera, Netscape คำที่ควรรู้จักก่อนสร้างเว็บไซต์

HTML(Hyper Text Markup Language)คือ ภาษามาตฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนำไปแสดงบนบราวเซอร์ FTP (File TransferProtocol)คือ โปรโตคอลหรือมาตรฐานรูปแบบหนึ่งที่ใช้ในการรับ-ส่งข้อมูลระหว่างเครื่องคอมพิวเตอร์ผ่านเครือข่ายอินเทอร์เน็ต คำที่ควรรู้จักก่อนสร้างเว็บไซต์ (ต่อ)

เว็บเซิร์ฟเวอร์ (Web server)คือ เครื่องคอมพิวเตอร์เครื่องหนึ่งในเครือข่ายอินเทอร์เน็ตที่ทำหน้าที่เก็บรวบรวมเว็บไซต์ต่าง ๆ เอาไว้ เพื่อให้ผู้ชมสามารถเข้ามาเปิดดูเว็บไซต์นั้นได้ ชื่อโดเมน (Domain name)คือ ชื่อที่ใช้อ้างถึงเว็บไซต์แทน IP Address เพื่อให้จดจำได้ง่าย โดยรูปแบบคือ ชื่อ.รหัสโดเมน คำที่ควรรู้จักก่อนสร้างเว็บไซต์ (ต่อ)

รหัสโดเมน com edu gov ใช้สำหรับ กลุ่มการค้าและเว็บไซต์ทั่วไป สถาบันการศึกษา หน่วยงานของรัฐที่ไม่ใช่หน่วยงานทางการทหาร หน่วงงานทางการทหาร หน่วยงานเกี่ยวกับเครือข่าย หน่วยงานที่ไม่หวังผลกำไร บริษัทที่จดทะเบียนในประเทศไทย รู้จักรหัสโดเมน ตัวอย่าง Pantip.com Ucla.edu Nasa.gov Army.mil Isp.net Unesco.org Infopress.co.th mil net org co.th

โปรแกรมสร้างเว็บเพจ • เดิมการพัฒนาเว็บเพจจะใช้โปรแกรมประเภท Text Editor โดยผู้พัฒนาจะต้องศึกษาภาษา HTML(HyperText Markup Language) ซึ่งสร้างภาระให้แก่ผู้สนใจในกลุ่มที่ไม่ได้ศึกษาด้านไอทีมาโดยตรง • ดังนั้น นักโปรแกรมเมอร์ จึงพัฒนา เครื่องมือพัฒนาเว็บเพจ มาเผยแพร่ให้กับผู้สนใจเพื่อเลือกใช้งาน

เครื่องมือพัฒนาเว็บเพจเครื่องมือพัฒนาเว็บเพจ • การพัฒนาเว็บเพจด้วยการลงรหัส HTML ด้วยโปรแกรม Simple Text Editors • การพัฒนาเว็บเพจด้วยคำสั่ง Save as HTML… • การพัฒนาเว็บเพจด้วย Browser-Based HTML Editor • การพัฒนาเว็บเพจด้วยคำสั่ง Web Server/Developer Platforms • WYSIWYG HTML(What You See Is What You Get)

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

หลักการออกแบบเว็บเพจ (ต่อ) สามารถแบ่งได้ 3 ลักษณะ • 1. แบบลำดับขั้น (Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลำดับกิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว

หลักการออกแบบเว็บเพจ (ต่อ) 2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว

หลักการออกแบบเว็บเพจ (ต่อ) • 3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้นและแบบเชิงเส้น

แนวคิดในการออกแบบ • เรียนรู้จากเว็บไซต์ต่างๆ • ประยุกต์รูปแบบจากสิ่งพิมพ์ • ใช้แบบจำลองเปรียบเทียบ • ออกแบบอย่างสร้างสรรค์

หลักในการออกแบบเว็บไซต์หลักในการออกแบบเว็บไซต์ • สร้างลำดับชั้นความสำคัญขององค์ประกอบ • สร้างรูปแบบ บุคลิก และสไตล์ • สร้างความสม่ำเสมอตลอดทั้งไซต์ • จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ • สร้างจุดสนใจด้วยความแตกต่าง • จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย • ใช้กราฟิกอย่างเหมาะสม

สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดีสิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี • 1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่อยู่บนจอภาพให้เห็นชัดเจน เช่นการใช้ตัวหนังสือ เส้น สี ขนาด ฯลฯ เพราะจะสามารถดึงดูดความสนใจได้ดี • 2.การย้ำซ้ำ (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมีลักษณะรูปแบบ สอดคล้องกันทั้งหมด

สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ)สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ) • 3.การจัดแถว การวางแนว (Alignment) คือ การจัดวางองค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ ไร้เหตุผล ไม่ขัดกับความรู้สึก ของผู้อ่าน จัดให้ดูสะอาด • 4.ความใกล้เคียง ความเกี่ยวเนื่อง (Proximity) คือ การจัดวางองค์ประกอบที่เกี่ยวเนื่องกัน ให้เป็นกลุ่มก้อนเดียวกัน

องค์ประกอบของการออกแบบเว็บไซต์ • 1. ความเรียบง่าย • 2. ความสม่ำเสมอ • 3. ความเป็นเอกลักษณ์ • 4. เนื้อหาที่มีประโยชน์ • 5. ระบบเนวิเกชันที่ใช้งานง่าย • 6.ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ

องค์ประกอบของการออกแบบเว็บไซต์ (ต่อ) • 7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด • 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ • 9.ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง

กระบวนการสร้างและออกแบบเว็บเพจกระบวนการสร้างและออกแบบเว็บเพจ 1. การวางแผน (Planning) ผู้สร้างเว็บจะต้องรวบรวมข้อมูลที่ต้องการจะนำมาสร้างเว็บ กำหนดวัตถุประสงค์และกลุ่มเป้าหมาย 2. การออกแบบ (Design) การลงมือปฏิบัติ จัดพิมพ์เนื้อหา และคุณลักษณะอื่นที่ต้องใช้ในเว็บ การออกแบบก็จะเน้นที่การจัดหน้าจอของเว็บให้สอดคล้องกัน 3. การพัฒนา (Development) เน้นไปที่การตกแต่งและเสริมเครื่องมือต่าง ๆ สำหรับเว็บ

กระบวนการสร้างและออกแบบเว็บเพจกระบวนการสร้างและออกแบบเว็บเพจ 4. การติดตั้ง (Publishing) การนำเว็บที่ได้สร้างขึ้นเข้าไปติดตั้งในเว็บเซอร์เวอร์เพื่อให้แสดงผลได้ในระบบอินเทอร์เน็ต หรือจะเรียกว่า การอับโหลด (Up load) 5. การบำรุงรักษา (Maintenance) เป็นขั้นตอนประเมินผลและติดตามผลการติดตั้งเว็บไซต์ว่ามีข้อขัดข้องหรือต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอับเดท (Up date)

การกำหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ • ควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 หรือผสมกัน • ตัวอักษร a - z ควรเป็นตัวพิมพ์เล็ก • ห้ามตั้งชื่อไฟล์เป็นภาษาไทย • ชื่อไฟล์แรกของเอกสารเว็บ มักจะใช้ชื่อ index หรือ default

ขั้นตอนการพัฒนาเว็บเพจขั้นตอนการพัฒนาเว็บเพจ • วางแผนการพัฒนาเว็บเพจ • กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ • สร้างภาพ หรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้

ขั้นตอนการพัฒนาเว็บเพจขั้นตอนการพัฒนาเว็บเพจ • วางแผนการพัฒนาเว็บเพจ • กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ • สร้างภาพ หรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้ • สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่าย (Web System Administrator) และจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้ • ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์ • ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย

หลักเกณฑ์ในการเลือกภาพ Graphic • ขนาดไฟล์ไม่ควรเกิน 80 กิโลไบต์ เพื่อความรวดเร็วในการแสดงผล • ใช้ไฟล์แบบ JPEG สำหรับรูปถ่าย หรือรูปที่มีสีเกิน 256 สี • ใช้ไฟล์แบบ GIF สำหรับภาพวาดหรือภาพการ์ตูนที่มีสีไม่เกิน 256 สี • เลือกภาพที่มีความน่าสนใจและดึงดูด เพื่อไม่ให้เสียเวลาที่เสียไปในการ Download • ภาพเปล่าประโยชน์

ไฟล์ภาพกราฟิกที่นำมาใช้ในการทำเว็บ • ไฟล์ฟอร์แมต JPG, JPEG • ไฟล์ฟอร์แมต GIF • ไฟล์ฟอร์แมต PNG

ไฟล์สกุล JPG (Joint Photographer’s Experts Group) • จุดเด่น • แสดงสีได้สูงสุด16.7 ล้านสี (สนับสนุนสีได้ถึง 24 bit) • สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ • มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive • มีโปรแกรมสนับสนุนการสร้างจำนวนมาก • เรียกดูได้กับ Graphics Browser ทุกตัว • ตั้งค่าการบีบไฟล์ได้ (compress files) • จุดด้อย • ทำให้พื้นของรูปโปร่งใสไม่ได้

ไฟล์สกุล GIF (Graphics Interlace File) • จุดเด่น • แสดงสีได้สูงสุด 256 สี • สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้ • มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว • สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent) • มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace • มีโปรแกรมสนับสนุนการสร้างจำนวนมาก • เรียกดูได้กับ Graphics Browser ทุกตัว • ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation) • จุดด้อย • ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น

ไฟล์สกุล PNG (Portable Network Graphics) • จุดเด่น • แสดงสีได้สูงสุด 16.7 ล้านสี • สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit) • สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ • มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace) • สามารถทำพื้นโปร่งใสได้ • จุดด้อย • หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่ำ • ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4 • ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card • โปรแกรมสนับสนุนในการสร้างมีน้อย

การออกแบบระบบเนวิเกชันการออกแบบระบบเนวิเกชัน • ระบบเนวิเกชันแบบลำดับขั้น (Hierarchical) • ระบบเนวิเกชันแบบโกลบอล (Global) • ระบบเนวิเกชันแบบโลคอล (Local) • ระบบเนวิเกชันเฉพาะที่ (Ad Hoc)

HTML (HyperTextMarkupLanguage) HTML เป็นภาษาที่ใช้ในการพัฒนาเว็บเพจ เพื่อให้โปรแกรมเว็บ บราวเซอร์ (web brower) ต่างๆ สามารถแปลงคำสั่ง แสดงผลในลักษณะของรูปภาพ ตัวอักษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกุล .html หรือ .htm ก็ได้

HTML (HyperTextMarkupLanguage) <html> <head> <title>Hello</title> </head> <body> สวัสดี </body> </html> <HTML> หมายถึง การระบุว่าเอกสารใช้ภาษา HTML และบรรทัดสุดท้ายจะต้องมี </HTML> <HEAD> เพื่อระบุชื่อเว็บเพจ โดยจะต้องใช้คำสั่ง <TITLE> เป็นตัวบอก และบรรทัดสุดท้ายจะต้องมี </TITLE> </HEAD> <body> เปิดส่วนเนื้อหา </body> next

Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ • Tag เดี่ยวเป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น , <HR> เป็นต้น • Tag เปิด/ปิดเป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น …, … เป็นต้น back

การพัฒนาเว็บ เพจ ( Web Page)