Third, make the webpage more vivid and beautiful

All we have done before is text, images, backgrounds, and hyperlinks. We will learn to make it more vivid and beautiful.
1. Open the webpage
To edit and process an existing webpage file, open the webpage first.
Click Open in the common toolbar to open the open file dialog box. In the "search range" column of the dialog box, select the location of the file you want to open (the "Web exercises" folder on the D Drive in the preceding section ), the file you want to open is displayed in the file list in the middle of the dialog box. Double-click it to open the webpage file.
").
1) Click the open button to open the open file dialog box as shown in. Click the drop-down button on the right of "search range"

"Open File" dialog box

2) Select (click) "D" from the drop-down list"

3) Find the "Web exercises" folder in the "D" disk's file list window and double-click it to change the search range to "Web exercises ":

4. Double-click ycjf.htm in the document folder of the workshop folder to open the webpage file.
If you want to open a webpage file (. htm file) in front page on "My Computer" or "Resource Manager", you cannot double-click it. Because the default open tool for webpage files is IE browser, you can only open the webpage in IE. You can right-click the file and click Edit in the shortcut menu to open the webpage file on the FrontPage for modification and editing.
2. Insert a horizontal line
In order to make the webpage clearer, a horizontal line is usually inserted between the title and the body. Use this horizontal line to separate them. In addition, because the color and width of the horizontal line can be set freely, inserting a horizontal line can also beautify the webpage.
The following describes how to insert and set a horizontal line on the "Yingchun Fu" webpage.
Move the cursor behind the title bar. Click the "insert" menu and click the "horizontal line" command in its next menu (down to the left). The result is shown in the right figure below.

"Insert" menu

Horizontal line inserted

Next, let's take a look at the horizontal line setting method. Move the pointer to the horizontal line, right-click, and click "horizontal line attribute" in the shortcut menu shown in the lower left corner to get the "horizontal line attribute" dialog box shown in the right figure below.

Shortcut menu

"Horizontal line attributes" dialog box

In the "horizontal line attributes" dialog box, you can set a total of four parts. The meanings of each set value are as follows:

Horizontal line property settings

Item	Set Value Meaning
Width	The length of the horizontal line. The default value is 100% of the display window.
Height	The width of the horizontal line. The default value is 5 pixels.
Alignment Mode	Alignment of horizontal lines throughout the window
Color	The color of the horizontal line. Click the drop-down arrow to select the appropriate color.

Now we set the horizontal line to 80% in width, 5 pixels in height, blue in color, and center display, as shown in.

Horizontal line after changing attributes

3. Set the webpage background color
Next we will color the background of the "Yingchun Fu" webpage to make the webpage more beautiful.
Click the "format" menu (bottom left) and select the "background" command to open the "background" tab of the "webpage properties" dialog box. Click the drop-down button on the right of the background bar to bring up the color drop-down list, as shown in the right figure below:

"Format" menu

Background color settings

Click gray as the background color of the webpage. The result is as follows:

Webpage with gray background

You can also use an image as the background. We will introduce it later.
4. Add background music for webpages
FrontPage can be used with background music for a webpage so that you can view the webpage and enjoy music. Considering the speed of the network, we try to select a relatively small audio file when selecting music. It is best to use a file in the "Midi" format, which has relatively small audio files.
Now, we will set up a music clip on the "Yingchun Fu" webpage. "Stay for guests from afar ".
Before setting up, you must first "stay for guests from afar" music file (yfdkr. mid) copy to the "Web exercises" folder, and right-click the front page on the "" Page. In the pop-up shortcut menu (left) click properties to open the webpage Properties dialog box.
In the "webpage properties" dialog box, click the "Browse" button in the "Background Music" column to open the "Background Music" dialog box. A dialog box is displayed, as shown in.

"Background Music" and "select file" dialog boxes

Select the music. Mid file and click OK to return to the webpage Properties dialog box. You can see that the location of the background music has been determined, for example:

Set "webpage attributes" dialog box for background music

In the dialog box, there is a "√" in front of the "unlimited number", which means that when the page is opened, the background music will be played continuously until the page is left; if you use the mouse to remove "√", you can also set the number of cycles. Click OK. The background music settings are complete.

After saving the webpage, turn on the speaker power. Click the "file" menu, select "preview in Browser" from the drop-down menu, and open the webpage in IE browser, so that you can enjoy your webpage in the beautiful music.
If there is no sound, You can reset the advanced options of IE browser. The specific steps are as follows:

1) Click the "Tools" menu of IE browser;
2) Select "Internet Options" from the drop-down menu ";
3) Click the "advanced" tab in "Internet Options;
4) Move the scroll bar in the "Settings" column of the "advanced" tab and tick the "√" (click) in front of the "audio in the playback webpage" in the "Multimedia" class ). For example:

5) Click OK ".
After the settings are complete, you need to reload the webpage (click the refresh button in the IE Toolbar) to make a sound.

[Practice]
Set the background color, text font, size, and style of the webpage based on your preferences. With a piece of background music, and preview it with IE browser.