???????????????????? New Site

การติดตั้งโปรแกรม 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. จะปรากฏหน้าต่างแสดงรายละเอียดเกี่ยวกับลิขสิทธิ์ของโปรแกรม ให้คลิกปุ่ม Yes

8. ระบุข้อมูลผู้ใช้และให้ใส่ Serial number: แล้วคลิกปุ่ม Next

9. จะแสดงโฟลเดอร์สาหรับจัดเก็บโปรแกรม คลิกปุ่ม Next

10. เลือกชนิดของไฟล์ที่จะใช้ร่วมกับ Dreamweaver แล้วคลิกปุ่ม Next

11. หน้าต่างนี้โปรแกรมพร้อมที่จะทาการติดตั้ง ให้คลิกปุ่ม Next

้ ้

12. เริ่มทาการติดตังโปรแกรม Dreamweaver รอให้โปรแกรมติดตังจนครบ 100%

้

13. เมื่อติดตังเสร็จเรียบร้อย ให้คลิกปุ่ม Finish

การติดตั้งภาษาไทย Dreamweaver MX Thai addo



1. ดับเบิ้ลคลิกโฟลเดอร์

2. ดับเบิ้ลคลิกไอคอน

3. คลิกปุ่ม Next

4. คลิกปุ่ม Next

5. โปรแกรมจะแสดงรายละเอียดที่ได้เลือกมา ให้คลิกปุ่ม Install

้

6. เมื่อติดตังสิ้นสุด ให้คลิกปุ่ม Finish

การเข้าสู่โปรแกรม Dreamweaver MX



่

ขั้นตอนเข้าสูโปรแกรม Dreamweaver MX

1. คลิกปุ่ม Start

2. คลิกรายการ Programs หรือ คลิก All Programs

3. คลิกรายการ Macromedia

4. คลิกโปรแกรม Macromedia Dreamweaver MX

5. ถ้าเข้าโปรแกรมครั้งแรก ให้คลิกปุ่ม x (close) จะปรากฏโปรแกรม Macromedia Dreamweaver MX

ขั้นตอนการสร้างเว็บไซต์ใหม่

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

ขั้นตอนการสร้างเว็บไซต์ใหม่ ด้วย

ป้านคาสั่ง 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

8. คลิกปุ่ม Select

9. คลิก OK

10. ั้

จะปรากฏหน้าต่าง การจัดการ Site และแสดงรายชื่อไฟล์ทงหมด รวมทั้งโฟลเดอร์ที่มีอยู่

การแก้ไขรายการ Site

1. คลิกเมนู Site เลือกรายการ Edit Sites

2. จะปรากฏหน้าต่าง Edit Sites

ปุ่ม New สาหรับกาหนดไซต์ใหม่

ปุ่ม Edit สาหรับแก้ไขไซต์

ปุ่ม Duplicate สาหรับคัดลอกไซต์สารอง

ปุ่ม Remuve สาหรับลบไซต์

ปุ่ม Done สาหรับทางานกับไซต์ที่ต้องการเลือกใช้งาน

การพิมพ์ข้อความบนเว็บเพจ



การพิมพ์ข้อความบนเว็บเพจด้วยโปรแกรม Dreamweaver MX มีอยู่ด้วยกัน 3 วิธี คือ

1. พิมพ์ข้อความลงบนจอภาพ

2. พิมพ์ข้อความจากโปรแกรมอื่น เช่น โปรแกรม Word.Excel หรือ Notepad แล้วนาสาเนามาใส่ที่

หน้าจอภาพการทางานของโปรแกรม Dreamweaver MX

3. พิมพ์ข้อความเป็นเอกสาร HTML ข้อสาหรับผู้ใช้ที่ถนัดภาษา HTML คลิกปุ่ม  Code แล้มพิมพ์

ข้อความลงในส่วน หรือ

การแทรกรูปภาพบนเว็บเพจ



การแทรกรูปภาพบนเว็บเพจมีผลทาให้เว็บเพจดูน่าสนใจ และการนาไฟล์รูปภาพ ต่างๆเข้ามาใช้งาน

มีข้อควรพิจารณา 3 ประการคือ



1. ประเภทของไฟล์รูปภาพ ควรจะใช้เป็นนามสกุล *.gif, *.jpg หรือ *.png

2. ไฟล์รูปภาพ ถ้าผ่านการใช้คาสั่ง Optimize ในโปรแกรม ImageRedy ก่อนการนามาใช้

งาน จะทาให้ภาพบนเว็บเพจสามารถเปิดได้เร็วขึ้น

3. ควรมีการแทรกไฟล์รูปภาพเท่าที่จาเป็น ไม่ควรใช้รูปภาพมากเกินไป

วิธีนารูปภาพมาใส่ในหน้าเว็บเพจ



1. คลิกวางเคอร์เซอร์ตาแหน่งที่ต้องการ

2. คลิกเมนู Insert เลือกรายการ Image

3. จะปรากฏหน้าต่าง Select Image Source

4. คลิก  ช่อง Look in : เลือกไดร์ฟและโฟลเดอร์ที่จัดเก็บไฟล์รูปภาพ

5. คลิกปุ่ม View Menu จะปรากฏเมนูย่อย เลือกรายการ Thumbnails

6. ้

คลิกเลือกรูปที่ตองการ

7. คลิกปุ่ม OK จะปรากฏรูปภาพหน้าจอ

วิธีปรับขนาดรูปภาพ



1. คลิกที่รูปภาพให้มีจุด Handle สีดา

2. เลื่อนเมาส์บริเวณจุด Handle สีดา จะปรากฏลูกศร 2 หัว

3. คลิกเมาส์ตรงจุด Handle ค้างไว้แล้วย่อ หรือขยายภาพตามขนาดที่ต้องการ

วิธีการใส่คาอธิบายแสดงข้อความ

บนรูปภาพ



1. คลิกรูปภาพให้มีจุด Handle สีดา

2. คลิก วางเคอร์เซอร์ช่อง A1T พิมพ์คาว่า Bugs life

3. คลิกเมนู File เลือกรายการ Preview คลิกรายการ iexplore หรือกดปุ่ม F12 เพื่อทดลองผลงานบนเบรา

เซอร์ ( Internet Explorer )

วิธีการใส่เส้นขอบให้กับรูปภาพ





1. ี

คลิกเมาส์ที่รูปภาพให้มจุด Handle

2. ่

คลิกวางเดอร์เซอร์ที่ชอง Border พิมพ์เลข 6 กาหนดขนาดของกรอบรูปภาพ

3. คลิกเมาส์ที่พื้นที่ว่างจะได้กรอบมีขนาดตามต้องการ ( ตัวเลขน้อยกรอบบาง ตัวเลขมากกรอบหนา )

วิธีปรับระยะห่างของรูปภาพและ

ข้อความ



1. ี

คลิกเมาส์ที่รูปภาพให้มจุด Handle

2. ้

ใส่ตัวเลขที่ต้อง Vspace เพิ่มระยะห่างแนวตัง

3. ใส่ตัวเลขที่ช่อง Hspace เพิ่มระยะห่างแนวนอน

4. คลิกบริเวณที่ว่างของหน้าต่างทางาน จะทาให้เกิดระยะห่างของภาพมากขึ้น

วิธีการจัดรูปภาพประกอบกับข้อความ

1. คลิกเมาส์ที่รูปภาพ ให้มีจุด Handle

2. คลิก  ช่อง Alegn ปรากฏรายการลักษณะการจัดรูปภาพประกอบกับข้อความ เลือกLeft

3. ความหมายของรายการลักษณะการจัดรูปภาพประกอบกับข้อความ

- Default เป็นการจัดการกับรูปภาพแบบปกติ

- Baseline จัดขอบล่างของรุปอยู่แนวเดียวกับบรรทัดข้อความ

- Top จัดให้ขอบบนของรูปอยู่แนวเดียวกับบรรทัดข้อความ

- Midd ่

จัดให้ตรงกลางของรูปอยูแนวเดียวกับบรรทัดข้อความ

- Bottom ่

จัดให้ขอบล่างของรูปอยูแนวเดียวกับบรรทัดข้อความ(คล้ายกับ Baseline)

- Text T จัดให้ขอบบนของรูปอยู่แนวเดียวกับส่วนกลางบรรทัดข้อความ

- Absolute Middle จัดให้กึ่งกลางของรูปอยู่แนวเดียวกับส่วนกลางของข้อความ

- Absolute Bottom จัดให้ขอบล่างของรูปอยู่แนวเดียวกับส่วนล่างข้อความ

- Left จัดให้รูปภาพอยู่ซ้ายสุดของบรรทัดข้อความ

- Rught จัดให้รูปภาพอยู่ขวาสุดของบรรทัดข้อความ

วิธีทาการปรับรูปภาพให้โปร่ง

แสง

(Tracing Image)

1. คลิกเมาส์วางเคอร์เซอร์ที่หน้าจอการทางาน

2. คลิกเมนู Modify เลือกรายการ Page Properties หรือกดปุ่ม Ctrl+J

