Friday, November 2, 2007

Today we worked a lab that I hope will help to tie a lot of things together.

Lab

Use the tools we have to refactor (change and improve) your personal Web site on cs.wofford.int and to give it a new presentation. Work through the steps below.

Setup: SFTP the root folder and its contents to your lab computer. Add the folder on your computer to Nvu's site manager.

  1. Create a style sheet that all pages on your site will use for layout and other style features. The layout will be the one you prepared for today—that is, a two-column layout with a header and a footer. The style sheet should be in /styles.

    A lot of Web pages look better with a textured background. Google free web page backgrounds, select one that works with your presentation, and add it to your style sheet. You can use this background for the whole page, the header and footer, or one or both columns. Be sure to put a comment in the style sheet showing the source of the image (in case you want to go back to it later.)

  2. Change your home page to use the two-column layout.
    1. In the header, put your logo and your name.
    2. In the footer, put your contact information: CPO box number, telephone, and e-mail address. Set up your e-mail address as a link to your Wofford e-mail—for example, sykesda@wofford.edu.
    3. In the fixed-width column, create a navigation menu as an unordered list and include the following links: Home, About me, Class blog, Reflections, Investigation, Client site, Client mirror.
    4. In the variable-width column, put the other things on your existing page.
  3. Validate the XHTML and the CSS used for the home page. Under the navigation menu, put the icons for validated HTML and CSS

    Valid XHTML 1.0 Strict Valid CSS!

    Note: You'll need to validate via URI in order to get access to the images.

  4. Create a new page to link to from Reflections on the navigation menu. This page should be in a folder named /reflections. As usual, name the page index.html. This new page should have the same layout as the home page. The link on the home page should reference this new page. The Home link on the new page should reference the home page. Fill up the content with fake Latin text. Make sure the page displays properly in a browser and that it validates.
  5. Transfer the files up to cs.wofford.int. Verify that they can be viewed in a browser.

No comments: