บทที่ 3

บทที่ 3 การจัดและตกแต่งข้อความ

การจัดและตกแต่งข้อความ 
                การใช้ข้อความใน Dreamweaver 8  สามารถเหมือนโปรแกรมที่เกี่ยวกับงานเอกสาร  เช่น  Microsoft Office
 
1.  การปรับเปลี่ยนภาษาการตั้งค่าภาษาไทย 
                การใช้งานภาษาไทยบนเว็บเพจสามารภทำได้ 2 วิธี  คือ  การกำหนดแต่ละเว็บเพจทุกครั้งที่สร้างใหม่  หรือกำหนดภาษาให้เป็นค่าเริ่มต้นของโปรแกรมไปเลย  โดยมีวิธีการดังนี้
การกำหนดภาษาทีละเว็บเพจ
- เลือกคำสั่ง  Modify >> Page Properties  จากแถบเมนู
ใน Category  ให้เลือก  Title/Encoding 
- เลือกภาษาไทยจากช่อง  Encoding >> Thai (Windows)


-คลิกปุ่ม OK  เพื่อจบการตั้งค่าภาษาของเว็บเพจปัจจุบัน


การกำหนดภาษาให้เป็นค่าเริ่มต้นกับทุกเว็บเพจ
- เลือกคำสั่ง  Edit >> Preferences  จากแถบเมนู
ใน  Category  เลือกคำสั่ง  New Document
- เลือกภาษาไทยโดยคลิกปุ่ม  จากช่อง  Default encoding  >>  Thai (Windows)
คลิกปุ่ม  OK 
การเพิ่มแบบอักษร 
                การเพิ่มแบบอักษรเพื่อใช้งาน  ในกรณีที่แบบอักษรที่โปรแกรมกำหนดมาใช้ไม่เพียงพอต่อการใช้งาน  ซึ่งมีขั้นตอนการทำดังนี้
- คลิกที่คำสั่ง  Text >> Font >> Edit Font List …  


- จะได้หน้าต่าง  Edit Font List  


- ดับเบิ้ลคลิกเลือกแบบอักษรที่ต้องการจากช่อง  Available fonts :  แบบอักษร
การเพิ่ม / ลบ  แบบอักษร  ใช้ปุ่ม << และปุ่ม >> เลื่อนหาแบบอักษร
คลิกปุ่ม  OK
2. การพิมพ์ข้อความในเว็บเพจ 
การพิมพ์ข้อความสามารถพิมพ์ลงไปในหน้าเอกสารเหมือนกับพิมพ์ในเวิร์ดปกติ
เมื่อพิมพ์เสร็จก็กด < Enter >  เพื่อขึ้นบรรทัดใหม่

การขึ้นบรรทัดใหม่ 

                การขึ้นบรรทัดใหม่  ใช้วิธีกดแป้น  < Enter >  ซึ่ง  Dreamweaver 8  จะเว้นบรรทัดที่ว่างก่อนและหลังให้ 1 บรรทัด

การขึ้นบรรทัดใหม่ไม่ต้องเว้นที่ว่าง 

                ถ้าต้องการให้การขึ้นบรรทัดใหม่โดยไม่ต้องเว้นที่ว่าง  ให้คลิกหน้าข้อความหรือบรรทัดที่ต้องการจะขึ้นบรรทัดใหม่แล้วกดแป้น  < Shift >  พร้อมกับกด  < Enter >  หรือคลิก  ก็ได้

3.  การเลือกข้อความ

                การเลือกข้อความเป็นการระบายแถบทึบบนข้อความ  เพื่อจัดการกับข้อความนั้น ๆ  เช่น  ลบ  คัดลอก  ย้าย  ฯลฯ  การเลือกข้อความมีหลายลักษณะ  ดังนี้

การเลือกเฉพาะคำหรือข้อความ 

                1.  วางเมาส์หน้าคำหรือข้อความ  คลิกแล้วลากเมาส์ทับบริเวณที่ต้องการ  แล้วปล่อยเมาส์
                2.  บริเวณเมาส์ลากผ่านจะมีแถบสีดำขึ้นมา


การเลือกข้อความขนาดยาว 
                การเลือกข้อความขนาดยาว  ถ้าใช้การลากเมาส์เหมือนวิธีแรกอาจไม่สะดวก
                1.  คลิกเมาส์ตรงตัวอักษรแรกของข้อความที่จะลือก
                2.  กดแป้น  < Shift >  ค้างไว้  พร้อมกับคลิกเมาส์ที่ข้อความสุดท้าย

