About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

สร้างปุ่มกด Submit ของ Form ด้วยรูปภาพ [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



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

ตรวจสอบโค้ด HTML ว่าได้มาตรฐานหรือไม่

เรื่อง : ตรวจสอบมาตรฐานของ HTML Code ด้วย Dreamweaver โค้ด HTML ที่ใช้ในการพัฒนาเว็บ...  

สารพัดปัญหา Dreamweaver ติดต่อกับ Database (MySQL) ไม่ได้

เรื่อง: ปัญหาการใช้โปรแกรม Dreamweaver สร้าง Connection กับฐานข้อมูลไม่ได้ "Dreamweaver ติดต่อกั...  

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

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

สร้างปุ่มกดให้กลายเป็น Link (Button Link with Dreamweaver)

เรื่อง : การทำปุ่มกดให้เป็นลิงค์เพื่อกดไปหน้าอื่นด้วย Dreamweaver โดยปรกติถ้าต้องการสร้าง Link บนหน้าเว็บเพจ เราต้อ...  


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

*
*
*