Lab XML with CSSOverviewIn 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. AimAfter the lab you will know how to completely separate layout and content by using CSS with any XML structure. Setting up the environmentFirstly, 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. PreparationsRead 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
Click on the images to see them in natural size ExaminationHand 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. |