การโปรแกรมเว็บเบื้องต้น

หน่วยที่ 1 ความรู้เบอื้ งตน้ เกย่ี วกับเวบ็ ไซต์ 1.1 ระบบอนิ เทอรเ์ น็ต อนิ เทอรเ์ น็ต (Internet) หมายถงึ เครอื ข่ายคอมพิวเตอรข์ นาดใหญ่ ท่ีมีการเช่ือมโยง หลาย เครอื ข่ายเขา้ ดว้ ยกนั เปรยี บเสมอื นเครอื ขา่ ยใยแมงมมุ ใหส้ ามารถเช่ือมโยงกนั เป็นเครอื ขา่ ยท่วั โลก โดยมีวตั ถปุ ระสงคเ์ พ่ือใชใ้ นการติดตอ่ สอ่ื สาร โดยภาษาท่ใี ช้ สอื่ สารผา่ นเครอื ข่ายอินเทอรเ์ น็ตคอื TCP/IP (Transmission Control Protocol/Internet Protocol) ปัจจบุ นั การประยกุ ตใ์ ชอ้ นิ เทอรเ์ นต็ มีอยู่ มากมาย อาทิ เช่น ไปรษณียอ์ เิ ลก็ ทรอนกิ ส์ กรอื อีเมล (E-mail) ระบบานทนา (Chat) การตดิ ตาม ข่าวสารการอ่านหรอื แสดงความคดิ เห็นในเว็บบอรด์ การสบื คน้ ขอ้ มลู หรอื การคน้ หา ขอ้ มลู การเย่ียมชมหรอื การซอื้ สอนคา้ ออนไลน์ การดาวนโ์ หลดโปรแกรม เกม เพลง ไฟลข์ อ้ มลู ตา่ งๆ บรกิ ารดหู นงั ฟังเพลง รายการบนั เทงิ ตา่ ง ๆ ออนไลน์ การเรยี นรู้ ออนไลน์ (E-Learning) การประชมุ ทาง ไกลผา่ นอนิ เทอรเ์ นต็ (Video Conference) โทรศพั ทผ์ า่ นอนิ เทอรเ์ นต็ (VolP) การอปั โหลดขอ้ มลู และการใชอ้ ินเทอรเ์ นต็ เป็น แหลง่ พบปะพดู คยุ เพ่ือแลกเปล่ยี น เรยี นรู้ สรา้ งเป็นเครอื ข่ายสงั คมออนไลน์ (Social Network) ซง่ึ พบวา่ ปัจจบุ นั เวบ็ ไซตท์ ่เี ก่ียวขอ้ งและไดร้ บั ความนิยมอยา่ งแพรห่ ลาย ท่วั โลกไดแ้ ก่ Facebook, Twitter และในปัจจบุ นั ระบบปฏบิ ตั กิ ารรุน่ ใหม่ ไดเ้ พ่มิ โปรแกรมประยกุ ต์ (Application) ประเภท Line ใหส้ ามารถใชง้ านผา่ นเคร่อื ง คอมพวิ เตอรไ์ ด้ และปัจจบุ นั ใชอ้ นิ เทอรเ์ น็ตผา่ นโทรศพั ทม์ อื ถือ (Mobile Internet) มี ปรมิ าณเพ่ิม มากขนึ้ เน่ืองจากเทคโนโลยีปัจจบุ นั สนบั สนนุ ใหผ้ ใู้ ชส้ ามารถเขา้ ถงึ เครอื ข่าย อินเทอรเ์ นต็ ผา่ นทางระบบโทรศพั ทม์ ือถือได้ จงั ทาใหผ้ ใู้ ชส้ ามารถเขา้ ถึง ระบบ อนิ เทอรเ์ น็ต การเลอื กใชบ้ รกิ ารตา่ ง ๆ ผา่ นอินเทอรเ์ น็ตมรปรมิ าณเพ่ิมขนึ้ อย่าง ตอ่ เน่ือง

1.2 ประวตั คิ วามเป็ นมาของอนิ เทอรเ์ น็ต อินเทอรเ์ นต็ ถือกาเนดิ ขนึ้ เม่อื ปี ค.ศ. 1969 (พ.ศ. 2512) โดยองคก์ รทาง หนว่ ยงานทหารของ สหรฐั อเมรกิ าร ช่ือวา่ U.S. Defense Department ได้ ทาการศกึ ษาและทดลองสรา้ งระบบเครอื ขา่ ย ขนึ้ เพ่ือใหม้ รี ะบบเครอื ข่ายเพ่ือ ตดิ ตอ่ ส่อื สารท่ีไมม่ ีวนั ตาย แมจ้ ะถกู โจมตจี ากสงคราม โดยเรยี ก โครงการวิจยั ทาง เครอื ขา่ ยนีว้ า่ ARPAnet (Advanced Research Projects Agney Network), จดุ เรม่ิ ตน้ ของ ARPAnet ไดท้ าการทดลองเช่ือมคอมพวิ เตอรจ์ าก 4 แหง่ โดยจดุ แรกจาก มหาวิทยาลยั แหง่ แคลฟิ อรเ์ นีย (UCLA) เช่ือมตอ่ กบั สถาบนั วจิ ยั สแตนฟอรด์ (SRI) ทงั้ สองแหง่ อยใู่ น รฐั แคลิฟอรเ์ นีย และเพ่มิ การ เช่ือมตอ่ เขา้ อีก 2 แหง่ คือ มหาวทิ ยาลยั ซานตาบารบ์ ารา (UCSB) ในรฐั แคลิฟอรเ์ นีย มหาวทิ ยาลยั แหง่ รฐั ยทู าห์ (UTAH) จากนนั้ ไดม้ ีการนามาพฒั นาเพ่ือ ใช้ ประโยชนใ์ นการสอื่ สารรบั สง่ จดหมายอิเลก็ ทรอนิกส์ (Electronic Mail :

E-Mail) รบั สง่ ขา่ วสาร แฟม้ เอกสารตา่ ง ๆ ในงานวิจยั ทางวชิ าการ ปี พ.ศ. 2523 คนท่วั ไปเรม่ิ สนใจอนิ เทอรเ์ น็ตมากขนึ้ จนกระทงั้ ปี พ.ศ. 2528 (ค.ศ. 1985) ระบบอนิ เทอรเ์ น็ตถือเป็นเทคโนโลยที ่ีสมบรู ณ์ พรอ้ มรองรบั การใชง้ านดา้ น การส่ือสารแพรข่ ยายในวงกวา้ ง โดยเฉพาะการใชง้ าน มีการซอื้ ขายผา่ นอินเทอรเ์ นต็ (E-Commerce) การรบั สง่ E-Mail, Chat,Telnet, FTP เป็นตน้ 1.3 ความหมายและความสาคัญของเวบ็ ไซต์ เวบ็ ไซต์ (Web Site) หมายถงึ แหลง่ รวบรวมขอ้ มลู ท่เี ช่ือมโยงกนั โดยหนา้ แตล่ ะหนา้ ของเอกสาร เว็บจะเก็บรวบรวมขอ้ มลู ขอ้ ความ รูปภาพ เสียง และสือ่ ประสมตา่ ง ๆ ใหแ้ สดงผ่านโปรแกรม Web Browser หรอื เปรยี บเสมือนแหลง่ รวบรวมขอ้ มลู เก่ียวกบั บรษิ ัท องคก์ ร หน่วยงาน หรอื ขอ้ มลู อ่ืน ๆ เป็นระบบหนง่ึ สามารถเช่ือมโยงขอ้ มลู กนั ได้ และสามารถแสดงผลขอ้ มลู ผา่ นโปรแกรม Web Browser เชน่ Internet Explorer, Mozilla Firefox, Google Chrome, Safari เป็นตน้ เว็บไซตแ์ ตล่ ะหนา้ หนา้ เรยี กวา่ เวบ็ เพจ (Web Page) ซง่ึ จะแสดงขอ้ มลู เพียงหนง่ึ หนา้ เม่ือเปิดโปรแกรมเวบ็ บราว

เซอรข์ นึ้ มา และเรยี กหนา้ แรกของเว็บไซตเ์ ม่อื เขา้ มาในระบบเวบ็ นนั้ หรอื หนา้ หลกั ของ เว็บไซตน์ นั้ วา่ โฮมเพจ (Home Page) ในปัจจบุ นั เวบ็ ไซตไ์ ดก้ ลายเป็นส่ือท่ีมี ความสาคญั ซงึ้ มีบทบาทอยา่ งมาก เน่ือง จากคณุ สมบตั ิท่ีสามารถนาเสนอเผยแพร่ ขอ้ มลู ขา่ วสารไดอ้ ยา่ งไรข้ ีดจากดั ทงั้ ในเร่ืองเวลาและระยะ ทาง สามารถเปิดเขา้ มาดู หรอื ใชบ้ รกิ ารไดต้ ลอด 24 ช่วั โมง ไมว่ า่ จะอยจู่ ะอยสู่ ว่ นใดของโลกก็ สามารถใชง้ าน เวบ็ ไซตผ์ า่ นระบบอนิ เทอรเ์ นต็ ได้ การใชส้ อ่ื เว็บไซตเ์ พ่ือเพ่ิมช่องทางในการส่อื สาร ขอ้ มลู การแลกเปลีย่ นขอ้ มลู การพดู คยุ สนทนาผา่ นระบบเว็บไซตท์ าใหก้ ารดาเนิน ชีวิตของคนในปัจจบุ นั มี ความทนั สมยั รวดเรว็ ท่วั ถงึ และนอกจากนนั้ ยงั ประหยดั คา่ ใชจ้ ่ายในการติดตอ่ ส่อื สารรูปแบบอ่ืน ๆ อีกดว้ 1.4 อนิ เทอรเ์ น็ตกบั การพัฒนาเวบ็ ไซต์ เน่ืองจากการเผยแพรเ่ อกสารเว็บไซตเ์ พ่ือใหบ้ คุ คลอ่ืน ๆ ไดพ้ บเหน็ นนั้ ตอ้ งอาศยั โปรแกรมเว็บ บราวเซอรแ์ ละการเช่ือมตอ่ อินเทอรเ์ นต็ เพ่ือสามารถดเู ว็บไซตน์ นั้ ได้ ดงั นนั้ อินเทอรเ์ นต็ จงึ มคี วาม สาคญั ต่อการพฒั นาเว็บไซตเ์ พราะเว็บไซตเ์ ม่ือ พฒั นาขนึ้ มาแลว้ ตอ้ งเผยแพรใ่ หผ้ ไู้ ดพ้ บเห็น ผทู้ ่จี ะ พฒั นาเว็บไซตจ์ งึ ควรศกึ ษาการใช้ งานอินเทอรเ์ น็ตและสิ่งตา่ งๆ ท่เี ก่ียวขอ้ งกบั อินเทอรเ์ น็ต ซงึ้ การนา เสนอขอ้ มลู บน เครอื ข่ายอินเทอรเ์ น็ตท่รี ูจ้ กั กนั ดีคอื เวลิ ดไ์ วดเ์ วบ็ (World Wide Web, WWW, W3; หรอื \"เวบ็ \") คอื อหลง่ พืน้ ท่ีท่ใี ชเ้ ก็บขอ้ มลู ข่าวสารโดยการเช่ือมตอ่ กนั ทางอินเทอรเ์ น็ต และเป็น บรกิ ารหน่งึ บนอนิ เทอรเ์ น็ตอีกดว้ ย สงิ่ ท่ีตอ้ งคานงึ สาหรบั อินเทอรเ์ นต็ ในการ พฒั นาเวบ็ ไซตม์ ี ดงั นี้ 1.เครอ่ื งคอมพิวเตอรท์ ่ใี ชง้ านมกี ารเช่ือมตอ่ อินเทอรเ์ นต็ เตรยี มความพรอ้ มในการ เผยแพรข่ อ้ มลู ขนึ้ สเู่ วบ็ ไซต์ 2. การออกแบบและพฒั นาระบบเว็บไซตส์ ิง่ ท่ตี อ้ ง คานงึ ถึงในการพฒั นาเวบ็ ไซตม์ ดี งั นี้

1) ความเรยี บง่าย (Simplicity) หนา้ เว็บเพจเวบ็ ไซตร์ ูปแบบและลกั ษณะท่ีเรยี บ ง่ายไมซ่ บั ซอ้ น และใชง้ านไดอ้ ย่างสะดวกตอ่ ผใู้ ช้ 2) ความสม่าเสมอ (Consistency) การใชร้ ูปแบบเดียวกนั ตลอดทงั้ เว็บไซต์ 3) ความเป็นเอกลกั ษณ์ (Uniqueness) การออกแบบเวบ็ ไซตท์ ่เี นน้ การสรา้ ง จดุ เดน่ หรอื เอกลกั ษณเ์ ฉพาะตวั ใหเ้ กิดขนึ้ กบั เว็บไซตน์ นั้ ๆ 4) เนือ้ หามีประโยชน์ (Usefulness) การออกแบบเนือ้ หาใหม้ ปี ระโยชน์ 5) ระบบ Navigation ท่ใี ชง้ านง่าย (Easy-use Navigation) การออกแบบท่ี สามารถทาใหผ้ ใู้ ชเ้ ขา้ ใจระบบไดง้ า่ ย และใชง้ านไดอ้ ย่างสะดวก 6) แสดงผลไดอ้ ยา่ งรวดเรว็ (Rapid Output) การจดั การไฟลร์ ูปภาพ สอื่ มลั ตมิ เี ดียอ่ืน ๆ ท่ีเหมาะสม ขนาดไมใ่ หญ่เกินไปเพราะจะทาใหก้ ารแสดงผลชา้ 7) มคี วามชดั เจน (Clearance) เนือ้ หาของเว็บไซตน์ นั้ จะตอ้ งแสดงถึง จดุ มงุ่ หมายและหนา้ ท่ีของเวบ็ ไซต์ อยา่ งชดั เจน 8) เป็นไปตามรูปแบบมาตรฐาน (Standardization) การออกแบบใหม้ ีลกั ษณะ เป็นสากลเพ่อื ท่ีจะใหผ้ ใู้ ชท้ ่วั ไป เขา้ ใจไดง้ า่ ย 9) แสดงผลไดด้ ีในสง่ิ แวดลอ้ มตา่ งกนั แมว้ า่ จะแสดงผลจากคอมพิวเตอรค์ นละ เคร่อื งกนั ระบบปฏบิ ตั ิการท่ี หลากหลายรุน่ 10) ระบบใชง้ านท่ถี กู ตอ้ งท่ีสดุ สามารถใชง้ านระบบไดจ้ รงิ ไมว่ า่ จะเป็นการ เช่ือมโยง การรองรบั ขอ้ มลู หรอื การแสดงผลเนือ้ หาตา่ ง ๆ 3. การเผยแพรเ่ วบ็ ไซตท์ ่สี รา้ ง คอื ตอ้ งมพี ืน้ ท่ีวา่ งในเคร่อื งคอมพิวเตอรท์ ่ที าหนา้ ท่ี เผยแพรไ่ ซต์ (เวบ็ เซิรฟ์ เวอร)์ ซง่ึ มี 3 วิธีในการติดตอ่ ขอพืน้ ท่ี ดงั นี้

