Menu Preview

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here.

Step One: Plan Your Nav

Kookaburra

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

Sketch of Navigation Organization

An alternate outline would look like this:

• Home
• Visit Us
  • Hours & Pricing
  • Maps
  • Calendar
• Animals
  • Birds
    • Kookaburra
    • Hammerkop
  • Beasts
    • Wolverine
    • Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

1. Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

Create a new HTML page

2. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.

Save As and Design button

3. Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

Unordered List icon

4. Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

First Level Navigation

5. Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

Second-level navigation

6. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

Subnavigation for Visit Us

7. Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

Subnavigation for Animals

8. Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

Subnavigation for Birds

9. Repeat for beasts: type in Wolverine and Wombat.

Subnavigation for Beasts

10. Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

Add a link placeholder

11. Do the same for all the other navigational items.

Add link placeholders

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

Next: Step Three: Start Building the CSS

Hexadecimal Color Wheel

Click on the image below to view a much larger version.

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color scheme is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in HTML and CSS coding. You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Color Picker

The Rules of Hexadecimal Color

There are three important things to remember about hexadecimal color:

1. In decimal (“base ten”) counting, each digit can be any number from 0 to 9, or ten possibilities. That’s how we normally count, of course. In hexadecimal (“base sixteen”) counting, each digit can be any number from 0 to 9 -OR- any letter from A to F. That gives us sixteen possibilities. You would count in this order, from lowest to highest: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
   
   

   Base Ten vs. Base Sixteen

2. In decimal counting, two digits side-by-side can give you 100 possibilities (0 to 99). That’s ten for the first digit times ten for the second digit. In hexadecimal, you get 16 times 16, which gives you 256 possibilities. That’s convenient, since there are 256 possible values for red in RGB, 256 for green, and 256 for blue.
   
   

   Double-Digit Hexadecimal

3. The first two digits in hexadecimal tell you the red values. The second pair tell you the green values, and the last pair tell you the blue values. 256 for Red x 256 for Green x 256 for Blue equals just under 16.8 million.
   
   

   Combining Red, Green and Blue

High-Saturation Hues

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

Shades of White

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

Shades of Black and Gray

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Muted Colors

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Shades of Brown

Browns tend to be versions of muted orange. Try mixing middle values of red and green and leaving blue as 00.

Dreamweaver CS4 Workspace

When working with Dreamweaver tutorials here, elsewhere on the Web, or in books, it pays to memorize the main components of the Dreamweaver CS4 workspace. After the jump, I describe the components I will refer to the most in my tutorials.

Click on the image below to view a much larger version.

Dreamweaver CS4 Workspace

Application Bar

Application Bar

The Application Bar includes menus* that give you access to Dreamweaver’s commands and features. They also allow you to make things visible or invisible like panels. Some menu items act on your instruction right away. Other menu items are followed by an ellipsis (…). When you select these menu items, you will get a dialog box which gives you options to modify your request.

Many menu items are accompanied by mysterious text on the right, such as “Ctrl-Alt+T”. This indicates that there is a keyboard shortcut associated with this command. In the example above, you would hold down the Ctrl and Alt keys (on the PC), then click the T key to create a table. It is possible to create your own keyboard shortcuts (Edit > Keyboard Shortcuts…).

Application Bar commands are indicated in my tutorials as a series of terms separated by a “Greater Than” (>) character. For example, Insert > Layout Objects > Div Tag means start with the Insert menu, select the Layout Objects item, and then select Div Tag from the fly-out menu.

The Application Bar gives you some button shortcuts to common functions, like viewing the site map and opening the Extension Manager. It also includes the Workspace Switcher, which allows you to change the configuration of your workspace to accommodate your work flow. It simply allows you to save and load different arrangements of panels. To save your own custom workspace, click on this button and select New Workspace…

* PCs only; Macs show the menus in a separate bar.

Document Toolbar

Document Toolbar

Files Panel

Files Panel

The Files Panel is one of many panels available in Dreamweaver, and it’s the one I use most frequently. Panels allow you do all sorts of tasks quickly, like edit your style sheets, and behaviors to your page, and insert common page elements. The Files Panel allows you to view and manage the files in your Web site. You can see the files on your local computer, on the server, or both. The up and down buttons allow you to upload (“put”) or download (“get”) the files you specify.

