รายงาน เร อง การใชงาน window

ใน Dreamweaver

เสนอ คณครส ชาต นาด

จ ดท ำาโดย

นาสาวเสาวณย ด ช อร มย เลขท 25 นางสาวอรอ วรรณ โคมาร มย เลขท 30

ช นม ธยมศ กษาปท 5/3

รายงานเล มน เป นส วนหน งของว ชา คอมพวเตอร

โรงเร ยนรมยบ ร พ ทยาคม ร ชม งคลาภเษก

สำาน กงานเขตพ นท การศ กษา มธยมศ กษา เขต 32

ภาคเร ยนท 2 /2554

คำาน ำา

รายงานเลมนเปนสวนหนงของวชาคอมพวเตอร จดทำาขน เกยวกบการใชงานแถบเมน window ใน Dreamweaver ซง

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

ระเบยบDreamweaver เปนโปรแกรมประเภท Web Design ซงม

คณสมบตในการใชงานในแบบ WYSIWYG อานวา วสสวก (What You See Is What You Get) คอ โปรแกรมประเภทคณ

ออกแบบหนาเวบเพจ หรอเวบไซต มาอยางไรในโปรแกรม คณกจะเหนงานของคณเปนแบบนน

ขอขอบพระคณคณครสชาต นาด ทกรณาใหคำาแนะนำาใน การจดทำารายงานฉบบนจนสำาเรจลลวงดวยด หากวารายงานฉบบ

นมขอผดพลาดหรอบกพรองประการใด กขออภยมา ณ โอกาสนดวย

คณะผ จ ดท ำา

สารบญเร อง หนา

Insert 1Properties 4CSS Styles 6AP Elements 5Behaviors 7Databases 11Bindings 13Server Behaviors 15Components 18Files 22Assets 25Snippets 30Tag Inspector 35Results 35Reference 38

History 41Frames 45Code Inspector 51Timelines 55Workspace Layout 59 Hide Panels 59Cascade 59Tile Horizontally 60Tile Vertically 60บรรณานกรม ٦١

แถบเมน Window ใน Dreamweaver

กล มหนาต างพาเนล (Panel Group)

ในโปรแกรม

ช อแถบเมน

ค ย ล ด ความหมาย

Insert Crl+F2 แทรก

Properties

Crl+F3 คณสมบต

CSS Styles

Shift+F11

ลกษณะ CSS

AP Elements

F2 องคประกอบของ AP

Behaviors

Shift+F4

ลกษณะการทำางาน

Databases

Crl+ Shift+F10

ฐานขอมล

Bindings Crl+ F10

ผก

Server Behaviors

Crl+ F9

ลกษณะการทำางานของเซรฟเวอร

Components

Crl+ F7

สวนประกอบ

Files F8 ไฟล

Assets F11 สนทรพย

Snippets Shift+F9

ตวอยาง

Tag Inspector

F9 ตรวจสอบแทก

Results F7 ผลลพธ

Reference

Shift+F1

การอางอง

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

ความสามารถในการจดหนาเวบไดไมเหมอนกน เราสามารถเรยก เปดพาเนลไดจากเมนคำาสง Window > และเลอกพาเนลท

ตองการดงน

1.Insert

เร อง : Insert ร ปภาพกบ Dreamweaver แลวร ปไม แสดงท Browser ?

คำาถามทผมมกจะพบอยบอย ๆ กบการใชงาน Dreamweaver เรองของการแทรกรปภาพ หรอการ Insert Image นนกคอ มกจะ

ประสบปญหากนในกรณทวา... ทำาไม Dreamweaver พอดเวบท ตนเองทำา มรปภาพขนปรกต แตพอไปดท Web Browser รปภาพ

กลบไมปรากฏสะงน... คนทำากงง หาสาเหตไมพบ กโปรแกรมเหน ทำาไม Browser ไมเหน พาลโทษไปยง Browser หรอตว

เลอกเมนคำำสง Window > เลอกพำเนลทตองกำร

กลมหนำตำงพำเนลทเรำเลอกเปดขนมำใชงำน

Dreamweaver สะดอ ๆ กม ? บทความนจะมาแนะนำาถงสาเหตดง กลาว ใหทานนำาไปใชแกไขปญหาดครบ

สาเหตท ร ปภาพไม ปรากฏท Browser ?

สาเหตปญหาแบบนกวา 85% ทผมพบมาคอ เมอมการใช โปรแกรม Dreamweaver ในการ Insert Image ผใชงานมกจะ

ทำาการเลอกท Relative To เปน Site Root ดงรป

ซงทง ๆ ทจรงแลวคา Default ของโปรแกรม จะกำาหนดในสวนน เปน Document ไวให แตผใชงานบางทานมาเลอกเปน Site

Root ขณะททำาการ Insert

สาเหตทาง HTML Coding

เนองจากถาเรามการเลอก Relative To เปน Site Root กบ โปรแกรมไว แตในโปรแกรม Dreamweaver จะสามารถแสดง

รปภาพไดโดยปรกต ตอเมอมทำาการ Preview จงจะพบปญหาดง กลาว หรอจะพบปญหาดงกลาวกรณอพโหลดขนไปไวบน

Hosting จรงแลว

โคด HTML ทไดจากการเลอก option ขางตนจะไดเปนลกษณะดงน

<img src="/dwthai/Basic/new_update.gif" width="90" height="25">

ซงโคดลกษณะดงกลาวใหสงเกตตรง src จะมการเรยกโดย ทำาการยด Path ไปท Root ของเอกสาร ซง Root Path จะถก

แทนทดวยเครองหมาย Slash ( / ) ขางหนาสด ดงนนการเรยก รปภาพมาประกอบเวบเพจจงเรยกขนมาจาก Root Path ซง Root

Path ถาเปนในเครองคอมพวเตอรของเราจะอยทชอ Drive (กรณ ทเราทำาเวบในแบบ HTML ปรกต) เชน C:\ เปนตน หากเราทำาการ

Click ขวาดทหนา Browser ทรปภาพทไมปรากฏ แลวเลอกไปท Properties ดงรป

ใหเราสงเกตท Address ดงรป เราจะเหนไดวาเวบเพจเราพยายาม เรยกไฟลรปภาพขนมาจากตำาแหนงของ Drive จรง ๆ ซง ณ.จดน

นเอง ทำาใหเมอเราทำาการอพโหลดขอมลเวบเราขนไปวางบน Web Hosting ทำาใหเวบเพจเราไมสามารถแสดงผลรปภาพได

ยกเวนเสยแตวา ไฟลรปภาพเรา เมอทำาการเรยกจาก Root Path แลว จะพบ Path ตามทเวบเพจพยายามเรยกรปภาพนนใหแสดง

