การสร้างเว็บไซต์ชุด1

2 คำนำ เอกสารประกอบการเรียน เรื่อง การสรา้ งเวบ็ ไซตเ์ บ้อื งตน้ ดว้ ยโปรแกรม Dreamweaver CS3 จดั ทาข้นึ เพอื่ ใชป้ ระกอบการเรียนการสอน วชิ า การสร้างเวบ็ ไซตเ์ บ้อื งตน้ ดว้ ยโปรแกรม Dreamweaver ช้นั มธั ยมศึกษาปี ท่ี 3 กลุ่มสาระการเรียนรูก้ ารงานอาชีพและเทคโนโลยี ในเอกสาร เล่มน้ีเป็นชุดท่ี 1 เร่ือง พ้นื ฐานการสรา้ งเวบ็ ไซต์ ไดร้ วบรวมเน้ือหาสาระความรู้ ซ่ึงประกอบดว้ ย แบบทดสอบก่อนเรียน ใบความรู้ แบบฝึกหดั และแบบทดสอบหลงั เรียน ผจู้ ดั ทาหวงั เป็นอยา่ งยง่ิ วา่ เอกสารประกอบการเรียนเล่มน้ี จะเป็ นประโยชนต์ อ่ ผเู้ รียน และ การจดั กิจกรรมการเรียนการสอนที่เนน้ ผเู้ รียนเป็ นสาคญั ตลอดจนผทู้ ่สี นใจศกึ ษาคน้ ควา้ ดว้ ยตนเอง ทกุ ท่าน ขอขอบพระคุณผมู้ ีส่วนเก่ียวขอ้ งทุกทา่ นทีใ่ หค้ าปรึกษา แนะนา ในการจดั ทาเอกสาร ประกอบ การเรียนเล่มน้ีจนสาเร็จไดด้ ว้ ยดี ภิญญาพชั ญ์ แบบอยา่ ง

สำรบัญ 3 เรื่อง หน้ำ คาแนะนาการใชเ้ อกสารประกอบการเรียน 1 ผลการเรียนรู้ที่คาดหวงั 2 แบบทดสอบก่อนเรียน 3 ใบความรูท้ ่ี 1.1 เรื่อง ความรู้เบ้อื งตน้ เก่ียวกบั อินเตอร์เน็ต 5 แบบฝึกหดั ท่ี 1.1 7 ใบความรู้ที่ 1.2 เรื่อง กระบวนการพฒั นาเวบ็ ไซต์ 8 แบบฝึกหดั ท่ี 1.2 11 แบบทดสอบหลงั เรียน 12 เฉลยแบบฝึกหดั ที่ 1.1 14 เฉลยแบบฝึกหดั ที่ 1.2 15 เฉลยแบบทดสอบก่อนเรียน - หลงั เรียน 16 บรรณานุกรม 17

4 คำแนะนำกำรใช้เอกสำรประกอบกำรเรียน ชุดที่ 1 เรื่อง พืน้ ฐำนกำรสร้ำงเวบ็ ไซต์ 1. ทาแบบทดสอบก่อนเรียนจานวน 10 ขอ้ 2. ศึกษาเร่ือง ความรู้เบ้อื งตน้ เกี่ยวกบั อินเตอร์เน็ต จากใบความรู้ที่ 1.1 แลว้ ทาแบบฝึกหดั ท่ี 1.1 3. ศึกษาเร่ือง กระบวนการพฒั นาเวบ็ ไซต์ จากใบความรู้ท่ี 1.2 แลว้ ทาแบบฝึกหดั ที่ 1.2 4. ทาแบบทดสอบหลงั เรียน จานวน 10 ขอ้ 5 ตรวจคาตอบจากเฉลยแบบฝึกหดั ที่ 1.1 และ 1.2 และเฉลยแบบทดสอบก่อนเรียน-หลงั เรียน 6. เวลาทีใ่ ชใ้ นการปฏิบตั ิกิจกรรม 2 ชว่ั โมง

5 ผลกำรเรียนรู้ทคี่ ำดหวงั เม่ือนกั เรียนได้ศึกษำเอกสำรประกอบกำรเรียนเร่ืองนจี้ บแล้ว นกั เรียนสำมำรถ 1. อธิบายความหมายของอนิ เตอร์เนต็ เวิลด์ ไวด์ เวบ็ เวบ็ ไซต์ เวบ็ เพจ โฮมเพจ เวบ็ เบราเซอร์ และ ภาษา HTML ได้ 2. บอกส่วนประกอบของหนา้ เวบ็ เพจได้ 3. บอกกระบวนการพฒั นาเวบ็ ไซตไ์ ด้ 4. มีความสนใจและมีเจตคติที่ดีต่อการสร้างเวบ็ ไซต์

