CS-081 Assignment 5

Finally, a chance to work on the appearance of your blog site! This time you are to make sure you know how to set up a stylesheet and link it to your web page.

First, be sure your site is set up properly. Your web page for Assignment 4 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). Rename it if necessary.

Create a subdirectory under My Website named css. Be careful how you name this directory: I will be testing your site on a machine with case-sensitive file and directory names, even though you will be developing your site on a Windows computers, where file and directory names are case-insensitive. I suggest making this directory name lowercase (it’s a common convention), but that is not a requirement, so long as all the links in your code use the same case as you used in naming the directory. The same thing goes for the images subdirectory you should already have set up: the links in your code must use the same case as the actual directory names. You will be checking this aspect of your code before submitting the assignment.

Create a stylesheet for this project named typography.css in your new css directory. Add a link to the head section of your web page. After the title tag is the usual place to put it. Be sure it has the required type attribute set to the value "text/css", the rel attribute with the value "stylesheet", and a href attribute set to the value "css/typography.css". Remember, Dreamweaver will create this tag for you if you drag the stylesheet file into the code for your web page, but it will not close the tag for you; you have to add the / before the > at the end of the tag yourself.

For this assignment you are to modify only the typographic features of the text items in your web page. You are to set up CSS rules for all headings and paragraphs, specifying the font-family and font-size for each of the p, h1, h2, … tag names that contain text in your page. Anchors (a tags) are different from other text containers, and will be covered separately. Do not set up any style rules for them in this assignment.

You do not need to add any class or id attributes to any of the elements in your web page for this assignment. That means that all the selectors for your CSS rules have to be based just on tag names.

I encourage you to experiment with additional typographic properties besides font-family and font-size. But be sure to limit yourself to only the following typographic properties for this assigment: font-family, font-size, font-weight, font-style, font-variant, letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, and word-spacing.

All of these typographic properties and their associated values are “fair game” for the upcoming midterm exam.

Test, Verify, and Validate

From this assignment forward, 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 HTL 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 5, 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!