In the Lab
Lab 2: Modifying the Baskets Web Site
She asks you to add two images to the index page and to create a second page with links and images. Carole wants the new page to include information about her company’s history.
Add a second Web page to the Baskets by Carole Web site. The revised Web site is shown in Figures 2-78a and 2-78b. Table 2-5 includes the settings and alternate text for the images. Software and hardware settings determine how a Web page displays in a browser. Your Web pages may be displayed differently in your browser from those in the figures.
Figure 2-78
Table 2-5 Image Property Settings for the Baskets by Carole Web Site
|
Image Name |
W |
H |
V Space |
H Space |
Align |
Alt |
|
basket01 |
190 |
174 |
25 |
25 |
right |
rose basket |
|
basket02 |
174 |
170 |
10 |
20 |
left |
daisy basket |
|
basket03 |
183 |
239 |
20 |
50 |
right |
baskets |
|
basket04 |
174 |
204 |
10 |
25 |
left |
shopping |
Perform the following tasks:
1. Copy the history data file from the Chapter02\baskets data files folder into the root folder for your Gift Basket Designs local Web site. (For example, the root folder might be stored on H:\edwardsd\ baskets.) Copy the image data files from the Chapter02\baskets\images data files folder into the images folder for your Gift Basket Designs local Web site. (For example, the images folder might be stored on H:\edwardsd\baskets\images.)
2. Start Dreamweaver and display the panel groups. Open the Gift Basket Designs 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. Position the insertion point to the right of the heading and then drag the basket01 image to the insertion point. Enter the Alt text, and then apply the settings shown in Table 2-5 to resize and align the image.
5. Position the insertion point to the left of the paragraph that begins “If extra income is your goal”, and then drag the basket02 image to the insertion point. Apply the settings shown in Table 2-5.
6. Position the insertion point to the right of the last sentence and then press the enter key.
7. Type the following text: Company History. Select the Company History text and use the drag-and-drop method to create a link to the history page. Select your name. Use the Insert menu to create an e-mail link using your e-mail address. Save the index page.
8. Open the history page. Open the Page Properties dialog box, and then add the background image (baskets_bkg) to the history page.
9. Position the insertion point at the end of subhead, Company History, and then drag the basket03 image to the insertion point. Apply the settings shown in Table 2-5.
10. Position the insertion point at the end of the Company History subhead again. Drag the basket04 image to the insertion point. Apply the settings shown in Table 2-5.
11. Select Home and then create a relative link to the index page. Save the history page.
12. Check the spelling of your document and correct any errors.
13. Save the file.
14. 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.
In the Lab
Lab 3: Modifying the Credit Protection Web Site
Problem: Jessica Minnick has received favorable comments about the Web page and site you created on credit information. Her bank wants to use the Web site to provide additional information to its customers. Jessica has asked you and another intern at the bank to work with her to create two more Web pages to add to the site. They want one of the pages to discuss credit protection and the other page to contain information about identity theft.
Revise the Credit Protection Web site. The revised pages for the Web site are shown in Figures 2-79a, 2-79b, and 2-79c. Table 2-6 on the next page includes the settings and Alt text for the images. Software and hardware settings determine how a Web page displays in a browser. Your Web pages may be displayed differently in your browser from those in the figures.
Figure 2-79
Table 2-6 Image Property Settings for the Credit Protection Web Site
|
Image Name |
W |
H |
V Space |
H Space |
Align |
Alt |
|
money |
211 |
107 |
none |
20 |
absolute middle |
Money |
|
protection |
240 |
170 |
14 |
20 |
left |
Identity theft |
|
question |
150 |
300 |
none |
none |
right |
Questions? |
|
theft |
188 |
193 |
none |
100 |
right |
Protect personal information |
Perform the following tasks:
1. Copy the questions and theft data files from the Chapter02\credit data files folder into the root folder for your Credit Protection local Web site. (For example, the root folder might be stored on H:\edwardsd\credit.) Copy the image data files from the Chapter02\credit\images data files folder into the images folder for your Credit Protection local Web site. (For example, the images folder might be stored on H:\edwardsd\credit\images.)
2. Start Dreamweaver and display the panel groups. Open the Credit Protection site, and then open index.htm.
3. If necessary, display the Property inspector and the Standard toolbar. Expand the Property inspector.
4. Position the insertion point to the right of the heading and then drag the money image to the insertion point. Apply the settings shown in Table 2-6.
5. Select the text financial tool, located in the first sentence of the first paragraph. Create a relative link from the selected text to the questions page. Select the text Fair and Accurate Credit Transactions (FACT), located in the second sentence of the third paragraph. Create an absolute link to http://www.annualcreditreport.com. Select the name of the company in the first bulleted list item (Equifax Credit Information Services, Inc.) and create an absolute link using http://www .equifax.com. Create absolute links from the other two company names, using http://www.experian .com and http://www.transunion.com, respectively.
6. Position the insertion point at the end of the second paragraph (after the word fix). Press the SPACEBAR. Type the following text: Credit card and identity theft can be a major issue when applying for credit. Select the text you just typed and then create a relative link to the theft page. Add an e-mail link to your name. Save the index page (Figure 2-79a on the previous page). Position the insertion point at the end of the second line in the second bulleted point, and then drag the theft image to the insertion point. Apply the settings shown in Table 2-6.
7. Open the theft page and apply the background image (credit_bkg) to the page.
8. Position the insertion point to the left of the second line and then drag the protection image to the insertion point. Apply the settings shown in Table 2-6.
9. Drag to select the text Identity theft at the beginning of the first sentence, and then create an absolute link using http://www.consumer.gov/idtheft as the URL. Create an absolute link from the protection image using the same URL. Select the image and then type the URL in the Link box. Select Home and then create a relative link to the index.htm page. Save the theft page (Figure 2-79b).
10. Open the questions page. Apply the background image that you added to the theft page in Step 7. Use the text, Home, at the bottom of the page to create a relative link to the index page.
11. Position the insertion point to the right of question 3, What is the Fair Credit Billing Act? Drag the question image to the insertion point. Apply the settings in Table 2-6.
12. Create an absolute link from the Fair Credit Billing Act text in the answer to question 3. In this link, use the following as the URL: http://www.ftc.gov/bcp/edu/pubs/consumer/credit/cre16.shtm. Save the questions page (Figure 2-79c).
13. View the Web site in your browser and verify that your external and relative links work. Hint: Remember to check the link for the image on the theft.htm page. Submit the documents in the format specified by your instructor.
Cases and Places
Apply your creative thinking and problem solving skills to design and implement a solution.
• Easier
•More Difficult
• 1: Modify the Favorite Sports Web Site
Now, you want to add another page to the site. Create and format the new page, which should include general information about a selected sport. Create a relative link from the home page to the new page and from the new page to the home page. Add a background image to the new page and insert an image on one of the pages. Include an appropriate title for the page. Save the page in the sports subfolder. For a selection of images and backgrounds, visit the Dreamweaver CS5 Media Web page (scsite.com/dwcs5/media).
• 2: Modify the Hobbies Web Site
They have given you some topics they think you should include on the site. You decide to create an additional page that will consist of details about your hobby and the topics your friends suggested. Format the page. Add an absolute link to a related Web site and a relative link from the home page to the new page and from the new page to the home page. Add a background image to the new page. Create an e-mail link on the index page. Title the page with the name of the selected hobby. Save the page in the hobby subfolder. For a selection of images and backgrounds, visit the Dreamweaver CS5 Media Web page (scsite.com/dwcs5/media).
• 3: Modify the Politics Web Site
Develop two additional pages to add to the site. Apply a background image to the new pages. Apply appropriate formatting to the two new pages. Scan a picture of yourself or take a picture with a digital camera and include the picture on the index page. Add a second image illustrating one of your campaign promises. Include at least two images on one of the new pages and one image on the other new page. Add alternate text for all images, and then add appropriate H Space and V Space property features to position the images. Create e-mail links on all three pages and create relative links from the home page to both pages and from each of the pages to the home page. Create an absolute link to a related site on one of the pages. Give each page a meaningful title and then save the pages in the government subfolder. For a selection of images and backgrounds, visit the Dreamweaver CS5 Media Web page (scsite.com/dwcs5/media).
• 4: Modify the Favorite Music Web Site Make It Personal
Format the page. Discuss your favorite artist or band on the new page. Add a background image to the new page. On the index page, add an image and align the image to the right, and on the new page, add a different image and align the image to the left. Add appropriate alternate text for each image. Position each image appropriately on the page by using the H Space and V Space property features. Add an e-mail link on the index page, and add text and a relative link from the new page to the index page. View your Web pages in your browser. Give the page a meaningful title and then save the page in your music subfolder. For a selection of images and backgrounds, visit the Dreamweaver CS5 Media Web page (scsite.com/dwcs5/media).
• 5: Create the Student Trips Web Site Working Together
Everyone loves it. The dean is so impressed that she asks the group to continue with the project. Your team creates and formats three additional Web pages, one for each of three possible locations for the trip. Add a background image to all new pages. Add two images to each of the pages, including the index page. Resize one of the images. Add the Alt text for each image, and then position each image appropriately using the H Space and V Space property features. Create a link from the index page to each of the three new pages and a link from each page to the index page. Create an absolute link to a related informational Web site on each of the three new pages. Add an appropriate title to each page. Preview in a browser to verify the links. Save the pages in your trips subfolder. For a selection of images and backgrounds, visit the Dreamweaver CS5 Media Web page (scsite.com/dwcs5/media).
