1 / 87

Chapter 3

Chapter 3. Tables and Page Layout. Chapter Objectives. Understand page layout Design a Web page using tables Create a table structure Modify a table structure. Chapter Objectives. Describe HTML table tags Add content to a table Add a border to a table Format table content.

paul-fleming
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. Chapter Objectives • Understand page layout • Design a Web page using tables • Create a table structure • Modify a table structure Chapter 3: Tables and Page Layout

  3. Chapter Objectives • Describe HTML table tags • Add content to a table • Add a border to a table • Format table content Chapter 3: Tables and Page Layout

  4. Chapter Objectives • Format a table • Add borders to images • Create head content Chapter 3: Tables and Page Layout

  5. Starting Dreamweaver and Opening the Alaska Parks Web Site • Click the Start button on the Windows taskbar • Point to Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu, and then point to Adobe Dreamweaver CS4 on the All Programs list • Click Adobe Dreamweaver CS4 to start Dreamweaver • If necessary, display the panel groups • 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 necessary, click Alaska Parks to display the Alaska Parks Web site hierarchy in the Files panel Chapter 3: Tables and Page Layout

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

  7. Copying Data Files to the Parks Web Site • Click the Files panel button, and then click the name of the drive containing your data files, such as Removable Disk (M:) • If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter03 folder to expand it • Expand the parks folder to display the data files • Click the first file in the list, which is denali_bear image file, to select the file Chapter 3: Tables and Page Layout

  8. Copying Data Files to the Parks Web Site • 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 • 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

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

  10. 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

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

  12. 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

  13. 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

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

  15. 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

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

  17. 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

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

  19. 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

  20. 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

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

  22. 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

  23. 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

  24. 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

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

  26. 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

  27. Adding Text to the Denali National Park and Preserve Web Page • Type the first two paragraphs of Part 1 in Table 3–4 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

  28. Adding Text to the Denali National Park and Preserve Web Page • Select the text in row 3, column 1 to prepare for aligning the text • Click the Horz button in the Property inspector, and then click Right to align the text to the right • Click anywhere on the page to deselect the text • Click the Save button to save the page Chapter 3: Tables and Page Layout

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

  30. Adding a Second Table to the Denali National Park and Preserve Web Page • Click outside the right border of the existing table to position the insertion point outside the table • Press the ENTER key to move the insertion point below the table • Click the Table button on the Layout tab on the Insert bar to display the Table dialog box • Change the number of rows to 1, the number of columns to 1, the width to 75 percent, the cell padding to 0, and the cell spacing to 10 to set the properties for the table Chapter 3: Tables and Page Layout

  31. Adding a Second Table to the Denali National Park and Preserve Web Page • Type Footer table for links in the Summary text box to add the table description • If necessary, change other settings to match the settings shown in Figure 3–33 • Click the OK button to insert the one-cell table • Click the Align button and then click Center to center the one-cell table. The dark border and handles indicate that the table is selected Chapter 3: Tables and Page Layout

  32. Adding a Second Table to the Denali National Park and Preserve Web Page • Click the cell in the table. Type Home and then press the SPACEBAR to enter the first link. Press SHIFT+| (vertical bar) and then press the SPACEBAR to separate the links • Type Denali National Park and then press the SPACEBAR to enter the next link • Press SHIFT+| and then press the SPACEBAR to separate the links • Type Gates of the Arctic to enter the last link Chapter 3: Tables and Page Layout

  33. Adding a Second Table to the Denali National Park and Preserve Web Page Chapter 3: Tables and Page Layout

  34. Adjusting the Table Width, Centering the Text, and Adding the Table ID • If necessary, click in the cell in table 2 to make table 2 the active table • Click <table> in the tag selector to select the table • Double-click the W box in the Property inspector to select the width value • Type 60 and then press the ENTER key to decrease the table width. If necessary, click the W button arrow and select % (the percent sign) Chapter 3: Tables and Page Layout

  35. Adjusting the Table Width, Centering the Text, and Adding the Table ID • Click the cell in the table to select the cell • Click the Horz button, then click Center to center the text • Click <table> in the tag selector to select the table • Click the Table text box, type alaska_parks_links, and then press the ENTER key to name the table • Click anywhere in the document window to deselect the table Chapter 3: Tables and Page Layout

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

  37. Adding Links to the Denali National Park and Preserve Web Page • Select the first instance of Denali National Park and Preserve located in the first table in row 3, column 1 • In the Link box, type http://www.nps.gov/dena/ and then press ENTER to create an absolute link • Select the second instance of Denali National Park and Preserve located in the first table in row 3, column 1 • Click Insert on the Application bar and then click Email Link. When the Email Link dialog box is displayed, select any text in the Email Link Text text box, type dena@parks.gov as the e-mail address, and then click the OK button to enter an e-mail link • Select Home in the second table, click the Link box, type index.htm and then press ENTER to create the relative link to the home page Chapter 3: Tables and Page Layout

  38. Adding Links to the Denali National Park and Preserve Web Page • Select Denali National Park in the second table, click the Link box, type denali.htm and then press ENTER to create the relative link • Select Gates of the Arctic in the second table, click the Link box, type gates.htm and then press ENTER to create the relative link to a page named gates.htm, which you haven’t created yet • Click the Save button on the Standard toolbar • Press the F12 key to view the Web page. Scroll down to view the links, as shown in Figure 3–38 Chapter 3: Tables and Page Layout

  39. Adding Links to the Denali National Park and Preserve Web Page • Click the Home link to display the index.htm page, and then click the browser Back button and test each of the links • Test the e-mail link • Close the browser and return to the Dreamweaver window Chapter 3: Tables and Page Layout

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

  41. Merging Two Cells in a Table • If necessary, scroll up and then click in row 1, column 1 in the first table • Drag to select the cells in rows 1 and 2 in column 1 • Click the Merge Cells button to merge the cells Chapter 3: Tables and Page Layout

  42. Disabling the Image Tag Accessibility Attributes Dialog Box • Click Edit on the Application bar and then click Preferences to display the Preferences dialog box • Click Accessibility in the Category list to display the accessibility options • If necessary, click the check boxes to deselect Form objects, Frames, Media, and Images to disable the Image Tab Accessibility Attributes dialog box • Click the OK button Chapter 3: Tables and Page Layout

  43. Disabling the Image Tag Accessibility Attributes Dialog Box Chapter 3: Tables and Page Layout

  44. Adding Images to a Table • Expand the panel groups and then click the Assets tab in the panel groups to display the assets for this Web site • If necessary, click the Images button and the Site option button in the Assets panel to display the images for this Web site • Scroll to the top of the table and then click row 1, column 1 to select this cell • Press the ENTER key to insert a blank line • Drag the denali_mountain image from the Assets panel to the insertion point in the merged cell • Click the Expanded button on the Layout tab to switch to Expanded Tables mode, and then click to the right of the denali_mountain image to deselect the image Chapter 3: Tables and Page Layout

  45. Adding Images to a Table • If necessary, reselect the image to prepare for setting its properties • Click the ID text box in the Property inspector and type mt_mckinley as the image ID • Press the TAB key and then type 300 in the W box to set the image width. Press the TAB key and then type 265 in the H box to set the image height • Click the Alt box, type Mt. McKinley as the Alt text, and then press the ENTER key to apply the specified properties. Scroll as necessary to see the completed image • If necessary, scroll up. Click to the right of the image to deselect the image Chapter 3: Tables and Page Layout

  46. Adding Images to a Table • Press the ENTER key to insert a blank line after the image • Drag the denali_bear image from the Assets panel to the insertion point to insert the image in the table • Verify that the denali_bear image is selected, click the ID box in the Property inspector, and then type alaskan_bear to name the image • Press the TAB key and then type 315 in the W box to set the image width • Press the TAB key and then type 395 in the H box to set the image height Chapter 3: Tables and Page Layout

  47. Adding Images to a Table • Click the Alt box, type Alaskan bear as the Alt text, and then press the ENTER key • Click the Align button arrow and select Absolute Bottom to align the bottom of the image at the bottom of the cell • Click Format on the Application bar, point to Align, and then click Left to move the resized image to the left margin. Scroll as necessary to display the bear image • Click to the right of the first paragraph in row 1, column 2, and then press ENTER to insert a blank line • Drag the denali_sunset image to the insertion point to insert the image in the table Chapter 3: Tables and Page Layout

  48. Adding Images to a Table • Click the ID text box in the Property inspector and then type denali_sunset as the image ID • Press the TAB key and then type 320 in the W box as the image width • Press the TAB key to move to the H box and then type 240 as the image height • Click the Alt box, type Denali Park Sunset as the Alt text, and then press ENTER • Click Format on the Application bar, point to Align, and then click Center to center the resized image. Scroll as necessary to display the sunset image Chapter 3: Tables and Page Layout

  49. Adding Images to a Table • Click to the right of the last line of the first paragraph cell in row 2, column 2, and then press the ENTER key to insert a blank line • Drag the denali_hiking image to the insertion point • Click the ID text box and then type denali_hiking to name the image • Press the TAB key and type 450 in the W box to set the image width • Press the TAB key and type 175 in the H box to set the image height • Click the Alt box, type Hiking Denali as the Alt text, and then press the ENTER key Chapter 3: Tables and Page Layout

  50. Adding Images to a Table • Click Format on the Application bar, point to Align, and then click Center to center the resized image. Scroll as necessary to display the hiking image • Select the text in row 3, column 1, and left-align the text to balance the text with the images • Click the exit link next to Expanded Tables mode to return to Standard mode • Click the Save button on the Standard toolbar to save your work • Press the F12 key to view the page in your browser • Close the browser window to redisplay Dreamweaver Chapter 3: Tables and Page Layout

More Related