Download presentation
Presentation is loading. Please wait.
1
Unit 20 - Client Side Customisation of Web Pages
Week 5 – Lesson 6a CSS Basic layout
2
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 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’.
3
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; }
4
This looks like…
5
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; }
6
This looks like…
7
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; }
8
This looks like…
9
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)
10
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;
11
<!– 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;
12
In your HTML <link rel=“stylesheet” type-”text/css” href=“basiclayout.css”> <body> <div id=“wrapper”> <div id=“left”> <div id=“nav”> links </div>
13
In your HTML <div id=“wrapper”> <div id=“main”>Lorem ipsum
<div id=“footer”> <ul> <li>abc</li> </ul>
14
Final web page
Similar presentations
