Structuring Your Web Site With Adobe Dreamweaver
Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.
For those of you how have been following my series on building a web site in Dreamweaver, you’ll know that we’ve already setup a Site, created the four basic pages of our web site and assigned a Template to the files. What we have now is technically a web site but it’s lacking a lot.
What we want to cover in this lesson is how to structure your web pages and web site to be effective. This isn’t about Dreamweaver, it’s about web standards and ensuring your web site is compatible with the expectations of groups like the W3C and search engines such as Google. It’s also common sense and if you can get in the habit of building a web site properly, it becomes easy to do maintain it later.
Adding a menu to the Template
So our first step today is to add a menu to our web site. To do this, we need to open the Template file we created already and add both text and links to the other files. This is going to be our menu, so let’s start by making sure we’re in Design view and placing a new paragraph after the word Header.
On the new line that we’ve created we want to type the word Home and press Enter. On the new line, let’s make a new entry for Services and add a new line. Do the same for Contact and About.
Now for something really cool. What is a menu? It’s a list of pages on our web site so, let’s make it a list and let’s tell Google that it’s a list. To create a list in Dreamweaver, we are going to highlight the four lines Home, Services, 
Contact and About by holding down our left mouse button and dragging the cursor over the four lines. Then, using the unordered list button on our Property panel (if you don’t have a Property panel go to Windows > Properties) we will make our menu an unordered list.
Adding the hyperlinks to our menu is our next step. Select the word Home and again using our Property panel, let’s add a new link by clicking the folder icon. Find your index.html page from the list and select it. This will turn the word Home blue, indicating that there is now a hyper link on it. Do the same for Services, About and Contact and you’ve built a menu for your web site. As a note, you can also add the hyperlink by dragging the target (circle with a target on it) to your Files panel to the right and point it at the filename.
Applying your changes to your site
Pressing Control-S at this point will Save your file and also prompt you to see if you’d like to update the rest of your web site. Yes, we want to update the web site. This will apply the changes from your template to the other four pages we’ve already created.
Building the footer for your pages
A header and a footer are basically the same on a web page, the difference being that we want one at the top and the other at the bottom but it’s best practice to have a menu on both. To add a menu to our footer we could follow the above steps or we could use Dreamweaver to make our life easier.
Place your cursor anywhere in the top menu, say for example beside the word About. You’ll notice at the bottom of your Design View document that there’s a string of HTML that reads something to the effect of <body><ul><li><a>, this is the document structure of your current object. Basically it’s saying that your cursor is located:
- Within the Body of your document
- Within an Unordered List
- Within a List Item
- Within the Anchor tag
Your document may not be exactly the same but what’s important is that you’re within the <ul> of your list. Along the bottom of your window, click the <ul> tag and you’ll see that you’ve selected the whole list (all four items). Simply Copy (Control-C) the object and you’ll have the whole menu in memory.
Now, you can go to the bottom of your document and place your cursor after the word Footer and Paste (Control-V) the menu. If you did it right you should now have a copy of your menu at the top and the bottom of your page. Click Save and update your pages. If you’d like to see your work before moving on, you can do so by opening the index.htmlfile in your Files panel and Preview (File > Preview in Browser). When you’re done, close the index.html file.
Adding Divisions
Web sites have many parts, in our case we have three distinct areas of our web site:
- Header
- Content
- Footer
It’s time that we tell Dreamweaver that we have different areas of our web site. This is important later when we get into designing our web site. So, to do this we want to select the whole area of each piece and add a Division tag.
Let’s start by selecting the whole Header of our document. We do this by placing our cursor in front of the word Header and selecting all the way to the end of the word Contact. Once that’s done, we need to make sure we have the 
Common area of our Insert panel (Window > Insert) up and select the icon for the Division tag. The icon for our Div tag is the fifth from the left, between the Table and the Image icon. Clicking this icon will prompt us for an ID or a Class name.
I’m going to take a moment and pause here, to describe the difference between the two.
A Class is used to describe a Div tag for example, you could describe a Class a needing padding, or telling the browser that this class is blue.
An ID on the other hand is giving the Div a unique identifier on the page. I’m reluctant to use the word Name because that has a different meaning in HTML but for lack of a better word, the ID is the Name of the Division.
We want to set the ID of the Div tag to header. This will tell web browsers that the material contained within this section is for the header of our document. When you’re done that, Dreamweaver should wrap a Div tag around your entire header which will appear to have no difference to you (except putting a grey line around the area) but for our layout purposes it’s huge.
Now do the same to the Footer area, calling this Div tag footer.
Finally we have to set the Div for our content area. To do this, we need to place our cursor at the end of the word Content and along the path of our document structure (at the bottom of the page) we need to select mmtemplate:editable. This will select the whole of the editable region. Adding a Div tag called “content” at this point will be our final step in making our document structure for this tutorial.
I’ve included a screen shot to the right (you can click to enlarge it) of the Template file so far. What you should notice is that we have a document with three distinct areas:
- Header
- Content
- Footer
The Header contains:
- A Title
- A Menu with four items, each hyper linked
The Content contains:
- An editable area named Content
The Footer contains:
- A Title
- A Menu with four items, each hyper linked.
Wrapping up
Save your Template and update your pages, you can preview your work to date and hopefully you’re still with me. If you have any questions or comments please let me know using the comment area below, I hope you’re enjoying the tutorial so far.
This tutorial is part three in a ten part series.
- Preparing a web site in Adobe Dreamweaver
- Building your first Dreamweaver Template file
- Structuring your web site with Adobe Dreamweaver
- Improving the common elements in Dreamweaver
- Placing page content in Adobe Dreamweaver
- Hyper linking and image management in Dreamweaver
- Optimizing web sites in Adobe Dreamweaver
- Adding Cascading Style Sheets with Dreamweaver
- Putting your web site on a remote web server with Adobe Dreamweaver
- Adding Google Analytics to your Dreamweaver Template
Other Posts of Interest
Posted on: Tuesday, October 21st, 2008Tags: adobe, dreamweaver, html, tutorial
Posted in Learning | | Read more
Did you find this article useful? You're welcome to post a link to this website along with the title but please don't copy the whole article. You can also link back using the following code:
<a http://www.thisismyurl.com/tutorials/structuring-your-web-site-with-adobe-dreamweaver/" rel="bookmark" title="Structuring Your Web Site With Adobe Dreamweaver">Structuring Your Web Site With Adobe Dreamweaver</a>
About the author.
October 21st, 2008 at 4:58 pm
I use DreamWeaver extensively. The only one I use actually, and deffinetly the best.
October 25th, 2008 at 11:30 am
Nice post.. You certainly did cover most of the stuff in creating a website.
I find Dreamweaver very tedious however, and enjoy coding in a simple program called Notepad++
November 10th, 2008 at 3:51 pm
thanks for the tutorials, very easy to use and right at my level…i’m ready for the next one!