Graphics Programs Reference
4. Save the pages, preview the pages in a browser, testing the rollover link to the home
page, and then close the browser and the pages.
5. Open the team.html page, and then delete the “check back soon, more is on the
way. . .” text.
6. Insert a table that contains 2 rows, 4 columns, 100% table width, 0 border thickness,
5 cell padding, 0 cell spacing, no header, and no accessibility text.
7. In the top row of the table, one in each cell, insert the following four team mem-
ber images located in the Tutorial.05\Case1 folder, with alt text Member Name
Moebius team member (replacing Member Name with the name from the corre-
sponding image): asher_feehan.jpg , corey_williams.jpg , dustin_gonzalez.jpg , and
paris_milan.jpg . After inserting an image, drag the right border of the cell to the left
until it is snug against the image.
8. In the bottom row of the table, below each image, type the appropriate team mem-
ber name, and then format the names with the h3 tag.
9. Select the top row of the table, and then set the horizontal alignment to Left and the
vertical alignment to Top.
10. Select the bottom row of the table, and then set the horizontal alignment to Center
and the vertical alignment to Top.
11. Create a Tag style for the h3 tag that is defi ned in the moebius.css style sheet, and
then, in the Type category, change the color to #919F3D.
12. Save the page, preview the page in a browser, and then close the browser and
13. Upload the site to your remote server, and then preview the pages over the Internet,
checking the links and new content.
14. Submit the fi nished fi les to your instructor.
Case Problem 2
Add a logo image
with a hotspot
and a table with
of the artwork
of Charles M.
Data Files needed for this Case Problem: art.docx, bucker.jpg, cc_head.jpg, cc_head.psd,
cowpunching.jpg, grubpile.jpg, utica.jpg
Cowboy Art Society Moni wants you to add heading graphics that contain the site logo
at the top of the pages in the Cowboy Charlie site. You will create a hotspot over the
logo that links to the home page. You will also create a table in the artwork.html page
in which you will add images of Charlie's artwork along with painting information and
1. Open the Cowboy Charlie site you modifi ed in Tutorial 4, and then open the
index.html page in Design view.
2. In the CSS Styles panel, edit the .header style. In the Box category, set the right and
left padding to 0, and in the Positioning category, set overfl ow to hidden.
3. Delete the logo text in the Document window, and then insert the cc_head.psd
image located in the Tutorial.05\Case2 folder included with your Data Files as a
Smart Object, save the compressed image in the JPEG format at 70 quality, and save
a copy in the graphics folder. (If you do not have Photoshop, insert the cc_head.jpg
image into the page.) Do not add Alternate text, you will add it to the hotspot.
The logo is inserted at the top of the page and the navigation text shifts down. The
image is larger than the page area, but because the div style is set to hide anything
that fl ows over the area of the div, it will not display this way in the browser window.
(If the image is not fl ush against the left border of the div, you need to select the
h1 tag and change the formatting to none. This will remove the extra space.)
4. Click Live View to ensure that the image will not be visible outside of the div area,
then click it again to go back to your regular view.