ใบความรู้ หน่วยการเรยี นรทู้ ่ี 1พื้นฐานการสร้างเว็บไซต์
ความรเู้ บือ้ งตน้ เก่ยี วกบั อินเตอรเ์ น็ต อินเตอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ท่ีใหญ่ที่สุดในโลกซ่ึงรวมเอาเครือข่ายย่อยเป็นจานวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทาให้ทั่วโลกเช่ือมโยงกนั เปน็ เครอื ขา่ ยเดียวกันไดใ้ นแพลตฟอรม์ ของ เวลิ ด์ ไวด์ เว็บ (World Wide Web)ลกั ษณะของเวลิ ์ด ไวด์ เวบ็ (World Wide Web) เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่า เว็บ (web) เป็นอินเตอร์เน็ตชนิหน่ึง ท่ีอยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซ่ึงประกอบด้วยข้อความ (Text) ภาพ (Graphic) เสีย(Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้นผู้ใช้ท่ัวไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนท่ัวไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหน่ึงของอนิ เตอรเ์ น็ตเท่า นนั้เวบ็ ไซต์ (Website) และเว็บเพจ (Webpage) เอกสารหรือส่วนทต่ี ิดต่อกับผู้ใช้ในเวบ็ เรียกวา่ เว็บเพจ (Webpage) หมายถึงเอกสารหน่ึงหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้าน่ันเอง เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์ เช่นHTML, ASP, PHP, JAVA ฯลฯ เมื่อนาเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือ ยูอาร์แอล (UniformResource Locator – URL) ให้กบั เวบ็ เพจกลมุ่ นน้ั จะเรียกวา่ เว็บไซต์ (Web Site) เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่งเป็นหน้าท่ี สาคญั ที่สุดและเป็นหนา้ ที่จะเช่ือมโยงไปยงั เว็บเพจและเว็บไซต์อ่ืน ๆเว็บเบราเซอร์ (Web Browser) เเวบ็ เบราเซอร์ (Web Browser) คอื โปรแกรมทีใ่ ชส้ าหรบั เปดิ เว็บเพจหรือ รับสง่ ขอ้ มลู ตามที่เครื่องลกู ขา่ ยร้องขอเมื่อเราเปิดเข้าสอู่ นิ เตอรเ์ นต็ เวบ็ เบราเซอรท์ ี่ไดร้ บั ความนิยมปัจจุบนั มีหลายโปรแกรมเชน่ Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome
สรปุ เว็บเพจ เว็บไซต์ และโฮมเพจ
ภาษา HTML ภาษา HTML ยอ่ มาจากคาวา่ Hypertext Markup Language เปน็ ภาษาท่ใี ชส้ าหรับสร้างเวบ็ เพจโดยจะได้รบั การแปลหรือการแสดงผลโดยเว็บ เบราเซอรซ์ ง่ึ สามารถแสดงได้ทง้ั ขอ้ ความ ภาพ และเสียง โครงสร้างหลกั ของภาษา HTMLในไฟลเ์ อกสาร HTML ประกอบด้วย สองสว่ นใหญๆ่ คือ สว่ นหวั HEAD และ ส่วนตัว BODY 1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัดสุดท้าย ในไฟล์ HTML เสมอ เป็นTag ทีบ่ อกให้รู้ว่า ข้อความ หรอื Tag ท่ีอย่รู ะหวา่ ง 2 Tag น้ี เป็นแบบ HTML 2) Tag <HEAD> และ </HEAD> ส่วนนีจ้ ะไว้ใส่ รายละเอียดตา่ ง ๆ เชน่Tag<TITLE>TodayLoad.com</TITLE> ไวใ้ สข่ อ้ ความท่ีต้องการใหป้ รากฎอยบู่ น ไตเต้ลิ บาร์ เป็นตน้ 3) <BODY ....... > ข้อความท่ปี รากฎอยตู่ รงช่วงจุดไข่ปลา 4) Tag <BODY> และ </BODY> ข้อความ หรอื Tag ท่อี ยรู่ ะหวา่ ง 2 Tag นี้ เปน็ สว่ นของเนื้อหาโดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป คือ ช่ือเรียกเว็บไซต์น่ันเอง การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลกอินเตอร์เน็ต โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ากับคนอ่ืน และควรต้ังให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์ หรือเกี่ยวข้องกับสินค้าและบริการตลอดจนใชค้ าง่าย ๆ ให้จาได้ เชน่ sanook.com และ yahoo.com เปน็ ตน้
ความหมายของซบั โดเมน
หลกั การออกแบบเว็บไซต์ หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เร่ิมต้นใช้เป็นแนวทาง ในการสรา้ งและพฒั นาเว็บไซต์ - การวางแผนการวางแผนนับว่ามีความสาคัญมากในการสร้างเว็บไซต์ เพื่อให้การทางานในข้ันตอนต่าง ๆ มีแนว ทางท่ีชดั เจนและสามารถปฏิบัตไิ ดต้ ามท่ีตงั้ เป้าไว้ ซง่ึ ประกอบดว้ ย - การกาหนดเน้อื หาและจุดประสงคข์ องเว็บไซต์การกาหนดเนื้อหาและจุดประสงค์ของเวบ็ ไซต์ที่จะสร้าง นับเป็นสิ่งสาคัญอยา่ งมากในการเริ่มตน้ สร้างเว็บไซต์เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนาเสนอข้อมูลแบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เม่ือสามารถกาหนดจุดประสงค์ของเว็บไซต์ได้แล้ว เง่ือนไขเหล่าน้ีจะเป็นตัวกาหนดโครง สรา้ งรูปแบบรวมถงึ หน้าตา และสีเว็บไซตข์ องเราด้วย - การกาหนดกล่มุ เปา้ หมายเพื่อใหก้ ารสร้างและออกแบบเว็บไวต์ไดร้ ับความนิยม การกาหนดกลุ่มเป้าหมายในการเข้าชมเว็บไซต์ก็นับว่ามีส่วนสาคัญไม่น้อย เช่น เว็บไซต์สาหรับเยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สาหรับบคุ คลทว่ั ไปทีเ่ ขา้ ไปใช้บรกิ ารต่าง ๆ เปน็ ตน้ - การเตรยี มข้อมูลเนื้อหาหรือข้อมูลจัดว่าเป็นส่ิงที่เชิญชวนให้ผู้อ่ืนเข้ามาเย่ียมชมเว็บไซต์ และต้องทราบว่าข้อมูลข่าวสารต่าง ๆสามารถนามาจากแหล่งใดบา้ ง เช่น การคิดนาเสนอขอ้ มลู ด้วยตวั เอง หรอื นาขอ้ มูลที่นา่ สนใจมาจากสือ่ อนื่ เช่นหนังสือพิมพ์ แมกกาซนี เว็บไซต์ และทส่ี าคัญ ขออนุญาตเจา้ ของบทความก่อนเพ่ือป้องกันเรื่องลิขสิทธิ์ดว้ ย - การเตรยี มสิ่งต่าง ๆ ท่จี าเป็นในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสาหรัสร้าง เว็บไซต์ ภาพเคลื่อนไหวมลั ตมิ เี ดีย การจดโดเมนเนม การหาผใู้ ห้บรกิ ารรับฝากเวบ็ ไซต์ (Web Hosting) เป็นตน้ - การจัดโครงสร้างข้อมลูเมื่อได้ข้อมูลต่าง ๆ เช่น กาหนดเน้ือหาและจุดประสงค์ของเว็บไซต์ การกาหนดกลุ่มเป้าหมาย การเตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จาเป็นจากข้ันแรกเรียบร้อยแล้ว ในข้ันตอนน้ี เราจะจัดระบบเพ่ือใช้เป็นกรอบสาหรับการออกแบบและดาเนนิ การในขัน้ ตอนตอ่ ไป ซง่ึ มรี ายละเอยี ด ดังน้ี • โครงสรา้ งและสารบัญของเว็บไซต์ • การใช้ระบบนาผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนาทาง (Navigation) • องคป์ ระกอบทีต่ อ้ งนามาใช้ เช่น สอ่ื มัลติมเี ดีย ภาพกราฟิก แบบฟอร์มตา่ ง ๆ • การกาหนดรปู แบบและลักษณะของเวบ็ เพจ • การกาหนดฐานขอ้ มลู ภาษาสคริปตห์ รือแอปพลเิ คชนั ท่ีนามาใชใ้ นเว็บไซต์ • การบริการเสรมิ ตา่ ง ๆ • การออกแบบเว็บไซต์
นับเป็นข้ันตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดยโปรแกรมท่เี หมาะสมในการออกแบบคอื Photoshop หรือ Fireworks ซ่ึงจะชว่ ยในการสร้างเคา้ โครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ช่ือเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคล่ือนไหว แบนเนอร์โฆษณาเปน็ ต้น ในการออกแบบเว็บไซต์นั้นยังต้องคานึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ท่ีไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้นกรอบเพื่อความสวยงามและดึงดูดผู้เยี่ยมชมดว้ ย
สว่ นประกอบของหนา้ เวบ็ เพจเราสามารถจาแนกส่วนประกอบของหนา้ เว็บเพจ เปน็ 3 สว่ น ดังนี้ 1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เปน็ ส่วนท่ีแสดงชื่อ เว็บไซต์ โลโก้แบนเนอร์โฆษณาลงิ กส์ าหรับข้ามไปยังหน้าเวบ็ อื่น 2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเปน็ สว่ นทีแ่ สดงเนื้อหาภายในหนา้ เว็บเพจนัน้ โดยประกอบด้วยข้อความ ข้อมลู ภาพเคลอ่ื นไหว เปน็ ต้น
3. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสดุ ของหน้าเว็บเพจ ส่วนมากใช้สาหรบั ลิงก์ขอ้ ความส้นั ๆ เขา้ ใจงา่ ย หรอื จะมชี ่อื เจา้ ของเวบ็ ไซต์ อเี มลแอดเดรสของผดู้ ูแลเว็บไซตส์ าหรับตดิ ต่อกบั ทางเวบ็ ไซต์ สรุปสว่ นประกอบของหนา้ เว็บเพจ
แนวคดิ ในการออกแบบ - ดูจากเว็บไซต์อื่นเพ่ือเป็นตัวอย่าง การดูจากเว็บไซต์อ่ืนบนอินเตอร์เน็ตเพ่ือศึกษาเป็นตัวอย่างน้ันนับเป็นวิธกี ารทงี่ ่ายที่สดุ แตก่ ค็ วรนาไปประยกุ ต์ใช้ใหเ้ หมาะสมกบั เน้ือหาและกลุ่มเป้าหมายของเราด้วย - ศึกษาจากสื่อส่ิงพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในท่ีน้ี ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์หรอื หนังสอื บางเลม่ ท่ีมรี ูปแบบและจดุ ดงึ ดดู ความสนใจ สามารถนามาประยกุ ต์ใช้ในเว็บไซตข์ องเราไดเ้ ช่นกัน
Search
Read the Text Version
- 1 - 10
Pages:
