การเข้าสู่โปรแกรม Macromedia Dreamweaver 4.0
1. เลื่อนเม้าส์คลิกปุ่ม Start
2. เลือก Program
3. เลือก Macromedia Dreamweaver 4.0

การใช้งานโปรแกรม
ก่อนจะเริ่มการเขียนเวปเพจของแต่ละหน้า ควรทำความรู้จักกับส่วนประกอบต่าง ๆ ของโปรแกรม ซึ่งมีส่วนประกอบที่สำคํญดังนี้
1. Title bar
2. Menu bar
3. Tool bar
4. Object Panel
5. Document Window
6. Context menus
7. Property
8. Tag Selector
9. Window Size pop-up Menu
10. Document size and Estimate Download time
11. Launcher bar

ส่วนประกอบของ Objects panel ในหมวด Characters
1. Line Break การขึ้นบรรทัดเพื่อให้ข้อมูลเป็นอิสระต่อกัน
2. Nonbreaking space การเว้นระยะห่างของข้อความบรรทัดเดียวกัน
3. Copyright แทรกสำเนาถูกต้อง ห้ามลอกเลียนแบบ
4. Registered Trademark แทรกสัญลักษณ์ลงทะเบียนเครื่องหมายการค้า
5. Trademark แทรกสัญลักษณ์เครื่องการค้า
6. Pound แทรกสัญลักษณ์เงินปอนด์
7. Yen แทรกสัญลักษณ์เงินเยน
8. Euro แทรกสัญลักษณ์เงินยูโร
9. Left Quote แทรกเครื่องหมายคำพูดเปิด
10. Right Quote แทรกเครื่องหมายคำพูดปิด
11. Em-Dush แทรกเครื่องหมายเส้นขีดระหว่างตัวอักษร
12. Other แทรกสัญลักษณ์เครื่องหมายอื่น ๆ
เมื่อมีการเขียนเวปเพจ เราสามารถที่จะดูการแสดงผลตัวอย่างของเวปเพจได้โดยกดปุ่ม F12 ที่แป้นคีย์บอร์ด
การบันทึกงาน สามารถบันทึกงานได้ 3 วิธีคือ
1. บันทึกไฟล์งานในรูปแบบปกติ
2. บันทึกไฟล์เพิ่มขึ้น หรือบันทึกทับไฟล์เดิม
3. บันทึกไฟล์เป็นต้นฉบับ โดยไม่สามารถแก้ไขได้
การบันทึกงานรูปแบบปกติ
1. คลิกที่เมนู File > Save
2. ประกฎหน้าต่าง Save as
3. ตั้งชื่อและคลิกปุ่ม Save
การบันทึกงานเพิ่มขึ้น หรือบันทึกทับไฟล์เดิม
1. คลิกที่เมนู File > Save as
2. ปรากฎหน้าต่าง Save as
3. คลิกปุ่ม Save จะบันทึกทับลงข้อมูลเดิม
การเปิดงานเก่าที่บันทึกไว้
1. คลิกที่เมนู File > Open
2. ปรากฎหน้าต่าง Open
3. เลือก File ที่บันทึกไว้ เพื่อเปิดมาแก้ไขงานเก่าได้

การตกแต่งเวปเพจด้วยรูปภาพ การสร้างเวปไซด์โดยทั่วไปส่วนใหญ่ไม่เพียงแค่มีตัวอักษรให้อ่านจนหลายตาเท่านั้น แต่จะมีรูปภาพประกอบในหน้าเวปเพจด้วย
การนำภาพมาสร้างเป็นพื้นหลัง
1. คลิกที่เมนู Modify > Pagepropreties
2. ปรากฎหน้าต่าง Pagepropreties คลิกปุ่ม Browse
3. ปรากฎหน้าต่าง Select Image Source เลือกไฟล์รูปที่ต้องการทำเป็นพื้นหลัง และคลิกปุ่ม Select และตอบ No

การเปลี่ยนสีให้พื้นหลัง
1. คลิกที่เมนู Modify > Pageperties
2. ปรากฎหน้าต่าง Page Properties เพื่อเปลี่ยนสีที่ต้องการ
3. คลิกปุ่ม OK สีพื้นหลังก็จะเปลี่ยนตามที่เลือก

