About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B8%8A%E0%B8%A1%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%AA%E0%B8%B2%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%96%E0%B8%88%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%84%E0%B8%A5%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B8%A2%E0%B9%89%E0%B8%B2%E0%B8%A2%E0%B9%84%E0%B8%9B%E0%B8%A1%E0%B8%B2%E0%B9%84%E0%B8%94%E0%B9%89 [Article ID : 57]


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


สำหรับบทความนี้เป็นบทความการประยุกติ์ใช้งาน Layer อีกรูปแบบหนึ่งที่ตัวโปรแกรม Dreamweaver มีมาให้เราเรียกใช้งาน ให้ท่านผู้อ่านทดลองทำการ Click Mouse ที่รูปรถ 2 ตุ๊ก ด้านบนนะครับ แล้วลองจับลากไปมาครับ เพื่อความเข้าใจมากยิ่งขึ้น..

:: วิธีการทำ ::


1. ให้เราทำการวาด Layer ลงไปบน Document Window พร้อมทั้งทำการ Insert รูปภาพเข้าไปยัง Layer ที่ทำการวาดไว้ ดังรูป


2. จากนั้นให้ทำการ Click เลือกที่ Selector TAG ของ ไว้ ดังรูป


3. จากนั้นให้เราไปที่ Behaviors Panel แล้วเลือกไปที่เมนู Drag Layer ดังรูป


3. เมื่อเลือกไปที่เมนูดังกล่าวแล้ว จะปรากฏหน้าต่างใหม่ขึ้นมา ดังรูป


ที่หน้าต่าง Drag Layer นี้ เราสามารถกำหนดคุณสมบัติของขอบเขตการลาก (Drag) เลเยอร์ที่ต้องการได้ ซึ่งมี 2 Tab ให้เราเลือกใช้งาน คือ

- Basic สำหรับการกำหนดคุณสมบัติในแบบเบื้องต้นที่ไม่ซับซ้อนมากนัก

- Advanced สำหรับการกำหนดคุณสมบัติเพิ่มเติมในแบบที่ซับซ้อนมากขึ้น

ให้เราเลือกไปที่ Tab Basic แล้วทำการกำหนดคุณสมบัติเบื้องต้น ดังนี้

- Layer ให้เราเลือกไปที่ Layer ID ที่เราต้องการจะทำการกำหนด Behaviors ในการ Drag นี้

- Movement ให้เราทำการเลือกไปที่ Option ที่เราต้องการ ซึ่งจะมีอยู่ 2 option ดังนี้

Unconstrained - เลือกค่านี้หากคุณไม่ต้องการบังคับขอบเขตของการ Drag Layer ที่ต้องการ

Constrained - เลือกค่านี้ หากคุณต้องการกำหนดขอบเขตของการ Drag Layer ที่ต้องการ (หากเลือกที่ค่านี้ จะต้องทำการกำหนดค่าต่าง ๆ เพิ่มเติม)
ในรูปผมเลือกไปที่ Constrained


4. เมื่อเราได้ทำการกำหนดคุณสมบัติต่าง ๆ ตามที่ต้องการแล้ว จากนั้น Click ที่ปุ่ม OK

5. ให้เราไปที่ Panel ที่ชื่อว่า Behaviors อีกครั้งเพื่อตรวจสอบ Events ที่ได้จากการสร้าง หาก Event ที่ปรากฏใน Behaviors ไม่ใช่ OnLoad ให้เราทำการเปลี่ยนเป็น OnLoad นะครับ โดยการ Click ไปที่เครื่องหมายรูปสามเหลี่ยม ดังรูป


6. เป็นอันเสร็จสิ้นการใช้งาน Drag Layer ในเบื้องต้นครับ สำหรับรายละเอียดอื่น ๆ ให้คุณทำการทดสอบกำหนดค่าต่าง ๆ แล้วดูผลลัพธ์กับ Browser ตามที่ต้องการ
About the Author
Mr.Sittichai Raksasuk

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



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

เทคนิคการใช้หน้าต่าง CSS Designer ของ Dreamweaver CC

เรื่อง : แนะนำเทคนิคการใช้งาน CSS Designer Panel ของ Dreamweaver CC CSS Designer Panel เป็นหน้าต่างที่ใช้ใ...  

สร้างปุ่มควบคุมการแสดงของไฟล์ Flash

เรื่อง : สร้างปุ่มควบคุมการแสดงของไฟล์ Flash Flash หากเราต้องการควบคุมการแสดงหรือการเล่น Movie เราอาจจะต้องเขียน Action S...  

มาสร้างปุ่มปิด Web Browser กัน (Snippets Panel)

เรื่อง : การสร้างปุ่มปิด Web Browser บางครั้งเราเข้าไปชมเว็บเพจของบางเว็บไซต์ คุณเคยสังเกตไหมครับว่า บางหน้าเว็บเขาจะแสดง...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*