Assignment A4: Applying CSS concepts
This assignment must be completed individually, though
consultations are encouraged.
Your task for this individual assignment is to enhance your
basic
website by adding colors via an external style sheet.
In
future assignments we will continue to enrich this content of
this website in numerous ways. Layout
and aethetics will continue to come later.
Here are the assignment specifics:
- Open a Word document and type your name
at the top of the page. Save this word document as yourusername-A4.doc
- Use the tools at http://colorschemedesigner.com
to choose a possible color design scheme for your website.
- Once
you have chosen a design, take a screen shot of the color scheme. Then
take a second screen shot of a sample webpage with that color scheme.
- Place both of these screen shots in your Word document.
- Hover over each of the Hex codes for each of the main
colors or export them, and list these in your word document.
- Finally, write a paragraph of justification for why this is
an appropriate color scheme for our website.
- Save this word document as yourusername-A4.doc
In addition, you begin to incorporate these color
elements into your website via an external style sheet.
- Your website should continue to have 4 or more
separate pages
which are each created in a text editor like Notepad++.
- Each of your pages should use the XHTML 1.0 Strict doctype
as described at http://www.w3schools.com/tags/tag_doctype.asp
- Begin an external style sheet named yourname-style.css
(no
spaces) which employs the color scheme which you created. In general
the
best web pages use no more than 5 categories of color which work well
together.
- Add an appropriate link tag from all of your pages to
employ the styles on all of your pages.
- The following is a model link tag which must be located in
the head area of all of your pages:
<link rel="stylesheet"
type="text/css"
href="yourname-style.css"
/>
- The style sheet must employ at least 6 different styling
attributes as appropriate for your pages. Note that the use of the
class attribute is helpful for adding styling.
- Include <div>'s around all content on every page.
- Create and use at least 1 class or 1 id.
- The pages which you enhance must all continue to validate
at http://validator.w3.org/
- Put the style sheet and all of your pages in the folder. Name
this
folder yourusername-website.
Then
rightclick on this folder and zip it.
- In the Moodle A4 submission area, submit the
zipped folder, yourusername-website
and the Word document yourusername-A4.doc
you created. (If you already submitted this for Friday, be sure
to change the foldername before re-uploading--this will force Moodle to
actually update the folder.)