ส่วนประกอบของ Object Panel ในหมวด Common
1. Image การแทรกไฟล์รูปภาพลงตำแหน่งที่ต้องการ
2. Rollover Image ใช้ภาพสองภาพเพื่อสลับการชม
3. Table การแทรกตาราง
4. Tabular Data นำไฟล์ข้อมูลเข้ามา โดยแสดงผลในรูปของตาราง
5. Layer เพื่อกำหนดชั้นการทำงาน
6. Navigation bar นำรูปภาพเข้ามาเพื่อเป็นแถบลิงค์
7. Horizontal Rule การแทรกแถวในแนวนอนขึ้นมา ณ ตำแหน่งที่เม้าส์อยู่
8. E-mail Link ใส่ E-mail ลงไปพื้นงาน
9. Date การใส่รูปแบบวันที่
10. Server-side Indude ปรากฎหน้าต่างเพื่อเลือกไฟล์ต้นฉบับบน Server
11. Fireworks HTML การแทรกงานจากโปรแกรม Fireworks
12. Flash การแทรกงานจากโปรแกรม Flash
13. Flash Button ปรากฎหน้าต่างให้สร้างปุ่มในรูปแบบ Flash
14. Flash Text การแทรกตัวอักษรจากโปรแกรม Flash
15. Shockwave การแทรกงานจากโปรแกรม Shockwave
16. Generator การแทรกงานจากโปรแกรม Generator

การแทรกรูปภาพจาก Object Palette
1. คลิกปุ่ม Insert Image ที่ Common Object
2. ปรากฎหน้าต่าง Select Image Source
3. เลือกรูปภาพที่ต้องการ คลิกปุ่ม Select
4. ปรากฎรูปภาพขึ้นบนพื้นงาน

การสร้างเลเยอร์ การนำข้อความหรือรูปภาพมาใส่ลงในเลเยอร์ ช่วยให้การจัดวาง เคลื่อนย้าย แก้ไขข้อมูลที่อยู่ในเลเยอร์
วิธีการสร้างเลเยอร์
1. คลิกปุ่ม Insert Layer ที่ Object Palette แล้วนำเมาส์มาวางไว้ที่พื้นงาน แดรกเม้าส์ให้เลเยอร์มีขนาดตามต้องการ
2. ปรากฎเลเยอร์พร้อมกับสัญลักษณ์ Layer Marker ขึ้นมา 1 เลเยอร์
การจัดวางเลเยอร์ด้วยกริด (Grid)

สามารถจัดวางเลเยอร์ให้แน่นอนโดยการใช้เส้นแบ่งช่วยในการจัดวาง
1. คลิกเมนู View > Grid > Show Grid
2. ปรากฎเส้นกริดขึ้นมาใช้งาน
กำหนดคุณสมบัติเส้นกริด
1. คลิกที่เมนู View > Grid > Edit Grid
2. ปรากฎหน้าต่าง Grid Settings เพื่อกำหนดคุณสมบัติ

Color เลือกสีเส้นกริด
Show Grid คลิกถูกเพื่อแสดงเส้นกริด
Snap To Grid คลิกลาก เพื่อสามารถวางเลเยอร์ชิดเส้นกริด
Spacing ระยะห่างระหว่างเส้นกริด ค่ายิ่งน้อยตารางยิ่งถี่
Display รูปแบบการแสดงเส้นกริด มี 2 รูปแบบ
- Line เส้น
- Dols จุด
การเรียกใช้งานหน้าต่างเลเยอร์ (Layer Palette)
1. คลิกเมนู Windows > Layers
2. ปรากฎหน้าต่างเลเยอร์ขึ้นมาบนพื้นงาน

การเลือกเลเยอร์ ได้ 2 รูปแบบคือ
1. การเลือกเลเยอร์เดียว สามารถทำได้ 3 วิธี
1.1 คลิกทีเลเยอร์ให้ปรากฎจุด Handle ที่พื้นงานโดยตรง
1.2 คลิกที่ Layer Marker
1.3 คลิกที่เลเยอร์จาก Layer Palette
2. การเลือกหลายเลเยอร์
2.1 คลิกที่เลเยอร์แรก
2.2 กดปุ่ม Shift ที่คีย์บอร์ดค้างไว้ และเลือกเลเยอร์อื่นที่ต้องการ

การจัดลำดับเลเยอร์
เลเยอร์มีลักษณะเหมือนแผ่นใสวางเรียงซ้อนทับกันอยู่ เลเยอร์ที่อยู่ลำดับล่างจะถูกบดบังด้วยเลเยอร์ลำดับบนที่สร้างไว้ล่าสุดเสมอ เราสามารถจัดลำดับตำแหน่งการวาง ด้วยวิธีการลากเม้าส์มาวางไว้ในเลเยอร์แต่ละชั้นเลเยอร์ได้

การนำเสนอข้อมูลให้กับผู้เข้ามาใช้งานเวปเพจ สามารถนำเสนอข้อมูลในรูปแบบตารางสำหรับข้อมูลบางประเภทก็ได้
ส่วนประกอบของตาราง มี 3 ส่วน คือ
1. แถว Row ข้อมูลในแนวนอน
2. คอลัมภ์ Colum ข้อมูลในแนวตั้ง
3. เซลล์ Cell ช่องของแถวและคอลัมภ์แต่ละช่อง
การเริ่มต้นสร้างตาราง
1. คลิกปุ่ม Insert Table ที่ Object Common Palette
2. ปรากฎหน้าต่าง Insert Table ให้คลิกปุ่ม OK

