Now, I am from the old school of the CSS Coding circles where I generally like to open the CSS File and edit the file itself. But Adobe Dreamweaver CS3 has a pretty cool feature that I have been using quite a bit of late. I cannot believe I haven’t used it more often.

In the last couple of projects of mine I have been using the “CSS Panel” on the right hand side of Adobe Dreamweaver CS3.

From this panel you can Attach a Style Sheet, Add a New CSS Style Rule to and already attached Cascading Style Sheet. But the best thing I reckon is the ease at which you can make changes to the CSS File. Read the rest of this entry »

In Part 1 of this series on Creating a Spry Navigation Bar Menu in Dreamweaver CS3 I outlined the easy process involved in creating the horizontal or vertical navigation bar. In this article I will show you how you can change the default style of the menu with just a few changes to the Cascading Style Sheet that is associated with the navigation menu.

Step 1. Open the Cascading Style Sheet (CSS).
Remember in the previous article that when you insert a SPRY Menu Bar that there was a directory that was automatically created called SpryAssets? Good. Well inside that folder you will see a file called SpryMenuBarHorizontal.css, lets begin by opening that file. From the Files Panel on the right hand side open the CSS File.

Step 2. Spry Menu Design Information
Ok now that we have the file Open, the first part of the CSS File we will look at is the Design Information Section. Now this starts on Line 77 and you should see the commenting that describes this. Read the rest of this entry »

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. Read the rest of this entry »

Probably the most common way to use lists for navigation purposes is a Vertical Navigation Bar and in a previous article I took you through How To Create A Vertical Navigation Bar In Dreamweaver Using CSS. In this article I will take you through how to Create a Horizontal Navigation Bar.

1. Let’s Start with a simple, unordered list.

2. Next Let’s Zero out the padding and margins and remove the default bullets. I have also set the width of the nav bar to 720px and have a repeating blue gradient image as a background.

3. At this point the list is still displaying vertically. To make it display horizontally simply add this to your css style sheet.

I tend to use this method as it is a bit less buggy than the other methods.

4. We now need to set the display: property to block as we want the list items to act as buttons. Now I want the width of the buttons to be determined by the anchor text so rather than setting a width on each element I have applied 2ems of padding to the left and right sides. To vertically align the text I have set the line-height to 2.1ems.

Next I want to create a divider in between each link. To achieve this I have applied a divider background image to each of the anchor links.

5. Last thing is to change the color of the text on rollover.

There we have it, a Horizontal Navigation Bar designed using CSS and Dreamweaver CS3.

If you would like more of these great tips then Sign Up for our Web Design Tips Newsletter.

photo credit: Burning Image

As I was doing my Daily RSS Reading this morning, I came across this article at Feelance Switch written by Andy Howard titled How to Manage Your Web Design Projects. This article got me thinking back to when I first started out doing a bit of freelance web design and not having a good client brief and not communicating with the client visually. I used to rely heavily on email and instant messaging for forms of communication on projects.

When first starting out with a new client it is imperative that you are both on the same wavelength in terms of what the design of the site and what direction the site is going to take. You do not want to be in the situation that I found myself in when starting out that you think both parties agree only to get close to the end of the project and you are thinking differently to the client.

Visual interaction is the key to, as Andy points out, “Fail Fast”. You need to both agree on the direction of the project early on and NOT at the end. It also gives you the designer the opportunity to walk away if your ideas on the direction is way off the mark from the client.

Make sure you have a good client brief and use visual tools to collaborate on any web design project you undertake. It is something that I learned early on, Make sure YOU DON’T make the mistake.