การแปลง CSS ในแบบ Inline Style Sheet ให้เป็น Internal หรือ External Style Sheet [Article ID : 214]

เรื่อง : การใช้ Convert Inline CSS to Rule เปลี่ยน CSS

การเขียน CSS เพื่อทำการตบแต่งเว็บเพจ บางครั้งนักพัฒนาเว็บชอบที่จะเขียน CSS ในแบบ Inline หรือการเขียนลงไปบน TAG ที่ใช้ในการกำกับข้อมูลต่าง ๆ ของหน้าเว็บเพจ
...ซึ่งการเขียน CSS ในแบบ Inline อาจจะดูไม่เหมาะสมเสียเท่าไหร่นัก เนื่องจาก CSS ในรูปแบบนี้จะสามารถใช้งานได้เพียงไฟล์เว็บเพจเดียวและจุดเดียวทั้งเว็บเพจ ซึ่งการเลือกที่จะนำเอาชุดคำสั่ง CSS ที่เขียนในแบบ Inline นำไปใช้เป็น Internal หรือ External หรือเขียนไว้เป็น Class หรือ ID นักพัฒนาเว็บต้องทำการ Copy คำสั่งเหล่านั้นไปเขียนที่ตำแหน่ง Head หรือที่ไฟล์ CSS อีกครั้ง แน่นอน การทำลักษณะนี้จะเสียเวลาหรืออาจจะเกิดข้อผิดพลาดได้ง่าย
...แต่ถ้าคุณใช้ Dreamweaver ในการพัฒนาเว็บไซต์ Dreamweaver มีเมนูคำสั่งที่จะช่วยให้งานแบบนี้เป็นไปได้อย่างง่ายดาย..ลองมาดูกันว่าทำอย่างไร ?

การใช้ Dreamweaver แปลง CSS ในแบบ Inline ไปเป็น Internal หรือ External Style Sheet

จากรูปจะพบว่ามีการเขียน CSS ในแบบ Inline ลงไปที่ TAG กำกับข้อมูล ซึ่งเมื่อเราต้องการให้ CSS ที่ TAG ใดนำไปใช้เป็น Internal หรือ External Style Sheet ให้เราทำการ Click ขวาลงณ.ที่ TAG ที่มี CSS อยู่นั้น จากนั้นเลือกที่ CSS Styles -> Convert Inline CSS to Rule... ดังรูป จากนั้นโปรแกรมจะทำการเปิดหน้าต่างขึ้นมาเพื่อให้เราทำการกำหนดค่าให้แก่ Option ต่าง ๆ ดังรูป การกำหนดค่า

1. กำหนดชื่อ Calss หรือ ID
2. กำหนดว่าต้องการให้เป็น Internal หรือ External Style Sheet
   • เลือก Style Sheet หากต้องการกำหนดให้เป็นแบบ External (แยกเก็บเป็นไฟล์ CSS)
   • เลือก The head of this document หากต้องการกำหนดใหเป็นแบบ Internal (เขียน CSS ไว้ที่ Head ของเพจนี้)
   ในที่นี้เลือกกำหนดให้เป็นแบบ Internal style sheet และกำหนดชื่อ Class ชื่อว่า .font12

เมื่อได้แล้วกดปุ่ม OK
จะพบว่า Dreamweaver ได้ทำการนำเอา CSS ในแบบ Inline ไปกำหนดเป็น Class ไว้ที่ Head ของเพจตามที่เราได้กำหนดค่าไป และโปรแกรมยังได้ทำการกำหนด Attribute Class เพื่อใช้งาน CSS ในส่วนที่ได้ทำการนำออกไปแล้วให้แก่เพจเราด้วย ดังรูป

อย่างไรก็ลองปฏิบัติกันดูนะครับ สำหรับบทความนี้
ออ... Convert Inline CSS to Rule.. นั้นท่านสามารถเรียกใช้ได้จากมุมมอง Design ของโปรแกรมได้ด้วยนะครับ ดังรูป

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การกำหนด Properties หรือคุณสมบัติของตาราง

เรื่อง : การกำหนดคุณสมบัติ หรือ Properties ให้แก่ตาราง (Table) ในบทก่อนได้กล่าวถึงการสร้างตารางไปแล้ว และได้อธิบายถึงกา...  

การกำหนดคุณสมบัติให้เว็บเพจ (Page Properties)

เรื่อง : กำหนดคุณสมบัติให้เว็บเพจด้วย Page Properties หลังจากที่ได้ทำการ New File ขึ้นมากับโปรแกรม Drea...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

วิธีการใช้ Properties Panel และการกำหนดคุณสมบัติให้แก่ข้อความ

เรื่อง : การใช้ Properties Panel และการกำหนดคุณสมบัติข้อความเบื้องต้น Properties Panel เป็นส่วนที่ใช้ใ...