Create Unordered and Ordered lists

1
Working with Textand Graphics
OVERVIEW

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

2
Text as Lists
INTRODUCTION

• Breaks up text
• Increases readability
• 3 Types of Lists
• Unordered
• Ordered
• Definitions

3
Cascading Style Sheets
INTRODUCTION

• Save you time
• Ensure consistency
• 2 Types of style sheets
• Internal style sheets
• External style sheets(for applying to multiple
  pages)

4
Graphics
INTRODUCTION

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

5
Lists
LESSON 1

• 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?

6
Create a List
LESSON 1

• Select paragraphs of text to be included in list
• 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?

7
Property Inspector
LESSON 1
ordered
unordered
List Item properties
8
List HTML
LESSON 1
unordered list square bullets
line items
close line item
lt/ulgt close ltulgt
(not shown)
9
Cascading Style Sheets
LESSON 2
selector
declaration
property
value
10

LESSON 2
Internal CSSs save you some time
Change a property here
Internal style sheet

ltselectorgttextlt/selectorgt
ltselectorgttextlt/selectorgt
all text using that selector is updated
ltselectorgttextlt/selectorgt
ltselectorgttextlt/selectorgt
ltselectorgttextlt/selectorgt
11
External CSSs save you time
LESSON 2
Change a property here
external (.css)
.html
every page using the style sheet is
automatically updated
12
Cascading
LESSON 2
All styles are applied, but the property closest
to the text wins!
external
internal
1. external style sheet
2. internal style sheet
(These property values override style sheets)
3. inline
ltinline formattinggtAffected Textlt/inline
formattinggt
13
Create a Style Selector
LESSON 2
List changes According to Type
class properties can override any selector
properties
Standard HTML tags get a new look
4 link states link visited hover active
internal
external
14
Declare a Style
LESSON 3
.bullets
font properties
15
Apply a Style
LESSON 2
select text then apply a style
to apply HTML style
to apply class style or CSS selector
16
Apply an external style sheet
LESSON 2
Click to apply an external style sheet to
this page
17
Insert and Align Graphics
LESSON 3

• File formats
• Assets panel
• Image alignment

18
Graphic file formats
LESSON 3

• GIF giff (not jiff)
• JPEG jay-peg
• PNG ping

19
GIF
LESSON 3

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

20
JPEG
LESSON 3

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

21
PNG
LESSON 3

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

22
Assets Panel
LESSON 3

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

23
Assets Panel
LESSON 3
favorites
thumbnail
categories
24
Adding a graphic from the Site or Assets panel
LESSON 3
drag it!
25
Adding a graphic to the Assets panel
LESSON 3

• Proofreading
• Window size
• Links

26
Aligning Images
LESSON 3
image alignment
Text and image Alignment (ltdivgt)
27
Enhance Images
LESSON 4

• Borders
• Space
• Alternate Text
• Modify the image and image sizeusing an image
  editing program

28
Borders
LESSON 4
Border thickness
29
Space horizontal and vertical
LESSON 4
Vertical space
Horizontal spce
30
Resizing Graphics
LESSON 4

• Dont resize graphics within a page
• Smaller file size unnecessarily large
• Larger image loses quality
• Reset Size matches height and width to source

31
Background Images
LESSON 5

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

32
Insert a Background Image
LESSON 5
select an image
33
Background Imageusing Styles
LESSON 5
image
tiling
follow?
positioning
34
Remove non-Web-safecolors from Web site
LESSON 5
Web-safe color values include 3 pairs
not safe!
35
Unit Summary
SUMMARY

• Create lists
• Create, apply and editCascading Style Sheets
• Insert and Align Graphics
• Add links
• Enhance images
• Add Background Image
• Remove unused images non-Web colors