บทท 2 รจก Dreamweaver

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

รปท 2.1 แสดงขนตอนการเขาสโปรแกรม

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

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

วดโอแนะน า

คณสมบตใหม

รปท 2.2 สวนประกอบของ Welcome Screen

เปดไฟล

เดม

เปดดค าแนะน าการ

ใชโปรแกรม

สรางไฟล

ใหม

ดาวนโหลดโปรแกรมหรอดขอมลบน

เวบไซตของ Adobe คลกออปชนนหากไมตองการแสดง

Welcome Screen อกในครงตอไป

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

วนโดว Document คอสวนทใชส าหรบใสเนอหาและจดองคประกอบของเวบเพจ วธใชงานวนโดวนจะคลายกบทคณใชโปรแกรมเวรดโปรเซสเซอรทวไป เชน พมพขอความ วางภาพกราฟก และสรางตารางขอมลโดยเนอหาตางๆจะแสดงออกมาคลายกบทปรากฏบนบราวเซอร วนโดว Document มมมมองในการท างาน 6 แบบดวยกน ซงคณสามารถเลอกไดโดยคลกปม บ น ทลบาร หรอหากตองการสลบการท างานระหวางมมมอง Code กบมมมอง Design สามารถเลอกค าสง View > Switch Views

กลมพาเนลตาง ๆ

แถบสถานะ

(Status Bar)

พาเนล Properties

Tag Selector

ชอเรอง เวบเพจ ปมยอวนโดว

Document

คนหาขอมลจาก www.adobe.com

ปดไฟล

เมนหลก

แถบชอ เวบเพจ

วนโดว

Document

โหมดการแสดงพาเนลตาง ๆ

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

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

รปท 2.4แสดงมมมองการออกแบบ

รปท 2.5 แสดงมมมองโคด

มมมองโคดและออกแบบ (Code and Design View หรอ Split) ในมมมองนวนโดว Document จะแสดงเวบเพจทงในรปแบบทปรากฏบนบราวเซอร และ

รปแบบค าสงภาษา HTML พรอมๆกนดงรป เพอใชในการออกแบบและตรวจสอบแกไขค าสงไปในขณะเดยวกน คณสามารถปรบขนาดพนทของแตละสวนไดโดยการคลกแลวลากทเสนแบง ระหวางทง 2 สวนน มมมองแสดงหนาเวบเหมอนดบนบราวเซอร (Line View) ในมมมองนวนโดว Document จะแสดงเวบเพจเหมอนกบการรนหนาเวบบนบราวเซอร สามารถแสดงผลในสวนของ JavaScript และ Plug in ตางๆ ซงถอเปนมมมองทเพมขนมาเพออ านวยความสะดวกตอผจดท าเวบไซตในการตรวจเชคองคประกอบและลงคตางๆไดอยางรวดเรว ท าใหประหยดเวลากวาการแสดงผลผานทางเวบบราวเซอรโดยตรง

รปท 2.6 แสดงมมมองโคดและออกแบบ

รปท 2.7 แสดงมมมองเวบเหมอนดบนบราวเซอร

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

รปท 2.8 แสดงมมมองแสดงผลโคดหนาเวบ

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

ทลบาร (Toolbar) คอแถบเครองมอซงรวบรวมปมค าสงทจ าเปนตองใชงานบอยๆเอาไว ใน Dreamweaver CS5 มทลบารอย 5 ชดดวยกน ซงสามารถเปดใชหรอปดไดโดย เลอกค าสง View > Toolbars > ชอทลบาร คลกขวาบนทลบารใด ๆ ทเปดอยแลวคลกชอทลบารนน ทลบาร Document ทลบารนประกอบดวยปมค าสงในการก าหนดมมมองและการแสดงผลของเวบเพจ

ปม หนาท

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

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

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

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

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

แสดงเวบเพจเหมอนการรนบนบราวเซอร

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

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

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

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

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

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

ตารางท 2.2 แสดงปมค าสงตาง ๆ ใน ทลบาร Document

ทลบาร Standard ประกอบดวยปมค าสงในการจดการไฟลเวบเพจ และค าสงพนฐานในการยาย,กอปป,วางเนอหารวมทงการยกเลกและท าซ าค าสงดวย