Files Panel

Tag Selector

Tag Selector

The Tag Selector gives you a quick snapshot of where your cursor is placed within the code, and allows you to select entire HTML tags. The hierarchy left to right goes from the general to the more specific (where your cursor is located).

For example, in the image below, the cursor is place inside a paragraph <p> tag. This <p> tag is inside a <td>  (table data cell) tag, which is in a <tr> (table row) tag. All of these are inside a table. You can select the entire table (and its contents) for editing by clicking on <table> in the Tag Selector, as I have done here. Once you’ve selected a tag, you change change its settings in the Property Inspector.

You can see, finally, that the table is inside the main <body>.

Property Inspector

Property Inspector

The Property Inspector allows you to see and edit the settings for any given selected object or text. Each type of object will have a different set of options in the Property Inspector.

For example, a table tag will have options for number of rows and columns, overall width, border width, and any spacing between individual table cells or between the border and the cell contents. An image tag will have options for image source, width, height, alt attribute, and alignment.

3-Column CSS Layout

If you’ve never tried CSS layers for your site layout, try this one. Dreamweaver CS4 makes it a cinch, if you pay attention to the details.

Your feedback is encouraged and much appreciated!

P.S. If you do not have Firefox installed, I highly recommend you install it.

What You Should Know First

• The Dreamweaver CS4 Workspace

Step 1: Create the Body

We’ll build a Web page design essentially like the class Web site I built at nhsdesigns.com. First, we’ll set up a gray background behind it all, and set the font style. To do this, we will use CSS to redefine the formatting of the <body> tag.

1. Create a new, blank HTML document in Dreamweaver.
2. Save the file as index.html inside your CSS Layers folder.
3. In the Document tool bar, change the Title to CSS Layers.
4. Show the CSS Styles (Window > CSS Styles) and click on the All button.
5. Click on the New CSS Rule icon.
   
6. Use these settings and click OK:
   1. Selector Type: Tag
   2. Selector Name: body
   3. Rule Definition: New Style Sheet File
      
7. Save the style sheet file as main.css in your CSS Layers folder.
   
8. In the CSS Rule definition for body box, use these settings and click OK:
   1. In the Type category, change the Font-family to Verdana, Geneva, sans-serif, the Font-size to 10px, and the Color to #000000.

2. In the Background category, change the Background-color to #CCCCCC (a light gray).

9. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 2: Create the Outer Container

