CS-081 Assignment 6

For this assigment you are to apply different colors and background images to the various elements of your blog site.

First, be sure your site is set up properly. Your web page for Assignment 5 will be the content page for this assignment. It should be named index.xhtml, and it should be in your My Website directory (not in a subdirectory). There should already be a subdirectory named css containing a stylesheet named typography.css in it. Now create a second stylesheet there, and name it backgrounds.css. Add a link to it in the head of your index.xhtml code. The code for this assignment will all go in this new stylesheet.

If your blog page does not have at least two lists, update the content now so that it does. One list must contain links to other parts of the web site, such as Home, About, Contact, etc. (even though those other parts don’t exist). The other list can be anything, such as blog entries or links to related sites.

The formal requirement for this assignment is simply to apply different backgrounds to all the elements of your blog site. The goal is for you to experiment with background colors and background images. You might well decide to change the colors and images you use in the future assignments, when you will be working with different layout options for your site. For now, exploring the various CSS properties that control the backgrounds of your page’s CSS boxes: headings and lists in particular.

For this assignment, the background colors of the entire page, each heading level, and all lists must be different.

In addition, you are to create a background image for the level-1 heading on the page. You may use Fireworks to build the image as demonstrated in class, or another program of your choice if you have one available. Your image must be in the PNG format, and it must include a gradient that goes from a color to transparent; the background color of your h1 must show through the transparent part of the image. Your image may optionally include a texture, and you are certainly free to add background images to other page elements in addition to the h1 tag.

Test, Verify, and Validate

You must carefully test, verify and validate your assignments before submitting them. Although I am listing this information at the end of this assignment’s web page, these are actually activities that you should be performing regularly as you add code to your site. Write a little code, and test to be sure it does what you expect. Then write a little more and test that. The hardest part of debugging code is finding the errors. But if you test your site every time you add a little code, it’s much easier to find any errors: they are in the little bit of code that you just added!

Watch the green circle in the status line provided by HTML Tidy; any time it changes to a yellow triangle or a red X, there is a problem that you need to fix before continuing.

Test

Testing consists of looking at the web page in a browser to be sure the effects you have added to the page actually are working. If a heading is to have a particular font-family and size, does it? Because the browser does not issue error messages for errors in your CSS code, you have to look at the page to be sure it is doing what you expect. If you see a problem, you have to figure out how to fix it! Note that for CSS errors, the CSS Validator can help you figure out what is wrong.

Another test you need to perform is to try your web page using different browsers to make sure no browser compatability problems have crept into your code. This kind of problem is not likely to show up in the projects for this course, but it is good to check anyway. Simply look at your web site using Internet Explorer, Opera, and Safari to be sure it looks “about the same” in each one.

Verify

You need to do an explicit check to be sure all the links in your web pages are correct, because Windows will let you use mis-matched file and directory names in your links that won’t show up until your code is copied to a Unix/Macintosh computer for testing. Dreamweaver will check the link tags in the head of your page, as well as the a and img tags in the body of the page, provided they refer to files within your web site. It won’t check links to things on other web sites.

When you set up your site, you should have checked the “Use case-sensitive link checking” in the Local Information panel for the site. If not, select the Site->Manage Sites… menu item, and edit your site definition so this option is checked.

To check links, right-click on the top line of the Files panel where it says, “Site - …” and select “Check Links.” Pick the option to check the entire site. A new panel will show up with a list of all the broken links in your site, if there are any. (Select “Broken Links” from the Show: option box.) There will be a line for each broken link you need to fix. The folder icon next to the lines will open up a file browser so you can simply point to the correct file.

There is another link check you need to perform. All the links to stylesheets and images should be given as relative pathnames. In simple terms, this means they must not begin with a / character. If your links do not use relative pathnames, they will fail to work when your code is copied to another place on the disk (or to another computer’s disk). For this, you will need to set up a remote sever for your site, have Dreamweaver copy your site to the remote server, and test it there. The procedure is documented in the Dreamweaver Setup web page.

Validate

If you have been watching the HTML Tidy icon in your status bar, your code will already pass the XHTML validation check automatically, but you can click the link at the bottom of the page to be sure. You should get a page with a nice big green bar offering you congratulations for having no warnings or errors on your page. Do the same with the CSS link at the bottom of the page and make sure there are absolutely no errors or warnings there. Fix any problems that show up.

Save and Submit

When you have tested, verified, and validated your code, be sure log out so your code will be saved to the server, and send me an email message saying your assignment is ready. I will copy it from the server to the Unix computer in my office (babbage), and will check it out from there.

My email address is:

Christopher.VickeryATqc.cuny.edu

The Subject Line of your email must say CS-081 Assignment 6, exactly like that, in order to avoid my spam filters.

Always include CS-081 in the subject line of your email messages to me, even if you are not submitting an assignment, because of the spam filters.

Be sure to sign your email so I know who sent it!