\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 6

CS-081 Assignment 6

Introduction

This is the first step in developing a model of a full-blown web site with multiple web pages and a common set of navigation links across the various parts of the site. In this step, you are to set up the site’s structure on disk and to fill in dummy content for two site sections: a Blog and an ePortfolio.

Lab Activities.

  1. Site preparation:

    Use Dreamweaver to create two new directories for your site, named Blog and ePortfolio. Drag your current index.xhtml file from the root of your site into the ePortfolio directory, making sure you click “Update” when Dreamweaver asks whether to update links. Rename this file to term_paper.xhtml. Your term paper would be just one element in your ePortfolio, so we will be setting up a separate index file in the ePortfolio directory that (eventually) will have links to the term paper as well as all the other items you decide to add to your ePortfolio.

    As demonstrated in class on November 9, make a copy of template.xhtml, and rename the copy as index.xhtml. Remove the unneeded set of comments from the PHP code at the beginning of the file and the other set of comments that are before the paragraph with the validation links.

    At this point, we will be a little more efficient than I was during class:

    1. Create a new stylesheet for this assignment, named assignment_06.css, in your css directory. You can leave the stylesheet blank for now.
    2. Add a link to this stylesheet in the head of your new index.xhtml file. Be sure to include the rel and type attributes in addition to the href attribute in the link link.
    3. Add the list of navigation links to the new index page:
      <ul id="nav-list> <li class="current-page"> <a href=".">Home</a> </li> <li> <a href="Blog">My Blog</a> </li> <li> <a href="ePortfolio">My ePortfolio</a> </li> </ul>
    4. Now, instead of duplicating template.xhtml to create the index pages, for Blog and ePortfolio, duplicate your index.xhtml page and move that copy into the Blog directory. Again, be sure to let Dreamweaver update the links for you. Once the copy is in the Blog directory, rename it to index.xhtml.
    5. Duplicate index.xhtml again, and move this copy into the ePortfolio directory and, once it is there, rename that copy to index.xhtml.
    6. What you have now is three directories containing files named index.xhtml: My Website, Blog, and ePortfolio. Because you let Dreamweaver update the links for you, the links in the nav-list all point to the proper directories, which you will check out in the next step of the assignment
  2. Update the three index file and check that the links all work correctly.

    Right now, the three index files all have the same content. Edit each one to change its title and h1 to something appropriate. I’m sure you can do something better than “Welcome to my home page!”, “Welcome to my blog!”, and “Welcome to my ePortfolio!”. But if not, those three are okay.

    Now load the home page in Firefox, and observe the three links. Check them out. You should be able to navigate from any page to any other by clicking on the appropriate link. Since each index page has different content for its h1, you can verify that the links are working by reading the heading that shows up for each link.

  3. Verify that all three index files link to the stylesheet properly.

    Th check that the stylesheet is set up properly, you need to put some rules in it. For now, set up rule that selects the html and body elements, and set the background-color to something other than black (you already used that for your term paper; it’s time to be creative) or white (that’s the default, and you want to see that the stylesheet is actually doing something to the three index pages.

    Now, as you click the links to the various web pages in your site, they should all be displayed with the same background color—whatever color you set up in the stylesheet. You might need to force each page to do a complete reload (Ctrl-Shift-R instead of just Ctrl-R) to force the browser to use your updated stylesheet.

Submit The Assignment

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 6 as the subject line. Make it look just like that to avoid my spam filters. Send the email to: vickeryatbabbage.cs.qc.cuny.edu.