บทความนี้จะอธิบายวิธีใช้ Cascading Style Sheets (CSS) เพื่อจัดรูปแบบข้อความบนเพจใน Dreamweaver คุณสามารถใช้ CSS เพื่อจัดรูปแบบและตำแหน่งข้อความในแบบที่ HTML ไม่สามารถทำได้ ทำให้คุณมีความยืดหยุ่นและควบคุมลักษณะที่ปรากฏของเพจได้มากขึ้น
การทำความเข้าใจ CSS
Cascading Style Sheets (CSS) คือชุดกฎการจัดรูปแบบที่ควบคุมลักษณะที่ปรากฏของเนื้อหาบนเว็บเพจ เมื่อคุณใช้ CSS เพื่อจัดรูปแบบหน้า เนื้อหาและการนำเสนอจะถูกแยกออกจากกัน เนื้อหาของหน้า (โค้ด HTML) อยู่ในไฟล์ HTML ของตัวเอง ในขณะที่กฎ CSS ที่กำหนดการแสดงโค้ดอยู่ในไฟล์อื่น (สไตล์ชีตภายนอก) หรือส่วนอื่นของเอกสาร HTML (โดยปกติจะเป็นส่วน) การใช้ CSS ช่วยให้คุณมีความยืดหยุ่นและควบคุมลักษณะที่ปรากฏของเพจได้ดียิ่งขึ้น ตั้งแต่การวางตำแหน่งเค้าโครงที่แม่นยำไปจนถึงแบบอักษรและสไตล์เฉพาะ
CSS ช่วยให้คุณสามารถควบคุมคุณสมบัติหลายอย่างที่คุณไม่สามารถควบคุมได้โดยใช้ HTML เพียงอย่างเดียว ตัวอย่างเช่น คุณสามารถระบุขนาดและหน่วยแบบอักษรต่างๆ (พิกเซล จุด ฯลฯ) สำหรับข้อความที่เลือกได้ ด้วยการใช้ CSS เพื่อกำหนดขนาดตัวอักษรเป็นพิกเซล คุณสามารถมั่นใจได้ว่าแนวทางการจัดวางหน้าและลักษณะที่ปรากฏบนเบราว์เซอร์ต่างๆ จะสอดคล้องกันมากขึ้น
กฎการจัดรูปแบบ CSS ประกอบด้วยสองส่วน: ตัวเลือกและการประกาศ ตัวเลือกคือคำศัพท์ที่ระบุองค์ประกอบที่มีการจัดรูปแบบ (เช่น P, H1, ชื่อคลาส หรือ ID) ในขณะที่การประกาศใช้เพื่อกำหนดองค์ประกอบสไตล์ ในตัวอย่างต่อไปนี้ H1 คือตัวเลือก และทุกอย่างที่อยู่ระหว่างเครื่องหมายปีกกา ({}) คือการประกาศ:
นี่
คือเนื้อหาที่ยกมา:
H1 {
font
-size:16pixels
;
การประกาศประกอบด้วยสองส่วน: คุณสมบัติ (เช่น ตระกูลฟอนต์) และค่า (เช่น Helvetica) ตัวอย่างด้านบนสร้างสไตล์สำหรับแท็ก H1: ข้อความของแท็ก H1 ทั้งหมดที่เชื่อมโยงกับสไตล์นี้จะมีขนาด 16 พิกเซล และใช้แบบอักษร Helvetica และเป็นตัวหนา
คำว่า "cascading" หมายถึงความสามารถในการใช้หลายสไตล์กับองค์ประกอบหรือเว็บเพจเดียวกัน ตัวอย่างเช่น คุณสามารถสร้างกฎ CSS หนึ่งกฎเพื่อใช้สี และอีกกฎหนึ่งเพื่อใช้ระยะขอบ จากนั้นจึงใช้ทั้งสองกฎกับข้อความเดียวกันบนหน้า สไตล์ที่กำหนดไว้จะ "เรียงซ้อน" ลงบนองค์ประกอบบนเว็บเพจของคุณ ท้ายที่สุดแล้วจะสร้างการออกแบบที่คุณต้องการ
ข้อได้เปรียบหลักของ CSS คือสามารถอัปเดตได้ง่าย ตราบใดที่กฎ CSS หนึ่งกฎได้รับการอัปเดต การจัดรูปแบบของเอกสารทั้งหมดที่ใช้สไตล์ที่กำหนดจะได้รับการอัปเดตเป็นรูปแบบใหม่โดยอัตโนมัติ
ประเภทกฎต่อไปนี้สามารถกำหนดได้ใน Dreamweaver:
กฎ CSS ที่กำหนดเอง (หรือที่เรียกว่า "สไตล์คลาส") อนุญาตให้คุณใช้คุณสมบัติสไตล์กับช่วงข้อความหรือบล็อกข้อความใดก็ได้ สไตล์คลาสทั้งหมดเริ่มต้นด้วยจุด (.) ตัวอย่างเช่น คุณสามารถสร้างสไตล์คลาสที่เรียกว่า .red ตั้งค่าคุณสมบัติสีของกฎเป็นสีแดง จากนั้นนำสไตล์ไปใช้กับส่วนของข้อความย่อหน้าที่มีสไตล์
กฎแท็ก HTML กำหนดรูปแบบของแท็กเฉพาะ (เช่น p หรือ h1) ใหม่ เมื่อคุณสร้างหรือเปลี่ยนแปลงกฎ CSS สำหรับแท็ก h1 ข้อความทั้งหมดที่จัดรูปแบบด้วยแท็ก h1 จะได้รับการอัปเดตทันที
กฎตัวเลือก CSS (สไตล์ขั้นสูง) กำหนดการจัดรูปแบบของชุดค่าผสมขององค์ประกอบเฉพาะ หรือรูปแบบตัวเลือกอื่นๆ ที่อนุญาตโดย CSS (เช่น ใช้ตัวเลือก td h2 ทุกครั้งที่ส่วนหัว h2 ปรากฏขึ้นภายในเซลล์ตาราง) สไตล์ขั้นสูงยังสามารถกำหนดรูปแบบของแท็กที่มีแอตทริบิวต์ ID เฉพาะได้ (เช่น สไตล์ที่กำหนดโดย #myStyle สามารถนำไปใช้กับแท็กทั้งหมดที่มีคู่แอตทริบิวต์/ค่า id="myStyle")
สร้างสไตล์ชีตใหม่
ขั้นแรก คุณจะต้องสร้างสไตล์ชีตภายนอกที่มีกฎ CSS ที่กำหนดสไตล์ข้อความของย่อหน้า เมื่อคุณสร้างสไตล์ในสไตล์ชีตภายนอก คุณสามารถควบคุมลักษณะที่ปรากฏของเว็บเพจหลายหน้าพร้อมกันได้จากตำแหน่งศูนย์กลาง โดยไม่ต้องตั้งค่าสไตล์สำหรับเว็บเพจแต่ละหน้าแยกกัน
กฎ CSS สามารถอยู่ในตำแหน่งต่อไปนี้:
สไตล์ชีต CSS ภายนอกคือชุดของกฎ CSS ที่จัดเก็บไว้ในไฟล์ .css ภายนอกที่แยกต่างหาก (ไม่ใช่ไฟล์ HTML) ไฟล์ .css เชื่อมโยงไปยังหน้าหนึ่งหรือหลายหน้าในเว็บไซต์โดยใช้ลิงก์ในส่วนหัวของเอกสาร
สไตล์ชีต CSS ภายใน (หรือแบบฝัง) คือชุดของกฎ CSS ที่อยู่ภายในแท็กสไตล์ในส่วนหัวของเอกสาร HTML ตัวอย่างเช่น ตัวอย่างต่อไปนี้กำหนดขนาดแบบอักษรสำหรับข้อความทั้งหมดในเอกสารที่มีชุดแท็กย่อหน้า:
:<head>
<สไตล์>
พี{
ขนาดตัวอักษร:80px
-
</สไตล์>
</หัว>：
สไตล์อินไลน์ถูกกำหนดไว้ภายในอินสแตนซ์แท็กเฉพาะภายในเอกสาร HTML ตัวอย่างเช่น,
"p style="font-size: 9px""
กำหนดขนาดตัวอักษรสำหรับย่อหน้าที่จัดรูปแบบด้วยแท็กที่มีสไตล์อินไลน์เท่านั้น
Dreamweaver แสดงผลคุณสมบัติสไตล์ส่วนใหญ่ที่คุณใช้และแสดงในหน้าต่างเอกสาร คุณยังสามารถแสดงตัวอย่างเอกสารในหน้าต่างเบราว์เซอร์เพื่อดูว่านำสไตล์ไปใช้อย่างไร คุณสมบัติสไตล์ CSS บางอย่างปรากฏแตกต่างออกไปใน Microsoft Internet Explorer, Netscape Navigator, Opera และ Apple Safari
เลือก "ไฟล์">"ใหม่"
ในกล่องโต้ตอบเอกสารใหม่ ให้เลือกหน้าฐานในคอลัมน์ประเภท เลือก CSS ในคอลัมน์หน้าฐาน จากนั้นคลิกสร้าง
สไตล์ชีตเปล่าจะปรากฏในหน้าต่างเอกสาร ปุ่มมุมมองการออกแบบและมุมมองโค้ดถูกปิดใช้งาน สไตล์ชีต CSS เป็นไฟล์ข้อความธรรมดาและเนื้อหาจะไม่ถูกใช้สำหรับการดูในเบราว์เซอร์
บันทึก ("ไฟล์">"บันทึก") หน้านี้ในชื่อ cafe_townsend.css
เมื่อคุณบันทึกสไตล์ชีต อย่าลืมบันทึกลงในโฟลเดอร์ cafe_townsend (โฟลเดอร์รูทของเว็บไซต์ของคุณ)
พิมพ์รหัสต่อไปนี้ในสไตล์ชีต:
p{
ตระกูลฟอนต์: Verdana, sans-serif;
ขนาดตัวอักษร: 11px;
สี: #000000;
ความสูงของบรรทัด: 18px;
ช่องว่างภายใน: 3px;
-
เมื่อคุณพิมพ์โค้ด Dreamweaver จะใช้คำแนะนำโค้ดเพื่อแนะนำตัวเลือกต่างๆ เพื่อช่วยคุณในการกรอกข้อมูลให้สมบูรณ์ เมื่อคุณเห็นโค้ดที่คุณต้องการให้ Dreamweaver กรอกให้คุณ ให้กด Enter (Windows) หรือ Return (Macintosh)
อย่าลืมเพิ่มเครื่องหมายอัฒภาคหลังค่าแอตทริบิวต์ที่ส่วนท้ายของแต่ละบรรทัด
รหัสที่เสร็จสมบูรณ์จะมีลักษณะเหมือนตัวอย่างต่อไปนี้:
หากต้องการแสดงคำแนะนำ ให้เลือก Help > References จากนั้นเลือก O'Reilly CSS Reference จากเมนูป็อปอัพในแผง References บันทึกสไตล์ชีต
สไตล์ชีตที่แนบมา
เมื่อคุณแนบสไตล์ชีตเข้ากับเว็บเพจ กฎที่กำหนดไว้ในสไตล์ชีตจะถูกนำไปใช้กับองค์ประกอบที่เกี่ยวข้องบนเพจ ตัวอย่างเช่น เมื่อคุณแนบสไตล์ชีต cafe_townsend.css เข้ากับหน้า index.html ข้อความย่อหน้าทั้งหมด (ข้อความที่จัดรูปแบบด้วยแท็กในโค้ด HTML) จะถูกจัดรูปแบบตามกฎ CSS ที่คุณกำหนด
ในหน้าต่างเอกสาร ให้เปิดไฟล์ index.html ของ Cafe Townsend (หากไฟล์เปิดอยู่แล้ว ให้คลิกแท็บของไฟล์)
เลือกข้อความแรกที่คุณวางลงในหน้าในบทช่วยสอน: เพิ่มเนื้อหาลงในหน้า
ดูในตัวตรวจสอบคุณสมบัติ และตรวจสอบให้แน่ใจว่าย่อหน้าถูกจัดรูปแบบโดยใช้แท็กย่อหน้า
หากเมนูป๊อปอัพรูปแบบในตัวตรวจสอบคุณสมบัติระบุว่าย่อหน้า แสดงว่าย่อหน้านั้นถูกจัดรูปแบบโดยใช้แท็กย่อหน้า หากเมนูป๊อปอัพรูปแบบในตัวตรวจสอบคุณสมบัติระบุว่าไม่มีหรืออย่างอื่น ให้เลือกย่อหน้าเพื่อจัดรูปแบบย่อหน้า
ทำซ้ำขั้นตอนที่ 3 สำหรับย่อหน้าที่สอง
ในแผงสไตล์ CSS (หน้าต่าง > สไตล์ CSS) คลิกปุ่มแนบสไตล์ชีตที่มุมล่างขวาของแผง
ในกล่องโต้ตอบแนบสไตล์ชีตภายนอก คลิกเรียกดูและเรียกดูไฟล์ cafe_townsend.css ที่สร้างขึ้นในส่วนก่อนหน้า
คลิกตกลง
ข้อความในหน้าต่างเอกสารจะถูกจัดรูปแบบตามกฎ CSS ในสไตล์ชีตภายนอก
สำรวจแผงสไตล์ CSS
แผงสไตล์ CSS ช่วยให้คุณติดตามกฎและคุณสมบัติ CSS ที่ส่งผลต่อองค์ประกอบของหน้าที่เลือกในปัจจุบัน หรือส่งผลกระทบต่อทั้งเอกสาร และแก้ไขคุณสมบัติ CSS โดยไม่ต้องเปิดสไตล์ชีตภายนอก
โปรดตรวจสอบให้แน่ใจว่าหน้า index.html เปิดอยู่ในหน้าต่างเอกสาร
ในแผงสไตล์ CSS (หน้าต่าง > สไตล์ CSS) คลิกทั้งหมดที่ด้านบนของแผง จากนั้นตรวจสอบกฎ CSS ของคุณ
ในโหมด "ทั้งหมด" แผง CSS จะแสดงกฎ CSS ทั้งหมดที่ใช้กับเอกสารปัจจุบัน ไม่ว่าจะอยู่ในสไตล์ชีตภายนอกหรือในเอกสารของตัวเอง คุณควรเห็นหมวดหมู่หลักสองหมวดหมู่ในบานหน้าต่างกฎทั้งหมด: หมวดหมู่แท็กและหมวดหมู่ cafe_townsend.css
หากหมวดหมู่ป้ายกำกับไม่ถูกขยาย ให้คลิกเครื่องหมายบวก (+) เพื่อขยายหมวดหมู่
คลิกที่กฎเนื้อหา
คุณสมบัติสีพื้นหลังที่มีค่า #000000 จะปรากฏในบานหน้าต่างคุณสมบัติด้านล่าง
โปรดทราบว่าคุณอาจต้องยุบแผงอื่นๆ เช่น แผงไฟล์ เพื่อดูแผงสไตล์ CSS แบบเต็ม และคุณยังเปลี่ยนความยาวของแผงสไตล์ CSS ได้ด้วยการลากขอบระหว่างบานหน้าต่าง
คุณตั้งค่าสีพื้นหลังของเพจในบทช่วยสอน: การสร้างเค้าโครงเพจตามตารางโดยใช้กล่องโต้ตอบปรับเปลี่ยนคุณสมบัติของเพจ เมื่อคุณตั้งค่าคุณสมบัติของเพจด้วยวิธีนี้ Dreamweaver จะเขียนสไตล์ CSS ที่มีอยู่ในเอกสาร
คลิกเครื่องหมายบวก (+) เพื่อขยายหมวดหมู่ cafe_townsend.css
คลิก กฎ
คุณสมบัติและค่าทั้งหมดที่กำหนดไว้ในสไตล์ชีตภายนอกสำหรับกฎ p จะปรากฏในบานหน้าต่างคุณสมบัติด้านล่าง
ในหน้าต่างเอกสาร ให้คลิกที่ใดก็ได้ในสองย่อหน้าที่คุณเพิ่งจัดรูปแบบหนึ่งครั้ง
ในแผงสไตล์ CSS คลิกปัจจุบันที่ด้านบนของแผง จากนั้นตรวจสอบสไตล์ CSS ของคุณ ในโหมดปัจจุบัน แผง CSS จะแสดงสรุปคุณสมบัติของการเลือกปัจจุบัน คุณสมบัติที่แสดงสอดคล้องกับคุณสมบัติของกฎ p ในสไตล์ชีตภายนอก
ในส่วนถัดไป คุณจะใช้แผงสไตล์ CSS เพื่อสร้างกฎใหม่ การสร้างกฎใหม่โดยใช้แผงสไตล์ CSS นั้นง่ายกว่าการพิมพ์กฎด้วยตนเองอย่างมาก เช่นเดียวกับเมื่อคุณสร้างสไตล์ชีตภายนอกในตอนแรก
สร้างกฎ CSS ใหม่
ในส่วนนี้ คุณจะใช้แผงสไตล์ CSS เพื่อสร้างกฎ CSS หรือสไตล์คลาสที่กำหนดเอง สไตล์คลาสช่วยให้คุณสามารถตั้งค่าคุณสมบัติสไตล์ของช่วงหรือบล็อกข้อความใดก็ได้ และสามารถนำไปใช้กับแท็ก HTML ใดก็ได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกฎ CSS ประเภทต่างๆ โปรดดูการทำความเข้าใจ CSS
ในแผงสไตล์ CSS ให้คลิกกฎ CSS ใหม่ที่มุมขวาล่างของแผง
ในกล่องโต้ตอบ New CSS Rule ให้เลือก Class จากตัวเลือก Selector Type ควรเลือกตัวเลือกนี้ตามค่าเริ่มต้น
ป้อน .bold ในกล่องข้อความชื่อ
ตรวจสอบให้แน่ใจว่าได้พิมพ์จุด (.) ก่อนคำว่า "ตัวหนา" สไตล์คลาสทั้งหมดต้องขึ้นต้นด้วยจุด
ในเมนูป๊อปอัป "กำหนดใน" ให้เลือก cafe_townsend.css ควรเลือกไฟล์นี้ตามค่าเริ่มต้น
คลิกตกลง
กล่องโต้ตอบคำจำกัดความกฎ CSS จะปรากฏขึ้น ระบุว่าคุณกำลังสร้างสไตล์คลาสชื่อ .bold ในไฟล์ cafe_townsend.css
ในกล่องโต้ตอบ "คำจำกัดความกฎ CSS" ให้ทำดังต่อไปนี้:
ในกล่องข้อความ "แบบอักษร" ให้ป้อน Verdana, sans-serif
ในกล่องข้อความขนาด ให้ป้อน 11 แล้วเลือกพิกเซลในเมนูป๊อปอัปทางด้านขวาทันที
ในกล่องข้อความ Row Height ให้ป้อน 18 และเลือก Pixels ในเมนูป๊อปอัปทางด้านขวาทันที
เลือกตัวหนาจากเมนูป๊อปอัพน้ำหนัก
ในกล่องข้อความสี ให้ป้อน #990000
เคล็ดลับ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติ CSS โปรดดูคู่มืออ้างอิง O'Reilly ที่มาพร้อมกับ Dreamweaver หากต้องการแสดงคำแนะนำ ให้เลือก Help > References จากนั้นเลือก O'Reilly CSS Reference จากเมนูป็อปอัพในแผง References
คลิกตกลง
คลิกปุ่มทั้งหมดที่ด้านบนของแผงสไตล์ CSS
หากไม่ได้ขยายหมวดหมู่ cafe_townsend.css ให้คลิกปุ่มบวก (+) ถัดจากหมวดหมู่
คุณจะเห็นว่า Dreamweaver ได้เพิ่มสไตล์คลาส .bold ลงในรายการกฎที่กำหนดไว้ในสไตล์ชีตภายนอก หากคุณคลิกกฎ .bold ในบานหน้าต่างกฎทั้งหมด คุณสมบัติของกฎจะปรากฏในบานหน้าต่างคุณสมบัติ กฎใหม่ยังปรากฏในเมนูป๊อปอัพลักษณะของตัวตรวจสอบคุณสมบัติอีกด้วย
ใช้สไตล์ชั้นเรียนกับข้อความ
ตอนนี้คุณได้สร้างกฎของชั้นเรียนและนำไปใช้กับข้อความบางย่อหน้าแล้ว
ในหน้าต่างเอกสาร ให้เลือกสี่คำแรกของข้อความในย่อหน้าแรก: เชฟที่มีวิสัยทัศน์ของ Cafe Townsend
ในตัวตรวจสอบคุณสมบัติ (หน้าต่าง > คุณสมบัติ) ให้เลือกตัวหนาจากเมนูป๊อปอัพลักษณะ
สไตล์สไตล์ "ตัวหนา" จะถูกนำไปใช้กับข้อความของคุณ
ทำซ้ำขั้นตอนที่ 2 เพื่อใช้สไตล์สไตล์ "ตัวหนา" กับสี่คำแรกของย่อหน้าที่สอง
บันทึกหน้า
จัดรูปแบบข้อความแถบนำทาง
ถัดไป คุณจะใช้ CSS เพื่อนำสไตล์ไปใช้กับข้อความลิงก์ของแถบนำทาง เว็บเพจจำนวนมากใช้รูปภาพสี่เหลี่ยมสีพร้อมข้อความฝังเพื่อสร้างแถบนำทาง อย่างไรก็ตาม หากคุณใช้ CSS สิ่งที่คุณต้องทำก็แค่ตั้งค่าข้อความลิงก์และการจัดรูปแบบบางอย่าง ด้วยการใช้คุณสมบัติ display: block และการตั้งค่าความกว้างของบล็อก คุณสามารถสร้างสี่เหลี่ยมผืนผ้าได้อย่างมีประสิทธิภาพโดยไม่ต้องใช้รูปภาพเพิ่มเติม
สร้างกฎใหม่สำหรับการนำทาง
เปิดไฟล์ cafe_townsend.css หากยังไม่ได้เปิด หรือคลิกที่แท็บเพื่อแสดงไฟล์
กำหนดกฎใหม่โดยพิมพ์โค้ดต่อไปนี้หลังสไตล์คลาส .bold ในไฟล์:
.navigation {
}
นี่เป็นกฎว่าง
รหัสในไฟล์ควรมีลักษณะเหมือนตัวอย่างต่อไปนี้:
บันทึกไฟล์ cafe_townsend.css
จากนั้น คุณจะใช้แผงสไตล์ CSS เพื่อเพิ่มคุณสมบัติให้กับกฎ
หากไม่ได้เปิดไฟล์ index.html ให้เปิดไฟล์
ในแผงสไตล์ CSS ตรวจสอบให้แน่ใจว่าได้เลือกโหมดทั้งหมดแล้ว เลือกกฎ .navigation ใหม่ แล้วคลิกแก้ไขสไตล์ที่มุมขวาล่างของแผง
ในกล่องโต้ตอบ "คำจำกัดความกฎ CSS" ให้ทำดังต่อไปนี้:
ในกล่องข้อความ "แบบอักษร" ให้ป้อน Verdana, sans-serif
เลือก 16 จากเมนูป๊อปอัพขนาด จากนั้นเลือกพิกเซลจากเมนูป๊อปอัปทางด้านขวาของมัน
เลือกปกติจากเมนูป๊อปอัพสไตล์
เลือกไม่มีจากรายการการแก้ไข
เลือกตัวหนาจากเมนูป๊อปอัพน้ำหนัก
ในกล่องข้อความสี ให้ป้อน #FFFFFF
หากต้องการแสดงคำแนะนำ ให้เลือก Help > References จากนั้นเลือก O'Reilly CSS Reference จากเมนูป็อปอัพในแผง References
คลิกตกลง
ตอนนี้ คุณจะใช้แผงสไตล์ CSS เพื่อเพิ่มคุณสมบัติเพิ่มเติมให้กับกฎ .navigation
ในแผงสไตล์ CSS ตรวจสอบให้แน่ใจว่าได้เลือกกฎ .navigation แล้วคลิกแสดงมุมมองรายการ
มุมมองรายการทำให้บานหน้าต่างคุณสมบัติแสดงคุณสมบัติที่มีอยู่ทั้งหมดตามลำดับตัวอักษร (ไม่เหมือนกับมุมมองตั้งค่าคุณสมบัติ ซึ่งแสดงเฉพาะคุณสมบัติที่ตั้งค่าไว้เท่านั้น)
คลิกในคอลัมน์ทางด้านขวาของคุณสมบัติสีพื้นหลัง
หากต้องการดูเนื้อหาทั้งหมดของคุณสมบัติ ให้วางตัวชี้เมาส์ไว้เหนือคุณสมบัติ
ป้อนค่าเลขฐานสิบหก #993300 แล้วกด Enter (Windows) หรือ Return (Macintosh)
เคล็ดลับ หากต้องการดูผลกระทบของงานของคุณต่อสไตล์ชีตภายนอก ให้เปิดไฟล์ cafe_townsend.css ไว้ในหน้าต่างเอกสารในขณะที่คุณทำงาน เมื่อคุณทำการเลือกในแผงสไตล์ CSS คุณจะเห็น Dreamweaver เขียนโค้ด CSS ในสไตล์ชีตด้วย
ค้นหาคุณสมบัติการแสดงผล (คุณอาจต้องเลื่อนลง) คลิกหนึ่งครั้งในคอลัมน์ด้านขวา และเลือกบล็อกจากเมนูป๊อปอัป
ค้นหาคุณสมบัติการเติม คลิกหนึ่งครั้งในคอลัมน์ทางขวา ป้อนค่า 8px แล้วกด Enter (Windows) หรือ Return (Macintosh)
ค้นหาคุณสมบัติ width คลิกหนึ่งครั้งในคอลัมน์ทางขวา ป้อน 140 ในกล่องข้อความแรก เลือก Pixels จากเมนูป๊อปอัป แล้วกด Enter (Windows) หรือ Return (Macintosh)
คลิกแสดงคุณสมบัติการตั้งค่าเพื่อแสดงเฉพาะคุณสมบัติที่คุณตั้งค่าไว้ในบานหน้าต่างคุณสมบัติ
คลิกไฟล์ cafe_townsend.css เพื่อแสดง คุณจะเห็นว่า Dreamweaver ได้เพิ่มคุณสมบัติทั้งหมดที่คุณระบุลงในไฟล์
บันทึกและปิดไฟล์ cafe_townsend.css
ตอนนี้คุณได้สร้างกฎที่จัดรูปแบบข้อความในแถบนำทางแล้ว จากนั้น คุณจะใช้กฎกับลิงก์ที่เลือก
ใช้กฎเกณฑ์
เมื่อเปิดหน้า index.html ในหน้าต่างเอกสาร ให้คลิกคำว่า Cuisine เพื่อวางจุดแทรกไว้ที่ใดที่หนึ่งในคำ
ในตัวเลือกป้ายกำกับ ให้คลิกป้ายกำกับขวาสุด
การดำเนินการนี้จะเลือกข้อความทั้งหมดสำหรับป้ายกำกับหรือลิงก์ที่ระบุ
ในตัวตรวจสอบคุณสมบัติ (หน้าต่าง > คุณสมบัติ) ให้เลือกการนำทางจากเมนูป๊อปอัพลักษณะ
ในหน้าต่างเอกสาร ลักษณะของข้อความอาหารได้เปลี่ยนไปโดยสิ้นเชิง ขณะนี้ข้อความได้รับการจัดรูปแบบเป็นปุ่มแถบนำทางโดยยึดตามคุณสมบัติที่คุณกำหนดไว้สำหรับกฎ .navigation ในส่วนก่อนหน้า
ทำซ้ำขั้นตอนที่ 1 ถึง 3 สำหรับแต่ละลิงก์ในแถบนำทาง
คุณต้องกำหนดสไตล์คลาสการนำทางให้กับป้ายกำกับหรือลิงก์แต่ละรายการ ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องเลือกแต่ละลิงก์ทีละลิงก์โดยใช้ตัวเลือกป้ายกำกับ จากนั้นกำหนดสไตล์คลาสให้กับแต่ละลิงก์ทีละลิงก์
หากคุณมีปัญหาในการจัดรูปแบบข้อความลิงก์ ตรวจสอบให้แน่ใจว่ามีการเว้นวรรค (ไม่ใช่การขึ้นบรรทัดใหม่) ระหว่างคำที่เชื่อมโยงแต่ละคำ (หรือกลุ่ม) ตรวจสอบให้แน่ใจว่าช่องว่างระหว่างทั้งสองลิงก์ไม่ได้เชื่อมโยงกัน หากมีการเชื่อมโยงช่องว่าง ให้เลือกช่องว่างที่เชื่อมโยงอย่างระมัดระวัง ล้างกล่องข้อความลิงก์ในตัวตรวจสอบคุณสมบัติ แล้วกด Enter (Windows) หรือ Return (Macintosh)
เมื่อคุณจัดรูปแบบคำทั้งหมดในแถบนำทางเสร็จแล้ว ให้บันทึกหน้าและดูตัวอย่างงานของคุณในเบราว์เซอร์ (ไฟล์ > ดูตัวอย่างในเบราว์เซอร์)
คุณสามารถคลิกลิงก์เพื่อให้แน่ใจว่าใช้งานได้
เพิ่มเอฟเฟกต์การวางเมาส์โอเวอร์
ตอนนี้ คุณจะเพิ่มเอฟเฟกต์แบบโรลโอเวอร์ที่ทำให้สีพื้นหลังของแถบนำทางเปลี่ยนไปในแต่ละครั้งที่ตัวชี้เมาส์ผ่านลิงก์ หากต้องการเพิ่มเอฟเฟกต์การเลื่อนเมาส์ ให้เพิ่มกฎใหม่ที่มี :hover pseudo-class
เกี่ยวกับ... About:hover Pseudo-classes Pseudo-classes เป็นวิธีที่จะส่งผลกระทบกับองค์ประกอบบางอย่างในเอกสาร HTML โดยไม่ขึ้นอยู่กับโค้ด HTML ของเอกสารเอง แต่ขึ้นอยู่กับเงื่อนไขภายนอกอื่นๆ ที่ใช้โดยเว็บเบราว์เซอร์ คลาสเทียมสามารถเป็นแบบไดนามิกได้ ซึ่งหมายความว่าเมื่อผู้ใช้โต้ตอบกับเอกสาร องค์ประกอบบนเพจอาจได้รับหรือสูญเสียคลาสเทียม
คลาสหลอก :hover ส่งผลต่อการเปลี่ยนแปลงองค์ประกอบของหน้าที่จัดรูปแบบเมื่อผู้ใช้วางตัวชี้เมาส์ไว้เหนือองค์ประกอบ ตัวอย่างเช่น เมื่อคุณเพิ่ม :hover pseudo-class ให้กับสไตล์คลาส .navigation (.navigation:hover) เพื่อสร้างกฎใหม่ องค์ประกอบข้อความทั้งหมดที่จัดรูปแบบด้วยกฎ .navigation จะเปลี่ยนไปตามคุณสมบัติของ .navigation: กฎโฮเวอร์
เปิดไฟล์ cafe_townsend.css
เลือกกฎ .navigation ทั้งหมด
คัดลอกข้อความ ("แก้ไข">"คัดลอก")
คลิกหนึ่งครั้งที่ส่วนท้ายของกฎ จากนั้นกด Enter (Windows) หรือ Return (Macintosh) อีกสองสามครั้งเพื่อสร้างช่องว่าง
วาง ("แก้ไข"> "วาง") ข้อความที่คัดลอกลงในพื้นที่ที่คุณเพิ่งสร้างขึ้น
เพิ่ม :hover pseudo-class ไปยังตัวเลือก .navigation ที่วางดังนี้:
ในกฎ .navigation:hover ใหม่ ให้แทนที่สีพื้นหลังปัจจุบัน (#993300) ด้วย #D03D03
บันทึกและปิดไฟล์
เปิดไฟล์ index.html ในหน้าต่างเอกสารและดูตัวอย่างหน้าในเบราว์เซอร์ (ไฟล์ > แสดงตัวอย่างในเบราว์เซอร์)
เมื่อคุณวางตัวชี้เมาส์บนลิงก์ใดๆ คุณจะเห็นเอฟเฟกต์การวางเมาส์ใหม่