Download - รายงาน คอม
![Page 1: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/1.jpg)
รายงาน
เรอง window
ใน Dreamweaver
เสนอ คณครสชาต นาด
จดทาโดย
นายอาจณรงค เชนรมย เลขท 8
นายนพรตน ชะรงรมย เลขท 3
ชนมธยมศกษาปท 5/2
รายงานเลมนเปนสวนหนงของวชา คอมพวเตอร โรงเรยนรมยบรพทยาคม รชมงคลาภเษก
สานกงานเขตพนทการศกษามธยมศกษา เขต 32 ภาคเรยนท2 /2554
![Page 2: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/2.jpg)
คานา
รายงานเลมน ไดจดทาขน เพอตองการทราบความเปนมา และวธการใชงานของแทบ
window ใน dreamweaverr ทมลกษณะแตกตางกนออกไปแลวแตความบทความและเนอเรอง
ของหวขอ
นน ๆและสงเสรมใหคนหนมาสนใจ และความเปนมาและความสาคญของคอมพวเตอร
รายงานเรองเปนสวนหนงของกลมสาระการเรยนรคอมพวเตอรและเทคโนโลย และ
คณะผจดทาหวงเปนอยางยงวารายงานเลมน จะเปนประโยชนตอการเรยนร และสามารถ
นาไปใชประโยชนในชวตประจาวนได ถาหากมขอผดพลาดประการใด คณะผจดทาขออภยไว
ณ ทนดวย
คณะผจดทา
![Page 3: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/3.jpg)
สารบญ
เรอง หนา
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
![Page 4: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/4.jpg)
ชอแถบเมน
คยลด ความหมาย
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 การอางอง
![Page 5: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/5.jpg)
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 เรยงแนวตง
![Page 6: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/6.jpg)
กลมหนาตางพาเนล (Panel Group)
ในโปรแกรม Dreamweaver มหนาตางพาเนลตางๆทชวยเพมความสามารถในการจดการ และ
ออกแบบหนาเวบของเราได ซงแตละพาเนลจะมความสามารถในการจดหนาเวบไดไมเหมอนกน เรา
สามารถเรยกเปดพาเนลไดจากเมนคาสง Window > และเลอกพาเนลทตองการดงน
1.Insert
ใชงาน Insert Bar ใน Dreamweaver CS3
เปนแถบเครองมอชวยในการนาขอมลแบบตางๆ มาวางในเวบเพจ เพอความสะดวกในการทางาน เปนอก
ทางเลอก แทนการคลกเลอกจากคาสงตางๆ ซงตองคลกหลายครงกวาจะไดคาสงทตองการ
1. Common แทรกขอมลทวๆ ไป เชน รปภาพ ลงค ตาราง วนท เวลา
2. Layout แทรกขอมลแบบตางๆ เชน ตาราง เฟรม เลเยอรหรอ AP Element
Vertically
1 Untitled-1
![Page 7: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/7.jpg)
3. Forms แทรกขอมลเกยวกบการสรางฟอรม ฟลดตางๆ ทตองใชในฟอรม
4. Data แทรกขอมลหรอการจดการกบฐานขอมลทจะนามาใชในเวบเพจ
5. Spry รวมคาสงชวยในการนา Spry แบบตางๆ มาชวยสรางเวบเพจ
6. Text รวมคาสงจดการกบขอความ ตวหนงสอ สญลกษณพเศษ
7. Favorites เปนกลมคาสงทเราอาจสรางขนมาเอง กรณตองใชบางตวบอยๆ
คาสงตางๆ เหลานปกตกสามารถเรยกใชงานไดจากเมนคาสงดานบน File, Edit... แตนามาทาเปน ปมแบบน
การคลกเลอกใชงานจะงายกวา
แสดงการซอน Insert Bar ใน Dreamweaver CS3
1. คลก View
2. คลก Toolbars
3. คลกตกถกชอเครองมอเพอแสดงหรอคลกเอาถกออกเพอซอนเครองมอ
![Page 8: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/8.jpg)
เรอง : Insert รปภาพกบ Dreamweaver แลว รปไมแสดงท Browser ?
คาถามทผมมกจะพบอยบอย ๆ กบการใชงาน Dreamweaver เรองของการแทรกรปภาพ หรอการ Insert
Image นนกคอ มกจะประสบปญหากนในกรณทวา...ทาไม Dreamweaver พอดเวบทตนเองทา มรปภาพขน
ปรกต แตพอไปดท Web Browser รปภาพกลบไมปรากฏสะงน...คนทากงง หาสาเหตไมพบ กโปรแกรม
เหนทาไม Browser ไมเหน พาลโทษไปยง Browser หรอตว Dreamweaver สะดอ ๆ กม ? บทความนจะมา
แนะนาถงสาเหตดงกลาว ใหทานนาไปใชแกไขปญหาดครบ
สาเหตทรปภาพไมปรากฏท Browser ?
สาเหตปญหาแบบนกวา 85% ทผมพบมาคอ เมอมการใชโปรแกรม Dreamweaver ในการ Insert Image
ผใชงานมกจะทาการเลอกท Relative To เปน Site Root ดงรป
![Page 9: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/9.jpg)
ซงทง ๆ ทจรงแลวคา 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 ดงรป
![Page 10: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/10.jpg)
ใหเราสงเกตท Address ดงรป เราจะเหนไดวาเวบเพจเราพยายามเรยกไฟลรปภาพขนมาจากตาแหนงของ
Drive จรง ๆ ซง ณ.จดนนเอง ทาใหเมอเราทาการอพโหลดขอมลเวบเราขนไปวางบน Web Hosting ทาให
เวบเพจเราไมสามารถแสดงผลรปภาพได ยกเวนเสยแตวา ไฟลรปภาพเรา เมอทาการเรยกจาก Root Path
แลว จะพบ Path ตามทเวบเพจพยายามเรยกรปภาพนนใหแสดงนนมอยจรง
![Page 11: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/11.jpg)
** หากทานใดไมเขาใจเรอง PATH วาคออะไร กขามหวขอนไปไดเลยครบ ลงไปอาน วธการแกไขไดเลย
**
วธการแกไข
สาหรบวธทางแกไขในกรณน คอ ใหทานกลบไปแกไขไฟลรปภาพททาการ Insert เขามาในเวบเพจ แลวทา
การเลอก Relative To เปน Document ดงรป
![Page 12: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/12.jpg)
ซงการเลอกในแบบ Document จะเปนการเรยกใชงานรปภาพในแบบ Ralative Path โดยใหมความสมพนธ
กบตาแหนงไฟลเอกสารหรอไฟล HTML เวบเพจนน จงทาใหไมวาเราจะทาการ Upload ไฟล Web Page น
ไปวาง ณ.จดใด การเรยกไฟลรปภาพขนมาปรากฏจะอางจากเอกสาร HTML ไปหาไฟลรปภาพนนเสมอ ทา
ใหลดปญหารองของ Path รปภาพผดลงไปได
2. Properties
การจดเรยงขอความในตาราง
จดขอมลในแนวนอน
เราสามารถจดขอมลใหชดขวา ชดซาย หรออยตรงกงกลางของชองตาราง โดยการคลกในชองเซลลท
ตองการ แลวกาหนดในชอง Horz ในแถบ Properties (Window > Properties > Horz)
1. คลกในชองเซลลทตองการ แลวกาหนดในชอง Horz ในแถบ Properties
2. เมอเลอกในชอง Horz แลวจะไดตาแหนงของขอความตามทเราตองการ
![Page 13: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/13.jpg)
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. คณสมบตเกยวกบหนวยวด
![Page 14: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/14.jpg)
รปแบบการใชงาน 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
![Page 15: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/15.jpg)
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
![Page 16: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/16.jpg)
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
![Page 17: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/17.jpg)
คลกขวาตรงบรรทดชอไฟลเวบเพจทอยในทพนทแสดงชอ 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 ทเลอก
![Page 18: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/18.jpg)
ตวอยางเวบเพจ 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 พนหลง สพนของเวบเพจ
![Page 19: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/19.jpg)
3. Block เปนรปแบบการจดยอหนาของขอความในเนอหา
4. Box เปนกรอบตางๆ ทงกรอบภาพและกรอบขอความ
5. Border เปนเสนขอบภาพ เสนขอบของตวหนงสอ
6. List เครองหมายหนาหวขอ หรอลสตของเนอหาบนเวบเพจ
7. Positioning การจดตาแหนง ภาพหรอขอความบนเวบเพจ จดซายกลางขวาของหนาเวบเพจ
8. Extension คณสมบตอนๆ นอกเหนอจากนน เชน การแบงหนาเวบเพจ เอฟเฟคการทางาน ของเมาสและ
ภาพ
ใชงานพาแนล CSS Style ใน Dreamweaver CS3
1. คลกชอ CSS Style เพอแสดงหรอซอนพาแนล
![Page 20: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/20.jpg)
ลกษณะการใชงาน 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
![Page 21: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/21.jpg)
7. คลกเลอก Border
8. เลอกเสนขอบแบบอนๆ เชน dotted
9. ขนาดของเสนคลกเลอกแบบบาง thin
10. คลกเลอกสของเสนขอบตามตองการ
11. คลกปม Apply เพอดผลงานเดยวนนหรอคลกปม OK ถาถกใจแลว
12. ซงกจะมผลทาใหเสนขอบของภาพถกแกไขโดยอตโนมต
13. การใช CSS สไตล กจะชวยใหการจดการกบขอความหรอภาพ ทาไดงายๆ ในลกษณะน
![Page 22: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/22.jpg)
14. ขอความกเหมอนกนใช CSS สไตล ชอ bodytext กดบเบลคลกชอสไตล
15. แกไขแบบ ขนาด สของตวหนงสอตามตองการ
16. เสรจแลวคลกปม OK
17. ขอความใดๆ ทใชสไตลนกจะถกแกไขไปดวย
![Page 23: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/23.jpg)
เรมสราง 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 ตวหนา สดา
![Page 24: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/24.jpg)
9. คลก Background
10. คลกเลอกสพนเปนสชมพออน #FF66FF
11. คลกปม OK
12. คลกหลงคาวา ขอตอนรบทกๆ ทาน
13. คลกเลอกสไตลชอ Head01
![Page 25: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/25.jpg)
15. คลกปม New CSS Rule อกครง เพอสราง CSS สไตล แบบอนๆ
16. คลกและพมพ Pictborder
17. คลกปม OK
18. คลก Border
19. ชอง Style คลกเลอกแบบ Dotted
20. ชอง Width คลกเลอกเสนแบบบางๆ thin
21. สหรอ Color คลกเลอกสตามตองการ
22. คลกปม OK
![Page 26: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/26.jpg)
23. คลกดานหลงภาพ ทตาแหนงดงตวอยาง
24. คลกเลอกสไตลชอ Pictborder
25. กรอบรอบภาพจะเปนแบบเสนประ
![Page 27: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/27.jpg)
26. คลกปม New CSS Rule สรางสไตลเพมเตม
27. คลกและพมพชอสไตลเชน bodytext แลวคลกปม OK
28. คลก Type
29. คลกเลอก Font = Microsoft Sans Serif ขนาด 12 ตวปกต normal
![Page 28: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/28.jpg)
30. คลก Background
31. คลกเลอกสพนเปนสชมพอาน
32. คลกปม OK
33. คลกหลงคาวา .....ฯลฯ
34. คลกเลอกสไตลทตองการ
35. ขอความดานลาง ออกแบบและพฒนาโดย กคลกเลอกสไตล bodytext เชนกน
![Page 29: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/29.jpg)
36. บนทกงานเกบไว
37. ผลงานทไดเมอดผานโปรแกรมเวบบราวเซอร
![Page 30: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/30.jpg)
การใชงาน CSS สไตลในเวบเพจอนๆ
1. เปดไฟลเวบเพจใดๆ ขนมากอน
2. คลกปม Attach Style Sheet
3. คลกปม Browse
4. ดบเบลคลกโฟลเดอร Style
5. คลกเลอกไฟล mstyle.css แลวคลกปม OK
6. คลกหลงภาพหรอแบนเนอร
7. คลกเลอกสไตลตามตองการ
8. สวนอนๆ กคลกเลอกตามตองการ
9. การยกเลกการใชสไตลเหลานน ใหเลอกขอความโดยสรางแถบดา แลวคลกเลอก None
![Page 31: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/31.jpg)
![Page 32: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/32.jpg)
ยกเลกใชงาน 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
![Page 33: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/33.jpg)
10. ดบเบลคลกเปดไฟลใดๆ ขนมา
11. คลก Attact Style Sheet
12. คลก Browse ไปเลอกไฟล mystyle2.css
13. คลกปม OK
![Page 34: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/34.jpg)
14. คลกสวนทตองการใชสไตล
15. คลกเลอก Style ตามตองการ
16. ผลทได
![Page 35: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/35.jpg)
การอพโหลดเวบเพจเขาเวบไซตจรง
เวบเพจทมการใชไลบราร ในการอพโหลดเขาเวบไซตจรง นอกจากไฟลเวบเพจแบบ PHP แลวก ตองอพ
โหลดไฟลแบบ CSS Style ไปดวย
1. จดการอพโหลดไฟลเวบเพจแบบ PHP ตามปกต
2. ไฟล CSS Style จะอยในโฟลเดอร styles จะอพโหลดไปทงโฟลเดอรเลยกได หรอจะเลอก เอาเฉพาะไฟล
ทตองการกได ในกรณทมการสรางไวจานวนมาก
![Page 36: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/36.jpg)
![Page 37: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/37.jpg)
4.layer
การสรางเลเยอรใน Dreamweaver CS3
1. สรางไฟลชอ layer.php
2. คลก Layout
3. คลกเครองมอเลเยอร Draw AP Div
4. ชทตาแหนง A กดปมซายคางไว แลวลากไปยงตาแหนง B เสรจแลวปลอยเมาส
![Page 38: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/38.jpg)
5. คลกขางในเลเยอร แลวพมพขอความลงไป พมพแตละบรรทดแลวกด Shift + Enter
6. วาดอก 2 เลเยอร
7. ถาจะวางภาพ กคลกในเลเยอร แลวแทรกภาพลงไป ดวยคาสง Insert>>Image
8. การจดการกบภาพหรอขอความบนเลเยอร กจดการเหมอนปกตทวไป
![Page 39: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/39.jpg)
คณสมบตเลเยอรในเครองมอ Properties
กอนอนตองคลกเลอกเลเยอรทตองการกอน
1. CSS-P Element ชอเลเยอร
2. Over flow ลกษณะการแสดงเนอหาภายในเลเยอร
3. W x H ขนาดกวางคณสงของเลเยอร
4. Z-Index ตวเลขระบระดบของเลเยอร ถาเปนตกกเปรยบไดกบเลขทบอกชน จะซากนไมได
5. Bg Image ตวเลอกทชวยใหนาภาพใดๆ มาเปนพนหลงของเลเยอรได
6. Vis ซอนหรอแสดงเลเยอรใหปรากฏบนจอ
7. Bg Color สพนของเลเยอร
![Page 40: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/40.jpg)
คณสมบตของเลเยอรพาเนล
1. คลก Windows แลวคลกตกถก AP Elements
2. คลกแทป AP Element
3. Prevent Overlaps ปองกนเลเยอรซอนกนหรอยอมใหเลเยอรซอนกนได
4. รปตา คลกเพอแสดงหรอซอนเลเยอรนนๆ
5. จานวนเลเยอร
6. ระดบชนของเลเยอร
![Page 41: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/41.jpg)
การลบเลเยอรใน Dreamweaver CS3
1. คลกเลอกเลเยอรทจะลบ
2. กดปม Delete ทแปนพมพ
![Page 42: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/42.jpg)
การจดการกบขอความบนเลเยอรใน Dreamweaver CS3
1. สรางแถบดาขอความทตองการ
2. คลกเลอกคาสงทตองการในเครองมอ Properties เชน ตวหนงสอ ขนาด ส ฯลฯ
การจดการกบภาพบนเลเยอรใน Dreamweaver CS3
1. คลกเลอกภาพ
2. คลกเลอกคาสงทตองการในเครองมอ Properties
![Page 43: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/43.jpg)
การยายตาแหนงเลเยอรใน Dreamweaver CS3
1. คลกเลอกเลเยอรทตองการ
2. ชทแฮนเดลของเลเยอรทเลอก กดปมซายของเมาสคางไวแลวลากเมาสออก
3. ไดตาแหนงทตองการแลวกปลอยปมซายของเมาส เพอวางยงตาแหนงใหม
4. การยายอกวธหนง ใหคลกเลอกเลเยอรทตองการกอน
5. คลกและพมพตวเลขในชอง L และ T เปนตาแหนงในแนวนอนและแนวตง พมพเสรจแต ละคา แลวกกด
Enter
![Page 44: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/44.jpg)
ลดหรอขยายขนาดเลเยอรใน Dreamweaver CS3
1. คลกเลอกเลเยอร
2. ชลกศรทจดทดานใดดานหนง หรอมมใดๆ ใหลกศรเปนรปลกศรสองหว
3. กดปมซายของเมาสคางไว แลวลากเมาสเขาหรอออกจากดานตรงกนขาม เพอลดหรอขยายขนาด เลเยอร
![Page 45: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/45.jpg)
การจดตาแหนงลาดบชนบนลางของเลเยอรใน Dreamweaver CS3
1. คลกเลอกเลเยอรทตองการ
2. ใหชทชอเลเยอรในเลเยอรพาเนล กดปมซายคางไวแลวลากขนลง สลบตาแหนงบนลางไดตาม ตองการ
![Page 46: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/46.jpg)
การจดเรยงเลเยอรใน Dreamweaver CS3
1. วาดเลเยอร 3 เลเยอรดงตวอยาง
2. พมพขอความหรอนาภาพมาวาง จดรปแบบใหเรยบรอย
3. เลอกทง 3 เลเยอร โดยคลกเลเยอรแรก กดปม Shift คางไว แลวคลกเลอกเลเยอรทตอง การทงหมด
4. คลกคาสงเพอจดตาแหนง Modify>>Arrange>>Align ตามดวยคาสงทตองการ
- Align Left จดชดขอบซาย
- Align Right จดชดขอบขวา
- Align Top จดไวดานบน
- Align Bottom จดไวดานลาง
![Page 47: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/47.jpg)
ปรบแตงเลเยอรใหเทากนใน Dreamweaver CS3
1. เลเยอรตนแบบทตองการใหเลเยอรอนๆ ถกปรบขนาดใหเทากบเลเยอรน
2. คลกเลอกเลเยอรทงหมด โดยตองเลอกเลเยอรตนแบบเปนลาดบสดทาย
3. คลกเมน Modify>>Arrange>>Make Same Width
4. คลกเมน Modify>>Arrange>>Make Same Height
![Page 48: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/48.jpg)
การสรางการเชอมโยงในเวบเพจแบบเลเยอรใน Dreamweaver CS3
1. สรางแถบดาหวขอทจะทาลงค
2. ชอง Link คลกและพมพชอไฟลเชน aboutus.php
3. ชอง Target คลกเลอก _blank
4. หวขออนๆ กสรางลงคใหเรยบรอย
5. บนทกงานเกบไวแลวทดสอบโดยพมพกดปม F12
![Page 49: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/49.jpg)
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
![Page 50: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/50.jpg)
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 เพอยนยน
![Page 51: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/51.jpg)
4. ตงคาใน หนาตาง Site Definition ทแทป AdvancedServer Model เลอก ภาษาทใชตดตอ Access เลอก
Local/Network Testing Server Folder ชไปทเกบ File URL Prefix ใส http://localhost/
![Page 52: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/52.jpg)
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 ใสรหสผานทมใน ฐานขอมล
![Page 53: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/53.jpg)
คลกปม Test เพอทดสอบการ Connection และคลกปม OK เพอยนยน
7. ขนตอน การตงคา สาหรบภาษา PHP
ถาใชภาษา PHP จะปรากฏรายการดงน
MySQL Connection
การตงคา ใน MySQL Connection
Connection Name ใสชอของการตดตอ เพอใชอางถงภายในโปรแกรม Dream
MySQL Server เลอกชอเซฟเวอรทใช หรอ localhost
User Name ใสชอทมใน MySQL
Password ใสรหสผานทมใน MySQL
![Page 54: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/54.jpg)
และกดปม Select เพอเลอก ฐานขอมล
ถา User Name และ Password ถกตอง จะปรากฏหนาตาง Select Database
เลอก Database และกดปม OK เพอยนยน
คลกปม Test เพอทดสอบการ Connection และคลกปม OK เพอยนยน
8. หนาตาง Application ทตดตอฐานขอมลเรยบรอยแลว
เรอง :: การรบคา GET และ POST (PHP)
![Page 55: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/55.jpg)
การรบคาไปมาระหวาง 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 ดงรป
![Page 56: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/56.jpg)
3.2 หากเราตองการรบคาทสงมาในแบบ POST ใหเราเลอกไปท FORM Variable ดงรป
4. เมอเราทาการเลอกรปแบบการรบคาจากขอ 3 แลว จะเกดหนาตางใหมขนมา เพอใหเราใสคาชอของตว
แปรทจะรบ ดงรป
เชน ถา URL เปน http://www.myweb.com/test.php?name=somchai เรากเอาคาวา name พมพลงไปท
ชอง Name ดงรป
![Page 57: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/57.jpg)
5. เมอเราทาการใสชอของตวแปร (key) ลงไปแลว เรากจะไดชอและการรบคาจากตวแปรนนปรากฏใน
หนาตาง Bindings ดงรป
<< การนาไปใชงาน >>
1. ใหเราไปทหนาตาง Bindings แลว Click เลอกไปทคาทเราตองการจะรบและพมพออกทาง Browser
2. จากนนใหเราทาการ Click และลากมาวางไวในตาแหนงทตองการบนหนา Document ของเรา ดงรป
3. เมอเราทาการลากและนามาวางลงไปแลว จะปรากฏคาดงน
- {URL.name} หากมการรบคาดวยวธ GET
- {FORM.name} หากมการรบคาดวยวธ POST
![Page 58: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/58.jpg)
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)
![Page 59: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/59.jpg)
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 ตรงกนกบทปอน
![Page 60: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/60.jpg)
การนาขอมลมาแสดงในตาราง
เมอ 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 คอใหเรยงคาตอบโดยเอาขอท
ตอบลาสดขนกอน
![Page 61: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/61.jpg)
ทดสอบโดยคลกปม Test ทดานขวา แลวพมพคา 4 เพอเปนการขอดผลของ
คาตอบขอ 4 ถาผเขารบการฝกทดลองตองรวาในฐานขอมลไดพมพคาตอบของขอ
4 ไวรยง เพราะถายงไมมจะไมเหนอะไรเลย จากตวอยางไดพมพคาตอบเตรยมไว
2 ขอ ตอนทออกแบบขอมล
การนาขอมลมาแสดงในตาราง
ทเมนดานขวา เรอง Application แทบ Binding ใหลากเขตขอมลใสลงในตาราง
ตามรป แตตองระวง เพราะหนานม Recordset 2 ชด ของคาตอบจะเปน
Recordset2
![Page 62: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/62.jpg)
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 ครบ
![Page 63: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/63.jpg)
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 ตางๆ) มเพยง หมายเลขคาสงซอและยอดรวมของการขาย ขอมลนจะถกรวบรวมและสงตอไป
ยงอนเทอรเฟซของผใชไดอยางสะดวกรวดเรว
![Page 64: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/64.jpg)
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
![Page 65: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/65.jpg)
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 บรรทดทกครงดวย
![Page 66: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/66.jpg)
พรววผลลพธใน IExplore
8. Files
ทาความรจกพาเนล Files ใน Dreamweaver CS3
เปนแถบเครองมอไวจดการกบไฟลและโฟลเดอร เมอสรางเวบเพจกจะไดไฟลตางๆ สวนโฟลเดอร ไวแยก
เกบไฟลเวบเพจหรอไฟลชนดอน ใหเปนระเบยบ
1. คลกเลอก Site ทตองการใชงาน
2. รายชอไฟลและโฟลเดอรภายในเวบไซท
3. คลกปม + เพอแสดงชอไฟลในโฟลเดอรยอย คลก - เพอซอน
4. รายชอไฟลภายในโฟลเดอรทถกคลกเลอก
5. ไฟลเวบเพจ เชน htm, html, php, asp จะเปนไฟลเวบเพจ เปนขอความ
6. ไฟล jpg, gif จะเปนไฟลภาพประกอบในเวบเพจ เนอหาในเวบเพจทเปนขอความและไฟลภาพ ประกอบ
จะแยกกน เวลานาไปใชงาน กตองเอาไปใชทงไฟลเวบเพจและไฟลรปภาพ
![Page 67: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/67.jpg)
9. Component
สรางคอมโพเนนทในการสรางเวบแอพพลเคชน
![Page 68: รายงาน คอม](https://reader034.vdocuments.mx/reader034/viewer/2022052411/55620975d8b42a7d028b4964/html5/thumbnails/68.jpg)
เอกสารอางอง
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