ใบเนื้อหา 11

วชิ า การสรา้ งเวบ็ ไซต์ รหสั วิชา 2204-2009 หนว่ ยที่ 11 การ Upload เว็บเพจขน้ึ สู่อินเทอร์เนต็ ครูผสู้ อน ศริ ินภา บตุ ะเขียว แผนกวชิ าคอมพิวเตอรธ์ ุรกิจวทิ ยาลยั เทคนคิ กาญจนาภเิ ษก สมทุ รปราการ

ใบเนือ้ หา หนว่ ยที่ 11 การ Upload เวบ็ เพจข้นึ สู่อนิ เทอร์เนต็เน้อื หาสาระการสอน/การเรียนรู้• ดา้ นความรู้(ทฤษฎี) 1. การตรวจสอบขนาดของไฟล์เว็บเพจ ตรวจสอบไฟล์ให้พร้อมก่อนอัพโหลด ก่อนท่ีเราจะอพั โหลดเวบ็ ไซต์ท่สี ร้างขึน้ เพื่อเผยแพร่สสู่ ายตาคนอื่น เราควรตรวจสอบไฟล์ตา่ ง ๆ ให้แน่ใจก่อนว่า เวบ็ ไซตไ์ มม่ ีข้อผิดพลาดใด ๆ และสามารถทางานได้อย่างมปี ระสิทธิภาพ ไม่วา่ จะเป็นขนาดของไฟลเ์ ว็บเพจ ลิงก์เชอ่ื มโยงระหวา่ งเว็บเพจกับไฟล์หรอื เว็บไซตอ์ ื่น ๆ และกาจดั แท็กสว่ นเกิน ขนาดของไฟลเ์ ว็บเพจ ขนาดของไฟล์มีความสาคญั อยา่ งยงิ่ ตอ่ การเปดิ เว็บเพจหนา้ น้นั หากไฟลเ์ ว็บเพจมขี นาดใหญย่ อ่ มทาใหใ้ ชเ้ วลาในการเปดิ เว็บเพจหนา้ นน้ั นานขึ้น (ทัง้ นี้ขนึ้ อยู่กบั ความเร็วของอินเทอรเ์ น็ตและโมเด็มทใี่ ช้) ดังนน้ัเพอื่ ใหไ้ ฟลเ์ ว็บเพจของเราสามารถเปิดได้รวดเรว็ แมจ้ ะใช้ความเรว็ ของอินเทอร์เนต็ และโมเด็มทไี่ มส่ งู นักควรจะมีขนาดอยู่ที่ 35 - 60 K ซึง่ วิธกี ารตรวจสอบขนาดไฟล์ของเว็บเพจรวมถึงเวลาท่ใี ช้ในการเปิดเวบ็ เพจหนา้นนั้ ๆ ที่โมเดม็ ความเรว็ 56 Kbps เราสามารถดูได้ที่แถบสถานะ (Status bar) ทางด้านขวาของโปรแกรมDreamweaver ดังรูป ลิงกเ์ ปน็ อีกสว่ นประกอบหน่งึ ทีส่ าคญั ทช่ี ่วยทาให้แตล่ ะเว็บเพจสามารถเชื่อมโยงถงึ กันได้ และยงัสามารถเช่ือมโยงไปยงั เว็บไซต์อน่ื ได้อีก ดังนนั้ เราควรตรวจสอบความถูกต้องของลงิ ก์เหล่านั้นเสยี ก่อนว่าสามารถใช้งานได้จริงหรอื ไมเ่ พราะอาจเกิดปญั หาลงิ ก์ขาด(broken link) เช่น ไฟล์หรอื เว็บไซต์ปลายทางท่ีกาหนดไม่มี เปล่ยื นชือ่ หรือถูกยา้ ยไปแลว้ วธิ ีการตรวจสอบลิงก์สามารถทาได้ด้วยการเปิดเว็บเพจทต่ี ้องการตรวจสอบลงิ กข์ ึน้ มา ซึ่งวธิ ีตรวจสอบมดี ว้ ยกนั 3 รูปแบบ ดังน้ี 1. ตรวจสอบลิงก์ทงั้ เวบ็ ไซต์ ทาได้โดยคลกิ เมนู Site > Check Link Sidewide

