การสร้างเว็บเพจอย่างง่าย ด้วยโปรแกรม WebPageMaker

2. คํานํา
โลกของการสื่อสารและการเผยแพรขอมูลบน ระบบอินเตอรเน็ต ในรูปแบบตาง ๆ นั้น การ
เผยแพรขอมูลขาวสารในรูปแบบเอกสารเว็บเพจเปนทีนิยมเปนอยางอยางมาก โปรแกรมที่ใชใน
่
สรางเอกสารเว็บเพจมีมากมายหลายโปรแกรม โปรแกรม Web Page MakerV2 เปนโปรแกรมหนึ่ง
ที่มีขีดความสามารถในการสรางเอกสารเว็บเพจไดอยางดีเยี่ยมเพราะการใชงานที่งาย สะดวก ไม
ซับซอนยุงยากเหมือนโปรแกรมอื่น ๆ พรอมทั้งมีเครื่องมือที่ใชในการสรางที่มาก เหมาะสําหรับการ
อบรมในระยะเวลาสั้น ๆ และยังสามารถนํามาประยุกตใชทําเปนสื่อการสอนไดอีกดวย
เอกสารฉบับนี้จดทําขึ้นเพื่อประกอบการสรางเว็บเพจดวยโปรแกรม Web Page MakerV2
ั
หวังเปนอยางยิ่งวา เอกสารฉบับนี้จะเปนประโยชนแกนกเรียนและบุคคลทั่วไปที่สนใจการสราง
ั
เว็บเพจอยางงาย
นางสุจินต ชาวสวน
โรงเรียนทุงหวาวรวิทย
081-7677396

3. การสรางเว็บเพจมืออาชีพภายใน 1 วัน
การติดตั้งโปรแกรม
การเขาใชงานโปรแกรม
สวนประกอบของโปรแกรม
การสรางเอกสารใหม
การกําหนดภาษาไทยใหกับหนาเว็บเพจ
การบันทึกเอกสาร
การเปดเอกสารเกามาแกไข
การจัดหนากระดาษ
การแทรกขอความขอความหรือเนือหา
้
การแทรกรูปภาพ
การแทรกรูปราง
การดูตัวอยางเอกสารแบบอินเตอรเน็ต
การใสอักษรวิ่ง (Marquee)
การใสลูกเลนดวยจาวาสตริป
การสรางเมนูลงคเชื่อมโยง
ิ
การบันทึกงาน
การ Export file เปนไฟล HTML
การPublish งาน

4. การสรางเว็บเพจอยางงาย WebPage Maker •
สวัสดีคะ คงจะมีหลายๆ ทาน ที่มีปญหาอยูพอสมควร เมื่อคิดอยากจะมีเว็บไซตเปนของ
ตัวเองขึ้นมาซักเว็บหนึ่ง แตก็ไมรูจะเริ่มตนอยางไร ในปจจุบัน มีโปรแกรมที่ใชทําเว็บไซตที่เปนที่
นิยมอยูมากมาย หลากหลายฟงกชั่น และความสามารถแตกตางกันไป
ถาเปนคนที่มีความรูทางดานการเขียนเว็บไซต เชน ภาษา html ก็คงจะไมยากนัก กับการ
ประยุกตใชงานกับโปรแกรมเหลานี้...แลว..คนที่ไมเคยมีความรู หรือ ไมเคยศึกษาในภาษา html มา
กอนเลย จะทํายังไงละ...
แนะนําเพื่อนๆ นะคะ...สละเวลาสักนิดหนึ่ง เรียนรูภาษา html เบื้องตนกันสักหนอยนะคะ...
เพื่อความสนุก และไมปวดหัวมากเวลาที่เขียนเว็บไซต คะ
เอาละ...เรามาเริ่มกันดีกวานะคะ โปรแกรมที่คดวา งายตอการทําเว็บไซต ที่มีเพื่อนๆ
ิ
แนะนําภายในเว็บบอรดเว็บไซตตางๆ และก็ไดลองเอามาใชดู...อื้อ หืออ....ไมนาเชื่อ วาจะใชงานได
งาย เหมือนมืออาชีพเลยคะ โปรแกรมที่วานี้กคือ Web Page Maker คะ...
็
เริ่มเลยแลวกัน.. เริ่มดวยการติดตั้งโปรแกรม ทําตามขั้นตอนนะคะ หวังวาคงจะไมยาก
เกินไปนัก ... ลุยกันเลย ...
<<<<<...... ดาวนโหลดโปรแกรมคลิกที่นี่ ......>>>>>

