Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Instructor: Ray Brown Email: ray_brown@ncsu.edu Phone: 513-4003

Overview: This is a hands-on class demonstrating some of the advanced features of Macromedia Fireworks. It will involve some multi-tasking and self-direction. The course assumes that you have solid understanding of the basics of Fireworks and that you have a working knowledge of Dreamweaver. It is highly recommended that you first complete the Fireworks 1: Introduction to Macromedia Fireworks workshop as well as the Dreamweaver 1: Introduction to HTML Using Macromedia Dreamweaver workshop. Time is not allotted in this course to answer basic questions such as "What is Fireworks?" or "How do I create images in Fireworks?"

Objectives: Skills developed by this workshop include touching up photos, slicing images, and creating rollovers. By the end of this workshop you will have a practical model for using Fireworks and Dreamweaver to modify and enhance your Web pages and/or create a basic website.

Table of Contents: Photo Magic from the Scanner to the Web.....................................2 Chop, Chop, Chop slicing graphics ................................................3 Magical Buttons creating rollover images ......................................5 Creating Additional Pages Put it all together .................................7

Page 1

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Photo Magic - going from the scanner to the Web

Step 1: Open the file 1. Open the file from the floppy called italy.jpg. 2. From the View Menu, choose Fit All.

Step 2: Modify the graphic We are going to change the brightness and contrast of the graphic first, then change its size. 1. From the Filters Menu, choose Adjust Color > Brightness/Contrast... 2. Change the Brightness to 10 and the Contrast to 30, then click OK. 3. From the Modify Menu, choose Canvas > Image size. 4. Make sure the Constrain Proportions and Resample Image boxes are checked.

5. Change the width to 300, the height will change to 200 automatically.

Step 3: Export the graphic 1. Optimize the graphics using the techniques you learned in Introduction to Fireworks. 2. Choose File > Export to export the graphic with the export settings you chose. 3. Save the file as bridge.jpg.

Step 4: Save a PNG version of the file 1. Choose File > Save as. Name the file bridge_original.png and click Save. Remember you will need to open this file if you want to make changes to the graphic, then export it as bridge.jpg.
Page 2

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Chop, Chop, Chop - slicing a graphic for better optimization

In this exercise we will use the image that we modified and resized in the previous section to create a course banner. When we finish creating the banner, we will slice it and export it. Step 1: Set up the canvas 1. Choose File > New. 2. Set the width to 760 and the height to 100. 3. Under Canvas color, click Custom and choose a background color for your banner. Step 2: Cut and Paste in your image 1. Choose File > Open. Select one of the images from the fw2 folder that goes with this workshop.

2. Choose Select > Select All or press Ctrl+A on your keyboard. 3. Click on the window where your banner is, then press Ctrl+A or Edit > Paste.

4. Choose the Transform tool and resize the graphic to fit on the canvas. 5. Choose the Pointer tool and position the graphic to the right edge of the canvas.
Page 3

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Step 3: Add the text 1. Choose the Text tool. Choose a larger font (50-70) and type the course number of the course you are working on. Use the Pointer to position the text where you want it. 2. Use the Text tool again. Change the color and choose a font size that fits on your canvas (30-40). Use the pointer and position it below the course number (or above it, if that is what you prefer). This time type in the name of the course that you are working on. 3. Choose the Pointer tool and select both text objects. (Click on one, hold Shift and click on the other). 4. Locate the Effects Panel. Click the down arrow where it says None and choose Shadow and Glow > Drop Shadow. 5. Choose the Text tool. Change the font size to 16 and type in the Lecturer's name. Use the Pointer tool to position on the canvas. Step 4: Adding the NCSU logo 1. 2. 3. 4. 5. 6. 7. 8. 9. Open your web browser to http://www.ncsu.edu/templates.html. Right-click on the NCSU logo that best matches your banner. Choose Save Picture as or Save Image as. Save the file into the fw2 folder that you are using for this workshop. Go back to Fireworks. Choose File > Import. Choose the NCSU logo that you saved. Place your cursor where you want the logo to appear on your banner. Click once and the logo will be imported.

