This document explains the tips and techniques that can be used to structure and format a Word document so that it looks appropriate. It is expected that assignment work for Information Technology for Business (Level 4) and Web Scripting for Applications (Level 5), will use these techniques.
This weeks material is very practical, involving the redesign of a website into semantic XHTML and CSS. As this is exactly the same process that you will be performing in the assignment, the lecture has been duplicated below, so that you can repeat the process should you wish (or if you missed the lecture).
Activity Four Watch the second part of the video – where the logical parts of the document are marked up using DIVs and SPANs
Video 2 is about 7 minutes long
Activity Five Edit your document (or the solution given in Activity Three) to mark up the logical parts of the document – a completed version is available to check against. Watch out for the correct number of closing DIV tags where there are DIVs within DIVs – the trick is to have two closing DIVs at the end of the central column (closing the news area and the contentMain area), and two closing DIVs at the end of the column on the right (closing the badges part and the contentSub part).
Activity Six Watch the third part of the video on how to structure and add CSS files – and then what normalisation does
Video 3 is about 6 minutes long
Activity Seven Watch the final parts of the video which shows the steps required to style the site to recreate the original design markup used in the lecture Because this is the longest part of this process, this has been split into two parts
Styling the whole document – sorting out the column placement and overall styles (such as fonts) – about 7 minutes
Styling each individual sub area and tidying up – about 18 minutes
You should now be prepared for the Lab Exercise which asks you to style the page
Lab Exercise Styling the page – exercise sheet for Lab 5 and the Zip file containing HTML, CSS and images for lab 5
A solution for the complete site is available (i.e. the completed redesign shown in lecture and attempted in lab from the zip file)