Changing Web Page Layout

Core Training for Microsoft FrontPage 2002

Laying Out Web Pages with Tables

1	To begin creating a page layout template, on the Standard toolbar, click the Save button.
2	To assign a name to the template, in the Save As dialog box, in the File name text box, type table_template.htm.
3	To begin changing the title of the page, in the Save As dialog box, click Change title.
4	To change the title of the page, in the Set Page Title dialog box, in the Page title text box, type Table Layout Template, and then click OK.
5	To save table_template.htm in the GardenCo Web site, in the Save As dialog box, double-click the Garden Company folder, double-click the Webmaster sub-folder, double-click the GardenCo sub-folder, and then click Save.
6	To insert a table in the template, click the Table menu, point to Insert, and click Table.
7	To specify the number of rows and columns in the table, in the Insert Table dialog box, in the Size section, click the down arrow next to the Rows box, press the TAB key, and in the Columns text box, type 1.
8	To align the table to the center of the page, in the Layout section, click the arrow next to the Alignment box, and click Center.
9	To make the border of the table invisible, press the TAB key, and in the Layout section, in the Border size text box, type 0.
10	To resize the table, in the Layout section, click the Specify Width check box, double-click 100, type 640, click the In pixels option button, and then click OK.
11	To insert a logo inside the table, click the Insert menu, point to Picture, and click From File.
12	To browse for a logo, in the Picture dialog box, in the Look in box, double-click the Garden Company folder, double-click the Pictures sub-folder, click Logo, and then click Insert.
13	To create space for nesting new tables, press the ENTER key three times.
14	To insert a table in the existing table, press the UP arrow key two times.
15	To insert a one-row-by-one-column table, on the Standard toolbar, click the Insert Table button, and in the grid, click the first cell in the first row.
16	To resize the new table, click the Table menu, point to Table Properties, and click Table.
17	To change the cell padding, in the Table Properties dialog box, in the Layout section, in the Cell Padding box double-click 0, and type 5.
18	To add a page banner in the new table, click the Insert menu, click Page Banner, and then, in the Page Banner Properties dialog box, click OK.
19	To select the text in the new table, position the mouse pointer over the dotted line above the text until a bold, down arrow appears, and then click the line.
20	To change the style of the text, on the Formatting toolbar, click the arrow next to the Style box, and click Heading 1.
21	To align the text to the center of the table, on the Formatting toolbar, click the Center button.
22	To begin changing the alignment of content in the new table, press and hold down the SHIFT key, click the right column, and then release the SHIFT key.
23	To change the alignment of content in the selected columns, click the Table menu, point to Table Properties, and click Cell.
24	To modify the vertical alignment of content, in the Cell Properties dialog box, in the Layout section, click the arrow next to the Vertical alignment box, click Top, and click OK.
25	To insert content in the left column, click inside the left column, type Home, press ENTER, type Products, and then press the ENTER key again.
26	To modify the text font, click the Table menu, point to Select, and click Cell.
27	To decrease the font size of the selected text, on the Formatting toolbar, click the Decrease Font Size button.
28	To resize the width of the left column so that it aligns with the typed text, position the mouse pointer over the line dividing the columns until a double-headed arrow appears, and then double-click the line.
29	To save the changes made to table_template.htm, on the Standard toolbar, click the Save button.

Adding Repeating Elements to a Template

