Now here is a simple and easy way to use Dreamweaver CS3 to create a great looking Navigation Menu without having to know anything about CSS, HTML, Javascript etc. This is a function in Dreamweaver CS3 that goes widely unnoticed. And it wasn’t until recently that I had a play with it.

In Dreamweaver CS3, you can insert a SPRY Navigation Bar with just a few clicks! How easy is that. Follow this article and you will have a nice looking functional horizontal navigation bar in a matter of minutes

Step 1. Create a Page or Open an existing One
I am going to create a New Page for this example. File > New > Blank Page > HTML. Save the file. I have saved it as spry.html

Step 2. Insert the Spry Navigation Menu
How easy is this, go to the Insert Menu up the top and then Select SPRY.

Then hover over the icon that is 4th from the right and it will say “Spry Menu Bar”, Click it and then you will be presented with the option of creating a Vertical Menu Bar or a Horizontal Menu Bar.

For this example Select Horizontal. You will then notice that some code is automatically inserted into the page. File > Save, you will then be asked to Save the Dependant Files. Click OK and then Dreamweaver CS3 creates a directory called “SpryAssets” in the root of your web directory.

Let’s take a look at it in it’s default form. Press F12 to view it in your default browser.

Notice that the Navigation Bar has 3 different levels, a drop down and also a flyout from that drop down. GOLD!!!

Step 3. Change the Items on the Navigation Bar
To change the values of the items on the menu bar you will need to be in either in Split View or Design View and not Code View. Then click the blue tab that surrounds the menu bar and you will notice the menu bar properties box appear at the bottom of the screen.

The 3 columns you see are the different levels of your navigation. The first column is the top level, the second column is 2nd level, and the third column is the 3rd level. From the Properties box you can now change the Text, Link, Title, and Target. You can also re arrange the order of the menu items.

How easy was that! In part 2 of How To Create a Spry Navigation Menu in Dreamweaver CS3 I will walk you through the CSS File and how to change the look and feel of the Navigation Bar.

Make Sure you SUBSCRIBE to the RSS Feed so you can receive Part 2.

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.