Creating a button with rollover effect (PhotoShop or Image ready)

1. Make a button in PhotoShop or Image Ready. Design it in its “normal” state
2. Using PhotoShop save as .jpg or .gif or using Image Ready save as optimized putting it in your web folder
3. From the same file, create the “over” state (can be done using styles)
4. Repeat step 2
5. In Dreamweaver create and save html file in your web folder.
6. Click the “rollover image” icon on the insert pallet. (In Dreamweaver)
7. Set the original image (from step 2)
8. Set the “over-state” image (from step 4)

Linear Animations (using Image Ready)

1. Create the object to be animated on a layer
2. Open the animation pallet (window → animation)
3. Move object to where you want the animation to start
4. Copy the object to another layer and move to where you want the animation to end
5. Shift click the two frames and select “tween” from the flyout menu
6. To make the animation go the other way also, use the flyout menu for:

• Copy frames
• Paste frames
• Reverse frames

Slices (using Image Ready)

1. Open or create an image
2. With the slice tool, create all the slices you need to control
3. With slice select tool, highlight a slice, open the slice pallet and enter a URL
4. Select all your slices (Apple A)
5. Set “optimize” settings
6. Save as optimized as to your web page folder, this will create an HTML file and graphics folder
7. In Dreamweaver, open the HTML created in step 7
8. Either work in this file or open a new file, save it in the same location as the file in step 7

Disjointed Rollover (using Image Ready)

1. Create your image. Use many layers. Adjust your layers on & off as needed in order to create the “normal view”
2. Create your slices
3. On the web content pallet (windows → web content) choose, “select a slice” and choose “new rollover state”
4. Toggle layers on or off as needed
5. Next to the “over state” click and drag to where the rollover should happen
6. Repeat 3-5 as needed
7. Save optimized the html and Images. Note: In Dreamweaver add the content for the page to the file Image ready saved versus saving to another page

ImageReady

Import a PhotoShop document. Use ImageReady to make slices and optimize your page

Dreamweaver

• To set up a new site: → site → new site → use the advanced tab
• If there is white that shows in the cells of an ImageReady document, align top in the cell and change the cell size
• When making a template go to Insert → template objects → editable region to say if you want an area locked so it cant be changed or not

To set up your web site:

• Before uploading the website, use spell check and proof read the documents.
• Check the website on multiple computers and make sure every graphic comes in and all the links work
• Use the instructions from the following page to set up the site
• To set up a Dreamweaver web site go to www.wiu.edu/guava
• To make changes to a document after it has been uploaded:
• Make changes → save the changes → then use the ↑↓ symbol and “put” to upload the changes