create unordered and ordered lists cascading style sheets insert and align graphics image...
Post on 20-Dec-2015
226 views
TRANSCRIPT
Create Unordered and Ordered lists
Cascading Style Sheets
Insert and align Graphics
Image enhancements
Background images and site maintenance
Working with Textand Graphics
Cascading Style SheetsSave you time
Ensure consistency
2 Types of style sheets:
Internal style sheetsExternal style sheets(for applying to multiple pages)
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?
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”
Apply a Style
select textthen applya style…
…to apply class styleor CSS selector
…to apply HTML style
JPEG
16.7 million colors gradients and shadows
No transparency
No animationLossy everytime you save a jpeg, the file becomes
smaller and loses quality
Assets PanelStores & categorizes items you may re-use in
several HTML pages:Images
Colors
URLs links
Flash
Shockwave
Movies
Scripts
Templates
Library
Enhance Images
Borders
Space
Alternate TextModify the image and image sizeusing an image editing program
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