1. Chapter 3 Working with Text and Cascading Style Sheets

2. Unordered lists are: – lists of items that do not need to appear in a specific sequence. –usually preceded by a bullet, a small dot. –contain bullets are sometimes called bulleted lists. Creating Unordered and Ordered Lists

3. Choosing a bulleted list style in the List Properties dialog box Bulleted list styles Style list arrow Creating Unordered and Ordered Lists

4. Ordered lists, which are sometimes called numbered lists, are lists of items that are presented in a specific sequence and that are preceded by sequential numbers or letters. Creating Unordered and Ordered Lists

5. Choosing a numbered list style in the List Properties dialog box Numbered list styles Style list arrow Creating Unordered and Ordered Lists

6. You can format an ordered list to show different styles of numbers or letters by using the List Properties dialog box. Creating Unordered and Ordered Lists

7. Creating an ordered list Ordered list items Creating Unordered and Ordered Lists

8. Definition lists are similar to unordered lists but have a hanging indent and are not preceded by bullets. They are often used with terms and definitions, such as in a dictionary or glossary. Creating Unordered and Ordered Lists

9. List Properties dialog box Square style Style list arrow Creating Unordered and Ordered Lists

10. Cascading Style Sheets (CSS) are made up of sets of formatting attributes called rules, which define the formatting attributes for page content. Creating, Applying, and Editing Cascading Style Sheets

11. New CSS Rule dialog box Class option for Selector Type New rule name Rule Definition list arrow Creating, Applying, and Editing Cascading Style Sheets

12. Rules are sometimes referred to as styles. Style sheets are classified by where the code is stored. Creating, Applying, and Editing Cascading Style Sheets

13. Style Rendering toolbar Toggle Displaying of CSS Styles button Creating, Applying, and Editing Cascading Style Sheets

14. The code can be saved 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). Creating, Applying, and Editing Cascading Style Sheets

15. CSS are also classified by their type: –A Class type can be used to format any page element. –An ID type and a Tag type are used to redefine an HTML tag. –A Compound type is used to format a selection. Creating, Applying, and Editing Cascading Style Sheets

16. You use buttons on the CSS Styles panel to create, edit, and apply rules. Use the CSS Styles panel to manage your styles. Creating, Applying, and Editing Cascading Style Sheets

17. A CSS rule consists of two parts: –The selector is the name of the tag to which the style declarations have been assigned. –The declaration consists of a property (such as font-size or font-weight) and a value. Creating, Applying, and Editing Cascading Style Sheets

18. Creating a Tag selector Select Tag (redefines an HTML element) Type or select 1 Verify that su_styles.css will be the location for the new rule Creating, Applying, and Editing Cascading Style Sheets

19. External style sheets are separate files in a website, saved with the.css file extension. CSS can be part of an HTML file, rather than a separate file. These are called internal, or embedded, style sheets. Adding Rules and Attaching Cascading Style Sheets

20. External CSS files are created by the web designer. Embedded style sheets are created automatically in Dreamweaver if the designer does not create them, using default names for the rules. Adding Rules and Attaching Cascading Style Sheets

21. Embedded style sheets apply only to a single page, although you can copy them into the code in other pages or move them to an external style sheet. Adding Rules and Attaching Cascading Style Sheets

22. When you have several pages in a website, you will probably want to use the same styles for each page to ensure that all your elements have a consistent appearance. To do this, use the Attach Style Sheet button on the CSS Styles panel. Adding Rules and Attaching Cascading Style Sheets

23. When an HTML file is linked to other files necessary to display the page content, these files are called related files. It takes both the HTML file and the CSS file working together to display the content properly. Adding Rules and Attaching Cascading Style Sheets

24. Code for embedded rules and a link to an external style sheet Style sheet name in the Related Files toolbar Embedded rules are embedded in the head content Link to external style sheet Adding Rules and Attaching Cascading Style Sheets

25. You can customize the way your page code appears in Code view. You can: –wrap the lines of code –display or hide line numbers and hidden characters –highlight invalid code so you can fix it Using Code Tools to View and Edit Rules

26. You can customize the way your page code appears in Code view. You can: –have different code types appear in different colors. –indent lines of code. –display syntax error alerts. Using Code Tools to View and Edit Rules

27. As your pages get longer and the code more complex, you can collapse sections of code. Collapsing code lets you temporarily hide code between two different sections of code that you would like to read together. Using Code Tools to View and Edit Rules

28. Selecting lines of code on the index page to collapse Clicking either minus sign will collapse the selected code Select the code in lines 8 through 18 (your line numbers may vary slightly) Using Code Tools to View and Edit Rules

29. If you are typing code directly into Code view, Dreamweaver can speed your work by offering you code hints. Code hints are lists of tags that appear as you type. Using Code Tools to View and Edit Rules

30. Using code hints As you begin typing code, the shortcut menu appears when Dreamweaver recognizes the code Double-click from the list to complete your tag Using Code Tools to View and Edit Rules

31. You can also convert one type of style to another. You can move an embedded style to an external style sheet or an inline style to either an embedded style or a style in an external style sheet. Using Code Tools to View and Edit Rules

32. Moving the embedded small_text rule to the external style sheet file Selected code for small_text rule Move CSS Rules command Using Code Tools to View and Edit Rules

33. Moving the embedded style to the external style sheet file The embedded small_text rule will move to the su_styles file Using Code Tools to View and Edit Rules