รายงาน

เรอง window

ใน Dreamweaver

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

จดทาโดย

นายอาจณรงค เชนรมย เลขท 8

นายนพรตน ชะรงรมย เลขท 3

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

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

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

คานา

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

window ใน dreamweaverr ทมลกษณะแตกตางกนออกไปแลวแตความบทความและเนอเรอง

ของหวขอ

นน ๆและสงเสรมใหคนหนมาสนใจ และความเปนมาและความสาคญของคอมพวเตอร

รายงานเรองเปนสวนหนงของกลมสาระการเรยนรคอมพวเตอรและเทคโนโลย และ

คณะผจดทาหวงเปนอยางยงวารายงานเลมน จะเปนประโยชนตอการเรยนร และสามารถ

นาไปใชประโยชนในชวตประจาวนได ถาหากมขอผดพลาดประการใด คณะผจดทาขออภยไว

ณ ทนดวย

คณะผจดทา

สารบญ

เรอง หนา

Insert 1

Properties 4

CSS Styles 7

AP Elements 14

Behaviors 15

Databases 17

Bindings 19

Server Behaviors 20

Components 23

Files 25

Assets 27

Snippets 29

Tag Inspector 34

Results 38

Reference 41

History 46

Frames 50

Code Inspector 55

Timelines 63

เอกสารอางอง 65

ชอแถบเมน

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

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 การอางอง

History Shift+F10 ประวต

Frames Shift+F2 เฟรม

Code

Inspector

F10 ตรวจสอบรหส

Timelines Alt+F9

ระยะเวลาท

Workspace

Layout

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

-coder

-Designer นกออกแบบ

-Dual Screen

-Save

Current..

บนทกปจจบน

-Manage..

การจดการ

Hide Panels F4 ซอนแผง

Cascade

Tile

Horizontally

เรยงแนวนอน

Tile เรยงแนวตง

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

ในโปรแกรม Dreamweaver มหนาตางพาเนลตางๆทชวยเพมความสามารถในการจดการ และ

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

สามารถเรยกเปดพาเนลไดจากเมนคาสง Window > และเลอกพาเนลทตองการดงน

1.Insert

ใชงาน Insert Bar ใน Dreamweaver CS3

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

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

1. Common แทรกขอมลทวๆ ไป เชน รปภาพ ลงค ตาราง วนท เวลา

2. Layout แทรกขอมลแบบตางๆ เชน ตาราง เฟรม เลเยอรหรอ AP Element

Vertically

1 Untitled-1

3. Forms แทรกขอมลเกยวกบการสรางฟอรม ฟลดตางๆ ทตองใชในฟอรม

4. Data แทรกขอมลหรอการจดการกบฐานขอมลทจะนามาใชในเวบเพจ

5. Spry รวมคาสงชวยในการนา Spry แบบตางๆ มาชวยสรางเวบเพจ

6. Text รวมคาสงจดการกบขอความ ตวหนงสอ สญลกษณพเศษ

7. Favorites เปนกลมคาสงทเราอาจสรางขนมาเอง กรณตองใชบางตวบอยๆ

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

การคลกเลอกใชงานจะงายกวา

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

1. คลก View

2. คลก Toolbars

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

เรอง : 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 รปภาพผดลงไปได

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 (CasCade Style Sheet)

การสรางและใชงานไฟล CSS (CasCade Style Sheet)

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

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

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

CSS มรปแบบการทางานทคลายกบการใชเทมเพลตทใชเปนมาตรฐานสาหรบการพฒนาเวบเพจ

CSS มคณสมบต ดงน

1. คณสมบตเกยวกบฟอนต ขนาด ลกษณะตางๆ

2. คณสมบตเกยวกบขอความ การจดวาง ระยะหาง

3. คณสมบตเกยวกบสพนฉากหลง

4. คณสมบตเกยวกบกรอบ

5. คณสมบตเกยวกบหนวยวด

รปแบบการใชงาน CSS

การนา CSS มาประยกตใชงานกบ Object ตาง ๆ บนเวบเพจนน สามารถนามารวมอยเวบเพจเดยวกน

หรอแยกออกจากกนเปนไฟลอสระตางหากกได ซงการนา CSS มาแทรกในเอกสาร HTML สามารถทาได

4 วธ คอ

1. Inline Style Sheet

2. Embedded Style Sheet

3. Link External Style Sheet

4. Import Style Sheet

ในทนจะกลาวถงวธการท 3 Link External Style Sheet เทานน

ขนตอนการสรางไฟล CSS

1. คลกทเมน Text > CSS Styles > New CSS Style… หรอ

