1. รายงาน
เรื่อง การใช้ งานwindow
ใน Dreamweaver
เสนอ
คุณครู สุชาติ นาดี
จัดทาโดย
นาสาวเสาวณีย์ ดีช่อรัมย์ เลขที่ 25
นางสาวอรอุวรรณ โคมารัมย์ เลขที่ 30
ชั้นมัธยมศึกษาปี ที่ 5/3
รายงานเล่ มนีเ้ ป็ นส่ วนหนึ่งของวิชา คอมพิวเตอร์
โรงเรียนรมย์ บุรีพทยาคม รัชมังคลาภิเษก
ิ
สานักงานเขตพืนที่การศึกษามัธยมศึกษา เขต 32
้
ภาคเรียนที่2 /2554

2. คานา
รายงานเล่มนี้เป็ นส่ วนหนึ่งของวิชาคอมพิวเตอร์ จัดทาขึ้นเกี่ยวกับการใช้งานแถบเมนู
window ในDreamweaver ซึ่ งเป็ นการใช้งานแต่ล่ะแถบเมนู ที่ช่วยในการเรี ยนรู ้ ในการทาเว็บไซต์
อีกทั้งยังมีคาแนะนาเพื่อให้เกิดความสวยงามและเป็ นระเบียบ
Dreamweaver เป็ นโปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใช้งานใน
แบบ WYSIWYG อ่านว่า วิสสิ วก (What You See Is What You Get) คือ โปรแกรมประเภทคุณ
ิ
ออกแบบหน้าเว็บเพจ หรื อเว็บไซต์ มาอย่างไรในโปรแกรม คุณก็จะเห็นงานของคุณเป็ นแบบนั้น
ขอขอบพระคุณคุณครู สุชาติ นาดี ที่กรุ ณาให้คาแนะนาในการจัดทารายงานฉบับนี้จน
สาเร็ จลุล่วงด้วยดี หากว่ารายงานฉบับนี้มีขอผิดพลาดหรื อบกพร่ องประการใด ก็ขออภัยมา ณ
้
โอกาสนี้ดวย ้
คณะผู้จัดทา

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

4. แถบเมนู Window ใน Dreamweaver
ชื่อแถบเมนู คียลด
์ั ความหมาย
Insert Crl+F2 แทรก
Properties Crl+F3 คุณสมบัติ
CSS Styles Shift+F11 ลักษณะ CSS
AP Elements F2 องค์ ประกอบ
ของ AP
Behaviors Shift+F4 ลักษณะการ
ทางาน
Databases Crl+ ฐานข้ อมูล
Shift+F10
Bindings Crl+ F10 ผูก
Server Crl+ F9 ลักษณะการ
Behaviors ทางานของ
เซิร์ฟเวอร์
Components Crl+ F7 ส่ วนประกอบ
Files F8 ไฟล์
Assets F11 สิ นทรัพย์
Snippets Shift+F9 ตัวอย่าง
Tag F9 ตรวจสอบ

5. Inspector แท็ก
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..
การจัดการ

6. Hide Panels F4 ซ่ อนแผง
Cascade
Tile เรียง
Horizontally แนวนอน
Tile เรียงแนวตั้ง
Vertically
1 Untitled-1
กลุ่มหน้ าต่ างพาเนล (Panel Group)
ในโปรแกรม Dreamweaver มีหน้าต่างพาเนลต่างๆที่ช่วยเพิ่มความสามารถในการจัดการ
และออกแบบหน้าเว็บของเราได้ ซึ่ งแต่ละพาเนลจะมีความสามารถในการจัดหน้าเว็บได้ไม่
เหมือนกัน เราสามารถเรี ยกเปิ ดพาเนลได้จากเมนูคาสั่ง Window > และเลือกพาเนลที่ตองการดังนี้
้
เลือกเมนูคำสัง Window >
่ กลุมหน้ ำต่ำงพำเนลที่เรำ
่
เลือกพำเนลที่ต้องกำร เลือกเปิ ดขึ ้นมำใช้ งำน

7. 1. Insert
เรื่อง : Insert รู ปภาพกับ Dreamweaver แล้ วรู ปไม่ แสดงที่ Browser ?
คาถามที่ผมมักจะพบอยูบ่อย ๆ กับการใช้งาน Dreamweaver เรื่ องของการแทรกรู ปภาพ หรื อการ
่
่
Insert Image นั้นก็คือ มักจะประสบปั ญหากันในกรณี ที่วา...ทาไม Dreamweaver พอดูเว็บที่ตนเอง
ทา มีรูปภาพขึ้นปรกติ แต่พอไปดูที่ Web Browser รู ปภาพกลับไม่ปรากฏสะงั้น...คนทาก็งง หา
สาเหตุไม่พบ ก็โปรแกรมเห็นทาไม Browser ไม่เห็น พาลโทษไปยัง Browser หรื อตัว
Dreamweaver สะดื้อ ๆ ก็มี ? บทความนี้จะมาแนะนาถึงสาเหตุดงกล่าว ให้ท่านนาไปใช้แก้ไข
ั
ปัญหาดูครับ
สาเหตุที่รูปภาพไม่ ปรากฏที่ Browser ?
สาเหตุปัญหาแบบนี้กว่า 85% ที่ผมพบมาคือ เมื่อมีการใช้โปรแกรม Dreamweaver ในการ Insert
Image ผูใช้งานมักจะทาการเลือกที่ Relative To เป็ น Site Root ดังรู ป
้

8. ซึ่ งทั้ง ๆ ที่จริ งแล้วค่า 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 ดังรู ป

9. ่
ให้เราสังเกตที่ Address ดังรู ป เราจะเห็นได้วาเว็บเพจเราพยายามเรี ยกไฟล์รูปภาพขึ้นมาจาก
ตาแหน่งของ Drive จริ ง ๆ ซึ่ ง ณ.จุดนี้ นี่เอง ทาให้เมื่อเราทาการอัพโหลดข้อมูลเว็บเราขึ้นไปวางบน
่
Web Hosting ทาให้เว็บเพจเราไม่สามารถแสดงผลรู ปภาพได้ ยกเว้นเสี ยแต่วา ไฟล์รูปภาพเรา เมื่อ
ทาการเรี ยกจาก Root Path แล้ว จะพบ Path ตามที่เว็บเพจพยายามเรี ยกรู ปภาพนั้นให้แสดงนั้นมีอยู่
จริ ง
** หากท่านใดไม่เข้าใจเรื่ อง PATH ว่าคืออะไร ก็ขามหัวข้อนี้ไปได้เลยครับ ลงไปอ่าน วิธีการแก้ไข
้
ได้เลย **
วิธีการแก้ไข
สาหรับวิธีทางแก้ไขในกรณี น้ ี คือ ให้ท่านกลับไปแก้ไขไฟล์รูปภาพที่ทาการ Insert เข้ามาในเว็บเพจ
แล้วทาการเลือก Relative To เป็ น Document ดังรู ป

