Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages Week 5 – Lesson 6a CSS Basic layout

Assignment 3 • Task 1:(P4) • Your design must include the following sections: • A screen-shot showing the chosen domain name for your site and its current availability at www.UK2.net • A navigation diagram (site-map) • A description of the house-style including how this will be managed through CSS • Screen designs (storyboards) for each page detailing how CSS will be implemented (external, in-line, header) and any scripting required • A table of the design describing each page using the headings: page name, description of page content, required images and web technologies used. • Pseudo-code or flow diagrams to show how each interactivity will behave. • Ensure that your design will incorporate ‘good practice’.

Basic Layout using CSS Start by defining the style for the body. body { background-color: #999999; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; }

This looks like…

Basic Layout using CSS We then define a wrapper that everything will fit in: #wrapper { width: 80%; background-color: blue; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; }

Basic Layout using CSS We then define a header: #header { padding: 15px; margin: 0px; text-align: center; font-size:40pt; font-family:Arial; color: white; }

Basic Layout using CSS We then define : Left column Navigation bar Main content Footer Right column Any other elements Parts of elements: eg lists Heading styles if we don’t like HTML defaults Link styles (link, visited, hover, active)

Final CSS • #left{ • background-color: #3399FF; • float:left; • } • #nav { • width: 25%; • padding: 10px; • margin-top: 1px; • float: left; • color: black; • background-color: white; • font-size: 12pt; • font-family: arial;} #main { margin-left: 30%; margin-top: 1px; padding: 10px; background-color: blue; color: white; font-size: 14pt; font-family:Arial; text-align: left; } #footer { padding: 15px; margin: 0px; border-top: thin solid #000000; background-color: grey; }

<!– links and footer --> • a:link { • text-decoration: none; • } • a:visited { • text-decoration: none; • } • a:hover { • text-decoration: underline; • color: #FF0000; • } • a:active { • text-decoration: none; • }  #footer ul li{ color : #000000; background-color : transparent; display: inline; } #footer ul li a{ color : #115EAC; background-color : transparent; text-decoration : none; } #footer ul li a:hover{ text-decoration : underline; }

In your HTML <link rel=“stylesheet” type-”text/css” href=“basiclayout.css”> <body> <div id=“wrapper”> <div id=“left”> <div id=“nav”> links </div> </div>

In your HTML <div id=“wrapper”> <div id=“main”>Loremipsum </div> <div id=“footer”> <ul> <li>abc</li> </ul> </div> </div>

Final web page

Unit 20 - Client Side Customisation of Web Pages