KOMPOZER MANUAL

หลั�กการออกแบบเว็�บเพจ          การออกแบบเว็บเพจนั้ �นั้ จะต้�องเข้�าใจทั้ �งทั้างด้�านั้เทั้คนั้�คว็�ธี�การ และร�ปแบบด้�านั้องค�ประกอบข้องสิ่� งทั้� จะนั้!าเสิ่นั้อประกอบก นั้ โรบ�นั้ ว็�ลเล� ยมได้�เข้�ยนั้แนั้ว็ค�ด้ข้องการออกแบบสิ่� งพ�มพ�ไว็�ในั้หนั้ งสิ่'อชื่' อ The Non-

Designer's Design Book ซึ่* งสิ่ามารถนั้!ามาสิ่ร,ปเป-นั้หล กการออกแบบเว็บเพจโด้ยใชื่�กฎพ'�นั้ฐานั้ 4 ข้�อ ด้ งนั้��          1. กฎข้�อที่��หนึ่��ง คว็ามแปลักแตกต�าง (contrast)

               กฎข้�อนั้��เนั้�นั้การออกแบบเว็บเพจให�ม�คว็ามแปลก หล�กเล� ยงการใชื่�องค�ประกอบบนั้จอภาพทั้� ด้�คล�ายๆ ก นั้ เชื่2นั้ การใชื่�ต้ ว็อ กษร สิ่� ข้นั้าด้ คว็ามหนั้าข้องเสิ่�นั้ ร�ปร2าง ทั้� ว็2างบนั้จอ ฯลฯ ถ�าองค�ประกอบข้องเนั้'�อหาไม2ใชื่2สิ่� งเด้�ยว็ก นั้ กคว็รสิ่ร�างให�เหนั้คว็ามแปลกแต้กต้2างอย2างชื่ ด้เจนั้          2. กฎข้�อที่��สอง การย้ำ� าซ้ำ� า (repetition)

              ในั้การออกแบบเว็บเพจจะต้�องม�แบบแผนั้หร'อม�การก!าหนั้ด้ร�ปแบบข้องผ��สิ่ร�างเอง จะชื่2ว็ยให�เว็บเพจนั้ �นั้ม�คว็ามสิ่อด้คล�องก นั้ทั้ �งหมด้ เชื่2นั้ การก!าหนั้ด้ร�ปแบบ การให�สิ่� การสิ่ร�างร�ปร2าง การก!าหนั้ด้พ'�นั้หล ง คว็ามสิ่ มพ นั้ธี�ข้องระยะห2าง ข้นั้าด้ คว็ามหนั้าข้องต้ ว็อ กษร เป-นั้ต้�นั้  การออกแบบด้�ว็ยการย!�าซึ่!�าจะต้�องเนั้�นั้ให�เหนั้ว็2า ในั้การออกแบบเว็บเพจแต้2ละหนั้�าในั้เว็บไซึ่ด้�เด้�ยว็ก นั้จะต้�องม�ร�ปแบบเด้�ยว็ก นั้          3. กฎข้�อที่��สาม การจ�ดแถว็ ว็างแนึ่ว็ (alignment)

              การจ ด้ว็างองค�ประกอบคว็รจะจ ด้ให�เป-นั้ระเบ�ยบ โด้ยพ�จารณาถ*งองค�ประกอบทั้� อย�2ต้ามแถว็ หร'อแนั้ว็เด้�ยว็ก นั้เสิ่มอ จะทั้!าให�เว็บเพจด้�สิ่ะอาด้ต้า นั้!าสิ่ม ย และไม2ข้ ด้ก บคว็ามร� �สิ่*กข้องผ��ใชื่�          4. กฎข้�อที่��ส�� คว็ามใกลั�เค�ย้ำง คว็ามเก��ย้ำว็เนึ่%�อง (proximity)

              กฎข้�อนั้��ก!าหนั้ด้ให�ว็ ต้ถ,ต้2าง ๆ ทั้� อย�2บนั้เว็บเพจม�คว็ามเป-นั้ระเบ�ยบเก� ยว็เนั้' องก นั้ จะทั้!าให�มองเหนั้ได้�ง2าย

ไม2กระจ ด้กระจาย การรว็มกล,2มเป-นั้ว็�ธี�การลด้คว็ามย,2งเหย�ง สิ่ร�างคว็ามเป-นั้ระเบ�ยบ           การว็างองค�ประกอบข้องเว็บเพจนั้ �นั้เป-นั้ทั้ �งศาสิ่ต้ร�และศ�ลป9 ผ��เข้�ยนั้เว็บเพจต้�องเข้�าใจเทั้คนั้�คการเข้�ยนั้โครงสิ่ร�างภาษา HTML การใชื่�เทั้คนั้�คทั้� นั้2าสิ่นั้ใจ เชื่2นั้ การสิ่ร�างภาพ การสิ่ร�างเงา สิ่� เป-นั้ต้�นั้  รว็มถ*งการนั้!าองค�ประกอบทั้างศ�ลปะมาใชื่� การนั้!ากฎทั้ �ง 4 ข้�อไปใชื่�ในั้การออกแบบเว็บเพจนั้ �นั้ไม2คว็รเนั้�นั้ข้�อใด้ข้�อหนั้* ง แต้2คว็รพ�จารณาให�สิ่อด้คล�องก นั้

การสร�างเว็�บเพจ สิ่ามารถสิ่ร�างได้� 2 ว็�ธี� ด้ งนั้��          1. ใช้�โปรแกรมประเภที่เที่�กซ้ำ*เอด+เตอร* (Text Editor) ซึ่* งโปรแกรมทั้� นั้�ยมใชื่�ก นั้มาก ค'อ Notepad เพราะเป-นั้โปรแกรมทั้� ใชื่�ง2าย และม�อย�2ในั้ระบบปฏิ�บ ต้�การ Windows แต้2ต้�องเข้�ยนั้ค!าสิ่ งด้�ว็ยต้นั้เองทั้ �งหมด้          2. ใช้�โปรแกรมประเภที่เว็�บเอด+เตอร* (Web Editor) เชื่2นั้ Microsoft FrontPage , Macromedia

Dreamweaver, Homesite เป-นั้ต้�นั้ โด้ยสิ่2ว็นั้ใหญ่2แล�ว็โปรแกรมสิ่!าเรจร�ปเหล2านั้��  ผ��ใชื่�สิ่ามารถสิ่ร�างได้�ด้�ว็ยต้นั้เองคล�ายก บการใชื่�โปรแกรมสิ่!านั้ กงานั้ทั้ ว็ไป โด้ยไม2จ!าเป-นั้ต้�องทั้!าคว็ามเข้�าใจในั้สิ่2ว็นั้ข้องโครงสิ่ร�างข้องเว็บเพจ

         โปรแกรม KompoZer นั้��จ ด้ได้�ว็2าเป-นั้การใชื่�โปรแกรมประเภทั้เว็บเอด้�เต้อร�ชื่นั้�ด้หนั้* งทั้� ใชื่�ในั้การสิ่ร�างเว็บเพจ แต้2ข้�อด้�ทั้� ทั้!าให�โปรแกรมนั้��โด้ด้เด้2นั้กว็2าโปรแกรมอ' นั้ ๆ กค'อ เป-นั้โปรแกรมทั้� ไม2ม�ล�ข้สิ่�ทั้ธี�=สิ่ามารถนั้!าไปใชื่�ในั้การสิ่ร�างเว็บเพจเผยแพร2ข้�อม�ลผ2านั้ระบบอ�นั้เต้อร�เนั้ต้ได้� ผ��ใชื่�สิ่ามารถเล'อกใชื่�แถบเคร' องม'อต้2าง ๆคล�ายก บการปร บแต้2งเอกสิ่ารในั้โปรแกรมประมว็ลผลค!า รว็มทั้ �งสิ่ามารถจ ด้การก บเว็บเพจต้ามโหมด้ข้องการแสิ่ด้งผลทั้� เล'อกได้�ต้ามคว็ามต้�องการ

          ข้� นึ่ตอนึ่การต+ดต� งโปรแกรม KompoZer สิ่ามารถทั้!าได้�ด้ งต้2อไปนั้��

1.  คล�กทั้� นั้� เพ' อด้าว็นั้�โหลด้โปรแกรม KompoZer  หล งการคล�กจะปรากฏิหนั้�าต้2างด้ งต้2อไปนั้��

                 เม' อปรากฏิหนั้�าต้2างนั้��

                -  หากต้�องการต้�ด้ต้ �งโปรแกรมโด้ยทั้ นั้ทั้� ให�คล�กทั้� ป,>ม  

                -  หากต้�องการจ ด้เกบไฟล�โปรแกรมไว็� เพ' อทั้!าการต้�ด้ต้ �งในั้ภายหล งให�คล�กทั้� ป,>ม                    

                    ซึ่* งเม' อด้าว็นั้�โหลด้เร�ยบร�อยแล�ว็ จะปรากฏิไอคอนั้ล กษณะนั้��    

2. หล งการคล�กทั้� ป,>ม หร'อด้ บเบ��ลคล�กทั้� ไฟล�โปรแกรมเพ' อต้�ด้ต้ �งโปรแกรม KompoZer 

              จะปรากฏิหนั้�าต้2างเพ' อเต้ร�ยมการต้�ด้ต้ �งโปรแกรมและแจ�งเต้'อนั้ว็2า คว็รจะป@ด้โปรแกรมอ' นั้ ๆ               ก2อนั้ทั้!าการต้�ด้ต้ �งโปรแกรมต้2อไป  

เม' อต้รว็จสิ่อบจนั้ม นั้ใจแล�ว็ ให�คล�กทั้� ป,>ม  

3. เม' อปรากฏิหนั้�าต้2างนั้��จะแสิ่ด้งถ*งว็2า ผ��ใชื่�โปรแกรมต้�องยอมร บเง' อนั้ไข้ทั้� ปรากฏิอย�2            จ*งจะสิ่ามารถใชื่�โปรแกรมนั้��ได้�             

                     

ให�คล�กเล'อก เพ' อยอมร บเง' อนั้ไข้ และคล�กทั้� ป,>ม ต้2อไป

4. เม' อปรากฏิหนั้�าต้2างนั้�� จะเป-นั้การแจ�งให�ทั้ราบว็2า โปรแกรม KompoZer จะถ�กจ ด้เกบไว็�ในั้ Drive c:

            ในั้โฟลเด้อร� Program Files ชื่' อโฟลเด้อร�ย2อยว็2า KompoZer            

            หากต้�องการเปล� ยนั้ต้!าแหนั้2งทั้� จ ด้เกบโปรแกรม ให�คล�กทั้� ป,>ม แล�ว็เล'อก Drive เกบข้�อม�ลใหม2

ให�คล�กทั้� ป,>ม เพ' อต้�ด้ต้ �งโปรแกรมต้2อไป

