Rollover
Content
Web Page Design Rollovers
Part 1 - Creating a Simple Rollover You will start by creating a simple rollover. It involves two pieces of artwork. The first appears on the screen initially, and the second appears when the mouse “rolls over” it. 1. Open your Dreamweaver and create a new site called YourNameRollover. 2. Create a new blank HTML page and then save it as simple_roll.html. 3. Choose Insert>Image Object>Rollover Image. a. For the original image click browse to select symbol_off.jpg located in the
4.
5. 6. 7.
MTComputers\Scook\WebPageDesignImages folder b. For the rollover image, choose symbol_over.jpg c. Click OK You may notice the “#” symbol in the link box of the property inspector. Dreamweaver MX inserted this symbol in order to create a link even though you didn’t specify one. It doesn’t link to anything, it is just a placeholder so you can still click and see the rollover. In the property inspector, click the browse for file (small folder) icon to the right of the link field and brose to select the brush.html located in MTComputers \ Scook \ WebPageDesignImages \ HTML File. Press F12 to preview the rollover. Click the symbol and voila, brush.html will appear. Important: You may see red “x” symbols where some of the pictures are. That is okay, you do not have the images that go with those files.
Part 2 – Animated Rollovers! This exercise is similar to Part 1, only instead of two images that do not move, the rollover image in an animated GIF. You will be putting the rollover graphics inside of a table to ensure that they don’t move around once they are in place. 1. Open the index.html folder from MTComputers/Scook/WebPageDesignImages/HTML File and save it to your Rollovers root directory.
Web Page Design Rollovers
2. If you get grey boxes where the symbols are, reset the path to the images file – you can find them in MTComputers/Scook/Images file. a. The one in the middle is symbol_over. b. The top left is logo. c. The one to the right of logo is tip. 3. Notice in the index.html the empty table below the symbol_rollover. This is where you are going to put the rollovers for each button. a. Click inside Cell A (the first one on the left) and click Insert>Image Object>Rollover Image. b. For the original image click browse to select shears.gif located in the MTComputers\Scook\WebPageDesignImages folder c. For the rollover image, choose shears_ani.gif d. Click OK e. Important: You will notice that the table columns have changed size. Don’t worry about that, it will be fixed shortly. 4. Place your cursor to the right of the shears.gif that you just inserter. Press tab to go to the next cell. a. Follow steps 3b through 3d above, however you will use the pot.gif and pot_ani.gif images for this cell. b. Finally, repeat the steps above for care.gif and care_ani.gif for the third cell in the table. 5. SAVE YOUR FILE. 6. Press F12 to preview your file in a browser. Part 3 – Creating Pointing Rollovers You will now create pointer rollovers. These reuse one piece of artwork. This type of rollover involves making a table to hold all of the artwork in place. We will also use the behaviors feature during this part of the assignment. 1. Open the pointer.html folder from MTComputers/Scook/WebPageDesignImages/HTML Files and save it to your Rollovers root directory. 2. You will see that there is a table already inserted on the page. You will use the following guide to the specific cells for the rest of the exercise. CELL A CELL H CELL B CELL I CELL C CELL J CELL D CELL K CELL E CELL L CELL F CELL M CELL G CELL N 3. Click inside Cell I and choose Insert>Image. a. Select blank_p.gif from the images folder, then click open.
Web Page Design Rollovers
b. The reason for this is that you are going to put this image in every location that the pointer will appear. You are doing this because rollovers require two images, the original and the rollover. In this case, the original looks like nothing because it is a transparent GIF, which lets the background show through. c. Repeat 2a above for Cells J, K, L and M. 4. SAVE YOUR FILE!
Web Page Design Rollovers
5. After you have completed steps 3a through 3c above, click inside Cell I. a. In the property inspector, give it the name blank1. b. You will name Cells J, K, L, and M, blank2, blank3, blank4 and blank5, respectively. c.
6. Click inside Cell A and choose Insert>Image. a. Select top_nav.jpg from the images folder, then click open. b. With this image still selected, in your Property Inspector, enter the name top like you did blank1, etc. 7. Repeat for the following cells as shown below Cell B art.jpg Cell C how.jpg Cell D tools.jpg Cell E photos.jpg Cell F contact.jpg Cell G bottom_nav.jpg Your screen should look like 8. SAVE YOUR FILE! art how tools photos contact bottom this:
Web Page Design Rollovers
9. Now you will be setting the rollovers. See the screen shot below for assistance in finding the correct area of the behaviors panel. a. Click art. jpg to select it. 1. Open the behaviors panel by clicking on Window>Behaviors. Your behaviors panel will be on the right side of your screen with the rest of the panels where your files are showing. 2. Click the plus sign (+) above the events column and select swap image from the pop-up menu. 3. In the swap image dialog box that opens, make sure the blank1 image name is highlighted. 4. Click browse and select point_symbol.gif locate in the images folder. 5. Click open. 6. In the swap image dialog box, click ok.
Web Page Design Rollovers
b. Click how.jpg to select it. 1. Open the behaviors panel by clicking on Window>Behaviors. Your behaviors panel will be on the right side of your screen with the rest of the panels where your files are showing. 2. Click the plus sign (+) above the events column and select swap image from the pop-up menu. 3. In the swap image dialog box that opens, make sure the blank2 image name is highlighted. 4. Click browse and select point_symbol.gif locate in the images folder. 5. Click open. 6. In the swap image dialog box, click ok. c. Repeat Steps a and b three more times as follows: 1. For tools.jpg selecting image “blank3”. 2. For photos.jpg selecting image “blank4”. 3. For contact.jpg selecting image “blank5”. 10.SAVE YOUR FILE and PREVIEW IN YOUR BROWSER. Part 4 – Creating Multiple-Event Rollovers A multiple-event rollover uses more than two pieces of artwork in the Swap Image behavior. In this part of the assignment, three different pieces of artwork will change for every rollover. 1. Open the multiple.html folder from MTComputers/Scook/WebPageDesignImages/HTML Files and save it to your Rollovers root directory. 2. You will see that there is a table already inserted on the page. You will use the following guide to the specific cells for the rest of the exercise. CELL C C D ELL ELL E F CELL C C A ELL ELL B C 3. Click inside Cell A and choose Insert>Image. a. Select tools_but.gif from the images folder, then click open. b. With this image still selected, in your Property Inspector, enter the name tools. 4. Click inside Cell B and choose Insert>Image. c. Select main_but.gif from the images folder, then click open. d. With this image still selected, in your Property Inspector, enter the name maintenance. 5. Click inside Cell C and choose Insert>Image. e. Select art_but.gif from the images folder, then click open.
Web Page Design Rollovers
f. With this image still selected, in your Property Inspector, enter the name art. 6. Click inside Cell D and choose Insert>Image. g. Select blank1.gif from the images folder, then click open. h. With this image still selected, in your Property Inspector, enter the name blank1. 7. Click inside Cell E and choose Insert>Image. i. Select swapper.gif from the images folder, then click open. j. With this image still selected, in your Property Inspector, enter the name swapper. 8. Click inside Cell F and choose Insert>Image. k. Select blank2.gif from the images folder, then click open. l. With this image still selected, in your Property Inspector, enter the name blank2. 9. SAVE YOUR FILE 10. Select the image in CELL A (row 2, column 1). a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that tools is select in the images list. c. Click browse to set source to tools_but_F2.gif. d. Click OK to copy the image to your rollover images file. e. Select swapper from the same images list. f. Click browse again to set source to swap_shears.jpg and then click OPEN. g. CLICK OK! 11. Select the image in CELL B a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that maintenance is select in the images list. c. Click browse to set source to maint_but_F2.gif. d. Click OK to copy the image to your rollover images file. e. Select the same swapper as you did in 10 above from the images list. f. Click browse again to set source to swap_maint.jpg and then click OPEN. g. CLICK OK! 12. Select the image in CELL C a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that art is select in the images list. c. Click browse to set source to art_but_F2.gif. d. Click OK to copy the image to your rollover images file.
Web Page Design Rollovers
e. Select the same swapper as you did in 10 above from the images list. f. Click browse again to set source to swap_tree.jpg and then click OPEN. g. CLICK OK! Part 5 – Creating Flash Buttons Dreamweaver MX creates Flash Buttons. They have very similar characteristics to the rollovers that you just created. However, instead of using a premade graphic, they are made within Dreamweaver MX. Another difference is that the images in Dreamweaver MX in the SWF file format instead of JPG or GIF. It lets you create Flash rollover buttons from a predefined set of styles, without ever leaving Dreamweaver MX. 1. Open the flashbuttons.html folder from MTComputers/ Scook/ WebPageDesignImages/ HTML Files and save it to your Rollovers root directory. 2. Click inside the first cell of the top table. 3. Choose Insert>Media>Flash Button 4. Under th4e style option, select the beveled rect-green. This changes the sample area at the top. a. Move your mouse over the sample area to preview the rollover effect of the style. b. For the button text option, type How to Bonsai. c. Make sure the font option is set to Verdana and the size option is set to 12. d. Click the bg Color box and choose #FFFFCC. e. Save as how.swf. f. Click OK 5. SAVE YOUR FILE 6. Click on the next cell to the right. 7. Following Steps 4a through 4f above create a flash button for: Tools & Supplies, The Art of Bonsai, and Photo Gallery. Don’t forget to save each file and give it a unique name. 8. You will now get rid of the large gaps in between the flash buttons. a. Select the entire top table where you just inserted the flash buttons. Choose Modify>Table>Select Table
Web Page Design Rollovers
b. In the property inspector, set the table width (W) to 400. c. Adjust the cellpad to 5 9. SAVE YOUR FILE Part 6 – Inserting a Navigation Bar Rollover The last type of rollover you are going to practice in this assignment is the navigation bar rollover. A navigation bar-style rollover allows each button to display four states – up, over, down and over while down. Instead of working with two images for each rollover, this type of rollover requires that you work with four – one for each separate state. You will use the Dreamweaver MX Insert Navigation Bar feature to do this. 1. Open the navbar.html folder from MTComputers/ Scook/ WebPageDesignImages/ HTML Files and save it to your Rollovers root directory. 2. Choose Insert>Image Objects>Navigation Bar. a. Enter Element Name: tools. This will assign a name to the first rollover image in this navigation bar. b. Click browse next to the up image field. i. Browse to the images folder and select tools_up.jpg. ii. Click open to select this image. c. Click browse next to the over image field. i. Browse to the images folder and select tools_over.jpg. ii. Click open to select this image. d. Click browse next to the down image field. i. Browse to the images folder and select tools_down.jpg. ii. Click open to select this image. e. Click browse next to the over while down image field. i. Browse to the images folder and select tools_overdown.jpg. ii. Click open to select this image. f. DO NOT CLICK OK because you are going to add to this bar before you are done. 3. Click on the plus (+) sign on the navigation bar dialog box. 4. Also make sure that you have the insert horizontally box checked at the bottom as we want these to go across the top of your screen. 5. Follow Steps 2a through 2e above to add three more new elements to the navigation bar using the chart below. Element State File art Up art_up.jpg Over art_over.jpg Down art_down.jpg Over While Down art_overdown.jpg how Up Over how_up.jpg how_over.jpg
Web Page Design Rollovers
Down Over While Down photos Up Over Down Over While Down how_down.jpg how_overdown.jpg photos_up.jpg photos_over.jpg photos_down.jpg photos_overdown.jpg
6. SAVE YOUR FILE!! 7. Check each of your HTML files to make sure that they work. 8. Drag & Drop your file.
Part 1 - Creating a Simple Rollover You will start by creating a simple rollover. It involves two pieces of artwork. The first appears on the screen initially, and the second appears when the mouse “rolls over” it. 1. Open your Dreamweaver and create a new site called YourNameRollover. 2. Create a new blank HTML page and then save it as simple_roll.html. 3. Choose Insert>Image Object>Rollover Image. a. For the original image click browse to select symbol_off.jpg located in the
4.
5. 6. 7.
MTComputers\Scook\WebPageDesignImages folder b. For the rollover image, choose symbol_over.jpg c. Click OK You may notice the “#” symbol in the link box of the property inspector. Dreamweaver MX inserted this symbol in order to create a link even though you didn’t specify one. It doesn’t link to anything, it is just a placeholder so you can still click and see the rollover. In the property inspector, click the browse for file (small folder) icon to the right of the link field and brose to select the brush.html located in MTComputers \ Scook \ WebPageDesignImages \ HTML File. Press F12 to preview the rollover. Click the symbol and voila, brush.html will appear. Important: You may see red “x” symbols where some of the pictures are. That is okay, you do not have the images that go with those files.
Part 2 – Animated Rollovers! This exercise is similar to Part 1, only instead of two images that do not move, the rollover image in an animated GIF. You will be putting the rollover graphics inside of a table to ensure that they don’t move around once they are in place. 1. Open the index.html folder from MTComputers/Scook/WebPageDesignImages/HTML File and save it to your Rollovers root directory.
Web Page Design Rollovers
2. If you get grey boxes where the symbols are, reset the path to the images file – you can find them in MTComputers/Scook/Images file. a. The one in the middle is symbol_over. b. The top left is logo. c. The one to the right of logo is tip. 3. Notice in the index.html the empty table below the symbol_rollover. This is where you are going to put the rollovers for each button. a. Click inside Cell A (the first one on the left) and click Insert>Image Object>Rollover Image. b. For the original image click browse to select shears.gif located in the MTComputers\Scook\WebPageDesignImages folder c. For the rollover image, choose shears_ani.gif d. Click OK e. Important: You will notice that the table columns have changed size. Don’t worry about that, it will be fixed shortly. 4. Place your cursor to the right of the shears.gif that you just inserter. Press tab to go to the next cell. a. Follow steps 3b through 3d above, however you will use the pot.gif and pot_ani.gif images for this cell. b. Finally, repeat the steps above for care.gif and care_ani.gif for the third cell in the table. 5. SAVE YOUR FILE. 6. Press F12 to preview your file in a browser. Part 3 – Creating Pointing Rollovers You will now create pointer rollovers. These reuse one piece of artwork. This type of rollover involves making a table to hold all of the artwork in place. We will also use the behaviors feature during this part of the assignment. 1. Open the pointer.html folder from MTComputers/Scook/WebPageDesignImages/HTML Files and save it to your Rollovers root directory. 2. You will see that there is a table already inserted on the page. You will use the following guide to the specific cells for the rest of the exercise. CELL A CELL H CELL B CELL I CELL C CELL J CELL D CELL K CELL E CELL L CELL F CELL M CELL G CELL N 3. Click inside Cell I and choose Insert>Image. a. Select blank_p.gif from the images folder, then click open.
Web Page Design Rollovers
b. The reason for this is that you are going to put this image in every location that the pointer will appear. You are doing this because rollovers require two images, the original and the rollover. In this case, the original looks like nothing because it is a transparent GIF, which lets the background show through. c. Repeat 2a above for Cells J, K, L and M. 4. SAVE YOUR FILE!
Web Page Design Rollovers
5. After you have completed steps 3a through 3c above, click inside Cell I. a. In the property inspector, give it the name blank1. b. You will name Cells J, K, L, and M, blank2, blank3, blank4 and blank5, respectively. c.
6. Click inside Cell A and choose Insert>Image. a. Select top_nav.jpg from the images folder, then click open. b. With this image still selected, in your Property Inspector, enter the name top like you did blank1, etc. 7. Repeat for the following cells as shown below Cell B art.jpg Cell C how.jpg Cell D tools.jpg Cell E photos.jpg Cell F contact.jpg Cell G bottom_nav.jpg Your screen should look like 8. SAVE YOUR FILE! art how tools photos contact bottom this:
Web Page Design Rollovers
9. Now you will be setting the rollovers. See the screen shot below for assistance in finding the correct area of the behaviors panel. a. Click art. jpg to select it. 1. Open the behaviors panel by clicking on Window>Behaviors. Your behaviors panel will be on the right side of your screen with the rest of the panels where your files are showing. 2. Click the plus sign (+) above the events column and select swap image from the pop-up menu. 3. In the swap image dialog box that opens, make sure the blank1 image name is highlighted. 4. Click browse and select point_symbol.gif locate in the images folder. 5. Click open. 6. In the swap image dialog box, click ok.
Web Page Design Rollovers
b. Click how.jpg to select it. 1. Open the behaviors panel by clicking on Window>Behaviors. Your behaviors panel will be on the right side of your screen with the rest of the panels where your files are showing. 2. Click the plus sign (+) above the events column and select swap image from the pop-up menu. 3. In the swap image dialog box that opens, make sure the blank2 image name is highlighted. 4. Click browse and select point_symbol.gif locate in the images folder. 5. Click open. 6. In the swap image dialog box, click ok. c. Repeat Steps a and b three more times as follows: 1. For tools.jpg selecting image “blank3”. 2. For photos.jpg selecting image “blank4”. 3. For contact.jpg selecting image “blank5”. 10.SAVE YOUR FILE and PREVIEW IN YOUR BROWSER. Part 4 – Creating Multiple-Event Rollovers A multiple-event rollover uses more than two pieces of artwork in the Swap Image behavior. In this part of the assignment, three different pieces of artwork will change for every rollover. 1. Open the multiple.html folder from MTComputers/Scook/WebPageDesignImages/HTML Files and save it to your Rollovers root directory. 2. You will see that there is a table already inserted on the page. You will use the following guide to the specific cells for the rest of the exercise. CELL C C D ELL ELL E F CELL C C A ELL ELL B C 3. Click inside Cell A and choose Insert>Image. a. Select tools_but.gif from the images folder, then click open. b. With this image still selected, in your Property Inspector, enter the name tools. 4. Click inside Cell B and choose Insert>Image. c. Select main_but.gif from the images folder, then click open. d. With this image still selected, in your Property Inspector, enter the name maintenance. 5. Click inside Cell C and choose Insert>Image. e. Select art_but.gif from the images folder, then click open.
Web Page Design Rollovers
f. With this image still selected, in your Property Inspector, enter the name art. 6. Click inside Cell D and choose Insert>Image. g. Select blank1.gif from the images folder, then click open. h. With this image still selected, in your Property Inspector, enter the name blank1. 7. Click inside Cell E and choose Insert>Image. i. Select swapper.gif from the images folder, then click open. j. With this image still selected, in your Property Inspector, enter the name swapper. 8. Click inside Cell F and choose Insert>Image. k. Select blank2.gif from the images folder, then click open. l. With this image still selected, in your Property Inspector, enter the name blank2. 9. SAVE YOUR FILE 10. Select the image in CELL A (row 2, column 1). a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that tools is select in the images list. c. Click browse to set source to tools_but_F2.gif. d. Click OK to copy the image to your rollover images file. e. Select swapper from the same images list. f. Click browse again to set source to swap_shears.jpg and then click OPEN. g. CLICK OK! 11. Select the image in CELL B a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that maintenance is select in the images list. c. Click browse to set source to maint_but_F2.gif. d. Click OK to copy the image to your rollover images file. e. Select the same swapper as you did in 10 above from the images list. f. Click browse again to set source to swap_maint.jpg and then click OPEN. g. CLICK OK! 12. Select the image in CELL C a. Go back to your behaviors panel and click the plus sign and then select swap image. b. In the swap image dialog box, notice that art is select in the images list. c. Click browse to set source to art_but_F2.gif. d. Click OK to copy the image to your rollover images file.
Web Page Design Rollovers
e. Select the same swapper as you did in 10 above from the images list. f. Click browse again to set source to swap_tree.jpg and then click OPEN. g. CLICK OK! Part 5 – Creating Flash Buttons Dreamweaver MX creates Flash Buttons. They have very similar characteristics to the rollovers that you just created. However, instead of using a premade graphic, they are made within Dreamweaver MX. Another difference is that the images in Dreamweaver MX in the SWF file format instead of JPG or GIF. It lets you create Flash rollover buttons from a predefined set of styles, without ever leaving Dreamweaver MX. 1. Open the flashbuttons.html folder from MTComputers/ Scook/ WebPageDesignImages/ HTML Files and save it to your Rollovers root directory. 2. Click inside the first cell of the top table. 3. Choose Insert>Media>Flash Button 4. Under th4e style option, select the beveled rect-green. This changes the sample area at the top. a. Move your mouse over the sample area to preview the rollover effect of the style. b. For the button text option, type How to Bonsai. c. Make sure the font option is set to Verdana and the size option is set to 12. d. Click the bg Color box and choose #FFFFCC. e. Save as how.swf. f. Click OK 5. SAVE YOUR FILE 6. Click on the next cell to the right. 7. Following Steps 4a through 4f above create a flash button for: Tools & Supplies, The Art of Bonsai, and Photo Gallery. Don’t forget to save each file and give it a unique name. 8. You will now get rid of the large gaps in between the flash buttons. a. Select the entire top table where you just inserted the flash buttons. Choose Modify>Table>Select Table
Web Page Design Rollovers
b. In the property inspector, set the table width (W) to 400. c. Adjust the cellpad to 5 9. SAVE YOUR FILE Part 6 – Inserting a Navigation Bar Rollover The last type of rollover you are going to practice in this assignment is the navigation bar rollover. A navigation bar-style rollover allows each button to display four states – up, over, down and over while down. Instead of working with two images for each rollover, this type of rollover requires that you work with four – one for each separate state. You will use the Dreamweaver MX Insert Navigation Bar feature to do this. 1. Open the navbar.html folder from MTComputers/ Scook/ WebPageDesignImages/ HTML Files and save it to your Rollovers root directory. 2. Choose Insert>Image Objects>Navigation Bar. a. Enter Element Name: tools. This will assign a name to the first rollover image in this navigation bar. b. Click browse next to the up image field. i. Browse to the images folder and select tools_up.jpg. ii. Click open to select this image. c. Click browse next to the over image field. i. Browse to the images folder and select tools_over.jpg. ii. Click open to select this image. d. Click browse next to the down image field. i. Browse to the images folder and select tools_down.jpg. ii. Click open to select this image. e. Click browse next to the over while down image field. i. Browse to the images folder and select tools_overdown.jpg. ii. Click open to select this image. f. DO NOT CLICK OK because you are going to add to this bar before you are done. 3. Click on the plus (+) sign on the navigation bar dialog box. 4. Also make sure that you have the insert horizontally box checked at the bottom as we want these to go across the top of your screen. 5. Follow Steps 2a through 2e above to add three more new elements to the navigation bar using the chart below. Element State File art Up art_up.jpg Over art_over.jpg Down art_down.jpg Over While Down art_overdown.jpg how Up Over how_up.jpg how_over.jpg
Web Page Design Rollovers
Down Over While Down photos Up Over Down Over While Down how_down.jpg how_overdown.jpg photos_up.jpg photos_over.jpg photos_down.jpg photos_overdown.jpg
6. SAVE YOUR FILE!! 7. Check each of your HTML files to make sure that they work. 8. Drag & Drop your file.
