|
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.
|
