วิธีการสร้างกรอบข้อความด้วย CSS (CSS Border) [Article ID : 40]

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

ในเบื้องต้นให้ทำการพิมพ์ข้อความที่ต้องการใช้งานเส้นกรอบลงไปที่หน้าเว็บเพจ จากนั้นปฏิบัติตามดังนี้

สร้าง CSS Class ขึ้นมาเสียก่อน

ขั้นแรกทำการสร้าง CSS ในแบบ Class Selector ขึ้นมาเสียก่อน ดังนี้

1. เปิดหน้าต่าง CSS Styles ขึ้นมา โดยไปที่ Menu -> Window -> CSS Styles ดังรูป
*Dreamweaver CC ไปที่ CSS Designer แล้วเทียบเคียงวิธีการจากบทความนี้ดูครับ 2. ที่หน้าต่าง CSS Style ทำการคลิกที่ไอคอน New CSS Rule ดังรูป 3. โปรแกรมจะเปิดหน้าต่าง New CSS Rule ขึ้นมาให้กำหนด Selector ที่จะสร้างขึ้น ดังรูป 4. เมื่อกำหนดค่าได้ตามข้อ 3 แล้วทำการกดที่ปุ่ม OK
5. จากนั้นโปรแกรมจะเปิดหน้าต่าง CSS Rule definition for .... ขึ้นมาให้กำหนดค่า ดังรูป 6. ทำการกดที่ปุ่ม OK ที่หน้าต่าง CSS Rule definition ก็ได้จะ CSS ซึ่งมีคุณสมบัติในการแสดงเส้นกรอบตามที่ต้องการ ดังรูป

นำ CSS ที่สร้างไปใช้งานกับข้อความ

เมื่อได้สร้าง CSS ไว้จากขั้นตอนก่อนแล้ว เมื่อต้องการนำไปใช้งานกับข้อความที่เราได้พิมพ์ไว้ที่เว็บเพจแล้ว ให้ปฏิบัติตาม ดังนี้

7. เลือกที่ข้อความที่เราพิมพ์ไว้กับเว็บเพจ
8. จากนั้นที่ Properties Panel เลือกที่ Class โดยเลือกไปที่ชื่อคลาสที่สร้างไว้จากขั้นตอนก่อน ดังรูป 9. สังเกตที่ข้อความหลังจากเลือกคลาสแล้ว จะพบว่ามีกรอบข้อความปรากฎแล้ว ดังรูป

การปรับแต่งเส้นกรอบ

เส้นกรอบที่สร้างขึ้นด้วย CSS นี้เราสามารถปรับแต่งได้ตามต้องการ ตามคุณสมบัติที่ CSS มีให้ใช้ เช่น ขนาดความกว้างของขอบเขตของกล่องข้อความ ดังในตัวอย่างรูปด้านล่างนี้ เป็นการกำหนดคุณสมบัติให้เส้นกรอบเพิ่มเติมโดยใช้คุณสมบัติที่มีมาใน CSS3 คือ การทำให้เส้นกรอบมีมุมโค้งมนได้ ดังรูป *border-radius ใช้ในการกำหนดความโค้งมนของเส้นกรอบ

เมื่อแสดงผลกับ Web Browser ได้ดังรูป

จากขั้นตอนข้างต้น จะพบว่า ความสำคัญหลักอยู่ที่ ผู้ใช้งาน CSS ด้วยโปรแกรม Dreamweaver ต้องมีความรู้ความเข้าใจเรื่องของ CSS จึงจะใช้งานได้อย่างที่ใจตนเองต้องการสร้างสรรค์ [อ่านเรื่อง CSS]