1	To begin adding a hyperlink to a section of the text, in the left column of the table, double-click Home.
2	To change the format of the selected text, on the Formatting toolbar, click the Bold button.
3	To insert a hyperlink from Home, on the Standard toolbar, click the Insert Hyperlink button.
4	To begin linking to a file, in the Insert Hyperlink dialog box, in the Link To bar, click the Existing File or Web Page icon, and then in the Look in bar, click the Current Folder icon.
5	To select a file, in the Insert Hyperlink dialog box, double-click the Garden Company folder, double-click the Webmaster sub-folder, double-click the GardenCo sub-folder, click index.htm, and then click OK.
6	To begin inserting contact information for the Web site, click the last row of the table, and type E-mail.
7	To decrease the font size of the contact information text, position the mouse to the left of the word site, triple-click the mouse button, and then on the Formatting toolbar, click the Decrease Font Size button.
8	To add an e-mail address to the contact information, double-click Webmaster.
9	To insert an e-mail hyperlink to Webmaster, on the Standard toolbar, click the Insert Hyperlink button.
10	To begin inserting an e-mail address, in the Insert Hyperlink dialog box, in the Link to bar, click the E-mail Address icon.
11	To specify an e-mail address, in the Insert Hyperlink dialog box, in the E-mail address text box, type Webmaster@gardenco.msn.com.
12	To specify a subject for the e-mail message, press the TAB key, and in the Subject text box, type Web.
13	To begin inserting a screen tip for the e-mail address, in the Link to section, click ScreenTip, and then, in the Set Hyperlink Screen Tip dialog box, in the ScreenTip text text box, type E-mail.
14	To apply the e-mail address, subject line and screen tip to the contact information, in the Insert Hyperlink dialog box, click OK.
15	To save the changes to the template, on the Standard toolbar, click the Save button.

Applying a Template to Existing Pages

1	To begin applying the table template to the index.htm file, in the Folder List, double-click index.htm.
2	To switch to table_template.htm, in the Page view editing window, click the table_template.htm tab.
3	To begin copying the template, click the Edit menu, and click Select All.
4	To copy the selected table, on the Standard toolbar, click the Copy button.
5	To paste the selected template in the index.htm file, in the Page view editing window, click the index.htm tab.
6	To select an area to paste the template, click the The Garden Company logo, press and hold down the SHIFT key, click the Class Offerings cell, and then release the SHIFT key.
7	To replace the selected area with the template, on the Standard toolbar, click the Paste button.
8	To begin adding text to the table_template.htm file, click once below the scroll box on the vertical scroll bar, position the mouse pointer to the left of the word Welcome, press and hold down the mouse button, drag the mouse down until the three paragraphs are selected, and then release the mouse button.
9	To cut the selected text, on the Standard toolbar, click the Cut button.
10	To begin pasting the text, in the Page view editing window, click the table_template.htm tab, in the table_template.htm file, click inside the right column, and then on the Standard toolbar, click the Paste button.
11	To select unwanted text from the table_template.htm file, click once below the scroll box on the vertical scroll bar, press and hold down the SHIFT key, click at the end of the e-mail address, and then release the SHIFT key.
12	To delete the selected text and area from the table_template.htm file, press the DELETE key.
13	To save the changes made to the files, on the Standard toolbar, click the Save button.

Creating a Frames Page

1	To open a frame-based template, click the File menu, point to New, and click Page or Web.
2	To select a new template, in the New Page or Web task pane, in the New from template section, click Page Templates.
3	To preview the description of a template, in the Page Templates dialog box, click the Frames Pages tab, and in the first row, click Banner and Contents.
4	To insert a frames page, in the Frames Pages tab, click Header, Footer and Contents, and click OK.
5	To create a new page in a frame, in the Header frame (upper section of the file), click New Page.
6	To begin inserting a picture in the new page, click the Insert menu, point to Picture, and click From File.
7	To select a picture, in the Picture dialog box, double-click the Garden Company folder, double-click the Pictures sub-folder, click Logo1, and click Insert.
8	To display the entire logo, position the mouse pointer over the lower border of the frame until a double-headed arrow appears, press and hold down the mouse button, drag the mouse down until the border aligns with the top edge of the Set Initial Page button in the Contents frame (in the middle-left section of the file), and then release the mouse button.
9	To begin saving the Header frame, click the frame, and on the Standard toolbar, click the Save button.
10	To assign a name to the file, in the Save As dialog box, in the File name text box, type header.htm.
11	To begin changing the page title, in the Save As dialog box, click Change Title.
12	To assign a page title, in the Set Page Title dialog box, in the Page title text box, type Header Frame, and click OK.
13	To save the frame, in the Save As dialog box, double-click the Garden Company folder, double-click the Pictures sub-folder, and click Save.
14	To assign a name to the frameset page, in the Save As dialog box, in the File name text box, type frames_template.htm.
15	To begin changing the page title, in the Save As dialog box, click Change title.
16	To assign a page title, in the Set Page Title dialog box, in the Page title text box, type Frames Template, and click OK.
17	To save the page, in the Save As dialog box, double-click the Garden Company folder, double-click the Webmaster sub-folder, double-click the GardenCo sub-folder, and then click Save.