1) ตดิ ตงั้ เวบ็ เซริ ฟ์ เวอรด์ ว้ ยตวั เอง 2) ขอเชา่ พืน้ ท่ใี นเว็บเซิรฟ์ เวอรข์ องผอู้ ่ืน 3) ขอพืน้ ท่ีฟรใี นเวบ็ เซริ ฟ์ เวอร์ 4. ระบบช่ือโดมเมนเนม (Domain Name) ช่ือของเว็บไซตท์ ่จี ะใหผ้ ใู้ ชส้ ามารถเขา้ ถึง เว็บไซตไ์ ด้ 5. โปรแกรมท่จี ะใชใ้ นการอพั เว็บไซตส์ เู่ คร่อื งเซริ ฟ์ เวอรเ์ พ่ือเผยแพรเ่ ว็บไซต์ 6. การแกไ้ ขปัญหาท่เี กิดขนึ้ เม่ือเผยแพรข่ อ้ มลู ผา่ นระบบอนิ เทอรเ์ นต็ เชน่ รูปภาพ หรอื ส่อื ไมแ่ สดงผลตาม ท่ีกาหนด 1.5 ระบบชือ่ โดเมนเนมของเวบ็ ไซต์ ระบบช่ือโดเมนเนม (Domain Name) คอื ช่ือของเว็บไซตท์ ่สี ามารถเป็นเจา้ ของ ซงึ้ จะตอ้ งไมซ่ า้ กบั ผู้ อ่ืน เพ่อื ใหผ้ อู้ ่ืนแสดงผลเว็บไซตข์ องเราตามตอ้ งการ \"ช่ือเวบ็ ไซต\"์ คือ ส่ิงแรกท่ีแสดงหรอื ประกาศความมี ตวั ตนบนอินเทอรเ์ น็ตใหค้ นท่วั ไปไดร้ ูจ้ กั สามารถมไี ดช้ ่ือเดยี วในโลกเทา่ นนั้ เช่น www.google.com IP Address ย่อมาจาก Internet Protocol Address คือหมายเลขประจาเครอ่ื ง คอมพวิ เตอรแ์ ต่ละเคร่อื งในระบบ เครอื ข่ายท่ีใชโ้ ปรโตคอลแบบ ICP/IP เปรยี บเสมือน บา้ นเลขท่ีในระบบเครอื ขา่ ย จะสามารถทราบตาแหนง่ ของ เคร่อื งท่ีตอ้ งการสง่ ขอ้ มลู ไป ซง่ึ ประกอบดว้ ยตงั เลข 4 ชดุ ซงึ้ ถกู จดั เป็นตวั เลขชดุ หนง่ึ ขนาด 32 บติ ใน 1 ชดุ นีมั ีตวี เลขถกู แบง่ เป็น 4 สว่ น สว่ นละ 8 บติ เท่า ๆ กนั ดงั นนั้ ตวั เลขแตล่ ะสว่ นนีจ้ งึ มคี า่ ไดต้ งั้ แต่ 0 จนถึง 28-1=255 เทา่ นนั้ เช่น 192.10.1.101 เป็นตน้ แบง่ ออกเป็น 2 สว่ น คือ

ส่วนทห่ี น่ึง เป็นเลขของเคร่อื งเครอื ขา่ ย (Network Number) ส่วนทส่ี อง เป็นหมายเลขคอมพวิ เตอรท์ ่ีอยใู่ นเครอื ข่าย (Host Number) IP Adress แบง่ ออกเป็น 5 Class ไดแ้ ก่ คลาส A เรม่ิ ตงั้ แต่ 1.0.0.1 ถึง 127.255.255.254 คลาส B เรม่ิ ตงั้ แต่ 128.0.0.1 ถึง 191.255.255.254 คลาส C เรม่ิ ตงั้ แต่ 192.0.1.1 ถึง 223.255.254.254 คลาส D เรม่ิ ตงั้ แต่ 224.0.0.0 ถึง 239.255.255.255 ใชส้ าหรับงาน Multicast คลาส E เรม่ิ ตงั้ แต่ 240.0.0.0 ถงึ 255.255.255.254 ถกู สารองไว้ ยังไม่มี การใช้งาน สาหรบั ไอพใี นชว่ ง 127.0.0.0 ถงึ 127.025.255.255 ใชส้ าหรับการทดสอบ ระบบ 1.5.1 โดเมนเนมระดับบนสุด (Top-Level Domains) แบง่ ออกเป็ น 2 ประเภท คือ 1. Organization Domains โดเมนเนมระดบั สงู สดุ ซง่ึ แสดงถงึ องคก์ ารหรอื หนว่ ยงาน

2. Geographical Domains โดเมนเนมระดบั สงู สดุ ซง่ึ แบง่ ตามลกั ษณะภมู ศิ าสตร์ หรอื ประเทศ 1.5.2 โดเมนเนมในประเทศไทย 1.6 องคป์ ระกอบของเว็บไซต์

1.6.1 ช่ือเว็บไซต์ การจดทะเบียนโดเมนเนม (Domain Name) คอื ช่ือและ ท่อี ยขู่ องเว็บไซตใ์ นการเรยี ก ขอ้ มลู เวบ็ ไศตม์ าแสดงผล ซง่ึ จะมไี มซ่ า้ กนั ในโลก 1.6.2 การออบแบบและพัฒนา (Design & Development) การออกแบบและการพฒั นาเว็บไซตม์ ีวตั ถุ ประสงคท์ ่แี ตกตา่ ง กนั แลว้ แตอ่ งคก์ รซง่ึ การออกแบบท่ีดีท่จี ะส่อื ถงึ ความเป็นเอกลกั ษณข์ ององคก์ ร 1.6.3 การจดั เนือ้ หา (Content) เนือ้ หาของเวบ็ ไซต์ ถือวา่ เป็นส่ิงสาคญั ท่สี ดุ ในองคป์ ระกอบของเว็บไซต์ เพราะคอื สง่ิ ท่ีผใู้ ชร้ ะบบตอ้ งการคน้ หาหรอื เรยี กดู ขอ้ มลู ส่งิ สาคญั คือการจดั การเนือ้ หาท่ีถกู ตอ้ งชดั เจน 1.6.4 พนื้ ทข่ี องระบบเวบ็ ไซต์ (Hosting) พืน้ ท่ีของระบบเวบ็ ไซต์ คือ พืน้ ท่จี ดั วง่ และตดิ ตงั้ เวบ็ ไซตใ์ นเคร่อื ง แมข่ า่ ยท่ีสามารถเผยแพรใ่ หผ้ อู้ ่ืนได้ เผ็น องคป์ ระกอบท่ีสาคญั มากไมน่ อ้ ยกวา่ เนือ้ หาของเว็บไซต์ (Content) 1.6.5 การประชาสมั พันธเ์ ว็บไซต์ (Promotion) เม่ือไดม้ กี ารพฒั นา ระบบเสรจ็ เรยี บรอ้ ยแลว้ จะตอ้ งมีการ ประชาสมั พนั ธเ์ ว็บไซตเ์ พอื่ ใหเ้ ข้าถงึ กลุ่มเป้าหมายมากทส่ี ุด โดยอาศัยวิธีการต่าง ๆ ผ่านช่องทางอนิ เทอรเ์ น็ต เช่น Search Engine Submission Registration Web Directory, Mailing List, Banner Link Exchange เป็ นต้น 1.7 โปรแกรมพัฒนาเวบ็ ไซตท์ น่ี ิยมใช้ในปัจจุบนั 1.7.1 โปรแกรมในกลุม่ Text Editorหมายถึง โปรแกรมท่เี นน้ ในการใช้ ภาษา HTML เป็นหลกั ผพู้ ฒั นา โปรแกรมจะตอั งมคี วามเขา้ ใจในการใชง้ าน ศกึ ษา รูปแบบคาส่งั ในการทางานของภาษาท่ใี ช้ เช่น ภาษา PHP, HTML, Java Script เป็น ตน้

1.7.2 โปรแกรมในกลุม่ WYSIWYG (What You See Is What You Get) โปรแกรมท่ีสามารถ มองเห็นอยา่ งไรในขณะกาลงั สรา้ งก็จะไดผ้ ลของเว็บอยา่ งนนั้ ผใู้ ชง้ านไมจ่ าเป็นตอ้ งมีความรู้ เรอ่ื งภาษา html มากก็ได้ เพียงออกแบบวางแผนไดด้ ี ก็สามารถสรา้ งเว็บท่ีสวยงามไดง้ า่ ย โปรแกรมในกลมุ่ นีไ้ ดแ้ ก่ MS FrontPage, Dreamweaver, Namo, WebEditor, Flash โปรแกรมเหล่านีม้ ีข้อดคี อื สามารถ พฒั นาไดง้ า่ ย เพราะมเี ครอ่ื งมือใหเ้ ลอื กใช้ ไดอ้ ยา่ งหลากหลาย สามารถแกไ้ ขปัญหา จากการแสดงผลไดอ้ ยา่ งรวดเรว็ 1.7.3 ระบบจดั การเนือ้ หาเวบ็ ( Web Content Management System) เป็นระบบการจดั การ เนือ้ หา (CMS) ชนิดหนง่ึ ถกู พฒั นาขนึ้ ดว้ ยภาษาโปรแกรม เพ่อื ใชเ้ ป็นเวบ็ แอปพลิเคช่นั (web Application) ในการจดั เนือ้ หาของเว็บไซตใ์ หง้ า่ ยตอ่ การจดั การ การทางานของระบบการจดั การเนือ้ หาเว็บไซตส์ ว่ นใหญ่จะประกอบดว้ ย