พาเนล Insert ประกอบดวยปมค าสงทใชวางออบเจคชนดตาง ๆ ลงบนเวบเพจ โดยปมเหลานจะแบงออกเปนกลม ๆ เชน กลม Common ส าหรบสรางองคประกอบทว ๆ ไป, กลม Form ส าหรบสรางฟอรม เปนตนปมค าสงบางปมจะมเมนยอยอยภายในซงสงเกตไดโดยจะมรปลกศรเลก ๆ อยดานขางปมนน

ปม หนาท

ค าสง New ส าหรบสรางเวบเพจใหม

ค าสง Open ส าหรบเปดไฟลเวบเพจ

ค าสง Browse in Bridge ส าหรบคนหาและจดการไฟลดวยโปรแกรม Adobe Bridge CS5

ค าสง Save ส าหรบบนทกเวบเพจทก าลงแกไข

ค าสง Save All ส าหรบบนทกเวบเพจทงหมดทเปดอย

ค าสง Print Code ส าหรบพมพชดค าสง HTML ของเวบเพจ

ค าสง Cut ส าหรบตดเพอยายออบเจคทก าลงเลอก

ค าสง Copy ส าหรบกอปปออบเจคทเลอก

ค าสง Paste ส าหรบวางออบเจคท cut หรอ copy ไว

ค าสง Undo ส าหรบยกเลกค าสงทท าไปแลว (ยอนไดหลายครง)

ค าสง Redo ส าหรบท าซ าในค าสงทยกเลกไป

ตารางท 2.3 แสดงปมค าสงในทลบาร Standard

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

Common เปนกลมค าสงส าหรบวางออบเจคทตองใชงานบอยๆ ในการสรางเวบเพจ เชน ภาพกราฟก,ตาราง,widget และไฟลมลตมเดย เปนตน

ปมทมเมนยอย เมอคลกทลกศรจะปรากฏรายการค าสงยอยใหเลอก

รปท 2.10 สวนประกอบของพาเนล Insert

รปท 2.11 กลมค าสง Common

Layout ส าหรบวางออบเจค ส าหรบวางออบเจคทใชจดโครงสรางของเวบเพจ เชน ตาราง,เฟรม และ AP Element (เดมเรยกวา “เลเยอร”)

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

รปท 2.12 กลมค าสง Layout

รปท 2.13 กลมค าสง Forms

Data ส าหรบวางค าสงทใชจดการฐานขอมลและดงขอมลจากฐานขอมลมาแสดงบนเวบเพจ

Spry ส าหรบวางออบเจคทใชเทคโนโลยของ Spry แบบตาง ๆ

รปท 2.14 กลมค าสง Data

รปท 2.15 กลมค าสง Spry

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

Text ส าหรบจดรปแบบขอความภายในเวบเพจ เชน หวเรองตวหนา ตวเอยง หวขอ บคเลต รวมทงแทรกสญลกษณพเศษตาง ๆ

Favoritesเปนกลมทสามารถเพมปมค าสงจากกลมอน ๆ เขามาเกบไดเองเพอความสะดวกในการใชงาน (โดยคลกขวาบน Insert Bar แลวเลอก Customize Favorites) เปลยนมมมองของพาเนล Insert สามารถเปลยนมมมองของพาเนล Insert ระหวางแบบเมนและแบบแทบไดโดยการเปลยน Workspace จาก Designer เปน Classic กอนแลวท าตามขนตอนดงน

คลกเปลยน Workspace

Designer เปน Classic

รปท 2.17 แสดงการเปลยนมมมองของพาเนล

รปท 2.16 กลมค าสง Favorites

ขณะแสดงแบบแทบ

ขณะแสดงแบบเมน