นนมอยจรง

** หากทานใดไมเขาใจเรอง PATH วาคออะไร กขามหวขอนไป ไดเลยครบ ลงไปอาน วธการแกไขไดเลย **

ว ธ การแก ไข

สำาหรบวธทางแกไขในกรณน คอ ใหทานกลบไปแกไขไฟล รปภาพททำาการ Insert เขามาในเวบเพจ แลวทำาการ

เลอก Relative To เปน Document ดงรป

ซงการเลอกในแบบ Document จะเปนการเรยกใชงานรปภาพใน แบบ Ralative Path โดยใหมความสมพนธกบตำาแหนงไฟล

เอกสารหรอไฟล HTML เวบเพจนน จงทำาใหไมวาเราจะทำาการ Upload ไฟล Web Page นไปวาง ณ. จดใด การเรยกไฟลรปภาพ

ขนมาปรากฏจะอางจากเอกสาร HTML ไปหาไฟลรปภาพนนเสมอ ทำาใหลดปญหารองของ Path รปภาพผดลงไปได

ใชงาน Insert Bar ใน Dreamweaver CS3 เปนแถบเครองมอชวยในการนำาขอมลแบบตางๆ มาวางในเวบเพจ

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

ตองการ1. Common แทรกขอมลทวๆ ไป เชน รปภาพ ลงค ตาราง วนท เวลา 2. Layout แทรกขอมลแบบตางๆ เชน ตาราง เฟรม เลเยอรหรอ AP Element3. Forms แทรกขอมลเกยวกบการสรางฟอรม ฟลดตางๆ ทตองใชในฟอรม4. Data แทรกขอมลหรอการจดการกบฐานขอมลทจะนำามาใชในเวบเพจ

5. Spry รวมคำาสงชวยในการนำา Spry แบบตางๆ มาชวยสรางเวบเพจ6. Text รวมคำาสงจดการกบขอความ ตวหนงสอ สญลกษณพเศษ7. Favorites เปนกลมคำาสงทเราอาจสรางขนมาเอง กรณตองใชบางตวบอยๆ

คำาสงตางๆ เหลานปกตกสามารถเรยกใชงานไดจากเมนคำาสงดาน บน File, Edit... แตนำามาทำาเปน ปมแบบน การคลกเลอกใชงาน

จะงายกวา

แสดงการซอน Insert Bar ใน Dreamweaver CS31. คลก View2. คลก Toolbars3. คลกตกถกชอเครองมอเพอแสดงหรอคลกเอาถกออกเพอซอนเครองมอ

2. Properties การจ ดเร ยงข อความในตาราง

จ ดข อม ลในแนวนอน เราสามารถจดขอมลใหชดขวา ชดซาย หรออยตรงกงกลางของ

ชองตาราง โดยการคลกในชองเซลลทตองการ แลวกำาหนดใน ชอง Horz ในแถบ Properties (Window > Properties > Horz)1. คลกในชองเซลลทตองการ แลวกำาหนดในชอง Horz ใน

แถบ Properties2. เมอเลอกในชอง Horz แลวจะไดตำาแหนงของขอความ

ตามทเราตองการ

Default เปนการจดเรยงขอมลแบบปกต (คอจดใหอยชดซายของชองตาราง)

Left จดใหขอมลอยชดซายของชองตารางRight จดใหขอมลอยชดขวาของชองตารางCenter จดใหขอมลอยกงกลางของชองตาราง

จ ดข อม ลในแนวต ง ถามชองตารางทขยายออกมามากกวา 1 แถวเราสามารถกำาหนด

ขอมลนนใหชดดานบน ดานลาง หรอกงกลางได โดยการคลกท

ชองเซลลทตองการแลวกำาหนด Vert ในแถบ Properties (Window > Properties > Vert)

1. คลกเลอกชองเซลลทตองการ แลวกำาหนดใชอง Vert ใน แถบ Properties2. เมอเลอกในชอง Vert แลวจะไดตำาแหนงของขอความ

ตามทเราตองการ

Default เปนการจดเรยงแบบปกตของขอมล (คอจดใหอยกงกลางของชองตาราง)

Top จดใหขอมลอยบนสดของชองตารางMiddle จดใหขอมลอยกงกลางของชองตารางBottom จดใหขอมลอยลางสดของชองตารางBaseline ขอมลบรรทดสดทายจะตดกบขอบเซลลเสน

ลางสด

3. css stylesCSS หรอ Cascading Style Sheet เปนรปแบบของตวหนงสอ

กรอบขอความ ยอหนา เสน ขอบภาพ เครองหมายหนาหวขอ การ จดตำาแหนงวตถ ทใชในเวบเพจมากกวาหนงเวบเพจ ชวยใหการ แกไขสวนตางๆ ดงกลาว สามารถทำาไดทไฟล CSS ไฟลเดยว

เวบไซตขนาดใหญทมขอมลจำานวนมากๆ จำาเปนตองอาศยรปแบบ การจดการกบเนอหาในเวบเพจ อยางมประสทธภาพ การออกแบบ

รปแบบของหวขอ รปแบบการตกแตงเนอหา เปนเรองสำาคญทตอง วาง แผนไวอยางด เพราะจะงายในการปรบแตงภายหลง

มทงหมด 8 ประเภทตามออปเจคทมอยบนเวบเพจ คอ1. Type ไวกำาหนดเกยวกบตวหนงสอ2. Background พนหลง สพนของเวบเพจ3. Block เปนรปแบบการจดยอหนาของขอความในเนอหา4. Box เปนกรอบตางๆ ทงกรอบภาพและกรอบขอความ5. Border เปนเสนขอบภาพ เสนขอบของตวหนงสอ6. List เครองหมายหนาหวขอ หรอลสตของเนอหาบนเวบเพจ7. Positioning การจดตำาแหนง ภาพหรอขอความบนเวบเพจ จดซายกลางขวาของหนาเวบเพจ

8. Extension คณสมบตอนๆ นอกเหนอจากนน เชน การแบงหนา เวบเพจ เอฟเฟคการทำางาน ของเมาสและภาพ

ใชงานพาแนล CSS Style ใน Dreamweaver CS3

1. คลกชอ CSS Style เพอแสดงหรอซอนพาแนล

ลกษณะการใชงาน CSS สไตลใน Dreamweaver CS3 การพฒนาเวบไซท - 10006 แจกฟรเวบไซตใชงาน Dreamweaver CS3

กอนอนเรามาทำาความรจก CSS สไตล กนกอน วา CSS สไตลม ลกษณะการทำางานหรอใชงานกน อยางไร และชวยใหเกดความ

