Navigate your way through a navigation bar DIY!

Not only do navigation tabs add style and design to your webpage, but they also provide your user with a clear “map work” of the contents you wish to include. With that in mind, let us begin this tutorial on how to create a list of navigation tabs!

Begin by opening your already started webpage on Dreamweaver. Use the split view to see both HTML coding and page design. For this addition we will go between the body tabs <body> </body>. Create a div tag in between the body tags and use the navbar id. The tag should look like this <div id=”navbar”>. In order to create a navigation list, we need to create another div tag within our first one. Using this format the next line should look like this <div id=”holder”>. Be sure to leave space between open and close brackets to ensure correct formatting. Remember, with each open bracket there must be a closing bracket. To make sure we are on the same page, our HTML should look similar to this:

<body>

<div id=”navbar”>
<div id=”holder”>

</div>
</div>
</body>

The next step is to create an unordered list tag to put our navigation tabs in between. We do this by using the <ul> </ul> tags. Put enough spaces in between to better organize your HTML text. In between our unordered list we will put our list item tags <li> </li>. Our HTML should look like this.

<body>

<div id=”navbar”>
<div id=”holder”>

<ul>

<li></li>

 

</ul>

</div>
</div>
</body>

In between our list order we will insert <a href=“#”></a>. Copy this entire segment including the list item tag and paste it according to the number of navigation tabs you want your webpage to have. It should look like this.

<body>

<div id=”navbar”>
<div id=”holder”>

<ul>

<li><a href=“#”></a></li>

<li><a href=“#”></a></li>

<li><a href=“#”></a></li>

<li><a href=“#”></a></li>

 

</ul>

</div>
</div>
</body>

 

Now comes the less confusing aspect of this tutorial! We need to title our navigation tabs. Each title will go after the <li><a href=“#”> portion of the list item tag. Use your creativity and preference to title each list item tag/navigation tab. After you have done this refresh the design page to view your progress.

Your standard navigation list is now complete. With more advanced HTML/CSS coding, you can transform this basic navigation list into elaborate designs such as the ones below.

Image

For now, your HTML coding/design should look similar to this.

Image

Play around with this basic formatting to achieve your desired look!

By: Felice Amoo-Achampong

~ by feliceamoo on September 16, 2012.

 
%d bloggers like this: