การแนะนำการใช้งาน Dreamweaver (1)

การแนะนาํ การใชง าน Dreamweaver นายนฤนาท คยุ จาด ITS-C 601200104

Fluid Grid Layoutการออกแบบหนา เอกสารใหมบ นพ้นื ฐานของตารางท่ีสามารถนาํ ไปใชไ ดหลากหลาย บนหนาจอขนาดตา ง ๆ เชนSmartPhone Tablet หรอื PC โดยเราสามารถออกแบบครั้งเดยี ว แลว สามารถนําไปใชไ ดก บั ทกุ อุปกรณ

JQuery Moblie Freamwork Updates JQuery Mobile Framework เขามาใน Adobe Dreamweaver CS5.5 ในเวอรชน่ั นไ้ี ดมีการเพม่ิ สวนชว ยในการทาํงานกับ JQuery Mobile Framework ไดสะดวกขึน้ ไปอีก เชน การนาํ Theme ท่อี อกแบบดวย Adobe Firework CS6 มาเลือกใชกบั Mobile Web project และ การเลือกกําหนด icon ตา ง ๆ ใหกบั button เปนตน

Adobe PhoneGap Build Intergrationสาํ หรับใน Adobe Dreamweaver CS6 ไดเพิ่มสว นของการทํางานกบั PhoneGap Build เขาไป ทาํ ใหคุณสามารถทจ่ี ะนาํMobile project ทท่ี ําอยขู น้ึ ไปบนระบบ online service ของ PhoneGap Build ใหท าํ การ compile ออกมาเปนไฟล mobileapplication บน platform ตา งๆ ไดงาย ๆ

CSS3 Transitionความสามารถของ CSS3 นัน้ เริ่มปรากฏออกมาใหเห็นมากข้นึ เรอื่ ย ๆ ทงั้ เร่ือง Web Font หรอื การทํา animation ของHTML Element ก็สามารถทาํ ไดอยา งนา ประทบั ใจ Adobe Dreamweaver CS6 ไดเพิ่มสว น User Interface ใหคณุสามารถกาํ หนด CSS3 Transition ใหก บั element ไดต ามทีค่ ุณตองการ ลดขน้ั ตอนการเขียน code CSS ดวยตนเองประหยัดเวลาและไดง านสวย ๆ ทม่ี คี ุณภาพและนาประทบั ใจ

Intergrate With Adobe Business Catalystหากคุณยงั ไมร ูจัก Adobe Business Catalyst มากอน ใหค ณุ นกึ ถงึ บรกิ าร hosting ตั้งแตจด domain name, ใชบ ริการhosting, จนถึง SEO, Web Analytic จนไปถงึ E-commerce system เรียกไดว าครบวงจร ซึ่ง Adobe นํา online service นี้มาเชื่อมเขา กับ Adobe Dreamweaver เพือ่ ให Web designer ไมต อ งออกไปหา domain หรอื hosting ที่ไหน แคส มัครใชบรกิ าร แลว ก็สามารถ upload ตวั Web Project ขนึ้ ไปใชงานไดท นั ที (มที ้งั แบบฟรีใหทดลองใช และเสยี เงนิ เปน รายเดอื น)

Web Font ManagementAdobe Dreamweaver CS6 ไดม สี วนของการจัดการ Web Font ทาํ ใหป ญหาเรือ่ งฟอนตใ นเคร่อื งผชู มสามารถแสดงตวั อกั ษรบนหนา เวบ็ ไดถ ูกตอง

CSS Multiple Classes Selectionการเลอื กใส CSS Class ให HTML Element ใน Adobe Dreamweaver รุน กอ นๆ ไมส ามารถทําไดอ ยา งสะดวกนัก ตอ งอาศัยความรอบคอบ แตใน Adobe Dreamweaver CS6 ไดมีการเพม่ิ สว นในการจดั การ CSS Multiple Class ใหงา ยและสะดวกขน้ึ มาก

คุณสมบตั คิ อมพวิ เตอรกอ นตดิ ตั้งโปรแกรม1. หนว ยประมวลผลกลาง (CPU) ไมน อ ยกวา Intel Pentium4 หรือ AMD Athlon 642. หนวยความจาํ (RAM) ไมนอ ยกวา 512 MB (แนะนาํ 1 GB)3. เน้ือท่วี า ง (Harddisk) ไมน อยกวา 1 GB4. จอภาพ (Monitor) ความละเอยี ดไมน อยกวา 1,024 x 768 Pixels5. ระบบปฏบิ ัติการ (OS) ไมต่ํากวา ระบบปฏบิ ตั ิการ Windows XP6. ไดรฟดีวีดี-รอม (DVD-ROM drive)

