Toolbars
Dreamweaver has 3 primary toolbars: Objects, Properties and Launcher.
The Objects Toolbar allows you to insert objects with the click of a
mouse. The Properties Toolbar is the most important of them all. It is
used to specify attributes on the selected object. The Launcher Toolbar
opens different palettes.
The Properties Toolbar
This is the toolbar you will use most often.
This is where you specify attributes for the object you are
working with. An object is anything HTML element. Text is an
object, as is a graphic, a list, a table and a form. Options on
the toolbar change according to the active object. The figure
above is the default if no object is selected. As you can see,
most of the default options have to do with the presentation of
text.
When the \'More\' arrow on the lower right corner
is selected, the Toolbar doubles in size, with some advanced
options.
With no objects selected, there are no advanced
options.
Here we show the toolbar with an image selected.
As you can tell, the options have all changed. There are fields
for width and height dimensions, links, vertical space,
horizontal space, alignment, maps ... These are all Advanced
Options that will be explained later in the tutorial.
The Objects Toolbar
The Objects toolbar is where you can easily
insert many HTML objects. With this toolbar you can insert
images, tables, horizontal rules, layers, applets, active x,
plugins, Flash, Shockwave and rollovers.
You can also toggle the items in this toolbar by
clicking on the arrow near the top. This brings up a sub-menu
where you can change to Forms, Head, and Invisibles. With Forms
you can add standard form objects. With the Head Objects, you
can define your meta tags and other information that appears in
the container. With the Invisible Objects you can add
anchors, comments, scripts and more.
The Tag
Unless you author with a large monitor, I
recommend you keep this toolbar closed to avoid clutter in your
work area. I\'ve found the more workspace I have, the easier it
is to work and the better the results.
=========================================================================
The Launcher
This is an easy way to launch certain palettes
and windows within Dreamweaver. You should note that this
toolbar also resides in the lower right corner of the
Dreamweaver window without the text descriptions. I recommend
that you learn what the icons mean, then remove this toolbar
from your workspace.
Site - This is where you can manage your
site.
Library - Here you can keep a collection
of objects just by dragging them into the window. You can also
maintain templates here.
Styles - Here you can specify and
apply Style Sheets
Behaviors - Here you can define
and apply Javascript Behaviors
Timeline - Here you can control
Dynamic HTML animations
HTML - Here you can view and edit
the source code of the document
Menu Commands
Dreamweaver has many of the standard menus as
other programs: File, Edit, View, Insert, Modify, Text,
Commands, Window and Help. Just about everything in the program
can be accessed via a menu command.
The File Menu
Under the file menu you can manage your
documents, by saving, opening, creating new documents, etc.
There are also many unique commands specific to Dreamweaver.
Import/Export - You can import XML into a
template, export editable regions (of a template) as XML, and
export CSS styles. More import/export features can be added by
using plugins.
Convert - You can convert your document
to 3.0 browser compatible or you can convert tables to layers.
Preview in Browser - You can check your
document in your browser of choice. You can also define browsers
here. When you get comfortable working in Dreamweaver, you\'ll
find yourself checking your work in the browser often. The
shortcut keys are F12 for the primary browser and Command (CTRL
for PC) F12 for the secondary browser.
Check Links - Here you can make sure all
the links within the current document are intact. You can also
check links sitewide. The shortcut keys are Command (CTRL) F7
for the open document or Command F8 for the entire site.
Check Target Browsers - You can use this
feature to check the compatibility of your document with a
browser of your choice. Dreamweaver will check the HTML in your
document for compliance with the browser you choose, and will
generate an HTML report showing errors.
Recent Documents - There is always a list
of the last few documents you worked on with Dreamweaver. You
can easily re-open the document by selecting its name from the
File Menu.
=========================================================================
The Edit Menu
Undo/Redo - Here you can undo or redo a
previous action. Shortcut keys are Command (CTRL) Z for undo and
Command (CTRL) Y for redo.
Cut/Copy - Places the selected item on
the clipboard. If Cut is selected, the item is removed from the
document. Any object can be copied to the clipboard, including
HTML elements (forms, tables). Shortcut keys are Command (CTRL)
X for Cut, or Command (CTRL) C for copy.
Paste - Pastes an item from the
clipboard. The shortcut key is Command (CTRL) V.
Paste as Text - This is useful when the
clipboard contains HTML or other code Dreamweaver would
recognize. If you want to display the code in the document,
select this option. By default, Dreamweaver will paste the code
into the source of the document and it will be applied
immediately.
Launch External Editor - This is where
you can launch the HTML editor of your choice, whether it be
BBEdit, Simpletext, Homesite or Notepad. The default editor is
specified in Preferences.
Preferences - Here is where you specify
application preferences, such as editors, HTML, and more. We
will be discussing the Preferences dialog in detail in the next
section.
Find/Find Next/Replace - This is where
Dreamweaver will look for a specific string of text (you
define). This is a powerful feature when working with large
sites. We will be discussing this feature in more detail later.
The View Menu
Here you can change aspects of how your
workspace is displayed.
Head Contents - With this selected, a
toolbar appears at the top of your document just below the
menus. Here you can quickly add or modify elements that belong
in the of the HTML document, such as Meta Tags,
Javascripts and Styles.
Invisible Elements - These are elements
that cannot be seen on the page, such as Styles, Comments,
Hidden Fields, etc. Dreamweaver will use a symbol to show that
an object is present (see below). If View | Invisible Objects
are selected, they will be displayed in your workspace like the
icon below.
Rulers/Grids - You can turn rulers and
grids on and off. You can also specify which unit to measure by.
Pixels is recommended.
Layer/Table/Frame Borders - By default,
Dreamweaver has an outline border for all these elements. You
may turn them off here.
The Insert Menu
This is where you insert objects to your page.
You can insert images, tables, horizontal rules, layers, active
x, plugins, Flash, Shockwave, rollovers, forms, form objects,
anchors, columns, scripts, line breaks, non breaking space,
server side includes and elements.
We will be discussing many of these in more
detail later in the tutorial.
Modify
This is where you modify certain elements of the
page, such as Tables, Frames and more. We will be discussing
these in more detail as we start creating documents.
Text
This is where text can be formatted. Many of
these same commands are mirrored on the Properties Palette while
working with text. We\'ll also be discussing this in more detail
as we work more with documents.
Commands
This is where you\'ll find some Dreamweaver
specific commands.
Clean up HTML - Here you can remove
redundant and empty tags, non-Dreamweaver tags or specific tags.
This feature comes in handy when working with a document either
created by someone else or by another WYSIWYG code generating
program that inserts proprietary tags.
Apply Source Formatting - Here you can
apply HTML formatting settings to the document.
Set Color Scheme - Here you can choose
from pre-set color schemes within Dreamweaver.
Sort Table - Here you can sort elements
within a table.
Format Table - Here you will find more
advanced table formatting options.
Window
Here is where you can open toolbars and
palettes, such as Properties and Site Files. You can also hide
the palettes or arrange them. There is also a list of documents
currently open within the program. This makes it easier to work
with more than one document at a time.
Preferences
This is where you set your application
preferences. We recommend you change these settings before doing
any serious work in Dreamweaver. It\'ll make your work easier in
the long run. We\'re not going to cover every single option
within this dialog box. Most of the options are self
explanatory. We\'ll take a deeper look at just a few of the most
important options.
General - We recommend you have \'Show
Site Window Only On Startup.\' The site window is where it all
begins within Dreamweaver. This is where you should manage all
your files. It\'s also easy for first-timers to close the
application inadvertently when closing a document. When the Site
Window is open, the application remains open.
We also recommend that you make sure the \'Add
Extension When Saving\' box checked. You can use either .htm or
.html. Some browsers will not recognize an HTML document without
the extension. It\'s quite easy for Mac users to leave the
extension off, since they don\'t require it to open the file.
External Editors - Here is where you
specify which HTML editor to use when modifying the code.
Dreamweaver bundles with BBEdit for the Mac and Homesite for the
PC. These are the two strongest tag editors out there, so we
recommend these for managing the code. If you want something
lighter weight, you can use Simpletext or Notepad, depending on
your platform.
To specify which program, just click on the
browse button and navigate to the application file. Once you\'ve
found it, double click and that\'s it.
You can also specify an image editor. You can
use Photoshop, or an image optimizer such as Image Ready or
Fireworks. We recommend the latter. This makes it easier to
optimize your images on the fly. Simply bring them into
Dreamweaver, select them, and click on Edit. They can then be
optimized in your program of choice, with little interruption.
HTML Format - For those who want their
code just so, this is where you specify how Dreamweaver will
handle it. We all have our preferences, a tab here, a space
there. If you communicate your preferences correctly to
Dreamweaver, it will feel like it was handcoded when you bring
it into your favorite editor.
HTML Rewriting - Dreamweaver can fix
mistakes, but it can also be wrong on occasion. If you feel you
know more than Dreamweaver, tell it so right here. It can prompt
you when it finds a mistake, or it can ignore the mistake
entirely. I\'ve found Dreamweaver to be fairly accurate when
reporting mistakes, so I have it prompt me when it finds one.
Invisible Elements - As mentioned above,
Dreamweaver can show you invisible elements with that pretty
yellow icon. Here is where you specify which ones it shows you.
It might not be necessary for it to show you each line break.
Personally I like to know everything that\'s there. But it\'s up
to you to decide.
Preview in Browser - As already
mentioned, this can be defined from the File Menu. Here is
another place where you can specify which browsers are primary
and secondary.
Site FTP - Yes, you can even upload your
site using Dreamweaver. This is where you set your communication
preferences for the FTP client, such as a Firewall, if you have
one. You can also define how long to wait for timeouts, etc.
Status Bar - I\'ve found this is to be a
useful feature. What I check most is the download time of
different modems. Dreamweaver will display the size of the page
and the download time for the page and all it\'s elements in the
status bar. You just have to specify the modem speed, which
depends on your audience.
You should browse through the rest of the
Preferences. Everyone\'s different, so some might be more
important to you than the average user. Now that you\'re
finished, let\'s start working.