Row กำหนดจำนวนแถว
Columns กำหนดจำนวนคอลัมภ์
Width กำหนดความกว้างของตาราง
Border กำหนดขนาดเส้นขอบตาราง
Cell Padding กำหนดระยะห่างของข้อความในตาราง
Cell Spacing กำหนดความหว้างแต่ละเซลล์ในตาราง

3. ปรากฎตารางตามค่าที่กำหนดไว้

การใส่ข้อมูลลงในตาราง สามารถนำข้อมูลเข้ามา 2 รูปแบบ คือ
1. พิมพ์ข้อความลงในตาราง
2. นำรูปภาพเข้ามาในตาราง

การนำรูปภาพเข้ามาในตาราง
1. คลิกปุ่ม Insert Image ที่ Object Common Palette
2. ปรากฎหน้าต่าง Select Image Source เพื่อนำรูปภาพเข้ามาเลือกไฟล์รูปที่ต้องการ
3. คลิกปุ่ม Select
4. ปรากฎรูปภาพขึ้นมาบนพื้นงาน
การเลือกตาราง
1. คลิกที่ตารางใดก็ได้
2. คลิกที่เมนู Modify > Table > Select table หรือกด Ctrl+A ก็ได้
การเลือกแถว
1. คลิกตารางแรกในแถวที่ต้องการ
2. กด Mouse ค้างไว้ แล้วDrag ไปเท่าที่ต้องการ
การเลือกคอลัมภ์
1. คลิกที่ตารางแรกในคอลัมภ์ที่ต้องการ
2. กด Mouse ค้างไว้ แล้ว Drag ไปเท่าที่ต้องการ
การเลือกเซลล์
1. กดปุ่ม Ctrl ค้างไว้พร้อมกับคลิกเลือกเซลล์ที่ต้องการ
2. ข้อมูลของเซลล์นั้น ๆ จะถูกเลือกไว้
3. กดปุ่ม Ctrl ค้างไว้ พร้อมกับคลิกเลือกข้อมูลของเซลล์อื่น ๆ อีกจนครบตามต้องการ

การย่อขยายขนาดของตาราง
การย่อขยายเฉพาะแถวหรือคอลัมภ์
1. คลิกทีขอบของแถวหรือคอลัมภ์
2. ลากเม้าส์เลื่อนเส้นขอบไปมา เพื่อปรับขนาดความกว้างของแถวหรือคอลัมภ์
3. แถวหรือคอลัมภ์จะมีขนาดเปลี่ยนไป
การย่อขยายทั้งตาราง
1. คลิกที่ขอบตาราง
2. ลากเม้าส์ตารางจะมีขนาดเปลี่ยนไป
การแทรกแถว
1. คลิกที่แถว
2. คลิกที่เมนู Modify > Table > Insert Row เพื่อแทรกแถว
3. ปรากฎแกวเพิ่มขึ้น 1 แถว
การแทรกคอลัมภ์
1. เลือกทั้งคอลัมภ์ หรือใช้เม้าส์คลิกช่องที่ต้องการแทรก
2. คลิกที่เมนู Modift > Table > Insert Column เพื่อแทรกคอลัมภ์
3. ปรากฎคอลัมภ์เพิ่มขึ้น 1 คอลัมภ์ที่ต้องการ
การลบแถวหรือคอลัมภ์
1. ถ้าต้องการลบแถว คลิกที่แถวหรือเมื่อต้องการลบคอลัมภ์ ก็คลิกที่แถวหรือคอลัมภ์นั้น ๆ
2. คลิกเมนู Modify > Table > Delete เพื่อลบคอลัมภ์หรือแถว
3. คอลัมภ์ที่เลือกจะถูกลบทิ้งไป

การรวมเซลล์ในตาราง
1. คลิกที่แถวหรือคอลัมภ์ที่ต้องการรวมเซลล์
2. คลิกที่เมนู Modify > Table > Merge Cell เพื่อทำการรวมเซลล์ในตาราง
3. คลิกปุ่ม Merge Select Cell Using ที่อยู่ใน Properties
4. แถวหรือคอลัมภ์ที่เลือกจะถูกทำการรวมเซลล์เข้าด้วยกัน

การแยกเซลล์
1. คลิกที่แถวหรือคอลัมภ์ที่ต้องการแยกเซลล์
2. คลิกที่เมนู Modify > Table > Split Cell เพื่อทำการแยกเซลล์ในตารางปรากฎหน้าต่าง Split Cell เพื่อกำหนดค่าการแยกเซลล์
3. ปรากฎหน้าต่าง Split Cell ให้คลิกปุ่ม OK

