บทท 1 หลกการสรางเวบไซตและรจกกบ Dreamweaver

Dreamweaver เปนเครองมอในการสรางเวบเพจทมประสทธภาพสง ในบทนเราะกลาวถงพนฐานทส าคญเกยวกบอนเตอรเนต รวมทงหลกการออกแบบเวบไซต กอนจะเขาสการตดตงและเรมตนใชโปรแกรม Dreamweaver CS6 เพอสรางเวบไซตตอไป วตถประสงค 1. อธบายกระบวนการและโครงสรางการท างานของเวบเพจและการใชบรการ www ได 2. รจกโปรแกรม Dreamweaver รวมทงสามารถใชงานโปรแกรมเบองตนได 3. เขาใจสวนประกอบ และโครงสรางของโปรแกรมเพอใชในการสรางเวบเพจ 4. ใชแถบเครองมอตาง ๆ ของโปรแกรมไดอยางถกตองและเหมาะสมกบงานนน ๆ พนฐานอนเทอรเนต อนเตอรเนต ( Internet) นนยอมาจากค าวา “International network” หรอ “Inter Connection network” ซงหมายถง เครอขายคอมพวเตอรขนาดใหญทเชอมโยงเครอขายคอมพวเตอรทวโลกเขาไวดวยกน เพอใหเกดการสอสาร และการแลกเปลยนขอมลรวมกน โดยอาศยตวเชอมเครอขายภายใตมาตรฐานการเชอมโยงเดยวกน นนกคอ TCP/IP Protocol ซงเปนขอก าหนดวธการตดตอสอสารระหวางคอมพวเตอรในระบบเครอขาย ซงโปรโตคอลนจะชวยใหคอมพวเตอรทมฮารดแวรทแตกตางกนสามารถตดตอถงกนได การทมระบบอนเตอรเนต ท าใหสามารถเคลอนยายขาวสารขอมลจากทหนงไปยงอกทหนงได โดยไมจ ากดระยะทาง สงขอมลไดหลายรปแบบ ทงขอความตวหนงสอ ภาพ และ เสยง โดยอาศยเครอขายโทรคมนาคมเปนตวเชอมตอเครอขายอนเตอรเนตนบเปนอภระบบเครอขายทยงใหญมาก มเครองคอมพวเตอรหลายลานเครองทวโลกเชอมตอกบระบบ ท าใหคนในโลกทกชาตทกภาษาสามารถตดตอสอสารกนได โดยไมตองเดนทางไป โลกทงโลกเปรยบเสมอนเปนบานหนงททกคนในบานสามารถพดคยกนไดตลอด 24 ชวโมง ประหยดเวลา คาใชจาย แตเกดประโยชนตอสงคมโลกปจจบนมาก

ประวตความเปนมาของอนเตอรเนต เครอขายอนเตอรเนตถอก าเนดมาในยคสงครามเยน ระหวางสหรฐกบรฐเซย ในป ค.ศ. 1960 ซงกระทรวงกลาโหมประเทศสหรฐอเมรกาเหนวาระบบคอมพวเตอรส าหรบสงการตองเปนระบบเครอขายทใชงานไดตลอดเวลา หากมการโจมตดวยระเบดปรมาณทเมองใดเมองหนง ระบบคอมพวเตอรบางสวนอาจถกท าลาย แตสวนทเหลอท างานได เปาหมายการวจยและการพฒนาเครอขายคอมพวเตอรดงกลาวจงกลายเปนโครงการชอ ARPAnet หรอ Advance Research Project Agency net โดยมอบหมายใหกลมมหาวทยาลยในสหรฐอเมรกาเปนผท าการวจยและเชอมโยงเครอขายในป ค.ศ. 1983 ไดมการน า TCP/IP Protocol หรอ Transmission Control Protocol มาใชกบคอมพวเตอรทกเครองในระบบเปนครงแรก จนกรทงไดกลายเปนมาตรฐานในการตดตอในระบบเครอขายอนเตอรเนตมาจนถงปจจบน ในป ค.ศ. 1986 มการก าหนดชอโดเมน (Domain name System) เพอสรางฐานขอมลในแตละเครอขาย และใช ISP (Internet Service Provider) ในการจดท าฐานขอมลของตนเอง ปจจบนคอมพวเตอรทวโลกลวนแตเชอมตอกบเครอขายอนเตอรเนตและสามารถตดตอแลกเปลยนขอมลกนไดอยางกวางขวางและทวถงกวาเดม ไคลเอนต - เซรฟเวอร ไคลเอนต/เซรฟเวอร ( client/server) คอ การทมเครองผใหบรการ (server) และเครองผใชบรการ (client)เชอมตอกนอย และเครองผใชบรการไดมการตดตอรองขอบรการจากเครองผใหบรการ เครองผใหบรการกจะจดการตามทเครองผขอใชบรการรองขอ แลวสงขอมลกลบไปใหเครอขายแบบ ไคลเอนต/เซรฟเวอร เหมาะกบระบบเครอขายทตองการเชอมตอกบเครองลกขายจ านวนมาก โดยการรองรบจ านวนเครองลกขาย (Client) อาจเปนหลกสบหลกรอยหรอหลกพน เพราะฉะนนเครองทจะน ามาท าหนาทใหบรการจะตองเปนเครองทม ประสทธภาพสง เนองจากถกตองออกแบบมาเพอทนทานตอความผดพลาด ( Fault Tolerance)และตองคอยใหบรการทรพยากร การใหกบเครองลกขายตลอดเวลา โดยเครองทจะน ามาท าเปนเซรฟเวอรอาจเปนคอมพวเตอรแบบเมนเฟรม มนคอมพวเตอร หรอไมโครคอมพวเตอรกได เครอขายประเภทนจะมเครองศนยบรการ ทเรยกวา เครองเซรฟเวอร และมเครองลกขายตาง ๆ เชอมตอ โดยเครอขายหนงอาจมเครองเซรฟเวอรมากกวาหนงตวเชอมตอภายในวงแลนเดยวกน ซงเซรฟเวอรแตละตวกท าหนาทรบผดชอบทแตกตางกน เชน 1.ไฟลเซรฟเวอร (File Server) คอ เครองทใหบรการแฟมขอมลใหแกเครองลกขาย 2.พรนตเซรฟเวอร (Print Server) คอ เครองทบรการงานพมพใหแกเครองลกขาย โดยบนทกงานพมพเกบไวในรปแบบของสพล (Spool) และด าเนนการพมพงานตามล าดบคว 3.ดาตาเบสเซรฟเวอร (Database Server) คอ เครองทบรการฐานขอมลใหแกเครองลกขาย

