Tips and Tricks

Do all the projects.

Complete all the Quizzes.

Optional Read Chapter Thirteen (The Non-Designer's Web Book)

Instructional Video: Full Screen  Ipod Version

Tips and Tricks

This can make your site better, run faster, and look cooler. I am not going to cover all of them in this lecture. Instead, I am going to focus on just one of the most important areas: rollovers.

Rollovers are a simple way to include little animations into your site. To make a rollover work, you will need to create a couple graphics and know a little JavaScript.

Take a look at the graphics below. Roll the mouse over each graphic and see what happens...

The graphic at left is actually six graphics in one. There are two Home buttons, two FAQ buttons, and two Other stuff buttons. Here are the Home buttons: Image   Filename   home.jpg   home-over.jpg

 

Here is the Home button by itself.

Adding rollovers is not difficult. Once you have created both versions of the graphic, follow these steps:

1. Insert the image using the Image button at the top of the Nvu window. For this example, we will assume that home.jpg is the image we want to display as the normal condition.
2. Go to Advnaced Edit... and add a name to the image. Be sure to remember this name, you will need it later. Click OK.


3. Turn the image into a link using the Link button in the menu bar.
4. Left click on the image and then immediately right click on the image. This should give you the pop-up menu at right. Select All will let you select both the image and the link.


5. Open up the Link Properties... window (not the Image Properties... window) and click the Advanced Edit... button. You will see a dialog similar to the example at right.
6. Click on the JavaScript Events tab. Select onmouseover from the Attribute pull-down menu and type in the information shown in the Value field. Repeat this operation, selecting onmouseout from the Attribute pulldown and supplying the name of the original graphic used with the Image insert in step 1. Be sure to use the image name you supplied earlier or this won't work.

The onMouseOver tells the browser what to do when the mouse is rolled over the image. In this case, it changes the .src of the image (the same src as in the image tag) to a new file. The image must have a unique name that can referenced in the onMouseOver. The onMouseOut tells the browser to switch the image back when the mouse leaves the image.

Example Images

• 
• blueniacc.png
• 
• redniacc.png
• 
• greenniacc.png
• 
• purpleniacc.png

Roll Over Versions

Using layers

Layers on web pages allow you as the designer to position text or images exactly where you want them on the page. Let's look at an example.

Here is a sample Nvu page that contains two paragraphs and two images. We are going to use the pushpin icon in the upper right to place components of the page in layers.

I selected the picture of the can top by clicking on it. That gave me a set of square handles around the outside of the image. When I clicked the pushpin icon, Nvu added the four-ended arrow icon on the top left corner of the image. Nvu automatically slid the picture of the Enter key to the left margin and behind the picture of the can top. It is still there, it is just partially hidden by the picture of the can.

I pointed at the four-ended arrow, held down the mouse button, and drug the image to its final position.

Here I have put the picture of the Enter key on its own layer, as well. Notice that the text is being covered by the pictures and the Enter key covers part of the can top.

Now that I have the images on separate layers, the two icons next to the pushpin allow for moving layers to the front or to the back. You can only arrange the order of the items that are on layers. In this example, the text is not on a layer, so it will always stay in the background.

You can also put text on separate layers by highlighting it with the mouse and clicking the Pushpin. This allows you to put the text on top of the picture, as shown below.

Creating FavIcon