6 แบบทดสอบก่อนเรียน เร่ือง พนื้ ฐำนกำรสร้ำงเวบ็ ไซต์ คาช้ีแจง ใหน้ กั เรียนทาเครื่องหมายกากบาท (X) ใหต้ รงกบั ช่อง ก ข ค หรือ ง ซ่ึงเป็นคาตอบทถ่ี ูกตอ้ งทสี่ ุดเพยี งขอ้ เดียวลงในกระดาษคาตอบแบบทดสอบกอ่ นเรียน 1. ขอ้ ใดกล่าวถึงความหมายของอนิ เตอร์เน็ตไดถ้ กู ตอ้ ง 5. เอกสารแตล่ ะหนา้ หรือส่วนท่ีติดต่อกบั ผใู้ ชใ้ นเวบ็ ทสี่ ุด หมายถึงขอ้ ใด ก. เป็นเครือขา่ ยของคอมพวิ เตอร์ขนาดใหญท่ ่ี ก. เวบ็ ไซต์ เช่ือมต่อถึงกนั ทวั่ โลก ข. เวบ็ เพจ ข. เป็นเครือข่ายคอมพวิ เตอร์ภายในโรงเรียน ค. โฮมเพจ ค. เป็นเครือขา่ ยคอมพวิ เตอร์เฉพาะในประเทศ ง. เวบ็ เบราเซอร์ ง. เป็ นเครือขา่ ยที่คอมพวิ เตอร์เฉพาะหน่วยงานทาง ราชการ 6. เมื่อนาเวบ็ เพจหลาย ๆ หนา้ มารวมกนั หมายถึง 2. ขอ้ ใดกล่าวไม่ถูกต้องเก่ียวกบั อินเตอร์เน็ต ขอ้ ใด ก. ใชม้ าตรฐานในการรบั ส่งขอ้ มูลทีเ่ ป็นโปรโตคอล ก. เวบ็ ไซต์ เดียวกนั ข. เวบ็ เพจ ข. Internet มาจากคาวา่ Inter Connection Network ค. โฮมเพจ ค. เปรียบเสมือนใยแมงมุมทค่ี รอบคลุมทวั่ โลก ง. เวบ็ เบราเซอร์ ง. โปรโตคอลทใ่ี ชบ้ นระบบเครือขา่ ยอินเตอร์เน็ต 7. เมื่อเปิ ดเวบ็ ไซตข์ ้นึ มาจะพบกบั หนา้ แรกของ เรียกวา่ ไอซีที/ไอพี เวบ็ ไซต์ ซ่ึงเรียกวา่ ก. เวบ็ ไซต์ 3. การติดตอ่ ส่ือสารแบบไร้มิติหรือการตดิ ตอ่ ส่ือสาร ข. เวบ็ เพจ แบบไร้ขอบเขต คอื ความหมายของขอ้ ใด ค. โฮมเพจ ก. Network ง. เวบ็ เบราเซอร์ ข. Cyberspace 8. การกาหนดระยะเวลา งบประมาณ ทมี งาน อยใู่ น ค. Real Player ข้นั ตอนใดของกระบวนการสรา้ งเวบ็ ไซต์ ง. Hyperlink ก. การวางแผนการทางาน 4. www มาจากคาวา่ ข. การพฒั นาเวบ็ ไซต์ ก. World Wide Web ค. การออกแบบและสรา้ งเวบ็ ไซต์ ข. Web World Wide ง. การรวบรวมและวเิ คราะห์โครงสร้าง ค. Web Wide World ง. World Web Wide

7 9. การอพั โหลด (Upload) อยใู่ นข้นั ตอนใดของกระบวนการสร้างเวบ็ ไซต์ ก. การพฒั นาเวบ็ ไซต์ ข. การเผยแพร่ผา่ นเวบ็ ไซต์ ค. การวางแผนการทางาน ง. การออกแบบและสร้างเวบ็ ไซต์ 10. ในข้นั ตอนใดเป็นการการทดสอบแบบออฟไลน์ โดยทีย่ งั ไม่ไดน้ าเวบ็ ไซต์ เขา้ สู่อินเตอร์เน็ต แตก่ ส็ ามารถแสดงผลไดเ้ หมือนจริงผา่ นเวบ็ เบราวเ์ ซอร์ เพอ่ื ตรวจสอบตวั อยา่ งเวบ็ ทส่ี ร้างไว้ ก. การเผยแพร่ผา่ นเวบ็ ไซต์ ข. การออกแบบและสรา้ งเวบ็ ไซต์ ค. การทดสอบและปรับปรุงเวบ็ ไซต์ ง. การรวบรวมและวเิ คราะห์โครงสรา้ ง ทำแบบทดสอบก่อนเรียนแล้ว ไปศึกษำเนื้อหำ จำกใบควำมรู้เลยนะคะ

