Objectives and Activities

1. Objectives and Activities Web-Design Part time Evening Week 5 – CSS Introduction

2. Starter – ExtensionFormatting Text HTML – Without using CSS • http://www.landofcode.com/html-exercises/ • Complete as many of the following tasks, from the ‘HTML text formatting exercises’

3. CSS - Introduction • Objectives… • To understand how CSS allows you to create rules that control visible presentation. • To understand selectors and declaration. • To be made aware that declarations are made up of two parts; A PROPERTY and A VALUE. • To use this understanding to use CSS within an exercise.

4. CSS - Understanding • It may help to understand CSS as an `invisible` box that envelopes every HTML element. • It allows you to create rules that control the visible presentation of each `box`andit`s contents. • CASCADING STYLE SHEETS

5. Example Styles TEXT Typefaces Size Italics, bold, uppercase, lowercase, caps etc. Colour BOXES Width and height Background colours and Images Borders (Colour, Width and Style) Position in the browser window Other design elements Tables Forms Lists

6. CSS - Explained This text shows both blockline elements (orange) and inline (in green) Using CSS you could be specific about height and width of boxes and those factors mentioned on previous slide.

7. CSS - Associating RULES WITH HTML ELEMENTS These rules determine how elements are displayed, containing both a SELECTOR and DECLARATION. Indicates that the rule applies to this element. SELECTOR This rule shows that all elements should be in the Tahoma typeface. P font – family: Tahoma; Shows the elements, referred by the selector should be styled. DECLARATION

8. How CSS properties affect the displaying of elements. • Declarations are made up of two parts, sitting within brackets: A PROPERTY and A VALUE. • Properties – highlight the aspects of that element that you wish to alter. • Values – specify, for the chosen properties, settings that you would like to use. h1, h2, h3 font-family: Tahoma; colour: blue; This rule shows that all h1, h2, h3, elements should be displayed as Tahoma typeface, in blue. PROPERTY VALUE

9. CSS - Exercise 1 • Using the handout as a guide, you will make changes to the existing CSS properties and values and substitute the existing text, and titles with those given within the file. • You will change the first title to: Snow White and the Huntsman - A Modern Tale make it bold. • Make the word queen : italic (first word given) • Insert Part 1 text • You will change the Second title to Mirror, Mirror…: and make it bold. Insert Part 2 text • Font family Calibri • H1 an h2 will be #0088dd • Background colour #e1ddda • Part 1 text Once upon a time, long, long ago a king and queen ruled over a distant land.  The queen was kind and lovely and all the people of the realm adored her.  The only sadness in the queen's life was that she wished for a child but did not have one. One winter day, the queen was doing needle work while gazing out her ebony window at the new fallen snow.  A bird flew by the window startling the queen and she pricked her finger.  A single drop of blood fell on the snow outside her window.  As she looked at the blood on the snow she said to herself, "Oh, how I wish that I had a daughter that had skin as white as snow, lips as red as blood, and hair as black as ebony."  Soon after that, the kind queen got her wish when she gave birth to a baby girl who had skin white as snow, lips red as blood, and hair black as ebony.  They named the baby princess Snow White, but sadly, the queen died after giving birth to Snow White. • Text 2 Soon after, the king married a new woman who was beautiful, but as well proud and cruel.  She had studied dark magic and owned a magic mirror, of which she would daily ask, Mirror, mirror on the wall, who's the fairest of them all?. Each time this question was asked, the mirror would give the same answer, "Thou, O Queen, art the fairest of all."  This pleased the queen greatly as she knew that her magical mirror could speak nothing but the truth.One morning when the queen asked, "Mirror, mirror on the wall, who's the fairest of them all?" she was shocked when it answered:You, my queen, are fair; it is true.But Snow White is even fairer than you. • Source: Grimm's Fairy Tale version - translated by Margaret Hunt - language modernized a bit by Leanne Guenther

10. Task 2: Why use Cascading Style Sheets? • 10 minute research task. • Using appropriate search engines and css/ html related websites, compose a Powerpoint slide explaining: Why use Cascading Style Sheets? • We will discuss these findings as a group, before looking at the Dreamweaver interface.

11. Some suggestions… You need only edit one CSS file for all of your pages to be updated. All of your web pages can share the same style sheet and does not need to be repeated. The document is easier to read and edit as it does not contain multiple CSS rules. It is considered good practice to keep CSS in a separate file. CSS may be placed in the head of the document also.

14. http://www.maxdesign.com.au/articles/css-layouts/one-fixed/ Example Page

15. CSS: Inline, Internal and External • http://www.htmldog.com/guides/css/beginner/applyingcss/

16. Dreamweaver Introduction - Interface

17. Parent folders Using the SMART board and the explanation given by your tutor, plot out the folders usage in relation to the Parent folder and it’s ‘Family Tree’.

18. Dreamweaver ‘Anatomy’ Part 1 1. File location – sorted into relevant folders. 2. Relevant tools for CSS formatting/ template creation. Attach style sheet. New CSS rule. Edit sheet

19. Planning Task • Storyboards - first three pages, using template. • THIS SHOULD BE DONE PRIOR TO USING DREAMWEAVER, SO ELEMENTS AND LAYOUT CAN BE FORMULATED PRIOR TO CREATION OF WEBSITE.

20. Finishing thoughts… • The GOOD • The BAD • The UGLY • Take a few minutes to consider your progress so far, on the course. • Identify the positive, a possible negative and something that you think you have to do to change the negative. • Other members of the group, will also be asked to contribute and problem solve for other group members.