รายงาน คอม

รายงาน
เรื่อง 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 Crl+ F9 ลักษณะการทํางาน
Behaviors ของเซิร์ฟเวอร์

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 F10 ตรวจสอบรหัส
Inspector

Timelines Alt+F9 ระยะเวลาที่

Workspace เค้าโครงพื้นที่ทางาน
ํ
Layout

-coder

-Designer นกออกแบบ
ั

-Dual Screen
-Save บนทึกปัจจุบน
ั ั
Current..
-Manage..
การจดการ
ั
Hide Panels F4 ซ่อนแผง

Cascade

Tile เรียงแนวนอน
Horizontally
Tile เรียงแนวต้ ง
ั

Vertically
1 Untitled-1

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

ในโปรแกรม Dreamweaver มีหน้าต่างพาเนลต่างๆที่ช่วยเพิมความสามารถในการจัดการ และ
่
ออกแบบหนาเวบของเราได้ ซ่ ึงแต่ละพาเนลจะมีความสามารถในการจดหนาเวบไดไม่เหมือนกน เรา
้ ็ ั ้ ็ ้ ั
สามารถเรียกเปิดพาเนลไดจากเมนูคาสง Window > และเลือกพาเนลที่ตองการดังนี้
้ ํ ั่ ้

1.Insert
ใช้งาน 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. คลิกติ๊กถูกชื่อเครื่ องมือเพื่อแสดงหรื อคลิกเอาถูกออกเพื่อซ่อนเครื่ องมือ

เรื่อง : 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
18. คลิก Border
19. ช่อง Style คลิกเลือกแบบ Dotted
20. ช่อง Width คลิกเลือกเสนแบบบางๆ thin
้
21. สี หรื อ Color คลิกเลือกสี ตามต้องการ

23. คลิกด้านหลังภาพ ที่ตาแหน่งดังตัวอย่าง
ํ
24. คลิกเลือกสไตลชื่อ Pictborder
์
25. กรอบรอบภาพจะเป็ นแบบเส้นประ

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

30. คลิก Background
31. คลิกเลือกสีพ้ืนเป็นสีชมพอ่าน
ู
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

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)
้
Data Source Name (DNS) เลือกรายการชื่อฐานข้อมูล
( จาก ODBC Data Source แทบ System DSN ใน Control Panel )
็
User Name ใส่ ชื่อที่มีใน ฐานข้อมูล
Password ใส่ รหัสผ่านที่มีใน ฐานข้อมูล

คลิกป่ ุม Test เพื่อทดสอบการ Connection และคลิกป่ ุม OK เพื่อยืนยัน
7. ข้นตอน การต้ังค่า สําหรับภาษา PHP
ั
ถ้าใช้ภาษา PHP จะปรากฏรายการดังนี้
MySQL Connection

การตั้งค่า ใน MySQL Connection
้
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

รายงาน คอม

Recommended

Recommended

More Related Content

Similar to รายงาน คอม

Similar to รายงาน คอม (20)

รายงาน คอม