Adding, Aligning, and Resizing Images on a Web Page
Instructions: In this activity, you modify a Web page by adding, aligning, and resizing images (Figure 2-75). Make sure you have downloaded the data files for Chapter02\extend, which are available in the Data Files for Students folder. See the inside back cover of this topic for instructions on downloading the Data Files for Students, or contact your instructor for information about accessing the required files.
Figure 2-75
Perform the following tasks:
1. Copy the data files from the Chapter02\extend data files folder into the images folder for your Extend Exercises local Web site. (For example, the images folder might be stored on H:\edwardsd\ extend\images.)
2. Start Dreamweaver, and open the Extend Exercises site.
3. Open the extend.htm file.
4. Remove the bold from the bulleted list, your name, and the date.
4. Drag the flower01 image to the top of the page and to the left of the second line, which begins, “Choose from among”.
5. Type flower01 in the Alternate text text box.
6. Resize the image width to 165 and the height to 185.
7. Type 25 in both the V Space box and the H Space box.
8. Align the image to the left.
9. Click after the second line (which begins, “Choose from among”). Drag the flower02 image to the insertion point. Type flower02 in the Alternate text text box.
10. Resize the image width to 165 and the height to 185.
11. Enter 25 for both the V Space and the H Space.
12. Align the image to the right.
13. Move the sentence that begins with “Choose from among” after the bulleted list. Make sure you do not move the element marker. Also make sure the sentence remains centered and does not have a bullet. Bold the sentence if it is not already bolded.
14. Save your document and then view it in your browser. Submit it in the format specified by your instructor.
Make It Right
Analyze a document and then correct all errors and/or improve the design.
Adding an Image to a Web Page
Instructions: In this activity, you modify an existing Web page by adding an image (Figure 2-76). Make sure you have downloaded the data files for Chapter02\right, which are available in the Data Files for Students folder. See the inside back cover of this topic for instructions on downloading the Data Files for Students, or contact your instructor for information about accessing the required files.
Figure 2-76
Perform the following tasks:
1. Copy the data file from the Chapter02\right data files folder into the images folder for your Right Exercises local Web site. (For example, the images folder might be stored on H:\edwardsd\right\ images.)
2. Start Dreamweaver, open the Right Exercises site, and then open the right.htm page. If necessary, open the Local Files panel and the Property inspector. Verify that HTML is selected.
3. Insert a new line after the last item in the list. If a bullet is displayed, click the Unordered List button in the Property inspector. Center the line, if necessary.
4. Drag the ribbon01 image to the insertion point. Type ribbon for the alternate text.
5. Adjust the image width to 177 and the height to 183.
6. Make any other adjustments as necessary to make your Web page match the one shown in Figure 2-76.
7. Save your document and then view it in your browser.
8. Submit your Web page in the format specified by your instructor.
In the Lab
Create a document using the guidelines, concepts, and skills presented in this topic. Labs are listed in order of increasing difficulty.
Lab 1: Modifying the Computer Repair Services Web Site
Problem: Now that Bryan has a basic Web page for his Computer Repair Services Web site, he wants to make the page more appealing to visitors. He asks you to help him add images of computers to his Web page.
Image files for the Bryan’s Computer Repair Services Web site are included with the data files. See the inside back cover of this topic for instructions for downloading the data files or see your instructor for information on accessing the files in this to.
You need to add two new pages to the Bryan’s Computer Repair Services Web site: a services page and a references page. In this exercise, you will add relative and absolute links to each page. You also will add a background image to the new pages. Next, you will insert images on all three pages and use the settings in Table 2-4 to align the images and enter the alternate text. You then will add an e-mail link to the home page and relative links from the two new pages to the home page. The pages for the Web site are shown in Figures 2-77a, 2-77b, and 2-77c. (Software and hardware settings determine how a Web page is displayed in a browser. Your Web pages may be displayed differently in your browser from the pages shown in the figures.)
Figure 2-77
Table 2-4 Image Property Settings for the Bryan’s Computer Repair Services Web Site
|
Image Name |
W |
H |
V Space |
H Space |
Align |
Alt |
|
computer_repair01 |
191 |
253 |
10 |
25 |
left |
repairs |
|
computer_repair02 |
239 |
235 |
25 |
50 |
left |
desktop computer |
|
computer_repair03 |
150 |
174 |
20 |
20 |
right |
disk drive |
|
computer_repair04 |
190 |
175 |
10 |
20 |
left |
monitor |
|
hard_drive |
260 |
260 |
20 |
50 |
right |
hard drive |
Perform the following tasks:
1. Copy the services and references data files from the Chapter02\computers data files folder into the root folder for your Computer Repair Services local Web site. (For example, the root folder might be stored on H:\edwardsd\computers.) Copy the image data files from the Chapter02\computers\ images data files folder into the images folder for your Computer Repair Services local Web site. (For example, the images folder might be stored on H:\edwardsd\computers\images.)
2. Start Dreamweaver and display the panel groups. Open the Computer Repair Services site, and then open the index.htm file.
3. If necessary, click the expander arrow to expand the Property inspector and display the Standard toolbar.
4. Open the Assets panel to display the contents of the images folder. Position the insertion point at the end of the first sentence. Drag the computer_repair01 image to the insertion point, add the alternate text as indicated in Table 2-4, and then apply the settings shown in Table 2-4 to resize and align the image.
5. Position the insertion point at the end of the first sentence again. Drag the hard_drive image to the insertion point and then apply the settings shown in Table 2-4.
6. Select the text Basic services in the first bulleted item. Click the Files tab in the panels group, and then use the drag-and-drop file method to create a link to the services page. Repeat this process to add a link from the References text to the references page.
7. Select your name. Use the Insert menu to create an e-mail link using your name. Center the first sentence, if necessary. Save the index page (Figure 2-77a).
8. Open the services page. Click Modify on the Application bar and then click Page Properties. Apply the repair_bkg background image (located in the images folder) to the services page.
9. Position the insertion point to the left of the first sentence. Open the Assets panel, drag the computer_repair02 image to the insertion point, and then apply the settings shown in Table 2-4.
10. If necessary, scroll down. Select Home, click the Files tab in the panels group, and then create a relative link to the index page. Save the services page (Figure 2-77b).
11. Open the references page. Apply the repair_bkg background image (located in the images folder) as you did in Step 8 for the services page.
12. Position the insertion point to the right of the second heading and then drag the computer_ repair03 image to the insertion point. Apply the settings shown in Table 2-4 to the image.
13. Insert a blank line before the first bulleted item in the list. Remove the bullet, if necessary. Drag the computer_repair04 image to the insertion point. Apply the settings shown in Table 2-4 to the image.
14. Scroll to the bottom of the page. Select Home and then create a relative link to the index page.
Save the references page (Figure 2-77c).
15. View the Web site in your browser. Check each link to verify that it works. Submit the documents in the format specified by your instructor.
