About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





ค้นหาข้อมูลใน 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

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



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

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ)

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ) กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโป...  

Upload ไฟล์เว็บไปไว้บน Web Hosting ด้วย Dreamweaver

เรื่อง : Dreamweaver กับการ Upload ไฟล์เว็บไซต์ไปยัง Web Hosting เมื่อเร็ว ๆ นี้มีน้องคนหนึ่งโทรเข้ามาสอบถามเรื่องของการใช้...  

การสร้างโปรแกรมลบข้อมูล

เรื่อง : การสร้างโปรแกรมลบข้อมูลจากตารางข้อมูล (Delete Record) ...  

มาสร้างปุ่มปิด Web Browser กัน (Snippets Panel)

เรื่อง : การสร้างปุ่มปิด Web Browser บางครั้งเราเข้าไปชมเว็บเพจของบางเว็บไซต์ คุณเคยสังเกตไหมครับว่า บางหน้าเว็บเขาจะแสดง...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*