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

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

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 4 [จบ]

ในตอนที่ 3 ที่ผ่านมาเราได้ทำการสร้างตารางสำหรับการแสดงผลเตรียมรอไว้แล้ว มาในตอนที่ 4 นี้ เราจะมาทำการสร้างโปรแกรมสำหรับให้ผู้เยี่ย...  

สร้าง Web Application ด้วย Dreamweaver + PHP + MySQL การเตรียมพร้อมและข้อตกลงในการเรียนรู้

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1สำหรับบทความนี้ก็จะเป็นบทความชุดนะครับคือใน 1 เร...  

สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้

เรือง :: สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้ (Drag Layer by Dreamweaver)สำหรับบทความนี้เป็นบทความการป...  

การสร้าง Popup Message แจ้งเตือนด้วยโปรแกรม Dreamweaver

เรื่อง : วิธีสร้าง Popup Message ด้วย Dreamweaver หลายท่านเข้าไปในเว็บไซค์อื่นๆ คงจะเคยพบหน้าต่างเล็กๆ [หรือไม่เล็ก] ปรา...