ทแถบ Design เลอกแทบ CSS Styles คลกขวาทพนทแสดงชอ CSS เลอก New CSS Style…

จะปรากฏหนาจอ New CSS Style ขนมา

2. ใหกาหนดคาตางๆ ดงตารางดานลาง หลงจากนนคลกปม OK

รายการ คา คาอธบาย

Name .normaltext เปนชอ CSS จะขนตนดวย .

Type Make Custom Style (class)

Define In (New Style Sheet File) กรณสรางครงแรก

3. เมอปรากฏหนาจอ Save Style Sheet File As ขนมา ใหพมพชอไฟลในชอง File

name ชอ master.css (เปนไฟลทเกบชอ CSS ตางๆไว เวลาอางถง CSS จะตองอางชอไฟลนกอน)

หลงจากนนคลกปม Save

4. เมอปรากฏหนาจอ CSS Style Definition for .normaltext in master.css ใหกาหนดคาตาง ๆ

ใหกบ CSS ชอ .normaltext ดงตารางดานลางน หลงจากนน ใหคลกปม OK

Attribute/Properties Value

Font MS Sans Serif, Tahoma, sans-serif

Size 11 pixels

5. คลกทไอคอน Show Code View จะเหนโคด HTML มบรรทดนปรากฏอย

<link href="master.css" rel="stylesheet" type="text/css">

การเพม/แกไข/ลบ CSS ม 2 วธ

1. เปดไฟล master.css ท Show Code View จะปรากฏโคด ทผพฒนาสามารถเขยนโคด เพม/แกไข/

ลบ CSS ได แตวธนผพฒนาตองรรปแบบการเขยนโคด CSS

2. เปดไฟล master.css แลว คลกทเมน Text > CSS Styles > Edit Style Sheet… หรอ

ทแถบ Design เลอกแทบ CSS Styles คลกขวาตรงบรรทด master.css เลอก Edit…

จะปรากฏหนาจอ Edit Style Sheet ดงน

คลกปม New เพมชอ CSS และกาหนดคณสมบต

จะไดหนาจอ New CSS Style ใหกาหนดคาตาง ๆ ตาราง

รายการ คา คาอธบาย

Name .tablebg เปนชอ CSS ทตองการเพม จะตองขนตนดวย .

Type Make Custom Style (class)

Define In This Document Only

กรณเพมชอ CSS ในไฟล CSS เดม

master.css

กรณ Attach ไฟล CSS ชอ master.css

คลกปม Edit แกไขคณสมบต

ทหนาจอ Edit Style Sheet จะมรายชอ CSS ใหคลกตรงชอ CSS ทตองการแกไข เลอก Edit…

คลกปม Remove ลบชอ CSS

ทหนาจอ Edit Style Sheet จะมรายชอ CSS ใหคลกตรงชอ CSS ทตองการลบ เลอก Remove

การเชอมโยงไฟล CSS มาใชงาน (Link External Style Sheet)

การเชอมโยงไฟล CSS คอการกาหนดใหไฟล HTML (เวบเพจทสรางมาแลวหรอกาหลงสราง)

ใหมคณสมบตตามคณสมบตตามไฟล CSS ทกาหนดไวแลว มขนตอนกมดงตอไปน

1. เปดเวบเพจหรอสรางเวบเพจ

2. เรยกใชงานไฟล CSS ใหเลอกเมน Text > CSS Styles > Attach Style Sheet… หรอ

ทแถบ Design เลอกแทบ CSS Styles

คลกขวาตรงบรรทดชอไฟลเวบเพจทอยในทพนทแสดงชอ CSS เลอก Attach Style Sheet…

จะปรากฏหนาจอ Link External Style Sheet ขนมา

File/URL ถาทราบชอไฟล CSS ใหพมพชอไฟล CSS แตถาไมทราบใหคลกปม Browse…

เพอเลอกไฟล CSS

Add As เลอก Link

คลกปม OK จะไดหนาจอ Design ดงน

3. หนาจอ Design คลกวงกลมหนา Apply Style เลอก Object อยบนเวบเพจทตองการกาหนด

คณสมบต คลกชอ CSS จากรายชอ CSS ใหสงเกต Object จะมคณสมบตตามชอ CSS ทเลอก

ตวอยางเวบเพจ login.php ใหกาหนด CSS ใหกบ Objects ดงตาราง

Object ชอ CSS คาอธบาย

Form formbg คลกเสนประสแดง คลก formbg

Username, Password heading ทาไฮไลท Username, Password คลก

heading

Text Field item คลก Text Field คลก item

Logout normaltext ทาไฮไลท Logout คลก normaltext

Login normaltext คลก Login คลก normaltext

จะไดหนาจอ ดงน

