Slide 1

Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3

Slide 2

Web pages depend largely on text to convey information. There are many tools to work with text in Dreamweaver. These tools help you format text quickly and helps make it consistent Introduction

Slide 3

If a Web page contains a large amount of text can be difficult to digest and read Break text up on a web page by using lists Unordered Ordered Definition List Formatting Text as a List

Slide 4

These will help ensure that your page elements have a consistent appearance CSS are sets of formatting instructions, usually stored in separate file, of text and graphics on a web page or throughout a website. Great Way to have consistent formatting Paragraph text Lists Table data Can apply this element in a single document or a total webpage. Using Cascading Style Sheets

Slide 5

Tools that will be use for CSS

Slide 6

Unordered List are lists of items that do not need to appear in a specific sequence, such as a grocery list, which often lists items in a random order Organized through bullets Unordered list are sometimes called bulleted list Use the HTML Properties Inspector To insert bullets on a webpage Create Unordered and Ordered List

Slide 7

Ordered List which are known as Numbered List Lists of items present a specific sequence that are preceded by sequential numbers or letters Examples Directions that need to be completed in order List properties Dialog Box is where your format an ordered list Creating Ordered Lists

Slide 8

Definition lists are similar to unordered lists but are displayed with a hanging indent and are not proceeded by bullets. Often used with terms and definitions Creating a Definition: Select Text Click Format on Application Bar or Menu Bar Point to List Click Definiton List Creating a Definition List

Slide 9

2011 Delmar Cengage Learning Tools Youll Use Working with Text and Cascading Style Sheets

Slide 10

Side Bars Page 3-6 to 3-9

Slide 11

Understanding Cascading Style Sheets CSS are made up of sets of formatting attributes called rules. Rules define the formatting attributes for page content, which are also referred to as styles Style sheets are classified by where the code is stored. The code can be saving in a separate file (external style sheet) as part of the head content of an individual web page (internal or embedded styles), or as part of the body of the HTML code (inline styles) Create, Apply, and Edit Cascading Style Sheets

Slide 12

Class Type Used to format any page element ID Type and a Tag Type Used to redefine an HTML tag Compound Type Used to format a selection In this chapter we will be using the class type stored in an external style sheet file. CSS Types

Slide 13

Use buttons on the CSS Styles Panel to create, edit, and apply rules. Add a rule, use the New CSS dialog box to name the rule and specify whether to add it to a new or existing style sheet Us the CSS Rule definition dialog box to set the formatting attributes for the rule Once created it will show up in the CSS Styles Panel To apply the rule select the text then choose the rule to apply it Using the CSS Styles Panel

Slide 14

Save enormous amount of time Being able to define a rule and then apply it to page elements on all pages means that you can make hundreds of formatting changes External CSS are saved as files with the.css extension and are stored in the websites directory structure CSS styles are much more compliant with current accessibility standards than those with manual formatting. Advantages of Using Cascading Style Sheets

Slide 15

You can see the properties by looking at the CSS code Consists of 2 parts Selector the name of the tag to which the style declaration have been assigned Declaration consists of a property (such as 14px or bold.) When there are more than one property, each additional property and value are separated by a semicolon. Understanding CSS Code

Slide 16

2011 Delmar Cengage Learning Viewing CSS code Create, Apply, and Edit Cascading Style Sheets SelectorDeclaration PropertyValue

Slide 17

Side Bars 3-12 to 3-19 Create a Cascading Style Sheet and add a rule Apply a rule in a Cascading Style Sheet Edit a Rule in a Cascading Style Sheet View Code with the Code Navigator Use the Code Navigator to edit rule

Slide 18

Understanding External and Embedded Style Sheets Terminology can be confusing You will use Attach External Style Sheet Related Files: HTML file is linked to other files necessary to display the page content Cascading Style Sheet is an example of a Related Files Add Rules and Attach Cascading Style Sheets

Slide 19

Sidebars 3-22 to 3-25 Add a Rule to a Cascading Style Sheet Attach a Style Sheet

Slide 20

Coding Tools in Dreamweaver Coding Toolbar is shown Contains a number of handy tools You can collapse code when it starts to get longer and hard to navigate Code hints are lists of tags that appear as you type, similar to other auto complete features that you have in other software applications Use Coding Tools to View and Edit Rule

Slide 21

2011 Delmar Cengage Learning The Coding toolbar contains a number of handy tools that help you navigate your code and let you view your code in different ways. Use Coding Tools to View and Edit Rules Show Code Navigator Collapse and expand buttons Code selection Buttons Code viewing buttons Code option buttons Open Documents Code formatting buttons

Slide 22

Side Bars 3-28 to 3-31 Collapse Code Expand Code Move and embedded style to an external CSS

Slide 23

Skills Review 3-32 and 3-33 Project Builder 2 3-35 Portfolio Project 3-37 All Due: Tuesday January 21, 2015 Chapter 3 Assignments