10. ซึ่งการเลือกในแบบ Document จะเป็ นการเรี ยกใช้งานรู ปภาพในแบบ Ralative Path โดยให้มี
ั ่
ความสัมพันธ์กบตาแหน่งไฟล์เอกสารหรื อไฟล์ HTML เว็บเพจนั้น จึงทาให้ไม่วาเราจะทาการ
Upload ไฟล์ Web Page นี้ไปวาง ณ.จุดใด การเรี ยกไฟล์รูปภาพขึ้นมาปรากฏจะอ้างจากเอกสาร
HTML ไปหาไฟล์รูปภาพนั้นเสมอ ทาให้ลดปัญหารื่ องของ Path รู ปภาพผิดลงไปได้
ใช้ งาน Insert Bar ใน Dreamweaver CS3
เป็ นแถบเครื่ องมือช่วยในการนาข้อมูลแบบต่างๆ มาวางในเว็บเพจ เพื่อความสะดวกในการทางาน
เป็ นอีกทางเลือก แทนการคลิกเลือกจากคาสั่งต่างๆ ซึ่ งต้องคลิกหลายครั้งกว่าจะได้คาสั่งที่ตองการ
้
1. Common แทรกข้อมูลทัวๆ ไป เช่น รู ปภาพ ลิงค์ ตาราง วันที่ เวลา
่
2. Layout แทรกข้อมูลแบบต่างๆ เช่น ตาราง เฟรม เลเยอร์ หรื อ AP Element
3. Forms แทรกข้อมูลเกี่ยวกับการสร้างฟอร์ ม ฟิ ลด์ต่างๆ ที่ตองใช้ในฟอร์ ม
้
4. Data แทรกข้อมูลหรื อการจัดการกับฐานข้อมูลที่จะนามาใช้ในเว็บเพจ
5. Spry รวมคาสั่งช่วยในการนา Spry แบบต่างๆ มาช่วยสร้างเว็บเพจ
6. Text รวมคาสั่งจัดการกับข้อความ ตัวหนังสื อ สัญลักษณ์พิเศษ
7. Favorites เป็ นกลุ่มคาสั่งที่เราอาจสร้างขึ้นมาเอง กรณี ตองใช้บางตัวบ่อยๆ
้
คาสังต่างๆ เหล่านี้ปกติก็สามารถเรี ยกใช้งานได้จากเมนูคาสังด้านบน File, Edit... แต่นามาทาเป็ น
่ ่
ปุ่ มแบบนี้ การคลิกเลือกใช้งานจะง่ายกว่า

11. แสดงการซ่ อน Insert Bar ใน Dreamweaver CS3
1. คลิก View
2. คลิก Toolbars
3. คลิกติ๊กถูกชื่อเครื่ องมือเพื่อแสดงหรื อคลิกเอาถูกออกเพื่อซ่อนเครื่ องมือ

12. 2. Properties
การจัดเรียงข้ อความในตาราง
จัดข้ อมูลในแนวนอน
เราสามารถจัดข้อมูลให้ชิดขวา ชิดซ้าย หรื ออยูตรงกึ่งกลางของช่องตาราง โดยการคลิกในช่องเซลล์
่
ที่ตองการ แล้วกาหนดในช่อง Horz ในแถบ Properties (Window > Properties > Horz)
้
1. คลิกในช่องเซลล์ที่ตองการ แล้วกาหนดในช่อง Horz ในแถบ Properties
้
2. เมื่อเลือกในช่อง Horz แล้วจะได้ตาแหน่งของข้อความตามที่เราต้องการ
Default ่
เป็ นการจัดเรี ยงข้อมูลแบบปกติ (คือจัดให้อยูชิดซ้ายของช่องตาราง)
Left ่
จัดให้ขอมูลอยูชิดซ้ายของช่องตาราง
้
Right ่
จัดให้ขอมูลอยูชิดขวาของช่องตาราง
้
Center จัดให้ขอมูลอยูก่ ึงกลางของช่องตาราง
้ ่
จัดข้ อมูลในแนวตั้ง
ถ้ามีช่องตารางที่ขยายออกมามากกว่า 1 แถวเราสามารถกาหนดข้อมูลนั้นให้ชิดด้านบน ด้านล่าง
หรื อกึ่งกลางได้ โดยการคลิกที่ช่องเซลล์ที่ตองการแล้วกาหนด Vert ในแถบ Properties (Window >
้
Properties > Vert)
1. คลิกเลือกช่องเซลล์ที่ตองการ แล้วกาหนดใช่อง Vert ในแถบ Properties
้
2. เมื่อเลือกในช่อง Vert แล้วจะได้ตาแหน่งของข้อความตามที่เราต้องการ
Default เป็ นการจัดเรี ยงแบบปกติของข้อมูล (คือจัดให้อยูก่ ึงกลางของช่อง
่
ตาราง)
Top ่
จัดให้ขอมูลอยูบนสุ ดของช่องตาราง
้
Middle จัดให้ขอมูลอยูก่ ึงกลางของช่องตาราง
้ ่
Bottom จัดให้ขอมูลอยูล่างสุ ดของช่องตาราง
้ ่
Baseline ข้อมูลบรรทัดสุ ดท้ายจะติดกับขอบเซลล์เส้นล่างสุ ด
3. css styles
CSS หรื อ Cascading Style Sheet เป็ นรู ปแบบของตัวหนังสื อ กรอบข้อความ ย่อหน้า เส้น ขอบภาพ
เครื่ องหมายหน้าหัวข้อ การจัดตาแหน่งวัตถุ ที่ใช้ในเว็บเพจมากกว่าหนึ่งเว็บเพจ ช่วยให้การ แก้ไข
ส่ วนต่างๆ ดังกล่าว สามารถทาได้ที่ไฟล์ CSS ไฟล์เดียว

13. เว็บไซต์ขนาดใหญ่ที่มีขอมูลจานวนมากๆ จาเป็ นต้องอาศัยรู ปแบบการจัดการกับเนื้อหาในเว็บเพจ
้
อย่างมีประสิ ทธิ ภาพ การออกแบบรู ปแบบของหัวข้อ รู ปแบบการตกแต่งเนื้ อหา เป็ นเรื่ องสาคัญที่
ต้องวาง แผนไว้อย่างดี เพราะจะง่ายในการปรับแต่งภายหลัง
่
มีท้ งหมด 8 ประเภทตามออปเจ็คที่มีอยูบนเว็บเพจ คือ
ั
1. Type ไว้กาหนดเกี่ยวกับตัวหนังสื อ
2. Background พื้นหลัง สี พ้ืนของเว็บเพจ
3. Block เป็ นรู ปแบบการจัดย่อหน้าของข้อความในเนื้ อหา
4. Box เป็ นกรอบต่างๆ ทั้งกรอบภาพและกรอบข้อความ
5. Border เป็ นเส้นขอบภาพ เส้นขอบของตัวหนังสื อ
6. List เครื่ องหมายหน้าหัวข้อ หรื อลิสต์ของเนื้ อหาบนเวบเพจ
7. Positioning การจัดตาแหน่ง ภาพหรื อข้อความบนเว็บเพจ จัดซ้ายกลางขวาของหน้าเว็บเพจ
8. Extension คุณสมบัติอื่นๆ นอกเหนือจากนั้น เช่น การแบ่งหน้าเว็บเพจ เอฟเฟ็ คการทางาน ของ
เมาส์และภาพ
ใช้ งานพาแน่ ล CSS Style ใน Dreamweaver CS3
1. คลิกชื่อ CSS Style เพื่อแสดงหรื อซ่อนพาแน่ล

