Structuring your website with Adobe Dreamweaver
For those of you how have been following my series on building a website in Dreamweaver, you’ll know that we’ve already setup a Site, created the four basic pages of our website and assigned a Template to the files. What we have now is technically a website but it’s lacking a lot.
What we want to cover in this lesson is how to structure your web pages and website to be effective. This isn’t about Dreamweaver, it’s about web standards and ensuring your website 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 website properly, it becomes easy to do maintain it later.
Adding a menu to the Template
thisismyurl.com/wp-content/uploads/2008/10/picture-2.png" rel="lightbox[roadtrip]">
So our first step today is to add a menu to our website. 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 website 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 website. 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 website. Yes, we want to update the website. 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 website:
- Header
- Content
- Footer
It’s time that we tell Dreamweaver that we have different areas of our website. This is important later when we get into designing our website. 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 website in Adobe Dreamweaver
- Building your first Dreamweaver Template file
- Structuring your website with Adobe Dreamweaver
- Improving the common elements in Dreamweaver
- Placing page content in Adobe Dreamweaver
- Hyper linking in Dreamweaver
- Working with Images in Adobe Dreamweaver
- Adding Cascading Style Sheets with Dreamweaver
- Putting your website on a remote web server with Adobe Dreamweaver
- Adding Google Analytics to your Dreamweaver Template
[...] Structuring your website with Adobe Dreamweaver [...]
I use DreamWeaver extensively. The only one I use actually, and deffinetly the best.
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++
thanks for the tutorials, very easy to use and right at my level…i’m ready for the next one!
[...] feel free to subscribe to my RSS feed or leave a comment.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 [...]
[...] Structuring your website with Adobe Dreamweaver [...]
Thanks for the info. I’ve just started using templates and it was very useful.
One problem I have been having is the inconsistency of changes being applied to all files when I sav a template.
The last few times that I have done this, I always have gotten a different result for the number of files which were updated.
I also sometimes get errors saying a certain file could not be opened.
Is there a way to get a list of files that use the template?
hey everything in this tutorial is so fine.
but i need some more help from you.
can you please tell me, how can i use a single header and footer for all web pages for a website in dreamweaver. i have been using frontpage so far, now my company needs me to use dreamweaver.
it would be a great help from you, thanks in advance.