FrontPage Tutorial Editing Web pages

Now go to FrontPage. Click the "Start" button on the taskbar, select the Programs option, and click the Microsoft FrontPage option. You may find that the FrontPage interface is similar to word [figure 2-1], because there are many of the same settings for editing web pages and editing Word documents, and the icons used are the same as in Word.

[Figure 2-1] FrontPage2000 interface

The group boxes in the view are used to toggle views, and clicking the small icons inside can switch to a different view. FrontPage has 6 views [such as the left of figure 2-1] and uses different views to view the designed Web site from different sides. It's important for a Web site to keep updating. As the site grows, the workload of maintaining the site will be more and more big. Setting up a site can be quick, but without the help of these 6 views, it's difficult to maintain.

The use of these views is all mastered without a second, as long as you know these views are available.

2. View and Mode (ii)

Here's a look at how the same Web site is displayed in different views.

(1) Click the page button, switch to Page view, click the Folder List button on the toolbar, and add a Folder list box to the window [figure 2-2]. Page view is used to display the selected page, double-click an HTM file in the Folder list, and the content of the page is displayed in the right workspace.

Note that there are three tabs in the lower-left corner of the workspace that toggle the display mode [figure 2-3]. Click the Normal tab to switch to normal mode. In normal mode, you can edit the contents of a Web page and set up various formats. Click the Preview tab to preview mode. If you want to see how the currently edited file is displayed in the browser, use preview mode, and in preview mode, you can't edit the page. You can also switch to HTML mode to edit the HTML text file directly for the Web page, and make some special settings for the Web page, provided you have a little HTML language (as explained in the tutorial appendix).

(2) The folder view gives the files contained in the current Web site's folders and folders in the form of a list [figure 2-4]. Because a Web site involves many files, it is necessary to categorize these files and place them in separate folders. For example, you can put all the graphics files into the images folder. FrontPage also provides a _private folder for storing information that is not visible to network viewers. Next, add a sound folder for the current site to hold the sound files used by the Web site: Select the root of the site, and then click the new item on the File menu and select folder from the Pop-up submenu. When you enter sound, the new folder is set up [figure 2-5].

In fact, a site is actually a directory, in this directory can build many subdirectories, and the site of various files in these directories.

(3) The report view gives some statistical information about the current site. Here you can know which files in the site's directory are linked to the site, which does not.

(4) Navigation view can easily organize the hierarchical relationship of each page in the site, in this view, each page box represents a page. If the site has set the navigation function, you can set up the hierarchy of the pages here, and then use the navigation bar to show this level of relationship.

(5) The hyperlink view is used to see the hyperlinks that are set in the selected page. It makes it easy to know how many hyperlinks are set up in a Web page, and what type of links it is.

(6) The task view has a list of tasks for site maintenance, and if the site is large to be maintained by many people, they will be able to know the progress of the work through the task list.

3. Create a Web page

In this section we discuss how to create a page.

The easiest way to create a page is to click the New button on the FrontPage Standard toolbar. Its right side has a small downward arrow that is used to select what to create, and you can use the New button to create new pages, sites, folders, and tasks. The default state is to create a new Web page.

If you want to create a new page, you can select it without the down ARROW key and click the New button directly. However, using the new command on the File menu to create a new page can have a greater choice.

Click New on the File menu, select New page, and in the New dialog box, you can see many of the page templates provided by FrontPage [Figure 2-6], which we can use to create the appropriate Web pages. You can see the appearance of the selected template in the Preview box in the lower-right corner. Select the two-column body page, which creates a new two-column page. And then click OK.

Using templates, you don't have to always start editing from a blank page, so it saves you a lot of effort.

4. Cosmetic text

How to make the text richer and lively? An easy way to do this is to use the Formatting toolbar.

Font settings: Select the text, open the Formatting toolbar, "Font" drop-down list box, in which the appropriate font can be selected. If the person browsing the Web uses a computer that does not have a set font? The browser will replace the font you set with the system default font. However, using common fonts is a good habit.

Font Size setting: Select the font in the Font size Drop-down list box on the Formatting toolbar.

The functions of the B, I, and U icons on the toolbar are:

When you press the B button, the selected text becomes bold.

When I press the I button, the selected text becomes italic.

When you press the U button, the selected text will be underlined.

Color of the word: Click the down arrow next to the Font Color button on the Formatting toolbar [figure 2-9], select the appropriate color, and the color of the word changes.

You can also make some other settings for the font. Select the Font command on the Format menu, where we can also make further settings. There are many effects you can set in addition to what the Formatting toolbar can do.

Character Spacing tab: It is used to set the spacing of text. Click the Spacing drop-down list to select whether the spacing of the characters is normal, expanded, or condensed. When you choose to expand, the text spacing of the preview box becomes larger. You can also adjust the spacing to change the spacing, enter 10, the spacing of the text is even greater.