5. การสรางเว็บเพจอยางงาย WebPage Maker ‚
การติดตั้งโปรแกรม
1. เมื่อคลิกเสร็จก็จะปรากฏกรอบขึ้น ใหคลิกที่ Open ตามรูป อยาคลิก Save นะคะ..

6. การสรางเว็บเพจอยางงาย WebPage Maker ƒ
2. คลิกที.่ .. Next >... คะ

7. การสรางเว็บเพจอยางงาย WebPage Maker „
3. คลิกเลือกตาม 1. ชองบนเพื่อยอมรับในขอตกลง (ไมงนเขา ไมยอม) 2. คลิก next >
ั้

8. การสรางเว็บเพจอยางงาย WebPage Maker …
4. คลิก next > เพื่อสรางโฟลเดอรสําหรับเก็บไฟล

9. การสรางเว็บเพจอยางงาย WebPage Maker †
5. คลิก next> เพื่อเก็บโปรแกรมในโฟลเดอรที่ชื่อ WebPageMaker

10. การสรางเว็บเพจอยางงาย WebPage Maker ‡
ตองการสราง ไอคอน Shortcut ไวที่หนาจอใหคลิกเลือก create a desktop icon
7. หรือจะสราง ไอคอน Shortcut ไวที่หนาที่ Quick Launch ตรง ทาสบารลางก็คลิกเลือก create a
Quick Launch icon
8. คลิก next >

11. การสรางเว็บเพจอยางงาย WebPage Maker ˆ
6.
9. คลิก Install เพื่อติดตั้งโปรแกรม

12. การสรางเว็บเพจอยางงาย WebPage Maker ‰
กา
10. ลงโปรแกรมเสร็จสิ้นคะ หากตองการ ใหโปรแกรมทํางานทันที ก็คลิกเลือกที
่
Launch Web Page Maker ดวย
11. คลิก Finish

13. การสรางเว็บเพจอยางงาย WebPage Maker •€
12. หากเปนรุน trial(รุนทดลองใช) จะใชได 15 วัน สนใจคอยสั่งซื้อหรือหา code มาปลดล็อกหรือ
ลงทะเบียนทีหลังก็ไดคะ
13. คลิก OK คะ
ขั้นตอนการลงทะเบียน
1. ปอนชื่อ เปนชื่ออะไรก็ได เปนภาษาอังกฤษนะคะ
2. พิมพ Code หรือรหัสสําหรับลงทะเบียน (เพื่อใหใชไดตลอดไป) ที่เราไดมาอยางถูกตองนะคะ ...
ลงในชอง Code : 3. คลิก OK

14. การสรางเว็บเพจอยางงาย WebPage Maker ••
4. หากปอน code ถูกตองเปดโปรแกรมขึ้นมา คลิกที่ Help ---> About จะเห็นชื่อที่เราปอนไวแสดง
วาการลงทะเบียนถูกตอง

15. การสรางเว็บเพจอยางงาย WebPage Maker •‚
การเขาใชงานโปรแกรม Web Page Maker V2 มีขั้นตอนดังนี้
1. ดับเบิ้ลคลิกที่รูป

16. การสรางเว็บเพจอยางงาย WebPage Maker •ƒ
หรือ
1. คลิกปุม Start
2. เลือก Programs
3. เลือก Web Page Maker V2
4. จะไดหนาจอดังนี้

17. การสรางเว็บเพจอยางงาย WebPage Maker •„
การออกจากโปรแกรม
1.เมนู File
2.เลือก Exit
หรือ
คลิกที่ปุม close

18. การสรางเว็บเพจอยางงาย WebPage Maker •…
สวนประกอบของโปรแกรม Web Page Maker V2

