ใบความรู้ที่3

การใช้งานตัวอักษร (Text or Font)

การสร้างงาน
หลังจากได้เรียนรู้ขั้นตอนการตั้งค่าต่างๆ เป็นที่เรียบร้อยแล้วต่อไปก็จะเริ่มขั้นตอนการสร้างงานจริงๆ ที่สามารถนำไปใช้ได้ จะเริ่มจากขั้นตอนพื้นฐานจนถึงขั้นตอนระดับสูงเป็น Step ขั้นตอนต่างๆ จะเชื่อมโยงกันตลอด

การพิมพ์ตัวอักษร
การพิมพ์ตัวอักษรใน Dreamweaver เหมือนกับการใช้ Microsoft Word หากเคยใช้มาบ้างก็จะเป็นการง่ายในการ ทำความเข้าใจ

การพิมพ์ข้อความ
สามารถพิมพ์เข้าไปในหน้า Document ได้เลย และลอง Preview ดูโดยการกด F12 ( เป็นการจำลอง Browser ) เราจะเห็นได้ว่า ตัวอักษรที่พิมพ์จะเหมือนกันกับที่ Preview ทุกประการ นอกจากนั้นยังมีคุณสมบัติพิเศษที่สามารถปรับแต่งได้ โดยการใช้ Property Inspector

วิธีใช้
- Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ

- Paragraph

- Size

-

ตัวเสริม (สำหรับ Dreamweaver MX)

- การจัดให้ ชิดซ้าย ชิดขวา หรือกึ่งกลาง ( เหมือน Word ทุกประการ ) ตัวสุดท้ายเป็นการจัดให้ขอบตัวอักษรทางด้านซ้าย - ขวา เท่ากัน (justify)

- การใช้หัวข้อย่อย จะเป็นจุดหรือตัวเลขก็ได้

- เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก (สีไม่ชัดเท่าไหร่ เพราะผมกลัวว่าหากสีชัด จะทำให้ load หน้าเว็บเพจนาน)

Tip & Trick                    
เนื่องจากการพิมพ์ไม่สามารถเว้นวรรคตัวอักษรได้เกินหนึ่งตัวอักษร ทำให้การจัดรูปแบบการย่อหน้า ไม่สามารถทำได้

- การขึ้นบรรทัดใหม่โดยการกด Enter ในโปรแกรมจะเป็นการเว้น 2 บรรทัด

- ถ้าหากต้องการเว้นหนึ่งบรรทัดสามารถทำได้โดยการใช้ Character ในหัวข้อ BR ( Line Break )หรือกด Shitf ค้างพร้อมทั้งกด Enter

-

Websafe color 
คือ สีที่ใช้ในการสร้างเวบเพจ HTML ซึ่งเป็นสีที่ถูกระบุเป็นรหัสเลขฐานสิบหก หรือHexadecimal value เช่น #FF0000 หรือชื่อสีธรรมดาเช่น RED ตามปกติสีที่ใช่ใน Netscape และInternet explorer เมื่อใช้ค่าสีใน 256 สี จะเรียกได้ว่าเป็น ค่าสีที่ปลอดภัย ( สามารถดูได้ทุกเครื่องทุกระบบโดยสีไม่ผิดเพี้ยน ) ซึ่งจริงๆ แล้วสีที่ใช้ได้มีเพียงแค่ 212 สีเท่านั้นเอง

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

เครื่องมือในหมวด Characters

เครื่องมือในหมวด Characters นี้จะเกี่ยวกับการจัดการเกี่ยวกับการเว้นวรรค การขึ้นบบรทัดใหม่ รวมไปจนถึงการแทรกสัญลักษณ์พิเศษต่างๆ

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
ให้ทดลองพิมพ์ข้อความอะไรก็ได้ลงในหน้าเวบเพจ แล้วลองมาจัดระเบียบด้วยวิธีนี้

Style เป็นลักษณะของตัวอักษรเหมือนกับ word เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้ หรือว่าอาจจะใช้ Property inspector สามารถเรียกใช้โดย กด Ctrl + F3 จะปรากฎภาพดังรูปนี้ครับ

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