Position Drop-down list: Each line in FrontPage has a bottom line, and positioning refers to the distance between the text and the bottom line. That is, move the text up and down, and now select Move up, and the text moves up. Black lines in the preview box are the bottom line.

5. Bullets and Numbering

The design page should be structured and clear. This can be addressed through the list functionality in FrontPage.

Select the content you want to list, click the Bullets button on the Formatting toolbar, and by default, the bullet is a small black dot. You can also select other bullets, click the Format menu, and select the Bullets and Numbering command. Select the Picture Bullets tab, click the Browse button, point to Clip art, click the web Symbol button, select the appropriate picture, and clicking the OK button.

You can use numbering for a list of ordered content. Click the Numbering button on the Format menu. Now there is a problem, "site theme", "Site shared borders" two lines are "design site style" content, but also numbered. The solution is to select the two items, click the Add Indent button on the toolbar, and then click the Add Indent button again, which is OK [figure 2-12]. To change the two items to a different numbering, you can select the Bullets and Numbering buttons on the Format menu, select the appropriate numbering form in the numbering box, and click the OK button.

How to solve the problem that the list is too hierarchical and not concise? method is to fold the list of the handle, called the "Collapse outline." Move the mouse cursor to the level at the top of the list you want to collapse, right-click, select List Properties, and select the Enable collapse outline and collapse at start check boxes, and click OK. When you open it, just click it to open it.

6. Insert Horizontal Line

The timely insertion of horizontal lines in a Web page can make the hierarchy clear. The easiest way to do this is to insert horizontal lines to separate the parts that need to be separated. Adjust the insertion point to where you want to insert the horizontal line, and select the horizontal line command on the Insert menu.

To change the line color, double-click the inserted line, click the color Drop-down list in the pop-up Horizontal Lines Properties dialog box, and select the appropriate color. In the dialog box, there are window width percentages and pixel options, which are used to set the width of the line by adjusting the width value, but the unit of the value is determined by the selection behind it, adjusting the value of height to change the height of the line.

Click the horizontal line to select it. Press Alt+enter, or you can go directly to the Horizontal Line dialog box.

The horizontal line change is limited, the adornment is not strong. We can also insert a richer line to decorate the page, which is the line image. The line image is a particularly narrow image. Select the horizontal line, press the DEL key, remove the horizontal line, select the Picture command on the Insert menu, and click the Clip art option. Select the Pictures tab, where the clips provided by FrontPage are grouped by category in the following list box, select Web Frame, select a small stone image, and click the Insert Clip button. The lines made up of small stones are inserted into the finished form.

If you want to shorten the line a little, you can right-click on the line, select Image Properties, open the Picture Properties dialog box, select the Appearance tab, select Specify size, set the width of the unit to a percentage, adjust the width to 80, and click OK.

7. Insert Time Marker

On the internet, we often see a new update date on many pages that tells the user when the page was last updated, and how does it work? You'll see the following sections.

The time stamp changes automatically when the active Web page is edited or automatically updated. It is also easy to set up: At the end of the page, enter: "Update time, perform the date and time command on the Insert menu, select Last edited date for this page in the DateTime Properties dialog box, and if you want to change the format of the date, click the date format Drop-down list to select the appropriate format.

8. Insert Comment

How do I insert a comment in a Web page? (In the process of creating edits and modifying pages, we often need to insert some text that indicates the intent and method of the design, as a reference and a hint when editing the Web page, which is the annotation.) )

You insert a comment by clicking the location where you want to insert the note in normal mode, and setting the insertion point there. Select the comment command in the Insert menu, which will bring up the Comment dialog box, enter the contents of the comment in the comment text box, and click OK.

A comment appears at the specified location. Now click the Preview tab to switch to preview mode, and the comment does not appear. In fact, the annotation is not part of the page that is displayed in the browser, and the viewer cannot see the comments in the page through the browser.

9. Preview New Page

Designed page, you should check whether it appears normal in the browser.

The way is, generally, just switch to preview mode. Click the Preview tab, and the display in this preview mode is the same as it would appear in the browser. But that doesn't mean we don't have to use the browser to check the edited pages. Because even the same page may be displayed differently in different browsers. This is shown in Internet Explorer, for example, but it is shown in Netscape. So, we need to install a few more browsers on our own machines to check the compatibility of Web pages.

How to use a different browser to check it? Select the Preview in Browser option on the File menu, and select a different browser in the browser list box [figure 2-18]. (for example, for Internet Explorer 5.0), click the OK button. You can see the effect of the new page in the browser.

This part of the content is very simple, but these content in the process of making the Web page almost every time, "high building ground up", do not underestimate these most basic operation AH.