ABSOLUTE VERSUS RELATIVE VERSUS STATIC POSITIONING
As you may know, a layer can have three types of positioning:
absolute position, relative position, or static position. Absolute
positioning defines the exact position of the top-left corner of the
layer by setting the left and top attributes in the Dreamweaver
Properties palette. An absolute positioned layer is considered out of
line in that it can appear anywhere in an HTML document. Relative
positioning defines the placement using the coordinates entered in the
Placement boxes relative to the object's position in the text flow of
the document. This option is not displayed in the Document window, so
you'll have to specify Relative position type through the HTML window.
Static positioning defines placement at the location the layer
occupies in the HTML document.
ADDING YOUR SITE TO THE DREAMWEAVER WEB RING
We've been discussing the sites in the Dreamweaver Web ring. The
great thing about Web rings is any site can join. If you have a
Dreamweaver-focused Web site and would like to help support and
evangelize Dreamweaver, you can apply to include your site in the
Dreamweaver Web ring.
To apply, browse to the following address and enter the required
information in the form:
In our previous tip, we described how to set the position of a
tracing image by specifying the X and Y coordinates through the Adjust
Position dialog box. As you may recall, to display the Adjust Position
dialog box, you choose View, Tracing Image, Adjust Position.
However, if you don't have a clear idea of the X and Y coordinates
to move the tracing image but you want to align it behind an
Dreamweaver object such as an image, table, or layer, you can select
the object and choose View, Tracing Image, Align With Selection.
Dreamweaver will align the upper-left corner of the tracing image with
the upper-left corner of the selected object.
ALIGNING TEXT AND FORM OBJECTS
A subscriber writes: "I'm creating a Send Us Your Comments form and
have entered text for the first name and last name form fields.
However, when I place the text next to the first and last name form
fields, the text doesn't properly align vertically with the fields."
The absolute best method to align text with form fields is to place
the text and the fields into a three-column borderless table. To do
so, in your Dreamweaver document, first choose Insert, Form. Then,
with your cursor inside the new form, choose Insert, Table. In the
resulting dialog box, enter a number equal to the number of text
fields you plan to put into your form. Then enter
3
in the Column text field and
0
in the Border text field. Click OK.
In the table Dreamweaver creates inside your form, insert the first
text label in the left column. Then, for spacing, insert a few
nonbreaking spaces in the center column. Next, insert the appropriate
text field in the right column. Move to the next table row and repeat
this process for the next text label and form field. In the end, you
will have a perfectly aligned form.
Off and on, we've been discussing the Macromedia Exchange Web site
and what a great resource it is to keep up with the latest Dreamweaver
news and to download the newest Dreamweaver features. However, some
people have commented negatively that Macromedia forces you to become
a member of macromedia.com before you can download, submit, or review
extensions.
Keep in mind, membership to the site is free and affords you
several benefits. You can receive a Macromedia newsletter with
information tailored to your needs, purchase third-party extensions,
and track your online store account. In addition, Macromedia doesn't
gather your information and hide it away from you. At any time, you
can edit your information from a single central location. For more
information about Macromedia membership, read the Membership FAQ at
the Macromedia Exchange site at
If your Web site requires fast online course development, you
should check out CourseBuilder for Dreamweaver. CourseBuilder is a
library of customizable objects that work through Dreamweaver to speed
the development of interactive online courses.
Using CourseBuilder, you can communicate with your audience through
clickable hot spots and a variety of question styles, such as multiple
choice, matching, and fill-in-the-blank. For more information on the
newest version of CourseBuilder, visit
We've been discussing ways to make the HTML code displayed in the
HTML Source window a little easier to read and follow. So far, we've
discussed turning the Wrap feature off and the Line Number feature on.
Both of these tips allow you to skim through HTML code without fear of
losing your way.
Today's tip focuses on personal choice. More specifically, do you
find Courier an easy font to read? Is the size Dreamweaver uses to
displays the font too big or too small? If the answer is yes to either
of these questions, you'll be glad to know that you can modify the
font and size Dreamweaver uses to display HTML.
To change the font or size of the HTML Source window to something
more along your tastes, choose Edit, Preferences. Then choose
Font/Encoding in the resulting dialog box. Next, choose a new font and
size from the HTML Inspector and Size list boxes. Then click OK. The
next time you open the HTML Source window, Dreamweaver will display
the HTML code in the new font and size.
In our last few tips, we discussed how easy it is to edit an image
while you are in Dreamweaver. As you may recall, you simply select an
image and choose Edit, Launch External Editor. Dreamweaver opens the
selected image in an external editor application.
You may find that Dreamweaver opens an external application that
isn't your ideal choice. Fortunately, you can easily change
Dreamweaver's external editors. To do so, choose Edit, Preferences. In
the resulting dialog box, choose External Editors. Now, select a file
extension. Then, click the Plus sign from the Editors box. In the
resulting Browse dialog box, find and select the new application you
want Dreamweaver to use when editing this file type. Once you've
chosen a new external editor, close the Preferences dialog box. From
this point on, when you select an image of this file type and click
the Edit button in the Properties palette, Dreamweaver will open the
image using the new external editor. Neat, eh?
We've been discussing tracing images and how useful they can be as
a guide to re-creating a design or graphic in Dreamweaver. You've
probably noticed that Dreamweaver places a tracing image you import in
the top-left corner of your Dreamweaver document. You may not know
that you can adjust the position of the tracing image.
To change the position of a tracing image, choose View, Tracing
Image, Adjust Position. In the resulting dialog box, enter the X and Y
coordinates where you would like to place the tracing image. Click OK,
and Dreamweaver moves the top-left corner of the tracing image to the
X and Y coordinates you specified.
A Dreamweaver tips subscriber writes: "Okay, I've used the Open
Window behavior to open a smaller browser window. However, since
multiple browser windows tend to freak out inexperienced Web users, I
want to provide the user with a large 'Close Window' graphic to close
the new window. How do I close a window?"
It's important to note that you can use JavaScript to close a
window that only JavaScript has opened. That said, place the following
link tag around your Close Window graphic to close the window, as in
the following example:
As we mentioned in our previous tip, you can use extensions to
greatly expand Dreamweaver. You can find extensions on the Web or even
write them yourself. The only requirement you need to write your own
extensions is knowledge of JavaScript and XML.
To learn more about how you can extend Dreamweaver, simply choose
Help, Extending Dreamweaver. Macromedia has provided a complete copy
of the Extensibility manual in Dreamweaver's Help system.
Recently, Nokia and Macromedia joined forces to make the Nokia WML
Studio for Dreamweaver available in beta form through the Macromedia
Exchange site. The Nokia WML Studio allows developers to visually
create content for Wireless Application Protocol (WAP) handsets.
Nokia WML Studio is a downloadable Dreamweaver extension. The
extension launches from within the Dreamweaver HTML editing
environment and provides a What You See Is What You Get development
environment for the Wireless Markup Language (WML).
As you may recall in previous versions, you could extend
Dreamweaver menus by modifying the InsertMenu.htm and CommandMenu.htm
files. However, in Dreamweaver 3, the menus.xml file has replaced
these files.
The menus.xml file now controls the entire Dreamweaver menu
structure. If you are familiar with XML, you can still modify the
menus and shortcut keys in Dreamweaver.
All Dreamweaver dialog boxes for objects, commands, and behaviors
are defined in HTML files in the Configuration directory. Therefore,
if you so desire, you could modify the dialog boxes.
For example, to modify the Table dialog box, open the
Configuration, Objects, Common directories and edit the Table.htm
file. Ah, choice is grand.
DETECTING A SHOCKWAVE FLASH 3 PLUG-IN WITH THE CHECK PLUG-IN
BEHAVIOR
As you may know, the Check Plugin behavior allows you to easily
insert the JavaScript to check for the installation of Flash,
Shockwave, LiveAudio, Netscape Media Player, and QuickTime. However,
the Check Plugin behavior doesn't give you the option to check for a
specific version of plug-in--Shockwave Flash 3, for example.
Fortunately, you can easily modify the behavior to detect the
Shockwave Flash 3 plug-in. To do so, manually enter
Shockwave Flash
in the Enter field in the Plugin dialog box. Next, enter the URL
relocation site if Shockwave Flash is found and the relocation site if
Shockwave Flash is not found. Then click the OK button.
Most Web designers use tables or layers to position page elements
exactly. However, sometimes it's difficult to estimate the exact x and
y pixel coordinates to place an object.
Dreamweaver 3 makes this task a bit easier by providing rulers you
can turn on and off. To toggle the ruler display, choose View, Rulers,
Show. If the rulers are visible, you can ascertain page x and y
coordinates by moving your cursor to the desired position and noting
the crosshair mark on the horizontal and vertical rulers.
We've been discussing Dreamweaver 3's new Quick Tag Editor. It
allows you to quickly add new HTML code or edit existing HTML code. To
quickly access the Quick Tag Editor, press Ctrl-T in Windows or
Command-T on a Mac.
As always, Dreamweaver tries to be as helpful as possible.
Dreamweaver will display a list of attributes for the particular tag
with which you're working. To see this list, once you've opened the
Quick Tag Editor, simply wait a second or two. As you will see,
Dreamweaver displays a list of attributes from which you can choose.
This is particularly helpful if you're new to HTML. However, if you
are an experienced HTML user, you may not find this list very useful.
If so, you can disable this feature. Just choose Edit, Preferences,
Quick Tag Editor and deselect the Enable Tag Hints check box.
In our previous tip, we advised you to turn off the Wrap feature in
the HTML Source window. Although the Wrap feature can make it
difficult to read and follow HTML tags, it does have its uses.
For example, it is extremely useful if you have to edit a long
string of text in the HTML Source window. Simply choose Window, HTML
Source to open the HTML Source window. Next, select Wrap so
Dreamweaver places all of the HTML code within view. Then, scroll down
the window to find your text.
We've been exploring the Studio VII Web site, a great Dreamweaver
and Fireworks Web resource. As you may recall, you can purchase
readymade design and development Dreamweaver and Fireworks Web
templates and walk through several Dreamweaver tutorials.
In addition, you can download free Dreamweaver behaviors, commands,
and sample files. For example, you can download a frame set sized like
a wide-screen movie or a behavior to dynamically change your page's
background color. To check out more commands, behaviors, and sample
files, go to
Everyone makes mistakes, including Macromedia. Some users have
reported a few Dreamweaver 3 documentation errors. While Macromedia
can't very well reprint every Dreamweaver 3 manual, it has dedicated a
Web page to list documentation corrections.
To keep up-to-date on documentation errors and corrections,
navigate to the following Macromedia Web page:
Click here
If you purchased an upgrade from Dreamweaver 2 to Dreamweaver 3,
you may be interested to know that the Dreamweaver 3 installation
process does not delete or overwrite Dreamweaver 2. In fact, even
after you install Dreamweaver 3, you can launch Dreamweaver 2.
Having both versions of Dreamweaver on your computer is a waste of
hard drive space. Therefore, once you're comfortable with Dreamweaver
3, delete the Dreamweaver 2 folder from the Macromedia folder in the
Program Files folder.
An incremental patch is available that fixes several minor issues
with Dreamweaver 3. If you plan to take advantage of the free
Dreamweaver extensions available at
http://exchange.macromedia.com
we strongly suggest you download and install the 3.1 patches. To
download the patch, go to
http://www.macromedia.com/support/dreamweaver/
Note: The 3.1 patch updates only full versions of Dreamweaver 3.0.
It does not update the 30-day trial version.
Many people love Dreamweaver so much that they create Web sites to
showcase and share the way they use Dreamweaver. One particularly good
site is the Dreamweaver Depot. This site provides you with many
extensions you can use to expand the features of Dreamweaver. To check
it out, open your favorite browser and navigate to
Before you download, submit, or review extensions at the
Dreamweaver Exchange site, you must become a Macromedia.com member.
Once you become a member, you'll receive a newsletter customized to
your interests, the ability to track your online account information,
and the ability to manage and update your profile information.
To become a Macromedia.com member, open your browser and navigate
to
In our previous tip, we told you about prepackaged designs and
Dreamweaver and Fireworks templates you can purchase from Studio VII.
In addition to Design packs, you can find some useful Dreamweaver
command, behaviors, and tutorials.
For example, Studio VII has a tutorial on how to create and use
Dreamweaver 3's new navbar command. You can see the tutorial at
Web rings are Web sites focused toward a like topic linked to one
another. Visitors can navigate the entire Web ring and eventually
arrive at the site where they began their Web journey. The best news
of all is that there's a Dreamweaver Web ring containing several
Dreamweaver-oriented Web sites. Each Web site contributes something
the Dreamweaver aficionado wants--behaviors, tutorials, commands, etc.
To begin exploring the Dreamweaver Web ring, go to
Although Dreamweaver doesn't have the capability to edit an image,
it does allow you to launch an image-editing application from within
Dreamweaver. In addition, if you decide to select and edit an image
within your Dreamweaver document, Dreamweaver will open the selected
file in the appropriate application. What's more, when you finish
editing the image, save it, and return to Dreamweaver, Dreamweaver
updates the image in your document.
To edit an image from within Dreamweaver, select an image in your
document. Then choose Edit, Launch External Editor. If Dreamweaver
recognizes the file format of the image, it will launch an external
application to edit the image.
There are three basic font colors you can set for your Web page
through the Page Properties dialog box: Text, Links, Visited Links,
and Active Links. The Text color sets the base color for all text
appearing in your Web page. The Links color sets the color of all
hyperlink text. The Visited Links color sets the color of the
hyperlink text if you have already been to the target link. The Active
Links color sets the color of hyperlink text as you click on it.
To set the base color for text, links, visited links, or active
links, choose Modify, Page Properties. In the resulting dialog box,
click the Color swatch by the appropriate attribute and choose a
color. That's all there is to it.
You can extend the features and functionality of HTML through the
use of movies, animation, or interactive programs. These specialty
programs and objects require browser plug-ins (like Apple QuickTime,
Adobe Acrobat, and Macromedia Shockwave and Flash) to play.
To insert special content into your Dreamweaver document, choose
Insert, Plugin or Flash or Shockwave. Select the object you want to
embed into your HTML document and click OK. Once Dreamweaver places
the object in your document, you can customize its attributes through
the Properties palette.
Recently, we've been discussing the new Macromedia Dreamweaver
Exchange site. As we mentioned, the Exchange site is a great source if
you want to find, download, and try extensions to expand the features
of your copy of Dreamweaver.
However, although most extensions are free, some extensions are
listed on the Exchange site that require good old cold cash.
Macromedia allows businesses to list their extensions on the site as a
courtesy to the Dreamweaver community. To purchase a Dreamweaver
extension, you'll have to click a link to the appropriate developer's
Web site.
Since it is relatively easy to create a Dreamweaver extension, you
should tread carefully when installing and trying extensions you find
on the Web. In an effort to identify reliable and secure extensions,
Macromedia maintains a list of approved extensions on the Macromedia
Exchange site at
http://exchange.macromedia.com
To find the extensions with the Macromedia seal of approval, just
look for the Macromedia Approved logo next to the extension's name.
If you decide to create Dreamweaver extensions, you will inevitably
have questions that the Extensibility manual may not answer.
Fortunately, Macromedia will not leave you out in the cold.
If you have a general question about Dreamweaver extensions, post
your question to the main Dreamweaver discussion group at
GETTING A PRINT VERSION OF THE EXTENSIBILITY MANUAL
We mentioned in our previous tip that you can add features to
Dreamweaver by writing your own extensions. Additionally, everything
you need to begin to create your own extensions is included in the
Extensibility manual of the Dreamweaver Help files.
However, if you'd like to have a printed version of the
Extensibility manual in addition to the online version, you can order
one from Macromedia. To do so, call (800) 457-1774 or go to
Many of you may have purchased Dreamweaver through an electronic
software download transaction over the Web. This allowed you to
immediately install the full version of Dreamweaver and begin to
develop Web pages.
Although you have the Dreamweaver application, you may not be aware
of some features a straight download purchase doesn't offer. For
example, a printed Dreamweaver manual to peruse, the Dreamweaver CD to
reinstall the application, and access to some of the free demos of
BBEdit and HomeSite are included on the CD. Fortunately, you can order
the Dreamweaver CD and manual through Macromedia's Web site. Simply go
to
We've been discussing the new Nokia WML Studio Dreamweaver
extension that allows you to visually create Web pages for wireless
devices. As Dreamweaver users, you are inevitably wondering about the
design limitations of WML (Wireless Markup Language) and WAP (Wireless
Application Protocol).
The good news is that WML and WAP support graphics. The bad news is
that WML and WAP support only the WBMP graphics format. The WBMP
format is a 1-bit (black and white) format. Additionally, the WBMP
image should not be larger than 150 x 150 pixels. In most cases, the
WBMP images should be much smaller. Nokia phones, for example, only
have a 96 x 65 pixel wide display.
"I want to use an ASCII character in a form button. However, I'm
not sure how to create the character."
The easiest way to create ASCII characters is to open the Character
Map utility that comes with Windows. To do so, choose Start, Programs,
Accessories, System Tools, Character Map. In the resulting
application, you'll see a map of all available characters with a
certain typeface. Choose the typeface you'd like, and double-click a
character from the map. Notice Windows places the characters you
double-click into the Characters To Copy text field. Click Copy to
copy the character.
Now switch to Dreamweaver and click the Form button. Open the
Property Inspector, place your cursor in the Label text field, and
choose Edit, Paste to insert the ASCII character into the button.
A subscriber writes: "I create HTML pages on a development Web
server running Microsoft Internet Information Server. Often, I will
modify a page and attempt to save it only to receive an error message
stating that the page is locked and cannot be modified. My only
recourse is to close the Dreamweaver document, open the HTML page
again, and redo changes. Any suggestions?"
This type of behavior can happen when you attempt to edit an HTML
page while your Web server is running. Before we get into a solution,
first be aware that you don't have to lose all of your changes simply
because you can't save your document to the open file. Save the
document as a new file. Then open the original file and copy and paste
your modifications into it.
In our previous tip, we heard from a subscriber experiencing a
file-locking problem with Microsoft IIS. The subscriber explained that
he would often receive a File Locked error message in the middle of
modifying an HTML document. The File Lock error would prevent him from
saving the document to the open file.
This behavior occurs because of the way IIS caches Web files. Some
Web files--such as ASP (Active Server Pages)--are set not to cache,
while others--such as HTML--are set to caching. Generally, caching
improves performance. However, if the HTML file you attempt to edit
and save is cached in IIS memory, Windows will perceive the file as
busy and will not allow you to write or modify the document.
To prevent IIS from caching HTML documents, open the Microsoft
Management Console, select the Home Directory, and choose
Configuration, Application Settings. In the resulting Application
Mappings dialog box, add new mappings for .htm and .html files. Then,
set the cache for these files. Good luck!
In our previous tip, we showed you the easiest way to find, create,
and insert an ASCII character into a Dreamweaver document. If you
recall, the method involves opening the Character Map application,
finding the character you want, selecting and copying it, and then
pasting it into your Dreamweaver document. Although easy, the method
requires several steps, and you must launch another application. If
you use one particular ASCII character often, it may be quicker to
enter the ASCII character directly in your Dreamweaver document.
For example, to insert the TM character into a Dreamweaver
document, simply place the cursor at the appropriate point in the
document. Then press Alt and 0153 on the number keypad. Dreamweaver
will insert the appropriate ASCII character into your document. Neat,
huh?
Every so often, you may want to use an HTML tag that is not
available through Dreamweaver. When this occurs, the only solution is
to enter the tag directly in the Dreamweaver HTML code window.
For example, Dreamweaver does not offer you a way to insert the
Blink tag. However, you can still use the tag. Simply choose Window,
HTML and insert the beginning and ending Blink tag around the text you
want to format. The following line shows an example of the Blink tag:
Dreamweaver 3 allows you to insert a placeholder for an object,
such as an image or Flash file. To do so, press Ctrl in Windows or
Option on the Macintosh and click an object from the Object palette or
choose an object from the Insert menu.
Dreamweaver will place the appropriate Object icon in your
Dreamweaver document. Later, you can select the placeholder object and
set the Object attributes to the proper source.
Macromedia recently launched a Web site for the 500,000-strong
Dreamweaver community. The Macromedia Exchange for Dreamweaver
contains free extensions, discussion groups, and other useful
Dreamweaver-focused information.
If you're not familiar with Dreamweaver extensions, they allow you
to expand Dreamweaver to add useful features such as page
reformatting, media integration, and e-commerce functionality. The
Exchange Web site offers over 100 extensions. To check out the
Macromedia Exchange Web site, navigate to
In our previous tip, we introduced you to rulers in Dreamweaver 3.
We mentioned that you can use the rulers to track the exact x and y
page coordinates.
By default, the origin point (0,0) for both the horizontal and
vertical rulers is the top-left corner of the screen. However, you can
change the origin point to any position in your document.
For example, to measure the exact pixel distance from one image to
another, click in the upper-left corner of the document window (where
the horizontal and vertical rulers meet) and drag the origin point
crosshairs to the edge of the first image. Then move your cursor to
the edge of the second image. Then measure the distance between the
origin point and the position of your cursor.
If you're like us, the Dreamweaver 3 manual is one of those books
we always keep next to our computers. However, intense development
cycles often take their toll on the spin of the manual. If your manual
has also seen better days, you can download a printable electronic
version of the Dreamweaver 3 manual.
To download a printable version of the Dreamweaver 3 manual,
navigate to
In our previous tip, we reminded you that, after resizing a browser
window, Netscape doesn't properly render an HTML page containing
layers. To that end, Dreamweaver has an Add/Remove Netscape Resize Fix
command located on the Commands menu that you can insert into your
document when you insert a layer.
In addition to that manual method, you can set Dreamweaver to
automatically insert the Add/Remove Netscape Resize Fix command each
time you insert a layer into your HTML document. To do so, choose
Edit, Preferences and select Layers. Then select the Add Resize Fix
When Inserting Layers check box and click OK. From this point on,
Dreamweaver will automatically insert the Add/Remove Netscape Resize
Fix JavaScript to your document.
As you may recall from a previous tip, Netscape has problems
dealing with DHTML layers. More specifically, if you resize a browser
window containing a Web page with layers, Netscape does not properly
redraw the page.
A solution, though clunky, is to use JavaScript to watch for a
change in the browser window size and then reload the current page. In
order to implement this solution, Dreamweaver has an Add/Remove
Netscape Resize Fix command located on the Commands menu.
Unfortunately, the Add/Remove Netscape Resize Fix command doesn't work
in a frame set. This is a limitation of Netscape and should be
addressed in the next version.
If you're a beginning Web designer or you simply don't have time to
create a full-fledged design, try Studio VII Design Packs. Studio VII
Design Packs are prepackaged Web design and development tools you can
use to quickly get a site up and running.
Each pack contains editable graphics, HTML, and Dreamweaver
templates created with Dreamweaver and Fireworks Studio. For more
information about Studio VII Design Packs, visit
In the last two tips, we explained how to move a tracing image. One
method lets you specify an X and Y position for a tracing image.
Another method lets you align the tracing image with an object in the
Dreamweaver HTML document.
There is one more method you can use to move a tracing image. You
can nudge a tracing image in one- or 5-pixel increments using the
arrow keys. To do so, choose View, Tracing Image, Adjust Position.
Once Dreamweaver displays the Adjust Position dialog box, use the
arrow keys to nudge the tracing image one pixel at a time. To move the
tracing image in 5-pixel increments, press Shift while you use the
arrow keys.
In our previous tip, we discussed how easy it is to edit an image
while you are in Dreamweaver. In addition to using the Edit, Launch
External Editor menu command to launch an external editing, you can
press Ctrl-E in Windows or Command-E on the Macintosh.
Another alternative is to select an image and choose Window,
Properties to display the Properties palette. In the lower-right
corner of the palette, click the Edit button. If Dreamweaver
recognizes the file format of the image, it will launch an external
application to edit the image. Another way to launch an external
editor is to press Ctrl in Windows or Command on the Macintosh and
double-click an image. Another method is to press Ctrl in Windows or
Command on the Macintosh and double-click an image.
In our previous tip, we mentioned how you can add to the standard
HTML Web page feature set using special programs and objects that
require plug-ins to play. If you want to proof a multimedia object
without previewing your HTML page in a browser, you can do so in
Dreamweaver.
To preview a multimedia object in Dreamweaver, select an object and
choose View, Plugin, Play. Alternatively, you can choose View, Plugin,
Play All to play every multimedia object on your HTML Dreamweaver
page. To stop playing multimedia objects, select an object and choose
View, Plugin, Stop or choose View, Plugin, Stop All.
Dreamweaver has a handy feature that lets you FTP your local files
to a remote server. However, depending on your Internet connection,
Web file transfers can take a long time. To prevent Dreamweaver from
canceling file transfers due to long upload times, you can modify the
Dreamweaver preferences.
To do so, choose Edit, Preferences. In the resulting dialog box,
select Site FTP. Next, set the FTP Connection to disconnect after 999
minutes of idle time. Click OK to close the Preferences dialog box.
From this point, Dreamweaver will disconnect a file transfer only
after 16 hours of idleness. If this isn't enough time to upload all
your Web files, you need to reconsider your file size optimization
choices.
As you may know, you can play and preview multimedia content from
within Dreamweaver. However, some plug-ins are known to crash
Dreamweaver or cause other serious problems. Dreamweaver keeps a list
of these plug-ins in a text file called Badplugins.cfg. If you try to
play multimedia content that requires one of these blacklisted
plug-ins, Dreamweaver will not attempt to launch the plug-in.
Furthermore, if you notice that a plug-in begins to crash
Dreamweaver or causes Dreamweaver to be unstable, you should add the
plug-in to Badplugins.cfg. To do so, launch a text editor and open the
Badplugins.cfg file located in the Macromedia\Dreamweaver
2\Configuration directory. Insert a new line and type the filename of
the offending plug-in, a pipe, and a description of the plug-in, like
so:
The wait is finally over. Macromedia has released Dreamweaver 3,
and as you might expect, Macromedia has improved on existing features
and added many more. One new feature, called the Quick Tag Editor,
makes viewing and editing code a breeze.
Now you have two ways to edit your HTML code. As usual, you can
choose Window, HTML Source to display your HTML source code. In
addition to this method, the Quick Tag Editor allows you to view and
edit an individual source tag without viewing your entire code.
The Quick Tag Editor works in three modes: Insert HTML, Edit Tag,
and Wrap Tag. Insert HTML allows you to quickly add new HTML code.
Edit Tag allows you to view and edit existing tags. Wrap Tag allows
you to wrap a new tag around a selection. It just keeps getting
better.
A recent subscriber asks, "My Web page design calls for 0 margins
around the HTML page. However, I'm getting a strange 15 pixels margin
offset on my HTML pages in Internet Explorer. The page appears fine in
Netscape Navigator. What am I missing?"
You're experiencing Internet Explorer and Netscape Navigator's lack
of HTML standards. To remove the page margin in both Internet Explorer
and Netscape Navigator, open your HTML page in Dreamweaver and switch
to HTML code view. Then insert the following line in the Body tag:
As we've mentioned in the past, it's always a good idea to name a
document object as you create it. This allows you to easily apply a
behavior to the object, reference the object through JavaScript, and
so forth.
However, keep in mind that if you rename an object, you must update
all the behaviors, JavaScript, and timelines associated with the
object to reference the new name.
RESETTING THE ORIGIN POINT IN THE DREAMWEAVER RULERS
In the previous tip, we discussed how to accurately measure x and y
coordinates and distances using the Dreamweaver rulers origin point.
As you may recall, to move the origin point, you click and drag the
origin point (the upper-left corner where the horizontal and vertical
rulers meet) to an area of your document.
Once you've relocated the origin point, you'll probably want to
reset the origin point back to the default (upper-left) corner of your
document page. There are two ways to accomplish this: You can choose
View, Rulers, Reset Origin, or you can double-click the upper-left
corner area where the rulers connect.
We've been discussing moving the tracing image to different areas
of your Dreamweaver document. You can move the tracing image to a
specific X and Y coordinate, align it with a selected object, or nudge
it around the document window in one- or 5-pixel increments.
As you can imagine, there will come a time when you want to move
the tracing image back into its original position in the upper-left
corner of the document window. Although you could open the Adjust
Position dialog box and enter 0 in the X and Y text fields, there is
an easier way. Simply choose View, Tracing Image, Reset Position. We
always like easier, right?
Although Dreamweaver has many wonderful features to create DHTML
effects with JavaScript, who wants to spend hours in research and
development when you can copy and paste special effects? At the Web
site
http://www.24fun.com/
you can browse through considerable libraries of HTML, DHTML,
JavaScript, and GIF animations to pick and choose the feature or
effect you want to include on your Web site.
As you may know, Dreamweaver has a behavior that allows you to open
a Web page in a new window. What's more, you can specify the features
of that window, such as size, toolbar, resizable, and so forth. The
only feature Dreamweaver doesn't allow you to specify is where on the
screen the new window appears. In this series of tips, we'll explain
how to add that feature to the default function the Dreamweaver
behavior creates.
To begin, open a new document in Dreamweaver and insert an image.
Select the image and choose Open Browser Window from the Behaviors
palette. In the resulting dialog box, name the new window, set the URL
to display, enter a width and height, and select the toolbars to
display. Then click OK to close the dialog box. Now save your page. At
this point, if you preview your page and click the image, a new
browser window will appear. Next time, we'll demonstrate how to
specify where on the screen that new browser window appears.
In our previous tip, we discussed how to use the Open Browser
Window behavior to create a JavaScript function that opens a URL in a
sized, customized window. Today, we'll demonstrate how to modify the
JavaScript function to allow us to specify the exact screen position
in which the new window appears.
To begin, select the image and switch from the Dreamweaver Layout
display to the HTML display. Notice Dreamweaver highlights the HTML
code that produces the image and the link. The JavaScript that
specifies the features of the new window are embedded in the OnClick
event of the link tag around the image. The HTML should appear similar
to the following HTML code:
<a href="#"
onClick="MM_openBrWindow('MyPage.htm','MyPage','toolbar=yes,
location=yes,status=yes,menubar=yes,scrollbars=yes,
resizable=yes,width=250,height=250')"><img src="images/go.gif"
width="20" height="23" border="0"></a>
Now, to specify the exact screen position for the window to appear,
insert the following line into the last quoted string of the
MM_openBrWindow function call:
screenX=0,screenY=0,top=0,left=0,
The final line of code should look similar to
<a href="#"
onClick="MM_openBrWindow('MyPage.htm','MyPage','toolbar=yes,
location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,screenX=0,
screenY=0,top=0,left=0,width=250,height=250')"><img
src="images/go.gif"
width="20" height="23" border="0"></a>
At this point, clicking the image will open the new window in the 0,0
position of the screen--the top-left corner.
So far, we've explained how to use the Open New Window behavior to
open a URL in a customized window. We also demonstrated how to alter
the code the behavior generates so you can specify where on the screen
the window appears. In our previous tip, we set the screen position of
our new window to 0,0--the top-left corner of the screen. Today we'll
explain how to alter the code you can pick where the window appears.
As you may recall, the following code actually calls the
Dreamweaver JavaScript function to display the new window:
<a href="#"
onClick="MM_openBrWindow('MyPage.htm','MyPage','toolbar=yes,
location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,
screenX=0,screenY=0,top=0,left=0,width=250,height=250')"><img
src="images/go.gif" width="20" height="23" border="0"></a>
The following variables actually set the new window screen position:
screenX=0, screenY=0, top=0, left=0,
As you may guess, one set of variables is for Netscape and the
other is for Internet Explorer. Screen X and Left control the
horizontal screen position and Screen Y and Top control the vertical
screen position. To set the new window to a new screen position,
simply enter a new value in the horizontal variables and a new value
in Vertical variables.
As you may remember, the Dreamweaver Web ring is a collection of
Dreamweaver-oriented sites. Generally, you navigate through the Web
ring using Previous and Next links that exist on each Web ring site.
However, if you'd rather pick and choose which Dreamweaver Web ring
site you'd like to visit, you can see a complete Web ring listing at
As you may recall, Dreamweaver automatically encodes the width and
height of an image into the HTML Img tag. Typically, the width and
height is measured in pixels. However, you don't have to keep to this
unit of measurement.
For example, to set an image to 1 inch wide, select the image and
choose Window, Properties. In the Width text field of the Properties
palette, enter
1in
and press Enter. Dreamweaver converts the 1 inch to the pixel
equivalent and resizes the image.
Dreamweaver allows even beginning HTML users to create
professional-looking Web pages. Even with all of Dreamweaver's
user-friendly features, you're inevitably going to have to know a good
deal of HTML code.
Viewing vast amounts of HTML code can be daunting even for an
experienced user. Fortunately, there's a way to make viewing and
locating HTML code a little easier. Dreamweaver allows you to change
the colors for your background screen, text, comments, and tags.
To edit the color scheme for your HTML source code window, choose
Edit, Preferences. Next, choose HTML Colors from the list of
categories. Dreamweaver then allows you to specify a color for your
background screen, text, comments, and tags. To see a color palette,
press the color swatch, and Dreamweaver displays the available colors.
The greatest thing about this option is that it also allows you to
choose a specific color for specific tags. This can be a lifesaver
when you're searching for a particular tag within a long list of code.
Most Web designers have a basic page format they use in the
beginning of every design or Web page. For us, it's a white background
and 0 margins. Eventually, you'll tire of creating a page, opening the
Page Properties dialog box, and setting your favorite attributes.
Fortunately, you can change the default page attributes a new
document uses. To do so, open the Default.html file in the
Dreamweaver/Configuration/Templates directory. Modify the page to have
the attributes you consistently use. Then save the file. The next time
you open a new document, your favorite attributes will be preset into
the new document. Neat, huh?
In the last couple of tips, we've discussed how Dreamweaver allows
you to enter values in the Properties palette using a variety of units
of measurements. For example, to set the width of an image to 2
inches, enter
2in
in the Width text field of the Properties palette.
In addition to this flexibility, Dreamweaver allows you to enter
simple math functions in the fields of the Properties palette. For
example, to set an image's width to 2 inches and 7 points, select the
image and enter
2in+7pt
in the Width text field of the Properties palette.
SETTING THE IMAGE SIZE BASED OTHER UNITS OF MEASUREMENT
In our previous tip, we explained how to size an image using either
pixels or inches as the unit of measurement. These aren't the only
units of measurement available to you. Use the following to enter a
variety of measurement values in the Properties palette:
A Dreamweaver subscriber writes: "A path to a link I want to place
on my Dreamweaver page has a space between two words. For example,
http://www.mysite.com/my dir/mypage.html. However, when I preview the
page and click the link, it fails."
First off, avoid using spaces in link paths if at all possible. The
ideal solution is to change the name of the two-word folder to one
word. If that is impossible, use the URL-formatted ASCII character for
a space in the path. For example, your link path would be
The third message uses JavaScript to submit the form through a
link. For example, to submit a form through the following image tag,
insert an OnMouseUp event in the link tag, as follows:
In our previous tip, we discussed several ways you can submit
forms, form buttons, image fields, and JavaScript. As you can imagine,
submitting a form through JavaScript is particularly flexible because
the method allows you to more fully control the actions leading up to
the form submission.
However, keep in mind that the JavaScript form submit method
doesn't work well with all captured events. More specifically, the
OnClick event is particularly inconsistent. Therefore, to prevent many
frustrating debugging moments, be sure to use the OnMouseDown or
OnMouseUp events to fire the JavaScript form submit instead of
OnClick.
In our previous tip, we mentioned the Dreamweaver forum as a
resource for answers to your questions about writing or using
Dreamweaver extensions. However, the Dreamweaver forum is not the
place for specific technical extension questions.
To post, answer, or browse more specific Extension questions, go to
the Dreamweaver Extensibility Newsgroup. Keep in mind that the
discussions in this newsgroup are of a highly technical nature. To
apply for membership in the newsgroup, go to
"I've created a custom cascading style that formats the contents of
a table cell. However, Netscape Communicator doesn't properly display
the style formatting."
This is a Netscape Communicator browser issue. Unfortunately,
Netscape does not fully support the cascading style sheets standards
set by the WC3. The best solution is to use cascading style sheets to
redefine the <TD&rt; tag and to use local formatting for special
formatting cases.
In our previous tip, we told you about a chart of CSS (Cascading
Style Sheets) tags that work consistently in both Internet Explorer
and Netscape Navigator. You can find this list at
Just as a list of approved CSS tags is an extremely useful
reference to have on hand, a list of CSS tags that has nonexistent,
buggy, or quirky cross browser support is equally handy. You can find
a list of dangerous CSS tags to stay away from at the following
address:
Although Dreamweaver already has an impressive array of features
and functions, Macromedia has built in a way for users to add new
features. Using extensions, you can easily add almost any type of new
feature to Dreamweaver 3.
To use Dreamweaver extensions, you'll need the Extension Manager to
add them to the application. The Extension Manager runs within
Dreamweaver and allows you to install extensions and keep track of
previously installed extensions. To download the Extension Manager, go
to
As you use Dreamweaver more and more, you'll find yourself toggling
to and from the HTML Code window to manually edit HTML tags.
Subsequently, you'll notice how varied the number and type of HTML tag
parameters are.
An important point to remember as you begin to create or modify
HTML tags is that the order in which the parameters appear is
inconsequential. Although Dreamweaver always places parameters in
certain order, you can rearrange that order without any ill effects on
your HTML document.
In our previous tip, we suggested using a tracing image as a guide
to convert a mockup design into an HTML page. As you may recall, you
can place a JPEG, GIF, or PNG as a tracing image in the background of
an HTML Dreamweaver document.
Although you can adjust the opacity of the tracing image, there are
times when you simply want to remove it from the document so you can
see the contents of your HTML page. Luckily, you don't have to delete
the tracing image. You can temporarily toggle the display of the
tracing image off. To do so, choose View, Tracing Image, Show. To
toggle the Tracing Image view on, again choose View, Tracing Image,
Show.
We've mentioned you can enhance your HTML pages through the use of
multimedia content that requires plug-ins to run. In addition, you can
preview the content playing directly from Dreamweaver. However, for
one reason or another, sometimes a multimedia object won't play. When
this occurs, use the following guide to troubleshoot your plug-in
content.
Be sure you've installed the correct plug-in on your machine. Check
that the plug-in version is compatible with the multimedia content.
Check that your computer has enough memory to run the multimedia
content. Keep in mind that some plug-ins require up to 5 MB of memory
to run.
Open Badplugins.cfg in a text editor. Badplugins.cfg is a list of
plug-ins that crash Dreamweaver or cause other serious problems. If
the plug-in your multimedia content requires is listed in
Badplugins.cfg, Dreamweaver will not play the content.
Although HTML code renders beautifully, it's not always easy to
read in the Dreamweaver HTML Code window. Fortunately, there are
several ways you can make reading HTML code in Dreamweaver much easier
on the eyes.
First, deselect the Wrap checkbox in the HTML Source window. If the
Wrap checkbox is selected and you resize the HTML Source window,
Dreamweaver will change the line breaks. This causes HTML to move
positions and makes it very difficult to keep your bearings.
In a previous tip, we've discussed ways to make HTML easier to read
and follow in Dreamweaver. As you recall, we suggested turning off the
Wrap feature that causes HTML to wrap according to the width of the
HTML Source window. Obviously, if HTML continually moves position when
you resize the HTML Source window, it can be very difficult to
establish landmarks as you read through your code.
In addition to turning off the Wrap feature, an excellent way to
landmark a piece of code you are reading or debugging is to select the
Line Numbers checkbox. Checking Line Numbers places a margin with a
number by each new line on the left side of the HTML Source window. In
addition to helping you read HTML, line numbers are essential when you
debug JavaScript.
Typically, most designers begin an HTML design in another program
such as Macromedia Fireworks, Adobe Photoshop, ImageReady, or (groan)
QuarkXPress or Adobe PageMaker. However, once designers create the
initial look, at some point they must re-create that design in HTML.
Duplicating a static design in HTML is usually where
inconsistencies between the original design and the final Web site
appear. To prevent your design from degenerating as it is transformed
into HTML, create a composite image of the design and import it into
Dreamweaver as a tracing image.
A tracing image is a guide you can use to re-create a design in
Dreamweaver. The image can be a JPG, GIF, or PNG image. The tracing
image is visible only in Dreamweaver, and it is never visible when you
preview your HTML page in a browser. To import an image as a tracing
image in your Dreamweaver document, choose View, Tracing Image, Load.
In the resulting dialog box, select your design image and click OK. As
Dreamweaver imports the file, it will display the Page Properties
dialog box. Here you can specify the transparency of your tracing
image. Click OK to close the dialog box. As you can see, Dreamweaver
displays the design image in place of the HTML document's background
image or color. Use the tracing image for a reference guide to create
an HTML version of your design.
In our previous tip, we introduced you to Dreamweaver 3's new Quick
Tag Editor. In today's tip, we'll show you how to use this invaluable
feature. The Quick Tag Editor has a couple of advantages over viewing
your entire source code: You no longer have to wade through more code
than you need, and you can access your source code while still viewing
your page.
The Quick Tag Editor works in three modes: Insert HTML, Edit Tag,
and Wrap Tag. Insert HTML allows you to quickly add new HTML code.
Edit Tag allows you to view and edit existing tags. Wrap Tag allows
you to wrap a new tag around a selection.
To access the Quick Tag Editor, press Ctrl-T in Windows or
Command-T on a Mac. You can also press the Quick Tag Editor button in
the Property Inspector (the pencil icon on the right side) to quickly
access the Quick Tag Editor. If you have selected an object, tag, or
text, the Quick Tag Editor will open the appropriate Quick Tag Editor.
For example, if you have selected an image, Dreamweaver will bring up
the Edit Tag box. If you access the Quick Tag Editor with nothing
chosen, it will open the Insert HTML box by default.
To go to the next mode, click Ctrl-T/Command-T again. When you have
finished editing your code, press Enter. As you will see, Dreamweaver
applies your changes and closes the Quick Tag Editor box.
One of the most important functions of any application is the
ability to customize the various features to suit your preferences.
Luckily, Dreamweaver offers customization options on many of its
functions.
One such option deals with the Quick Tag Editor. In today's tip,
we'll show you how to change your preferences when viewing changes to
your HTML code from the Quick Tag Editor.
We've discussed how you can use the Quick Tag Editor to quickly add
or edit HTML code without leaving your current page. To access the
Quick Tag Editor, press Ctrl-T in Windows or Command-T on a Mac.
Dreamweaver displays the Quick Tag Editor in one of three modes:
Insert HTML, Edit Tag, or Wrap Tag. You are now ready to enter your
new code or edit existing code.
Once you have made a change to your code, you can press Tab to move
to the next tag. When you press Tab, Dreamweaver applies the changes
you have already made. However, if you prefer to view all of your
changes only when you have finished, you can change your viewing
preference. To do so, choose Edit, Preferences. Next, select Quick Tag
Editor from the list of categories. Then, deselect the Apply Changes
Immediately While Editing check box.
is a great Web site to download Dreamweaver extensions. However, if
you're still using Dreamweaver 2, you may wonder why you can't find
Dreamweaver 2 extensions on the Macromedia Exchange site. The reason
is the Exchange site archives only extensions that work with the
Extension Manager in Dreamweaver 3.
Fortunately, most of the original Dreamweaver 2 extensions have
been updated and posted on this site. However, if you are searching
for a particular Dreamweaver 2 extension and can't locate it on the
Exchange site, it's for one of the following reasons:
New features in Dreamweaver 3 make the extension unnecessary.
The developer of that particular extension chose not to update it.
The extension has been updated but is currently being tested. Check
for the extension at a later time.
In our previous tip, we mentioned the new Nokia WML Studio
Dreamweaver extension that allows you to visually develop Web pages
for wireless devices, such as cellular phones. Web pages for wireless
devices use WML (Wireless Markup Language) and WAP (Wireless
Application Protocol) to deliver content. Although the WML and WAO
acronyms may be new to you, get used to them--most likely, you'll be
creating Web pages for this new community of Internet users very soon.
As you can guess, WML is a meta-language similar to HTML. WAP is an
emerging standard forging the way content will be delivered to
wireless devices. WML, although syntactically similar to HTML, is
based on XML. Therefore, you'll need to have some basic knowledge of
both HTML and XML before venturing into WML.
In some of our recent tips, we've discussed the Wrap feature. As
you may recall, the Wrap feature places line breaks in the HTML code
to wrap the code so it is viewable within the boundaries of the HTML
Source window. It's important to note that the Wrap feature affects
the code only in the HTML Source window. Turning Wrap on or off will
have no effect on the way your Web page is viewed.
This can be a confusing point, but keep in mind that browsers
ignore most white space, such as line breaks, when they display HTML.
The only way to create a break in displayed HTML is to use the <P&rt;
or <BR&rt; tag.
As you may know, the goal of most Web page forms is to gather
information. For that information to be useful, you must gather it in
a consistent and comparable form. Therefore, when you design HTML
forms, try to limit the use of text fields and text areas.
Text fields and text areas allow your Web visitors to enter
free-from information. Free-form information is very difficult to
compare. For example, one person may enter
USA
for the country while another person may enter
America
However, if you provide a list box of choices, every person will
choose an option that is compatible with your information.
Changes to this page are IN PROGRESS 