"จะสร้างหน้าต่างป๊อปอัปได้อย่างไร" นี่เป็นคำถามที่ผู้เริ่มต้น Dreamweaver มักถาม เพียงค้นหาเว็บไซต์ที่ให้เอฟเฟกต์พิเศษ หรือดาวน์โหลดเครื่องมือเอฟเฟกต์พิเศษแล้ววางโค้ด! มันยังไม่ใช่เรื่องง่าย ที่จริงแล้ว วิธีที่ง่ายกว่าคือการใช้ Dreamweaver ที่เราใช้งานบ่อยที่สุด หน้าต่างป๊อปอัปปกติสามารถดำเนินการให้เสร็จสิ้นได้ด้วยการคลิกเพียงไม่กี่ครั้ง ไม่เชื่อเหรอ? มาดู! เพียงทำตามขั้นตอนต่อไปนี้แล้วคุณสามารถสร้างเอฟเฟกต์หน้าต่างป๊อปอัปได้อย่างง่ายดาย
1. ขั้นแรก เรียกแผงพฤติกรรมจาก Window->Behaviors ในแถบเมนู หรือกดปุ่มทางลัด Shift+F3 โดยตรง
2. ตามที่แสดงในภาพ ให้กดเครื่องหมาย "+" ที่มุมซ้ายบนของแผงลักษณะการทำงานเพื่อเพิ่มลักษณะการทำงาน และเลือกลักษณะการทำงาน "เปิดหน้าต่างเบราว์เซอร์" ในเมนูป๊อปอัป
3. หลังจากเลือกลักษณะการทำงานแล้ว กรอบโต้ตอบ Open Browser Window จะปรากฏขึ้น ดังแสดงในรูป เพียงกรอกข้อมูลหน้าต่างที่เกี่ยวข้องในกล่องโต้ตอบแล้วคลิก "ตกลง" เพื่อปรับแต่งหน้าต่างป๊อปอัปให้เสร็จสิ้น ใน
"URL ที่จะแสดง": สำหรับที่อยู่ของหน้าเว็บที่คุณต้องการแสดงในหน้าต่างใหม่ คุณสามารถป้อนที่อยู่โดยตรงหรือกดปุ่ม "เรียกดู" เพื่อระบุ
"ความกว้างของหน้าต่าง" และ "ความสูงของหน้าต่าง": คือความกว้างและความสูงของหน้าต่างใหม่ตามลำดับ ในหน่วย px
"แอตทริบิวต์": เป็นลักษณะของหน้าต่าง
"แถบเครื่องมือนำทาง", "แถบเมนู", "แถบเครื่องมือตำแหน่ง", "แถบเลื่อนตามต้องการ", "แถบสถานะ", "ตัวจัดการปรับขนาด"
แสดงถึงแถบเครื่องมือ แถบเมนู แถบเครื่องมือการวางตำแหน่ง แถบเลื่อน และหมายเลขอ้างอิงเปลี่ยนขนาดตามลำดับ การเลือกเครื่องหมายถูกที่ด้านหน้าตำแหน่งที่เกี่ยวข้องหมายความว่าหน้าต่างใหม่มีคุณสมบัติที่เกี่ยวข้อง
“Window Name”: คือชื่อของหน้าต่างเป้าหมาย คุณสามารถเลือกอันใดอันหนึ่งหรือระบุชื่อหน้าต่างในกลุ่มเฟรมก็ได้ เมื่อสร้างหน้าต่างป๊อปอัป เพียงตั้งชื่อแบบสุ่ม
หลังจากทำตามขั้นตอนข้างต้นเสร็จแล้ว แผงพฤติกรรมจะกลายเป็นเช่นนี้ ซึ่งบ่งชี้ว่าหน้าต่างการเรียกดูใหม่จะเปิดขึ้นขณะโหลดเพจ (onLoad)
ที่จริงแล้ว กระบวนการเพิ่มพฤติกรรมในแผงพฤติกรรมนั้นเป็นกระบวนการของ Dreamweaver ในการสร้างโค้ด Javascript ในขั้นตอนข้างต้น รหัสต่อไปนี้ได้ถูกสร้างขึ้น แสดงด้วยตัวหนาด้านล่าง ความคิดเห็นระหว่าง "< !—" และ "-- >" คือความคิดเห็นสำหรับโค้ดส่วนนี้:
<html>
<หัว>
<title>เอกสารที่ไม่มีชื่อ</title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< ภาษาสคริปต์ = "จาวาสคริปต์" >
-
ฟังก์ชัน MM_openBrWindow (theURL, winName, คุณสมบัติ) { //v2.0
window.open(theURL,winName,คุณสมบัติ);
-
-
</ /script >< !—เปิดหน้าต่างตามค่าที่ส่ง -- >
</ /หัว>
< body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow('yourpage.htm', 'winname','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes, ปรับขนาดได้=ใช่,ความกว้าง=300,ความสูง=200')">
< !—ตั้งค่าของแต่ละแอตทริบิวต์ของหน้าต่างป๊อปอัป ส่งค่าไปยังพารามิเตอร์ทางการที่เกี่ยวข้องแต่ละรายการ และตั้งค่าเหตุการณ์การเริ่มทำงานเป็น onLoad-->
เอฟเฟกต์หน้าต่างป๊อปอัป
</ ร่างกาย >
</ /html >
คุณสามารถเข้าใจโค้ดด้านบนได้ดังนี้: เมื่อเหตุการณ์ onLoad เริ่มทำงาน (นั่นคือ เมื่อรูปภาพหรือเพจสิ้นสุดการโหลด) ระบบจะเรียกเมธอด MM_openBrWindow() และค่า
"'yourpage.htm', 'winname', 'toolbar=yes,location=yes, status=yes,menubar=yes,scrollbars=yes, ปรับขนาดได้=yes,width=300,height=200'"
(ในที่นี้เรียกว่าพารามิเตอร์จริง) ส่งผ่านพารามิเตอร์อย่างเป็นทางการที่เกี่ยวข้อง - "theURL, winName, features" เพื่อใช้งานโดย window.open() โปรดทราบว่าพารามิเตอร์ทั้งสามจะต้องอยู่ในเครื่องหมายคำพูดเดี่ยว ในบรรดารหัสเหล่านี้ ประโยคที่สำคัญที่สุดคือ:
"window.open(theURL,winName,ฟีเจอร์)"
ความหมายคือในหน้าต่างชื่อ winName ให้เปิดเพจตามที่อยู่ URL ตามคุณสมบัติที่ระบุโดยฟีเจอร์
หลังจากเข้าใจความหมายของโค้ดแล้ว เราก็รู้ได้เลยว่าโค้ดสามารถเขียนได้โดยตรงดังนี้: เพิ่มใน <body>
onLoad="window.open('yourpage.htm', 'winname','toolbar=yes, location=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=300,height=200' )"
หนึ่งประโยค วิธีเขียนนี้ไม่แตกต่างจากเอฟเฟกต์ของ Dreamweaver ที่สร้างโค้ดโดยอัตโนมัติ
เรารู้ความหมายของพารามิเตอร์ทั้งสามใน window.open() แล้ว โดยตัวแรกคือที่อยู่ของหน้าที่จะแสดง พารามิเตอร์ที่สองคือชื่อของหน้าต่างเป้าหมาย และพารามิเตอร์ที่สามคือคำอธิบายลักษณะที่ปรากฏของ หน้าต่าง. ฉันจะไม่ลงรายละเอียดเกี่ยวกับพารามิเตอร์ตัวแรกและตัวที่สอง สำหรับพารามิเตอร์ตัวที่สาม เราสามารถเขียนได้
"'แถบเครื่องมือ=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, width=300, height=200,left=100, top=100'"
ในที่นี้ แถบเครื่องมือแสดงถึงแถบเครื่องมือ ตำแหน่ง แสดงถึงแถบที่อยู่ ไดเร็กทอรี แสดงถึงแถบนำทาง สถานะ แสดงถึงแถบสถานะ แถบเมนู แสดงถึงแถบเมนู แถบเลื่อน แสดงถึงแถบเลื่อน ปรับขนาดได้ แสดงถึงจุดจับเปลี่ยนขนาด และความกว้างและความสูง แสดงถึง ความกว้างและความสูงของหน้าต่างตามลำดับด้านซ้ายและด้านบนแสดงถึงตำแหน่งที่หน้าต่างปรากฏขึ้น
ค่าของแถบเครื่องมือ ตำแหน่ง ไดเร็กทอรี สถานะ แถบเมนู แถบเลื่อน และปรับขนาดได้สามารถตั้งค่าเป็น ใช่ ไม่ใช่ 1 หรือ 0 ได้ ใช่ (1) หมายความว่าหน้าต่างใหม่มีคุณสมบัตินี้ และไม่ (0) ไม่ได้ ควรกรอกค่าความกว้าง ความสูง ด้านซ้าย และด้านบนด้วยตัวเลขและมีหน่วยเป็น px
พูดมากเข้าใจมั้ย? การเพิ่มพฤติกรรมและสร้างหน้าต่างป๊อปอัปใน Dreamweaver ไม่ใช่เรื่องง่ายใช่ไหม การเขียนโค้ดด้วยมือไม่ใช่เรื่องยากใช่ไหม? ตราบใดที่คุณฝึกฝนมากขึ้นอีกนิดในช่วงเวลาสั้นๆ คุณจะรู้สึกว่า: ปรากฎว่าการสร้างหน้าต่างป๊อปอัปนั้นง่ายมาก!