Dreamweaver CS3 Concepts and Techniques

Transcription

1 Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1

2 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout 2

3 Working with Tables Standard Mode Insert Table dialog box Layout Mode Free form = you draw Expanded Mode Allows editing of table elements Chapter 3: Tables and Page Layout 3

4 Page Layout Site should be easy to navigate Site should be easy to read Site should be easy to download (< 15 sec) TABLES download fast as they use HTML code Normal page = header + body + footer Page DW 207 Figure 3-3 = layout to be used for additional pages in Colorado Parks Chapter 3: Tables and Page Layout 4

5 To Create Tables Standard Mode Table as a grid of rows and columns Similar to MS Excel, MS Word Layout Mode Draw, resize and move boxes on the page Similar to MS Publisher, Adobe InDesign Expanded Mode more for editing and precise placing of insertion point Chapter 3: Tables and Page Layout 5

6 Building Rocky Mountain National Park Web Page Copy files from Student Data Files Open a New Document Save as rocky-mt.htm Add the Background Image Chapter 3: Tables and Page Layout 6

7 Understanding Tables 3 elements: cells, rows, columns Cells can contain any element of a web page Cell padding space between the edge of a cell and its contents Cell spacing space between cells Width can be specified in pixels or percent Percent expands with the width of the window and monitor size Pixels remains the same size regardless of the window and monitor size Chapter 3: Tables and Page Layout 7

8 Understanding Tables cont. No Wrap property if enabled and text won t fit and width in percent table will expand No value to table width displayed small as possible and expands as content is added Chapter 3: Tables and Page Layout 8

9 Displaying the Insert Bar If necessary, click Window on the menu bar. If the Insert command is not checked, click Insert (7 separate categories): Common most frequently used publishing tasks Layout designing mode (ex.: tables) Forms to create forms and their elements Data to insert Spry and other dynamic objects Spry to build spry pages Text for text formatting Favorites you can group and organize buttons Chapter 3: Tables and Page Layout 9

10 Displaying the Insert Bar and Selecting the Layout Category Click on the Layout category, Standard mode Page DW 216 summary of each button in the Layout category Table Dialog Box as you insert the table (see Fig 3-12, page DW 217) set the settings for any table you create after the first one Headers used by screen readers Caption displayed outside the table Summary used by screen readers, do not show up in the browser Chapter 3: Tables and Page Layout 10

11 Property Inspector for Tables Select the element in the Tag Selector of the design window (body, table, tr, td etc.) Table ID used for CSS, script, accessibility (similar to Alt in images) Rows / Cols - # of rows / cols in the table W minimum width Cellpad, Cellspace Align where table appears relative to other elements in the same paragraph (default = left) Border, BG color (hex #), BRDR color, BG Image Clear Col widths, Row heights deletes specified Convert table widths to pixels OR to percent Class used for CSS Chapter 3: Tables and Page Layout 11

12 Cell, Row and Column Properties HORZ horizontal alignment of contents VERT vertical alignment of contents W and H; BG (text and color); BRDR No Wrap prevents line wrapping Header checkbox mark selected cells as header (contents will be bolded and centered by default) Merge Cells combines selected cells into one When more than one cell is selected Split Cells divides a cell When one cell is selected Methods to select entire table, cell, row, column etc. Chapter 3: Tables and Page Layout 12

13 Potential for Conflict When setting properties for the whole table or for selected cells, rows, columns HTML assigns levels of precedence = cells, rows and table Visit scsite.com/dwcs3/more.htm click Dreamweaver CS3 Tables Chapter 3: Tables and Page Layout 13

14 Alignment Default horizontal cell alignment = left Default vertical cell alignment = middle Top = cell content at the top of the cell Bottom = cell content at the bottom of the cell Baseline = cell content at the bottom of the cell (same as Bottom) Chapter 3: Tables and Page Layout 14