14. ลักษณะการใช้งาน 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
ั

15. 7. คลิกเลือก Border
8. เลือกเส้นขอบแบบอื่นๆ เช่น dotted
9. ขนาดของเส้นคลิกเลือกแบบบาง thin
10. คลิกเลือกสี ของเส้นขอบตามต้องการ
11. คลิกปุ่ ม Apply เพื่อดูผลงานเดี๋ยวนั้นหรื อคลิกปุ่ ม OK ถ้าถูกใจแล้ว
12. ซึ่ งก็จะมีผลทาให้เส้นขอบของภาพถูกแก้ไขโดยอัตโนมัติ
13. การใช้ CSS สไตล์ ก็จะช่วยให้การจัดการกับข้อความหรื อภาพ ทาได้ง่ายๆ ในลักษณะนี้
14. ข้อความก็เหมือนกันใช้ CSS สไตล์ ชื่อ bodytext ก็ดบเบิ้ลคลิกชื่อสไตล์
ั
15. แก้ไขแบบ ขนาด สี ของตัวหนังสื อตามต้องการ
16. เสร็ จแล้วคลิกปุ่ ม OK
17. ข้อความใดๆ ที่ใช้สไตล์น้ ีก็จะถูกแก้ไขไปด้วย

16. เริ่มสร้ าง CSS สไตล์ใน Dreamweaver CS3
1. สร้างไฟล์ใหม่เช่น index_css.php แล้วดับเบิ้ลคลิกเปิ ดไฟล์ข้ ึนมาแก้ไข
2. แทรกตาราง พิมพ์ขอความและนาภาพเข้ามา
้
3. ห้ามจัดรู ปแบบของตัวหนังสื อหรื อภาพ ปล่อยไว้แบบธรรมดาๆ ไปก่อน
4. คลิกเครื่ องมือ CSS คลิกปุ่ ม New CSS Rule
5. ช่อง Name คลิกและพิมพ์ Head01
6. เลือกค่าอื่นๆ ตามตัวอย่างแล้วคลิก OK

17. 7. คลิกเลือก Type
8. กาหนดคุณสมบัติของตัวหนังสื อเป็ น Microsoft Sans Serif ขนาด 14 ตัวหนา สี ดา
9. คลิก Background
10. คลิกเลือกสี พ้นเป็ นสี ชมพูอ่อน #FF66FF
ื
11. คลิกปุ่ ม OK
12. คลิกหลังคาว่า ขอต้อนรับทุกๆ ท่าน
13. คลิกเลือกสไตล์ชื่อ Head01
14. ผลที่ได้
15. คลิกปุ่ ม New CSS Rule อีกครั้ง เพื่อสร้าง CSS สไตล์ แบบอื่นๆ
16. คลิกและพิมพ์ Pictborder
17. คลิกปุ่ ม OK
18. คลิก Border
19. ช่อง Style คลิกเลือกแบบ Dotted
20. ช่อง Width คลิกเลือกเส้นแบบบางๆ thin

18. 21. สี หรื อ Color คลิกเลือกสี ตามต้องการ
22. คลิกปุ่ ม OK
23. คลิกด้านหลังภาพ ที่ตาแหน่งดังตัวอย่าง
24. คลิกเลือกสไตล์ชื่อ Pictborder
25. กรอบรอบภาพจะเป็ นแบบเส้นประ
26. คลิกปุ่ ม New CSS Rule สร้างสไตล์เพิมเติม
่
27. คลิกและพิมพ์ช่ือสไตล์เช่น bodytext แล้วคลิกปุ่ ม OK
28. คลิก Type
29. คลิกเลือก Font = Microsoft Sans Serif ขนาด 12 ตัวปกติ normal

19. 30. คลิก Background
31. คลิกเลือกสี พ้นเป็ นสี ชมพูอ่าน
ื
32. คลิกปุ่ ม OK
33. คลิกหลังคาว่า .....ฯลฯ
34. คลิกเลือกสไตล์ที่ตองการ
้
35. ข้อความด้านล่าง ออกแบบและพัฒนาโดย ก็คลิกเลือกสไตล์ bodytext เช่นกัน
36. บันทึกงานเก็บไว้
่
37. ผลงานที่ได้เมื่อดูผานโปรแกรมเว็บบราวเซอร์

20. การใช้ งาน CSS สไตล์ในเว็บเพจอืนๆ่
1. เปิ ดไฟล์เว็บเพจใดๆ ขึ้นมาก่อน
2. คลิกปุ่ ม Attach Style Sheet
3. คลิกปุ่ ม Browse
4. ดับเบิลคลิกโฟลเดอร์ Style
้
5. คลิกเลือกไฟล์ mstyle.css แล้วคลิกปุ่ ม OK
6. คลิกหลังภาพหรื อแบนเนอร์
7. คลิกเลือกสไตล์ตามต้องการ

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

22. 6. คลิก File>>Save
7. คลิกเลือกที่เก็บเป็ นโฟลเดอร์ Style
8. คลิกและพิมพ์ชื่อ mystyle2.css
9. คลิก Save
10. ดับเบิ้ลคลิกเปิ ดไฟล์ใดๆ ขึ้นมา
11. คลิก Attact Style Sheet
12. คลิก Browse ไปเลือกไฟล์ mystyle2.css
13. คลิกปุ่ ม OK

23. 14. คลิกส่ วนที่ตองการใช้สไตล์
้
15. คลิกเลือก Style ตามต้องการ
16. ผลที่ได้
การอัพโหลดเว็บเพจเข้ าเว็บไซต์ จริง
เว็บเพจที่มีการใช้ไลบรารี ในการอัพโหลดเข้าเว็บไซต์จริ ง นอกจากไฟล์เว็บเพจแบบ PHP แล้วก็
ต้องอัพโหลดไฟล์แบบ CSS Style ไปด้วย
1. จัดการอัพโหลดไฟล์เว็บเพจแบบ PHP ตามปกติ
่
2. ไฟล์ CSS Style จะอยูในโฟลเดอร์ styles จะอัพโหลดไปทั้งโฟลเดอร์ เลยก็ได้ หรื อจะเลือก เอา
เฉพาะไฟล์ที่ตองการก็ได้ ในกรณี ที่มีการสร้างไว้จานวนมาก
้

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

