Improving the Common Elements in Dreamweaver

Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.

Since we’ve been working with a fairly basic web site my previous tutorials, I want to take a bit of time and improve the common areas of your site by adding some additional structure to our common areas.

To do this, let’s open up our Template in Dreamweaver and look at adding some <div> tags to define our content. The <div> tag is a Division tag, it’s used in xHTML to differnentiate between different areas of our web site. In previous tutorials we used it to structure the Header, Content and Footer. Now we want to further break down those areas include distrinct regions.

The header currently has a few basic elements, the word Header, an unordered list and four items. To improve our effectiveness as web publishers we want to help browsers (and people) know what those areas are, so we’re going to add the <div> tags to:

1. Define our Site Name
2. Add and Define a Slogan
3. Define our Site Menu

First, let’s select the word Header and change it to My Site Name, then select the new text and add a <div> tag called “sitename”. Remember to use the ID, not the Class to define the name of your new area!

Next, here’s a shortcut for selecting content in Dreamweaver … put your cursor in the text and press Control-A (or Apple-A on the Mac). This will select all next tag in the hierarchy, so the first click should select the paragraph and the second will select the <div> tag named sitename.

Once you have the proper <div> selected, click the right arrow button to place your cursor after it and create a new <div> tag named “siteslogan”. Dreamweaver will now automatically add the tag along with some instructional text reading “Content for id “siteslogan” Goes Here“, we can leave that there for now.

Next step, let’s tell people that the unordered list is a menu. To do this, we need to place our cursor somewhere in the menu and use the Control-A trick until we’ve selected the whole menu. Now insert a new <div> tag labeling it with the name menu.

We are going to do the same for the footer but instead of replacing the text “Footer”, let’s delete both it and the <p> tag it’s sitting in. Now, let’s select our footer menu and create a <div> called “footermenu“. Remember, only one object per page can use and ID, so it has to be different from our header menu.

Now it’s time to add a copyright notice. Select the whole <div> for your footermenu and press the right arrow. This will allow us to create a new <div> named “copyright” insert our notice on the footer of the page. Selecting the auto generated content, let’s insert a copyright symbol from the menu using the Insert > HTML > Special Characters > Copyright menu item. This will create a © character in your text. Add the year and your name and you’re done.

There you have it, your HTML document is now properly dividing into divisions and ready for the next part of our tutorial Placing page content in Adobe Dreamweaver. Saving your Template will update your pages to include the new changes.

This tutorial is part four in a ten part series.

1. Preparing a web site in Adobe Dreamweaver
2. Building your first Dreamweaver Template file
3. Structuring your web site with Adobe Dreamweaver
4. Improving the common elements in Dreamweaver
5. Placing page content in Adobe Dreamweaver
6. Hyper linking and image management in Dreamweaver
7. Optimizing web sites in Adobe Dreamweaver
8. Adding Cascading Style Sheets with Dreamweaver
9. Putting your web site on a remote web server with Adobe Dreamweaver
10. Adding Google Analytics to your Dreamweaver Template

Other Posts of Interest

• Cool links for Adobe Dreamweaver
• Structuring your web site with Adobe Dreamweaver
• Building your first Dreamweaver Template file
• Preparing a web site in Adobe Dreamweaver
• Winter Wonderland Flash Animation Contest
• Adobe Dreamweaver Tip - Cleaning Up Unused Files
• How to make awesome 3d icons in Adobe Fireworks
• Placing page content in Adobe Dreamweaver
• Adobe MAX 2008 Discounts, AIR, Events and More
• Reflective image effect in Adobe Fireworks