One of the most popular terms that visitors to this site enter into search engines is ‘iWeb navbar’ which I find refreshing as a lot of you are obviously thinking of or looking for ways to improve the way a visitor to your iWeb site navigates his or her way around. Obviously the safest, most accessible and SEO friendly is the basic text links I talked about in my ‘Improve your iWeb navigation‘ post but they can be a little bland to say the least. In this post I want to show you methods of making those simple text-based links standout and look a lot less like the basic iWeb navigation.The images shown below have all been created soley in iWeb 08. No image editing application has been used; all in an effort to show you want can be done simply and effectively without being a graphic design genius and to give you some inspiration to create your own iweb navigation bar.
This black nav-bar was created by inserting a square with a black/dark gray gradient behind the text-based nav-bar. The green line notifies visitors of the current page and is created again from a square, squashed flat. To add to your page simply copy & paste and nudge the green line left and right using the arrow buttons.
This one is made from two shapes; a rounded-corner rectangle and a star. Shadows have been added to all of the buttons but the blur and offset settings have been changed for the current page button as have the color and rotation of the star. This can all be achieved through ‘Inspector’s Image Tab’.
To get this effect I inserted a rounded-corner rectangle with a light blue/dark blue gradient. To get the highlights and lowlights on the buttons I drew a white line (4 pts thick) a few pixels down from the top of the button and gave it a white shadow then reduced the Opacity right down to 7 or 8%. The same was done for the lowlight however I used a dark blue (or green) line and added a shadow of the same color before reducing the opacity once more. This was then placed a few pixels up from the bottom of each button.
This common ‘Tab’ effect nav-bar is created using rounded-corner rectangles with a shadow. The current page tab is given a lighter color, made a bit lower then the other tabs and has less of a shadow; once again all through Inspector. To make sure you only see half of the rectangle you have to add a rectangle (or similar) the main area of your web-site (I added one of 800 px wide) to place all the text on. This gives the iWeb site a nice layered effect too.
The red and blue buttons are created in exactly the same way as the green/blue nav-bar two above this one. The background is created from two rounded-corner rectangles with dark gray/light gray gradients one going from top to bottom and the other in the opposite direction. The bigger rectangle is then ‘sent backward’ below the smaller.
This nav-bar is created by inserting a rectangle and then applying the sticky tape ‘frame’ in Inspector. Each square is given a shadow and, as before, the current page button is given a slightly different color and less of a shadow. The rotation can be achieved by holding down the Cmd button whilst dragging a corner handle.
A similar nav-bar to the one above it, I removed the frame and re-colored the rectangles using a dark yellow/light yellow (or pink) gradient to try and make a ‘post-it pad’ style nav-bar. Once again shadows are used to make the nav-bar look as if it has depth and this is reduced for the current page, as is the color of the button. Once more a large rectangle is used for the body o the iWeb page and ‘brought forward’ to hide the lower part of the buttons.
I think this one looks similar to the Apple nav-bar and is simply a long rounded-corner rectangle with a dark gray/light gray gradient as a fill. The current page is shown by adding a rectangle and giving it the same gradient in the opposite direction. The text has had a white shadow added to it with the offset set to nil and the blur set to 1%.
Similar to the first nav-bar shown above I have used a circle rather than a green line to show the current page. Importantly the circle (you could use a triangle or other shape) must be the same color as the body of you site so as not to show the bottom half of it.
A simple gray gradient has been applied to a yet another rounded-corner rectangle before a light to dark colored gradient is added to a smaller circle. A different colored circle is used to highlight the current page.
The beauty of all these nav-bars is that they only consist of two different buttons. I would recommend creating the nav-bar on a blank iWeb page so that a simple copy/paste to any page can be done as and when necessary. The same copy/paste can be used to move the buttons from place to place as the ‘highlight’ dictates.
If you have created a funky custom style nav-bar why not leave your link in the comments so we can all have some more inspiration!