การจัดรูปแบบข้อความ

1. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การจัดรูปแบบข้อความ
การแทรกข้อความในหน้าเว็บเพจ ผู้ออกแบบเพียงแต่พิมพ์ข้อความที่ต้องการลงไป หรืออาจจะ
คัดลอก (Copy) ข้อความที่พิมพ์ไว้เรียบร้อยแล้วจากไฟล์อื่นมาใช้ก็ได้ โดยมีวิธีการดังนี้
1. การพิมพ์ข้อความในหน้าเว็บเพจ
การพิมพ์ข้อความในหน้าเว็บเพจสามารถทาได้ง่าย โดยพิมพ์ข้อความที่ต้องการ เมื่อต้องการขึ้น
บรรทัดใหม่ให้กดแป้นพิมพ์ หรือกดแป้นพิมพ์ พร้อมกับ ในกรณีที่ต้องการให้ระยะบรรทัดไม่ห่างกันมาก
2. การคัดลอกข้อความจากไฟล์อื่นมาไว้ในหน้าเว็บเพจ
เราสามารถคัดลอกข้อความที่พิมพ์ไว้ด้วยโปรแกรมอื่น แล้วนามาวางไว้ในหน้าเว็บเพจได้ ซึ่งส่วนมาก
ในการทาเว็บไซต์ มักจะนิยมพิมพ์ข้อความที่ต้องการเตรียมไว้โดยใช้โปรแกรม Notepad แล้วเก็บบันทึกไว้เป็น
แบบ Text File (มีนามสกุลเป็น txt) โดยมีวิธีการดังนี้คือ
 เปิดไฟล์ที่เก็บข้อความที่ต้องการขึ้นมา จากนั้นระบายข้อความที่ต้องการ
 คลิกคาสั่ง Edit>Copy หรือกดแป้นพิมพ์ <Ctrl>+<C>
 เปิดหน้าของเว็บเพจที่ออกแบบด้วยโปรแกรม Adobe Dreamweaver CS6
จากนั้นคลิกคาสั่ง Edit>Paste หรือกดแป้นพิมพ์ <Ctrl>+<V>
 ข้อความที่คัดลอกมาจะแสดงในหน้าเว็บเพจ
1. การจัดรูปแบบข้อความ
เราสามารถปรับแต่งข้อความที่ต้องการได้เหมือนโปรแกรม Word โดยมีวิธีการดังนี้
1. ทาการเลือกข้อความนั้น ๆ ก่อน โดยการลากเม้าส์คลุมให้เป็นแถบสีดา แล้วเลือกใช้คาสั่งในแถบ
Panel Properties
รูปที่ 1 การเลือกข้อความ
2. ทาการปรับแต่งคุณสมบัติ และจัดรูปแบบข้อความโดยจะมีการจัดรูปแบบ 2 รูปแบบ คือ แบบ
HTML และ แบบ CSS

2. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การปรับแต่งคุณสมบัติ และจัดรูปแบบตัวอักษร แบบ HTML
ตารางที่ 1 การปรับแต่งคุณสมบัติ และจัดรูปแบบตัวอักษร แบบ HTML
การกาหนดค่าของข้อความที่เลือกโดยมีค่าของ
None, Paragraph , Heading , Performatted
การจัดรูปแบบที่ได้จัดทาไว้แล้ว
การกาหนดแม่แบบอักษร (Style sheet)
การสร้างการเชื่อมโยงเว็บเพจ โดยหากต้องการเลือก
ไฟล์เชื่อมโยงให้เลือก หลังจากนั้นสามารถเลือก
รูปแบบการเชื่อมโยง โดยคลิกที่
กาหนดข้อความให้เป็นตัวหนา
กาหนดข้อความให้เป็นตัวเอียง
การสร้างลิสต์รายการ โดยมี 2 รูปแบบ คือ แบบ
สัญลักษณ์ และตัวเลข สามารถใช้ร่วมกับปุ่ม Item
List ด้านล่าง สาหรับการกาหนดรูปแบบของ
สัญลักษณ์นาหน้าได้
การกาหนดการย่อหน้า ทั้งการย่อหน้าและการถอย
กลับ
การกาหนดคุณสมบัติให้กับหน้าเว็บเพจ

3. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การปรับแต่งคุณสมบัติ และจัดรูปแบบตัวอักษร แบบ CSS
การสร้างกฏเกณฑ์ CSS เพื่อใช้กาหนดลักษณะด้านต่าง ๆ
ของเว็บเพจ
การเลือกเปลี่ยนรูปแบบตัวอักษร ซึ่งสามารถเพิ่มเติม
รูปแบบตัวอักษรได้ด้วยการ กดคาสั่ง Edit Font List ที่
แถบเลือกล่างสุดของ Font และทาการเพิ่มเติมรูปแบบ
ตัวอักษรได้
การเลือกใช้งานฟอนต์ สาหรับการพิมพ์ข้อความบนเว็บเพจ
เป็นภาษาไทย ควรกาหนดให้เป็นMicrosoft Sans Serif,
MS Sans Serif หรือ Tahoma และสาหรับข้อความบน
เว็บเพจเป็นภาษาอังกฤษ ให้ทาการกาหนดเป็นกาหนดเป็น
Arial เท่านั้น เพราะหากเราทาการกาหนดเป็นฟอนต์ตัวอื่น
นอกเหนือจากนี้ อาจทาให้คอมพิวเตอร์บางเครื่อง ไม่
สามารถทาการเปิดอ่านข้อความบนเว็บเพจ
การกาหนดขนาดตัวอักษร ซึ่งค่าหน่วยวัดจะเป็น Pixel
อัตโนมัติ ซึ่งไม่ควรเปลี่ยนแปลงหน่วยวัด เพราะเป็นค่าที่ใช้
วัดความละเอียดในโปรแกรมเกี่ยวกับมัลติมีเดียอยู่แล้ว
กาหนดข้อความให้เป็นตัวหนา
กาหนดข้อความให้เป็นตัวเอียง

4. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การจัดตาแหน่งข้อความ
การใส่สีตัวข้อความ
การกาหนดคุณสมบัติของหน้าเว็บเพจ
2. การเว้นวรรคระหว่างข้อความ
การใส่ข้อความบนหน้าเว็บเพจนั้น ปกติแล้วโปรแกรม Adobe Dreamweaver CS6 จะเว้นวรรคให้
เพียง 1 ครั้งเท่านั้น แต่อย่างไรก็ตามเราสามารถที่จะเว้นวรรคมากกว่า 1 ครั้งได้ โดย กดแป้นพิมพ์
<Ctrl>+<Shift>+<Space>
หากเริ่มใช้งานครั้งแรกจะพบว่าเราสามารถใช้การเคาะเว้นวรรคได้เพียงเคาะเดียวเท่านั้น ซึ่งหากเรา
ต้องการเคาะอีกต้องแทรกที่แถบสัญลักษณ์ดูวุ่นวาย เรามีวิธีการปลดล็อคให้เคาะกี่ครั้งก็ได้ ดังนี้
1. สามารถกาหนดได้ด้วยการคลิกที่ Edit บนแถบเมนูบาร์ เลือก Preferences จะปรากฎหน้าต่าง
Preferences ขึ้นมา
รูปที่ 2 การกาหนดค่า Preferences
2. เลือกรายการทางด้านซ้ายมือ General ตัวบนสุด แล้วติ๊กเครื่องหมายถูกข้างหน้าข้อความ Allow
multiple consecutive space (หากปิดการใช้งานจะเว้นว่างอยู่)
3. เสร็จแล้วกด OK


5. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 3 การกาหนดค่าการเว้นวรรคระหว่างข้อความ
3. การขึ้นย่อหน้าใหม่ หรือเริ่มบรรทัดใหม่
ในการขึ้นบรรทัดใหม่ทาได้ดังนี้
1. กด enter เพื่อทาการขึ้นบรรทัดใหม่ ตัวอักษรที่เราพิมพ์มาทั้งหมดจะอยู่ใน <p> </p> โดย
อัตโนมัติ
2.กด shift + enter จะทาการแทรก <br /> ใน code ในส่วนของการแสดงผล <p> </p> จะทา
ให้ความห่างของบรรทัดมีมากว่าการใช้คาสั่ง <br> เครื่องมืออื่นที่เกี่ยวกับตัวอักษร ก็มีการใช้งานเหมือนกับ
ตัวอย่างข้างบนทั้งหมด
4. การสร้างลิสต์รายการ
o การสร้างลิสต์แบบไม่เรียงลาดับ (Unordered List)
1. คลิกเลือกตาแหน่งที่ต้องการสร้างลิสต์รายการ
2. คลิกเลือก จะได้สัญลักษณ์แสดงหัวข้อย่อยขึ้นมาให้เราพิมพ์ข้อความลงไป
รูปที่ 4 การสร้างลิสต์แบบไม่เรียงลาดับ (Unordered List)
หากต้องเลือกลักษณะของสัญลักษณ์แสดงหัวข้อย่อยแบบอื่นสามารถเลือกได้โดย เลือก




6. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
จากปรากฏหน้าจอดังรูป
รูปที่ 5 การเลือกลักษณะของสัญลักษณ์แสดงหัวข้อย่อยแบบไม่เรียงลาดับ
List type : ประเภทของลิสต์รายการ (แบบ Bulleted List)
Style : รูปแบบของสัญลักษณ์ Bullet คือ วงกลมทึบสีดา () และ Square คือ สี่เหลี่ยมทึบสีดา ()
3. คลิก OK
o การสร้างลิสต์แบบเรียงลาดับ (Ordered List)
1. คลิกเลือกตาแหน่งที่ต้องการสร้างลิสต์รายการ
2. คลิกเลือก จะได้สัญลักษณ์แสดงหัวข้อย่อยขึ้นมาให้เราพิมพ์ข้อความลงไป
รูปที่ 6 การสร้างลิสต์แบบไม่เรียงลาดับ (Unordered List)
หากต้องเลือกลักษณะของสัญลักษณ์แสดงหัวข้อย่อยแบบอื่นสามารถเลือกได้โดย เลือก
จากปรากฏหน้าจอดังรูป
รูปที่ 7 การเลือกลักษณะของสัญลักษณ์แสดงหัวข้อย่อยแบบเรียงลาดับ

7. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
List type : ประเภทของลิสต์รายการ (แบบ Numbered List)
Style : รูปแบบของสัญลักษณ์
1. Number คือ รูปแบบตัวเลขเรียงลาดับ
2. Roman Small คือ รูปแบบสัญลักษณ์โรมันตัวเล็ก
3. Roman Large คือ รูปแบบสัญลักษณ์โรมันตัวใหญ่
4. Alphabet Small คือ รูปแบบสัญลักษณ์ภาษาอังกฤษตัวเล็ก
5. Alphabet Large คือ รูปแบบสัญลักษณ์ภาษาอังกฤษตัวใหญ่
หากต้องการกาหนดการเริ่มต้นสัญลักษณ์ สามารถกาหนดได้โลกเลือก Start count จากนั้นใส่ตัวเลข
ลงไป จากนั้นคลิก OK
รูปที่ 8 การกาหนดการเริ่มต้นสัญลักษณ์
จะได้สัญลักษณ์แสดงหัวข้อย่อยเริ่มต้นตามที่กาหนด ดังรูป
รูปที่ 9 ตัวอย่างการเริ่มต้นสัญลักษณ์
5. การแทรกสัญลักษณ์พิเศษ (Symbol)
สัญลักษณ์พิเศษที่ไม่มีในแป้นพิมพ์ สามารถจะแทรกเพิ่มเติมได้จากแถบ Characters โดยทาได้
ดังนี้คือ
1. วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกสัญลักษณ์พิเศษ
2. คลิกแถบ "Common" แล้วคลิกเลือกแถบ "Text"
3. จากนั้นคลิกเครื่องมือ แล้วคลิกเลือกสัญลักษณ์ตามต้องการ

8. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 10 การแทรกสัญลักษณ์พิเศษ
อีกหนึ่งวิธีในการแทรกสัญลักษณ์พิเศษ (Symbol) มีวิธีการดังนี้
4. คลิกเมนู Insert >> HTML
5. เลือก Special Characters จากนั้นคลิกเลือกสัญลักษณ์ตามต้องการ
รูปที่ 11 การแทรกสัญลักษณ์พิเศษด้วยแถบเมนู Insert
6. การใส่วันที่
การใส่วันที่ในหน้าเว็บเพจ นอกจากเพื่อต้องการแสดงวันที่แล้ว เรายังสามารถกาหนดรูปแบบวันที่
พร้อมทั้งกาหนดให้วันที่ปรับเปลี่ยนตามวันได้อัตโนมัติด้วย โดยทาตามขั้นตอนดังนี้คือ
1. วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกวันที่
รูปที่ 12 วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกวันที่
2. คลิกแถบ "Common" บน Insert Bar
รูปที่ 13 การเลือกใส่วันที่และเวลาในแถบ Common






9. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
3. จากนั้นคลิกเครื่องมือ จะปรากฏกรอบให้กาหนดรูปแบบ
4. ถ้าต้องการให้วันที่ปรับเปลี่ยนอัตโนมัติให้คลิกเครื่องหมายถูก ที่หน้าข้อความ Update
Automatically on Save
5. ให้เลือกรูปแบบตามที่ต้องการแล้วคลิก OK
รูปที่ 14 การตั้งให้เวลาปรับเปลี่ยนอัตโนมัติ
7. การใส่เส้นคั่นเนื้อหา
7.1 การแทรกเส้นแบ่งเนื้อหา มีวิธีการดังนี้คือ
1. วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกเส้น
รูปที่ 15 การวางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกเส้น
2. คลิกเลือกแถบ "Common" บน Insert Bar
3. จากนั้นคลิกเครื่องมือ
รูปที่ 16 การแทรกเส้นคั่นในแถบ Common
อีกหนึ่งวิธีในการการใส่เส้นคั่นเนื้อหา มีวิธีการดังนี้
4. คลิกเมนู Insert >> HTML
5. เลือก Special Characters จากนั้นคลิกเลือกสัญลักษณ์ตามต้องการ





10. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 17 การแทรกเส้นคั่นด้วยเมนู Insert
7.2 การปรับแต่งเส้นคั่นเนื้อหา
1. คลิกที่เส้นคั่นที่ต้องการปรับแต่ง
รูปที่ 18 การคลิกเลือกเส้นคั่นเพื่อปรับแต่ง
2. กาหนดค่าในส่วนของพาเนล Properties ซึ่งประกอบด้วย
o Horizontal rule คือ การกาหนดชื่อให้กับเส้นคั่น
o W คือ ความยาวของเส้น ซึ่งจะเลือกกาหนดเป็นแบบพิกเซล หรือ % ก็ได้
o H คือ ความหนาของเส้น ค่าปกติจะกาหนดความหนาไว้ที่ 3 พิกเซล
o Align คือ การจัดวางเส้น จะเลือกแบบชิดซ้าย กลาง ขวา ก็ได้
o Shading คือการกาหนดให้เส้นเป็นแบบเส้นทึบหรือเส้นโปร่ง
o Class คือ การกาหนดรูปแบบ CSS
รูปที่ 19 การปรับแต่งเส้นคั่น
7.3 การปรับแต่งสีเส้นคั่นเนื้อหา
1. คลิกที่เส้นคั่นที่ต้องการปรับแต่ง
รูปที่ 20 การคลิกเลือกเส้นคั่นเพื่อปรับแต่งสีเส้นคั่น







11. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
2. คลิกเมาส์ขวา >> Edit Tag <hr> หรือ กด Shift+F5 ที่แป้นพิมพ์
รูปที่ 21 การแก้ไขสีเส้นคั่น
3. คลิกเลือก Browser Specific >> hr – Browser Specific >> Color >> จากนั้นเลือกสีเส้นคั่น
>> คลิก OK
รูปที่ 22 การปรับแต่งสีเส้นคั่น
หมายเหตุ สีเส้นคั่นจะไม่แสดงผลในโปรแกรม แต่จะแสดงผลในโปรแกรมเว็บบราวเซอร์
