Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 317

3. In the Tools panel, click the Rectangular Marquee Tool button , select Fixed Size
from the Style list at the top of the document window, enter 750 in the Width box,
and then enter 200 in the Height box.
4. In the Layers panel, select the head4 layer, place the pointer at the upper-left corner
of the image, and then click the left mouse button. The rectangular marquee sur-
rounds the entire image.
5. Copy the image in Photoshop, and then, in Dreamweaver, paste the image inside the
header div at the upper-left corner of the home page.
6. Select JPEG as the format and enter 80 as the quality, and then save a copy of the
image to the graphics folder in the local root folder. Do not add alt text because the
image is purely decorative.
7. Delete the logo div from the page, and then save and close the page.
8. Repeat Steps 3 through 7 to insert the head3 layer into the about_tess.html and
coaching.html pages, saving the image as tess_head2.jpg in the graphics folder, and
to insert head2 layer into the contact.html and specials.html pages, saving the image
as tess_head3.jpg in the graphics folder. ( Hint : In the Layers panel, click the layer to
select it.)
9. In the index.html page, draw a new AP div at the upper right of the page.
10. Select the AP div, switch to Code view, drag the new div directly after the opening
<div id=header”> tag so that it is embedded in the header div, and then return to
Design view.
11. Click in the new AP div, insert a rollover named logo_roll , use tess_logo.png as the
original image, use tess_logo_over.png as the rollover image, enter Success with Tess
logo and link to the home page. as the alt text, and then link to the URL index.html.
12. Select the AP div, set the left to 650px, set the top to 2px, set the width to 210px,
and set the height to 125px. (The logo may appear to move too far to the right, don't
worry, it will display correctly in the browser because the page is centered in the
screen.)
13. Select the <div#apDiv1> tag in the status bar, copy the code, open the about_tess.
html page, click inside the header div (if the image is selected, press the Left arrow
key to move the insertion point before the image), paste the apDiv1 div, and then
save and close the page. Repeat this process to paste the new div into the rest of the
pages in the site.
14. In the CSS Styles panel, select the #header style, change the height to 200px, and
then save the style sheet.
15. Save the page, and then preview the site in a browser. (If the logo is displayed out-
side of the page, it is because your screen is not optimized to display at 1024 x 768.
It is important to remember that one of the problems with using AP divs is that they
are located in a fi xed position and the location is not liquid.)
16. Upload the site to your remote server, and then preview the pages over the Internet.
17. Submit the fi nished fi les to your instructor.