Objectives and activities
Download
1 / 20

Objectives and Activities - PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on

Objectives and Activities. Web-Design Part time Evening. Week 5 – CSS Introduction . Starter – Extension Formatting Text HTML – Without using CSS. http://www.landofcode.com/html-exercises/ Complete as many of the following tasks, from the ‘HTML text formatting exercises’ .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Objectives and Activities' - brooks


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Objectives and activities

Objectives and Activities

Web-Design

Part time Evening

Week 5 – CSS Introduction


Starter extension formatting text html without using css
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’


Css introduction
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.


Css understanding
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


Example styles
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


Css explained
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.


Css associating rules with html elements
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


How css properties affect the displaying of elements
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


Css exercise 1
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


Task 2 why use cascading style sheets
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.


Some suggestions
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.



Css inline internal and external
CSS: Inline, Internal and External

  • http://www.htmldog.com/guides/css/beginner/applyingcss/



Parent folders
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’.


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


Planning task
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.


Finishing thoughts
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.


ad