ทดสอบ กด F12 บน Keyboard ดผล

CSS หรอ Cascading Style Sheet เปนรปแบบของตวหนงสอ กรอบขอความ ยอหนา เสน ขอบภาพ

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

ดงกลาว สามารถทาไดทไฟล CSS ไฟลเดยว

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

ประสทธภาพ การออกแบบรปแบบของหวขอ รปแบบการตกแตงเนอหา เปนเรองสาคญทตองวาง แผนไว

อยางด เพราะจะงายในการปรบแตงภายหลง

ประเภทของ CSS สไตล ใน Dreamweaver CS3มทงหมด 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

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. Database

วธการใชงานDatabase

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 ทตดตอฐานขอมลเรยบรอยแลว

เรอง :: การรบคา GET และ POST (PHP)

การรบคาไปมาระหวาง WEB PAGE ตาง ๆ บนโลกของเวบไซตตามปรกตจะมอย 2 รปแบบดวยกน ดงน

1. GET มการสงคาตามหลง URL ทปรากฏบน Address Bar ของ Browser

เชน http://www.xxxxx.com/my.php?r=12

ตามตวอยางนจะไดความหมายวา มการสงคามาทไฟลทชอวา my.php โดยคาทสงมาคอ r=12 เปนตน

2. POST มการสงคาผานทาง FORM ตาง ๆ ทเราคนเคยกนด เชน FORM ในการ Login เปนตน

แตในครงนเราจะมาลองใชโปรแกรม Dreamweaver MX รบคาจาก GET and POST ตามทกลาวไป

6. Bindings

:: วธการทา ::

1. ใหคณทาการ New เอกสารขนมาใหมแลวทาการ Save เปนไฟล *.php หรอ ถามไฟลงานทเปน *.php อย

แลวใหทาการ Open ไฟลนนขนมา

2. เมอเราไดเอกสารทเปน PHP แลว ใหเราทาการ เปดหนาตาง Bindings ขนมา โดยไปท Main Menu ->

Window ->Bindings ดงรป

3. เมอเราทาการเลอกไปทเมน 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 สงเกตด...

1.1.1.1. การ Binding คาถาม

ทาการ Binding ใหแสดงคาถามทตรงกบตวแปร QAnumber ทสงมา โดยคลก

เมาสทเมนดานขวา เรอง Application แทบ Bindings เลอก Recordset(Query)

o Selectd เลอก QAnumber, Qtopic, Qdetail, Qdate, QNameEmail, Qcount

o Filter เลอก QAnumber=URL Parameter > QAnumber คอใหแสดง

คาถามใหตรงกบตวแปร QAnumber ทสงมาจากดานบน URL

o Sort เลอก None เพราะแสดงเพยงขอเดยว

คลกเมาสทปม Test ดานขวามอเพอทดสอบ แตตอนทดสอบหนา answer.asp ตอง

มาจากหนา index.asp จงจะไดตวแปร QAnumber ทมคามาดวย ดงนนในการ

ทดสอบนคณจงตองใสคาเองใหทดลองใสคา 4 แลวกด ok สาหรบการทดสอบท

เครองผเขารบการฝกเอง จะตองรวาในฐานขอมลของผเขารบการฝกมคาถามทม

QAnumber อะไรบาง เพอจะไดทดลองใสเพอดผลไดถกตอง

แสดงผลท QAnumber ตรงกนกบทปอน

การนาขอมลมาแสดงในตาราง

เมอ Binding ไดแลว กทาการลากจากหนาตาง Bindings มาลงในตารางตาม

ตวอยาง

การ Binding คาตอบ

ตอจากตารางคาถาม ใหสรางตารางคาตอบตามตวอยาง

ทาการ Binding ขอมลทเมนดานขวาเรอง Application แทบ Bindings เลอกคา

ตางๆ ดงน

o Name > Recordset2 โปรแกรมเลอกใหเอง

o Selected เลอก QAnumber, QAdate, Adetail, ANameEmail, AofQ

o Filter เลอก AofQ=URL Parameter > QAnumber คอใหแสดงคาตอบท

AofQ มคาตรงกบหมายเลขคาถามทสงมากบ URL ดานบน ชอตวแปร

QAnumber

o Sort เลอก QAdate เรยงแบบ Descending คอใหเรยงคาตอบโดยเอาขอท

ตอบลาสดขนกอน

ทดสอบโดยคลกปม Test ทดานขวา แลวพมพคา 4 เพอเปนการขอดผลของ

คาตอบขอ 4 ถาผเขารบการฝกทดลองตองรวาในฐานขอมลไดพมพคาตอบของขอ