2. ตรวจสอบลิงก์ท่ีเชอื่ มโยงกับไฟลท์ ใี่ ช้งานอยู่ กรณีไฟล์ทใี่ ชง้ านอยมู่ ลี งิ กเ์ ช่ือมโยงกับไฟลอ์ ่ืนสามารถตรวจสอบได้โดยคลกิ เลอื กไฟล์หรอื โฟลเดอร์บนพาเนล File จากน้ันคลิกเมาสข์ วาท่ไี ฟล์ แลว้ เลอื กคาสง่ั Check Link > Selected Files 3. ตรวจสอบลิงก์ทเ่ี ช่ือมโยงกบั ไฟลท์ ั้งหมด การตรวจสอบวธิ นี ีจ้ ะคล้ายกับวธิ แี รกทาได้โดยการคลกิเลอื กไฟลห์ รือโฟลเดอร์บนพาเนล File จากนน้ั คลกิ เมาสข์ วาท่ีไฟลแ์ ล้วเลือกคาส่ัง Check Links > SelectedFiles จากนน้ั จะแสดงหน้าต่าง Result ซึ่งจะแสดงสาเหตขุ องลิงก์ทีม่ ีขอ้ ผดิ พลาดโดยเราสามารถเลือกดูลิงก์ทมี่ ปี ัญหาแยกตามประเภทได้ โดยเลือกทช่ี อ่ ง Slow ดังน้ี - Broken Links ไฟลป์ ลายทางทเ่ี รียกใช้น้ันไมม่ ภี ายในเวบ็ ไซต์เดยี วกนั - External Links โปรแกรมจะตรวจสอบเฉพาะรูปแบบการใช้ลิงก์ท่ีเชื่อมต่อภายนอกเวบ็ ไซต์ แต่ ไม่ได้ตรวจสอบว่าไฟลน์ ้ันมีอยู่จรงิ ไม - Orphaned Files แสดงไฟลใ์ นเว็บไซต์เดยี วกันท่ีไม่ไดถ้ ูกลงิ กห์ รือเรยี กใชง้ านเลย 2. แก้ไขปัญหาลงิ ก์ขาด หลังจากตรวจพบวา่ มลี งิ ก์ขาด หรือลงิ กท์ ่ีไม่พบไฟล์ปลายทางท่เี รียกใช้งานเราสามารถแกไ้ ขปัญหานี้ได้ดังน้ี 1. คลิกแทบ็ Link Checker บนพาเนล Result 2. คลิกป่มุ เลือกโฟลเดอรท์ า้ ยลงิ กท์ ต่ี ้องการแก้ไข เพ่ือเลือกไฟลป์ ลายทางใหม่ จากน้นั จะแสดงไดอะล็อกบ็อกซ์แจ้งต้องการแก้ไขลิงก์น้ที ุกจดุ ทีม่ ีการเรยี กใช้หรือไม่

3. คลิกปุม่ Yes เม่อื ต้องการแก้ไขทุกจุดทม่ี ีการเรียกใชล้ ิงก์นัน้ (ถ้าต้องการแก้ไขเฉพาะจดุ ที่กาลังเลอื กให้คลกิ No) 3. กาจัดแทก็ HTML ส่วนเกนิ ในบางครง้ั การสร้างคาสั่ง HTML โดยใช้โปรแกรม Dreamweaver อาจเกดิ แท็กท่ีไมจ่ าเปน็ หรือแท็กสว่ นเกินขึ้นมาโดยอัตโนมตั ิ ดังนน้ั เราควรตรวจสอบและกาจัดแทก็ สว่ นเกิดเหลา่ น้ันก่อนอพั โหลดไฟล์ เพื่อลดขนาดไฟลเ์ ว็บเพจซ่งึ ทาได้ดงั น้ี 1. เปิดเวบ็ เพจทต่ี ้องการตรวจสอบข้นึ มา 2. คลิกเมนู Commands > Clean Up HTML… 3. กาหนดคณุ สมบัตขิ องแท็กที่ต้องการกาจัดโดยแนะนาใหเ้ ลือก 3 หวั ข้อแรก คือ - Empty container tags กาจดั แทก็ วา่ งท่ไี ม่มขี ้อมูลอยู่ในแทก็ - Redundant nested tags กาจัดแทก็ ท่ีซ้อนแท็กดว้ ยกนั - Non – Dreamweaver HTML comments กาจดั หมายเหตุคาสงั่ HTML ท่ีไม่ได้มาจากโปรแกรม Dreamweaver 4. กาหนดคณุ สมบตั เิ สริมของการกาจัดแท็ก โดยแนะนาให้เลอื กทั้ง 2 หัวข้อ คือ - Combine nested <font> Tags when possible ถา้ เป็นไปได้ให้รวมแท็กไว้ดว้ ยกัน - Show log on completion แสดงสถานการณ์กาจัด 5. คลิกปมุ่ OK

