CS-081 Assignment 3
Spring 2009

This assignment builds on the previous one, so if you have not completed Assignmnent 2 yet, do so now even though it is too late to receive full credit for it.

For this assignment you are to set up your course web site with a home page for the site, and a blog within the site. For now, the home page and the blog index page will have very little content: just titles and links to each other.

You will also set up your web site as a Dreamweaver site if you have not already done so.

• Using Dreamweaver

  Instructiions for setting up a Dreamweaver site.

• Chapter 2 of the textbook

  Information on using text-related tags and style rules.

• Chapter 3 of the textbook

  Information on using links.

• Class notes from February 19

  Information on different types of links, including stylesheets and anchors. Get a copy of someone’s notes if you missed class.

If you have not done so already, create the following three directories under My Website. You could do this using Dreamweaver, but it is all right to to use Windows Explorer. You should already have template.xhtml and a copy of that file, named index.xhtml, in your My Website directory from your work on Assignment 2.

1. images

   This directory will eventually hold various image files (pictures, backgrounds, etc.) that you will add to your web pages. For now, it will be empty.

2. css

   This directory will hold the stylesheets for all the pages of your website. You will add one stylesheet to it for this assignment.

3. Blog

   Unlike the previous two, which are “housekeeping” directories, this one will be for content: the blog part of your web site. Like the other two directories, capitalization for this one matters: links to directories must use the same case for directory names as the actual names of the directories that you create. Unfortunately, your pages can work fine on the Windows computers in the lab if you mis-match cases in links compared to directory/file names on disk, but it will matter when I check your site on the computer in my office. See the “Using Dreamweaver” web page cited above for details.

1. Set up a Dreamweaver site for your course web site.

   The “Using Dreamweaver” page gives instructions for doing this step. You need to supply only the Local Information for the site for this assignment.

2. Create an index page for your blog.

   Duplicate template.xhtml (select it in the Files panel on the right side of Dreamweaver, and type Control-D.) Move the copy into the Blog directory, and then rename it to index.xhtml, as demonstrated in class. Change the title and h1 elements of this new index page to something like, “My Blog”.

   Optional (but much more fun): Pick a theme for your blog, and give it a name to match the theme. “My Race-Car Passion,” “All About Flowers,” “How To Get Rich,” whatever you like. Later in the course, as you customize the appearance of your blog, you can try your hand at matching the “look” of your blog to its theme. If you like, you can also change the name of the directory from Blog to something that will be more meaningful in a URL, like RCP, Flower_Blog, etc. Remember that the name must not contain spaces or punctuation marks, though.

3. Set up navigaton links

   Both your main index page and your blog index page already have two a tags inside a paragraph at the end of the document body. These are links to validation sites that will examine your web page and produce reports telling you whether your XHTML and CSS code files meet the formal specifications for those two languages. There are Firefox add-ons that will tell you most of the same information, but these links will work no matter what browser you are using.

   For this step, add a third a to the same paragraph that already contains the two validation links. In the main page, make the link target be your blog, and in the blog index, make the link target be your home page. The content of the link on the main page could be, “Check out my blog!” or anything else you think would be appropriate. The content of the link in the blog index page could be as simple as the word, “Home”.

   Try to avoid using the words “click” and/or “here” in the content part of links: users should be able to tell what a link will do just by looking at it.

   View your web site in a browser. Be sure main page displays properly and that clicking on the new link takes you to the blog index page. Make sure that one displays propery and that clicking on its new link takes you back to your site’s home page. Fix any mistakes before proceeding.

4. Add a stylesheet to your site.

   In Dreamweaver, right-click on your site’s css directory in the Files panel, and select “New File” from the drop-down menu. (This is called a “context” menu because the menu changes depending on what you right click on, i.e., the context of the click.) Click twice on the new file’s name (not so fast as to double-click and open it up for editing yet), and change the name from untitled.xhtml to main.css. Now double-click on the file name to open it in Dreamweaver’s editing panel.

   Add the following CSS rule to your stylesheet:

   h1 { background-color: blue; color: white; }

   Feel free to experiment with different colors. Save the file, and add link elements to the heads of both your index pages as demonstrated in class for linking stylesheets to web pages. Have both index pages link to the same main.css file. See page 34 of the textbook if you don’t know how to do this.

   Refresh the browser’s view of your home page (type Control-R in Firefox, or click the reload button in the toolbar at the top of the browser), and verify that the heading now looks different (white text on a blue background if you used exactly the rule given above.) If it does not, you have to figure out what went wrong and fix it. Looking at the report generated by the CSS validator (click the CSS link at the bottom of your web page) will often help a lot in this figuring-out process.

   Once the home page looks right, click the link to your blog, and make sure that the heading on that page has changed appearance too.