8 ใบควำมรู้ที่ 1.1 เรื่อง ควำมรู้เบื้องต้นเกยี่ วกบั อนิ เตอร์เนต็ ควำมหมำยของอนิ เตอร์เนต็ (Internet) อินเตอร์เน็ต (Internet) มาจากคาวา่ Inter Connection Network หมายถึง เครือขา่ ยของ ระบบเครือข่ายคอมพวิ เตอร์ตา่ ง ๆ ท่เี ช่ือมโยงกนั เป็ นระบบเครือขา่ ยคอมพวิ เตอร์ขนาดใหญ่ ที่ เคร่ืองคอมพวิ เตอร์ทกุ เคร่ืองสามารถติดต่อสื่อสารถึงกนั ไดท้ ว่ั โลก โดยใชม้ าตรฐานในการรบั ส่ง ขอ้ มูลทีเ่ ป็นโปรโตคอล (Protocol) เดียวกนั โปรโตคอลที่ใชบ้ นระบบเครือข่ายอินเตอร์เน็ตเรียกว่า ทีซีพ/ี ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol) ลกั ษณะของระบบ อินเตอร์เน็ตเปรียบเสมือนใยแมงมุมท่ีครอบคลุมทว่ั โลก ในแต่ละจุดทเ่ี ชื่อมต่ออินเตอร์เน็ตน้นั สามารถส่ือสารกนั ไดห้ ลายเสน้ ทางตามความตอ้ งการโดยไม่กาหนดตายตวั และ ไม่จาเป็นตอ้ งทา การติดตอ่ ไปตามเสน้ ทางโดยตรง แตอ่ าจจะผา่ นจดุ เช่ือมตอ่ อื่น ๆ หรือเลือกไปเสน้ ทางอน่ื ไดห้ ลาย เสน้ ทาง การตดิ ต่อส่ือสารผา่ นระบบเครือข่ายอินเตอร์เน็ต บางคร้ังเรียกวา่ การติดตอ่ ส่ือสารแบบไร้ มิตหิ รือการติดต่อส่ือสารแบบไร้ขอบเขต (Cyberspace) ซ่ึงรู้จกั ในนามของโลกไซเบอร์สเปช ลกั ษณะของเวลิ ด์ ไวด์ เวบ็ (World Wide Web) เวลิ ด์ ไวด์ เวบ็ (World Wide Web – www) หรือเรียกยอ่ ๆ วา่ เวบ็ (web) เป็น อินเตอร์เน็ตชนิดหน่ึง ท่อี ยใู่ นรูปแบบของกราฟิกและมลั ติมีเดีย ซ่ึงประกอบดว้ ยขอ้ ความ (Text) ภาพ (Graphic) เสียง (Sound) และ ภาพเคล่ือนไหว (Movie) เป็นตน้ ผใู้ ชท้ วั่ ไปสามารถเขา้ ไปในเวบ็ ไดง้ ่าย และจะไดร้ บั ขอ้ มูลครบถว้ นปัจจุบนั ถา้ พดู ถึงอินเตอร์เน็ต คนทวั่ ไปจะเขา้ ใจวา่ หมายถึงเวบ็ ท้งั ท่ีจริงแลว้ เวบ็ เป็นส่วนหน่ึงของอินเตอร์เน็ตเทา่ น้นั เวบ็ ไซต์ (Website) และเวบ็ เพจ (Webpage) เอกสารหรือส่วนท่ีติดต่อกบั ผใู้ ชใ้ นเวบ็ เรียกวา่ เวบ็ เพจ (Webpage) หมายถึงเอกสารหน่ึง หนา้ การใชเ้ วบ็ กค็ ือการเปิ ดอ่านหรือเปิ ดใชเ้ วบ็ แตล่ ะหนา้ นนั่ เอง เวบ็ เพจอาจสร้างข้นึ ดว้ ย ภาษาคอมพวิ เตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ เม่ือนาเวบ็ เพจหลาย ๆ หนา้ มารวมกนั และระบุอยใู่ นอินเตอร์เน็ต หรือ ยอู าร์แอล (Uniform Resource Locator – URL) ใหก้ บั เวบ็ เพจกลุ่มน้นั จะเรียกวา่ เวบ็ ไซต์ (Web Site) เมื่อเปิ ดเวบ็ ไซตข์ ้นึ มาจะพบกบั หนา้ แรกของเวบ็ ไซต์ ซ่ึงเรียกวา่ โฮมเพจ (Homepage) ซ่ึงเป็นหนา้ ทีส่ าคญั ท่สี ุดและเป็นหนา้ ทจ่ี ะเชื่อมโยงไปยงั เวบ็ เพจและเวบ็ ไซตอ์ ่ืน ๆ

9 ใบควำมรู้ท่ี 1.1 (ต่อ) ส่วนประกอบของหน้ำเวบ็ เพจ เราสามารถจาแนกส่วนประกอบของหนา้ เวบ็ เพจ เป็น 3 ส่วน ดงั น้ี 1. ส่วนหัว (Page Header) อยบู่ ริเวณบนสุดของหนา้ เวบ็ เพจ เป็นส่วนทแ่ี สดงช่ือ เวบ็ ไซต์ โลโก้ แบนเนอร์โฆษณาลิงกส์ าหรับขา้ มไปยงั หนา้ เวบ็ อ่ืน 2. ส่วนเนื้อหำ (Page Body) อยบู่ ริเวณตอนกลางของหนา้ เวบ็ เพจ ซ่ึงเป็ นส่วนทแ่ี สดง เน้ือหาภายในหนา้ เวบ็ เพจน้นั โดยประกอบดว้ ยขอ้ ความ ขอ้ มูล ภาพเคลอื่ นไหว เป็ นตน้ 3. ส่วนท้ำย (Page Footer) อยบู่ ริเวณดา้ นล่างสุดของหนา้ เวบ็ เพจ ส่วนมากใชส้ าหรับลิงค์ ขอ้ ความส้นั ๆ เขา้ ใจง่าย หรือจะมีชื่อเจา้ ของเวบ็ ไซต์ อีเมลแอดเดรสของผดู้ ูแลเวบ็ ไซตส์ าหรับ ติดตอ่ กบั ทางเวบ็ ไซต์ เวบ็ เบรำเซอร์ (Web Browser) เวบ็ เบราเซอร์ (Web Browser) คือโปรแกรมทใี่ ชส้ าหรบั เปิ ดเวบ็ เพจหรือ รบั ส่งขอ้ มูล ตามทเ่ี ครื่องลูกขา่ ยร้องขอเมื่อเราเปิ ดเขา้ สู่อินเตอร์เน็ต เวบ็ เบราเซอร์ท่ีไดร้ บั ความนิยมปัจจบุ นั มี หลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera ภำษำ HTML ภาษา HTML ยอ่ มาจากคาวา่ Hypertext Markup Language เป็นภาษาทีใ่ ชส้ าหรบั สรา้ งเวบ็ เพจ โดยจะไดร้ บั การแปลหรือการแสดงผลโดยเวบ็ เบราเซอร์ ซ่ึงสามารถแสดงไดท้ ้งั ขอ้ ความ ภาพ และเสียง และภาพเคลื่อนไหว การสร้างเวบเพจดว้ ยภาษา HTML ใชโ้ ปรแกรมประมวลผลคาทวั่ ไป เช่น Wordpad Notepad และ MS-word เป็นตน้ โดยปกติจะนิยมใชโ้ ปรแกรม Notepad ซ่ึงมาพรอ้ มกบั ปฏิบตั กิ าร วนิ โดวส์ ทาใหใ้ ชง้ านและแกไ้ ขงานสะดวก

