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

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

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

4. Cascading Style Sheets
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

5. Creating and Formatting Lists
Lesson 1: Create Unordered and Ordered List
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.

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

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

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

9. Cascading Style Sheets (CSS)
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
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
Class – used to format any page element
ID & Tag – used to redefine an HTML tag
Compound – used to format a selection
CSS saving options
External style sheet – saved as a separate file
saved as .css and stored in directory structure of website
Internal or embedded – part of head content of individual page
Inline style – part of the body of HTML code

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

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

12. Using the CSS Styles Panel
Lesson 2: Create, Apply, and Edit Cascading Style Sheets
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

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

14. Understanding CSS Style Sheet Code
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.

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

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

17. External and Embedded Style Sheets
Lesson 3: Add Rules and Attach Cascading Style Sheets
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)

18. Attaching a Style Sheet to a Page
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:
Click Style Sheet button on CSS Styles panel (opens Attach External Style Sheet dialog box)
Check to verify Add as Link option is selected
Browse to locate the file you want to attach
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

19. Attaching a Style Sheet to a Page – cont.
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

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

21. Coding Tools in Dreamweaver
Lesson 4: Using Coding Tools to View and Edit Styles
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

22. Using Coding Tools to Navigate Code
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

23. Using Code Hints to Streamline Coding
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

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

25. Chapter 4
Adding Images

26. Chapter 4 Lessons Introduction Insert and align images
Enhance an image and use alternate text
Insert a background image and perform site maintenance
Add graphic enhancements

27. Using Images to Enhance Web Pages
Introduction
Using Images to Enhance Web Pages
Graphics refer to the appearance of most non-text items on a web page, such as:
Photographs
Logos
menu bars
Flash animations
Charts
background images

28. Using Images to Enhance Web Pages
Introduction
Using Images to Enhance Web Pages
Use graphics sparingly
Can complement content of pages
Store images in separate folder (assets)
Three web graphic file formats:
GIF (graphics interchange format)
Maintains transparency, can include animations
JPEG (joint photographic experts group)
Good for photo images
PNG (portable network graphics)
Can display many colors, maintains transparency

29. The Assets Panel Lesson 1: Insert and Align Images
Located in the Files panel group
Displays all the assets in a website
Has Favorites button
Contains nine categories
Buttons:
Images
Colors
URLs
SWF
Shockwave
Movies
Scripts
Templates
Library

30. The Assets Panel – cont. Lesson 1: Insert and Align Images
Site option button
Favorites option button
Thumbnail of selected image
Category buttons
List of images in website
Refresh Site List
Drag any panel border or corner to resize

31. Image Placeholder Lesson 1: Insert and Align Images
You can insert an image placeholder to hold the image position on the page
An image placeholder is a graphic the size of an image you plan to use
To insert an image placeholder, use the Image Placeholder command on the Image Objects menu

32. Aligning Images Lesson 1: Insert and Align Images
Aligning images means to position them in relation to other elements on the page
Default:
bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph
Alignment settings will be added by using CSS rules

33. Enhancing Images Lesson 2: Enhance an Image and Use Alternate Text
Improving the appearance of an image
Changes to image can be done using image editing software such as:
Adobe Fireworks (default)
Adobe Photoshop

34. Borders and Horizontal and Vertical Space
Lesson 2: Enhance an Image and Use Alternate Text
Borders and Horizontal and Vertical Space
Borders
Frames that surround an image
Added in CSS
Horizontal and Vertical space
Blank space around the image
Helps image stand out
Does not affect size of image
Added as Margin in CSS

35. Alternate Text Lesson 2: Enhance an Image and Use Alternate Text
Text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it
Makes your web page viewer-friendly and handicapped accessible
The first checkpoint listed in the Web Content Accessibility Guidelines (WCAG), Version 2.0, from the World Wide Web Consortium (W3C)
The twelve WCAG guidelines are grouped together under four principles:
Perceivable
Operable
Understandable
Robust

36. Lesson 3: Insert a Background Image and Perform Site Maintenance
Background Images
Provides page depth and visual interest to page
Used in place of background colors
Avoid inserting them on web pages where they would not provide the contrast necessary for reading page text
Use either a background color or a background image, but not both
Keep file size small
Use a tiled image
Small graphic that repeats across or down a page
Or a larger non-tiled image
Use background images or colors for sections of pages

37. Managing Images Adding and removing background images
Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Images
Adding and removing background images
Delete unused files from assets folder
Store original unedited copies of website images files in separate folder outside the assets folder
If you edit the original files, resave them using a different name

38. Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Colors
You can use the Assets panel to locate non-web-safe colors in a website
Non-web-safe colors are colors that may not be displayed uniformly across computer platforms
They still may be used
Experiment by choosing colors outside the default color palettes to create a color scheme that complements your website content
Use the eyedropper tool FPO to pick up a color from a page element, such as the background of an image

39. Lesson 3: Insert a Background Image and Perform Site Maintenance
Managing Colors – cont.
Preview of the color that will be used if you click here with the Eyedropper
Color code changes as you move the Eyedropper over the image

40. Lesson 4: Add Graphic Enhancements
Thumbnail Images
A thumbnail image is a small version of a larger image allows more images to fit on the page
Why are they used:
display a small image on a page with an option for the viewer to click on the image to display a larger image
It is done both to conserve space and to keep the page size as small as possible

41. Lesson 4: Add Graphic Enhancements
Favorite Icons
Icon that appears with your page title when a page is bookmarked that is used to represent your site
Called favicon
Steps to Create:
Create an icon that is 16 pixels by 16 pixels
Save the file as an icon file with the .ico file extension in your site root folder
Add HTML code to the head section of your page, above your <title> code, to link the icon file (example:<link rel="shortcut icon" href="starfish.ico" type="image/x-icon" />

42. Lesson 4: Add Graphic Enhancements
Protecting Images
Prevent Website viewers from saving images from your site by:
Adding JavaScript Code to prevent right clicking or appearance of shortcut menu
Adding image as a table, cell, or CSS block background and placing a transparent image on top of it

43. Assignment 2