รายงาน

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

ใน Dreamweaver

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

จดท าโดย

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

นางสาวอรอวรรณ โคมารมย เลขท 30 ชนมธยมศกษาปท 5/3

รายงานเลมนเปนสวนหนงของวชา คอมพวเตอร โรงเรยนรมยบรพทยาคม รชมงคลาภเษก

ส านกงานเขตพนทการศกษามธยมศกษา เขต 32 ภาคเรยนท2 /2554

ค าน า

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

Dreamweaver เปนโปรแกรมประเภท Web Design ซงมคณสมบตในการใชงานในแบบ WYSIWYG อานวา วสสวก (What You See Is What You Get) คอ โปรแกรมประเภทคณออกแบบหนาเวบเพจ หรอเวบไซต มาอยางไรในโปรแกรม คณกจะเหนงานของคณเปนแบบนน

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

คณะผจดท า

สารบญ เรอง หนา Insert 1 Properties 4 CSS Styles 6 AP Elements 5 Behaviors 7 Databases 11 Bindings 13 Server Behaviors 15 Components 18 Files 22 Assets 25 Snippets 30 Tag Inspector 35 Results 35 Reference 38 History 41 Frames 45 Code Inspector 51 Timelines 55 Workspace Layout 59 Hide Panels 59 Cascade 59 Tile Horizontally 60 Tile Vertically 60 เอกสารอางอง 61

แถบเมน Window ใน Dreamweaver

ชอแถบเมน

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

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 F9 ตรวจสอบ

Inspector แทก

Results F7 ผลลพธ

Reference Shift+F1 การอางอง

History Shift+F10 ประวต

Frames Shift+F2 เฟรม

Code Inspector

F10 ตรวจสอบรหส

Timelines Alt+F9

ระยะเวลาท

Workspace Layout

เคาโครงพนทท างาน

-coder

-Designer นกออกแบบ

-Dual Screen

-Save Current..

บนทกปจจบน

-Manage.. การจดการ

กลมหนาตางพาเนล (Panel Group) ในโปรแกรม Dreamweaver มหนาตางพาเนลตางๆทชวยเพมความสามารถในการจดการ และออกแบบหนาเวบของเราได ซงแตละพาเนลจะมความสามารถในการจดหนาเวบไดไมเหมอนกน เราสามารถเรยกเปดพาเนลไดจากเมนค าสง Window > และเลอกพาเนลทตองการดงน

Hide Panels F4 ซอนแผง

Cascade

Tile Horizontally

เรยงแนวนอน

Tile Vertically

เรยงแนวตง

1 Untitled-1

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

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

1. Insert

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

ค าถามทผมมกจะพบอยบอย ๆ กบการใชงาน Dreamweaver เรองของการแทรกรปภาพ หรอการ Insert Image นนกคอ มกจะประสบปญหากนในกรณทวา...ท าไม Dreamweaver พอดเวบทตนเองท า มรปภาพขนปรกต แตพอไปดท Web Browser รปภาพกลบไมปรากฏสะงน...คนท ากงง หาสาเหตไมพบ กโปรแกรมเหนท าไม Browser ไมเหน พาลโทษไปยง Browser หรอตว 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 Element 3. Forms แทรกขอมลเกยวกบการสรางฟอรม ฟลดตางๆ ทตองใชในฟอรม 4. Data แทรกขอมลหรอการจดการกบฐานขอมลทจะน ามาใชในเวบเพจ 5. Spry รวมค าสงชวยในการน า Spry แบบตางๆ มาชวยสรางเวบเพจ 6. Text รวมค าสงจดการกบขอความ ตวหนงสอ สญลกษณพเศษ 7. Favorites เปนกลมค าสงทเราอาจสรางขนมาเอง กรณตองใชบางตวบอยๆ ค าสงตางๆ เหลานปกตกสามารถเรยกใชงานไดจากเมนค าสงดานบน File, Edit... แตน ามาท าเปน ปมแบบน การคลกเลอกใชงานจะงายกวา

แสดงการซอน Insert Bar ใน Dreamweaver CS3

1. คลก View 2. คลก Toolbars 3. คลกตกถกชอเครองมอเพอแสดงหรอคลกเอาถกออกเพอซอนเครองมอ

2. Properties การจดเรยงขอความในตาราง จดขอมลในแนวนอน เราสามารถจดขอมลใหชดขวา ชดซาย หรออยตรงกงกลางของชองตาราง โดยการคลกในชองเซลลทตองการ แลวก าหนดในชอง Horz ในแถบ Properties (Window > Properties > Horz) 1. คลกในชองเซลลทตองการ แลวก าหนดในชอง Horz ในแถบ Properties 2. เมอเลอกในชอง Horz แลวจะไดต าแหนงของขอความตามทเราตองการ

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

จดขอมลในแนวตง ถามชองตารางทขยายออกมามากกวา 1 แถวเราสามารถก าหนดขอมลนนใหชดดานบน ดานลาง หรอกงกลางได โดยการคลกทชองเซลลทตองการแลวก าหนด Vert ในแถบ Properties (Window > Properties > Vert) 1. คลกเลอกชองเซลลทตองการ แลวก าหนดใชอง Vert ในแถบ Properties 2. เมอเลอกในชอง Vert แลวจะไดต าแหนงของขอความตามทเราตองการ

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

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

3. css styles CSS หรอ 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. คลกเลอก Border 8. เลอกเสนขอบแบบอนๆ เชน dotted 9. ขนาดของเสนคลกเลอกแบบบาง thin 10. คลกเลอกสของเสนขอบตามตองการ 11. คลกปม Apply เพอดผลงานเดยวนนหรอคลกปม OK ถาถกใจแลว 12. ซงกจะมผลท าใหเสนขอบของภาพถกแกไขโดยอตโนมต 13. การใช CSS สไตล กจะชวยใหการจดการกบขอความหรอภาพ ท าไดงายๆ ในลกษณะน

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

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

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

4. คลกเครองมอ CSS คลกปม New CSS Rule 5. ชอง Name คลกและพมพ Head01 6. เลอกคาอนๆ ตามตวอยางแลวคลก OK

7. คลกเลอก Type 8. ก าหนดคณสมบตของตวหนงสอเปน Microsoft Sans Serif ขนาด 14 ตวหนา สด า

9. คลก Background 10. คลกเลอกสพนเปนสชมพออน #FF66FF 11. คลกปม OK 12. คลกหลงค าวา ขอตอนรบทกๆ ทาน 13. คลกเลอกสไตลชอ Head01 14. ผลทได

15. คลกปม New CSS Rule อกครง เพอสราง CSS สไตล แบบอนๆ 16. คลกและพมพ Pictborder 17. คลกปม OK 18. คลก Border 19. ชอง Style คลกเลอกแบบ Dotted 20. ชอง Width คลกเลอกเสนแบบบางๆ thin

21. สหรอ Color คลกเลอกสตามตองการ 22. คลกปม OK

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

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

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

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

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

5. คลกเลอกไฟล mstyle.css แลวคลกปม OK 6. คลกหลงภาพหรอแบนเนอร 7. คลกเลอกสไตลตามตองการ

8. สวนอนๆ กคลกเลอกตามตองการ 9. การยกเลกการใชสไตลเหลานน ใหเลอกขอความโดยสรางแถบด า แลวคลกเลอก None

ยกเลกใชงาน CSS สไตลในเวบเพจใดๆ 1. คลกทเนอหาในเวบเพจ 2. คลก none ในโปรแกรมนยงม CSS Style ส าเรจรป ชวยใหการออกแบบเวบเพจ ดดมความเปนมออาชพ ไมตองเสยเวลาออกแบบเอง 1. คลก CSS Style Sheet 2. คลก Page From Sample 3. คลก CSS Style Sheet 4. คลก Full Design : Arial Blue,/Green/Gray 5. คลก Create

6. คลก File>>Save 7. คลกเลอกทเกบเปนโฟลเดอร Style 8. คลกและพมพชอ mystyle2.css 9. คลก Save

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

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

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

4. Layer การสรางเลเยอรใน Dreamweaver CS3 1. สรางไฟลชอ layer.php 2. คลก Layout 3. คลกเครองมอเลเยอร Draw AP Div 4. ชทต าแหนง A กดปมซายคางไว แลวลากไปยงต าแหนง B เสรจแลวปลอยเมาส

5. คลกขางในเลเยอร แลวพมพขอความลงไป พมพแตละบรรทดแลวกด Shift + Enter 6. วาดอก 2 เลเยอร 7. ถาจะวางภาพ กคลกในเลเยอร แลวแทรกภาพลงไป ดวยค าสง Insert>>Image 8. การจดการกบภาพหรอขอความบนเลเยอร กจดการเหมอนปกตทวไป

คณสมบตเลเยอรในเครองมอ 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 Elements 2. คลกแทป AP Element 3. Prevent Overlaps ปองกนเลเยอรซอนกนหรอยอมใหเลเยอรซอนกนได 4. รปตา คลกเพอแสดงหรอซอนเลเยอรนนๆ 5. จ านวนเลเยอร 6. ระดบชนของเลเยอร

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

การจดการกบขอความบนเลเยอรใน Dreamweaver CS3

1. สรางแถบด าขอความทตองการ 2. คลกเลอกค าสงทตองการในเครองมอ Properties เชน ตวหนงสอ ขนาด ส ฯลฯ

การจดการกบภาพบนเลเยอรใน Dreamweaver CS3

1. คลกเลอกภาพ 2. คลกเลอกค าสงทตองการในเครองมอ Properties

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

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

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

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

การจดเรยงเลเยอรใน Dreamweaver CS3

1. วาดเลเยอร 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 Width 4. คลกเมน Modify>>Arrange>>Make Same Height

การสรางการเชอมโยงในเวบเพจแบบเลเยอรใน Dreamweaver CS3

1. สรางแถบด าหวขอทจะท าลงค 2. ชอง Link คลกและพมพชอไฟลเชน aboutus.php 3. ชอง Target คลกเลอก _blank 4. หวขออนๆ กสรางลงคใหเรยบรอย 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.dll

2. ก าหนด 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 ปรากฏหนาตาง Application Create 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} หากมการรบคาดวยวธ POST 4. ใหเราเปดไปท Show Code View จะปรากฏ CODE ดงรป

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

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

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

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

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

7. Server Behaviors Server Behavior ดานลางมไวส าหรบชวยใหคณใชเปนอนเทอรเฟซโตตอบกบการท างานของ PayPal

1. 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 ID

5. 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.> สรางเอกสารทเราตองการแทรกภาพขนมา

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

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

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 CS3

1. คลกเลอกโฟลเดอร Frame เปนการก าหนดวาจะสรางไฟลเกบไวในน 2. คลก File>>New 3. คลก Page from Sample>>Frameset 4. คลกเลอกลกษณะของเฟรมทตองการ เชน Fixed Top, Nested Left 5. คลกปม Create

6. เพอความสะดวกในการท างานใหเปดเครองมอจดการเฟรมขนมาโดยคลกเมน Windows>> Frames 7. เครองมอ Fames จะปรากฏขนมา จะม 3 สวนตามจ านวนเฟรมทเราเลอก กคอ TopFrame, LeftFrame และ MainFrame 8. พมพขอความลงไปบนเฟรมแตละเฟรมกพอ ยงไมตองวางภาพ

การเซฟเฟรมเกบไว ลกษณะของเฟรมทไดสรางตามตวอยางนจะมอย 3 เฟรมดวยกน การเซฟใหปฏบตดงน 1. คลกปม Close ปดไฟล 2. จะปรากฏกรอบขอความเตอนให Save ไฟล ใหคลกปม Yes 3. ในขณะเดยวกนทเฟรมกจะแสดงขอบเขตใหรวา ก าลงจะเซฟเฟรมใดเปนไฟลเกบไว 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 Properties 4. คลกเลอกสพนในสวน Background color แลวคลกปม Apply หรอ OK 5. เมอคลกทเฟรมใดๆ แลวปรบแตงส ตวหนงสอ หรอภาพประกอบ เปนทถกใจแลวกจดการ เซฟไฟลไว โดยคลกเมน 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 ทแปนพมพคางไว แลวคลกทเฟรมชองขวามอ หรอคลกเลอกทเครองมอ Frames 2. ในชอง Frame name ใหคลกและพมพใหม ถาตองการ ปกตจะชอ mainframe 3. ตวเลอกอนๆ - Scroll ก าหนดใหแสดงหรอซอนแถบเลอนดขอมล ในกรณทมขอมลจ านวนมาก

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

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

สรางการเชอมโยงในเฟรม Dreamweaver CS3

วธการสรางลงคหรอการเชอมโยงระหวางเวบเพจในเฟรม เชน เมอคลกหวขอในเมนกจะปรากฏ เวบเพจใหมในชองดานขวามอ 1. สรางแถบด าหวขอทตองการสรางลงค เชน เมนหลก 2. คลกและพมพชอไฟลทตองการเชอมโยง เชน right.php 3. ในชอง Target ใหคลกเลอก mainframe 4. สวนหวขออนๆ จะก าหนดคาคลายกนเชน สรางแถบด า เกยวกบเรา 5. ชอง Link คลกและพมพ aboutus.php 6. ชอง 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. คลกเฟรมสดทาย ในทนคอ เฟรมท 15 7. ลากเสน Timelines ไปทเฟรมสดทาย ใน ตวอยางลากไปจนถงเฟรมท 50 8. ลากเลเยอรรปภาพไปยงต าแหนงสดทายทตองการใหแสดงผล

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

ตอไปเราจะก าหนดทศทางการเคลอนไหว เฉพาะชวงระหวางเฟรมท 20 กบ เฟรมท 35 9. คลกขวาเฟรมท 20 จะปรากฏเมนค าสงขนมา 10. คลกเลอกเมน Add Keyframe 11. ลากเลเยอรรปภาพไปยงต าแหนงทตองการ

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

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

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

เอกสารอางอง (ออนไลน).แหลงทมา : http://www.ptcn.ac.th/wandee/Text/page3.html.(วนทคนขอมล :

5ธนวาคม 2554) . พมลพรรณ วทยานกล.Behaviors.(ออนไลน).แหลงทมา

:http://161.200.184.9/webelarning/elearning2_2550/Dreamweaver/__5.html .(วนทคนขอมล : 11 ธนวาคม 2554).

Siamebook.การใชงาน Insert ใน Dreamweaver.(ออนไลน).แหลงทมา : http://www.thaigoodview.com/library/contest2551/tech03/38/Sirindhorn/Images/lesson5.swf.(วนทคนขอมล : 12 ธนวาคม 2554).

(ออนไลน).แหลงทมา : http://help.adobe.com/en_US/dreamweaver/cs/using/WS8599BC5C-3E44-406c-9288-C3B3BBEB5E88.html.(วนทคนขอมล : 28 ธนวาคม 2554).