การสร้างเว็บเบื้องต้น

หน่วยท่ี 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