5. เม' อปรากฏิหนั้�าต้2างนั้�� จะเป-นั้การแจ�งให�ทั้ราบว็2า โปรแกรม KompoZer จะถ�กสิ่ร�าง Shortcuts

           ไว็�ในั้โฟลเด้อร� Start Menu โด้ยใชื่�ชื่' อว็2า KompoZer หากต้�องการเปล� ยนั้ต้!าแหนั้2งทั้� จ ด้เกบ Shortcuts 

           ให�คล�กทั้� ป,>ม

            (การสิ่ร�าง Shortcuts ในั้ทั้� นั้�� หมายถ*ง การนั้!าไอคอนั้การใชื่�งานั้ข้องโปรแกรมนั้ �นั้มาแสิ่ด้งในั้ต้!าแหนั้2ง             ต้2าง ๆ ในั้สิ่2ว็นั้ข้องเมนั้�ย2อย ๆ ทั้� ปรากฏิเม' อคล�กทั้� ป,>ม Start)

ให�คล�กทั้� ป,>ม เพ' อต้�ด้ต้ �งโปรแกรมต้2อไป

6. เม' อปรากฏิหนั้�าต้2างนั้�� จะเป-นั้การแจ�งให�ทั้ราบว็2า ต้�องการให�เพ� มไอคอนั้ข้องโปรแกรม KompoZer

            ในั้ไว็�ในั้สิ่2ว็นั้ใด้อ�กบ�าง              -  ถ�าคล�กเล'อกทั้� Create a desktop icon ไอคอนั้ข้องโปรแกรม จะปรากฏิอย�2บนั้ Desktop

                (หนั้�าต้2างการใชื่�งานั้)

             -  ถ�าคล�กเล'อกทั้� Create a Quick Launch icon ไอคอนั้ข้องโปรแกรม จะปรากฏิอย�2                บนั้ Task Bar (แถบล2างสิ่,ด้ทั้� เร � มต้�นั้ด้�ว็ยป,>ม Start)

ให�คล�กทั้� ป,>ม เพ' อต้�ด้ต้ �งโปรแกรมต้2อไป

7. เม' อปรากฏิหนั้�าต้2างนั้�� จะเป-นั้การแจ�งให�ทั้ราบว็2า ก!าล งจะเข้�าสิ่�2การต้�ด้ต้ �งโปรแกรม KompoZer

            และจะปรากฏิข้�อคว็ามแสิ่ด้งต้!าแหนั้2งการต้�ด้ต้ �งโปรแกรมในั้สิ่2ว็นั้ต้2าง ๆ 

ให�คล�กทั้� ป,>ม  เพ' อต้�ด้ต้ �งโปรแกรมต้2อไป

8. เม' อปรากฏิหนั้�าต้2างนั้�� ห�ามคล�กทั้� ป,>มใด้ ๆ จนั้กว็2าโปรแกรมจะทั้!าการต้�ด้ต้ �งแล�ว็เสิ่รจ

9. เม' อปรากฏิหนั้�าต้2างนั้�� แสิ่ด้งว็2า ได้�ต้�ด้ต้ �งโปรแกรมเร�ยบร�อยแล�ว็

            -  คล�กเคร' องหมายถ�กในั้สิ่2ว็นั้ข้อง Launch KompoZer ออก หากไม2ต้�องการเป@ด้โปรแกรม KompoZer

               ข้*�นั้มาใชื่�งานั้โด้ยทั้ นั้ทั้�

ให�คล�กทั้� ป,>ม  เป-นั้การสิ่��นั้สิ่,ด้การต้�ด้ต้ �งโปรแกรม KompoZer

ส�ว็นึ่ประกอบข้องโปรแกรม KompoZer

เม' อต้�ด้ต้ �งและเป@ด้โปรแกรม KompoZer จะปรากฏิหนั้�าต้2างด้ งร�ป

     

   สิ่2ว็นั้ประกอบหล กข้องหนั้�าต้2างการใชื่�งานั้โปรแกรม KompoZer  ม�รายละเอ�ยด้ด้ งนั้��        1.  แถบเมนึ่-  จะรว็บรว็มค!าสิ่ งทั้� ใชื่�ในั้การจ ด้การเว็บเพจทั้ �งหมด้ โด้ยแบ2งออกเป-นั้ 8 หมว็ด้หม�2                ประกอบด้�ว็ย  File,  Edit,  View,  Insert,  Format,  Table,  Tools,  Help

2.  แถบเคร%�องม%อ  จะประกอบด้�ว็ยป,>ม หร'อ      ไอคอนั้แทั้นั้ค!าสิ่ งทั้� ใชื่�งานั้อย�2เป-นั้ประจ!า      โด้ยไม2จ!าเป-นั้ต้�องคล�กเล'อกค!าสิ่ งจาก     แถบเมนั้� เชื่2นั้ การเป@ด้ไฟล�ข้�อม�ล , การบ นั้ทั้*ก     ไฟล�ข้�อม�ล, การแทั้รกร�ปภาพ เป-นั้ต้�นั้         หากต้�องการแสิ่ด้งหร'อซึ่2อนั้     แถบเคร' องม'อใด้สิ่ามารถ คล�กเล'อกได้�ทั้�      แถบเมนั้� View ->Show/Hide

     แล�ว็เล'อกแถบเคร' องม'อทั้� ต้�องการ        3.  พ% นึ่ที่��จ�ดการไซ้ำด*  เป-นั้สิ่2ว็นั้ทั้� ใชื่�ในั้การถ2ายโอนั้แฟAมข้�อม�ล (เอกสิ่ารทั้� สิ่ร�างจากโปรแกรม KompoZer) 

             ไม2ว็2าจะเป-นั้การถ2ายโอนั้แฟAมข้�อม�ลจากเคร' องข้องเราไปไว็�ย งเคร' องคอมพ�ว็เต้อร�อ' นั้ (Upload) หร'อ              จะเป-นั้การโอนั้ย�ายแฟAมข้�อม�ลจากเคร' องคอมพ�ว็เต้อร�อ' นั้มาเกBบไว็�ในั้เคร' องเรา (Download) กต้าม

        4.  พ% นึ่ที่��แก�ไข้ข้�อคว็าม  เป-นั้สิ่2ว็นั้ทั้� ใชื่�ในั้การสิ่ร�างเอกสิ่าร สิ่ามารถจ ด้ร�ปแบบข้องหนั้�าเว็บเพจต้ามต้�องการ

        5.  โหมดการแสดงผลั  แบ2งออกเป-นั้ 4 ล กษณะ ด้ งนั้��              -  Normal Mode  ม�ล กษณะเหม'อนั้ก บพ'�นั้ทั้� หนั้�ากระด้าษเชื่2นั้เด้�ยว็ก บในั้โปรแกรมประมว็ลผลค!าทั้ ว็ไป                   เหมาะสิ่!าหร บผ��เร � มต้�นั้การใชื่�งานั้              -  HTML Mode  ม�ล กษณะคล�ายคล*งก บ Normal Mode แต้กต้2างเพ�ยงจะม�สิ่ ญ่ล กษณ�ก!าก บว็2า                   ในั้แต้2ละสิ่2ว็นั้ได้�ม�การใชื่�โครงสิ่ร�างแทั้Cกข้องภาษา HTML ใด้              -  Source Mode  จะปรากฏิรายละเอ�ยด้ข้องการใชื่�โครงสิ่ร�างแทั้Cกข้องภาษา HTML ทั้ �งหมด้                   เหมาะสิ่!าหร บผ��ทั้� ค,�นั้เคยก บการใชื่�งานั้โครงสิ่ร�างภาษา HTML เป-นั้อย2างด้�               - Preview  Mode  จะชื่2ว็ยให�ผ��ใชื่�งานั้ทั้ราบว็2า เม' อเป@ด้เอกสิ่ารนั้��บนั้เว็บบราว็เซึ่อร�                   เว็บเพจนั้��จะม�ล กษณะอย2างไร

top

การสร�าง / เพ+�มเว็�บเพจใหม�        โด้ยปกต้� เม' อเป@ด้โปรแกรม KompoZer ข้*�นั้มาใชื่�งานั้ กจะปรากฏิพ'�นั้ทั้� ในั้การแก�ไข้ข้�อคว็ามหร'อเอกสิ่ารใหม2ข้*�นั้มาให�โด้ยทั้ นั้ทั้�  แต้2หากผ��ใชื่�ต้�องการเพ� มเว็บเพจใหม2 สิ่ามารถทั้!าได้�ต้ามข้ �นั้ต้อนั้ต้2อไปนั้��

ว็�ธี�ทั้� 1 ว็�ธี�ทั้� 2

เล'อกเมนั้� File -> New จะปรากฏิหนั้�าต้2าง Create a new document or template ก!าหนั้ด้รายละเอ�ยด้ต้าม

ร�ปแล�ว็คล�กทั้� ป,>ม Create

คล�กทั้� ป,>ม New บนั้แถบเคร' องม'อ

 

ไม2ว็2าจะปฏิ�บ ต้�ต้ามว็�ธี�ทั้� 1 หร'อ ว็�ธี�ทั้� 2 จะปรากฏิพ'�นั้ทั้� แก�ไข้ข้�อคว็ามใหม2 ทั้� ชื่' อว็2า untitled ด้ งร�ป

top

การเป1ดเว็�บเพจเด+มมาแก�ไข้

     สิ่ามารถคล�กทั้� ป,>ม หร'อคล�กเมนั้�  File -> Open File ค�นั้หาต้!าแหนั้2งทั้� เกบไฟล�ข้�อม�ลไว็� หล งจากนั้ �นั้ให�คล�กเล'อกไฟล�ข้�อม�ล (ซึ่* งจะม�ล กษณะไอคอนั้ทั้� แต้กต้2างก นั้ ทั้ �งนั้��ข้*�นั้อย�2ก บเล'อกใชื่�เว็บบราว็�เซึ่อร�

เชื่2นั้  ใชื่�เว็บบราว็เซึ่อร� Internet Explorer)

top

การปร�บแต�งค2ณสมบ�ต+ข้องเว็�บเพจ        เว็บเพจทั้� ด้�จะต้�องม�การก!าหนั้ด้ค,ณสิ่มบ ต้�พ'�นั้ฐานั้ให�ครบถ�ว็นั้ เพ' อประโยชื่นั้�ในั้การค�นั้หาข้�อม�ล และการแสิ่ด้งผลทั้� สิ่มบ�รณ�บนั้เคร'อข้2ายอ�นั้เต้อร�เนั้ต้        การก!าหนั้ด้ค,ณสิ่มบ ต้�ข้องหนั้�าเว็บเพจ สิ่ามารถทั้!าได้�โด้ยการเล'อกเมนั้� Format -> Page Title and

Properties... ซึ่* งจะแสิ่ด้งหนั้�าต้2างด้ งนั้��      ค2ณสมบ�ต+หลั�กที่��คว็รก�าหนึ่ด

Title : เป-นั้การก!าหนั้ด้ชื่' อเว็บเพจ ซึ่* งจะปรากฏิอย�2บนั้แถบชื่' อเร' องข้องหนั้�าต้2างเว็บบราว็เซึ่อร�

Author : เป-นั้การก!าหนั้ด้ชื่' อข้องผ��ทั้� สิ่ร�างเว็บเพจนั้��ข้*�นั้มา

Description :  เป-นั้การสิ่ร,ปย2อเพ' ออธี�บายถ*งเว็บเพจทั้� ม�เนั้'�อคว็ามนั้�อย ๆ

Languague : ใชื่�ระบ,ภาษาในั้การเข้�ยนั้เว็บเพจ  ผ��ใชื่�สิ่ามารถ

คล�กเล'อกป,>ม แล�ว็เปล� ยนั้เป-นั้ ภาษาไทั้ย (th) ได้�

Character set : เป-นั้การก!าหนั้ด้ว็2า ข้�อม�ลแต้2ละไบต้� (ต้ ว็อ กษร) นั้ �นั้จะใชื่�ชื่,ด้ต้ ว็อ กษรใด้ เว็บภาษาไทั้ยทั้ ว็ไปจะก!าหนั้ด้เป-นั้ windows-874 ผ��ใชื่�สิ่ามารถคล�กเล'อก

ทั้� ป,>ม

เม' อผ��ใชื่�สิ่ร�าง / เพ� มหนั้�าเว็บเพจใหม2ข้*�นั้มาใชื่�งานั้ทั้,กคร �ง คว็รก!าหนั้ด้ค,ณสิ่มบ ต้�ข้องหนั้�าเว็บเพจทั้ �ง 5 สิ่2ว็นั้ให�ครบ

top

การปร�บแต�งพ% นึ่หลั�ง         ในั้การสิ่ร�างเว็บเพจนั้ �นั้ ผ��ใชื่�สิ่ามารถก!าหนั้ด้พ'�นั้หล งได้�จากการเล'อกเมนั้� Format -> Page Colors and

Background... ซึ่* งจะแสิ่ด้งหนั้�าต้2างด้ งนั้��       

การก!าหนั้ด้พ'�นั้หล งข้องเว็บเพจนั้ �นั้ สิ่ามารถกระทั้!าได้� 2 ร�ปแบบ ด้ งนั้��

ร-ปแบบที่�� 1 การก�าหนึ่ดส�ให�ก�บพ% นึ่หลั�ง

ให�คล�กทั้� หล งค!าว็2า  Background : แล�ว็เล'อกสิ่�ต้ามต้�องการ(หากไม2สิ่ามารถคล�กเพ' อปร บเปล� ยนั้สิ่�ได้� ให�ต้รว็จสิ่อบว็2า ม�การเล'อกทั้ Use custom colors : หร'อไม2)