4.เวบเซรฟเวอร (Web Server) คอ เครองทจดเกบขอมลดานเวบเพจขององคกร เพอใหผทองอนเตอรเนตสามารถเขาถงเวบขององคกรได 5.เมลเซรฟเวอร (Maill Server) คอ เครองทจดเกบขอมลดานจดหมายอเลกทรอนกส หรอ E-mail ทมการรบสงระหวางกนภายในเครอขาย

เครอขายใยแมงมง เครอขายใยแมงมม (World wide Web หรอ W3 หรอ WWW) เรยกสน ๆ วา เวบ (Web) เปนรปแบบหนงของระบบ การเชอมโยงเครอขายขาวสาร ใชในการคนหาขอมลขาวสารบนอนเทอรเนต มการเชอมโยงขอมลจากแหลงขอมลหนงไปยงอกแหลงขอมลทอยหางไกล เพอใหมความงายตอการใชงานมากทสด WWW จะแสดงผล ในรปแบบของเอกสารท เรยกวา ไฮเปอรเทกซ (Hypertext ) ซงเปนฐานขอมลชนดหนง ท าหนาทรวบรวมขาวสาร ขอมลทอยกระจดกระจาย ไปในทตาง ๆ ทวโลก ใหสามารถน ามาใชงานได เสมอนอยในทเดยวกน คลายกบเสนใยแมงมม ทถกทอเสนสาย เชอมโยงแหลงขอมลกนไปมา การใหบรการของอนเทอรเนต แบบ WWW เปนระบบงาน ททรงพลงมากในยคปจจบน ท าใหระบบเครอขายอนเทอรเนต เปนทนยมใชกนอยางแพรหลายทวโลกอยางแทจรง เนองจากสามารถใหบรการขอมลไดทงในแบบขอความ เสยง ภาพนง และภาพเคลอนไหว ท าใหขอมลทน ามาแสดง มความนาสนใจขน การคนหาขอมลแบบ WWW จะมการเชอมโยงขอมล ตามเสนทาง ทก าหนดไว เรยกวา LINKS การเขาไปใชงานใน อนเทอรเนตแบบ WWW ท าใหเรามความรสก เสมอนไดเดนทางทองเทยว ไปยงทตาง ๆ เราเรยกดนแดนทมองผานหนาจอคอมพวเตอรเขาไป วา "ไซเบอรสเปซ" (Cyberspace) เวลด ไวด เวบ เปนบรการหนงทอยบนระบบเครอขายคอมพวเตอร การพฒนาของเครอขาย ใยแมงมม ไดด าเนนไปอยางรวดเรวและกาวหนาไปอยางไมหยดยง โดยเฉพาะอยางยงเทคโนโลยดานมลตมเดยท าให เครอขายคอมพวเตอรทวความมหศจรรยใหกบการศกษาในโลกไรพรมแดน และกลายเปนแหลงทรพยากร ของกระบวนการเรยนการสอนทสนองตอกระบวนการเรยนรไดเปนอยางดยง เมอไมกปกอนหนานมผสนใจใชงานอนเทอรเนตไมมากนก เนองจากการใชบรการ อนเทอรเนต ไมวาจะเปนการคนหาขาวสารขอมล การรบสงจดหมายอเลกทรอนกส การส าเนา แฟมขอมล ฯลฯ จะอยในรปแบบของตวอกษร (Text Mode)เทานน ไมมการแสดงทเปนรปภาพ เสยง ภาพยนตร และไมมอกษรแบบตาง ๆ ปรากฎใหเหนแตอยางใด นอกจากนผใชจะตองเรยนรการใชค าสงคอมพวเตอรมากมาย เชน ตองเรยนรค าสงเบองตนของยนกซ (UNIX) เนองจากเมอจะมการเรยกใชงานอนเทอรเนต เครองคอมพวเตอรของผใช จะอยภายใต

