bild
Skolan för
elektroteknik
och datavetenskap
XHTML, XML and CSS

Lab XML with CSS

Overview

In this lab you will take an existing play by William Shakespeare encoded in an XML format, and make a fairly advanced CSS stylesheet, with the aim of reproducing the look of a number of screen dumps.

Aim

After the lab you will know how to completely separate layout and content by using CSS with any XML structure.

Setting up the environment

Firstly, the lab can be done using Firefox or Opera as web browser, and probably modern versions of IE and Safari. The part that could cause problems with the latter two is the line numbering.

Now download the zip archive lab-css.zip, unpack the content, and add it in the folder lab-css in your course web folder (DM2553 in this case).

The file midsummerdream.xml contains the play "A Midsummer Night's Dream" by William Shakespeare, mid-short.xml is a shorter version which can be suitable to use during the lab since it will be faster than working with the full play, and finally play.css which is an almost empty CSS document which is the file you will modify during the lab, in order to make the layout of midsummerdream.xml look like the screen dumps.

The filer will be accessible from the web with URLs like http://www.student.nada.kth.se/~xxx/DM2553/lab-css/mid-short.xml

Open a web browser with the url above (exchanging xxx with your username), and check that you find the file.


Preparations

Read through the powerpoint slides from the lecture, and http://www.w3schools.com/css/default.asp . Note that the tutorial contains one error, fonts without serifs have the property value "sans-serif", not "non-serif".

The task

Start with opening midsummerdream.xml in your favourite text editor, for example if you use the mac computers, in order to see the XML structure for which you will make your CSS document. The XML markup language used in this case has nothing to do with the web; instead it is a language for coding plays in an XML structure.

 

Now continue with opening the url http://www.student.nada.kth.se/~xxx/DM2553/lab-css/midsummerdream.xml (replacing xxx with your username) in Firefox. You will see a long text. The only rule in the stylesheet is that <LINE>-elements should be shown as block elements.

Now start modifying the file play.css until midsummerdream.xml looks "exactly" like the screen dumps. It is important that everything in the screen dumps is covered, like indent, font sizes, linespaceing, line numbering etc. However, some minor deviations are allowed (like if a font differs slightly in size), but in principle everything should be covered.

Please note that you are NOT allowed to modify the XML document in itself, you may only modify the CSS document.

The lab is complete when your layout matches the screen dumps.

Since the play is quite long, there is like I mentioned above, a shorter version of the play, mid-short.xml, which only contains a few pages of the play. For all practical purposes you can use that file during the lab since it will be faster than using midsummerdream.xml.

Click on the images to see them in natural size

bild

bild

bild

Examination

Hand in links to your files in PingPong. If you work in pair, also write who you worked with, and that both students must hand in links in their own PingPong accounts, even if the links to the files are identical.

Copyright © Sidansvarig: Christer Lie <lie@nada.kth.se>
Uppdaterad 2007-11-12