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

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

การออกแบบเว็บเพจให้ชิดขอบของ Web Browser

เรื่อง : วิธีทำให้ Web Page ชิดขอบของ Web Browser หากการออกแบบ Web Page แล้วมีปัญหาในเรื่องของการแสดงผลว่า...ทำไมเว็บเพจ...  

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...  

ซ่อน URL บน Address Bar

เรื่อง :: ซ่อน URL บน Address Barมีผู้สอบมามากมายว่าจะทำอย่างไรให้ URL บน Address Bar คงที่อยู่ตลอดเวลา โดยไม่เปลี่ยนแปลงไ...  

การติดตั้ง Dreamweaver Extension ในแบบ Command Line

เรื่อง : วิธีการติดตั้ง Extension ในแบบ Command Line Dreamweaver CC 2015 (หรือเวอร์ชั่นที่สูงกว่า) ท่าน...