การใช้งาน CSS Style กำหนดรูปแบบตัวอักษร

การทำเว็บเพจนั้นบางครั้ง เราจะต้องมีการทำงานหลาย ๆ อย่าง และบางครั้งก็ต้องทำซ้ำ ๆ หลาย ๆ ครั้ง ซึ่งจะทำให้เกิดความไม่สะดวก และทำให้เสียเวลาได้ ซึ่งโปรแกรม Macromedia Dreamweaver ก็เตรียมเครื่องมือที่เรียกว่า CSS Style มาช่วยแก้ปัญหานี้ จะมีวิธีแก้ปัญหาอย่างไร ดูได้ที่บทความนี้ค่ะ

จากปัญหาข้างต้นที่ได้กล่าวไป เพื่อน ๆ บางคนอาจจะยังไม่เห็นภาพชัดเจน ว่าอะไรบ้างที่เราต้องทำหลาย ๆ อย่าง และต้องทำซ้ำ ๆ หนึ่งในนั้นที่ Webmaster จะขอยกตัวอย่างให้เห็นกันชัด ๆ ก็คือ เกี่ยวกับการพิมพ์ข้อความ

การพิมพ์ข้อความนั้นเราต้องปรับแต่งคุณสมบัติของข้อความอยู่หลาย ๆ อย่างด้วยกัน ไม่ว่าจะเป็นการปรับเลือกฟ้อนต์ เลือกขนาดของข้อความ เลือกสีของข้อความ เห็นไหมละค่ะ เราต้องปรับค่าตั้ง 3 ครั้ง ถึงจะได้ลักษณะรูปแบบข้อความที่เราต้องการ แล้วเมื่อเราต้องพิมพ์ข้อความหลาย ๆ ข้อความ หลาย ๆ ตำแหน่ง เราก็ต้องมาทำขั้นตอนที่กล่าวมาซ้ำ ๆ อีก

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

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

เอาละค่ะ เรามาเริ่มสร้าง CSS Style เพื่อกำหนดรูปแบบตัวอักษรและข้อความกันเลยค่ะ

ขั้นตอนแรก ให้คุณคลิกที่ปุ่ม สร้างสไตล์ใหม่ ซึ่งอยู่บริเวณด้านล่าง (ตำแหน่ง สร้างสไตล์ใหม่ ตามรูปที่ 1 ค่ะ)

ขั้นตอนที่ 2 ถ้าทำขั้นตอนแรกถูกต้องคุณก็จะเจอไดอะล็อกบ็อกซ์ New CSS Style ตามภาพที่ 2 ค่ะ ให้คุณทำการตั้งชื่อของ Style ที่ช่อง Name ต้องตั้งชื่อให้สื่อความหมายนะค่ะ เพราะชื่อนี้จะปรากฏให้เราเลือกเมื่อต้องการใช้งาน ตั้งให้สื่อความหมายจะได้จำได้ (บางครั้งเราก็สร้าง Style หลาย ๆ ตัวค่ะ สร้างเยอะถ้าชื่อไม่สื่อความหมายเดียวจะลืมเอาได้)

Webmaster ตั้งชื่อ Style ว่า “tahoma_12” เพราะจะสร้างรูปแบบฟอนต์ที่ใช้ฟอนต์แบบ tahoma และจะกำหนดขนาดฟอนต์เท่ากับ 12 pixels

เมื่อตั้งชื่อและกำหนดรายละเอียดตามภาพแล้ว กด OK ค่ะ

ขั้นตอนที่ 3 จะปรากฏไดอะล็อกบ็อกซ์ เพื่อให้ทำการเซฟ Style Sheets ให้ทำการตั้งชื่อ Style Sheets จากนั้นเซฟไว้ในโฟลเดอร์ Site งานที่กำหนดไว้สำหรับเก็บข้อมูลเว็บไซต์ที่เราจะสร้างขึ้น

ขั้นตอนที่ 4 เมื่อเราได้เซฟ Style Sheets เรียบร้อยแล้วจะมีไดอะล็อกบ็อกซ์ปรากฏขึ้น เพื่อให้เรากำหนดลักษณะของ Style Sheets ในที่นี้เราจะกำหนดลักษณะของตัวอักษรและข้อความ ดังนั้นให้เลือก Type

สังเกตบริเวณทางขวามือ จะมีลักษณะของ Type ให้เรากำหนด ซึ่ง Webmaster ก็ได้กำหนดฟอนต์แบบ tahoma และกำหนดขนาดฟอนต์เท่ากับ 12 pixels และกำหนดสีของฟอนต์ เป็น รหัสสี #333333 และเลือกเป็นแบบตัวอักษรแบบธรรมดา เมื่อกำหนดค่าต่าง ๆ เรียบร้อยแล้วก็กดปุ่ม OK

เพียงแค่นี้เราก็สร้าง Style Sheets ได้แล้วค่ะ สังเกตที่บริเวณ CSS Style จะปรากฏชื่อ Style Sheets ที่เราสร้างขึ้น พร้อมทั้งรายละเอียดลักษณะของสไตล์ และที่บริเวณ File Panel ก็จะปรากฏไฟล์ CSS Style ที่เราได้สร้างขึ้นปรากฏให้เห็นค่ะ

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