การสร้าง Popup Message แจ้งเตือนด้วยโปรแกรม Dreamweaver [Article ID : 5]

เรื่อง : วิธีสร้าง Popup Message ด้วย Dreamweaver

หลายท่านเข้าไปในเว็บไซค์อื่นๆ คงจะเคยพบหน้าต่างเล็กๆ [หรือไม่เล็ก] ปรากฎขึ้นมาขณะที่เรากดไปที่ปุ่ม หรือกระทำอะไรสักอย่างที่หน้าเว็บของเขา อาจจะปรากฎขึ้นมาเป็นการแจ้งเตือน หรืออื่น ๆ ซึ่งเราเรียกกันว่า Popup Message หรือหน้าต่าง Alert ซึ่งหน้าต่างลักษณะดังกล่าว เราจะสามารถสร้างขึ้นมาได้จาก JavaScript ครับ แต่สำหรับผู้ที่ใช้ Dreamweaver นั้น มี Option ให้เราสามารถสร้างได้อย่างง่ายดาย อย่างไรลองศึกษาจากบทความนี้ดู

ขั้นตอนการสร้าง Popup Message

ก่อนที่จะไปสร้าง Popup Message นั้น ให้เราคิดพิจารณาก่อนว่า เราต้องการให้ Popup Message แสดงขึ้นมาเมื่อเกิดอะไรขึ้นที่หน้าเว็บของเรา เช่น ต้องการให้ Popup Message แสดงขึ้นเมื่อมีการกดไปที่ปุ่มกดบนหน้าเว็บ เป็นต้น เมื่อเราคิดดังกล่าวได้แล้ว ให้ทำการปฏิบัติตามขั้นตอน ดังนี้


1. สร้างปุ่มกด (Button) ให้กับหน้าเว็บ (Insert -> Form -> Button)
2. เมื่อได้ปุ่มกดแล้ว ใช้เมาทฺ์เลือกไปที่ปุ่มกดที่สร้าง
3. จากนั้นทำการเปิดหน้าต่าง Behaviors ขึ้นมา โดยไปที่ Menu -> Window -> Behaviors ดังรูป 4. ที่หน้าต่าง Behaviors คลิกที่เครื่องหมายบวก ( + ) หรือปุ่ม Add behavior แล้วเลือกที่รายการ Popup Message ดังรูป 5. โปรแกรมเปิดหน้าต่าง Popup Message ขึ้นมา ให้ทำการพิมพ์ข้อความที่ต้องการให้แสดงบนหน้าต่าง Popup Message ดังรูป *เมื่อพิมพ์ข้อความแล้วกดที่ปุ่ม OK

6. ทำการ Save ไฟล์และกดปุ่ม F12 เพื่อ Preview ทำการทดสอบ โดยการกดไปที่ปุ่มที่เราสร้างไว้บนหน้าเว็บ ดังรูป *เมื่อกดที่ปุ่ม จะปรากฎหน้าต่าง Popup Message หรือ Alert ขึ้นมา

ทั้งนี้หากทดสอบโดยการกดไปที่ปุ่มแล้ว ไม่ปรากฎ Popup Message แสดงขึ้น ให้ทำการตรวจสอบที่หน้าต่าง Behaviors ว่า Popup Message ที่สร้างนั้น ได้ทำงานร่วมกับ OnClick Event หรือไม่ ดังรูป หากไม่ได้ทำงานที่ OnClick ให้ทำการแก้ไขเสีย (อ่านเรื่อง Event ประกอบ)

การสร้าง Popup Message ตามที่ได้แนะนำมา เราไม่จำเป็นต้องนำไปใช้กับการกดที่ปุ่มอย่างเดียวครับ เราสามารถนำไปใช้กับ Object อื่นก็ได้เช่นกัน เช่น นำไปใช้กับ Image หรือรูปภาพ เมื่อมีคนนำเมาท์มาวางบนรูป (OnMouseOver) จะแสดง Popup Message เป็นต้น ซึ่งขึ้นอยู่กับการคิดพิจารณาของเรา.. อย่างไรลองใช้กันดู...สวัสดีครับ.

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

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

วิธีการทำรูปพื้นหลัง (Background Image) ของเว็บเพจไม่ให้กระทำซ้ำ

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat) บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป...  

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

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

CSS Layout ด้วย Dreamweaver ตอนที่ 2

เรื่อง : CSS Layout ด้วย Dreamweaver ตอนที่ 2เมื่อเราได้ทำการกำหนดโครงสร้างของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต...  

Dreamweaver กับข้อมูล XML

เรื่อง : Dreamweaver กับการใช้งานข้อมูลในรูปแบบ XML ความสามารถหนึ่งที่ Dreamweaver ในเวอร์ชั่น CS3 ที่มีมาให้ด้วย คือ ควา...