Split Cell Info กำหนดการแยกเซลล์มี 2 เลือก
Row ต้องการแยกแถวในแนวนอน
Colomns หากต้องการแยกเซลล์ในแนวตั้ง
Number Of Rows กำหนดจำนวนที่ต้องการแยกเซลล์

4. แถวหรือคอลัมภ์จะถูกแยกออกจากกัน

การจัดเรียงข้อมูลในตาราง
1. จากข้อมูลที่สร้างขึ้นให้คลิกที่แถวหรือคอลัมภ์ที่ต้องการจัดเรียงข้อมูล
2. คลิกที่เมนู Commands > Sort Table เพื่อจัดเรียงข้อมูลในตาราง
3. ปรากฎหน้าต่าง Sort Table ให้คลิกปุ่ม OK

Sort By เลือกลำดับในการจัดเรียงข้อมูล
Order เลือกลักษณะการจัดเรียงตามตัวอักษรค่ามากไปหาค่าน้อย ค่าน้อยไปหาค่ามา
Then By เลือกข้อมูลที่ต้องการจัดเรียงเป็นอันดับถัดไป
Order เลือกลักษณะการจัดเรียงตามตัวอักษรหรือตามตัวเลข
Option มี 2 ตัวเลือก
- Sort Includes First Row เพื่อจัดเรียงข้อมูลรวมกับชื่อหัวข้อในแถวแรก
- Keep Trattributes With Sorted Row เพื่อให้คงค่าแท็ก TR ของตารางไว้
4. จากนั้นข้อมูลจะถูกเรียงตามที่กำหนดคำสั่งไป
การใส่รูปแบบตารางให้สวยงาม
1. ให้คลิกที่แถวหรือคอลัมภ์ที่ต้องการจัดเรียงข้อมูล
2. คลิกเมนู Commands > Format Table เพื่อเลือกรูปแบบตาราง
3. ปรากฎหน้าต่าง Format Table ให้เลือกรูปแบบตารางที่ต้องการ
4. คลิกปุ่ม OK
5. ตารางจะมีรูปแบบตามที่ได้เลือกไว้

การสร้างเวปเพจ พื้นฐานที่โปรแกรมได้สร้างขึ้นอาจมีพื้นที่มากเกินความจำเป็น สามารถสร้างเฟรมขึ้น เพื่อแบ่งพื้นที่เวปเพจนั้น ๆ ออกเป็นส่วน ๆ ทำให้เวปเพจที่สร้างขึ้นเป็นส่วน
ส่วนประกอบของเฟรม โดยปกติเฟรมแบ่งออกเป็น 2 ส่วน
1. เฟรมหลัก (Frameset)
เป็นเฟรมที่มีลักษณะการแบ่งเฟรมในตั้งและแนวนอนโดยใช้แท็ก Cols , Row สามารถกำหนดขนาดของขอบ สี และระยะห่างระหว่างเฟรมได้
2. เฟรมย่อย (Frame)
หน้าต่างเฟรมที่กำหนดชื่อของแต่ละเฟรมและกำหนดไฟล์หรือเวปไซด์ที่จะแสดงบนเวปเพจได้อย่างอิสระ

การเปิด Frame Panel
การเรียกใช้งานเฟรมที่สะดวกที่สุด สามารถเรียกได้จาก Frame Panel โดยการ
1. เปิด Object Frame Panel
2. รูปแบบการสร้างเฟรมแบบต่าง ๆ
รูปแบบของการสร้างเฟรม
1. Left Frame เฟรมซ้าย
2. Right Frame เฟรมขวา
3. Top Frame เฟรมที่อยู่ด้านบน
4. Bottom Frame เฟรมที่อยู่ด้านล่าง
5. Left , Top Left Conner and Top Frame เฟรมที่สร้างขึ้นจะปรากฎอยู่ทางด้านซ้าย บนซ้ายและด้านบนของเวปเพจ
6. Left and Nested Top Frame เฟรมที่สร้างขึ้นจะปรากฎอยู่ด้านซ้ายและด้านบนของเวปเพจ
7. Top and Nested Left Frame เฟรมที่สร้างขึ้นจะปรากฎอยู่ด้านบนและด้านซ้ายของเวปเพจ
8. Insert Split Frame เฟรมที่สร้างขึ้นจะถูกแย่งออกเป็น 4 ส่วนของเวปเพจ

