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

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

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

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

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.

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

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

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

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

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

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

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

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

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.

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

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

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)

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

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

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

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

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

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

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

Chapter 4 Adding Images

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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" />

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

Assignment 2