Creating a New Web Site Page by Page

Core Training for Microsoft Office FrontPage 2003

Creating an Empty Web Site

1	To open the New task pane, click the File menu, and then click New.
2	To begin using the Empty Web Site template to create an empty Web site, in the New task pane, under New Web site, click the More Web site templates link.
3	In the Web Site Templates dialog box, on the General tab, click the Empty Web Site icon, and to specify the location of the new Web site, in the Options area, click Browse.
4	In the New Web Site Location dialog box, on the Places bar, click My Documents, and then double-click The Garden Company folder.
5	To create a new folder for the empty Web site, in the New Web Site Location dialog box, click the Create New Folder button.
6	To specify a folder name, in the New Folder dialog box, for the purposes of this exercise, press SPACEBAR to have the name typed for you in the Name box, and then click OK.
7	To finish specifying the location of the Web site, in the New Web Site Location dialog box, click Open.
8	To finish creating the empty Web site and display its structure, in the Web Site Templates dialog box, click OK.
9	Notice the _private and images folders displayed in the new Web site. To view the hidden files and folders that also make up the Web site, on the taskbar, click The Garden Company taskbar button.
10	In The Garden Company window, in the details pane, double-click the MyWebSite folder.

Adding a Page to a Web Site and Changing Its Title

1	To create a blank Web page, on the Standard toolbar, click the Create a new normal page button, as indicated.
2	To close the New task pane that appears on the right of the window, in the New task pane's title bar, click the Close button.
3	To add a heading to this page, at the top of the new_page_1.htm page, for the purposes of this exercise, press SPACEBAR to have the heading typed for you.
4	To save this page as the Web site's home page, click the File menu, and then click Save As.
5	In the Save As dialog box, notice that because this Web site’s folder contains no home page, FrontPage suggests index.htm as the file name, and click Save.
6	To preview the page in your default browser, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button, as indicated.
7	Notice that the heading you added to the Web page appears as the page title in the title bar of the Internet Explorer window. To close the browser window, click the Close button.
8	To change the title of the Web page, click the File menu, and then click Save As.
9	In the Save As dialog box, click Change title.
10	To specify a new title, in the Set Page Title dialog box, press SPACEBAR to have the new title typed for you in the Page title box, and then click OK.
11	To confirm the change, in the Save As dialog box, click Save.
12	In response to the message box, asking if you want to replace the existing index.htm file, click Yes.
13	To verify that the page title has changed, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button.

Formatting a Web Page Background

1	To begin adding a background color to a Web page, click the Format menu, and then click Background.
2	To select a color, in the Page Properties dialog box, on the Formatting tab, under Colors, click the Background arrow, as indicated, and then click More Colors.
3	In the More Colors dialog box, on the color palette, click the indicated color, and then click OK.
4	To close the Page Properties dialog box, and apply the selected background color to the Web page, click OK.
5	To begin adding a background image to a Web page, click the Format menu, and then click Background.
6	To select a background picture, in the Page Properties dialog box, on the Formatting tab, under Background, select the Background picture check box, and then click Browse.
7	In the Select Background Picture dialog box, click the Look in arrow, as indicated, in the drop-down list, click The Garden Company folder, and then double-click the Graphics folder.
8	To add the background image to the Web page, in the list of files, click the bgimage file, and then click Open.
9	To keep the background image stationary when the page scrolls, in the Page Properties dialog box, select the Make it a watermark check box, and then click OK.
10	To begin removing the background formatting so you can try a different method of formatting the Web page background, click the Format menu, and then click Background.
11	In the Page Properties dialog box, on the Formatting tab, under Background, clear the Make it a watermark and Background picture check boxes.
12	To remove the color formatting, under Colors, click the Background arrow, click Automatic, and then click OK.
13	To insert new blank paragraphs under the page heading, click below the heading, as indicated, and then press ENTER twice.
14	To select the entire page, click the Edit menu, and then click Select All.
15	To begin formatting a Web page by using borders and shading, click the Format menu, and then click Borders and Shading.
16	To create a custom border, in the Borders and Shading dialog box, on the Borders tab, under Setting, click the illustration to the left of Custom, as indicated.
17	To select a style for the border, in the Style list box, click outset.
18	To select a color for the border, click the Color arrow, and then click the indicated square for the color Maroon.
19	To set the border width to 2 pixels, click the indicated arrow to the right of the Width box three times.
20	To apply the border to specific areas of the page, under Preview, click the Top Border button, as indicated, and then click the Right Border button, as indicated.
21	To apply shading to a Web page, in the Borders and Shading dialog box, click the Shading tab.
22	To select a background color, under Fill, click the Background color arrow, and then click More Colors.
23	In the More Colors dialog box, on the color palette, click the indicated color, and then click OK.
24	To select a foreground color, click the Foreground color arrow, and then click the indicated square for the color Maroon.
25	To select a background image, under Patterns, click Browse.
26	In the Select Background Picture dialog box, click the Look in arrow, click The Garden Company folder, double-click the Graphics folder, and then double-click the bgimage_small file.
27	To align the image to the center of the page, under Patterns, click the Vertical position arrow, click center, click the Horizontal position arrow, and click center.
28	To avoid repetition of the image, click the Repeat arrow, and then click no-repeat.
29	To apply the Web page formatting and close the Borders and Shading dialog box, click OK.
30	To cancel the page selection and view the results of the formatting, click the Welcome to The Garden Company! heading.