การเลือกข้อความทั้งเอกสาร 
                1.  คลิกที่ตำแหน่งใดก็ได้บนเว็บเพจ  เลือกคำสั่ง  Edit >> Select All  หรือกดแป้น  < Ctrl > + < A >  หรือคลิกแท็ก  < P >  บนแถบสถานะ (Status Bar)  ข้อความทั้งหมดจะเป็นแถบทึบ
                2.  การยกเลิกการเลือกเอกสารทำได้โดยคลิกพื้นที่ว่างบนเว็บเพจ 


การเปลี่ยนรูปแบบตัวอักษร
 การใช้  Properties Inspector
- คลิกเลือกข้อความ หรือ  คำที่ต้องการจะเปลี่ยนรูปแบบ
- เลือกแบบอักษรที่ช่อง  Font  เช่น MS San Serif
- เลือกขนาดตัวอักษรที่ช่อง  Size
- เลือกสไตล์ที่กำหนดไว้แล้วในช่อง Style




- เลือกสีแบบอักษร



การใช้เมนูคำสั่ง
คลิกเลือกข้อความที่ต้องการจะเปลี่ยนรูปแบบ
- เลือกเมนู  Text
- เลือกคำสั่งย่อย  เช่น  Font  แล้วเลือกแบบอักษรที่ต้องการ  เช่น MS San Serif


- เลือกขนาดตัวอักษร (Size)  สไตล์  (Style)  และสีแบบอักษร  (Color)

การใช้ทูลบาร์
- คลิกที่ปุ่ม  แล้วเลือกกลุ่มเครื่องมือ  Text
จะได้แถบเครื่องมือสำหรับแก้ไขลักษณะอักษร  ดังนี้


การกำหนดตัวอักษรแบบพิเศษเพิ่มเติม  คลิกที่ปุ่มด้านซ้ายสุดของทูลบาร์
ถ้าต้องการเลือกตัวอักษรชนิดพิเศษเพิ่มเติม ให้คลิกที่คำสั่ง  Other Character  จะได้หน้าต่าง  Insert other character


- คลิกเลือกแบบอักษรที่ต้องการ แล้วคลิกปุ่ม  OK

4.  การจัดรูปแบบข้อความ
การจัดตำแหน่งของข้อความ
- คลิกเลือกข้อความที่ต้องการจัดรูปแบบ  
- คลิกเลือกรูปแบบการจัดข้อความ  มีรายละเอียดดังนี้

- สำหรับจัดข้อความชิดซ้าย (Align Left)
- สำหรับจัดข้อความไว้ตรงกลาง (Align Center)
- สำหรับจัดข้อความชิดขวา (Align Right)
- สำหรับให้ข้อความทั้งด้านหน้าและด้านหลังเท่ากัน (Justify) 

5. การจัดระยะเยื้องของย่อหน้า 
                การเยื้องของย่อหน้าเป็นการเว้นระยะห่างของข้อความกับขอบหน้าเว็บเพจเข้าไป  โดยกำหนดได้ทั้งด้านซ้ายและด้านขวาของหน้าเว็บ    ซึ่งมีขั้นตอนดังนี้

1.  คลิกตำแหน่งข้อความที่ต้องการจะเยื้อง

2.  คลิกที่แถบเครื่องมือเยื้องเข้า (Text Indent)  เพื่อเยื้องระยะเข้าไปหนึ่งระยะ  ถ้าต้องการเพิ่มระยะให้คลิกอีกครั้งหนึ่งถ้าต้องการยกเลิกการเยื้องให้คลิกปุ่มเยื้องออก(Text Outdent)


การใช้สัญลักษณ์และตัวเลขแสดงหัวข้อย่อย           
 การใส่สัญลักษณ์   (Bullet)  และตัวเลข (Numbering)  เพื่อแสดงหัวข้อย่อยหรือลำดับข้อความแต่ละบรรทัด  เพื่อให้อ่านได้สะดวกและสวยงาน  มีขั้นตอนดังนี้

• คลิกเลือกข้อควาที่ต้องการจะทำสัญลักษณ์หรือลำดับเลข
• คลิกที่ปุ่ม  เพื่อใช้สัญลักษณ์ ปุ่ม เพื่อใช้ตัวเลข 

• ถ้าใช้ทูลบาร์ให้คลิกที่ปุ่มเพื่อใช้บุลเล็ต  และปุ่มเพื่อใช้ตัวเลข

• ถ้าใช้เมนูคำสั่งให้คลิกที่  Text >> List  แล้วเลือกคำสั่งย่อย

