Internet and New Media

(706.003 1VU Internet und neue Medien WS 2011/2012)

Exercise 5: Three Style Sheets (CSS)

In this exercise you will make three different style sheets for a given XHTML document.

Please read these instructions carefully!

Please also read the corresponding chapter(s) in the current lecture notes (the PDF file) before you start.

5.1 Create a Local Working Subdirectory

Create a subdirectory, say inm-css (lower case), on your home computer (or on a PC in the university labs, or on a USB stick) in which you will work.
Do not create the subdirectory on the university web server. All files you upload to the web server (Novell-M drive) are publicly accessible through the internet. If another INM student copies your style sheets and hands them in as his or her own, you will both be punished for plagiarism, even if you did not know about the other student copying your style sheets! It is your responsibility to make sure that nobody can copy your work.
Change directory to inm-css.
Copy the given files struct.html and clocktower.jpg unchanged into your directory inm-css.

In Firefox, right click on the link above, and "Save Link As..." That will fetch the original file unchanged.

Do not follow the link, display the page, and use "Save Page As..." as this may or may not change the page when saving it. ("Save Page As..." - "Web Page, complete" can change the original XHTML file).
You must not modify struct.html or clocktower.jpg in any way. The tutor(s) will use original copies and will not look at your modified version.

5.2 Create Three Style Sheets in CSS 2.1

Work locally using a plain text editor such as PSPad, Crimson Editor, Notepad, Emacs, or UltraEdit.
Microsoft Word, FrontPage, Dreamweaver, etc. are not plain text editors and their use is strictly forbidden in this course!!
Use only valid, conforming CSS 2.1. Validate each style sheet at the W3C CSS Validator http://jigsaw.w3.org/css-validator/ by uploading each CSS file separately ("by file upload").

Alternate style sheets are not validated when you give the URI of an XHTML file, only the main style sheet is validated.
Errors issued by the W3C CSS Validator mean that your style sheet does not validate and will lead to points being deducted.
Warnings issued by the W3C CSS Validator indicate problems with your style sheet, and may or may not lead to points being deducted. It is recommended that you set the validator's warning level to "all".
Use all lower case for all file names and directories.
You will next create three different style sheets for struct.html
Do not use any images in your style sheets (neither local nor served from a server).

This does not mean that you should make clocktower.jpg invisible.
Do not use CSS to scale the image clocktower.jpg. Keep it at its original size.
You will only be able to use CSS to do your formatting. Do not add any markup or any Javascript to the XHTML file. You are not allowed to change the XHTML at all.
We recommend you test your style sheets using Firefox 8 or IE 9. Chrome does not currently support alternate style sheets.

5.3 Create a Fluid Three-Column Layout (fluid.css)

Create a style sheet fluid.css in the inm-css subdirectory.
Design the style sheet to display the XHTML page in a fluid, scalable three-column layout:
- The page must be fluid and freely scalable, so it works at a variety of window sizes.
- Element header should be at the top. Element global-nav should be down the left and element local-nav to the right of it across the page. Element main-content should be in the middle and element related-content to its right. Element footer should be beneath all other elements, as illustrated below:
```
+--------------------------------------+
| header                               |
+---------+----------------------------+
|         |     local-nav              |
| global- +----------------+-----------+
| nav     |                |           |
|         |     main-      | related-  |
|         |    content     | content   |
|         |                |           |
|         |                |           |
+---------+----------------+-----------+
| footer                               |
+--------------------------------------+
```
- The navigation links in element global-nav should be formatted as a vertical drop-down menu, without dots or circles preceding each list item. global-nav is a two-level menu, you must format it as a drop-down menu using CSS only (no JavaScript).
  
  If you need help, first work through the CSS tutorials at htmldog.com, then search the web for "css vertical menus" or similar.
- The navigation links in element local-nav should be formatted as a horizontal list of "tabs", without dots or circles preceding each list item.
- All sizes must be in % and em.
- Use floated elements rather than positioned elements (Exception: you may use positioned elements for the drop-down menus).
- The image caption should be beneath the image.
- The skip-nav element must neither be visible, nor take up any space.
- All other elements must be visible.
- Prices in the main-content element (and only here), should have a background colour of "yellow".
- Years in the main-content element (and only here), should be bold.
- Whatever else you deem suitable, as long as the page remains readable...

5.4 Create a Fun Stylesheet for Children (kids.css)

Create a style sheet kids.css in the inm-css subdirectory.
Design the style sheet to display the XHTML page in a fluid, scalable two-column layout:
- The page must be fluid and freely scalable, so it works at a variety of window sizes.
- Element header should be at the top. Element global-nav should be down the left and element local-nav to the right of it across the page. Element main-content should be beneath local-nav. Elements related-content and footer should be beneath all other elements, as illustrated below:
```
+--------------------------------------+
| header                               |
+---------+----------------------------+
|         |        local-nav           |
| global  +----------------------------+
| -nav    |                            |
|         |          main-             |
|         |         content            |
|         |                            |
|         |                            |
+---------+----------------------------+
| related-content                      |
+--------------------------------------+
| footer                               |
+--------------------------------------+
```
- The navigation links in element global-nav should be formatted as a vertical list, without dots or circles preceding each list item. global-nav is a two-level menu, you may format it statically or as a drop-down (using CSS only), as you wish.
- The navigation links in element local-nav should be formatted as a horizontal list, without dots or circles preceding each list item.
- All sizes must be in % and em.
- The primary font choice for basic text in the body must be "Comic Sans MS". Define the generic font family "fantasy" as a final alternative, in case the primary font is not available.
- Use brighter colours (the page should still be readable!).
- The skip-nav element must neither be visible, nor take up any space.
- All other elements must be visible.
- Whatever else you deem suitable, as long as the page remains readable...

