Chapter 3 – Web Design Tables & Page Layout Mr. Ursone

Tables Dreamweaver provides 3 ways to use the table feature: Standard mode: Table is presented as a grid of rows and columns. Uses the Insert Table dialog box Layout mode: freeform process where you draw the table and individual cells (more complex) Expanded mode: allows you to edit table elements. Temporarily Adds cell padding & spacing to tables, increasing borders – this way you have easy access to items that are difficult to select for precise editing.

Understanding Tables Tables Allow the user to add vertical and horizontal structure to a Web page. Makes it easy to create the header/body/footer structure A nested table is a table inside another table Merge Cells: Combines selected cells, rows, or columns into one cell (available when two or more cells, rows, or columns are selected) Split Cells: Divides a cell, creating two or more cells (available when a single cell is selected) Table ID: Provides a name for the table within the HTML code. The table ID is similar to the alternate text for an image

Table Borders The border command specifies the width, in pixels, of the line that frames the table and its various parts. You cannot apply a border to an individual cell unless the table consists of only one cell A border can help separate content within a table. Borders are especially useful if the table includes information that must be read across a row or down a column

Page layout Process of arranging text, images & elements on page Rules: site should be easy to navigate, easy to read, and quick to download Tables download fast & can be used anywhere Tables allow you to position elements on a Web page with great accuracy / many design options

Typical Web Page Composed of 3 sections Header – located at top, may contain logos, images or text that identifies site Body – informational context about site Footer – hyperlinks for contact info & navigational controls Header Body Footer

Understanding Tables Table is presented as a grid of rows & columns Row – horizontal collection of cells Column – vertical collection of cells Cell – the container created when row & column intersect Cell padding – the amount of space between the edge of a cell & its contents Cell spacing – the amount of space between cells Border – when table’s border is set to 0 and the table is viewed in a browser the outline does not appear / when displayed in Dreamweaver an outline will appear Percent – when table width is specified as percent it expands the width of the window and the monitor size where its being viewed Pixels – a table with the width specified in pixels will remain the same size regardless of the window & monitor size It is not necessary to declare table width – when no value is specified the table is displayed as small as possible & expands as content is added

Layout (Tab) Category under the Insert Bar The layout category enables you to work with tables & other features. In standard mode a table is displayed as a grid and expands as you add text & images You define the structure of the table using the Insert Table Dialog box

Insert Bar Layout (Tab) Category This toolbar contains buttons for creating and inserting objects such as tables, layers, and images Standard mode Expanded tables Table Insert row above Insert row below Insert Column to the Left Insert Column to the Right Draw Layout Table Draw Layout Cell

Inserting Table Dialog Box in Standard Mode

Property Inspector Table Features Table ID box Clear column widths & clear row heights buttons Convert table width to pixels Convert table width to percent Table background color Table border color Border width Align box CellPad & CellSpace boxes

Table Formatting The order of precedence for table formatting is cells, rows, and table. When a property, like background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting When a table is inserted it defaults to the left Using the property inspector you can center the table by selecting it and applying the Center command Default vertical cell alignment is middle

HTML structure within a Table When you view your table in Dreamweaver: <table> tag indicates whole table – clicking this tag selects the whole table <td> tag indicates table data – clicking it selects the cell at the insertion point <tr> tag indicates table row – clicking it selects the row containing the insertion point

Good to Know … Default horizontal cell alignment is left – when you enter text or image to a cell it defaults to left margin Its recommended that you add a table ID. It provides a name for a table within the HTML code / similar to alternative text for an image Named anchor: a link to a specific place within a document When you “merge” cells or rows you make them become one

Layout Mode You can draw & place boxes anywhere on the page Layout mode provides more flexibility than Standard mode As you draw the table and/or cells in Layout mode, Dreamweaver creates the code When you draw your table Dreamweaver outlines the table in green and cells in blue If Draw Layout Table & Draw Layout Cell buttons aren’t accessible, press ALT + F6

Layout Mode Rulers provide a visual cue for positioning and resizing layers or tables – use them to help approximate cell width and height and cell location within a table When you draw cells of different sizes in Layout Mode, Dreamweaver creates extra cells in the HTML table to fill in the spaces

Creating a Table in Layout Mode Draw Layout Table button Draw Layout Cell button Layout mode Layout category Table width & Height Layout Cell Handles indicate cell is selected

Head Content & HC Elements HTML files consist of two main sections: head section and body section The tags are: <head> and <body> Head content is found in the Insert Menu Head section consists of site and page information With the exception of the title the info contained in the head section is not displayed in the web browser Keywords: are a list of words that someone would type into a search engine field Description: Contains a sentence or two that can be used in a search engine’s results page