เคล็ดลับสองประการในการใช้สไตล์ชีต CSS ใน DreamWeaver

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 21:17:47

1. ลบขีดเส้นใต้ของไฮเปอร์ลิงก์และเปลี่ยนสีเมื่อวางเมาส์เหนือไฮเปอร์ลิงก์:

ตามค่าเริ่มต้น ไฮเปอร์ลิงก์ในหน้าเว็บที่ออกแบบด้วย DreamWeaver จะถูกขีดเส้นใต้ซึ่งดูไม่สวยงามมากนัก หากต้องการลบขีดเส้นใต้ที่น่ารำคาญเหล่านี้ วิธีการที่แนะนำในหนังสือพิมพ์และนิตยสารหลายฉบับคือการเพิ่มโค้ดลงในซอร์สโค้ด HTML ด้วยตนเอง จริงๆ แล้ว มันเป็นเรื่องง่ายที่จะลบขีดเส้นใต้ของลิงก์ใน DreamWeave ขั้นแรก สร้างลิงก์แบบสุ่มใน Document Windows ของ DreamWeaver คุณจะเห็นว่าลิงก์นี้จะถูกขีดเส้นใต้ จะลบขีดเส้นใต้นี้ได้อย่างไร?

1. คลิก "ข้อความ" |. "สไตล์ CSS" |. "แก้ไขสไตล์ชีต..." บนแถบเมนู (หรือกดปุ่มทางลัดโดยตรง Ctrl+shift+E) เพื่อเปิดหน้าต่างโต้ตอบแก้ไขสไตล์ชีต

2. คลิก "ใหม่" จากนั้นในกล่องโต้ตอบ "สไตล์ใหม่" ให้คลิกปุ่ม "ใช้ตัวเลือก CSS"

3. พิมพ์ a ในฟิลด์ Selector จากนั้นคลิก OK

4. จากนั้นกล่องโต้ตอบ "คำจำกัดความสไตล์ CSS" จะปรากฏขึ้น ในการตกแต่งคลาส Type ให้เลือกไม่มี จากนั้นคลิกตกลง จากนั้นคลิกเสร็จสิ้น คุณจะสังเกตได้ทันทีว่าขีดเส้นใต้ของลิงก์หายไปใน Document Windows แล้วคุณจะทำให้ลิงค์เปลี่ยนสีได้อย่างไรเมื่อเมาส์อยู่เหนือมัน? ทำซ้ำขั้นตอนที่หนึ่งและสองด้านบน จากนั้นคลิกลูกศรแบบเลื่อนลงถัดจากตัวเลือก เลือก "a:hover" แล้วคลิกตกลง ในกล่องโต้ตอบ "คำจำกัดความสไตล์สำหรับ a: โฮเวอร์" ที่ปรากฏขึ้น ให้เลือกสีใดก็ได้ในสีของคลาสประเภท (เช่น เลือกสีแดง) จากนั้นคลิก ตกลง จากนั้นคลิก เสร็จสิ้น เพื่อเสร็จสิ้น กด F12 เพื่อดูตัวอย่างและวางเมาส์บนลิงก์ ลิงก์เปลี่ยนเป็นสีแดงหรือไม่ หากตอนนี้ในกล่องโต้ตอบ "คำจำกัดความสไตล์สำหรับ a: โฮเวอร์" ในคลาสพื้นหลัง คุณเลือกสีพื้นหลังให้เป็นสีเขียว จากนั้นเมื่อคุณวางเมาส์บนไฮเปอร์ลิงก์ ไม่เพียงแต่ลิงก์จะเปลี่ยนเป็นสีแดง และที่นั่น จะเป็นพื้นหลังสีเขียวด้วย ที่จริงแล้ว ตอนนี้คุณสามารถใช้กล่องโต้ตอบคำจำกัดความสไตล์ CSS ได้แล้ว เพื่อนๆ ที่สนใจอาจอยากลองคิดดู

2. สร้างสไตล์ชีต CSS ภายนอกที่ใช้ซ้ำได้ หลังจากใช้ DreamWeaver เพื่อสร้างสไตล์ CSS ในหน้าเว็บบางหน้าแล้ว หากคุณต้องการนำสไตล์ดังกล่าวไปใช้กับหน้าเว็บอื่น คุณไม่จำเป็นต้องสร้างสไตล์ CSS ใหม่อีกครั้ง เมื่อคุณสร้างไฟล์สไตล์ชีต CSS ภายนอก (สไตล์ชีต CSS ภายนอก) คุณสามารถเรียกสไตล์ในไฟล์สไตล์ชีตนี้ได้ตามต้องการในอนาคต เพื่ออำนวยความสะดวกในการจัดการ ขั้นแรกให้สร้างโฟลเดอร์ใหม่ในโฟลเดอร์ที่ไซต์นั้นตั้งอยู่ ชื่อ CSS ซึ่งใช้เป็นพิเศษเพื่อวางไฟล์สไตล์ชีตภายนอก (นามสกุลของมันคือ css)

1. กด Ctrl+shift+E ในหน้าต่างเอกสารเพื่อเปิดหน้าต่างโต้ตอบแก้ไขสไตล์ชีต 2. คลิก "ลิงก์"

3. ในกล่องโต้ตอบป๊อปอัป Link External Style Sheet ให้คลิก เรียกดู และค้นหาโฟลเดอร์ CSS ที่คุณเพิ่งสร้างขึ้น

4. ในคอลัมน์ "ชื่อไฟล์" ของหน้าต่างเลือกไฟล์สไตล์ชีต ให้พิมพ์ *.css (* อาจเป็นชื่อใดก็ได้) โปรดทราบว่าจริงๆ แล้วไม่มีไฟล์สไตล์ชีตในโฟลเดอร์ CSS ในขณะนี้ พิมพ์ในช่อง "ชื่อไฟล์" จะกลายเป็นชื่อของไฟล์สไตล์ชีตภายนอกใหม่ ตัวอย่างเช่น พิมพ์ title.css แล้วคลิก เลือก | ตกลง

5. ในหน้าต่างโต้ตอบแก้ไขสไตล์ชีต title.css (ลิงก์) จะถูกเพิ่ม ดับเบิลคลิก

6. ในหน้าต่างป๊อปอัป "title.css" คลิก "ใหม่"

7. ในกล่องโต้ตอบ "สไตล์ใหม่" ให้คลิกปุ่ม "สร้างสไตล์ที่กำหนดเอง (คลาส)" 8. พิมพ์ชื่อในคอลัมน์ชื่อ เช่น myheadline แล้วคลิกตกลง

9. ในกล่องโต้ตอบ "คำจำกัดความสไตล์สำหรับ .myheadline ใน title.css" ต่อไปนี้ ให้ทำการตั้งค่าต่างๆ เช่น แบบอักษรและสี แล้วคลิก ตกลง เมื่อเสร็จสิ้น หากคุณต้องการสร้างสไตล์ใหม่ คลิก "ใหม่" อีกครั้ง ทำซ้ำขั้นตอนที่ 6, 7, 8 และ 9 และสุดท้ายคลิก "บันทึก" | "เสร็จสิ้น" จากนั้นไฟล์สไตล์ชีตภายนอก title.css จะถูกสร้างขึ้น สไตล์ทั้งหมดใน title.css จะแสดงอยู่ในเมนูย่อย "TEXT" |. "CSS Styles" บนแถบเมนู หากคุณต้องการเรียกชื่อนี้ว่า title.css ในหน้าเว็บอื่นๆ เพียงทำซ้ำขั้นตอนที่ 1 ถึง 3 ด้านบน จากนั้นป้อน title.css ในคอลัมน์ "ชื่อไฟล์" ของหน้าต่างเลือกไฟล์สไตล์ชีต คลิก "เลือก" | "ตกลง" | "เสร็จสิ้น" สไตล์ทั้งหมดใน title.css จะปรากฏในเมนูย่อย "สไตล์ CSS" บนแถบเมนูของหน้าเว็บ และคุณจะสามารถนำไปใช้ได้ ไปที่หน้าเว็บนี้สไตล์เหล่านี้