Part 1

Save your Color and Black and White photos from our class Web site, and/or get your own photos from another place.
Henderson, Nevada Save the photos to your USB drive under a folder named images, the photos should be about 150 x 200 pixels. Create a rollover Image using the photos of yourself (B&W vs Color) from these photos. Make a simple xhtml file that has this rollover photo, with size of about 75 pixels wide, as the return link to your index page.

First Script for the rollover.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Your Name CCSN CIT-151 XHTML-CSS Assignment 3  assign3.html</title>

<script type="text/javascript">
      <!-- 
      var preloadFlag = false;
      function preloadImages() 
      {if (document.images) {
      myphoto = new Image();
//photo-b.jpg= black-white photo and photo-c.jpg=color photo
//you must add each rollover image here that is to be preloaded  
//the images can all have the same variable name.
      myphoto.src = "images/photo-c.jpg";
      preloadFlag = true;	}}
      // End of the preload script
       -->
</script>
<link type="text/css" rel="stylesheet" href="rollover.css" />
</head>

<body onload="preloadImages();">
<!-- Add other body Styles in the CSS Document as needed -->

<div id="top-container">

 <div id="top-left">
   <a href="index.html"><img src="images/photo-b.jpg" 
onmouseover="src='images/photo-c.jpg';style.border='inset 4px yellow';" 
onmouseout="src='images/photo-b.jpg';style.border='outset 4px yellow';" 
alt="CIT 151 Home" /></a>
 </div>
   <div id="top-right">
      <a href="http://validator.w3.org/check?uri=referer">
      <img src="images/xhtml10.gif" alt="Valid XHTML 1.0!"/></a>
   </div>
   
   <h1>CIT-151 CSS-XHTML</h1>
   <h2>Assignment 3</h2>
      
</div><!-- end of top container -->

Your program goes here

<!-- Beginning of footer -->
<hr />
<p id="footer">&copy; 2003, 2004, 2005 & 2006 by Charles Muench. All rights reserved.</p>
<!-- End of footer -->
</body>
</html>

Second Script for the rollover.css

/* Body Attributes */
body {color:#000000;background-color:#ffffcc; margin:3px 4%;font-family:"Times New Roman", Times, serif;}

/* Top Title Bar */
#top-container{height:110px;text-align: center;}

/* top-left within the top-container */
#top-left{float: left;width:85px;}
#top-left img{margin:4px 0px 0px 4px;border:outset 4px yellow;width:75;height:100px;}

/* top-right within the top-container */
#top-right{float:right;width:75px;}
#top-right img{margin:35px 4px 0px 0px;border-width:0px;height:27px;}

/* top-container HTML tags characteristic*/	
#top-container h1{ font-size:35px;color:#cc0000;background-color:inherit;margin:0px;}
#top-container h2{ font-size:25px;color:#0000ff;background-color:inherit;margin:0px;}

#footer {clear:both;color:#883300;background-color:inherit; text-align: center; font-size:2.5mm;line-height:3.3mm;border:0px solid #ff0000;}
hr{width:70%;background-color:#cc0000;color:#cc0000;}

Save both of these files as rollover.html and rollover.css respectively. Now resave these files as assign3.html and assign3.css respectively. Take these files and finish Assignment 3 as described in part 2 below.

Part 2

Save at least five graphics logos to your disk, the logos from Macromedia, Adobe, Microsoft and at least two others. Make an html file that uses the rollover.html file as a base and label it assign3.html.
Cusco, Peru It is to display the five logos and make them active link to each of the logo's home pages. All of the links must work. See sample 3 for an example of the required assignment.

The background should be an texture using the body css style from rollover.css. Use background-image: url(images/yourimage.gif); for the style in the body style. It is very important that the background image be a small file size. The back ground can be copied from any web site that has a background that you like. Or the background texture can be found from a texture website such as http://www3.baylor.edu/textures/ or http://freespace.virgin.net/r.cawley/image1.html. It is important to be able to read all the data presented on the page easily, so choose the background vs text appropriately. That is - with a lot of contrast.

  1. You are required to have the photo rollover button link from assignment 3 to return to your index page.
  2. After modifying your index page to include the Link to assignment 3, upload it to your web site.
  3. Upload assignment 3 file along with the all of the graphics and style sheets to your web space.
  4. After uploading your page checks its size using Calculate page size under the resourse links. It must be less than 30 kilobytes total. 1 point will be substracted for every kilobyte over 30.
  5. After uploading your page checks that it is XHTML Strict Valid using your XHTML page link.

Note: It is standard procedure to save all images in a sub directory of your site (a sub-directory of httpdocs) called images. You need to refer to these images with the proper references in your html page.