Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables

2Designing Web Pages with Layout TablesUnit K  Use the Draw pointer  Create an interactive button  Understand layout tables  Use a layout table to format a new page Objectives

3Designing Web Pages with Layout TablesUnit K Objectives  Work in a layout cell  Format a layout cell  Draw a new layout cell  Create a custom link bar

4Designing Web Pages with Layout TablesUnit K Designing Web Pages with Layout Tables  Use tables to create a framework or structure to organize and store the content of Web pages and sites  Tables allow you to design pages in tables and rows  Almost all browsers display tables consistently

5Designing Web Pages with Layout TablesUnit K Using the Draw Pointer  Three methods for creating a table in a Web page: –Table menu –Insert Table button on the Standard toolbar –Draw Table pointer  The Draw Table pointer is a good choice when you are experimenting with how you want your table to look or when you need to draw new cells in an existing table

6Designing Web Pages with Layout TablesUnit K Using the Draw Pointer (cont.)  New column being added to a table Draw Table pointer

7Designing Web Pages with Layout TablesUnit K Creating a Nested Table  A nested table is a table that appears in one cell of another table  Useful for controlling the format and appearance of table data

8Designing Web Pages with Layout TablesUnit K Creating an Interactive Button  An Interactive button (also called a hover button) is a button in a Web page that changes appearance when the pointer moves over it  Interactive buttons are animated  The act of moving the pointer over an interactive button is called mouse over  Interactive buttons usually contain hyperlinks

9Designing Web Pages with Layout TablesUnit K Creating an Interactive Button (cont.)  Interactive Buttons dialog box

10Designing Web Pages with Layout TablesUnit K Understanding Layout Tables  A layout table is a framework that organizes the content of an entire page  You can use a layout table instead of creating a new Web page and then adding a table to it  Each cell in a layout table can contain content such as images, text, and hyperlinks

11Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  You can create a layout table by using a table layout template or by drawing your own layout table  After creating a layout table, you can change its properties just like you can with regular tables  A layout table’s framework is divided into regions called layout cells

12Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  Changing a column or row to autostretch means that the browser will automatically resize the layout cell to fill the available space in the browser window  A spacer image is a picture that serves as an empty placeholder to add space between layout cells in the table

13Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  When you select a layout cell’s border, sizing handles appear around the layout cell  Unlike working in regular tables, resizing a layout cell in a layout table does not automatically resize the other layout cells in the layout table

14Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  Layout table created from a template

15Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  You can use the Layout Tables and Cells task pane to modify a layout table

16Designing Web Pages with Layout TablesUnit K Understanding Layout Tables (cont.)  You can use the Cell Formatting task pane to modify cells

17Designing Web Pages with Layout TablesUnit K Using a Layout Table to Format a New Page  If you want to use a layout table to format the page’s contents, you need to display the Layout Tables and Cells task pane  To use a layout table to design an entire Web page, the page cannot include any shared borders

18Designing Web Pages with Layout TablesUnit K Using a Layout Table to Format a New Page (cont.)  Layout table added to Web page

19Designing Web Pages with Layout TablesUnit K Working in a Layout Cell  There are multiple ways to create a new layout cell: –Use the Draw Layout Cell button on the Layout Tables and Cells task pane and use the pointer to draw a new cell –Click the Insert Layout Cell link on the Layout Tables and Cells task pane –Use the Tables toolbar buttons to split an existing layout cell or insert rows and columns

20Designing Web Pages with Layout TablesUnit K Formatting a Layout Cell  After adding content to layout cells, you can use the Cell Formatting task pane to change the borders, colors, and spacing of layout cells  In most cases, any formatting that you can apply to a cell in a regular table is allowed in a layout cell

21Designing Web Pages with Layout TablesUnit K Formatting a Layout Cell (cont.)  Borders added to layout cells border

22Designing Web Pages with Layout TablesUnit K Drawing a New Layout Cell  There’s one significant difference between working in a regular table and working in a layout table: When you insert a layout cell in a layout table, the size and dimensions of existing layout cells in the the layout table do not change to accommodate it  If you want to insert a new layout cell, you must make room for it

23Designing Web Pages with Layout TablesUnit K Creating a Custom Link Bar  You can create a custom link bar when you want to include links to only selected pages in a Web site  You can create one or more custom link bars in a Web site as necessary, and multiple pages can use the same custom link bar

24Designing Web Pages with Layout TablesUnit K Creating a Custom Link Bar (cont.)  Creating a custom link bar navigation structure

25Designing Web Pages with Layout TablesUnit K Creating a Custom Link Bar (cont.)  Link Bar Properties dialog box

26Designing Web Pages with Layout TablesUnit K Summary  Using the Draw pointer  Creating an interactive button  Understanding layout tables  Using a layout table to format a new page

27Designing Web Pages with Layout TablesUnit K Summary  Working in a layout cell  Formatting a layout cell  Drawing a new layout cell  Creating a custom link bar