โปรแกรมสาหรบั สรา้ งหนา้ เวบ็ กลว้ ยสครปิ ตท์ ่ที างานบนฝ่ังเวบ็ เซิรฟ์ เวอร์ และ โปรแกรมท่ีใชจ้ ดั เก็บขอ้ มลู เชน่ โปรแกรมฐานขอ้ มลู เพ่ือพฒั นาระบบสามารถ พฒั นาไดอ้ ยา่ งงา่ ยดาย โดยแทบไมต่ อ้ งมคี วามรูใ้ นดา้ นการเขียนโปรแกรม ก็สามารถ สรา้ งเว็บไซตไ์ ด้ และมโี ปรแกรมประยกุ ต์ แบบพรอ้ มใชง้ านอยภู่ ายในมากมาย เช่น ระบบจดั การบทความและข่าวสาร (News and Story) ระบบจดั การบทวิจารณ์ (download) ระบบจดั การปา้ ยโฆษณา (Banner) เป็นตน้ หน่วยที่ 2 การวเิ คราะหแ์ ละออกแบบโครงสร้างเวบ็ ไซต์ 2.1 ความสาคัญของการวเิ คราะหแ์ ละออกแบบโครงสร้าง เว็บไซต์ การวิเคราะหแ์ ละออกแบบโครงสรา้ งเว็บไซตน์ นั้ มีความสาคญั ในการพฒั นาระบบ เวบ็ ไซตเ์ ป็นอยา่ งมาก เน่ืองจากในการพฒั นาระบบใดๆ ก็ตาม จะตอ้ งมกี ารวางแผน งานระบบ การศกึ ษาขอ้ มลู การศกึ ษาความเป็นไปได้ ของระบบ วา่ การพฒั นาระบบ นนั้ ๆ มีความเป็นไปไดม้ ากนอ้ ยเพียงใด มีความคมุ้ คา่ กบั ระบบท่ีจะพฒั นาขนึ้ มาใหม่ หรอื ไม่ หรอื พฒั นาขนึ้ มาเพ่ือทดแทนระบบเดมิ หรอื ไม่ มีความตรงกบั ความตอ้ งการ ของผใู้ ช้ ตรงกบั วตั ถปุ ระสงค์ หรอื ความตอ้ งการของหน่วยงานของระบบท่จี ะพฒั นา มากนอ้ ยเพียงใด 2.2 ลักษณะโครงสร้างของเว็บไซต์ ในการออกแบบเว็บไซตท์ ่ดี คี วรจะตอ้ งวางโครงสรา้ งใหส้ มดลุ มีการออกแบบ โครงสรา้ งเนือ้ หา โดยตอ้ งวางแผนโครงสรา้ งใหด้ ี มีการเช่ือมตอ่ สมั พนั ธก์ นั ระหวา่ ง รายการ (Menu) หรอื โฮมเพจ (Home Page) กบั เนือ้ หาอ่นื ๆ รวมถงึ การเช่ือมโยงไปสู่ ภาพส่ือมลั ตมิ ีเดียและขอ้ ความตา่ งๆ ไดอ้ ย่างเหมาะสมเพ่ือปอ้ งกนั ไมใ่ หผ้ ใู้ ชง้ าน

ระบบหลงทางขณะเขา้ สเู่ นือ้ หาตา่ งๆ ในเวบ็ ไซต์ จากหลกั การนีแ้ สดงวา่ โครงสรา้ ง ของเว็บไซตเ์ ป็นสว่ นท่ีควรใหค้ วามสาคญั 2.2.1 โครงสร้างของเว็บไซตแ์ บบเรียงตามลาดับ (Sequential Structure) โครงสรา้ งของเว็บไซตแ์ บบ เรยี งตามลาดบั เป็นโครงสรา้ งของเว็บไซตแ์ บบธรรมดาท่ี ใชก้ นั มากท่ีสดุ เน่ืองจากง่ายตอ่ การจดั ระบบขอ้ มลู ขอ้ มลู ท่นี ยิ มจดั ดว้ ยโครงสรา้ ง แบบนีม้ ีเป็นขอ้ มลู ท่ีมีลกั ษณะเป็นเร่อื งราวตามลาดบั ไมซ่ บั ซอ้ นมาก เหมาะกบั เว็บไซตท์ ่มี ีขนาดเล็ก เนือ้ หาไมซ่ บั ซอ้ น ใชก้ ารลิงค์ (Link) ไปทีละหนา้ ทิศทางของ การเขา้ สเู่ นือ้ หา (Navigation) ภายในเวบ็ จะเป็นการดาเนินเรอ่ื งท่ีตอ่ เน่ืองในลกั ษณะ ของเสน้ ตรง โดยมี ป่มุ เดนิ หนา้ -ถอยหลงั เป็นเคร่อื งมอื หลกั ในการกาหนดทิศทาง ขอ้ เสียของโครงสรา้ งระบบนีค้ ือ ผใู้ ชไ้ มส่ ามารถกาหนดทิศทางการเขา้ สู่ เนือ้ หาของ ตนเองได้ ทาใหเ้ สยี เวลาในการเขา้ สเู่ นือ้ หาเพราะตอ้ งคลกิ ตอ่ เน่ืองแบบเรยี งลาดบั 2.2.2 โครงสร้างของเวบ็ ไซตแ์ บบเรียงลาดบั ขัน้ (Hierarchical Structure) โครงสรา้ งของเว็บไซตแ์ บบ เรยี งลาดบั ขนั้ เป็นโครงสรา้ งท่มี คี วามเหมาะสมกบั ขอ้ มลู ท่ี มคี วามซบั ซอ้ นโดยแบง่ เนือ้ หาออกเป็นสว่ นตา่ ง ๆ และมีรายละเอียดย่อย ๆ ในแตล่ ะ สว่ นลดหล่นั กนั มาในลกั ษณะเดียวกบั แผนภมู อิ งคก์ ร จงึ งา่ ยตอ่ การทาความเขา้ ใจ กบั โครงสรา้ งของเนือ้ หา ลกั ษณะเดน่ คอื การมีจดุ เรม่ิ ตน้ ท่ีจดุ รวมจดุ เดยี ว

2.2.3 โครงสร้างของเว็บไซตแ์ บบตาราง (Grid Structure) โครงสรา้ งรูปแบบตารางนีม้ ีความซบั ซอ้ นกว่า รูปแบบท่ผี า่ นมา การออกแบบเนน้ เพ่มิ ความยดื หยนุ่ ใหแ้ ก่การเขา้ สเู่ นือ้ หาของผใู้ ช้ โดยเพ่มิ การเช่ือมโยง ซง่ึ กนั และกนั ระหวา่ งเนือ้ หาแตล่ ะสว่ นเหมาะสาหรบั การแสดงใหเ้ หน็ ความสมั พนั ธก์ นั ของเนือ้ หา โดยเพ่มิ การเช่ือมโยง กนั และกนั ระหวา่ งเนือ้ หาแตล่ ะสว่ นเหมาะสาหรบั การแสดงให้ เหน็ ความสาพนั ธก์ นั ของเนือ้ หา การเขา้ สเู่ นือ้ หาของ ผใู้ ชจ้ ะไมเ่ ป็นลกั ษณะเชิง เสน้ ตรง เน่ืองจากผใู้ ชส้ ามารถเปลีย่ นทศิ ทางการเขา้ สเู่ นือ้ หาของตนเองได้ เช่น การศกึ ษาประวตั คิ อมพวิ เตอรแ์ ตล่ ะยคุ ยคุ ท่ี 1 (com 1) ยคุ ท่ี 2 (com 2) ยคุ ท่ี 3 (com 3) โดยในแตล่ ะยคุ นนั้ แบง่ เป็น หวั ขอ้ ย่อยเหมือนกนั คือ หลอดสญุ ญากาศ (Vacuum tube) ทรานซิสเตอร์ (Transistor) และ วงจรไอซี (Integrated Circuit) ในขณะท่ีผใู้ ชก้ าลงั ศกึ ษาขอ้ มลู คอมพวิ เตอรย์ คุ ท่ี 1 ผใู้ ชอ้ าจศกึ ษาหวั ขอ้ ตอ่ ไปกไ็ ด้ หรอื จะขา้ มไปดหู วั ขอ้ ประวตั คิ อมพิวเตอรย์ คุ ท่ี 2 ก่อนก็ได้ เพ่ือเปรยี บเทียบลกั ษณะ ขอ้ มลู ท่ีเกิดขนึ้ ในแตล่ ะยคุ

2.2.4 โครงสร้างของเวบ็ ไซตแ์ บบใยแมงมุม (Web Structure) โครงสรา้ งเว็บไซตแ์ บบใยแมงมมุ จะมีความ ยดื หยนุ่ มากท่ีสดุ โดยเนือ้ หาทกุ หนา้ ใน เวบ็ สามารถจะเช่ือมโยงไปถงึ กนั ไดห้ มด จงึ เป็นรูปแบบการเขา้ สเู่ นือ้ หาท่ีเป็นอสิ ระ ซง่ึ ผใู้ ชส้ ามารถกาหนดวธิ ีการเขา้ สเู่ นือ้ หาไดด้ ว้ ยตนเอง สามารถคลิกเพ่ือเช่ือมโยง เนือ้ หาแตล่ ะหนา้ โดยอาศยั การโยงขอ้ ความท่มี มี โนทศั น์ (Concept) เหมอื นกนั แตล่ ะ หนา้ จะมีเมนเู พ่ือเช่ือมโยงหนา้ ตา่ ง ๆ ของเว็บไซต์ โครงสรา้ งลกั ษณะนีจ้ ดั เป็นรูปแบบ ท่ไี มม่ โี ครงสรา้ งท่ี แนน่ อนตายตวั (Unstructured) นอกจากนีก้ ารเช่ือมโยงไม่ไดจ้ ากดั เฉพาะเนือ้ หาภายในเว็บนนั้ ๆ แตส่ ามารถเช่ือมโยงออกไปสเู่ นือ้ หาจากเวบ็ ภายนอก เพ่มิ เตมิ ไดท้ าใหก้ ารเขา้ สเู่ นือ้ หามีความหลากหลาย และสะดวกต่อผใู้ ชง้ าน

2.3 ขัน้ ตอนการออกแบบเวบ็ ไซต์ ในการพฒั นาเวบ็ ไซตน์ นั้ จะตอ้ งมีการออกแบบแตล่ ะเพจเพ่ือใหผ้ พู้ ฒั นา ประหยดั เวลาในการพฒั นาระบบ เพราะทา ใหม้ องเหน็ ภาพและองคป์ ระกอบของ ระบบนนั้ ไดอ้ ย่างครบถว้ นตามความตอ้ งการของผใู้ ชง้ าน หลงั จากท่ีไดม้ ีการ ออกแบบระบบสมบรู ณแ์ ลว้ ผพู้ ฒั นาระบบจาเป็นตอ้ งศกึ ษาขนั้ ตอนในการพฒั นา ระบบเวบ็ ไซต์ ตามขนั้ ตอน ตอ่ ไปนี้ ขัน้ ตอนท่ี 1 การกาหนดโครงสร้างของเว็บไซต์ การสรา้ งเว็บไซตค์ วรเรม่ิ จากการสรา้ งแผนผงั ของ เวบ็ ไซตก์ อ่ น หรอื ท่ีเรยี กวา่ Site Map เพ่ือใหผ้ พู้ ฒั นาระบบสามารถกาหนดโครงรา่ งแผนการจดั เก็บขอ้ มลู ของระบบ เว็บไซตใ์ นแต่ละหนา้ วา่ จะเก็บขอ้ มลู อะไรบา้ งเพ่ือเช่ือมโยง ขอ้ มลู กนั เป็นเวบ็ ไซตใ์ น ระบบนนั้ โดยสามารถออกแบบเนือ้ หาในแตล่ ะเว็บเพจได้