Next, we’ll create the large white layer that contains everything else. Using this layer to contain the others layers will create a nice, 15-pixel white border around your page. To do this, we will create an ID selector, which can be used only once by a single div tag on the page. ID styles begin with a pound (#) sign.

1. In the CSS Styles panel, click on the New CSS Style icon.
2. In the New CSS Rule box, use these setting and click OK:
   1. Selector Type: ID
   2. Selector Name: #container
   3. Rule Definition: main.css
3. In the CSS Rule definition for #container box, use these settings and click OK twice:

4. To insert the layer into the page, click inside the page and choose the following menu command: Insert > Layout Objects > Div Tag.
5. In the dialog box, select ID: container and click OK.
   
6. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 3: Create the Header

Here we’ll create a header area in which a banner image could go later. It will have a baby blue background, and have a 1-pixel white bottom border which separates it from the navigation bar.

1. Click inside the #container layer. Delete the text that automatically filled the layer but leave your cursor inside the layer.
2. Let’s try a quicker way to insert the Div tag:
   1. Open the Insert panel (Window > Insert).
   2. Make sure that Common is selected in the drop-down menu at the top of the panel.
   3. Click on the Insert Div Tag button.
      
3. In the Insert Div Tag box, click on the New CSS Rule button.
   
4. In the New CSS Rule box, use these settings and click OK:
   1. Selector Type: ID
   2. Selector Name: #header
   3. Rule Definition: main.css
5. In the CSS Rule definition for #header box, use these settings and click OK twice:

6. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 4: Create the Navigation Area

We need a rectangle below the banner for links. It will have a dark blue background and white text. It will also have a 1-pixel white bottom border, and 10 pixels of padding around its text. First, we need to tell Dreamweaver precisely where to put it (after the header div) by viewing the code.

1. Click on the Code button on the Document tool bar.
2. Find this bit of code and click just before it:
   </div>
   </body>
   </html>
   
3. Click on the Design button on the Document tool bar.
4. In the Insert panel, click on the Insert Div Tag button.
5. Click on the New CSS Rule button.
6. In the New CSS Rule box, use these settings and click OK:
   1. Selector Type: ID
   2. Selector Name: #navigation
   3. Rule Definition: main.css
7. In the CSS Rule definition for #navigation box, use these settings and click OK twice:

8. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

RGB Color Wheel

When you remove red, green, and blue light you get black, or no light at all. Mixing these primaries together in various ways gives us all the colors in the rainbow – literally. On a monitor, it’s only 16.8 millions colors. But that’s a lot, right?

Click on the image below to view a much larger version.

RGB Color Wheel

The color wheel above shows three colors in addition to the primary colors. In between each pair of primaries is a secondary color (a mix of two primaries), and two tertiary colors (a mix between a primary and a secondary). Red and green make yellow (I know, weird, huh?) Green and blue make cyan, and blue and red make magenta.

I’ve shown two formulas for each color. The first is the degree around the circle, the top (red) being 0° and a full rotation clockwise being 360°. You will see color expressed as a degree in some functions in Photoshop. In particular, it is used for the Hue slider in Image > Adjustments > Hue and Saturation.

The second formula indicates the values for red, green and blue you would enter into the RGB fields in the Color Picker. Each of these RGB values can be anywhere from zero to 255, making 256 possible values. 256 for red x 256 for green x 256 for blue = the approximately 16.8 million colors we talked about above. Zero in the Red box means that no red is contributing to the selected color. 255 in the Red box means that Red is as strong as it can possibly be in the selected color. Ditto for Green and Blue.

RGB Venn Diagram

• You can get a pure white with R:255, G:255, B:255.
• You can get a pure black with R:0, G:0, B:0.
• An equal number for all three colors (other than 0 or 255) will get you various shades of gray; the higher the number, the lighter the gray.

For more details on pinpointing just the right color, see below.

Red

Red

Red

In the RGB color wheel, red is at the top, at 0 degrees.

Pure red is created with a value of 255 for R and 0 for G and B. To achieve a darker red, reduce the value for R. To achieve a lighter red (pink), add a bit of G and B at equal amounts. Oranges can be created with pure red and some green. For example, 255-125-0 is a rich orange.

Yellow

Yellow

Yellow

In the RGB color wheel, yellow is 1/6th the way around clockwise, at 60 degrees.

Pure yellow is created with a value of 255 for R and G, and 0 for B. To achieve a darker yellow (which in light or paint ends up greenish), reduce the values for R and G. To achieve a lighter yellow, add a bit of B. A nice yellow-green requires a reduction of red.

Green

Green

Green

In the RGB color wheel, green is 1/3th the way around clockwise, at 120 degrees.

Pure green is created with a value of 0 for R, 255 for G, and 0 for B. To achieve a darker green, reduce the value for G. To achieve a lighter green, add a bit of R and B (that gets me in the mood for some Motown). Turquoise can be yours if you add a generous dose of blue to green.

Cyan

Cyan

Cyan

In the RGB color wheel, cyan is 1/2 the way around clockwise, at 180 degrees.

Pure cyan is created with a value of 0 for R, and 255 for G and B. To achieve a darker cyan, reduce the values for G and B. To achieve a lighter cyan, add a bit of R. You can get a cornflower blue by leave R at 0 and reducing G by half.

Blue

Blue

Blue

Blue, our final primary, is 2/3th the way around clockwise, at 240 degrees.

Pure blue is created with a value of 0 for R and G, and 255 for B. To achieve a darker blue, reduce the value for B. To achieve a lighter blue, add a bit of R and G. Voilet/purple is created by adding some red into a pure blue.

Magenta

Magenta

Magenta

Magenta, our final secondary color, is 5/6ths the way around clockwise, at 300 degrees.

Magenta is created with a value of 255 for R, 0 for G, and 255 for B. To achieve a darker magenta, reduce the value for R and B by equal amounts. To achieve a lighter magenta, add a bit of G. A pretty fuchsia color can be had by reducing the blue.

Browns

Browns tend to fall in the muted-orangey area. Here are a few to get you started: