ข้อกำหนด HTML 4.0 ใหม่ที่กำหนดโดยองค์กร W3C ( www.w3c.org ) นำเครื่องมือที่มีประสิทธิภาพมากขึ้นมาสู่นักออกแบบเว็บไซต์ทุกคน นี่คือการเปลี่ยนแปลงที่ส่งผลต่อนักพัฒนาเว็บและนักออกแบบทั้งหมดที่หลายคนเคยนึกถึงในอดีต ตอนนี้สามารถบรรลุสิ่งที่เป็นไปไม่ได้ได้อย่างง่ายดายด้วยความช่วยเหลือของ DHTML และ CSS ต่อไปนี้เป็นคำอธิบายโดยละเอียดเกี่ยวกับการใช้เอฟเฟกต์บางอย่างในระหว่างกระบวนการรวบรวมหน้าเว็บ ฉันหวังว่าคุณจะสามารถใช้มันเพื่อทำให้หน้าเว็บของคุณมีชีวิตชีวา
* เทคโนโลยีเมนู
หากผู้ที่เคยเยี่ยมชมเว็บไซต์ Microsoft และ Macromedia ระมัดระวัง พวกเขาจะสังเกตเห็นเทคโนโลยีเมนูอย่างแน่นอน คลิกเพื่อแสดงเมนูย่อย และคลิกอีกครั้งเพื่อซ่อนเมนูย่อย ถือว่าน่าสนใจและใช้งานได้จริง ผู้เขียนดาวน์โหลดทั้งสองหน้านี้ตามลำดับ หลังจากวิเคราะห์ซอร์สโค้ดแล้ว ฉันพบว่าพวกเขาไม่ได้ใช้วิธีการเดียวกัน และทั้งสองวิธีก็มีข้อดีและข้อเสียต่างกันไป
Macromedia ใช้เทคโนโลยีหลายเพจ นั่นคือการสร้างหน้าเมนูหลักโดยไม่มีรายการที่ขยาย จากนั้นจึงสร้างหน้าสำหรับรายการเมนูหลักที่ขยายแต่ละรายการ ขอยกตัวอย่างง่ายๆ เพื่อแสดงให้เห็น:
คลิกที่นี่!
รายการ 1
รายการ 2
รายการ 3
คลิกคลิกที่นี่! ในรูปที่ 1 และเอฟเฟกต์ของรูปที่ 2 จะปรากฏขึ้น ในระหว่างการใช้งานเฉพาะ คุณต้องใส่ใจกับคำจำกัดความและการใช้แท็ก และบรรลุการติดต่อแบบหนึ่งต่อหนึ่ง มิฉะนั้นจะเกิดความวุ่นวาย นอกจากนี้ เมื่อมีรายการเมนูจำนวนมาก โปรดจำไว้ว่าเฉพาะเมนูย่อยที่แสดงอยู่ในปัจจุบันเท่านั้นที่ถูกกำหนดด้วย และรายการเมนูหลักอื่นๆ ควรเชื่อมโยงกับหน้าที่ขยายที่สอดคล้องกัน
วิธีนี้ใช้งานง่ายมาก คนทั่วไปสามารถเข้าใจได้อย่างรวดเร็ว และเบราว์เซอร์ใดก็ได้รองรับ แต่ข้อบกพร่องของมันก็ชัดเจนเช่นกัน ประการแรกมันช้า การเรียกแต่ละหน้าไปมาจะทำให้การรอนานอย่างหลีกเลี่ยงไม่ได้ การผลิตทีละรายการค่อนข้างลำบาก ดังนั้นเทคโนโลยีนี้ยังคงมีข้อจำกัดอยู่บ้าง
Microsoft ใช้เทคโนโลยี DHTML DHTML เป็นเทคโนโลยีที่ค่อนข้างใหม่ ดังนั้นสำหรับเบราว์เซอร์ "เก่า" บางรุ่น การใช้เมนูนี้ไม่มีประโยชน์
ให้เรายกตัวอย่างเพื่ออธิบาย
ดังแสดงในรูปที่ 3 คลิก Product & Services แล้วเมนูต่อไปนี้จะปรากฏขึ้นทันที คลิกอีกครั้งก็จะหายไป เช่นเดียวกับ Macromedia แต่ต่างกันตรงที่ Source Code จะเป็นดังนี้ .
นี่เป็นตัวอย่างที่ง่ายที่สุดของการใช้เทคโนโลยี CSS เพื่อควบคุมสีข้อความ
ในตัวอย่างนี้ ข้อความลิงก์จะแสดงเป็นสีแดงในตอนแรก เปลี่ยนเป็นสีน้ำเงินเมื่อเลื่อนเมาส์ไปเหนือข้อความ เปลี่ยนเป็นสีม่วงแดงเมื่อคลิกเพื่อเข้าถึง และเปลี่ยนเป็นสีแดงหลังจากเข้าถึง เนื่องจาก Netscape ยังไม่รองรับแอตทริบิวต์ CSS เช่น ลิงก์ เยี่ยมชม และโฮเวอร์ คุณจะไม่สามารถเห็นเอฟเฟกต์เหล่านี้ได้หากคุณใช้ Communicator
วิธีที่สองคือการใช้ JavaScript เพื่อเขียนโปรแกรมสคริปต์ขนาดเล็กเพื่อรันเพื่อให้บรรลุวัตถุประสงค์ในการเปลี่ยนสี รหัสตัวอย่างมีดังนี้
onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')"> เปลี่ยนสีข้อความ
เนื่องจาก IE 4.0 และ NN 4.0 มีกลไกการควบคุมที่แตกต่างกันสำหรับออบเจ็กต์ คุณต้องตรวจสอบเบราว์เซอร์ก่อนแล้วจึงทำ ข้อตกลงที่เกี่ยวข้องด้วย ฟังก์ชัน MM_changeProp() ใช้วิธีการเปลี่ยนสีข้อความนี้ วิธีการนี้จำเป็นต้องกำหนด ID ด้วย span และเพิ่ม onmouseover และ onmouseout ทุกที่ที่ควรเปลี่ยน ซึ่งยุ่งยากกว่าวิธีแรกมาก ดังนั้นหากคุณไม่มีความคิดเห็นที่ชัดเจนต่อ Microsoft ควรใช้วิธีแรกจะดีกว่า
* ปุ่มไดนามิก
ปุ่มไดนามิกในที่นี้ไม่ใช่ทั้งภาพเคลื่อนไหว .gif หรือปุ่มเอฟเฟกต์พิเศษต่างๆ ที่มีให้ใน FrontPage ฉันเชื่อว่าคุณคงเคยเจอสถานการณ์นี้: เมื่อเมาส์ของคุณเลื่อนไปเหนือปุ่มใดปุ่มหนึ่ง มันจะเคลื่อนไหวทันที ดูเหมือนว่าคุณจะอยากคลิกมัน มันน่าสนใจใช่ไหม? มาปรับใช้กันด้านล่าง
ก่อนอื่น คุณควรเตรียมรูปภาพสองรูป เนื่องจากเป็นปุ่ม จึงไม่จำเป็นต้องมีขนาดใหญ่มากและสีก็ไม่จำเป็นต้องดูหรูหราเกินไป รูปแบบ .gif ธรรมดาๆ ก็ควรมีความแตกต่างกันบ้าง สองภาพเพื่อไม่ให้มองเห็นได้หลังจากเคลื่อนย้าย ด้านล่างนี้เป็นสองภาพที่ฉันทำ
ต่อไปเรามาดูกันว่าเอฟเฟกต์ไดนามิกเกิดขึ้นได้อย่างไร ซอร์สโค้ดของมันมีดังนี้
< a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')">
width=100 height=50 border=0 name ="toc1">
มีสองสิ่งที่ควรสังเกต:
1. อย่าลืมกำหนดชื่อให้กับ img จากนั้นจึงใช้ชื่อนี้กับคำจำกัดความของรูปภาพต้นฉบับ
2. ให้ความสนใจกับสัญลักษณ์ต่างๆ ในไฟล์ต้นฉบับ โดยเฉพาะเครื่องหมายคำพูด และให้ความสนใจกับเส้นทางของไฟล์รูปภาพต้นฉบับด้วย วิธีที่ดีที่สุดคือใช้เส้นทางสัมพัทธ์เพื่อป้องกันไม่ให้เว็บไซต์แสดงอย่างถูกต้องหลังจากอัปโหลด แน่นอนว่าวิธีการแลกเปลี่ยนรูปภาพนี้ต้องรองรับเบราว์เซอร์เวอร์ชัน 4.0 ขึ้นไป หากคุณยังคงใช้เบราว์เซอร์เวอร์ชัน 3.0 อยู่ ให้อัปเกรดโดยเร็วที่สุด!
* หากได้รับแจ้ง
ให้วางเมาส์บนรูปภาพและข้อมูลแจ้งจะปรากฏขึ้น เช่นเดียวกับปุ่มต่างๆ ของซอฟต์แวร์ต่างๆ ที่ให้ฟังก์ชันแจ้ง ฟังก์ชันนี้ง่ายต่อการนำไปใช้ในการแก้ไขหน้าเว็บ
บรรลุผลนี้ได้อย่างง่ายดาย เพียงดูที่ซอร์สโค้ด
......
ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who') "> SRC="../images/button_who0.gif" NAME="ใคร" title="โปรไฟล์ส่วนตัวของ Zhou Huajian" ALT="ฉันคือใคร" BORDER="0" WIDTH="113" HEIGHT="45 ">
< /tr>
...
ส่วนที่ขีดเส้นใต้ของโค้ดคือวิธีการทำ คุณลักษณะ Title มีประโยชน์มาก! สามารถใช้ในทุกองค์ประกอบ ยกเว้น BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE และ TITLE เพื่อกำหนดข้อมูลที่พร้อมท์เมื่อเมาส์ผ่านไป
ข้างต้นเราได้กล่าวถึงรายละเอียดเคล็ดลับบางประการในกระบวนการรวบรวมหน้าเว็บแล้ว มีหน้าเว็บที่ได้รับการออกแบบอย่างสวยงามและมีเทคโนโลยีขั้นสูงอยู่มากมายบนเว็บ และการวิเคราะห์ซอร์สโค้ดของหน้าเว็บเหล่านี้เป็นวิธีการเรียนรู้ที่ดี เทคโนโลยีคอมพิวเตอร์มีความก้าวหน้าอย่างต่อเนื่อง เมื่อต้องเผชิญกับเทคโนโลยีใหม่ ๆ เหล่านี้ที่ตามมา: DHTML, CSS, XML... เราทำได้เพียงเผชิญกับความยากลำบาก ฝึกฝนมัน และนำไปใช้กับหน้าเว็บของเราเพื่อทำให้หน้าเว็บของเราใช้งานได้มากขึ้น
(สำนักงานการท่องเที่ยวเทียนจิน จี้เซียน 301900 เจีย เหอจิง)