14th about the dynamic effect of web pages

A friend who frequently accesses the Internet must have such an experience. When a webpage is opened, an image will be moved in slowly, or when the mouse stops on an image, it will become another image. This is DHTML, A dynamic web page that people love.
Dynamic Web pages allow interactions between visitors and webpages, allowing Web page elements (text, images, etc.) to display simple animated effects.
Frontpage2000 provides a method for creating dynamic web pages. There are three ways to achieve dynamic effects: DHTML tools, components, and HTML statements. The first two methods are easy and intuitive to operate. You can easily create your own dynamic web pages.
There is also a so-called dynamic website on the Internet. This type of website has a database (called ASP space) on the server, which is programmed using ASP, PHP, and other network languages. The maintenance is relatively simple. Visitors with permissions can add content to the website. Large websites and forums are generally dynamic websites.
I. Use DHTML tools to achieve dynamic effects on webpages
1. DHTML effect Toolbar
Right-click any position on the toolbar of the FrontPage window and select "DHTML effect" from the shortcut menu. The "DHTML effect" toolbar shown in the window is displayed. Using this toolbar, you can click, double-click, and hover the mouse based on your wishes. Text changes when you move the mouse over a piece of text, remind the viewer. Enables dynamic effects on text and images.

The buttons and list boxes on the toolbar are described as follows:
1) in the "enable" drop-down list box, selectEvent. That is, what operations of the browser can produce dynamic results? There are four types of events to choose from:
● CLICK: When a site visitor points to a webpage element and presses the left mouse button, the animation starts.
● Double-click: When a site visitor points to a webpage element and double-click the mouse button, the animation starts.
● Hover: an animation starts when a site visitor points to and spreads on Webpage elements.
● Webpage loading: When a webpage is loaded into a browser of a site visitor, the animation starts. That is, when a webpage is loaded for the first time, it does not need to be triggered by the user's mouse, the visitor only needs to use the browser to open it and the preset dynamic effect will be generated. 2) in the "application" drop-down list box, select the dynamic effectType. Different trigger events have different dynamic effects. For example, you can select eight types of dynamic effects for "webpage loading", while "hover over" only supports "format.
3) The "Select Settings" drop-down list box is used to select a specific dynamic effect. For example, the fly-in dynamic effects include bottom and right.
4) Click the delete effect button to delete the dynamic effect.
5) Click the "highlight dynamic HTML effect" button. When you press the button, web page elements with the dynamic effect set will be highlighted. For example, a blue background color appears.
2. Basic Steps for using DHTML:
● In the webpage view mode, DHTML objects (such as text and images) should be selected;
● Select an event from the "enable" drop-down list on the DHTML toolbar (the text and image events are different ); ● select an effect type from the "application" drop-down list;
● Finally, set the effect in the "Select Settings" drop-down list.
[Note] the next drop-down list is valid only after the previous drop-down list is selected (from virtual to real ).
The following describes how to set the dynamic effects of text and images:
1) dynamic text Effect
When setting the dynamic HTML effect of a text, the unit is paragraph.
Select a text segment or text segment (if only one segment is set, you only need to set the light to any position in the segment ), click the drop-down button on the right of the "enable" box in the "DHTML effect" toolbar and click "hover" in the drop-down list. Then, the "application" box on the right is changed from virtual to real. Click the drop-down button on the right of the "application" box and select an effect from the "application" drop-down list. Only "format" is available. The "Select Settings" box on the right is changed from virtual to real. Click the drop-down button on the right of the select settings box. In the drop-down box, click Select font or select border to open the font dialog box or border and shadow dialog box. In the dialog box, set the desired format and click "OK" to complete the settings. In this case, the background of the text segment is changed to the light blue (the "highlight dynamic HTML effect" button is pressed ).

In "preview", the background color returns to normal:

However, when the mouse pointer moves to the set text segment, the text will become the set effect (in this example, it will be set to blue, 36-pound "文" font ):

