A B C

ใบความรเรอง เรมตนใชงานดวยโปรแกรม Adobe Dreamweaver CS6

การเปดโปรแกรมวธท 1 คลก start -> All Programs -> Adobe Dreamweaver CS6 ดงตวอยางดานลางวธท 2 ดบเบล คลกไอคอน ทหนาจอ Desktop

สวนประกอบของ welcome screen หลงจากเปดโปรแกรมขนมาจะปรากฏหนาตาง welcome

screen ซงแบงออกเปน 3 กลมหลกดงภาพดานลาง ดงน

A. เปดไฟลงานเกาทเคยเรยกใชงาน (open a recent ltem)B. สรางงานใหม (create new) ใชสำาหรบสรางไฟลงานใหม ซงสามารถเลอกสรางไฟลงานไดหลายชนด ไมวาจะเปน ไฟล html, php, asp,หรอ JavaScriptC. สรางงานสำาเรจรป (create

สวนประกอบหนาจอโปรแกรม Adobe Dreamweaver CS6

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

ซงจะประกอบดวยกลมคำาสงดงน- Common ใชวางออบเจกตทตองใชงานบอย ๆ เชน รปภาพ ตาราง

ไฟลมลตมเดย เปนตน- Layout ใชวางออบเจกตทใชจดโครงสรางของเวบเพจ เชน ตาราง

เฟรม และ AP element (หรอเลเยอร)

1.เมน

3. พนทสรางเวบ

2. แถบ

5. กลมหนาตา

6.แถบสถานะ

4.หนาตาง properties

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

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

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

แทบเลตโดยใชเทคโนโลยแบบ jQuery- InContext Edting ใชสรางออบเจกตทชวยอำานวยความสะดวกให

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

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

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

3. พนทสรางงาน (Document area) เปนสวนทใชสรางหนาเวบเพจ ใสเนอหา และองคประกอบตาง ๆ ของเวบเพจ ซงสามารถเลอกเปดพนทสรางงานไดดวยกน 4 มมมอง

- มมมองออกแบบ (Design View) ใชแกไขและจดวางเนอหาตาง ๆ ลงบนเวบเพจ

- มมมองโคด (Code View) ใชสำาหรบเปดดคำาสงตาง ๆ เชน HTML PHP ASP และ JSP และสามารถแกไขคำาสงตาง ๆ ไดตามตองการ

- มมมองโคดและออกแบบ (Code and Design View หรอ Split) แสดงทงแบบมมมองออกแบบ และมมมองโคดพรอมกน สามารถปรบขนาดพนทของแตละสวนไดโดยคลกลากทเสนแบงระหวางทง 2 สวนน

- มมมองแสดงเวบเพจเหมอนดบนเบราเซอร (Live View) แสดงหนาเวบเพจเหมอนดบนเบราเซอรทงในสวนของ JavaScript และ Plugin

4. หนาตาง properties inspector เปนหนาตางเลก ๆ ทอยดานลางสดของหนาจอโปรแกรม เปนสวนทใชงานมากทสด เนองจากเปนสวนทใชกำาหนดคณสมบตสำาคญ ๆ ของออบเจกตทวางในหนาเวบเพจ เชน ตำาแหนง ขนาด และส5. กลมหนาตางพาเนล (Panels) เปนหนาตางเลก ๆ ทรวบรวมเครองมอไวเปนกลมตามหนาททเกยวของ ทำาใหใชงานไดสะดวกขน6. แถบสถานะ (Status Bar) เปนแถบทอยทางดานลางของหนาตาง ๆ Document ประกอบดวย 2 สวน คอ ดานซายเปน Tag Selector สวนดานขวาเปนเครองมอตาง ๆ

หลกสำาคญกอนการสรางเวบเพจ1. เลอกรปแบบพนททำางาน(Workspace) ใหเหมาะสม2. จดการกบหนาตางไฟล3. เตรยมโฟลเดอรสำาหรบสรางเวบไซต4. สราง Define Site เพอจดระบบใหขอมล

การบนทกเวบเพจ1.คลกเลอกคำาสง File - > Save (หรอกดคยลด Ctrl+S)

- ถาตองการบนทกเวบเพจเดมใหเปนชอใหม เลอกคำาสง Save As- ถาตองการบนทกเวบเพจทงหมดทเปดใชงานอย เลอกคำาสง Save All

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

3. ตงชอไฟลทตองการ (กรณหนาแรกของเวบไซต ตองตงเปน Index.html เทานน นอกจากนนตงชอตามชนดของไฟลงาน)

4. เลอกประเภทไฟลทจะบนทกเปน html5. คลกปม Save

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

Dreamweaver CS6

ใหนกเรยนตอบคำาถามลงในสมดแลว1. อธบายขนตอนการเปดโปรแกรม Adobe Dreamweaver CS62. สวนประกอบของ Welcome Screen ม 3 กลมหลก อะไรบาง

3. สวนประกอบของหนาจอโปรแกรม Dreamweaver CS6 มกสวน อะไรบาง4. หลกสำาคญกอนการสรางเวบไซต คอ อะไร5. อธยายขนตอนการบนทกไฟลงาน