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. 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; }
This looks like…
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; }
This looks like…
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 { a:hover { text-decoration: underline; color: #FF0000; a:active { <!-- footer styling --> #footer ul li{ color : #000000; background-color : transparent; display: inline; } #footer ul li a{ color : #115EAC; 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>
In your HTML <div id=“wrapper”> <div id=“main”>Lorem ipsum <div id=“footer”> <ul> <li>abc</li> </ul>
Final web page