Note: If the font, font size, and color of the original text are not the default (normal) value, the new setting of the dynamic effect does not take effect. In this example, "moderator" cannot set the DHTML effect font to another format.
In the same way, if you set an event to "webpage loading", you can also achieve "Bounce", "fly in", and many other interesting effects. You can try it yourself!
2) dynamic effects of images
DHTML effects of images can also be achieved using the "DHTML effects" toolbar. For a "hover over" event, there is only one effect of "switching images. In the FrontPage window, open the home page of "Old urchin Website" and select the "Computer World" stamp image. In the "DHTML effect" dialog box, click the drop-down button on the right of the "enable" box and click "hover over" in the drop-down box. Then, the "application" box on the right is changed from virtual reality. In the "application" box, select "swap image", click on the right of the "Select Settings" box, and select "select image..." in the drop-down box ...", In the "image" dialog box, click the image you want to add (the "Computer World" stamp image that is scaled up), and then click "OK" to complete the settings:

After saving the home page, click "file" and "preview in Browser". When you move the cursor to the "Computer World" stamp, the stamp will be enlarged, the description text of the image also appears, and the left and right pictures below show the scenes before and after the mouse hover respectively:

　　[Note] when setting the DHTML effect of an image, the size of the first and second images must be the same (at least similar ). Otherwise, the next image will be severely distorted. Although the size of the seal in the previous "Computer World" stamp is smaller than that in the latter one, the size of the stamp is still the same as that of the image. This is displayed in the light blue background of "highlight dynamic HTML effect" in the editing window.
3. Copy, delete, and disable DHTML Effects
You can also copy the dynamic effect from a Web page element to other elements by using the "style brush", select an element with the existing dynamic effect, and click "style brush ", click "click" on the page element that you want to apply the dynamic effect.
You can even apply multiple effects to most web page elements. For example, you can create a dynamic effect that allows text to fly in from the right side when a webpage is loaded, and then add a dynamic effect that borders around the text when the site visitor clicks the text.
To delete the DHTML effect of an object, select the object and click the delete effect icon on the DHTML effect toolbar. You can also select a webpage element and click Ctrl + space to delete the animation in view mode.
To disable DHTML effects, click "webpage options" in the "Tools" menu and select the "compatibility" tab in the displayed dialog box, in the "technology" column, deselect the check box before "Dynamic HTML" so that the dhtm effect is disabled.
The skillful and flexible use of dynamic HTML will add infinite charm to your home page!
4. Dynamic Effects of text hyperlinks
Set dynamic effects for hyperlinks to make webpages look more vivid. When the mouse pointer moves to a text with a hyperlink, the text changes, such as changing the color, thickening, and increasing. This will attract the attention of viewers and increase the page views rate.
First open the home page, click the "format" menu, select the "background" command from the drop-down menu, and on the "background" tab of the "webpage properties" dialog box, as shown in. Select "enable hyperlink flip effect ":

Click "flip style" to open the "font" dialog box as shown in.

In the font dialog box, set the font, font size, and color in the flip effect (in this example, set the font to "文 ", the font to bold, the size to 18pt, And the font color to blue ). In this way, when you move the mouse over the moderator, they will be displayed as they are set. Click OK to return to the webpage Properties dialog box. Click OK again to return to the editing window.
This setting has the same effect on all hyperlink texts on the webpage.
Click the preview tab and move the mouse pointer to any hyperlink. The hyperlink text changes, as shown in.

This is just some simple dynamic effects. We will learn other webpage special effects later. At that time, your webpage will be more colorful and more personal.
5. webpage transition
When a webpage is switched to another Webpage through a hyperlink. You can use the webpage transition to achieve the disappearance of the original webpage and the emergence of the new webpage with special effects.
Now let's look at how to set up a webpage transition. When we use single-click access to remove the webpage from indexl.htm'', the webpage has a special change.
After opening a webpage, click the "format" menu and select "webpage transition" from the drop-down menu to open the "webpage transition" dialog box shown in the following figure:

In the dialog box, click the drop-down button on the right of the "event" box and click "Enter webpage" in the drop-down box ". Enter "5" in the "Period" box, select "circular radiation" in the "transition effect" box, and click "OK. In this way, when other web pages enter the web page in the browser, the transition effect from the center of the circle to the outside will be 5 seconds.
FrontPage 2000 provides a total of 26 webpage transition effects for us to choose from. You can set various webpage transition effects on your own.
2. Use components to achieve dynamic effects on webpages
Components are functional modules developed in advanced languages such as Java and VB, which can supplement the shortcomings of the HTML language. The special effects of components can make webpages look more vivid and interesting.
FrontPage 2000 provides multiple web page components, which are similar to DHTML described earlier. However, for common users, not all components can be used, because some components such as "site counters" require extended support from the FrontPage server, which is not supported by many Internet servers. Therefore, when inserting components in a webpage, you must consider whether the server supports them.
The following describes how to insert three components: "subtitle", "banner", and "hover button. They all support FrontPage Server Extensions.
1. Subtitle Activity
Scroll Subtitles enable a string of text to be repeatedly displayed from the left or right of the screen. Just like a change notification on TV. It is worth noting that not all browsers support this function. In browsers that do not support this function, subtitles are displayed as common text. It works best on Microsoft's Browser IE.
1) procedure:
(2) Open the webpage in the FrontPage window and move the cursor to the place where the subtitles need to be inserted. Click the "insert" menu, select the "component" command from the drop-down menu, and select "subtitle" from the sub-menu next to it to open the "Subtitle attributes" dialog box:

(2) In the "Subtitle properties" dialog box, type the text to scroll on the screen in the "text" box, for example, "Welcome !", After setting other attribute items, click "OK" to insert the scroll Subtitles:

In this case, the scrolling subtitles are static. Click the preview in browser command under the File menu to open the webpage in the browser, you can see the text scrolling from the right side of the screen.
2) Subtitle attribute settings
When inserting subtitles, you can set the direction, speed, performance, Font, and font size of the subtitles in the "Subtitle attributes" dialog box, set it in the "Subtitle attributes" dialog box. After the subtitle is inserted, right-click the subtitle and select the "Subtitle attributes" command in the shortcut menu. The "Subtitle attributes" dialog box is displayed. The setting method is as follows:
(1) "direction" option Area
Select "Left" single scroll, text scroll from right to left; select "right" single scroll, scroll in the opposite direction.
(2) "Speed" option Area
In the "delay" box, set the interval from the last scroll to the start of the last scroll, in milliseconds;
In the "quantity" box, set the "Step" to move forward when text is scrolled, in pixels.
(3) "presentation mode" option Area
Set the scroll mode. Select "scroll bar", and the text will scroll cyclically in the direction and speed selected in the "direction" and "Speed" option areas. When "slide" is selected, the front-end of the text will scroll to the edge of the screen, the text disappears. Select "alternate" and move the text around the screen.
(4) "text alignment" option Area
Set the position of the scrolling text in the subtitle area.
(5) "size" option Area
Set the width and height of the subtitle area. The measurement unit is "pixel" or "percentage (relative screen )". Generally, "percentage" is recommended ". The subtitle size can also be changed by dragging the cursor around the subtitle (angle.
(6) "repeated" option Area
Set the number of times the text is scrolled. Select the "continuous" check box and Scroll it unlimited. deselect this check box to set the number of scrolling times in the Value box below.
(7) "background color"
Set the subtitle background color. Generally, "automatic" is used to select the background of the webpage.
(8) To modify attributes such as font, Font, and font size of the scroll text, click style to open the modify Style dialog box, and click format in the dialog box, select the "font" command (left) from the drop-down menu to modify the font in the "font" dialog box (right.

2. date and time stamp
A timestamp is a time tag inserted in a webpage. It displays not the current date and time, but the date and time of the last webpage editing. The browser can determine the webpage Update Time Based on the date and time stamp.
Generally, the date and time stamp can be placed at the top or bottom of a webpage, and the words "Update time:" and "Update" can be added before or after the webpage. The insert method is as follows:
Click the "insert" menu and select the "Date and Time" command to open the "Date and time properties" dialog box, as shown in.

Click on the right of the date format and time format box, select the date format and time format, and click OK to complete the settings. In this example, the result is as follows:

3. Hover button
The hover button effect is similar to the DHTML effect of the text image, but more features are available. Hover button can achieve the following effect: When we place the mouse on the button, the color of the button will change very beautifully, or the convex, concave effect, there are even sound and animation effects. Like other buttons, hover buttons are generally the source of hyperlink. Click it to open a link.
Next let's take a look at how to insert and set the hover button:
Open the webpage in the FrontPage window, move the cursor to the button where you want to insert the hover button, click the "insert" menu, and select "component" from the "insert" menu ", click "hover button…" in the "components" menu ...". In the displayed "hover button properties" dialog box, enter the button text in the "hover button properties" dialog box and set the button color, effect color, and other attributes, click OK.

Descriptions of options in the "hover button properties" dialog box:
1) "button text" box: Enter the label Text of the button. To change the text attributes, click the font button and set it in the font dialog box.
2) "Link" box: sets the target webpage or other files (URLs) with the hover button as the hyperlink source. You can click "Browse, then, select the link object in the "select hover button HYPERLINK" dialog box.
[Note] the hyperlink setting of the hover button cannot be implemented by conventional methods. It can only be set here. If the button is linked to an email mailbox, It is troublesome because there is no "email HYPERLINK" button. In the "hover button properties" dialog box, enter mailto: email address in the "Link" box. Note that there must be no space between mailto and email addresses.
3) "button color" drop-down list box: select the button color.
NOTE: If an image is selected for the button in the "Custom" attribute, the setting in this box is invalid.
4) "background color" drop-down list box: select the background color of the button. It is usually masked by the button color.
5) "effect" drop-down list box: displays the effect when the mouse pointer is selected to move to the button. There are 7 Options:
(1) "fill color": From "button color" to "effect color ";
(2) "Color comparison": From "button color" to "effect color" and "button color;
(3) "Glow": the middle part of the button changes to "effect color", and gradually transitions to "button color" to the surrounding area ";
(4) "Reversed light": the button turns around to "effect color" and gradually transitions to "button color" (opposite to the luminous effect) to the center );
(5) "slight glow": the color of the middle area of the button fades;
(6) "protruding": the text on the button moves a pixel to the top right (not easy to see );
(7) "Concave": the button text moves one pixel to the lower left (not easy to see ).
In short, the hover effect is mainly about the color changes on the button. It depends on the button color and effect color.
6) "effect color" drop-down list box: select the effect color.
7) "width" and "height" text boxes: Set the width and height of the hover button (in pixels ). The width and height of the hover button can also be changed by dragging the control point around the hover button.
8) "Custom" button: used to set the sound and image effects of the hover button. Click to open the "Custom" dialog box and set the sound and image.

"Playback sound": you can click browse to select the sound file for "when you click (Mouse)" and "when you hover.
"Custom image": you can click "Browse" to select the set button image and hover image. If no button image is set, you can change the text button to an image when hovering, but the image size should be the same as the button size.
The following two figures show that the directory section of the "via gas therapy" web page is switched to the hover button in the browser, which is the scenario before the mouse hover. It is a change when the mouse is hovering over the "moderator's words.

5. banner advertising manager
On many web pages, there is a horizontal bar on the top of the web page that is used to play ad images, called "banner ads ". A Banner Advertisement is similar to a slide playback. It displays multiple images in the "banner window" in a certain order and interval. FrontPage 2000's "banner ad manager is a component used to achieve this purpose. It can be used to achieve animation effects. Procedure:
1) Prepare two or more image files of the same size. In this example, prepare the following two images:

　　　

2) Open the webpage for animation effect in FrontPage 2000, and set the light to a proper position. Click the "component" command under the "insert" menu and select "banner advertising manager" from the "component" level-2 menu. The "banner advertising manager properties" dialog box is displayed, as shown in.

