sidebar1 Content

 

The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div.

Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Create a Template for Your Site

    • You can use any file that you like to create the template. If you don't like any old files that your already have, then you need to create a new file.

    • Click "File | Save as Template" from the menu. In the dialog box that appears, click the "Save" button.

    • Another dialog box will appear asking you whether you want to update links. Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file. This is what we want, since we need to configure the template.

    • By default, Dreamweaver creates a template that has no editable regions. That is, when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.

    • Select the main content section of your page by dragging your mouse over it. We will mark this area----"main content", as editable so that it can replaced with the title of whatever page you are creating.

    • Click "Insert | Template Objects | Editable Region" on the menu. A dialog box will appear. Type "Page Title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable.

    • Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Content".

    • Since the conetnt section that follows may not be present in the other pages of the website, we will mark the entire section as an "Optional Region". To do this, select the entire conetnt with your mouse.

      Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish, since the content of your block will differ from my sample page. If in doubt, just accept the default name given.

    • Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.

    The Home Page

    At present, your home page, the index.html, is not regarded by Dreamweaver as being based on the template you created. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.


    The least troublesome way to do this is to overwrite your old index.html file with a new file created based on the template. You can do this with no loss of data since your template was created from the index.html file with no changes other than to define editable regions and the like.

    1. Close all open files. To do this, click "File | Close All".

    2. Click "File | New". A dialog box appears. This time, click "Page from Template". ----The middle columns will show information about the template you created earlier, --------and the rightmost column will show a thumbnail picture of your template.

      Make sure that the checkbox for "Update page when template changes" is checked. Click "Create".

    3. Click "File | Save As". A dialog box opens allowing you to specify the filename. Enter "index.html" (without the quotes) or just select the "index.html" file that appears in the window. Click "Save". A message box appears asking if you want to overwrite the existing file. Click "Yes".

    That's it. You have replaced your old index.html with an identical copy, except that this time, Dreamweaver has recorded the index.html as being dependant on the template, so that the next time you modify the design of your template, this page will be automatically updated.

    Site Map

    A Site Map is a comprehensive list of all the documents on your website. It is a useful tool for visitors who are looking for a particular page on your website but cannot find a direct link to it from whatever page they happen to be at.

    It is also good to have because it allows search engines a way to find all the pages of your website.

    It is always a good practice that create a Site Map. In time, as you add more pages, the Site Map will become invaluable.


    By now you should have no trouble creating a new page from your template. Do so.

    Replace the "Title" field with "Site Map of Example.com" (use your site name of course) and "Main content" with "Site Map". In the main content area, create a list of links to all the other pages of your website, one link per line.

    Finally, save the page as "sitemap.html" (without the quotes).