ใบเนื้อหา3

วชิ า การสรา้ งเว็บไซต์ รหัสวิชา 2204-2009 หนว่ ยท่ี 3 การจัดตกแตง่ ข้อความ ครผู ูส้ อน ศริ ินภา บตุ ะเขยี ว แผนกวชิ าคอมพวิ เตอร์ธรุ กิจวทิ ยาลัยเทคนคิ กาญจนาภิเษก สมทุ รปราการ

ใบเนือ้ หา หนว่ ยที่ 3 การจัดตกแต่งข้อความเนอื้ หาสาระการสอน/การเรยี นรู้• ดา้ นความรู้(ทฤษฎ)ี 1. การสร้างข้อความ คอื การพิมพ์ข้อความหรือบทความทต่ี ้องการลงไปในหน้าเว็บเพจท่ีเราสร้างข้นึ ดังตวั อยา่ งต่อไปน้ี 1. คลกิ เคอรเ์ ซอรต์ รงตาแหน่งท่ตี ้องการพมิ พข์ ้อความหรือบทความ 2. พิมพ์ขอ้ ความลงตรงตาแหน่งท่ีตอ้ งการพิมพ์

2. การคัดลอกขอ้ ความ การคัดลอกข้อความบนหน้าเวบ็ เพจสามารถทาได้ดังต่อไปนี้ 1. เลือกข้อความทีต่ ้องการคดั ลอก 2. คลกิ ขวา > เลอื ก Copy 3. เลือกตาแหนง่ ทต่ี ้องการนาข้อความไปจัดวาง 4. คลกิ ขวา > เลอื ก Paste 5. ข้อความจะนาไปจัดวางตรงตาแหนง่ ที่กาหนด

3. การข้นึ บรรทัดใหม่ในย่อหนา้ เดมิการพมิ พ์ข้อความในบางครง้ั อาจใชพ้ ้ืนที่เตม็ บรรทดั หากต้องการขน้ึ บรรทัดใหมเ่ ราสามารถกดแป้นEnter ไดท้ นั ที แตร่ ะยะหา่ งระหว่างบรรทัดจะมากกว่าปกติซึ่งทาให้ขอ้ ความทแี่ สดงออกมาดูไมส่ วยงามซ่ึงมีวธิ ีเครื่องมือดงั ตอ่ ไปนท้ี ชี่ ่วยทาใหก้ ารจัดวางระยะห่างระหว่างบรรทดั ดสู วยงามข้นึ1. วางเคอรเ์ ซอร์ตรงตาแหนง่ ท่ีจะขึ้นบรรทัดใหม่2. คลกิ แท็บ Text ใน Insert Bar3. เลือกคาสงั่ เพื่อขน้ึ บรรทดั ใหม่4. พิมพ์ข้อความท่ีต้องการ 4. การเวน้ ระหวา่ งขอ้ ความ โปรแกรม Dreamweaver CS5 ไม่สามารถเวน้ วรรคระหว่างข้อความไดห้ ลายตวั อักษรแตม่ เี ครอ่ื งมือที่สามารถเว้นตัวอกั ษรได้หลายตวั อักษร ดงั นี้ 1. วางเคอร์เซอร์ตรงตาแหน่งท่ตี ้องการเว้นวรรค 2. คลกิ แท็บText บน Insert Bar 3. คลกิ เลอื กคาสงั่ Characters 4. คลกิ คาส่งั Non-Breaking Space ตามจานวนเว้นวรรคทต่ี ้องการ 5. พมิ พ์ข้อความท่ีต้องการ

5. การจดั รปู แบบข้อความ การจัดรปู แบบข้อความสามารถทาได้ 2 วธิ ี ดงั นี้ 1. สไตล์ HTML2. สไตล์ CSS6. การเลอื กฟอนตใ์ หก้ ับข้อความต้องเป็นฟอนต์มาตรฐานเท่านั้น เนื่องจากในเครื่องของผู้เข้าชมเว็บไซต์อาจจะไม่มีฟอนต์ชนิดน้ัน ๆ เมื่อข้อความในเว็บเพจปรากฏบนบราวเซอร์ บราวเซอร์ก็จะดึงฟอนต์อ่ืนที่มีอยู่ในเครื่องมาแสดงแทน ส่วนฟอนต์ที่นยิ มใชก้ ันสว่ นใหญเ่ ป็นฟอนต์ MS Sans Serif และ Tahoma เน่ืองจากอ่าน และแสดงผลได้บน เบราเซอรท์ กุ ชนดิ ซ่ึงวิธีการเลอื กฟอนต์ใหก้ บั ข้อความ ทาไดด้ งั น้ี1. เลือกข้อความทีจ่ ะกาหนดชดุ ฟอนต์

2. คลิกเลือกการจัดรูปแบบข้อความสไตล์ CSS 3. เลือกชุดฟอนต์ที่ตอ้ งการใช้ท่ีช่อง Font ในหน้าต่าง Properties Inspector สไตล์ CSS7. เพมิ่ ชุดฟอนต์ท่ใี ช้กับข้อความ 1. คลิกรายการ Edit Font List… ที่ชอ่ ง Font ในหนา้ ต่าง Properties Inspector สไตล์ CSS 2. คลิกปมุ่ OK จากน้นั ฟอนต์ท่เี ลอื กจะถูกเพ่ิมไว้ในรายการชุดฟอนต์ Available fonts 3. คลิกปมุ่ เพ่ือเพิ่มฟอนต์ไว้ในรายการชดุ ฟอนตท์ ีจ่ ะสรา้ ง 4. คลกิ ปุ่ม OK จากน้ันฟอนตท์ ่ีเลือกจะถูกเพมิ่ ไว้ในรายการชุดฟอนต์

8. ปรับเปลีย่ นขนาดฟอนต์ 1. เลอื กข้อความทตี่ ้องการเปล่ยี นขนาด 2. เลอื กขนาดตัวอักษรหรอื พมิ พ์คา่ ลงไปในช่อง Size บนหนา้ ตา่ ง Properties Inspector ในการจัดรูปแบบข้อความสไตล์ CSS หลังจากคลิกเลือกขนาดฟอนต์ จะปรากฏหน้าต่าง New CSS Rule เพ่ือกาหนดคุณสมบัติเบ้ืองต้นของCSS 3. กาหนดชอื่ เรียกของสไตล์ซ่ึงควรตงั้ ชอื่ เรยี กให้สอดคล้องกับสิ่งทใี่ หส้ ไตลไ์ ปกาหนดในทีน่ ี้ใชช้ อ่ื left 4. คลกิ ปมุ่ OK ข้อความท่เี ลอื กจะเปล่ียนเป็นขนาดฟอนตต์ ามที่ไดก้ าหนดในสไตล์ left

9. การเปลี่ยนสีฟอนต์ เราสามารถกาหนดใหแ้ ต่ละข้อความในหน้าเว็บเพจใช้สีแตกต่างกนั เพื่อเน้นข้อความนั้นให้โดดเดน่ ได้ดงั น้ี 1. เลือกข้อความที่จะเปล่ียนสีฟอนต์ 2. คลิก บนหน้าต่าง Properties Inspector สไตล์ CSS 3. คลิกเลือกสีจากตารางสี 10. การกาหนดลักษณะตวั อักษร การกาหนดลักษณะตวั อักษร ไมว่ ่าจะเป็นตวั หนา ตวั เอียง และลกั ษณะอนื่ ๆ สามารถทาได้ดังน้ี 1. เลือกข้อความทีจ่ ะกาหนดลักษณะตวั อักษร 2. คลิกเลือกลักษณะตวั อักษรบนหนา้ ตา่ ง Properties Inspector สไตล์ CSS 3. คลิกเลอื กลักษณะตวั อักษร 11. การเนน้ หัวข้อใหโ้ ดดเด่น สาหรบั ขอ้ ความส่วนทีเ่ ป็นหัวข้อหลกั หรือหวั ข้อย่อย เราสามารถทาใหเ้ กดิ ความโดดเดน่ ได้ดงั น้ี 1. เลอื กหวั ข้อหรือข้อความทจี่ ะเน้น 2. คลกิ เลอื กรปู แบบที่ช่อง Format บนหน้าตา่ ง Properties Inspector สไตล์ HTML โดยรูปแบบหวั ข้อทโี่ ปรแกรมมีให้เลือกน้ันจะเรยี งลาดบั จากขนาดใหญไ่ ปเลก็ จากนั้นขอ้ ความ

ทีเ่ ลอื กกจ็ ะเปลีย่ นไปตามขนาดทก่ี าหนด 12. วิธีการจัดรูปแบบข้อความ ในการจัดรูปแบบข้อความที่อยู่ในเว็บเพจให้อยู่ชิดซ้าย ก่ึงกลาง หรือ ชิดขวาได้ เพ่ือให้ผู้ชมอ่านข้อความนัน้ งา่ ยข้ึน ซง่ึ ทาไดห้ ลายวธิ ดี ังน้ี คาส่ัง Align 1. ครอบคลุมข้อความที่ตอ้ งการจัดรูปแบบ 2. คลิกขวา > เลือกคาสงั่ Align > เลือกการจัดรูปแบบที่ต้องการ 13. การกาหนดสไตล์ CSS 1. เลือกข้อความทตี่ ้องการจดั รปู แบบ 2. คลิกเลือกรูปแบบการจัดข้อความบนหน้าต่าง Properties Inspector สไตล์ CSS จัดใหข้ ้อความชดิ ซ้าย จัดให้ขอ้ ความอยูก่ ง่ึ กลาง จัดใหข้ ้อความชิดขวา จัดให้ข้อความชิดดา้ นซ้ายและดา้ นขวา

จากนนั้ จะปรากฏหน้าต่าง New CSS Rule ขน้ึ มา ให้กาหนดคุณสมบตั เิ บ้ืองตน้ ของCSS 3. กาหนดชอ่ื เรียกของสไตลน์ ้นั ในทีน่ ้ีใช้ชื่อ textright 4. คลิกปมุ่ OK หลังจากน้นั ข้อความที่เลือกจะจัดรูปแบบที่เรากาหนด และ ช่ือเรียกของสไตล์ก็จะแสดงในหน้าตา่ งพาเนล CSS STYLES