ebook4

หน่วยท่ี 4.การแทรกและจดั รปู แบบขอ้ ความ

หนว่ ยท่ี 4. การแทรกและจดั รูปแบบข้อความ 4.1 การสรา้ งข้อความใหม่1.เรม่ิ ต้นดว้ ยการสรา้ งหน้าเว็บเพจ การสร้างเอกสารใหม่ของ dreamweaver น้นั ทาไดง้ า่ ยมากเมอ่ื เปดิโปรแกรมขน้ึ มาจะเหน็ ว่ามหี นา้ จอดงั ภาพ เราสร้างเอกสารไดจ้ ากหนา้ จอนีด้ งั รูป รูปท่ี 4.1 แสดงหนา้ Adobe Dreamweaver (ทม่ี า : นางวาสนา สุขใจ ,2559)2. คลกิ ไปท่ี php รปู ท่ี 4.2 แสดงหนา้ Adobe Dreamweaver การเขา้ หนา้ php (ทีม่ า : นางวาสนา สุขใจ ,2559)

3. เจอหนา้ เอกสารเปลา่ รปู ที่ 4.3 หน้าเอกสารเปลา่ ใน Adobe Dreamweaver (ทม่ี า : นางวาสนา สขุ ใจ ,2559) 4.2 การขนึ้ บรรทดั ใหม่และจัดระยะข้อความการจัดตาแหน่งของขอ้ ความ  คลกิ เลอื กขอ้ ความท่ตี อ้ งการจดั รปู แบบ  คลิกเลือกรปู แบบการจัดข้อความ มรี ายละเอยี ดดังน้ี  สาหรับจดั ข้อความชดิ ซ้าย (Align Left)  สาหรับจดั ขอ้ ความไว้ตรงกลาง (Align Center)  สาหรบั จดั ข้อความชิดขวา (Align Right)  สาหรับให้ขอ้ ความทงั้ ดา้ นหน้าและด้านหลังเท่ากนั (Justify)5. การจัดระยะเยอ้ื งของยอ่ หน้า การเยอื้ งของยอ่ หน้าเป็นการเว้นระยะหา่ งของขอ้ ความกบั ขอบหน้าเว็บเพจเขา้ ไป โดยกาหนดได้ท้งั ดา้ นซ้ายและดา้ นขวาของหนา้ เว็บ ซึง่ มขี นั้ ตอนดังน้ี 1. คลิกตาแหนง่ ข้อความทตี่ อ้ งการจะเยื้อง 2. คลกิ ท่แี ถบเคร่อื งมอื เยอ้ื งเข้า (Text Indent) เพื่อเยอื้ งระยะเข้าไปหนงึ่ ระยะ ถา้ตอ้ งการเพมิ่ ระยะให้คลิกอีกครง้ั หนงึ่ o ถา้ ต้องการยกเลกิ การเย้ืองให้คลกิ ป่มุ เยอื้ งออก (Text Outden1. เริ่มต้นใสเ่ นอ้ื หาให้เว็บเพจ การใส่เน้ือหาน้ันทาได้ง่ายมาก แค่เราคลกิ ท่ี Document window ก็สามารถพิมพเ์ นื้อหาลงไปได้เลย ดงัตัวอยา่ งพมิ พข์ อ้ ความว่า การแทรกและจดั รปู แบบข้อความ เพื่อเป็นหัวข้อของเวบ็ เพจอนั น้ี

รปู ท่ี 4.4 การพมิ พ์ขอ้ ความใน Adobe Dreamweaver (ท่ีมา : นางวาสนา สุขใจ ,2559)4.3 การจัดรปู แบบขอ้ ความตารางการจดั รปู แบบขอ้ ความท่ี 2 วธิ ี ดังน้ีแบบที่ 1 HTML รูปแบบสไตล์ css รูปแบบการยอ่ หน้าและหวั เรอ่ื ง รูปแบบการย่อ หน้าและหวั เรอ่ื ง การสรา้ งลสิ ต์ การเยือ้ งย่อหน้าเซลลข์ ้อความ รูปที่ 4.5 การจัดข้อความแบบ HTML (ทมี่ า : นางวาสนา สุขใจ ,2559)

แบบท่ี 2 CSS ฟอร์นตวั อกั ษร ตาแหนง่ ขอ้ ความ การเลอื กสไตล์ cssขนาดตัวอกั ษร สีตวั อักษร รปู ท่ี 4.6 การจัดขอ้ ความแบบ CSS (ท่ีมา : นางวาสนา สุขใจ ,2559) 4.4 การเลือกใช้ฟอร์นและปรับขนาดฟอร์นเมอื่ ชเ้ี มาส์เว็บไซต์ การสร้างเว็บไซตส์ งิ่ ที่ต้องคานึงถึงคือการใช้ฟอนต์มาตราฐานเทา่ น้ัน เนือ่ งจากในเคร่อื งของผู้เข้าชมเว็บไซต์อาจจะไมม่ ีฟอนตช์ นิดที่เราติดตั้ง เมอ่ื ขอ้ ความในเว็บไซตป์ รากฏบนบราวเ์ ซอร์ กจ็ ะทาการดึงฟอนตอ์ ื่นมาแทน ส่วนฟอนตท์ ี่นยิ มใช้กันเป็นสว่ นใหญค่ ือ MS Sans Serif และ Tahoma เน่อื งจากอ่านง่ายและแสดงผลได้บนบราวเ์ ซอร์ทกุ ชนิด ซึ่งวิธีการเลอื กฟอนตใ์ ห้กับขอ้ ความทาไดด้ ังน้ี1. การขึน้ บรรทดั ใหมแ่ ละจัดระยะข้อความ รูปที่ 4.7 การขนึ้ บรรทัดใหม่และจัดระยะขอ้ ความ (ทม่ี า : นางวาสนา สขุ ใจ ,2559)

2. การขน้ึ บรรทดั ใหม่ จะใช้คาส่ัง <br>จะกด Enter บนคยี บ์ อร์ด3. การจัดระยะข้อความ รูปท่ี 4.8 การขน้ึ บรรทัดใหมแ่ ละจัดระยะขอ้ ความ (ทม่ี า : นางวาสนา สขุ ใจ ,2559)4. คลกิ คลุมดาท่ีต้องการจดั ระยะข้อความ แล้วคลิกขวา เลอื ก Align แล้วเลือก center การจัดขอ้ ความให้อยตู่ รงกลาง  LEFT คอื จัดไปทางซ้าย  RIGHT จัดข้อความไปทาง ขวา  Justifyการจดั ขอ้ ความใหช้ ดิ ทงั้ สองดา้ นการจัดรูปแบบขอ้ ความ1. การกาหนดแบบตัวหนา (Bold) คลกิ คลมุ ดา แล้วคลกิ ตวั B รปู ที่ 4.9 การกาหนดแบบตวั หนา (Bold) (ทีม่ า : นางวาสนา สขุ ใจ ,2559)

2 . การกาหนดแบบตัวเอียง (Italic) คลกิ คลมุ ดา แลว้ เลอื ก ตัวIการเลอื กใชฟ้ อนต์และปรบั ขนาดฟอนต์1. เปิดหนา้ กระดาษเปล่าข้ึนมาโดย กด New หรือ Ctrl+N รปู ที่ 4.10 เปิดหน้ากระดาษเปลา่ (ทม่ี า : นางวาสนา สขุ ใจ ,2559)2. กด Ctrl+j หรือ เลือก Modify > Page Properties รปู ที่ 4.11 เปิดหนา้ กระดาษเปล่าโดยการเปลี่ยนฟอนต์ (ทีม่ า : นางวาสนา สุขใจ ,2559)

3. หน้าจะปรากฏขนึ้ โดยใหเ้ ราเลอื กฟอรน์ และมฟี อรน์ ใหเ้ ลอื กหลายแบบ กรอบ สแี ดงคอื การ เลอื กฟอร์นตามทเ่ี ราตอ้ งการ กรอบ สีมว่ ง คอื ปรบั ขนาดฟอร์นทเ่ี ราตอ้ งการ กรอบ สนี า้ เงิน คอื เลอื กสขี องตวั อักษรตามทเ่ี ราตอ้ งการ กรอบ สีเทา คือ เลอื กสขี องพ้ืนหลังตัวอักษรตามที่เราต้องการ แลว้ กด ok รปู ที่ 4.12 การปรบั แตง่ ฟอนตแ์ ละสีตวั อักษร (ทีม่ า : นางวาสนา สุขใจ ,2559)4. หน้าจอจะข้นึ ตามท่เี รากาหนดแบบฟอนตแ์ ละขนาดของตัวฟอนต์ รูปที่ 4.13 หนา้ ต่างฟอนต์ทมี่ ีการปรบั แต่งแลว้ (ทมี่ า : นางวาสนา สุขใจ ,2559)

5. การจัดรปู แบบข้อความ จัดฟอนตใ์ ห้อยู่ข้างบนสดุ จดั ฟอนตใ์ หอ้ ยู่ข้างก่งึ กลาง จัดฟอนต์ให้อยู่ข้างล่างสุด TopBase Line MiddleBottom Text Top Absolute Middle Left RightAbsolute Bottom6. กดตามทเี่ ราต้องการท่ีจะจดั ตาแหนง่ ของฟอร์น รปู ที่ 4.14 หนา้ ต่างปรับแตง่ ฟอนต์ (ทีม่ า : นางวาสนา สขุ ใจ ,2559)

7. อกี หนึ่งวธี ีในการขยบั ยา้ ยตวั ฟอรน์ ไปอยทู่ ก่ี ่งึ กลาง รูปที่ 4.15 วิธที ี่ 1 การขยับย้ายตวั ฟอนต์ (ที่มา : นางวาสนา สขุ ใจ ,2559)8. หรือเลอื กจากในเฟรมด้านลา่ งได้ รูปที่ 4.16 วธิ ีที่ 2 การขยบั ยา้ ยตวั ฟอนต์ (ที่มา : นางวาสนา สุขใจ ,2559)