Title: Adobe Photoshop 7'0 Design Professional
1(No Transcript)
2Working with Textand Graphics
OVERVIEW
- Create Unordered and Ordered lists
- Cascading Style Sheets
- Insert and align Graphics
- Image enhancements
- Background images and site maintenance
3Text as Lists
INTRODUCTION
- Breaks up text
- Increases readability
- 3 Types of Lists
- Unordered
- Ordered
- Definitions
4Cascading Style Sheets
INTRODUCTION
- Save you time
- Ensure consistency
- 2 Types of style sheets
- Internal style sheets
- External style sheets(for applying to multiple
pages)
5Graphics
INTRODUCTION
- Not too many!
- Not too few!
- Store in Assets folder
- 3 Web graphic file formats
- GIF
- JPEG
- PNG
6Lists
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?
7Create 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?
8Property Inspector
LESSON 1
ordered
unordered
List Item properties
9List HTML
LESSON 1
unordered list square bullets
line items
close line item
lt/ulgt close ltulgt
(not shown)
10Cascading Style Sheets
LESSON 2
selector
declaration
property
value
11 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
12External CSSs save you time
LESSON 2
Change a property here
external (.css)
.html
every page using the style sheet is
automatically updated
13Cascading
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
14Create 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
15Declare a Style
LESSON 3
.bullets
font properties
16Apply a Style
LESSON 2
select text then apply a style
to apply HTML style
to apply class style or CSS selector
17Apply an external style sheet
LESSON 2
Click to apply an external style sheet to
this page
18Insert and Align Graphics
LESSON 3
- File formats
- Assets panel
- Image alignment
19Graphic file formats
LESSON 3
- GIF giff (not jiff)
- JPEG jay-peg
- PNG ping
20GIF
LESSON 3
- 256 solid colors
- 1 transparent color per image
- Animate gif files
21JPEG
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
22PNG
LESSON 3
- 16.7 million colors gradients and shadows
- 256 transparent colors per image
- Lossless
23Assets Panel
LESSON 3
- Stores categorizes items you may re-use in
several HTML pages - Images
- Colors
- URLs links
- Flash
- Shockwave
- Movies
- Scripts
- Templates
- Library
24Assets Panel
LESSON 3
favorites
thumbnail
categories
25Adding a graphic from the Site or Assets panel
LESSON 3
drag it!
26Adding a graphic to the Assets panel
LESSON 3
- Proofreading
- Window size
- Links
27Aligning Images
LESSON 3
image alignment
Text and image Alignment (ltdivgt)
28Enhance Images
LESSON 4
- Borders
- Space
- Alternate Text
- Modify the image and image sizeusing an image
editing program
29Borders
LESSON 4
Border thickness
30Space horizontal and vertical
LESSON 4
Vertical space
Horizontal spce
31Resizing 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
32Background 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
33Insert a Background Image
LESSON 5
select an image
34Background Imageusing Styles
LESSON 5
image
tiling
follow?
positioning
35Remove non-Web-safecolors from Web site
LESSON 5
Web-safe color values include 3 pairs
not safe!
36Unit C 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