ใบความรู้ที่ 4.1
เรื่องการจัดและตกแต่งข้อความ

การจัดและตกแต่งข้อความ
        การพิมพ์ข้อความบนเว็บเพจด้วยโปรแกรม Dreamweaver 8 สามารถจัดการได้หลายวิธี เช่น
        1.   พิมพ์ข้อความลงบนพื้นที่ออกแบบเว็บเพจ (Stage)
        2.   พิมพ์ข้อความโดยโปรแกรม Word processing เช่น MS Word , Notepad แล้วคัดลอกข้อความมาใส่ในเว็บเพจ
        3.   พิมพ์ข้อความเป็นเอกสาร โดยใช้ภาษา HTML

        รายละเอียดเกี่ยวกับเครื่องมือการจัดการและตกแต่งข้อความ (Properties)

        ภาพที่ 4.1  เครื่องมือการจัดการและตกแต่งข้อความ (Properties)

       

         ภาพที่ 4.2  หมายเลขเครื่องมือการจัดการและตกแต่งข้อความ (Properties)
 

ภาพที่ 4.3  หมายเลขเครื่องมือการจัดการและตกแต่งข้อความ1 (Properties)

        การเริ่มใส่ในเว็บเพจใหม่
             เมื่อสร้างเว็บเพจหน้าใหม่เสร็จเรียบร้อยแล้ว ให้นำเมาไปคลิกหรือวางเคอร์เซอรในตำแหน่งที่ต้องการจากนั้นพิมพ์ข้อความได้เลย

        ภาพที่ 4.4  พิมพ์ข้อความในเว็บเพจใหม่      
การขึ้นย่อหน้าใหม่ 
              การขึ้นบรรทัดใหม่ในย่อหน้า มี 2 วิธี 
             1.    กดปุ่ม Enter โดยโปรแกรมจะแทรกบรรทัดว่างก่อนและหลังข้อความ ทำให้เกิดระยะห่างระหว่างบรรทัดมาก จึงเหมาะสำหรับทำหัวข้อหลัก 
             2.    กดปุ่ม Shift+Enter หรือ กดปุ่ม  ในกลุ่มเครื่องมือ Characters วิธีนี้เหมาะสำหรับขึ้นบรรทัดใหม่ แบบเนื้อหาติดกัน
        การจัดรูปแบบของข้อความ
             ข้อความที่แสดงบนเว็บเพจสามารถจัดรูปแบบของข้อความเช่น ฟอนต์ ตัวอักษร ขนาด สี ลักษณะตัวอักษรหนา เอียง รวมไปถึงตำแหน่งของข้อความได้จาก Properties Inspector ดังรายละเอียดต่อไปนี้

      
    ภาพที่ 4.5  การจัดรูปแบบของข้อความ

การจัดรูปแบบของย่อหน้า (Format)



ภาพที่ 4.6  การจัดรูปแบบของย่อหน้า (Format)

None ไม่ใช้รูปแบบของย่อหน้า
Paragraph รูปแบบของข้อความทั่วไป
Heading 1-6 รูปแบบของหัวเรื่อง ในระดับต่าง ๆ
Preformatted ใช้กับข้อความที่มีการจัดรูปแบบไว้แล้วและไม่ต้องการให้บราวเซอร์ปรบตำแหน่งใด ๆ อีก
        การเพิ่มชุดฟอนต์ตัวอักษร
        รูปแบบตัวอักษรที่ใช้ในเว็บเพจ ถ้าไม่ได้ตั้งค่าไว้ การแสดงผลของเว็บเพจบนบราวเซอร์จะขึ้นอยู่กับการตั้งค่าดีฟอลต์ของผู้ชมบราวเซอร์ ซึ่งอาจไม่สวยงาม ดังนั้นจึงควรตั้งค่าให้เรียบร้อยเสมอซึ่งการแทรกข้อความลงบนเว็บเพจ คุณสามารถเลือกฟอนต์จากที่โปรแกรมมีให้ หรือเพิ่มชุดของตัวอักษรได้โดยมีวิธีการดังต่อไปนี้
        1.   คลุมดำที่ข้อความที่ต้องการเปลี่ยนรูปแบบตัวอักษร จากนั้นคลิกเลือก Font 
        2.   คลิกเลือก Edit Font List… คือเลือกรูปแบบเพิ่มเติม


       
        ภาพที่ 4.7  การเพิ่มชุดฟอนต์ตัวอักษร
        3.   คลิกเลือก Font ในช่อง Available fonts: ในที่นี้จะเป็น รูปแบบอักษรมาตรฐาน คือ   MS Sans Serif หรือ ชื่อเตือ Microsoft Sans Serif 
        4.   คลิกเพิ่ม Font จากนั้นจะได้ Font ที่ต้องการในช่อง Chosen Fonts: และคลิก OK เพื่อยืนยันการปรับเปลี่ยนรูปแบบอักษร และสามารถปรับคุณสมบัติตามต้องการ
 

        ภาพที่ 4.8  คลิกเพิ่ม Font
        การกำหนดตัวอักษร
              ในการกำหนดขนาดของตัวอักษร ทำได้โดยเลือกข้อความที่ต้องการปรับขนาดแล้วเลือก หรือพิมพ์ ขนาดตัวอักษรที่ต้องการลงไป และเลือกหน่วยของขนาดตัวอักษร มีวิธีการดังนี้
        1.   เลือกข้อความที่ต้องการเพิ่มขนาดตัวอักษร

        ภาพที่ 4.9  การกำหนดขนาดของตัวอักษร
        2.   เลือกขนาดที่ช่อง Size ตามต้องการ
        3.   เลือกหน่วยวัด
        4.   จะได้ผลลัพธ์ดังนี้

 

        ภาพที่ 4.10  เลือกขนาดที่ช่อง Size ตามต้องการ

 

            ภาพที่ 4.11  ผลลัพธ์เลือกขนาดที่ช่อง Size ตามต้องการ
        การกำหนดสีตัวอักษร
              การกำหนดสีตัวอักษรมีวิธีการทำดังนี้
 

       ภาพที่ 4.12  การกำหนดสีตัวอักษร
        1.   เลือกข้อความที่ต้องการกำหนดสีข้อความ
        2.   คลิกที่ช่อง   จะปรากฏหน้าต่างสีขึ้นมา
        3.   คลิกเลือกสีตามต้องการ หรือหากต้องการสีอื่น ๆ นอกเหนือจากนี้ให้คลิก  
