Create Unordered and Ordered lists

Cascading Style Sheets

Insert and align Graphics

Image enhancements

Background images and site maintenance

Working with Textand Graphics

Breaks up text

Increases readability

3 Types of Lists:

Unordered

Ordered

Definitions

Text as Lists

Cascading Style SheetsSave you time

Ensure consistency

2 Types of style sheets:

Internal style sheetsExternal 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

closeline item

</ul>close <ul>

(not shown)

Cascading Style Sheetsselector

declaration

property

value

Internal style sheetChange a property here…

<selector>text</selector>

Internal CSSs save you some time…

<selector>text</selector>

<selector>text</selector>

<selector>text</selector>

<selector>text</selector>

…all text using thatselector is updated

External CSSs save you time…

external(.css)

.html

Change a property here…

…every page using the style sheetis automatically updated

Cascading…

<inline formatting>Affected Text</inline formatting>

external

internal

3. inline

1. external style sheet

2. internal style sheet

All styles are applied, but the propertyclosest to the text wins!

(These property values override style sheets)

Create a Style Selector

external internal

“class” propertiescan override anyselector properties

Standard HTMLtags get a new look

4 link states:linkvisitedhoveractive

List changesAccording to “Type”

Declare a Style

font properties

.bullets

Apply a Style

select textthen applya style…

…to apply class styleor CSS selector

…to apply HTML style

Apply an external style sheet

Click toapply anexternal stylesheet to thispage

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 colors1 transparent color per image

Animate gif files

JPEG

16.7 million colors gradients and shadows

No transparency

No animationLossy 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 PanelStores & 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 imageAlignment (<div>)

Enhance Images

Borders

Space

Alternate TextModify the image and image sizeusing an image editing program

Borders

Border thickness

Space horizontal and vertical

Verticalspace

Horizontalspce

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: smallImage size: small for tiling

Image size: large use style for white space, no tile and move with scroll

Affects Readability

Insert a Background Image

selectan image

Background Imageusing Styles

image

tiling

follow?

positioning

Remove non-Web-safecolors from Web site

Web-safecolor valuesinclude 3 pairs…

…not safe!

Unit SummaryCreate listsCreate, apply and editCascading Style SheetsInsert and Align Graphics Add linksEnhance imagesAdd Background ImageRemove unused images & non-Web colors