การตดิ ตง้ั โปรแกรม Adobe DreamweaverCS6การตดิ ตั้งโปรแกรม Adobe Dreamweaver CS6 สามารถตดิ ต้งั จากแผนซีดหี รือดาวนโ หลดจากอินเทอรเนต็ มขี ัน้ ตอนการติดตง้ั ดงั นี้ 1. คลกิ ท่ีไอคอน

2. จะปรากฏหนา ตา ง ใหเ ลอื กตําแหนงท่จี ะตดิ ตั้งโปรแกรม เมื่อเลอื กเสร็จแลว คลกิ ที่ปมุ Next

3. จะปรากฏหนาตาง การติดตงั้ โปรแกรม ซงึ่ แบง ออกเปน 2 แบบ คอื - Install ตองมี Serial Number เพือ่ ใชต ิดตั้งโปรแกรม - Try เปน โปรแกรมสําหรบั ทดลองใช 30 วนั หมายเหตุ การติดตั้งโปรแกรมในครั้งน้ี เลือกการตดิ ต้ังแบบ Install

4. จะปรากฏหนา ตา ง แสดงลขิ สทิ ธ์เิ กี่ยวกบั โปรแกรม ใหค ลกิ ท่ปี ุม Accept

5. จะปรากฏหนา ตาง ใหใ ส Serial Number จากน้นั ใหคลกิ ท่ปี ุม Next

6. จะปรากฏหนา ตาง Options เพ่อื เลอื กโปรแกรมในการตดิ ตั้ง ดงั น้ี

6. จะปรากฏหนาตา ง Options เพื่อเลอื กโปรแกรมในการตดิ ตง้ั ดงั นี้ (ตอ )- เลอื กโปรแกรม Adobe Dreamweaver CS6 เพือ่ ตดิ ตงั้ โปรแกรม- ชอง Language เพอ่ื เลอื กภาษาในการตดิ ตง้ั โปรแกรม- ชอ ง Location เพอื่ เลอื กตาํ แหนงในการติดตงั้ โปรแกรม โดยการติดตงั้ อตั โนมตั ิ จะถกู ตดิ ต้งั ท่ตี าํ แหนง C:\ProgramFiles\Adobe (สามารถเปลย่ี นตําแหนงในการติดตัง้ ได)- เมือ่ กาํ หนด Options ตาง ๆ เสรจ็ แลว ใหค ลิกทีป่ มุ Install

7. จะปรากฏหนา ตา ง กาํ ลังตดิ ตั้งโปรแกรม เม่อื ติดต้งั โปรแกรมเสรจ็ เรยี บรอย ใหคลกิ ที่ปมุ Close

ขน้ั ตอนการเปดโปรแกรม Adobe Dreamweaver CS6ทําการเปด โปรแกรม Dreamweaver โดยเขา ไปที่ เมนู Start > All Programs > AdobeDreamweaver CS6

เม่อื เปดโปรแกรมคร้งั แรก จะพบหนาจอดงั ภาพ ใหค ลิก Select All >> OK

จากนั้นจะเขา สูหนา จอ 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 อกี ในคร้ังตอไป

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

โปรแกรม 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 เปน ตน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 เม่ือเราคลกิ วตั ถใุ นเอกสารจะปรากฏ TagSelect ใน Status Bar ข้นึ มา เมื่อเราคลกิ เลอื ก Tag Selector แลวแทก็ ตา งๆ ทถี่ ูกลอ มดวยแท็กที่เราเลอื กจะถกู เลือกดวย6.หนาตา ง Properties Inspector เปน หนา ตางเล็ก ๆ ทอ่ี ยดู า นลา งสดุ ของหนา จอโปรแกรม เปนสวนทใี่ ชงานมากทส่ี ุดเน่อื งจากเปน สวนทใี่ ชกาํ หนดคณุ สมบตั ิสาํ คัญ ๆ ของออบเจก็ ตท ่ีวางในหนาเว็บเพจ เชน ตําแหนง ขนาด และสี7.กลุม พาเนลตา งๆ (Panel Groups)พาเนลเปนกรอบเล็ก ๆ ท่รี วบรวมเครื่องมอื ตาง ๆ สําหรบั ใชท าํ งานเฉพาะเร่ืองไว เชน พาเนล CSS Styles ใชจดั การกับสไตล CSS และพาเนล Files ใชจ ดั การกบั ไฟลแ ละโฟลเดอรภ ายในเว็บไซตใ น Dreamweaver ประกอบไปดวยพาเนลจํานวนมาก ซ่ึงสามารถเปด/ปดไดโ ดยเลือกคาสงั่ Window แลว เลือกชือ่ พาเนลนนั้ หรอื กดคยี ลัดทีแ่ สดงดานหลังช่ือพาเนลดงั รูป

