Changing Web Page Layout

Core Training for Microsoft Office FrontPage 2003

Laying Out a Web Page with Tables

1	To begin creating a basic page layout by using tables, click the Table menu, and then click Layout Tables and Cells.
2	To begin specifying the dimensions of the layout table, in the Layout Tables and Cells task pane, under New tables and cells, click the Insert Layout Table link.
3	To increase the width of the table, under Table properties, double-click in the Width box, and for the purposes of this exercise, press SPACEBAR to have the width typed for you.
4	To align the table to the center of the page, under Table properties, click the Align Center button, as indicated.
5	To select a layout from predefined table layout options, at the bottom of the Layout Tables and Cells task pane, point to the indicated scroll bar to scroll to the bottom of the task pane.
6	In the Table layout box, click three times below the scroll box on the vertical scroll bar, and click the Header, Body, Footer, and Left layout option, as indicated.
7	To close the Layout Tables and Cells task pane, on the title bar of the task pane, click the Close button.
8	To see the footer of the table, in the Page view editing window, click below the scroll box on the vertical scroll bar.
9	To select the left pane of the table, click the indicated line at the bottom of the left pane.
10	To resize the left pane, position the mouse pointer over the handle at the center of the bottom edge of the left pane, and drag upwards until it aligns with the top of the footer.
11	To select the footer, click the indicated line on the left of the footer.
12	To increase the width of the footer, position the mouse pointer over the handle at the center of the left edge of the footer, and drag to the left until it aligns with the left edge of the table.
13	To begin saving the basic page layout template, click the File menu, and then click Save.
14	To specify a file name, in the Save As dialog box, press SPACEBAR to have the name typed for you in the File name box.
15	To change the suggested title for the page, in the Save As dialog box, click Change title.
16	To specify a page title, in the Set Page Title dialog box, press SPACEBAR to have the title typed for you in the Page title box, and then click OK.
17	To save the basic page layout template, in the Save As dialog box, click Save.

Creating a Web Page Template

1	To begin modifying an existing page layout template, click the File menu, and then click Open.
2	In the Open File dialog box, in the list of files, double-click the table_template file.
3	To begin formatting the cells in this table, at the top of the template, click the indicated dotted line, click the Table menu, and then click Cell Formatting.
4	In the Cell Formatting task pane, click the Cell Corners and Shadows link.
5	To begin coloring the header cell, under Corners, click the Color arrow, and then click the indicated square for the color Teal.
6	To apply the color to the top left corner of the header cell, and change the corner from straight to rounded, under Apply, click the Top Left Corner button, as indicated.
7	To change the top right corner of the header cell from straight to rounded, under Apply, click the Top Right Corner button, as indicated.
8	To begin adding site-wide information to a Web page, click below the colored bar in the header cell, click the Insert menu, point to Picture, and then click From File.
9	In the Picture dialog box, on the Places bar, click My Documents, double-click The Garden Company folder, double-click the Pictures folder, and then double-click the tgclogo_sm file.
10	To insert a new line below the logo, press the ENTER key.
11	To begin adding text to the table, click in the middle left cell of the table, and for the purposes of this exercise, press SPACEBAR to have text typed for you.
12	To begin changing the layout of the middle left cell, in the Cell Formatting task pane, click the Cell Properties and Borders link.
13	To align the cell contents to the top of the cell, under Layout cell properties, click the VAlign arrow, and then click Top.
14	To add a padding of 5 pixels to the cell, triple-click in the Padding box, press SPACEBAR to have the value typed for you, and then press ENTER.
15	To decrease the font size of the text in the middle left cell, click the left border of the cell, and then on the Formatting toolbar, click the Decrease Font Size button, as indicated.
16	To apply bold formatting to the text in this cell, on the Formatting toolbar, click the Bold button.
17	To scroll to the bottom of the table, click below the scroll box on the vertical scroll bar.
18	To begin adding contact information to the footer cell, click above the colored bar in the footer cell, and press SPACEBAR to have text typed for you.
19	To save this page as a Web page template, click the File menu, and then click Save As.
20	To specify a file name for the template, in the File name box, press SPACEBAR to have the name typed for you, and then click Save.
21	To save all the embedded graphic files, in the Save Embedded Files dialog box, click OK.

Assembling a Web Site from a Page Template

