Macromedia Dreamweaver 8 Page 1 of 11
Macromedia Dreamweaver 8
Project Two
Adding Web Pages, Links, and Images
objectives
Students will have mastered the material in this chapter when they can:
Macromedia Dreamweaver 8 Page 1 of 11
l Define and set a home page
l Add pages to a Web site
l Describe Dreamweaver's image accessibility features
l Describe image file formats
l Insert, resize, and align images within a Web page
l Describe the different types of links
l Create a relative, absolute, and e-mail links
l Describe how to change the color of links
l Edit and delete links
l Describe and display the Site Map
l Describe Code view, Split view, and Design view
l View Code view
Macromedia Dreamweaver 8 Page 1 of 11
Project overview
This project introduces students to images, links, the Site Map, and how to view source code. The project begins by using the Windows My Computer option to copy data files to the local site. It leads students through adding two new pages, one for Colorado National Parks and one for Colorado National Monuments. It shows students how to add page images to the index page, and how to add a background image and page images to the National Park and National Monuments pages. It also instructs students in how to add relative links to all three pages, how to add an e-mail link to the home page, and how to add absolute links to the National Monuments page. It explains how to use the Site Map. Finally, it shows how to view source code.
instructor notes
Introduction, 116
LECTURE NOTES
Discuss the addition of Web pages to the local site created in Project 1. Review the definition of a site (or Web site) from Project 1. Discuss the use of images on Web pages and introduce image properties and image types. Redefine link from Project 1. Introduce the different types of links a Web page can contain: internal or relative, absolute, e-mail, or links to a specific place within a document (also known as anchors).
Project Two –Two New Pages, Links, and Images, 117
LECTURE NOTES
Review the Colorado Parks Web site created in Project 1 and the additional content that will be added in this project. Use Figure 2-1a to discuss the changes to the existing index page, and Figures 2-1b and 2-1c to display the two new pages to be created. Review the four types of Web structures illustrated in the Introduction, and discuss the hierarchical structure of this Web site as sketched in Figure 2-2.
Managing a Web site, 118
LECTURE NOTES
Discuss the two methods by which you can add a page to a site: by creating a new page and saving it as part of the site, or by opening an existing page from another source and saving it as part of the site. Discuss the special significance of the file names index.htm and index.html.
Copying data files to the local Web site, 118
LECTURE NOTES
Explain how students can download the Data Disk and use the Windows My Computer option to copy the Project 2 images to their parks images folder. Review Steps 1 through 12 on page 119 to explain how to copy data files to the Colorado Parks Web site. Use Figure 2-3 to further illustrate copying data files to the parks Web site file hierarchy. Point out the images folder for parks Web site and the data files in the figure.
Starting Dreamweaver and opening a Web site, 120
LECTURE NOTES
Discuss the Files pop-up menu in the Files panel list. Use Figures 2-4 and 2-5 to illustrate starting Dreamweaver and opening the Parks Web site. Point out the Files pop-up menu in the Files panel in Figure 2-4 and the Colorado Parks site listing in the Files panel in Figure 2-5.
Opening a Web page, 121
LECTURE NOTES
Compare opening a Web page in Dreamweaver with opening an existing document in another software application. Use Figure 2-6 to illustrate opening a Web page from a local Web site. Mention Other Ways to open a Web page.
The Files panel, 122
LECTURE NOTES
Describe the Dreamweaver Files panel. Define root directory or top-level directory. Define device icon. Define folder icon. Review the use of the plus or minus sign as an indicator of whether or not a device/folder contains additional folders. Discussion More About Refreshing the Files Panel on page 123.
The home page and the site map, 123
LECTURE NOTES
Define home page. Point out to students that the index page they created in Project 1 is the home page for the Colorado Parks Web site. Explain that Dreamweaver provides a graphical option to view the home page — the Site Map, and mention that the Site Map is accessed through the Files panel.
Setting a home page, 123
Point out that a home page generally contains links to all other pages within a Web site. Review the fact that most home pages are named index.htm or index.html. Use Figure 2-7 to illustrate setting a home page. Point out the Set as Home Page command on the context menu in the Files panel. Mention Other Ways to set a home page for a site.
Adding pages to a Web site, 124
LECTURE NOTES
Explain that students will begin building and enhancing their Colorado Parks site by adding two new pages to the site: Colorado National Parks and Colorado National Monuments. Point out the Q&A.
Opening a new document window, 124
LECTURE NOTES
Use Figures 2-8 through 2-13 to illustrate opening a new document window, noting that the new window students open will become the Colorado National Parks page. Point out the New command on the File menu in Figure 2-8. Point out that XHTML 1.0 Transitional is selected in the New Document dialog box in Figure 2-9. Point out the new path and file name in the title bar in Figure 2-13. Use Figure 2-14 to discuss preparing the workspace. Point out the Property inspector collapsed and the panel groups hidden.
QUICK QUIZZES
How do you expand or collapse a panel group? (Answer: Click the expand/collapse arrow to the left of the group's name.)
Creating the National Parks Web page, 128
LECTURE NOTES
Use Table 2-1 to review all the text to be typed in the untitled Document window to create the Colorado National Parks Web page. Discuss More About Using the Keyboard Shortcut Editor. Use Figures 2-15 and 2-16 to illustrate creating the National Parks Web page. Explain that the insertion point for a new paragraph shown in Figure 2-15 results from pressing the enter key. Use Figure 2-16 to display the text entered. Review Steps 1 through 9 on pages 130 and 131 to format the Colorado National Parks Web page, and use Figure 2-17 to illustrate the Web page formatted and saved.
Creating the National Monuments Web page, 131
LECTURE NOTES
Review Steps 1 through 5 to open a new document window, and use Figure 2-18 to display the new window with the name of the saved page in the title bar. Use Table 2-2 to review all the text to be typed in the untitled Document window to create the Colorado National Monuments Web page. Review Step 1 on page 133 to create the National Monuments Web page. Use Figure 2-19 to display the text entered. Review Steps 1 through 8 to format the Colorado National Monuments Web page, and use Figure 2-20 to illustrate the Web page formatted and saved. Discuss the enhancements to be made later in the project.
Images, 135
LECTURE NOTES
Discuss the use of images to add excitement and interest to a Web page. Emphasize the importance of balancing the number of images (especially if they are large) with concerns about increasing the download times that your visitors must wait when they view your pages.
Image file formats, 135
LECTURE NOTES
Define vector image. Discuss the benefits of vector files (also called geometric files) and the types of applications with which vector images generally are associated (e.g., Flash, LiveMotion). Explain that vector graphics are generated through a series of mathematical statements or commands that position lines and shapes in space. The term derives from physics, which defines a vector as a representation simultaneously of both a quantity and a direction. A vector graphics file takes a graphic artist’s work and saves it as a series of vector statements. The difference between a vector file and a bitmap file is that the former describes a series of points to be connected — resulting in a smaller file — while the latter contains a bit in the file for each bit of a line drawing. Vector files like Flash or other animation products send the animation to the viewer as a vector file that then is converted to a bitmap image as it is delivered to the viewer. Define bitmap images. Define pixel (or picture element). Explain the division of a monitor’s display screen into a grid of rows and columns, called a bitmap. Define bit-resolution. Explain that a bitmap image doesn’t need to contain a bit of color-coded information for each pixel on every row, in a one-to-one fashion; instead, it has to hold information only for each time the color changes as the display processes a row. For this reason, an image with a lot of one color requires a smaller bitmap than one with a variety of colors. Define GIF (Graphics Interchange Format). Discuss the uses of GIFs for logos, icons, and the like. Discuss the transparency feature of the GIF format. To explain transparent GIFs, ask students to image that they have created a blue-and-white logo for a Web page, and that they would like the blue to display on the Web page but not the white; a transparent GIF will change the white to match whatever the Web page’s background color is, so that when the Web page is viewed, only the blue displays on the page. Spacer GIFs—one-color transparent GIFs used as placeholders on Web pages—are another use of the transparency feature. Discuss the interlacing feature of the GIF format. A good analogy to use is that of an image slowly coming into focus as if through a Venetian blind that is opening, as seven consecutive waves of bit streams arrive to fill in the missing data until the image is at its full resolution. The advantage is that for visitors with slower connection speeds, interlaced GIFs mitigate the negative impact of long waits for downloading images. (Users with faster connections will make little distinction between interlaced and non-interlaced GIFs.) Discuss animation and the fact that the GIF format can be animated, explaining that animated GIF images are simply a number of GIF images saved into a single file and looped, or repeated over and over. Define JPEG (Joint Photographic Experts Group). Discuss the use of JPEGs for photographic images. Discuss the progressive JPEG format, and compare this feature to interlaced GIFs. Define PNG (Portable Network Graphics). Discuss the advantages and disadvantages of the format. Explain that PNG was designed to replace the older and simpler GIF format and the more complex TIFF format.
Background colors and background images, 135
LECTURE NOTES
Discuss the fact that, although students changed the background color as part of the application of a color scheme in Project 1, a background color can be added without requiring that a color scheme be applied. Point out the Q&A. Emphasize the importance of using Web-safe colors in selecting background colors. Discuss the use of background images to add texture and color to a Web page. Encourage students to use caution in adding background images. Use Steps 1 through 7 to explain how to add a background image to the Colorado National Parks Web page. Use Figure 2-21 to illustrate the application of the background image. Use Steps 1 through 6 to explain how to add a background image to the Colorado National Monuments Web page. Mention Other Ways to add a background image. Use Figure 2-22 to illustrate the application of the background image.
Assets panel, 137
LECTURE NOTES
Explain that assets are elements, such as images or Flash files, that you use in building a page or a site. Use Figure 2-23 to describe the Assets panel. Point out and explain the uses of the asset types on the panel, including Images, Flash, Movies, Shockwave, Scripts, Templates, and Library. Point out the Site list, the Favorites list, and the images list. Point out the Insert button, the Refresh Site List button, the Edit button, and the Add Favorites button.
Accessibility, 138
LECTURE NOTES
Discuss the need when developing a site to consider the full spectrum of visitors who may access a Web site, including those who have disabilities. Review the features of the Image Tag Attributes dialog box in Figure 2-24, and discuss each of the text boxes it contains. Refer students to Appendix B for a full overview of Dreamweaver’s accessibility features.
Invisible elements, 138
LECTURE NOTES
Discuss the use of the invisible element marker to identify the location of an inserted image within HTML code when an image is moved from the insertion point. Use Figures 2-25 through 2-27 to illustrate setting invisible element preferences, and turning on visual aids. Point out the Anchor points for aligned elements check box in Figures 2-25 and 2-26. Point out the Invisible Elements command on the Visual Aids submenu in Figure 2-27.
Inserting an image into a Web page, 141
LECTURE NOTES
Explain that inserting images into a Web page involves simply dragging and dropping the image from the Files panel or the Assets panel. Use Figures 2-28 through 2-30 to illustrate inserting an image into the index page. Point out the Assets panel and the expander arrow in Figure 2-28. Discuss the use of the insertion point in Figure 2-29 to position the image. Point out the Image property inspector in Figure 2-30.