Download Creating Web Navigation In Fireworks - Manual | CSIS 116 and more Lab Reports Computer Science in PDF only on Docsity!
Name _______________________________
Lab 6 – Creating Web Navigation in Fireworks
Note : Some of the steps in this lab are not detailed. Ask your instructor if you have trouble with a specific step.
Introduction
Fireworks is both an illustration program and an image editor. However, its specialty is creating graphics for web pages. Although it does have some basic image editing features, Fireworks is primarily a tool for creating web graphics such as banner ads, logos, hover buttons, pop-up menus, and navigation elements.
Task 1: Warm-up Creating Super-Cool Logos!
First, create the following folder: z:/public_html/lab6/ Be sure to save all or your work in your lab6 folder. Your final logo will look like the picture below:
1. Create a new document; 600 X 400 Pixels ; white background. 2. Open a web browser and go to http://www.google.com. 3. Do an image search and try to find two pictures of The Golden Girls. 4. Copy and paste the two pictures in to your Fireworks document. 5. Use the Pointer Tool to resize them to approximately 150 X 150 Pixels each 6. Click on one of the images; In the Properties Area add an Effect. Select the Adjust Color Hue/Saturation.
Set the Saturation to (negative) -. This will make the picture black and white.
7. Repeat this process to make the second picture black and white. 8. Use the Rectangle Tool to make a rectangle (approximately 300 X 100 Pixels ) 9. Place the rectangle above the two images. 10. Use the Gradient Tool to create a horizontal color gradient from left to right on the rectangle you just created (You will probably need help from your instructor). Use one of the pre-set gradients (Blue-Red-Yellow) 11. Click on the rectangle; In the Properties Area , add an Effect. Select Shadow and Glow Drop Shadow This will add a drop shadow on the rectangle. 12. Use the Text Tool and place the label “ TheGoldenGirls ” on top of the rectangle. 13. Resize the font so that the text takes up most of the rectangle. Use a white font for the words “The” and “Girls” Use a yellow font for the word “Golden” 14. Make sure your logo looks somewhat similar to the picture above. 15. Save the original (.png) file to your lab6 folder. Name the file “ task1.png ” 16. Go to the Optimize Panel and change the export options to create a JPEG image. 17. Change the quality level to 100. 18. Export the image as a .jpg file. Name the file “ task1.jpg ” 19. Show your instructor the two images you just created. Instructor _____________________________________
15. You can preview the hover effects by clicking on the Preview Tab 16. Save the image as “ task2.png ” 17. Export the image as “ task2.html ” and make sure you put the images in a subfolder called “ images ” 18. Open a web browser and go to http://www.cs.siena.edu/~userid/lab6/ 19. Open the task2.html file and test the four button states. 20. Finally, put an “X” next to the greatest Golden Girl of all time. Check with your instructor to make sure you made the correct choice. __ Estelle Getty __ Rue McClanahan __ Bea Arthur __ Betty White
Task 3: Creating a Button Menu
1. Open the task2.png file you just created. 2. Select File Save As and save the document as task3.png. 3. Select the Resume button you created. In the Properties Area add a Link to the absolute URL of your resume. It should be http://www.cs.siena.edu/~userid/resume/. Add “My Resume” as Alternate Text 4. Clone the Resume button by selecting Edit Clone. 5. Move the copy to the left of the Resume button Change the copy’s text label to “Home”
Change the link of the Home button to http://www.cs.siena.edu/~userid/ Change the Alternate text to “My Home Page”
6. Clone the Resume button 3 more time and create the following buttons Label: Courses; Alt: “My Courses”; Link: http://www.cs.siena.edu/~userid/courses/ Label: Samples; Alt: “Sample Course Work”; Link: http://www.cs.siena.edu/~userid/samples/ Label: Portfolio; Alt: “Web Design Portfolio”; Link: http://www.cs.siena.edu/~userid/portfolio/ 7. Center the 5 buttons in the document. Make sure they are aligned to your liking. Use the Crop Tool to resize the canvas around the button (see below) 8. Save the document as “ task3.png ” 9. Export the document as “ task3.html ” and be sure to save the images in a folder called “images” 10. Open the task4.html file in a web browser. 11. Make sure the Over and Down effect work. Make sure all the links work. Make sure all the alternate text appears. 12. Go back to Fireworks and open the task3.png file (if its not already open). 13. Double click on any of the buttons you created 14. Change the appearance of the buttons to your liking. Note that you can add effects such as a bevel, a shadow, or a glow to the rectangle. This will change the appearance of all of the buttons. 15. Clones are not independent copies. Clones can have different Text labels and different Links, but they all share the same basic appearance. Cloning allows you to change the appearance of all of your buttons simultaneously. 16. Save the file again and export it again.
7. Click on the Advanced Tab and change the Menu Delay to 100ms Note: Menu Delays are designed to keep the menu visible after clicking the Pop-up Menu. A 1000ms = 1 second. 8. Click on the Position Tab and set the menu position to the Bottom of the Slice. 9. Save the document as task4.png and Export it as task4.html. 10. Open the task4.html file in a web browser 11. Make sure the Pop-up Menu is working and test the By Subject and By Semester hyperlinks. 12. Go back to Fireworks and add Pop-up Menus to the Samples Button and the Portfolio Button. Recall that Samples section will have at least three course work samples. The Courses Pop-up Menu will display direct links to the three samples. Later you can add the appropriate hyperlinks. Also, Recall that the Portfolio section will have at least three web design samples. The Portfolio Pop-up Menu will display direct links to the three samples. Later you can add the appropriate hyperlinks. Note: Surprisingly, you can NOT clone a Pop-up Menu. Thus, if you decide to change the appearance of one of the Pop-up Menus, you will have to manually repeat the appearance changes to all your Pop-up Menus. 13. Save your final menu as task4.png and export it as task5.html. 14. Open your root index.html file in Dreamweaver and remove your old Button menu. 15. Replace your old button menu with the new one you just created by selecting Insert Interactive Images Fireworks HTML and inserting the code from task5.html. 16. Show your instructor your root index.html, which should have a working Hover-button menu with three Pop-up menus. Instructor _____________________________
Task 6: Creating a Swap Image Menu
- Create a new document; 250 X 500 Pixels ; white background.
- Create the following buttons on the left side of the document. Button creation process: Create a rectangle (75 X 25) and text label (12pt Font). Group them as one object. Convert the object to a Symbol (choose the Button option) Clone the button and place each clone accordingly Finally, change the button Label, Alt. text, and Link accordingly.
- Use the Slice Tool to draw a slice next to the three buttons.
- Open the Frames Area (Window Frames)
- Create three new frames by clicking the New Frames button
- Go to Frame 2 add the following text.
- Go to Frame 3 add the following text.
