Dream 3 การใช้งานตัวอักษร

ใบความรู้ที่ 3 การใช้งานตัวอักษร

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

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

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

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

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

- Paragraph การพิมพ์แบบต่อเนื่อง
- Heading 1-6 การพิมพ์หัวข้อเรื่องตามขนาด Heading 1 เป็นขนาดใหญ่ที่สุดเรียงตามลำดับ การใช้เลือกก่อนพิมพ์ หรือถ้าพิมพ์ไปแล้วจะใช้ได้โดยการ Click Mouse ค้างแล้วป้ายทั้งข้อความที่ต้องการจากนั้นมาเลือกที่ Propreties > Format ตัวอักษรก็จะเปลี่ยนตาม ส่วนตัวอักษรที่ไม่ได้เลือกก็จะไม่มีการเปลี่ยนแปลง
- ในหน้า Document เดียวกันเราสามารถใช้ ตัวอักษรหลายแบบโดย Click ที่ลูกศรในช่อง Default Font จะมี Font อื่นให้เลือก         ส่วนค่า Default Font จะเป็น Font ที่ได้ทำการ Set ไว้ในตอนต้น

- Size ขนาดของตัวอักษร (ขนาดปกติที่ผมใช้ คือ 2 )

- การใช้ตัวหนา และตัวเอน ตัวหนา Click ที่ B และ ตัวเอน Click ที่ ตัว I

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

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

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

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

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

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

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

- การเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space ดังรูปด้านล่าง หรือกด Ctrl+Shift+space bar

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

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

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

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