About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

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

Go to Post-iT Sign Guestbook

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

%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%AD%E0%B8%9A%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2 CSS %28CSS Border%29 [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

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

สร้างระยะเยื้องให้บรรทัดแรกของข้อความย่อหน้า (text-indent)

เรื่อง : สร้างระยะเยื้องให้บรรทัดแรกของย่อหน้าด้วย Dreamweaver หลายท่านคงมีปัญหา เมื่อทำการพิมพ์ข้อความที่เป็นเนื้อหาของห...

การนำ Code ภาษา HTML/JavaScript แทรกลงใน Web Page

เรื่อง : นำโค้ด HTML หรือ JavaScript แทรกลงในเว็บเพจด้วย Dreamweaver บ้างครั้งเราทำเว็บไซต์ อาจจะต้องมีการไปสมัครเป็นสม...

สารพัดปัญหา Dreamweaver ติดต่อกับ Database (MySQL) ไม่ได้

เรื่อง: ปัญหาการใช้โปรแกรม Dreamweaver สร้าง Connection กับฐานข้อมูลไม่ได้ "Dreamweaver ติดต่อกั...

Dreamweaver กับข้อมูล XML

เรื่อง : Dreamweaver กับการใช้งานข้อมูลในรูปแบบ XML ความสามารถหนึ่งที่ Dreamweaver ในเวอร์ชั่น CS3 ที่มีมาให้ด้วย คือ ควา...