1. Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3

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

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

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

5. Tools that will be use for CSS

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

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

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

9. © 2011 Delmar Cengage Learning Tools You’ll Use Working with Text and Cascading Style Sheets

10. Side Bars Page 3-6 to 3-9

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

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

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

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 website’s directory structure  CSS styles are much more compliant with current accessibility standards than those with manual formatting. Advantages of Using Cascading Style Sheets

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

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

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

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

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

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

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

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

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