More Related Content More from Tolaha Diri (6) 3. การติดตั้งโปรแกรม Dreamweaver
MX
เตรียมการติดตั้งโปรแกรม
1. เตรียมโปรแกรม Macromedia Dreamweaver MX
2. เตรียมโปรแกรม Dreamweaver MX Thai addo
ขั้นตอนการติดตั้งโปรแกรม
1. นำาแผ่น CD โปรแกรม Macromedia Dreamweaver
MX ใสที่่ไดรว์ CD-ROM
2. ดับเบิ้ลคลิกไอคอน My Computer
3. ดับเบิ้ลคลิกไดรว์ CD-ROM
4. ดับเบิ้ลคลิกโฟลเดอร์ Macromedia Dreamweaver MX
5. ดับเบิ้ลคลิกไอคอน คือ Dreamweaver MX
Installer.exe
6. จะปรากฏหน้าต่าง Welcome to the InstallShield
Wizard for Dreamweaver MX
7. จะปรากฏหน้าต่างแสดงรายละเอียดเกี่ยวกับลิขสิทธิ์ของ
4. 9. จะแสดงโฟลเดอร์สำาหรับจัดเก็บโปรแกรม คลิกปุ่ม
Next
10. เลือกชนิดของไฟล์ที่จะใช้ร่วมกับ
Dreamweaver แล้วคลิกปุ่ม Next
11. หน้าต่างนโี้ปรแกรมพร้อมทจี่ะทำาการติดตั้ง ให้
คลิกปุ่ม Next
12. เริ่มทำาการติดตั้งโปรแกรม Dreamweaver รอ
ใหโ้ปรแกรมติดตั้งจนครบ 100%
13. เมอื่ติดตั้งเสร็จเรียบร้อย ให้คลิกปุ่ม Finish
5. การติดตั้งภาษาไทย Dreamweaver MX Thai addo
1. ดับเบิ้ลคลิกโฟลเดอร์
2. ดับเบิ้ลคลิกไอคอน
3. คลิกปุ่ม Next
4. คลิกปุ่ม Next
5. โปรแกรมจะแสดงรายละเอียดทไี่ด้เลือกมา ให้คลิก
ปุ่ม Install
6. เมอื่ติดตั้งสิ้นสุด ให้คลิกปุ่ม Finish
6. การเข้าสู่โปรแกรม Dreamweaver MX
ขั้นตอนเข้าสู่โปรแกรม Dreamweaver MX
1. คลิกปุ่ม Start
2. คลิกรายการ Programs หรือ คลิก All Programs
3. คลิกรายการ Macromedia
4. คลิกโปรแกรม Macromedia Dreamweaver MX
5. ถา้เข้าโปรแกรมครั้งแรก ให้คลิกปุ่ม x (close) จะปรากฏ
โปรแกรม Macromedia Dreamweaver MX
8. ขั้นตอนการสร้างเว็บไซต์ใหม่
1. คลิกเมนู Site เลือกรายการNew Site
2. จะปรากฏหน้าต่าง ให้ตั้งชื่อเว็บไซต์
3. พิมพ์ชื่อเว็บไซต์ว่า Mysite แล้วคลิกปุ่ม Next
4. จะปรากฏหน้าต่างถามว่าต้องการใช้หรือไม่ใช้เว็บ
เซริ์ฟเวอร์จำาลองในการทดสอบใหเ้ลือกเป็น คลิก NO, I
do not want to use a sever technology. แล้ว
คลิกปุ่ม Next
5. จะปรากฏหน้าต่างใหเ้ลือกโฟลเดอร์ทตี่้องการเก็บไฟล์ต่าง
ๆ แล้วคลิกปุ่ม Next
6. จะปรากฏหน้าต่างใหเ้ลือกรูปแบบการเชื่อมต่อเซิร์ฟเวอร์
ใหค้ลิกเลือก None
7. แล้วคลิกปุ่ม Next
8. แล้วคลิกปุ่ม Done
9. ขั้นตอนการสร้างเว็บไซต์ใหม่ ด้วยป้านคำาสั่ง
Advanced
1. คลิกเมนู Site คลิกรายการ New Site
2. จะปรากฏหน้าต่าง ใหตั้้งชื่อเว็บไซต์ Site Definition for
Unnamed Site 1
3. ใหค้ลิกป้ายคำาสั่ง Advanced จะปรากฏหน้าต่าง Local
Info
4. ช่อง Category ใหค้ลิกรายการ Local Info ใหม้แีถบสี
5. Site Name ใหตั้้งชื่อเว็บไซต์ทตี่้องการ ตามตัวอย่างตั้งชื่อ
ว่า CAI
6. Local Root Folder ให้คลิกสัญลักษณ์โฟลเดอร์รูปแฟ้มสี
เหลือง เลือกโฟลเดอร์ทใี่ช้เก็บเว็บไซต์ตามตัวอย่างทไี่ดร์ฟ
c: เก็บไว้ทโี่ฟลเดอร์ Mysite แล้วคลิกทปีุ่่ม Select
7. Default Images Folder กำาหนดค่าเริ่มต้นสำาหรับ
โฟลเดอร์ทใี่ช้เก็บรูปภาพเลือก Mysite
10. การแก้ไขรายการ Site
1. คลิกเมนู Site เลือกรายการ Edit Sites
2. จะปรากฏหน้าต่าง Edit Sites
ปุ่ม New สำาหรับกำาหนดไซต์ใหม่
ปุ่ม Edit สำาหรับแก้ไขไซต์
ปุ่ม Duplicate สำาหรับคัดลอกไซต์สำารอง
ปุ่ม Remuve สำาหรับลบไซต์
ปุ่ม Done สำาหรับทำางานกับไซต์ที่ต้องการเลือก
ใช้งาน
11. การพิมพ์ข้อความบนเว็บเพจ
การพิมพ์ข้อความบนเว็บเพจด้วยโปรแกรม
Dreamweaver MX มีอยู่ด้วยกัน 3 วิธี คือ
1. พิมพ์ข้อความลงบนจอภาพ
2. พิมพ์ข้อความจากโปรแกรมอื่น เช่น โปรแกรม
Word.Excel หรือ Notepad แล้วนำาสำาเนามา
ใสที่่หน้าจอภาพการทำางานของโปรแกรม
Dreamweaver MX
3. พิมพ์ข้อความเป็นเอกสาร HTML ข้อสำาหรับผู้ใช้
ทถี่นัดภาษา HTML คลิกปุ่ม Code แล้ม
พิมพ์ข้อความลงในส่วน <body> หรือ <head>
12. การแทรกรูปภาพบนเว็บเพจ
การแทรกรูปภาพบนเว็บเพจมีผล
ทำาให้เว็บเพจดูน่าสนใจ และการนำาไฟล์รูปภาพ
ต่างๆเข้ามาใช้งานมขี้อควรพิจารณา 3 ประการ
คือ
1.ประเภทของไฟล์รูปภาพ ควรจะใช้เป็น
นามสกุล *.gif, *.jpg หรือ *.png
2.ไฟล์รูปภาพ ถ้าผ่านการใช้คำาสั่ง
Optimize ในโปรแกรม ImageRedy
ก่อนการนำามาใช้งาน จะทำาให้ภาพบน
เว็บเพจสามารถเปิดได้เร็วขึ้น
3.ควรมกีารแทรกไฟล์รูปภาพเท่าทจี่ำาเป็น
ไม่ควรใช้รูปภาพมากเกินไป
13. วิธีนำารูปภาพมาใส่ในหน้า
เว็บเพจ
1. คลิกวางเคอร์เซอร์ตำาแหน่งที่ต้องการ
2. คลิกเมนู Insert เลือกรายการ Image
3. จะปรากฏหน้าต่าง Select Image Source
4. คลิก ช่อง Look in : เลือกไดร์ฟและ
โฟลเดอร์ที่จัดเก็บไฟล์รูปภาพ
5. คลิกปุ่ม View Menu จะปรากฏเมนูย่อย เลือก
รายการ Thumbnails
6. คลิกเลือกรูปที่ต้องการ
7. คลิกปุ่ม OK จะปรากฏรูปภาพหน้าจอ
15. วิธีการใส่คำาอธิบายแสดง
ข้อความบนรูปภาพ
1. คลิกรูปภาพใหม้จีุด Handle สีดำา
2. คลิก วางเคอร์เซอร์ช่อง A1T พิมพ์คำาว่า Bugs
life
3. คลิกเมนู File เลือกรายการ Preview คลิก
รายการ iexplore หรือกดปุ่ม F12 เพื่อทดลอง
ผลงานบนเบราเซอร์ ( Internet Explorer )
16. วิธีการใส่เส้นขอบให้กับ
รูปภาพ
1. คลิกเมาส์ทรีู่ปภาพใหมี้จดุ Handle
2. คลิกวางเดอร์เซอร์ทชี่่อง Border พิมพ์เลข 6
กำาหนดขนาดของกรอบรูปภาพ
3. คลิกเมาส์ที่พื้นที่ว่างจะได้กรอบมีขนาดตาม
ต้องการ ( ตัวเลขน้อยกรอบบาง ตัวเลขมากกรอบ
หนา )
17. วิธีปรับระยะห่างของรูปภาพและ
ข้อความ
1. คลิกเมาส์ทรีู่ปภาพใหมี้จดุ Handle
2. ใส่ตัวเลขทตี่้อง Vspace เพมิ่ระยะหา่งแนวตั้ง
3. ใส่ตัวเลขทชี่่อง Hspace เพิ่มระยะหา่งแนวนอน
4. คลิกบริเวณทวี่่างของหน้าต่างทำางาน จะทำาให้
เกิดระยะห่างของภาพมากขึ้น
18. วิธีการจัดรูปภาพประกอบกับ
1ข.้อคควลาิกมเมาส์ทรีู่ปภาพ ใหม้จีุด Handle
2. คลิก ช่อง Alegn ปรากฏรายการลักษณะการจัดรูปภาพ
ประกอบกับข้อความ เลือกLeft
3. ความหมายของรายการลักษณะการจัดรูปภาพประกอบกับ
ข้อความ
- Default เป็นการจัดการกับรูปภาพแบบ
ปกติ
- Baseline จัดขอบล่างของรุปอยู่แนวเดียว
กบับรรทัดข้อความ
- Top จัดให้ขอบบนของรูปอยู่แนว
เดียวกับบรรทัดข้อความ
- Midd จัดให้ตรงกลางของรูปอยู่แนว
เดียวกับบรรทดัข้อความ
- Bottom จัดให้ขอบล่างของรูปอยู่แนวเดียวกับ
19. วิธีทำาการปรับรูปภาพให้โปร่งแสง
(Tracing Image)
1. คลิกเมาส์วางเคอร์เซอร์ที่หน้าจอการทำางาน
2. คลิกเมนู Modify เลือกรายการ Page
Properties หรือกดปุ่ม Ctrl+J
3. คลิกปุ่ม Browse ทชี่่อง Tracing Image เลือก
ไฟล์รูปภาพที่ต้องการใช้งาน
4. เลื่อน Scroll ช่อง Image Transparency ปรับ
ความโปร่ง ค่าความจางมวัOpaque ตามต้องการ
5. คลิกปุ่ม Apply ดูผลทไี่ด้บนหน้าจอการทำางาน
6. คลิกปุ่ม Ok
20. การทำา Swap Image
1. วางเคอร์เซอร์ในตำาแหน่งที่ต้องการ
2. คลิกปุ่ม เลือกรูปภาพมาวางบนหน้าต่างเว็บเพจ
3. คลิกเมนู Windows--> Behaviors
4. จะปรากฏหน้าต่าง Behaviors
5. คลิกปุ่ม
6. จะปรากฏเมนูย่อย ใหค้ลิกรายการ Swap Image
7. จะปรากฏหน้าต่าง Swap Image
8. คลิกปุ่ม Browse
9. เลือกไฟล์รูปที่ต้องการ
10.คลิกปุ่ม OK
11. คลิกปุ่ม OK
21. 1. เมอื่เสร็จจะปรากฏข้อความ
OnloadSwap Image หน้าต่าง
2. กดปุ่ม F12 หรือคลิกเมนู File -->
Preview in Browser คลิกรายการ
Iexplorer
3. จะปรากฏหน้าต่าง Internet
Explorer ภาพปกติเมื่อเลื่อนเมาส์มา
วางที่ภาพจะเปลี่ยนเป็นรูปอื่น
22. สาระสำาคัญ
• ศึกษาและปฏิบัติเกี่ยวกับการสร้าง
ตาราง ตารางเป็นส่วนสำาคัญในการสร้าง
เว็บเพจเพราะการพิมพ์งาน และควบคุม
วัตถุต่างๆ เช่น รูปภาพในเอกสารเว็บ มี
ข้อจำากดัหลายประการ เช่น การวาง
รูปภาพใหม้ขี้อความล้อมรอบ การสร้าง
เอกสารคอลัมน์ ซึ่งจะต้องอาศัยตารางเป็น
เครื่องมอืช่วยทงั้หมด
23. การสร้างตาราง
การนำาเสนอข้อมลู จำาเป็นทจี่ะต้องสร้างตารางขึ้นมาเพอื่
ใหข้้อมลูที่นำาเสนอ ดูเข้าใจง่าย
ขั้นตอนการสร้างตาราง
1. คลิกเมาส์วางเคอร์เซอร์ ตำาแหน่งทตี่้องการจะสร้างตาราง
2. คลิกปุ่ม Layout บนแถบเครื่องมอื Insert
3. คลิกปุ่ม Insert Table
4. จะปรากฏหน้าต่าง Insert Table ใหก้ำาหนดค่าต่างๆ ของ
ตาราง
- Rows จำานวนแถวของตาราง
- Columns จำานวนคอลัมน์ของตาราง
- Width ความกว้างของตารางมี 2 แบบ
Pixels หรือ Percent
- Border ความหนาของเส้นขอบตาราง
- Cell Padding ระยะห่างจากขอบข้างในของเซลล์
24. - คลิกปุ่ม OK
- จะได้ตารางสำาหรับ
การทำางาน
การปรับแต่งตาราง
1. คลิกเมาส์เสน้ขอบของตารางใหป้รากฏจดุ Handle
2. จะปรากฏหน้าต่าง Propertoes แสดงรายละเอียด
ของตารางทั้งหมด
25. การพิมพ์ข้อความลงในตาราง
1. คลิกเมาส์วางเคอร์เซอร์ที่ช่องเซลล์แรก
2. พิมพ์ข้อความตรงตำาแหน่งเคอร์เซอร์ชิองแรกว่า
กิจกรรม
3. กดปุ่ม Tab เคอร์เซอร์กระโดดมาช่องสอง พิมพ์ว่า
ระยะเวลา
4. กดปุ่ม Tab เคอร์เซอร์กระโดดมาช่องสาม พิมพ์ว่า
กิจกรรม ระยะ
จำานวนเงิน
เวลา
จำานวน
เงิน
5. ถ้าต้องการเพมิ่บรรทัดใหม่ ใหก้ดปุ่มTeb ช่องเซลล์
สุดทา้ย จะเพมิ่บรรทดัใหอั้ตโนมตัิ
27. การเลือกทั้งแถว
1. เลื่อนเมาสม์าวางทเี่ส้นขอบด้านหน้าของแถว ตัวชี้
เมาส์จะเปลี่ยนเป็นลูกศรขวาสีดำา
2. คลิกเมาส์เลือกทีละแถว หรือคลิกเลื่อนลงเพอื่
เลือกแบบหกลาายแรถเวลือกทั้งคอลัมน์
1. เลื่อนเมาสม์าวางเส้นขอบด้านบนคอลัมน์ ตัวชี้
เมาส์จะเปลี่ยนเป็นรูปลูกศรหัวลงสีดำา
2. คลิกเมาส์เลือกทีละคอลัมน์ หรือคลิกเลื่อนเมาส์
เพื่อเลือกแบบหลายคอลัมน์
31. การยกเลิกความและความสูงที่กำาหนด
1. เลือกตารางทั้งหมด
2. คลิกเมนู Modify --> Table --> Clear
Cellหรือ
3. คลิกปุ่ม Clear Column Width บนแถบ
Properties
3. คลิกเมนู Modify --> Table --> Clear Cell
การลบแถวและคอลัมน์
Height หรือ
4. คลิกปุ่ม Clear Row Heightบนแถบ
1. คลิกเลือกตารางทงั้หมด หรือเลือกเฉพาะแถว
Properties
หรือเลือกเฉพาะคอลัมน์
2. กดปุ่ม Delete
34. การเปลี่ยนพื้นหลังของตาราง
1. คลิกเลือกตารางให้มจีุด Handle
2. คลิกเลือกสีพื้นหลังทชี่่อง Bg Color จากตาราง
Properties
3. สีพื้นหลังของตารางจะเปลี่ยนแปลงตามที่เลือก
การเปลี่ยนสีเส้นขอบตาราง
1. คลิกเลือกตารางให้มจีุด Handle
2. คลิกเลือกสีขอบตารางทชี่่อง Brdr จากเครื่องมอื
Properties
3. เส้นขอบตารางจะเปลี่ยนสีตามที่เลือก
35. การรวมเซลล์และแยกเซลล์
1. คลิกเมาส์วางเคอร์เซอร์ ตำาแหน่งทตี่้องการจะสร้าง
ตาราง
2. คลิกปุ่ม Layout บนแถบเครื่องมอื Insert
3. คลิกปุ่ม Insert Table
4. จะปรากฏหน้าต่าง Insert Table ใหก้ำาหนดค่าต่าง
ๆ ของตาราง
5. คลิกปุ่ม Ok
6. จะได้ตาราง 3 แถว 3 คอลัมน์
7. เลือกเซลล์ 1 และ 2 ใหม้แีถบสี
8. คลิกขวาเซลล์ตารางที่เลือก ปรากฏเมนูลัด คลิก
รายการTable-- > Merge Cells
36. การแยกเซลล์(Split Cells)
1. จากตารางรวมเซลล์
2. คลิกเมาส์วางเคอร์เซอร์ช่องรวมเซลล์
3. คลิกขวา ปรากฏเมนูลัด คลิกรายการ Table -- >
Splet Cell หรือคลิกปุ่ม Splet Cell
4. จะปรากฏหน้าต่าง Splet Cell ใหร้ะบุจำานวน
คอลัมน์ช่อง Nunber of Columns
5. คลิกปุ่ม OK
6. เซลล์จะแยกเป็น 2 คอลัมน์
40. การสร้างลิงก์แบบ Named Anchor
Named Anchor คือจุดอ้างอิง ใช้ในการทำาลิงก์ทมีี่
ความยาวของเอกสารมากกว่าหนึ่งหน้าจอ โดยมรีายระ
เอียดและขั้นตอนดังนี้
1. คลิกเมาส์ที่ตำาแหน่งต้นทาง(อาจจะเป็นตำาแหน่งด้านบนสุด
ของเอกสาร)
2. คลิกทเี่ครื่องมอื Name Anchor ทแี่ถบเครื่องมอื Insert
3. จะปรากฏหน้าต่าง Named Anchor ใหพิ้มพ์ชื่อ เพอื่
ระบุตำาแหน่งต้นทาง(ในทนีี่้ตั้งชื่อ top)
4. คลิกปุ่มok
5. จะปรากฏเครื่องมือที่ต้นทาง
6. ใหเ้ลื่อนเมาส์ไปยังตำาแหน่งล่างสุด ทำาการเลือกข้อความ
หรือรูปภาพ(ในทเี่ลือกข้อความ Go to topแล้วพิมพ์
#top) (จะต้องมีเครื่องหมาย # นำาหน้าข้อความเสมอ)
7. ทดลองแสดงผลการรันโปรแกรม จะเหน็ว่าเมอื่เลื่อนเมาส์
ผ่าน Go to top เมาส์จะเปลี่ยนเป็นรูปมอื และเมอื่ทำาการ
คลิกก็จะลิงก์ไปยังด้านบนของเอกสารตามที่อยู่ที่ต้นทาง
41. การสร้างลิงก์แบบ Image Map
การสร้างลิงก์แบบ Image Map คือการใช้
รูปภาพในส่วนต่าง ๆ เป็นจุดในการเชื่อมโยงไปยัง
ปลายทาง โดยมขีั้นตอนในการปฏบิัติดังนี้
1. คลิกบริเวณรูปภาพทตี่้องการ ใหม้จีุด Handle
2. ให้กระทำาดังต่อไปนี้บนแถบเครื่องมือproperties
- Map
- คลิกเลือกรูปแบบของพนื้ทจีุ่ดลิงก์ มสีเี่หลี่ยม
วงกลม รูปอิสระ
1. ลากเมาส์ที่รูปให้ได้ขนาดตามที่ต้องการ
2. กำาหนดไฟล์หรือจุดลิงก์ลงในช่อง
3. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in
Browseriexplorer หรือกดปุ่ม F12
42. การสร้างลิงก์ไปยัง E-mail
การสร้างลิงก์ไปยัง E-mail สามารถทำาได้ทงั้
แบบรูปภาพ และแบบข้อความโดยมขีั้นตอนดังนี้
คือ
1. คลิกเมาสท์ี่ข้อความใหม้แีถบสี หรือคลิกเมาส์ที่
รูปภาพให้มีจุดhandle
2. พิมพ์ mailto: ชื่ออีเมล์ลงในช่อง Link
3. คลิกพื้นที่ว่าง
4. ทดสอบผลลัพธ์ คลิกเมนู
FilePreviewiexplorer หรือกดปุ่ม F12
43. การสร้างลิงก์ ไปยังเว็บไซต์อื่น
การสร้างลิงก์ไปยังเว็บไซต์อื่น สามารถทำาได้
ทั้งแบบรูปภาพและแบบข้อความเช่นเดียวกับการ
สร้างลิงกไ์ปยัง E-mail โดยมขีั้นตอนดังนี้
1. เลือกข้อความหรือคลิกเมาส์ทรีู่ปภาพให้มจีุด
Handle
2. พิมพ์ชื่อ URL http:// ชื่อเว็บไซต์ลงในช่อง Link
และเลือกรูปภาพปลายทางเช่น www.moe.go.th
3. คลิกเมาส์พื้นที่ว่าง
4. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in
Browseriexplorerหรือกดปุ่ม F12
44. การสร้างลิงก์แบบ Rollover Image
การสร้างลิงกแ์บบ Rollover Image คือการทำา
เทคนิคภาพบนเว็บเพจ ให้ดูแปลกตา ภาพจะแสดงผล
เปลี่ยนไปเมอื่ลากเมาส์ผ่าน (ต้องมี2 ภาพที่มขีนาดเทา่ ๆ
กันให้ภาพหนึ่งเป็นภาพปกติและอีกภาพหนึ่งถูกเรียกขึ้นมา
แทนเมื่อลากเมาส์ผ่าน)
1. คลิกเมาส์วางเคอร์เซอร์ตำาแหน่งที่ต้องการ
2. คลิกปุ่ม Rollover Image
3. จะปรากฏหน้าต่าง Insert Rollover Image
4. ใหก้ำาหนดค่าตัวเลือกไฟล์รูปภาพทตี่้องการ ดังนี้
- Original Image: ภาพต้นฉบับ สำาหรับแสดงเป็นภาพ
ปกติ
- Rollover Image: ภาพที่ใช้สลับขึ้นมาเมื่อลากเมาส์
ผ่าน
- Alternate Text: ข้อความอธิบายภาพที่แสดงขึ้นมาใน
กรณีนำาเมาส์ลากผ่าน
47. รูปแบบของเฟรม
• เฟรมจะมอียดู่้วยกนั 2 รูปแบบ คือ
เฟรมหลัก (Frameset)และเฟรม
ย่อย(Frame) เฟรมหลัก (Frameset)
คือ หน้าต่างเฟรมทใี่หญ่ทสีุ่ด ที่คอย
ควบคุมเฟรมย่อยอื่น ๆ อีกทีหนึ่งและ
กำาหนดลักษณะการแบ่งเฟรมในแนวตั้ง
และแนวนอน ทั้งยังกำาหนดขนาดของ
ขอบ สี รวมถึงระยะห่างระหว่างเฟรมได้
อีกด้วยเฟรมย่อย (Frame) คือหน้าต่าง
เฟรมทกี่ำาหนดชื่อของแต่ละเฟรม และ
48. การออกแบบเฟรม
1. คลิกทแี่ทบ็คำาสั่ง Frames บนแถบเครื่องมอื
Insert
2. คลิกปุ่ม Left and Nested Top Frames จะ
ปรากฏหน้าต่างเฟรมแบบสามส่วนตามที่เลือก
- คอลัมน์แรกจะแสดงเมนู
- คอลัมน์ทสี่อง แถวแรกจะแสดงหวัเรื่องเว็บเพจ
- คอลัมน์ทสี่าม ส่วนล่าง จะแสดงเนอื้หา
1. ในกรณีทคี่ลิกปุ่ม Top and Nested Left Frames
- แถวแรกจะแสดงหัวเรื่องเว็บเพจ
- แถวทสี่อง ซา้ยมอืแสดงเมนู
- แถวทสี่าม สว่นขวามอืแสดงเนื้อหา
49. ลักษณะต่าง ๆ ของเฟรม
1. Left Frame แบ่งเป็นสองส่วนแนวตั้ง ด้านซา้ยแสดงเมนู
ด้านขวา แสดงเนอื้หา
2. Right Frame แบ่งสองสว่นแนวตั้ง ด้านซ้ายแสดงเนื้อหา
ด้านขวาแสดงเมนู
3. Top Frame แบ่งสองส่วนแนวนอน ด้านบนแสดงเมนู
ด้านล่างแสดงเนื้อหา
4. Bottom Frame แบ่งสองส่วนแนวนอน ด้านบนแสดง
เนอื้หา ด้านล่างแสดงเมนู
5. Bottom and Nested Left Frame แบ่งสามส่วน ด้าน
ซ้าย ด้านขวา และด้านล่าง
6. Bottom and Nested Right Frame แบ่งสามสว่น ด้าน
ซ้าย ด้านขวา และด้านล่าง
7. Left and Nested Bottom Frame แบ่งสามส่วน ด้าน
ซ้าย ด้านขวา และด้านล่าง
8. Right and Nested Bottom Frame แบ่งสามสว่น ด้าน
ซ้าย ด้านขวา และด้านล่าง
50. การกำาหนดคุณสมบัติของเฟรม
การแบ่งหน้าจอการทำางานเป็นลักษณะเฟรม ควรจะ
กำาหนดคุณสมบัติต่าง ๆ ของเฟรมดังนี้
1. เลื่อนเมาสว์างทเี่ส้นแบ่งเฟรม จะปรากฏลูกศร 2 หวั ให้
คลิกที่เส้นแบ่งเฟรม
2. จะปรากฏหน้าต่าง Frame Properties ด้านล่าง
3. การกำาหนดคุณสมบัติของเฟรมมีดังนี้
- Bprders ให้เส้นเฟรมแรเงาหรือไม่
- Border color สีของขอบเฟรม
- Border Width ขนาดของเส้นเฟรม
- Row ความกว้างของเฟรม
1. คลิกที่เส้นแบ่งเฟรม
2. ใหค้ลิก ช่อง Border เลือก Yes
3. ใหค้ลิก ช่องBorder color เลือกสีของเฟรม
4. พิมพ์ช่อง Border Width 5
5. พิมพ์ช่อง Row 100 กำาหนดความกว้างของเฟรม
55. การบันทึกเฟรม
การสร้างเฟรมจะต้องมีการบันทึก(Save)ชื่อของ
แต่ละเฟรม ทงั้เฟรมหลักและเฟรมย่อยใหเ้หมอืนกบั
การบันทกึหน้าของเว็บเพจทวั่ไป การบันทึกเฟรมมี
ขั้นตอนดังนี้คือ
1. คลิกเมาส์วางเคอร์เซอร์ที่พื้นที่เฟรมที่จะบันทึก
2. คลิกเมนู Fileคลิกรายการ Save Frame As…
หรือกดปุ่ม Ctrl+Shift+S
3. เลือกสถานทเี่ก็บไฟล์ ช่องSave in:
4. พิมพ์ชื่อในช่อง File name: แล้วคลิกปุ่ม Save
58. การสร้างแบบฟอร์ม
1. คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างทำางาน
2. คลิกเลือกแทบ็ Froms จากแถบเครื่องมอื
Insert
3. คลิกปุ่ม Froms เพื่อเปลี่ยนการทำางานใน
ลักษณะแบบฟอร์ม
4. จะได้ตารางเส้นประสีแดงปรากฏบนพื้นที่การ
ทำางาน
5. ใหก้ดปุ่ม Enter เพื่อขึ้นบรรทดัใหม่ หรือขยาย
ช่องตารางเส้นปะสีแดง
6. กดปุ่ม Backspace เพอื่ลดขนาดของช่อง
ตารางเส้นประสีแดง
7. ทดลองพิมพ์ข้อความ และทำาการปรับแต่งด้วย
59. การสร้าง Text Field สำาหรับกรอกข้อความ
1. คลิกวางเคอร์เซอร์ตำาแหน่งที่จะทำา Text Field
2. คลิกปุ่ม Text Field จะปรากฏกรอบเส้นประ
Text Field สำาหรับการกรอกข้อความตรง
ตำาแหน่งเคอร์เซอร์
3. คลิกเมาสว์างเคอร์เซอร์ช่อง Char Width
กำาหนดความยาวของฟิลด์ =30
4. คลิกเมาสว์างเคอร์เซอร์ช่อง Max Chars
กำาหนดจำานวนตัวอักษรสูงสุด =50
60. การสร้างปุ่ม Radio Button
1. พิมพ์ข้อความ เพศ ชาย หญงิ
2. คลิกวางเคอร์เซอร์ตำาแหน่งที่จะทำา Radio Button
3. คลิกปุ่ม เพื่อสร้างปุ่ม Radio Button ด้านหน้า
รายการ ชาย
4. คลิกวางเคอร์เวอร์ตำาแหน่งหน้าคำาว่า หญงิ
5. คลิกปุ่ม เพื่อสร้างปุ่ม Radio Button ด้านหน้า
รายการ หญิง
6. พิมพ์ข้อความว่า อายุ ปี เกิดวันที่ เดือน ปี พ.ศ.
6. คลิกเมาสว์างเคอร์ด้าหลังคำาว่า อายุ
7. คลิกปุ่ม Text Field ปรากฏกรอบเส้นประ Text
Field ตรงตำาแหน่งเคอร์เซอร์
8. คลิกเมาส์ที่กรอบให้มีเส้นประ
61. การทำาช่องกรอกแบบ Menu
1. คลิกเมาสว์างเคอร์เซอร์ด้านหลังคำาว่า เกดิวันที่1
2. คลิกปุ่ม List/Menu บนแถบเครื่องมอื Forms
3. จะปรากฏกรอบ คลิกเลือก Type Menu จะ
แสดงรายละเอียดเมอื่กดปุ่ม
4. คลิกปุ่ม List Values…บริเวณแถบเครื่องมอื
Properties
5. ใหพิ้มพ์เลขตั้งแต่ 1 แล้วคลิกปุ่ม + เพื่อเพิ่มในช่อง
Item Lable
6. ทำาเหมือนข้อ 5 จนถึงเลข 31 แล้วคลิก OK
7. จะปรากฏรายการทชี่่อง Initially Selected บน
แถบ Properties
8. คลิกเมนู File Preview in Browser
9. คลิกรายการ Iexplore หรือกดปุ่ม F12
10.คลิกปุ่ม เพื่อเลือกวันที่
จะปรากฏรายการตัวเลขให้เลือกวันที่
62. 13.คลิกเมาส์วางเคอร์เซอร์ด้านหลังคำาว่า เดือน 1
14.คลิกปุ่ม List/Menu บนแถบเครื่องมือ Forms
15. จะปรากฏกรอบ
16.คลิกเลือกวงกลม List
17.คลิกปุ่ม List Values
18.พิมพ์ชื่อเดือน มกราคม แล้วคลิกปุ่มเคื่องหมาย +
19.พิมพ์ชื่อเดือน กุมภาพันธ์ แล้วคลิกปุ่มเคื่องหมาย + ทำา
เช่นนี้จนถึงเดือนธันวาคม
20.คลิกปุ่ม Ok
21.คลิกเมนู FilePreview in Browser iexplore
22.คลิกปุ่ม เพื่อเลือกรายการที่ต้องการ
23.คลิกเมาส์วางเคอร์เซอร์ด้านหลัง ปี พ.ศ.
24.คลิกปุ่ม List/Menu บนแถบเครื่องมอื Forms
25. จะปรากฏกรอบ
26.คลิกปุ่ม คลิกปุ่ม List Values
27.ปรากฏหน้าต่าง List Values...
63. 28.พิมพ์ ปี พ.ศ. 2540 แล้วคลิกปุ่มเครื่องหมาย+
29.พิมพ์ 2541 แล้วคลิกปุ่มเครื่องหมาย+ ทำาเช่นนจี้นถงึปี
พ.ศ.2547
30.คลิกปุ่ม Ok
31.คลิกทปีุ่่ม Lise และคลิกเครื่องหมายด้านหน้า Allow
multiple
32. จะปรากฏกรอบ
33.คลิกเมนู File Preview in Browseriexplore
34. จะได้ผลลัพธ์แสดงบนจอภาพ
35.พิมพ์ข้อความ บ้านเลขที่ แล้วคลิกปุ่ม Text Field จะ
ปรากฏกรอบ
36.พิมพ์ข้อความ หมบู่้าน แล้วคลิกปุ่ม Text Field จะ
ปรากฏกรอบ
37.พิมพ์ข้อความ ถนน แล้วคลิกปุ่ม Text Field จะ
ปรากฏกรอบ
38.พิมพ์ข้อความ แขวง/ตำาบล แล้วคลิกปุ่ม Text Field จะ
64. 28.พิมพ์ข้อความ จังหวัด แล้วคลิกปุ่ม Text
Field จะปรากฏกรอบ
29.พิมพ์ข้อความ รหสัไปรษณีย์ แล้วคลิกปุ่ม
Text Field จะปรากฏกรอบ
30.พิมพ์ข้อความ เบอร์โทรศัพท์ แล้วคลิกปุ่ม
Text Field จะปรากฏกรอบ
31.พิมพ์ข้อความ มือถือ แล้วคลิกปุ่ม Text Field
จะปรากฏกรอบ
32.พิมพ์ข้อความ E-mail แล้วคลิกปุ่ม Text
Field จะปรากฏกรอบ
33.พิมพ์ข้อความ คลิกเมนู FilePreview in
Brower iexplore จะได้ผลลัพธ์
65. การทำาฟอร์มแบบ Check Box
Check Box คือ การสร้างปุ่มทใี่ช้สำาหรับ
คลิกเลือกว่าต้องการหวัข้อใดบ้าง มขีั้นตอน
ดังนี้
1. พิมพ์ข้อความทตี่้องการใช้ทำา Check Box บน
หน้าต่างทำางาน
2. คลิกขวาวางเคอร์เซอร์ด้านหน้าของหัวข้อที่
ต้องการทำา Check Box
3. คลิกปุ่ม จากเครื่องมือ Fromes
4. จะปรากฏกรอบ Check Box
5. ใหท้ำาเช่นนกีั้บทกุหวัข้อทตี่้องการทำา Check
Box
6. คลิกเมนู File Preview in
Browseriexplore
66. การทำาปุ่ม Submit และ ปุ่ม Reset
การกรอกแบบฟอร์มขั้นตอนสุดทา้ยคือ การกดปุ่ม
Submit เพื่อยอมรับการสมัครและ
กดปุ่ม Reset เพื่อยกเลิกหรือทำาการกรอกแบบฟอร์มใหม่ มขีั้น
ตอนการสร้างดังนี้
1. คลิกเมาส์วางเคอร์เซอร์ตำาแหน่งทตี่้องการสร้างปุ่ม
Submit
2. คลิกปุ่ม Botton เพื่อสร้างปุ่มสำาหรับบันทกึ
3. จะปรากฏปุ่ม Submit
4. ช่อง Label บนแถบ Properties เปลี่ยนชื่อของปุ่มจาก
Submit เป็นยอมรับ
5. คลิกเมาส์พนื้ที่การทำางาน ปุ่มจะเปลี่ยนเป็น ยอมรับ
6. คลิกเมาส์วางเคอร์เซอร์ด้านหลังของปุ่ม ยอมรับ
7. คลิกปุ่ม Button จะปรากฏปุ่ม Submit อีก 1 ปุ่ม
8. คลิกเลือกวงกลม Reset Form
9. จะปรากฏปุ่ม Reset
10. เปลี่ยนชื่อช่อง Label จาก Reset เป็นยกเลิก
68. ส่วนประกอบของเลเยอร์
1. หแูลเยอร์ มไีว้เพอื่ดึง หรือลากเลเยอร์ไปตาม
ตำาแหน่งที่ต้องการ
วิธีการสร้างเลเยอร์
2. จุดปรับขนาด มจีุดสีดำาแปดจดุใช้ในการปรับ
ขนาด ย่อ-ขยายเลเยอร์1. คลิกป้ายคำาสั่ง Layer บนแถบเครื่องมอื Insert
2. คลิกปุ่ม Draw Layer
3. ลากเมาส์สร้างเลเยอร์ให้ได้กรอบสี่เหลี่ยมขนาดตาม
ต้องการ
4. คลิกเมาส์วางเคอเซอร์ในพนื้ที่ของเลเยอร์ พิมพ์ข้อความ
หรือ นำารูปมาวางภายในเลเยอร์
5. คลิกป้ายคำาสั่ง Common
6. คลิกปุ่ม
7. คลิกเลือกรูปภาพทตี่้องการ แล้วคลิกปุ่ม ok
8. จะปรากฏรูปภาพในเลเยอร์
69. การกำาหนดค่าเลเยอร์เพิ่มเติมด้วย Properties
1. คลิดเมาส์เลเยอร์ใหม้จีุด Handle 8 จดุ
2. ใหป้รับแต่งค่าต่าง ๆ ทแี่ถบ Properties
- Layer ID คือ หมายเลขอ้างอิงเลเยอร์ เวลาเรียกใช้
เลเยอร์สามารถตั้งชื่อได้ตามชอบใจปกติโปรแกรมจะติด
ตั้งชื่อใหต้ามลำาดับว่า Layer1,2,3…
- L และ T คือการกำาหนดตำาแหน่งของเลเยอร์ ด้านซา้ย
L (Left) และด้านบน T (Top)ให้ทดลองกำาหนดตัวเลข
ในช่อง L และช่อง T
- W และ H คือ กำาหนดความกว้าง W (width) และ
ความสงู H (Height) ของเลเยอร์หน่วยวัดควรจะเป็น
พิกเซล PX (Pixel) จะช่วยให้คลาดเคลื่อนน้อยกว่าระบุ
แบบอื่นใหท้ดลองกำาหนดตังเลขในช่อง W และช่อง H
70. - Z-Index คือ Stacking Order ใช้ในการเปลี่ยน
ลำาดับเลเยอร์มีตัวเลือกต่าง ๆ เช่น
- Default โดยส่วนใหญ่ Browser จะใช้คำาว่า
inherit
- Inherit ใหใ้ช้ค่าของ Visibility ของเลเยอร์ทเี่ซ็ต
ไว้
- Visible ให้แสดงเลเยอร์
- Hidden ให้ซ่อนเลเยอร์
- Bg Image คือเลือกรูปภาพพื้นหลังของเลเยอร์เลือกที่
ไอคอนโฟลเดอร์
- Bg Color คือปรับแต่งเลือกสีพื้นหลังของเลเยอร์
- Overflow คือ ตั้งค่าแสดงเนอื้หาเลเยอร์ หรือ การตั้ง
ค่าเผื่อรูปภาพ ทมี่ขีนาดใหย๋กว่าเลเยอร์
- Clip คือ การจำากัดสว่นการแสดงผลโดยมตีำาแหน่ง L
71. การเรียกใช้งาน Layer Palette
1. คลิกเมนู Window
2. คลิกรายการ Others
3. คลิกรายการ Layer หรือกดปุ่ม F12
4. จะปรากฏหน้าต่าง Layer Palette
72. ประโยชน์ของ Layer Palette
1. ใช้ในการบอกตำาแหน่งของเลเยอร์ทำาให้ทราบได้ว่าเลเยอร์
ใดอยู่บริเวณตำาแหน่งใด
2. สามารถเปลี่ยนตัวเลขที่อยทู่างช่อง z ด้านขวาเพื่อจัดลำาดับ
เลเยอร์
3. เมื่อต้องการจะเรียกใช้เลเยอร์ใดสามารถคลิกที่ชื่อเลเยอร์
ภายในช่อง Layer Palette นั้น จะทำาให้เลเยอร์ทอี่ยู่ใน
หน้าต่างทำางานก็จะถูกเรียกไปด้วย โดยสังเกตจะปรากฏ
จุด Handle
4. คลิกเมาส์ทเี่ลเยอร์ 1 แล้วคลิกปุ่ม Ctrl ค้างไว้ ลากไปไว้
ในเลเยอร์ 2 จะทำาใหเ้ลเยอร์ซ้อนกนั
5. ถ้าคลิกสญัญลักษณ์รูปดวงตา ใช้ในการกำาหนดว่าจะแสดง
หรือไม่แสดงเลเยอร์
6. สามารถป้องกันการซอ้นทับของเลเยอร์ โดยคลิก
เครื่องหมาย หน้าคำาว่าPrevent Overlaps
73. การจัดวางเลเยอร์ด้วยกริด (Grid)
Grid คือ การตีตารางเป็นช่อง ๆ คล้ายกับกระดาษกราฟมี
ประโยชน์คือ ช่วยใหส้ามารถจักวางและกะระยะได้แมน่ยำา
มากขึ้นเมื่อนำา Grid หรือเรียกอีกอย่างหนึ่งว่าจุดกริด มา
ใช้ในการจัดวางเลเยอร์จะทำาให้การทำางานดูมีระเบียบมาก
ขึ้น
1. คลิกเมนู View
2. คลิกรายการGrid
3. คลิกรายการ Show Grid หรือกด Ctrl+Alt+Grid
4. ปรากฏเสน้ Grid บนหน้าต่างการทำางาน
5. คลิกเมนู View
6. คลิกรายการ Grid
7. คลิกรายการ Grid Settings
8. จะปรากฏหน้าต่าง Grid Settings
- Color: เลือกสีของเส้นกริด
74. - Snap to Grid: การวางเลเยอร์ใกล้เส้นกริด
- Spacing: กำาหนดขนาดของช่องกริด ถ้าตัวเลข
น้อย จะได้ตารางช่องเล็ก ตัวเลขมากจะได้ช่อง
ใหญ่
- Display: เลือกว่าจะแสดงเส้นกริดแบบใด
ระหว่าง Line คือ แบบเส้น Dote คือ แบบจุด
75. การแปลงเลเยอร์เป็นตาราง
การออกแบบเลเยอร์สามารถกำาหนดรายระเอียด และขนาด
ได้สะดวกกว่าการใช้ตารางหรือสร้างเลเยอร์ก่อนแล้วค่อย
แปลงเป็นตารางทีหลังก็ได้
1. คลิกป้าย Layour บนแถบ Insert
2. คลิกปุ่ม สร้างเลเยอร์บนหน้าต่างทำางาน
3. คลิกป้าย common
4. ปุ่ม แทรกรูปภาพในเลเยอร์
5. คลิกเมนู Modify
6. คลิกรายการ Convert
7. คลิกรายการ Layers to Table
8. ปรากฏหน้าต่างตั้งค่า Convert Layers Table
9. คลิกปุ่ม ok
10. รอสักครู่เลเยอร์จะถูกเปลี่ยนเป็นตาราง
78. การสร้างภาพเคลื่อนไหวด้วยTimelines
Timelines หรือ เส้นเวลาเป็นส่วนพิเศษทชี่่วยใหวั้ตถุ
สามารถเปลี่ยนตำาแหน่ง ขนาด หรือลักษณะการแสดงผล
แบบเคลื่อนไหวแบบออบเจ็คได้
• สร้างเลเยอร์ บนหน้าต่างการทำางาน
• คลิกปุ่มเพื่อใส่รูปภาพลงในเลเยอล์
• จะปรากฏกรอบโต้ตอบ ให้คลิกเลือกรูปภาพทตี่้องการใส่
ลงในเลเยอร์ แล้วคลิกปุ่ม ok
• จะปรากฏรูปภาพภายในเลเยอร์ ใหป้รับขนาดรูปภาพให้
เหมาะสมไม่ควรใหญ่เกินไป
• คลิกเมนู Window
• คลิกรายการ Others
• คลิกรายการTimelines
• จะปรากฏพาเนล Timelines
• คลิกเลเยอร์ให้มีจุดล้อมรอบ
• คลิกเมนู Modify Timeline Add Object to
Timeline
79. พิมพ์ชื่อเลเยอร์ ช่อง Layer ID ว่า Logo
คลิกเมาส์คีย์เฟรมจุดสุดท้ายของแถบเคลื่อนที่
15.คลิกเลื่อนเลเยอร์ไปวางยังตำาแหน่งทตี่้องการเคลื่อนที่ เช่น
เลื่อยไปวางด้านหน้าจะปรากฏเส้นการเคลื่อนที่
16.ถ้าต้องการใหเ้ส้นการเคลื่อนทเี่ป็นเส้นโค้ง ให้กดปุ่ม Ctrl
ค้างไว้
17.คลิกทเี่ฟรมตรงส่วนทตี่้องการใหโ้ค้ง เช่น ตรงกลาง ให้
คลิกเฟรม 10
18.คลิกเมนู Modify Timeline Add Keyframe
19. ให้คลิกหูดึงด้านบนเลเยอร์เพื่อเลื่อนเส้นการเคลื่อนที่ให้โค้ง
ขึ้น
20. จะได้เส้นการเคลื่อนที่โค้ง
21.คลิกปุ่ม ➨ Play ในพาเนล Timelines ค้างไว้เพื่อดุการ
เคลื่อนที่ของภาพ หรือ กำาหนด การแสดงผลบนแถบ
80. 15.ทดลองดูผลที่ได้ในเว็บบราวเซอร์ กดปุ่ม F12
หรือคลิกเมนู FilePreview in Browser
คลิกรายการ iexporer
16.ปรากฏหน้าต่าง Internet explorer การ
เคลื่อนที่ของรูปภาพ
17. ให้คลิกเคลื่องหมาย √หน้าสี่เหลี่ยม Loop
กำาหนดให้แสดงแบบวนรอบ
18. ให้กดปุ่ม F12 เพื่อดูผลที่ได้ในเว็บบราวเซอร์อีก
ครั้ง จะวนรอบไปเรื่อย ๆ
81. การเคลื่อนที่แบบอิสระ
1. สร้างเลเยอร์ บนหน้าต่างการทำางาน
2. คลิกปุ่ม ใสรู่ปภาพลงในเลเยอร์
3. จะปรากฏหน้าต่างให้คลิกเลือกรูปภาพที่ต้องการ
ใสล่งในเลเยอร์ แล้วคลิกปุ่ม ok
4. จะปรากฏรูปภาพลงในเลเยอร์ ใหป้รับขนาดของ
รูปภาพให้เหมาะสมแล้วคลิกให้มีจุดล้อมรอบ
5. คลิกเมนู ModifyTimelineRecord Path
of Layer
6. คลิกหูเลเยอร์ลากไปทางซ้ายตามเส้นทางที่
ต้องการเคลื่อนที่
7. ปรากฏหน้าต่าง Dreamweaver คลิกปุ่ม ok
8. คลิกปุ่ม Play ค้างไว้เพอื่ดูการเคลื่อนทขี่องภาพ
9. ทดลองดูผลที่ได้ในเว็บบรางเซอร์ กดปุ่ม F12
82. การเคลื่อนที่พร้อมกันหลายเลเยอร์
1. สร้างเลเยอร์บนหน้าต่างการทำางาน 2 เลเยอร์
2. เลเยอร์แรกใหพิ้มพ์ข้อความ เลเยอร์ที่สองใหใ้ส่
รูปภาพ
3. คลิกเลเยอร์แรกให้มีจุดล้อมรอบ
4. คลิกเมนู Modify Timeline Add
Object to Timeline
5. คลิกเลเยอร์ที่สองให้มีจุดล้อมรอบ
6. คลิกเมนู Modify Timeline Add
Object to Timeline
7. คลิกเมาส์เฟรมจดุสุดทา้ยของแถบเคลื่อนที่ Text
8. คลิกลากหูเลเยอร์ของข้อความเลื่อนไปทางขวา
9. คลิกเมาส์คีเฟรมจุดสุดท้ายของแถบเคลื่อนที่
Logo
83. การปรับตำาแหน่งคีย์เฟรม
1. ลากคีย์เฟรมสุดท้ายเลื่อนไปยังตำาแหน่งที่ต้องการ
2. กดปุ่ม Alt ค้างไว้ถ้าต้องการเลื่อนคีย์เฟรมบาง
ตำาแหน่ง
การเปลี่ยนจุดเวลาเริ่มต้นของการเคลื่อนที่
1. เลือกแถบการเคลื่อนทที่ตี่้องการ หรือกดปุ่ม
Shift ถ้าต้องการเลือกหลาย ๆ แถบ
2. ลากแถบการเคลื่อนที่ไปทางขวาเพื่อเปลี่ยนจุดเริ่ม
ต้น
การเพิ่ม/ลบเฟรมในเส้นเวลา
1. คลิกขวาทตี่ำาแหน่งเฟรม จะปรากกเมนูลัด ให้
เลือกใหเ้ลือก Add Frame เพิ่มเฟรมหรือ
Remove Frame ลบเฟรม
2. คลิกเมนู Modify Timeline Add Frame
เพิ่มเฟรมหรือ
84. การเพิ่มเส้นเวลา
1. คลิกเมนู ModifyTimeline Add
Timeline
การเรียกใช้เส้นเวลา
1. เลือกชื่อเส้นเวลาจากพาเนล Timelines
การเปลี่ยนชื่อเส้นเวลา
86. การนำาไฟล์ Flash มาแสดงในหน้าเว็บเพจ
Flash เป็นโปรแกรมสร้างสรรค์ประเภท ซงึ่อยคู่่ายเดียว
กับ Dreamweaver โดย Flash สามารถใช้ออกแบบผล
งานทั่วไป และผลงานทแี่สดง Browser ได้
สำาหรับผลงานทจี่ะนำามาใชใ้นการทำาเว็บเพจ แสดงผล
ทาง Browser ได้นั้น จะต้องเป็ยไฟล์สกุล. Swf (Flash
Movie) เทา่นนั้เพราะฉะนนั้ต้องมไีฟล์สกุล .swf ก่อนจึง
จะทำาตามขั้นตอนนี้ได้
1. วางเคอร์เวอร์บนพื้นที่หน้าต่างการทำางาน
2. คลิกปุ่มแทรก Flash หรือเมนู Insert เลือกรายการ
Media Flash
3. คลิกเลือกไฟล์ Flash ทจี่ะนำามาใช้งาน
4. คลิก ok
5. รอสกัครู่จะแสดงที่ตั้งของไฟล์ Flash
6. ทดสอบการแสดงผลทาง Browser โดยกดปุ่ม F12
87. วิธีสร้างปุ่มกดด้วย Flash Button
1. วางเคอร์เซอร์บนพื้นที่การทำางาน
2. คลิกเมนู InsertInteractive
ImagesFlash Button
3. จะปรากฏหน้าต่างเตือนให้บันทึกไฟล์ก่อนใช้งาน
ไฟล์ Flash Button
4. จะปรากกหน้าต่าง Insert Flash Buton ขึ้นมา
ให้เลือกแบบปุ่มที่ต้องการ
5. จะได้ปุ่ม Flash ตามทเี่ลือก
6. คลิกสัญลักษณ์ให้มีจุดล้อมรอบ
7. ปรับตำาแหน่งและขนาดของ Flash Button ที่
แถบพาเนล Properties
6. คลิกเมนู FilePreview in
Browseriexplore
88. การสร้างข้อความจุดเชื่อมโยงด้วย Flash Text
Flash text เป็นส่วนที่ใช้ในการสร้างจุดเชื่อม
โยงไปยังตำาแหน่งต่าง ๆ เมื่อผู้ชมคลิกทบี่ริเวณ
ข้อความเชื่อมโยงไปยังตำาแหน่งที่กำาหนดได้
• คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างการทำางาน
• คลิกเมนู InsertInteractive
ImagesFlash Text
• ปรากฏหน้าต่าง Insert Flash Text กำาหนดค่า
ต่าง ๆ
• คลิกปุ่ม Ok จะปรากฏออบเจ็กทข์อง Flash text
• กดปุ่ม F12 ดูผลบนเว็บบราวเซอร์
89. การใส่ Shockwave movie,ActiveX control,Java
applet
1. คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างทำางาน
2. คลิกเมนู InsertMediaShockwave หรือ
ActiveX หรือ Java Applet หรือเลือกจากแทบ็
Media
3. เลือกไฟล์ที่ต้องการ
4. คลิก ok
90. การใส่ไฟล์เสียงลงในเว็บเพจ
การใส่ไฟล์เสียงที่สามารถนำามาใช้ได้จะมีอยู่
ด้วยกันหลายชนิด ซึ่งตาละชนิดก็จะมขี้อดีข้อ
เสียในการนำามาใช้ในเว็บเพจต่างกัน อีกทั้งยัง
ต้องการโปรแกรมเสริม (Plug-in) ในการแสดง
ผลที่ต่างกัน
ขั้นตอนการใส่ไฟล์เสียงลงในเว็บเพจ
1. คลิกเมาส์วางเคอรืเซอร์บนหน้าต่างการทำางาน
ตำาแหน่งที่ต้องการ
2. คลิกเมนู Insert MediaPlugin หรือคลิกปุ่ม
3. จะปรากฏไฟล์เสียง
4. คลิกปุ่ม ok
5. จะปรากกสัญลัษณ์การใส่ไฟล์เสียง
6. กดปุ่ม F12 หรือ คลิกเมนู FilePreview in
Browser iexplorer
92. โครงสร้างของ CSS
รูปแบบโครงสร้างของ Style Sheets ของ CSS
จะใช้แท็ก <STYLE> ในการกำาหนดคุณลักษณะ
ของเว็บเพจ เช่น รูปแบบตัวอักษร ขนาด สี ซึ่ง
สามารถกำาหนดใหเ้ชื่อมโยงไปยังเว็บเพจ หรือสร้าง
จุดเชื่อมโยงไปยังไฟล์ *.CSS ที่เก็บรูปแบบ CSS
ไว่ได้ โครงสร้างของ CSS มรีูปแบบดังนี้
การเปิดหน้าต่าง CSS Styles Sheets
1. คลิกเมนู window
2. เลือกรายการ CSS Styles
3. จะแสดงหน้าต่าง CSS Styles
93. การสร้าง CSS Style Sheetsใหม่
1. คลิกทปีุ่่มในหน้าต่าง Desing ป้ายคำาสั่ง CSS
Style
2. จะปรากฏหน้าต่าง New CSS Style
3. ใหก้ำาหนดรายละเอียด ช่อง Name: ตั้งชื่อใหกั้บ
Style ตามต้องการ
4. กำาหนดชนิดของ CSS ช่อง Type: Make
Custom Style (Class) กำาหนดรูปแบบเอง
Redefine HTML Tag CSS Tag
HTML
Use CSS Selector
1. คลิก ช่อง Define In: กำาหนดทเี่ก็บ CSS
Style Sheet ต้องการเลือกเก็บไว้ที่ใด
เลือก New Style Sheet File ใหอ้อกแบบ
94. 1. คลิกปุ่ม Ok
2. ปรากฏหน้าต่าง Save Style Sheet File
As
3. เลือกโฟลเดอร์ที่เก็บไฟล์และตั้งชื่อไฟล์
4. คลิกปุ่ม Save
5. ปรากฏหน้าต่าง CSS Style Sheet File
As
95. 11.คลิก Font เลือกแบบตัวอักษร
12.คลิก Suze กำาหนดขนาดตัวอักษร
13.คลิก Style กำาหนดลักษณะตัวอักษร
14.คลิก Line Height กำาหนดความยางของเส้น
15.คลิกเครื่องหมาย √Decoration เลือกค่าที่
ต้องการปรับแต่ง ภายในกรอบสี่เหลี่ยม
16.คลิก Weight เลือกนำ้าหนัก
17.คลิก Variant เลือกรูปแบบปกติหรือ
เปลี่ยนแปลง
18.คลิก Case เลือกรูปแบบของตัวอักษร
19.คลิก Color เลือกสีของตัวอักษร
20.คลิกปุ่ม Ok
21.จะได้ไฟล์ CSS ทอี่อกแบบไว้แสดงอยู่ที่ CSS
Style Panel
96. การเปิดใช้งาน CSS Style Sheets
1. เลือกข้อความที่ต้องการจัดรูปแบบให้มีแถบสี
2. คลิกเมาส์ที่ Style ทตี่้องการกำาหนดรูปแบบ ให้
หน้าต่าง CSS Style
3. จะได้ผลลัพธ์ตามต้องการ
4. การดูไฟล์ทบีั่นทกึไว้ ดับเบิ้ลคลิกไฟล์ .CSS เพื่อดู
โค้ด จะปรากฏป้ายแถบ Style ทแี่ถบด้านล่างจะ
ปรากฏ Code บนหน้าต่างทำางาน
97. การแก้ไข CSS Style Sheets
1. คลิก Edit Style ใหม้จีุดสีดำา
2. ดับเบิ้ลคลิกชื่อไฟล์ CSS คลิกขวาทชีื่่อไฟล์ CSS
จะปรากฏเมนูลัด
3. คลิกรายการ Edit
4. จะปรากฏหน้าต่าง CSS Style Definition For
.unnamed 1
5. แก้ไขรายการต่าง ๆ แล้วคลิก Ok
98. การเปิดใช้งาน CSS Style Sheets สำาเร็จรูป
1. คลิกเมนู Fine
2. คลิกรายการ New
3. ปรากฏหน้าต่าง New Document
4. คลิกรายการ CSS Style Sheets ใหม้แีถบสี
5. ด้านขวาแสดงรายชื่อไฟล์ ใหเ้ลือก Style ที่
ต้องการ ดูตัวอย่างในช่อง Preview
6. คลิกปุ่ม Create
99. การจัดเมนูด้วย
HTML Style ใช้สำาหรับสร้างรูปแบบตัวอักษร
ใหกั้บข้อความทเี่ลือกหรือย่อหน้านนั้ ๆโดยจะ
กำาหนด Attribute ใหกั้บตัวอักษร จะทำาให้
สามารถสร้างข้อความได้รวดเร็วและง่ายขึ้น
การสร้าง HTML Style
1. คลิกปุ่ม ป้าย HTML Style
2. ปรากฏหน้าต่าง Define HTML Style
3. ตั้งชื่อช่อง Name: Hstyle 1
4. Apply to: เลือกแบบ Selection
5. Font: กำาหนดรูปแบบตัวอักษรเลือก Abgsana
UPC
กำาหนดขนาดของตัวอักษร เลือก 100. การสร้าง HTML Style แบบ Paragraph
1. คลิกปุ่มป้าย HTML Style
2. ปรากฏหน้าต่าง Define HTML Style
3. ตั้งชื่อช่อง Name: Hpragraph
4. Apply To: เลือกแบบ Paragraph
5. Font: กำาหนดรูปแบบตัวอักษรเลือก Angsana
UPC
6. Size: กำาหนดขนาดของตัวอักษร เลือก 4
7. Color: กำาหนดสีของตัวอักษร สีนำ้าเงิน
8. Style: กำาหนดลักษณะตัวอักษรเลือก B ตัวหนา
9. คลิกปุ่ม Ok
10.จะได้ไฟล์ Hparagraph 1
101. การเปิดใช้งาน HTML Style
ก่อนใช้งาน HTML Style ใหสั้งเกต
สญัลักษณ์ของ HTML Style
- สญัลักษณ์ แสดงว่าเป็นการกำาหนดแบบ
Selection
- สญัลักษณ์ แสดงว่าเป็นการกำาหนดแบบ
1. เลือกข้อความใหม้แีถบสี กรณีใช้แบบ Selection
2. คลิกไฟล์ HStyle 1
3. สงัเกตผลที่ได้บนหน้าจอภาพ จะเปลี่ยนไปตาม
รูปแบบที่กำาหนดไว้
3. คลิกเมาสวางเคอร์เซอร์ที่ข้อความบรรทัดใดก็ได้
4. คลิกเมาสไ์ฟล์ Hparagraph 1
5. สงัเกตผลที่ได้บนหน้าจอภาพ จะเปลี่ยนไปตาม
รูปแบบที่กำาหนดไว้
102. การยกเลิกรูปแบบ HTML Style
1. คลิกเลือกข้อความที่ต้องการยกเลิกรูปแบบให้มี
แถบสี
2. คลิก ไฟล์ทปี่้าย HTML Style มรีูปแบบการ
ยกเลิก 2 รายการ คือ
- Clear Selection Style เพื่อลบรูปแบบของ
ข้อความแบบตัวเลือกที่กำาหนดไว้
- Clear Paragraph Style เพื่อลบรูปแบบ
ของย่อหน้าที่กำาหนดไว้
3. ให้คลิกเลือกรายการที่ต้องการใช้งาน
4. สังเกตดูผลลัพธ์บนจอภาพ
103. การแก้ไข HTML Style
1. ดับเบิ้ลคลิกชื่อไฟล์ HTML Style จะปรากฏ
หน้าต่างตัวเลือกให้แก้ไข
2. ใหแ้ก้ไขรูปแบบทตี่้องการเปลี่ยนแปลงใหม่ เช่น
เปลี่ยนขนาดตัวอักษรเป็น 6
3. เปลี่ยนช่อง Color : เป็นสเีขียว
4. คลิกปุ่ม Ok
5. ทดลองคลิกชื่อไฟล์ Hparagraph 1 ใหม่อีกครั้ง
เพื่อดูผลที่ได้บนหน้าจอภาพ
104. การใช้ Behaviors
Behaviors เป็นการเพมิ่สีสัน หรือเพิ่มลูกเล่นต่าง ๆ ให้
กับเอกสารเว็บเพจ เช่นการทำาภาพเคลื่อนไหว หรือตอบ
สนองต่าง ๆ ตามที่ผู้ใช้ต้องการ การใช้ Behaviors ใน
Macromedia Dreamweaver MX นั้น เป็นการสร้าง จา
วาสคลิปต์ในรูปแบบของคำาสั่งสคลิปต์
< Script Language = “ JavaScript” >
การสร้างเมนูย่อย Popup Menu
Popup Menu เป็นเครื่องมือที่ใช้กันอยู่ทั่วไปตามเว็บไซต์
ต่าง ๆ ช่วยให้สะดวกในการค้นหาข้อมลูบนเว็บ โปรแกรม
Dreamweaver MX มีความสามารถในสร้างเมนูย่อยได้
สะดวกและง่าย
ขั้นตอนการสร้างเมนุย่อย Popup Manu
1. สร้างตาราง 1 Rows 3 Columns บนจอภาพ
2. พิมพ์ข้อความหัวข้อเมนู
3. เลือกข้อความช่อง ดาวโหลด ใหม้แีถบสีดำาคลุม
4. คลิก Browse for File ช่อง Link
คลิกเลือกไฟลื ลิงค์ทตี่้องการกำาหนด
105. 1. คลิกปุ่ม Ok
2. ปรากฏชอื่ไฟล์ทตี่้องการเชื่อมโยง ช่อง Link
3. คลิกทปีุ่่ม ของหน้าต่าง Behavior
4. คลิกรายการ Show Pop-Up Menu
5. ปรากฏหน้าตา่ง Show Pop-Up Menu
11.พิมพ์ข้อความช่อง Text: Programs
12.คลิก ข้อความช่อง Target : เลือก _blank
13.คลิก ช่อง Link : เลือกเว็บเพจทตี่้องการ
กำาหนด
14.คลิกเมนู จะเพิ่มรายการแสดงด้านล่าง
106. 11.คลิกป้าย Appearance เพอื่กำาหนดลักษณะรูป
แบบของ Pop – Up Menu
12.ช่อง Vertical Menu คลิก เลือกรูปแบบแนว
ตั้งหรือแนวนอน
13.ช่อง Font: กำาหนดรูปแบบตัวอักษร
14.ช่อง Size: กำาหนดขนาดตัวอักษร
15.ช่อง Up state: และ Over state: กำาหนด
รูปแบบเมนู
16.คลิกป้าย Advanced เพอื่กำาหนดขนาดของ
Pop-Up Menu
17.คลิกป้าย Position เพื่อกำาหนดตำาแหน่งการวาง
Pop-Up Menu
18.คลิก Menu Position รูปที่ 2 ใหถู้กเลือก
19.คลิกปุ่ม OK
108. การสมัครขอใช้พื้นที่ฟรีบนอินเตอร์เน็ต
การสมคัรขอใช้พื้นทฟี่รีบนอินเตอร์เน็ต มเีว็บไซต์
ทใี่ห้บริการพนื้ที่ฟรีอยมู่ากมาย แต่จะมโีฆษณาของ
เว็บไซต์ทขี่อใช้บริการฟรีติดอยดู่้วย เพอื่เป็นการ
ประชาสัมพันธ์ให้กับเว็บไซต์ที่เราใช้บริการฟรี
ตัวอย่างรายชอื่เว็บไซต์ทใี่ห้บริการฟรี ( ของต่าง
ประเทศ )
www.geocities.com 11 mb
www.100megsfee.com 100 mb
www.50megs.com 50 mb
www.Freewebpage.ore 150 mb
www.angelfire.lycos.com 20 mb
www.fortunecity.com
110. ขั้นตอนการสมคัรขอใช้พื้นทฟี่รีของ Geocities
1. พิมพ์ชื่อเว็บไซต์ WWW.geocities.com เพอื่เปิดหน้าต่าง
เว็บไซต์นี้บนจอภาพ
2. คลิกคำาว่า Free สีนำ้าเงิน
3. คลิกปุ่ม Sing up ด้านขวา
4. คลิกคำาว่า sign up now
5. ปรากกหน้าต่างใหก้รอกรายละเอียดส่วนตัว ในหน้าต่าง
แบบฟอร์ม GeoCities
6. เมอื่กรอกเรียบร้อย ใหค้ลิกปุ่ม Submit This Firm
7. ปรากฏหน้าต่าง Registration Completed: Welcome
to Yahoo !ampakultumyotin คือการลงทะเบียนเสร็จ
สิ้นเรียบร้อย
8. คลิกปุ่ม Continue to Yahoo !
9. รอสกัครู่จะปรากกหน้าต่างให้เลือกหัวข้อโฆษณาอย่างน้อย
1 หัวข้อ
10.คลิกปุ่ม Continue
111. 1. ถา้ต้องออกแบบเว็บผ่านทาง
geocities.com ใหค้ลิกปุ่ม Build Your
Web Site Now !
2. จะปรากฏหน้าต่าง geocities มีชอื่ URL
ที่สมัครไว้พร้อมมีการนำาเสนอขั้นตอนการ
ออกแบบเว็บผ่านทาง geocities.com มา
ให้อีกด้วย
112. การ ( Upload )
การอัพโหลด (Upload) คือ การนำาข้อมลูขึ้นสู่
Web Server ซึ่งทำาให้เกิดการแสดงผลบน
อินเตอร์เน็ตได้ เมอื่ออกแบบเรียบร้อยต้องทำากา
รอัฟโหลดข้อมลู ซึ่งมี 2 แบบ คือ
1. แบบบราวเซอร์ Browser
2. แบบ FTP File Transfer Protocol
ขั้นตอนการอัพโหลดแบบ Browser
1. พิมพ์ชื่อเว็บไซต์ www.geocities.com
2. ปรากฏหน้าต่างเว็บไซต์ geocities
3. พิมพ์ชื่อทตีั่้งไว้ช่อง Yahoo ID:
4. พิมพ์รหสัผ่านช่อง Password:
5. คลิกปุ่ม Sign in
6. ช่อง Advanced Toolbox ใหค้ลิกรายการ Easy
Upload
113. 1. คลิกปุ่ม Browse… เพอื่หาไฟล์เว็บเพจทตี่้องการ
อัพโหลด ให้เลือกไฟล์แรกคือ Index.html ก่อน
เป็นหน้าแรกสุด เลือกไฟล์ชอ่งละ 1 ไฟล์จนครบ
หมด
2. ใหค้ลิกปุ่ม Upload Files
3. เรียบร้อยแล้ว พิมพ์เว็บไซตท์ี่ตั้งไว้ทดสอบ
ผลลัพธ์บนอินเตอร์เน็ต
ขั้นตอนการอัพโหลดแบบ FTP
ต้องติดตั้งโปรแกรมก่อนการอัพโหลด ในทนีี่้ใช้
โปรแกรม CuteFTP เริ่มจากการติดตั้งโปรแกรม
CuteFTP ก่อนจึงทำาการอัพโหลด
114. การติดตั้งโปรแกรม CuteFTP
1. ดับเบิ้ลคลิกไอคอล CuteFTP
2. ปรากฏหน้าต่างการติดตั้งโปรแกรม CuteFTP
3. คลิกปุ่ม Next
4. คลิกปุ่ม Yes
5. คลิกปุ่ม Next
6. คลิกปุ่ม Next
7. รอสกัครู่ติดตั้งจนครบ 100%
8. คลิกปุ่ม Finish
9. จะปรากฏหน้าต่าง CuteFTP Connection Wizard ตั้ง
ชื่อ FTP Site
10.คลิกปุ่ม Next
11.ปรากฏหน้าต่างใหใ้ส่ชื่อ FTP Address ( ทอี่ยู่ของเว็บที่
ใช้ในการอัพโหลดแบบ FTP ) เว็บทสี่ามารถอัพโหลดแบบ
115. 12.คลิกปุ่ม Next
13.ปรากฏหน้าตา่งใหใ้ส่ User name และ Password
ตามที่ได้ตั้งไว้เมื่อตอนลงทะเบียนสมัครขอพื้นที่
14.คลิกปุ่ม Next
15.คลิกปุ่ม เพื่อเลือก Folder ทเี่ป็นค่าตั้งต้นในการ
อัพโหลด ( หรือถา้ไมต่้องการกำาหนดให้ข้ามขั้นตอน )
16.คลิกปุ่ม Next
17.คลิกปุ่ม Finish เป็นอันเสร็จเรียบร้อย
116. ขั้นตอนการใช้โปรแกรม Cite FTP ในการอัพโหลด
1. คลิกปุ่ม Start
2. คลิกรายการ Proframs
3. คลิกรายการ GlobalSCAPECuteFTP Home
Cute FTPHome
4. ปรากฏหน้าต่างโปรแกรม และจะทำาการเชื่อมต่อ
Server ที่เราตั้งค่าไว้โดยอัตโนมัติ
117. การอัพโหลดโดยใช้โปรแกรม CuteFTP
มี 2 แบบ คือ
1. แบบที่ 1 คลิกไฟล์ ลากค้างไว้ แล้วปล่อยทาง
ด้านขวา
1. เลือกคลิกไฟล์ 1 ไฟล์หรือหลาย ๆ ไฟล์พร้อมกัน
2. ลากค้างไว้แล้วปล่อยลงในหน้าต่างด้านล่าง
2. แบบที 2
1. เลือกคลิกไฟล์หลายๆ ไฟล์พร้อมกันใหม้แีถบสี
2. คลิกเมาส์ขวาปรากฏเมนูลัด
3. คลิกรายการ Upload
4. โปรแกรมจะทำาการอัพโหลดขึ้นบน Server
118. การใช้บริการ Webboard Guestbook Counter ฟรี
1. http://www.212cafe.com/freewebboard
2. http://www.th2.net
3. http://www.212server.com
4. http://www.icygang.com/freewebboard
ตัวอย่างการขอใช้เว็บบอร์ดฟรี
1. ปิดเว็บไซต์
ชื่อhttp://www.212cafe.com/freewebboard
2. ปรากฏ
หน้าต่างhttp://www.212cafe.com/freewebbo
ard
3. ให้กรอกรายละเอียดในแบบฟอร์ม
4. คลิกปุ่ม Submit
119. การขอใช้บริการสมดุเยยี่ม Guestbook
1. http://guestbook.th2.net/thai/home.asp
2. http://frestbookcentral.com
3. http://freecenter.com/guestbook.html
4. http://toolzone.com
5. http://boxchart.com
ตัวอย่างการขอใช้บริการสมุดเยยี่ม Guestbook
1. พิมพ์ชื่อเว็บไซต์
http://guestbook.th2.net/thai/home.asp
2. ปรากฏหน้าต่างเว็บไซต์
http://guestbook.th2.net/thai/home.asp
3. คลิกรายการ สมคัรสมาชิก คลิกทนีี่่ !
4. รอสกัครู่จะปรากฏหน้าต่างแสดงเงื่อนไข คลิกปุ่ม ตกลง
5. ปรากฏหน้าต่างปรับค่าต่าง ๆ ของสมดุเยยี่ม กรอกราย
120. รายชื่อเว็บไซต์ที่ให้บริการตัวนับจำานวนผู้เข้าชม
1. http://www.zcounter.com
2. http://www.freecenter.com/counter.html
3. http://www.counted.com
4. http://www.acecounter.com
5. http://www.free-counters.co.uk
6. http://www.stats4all.com
ตัวอย่างการขอใช้บริการขอใช้บริการตัวนับจำานวน
ผู้เข้าชม
1. พิมพ์ชื่อเว็บไซต์ http://www.zcounter.com
2. ปรากฏหน้าต่างเว็บไซต์
http://www.zcounter.com
3. พิมพ์ User Login:
121. 4. คลิกทขี่้อความว่า Sign up for a Free
Counter
5. กรอกรายละเอียดต่าง ๆ ให้ครบ
6. คลิกทปีุ่่ม Sing Up
7. รอสกัครู่ การลงทะเบียนเสร็จสมบูรณ์
8. คลิกทขี่้อความว่า Here เพื่อทำาการ Login
9. ระบุช่อง User Login:
User Password:
