Creating a Web Site from Scratch

Core Training for Microsoft FrontPage 2002

Creating a New Web Site and Web Page

1	To begin creating a new Web site, in the New Page or Web task pane, in the New section, click Empty Web.
2	In the Web Site Templates dialog box, the Empty Web icon is already selected. To start defining the location of your Web site, click Browse.
3	To specify the location of your Web site, in the New Web Location dialog box, double-click the Garden Company folder, and double-click the Webmaster subfolder.
4	To open the GardenCo subfolder, click GardenCo and then click Open.
5	To accept the creation of an empty Web site called GardenCo, in the Web Site Templates dialog box, click OK.
6	To browse to the location of the new GardenCo Web site, on the Windows taskbar, click Start, point to All Programs, point to Accessories, and click Windows Explorer.
7	To view the structure of the new GardenCo Web site, double-click the Garden Company folder, double-click the Webmaster subfolder, and then double-click the GardenCo Web folder.
8	FrontPage has created the _private and images subfolders for the new GardenCo Web site. To close the Windows Explorer window, in the upper-right corner of the screen, click the Close button.
9	To create a new, blank page called new_page_1.htm, on the Standard toolbar, click the Create a new normal page button.
10	To enter text on the new_page_1.htm, type Welcome to The Garden Company!.
11	To begin saving the new page, click the File menu, and click Save As.
12	To accept the suggested name index.htm, and save the page as the home page of the GardenCo Web site, in the Save As dialog box, click Save.

Naming a Web Page

1	To begin assigning a name to the home page, click the File menu, and click Save As.
2	To modify the title of the home page, in the Save As dialog box, click Change title.
3	To replace the page title, in the Set Page Title dialog box, in the Page title text box, type The Garden Company, and then click OK.
4	To save the changes to the page title, in the Save As dialog box, click Save.
5	To replace the existing home page, in the message box, click Yes.
6	To switch to Folders view, on the Views bar, click the Folders icon.
7	To view the properties of the home page, click the File menu, and click Properties.
8	To change the title of the page again, on the General tab of the index.htm Properties dialog box, in the Title text box, type Glorious Gardens, and then click OK.
9	To switch to Hyperlinks view, on the Views bar, click the Hyperlinks icon.
10	To view the properties of the home page, click the File menu, and click Properties.
11	To revert to the original page title, on the General tab of the index.htm Properties dialog box, in the Title text box, type Welcome to The Garden Company, and then click OK.
12	To switch back to Page view, on the Views bar, click the Page icon.

Formatting a Web Page Background

1	To begin formatting the background of a Web page, click the Format menu, and click Background.
2	To expand the color selection area, on the Background tab of the Page Properties dialog box, in the Colors section, click the arrow next to the Background box.
3	To choose from a larger variety of colors, click More Colors.
4	To select a shade of green that conveys the idea of gardening, in the More Colors dialog box, click the green hexagon (fourth row, second from the left), so the Value box displays Hex={00,CC,99}, and then click OK.
5	To apply the selected background color to the Web page, in the Page Properties dialog box, click OK.
6	To apply a different background to the home page, click the Format menu, and click Background.
7	To begin inserting a background picture, in the Page Properties dialog box, in the Formatting section, click the Background picture check box.
8	To locate the picture to be inserted, in the Formatting section, click Browse.
9	To select the picture, in the Select Background Picture dialog box, double-click the Garden Company folder, double-click the Pictures subfolder, and then click Open.
10	To keep the background image stationary when the page scrolls, in the Formatting section, click the Watermark check box, and then click OK.
11	To modify the properties of the graphic, click the File menu, and then click Properties.
12	To begin resizing the background graphic, on the Background tab of the Page Properties dialog box, in the Formatting section, click Properties.
13	To edit the background picture, in the Picture Properties dialog box, click Edit.
14	To change the size of the graphic, in the Microsoft Paint editor, click the Image menu, and then click Stretch/Skew.
15	To reduce the size of the graphic to 30 percent of its original size, in the Stretch and Skew dialog box, in the Stretch section, in the Horizontal box, type 30, press the TAB key, type 30, and then click OK.
16	To begin saving the smaller graphic, click the File menu, and click Save As.
17	To specify the location to save the file, in the Save As dialog box, click the arrow next to the Save in box, click My Documents, double-click the Garden Company folder, and then double-click the Pictures subfolder.
18	To name the smaller graphic, click in the File name box, type bgimage_small, and then click Save.
19	To close the Paint window, in the upper-right corner of the window, click the Close button.
20	To locate the smaller picture to be inserted on the home page, in the Page Properties dialog box, in the Formatting section, click Browse.
21	To select the modified graphic to be inserted, in the Select Background Picture dialog box, double-click the Garden Company folder, double-click the Pictures subfolder, click bgimage_small, and then click Open.
22	To view the home page with the modified image as the background, in the Page Properties dialog box, click OK.
23	To close the home page without saving your changes, in the upper-right corner of the Page view editing window, click the Close button, and then click No.

Adding Borders and Shading

1	To begin adding a border and shading to a Web page, press the ENTER key nine times.
2	To select the entire page, click the Edit menu, and click Select All.
3	To view the variety of borders available, click the Format menu, and click Borders and Shading.
4	To create a custom border, in the Borders and Shading dialog box, in the Setting area, click the Custom icon.
5	To define a style for the border, in the Borders and Shading dialog box, in the Style box, click outset.
6	To select a color for the border, click the arrow next to the Color box, and click the Maroon color box (first row, fourth box from the left).
7	To adjust the width of the border, click the Width box up arrow three times.
8	To apply your settings to the top border, in the Preview area, click the Top Border button (top button, with the top border highlighted).
9	To view the settings for the top and right borders in the Preview box, in the Preview area, click the Right Border button (first button on the right, with the right border highlighted).
10	To define a background color setting for the shading, click the Shading tab, in the Fill area, click the arrow next to the Background color box, and then click the Lime color box (second row, second box from left).
11	To apply a foreground color, in the Fill area, click the arrow next to the Foreground color box, and then click the Maroon color box (first row, fourth box from the left).
12	To begin inserting a background picture on the Web page, in the Patterns area, click Browse.
13	To select an image for insertion on the Web page, double-click the Garden Company folder, double-click the Pictures subfolder, click bgimage_small, and then click Open.
14	To center the background picture vertically, in the Patterns area, click the arrow next to the Vertical position box, and then click center.
15	To center the background picture horizontally, in the Patterns area, click the arrow next to the Horizontal position box, and then click center.
16	To display only one instance of the background picture, in the Patterns area, click the arrow next to the Repeat box, and then click no-repeat.
17	To accept the attachment setting so the inserted picture scrolls with the page, and apply all your settings to the Web page, in the Borders and Shading dialog box, click OK.
18	To view your Web page with the borders and shading setting, click below the graphic on the page.

Using Page Banners and Shared Borders

1	To begin adding shared borders to your Web pages, click the Format menu, and click Shared Borders.
2	To insert top and bottom shared borders on all pages, in the Shared Borders dialog box, click the All pages option button.
3	To modify the border properties, in the Shared Borders dialog box, click Border Properties.
4	To define a color for the top border, in the Border Properties dialog box, in the Background area, click the Color check box, click the arrow next to the Color box, and then click the Green color box (first row, third box from left).
5	To start defining a color for the bottom border, in the Border Properties dialog box, click the arrow next to the Borders box, and then click Bottom.
6	To select a color for the Bottom border, in the Background area, click the Color check box, click the arrow next to the Color box, click the Green color box (first row, third box from left), and then click OK.
7	To apply your new border settings, in the Shared Borders dialog box, click OK, and then click Yes.
8	To delete the comment from the Top border, position the mouse pointer to the left of the word Comment until the pointer changes to an angled arrow, click the mouse button, and then press the DELETE key.
9	To begin inserting a page banner on the Web page, click the Insert menu, and click Page Banner.
10	To insert the page title as the page banner in a picture format, in the Page Banner Properties dialog box, click OK.
11	To select the page banner and begin formatting it, position the mouse pointer over the page banner until a hand appears, click the mouse button, on the Formatting toolbar, click the arrow next to the Style box, and then click Heading 1.
12	To center the page banner, on the Formatting toolbar, click the Center button.
13	To view the bottom shared border, click four times below the scroll box on the vertical scroll bar.
14	To delete the comment text from the bottom shared border, position the mouse pointer over the the comment text until a hand appears, click the mouse button, and then press the DELETE key.
15	To insert a line that separates the page content from the bottom shared border, click the Insert menu, and click Horizontal Line.
16	To keep a record of the most recent modifications made to the Web page, type Last Updated:, and then press the SPACEBAR.
17	To insert a date and time stamp on the Web page, click the Insert menu, and then click Date and Time.
18	To specify the date format to record when the Web page was last edited, in the Date and Time dialog box, in the Display area, click the arrow next to the Date format box, and click Monday August18, 2003.
19	To specify the time format, in the Display area, click the arrow next to the Time format box, click once above the scroll box on the list scroll bar, and then click the format HH:MM AM/PM (for example: 05:18 PM).
20	To apply the date and time setting, in the Date and Time dialog box, click OK.
21	To switch to the home page, in the upper-left corner of the Page view editing window, click the index.htm tab.
22	To view the home page in the Preview pane, at the bottom of the Page view editing window, click Preview.
23	To view the bottom shared border with the date and time, click once below the scroll box on the vertical scroll bar.

Formatting an Entire Web Site

1	To open the five pages of the Web site for formatting, in the Folder List, click classes.htm, press and hold down the SHIFT key, click products.htm, release the SHIFT key, and then press the ENTER key.
2	To switch to the classes.htm file, in the upper-left section of the Page view editing window, click the classes.htm tab.
3	To begin inserting a theme for the Web site, click the Format menu, and click Theme.
4	To apply a theme to only the selected pages, in the Themes dialog box, in the Apply Theme to area, click three times below the scroll box on the scroll bar, and click Nature.
5	To display a bright color scheme, which you can view in the Sample of Theme box, click the Vivid colors check box.
6	To display a livelier set of banners, buttons, bullets, and other graphic elements, click the Active graphics check box.
7	To display a background image for your Web pages, click the Background picture check box.
8	To apply this theme to the page, in the Themes dialog box, click OK.
9	To save your changes and preview the effect of active graphics in your browser, on the Standard toolbar, click the Preview in Browser button, and then click Yes.
10	To view the bullets changing through a variety of colors in the browser window, click once below the scroll box on the scroll bar.
11	To close the Internet Explorer window and return to FrontPage, in the upper-right corner of the browser window, click the Close button.
12	To make sure that the theme has not been applied to all pages, in the upper-left section of the Page view editing window, click the contact.htm tab.
13	To begin defining a theme for the entire Web site, click the Format menu, and click Theme.
14	To apply the theme to all pages of the Web site, in the Themes dialog box, in the Apply Theme to area, click the All pages option button.
15	To select a theme similar to the theme in the classes.htm page, in the Apply Theme to area, click three times below the scroll box on the scroll bar, and then click Nature.
16	To apply the Nature theme in vivid colors to the entire Web site, click the Vivid colors check box, and then click OK.
17	To permanently replace individual page formatting, in the message box, click Yes.
18	To examine the results of the application of the theme to other pages of the Web site, in the top section of the Page view editing window, click the index.htm tab.
19	To view the theme applied in another page, in the top section of the Page view editing window, click the press_releases.htm tab.
20	To observe the theme in the products page of the Web site, in the upper-right section of the Page view editing window, click the products.htm tab.

Creating a Custom Theme

1	To begin creating a custom theme, click the Format menu, and click Theme.
2	To select a theme from the list, in the Themes dialog box, in the Apply Theme to area, click three times below the scroll box on the scroll bar, and then click Nature.
3	To begin modifying the Nature theme, in the Themes dialog box, click Modify.
4	To modify the color of the theme, in the What would you like to modify? area, click Colors.
5	To see how each of the colors of the custom color scheme is applied, in the Modify Theme dialog box, in the Sample of Theme box, position the mouse pointer over the scroll box of the vertical scroll bar, press and hold down the mouse button, drag the scroll box down to the bottom of the bar, and then release the mouse button.
6	To experiment with adjusting the brightness of the theme, in the Modify Theme dialog box, click the Color Wheel tab, and then click in the green area of the circle.
7	To re-adjust the brightness of the theme, on the Color Wheel tab, click in the red area of the circle.
8	To view the theme items for which you can customize the color, in the Modify Theme dialog box, click the Custom tab, and then click the arrow next to the Item box.
9	To apply your settings to the theme, click the Custom tab, and then click OK.
10	To view the graphic settings, in the Themes dialog box, in the What would you like to modify? area, click Graphics.
11	To modify the banner settings, in the Modify Themes dialog box, click the arrow next to the Item box, and click Banner.
12	To increase the font size on the banner, click the Font tab, click the arrow next to the Size box, click 7 (36 pt), and then click OK.
13	To view the text settings, in the Themes dialog box, in the What would you like to modify? area, click Text.
14	To modify the font of the body text, in the list under the Font box, click Batang, and then click OK.
15	To begin saving the modified theme, in the Themes dialog box, in the What would you like to modify? area, click Save As.
16	To save the customized theme under a new name, type Custom Nature, and then click OK.
17	To view the custom nature theme applied to the open page, in the Themes dialog box, click OK.
18	To close the new_page_1.htm page without saving the changes, in the upper-right corner of the Page view editing window, click the Close button, and then click No.