This assignment completes your basic web site design. The features to implement are: a horizontal layout of the navigation list; use images for the navigation list items; improve the layouts of the blog and ePortfolio pages; optionally use image sprites in the navigation list.
There are two ways to do this: change the display property of the list items to inline, or to float them to the left. The problem with the first method is that CSS does not let you set the width of inline elements, so you would not be able to make the links all the same size.
Do not worry about getting the margins and padding exactly right for the navigation list, its list items, and the a elements yet. (See the next step.) But do decide how wide you want the list items to be now. Since you will be using an image file for their backgrounds, it makes sense to specify the width in pixels, since that is what you will be dealing with in Photoshop.
Read the description of the optional step at the end before doing this step. If decide to do that optional step, modify the following instructions accordingly.
Use Photoshop to create an image file with the same width as the a elements in the navigation list. Create the image with a transparent background. The height is not critical, but make sure it is taller than the text that goes inside the navigation list items.
Be sure the Layers “palette” is visible. You can turn it on or off using the Window menu or by pressing F7.
Select the rounded rectangle tool. It shares a toolbar position with the plain rectangle tool, the ellipse tool, the line tool, the polygon tool, and the custom shape tool, so it may take some work to get at it: click and hold on any one of those tool icons until the list of all the alternatives shows up, then select the one you want.
Pick a foreground color for one of the three types of navigation tabs you will be using: current page; other page; other page with hover.
Be sure the “fill pixels” tool is selected in the options menu, and draw your rounded rectangle, starting in one of the top corners of the image, and continuing down below the bottom of the image so that you get a shape with rounded corners on the top and square corners at the bottom.
Add a layer style to the image: you can do this from the Layers menu, or you can click on the fx icon at the bottom of the layers palette, or you can just double-click on the far right side of the layer in the layers palette. You can experiment with any combination of inner shadow, inner glow, and/or bevel and emboss. You can try others too, but note that drop shadow and outer glow won’t work because your shape fills the image, and those two go outside the shape. Note also that inner glow only shows up on dark colors and inner shadow only shows up on light colors. But you can change the color and/or the “blend mode” of the shadow or glow to make it show up against any color.
Save your image file as a PNG-8 image file to preserve the transparency of the corners. Use a meaningful name so you will remember which of the three types of links it will be used for.
Repeat everything above for the other two image files, and use these three image files as the backgrounds for the different items in the navigation list. Adjust margins and paddings to get the navigation list to “sit on top” of each page’s contents.
Adjust the margins, paddings, and borders for all three web pages so that they are clear and align properly with the navigation list that rests on top of their contents.
Make the footer containing the links to the XHTML and CSS validators appear at the very bottom of the web pages (position:fixed). Make sure the links can be seen, and that they are centered in the middle of the bottom of the page. Be sure the user can see the bottom of the content of each page when scrolling: you will need to add either padding or a margin to the bottom of the content div to accomplish this.
Rather than create three separate image files for the three types of navigation links, you can save some effort and improve the download speed of your web page by using “CSS image sprites.” The idea is to create a single file with all three images in it, stacked either vertically or horizontally. If your image size is 250×50, for example, you would start with an image file that is 250×150 or 750×50.
The first key to making this work is to create guidelines to divide the image file into the three parts that you want, and the second key will be to create the three images on separate layers so that the layer style effects can be applied to each sub-image separately.
Draw guidelines as demonstrated in class: be sure the rulers are showing around the edge of the workspace (Control-R turns them on and off), and just drag out from inside a ruler to create a guideline. Line it up with the proper pixel dimensions shown in the rulers. Use the View menu to turn on the “Snap to … Guides” option. This will help you to draw the images more accurately.
Add two layers to the document so there is a total of three. You can use the top item in the Layers menu to do this. In the Layers palette, click on each layer’s name and change it to something more meaningful than “Layer 1,” etc. (This step is not critical for this project, but becomes very important on larger ones.)
Now select one foreground color, and draw the rounded rectangle (with square bottoms) for it. Select another foreground color, click on another layer to select it, and draw a second rounded rectangle, and repeat the process for the third layer. Add layer styles to any one of the three images. You can then speed things up by copying the layer style from one layer to the other two. You can do this from the Layer menu by selecting copy and paste from the Layer Style sub-menu. Or you can just drag the layer style from one layer to another in the layers palette while holding down the Alt key.
Once you have all three sub-images with their layer styles looking the way you want them, save the entire image file. Be sure to use PNG-8 to create a small file while preserving transparency.
Now use this one image file as the background image for all the a elements in the navigation list. But adjust the background position depending on the which image is actually to be displayed.
Once you have set up your web site and tested that both the XHTML and CSS links at the bottom of the page give you no warnings and no errors, log out of your account so your site will be copied to the server. I will copy your site from the server to the computer in my office (babbage) to check it out.
Remember: even if your site validates perfectly, you still have to make sure that all the CSS rules actually work as you intended. Testing your web page and fixing any unexpected appearances is a critical component of all the assignments for this course.
When you finish your assignment, send me an email message telling me that it is ready. Use CS-081 Assignment 8 as the subject line. Make it look just like that to avoid my spam filters. Send the email to: vickeryatbabbage.cs.qc.cuny.edu.