หน้าแรก บริการของ dwthai.com เกี่ยวกับ dwthai.com ติดต่อ dwthai.com
พื้นฐานการใช้งาน การใช้งานที่มากกว่างาน Design ขยายความสามารถให้ DW เรื่องของ Script บทความน่ารู้
มุม Download
พูดคุยสนทนาตามประสาคนทำเว็บ
หาเพื่อนคุยคอเดียวกันกับ MSN
ติ-ชมเราบ้าง

 

:: ติดต่อเรา ::
webmaster_dwthai@yahoo.com
webmaster@dwthai.com

08 - 9495 - 7296
-------
-----------------------------------

เรื่อง :: วิธีการสร้างกรอบข้อความด้วย CSS

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

วิธีการสร้างกรอบข้อความ

1. ให้ท่านทำการสร้างตารางขึ้นมาใหม่ 1 ตารางนะครับ โดยกำหนดค่าของ Cell และ Border ต่าง ๆ เป็น 0 ทั้งหมดดังภาพ Pic.1 ครับ

Pic.1
Table

2. จากนั้นให้ท่านทำการเปิดหน้าต่าง CSS Style ขึ้นมาดังภาพ Pic.2 ครับ
Pic .2
New CSS

ที่หน้าต่าง CSS นี้ให้คลิ๊กไปที่ New Style ดังภาพ เมื่อคลิ๊กไปแล้วจะมีหน้าต่างปรากฏใหม่ขึ้นมา ดังภาพ Pic.3

Pic.3

CSS Selector

ที่หน้าต่าง New CSS Style ให้ท่านกำหนดค่าดังนี้


Selector Type : เลือกไปที่ Class (can apply to any tag)
Name : กำหนดชื่อของ Class ห้ามเป็นชื่อภาษาไทย อย่าเว้นวรรค
Define In : ตรงนี้เลือกตามสะดวกครับ เลือกที่ This Document Only
จากนั้นก็ OK ครับ

3. เมื่อทำตามขั้นตอนที่กล่าวมาแล้วก็จะมีหน้าต่างใหม่เกิดขึ้นมาอีกดังรูป Pic .4 ครับ

Pic.4
CSS Border

ที่หน้าต่าง CSS Rule definition for... ให้เลือกเมนูทางซ้ายมือไปที่เมนู Border ครับ จากนั้นให้มากำหนดค่าที่ Filed ต่าง ๆ ทางขวามือของท่านต่อไปดังนี้

Style : ให้เลือกรูปแบบของเส้นกรอบของตารางที่ต้องการ ซึ่งจะมีหลายแบบให้เลือกใช้ เช่น dotted ก็จะเป็นเส้นกรอบแบบเส้นปะ แต่ถ้าเป็น solid ก็จะเป็นเส้นกรอบแบบตรงบาง

Width : กำหนดค่าของขนาดเส้นกรอบ มีหลายหน่วยขนาดให้เลือก

Color : กำหนดสีสันของกรอบ

เมื่อท่านกำหนดเป็นที่พอใจแล้วก็ OK ได้เลยครับ

4. เมื่อกำหนดค่าจากข้อ 3 ผ่านมาแล้ว ต่อมาเราต้องทำการเรียกใช้งาน CSS ที่เราสร้างขึ้นนี้ โดยการ...ให้เราไปที่ตาราง (Table) ที่เราสร้างขึ้นไว้จากขั้นตอนที่ 1 จากนั้นให้ไปที่ Selector TAG ดังรูป จากนั้นให้เรา Click ขวา เลือกที่ Set Class แล้วเลือกชื่อ Class ที่เราสร้างขึ้นไว้จากข้อ 3 ดังรูป

Set Class

จากนั้นทดลอง Preview ดูกับ Browser ของท่านครับ เป็นอันเสร็จสิ้นการทำกรอบที่ต้องการครับ

ตัวอย่างการสร้างกรอบข้อความ

................................................................................................................................................................................

Trick...ค่าฟิลต่าง ๆ  ที่เรากำหนดไป เราสามารถกำหนดได้ตามอิสระ คือ เส้นกรอบด้านบน ด้านล่าง ซ้าย ขวา จะกำหนดแยกเป็นส่วน ๆ ได้ โดยเรานำเอาเครื่องหมายถูกที่ช่อง Same for All ออก แล้วทำการกำหนดค่าต่าง ๆ

ps. Style ของกรอบขึ้นอยู่กับการแสดงผลของ Browser และ version ของ Browser เป็นสำคัญ บาง Browser อาจจะรองรับ Style Border ได้แตกต่างกัน ....

ps2. การกำหนด CSS เราอาจจะกำหนดแบบอื่นก็ได้ ไม่จำเป็นต้องทำการกำหนดแบบที่ผมแนะนำ แต่จุดหลัก ๆ คือให้เรากำหนด border ตามมที่แนะนำไป.

BACK TOP


สงวนลิขสิทธิ์ © 2546-2550 โดย dwthai.com ห้ามการ copy ส่วนใดส่วนหนึ่งของเว็บไซต์แห่งนี้.
Copyright ©2003-2007 dwthai.com. All rights reserved. This website was created by : S.raksasuk.