In this article, I'll provide you with a bunch of cheesy sample images for a pretend web page template. But I'll also provide you with concrete, albeit basic, information regarding how to create a master template for a web site using Dreamweaver 2004 MX.
Creating a template in Dreamweaver is very similar to creating a template in Microsoft Word or other programs. You need to design and/or add all the static elements that will become part of the template...items that you want to appear on every subsequent page that will be created from this template.
The template must also be saved as a template and saved into a Template directory within the project site files. Then, whenever you need to create a new page for your web site, you just create the new page from the master template designated to that site. Furthermore, you'll save lots of time modifying your site, because if you add information to the template, it will be added to all the pages of your site. This makes updating or adding links quite simple. It also helps to ensure consistency...a sure sign of a professional site. And it also helps avoid errors because you won't forget to update one page, since all pages are tied to the template update.
There are many ways to layout a template, but one of the most common ways is to use a Layout Table. You can think of it as adding a main table to the page, and then drawing out cells within that table. These cells become your content areas.
To start laying out your framework, you need to move into the Layout Mode. Click View > Table Mode > Layout Mode, as shown below.
A Help dialog box will appear that explains how you can use icons to quickly add the elements you'll need. But we'll use the menus, in the hopes that it'll provide more clearer meaning.
The first thing you need to add is your base Layout Table. To do this, click Insert > Layout Objects > Layout Table and draw out a table that will serve as the base size of your web page displayed.
That said, don't worry about the length too much, because the page will adjust in length if you add a lot of content. This will serve as the minimum size of the page. So don't worry about making the table very long.
However, the width of the page will not change unless content forces it to do so and that would mess up your page layout. So it's a good idea to set the width to the max size you'll need. But, you'll also want to consider the size of a monitor! Don't make it wider than your visitors can easily view. It's best to make the width around 8 to 8.5 inches, maximum. Click View > Ruler to view precise measurements.
Once the base layout table is drawn, you now need to add cells in the format you'll need to structure your page. You'll be clicking Insert > Layout Object > Layout Cell a lot. Therefore, this is where using the Cell icon from the Insert toolbar can come in handy when you need to add a lot of cells.
Start inserting Cells. Now this can take awhile to get right, depending on the layout structure you want. That is why it would be wise for you to first draw out a sample of what you want the page to look like using paper and pencil. It will save you a lot of time making adjustments, as you'll see.
In the image below, I've added a sidebar cell to add some links, a top cell for a logo, a long cell under that for some navigation and now I'm drawing out the cell that will hold the main content of the page.
However, I now realize that I'd prefer to have the logo cell spread across the full width of the page. That means that I have to select the sidebar cell and drag it down into place by pulling down on a handle. This is why it would have saved me time to have a good idea of my desired layout before I started working with the computer!
One of the really nice things about drawing out cells in Dreamweaver is that, although you can release the cell at any time, it will click into place when it lines up exactly with other cells. So you can just drag it down to line it up to the other cells you have.
Once I pull down the sidebar cell, I'll also have to pull the top logo cell over to the left to fill in that space. Or I can add a new cell in the empty location to fill that, if I want.
After I pull the cell to the left, I can click to select that cell and click Insert > Image. This drops my logo into the top cell.
I've also decided that I'm too lazy to create one long navigation bar, so I now need to pull the long nav (navigation) cell in and add several others. This will provide me with a cell for each of the individual navigation items I plan to add. These will serve as main links to click around the main pages of my site.
After the cells are created, I can insert images or even create Roll-Overs (images that change when you mouse over the image) or I can add a Pop-Up menu. However, for this article I won't be covering those more advanced features. I'll just be adding Text to represent my section links to the site.
I add text to each of the cells. I could have used one long cell, but using individual cells allows me to more evenly space the cells and just set all the text alignment to Center. Text alignment is done from the Property toolbar.
Assuming I haven't created my own CSS (Cascading Style Sheet) for the site, I can use the default styles presented in Dreamweaver. I select my nav text and apply Heading 2 to each, as shown below. (Note that creating your own style sheet (CSS) is a better way to go, if you're planning to customize font changes.
I can now also apply background color or formatting to my cells. And if I choose one cool color, I can either pass the color by using the color number, or just using the Color Selector to suck up the color I want to be applied to the selected cell, as shown below.
There are several ways to set hyperlinks in Dreamweaver. However, the easiest way is to just select the text you want linked, then grab the linking tool...which looks like a circle with a cross in it...and drag it over to your files, to target the file you want linked, as shown below.
Along the sidebar, I'll add links that will be used for navigating down this page. Similar to how the real MouseTrax.com works, site navigation for main pages is along the top and jump navigation (up/down the individual page) is located along the side.
But keep in mind that, if this is the plan, then you would actually want to create nested templates. I won't be getting into that in this article, as it's a bit more advanced. The idea is that the main site page is created with one master template. The next level of pages are created using a nested template from the main template. This allows various levels of customization across pages.
If you make changes to the main template, these changes will go across all pages, since the nested templates are also linked to the main template.
However, if you need to customize just the set of pages that are based on a nested (sub) template, then you change only that sub template and those changes will be made only to the pages that were created using the sub (nested) template.
Whatever you decide, once you have your templates created, you need to add Editable Regions to the template. These are areas where you (or someone else) can add content. This is like adding an open or unlocked area to the page. The user adding the content in the Editable Region won't be allowed to make modifications to the main template layout without having access to that template.
To add an Editable Region, click Insert > Template Objects > Editable Region.
If you haven't already designated your page as a template, Dreamweaver will convert it when you add this template feature.
To save your page as a template, click File > Save As and click the drop down to save it as a Template File (*.dwt).
You need to name the Editable Region. You'll be presented with a default (EditableRegion1) name, but it's a good idea to add a more descriptive name.
As you can see in the image below, the Editable Region is now shown with a tab marker that shows the name of that region. The name is also duplicated within the region just to hold it open so you can more easily see it, as well as select that content when you want to replace it with new information.
After you finalize and save your template, you can now create new site documents from this template and all the elements you've already added to this template will appear on each of the subsequent pages. However, remember, you must save the Template into a Template folder within your site so they appear in the File > New dialog box.
Click File > New > Templates. Choose your site and you'll see all the templates related to that site. In the image below, you can see that I have a master template for the TechTrax site, but I now also have a Dian_DWTemlate page. From the Preview in the below image, you can see this is the template that I've just created.
A new page is now created with all the template elements already added and all the links already set. And you'll notice in the image below that when I mouse over the sidebar, the cursor changes to a circle with a line through it...designating that I cannot make any changes to this area. To change anything in these areas, I would need to open the master template again. And changes to this template will be reflected across all the pages created with this template.
But I can add any information/image I want into the BodyContent Editable Region, as you can see in the image below.
To add another page, I just click File > New again, select my template, and add content to this new page. Later, if I decided that I wanted to change the overall layout of my site, such as adding a more sophisticated navigation bar, I could modify the template and that information and/or images would be added to all the pages created from this template.
|
