ใบความรู้เรื่อง การจัดรูปแบบข้อความ

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

จัดรูปแบบด้วยสไตล์ HTML

(การจัดย่อหน้าและหัวเรื่องลิงค์ข้อความการเยื้องย่อหน้าสร้างลิสต์แบบตัวอักษร)

จัดรูปแบบด้วยสไตล์ CSS

(สร้างหรือเลือกสไตล์ cssสีข้อความจัดตำแหน่งข้อความชุดฟอนต์ตัวอักษรขนาดข้อความ)

การกำหนดลักษณะตัวอักษรด้วยสไตล์ css

1.เลือกข้อความที่จะกำหนดลักษณะตัวอักษร

2.คลิกปุ่ม css บนพาเนล Properties Inspector

3.คลิกช่องสี แล้วเลือกสีที่ต้องการ

4.ที่หน้าต่าง New Css Rule ในช่อง choose or enter a name

ให้กำหนดชื่อสไตล์ CSS

5.คลิกปุ่ม OK

(การเว้นวรรคระหว่างข้อความกรณีต้องการเว้นวรรคข้อความมากกว่า 1 ตัวอักษรพาเนลInsert-> Text ->กำหนดสีเส้น1.คลุมดำตัวอักษร คลิกเมาส์ขวา เลือกคำสั่ง Edit Tag2.คลิกเลือก Browser Specific3.ที่ Border color เลือกสีที่ต้องการ4.คลิกปุ่ม Ok) (การปรับแต่งคุณสมบัติของเส้นแบ่งเนื้อหา)

การ Copy และจัดวางเนื้อหาจากเอกสาร Office

1. Copy เอกสารจาก Office

2. วางเอกสารตรงตำแหน่งที่ต้องการโดย

· คลิกเมนู Edit -> Paste (Ctrl+V)

· คลิกเมนู Edit -> Paste Special

(Text onlyคือ วางเฉพาะข้อความอย่างเดียวแต่ไม่มีการจัดรูปแบบใด ๆText with structureคือ วางข้อความตามรูปแบบโครงสร้างต้นฉบับเช่น จัดย่อหน้า จัดลิสต์ลำดับ จัดตาราง เป็นต้นText with structureplus basic formattingคือ วางข้อความตามรูปแบบโครงสร้างต้นฉบับเช่น ตัวหนา ตัวเอียง เป็นต้นText with structureplus basic formatting (bole, italic, styles)คือ วางข้อความตามรูปแบบโครงสร้างต้นฉบับรวมทั้งรูปแบบสไตล์ที่ใช้จัดข้อความด้วยRetain line breaksคือคงลักษณะการแบ่งบรรทัดตามต้นฉบับClean up Word paragraph spacingคือล้างค่าระยะห่างระหว่างย่อหน้าที่กำหนดไว้ใน word ออกConvert smart quotes to straight quotesคือแปลงเครื่องหมาย “,” (แบบมีหัว) เป็นเครื่องหมาย `,˝ (แบบเส้นตรงไม่มีหัว))หน้าต่าง Paste Special ให้เลือกรูปแบบการจัดวางข้อความ ดังนี้

การใส่สีตัวอักษร

1.คลุมดำที่ข้อความ

2.ช่อง text color ให้เลือกสีตามต้องการ

3.ที่หน้าต่าง New Css Rule ในช่อง choose or enter a nameให้กำหนดชื่อสไตล์ CSS

4.คลิกปุ่ม OK ตัวอย่างดังภาพ

แบบฝึกหัด

(ส่งงาน Save ตั้งชื่อไฟล์ว่า font ตามด้วยเลขที่ เช่น font.2.html Copy ไฟล์งานส่งเข้าเครื่องครู \\192.168.1.201 , 203)

· ให้นักเรียนสร้างตารางแล้ว Copy เนื้อหาเกี่ยวกับเรื่องที่นักเรียนสร้างเว็บไซต์ 1 หัวข้อจากอินเทอร์เน็ต วางลงในเอกสารหน้า Design จัดรูปแบบตัวอักษร ดังนี้

- จัดย่อหน้าและหัวเรื่อง

- จัดรูปแบบตัวอักษร เอียง / หนา

- สร้างลิสต์

- ปรับขนาดตัวอักษร

- จัดตำแหน่งข้อความ ชิดซ้าย/ กึ่งกลาง /ชิดขวา/เต็มแนว

- ใส่สีตัวอักษร

ดังตัวอย่าง