4 ไวรยง เพราะถายงไมมจะไมเหนอะไรเลย จากตวอยางไดพมพคาตอบเตรยมไว

2 ขอ ตอนทออกแบบขอมล

การนาขอมลมาแสดงในตาราง

ทเมนดานขวา เรอง Application แทบ Binding ใหลากเขตขอมลใสลงในตาราง

ตามรป แตตองระวง เพราะหนานม Recordset 2 ชด ของคาตอบจะเปน

Recordset2

7. server behaviors

บทความนจะเปนบทความสดทายของการใชงาน Dreamweaver MX ตดตอกบฐานขอมลดวย ASP +

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

โปรแกรม DW วามขอดอยขอดอยางไร พรอมทงตวอยางโปรแกรมทผมสรางขนมาดวยการ Click และก

Click อยางเดยวกบ DW MX นครบ

การลบขอมล

เมอมการใชงานขอมลไปนาน ๆ เขา เราอาจจะมความจาเปนตองการลบขอมลทเกาและหมดประโยชนทง

หรอตองการลบขอมลทไมพงปราถนาทงจากฐานขอมลเรา ซงวธการนเราเรยกวาการ Delete ครบ ถาเปนใน

SQL Language จะใชคาสง Delete From TBName where xxxx=xxxx เปนตน แตใน DW ม option ใหเรา

จดการไดงาย ๆ มาก โดยการ Click และก คลก และกหวเราะคก ๆ ทาไปดวยไดเลย

วธการทา

ใหทานทาการเลอก Record Set ททานเคยไดสรางไวจากบทกอน จากนนใหทานสราง Form โดยดาร Click

ทหนาตาง Insert และไปในสวนของ Form Object

เมอทานทาการสราง Form เสรจสนแลวจากนนใหทานทาการเปดหนาตาง Server Behaviors ขนมา ดงใน

pic.1 นะครบ

Pic.1

ทหนาตาง Server Behaviors นใหทาน Click เลอกไปทเครองหมาย

บวก (+)แลวเลอกไปท Delete Record ดงในภาพนะครบ

เมอเลอกท Delete Record แลวจากนนจะปรากฏหนาตางใหมขนมา

ใหเรากาหนดคา ดงใน Pic.2 ครบ

Pic.2

การกาหนดคา

Connection -> เลอก Connection ททานตองการ

Delete From Table -> เลอกตารางททานตองการลบขอมล

Select Record From -> เลอก Recordset

Unique Key Column -> เลอก Column ททานตองการกาหนดใหเปรคยสาหรบทาการตรวจสอบในการลบ

ขอมล แนะนาวา Column นนควรเปน Primary Key

Delete By Submitting -> เลอกฟอรมททานจะใชงาน

After Deleting Go To -> เลอกไฟลสาหรบการ Redirect กลบไปเมอโปรแกรมไดทาการลบขอมลเสรนสน

แลว

Server Behavior

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

8. รปท 4: pp_SinglePurchase

1.1.1.2. การสงใหแสดงคาตอบซา

ทาแถบสคลมทงตารางคาตอบ ทเมนดานขวาเรอง Application แทบ Server

Behaviors คลกเมาสทเครองหมาย + เลอกคาสง Repeat Region

ท Recordset เลอก Recordset2 ท Show เลอก All records

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

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

ปมลกศรบนคยบอรดใหไปทางขวา 1 ครง เพอเปนการเลอนเคอรเซอรไปทางขวา

ของตาราง แลวกดปม Enter เพอเปนการเพมบรรทดทดานลางของตาราง จาก

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

ตารางจะเวนหางกน 1 บรรทดทกครงดวย

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

8. Files

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

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

เกบไฟลเวบเพจหรอไฟลชนดอน ใหเปนระเบยบ

1. คลกเลอก Site ทตองการใชงาน

2. รายชอไฟลและโฟลเดอรภายในเวบไซท

3. คลกปม + เพอแสดงชอไฟลในโฟลเดอรยอย คลก - เพอซอน

4. รายชอไฟลภายในโฟลเดอรทถกคลกเลอก

5. ไฟลเวบเพจ เชน htm, html, php, asp จะเปนไฟลเวบเพจ เปนขอความ

6. ไฟล jpg, gif จะเปนไฟลภาพประกอบในเวบเพจ เนอหาในเวบเพจทเปนขอความและไฟลภาพ ประกอบ

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

9. Component

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

เอกสารอางอง

http://www.ptcn.ac.th/wandee/Text/page3.html

http://161.200.184.9/webelarning/elearning2_2550/Dreamweaver/__5.html

http://www.thaigoodview.com/library/contest2551/tech03/38/Sirindhorn/Images/lesson5.swf