How to use DHTML to prepare Web pages

dhtml| Web page

1 Preface

With the continuous popularization and development of internet/intranet, more and more companies, enterprises and individuals are starting to build their own web sites, write Web pages and publish information to the outside world in a new way for people to browse, read and apply. Therefore, the Web page production has been more and more professional attention.
Web pages are documents that provide information to the world over the Internet, including personal information, business, entertainment, and so on. Web pages are written using Hypertext Markup Language HTML (Hypertext Markup languge) and are stored on internet/intranet Web servers for visitors to read using the browser (Browser). Web pages written in HTML are also known as hypertext, which includes multimedia information such as text, graphics, sounds, images, and hyperlinks (HyperLink).

2 DHTML Jane

I have access to a large number of Web pages written in HTML and scripting languages in my browser. In order to facilitate browsing, the computer manufacturers have launched their own browsers, these browsers for HTML support does not have a unified standard, obviously this is not conducive to the development of the Internet. As a result, the World Wide Web Consortium (Consortium) has developed a platform-and language-independent specification, the Document Object Model DOM (Wide).
Dom combines HTML, CSS (cascading style sheets), and scripting languages to form an interoperability model that can be implemented by one or more individuals. Netscape and Microsoft have made recommendations to the consortium to implement the DOM: Use Dynamic HTML, or DHTML, to solve the problem.
DHTML is a generic term for several new features that are extended on the basis of maintaining an existing HTML compatibility. These new features mainly refers to dynamic functions, positioning functions and the use of CSS features.
There are two reasons to use DHTML: First, DHTML divides each element on a Web page into many separate objects, attributes of which are specified by CSS. The second is that DHTML opens each object to a framework for programming and scripting languages, uses programming language C + + to manipulate objects on a Web page, or uses Java script, VBScript to manipulate objects on a Web page. This means that the Web page and everything on it is programmable, which brings new functionality to the Web page. When we execute the application, we find the difference: When you run a program on the Web before, you must wait for the Web page to be downloaded each time after a single element, and if a Web page contains a large number of hidden objects, or even a completely new screen, it will go through a process of accessing the server again, and using DHTML, You can click an image at the top of the screen to immediately change the paragraph at the bottom of the screen without having to access the server again. All tables will become live databases, and users can dynamically and sort the filtered data in them. This reduces the request to the server, thus reducing the load on the server and improving the overall performance of the client and server.

3 Using style sheet CSS

DHTML is based on cascading style sheet CSS (cascading style Sheets), which refers to a set of display and positioning properties defined by the Web page author. The biggest feature of CSS is object-oriented web design, which means that each page, paragraph, image, and table are viewed as an object. Then declare each instance of the object. Each instance has a style (style), a set of properties, or a display instruction. Once declared, these properties run through the entire Web page or even the entire site. You can assign a name to each style, such as H1, Li if the name of the style is the same as the name of a valid DHTML element (or tag), the style automatically acts on each instance of the element, and if the name given to a style does not have a corresponding DHTML tag, You have to manually apply that style to where you want it to appear.
3.1 Define and use basic styles
There are two styles in the following section: H1 and FAVOR,H1 are valid DHTML elements, and the part marked by 〈h1〉〈/h1〉 in the program inherits all the attributes of the style H1; favor is a non-DHTML element. When you define it, you must precede it with a dot, use 〈class〉 to declare it, and the part of the program that is marked by 〈favor〉〈/favor〉 will inherit all the attributes of the style favor.
〈html〉
〈head〉〈title〉test〈/title〉
〈style type= "text/css〉
"!--
H1{font-style:normal;
Font-weight:bold;
Color:green;
Line-height:20pt}/define Style h1/
. Favor{font-style:normal;
Fontsize:15pt;
Background-image:url (back.imag.gif);
Textalign:center}/define Style favor/
--〉
〈/style〉
〈/head〉
〈h1〉this is A test!〈/h1〉/use styles h1/
〈p class= "f Avor "〉do you like this?〈/p〉/using styles favor/

3.2 Using external styles
The stylesheet can also be stored in an external file, which can be contacted by import or link, for example, the style sheet is stored in file Mysite.css, and the following code can be inserted into the document to invoke the external style sheet:
〈link Rel=stylesheet
href= "Mysite.css"
Type= "Text/css"
title= "Test Style"

4 Enable interactive functionality

CSS itself does not have interactivity, and to implement interactions, you must combine the objects defined by the CSS with the document model (DOM) to convert the Web document into a DHTML document. DOM provides a way to access elements on a page in a scripting language, and there are some differences between the object models supported by Microsoft and Netscape.
In the Microsoft model, scripting languages can access all elements on an HTML page, and all elements are reflected as objects in document.all. The following program segment is used to write out all the elements in the page:
for (i=0;i〈document.all.length;i++)
{
document.write (document.all[i].tagname+ "\ n");
}
In Netscape's model, scripting languages can access elements of a particular collection on an HTML page, such as the contents of a 〈layer〉 tag. The following program segment is used to write out the names of all the layer on the page:
for (i=0;i〈document.layers.length;i++)
{
document.write (document.layers[i].name+ "\ n");
}

5 The use of positioning technology

In HTML, the position of any object is always relative to the rest of the structure of the Web page, and we often make a page out of it by adding a text. Now, using the DHTML positioning technique, you can fix objects and stack them, placing multiple images in the same place on the page, and then constantly assigning the topmost objects to the animation effect.
Example:
*myback{background-color:transparent}
*mypoit
Position:absolute;
top:5in;
right:5in;
width:10in}
Body{background-image:url (/image/back.gif);}
〈class=.mypoint〉img (src=http://edu.cnzz.cn/newsinfo/"/image/a.gif")
〈div class= "Pile" id= "Image1" style= "Z-index:4"
〈div class= "Pile" id= "Image2" style= "Z-index:3"
〈div class= "Pine" id= "Image3" style= "Z-index:2"
〈div class= "Pine" id= "Image4" style= "Z-index:1"
〈/body〉
In the above program section, the background is set to let the light through the bottom of the graph, the effect of the previous is to use a special mapping tool to complete. There are also 4 images stacked on the page, and they produce a good animation effect.

6 concluding remarks

There are a number of studies on how to use DHTML to make Web pages, and there are a lot of technical issues waiting to be deepened by web makers.

Wei Smile Tan North Jiaotong University of Communications and Transport College in the postgraduate 100044 Beijing