ร-ปแบบที่�� 2 การก�าหนึ่ดร-ปภาพเป4นึ่พ% นึ่หลั�ง

ให�คล�กทั้� ในั้สิ่2ว็นั้ข้อง Background Image : เล'อกต้!าแหนั้2งการเกบร�ปภาพและเล'อกร�ปภาพต้ามต้�องการ

Tip : ร�ปภาพทั้� จะนั้!ามาใชื่�เป-นั้พ'�นั้หล งนั้ �นั้คว็รม�ข้นั้าด้คว็ามละเอ�ยด้เทั้2าก บหนั้�าเว็บเพจทั้� ต้�องการสิ่ร�าง

 top

การบ�นึ่ที่�กเว็�บเพจ        โด้ยปกต้�การบ นั้ทั้*กเว็บเพจนั้ �นั้ หนั้�าแรกข้องเว็บไซึ่ด้�หร'อโฮมเพจคว็รจะบ นั้ทั้*กในั้ชื่' อว็2า index.html

สิ่2ว็นั้รายละเอ�ยด้หร'อเนั้'�อหาสิ่2ว็นั้อ' นั้ ๆ ข้*�นั้อย�2ก บการจ ด้ระบบข้องผ��สิ่ร�างเว็บเพจ         ข้ �นั้ต้อนั้ในั้การบ นั้ทั้*กเว็บเพจนั้ �นั้แบ2งได้�เป-นั้ 3 กรณ�ด้ งนั้��

กรณ�ทั้� 1 การบ นั้ทั้*กเว็บเพจคร �งแรกกรณ�ทั้� 2 การเป@ด้เว็บเพจข้*�นั้มาแก�ไข้

แล�ว็ต้�องการบ นั้ทั้*กเป-นั้ชื่' อใหม2กรณ�ทั้� 3 การเป@ด้เว็บเพจข้*�นั้มา

แก�ไข้แล�ว็บ นั้ทั้*กไว็�ในั้ชื่' อเด้�ม

เล'อกเมนั้� File -> Save As...

หร'อคล�กทั้� ป,>ม 

เล'อกเมนั้� File -> Save As... เล'อกเมนั้� File -> Save

หร'อคล�กทั้� ป,>ม 

top

การป1ดเว็�บเพจ / การป1ดโปรแกรม    ค!าสิ่ งทั้� ใชื่�ในั้การป@ด้เว็บเพจ / ป@ด้โปรแกรมม�ล กษณะเด้�ยว็ก นั้ก บทั้� ใชื่�ในั้โปรแกรมสิ่!านั้ กงานั้ทั้ ว็ไป ซึ่* งม�รายละเอ�ยด้ด้ งนั้��

การป@ด้เว็บเพจทั้� ละหนั้�า การป@ด้เว็บเพจทั้ �งหมด้ การป@ด้โปรแกรม

เล'อกเมนั้� File -> Close

หร'อคล�กทั้� ป,>ม   เล'อกเมนั้� File -> Close All

เล'อกเมนั้� File -> Exit  

หร'อคล�กทั้� ป,>ม X บนั้แถบชื่' อเร' อง (Title Bar)

top

Tip : ค!าสิ่ งค�ย�ล ด้สิ่ามารถสิ่ งเกต้ได้�จากทั้�ายค!าสิ่ งในั้แถบเมนั้� เชื่2นั้ แสิ่ด้งว็2า นั้อกจากจะใชื่�ค!าสิ่ ง File -> New เพ' อสิ่ร�างเว็บเพจใหม2แล�ว็ ย งสิ่ามารถใชื่�ค!าสิ่ ง Ctrl + N จากค�ย�บอร�ด้ได้�อ�กด้�ว็ย

แถบเคร%�องม%อในึ่การปร�บแต�งข้�อคว็าม      การจ ด้การข้�อคว็ามในั้โปรแกรม KompoZer นั้ �นั้สิ่ามารถทั้!าได้�เหม'อนั้ก บโปรแกรมประมว็ลค!าโด้ยทั้ ว็ไป ซึ่* งม�แถบเคร' องม'อทั้� ใชื่�ในั้การจ ด้การด้ งนั้��

แถบเคร' องม'อ หนั้�าทั้�

ใชื่�ในั้การก!าหนั้ด้ร�ปแบบข้�อคว็ามโด้ยใชื่�หล กมาต้รฐานั้หล กข้อง HTML

เชื่2นั้ ข้�อคว็ามปกต้�ให�เล'อก Body Text,  สิ่2ว็นั้ทั้� เป-นั้ห ว็ข้�อให�เล'อก Heading 1 - 6 เป-นั้ต้�นั้

ใชื่�ในั้การก!าหนั้ด้ต้ ว็เลข้ 1,2,3,... และการใสิ่2สิ่ ญ่ล กษณ�หนั้�าข้�อคว็าม

ใชื่�ในั้การเพ� ม / ลด้ย2อหนั้�าให�ก บข้�อคว็าม

ใชื่�ในั้การเปล� ยนั้ร�ปแบบต้ ว็อ กษร (font) โด้ยทั้ ว็ไปร�ปแบบต้ ว็อ กษรทั้� นั้�ยมใชื่� ได้�แก2 MS Sans Serif , Tahoma

ใชื่�ในั้การก!าหนั้ด้สิ่�ต้ ว็อ กษร สิ่�พ'�นั้หล งข้องต้ ว็อ กษร และการเนั้�นั้ข้�อคว็าม

ใชื่�ในั้การลด้ / เพ� มข้นั้าด้ต้ ว็อ กษร

ใชื่�ในั้การก!าหนั้ด้ต้ ว็หนั้า / ต้ ว็เอ�ยง / ต้ ว็อ กษรข้�ด้เสิ่�นั้ใต้�

ใชื่�ในั้การจ ด้ร�ปแบบให�ก บข้�อคว็าม (ชื่�ด้ซึ่�าย / ก* งกลาง / ชื่�ด้ข้ว็า / ชื่�ด้ข้อบ)

top

แถบเมนึ่-ในึ่การปร�บแต�งข้�อคว็ามหากต้�องการปร บแต้2งข้�อคว็ามเพ� มเต้�ม สิ่ามารถเล'อกเมนั้� Format -> ...  ได้�ด้ งนั้��

ต�ว็อย้ำ�างการเลั%อกใช้�เมนึ่- Format

การก!าหนั้ด้ร�ปแบบต้ ว็อ กษรเล'อกเมนั้� Format -> Font -> เลั%อกร-ปแบบต�ว็อ�กษร

การก!าหนั้ด้ข้นั้าด้ต้ ว็อ กษรเล'อกเมนั้� Format -> Size -> เลั%อกข้นึ่าดต�ว็อ�กษร

การก!าหนั้ด้ล กษณะต้ ว็อ กษร (ต้ ว็หนั้า, ต้ ว็เอ�ยง, ... )

เล'อกเมนั้� Format -> Text Style -> เลั%อกลั�กษณะต�ว็อ�กษร

การก!าหนั้ด้สิ่�ให�ต้ ว็อ กษรเล'อกเมนั้� Format -> Text Color -> เลั%อกส�ต�ว็อ�กษร

การจ ด้ร�ปแบบให�ข้�อคว็ามเล'อกเมนั้� Format -> Align -> เลั%อกร-ปแบบ

top

การปร�บแต�งส�ข้องข้�อคว็ามที่� งเว็�บเพจ        นั้อกจากการปร บแต้2งสิ่�ข้องข้�อคว็ามจากแถบเคร' องม'อข้�างต้�นั้แล�ว็ ผ��ใชื่�ย งสิ่ามารถปร บแต้2งสิ่�ข้องข้�อคว็ามทั้ �งเว็บเพจได้� โด้ยการเล'อกเมนั้� Format -> Page Colors and Background...

ซึ่* งจะแสิ่ด้งหนั้�าต้2างด้ งนั้��

     หากผ��ใชื่�ต้�องการปร บแต้2งสิ่�ข้องข้�อคว็ามต้ามคว็ามต้�องการจะต้�องคล�กเล'อก Use custom

colors : ก2อนั้     หล งจากนั้ �นั้ คว็รเล'อกปร บแต้2งสิ่�ข้องข้�อคว็ามให�แต้กต้2างก นั้ ต้ามรายละเอ�ยด้ด้ งนั้��

Normal text : การก!าหนั้ด้สิ่�ให�ก บข้�อคว็ามปกต้�

Link text : การก!าหนั้ด้สิ่�ให�ก บข้�อคว็ามทั้� เป-นั้จ,ด้เชื่' อมโยงข้องเว็บเพจนั้ �นั้ ๆ

Active link text : การก!าหนั้ด้สิ่�ให�ก บข้�อคว็ามระหว็2างการคล�กเล'อกจ,ด้เชื่' อมโยงนั้ �นั้

Visited link text : การก!าหนั้ด้สิ่�ให�ก บข้�อคว็ามทั้� ได้�เพ' อแสิ่ด้งให�เหนั้ว็2าได้�ม�การคล�กเล'อกจ,ด้เชื่' อมโยงนั้ �นั้แล�ว็

Background : การก!าหนั้ด้สิ่�พ'�นั้หล งให�ก บเว็บเพจ

top

Tip :  โด้ยปกต้�หากต้�องการข้*�นั้บรรทั้ ด้จะใชื่�ว็�ธี�การกด้ป,>ม Enter

          แต้2หากต้�องการให�การจ ด้ร�ปแบบข้�อคว็ามย งคงเหม'อนั้เด้�ม ให�กด้ป,>ม Shift + Enter แทั้นั้

ช้นึ่+ดข้องร-ปภาพที่��นึ่�ามาใช้�ในึ่เว็�บเพจ

         ร�ปภาพทั้� นั้!ามาใชื่�ในั้การสิ่ร�างเว็บเพจนั้ �นั้คว็รม�ข้นั้าด้เลก  เพ' อให�ผ��ชื่มสิ่ามารถด้าว็นั้�โหลด้มาแสิ่ด้งบนั้เว็บบราว็เซึ่อร�ได้�อย2างรว็ด้เรว็ ภาพทั้� ใชื่�ในั้เว็บเพจนั้ �นั้ ม� 3 ชื่นั้�ด้ ได้�แก2         1.  ภาพช้นึ่+ด  jpeg  (Joint  Photographic  Export  Group) เป-นั้แฟAมภาพทั้� ม�คว็ามละเอ�ยด้ข้องสิ่�เหม'อนั้ก บร�ปภาพจร�งมากทั้� สิ่,ด้ เหมาะสิ่!าหร บภาพถ2ายบ,คคล ว็ ต้ถ, สิ่� งข้อง หร'อภาพว็�ว็ ธีรรมชื่าต้�  ม�สิ่2ว็นั้ข้ยายเป-นั้  jpg

        2.  ภาพช้นึ่+ด  gif  (Graphic  Interchange  Format)  เป-นั้แฟAมภาพทั้� ม�คว็ามละเอ�ยด้ข้องสิ่�ไม2เก�นั้ 256  สิ่�  เหมาะสิ่!าหร บภาพการ�ต้�นั้  ภาพเคล' อนั้ไหว็  หร'อต้ ว็อ กษร  ม�สิ่2ว็นั้ข้ยายเป-นั้  gif

        3.  ภาพช้นึ่+ด  png  (Portable  Network  Graphics)  สิ่ามารถแสิ่ด้งสิ่�ได้�มากกว็2า  256  สิ่�  การบ�บอ ด้ภาพนั้�อยกว็2า  ภาพชื่นั้�ด้  jpeg  ทั้!าให�แสิ่ด้งผลได้�เรว็  แต้2เว็บบราว็เซึ่อร�ร, 2นั้ต้! า ๆ อาจแสิ่ด้งผลไม2ได้�

top

ข้� นึ่ตอนึ่การแที่รกร-ปภาพลังในึ่เว็�บเพจ

        1.  คล�กเล'อกเมนั้�  Insert -> Image...  หร'อ  คล�กทั้�    บนั้แถบเคร' องม'อ จะปรากฏิหนั้�าต้2าง Image

Properties ด้ งนั้��

2.  เล'อกทั้� แทั้บ Location  คล�กทั้�   ในั้สิ่2ว็นั้ทั้�ายข้อง Image Location :  เพ' อค�นั้หาและเล'อกร�ปภาพจากแหล2งทั้� เกบข้�อม�ล เม' อเล'อกร�ปภาพได้�แล�ว็ในั้สิ่2ว็นั้ข้อง Image Preview จะแสิ่ด้งต้ ว็อย2างและข้นั้าด้ข้องร�ปภาพ

