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

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

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

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

ตัวอย่าง Logo Website Homepage Webpage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Logo ไฟลภ์ าพกราฟกิ ท่ีนามาใชใ้ นการทาเว็บ ❖ไฟล์ฟอรแ์ มต JPG, JPEG ❖ไฟล์ฟอร์แมต GIF ❖ไฟล์ฟอร์แมต PNG www.themegallery.com

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

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

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

Logo การออกแบบระบบเนวิเกชนั ❖ระบบเนวิเกชันแบบลาดับข้ัน (Hierarchical) ❖ระบบเนวิเกชนั แบบโกลบอล (Global) ❖ระบบเนวิเกชันแบบโลคอล (Local) ❖ระบบเนวเิ กชันเฉพาะที่ (Ad Hoc) www.themegallery.com

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

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

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