จากนนั้ โปรแกรมจะแสดงไดอะล็อกบอ็ กซ์สรุปผลการลบแท็ก HTML ท่ีไม่จาเปน็ ออกไปจากเว็บเพจท่ีตรวจสอบ 6. คลิกปุ่ม OK 4. ตรวจสอบเว็บเพจกับบราวเซอร์เป้าหมาย ดงั ท่กี ล่าวแล้ววา่ การทดสอบเวบ็ เพจในแตล่ ะบราวเซอรน์ นั้ จะแสดงผลทีแ่ ตกต่างกนั ไปซงึ่Dreamweaver จะมคี าส่งั ที่ใช้ตรวจสอบเว็บเพจกับบราวเซอร์ท่ีใชง้ านได้ จงึ ทาให้เรารวู้ ่าเวบ็ เพจสามารถใช้งานไดก้ ับบราวเซอร์ใดบา้ งซึ่งสามารถตรวจสอบได้โดยเปดิ เวบ็ เพจทต่ี ้องการตรวจสอบขึ้นมา แลว้ ทาตามขัน้ ตอนดังนี้ 1. คลิกแทบ็ Browser Compatibility 2. คลิกลูกศรแล้วเลือกคาสัง่ Check Browser Compatibility

จากนัน้ จะแสดงหน้าต่าง Results ข้นึ มา เราสามารถตรวจสอบรายละเอียดปัญหาและบราวเซอร์ที่เกดิ ปัญหา ตลอดจนตรวจสอบบรรทัดทเ่ี กิดปญั หาได้ นอกจากน้เี รายังสามารถเลอื กบราวเซอรเ์ ปา้ หมายที่ตอ้ งการตรวจสอบโดยเลอื กคาส่ัง Settings จากนน้ั เลอื กบราวเซอร์และร่นุ เปา้ หมาย แล้วคลิกปุ่ม OK 5. การหา Web Hosting สาหรับเวบ็ ไซต์ เมอื่ ตรวจสอบความถูกต้องของไฟล์เรียบร้อยแลว้ ขนั้ ตอนที่สาคญั กค็ ือการหา Web Hostingสาหรับแสดงเว็บไซต์ที่สรา้ งข้ึน ซ่ึง Web hosting มีอยดู่ ้วยกนั 2 แบบ คือ แบบ “ฟรี” และแบบ “ไม่ฟรี” - Web Hosting แบบไม่ฟรี เป็นการขอเช่าพ้นื ท่ีในการเกบ็ ข้อมลู ซ่ึงมีใหเ้ ลอื กหลากหลายขนาดขั้นตา่ ประมาณ 15 Mb ขน้ึ ไป โดยราคาข้นึ อยู่กบั ขนาดพ้ืนท่ีทเ่ี ช่าและบรกิ ารเสริมที่มี การเช่าพน้ื ทีน่ ั้นควรคานึงถงึ ขนาดของไฟล์ที่สรา้ งขนึ้ ทัง้ หมด (ซ่งึ อาจจะบวกเพ่ิมได)้ เช่น ถ้าขนาดของไฟล์ทั้งหมดมีขนาดไม่ถึง 15Mb แต่เลือกเช่าพนื้ ท่ขี นาด 50 Mb กอ็ าจทาให้เสยี เงินโดยเปลา่ ประโยชน์ เป็นต้น ดงั น้ันกอ่ นตดั สินใจเช่าพน้ื ที่ควรตรวจสอบและเปรยี บเทยี บข้อมลู ให้ดี - Web Hosting แบบฟรี สาหรับ Web Hosthing ประเภทนี้เหมาะสาหรบั มือใหม่ท่ีต้องการมีเวบ็ ไซตส์ ่วนตัว หรอื ผู้ท่ียงั ไม่ต้องการเสียคา่ ใช้จ่ายในเชา่ พื้นท่ี แตก่ ม็ ีข้อจากัดหลายอย่าง เชน่ ไม่มีอีเมลให้ใช้,อาจไม่มีบริการ FTP, ไม่สามารถใช้งานภาษาสคริปต์และฐานข้อมูลได้ หรือมักมีแบนเนอรป์ รากฏบนเว็บเพจเปน็ ต้น ซ่งึ Web Hosthing มีอยูม่ ากมายหลายราย เช่น www.tripod.lycos.com หรอืwww.000webhost.com - เพ่ือเป็นการทดสอบเวบ็ ไซตท์ ี่สร้างข้นึ ผู้เขียนแนะนาใหใ้ ช้ Web Hosting แบบฟรี เช่นwww.tripod.lycos.com หรือ www.thport.com เปน็ ต้น ในท่นี ผ้ี ู้เขยี นขอใชบ้ ริการเว็บไซต์www.thport.com โดยมีข้นั ตอนดงั น้ี 1. เปิดเว็บไซต์ www.thport.com 2. คลกิ ลิงก์ Sign Up 3. กรอกขอ้ มลู รายละเอียดตา่ ง ๆ 4. คลิกปุ่ม Register เพ่ือลงทะเบียนขอใช้บริการ5. พมิ พ์ตัวอักษรยนื ยันตามทป่ี รากฏในช่อง Typethe two words

