kompozer manual

343Chantra 5.0

6. KompoZer KompoZer โปรแกรมจัดการสรางเว็บเพจ โดยการแกไขในแบบ WYSIWYG (What

You See Is What You Get) ใชงานงายมาก ผูใชงานไมจำเปนตองเรียนรูภาษา HTML มา

กอนก็สามารถใชงานได โปรแกรมนี้ทำงานคลายกับโปรแกรม Dreamweaver

เริ่มตนใชงาน 1. คลิกที่ปุม Start

2. ถาเจอโปรแกรม KompoZer สามารถเลือกไดเลย

3. ถาไมเจอใหคลิกที่ All Programs เลือกที่กลุมโปรแกรม KompoZer เลือกที่

KompoZer

4. หรือคลิกเลือกไอคอน FileZilla ท่ีหนา Desktop

32

1

4

344 Chantra 5.0

5. จะแสดงหนาตางเทคนิคและหนาตางโปรแกรมทันที

มาดูในหนาตางโปรแกรมกันวามีเมนใดูใหไดเลือกใชงานกันบาง

1. เมนูคำสั่งในการใชงานโปรแกรม

2. Composition Toolbar ทูลบารฟงกชัน สำหรับใชงานหลักๆ ในการสรางเว็บ

3. Format Toolbar เคร่ืองมือในการแกไขเว็บเพจ ท้ังรูปแบบ Background พารา-

กราฟ ขนาด การจัดตำแหนง เปนตน

4. Tab Browser Toolbar แท็บที่แสดงขึ้นมาเพื่อชวยใหเปดเอกสารไดหลายแท็บ

ตามตองการ

5. พื้นที่ทำงานสำหรับ พิมพคำสั่ง พิมพซอรสโคด แสดงการพรีวิว เว็บเพจ

6. Edit Mode Toolbar โหมดสำหรับในการแสดงเอกสารในรูปแบบของ Normal

view, HTML Tags view, HTML source view และ Preview mode

7. Site Manager สวนจัดการ จัดเก็บเกี่ยวกับเว็บเพจตางๆ ที่มีในเว็บไซต

8. Status Toolbar แสดงสถานะ เมื่อนำเมาสไปวางลงบนแท็กซ HTML

5

345Chantra 5.0

การสราง แกไขเว็บเพจ มาดูกันวาถาเราตองการสรางเว็บเพจใหมจะตองทำอยางไร

1. ปกติเวลาเปดหนาตางโปรแกรมมา ก็จะแสดงเพจเอกสารวางๆ

2. กอนสรางเอกสารใหมตองทำการตั้งคา ไดเรกทอรี่ในการสรางเว็บเพจกอน ไปที่

เมนู Edit -> Publishing Site Settings...

1

7 5

8

23

4

6

2

1

346 Chantra 5.0

3. ทำการเลือกไดเรกทอรีของเว็บเพจในเครื่องเพื่อปองกันการเขียน Path ลงไปยัง

code HTML เพราะจะทำให Link ของรูปภาพนั้นผิดพลาด ซึ่งในที่นี้ สรางโฟลเดอรของเว็บ

ไวที่ c:/xampp/htdocs/myweb/ ตามตัวอยาง

4. ถาตองการสรางเอกสารใหมอีก ก็ใหคลิกปุมทูลบาร New แลวเลือก Page in

New Tab เปดหนาตางเอกสารใหมในแท็บหรือ Page in New Tab เพื่อเปดเพจวางๆ ใน

หนาตางใหม

3

4

347Chantra 5.0

5. หรือไปคลิกเมนู File -> New หรือ ในกรณีตองการนำไฟลในฮารดดิสกมาแกไข

ก็ใหคลิกเมนู File แลวเลือก Open File

6. จะแสดงไดอะล็อกบ็อกซ Open HTML File ใหคลิกเลือกตำแหนงจัดเก็บไฟล

7. คลิกเลือกไฟลเอกสาร

8. แลวคลิกปุม Open เพื่อเปดไฟลเอกสารมาแกไข

5

6

7

8

348 Chantra 5.0

9. จะแสดงเอกสาร html ในหนาตางโปรแกรม

10. หากเปดเอกสารเพิ่มอีกก็จะแสดงแท็บเอกสารใหมปรากฏขึ้น

9

10

349Chantra 5.0

การบันทึกเอกสาร 1. คลิกที่เมนู File -> Save As...

2. คลิกเลือกโฟลเดอรในการจัดเก็บไฟล

3. พิมพชื่อไฟลลงในชอง File name:

4. แลวคลิกปุม Save เพื่อบันทึกเอกสาร

การสรางเว็บเพจอยางงาย เราจะเริ่มการสรางตารางเพื่อกำหนด Layout ของเว็บเพจโดยเริ่มแทรกตารางกอน

1. ใชเครื่องมือสรางตารางที่ ToolsBar