Step 5: Slice the graphic Using Fireworks to slice graphics is not really a difficult process. "Slicing" graphics basically, means that you cut a larger image into smaller images. This technique is useful because you can optimize each piece of a graphic separately, resulting in smaller, faster-loading files. You may also export some parts of an image as GIF and other parts as JPEG, to best use the strengths of each export format. More importantly, to those looking to design killer Web sites, you can add HTML properties and JavaScript behaviors to individual slices. 1. Choose the Slice tool . 2. Drag a rectangular slice over the first segment. (the picture part) 3. Draw a rectangular slice over the second segment. (ncsu logo)

Page 4

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Step 6: Optimize and Export each slice Now you see two separate green overlays on top of your image. We have just cut this graphic into 2 pieces. Each piece can now be optimized and exported individually with export setting and behaviors independent of the others.

1. With the Pointer tool, click on the first slice. Click Preview (just above canvas), notice the file size and download speed just above the canvas. Optimize it further if you are not satisfied with the default settings. 2. Click Original. With the Pointer tool, click on the second slice. Click Preview (just above canvas), notice the file size and download speed just above the canvas. Optimize it further if you are not satisfied with the default settings. 3. Click the Original tab to get back to edit mode. 4. Look at the Properties Panel.

5. Enter index.html for the link and "(Your course name) Home Page" for the Alt field. Press Enter on the keyboard. 6. Select the NCSU logo. 7. On the Properties Panel, enter http://www.ncsu.edu for the link and North Carolina State University for the Alt field. 8. Choose File > Export. 9. Type in a file name (course_title will work). Make sure the "Save as type" field says "HTML and Images." Click Save. We just created a graphic with HTML behaviors attached to it. Basically, Fireworks just allowed us to write some of the HTML necessary for the slices to act as hyperlinks. To add this element to your page is easy using Dreamweaver. In Dreamweaver you can use the Insert Fireworks HTML function to place the graphic and all the code in the proper position on the Web page. 1. 2. 3. 4. Open Dreamweaver. Insert a table of 760 pixels with two rows and two columns. Select and merge the two columns in the first row of the table. Place your cursor in the first row of the table, and then choose Insert > Image Objects > Fireworks HTML to place your banner on the page. 5. Save the file as model_page.html in the fw2 folder.

Page 5

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Magic Buttons - creating rollover buttons

A rollover button is a graphic that looks one way before you put your cursor on it and then changes appearance when your cursor is on it. For instance, you go to a Website and put your mouse over a graphic that says "home" and it "lights up" and then you click on it to go to the home page of a Web site. A Rollover Button is made up of three parts: 1. A graphic for the off state - how the button looks before you put your cursor on it 2. A graphic for the on state - how the button looks when the cursor is on it 3. Some JavaScript programming to put it all together You can use Fireworks, a program for making graphics, to make the off and on state graphics and Dreamweaver to make the button work. You create the off and on states of the button, then use the Insert > Image Objects > Rollover Image option in Dreamweaver. Step 1: Create the Off State graphic of your button 1. Open Fireworks. 2. Choose File > New. 3. Make the width = 150, the height = 50 and resolution = 72. Also, check Transparent for the canvas color. Click OK. 4. Click on the Rectangle Tool. Change the paint bucket color to the color you like. 5. Draw a rectangle on the canvas. 6. Select the rectangle with the Pointer Tool. Find the Effects field on the Properties panel. 7. Click the + and choose Bevel and Emboss > Inner Bevel. 8. On the same box, change the number 10 to 5. Press Enter. 9. Use the Text tool to type the word original on the button. 10. Save the file as off_state.png.

Step 2: Create On State graphic of your button 1. Choose File > Save a Copy. Name the file over_state.png. 2. Choose File > Open. Choose the over_state.png. 3. Change the Paint Bucket color to a lighter color. 4. Change the text from original to rollover. 5. Click File > Save. The next thing you want to do is to begin to make buttons from the models. Each button you will create will have an off state and an on state so you will to export two graphics for each button. Make sure that you have both the off_state.png and on_state.png opened. Place the off state on the left and the on state on the right.

Page 6

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Step 3: Add text to both states of your button 1. On the off_state graphic, choose the Text tool and click on your rectangle. 2. Type in "Home Page." Click OK. 3. Use the Pointer tool to center it on the canvas. 4. Copy and Paste that text into the on_state graphic. Choose Edit > Copy, then click on the on_state graphic and choose Edit > Paste. OR, click on the text in the off_state window and drag it to the on_state window.

