Format การจัดรูปแบบตัวอักษร

การจัดรูปแบบตัวอักษรหรือเรียกว่า Format ใน Dreamwearver มีการใช้คำสั่งเหมือนกับ Microsoft word การ Format text ใน Dreamweaver มีสองรูปแบบคือ HTML Tags กับ Style Sheet โดย Css หรือ Style Sheet จะใช้เฉพาะ Browser 4.0 ขึ้นไปเท่านั้น แต่จะขอแนะนำให้ใช้ค่า Css จะดีกว่า

การใช้ค่า Css มาช่วยในการทำเวบเพื่อช่วยประหยัดเวลาในการเซ็ท Font ทีละย่อหน้า และเป็นการบังคับให้ผู้ชมเวบใช้ Font ที่เรากำหนดเท่านั้น

Formatting text wirh html tags
คือการเขียน Tags HTML เพื่อช่วยจัดย่อหน้า และขนาดหัวเรื่องเท่านั้นเองการนำไปประยุกต์ใช้งานค่อนข้างจำกัด แต่มีข้อดีคือ Browser ทุกรุ่นจะสามารถ Format ด้วย Tags เหล่านี้ได้
การเรียกใช้ Formatting text with HTML tags


ให้ทดลองพิมพ์ข้อความอะไรก็ได้ลงในหน้าเวบเพจ แล้วลองมาจัดระเบียบด้วยวิธีนี้
พิมพ์ข้อความ ป้ายทับข้อความที่ต้องการจัด


การเรียกใช้ โดยการเลือกที่เมนู Text > Styles หรือคลิกขวาที่ข้อความ
Align เป็นการจัดข้อความให้ชิดซ้าย กลาง หรือขวา
Style เป็นลักษณะของตัวอักษรเหมือนกับ word เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้


Format with Style sheets

Style sheets ก็เหมือนการเก็บค่า Format ในรูปแบบสไตล์ของเราเอาไว้หลาย ๆ แบบไม่ว่าจะ
Font, ขนาด, สีที่ใช้, การจัดย่อหน้า (ใช้จดจำโค้ด HTML บางอย่างได้อีกด้วย) เมื่อเราเก็บไว้หลาย
ๆ แบบย่อหน้านี้ เราต้องการสไตล์ไหนก็คลิกเลือกได้เลย เมื่อเวบเพจเขียนเสร็จแล้วจะดึงมาเฉพาะค่า Css ที่เราเรียกใช้เท่านั้น Cssจึงนำมาช่วยการออกแบบให้สะดวกมากขึ้น

วิธีสร้าง Style sheets
มาที่เมนู Text > Css Styles > New Style…


จากนั้นจะมี Dialog Box New Style

Neme : ใส่ชื่อ
Type : คลิกเลือก Make Custom Style (class)
Define In : คลิกเลือก New Style Sheets (file)
คลิก OK
จากนั้นจะเป็น Dialog Box:StyleDefinitionเลือกTypeด้านซ้ายในหัวข้อTypeด้านขวามีรายละเอียดดังนี้

tFon คลิกลูกศรจะมี Font ให้เลือก
Size คลิกลูกศรจะมี Size ให้เลือก
ที่เหลือคงไว้เหมือนเดิม
คลิก Apply
คลิก OK
ทดสอบโดยการพิมพ์ข้อความ จากนั้นเลือกข้อความมาที่เมนูเลือก
Text > Css Styles > เลือกชื่อที่ได้ตั้งไว้ (Test) จากนั้นจะเห็นการเปลี่ยนแปลงกับตัวอักษร
ทดสอบโดยการ Preview กดF12ทดลองเปลี่ยนขนาดของ FontในBrowserลองเปลี่ยนเป็นขนาดใหญ่สุดจะเห็นว่าขนาดตัวอักษรไม่มีการเปลี่ยนแปลงนั้น
เป็นการบังคับโดยใช้ Css Styles นั้นเองและยังสามารถใช้ได้กับทุกหน้า Document
โดยการใช้ Attach Styles Sheets