การจัดรูปแบบเว็บเพจด้วย Cascading style sheet CSS
จากเนื้อหาของบทที่ผ่านๆ มาจะเห็นว่าขั้นตอนบางอย่างในการสร้างเว็บเพจนั้นใช้เวลามาก นั่นก็ คือ การจัดรูปแบบของบองค์ประกอบต่างๆ เช่น ฟอนด์ ขนาด และสีของข้อความ , รูปแบบหัวข้อบุลเล็ต , ลักษณะขอบ และสีพื้นของตาราง เป็นต้น ซึ่งถ้ามีเว็บเพจจำนวนมากคุณก็ต้องทำแบบเดียวกันซ้ำๆ บนทุกหน้า นอกจากนี้การเปลี่ยนแปลงในภายหลังก็ทำได้ยาก ดังนั้นคุณจึงควรนำสไตล์ CSS มาใช้ เพื่อช่วยให้การจัดรูปแบบเนื้อหาของเว็บเพจทำได้สะดวก และมีประสิทธิภาพมากขึ้น
ใน Dreamweaver เมื่อคุณกำหนดคุณสมบัติของเว็บเพจใน Page Properties และจัดรูปแบบข้อความด้วยออปชั่นบนพาเนล Properties นั้น สไตล์ CSS จะถูกนำมาใช้แทนคำสั่ง HTML โดยอัตโนมัติ แต่สาหรับเนื้อหาอื่นๆ หากต้องการใช้ CSS มักจะต้องสร้าง และกำหนดสไตล์ให้กับเนื้อหาเหล่านั้นเอง
การใช้จัดรูปแบบเว็บเพจได้เกือบทุกส่วน
สามารถใช้สไตล์ CSS เพื่อจัดรูปแบบองค์ประกอบบนเว็บเพจได้เกือบทุกส่วน นอกจากนี้สไตล์หนึ่งๆ ยังนำไปใช้กับเนื้อหาได้หลายประเภท เช่น สไตล์ที่กำหนดสีพื้น หรือภาพฉากหลังอาจจะใช้กับตาราง , ข้อความ , AP Element หรือเว็บเพจทั้งหน้าก็ได้ จัดรูปแบบได้อย่างละเอียด และเที่ยงตรงตามที่ออกแบบไว้ CSS สามารถกำหนดตำแน่ง และขนาดของเนื้อหาต่างๆ บนเว็บเพจได้อย่างละเอียด และยังสามารถเลือกใช้หน่ายวัดใดๆ ก็ได้ เช่น mm , cm , in , point และ pixel ทำให้ได้เว็บเพจที่มีเลย์เอาท์เที่ยงตรงตามที่ออกแบบไว้ สำหรับกรณีของตัวอักษร เมื่อคุณกำหนดขนาดด้วย CSS ข้อความที่ได้จะมีขนาดคงที่บนเว็บเพจ โดยไม่ขึ้นกับการตั้งค่าขนาดตัวอักษรบนบราวเวอร์ของผู้ชม ทำให้ลดโอกาสผิดเพี้ยนของเลย์เอาท์ลงไป
การช่วยให้จัดรูปแบบเว็บเพจได้ง่าย และแก้ไขสะดวก
สไตล์ CSS เป็นการรวบรวมคำสั่งสำหรับจัดรูปแบบทั้งหมดไว้ที่เดียวกัน แทนที่จะกระจายไปตามแท็กต่างๆ ช่วยให้คุณจัดรูปแบบเว็บเพจทั้งหน้าได้ง่าย และเมื่อต้องการเปลี่ยนแปลงก็เพียงแต่แก้ไขที่สไตล์เท่านั้น
การควบคุมรูปแบบได้ทั้งเว็บไซต์จากจุดเดียว
นอกจากการสร้างสไตล์ เพื่อใช้ภายในเว็บเพจหน้าใดหน้าหนึ่งแล้ว คุณยังสามารถนำสไตล์ไปใช้กับเว็บเพจหลายๆ หน้า หรือทั้งเว็บไซต์ได้ โดยบันทึกสไตล์เหล่านั้นเป็นไฟล์นามสกุล .css แล้วจึงดึงไฟล์นี้ไปใช้บนเว็บเพจที่ต้องการคุณสมบัตินี้ช่วยให้คุณสร้างเว็บเพจที่มีรูปเหมือนกันตลอดทั้งเว็บไซต์ได้ง่าย และเมื่อจาเป็นต้องเปลี่ยนแปลงคุณลักษณะใดๆ ก็แก้ไขที่ไฟล์ .css เพียงไฟล์เดียวเท่านั้น การจัดรูปแบบบนเว็บเพจทั้งหมดจะเปลี่ยนไปโดยอัตโนมัติ
การสืบทอด และจัดลำดับความสำคัญของสไตล์ (Cascading)
CSS ยอมให้มีการใช้สไตล์ได้หลายระดับ โดยแต่ละระดับจะสืบทอดคุณสมบัติเดิมลงมาเป็นชั้นๆ แต่ในกรณีที่เกิดความขัดแย้งกันก็จะยึดตามระดับของสไตล์เหล่านั้น
ลักษณะการใช้งานสไตล์ CSS แบ่งออกเป็น 3 แบบคือ
- External Style Sheet คือ การนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ
- Embedded Style Sheet คือ การใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้นเอง
- Inline Style คือ การใช้คำสั่ง CSS กำกับไว้กับแท็ก HTML โดยตรงบนเว็บเพจหนี่งๆ อาจมีการใช้สไตล์ทั้ง 3 แบบก็ได้ โดยคุณสมบัติจากสไตล์ทุกแบบจะถูกนำมาผสมกัน แต่ถ้าเกิดความขัดแย้งก็จะดูตามระดับความสำคัญ คือ Inline style มีระดับสูงสุด รองลงไปคือ Embedded sytle sheet และ External style sheet นอกจากนี้ถ้ามีการใช้ไฟล์ .css หลายไฟล์ก็จะดูตามลำดับที่ไฟล์นั้นถูกรียกเข้ามาบนเว็บเพจ คุณสมบัติเช่นนี้จะทำให้คุณสามารถใช้ไฟล์ .css เพื่อควบคุมทั้งเว็บไซต์ แต่ในขณะเดียวกันก็ยังดัดแปลงรูปแบบบางอย่างให้มีผลเฉพาะบนเว็บเพจใดเว็บเพจหนึ่ง หรือจุดใดจุดหนึ่งที่ต้องการได้
ใน Dreamweaver จะสนับสนุนการใช้งาน External stynal style sheet และ Embedded style sheet เป็นหลัก ส่วน Inline style นั้น หากต้องการใช้คุณจะต้องแก้ไขแท็กเอง
รูปแบบของคำสั่ง CSS
คำสั่ง CSS ที่ใช้กำหนดคุณสมบัติของสไตล์จะประกอบด้วย 2 ส่วน คือ Selector และ Declaration
- Selector คือ ชื่อสไตล์
- Declaration เป็นส่วนประกอบไปด้วยคุณสมบัติ (Property) และค่าของคุณสมบัตินั้น (Value)
อย่างไรก็ตาม ในการใช้งาน Dreamweaver คุณไม่จำเป็นต้องเขียนชุดคำสั่งเหล่านี้เอง โดยเพียงแต่กำหนดคุณสมบัติของสไตล์บนพาเนล Properties หรือกำหนดสไตล์ด้วยพาเนล CSS Styles โปรแกรมก็จะสร้างชุดคำสั่งให้อัตโนมัติ
สไตล์ CSS ที่คุณสามารถใช้ใน Dreamweaver แบ่งออกเป็น 4 ประเภท คือ Class style , ID style,Tag style และ Compound style ซึ่งมีคุณสมบัติที่แตกต่างกันดังนี้
Class Style เป็นสไตล์ที่สามารถนำไปใช้ร่วมกับแท็กใดๆ ก็ได้ เพื่อทำให้แท็กนั้นมีคุณสมบัติตามที่กำหนดไว้ โดยจะไม่มีผลต่อแท็กเดียวกันที่อยู่ในส่วนอื่นๆ วิธีใช้สไตล์ประเภทนี้จะใช้แอดทริบิวต์ class ตัวอย่างเช่น
- ใช้กับแท็ก <p> เพื่อกำหนดคุณสมบัติของข้อความทั้งย่อหน้า เช่น ถ้าคาสั่งปกติเป็นดังนี้ <p> ลงทะเบียนสมาชิก </p>
เมื่อคุณกำหนด class style ที่ชื่อ page_body ให้กับย่อหน้าข้างต้น คำสั่งจะเปลี่ยนเป็น <p class=”page_body”> ลงทะเบียน </p>
- ในกรณีที่คุณใช้สไตล์กับข้อความเพียงบางส่วนของย่อหน้า โปรแกรมจะสร้างแท็ก <span> ขึ้นมารองรับ เพื่อกำหนดแอตทริบิวต์class เช่น ถ้าคาสั่งปกติเป็น <p> ลงทะเบียนสมาชิก </p> เมื่อคุณกำหนด Class style ให้กับข้อความ “ลงทะเบียน” คำสั่งจะเปลี่ยนเป็น <p> <span class=”page_body”> ลงทะเบียน </span> สมาชิก </p>
ID Style คุณจะสามารถใช้สไตล์นี้ร่วมกับออบเจ็คใดๆ ก็ได้ โดยจะต้องระบุชื่อสไตล์ด้วยแอดทริบิวต์ ID และจะต้องไม่มีออบเจ็คอื่นที่มีชื่อซ้ำกันอีกบนเว็บเพจนั้น ชื่อของสไตล์จะมีเครื่องหมาย # นำหน้า
Tag Style เป็นการใช้คำสั่ง CSS เพื่อดัดแปลงคุณสมบัติของแท็ก HTML โดยตรง ซึ่งจะทำให้มีผลต่อทุกๆ องค์ประกอบบนเว็บเพจที่ใช้แท็กนี้ เช่น ถ้าต้องการให้ข้อความหัวเรื่อง -1 (Heading 1) เป็นสีแดงก็ดัดแปลงแท็ก <h1> ข้อความหัวเรื่อง -1 ทุกๆ จุดบนเว็บเพจจะมีคุณสมบัติตามนี้ทันที
Com pound Style กรณีที่ต้องการดัดแปลงคุณสมบัติของแท็กบางชุดที่ใช้ร่วมกัน คุณก็ตั้งชื่อสไตล์ให้ตรงกับชุดแท็กนั้น เช่น ถ้าจะให้ข้อความหัวเรื่อง -1 (แท็ก<>h1>) ที่อยู่ในเซลของตาราง (แท็ก<td>) มีคุณสมบัติเฉพาะ ก็สร้างสไตล์ชื่อ td h1 แล้วกำหนดคุณสมบัติตามต้องการ ผลก็ คือ หัวเรื่อง -1 ที่อยู่ในตารางจะมีรูปแบบตามที่กำหนด และจะแตกต่างจากหัวเรื่อง 1 ที่อยู่นอกตาราง
พาเนล CSS Styles
พาเนล CSS Styles เป็นเครื่องมือหลักที่ใช้จัดการกับสไตล์ CSS เช่น สร้างสไตล์ใหม่ และแสดงรายชื่อ / คุณสมบัติของสไตล์ วิธีเปิด / ปิดพาเนลนี้ทาได้ โดยเลือกคำสั่ง window > css styles แสดงรายชื่อสไตล์ทั้งหมด แสดงคุณสมบัติของออบเจ็คภายในเว็บเพจ ที่กำลังเลือกบนเว็บเพจ
แก้ไขสไตล์ที่กำลังเลือก เลือกวิธีแสดงคุณสมบัติ ลบสไตล์ที่กำลังเลือก นำเข้าสไตล์จากไฟล์ .css สร้างสไตล์ใหม่
มุมมองในการแสดงคุณสมบัติ
เมื่อคุณกำหนดคุณสมบัติของเว็บเพจใน Page Properties หรือจัดรูปแบบข้อความด้วยพาเนล Properties โดยเลือกแบบ CSS นั้น โปรแกรมจะสร้างสไตล์ CSS สำหรับคุณสมบัติ หรือรูปแบบดังกล่าวให้อัตโนมัติ โดยสไตล์เหล่านี้จะถูกเก็บไว้ในเว็บเพจ (คือเป็น Embedded style sheet) ซึ่งจะดูรายชื่อทั้งหมดได้จากพาเนล CSS Styles
เทคนิคการตั้งชื่อสไตล์ประเภท Compound
สามารถทำได้หลายแบบขึ้นกับผลลัพธ์ที่ต้องการในที่นี้จะขอแนะนาบางแบบที่น่าสนใน ส่วนรายละเอียดที่สมบูรณ์นั้นค่อนข้างซับซ้อนถ้าใช้ชื่อแท็ก 2 ตัวขึ้นไปมาเรียงกัน สไตล์นี้จะมีผลต่อแท็กตัวหลังสุดเมื่อถูกครอบโดยแท็กที่อยู่ข้างหน้า เช่น สไตล์ชื่อ td h1 จะมีผลต่อ h1 (หัวเรื่อง -1) ที่อยู่ภายใน td (เซลของตาราง)
- ถ้าใช้ชื่อแท็กตามหลังชื่อ Class style สไตล์นี้จะมีผลต่อแท็กตัวหลัง เมื่อถูกครอบ โดยแท็กอื่นซึ่งใช้สไตล์ตัวข้างหน้า เช่น สไตล์ชื่อ .menulist a : link จะมีผลต่อลิงค์สถานะปกติที่อยู่ภายในตาราง (หรือภายในแท็กใดๆ ที่กำหนดกรอบของเนื้อหาได้ เช่น div) ที่ใช้สไตล์ .menulist
- ถ้าใช้ชื่อ Class style 2 ตัวขึ้นไปเรียงกัน สไตล์นี้จะมีผลต่อแท็กที่ใช้สไตล์ตัวหลังสุด เมื่อถูกครอบ โดยแท็กอื่น ซึ่งใช้สไตล์ตัวข้างหน้า เช่น สไตล์ .content .mytype จะมีผลต่อแท็กที่ใช้สไตล์ .mytype ซึ่งอยู่ภายในแท็กที่ใช้สไตล์ .content
- ถ้าใช้ชื่อที่ขึ้นต้นด้วย # เช่น #mystyle จะได้สไตล์ที่คล้ายกับ Class style แต่การเรียกใช้จะต้องทำผ่านพาเนล CSS Styles เท่านั้น โดยโปรแกรมจะใช้แอตทริบิวต์ ID ในการกำหนดสไตล์
คุณสมบัติของสไตล์ CSS เนื่องจากคุณสมบัติต่างๆ ของสไตล์ CSS มีเป็นจำนวนมาก ดังนั้น ในไดอะล็อกบ็อกซ์ CSS Rule definition จึงแบ่งย่อยออกเป็น 8 หมวด ดังนี้
หมวด Type สำหรับกำหนดคุณสมบัติทั่วไปของข้อความ เช่น ฟอนต์ , ขนาด , สี และน้ำหนักของตัวอักษร เป็นต้น
คุณสมบัติ
|
คำอธิบาย
|
Font - family
| ชุดฟอนต์ตัวอักษร สร้างชุดฟอนต์ตัวอักษร |
Font - size
| ขนาดตัวอักษร กำหนดขนาดตัวอักษร) |
Font - weight
| น้ำหนัก หรือความหนาของตัวอักษร - 100 - 900 กำหนดเป็นค่าน้ำหนัก ถ้าค่ามากก็ คือตัวอักษรหนามาก - Normal ให้ตัวอักษรมีน้ำหนักปกติ (เทียบได้กับ 400) - Bold ให้ตัวอักษรมีน้ำหนักมากกว่าตัวอักษรปกติ (เทียบได้กับ 700) - Bolder , lighter ให้ตัวอักษรมีน้ำหนักมาก หรือน้อยกว่าตัวอักษรปกติ |
Font - style
| ลักษณะตัวอักษรเป็นปกติ (normal) , ตัวเอียง (italic) หรือตัวเอียงแบบ oblique |
Font - variant
| ลักษณะตัวอักษรเป็นปกติ(normal)หรือเป็นตัวพิพม์ใหญ่ที่มีขนาดเล็ก (small-caps) |
Line - height
| ความสูงของบรรทัด (ระยะห่างระหว่างบรรทัดของข้อความในย่อหน้าเดียวกัน) |
Text - transform
| วิธีแปลงตัวอักษรระหว่างตัวพิมพ์ใหญ่ และพิมพ์เล็ก (สำหรับอักษรใหญ่) |
Text - decoration
| ลักษณะพิเศษของตัวอักษร ซึ่งประกอบดัวย underline (มีเส้นใต้) , over line (มีเส้นด้านบน) , line - through (มีเส้นพาดกลาง) , blink (เป็นตัวกระพริบ) และ none (ไม่มีลักษณะพิเศษใดๆ ) |
Color
| สีของตัวอักษร |
ตารางที่ 5 หมวด Type
ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบข้อความ
สมมติว่าต้องการสร้างสไตล์ชื่อ .Top 10 Country โดยใช้ชุดฟอนต์ Tahoma , Geneva , Sansserif และให้ตัวอักษรมีขนาด 18 พิกเซล , เป็นตัวหนา , สีแดง และขีดเส้นใต้ข้อความด้วย
หมวด Background สำหรับกำหนดสีพื้น และภาพฉากหลัง ซึ่งสามารถนาไปใช้กับองค์ประกอบใดๆ ก็ได้ ไม่ว่าจะเป็นเว็บเพจทั้งหน้า , ย่อหน้าข้อความ , ตาราง ฯลฯ เช่น ถ้ากำหนดสีพื้นเป็นสีเหลือง เมื่อใช้สไตล์นี้กับเว็บเพจ (แท็ก <body> ) พื้นเว็บเพจจะเป็นสีเหลือง แต่ถ้าใช้กับตารางพื้นของตารางก็จะเป็นสีเหลือง
ภาพที่ 8 หมวด Background
คุณสมบัติ
|
คำอธิบาย
|
Background - color
| กำหนดสีพื้น |
Background - image
| เลือกภาพฉากหลัง |
Background - repeat
| เลือกวิธีเรียงภาพซ้ำ (กรณีภาพฉากหลังเล็กกว่าพื้นที่ที่ใช้แสดง) - No-repeat ไม่ต้องเรียงภาพซ้ำ (แสดงเพียงภาพเดียวเสมอ) - Repeat เรียงภาพซ้ำทั้งแนวตั้งและแนวนอน - Repeat - X เรียงภาพซ้ำในแนวนอนเพียงแถวเดียว - Repeat - y เรียงภาพซ้ำในแนวตั้งเพียงคอลัมน์เดียว |
Background -attachment
| กำหนดให้ภาพฉากหลังเลื่อนตามการเลื่อนหน้าจอของผู้ชม - Fixed ให้ภาพฉากหลังอยู่คงที่เสมอ - Scroll ให้ภาพฉากหลังเลื่อนไปพร้อมกับเนื้อหาอื่นๆ |
Background - position (X)
| ตำแหน่งเริ่มต้นของการเรียงภาพในแนวนอน จะให้เริ่มจากด้านซ้าย (left) ตรงกลาง (center) ด้านขวา (right) |
Background - position (Y)
| ตำแหน่งเริ่มต้นของการเรียงภาพในแนวตั้ง จะให้เริ่มจากด้านบน (top) ตรงกลาง (center) ด้านล่าง (bottom) หรือระบุตำแหน่ง |
ตารางที่ 6 หมวด Background
หมวด Block สำหรับกำหนดคุณสมบัติเกี่ยวกับระยะห่างระหว่างตัวอักษร หรือคำแต่ละคำ รวมทั้งลักษณะการจัดย่อหน้าของข้อความ
ภาพที่ 9 หมวด Block
คุณสมบัติ
|
คำอธิบาย
|
Work - spacing
| ระยะห่างระหว่างคำ |
Letter - spacing
| ระยะห่างตัวอักษรแต่ละตัวที่เพิ่ม/ลดจากค่าปกติ (ใช้ค่าลบได้) |
Vertical - align
| วิธีจัดตำแหน่งในแนวตั้งของออบเจ็ค เมื่อเทียบกับองค์ประกอบหลักที่มันเกาะอยู่ เช่น หากรูปภาพถูกวางไว้บนย่อหน้าของข้อความ เมื่อคุณใช้สไตล์กับรูปภาพ คุณสมบัตินี้จะกำหนดวิธีจัดตำแหน่งภาพ เมื่อเทียบกับข้อความในย่อหน้านั้น |
Text - align
| การจัดตำแหน่งข้อความในย่อหน้าให้อยู่ชิดซ้าย (left) กึ่งกลาง (center) ชิดขวา (right) หรือให้ตรงกันทั้งด้านซ้าย และขวา (justify) |
Text - indent
| การจัดเยื้องข้อความบรรทัดแรกของย่อหน้า (ค่าบวก คือเยื้องไปทางขวา ค่าลบ คือเยื้องไปทางซ้าย) |
White - space
| วิธีจัดการกับช่องว่าง หรือการเว้นวรรคภายในข้อความ และการปัดคำขึ้นบรรทัดใหม่ |
ตารางที่ 7 หมวด Block
ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบย่อหน้าข้อความ
สมมติว่าต้องการสร้างสไตล์ชื่อ .txtparagraph โดยให้ตัวอักษรมีระยะห่างเพิ่มจากปกติ 1 พิกเซล , ให้ตำแหน่งอยู่กึ่งกลางเซลในแนวตั้ง และจัดข้อความชิดซ้าย
หมวด Box สำหรับกำหนดขนาดของออบเจ็ค และระยะห่างระหว่างออบเจ็คกับเนี้อหาอื่นๆ รวมทั้งวิธีจัดตำแหน่งออบเจ็คเทียบกับเนื้อหาปกติ
ภาพที่ 10 หมวด Box
คุณสมบัติ
|
คำอธิบาย
|
Width / height
| ความกว้าง และความสูงของออบเจ็ค เช่น ถ้าใช้สไตล์นี้กับรูปภาพ ภาพก็จะมีขนาดกว้าง และสูงตามค่านี้ (โดยไม่ขึ้นกับค่าที่กำหนดบนพาเนลProperties) |
Float
| ตำแหน่งของออบเจ็ค เมื่อเทียบกับเนื้อหาปกติ เช่น รูปภาพที่วางไว้บนย่อหน้าข้อความคุณสามารถกำหนดให้มันไปอยู่ชิดขอบด้านซ้าย หรือขวา แล้วให้ข้อความโปรยตัวลงมาตามขอบด้านที่ว่าง (คล้ายการจัดตำแหน่งภาพเทียบกับข้อความ) - Left ให้ออบเจ็คไปอยู่ชิดขอบด้านซ้าย ส่วนเนื้อหาปกติจะโปรยตัวลงมาทางขวา - Right ให้ออบเจ็คไปอยู่ชิดด้านขวา ส่วนเนื้อหาปกติจะโปรยตัวลงมาทางซ้าย - None ไม่มีการเปลี่ยนตำแหน่งออบเจ็ค |
Clear
| ใช้กำหนดคุณสมบัติของเนื้อหาที่ไม่ต้องการให้มีออบเจ็คใดๆ มาวางอยู่ด้านข้าง ซึ่งถ้ามีก็ให้เนื้อหานี้ถูกปัดลงไปอยู่ใต้ออบเจ็คทันที (คุณสมบัตินี้จะไม่มีผลกับย่อหน้าที่คุณวางออบเจ็คไว้ และไม่สามารถใช่ร่วมกับออปชั่น Float) |
padding
| ระยะห่างระหว่างเนื้อหาจริงของออบเจ็คกับขอบเขตด้านบน (top) ด้านล่าง (bottom) ด้านซ้าย (left) และด้านขวา (right) ไม่ว่าจะถูกกำหนดให้แสดงเส้นกรอบ หรือไม่ |
margin
| ระยะห่างระหว่างขอบเขตของออบเจ็คกับเนื้อหาอื่น โดยรอบ |
Width / height
| ความกว้าง และความสูงของออบเจ็ค เช่น ถ้าใช้สไตล์นี้กับรูปภาพ ภาพก็จะมีขนาดกว้าง และสูงตามค่านี้ (โดยไม่ขึ้นกับค่าที่กำหนดบนพาเนลProperties) |
ตารางที่ 8 หมวด Box
ตัวอย่าง : การสร้างสไตล์เพื่อกำหนดระยะห่างระหว่างออบเจ็ค
สมมติว่าต้องการสร้างสไตล์ชื่อ .txtbox โดยให้จัดออบเจ็คชิดด้านขวา มีระยะระหว่างออบเจ็คกับขอบ 15 พิกเซลทุกด้าน และระยะระหว่างขอบออบเจ็คกับเนื้อหาอื่นๆ 15 , 0 , 15 และ 10 พิกเซลตามลำดับ
หมวด Border สำหรับกำหนดคุณสมบัติเกี่ยวกับรูปแบบความหนา และสีของเส้นกรอบ โดยแต่ละด้านอาจมีลักษณะที่แตกต่างกันได้ คุณสมบัตินี้สามารถใช้ได้กับออบเจ็คต่างๆ ไม่ว่าจะเป็นภาพกราฟิก , ตาราง หรือเซล , เลเยอร์ และข้อความ เป็นต้น
หมวด List สำหรับกำหนดคุณสมบัติของรายการแบบมีหัวข้อ (list) โดยสามารถเลือกใช้เลขลำดับ หรือสัญลักษณ์หน้าหัวข้อแบบมาตรฐาน หรือจะให้รูปภาพแทนก็ได้
ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบรายการแบบมีหัวข้อ
สมมติว่าต้องการสร้างสไตล์ชื่อ .bullet โดยใช้รูปภาพ arrow_whitebg.gif มาแสดงเป็นสัญลักษณ์หน้าหัวข้อ และกำหนดตำแหน่งแบบ inside
หมวด Positioning สำหรับแยกออบเจ็คออกจากเนื้อหาปกติของเว็บเพจ เพื่อให้สามารถกำหนดตำแหน่ง , ขนาด , การซ่อน/แสดง และอื่นๆ ได้อย่างอิสระ หรือสรุปก็ คือออบเจ็คจะมีคุณสมบัติเหมือน AP Element นั่นเอง
ตัวอย่าง : การสร้างสไตล์เพื่อแยกออบเจ็คจากเว็บเพจ
สมมติว่าต้องการสร้างสไตล์ชื่อ .photo_position เพื่อแยกรูปภาพออกจากเนื้อหาปกติ โดยให้มีขนาด 215 × 331 พิกเซล และวางไว้ที่ตาแหน่ง 40 พิกเซล จากขอบบน และ 20 พิกเซล จากขอบขวาของเว็บเพจ หมวด Extensions สำหรับกำหนดคุณสมบัติอื่นๆ ซึ่งจะใช้ได้กับบราวเซอร์เพียงบางตัว ดังนั้นจึงควรทดสอบก่อนนำไปใช้งาน
ตัวอย่าง : การสร้างสไตล์เพื่อกำหนดเอฟเฟ็คต์พิเศษให้รูปภาพ
สมมติว่าต้องการสร้างสไตล์ชื่อ .photo_effect เพื่อให้เมาส์กลายเป็นรูป + (crosshair) และให้ภาพพลิกกลับด้านในแนวนอน
การแก้ไขปรับแต่งสไตล์
คุณสามารถแก้ไขค่าคุณสมบัติเดิม หรือเพิ่มคุณสมบัติใหม่ให้กับสไตล์ได้ ไม่ว่าจะเป็นสไตล์ที่โปรแกรมสร้างให้อัตโนมัติ หรือสไตล์ที่สร้างเอง โดยทำได้หลายวิธี เช่น
- แก้ไขด้วยพาเนล CSS Styles
- ดับเบิลคลิกที่ชื่อสไตล์ แล้วใช้ไดอะล็อกบ็อกซ์ CSS Rule derintion กำหนดคุณสมบัติ
- เหมือนกับตอนสร้างสไตล์แก้ไขคำสั่ง CSS ในมุมมอง Code
เทคนิคการแก้ไขคุณสมบัติของสไตล์
- ค่าประเภทสี จะแสดงเป็นรูปไอคอนซึ่งคุณสามารถคลิก เพื่อเลือกสีจากตารางสี หรือคลิกในช่องทางขวาเพื่อพิมพ์ค่าสีเอง
- ค่าที่เป็นตัวเลือกทั่วๆ ไป เมื่อคลิกแล้วจะปรากฏเมนูสำหรับเลือกค่าที่ต้องการได้
- ค่าที่ให้พิมพ์ตัวเลขเองได้ มักจะมีช่องให้ระบุหน่วยด้วย
- ค่าที่ต้องระบุชื่อไฟล์ จะมีเครื่องมือให้ใช้เลือกไฟล์ได้
- ค่าที่ไม่มีตัวเลือก เป็นค่าที่คุณต้องพิมพ์คำสั่ง CSS แบบย่อเข้าไปเอง
แก้ไขคุณสมบัติของออบเจ็คที่กำลังเลือก
วิธีแก้ไขสไตล์ที่กล่าวมาในหัวข้อก่อน จะได้ผลดีถ้าโครงสร้างของการใช้สไตล์ CSS บนเว็บเพจไม่ซับซ้อนนัก และคุณรู้แน่ชัดว่าคุณสมบัติที่ต้องการแก้ไขนั้นมาจากสไตล์ใด
แต่เมื่อการใช้สไตล์ซับซ้อนมากขึ้น คุณสมบัติของออบเจ็คที่คุณต้องการแก้ไขอาจจะมาจากหลายสไตล์ คือบางอย่างก็มาจากสไตล์ที่คุณกำหนดให้กับออบเจ็คนั้นเอง แต่บางอย่างก็มาจากสไตล์ขององค์ประกอบอื่นๆ ที่ครอบออบเจ็คนั้นอยู่ ซึ่งวิธีง่ายๆ ที่ช่วยให้แก้ไขได้ถูกจุดทำ ดังนี้
ตรวจสอบคุณสมบัติของออบเจ็คด้วยพาเนล CSS Styles
ออบเจ็คบนเว็บเพจอาจจะได้รับรูปแบบมาจากสไตล์ต่างๆ กัน ทำให้บางครั้งคุณสับสนว่าคุณสมบัติที่กำลังมีผลจริงอยู่นั้นมาจากสไตล์ใด และถ้าจะแก้ไขควรแก้ที่จุดใด ด้วยเหตุผลนี้โปรแกรมจึงได้เตรียมเครื่องมือบนพาเนล CSS Styles เพื่อให้คุณมองเห็นความสัมพันธ์ระหว่างออบเจ็คกับสไตล์ทั้งหมดที่มีผลต่อตัวมัน โดยแบ่งพื้นที่เป็น 3 ส่วนดังรูป
ส่วนที่ 1 : แสดงคุณสมบัติทั้งหมดที่มีผลจริงต่อออบเจ็คจะมาได้จาก 2 กรณี คือ
- กรณีที่ 1 คุณสมบัติของสไตล์ที่กำหนดไว้กับออบเจ็คนี้
- กรณีที่ 2 คุณสมบัติของสไตล์ที่กำหนดไว้กับแท็กต่างๆ ที่ครอบออบเจ็คนี้อยู่
ดังนั้นคุณสมบัติที่แสดงในส่วนที่ 1 นี้จึงอาจจะมาจากหลายสไตล์ก็ได้ โดยถ้าสไตล์ต่างๆขัดแย้งกัน คุณสมบัติซึ่งถูกกำหนดทีหลังเท่านั้นที่จะมีผลจริง เช่น ถ้าโครงสร้างสไตล์ของเว็บเพจมีส่วนประกอบดังนี้
- ตัวเว็บเพจถูกกำหนดให้ใช้ฟอนต์ Microsoft Sans Serif ขนาด 12 px
- เซลของตารางถูกกำหนดให้ข้อความเป็นสีน้าเงิน
- ย่อหน้าข้อความที่อยู่ภายในเซลถูกกำหนดให้ใช้ขนาดตัวอักษร 16 px
ส่วนที่ 2 : แสดงคำอธิบาย หรือรายชื่อแท็กที่ครอบออบเจ็ค
ส่วนที่ 3 : แสดงคุณสมบัติทั้งหมดของสไตล์
คุณสมบัติที่แสดงจะแบ่งเป็น 2 กรณี คือ
- กรณีที่ 1 เมื่อคุณคลิกเลือกคุณสมบัติใดจากส่วนที่ 1 ส่วนที่ 3 นี้จะแสดงรายการของคุณสมบัติทั้งหมดที่อยู่ในสไตล์เดียวกัน
- กรณีที่ 2 เมื่อคุณคลิกเลือกชื่อแท็ก หรือชื่อสไตล์จากส่วนที่ 2 ส่วนที่ 3 นี้จะแสดงรายการของคุณสมบัติทั้งหมดที่อยู่ในสไตล์นั้น
คุณสมบัติที่ถูกขีดฆ่า ในส่วนที่ 3 นี้ บางครั้งคุณจะพบว่ามีคุณสมบัติบางรายการที่ถูกขีดฆ่าไป ซึ่งถ้าต้องการรู้สาเหตุก็ให้เลื่อนเมาส์ไปชี้จะปรากฏคาอธิบาย แต่โดยทั่วไปสาเหตุจะแบ่งเป็น 2 กรณี
- คุณสมบัติดังกล่าวถูกยกเลิกโดยสไตล์ของแท็กที่อยู่ในลำดับถัดลงไป
- คุณสมบัติดังกล่าวไม่สามารถสืบทอดไปยังแท็กลำดับถัดไป คุณสมบัติบางอย่างจะไม่มีการสืบทอดต่อไป ดังนั้นมันจึงไม่ส่งผลไปยังแท็กที่ถูกครอบอยู่
การสร้างสไตล์เก็บเป็นไฟล์ CSS
นอกจากการสร้างสไตล์เพื่อใช้ภายในเว็บเพจนั้นเองแล้ว คุณยังสามารถแยกสไตล์เก็บเป็นไฟล์สไตล์ชีต (.css) เพื่อนาไปใช้กับเว็บเพจอื่นๆ ได้ โดยขั้นตอนการสร้างจะแตกต่างออกไปเล็กน้อยตรงที่คุณต้องระบุว่าจะให้โปรแกรมจัดเก็บสไตล์ที่สร้างใหม่ไว้ในไฟล์ใด
ผลที่ได้บนพาเนล CSS Styles จะปรากฏชื่อไฟล์ และถัดลงไปจะเป็นชื่อสไตล์แรกที่สร้าง หลังจากนี้คุณสามารถเพิ่มสไตล์เข้าไปยังไฟล์เติมได้ โดยในขั้นตอนที่ 4 ให้เลือกชื่อไฟล์ CSS นั้นแทรกการเลือก (New > Style Sheet > File)
ความแตกต่างระหว่าง Link และ Import
โดยทั่วไปขอแนะนาให้ใช้วิธี Link ซึ่งเหมาะกับไฟล์ CSS ที่มีขนาดใหญ่ นอกจากนี้วิธี Import จะใช้ไม่ได้กับบางบราวเซอร์ สำหรับความแตกต่างระหว่าง 2 วิธีนี้ที่ปรากฏใน Dreamweaver คือ
- ลักษณะของรายชื่อสไตล์ที่ปรากฏบนพาเนล CSS Styles จะต่างกัน
- เมื่อดูในมุมมอง Code คำสั่งที่นำไฟล์ CSS เข้ามาใช้จะแตกต่างกัน คือ กรณี Link
ชนิดของสื่อ (Medie) เป็นการระบุว่าคุณต้องการใช้สไตล์ในไฟล์ CSS นั้นเพื่อแสดงผลกับสื่อชนิดใด ซึ่งสื่อที่สำคัญได้แก่
- All (หรือไม่ระบุ) หมายถึงใช้กับสื่อทุกประเภท
- Print หมายถึงเครื่องพิมพ์ โดยสไตล์ในไฟล์ CSS จะมีผลเมื่อคุณสั่งพิมพ์เว็บเพจเท่านั้น
- Screen หมายถึงจอภาพ
ตัวอย่าง ถ้าต้องการให้คุณสมบัติของข้อความขณะแสดงบนจะภาพ และขณะที่พิมพ์แตกต่างกันก็ทำได้โดย
1. สร้างไฟล์ CSS 2 ไฟล์ คือ mystyle_screen และ mystyle_print โดยในแต่ละไฟล์ให้สร้างสไตล์ชื่อเดียวกัน แต่กำหนดคุณสมบัติที่แตกต่างกัน เพื่อให้เหมาะกับสื่อประเภทแต่ละประเภท
2. นำไฟล์ CSS ทั้งสองเข้ามาใช้บนเว็บเพจ โดยไฟล์ mystyle_screen.css ให้เลือก media เป็น screen และไฟล์ mystyle_print ให้เลือก print
3. กำหนดสไตล์ให้กับข้อความ แล้วทดสอบโดยคลิกปุ่มบนทูลบาร์ Style Rendering
ตัวอย่าง การเปลี่ยนสีสโครบาร์ของบราวเซอร์ด้วยสไตล์ CSS
สไตล์ CSS นอกจากจะใช้เพื่อจัดรูปแบบขององค์ประกอบบนเว็บเพจแล้วยังสามารถใช้สร้างเอฟเฟ็คต์พิเศษบางอย่างได้ ซึ่งเอฟเฟ็คต์หนึ่งที่นิยมกันก็ คือการเปลี่ยนสีสโครลบาร์ของบราวเซอร์
เอฟเฟ็คต์นี้จะใช้ได้กับบางบราวเซอร์เท่านั้น โดยคุณจะต้องพิมพ์คาสั่งเองในมุมมอง Code โดยแทรกไว้ระหว่างแท็กที่ส่วนหัวของเว็บเพจ
การตรวจสอบโค้ด CSS ด้วย CSS Inspection
คุณสามารถตรวจสอบโค้ด CSS โดยใช้ CSS Inspection ซึ่งเป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาให้ใช้งานร่วมกับมุมมอง Live View ในขณะที่แสดงผลหน้าเว็บอยู่เพียงเลื่อนเมาส์หรือคลิกบริเวณที่ต้องการตรวจสอบ โปรแกรมจะแสดงสไตล์รวมทั้งคำสั่ง CSS ที่กำหนดไว้ขึ้นมาทั้งหมดคุณสามารถดู หรือแก้ไขโค้ดได้ทันที
ไม่มีความคิดเห็น:
แสดงความคิดเห็น