Using Page Banners and Shared Borders

1	To begin turning on shared borders, click the Tools menu, and then click Page Options.
2	In the Page Options dialog box, click the Authoring tab, under FrontPage and SharePoint technologies, select the Shared Borders check box, and then click OK.
3	To begin creating top and bottom shared borders on all the Web pages, click the Format menu, and then click Shared Borders.
4	In the Shared Borders dialog box, under Apply to, click All pages, and then select the Top and Bottom check boxes.
5	To begin formatting a shared border, in the Shared Borders dialog box, click Border Properties.
6	To specify a color for the top border, in the Border Properties dialog box, under Background, select the Color check box, click the Color arrow, and then click More Colors.
7	In the More Colors dialog box, click the indicated color, and then click OK.
8	To specify a color for the bottom border, in the Border Properties dialog box, click the Border arrow, and then click Bottom.
9	To finish specifying border colors, in the Border Properties dialog box, click OK.
10	To apply the new border settings, in the Shared Borders dialog box, click OK.
11	Notice that the top shared border appears in the classes.htm file. To display the bottom shared border, drag the scroll box on the vertical scroll bar to the bottom of the bar.
12	To delete the comment text that appears in a banner, drag the scroll box on the vertical scroll bar to the top of the bar, click the comment appearing in the top border, and then press the DELETE key.
13	To insert a page banner in the shared border, click the Insert menu, and then click Page Banner.
14	In the Page Banner Properties dialog box, verify that Picture is selected, and then click OK.
15	Notice that because no graphic theme is applied to the Web site, the page banner is currently unformatted and looks just like normal text. To select the page banner text, click Class Offerings.
16	To format the text in the new page banner, on the Formatting toolbar, click the Style arrow, as indicated, and then in the drop-down list, click Heading 1.
17	To centrally align the page banner, on the Formatting toolbar, click the Center button, as indicated.
18	To begin adding a date stamp in the bottom border, drag the scroll box on the vertical scroll bar to the bottom of the bar, click the comment in the bottom border, and then press the DELETE key.
19	To insert a line that separates the page content from the bottom border, click the Insert menu, and then click Horizontal Line.
20	To insert text below the horizontal line in the bottom border, click below the line, and for the purposes of this exercise, press SPACEBAR to have the text typed for you.
21	To insert the date stamp, click the Insert menu, and then click Date and Time.
22	In the Date and Time dialog box, verify that Date this page was last edited is selected, and then, to select the date format, click the Date format arrow, and click Tuesday, August 17, 2004.
23	To select the time format, click the Time format arrow, click 11:36 AM, and then click OK.
24	To verify whether the date stamp appears in other pages of the Web site, at the top of the editing window, click the index.htm page tab.
25	To preview shared borders added to the home page, at the bottom of the Page view editing window, click the Show Preview View button.

Formatting an Entire Web Site

1	To begin applying a graphic theme to a Web page, click the Format menu, and then click Theme.
2	In the Theme task pane, under Select a theme, drag the scroll box to just past the half-way point on the vertical scroll bar, until you see the Nature theme.
3	At the bottom of the Theme task pane, verify that the Active graphics and Background picture check boxes are selected, and select the Vivid colors check box.
4	Notice that the colors in the theme previews change. To apply a theme to the classes.htm page, place the mouse pointer on the Nature theme, click the arrow that appears, and then click Apply to selected page(s).
5	To see the effect of the active graphics that causes bullets to cycle through a series of colors, click the Show Preview View button, and then click twice below the scroll box on the scroll bar.
6	To switch to the contact.htm page, at the top of the Page view editing window, click the contact.htm page tab.
7	Notice that the theme has not been applied to this page. To switch back to the classes.htm page, at the top of the Page view editing window, click the classes.htm* page tab.
8	To remove the Nature theme from this page, in the Theme task pane, under Select a theme, drag the scroll box to the top of the scroll bar, and then click No theme.
9	To apply a graphic theme to an entire Web site, under Recently used themes, place the mouse pointer on the Nature theme, click the arrow that appears, and then click Apply as default theme.
10	In response to the Microsoft FrontPage 2003 message that appears, warning you that existing formatting information will be replaced, click Yes.
11	To verify whether the theme has been applied to the entire Web site, click the contact.htm page tab, and then click the press_releases.htm page tab.

Creating a Custom FrontPage Theme

1	To begin creating a custom theme, in the Theme pane, under Recently used themes, place your mouse pointer on the Nature theme, click the arrow that appears, and then click Customize.
2	To change the color scheme used in this theme, in the Customize Theme dialog box, under What would you like to modify?, click Colors.
3	To select a color scheme, on the Color Schemes tab, click once below the scroll box on the vertical scroll bar, and then click Construction Zone.
4	Notice that the preview window changed to reflect the selected color scheme. To view another color scheme, click Downtown.
5	To begin creating a color scheme of your own, in the Customize Theme dialog box, click the Color Wheel tab.
6	To change the text and horizontal rule colors, on the color wheel, click the indicated area near the center of the wheel.
7	To view a list of elements for which you can specify a color, click the Custom tab.
8	At the top of the Custom tab, click the Item arrow, as indicated, and then click below the scroll box on the drop-down list scroll bar.
9	To view the updated custom color scheme, double-click the Color Schemes tab.
10	To save the modified color scheme, in the Customize Theme dialog box, click OK.
11	To view the changeable graphic elements, under What would you like to modify?, click Graphics.
12	To view a list of individual graphic elements you can change, at the top of the Customize Theme dialog box, click the Item arrow.
13	To preview a changeable element, in the Item list, click Bullet List.
14	To preview another changeable element, click the Item arrow, and then click Horizontal Navigation.
15	To change the font used in the Horizontal Navigation element, click the Font tab, and in the Font list, click Arial Black.
16	To retain the original graphic theme, and close the dialog box, click Cancel.
17	To view the changeable text elements, under What would you like to modify?, click Text.
18	To view a list of individual text elements you can change, at the top of the Customize Theme dialog box, click the Item arrow.
19	To change the font used in the Heading 3 style, in the Item list, click Heading 3, and then in the Font list, click Berlin Sans FB.
20	To save the modified text scheme, in the Customize Theme dialog box, click OK.
21	To save the custom theme, in the Customize Theme dialog box, click Save As.
22	To enter a name of the new theme, in the Save Theme dialog box, for the purposes of this exercise, press SPACEBAR to have name typed for you in the Enter new theme title box. Then click OK.
23	To close the Customize Theme dialog box, click OK.
24	To apply the newly created theme to the Web page, in the Theme task pane, under Select a theme, click the GardenCo theme.