Overview: Create "normal" and "over"
"swap image" behavior in Dreamweaver. Test, publish to server.
Prepping for the lesson
- duplicate "upload/lesson6" folder, rename "lesson7"
- open "lesson5.psd", save as "lesson7.psd" (in
- crop links area
- delete unneeded layers
- duplicate type layer for links, rename "normal" and "over"
- select "normal" layer: layer > rasterize type
- filter > blur > motion blur
- jump to ImageReady
Slicing and optimizing in ImageReady
- slices > delete slices
- view > clear guides
- draw new horizontal guides for individual links
- slices > create slices from guides
- show optimized image (click tab)
- choose slice select tool: select > all slices (cmd+A)
- window > optimze: GIF 32 no dither
- file > save optimized as "links.htm" (HTML and images,
all slices, location="upload/lesson7")
- select only "over" slices
- file > save optimized as "links-over.htm" (images
only, select slices)
- examine optimized files
Adding rollovers in Dreamweaver
- define a new site (site > manage sites > new site): name=lesson7,
- open "index.htm" and "links.htm"
- copy table from "links.htm" to "index.htm" (replace
- select first link GIF file
- window behaviors: add "swap image" behavior
- save, file > preview in browser (F12)
- test, troubleshoot, publish (see instructions from Lesson 4)