การย่อ - ขยายเฟรม
1. คลิกที่ขอบของเฟรมให้ปรากฎลูกศรสองหัว เลื่อนเม้าส์ไปมาเพื่อย่อขยาย
2. เฟรมจะมีขนาดเปลี่ยนไปตามการเลื่อนเม้าส์
การลบเฟรม
เฟรมที่สร้างขึ้นมีมากจนเกินไป สามารถลบเฟรมนั้นได้โดย
1. คลิกที่เส้นขอบเฟรม ลากเม้าส์ไปยังขอบนอกสุดของเฟรม
2. เฟรมนั้น ๆ จะหายไป

การกำหนดคุณสมบัติของเฟรม
1. กำหนดคุณสมบัติของเฟรมหลัก สามารถทำได้โดย
1.1 คลิกที่กรอบใหญ่ เพื่อเลือกเฟรมหลัก
1.2 กำหนดค่าต่าง ๆ ใน Properties Inspector

Frameset แสดงจำนวนของเฟรมย่อยในแถวตั้งและแนวนอน
Borders กำหนดการแสดงขอบของเฟรม ให้เลือก 3 รูปแบบคือ
- Yes แสดงขอบเฟรมแบบ 3 มิติ
- No แสดงขอบเฟรมแบบแบนราบ
- Defalt แสดงตามค่าที่กำหนดไว้ คือในรูปแบบ 3 มิติ
- Borders Width กำหนดความกว้างของขอบเฟรม
- Borders Color กำหนดสีให้ขอบเฟรมทั้งหมด
- Value กำหนดค่าขนาดของเฟรม
- Units หน่วยของการกำหนดขนาดเฟรมมีให้เลือก 3 รูปแบบคือ
1. Pixels กำหนดขนาดที่แน่นอน
2. Percent กำหนดโดยเทียบเป็นเปอรเซ็นต์
3. Relative กำหนดให้สัมพันธ์กับขนาดพื้นที่ว่างในเฟรมหลัก
- RowCol Selection เลือกเฟรมในแนวตั้งเพื่อกำหนดคุณสมบัติดังกล่าว

2. กำหนดคุณสมบัติของเฟรมย่อย
2.1 คลิกที่กรอบข้างใน เพื่อแสดงเฟรมย่อยที่ต้องการ
2.2 กำหนดค่าต่าง ๆ ใน Properties Inspector

- Frame Name กำหนดชื่อแต่ละเฟรมที่บันทึกไว้
- Src ตำแหน่งของเวปเพจรวมทั้งเวปไซด์ที่ต้องการ
- Scroll กำหนดการแสดง Scroll Bar ที่ใช้เลื่อนเพื่อแสดง
ข้อมูลที่ซ่อนอยู่ในเฟรมมีให้เลือก 4 รูปแบบ
1. Yes แสดง Scroll Bar ให้เสมอ
2. No ไม่แสดง Scroll Bar ให้เสมอ
3. Auto แสดง Scroll Bar ให้
4. Default แสดงตามค่าที่กำหนดไว้
- No Resize กำหนดเฟรมให้ไม่สามารถเลื่อนได้
- Borders กำหนดการซ่อนแสดงขอบของเฟรมมีให้เลือก 3 รูปแบบคือ
1. Yes แสดงขอบเฟรม
2. No ซ่อนแสดงขอบเฟรม
3. Default แสดงตามค่าที่กำหนดไว้
- Borders Color กำหนดสีให้ขอบเฟรมปัจจุบัน
- Margin Width กำหนดช่องว่างระหว่างเฟรมซ้ายและขวา
- Margin Heght กำหนดช่องว่างระหว่างเฟรมบนและล่าง

การเชื่อมโยง ในหน้าเวปเพจหนึ่งสามารถเชื่อมโยงไปยังตำแหน่งภายในเวปเพจเดียวกันหรือต่างกันเวปเพจได้
การเชื่อมโยงมีทั้งหมด 7 ประเภท
1. การเชื่อมโยงภายในเวปเพจ
2. การเชื่อมโยงภายในเวปไซด์
3. การเชื่อมโยงภายนอกเวปไซด์
4. การเชื่อมโยงด้วยอีเมล์
5. การเชื่อมโยงด้วย Maplink
6. การเชื่อมโยงด้วย Rollover Tool
7. การเชื่อมโยงด้วยปุ่มกด

การเชื่อมโยงภายในเวปเพจ
1. กำหนดจุด Link ในหน้าเวปเพจโดยนำเม้าส์มาคลิกบริเวณพื้นที่ที่ต้องการ Link
2. เข้าไปที่หน้าต่าง Object เลือก Invisible
3. คลิกที่รูปสมอเรือ
4. ตั้งชื่อในช่อง Anchor Name
5. เลือกข้อความที่ต้องการ Link โดย Drag Mouse คลุมดำข้อความที่ต้องการ Link
6. เข้าไปที่หน้าต่าง Properties แล้วเข้าไปที่ช่อง Link ให้พิมพ์ข้อความที่ช่อง Link ให้พิมพ์เครื่อง # ตามด้วยชื่อ Anchor Name ทีกำหนดไว้

การเชื่อมโยงภายในเวปไซด์เดียวกัน
1. พิมพ์ข้อความลงในเวปเพจ
2. คลิกเม้าส์ ปุ่ม โฟร์เดอร์ เพื่อกำหนดไฟล์ที่จะเชื่อมโยง
3. เลือกไฟล์ที่ต้องการ
4. คลิกปุ่ม Select
5. เซฟหน้าเวปเพจแล้วเปิดบราวเซอร์ (กด F12) เพื่อทดสอบการเชื่อมโยง

การเชื่อมโยงไปยังเวปไซด์อื่น
1. พิมพ์ข้อความที่ต้องการ Link
2. ลากเม้าส์คลุมดำข้อความที่พิมพ์ที่จะให้เป็นจุด Link
3. คลิกเม้าส์ที่หน้าต่าง Properties ในช่อง Link กำหนดชื่อเวปไซด์ที่ต้องการ Link แล้วกดเอนเตอร์

การเชื่อมโยงด้วย E-mail
1. พิมพ์ข้อความที่ต้องการให้เป็นจุดเชื่อมโยง
2. ลากเม้าส์คลุมดำที่ข้อความให้เป็นจุดเชื่อมโยง
3. เซฟแล้วทดสอบการเชื่อมโยง โดยการกดปุ่ม F12
4. เมื่อคลิกที่ข้อความจะปรากฎโปรแกรมส่ง E-mail

การเชื่อมโยง Maplink
1. เมื่อกำหนดภาพเข้ามาในเวปเพจ คลิกภาพนั้น
2. เลือกบริเวณที่ต้องการทำเป็น Link โดยให้ออบเจ็ค ที่หน้าต่าง Properties
3. กำหนดพื้นที่ของรูปภาพที่จะเชื่อมโยง
4. เลือกไฟล์ที่ต้องการ Link
5. เลือกไฟล์ที่ต้องการเชื่อมโยง
6. เซฟหน้าเวปเพจและทดสอบบราวเซอร์โดยการกดปุ่ม F12

การกำหนดลักษณะเชื่อมโยง
เมื่อมีการคลิกที่ Link เราสามารถกำหนดการเปิดหน้าเวปเพจที่เชื่อมโยงได้ เช่น ให้แสดงหน้าเวปที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่หรือให้แทนหน้าต่างเดิม เป็นต้น โดยดำหนดได้จากส่วนของ Target
_blank ให้เปิดเวปเพจเชื่อมโยงในหน้าต่างบราวเซอร์ใหม่
_parent ให้ปิดหน้าเวปเพจที่เชื่อมโยงในหน้าต่างเดิม
_self ให้เปิดเวปเพจที่เชื่อมโยงในเฟรมเดิม
_Top ให้เปิดเวปเพจที่ให้เต็มเฟรม

การสร้างปุ่ม Rollover Image จะใช้ไฟล์รูปภาพสองไฟล์ในการทำงาน คือจะมีภาพแรกที่เป็นภาพต้นฉบับและภาพที่สองที่ต้องการให้เปลี่ยนรูปไปเมื่อนำเม้าส์ไปวาง ณ ตำแหน่งของภาพที่ 1
1. คลิกปุ่ม Insert Rollover Image
2. ปรากฎหน้าต่าง Insert Rollover Image ให้พิมพ์ชื่อ Image Name
3. ที่ Original Image ให้คลิกปุ่ม Browse
4. ปรากฎหน้าต่าง Original Image ให้เลือกไฟล์รูปต้นฉบับ
5. คลิกปุ่ม Select
6. กลับสู่หน้าต่าง Insert Rollover Image ให้คลิกปุ่ม Browse ที่ Rollover Image
7. ปรากฎหน้าต่าง Rollover Image เพื่อคลิกไฟล์รูปที่ต้องการให้ปรากฎหลังจากคลิกเม้าส์
8. คลิกปุ่ม Select
9. กลับสู่หน้าต่าง Insert Rollover Image อีกครั้ง
10. คลิกปุ่ม Browse ที่ When Clicked , Go To URL
11. ปรากฎหน้าต่าง On Click , Go To URL เพื่อกำหนดจุดเชื่อมโยง
12. กลับสู่หน้าต่าง Insert Rollover Image
13. ปรากฎปุ่ม Rollover Image ขึ้นมาบนพื้นงาน กดปุ่ม F12 เพื่อแสดงบราวเซอร์
14. กำหนดคุณสมบัติให้กับปุ่ม Rollover Image ที่ Properties Inspector
Image กำหนดชื่อให้กับปุ่ม Rollover Image
W กำหนดความกว้างของปุ่ม
H กำหนดความสูงให้กับปุ่ม
Src แหล่งเก็บภาพ
Link ตำแหน่งที่ทำการเชื่อมโยง
Align ข้อความที่ต้องการให้ปรากฎเมื่อแสดงผลของบราวเซอร์
15. เมื่อนำเม้าส์ไปวาง ปุ่มจะเปลี่ยนรูปแบบไปตามกำหนด
16. หากคลิกปุ่ม โปรแกรมจะทำการเชื่อมโยง

การเขียนเวปเพจกับการเริ่มต้นกับภาษา HTML
HTML ย่อมาจาก Hypertext Markup Language ซึ่งภาษา Html แบ่งออกเป็น 2 ส่วนคือ
1. ส่วนที่เป็นข้อความทั่วไป
2. ส่วนที่เป็นคำสั่ง
การกำหนดรูปแบบของข้อความที่แสดงเรียกว่า แท็ก (Tag) โดยคำสั่งของ Html จะอยู่ในเครื่องหมาย < และ > โดยมีหลักการเขียนดังนี้
รูปแบบคำสั่งจะแยกออกเป็น 2 ส่วนโดยจะต้องมีส่วนเริ่มต้นของคำสั่งและส่วนจบจะมีเครื่องหมาย Slash (/) เช่น
<คำสั่ง>………..</คำสั่ง>
<title>……….</title>
โครงสร้าง HTML พื้นฐานแบ่งออกเป็น 4 ส่วนดังนี้
<html>
<head>
<title>………….</title>
</head>
<body>……………………..
………………………………
………………………………
</body>
</html>

การเขียนเวปเพจด้วยภาษา html จะมีคำสั่งที่เป็นภาษา html ดังนี้
1. คำสั่งขึ้นบรรทัดใหม่ <br>
เช่น ข้อความ <br>
2. คำสั่งย่อหน้าใหม่ <p>
เช่น ข้อความ<br>
ข้อความ<p>
3. คำสั่งคั้นทางด้านแนวนอน <hr>
เช่น ข้อความ <hr>
ข้อความ <hr>
4. คำสั่งการจัดวางข้อความ
<p align = left>………….</p> การจัดข้อความชิดซ้าย
<p align = center>……….</p> การจัดข้อความกึ่งกลาง
<p align = right>…………</p> การจัดข้อความชิดขวา
<b>…………</b> การกำหนดข้อความตัวหนา
<u>…………</u> การกำหนดข้อความขีดเส้นใต้
<blink>…………………</blink>การกำหนดตัวหนังสือกระพริบ
5. คำสั่งการจัดการตัวอักษร
<font size = ……>…………..</font>
<font color = …….>…………</font>
6. คำสั่งการตกแต่งพื้นหลัง
<bgcolor = รหัสสี,ชื่อสี>
<marquee>……….</marquee> ตัวกระพริบ
7. คำสั่งการแทรกรูปภาพ
<img src = "ชื่อไฟล์รูปภาพ">
<img src = "ชื่อไฟล์รูปภาพ" width = ….. height = ……>
<img src = "ชื่อไฟล์รูปภาพ" width = …. Height = …...>
<body background = "ชื่อไฟล์รูปภาพ">
8. คำสั่งในการเชื่อมโยงเวปเพจด้วย Link
<a href = "ชื่อไฟล์ที่จะเชื่อมโยง">..............................</a>
<a href = "ชื่อเวปไซด์ที่จะเชื่อมโยง">……………</a>
<a href = "ส่วนที่เชื่อม"><img src = "รูปภาพ">………</a>
<a href = mailto:.................>.............</a>
9. การเล่นไฟล์เสียงและภาพยนตร์บนเวป
<bgsound src = "ชื่อไฟล์เสียง" Loop = จำนวนครั้ง>
<img dynsrc = "ชื่อไฟล์ภาพยนตร์">
<img dynsrc = "ชื่อไฟล์ภาพยนตร์" Loop = จำนวนครั้ง Start =___>
ชนิดของไฟล์ภาพยนตร์ *.avi , *.mpg , *.mpeg
(mpeg = multimedia Expert Programmer Group)
Control = ตัวเลือก กำหนดการแสดงหน้าต่างควบคุม
All แสดงปุ่มควบคุมทั้งหมด
Small console = แสดงปุ่มควบคุมรูปเล็ก
Start = ตัวเลือกกำหนดการทำงาน
File open ทำงานทันที เมื่อเปิดเวป
Mouseover ทำงานเมื่อเอาเม้าท์ไปชี้
Loop จำนวนรอบ (Infinte)
Loop Delay เวลา กำหนดให้หยุดรอเป็นเวลา

ซึ่งเป็นคำสั่งที่ใช้ในการเขียนเวปเพจเพื่อนำคำสั่งที่เป็นภาษา html เหล่านี้เพื่อนำไปแก้ไขเวปเพจตนเองที่ต้องการแก้ไขหรือปรับปรุงต่อไป

