Regular online friends must have such an experience, when an image will slowly move, or the mouse stops to a picture it will turn another picture, this is DHTML, people see people love Dynamic web page.
Dynamic web pages allows visitors and web pages to interact, enabling web pages (text, images, etc.) to display simple animation effects.
The FrontPage2000 provides a way to make a dynamic web page. There are three ways to achieve dynamic effects: DHTML tools, components, and insert HTML statements, the first two method operations are easier and intuitive, and you can easily establish your own dynamic webpage.
There is another so-called dynamic website on the Internet. This website has a database (ie, so-called ASP space), which uses network language such as ASP or PHP. It is relatively simple. Accessors with privileges can add content to the website. Large websites and forums are generally a dynamic website.
First, use the DHTML tool to realize dynamic effect 1, "DHTML effect" toolbar, right-click on the FrontPage window toolbar, select "DHTML Effect" in the shortcut menu, will display the following figure shown in the window "DHTML Effect" toolbar. Using this toolbar, users can use their own will, double-click, double-click, over-hit, hover the mouse, when the mouse moves to a paragraph, the text changes, remind the viewer to pay attention. Make the text and pictures.
Instructions for each button and list box on the toolbar: 1) "Turn on" drop-down list box, select events that trigger dynamic effects. That is, what operations do you have to produce a dynamic effect? Here are four events to choose from: ● Click: Start animation when a site visitors point to the web page elements and press the left mouse button. ● Double-click: Start animation when a site visitors point to the web page elements and double-click the mouse button. ● Mouse hover: Start animation when a site visitor refers to and spreads on page elements. ● Web load: start moving when the web is loaded at the site visitor's browser. That is, when the web page is inserted, it does not need to use the mouse to trigger it, but only the visitor will use the browser to open it, it will generate a preset dynamic effect 2) " Apply "drop-down list box, the type of dynamic effect is selected. Different trigger events can be produced differently. For example, "Web Load" can select eight types of dynamic effects; and "mouse hover" only "format" an effect optional. 3) Select Settings drop-down list box for selecting specific dynamic effects. For example, flying into the dynamic effect is from the right, from the bottom, etc. 4) "Delete Effect" button, after clicking, delete the dynamic effect. 5) "Highlight Dynamic HTML Effect" button, press the web page element that sets the dynamic effect when pressing. For example, a light blue background color appears. 2, the basic steps using DHTML: ● First, in the web view mode, you should use DHTML objects (such as text, pictures) to select; ● Select an event in the DHTML toolbar's "open" drop-down list (text And the events have the events that are different); ● Next in the "Application" drop-down list to select an effect type; ● Finally, the "Select Settings" drop-down list sets the implementation. [Note] After only the previous drop-down list is selected, the next drop-down list box is valid (realistic). Next, the dynamic effect setting method of text and pictures is further explained: 1) The dynamic effect of the text sets the dynamic HTML effect of the text, is in paragraphs. Select a paragraph or several paragraphs (if only one segment is set, simply need to set the optical label in any position), then click the drop button on the right side of the "DHTML Effect" toolbar, in the drop-down list Hit "Mouse Hover", then the "Application" box on the right is virtual. Then, click the drop-down button on the right side of the "Application" box to select an effect at the Apply drop-down list. There is only a "format" in this way. At this time, the "Select Settings" box on the right is virtual. Click the drop-down button on the right side of the Select Settings box, click Select Fonts or Select Borders in the drop-down box to open the Fonts dialog or Border and Shadow dialog. In the dialog box, set the required format, click the "OK" button to complete the settings. At this time, the text segment background will become the light blue shown below ("Highlight Dynamic HTML Effect" button is pressed). In the Preview, the background color is restored to normal:
However, when the mouse pointer moves to the set text segment, the text will turn into the setting effect (this example will be set to a blue, 36 pounds "Huang Wencai" font):
[Note] If the font, font size, color of the text is not the default (ordinary) value, the new setting of the dynamic effect does not work. In this example, "Moderator" cannot set the font of the DHTML effect to other formats. With the same method, if you set the event to "Web Load", you can also achieve many interesting effects such as "Bringing" and "Flying". Everyone can try it yourself! 2) The picture of the dynamic effect picture of the picture can also be implemented with the "DHTML effect" tool strip. For the "mouse hover" event, there is only an effect of "exchange picture". We open the "old urchin website" home page in the FrontPage window, select the "Computer World" seal picture. In the DHTML Effects dialog box, click the drop button on the right of the "Open" box, click Mouse Hover in the drop-down box, and the "Application" box on the right is virtual. In the "Application" box, select "Select Set" box on the "Select Settings" box, select "Select Picture ..." in the drop-down box, in the "Picture" dialog box, click the picture you want to join (Yes The size of the "Computer World" seal picture, click "OK" button, complete the setting: After saving the home page, click File, "Preview in the Browser", move the mouse pointer to "Computer World" When the seal is on the seal, the seal will enlarge, the description of the picture also appears, the following two points show the scenarios before and after the mouse hover:
[Note] When setting the DHTML effect of the picture, the size of the two pictures must be the same (at least almost). Otherwise it will make the latter picture serious distortion. Although the preceding "computer world" seal picture in the previous example is a small size, it has been empty around the seal, and the total picture size is still as big. This can be seen in the pale blue background of "Highlighting Dynamic HTML Effect" in the editing window. 3, DHTML effect, delete, and disable you can also copy dynamic effects from a web page element from a web page element to other elements by using the Format Brush, select the "Format Brush", then put it in You want to "brush" on the web page elements of the dynamic effect. You can even apply multiple effects to most web pages. For example: You can make the dynamic effect of the text from the right party when the web is loaded, and then adds the dynamic effect of the Site Accessor Click the text when you click on the text. If you want to delete the DHTML effect of an object, first select the object, then click the Delete Effect icon on the DHTML effect toolbar. You can also remove animations in web view mode by selecting web page elements and clicking Ctrl Spacebar. If you want to disable the DHTML effect, click "Web Page Option" in the Tools menu, select the Compatibility tab in the open dialog, in the "Technology" box in front of the check box before "Dynamic HTML" The hook is canceled, so the DHTM effect is disabled. Skilled and flexible use dynamic HTML will add infinite charm to your homepage! 4, the dynamic effect of the text hyperlink is the hyperlink to set the dynamic effect, so that the web page looks more distorted. When the mouse pointer moves to a text with hyperlink, the text will change, such as changing the color, bold, becomes large. This can cause attention to the attention of the browser to improve the purpose of improving the browser. First open the home page, click the "Format" menu, select the "Backpoint" command in the drop-down menu, in the Background tab of the Web Page Properties dialog (as shown in the figure below). Select "Enable Hyperlink Flip Effect":
Then click "Turning Style" to open the Font dialog as shown below.
In the Font dialog box, set the font, font, color, etc. in the flip effect (this example is set to "Huawen", the font is set to bold, the size is 18pt, the font color is blue) . Thus when the mouse is moved to the "moderator", they will display the appearance of the setting. Click the "OK" button to return to the Web Page Properties dialog, click the "OK" button to return to the edit window. This setting has the same effect on all hyperlink text on the web page. Click the Preview tab to move the mouse pointer to any hyperlink point, and the hyperlink text changes, as shown below. This is just some simple dynamic effects, we will learn other web effects later, then your web page will be more colorful, more personal. 5, web transition When switching from a web page through a hyperlink to another web page. The disappearance of the original web page can be achieved by a special effect through the web page transition. Now, let's take a look at how to set up a page transition, so that when you leave the page "indexl.htm '', the web page has a special change. After opening a web page, click the" Format "menu, select" in the drop-down menu " Web transitions, open the "Web Transition" dialog box as shown below:
In the dialog box, click the drop-down button on the right side of the "Event" box, click "Enter the web page" in the drop-down box. Enter "5" in the "Period" box, select "Round Radiation" in the Transition Effect box, click the "OK" button. In this way, when the browser enters this web page, it will generate a transition effect of 5 seconds from the center of the center. FrontPage 2000 provides 26 web transition effects for us to choose, you can set up a variety of web transition effects. Second, using the component to implement the dynamic effect component in the web page is a functional module developed by high-level language such as Java, VB, which can supplement the shortcomings of the HTML language. Through the special effects of the components, you can make web pages look more vivid and interesting. FrontPage 2000 provides a variety of web components, use methods, and DHTML described earlier. But for ordinary users, not all components can be used, as some components such as the Site Counter require FrontPage server extension support, and many Internet servers do not provide this support. Therefore, when inserting components in a web page, you must consider whether the server is supported. Let's first introduce a method of inserting the "Subtitle", "Banner Advertising Manager" and "Hover" in the web page. They are all supported without FrontPage server extensions. 1. Active subtitle scroll subtitles can implement a string of text from the left or right side of the screen, and constantly cycle. Just like the program change notification on the TV. It is worth noting that not all browsers support it, in a browser that does not support this feature, the subtitles will be displayed as ordinary text. It works best on Microsoft's browser IE. 1) Operating steps: (2) Open the web page in the FrontPage window, move the cursor to insert the subtitle. Click the "Insert" menu, select the "Component" command in the drop-down menu, select "Subtitle" in the submenu next to it, open the Subtitle Properties dialog:
(2) Type text on the "Text" dialog box, "Text" box, such as "Welcome!", And set other properties, click "OK" to complete Scroll subtitles insert:
At this time, the scrolling subtitles are still, click the "Preview" command under the "File" menu, open the webpage in the browser, you can see the scenarius that scrolls from the right end of the screen. 2) Subtitle Properties Settings When inserted into the subtitle, the user can make multiple settings on the scrolling direction, speed, expression, font, font, etc. of the subtitle in the "Subtitle Properties" dialog box, set on the "Subtitle Properties" dialog box . After the insert is complete, the "Subtitle Properties" command can also appear in the "Subtitle Properties" command after the first click on the screen. The setting method is: (1) "Direction" option area selected "left" radio box, scroll from right to left; select "Right" radio box, the scroll direction is opposite. (2) "Speed" option area "Delay" box The previous scroll is over the next scrolling start, the unit is in milliseconds; "Quantity" box is set to "step" The unit is pixel. (3) The "Expression mode" option area sets the way to scroll. Select the "scroll bar", the text is selected in the direction in "direction", "speed" option area, and the speed is scrolling; "Slide", when the front end is scrolling to the edge of the screen; select "Alternation", text Poster (roll) on the screen. (4) "Text Alignment" option area Set the position of scrolling text in the subtitle area. (5) The Size option area sets the width and height of the subtitle area. The metric unit is "pixel" or "percentage (relative screen)." It is generally advisable to use "percentage". The size of the subtitles can also be changed directly with the mouse to drag the subtitle (angle) operating point method. (6) "Repeat" option area Set the number of times of text scrolling. Select the "Continuous" check box, scrolling will be performed out of order; Cancel this check box, the number of scrolles can be set in the numeric box below. (7) "Background Color" set the background color of the subtitles. Generally, "Auto" is selected, that is, the background of the web page. (8) To modify the font, glyphs, font numbers, etc. of the scroll text, click "Styles" to open the Modify Style dialog box, click the Format button in the dialog, and select the font in the drop-down menu. "Command (left figure), you can make specific modifications in the Font dialog (right below). 2, the date Timestamp Date Timestamp is a time tag inserted from the web page, which is not current date and time, but the date and time of the last editing web page. The viewer can determine the update time of the web based on the date timestamp. Date time stamp is generally placed on the page above or below the most, and in front of or behind the words "updated:", "update" and so forth. The insert method is as follows: Click the "Insert" menu, select the Date and Time command, open the Date Time Properties dialog, as shown below.
Click on the date format and time format box, select the date format and time format, click the "OK" button to complete the setting. In this case, the last result of the two words "update" is as follows:
3, the hover button hover button effect and the DHTML effect of the text picture is similar, but it is more rich. The hover button can achieve this effect: When we put the mouse on the button, the color of the button will have a very beautiful gradient change, or the projection, depression, and even sound and animation effect. Of course, like other buttons, the hover button is generally the source of the hyperlink. Click it to open a link. Let's take a look at the way to insert and set the hover button: Open the web page in the FrontPage window, move the cursor to insert the hover button, and then click the "Insert" menu, select "components in the" Insert "menu "And then click" Hover Buttons ... "in the Components menu. The Hover Dock button Properties dialog shown below appears. When you enter the button text in the Hover button Properties dialog box, set the button color, effect color, etc., click the "OK" button to complete. Each option for the Hover Button Properties dialog: 1) "Button Text" box: Enter the button label text. To change the text properties, click the Font button and set it on the Font dialog. 2) "Link to" box: Set the hover button as a hyperlink source (URL), click the "Browse" button, then select on the Select Hover Hyperlink dialog box Link object. [Note] The hyperlink setting of the hover button cannot be implemented with a general method, and can only be set here. If the button is linked is an email mailbox, you have to trouble because you don't have an "email hyperlink" button. Enter the mailto: email address in the Link to the box in the Hover button Properties dialog box. Note that there is no space between mailto: and email address 3) "Button Color" drop-down list box: The selected button color is selected. [Note] If you select a picture for the button, this box setting is invalid. 4) "Background Color" drop-down list box: The background color of the selected button. It is usually blocked by the button. 5) "Effect" drop-down list box: The display effect when the mouse pointer moves to the button. A total of 7 options: (1) "Plugging Color": From "Button Color" to "Effect Color"; (2) "Color Contrast": From "Button Color" to "Effect Color" and "Button Color" Intermediate color; (3) "Luminescent": The middle part of the button becomes "effect color", and gradually transitions around "button color"; (4) "anti-color glow": button becomes "effect color", and Gradually transition to the center to "button color" (opposite to the luminous effect); (5) "slightly luminescent": The color of the middle area is light; (6) "Run": The text on the button moves one pixel to the top right (Not easy to see); (7) "recessed": The button text moves a pixel to the lower left (not easy to see). Briefly, the hovering effect is mainly the color change on the button. And decisions on the button color and effect color. 6) "Effect Color" drop-down list box: Select the effect color. 7) Width and "Height" text box: Set the width and height of the hover button (unit is pixel). The width and height of the hover button can also be changed directly with the control point around the hover button. 8) "Custom" button: The sound and picture effect used to set the hover button. After clicking, open the Custom dialog box shown below, set sounds and pictures.
"Playing Sound": You can use "Browse" to select "Click (mouse)" and "hover" sound file. "Custom Picture": Select the set button image and hover image via "Browse". If the button picture is not set, the text can be changed to a picture, but the size of the picture is similar to the bigity of the button. The following two diagrams are the case where the directory part of the "gas therapy" web page is in the case where the hover button is in the browser. The figure is the scenario before the mouse hover. The figure below is the change in the mouse hover in the "moderator". 5. Banner Advertising Manager On many web pages, there is a horizontal strip area on the upper part of the web page for playback advertising pictures, called "banner advertising". Banner Advertising Similar slides, it is displayed in "banner window" in a "banner window" in a certain order and time interval. The "Banner Advertising Manager" Banner Advertising Manager is used to achieve this purpose, which can be used to achieve animation effect. Specific method of operation: 1) Prepare two or more picture files equal to two or more size, this example is ready The following two:
2) Open a web page that requires animation effect in FrontPage 2000, positioning the cursor in a suitable location. Then click the "Component" command under the "Insert" menu, select "Banner Advertising Manager" in the "Component" secondary menu, which appears as shown in the "Banner Advertising Manager Properties" dialog box shown below.
3) In the dialog box, click the "Add" button on the left side of the "Add Banner Advertising Picture" dialog box in the pop-up, select the image file you prepared, and then click the "OK" button. Add a picture. There are several pictures to repeat several times.
4) Set other parameters in the dialog box, click the "OK" button to get the banner ad shown below. The picture shown is just the first first, but in the browsing state, it will appear in turn.
The parameter setting in the Banner Advertising Manager Properties dialog box: 1) "Width" and "Height" text box to determine the size of the banner ad. If the height or width of the advertisement picture is greater than the above set value, the picture is taken in part. If the height or width of the advertisement picture is less than the above set value, a gray border appears around. The size of the banner advertisement can also be changed directly with the mouse to drag the operative point method of the subtitle (angle). 2) "Transition Effect" drop-down list box Select the transition effect when switching the picture. There are 6 options: 1 "None", no transition effect; 2 "horizontal shadow", horizontal hundred page window transition effect; 3 "vertical shadow", vertical hundred page window transition effect; 4 "decomposition", next picture, The effect of diffusion from the current picture; 5 "box-shaped contraction", from the transition effect of four weeks to the center; 6 "box-shaped radiation", the transition effect diffuses from the center to the surroundment. 3) "Each picture is displayed (second) text box: set the display time of each picture. 4) "Link to" box: Set the target web page or other file (URL) that is a super chain source with a banner ad. 5) The "Display Image" box uses the "Add", "Delete", "Down" and "Down" buttons to add, delete, or adjust the display order of the image. 6, the site counter counter is a very interesting activity element that automatically takes the number of people in the homepage, allowing the website owners a sense of accomplishment. The counter is almost any personal home page must. FrontPage also provides site counters, there are many ways to introduce a site counter. But because most of the server does not support it, we will not introduce it here. However, many servers that provide home space provide free counters, and the counter is similar. Such as the new bamboo website can select a counter directly in the System Management page. There are also some websites specializing in counter services, such as the "Tai Chi Chain" (http://www.textclick.com/) is such a website. Below we will briefly introduce the way to apply for a free counter in the Taiji Chain: Open the "Taiji Chain" website in IE, as shown below: Click the "Traffic Statistics drop-down menu" Taiji Statistics (Free) "option, Enter "Tai Chi Chain Site Statistics" page:
Click New User Registration in the lower part of the webpage to enter the new user registration page. As required, you will appear as required, you will appear as follows:
Select this code with the mouse drag, and then click the code block and select the "Copy" command in the shortcut menu. Then open the home page in the FrontPage window, set the cursten to the cell where the counter is inserted, click the HTML button under the window. Make the window to the HTML view. Move the cursor to the insertion location, click the "Paste" button on the common toolbar to insert the code:
Can't see the counter effect in the "Ordinary" view, but you can see the Taiji count icon with the browser preview:
The mouse click on the icon, will link to the counter database you registered with the Taiji website, display the access statistics of your website:
