 |
 |
|
|
 |
|
Matt Brown
|
|
|
|
|
|
There are as many tips for Macromedia
Dreamweaver MX as there are features
multiplied by the number of Dreamweaver
MX users. One sign of a great application
is when people come up with new
ways to use the tool, or in combinations
with other tools that the application's
designers never thought of.
Although these are some of my best
tips and resources, there are many
more. Be sure to check out the resources at
the end of this article and look
at some of the other sites that are
out there on the web.
|
|
|
|
Requirements
Dreamweaver MX 2004 (Note: This tutorial also
works with Dreamweaver MX)
Take advantage of existing resources
from Macromedia
This shouldn't really need to be the first tip,
but from talking to people I realize that it
is worth reiterating. There is a load of Macromedia
resources for you to explore and use to answer
specific questions, get general information on,
or make contact with other Macromedia users.
Here are just some of them:
|
| • |
Tutorials: Each
Macromedia product ships with tutorials.
These are mostly short and give you a basic
overview of the product. Even if you are
somewhat experienced, it's worth your time
to do them with each new release of the product.
This is not so that you can see how you should do
things but so that you know how the product
expects you to work. This can often relieve
a lot of stress. Knowing what Macromedia
intended often reveals a lot more about the
feature than you expect. |
| • |
The Dreamweaver
Support Center: This
is the place to go for TechNotes and
support articles published by the Customer
Care staff. The basis for these notes
are the calls and e-mails that other
users make and the research that the
support engineers put into solving them.
I have to confess that I did not use
these nearly enough until recently. If
you are having any issue at all, you
may be surprised at what you find. |
| • |
The Developer
Center: If
you are reading this, you are here and know
how great a resource this site is. Publishing
20 or more
new articles and columns each month,
Developer Center has grown into
a major portal for Macromedia. |
| • |
The web
forums and newsgroup forums (nntp://forums.macromedia.com/macromedia_dreamweaver): These
are our user-to-user support and community
forums. Thousands of people frequent
the forums each day and Team Macromedia
volunteers are always around to help
out and give advice. This is also the
main venue for people announcing their
extensions, conferences, training sessions,
and so on. They are very much worth looking
at on a daily basis. |
| • |
The Reference Panel
in the Dreamweaver MX 2004 application: Find
the Reference Panel tab in the Code Panel.
Expand the Code Panel and select reference
books from O'Reilly, Macromedia, and Wrox
on subjects such as HTML, CSS, ColdFusion,
JavaScript, SQL, PHP, ASP, and JSP. |
|
Use Dreamweaver Extensions
On the Dreamweaver
Exchange there's a huge collection of extensions
for Dreamweaver MX. These extensions are created
by both Macromedia and hundreds of outside sources.
If you need to do something in Dreamweaver MX,
there is a good chance that someone else has done
it before and turned it into an extension. Although
most extensions are free, some are commercial.
There is also a Developer
Resource Kit CD, which comes with new extensions
that are only available on the DRK.
One example of a great extension available from
the Exchange is Web Photo Album 2.1, which allows
you to create a photo album from a folder of
images, complete with descriptions and navigation,
all from one wizard. This is a fantastic way
to get a collection of images online fast; it
even automatically creates the navigational links
from page to page. I use it for all my digital
photos. In addition to displaying photos to friends
and family on the web, it helps me create pages
that show me all of my photos in one location.
This helps me choose which ones to use on the
final site.
|
Learn HTML with the Reference Tab
One of the really cool things about
Dreamweaver MX is that if you are coming into
it from another code editor, odds
are good that you were removed from the
code that the tool generated. In Dreamweaver
MX, you are always one click away from a reference
about the code that you make. In effect, you
have an HTML tutor right there with you.
If you create a new page and simply add the
one element that you are interested in, you can
determine that it's what you want in Design view  .
Then view the page in split-screen mode  or
Code view  to
see the code that's generated. If you want to
tweak the code by hand to see how it works, see
the results of your change in Design view.
You can use Dreamweaver MX without being an
HTML expert. But if you want, Dreamweaver MX
can make you a code expert. To learn HTML, check
out the Reference tab in the Code panel group
(choose Window > Reference). Here you get
the complete O'Reilly HTML Reference, O'Reilly
CSS Reference, O'Reilly JavaScript reference,
O'Reilly Pocket PHP Reference, O'Reilly ASP.NET
Reference, O'Reilly SQL Language Reference, UsableNet
Accessibility Reference, the Wrox ASP 3.0 and
JSP references, Macromedia CFML and Function
reference, and more. These are the definitive
works in the web industry and they are each probably
worth $50 or more in stores. In Dreamweaver MX,
you have the complete versions at your fingertips.
|
Use the Tag Inspector
As you work in Dreamweaver MX, you will
notice that a list of tags appears at the bottom
of the window. These tags represent the tree
location of where your cursor is in the document.
For instance, as I type this, my Tag inspector
displays: <body><p>.
This shows me where I am and what code is being
generated behind the scenes. By clicking the
tag, you select each tag. By right-clicking the
tag (shown below), you can edit it in the Quick
Tag Editor, apply styles to that specific tag
instance, or remove the tag altogether. (This
also removes any child tags associated with the
tag you are deleting.)
|
|
In
this illustration, for example, I can place my
cursor in the table cell and see that it is in
a <tr> tag
set within a <table> tag
set within a <td> tag
set nested within another <tr> tag
set within another <table> tag
set in the document <body> tag
set. From there I can select any of the parents
of the tag set that I am in.
As you can see, I right-clicked the <tr> tag.
I can add a CSS style to the parent tag of the <td> tag
where my cursor is. If you have a complex table
and are having trouble figuring out what the
structure of the table is, this tool is indispensable.
You can also modify tag attributes in the Tag
Inspector panel (Window > Tag Inspector) as
shown below:
|
|
Improve your tables
It's pretty easy to work with tables in
Dreamweaver MX but there are some things that people
overlook from time to time.
You can turn a table into a layout tool if you
combine some cells together into column spans
and row spans. To do this, select the cells you
want to combine. On the bottom half of the Properties
inspector at the bottom of the window, click
on the merge cell button, as shown:
|
|
If
you prefer to use a keyboard shortcut to the
Properties inspector, select the cells you want
to merge and press the M key to merge the cells.
Next to the merge cells button is the split
cell button, which is used to break apart cells.
If you select a table tag, the table
properties appear at the bottom of the Properties
inspector. These six buttons are indispensable
if you are using tables for design:
|
|
Use
the top row of buttons to remove all the
widths of the cells in the table, change the
values to pixels for absolute sizes, or change
the widths to percentages to allow the contents
to stretch and reflow as the window size changes.
Use the bottom row of buttons to
remove all the row heights or change them
to either pixels or percentages. If you are
having problems with tables not behaving
the way you expect when you merge cells or
drag out the column widths or row heights,
these table controls are where you should
start.
Work Easily in Code View
There is a new set of features to help
you hand-code more efficiently and with greater
accuracy than before. This is a great feature for
people learning HTML. While in Code view, you are
provided code hints and code completion as you
type your code.
In Code view, start a new tag anywhere by pressing
the < key. As soon as you do this, a pop-up
menu with all available tags appears.
When you type a letter, the menu jumps to tags
beginning with that letter. When you type another
letter, the list of tag options narrows even
more. Select a tag from the pop-up menu either
by pressing the Enter key or by double-clicking
the tag name:
|
|
If
you press your spacebar after typing the tag,
a list of all possible tag attributes
available for that tag appears. You select these
attributes the same way you selected a tag.
If you select one of these tag attributes, you
see the opening and closing quotes for the attribute.
All you need to do is type the value and close
the tag.
By using this feature you eliminate the chance
of typos and misspellings. It also improves your
knowledge of HTML because you see all the values
that are available for that tag. For instance,
the <table> tag
has an "id" attribute but not a "name" attribute,
yet the <img> tag
has "id" and "name" attributes.
Yet another cool tool for learning HTML.
Visit external
resources
I am only listing three main external resources
because from these you can reach many other sites
with interesting and useful content. Visiting
these sites and getting to know their content
can save you loads of time when you have a question,
and they can provide a whole world of new ideas
for you to consider:
|
| • |
InterAKT: Free and commercial Dreamweaver extensions, forums, and various articles for dynamic website development. |
| • |
Dreamweaver
FAQ.com: An excellent resource
for all users. The team at DWFAQ has
tips, tutorials, and products for sale. |
| • |
Project
VII: This site has a set
of very active user forums, tutorials,
products for sale, and articles.
|
| • |
DMXZone: A
venerable site with many tutorials, products,
and FAQs.
|
|
|
|
|
|
About the author
Matt Brown was formerly a Community Manager for
Macromedia. He has served as technical editor
for more than a dozen software books. Matt
has taught courses at Foothill College and
San Francisco State's Multimedia Studies Program
and is a regular speaker at conferences and
User Groups. Matt is now working as a photographer for AuctionDrop. |
|
|
|
|
|
Try
Buy