Unit 20 - Client Side Customisation of Web Pages. Week 1 Lesson 2 Introduction to CSS

Size: px

Start display at page:

Download "Unit 20 - Client Side Customisation of Web Pages. Week 1 Lesson 2 Introduction to CSS"

Samantha Rebecca Dean
5 years ago
Views:

1 Unit 20 - Client Side Customisation of Web Pages Week 1 Lesson 2 Introduction to CSS

2 Last Time Recapped Unit 28 Revised some HTML tags

3 Allow the user to perform some task Can be database driven Can make use of scripts i.e. JavaScript Are dynamic i.e. They change as the user interacts with them

4 Web pages make use of a mark-up language HTML Hypertext Markup Language Specification found at Very easy Can get complicated Supposed to work in all browsers

5 HTML is a tag based language E.g. <title> Tags have a start and end tag E.g. <title></title> Which tags have no end tag? Tags may be nested E.g. <body><script></script></body> Tags may have attributes <h1 align= center >

Use the hand-out sheet to evaluate the following websites: http://www.coventry.gov.uk/ccm/portal/ http://www.verygoodwebsites.co.uk/ http://www.thecreationmuseum.org/ http://www.2menandapizza.

6 Use the hand-out sheet to evaluate the following websites: Requires about 10 minutes When you have completed the form look at the source code. Can you spot the following words: Html script style Can you see where different languages are being used? Can you see how the code is affecting what you can see?

7 Criteria Choice of colours Corporate identity Good choice of colours Garish Wow! Does most navigation work? All links work Yes, All links work Yes, but slow No navigation How easy is it to read? Does the site/site content load quickly? When each site was last updated? Very easy Very easy Difficult Takes you to different sites Yes Yes No Yes May 2010 Wed June 19 th 2002 Layout Good, template, CSS Good, template, CSS Disastrous Chopped up picture Is there consistency across the site? Yes Yes No Yes Text Small, light blue, difficult to read Good use of, easy to read Difficult to read, too many colours and fonts Difficult to read Font usage Consistent Different fonts Good use of fonts Consistent, too small in places Is there any contact information available? Yes, as a banner Yes, telephone number on all pages, address on link Yes Yes, on main (only) page Any other good points? On a scale of 1 to 10 (10 being good) rate this site. Has a site map WC3 compliant, Made use of a template No No

8 Objectives

9 What is CSS Dance-rock sextet - html#bio Strangely has nothing to do with web design A whole bunch of text which describes HOW a document, written in a markup language, is PRESENTED Cascading Style Sheets A form of web language used to standardise layout in a website.

10 Why Use CSS? Not an easy question...can raise many more questions Depends on what level of complexity needs to be achieved Lets move on...

11 Content graphics, text, video, sound and more... Contains items which are basically in three layers: Presentation Defines how the content will appear to the viewer Behaviour layer This involves realtime user interaction with the web page

12 Can have all of the previous elements in a single document Can have the elements completely separate Keeping them separate gives us one major advantage: we can modify or replace any of the layers without having to change the others...like this:

13 We can modify or replace any of the layers without having to change the others One change will affect many pages (separate CSS) We do not have to change the same thing in many pages E.G. OSCommerce...

>" valign="top"><table border="0" width="<?php echo BOX_WIDTH;?>" cellspacing="0" cellpadding="0"> <!-- right_navigation //--> <?

14 The first thing we need to do is remove that Right Hand Side Column totally. There is only one way to do this and this is to open up each of the main.php files in turn (eg index.php, product_info.php etc) and remove the following portion of code: <td width="<?php echo BOX_WIDTH;?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH;?>" cellspacing="0" cellpadding="0">  <?php require(dir_ws_includes. 'column_right.php');?>  </table></td> There are 29 files here Excerpt from: How to make Oscommerce look like a Million Dollars.pdf by G Burton

15 In the case of OSCommerce...NO What is the solution? One or more files for our presentation

16 Headings Images Backgrounds Navigation Forms Tables Rounded corners...the Web 2.0 thing

17 It is supposed to be static Ensure there is some text Ensure there is a heading of sorts So your HTML will look something like: <h1 style= color:blue; > Web Design Is Cool! </h1>

18 If you followed the instructions on the previous slide, then you have just made use of your first CSS This is inline CSS (style= color:blue; ) Applied in the area of the code where it is defined <p> Apply some style commands <style>{background: blue; color: red; fontfamily: times new roman;}</style> Move the style commands about

19 <h1 style = background: red; colour: white; font-family: times new roman; > Web design is Cool! <h1>

20 Looked at what CSS is Looked at why we will use it Actually used our first CSS

21 CSS headings Lots of code Assignment hand out

22 Continue adding content Attempt to have pages 1 and 2 completed by next week

Week 1 Lesson 1 Introduction

Week 1 Lesson 1 Introduction Understand the fundamentals of cascading style sheets (CSS) Understand the fundamentals of scripting languages Be able to control the layout of web pages using CSS Be able