3. ่

คลิกปุ่ม Browse ที่ช่อง Tracing Image เลือกไฟล์รูปภาพทีต้องการใช้งาน

4. เลื่อน Scroll ช่อง Image Transparency ปรับความโปร่ง ค่าความจางมัวOpaque ตามต้องการ

5. คลิกปุ่ม Apply ดูผลที่ได้บนหน้าจอการทางาน

6. คลิกปุ่ม Ok

การทา Swap Image

1. ้

วางเคอร์เซอร์ในตาแหน่งที่ตองการ

2. คลิกปุ่ม เลือกรูปภาพมาวางบนหน้าต่างเว็บเพจ

3. คลิกเมนู Windows--> Behaviors

4. จะปรากฏหน้าต่าง Behaviors

5. คลิกปุ่ม 

6. จะปรากฏเมนูย่อย ให้คลิกรายการ Swap Image

7. จะปรากฏหน้าต่าง Swap Image

8. คลิกปุ่ม Browse

9. เลือกไฟล์รูปที่ต้องการ

10. คลิกปุ่ม OK

11. คลิกปุ่ม OK

12. เมื่อเสร็จจะปรากฏข้อความ OnloadSwap Image หน้าต่าง

13. กดปุ่ม F12 หรือคลิกเมนู File --> Preview in Browser คลิกรายการ Iexplorer

14. ่

จะปรากฏหน้าต่าง Internet Explorer ภาพปกติเมื่อเลื่อนเมาส์มาวางทีภาพจะเปลี่ยนเป็นรูปอื่น

สาระสาคัญ

ศึกษาและปฏิบัตเิ กี่ยวกับการสร้างตาราง ตารางเป็นส่วนสาคัญในการสร้างเว็บเพจ

เพราะการพิมพ์งาน และควบคุมวัตถุต่างๆ เช่น รูปภาพในเอกสารเว็บ มีข้อจากัดหลาย

่

ประการ เช่น การวางรูปภาพให้มีข้อความล้อมรอบ การสร้างเอกสารคอลัมน์ ซึงจะต้องอาศัย

ตารางเป็นเครื่องมือช่วยทั้งหมด

การสร้างตาราง

่

การนาเสนอข้อมูล จาเป็นที่จะต้องสร้างตารางขึ้นมาเพือให้ข้อมูลที่นาเสนอ ดูเข้าใจง่าย

ขั้นตอนการสร้างตาราง

1. คลิกเมาส์วางเคอร์เซอร์ ตาแหน่งที่ต้องการจะสร้างตาราง

2. คลิกปุ่ม Layout บนแถบเครื่องมือ Insert

3. คลิกปุ่ม Insert Table

4. จะปรากฏหน้าต่าง Insert Table ให้กาหนดค่าต่างๆ ของตาราง

 Rows จานวนแถวของตาราง

 Columns จานวนคอลัมน์ของตาราง

 Width ความกว้างของตารางมี 2 แบบ Pixels หรือ Percent

 Border ความหนาของเส้นขอบตาราง

 Cell Padding ระยะห่างจากขอบข้างในของเซลล์กับตัวอักษรภายในเซลล์

 Cell Spacing ความหนาของเส้นคั่นระหว่างเซลล์

 คลิกปุ่ม OK

 จะได้ตารางสาหรับการทางาน

การปรับแต่งตาราง



1. คลิกเมาส์เส้นขอบของตารางให้ปรากฏจุด Handle

2. ้

จะปรากฏหน้าต่าง Propertoes แสดงรายละเอียดของตารางทังหมด

การพิมพ์ข้อความลงในตาราง

1. คลิกเมาส์วางเคอร์เซอร์ที่ช่องเซลล์แรก

2. พิมพ์ข้อความตรงตาแหน่งเคอร์เซอร์ชิองแรกว่า กิจกรรม

3. กดปุ่ม Tab เคอร์เซอร์กระโดดมาช่องสอง พิมพ์ว่า ระยะเวลา

4. กดปุ่ม Tab เคอร์เซอร์กระโดดมาช่องสาม พิมพ์ว่า จานวนเงิน

5. ถ้าต้องการเพิ่มบรรทัดใหม่ ให้กดปุ่มTeb ช่องเซลล์สุดท้าย จะเพิ่มบรรทัดให้อัตโนมัติ







กิจกรรม ระยะเวลา จานวนเงิน

การเลือกตารางทั้งหมด



1. คลิกเลือกเส้นขอบของตาราง ด้านขวาเส้นแบ่งเซลล์ จะปรากฏจุด Handle เลือกตาราง

2. คลิกที่มุมบนซ้าย,มุมล่างขวา,เส้นแบ่งตาราง หรือเส้นขอบนอกจะปรากฏลูกศรสีดา 4 หัว

การเลือกทั้งแถว

1. เลื่อนเมาส์มาวางที่เส้นขอบด้านหน้าของแถว ตัวชี้เมาส์จะเปลี่ยนเป็นลูกศรขวาสีดา

2. ่

คลิกเมาส์เลือกทีละแถว หรือคลิกเลื่อนลงเพือเลือกแบบหลายแถว









การเลือกทั้งคอลัมน์

1. เลื่อนเมาส์มาวางเส้นขอบด้านบนคอลัมน์ ตัวชี้เมาส์จะเปลี่ยนเป็นรูปลูกศรหัวลงสีดา

2. คลิกเมาส์เลือกทีละคอลัมน์ หรือคลิกเลื่อนเมาส์เพื่อเลือกแบบหลายคอลัมน์

การเลือกเซลล์



1. เลื่อนเมาส์คลิกวางเคอร์เซอร์ที่เซลล์ที่ต้องการ

2. คลิกลากจากเซลล์ช่องแรกไปยังอีกเซลล์หนึง หรือ ่

3. ้

กดปุ่ม Shift ค้างไว้แล้วคลิกเลือกเซลล์ที่ตองการเลือกถัดไป หรือ

4. ้

กดปุ่ม Ctrl ค้างไว้แล้วคลิกเลือกเซลล์ที่ตองการแบบไม่ต่อเนื่อง

การปรับความกว้างและความสูงด้วยเมาส์



1. เลื่อนเมาส์มาวางที่เส้นแบ่งคอลัมน์ จะปรากฏเมาส์เป็นลูกศรแนวนอน 2 หัว

2. คลิกเมาส์ค้างไว้ ลากขยายหรือย่อขนาดของคอลัมน์ตามต้องการ

3. ู

เลื่อนเมาส์วางที่เส้นแบ่งแถว จะปรากฏเมาส์รปเมาส์ลูกศรแนวตั้ง 2 หัว

4. คลิกเมาส์ค้างไว้ ลากขยายหรือย่อขนาดของแถวตามต้องการ

การปรับความกว้างปละความสูงด้วยแถบเครื่องมือ

Properties



1. ้

คลิกเลือกคอลัมน์และแถว ให้มีกรอบสีดาทังหมด

2. กาหนดค่า W= 50 หรือ H=50 บนแถบเครื่องมือ Properties

3. กดปุ่ม Enter

่

การยกเลิกความและความสูงทีกาหนด

1. ้

เลือกตารางทังหมด

2. คลิกเมนู Modify --> Table --> Clear Cellหรือ

3. คลิกปุ่ม Clear Column Width บนแถบ Properties

3. คลิกเมนู Modify --> Table --> Clear Cell Height หรือ

4. คลิกปุ่ม Clear Row Heightบนแถบ Properties





การลบแถวและคอลัมน์

1. ้

คลิกเลือกตารางทังหมด หรือเลือกเฉพาะแถว หรือเลือกเฉพาะคอลัมน์

2. กดปุ่ม Delete

การนารูปภาพมาใส่ลงในตาราง





1. คลิกเมาส์วางเคอร์เซอร์ที่เซลล์ที่ต้องการใส่รูปภาพ

2. ่

คลิกหาไฟล์รูปภาพทีแถบเครื่องมือ Properties

3. ้

เลือกรูปภาพที่ตองการ

4. คลิกปุ่ม OK

5. จะปรากฏรูปภาพที่ช่องเซลล์ที่เลือก

การใส่รูปภาพพื้นหลังตารางทั้งหมด





1. ้

คลิกเลือกตารางทังหมดให้มีจุด Handle

2. ่

คลิกหาไฟล์รูปภาพที่ชอง Bg Image จากเครื่องมือ Properties

3. เลือกรูปที่ต้องการ

4. คลิกปุ่ม Ok

5. ้

รูปภาพจะปรากฏที่พื้นหลังของตารางทังหมด

การเปลี่ยนพื้นหลังของตาราง

1. คลิกเลือกตารางให้มีจุด Handle

2. ่

คลิกเลือกสีพื้นหลังที่ชอง Bg Color จากตาราง Properties

3. สีพื้นหลังของตารางจะเปลี่ยนแปลงตามที่เลือก





การเปลี่ยนสีเส้นขอบตาราง

1. คลิกเลือกตารางให้มีจุด Handle

