Web Design – Assignment 4

Watch it Here

In Photoshop:

(If you need to reset Adobe Photoshop from previous users settings, launch it with command + shift + option)

1. Create a new image 600 pixels wide, 90 pixels tall, & 72 dpi

2. Type:

-home winter spring summer fall
-adjust size of text to fit width

3. using the crop tool, crop the height to remove excess negative area

4. Select the slice tool on your tool bar (looks like the exacto knife) Slice text 4 times to divide the image into 5 individual images.

5. Select:

file> save optimized as >

and save your file as “navigation.htm” in a new folder “a4”

Switch to Dreamwever open up navigation.htmlto view what you have done. (late we will edit it.)

Return to Photoshop

6. Change the color of your text.

7. Select:

file> save optimized as >

and save your file as “navigation2.htm” in a new folder “a4”

 

CREATE ROLLOVER IMAGES

Switch to Dreamweaver.
8. open file navigation.htm

9. Select the image “home” making note of the widht and the height, then Delete it.

10. Keeping your cursor in the cell, add the cell hieght/width in the properties pallet (this should be the same dimmensions as the image you just deleted.)

11. Nest, insert roll over image

>insert >Image Objects > Rollover Image

-Image name: Home
-Original image: images/navigation_01.gif
-Rollover image: images/navigation2_01.gif
-Alt text: The Four Seasons
-When clicked, go to URL: index.htm

navigation-rollover

>select OK

12. Repeat this step for each navigation image, changing the image name, alt text and the URL to reflect the next page (eg, Winter, This is the Winter page & winter.html)


CREATE ANIMATED GIF

In Photoshop

13. Open up the image “winter.jpg” “summer.jpg” “spring.jpg” “fall.jpg”

14. Select the image “spring.jpg”, “select all” “copy” and paste this image on “fall.jpg”

15. Copy “summer.jpg” & “winter.jpg” onto fall.jpg

(all images should be on seperate layers of the fall.jpg.

16. Open the timeline pallet.

17. Choose “Create Frame Animation” and select it.

18. Select the slide and change the time to .5 sec

19. Select the “duplicate slide” from the animation pallet.

20. From the layers pallet, hide layer 3.

21. Select the “duplicate slide” from the animation pallet.

22. From the layers pallet, hide layer 2.

23. Select the “duplicate slide” from the animation pallet.

24. From the layers pallet, hide layer 1.

25. Select:

file> save for web >

and save your file as “animation.gif” in the folder “a4/images”

 

Switch to Dreamweaver

26. Under the menu, insert the image seasons.gif

27. Save this file as index.htm in the folder “a4”

28. Delete the “seasons.gif”, insert the image “fall.jpg” from your “a1/images” folder.

29. Save this as fall.htm in the a4 folder.

30. Repeat this to create the summer and fall pages, then reopen each file to ad the text below each image and the page title to resemble the first project.