1 / 122

Chapter 3

Chapter 3. Tables and Page Layout. Chapter Objectives. Understand and plan page layout Describe Standard mode and Layout mode Design a Web page using tables in Standard mode Design a Web page using tables in Layout mode. Chapter Objectives. Describe visual guides Modify a table structure

joaquin
Télécharger la présentation

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 and plan page layout • Describe Standard mode and Layout mode • Design a Web page using tables in Standard mode • Design a Web page using tables in Layout mode Chapter 3: Tables and Page Layout

  3. Chapter Objectives • Describe visual guides • Modify a table structure • Describe HTML table tags • Add content to a table Chapter 3: Tables and Page Layout

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

  5. Copying Data Files to the Parks Web Site • Click the Start button on the Windows taskbar and then click My Computer • Double-click Local Disk (C:) and then navigate to the location of the data files for Chapter 3 • Double-click the DataFiles folder and then double-click the Chap03 folder • Double-click the parks folder and then double-click the images folder Chapter 3: Tables and Page Layout

  6. Copying Data Files to the Parks Web Site • Click the alberta_falls.gif image file or the first file name in the list • Hold down the SHIFT key and then click the winter_view.jpg image file (or the last file name in the list) to select the eleven image files • Right-click the selected files to display the context menu. • Click the Copy command and then click the My Computer Back button the number of times necessary to navigate to the your name folder Chapter 3: Tables and Page Layout

  7. Copying Data Files to the Parks Web Site • Double-click the your name folder, double-click the parks folder, and then double-click the images folder • Right-click anywhere in the open window to display the context menu, and then click Paste • Click the images window Close button Chapter 3: Tables and Page Layout

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

  9. Starting Dreamweaver and Opening the Colorado Parks Web Site • Click the Start button on the Windows taskbar • Point to All Programs on the Start menu, point to Adobe Dreamweaver CS3 on the All Programs submenu, and then click Adobe Dreamweaver CS3 on the Adobe submenu • Click the Files panel box arrow and point to Colorado Parks on the Files panel pop-up menu • Click Colorado Parks, If necessary, double-click the images folder Chapter 3: Tables and Page Layout

  10. Starting Dreamweaver and Opening the Colorado Parks Web Site Chapter 3: Tables and Page Layout

  11. Opening a New Document Window • Click File on the menu bar and then click New. If necessary, click the General tab and then click Basic page in the Category list • If necessary, click HTML in the Basic page list • Click the Create button • Click the Save button on the Standard toolbar • Type rocky-mt as the file name. If necessary, select the parks folder, and then click the Save button Chapter 3: Tables and Page Layout

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

  13. Adding a Background Image to the Rocky Mountain National Park Web Page • Click the panel groups expander arrow to hide the panel groups • If necessary, click the Property inspector expander arrow to display both the top and lower sections • Click Modify on the menu bar and then click Page Properties • Click the Browse button to the right of the Background image box Chapter 3: Tables and Page Layout

  14. Adding a Background Image to the Rocky Mountain National Park Web Page • If necessary, navigate to the parks\images folder • Click parksbg.jpg and then click the OK button in the Select Image Source dialog box • Click the OK button in the Page Properties dialog box,If necessary, click the Document window Chapter 3: Tables and Page Layout

  15. Adding a Background Image to the Rocky Mountain National Park Web Page Chapter 3: Tables and Page Layout

  16. Inserting and Formatting the Heading • Click the Document window. Type Rocky Mountain National Park as the heading • Apply Heading 1, click the Align Center button in the Property inspector • Drag to select the title. Type #336633 in the color hexadecimal value box in the Property inspector. Press the ENTER key • If necessary, click anywhere on the page to deselect the heading • Title the page Rocky Mountain National Park, and then click the Save button on the Standard toolbar Chapter 3: Tables and Page Layout

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

  18. Displaying the Insert Bar and Selecting the Layout Category • If necessary, click Window on the menu bar. If the Insert command is not checked, click Insert • Point to the Layout tab • Click the Layout tab Chapter 3: Tables and Page Layout

  19. Displaying the Insert Bar and Selecting the Layout Category Chapter 3: Tables and Page Layout

  20. Inserting a Table Using Standard Mode • If necessary, click the Standard button on the Insert bar and then click the Table button • If necessary, type 3 and then press the TAB key to move to the Columns box • Type 2 as the new value in the Columns box and then press the TAB key • Type 90 as the new value in the Table width box and then click the Table width arrow Chapter 3: Tables and Page Layout

  21. Inserting a Table Using Standard Mode • Click percent and then press the TAB key • Type 0 in the Border thickness box and then press the TAB key • Type 2 in the Cell padding box and then press the TAB key • Type 20 in the Cell spacing box and then press the TAB key Chapter 3: Tables and Page Layout

  22. Inserting a Table Using Standard Mode • If necessary, select None for the Header • Click the Summary text box and type Table layout for Rocky Mountain National Park Web page. The table contains three rows and two columns with images and text in the table cells. • Click the OK button Chapter 3: Tables and Page Layout

  23. Inserting a Table Using Standard Mode Chapter 3: Tables and Page Layout

  24. Selecting and Centering a Table • Click row 1, column 1 • Click <table> in the tag selector • Click the Align box arrow in the Property inspector and then point to Center • Click Center Chapter 3: Tables and Page Layout

  25. 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 box arrow and then point to Top in the Vert pop-up menu • Click Top Chapter 3: Tables and Page Layout

  26. 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 50% and then press the ENTER key • 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% and then press the ENTER key • Click anywhere in the table to deselect the column Chapter 3: Tables and Page Layout

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

  28. Adding a Table ID to the Rocky Mountain National Park Feature Table • Click <table> in the status bar to select the table • Click the Table Id text box and then type Rocky Mountain National Park feature page as the table ID text • Press the ENTER key Chapter 3: Tables and Page Layout

  29. Adding Rocky MountainNational Park Text • Type the three paragraphs of Part 1 in Table 3-3 in row 1, column 2 of the table in the Document window. Press the ENTER key as indicated in the table • If necessary, scroll down to display the rest of the table. Type the text of Part 2, as shown in Table 3-3, into row 3, column 1 of the Document window. Use SHIFT+ENTER to insert the line breaks • Select the text in row 3, column 1 • Click the Align Right button in the Property inspector Chapter 3: Tables and Page Layout

  30. Adding Rocky Mountain National Park Text Chapter 3: Tables and Page Layout

  31. Adding a Second Table to the Rocky Mountain National Park Web Page • Click outside the right border of the existing table to position the insertion point outside the table • Press the ENTER key • Click the Table button on the Layout Insert bar • Change the number of rows to 1, the number of columns to 1, the width to 75, the cell padding to 0, and the cell spacing to 10 Chapter 3: Tables and Page Layout

  32. Adding a Second Table to the Rocky Mountain National Park Web Page • Type Links table in the Summary text box • If necessary, change other settings to match the settings shown in Figure 3-35 • Click the OK button • If necessary, click the Align box arrow and then click Center • Click the cell in the table. Type Home and then press the SPACEBAR. Press SHIFT + | (vertical bar) and then press the SPACEBAR Chapter 3: Tables and Page Layout

  33. Adding a Second Table to the Rocky Mountain National Park Web Page • Type Black Canyon and then press the SPACEBAR. Press SHIFT + | and then press the SPACEBAR • Type Great Sand Dunes and then press the SPACEBAR. Press SHIFT + | and then press the SPACEBAR • Type Mesa Verde and then press the SPACEBAR. Press SHIFT + | and then press the SPACEBAR • Type Rocky Mountain as the last link text Chapter 3: Tables and Page Layout

  34. Adding a Second Table to the Rocky Mountain National Park Web Page Chapter 3: Tables and Page Layout

  35. Adjusting the Table Width, Centering the Text, and Adding the Table ID • If necessary, click the cell in table 2. Click <table> in the tag selector to select the table • Double-click the W box in the Property inspector • Type 60 and then press the ENTER key • Click anywhere in the cell in the table Chapter 3: Tables and Page Layout

  36. Adjusting the Table Width, Centering the Text, and Adding the Table ID • Click the Align box arrow and then click Center • Click <table> in the tag selector to select the table • Click the Table ID text box, type Colorado Parks links table, and then press the ENTER key • Click anywhere in the Document window to deselect the table Chapter 3: Tables and Page Layout

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

  38. Adding Links to the Rocky Mountain National Park Page • Select the first instance of Rocky Mountain National Park located in the first table in row 3, column 1 • Type http://www.nps.gov/romo/ in the Link box. Press ENTER to create an absolute link • Select the second instance of Rocky Mountain National Park, located in the first table in row 3, column 1 • Click Insert on the menu bar and then click Email Link. When the Email Link dialog box is displayed, type romo@parks.gov as the e-mail address. Click the OK button • Select Home in the second table. Type index.htm in the Link box and press ENTER to create the relative link Chapter 3: Tables and Page Layout

  39. Adding Links to the Rocky Mountain National Park Page • Select Black Canyon in the second table. Type blca.htm in the Link box and press ENTER to create the relative link • Select Great Sand Dunes in the second table. Type blca.htm#sand_dunes in the Link box and press ENTER to create the relative link to the named anchor • Select Mesa Verde in the second table. Type meve.htm in the Link box and press ENTER to create the relative link • Select Rocky Mountain in the second table. Type rocky-mt.htm in the Link box and press ENTER to create the relative link Chapter 3: Tables and Page Layout

  40. Adding Links to the Rocky Mountain National Park Page • 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 on the next slide • Click the Home link to display the index.htm page and then click the Browser back button • Close the browser and return to the Dreamweaver window Chapter 3: Tables and Page Layout

  41. Adding Links to the Rocky Mountain National Park Page Chapter 3: Tables and Page Layout

  42. Merging Two Cells • If necessary, scroll up and then click 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 Chapter 3: Tables and Page Layout

  43. Disabling the Image Tag Accessibility Attributes Dialog Box • Click Edit on the menu bar and then click Preferences • Click Accessibility in the Category list • Click the checkboxes to deselect Form objects, Frames, Media, and Images and then click the OK button Chapter 3: Tables and Page Layout

  44. Adding Images to a Standard Mode Table • Click the panel groups expander arrow and then click the Assets tab in the panel groups • If necessary, click the Images button and the Site option button • Scroll to the top of the table and then click the cell in row 1, column 1 • Press the ENTER key • Drag the keyhole_longs_peak.gif image from the Assets panel to the insertion point in the merged cell. If necessary, click the Refresh Site List button to view the images • Click the Expanded Tables mode button and then click to the right of the keyhole_longs_peak.gif image. If a Getting Started in Expanded Tables Mode dialog box is displayed, read the information and click the OK button. The dialog box may not display if the Don’t show me this message again check box was checked previously. Press the ENTER key Chapter 3: Tables and Page Layout

  45. Adding Images to a Standard Mode Table • Drag the alberta_falls.gif image to the insertion point, if necessary, scroll down to view the image • Scroll up and click the keyhole_longs_peak.gif image to select it • Click the Image text box in the Property inspector and type Keyhole_Longs_Peak as the image ID • Click the Alt box, type Keyhole Longs Peak as the Alt text, and then press the ENTER key • Scroll down and then click the alberta_falls.gif image to select it Chapter 3: Tables and Page Layout

  46. Adding Images to a Standard Mode Table • Click the Image text box in the Property inspector and then type Alberta_Falls as the image ID • Press the TAB key and then type 300 in the W box • Press the TAB key to move to the H box and then type 220 as the new value • Click the Alt box, type Alberta Falls as the Alt text, and then press the ENTER key • Click the Align Center button Chapter 3: Tables and Page Layout

  47. Adding Images to a Standard Mode Table • Scroll down and to the right. Click row 3, column 2 • Drag the elk.gif image from the Assets panel to the insertion point in row 3, column 2 • Verify that the elk.gif image is selected, click the Image text box, and type Elk. Click the Alt box, type Rocky Mountain Elk as the Alt text, and then press the ENTER key • Click the Align box arrow and select Top • Click the Align Center button Chapter 3: Tables and Page Layout

  48. Adding Images to a Standard Mode Table • Scroll up. Click the cell in row 2, column 2 and then drag to select this cell and the cell in row 3, column 2 • Scroll up and select all of the text in row 1, column 2 • Click the Size arrow and select 18 • Click the Vert box arrow and select Middle • Scroll down and select the text in row 2, column 1 Chapter 3: Tables and Page Layout

  49. Adding Images to a Standard Mode Table • Click the Style arrow and select style2 • Click anywhere in the document to deselect the text • Click the Standard button • Click the Save button Chapter 3: Tables and Page Layout

  50. Adding Images to a Standard Mode Table • Press the F12 key to view the page in your browser • The Rocky Mountain National Park page displays in the browser • Close the browser window Chapter 3: Tables and Page Layout

More Related