2. คลิกเลือกสีขอบตารางที่ช่อง Brdr จากเครื่องมือ Properties

3. เส้นขอบตารางจะเปลี่ยนสีตามที่เลือก

การรวมเซลล์และแยกเซลล์

1. คลิกเมาส์วางเคอร์เซอร์ ตาแหน่งที่ต้องการจะสร้างตาราง

2. คลิกปุ่ม Layout บนแถบเครื่องมือ Insert

3. คลิกปุ่ม Insert Table

4. จะปรากฏหน้าต่าง Insert Table ให้กาหนดค่าต่าง ๆ ของตาราง

5. คลิกปุ่ม Ok

6. จะได้ตาราง 3 แถว 3 คอลัมน์

7. เลือกเซลล์ 1 และ 2 ให้มีแถบสี

8. คลิกขวาเซลล์ตารางที่เลือก ปรากฏเมนูลัด คลิกรายการTable-- > Merge Cells

9. เซลล์ที่เลือกจะรวมกันเป็นเซลล์เดียว

การแยกเซลล์(Split Cells)



1. จากตารางรวมเซลล์

2. คลิกเมาส์วางเคอร์เซอร์ช่องรวมเซลล์

3. คลิกขวา ปรากฏเมนูลัด คลิกรายการ Table -- > Splet Cell หรือคลิกปุ่ม Splet Cell

4. จะปรากฏหน้าต่าง Splet Cell ให้ระบุจานวนคอลัมน์ช่อง Nunber of Columns

5. คลิกปุ่ม OK

6. เซลล์จะแยกเป็น 2 คอลัมน์

ขั้นตอนการสร้างลิงก์จากข้อความ



1. พิมพ์ข้อความบนหน้าต่างทางาน

2. ลากเมาส์คลุมข้อความให้มีแถบสี

3. คลิกปุ่มในแถบ properties

4. เพื่อเลือกไฟล์ที่จะทาการลิงก์

5. คลิกปุ่ม ok

6. ข้อความจะเปลี่ยนเป็นสีฟ้ามีเส้นใต้ขีดอยู่

การสร้างลิงก์แบบรูปภาพ



1. คลิกเมาส์ที่รูปภาพให้มีจุด Handle

2. คลิกปุ่มของช่อง link properties

3. เลือกไฟล์ที่จะลิงก์

4. แล้วคลิกปุ่ม ok หรือดับเบิ้ลคลิกชื่อไฟล์

5. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in Browser iexplorer หรือกดปุ่ม F12

การสร้างลิงก์แบบ 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 เมาส์จะ

เปลี่ยนเป็นรูปมือ และเมื่อทาการคลิกก็จะลิงก์ไปยังด้านบนของเอกสารตามที่อยู่ที่ต้นทาง

8. ให้ทดลองทาลิงก์กลับลงมาด้านล่างด้วยวิธีเดียวกัน

การสร้างลิงก์แบบ Image Map

การสร้างลิงก์แบบ Image Map คือการใช้รูปภาพในส่วนต่าง ๆ เป็นจุดในการเชื่อมโยงไปยัง

ปลายทาง โดยมีขั้นตอนในการปฏิบัติดังนี้

1. คลิกบริเวณรูปภาพที่ต้องการ ให้มีจุด Handle

2. ให้กระทาดังต่อไปนี้บนแถบเครื่องมือproperties

- Map

- คลิกเลือกรูปแบบของพื้นที่จุดลิงก์ มีสี่เหลี่ยม วงกลม รูปอิสระ

3. ลากเมาส์ที่รูปให้ได้ขนาดตามที่ต้องการ

4. กาหนดไฟล์หรือจุดลิงก์ลงในช่อง

5. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in Browseriexplorer หรือกดปุ่ม F12

การสร้างลิงก์ไปยัง E-mail

การสร้างลิงก์ไปยัง E-mail สามารถทาได้ทั้งแบบรูปภาพ และแบบข้อความโดยมีขั้นตอนดังนี้คือ

1. คลิกเมาส์ที่ข้อความให้มีแถบสี หรือคลิกเมาส์ที่รูปภาพให้มีจุดhandle

2. พิมพ์ mailto: ชื่ออีเมล์ลงในช่อง Link

3. คลิกพื้นที่ว่าง

4. ทดสอบผลลัพธ์ คลิกเมนู FilePreviewiexplorer หรือกดปุ่ม F12

การสร้างลิงก์ ไปยังเว็บไซต์อื่น

การสร้างลิงก์ไปยังเว็บไซต์อื่น สามารถทาได้ทั้งแบบรูปภาพและแบบข้อความเช่นเดียวกับการสร้างลิงก์ไปยัง

E-mail โดยมีขั้นตอนดังนี้

1. เลือกข้อความหรือคลิกเมาส์ที่รูปภาพให้มีจุด Handle

2. ื่ ่

พิมพ์ชอ URL http:// ชือเว็บไซต์ลงในช่อง Link และเลือกรูปภาพปลายทางเช่น www.moe.go.th

3. คลิกเมาส์พื้นที่ว่าง

4. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in Browseriexplorerหรือกดปุ่ม F12

การสร้างลิงก์แบบ Rollover Image

การสร้างลิงก์แบบ Rollover Image คือการทาเทคนิคภาพบนเว็บเพจ ให้ดูแปลกตา ภาพจะแสดงผล

เปลี่ยนไปเมื่อลากเมาส์ผ่าน (ต้องมี 2 ภาพที่มีขนาดเท่า ๆ กันให้ภาพหนึ่งเป็นภาพปกติและอีกภาพหนึ่ง

ถูกเรียกขึ้นมาแทนเมื่อลากเมาส์ผ่าน)

1. คลิกเมาส์วางเคอร์เซอร์ตาแหน่งที่ต้องการ

2. คลิกปุ่ม Rollover Image

3. จะปรากฏหน้าต่าง Insert Rollover Image

4. ่

ให้กาหนดค่าตัวเลือกไฟล์รูปภาพทีต้องการ ดังนี้

- Original Image: ภาพต้นฉบับ สาหรับแสดงเป็นภาพปกติ

- ่

Rollover Image: ภาพทีใช้สลับขึ้นมาเมื่อลากเมาส์ผ่าน

- ่

Alternate Text: ข้อความอธิบายภาพทีแสดงขึ้นมาในกรณีนาเมาส์ลากผ่าน

- When Clic, Go To URL: กาหนดปลายทางที่จะลิงก์ไป

5. คลิกปุ่ม Ok

6. ทดสอบผลลัพธ์ คลิกเมนู FilePreview in Browseriexplorer หรือกดปุ่ม F12

การเปลี่ยนสีตัวอักษรที่เป็นลิงก์

1. ให้พิมพ์ข้อความเพื่อตั้งค่าการเปลี่ยนสีตัวอักษรที่เป็นการลิงก์

2. คลิกเมนู ModifyPage Properties หรือกดปุ่ม Ctrl+j

3. จะปรากฏหน้าต่าง Page Properties

4. เลือกที่หัวข้อ Link ให้กาหนดค่าเหล่านี้

- Link :สีของข้อความที่ต้องการสร้างลิงก์

- Visited Link: สีของข้อความลิงก์ทเี่ คยเข้ามาชมแล้ว

- Active Link: สีของข้อความลิงก์ในขณะที่ใช้งาน

5. คลิกปุ่ม Ok

6. ทดสอบผลลัพธ์คลิกเมนู FilePreview in Browseriexplorer หรือกดปุ่ม F12

รูปแบบของเฟรม



เฟรมจะมีอยู่ด้วยกัน 2 รูปแบบ คือ เฟรมหลัก (Frameset)และเฟรมย่อย(Frame)

เฟรมหลัก (Frameset) คือ หน้าต่างเฟรมที่ใหญ่ที่สุด ที่คอยควบคุมเฟรมย่อยอื่น ๆ อีกทีหนึ่ง

้ ้

และกาหนดลักษณะการแบ่งเฟรมในแนวตังและแนวนอน ทังยังกาหนดขนาดของขอบ สี

รวมถึงระยะห่างระหว่างเฟรมได้อีกด้วยเฟรมย่อย (Frame) คือหน้าต่างเฟรมที่กาหนดชื่อของ

แต่ละเฟรม และกาหนดไฟล์เว็บเพจที่จะแสดงประจาเฟรมได้

การออกแบบเฟรม

1. คลิกที่แท็บคาสั่ง Frames บนแถบเครื่องมือ Insert

2. คลิกปุ่ม Left and Nested Top Frames จะปรากฏหน้าต่างเฟรมแบบสามส่วนตามที่เลือก

- คอลัมน์แรกจะแสดงเมนู

- คอลัมน์ที่สอง แถวแรกจะแสดงหัวเรื่องเว็บเพจ

- คอลัมน์ที่สาม ส่วนล่าง จะแสดงเนื้อหา

3. ในกรณีที่คลิกปุ่ม Top and Nested Left Frames

- แถวแรกจะแสดงหัวเรื่องเว็บเพจ