แถบสถานะ (Status Bar) เปนแถบซงอยดานลางของวนโดว Document ประกอบดวย 2 สวน คอดานซายเปน Tag Selector สวนดานขวาเปนเครองมอตาง ๆ ดงรปหนาถดไป Select ใชเลอกออบเจคบนเวบเพจ (เชน ขอความและภาพกราฟก) หลงจากใชเครองมออน ๆ แลว จะตองกลบมาคลกเลอกเครองมอนเสมอ Hand ใชเลอนหนาจอเวบเพจ โดยเลอกเครองมอนแลวไปคลกลากบนวนโดว Document (ถาดบเบลคลกเครองมอน เวบเพจจะขยายมมมองจนออบเจคทเลอกไวแสดงเตมหนาจอ Zoom ใชคลกหรอลากเพอขยายมมมองเวบเพจ หรอกดคยลด Alt แลวคลกเพอยอมมมอง (ถาดบเบลคลกเครองมอน จะไดมมมองท 100 %)

Tag Selector มประโยชนคอใชดความสมพนธระหวางแทกและใชเลอกออบเจคเพอก าหนดคณสมบต โดยเมอเลอกออบเจคใด ๆ บนเวบเพจ จะปรากฏชอแทก (ค าสงภาษา HTML) ของออบเจคดงกลาว รวมทงแทกอน ๆ ทครอบอยต งแตจดเรมตนของเวบเพจ เชน หมายถงก าลงเลอกรปภาพ (แทก <img>) อยภายในเซล (แทก <tr>และ <th>) ของตาราง (แทก <table>) ซงตารางนอยในเนอหาหลกของเวบเพจ (แทก <body>) อกท

รปท 2.18 แสดงแบบแทบ

รปท 2.19 แสดงแบบเมน

รปท 2.20 แสดงแถบสถานะ (Status)

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

รปท 2.21 แสดงพาเนล Properties

รปท 2.22 แสดงกลมพาเนลตาง ๆ

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

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

1. คลกเพอเปดเมน

2.เลอกค าสง Close Tab Group

รปท 2.23 แสดงการปดกลมพาเนลทไมไดใช

เสนกรด (Grid) เปนอกเครองมอหนงทใชชวยก าหนดต าแหนงและขนาดของออบเจคบนเวบเพจ โดยมลกษณะเปนชองตารางทมระยะหางเทา ๆ กนท งแนวต งและแนวนอน สามารถก าหนดสเสนกรด และก าหนดใหออบเจคยดจบ (snap to grid) กบเสน เพอใหสามารถจดออบเจคตาง ๆ อยในแนวเดยวกนไดงาย ซอน/แสดงเสนกรดท าไดโดยเลอกค าสง View > Grid> Show Grid (คยลด Ctrl Alt G) ก าหนดใหออบเจคยดจบเสนกรดเลอกค าสงView > Grid > Snap To Grid ปรบแตงคณสมบตของเสนกรดเลอกค าสง View > Grid > Grid Setting

เสนกรด

รปท 2.24 แสดงการยายต าแหนงของไมบรรทด

รปท 2.25 แสดงเสนกรด

Grid

เสนไกด (Guide) เปนอกเครองมอหนงทใชก าหนดต าแหนงและขนาดของออบเจคบนเวบเพจ เพอใหไดตามแนวทตองการอยางเทยงตรง การสรางเสนไกดท าไดโดยคลกลากเมาสจากไมบรรทดดานใดดานหนงออกมาปลอยบนเวบเพจตรงจดทตองการ ซอน/แสดงเสนไกดท าไดโดยเลอกค าสง View > Guides >Show Guides ยายเสนไกด คลกลากเสนไกดนนไปยงต าแหนงใหม ลบเสนไกด คลกลากเสนไกดออกไปปลอยนอกวนโดว Document

2. คลกลากเสนไกดไปปลอยนอกวนโดว

Document เสนไกดจะหายไป

1.เลอนเมาสไปทเสนไกดใหเปนรปลกศร

รปท 2.27 แสดงขนตอนการท างานเกยวกบเสนไกด

รปท 2.26 แสดงเสนไกด (Guide)

ลบเสนไกดทงหมด เลอกค าสง View > Guides > clear Guides ลอคเสนไกดไมใหถกยายหรอลบ เลอกค าสง View > Guides > Lock Guides เรยกใชรปแบบหนาจอ (Workspace) รปแบบของหนาจอหรอทเรยกวา Workspace เปนคณสมบตทชวยใหผใชสามารถเลอกรปแบบหนาจอทมองคประกอบสวนตาง ๆ ไดเหมาะกบลกษณะการท างานมากขน ไมวาจะเปนการเรยกใชพาเนล,การจดวางพาเนลทจ าเปนและการเลอกมมมอง เปนตน