ขั้นตอนที่ 2 กาหนดการเช่ือโยงระหว่างเว็บเพจ การกาหนดการเช่ือมโยงระหวา่ งเวบ็ เพจ เพ่ือกาหนด โครงสรา้ งในระบบเวบ็ ไซตว์ า่ ใน แต่ละหนา้ มีการเช่ือมโยงขอ้ มลู ถงึ กนั และกนั ได้ เพ่ือใหเ้ ว็บเพจแต่ละหนา้ สมั พนั ธก์ นั เป็นระบบเดียวกนั โดยสามารถออกแบบการเช่ือมโยงระหวา่ งเว็บเพจได้ ขั้นตอนท่ี 3 การออกแบบเวบ็ เพจแตล่ ะหน้า การออกแบบหนา้ เวบ็ เพจแตล่ ะหนา้ นนั้ สามารถออกแบบรูป แบบการจดั วางเนือ้ หา ของเว็บเพจแตล่ ะ หนา้ เพ่อื ใหก้ ารพฒั นาระบบสามารถพฒั นาไดต้ รงตามท่ีผใู้ ช้ กาหนด โดยผอู้ อกแบบจะตอ้ งคานงึ ถงึ สว่ นประกอบตา่ ง ๆ ท่ีจะใหป้ รากฏในหนง่ึ หนา้ เว็บเพจ โดยท่วั ไปหนา้ เวบ็ เพจจะ แบง่ เป็นสว่ นหลกั ๆ ดงั นี้ 1.สว่ นหวั (Header) นยิ มกาหนดไวต้ อนบนสดุ ของเนือ้ หา เป็นบรเิ วณท่ีสาคญั ท่สี ดุ เน่ืองจากเป็นสว่ นท่ีผใู้ ชจ้ ะมองเหน็ กอ่ นบรเิ วณอ่ืน ๆ สว่ นใหญ่นยิ มใชว้ างโลโก้ ช่ือเวบ็ ไซต์ ปา้ ยโฆษณา ลงิ คส์ าหรบั การติดตอ่ ท่ีสาคญั เมนสู ว่ นบน และระบบนาทาง ตา่ ง ๆ เป็นตน้ 2.สว่ นของเนือ้ หา (Body) อย่ตู รงกลางหนา้ ใชแ้ สดงเนือ้ หาของเวบ็ เพจ ซง่ึ ประกอบดว้ ยรูปภาพ ขอ้ ความ ตารางขอ้ มลู วดิ โี อมลั ตมิ ีเดยี บางครงั้ อาจกาหนดใหม้ ี เมนหู ลกั หรอื เมนเู ฉพาะกลมุ่ ใหม้ าอยใู่ นสว่ นนี้ โดยมกั จะวางไวด้ า้ นซา้ ยหรอื ดา้ นขวา หรอื สามารถวางไวท้ งั้ สองดา้ นก็ไดข้ นึ้ อยกู่ บั ผอู้ อกแบบระบบวา่ ตอ้ งการ ใหแ้ สดง รูปแบบหนา้ เวบ็ ใด 3. สว่ นทา้ ย (Footer) อยดู่ า้ นลา่ งสดุ ของเนือ้ หา สว่ นใหญ่จะนยิ มใชว้ างระบบนา ทางแบบท่ใี ชว้ างเป็น ขอ้ ความงา่ ย ๆ นอกจากนีย้ งั สามารถใสช่ ่ือ ขอ้ ความแสดง ลิขสทิ ธิ์ และอีเมลของผพู้ ฒั นาเว็บไซตใ์ นระบบได้

4. แถบขา้ ง (Side Bar) ปัจจบุ นั นิยมออกแบบดา้ นขา้ งของหนา้ เว็บเพจเพ่ือให้ น่าสนใจใชส้ าหรบั วางปา้ ยแบนเนอร์ หรอื ลงิ คข์ อ้ มลู ท่เี ก่ียวขอ้ งกบั ระบบภายนอกได้ ซง่ึ ในการวางโครงรา่ งของเวบ็ เพจในแตล่ ะหนา้ จะทาใหผ้ พู้ ฒั นา สามารถพฒั นา ระบบไดอ้ ย่างชดั เจนตรงเปา้ หมายท่ไี ดก้ าหนดไว้ ขัน้ ตอนท่ี 4 การสร้างเว็บเพจแตล่ ะหน้า ในการสรา้ งเวบ็ เพจแตล่ ะหนา้ นนั้ จะสรา้ งจากแบบท่ไี ดอ้ อกแบบ ในแตล่ ะหนา้ มา สรา้ งโดยใชภ้ าษา html หรอื อาจใชโ้ ปรแกรมสาเรจ็ รูป เช่น FrontPage , Macromedia Dreamweaver หรอื โปรแกรมสาเรจ็ รูปอ่ืน ๆ ตามความถนดั เพ่ือใหไ้ ด้ เวบ็ เพจตามท่กี าหนดแลว้ ทาการเช่ือมโยง ขอ้ มลู ตามรูปแบบการเช่ือมโยงขอ้ มลู ท่ีอก แบบไว้ สาหรบั ในสว่ นนีไ้ ดส้ รา้ งเว็บเพจแตล่ ะหนา้ โดยใชโ้ ปรแกรม Macromedia Dreamweaver CS6

ขัน้ ตอนท่ี 5 การลงทะเบยี นขอพนื้ ทเี่ วบ็ ไซต์ เม่ือพฒั นาระบบเว็บไซตเ์ สรจ็ เรยี บรอ้ ยแลว้ ผพู้ ฒั นา จะตอ้ งทาการเผยแพรเ่ ว็บไซต์ ท่ี สรา้ งเสรจ็ แลว้ เขา้ สรู่ ะบบเครอื ขา่ ยอนิ เทอรเ์ น็ต เพ่ือใหบ้ คุ คลอ่นื เขา้ มาชม เวบ็ ไซตท์ ่ี พฒั นานนั้ ได้ วิธีการคอื นาเว็บไซตส์ รา้ งขนึ้ ไปไวบ้ นพืน้ ท่ีท่ใี หบ้ รกิ าร (Web Hosting) ซง่ึ มีพนื้ ท่ี ท่ีใหบ้ รกิ ารฟรแี ละแบบ ท่ีตอ้ งเสียค่าบรกิ าร ขนึ้ อยกู่ บั ผพู้ ฒั นาเวบ็ ไซตว์ า่ ตอ้ งการพืน้ ท่ี แสดงผลเว็บไซต์ แบบใดโดจะตอ้ งลงทะเบียนขอพืน้ ท่ีเพ่ือเตรยี ม ความ พรอ้ มในการ อพั โหลดขอ้ มลู เขา้ สรู่ ะบบอินเทอรเ์ นต็ ตอ่ ไป ขั้นตอนที่ 6 การอปั โหลดเวบ็ ไซต์ หลงั จากสรา้ งเวบ็ และลงทะเบียนขอพนื้ ท่สี าหรบั ฝากเว็บไซตแ์ ลว้ ใหใ้ ชโ้ ปรแกรม สาหรบั อปั โหลด (Upload) ขอ้ มลู เชน่ โปรแกรม Cute FTP หรอื SSH Secure File Transfer เพ่ืออพั โหลดขอ้ มลู จากเครอ่ื งขนึ้ สเู่ คร่อื งเวบ็ เซริ ฟ์ เวอรใ์ หค้ นท่วั โลกสามารถ เขา้ ชมเว็บไซตผ์ า่ นทางระบบ เครอื ข่ายอนิ เทอรเ์ นต็ 2.4 หลักการจดั เตรียมข้อมูลและจดั เกบ็ ไฟล์ 2.4.1 การจัดเตรียมข้อมูลส่วนของเนือ้ หา

ในการจดั เตรยี มเนือ้ หาสาหรบั แสดงผลหนา้ เวบ็ ไซตถ์ ือเป็น จดุ เรม่ิ ตน้ และหวั ใจ สาคญั ในการสรา้ งเว็บไซต์ เน่ืองจากสว่ นของเนือ้ หาเป็นสว่ นท่ีทาใหผ้ ใู้ ชง้ านทราบถงึ จดุ ประสงคใ์ นการพฒั นาระบบเวบ็ ไซต์ และอยากท่ีจะกลบั เขา้ มาเย่ียมชมเว็บไซต์ บอ่ ย ๆ โดยมีขนั้ ตอนการเตรยี ม ขอ้ มลู ดงั นี้ 1.ขอ้ มลู ประเภทตวั อกั ษร เชน่ เนือ้ หาขา่ ว รายละเอียดสินคา้ แตล่ ะชิน้ เพ่อื ความสะดวกรวดเรว็ ในการใสร่ ายละเอยี ดบนหนา้ เว็บไซต์ อาจพมิ พข์ อ้ มลู ตวั อกั ษร เก็บไวใ้ นโปรแกรม Notepad Microsoft Word กอ่ นท่ีจะทาขอ้ มลู เขา้ สรู่ ะบบเว็บไซต์ 2. ขอ้ มลู ประเภทรูปภาพประกอบ ไฟลร์ ูปภาพท่ีใชอ้ ยใู่ นปัจจบุ นั มีหลาย ประเภทแต่ไฟลท์ ่นี ยิ มใชก้ บั การพฒั นาเวบ็ เพจ มี 3 ประเภท คอื 1) ไฟลป์ ระเภท GIF (Graphics Interchange Format) เป็นไฟลภ์ าพท่ีมี ขนาดเลก็ คณุ ภาพต่า แสดงสีได้ 256 สี เน่ืองจากถกู บีบอดั ขอ้ มลู ใหม้ ขี นาดเล็ก แต่ เป็นท่นี ยิ มสาหรบั ผเู้ ขียนเว็บเพจ เป็นอยา่ งมาก เพราะสามารถ ทาเป็น ภาพเคลือ่ นไหว (Animation) และกาหนดใหแ้ สดงภาพแบบโปรง่ แสงมองทะลไุ ป ดา้ นหลงั ได้ ไฟลป์ ระเภทนี้ สว่ นใหญ่จะเป็นรูปวาด ภาพการต์ นู ภาพเคล่อื นไหว รูป Icon , Emotion ปา้ ยโฆษณาแบนเนอร์ เป็นตน้ 2) ไฟลป์ ระเภท JPEG หรอื JPG (Joint Photographic Expert Group) เป็นไฟลร์ ูปภาพท่ีแสดงสีได้ 16.7 ลา้ นสี มคี วามคมชดั มาก ไฟลป์ ระเภทนีเ้ หมาะกบั ภาพท่ีตอ้ งการความละเอียดสงู เช่น ภาพถา่ ยจากกลอ้ ง ดจิ ติ อล หรอื ภาพท่ีไดจ้ าก การแสกน ภาพท่ีแสดงการไลเ่ ฉดสี เป็นตน้ 3) ไฟลป์ ระเภท PNG (Portable Network Graphic) เป็นไฟลภ์ าพท่ี นามาใชแ้ ทนท่ไี ฟลป์ ระเภท GIF ท่เี ป็นไฟลข์ นาดเลก็ เม่อื ขยายภาพทาใหภ้ าพแตก เป็นจดุ ๆ เน่ืองจากไฟลป์ ระเภท PNG สามารถแสดงภาพไดเ้ รว็ กวา่ แตไ่ มแ่ พรห่ ลาย มากนกั เน่ืองจากไมส่ ามารถทาเป็นภาพเคล่อื นไหวได้ และมขี อ้ เสียท่ีไมส่ ามารถใชก้ บั

