Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

Using Fireworks and Dreamweaver to 
create Buttons and Rollovers

   

Assignment: (Do before Class):
Characteristics of Web Graphics

Assignment: (Do after Class)

Remember: Your Webgenre website is due on Friday,
March 3rd . Students will present their completed
Webgenre websites in class on Friday.

1.. Make sure you add buttons to your Web Genre
Website.
  Study how  how some of your favorite
websites use buttons.  What can you learn about
how to use buttons in websites?

2. Go look at the websites that I have selected as
examples of the use of rollovers to aid in website
navigation.  When do these pages use rollovers and
how effective are they?  Can you detect a general
pattern for how these websites use rollovers?


1 . Examples of Websites

  1. cclewis: Digital Photography

  2. Laura McWilliams Web Genre Draft

  3. Matt Nichols Web Genre Draft

  4. Katie Sturges Web Genre Draft

  5. Karin Wolsheimer Web Genre Draft

  6. The Washington Post.com

2. Good Design Notebooks make a big Difference

  1. The secret to both Web Design and Graphic Design
    is to know how to fill up a Blank Page with
    meaningful content.

  2. The content of your pages depends on what you have
    to say.

  3. Even with little content, your webpages can open a
    window into yours and other worlds on the web.

  4. For Advertisers, Artists, and promoters, the secret is to
    use Design to capture and keep the readers' attention.

  5. Yes, there are billions of websites, but why should anyone
    go to and stay a while on your website?

  6. Good Design can only help you if you have something"
    to say and meaningful content to say it.

3. Evaluating Webgenre websites.
     (Also see Basic Elements of a Webpage)

  1. Need Clear Website titles and page titles.

  2. Need text links back to central pages in
    the website.

  3. Every Page has contact and author information.

  4. Make sure pages aren't too long or too wide.
    Users don't like to scroll.

    -Try to make pages no more than 770 or
    1000 pixels wide

    -Try to make pages no longer than 2 screen-fulls

  5. Make sure you include text links next to images
    that you are using as links.

  6. Each page has Alt tags for all central images.

  7. Each website has a larger structure and goal.

  8. Don't use lines with more than 8 to 10 words.
    It is harder to read text on the web.

  9. Make sure that your websites are all linked
    to your design portfolio pages.

  10. Make sure that your websites provide useful
    links and valuable information.

3. Some more Fireworks Image-editing tricks

  1. Give Graphics Board demo using Painter

  2. See Fireworks Images examples

  3. Putting a border around an image using
    the shape and transform tools.
    Use sewpic1.jpg for example

  4. Using Paths in Fireworks.  Putting Text on a Path
    see "Sewall image"  and "Sewall image 2"

  5. See shapeselect.png for example
    of how to select and move various elements
    as a group within Fireworks.

  6. See Blueface image on the
    www.thinkmango.com site

  7. Changing color levels to get the
    "blueface effect".

  8. Using the shape tool to cut out unique
    shapes from images. See Fireworks Images examples

4.  Adding Text to Images using Fireworks

  1. Edit sewpic1.jpg  to demonstrate adding text to images.

  2. Be careful adding text to web images.  Make sure
    there is enough contrast between the image and
    the text.

  3. Try adding text by putting it on a background.
    See Sewall Images with black boxes and white text.

  4. Study how Magazine Ads add text to Images

5. Using Transparent Gifs to protect images from being copied

  1. Transparent Gif with Black border

  2. transgif

  3. Make your photo images the background image to
    a layer.

  4. See Picflowers and Picflowers1 for an example of this.

  5. Insert the transparent gif as the image in this layer.
    Make sure the transparent gif is the same size
    as the layer's background image.

  6. Make sure you use Alt tags to name the transparent
    gif image.

  7. When someone tries to right-click and copy the image,
    they will copy only the transparent gif.