1	To begin creating a Web page from a Web page template, on the Web Site tab, double-click the Web_page_template.htm file.
2	To use this template to create the home page for the site, click the File menu, and then click Save As.
3	In the Save As dialog box, in the file list, click the index file, and then click Save.
4	In the Microsoft Office FrontPage message box that appears, asking if you want to replace the existing index.htm file, click Yes.
5	To use the home page to create more pages, in the Folder List, click the index.htm file, and on the Standard toolbar, click the Copy button.
6	To save multiple copies of this page in the Web site, click the Web Site tab, and on the Standard toolbar, click the Paste button four times.
7	To begin renaming the copied files, on the Web Site tab, click the index_copy(1).htm file, and for the purposes of this exercise, press SPACEBAR to have the file name typed for you. Then press ENTER.
8	To change the page title of the index.htm file, click the index.htm file, in the Title column, click the Web Page Template title, and then press SPACEBAR to have the new title typed for you. Then press ENTER.
9	To begin linking the copied pages to the home page, at the bottom of the Web Site tab, click the Navigation View button.
10	In the Folder List, click the classes.htm file, hold down the SHIFT key, and click the products.htm file.
11	To include the selected pages as sub-pages of the home page, in the Folder List, drag the selected files to below the Welcome page in the Navigation view window.
12	To begin making changes on the home page, click the index.htm tab.
13	To align the company logo to the center of the page, in the header cell, click The Garden Company logo, and on the Formatting toolbar, click the Center button.
14	To begin making changes in the footer cell, click below the scroll box on the vertical scroll bar.
15	To begin creating a hyperlink to an e-mail address, in the footer cell, double-click the word Webmaster, and on the Standard toolbar, click the Insert Hyperlink button, as indicated.
16	In the Insert Hyperlink dialog box, on the Link to bar, click E-mail Address.
17	To specify an e-mail address, in the E-mail address box, press SPACEBAR to have the address typed for you.
18	To set a subject line for each e-mail message generated from the link, click in the Subject box, and press SPACEBAR to have the subject typed for you.
19	To include a ScreenTip for this link, at the top of the Insert Hyperlink dialog box, click the ScreenTip button.
20	To specify the ScreenTip text, in the Set Hyperlink ScreenTip dialog box, press SPACEBAR to have the ScreenTip typed for you in the ScreenTip text box, and then click OK.
21	To finish inserting the e-mail link, in the Insert Hyperlink dialog box, click OK.
22	To save the changes made to the file, on the Standard toolbar, click the Save button.
23	To test the hyperlink by previewing the page in your Web browser, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button.
24	To scroll to the footer cell, in the Welcome – Microsoft Internet Explorer window, click below the scroll box on the vertical scroll bar.
25	To display the ScreenTip you specified, in the footer message, point to the Webmaster hyperlink.
26	To test the hyperlink, click the Webmaster hyperlink.

Creating a Frames Page

1	To begin creating a frames page, in the New task pane, under New page, click the More page templates link.
2	To view a list of templates you can use to create frame-based Web pages, in the Page Templates dialog box, click the Frames Pages tab.
3	To create a Web page based on one of these templates, click the Header, Footer and Contents template, as indicated, and then click OK.
4	To create a new content page linked to the top frame, in the top frame, click New Page.
5	To insert the company logo into the page you just created, click the Insert menu, point to Picture, and then click From File.
6	In the Picture dialog box, in the file list, double-click The Garden Company folder, double-click the Pictures folder, and then double-click the tgclogo_sm file.
7	To show the entire logo, point to the bottom border of the top frame, and drag downwards until the entire logo is visible.
8	To save the new file that you have created in the frame, click inside the top frame, and on the Standard toolbar, click the Save button.
9	To specify a name for the file, in the Save As dialog box, for the purposes of this exercise, press SPACEBAR to have the file name typed for you in the File name box.
10	To finish saving the page, in the Save As dialog box, click Save.
11	To save the embedded logo graphic in the images folder of the Web site, in the Save Embedded Files dialog box, click Change Folder.
12	In the Change Folder dialog box, double-click the images folder, click OK, and to close the Save Embedded Files dialog box, click OK.
13	To specify a name for the frameset page, in the Save As dialog box, press SPACEBAR to have the name typed for you in the File name box.
14	To save the frameset page as a template, in the Save As dialog box, click Save.
15	To begin linking existing content to a frame, in the contents frame on the left, click Set Initial Page.
16	In the Insert Hyperlink dialog box, verify that the Current Folder is set to the GardenCo folder, and in the file list, click below the scroll box on the scroll bar, and then double-click the toc.htm file.
17	To define the home page of the Web site, in the body frame, click Set Initial Page.
18	In the Insert Hyperlink dialog box, in the file list, click below the scroll box on the scroll bar, and then double-click the welcome.htm file.
19	To select all the text appearing in the contents pane, click inside the contents pane, click the Edit menu, and then click Select All.
20	To reduce the font size of the selected text from 12 points to 10 points, on the Formatting toolbar, click the Decrease Font Size button, as indicated.
21	To save this file as the site's home page, click the File menu, and then click Save As.
22	In the Save As dialog box, double-click the existing index file and in response to the message that appears, asking whether you want to replace the existing file, click Yes.