HTML Review - Photo/Collage Lesson


In this lesson you have created rollover effects for the campus and optional clients. The requirements are that you include a standard rollover, and a remote rollover. You can decide if this effect will be on the opening screen or second level pages for each client. In the CD examples I have added a standard rollover for the campus home page, and a remote rollover for the opening screen of the optional client. My samples reflect code for these choices. If you decide to create a standard rollover on the second level of the optional client, and a remote rollover on the opening screen of the campus site, that is fine. Just adjust your code accordingly.

In this lesson you will be asked to use ImageReady to slice each rollover example, generate HTML code, and a new "images" directory. Save your HTML file and images in the "campus-final" or "optional-final" directories.

In addition, this lesson also asks you to create 2 samples of rollovers which are not used in either of your client sites. Remember you do not need to include the rollover code to make these samples work, you simply need to flatten images which display what the rollover state looks like. These images and the Web page that displays them should be stored in the "templates" directory.

I have included code samples below which you can add to your "homework.html".


Lessons #4 & 5 Rollovers and Remote Rollovers <br />

<A href="campus-final/index.html" > standard rollover - campus opening screen </A > <br />

<A href="optional-final/index.html"> remote rollover at optional opening screen </A>

<A href="templates/roll-ex.html"> 2 rollover examples </A>
</BODY>
</HTML>

After creating the homework file you need to use FTP software to load the HTML files and "images" folders created by ImageReady onto gracie. The "index.html" file and images for the campus client will be placed in the "campus-final" directory. The similar files for the optional client will be placed in the "optional-final" directory.

Here is a review of how your gracie account will look at the end of the 5th lesson. The items surrounded by red are the new files.



Special Note - you can simply flatten the rollover images and place them on a Web page. They do not need to be working rollovers. The CD examples and homework examples at the Web site are above and beyond what you are required to do.

If you are a beginner, who is struggling with the concepts, try doing the first 2 examples (changing button color and changing text). Advanced students can try a remote rollover or persistent remote rollover as an example.