Since we’ve been working with a fairly basic website 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.

thisismyurl.com/wp-content/uploads/2008/11/picture-2.png" rel="lightbox[roadtrip]">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 website. 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 website in Adobe Dreamweaver
2. Building your first Dreamweaver Template file
3. Structuring your website with Adobe Dreamweaver
4. Improving the common elements in Dreamweaver
5. Placing page content in Adobe Dreamweaver
6. Hyper linking in Dreamweaver
7. Working with Images in Adobe Dreamweaver
8. Adding Cascading Style Sheets with Dreamweaver
9. Putting your website on a remote web server with Adobe Dreamweaver
10. Adding Google Analytics to your Dreamweaver Template