Chapter 3 Working with Text and Cascading Style Sheets

Chapter 3 Lessons Introduction 1.Create unordered and ordered lists. 2.Create, apply, and edit Cascading Style Sheets. 3.Add rules and attach Cascading Style Sheets. 4.Use coding tools to view and edit rules

Formatting Text as Lists Breaks up text Increases readability Three types of lists: – Unordered – Ordered – Definitions Introduction

Cascading Style Sheets Formatting instructions that control the appearance of content on a web page Benefits: – Saves you time – Ensures consistency – Can apply formatting attributes to an entire site Introduction

Creating and Formatting Lists Unordered or bulleted lists – Preceded by bullet or small dot or similar icon (Click List Item in Property Inspector to modify) – Select paragraphs of text to be included in list  Click the Unordered List button in HTML Property inspector – Default bullet style is a round dot Ordered or numbered lists – Preceded by numbers or letters in a sequence (Click List Item in Property Inspector to modify) – Select paragraphs of text to be included in list  Click the Ordered List button in HTML Property inspector – You can apply numbers, Roman numerals, lowercase letters, or uppercase letters to an ordered list. Lesson 1: Create Unordered and Ordered List

Expanded Property Inspector Property Inspector expanded to full size Lesson 1: Create Unordered and Ordered List Unordered (bulleted) list button List item (Properties) button Click arrow to collapse Property inspector Ordered (numbered) list button

Formatting a List Style Lesson 1: Create Unordered and Ordered List List type list box Ordered/Unordered list styles

Creating Definition Lists Definition lists do not have bullets Select paragraphs of text to be included in list Click Format  List  Definition List Lesson 1: Create Unordered and Ordered List

Cascading Style Sheets (CSS) CSS made up of rules – Define the formatting attributes for individual styles – Are classified by where the code is stored CSS also classified by type 1.Class – used to format any page element 2.ID & Tag – used to redefine an HTML tag 3.Compound – used to format a selection CSS saving options 1.External style sheet – saved as a separate file saved as.css and stored in directory structure of website 2.Internal or embedded – part of head content of individual page 3.Inline style – part of the body of HTML code Lesson 2: Create, Apply, and Edit Cascading Style Sheets

New CSS Rule Dialog Box Lesson 2: Create, Apply, and Edit Cascading Style Sheets Class option for Selector Type New style name Rule Definition list arrow

Cascading Style Sheet File Lesson 2: Create, Apply, and Edit Cascading Style Sheets New Cascading Style Sheet file

Using the CSS Styles Panel To create, edit, and link a CSS style Apply CSS styles to a single page or all pages in a website Used for managing your styles Lesson 2: Create, Apply, and Edit Cascading Style Sheets

Advantages of Style Sheets 1.Save an enormous amount of time 2.Uniform look 3.Cleaner code 4.Separates development of content from presentation 5.Compliant with current accessibility standards Lesson 2: Create, Apply, and Edit Cascading Style Sheets

Understanding CSS Style Sheet Code The selector is the name of the tag to which the style declarations have been assigned. The declaration consists of the property and the value. Lesson 2: Create, Apply, and Edit Cascading Style Sheets

Applying a CSS Rule 1. Select Text Lesson 2: Create, Apply, and Edit Cascading Style Sheets 2. Change Properties Inspector to View CSS 3. Click Targeted Link to apply rule to selected text

Editing a Rule A Rule Can be edited either in: – CSS Style Panel – Code View Lesson 2: Create, Apply, and Edit Cascading Style Sheets 2. Select Property to Edit 1.Select Rule from CSS Styles Panel 3. Choose Modification from list arrow

External and Embedded Style Sheets External.css files are stored outside of the web page Embedded style sheets created automatically by Dreamweaver and are stored within web page To embed a style sheet: – Access the New CSS Rule Dialog Box – Under Rule Definition, select This Document Only Code stored in Head content of file Named style1, style2, etc. (can be renamed) Lesson 3: Add Rules and Attach Cascading Style Sheets

Attaching a Style Sheet to a Page Created to ensure a consistent appearance to your site To attach a style sheet: 1.Click Style Sheet button on CSS Styles panel (opens Attach External Style Sheet dialog box) 2.Check to verify Add as Link option is selected 3.Browse to locate the file you want to attach 4.Click OK New rules will appear in CSS Styles panel to be applied to text on page If you make change to rule it affects every objected formatted by it Lesson 3: Add Rules and Attach Cascading Style Sheets

Attaching a Style Sheet to a Page – cont. su_styles.css style sheet selected Link option button Lesson 3: Add Rules and Attach Cascading Style Sheets

Related Files 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. Lesson 3: Add Rules and Attach Cascading Style Sheets CSS File HTML File

Coding Tools in Dreamweaver Coding toolbar is displayed on the left side of the Document window – Designed to remain stationary – Cannot move it, but you can hide it Remember that you have several View options you can also use while viewing your code. – Word Wrap, Line Numbers, Hidden Characters, Highlight Invalid Code, Syntax Coloring, and Auto Indent Lesson 4: Using Coding Tools to View and Edit Styles

Using Coding Tools to Navigate Code Collapse sections of code as your page gets longer and code more complex. Using the Collapse Full Tag or Collapse Selection buttons on the Coding toolbar will allow you to look at two different sections of code that are not adjacent to each other in the code Apply comments to add documentation to your code Code containing errors can be identified and fixed by using the Highlight Invalid Code command Lesson 4: Using Coding Tools to View and Edit Styles

Using Code Hints to Streamline Coding As you are typing code, Dreamweaver will recognize the tag name and offer you choices to complete the tag simply by clicking a tag choice in the menu Lesson 4: Using Coding Tools to View and Edit Styles

Converting Styles To convert one type of style to another you can: 1.In Code View  select style  right click  point to CSS Styles and then Move CSS Rules 2.In CSS Styles Panel  select style  right click  Move CSS Rules 3.In CSS Styles Panel  select style  drag to new location Lesson 4: Using Coding Tools to View and Edit Styles