บทที่ 2 รู้จัก dreamweaver
TRANSCRIPT
บทท 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 เปนคณสมบตทชวยใหผใชสามารถเลอกรปแบบหนาจอทมองคประกอบสวนตาง ๆ ไดเหมาะกบลกษณะการท างานมากขน ไมวาจะเปนการเรยกใชพาเนล,การจดวางพาเนลทจ าเปนและการเลอกมมมอง เปนตน