Project 2: CSS Site

Purpose:

This project is intended to give students experience in composing a small web site involving Cascading Style Sheets (CSS). The project will employ all three methods of applying CSS styles to XHTML code: external, embedded, and inline. All files in this project will be written using Dreamweaver® CS3 to help students develop a fundamental understanding of how WYSIWYG Web editing software allows them manipulate both XHTML and CSS source code.

In this project, your grade will be based on how effectively you accomplish the stated goals in applying various styles to two web pages. Simply applying the styles is not enough; you must apply them using the requested method. Both the XHTML and CSS must be validated. The XHTML must validate under transitional standards using the [W3C Markup Validation Service]. The CSS must validate using the [W3C CSS Validation Service].

In this project, you will produce a pair of web pages that render output as close as possible to the [illustration of the site] that has been provided as a separate Adobe® PDF file. For specific help with CSS elements, look in your textbook or in the [CSS2 Reference Page] from [W3SCHOOLS.COM] or other online references.

Project Constraints and Objectives:

• Use Dreamweaver® (preferrably CS3) to create your XHTML pages and site. You must not use MS-Word, FrontPage, or any other web authoring software.
• Create a folder on your computer named "project2" to serve as the sole folder for your project files.
• Create a valid CSS file named "project2.css" in your "project2" folder to serve as an external CSS style sheet for your site that defines the following styles for your site:
  • A background image of the IRCC logo retrieved directly from the URL:
    http://www.gibson.vero-beach.fl.us/classes/images/ircclogo.gif
    This image must repeat across the top of all pages to form a banner and must not disappear when a web page is scrolled vertically.
  • A background color of yellow.
  • A top margin of 120 pixels for the body to avoid overlapping the IRCC logo banner.
  • All headings of levels 1, 2, and 4 must be centered. All headings of levels 3, 5, and 6 must be left aligned.
  • Define pseudo-classes to cause your link anchors to appear as follows:
    • Unvisited links: green.
    • Visited links: red.
    • Links that your are hovering over: blue and bolder.
    • Active links: blue (but not bolder).
    • Anchors should appear overlined instead of underlined.
• Create a valid XHTML file named "default.htm" in your "project2" folder to serve as the home page for your project that will conform to the styles defined in your external style sheet. Your default.htm file will contain a few inline style specifications that will override the external style sheet as described below. CSS and other criteria for this page include:
  • A title of "Project 2 - Default Page".
  • Headings as shown on the [illustration of the site] except that the alignment for the level 6 heading must be defined as centered using an inline style attribute.
  • Horizontal rules as shown on the [illustration of the site].
  • A block as shown on the [illustration of the site], written using a "division" element with an inline style to cause it to have a double lined border and one half of a letter width padding offsetting the text. Also the element must be positioned horizontally to use only the right half of the page. Hint: see the float property. Note that the horizontal rule following the block must contain an attribute to clear the float to force the rule to be positioned under/past the block rather than to the left of it.
  • Use a pair of floated divisions to align two links that appear as shown on the [illustration of the site] as follows:
    • A left floated division that is half the width of the Web page containing link to your "embedded.htm" page.
    • A right floated division that is half the width of the Web page containing an email link to you.
• Create another valid XHTML file named "embedded.htm" in your "project2" folder to serve as a special page for your project that will override some of the styles defined in your external style sheet by using an embedded style sheet (in the head section). CSS and other criteria for this page include:
  • A title of "Project 2 - Embedded Page".
  • Headings as shown on the [illustration of the site], all controlled by style definitions in the embedded style sheet as follows:
    • All headings of levels 1, 2, 3, and 6 must be centered.
    • All headings of levels 4 and 5 must be left aligned.
  • A background color of pink defined by an inline style attribute in the body tag.
  • Horizontal rules as shown on the [illustration of the site].
  • The instruction paragraph on Embedded Page (shown on the [illustration of the site]) must be accomplished with an ordinary paragraph element that uses a class named "instruction" that is defined in the embedded style sheet. It should show up in a smaller than normal italic red font.
  • The next paragraph must use a span element with an inline style defined to display the second sentence in italics and smaller than normal with a line through it.
  • Use a pair of floated divisions to align two links that appear as shown on the [illustration of the site] as follows:
    • A left floated division that is half the width of the Web page containing link to your "default.htm" page.
    • A right floated division that is half the width of the Web page containing an email link to you.
• Do not use any other images, color, etc., or other multimedia content on this project.
• Place a comment near the beginning of each file identifying yourself as the author and noting the date. Remember that XHTML comment tags look like this:
  <!-- Comment here -->
  and CSS comment tags look like this:
  /* Comment here */
• Use the [W3C Markup Validation Service] to validate your code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your page's source code.
• Use the [W3C CSS Validation Service] to validate your use of CSS in each file you wrote. Be aware that the CSS validator has limitations interpreting HTML or XHTML on files sent from your computer. So you must either:
  • Upload your site to a Web server and use the "Validate by URI" tab to check either and XHTML or CSS files by providing their URL.
  • Use the "Validate by File Upload" tab to check external CSS files (only) that you upload from your computer.
  • Use the "Validate by Direct Input" tab to check CSS rules (only), copied from within an embedded style sheet (in the head section of an XHTML file) or from within an inline style (in a style attribute within the body section of an XHTML file).

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create a simple web page with just one paragraph on it; then validate it. If it validates, then try adding some more elements and validate again, etc.
• Many systems are "case sensitive", so pay attention to upper and lowercase when typing URL's and filenames in tags. Save your work after each change before trying to view it in your browser. Also, you must press the RELOAD (a.k.a. REFRESH) button on the browser's button bar to see any changes made to a page since the previous rendering of it.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. Some frustration can be a valuable motivator to reinforce lessons. But too much can inhibit learning. Schedule your time to allow some breaks between working sessions.

Submission:

Your web site should be submitted via the "Assignments" tool in the . After completing your project, make a new empty compressed zip folder outside of your project2 folder named "CGS1821_Project2.zip" (without spaces). To create a compressed (zipped) folder within any folder window:

• Right-click on the background of the white folder panel to produce a context menu
• Click on New, then Compressed (zipped) Folder.
• After a brief delay, a new compress folder should appear in the current folder window and the cursor will be automatically placed in a renaming mode by selecting (highlighting in blue) the initial folder name of "New Compressed (zipped) Folder.zip". Change the folder name by typing the new name on top of the old one and pressing the Enter key.

After completing your web site, copy the folder named project2 into the new zip folder by dragging it on top of the zip folder.

Then, login to the and click on the Assignments link on the left side of the screen. Select Project 2: CSS-Site and type your name in the Submission box. Use the Add Attachments button to attach your compressed (zip) folder to the submission and press the Submit button.