แล้วเลือกสีที่ต้องการ
        4.   เราสามารถกำหนดสีของตัวอักษร สีพื้นหลัง หรือแม้กระทั่งออบเจ็กต์ต่าง ๆ ใน Dreamweaver จากช่อง   โดยตรง หรือใช้วิธีดังต่อไปนี้ พิมพ์ #รหัสของสี ลงไปในกรอบด้านข้างปุ่มเลือกสี   เช่น #3366FF  พิมพ์ชื่อสีลงในกรอบโดยไม่ต้องมีเครื่องหมาย # เช่น red ,yellow ,green, เป็นต้น

        การจัดระยะเยื้องของย่อหน้า
        การเยื้องของย่อหน้าเป็นการเว้นระยะห่างของข้อความกับขอบหน้าเว็บเพจเข้าไป โดยกำหนดได้ทั้งด้านซ้ายและด้านขวาของหน้าเว็บ ซึ่งมีขั้นตอนดังนี้
             1.    คลิกตำแหน่งข้อความที่ต้องการจะเยื้อง
        2.  คลิกที่แถบเครื่องมือเยื้องเข้า   (Text Indent) เพื่อเยื้องระยะเข้าไปหนึ่งระยะ ถ้าต้องการเพิ่มระยะให้คลิกอีกครั้งหนึ่ง
        3.  ถ้าต้องการยกเลิกการเยื้องให้คลิกปุ่มเยื้องออก   (Text Outdent)
การใช้สัญลักษณ์และตัวเลขแสดงหัวข้อย่อย
        การใส่สัญลักษณ์ (Bullet)  และตัวเลข (Numbering)  เพื่อแสดงหัวข้อย่อยหรือลำดับข้อความแต่ละบรรทัด  เพื่อให้อ่านได้สะดวกและสวยงาน  มีขั้นตอนดังนี้
        1.   คลิกเลือกข้อความที่ต้องการจะทำสัญลักษณ์หรือลำดับเลข
        2.   คลิกที่ปุ่ม    เพื่อใช้สัญลักษณ์  ปุ่ม   เพื่อใช้ตัวเลข
        3.   ถ้าใช้ทูลบาร์ให้คลิกที่ปุ่ม   เพื่อใช้บุลเล็ต  และปุ่ม   เพื่อใช้ตัวเลข
        4.   ถ้าใช้เมนูคำสั่งให้คลิกที่  Text >> List  แล้วเลือกคำสั่งย่อย
        5.   การนำเข้าข้อความจากโปรแกรมอื่น
การนำเข้าเอกสาร Word
       1.    เลือกคำสั่ง  File >> Import >> Word Document
       2.   จะได้หน้าต่าง  Import Word Document
       3.    คลิกเลือกไฟล์เวิร์ด  แล้วคลิกปุ่ม  Openเอกสารเวิร์ดจะถูกนำไปแทรกในเว็บเพจทันที
การนำเข้าเอกสาร  Excel
        1.   เลือกคำสั่ง  File >> Import >> Excel Document
        2.   จะได้หน้าต่าง  Import Excel Document
        3.   คลิกเลือกไฟล์เอ็กเซล แล้วคลิกปุ่ม  Open
        4.   เอกสารเอ็กเซลล์จะถูกนำไปแทรกในเว็บเพจทันที

  เข้าสู่บทเรียนต่อไปคลิก