10 แบบฝึ กหดั ท่ี 1.1 คำสั่ง จงตอบคาถามต่อไปน้ี 1. อินเตอร์เน็ต (Internet) หมายถึง................................................................................................. ....................................................................................................................................................... ....................................................................................................................................................... 2. จงอธิบายความหมายของคาวา่ Cyberspace ....................................................................................................................................................... ....................................................................................................................................................... 3. เวลิ ด์ ไวด์ เวบ็ (World Wide Web – www) หมายถึง................................................................. ....................................................................................................................................................... ....................................................................................................................................................... ....................................................................................................................................................... 4. จงบอกความหมายของคาตอ่ ไปน้ี 4.1 เวบ็ ไซต์ (Website) หมายถึง...................................................................................................... ........................................................................................................................................................ 4.2 เวบ็ เพจ (Webpage) หมายถึง..................................................................................................... ........................................................................................................................................................ 4.3 โฮมเพจ (Homepage) หมายถึง.................................................................................................. ........................................................................................................................................................ 4.4 เวบ็ เบราเซอร์ (Web Browser) ) หมายถึง.................................................................................. ......................................................................................................................................................... 4.5 ภาษา HTML หมายถึง.............................................................................................................. ......................................................................................................................................................... ......................................................................................................................................................... 5. ส่วนประกอบของหนา้ เวบ็ เพจ ประกอบดว้ ยอะไรบา้ ง ......................................................................................................................................................... ......................................................................................................................................................... ......................................................................................................................................................... ......................................................................................................................................................... ชื่อ..............................................................ช้ัน............เลขท.ี่ .........

11 ใบควำมรู้ท่ี 1.2 เร่ือง กระบวนกำรพฒั นำเวบ็ ไซต์ แนวคดิ ในกำรออกแบบ  ดูจากเวบ็ ไซตอ์ ่ืนเพอื่ เป็ นตวั อยา่ ง การดูจากเวบ็ ไซตอ์ ่ืนบนอินเตอร์เน็ตเพอ่ื ศึกษาเป็น ตวั อยา่ งน้นั นบั เป็ นวธิ ีการที่ง่ายทสี่ ุด แตก่ ็ควรนาไปประยกุ ตใ์ ชใ้ ห้เหมาะสมกบั เน้ือหาและ กลุ่มเป้าหมายของเราดว้ ย  ศึกษาจากส่ือสิ่งพมิ พใ์ นรูปแบบต่าง ๆ ส่ือสิ่งพมิ พใ์ นที่น้ี ไดแ้ ก่ แมกกาซีน โปสเตอร์ โฆษณา โบรชวั ร์ หรือหนงั สือบางเล่มทีม่ ีรูปแบบและจดุ ดึงดูดความสนใจ สามารถนามา ประยกุ ตใ์ ชใ้ นเวบ็ ไซตข์ องเราไดเ้ ช่นกนั กระบวนกำรพฒั นำเว็บไซต์ การท่ีจะสรา้ งพฒั นาเวบ็ เพจและนาเวบ็ ไซตเ์ ขา้ สู่ระบบเวลิ ด์ ไวด์ เวบ็ ใหค้ นอ่ืนเขา้ มาเยย่ี ม ชมไดน้ ้นั มีกระบวนการทผี่ พู้ ฒั นาเวบ็ ไซตจ์ ะตอ้ งศกึ ษาและปฏบิ ตั ติ าม ดงั น้ี 1. กำรวำงแผนกำรทำงำน การวางแผนการทางานเปรียบเหมือนเขม็ ทศิ ท่ีจะช้ีทางให้เรารู้วา่ ควรจะเดินทางไปใน ทิศทางใดเพอื่ ไม่ใหห้ ลงทาง การสร้างเวบ็ ไซตก์ ็เหมือนกนั จาเป็ นตอ้ งมีการวางแผนการทางานใหร้ อบดา้ นก่อนทจ่ี ะ เร่ิมลงมือทา โดยมีหลกั ที่ตอ้ งกาหนดในการวางแผน ดงั น้ี 1. ระยะเวลาการทางาน เป็ นการกาหนดช่วงเวลาท่จี ะใชใ้ นการสร้างเวบ็ 2. ทีมงานหรือผรู้ ่วมงาน ปกตกิ ารสร้างเวบ็ ตอ้ งทางานเป็ นทมี อยา่ งนอ้ ยตอ้ งมี ผเู้ ชี่ยวชาญ 3 ฝ่าย คอื ผเู้ ชี่ยวชาญดา้ นภาษา HTML หรือโปรแกรมสร้างเวบ็ เพจผู้ เชี่ยวชาญ ดา้ นการออกแบบและตกแต่งภาพ และผเู้ ชี่ยวชาญดา้ นเน้ือหาหรือบรรณาธิการ 3. งบประมาณ เป็นการกาหนดค่าใชจ้ า่ ย 4. อุปกรณ์หรือเคร่ืองมือช่วยงาน เช่น เครื่องคอมพวิ เตอร์ เครื่องสแกนเนอร์และ รูปภาพประกอบเวบ็ เพจ เป็นตน้ 5. ปัญหาและอุปสรรค

