สร้าง Style แบบเส้น ใน Dreamweaver

บทความนี้เราจะมาสร้าง Style แบบเส้น ใน Dreamweaver กันค่ะ ก็เป็นการกำหนด CSS Style อีกแบบหนึ่งค่ะ ลองเข้ามาดูกันค่ะ

ถือว่าเป็น Tip Dreamweaver ก็ได้มั้งค่ะ พอดีไอเดียร์มันปิ๊งขึ้นมาจากการทำเส้นใน Photoshop จากบทความก่อนหน้านี้ เลยกะจะมาลองทำเส้นในโปรแกรม Dreamweaver ดูบ้างค่ะ

ขึ้นตอนการทำก็ไม่อยากค่ะ เพราะเป็นการทำ CSS Style สำหรับใครที่ไม่เคยทำ CSS Style มาก่อนก็ดูการเริ่มต้นสร้าง CSS Style ในได้ที่บทความ การใช้งาน CSS Style กำหนดรูปแบบตัวอักษร ซึ่งในบทความนี้จะมีขึ้นตอนการเริ่มต้นสร้าง CSS Style ค่ะ

ซึ่งบทความนี้จะเป็นการสร้าง Style เพิ่มเข้าไป ขั้นตอนก็คือคลิกที่เครื่องหมาย + เพื่อเป็นการ New CSS Style ตามตำแหน่งที่ 1

จากนั้นจะปรากฏไดอะล็อกบ๊อก New CSS Style ให้ทำการตั้งชื่อ Style ในที่นี้ขอตั้งชื่อว่า line เพราะจะทำ Style ที่เป็นเส้น (จริง ๆ แล้วก็ตั้งชื่อให้สื่อความหมาย เพราะสร้างแล้วภายหลังเราต้องเรียกใช้งาน ยังไงก็ตั้งให้ตัวเองจำได้ละกันค่ะ อิอิ) จากนั้นก็กด OK ตามตำแหน่งที่ 2

เมื่อกด OK แล้วก็จะขึ้นไดอะล็อกบ๊อก CSS Style Definition .line in style.css (จะบันทึกลงในไฟล์ Style ที่เราเคยสร้างไว้) ตามภาพตำแหน่งที่ 3

จากนั้นให้เราเลือก Category เป็น Border แล้วกำหนดรายละเอียดของ Border โดยในที่นี้ Webmaster จะสร้างเส้นสองเส้นให้เป็นเส้นขอบบนและเส้นขอบล่าง โดยกำหนดลักษณะเส้นแบบ Solid ความหนาของเส้น 1 pixels แล้วก็กำหนดสีเส้นเป็น #cccccc จากนั้นเมื่อกำหนดเสร็จแล้วก็กดปุ่ม OK

แค่นี้ก็เป็นสร้าง Style ชื่อ line ไว้ในไฟล์ style.css เรียบร้อยแล้ว

เอาละมาดูวิธีเอาไปใช้งานกัน จริง ๆ แล้วเราสร้างไฟล์ใหม่ใน Dreamweaver แล้วคลิกที่ Stye ที่ชื่อชื่อ line ก็จะปรากฏเส้นขึ้นมาแล้ว แต่จริง ๆ แล้ว Webmaster กะจะสร้าง Style ชื่อ line นี้ขึ้นมาเพื่อทำเส้นของ Menu ซึ่ง Webmaster จะสร้าง Table ขึ้นมาแล้วใส่ Style ตัวนี้เข้าไปใน Cell ของ Table เพื่อที่จะได้พิมพ์หัวข้อเมนูลงไปได้ ตามภาพที่ 3 แล้วเมื่อลองทดสอบผลของการใส่ Style ก็จะได้ผลลัพธ์ตามภาพสุดท้ายค่ะ

จริง ๆ แล้วในการสร้าง Style แต่ละอันขึ้นมา เราจะต้องมีไอเดียร์อยู่ก่อนแล้ว ว่าจะกำหนด Style นั้น ๆ ขึ้นมาเพื่อที่จะเอาไปใช้ทำอะไร แล้วจึงสร้าง Style แต่ละอันขึ้นมา

และในส่วนของ CSS Style นี้เราก็มีให้กำหนดอีกตั้งหลาย ๆ แบบ เพื่อน ๆ ลองเล่นดูนะค่ะ Webmaster ก็เลยลอง ๆ ใส่แบบมั่ว ๆ ไปแล้วก็จะได้มา Style แบบต่าง ๆ มา แบบว่า Webmaster เป็นพวกมือซนอย่างแรง แล้วก็เพราะความมือซนนี่ละ ได้เจออะำไรดี ๆ เยอะแยะเลย ขอจบบทความนี้แค่เพียงเท่านี้ก่อนนะค่ะ

เออ… ลืมไปเลย ลองเปลี่ยน Style จาก Solid เป็น Dot ดูนะค่ะ แค่นี้ก็ได้เส้นแบบ Dot แล้วค่ะ