ระบบปฏบตการยนกซ ดงนนผใชจงตองเรยนรค าสงเบองตนของยนกซ เพอท าการปอนค าสงทเปนตวอกษรดวยตวเอง จนกระทงมบรการทเรยกวา World Wide Web (WWW) หรอ เครอขายใยแมงมมเกดขนท าใหความนยมการใชอนเทอรเนตสงขน เนองจาก WWW เปนบรการหนงทอยในอนเทอรเนต ทใชงานไดงาย สะดวกผใชไมตองจ าค าสงของยนกซอกตอไป การอานและคนหาขอมลสามารถกระท าไดเพยงแตกดปมเมาสเพยงอยางเดยวเทานน การทจะใชบรการ WWW ไดนนจ าเปนจะตอง มสวนประกอบ 2 สวน ดงน 1. แหลงขอมล หรอเวบไซต (Web Site) 2. โปรแกรมเวบบราวเซอร (Web Browser) เวบไซต และ เวบเพจ เวบไซต (องกฤษ: website, web site, Web site) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทางไฮเปอรลงก สวนใหญจดท าขนเพอน าเสนอขอมลผานคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนาแรกของเวบไซตทเกบไวทชอหลกจะเรยกวา โฮมเพจ เวบไซตโดยทวไปจะใหบรการตอผใชฟร แตในขณะเดยวกนบางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ ผท าเวบไซตมหลากหลายระดบ ตงแตสรางเวบไซตสวนตว จนถงระดบเวบไซตส าหรบธรกจหรอองคกรตางๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรในลกษณะของ เวบเบราวเซอร

โฮมเพจ โฮมเพจ (Home Page) คอเวบเพจหนาแรกซงเปนทางเขาหลกของเวบไซต ปกตเวบเพจทกๆ หนาในเวบไซทจะถกลงค (โดยตรงหรอโดยออมกตาม) มาจากโฮมเพจ ดงนนบางครงจงมผใชค าวาโฮมเพจโดยหมายถงเวบไซททงหมด แตความจรงแลวโฮมเพจหมายถงหนาแรกเทานน ถาเปรยบกบรานคา โฮมเพจกเปนเสมอนหนารานนนเอง ดงนนจงมกถกออกแบบใหโดดเดนและนาสนใจมากทสด

เวบเพจ เวบเพจ (Web Page) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบอยในรปแบบไฟล HTML (Hyper Text Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนานนเอง ภายในเวบเพจอาจประกอบไปดวยขอความ ภาพ เสยง วดโอ และภาพเคลอนไหวแบบมลตมเดย นอกจากนเวบเพจแตละหนาจะมการเชอมโยงหรอ “ลงค” (Link) กน เพอใหผชมเรยกดเอกสารหนาอนๆ ทเกยวของไดสะดวกอกดวย

เวบบราวเซอร และเวบเซรฟเวอร เวบบราวเซอร และเวบเซรฟเวอร เวบเบราเซอร (web browser) เบราเซอร หรอ โปรแกรมคนดเวบ คอโปรแกรมคอมพวเตอร ทผใชสามารถดขอมลและโตตอบกบขอมลสารสนเทศทจดเกบในหนาเวบทสรางดวยภาษาเฉพาะ เชน ภาษาเอชทเอมแอล ทจดเกบไวทระบบบรการเวบหรอเวบเซรฟเวอรหรอระบบคลงขอมลอน ๆ โดยโปรแกรมคนดเวบเปรยบเสมอนเครองมอในการตดตอกบเครอขายคอมพวเตอรขนาดใหญทเรยกวาเวลดไวดเวบ

เวบเบราวเซอรตวแรกของโลกชอ เวลดไวดเวบ ขณะเดยวกนเวบเบราวเซอรทนยมมากทสดในปจจบนคอ อนเทอรเนตเอกพลอเรอร เวบไซต ( Website, Web site หรอ Site) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทางไฮเปอรลงก สวนใหญจดท าขนเพอน าเสนอขอมลผานคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนาแรกของเวบไซตทเกบไวทชอหลกจะเรยกวา โฮมเพจ เวบไซตโดยทวไปจะใหบรการตอผใชฟร แตในขณะเดยวกนบางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ ผท าเวบไซตมหลากหลายระดบ ตงแตสรางเวบไซตสวนตว จนถงระดบเวบไซตส าหรบธรกจหรอองคกรตางๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรในลกษณะของ เวบเบราวเซอร ภาษา XHTML และ HTML XHTML ยอมาจากค าวา Extensible Hyper Text Markup Language คอภาษาโปรแกรมคอมพวเตอรประเภท Markup Language ทรวมเอาภาษา HTML และภาษา XML เขาไวดวยกน และไดกลายเปนมาตรฐานใหมของ HTML ประโยชนของมนคอการสรางเวบไซตเพอการสงขอมลทวๆ ไป และเพมขดความสามารถในการสรางแทก (Tag) ใหมๆ ไดอกดวย โดยทเราก าหนดไดดวยวาจะใหแทกเหลานน

แสดงผลอยางไร ทงยงรองรบภาษาอนๆ ทใช XML เปนฐาน เชน SVG, MathML, chemML, SMIL และในภาษา XHTML ค าสงตางๆ นนกยงเหมอนกบ HTML แตจะมความเขมงวดในเรองโครงสรางทางภาษามากกวา และมการตด Tag และ Attribute ทลาสมยออกไป เนองมาจากขอเสยของ HTML ทเมอแสดงผลผานบราวเซอรทตางกน เชน Internet Explorer, Firefox, Netscape, Opera, Chrome และอนๆ กจะไดผลทแตกตางกน ทเราเสยแรงออกแบบเวบไซตมาอยางด อาจดสวยงามถกตองใน Firefox แตอาจจะมอาการผดเพยนไปเมอเปดดดวย Chrome ดงนน จงไดมการน าภาษา XHTML มาใชเพอแกปญหาดงกลาว โดย XHTML เปนผลจากการน าภาษา HTML 4.0 มาปรบปรงใหมใหสามารถใชกบแอพพลเคชนตางๆ ใหไดมากขน เปนการเปลยนกรอบของ HTML ใหเปน XML สมาคมเวลดไวดเวบ (World Wide Web Consortium หรอ W3C) จงประกาศรบรองคณสมบต XHTML เพอชวยใหการใชงานเวบไซต ไมไดจ ากดอยแคเพยงบนเครองคอมพวเตอรอกตอไป แตสามารถขยายการใชงานออกไปไดกวางขน โดยเฉพาะบนอปกรณไรสายไดดวย ดงนน ตอไปไมวาจะแสดงเวบเพจของเราในบราวเซอรคายใด กสามารถแสดงผลไดเหมอนกนอยางถกตอง

สรปกคอภาษา XHTML เปนภาษาทถกก าหนดโดย W3C ใหเปนภาษามาตรฐานใหมทจะใชในการสรางเวบไซตตอไปในอนาคต เวบบราวเซอรของทกคายจะสามารถรองรบการใชงานภาษา XHTML ได และในอนาคตปญหาการแสดงผลทไมเหมอนกนในเวบบราวเซอรทตางกนกจะหมดไป ดงนนจงเปนเรองด และส าคญส าหรบนกพฒนา และออกแบบเวบไซต ทจะเรมเรยนร และสรางเวบไซตใหไดมาตรฐาน

1.2 รจก Dreamweaver

Adobe Dreamweaver เปนโปรแกรมสาหรบพฒนาเวบไซต ซงมคณสมบตครอบคลมตงแตการออกแบบและสรางเวบและสรางเวบเพจ,การบรหารจดการเวบไซต ตลอดไปจนถงการพฒนาเวบแอพพลเคชนเบองตน โปรแกรมนไดรบความนยมเปนอยางมากเพราะมคณสมบตเดนคอใชงานงาย มเครองมอส าหรบวางขอความ ภาพกราฟก ตาราง แบบฟอรม มลตมเดย รวมทงองคประกอบตางๆเพอโตตอบกบผชมลงบนเวบเพจไดงาย โดยผใชไมจ าเปนตองรจกภาษา HTML,CSS, JavaScript และภาษาสครปตอนๆ ดงนนจงเหมาะส าหรบผเรมตนและผใชทวไป นอกจากนยงมคณสมบตขนสงอกมากมายสาหรบนกพฒนาเวบไซตมออาชพดวยเชนกน

Dreamweaver เปนโปรแกรมทชวยใหเขยนเวบไซตไดงายขน แกไขไดงายขน และมเครองมออ านวยความสะดวกมากมายทมประโยชนในการท าเวบไซต

1. แนะน า Dreamweaver

Dreamweaver เปนโปรแกรมส าหรบมออาชพทใชในการพฒนาและสรางเวบไซตในปจจบน และเปนทนยมมาก มเวบไซตดงๆ มากมายทใช Dreamweaver เพอพฒนาเวบไซต เราจะมาดกนวาท าไม Dreamweaver ถงเปนทนยมมผใชงานกนมากมาย

1. ชวยใหคณท างานไดเรวขน นคอขอดอนดบตนๆ ของ Dreamweaver เลยกวาได เมอกอนนนถาเราตองการสรางเวบเพจ เราจะตองเขยนภาษา HTML ขนมาเพอใหแสดงผลผาน browser เปนรปภาพหรอขอความออกมา ซงทาใหเราท างานไดชาลง เพราะเราจะตองเขยน HTML ไปและดการแสดงผลผาน browser ไปวาใหผลถกตองตามทเราตองการหรอไม แตสาหรบใน Dreamweaver โปรแกรมจะแสดงหนาจอทแสดงผลใหเราสามารถปรบแตงหนาตาของเวบเพจของเราไดเลย โดย Dreamweaver จะท าการเขยน HTML ใหเราเองเปน Editor ทมประสทธภาพตวหนง

ในกรณทเราตองการเขยน HTML เอง Dreamweaver กเปนเครองมอทอ านวยความสะดวกใหเราไดดมาก ไมเพยงแตการใชการกบ HTML เทานน Dreamweaver กรองรบภาษาตางมากมายเชน CFML, PHP, ASP, ASP.NET และอนอกมากมาย ชวยใหเราสามารถเขยน Code ไดงายขน

2. เปนโปรแกรมจดการเวบไซตทด Dreamweaver ยงเปนโปรแกรมทชวยใหเราจดการกบเวบไซตของเราไดดขน โดยมเครองมอมากมาย เชน

2.1. FTP เราสามารถแกไขหนาเวบเพจของเราและสงไปแสดงผลท server ไดทนท เพราะ Dreamwerver จะตดตอกบ server ใหเราและแสดงไฟลของเราทอยใน server ใหเราเหนและแกไขไดทนททเราตองการถอเปนเครองมอทสะดวกมาก นอกจากนนยงชวยใหเรามขอมลของเวบไซตของเราสารองไวในเครองเราตลอดดวย 2.2 Site map เปนเครองมอทชวยแสดงผลเวบไซตของเราใหเปนรปรางขนมา โดยจะแสดงใหเหนวาหนาใด link ไปยงหนาใดบาง โดยเราสามารถยายหรอ เปลยนแปลง link ได โดยท Dreamweaver จะท าการเขยน Code ใหเราใหมทนท ถอเปนเครองมอทดมาก เพราะความจรงแลวเราตองแกเวบเพจของเราตลอด 3. ชวยใหเราท าเวบไดงายขน สาหรบคนทไมเคยท าเวบมากอนกสามารถใช Dreamweaver เพยงโปรแกรมเดยวเพอพฒนาเวบไซตของตวเองขนมาไดงายเหมอนกบการเขยนหนงสอ และส าหรบคนทเชยวชาญ Dreamweaver กท าใหเรามความคลองตวขนเพราะตอนน Dreamwerver มเครองมอมากมายและท างานเชอมตอกบโปรแกรมดงๆ มากมายเชน Photoshop ,Illustrator, Flash หรอแมแตกระทงการใชในลกษณะ Dynamic webpage กพฒนาขนมาก จะเหนวาใน Dreamweaver CS3 นนมการใชงานในสวนของ Ajax เพมมาอกดวยรวมถงการใชงาน CSS ทไดรบการพฒนาขนมาก นยงไมรวมถง Template มากมายท

ชวยในการจดขอความ, หนาตาของเวบเพจ และเครองมออกมากมาย ในบทความน คงท าใหมองภาพของ Dreamwerver วาเปนเครองมอทอ านวยความสะดวกมากจรงๆ ถาลองใชดจะเหนไดวา Dreamweaver นนพฒนาไปมากจากเวอรชนแรกๆ ทออกมา และชวยลดเวลาในการพฒนาเวบไซตลงไดมาก 2. ความตองการระบบของโปรแกรมส าหรบ Microsoft Windows

1. หนวยประมวลผลกลาง (CPU) ความเรว 1 GHz ขนไป 2. หนวยความจ าแรม (RAM) 512 MB ขนไป 3. เนอทวางของฮารดดสก อยางนอย 1 GB ขนไป 4. จอภาพ ความละเอยด 1280 x 800 จด 5. มซดรอมไดรฟ 6. ระบบปฏบตการ Window XP หรอสงกวา

3. ขนตอนการตดตงโปรแกรม มวธการดงน

1. เปดโฟลเดอรโปรแกรม Adobe Dreamweaver CS6

2. ดบเบลคลกทไฟล Set-up.exe จากนนโปรแกรมอางมการแจงเตอนใหเรา restart เราเลอก Ignore เพอด าเนนการตอ ดงรป

3. โปรแกรมจะท าการตรวจสอบกอนท าการตดตงโปรแกรม

4. เมอโปรแกรมตรวจสอบเสรจแลว จะเขาสหนาจอขอก าหนดในการตดตงโปรแกรม ใหเราคลก Accept

5. กรอก Serial Number แลวคลกทปม Next

6. จะเขาสหนา Option ของโปรแกรม ใหเลอก Installs

7. รอใหโปรแกรมตดตงจนเสรจ

8. เมอตดตงเสรจจะปรากฏหนาจอดงภาพ ใหเราคลก Close

4. ขนตอนการเปดโปรแกรม Adobe Dreamweaver CS6

1. ส าหรบ Windows7 ท าการเปดโปรแกรม Dreamweaver โดยเขาไปท เมน Start > All Programs > Adobe Dreamweaver CS6

2. ส าหรบ Windows8 ท าการเปดโปรแกรม Dreamweaver โดยเขาไปท เมน Start > Apps > Adobe

Dreamweaver CS6

3. เมอเปดโปรแกรมครงแรก จะพบหนาจอดงภาพ ใหคลก

Select All >> OK

4. จากนนจะเขาสหนาจอ Welcome Screen ดงรป

Welcome Screen เปนเครองมอส าหรบชวยเลอกขนตอนเรมตนในการใชงานโปรแกรมโดยตวเลอก

จะแบงออกเปนกลมๆ ดงภาพ หมายเลขทŒ 1 Open a Recent Item เปดไฟลทเคยใช โดยคลกเลอกจากรายชอทแสดงอย

(เรยงล าดบจากทเคยเปดหลงสดเปนตนไปหรอคลก Open เพอเปดไฟลอนๆ) หมายเลขท •2 Create New สรางไฟลใหม โดยถาคลก HTML จะเปนการสรางเวบเพจ

พนฐานแตถาคลกหวขออนจะเปนการสรางเวบเพจหรอไฟลตามชนดนนๆ หมายเลขท 3 ŽTop Features (videos) เปนเสนทางลดส าหรบเขาดรายละเอยดและเทคนคใน

การใชงานตาง ๆ ของโปรแกรมผานทางเวบไซตของ Adobe หมายเลขท 4 •เปดดค าแนะน าการใชโปรแกรม หมายเลขท 5 ดาวนโหลดโปรแกรมหรอดขอมลบนเวบไซตของ Adobe หมายเลขท 6 ‘ คลกออปชนนหากไมตองการแสดง Welcome Screen อกในครงตอไป

5. สวนประกอบของหนาจอโปรแกรม

โปรแกรม Dreamweaver ประกอบไปดวยสวนตาง ๆ ดงน

1. แถบเมนหลก (Menu bar) เปนแถบรวมรวมค าสงทงหมดของโปรแกรม โดยแบงค าสงทงหมดออกเปนหมวดหมตามลกษณะของการใชงาน

2. แถบเครองมอ (Insert Bar) เปนแหลงรวมเครองมอซงใชในการวางออบเจกตชนดตาง ๆ ลงบนหนาเวบเพจ เชน ขอความ รปภาพ ลงค รปเคลอนไหว เปนตน โดยจะแบงเปนกลมค าสงเพอใหใชงานไดสะดวก ซงจะประกอบดวยกลมค าสงดงน

Common ใชวางออบเจกตทตองใชงานบอย ๆ เชน รปภาพ ตาราง ไฟลมลตมเดย เปนตน Layout ใชวางออบเจกตทใชจดโครงสรางของเวบเพจ เชน ตาราง เฟรม และ AP element

(หรอเลเยอร)

Forms ใชวางออบเจกตทใชในการสรางแบบฟอรมรบขอมล เชน ชองรบขอความ ปมตวเลอกตาง ๆ เปนตน

Data ใชวางค าสงทใชการจดการฐานขอมล และดงขอมลจากฐานขอมลมาแสดงบนเวบเพจ Spry ใชวางออบเจกตทใชเทคโนโลยของ Ajax jQuery Mobile ใชสรางหนาเพจทแสดงบนอปกรณมอถอและแทบเลตโดยใชเทคโนโลยแบบ jQuery

InContext Edting ใชสรางออบเจกตทชวยอ านวยความสะดวกใหผใชงานสามารถแกไขเวบเพจได Text ใชส าหรบจดปรบแตงหรอจดรปแบบของตวอกษรและขอความสะดวกใหผใชงาน เชน หวเรอง

ตวหนา ตวเอยง รวมทงแทรกสญลกษณพเศษตาง ๆ เชน $ (Dollar) © (Copyright) เปนตน Favorites เปนกลมทสามารถเพมปมค าสงทใชบอยจากกลมอน ๆ เขามาเกบไวใชงานเอง เพอความ

สะดวกในการใชงาน 3. แถบ Document Toolbar

ประกอบไปดวยปมและ ปอปอพเมนทใชก าหนดรปแบบมมมองของ Document Window ทเราก าลงท างานอยและ ค าสงตางๆทใชท างานกบ Document Window อยางเชน การแสดงเวบเพจทสรางขนในเวบบราวเซอรหรอ การก าหนดออปชนของ Document Window เปนตน

ปม หนาท

แสดงเวบเพจในมมมองโคด

แสดงเวบเพจในมมมองโคดและออกแบบ

แสดงเวบเพจในมมมองออกแบบ

แสดงผลโคด (ท างานรวมกบมมมอง Live View)

ตรวจสอบความถกตองในการแสดงผลบนบราวเซอรทเลอก

ตรวจสอบความถกตองของการใชสไตล CSS ในสวนตาง ๆ บน เวบเพจโดยใชรวมกบพาเนล CSS Styles และการแสดงผลในรปมมมอง Live View

แสดงเมนส าหรบเลอกเปดบราวเซอรเพอทดสอบเวบเพจ (คยลดF12)

แสดงเมนซงประกอบดวยคาสงจดการไฟล เชน อพโหลด (Put) หรอดาวนโหลด (Get)

ตรวจสอบความถกตองในการแสดงผลบนบราวเซอรทเลอก

แสดงเมนส าหรบเปด/ปดลกษณะพเศษของแทกหรอค าสงบางอยาง เชน ตาราง,เฟรม และ CSS เพอชวยใหการแกไขเวบเพจสะดวกขน

ปรบปรงการแสดงผลของเวบเพจในมมมองออกแบบ หลงจากทแกไขคาสงในมมมองโคด (คยลด F5)

ใชก าหนดชอหรอค าอธบายเวบเพจ ซงจะถกน าไปแสดงทไตเตลบารของบราวเซอร

4. พนทสรางงาน (Document Windows) คอ สวนทใชสาหรบใสเนอหาและจดองคประกอบของเวบเพจ วธใชงานวนโดวนจะคลายกบทคณใชโปรแกรมเวรดโปรเซสเซอรทวไป เชน พมพขอความ วางภาพกราฟก และสรางตารางขอมลโดยเนอหาตางๆจะแสดงออกมาคลายกบทปรากฏบนบราวเซอร ซงสามารถเลอกเปดพนทสรางงานไดดวยกน 4 มมมอง

มมมองโคด (Code View)

ในมมมองน Document Window จะแสดงเวบเพจในรปของชดค าสงภาษา HTML ทถกสรางขนอตโนมตโดย Dreamweaver หรอเปนค าสงทคณเขยนเพมเขาไปเองนอกจากนกอาจจะมคาสงสไตลชต (CSS) และภาษาสครปต (script) ตางๆ ดวยคณสามารถตรวจสอบและแกไขคาสงเหลานไดตามตองการ ซงการแกไขจะสงผลกลบไปยงมมมองออกแบบโดยอตโนมต

มมมองโคดและออกแบบ (Code and Design View หรอ Split)

ในมมมองน Document Window จะแสดงเวบเพจทงในรปแบบทปรากฏบนบราวเซอร และรปแบบค าสงภาษา HTML พรอมๆ กนดงรป เพอใชในการออกแบบและตรวจสอบแกไขค าสงไปในขณะเดยวกน คณสามารถปรบขนาดพนทของแตละสวนไดโดยการคลกแลวลากทเสนแบง ระหวางทง 2 สวน

มมมองออกแบบ (Design View)

ในมมมองน Document Window จะแสดงเวบเพจทงในรปของหนาตาของเวบเพจเหมอนกบทเราเหนในเวบบราวเซอร โดยทเราสามารถแกไขเนอหาตางๆ บนเอกสารดวย ดงรป

มมมองแสดงหนาเวบเหมอนดบนบราวเซอร (Live View)

ในมมมองน Document Window จะแสดงเวบเพจเหมอนกบการรนหนาเวบบนบราวเซอร สามารถแสดงผลในสวนของ JavaScript และ Plug in ตางๆ ซงถอเปนมมมองทเพมขนมาเพออ านวยความสะดวกตอผจดทาเวบไซตในการตรวจเชคองคประกอบและลงคตางๆไดอยางรวดเรว ท าใหประหยดเวลากวาการแสดงผลผานทางเวบบราวเซอรโดยตรง

มมมองแสดงผลโคดหนาเวบ (Live Code)

ในมมมองน Document Window จะแสดงผลโคดรวมกบมมมอง Live View (จะแสดงมมมอง Live Code ไดกตอเมออยทมมมอง Live View เทานน) เปนมมมองทเสมอนการใชค าสง View > Source จากบราวเซอร ซงใชตรวจดโคดในต าแหนงตาง ๆ เทานน ไมสามารถแกไขโคดในมมมองนได

มมมองแสดงผลหนาเวบทจดรปแบบดวย CSS (Inspect)

ในมมมองนจะแสดงผลรวมกบมมมอง Live View ซงเปนมมมองทใชตรวจดการจดรปแบบดวยค าสง CSS ในต าแหนงทเมาสเลอนผาน โดยสามารถดไดจากพาเนล CSS Styles เพอใหเลอกใชหรอยกเลกค าสงทเคยก าหนดเอาไวในมมมองนได

5. Tag Selector อยใน Status Bar ทอยทางดานลางของ Document Window เมอเราคลกวตถในเอกสาร

จะปรากฏ Tag Select ใน Status Bar ขนมา เมอเราคลกเลอก Tag Selector แลวแทกตางๆ ทถกลอมดวยแทกทเราเลอกจะถกเลอกดวย

6. หนาตาง Properties Inspector เปนหนาตางเลก ๆ ทอยดานลางสดของหนาจอโปรแกรม เปนสวนทใชงานมากทสด เนองจากเปนสวนทใชก าหนดคณสมบตส าคญ ๆ ของออบเจกตทวางในหนาเวบเพจ เชน ต าแหนง ขนาด และส

7. กลมพาเนลตางๆ (Panel Groups)

พาเนลเปนกรอบเลก ๆ ทรวบรวมเครองมอตาง ๆ ส าหรบใชท างานเฉพาะเรองไว เชน พาเนล CSS Styles ใชจดการกบสไตล CSS และพาเนล Files ใชจดการกบไฟลและโฟลเดอรภายในเวบไซตใน Dreamweaver ประกอบไปดวยพาเนลจ านวนมาก ซงสามารถเปด/ปดไดโดยเลอกคาสง Window แลวเลอกชอพาเนลนน หรอกดคยลดทแสดงดานหลงชอพาเนลดงรป

6. ไมบรรทด (Ruler)

ไมบรรทดจะปรากฏทดานบนและดานซายของวนโดว Document เพอใหสาหรบชวยก าหนดต าแหนงหรอขนาดขององคประกอบตาง ๆ ทวางบนเวบเพจ สาหรบการจดการตาง ๆ กบไมบรรทดจะท าไดดงน

ซอน/แสดงไมบรรทด เลอกคาสง View > Rulers > Show (คยลด Ctrl +Alt +R) ยายต าแหนง 0,0ใหคลกลากรป ไปวางต าแหนงใหม ยายต าแหนง 0,0 กลบมาทมมซายบนสดใหดบเบลคลกท หรอคลกขวาบน ไมบรรทดแลวคลกเลอก

คาสง Reset Origin เปลยนหนวยวดบนไมบรรทดใหคลกขวาบนไมบรรทด แลวเลอกหนวย ซงมดงน

Pixels พกเซล Inches นว Centimeters เซนตเมตร

7. เสนกรด (Grid)

เปนอกเครองมอหนงทใชชวยก าหนดต าแหนงและขนาดของออบเจคบนเวบเพจ โดยมลกษณะเปนชองตารางทมระยะหางเทา ๆ กนทงแนวตงและแนวนอน สามารถก าหนดสเสนกรด และก าหนดใหออบเจคยดจบ (snap to grid) กบเสน เพอใหสามารถจดออบเจคตาง ๆ อยในแนวเดยวกนไดงาย

ซอน/แสดงเสนกรดท าไดโดยเลอกค าสง View > Grid> Show Grid (คยลด Ctrl Alt G) ก าหนดใหออบเจคยดจบเสนกรดเลอกค าสงView > Grid > Snap To Grid ปรบแตงคณสมบตของเสนกรดเลอกค าสง View > Grid > Grid Setting

8. เสนไกด (Guide)

เปนอกเครองมอหนงทใชก าหนดต าแหนงและขนาดของออบเจคบนเวบเพจ เพอใหไดตามแนวทตองการอยางเทยงตรง การสรางเสนไกดทeไดโดยคลกลากเมาสจากไมบรรทดดานใดดานหนงออกมาปลอยบนเวบเพจตรงจดทตองการ

ซอน/แสดงเสนไกดท าไดโดยเลอกค าสง View > Guides >Show Guides ยายเสนไกด คลกลากเสนไกดนนไปยงต าแหนงใหม ลบเสนไกด คลกลากเสนไกดออกไปปลอยนอกวนโดว Document ลบเสนไกดทงหมด เลอกค าสง View > Guides > clear Guides ลอคเสนไกดไมใหถกยายหรอลบ เลอกค าสง View > Guides > Lock Guides

9. การก าหนด Font

การก าหนดคาเบองตนส าหรบการสรางเวบเพจ กคอ การก าหนดคาตวอกษรใหเวบบราวเซอรสามารถแสดงผลไดอยางถกตอง และเหมาะสม มวธการดงน

1. ไปทเมน Edit >> Preferences จะไดหนาตางการก าหนดคา ดงรป

2. หลงจากนนใหเลอก Category >> Fonts และ Fonts >> ไทย หรอ Unicode (รปแบบตวอกษาทรองรบหลายภาษา และภาษาไทยดวย) ตอไปการก าหนด Proportional font และ Code view ใหเลอก Font ทเราตองการ เชน Tahoha, Angsana New เปนตน เพอเปนการก าหนดคา Font เรมตน ดงรป

3. การก าหนดคา Default ใหกบเอกสาร สามารถท าไดโดย Category >> New Document และ Default encoding>> ไทย (Windows) หรอ Unicode (UTF-8)