สะดวกมากเพยงใด กบการออกแบบเวบเพจจำานวนมากๆ ซงบาง เวบไซทมเปน รอยเปนพนหนา

1. ลกษณะของภาพบนเวบเพจ ภาพจะมเสนประโดยรอบ ภาพ ลกษณะนจะใช CSS สไตล ชอ pictborder

2. หวขอ ขอตอนรบทกๆ ทาน ใช CSS สไตล ชอ heading หวขอ เปนตวหนาและมสพนเปน สใดๆ

3. รายละเอยดทวไป รสอรทเงยบสงบ... ใช CSS สไตลชอ Bodytext กำาหนดใหใชตวหนงสอแบบ Miceosoft Sans Serif

ขนาด 12 ตวปกต พนสออนๆ4. ขอความดานลาง ออกแบบและพฒนาโดย... ใช CSS สไตล ชอ bodytext เชนกน5. ในการใชงานจรง อาจมการใชเวบเพจคลายกนนเปนรอยๆ

หนา อะไรจะเกดขนเมออยากจะปรบ เปลยนรป แบบบางอยาง เชน ภาพจะใชเสนประโดยรอบ เกดอยากจะเปลยนเปนแบบอน จะไป

ตามแกทก ภาพ กเสยเวลามาก แตการใช CSS สไตล แกทสไตลท เดยว ภาพในทกเวบเพจจะถกแกไขโดยอตโนมต

6. ตวอยางการแกไข ใหดบเบลคลก CSS สไตลชอ Pictborder

7. คลกเลอก Border8. เลอกเสนขอบแบบอนๆ เชน dotted9. ขนาดของเสนคลกเลอกแบบบาง thin10. คลกเลอกสของเสนขอบตามตองการ11. คลกปม Apply เพอดผลงานเดยวนนหรอคลกปม OK ถาถกใจแลว12. ซงกจะมผลทำาใหเสนขอบของภาพถกแกไขโดยอตโนมต13. การใช CSS สไตล กจะชวยใหการจดการกบขอความหรอ

ภาพ ทำาไดงายๆ ในลกษณะน

14. ขอความกเหมอนกนใช CSS สไตล ชอ bodytext กดบเบลคลกชอสไตล15. แกไขแบบ ขนาด สของตวหนงสอตามตองการ16. เสรจแลวคลกปม OK17. ขอความใดๆ ทใชสไตลนกจะถกแกไขไปดวย

เร มสร าง CSS สไตล ใน Dreamweaver CS3

1. สรางไฟลใหมเชน index_css.php แลวดบเบลคลกเปดไฟลขนมาแกไข2. แทรกตาราง พมพขอความและนำาภาพเขามา3. หามจดรปแบบของตวหนงสอหรอภาพ ปลอยไวแบบธรรมดาๆ ไปกอน

4. คลกเครองมอ CSS คลกปม New CSS Rule5. ชอง Name คลกและพมพ Head016. เลอกคาอนๆ ตามตวอยางแลวคลก OK7. คลกเลอก Type8. กำาหนดคณสมบตของตวหนงสอเปน Microsoft Sans Serif

ขนาด 14 ตวหนา สดำา

9. คลก Background10. คลกเลอกสพนเปนสชมพออน #FF66FF11. คลกปม OK12. คลกหลงคำาวา ขอตอนรบทกๆ ทาน

13. คลกเลอกสไตลชอ Head0114. ผลทได

15. คลกปม New CSS Rule อกครง เพอสราง CSS สไตล แบบอนๆ16. คลกและพมพ Pictborder17. คลกปม OK18. คลก Border19. ชอง Style คลกเลอกแบบ Dotted20. ชอง Width คลกเลอกเสนแบบบางๆ thin21. สหรอ Color คลกเลอกสตามตองการ22. คลกปม OK

23. คลกดานหลงภาพ ทตำาแหนงดงตวอยาง24. คลกเลอกสไตลชอ Pictborder25. กรอบรอบภาพจะเปนแบบเสนประ

26. คลกปม New CSS Rule สรางสไตลเพมเตม27. คลกและพมพชอสไตลเชน bodytext แลวคลกปม OK28. คลก Type29. คลกเลอก Font = Microsoft Sans Serif ขนาด 12 ตวปกต normal

30. คลก Background31. คลกเลอกสพนเปนสชมพอาน32. คลกปม OK33. คลกหลงคำาวา .....ฯลฯ34. คลกเลอกสไตลทตองการ35. ขอความดานลาง ออกแบบและพฒนาโดย กคลกเลอกสไตล bodytext เชนกน

36. บนทกงานเกบไว37. ผลงานทไดเมอดผานโปรแกรมเวบบราวเซอร

การใชงาน CSS สไตล ในเว บเพจอ นๆ1. เปดไฟลเวบเพจใดๆ ขนมากอน2. คลกปม Attach Style Sheet3. คลกปม Browse4. ดบเบลคลกโฟลเดอร Style

5. คลกเลอกไฟล mstyle.css แลวคลกปม OK6. คลกหลงภาพหรอแบนเนอร7. คลกเลอกสไตลตามตองการ8. สวนอนๆ กคลกเลอกตามตองการ9. การยกเลกการใชสไตลเหลานน ใหเลอกขอความโดยสราง

แถบดำา แลวคลกเลอก None

ยกเล กใชงาน CSS สไตล ในเว บเพจใดๆ1. คลกทเนอหาในเวบเพจ2. คลก none

ในโปรแกรมนยงม CSS Style สำาเรจรป ชวยใหการออกแบบ เวบเพจ ดดมความเปนมออาชพ ไมตองเสยเวลาออกแบบเอง

1. คลก CSS Style Sheet2. คลก Page From Sample3. คลก CSS Style Sheet4. คลก Full Design : Arial Blue,/Green/Gray5. คลก Create

6. คลก File>>Save7. คลกเลอกทเกบเปนโฟลเดอร Style

8. คลกและพมพชอ mystyle2.css9. คลก Save

10. ดบเบลคลกเปดไฟลใดๆ ขนมา11. คลก Attact Style Sheet12. คลก Browse ไปเลอกไฟล mystyle2.css13. คลกปม OK

14. คลกสวนทตองการใชสไตล15. คลกเลอก Style ตามตองการ16. ผลทได

การอ พโหลดเว บเพจเข าเว บไซตจร ง เวบเพจทมการใชไลบราร ในการอพโหลดเขาเวบไซตจรง นอกจากไฟลเวบเพจแบบ PHP แลวก ตองอพโหลดไฟลแบบ CSS

Style ไปดวย1. จดการอพโหลดไฟลเวบเพจแบบ PHP ตามปกต2. ไฟล CSS Style จะอยในโฟลเดอร styles จะอพโหลดไปทง

โฟลเดอรเลยกได หรอจะเลอก เอาเฉพาะไฟลทตองการกได ในกรณทมการสรางไวจำานวนมาก

4. Layer การสร างเลเยอร ใน Dreamweaver CS3

1. สรางไฟลชอ layer.php2. คลก Layout 3. คลกเครองมอเลเยอร Draw AP Div4. ชทตำาแหนง A กดปมซายคางไว แลวลากไปยงตำาแหนง B เสรจแลวปลอยเมาส

5. คลกขางใน

เลเยอร แลวพมพขอความลงไป พมพแตละบรรทดแลวกด Shift +

Enter6. วาดอก 2 เลเยอร7. ถาจะวางภาพ กคลกในเลเยอร แลวแทรกภาพลงไป ดวยคำาสง Insert>>Image8. การจดการกบภาพหรอขอความบนเลเยอร กจดการเหมอนปกตทวไป

คณสมบต เลเยอร ในเคร องม อ Properties กอนอนตองคลกเลอกเลเยอรทตองการกอน1. CSS-P Element ชอเลเยอร2. Over flow ลกษณะการแสดงเนอหาภายในเลเยอร3. W x H ขนาดกวางคณสงของเลเยอร4. Z-Index ตวเลขระบระดบของเลเยอร ถาเปนตกกเปรยบไดกบ

เลขทบอกชน จะซำากนไมได5. Bg Image ตวเลอกทชวยใหนำาภาพใดๆ มาเปนพนหลงของเลเยอรได6. Vis ซอนหรอแสดงเลเยอรใหปรากฏบนจอ7. Bg Color สพนของเลเยอร

คณสมบต ของเลเยอร พาเนล1. คลก Windows แลวคลกตกถก AP Elements2. คลกแทป AP Element3. Prevent Overlaps ปองกนเลเยอรซอนกนหรอยอมใหเลเยอรซอนกนได4. รปตา คลกเพอแสดงหรอซอนเลเยอรนนๆ 5. จำานวนเลเยอร6. ระดบชนของเลเยอร

การลบเลเยอร ใน Dreamweaver CS31. คลกเลอกเลเยอรทจะลบ2. กดปม Delete ทแปนพมพ

การจ ดการก บข อความบนเลเยอร ใน Dreamweaver CS31. สรางแถบดำาขอความทตองการ2. คลกเลอกคำาสงทตองการในเครองมอ Properties เชน ตว

หนงสอ ขนาด ส ฯลฯ

การจ ดการก บภาพบนเลเยอร ใน Dreamweaver CS31. คลกเลอกภาพ2. คลกเลอกคำาสงทตองการในเครองมอ Properties

การยายต ำาแหนงเลเยอร ใน Dreamweaver CS31. คลกเลอกเลเยอรทตองการ2. ชทแฮนเดลของเลเยอรทเลอก กดปมซายของเมาสคางไวแลวลากเมาสออก3. ไดตำาแหนงทตองการแลวกปลอยปมซายของเมาส เพอวางยงตำาแหนงใหม4. การยายอกวธหนง ใหคลกเลอกเลเยอรทตองการกอน5. คลกและพมพตวเลขในชอง L และ T เปนตำาแหนงในแนวนอน

และแนวตง พมพเสรจแต ละคา แลวกกด Enter

ลดหรอขยายขนาดเลเยอร ใน Dreamweaver CS3

1. คลกเลอกเลเยอร2. ชลกศรทจดทดานใดดานหนง หรอมมใดๆ ใหลกศรเปนรปลกศรสองหว3. กดปมซายของเมาสคางไว แลวลากเมาสเขาหรอออกจากดาน

ตรงกนขาม เพอลดหรอขยายขนาด เลเยอร

การจ ดต ำาแหนงล ำาด บช นบนล างของเลเยอร ใน Dreamweaver CS31. คลกเลอกเลเยอรทตองการ2. ใหชทชอเลเยอรในเลเยอรพาเนล กดปมซายคางไวแลวลาก

ขนลง สลบตำาแหนงบนลางไดตาม ตองการ

การจ ดเร ยงเลเยอร ใน Dreamweaver CS31. วาดเลเยอร 3 เลเยอรดงตวอยาง2. พมพขอความหรอนำาภาพมาวาง จดรปแบบใหเรยบรอย3. เลอกทง 3 เลเยอร โดยคลกเลเยอรแรก กดปม Shift คางไว

แลวคลกเลอกเลเยอรทตอง การทงหมด4. คลกคำาสงเพอจดตำาแหนง Modify>>Arrange>>Align ตามดวยคำาสงทตองการ- Align Left จดชดขอบซาย- Align Right จดชดขอบขวา- Align Top จดไวดานบน- Align Bottom จดไวดานลาง

ปรบแต งเลเยอร ให เท าก นใน Dreamweaver CS3

1. เลเยอรตนแบบทตองการใหเลเยอรอนๆ ถกปรบขนาดใหเทากบเลเยอรน2. คลกเลอกเลเยอรทงหมด โดยตองเลอกเลเยอรตนแบบเปนลำาดบสดทาย3. คลกเมน Modify>>Arrange>>Make Same Width4. คลกเมน Modify>>Arrange>>Make Same Height

การสร างการเช อมโยงในเว บเพจแบบเลเยอร ใน Dreamweaver CS31. สรางแถบดำาหวขอทจะทำาลงค2. ชอง Link คลกและพมพชอไฟลเชน aboutus.php3. ชอง Target คลกเลอก _blank4. หวขออนๆ กสรางลงคใหเรยบรอย5. บนทกงานเกบไวแลวทดสอบโดยพมพกดปม F12

5. Databases

Database พมพชอ Database ถาจำาชอ Database ไมไดใหคลกปม Select

กำาหนดทกอยางเรยบรอยใหคลกปม OK สร า ง Connection เ สร จแล ว ไม ส ามารถต ดต อก บ Database ใหตรวจสอบ ดงน

1. ใหตรวจสอบไฟล Config ของ PHP ชอ php.iniถาเปน Windows 98/Me/XP จะอยท C:\WINDOWSถาเปน Windows 2000 จะอยท C:\WINNTกรณทไมสามารถตดตอกบฐานขอมลของ PostgresSQLเปดไฟล php.ini ดวย Notepadใหคนหา extension=php_pgsql.dll ถาดานหนาท

เครองหมาย ; ใหลบออกใหคนหา extension_dir = ./ ใหแก ./ เปนพนททเกบ

ไฟล php_pgsql.dll2. กำาหนด Site ในสวน Testing Server ถกตองหรอไม3. MySQL หรอ PostgreSQL ทตดตอ Start Service หรอไม