5. คลกิ ปุ่ม Register 6. หลังจากนั้นระบบจะส่งอีเมลไปยังอีเมลแอดเดรสท่ีระบุไว้ เพือ่ ใหย้ ืนยนั การใชง้ าน 7. ล็อกอนิ เข้าสู่ระบบอีเมล 8. เปดิ อเี มลท่ีส่งจาก www.thport.com 9. คลิกลิงก์เพื่อยนื ยันการใชง้ าน 10. หลงั จากนน้ั หนา้ ต่างบราวเซอร์จะปรากฏขน้ึ มา 11. พมิ พต์ วั อกั ษรยนื ยนั ตามทปี่ รากฏในช่อง Type the two words 12. คลิกปุ่ม Register เป็นอนั เสร็จส้นิ ข้ันตอนยืนยนั การใช้งาน หลงั จากนั้นทางเว็บจะแสดงรายละเอยี ดเก่ยี วกับโฮสตง้ิ ท่ีเราจะต้องใช้อัพโหลดไฟลต์ ่าง ๆ ขนึ้ มา 6. วธิ กี ารอพั โหลดเว็บไซต์ สาหรบั การอัพโหลดไฟลต์ ่าง ๆ ของเราข้นึ ไปเกบ็ ไว้บนเซิร์ฟเวอร์น้ันสามารถทาได้โดยใช้Dreamweaver ซ่ึงมขี ้ันตอนดงั น้ี ขนั้ ตอนที่ 1 กาหนดค่าเว็บเซิรฟ์ เวอร์ 1. คลิกลิงก์ Manage Sites… ในหน้าต่างพาเนล Files 2. คลิกเลอื กไซต์ทตี่ ้องการอัพโหลด 3. คลิกป่มุ Edit… เพื่อแก้ไขข้อมูลของไซต์

จากน้ันหน้าตา่ ง Site Definition for… จะปรากฏขน้ึ มา4. เลือกรายการ Servers5. เลือกรายการเวบ็ เซิร์ฟเวอร์ท่ีตอ้ งการแก้ไข6. คลิกปุ่ม ดังภาพ7. คลิบแท็บ Basic8. เลือกรายการ FTP ทีช่ อ่ ง Connect using เพ่ืออัพโหลดผ่านโปรโตคอล FTP9. พมิ พช์ อื่ เว็บเซริ ์ฟเวอรท์ ี่ช่อง FTP Address10. พมิ พช์ ่ือผใู้ ช้งาน สาหรับเวบ็ เซริ ์ฟเวอรใ์ นช่อง Username

11. พิมพ์รหสั ผา่ น สาหรับเวบ็ เซิรฟ์ เวอร์ในชอ่ ง Password12. พมิ พช์ อ่ื ไดเรกทอรบี นเว็บเซิร์ฟเวอร์ที่จะอัพโหลดข้นึ ในชอ่ ง Root Directory13. คลิกปุ่ม Save14. คลกิ ปุม่ Save ในหน้าตา่ ง Site Setup for…

