1 Introduction
With the continuous popularization and development of the Internet/Intranet, more and more companies, enterprises and individuals are beginning to build their own Web sites, write Web pages, and publish information to the outside world in a new way for people to browse. , reading and application. Therefore, web page production has attracted the attention of more and more professionals.
Web pages refer to some document files that provide information to the world through the Internet, including personal information, business, entertainment and other content. Web pages are written using HyperText Markup Language (HTML) and are stored in Web servers on the Internet/Intranet for visitors to read using a browser. Web pages written in HTML language are also called hypertext, that is, web pages contain multimedia information such as text, graphics, sounds, images, and hyperlinks (HyperLink).
2 DHTML Simple
I can access a large number of web pages written in HTML and scripting languages in the browser. In order to facilitate browsing, various computer manufacturers have launched their own browsers. These browsers do not yet have a unified standard for supporting HTML, which is obviously not conducive to the development of the Internet. Therefore, the World Wide Web Consortium (W3C) developed a platform- and language-independent specification, the Document Object Model (DOM).
DOM combines HTML, CSS (cascading style sheets) and scripting languages to form an interoperability model that one or more people can implement. Both Netscape and Microsoft made suggestions to the W3C to implement DOM: use dynamic HTML, that is, DHTML (Dynamic HTML) to solve the problem.
DHTML is a general term for several new functions that have been extended while maintaining compatibility with existing HTML. These new features mainly refer to dynamic features, positioning features and the ability to utilize CSS.
There are two reasons for using DHTML: First, DHTML divides each element on the web page into many independent objects, and the properties of these objects are specified through CSS. Second, DHTML opens each object to a programming and scripting language framework. The programming language C++ can be used to manipulate objects on the web page, and Java script and VBscript can also be used to manipulate objects on the web page. This means that the Web page and everything on it are programmable, which brings new capabilities to the Web page. We will find the difference when we execute the application: when we used to run the program on the Web, we had to wait for the web page to be re-downloaded every time after a single element. If a Web page contained a large number of hidden objects, it would even take a full screen. A brand new page will go through the process of accessing the server again; with DHTML, you can click an image at the top of the screen to make the paragraphs at the bottom of the screen change immediately without having to access the server again. All tables will become live databases, and users can filter the data dynamically and sorted. This reduces the number of requests to the server, thereby reducing the load on the server and improving overall client and server performance.
3 Using style sheets CSS
The basis of DHTML is Cascading Style Sheets (Cascading Style Sheets). Style refers to a set of display and positioning attributes defined by the Web page author. The biggest feature of CSS is object-oriented web design, that is to say, every page, every paragraph, every image and table is regarded as an object. Then declare each instance of that object. Each instance has a style, which is a set of attributes or display instructions. As long as they are declared once, these properties will be used throughout the entire web page or even the entire site. Each style can be given a name, 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 will automatically apply to every instance of the element; if given If a style is named without a corresponding DHTML tag, the style must be manually applied where you want it to appear.
3.1 Define and use basic styles. There are two styles in the following program segment: H1 and favorite. H1 is a valid DHTML element. The part marked by 〈H1〉〈／H1〉 in the program will inherit all the attributes of style H1; Favor is a non-DHTML element. When defining it, you must add a dot in front of it. When referencing it, you must use <class> to declare it. In the program, the part marked by <favor> and </favor> will inherit the style favor. All properties.
〈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 favorite／
--〉
〈／STYLE〉
〈／HEAD〉
〈H1〉THIS IS A TEST!〈／H1〉／Usage style H1／
〈P CLASS=”favor”〉DO YOU LIKE THIS?〈／P〉／Use style favor／
3.2 Using external styles Style sheets can also be stored in external files. The connection between this file and the page can be through IMPORT or LINK, for example, The style sheet is stored in the file mysite.css. You can insert the following code into the document to call the external style sheet:
〈LINK REL=STYLESHEET
HREF=”mysite.css”
TYPE=”text／css”
Title=”Test Style”〉
4 Realize interactive function
CSS itself does not have interactive function. To realize interaction, it is necessary to combine the object defined by CSS with the document model (DOM) and convert the Web document into a DHTML document. DOM provides a way for scripting languages to access elements on the page. The object models supported by Microsoft and Netscape are somewhat different.
In Microsoft's model, scripting languages have access to all elements on an HTML page, and all elements are reflected as objects in document.all. The following program snippet 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, a scripting language can access a specific set of elements on an HTML page, such as the content in the <layer> tag. The following program segment is used to write the names of all layers in 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 other parts of the web page structure. When we compile web pages, we often squeeze an image out of the page by adding a piece of text. Now, using DHTML's positioning technology, objects can be fixed and stacked, that is, multiple images are placed at the same position on the page, and then the object placed on top is continuously designated to achieve animation effects.
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=”／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 segment, the background is set to allow light to pass through the base map. This effect could only be achieved by using special drawing tools in the past. There are also 4 pictures stacked on the page, and the animation effects they produce are also very good.
6 Conclusion
The above has done some research on how to use DHTML to compile web pages. There are still many technical issues waiting for web page producers to deepen together.
Wei Xiaotan is a master student at the School of Transportation, Northern Jiaotong University, 100044, Beijing.