12 ใบควำมรู้ท่ี 1.2 (ต่อ) 2. กำรรวบรวมและวเิ ครำะห์โครงสร้ำง เป็ นข้นั ตอนหน่ึงที่ต่อจากการวางแผน เป็ นการแผนงานไปปฏบิ ตั ิ โดยการรวบรวม ขอ้ มูลทจ่ี าเป็นตอ้ งใชใ้ นการสรา้ งเวบ็ ตามหวั ขอ้ ทเ่ี ลือกไว้ ท้งั เน้ือหา ภาพ เสียงและภาพเคลื่อนไหว เกบ็ รวบรวมเป็นไฟลข์ อ้ มูล หรือใส่แฟ้มแยกเป็ นหมวดหมู่ เพอ่ื ความสะดวกในการนามาใชง้ าน 3. กำรออกแบบและกำรสร้ำงเว็บไซต์ เป็ นข้นั ตอนการนาขอ้ มลู ท้งั หมดมาสร้างเป็ น เวบ็ ไซตด์ ว้ ยภาษา HTML หรือเครื่องมือในการสรา้ งเวบ็ อื่นๆ หลกั สาคญั ในการออกแบบและสรา้ ง เวบ็ ไซต์ คือ 1) กาหนดจดุ ประสงคเ์ วบ็ ไซต์ โดยวางเป้าหมายของผเู้ ขา้ ชมวา่ จะเป็ นกลุ่มใด 2) เลือกเวบ็ เบราเซอร์ เป็นการเลือกเวบ็ เบราเซอร์ท่ใี ชแ้ สดงผลเวบ็ ไซต์ จะไดก้ าหนด ขนาดกวา้ ง ยาว และลกั ษณะการวางองคป์ ระกอบเวบ็ ใหส้ วยงามและแสดงผลได้ เร็ว 3) วางโครงร่างของเวบ็ ไซต์ กาหนดโครงร่างวา่ มีท้งั หมดกี่เวบ็ เพจ แตล่ ะเวบ็ เพจมี เน้ือหาอะไรบา้ ง ควรเขียนเป็ นแผนผงั เวบ็ ไซตอ์ อกมาบนกระดาษ 4) ออกแบบหนา้ ตาเวบ็ ไซต์ เป็ นข้นั ตอนในการลงมือสรา้ งเวบ็ เพจแตล่ ะหนา้ ตามท่ีได้ ออกแบบไว้ พรอ้ มกบั ทดสอบผา่ นเวบ็ เบราเซอร์ (แบบ Offline) 4. ทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบแบบออฟไลน์ โดยท่ยี งั ไม่ไดน้ า เวบ็ ไซตเ์ ขา้ สู่อินเตอร์เน็ต แตก่ ็สามารถแสดงผลไดเ้ หมือนจริงผา่ นเวบ็ เบราเซอร์ เช่น IE เพอ่ื ตรวจสอบตวั อยา่ งเวบ็ ท่สี รา้ งไว้ เช่น ขนาดตวั อกั ษร ขนาดภาพ การใชส้ ี ตาราง ฯลฯ วา่ เหมาะสม หรือไม่ พร้อมกบั การปรับปรุงจนเป็นทนี่ ่าพอใจ 5. เผยแพร่ผ่ำนเว็บไซต์ เป็นการเผยแพร่ใหค้ นทว่ั ไปไดร้ ู้จกั หรือเรียกวา่ การอพั โหลด (Upload) โดยเจา้ ของเวบ็ จะตอ้ งจดทะเบยี นโดเมนเนม และเช่าพน้ื ท่โี ฮสต์ กส็ ามารถนาเวบ็ เพจ อพั โหลดข้นึ สู่อินเตอร์เน็ต และประชาสมั พนั ธใ์ หค้ นทว่ั ไปไดร้ ูจ้ กั การทจ่ี ะทาใหค้ นรบั รู้ และเขา้ มาใชบ้ ริการเวบ็ ไซตไ์ ดม้ ากน้นั จะตอ้ งมกี ารประชาสมั พนั ธอ์ ยา่ งต่อเนื่องและใชเ้ วลาพอสมควร และถา้ จะใหด้ ีควรมีเคานเ์ ตอร์ (Counter) หรือตวั จดสถิตผิ เู้ ขา้ ชม กจ็ ะช่วยใหป้ ระเมินไดว้ า่ เวบ็ ไซต์ ของเราไดร้ ับความสนใจมากนอ้ ยเพยี งใด