เวบ็ บราวเซอรร์ ุน่ เก่าได้ ไฟลป์ ระเภท PNG-8 เป็นรูปแบบท่ใี ชส้ ีได้ 256 สี และมี คณุ สมบตั ิคลา้ ยกบั ไฟล์ GIF จงึ เหมาะสาหรบั ใชท้ าภาพท่ีมสี ีเรยี บ ๆ เช่น ภาพโลโก้ การต์ นู สามารถกาหนดสีพืน้ หลงั ใหโ้ ปรง่ แสงได้ สว่ นไฟล์ ประเภท PNG-24 เป็น รูปแบบท่ใี ชส้ ไี ด้ 16.7 ลา้ นสีเช่นเดียวกบั ไฟล์ JPG เหมาะสาหรบั ภาพถา่ ย ไมว่ า่ จะ เป็นภาพถ่ายจากกลอ้ งดจิ ิตอล การแสกนจากรูปถ่ายท่ีเป็นกระดาษหรกิ ารสรา้ ง รูปภาพจากโปรมแกรม สรา้ งรูปภาพต่าง ๆ โดยไฟลภ์ าพนามสกลุ (Type) เป็น .GIF , .JPEG หรอื .PNG และควรยอ่ ภาพใหม้ ีขนาด (Size) ไมเ่ กิน 500 KB เพ่ือใหภ้ าพมี ขนาดเลก็ พอเหมาะกบั การแสดงผลบนหนา้ เวบ็ ไซต์ ไมท่ าใหเ้ วบ็ ไซตโ์ หลดขอ้ มลู ชา้ ดงั นนั้ ในการจดั เตรยี มไฟลป์ ระเภทรูปภาพนนั้ ควรจะคานงึ ถึงความเหมาะสมของ รูปภาพ ขนาดและการจดั เก็บ รูปภาพควรรวบรวมไวใ้ นไฟลเ์ ดียวกนั เช่น Images, Picture เพ่ือใหง้ ่ายในการเรยี กใชง้ านในการพฒั นาระบบ เวบ็ ไซต์ 2.4.2 การจดั เกบ็ ไฟลข์ ้อมูล ในการพฒั นาระบบเว็บไซตน์ นั้ สง่ิ สาคญั ท่ีจะตอ้ ง คานงึ ถึงคือการเก็บไฟลใ์ หเ้ ป็น หมวดหมเู่ พ่ือใหง้ า่ ยตอ่ การเขา้ ไปจดั การกบั เนือ้ หา และการพฒั นา ซง่ึ สว่ นเวบ็ ไซตป์ ระเภท CMS ไดจ้ ดั หมวดหมู่ ไวอ้ ยา่ งชดั เจนเพ่อื ให้ ผพู้ ฒั นาประยกุ ตใ์ ชง้ านไดอ้ ยา่ งถกู ตอ้ ง ตวั อย่างการจดั เก็บไฟลท์ ่เี ก่ียวขอ้ งไวเ้ ป็นสว่ น ๆ 2.5 หลักการเลือกสที เ่ี หมาะสมกับการพัฒนาเวบ็ ไซต์ สนี นั้ มีความสาคญั อย่างย่งิ ในการออกแบบและพฒั นาเว็บไซตก์ ารเลอื กสใี หเ้ ขา้ กบั เนือ้ หาของเว็บไซต์ จะทาใหเ้ วบ็ ไซตม์ ีความนา่ เช่ือถือย่งิ ขนึ้ และยงั สง่ ผลอยา่ ง มากกบั ความสวยงาม ความเป็นเอกลกั ษณใ์ หก้ บั เว็บไซตแ์ ละองคก์ รได้ จงึ มีความ จาเป็นตอ้ งศกึ ษาเก่ียวกบั ทฤษฎสี ี เพ่ือใหส้ ามารถออกแบบและเลอื กใชส้ ีได้ อย่าง เหมาะสม วงลอ้ ความสมั พนั ธข์ องสที ่ีบรรจสุ ีท่นี ิยมใชใ้ นเว็บไซตไ์ วจ้ านวน 20 สี โดย

ผอู้ อกแบบสามารถ ใชค้ วามสมั พนั ธข์ องวงลอ้ ความสมั พนั ธข์ องสีนีใ้ หเ้ กิดประโยชน์ ไดอ้ ยา่ งมากมาย เชน่ ตอ้ งการออกแบบเว็บไซตท์ ่ี ใหค้ วามรูส้ กึ ตดั กนั โดยสิน้ เชิงอาจ ใชช้ ดุ สี 4 สีท่ที ามมุ กนั 90 องศา เช่น ถา้ เลอื กชดุ สี 1 ,6 , 11 , 16 สที ่ีไดจ้ ะตดั กนั ชดั เจน ถา้ ตอ้ งการใหเ้ วบ็ ไซตด์ กู ลมกลืนก็อาจเลือกชดุ สใี กลเ้ คยี งกนั ก็ไดเ้ ช่น เลือกชดุ สีเขียวเบอร์ 5 , 6 , 7 , 8 ก็จะไดส้ ใี นโทนสีเหลืองสวา่ ง เป็นตน้ นอกจากท่ีไดเ้ รยี นรูห้ ลกั การเลือกสีแลว้ การศกึ ษาทฤษฎมี คี วามสาคญั อยา่ งย่งิ ในการออกแบบเวบ็ ไซต์ การเลอื กสใี หเ้ ขา้ กบั เนือ้ หาของเว็บไซต์ จะทาใหเ้ วบ็ ไซตม์ ี ความน่าเช่ือถือย่ิงขนึ้ มคี วามเป็นเอกลกั ษณ์ และสง่ ผลตอ่ ความรูส้ กึ ของผเู้ ขา้ ชม เว็บไซต์ ซง่ึ สงิ่ สาคญั ตอ้ งเรยี นรูเ้ ก่ียวกบั สีกบั ความรูส้ กึ มีดงั นี้ 1.ชดุ สี สฟี ้า สนี า้ เงิน (Blue, Sky Blue Color) ใหค้ วามรูส้ กึ สขุ มุ สงบ สภุ าพ หนกั แนน่ เครง่ ขรมึ มงุ่ ม่นั ละเอียด รอบคอบ สง่างาม มีศกั ดศิ์ รี สงู ศกั ดิ์ เป็นระเบียบ ถอ่ มตน ชว่ ยทาใหม้ สี มาธิ และสามารถลดความต่นื เตน้ แต่ถา้ มสี นี า้ เงินเขม้ เกินไป ก็ จะทาใหร้ ูส้ กึ ซมึ เศรา้ ได้ 2. ชดุ สี สเี ขยี ว (Green Color) เป็นสีในวรรณะเยน็ จะสรา้ งความรูส้ กึ สดช่ืน เย็นสบายตา ใชเ้ ป็นสที ่ีใชผ้ อ่ นคลายความเครยี ดได้ ใหค้ วามรูส้ กึ สงบ เงยี บ รม่ เย็น รม่ รน่ื การพกั ผ่อน การผ่อนคลาย ธรรมชาติ ความปลอดภยั ปกติ ความสขุ ความ สขุ มุ เยือกเย็น 3. ชดุ สี สีเหลอื ง (Yellow Color) เป็นสีแหง่ ความอบอนุ่ เบกิ บาน เรา้ อารมณ์ และเรยี กรอ้ งความสนใจ ใหค้ วามรูส้ กึ แจม่ ใส มีพลงั ในการทางาน ความสดใส ความ รา่ เรงิ ความเบิกบานสดช่ืน ชีวติ ใหม่ ความสดใหม่ ความสขุ สวา่ ง การแพรก่ ระจาย อานาจ เปรยี บดงแสงแดด แสงเทียน ทอ้ งฟ้าสวา่ ง มีสีเหลืองทาใหร้ ูส้ กึ มชี ีวิตชีวา มี ความอบอนุ่ มีพลงั งานเกิดขนึ้ 4. ชดุ สี สแี ดง (Red Color) เป็นสีท่สี รา้ งความต่ืนเตน้ และกระตนุ้ สมอง ความ

รอ้ นแรรง สีแดงปานกลางแสดงถึงความมสี ขุ ภาพดี ความมีชีวติ ความรกั ความสาคญั ความอดุ มสมบรู ณ์ ความม่งั ค่งั สแี ดงจดั มคี วามหมายแฝงดา้ น กามารมณ์ นอกจากนีส้ แี ดงยงั สรา้ งความรูส้ กึ รุนแรง ใหค้ วามรูส้ กึ รอ้ น กระตนุ้ ทา้ ทาย เคลือ่ นไหว เรา้ ใจ ต่ืนเตน้ มีพลงั มกั จะใชก้ นั กรณีเก่ียวกบั ความต่นื เตน้ หรอื อนั ตราย 5. ชดุ สี สีมว่ ง (Purple , Violet Color) เป็นสที ่ใี หค้ วามรูส้ กึ นา่ ตดิ ตามอง มี เสนห่ ์ ซอ้ นเรน้ ลกึ ลบั มีอานาจ มพี ลงั แฝงอยู่ ความรกั ความเศรา้ ความผิดหวงั ความสงบ ความสงู ศกั ดิ์ เป็นสีท่ีปลอบโยนและชว่ ยลดความเครยี ด 6. ชดุ สี สีสม้ (Orange Color) เป็นสีท่ใี หค้ วามรูส้ กึ รอ้ น ความอบอนุ่ ความ สดใส มีชีวิตชีวา วยั รุน่ ความคกึ คะนอง การปลดปลอ่ ย ความเปรยี้ ว การระวงั สีนี้ เป็นสที ่ีเรา้ ความรูส้ กึ ควรใชแ้ ตน่ อ้ ยเม่ือเทียบกบั สสี ม้ นีท้ าใหผ้ เู้ ขา้ ชมเว็บเวบ็ ไซตอ์ ่าน เนือ้ หาไดไ้ มน่ าน 7. ชดุ สี สนี า้ ตาล (Brown Color) เป็นชดุ สที ่ใี หค้ วามรูส้ กึ อบอนุ่ ไดพ้ กั ผ่อน ควรใชร้ ว่ มกบั สสี ม้ เหลอื ง หรอื สีทอง เพราะถา้ ใชส้ นี า้ ตาลเพียงอย่างเดียว อาจทาให้ เกิดความรูส้ กึ หดหไู่ ด้ 8. ชดุ สี สเี ทา (Gray Color) เป็นชดุ สีท่ีใหค้ วามรูส้ กึ เศรา้ อาลยั ทอ้ แท้ ความ ลกึ ลบั ความหดหู่ ความชรา ความสงบ ความเงียบ สภุ าพ สขุ มุ ถ่อมตน สนี ีท้ าใหเ้ กิด ความรูส้ กึ เยน็ แตส่ รา้ งความรูส้ กึ หมน่ หมองได้ ควรใชร้ ว่ มกบั สีท่ีมชี ีวติ ชีวา โทนสว่าง อยา่ งนอ้ ยหน่งึ สี 9. ชดุ สี สีขาว (White Color) เป็นสีท่ีใหค้ วามรูส้ กึ บรสิ ทุ ธิ์ สะอาด สดใส เบา บาง อ่อนโยน เปิดเผย การเกิด ความรกั ความหวงั ความจรงิ ความเมตตา ความ ศรทั ธา ความดีงาม ใหค้ วามรูส้ กึ รน่ื เรงิ โดยเฉพาะเม่ือใชก้ บั สแี ดงหรสื เี หลอื ง

หน่วยที่ 3 การตดิ ตัง้ และการใช้งานโปรแกรม Adobe Dreamweaver CS6 3.1 คุณสมบตั ขิ องโปรแกรม Adobe Dreamweaver CS6 Adobe Dreamweaver เป็นโปรแกรมสาหรบั พฒั นาระบบเว็บไซต์ เป็นโปรแกรม ประเภท “WYSIWYG” What You Is What You Get คือเม่อื มกี ารจดั วางขอ้ ความ หรอื รูปภาพลงไป โปรแกรมจะทาการเขียนโคด้ HTML ใหโ้ ดยอตั โนมตั ิ ตามการจดั วางนนั้ โดยท่ผี พู้ ฒั นาไมต่ อ้ งเขียนโคด้ คาส่งั HTML เลยทาใหผ้ พู้ ฒั นา มีเวลาในการ จดั ตกแตง่ องคป์ ระกอบของเว็บไซตใ์ หส้ วยงามย่งิ ขนึ้ ได้ ซง่ึ โปรแกรมนีม้ คี ณุ สมบตั ิ สนบั สนนุ ใหผ้ พู้ ฒั นาสามารถออกแบบดว้ ยเคร่อื งมอื ตา่ ง ๆ ท่ีชดุ โปรแกรมได้ จดั เตรยี มมาใหแ้ ละสามารถเขียนชดุ คาส่งั ควบคกู่ บั การพฒั นา ตลอดจนสามารถ พฒั นาเป็นเวบ็ แอปพลิเคช่นั โปรแกรมนีไ้ ดร้ บั ความนิยมอยา่ งมาก เน่ืองจากมี คณุ สมบตั ิเดน่ คือใชง้ านงา่ ย มีเคร่อื งมือสนบั สนนุ ในการพฒั นามากมาย ทงั้ สามารถ จดั การขอ้ ความ รูปภาพกราฟิก ตาราง แบบฟอรม์ ขอ้ มลู ,มลั ติมเี ดยี รวมทงั้ สามารถ พฒั นาองคป์ ระกอบตา่ ง ๆ เพ่อื ใชส้ าหรบั โตต้ อบกบั ผเู้ ย่ียมชมเว็บไซตไ์ ดโ้ ดยง่าย โดย ผใู้ ชไ้ มจ่ าเป็นตอ้ งเขียนชดุ คาส่งั ภาษา HTML , PHP , JavaScript และภาษาอ่นื ๆ เพ่ือสรา้ งเวบ็ เพจ ดงั นนั้ โปรแกรมนีจ้ งึ เหมาะกบั ผเู้ รม่ิ ตน้ และผใู้ ชท้ ่วั ไป นอกจากนนั้ ยงั มี คณุ สมบตั ิขนั้ สงู อีกมากมายท่ีเหมาะสาหรบั ผทู้ ่จี ะพฒั นาระบบ เวบ็ ไซตอ์ ย่างมอื อาชีพดว้ ยเช่นกนั คณุ สมบตั ิ เดน่ ของโปรแกรม Adobe Dreamweaver CS5 ท่ี น่าสนใจมีดงั นี้ 1.การติดตงั้ เว็บไซตอ์ ย่างเรยี บงา่ ย ทาใหผ้ พู้ ฒั นาเว็บไซตส์ ามารถจดั การกบั เนือ้ หาเว็บไซตไ์ ดอ้ ยา่ ง ง่ายดายและรวดเรว็ ขนึ้ โดยท่ไี มต่ อ้ ง เขียนชดุ คาส่งั หรอื กรอก ขอ้ มลู มากมายเหมอื นรุน่ ท่ีผา่ น ๆ มา

