ก า ร ส ร้ า ง เ ว็ บ เ บื อ ง ต้ น โดยโปรแกรม DREAMWEAVER Click วิ ธี ก า ร ส ร้ า ง เ ว็ บ ไ ซ ต์ แ ล ะ ก า ร อ อ ก แ บ บ เ ว็ บ ไ ซ ต์ ด้ ว ย โปรแกรมDREAMWEAVER
คํานํา รายงายเว็บไซต์นี จัดทําขึนเพือเปนสว่ นหนึงของวิชาคอมพิวเตอรเ์ พือให้ได้ศึกษาหาความ รู้ในเรืองการทําเว็บและได้ศึกษาอยา่ งเข้าใจเพือเปนประโยชน์กับการเรียนผู้จัดทําหวังว่า รายงานเว็บไซต์นีจะเปนประโยชน์กับผู้อ่านหรือนักเรียน นักศกึ ษา ทีกําลังหาข้อมลู เรอื งนี อยู่ หากมีข้อแนะนําหรือข้อผิดพลาดประการใด ผจู้ ัดทําขออภัยมา ณ ทีนีด้วย
ส า ร บั ญ หน้า 1 เรือง 4 ความรู้เบืองต้นเกียวกับเว็บไซต์ 8 การติดตังโปรแกรม Dreamweaver CS6 9 การเปดใช้งาน Dreamweaver CS6 14 สว่ นประกอบของโปรแกรม 16 หลักการออกแบบเว็บไซต์ 19 ขันตอนการสร้างเว็บไซต์ อ้างอิง
1 ความรูเ้ บอื งต้นเกยี วกับเว็บไซต์ อินเตอรเ์ น็ต (Internet) เปนเครือขา่ ยการติดต่อสือสารขนาดยักษ์ทีครอบคลุมไปทัวทุกประเทศทัวโลก โดยผู้ใช้ บริการจะใช้ เครืองคอมพิวเตอร์เปนเครืองเชือมต่อในการสือสาร แลกเปลียนข้อมูลกัน ทัง ข้อความ ภาพ เสียง และอืน ๆ ผา่ น ระบบเวิลด์ไวด์เว็บ (World Wide Web) ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web) วิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรยี กยอ่ ๆ ว่า เว็บ (web) คือพืนทีทีเก็บ ข้อมูล ขา่ วสารทีเชือมต่อกันทางอินเทอร์เน็ต โดยการก าหนด URL (ค าว่า เวิลด์ไวด์เว็บ มักจะใช้สับสนกับค าว่า อินเทอร์เน็ต โดยจริง ๆ แล้ว เวิลด์ไวด์เว็บเปนเพียงแค่บรกิ ารหนึง บนอินเทอร์เน็ตเท่านัน) มาตรฐานทใี ชใ้ นเว็บ มาตรฐานหลักทีใช้ในเว็บประกอบด้วย 3 มาตรฐานหลักดังต่อไปนี: • URL (Uniform Resource Locator) เปนระบบมาตรฐานทีใช้กําหนดตําแหนง่ ทีอยู่ (Address) ของ ไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต เชน่ URL ของคณะเทคโนโลยีสารสนเทศ คือ http://www.sit.kmutt.ac.th/ • HTTP (Hypertext Transfer Protocol) เปน โปรโตคอลสําหรับเปดดูข้อมูลจาก www เรียกใช้งาน ได้โดยระบุ http:// และตามด้วย URL ในชอ่ งกรอก Address ด้านบนของ โปรแกรมเว็บบราว์เซอร์ • HTML (Hypertext Markup Language) เปนภาษาทีออกแบบมาเพือใช้ในการสร้าง เว็บเพจ หรือ ข้อมูลอืนทีเรียกดูผา่ นทางเว็บบราวเซอรต์ ัวอยา่ ง โครงสร้างไฟล์ html <html> <head> <title>hello</title> </head> <body>hello <br>My name is... </body> </html>
2 เว็บบราวเซอร(์ Web Browser) เว็บบราวเซอร์(Web Browser) คือโปรแกรมทีใช้สําหรบั เปดเว็บเพจหรือ รับสง่ ข้อมูล ตามทีเครือง ลูกขา่ ยร้องขอเมือเราเปดเข้าสูอ่ ินเตอรเ์ น็ต เว็บบราวเซอร์ทีได้รบั ความนยิ ม ปจจุบันมีหลาย โปรแกรม เชน่ Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera เว็บเพจ (Web Page) และ เว็บไซต์ (Web site) เว็บเพจ (Webpage) คือหน้าของเว็บไซต์แต่ละหน้า ทีแสดงอักษร หรือรูปภาพ และจะ ดูได้จะต้องใช้ โปรแกรมทีเรียกว่า บราวเซอร์ (Browser) เว็บไซต์ (Web Site) ประกอบด้วยเว็บเพจหลาย ๆ เว็บเพจรวมเข้าด้วยกัน อาจจะมีการ จัด หมวดหมูเ่ พือให้เข้าถึงข้อมูลได้เปนระบบมากยิงขึน และส าหรับเว็บเพจทีเปนหน้าแรก ของเว็บไซต์เราจะ เรียกว่า โฮมเพจ (Homepage) โดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรือทีเข้าใจกันทัวไป คือ ชือเรียกเว็บไซต์นันเอง การจด ทะเบียน โดเมนเนมจึงเปนการลงทะเบียนชือให้กับเว็บไซต์ของเราในโลกอินเตอรเ์ น็ต โด เมนเนมทีขอจดทะเบียน จะต้องไมซ่ ากับคนอืน และควรตังใหเ้ กียวข้องกับเนือหาภายใน เว็บไซต์ หรือเกียวข้องกับสินค้าและบริการ ตลอดจนใช้ค าง่าย ๆ ให้จ าได้ เชน่ sanook.com และ yahoo.com เปนต้น
3 ความหมายของซบั โดเมน โดเมนทเี ปนชือยอ่ ของประเทศทนี ่าสนใจ โดเมนเนมเหล่านี จะใช้ต่อตอนท้ายสุด เพือสะดวกในการอ้างอิงว่าเปนโฮสต์หรือ เว็บไซต์ทีอยูใ่ น ประเทศใด เชน่ www.ksc.net.th จะเหน็ ว่า ลงท้ายด้วย TH จะเปนโดเมน ของประเทศไทย
4 การติดตังโปรแกรมDreamweaver CS6 1.เปดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 2. ดับเบิลคลิกทีไฟล์ Set-up.exe จากนันโปรแกรมอ้างมีการแจ้งเตือนให้เรา restart เรา เลือก Ignore เพือดําเนินการต่อ ดังรูป 3. โปรแกรมจะทําการตรวจสอบก่อนทําการติดตังโปรแกรม
5 4. เมือโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสูห่ น้าจอข้อกําหนดในการติดตังโปรแกรม ให้ เราคลิก Accept 5. กรอก Serial Number แล้วคลิกทีปุม Next
6 6. จะเข้าสูห่ น้า Option ของโปรแกรม ให้เลือก Installs 7. รอให้โปรแกรมติดตังจนเสร็จ
7 8. เมือติดตังเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close 9.ทําทุกขันแล้ว ก็เปนอันเสร็จ
8 การเปดใชง้ าน Dreamweaver CS6 เมือติดตังDreamweaver CS6 เสร็จเรียบร้อยแล้ว ก็สามารถเปดใช้โปรแกรม Dreamweaver CS6 โดยปฏิบัติตามขันตอนดังต่อไปนี 1. คลิกเมาส์ทีปุม Start แล้วจะเห็นโปรแกรม>>>แล้วกดคลิกเข้าโปรแปรมเลย 2.จากนันจะเข้าสูห่ น้าจอ Welcome Screen ดังรูป Welcome Screen เปนเครืองมือสําหรับชว่ ยเลือกขันตอนเรมิ ต้นในการใช้งานโปรแกรม โดยตัวเลือกจะแบง่ ออกเปนกลุ่มๆ ดังภาพ หมายเลขที 1 Open a Recent Item เปดไฟล์ทีเคยใช้ โดยคลิกเลือกจากรายชือทีแสดง อยู่ (เรียงลําดับจากทีเคยเปดหลังสุดเปนต้นไปหรือคลิก Open เพือเปดไฟล์อืนๆ) หมายเลขที 2 Create New สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเปนการสร้างเว็บเพจพืน ฐานแต่ถ้าคลิกหัวข้ออืนจะเปนการสร้างเว็บเพจหรือไฟล์ตามชนิดนันๆ หมายเลขที 3 Top Features (videos) เปนเส้นทางลัดสําหรับเข้าดูรายละเอียดและ เทคนิคในการใช้งานต่าง ๆ ของโปรแกรมผา่ นทางเว็บไซต์ของ Adobe หมายเลขที 4 เปดดูคําแนะนําการใช้โปรแกรม หมายเลขที 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe หมายเลขที 6 คลิกออปชันนีหากไมต่ ้องการแสดง Welcome Screen อีกในครังต่อไป
9 สว่ นประกอบของหน้าจอโปรแกรม โปรแกรม Dreamweaver ประกอบไปด้วยสว่ นต่าง ๆ ดังนี 1. แถบเมนูหลัก (Menu bar) เปนแถบรวมรวมคําสังทังหมดของโปรแกรม โดยแบง่ คําสัง ทังหมดออกเปนหมวดหมูต่ ามลักษณะของการใช้งาน 2. แถบเครอื งมือ (Insert Bar) เปนแหล่งรวมเครืองมือซึงใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้าเว็บเพจ เชน่ ข้อความ รูปภาพ ลิงค์ รูปเคลือนไหว เปนต้น โดยจะแบง่ เปนกล่มุ คําสัง เพือให้ใช้งานได้สะดวก ซึงจะประกอบด้วยกลุ่มคําสังดังนี • Common ใช้วางออบเจ็กต์ทีต้องใช้งานบอ่ ย ๆ เชน่ รูปภาพ ตาราง ไฟล์มัลติมีเดีย เปนต้น • Layout ใช้วางออบเจ็กต์ทีใช้จัดโครงสร้างของเว็บเพจ เชน่ ตาราง เฟรม และ AP element (หรือเลเยอร์) • Forms ใช้วางออบเจ็กต์ทีใช้ในการสร้างแบบฟอร์มรบั ข้อมูล เชน่ ชอ่ งรับข้อความ ปุมตัว เลือกต่าง ๆ เปนต้น • Data ใช้วางคําสังทีใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ • Spry ใช้วางออบเจ็กต์ทีใช้เทคโนโลยีของ Ajax • jQuery Mobile ใช้สร้างหน้าเพจทีแสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery • InContext Edting ใช้สร้างออบเจ็กต์ทีชว่ ยอํานวยความสะดวกให้ผู้ใช้งานสามารถแก้ไข เว็บเพจได้ • Text ใช้สําหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เชน่ หัวเรือง ตัวหน้า ตัวเอียง รวมทังแทรกสัญลักษณ์พิเศษต่าง ๆ เชน่ $ (Dollar) © (Copyright) เปนต้น • Favorites เปนกลุ่มทีสามารถเพิมปุมคําสังทีใช้บอ่ ยจากกลุ่มอืน ๆ เข้ามาเก็บไว้ใช้งานเอง เพือความสะดวกในการใช้งาน
10 3. แถบ Document Toolbar ประกอบไปด้วยปุมและ ปอปอัพเมนูทีใช้กําหนดรูปแบบมุมมองของ Document Window ทีเรากําลังทํางานอยูแ่ ละ คําสังต่างๆทีใช้ทํางานกับ Document Window อยา่ ง เชน่ การแสดงเว็บเพจทีสร้างขึนในเว็บบราวเซอร์หรือ การกําหนดออปชันของ Document Window เปนต้น
11 4. พืนทสี รา้ งงาน (Document Windows) คือ สว่ นทีใช้สาหรับใสเ่ นือหาและจัดองค์ ประกอบของเว็บเพจ วิธีใช้งานวินโดว์นีจะคล้ายกับทีคุณใช้โปรแกรมเวิร์ดโปรเซสเซอร์ ทัวไป เชน่ พิมพ์ข้อความ วางภาพกราฟก และสร้างตารางข้อมูลโดยเนือหาต่าง ๆ จะ แสดงออกมาคล้ายกับทีปรากฏบนบราวเซอร์ ซึงสามารถเลือกเปดพืนทีสรา้ งงานได้ด้วยกัน 4 มุมมอง มุมมองโค้ด (Code View) มุมมองโค้ดและออกแบบ (Code and Design View)
12 มุมมองออกแบบ (Design View) มุมมองแสดงหน้าเว็บเหมือนดูบนบราวเซอร์ (Live View)
13 5. Tag Selector อยูใ่ น Status Bar ทีอยูท่ างด้านล่างของ Document Window เมือ เราคลิกวัตถุในเอกสารจะปรากฏ Tag Select ใน Status Bar ขึนมา เมือเราคลิกเลือก Tag Selector แล้วแท็กต่างๆ ทีถูกล้อมด้วยแท็กทีเราเลือกจะถูกเลือกด้วย 6. หน้าต่าง Properties Inspector เปนหน้าต่างเล็ก ๆ ทีอยูด่ ้านล่างสุดของหน้าจอ โปรแกรม เปนสว่ นทีใช้งานมากทีสุด เนืองจากเปนสว่ นทีใช้กําหนดคุณสมบัติสําคัญ ๆ ขอ งออบเจ็กต์ทีวางในหน้าเว็บเพจ เชน่ ตําแหนง่ ขนาด และสี 7. กล่มุ พาเนลต่างๆ (Panel Groups) พาเนลเปนกรอบเล็ก ๆ ทีรวบรวมเครืองมือต่าง ๆ สําหรับใช้ทํางานเฉพาะเรอื งไว้ เชน่ พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้จัดการกับไฟล์และ โฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วยพาเนลจํานวนมาก ซงึ สามารถ เปด/ปดได้โดยเลือกคาสัง Window แล้วเลือกชือพาเนลนัน หรือกดคียล์ ัดทีแสดงด้านหลัง ชือพาเนลดังรูป
14 หลักการออกแบบเว็บไซต์ หลักการออกแบบเว็บไซต์สามารถแบง่ ออกเปนขันตอนต่าง ๆ เพือให้เหมาะสมกับผเู้ ริมต้นใช้ เปนแนวทาง ในการสร้างและพัฒนาเว็บไซต์ - การวางแผน การวางแผนนับว่ามีความสําคัญมากในการสร้างเว็บไซต์ เพือให้การทํางานในขันตอนต่าง ๆ มี แนวทางทีชัดเจนและสามารถปฏิบัติได้ตามทีตังเปาไว้ ซึงประกอบด้วย - การกําหนดเนือหาและจุดประสงค์ของเว็บไซต์ การกําหนดเนือหาและจุดประสงค์ของเว็บไซต์ทีจะสร้าง นับเปนสิงสําคัญอยา่ งมากในการเริมต้น สร้างเว็บไซต์เลยทีเดียว เพือให้เห็นภาพว่าเราต้องการน าเสนอข้อมูลแบบใด เชน่ เว็บไซต์เพือให้ ข้อมูลขา่ วสาร การบริการด้านต่าง ๆ หรือขายสินค้า เปนต้น เมือสามารถกําหนดจุดประสงค์ของ เว็บไซต์ได้แล้ว เงือนไขเหล่านีจะเปนตัวกําหนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ ของเราด้วย - การกําหนดกลุ่มเปาหมาย เพือให้การสร้างและออกแบบเว็บไวต์ได้รับความนิยม การกําหนดกลุ่มเปาหมายในการเขา้ ชม เว็บไซต์ก็นับว่ามีสว่ นสําคัญไมน่ ้อย เชน่ เว็บไซต์สําหรับเยาวชน นักเรยี น นักศึกษาในการค้นหา ข้อมูล หรือเว็บไซต์สําหรับบุคคลทัวไปทีเข้าไปใช้บริการต่าง ๆ เปนต้น - การเตรียมข้อมูล เนือหาหรือข้อมูลจัดว่าเปนสิงทีเชิญชวนให้ผู้อืนเข้ามาเยียมชมเว็บไซต์ และต้องทราบว่าขอ้ มลู ขา่ วสารต่าง ๆ สามารถนํามาจากแหล่งใดบ้าง เชน่ การคิดนําเสนอข้อมูลด้วยตัวเอง หรอื นําขอ้ มูล ทีนา่ สนใจมาจากสืออืน เชน่ หนังสือพิมพ์ แมกกาซนี เว็บไซต์ และทีสําคัญ ขออนุญาตเจ้าของ บทความก่อนเพือปองกันเรืองลิขสิทธิด้วย - การเตรียมสิงต่าง ๆ ทีจําเปน ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เชน่ โปรแกรมสําหรับสรา้ ง เว็บไซต์ ภาพ เคลือนไหว มัลติมีเดีย การจดโดเมนเนม การหาผใู้ ห้บรกิ ารรับฝากเว็บไซต์ (Web Hosting)เปนต้น - การจัดโครงสร้างข้อมูล เมือได้ข้อมูลต่าง ๆ เชน่ กําหนดเนือหาและจุดประสงค์ของเว็บไซต์ การกําหนดกลุ่มเปาหมาย การเตรียมข้อมูล การเตรียมสิงต่าง ๆ ทีจําเปนจากขันแรกเรียบร้อยแล้ว ในขันตอนนี เราจะจัด ระบบเพือใช้เปนกรอบสําหรับการออกแบบและดําเนินการในขันตอนต่อไป ซึงมีรายละเอียด ดังนี • โครงสร้างและสารบัญของเว็บไซต์ • การใช้ระบบนําผู้เข้าชมไปยังสว่ นต่าง ๆ ภายในเว็บไซต์หรอื ทีเราเรยี กว่าระบบนําทาง (Navigation) • องค์ประกอบทีต้องนํามาใช้ เชน่ สือมัลติมีเดีย ภาพกราฟก แบบฟอร์มต่าง ๆ • การกําหนดรูปแบบและลักษณะของเว็บเพจ • การกําหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันทีนํามาใช้ในเว็บไซต์ • การบริการเสริมต่าง ๆ • การออกแบบเว็บไซต์ นับเปนขันตอนในการออกแบบรูปรา่ ง โครงสร้างและลักษณะทางด้านกราฟกของหน้าเว็บเพจ โดย โปรแกรมทีเหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึงจะชว่ ยในการสร้าง เค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เชน่ ชือเว็บไซต์ โลโก้ รูปไอคอน ปุมไอคอน ภาพ เคลือนไหว แบนเนอร์โฆษณา เปนต้น
15 ในการออกแบบเว็บไซต์นันยังต้องคํานึงถึงสีสันและรูปแบบของสว่ นประกอบต่าง ๆ ที ไมใ่ ชภ่ าพกราฟก เชน่ ขนาดของตัวอักษร สีของข้อความ สีพืน ลวดลายของเส้นกรอบเพอื ความสวยงามและดึงดูด ผู้เยียมชมด้วย สว่ นประกอบของหน้าเว็บเพจ เราสามารถจําแนกสว่ นประกอบของหน้าเว็บเพจ เปน 3 สว่ น ดังนี 1. สว่ นหัว (Page Header) จะอยูบ่ ริเวณบนสุดของหน้าเว็บเพจ เปนสว่ นทีแสดงชือ เว็บไซต์ โลโก้ แบนเนอร์ โฆษณาลิงก์สําหรับข้ามไปยังหน้าเว็บอืน 2. สว่ นเนือหา (Page Body) อยูบ่ ริเวณตอนกลางของหน้าเว็บเพจ ซึงเปนสว่ นทีแสดง เนือหาภายในหน้าเว็บเพจนัน โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลือนไหว เปนต้น 3. สว่ นท้าย (Page Footer) อยูบ่ ริเวณด้านล่างสุดของหน้าเว็บเพจ สว่ นมากใช้สําหรับ ลิงก์ข้อความสันๆ เข้าใจง่าย หรือจะมีชือเจ้าของเว็บไซต์ อีเมลแอดเดรสของผูด้ ูแลเว็บไซต์ สําหรับติดต่อกับทางเว็บไซต์
16 ขนั ตอนการสรา้ งเว็บไซต์ ขนั ตอนที 1 การวางแผนการจัดทําเว็บไซต์ เปนขันตอนแรกของการออกแบบเว็บ เนืองจากเราต้องกําหนดชือเรือง เนือหา และ รายละเอียดของเว็บทีเราจะจัดทําเพือให้เหน็ มุมมองครา่ ว ๆ ก่อนจะลงมือสรา้ งเว็บไซต์ นอกจากนีเรายังต้องทําการแบง่ เนือหาเปนหมวดหมูต่ ่าง ๆ ตามลําดับก่อน-หลัง เพือใหง้ ่าย ต่อการจัดทําโครงรา่ งของเว็บ ขนั ตอนที 2 การกําหนดโครงสรา้ งของเว็บ เปนขันตอนในการกําหนดผังของเว็บ เพือให้ทราบองค์ประกอบทังหมดของเว็บ ตัวอยา่ งดังรูป ข้อสังเกต 1. หน้าแรกของเว็บ หรือโฮมเพจ จะต้องชือ index สว่ นนามสกลุ ให้ใสต่ ามลักษณะ ของภาษาทีใช้ในการสร้างเว็บ 2. การตังชือเว็บเพจแต่ละหน้าเวลาให้กําหนดชือเปนภาษาอังกฤษตามด้วย นามสกุลของภาษาทีเราสร้างเว็บ เชน่ index.html, gallery.html, contact.html เปนต้น ขนั ตอนที 3 การกําหนดการเชอื มโยงเว็บเพจ การกําหนดการเชือมเว็บเพจ เปนการกําหนดความสัมพันธ์ของการเชือมโยงใน แต่ละหน้าเว็บเพือให้สามารถกลับไปกลับมาระหว่างหน้าต่าง ๆ ได้ โดยแต่ละไฟล์จะมี ความสัมพันธ์กัน ตัวอยา่ งดังรูป
17 ขนั ตอนที 4 การตังชอื ไฟล์และโฟลเดอร์ 1. การสร้างโฟลเดอร์ การสร้างโฟลเดอร์ให้สร้างเปนชือหนว่ ยงาน / เรืองนันๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัว พิมพ์เล็ก หรือผสมกับตัวเลข 0-9 2. การตังชือไฟล์ การตังชือไฟล์ให้ตังชือและนามสกุลไฟล์เปนตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรอื ผสม กับตัวเลข 0-9 หรือเครืองมือขีดลบ/ขีดล่าง และตังชือไฟล์ใหต้ รงกับเรืองนัน ๆ เชน่ gallery.html คือ ภาพบรรยากาศ, contact.html คือ ติดต่อเรา เปนต้น ขนั ตอนที 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์ สว่ นประกอบของเว็บไซต์ทดี ี โครงสร้างของเว็บไซต์โดยจะมีสว่ นหลักๆอยูด่ ้วยกันทังหมด 3 สว่ นหลัก ๆ ดังนี 1. สว่ นหวั ของหน้า (Page Header) เปนสว่ นทีอยูต่ อนบนสุดของหน้า และเปนสว่ นทีสําคัญทีสุดของหน้า เพราะเปน สว่ นทีดึงดูดผู้ชมให้ติดตามเนือหาภายในเว็บไซต์ มักใสภ่ าพกราฟกเพือสร้างความประทับ ใจ สว่ นใหญป่ ระกอบด้วย - โลโก้ (Logo) เปนสิงทีเว็บไซต์ควรมี เปนตัวแทนของเว็บไซต์ได้เปนอยา่ งดี และยัง ทําให้เว็บนา่ เชือถือ - ชือเว็บไซต์ (Name) - เมนูหลักหรือลิงค์ (Navigation Bar) เปนจุดเชือมโยงไปสูเ่ นือหาของเว็บไซต์
18 2. สว่ นของเนือหา (Page Body) เปนสว่ นทีอยูต่ อนกลางของหน้า ใช้แสดงข้อมูลเนือหาของเว็บไซต์ ซึงประกอบด้วย ข้อความ, ตารางข้อมูล ภาพกราฟก วีดีโอ และอืนๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่ม วางอยูใ่ นสว่ นนีด้วย สําหรับสว่ นเนือหาควรแสดงใจความสําคัญทีเปนหัวเรอื งไว้บนสุด ข้อมูลมีความกระชบั ใช้รูปแบบตัวอักษรทีอ่านง่าย และจัด Layout ใหเ้ หมาะสมและเปนระเบียบ 3. สว่ นท้ายของหน้า (Page Footer) เปนสว่ นทีอยูด่ ้านล่างสุดของหน้า มักวางระบบนําทางทีเปนลิงค์ข้อความง่าย ๆ และ อาจแสดงข้อมูลเพิมเติมเกียวกับเนือหาภายในเว็บไซต์ เชน่ เจ้าของเว็บไซต์, ข้อความแสดง ลิขสิทธิ, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คําแนะนําการใช้เว็บไซต์ เปนต้น โดยปกติสว่ นหัว และสว่ นท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ ขนั ตอนที 6 การสรา้ งเว็บเพจ เมือจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไปคือขันตอนการเขียนเว็บด้วย โปรแกรมภาษา HTML เพือกําหนดให้แต่ละหน้าเว็บเพจนําเสนอข้อความ รูปภาพ วีดีโอ และเสียง ให้อยูใ่ นรูปแบบการทีต้องการ ขนั ตอนที 7 การลงทะเบยี นขอพนื ทเี ว็บไซต์ เมือทําการออกแบบและสร้างเว็บไซต์เสร็จแล้ว ขันตอนต่อไป คือ การเผยแพรเ่ ว็บไซต์สู่ โลกของอินเทอร์เน็ตให้คนอืนเข้ามาเยียมชม วิธีการ คือ การนําเว็บไซต์ไปฝากกับผูใ้ ห้ บริการพืนทีเว็บไซต์ทังแบบเสียค่าใช้จ่ายหรือบริการ และแบบพืนทีเว็บไซต์ฟรี ขนั ตอนที 8 การอัพโหลดเว็บไซต์ เมือเราทําการสมัครบริการพืนทีฝากเว็บแล้ว ขันตอนต่อไป คือการอัพโหลดไฟล์ เว็บไซต์ของเราไปยังเว็บไซต์ทีให้บริการพืนทีฝากเว็บซึงอาจจะทําการอัพโหลดผา่ นเว็บ บราวเซอร์เว็บทีให้บริการ หรือการอัพโหลดด้วยโปรแกรม เชน่ CuteFTP, Filezilla, WS_FTP เปนต้น เพือให้ผู้คนได้เข้าเยียมชมโดยสามารถดูในเว็บไซต์ของเราผา่ นเครือขา่ ย อินเทอร์เน็ต ขนั ตอนที 9 การเรยี กดเู ว็บไซต์ เมือเราทําการอัพโหลดไฟล์เว็บไซต์ของเราขึนบนเว็บไซต์ทีให้บรกิ ารพืนทีฝากเว็บแล้ว เราสามารถเปดดูเว็บไซต์ของเราผา่ นโปรแกรมเว็บบราวเซอร์ เชน่ Internet Explorer, Mozilla Firefox, Google Chrome เปนต้น โดยการพิมพ์ทีอยูเ่ ว็บไซต์ตรง Address Bar
อ้างอิง เว็บที1 https://bit.ly/2MEwkKJ เว็บที2 https://bit.ly/3olQs2i เว็บที3 https://bit.ly/39io8b0
จัดทําโดย นายอนพุ งษ์ แพพวงทิพย์ สาขาวิชาคอมพวิ เตอรธ์ ุรกิจ ปวช.3 วิทยาลัยสารพดั ชา่ งสมทุ รสงคราม
Search
Read the Text Version
- 1 - 4
Pages:
