%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89 Properties Panel %E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%B3%E0%B8%AB%E0%B8%99%E0%B8%94%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B8%AA%E0%B8%A1%E0%B8%9A%E0%B8%B1%E0%B8%95%E0%B8%B4%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B9%81%E0%B8%81%E0%B9%88%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1 [Article ID : 102]

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

Properties Panel เป็นส่วนที่ใช้ในการกำหนดคุณสมบัติให้กับสิ่งต่าง ๆ ที่ปรากฏในหน้าจอ Document หรือที่ปรากฎอยู่บนเว็บเพจที่ได้สร้างไว้ ซึ่งเป็นส่วนของโปรแกรม Dreamweaver ที่เราจะมีโอกาสได้ใช้งานกันบ่อยมากครับ ดังนั้น เราควรทำความเข้าใจเรื่องของการใช้งาน Properties Panel กันครับ ดังนี้

การใช้ Properties Panel

Mode การใช้งานของ Properties

ในกรณีที่ Properties เป็น Option ของข้อความ ที่ Properties จะมีโหมดสำหรับการกำหนดค่าอยู่ 2 โหมด คือ
1. HTML เป็นโหมดที่ใช้กำหนดคุณสมบัติในแบบ HTML
2. CSS เป็นโหมดที่ใช้กำหนดคุณสมบัติในแบบ CSS
ดังรูป ซึ่งเราสามารถเลือกโหมดได้โดยการคลิกไปที่ปุ่มของโหมดนั้น

สำหรับวิธีการใช้งาน Properties Panel ก็จะมีการใช้งานไม่ยุ่งยากอะไร ดังนี้

1. ที่ Document ให้เราเลือกสิ่งที่เราต้องการกำหนดคุณสมบัติ เช่น ต้องการกำหนดคุณสมบัติให้รูปภาพ ก็เลือกไปที่รูปภาพ เป็นต้น
2. จากนั้น เลือกกำหนดคุณสมบัติต่าง ๆ ได้ตามต้องการจาก Option ที่มีให้ใน Properties Panel ดังรูป

การกำหนดคุณสมบัติของ Font ข้อความ

ต่อมาเมื่อเราเข้าใจการใช้งาน Properties Panel กันบ้างแล้ว เราลองมาดูตัวอย่างการใช้งาน Properties Panel เพื่อการกำหนดคุณสมบัติให้แก่ข้อความตัวอักษร (Font) กัน ดังนี้

1. ให้ทำการพิมพ์ข้อความใด ๆ ลงไปที่ Web Page สัก 1 ย่อหน้า
2. จากนั้นทำการเลือกไปที่ข้อความที่พิมพ์ในข้อที่ 1 ดังรูป

3. ต่อมาให้มาที่ Properties Panel ของโปรแกรม เพื่อทำการกำหนดคุณสมบัติให้แก่ข้อความนั้น
4. ที่ Properties ให้เลือกที่โหมด CSS และทำการกำหนดค่าตามที่ต้องการ ดังรูป ตัวอย่างจากรูปข้างต้น เป็นการกำหนดคุณสมบัติให้แก่ข้อความ ดังนี้
- Font : Tahoma
- Font Size : 12 px (pixel)
- Font Color : #099
- Alignment : Left (ชิดซ้าย)

5. จะได้ข้อความที่มีคุณสมบัติของตัวอักษรหรือ Font ดังรูป

เมื่อเราได้ทำการกำหนดค่าข้อความจาก Properties ดังตัวอย่างข้างต้นแล้ว ให้ทำการ View Code ดูกับโปรแกรม จะพบว่า ที่เรากำหนดคุณสมบัติต่าง ๆ ไปกับ Properties นั้น จะเกิดเป็น CSS ที่เขียนอยู่กับ TAG ของ HTML ดังรูป ซึ่ง CSS ที่ถูกเขียนอยู่ภายใน Tag นี้เราเรียกว่า Inline Style ซึ่งเป็นการเขียน CSS ในรูปแบบนึง (สนใจศึกษาเพิ่มเติมคลิกที่นี้)

คลิปประกอบบทความ

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

ตอนนี้เราทราบความหมายต่าง ๆ ของการใช้งาน Properties Panel แล้ว และทราบถึงวิธีการเบื้องต้นในการใช้งานกันไปแล้วนะครับ รวมไปถึงกรณีตัวอย่างที่เราใช้ Properties Panel ในการกำหนดค่าให้แก่ข้อความด้วย
ซึ่งที่จริงแล้วยังมีรายละเอียดอีกมาก ให้เราลองใช้ลองศึกษากันดูต่อไปครับ หรือจะคอยติดตามอ่านบทความตอนต่อ ๆ ไปจาก 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

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

การแทรกวัน-เวลาเพื่อแสดงบนเว็บเพจ (Insert Date)

เรื่อง : การพิมพ์วันที่-เวลาเพื่อแสดงผลที่หน้าเว็บเพจ หลายครั้งการสร้าง Web Page ขึ้นมา เราต้องการบันทึกวัน-เวลาลงไปแสด...  

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

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

การ Insert ไฟล์ Flash Video มาใช้กับเว็บ (FLV)

เรื่อง : การ Insert ไฟล์ Flash Video มาใช้งานกับเว็บเพจด้วย Dreamweaver Dreamweaver สามารถนำไฟล์ Media...  

การใส่เสียงเพลงประกอบเว็บเพจ หรือไฟล์ Audio ให้กับเว็บ (HTML5)

เรื่อง : วิธีการใส่เสียงเพลง (Audio) ประกอบหน้าเว็บด้วยโปรแกรม Dreamweaver CC บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...