Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with Text and Graphics

Breaks up text Increases readability 3 Types of Lists: Unordered Ordered Definitions Text as Lists

Cascading Style Sheets Save you time Ensure consistency 2 Types of style sheets: Internal style sheets External style sheets (for applying to multiple pages)

Graphics Not too many! Not too few! Store in Assets folder 3 Web graphic file formats: GIF JPEG PNG

Lists Unordered bulleted Ordered numbered Definition term + indented paragraph This slide is an example of an unordered list. What characteristics of this list improve readability? What other formatting might improve its readability?

Create a List 1. Select paragraphs of text to be included in list 2. Click List button in Property Inspector This slide is an example of an ordered list. What characteristics of this list improve readability? What other formatting might improve its readability?

Property Inspector unordered ordered List Item properties

List HTML unordered list “square” bullets line items close line item close (not shown)

Cascading Style Sheets selector declaration property value

Internal style sheet Change a property here… text Internal CSSs save you some time… text …all text using that selector is updated

External CSSs save you time… external (.css).html Change a property here… …every page using the style sheet is automatically updated

Cascading… Affected Text external internal 3. inline 1. external style sheet 2. internal style sheet All styles are applied, but the property closest to the text wins! (These property values override style sheets)

Create a Style Selector external internal “class” properties can override any selector properties Standard HTML tags get a new look 4 link states: link visited hover active List changes According to “Type”

Declare a Style font properties.bullets

Apply a Style select text then apply a style… …to apply class style or CSS selector …to apply HTML style

Apply an external style sheet Click to apply an external style sheet to this page

Insert and Align Graphics File formats Assets panel Image alignment

Graphic file formats GIF “giff” (not “jiff”) JPEG “jay-peg” PNG “ping”

GIF 256 solid colors 1 transparent color per image Animate gif files

JPEG 16.7 million colors gradients and shadows No transparency No animation Lossy everytime you save a jpeg, the file becomes smaller and loses quality

PNG 16.7 million colors gradients and shadows 256 transparent colors per image Lossless

Assets Panel Stores & categorizes items you may re-use in several HTML pages: Images Colors URLs links Flash Shockwave Movies Scripts Templates Library

Assets Panel categories thumbnail favorites

Adding a graphic from the Site or Assets panel drag it!

Adding a graphic to the Assets panel Proofreading Window size Links

Aligning Images image alignment Text and image Alignment ( )

Enhance Images Borders Space Alternate Text Modify the image and image size using an image editing program

Borders Border thickness

Space horizontal and vertical Vertical space Horizontal spce

Resizing Graphics Don’t resize graphics within a page –Smaller: file size unnecessarily large –Larger: image loses quality Reset Size matches height and width to source

Background Images File size: small Image size: small for tiling Image size: large use style for white space, no tile and move with scroll Affects Readability

Insert a Background Image select an image

Background Image using Styles image tiling follow? positioning

Remove non-Web-safe colors from Web site Web-safe color values include 3 pairs… …not safe!

Unit Summary Create lists Create, apply and edit Cascading Style Sheets Insert and Align Graphics Add links Enhance images Add Background Image Remove unused images & non-Web colors