1 / 28

Chapter 3

Chapter 3. Tables and Page Layout. Objectives for Feb 26, 2013. Discuss page layout Design a Web page using tables Create a table structure Modify a table structure Add content to a table Create one table to serve on multiple pages as a footer.

dinah
Download Presentation

Chapter 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 3 Tables and Page Layout

  2. ObjectivesforFeb 26, 2013 • Discuss page layout • Design a Web page using tables • Create a table structure • Modify a table structure • Add content to a table • Create one table to serve on multiple pages as a footer Chapter 3: Tables and Page Layout

  3. Starting Dreamweaver and Opening the Alaska Parks Web Site • Open Dreamweaver • If the Alaska Parks hierarchy is not displayed, click the Files panel button and point to Alaska Parks on the Files pop-up menu to highlight it. • If still not available, select Site / Manage Site / Pick Alaska Parks and then Done • If necessary, click Alaska Parks to display the Alaska Parks Web site hierarchy in the Files panel Chapter 3: Tables and Page Layout

  4. Starting Dreamweaver and Opening the Alaska Parks Web Site Chapter 3: Tables and Page Layout

  5. Copying Data Files to the Parks Web Site • Go to the class Web site and save the Chapter 3 folder into your My Documents folder and unzip the folder. • Open My Documents/Chapter 3/Parks folder • Click the first file in the list, which is denali_bear image file, to select the file • Hold down the SHIFT key and then click the last file in the list, which is the gates_plane image, to select all the data files Chapter 3: Tables and Page Layout

  6. Copying Data Files to the Parks Web Site • Press CTRL+C to copy the files • If necessary, click the Files panel button, and then click the drive containing the Alaska Parks Web site. Expand the your name folder and the parks folder, and then click the images folder to select it • Press CTRL+V to paste the files in the images folder Chapter 3: Tables and Page Layout

  7. Copying Data Files to the Parks Web Site Chapter 3: Tables and Page Layout

  8. Opening a New Document Window • Click File on the Application bar and then click New to display the New Document dialog box • If necessary, click Blank Page to indicate you are creating a new page • If necessary, click HTML in the Page Type list to indicate the page is a standard HTML page • Click the Create button to create the page • Click the Save button on the Standard toolbar to open the Save As dialog box • Type denali as the File name. If necessary, select the parks folder, and then click the Save button to save the denali.htm page in the Alaska Parks local folder and to display the path and file name on the document tab Chapter 3: Tables and Page Layout

  9. Opening a New Document Window Chapter 3: Tables and Page Layout

  10. Adding a Background Image to the Denali National Park and Preserve Web Page • Click the panel groups expander arrow to collapse the panel groups • If necessary, click the Property inspector expander arrow to display both the upper and lower sections • Click the Page Properties button in the Property inspector to open the Page Properties dialog box • If necessary, click Appearance (HTML) in the Category column Chapter 3: Tables and Page Layout

  11. Adding a Background Image to the Denali National Park and Preserve Web Page • Click the Browse button to the right of the Background image box to open the Select Image Source dialog box • If necessary, navigate to and open the parks\images folder • Click parks_bkg.jpg and then click the OK button to select the background image • Click the OK button in the Page Properties dialog box to apply the background to the page. If necessary, click the Document window to display the insertion point aligned at the left Chapter 3: Tables and Page Layout

  12. Adding a Background Image to the Denali National Park and Preserve Web Page Chapter 3: Tables and Page Layout

  13. Inserting and Formatting the Heading • Type Denali National Park and Preserve as the page heading • Click the Format button in the Property inspector, and then click Heading 1 to apply Heading 1 to the text • Click Format on the Application bar, point to Align, and then click Center to center the heading • Click anywhere on the page to deselect the heading • Select the text in the Title box on the Document toolbar, and then type Denali National Park and Preserve as the page title • Press the ENTER key to move the insertion point to the next line • Click the Save button on the Standard toolbar to save the page with the centered and formatted heading Chapter 3: Tables and Page Layout

  14. Inserting and Formatting the Heading Chapter 3: Tables and Page Layout

  15. Displaying the Insert Bar and Selecting the Layout Tab • If necessary, click Window on the Application bar and then click Insert to display the Insert bar • Point to the Layout tab on the Insert bar • Click the Layout tab to display the Insert bar Layout category Chapter 3: Tables and Page Layout

  16. Displaying the Insert Bar and Selecting the Layout Tab Chapter 3: Tables and Page Layout

  17. Inserting a Table • Click the Table button on the Layout tab to display the Table dialog box • If necessary, type 3 in the Rows box to create a table with three rows, and then press the TAB key to move to the Columns box • Type 2 to create a table with two columns, and then press the TAB key to move to the Table width box • Type 90 to set the table width, and then click the Table width button arrow to display the Table width options • Click percent to specify the table width as a percentage, and then press the TAB key to move to the Border thickness box Chapter 3: Tables and Page Layout

  18. Inserting a Table • If necessary, type 0 to set the border thickness, and then press the TAB key to move to the Cell padding box • Type 5 to add five pixels of cell padding, and then press the TAB key to move to the Cell spacing box • Type 10 to add ten pixels between adjacent table cells • Click the Summary text box and type Table layout for Denali National Park and Preserve Web page. The table contains three rows and two columns with images and text in the table cells • Click the OK button to insert the table into the document window Chapter 3: Tables and Page Layout

  19. Inserting a Table Chapter 3: Tables and Page Layout

  20. Selecting and Centering a Table • Click in row 1, column 1 to place the insertion point in the first cell of the table • Click <table> in the tag selector to select the table and to display handles on the lower and right borders of the table • Click the Align button arrow in the Property inspector and then point to Center • Click Center to center the table Chapter 3: Tables and Page Layout

  21. Changing Vertical Alignment from Middle to Top • Click in row 1, column 1 and then drag to the right and down to select the three rows and two columns in the table • Click the Vert button to display the Vert pop-up menu and then point to Top • Click Top to change the vertical alignment from Middle to Top Chapter 3: Tables and Page Layout

  22. Specifying Column Width • Click the cell in row 1, column 1 and then drag to select all cells in column 1 • Click the W box in the Property inspector, type 40% and then press the ENTER key to set the width for column 1 at 40% • Click the cell in row 1, column 2, and then drag to select all cells in column 2 • Click the W box in the Property inspector, type 50%, then press the ENTER key to set the width for column 2 at 50% • Click anywhere in the table to deselect the column Chapter 3: Tables and Page Layout

  23. Specifying Column Width Chapter 3: Tables and Page Layout

  24. Adding a Table ID to the Denali National Park and Preserve Table • Click <table> in the status bar to select the table • Click the Table text box and then type denali as the ID text • Press the ENTER key to add the table ID Chapter 3: Tables and Page Layout

  25. Adding Text to the Denali National Park and Preserve Web Page • Type the first two paragraphs of Part 1 in Table 3–4 (Page DW 203) in row 1, column 2 of the table in the document window. Press the ENTER key as indicated in the table • Type the third paragraph of Part 1, as shown in Table 3–4 on the previous page, into row 2, column 2 of the table • If necessary, scroll down to display the rest of the table. Type the paragraph of Part 2, as shown in Table 3–4, into row 3, column 2 of the table • Type the paragraph of Part 3, as shown in Table 3–4, into row 3, column 1 of the document window. Use SHIFT+ENTER to insert the line breaks. The insertion point is within the cell below the last line and may not be visible because a line break was added Chapter 3: Tables and Page Layout

  26. Add text & format • Complete by adding the text (through page DW 205.) • Add a second table by to all your pages that will serve as a footer on each of the pages (up to DW 209) • Change the text in the tables into links by completing through the end of DW 209. Chapter 3: Tables and Page Layout

  27. Adding Text to the Denali National Park and Preserve Web Page Chapter 3: Tables and Page Layout

  28. Adjusting the Table Width, Centering the Text, and Adding the Table ID Chapter 3: Tables and Page Layout

More Related