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%9B%E0%B8%B8%E0%B9%88%E0%B8%A1%E0%B8%81%E0%B8%94 Submit %E0%B8%82%E0%B8%AD%E0%B8%87 Form %E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E [Article ID : 52]


เรื่อง : การสร้างปุ่ม Submit แบบใช้รูปภาพด้วย Dreamweaver

เห็นตามเว็บบอร์ดต่าง ๆ มักมีผู้สนใจอยากจะทำปุ่ม Submit ของ Form โดยการใช้รูปภาพแทนปุ่มกดปรกติที่ Web Browser แสดงผล ทั้งนี้ก็เพื่อเพิ่มความสวยงาน และความน่าสนใจให้แก่ฟอร์มกรอกข้อมูลหน้าเว็บ

ผมก็เห็นว่าน่าสนใจดี และตัว Dreamweaver เองก็สามารถทำได้ง่าย ๆ อยู่แล้ว โดยที่เราไม่ต้องเขียน Code อะไรเลยครับ บทความนี้ก็เลยขอมาแนะนำวิธีการทำปุ่มในรูปแบบดังกล่าวกัน ด้านล่างนี้คือตัวอย่างครับ..

ขั้นตอนการสร้างปุ่ม Submit ด้วยรูปภาพ

ก่อนอื่นให้เตรียมไฟล์รูปภาพ รูปไม่ต้องใหญ่มาก ใช้รูปประเภทพวก Icon เล็ก ๆ พอ และสร้าง Form รวมถึง Input ต่าง ๆ ให้เสร็จก่อนนะครับ ดังนี้

1. ให้คุณเตรียมรูปภาพที่จะนำมาทำเป็นปุ่มกด Submit เช่น  
2. จากนั้นให้คุณทำการสร้าง Form ที่คุณต้องการให้เสร็จสิ้นเสียก่อน
3. เมื่อทำการสร้าง Form และ Input ต่าง ๆ เสร็จสิ้นแล้ว ให้ไปที่ Panel ที่ชื่อว่า Insert แล้วเลือกไปที่ TAB ที่ชื่อว่า Forms จากนั้น Click เลือกไปที่ icon ที่ชื่อว่า Image Field/Image Button (อาจแตกต่างจากในรูป ขึ้นอยู่กับเวอร์ชั่นของ Dreamweaver ที่คุณใช้งาน) ดังรูป Image Field
*สำหรับ Dreamweaver CC ใช้ Image Button ดั่งรูป Image Button
4. เมื่อเลือกที่ไอคอนดังกล่าวแล้ว จะมีหน้าต่างเปิดใหม่ออกมา ให้เราทำการเลือกไฟล์รูปภาพที่เราเตรียมไว้ในข้อที่ 1
5. เมื่อเราเลือกไฟล์รูปภาพที่เราต้องการได้เป็นที่เรียบร้อยแล้วก็กด OK เป็นอันเสร็จสิ้นการนำไฟล์รูปมาทำเป็นปุ่ม Submit แล้วครับ ง่ายไหม ?

:: การปรับแต่ง ::

หากคุณต้องการปรับแต่งคุณสมบัติของรูปภาพที่นำมาวางนั้นเพิ่มเติม ให้คุณทำการ Click ที่รูปภาพนั้น จากนั้นให้ไปที่ Properties ดังรูป
ที่ Properties นี้ เราสามารถปรับแต่งคุณสมบัติต่าง ๆ ได้ดังนี้
- Src คือ ตำแหน่งที่อยู่ของไฟล์รูปภาพ
- Alt คือ ข้อความอธิบายรูปภาพ ข้อความจะปรากฏเมื่อผู้ใช้นำเมาท์มาวางบนรูป
- Align คือ ตำแหน่งการจัดวางของรูป
- Edit Image หากท่านต้องการแก้ไขรูปภาพ ให้คลิ๊กได้ที่ปุ่มนี้
ก็เสร็จสิ้นแล้วครับ สำหรับการนำเอารูปภาพมาใช้เป็นปุ่ม Submit ของ Form เพื่อให้สวยงามดูน่าใช้มากยิ่งขึ้น แต่ทั้งนี้และทั้งนั้น...รูปที่เรานำมาใช้ ควรให้สื่อสารสักนิดนะครับว่า นี่คือปุ่มกด ไม่ใช่รูปภาพ มิฉะนั้น...คนเข้าเว็บเราอาจจะสับสนได้ครับ.
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



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

เปิดใช้งาน Server Behaviors ให้กับ Dreamweaver CC

เรื่อง: การเปิดใช้งาน Server Behaviors ของ Dreamweaver CC เพื่อใช้งาน Dreamweaver Database Dreamweaver เวอร์ชั่น ...  

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only)

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar *Dreamweaver CC ไม่มีให้ใช้ครับ Spry เป็น Framework...  

การสร้างโปรแกรมสำหรับแสดงข้อมูลจาก Database (Select Data)

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 4ในตอนก่อนเราได้ทำการสร้าง Form และโปรแกรมส...  

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

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


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

*
*
*