25. 5. คลิกข้างในเลเยอร์ แล้วพิมพ์ขอความลงไป พิมพ์แต่ละบรรทัดแล้วกด Shift + Enter
้
6. วาดอีก 2 เลเยอร์
7. ถ้าจะวางภาพ ก็คลิกในเลเยอร์ แล้วแทรกภาพลงไป ด้วยคาสัง Insert>>Image
่
8. การจัดการกับภาพหรื อข้อความบนเลเยอร์ ก็จดการเหมือนปกติทวไป
ั ั่
คุณสมบัติเลเยอร์ ในเครื่องมือ Properties
ก่อนอื่นต้องคลิกเลือกเลเยอร์ ที่ตองการก่อน
้

26. 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. ระดับชั้นของเลเยอร์

27. การลบเลเยอร์ ใน Dreamweaver CS3
1. คลิกเลือกเลเยอร์ที่จะลบ
2. กดปุ่ ม Delete ที่แป้ นพิมพ์
การจัดการกับข้ อความบนเลเยอร์ ใน Dreamweaver CS3
1. สร้างแถบดาข้อความที่ตองการ
้
2. คลิกเลือกคาสั่งที่ตองการในเครื่ องมือ Properties เช่น ตัวหนังสื อ ขนาด สี ฯลฯ
้
การจัดการกับภาพบนเลเยอร์ ใน Dreamweaver CS3
1. คลิกเลือกภาพ
2. คลิกเลือกคาสั่งที่ตองการในเครื่ องมือ Properties
้

28. การย้ายตาแหน่ งเลเยอร์ ใน Dreamweaver CS3
1. คลิกเลือกเลเยอร์ที่ตองการ
้
2. ชี้ที่แฮนเดิ้ลของเลเยอร์ ที่เลือก กดปุ่ มซ้ายของเมาส์คางไว้แล้วลากเมาส์ออก
้
3. ได้ตาแหน่งที่ตองการแล้วก็ปล่อยปุ่ มซ้ายของเมาส์ เพื่อวางยังตาแหน่งใหม่
้
4. การย้ายอีกวิธีหนึ่ง ให้คลิกเลือกเลเยอร์ ที่ตองการก่อน
้
5. คลิกและพิมพ์ตวเลขในช่อง L และ T เป็ นตาแหน่งในแนวนอนและแนวตั้ง พิมพ์เสร็ จแต่ ละค่า
ั
แล้วก็กด Enter

29. ลดหรือขยายขนาดเลเยอร์ ใน Dreamweaver CS3
1. คลิกเลือกเลเยอร์
2. ชี้ลูกศรที่จุดที่ดานใดด้านหนึ่ง หรื อมุมใดๆ ให้ลูกศรเป็ นรู ปลูกศรสองหัว
้
3. กดปุ่ มซ้ายของเมาส์คางไว้ แล้วลากเมาส์เข้าหรื อออกจากด้านตรงกันข้าม เพื่อลดหรื อขยายขนาด
้
เลเยอร์
การจัดตาแหน่ งลาดับชั้นบนล่างของเลเยอร์ ใน Dreamweaver CS3
1. คลิกเลือกเลเยอร์ที่ตองการ้
2. ให้ช้ ีที่ชื่อเลเยอร์ ในเลเยอร์ พาเนล กดปุ่ มซ้ายค้างไว้แล้วลากขึ้นลง สลับตาแหน่งบนล่างได้ตาม
ต้องการ

30. การจัดเรียงเลเยอร์ ใน 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

31. การสร้ างการเชื่อมโยงในเว็บเพจแบบเลเยอร์ ใน Dreamweaver CS3
1. สร้างแถบดาหัวข้อที่จะทาลิงค์
2. ช่อง Link คลิกและพิมพ์ชื่อไฟล์เช่น aboutus.php
3. ช่อง Target คลิกเลือก _blank
4. หัวข้ออื่นๆ ก็สร้างลิงค์ให้เรี ยบร้อย
5. บันทึกงานเก็บไว้แล้วทดสอบโดยพิมพ์กดปุ่ ม F12

32. 5. Databases
Database พิมพ์ชื่อ Database ถ้าจาชื่อ Database ไม่ได้ให้คลิกปุ่ ม Select
กาหนดทุกอย่างเรี ยบร้อยให้คลิกปุ่ ม OK
สร้ าง Connection เสร็จแล้วไม่ สามารถติดต่ อกับ Database ให้ ตรวจสอบ ดังนี้
1. ให้ตรวจสอบไฟล์ Config ของ PHP ชื่อ php.ini
่
ถ้าเป็ น Windows 98/Me/XP จะอยูที่ C:WINDOWS
่
ถ้าเป็ น Windows 2000 จะอยูที่ C:WINNT
กรณี ท่ีไม่สามารถติดต่อกับฐานข้อมูลของ PostgresSQL
เปิ ดไฟล์ php.ini ด้วย Notepad
ให้คนหา extension=php_pgsql.dll ถ้าด้านหน้าที่เครื่ องหมาย ; ให้ลบออก
้
ให้คนหา extension_dir = ./ ให้แก้ ./ เป็ นพื้นที่ที่เก็บไฟล์ php_pgsql.dll
้
2. กาหนด Site ในส่ วน Testing Server ถูกต้องหรื อไม่
3. MySQL หรื อ PostgreSQL ที่ติดต่อ Start Service หรื อไม่
ขั้นตอนการให้ DreamweaverMX ติดต่อฐานข้อมูล Database
1.เปิ ดโปรแกรม คลิกเมนู File เลือก New เพื่อสร้างไฟล์ข้ ึนใหม่ (New Document )
2. แท็ป General ในช่อง Category เลือก Dynamic Page และ เลือกภาษา ที่ตองการติดต่อ เช่น ASP
้
VBScript , PHP กดปุ่ ม Create เพื่อยืนยัน
3. เลือก เมนู Window > Databases ปรากฏหน้าต่าง Application
Create a site for this file ( ควรทาการ MapSite ด้วยดูในหัวข้อ "สร้าง Site Map" )
เลือก Choose a document type เลือกFile Extension และ เลือกภาษาที่ไช้ กด OK
เลือก Set up the site's testing server เพื่อตั้งค่า แล้วคลิกปุ่ ม OK เพื่อยืนยัน

33. 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)

34. ตั้งค่า ถ้าเลือก 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

35. การตั้งค่า ใน MySQL Connection
Connection Name ใส่ ชื่อของการติดต่อ เพื่อใช้อางถึงภายในโปรแกรม Dream
้
MySQL Server เลือกชื่อเซิฟเวอร์ที่ใช้ หรื อ localhost
User Name ใส่ ชื่อที่มีใน MySQL
Password ใส่ รหัสผ่านที่มีใน MySQL
และกดปุ่ ม Select เพื่อเลือก ฐานข้อมูล
ถ้า User Name และ Password ถูกต้อง จะปรากฏหน้าต่าง Select Database
เลือก Database และกดปุ่ ม OK เพื่อยืนยัน
คลิกปุ่ ม Test เพื่อทดสอบการ Connection และคลิกปุ่ ม OK เพื่อยืนยัน