การนำเข้าข้อความจากโปรแกรมอื่น

 การนำเข้าเอกสาร  Word
เลือกคำสั่ง  File >> Import >> Word Document
จะได้หน้าต่าง  Import Word Document
คลิกเลือกไฟล์เวิร์ด  แล้วคลิกปุ่ม  Open
เอกสารเวิร์ดจะถูกนำไปแทรกในเว็บเพจทันที 

 การนำเข้าเอกสาร  Excel

• เลือกคำสั่ง  File >> Import >> Excel Document
• จะได้หน้าต่าง  Import Excel Document

• คลิกเลือกไฟล์เอ็กเซล  แล้วคลิกปุ่ม  Open

เอกสารเอ็กเซลล์จะถูกนำไปแทรกในเว็บเพจทันที

1. การขึ้นบรรทัดใหม่

         การแสดงข้อความในบราวเซอร์จะถูกตัดคำขึ้นบรรทัดใหม่เมื่อข้อความนั้นเลยขอบขวา และบางครั้งคำสั่งที่บราวเซอร์ตัดขึ้นบรรทัดใหม่นั้นอาจดูแล้วไม่ต่อเนื่อง ดังนั้นจึงให้ แท็ก <br>

 ตัวอย่างการใช้งาน

2. การตัดคำขึ้นย่อหน้าใหม่

            เมื่อต้องการจัดข้อความขึ้นบรรทัดใหม่ และเว้นบรรทัดให้อีกหนึ่งบรรทัด  แท็กที่ใช้ควบคุมการทำงานในลักษณะนี้คือ แท็ก <p>                      รูปแบบ   <p> ข้อความที่ต้องการขึ้นย่อหน้าใหม่             ตัวอย่างการใช้งาน ดังนี้

3. การวางตำแหน่งข้อความในย่อหน้า

                   สามารถจัดเรียงข้อความในแต่ละย่อหน้าของเพจได้  โดยการกำหนดตำแหน่งในแอตทริบิวต์ align  <Alignment> ของแท็ก<p>                    รูปแบบ  <p  align="ตำแหน่ง"> ข้อความ </p>

      ตัวอย่างการใช้งาน

4. การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ

          การจัดให้ข้อมูลที่เป็นข้อความ หรือ รูปภาพ ให้อยู่ตำแหน่งตรงกลางจอภาพ โดยใช้แท็ก<center>
          รูปแบบ  <center> ข้อความ </center>
5. การสร้างเส้นคั่น
          ต้องการแบ่งข้อความบนจอภาพ โดยใช้เส้นคั่นทางแนวนอน สามารถกำหนดตำแหน่ง สี ขนาดความหนา ความยาว หรือกำหนดเป็นเส้นทึบได้โดยใช้แท็ก <hr >
            รูปแบบ  <hr >

ตัวอย่างการใช้งาน   ดังนี้

6. การกำหนดรูปแบบอักษร            การกำหนดอักษรตัวหนา            คือ แท็ก <b>              รูปแบบ <b>  ข้อความ </b>              การกำหนดอักษรตัวเอียง            คือ แท็ก <i>               รูปแบบ <i>  ข้อความ  </i>                              
            การกำหนดอักษรตัวขีดเส้นใต้       คือ แท็ก <u>              รูปแบบ <u>  ข้อความ </u>  
            การกำหนดอักษรตัวพิมพ์ดีด        คือ แท็ก <tt>              รูปแบบ <tt>  ข้อความ </tt>  
            การกำหนดอักษรตัวขีดฆ่า           คือ แท็ก <s>                    รูปแบบ <s>  ข้อความ   </s> 

            การกำหนดอักษรตัวยกขึ้น          คือ แท็ก <sup>                 รูปแบบ ^{ข้อความ} 

            การกำหนดอักษรห้อยลง            คือ แท็ก <sub>                 รูปแบบ _{ข้อความ} 

         ตัวอย่างการใช้งาน ดังนี้

