1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Slides:



Advertisements
Similar presentations
1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets © Netskills, Quality Internet.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets
Cascading Style Sheets
Today CSS HTML A project.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
4.01 Cascading Style Sheets
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading Style Sheets Part 1 Library and Information Services, University of St Andrews.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.
Cascading style sheets (CSS)
Chapter 3 Working with Text and Cascading Style Sheets.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
The Characteristics of CSS
Website Development with Dreamweaver
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
CO1552 – Web Application Development Cascading Style Sheets.
CSS Basic (cascading style sheets)
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
DIV, Span, CSS.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Cascading Style Sheets CSS. Source W3Schools
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
BEGINNER WEB DESIGN. INTRODUCTION Vocabulary Design Tools of the Trade HTML CSS.
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
CSS (Cascading Style Sheets). CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add.
Working with Cascading Style Sheets
4.01 Cascading Style Sheets
>> Introduction to CSS
Cascading Style Sheets
Madam Hazwani binti Rahmat
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Cascading Style Sheets - Building a stylesheet
Using Cascading Style Sheets (CSS)
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Cascading Style Sheets - Building a stylesheet
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
4.01 Cascading Style Sheets
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University of Newcastle Netskills is a trademark of Netskills, University of Newcastle. Partly funded by the

2 © Netskills Quality Internet Training, University of Newcastle Topics HTML formatting Why CSS? Style Rules Working with CSS using Dreamweaver Internal and external styles Classes Page Divisions Page Layout

3 © Netskills Quality Internet Training, University of Newcastle Visual Formatting in HTML HTML can be used for visual formatting e.g. Hello Problems: HTML intended for structuring content Formatting information mixed up with structural information Editing pages is difficult and time-consuming Inconsistent display in browsers Proprietary tags e.g. or Formatting tags misused or cause pages to fail Can cause an accessibility problem Correct way to format pages uses CSS Cascading Style Sheets Hello Browser displays green text

4 © Netskills Quality Internet Training, University of Newcastle Why CSS? Formatting instructions (CSS) separated from document structure (HTML) CSS offers far richer style control than HTML Browsers that do not support CSS can still use the page Efficient and easy style management Faster download times Dreamweaver effectively handles CSS

5 © Netskills Quality Internet Training, University of Newcastle CSS Style Rules Style sheets specify formatting rules Rules consist of selectors and declarations Using a tag name applies a style rule to all instances of a tag in the page Selector identifies an HTML tag p {background-color: blue; color: white;} Style declarations for the … tag This paragraph should have white text on a blue background Result when viewed in web browser

6 © Netskills Quality Internet Training, University of Newcastle Working with Style Rules in DW CS Dreamweaver handles management and display of CSS Graphical interface for creating and editing style rules Design panel > CSS styles tab Attach Style Sheet Edit Style Sheet… style rules New CSS Rule Delete CSS Style

7 © Netskills Quality Internet Training, University of Newcastle CSS Style Rule Window Allows style declarations to be specified, edited and removed DW automatically writes the CSS code Options grouped in categories Use Apply button to preview changes if working in Design View

8 © Netskills Quality Internet Training, University of Newcastle Where to Put Styles Internal In tag within of page Controls style for one page External Link pages to a separate text file (.css) Controls style for all linked pages Best for management and download times External Internal

9 © Netskills Quality Internet Training, University of Newcastle Classes Used to apply styles to sub-sets of HTML tags Assign an HTML tag to a class with a class attribute Create a style rule using the class name as selector Classes can be assigned to any tag in a page and can be used multiple times on a page A different class of paragraph This is a normal paragraph Specify class as selector

10 © Netskills Quality Internet Training, University of Newcastle Page Divisions tag used to create sections in a page e.g. for navigation, content, footer, header… etc. Provides a framework for CSS Have no inherent style Very important for layout Can have class or ID attributes Create a style rule using the class or ID name as selector IDs should be unique in a page Insert Div Tag

11 © Netskills Quality Internet Training, University of Newcastle Page Layout Simplest method is to create page divisions and use CSS to specify: Content width Margin Padding Border Apply settings for each side: Top Right Bottom Left Easy using Dreamweaver! Style Definition window

12 © Netskills Quality Internet Training, University of Newcastle Summary Separate structure from style Use HTML for structure only Use CSS for presentation Define CSS styles using style rules For HTML tags, Classes and IDs External style sheets are very versatile Dreamweaver effectively handles management of CSS Enables easy update and manipulation of page style