dreamweaver templates from templates2go.com Ready to use dreamweaver templates
Dreamweaver Templates home Dreamweaver Templates FAQs Dreamweaver Templates Samples Order Dreamweaver Templates Dreamweaver Training CDs Web Design News contact us

Fully compatible with Dreamweaver 4, MX and MX 2004


New timesaving Dreamweaver templates, order now at our special introductory price.

Order dreamweaver templates now


 

 

 

7 Tips for Dreamweaver and Fireworks Users
By Linda Locke, Templates2go.co


Tip #1 Setting Your Web Page Margins to Zero (0)

Have you ever wondered how to get rid of that slight offset at the top and left-hand side of your web pages? It's easy and quick to do - just select Page Properties from the Modify menu in Dreamweaver and then put a 0 in the Left Margin, Top Margin, Margin Width and Margin Height boxes.

Now when you view your web page design in either Internet Explorer or Netscape, it will be flush with the top and left-hand side of your browser and the offset magically disappears!

#2 Defining Your Sites

If you want to take full advantage of the automatic update features of Dreamweaver, you should get into the habit of always defining a site for your web pages.

To do it, just select Define Sites from the Sites menu in Dreamweaver. Then when the Define Sites window appears, click on the New button. Now just type in a name for your site in the Site Name: box and then click on the folder image to the right of the Local Root Folder: box and locate and select the folder or subfolder where the web pages for your site are stored.

Then check and make sure that the Cache: box option is selected so that Dreamweaver will create an automatic cache of your site to speed up the automatic features. Then click on the OK button and the site will be cached and all the files will appear in the Site window for the new site you just defined.

#3 Building Your Web Pages with Stacked Tables

Have you ever spent a lot of time creating an elaborate table for your web page design just the way you like it, only to have blow up on you when the cells collapse or the cell widths change when you added a new column or two? Why does this happen? Basically because since all the table elements are part of one BIG table and any time you add a column to one row, it affects all the other rows. This can be a frustrating problem that makes table modifications a nightmare.

But there is an easy way to eliminate this problem by using separate tables stacked one on top of the other, rather than trying to squeeze everything into one huge table.

Here's what I mean. At the top of your page you may have a table that contains only two columns so you insert a table with 1 row and 2 columns. Then if you need a table with 1 row and three columns, just insert another table right under the first one with those settings. Now the two tables are completely independent from each other and you can make changes in either of these tables without it affecting the other tables and wrecking havoc with your design.

#4 Give Your Web Pages a Title

Ever visit a web site and look for the page title in the Browser and see "Untitled" where the page name should be? Don't let this happen to you since it's the sure sign of a novice or forgetful web designer.

You can easily add a page title in Dreamweaver 4 and MX just by typing in your page name in the Title: box which appears right under the menus. Be sure to give your page a descriptive name that emphasizes the purpose of the page. This will help your visitors to understand the purpose of your site page and make sure that your page will be properly listed in the search engines.

#5 Inserting Symbols and Special Characters

Need to insert a copyright or trademark symbol in your web page? Just select Special Characters from the Insert menu in Dreamweaver and make your selection from the list that displays. Don't see the character you want to enter? Just select the last option Other to display a window with lots of other options.

#6 Creating a Dreamweaver Template for your Web Pages

Templates are a great way to save time and effort for your site designs. Once you have the main page created for your site, you can create a template based on it and use it to create new pages based on that design.

To create a template, first be sure you have defined a site for your web site in Dreamweaver. Then open the page you want to base the template on and select Save as Template from the File menu in Dreamweaver.

Now you need to create editable and non-editable regions for your template. The editable areas are those that you want to be able to change from page to page, such as the different text on each page. The non-editable regions are those that remain the same across all your web pages, such as the copyright date and the menu and logo for each page. These non-editable regions are important, because you can automatically change these regions across all the web pages that are created with them, by making the changes in the original .dwt templates file. The editable regions, however, remain unchanged no matter what changes you make to the .dwt template file they are based on.

To create a editable region, just select the area and then select Templates from the Modify menu in Dreamweaver and then select New Editable Region from the sub-menu. Then type a name for the editable region and click on OK to save it. Repeat the steps for any other areas of the web page that you want to be able to edit too.

When you have finished making your changes, name and save your new .dwt template file. Now when you want to create a new page from the template, just select New from Template from the File menu and a new untitled page based on the template will be created. Make sure to save your new web page first before you start making any changes to it.

#7 Creating your Page Layout in Fireworks

Designing a web page can be frustrating if you start without a basic design in mind. One of the best tips I've ever learned is to create your page layouts graphically in Fireworks and then slice and dice them and use the exported graphics to build your design in Dreamweaver. Once you've learned to design pages this way, you'll never go back to the old way.

Here's how it works. First, create a layout of your menu and other design elements in Fireworks 4 or MX. You can experiment with colors and designs freely in Fireworks and let your creativity have free reign. Once you have the design the way you like it, use the Slice tool in Fireworks to break up the design elements into separate graphics for exporting. When you slice your layout, be sure to make the slices with a tabular structure in mind, making the slices even for each row.

Once you have your layout sliced the way you want it, be sure to name your slices. To do this, just select Layers from the Window menu in Fireworks and then rename each of the slices you've created with a descriptive name. When you export the graphics, these names will be used for the gif and jpg files you export.

Now you can Export your files and use the graphics you've created in Dreamweaver to construct tables. For example, if you exported 5 graphics for your web page menu, you'd create a 5 column, 1 row table in Dreamweaver and insert each of the 5 menu graphics in each of the 5 columns. You'd repeat this process and add other tables as needed to recreate the design in html. Be sure to enter in the pixel width of each graphic in the W(idth) box in the Properties box to make everything fits snug.

You could export the html code for your sliced design from Fireworks when you export the graphics, but I don't recommend that you do this. Fireworks will create one big table from the design you created, instead of flexible stacked tables and this kind of table can be a real pain to edit if you decide to add some new columns to the design later on.

I recommend that you build the tables yourself and create separate stacked tables one on top of the other for a better and more flexible web page design that can be more easily changed.

About the Author

Linda Locke is the creator of the popular Dreamweaver Templates2go CD, which features 100 ready to use business website templates for use with Dreamweaver and Fireworks.

 

Copyright © 2005 by Regent Press. All rights reserved.
Violators will be cybercuted!