2. จากนั้นจะไดเครื่องมือกำหนดจำนวนแถวและคอลัมนและคุณสมบัติของตาราง

3. จะกำหนดตาราง 2x3 แลวคลิกปุม OK

1

1

2

3

350 Chantra 5.0

4. ตารางจะปรากฎขึ้นมา

5. จับมุมตารางขยายออกไปเพื่อทำ Layout

6. หากตารางที่ไดมาไมพอใช ใหนำเมาสไปวางทายตาราง จากนั้นกดปุม Tab

4

5

6

351Chantra 5.0

7. จะไดตารางเพิ่มมาอีกหนึ่งแถว จากนั้นจะทำการรวมแถวของตารางเขาหากันให

ใชเมาสลาก

8. จากนั้น ไปที่เมนู Table แลวเลือก join Selected cells

9. จะไดพื้นที่ของ header ของเว็บเพจ

7

8

9

352 Chantra 5.0

10. ตอนน้ีเราไดตารางเพ่ือสราง Layout ของเว็บในสวนหัวแลวแตเรายังไมไดกำหนด

ใหตารางไมมีขนาดเสน เพราะจะไดมองไมออกวามีตารางเราจะกำหนดคุณสมบัติของตาราง

โดยไปที่ Table เลือก Table Properties

11. จากนั้นกำหนดคา Border ใหเปน 0

10

11

353Chantra 5.0

12. เราจะไดตารางที่ไมมีเสนขอบจากนั้นจะทำการใสรูปที่เตรียมทำสวนหัวของเว็บ

คลิกเลือก ที่ Tools Bar เพื่อทำการแทรกภาพ

13. จากน้ันทำการเลือกไฟลภาพท่ีเตรียมไว และใสคำอธิบายภาพท่ี Alternate text

12

13

354 Chantra 5.0

14. เมื่อแทรกภาพแลว ภาพจะมาวางในตำแหนงที่กำหนดไว

15. ใหทำการ joint ตารางในสวนทายเพื่อทำ Footer ของเว็บเพจและใสที่อยูของ

เว็บเพจ

14

15

355Chantra 5.0

16. ใสขอมูลที่ตองการใหอยูใน Footer

17. ในสวนของ e-mail ที่จะทำ Link ใหทำการคลุมเมาสแลวคลิกที่ ที่เมนู

Tools Bar

18. ในใสที่อยู e-mail ลงไปจากนั้น click ปุม OK เทานี้ก็จะทำ Link ไปหา email

ไดแลวลองเรียก

16

17

18

356 Chantra 5.0

19. จะได Footer ที่เราตองการ

20. ตอไปจะทำการ save ไฟลเอกสาร html เพื่อทำเปนไฟลเพจแรกของเว็บใหไป

ท่ี Tools Bar จากน้ัน Click เพ่ือทำการบันทึกขอมูล KompoZer จะใหต้ังช่ือ Title ของเว็บเพจ

กอนที่จะตั้งชื่อไฟล

19

20

357Chantra 5.0

21. จากนั้นจะใหตั้งชื่อไฟล

22. คลิกปุม OK

23. ตั้งชื่อไฟลที่จะ Save ไฟลแรกนี้ใหใชชื่อวา Index.html

24. เลือกใหไปเก็บไวที่ xampp -> htdocs -> myweb คลิกปุม Save

21

22

23

24

358 Chantra 5.0

25. เมื่อทำการ save แลวใหลองเรียกเว็บไซตของเราดวย Browser จะไดหนาเว็บ

26. ลองเพิ่มขอมูลในหนาเว็บ

25

26

359Chantra 5.0

27. และทำการเรียกหนาเว็บอีกครั้ง จะพบขอความที่เราสรางขึ้นใหม

28. ใหกลับมาที่ KompoZer แลวลองเลือก Source

27

28

360 Chantra 5.0

29. ใหแกไข code ในสวนของการแสดงผลภาษาไทยโดยกำหนด Charset=TIS-620

30. เม่ือทำการแกไขเรียบรอยแลวตอไปน้ีเว็บของเราก็จะแสดงภาษาไทยไดดี

จะเห็นไดวาเครื่องมือนี้ สามารถที่จะทำใหเราแกไขสรางเว็บเพจในเบื้องตนไดเปน

อยางดี เหมาะมากสำหรับมือใหมที่ตองการซอฟตแวรอะไรงายๆ ในการสรางเว็บ อาจจะเริ่ม

จากฟงกชันงายๆ จากน้ัน พอเร่ิมคุนเคยก็ลองใสลูกเลนอะไรในเว็บเพจใหมากย่ิงข้ึน ถาชำนาญ

เมื่อไหรก็สามารถใชซอฟตแวรนี้เนรมิตสรางสรรคผลงานที่ยอดเยี่ยมออกมาไดเลยครับ

29