- แถวที่สอง ซ้ายมือแสดงเมนู

- แถวที่สาม ส่วนขวามือแสดงเนื้อหา

ลักษณะต่าง ๆ ของเฟรม

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 แบ่งสามส่วน ด้านซ้าย ด้านขวา และด้านล่าง

9. Top and Bottom Frames แบ่งสามส่วน ด้านบน ด้านกลาง และด้านล่าง

10. Left and Nested Top Frames แบ่งสามส่วน ด้านซ้าย ด้านขวา และด้านล่าง

11. Right and Nested Top Frames แบ่งสามส่วน ด้านซ้าย ด้านขวา และด้านล่าง

12. Top and Nested Left Franes แบ่งสามส่วน ด้านซ้าย ด้านขวา และด้านล่าง

13. Top and Nested Right Frames แบ่งสามส่วน ด้านซ้าย ด้านขวา และด้านล่าง

การกาหนดคุณสมบัติของเฟรม

่

การแบ่งหน้าจอการทางานเป็นลักษณะเฟรม ควรจะกาหนดคุณสมบัติตาง ๆ ของเฟรมดังนี้

1. เลื่อนเมาส์วางที่เส้นแบ่งเฟรม จะปรากฏลูกศร 2 หัว ให้คลิกที่เส้นแบ่งเฟรม

2. จะปรากฏหน้าต่าง Frame Properties ด้านล่าง

3. การกาหนดคุณสมบัติของเฟรมมีดังนี้

- Bprders ให้เส้นเฟรมแรเงาหรือไม่

- Border color สีของขอบเฟรม

- Border Width ขนาดของเส้นเฟรม

- Row ความกว้างของเฟรม

4. คลิกที่เส้นแบ่งเฟรม

5. ให้คลิก  ช่อง Border เลือก Yes

6. ให้คลิก  ช่องBorder color เลือกสีของเฟรม

7. ่

พิมพ์ชอง Border Width 5

8. ่

พิมพ์ชอง Row 100 กาหนดความกว้างของเฟรม

9. จะได้ผลลัพธ์ของการกาหนดคุณสมบัติของเฟรม

การปรับแต่งเฟรม

1. คลิกที่เส้นแบ่งเฟรม

2. คลิกลูกศร 2 หัว ค้างไว้ลากเมาส์ย่อ-ขยายเฟรมตามที่ต้องการ

3. คลิกเมาส์พื้นที่ว่าง ก็จะได้ขนาดเฟรมตามต้องการ

การลบเฟรม





1. คลิกที่เส้นแบ่งเฟรม

2. ่ ิ

ลากเมาส์เลือนขึ้น ให้ชดขอบด้านบน

3. เฟรมจะถูกยุบรวมกันกับเฟรมที่เส้นขอบด้านบน

การสร้างเฟรมเพิ่มเติม



่

การสร้างเฟรมเพิมเติม สามารถทาตามขั้นตอนได้ดังนี้

1. ่

คลิกเมาส์วงเคอร์เซอร์บริเวณพื้นที่ที่ต้องการสร้างเฟรมใหม่เพิมเติม

2. ่

คลิกเลือกรูปแบบเฟรมที่ต้องการสร้างเพิม เช่น คลิกแบบที่ 3

3. จะได้รูปเฟรมเพิ่มทันที

การนาเว็บเพจมาเปิดภายในเฟรม



1. ้

คลิกเมาส์วางเคอร์เซอร์พื้นที่ของเฟรมย่อยที่ตองการ

2. คลิกเมนู File คลิกรายการ Open in Frame…หรือกดปุ่ม Ctrl+Shift+0

3. เลือกไฟล์เว็บเพจที่จะเปิดในเฟรม แล้วคลิกปุ่ม OK

4. ่

จะปรากฏผลลัพธ์ที่ได้ในเฟรมตามทีกาหนดไว้

การบันทึกเฟรม



่ ้

การสร้างเฟรมจะต้องมีการบันทึก(Save)ชือของแต่ละเฟรม ทังเฟรมหลักและเฟรมย่อยให้เหมือนกับการ

บันทึกหน้าของเว็บเพจทั่วไป การบันทึกเฟรมมีขั้นตอนดังนี้คือ

1. คลิกเมาส์วางเคอร์เซอร์ที่พื้นที่เฟรมที่จะบันทึก

2. คลิกเมนู Fileคลิกรายการ Save Frame As…หรือกดปุ่ม Ctrl+Shift+S

3. เลือกสถานที่เก็บไฟล์ ช่องSave in:

4. ื่

พิมพ์ชอในช่อง File name: แล้วคลิกปุ่ม Save

การบันทึกเฟรมหลัก



1. คลิกเมาส์ทีเส้นขอบเฟรม

2. ่

คลิกเมนู Fileคลิกรายการ Save Frameset As…หรือ กดปุม Ctrl+Shift+S

3. เลือกโฟลเดอร์ที่เก็บไฟล์

4. ื่

พิมพ์ชอลงในช่อง File name:แล้วคลิกปุ่ม Save

การสร้างแบบฟอร์ม

1. คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างทางาน

2. คลิกเลือกแท็บ Froms จากแถบเครื่องมือ Insert

3. คลิกปุ่ม Froms เพื่อเปลี่ยนการทางานในลักษณะแบบฟอร์ม

4. ่

จะได้ตารางเส้นประสีแดงปรากฏบนพื้นทีการทางาน

5. ้

ให้กดปุ่ม Enter เพื่อขึนบรรทัดใหม่ หรือขยายช่องตารางเส้นปะสีแดง

6. ่

กดปุ่ม Backspace เพือลดขนาดของช่องตารางเส้นประสีแดง

7. ทดลองพิมพ์ข้อความ และทาการปรับแต่งด้วยแถบเครื่องมือ Text Properties

- การกดปุ่ม Shift+Enter ใช้สาหรับปรับช่องว่างระหว่างบรรทัด

- การกดปุ่ม Ctrl+Shift+Space Bar เพื่อใช้สาหรับเว้นวัคตัวอักษร

การสร้าง Text Field สาหรับกรอกข้อความ



1. คลิกวางเคอร์เซอร์ตาแหน่งที่จะทา Text Field

2. คลิกปุ่ม Text Field จะปรากฏกรอบเส้นประ Text Field สาหรับการกรอกข้อความตรงตาแหน่งเคอร์เซอร์

3. คลิกเมาส์วางเคอร์เซอร์ช่อง Char Width กาหนดความยาวของฟิลด์ =30

4. คลิกเมาส์วางเคอร์เซอร์ช่อง Max Chars กาหนดจานวนตัวอักษรสูงสุด =50

การสร้างปุ่ม Radio Button

1. พิมพ์ข้อความ เพศ ชาย หญิง

2. คลิกวางเคอร์เซอร์ตาแหน่งที่จะทา Radio Button

3. คลิกปุ่ม เพื่อสร้างปุ่ม Radio Button ด้านหน้ารายการ ชาย

4. คลิกวางเคอร์เวอร์ตาแหน่งหน้าคาว่า หญิง

5. คลิกปุ่ม เพื่อสร้างปุ่ม Radio Button ด้านหน้ารายการ หญิง

6. พิมพ์ข้อความว่า อายุ ปี เกิดวันที่ เดือน ปี พ.ศ.

6. คลิกเมาส์วางเคอร์ด้าหลังคาว่า อายุ

7. คลิกปุ่ม Text Field ปรากฏกรอบเส้นประ Text Field ตรงตาแหน่งเคอร์เซอร์

8. คลิกเมาส์ที่กรอบให้มีเส้นประ

9. ระบุช่อง Char Width =5

การทาช่องกรอกแบบ 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. คลิกปุ่ม เพื่อเลือกวันที่

11. จะปรากฏรายการตัวเลขให้เลือกวันที่

12. จะปรากฏวันที่ที่เลือกในช่อง

13. คลิกเมาส์วางเคอร์เซอร์ด้านหลังคาว่า เดือน 1

14. คลิกปุ่ม List/Menu บนแถบเครื่องมือ Forms

15. จะปรากฏกรอบ

16. คลิกเลือกวงกลม List

17. คลิกปุ่ม List Values

18. พิมพ์ชื่อเดือน มกราคม แล้วคลิกปุ่มเคื่องหมาย +

19. พิมพ์ชื่อเดือน กุมภาพันธ์ แล้วคลิกปุ่มเคื่องหมาย + ทาเช่นนี้จนถึงเดือนธันวาคม

20. คลิกปุ่ม Ok

21. คลิกเมนู FilePreview in Browser  iexplore

22. คลิกปุ่ม  เพื่อเลือกรายการที่ต้องการ

23. คลิกเมาส์วางเคอร์เซอร์ด้านหลัง ปี พ.ศ.

24. คลิกปุ่ม List/Menu บนแถบเครื่องมือ Forms

25. จะปรากฏกรอบ

26. คลิกปุ่ม คลิกปุ่ม List Values

27. ปรากฏหน้าต่าง List Values...