19. การสรางเว็บเพจอยางงาย WebPage Maker •†
1. ไตเติลบาร ใชบอกชื่อโปรแกรมและแฟมที่กําลังทํางานอยูในขณะนัน
้
2. ปุมควบคุม ใชยอเล็กสุด / ขยาย / ปดโปรแกรม
3. เมนูบาร ใชเก็บคําสั่งการใชงานทั้งหมด เชน File Edit Page Insert Format Arrage Help
4. ทูลบาร ใชเก็บคําสั่งการใชงานประจําแบบสัญลักษณรูปภาพ
5. พื้นที่ทํางาน จะเปนพื้นที่สีขาว สําหรับใสขอความ รูปภาพ ในการสรางเว็บเพจ
6. สวนแสดงแฟมงานที่เกี่ยวของ
กอนจะทํางานใดๆ ควรตั้งหัวขอ ประเภท ขอมูล ที่ตองการทํางานเอาไวลวงหนา เชน
การทําสื่อการเรียนการสอนในรูปแบบของเว็บเพจ เราควรเตรียมขอมูล ภาพ เสียง ที่เกี่ยวของกับ
งานของเราใหเรียบรอยลวงหนา จากนั้นก็เริ่มทํางานไดเลยคะ

20. การสรางเว็บเพจอยางงาย WebPage Maker •‡
การสรางเอกสารใหม
1. คลิกเมนู File
2. คลิกคําสั่ง New Site
หรือ
คลิกรูป จากแถบ Tool bar (แถบเครื่องมือ)

21. การสรางเว็บเพจอยางงาย WebPage Maker •ˆ
หรือ
ถายังคิดรูปแบบงานไมออก ก็ลองเลือกจาก Template ที่โปรแกรมจัดไวใหก็ไดคะ โดย
เลือกที่
เมนู File èNew Site from Template

22. การสรางเว็บเพจอยางงาย WebPage Maker •‰
จะมี Template ใหเลือก ดังนี้

23. การสรางเว็บเพจอยางงาย WebPage Maker ‚€
การกําหนด Properties ใหหนาเว็บเพจ
เปนการกําหนดรูปแบบใหเว็บเพจของเรา โดยการคลิกเมาสขวาที่พื้นที่วางๆ กลาง
หนา เลือก Properties จะปรากฏหนาตางขึ้นมา ใหกรอกขอมูลลงไป
Title เปนขอความทีจะแสดงใน Title bar ของ Browser
่
Auther แสดงความเปนเจาของ (จะใสหรือไมใสก็ได)
Keywords เปนขอความที่ทําให Search Engine สามารถคนหาเราพบ โดยการใสขอความที่
เกี่ยวของกับงานของเราลงไป เมื่อมีการคนหาคําที่ตรงกับ Keywords ก็จะคนพบเว็บของเรา
Description เปนสวนทีใสคําอธิบายเกี่ยวกับเว็บไซดเรา
่

24. การสรางเว็บเพจอยางงาย WebPage Maker ‚•
แลว Preview in Browser F5 จะปรากฏ Title เปนขอความทีจะแสดงใน Title bar
่
ของ Browser ดังรูป

25. การสรางเว็บเพจอยางงาย WebPage Maker ‚‚
Background Image กําหนดภาพพื้นหลังใหกับเว็บเพจ
Background Music กําหนดเสียงเพลงใหกับเว็บเพจ สามารถกําหนดจํานวนรอบที่ตองการเลน
เพลง (Loop) หรือเปนเพลงเอาไวตลอดเวลา (Forever)

26. การสรางเว็บเพจอยางงาย WebPage Maker ‚ƒ
Align จัดเว็บเพจใหอยูในตําแหนงใดๆ ของ Browser (ซาย กลาง ขวา)
Color Default text สีพื้นหลังของตัวอักษรในเว็บเพจ (คาเริ่มตน)
Background สีพื้นหลังของเว็บเพจ
Link Normal Link สีของLink ปกติ
Visited Link สีของLinkเมื่อถูกคลิกแลว
Active Link สีของLinkขณะกําลังคลิกที่ Link
Character set กําหนดใหเว็บแสดงเปนภาษาไทย โดยใส Windows-874 หรือ Tis-620 เพิ่มเติม
ลงไป

27. การสรางเว็บเพจอยางงาย WebPage Maker ‚„
เปนการเปลี่ยนหนาเว็บเพจ จากหนา 1 ไปหนา 2
Event เปนเหตุการณทตองการเปลี่ยน
ี่
Effect เปนรูปแบบของการเปลี่ยนหนาเว็บเพจ หากไมตองการใชใหเลือกที่ None

