การใช้โปรแกรม Adobe Dreamweaver CS5 ·...

การใชโปรแกรม Adobe Dreamweaver CS5 1. เรมตนใชงานโปรแกรม Adobe Dreamweaver CS5

การเรยกเปดโปรแกรม Adobe Dreamweaver ขนมาใชงานมขนตอนดงน

1. คลกปม เลอก All Programs > Adobe Dreamweaver CS5

2. จะเขาสหนาจอโปรแกรม

2. สวนประกอบของหนาตาง Welcome Screen

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

3. สวนประกอบของหนาตางการใชโปรแกรม Adobe Dreamweaver CS5

หนาตางการใชโปรแกรม Adobe Dreamweaver CS5 จะมสวนประกอบทส าคญ ดงน

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

Windows Document มมมมองในการท างาน 6 แบบดวยกนซงสามารถเลอกไดโดยคลกปมมมมองบนทลบาร

หรอหากตองการสลบการท างานระหวางมมมอง Code กบมมมอง Design สามารถเลอกค าสง View > Switch views 1.1 มมมองออกแบบ (Design View) จะแสดงเวบเพจตามลกษณะคลายกบทจะปรากฏบนเบราวเซอร

โดยสามารถแกไขและจดวางเนอหาตาง ๆ ลงบนเวบเพจ

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

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

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

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

จะแสดงผลโคดรวมกบมมมอง Live View (จะแสดงมมมอง Live Code ไดกตอเมออยท

มมมอง Live View เทานน) เปนมมมองทเสมอนการใชค าสง View > Source จากบราวเซอร

ซงใชตรวจดโคดในต าแหนงตางๆ เทานน ไมสามารถแกไขโคดในมมมองนได

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

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

โดยสามารถดไดจากพาเนล CSS Styles เพอใหเลอกใชหรอยกเลกค าสงทเคยก าหนดเอาไวในมมมองนได

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

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

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

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

3.2 Layout ส าหรบวางออบเจค ส าหรบวางออบเจคทใชจดโครงสรางของเวบเพจ เชน ตาราง เฟรม และ เลเยอร

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

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

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

3.7 Text ส าหรบจดรปแบบขอความภายในเวบเพจ เชน หวเรองตวหนา ตวเอยง หวขอ บคเลต

รวมทงแทรกสญลกษณพเศษตางๆ\

3.8 Favorites เปนกลมทสามารถเพมปมค าสงจากกลมอนๆ เขามาเกบไดเอง เพอความสะดวกในการใชงาน

4. แถบสถานะ (Status Bar) เปนแถบซงอยดานลางของ Windows Document ประกอบดวย 2 สวน คอ

ดานซายเปน Tag Selector สวนดานขวาเปนเครองมอตางๆ

4.1 Select ใชเลอกออบเจคบนเวบเพจ (เชน ขอความ และภาพกราฟก) หลงจากใชเครองมออนๆ แลว จะตองกลบมาคลกเลอกเครองมอน

4.2 Hand ใชเลอนหนาจอเวบเพจ โดยเลอกเครองมอนแลวไปคลกลากบนวนโดว Document

(ถาดบเบลคลกเครองมอน เวบเพจจะขยายมมมองจนออบเจคทเลอกไวแสดงเตมหนาจอ

4.3 Zoom ใชคลก หรอลาก เพอขยายมมมองเวบเพจ หรอกดคยลด Alt แลวคลกเพอยอมมมอง

(ถาดบเบลคลกเครองมอน จะไดมมมองท 100 %

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

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

ทงนรายละเอยดบนพาเนล Properties จะเปลยนแปลงตลอดเวลาขนกบวาขณะนนก าลงเลอกออบเจคใด

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

4. การสรางเวบไซต

ในการสราง Dreamweaver Site มขอมลส าคญอย 3 สวน ทตองก าหนด คอ

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

Remote Server เปนขอมลเกยวกบเซรฟเวอรบนอนเทอรเนตทจะน าเวบไซตไปฝากไว เชน เซรฟเวอร โฟลเดอร หลกทใชเกบไฟล วธการอพโหลด และชอผใชรหสผานทใชลอกอนเพออพโหลด

Testing Server เปนขอมลทเกยวกบเซรฟเวอรทใชส าหรบทดสอบและประมวลผล Dynamic page (เวบทมการใช Server-side script เชน ASP หรอ PHP )

การสรางเวบไซต 1. เลอกค าสง Site>New>Site

2. คลกแทบ 3. ตงชอเวบไซต 4. คลกปม Browse

5. จะปรากฏหนาตางเพอใหเลอกต าแหนงและโฟลเดอรหลกทใช เกบขอมลทงหมดของเวบไซต

6. คลกปม Select 7. คลกปม Save

8. เวบไซตทสรางใหมจะถกเปดใชอตโนมตโดยจะดไดทพาเนล Files

5. การแกไขเวบไซต

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

1. เลอกค าสง Site > Manage Sites

2. คลกชอเวบไซต

3. คลกปม Edit

4. คลกแทบ Site

5. แกไขขอมลตาง ๆ ตามตองการ

6. คลกปม Save

6. การสรางโฟลเดอรส าหรบเกบไฟล

หลงจากทสรางเวบไซตแลว สามารถสรางโฟลเดอรยอยไวภายใตโฟลเดอรหลกของเวบไซตนนเพอใชจดเกบไฟลใหเปนหวดหม ไมวาจะเปนไฟลทสรางขนในโปรแกรม Adobe Dreamweaver เชน เวบเพจ (.htm /html) ไฟลสไตลชต (CSS) หรอไฟลทน าเขามาจากโปรแกรมอน เชน รปภาพ ไฟลเสยง เปนตน สามารถท าไดดงน

1. คลกขวาบนโฟลเดอรหลกของเวบไซตแลวเลอก New Folder

2. ตงชอโฟลเดอรแลวกดคย Enter

3. ถาตองการสรางโฟลเดอรอนอกกท าไดท านองเดยวกน

7. การสรางเวบเพจใหม

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

7.1 สรางเวบเพจเปลา

1 เลอกค าสง File > New

2 เลอกกลมเวบเพจเปน Blank Page 3 เลอกประเภทของเวบเพจเปน HTML 4 เลอกรปแบบโครงสรางเวบเพจเปน None (คอไมมรปแบบมาตรฐานทโปรแกรมเตรยมไวใหใชตงคาดฟอลต)คลก Create 5 คลก Create

7.2 สรางเวบเพจจากรปแบบโครงสราง CSS (CSS Layout) 1. เลอกค าสง File > New

2. เลอกกลมเวบเพจเปน Blank Page 3. เลอกประเภทของเวบเพจเปน HTML 4. เลอกรปแบบโครงสรางทตองการ 5. รปแบบโครงสรางเลอก (ใหใชตามคาดฟอลต) 6. คลก Create

7.3 สรางเวบเพจใหมจากไฟลตวอยาง

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

1. เลอกค าสง File > New

2. เลอกกลมเวบเพจเปน Page form Sample 3. เลอกชนดเวบเพจตวอยาง 4. เลอกเวบเพจตวอยางทตองการ 5. แสดงภาพของเวบเพจตวอยางทเลอก 6. คลก Create

8. การเปดเวบเพจเดม

การเปดไฟลเวบเพจทสรางไวแลวขนมาแกไขสามารถท าไดหลายวธ เชน กรณใชค าสงจากเมนดงน

1. เลอกค าสง File > Open

2. ปดขาไปยงโฟลเดอรหลกทจดเกบเวบไซตและโฟลเดอรยอยทเกบไฟล 3. คลกเลอกไฟลเวบเพจ

4. คลก Open

9. การบนทกเวบเพจ

หลงจากทสรางหรอแกไขเวบเพจเสรจจะตองสงบนทกเวบเพจนนดวย

1. เลอกค าสง File > save

2. เปดเขาไปยงโฟลเดอรหลกทจดเกบเวบไซตและโฟลเดอรยอยทจะใชเกบไฟล 3. ตงชอไฟล 4. คลก Save