3. ให�เล'อกต้ ว็เล'อกใด้ต้ ว็เล'อกหนั้* งด้ งต้2อไปนั้��   -  Altenate text : ค'อ การก!าหนั้ด้ให�ม�ข้�อคว็ามปรากฏิเม' อเล' อนั้เมาสิ่�มาว็างบนั้ร�ปภาพนั้ �นั้   -  Don't use altenate text :  ไม2ต้�องการให�ปรากฏิข้�อคว็ามใด้ เม' อเล' อนั้เมาสิ่�มาว็างบนั้ร�ปภาพนั้ �นั้

4. คล�กป,>ม  เพ' อแทั้รกร�ปภาพในั้ต้!าแหนั้2งทั้� ต้�องการ

top

การก�าหนึ่ดค2ณสมบ�ต+ให�ก�บร-ปภาพ     ในั้ระหว็2างทั้� แทั้รกร�ปภาพลงในั้เว็บเพจ  สิ่ามารถก!าหนั้ด้ค,ณสิ่มบ ต้�เพ� มเต้�มได้�ด้ งนั้��

การก�าหนึ่ดข้นึ่าดข้องร-ปภาพ    ให�เล'อกแทั้บ  Dimensions  ผ��ใชื่�สิ่ามารถเล'อกก!าหนั้ด้ข้นั้าด้ข้องร�ปภาพได้� 2 ล กษณะ

Actual Sizeก!าหนั้ด้ต้ามข้นั้าด้จร�งข้องร�ปภาพ

Custom Sizeก!าหนั้ด้คว็ามกว็�าง (Width) และคว็ามสิ่�ง (Height) ต้ามคว็ามต้�องการข้องผ��ใชื่�หากต้�องการให�ร�ปภาพปร บสิ่ ด้สิ่2ว็นั้ข้องคว็ามกว็�างหร'อคว็ามสิ่�งให�คงทั้� เม' อม�การก!าหนั้ด้ค2าอย2างใด้อย2างหนั้* งใหม2 จะต้�องคล�กเล'อกทั้�  Constrain

การก�าหนึ่ดต�าแหนึ่�งข้องร-ปภาพ    ให�เล'อกแทั้บ Appearance ผ��ใชื่�สิ่ามารถเล'อกก!าหนั้ด้ต้!าแหนั้2งข้องร�ปภาพได้� 4 ล กษณะ

Left and right :ก!าหนั้ด้ต้!าแหนั้2งห2างจากข้อบซึ่�ายและข้อบข้ว็า  ม�หนั้2ว็ยเป-นั้ pixels

Top and Bottom :ก!าหนั้ด้ต้!าแหนั้2งห2างจากข้อบบนั้และข้อบล2าง  ม�หนั้2ว็ยเป-นั้ pixels

Solid Border :ก!าหนั้ด้คว็ามหนั้าข้องกรอบภาพม�หนั้2ว็ยเป-นั้ pixels

Align Text to Image :ก!าหนั้ด้การจ ด้ต้!าแหนั้2งระหว็2างข้�อคว็ามและภาพ

Tip :  หากต้�องการปร บเปล� ยนั้ค,ณสิ่มบ ต้�ข้องภาพในั้ภายหล งจากแทั้รกร�ปภาพเร�ยบร�อยแล�ว็          สิ่ามารถคล�กข้ว็า เล'อก Image Properties...

ข้� นึ่ตอนึ่การแที่รกตารางลังในึ่เว็�บเพจ

     1.  คล�กเล'อกเมนั้�  Table -> Insert -> Table...  หร'อ  คล�กทั้�    บนั้แถบเคร' องม'อ จะปรากฏิหนั้�าต้2าง Insert Table ด้ งร�ป

     2. ในั้การแทั้รกต้ารางสิ่ามารถกระทั้!าได้� 2 ล กษณะ ด้ งนั้��

    2.1  ให�เล'อกแทั้บ Quickly หากต้�องการก!าหนั้ด้ข้นั้าด้ข้องต้ารางอย2างรว็ด้เรว็ โด้ยการเล' อนั้เมาสิ่�ในั้ต้าราง และทั้!าการคล�กเมาสิ่� เม' อเล'อกจ!านั้ว็นั้เซึ่ลล�ข้องต้ารางได้�ต้ามต้�องการ   

     2.2  ให�เล'อกแทั้บ Precisely

หากต้�องการก!าหนั้ด้ข้นั้าด้ข้องต้ารางต้ามคว็ามต้�องการข้องผ��ใชื่� โด้ยใสิ่2จ!านั้ว็นั้แถว็ในั้สิ่2ว็นั้ข้อง Rows: และใสิ่2จ!านั้ว็นั้คอล มนั้�ในั้สิ่2ว็นั้ข้อง Column:

    ผ��ใชื่�สิ่ามารถก!าหนั้ด้ข้นั้าด้คว็ามกว็�างข้องต้ารางในั้ชื่2อง Width: โด้ยจะก!าหนั้ด้ค2าต้ ว็เลข้ต้ามหนั้2ว็ย pixels หร'อ ต้ามค2า % ข้องเซึ่ลล�กได้�  และนั้อกจากนั้��สิ่ามารถก!าหนั้ด้คว็ามหนั้าข้องเสิ่�นั้ต้ารางได้�ในั้สิ่2ว็นั้ Border: โด้ยสิ่ามารถใสิ่2ต้ ว็เลข้ได้�ต้ �งแต้2 0 - 10