28. การสรางเว็บเพจอยางงาย WebPage Maker ‚…
การแทรกขอความ
1. ไปที่ เมนู Insert è Text หรือคลิกที่
2. จะไดดังภาพ
ลูกศร 4 ทิศ สําหรับยายขอความ ลูกศรลงสําหรับยอ/ขยายดานบนลาง
ลูกศรซายสําหรับยอ/ขยายดานขาง
3.ใหดับเบิ้ลคลิกในกรอบขอความ เพื่อพิมพขอความ
4. เปลี่ยนสีอักษร ทําตัวหนา ตัวเอียง จัดกึ่งกลาง ขนาดอักษร และสีพื้นของกรอบได นอกจากนี้
สามารถคัดลอกจากที่อื่นมาวางในนี้ไดดวย
ใหเลือกแบบอักษร AngsanaUPC (เพราะสามารถพิมพภาษาไทยไดดี)
5. เมื่อจัดขอความเรียบรอยแลวใหคลิกปุม
TIPs :: หากไมตองการใหภาพหรือขอความเลื่อนเปลี่ยนตําแหนงโดยไมจําเปน ใหคลิกเมาสดสน
๊
ขวา เลือก Lock หรือ Unlock หากตองการยกเลิก

29. การสรางเว็บเพจอยางงาย WebPage Maker ‚†
การบันทึกเอกสาร
1. คลิกเมนู File
2. คลิกคําสั่ง Save
หรือ คลิกรูป
3. จะปรากฏใหดังรูป
3.1 เลือกโฟลเดอรที่เก็บแฟมเอกสาร
3.2 พิมพชื่อแฟมเอกสาร
3.3 คลิกปุม Save
ไฟลที่ไดจากการบันทึกงานจะมีนามสกุล .wmp หรือ .wss ซึ่งไมสามารถเห็นใน
Browser ได หากตองการนําไปใชงานหรืออัพโหลดสู Host เราตองทําการแปลงไฟลงานเปน
HTML เสียกอน

30. การสรางเว็บเพจอยางงาย WebPage Maker ‚‡
การเปดเอกสารเกามาแกไข
1. คลิกเมนู File
2. คลิกคําสั่ง Open หรือ คลิกปุม
3. จะปรากฏใหเลือก
3.1 เลือกโฟลเดอรที่เก็บแฟมเอกสาร
3.2 เลือกแฟมเอกสารที่ตองการแกไข
3.3 เลือก Open

31. การสรางเว็บเพจอยางงาย WebPage Maker ‚ˆ
การแทรกรูปภาพ
1. คลิกเมนู Insert
2. คลิกคําสั่ง Image
2.1 From Files เลือกจากแฟมที่อยูในเครื่องที่โฟลเดอรใดก็ได
2.2 From Library เลือกจากแฟมที่โปรแกรมจัดไวใหแลวเทานั้น หรือ คลิกปุม
ถาคลิกปุมสามเหลี่ยมดําเล็กๆจะมีใหเลือก
3. กรณีเลือก From Files ใหเลือกแฟมรูปภาพที่ตองการ แลวกด

32. การสรางเว็บเพจอยางงาย WebPage Maker ‚‰
4. กรณีเลือก From Library ใหดับเบิ้ลคลิกเลือกแฟมจากทีโปรแกรมจัดมาให
่
การวาดรูปทรง
เราสามารถแทรกรูปรางไดดวยคําสั่ง Insert Sharp หรือ

1. คลิกเมนู Insert
2. คลิกคําสั่ง Sharp
3. เลือกรูปทรง
3.1 Rectangle คือ สี่เหลี่ยม
3.2 Round Rectangle คือ สี่เหลี่ยมมุมมน
3.3 Elipse คือ วงกลมหรือวงรี
4. ยอขยายไดตามตองการ

33. การสรางเว็บเพจอยางงาย WebPage Maker ƒ€
5. สามารถแกไขสี เติมเสนขอบ ไดดวยการดับเบิ้ลคลิกทีรูปนั้น จะปรากฏหนาตาง
 ่