36. 8. หน้าต่าง Application ที่ติดต่อฐานข้อมูลเรี ยบร้อยแล้ว
6.Bindings
วิธีการทา 1. ให้คุณทาการ New เอกสารขึ้นมาใหม่แล้วทาการ Save เป็ นไฟล์ *.php หรื อ ถ้ามีไฟล์
่
งานที่เป็ น *.php อยูแล้วให้ทาการ Open ไฟล์น้ นขึ้นมา
ั
2. เมื่อเราได้เอกสารที่เป็ น PHP แล้ว ให้เราทาการ เปิ ดหน้าต่าง Bindings ขึ้นมา โดยไปที่ Main
Menu -> Window ->Bindings ดังรู ป
1. เมื่อเราทาการเลือกไปที่เมนู Bindings แล้วเราก็จะได้หน้าต่างที่ชื่อว่า Bindings ขึ้นมา
<< การรับจากค่ าทีส่งมา >>
่
3.1 หากเราต้องการรับค่าที่ส่งมาในแบบ GET ให้เราเลือกไปที่ URL Variable ดังรู ป

37. 3.2 หากเราต้องการรับค่าที่ส่งมาในแบบ POST ให้เราเลือกไปที่ FORM Variable ดังรู ป
4. เมื่อเราทาการเลือกรู ปแบบการรับค่าจากข้อ 3 แล้ว จะเกิดหน้าต่างใหม่ข้ ึนมา เพื่อให้เราใส่ ค่าชื่อ
ของตัวแปรที่จะรับ ดังรู ป
เช่น ถ้า URL เป็ น http://www.myweb.com/test.php?name=somchai เราก็เอาคาว่า name พิมพ์ลงไป
ที่ช่อง Name ดังรู ป
5. เมื่อเราทาการใส่ ชื่อของตัวแปร (key) ลงไปแล้ว เราก็จะได้ชื่อและการรับค่าจากตัวแปรนั้น
ปรากฏในหน้าต่าง Bindings ดังรู ป

38. << การนาไปใช้ งาน >>
1. ให้เราไปที่หน้าต่าง Bindings แล้ว Click เลือกไปที่ค่าที่เราต้องการจะรับและพิมพ์ออก
ทาง Browser
2. จากนั้นให้เราทาการ Click และลากมาวางไว้ในตาแหน่งที่ตองการบนหน้า Document ของเรา ดัง
้
รู ป
3. เมื่อเราทาการลากและนามาวางลงไปแล้ว จะปรากฏค่าดังนี้
- {URL.name} หากมีการรับค่าด้วยวิธี GET
- {FORM.name} หากมีการรับค่าด้วยวิธี POST
4. ให้เราเปิ ดไปที่ Show Code View จะปรากฏ CODE ดังรู ป

39. ่
5. สังเกตุได้วา CODE ที่ได้จะเป็ นโค้ดของ PHP ในแบบที่เราคุนเคย
้
ps. ใน Dreamweaver MX ยังมีวธีการรับค่าจาก GET or POST อีกรู ปแบบ คือ การเรี ยกใช้
ิ
ผ่าน ICON จากTAB ที่ชื่อว่า PHP ดังรู ป
การรับค่าในแบบ POST
การรับค่าในแบบ GET
แต่โค้ดที่ได้จะแตกต่างกัน ลอง VIEW CODE สังเกตดู...
7. Server Behaviors
Server Behavior ด้านล่างมีไว้สาหรับช่วยให้คุณใช้เป็ นอินเทอร์ เฟซโต้ตอบกับการทางานของ
PayPal
1. Single Purchase Behavior
เมื่อใช้งานกับภาพหรื อข้อความ Server Behavior นี้จะสร้างลิงก์เชื่อมตรงไปยังหน้าจอการ
ชาระเงิน PayPal จึงช่วยให้คุณสร้างลิงก์ เช่น "ซื้ อเลย" ได้ วิธีน้ ีมีประโยชน์สาหรับไซต์ที่
ขายผลิตภัณฑ์หรื อบริ การเพียงอย่างเดียว
2. The From Your Cart Behavior
หากคุณตัดสิ นใจใช้โซลูชนตะกร้าสิ นค้าอื่นๆ เช่น UltraCart II คุณก็ยงคงสามารถใช้
ั ั
บริ การของ PayPal เพื่อรับชาระเงินค่าสิ นค้าของคุณได้ ข้อมูลที่คุณต้องระบุ