ขนตอนการให DreamweaverMX ตดตอฐานขอมล Database

1. เปดโปรแกรม คลกเมน File เลอก New เพอสรางไฟลขนใหม (New Document ) 2. แทป General ในชอง Category เลอก Dynamic Page และ

เลอกภาษา ทตองการตดตอ เชน ASP VBScript , PHP กดปม Create เพอยนยน

3. เลอก เมน Window > Databases ปรากฏหนาตาง ApplicationCreate a site for this file ( ควรทำาการ MapSite ดวยดในหวขอ " สราง Site Map" )

เลอก Choose a document type เลอก File Extension และ เลอกภาษาทไช กด OK

เลอก Set up the site's testing server เพอตงคา แลวคลกปม OK เพอยนยน

4. ตงคาใน หนาตาง Site Definition ทแทป AdvancedServer Model เลอก ภาษาทใชตดตอ Access เลอก Local/Network Testing Server Folder ชไปทเกบ File URL Prefix ใส http://localhost/

5. หลงจากตงคาเรยบรอยแลว เลอกเครองหมาย+ ทหนาตาง Application ดงรปขางบน

ถาใชภาษา ASP โปรดไปขอท 6 ถาใชภาษา PHP โปรดไปขอท 7

6. ข นตอน การต งค า ส ำาหร บภาษา ASP ถาใชภาษา ASP จะปรากฏรายการดงน

Custom Connection String Data Source Name (DNS)

ตงคา ถาเลอก Custom Connection String Connection Name ใสชอของการตดตอ เพอใชอางถงภายใน

โปรแกรม Dream Connection String ตงคาคำาสงตดตอกบฐานขอมล ( ดจากหวขอ" รวมคำาสง ASP ตดตอ ฐานขอมล")

ตงคา ถาเลอก Data Source Name (DNS) Connection Name ใสชอของการตดตอ เพอใชอางถงภายใน

โปรแกรม Dream

Data Source Name (DNS) เลอกรายการชอฐานขอมล ( จาก ODBC Data Source แทบ System DSN ใน Control Panel ) User Name ใสชอทมใน ฐานขอมล Password ใสรหสผานทมใน ฐานขอมล

คลกปม Test เพอทดสอบการ Connection และคลกปม OK เพอยนยน 7. ข นตอน การต งค า ส ำาหร บภาษา PHP

ถาใชภาษา PHP จะปรากฏรายการดงน MySQL Connection

การตงคา ใน MySQL Connection Connection Name ใสชอของการตดตอ เพอใชอางถงภายใน

โปรแกรม Dream MySQL Server เลอกชอเซฟเวอรทใช หรอ localhost User Name ใสชอทมใน MySQL Password ใสรหสผานทมใน MySQL

และกดปม Select เพอเลอก ฐานขอมล

ถา User Name และ Password ถกตอง จะปรากฏหนาตาง Select Database

เลอก Database และกดปม OK เพอยนยน

คลกปม Test เพอทดสอบการ Connection และคลกปม OK เพอยนยน

8. หนาตาง Application ทตดตอฐานขอมลเรยบรอยแลว6.Bindings

ว ธ การทำา 1. ใหคณทำาการ New เอกสารขนมาใหมแลวทำาการ Save เปนไฟล *.php หรอ ถามไฟลงานทเปน *.php อยแลวใหทำาการ Open ไฟลนนขนมา2. เมอเราไดเอกสารทเปน PHP แลว ใหเราทำาการ เปดหนาตาง Bindings ขนมา โดยไปท Main Menu -> Window ->Bindings ดงรป

1. เมอเราทำาการเลอกไปทเมน Bindings แลวเรากจะไดหนาตางทชอวา Bindings ขนมา<< การร บจากคาท ส งมา >>3.1 หากเราตองการรบคาทสงมาในแบบ GET ใหเราเลอกไปท URL Variable ดงรป

3.2 หากเราตองการรบคาทสงมาในแบบ POST ใหเราเลอกไปท FORM Variable ดงรป

4. เมอเราทำาการเลอกรปแบบการรบคาจากขอ 3 แลว จะเกด หนาตางใหมขนมา เพอใหเราใสคาชอของตวแปรทจะรบ ดงรป

เชน ถา URL เปน http://www.myweb.com/test.php?name=somchai เรากเอาคำาวา name พมพลงไปทชอง Name ดงรป5. เมอเราทำาการใสชอของตวแปร (key) ลงไปแลว เรากจะไดชอและการรบคาจากตวแปรนนปรากฏในหนาตาง Bindings ดงรป

<< การนำาไปใชงาน >>1. ใหเราไปทหนาตาง Bindings แลว Click เลอกไปทคาทเราตองการจะรบและพมพออกทาง Browser 2. จากนนใหเราทำาการ Click และลากมาวางไวในตำาแหนงทตองการบนหนา Document ของเรา ดงรป

3. เมอเราทำาการลากและนำามาวางลงไปแลว จะปรากฏคาดงน- {URL.name} หากมการรบคาดวยวธ GET- {FORM.name} หากมการรบคาดวยวธ POST4. ใหเราเปดไปท Show Code View จะปรากฏ CODE ดงรป

5. สงเกตไดวา CODE ทไดจะเปนโคดของ PHP ในแบบทเราคนเคย

ps. ใน Dreamweaver MX ยงมวธการรบคาจาก GET or POST อกรปแบบ คอ การเรยกใชผาน ICON จาก TAB ทชอวา PHP ดงรป

การรบคาในแบบ POST

การรบคาในแบบ GET

แตโคดทไดจะแตกตางกน ลอง VIEW CODE สงเกตด...

7. Server BehaviorsServer Behavior ดานลางมไวสำาหรบชวยใหคณใชเปนอนเท

อรเฟซโตตอบกบการทำางานของ PayPal1. Single Purchase Behavior

เมอใชงานกบภาพหรอขอความ Server Behavior นจะสราง ลงกเชอมตรงไปยงหนาจอการชำาระเงน PayPal จงชวยให

คณสรางลงก เชน "ซอเลย" ได วธนมประโยชนสำาหรบไซตทขายผลตภณฑหรอบรการเพยงอยางเดยว

2. The From Your Cart Behavior หากคณตดสนใจใชโซลชนตะกราสนคาอนๆ เชน

UltraCart II คณกยงคงสามารถใชบรการของ PayPal เพอ รบชำาระเงนคาสนคาของคณได ขอมลทคณตองระบ (นอก

เหนอจาก PayPal ID และ URL ตางๆ) มเพยง หมายเลขคำา สงซอและยอดรวมของการขาย ขอมลนจะถกรวบรวมและสง