Step 4: Export the different states of the home button 1. Export the off_state graphic as home_off.gif. 2. Export the on_state graphic as home_on.gif.

Step 5: Create more buttons To create additional buttons, all we have to do is change the text of the home button we created. 1. Double-click on the text in the off_state graphic with the Pointer tool. 2. Change the text to "Syllabus." 3. Double-click on the text in the on_state graphic with the Pointer tool. 4. Change the text to "Syllabus." 5. Export each graphic. (the off_state graphic will be syllabus_off.gif and the on_state graphic will be syllabus_on.gif). 6. Repeat 1 through 5 to create more buttons.

Step 6: Inserting Rollover Images with Dreamweaver Now that we have created the two states of the button we can go ahead and make the button work using Dreamweaver. All you have to do is tell Dreamweaver which images or graphics to use and which page to go to. 1. 2. 3. 4. 5. Open Dreamweaver. Create a new Dreamweaver the way you learned in Dreamweaver 1. Choose File > Open. Select model_page.html. Click Open. Place your cursor in the first column of the second row.
Page 7

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

6. To make sure that your buttons appear at the top of the cell, change the vertical alignment of this cell to top.

7. Choose Insert > Image Objects > Rollover image. 8. For Original Image, browse to your home_off.gif graphic. 9. For Rollover Image, browse to your home_on.gif graphic. 10. For When clicked, go to URL, type in index.html. 11. Repeat this process to insert the other buttons you have created. 12. Then, save the file as model_page.html. If you press F12 on your keyboard, you can preview your page with your button on it.

Step 7: Finalizing the Model Page We are creating one HTML page that will contain all the common elements of the site (banner, buttons, font, etc). We will then take that file and create our other pages of our site. By doing so we insure that there is a consistent look and feel across all the pages. Thus far, we have inserted the banner and the navigation for our site. We need to add a few more things. Lock the Column Widths 1. Place your cursor in the first column of the second row. 2. On the Properties panel, insert 150 for the width of the cell. 3. Place your cursor in the second column of the second row. 4. To make sure that your buttons appear at the top of the cell, change the vertical alignment of this cell to top. 5. On the Properties panel, insert 610 for the width of the cell. Indent the text 6. Place your cursor in the second column, second row. 7. Click the Indent button on the property inspector. 8. Press Shift + Enter on the keyboard to skip a single line. 9. Type PAGE HEADER. 10. Highlight PAGE HEADER and make it bold. 11. Place your cursor after PAGE HEADER, and then press Enter on the keyboard to skip down two lines. 12. Turn off the bold option.
Page 8

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

13. Type in The Content goes here 14. Change the Title Field to reflect the name of your course (ex: BUS 330: Human Resource Management). 15. Save the file. You should have something similar to this:

Page 9

Last modified on November 23, 2004

Dreamweaver Intermediate: Creating a Web Site with Fireworks and Dreamweaver

Creating Additional Pages

In this exercise, we will take the information from a Word document and create our syllabus page of our Web site. Step 1: Creating the Syllabus Page 1. 2. 3. 4. 5. 6. 7. Open the model_page.html (on your disk) in Dreamweaver. Change the PAGE HEADER to SYLLABUS. Highlight The Content goes here From the File menu, choose Import > Word Document. Select syllabus.doc from the fw2 folder. Choose File > Save as, and name the file syllabus.html. You can then use the text formatting techniques that you learned in the Intro to HTML using Dreamweaver workshop to bold, italicize, underline, etc., as necessary.

To create additional pages you would follow the same steps.

Step 2: Creating the Assignments Page 1. Open the model_page.html file. 2. Enter the assignments information. 3. Save the page as assignments.html.

Step 3: Creating the Home Page 4. Open the model_page.html file. 5. Enter the information you want to have on the home page. 6. Save the page as index.html.

Congratulations, you have successfully completed this workshop. To see the results of your hard work, look into the fw2 folder, and double-click on your index.html page. It will open in a web browser and you will be able to click on the different buttons to see the other pages you created. You should also be able to click on the image portion of your banner to go back to the home page of the site, as well as, click on the NCSU logo to go to the NC State Web Site.

Page 10