ทำ CSS Style Sheet ง่าย ๆ ใน Dreamwaver

CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นนมาตราฐานนึงในการกำหนดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ CSS ช่วยเราได้อย่างมากในการออกแบบหรือจัดการกับปัญหาบางอย่างที่ HTML โดยปรกติไม่สามารถทำได้ หรือทำได้ไม่ดีเท่าที่ควร เช่น การกำหนดขนาด Font ให้ได้ขนาดตามที่เราต้องการ หรือการใส่สีสรรให้กับช่องกรอกข้อมูลบนหน้าเว็บ และอื่น ๆ ในบทเรียนนี้เราจะมาเริ่มรู้จักกับการใช้งาน CSS กับโปรแกรม Dreamweaver เบื้องต้นกันสักนิด สำหรับเทคนิควิธีการใช้งาน CSS ต่าง ๆ คุณอาจจะหาอ่านได้จากหน้า Tricks ของเว็บไซต์นี้

ข้อดีสำคัญของ CSS

1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
5. ง่ายในการเรียกดู Source
6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ

การใช้งาน CSS Styles Panel เบื้องต้น
1. การเรียกใช้งาน CSS Styles Panel
สำหรับโปรแกรม Dreamweaver เราสามารถเรียกใช้งานหน้าต่าง CSS Styles ได้จาก Main menu -> Window -> CSS Styles หรือหากเป้นเวอร์ชั่น MX2004 คุณสามารถเรียกใช้งานได้จาก Panel Group ทางขวามือของโปรแกรม (ตามค่าเริ่มต้นของโปรแกรม) หน้าตาของ CSS Styles Panel ก็จะได้ดังรูป

2. วิธีการสร้าง CSS Style Sheet ใหม่
เราสามารถสร้าง CSS ขึ้นมาใหม่ได้โดยไปที่หน้าต่าง CSS Styles จากนั้นให้ทำการกดไปที่ Icon ที่มีเครื่องหมายบวก(+) หรือเราเรียก icon นี้ว่า New CSS Styles จะเห็นได้ตามภาพ เมื่อทำการกดไปแล้ว โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เราทำการตั้งชื่อหรือเลือก TAG ของ HTML มาใช้ในการกำหนดค่า ดังรูป

ที่หน้าต่าง New CSS Style นี้จะมีช่องให้เราตั้งชื่อหรือเลือกรูปแบบของ CSS ได้ ดังนี้

• Selector : เป็นการกำหนดชื่อของ CSS ที่เราต้องการ และที่ช่องนี้จะทำงานสัมพันธ์กับ Type ด้านล่าง หากเราเลือก Type เป็น Redifine HTML TAG ที่ช่อง Selector จะมี List ของ TAG HTML ให้เราเลือกเพื่อทำการกำหนดคุณสมบัติใหม่ให้กับ TAG HTML


• Tyle : เลือกรูปแบบที่เราจะกำหนดคุณสมบัติ CSS มี 3 ค่าให้เลือก คือ
  Make Custom Style (class) เป็นการสร้าง CSS ขึ้นมาใหม่โดยเราทำการกำหนดชื่อของ Style ขึ้นเอง เราอาจจะเรียก Style นั้นว่า Class ก็ได้
  Redifine HTML Tag เป็นการเลือก TAG ของ HTML ขึ้นมาทำการกำหนดคุณสมบัติใหม่
  Use CSS Selector เป็นการกำหนดคุณสมบัติ CSS ให้กับบางจุดของหน้าเว็้บเพจที่เราต้องการ เช่น จุดที่เป็น Link จุดที่เรากำหนด ID ของ TAG นั้น ๆ ไว้ เป็นต้น ใน MX2004 จะใช้ชื่อ option นี้ว่า Advanced ดังรูป

3. วิธีการใช้งาน CSS
วิธีการใช้ CSS โดยการลากทึบที่ตัวอักษรแล้วคลิกขวาเลือก CSS Styles แล้วเลือก Style
ตามชื่อที่เราได้ตั้งไว้ แค่นี้เราก็จะได้ Style ในแบบของเรา