13 ใบควำมรู้ที่ 1.2 (ต่อ) 6. กำรพัฒนำเว็บไซต์ เป็ นการปรบั ปรุงเน้ือหา ภาพประกอบหรืออพั เดท (Update) เวบ็ ไซต์ ถือเป็ นข้นั ตอนสาคญั เพราะในโลกของอินเตอร์เน็ตมีการเปลี่ยนแปลงอยา่ งรวดเร็วอยู่ ตลอดเวลา ผชู้ มเวบ็ มกั จะใชเ้ วลาในการคน้ หาและเปิ ดผา่ นเวบ็ ไซตต์ ่างๆ อยา่ งรวดเร็วหากพบวา่ เวบ็ ไซตข์ องเราไม่ไดเ้ ปล่ียนแปลงหรือมีขอ้ มูลใหม่ๆ เพมิ่ ข้นึ เลย ผเู้ ขา้ ชมเวบ็ กจ็ ะลดจานวนลงไป เร่ือยๆ จนกลายเป็ นเวบ็ ท่ีไม่มีผคู้ นเขา้ มาเลยหรือเป็ นเวบ็ ทต่ี ายแลว้ ดงั น้นั การปรบั ปรุงเวบ็ ไซตอ์ ยเู่ สมออาจจะวนั ละคร้งั หรือสปั ดาห์ละคร้ัง โดยเพมิ่ ขอ้ มูล ขา่ วสารใหม่ๆ อยเู่ ป็นประจาก็จะทาใหเ้ วบ็ ไซตท์ นั สมยั ผคู้ นเขา้ ชมเป็ นประจาและมากข้นึ จน พฒั นาเป็นเวบ็ ไซตย์ อดนิยมไดใ้ นท่ีสุด

14 แบบฝึ กหดั ที่ 1.2 คำส่ัง จงตอบคาถามต่อไปน้ี 1. กระบวนการพฒั นาเวบ็ ไซต์ ประกอบดว้ ยอะไรบา้ ง ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... 2. หลกั สาคญั ในการออกแบบและสร้างเวบ็ ไซตไ์ ดแ้ ก่อะไรบา้ ง ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... 3.ในการออกแบบและสร้างเวบ็ ไซตจ์ ะตอ้ งอาศยั ผเู้ ช่ียวชาญในดา้ นใดบา้ ง ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ช่ือ..............................................................ช้ัน............เลขท.่ี .........

15 แบบทดสอบหลงั เรียน เรื่อง พนื้ ฐำนกำรสร้ำงเวบ็ ไซต์ คาช้ีแจง ใหน้ กั เรียนทาเครื่องหมายกากบาท (X) ใหต้ รงกบั ช่อง ก ข ค หรือ ง ซ่ึงเป็นคาตอบทถี่ ูกตอ้ งทสี่ ุดเพยี งขอ้ เดียวลงในกระดาษคาตอบแบบทดสอบหลงั เรียน 1. การติดตอ่ สื่อสารแบบไรม้ ิติหรือการตดิ ตอ่ ส่ือสาร 5. เมื่อเปิ ดเวบ็ ไซตข์ ้ึนมาจะพบกบั หนา้ แรกของ แบบไร้ขอบเขต คือความหมายของขอ้ ใด เวบ็ ไซต์ ซ่ึงเรียกวา่ ก. Network ก. เวบ็ ไซต์ ข. Cyberspace ข. เวบ็ เพจ ค. Real Player ค. โฮมเพจ ง. Hyperlink ง. เวบ็ เบราเซอร์ 2. www มาจากคาวา่ ก. World Wide Web 6. เอกสารแตล่ ะหนา้ หรือส่วนท่ตี ิดต่อกบั ผใู้ ชใ้ นเวบ็ ข. Web World Wide หมายถึงขอ้ ใด ค. Web Wide World ก. เวบ็ ไซต์ ง. World Web Wide ข. เวบ็ เพจ 3. ขอ้ ใดกล่าวถึงความหมายของอินเตอร์เน็ตไดถ้ ูกตอ้ ง ค. โฮมเพจ ทส่ี ุด ง. เวบ็ เบราเซอร์ ก. เป็นเครือขา่ ยของคอมพวิ เตอร์ขนาดใหญ่ที่ 7. เม่ือนาเวบ็ เพจหลาย ๆ หนา้ มารวมกนั หมายถึง เชื่อมตอ่ ถึงกนั ทว่ั โลก ข. เป็นเครือขา่ ยคอมพวิ เตอร์ภายในโรงเรียน ขอ้ ใด ค. เป็นเครือข่ายคอมพวิ เตอร์เฉพาะในประเทศ ก. เวบ็ ไซต์ ง. เป็ นเครือขา่ ยที่คอมพวิ เตอร์เฉพาะหน่วยงานทาง ข. เวบ็ เพจ ราชการ ค. โฮมเพจ 4. ขอ้ ใดกล่าวไม่ถูกต้องเกี่ยวกบั อินเตอร์เน็ต ง. เวบ็ เบราเซอร์ ก. ใชม้ าตรฐานในการรบั ส่งขอ้ มูลที่เป็ นโปรโตคอล 8. การอพั โหลด (Upload) อยใู่ นข้นั ตอนใดของ กระบวนการสรา้ งเวบ็ ไซต์ เดียวกนั ก. การพฒั นาเวบ็ ไซต์ ข. Internet มาจากคาวา่ Inter Connection Network ข. การเผยแพร่ผา่ นเวบ็ ไซต์ ค. เปรียบเสมือนใยแมงมุมทคี่ รอบคลุมทวั่ โลก ค. การวางแผนการทางาน ง. โปรโตคอลทใี่ ชบ้ นระบบเครือขา่ ยอินเตอร์เน็ต ง. การออกแบบและสร้างเวบ็ ไซต์ เรียกวา่ ไอซีที/ไอพี