6.. Adding invisible borders and black borders to an image in
Dreamweaver

  1. See Rose image with Image Map hotspot

  2. You can add these borders in Dreamweaver, but try
    to make most of your image adjustments in Firewworks.

  3. You can create image maps in both Fireworks and
    Dreamweaver. Make sure you test your imagemaps
    to make sure the links work

  4. When you create image maps in Dreamweaver, the program
    adds an "#" to the link you add, which then tries to make this
    link to another page in this website. It does this:
    ...../Design/imgbrders.htm#http://www.cclewis.com/photos/
    index.htm

  5. If you want to link to an another website, make
    sure you remove the "#" from the link addresss.

  6. Remember that Dreamweaver used the "#" symbol to
    link to anchor links within the same webpage.

7. Creating Basic Rollovers using Dreamweaver MX 2004

  1. Examples of Rollover buttons

  2. See Button1.htm with Rollovers

  3. Sewall Academic Program

  4. Digital Design Homepage

  5. See Sewall Image Swap

  6. See Robin Williams' Example of an Image Swap

  7. Robin Williams' Sports Bar

  8. There are four states that can be used in Rollovers
  • "Up" is the look when there is no mouse cursor inside
    the image area.

  • "Over" is the look when the mouse cursor is moved
    over the rollover area.

  • "Down" is the look after the mouse clicks.

  • "Over While Down" is the look when the mouse cursor
    passes over a rollover that is in the Down state.

6. Making Buttons in Dreamweaver

  1. Go to "Insert" on the menu bar and select
    "Interactive Images" and then select
    "rollover image."

  2. When the rollover menu comes up, make
    sure you select "pre-load images."

  3. A simple rollover has two states:

    1) an active and 2) inactive state.

  4. Create two different versions of the
    button you want to make a rollover.

  5. You can vary the background color, the color
    of the text on the button, and even the font
    of the button.

  6. You can even vary the size of the button just
    a little bit, so that when you roll the mouse
    over the button it appears to jump out at you.

  7. Insert these two different button states in
    the "rollover" menu.

  8. Make sure that you save both of these button
    images and put them on the web.

  9. Try not to get too fancy when you first start
    making buttons. You can over-due the effect.

  10. Make sure that you can still easily see the text
    on the button even with a changed background
    color or text color. Don't let the text get
    blurred or smeared.

  
7 . Examples of Rollovers on the Web

8. Creating Image Swaps

  1. See Reece William: the Newest Davis

  2. Boulder in Winter # 1

  3. Boulder in Winter # 2

  4. Boulder in Winter # 3

  5. See code for swap8

  6. See swaptest for basic example

  7. Go to "Windows" in the menu bar and
    select "Behaviors." This will cause a
    "Behaviors" box to open up.

  8. Select the button you want to use so that
    when the mouse rolls over it, it will cause
    another image on the page to swap.

  9. Make sure that the central image that you
    want to swap has an "image name."


  10. Make sure that all the images you use in these
    swaps have "image names". You can add "image names"
    to images when you work with them in fireworks.

  11. Make sure that the images you want to swap
    are the same size.

  12. Now select the button you want to make the
    rollover button for the image swap.

  13. Now select "+" in the "Behaviors" box and then
    select "swap image."

  14. Make sure that you select the "preload images" box
    here.

  15. In the Behaviors box select the image name that
    you want to swap and now select the image you
    want to swap it with
    , for exampe cameraex.gif.
    In swaptest.htm, the image name is "Cam" and
    the image to swap with it is eflags.jpg

  16. If you want to swap multiple images on the same
    page using one rollover, select other images that
    you want to swap in this same box and then
    choose the images you want to swap them with.

  17. Be careful with this image swap trick. Don't
    swap more than 2 or 3 images at the same time.

10. Web Design Tutorials

  1. Creating Jump Menus tutorial





  2. Go to the Forms Menu, and select "List Menu"

  3. Make sure you name the "menu" you are working
    with. Dreamweaver needs to know which menu
    to call up

  4. Select "List Values" and add the button names and
    URLs to the pages they open.

  5. Now open the "behaviors window" and select
    attributes.

  6. Under behavior attributes, add:

    onChange: Jump Menu
    onChange: Jump Menu go

  7. Make sure you choose the text to
    come up first in the menu by selecting it
    under "initially selected."

  8. This is a simple drop-down menu. You can
    add more advanced menus by adding
    complex javascript code found on javascript
    sites.




 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
21032      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 24 February, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/buttons.htm

Digital Design Course homepage