การแปลง 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

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

ตรวจเช็คข้อมูลในฟอร์มก่อนส่งไปประมวลผล (Form Validation)

เรื่อง : การทำ Form Validation ด้วยโปรแกรม Dreamweaver เว็บโปรแกรมเมอร์ที่ต้องทำการเขียนโปรแกรมต่าง ๆ บนเว็บ มักต้องการเข...  

เปิดเส้น Grid เพื่อช่วยในการออกแบบเว็บเพจ (Enable Grid)

เรื่อง : เปิดเส้น Grid เพื่อช่วยการออกแบบเว็บเพจ (How to enable Grid view in Dreamweaver) Grid คือ ตาราง ซึ่งผู้ใช้งานโป...  

การสร้าง MySQL Connection กับ Dreamweaver

เรื่อง : การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 2 หลังจากที่เราได้ทำการเกริ่นนำสำหรับการเตรียมพร้อม...  

การลบ Tag/Code ของ HTML ที่ไม่จำเป็นออก (Clean up HTML)

เรื่อง: ลบ Tag/Code ของ HTML ที่ไม่จำเป็นออกจาก Source Code บางครั้งการสร้าง Web Page โดยใช้โปรแกรม Dreamweaver ตัวโปรแ...