2.มี CSS Layouts เรม่ิ ตน้ ช่วยในการเขียนCSS Style ไดต้ ามมาตรฐานท่ีกาหนด ในการพฒั นาระบบเว็บไซต์ 3.Live View โดยสามารถท่ีจะใชห้ นา้ ตา่ ง Live Viewในการทดสอบชดุ คาส่งั PHP ซง่ึ ถือวา่ เป็น Side Server Scriptได้ หรอื สามารถทดสอบการแสดงผลของ Flash , VDO รวมทงั้ ชดุ คาส่งั Script ตา่ ง ๆ ไดอ้ ยา่ งงา่ ยดาย เหมือนการทดสอบการแสดงผล ของภาษา HTML 4.Code Hinting สามารถบอกคาใบใ้ นการพฒั นาเวบ็ ไซตใ์ ชช้ ดุ คาส่งั ต่าง ๆใน การพฒั นา เช่น PHP , Script , HTML เป็นตน้ เป็นเคร่อื งมือท่ีชว่ ยในการพฒั นา เว็บไซตใ์ ชช้ ดุ คาส่งั ต่าง ๆ ไดง้ ่ายขนึ้ 5.รองรบั CSS Adobe Dreamweaver CS5 สามารถจดั การแสดงผลหรอื ไม่ แสดงผลโดยใชโ้ ปรแกรม Adobe Dreamweaver CS5 โดยไมต่ อ้ งอาศยั การแสดงผล โดยใชโ้ ปรแกรมWeb Browserไดเ้ ลย 6.สามารถทางานรว่ มกบั Adobe Browser Lab โดยผพู้ ฒั นาสามารถพฒั นา เวบ็ ไซตข์ นึ้ ในสิง่ แวดลอ้ มของWeb Browserตา่ ง ๆ ในแตล่ ะรุน่ เชน่ Firefox , Internet Explorer , Google Chrome หรอื อ่ืนดว้ ย CS Live ท่สี ามารถทดสอบตวั ไดนามกิ สท์ งั้ ท่ีเป็นเว็บไซตท์ ่แี สดงผลในอินเทอรเ์ นต็ หรอื เว็บไซตท์ ่กี าลงั พฒั นาอยใู่ น เครอ่ื ง ท่ยี งั ไมอ่ พั ขนึ้ สเู่ คร่อื ง Web Server ก็สามารถใช้ Adobe Browser Labได้ 3.2 การตดิ ตัง้ โปรแกรม Adobe Dreamweaver CS6 การตดิ ตงั้ โปรแกรม Adobe Dreamweaver CS6 มขี นั้ ตอนการตดิ ตงั้ ดงั นี้ 1.ใสแ่ ผ่นโปรแกรมติดตงั้ โปรแกรม Adobe Dreamweaver CS6 ไวใ้ นไดรฟ์ ซดี ีรอม 2.ดบั เบิล้ คลิกไฟลต์ ดิ ตงั้ โปรแกรม Adobe Dreamweaver CS6

3.โปรแกรมจะเรม่ิ ทาการตดิ ตงั้ ซง่ึ แบง่ ออกเป็น 2 แบบ คือ - Install ตอ้ งมี Serial Number เพ่ือใชต้ ิดตงั้ โปรแกรม - Try เป็นโปรแกรมสาหรบั ทดลองใช้ 30 วนั 4.เขา้ สขู่ นั้ ตอนการติดตงั้ จะเขา้ สหู่ นา้ จอ License Agreement หรอื สญั ญาอนญุ าต ใหใ้ ชว้ อฟแวรข์ องเจา้ ของ ผลิตภณั ฑ์ ใหอ้ ่านราบละเอียดใหค้ รบถว้ นสมบรู ณ์ และ คลิก ยอมรบั (Accept)

5.จะปรากฏหนา้ จอเพ่ือกรอก Serial Number เม่อื ใส่ Serial Number เรยี บรอ้ ยแลว้ จะปรากฏป่มุ ใหเ้ ลือกภาษา ใหเ้ ลอื ก English International แลว้ คลกิ ป่มุ ถดั ไป (Next) 6.จะปรากฏหนา้ จอเพ่ือใหก้ รอกเพ่ือใหผ้ ใู้ ชก้ าหนดโปรแกรมท่ีตอ้ งการติดตงั้ ไดห้ รอื

สามารถ เลือกตดิ ตงั้ โปรแกรมทงั้ ชดุ ของ Adobe และเลือกไดรฟ์ ท่ีจะเก็บโปรแกรม ใน กรณีนีเ้ ลอื กเป็นไดรฟ์ C:\\Program\\Files\\Adobe แลว้ คลิกเลอื ก (Install) - เลือกโปรแกรม Adobe Dreamweaver CS6 เพ่ือติดตงั้ โปรแกรม - ชอ่ ง Language เพ่ือเลอื กภาษาในการตดิ ตงั้ โปรแกรม - ชอ่ ง Location เพ่ือเลอื กตาแหน่งในการตดิ ตงั้ โปรแกรม โดยการติดตงั้ อตั โนมตั ิ จะถกู ตดิ ตงั้ ท่ีตาแหนง่ C:\\Program Files\\Adobe (สามารถเปลย่ี นตาแหนง่ ในการติดตงั้ ได)้ - เม่ือกาหนด Options ตา่ ง ๆ เสรจ็ แลว้ ใหค้ ลกิ ท่ีป่มุ Install 7.จะแสดงหนา้ จอของสถานการณต์ ดิ ตงั้ โปรแกรม รอจนกระท่งั ติดตงั้ โปรแกรมสาเรจ็

8.เม่อื ตดิ ตงั้ โปรแกรมเสรจ็ จะปรากฏ ดงั รูป คลกิ ป่มุ Next จะแสดงขอ้ ความเพ่ือบอก คณุ สมบตั ิของ โปรแกรมท่ใี ช้ คลกิ ท่ีป่มุ Done เพ่ือสนิ้ สดุ การตดิ ตงั้ โปรแกรม 3.3 การเข้าสู่โปรแกรม Adobe Dreamweaver CS6 การเรยี กใชง้ านโปรแกรม Adobe Dreamweaver CS6 มขี นั้ ตอนดงั นี้ 1. คลิกท่ปี ่มุ Start > All Programs > Adobe Master Collection CS6 > Adobe Dreamweaver CS6

1. คลิกท่ีป่มุ Start 2. คลิก Programs หรอื All Programs 3. เลอื ก Adobe Dreamweaver CS6 4. จะปรากฏหนา้ ตา่ ง Welcome Screen กอ่ นการเขา้ สหู่ นา้ โปรแกรมหลกั ซง่ึ แตล่ ะสว่ นมีรายละเอียด ดงั นี้ 2. จะแสดงหนา้ จอ Welcome Screen ของโปรแกรม Adobe Dreamweaver CS6

Welcome Screen เป็นเคร่อื งมือเรม่ิ ตน้ สาหรบั ผใู้ ชเ้ ลือก โดยตวั เลือกจะแบง่ กลมุ่ ตา่ ง ๆ มีสว่ นประกอบของหนา้ จอ Welcome Screen ดงั นี้ 1. Open a Recent Item เปิดไฟลท์ ่เี คยใชโ้ ดยคลกิ เลอื กจากรายการท่ีแสดงอยู่ เรยี งลาดบั จากท่ีเคยเปิดลา่ สดุ จานวน 9 รายการ โดยสามารถคลิก Open เพ่ือเลอื ก เปิดไฟลอ์ ่ืน ๆ เพ่ิมเตมิ 2. Create new สรา้ งงานใหม่ โดยสามารถสรา้ งไฟลภ์ าษาตา่ ง ๆ ตามท่ีเลือก ถา้ เลอื ก HTML ในการสรา้ งเว็บเพจพืน้ ฐานภาษา HTML ถา้ เลอื กชนิดไฟลช์ นิดอ่ืน จะ เป็นการสรา้ งเว็บเพจตามหวั ขอ้ ท่ีเลอื ก เชน่ - HTML : สรา้ งหนา้ เว็บธรรมดา เหมาะสาหรบั ผเู้ รม่ิ ตน้ สรา้ งเวบ็ - ColdFusion : สรา้ งหนา้ เว็บแอพพลิเคช่นั ท่ีพฒั นาดว้ ยเทคโนโลยฝี ่ัง เซริ ฟ์ เวอร์ ColdFusion

- PHP : สรา้ งหนา้ เวบ็ แอพพลิเคช่นั ท่พี ฒั นาดว้ ยเทคโนโลยีฝ่ัง เซริ ฟ์ เวอร์ PHP - CSS : สรา้ งไฟลเ์ ก็บรูปแบบตวั อกั ษร ตาราง สพี ืน้ หลงั เพ่ือนาไปใชใ้ นทกุ ๆ หนา้ เวบ็ เพจ - JavaScript : สรา้ งไฟลส์ ครปิ ตท์ ่ที างานฝ่ังไคลเอนต์ และทางานท่ีเครอ่ื ง ของผเู้ ขา้ ชมเวบ็ ไซต์ - Dreamweaver Site: สรา้ งเว็บไซตใ์ หม่ 3. Top features (Videos) สามารถใหผ้ พู้ ฒั นาเขา้ ดวู ดิ โี อรายละเอียดและเทคนิคใน การใชง้ าหนา้ ตา่ ง ๆ ของโปรแกรมผา่ นทางเว็บไซต์ Adobe 3.4 ส่วนประกอบของหน้าตา่ งโปรแกรม Adobe Dreamweaver CS6 โปรแกรม Adobe Dreamweaver CS6 มสี ว่ นประกอบท่สี าคญั คอื หนา้ จอของการ ออกแบบ Design View และหนา้ จอการแสดงผล สาหรบั หนา้ จอการออกแบบมี สว่ นประกอบ ดงั นี้

