Microsoft Office FrontPage 2003

1. Microsoft Office FrontPage 2003 Tutorial 9 – Using Layout Tables, Styles, and Office Components New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

2. Understanding Layout Tables • A layout table is a framework that you can use to organize the content of an entire page, or part of a page. • A layout table’s framework is divided into regions called layout cells. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

3. Layout table created from a template New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

4. Using a Layout Table to Organize a New Page • The default option when creating a Web page is to create a normal, blank page. • Display the Layout Tables and Cells task pane to use a layout table to format a page’s contents. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

5. Using a Table Layout Template to Insert a Layout Table in a Web Page • Create a new Web page in Design view • If necessary, remove any existing shared borders from the new page • If necessary, display the Layout Tables and Cells task pane • In the Table layout section, scroll the table layout templates until you find one that matches the layout you want to use, and then click it New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

6. Including a Web Page in a Layout Cell • There are several types of included content that you can insert in a Web page • Substitution • Page • Page based on schedule • Picture based on schedule • Page banner New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

7. Insert Web Component dialog box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

8. Creating a Layout Cell in a Layout Table • You have two options to create a new layout cell: • Use the Draw Layout Cell button on the Layout Tables and Cells task pane • Click the Insert Layout Cell link on the Layout Tables and Cells task pane New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

9. Creating a Layout Cell in a Layout Table • Resize an existing layout cell that borders the layout cell that you want to create to make room for the new layout cell • If necessary, display the Layout Table and Cells task pane • Click the Draw Layout Cell button on the Layout Tables and Cells task pane • Click and drag the pointer from the upper-left corner of the new layout cell’s location to the desired lower-right corner, and then release the mouse button New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

10. Resize left layout cell New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

11. Formatting a Layout Cell • Use the Cell Formatting task pane to add cell borders and a background color to your layout cell • Click the layout cell you want to format • If necessary, display the Cell Formatting task pane and use the options on the Cell Formatting task pane to change the cell’s borders, background color, padding, alignment, margins, or spacing New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

12. Using Inline Styles in a Web Page • A style is a collection of formatting commands that you can apply to selected text or paragraphs • When you customize an existing style, the customized style is called a user-defined style or inline style. • You can also create new styles: • Character styles: fonts, font sizes, font color, etc. • Paragraph styles: line spacing, alignment, etc. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

13. Style dialog box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

14. Using a Cascading Style Sheet in a Web Site • A Cascading Style Sheet (CSS), or external style sheet, is a file in which you can change default styles and create new styles– then link to other Web pages so they will use the styles you created. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

15. Creating a Cascading Style Sheet • After creating a CSS, you can also link it to a Web Page. See the Reference Window on page FP 556 of your text. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

16. Using a Style Sheet Template to Create a Cascading Style Sheet • If necessary, display the New task pane • Click More page templates in the New page section. The Page Templates dialog box opens • Click the Style Sheets tab • Preview each style sheet template and read its description and select one to use • Double-click the icon for the style sheet template you selected • Click File on the menu bar, click Save, enter the filename in the File name text box, click the Save as type list arrow, click CSS Files, and then click the Save button • Link the cascading style sheet to other Web pages as necessary New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

17. Using Office Components in a Web Site • An Office component is a self-contained object that includes the commands and tools required to use it • You can create 3 types of Office components: • A spreadsheet • A chart • A PivotTable New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9

18. Office Components • You can insert each Office component into a Web page New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9