5.5 Create a Print Stylesheet (print.css)

Create a style sheet print.css in the inm-css subdirectory.
Design the style sheet for print media:
- The primary font choice for basic text in the body must be "Times New Roman". Define the generic font family "serif" as a final alternative, in case the primary font is not available.
- Basic text in the body must be at 12pt size.
- All other sizes (font sizes as well as borders, margins, etc.) must be in % and em.
- Headings should be bold and in "Verdana" font. Define the generic font family "sans-serif" as a final alternative, in case the primary font is not available.
- The main heading (h1) and the tag line should be separated from each other by a thin line.
- Links must not be underlined, should be bold, and should have this text colour: #005602 (a dark green). Links should be followed with the destination of the link in angle brackets (greater than and less than).
- The whole page must be black on white, apart from the image and where otherwise noted.
  
  Just leave the image alone and make sure your print style sheet does not specify colours for anything else but the links. In particular, do not make the image invisible!
- The image caption should be beneath the image.
- The skip-nav element must neither be visible, nor take up any space.
- Navigation elements (global-nav and local-nav) must neither be visible, nor take up any space.
- All other elements must be visible.
- Do not create a multi-column layout. The entire page layout should consist of a single column in which all elements are placed one after the other, as illustrated below:
```
+---------------------+
| header              |
+---------------------+
| main-content        |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
+---------------------+
| related-content     |
+---------------------+
| footer              |
+---------------------+
```
- The text in the main-content block should flow around the clocktower image.
- Acronyms should be written out, with the abbreviation following in parentheses.
  
  For example, if the page contained the acronym "INM" for "Internet and New Media", the element should appear like this in print form: Internet and New Media (INM).
- The footer should be separated from the related element by thin solid border of colour "#242424".
- The validation links and email address in the footer must neither be visible, nor take up any space. The copyright text should be centered between the edges of the page.
- Whatever else you deem suitable, as long as the page still prints nicely.
You can test the print stylesheet by looking at the Print Preview in Firefox (which gives you an approximate rendition) or by printing to PDF (which gives you an exact rendition).

You can print to PDF from any web browser by installing a free PDF printer such as PDFCreator or Cute PDF Writer.

5.6 Hand In Your Style Sheets

Compose a new email to your INM tutor with the following message body:

Dear Tutor, Please find attached my three style sheets for Exercise 5.
Give your email a Subject line of the form:

[INM] MatrNr Exercise 5 Submission

where MatrNr is replaced by your Matrikelnummer.

If you select the above subject line with your mouse to paste it into Thunderbird, be careful that no spurious characters are copied as well. If you have Thunderbird set to compose HTML by default, sometimes HTML tags are copied as well, then converted to vertical bars when the message is sent as plain text. If in doubt, send a test message to yourself.
Enter your TU Graz email address into the CC field, to send a copy of your mail to your TU Graz email address. Keep this copy in your TU Graz inbox as proof of sending in case of technical difficulties.
Attach your three style sheets fluid.css, kids.css, and print.css to your email.

Attach the files as three separate files attached to one email, do not create a zip or rar file and send that.
Send your email as a standard, plain text email to your tutor:

inm-t1-alexander@iicm.edu inm-t2-thomas@iicm.edu inm-t3-benedikt@iicm.edu inm-t4-gerald@iicm.edu inm-t5-dominik@iicm.edu inm-t6-martin@iicm.edu

Bear in Mind

You must not modify struct.html or clocktower.jpg in any way. The tutor(s) will use original copies and will not look at your modified version.
You must not upload your files to your university web site or any other publicly accessible server. Doing so would allow others to copy your style sheets, which would result in both of you being punished for plagiarism!
Your style sheets must be valid CSS 2.1. Validate each of your style sheets at the W3C CSS Validator http://jigsaw.w3.org/css-validator/ by uploading each file separately. Alternate style sheets are not validated when you give the URI of an XHTML file.
Send your email using your real name and your TU Graz email address, so that we can identify you.
Send your email using a real email client, such as Thunderbird, Eudora, or Windows Live Mail. Do not use webmail!

We want to check that you can configure a real email client.
Your email must be in plain text only. Do not send HTML email.
Your email should have a valid signature.
Keep the copy of your mail (which you CCed to your TU Graz email address) in your TU Graz inbox as proof of sending in case of technical difficulties.
Your tutor will not be very happy if you keep resending improved versions of your email. You can practice by sending email to yourself, or by sending email to a secondary email address.
And all of the other relevant points in the lecture notes.