Laying Out Web Pages with Frames

1	To start linking content to the Contents frame (in the middle-left section of the file), click Set Initial Page.
2	To browse for a file to link content, in the Insert Hyperlink dialog box, double-click the Garden Company folder, double-click the Webmaster sub-folder, double-click the GardenCo sub-folder, click toc.htm, and then click OK.
3	To preview the content in the Contents frame, click once below the scroll box on the vertical scroll bar.
4	To type contact information for the Web site, in the Footer frame (in the lower section of the file), click New Page, and type E-mail.
5	To minimize the visible white space in the Footer frame, position the mouse pointer over the upper border of the frame until a double-headed arrow appears, press and hold down the mouse button, drag the mouse down until the border aligns with the top edge of the Tasks icon, and then release the mouse button.
6	To begin saving the Footer frame, click the frame, and on the Standard toolbar, click the Save button.
7	To assign a name to the Footer frame, in the Save As dialog box, in the File name text box, type footer.htm.
8	To begin changing the page title of the frame, in the Save As dialog box, click Change title.
9	To assign a page title to the frame, in the Set Page Title dialog box, in the Page title text box, type Footer Frame, click OK, and then click Save.
10	To begin saving frames_template.htm, on the Standard toolbar, click the Save button.
11	To begin previewing the layout of frames in a browser window, click the File menu, and click Preview in Browser.
12	To preview the layout, in the Preview in Browser dialog box, in the Window size section, click the 800 X 600 option, and click Preview.
13	To return to FrontPage, click the Close button in the upper-right corner of the Internet Explorer.
14	To begin changing the appearance of a frame, click the Header frame, click the Frames menu, and then click Frame Properties.
15	To begin modifying the properties of the frame, in the Frame Properties dialog box, in the Options section, click Frames Page.
16	To change the appearance of the frame, in the Page Properties dialog box, on the Frames tab, in the Frame Spacing text box, type 0, click the Show Borders check box, and click OK.
17	To apply the changes to the frame, in the Frame Properties dialog box, click OK.
18	To begin changing the appearance of a scroll bar, click the Contents frame, click the Frames menu, and click Frame Properties.
19	To begin modifying the properties of a scroll bar, in the Frame Properties dialog box, in the Options section, click the arrow next to the Show scrollbars box, click Never, and then click OK.
20	To begin previewing the changed layout, click the File menu, and click Preview in Browser.
21	To select the window size of the browser window, in the Preview in Browser dialog box, in the Window size section, click the 640 X 480 option, and click Preview.
22	To close the browser window, click the Close button, in the upper-right corner of the browser.
23	To begin changing the spacing between paragraphs, click the Contents frame, click the Frames menu, and click Open Page in New Window.
24	To select the contents of the toc.htm file, click the Edit menu, and click Select All.
25	To minimize the spacing, click the Format menu, click Paragraph, in the Paragraph dialog box, in the Spacing section, in the Before text box, type 0, press TAB, in the After text box, type 0, and then click OK.
26	To delete excess space at the end of the toc.htm file, click at the end of Contact Us, and press DELETE.
27	To return to the index.htm file, in the upper-right corner of the toc.htm file, click the Close button.
28	To preview the changed layout in a browser, on the Standard toolbar, click the Preview in Browser button.
29	To test the links of the site in the browser view, position the mouse pointer over Class Offerings until an image of a hand appears, and then click Class Offerings.
30	To return to FrontPage, click the Close button in the upper-right corner of the browser window.