40. (นอกเหนือจาก 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

41. รู ปที่ 4: pp_SinglePurchase
1.1.1.1. การสั่ งให้ แสดงคาตอบซ้า
 ทาแถบสี คลุมทั้งตารางคาตอบ ที่เมนูดานขวาเรื่ อง Application แท็บ
้
Server Behaviors คลิกเมาส์ที่เครื่ องหมาย + เลือกคาสั่ง Repeat Region
 ที่ Recordset เลือก Recordset2 ที่ Show เลือก All records
 เมื่อกดปุ่ ม ok จะเห็นเครื่ องหมาย Repeat ตอนแสดงซ้ าต้องการให้แต่ละ
ตารางคาตอบแสดงห่างกัน 1 บรรทัด ให้เม้าส์ขวาที่ตาราง เลือกคาสั่ง
Select > Table กดปุ่ มลูกศรบนคียบอร์ ดให้ไปทางขวา 1 ครั้ง เพื่อเป็ นการ
์
เลื่อนเคอร์เซอร์ไปทางขวาของตาราง แล้วกดปุ่ ม Enter เพื่อเป็ นการเพิม่
บรรทัดที่ดานล่างของตาราง จากตัวอย่างด้านล่าง จะเห็นว่าบรรทัดเปล่า
้
่
อยูในกรอบของ Repeat เวลาแสดงซ้ าตารางจะเว้นห่างกัน 1 บรรทัดทุก
ครั้งด้วย
 พรี ววผลลัพธ์ใน IExplore
ิ

42. 8. Component
สร้างคอมโพเน้นท์ในการสร้างเว็บแอพพลิเคชัน
่
9. Files
ทาความรู้ จักพาเนล Files ใน Dreamweaver CS3
เป็ นแถบเครื่ องมือไว้จดการกับไฟล์และโฟลเดอร์ เมื่อสร้างเว็บเพจก็จะได้ไฟล์ต่างๆ ส่ วนโฟลเดอร์
ั
ไว้แยกเก็บไฟล์เว็บเพจหรื อไฟล์ชนิดอื่น ให้เป็ นระเบียบ
1. คลิกเลือก Site ที่ตองการใช้งาน
้
2. รายชื่อไฟล์และโฟลเดอร์ ภายในเว็บไซท์
่
3. คลิกปุ่ ม + เพื่อแสดงชื่อไฟล์ในโฟลเดอร์ ยอย คลิก - เพื่อซ่อน
4. รายชื่อไฟล์ภายในโฟลเดอร์ที่ถูกคลิกเลือก
5. ไฟล์เว็บเพจ เช่น htm, html, php, asp จะเป็ นไฟล์เว็บเพจ เป็ นข้อความ
6. ไฟล์ jpg, gif จะเป็ นไฟล์ภาพประกอบในเว็บเพจ เนื้อหาในเว็บเพจที่เป็ นข้อความและไฟล์ภาพ
ประกอบจะแยกกัน เวลานาไปใช้งาน ก็ตองเอาไปใช้ท้ งไฟล์เว็บเพจและไฟล์รูปภาพ
้ ั

43. 10. Assets
ั
เป็ นการกาหนดคุณสมบัติให้กบส่ วนต่างๆของเว็บเพจ เช่น Template, library หรื อ script
ขั้นตอนวิธีการแทรกภาพ
1.> สร้างเอกสารที่เราต้องการแทรกภาพขึ้นมา
เปิ ดเครื่ องมือ Assets ขึ้นมา เครื่ องมือจะอยูส่วนล่างของ Dream
่
2.> เราจะเห็นรายชื่อไฟล์รูปภาพให้เราลากไฟล์ที่เราต้องการแทรกภาพลงบนเว็บเพจของเรา
ได้เลย

44. 4.> เพียงเท่านี้เราก็สามารถแทรกรู ปภาพได้อีกแบบแล้วครับ
11. Snippets
Window > Snippets เป็ นเสมือนคลังโค้ด บางคนบางท่านนิยมการก้อปปี้ และวาง ถ้าท่านเปลี่ยนมา
ใช้คุณสมบัติตวนี้ ชีวิตก็จะง่ายขึ้น Dreamweaver เอง
ั
จะให้โค้ดที่คิดว่าน่าจะใช้บ่อย มาส่ วนหนึ่ง และอนุ ญาติให้เราเพิ่มเติมโค้ดที่เราใช้บ่อยเข้าไป ได้
ด้วย ไม่เพียงเท่านั้น ยังอนุญาติให้เรา
กาหนด Shortcut Key เพื่อนาโค้ดมาใช้งานได้อย่างรวดเร็ วอีกด้วย (ลองคลิกขวาดู)
12. Behaviors
การใช้ งาน Behaviors สาหรับการสร้างหน้าเว็บเพจขั้นพื้นฐานอาจจะดูธรรมดาเกินไป ดังนั้นจึง
ั
ควรสร้างความน่าสนใจเพิ่มขึ้นโดยการใส่ ลูกเล่นหรื อความสามารถ เพิ่มเติมให้กบออบเจ็กต์ หรื อ
ส่ วนประกอบต่างๆ ในเว็บเพจ นาเมาส์ไปวางหรื อเมื่อคลิกเมาส์เป็ นต้น ซึ่ งในบทนี้จะเป็ นเรื่ องของ
ั
การเพิ่มลูกเล่น และความสวยงามให้กบหน้าเว็บเพจ
การเปลียนรู ปเมื่อวางเมาส์
่
การสร้างลูกเล่นแบบแรกก็คือ การสับเปลี่ยนรู ปภาพเมื่อนาเมาส์ไปวาง โดยเมื่อนาเมาส์ออกจากรู ป
ก็ให้เปลี่ยนรู ปภาพกลับมาเป็ นรู ปเดิมซึ่ งมีข้ น ตอนการสร้าง
ั
ดังนี้
1. คลิกรู ปภาพที่ตองการให้เปลี่ยน เมื่อนาเมาส์ไปวาง
้
2. คลิกเมนู Window > Behaviors

45. จากนั้นหน้าต่าง Behaviors จะเป็ ดขึ้นมาทางด้านขวา
3. คลิกปุ่ ม ่
จะเห็นได้วามีคาสั่งต่างๆแสดงขึ้นมามากมาย
4. คลิกเลือกคาสั่ง Swap Image โดยจะปรากฏ หน้าต่าง Swap Image ขึ้นมา
5. คลิกปุ่ ม ที่ช่อง Set Source to :
เพื่อเลือกไฟล์ภาพที่จะให้แสดงเมื่อนาเมาส์ไปวาง โดยหน้าต่าง Select Image Source จะปรากฏ
ขึ้นมา
6. คลิกเลือกไฟล์ภาพที่ตองการ
้
7. คลิกปุ่ ม

46. เมื่อกลับมาที่หน้าต่าง Swap Image อีกครั้ง จะสังเกตได้วาชื่อไฟล์ภาพที่เราเลือกปรากฏขึ้นมาที่ช่อง
่
Set Source to :
8. คลิกปุ่ ม
่
9. กดปุ่ ม <F 12 > ที่คียบอร์ ด เพื่อดูผลลัพธ์ผานทางบราวเซอร์
์

47. 10. นาเมาส์ไปวางที่รูปภาพ รู ปภาพนั้นก็จะเปลี่ยนไปเป็ นรู ปภาพที่กาหนดไว้ทนที โดยเมื่อเลื่อน
ั
เมาส์ ออกจะกลับไปเป็ นรู ปภาพเดิม
11. ปิ ดหน้าต่างบราวเซอร์
13. Reference
Reference เป็ นหน้าต่างที่ใช้อธิ บายความหมายของแท็ก แต่ละแท็กหรื อโค้ด Javascript หรื อ
VBSscript ที่เราใส่ ในเว็บเพจ
14. History
การย้อนกลับเพือแก้ไขข้ อผิดพลาดด้ วยพาเนลHistory
่
ในการทางานออกแบบเว็บเพจ เมื่อทาไปเรื่ อย ๆ อาจเกิดข้อผิดพลาดได้เราสามารถย้อนกลับไป
แก้ไขข้อผิดพลาดได้ โดยไปที่เมนูบาร์ Winndow>History หรื อกดคีย< Shift+F10>ดังภาพ
์

48. ่
เมื่อเปิ ดพาเนล History จะเห็นบันทึกการทางานทุกขั้นตอน โดยขั้นตอนล่าสุ ดจะเรี ยงอยูลาดับ
บนสุ ดของรายการ ขั้นตอนก่อนหน้านี้จะอยูล่าง ๆ ดังภาพ
่
การย้อนกลับการทางานหลาย ๆ ขั้นด้วยพาเนลนี้ เราทาได้โดยคลิกเลื่อนแถบ ไปยังขั้นตอนที่เรา
ต้องการย้อนกลับไปโดยจะเลื่อนไปทีละขั้นตอน หรื อหลายขั้นตอนได้ ดังภาพ

49. การทาซ้ าขั้นตอนการทางานเราสามารถสั่งให้ทาซ้ าขั้นตอนการทางานที่เราต้องการจะให้ทาซ้ า ใน
พาเนลHistory ได้โดย
1. คลิกเลือกขั้นตอนที่ตองการให้ซ้ า
้
2. คลิกที่ปุ่ม ่
ที่อยูมุมล่างด้านซ้ายมือ ดังภาพ
15. Frames
วิธีสร้ างเฟรมใน Dreamweaver CS3
1. คลิกเลือกโฟลเดอร์ Frame เป็ นการกาหนดว่าจะสร้างไฟล์เก็บไว้ในนี้
2. คลิก File>>New
3. คลิก Page from Sample>>Frameset
4. คลิกเลือกลักษณะของเฟรมที่ตองการ เช่น Fixed Top, Nested Left
้
5. คลิกปุ่ ม Create

50. 6. เพื่อความสะดวกในการทางานให้เปิ ดเครื่ องมือจัดการเฟรมขึ้นมาโดยคลิกเมนู Windows>>
Frames
7. เครื่ องมือ Fames จะปรากฏขึ้นมา จะมี 3 ส่ วนตามจานวนเฟรมที่เราเลือก ก็คือ TopFrame,
LeftFrame และ MainFrame
8. พิมพ์ขอความลงไปบนเฟรมแต่ละเฟรมก็พอ ยังไม่ตองวางภาพ
้ ้
การเซฟเฟรมเก็บไว้
ลักษณะของเฟรมที่ได้สร้างตามตัวอย่างนี้ จะมีอยู่ 3 เฟรมด้วยกัน การเซฟให้ปฏิบติดงนี้
ั ั
1. คลิกปุ่ ม Close ปิ ดไฟล์
2. จะปรากฏกรอบข้อความเตือนให้ Save ไฟล์ ให้คลิกปุ่ ม Yes
่
3. ในขณะเดียวกันที่เฟรมก็จะแสดงขอบเขตให้รู้วา กาลังจะเซฟเฟรมใดเป็ นไฟล์เก็บไว้
4. เฟรมนี้ ให้คลิกและพิมพ์ชื่อไฟล์ เช่น right.php แล้วคลิกปุ่ ม Save

51. 5. จะปรากฏกรอบข้อความเตือนให้ Save ไฟล์เพื่อบันทึกเฟรมอื่น ให้คลิกปุ่ ม Yes
6. เฟรมด้านซ้ายนี้ ให้ต้ งชื่อไฟล์ left.php
ั
7. เฟรมด้านบนให้ต้ งชื่ อไฟล์ top.php
ั

52. 8. เซฟครบทั้ง 3 เฟรมแล้ว ก็จะปรากฏกรอบข้อความเตือนให้บนทึกไฟล์อีกครั้งไฟล์สุดท้ายนี้ จะ
ั
เป็ นไฟล์ที่ทาหน้าที่รวมเฟรมทั้งสามเข้าด้วยกันให้ต้ งชื่ อว่า index.php เป็ นไฟล์หลัก
ั
9. หลังจากนั้นก็จะได้ไฟล์ท้ งหมด 4 ไฟล์
ั
- index.php เป็ นไฟล์หลัก
- top.php เป็ นเฟรมด้านบน
่ ้
- left.php เป็ นเฟรมที่อยูดานซ้ายมือ
่ ้
- right.php เป็ นเฟรมที่อยูดานขวามือ
10. ถ้าดับเบิ้ลคลิกที่แต่ละไฟล์ก็จะแสดงข้อมูลเฉพาะภายในไฟล์น้ นๆ แต่ถาเปิ ดไฟล์ Index.php ก็
ั ้
จะปรากฏข้อมูลในไฟล์ท้ งหมด จะเปิ ดขึ้นมาพร้อมกัน 4 ไฟล์
ั
11. ให้สร้างไฟล์อื่นๆ เพิ่มเติม เช่น aboutus.php, album.php, promotion.php, map.php และ
contact.php จะก็อปปี้ จากงานเก่าเข้ามาก็ได้ จะไว้ใช้ในการสร้างลิงค์เชื่ อมโยงกับเฟรม

53. ในการสร้างเว็บเพจแบบเฟรม ถ้าเลือกให้มีแค่ 2 เฟรม ไฟล์ก็จะมีนอยกว่านี้ มีเพียงไฟล์ที่เห็นเฟรม
้
ด้านบน ด้านล่าง และไฟล์หลัก index.php 3 ไฟล์เท่านั้น
แก้ไขไฟล์เฟรมเซ็ตใน Dreamweaver CS3
ในการแก้ไข ให้เปิ ดไฟล์หลักคือ Index.htm ไฟล์ก็จะถูกเปิ ดขึ้นมาทั้ง 4 ไฟล์
1. ในเครื่ องมือ Fames ให้คลิกเฟรมหรื อไฟล์ที่ตองการแก้ไขเช่น เฟรมช่องซ้ายมือที่เป็ นเมนู ให้
้
เลือก
2. พิมพ์ เมนูให้เลือก
3. คลิกปุ่ ม Page Properties
4. คลิกเลือกสี พ้นในส่ วน Background color แล้วคลิกปุ่ ม Apply หรื อ OK
ื
5. เมื่อคลิกที่เฟรมใดๆ แล้วปรับแต่งสี ตัวหนังสื อ หรื อภาพประกอบ เป็ นที่ถูกใจแล้วก็จดการ เซฟ
ั
ไฟล์ไว้ โดยคลิกเมนู File>>Save All คาสั่งนี้จะเซฟทีเดียวพร้อมกันทุกไฟล์
การปรับแต่ งเฟรมหลัก
1. คลิกเลือกเฟรมทั้งหมด โดยคลิกที่ขอบเฟรม
2. ในเครื่ องมือ Properties ให้คลิกเลือกขอบของเฟรม (Borders เลือก Yes ถ้าต้องการ ให้แสดงขอบ
เฟรม)
3. Border Width ให้คลิกและพิมพ์ความหนาของเส้นขอบเฟรม
4. Border Color ให้คลิกเลือกสี ของขอบเฟรม
5. Column เป็ นส่ วนให้กาหนดความกว้างของเฟรม

54. คุณสมบัติต่างๆ
Borders เส้นแบ่ง Yes มีเส้นแบ่ง No ไม่ตองมีเส้นแบ่ง
้
Border Width ขนาดความหนาของเส้นแบ่งเฟรม
Border Color สี เส้นแบ่งเฟรม
Row Value ความสู งของเฟรม
Row Unit หน่วยวัดความสู งของเฟรม
การปรับแต่ งเฟรมย่อย
นอกจากเฟรมหลักแล้ว เฟรมย่อยก็สามารถปรับแต่งได้เช่นกัน เฟรมสาคัญที่ตองปรับแต่งก็คือ
้
เฟรม ในช่องขวามือ เพราะเป็ นเฟรมที่ตองการแสดงเว็บเพจที่มีการเชื่อมโยง
้
1. กดปุ่ ม Alt ที่แป้ นพิมพ์คางไว้ แล้วคลิกที่เฟรมช่องขวามือ หรื อคลิกเลือกที่เครื่ องมือ Frames
้
2. ในช่อง Frame name ให้คลิกและพิมพ์ใหม่ ถ้าต้องการ ปกติจะชื่อ mainframe
3. ตัวเลือกอื่นๆ
- Scroll กาหนดให้แสดงหรื อซ่อนแถบเลื่อนดูขอมูล ในกรณี ที่มีขอมูลจานวนมาก
้ ้

55. คุณสมบัติต่างๆ
Frame name ชื่อเฟรม
ั
Src ลิงค์กบเว็บเพจที่ตองการแสดง
้
Scroll แสดงหรื อซ่อนแถบเลื่อนกรณี ท่ีขอมูลมีจานวนมาก เกินหน้าจอ
้
No resize ตัวเลือกสาหรับให้ผใช้ปรับขนาดของเฟรมได้หรื อไม่ได้
ู้
Borders แสดงหรื อซ่ อนเส้นแบ่งเฟรม
Borders Color สี เส้นแบ่งเฟรม
Margin Width ระยะห่างระหว่างข้อความขอบซ้ายขอบขวาของเฟรม
Magin Height ระยะห่างระหว่าง เนื้อหากับขอบบน ขอบล่างของเฟรม
การพิมพ์ Title ของเฟรมเซ็ท
1. คลิกขอบนอกของเฟรมในเครื่ องมือ Frames
2. คลิกช่อง Title และพิมพ์ขอความลงไป
้

56. สร้ างการเชื่อมโยงในเฟรม Dreamweaver CS3
วิธีการสร้างลิ้งค์หรื อการเชื่ อมโยงระหว่างเว็บเพจในเฟรม เช่น เมื่อคลิกหัวข้อในเมนูก็จะปรากฏ
เว็บเพจใหม่ในช่องด้านขวามือ
1. สร้างแถบดาหัวข้อที่ตองการสร้างลิ้งค์ เช่น เมนูหลัก
้
2. คลิกและพิมพ์ชื่อไฟล์ที่ตองการเชื่อมโยง เช่น right.php
้
3. ในช่อง Target ให้คลิกเลือก mainframe
4. ส่ วนหัวข้ออื่นๆ จะกาหนดค่าคล้ายกันเช่น สร้างแถบดา เกี่ยวกับเรา
5. ช่อง Link คลิกและพิมพ์ aboutus.php
6. ช่อง Target คลิกเลือก mainframe เท่านั้น เพื่อให้แสดงในเฟรมขวามือ
7. แก้ไขเสร็ จแล้วคลิก File>>Save All จะเป็ นการบันทึกไฟล์ทีเดียวทุกไฟล์ เนื่องจากเว็บเพจ แบบ
เฟรม จะมีการเปิ ดไฟล์ต่างๆ พร้อมกันมากกว่า 1 ไฟล์
16. Code Inspector
Code Inspector>F10 สาหรับคอโค้ดตัวจริ ง แบบที่เน้นเขียนโค้ดเป็ นหลัก Code Inspector หน้าตา
จะคล้ายๆกับ Code View แต่ก็แค่คล้ายๆ ไม่เหมือน
17. Timelines
การใช้ Timelines ในหัวข้อนี้จะแนะนาความสามารถอีกอย่างหนึ่งของ Dreamweaver นันก็คือ
่
การสร้างความเคลื่อนไหวบนหน้าเว็บเพจด้วย Timelines โดยจะเป็ นการเปลี่ยนตาแหน่งของ

57. ่
ออบเจ็กต์ หรื อรู ปภาพที่บรรจุอยูในเลเยอร์ ไป ยังตาแหน่งต่างๆในเว็บเพจตามช่วงเวลาที่กาหนด
ซึ่ งขั้น ตอนดังต่อไปนี้
1. เปิ ดไฟล์เว็บเพจที่ตองการจะสร้าง Timelines ขึ้นมา โดยหน้าเว็บเพจดังกล่าวจะต้องใช้เลเยอร์
้
เป็ นส่ วน ประกอบอยูดวย่ ้
2. คลิกเมนู Window > Others > Timelines จะ ปรากฏหน้าต่าง Timelines ขึ้นมา
3. คลิกรู ปภาพ โดยรู ปภาพนี้ จะต้องสร้างไว้ใน เลเยอร์
4. คลิกขวาที่เฟรม 1 ในหน้าต่าง Timelines ซึ่ งจะปรากฏเมนูคาสั่งขึ้นมา
5. คลิกเลือกเมนู Add Object จะแสดงแถบ ภาพเคลื่อนไหวขึ้นมา
6. คลิกเฟรมสุ ดท้าย ในที่น้ ีคือ เฟรมที่ 15
7. ลากเส้น Timelines ไปที่เฟรมสุ ดท้าย ใน ตัวอย่างลากไปจนถึงเฟรมที่ 50
8. ลากเลเยอร์รูปภาพไปยังตาแหน่งสุ ดท้ายที่ตองการให้แสดงผล
้

58. จากนั้นจะสังเกตเห็นว่า มีเส้นลากจากตาแหน่ง แรกของเลเยอร์ รูปภาพไปยังตาแหน่งสุ ดท้ายที่
กาหนด
ต่อไปเราจะกาหนดทิศทางการเคลื่อนไหว เฉพาะช่วงระหว่างเฟรมที่ 20 กับ เฟรมที่ 35
9. คลิกขวาเฟรมที่ 20 จะปรากฏเมนูคาสั่งขึ้นมา
10. คลิกเลือกเมนู Add Keyframe
11. ลากเลเยอร์รูปภาพไปยังตาแหน่งที่ตองการ
้

59. 12. คลิกขวาเฟรมที่ 35 จะปรากฏเมนูคาสั่งขึ้นมา
13. คลิกเลือกคาสั่ง Add Keyframe
14. ลากเลเยอร์ รูปภาพไปยังตาแหน่งที่ตองการ
้

60. ่
โดยจะเห็นได้วา มีแนวเส้นของการเคลื่อนไหว แสดงขึ้นมาระหว่างเฟรมที่ 20-35 ตามที่กาหนด
15. คลิกช่อง Autoplay ให้มีเครื่ องหมายถูกแสดง ที่หน้าช่อง เพื่อกาหนดให้แสดงการเคลื่อนไหว
โดยอัตโนมัติ
16. คลิก Loop ให้มีเครื่ องหมายถูกปรากฏที่หน้าช่อง เพื่อกาหนดให้แสดงภาพเคลื่อนไหวแบบวน
ไปเรื่ อยๆ
่
17. กดปุ่ ม <F 12 > ที่คียบอร์ ด เพื่อดูผลลัพธ์ผานทางบราวเซอร์
์

61. เอกสารอ้างอิง
(ออนไลน์).แหล่งที่มา : http://www.ptcn.ac.th/wandee/Text/page3.html.(วันที่คนข้อมูล :
้
5ธันวาคม 2554) .
พิมลพรรณ วิทยานุกล.Behaviors.(ออนไลน์).แหล่งที่มา
ู
:http://161.200.184.9/webelarning/elearning2_2550/Dreamweaver/__5.html .(วันที่คนข้อมูล : 11
้
ธันวาคม 2554).
Siamebook.การใช้งาน Insert ใน Dreamweaver.(ออนไลน์).แหล่งที่มา :
http://www.thaigoodview.com/library/contest2551/tech03/38/Sirindhorn/Images/lesson5.swf.(
วันที่คนข้อมูล : 12 ธันวาคม 2554).
้
(ออนไลน์).แหล่งที่มา :
http://help.adobe.com/en_US/dreamweaver/cs/using/WS8599BC5C-3E44-406c-9288-
C3B3BBEB5E88.html.(วันที่คนข้อมูล : 28 ธันวาคม 2554).
้