PCPhoto
Build Your Own Web GalleryA step-by-step guide with screenshots for building your first website |
|
|
|
Page 4 of 25
STEP 3a: Create The Graphic Elements Now we can start creating the graphics for our website. I created a total of seven files: one title graphic for each of the two pages, the label for my navigation buttons, and a button for the pages in the navigation. Why did I create the page-number buttons in two colors? Excellent question! These are for what are called image “rollovers”. Image rollovers allow us to create buttons that change their look when you roll your mouse over them. These buttons are actually two images that swap out, depending whether your mouse is over them or not. My buttons will be black by default, but will change to blue if you hover over them with your mouse. A design note about rollovers: For best results, the two images should be identical in size. Also, it’s good to keep the text the same size in both; otherwise the button may appear to shift when activated. Ideally, work with colors and shading to distinguish the two button states. In design, simple is usually better.
STEP 3b: Save Your Graphics Files Save each of these files in either GIF or PNG format to the “navigation” folder you created inside the “images” folder. For your rollover images, it’s helpful to name the two button states similarly for future reference. In this example, “1.gif” is the default state of the page 1 button, and “1-o.gif” is the “over” state, and so on.
  |
||||||||||
