About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

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

เรื่อง : การใช้ CSS เพื่อสร้างกรอบข้อความ (CSS Border)

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

DwThai.Com is a website for web developer using Adobe Dreamweaver.

วิธีการสร้างเส้นกรอบข้อความด้วย 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

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

อย่างไรเมื่ออ่านมาถึงตรงนี้แล้ว อยากให้ผู้ที่ใช้โปรแกรม Dreamweaver อย่าเกรงกลัวในเรื่อง Code กันเลยครับ ถ้าเราศึกษากันไว้บ้าง เราจะสรรสร้างงานเว็บเราได้อย่างอิสระ ตามที่ใจปรารถนา...สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การสร้างโปรแกรมสำหรับแสดงข้อมูลจาก Database (Select Data)

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 4ในตอนก่อนเราได้ทำการสร้าง Form และโปรแกรมส...

การ Set ให้โปรแกรม Dreamweaver ใช้งานภาษาไทย

เรื่อง : การกำหนด Encoding ให้เว็บเพจเพื่อการใช้งานภาษาไทยได้อย่างถูกต้อง *เวอร์ชั่นตั้งแต่ CS3 ขึ้นไปไม่จำเป็นต้องเซ็ท เพราะค่า Defaul...

เทคนิคการใช้หน้าต่าง CSS Designer ของ Dreamweaver CC

เรื่อง : แนะนำเทคนิคการใช้งาน CSS Designer Panel ของ Dreamweaver CC CSS Designer Panel เป็นหน้าต่างที่ใช้ใ...

การทำตารางให้มีมุมโค้ง (แบบใช้รูปภาพ)

เรื่อง : ทำตารางให้มีมุมโค้ง (แบบดั่งเดิม/ใช้รูปภาพ) *ปัจจุบัน CSS 3 สามารถทำตารางให้มีมุมโค้งได้โดยไม่ต้องใช้ไฟล์รูปภาพมาตบแต่งครับ...