External CSS

Dreamweaver

External CSS เป็นการเขียนไฟล์ CSS แยกออกจากเว็บเพจ ทำให้การแก้ไขทำได้ง่ายขึ้น ถ้าถามว่าเราจะเขียน ทั้ง External CSS และ Internal CSS ในเว็บเพจเดียวกันได้หรือไม่ คำตอบคือได้ แต่การแสดงผลจะแสดงผลโดยให้ความสำคัญที่ Internal CSS ก่อน

ขั้นตอนการเขียน External CSS

การเขียน Exteranl CSS เราจะสร้างไฟล์แยกออกมาใหม่ มีขึ้นตอนดังนี้

1.ไปที่ Menu เลือก Text > CSS style > New จะมีหน้าต่างดังรูปขึ้นมา



2.เลือก Selector และกรอกชื่อเหมือนกับ Intenal CSS แต่ ในช่อง Define in ให้เลือก New Style Sheet File ดังรูป

3. จะมีหน้าต่างให้เราเลือก save ไฟล์ CSS ที่เราสร้างขึ้นมา แนะนำว่าให้เราสร้าง folder ใหม่ชื่อ CSS และเก็บไฟล์ CSS ที่เราสร้างไว้ในนี้ ดังรูปด้านล่าง



4.เมื่อเรา save ไฟล์เรียบร้อยแล้วก็จะมีหน้าต่างดังรูป



ในส่วนนี้การกรอกรายละเอียดก็เหมือนกับแบบ Internal CSS

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

ดังตัวอย่างเป็นชื่อ .content_ex เมื่อเราคลิกที่ชื่อจะมีหน้าต่างดังข้อที่ 4 ให้เราเปลี่ยนรายละเอียด แก้ไข หรือเพิ่มรายละเอียดได้



การเพิ่ม style ใหม่ให้เลือกสัญลักษณ์ในวงกลมดังรูปจะมีหน้าต่างดังข้อที่ 2 แต่ในส่วนของ Define in ให้เลือก this document only แทน **

ลิงค์ External CSS ให้กับเว็บเพจ

การใช้ External CSS ในเว็บเพจ เราจะต้องลิงค์เว็บเพจเข้ากับไฟล์ CSS ก่อนมีขึ้นตอนดังนี้

1.เปิดเว็บเพจที่ต้องการให้ลิงค์กับ External CSS ของเรา

2.ไปที่ CSS panel โดยไปคลิกที่สัญลักษณ์ดังรูป



3.เมื่อคลิกที่สััญลักษณ์รูปลิงค์แล้วจะมีหน้าต่างขึ้นมาดังรูป



3.1 ช่อง File/Url ให้ใส่ชื่อไฟล์ CSS ของเราโดยเลือกที่ Browse

3.2 ช่อง Add as จะมี 2 คำสั่งให้เลือกคือ

        1. link ถ้าเลือกอันนี้จะใช้คำสั่ง link ในการลิงค์ไฟล์ CSS กับเว็บเพจ

        2. import ถ้าเลือกอันนี้จะใช้คำสั่ง @import ในการลิงค์ไฟล์ CSS กับเว็บเพจ

    ทั้ง 2 คำสั่งนี้ แต่ต่างกันที่ลำดับความสำคัญถ้าเราเลือกแบบ link คำสั่ง CSS จะมีลำดับความสำคัญมากว่าแบบ import

3.3 ช่อง Media ใช้กำหนดชนิดของไฟล์ CSS ที่เราเขียนมา เช่นถ้าเราเขียนไฟล์ CSS อันนี้เพื่อใช้ในคำสั่ง Print ก็ให้เลือกเป็น print หรือจะไม่เลือกอะไรเลยก็ได้

4.คลิก ok ก็จะทำการลิงค์เรียบร้อย โดยที่ CSS panel จะเป็นดังรูปเราสามารถแก้ไขคำสั่งที่เขียนไปแล้วได้โดยการคลิกที่ชื่อคำสั่งที่ต้องการแก้ไข



เราสามารถลิงค์ไฟล์ CSS ในเว็บเพจได้มากกว่า 1 ไฟล์โดยใช้คำสั่งที่กล่าวมาทั้งหมด