Building Navigation Menu Bar
Basic Structure
In Dreamweaver create a blank page and insert a table with 1 row and 6 columns.
Set the width of the table to 100%, Border thickness to 0, Cell padding to 1 and Cell spacing to 0:
Interface Widgets: Advanced Buttons and Navigation Bar (Part II)
Introduction
This article is the second iteration of the two-part Interface Widgets series on building web interfaces using HTML button element (<button> tag) in conjunction with CSS.
Today based on the knowledge acquired in the previous article we will build a button-based navigation bar for a fictitious web application. Using the power of CSS and Dreamweaver design tools we will quickly create button rollovers, navigation dropdown menus with a search-box and navigation sub-items.
We will also apply two “skins” –two Cascading Stylesheet files to control the appearance of our navigation bar. While working on the design we will aim for a desktop-based application type of a look. The first skin will apply the classic Windows 98 style, while the second one will have a modern Microsoft Office XP theme.
As a result of this exercise we will build an interface similar to the screenshots below:
Alex July
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.