(0 หมายถ*ง จะไม2ปรากฏิเสิ่�นั้ต้ารางเม' อแสิ่ด้งผลบนั้เว็บบราว็เซึ่อร�)

top

การจ�ดการตารางในึ่เว็�บเพจ     ไม2ว็2าจะเล'อกการสิ่ร�างต้ารางแบบใด้กต้ามจะปรากฏิต้ารางในั้หนั้�าเว็บเพจ ด้ งต้ ว็อย2างนั้��

     การเพ+�มจ�านึ่ว็นึ่คอลั�มนึ่* สิ่ามารถทั้!าได้�ด้ งนั้��     ว็+ธี�ที่�� 1 สิ่ามารถคล�กได้�ทั้� ห ว็ล�กศรทั้ �งสิ่องด้�านั้  ถ�าคล�กทั้� ห ว็ล�กศรด้�านั้ซึ่�ายจะเป-นั้การเพ� มคอล มนั้�ไปทั้างด้�านั้ซึ่�ายอ�ก 1

คอล มนั้� หร'อถ�าคล�กทั้� ห ว็ล�กศรทั้างด้�านั้ข้ว็าจะเป-นั้การเพ� มคอล มนั้�ไปทั้างด้�านั้ข้ว็าอ�ก 1 คอล มนั้�     ว็+ธี�ที่�� 2 สิ่ามารถคล�กเมนั้�  Table -> Insert -> Column Before เม' อต้�องการเพ� มคอล มนั้�ไปทั้างซึ่�าย หร'อคล�กเมนั้�  Table -> Insert -> Column After เม' อต้�องการเพ� มคอล มนั้�ไปทั้างข้ว็า

     การเพ+�มจ�านึ่ว็นึ่แถว็ สิ่ามารถทั้!าได้�ด้ งนั้��     ว็+ธี�ที่�� 1 สิ่ามารถคล�กได้�ทั้� ห ว็ล�กศรทั้ �งสิ่องด้�านั้  ถ�าคล�กทั้� ห ว็ล�กศรด้�านั้บนั้จะเป-นั้การเพ� มแถว็ด้�านั้บนั้อ�ก 1 แถว็ หร'อถ�าคล�กทั้� ห ว็ล�กศรทั้างด้�านั้ล2างจะเป-นั้การเพ� มแถว็ด้�านั้ล2างอ�ก 1 แถว็     ว็+ธี�ที่�� 2 สิ่ามารถคล�กเมนั้�  Table -> Insert -> Row Above เม' อต้�องการเพ� มแถว็ด้�านั้บนั้ หร'อคล�กเมนั้� Table -> Insert -> Row Below เม' อต้�องการเพ� มแถว็ด้�านั้ล2าง

     การเพ+�มเซ้ำลัในึ่ตาราง สิ่ามารถทั้!าได้�ด้ งนั้��     คล�กเมนั้�  Table -> Insert -> Cell Before เม' อต้�องการเพ� มเซึ่ลด้�านั้ซึ่�าย หร'อคล�กเมนั้�  Table ->

Insert -> Cell After เม' อต้�องการเพ� มเซึ่ลด้�านั้ข้ว็า

      การผสานึ่ / รว็มเซ้ำลัในึ่ตาราง สิ่ามารถทั้!าได้�ด้ งนั้��     เล'อกเซึ่ลทั้� ต้�องการ แล�ว็คล�กเมนั้�  Table -> Join with Cell to the Right

     การย้ำกเลั+กการผสานึ่เซ้ำลัในึ่ตาราง สิ่ามารถทั้!าได้�ด้ งนั้��     เล'อกเซึ่ลทั้� ได้�ม�การใชื่�ค!าสิ่ งผสิ่านั้เซึ่ลไปแล�ว็ คล�กเมนั้�  Table -> Split Cell

     การลับคอลั�มนึ่* / แถว็ สิ่ามารถทั้!าได้�ด้ งนั้��     ว็+ธี�ที่�� 1 สิ่ามารถคล�กได้�ทั้�    ทั้� อย�2ระหว็2างห ว็ล�กศรทั้ �งสิ่องด้�านั้     ว็+ธี�ที่�� 2 สิ่ามารถคล�กเมนั้�  Table -> Delete -> Column(s) หร'อ Row(s)

    การลับเฉพาะเนึ่% อหาที่��อย้ำ-�ในึ่เซ้ำลันึ่� นึ่     ให�คล�กเมนั้� Table -> Delete -> Cell Contents

    การลับเซ้ำลั     ให�คล�กเมนั้� Table -> Delete -> Cell(s)

    การลับตาราง     ให�คล�กเมนั้� Table -> Delete -> Table

          top

การปร�บแต�งส�พ% นึ่ข้องตาราง        ในั้การต้กแต้2งต้าราง ผ��ใชื่�สิ่ามารถปร บแต้2งสิ่�พ'�นั้หล งทั้ �งต้าราง หร'อจะเล'อกปร บแต้2งเฉพาะเซึ่ลกได้� ข้ �นั้ต้อนั้ในั้การใสิ่2สิ่�พ'�นั้หล งม�ข้ �นั้ต้อนั้ด้ งนั้��

1. คล�กเมนั้� Table -> Table or Cell Background Color...

2. เล'อกว็2า ต้�องการปร บแต้2งสิ่�พ'�นั้หล งทั้ �งต้าราง (Table) หร'อจะเล'อกปร บแต้2งเฉพาะเซึ่ล (Cell(s))

3. คล�กเล'อกสิ่�ทั้� ต้�องการ หล งจากนั้ �นั้ให�คล�กทั้� ป,>ม

top

        Tip :  ค!าสิ่ งในั้การจ ด้การต้ารางทั้ �งหมด้สิ่ามารถเล'อกใชื่�จากการคล�กเมาสิ่�ข้ว็าได้�อ�กว็�ธี�หนั้* ง                   และหากต้�องการปร บแต้2งต้ารางเพ� มเต้�มให�คล�กเล'อกเมนั้�  Table -> Table  Properties...

 การสิ่ร�างจ,ด้เชื่' อมโยงให�ก บเอกสิ่ารจะทั้!าให�เก�ด้โครงข้2ายเอกสิ่ารคล�ายก บโครงข้2ายข้องใยแมงม,ง ทั้� ม�การเชื่' อมต้2อก นั้อย2างไม2ม�ว็ นั้สิ่��นั้สิ่,ด้  การสิ่ร�างจ,ด้เชื่' อมโยงม� 3 ล กษณะ ด้ งนั้��

การสร�างจ2ดเช้%�อมโย้ำงภาย้ำในึ่เว็�บเพจเด�ย้ำว็ก�นึ่      สิ่ามารถทั้!าได้�ต้ามข้ �นั้ต้อนั้ต้2อไปนั้��     1.  ก!าหนั้ด้ต้!าแหนั้2งทั้� เป-นั้จ,ด้อ�างอ�งในั้หนั้�าเว็บเพจเด้�ยว็ก นั้ (ต้!าแหนั้2งทั้� ต้�องการให�แสิ่ด้งภายหล งจากการคล�กทั้� จ,ด้เชื่' อมโยง) ซึ่* งสิ่ามารถทั้!าได้�โด้ยการคล�กทั้� หนั้�าร�ปภาพหร'อหนั้�าข้�อคว็ามทั้� ต้�องการ

จากนั้ �นั้ให�คล�กทั้� ป,>ม  จะปรากฏิหนั้�าต้2างด้ งร�ป

      2. ให�พ�มพ�ชื่' อจ,ด้อ�างอ�งด้ งกล2าว็ หล งจากนั้ �นั้ให�คล�กทั้� ป,>ม

Tip :  หากหนั้�าข้�อคว็ามหร'อร�ปภาพใด้ทั้� ม�สิ่ ญ่ล กษณ�   แสิ่ด้งว็2าม�การก!าหนั้ด้จ,ด้อ�างอ�งไว็�แล�ว็

 

   3.  เล' อนั้ไปย งต้!าแหนั้2งทั้� ต้�องการสิ่ร�างจ,ด้เชื่' อมโยง ซึ่* งอาจจะเป-นั้ร�ปภาพหร'อ

ข้�อคว็ามกได้� คล�กทั้� ป,>ม  จะปรากฏิหนั้�าต้2าง Link Text ด้ งร�ป

   4.  ให�คล�กทั้�   เพ' อเล'อกชื่' อจ,ด้อ�างอ�งทั้� เคยก!าหนั้ด้ไว็� ซึ่* งในั้ทั้� นั้��ก ค'อ p71 หล งจาก

นั้ �นั้ให�คล�กทั้� ป,>ม 

top

 การสร�างจ2ดเช้%�อมโย้ำงไปย้ำ�งเว็�บเพจอ%�นึ่     สิ่ามารถทั้!าได้�ต้ามข้ �นั้ต้อนั้ต้2อไปนั้��     1.  จ ด้เต้ร�ยมไฟล�ทั้� ต้�องการเชื่' อมโยง คล�กร�ปภาพหร'อข้�อคว็ามทั้� จะเป-นั้จ,ด้เชื่� อมโยง

     2.  คล�กทั้� ป,>ม  จะปรากฏิหนั้�าต้2าง Link

Text ด้ งร�ป

     3.  คล�กทั้� ป,>ม  เพ' อค�นั้หาไฟล�ทั้� ต้�องการ หร'อจะพ�มพ�ชื่' อไฟล�กได้�

     4.  ให�คล�กทั้� ป,>ม  top

การสร�างจ2ดเช้%�อมโย้ำงไปย้ำ�งเว็�บไซ้ำด*อ%�นึ่     สิ่ามารถทั้!าได้�ต้ามข้ �นั้ต้อนั้ต้2อไปนั้��     1. จ ด้เต้ร�ยมชื่' อโด้เมนั้เนั้มข้องเว็บไซึ่ด้�ทั้� ต้�องการเชื่' อมโยง  คล�กร�ปภาพหร'อข้�อคว็ามทั้� จะเป-นั้จ,ด้เชื่� อมโยง

     2.  คล�กทั้� ป,>ม  จะปรากฏิหนั้�าต้2าง Link

Text ด้ งร�ป

     3.  พ�มพ�ชื่' อโด้เมนั้เนั้มข้องเว็บไซึ่ด้�ทั้� ต้�องการ

     4.  ให�คล�กทั้� ป,>ม 

Tip : หากต้�องการเชื่' อมโยงไปย งอ�เมล�กสิ่ามารถทั้!าต้ามข้ �นั้ต้อนั้นั้��ได้�

top

Tip : ในั้สิ่2ว็นั้ข้องการสิ่ร�างจ,ด้เชื่' อมโยงทั้� เป-นั้ข้�อคว็าม ผ��ใชื่�สิ่ามารถปร บแต้2งสิ่�ต้ ว็อ กษรให�ม�ล กษณะแต้กต้2างก นั้ได้� สิ่ามารถศ*กษารายละเอ�ยด้ในั้บทั้ทั้� 4 การจ ด้การข้�อคว็าม ในั้ห ว็ข้�อ การปร บแต้2งสิ่�ข้�อคว็าม

ข้�อแนึ่ะนึ่�าในึ่การสร�างเว็�บเพจ           ในั้การสิ่ร�างเว็บเพจม�องค�ประกอบหลายประการทั้� จะทั้!าให�เว็บเพจนั้ �นั้2าสิ่นั้ใจ ซึ่* งม�ข้�อแนั้ะนั้!าด้ งนั้��           1. เลั%อกกลั2�มเป8าหมาย้ำ ต้�องระบ,ให�ชื่ ด้เจนั้ว็2าเป-นั้คนั้กล,2มใด้ ระด้ บคว็ามร� �เทั้2าใด้ ซึ่* งจะม�คว็ามสิ่ มพ นั้ธี�ก บเนั้'�อหาข้องเว็บเพจ           2. เลั%อกเนึ่% อหาแลัะปร+มาณข้�อม-ลั คว็รเล'อกนั้!าเสิ่นั้อเนั้'�อหาทั้� ด้� นั้2าสิ่นั้ใจและม�การปร บปร,งข้�อม�ลใหม2 ๆ อย�2เสิ่มอ การใสิ่2ข้�อม�ลปร�มาณมากจนั้เก�นั้ไป จะทั้!าให�เว็บเพจด้�หนั้าแนั้2นั้ ไม2ด้*งด้�ด้คว็ามสิ่นั้ใจ           3. ออกแบบโครงสร�างข้องแฟ้8มข้�อม-ลั การก!าหนั้ด้โครงสิ่ร�างข้�อม�ลไว็�เป-นั้หมว็ด้หม�2จะทั้!าให�ด้�แลร กษาเว็บได้�ง2าย เป-นั้ระเบ�ยบ สิ่ามารถต้รว็จสิ่อบคว็ามผ�ด้พลาด้ข้องเว็บเพจได้�ง2าย           4. เว็�บเพจจะต�องแสดงผลัได�ก�บเว็�บบราว็เซ้ำอร*หลัาย้ำช้นึ่+ด  เทั้คนั้�คต้2าง ๆ ทั้� นั้!ามาใชื่�คว็รจะถ�ก

รองร บโด้ยเว็บบราว็เซึ่อร� รว็มทั้ �งการเล'อกใชื่�ร�ปแบบต้ ว็อ กษรภาษาไทั้ย เนั้' องจากบางเว็บบราว็เซึ่อร�ไม2สิ่ามารถแสิ่ด้งผลภาษาไทั้ยได้�           5. คว็ามเร�ว็ในึ่การโหลัดเว็�บเพจ  ถ�าการโหลด้เว็บเพจใชื่�เว็ลานั้านั้ จะทั้!าให�ผ��ชื่มหมด้คว็ามอด้ทั้นั้ทั้� จะรอชื่ม ปFจจ ยทั้� ม�ผลต้2อคว็ามเรว็ในั้การโหลด้เว็บเพจ ได้�แก2 ข้นั้าด้และจ!านั้ว็นั้ข้องร�ปภาพทั้� ใชื่� เทั้คนั้�คใหม2 ๆ

รว็มถ*งปร�มาณข้องต้ ว็อ กษรทั้� อย�2ในั้หนั้�านั้ �นั้           6. คว็ามง�าย้ำในึ่การค�นึ่หาข้�อม-ลั  การย�อนั้กล บไปหนั้�าก2อนั้และหล ง หร'อ การกล บไปจ,ด้เร� มต้�นั้คว็รจะม�อย�2ทั้,กหนั้�า เพ' อให�การทั้2องเว็บสิ่ะด้ว็กและคล2องต้ ว็มากย� งข้*�นั้           7. การเลั%อกใช้�ต�ว็อ�กษร ฉากหลั�ง แลัะส�  การเล'อกใชื่�โทั้นั้สิ่�จะต้�องให�เข้�าก บเนั้'�อหาสิ่าระ ไม2คว็รใชื่�สิ่�ฉ�ด้ฉาด้เป-นั้พ'�นั้หล ง การเล'อกใชื่�ล กษณะและข้นั้าด้ข้องต้ ว็อ กษรกเป-นั้สิ่� งสิ่!าค ญ่ ข้นั้าด้ต้ ว็อ กษรทั้� ใหญ่2หร'อเลกจนั้เก�นั้ไป จะทั้!าให�องค�ประกอบโด้ยรว็มข้องเว็บนั้ �นั้เสิ่�ยไป           8. ข้นึ่าดแลัะช้นึ่+ดข้องร-ปภาพ  ร�ปภาพทั้� นั้�ยมใชื่�ในั้เว็บเพจม กม�สิ่2ว็นั้ข้ยายข้องแฟAมเป-นั้ gif และ jpeg

เพราะม�ข้นั้าด้เลกและสิ่ามารถโหลด้ได้�เรว็           9. ส�ว็นึ่ประกอบเพ+�มเต+ม ได้�แก2 ข้�อม�ลเก� ยว็ก บผ��จ ด้ทั้!า อ�เมล� ว็ นั้เว็ลาทั้� ทั้!าการแก�ไข้เว็บเพจ รว็มถ*งเว็บไซึ่ด้�อ' นั้ ๆ ทั้� นั้2าสิ่ามารถหาข้�อม�ลเพ� มเต้�มได้�           10. ตรว็จสอบเว็�บเพจก�อนึ่นึ่�าเสนึ่อ คว็รต้รว็จสิ่อบก บเว็บบราว็เซึ่อร�ชื่นั้�ด้ต้2าง ๆ และคว็รม�ข้�อคว็ามแจ�งให�ผ��ใชื่�ทั้ราบว็2า เว็บเพจนั้��เหมาะสิ่มก บคว็ามละเอ�ยด้ข้องภาพเทั้2าใด้ 640 x 480 pixels หร'อ 800 x 600 pixels

เป-นั้ต้�นั้