28. พิมพ์ ปี พ.ศ. 2540 แล้วคลิกปุ่มเครื่องหมาย+

29. พิมพ์ 2541 แล้วคลิกปุ่มเครื่องหมาย+ ทาเช่นนี้จนถึงปี พ.ศ.2547

30. คลิกปุ่ม Ok

31. คลิกที่ปุ่ม Lise และคลิกเครื่องหมายด้านหน้า Allow multiple

32. จะปรากฏกรอบ

33. คลิกเมนู File Preview in Browseriexplore

34. จะได้ผลลัพธ์แสดงบนจอภาพ

35. พิมพ์ข้อความ บ้านเลขที่ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

36. พิมพ์ข้อความ หมู่บ้าน แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

37. พิมพ์ข้อความ ถนน แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

38. พิมพ์ข้อความ แขวง/ตาบล แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

39. พิมพ์ข้อความ เขต/อาเภอ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

40. พิมพ์ข้อความ เขต/อาเภอ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

41. พิมพ์ข้อความ เขต/อาเภอ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

42. พิมพ์ข้อความ จังหวัด แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

43. พิมพ์ข้อความ รหัสไปรษณีย์ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

44. พิมพ์ข้อความ เบอร์โทรศัพท์ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

45. พิมพ์ข้อความ มือถือ แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

46. พิมพ์ข้อความ E-mail แล้วคลิกปุ่ม Text Field จะปรากฏกรอบ

47. พิมพ์ข้อความ คลิกเมนู FilePreview in Brower  iexplore จะได้ผลลัพธ์

การทาฟอร์มแบบ Check Box



Check Box คือ การสร้างปุ่มที่ใช้สาหรับคลิกเลือกว่าต้องการหัวข้อใดบ้าง มีขั้นตอนดังนี้

1. พิมพ์ข้อความที่ต้องการใช้ทา Check Box บนหน้าต่างทางาน

2. คลิกขวาวางเคอร์เซอร์ด้านหน้าของหัวข้อที่ต้องการทา Check Box

3. คลิกปุ่ม  จากเครื่องมือ Fromes

4. จะปรากฏกรอบ Check Box

5. ให้ทาเช่นนี้กับทุกหัวข้อที่ต้องการทา Check Box

6. คลิกเมนู File Preview in Browseriexplore

7. จะได้ผลลัพธ์แบบ Check Box

Reset

การทาปุ่ม Submitดท้และ ปุ่ม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 เป็นยกเลิก

11. คลิกเมนู File  Preview in Browser iexplore

12. จะปรากฏแบบฟอร์มเสร็จเรียบร้อย

ส่วนประกอบของเลเยอร์

1. หูแลเยอร์ มีไว้เพื่อดึง หรือลากเลเยอร์ไปตามตาแหน่งที่ต้องการ

2. จุดปรับขนาด มีจุดสีดาแปดจุดใช้ในการปรับขนาด ย่อ-ขยายเลเยอร์





วิธีการสร้างเลเยอร์

1. คลิกป้ายคาสั่ง Layer บนแถบเครื่องมือ Insert

2. คลิกปุ่ม Draw Layer

3. ลากเมาส์สร้างเลเยอร์ให้ได้กรอบสี่เหลี่ยมขนาดตามต้องการ

4. คลิกเมาส์วางเคอเซอร์ในพื้นที่ของเลเยอร์ พิมพ์ข้อความ หรือ นารูปมาวางภายในเลเยอร์

5. คลิกป้ายคาสั่ง Common

6. คลิกปุ่ม

7. ้

คลิกเลือกรูปภาพที่ตองการ แล้วคลิกปุ่ม ok

8. จะปรากฏรูปภาพในเลเยอร์

9. ่

ทดลองเลือเลเยอร์ โดยเลื่อนเมาส์วางที่หูเลเยอร์ ให้มีลูกศร 4 หัวแล้วเลื่อนไปมา

การกาหนดค่าเลเยอร์เพิ่มเติมด้วย

1. Properties

คลิดเมาส์เลเยอร์ให้มีจุด 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

- Z-Index คือ Stacking Order ใช้ในการเปลี่ยนลาดับเลเยอร์มีตัวเลือกต่าง ๆ เช่น

- Default โดยส่วนใหญ่ Browser จะใช้คาว่า inherit

- Inherit ให้ใช้ค่าของ Visibility ของเลเยอร์ที่เซ็ตไว้

- Visible ให้แสดงเลเยอร์

- Hidden ให้ซ่อนเลเยอร์

- Bg Image คือเลือกรูปภาพพื้นหลังของเลเยอร์เลือกที่ไอคอนโฟลเดอร์

- Bg Color คือปรับแต่งเลือกสีพื้นหลังของเลเยอร์

- ้ ้ ้

Overflow คือ ตังค่าแสดงเนือหาเลเยอร์ หรือ การตังค่าเผื่อรูปภาพ ที่มีขนาดใหย๋กว่าเลเยอร์

- Clip คือ การจากัดส่วนการแสดงผลโดยมีตาแหน่ง L (Left) , R (Right),T (Top),B (Bottom)

การเรียกใช้งาน Layer Palette

1. คลิกเมนู Window

2. คลิกรายการ Others

3. คลิกรายการ Layer หรือกดปุ่ม F12

4. จะปรากฏหน้าต่าง Layer Palette

ประโยชน์ของ Layer Palette



1. ใช้ในการบอกตาแหน่งของเลเยอร์ทาให้ทราบได้ว่าเลเยอร์ใดอยู่บริเวณตาแหน่งใด

2. สามารถเปลี่ยนตัวเลขที่อยู่ทางช่อง z ด้านขวาเพื่อจัดลาดับเลเยอร์

3. เมื่อต้องการจะเรียกใช้เลเยอร์ใดสามารถคลิกที่ชื่อเลเยอร์ภายในช่อง Layer Palette นั้น จะทาให้เล

เยอร์ที่อยู่ในหน้าต่างทางานก็จะถูกเรียกไปด้วย โดยสังเกตจะปรากฏจุด Handle

4. คลิกเมาส์ที่เลเยอร์ 1 แล้วคลิกปุ่ม Ctrl ค้างไว้ ลากไปไว้ในเลเยอร์ 2 จะทาให้เลเยอร์ซ้อนกัน

5. ถ้าคลิกสัญญลักษณ์รูปดวงตา ใช้ในการกาหนดว่าจะแสดงหรือไม่แสดงเลเยอร์

6. สามารถป้องกันการซ้อนทับของเลเยอร์ โดยคลิกเครื่องหมาย  หน้าคาว่าPrevent Overlaps