การที่นำเวปเพจมาจัดตั้งเป็บเวปไซด์ หมายถึง ผลงานที่คุณสร้างไว้มานั้นใกล้ที่จะให้ผู้ชมใช้งานจริง โดยแสดงผลทางโปรแกรมบราวเซอร์ทั้ง Internet Explorer , Explorer , Netscape ได้แล้วเพียงแต่ขาดขั้นตอนเดียว คือ การขอพื้นที่เพื่ออับโหลดโฮมเพจนั่นเอง โดยสามารถขอผ่านทางเวปไซด์ เช่น
1. www.geocities.com
2. www.thai.net
3. www.hypermart.net

ขั้นตอนการขอพื้นที่ฟรีโฮมเพจ
1. เปิดโปรแกรม Internet และเข้าไปยังเวปไซด์
2. คลิกที่ Sign up now เพื่อสมัครเป็นสมาชิก
3. ปรากฏหน้าเวปเพื่อเลือกกรอกรายละเอียด
4. คลิกปุ่ม Submit This From เมื่อกำหนดข้อมูลต่าง ๆ เรียบร้อย
5. ปรากฏหน้าเวปเพื่อเลือกประเภทของโฮมเพจที่สร้างขึ้นให้คลิกเลือกที่ Choose a Topic
6. ที่ Enter Confirmation Code ให้ยืนยันพิมพ์ตัวเลขตามที่โปรแกรมกำหนดมา
7. คลิกปุ่ม Submit This From

ขั้นตอนการอับโหลดผ่านทางเวปไซด์
1. คลิกที่ Upload/FTP เพื่ออับโหลดเวปไซด์
2. ปรากฏหน้าเวป Easy Upload ให้คลิกปุ่ม Browse เพื่อเลือกไฟล์ที่ต้องการ Upload
3. ปรากฏหน้าต่าง Choose File ให้คลิกเลือกไฟล์ที่ต้องการ
4. คลิกปุ่ม Open
5. กลับสู่หน้าเวปเดิม พร้อมกับปรากฏชื่อไฟล์ที่เลือกมา
6. คลิกปุ่ม Upload Files เพื่อทำการอับโหลดต่อไป

และนี่คือการสร้างเวปไซดืส่วนตัวของรา เพื่อนำไปเผยแพร่ประชาสัมพันธ์ให้บุคคลทั่วไปได้รู้จักเวฟไซต์ของเรา

ขั้นตอนการ อับโหลด File
เชื่อมต่อ Internet
Http://www.geocities.com

1. คลิกที่ปุ่ม Sign up Now
ในหัวข้อ Geocities Free

หมายเหตุ
ถ้าคลิกแล้วขึ้น Yahoo ID
ให้คลิกที่ ปุ่ม Sign up

2.ปรากฎหน้าต่างเว็บเพจ
Yahoo Geocities
เพื่อสมัครขอพื้นที่

3. ขึ้นหน้าเว็บเพจ Registration Completed ให้คลิกปุ่ม
Continue to Yahoo Geocities
4. เลือกข่าวสารที่ให้ Yahoo ส่งข่าวมาให้ใน E-mail ของตนเอง

5. ปรากฏหน้าเว็บเพจ Welcome
ให้คลิกปุ่ม
Build your web site now

6. ปรากฏหน้า Menu Geocities
ให้คลิกปุ่ม Open File Manager

7. ปรากฏหน้าเว็บเพจ Open File Manager ให้คลิกปุ่ม Open File Manager

8. ปรากฏหน้าเว็บเพจ File manager ถ้าต้องการ Upload ให้คลิกปุ่ม UploadFile

9. ปรากฏหน้าเว็บเพจ Easy Upload ให้คลิกปุ่ม Browse เลือก File ที่ต้องการ Upload และคลิกปุ่ม Upload File

10. ปรากฏหน้าเว็บเพจยอมรับการ Upload File อื่นให้คลิกที่ Upload More File ถ้าไม่ต้อง Upload ให้คลิกปุ่ม File Manager

11. ให้คลิกที่กล่องสี่เหลี่ยม หน้าช่อง Index.htm เพื่อแก้ไขหน้าเว็บเพจ

12. ปรากฏหน้าเว็บเพจ Html Editor เมื่อแก้ไขและบันทึกโดยกดปุ่ม Save

13. กลับสู่หน้าเว็บเพจเดิม และคลิกหัวข้อ View ใน File index.htm เพื่อดูหน้าโฮมเพจที่แก้ไข

14. คลิกเข้าไปที่เว็บไซต์ เพื่อต้องการดูหน้าโฮมเพจของตนเอง

กลับหน้าแรก