16 9. ในข้นั ตอนใดเป็นการการทดสอบแบบออฟไลน์ โดยทยี่ งั ไม่ไดน้ าเวบ็ ไซต์ เขา้ สู่อินเตอร์เน็ต แต่กส็ ามารถแสดงผลไดเ้ หมือนจริงผา่ นเวบ็ เบราวเ์ ซอร์ เพอื่ ตรวจสอบตวั อยา่ งเวบ็ ทสี่ ร้างไว้ ก. การเผยแพร่ผา่ นเวบ็ ไซต์ ข. การออกแบบและสร้างเวบ็ ไซต์ ค. การทดสอบและปรับปรุงเวบ็ ไซต์ ง. การรวบรวมและวเิ คราะห์โครงสร้าง 10. การกาหนดระยะเวลา งบประมาณ ทีมงาน อยใู่ น ข้นั ตอนใดของกระบวนการสร้างเวบ็ ไซต์ ก. การวางแผนการทางาน ข. การพฒั นาเวบ็ ไซต์ ค. การออกแบบและสรา้ งเวบ็ ไซต์ ง. การรวบรวมและวเิ คราะห์โครงสรา้ ง ตรวจคำตอบจำกเฉลยนะคะ

17 เฉลยแบบฝึ กหดั ท่ี 1.1 1. อินเตอร์เน็ต (Internet) หมายถึง เครือขา่ ยของระบบเครือขา่ ยคอมพวิ เตอร์ตา่ ง ๆ ทเ่ี ชื่อมโยงกนั เป็ นระบบเครือขา่ ยคอมพวิ เตอร์ขนาดใหญ่ ทีเ่ ครื่องคอมพวิ เตอร์ทุกเคร่ืองสามารถติดต่อส่ือสาร ถึงกนั ไดท้ วั่ โลก 2. จงอธิบายความหมายของคาวา่ Cyberspace หมายถึง การตดิ ตอ่ สื่อสารแบบไร้มิติหรือการตดิ ต่อส่ือสารแบบไร้ขอบเขต 3. เวลิ ด์ ไวด์ เวบ็ (World Wide Web – www) หมายถึง อินเตอร์เน็ตชนิดหน่ึง ท่ีอยใู่ นรูปแบบของ กราฟิกและมลั ตมิ ีเดีย ซ่ึงประกอบดว้ ยขอ้ ความ (Text) ภาพ (Graphic) เสียง (Sound) และ ภาพเคล่ือนไหว (Movie) 4. จงบอกความหมายของคาตอ่ ไปน้ี 4.1 เวบ็ ไซต์ (Website) หมายถึง การนาเวบ็ เพจหลาย ๆ หนา้ มารวมกนั และระบอุ ยใู่ น อินเตอร์เน็ต หรือ ยอู าร์แอล (Uniform Resource Locator – URL) ใหก้ บั เวบ็ เพจกลุ่มน้นั 4.2 เวบ็ เพจ (Webpage) หมายถึง เอกสารหน่ึงหนา้ การใชเ้ วบ็ กค็ ือการเปิ ดอ่านหรือเปิ ดใชเ้ วบ็ แต่ละ หนา้ นนั่ เอง เวบ็ เพจอาจสร้างข้ึนดว้ ยภาษาคอมพวิ เตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ 4.3 โฮมเพจ (Homepage) หมายถึง หนา้ แรกของเวบ็ ไซต์ 4.4 เวบ็ เบราเซอร์ (Web Browser) ) หมายถึง โปรแกรมทใี่ ชส้ าหรบั เปิ ดเวบ็ เพจหรือ รับส่งขอ้ มูล ตามทเี่ ครื่องลูกข่ายร้องขอเมื่อเราเปิ ดเขา้ สู่อินเตอร์เน็ต เวบ็ เบราเซอร์ทไ่ี ดร้ บั ความนิยมปัจจบุ นั มี หลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera 4.5 ภาษา HTML ยอ่ มาจากคาวา่ Hypertext Markup Language เป็นภาษาท่ีใชส้ าหรับสร้างเวบ็ เพจ โดยจะไดร้ ับการแปลหรือการแสดงผลโดยเวบ็ เบราเซอร์ ซ่ึงสามารถแสดงไดท้ ้งั ขอ้ ความ ภาพ และเสียง และภาพเคลื่อนไหว 5. ส่วนประกอบของหนา้ เวบ็ เพจ ประกอบดว้ ย 3 ส่วน ไดแ้ ก่ 1. ส่วนหัว (Page Header) อยบู่ ริเวณบนสุดของหนา้ เวบ็ เพจ เป็นส่วนทีแ่ สดงชื่อ เวบ็ ไซต์ โลโก้ แบนเนอร์โฆษณาลิงกส์ าหรบั ขา้ มไปยงั หนา้ เวบ็ อื่น 2. ส่วนเนื้อหำ (Page Body) อยบู่ ริเวณตอนกลางของหนา้ เวบ็ เพจ ซ่ึงเป็ นส่วนที่แสดง เน้ือหาภายในหนา้ เวบ็ เพจน้นั โดยประกอบดว้ ยขอ้ ความ ขอ้ มูล ภาพเคลอ่ื นไหว เป็ นตน้ 3. ส่วนท้ำย (Page Footer) อยบู่ ริเวณดา้ นล่างสุดของหนา้ เวบ็ เพจ ส่วนมากใชส้ าหรบั ลิงค์ ขอ้ ความส้นั ๆ เขา้ ใจงา่ ย หรือจะมีชื่อเจา้ ของเวบ็ ไซต์ อีเมลแอดเดรสของผดู้ ูแลเวบ็ ไซตส์ าหรบั ติดตอ่ กบั ทางเวบ็ ไซต์

