การพิมพ์ตัวอักษร

การพิมพ์ตัวอักษร

การสร้างงาน

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

การพิมพ์ตัวอักษร

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

การพิมพ์ข้อความ

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

 

วิธีใช้

Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ

 

Paragraph การพิมพ์แบบต่อเนื่อง

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

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

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

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

      เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก

 

 

 

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

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

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

การเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space

Note Websafe color

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

 

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

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 : Style Definition เลือก Type ด้านซ้าย ในหัวข้อ Type ด้านขวามีรายละเอียดดังนี้

           Font คลิกลูกศรจะมี Font ให้เลือก            Size คลิกลูกศรจะมี Size ให้เลือก            ที่เหลือคงไว้เหมือนเดิม            คลิก Apply            คลิก OK

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