HardcoreGraphic Home Tutorial Graphic Design News Show Webboard Links About Back to index page
 


ตรึงขนาดอักษรให้คงที่
Date : 19:08:03 | By : HardcoreGraphic

เรื่องการกำหนดขนาด Font บนเว็บให้มีขนาดคงที่ เป็นคำถามที่ใครหลายๆคนเคยถามกันมา ด้วยเทคนิคการใช้ CSS หรือที่
เรียกแบบเต็มๆว่า Cascading Styles Sheets เป็นโค้ดที่ใช้สำหรับการกำหนดคุณสมบัติต่างๆให้กับเว็บ เช่น ตัวอักษร ขนาด
สี เลย์เอาท์ ขอบตาราง Links เป็นต้น และด้วยความง่ายดายในการใช้งาน ผมจะใช้ Dreamweaver ในการสอนวิธีการ

ก่อนอื่นคุณต้องเรียกหน้าต่าง CSS ขึ้นมาก่อน ด้วยการกด Shift + F11 หรือไปที่เมนู Window > CSS Styles ถ้าใครเปิด
มาอยู่แล้วก็โซโล่กันได้เลยครับ...อย่าช้า





นรูปด้านซ้ายคือหน้าตาของส่วน CSS ขณะยังไม่ได้มีการกำหนดคุณสมบัติ
ใดๆลงไปในเว็บไซท์ ให้คุณคลิกที่ปุ่มบริเวณแถบด้านล่าง New CSS Styles
เพื่อกำหนด CSS ใหม่










หน้าต่าง New CSS จะปรากฏออกมาทันที ตรง
ช่องบนสุด Name ให้คุณกำหนดชื่อ CSS ตาม
ความต้องการ และให้ให้ใส่จุด ( . ) นำหน้าชื่อด้วย
เช่น .font9 เป็นต้น และถัดมาให้เลือก Type
เป็น Make Custom Styles เพื่อให้เรากำหนด
คุณสมบัติต่างๆได้เอง





และส่วนสุดท้ายคือ Define In ถ้าคุณจะเก็บโค้ด CSS ไว้ต่างหาก ให้เลือกอันแรก New Style Sheet File ซึ่งโปรแกรมจะ
แสดงหน้าต่างอีกอันออกมา เพื่อให้คุณจัดเก็บลงโฟลเดอร์ที่ต้องการ และถ้าหากคุณไม่ต้องการ คือจะให้ฝังโค้ด CSS ลงในหน้า
เว็บนี้เลย ก็เลือกอันที่สอง This Document Only แต่ผมแนะนำว่าหากเว็บไซท์ของคุณต้องใช้ CSS เกือบทุกหน้า ให้เลือก
เป็นตัวเลือกแรกดีกว่าครับ



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

Font :
ให้เลือกชุดอักษรตามต้องการ
Size :
ใช้กำหนดขนาดที่คุณปรารถนา อยากให้เล็ก หรืออยากใหญ่
กำหนดตรงนี้ไปซะ สามารถใส่ค่าตัวเลขเองได้
Weight :
เป็นค่าน้ำหนักเข้ม บาง ของอักษร
Style:
กำหนดลักษณะตัวเอียง ตัวหนา
Variant :
เป็นการกำหนดขนาดตัวอักษร ให้เลือกเป็น Normal
Line Height:
เป็นการกำหนดระยะห่างระหว่างบรรทัด ปกติจะเซ็ทเป็น
Normal หากอยากกำหนดเองให้เลือกเป็น Value แล้วใส่ค่า
ตัวเลขที่ต้องการลงไป แต่ถ้ากำหนดค่าต่ำมากๆจะทำให้อ่านยาก

Case :

เป็นการกำหนดตัวยก ตัวห้อย ของอักษร
Decoration :
กำหนดคุณสมบัติเพิ่มเติม เช่น ตัวขีดเส้นใต้ หรือไม่ต้องขีดเส้น
ตัวกระพริบ (Blink) แต่หากคุณเลือกตัวกระพริบ จะไม่แสดงผล
ใน IE Browser นะครับ
Color :
กำหนดสีสันตามใจชอบ

หลังจากกำหนดเสร็จแล้ว กด OK ชื่อ CSS ที่คุณเพิ่งกำหนดจะแสดงยังหน้าต่าง CSS



ซึ่งการกำหนด CSS คุณสามารถเพิ่มจำนวนเข้าไปได้ตามต้องการ ระวัง
อย่าใช้สับสนเท่านั้นเป็นใช้ได้





วิธีใช้งาน เพียงแต่ไฮไลท์ข้อความ หรือ ตารางที่คุณอยากจะกำหนดเท่านั้น
แล้วคลิกที่ชื่อของ CSS เท่านี้ชุดข้อความก็จะถูกตรึงโดยอัตโนมัติ ตามรูป
ข้างๆ ข้อ 3. คือ หลังจากคลิกเลือก CSS แล้ว ตัวอักษรก็เล็กลงไป

วิธีการลบ CSS ทิ้ง เพียงกดปุ่มไอคอนถังขยะ ที่หน้าต่าง CSS ใกล้ๆกับ
ปุ่มเพิ่ม CSS นั่นแหละครับ แต่ตัวอักษรที่เคยถูก CSS ตรึงเอาไว้จะคืน
สภาพกลับสู่ภาวะกติของมันทันที


นี่ก็เป็นวิธีการตรึงขนาดอักษรให้คงที่ ที่ผมคิดว่าคุณคงจะไม่สับสนกับวิธีการ ง่ายๆ ไว้เจอกันใหม่ตามโอกาสจะเอื้ออาทรณ์ครับ






 
   
 
+ HardcoreGraphic 7.0 Sponsored by Elife.co.th
Copyright©2002-2008 www.hardcoregraphic.com All rights reserved