15. คลิกปุ่ม Done ในหนา้ ตา่ ง Manage Sites ขนั้ ตอนที่ 2 อัพโหลดไฟล์ต่าง ๆ หลงั จากกาหนดค่าของเวบ็ เซิร์ฟเวอรเ์ รยี บรอ้ ยแล้ว ขนั้ ตอนถดั ไปคอื การเชอ่ื มตอ่ เวบ็ เซิร์ฟเวอรแ์ ละอัพโหลดไฟลต์ ่าง ๆ ข้นึ ไปเก็บไว้ในเวบ็ เซริ ฟ์ เวอร์ 1. คลิกปุ่มดงั ภาพ ในหนา้ ตา่ งพาเนล File เพือ่ เชอื่ มต่อเว็บเซิร์ฟเวอร์ ในระหว่างท่เี ช่อื มต่อจะแสดงไดอะล็อกบอ็ กซ์การเช่ือมต่อดังรูป จากน้ันเมื่อเชอ่ื มตอ่ เว็บเซิร์ฟเวอร์ได้จะแสดงไอคอน (เมอ่ื คลิกปมุ่ (1.) จะปรากฏภาพรปู น้)ี ในหน้าตา่ งพาเนล Files 2. คลิกเลอื กรายการ Local view เพ่ืออัพโหลดไฟล์ 3. คลกิ เลือกไฟลห์ รอื โฟลเดอรท์ ี่ต้องการอัพโหลด (ถา้ ต้องการเลือกหลายไฟลใ์ ห้กดแปน้ Ctrl คา้ งไว้แล้วคลิกเลอื กไฟล์นน้ั ๆ จนครบ)

4. คลกิ ปมุ่จากนัน้ จะแสดงไดอะล็อกบ็อกซ์การอัพโหลดเม่ืออัพโหลดไฟล์เสร็จเรียบรอ้ ย เราสามารถตรวจสอบข้อมูลท่ีอพั โหลดไปบนเวบ็ เซิร์ฟเวอร์ไดโ้ ดยคลิกรายการ Remote view7. การจัดหาพน้ื ทีฝ่ ากเว็บไซต์บนเซิร์ฟเวอร์หลังจากไดจ้ ดโดเมนเนมแล้ว ขน้ั ตอนต่อไปจะต้องจดั หาพ้นื ทอี่ นิ เทอรเ์ นต็ หรอื เว็บโฮสต้ิง (WebHosting) ผูใ้ หบ้ รกิ ารเชา่ พ้นื ท่ีอินเทอร์เนต็ จะจดั เตรยี มเคร่ืองเซิร์ฟเวอร์ทีม่ ปี ระสิทธิภาพสูงไวแ้ บ่งใหบ้ ุคคลอนื่เชา่ โดยจะคิดค่าบริการเป็นรายปี หรือแบบอ่ืน ๆ ผใู้ หบ้ รกิ ารเว็บโฮสติ้งของไทยก็มีจานวนมาก เชน่Thaisite.net, Siaminterhost.com, Pora.com, NetDesignhost.com, ThaiEasyHost.com ฯลฯผใู้ หบ้ ริการพืน้ ที่โฮสต้งิ จะคดิ ค่าบริการเป็นรายปี ข้นึ อยู่กบั คุณภาพเครอื่ งเซริ ์ฟเวอร์และคณุ สมบตั ิดา้ นซอฟตแ์ วรท์ ใ่ี หบ้ ริการ ทง้ั น้ีขนึ้ อย่กู ับพ้ืนท่ี ถ้าพน้ื ทมี่ าก เช่น 200 Mb. 500 Mb. 1 Gb. และ 2 Gb.คา่ บรกิ ารกจ็ ะต้องสูงตามไปด้วย อยา่ งไรก็ตามสาหรับผเู้ ริ่มตน้ มเี วบ็ ไซต์ของตนเอง สามารถขอพ้นื ท่ีโฮสต์ฟรีซงึ่ มีอยู่มากมาย เช่นwww.thai.net www.tripod.lycos.comwww.web.thaicool.com www.codfreehost.comwww.thaitopsite.com www.freeserver.comwww.thaicity.com www.geocities.comwww.redthird.com www.topcities.com