| |
Menus-
Selecting the type and style of your website menu is an important
decision. A website's success or failure depends to a large extent
on it's navigation system. If it is difficult for your visitors to
navigate your pages they will not stay long and, what is worse, they
will not return.
Your menu is the key to visitors being able to
navigate your website so make sure you know all the main categories
of the site so that you have a general idea how many buttons or
sections you will need. You need need to understand how much space
to devote to your menu when you are choosing a website design.
Along
with a menu on each page, I also like to add a sitemap or menu page.
A Menu page allows you to list every page in your website as a link.
Sitemap pages can be helpful for search engines because robots can
easily read all your links. They are also helpful to both the
webmaster and your visitors. A menu page allows visitors to see all
your pages at once in a non script format. For webmasters, a menu
page allows you to list all the pages in your website, so you can
have a clear vision of which web pages are completed and if you have
forgotten to add a page you wanted. I add the menu page and then add
the link to each page as I complete that page. When working on large
websites it is absolutely crucial to be able to track your
completed work! You have several basic options when creating your
menu and each option can then be done in any color, font, and style
you choose.
Simple Word Link Menus-
The simplest form of a menu is to simply use words and then link the
corresponding web page. This option will work well and doesn't
require the viewers to accept any codes or scripts. Search Engines
can easily read the links and website visitors can easily get where
they need to go. Webmaster often use word links at the bottom
of their web pages. You may also see pages that use both text links
and other menu types. A good example is our index page, where you
will find four interactive buttons, and text links on the bottom and
in the description. The downside to plain link menus is that the menu may look plain and
uninviting.
Interactive Buttons-
One of the most common types of menus is the interactive button
menu. These buttons or images have a link attached to them so that
when you click on it, the interactive button takes the website
visitor to the designated web page. Buttons work well because you
can use virtually any image so you can blend the button into your
design seemlessly. Another plus for interactive buttons is you can
have them change slightly when the website visitor presses them. You
can see some interactive buttons on the
Cat Encyclopedia,
American
Fire & Safety, and Black
History. Notice when you touch the buttons with a mouseover,
they change slightly. Interactive buttons work well with search
engines, and visitors and are easy to install into your website. The
downside is when you have large sub categories and you want to add a
dropdown menu.
Drop Down Menus (with Go Buttons)-
Drop down menus are a simple, space saving way to add more links to
a web page without taking up a ton of space on the page. Drop down
menus are especially helpful on your main index page. A drop down
menu is a valuable tool which allows you to link all your major web
pages to your front page, allowing users to find what they are
looking for in a fast, simple and organized manner. The downside of
a drop down menu is the appearance is rather stark looking and if
the website visitor fails to push the GO button, the menu will not
work. Floridian Nature
uses a drop down menu on their front page.
You can add a drop down menu using a small piece of code that can
easily be inserted anywhere between the <BODY> and </BODY> tags of
your website page. Website Creations provides a copy of the code
you will need to make this form work correctly, and all you need to
do is adjust the code for your page preferences. As you can see
Website Creations uses four drop down menus at the top of the page.
Drop Down Menu Code:Here is the
code you need to create a drop down menu:
<form name="health" style="width: 161px; height: 30px;">
<select name="menu"style="width: 112px; height: 20px">
<option value="HealthandLifestyles.htm">Health</option>
<option value="exercisebasics.htm">Exercise Basics</option>
<option value="cholesterol.htm">Cholesterol Info</option>
<option value="cuttingcalories.htm">Easy Ways to Cut
Calories</option>
</select>
<input type="button" onClick="location=document.health.menu.options
[document.health.menu.selectedIndex].value;" value="GO"></form>
AAll you have to do is replace the url address between the " " with
the url you want and change the words between: > and </option>
with the description you want for that web page. The sample would
give you 4 choices in the dropdown list. If you need more than just
copy the code and add additional lines or delete lines you will not
need. In Website Creations example , we use a button to click that
says “GO” so the user can make their choice and click on the button
to go to that page. The button can say anything you like, simply
change the word “GO”, where it says value=”GO” in the line that designates the input type to
whatever you want.
The choices in the list will show in the order you have them listed
in the code and the top choice in the list is what will show in the
box before they use the dropdown to select one. So, if you don’t
want to have any of the choices show by default, you can add the
text “Choose One” and set that as your selected option by adding
this as the first option in your list:<option selected>Choose
One</option>
The form name I have chosen is “health” and the select name is
“menu”. You can use any names you want, but be sure they are the
same in the input type line. Also, if you want to put more than one
dropdown menu on a page, they must hahave different form
names or they will not work correctly.
DHTML Menus-
DHTML menus use java script to create your menu. The menu is stored
on the java page instead of each individual page. The final result
is a nice looking dropdown menu that is easy to use. The downside is
many of these menus are not search engine friendly. That means that
Google and other search engines don't see the links and therefore
don't know they exist! The other downside is that uses who don't
have Java or block active scripting will not see your menu. it also
may not work on all browsers.
Simply Art has a java
menu.
CSS Menus-
CSS can be used to style unordered lists and turn then into stylish,
professional menus that would enhance the look of any website. You
don't have to know CSS code to add a CSS menu. There are many free
sites online to help you build the menu you need. Most CSS menus
also contain a java script option for programs that don't read CSS
properly. You can see a CSS menu at
A Plus Creations and
California Nature. CSS
menus are your best options for medium to large websites. They look
good, are easy for website visitors, and search engines can see the
links. I have used My CSSMenu
several times with good results.
Returning Home-
Instead of having a "Home" link on your menu, many websites add a
link in the top log banner that will take the website visitor back
to your home page. Notice if you click on the purple dot in our logo
it will always take you back to the main page.
Here's a great tip: Anytime you want to check to see if something
you add to your website is search engine friendly go to your
webmaster tools account. Go to the dashboard and click
Diagnostics, then click "Fetch as a Googlebot".
Put in the page web address you want to check, and it will show you
the page the way the Google robot sees it. If you see the link
addresses then you know Google and other search engines are seeing
them too!
|
|
|
| |
|
| |
|