3) in the dialog box, click the "add" button on the left of the "show image" box. In the "add banner image" dialog box that appears, select the image file you prepared by path, click OK to add an image. Repeat several images several times.

4) set other parameters in the dialog box and click "OK" to get the Banner Advertisement shown in. Only the first image is displayed, but the image is displayed in the browsing status.

Parameter settings in the "banner properties" dialog box:
1) "width" and "height" text box
Determine the size of the Banner. If the height or width of the AD image is greater than the preceding value, the image is truncated. If the height or width of the AD image is smaller than the preceding value, a gray border appears. The size of the banner can also be changed by dragging the cursor around the subtitle (corner.
2) "transition effect" drop-down list box
Select the transition effect when switching the image. There are a total of 6 options: ① "none", no transition effect; ② "horizontal masking", horizontal hundred page window transition effect; ③ "vertical masking", vertical hundred page window transition effect; ④ "decomposition": the effect of the next image spreading from the current image; ⑤ "box-like contraction": the effect of transition from the four sides to the center convergence; ⑥ "box-like radiation", the effect of the transition from the center to the surrounding area.
3) "display of each image (seconds)" text box: sets the display time of each image.
4) "Link" box: set the target webpage or other files (URLs) with the Banner Advertisement As the hyperlink source ).
5) "show image" box
You can use the "add", "delete", "Move Up", and "Move Down" buttons on the left to add, delete, or adjust the display sequence of images.
6. Site counters
The counter is a very interesting activity element. It can automatically accumulate the number of visitors to the home page and give the website owner a sense of accomplishment. Counters are essential to almost any personal homepage.
Although FrontPage also provides site counters, there are many teaching materials to introduce how to insert site counters. But because most servers do not support it, we will not introduce it here. However, many servers that provide homepage space provide free counters, which are similar. For the Xinzhu website, you can select a counter on the "System Management" page. There are also some websites dedicated to providing counter services, such as "Tai Chi chain" (http://www.textclick.com/) is such a site. The following describes how to apply for a free counter in "Taiji chain:
Open the "Taiji link" website in IE, as shown in:

Click the "Tai Chi statistics (free)" option in the "Traffic Statistics" drop-down menu to go to the "Tai Chi chain Site Statistics" Page:

Click "New User Registration" at the bottom of the page to enter the new user registration page. As required, the following webpage is displayed:

Select the code by dragging the mouse, right-click the code block, and select the Copy command from the shortcut menu. In the FrontPage window, open the home page, set the light to the position of the cell to be inserted into the counter, and click the "html" button under the window. Change the window to the "html" view. Move the cursor to the insert position and click the "Paste" button on the toolbar to insert the Code:

You cannot see the counter effect in the "normal" view, but you can view the Taiji counting icon in the browser preview:

Click the icon to link to the counter database you registered on the Taiji website and display the access statistics for your website:

We can see that the statistics are very detailed. If you like it, you can even check that some netizens in those regions have visited your website.
Iii. insert HTML statements to achieve special results
Although FrontPage can achieve many special effects, it is simpler. We can insert some HTML statements to achieve special effects.
On the Internet, there are many ready-made program segments that can display various special effects, such as "Walking lights" and pop-up advertisements. These program segments are compiled in JavaScript and other languages. We only need to copy them.
The following statement is used to display the current time and week on the webpage. In this way, the viewer will know the current time as soon as they enter the webpage.
<Script language = JavaScript>
Today = new date ();
Function initarray (){
This. Length = initarray. Arguments. length;
For (VAR I = 0; I <this. length; I ++)
This [I + 1] = initarray. Arguments [I]}
VaR d = new initarray ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday ");
Tyear = today. getyear () <100? 1900 + today. getyear (): Today. getyear ();
Tmonth = today. getmonth () + 1;
Tday = today. getdate ();
Tweek = tyear + "year" + tmonth + "month" + tday + "day" + d [today. getday () + 1];
Document. Write (Tweek );
</SCRIPT>
Insert this program at the appropriate location in the HTML view of the webpage. Preview the web page in the browser to see the current time and week in the web page.