การแทรกข้อความลงในเวบ็ เพจนัน้ มีวิธีการรปู แบบเดียวกบั โปรแกรมสาหรบั สร้างเอกสารคือ สามารถใช้การเลือกบริเวณที่ต้องการพิมพ์ ข้อความ และพิมพล์ งไปในส่วนนัน้ ได้ทนั ที เพียงแต่จะมีรายละเอียดเก่ียวกบั การจดั รปู แบบตวั อกั ษรท่ีแตกต่างเลก็ น้อย ดงั นี้ การเว้นช่องไฟ การเว้นช่องไฟให้ข้อความในโปรแกรม Dreamweaver สามารถทา ได้โดยกดป่ มุ Spacebar ตามปกติ แต่การเว้นช่องไฟโดย Spacebar นัน้ จะ สามารถใช้เว้นได้ 1 ครงั้ หรอื 1 ช่องเท่านัน้ 2
ในกรณีท่ีต้องการเว้นช่องไฟมากกว่า 1 ช่องสามารถทาได้โดยมี 3 วิธี ดงั นี้ 1. ใช้คียล์ ดั กด Shift + Ctrl + Spacebar บนคียบ์ อรด์ ตามจานวนช่องไฟท่ีต้องการ 2. ใช้พาเนล Insert 2.1 เลือกชดุ คาสงั่ บนพาเนล Insert เป็นแบบ Text 3
2.2 เลือกที่ป่ มุ จากนัน้ เลือก Character : Non-Breaking Space 2.3 ทาซา้ ตามขนั้ ตอนที่ 2.1-2.2 จนได้ช่องว่างที่ต้องการ 4
3. แทรก Tag ใน Code View 3.1 เปล่ียนเป็นมมุ มอง Code หรือ Split 3.2 พิมพ์ Tag คาสงั่ แทรกลงไประหว่างข้อความท่ีต้องการ เว้นช่องไฟ โดย 1 Tag จะเท่ากบั เว้นช่องไฟ 1 ช่อง เช่น เท่ากบั เว้นช่องไฟ 3 ช่อง 5
เมื่อทาตามวิธีใดวิธีหนึ่งข้างต้นแล้ว จะได้ช่องไฟตามที่ต้องการ อย่างไรกต็ าม ไม่ควรใช้ช่องไฟหลายช่องในการขึน้ ย่อหน้าใหม่ เนื่องจากจะ ทาให้แสดงผลบนเบราวเ์ ซอรผ์ ิดเพีย้ นได้ 6
ขึน้ บรรทดั ใหม่ในย่อหน้าเดิม การตดั คาขึน้ บรรทดั ใหม่ใน Dreamweaver นัน้ สามารถทาได้ ด้วยกนั 2 วิธี 1. ใช้คียล์ ดั กดป่ มุ Shift + Enter หน้าข้อความท่ีต้องการขึน้ บรรทดั ใหม่ในมมุ มอง Design 2. แทรก Tag ใน Code View 2.1 เปล่ียนเป็น Code View หรอื Split View 2.2 พิมพ์ Tag คาสงั่ <br/> หน้าข้อความท่ีต้องการขึน้ บรรทดั ใหม่ 7
8
การขึน้ ย่อหน้าใหม่ การขึน้ ย่อหน้าใหม่ใน Dreamweaver นัน้ มีหลกั การเหมือนกบั โปรแกรมสร้างเอกสารอื่นๆ เช่นกนั โดยสามารถทาได้ 2 วิธี ดงั นี้ 1. ใช้คียล์ ดั กดป่ มุ Enter หน้าข้อความท่ีต้องการขึน้ ย่อหน้าใหม่ในมุมมอง Design 2. แทรก Tag ใน Code View 2.1 เปลี่ยนเป็น Code View หรอื Split View 2.2 พิมพ์ Tag คาสงั่ <p></p> ด้านหน้าและด้านหลงั ข้อความที่ต้องการ ขึน้ ย่อหน้าใหม่ 9
10
การจดั รปู แบบขอ้ ความทงั้ เวบ็ เพจ 1. กดป่ มุ Page Properties บนพาเนล Properties 11
2. เลือกตงั้ ค่ารปู แบบตวั อกั ษร ขนาด และสีของตวั อกั ษรได้ตามที่ ต้องการ จากนัน้ กด OK 12
3. จะได้ข้อความท่ีมีรปู แบบตามท่ีกาหนด และเม่ือพิมพข์ ้อความใหม่เข้า ไป กจ็ ะมีลกั ษณะเดียวกบั ท่ีตงั้ ค่าไว้ใน Page Properties 13
การจดั รปู แบบเฉพาะส่วนแบบ HTML การจดั รปู แบบข้อความเฉพาะส่วนแบบ HTML นัน้ สามารถทาได้บน พาเนล Properties ซ่ึงการจดั รปู แบบข้อความลกั ษณะนี้ จะเป็นการกาหนด รปู แบบให้ข้อความมีความโดดเด่นขึน้ โดยมีรปู แบบการปรบั แต่งต่าง ๆ ดงั นี้ 14
การใช้งาน Heading Heading หรอื หวั ข้อ เป็ นรปู แบบสาหรบั ใช้เน้นหวั ข้อสาคญั ท่ีแสดง บนเวบ็ เพจ ซ่ึงใช้งานได้จากส่วนของ Format บนพาเนล Properties โดยจะมี Heading ให้เลือกใช้ 6 ระดบั ซ่ึง Heading 1 เป็นลาดบั หวั ข้อใหญ่ท่ีสดุ และ ลดหลนั่ ลงมาตามลาดบั การเปล่ียนรปู แบบ Heading ของข้อความสามารถทาได้โดยการ เลือกข้อความ จากนัน้ เลือกเปล่ียนจากคาสงั่ Format ในพาเนล Properties ดงั รปู 15
16
นอกจากนัน้ ยงั สามารถปรบั เปลี่ยนขนาดและสีของ Heading แต่ละลาดบั ได้ โดยกาหนดค่าใน Page Properties ในหวั ข้อของ Heading (CSS) ท่ีได้ กล่าวถึงไปแล้วในเรือ่ งของการกาหนดค่าเร่ิมต้นเวบ็ เพจ ดงั รปู 17
เมื่อกด OK แล้ว สีและขนาด Heading ที่เลือกไว้จะแสดงผลตามที่ กาหนดทนั ที 18
การทาตวั หนาและตวั เอียงให้ขอ้ ความ 1. เลือกข้อความ (Highlight) บนเวบ็ เพจที่ต้องการทาตวั หนาหรอื ตวั เอียง 19
2. เลือกคลิกป่ มุ (Bold) หรอื (Italic) ตามที่ต้องการ โดยป่ มุ (Bold) จะให้ผลกบั ข้อความ ดงั นี้ และป่ มุ (Italic) จะให้ผลกบั ข้อความ ดงั นี้ หรือในกรณีท่ีต้องการทงั้ สองรปู แบบบนข้อความเดียว สามารถทาได้ และจะให้ผล ดงั นี้ 20
การจดั รปู แบบขอ้ ความแบบ CSS การใส่สีให้ข้อความ 1. ลากเมาสค์ ลมุ ข้อความที่ต้องการเปล่ียนสี 21
2. คลิกที่ป่ มุ CSS 3. คลิกป่ มุ แล้วเลือกสีตามท่ีต้องการ 22
4. จะปรากฏหน้าต่างขึน้ มา เลือก CSS เป็นแบบ Class จากนัน้ ตงั้ ช่ือแล้ว คลิก OK 23
5. ข้อความจะเปล่ียนเป็นสีเดียวกบั ท่ีเลือกไว้ 6. เม่ือต้องการเปล่ียนข้อความอื่น ให้เป็นสีเดียวกนั ให้ลากเมาสค์ ลมุ ข้อความนัน้ 24
7. เลือกช่ือ CSS ท่ีตงั้ ไวใ้ น 8. ตวั อกั ษรจะเปล่ียนไปใช้สีตาม CSS ช่อง Targeted Rule ท่ีบนั ทึกไว้ ในกรณีที่ต้องการเปลี่ยนข้อความเป็นสีต่าง ๆ สามารถใช้วิธีข้างต้น ในการเลือกสีและบนั ทึกเกบ็ ไว้เป็น CSS ได้ เม่ือต้องการใช้สีซา้ กส็ ามารถ เลือกจากรายการสีท่ีบนั ทึกไว้ได้ทนั ที 25
การกาหนดขนาดตวั อกั ษร การกาหนดขนาดตวั อกั ษรสามารถทาได้โดยระบคุ ่าบนพาเนล Properties เช่นเดียวกนั โดยมีการระบขุ นาดและหน่วยของตวั อกั ษรได้หลาย รปู แบบ ดงั นี้ การกาหนดขนาดตวั อกั ษร 26
1. ขนาดตวั อกั ษร แบ่งออกเป็น 3 ประเภทได้แก่ 1.1 None คือ ไม่กาหนดขนาดตวั อกั ษร ใช้ตามค่าตงั้ ต้น ของเบราเซอร์ 1.2 กาหนดเป็นค่าตวั เลขตายตวั โดยมีตงั้ แต่ 9 - 36 ตามหน่วยวดั ท่ีเลือก 1.3 กาหนดเป็นขนาดโดยเทียบกบั ขนาดมาตรฐาน ดงั นี้ medium คือ ขนาดตวั อกั ษรมาตรฐาน xx-small คือ ขนาดตวั อกั ษรท่ีเลก็ กว่ามาตรฐาน 2 เท่า x-small คือ ขนาดตวั อกั ษรที่เลก็ กว่ามาตรฐาน 1 เท่า 27
small คือ ขนาดตวั อกั ษรที่เลก็ กว่ามาตรฐาน smaller คือ ขนาดตวั อกั ษรที่เลก็ ท่ีสดุ large คือ ขนาดตวั อกั ษรท่ีใหญ่กว่ามาตรฐาน x-large คือ ขนาดตวั อกั ษรท่ีใหญ่กว่ามาตรฐาน 1 เท่า xx-large คือ ขนาดตวั อกั ษรท่ีใหญ่กว่ามาตรฐาน 2 เท่า larger คือ ขนาดตวั อกั ษรท่ีใหญ่ที่สดุ 2. หน่วยของตวั อกั ษร 28
การจดั ระเบียบข้อความ ข้อความต่าง ๆ นัน้ สามารถจดั ให้เป็นระเบียบไปในทางเดียวกนั ได้ โดยผา่ นป่ มุ การจดั เรียงข้อความบนพาเนล Properties การจดั ระเบียบข้อความ 29
รปู แบบต่างๆ ของการจดั ระเบียบข้อความมีดงั นี้ 1. (Align Left) เป็นการจดั ข้อความชิดซ้าย การจดั ระเบียบข้อความ 2. (Align Center) เป็นการจดั ข้อความไว้กึ่งกลาง 30
3. (Align Right) เป็นการจดั ข้อความชิดขวา การจดั ระเบียบข้อความ 31
Search
Read the Text Version
- 1 - 31
Pages: