WEB design tutorial 3

HOW TO ADD NAVIGATION BAR TO YOUR WEB LAYOUT

                if this your first time here or a novice to website design and development then i wud refer u to previous tutorial from introduction to dreamweaver, web page layout using table and web page layout using Div tags and from those tutorials we resolve to using Div tags as the best method for creating a flexible webpage layout.

              

 we'll move to adding NavBar(navigation bar) to the webpage earlier created. Navigation bar is simply a box holding an organized words on your webpage that links to other pages of your website.

              lets see how we can make our webpage layout look like the screenshot above.
At this stage working with Div tags should not be a challenge, else refer to tutorial 1 create your layout as seen above, you could also use your saved layout from previous tutorial,

insert a new Div tag in your header Div i.e the yellow line you see.click inside the Div and click on unordered list.

where my arrow is pointing let me show how i added the Div   insert Div and create a new CSS which control the features of the Div set the box as shown above

setting the highlighted box in the image below to auto will centralize the Div that will hold your navigation links

click on unordered list, after typing each word press the enter key to have a drop down list

Get the listed items linked to a page. we'll be linking them to pages that is yet to be created for example, am gonna link HOME to home.html note: home.html has not been created yet , remember to save your home page with the exact file name you linked the home page, same is done for others each unordered list should be linked. 

you'll observe that the colour of the listed items has changed to imply that they have been linked

we'll need to set a style sheet to control the listed items.obviously we wouldnt want the white buttons there and the navigation bar is not looking good being veritcal 

click on the <ul> highlight all the listed item

set box to as seen above, the aim is to take off the white bullets and float the menu listed to the extreme left i.e no margin. 

create another CSS to control the individual listed item . click on the <li>

set the CSS rule as seen above. float listed item to left

the above creates space between cos as seen above they were displayed as one word. thats not the aim so by setting the rules right will'll be getting close to target 

The box width to contain the navigators has to be increase to avoid the what is observed above 

after increment in the seize, the above looks more appealing  

lets add border to the navigators ,, 

the navigator's color can also be changed as seen above , observe the border line( thin black )

lets increase the font size and make the words bold

congratulations !!! you have successfully created a Navigation Bar.