Adobe Fireworks and Dreamweaver CS4

1. Adobe Fireworks and Dreamweaver CS4 Making Rollover Buttons Search Engines Project

2. SET UP! • Establish six search engine web sites that you want to link to. • Start by creating a button for the one that has the LONGEST name • TIP: If you create the button with the longest name, all subsequent buttons will fit on the button. You will not have to stretch and resize the button and your buttons will be consistently the same size. • Create a subfolder to the Graphics folder called Search Engines. • Create a subfolder to Search Engines called Graphics (to store all graphics files).

3. Set up the Canvas • Open Fireworks. • Go to File, New • Enter the Width and Height of the canvas in pixels • Set the Canvas Background color or choose transparent

4. Canvas Size • Width to 400 and the Height to 300 pixels • Select a custom color background. • Use 800 x 600 as a guideline since that is the lowest resolution still being used, typically.

5. Add Text • Select the Text Tool in the Tools panel on the left side (T) • Click on the canvas and key your name

6. Property Inspector panel • Modify the text by using the Property Inspector box at the bottom of the screen • Click on the White Pointer in the Tools panel (subselection tool) • Select a different font, font size, font color

7. Subselection tool Font Color Font Size Font

8. Add an Effect • Click on the + sign by Effects and play with the effects your can add to your text. • Experiment with many different effects and learn what you can do.

9. Create a Button Type Effect • Click on the Rectangle in the Vector tool section of the Tools panel. Notice the drop down arrow allows you to draw a variety of rectangular shapes • Draw the rectangle on top of the text graphic. • You may need to select the text graphic first with the white point (subselection tool)

10. Rectangle Properties, change color of rectangle here

11. Rounding Corners of a Rectangle • In the Properties Panel: • Enter a value from 0 to 100 in the Roundness box in the Property inspector and press Enter, or drag the pop-up slider

12. Send the Rectangle to the Back • Select Modify, Arrange, Send to the Back

13. Add an Effect to the Rectangle • Click on Effects, add a bevel effect.

14. To trim the canvas • Choose Modify > Canvas > Trim Canvas.

15. To save a new Fireworks document • Save in your Image Folder in your Fireworks folder • Choose File > Save As. • The Save As dialog box opens. • Browse to the desired location and type the filename. • You do not need to enter an extension; Fireworks will do that for you. • Click Save. (must be saved as .png) • (For this project, save to B232 Web Page Design/Graphics/Search_Engines/Graphics/button1_fw.png • ```````````

16. Then…create the “mouse on” graphic • Go to File/Save As… • Save the file as “button2_fw.png” • Go to File/Open • Open the “button1_fw.png” • Go to Window/Tile

17. Create rollover effect • Click on the text of button 2. • Change the color only. BE SURE NOT TO MOVE THE TEXT OR THE BUTTON WILL “JUMP” AND LOOK SLOPPY. • You can also change the color of any effect you have. • Re-save button 2.

18. Export each button separately • Choose a file format in the Optimize panel and select .gif as the format type. • Select button 1. • Choose File > Export to export the document. • Save as B232 Web Page Design/Graphics/Search_Engines/google1.gif. • Click on button 2. • Choose File > Export to export the document. • Save as B232 Web Page Design/Graphics/Search_Engines/google2.gif

19. Create additional buttons • Change the TEXT only (do not move the location of the text, though) to each of the names of your buttons. • Export each button as 1 or 2 as ou did with the google example.

20. Intro to Dreamweaver • Open Dreamweaver and identify parts of the screen with their purpose. • Create a new site in Dreamweaver—going through all the menus of site definition! • Create a new page in Dreamweaver. • Add features such as background color and link color in the Page Properties menu. • Use the pen dropper to match the background color of the web page to the Search Engines graphic background color.

21. Intro to Dreamweaver • Describe the different stages of links and setting up their colors (active, visited, rollover) • Use the panels and properties inspector to aid with web site development. • Add a page title. • View the website in the various views in Dreamweaver (code, design, code and design)

22. BUILD THE SEARCH ENGINES PAGE! • Save as index.html into B232 Web Page Design/Graphics/Search Engines/ • Insert/Image the title graphic created (title.gif) • Make sure to add alternative text when prompted and discuss purpose • Center graphic • Insert/HTML/Horizontal Rule • Insert table – 2 rows, 3 columns

23. TABLES DISCUSS THE FOLLOWING OBJECTIVES: • Insert and modify a table in Dreamweaver, including merging cells, changing cell padding/spacing, and cell alignment. • Use table properties to control the look of the web page and organize its content. • Understand the difference between pixel and % width for tables.

24. Continue with Project… • Insert/Image Objects/Rollover Image • Insert each button, linking to the appropriate web site. • Insert another Horizontal rule below the table to separate the footer. • Create an informational footer, including author’s name, the current date, and a contact email address (with link). • Spell check the web page.

25. Finishing • Use Preview in Browser/Device Central to preview mobile browser view. • Use Preview in Browser to preview the web page. • Test the functionality of a web page

28. Now practice!!!