7. การกำหนดตัวอักษรเคลื่อนที่
            แท็ก <marquee> เป็นคำสั่งการแสดงข้อความให้มีการเคลื่อนที่ของตัวอักษรโดยปกติทิศทางการเคลื่อนที่จะเคลื่อนจากขวาไปซ้าย
            รูปแบบ  <marquee>ข้อความ</marquee>
  - กำหนดความเร็วในการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ scolldelay
            รูปแบบ  <marquee  scolldelay ="เวลา">ข้อความ / รูปภาพ</marquee>
  - กำหนดทิศทางการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ direction
            รูปแบบ  <marquee  direction ="ทิศทาง">ข้อความ / รูปภาพ</marquee>
           ทิศทางที่สามารถกำหนดให้กับข้อความ / รูปภาพ คือ           up   ข้อความ เลื่อนขึ้น                      down  ข้อความ เลื่อนลง

           left  ข้อความ เลื่อนจากขวามาซ้าย         right    ข้อความ เลื่อนจากซ้ายมาขวา

  - กำหนดรูปแบบการเคลื่อนที่ คำสั่งแอตทริบิวต์การเคลื่อนที่ คือ behavior 
            รูปแบบ  <marquee  behavior ="รูปแบบการเคลื่อนที่">ข้อความ</marquee>       

           การกำหนดรูปแบบการเคลื่อนที่ของข้อความ กำหนดได้ 3 รูปแบบคือ

            scroll  หมายถึง การเคลื่อนที่หายไปจากขอบ แล้วไปปรากฏที่ขอบอีกด้านแล้วทำซ้ำเรื่อยๆ    

           slide   หมายถึง การเคลื่อนที่ไปแล้วหยุดที่ขอบ
           alternate  หมายถึง การเคลื่อนที่ไปกระทบขอบแล้วดึงไปอีกทางกลับไปกลับมา     

  ตัวอย่างการใช้งาน ดังนี้

8. การกำหนดลักษณะของตัวอักษร
            การกำหนดลักษณะของตัวอักษรที่แสดงผลบนเว็บบราวเซอร์ เช่น สีของตัวอักษร รูปแบบของตัวอักษร ขนาดตัวอักษร สามารถกำหนดด้วยคำสั่งแอตทริบิวต์ต่างๆ ที่แท็กเปิดของแท็ก<font>

            - การกำหนดฟอนต์ของตัวอักษร คำสั่งแอตทริบิวต์ คือ face การระบุชื่อของฟอนต์ที่ต้องการเช่น "Ms Sans Serif" , "AngsanaUPC"

                   รูปแบบ  <font face="ชื่อของฟอนต์"  >ข้อความ<font>

              ตัวอย่างการใช้งานดังนี้

- การกำหนดสีของตัวอักษร  การกำหนดสีตัวอักษรเพื่อทำให้เอกสารเว็บเพจสวยงาม น่าสนใจมากยิ่งขึ้นโดยใช้คำสั่งแอตทริบิวต์ คือ color

            รูปแบบ  <font color="ชื่อสี หรือ รหัสสี">ข้อความ</font>           ตัวอย่างชื่อสี

ตัวอย่างการใช้งาน  ดังนี้  

- การกำหนดขนาดของตัวอักษร การกำหนดขนาดตัวอักษรภายในเอกสารเว็บเพจด้วยการกำหนดแอตทริบิวต์ size

                        รูปแบบ  <font size="ตัวเลข(1ถึง7)"  >ข้อความ</font>
                        การกำหนดขนาดของตัวเลขในเว็บเพจนั้น กำหนดขนาดของตัวอักษรได้2 รูปแบบคือ

            1. การระบุตัวเลข โดยจะมีค่าตั้งแต่ง 1 – 7 ซึ่งขนาดมาตรฐานจะมีค่าอยู่ที่ 3 โดยค่าตัวเลข 1 และ2 จะเป็นการย่อขนาดของตัวอักษร ส่วนค่า4-7 จะเป็นการขยายขนาดตัวอักษร
           2. การระบุเครื่องหมายบวกและเครื่องหมายลบ แล้วตามด้วยตัวเลขขนาดของตัวอักษรที่ต้องการเปลี่ยนขนาด ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน-2 กาขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งไม่เกิน +4

ตัวอย่างการใช้งาน การระบุตัวเลข

ตัวอย่างการใช้งาน การระบุเครื่องหมายบวกและเครื่องหมายลบ

9. การเว้นช่องว่างในเอกสารเว็บเพจ(การเว้นวรรค)

           การพิมพ์ข้อมูลในเอกสาร HTML การเว้นช่องว่างไว้มากขนาดไหนก็ตามเมื่อทดสอบผลลัพธ์บนเว็บบราวเซอร์ ได้เป็นช่องว่า 1 อักขระ ถ้าต้องการเว้นช่องว่างความต้องการใช้แท็ก&nbsp

           รูปแบบ ข้อความ &nbsp ข้อความ (แทนการเว้นช่องว่าง1 อักขระ)