Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Unit 20 - Client Side Customisation of Web Pages Week 5 – Lesson 6a CSS Basic layout."— Presentation transcript:

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. 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 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; }

12 In your HTML links

13 In your HTML Lorem ipsum abc

14 Final web page


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

Similar presentations


Ads by Google