Read my latest blog entry: Does your web site help, or hurt your business?.
Subscribe to my RSS Feed or by Email.
  • Home
  • About
  • Services
  • Blog
  • Contact
Christopher Ross Building better web sites, one pixel at a time.

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.

  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

  • Building your first Dreamweaver Template file
  • Preparing a web site in Adobe Dreamweaver
  • How to make awesome 3d icons in Adobe Fireworks
  • Placing page content in Adobe Dreamweaver
  • Improving the common elements in Dreamweaver
  • Cool links for Adobe Dreamweaver
  • How to center content with CSS and HTML
  • Reflective image effect in Adobe Fireworks
  • How to create a reflective web site image in Photoshop
  • Winter Wonderland Flash Animation Contest
Posted on: Tuesday, October 21st, 2008
Tags: 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

Christopher Ross About the author.
Thanks for taking the time to read my blog. If you don't already know me, my name is Christopher Ross and I'm a web evangelist living in Fredericton Canada. When I'm not writing about the Internet, I'm helping small businesses improve their search engine performance or building better WordPress web sites for clients.

Please feel free to leave a comment below, or contact me if you have any questions.

6 Comments

|
comments rss [?] | trackback uri [?]

6 Responses to “Structuring Your Web Site With Adobe Dreamweaver”

  1. Pingback: Preparing a web site in Adobe Dreamweaver :: Christopher Ross
  2. elmo live Says:
    October 21st, 2008 at 4:58 pm

    I use DreamWeaver extensively. The only one I use actually, and deffinetly the best.

  3. Brad Blogging.com - Personal Blog Tips And Blog Help Says:
    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++

  4. terri peters Says:
    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!

  5. Pingback: Improving the common elements in Dreamweaver :: Christopher Ross
  6. Pingback: Building your first Dreamweaver Template file :: Christopher Ross

Leave a Reply

Amazon
LEGO - Speed Racer
BaseCamp
RiffTrax.com
LEGO - Star Wars
Total Training DVDs
BlueHost
PCSecurityShield
iTunes
Tiger Direct
Tiger Direct
Amazon
Recent Comments
  • Electric cars: Very nice post and I gain much more info from this post about, “How to useful my site for my...
  • Internet Marketing Strategies: That is really bad business, with the Internet making the world such a small place,...
  • Adam Love: wtf, that was prety blunt don’t you think?
  • George Matthews: well that’s effective, know of an easy way of title casing static sites, other than...
  • Market Secrets Blogger: At first this one click plugin install worked just fine but now I get the following error:...
  • Rodney@Blogging with WordPress: Nice work Christopher - not too shabby. You must have some pretty good backlinks....
  • david forex trading online: Thank you for letting it slide. I know it is annoying when people use keywords as their...
  • Ikki at SEO Blog: As Mr. forex trading online (I hate it when people don’t put their names on the Name...
  • David: One more strategy of search engine marketing is to create a buzz about your site in the internet. This can be...
  • Internet Marketing Strategies: Nice tutorial! JR Internet Marketing Strategies’s last blog post..Blogging Goodies...
Top Commentators
  • rv for sale (8)
  • Internet Marketing Strate... (7)
  • Electric cars (6)
  • Ikki at SEO Blog (4)
  • forex trading online (4)
  • RNB Love Songs (4)
  • Make Money Online (3)
  • Mike Collins (2)
  • PizzaForADream (2)
  • Webkinz (2)
© Copyright 2009 Christopher Ross. All rights reserved.
  • Follow my posts:
  • RSS
  • Comments
  • Email
  • Other:
  • Privacy