1 / 90

Chapter 2

Chapter 2. Adding Web Pages, Links, and Images. Chapter Objectives. Add pages to a Web site Describe Dreamweaver’s image accessibility features Describe image file formats Insert, resize, and align images within a Web page. Chapter Objectives. Describe the different types of links

pier
Download Presentation

Chapter 2

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 2 Adding Web Pages, Links, and Images

  2. Chapter Objectives • Add pages to a Web site • Describe Dreamweaver’s image accessibility features • Describe image file formats • Insert, resize, and align images within a Web page Chapter 2: Adding Web Pages, Links, and Images

  3. Chapter Objectives • Describe the different types of links • Create relative, absolute, and e-mail links • Describe how to change the color of links • Edit and delete links Chapter 2: Adding Web Pages, Links, and Images

  4. Chapter Objectives • Check spelling • Describe Code view, Split view, and Design view • Display Code view • Use Live view Chapter 2: Adding Web Pages, Links, and Images

  5. Copying Data Files to the Parks Web Site • Click the Start button on the Windows taskbar and then click Computer to display the Computer window • Navigate to the location of the downloaded data files for Chapter 2 • Double-click the folder containing your data files, and then double-click the Chapter02 folder to open it • Double-click the parks folder to display the data files Chapter 2: Adding Web Pages, Links, and Images

  6. Copying Data Files to the Parks Web Site • Click the aleutian image file or the first file in the list • Hold down the SHIFT key and then click the tlingit image file, or the last file in the list • Right-click the selected files to display the context menu • Click the Copy command and then navigate to the your name folder, which contains the folders and files for the Alaska Parks Web site Chapter 2: Adding Web Pages, Links, and Images

  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 • Click the Paste command to copy the images into the Alaska Parks Web site images folder. Verify that the folder now contains nine images, including the parks_bkg image Chapter 2: Adding Web Pages, Links, and Images

  8. 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 arrow button and then click Alaska Parks on the Files pop-up menu to display the Alaska Parks Web site hierarchy in the Files panel • Click Alaska Parks to display the Alaska Parks Web site hierarchy Chapter 2: Adding Web Pages, Links, and Images

  9. Starting Dreamweaver and Opening the Alaska Parks Web Site Chapter 2: Adding Web Pages, Links, and Images

  10. Opening a New Document Window • Click File on the Application bar and then point to New • Click New to display the New Document dialog box. If necessary, click Blank Page • Click HTML in the Page Type column to specify the type of Web page you are creating. Verify that XHTML 1.0 Transitional is selected in the DocType pop-up menu • Click the Create button to create and display a new Untitled-1 document Chapter 2: Adding Web Pages, Links, and Images

  11. Opening a New Document Window • If necessary, display the Standard toolbar • Click the Save button on the Standard toolbar to display the Save As dialog box • Type preserves.htm in the File name text box to provide a descriptive name for the Web page • Click the Save button to save the preserves page in the parks local folder Chapter 2: Adding Web Pages, Links, and Images

  12. Opening a New Document Window Chapter 2: Adding Web Pages, Links, and Images

  13. Creating the Alaska National Preserves Web Page • Type the heading for the Alaska National Preserves Web page as shown in Table 2–1. Press the ENTER key to create a new paragraph • Type the rest of the text as shown in Table 2–1. Press the ENTER key as indicated in the table to add blank lines between the paragraphs Chapter 2: Adding Web Pages, Links, and Images

  14. Creating the Alaska National Preserves Web Page Chapter 2: Adding Web Pages, Links, and Images

  15. Formatting the Alaska National Preserves Web Page • If necessary, scroll up to the top of the Web page, and then apply Heading 1 to the heading text • Center the heading • Add bullets to the following three paragraphs that begin: Bering Land Bridge National Preserve, Noatak National Preserve, and Yukon-Charley Rivers National Preserve Chapter 2: Adding Web Pages, Links, and Images

  16. Formatting the Alaska National Preserves Web Page • Bold the names of the preserves at the beginning of each of the three paragraphs: Bering Land Bridge National Preserve, Noatak National Preserve, and Yukon-Charley Rivers National Preserve • Add two line breaks after the bullet paragraphs describing the Bering Land Bridge National Preserve, and the Noatak National Preserve • On the Document toolbar, type Alaska National Preserves in the Title text box and then press ENTER • Click the Save button to save your changes to the preserves.htm Web page Chapter 2: Adding Web Pages, Links, and Images

  17. Formatting the Alaska National Preserves Web Page Chapter 2: Adding Web Pages, Links, and Images

  18. Opening a New Document Window • Click File on the Application bar, click New, and then, if necessary, click Blank Page • Click HTML in the Page Type column to select the page type for the Web page • Click the Create button to create and display the new blank document Web page • Save the Web page as historical_sites.htm in the parks folder Chapter 2: Adding Web Pages, Links, and Images

  19. Opening a New Document Window Chapter 2: Adding Web Pages, Links, and Images

  20. Creating the National Parks Web Page • Type the text of the Web page as shown in Table 2–2, and then click the Save button to save your changes • If necessary, scroll to the top of the Web page and then apply Heading 1 to the title • Center the title • Bold the names of each of the three historical sites where they are used as subtitles to make them stand out on the page • Type Alaska National Historical Sites as the Web page title • Click the Save button on the Standard toolbar to save your work Chapter 2: Adding Web Pages, Links, and Images

  21. Creating the National Parks Web Page Chapter 2: Adding Web Pages, Links, and Images

  22. Adding a Background Image to the Alaska National Historical Sites Web Page • If necessary, click the historical_sites.htm tab • Click Modify on the Application bar and then click Page Properties to open the Page Properties dialog box • Click Appearance (HTML) in the Category column • Click the Browse button to the right of the Background image text box to navigate to the images folder. Chapter 2: Adding Web Pages, Links, and Images

  23. Adding a Background Image to the Alaska National Historical Sites Web Page • If necessary, navigate to and then open the images folder • Click parks_bkg.jpg and then click the OK button in the Select Image Source dialog box to select the image • Click the OK button in the Page Properties dialog box to apply the background image • Click the Save button on the Standard toolbar Chapter 2: Adding Web Pages, Links, and Images

  24. Adding a Background Image to the Alaska National Historical Sites Web Page Chapter 2: Adding Web Pages, Links, and Images

  25. Adding a Background Image to the Alaska National Preserves Web Page • Click the preserves.htm tab • Click Modify on the Application bar and then click Page Properties to open the Page Properties dialog box • Click Appearance (HTML) in the Category column • Click the Browse button to the right of the Background image box to navigate to the images folder Chapter 2: Adding Web Pages, Links, and Images

  26. Adding a Background Image to the Alaska National Preserves Web Page • Click parks_bkg.jpg and then click the OK button in the Select Image Source dialog box • Click the OK button in the Page Properties dialog box to apply the background image • Click the Save button on the Standard toolbar Chapter 2: Adding Web Pages, Links, and Images

  27. Adding a Background Image to the Alaska National Preserves Web Page Chapter 2: Adding Web Pages, Links, and Images

  28. Setting Invisible Element Preferences and Turning on Visual Aids • Click Edit on the Application bar and then click Preferences to display the Preferences dialog box • Click Invisible Elements in the Category list to display the Invisible Elements options in the Preferences dialog box • Click the Anchor points for aligned elements check box to make it easier to align elements • Click the OK button to redisplay the Document window • Click View on the Application bar, point to Visual Aids, and then point to and highlight Invisible Elements on the Visual Aids submenu • If necessary, click Invisible Elements to add a check mark to the Invisible Elements command Chapter 2: Adding Web Pages, Links, and Images

  29. Setting Invisible Element Preferences and Turning on Visual Aids Chapter 2: Adding Web Pages, Links, and Images

  30. Opening a Web Page from a Local Web Site • Double-click index.htm in the Files panel to open the index page. If necessary, double-click images to expand the images folder • If the Standard toolbar is not displayed, click View on the Application bar, point to Toolbars, and then click Standard to display the Standard toolbar Chapter 2: Adding Web Pages, Links, and Images

  31. Opening a Web Page from a Local Web Site Chapter 2: Adding Web Pages, Links, and Images

  32. Inserting an Image into the Index Page • If necessary, scroll to the top of the page • Click the Assets panel tab to display the panel. Verify that the Images icon is selected • Click map01.gif in the Assets panel to select the image file • Drag map01.gif from the Assets panel to the left of the first bulleted line. The Image Tag Accessibility Attributes dialog box is displayed Chapter 2: Adding Web Pages, Links, and Images

  33. Inserting an Image into the Index Page • Type Alaska Map in the Alternate text text box to provide alternate text for the map01 image • Click the OK button to display the selected image in the Document window and to view the attribute changes in the Property inspector Chapter 2: Adding Web Pages, Links, and Images

  34. Inserting an Image into the Index Page Chapter 2: Adding Web Pages, Links, and Images

  35. Aligning an Image • Click the panel groups Collapse to Icons arrow to collapse the panel groups • If necessary, click the map01 image to select it • Click the Align button arrow in the Property inspector • Point to Right on the pop-up menu • Click Right to move the selected image to the right side of the window and to display the element marker Chapter 2: Adding Web Pages, Links, and Images

  36. Aligning an Image Chapter 2: Adding Web Pages, Links, and Images

  37. Adjusting the Image Size and the Horizontal and Vertical Space • If necessary, click to select the image • Click the W text box in the Property inspector and type 525 to adjust the width of the image • Press the TAB key and type 390 in the H text box to adjust the height of the image • Press the ENTER key Chapter 2: Adding Web Pages, Links, and Images

  38. Adjusting the Image Size and the Horizontal and Vertical Space • Click the V Space text box and type 10 to adjust the vertical space between the image and the text • Press the TAB key and type 25 in the H Space text box to adjust the horizontal space between the image and the text • Press the TAB key • Click the image to remove the highlighting and to view the added space and the reduced size Chapter 2: Adding Web Pages, Links, and Images

  39. Adjusting the Image Size and the Horizontal and Vertical Space Chapter 2: Adding Web Pages, Links, and Images

  40. Inserting the Second Image • If necessary, scroll up and position the insertion point to the left of the second paragraph • Expand the panel groups, and then expand the Assets panel to display the images • In the Assets panel, click mountain01.jpg to select the image • Drag the image to the insertion point to add the image to the Web page Chapter 2: Adding Web Pages, Links, and Images

  41. Inserting the Second Image • Type Alaska Mountains in the Alternate text text box, and then click the OK button to insert the mountain01 image into the Web page • In the Property inspector, click the Align button arrow • Click Left in the Align pop-up menu to move the image to the left side of the window and to adjust the text to the right. The bullets and part of the text are hidden by the image, indicating the horizontal and vertical spacing needs to be adjusted • In the Property inspector, adjust the W to 165 and the H to 210 • Click the H Space box and type 20 as the horizontal space Chapter 2: Adding Web Pages, Links, and Images

  42. Inserting the Second Image • Press the TAB key • Click anywhere in the Document window to deselect the image and view the additional vertical and horizontal space added between the text and images • Click the Save button on the Standard toolbar • Press the F12 key to view the Web page in your browser • Move the mouse pointer over the mountain01 and map01 images to display the Alt text • Close the browser to return to Dreamweaver Chapter 2: Adding Web Pages, Links, and Images

  43. Inserting the Second Image Chapter 2: Adding Web Pages, Links, and Images

  44. Inserting and Aligning an Image in the Alaska National Parks Web Page • Click the preserves.htm document tab. If necessary, display the panel groups and click the Assets tab • Position the insertion point to the left of the first sentence after the heading • Drag the beringia_map image file from the Assets panel to the insertion point • Type Beringia Map in the Alternate text text box and then click the OK button to display the map • Type 10 in the H Space box to add horizontal space. Press the ENTER key Chapter 2: Adding Web Pages, Links, and Images

  45. Inserting and Aligning an Image in the Alaska National Parks Web Page • Click the Align button arrow and then click Right to align the image to the right side of the window • Drag the falcon image file from the Assets panel to the end of the first sentence • Type Alaska Falcon in the Alternate text text box and then click the OK button • Click the Align button arrow and then click Left to align the image to the left Chapter 2: Adding Web Pages, Links, and Images

  46. Inserting and Aligning an Image in the Alaska National Parks Web Page • Click anywhere in the Document window to deselect the image • Click the Save button on the Standard toolbar • Press the F12 key • Close the browser to return to Dreamweaver • Select the value in the W box in the Property inspector and type 300 • Press the TAB key and type 220 in the H box Chapter 2: Adding Web Pages, Links, and Images

  47. Inserting and Aligning an Image in the Alaska National Parks Web Page • Click the V Space box and type 15 as the vertical space • Press the TAB key and type 20 in the H Space box as the horizontal space • Press the ENTER key to add the space • Click anywhere in the Document window to deselect the image • Click the Save button on the Standard toolbar Drag the noatak_river image to the right of the last sentence in the third paragraph Chapter 2: Adding Web Pages, Links, and Images

  48. Inserting and Aligning an Image in the Alaska National Parks Web Page • Type Noatak River in the Alternate text text box and then click the OK button • Click the Align button arrow and then click Right to align the image to the right • Select the value in the W box in the Property inspector and type 200 to set the image width • Press the TAB key and type 105 in the H box to set the image height, and then press ENTER • Click anywhere in the Document window to deselect the image • Click the Save button Chapter 2: Adding Web Pages, Links, and Images

  49. Inserting and Aligning an Image in the Alaska National Parks Web Page • Press the F12 key to display the Alaska National Preserves page in the browser • Close the browser to return to Dreamweaver Chapter 2: Adding Web Pages, Links, and Images

  50. Inserting and Aligning an Image in the Alaska National Parks Web Page Chapter 2: Adding Web Pages, Links, and Images

More Related