About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop [Article ID : 2]

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง

โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag & Drop เพื่อช่วยให้ผู้ใช้งานโปรแกรม ไม่ต้องพิมพ์โค้ดด้วยตนเอง สำหรับในบทความนี้จะมาแนะนำ การลากและวางเพื่อเรียกใช้งานไฟล์ CSS ในแบบ External Stylesheet (CSS ที่แยกเก็บโค้ดไว้เป็นไฟล์ต่างหาก เช่น design.css เป็นต้น)

วิธีการเรียกใช้งานไฟล์ CSS ในแบบลากและวาง

ก่อนที่จะไปดูขั้นตอนต่าง ๆ ให้ทำการเปิดไฟล์เว็บเพจขึ้นมาไว้กับโปรแกรม Dreamweaver จากนั้นปฏิบัติตาม ดังนี้

1. คลิกเลือกมุมมองของโปรแกรมไปในส่วนของ Code View ดังรูป

2. จากนั้นให้เปิด Files Panel ขึ้นมา (Menu -> Window -> Files) ดังรูป

3. ที่หน้าต่าง Files ให้เลือกไฟล์ CSS ที่ต้องการนำมาใช้กับเว็บเพจที่เปิดอยู่ *ไฟล์นามสกุล .css
4. ทำการคลิกเลือกไฟล์ CSS และทำการลาก (Drag) ไปวางไว้ในตำแหน่งของโค้ด ดังรูป

5. ทำการปล่อยเมาท์เพื่อวางไฟล์ (Drop) ที่ตำแหน่งที่ต้องการ ดังรูป

6. โปรแกรมจะทำการสร้างโค้ดในการเรียกใช้ไฟล์ CSS ให้ ซึ่งโค้ดที่ได้ คือ

<link rel="stylesheet" type="text/css" href="design.css">

ซึ่งเป็นโค้ดที่ใช้ในการเรียกใช้ CSS ในรูปแบบ External Stylesheet

ความสามารถด้าน Drag & Drop ของโปรแกรม Dreamweaver ยังมีอีกมากครับ ซึ่ง DwThai.Com จะนำเสนอกันต่อ ๆ ไป
...โปรดคอยติดตาม

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

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

สร้าง Popup Window ด้วย Open Browser Window

เรื่อง : การทำ Popup Window กำหนดขนาดหน้าต่าง Web Browser คงจะเคยเข้าไปตามเว็บ ซึ่งเขาอาจจะมีปุ่มกด ซึ่งเมื่อกดไปที่ปุ่ม...

เมาท์ (Mouse) มาตารางเปลี่ยนสี (CSS Pseudo-classes)

เรื่อง : เมาท์มาตารางเปลี่ยนสีด้วย CSS มีผู้ชมที่ติดตามเว็บ DwThai.Com ขอกันเข้ามามากครับเกี่ยวกับการทำเทคนิคนี้ ซึ่งคุณคงจ...

การสร้างข้อความในแบบ Tooltip กับ Dreamweaver (Spry Tooltip, CS Only)

เรื่อง : การสร้างข้อความแบบ Tooltip ด้วยโปรแกรม Dreamweaver *บทความนี้เฉพาะโปรแกรม Dreamweaver เวอร์ชั่น CS5, CS6 สำหรับ CC ไม่มีให้เรียกใ...

Dreamweaver กับข้อมูล XML

เรื่อง : Dreamweaver กับการใช้งานข้อมูลในรูปแบบ XML ความสามารถหนึ่งที่ Dreamweaver ในเวอร์ชั่น CS3 ที่มีมาให้ด้วย คือ ควา...