* Menu Technology
People who have visited the Microsoft and Macromedia sites will certainly notice the menu technology, click on the submenu, and then click on the Hidden submenu, which is interesting and practical. I downloaded the two pages, after the source analysis, found that they are not using the same method, and the two methods have pros and cons, let's look at how they are achieved.
Macromedia is based on multi-page technology. is to make a page without expanding the main menu, and then make each of the main menu after the expansion of the page, the number of main menus, you have to do how many subpages corresponding. Here's a simple example to illustrate:
<title>a Menu Example</title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<body bgcolor= "#FFFFFF" >
<a name= "ABC" ></a><p>
<a href= "MENU_2.HTM#ABC" ><b>click here!</b></a>
</body>
<title>a Menu Example</title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<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>
Click the click here! in Figure 1 to show the effect of Figure 2. Concrete implementation, must pay attention to the label <a name= "" > Definition and use, to do one by one corresponding, otherwise it will be chaos. In addition, when you have a lot of menu items, remember that only the currently listed submenu is defined with the <a name= "" >, and the other main menu items should be linked to the page that it expands accordingly.
This approach is simple enough for the average person to quickly grasp, and any browser can support it, but its drawbacks are obvious. The first is slow, back and forth to call each page will inevitably bring a long time waiting, only the page is text, only to feel the stagnation; the preparation of difficulties, although the technology is simple, but one by one to make it is a bit of trouble. Therefore, this kind of technology still has certain limitation.
Microsoft is using DHTML technology. DHTML is a relatively new technology, so there is no way for some "old" browsers to implement this kind of menu.
Let's give an example to illustrate.
As shown in Figure 3, click Product & Services to immediately appear the following menu, and then to click and hide, and Macromedia, the difference is as if a lot faster, its source code is as follows.
<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>
<body>
<script type= "Text/javascript" >
function Clikker (a,b) {
if (A.style.display = = ") {
A.style.display = ' None ';
b.src= ' http://edu.cnzz.cn/NewsInfo/usm.gif ';
}
else {
A.style.display= ';
b.src= ' http://edu.cnzz.cn/NewsInfo/http://edu.cnzz.cn/NewsInfo/dsmh.gif ';
}
}
</script>
<div class= "NV1" id= "BB" >
<dd>
Products & Services
<div class= "NV2" id= "BB1" style= "display: ';"
>
<a href= "/products/" ><p>product catalog</a>
<a href= "Technical ' >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>
In the source code,. NV1 and. NV2 are CSS font definitions, and the Clikker function is to control the display and concealment of menu items, where variable a controls text, and variable B controls the image (not shown in the picture because of the incomplete download). In practical applications, notice the scope defined by the Div, and do not hide the other main menu items when clicked.
Microsoft's implementation is relatively sophisticated, it is fast, the production is simpler, only need a page on the line. The disadvantage is that you need at least IE 4.0 or NN 4.0 version of the support.
There are pros and cons to both methods, which depends on the nature of your homepage and your support for browsers.
* Text discoloration
This is the most common technique on the Web, and when your mouse hovers over an element, the element immediately changes color and sometimes sounds like multimedia education software. If you have a good mix of colors, the page will be very pleasing.
There are a number of ways to change the color of the text, and here are just two of them.
The first approach is to simply use CSS technology, and currently only IE 4.0 supports this technology. Its sample code is as follows.
<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>
<body>
<p><a href= "www.microsoft.com" >
This is one of the simplest examples of using CSS technology to control text color .</a></p>
</body>
In this example, the link text is initially displayed in red, and when the mouse is over the text, it turns blue, and when you click on it, it changes to magenta, and then to Maroon after the visit. Because Netscape does not support link, visited, hover CSS properties, so if you use communicator, you can not see these effects.
The second approach is to use JavaScript to write a small script program to run, and thus play the purpose of discoloration. Its sample code is as follows.
<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>
<body bgcolor= "#FFFFFF" >
<span class= "Css1" id= "x"
>
Change text color .</span>
</body>
Since IE 4.0 and NN 4.0 have different control mechanisms for objects, it is necessary to check the browser before processing it accordingly. The Mm_changeprop () function implements this method of text discoloration. This approach requires that you define IDs with spans and add onmouseover and onmouseout to every place where you should change color, which is a lot more troublesome than the first method. So if you don't have a problem with Microsoft, it's better to use the first method.
* Dynamic button
The dynamic buttons here are neither. gif animations nor the various effects buttons available in FrontPage. I believe you must have encountered this situation: when your mouse across a button, it will suddenly move, seems to tempt you to click it, very interesting? Let's implement it below.
First of all, you should prepare two pictures, because it is a button, do not need to be very large, the color does not have to spend too much, simple. gif on the line, the two pictures to have some difference, so as not to move the later to see. Here are the two pictures I made.
Let's take a look at how the dynamic effects are implemented. The source code is as follows.
<title>push-in buttons</title>
<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.http://edu.cnzz.cn/newsinfo/home.gif";
Toc1off = new Image (42, 197);
TOC1OFF.SRC = "Http://edu.cnzz.cn/NewsInfo/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 ')" >
width=100 height=50 border=0 name= "Toc1" ></a>
</body>
There are two places to look at:
1. Be sure to give the IMG a name, and then apply the name to the source image definition.
2. Note the various symbols in the source file, especially quotes, but also pay attention to the source picture file path, preferably with a relative path, so that the site can not be uploaded after the normal display. Of course, this way of exchanging pictures also requires more than 4.0 version of the browser support, if you are still using the 3.0 version of the browser, quickly upgrade it!
* Prompt words
Put the mouse on a picture can appear prompt information, like a lot of software buttons give the same function hints. This feature is easy to implement in Web page editing, so let's look at the effect.
It's easy to achieve this effect, just look at the source code.
......
<tr>
<TD width= "><a" href= "who.html" target= "main"
>
Src= "Http://edu.cnzz.cn/images/button_who0.gif" Name= "who"
title= "Kin personal little file" alt= "Who am I?"
Border= "0" width= "113" height= "></a><a"
href= "who.html" target= "_parent"
></a></td>
</tr>
......
The underlined part of the code is the way to implement it. Title This attribute is very useful! It can be used in all elements except base, Basefont, head, HTML, META, PARAM, SCRIPT, STYLE, title, to define the hint of an obsolete mouse stroke.
We have discussed some of the tips in the process of Web page development in detail. On the web there are many well-designed, technologically advanced pages, analysis of their source code is a good way to learn. Computer technology is constantly improving, facing these new technologies: DHTML, CSS, XML ... We only go to the difficult to grasp it, and apply it to our web page, so that our web page more active.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
