Mr. O'Connell's Technology Home Page
home web design business and personal finance biography links2

Personal Website CSS Project

The goal of this project is to update your personal website's CSS. You are expected to work independently.

This project calls for you to reference and adapt earlier tutorials. The intent is that you will apply what you have learned in a new circumstance. If you have questions, please refer to the FAQ before you ask me.

IMPORTANT NOTE:

Create a copy of your personal website before you begin. It is entirely possible that you will wish to return to your original version for reference. It is also possible that ultimately, you will prefer the original. However, your goal should be to create a dramatic improvement in the site by successfully applying what you have learned about CSS.

Method:

  • Open Windows Explorer
  • Navigate to your network folder
  • Right-Click your personal website root folder, and choose "Copy"
  • Right-Click the workspace, and choose "Paste"
  • Rename your root folder as follows:
    • lastname_firstname_personal_website_css_version
  • Return to Dreamweaver
  • Create a new site definition for your new CSS version. Click here for a tutorial if you've forgotten how.
  • Delete existing page-specific CSS by deleting <style> from the CSS Styles Panel. Do this on each page separately.
    • The ONE exception is the CSS you might have created for a SPRY Menu. You may leave this CSS where it is- it should not create any conflicts with your new CSS.
  • Adapt the CSS tutorial to create a new CSS document. Use your new CSS to update and improve your personal website. Name your new document personal_website.css.

Requirements:

  • Include the following elements in your personal website's CSS, in the following order:
    • body
    • p
    • h1
    • h2
    • h3
    • td
    • a:link
    • a:visited
    • a:hover
    • a:active
  • For each text element (p, h1, h2, h3, etc.), you must include at least the following properties:
    • Font Family
    • Size
    • Weight
    • Color
  • Link your CSS to each page of your website.
  • Show evidence of each CSS element on your web pages. This means going back into your pages and formatting the appropriate elements on your pages, especially h1, h2, and h3.
  • When your CSS is complete, print the CSS document from Dreamweaver.

Important Concepts:

If everything is bold, there is no bold.

If you have set your paragraph (p) weight to bold (either on the page or in the CSS), undo it. Set your paragraph weight in your CSS to normal. If you find that the text does not stand out as much as you want it to, adjust the font, size, and color- not the weight.

Choose your fonts carefully this time around. Read the information below, and use it to guide your font choices.

*Special thanks to Kaitlyn Gurman for providing the image below.
source: Joust Multimedia

font ideas


top

FAQ:

Q: Is it okay if my tables still have background colors? Does it mean that something is wrong?

A: Yes, it's fine, and no, nothing is wrong. Background colors in tables are independent of the CSS background color. On the other hand, you might choose to go back and alter the background colors of the tables to suit your new CSS color scheme.

Q: Do we have to use a light background color and dark text?

A: Yes. High contrast and readability remain essential.

Q: Do we have to use San Serif fonts?

A: No. You may use any fonts you wish in your CSS. As stated above, "Stick to two fonts. Three if you must, but use it sparingly." A typical strategy that professional web designers use is to use one font for body text and default text, and a different font for headings. Any more than three fonts tends to look like a ransom note.