Chapter 3 Working with Text and Cascading Style Sheets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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