1. แถบคาส่งั (Manu Bar) เป็นแถบท่ใี ชเ้ ก็บคาส่งั ทงั้ หมดของโปรแกรม โดยจะ แบง่ คาส่งั ทงั้ หมดออกเป็นหมวดหมู่ เพ่ือใหส้ ะดวกตอ่ การใชง้ าน ซง่ึ ภายในแต่ละ หมวดหมขู่ องคาส่งั จะประกอบไปดว้ ยคาส่งั ย่อย ๆ ท่ีเก่ียวขอ้ งกนั 2. แถบเครอ่ื งมือ (Tool Bar) คือแถบเครอ่ื งมือท่ีรวบรวมป่มุ คาส่งั ท่ีจาเป็นตอ้ ง ใชง้ านบอ่ ย ๆ เอาไวเ้ พ่ือใหผ้ ใู้ ชง้ านเลือกใชไ้ ดอ้ ยา่ งสะดวก 3. แถบวตั ถุ (Object bar) เปน้ กลมุ่ เคร่อื งมือต่าง ๆ ท่ีใชใ้ นการควบคมุ วตั ถบุ น ชิน้ งาน เนือ้ หาเวบ็ เช่น เสน้ กราฟิ ก (Horizontal Rule) ตาราง รูปภาพ วดิ ีโอ เลเยอร์ (Layer) เป็นตน้ 4. แถบสถานะ (Status Bar) จะแสดงสถานการณท์ างานตา่ ง ๆ ของเว็บเพจ 5. แถบควบคมุ การทางาน (Properties Palette) เป็นรายการท่ปี รบั เปลย่ี นได้ ตามลกั ษณะการกรอกขอ้ มลู เช่น หากเลือกท่ีจะพิมพห์ รอื แกไ้ ขเนือ้ หา รายการจะเป็น สว่ นทางานท่ีเก่ียวกบั อกั ษร การจดั ยอ่ หนา้ ขอ้ ความ ถา้ เลือกท่รี ูปภาพ รายการในแถบ นี้ จะเป็นคาส่งั ตา่ ง ๆ ท่ีเก่ียวขอ้ งกบั การควบคมุ เรอ่ื งรูปภาพ

6. สว่ นของ Panel Group เป็นกลมุ่ ของแถบเคร่อื งมือสาหรบั ผพู้ ฒั นาเว็บเพจท่ี สามารถเรยี กใชง้ านไดอ้ ย่างรวดเรว็ เพ่อื ใหเ้ กิดความสะดวกในการสรา้ ง Application บนอนิ เทอรเ์ นต็ เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจ ไดอ้ ย่างงา่ ย ๆ โดยสามารถเรยี กใชง้ านไดจ้ าก Panel Group 7. หนา้ ตา่ งการแสดงผล (Document Window) คือสว่ นท่ีใชส้ าหรบั แสดงเนือ้ หา ละจดั องคป์ ระกอบของเว็บเพจ ซง่ึ มีมมุ มองการทางาน 6 แบบคือ 1. มมุ มองออกแบบ (Design View) ในมมุ มองนีจ้ ะแสดงเว็บเพจคลา้ ยกบั ท่ปี รากฏบนบราวเซอร์ โดยผพู้ ฒั นา สามารถแกไ้ ขขอ้ มลู เนือ้ หา จดั วางเนือ้ หา รูปภาพ ลงเวบ็ เพจได้ แตส่ าหรบั ไฟลข์ อ้ มลู ท่ีเป็นภาพเคล่อื นไหว หรอื ไฟล์ Script VDO ตา่ ง ๆ จะไมส่ ามารถแสดงในมมุ มองนีไ้ ด้ โดยไฟลป์ ระเภทดงั กลา่ วจะสามารถ แสดงผลไดใ้ นมมุ มอง Live View อีกที 2. มมุ มองโคด้ (Code View) จะแสดงเวบ็ เพจในรูปแบบชดุ คาส่งั ภาษา HTML ท่ถี กู สรา้ งขนึ้ อตั โนมตั ิจากการออกแบบในมมุ มองออกแบบ (Design) ซง่ึ

ผพู้ ฒั นาสามารถเขียนชดุ คาส่งั เพ่ิมไดห้ รอื จะใชช้ ดุ คาส่งั ภาษาสครปิ ต์ (Script) ตา่ ง ๆ โดยสามารถตรวจสอบและแกไ้ ขคาส่งั ไดต้ ามตอ้ งการซง่ึ การแกไ้ ขจะสง่ ผลไปยงั มมุ มองออกแบบไดโ้ ดยอตั โนมตั ิ 3. มมุ มองโคด้ และออกแบบ (Code and Design หรอื Split) จะแสดง รูปแบบของเวบ็ เพจทงั้ รูปแบบท่ปี รากฏบนเวบ็ บราวเซอรแ์ ละรูปแบบคาส่งั ท่ีเป็น ภาษา HTML พรอ้ ม ๆกนั เพ่อื ใชใ้ นการออกแบบและแกไ้ ขคาส่งั ไดภ้ ายในคราว เดียวกนั โดยสามารถปรบั พืน้ ท่ขี องหนา้ ตา่ งแตล่ ะสว่ นไดโ้ ดยการคลกิ แลว้ ลากท่ีเสน้ แบง่ ระหวา่ งทงั้ สองสว่ นนี้

4. มมุ มองแสดงหนา้ เว็บเหมือนดบู นเว็บบราวเซอร์ (Live View) จะ แสดงผลเหมือนการรนั หนา้ เว็บเพจบนเว็บ บราวเซอร์ ซง่ึ การแสดงผลนนั้ สามารถ แสดงผลในไฟลท์ ่เี ป็น Flash Animation และ JavaScript หรอื สว่ นท่ีเป็น Plug in ตา่ ง ๆ เป็นมมุ มองใหมท่ ่เี พ่ิมขนึ้ มาเพ่ืออานวยความสะดวกตอ่ การตรวจสอบองคป์ ระกอบ ตา่ ง ๆ และลงิ คเ์ ช่ือมโยงขอ้ มลู ตาง ๆ ไดอ้ ยา่ งรวดเรว็ ทาใหผ้ พู้ ฒั นาระบบ ประหยดั เวลาในการแสดงผลขอ้ มลู ผา่ นทางโปรแกรม เว็บบราวเซอร์

5. มมุ มองแสดงโคด้ บนหนา้ เว็บ (Live Code) มมุ มองนีจ้ ะแสดงชดุ คาส่งั รว่ มกบั มมุ มองชดุ แสดงผลหนา้ เว็บเหมือน ดบู นเว็บบราวเซอร์ (Live View) เป็น มมุ มองท่ีเหมือนการใชช้ ดุ คาส่งั View Source จากโปรแกรมเวบ็ บราวเซอร์ ซงึ้ ใช้ ตรวจดชู ดุ คาส่งั ในในตาแหนง่ ตา่ ง ๆ เทา่ นนั้ มส่ ามารถแกไ้ ขชดุ คาส่งั ในมมุ มองนีไ้ ด้

6. มมุ มองการแสดงท่ีจดั รูปแบบดว้ ย CSS (Inspect) ซง่ึ ในมมุ มองนีจ้ ะ แสดงผลรว่ มกบั มมุ มอง Live View ซง่ึ เป็น มมุ มองท่ีใชต้ รวจดกู ารจดั รูปแบบดว้ ย คาส่งั CSS Styles เพ่ือใหเ้ ลอื กใชห้ รอื ยกเลิกคาส่งั ท่ีเคยกาหนดไวใ้ นมมุ มองนีไ้ ด้ โดย มมุ มองนีไ้ มส่ ามารถแกไ้ ขได้ หากตอ้ งการแกไ้ ขใหเ้ ลือกมมุ มอง Split หรอื มมุ มอง Code เพ่ือแกไ้ ขขอ้ มลู ท่ตี อ้ งการ แกไ้ ขได้ 3.5 การออกจากโปรแกรม Adobe Dreamweaver CS6 การออกจากโปรแกรม Adobe Dreamweaver CS6 ผใู้ ชส้ ามารถออกจาก โปรแกรมได้ 3 วิธี ดงั นี้ 1. การออกจากโปรแกรมโดยใชเ้ มนู คลิกท่เี มนู File > Exit โปรแกรมจะถกู ปิดลง

2. การออกจากโปรแกรมโดยใชป้ ่มุ Close การออกจากโปรแกรมโดยใชป้ ่มุ Close ท่มี มุ บนขวาของหนา้ จอ โดยสามารถคลิกเพ่ือปิดโปรแกรมได้ 3 การออกจากโปรแกรมโดยใชค้ ยี ล์ ดั การออกจากโปรแกรมโดยใชค้ ียล์ ดั สามารถทาไดโ้ ดยกดท่ปี ่มุ Ctrl + Q บนแปน้ พิมพเ์ พ่ือออกจากโปรแกรม หากยงั ไมม่ ี การบนั ทกึ จะปรากฏกลอ่ งขอ้ ความวา่ ตอ้ งการท่ีจะบนั ทกึ ขอ้ มลู ก่อนปิดหรอื ไมถ่ า้ ตอ้ งการบนั ทกึ ใหต้ อบ Yes ถา้ ไมต่ อ้ งการบนั ทกึ ใหต้ อบ No หรอื ไมต่ อ้ งการปิดให้ ตอบ Cancel ถา้ ไฟลบ์ นั ทกึ เรยี บรอ้ ย แลว้ โปรแกรมจะถกู ทนั ทีโดยไมม่ ีการถาม หน่วยที่ 4 การสร้างเว็บไซตใ์ หม่ ดว้ ยโปรแกรม Adobe Dreamweaver CS6 4.1 เริ่มตน้ การสร้างไซตง์ านใหม่ ในการสรา้ งเว็บไซตใ์ หม่ จะตอ้ งมกี ารสสรา้ งไซตเ์ ปรยี บเสหมือนโฟลเดอรห์ ลกั ท่ี ใชใ้ นการจดั โฟลเดอรข์ องเว็บเพจและไฟลต์ า่ ง ๆ ประกอบกนั เป็นเว็บไซตข์ นึ้ มาก่อน โดยจดั ขอ้ มลู ประเภทรูปภาพ ไฟลส์ อื่ ประกอบ และสว่ นประกอบต่าง ๆ ไวใ้ หเ้ ป็น ระบบเป็นระบบเพ่ือใหง้ า่ ยตอ่ การเคลอื่ นยา้ ยขอ้ มลู หรอื อพั โหลดขอ้ มลู แกป้ ัญหา รูปภาพหรอื ไฟล์ ไมแ่ สดงผลเม่อื อพั ขอ้ มลู ขนึ้ เผยแพรใ่ นระบบอนิ เทอรเ์ นต็ ซง่ึ มี ขนั้ ตอนดงั นี้ 1. คลิกท่ีเมนู Site > New Site….

2. จะปรากฏกลอ่ งขอ้ ความใหใ้ สร่ ายละเอียดของเวบ็ ไซตท์ ่แี ถบ Site 3. กาหนดช่ือเวบ็ ไซตท์ ่ชี อ่ ง Site Name

4. คลิกเลือกโฟลเดอรท์ ่ตี อ้ งการใชเ้ ก็บขอ้ มลู หลกั ของเวบ็ ไซต์ ท่ชี อ่ ง Local Site Folder 5. จะปรากฏโฟลเดอรท์ ่เี ลอื ก คลกิ ป่มุ Select เพ่ือเลือกไซตท์ ่ตี อ้ งการ 6. คลกิ ป่มุ Save เพ่ือบนั ทกึ ขอ้ มลู จะไดไ้ ซตท์ ่เี ก็บขอ้ มลู ตามท่กี าหนดไว้ 4.2 การเปล่ียนแปลงแกไ้ ขไซตง์ านใหม่ หากตอ้ งการท่ีจะปรบั ปรุงแกไ้ ขไซตง์ านเพ่ือบนั ทกึ ขอ้ มลู ไวท้ ่ใี หม่ สามารถทาได้ ดงั นี้ 1. คลกิ เลอื ก Site > Manage Sites 2. คลกิ เลือกเวบ็ ไซตท์ ่ตี อ้ งการแกไ้ ข 3. คลิกป่มุ Edit เพ่ือแกไ้ ข 4. แกไ้ ขขอ้ มลู เวบ็ ไซตต์ ามท่ตี อ้ งการ 5. คลกิ ป่มุ Save 4.3 การสร้างไฟลเ์ วบ็ เพจใหม่ การสรา้ งไฟลเ์ วบ็ เพจหนา้ ใหมข่ นึ้ มา สามารถทาไดด้ งั นี้ 1. คลิกท่ีเมนู File > New หรอื คลกิ คียล์ ดั ท่แี ปน้ พมิ พ์ Ctrl + N 2. คลกิ เลือก Blank Page สรา้ งเอกสารเวบ็ เปลา่ 3. คลิกเลือกประเภทของเว็บเพจเป็น HTML 4. คลกิ เลอื กรูปแบบเป็น None 5. คลิกป่มุ Create เพ่ือสรา้ งหนา้ เวบ็ เปลา่ ใหม่ 6. หนา้ เวบ็ ใหมจ่ ะแสดงขนึ้ มา สาหรบั เวบ็ ไซตใ์ หมใ่ นมมุ มอง Code นนั้ ชดุ คาส่งั ของเอกสารภาษา HTML ประกอบกลมุ่ ของชดุ คาส่งั ตอ่ ไปนี้

การเขียนเว็บเพจดว้ ยภาษา HTML นนั้ เอกสาร HTML นนั้ จะประกอบดว้ ย สว่ นประกอบ 3 สว่ นดงั นี้ 1.สว่ นเรม่ิ ตน้ ของเอกสาร HTMLเป็นคาส่งั เรม่ิ ตน้ ในการเขยี นโปรแกรมเว็บเพจดว้ ย ภาษา HTML และคาส่งั </HTML> เป็นการสิน้ สดุ คาส่งั เร่มิ ตน้ ของโปรแกรมภาษา HTML 2.สว่ น Head คอื สว่ นท่จี ะเป็นหวั (Header) ของหนา้ เอกสารท่วั ไป หรอื สว่ นท่ีเป็นช่ือ เรอ่ื ง (Title) ของหนา้ ตา่ งการทางานท่ีแสดงผลในโปรกแรมเว็บบราวเซอร์ 3.สว่ น Body จะเป็นสว่ นเนือ้ หาของเอกสารนนั้ ๆ ซง่ึ ประกอบดว้ ย Tag คาส่งั ในการ จดั รูปแบบหรอื ตกแต่งเอกสารดว้ ยภาษา HTML ตา่ ง ๆ คาส่งั เรม่ิ ตน้ ของเอกสารภาษา HTML <HTML>……</HTML> คาส่งั <HTML> เป็นคาส่งั ท่ีเรม่ิ ตน้ ในการเขยี นโปรแกรมเว็บเพจดว้ ยภาษา HTML และคาส่งั </HTML>เป็นการสิน้ สดุ คาส่งั เรม่ิ ตน้ ของชดุ โปรแกรมภาษา HTML คาส่งั นี้ จะไมแ่ สดงผลในโปรแกรมเวบ็ บราวเซอร์ แต่สาหรบั โปรแกรม Adobe Dreamweaver CS6 เม่อื สรา้ งเอกสารใหมใ่ นมมุ มองออกแบบ (Design) แลว้ จะสรา้ งชดุ คาส่งั ตาม รูปแบบท่อี อกใหอ้ ตั โนมตั ิ แตก่ ารเรยี นรูใ้ นการจดั การชดุ คาส่งั ภาษา HTML นนั้ มี ความจาเป็นตอ่ การเพ่มิ ประสทิ ธิภาพของเวบ็ ไซต์ เน่ืองจากการทางานบางอยา่ งไม่ สามารถออกแบบไดจ้ งึ จาเป็นตอ้ งเขียนชดุ คาส่งั เพ่ือส่งั ใหแ้ สดงผล การพฒั นา เว็บไซตใ์ หม้ ีประสิทธิภาพและเหมาะสมกบั ยคุ สมยั ใหมจ่ งึ จาเป็นตอ้ งศกึ ษาหลายวิธี ควบคกู่ นั สว่ นหวั เรอ่ื งเอกสารเวบ็ (Head Section) <HEAD>………</HEAD> Head Section เป็นสว่ นท่ใี ชอ้ ธิบายเก่ียวกบั ขอ้ มลู เฉพาะของหนา้ เว็บนนั้ ๆ เชน่ ช่ือ

เร่อื งของเวบ็ (Title) ช่ือผจู้ ดั ทาเวบ็ (Author) คยี เ์ วริ ด์ สาหรบั การคน้ หา (Keyword) โดยมี Tag สาคญั คือ <TITLE>……….</TITLE> ขอ้ ความท่ใี ชเ้ ป็นช่ือเร่อื ง (TITLE) ไมค่ วรพมิ พเ์ กิน 64 ตวั อกั ษร ไมต่ อ้ งใสล่ กั ษณะ พิเศษเช่น ตวั หนา เอียง หรอื สี และควรใชภ้ าษาท่มี คี วามหมายครอบคลมุ ถงึ เนือ้ หา ของเวบ็ เพจนนั้ หรอื เป็นคาสาคญั ในการคน้ หา (Keyword) ในเวบ็ ไซตต์ า่ ง ๆ เม่ือทา การเผยแพรใ่ นระบบอนิ เทอรเ์ น็ต สว่ นเนือ้ หาเอกสารเว็บ (Body Section) <BODY>………. </BODY> Body Section เป็นสว่ นเนือ้ หาหลกั ของหนา้ เว็บเพจ ซง่ึ การแสดงผลจะตอ้ งใช้ Tag คาส่งั ตา่ งๆ จานวนมาก ขนึ้ อยกู่ บั ลกั ษณะของขอ้ มลู เช่น ขอ้ ความ, รูปภาพ, เสียง, วิดีโอ หรอื ไฟลต์ า่ งๆ ท่ีตอ้ งการนาเสนอ การปอ้ นคาส่งั ในสว่ นนี้ ไมม่ ีขอ้ จากดั สามารถ ปอ้ นติดกนั หรอื 1 บรรทดั ตอ่ 1 คาส่งั ก็ได้ แตส่ ว่ นใหญ่จะยดึ รูปแบบท่ีอ่านง่าย คือ การทายอ่ หนา้ ในชดุ คาส่งั ท่ีเก่ียวขอ้ งกนั ทงั้ นีใ้ หป้ อ้ นคาส่งั ทงั้ หมดภายใต้ Tag <BODY>……. </BODY> 4.4 การสร้างโฟลเดอรไ์ หม่ การสรา้ งโฟลเดอร์ หลงั จากท่ีไดส้ รา้ งเว็บไซตข์ นึ้ มาใหมแ่ ลว้ สามารถสรา้ ง โฟลเดอรใ์ หมข่ นึ้ มาเพ่ือจดั เกบ็ ไฟลสข์ อ้ มลู ตา่ งๆ ไดโ้ ดยมขี นั้ ตอนดงั นี้ 1. คลกิ ท่ี Panel File 2. คลิกเมาสข์ วาท่ีโฟลเดอรห์ ลกั เลือก New Folder 3. กาหนดช่ือโฟลเดอรท์ ่กี าร กด Enter

4. จะไดโ้ ฟลเดอรเ์ พ่ือจดั เก็บไฟบวข์ อ้ มลู ท่เี ก่ียวขอ้ งเว็บไซต์ 4.5 การกาหนดแถบชื่อหวั เร่ืองของเวบ็ ไซต์ การกาหนดช่ือหวั เร่อื งใหก้ บั เว็บไซตน์ นั้ มอี ยู่ 3 วิธี ดงั นี้ วธิ ที ่ี 1 ใส่หวั เรื่องบนกล่องเคร่ืองมอื (Tools Bar) เม่ือเว็บเพจขนึ้ มา ท่ีกลอ่ งเคร่อื งมือ (Tools Bar) จะปรากฏ ชอ่ งหวั เรอ่ื ง (Title) สามารถพมิ พห์ วั เรอ่ื งของเวบ็ ไซตท์ ่ตี อ้ งการในชอ่ ง Title เลือกคาส่งั ท่เี มนู File > Save เพ่ือบนั ทกึ จากนนั้ กดป่มุ <F12> เพ่ือทดสอบดชู ่ือ เรอ่ื งของหนา้ เวบ็ เพจ ท่ี แสดงผลบนหนา้ ตา่ งเวบ็ บราวเซอรไ์ ด้ วธิ ที ี่ 2 ใส่หวั เร่ืองทเ่ี มนู สามารถใสห่ วั เรอ่ื งเว็บเพจไดด้ งั นี้ คลิกท่ีเมนู Modify > Page Properties จะปรากฏ กลอ่ งขอ้ ความ Page Properties ขนึ้ มา เลือกท่แี ท็ย Title/Encoding ท่ชี ่อง Title ใส่ ช่ือหวั เรอ่ื งตามท่ตี อ้ งการ

คลกิ ป่มุ OK เพ่ือตกลง เลอื กคาส่งั ท่ีเมนู File > Save เพ่ือบนั ทกึ จากนนั้ กดป่มุ <F12> เพ่ือทดสอบดชู ่ือเร่อื งของหนา้ เว็บเพจ ท่แี สดงผลบนหนา้ ตา่ งเวบ็ บราวเซอร์ ได้ วิธีท่ี 3 ใส่หวั เรื่องทม่ี ุมมอง Code การใสช่ ่ือหวั เรอ่ื งในมมุ มอง Coding นนั้ สามารถใสข่ อ้ มลู เพ่ือเตมิ ท่ี Tag <Head> โดย สามารถใสห่ วั เร่อื งท่ีแท็ก </Title> ไดด้ งั รูป 4.6 การปรับแต่งคุณสมบตั ใิ หก้ บั เว็บไซต์

การสรา้ งเว็บไซตด์ ว้ ยโปนแกรม Adobe Dreamweaver CS6 สามารถใชไ้ ดท้ งั้ คาส่งั CSS Style และ html Code ดงั นนั้ ในการปรบั แตง่ คณุ สมบตั ใิ หก้ บั หนา้ เวบ็ ไซตน์ นั้ สามารถนาทงั้ สองคาส่งั มาตกแตง่ ใหก้ บั เวบ็ ไซตไ์ ด้ โดยสามารถตกแต่งได้ ในแตล่ ะ สว่ นดงั นี้ 4.6.1 การตัง้ ค่าการแลดงผลใหก้ ับเวบ็ ไซต์ การตงั้ คา่ แสดงผลของเว็บไซตเ์ พ่ือใหเ้ ว็บไซตแ์ สดงผลในตาแหน่งท่ี ตอ้ งการ สามารถ ทาไดด้ งั นี้ 1. คลกิ ท่ีเมนู Modify > Page Properties 2. จะปรากฏหนา้ ตา่ ง Page Properties เลอื กแทบ็ Appearance (CSS) 3. เลอื กตงั้ คา่ Margin เพ่ือใชก้ าหนดระยะหา่ งของตวั อกั ษรและภาพ กบั เว็บเพจ 4. คลิกป่มุ OK เพ่ือตงั้ คา่ การแสดงผล 5. การแสดงผลเว็บไซตจ์ ะชิดขอบบนและอยกู่ งึ่ กลาง

4.6.2 การใส่สีพนื้ หลังใหก้ บั เวบ็ ไซต์ โดยใช้ CSS 1. คลิกท่เี มนู Modify > Page Properties 2. จะปรากฏหนา้ ตา่ ง Page Properties เลือกแท็บ Appearance (CS5) 3. เลือก Background Color เปล่ืยนสพี นื้ หลงั ตามท่ีตอ้ งการ

4. คลกิ ท่ีป่มุ Apply 5. คลกิ ท่ปี ่มุ OK 6. จะไดผ้ ลการใสพ่ ืน้ หลงั ดงั รูป 4.6.3 การใส่รูปภาพเป็ นพนื้ หลังใหก้ ับเวบ็ ไซต์ โดยใช้ CSS 1. คลกิ ท่เี มนู Modify > Page Properties

2. จะปรากฏหนา้ ตา่ ง Page Properties เลือกแท็บ Appearance (CSS) 3. คลกิ ป่มุ Browse เพ่ือเลือกรูปภาพท่ีตอ้ งการ 4. คลกิ รูปภาพ 5. คลิก OK 6. จะแสดงช่ือไฟลร์ ูปภาพ 7. เลือกรูปแบบการแสดงผลของรูปภาพพืน้ หลงั ท่ีกาหนด เลือก Repeat เพ่ือทาซา้ รูปภาพ 8. คลกิ ป่มุ Apply 9. คลกิ ป่มุ OK 10. จะแสดงผลการใสร่ ูปภาพพืน้ หลงั 4.6.4 การใสสีพนื้ หลังใหก้ ับเวบ็ ไซต์ โดยใช้ HTML 1. คลิกท่เี มนู Modify > Page Properties

2. จะปรากฏหนา้ ตา่ ง Page Properties เลอื กแท็บ Appearance (HTML) 3. เลือก Background Color เปล่ยื นสีพนื้ หลงั ตามท่ีตอ้ งการ 4. คลกิ ท่ปี ่มุ Apply 5. คลกิ ท่ปี ่มุ OK

6. จะไดผ้ ลการใสพ่ ืน้ หลงั ดงั รูป 4.6.5 การใส่รูปภาพเป็ นพนื้ หลังใหก้ บั เวบ็ ไซต์ HTML 1. คลิกท่ีเมนู Modify > Page Properties