Working with Text and Graphics
description
Transcript of Working with Text and Graphics
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