The new HTML 4.0 specification defined by the W3C organization ( www.w3c.org ) brings more powerful tools to every web designer. This is a change that affects all web developers and designers that many have thought about in the past. Dynamic effects that were unimaginable can now be easily achieved with the help of DHTML and CSS. Here is a detailed description of the implementation of some effects during the web page compilation process. I hope you can use it to enliven your web page.
* Menu technology
If people who have visited Microsoft and Macromedia sites are careful, they will definitely notice the menu technology. Click to display a submenu, and click again to hide the submenu. It is very interesting and practical. The author downloaded these two pages respectively. After analyzing the source code, I found that they did not use the same method, and both methods have their own pros and cons. Let us take a look at how they are implemented.
Macromedia uses multi-page technology. That is to first create a main menu page without expanded items, and then create a page for each expanded main menu item. How many sub-pages are needed to correspond to the number of items in the main menu. Let's give a simple example to illustrate:
<html>
<head>
<title>A menu example</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>Click here!</b></a>
</body>
</html >
<html>
<head>
<title>A menu example</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>Click here!</b></a > </p>
list 1
list 2
list 3
</body>
</html>
Click Click here! in Figure 1 and the effect of Figure 2 will appear. During the specific implementation, you must pay attention to the definition and use of the tag <a name=" ">, and achieve one-to-one correspondence, otherwise it will be chaotic. In addition, when there are many menu items, remember that only the currently listed submenu is defined with <a name=" ">, and other main menu items should be linked to their corresponding expanded pages.
This method is very simple to implement, can be mastered by ordinary people quickly, and can be supported by any browser, but its shortcomings are also obvious. First of all, it is slow. Calling each page back and forth will inevitably lead to a long wait. Only when the page is full of text, you will not feel stagnant; secondly, it is difficult to compile. Although the technology is simple, it is a bit troublesome to produce one by one. Therefore, this technology still has certain limitations.
Microsoft uses DHTML technology. DHTML is a relatively new technology, so for some "old" browsers, this menu implementation method is useless.
Let us give an example to illustrate.
As shown in Figure 3, click Product & Services and the following menu will appear immediately. Click again and it will disappear. It is the same as Macromedia, but the difference is that it seems to be much faster. Its source code is as follows.
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Microsoft's Homepage</title>
<style TYPE="text/css">
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -left: 14;}
.NV2 {position:relative;font-size:.9em;font-weight:normal;}
</style>
</head>
<body>
<script TYPE="text/javascript">
function 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">
Products & Services
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>Product Catalog</a>
<a HREF=" http://support.microsoft.com/support/">Technical Support</a>
<a HREF="/events/">Events & Seminars</a>
<a HREF="/train_cert/">Training & Certification</a>
<a HREF="/referral/sr_default.asp">Referrals to 3rd Parties</a> </p>
</div>
</dd>
</div>
</body>
</html>
In the source code, .NV1 and .NV2 are CSS font definitions, and the clikker function controls the display and hiding of menu items. Variable a controls text, and variable b controls images (not shown in the picture due to incomplete download). In actual application, please pay attention to the scope defined by the div and do not hide other main menu items when clicking.
Microsoft's implementation method is relatively clever, it is fast, relatively simple to create, and only requires one page. The disadvantage is that it requires at least the support of IE 4.0 or NN 4.0 or above.
Both methods have their own pros and cons. Which one you choose depends on the nature of your homepage and browser support.
* Text color changing
This is the most common technology on the Web. When your mouse moves over an element, the element immediately changes color and sometimes makes a sound, just like multimedia educational software. If you mix your colors well, the page will be very pleasing to the eye.
There are many ways to achieve text color change. Here we only briefly introduce two of them.
The first method is to simply use CSS technology. Currently, only IE 4.0 supports this technology. Its sample code is as follows.
<html>
<head>
<title>A study of population dynamics</title>
<style type="text/css">
BODY { background: white; }
A:link { color: red }
A:visited { color: maroon }
A: active { color: fuchsia }
A:hover {color:blue}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
This is the simplest example of using CSS technology to control text color.</a></p>
</body>
</html>
In this example, the link text is initially displayed in red, turns to blue when the mouse moves over the text, changes to magenta when clicked to access, and turns to maroon after accessing. Since Netscape does not yet support CSS attributes such as link, visited, and hover, you will not be able to see these effects if you use Communicator.
The second method is to use JavaScript to write a small script program to run, so as to achieve the purpose of changing color. Its sample code is as follows.
<html>
<head>
<title>Change text color</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 { font-family: "Courier New", Courier, mono; font-size: 14pt; font-style: normal; line-height: normal; font- weight: bold; color: blue}
-->
</style>
<script language="JavaScript">
function 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')">
Change the text color.</span>
</body>
</html>
Since IE 4.0 and NN 4.0 have different control mechanisms for objects, you need to check the browser first and then make the corresponding deal with. The MM_changeProp() function implements this text color changing method. This method requires defining the ID with span and adding onmouseover and onmouseout everywhere it should be changed, which is a lot more troublesome than the first method. Therefore, if you do not have a strong opinion against Microsoft, it is better to use the first method.
* Dynamic buttons
The dynamic buttons here are neither .gif animations nor the various special effect buttons provided in FrontPage. I believe you must have encountered this situation: when your mouse moves over a certain button, it will suddenly move, seeming to tempt you to click it. It's interesting, isn't it? Let's implement it below.
First of all, you should prepare two pictures. Since they are buttons, they don’t have to be very big and the colors don’t have to be too fancy. A simple .gif will do. There should be some differences between the two pictures so that they won’t be visible after moving. Below are two pictures I made.
Next let's take a look at how dynamic effects are achieved. Its source code is as follows.
<html>
<head>
<title>Push-In Buttons</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion );
if ( browserVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = new Image(42, 197);
toc1on.src = "on.home.gif";
toc1off = new Image(42, 197);
toc1off.src = "home.gif";
}
function img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function 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>
There are two things that should be noted:
1. Be sure to assign a name to img, and then apply this name at the source image definition.
2. Pay attention to various symbols in the source file, especially quotation marks, and also pay attention to the path of the source image file. It is best to use a relative path to prevent the site from not displaying properly after uploading. Of course, this method of exchanging images also requires the support of a browser version 4.0 or above. If you are still using a browser version 3.0, upgrade as soon as possible!
* If prompted,
put the mouse on a picture and the prompt information will appear, just like the buttons of many software that give function prompts. This function is easy to implement in web page editing. Let’s take a look at its effect.
It's easy to achieve this effect, just look at the source code.
......
<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="who"
title="Zhou Huajian's personal profile" ALT="Who am I"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" ONMOUSEOUT="img_inact('who')">
</a></td>< /tr>
...
the underlined part of the code is how to do it. The Title attribute is very useful! It can be used in all elements except BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, and TITLE to define prompt information when the mouse passes over it.
Above we have discussed in detail some tips in the web page compilation process. There are many beautifully designed and technologically advanced pages on the Web, and analyzing their source code is a good way to learn. Computer technology is constantly advancing. Faced with these new technologies coming one after another: DHTML, CSS, XML... we can only face the difficulties, master them, and apply them to our web pages to make our web pages more Get active.
(Tianjin Jixian Tourism Bureau 301900 Jia Hejing)