While browsing various websites, one thing I noticed is that most sites contain some kind of standard menu bar across their websites. This menu bar is much more visually appealing than just a plain list of text links, and will be addressed in this post.
Basically the objective is to go from this…
To this:
The first thing you want to do is customize images for your web page buttons, making each link/button an individual image. You can do this using Photo Shop or Paint. I won’t get too much into this, since the main focus here is constructing the bar in html, and not so much about the style or design of your buttons. For sake of simplicity, I just created blue rectangles with the text of the link included. After creating each individual button, I have reached the point where I have images for each button in a folder.
Now that all the images are ready, it is time to create this object in the HTML file. The simplest way to create this menu bar structure is through the use of the table tag (<table>). With the table tag, you are able to create a frame of x by y cells, where each cell can contain say one image(or image link in this case). For this a menu bar, generally only one row will be required and a variable number of columns, depending on the number of buttons you would like.
Before showing the html code, as an introduction, there are 3 tags that will be used here:
<table> — creates the table
<tr> — creates the row
<td> — creates the individual cell
Within the HTML file you wish to edit, the code is going to look something like this:
*code comments are in red and are not actually included in the code*
<table align=”center”> (declares table, aligns menu bar to be centered on webpage)
<tr>(Creates row in table)
<td>(creates individual cell for each image link)
<A href=”index.html”>
<img src=”homebutton.jpg” border =”1″ name=”homeButton”>
</A>
</td>
<td> (creates individual cell for each image link)
<A href=”pictures.html”>
<img src=”Pictures.jpg” border =”1″ name=”picturesButton”>
</A>
</td>
<td>(creates individual cell for each image link)
<A href=”proposal.html”>
<img src=”proposal.jpg” border =”1″ name=”proposalButton”>
</A>
</td>
(…and so on, for each individual cell you wish to create, )
</tr>(end row)
</table>(end table)
At this point, the menu bar will be created and viewable. You can copy and paste the code you’ve created and add it to any page you wish to add this menu bar. Following this HTML code skeleton, you will be able to create a menu bar through the use of the <table> tag.
-Frank Dyska
Source : digicompdiy[dot]wordpress[dot]com
0 comments:
Post a Comment