ข้อกำหนด HTML 4.0 ใหม่ที่กำหนดโดยองค์กร W3C ( www.w3c.org ) นำเครื่องมือที่มีประสิทธิภาพมากขึ้นมาสู่นักออกแบบเว็บไซต์ทุกคน นี่คือการเปลี่ยนแปลงที่ส่งผลต่อนักพัฒนาเว็บและนักออกแบบทั้งหมดที่หลายคนเคยนึกถึงในอดีต ตอนนี้สามารถบรรลุสิ่งที่เป็นไปไม่ได้ได้อย่างง่ายดายด้วยความช่วยเหลือของ DHTML และ CSS ต่อไปนี้เป็นคำอธิบายโดยละเอียดเกี่ยวกับการใช้เอฟเฟกต์บางอย่างในระหว่างกระบวนการรวบรวมหน้าเว็บ ฉันหวังว่าคุณจะสามารถใช้มันเพื่อทำให้หน้าเว็บของคุณมีชีวิตชีวา
* เทคโนโลยีเมนู
หากผู้ที่เคยเยี่ยมชมเว็บไซต์ Microsoft และ Macromedia ระมัดระวัง พวกเขาจะสังเกตเห็นเทคโนโลยีเมนูอย่างแน่นอน คลิกเพื่อแสดงเมนูย่อย และคลิกอีกครั้งเพื่อซ่อนเมนูย่อย ถือว่าน่าสนใจและใช้งานได้จริง ผู้เขียนดาวน์โหลดทั้งสองหน้านี้ตามลำดับ หลังจากวิเคราะห์ซอร์สโค้ดแล้ว ฉันพบว่าพวกเขาไม่ได้ใช้วิธีการเดียวกัน และทั้งสองวิธีก็มีข้อดีและข้อเสียต่างกันไป
Macromedia ใช้เทคโนโลยีหลายเพจ นั่นคือการสร้างหน้าเมนูหลักโดยไม่มีรายการที่ขยาย จากนั้นจึงสร้างหน้าสำหรับรายการเมนูหลักที่ขยายแต่ละรายการ ขอยกตัวอย่างง่ายๆ เพื่อแสดงให้เห็น:
<html>
<head>
<title>ตัวอย่างเมนู</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF ">
<a name="abc"></a><p>
<a href="menu_2.htm#abc"><b>คลิกที่นี่!</b></a>
</body>
</html >
<html>
<head>
<title>ตัวอย่างเมนู</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="# FFFFFF">
<p><a name="abc"></a></p>
<p><a href="menu_1.htm#abc">
<b>คลิกที่นี่!</b></a > </p>
รายการ 1
รายการ 2
รายการ 3
</ร่างกาย>
</html>
คลิกคลิกที่นี่! ในรูปที่ 1 และเอฟเฟกต์ของรูปที่ 2 จะปรากฏขึ้น ในระหว่างการใช้งานเฉพาะ คุณต้องใส่ใจกับคำจำกัดความและการใช้แท็ก <a name=" "> และบรรลุการติดต่อแบบหนึ่งต่อหนึ่ง มิฉะนั้นจะเกิดความวุ่นวาย นอกจากนี้ เมื่อมีรายการเมนูจำนวนมาก โปรดจำไว้ว่าเฉพาะเมนูย่อยที่แสดงอยู่ในปัจจุบันเท่านั้นที่ถูกกำหนดด้วย <a name=" "> และรายการเมนูหลักอื่นๆ ควรเชื่อมโยงกับหน้าที่ขยายที่สอดคล้องกัน
วิธีนี้ใช้งานง่ายมาก คนทั่วไปสามารถเข้าใจได้อย่างรวดเร็ว และเบราว์เซอร์ใดก็ได้รองรับ แต่ข้อบกพร่องของมันก็ชัดเจนเช่นกัน ประการแรกมันช้า การเรียกแต่ละหน้าไปมาจะทำให้การรอนานอย่างหลีกเลี่ยงไม่ได้ การผลิตทีละรายการค่อนข้างลำบาก ดังนั้นเทคโนโลยีนี้ยังคงมีข้อจำกัดอยู่บ้าง
Microsoft ใช้เทคโนโลยี DHTML DHTML เป็นเทคโนโลยีที่ค่อนข้างใหม่ ดังนั้นสำหรับเบราว์เซอร์ "เก่า" บางรุ่น การใช้เมนูนี้ไม่มีประโยชน์
ให้เรายกตัวอย่างเพื่ออธิบาย
ดังแสดงในรูปที่ 3 คลิก Product & Services แล้วเมนูต่อไปนี้จะปรากฏขึ้นทันที คลิกอีกครั้งก็จะหายไป เช่นเดียวกับ Macromedia แต่ต่างกันตรงที่ Source Code จะเป็นดังนี้ .
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>ยินดีต้อนรับสู่โฮมเพจของ Microsoft</title>
<style TYPE="text/css">
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin - ซ้าย: 14;}
.NV2 {ตำแหน่ง: ญาติ; ขนาดตัวอักษร: .9em; ตัวอักษรน้ำหนัก: ปกติ;}
</ สไตล์>
</หัว>
<ร่างกาย>
<script TYPE="ข้อความ/จาวาสคริปต์">
ฟังก์ชั่น clikker(a,b) {
if (a.style.display ==') {
a.style.display = 'none';
b.src='usm.gif'
}
else {
a.style.display=' ;
b.src='dsmh.gif';
}
}
</script>
<div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);">
<dd><img ID="BBp " SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11">
ผลิตภัณฑ์และบริการ
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>แค็ตตาล็อกผลิตภัณฑ์</a>
<a HREF=" http://support.microsoft.com/support/">การสนับสนุนทางเทคนิค </a>
<a HREF="/events/">กิจกรรมและการสัมมนา</a>
<a HREF="/train_cert/">การฝึกอบรมและการรับรอง</a>
<a HREF="/referral/sr_default.asp">การอ้างอิงถึงบุคคลที่สาม</a> </p>
</div>
</dd>
</div>
</body>
</html>
ในซอร์สโค้ด .NV1 และ .NV2 เป็นคำจำกัดความแบบอักษร CSS และฟังก์ชันคลิกเกอร์จะควบคุมการแสดงผลและการซ่อนรายการเมนู ตัวแปร a ควบคุมข้อความ และตัวแปร b ควบคุมรูปภาพ (ไม่แสดงในรูปภาพเนื่องจากการดาวน์โหลดไม่สมบูรณ์) ในการใช้งานจริง โปรดใส่ใจกับขอบเขตที่กำหนดโดย div และอย่าซ่อนรายการเมนูหลักอื่นๆ เมื่อคลิก
วิธีการปรับใช้ของ Microsoft นั้นค่อนข้างฉลาด รวดเร็ว สร้างได้ง่าย และต้องการเพียงหน้าเดียวเท่านั้น ข้อเสียคือต้องรองรับ IE 4.0 หรือ NN 4.0 ขึ้นไปเป็นอย่างน้อย
ทั้งสองวิธีมีข้อดีและข้อเสียต่างกันไป วิธีใดที่คุณเลือกขึ้นอยู่กับลักษณะของหน้าแรกและการสนับสนุนเบราว์เซอร์ของคุณ
* การเปลี่ยนสีข้อความ
นี่เป็นเทคโนโลยีที่พบบ่อยที่สุดบนเว็บ เมื่อเมาส์ของคุณเลื่อนไปเหนือองค์ประกอบ องค์ประกอบนั้นจะเปลี่ยนสีทันทีและบางครั้งก็ส่งเสียง เช่นเดียวกับซอฟต์แวร์เพื่อการศึกษาด้านมัลติมีเดีย หากผสมสีได้ดีหน้าจะน่ามองมาก
มีหลายวิธีในการเปลี่ยนสีข้อความ ในที่นี้เราจะแนะนำเพียงสองวิธีสั้นๆ เท่านั้น
วิธีแรกคือการใช้เทคโนโลยี CSS ในปัจจุบัน มีเพียง IE 4.0 เท่านั้นที่รองรับเทคโนโลยีนี้ รหัสตัวอย่างมีดังนี้
<html>
<head>
<title>การศึกษาพลวัตของประชากร</title>
<style type="text/css">
BODY { พื้นหลัง: สีขาว; }
A:link { สี: สีแดง }
A:visited { สี: maroon }
A: ใช้งานอยู่ { สี: สีแดงม่วง }
A:hover {สี:สีฟ้า}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
นี่เป็นตัวอย่างที่ง่ายที่สุดของการใช้เทคโนโลยี CSS เพื่อควบคุมสีข้อความ</a></p>
</body>
</html>
ในตัวอย่างนี้ ข้อความลิงก์จะแสดงเป็นสีแดงในตอนแรก เปลี่ยนเป็นสีน้ำเงินเมื่อเลื่อนเมาส์ไปเหนือข้อความ เปลี่ยนเป็นสีม่วงแดงเมื่อคลิกเพื่อเข้าถึง และเปลี่ยนเป็นสีแดงหลังจากเข้าถึง เนื่องจาก Netscape ยังไม่รองรับแอตทริบิวต์ CSS เช่น ลิงก์ เยี่ยมชม และโฮเวอร์ คุณจะไม่สามารถเห็นเอฟเฟกต์เหล่านี้ได้หากคุณใช้ Communicator
วิธีที่สองคือการใช้ JavaScript เพื่อเขียนโปรแกรมสคริปต์ขนาดเล็กเพื่อรันเพื่อให้บรรลุวัตถุประสงค์ในการเปลี่ยนสี รหัสตัวอย่างมีดังนี้
<html>
<head>
<title>เปลี่ยนสีข้อความ</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 { ตระกูลแบบอักษร: "Courier ใหม่", Courier, โมโน; น้ำหนัก: ตัวหนา; สี: สีฟ้า}
-->
</style>
<script language = "JavaScript">
ฟังก์ชั่น MM_changeProp(objStrNS,objStrIE,theProp,theValue) {
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);
if ((theObj != null) && (theProp.indexOf("style.") != 0 &&
theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<span class="css1" ID="x"
onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">
เปลี่ยนสีข้อความ</span>
</body>
</html>
เนื่องจาก IE 4.0 และ NN 4.0 มีกลไกการควบคุมที่แตกต่างกันสำหรับออบเจ็กต์ คุณต้องตรวจสอบเบราว์เซอร์ก่อนแล้วจึงทำ ข้อตกลงที่เกี่ยวข้องด้วย ฟังก์ชัน MM_changeProp() ใช้วิธีการเปลี่ยนสีข้อความนี้ วิธีการนี้จำเป็นต้องกำหนด ID ด้วย span และเพิ่ม onmouseover และ onmouseout ทุกที่ที่ควรเปลี่ยน ซึ่งยุ่งยากกว่าวิธีแรกมาก ดังนั้นหากคุณไม่มีความคิดเห็นที่ชัดเจนต่อ Microsoft ควรใช้วิธีแรกจะดีกว่า
* ปุ่มไดนามิก
ปุ่มไดนามิกในที่นี้ไม่ใช่ทั้งภาพเคลื่อนไหว .gif หรือปุ่มเอฟเฟกต์พิเศษต่างๆ ที่มีให้ใน FrontPage ฉันเชื่อว่าคุณคงเคยเจอสถานการณ์นี้: เมื่อเมาส์ของคุณเลื่อนไปเหนือปุ่มใดปุ่มหนึ่ง มันจะเคลื่อนไหวทันที ดูเหมือนว่าคุณจะอยากคลิกมัน มันน่าสนใจใช่ไหม? มาปรับใช้กันด้านล่าง
ก่อนอื่น คุณควรเตรียมรูปภาพสองรูป เนื่องจากเป็นปุ่ม จึงไม่จำเป็นต้องมีขนาดใหญ่มากและสีก็ไม่จำเป็นต้องดูหรูหราเกินไป รูปแบบ .gif ธรรมดาๆ ก็ควรมีความแตกต่างกันบ้าง สองภาพเพื่อไม่ให้มองเห็นได้หลังจากเคลื่อนย้าย ด้านล่างนี้เป็นสองภาพที่ฉันทำ
ต่อไปเรามาดูกันว่าเอฟเฟกต์ไดนามิกเกิดขึ้นได้อย่างไร ซอร์สโค้ดของมันมีดังนี้
<html>
<head>
<title>ปุ่มแบบกดเข้า</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion );
if ( browserVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = รูปภาพใหม่ (42, 197);
toc1on.src=
"on.home.gif";
รูปภาพ (42, 197);
toc1off.src = "home.gif"
;
ฟังก์ชั่น img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(
imgName + "on.src");
document [imgName].src = imgOn
;
ฟังก์ชั่น img_inact(imgName)
{
if (versionButton == "3")
{
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
// -->
</script>
< a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')"><img src=home.gif
width=100 height=50 border=0 name ="toc1"></a>
</body>
</html>
มีสองสิ่งที่ควรสังเกต:
1. อย่าลืมกำหนดชื่อให้กับ img จากนั้นจึงใช้ชื่อนี้กับคำจำกัดความของรูปภาพต้นฉบับ
2. ให้ความสนใจกับสัญลักษณ์ต่างๆ ในไฟล์ต้นฉบับ โดยเฉพาะเครื่องหมายคำพูด และให้ความสนใจกับเส้นทางของไฟล์รูปภาพต้นฉบับด้วย วิธีที่ดีที่สุดคือใช้เส้นทางสัมพัทธ์เพื่อป้องกันไม่ให้เว็บไซต์แสดงอย่างถูกต้องหลังจากอัปโหลด แน่นอนว่าวิธีการแลกเปลี่ยนรูปภาพนี้ต้องรองรับเบราว์เซอร์เวอร์ชัน 4.0 ขึ้นไป หากคุณยังคงใช้เบราว์เซอร์เวอร์ชัน 3.0 อยู่ ให้อัปเกรดโดยเร็วที่สุด!
* หากได้รับแจ้ง
ให้วางเมาส์บนรูปภาพและข้อมูลแจ้งจะปรากฏขึ้น เช่นเดียวกับปุ่มต่างๆ ของซอฟต์แวร์ต่างๆ ที่ให้ฟังก์ชันแจ้ง ฟังก์ชันนี้ง่ายต่อการนำไปใช้ในการแก้ไขหน้าเว็บ
บรรลุผลนี้ได้อย่างง่ายดาย เพียงดูที่ซอร์สโค้ด
......
<tr>
<td WIDTH="57"><a HREF="who.html" TARGET="main"
ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who') "><img
SRC="../images/button_who0.gif" NAME="ใคร"
title="โปรไฟล์ส่วนตัวของ Zhou Huajian" ALT="ฉันคือใคร"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" ONMOUSEOUT="img_inact('who')">
</a></td>< /tr>
...
ส่วนที่ขีดเส้นใต้ของโค้ดคือวิธีการทำ คุณลักษณะ Title มีประโยชน์มาก! สามารถใช้ในทุกองค์ประกอบ ยกเว้น BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE และ TITLE เพื่อกำหนดข้อมูลที่พร้อมท์เมื่อเมาส์ผ่านไป
ข้างต้นเราได้กล่าวถึงรายละเอียดเคล็ดลับบางประการในกระบวนการรวบรวมหน้าเว็บแล้ว มีหน้าเว็บที่ได้รับการออกแบบอย่างสวยงามและมีเทคโนโลยีขั้นสูงอยู่มากมายบนเว็บ และการวิเคราะห์ซอร์สโค้ดของหน้าเว็บเหล่านี้เป็นวิธีการเรียนรู้ที่ดี เทคโนโลยีคอมพิวเตอร์มีความก้าวหน้าอย่างต่อเนื่อง เมื่อต้องเผชิญกับเทคโนโลยีใหม่ ๆ เหล่านี้ที่ตามมา: DHTML, CSS, XML... เราทำได้เพียงเผชิญกับความยากลำบาก ฝึกฝนมัน และนำไปใช้กับหน้าเว็บของเราเพื่อทำให้หน้าเว็บของเราใช้งานได้มากขึ้น
(สำนักงานการท่องเที่ยวเทียนจิน จี้เซียน 301900 เจีย เหอจิง)