web viewวิธีที่ 1 คลิก start -> all programs -> adobe dreamweaver cs6...
TRANSCRIPT
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 กลมหลก อะไรบาง