This Laboratory is about CSS (Cascading Style sheet). You will learn how to fully externalise the visual representation of a text (graphical attributes) from the text itself.
Make sure that you had read the lecture notes, explored the recommended web site (Westciv) and had a look at the list of other interesting web sites.
You will base your work on your own lab2 work.
Duplicate the demo.html into a demoCSS.html. Within the demoCSS.html page, you
will remove all reference to the 'font' HTML tag, as to any visual tag dated
from HTML3.2 and before (this include the bgcolor attribute of the 'body' tab).You
will then put all the necessary information within a CSS encapsulated into the
header of the page. At the end, the two pages should look exactly the same.
You eventually will introduce two links close to the top of each page in order
to allow for a fast switch from one version to the other (make sure that the
links are meaningful and also the title of each page ( "Go to the CSS version
of the demo page" for instance).
Still using previous laboratory 2 pages, you will create a CSS file at the root of your web site and attach it to the remaining pages (all except demo.html and demoCSS.html). That CSS should centre and colour in blue on an light orange background all the level 1 headings, with a thin black bounding box. It should too provide a specific look and feel on the bottom menu bar. Try to get the same design (or a better one) that what you achieved with the lab 2 (this will be an interesting challenge for those of you who used tables for their previous lab : there should not be any table anymore in this very lab work).
See the Task 3 for some examples of what a css file looks like.
After this lab, you should know enough about CSS to change the default look of your web pages without affecting the neutrality of its HTML files.
Little challenge : look at the following page and try to guess the CSS (without looking at the code, of course !!) http://tantek.com/CSS/Examples/ifusecard.html
Here are the various styles I am using for the lecture pages'slides and the matching CSS file for the slides, online and print version. You will understand the context in which they are used, general context or what I call 'mode', and rule specific one.
There are 3 modes of use of the slides :
Note that you could guess it by yourself, just by looking at the header part of the html of the slides, from which here is an extract :
<link rel="stylesheet" type="text/css"
href="/lecture/comp1710/lectureNotes.css" media="screen"
title="Lecture Notes">
<link rel="Alternate StyleSheet" type="text/css" href="/lecture/comp1710/lectureSlides.css"
media="screen" title="Lecture Slides">
<link rel="stylesheet" type="text/css" href="/lecture/comp1710/lecturePrint.css"
media="print">
You will propose 2 new CSS files (sets of rules), one slide mode and one web mode and demonstrate them in a given set of web pages extracted from the the lecture web site
They should be only one visible H1 per slide. By visible, I mean visible in slide mode. There could be another one or two H1.lecturetexte visible only in web and print mode. Sometims, when a couple of slides are closely related, I use an H3 that immediately precede the H1 to remind the context of the group of slides
H2 is used to list the main points within a slide (up to 4 or 5 visible H2 per slides ?). There could be some 'lecturetexte' text that follows it (and therefore not visible in slide mode)
H1 H2 and H3 should note span on more than one line. H4 is there for longer citation
The 'lecturetexte' class is the main one that make the difference between slide and web/print version : Anything that is tagged with the 'lecturetexte' class will be visible in the text and print version and invisible in the slides version
This class are used to tag programming extract (Example : http://escience.anu.edu.au/lecture/cg/Java2DIntro/firstExample.en.html )
.javacodeNew is used inside a javacode-tagged block to point out some modification to a previous example of code or to insist on some part of the code (Example : http://escience.anu.edu.au/lecture/cg/TextureJ3D/texture2DExampleCode.en.html )
like .javacode, they are used to display monospace type text : HTML code, because the marked text is on average smaller than for code, it could be display with bigger font and/or more margin
Those text should not be visible at any time : they are ideas, temporary content and notes that I use to develop the real content itself
This is bad ... I should be using <sup> and <sub> standard tags instead. But because they were not easily accessible from dreamweaver, I used a style sheet instead. I should clean my slide and get rid of these aberrations, but in the meantime, these styles should remain around
Ex of use : H<sub>2</sub>O
E = mc<sup>2</sup>
Mathematical expressions. .math is for block element, .mathNonCenter is for inline text.
Two ways to insist on some special information
Rarely used :
.container : http://escience.anu.edu.au/lecture/comp1710/CSS/container.en.html
others : http://escience.anu.edu.au/lecture/comp1710/CSS/tutorial1.en.html
Separation between each slide on the print version
You may want to introduce new tag style
You will include the following pages, duplicate them and link your 'web' and 'slides' style sheets to each of them and include both HTML and CSS files in your submission.
http://escience.anu.edu.au/lecture/comp1710/CSS/tutorial7.en.html
http://escience.anu.edu.au/lecture/comp1710/CSS/groupingRules.en.html
http://escience.anu.edu.au/lecture/comp1710/CSS/tutorial6.en.html
http://escience.anu.edu.au/lecture/comp1710/CSS/selector.en.html