ตอไปยงอนเทอรเฟซของผใชไดอยางสะดวกรวดเรว3. Add Item To Cart Behavior

นอาจเปน Server Behavior ทชวยเพมยอดขายใหคณได มากทสด Add Item to Cart Behavior สามารถตดตงใช

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

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

คณดวยรปแบบทสวยงาม จากนน ผใชจะสามารถเขาสขน ตอนการชำาระเงนไดจากหนาจอน โดยทพวกเขาสามารถ

เขาสระบบบญช PayPal ของตนเอง หรอระบขอมลการชำาระเงนทตองการกได

4. View Cart Behavior เปน Behavior ทใชงานรวมกบ "Add item to cart" และ

เมอผใชคลกลงกทสรางโดย Server Behavior แบบ View Cart กจะมหนาตางแสดงสนคาในตะกราปรากฏขนมา

ขอมลเดยวทตองใชคออเมลของคณทใชเปน PayPal ID5. Donation Behavior

ลงกทสรางโดย Server Behavior นจะนำาผใชไปยงหนาจอ ทสามารถบรจาคเงนใหคณไดจากบญช PayPal ของตน ผท

จำาหนายแชรแวรหรอองคกรทไมแสวงหากำาไรสามารถใช ประโยชนจากวธนได เนองจากวธนชวยใหคณสามารถรบ

เงนจากเวบไซตของคณไดโดยไมตองผกเวบไซตเขากบรายการสงซอ

6. Subscription Behaviorเวบไซตทตองมการบอกรบสมาชกเพอเขาชมเนอหาตางๆ

จะไดรบประโยชนจากบรการทไมเหมอนใครท PayPal มให น ผใชทลงทะเบยนเพอใชบรการสำาหรบสมาชกจะไดรบการ

เรยกเกบเงนจาก PayPal เปนรายเดอน เงนจะถกสงตรงไป ยงบญช PayPal ของคณ และคณจะไดรบอเมลสำาหรบการ

ชำาระเงนทกครง เพอแจงใหคณทราบวาผใชเลอกทจะตอ อายสมาชก ลงกทสรางโดย Server Behavior นจะเปด

หนาตางใหมขนมาเพอขอขอมลสำาหรบเรยกเกบเงนจากผใช

7. การใช Server Behavior แบบ Single Purchaseกำรใช Server Behavior แบบ Single Purchase นนงำยมำก เมอออกแบบหนำเวบของคณแลว คณเพยงแตเลอกออบเจกตบนหนำเวบทจะใชเปนปมสงซอ สงนอำจเปนภำพ "ซอสนคำ" หรอขอควำมบำงขอควำมทสอไปในแนวทำงเดยวกน ไฮไลตออบเจกตทตองกำรแลวใช Server Behavior ตำมทคณตองกำร Server Behavior แบบ Single Purchase จะอยในแผง Server Behavior ใต PayPal > PayPal Single Purchase

รปท 4: pp_SinglePurchase

1.1.1.1.การสงใหแสดงคำาตอบซำำา ทำาแถบสคลมทงตารางคำาตอบ ทเมนดานขวา

เรอง Application แทบ Server Behaviors คลก เมาสทเครองหมาย + เลอกคำาสง Repeat

Region ท Recordset เลอก Recordset2 ท Show เลอก

All records

เมอกดปม ok จะเหนเครองหมาย Repeat ตอนแสดงซำาตองการใหแตละตารางคำาตอบแสดง

หางกน 1 บรรทด ใหเมาสขวาทตาราง เลอกคำา สง Select > Table กดปมลกศรบนคยบอรดให

ไปทางขวา 1 ครง เพอเปนการเลอนเคอรเซอร ไปทางขวาของตาราง แลวกดปม Enter เพอ

เปนการเพมบรรทดทดานลางของตาราง จาก ตวอยางดานลาง จะเหนวาบรรทดเปลา อยใน

กรอบของ Repeat เวลาแสดงซำาตารางจะเวน หางกน 1 บรรทดทกครงดวย

พรววผลลพธใน IExplore

8.Componentสรางคอมโพเนนทในการสรางเวบแอพพลเคชน

9.Files ทำาความร จ กพาเนล Files ใน Dreamweaver CS3

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

ชนดอน ใหเปนระเบยบ1. คลกเลอก Site ทตองการใชงาน2. รายชอไฟลและโฟลเดอรภายในเวบไซท3. คลกปม + เพอแสดงชอไฟลในโฟลเดอรยอย คลก - เพอซอน4. รายชอไฟลภายในโฟลเดอรทถกคลกเลอก5. ไฟลเวบเพจ เชน htm, html, php, asp จะเปนไฟลเวบเพจ เปนขอความ6. ไฟล jpg, gif จะเปนไฟลภาพประกอบในเวบเพจ เนอหาใน

เวบเพจทเปนขอความและไฟลภาพ ประกอบจะแยกกน เวลานำาไป ใชงาน กตองเอาไปใชทงไฟลเวบเพจและไฟลรปภาพ

10. Assets เปนการกำาหนดคณสมบตใหกบสวนตางๆของเวบเพจ เชน

Template, library หรอ scriptข นตอนว ธ การแทรกภาพ

1.>สรางเอกสารทเราตองการแทรกภาพขนมา

2.> เปดเครองมอ Assets ขนมา เครองมอจะอยสวนลางของ Dream

3.> เราจะเหนรายชอไฟลรปภาพใหเราลากไฟลทเราตองการแทรกภาพลงบนเวบเพจของเราไดเลย

4.> เพยงเทานเรากสามารถแทรกรปภาพไดอกแบบแลวครบ11. Snippets

Window > Snippets เปนเสมอนคลงโคด บางคนบางทานนยม การกอปปและวาง ถาทานเปลยนมาใชคณสมบตตวน ชวตกจะ

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

เตมโคดทเราใชบอยเขาไป ไดดวย ไมเพยงเทานน ยงอนญาตใหเรา

กำาหนด Shortcut Key เพอนำาโคดมาใชงานไดอยางรวดเรวอก ดวย (ลองคลกขวาด)

12. Behaviors การใชงาน Behaviors สำาหรบการสรางหนาเวบเพจขนพน

ฐานอาจจะดธรรมดาเกนไป ดงนนจงควรสรางความนาสนใจเพม ขนโดยการใสลกเลนหรอความสามารถ เพมเตมใหกบออบเจกต

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

สวยงามใหกบหนาเวบเพจ

การเปล ยนร ปเม อวางเมาส การสรางลกเลนแบบแรกกคอ การสบเปลยนรปภาพเมอนำาเมาสไป

วาง โดยเมอนำาเมาสออกจากรปกใหเปลยนรปภาพกลบมาเปนรป เดมซงมขน ตอนการสราง

ดงน1. คลกรปภาพทตองการใหเปลยน เมอนำาเมาสไปวาง2. คลกเมน Window > Behaviors

จากนนหนาตาง Behaviors จะเปดขนมาทางดานขวา3. คลกปม จะเหนไดวามคำาสงตางๆแสดงขนมามากมาย4. คลกเลอกคำาสง Swap Image โดยจะปรากฏ หนาตาง Swap Image ขนมา

5. คลกปม ทชอง Set Source to :

เพอเลอกไฟลภาพทจะใหแสดงเมอนำาเมาสไปวาง โดยหนาตาง Select Image Source จะปรากฏขนมา6. คลกเลอกไฟลภาพทตองการ7. คลกปม

เมอกลบมาทหนาตาง Swap Image อกครง จะสงเกตไดวาชอ ไฟลภาพทเราเลอกปรากฏขนมาทชอง Set Source to :

8. คลกปม

9. กดปม <F 12 > ทคยบอรด เพอดผลลพธผานทางบราวเซอร

10. นำาเมาสไปวางทรปภาพ รปภาพนนกจะเปลยนไปเปนรปภาพ ทกำาหนดไวทนท โดยเมอเลอนเมาส ออกจะกลบไปเปนรปภาพเดม

11. ปดหนาตางบราวเซอร

13. Reference

Reference เปนหนาตางทใชอธบายความหมายของแทก แตละ แทกหรอโคด Javascript หรอ VBSscript ทเราใสในเวบเพจ

14. Historyการยอนกลบเพ อแก ไขขอผ ดพลาดดวยพาเนล History

ในการทำางานออกแบบเวบเพจ เมอทำาไปเรอย ๆ อาจเกดขอผด พลาดไดเราสามารถยอนกลบไปแกไขขอผดพลาดได โดยไปท

เมนบาร Winndow>History หรอกดคย< Shift+F10>ดงภาพ

เมอเปดพาเนล History จะเหนบนทกการทำางานทกขนตอน โดย ขนตอนลาสดจะเรยงอยลำาดบบนสดของรายการ ขนตอนกอนหนา

นจะอยลาง ๆ ดงภาพ

การยอนกลบการทำางานหลาย ๆ ขนดวยพาเนลน เราทำาไดโดย

คลกเลอนแถบ ไปยงขนตอนทเราตองการยอนกลบไปโดยจะ เลอนไปทละขนตอน หรอหลายขนตอนได ดงภาพ

การทำาซำาขนตอนการทำางานเราสามารถสงใหทำาซำาขนตอนการ ทำางานทเราตองการจะใหทำาซำา ในพาเนล History ไดโดย

1. คลกเลอกขนตอนทตองการใหซำา2. คลกทปม ทอยมมลางดานซายมอ ดงภาพ

15. Frames

ว ธ สร างเฟรมใน Dreamweaver CS31. คลกเลอกโฟลเดอร Frame เปนการกำาหนดวาจะสรางไฟลเกบไวในน2. คลก File>>New3. คลก Page from Sample>>Frameset4. คลกเลอกลกษณะของเฟรมทตองการ เชน Fixed Top, Nested Left5. คลกปม Create

6. เพอความสะดวกในการทำางานใหเปดเครองมอจดการเฟรมขน มาโดยคลกเมน Windows>> Frames

7. เครองมอ Fames จะปรากฏขนมา จะม 3 สวนตามจำานวนเฟรม ทเราเลอก กคอ TopFrame, LeftFrame และ MainFrame

8. พมพขอความลงไปบนเฟรมแตละเฟรมกพอ ยงไมตองวางภาพ

การเซฟเฟรมเก บไว ลกษณะของเฟรมทไดสรางตามตวอยางนจะมอย 3 เฟรมดวยกน

การเซฟใหปฏบตดงน1. คลกปม Close ปดไฟล2. จะปรากฏกรอบขอความเตอนให Save ไฟล ใหคลกปม Yes3. ในขณะเดยวกนทเฟรมกจะแสดงขอบเขตใหรวา กำาลงจะเซฟเฟรมใดเปนไฟลเกบไว

4. เฟรมน ใหคลกและพมพชอไฟล เชน right.php แลวคลกปม Save

5. จะปรากฏกรอบขอความเตอนให Save ไฟลเพอบนทกเฟรมอน ใหคลกปม Yes

6. เฟรมดานซายน ใหตงชอไฟล left.php

7. เฟรมดานบนใหตงชอไฟล top.php

8. เซฟครบทง 3 เฟรมแลว กจะปรากฏกรอบขอความเตอนให บนทกไฟลอกครงไฟลสดทายน จะเปนไฟลททำาหนาทรวมเฟรม

ทงสามเขาดวยกนใหตงชอวา index.php เปนไฟลหลก

9. หลงจากนนกจะไดไฟลทงหมด 4 ไฟล- index.php เปนไฟลหลก- top.php เปนเฟรมดานบน- left.php เปนเฟรมทอยดานซายมอ- right.php เปนเฟรมทอยดานขวามอ10. ถาดบเบลคลกทแตละไฟลกจะแสดงขอมลเฉพาะภายในไฟล

นนๆ แตถาเปดไฟล Index.php กจะปรากฏขอมลในไฟลทงหมด จะเปดขนมาพรอมกน 4 ไฟล

11. ใหสรางไฟลอนๆ เพมเตม เชน aboutus.php, album.php,

promotion.php, map.php และ contact.php จะกอปปจากงาน เกาเขามากได จะไวใชในการสรางลงคเชอมโยงกบเฟรม

ในการสรางเวบเพจแบบเฟรม ถาเลอกใหมแค 2 เฟรม ไฟลกจะม นอยกวาน มเพยงไฟลทเหนเฟรม ดานบน ดานลาง และไฟลหลก

index.php 3 ไฟลเทานน แกไขไฟลเฟรมเซตใน Dreamweaver CS3

ในการแกไข ใหเปดไฟลหลกคอ Index.htm ไฟลกจะถกเปดขน มาทง 4 ไฟล

1. ในเครองมอ Fames ใหคลกเฟรมหรอไฟลทตองการแกไขเชน เฟรมชองซายมอทเปนเมน ใหเลอก

2. พมพ เมนใหเลอก3. คลกปม Page Properties4. คลกเลอกสพนในสวน Background color แลวคลกปม Apply

หรอ OK5. เมอคลกทเฟรมใดๆ แลวปรบแตงส ตวหนงสอ หรอภาพ

ประกอบ เปนทถกใจแลวกจดการ เซฟไฟลไว โดยคลกเมน File>>Save All คำาสงนจะเซฟทเดยวพรอมกนทกไฟล