Fill คือ สวนพื้นที่ภายในวงกลม สามารถเปลี่ยนสีไดดวยการเลือกสีที่ Color
Outline คือ เสนรอบรูป หากตองการเสนรอบรูปใหคลิกเลือก o With Outline เปลี่ยนสีและเพิ่ม
ขนาดของเสนรอบรูปได

34. การสรางเว็บเพจอยางงาย WebPage Maker ƒ•
การดูตัวอยางเอกสารแบบอินเตอรเน็ต
1. เมนู File
2. คําสั่ง Preview in Browser F5
หรือ คลิกรูป
หรือ กดปุม F5 บนคียบอรด

35. การสรางเว็บเพจอยางงาย WebPage Maker ƒ‚
การสรางอักษรวิ่ง
1. คลิกเมนู Insert
2. คลิกคําสั่ง Marquee
3. ดับเบิ้ลคลิกเพื่อแกไขขอความ
4. พิมพขอความ พรอมตกแตง
5. กด OK
6. เลื่อนขอความไปยังที่ตองการ
7. เราสามารถกําหนดคุณสมบัติเพิ่มเติมไดดวยการคลิกเมาสขวาที่ขอความวิ่ง เลือก Properties

àกําหนดทิศทางการวิ่ง
à กําหนดรูปแบบการวิ่ง
àกําหนดความเร็ว
àกําหนดจํานวนรอบ

36. การสรางเว็บเพจอยางงาย WebPage Maker ƒƒ
ใสลูกเลนดวยจาวาสคริป
1. เมนู Insert
2. คําสั่ง Read to Use Java Script
3. เลือกรูปแบบ
4. กด OK
รูปแบบของลูกเลนเสริมเว็บเพจมีดังนี้
1. แบบมีนาฬิกาที่มุมลางขวา

37. การสรางเว็บเพจอยางงาย WebPage Maker ƒ„
2. แบบดาวตามเมาส
3. แบบลูกบอลตามเมาส (ถาจะเปลี่ยนรูปกด )

38. การสรางเว็บเพจอยางงาย WebPage Maker ƒ…
4. แบบหิมะตก (ถาจะเปลี่ยนรูปกด )
5. แบบไฮไลรูปภาพ (ถาจะเปลี่ยนรูปกด )

39. การสรางเว็บเพจอยางงาย WebPage Maker ƒ†
6. แบบขอความแบบคลื่น
7. แบบสีของแถบเลื่อน

40. การสรางเว็บเพจอยางงาย WebPage Maker ƒ‡
การจัดการหนาเอกสาร
สวน Site Contents
ในแท็บ Pages
การเพิ่มหนาเอกสาร
1. คลิกรูป
2. จะได Page2
การคัดลอกหนาเอกสาร
1. คลิก Page ที่ตองการ
2. คลิกรูป
3. จะไดหนา Page ใหม เหมือนกับ page ที่ไดคดลอกมา
ั
การลบหนาเอกสาร
1. คลิก Page ที่ตองการ
2. คลิกรูป
3. หนา page ก็จะถูกลบไป

41. การสรางเว็บเพจอยางงาย WebPage Maker ƒˆ
การแทรก Navigation bar
ไปที่เมนู Insert è เลือกคําสั่ง Navigation bar
หรือ
คลิกที่
เลือกรูปแบบของ Navigation bar ตามความเหมาะสมและสวยงาม จากนั้นคลิกที่ปุม OK

42. การสรางเว็บเพจอยางงาย WebPage Maker ƒ‰
ในสวน Text เปนการกําหนดแบบอักษร ขนาด รูปแบบ สี ของ Navigation bar

43. การสรางเว็บเพจอยางงาย WebPage Maker „€
ในสวนของ Option สามารถกําหนดไดดังนี้
- เพิ่มหรือลดจํานวนของ Navigation bar โดยการคลิกที่เครื่องหมาย + หรือ -
และยังจัดลําดับใหมไดดวยการคลิกที่เครื่องหมายลูกศรขึ้น-ลง
- หากตองการเปลี่ยนขอความใน Navigation bar ก็คลิกที่ Navigation bar
- หากตองการลบ Navigation bar ออก ใหคลิกที่
- เปนการกําหนดลิงกใหกับ Navigation bar แตละอัน เมื่อคลิกที่ลิงคแลวก็จะไปเปดหนา
เว็บเพจตางๆ ตามที่เรากําหนดไว

44. การสรางเว็บเพจอยางงาย WebPage Maker „•
สวนนี้กําหนดการแสดงผลของ Navigation bar วาจะใหอยูในตําแหนงใดๆ แนวตั้งหรือ
แนวนอน และยังกําหนดระยะหางของ Navigation bar ไดดวย Space
สวนนี้สามารถนําภาพที่เราสรางไวมาเปน Navigation bar ก็ได

45. การสรางเว็บเพจอยางงาย WebPage Maker „‚
การใสลิงก (Link)
Link ลิงก เปนการเชื่อมโยงเว็บเพจเขาหากัน สามารถเชื่อมโยงไดหลายรูปแบบ
1. เชื่อมโยงภายในเว็บไซด (A page in my site) หมายถึง ลิงกไปหาเว็บเพจที่อยู
ภายในเว็บไซดของเรา
2. เชื่อมโยงตางเว็บไซด (Another Website) หมายถึง ลิงกไปเว็บไซดอื่นๆ ตองใส
ชื่อเว็บไซดในชอง URL เชน ลิงกไปเว็บไซดโรงเรียนทุงหวาวรวิทย จังหวัดสตูล ใหใส
http://www.thungwaworawit.com ลงในชอง URL
3. เชื่อมโยงเว็บไซดไปยังอีเมล (An Email address) หมายถึง ลิงกไปเปดหนาตาง
เพื่อเขียน Email ไปตามที่ลิงกกําหนดไว เชน เชนจะสง Email ถึงครูสุจินต ก็ใส
beauten@chaiyo.com ลงในชอง URL
4. เชื่อมโยงไปยัง server (An ftp address) หมายถึง การลิงกเพื่ออัพโหลดไฟลไป
ยัง server หรือ host
5. เชื่อมโยงไปยังไฟล (A file on my computer)
ทําไดโดยการดับเบิ้ลคลิกที่ขอความ จากนั้นทําแถบสีที่ขอความ คลิกที่ปุม
Target คือ รูปแบบหลังการคลิกลิงกไปแลว
1. _blank คือ การลิงกแลวเปดหนาเว็บเพจใน Browser ใหมอีก 1 หนาตาง
2. _parrent ตือ การลิงกแลวเปดหนาเว็บเพจทับหนาเว็บเพจเดิม

46. การสรางเว็บเพจอยางงาย WebPage Maker „ƒ
การ Export file เปน ไฟล HTML
ทําไดโดยเปดไฟลงานนั้น เลือกเมนู File è Export to HTML จะไดนามสกุล HTML
สามารถนําไปใชงานหรืออัพโหลดไดเลย

47. การสรางเว็บเพจอยางงาย WebPage Maker „„
การ Publish เพื่อนําไปใชงาน
หลังจากที่ไดสรางเว็บเพจเรียบรอยแลว และจะนําไปใชงาน หรือไปฝากไวบนเครื่องแมขาย
หรือ Server จะตองทําการ Publish เสียกอนเสมอ ซึ่งมีนามสกุลเปน html
มีขั้นตอนดังนี้
1. เมนู File èเลือกคําสั่ง Publish
2. จะไดดังรูป
3. คลิกเลือกที่ Local Directory
4. คลิกปุม Browse… เพื่อเลือกโฟลเดอรที่ตองการจะจัดเก็บแฟม
5. เลือกโฟลเดอรที่ตองการ แลวคลิกปุม OK

48. การสรางเว็บเพจอยางงาย WebPage Maker „…
6. จะไดดังรูป
7. จากนันใหคลิกปุม Publish
้
8. รอสักครู เปนอันเสร็จเรียบรอย
9. ไปเปด my computer
10. เขาไปยังโฟลเดอรที่ไดจดเก็บแฟมที่จากการ Publish
ั
11. จะเจอแฟม html สําหรับใชอัพโหลดไปยังเครื่องแมขายได ดังรูป

49. การสรางเว็บเพจอยางงาย WebPage Maker „†

50. แหลงอางอิง
http://dayincomp.school.in.th
www.macsatun.th.gs
www.webpage-maker.com/download.html