สารบ ญ บทท 1 กระบวนการพ ฒนาเว บไซต... 1 อยากเป นเว บมาสเตอร ต องเตร ยมต วอย างไร... 1 ผ ท เก ยวข องในการพ ฒนาเว บไซต... 1 ข นตอน และกระบวนการพ ฒนาเว บไซต... 2 บทท 2 การเร มต นในการออกแบบเว บไซต... 3 การจ ดระบบข อม ลในเว บไซต... 3 ไฟล ภาพกราฟ กท นามาใช ในการทาเว บ... 3 การแสดงภาษา... 5 การกาหนดช อไฟล และนามสก ลของไฟล เอกสารเว บ... 5 หล กเกณฑ ในการเล อกภาพ Graphic... 6 หล กเกณฑ การใช Multimedia... 6 หล กเกณฑ ในการสร างเอกสาร เว บเพจ... 6 หล กเกณฑ ในการนาเน อหาหร อ Software จากภายนอกมาแสดงบน เว บไซต... 7 บทท 3 การออกแบบเว บไซต... 8 แนวค ดในการออกแบบ... 8 หล กในการออกแบบเว บไซต... 9 หล กการออกแบบเว บเพจ... 12 บทท 4 การออกแบบระบบเนว เกช นสาหร บเว บ... 13 ร ปแบบของระบบเนว เกช น... 13 ระบบเนว เกช นท ม ประส ทธ ภาพ... 14 บทท 5 Macromedia Dreamweaver... 15 System Requirements... 15 ข นตอนในการต ดต ง โปรแกรม Dreamweaver... 16 ข นตอนเป ดใช งานโปรแกรม Dreamweaver... 20 ร จ กก บโปรแกรม Dreamweaver... 21 ส วนการทางานเบ องต นในโปรแกรม Dremweaver... 22 บทท 6 การกาหนดค าเร มต น Dreamweaver... 25 การกาหนด Font... 25 การต งกาหนดค าของเอกสารเร มต น... 26 การต งค าไฟล เอกสารเร มต น... 27 กาหนดค า Title เพ อใช แสดงใน Title bar บนโปรแกรมเว บเบราเซอร... 27
สารบ ญ (ต อ) บทท 7 การกาหนด Dreamweaver Site... 28 การสร าง Site... 28 บทท 8 การใส เน อหาให ก บเว บเพจ... 30 การข นบรรท ดใหม ในโปรแกรม Dreamweaver... 30 การจ ดร ปแบบต วอ กษร โดยการกาหนดค า Property... 30 ข นตอนในการใส อ กษรพ เศษแบบต างๆ... 31 ข นตอนการแสดงผลเว บเพจบน Browser... 32 บทท 9 การใส ร ปภาพให ก บเว บเพจ... 33 ข นตอนในการแทรกร ปภาพลงบนเว บเพจ... 33 การกาหนดค ณสมบ ต ของร ปภาพ... 34 บทท 10 การเช อมโยงเอกสาร (Link)... 35 การทา Link... 35 - การทาเมน ข อความ Link... 35 - การทาเมน ร ปภาพ Link... 35 กาหนดล กษณะการเป ดหน าเว บเพจ หล งจากคล กท Link... 36 บทท 11 ร จ กก บ Cascading Style Sheet (CSS)... 37 ส วนประกอบของ CSS... 37 บทท 12 การอ พโหลดเว บไซต (FTP)... 38 ข นตอนการสร าง FTP Connection... 38 ข นตอนการอ พโหลดข อม ลข น Web Server... 40 ข นตอนการดาวน โหลดข อม ลจาก Web Server ลงมาแก ไข... 40
1 บทท 1 กระบวนการพ ฒนาเว บไซต อยากเป นเว บมาสเตอร ต องเตร ยมต วอย างไร ศ กษาข อม ลเก ยวก บข นตอนและองค ประกอบในการพ ฒนาบร หารและด แลเว บไซต เพ มเต มความร ในเร องของเคร องม อต างๆ ท ใช ในการพ ฒนาเว บไซต ค นคว าหาแนวค ดใหม ๆ เทคน คว ธ การนาเสนอใหม ๆ หร อแนวโน มของการพ ฒนาเว บไซต ในอนาคต เข าใจจ ดเด นและจ ดด อยของเทคโนโยล ตลอดจนสามารถปร บให เข าก บสภาพท เหมาะสมท ส ดได ผ ท เก ยวข องในการพ ฒนาเว บไซต Webmaster ร บผ ดชอบในการด แลกระบวนการพ ฒนาเว บไซต ของท มงาน และเป นผ ควบค มใน เร องของการออกแบบ, เน อหา และรายละเอ ยด ทางด านเทคน ค นอกจากน นจะต องคอยต ดตาม และตรวจสอบเว บไซต ขององค กรเพ อหาข อผ ดพลาด เพ อทาการแก ไขต อไป Web Site Developer ร บผ ดชอบในการสร างเว บเพจ โดยใช เคร องม อต างๆม ความสามารถใน การเข าถ งพ นท ท ม การจ ดเก บเว บไซต เพ อทาการ Update หร อเพ มเต มข อม ลต างๆในเว บไซต ได อย างรวดเร ว System Administrator ร บผ ดชอบในการด แล Web Server รวมถ ง Hardware และ Software อ นๆท เก ยวข อง Content Editor ร บผ ดชอบในการป อนเน อหาเข าส เว บไซต อาจจะมาจากต วแทนของหน วยงาน ต างๆ ในองค กรน น เพ อทาให เน อหาบนเว บไซต กระจายอย างท วถ ง Translator ร บผ ดชอบในการแปลเน อหาจากภาษาไทยเป นภาษาอ งกฤษ
2 ข นตอน และกระบวนการพ ฒนาเว บไซต ม ด งน ข นตอนท 1 : เก บรวบรวมข อม ลสาหร บพ ฒนาเว บไซต 1. กาหนดเป าหมายหล กของเว บไซต 2. เน อหาสาหร บจ ดทาเว บไซต ข นตอนท 2 : พ ฒนาเน อหา (Site Contact) 1. สร างกลย ทธ การนาเสนอข อม ล เพ อให เน อหาบนเว บไซต เป นท น าสนใจ 2. กาหนดขอบเขตเน อหาท จะนาเสนอ 3. จ ดร ปแบบเน อหาข อม ลให ถ กต องอย างม ระบบ ข นตอนท 3 : พ ฒนาโครงสร างเว บไซต (Site Structure) 1. จ ดทาแผนผ งโครงสร างข อม ล 2. พ ฒนาระบบเนว เกช น ข นตอนท 4 : ออกแบบและพ ฒนาเว บไซต (Visual Design) 1. ออกแบบล กษณะหน าจอโฮมเพจ และเว บเพจ 2. พ ฒนาเว บเพจต นแบบท จะใช สาหร บการพ ฒนาเว บไซต 3. พ ฒนาเคร องม อสาหร บ Update หร อเพ มเต มข อม ลต างๆในเว บไซต ข นตอนท 5 : พ ฒนาและดาเน นการ (Production and Operation) 1. ใส ข อม ล และเน อหาท จะนาเสนอลงในหน าจอโฮมเพจ และเว บเพจ 2. เป ดต วเว บไซต และทาให เป นท ร จ ก 3. ด แล และพ ฒนาต อเน อง
3 บทท 2 การเร มต นในการออกแบบเว บไซต การจ ดระบบข อม ลในเว บไซต ก อนการออกพ ฒนาเว บไซต ให ทาการวางแผน และท าการก าหนดห วข อท ต องการในการน าเสนอ ก อนท กคร ง เพ อช วยให การพ ฒนาเว บไซต ออกมาอย างม ประส ทธ ภาพ และง ายต อการพ ฒนาต อ สร างความส มพ นธ เอกสารข อม ล โดยเร ยงลาด บความสาค ญ ของข อม ลท ใช ในการนาเสนอ ก าหนดช อไฟล ของเอกสารเว บ ให สามารถส อเข าใจได ง าย และต องท าการต งช อไฟล เป น ภาษาอ งกฤษเท าน น สร างโฟลเดอร เฉพาะ สาหร บเอกสารเว บแต ละช ด/เร อง เพ อความเป นระเบ ยบ และต องท าการต ง ช อโฟลเดอร เป นภาษาอ งกฤษเท าน น จ ดหาภาพ หร อสร างภาพท เก ยวข องก บเน อหา หล งจากน นให นาภาพท ต องใช งานท งหมดบ นท กไว ในโฟลเดอร ท สร างไว ก อน เพ อความสะดวกต อการเร ยกใช งาน สร างเอกสารเว บ โดยการลงรห ส HTML หร อใช โปรแกรมช วย หล งจากน นให น าไฟล เอกสาร HTML ท กไฟล บ นท กไว ในโฟลเดอร ท สร างไว ก อน เพ อความสะดวกต อการเร ยกใช งาน ตรวจสอบผล เอกสาร HTML ด วยเว บเบราเซอร เพ อแก ไขข อผ ดพลาดท อาจเก ดข น เน องจาก เว บเบราเซอร แต ละค าย แต ละร น ร จ กคาส ง HTML ไม เท าก น ไฟล ภาพกราฟ กท นามาใช ในการทาเว บ ภาพกราฟ ก หร อร ปกราฟ กท น ามาใช ในการท าเว บเพจ หร อน ามาใช ในอ นเทอร เน ต จะต องเป น ไฟล ล กษณะเฉพาะ ป จจ บ นน ยมใช ก น 3 ฟอร แมต ค อ ไฟล ฟอร แมต JPEG (Joint Photographer's Experts Group File) ไฟล ฟอร แมต GIF (Graphics Interlace File) ไฟล ฟอร แมต PNG (Portable Network Graphics) ไฟล สก ล JPG (Joint Photographer s Experts Group) เป นอ กไฟล หน งท น ยมใช บน Internet ม กใช กรณ 1. ภาพท ต องการนาเสนอม ความละเอ ยดส ง และใช ส จานวนมาก (สน บสน นถ ง 24 bit color) 2. ต องการบ บไฟล ตามความต องการของผ ใช 3. ไฟล ชน ดน ม กจะใช ก บภาพถ ายท นามาสแกน และต องการนาไปใช บนอ นเทอร เน ต เพราะให ความ คมช ดและความละเอ ยดของภาพส ง จ ดเด น 1. สน บสน นส ได ถ ง 24 bit 2. สามารถกาหนดค าการบ บไฟล ได ตามท ต องการ 3. ม ระบบแสดงผลแบบหยาบและค อยๆ ขยายไปส ละเอ ยดในระบบ Progressive 4. ม โปรแกรมสน บสน นการสร างจานวนมาก
4 5. เร ยกด ได ก บ Graphics Browser ท กต ว 6. ต งค าการบ บไฟล ได (compress files) จ ดด อย 1. ทาให พ นของร ปโปร งใสไม ได 2. ข อเส ยของการบ บไฟล (Compress File) กาหนดค าการบ บไฟล ไว ส ง (1-10) แม ว าจะช วยให ขนาดของไฟล ม ขนาดต า แต ก ม ข อเส ย ค อ เม อ ม การส งภาพจาก Server ไปแสดงผลท Client จะทาให การแสดงผลช ามาก เพราะต องเส ยเวลาในการคลาย ไฟล ด งน นการเล อกค าการบ บไฟล ควรกาหนดให เหมาะสมก บภาพแต ละภาพ ไฟล สก ล GIF (Graphics Interlace File) ภาพกราฟ กสก ล GIF พ ฒนาโดยบร ษ ท CompuServe จ ดเป นไฟล ภาพสาหร บการเผยแพร ผ าน อ นเทอร เน ตต งแต ย คแรก จ ดเด น 1. สามารถใช งานข ามระบบ (Cross Platform) หมายความว า คอมพ วเตอร ท กระบบ ไม ว าจะใช Windows, Unix ก สามารถเร ยกใช ไฟล ภาพสก ลน ได 2. ม ขนาดไฟล ต า จากเทคโนโลย การบ บอ ดภาพ ทาให สามารถส งไฟล ภาพได รวดเร ว 3. สามารถทาพ นของภาพให เป นพ นแบบโปร งใสได (Transparent) 4. ม ระบบแสดงผลแบบหยาบและค อยๆ ขยายไปส ละเอ ยดในระบบ Interlace 5. ม โปรแกรมสน บสน นการสร างจานวนมาก 6. เร ยกด ได ก บ Graphics Browser ท กต ว 7. ความสามารถด านการนาเสนอแบบภาพเคล อนไหว (GIF Animation) จ ดด อย 1. ไฟล ชน ดน ก ม จ ดด อยในเร องของการแสดงส ซ งแสดงได เพ ยง 256 ส ท าให การน าเสนอภาพถ าย หร อภาพท ต องการความคมช ดหร อภาพสดใส จะต องอาศ ยฟอร แมตอ น ไฟล.GIF ม 2 สก ล ได แก GIF87 พ ฒนาข นในป ค.ศ. 1987 เป นไฟล กราฟ กร นแรกท สน บสน นการน าเสนอบนอ นเทอร เน ต เป นไฟล ท ม ขนาดเล กและ แสดงผลส ได เพ ยง 256 ส และกาหนดให แสดงผลแบบโครงร างได (Interlace) GIF89A พ ฒนาข นในป ค.ศ. 1989 เป นไฟล กราฟ กท พ ฒนาต อจาก GIF87 โดยเพ มความสามารถการแสดงผลแบบพ นโปร งใส (Transparent) และการสร างภาพเคล อนไหว (GIF Animation) ซ งเป นไฟล กราฟ กท ม ความสามารถพ เศษโดยนาเอาไฟล ภาพหลายๆ ไฟล มารวมก นและน าเสนอภาพเหล าน นโดย อาศ ยการหน วงเวลา ม การใส ร ปแบบการน าเสนอล กษณะต างๆ (Effects) ในล กษณะ ภาพเคล อนไหว การบ บอ ดภาพ เทคน คการบ บอ ดภาพสก ล GIF เป นเทคน คการบ บอ ดคงส ญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยข อม ลเด มจะถ กสร างข นใหม ด วยว ธ สร าง Index ส จากส ท ซ าๆ และใกล เค ยง
5 ก น โดยจะ Scan แนวต งของภาพท งหมด และ Scan แนวนอนของภาพท งหมด และเปร ยบเท ยบว าแนวใด ได ข อม ลท จะบ นท กเป นไฟล น อยกว าก น ไฟล สก ล PNG (Portable Network Graphics) ไฟล สก ลล าส ดท นาจ ดเด นของไฟล GIF และ JPEG มาพ ฒนาร วมก น ทาให ภาพในสก ลน แสดงผลส ได มากกว า 256 ส และย งสามารถทาพ นภาพให โปร งใสได จ งเป นไฟล ภาพท ได ร บความน ยมมากในป จจ บ น ด วยอ กสก ลหน ง ค ณสมบ ต ของภาพค อ สามารถใช งานข ามระบบ (Cross Platform) หมายความว า ระบบคอมพ วเตอร ท กระบบ ไม ว าจะ ใช Windows, Unix ก สามารถเร ยกใช ไฟล ภาพสก ลน ได ขนาดไฟล เล ก ด วยเทคน คการบ บอ ดคงส ญญาณ LZW สามารถทาภาพโปร งใสจากส พ น 256 ระด บ แสดงภาพแบบสอดประสานเช นเด ยวก บ GIF โดยม ความคมช ดท ด กว า ม ค ณสมบ ต Gamma ท าให ภาพสามารถปร บต วเองได ตามจอภาพ และปร บระด บความสว างท แท จร งตามท ควรจะเป น จ ดเด น 1. สน บสน นส ได ถ งตามค า True color (16 bit, 32 bit หร อ 64 bit) 2. สามารถกาหนดค าการบ บไฟล ได ตามท ต องการ 3. ม ระบบแสดงผลแบบหยาบและค อยๆ ขยายไปส ละเอ ยด (Interlace) 4. สามารถทาพ นโปร งใสได จ ดด อย 1. หากกาหนดค าการบ บไฟล ไว ส ง จะใช เวลาในการคลายไฟล ส งตามไปด วย แต ขนาดของไฟล จะม ขนาดต า 2. ไม สน บสน นก บ Graphic Browser ร นเก า สน บสน นเฉพาะ IE 4 และ Netscape 4 3. ความละเอ ยดของภาพและจานวนส ข นอย ก บ Video Card 4. โปรแกรมสน บสน นในการสร างม น อย การแสดงภาษา เล อกฟอนต ท ต องการจากต วเล อก Font โดยเอกสารภาษาไทยควรก าหนดฟอนต เป น MS Sans Serif หร อ Tahoma สาหร บเอกสารภาษาอ งกฤษ กาหนดเป น Arial ขนาดต วอ กษร สามารถกาหนดได อ สระ และเม อกาหนดแล ว ผ ใช ปลายทางย งสามารถปร บเปล ยน ได อ สระ การพ มพ ข อความไม ต องสนใจระยะก นหล ง เพราะโปรแกรมจะต ดค าให โดยอ ตโนม ต ส าหร บ เอกสารภาษาไทย ควรเว นวรรคให ก บประโยคเป นระยะๆ อย าพ มพ ต ดก น การกดป ม <Enter> จะกระทาเม อต องการข นบรรท ดใหม, เว นบรรท ด หร อจบพารากราฟ หากต องการข นบรรท ดใหม ก อนจบพารากราฟให กดป ม <Shift><Enter> การกาหนดช อไฟล และนามสก ลของไฟล เอกสารเว บ ควรใช ต วอ กษร a - z หร อต วเลข 0-9 หร อผสมก น ต วอ กษร a - z ควรเป นต วพ มพ เล ก
6 ห ามต งช อไฟล เป นภาษาไทย ช อไฟล แรกของเอกสารเว บ ม กจะใช ช อ index หร อ default หล กเกณฑ ในการเล อกภาพ Graphic ขนาดไฟล ไม ควรเก น 80 ก โลไบต เพ อความรวดเร วในการแสดงผล ใช ไฟล แบบ JPEG สาหร บร ปถ าย หร อร ปท ม ส เก น 256 ส ใช ไฟล แบบ GIF สาหร บภาพวาดหร อภาพการ ต นท ม ส ไม เก น 256 ส เล อกภาพท ม ความน าสนใจและด งด ด เพ อไม ให เส ยเวลาท เส ยไปในการ Download ภาพเปล าประโยชน หล กเกณฑ การใช Multimedia ในการใช งาน Multimedia บนเว บไซต จะม ข อด ค อท าให ม ความสวยงามแปลกและเพ มความ น าสนใจมากข น แต จะม ข อเส ยค ออาจท าให เก ดความล าช าในการ Download หน าเว บเพจ เพ มมากข น และการใช ไฟล Multimedia บางประเภทจ าเป นท เคร องคอมพ วเตอร ของผ เข าชมต องท าการต ดต ง โปรแกรมเพ มเต มทาให ไม สามารถแสดงผลได ก บคอมพ วเตอร ท ย งไม ได ต ดต งโปรแกรมด งกล าว หล กเกณฑ ในการใช งานไฟล Multimedia แบบ Flash ได แก ไม ควรสร าง Multimedia ท ประกอบด วยร ปภาพจ านวนมากควรจะใช เคร องม อวาดร ปของโปรแกรม Flash เอง เพ อให ได ขนาดไฟล ท ไม ใหญ จนเก นไปและ Download ได เร วกว า หล กเกณฑ ในการใช ไฟล Video และ Audio ไม ควรใช ไฟล แบบ WAV เพราะจะม ขนาดใหญ ควร เปล ยนมาใช ไฟล ท ม ขนาดเล กกว าเช น mp3,ram หร อ wmv หากต องการแสดงผล Video ควรจะ ใช กระบวนการแบบ Streaming ซ งเป นการลดระยะเวลาในการ Download ท าให การแสดงผล รวดเร วย งข น เช นไฟล แบบ Streaming ของ Real,Quick Time และWindows Media เป นต น หากม การเร ยกใช ไฟล Multimedia ท ต องการโปรกรมพ เศษในการเร ยกด ควรม จะทา Link สาหร บ การ Download โปรแกรมเหล าน นไว ด วยหากเป ดโอกาสให ผ เข าชมสามารถ Download โปรแกรมเหล าน นจากเว บไซต หน วยงานน น จะต องท าการตรวจสอบข อม ลทางด านล ขส ทธ ของ เจ าของโปรแกรมคอมพ วเตอร น นๆก อนว าสามารถทาได หร อไม หล กเกณฑ ในการสร างเอกสาร เว บเพจ 1. กาหนดการเข ารห ส (Encoding,Charset)ของภาษไทยให ถ กต อง โดยเล อกจากรห ส ด งต อไปน 1. การเข ารห สแบบ windows -847 สาหร บระบบปฏ บ ต การ windows ซ ง น ยมใช ก นอย าง แพร หลาย 2. การเข ารห ส แบบ tis-620 ของสาน กงานมาตรฐานอ ตสาหกรรมแห งประเทศไทย 3. การเข สารห สแบบ iso-8859-11 ของ ISO ต วอย างการเข ารห สในไฟล เว บเพจโดยคาส ง HTML <meta http-equiv= Content-type content= text/html; charset=windows-874 > ทาการกาหนดช อให ก บท กหน า เพ อให การแสดงบน Task Bar ของ Windows ถ กต อง ต วอย างการกาหนดช อเอกสารในไฟล เว บเพจโดยใช คาส ง html <head>
7 <title>โครงสร างการบร หารงาน</title> </head> ทาการกาหนดข อม ลสาหร บ Tag Author, Descriptionและ Keywords เพ อให ง ายต อการทาด ชน สาหร บ Search Engine ต วอย างการกาหนด Author <meta name= Author Trin Tantsetthi trin@nectec.or.th > ต วอย างการกาหนด Description <meta name= Description content= Information about Thailand,Best directory Service for information (www/gopher/ftp) Server in Thailand > ต วอย างการกาหนด Keywords <meta name = Keywords content= Thailand,NECTEC,Internet, Directories,Y2k,Year 2000,Service,Ellectronment, Thai Government, IT Policy > ในการพ มพ Tag ของคาส ง HTML ควรจะใช ต วอ กษรต วพ มพ เล กท งหมด หร อต วพ มพ ใหญ ท งหมด เพ อให สามารถเปล ยนแปลงเอกสารจาก HTML ไปเป น XHTML หร อ XML ในอนาคตทาได ง าย ข น หล กเกณฑ ในการนาเน อหาหร อ Software จากภายนอกมาแสดงบน เว บไซต กรณ ท ม การนาเน อหาจากภายนอกมาแสดง ณ ย งเว บไซต ขององค กรเช น เน อหาท เป นเอกสาร เว บเพจ หร อไฟล เอกสารต างๆ (Word, Acrobat) รวมท ง Software ต างๆจะต องกระท าตามหล กเกณฑ ด งต อไปน 1. ทาการตรวจสอบข อม ลทางด านล ขส ทธ และทร พย ส นจากเจ าของเน อหา หร อ Software เหล าน น เส ยก อนว าเป ดโอกาสให นาไปเผยแพร ต อได หร อไม 2. หากต องม การขออน ญาตเจ าของเน อหาหร อ Software จะต องม การท าหน งส อเป นลายล กษณ อ กษร 3. กรณ ท ได ร บอน ญาตแล วหร อสามารถเผยแพร ได โดยไม ผ ดต อเง อนไขทางด านล ขส ทธ และทร พย ส น ทางป ญญาจะต องม การแสดงแหล งท มาของเน อหาเหล าน นประกอบก บเน อหาด วยท กคร ง เช น ได มาเว บไซต ใด หร อได ร บอน ญาตจากหน วยงานหร อบร ษ ทใดเป นต น ยกเว นกรณ ท ม การจ ดซ อ เน อหาเหล าน นมาเพ อนามาเผยแพร โดยเฉพาะ
8 บทท 3 การออกแบบเว บไซต แนวค ดในการออกแบบ เร ยนร จากเว บไซต ต างๆ เป นว ธ ท ช วยให เราม ไอเด ยในการออกแบบหน าเว บของเราก ค อ การสารวจร ปแบบและเทคน คจาก เว บไซต ต างๆ ท งท เราชอบและไม ชอบ ซ งอาจจะเป นเว บไซต ท อย ในกล มเด ยวก น หร ออาจเป นเว บไซต อ นๆ ท ไม เก ยวข องเลยก ได โดยพยายามส งเกตท งล กษณะท ด เพ อน ามาประย กต ใช และล กษณะท ไม เหมาะสม เพ อหล กเล ยงไม ให ข อผ ดพลาดเก ดข นก บเว บไซต ของเรา ว ธ น นอกจากจะได พบเห นร ปแบบของเว บไซต ท น าสนใจแล ว เราย งสามารถเร ยนร เทคน คการสร างเว บน นด วยค าส ง View Source ในเมน บราวเซอร เพ อ แสดงโค ด HTML ให ค ณศ กษาได อ กด วย ประย กต ร ปแบบจากส งพ มพ กรณ น จะใช ได เม อเรากาล งจะออกแบบเว บไซต ของหน วยงานท ม ส งพ มพ ของต วเอง ซ งอาจจะเป น แผ นผ บ. โปสเตอร, หน งส อ หร อห วจดหมาย ซ งเราสามารถนาร ปแบบเหล าน นมาประย กต ใช ในหน าเว บเพจ ได เช น ล กษณะของโทนส กราฟ ก หร อต วอ กษร ซ งจะกลายเป นการแสดงถ งเอกล กษณ ของหน วยงาน โดย ร ปแบบท คล ายก นในส อหลายๆประเภท ใช แบบจาลองเปร ยบเท ยบ แนวค ดในการออกแบบหน าเว บท สาค ญอ กอย างหน ง ค อ การใช แบบจาลองเปร ยบเท ยบหร ออ ปมา พ ดง ายๆก ค อการใช ส งท เราค นเคยในการอธ บายถ งส งท เราไม ค นเคยเท าน นเอง ในข นตอนน เราจะนาเอาการ จาลองล กษณะท มองเห น (Visual metaphor) มาใช โดยเราสามารถเล อกแบบจาลองมาใช ในเว บได จากส ง ต างๆรอบต วเราไม ว าจะเป นร ปภาพจากส งพ มพ ล กษณะหน าตาของอ ปกรณ หร อแม กระท งร ปแบบของร าน ขายของ เป นต น และส งสาค ญ ค อ ร ปแบบท เล อกมาใช น น ต องม ล กษณะท คนส วนใหญ ค นเคย เข าใจได ง าย ช วยสน บสน นแนวค ด และส งเสร มกระบวนการส อสารของเว บไซต เช น ถ าค นต องการแบบจ าลองเก ยวก บ ระบบข อม ลก อาจจะน กถ งล กษณะของหน งส อ หร อ ห องสม ด แทนท จะเป นรถยนต หร อดอกไม ท ไม ม ความ เก ยวข องก นเลย แต ผ ออกแบบชอบ ออกแบบอย างสร างสรรค หมดเวลาแล วสาหร บการสร างเว บท น าเบ อท เต มไปด วยหน งส อ ค ณควรจะสร างเว บท สามารถด งด ด ความสนใจท งทางด านเน อหาและร ปแบบ ซ งกราฟ กจะเป นองค ประกอบท สาค ญในการแสดงออกถ งส งท เรา ต งใจ ในบางคร งร ปเพ ยงร ปเด ยวก สามารถส อความหมายท เราต องการได โดยไม จาเป นต องใช คาบรรยายใดๆ ด งน นส งสาค ญก ค อการเล อกร ปแบบกราฟ กท เหมาะสมก บความหมายท ต องการส อสาร พยายามอย าย ดต ดก บร ปแบบเด มๆ ของเว บไซต ท วไป กล าทดลองสร างเว บร ปแบบใหม ท แตกต าง อย างสร างสรรค เว บเพจไม ได เป นเพ ยงแค การรวมของต วหน งส อ, ร ปภาพ, โลโก และป มต างๆ ซ งเรา สามารถออกแบบเว บให ม หน าตาคล ายโปสเตอร แมกกาซ น หร อแม กระท งหน าจอท ว ได ด วยเทคน คการ ออกแบบต างๆอย างไม จาก ด ลองพยายามศ กษาและส งเกตเทคน คการออกแบบโดยเฉพาะทางกราฟ กด ไซน จากส อต างๆ ไม ว าจะเป นหน งส อ, แมกกาซ น, โปสเตอร, ท ว และท สาค ญท ส ดค อจากเว บไซต อ นๆ
9 หล กในการออกแบบเว บไซต สร างลาด บช นความสาค ญขององค ประกอบ หล กสาค ญในการออกแบบหน าเว บอย างหน งก ค อ การสร างลาด บช นความสาค ญขององค ประกอบ ต างๆภายในหน าเว บ เพ อเน นให เห นว าอะไรเป นเร องสาค ญมาก สาค ญรองลงไป หร อส าค ญน อยตามล าด บ การจ ดระเบ ยบขององค ประกอบอย างเหมาะสม จะช วยแสดงถ งความส มพ นธ ระหว างองค ประกอบต างๆใน หน าเว บได ในการออกแบบเราจ งควรให ความสนใจก บป จจ ยเหล าน ด วย ขนาดเปร ยบเท ยบ (relative size) ขององค ประกอบต างๆในหน าเว บจะช วยส อความหมายถ ง ความสาค ญของส งหน งต อส งอ นๆ โดยองค ประกอบท ม ขนาดใหญ ย อมสามารถด งความสนใจของผ ใช ได ก อน และย งแสดงถ งความสาค ญท ม เหน อองค ประกอบขนาดเล ก ต วอย างท เราเห นก นอย ท วไปค อ การก าหนด ห วข อเร องต างๆ ให ม ขนาดใหญ กว าส วนของเน อหาเสมอ เพ อแสดงให ผ ใช มองเห นได ช ดเจน และ เข าใจ จ ดสาค ญของเน อหาได ด ข น แต เม อใดก ตามท ค ณกาหนดให ส วนของห วข อม ขนาดเล กกว าเน อหาก จะส งผลให ผ ใช เก ดความส บสนได ท นท ล กษณะขององค ประกอบต างๆ ท ต องคาน งถ งม ด งน o ตาแหน งและลาด บขององค ประกอบ แสดงถ ง ลาด บความสาค ญของข อม ลท ค ณต องการ ให ผ ใช ได ร บ เน องจากภาษาส วนใหญ รวมถ งภาษาไทย และอ งกฤษจะอ านจากทางซ ายไป ขวา และจากบนลงล าง ค ณจ งควรจ ดวางส งท ม ความส าค ญไว ท ส วนบน หร อ ด านซ าย ของหน าอย เสมอ เพ อให ผ ใช มองเห นได ก อน แต ถ าค ณจ ดวางส งส าค ญไว ท ส วนท ายของ หน า ผ ใช จานวนมากอาจจะไม ได ร บข อม ลน น o ส และความแตกต างของส แสดงถ งความสาค ญและความส มพ นธ ของส งต างๆภายในหน า ส ท เด นช ดเหมาะสาหร บองค ประกอบท ม ความสาค ญมาก ส วนองค ประกอบท ใช ส เด ยวก น ย อมส อความหมายถ งความส มพ นธ ท ใกล ช ดและความสาค ญท เท าเท ยมก น โดยท วไปการ ใช ส ท แตกต างก นอย างช ดเจนจะสามารถด งด ดความสนใจจากผ ใช ให มองเห น และ ตอบสนองอย างรวดเร ว แต การใช ส หลากหลายเก นไปอย างไม ม ความหมายเต มไปหมดท ง หน า กล บจะสร างความส บสนให ก บผ ใช เส ยมากกว า o ภาพเคล อนไหว เป นส งท ด งด ดความสนใจได เป นอย างด แต ค ณต องใช อย างจ าก ดและ ระม ดระว ง เพราะการท เราใช ส งเคล อนไหวในหน าเว บมากเก นไปน น จะท าให ม จ ดสนใจ บนหน าจอมากมายจนผ ใช ต ดส นใจได ล าบากว าส งไหนส าค ญกว าก น ด งน นเราควรใช ภาพเคล อนไหวโดยม เป าหมายท ช ดเจนว าจะให ผ ชมเพ งความสนใจไปตรงไหน สร างร ปแบบ บ คล ก และสไตล ร ปแบบของหน าเว บน นข นอย ก บเน อหา และเป าหมายของเว บไซต ว าต องการให ความร โฆษณา หร อขายส นค า เม อเราม แนวค ดของเว บไซต เร ยบร อยแล ว ก ถ งเวลาลงม อสร างหน าเว บท จะใช เป นส อในการ นาเสนอเน อหาภายในแก ผ ใช ซ งการออกแบบท ด ควรจะประกอบด วยร ปแบบ บ คล ก และสไตล ท สอดคล อง ก บเน อหา และสร างความช ดเจนในการส อสาร ร ปแบบ การเล อกร ปแบบของหน าเว บท เหมาะสมจะช วยสร างความเข าใจของผ ใช ได ด ข น โดยค ณสามารถ จ าลองร ปแบบของส งต างๆท ม ความส มพ นธ ก บเน อหาของเว บไซต ไปใช ได เช น เว บท ม เน อหาเก ยวก บ ภาพยนต ก อาจจะออกแบบหน าเว บให คล ายก บโรงภาพยนต จร งๆ สไตล สไตล ในท น หมายถ ง ล กษณะการจ ดโครงสร างของหน า, ร ปแบบกราฟ ก, ชน ดและการจ ดต วอ กษร, ช ดส ท ใช และรวมถ งองค ประกอบอ นๆท งหมด เราไม ควรสร างสไตล ของเว บไซต ตามอ าเภอใจโดยไม
10 คาน งถ งความเหมาะสม และจะต องระว งเป นพ เศษ เม อนากราฟ กจากเว บไซต อ นท ม สไตล แตกต างจากของ เรามาใช นอกจากน ร ปแบบของกราฟ กต างๆรวมถ งสไตล ของเว บไซต ควรม ความส มพ นธ ก บเน อหาในเว บไซต อย างม เหต ผล ไม ใช ใช เพ ยงเพ อแสดงฝ ม อว าเราสามารถตกแต งกราฟ กโดยใช เทคน คแปลกๆได และไม ว าเรา จะเล อกร ปแบบ บ คล ก และสไตล ใดมาใช ก ตาม เราควรใช ล กษณะเหล าน นให สม าเสมอตลอดท งเว บไซต เพ อป องก นความส บสนท อาจเก ดข นได เช น ถ าเราใช ป มเนว เกช นท เป นแบบ 2D มาตลอด แล วกล บ เปล ยนเป น 3D ในบางส วน ผ ใช จะร ส กส บสนก บความแตกต างท เก ดข นอย างไม ม เหต ผลได สร างความสม าเสมอตลอดท งไซต ป ญหาอย างหน งท ค ณอาจจะเคยพบเห นมาแล วในบางเว บไซต ค อ การม ร ปแบบในแต ละหน าท ไม เหม อนก น จนทาให เราไม แน ใจว าย งอย ในเว บเด มหร อเปล า เม อเราได ออกแบบโครงสร างของหน าเว บเพจ, ร ปแบบกราฟ ก, ล กษณะต วอ กษร, โทนส และองค ประกอบอ นๆเป นท เร ยบร อยแล ว ก ควรนะล กษณะ ด งกล าวไปใช ก บท กๆหน าให เป นมาตราฐานเด ยวก นตลอดท งเว บไซต เพ อเป นเอกล กษณ ให ผ ใช สามารถ จดจาล กษณะของเว บไซต ได ด ย งข น นอกจากน น ความสม าเสมอของโครงสร างหน าเว บและระบบเนว เกช นก จะทาให ผ ใช ร ส กค นเคย และสามารถคาดการณ ล กษณะของเว บได ล วงหน า ซ งจะช วยให การท องเว บเป นไป อย างสะดวก จ ดวางองค ประกอบท สาค ญไว ในส วนบนของหน าเสมอ ส วนบนของหน าในท น หมายถ ง ส วนแรกของหน าท จะปรากฏข นในหน าต างบราวเซอร โดยท ย งไม ม การ เคล อนหน าจอใดๆ เน องจากส วนบนส ดของหน าจะเป นบร เวณท ผ ใช มองเห นได ก อน ด งน นส งท อย ในบร เวณ น จ งควรเป นส งท สาค ญและสามารถด งด ดความสนใจจากผ ใช ได โดยปรกต แล วส วนบนส ดน ควรประกอบด วย o ช อของเว บไซต เพ อให ผ ใช ร ได ท นท ว ากาล งอย ในเว บอะไร o ช อห วเร อง หร อช อแสดงหมวดหม ของเน อหาช วยให ผ ใช ร ถ งส วนของเน อหาท ปรากฏอย o ส งสาค ญท ค ณต องการโปรโมทในเว บไซต เพราะเป นบร เวณท ผ ใช ท กคนจะได เห นและให ความ สนใจมากท ส ด o ระบบเนว ช น เพ อให ผ ใช ม โอกาสคล กไปย งส วนท ต องการได ท นท โดยไม ต องรอให ข อม ลท ง หน าปรากฏข นมาจนครบก อน สร างจ ดสนใจด วยความแตกต าง การจ ดองค ประกอบให ภาพรวมของหน าม ความแตกต าง เป นส งท สาค ญท จะน าสายตาผ อ านไปย ง บร เวณต างๆ ส วนหน าท เต มไปด วยต วอ กษรจะด คล ายเป นแถบส เทาท ไม น าสนใจ สาหร บหน าท ถ กออกแบบ มาไม ด โดยเน นการใช กราฟ ก หร อต วอ กษรท มากเก นไป จะท าให ยากต อการมองหาข อม ลท ม ความส าค ญ จร งๆ เราสามารถใช เทคน คการจ ดโครงสร างของหน า (page layout) การจ ดระเบ ยบต วอ กษร (typography), การออกแบบกราฟ ก, การเล อกใช ส และการแสดงภาพประกอบ (illustration) เพ อน า สายตาผ อ านไปย งส วนสาค ญของเน อหาตามความเหมาะสม เราสามารถใช ความแตกต างของส เข ามาช วยสร างล กษณะเด นในหน าเว บ เพ อให เก ดการนาเสนอท น าสนใจได เพราะความแตกต างของส ท เก ดข นจะทาให ผ อ านสามารถแยกแยะบร เวณต างๆออกจากก นได ด ข น ต วอย างเช น การกาหนดพ นหล งของแต ละบร เวณให เป นส ต างๆก นเพ อแยกเน อหาออกเป นส ดส วน แต ต องแน ใจว าส พ นท ใช น นต ดก บส ของต วอ กษรอย างช ดเจน เพ อให อ านได อย างสะดวก จ ดแต งหน าเว บให เป นระเบ ยบและเร ยบง าย เน อหาในหน าเว บจาเป นต องอย ในร ปแบบท ด ง าย แยกเป นส ดส วน และไม ด แน นจนเก นไป การม ข อม ลหร อองค ประกอบท มากเก นไปท งในส วนของล งค และเน อหา จะท าให ผ อ านขาดความสนใจ ส บสน และเล กต ดตามในท ส ด ค ณจ งจาเป นต องจ ดการข อม ลในหน าเว บให ม ความร ส กเร ยบง าย เป นก นเอง และน า
11 ต ดตาม ว ธ การอย างหน งท จะช วยได ค อ การจ ดวางต วอ กษรและร ปภาพให เก ดพ นท ว าง ท าให ภาพรวมไม แน นจนเก นไป รวมถ งจ ดวางห วข อและเน อเร องอย างเป นระบบและช ดเจน ใช กราฟ กอย างเหมาะสม หลายคนอาจค ดว าการใช กราฟ กจานวนมากจะทาให เว บเราด ด และน าสนใจกว าเว บอ น แต ความ จร งแล ว การใช กราฟ กจานวนมากอย างไม เป นระเบ ยบ อาจส งผลล พธ ในทางตรงข ามก บส งท เราคาดหว งไว ก ได เราควรใช กราฟ กท เป นไอคอน, ป มลายเส น และส งอ นๆตามความเหมาะสมและไม มากเก นไป เพ อ หล กเล ยงโครงสร างของหน าท ย งเหย งไม เป นระเบ ยบ เช นเด ยวก บการใช ต วอ กษรขนาดใหญ ด วยค าส ง H1 และ H2 ท ควรใช ในปร มาณน อยๆ เพ อให ได ผลล พธ ส งส ด การใช กราฟ กมากเก นความจ าเป นจะท าให เก ด จ ดเด นท วไปท งหน า และเป นผลให ไม ม อะไรในหน าน นเด นข นมาจร งๆ
12 หล กการออกแบบเว บเพจ สามารถแบ งได 3 ล กษณะ ค อ 1. แบบลาด บข น (Hierarchy) เป นการจ ดแสดงหน าเว บ เร ยงตามลาด บก งก าน แตกแขนงต อเน อง ไปเหม อนต นไม กล บห ว 2. แบบเช งเส น (Linear) เป นการจ ดแสดงหน าเว บเร ยงต อเน องไปในท ศทางเด ยว 3. แบบผสม (Combination) เป นการจ ดหน าเว บชน ดผสมระหว างแบบลาด บข น และแบบเช งเส น
13 บทท 4 การออกแบบระบบเนว เกช นสาหร บเว บ การเข าถ งข อม ลอย างสะดวกเป นห วใจสาค ญของระบบเนว เกช น การม เน อหาในเว บไซต ท ด จะเป น ส งท ด งด ดให ผ เข ามาใช บร การอย างสม าเสมอ แต เน อหาน นจะไม ม ประโยชน เลยถ าผ ค นหาไม พบส งท ต องการ ด งน นความสาเร จของเว บไซต ส วนหน งมาจากการท ผ ใช สามารถพ งพาระบบเนว เกช นในการน าทางไปย งท หมาย ท ต องการได ระบบเนว เกช นน นอาจจะประกอบด วยองค ประกอบหลายๆอย าง เช น เนว เกช นบาร หร อ pop-up menu ซ งม กจะม อย ในท กหน าของเว บเพจ และอาจอย ในหน าเฉพาะท ม ร ปแบบเป นระบบสารบ ญ, ระบบ ด ชน หร อ Site Map ท สามารถให ผ ใช คล กผ านโครงสร างข อม ลไปย งส วนอ นๆได การเข าใจถ งร ปแบบและ องค ประกอบของระบบเนว เกช นเหล าน จะทาให ค ณออกแบบระบบเนว เกช นด วยองค ประกอบท เหมาะสมได อย างม ประส ทธ ภาพ ร ปแบบของระบบเนว เกช น ระบบเนว เกช นสาหร บเว บไซต ขนาดใหญ ม กใช หลายร ปแบบร วมก นเพ อช องทางการเข าถ งข อม ลให มากข น ซ งผ ออกแบบควรม ความเข าใจและเล อกใช อย างเหมาะสม โดยไม ให หลากหลายหร อจาก ดเก นไป ระบบเนว เกช นแบ งออกเป น 4 ร ปแบบ ด งน ระบบเนว เกช นแบบลาด บข น (Hierarchical) ระบบเนว เกช นแบบลาด บช นน เป นแบบพ นฐานท ผ คนม กใช ก นในเว บไซต อย แล วอย างไม ร ต ว การท เราม หน าโฮมเพจหน งหน า และม ล งค ไปย งหน าอ นๆภายในเว บไซต น นก ถ อเป นแบบลาด บช นอย างหน งแล ว แต เน องจากข อจาก ดในการเคล อนท ได เฉพาะในแนวต ง (บน-ล าง ค อจากหน าหล กไปย งหน าย อยถ ดลงไป หร อย อนกล บข นมา) ทาให เราจาเป นต องอาศ ยระบบเนว เกช นแบบอ นเพ มเต ม เพ อให ม ความคล องต วย งข น ระบบเนว เกช นแบบโกลบอล (Global) ระบบเนว เกช นแบบโกบอลหร อแบบตลอดท วท งไซต เป นระบบท ช วยเสร มข อจ าก ดของระบบเนว เกช นแบบลาด บช น ทาให สามารถเคล อนท ได ท งในแนวต งและแนวนอนอย างม ประส ทธ ภาพตลอดท งไซต โดยปรกต แล วระบบน จะใช เพ อเป นล งค ไปย งส วนหล กๆของเว บไซต ซ งอาจอย ในร ปของ เนว เกช นบาร ท วาง ไว ด านบนหร อด านล างส ดของเว บเพจท กหน าก ได
14 ระบบเนว เกช นแบบโลคอล (Local) สาหร บเว บท ม ความซ บซ อนมาก นอกจากระบบเนว เกช นแบบโกลบอลแล วย งอาจต องใช ระบบเนว เกช นแบบโลคอลหร อแบบเฉพาะส วนเข ามาช วย เม อม ยางส วนของเว บไซต ท ต องการระบบเนว เกช นซ งม ล กษณะเฉพาะต ว เช น ห วข อย อยของเน อหาท อย ภายในส วนหล กๆของเว บไซต เพ อเพ มความสะดวกและส อ ความหมายให ด ข น ระบบเนว เกช นเฉพาะท (Ad Hoc) ระบบเนว เกช นอ กแบบหน ง ค อ ระบบเนว เกช นแบบเฉพาะท ตามความจ าเป นของเน อหา ซ งก ค อ ล งค ของค าหร อข อความท น าสนใจซ งฝ งอย ในประโยค (embedded link) ท เช อมโยงไปย งรายละเอ ยด เก ยวก บคาน นๆ เพ มเต ม ปรกต แล วผ ด แลเน อหาในเว บไซต จะเล อกคาหร อวล ท น าสนใจในข อความมาสร าง เป นล งค เพ มให แต ก ต องระว งไม สร างล งค ให มากเก นไปในข อความแต ละย อหน าจนด รกหร อส บสน ระบบเนว เกช นท ม ประส ทธ ภาพ 1. เข าใจง าย 2. ม ความสม าเสมอ 3. ม การตอบสนองต อผ ใช 4. ม ความพร อมและเหมาะสมต อการใช งาน 5. นาเสนอหลายทางเล อก 6. ม ข นตอนส นและประหย ดเวลา 7. ม ร ปแบบท ส อความหมาย 8. ม คาอธ บายท ช ดเจนและเข าใจได ง าย 9. เหมาะสมก บว ตถ ประสงค ของเว บไซต 10. สน บสน นเป าหมายและพฤต กรรมผ ใช
15 บทท 5 Macromedia Dreamweaver ความต องการของโปรแกรม (System Requirements) ความต องการของโปแกรม (System Requirements) ความเร วของเคร องคอมพ วเตอร : จะต องไม ต ากว า 600 MHz Intel Pentium III Processor ระบบปฏ บ ต การ : ท สามารถต ดต งได ค อ Windows 98 SE, Windows 2000, Windows XP, or Windows Server 2003 หน วยความจา : จะต องไม น อยกว า 128 MB Ram(256 MB recommended) พ นท ในการต ดต ง : 275 MB available disk space
16 ข นตอนในการต ดต ง โปรแกรม Dreamweaver ม ด งน 1. ด บเบ ลคล กท ช อไฟล Set-up.exe 2. หล งจากน นจะเข าส ข นตอนการต ดต งโปรแกรม โดยจะปรากฏหน าจอด งน 3. คล กท ป ม Install
17 4. คล กท ป ม Accept 5. กรอก Serial Number แล วคล กท ป ม Next
18 6. เล อกโปรแกรมท ต องการต ดต ง หล งจากน นคล กท ป ม Install 7. โปรแกรมจะเร มทาการต ดต ง
19 8. เม อต ดต งโปรแกรมเร ยบร อยแล ว จะปรากฏหน าจอด งน
20 ข นตอนการเป ดใช งานโปรแกรม Dreamweaver ม ด งน 1. ทาการเป ดโปรแกรม Dreamweaver โดยเข าไปท เมน Start > All Programs > Adobe Master Collection CS6 > Adobe Dreamweaver CS6 2. เม อเป ดโปรแกรม Dreamweaver ในคร งแรกจะปรากฏหน าจอด งน 3. ให ทาการเล อกท Designer แล วทาการกดท ป ม OK จะปรากฏหน าจอด งน
21 ร จ กก บโปรแกรม Dreamweaver Dreamweaver เป นโปรแกรมของบร ษ ท Macromedia Inc. ท ใช ส าหร บออกแบบ และพ ฒนา เว บไซต เว บเพจและเว บ แอปพล เคช น ด วยโปรแกรม Dreamweaver เราสามารถท จะออกแบบ และ พ ฒนาเว บไซต โดยการเข ยนโค ดภาษา HTML หร อ ใช เคร องม อท โปรแกรม Dreamweaver ม ให ซ ง เคร องม อเหล าน จะสร างโค ดภาษา HTML ให ราโดยอ ตโนม ต โดยท เราไม จาเป นต องเข ยนโค ดภาษา HTML เอง ในป จจ บ นโปรแกรม Dreamweaver นอกจากจะสน บสน นการใช งานก บภาษา HTML และย ง สน บสน นการใช งานร วมก บเทคโนโลย ทางด านเว บอ นๆ ด วย เช น CSS และ Java Script เป นต น การสร าง เว บแอปพล เคช น (Web Application) ด วยโปรแกรม Dreamweaver น นสามารถท จะสร าง การต ดต อก บ ฐานข อม ล และด งข อม ลจากฐานข อม ลโดยไม จาเป นท ต องเข ยนโค ดของเซ ร ฟเวอร สคร ปต (Server Script) เลย ต วโปรแกรมจะสร างให เองโดยอ ตโนม ต ซ งจะทาให เวลาท ใช ในการพ ฒนาเว บแอปพล เคช นน นน อยลง
22 ส วนการทางานเบ องต นในโปรแกรม Dreamweaver ในโปรแกรม Dreamweaver จะประกอบไปด วยส วนการทางานหลายส วนด วยก น ด งน 1. Document Window อย ด านล างของ Document Toolbar ซ งเป นส วนท ใช แสดงเน อหาของเว บเพจท เราสร างข น และ กาล งทางานอย ในขณะน น 2. Insert Bar ประกอบไปด วยป มท ใช แทรกอ อบเจ กต (Object) ชน ดต างๆ เช น ร ปภาพ ตาราง และ เลเยอร เป นต น ลงในเว บเพจท เรากาล งทางานอย ในขณะน น 3. Property Inspector ใช แสดงค ณสมบ ต ของว ตถ หร อ ข อความท เราเล อกในเว บเพจ โดยเราสามารถท จะเปล ยนแปลง แก ไขค ณสมบ ต ต างๆ ของว ถ ท เราเล อกผ านทาง Property Inspector ได 4. Tag Selector อย ใน Status Bar ท อย ทางด านล างของ Document Window เม อเราคล กว ตถ ในเอกสารจะ ปรากฏ Tag Select ใน Status Bar ข นมา เม อเราคล กเล อก Tag Selector แล วแท กต างๆ ท ถ กล อมด วย แท กท เราเล อกจะถ กเล อกด วย
23 Site Panel ใช ในการจ ดการไฟล และ โฟลเดอร ท ใช ในการสร างเว บไซต นอกจากน ย งสามารถใช ด ไฟล ต างๆในเคร องได อ กด วย 5. Document Toolbar ประกอบไปด วยป มและ ป อปอ พเมน ท ใช ก าหนดร ปแบบม มมองของ Document Window ท เราก าล ง ทางานอย และ คาส งต างๆท ใช ท างานก บ Document Window อย างเช น การแสดงเว บเพจท สร างข นใน เว บบราวเซอร หร อ การกาหนดออปช นของ Document Window เป นต น
24 Code ในม มมองน Document Window จะแสดงเว บเพจในร ปแบบของโค ดภาษา HTML ท จะ ถ กสรางข นโดยโปรแกรม Dreamweaver หร อ เราเข ยนข นเองโดยโค ดภาษา HTML ท แสดง เรา สามารถท จะเพ มหร อ แก ไขได ด งร ป Spilt ในม มมองน Document Window จะแสดงเว บเพจท งในร ปของหน าตาเว บเพจและ โค ด ภาษา HTML โดยแสดงเว บเพจในส วนหน งและ แสดงโค ดภาษา HTML ในอ กส วนหน ง ด งร ป Design ในม มมองน Document Window จะแสดงเว บเพจท งในร ปของหน าตาของเว บเพจ เหม อนก บท เราเห นในเว บบราวเซอร โดยท เราสามารถแก ไขเน อหาต างๆ บนเอกสารด วย ด งร ป
25 บทท 6 การกาหนดค าเร มต น Dreamweaver การด Preferences การด และกาหนดค า Preferences ของ โปรแกรม Macromedia Dreamweaver เป นส งท สาค ญ ท ส ด ของการสร างเว บไซต ด วยโปรแกรมน เพราะ Preferences ของโปรแกรมก ค อ การกาหนดค าเบ องต น ท งหมด ของโปรแกรม ถ าเราออกแบบเว บโดยไม ได กาหนดค า เว บก จะม ค าผ ดพลาด เพ ยนจากความเป น จร ง และไม สามารถแก ไขได ในเหน าน น เราต อง set ค าแล วก ออกแบบใหม มาด ว ธ การก าหนดท ส าค ญด งน การกาหนด Font 1. ไปท เมน Edit >Preferences จะได หน าต างการกาหนดค า ด งร ป
26 2. หล งจากน นให เล อก Front settings เป น Thai แล วในส วนของ Proportional font และ Code view เป น Tahoma เพ อเป นการกาหนดค า Front เร มต น ด งร ป การต งกาหนดค าของเอกสารเร มต น 1. New Document เป นการกาหนดค า default ให เอกสารเร มต น ด งร ป
27 การต งค าไฟล เอกสารเร มต น หากต องการกาหนดค าตาแหน งเร มต นช ดบนส ด ซ ายส ด 1. เล อก Modify > Page Properties 2. กาหนดค า Left margin : 0 และ Top margin : 0 กาหนดค า Title เพ อใช แสดงใน Title bar บนโปรแกรมเว บเบราเซอร 1. เล อก Modify > Page Properties แล วเล อกท Title/Encoding 2. ใส ข อความลงไปใน Title
28 บทท 7 การกาหนด Dreamweaver Site หล งจากท เราวางโครงสร างเว บไซต ของเราแล ว ต อมาเราจะใช Dreamweaver Site เข ามาช วยใน การสร างและ จ ดการเว บไซต ของเรา การนา Dreamweaver Site เข ามาจ ดการเว บไซต ของเราจะทาให เรา สามารถท จะท าการอ พโหลดไฟล ท ใช ในการสร างเว บไซต ไปในเว บเซร ฟเวอร ได ง ายข น นอกจากน Dreamweaver Site ย งช วยในการตรวจสอบการช อโยงของไฟล ต างๆ ให อ กด วยเม อเวลาม การแก ไขไฟล ต างๆ ในเว บไซต ด วย การสร าง Site 1. ไปท เมน Site > New Site 2. กาหนดค า Site name และ Local Site folder หล งจากน นกดป ม Save
29 เม อเสร จส นการสร าง Site แล ว จะปรากฏอย ในส วนของ Site Panel ด งร ป
30 บทท 8 การใส เน อหาให ก บเว บเพจ โปรแกรม Dreamweaver ซ งม ค ณสมบ ต แบบ WYSIWYG (What you see is what you get) ซ งหมายถ ง เว บไซต ท ค ณเห นหร อสร างด วย Dreamweaver โดยการพ มพ หร อวางร ปลงไป เม อน าไปแสดง ในเว บบราวเซอร ก จะเห นผลเหม อนก บท ค ณสร างไว ด งน น หากต องการใส เน อหาลงไปในเว บเพจ ก ให ทาการพ มพ ข อความท ต องการลงไปในส วนของ Document Window ได เลยคร บ การข นบรรท ดใหม ในโปรแกรม Dreamweaver สามารถทาได 2 ว ธ ค อ 1. กดป ม Enter โดยตรง (Tag <p>) ต วอย าง ด งน 2. กดป ม Shift ค างไว แล วกด Enter (Tag <br>) ต วอย าง ด งน การจ ดร ปแบบต วอ กษร HTML โดยการกาหนดค า Property ม ด งน 1. ร ปแบบของต วอ กษร เป น Paragraph, Heading 1-16 2. การกาหนดแม แบบอ กษร (Style sheet) 3. การเช อมโยง การจ ดร ปแบบต วอ กษร CSS โดยการกาหนดค า Property ม ด งน 4. การกาหนด Font ต วอ กษร
31 5. การจ ดตาแหน ง 6. การกาหนดขนาดอ กษร (Font) size 1-7 7. การกาหนดล กษณะอ กษร ใส ส อ กษร การเล อกใช งานฟอนต ส าหร บการพ มพ ข อความบนเว บเพจเป นภาษาไทย ควรก าหนดให เป น Microsoft Sans Serif, MS Sans Serif หร อ Tahoma และสาหร บข อความบนเว บเพจเป นภาษาอ งกฤษ ให ทาการกาหนดเป นกาหนดเป น Arial เท าน น เพราะหากเราทาการกาหนดเป นฟอนต ต วอ นนอกเหน อจาก น อาจทาให คอมพ วเตอร บางเคร อง ไม สามารถทาการเป ดอ านข อความบนเว บเพจของท านได นอกเหน อจากการพ มพ ข อความต วอ กษรท อย บนค ย บอร ดแล ว ในโปรแกรม Dreamweaver ย ง สามารถทาการการใส อ กษรพ เศษแบบต างๆ ได อ กด วย ด งน ข นตอนในการใส อ กษรพ เศษแบบต างๆ ม ด งน ไปท กล มคาส ง Text แล วเล อกท เมน Characters > Other Characters เม อคล กท Other Characters จะปรากฏหน าต าง ด งน หากต องการใส อ กษรพ เศษต วใด ให ทาการคล ก หล งจากน นโปรแกรม Dreamweaver จะทาการ Insert อ กษรพ เศษน นลงใน Document Window เม อท าการใส ข อความลงบนเว บเพจเสร จเร ยบร อยแล ว ข นตอนถ ดไป ค อการน าเว บเพจท เสร จ สมบ รณ มาท าการแสดงผลบน Browser เพ อท าการตรวจสอบร ปแบบของเว บเพจท เราออกแบบไว จาก โปรแกรม Dreamweaver เม อทาการแสดงผลบน Browser ร ปแบบของเว บเพจแตกต างไปจากเด มหร อไม
32 ข นตอนการแสดงผลเว บเพจบน Browser ม ด งน 1. ให ทาการ Save เว บเพจ ก อนทาการแสดงผลบน Browser ท กคร ง 2. ไปท Document Toolbar แล วคล กท ส ญล กษณ คล ายก บร ปโลก 3. เล อกเมน Preview in IExplore หล งจากน นโปรแกรม Dreamweaver จะทาการแสดงผลของเว บเพจท โปรแกรม Internet Explorer
33 บทท 9 การใส ร ปภาพให ก บเว บเพจ ภาพกราฟ ก หร อร ปกราฟ กท นามาใช ในการทาเว บเพจ หร อนามาใช ในอ นเทอร เน ต จะต องเป น ไฟล ล กษณะเฉพาะ ป จจ บ นน ยมใช ก น 3 ฟอร แมต ค อ ไฟล ฟอร แมต JPEG (Joint Photographer's Experts Group File) ไฟล ฟอร แมต GIF (Graphics Interlace File) ไฟล ฟอร แมต PNG (Portable Network Graphics) ข นตอนในการแทรกร ปภาพลงบนเว บเพจ ม 3 ว ธ ด งน 1. ไปท เมน Insert > Image 2. ไปท กล มคาส ง Common แล วเล อกท ป มการแทรกร ปภาพ 3. ทาการลากไฟล ร ปภาพจาก Files Panel มาวางในส วนของ Document Windows
34 การกาหนดค ณสมบ ต ของร ปภาพ ม ด งน 1. ขนาดของภาพ 2. ท อย ของภาพ 3. คาอธ บายร ปภาพ 4. การเช อมโยงด วยร ปภาพ (Link)
35 บทท 10 การเช อมโยงเอกสาร (Link) การเช อโยงเอกสาร หร อการทา Hyperlink ค อ การเช อมโยงเว บเพจ จากเว บเพจหน งไปย งอ กเว บ เพจหน งน นเอง ซ งในโปรแกรม Dreamweaver จะเร ยกการเช อโยงน ส นๆ ว าการทา Link การทา Link ม อย 7 แบบ ค อ 1. Link ไปย งไฟล เด ยวก นภายใน Site 2. Link ไปย งเว บไซต อ น 3. Link ไปย งอ เมล 4. Link ไปย งเป าหมายท กาหนดภายในหน าเว บเพจ (Named Anchor) 5. Link ภายในไฟล เอกสารชน ดอ น เช น.doc,.xls,.pdf,.zip,.exe 6. การใช ร ปภาพเป นต วเช อมโยง 7. Link แบบ Hotspot ในโปรแกรม Dreamweaver เราสามารถสร างเมน Link ได 2 แบบ ค อ การทาเมน ข อความ Link และ การทาเมน ร ปภาพ Link การทาเมน ข อความ Link ม ข นตอน ด งน 1. พ มพ เมน ข อความท ต อง 2. Crop ข อความท ต องการทา Link 3. ไปท Properties แล วใส ช อเว บเพจท ต องการเช อมโยงข อม ลลงในช อง Link การทาเมน ร ปภาพ Link ม ข นตอน ด งน 1. Insert ร ปภาพท ต องการสร างเป นเมน ลงบน Document Window 2. คล กท ร ปภาพ 3. ไปท Properties แล วใส ช อเว บเพจท ต องการเช อมโยงข อม ลลงในช อง Link
36 การกาหนดล กษณะการเป ดหน าเว บเพจ หล งจากคล กท Link เม อทาการการเช อมโยงเองสาร โดยการใส ช อเว บเพจลงในช อง Link แล วให คล กเล อกท Target ความหมายของ Target ม ด งน _blank ให เป ดหน าเว บใหม ท เช อมโยงในหน าต าง Browser ใหม อ กหน าต าง new ให เป ดหน าเว บใหม ท เช อมโยงในหน าต าง Browser ใหม อ กหน าต าง _parent ให เป ดหน าเว บใหม ท เช อมโยงในหน าต าง Browser เด ม _self ให เป ดหน าเว บใหม ท เช อมโยงในเฟรมเด ม _top ให เป ดหน าเว บใหม ท เช อมโยงในหน าต าง Browser เด ม โดยแสดงให เต มพ นท หน าต าง
37 บทท 11 ร จ กก บ Cascading Style Sheet (CSS) CSS เป นกล มของร ปแบบการแสดงผลท เราได สร างไว เพ อใช กาหนดการแสดงผลของเน อหาในเว บ เพจ การนา CSS เข ามากาหนดการแสดงผลจะช วยให การกาหนดการแสดงผลของเน อหาท อย ในเว บเพจทา ได ง ายและ ถ กต องมากข น นอกจากน CSS ย งสามารถควบค มการแสดงผลบางอย างท HTML ไม สามารถ ควบค มได ด วย อย างเช น ขนาดของต วอ กษรบนเว บเพจใน CSS จะก าหนดขนาดเป นพ กเซล ซ งจะท าให แสดงผลของต วอ กษรในท กๆ เว บบราเซอร เหม อนก น หร อ ตาแหน งของเลเยอร ซ งด วย CSS เราสามารถท จะกาหนดตาแหน งการแสดงผลของม นได เป นต น CSS จะประกอบด วย 2 ส วนด วยก นค อ Selector และ Declaration ด งร ป ส วนประกอบของ CSS 1. Selector เป นช อของ CSS 2. Declaration เป นส วนท ใช กาหนดว า CSS น ม ร ปแบบอะไรบ าง ซ งประกอบไปด วยค ณสมบ ต และ ค าของค ณสมบ ต ประโยชน ท สาค ญของการน า CSS มาใช ก ค อ เม อเราเปล ยนแปลงร ปแบบท ก าหนดไว ใน CSS เม อใด แล ว ร ปแบบการแสดงผลของข อความหร อ ว ตถ ท งหมดท ใช CSS ด งกล าวจะเปล ยนแปลงด วย ซ งประเภท ของ CSS ม ด งน 1. Customer CSS Style หร อ Class Style เป น CSS ท สร างข น และสามารถใช ได ท กท ของเว บ เพจ 2. HTML Tag Style เป น CSS ท ม การกาหนดร ปแบบให ก บ HTML เด มท ม อย แล ว 3. CSS Sector Style เป น CSS ท ม การกาหนดร ปแบบให ก บแท กท ม การผสมก นหร อท กแท กท ม id ตรงก บท เรากาหนดใน CSS
38 บทท 12 การอ พโหลดเว บไซต (FTP) ข นตอนส ดท ายสาหร บการจ ดทาเว บไซต ก ค อทาการอ พโหลดข อม ลข นไปย ง Web Server ซ งใน ต วโปรแกรม Dreamweaver น ม เคร องม อสาหร บการอ พโหลดท ง าย สะดวก และรวดเร วต อการใช งานเป น อย างมาก ข นตอนการสร าง FTP Connection ม ด งน 1. คล กท ป ม ท Files Panel 2. ในกรณ ท ย งไม ได ม การกาหนดค า FTP จะข นหน าต าง Site Setup for mysite ให เล อกท ป มเคล อง หมายบวก +
39 3. จากน นทาการกาหนดค าต างๆ ด งน 4. ใส ค าสาหร บการ FTP 5. เม อกาหนดค าเสร จเร ยบร อยแล ว ให ลองทาสอบการเช อมต อ โดยการกดป ม Test ถ าสาเร จจะข น ข อความด งภาพ
40 6. ในกรณ ท การเช อมต อล มเหลว จะข นข อความด งน * ให ลองตรวจสอบ username / password ท ผ ให บร การให มาอ กคร ง หร อ FTP Host ข นตอนการอ พโหลดข อม ลข น Web Server ม ข นตอน ด งน 1. คล กเล อกไฟล ท ต องการอ พโหลดท Files Panel 2. คล กท ป ม เพ อทาการ upload ข อม ลข น Web Server ข นตอนการดาวน โหลดข อม ลจาก Web Server ลงมาแก ไข ม ข นตอน ด งน 1. คล กเล อกไฟล ท ต องการดาวน โหลดท Files Panel 2. คล กท ป ม เพ อทาการดาวน โหลดข อม ลจาก Web Server ลงมาแก ไข