การปร บแต งเฟรมหลก1. คลกเลอกเฟรมทงหมด โดยคลกทขอบเฟรม2. ในเครองมอ Properties ใหคลกเลอกขอบของเฟรม (Borders

เลอก Yes ถาตองการ ใหแสดงขอบเฟรม)3. Border Width ใหคลกและพมพความหนาของเสนขอบเฟรม4. Border Color ใหคลกเลอกสของขอบเฟรม5. Column เปนสวนใหกำาหนดความกวางของเฟรม คณสมบต ต างๆBorders เสนแบง Yes มเสนแบง No ไมตองมเสนแบงBorder Width ขนาดความหนาของเสนแบงเฟรมBorder Color สเสนแบงเฟรมRow Value ความสงของเฟรมRow Unit หนวยวดความสงของเฟรม

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

เฟรมสำาคญทตองปรบแตงกคอ เฟรม ในชองขวามอ เพราะเปนเฟรมทตองการแสดงเวบเพจทมการเชอมโยง1. กดปม Alt ทแปนพมพคางไว แลวคลกทเฟรมชองขวามอ หรอ

คลกเลอกทเครองมอ Frames2. ในชอง Frame name ใหคลกและพมพใหม ถาตองการ ปกต

จะชอ mainframe3. ตวเลอกอนๆ- Scroll กำาหนดใหแสดงหรอซอนแถบเลอนดขอมล ในกรณทมขอมลจำานวนมาก

คณสมบต ต างๆFrame name ชอเฟรม

Src ลงคกบเวบเพจทตองการแสดงScroll แสดงหรอซอนแถบเลอนกรณทขอมลมจำานวนมาก เกนหนาจอNo resize ตวเลอกสำาหรบใหผใชปรบขนาดของเฟรมไดหรอไมไดBorders แสดงหรอซอนเสนแบงเฟรมBorders Color สเสนแบงเฟรมMargin Width ระยะหางระหวางขอความขอบซายขอบขวาของเฟรมMagin Height ระยะหางระหวาง เนอหากบขอบบน ขอบลางของเฟรม

การพมพ Title ของเฟรมเซ ท1. คลกขอบนอกของเฟรมในเครองมอ Frames2. คลกชอง Title และพมพขอความลงไป

สร างการเช อมโยงในเฟรม Dreamweaver CS3 วธการสรางลงคหรอการเชอมโยงระหวางเวบเพจในเฟรม เชน

เมอคลกหวขอในเมนกจะปรากฏ เวบเพจใหมในชองดานขวามอ1. สรางแถบดำาหวขอทตองการสรางลงค เชน เมนหลก2. คลกและพมพชอไฟลทตองการเชอมโยง เชน right.php3. ในชอง Target ใหคลกเลอก mainframe 4. สวนหวขออนๆ จะกำาหนดคาคลายกนเชน สรางแถบดำา เกยวกบเรา5. ชอง Link คลกและพมพ aboutus.php6. ชอง Target คลกเลอก mainframe เทานน เพอใหแสดงในเฟรมขวามอ

7. แกไขเสรจแลวคลก File>>Save All จะเปนการบนทกไฟลท เดยวทกไฟล เนองจากเวบเพจ แบบเฟรม จะมการเปดไฟลตางๆ

พรอมกนมากกวา 1 ไฟล

16. Code Inspector

Code Inspector>F10 สำาหรบคอโคดตวจรง แบบทเนนเขยน โคดเปนหลก Code Inspector หนาตาจะคลายๆกบ Code View

แตกแคคลายๆ ไมเหมอน

17. Timelines

การใช Timelines ในหวขอนจะแนะนำาความสามารถอก อยางหนงของ Dreamweaver นนกคอ การสรางความเคลอนไหว

บนหนาเวบเพจดวย Timelines โดยจะเปนการเปลยนตำาแหนงขอ งออบเจกต หรอรปภาพทบรรจอยในเลเยอรไป ยงตำาแหนงตางๆ

ในเวบเพจตามชวงเวลาทกำาหนด ซงขน ตอนดงตอไปน1. เปดไฟลเวบเพจทตองการจะสราง Timelines ขนมา โดยหนา

เวบเพจดงกลาวจะตองใชเลเยอรเปนสวน ประกอบอยดวย2. คลกเมน Window > Others > Timelines จะ ปรากฏหนาตาง Timelines ขนมา3. คลกรปภาพ โดยรปภาพนจะตองสรางไวใน เลเยอร

4. คลกขวาทเฟรม 1 ในหนาตาง Timelines ซงจะปรากฏเมนคำาสงขนมา5. คลกเลอกเมน Add Object จะแสดงแถบ ภาพเคลอนไหวขนมา

6. คลกเฟรมสดทาย ในทนคอ เฟรมท 157. ลากเสน Timelines ไปทเฟรมสดทาย ใน ตวอยางลากไปจนถง

เฟรมท 508. ลากเลเยอรรปภาพไปยงตำาแหนงสดทายทตองการใหแสดงผล

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

ตอไปเราจะกำาหนดทศทางการเคลอนไหว เฉพาะชวงระหวาง เฟรมท 20 กบ เฟรมท 35

9. คลกขวาเฟรมท 20 จะปรากฏเมนคำาสงขนมา10. คลกเลอกเมน Add Keyframe11. ลากเลเยอรรปภาพไปยงตำาแหนงทตองการ

12. คลกขวาเฟรมท 35 จะปรากฏเมนคำาสงขนมา13. คลกเลอกคำาสง Add Keyframe14. ลากเลเยอรรปภาพไปยงตำาแหนงทตองการ

โดยจะเหนไดวา มแนวเสนของการเคลอนไหว แสดงขนมาระ หวางเฟรมท 20-35 ตามทกำาหนด

15. คลกชอง Autoplay ใหมเครองหมายถกแสดง ทหนาชอง เพอกำาหนดใหแสดงการเคลอนไหวโดยอตโนมต16. คลก Loop ใหมเครองหมายถกปรากฏทหนาชอง เพอกำาหนดใหแสดงภาพเคลอนไหวแบบวนไปเรอยๆ

17. กดปม <F 12 > ทคยบอรด เพอดผลลพธผานทางบราวเซอร

บรรณานกรม

http://www.ptcn.ac.th/wandee/Text/page3.htmlhttp://161.200.184.9/webelarning/elearning2_2550/Dreamweaver/__5.htmlhttp://www.thaigoodview.com/library/contest2551/tech03/38/Sirindhorn/Images/lesson5.swfhttp://help.adobe.com/en_US/dreamweaver/cs/using/WS8599BC5C-3E44-406c-9288-C3B3BBEB5E88.html