ไมบรรทดั (Ruler)ไมบรรทัดจะปรากฏทีด่ านบนและดา นซา ยของวินโดว Document เพอื่ ใหสาหรบั ชว ยกําหนดตาํ แหนง หรอื ขนาดขององคประกอบตาง ๆ ท่ีวางบนเว็บเพจ สาหรบั การจดั การตา ง ๆ กับไมบ รรทัดจะทาํ ไดด ังนี้ ● ซอน/แสดงไมบรรทดั เลอื กคาสั่ง View > Rulers > Show (คยี ลัด Ctrl +Alt +R) ● ยายตาํ แหนง 0,0ใหคลิกลากรูป ไปวางตําแหนง ใหม ● ยา ยตําแหนง 0,0 กลบั มาที่มมุ ซายบนสดุ ใหด ับเบลิ คลิกที่ หรือคลิกขวาบน ไมบรรทดั แลวคลกิ เลือกคาสั่ง Reset Origin ● เปลย่ี นหนว ยวัดบนไมบ รรทัดใหคลิกขวาบนไมบรรทดั แลวเลอื กหนวย ซึง่ มีดงั นี้ ○ Pixels พกิ เซล ○ Inches นิว้ ○ Centimeters เซนตเิ มตร

เสน กริด (Grid)เปนอกี เคร่ืองมอื หนึ่งทใ่ี ชชว ยกําหนดตาํ แหนงและขนาดของออบเจ็คบนเวบ็ เพจ โดยมลี ักษณะเปนชอ งตารางทีม่ ีระยะหางเทา ๆ กันท้งั แนวต้งั และแนวนอน สามารถกาํ หนดสเี สนกริด และกาํ หนดใหออบเจค็ ยึดจบั (snap to grid) กบั เสนเพ่ือใหสามารถจัดออบเจ็คตาง ๆ อยใู นแนวเดยี วกันไดง าย ● ซอ น/แสดงเสน กริดทําไดโดยเลอื กคาํ สั่ง View > Grid> Show Grid (คียล ดั Ctrl Alt G) ● กาํ หนดใหอ อบเจค็ ยดึ จบั เสนกรดิ เลอื กคาํ สงั่ View > Grid > Snap To Grid ● ปรับแตงคณุ สมบัติของเสนกรดิ เลอื กคาํ ส่งั View > Grid > Grid Setting

เสนไกด (Guide)เปน อีกเคร่ืองมอื หนงึ่ ที่ใชก าํ หนดตาํ แหนงและขนาดของออบเจค็ บนเว็บเพจ เพอ่ื ใหไ ดตามแนวทต่ี อ งการอยางเทีย่ งตรงการสรา งเสน ไกดทeไดโ ดยคลกิ ลากเมาสจ ากไมบ รรทดั ดา นใดดา นหนึง่ ออกมาปลอยบนเวบ็ เพจตรงจดุ ที่ตอ งการ ● ซอ น/แสดงเสนไกดท าํ ไดโดยเลอื กคาํ สง่ั View > Guides >Show Guides ● ยายเสน ไกด คลิกลากเสน ไกดน้นั ไปยงั ตําแหนงใหม ● ลบเสนไกด คลกิ ลากเสน ไกดอ อกไปปลอ ยนอกวนิ โดว Document ● ลบเสน ไกดท งั้ หมด เลือกคาํ สงั่ View > Guides > clear Guides ● ล็อคเสน ไกดไมใ หถ กู ยายหรือลบ เลือกคําสง่ั View > Guides > Lock Guides

การกาํ หนด Fontการกําหนดคา เบื้องตน สําหรบั การสรา งเวบ็ เพจ ก็คือ การกําหนดคาตัวอกั ษรใหเว็บบราวเซอรสามารถแสดงผลไดอ ยางถกู ตอ ง และเหมาะสม1.ไปทเี่ มนู Edit >> Preferences จะไดหนาตางการกําหนดคา2.หลังจากนั้นใหเลือก Category >> Fonts และ Fonts >> ไทย หรือ Unicode3.การกําหนดคา Default ใหก ับเอกสาร สามารถทาํ ไดโ ดย Category >> New Document และ Default encoding>> ไทย(Windows) หรอื Unicode (UTF-8)