Objectives and activities
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

Objectives and Activities PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Objectives and Activities

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.


Http www maxdesign com au articles css layouts one fixed

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

Example Page


Css inline internal and external

CSS: Inline, Internal and External

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


Dreamweaver introduction interface

Dreamweaver Introduction - Interface


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


Objectives and activities

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.


  • Login