18 เฉลยแบบฝึ กหดั ท่ี 1.2 1. กระบวนการพฒั นาเวบ็ ไซตป์ ระกอบดว้ ย 1) การวางแผนการทางาน 2) การรวบรวมและวเิ คราะหโ์ ครงสร้าง 3) การออกแบบและสร้างเวบ็ ไซต์ 4) การทดสอบและปรับปรุงเวบ็ ไซต์ 5) การเผยแพร่ผา่ นเวบ็ ไซต์ 6) การพฒั นาเวบ็ ไซต์ 2. หลกั สาคญั ในการออกแบบและสรา้ งเวบ็ ไซตไ์ ดแ้ ก่ 1) กาหนดจุดประสงคเ์ วบ็ ไซต์ โดยวางเป้าหมายของผเู้ ขา้ ชมวา่ จะเป็ นกลุ่มใด 2) เลือกเวบ็ เบราเซอร์ เป็นการเลือกเวบ็ เบราเซอร์ทใ่ี ชแ้ สดงผลเวบ็ ไซต์ จะไดก้ าหนด ขนาดกวา้ ง ยาว และลกั ษณะการวางองคป์ ระกอบเวบ็ ใหส้ วยงามและแสดงผลได้ เร็ว 3) วางโครงร่างของเวบ็ ไซต์ กาหนดโครงร่างวา่ มีท้งั หมดกี่เวบ็ เพจ แต่ละเวบ็ เพจมี เน้ือหาอะไรบา้ ง ควรเขียนเป็ นแผนผงั เวบ็ ไซตอ์ อกมาบนกระดาษ 4) ออกแบบหนา้ ตาเวบ็ ไซต์ เป็ นข้นั ตอนในการลงมือสร้างเวบ็ เพจแต่ละหนา้ ตามทีไ่ ด้ ออกแบบไว้ พรอ้ มกบั ทดสอบผา่ นเวบ็ เบราเซอร์ (แบบ Offline) 3.ในการออกแบบและสร้างเวบ็ ไซตจ์ ะตอ้ งอาศยั ผเู้ ชี่ยวชาญในดา้ นตอ่ ไปน้ี 1) ดา้ นภาษา HTML หรือโปรแกรมสรา้ งเวบ็ เพจ 2) ดา้ นการออกแบบและตกแต่งภาพ 3) ดา้ นเน้ือหาหรือบรรณาธิการ

19 เฉลยแบบทดสอบก่อนเรียน- หลงั เรียน เร่ือง พนื้ ฐำนกำรสร้ำงเวบ็ ไซต์ ก่อนเรียน หลงั เรียน 1. ก 1. ข 2. ง 2. ก 3.ข 3.ก 4. ก 4. ง 5. ข 5. ค 6. ก 6. ข 7. ค 7. ก 8. ก 8. ข 9. ข 9. ค 10. ค 10. ก

20 บรรณำนุกรม นวอร แจ่มขา และคณะ. สร้ำงเว็บสวยด้วย Dreamweaver. กรุงเทพฯ : โปรวชิ นั่ , 2553. พนั จนั ทร์ ธนวฒั นเสถียร. ออกแบบและสร้ำงเวบ็ สวยด้วย Dreamweaver CS3. กรุงเทพฯ : ซคั เซสมีเดีย, 2551. ภทั ทิรา เหลืองวลิ าส. ออกแบบและสร้ำงเวบ็ ไซต์ด้วย Dreamweaver CS4. กรุงเทพฯ : ซีเอด็ ยเู คชนั่ , 2552. มณีโชติ สมานไทย. ภำษำ HTML ฉบบั ผู้เร่ิมต้น. นนทบุรี : ไอดีซี อินโฟ ดิสทริบวิ เตอร์ เซ็นเตอร์ จากดั , 2548. ศกั ด์ิระพี นิลพนั ธ.์ Dreamweaver CS3 สำหรับมือใหม่. ฉะเชิงเทรา : พเี อ็นเอน็ กรุ๊ป, 2550.