About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

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

Go to Post-iT Sign Guestbook

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

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น [Article ID : 7]

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้องมีการกะระยะเส้นแนวเพื่อให้ Object ต่าง ๆ ที่วางบนหน้าเว็บเป็นแนวเดียวเสมอกัน การกะระยะหรือแนวด้วยสายตา บางครั้งก็เกิดความยากลำบาก ทำให้ได้ระยะหรือแนวที่ไม่เท่าหรือม่เสมอกันเกิดขึ้น ดังนั้น โปรแกรม Dreamweaver จึงมีไม้บรรทัด หรือ Rulers และเส้น Guides มาช่วยเรา โดยผู้ใช้โปรแกรมทำการเปิดใช้งาน ดังนี้

การเปิดใช้ Rules

ก่อนที่จะไปทำการเปิดใช้ ให้ทำการเปิดไฟล์เว็บเพจ หรือทำการ New File ขึ้นมากับ Dreamweaver เสียก่อน จากนั้นทำการเปิดใช้ได้ ดังนี้

1. จากนั้นไปที่ Menu -> View -> Rules -> Show ดังรูป

2. จะพบว่า โปรแกรมแสดงไม้บรรทัดขึ้นมา ซึ่งจะแสดงอยู่ด้ายซ้ายมือ และด้านบนของเว็บเพจ ดังรูป

การใช้เส้น Guides

เมื่อได้ทำการเปิด Rulers หรือไม้บรรทัดขึ้นมาแล้ว ผู้ใช้งานโปรแกรม Dreamweaver สามารถทำการใช้งานเส้นไกด์ได้ ดังนี้

3. ที่ Rulers ด้านที่ต้องการใช้งานเส้นไกด์ ทำการ Drag เมาท์ลากจากไม้บรรทัดมาวางไว้ยังหน้าเว็บเพจในตำแหน่งที่ต้องการ ดังรูป

4. ที่หน้าเว็บเพจก็จะแสดงเส้นไกด์ให้ ดังรูป

การปรับแต่งเส้นไกด์ (Guides Line)

ผู้ใช้งานโปรแกรม สามารถปรับแต่งเส้นไกด์ได้จาก Menu -> Guides -> เลือกรายการปรับแต่งตามต้องการ ดังรูป

อย่างไรก็ลองใช้กันดู สำหรับ Rulers และเส้น Guides ที่แนะนำไป...สวัสดีครับ.

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

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

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 2

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 2 ต่อจากตอนที่ 1 ที่เราได้ทำการ Create ไฟล์สำหรับการเริ่...

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 3 [จบ]

เรื่อง : สร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 3 [จบ] ในตอนที่ 2 ของบทความเรื่องนี้ เรา...

การสร้างโปรแกรมสำหรับการ Insert ข้อมูล

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