การจัดวางเลเยอร์ด้วยกริด (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: เลือกสีของเส้นกริด

- Show Grid: แสดงเส้นกริด

- Snap to Grid: การวางเลเยอร์ใกล้เส้นกริด

- Spacing: กาหนดขนาดของช่องกริด ถ้าตัวเลขน้อย จะได้ตารางช่องเล็ก ตัวเลขมากจะได้ชองใหญ่ ่

- Display: เลือกว่าจะแสดงเส้นกริดแบบใด ระหว่าง Line คือ แบบเส้น Dote คือ แบบจุด

การแปลงเลเยอร์เป็นตาราง



การออกแบบเลเยอร์สามารถกาหนดรายระเอียด และขนาดได้สะดวกกว่าการใช้ตารางหรือสร้างเล

เยอร์ก่อนแล้วค่อยแปลงเป็นตารางทีหลังก็ได้

1. คลิกป้าย Layour บนแถบ Insert

2. คลิกปุ่ม สร้างเลเยอร์บนหน้าต่างทางาน

3. คลิกป้าย common

4. ปุ่ม แทรกรูปภาพในเลเยอร์

5. คลิกเมนู Modify

6. คลิกรายการ Convert

7. คลิกรายการ Layers to Table

8. ้

ปรากฏหน้าต่างตังค่า Convert Layers Table

9. คลิกปุ่ม ok

10. รอสักครู่เลเยอร์จะถูกเปลี่ยนเป็นตาราง

การแปลงตารางเป็นเลเยอร์

ั

ตารางแปลงตารางเป็นเลเยอร์ มีลกษณ์และขั้นตอนคล้ายกับการแปลงเลเยอร์เป็นตาราง โดยมีขั้นตอน

ดังนี้



1. คลิกเมนู Modify

2. คลิกรายการ Convert

3. คลิกรายการ Tables to Layers

4. จะปรากฏหน้าต่าง Convert Tables to Layers

5. คลิกปุ่ม ok

6. ตารางจะถูกเปลี่ยนเป็นเลเยอร์เหมือนเดิม

การสร้างภาพเคลื่อนไหวด้วยTimelines

Timelines หรือ เส้นเวลาเป็นส่วนพิเศษที่ช่วยให้วัตถุ สามารถเปลี่ยนตาแหน่ง ขนาด หรือลักษณะการ

แสดงผลแบบเคลื่อนไหวแบบออบเจ็คได้

 สร้างเลเยอร์ บนหน้าต่างการทางาน

 คลิกปุ่มเพื่อใส่รูปภาพลงในเลเยอล์

 จะปรากฏกรอบโต้ตอบ ให้คลิกเลือกรูปภาพที่ต้องการใส่ลงในเลเยอร์ แล้วคลิกปุ่ม ok

 จะปรากฏรูปภาพภายในเลเยอร์ ให้ปรับขนาดรูปภาพให้เหมาะสมไม่ควรใหญ่เกินไป

 คลิกเมนู Window

 คลิกรายการ Others

 คลิกรายการTimelines

 จะปรากฏพาเนล Timelines

 คลิกเลเยอร์ให้มีจุดล้อมรอบ

 คลิกเมนู Modify  Timeline  Add Object to Timeline

 จะปรากฏหน้าต่าง แสดงคาเตือน ให้คลิกปุ่ม ok

 จะปรากฏแถบการเคลื่อนที่ที่เรียกว่า Animation bar

 ื่

พิมพ์ชอเลเยอร์ ช่อง Layer ID ว่า Logo

 คลิกเมาส์คีย์เฟรมจุดสุดท้ายของแถบเคลื่อนที่

15. ่

คลิกเลื่อนเลเยอร์ไปวางยังตาแหน่งทีต้องการเคลื่อนที่ เช่น เลื่อยไปวางด้านหน้าจะปรากฏเส้นการ

เคลื่อนที่

16. ถ้าต้องการให้เส้นการเคลื่อนที่เป็นเส้นโค้ง ให้กดปุ่ม Ctrl ค้างไว้

17. คลิกที่เฟรมตรงส่วนที่ต้องการให้โค้ง เช่น ตรงกลาง ให้คลิกเฟรม 10

18. คลิกเมนู Modify  Timeline Add Keyframe

19. ่

ให้คลิกหูดึงด้านบนเลเยอร์เพื่อเลือนเส้นการเคลื่อนที่ให้โค้งขึ้น

20. จะได้เส้นการเคลื่อนที่โค้ง

21. คลิกปุ่ม ➨ Play ในพาเนล Timelines ค้างไว้เพื่อดุการเคลื่อนที่ของภาพ หรือ

กาหนด การแสดงผลบนแถบควบคุมการแสดงผลดังนี้

22. ทดลองกาหนดความเร็วช่อง Fps 5 ความเร็วของการเคลือนที่จะช้าลง ่

23. ่

คลิกเครื่องหมาย √ หน้าสี่เหลียม Autoplay แล้วคลิกปุ่ม ok

24. ทดลองดูผลที่ได้ในเว็บบราวเซอร์ กดปุ่ม F12 หรือคลิกเมนู FilePreview

in Browser คลิกรายการ iexporer

25. ปรากฏหน้าต่าง Internet explorer การเคลื่อนที่ของรูปภาพ

26. ให้คลิกเคลื่องหมาย √หน้าสี่เหลี่ยม Loop กาหนดให้แสดงแบบวนรอบ

27. ให้กดปุ่ม F12 เพื่อดูผลที่ได้ในเว็บบราวเซอร์อีกครั้ง จะวนรอบไปเรื่อย ๆ

การเคลื่อนที่แบบอิสระ



1. สร้างเลเยอร์ บนหน้าต่างการทางาน

2. คลิกปุ่ม ใส่รูปภาพลงในเลเยอร์

3. จะปรากฏหน้าต่างให้คลิกเลือกรูปภาพที่ต้องการใส่ลงในเลเยอร์ แล้วคลิกปุ่ม ok

4. จะปรากฏรูปภาพลงในเลเยอร์ ให้ปรับขนาดของรูปภาพให้เหมาะสมแล้วคลิกให้มีจุด

ล้อมรอบ

5. คลิกเมนู ModifyTimelineRecord Path of Layer

6. คลิกหูเลเยอร์ลากไปทางซ้ายตามเส้นทางที่ต้องการเคลื่อนที่

7. ปรากฏหน้าต่าง Dreamweaver คลิกปุ่ม ok

8. ่

คลิกปุ่ม Play ค้างไว้เพื่อดูการเคลื่อนทีของภาพ

9. ทดลองดูผลที่ได้ในเว็บบรางเซอร์ กดปุ่ม F12

การเคลื่อนที่พร้อมกันหลายเลเยอร์

1. สร้างเลเยอร์บนหน้าต่างการทางาน 2 เลเยอร์

2. เลเยอร์แรกให้พิมพ์ข้อความ เลเยอร์ที่สองให้ใส่รูปภาพ

3. คลิกเลเยอร์แรกให้มีจุดล้อมรอบ

4. คลิกเมนู Modify  Timeline  Add Object to Timeline

5. ี

คลิกเลเยอร์ที่สองให้มจุดล้อมรอบ

6. คลิกเมนู Modify  Timeline  Add Object to Timeline

7. คลิกเมาส์เฟรมจุดสุดท้ายของแถบเคลื่อนที่ Text

8. คลิกลากหูเลเยอร์ของข้อความเลื่อนไปทางขวา

9. คลิกเมาส์คีเฟรมจุดสุดท้ายของแถบเคลื่อนที่ Logo

10. คลิกลากหูเลเยอร์ของรูปภาพเลื่อนไปทางซ้าย

11. คลิกเครื่องหมาย √หน้าสี่เหลี่ยม Autoplay แล้วคลิกปุ่ม ok

12. ใหกดปุ่ม F12 เพื่อดูผลที่ได้ในเว็บบราวเซอร์

การปรับตาแหน่งคีย์เฟรม

1. ้

ลากคีย์เฟรมสุดท้ายเลื่อนไปยังตาแหน่งที่ตองการ

2. ่

กดปุ่ม Alt ค้างไว้ถ้าต้องการเลือนคีย์เฟรมบางตาแหน่ง

การเปลี่ยนจุดเวลาเริ่มต้นของการเคลื่อนที่

1. ่ ่

เลือกแถบการเคลื่อนทีที่ต้องการ หรือกดปุม Shift ถ้าต้องการเลือกหลาย ๆ แถบ

2. ลากแถบการเคลื่อนที่ไปทางขวาเพื่อเปลี่ยนจุดเริ่มต้น

การเพิ่ม/ลบเฟรมในเส้นเวลา

1. ั

คลิกขวาที่ตาแหน่งเฟรม จะปรากกเมนูลด ให้เลือกให้เลือก Add Frame เพิ่มเฟรมหรือ Remove Frame

ลบเฟรม

2. คลิกเมนู Modify Timeline  Add Frame เพิ่มเฟรมหรือ

3. คลิกเมนู Modify Timeline  Remove Frame เพื่อลบเฟรม

การเพิ่มเส้นเวลา

1. คลิกเมนู ModifyTimeline Add Timeline

การเรียกใช้เส้นเวลา

1. ่

เลือกชือเส้นเวลาจากพาเนล Timelines

่

การเปลี่ยนชือเส้นเวลา

่

การเปลี่ยนชือเส้นเวลา

 ้

เลือกเส้นเวลาที่ตองการเปลี่ยนชื่อ

 คลิกเมนู ModifyTimelineRename Temeline

 พิมพ์ชอลงในส่วนของชื่อเส้นเวลาในพาเนล Temeline

ื่

 พิมพ์ชอลงในช่อง Timeline Name:

ื่

การนาไฟล์ 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 ่

7. จะปรากฏผลลัพธ์ที่ได้บนหน้าจอ

วิธีสร้างปุ่มกดด้วย Flash Button

1. ่

วางเคอร์เซอร์บนพื้นทีการทางาน

2. คลิกเมนู InsertInteractive ImagesFlash Button

3. ่

จะปรากฏหน้าต่างเตือนให้บันทึกไฟล์กอนใช้งานไฟล์ Flash Button

4. ่

จะปรากกหน้าต่าง Insert Flash Buton ขึ้นมาให้เลือกแบบปุมที่ต้องการ

5. จะได้ปุ่ม Flash ตามที่เลือก

6. คลิกสัญลักษณ์ให้มีจุดล้อมรอบ

7. ปรับตาแหน่งและขนาดของ Flash Button ที่แถบพาเนล Properties

6. คลิกเมนู FilePreview in Browseriexplore

7. จะปรากฏผลบนหน้าต่าง Browser Internet Explorer

8. ่

ทดสอบคลิกปุ่ม Flash Button ชือ Home เลือกบนหน้าต่าง Internet Explorer ที่จะแสดงผลบนหน้าจอ

การสร้างข้อความจุดเชื่อมโยงด้วย Flash

Text

่

Flash text เป็นส่วนที่ใช้ในการสร้างจุดเชือมโยงไปยังตาแหน่งต่าง ๆ เมื่อผู้ชมคลิกที่บริเวณข้อความ

เชื่อมโยงไปยังตาแหน่งที่กาหนดได้

 คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างการทางาน

 คลิกเมนู InsertInteractive ImagesFlash Text

 ปรากฏหน้าต่าง Insert Flash Text กาหนดค่าต่าง ๆ

 คลิกปุ่ม Ok จะปรากฏออบเจ็กท์ของ Flash text

 กดปุ่ม F12 ดูผลบนเว็บบราวเซอร์

การใส่ Shockwave movie,ActiveX

control,Java applet

1. คลิกเมาส์วางเคอร์เซอร์บนหน้าต่างทางาน

2. คลิกเมนู InsertMediaShockwave หรือ ActiveX หรือ Java Applet หรือเลือกจากแท็บ Media

3. ้

เลือกไฟล์ที่ตองการ

4. คลิก ok

การใส่ไฟล์เสียงลงในเว็บเพจ

้ ่

การใส่ไฟล์เสียงที่สามารถนามาใช้ได้จะมีอยู่ดวยกันหลายชนิด ซึงตาละชนิดก็จะมีข้อดีข้อเสียใน

้ ่

การนามาใช้ในเว็บเพจต่างกัน อีกทังยังต้องการโปรแกรมเสริม (Plug-in) ในการแสดงผลทีต่างกัน

ขั้นตอนการใส่ไฟล์เสียงลงในเว็บเพจ

1. คลิกเมาส์วางเคอรืเซอร์บนหน้าต่างการทางานตาแหน่งที่ต้องการ

2. คลิกเมนู Insert MediaPlugin หรือคลิกปุ่ม

3. จะปรากฏไฟล์เสียง

4. คลิกปุ่ม ok

5. จะปรากกสัญลัษณ์การใส่ไฟล์เสียง

6. กดปุ่ม F12 หรือ คลิกเมนู FilePreview in Browser iexplorer

7. จะได้ผลลัพธ์บนหน้าต่างบราวเซอร์

8. สามารถคลิกปุ่ม Play Pause หรือ Stop ไฟล์เสียงได้

โครงสร้างของ CSS

รูปแบบโครงสร้างของ Style Sheets ของ CSS จะใช้แท็ก ในการกาหนดคุณลักษณะของเว็บ

่

เพจ เช่น รูปแบบตัวอักษร ขนาด สี ซึงสามารถกาหนดให้เชื่อมโยงไปยังเว็บเพจ หรือสร้างจุดเชื่อมโยงไปยัง

ไฟล์ *.CSS ที่เก็บรูปแบบ CSS ไว่ได้ โครงสร้างของ CSS มีรูปแบบดังนี้



การเปิดหน้าต่าง CSS Styles Sheets

1. คลิกเมนู window

2. เลือกรายการ CSS Styles

3. จะแสดงหน้าต่าง CSS Styles

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

5. คลิก ช่อง Define In: กาหนดที่เก็บ CSS Style Sheet ต้องการเลือกเก็บไว้ที่ใด

เลือก New Style Sheet File ให้ออกแบบบันทึกเป็นไฟล์ .CSS ใหม่

เลือก This Document Onlyให้ออกแบบให้ใช้ได้กับเว็บเพจนี้เท่านั้น

6. คลิกปุ่ม Ok

7. ปรากฏหน้าต่าง Save Style Sheet File As

8. ้ ่

เลือกโฟลเดอร์ที่เก็บไฟล์และตังชือไฟล์

9. คลิกปุ่ม Save

10. ปรากฏหน้าต่าง CSS Style Sheet File As

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

การเปิดใช้งาน CSS Style Sheets



1. เลือกข้อความที่ต้องการจัดรูปแบบให้มีแถบสี

2. คลิกเมาส์ที่ Style ที่ต้องการกาหนดรูปแบบ ให้หน้าต่าง CSS Style

3. จะได้ผลลัพธ์ตามต้องการ

4. การดูไฟล์ที่บันทึกไว้ ดับเบิ้ลคลิกไฟล์ .CSS เพื่อดูโค้ด จะปรากฏป้ายแถบ Style ที่แถบด้านล่างจะปรากฏ

Code บนหน้าต่างทางาน

การแก้ไข CSS Style Sheets

1. คลิก Edit Style ให้มีจุดสีดา

2. ดับเบิ้ลคลิกชื่อไฟล์ CSS คลิกขวาที่ชื่อไฟล์ CSS จะปรากฏเมนูลัด

3. คลิกรายการ Edit

4. จะปรากฏหน้าต่าง CSS Style Definition For .unnamed 1

5. แก้ไขรายการต่าง ๆ แล้วคลิก Ok

การเปิดใช้งาน CSS Style Sheets สาเร็จรูป

1. คลิกเมนู Fine

2. คลิกรายการ New

3. ปรากฏหน้าต่าง New Document

4. คลิกรายการ CSS Style Sheets ให้มีแถบสี

5. ด้านขวาแสดงรายชื่อไฟล์ ให้เลือก Style ที่ต้องการ ดูตัวอย่างในช่อง Preview

6. คลิกปุ่ม Create

การจัดเมนูด้วย

HTML Style ใช้สาหรับสร้างรูปแบบตัวอักษร ให้กับข้อความที่เลือกหรือย่อหน้านั้น ๆโดยจะ

กาหนด Attribute ให้กับตัวอักษร จะทาให้สามารถสร้างข้อความได้รวดเร็วและง่ายขึ้น

การสร้าง HTML Style

1. คลิกปุ่ม ป้าย HTML Style

2. ปรากฏหน้าต่าง Define HTML Style

3. ตั้งชื่อช่อง Name: Hstyle 1

4. Apply to: เลือกแบบ Selection

5. Font: กาหนดรูปแบบตัวอักษรเลือก Abgsana UPC

6. Size: กาหนดขนาดของตัวอักษร เลือก 3

7. Color: กาหนดสีตัวอักษร สีน้าเงิน

8. Style: กาหนดลักษณะตัวอักษรเลือก B ตัวหนา

9. คลิกปุ่ม Ok

10. จะได้ไฟล์ HStyle 1

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

การเปิดใช้งาน HTML Style

ก่อนใช้งาน HTML Style ให้สังเกตสัญลักษณ์ของ HTML Style

- สัญลักษณ์ แสดงว่าเป็นการกาหนดแบบ Selection

- สัญลักษณ์ แสดงว่าเป็นการกาหนดแบบ

1. เลือกข้อความให้มีแถบสี กรณีใช้แบบ Selection

2. คลิกไฟล์ HStyle 1

3. สังเกตผลที่ได้บนหน้าจอภาพ จะเปลี่ยนไปตามรูปแบบที่กาหนดไว้

3. คลิกเมาสวางเคอร์เซอร์ที่ข้อความบรรทัดใดก็ได้

4. คลิกเมาส์ไฟล์ Hparagraph 1

5. สังเกตผลที่ได้บนหน้าจอภาพ จะเปลี่ยนไปตามรูปแบบที่กาหนดไว้

การยกเลิกรูปแบบ HTML Style



1. คลิกเลือกข้อความที่ต้องการยกเลิกรูปแบบให้มีแถบสี

2. คลิก ไฟล์ที่ป้าย HTML Style มีรูปแบบการยกเลิก 2 รายการ คือ

- ่

Clear Selection Style เพื่อลบรูปแบบของข้อความแบบตัวเลือกทีกาหนดไว้

- Clear Paragraph Style เพื่อลบรูปแบบของย่อหน้าที่กาหนดไว้

3. ่

ให้คลิกเลือกรายการทีต้องการใช้งาน

4. สังเกตดูผลลัพธ์บนจอภาพ

การแก้ไข HTML Style

1. ดับเบิ้ลคลิกชื่อไฟล์ HTML Style จะปรากฏหน้าต่างตัวเลือกให้แก้ไข

2. ให้แก้ไขรูปแบบที่ต้องการเปลี่ยนแปลงใหม่ เช่น เปลี่ยนขนาดตัวอักษรเป็น 6

3. เปลี่ยนช่อง Color : เป็นสีเขียว

4. คลิกปุ่ม Ok

5. ่

ทดลองคลิกชือไฟล์ Hparagraph 1 ใหม่อีกครั้ง เพื่อดูผลที่ได้บนหน้าจอภาพ

การใช้ Behaviors

Behaviors เป็นการเพิ่มสีสัน หรือเพิ่มลูกเล่นต่าง ๆ ให้กับเอกสารเว็บเพจ เช่นการทา

่

ภาพเคลื่อนไหว หรือตอบสนองต่าง ๆ ตามทีผู้ใช้ต้องการ การใช้ Behaviors ใน Macromedia

Dreamweaver MX นั้น เป็นการสร้าง จาวาสคลิปต์ในรูปแบบของคาสั่งสคลิปต์



การสร้างเมนูย่อย Popup Menu

Popup Menu เป็นเครื่องมือที่ใช้กันอยู่ทั่วไปตามเว็บไซต์ต่าง ๆ ช่วยให้สะดวกในการค้นหาข้อมูลบนเว็บ

โปรแกรม Dreamweaver MX มีความสามารถในสร้างเมนูย่อยได้สะดวกและง่าย

่

ขั้นตอนการสร้างเมนุยอย Popup Manu

1. สร้างตาราง 1 Rows 3 Columns บนจอภาพ

2. พิมพ์ข้อความหัวข้อเมนู

3. ี

เลือกข้อความช่อง ดาวโหลด ให้มแถบสีดาคลุม

4. คลิก Browse for File ช่อง Link

5. คลิกเลือกไฟลื Menu.html ลิงค์ที่ต้องการกาหนด

6. คลิกปุ่ม Ok

7. ้

ปรากฏชื่อไฟล์ที่ตองการเชื่อมโยง ช่อง Link

8. คลิกที่ปุ่ม ของหน้าต่าง Behavior

9. คลิกรายการ Show Pop-Up Menu

10. ปรากฏหน้าต่าง Show Pop-Up Menu

11. พิมพ์ข้อความช่อง Text: Programs

12. คลิก ข้อความช่อง Target : เลือก _blank

13. คลิก ช่อง Link : เลือกเว็บเพจที่ต้องการกาหนด

14. ่

คลิกเมนู จะเพิมรายการแสดงด้านล่าง

15. คลิกป้าย Appearance เพื่อกาหนดลักษณะรูปแบบของ Pop – Up Menu

16. ช่อง Vertical Menu คลิก เลือกรูปแบบแนวตั้งหรือแนวนอน

17. ช่อง Font: กาหนดรูปแบบตัวอักษร

18. ช่อง Size: กาหนดขนาดตัวอักษร

19. ช่อง Up state: และ Over state: กาหนดรูปแบบเมนู

20. ่

คลิกป้าย Advanced เพือกาหนดขนาดของ Pop-Up Menu

21. คลิกป้าย Position เพื่อกาหนดตาแหน่งการวาง Pop-Up Menu

22. คลิก Menu Position รูปที่ 2 ให้ถูกเลือก

23. คลิกปุ่ม OK

24. จะปรากฏสัญลักษณ์ บริเวณที่ทา Pop-up Menu

25. คลิกเมนู Fine คลิก Preview in Browser iexplore จะปรากฏผลลัพธ์หน้าต่าง Internet Explorer

การสมัครขอใช้พื้นที่ฟรีบนอินเตอร์เน็ต

่

การสมัครขอใช้พื้นที่ฟรีบนอินเตอร์เน็ต มีเว็บไซต์ที่ให้บริการพื้นทีฟรีอยู่มากมาย แต่จะมีโฆษณาของ

เว็บไซต์ที่ขอใช้บริการฟรีติดอยู่ด้วย เพื่อเป็นการประชาสัมพันธ์ให้กับเว็บไซต์ที่เราใช้บริการฟรี

ตัวอย่างรายชื่อเว็บไซต์ที่ให้บริการฟรี ( ของต่างประเทศ )

 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

่

ตัวอย่างรายชือเว็บไซต์ที่ให้บริการฟรี ( ของไทย )

 www.thai.net 10 mb

 www.thaitopsites.com 20 mb

 www.thai4free.com ไม่จากัดเนื้อที่

 www.se-ed.net 15 mb

 www.thcity.com 11mb

 www.etccafe.com ไม่แน่ชัด

ขั้นตอนการสมัครขอใช้พื้นที่ฟรีของ 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

11. จะปรากฏหน้าต่างขั้นตอนสุดท้ายจะได้ URL เว็บไซต์ที่ตั้งไว้แสดงในตาราง

12. ถ้าต้องออกแบบเว็บผ่านทาง geocities.com ให้คลิกปุ่ม Build Your Web Site Now !

13. จะปรากฏหน้าต่าง geocities มีชื่อ URL ที่สมัครไว้พร้อมมีการนาเสนอขั้นตอนการออกแบบเว็บผ่านทาง

geocities.com มาให้อีกด้วย

การ ( 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

7. ปรากฏหน้าต่างเริ่มการอัพโหลดแบบไฟล์ Browser

8. ้

คลิกปุ่ม Browse… เพื่อหาไฟล์เว็บเพจที่ตองการอัพโหลด ให้เลือกไฟล์แรกคือ Index.html ก่อนเป็นหน้า

่

แรกสุด เลือกไฟล์ชองละ 1 ไฟล์จนครบหมด

9. ให้คลิกปุ่ม Upload Files

10. เรียบร้อยแล้ว พิมพ์เว็บไซต์ที่ตั้งไว้ทดสอบผลลัพธ์บนอินเตอร์เน็ต

ขั้นตอนการอัพโหลดแบบ FTP

้ ้

ต้องติดตังโปรแกรมก่อนการอัพโหลด ในที่นี้ใช้โปรแกรม CuteFTP เริ่มจากการติดตังโปรแกรม CuteFTP ก่อนจึง

ทาการอัพโหลด

การติดตั้งโปรแกรม 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 ) เว็บที่สามารถอัพโหลดแบบ

FTP ได้นั้น จะมีการแจ้ง FTP Address ของเว็บให้ทราบทาง E-mail หลังจากที่ได้ลงทะเบียนขอเนื้อที่เรียบร้อย

12. คลิกปุ่ม Next

13. ั้

ปรากฏหน้าต่างให้ใส่ User name และ Password ตามที่ได้ตงไว้เมื่อตอนลงทะเบียนสมัครขอพื้นที่

14. คลิกปุ่ม Next

15. คลิกปุ่ม เพื่อเลือก Folder ที่เป็นค่าตั้งต้นในการอัพโหลด ( หรือถ้าไม่ต้องการกาหนดให้ข้ามขั้นตอน )

16. คลิกปุ่ม Next

17. คลิกปุ่ม Finish เป็นอันเสร็จเรียบร้อย

ขั้นตอนการใช้โปรแกรม Cite FTP ในการอัพโหลด



1. คลิกปุ่ม Start

2. คลิกรายการ Proframs

3. คลิกรายการ GlobalSCAPECuteFTP Home Cute FTPHome

4. ปรากฏหน้าต่างโปรแกรม และจะทาการเชื่อมต่อ Server ที่เราตั้งค่าไว้โดยอัตโนมัติ

การอัพโหลดโดยใช้โปรแกรม CuteFTP

มี 2 แบบ คือ

1. แบบที่ 1 คลิกไฟล์ ลากค้างไว้ แล้วปล่อยทางด้านขวา

1. เลือกคลิกไฟล์ 1 ไฟล์หรือหลาย ๆ ไฟล์พร้อมกัน

2. ลากค้างไว้แล้วปล่อยลงในหน้าต่างด้านล่าง

2. แบบที 2

1. เลือกคลิกไฟล์หลายๆ ไฟล์พร้อมกันให้มีแถบสี

2. คลิกเมาส์ขวาปรากฏเมนูลัด

3. คลิกรายการ Upload

4. โปรแกรมจะทาการอัพโหลดขึ้นบน Server

การใช้บริการ 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/freewebboard

3. ให้กรอกรายละเอียดในแบบฟอร์ม

4. คลิกปุ่ม Submit

5. เมื่อลงทะเบียนเรียบร้อยจะได้ที่ตั้งของเว็บบอร์ด

การขอใช้บริการสมุดเยี่ยม 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. คลิกปุ่ม ตกลง

6. ปรากฏหน้าต่างปรับค่าต่าง ๆ ของสมุดเยี่ยม กรอกรายละเอียดให้ครบ

7. คลิกปุ่ม ตกลง

8. จะปรากฏหน้าต่างสมุดเยี่ยมที่ใช้งานได้แล้ว

รายชื่อเว็บไซต์ที่ให้บริการตัวนับจานวนผู้เข้าชม

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:

User Password:

4. คลิกที่ข้อความว่า Sign up for a Free Counter

5. กรอกรายละเอียดต่าง ๆ ให้ครบ

6. คลิกที่ปุ่ม Sing Up

7. รอสักครู่ การลงทะเบียนเสร็จสมบูรณ์

8. คลิกที่ข้อความว่า Here เพื่อทาการ Login

9. ระบุช่อง User Login:

User Password:

10. คลิกปุ่ม Login

11. รอสักครู่จะปรากฏหน้าต่างให้คลิกรายการ Create Counter เพื่อออกแบบตัว Counter ได้หลาย ๆ แบบ โดยไม่ต้อง

สมัครใหม่

12. คลิกเลือกรูปแบบ Counter ช่อง Select a Counter Style:

13. ั้

พิมพ์ที่ตงเว็บไซต์ เช่น http://www.geocities.com / ampakultumyotin

14. คลิกปุ่ม Create Counter

15. รอสักครู่จะปรากฏหน้าต่างที่ได้สาหรับนาไปวางที่หน้าเว็บซต์ที่สร้างไว้

16. โค้ดที่ได้จากการสมัครขอใช้บริการตัวนับจานวนคนเข้าชมอง http://www.zcounter.com

17. ทดลองคัดลอกโค้ดที่ได้ข้างบนนี้ไปใช้ในโปรแกรม Dreamweaver MX เพื่อดูผลลัพธ์ที่ได้บนจอภาพ