Macromedia Dreamweaver Basics

I nfoS heet Macromedia Dreamweaver Basics
Boston College
Introduction
Macromedia Dreamweaver 2.0 is a full-featured professional web development tool which is easy to use. It
includes WYSIWYG ("what you see is what you get") editing, HTML code editing, round trip HTML (it won't
change your code on existing pages), advanced table editing, site management tools, built in FTP client,
support for animation, DHTML and third-party tags, including ASP, Apache, Cold Fusion, Tango, and many
others. For a full list of features, see the Macromedia Dreamweaver 2.0 web page at URL: http://
www.macromedia.com/software/dreamweaver/
This InfoPage assumes that you are familiar with the basics of HTML and web page authoring. This page will
explain how Dreamweaver can be used to put a web page together, but will not explain HTML code or web
page objects (forms, tables etc). Tutorials on HTML and related items can be found on the Web Development
Resources page http://www.bc.edu/cwis/web_development.html
Starting Dreamweaver
l Follow the vendor instructions for installing Dreamweaver on your computer.
l When you have finished, double click the dreamweaver icon or choose the program from the Start---
Programs menu (Windows 95) to start the program.
l When Dreamweaver first opens, a couple windows and several palettes may open at the same time. The
appearance of your starting environment can be controlled by preferences which you set. The different
preferences will be covered later in this document.
l The only window you need for now is the Site Files window. If you do not see a window which says "Site"
in the title bar, select Site Files from the Windows menu. If there is a blank window called "Untitled" on
your screen close it. The only window you want to see is one called "Site" and the various floating pal-
ettes.
On-Line Help
If at any time while you are using Dreamweaver you have a question about how to do something, excellent on-
line help is available in HTML format.
l Click the Help button in any dialog box or select Dreamweaver Help Pages from the Help menu. (on the
Macintosh the help menu is a question mark icon in the upper right).
An example of the help contents is shown below. Some of the help windows, in particular the Dreamweaver
tutorial section, include shockwave animation to augment the information. To view these you need to have
shockwave installed on your computer. A copy should have come on your Dreamweaver CD or you can
download shockwave from the Internet at www.shockwave.com.
Februrary, 1999 Page 1

Boston College
Creating a New Site
To start working with Dreamweaver, you need to define your "site" which is composed of the remote web
server directory where the page you want to edit is located or will be located and the local directory on your
hard drive where you will keep the working copies of your web pages.
l Select New Site from the Site menu.
In the example below we are setting up a site to edit web pages on the www.bc.edu web server
(InfoEagle).
The Site Definition box will open. Along the left hand site you will see the categories which you need to
define.
l Click on Local Info. This will define the information about your local hard drive directory which will
contain the web pages you work on.
l In the Site Name box enter a name for your site.
l It's a good idea to name your site after either the web server you will be connecting to or the name of the
web project you will be working on.
For our example we'll enter www.bc.edu as the Site Name. If you were a commercial web page designer
and you were working on a set of pages for a client such as the store Mammoth Mart, you might enter
the name Mammoth Mart into the Site Name box.
l In the Local Root Folder directory, enter the path to the folder on your hard drive where you will store
the files for this web site. You can click the yellow folder to the right of the field to use the directory
browse function to locate your directory or you can type the directory path in by hand.
In our example we have entered D:\webpages\ which means we have a folder on our D: drive called
webpages where we will store the pages for the web site www.bc.edu. Because we are using a Windows
95 operating system for our example, our path looks like that. If you are using a Macintosh, the path will
look similar to MacintoshHD:HTML:Web Pages (note that the Macintosh uses the colon (:) character to
separate directories, not a slash.)
Boston College
l If your web site is such that it will contain only one home page, you can enter that home page web
address into the HTTP Address field. If you might be working on more than one web site on the same
web server or you aren't sure what the home page is yet, you can leave that blank.
l Click Web Server Info on the left column. This will define the information about your remote web server
directory where you will place your completed web pages for viewing on the Internet.
l From the Server Access menu choose FTP. This means

you will use FTP (file transfer protocol) to move your files
to/from the web server.
l In the FTP Host field enter the server name of the web
server where you will be placing your web pages. In our
example, the web server would be www.bc.edu
l In the Host Directory field you need to enter the path on

the web server to the directory where your web pages
will be placed. You would obtain this information from
your web adminsitrator when you are given an account
on the server.
In our example, the path to the main web directory on

www.bc.edu is /usr/eaglenet/www/data/bc_org.
Enter the directory path you were given by the web

administrator.
l In the Login field, enter your username for the web

server. At BC, usernames are no more than 8 charac-
ters. Enter the name in all lowercase.
l In the password field you will enter your password to the

web server, but it will not display. You have the option of
saving your password so you do not have to enter it in
the future. DO NOT DO THIS. It is a security risk to save
your password on the computer. Anyone using your
computer would then have access to your web account
and could tamper with your web pages.
l Make sure the box next to the Password field which says
Save is unchecked.
l Leave Use Firewall unchecked unless you are connecting to the web server from behind a firewall (you
will need to consult your network administrator for the preferences to set). Users at Boston College and
most outside commercial ISPs do not need to set firewall preferences.
l The Check In/Out feature is for sharing files on a server between more than one dreamweaver user so
that one person can have the file open at a time. You can read more about that in the on-line help. For
our example, we do not need to configure that as we will not be sharing any files.

Boston College
l Click on the Site Map Layout category on the

left. This enables Dreamweaver to create a
visual site map for your web site if you want. In
order for this feature to be available, you need to
insert the local folder path to your web site's
home page in the Home Page field. If you don't
know this information yet, you can leave this
blank. You can always enter this information at a
later time.
l The Site preferences are fully editable after the

initial set up so anything you want to change/add
later can be done. Click OK to create the site.
l Dreamweaver will come back and ask "Would

you like to create a cache for this site?" This
improves performance and allows Dreamweaver
to automatically update links etc.. Click the
Create button.
l When your site is set up you will see the Site window with your remote site listed on the left and your local
site listed on the right. The contents of the remote site will not show up until you log into the remote web
server. You can expand or compress the size of this window to fit your monitor comfortably.

Boston College
Creating a New Page

l From the File menu select New (Macintosh) or New Window (Windows)
A new blank window will appear where you can start building a web page. Dreamweaver is fully
WYSIWYG (what you see is what you get) so you can type in the window as you do in a word processor
and be assured that what you see on this screen is what you will see on the web (with a few exceptions
relating to web browser versions - more on that later).
l To add a title to your page, select Page Properties from the Modify menu. Through this menu you can
also change the background color (or insert a background image) and adjust the colors of links.
The Floating Palettes
Launcher Mini-Launcher
The Launcher
The launcher has buttons for opening and closing frequently accessed palettes and windows. The icons are
repeated in the mini-launcher palette at the bottom right hand side of the screen so if your screen isn't very
large, you can close this palette without losing any functionality.
The Object Palette

The Object palette contains buttons for placing various types of objects on your web page such as images,
tables, layers, etc. The Objects palette is divided into 4 groups of buttons which you can toggle through by
using a drop down menu at the top of the current palette. Each button has context sensitive help so if you
place your cursor on a button without clicking, a text box will appear telling you what that button does. The
button groups are shown below:
menu--->
Common Objects Forms Objects Head Objects Invisible Objects

Boston College
The Property Inspector

The property inspector palette displays properties for a selected object. As you select different objects, this
palette automatically changes to show you the properties available for the object you have selected.
Like the Objects palette, the Property

Inspector has context sensitive help.
Place your cursor over any of the
buttons or text in the Property Inspect
and help text will pop up to tell you what
that item does. The figure below shows
the cursor over the Text Color box in the
Property Inspector.
l Now that you understand what the various palettes do, you should organize your screen by dragging the
palettes and resizing the edit window into positions that are most comfortable to you.
l Then start working on your page. If you place your cursor in the new window and start typing, the text will
appear on the screen. Use the various palettes to add objects or format the text as you are working.
A note about cutting and pasting: when you select text and cut it, the underlying HTML tags are also
copied. This can be convenient if you are placing the text in another part of the web page and you want to
retain the formatting. However, there may be times when you want to copy or paste just the text and do
not want the HTML tags. Dreamweaver allows you to do this with the commands Copy Text Only and
Paste as Text, available in the Edit menu.
Saving Your Page

You should save your work often.
l To do this select Save As from the File menu and give your file a name. Windows will automatically add
the extension .HTM to your file. If you are on a Macintosh, you should add the extension .htm or .html
when you type in the file name.
To continue saving after you having given your file a name, select Save from the File menu.
Checking Your Page in a Web Browser

When your page is finished and you are ready to put it on the web, you should first preview it in a web browser.
Dreamweaver offers you the ability to set up

previews in as many browsers as you have
installed on your computer.
l While still looking at the editing window,

select Preview in Browser from the File
menu. If you have any browsers defined in
our Dreamweaver preferences, they will
show up under this menu.

Boston College
l To define a new browser for previewing, select Edit Browser List from the Preview in Browser sub-
nenu. The dialog box for Dreamweaver preferences will open with the category for Preview in Browser
pre-selected.
l Click the Add button to define a browser preference.
l In the Add Browser dialog box, enter the name of the browser you are defining (e.g Netscape 4.0.5) and
then use the Browse button (Windows) or the Choose button (Macintosh) to locate the browser on your
hard drive. This will place the path to the browser in the dialog box. Check off the Primary or Secondary
browser boxes if you want this browser to have one of those designations. Click OK when done.
The browser you defined will now show up in the Preview in Browser menu under File.
l From that menu, choose the name of the browser to preview your page before placing it on the web
server.
NOTE: If your web page will be viewed by a wide audience, it is a good idea to preview it in the most
popular browses and versions currently in use. At this time those browsers are: Netscape 3.0x and 4.x,
Internet Explorer 3.x and 4.x. If you are able to, previewing your page on both a Windows and a
Macintosh computer is also important since the different platforms display some colors and objects
differently.

Boston College
Placing your Page on the Web

You have saved your editing changes, previewed your file and feel it's ready for the public. Now it's time to put
your file on the web server so the world can see it.
l Close the editing window. If you have not saved changes,
Dreamweaver will prompt you to do so.
l You will see the Site Management window. At the top of the
site window before the Connect button is a drop-down menu
which contains the names of the web sites you have de-
fined. Make sure the name of the site where you want to
place the page you just edited is showing in that box. Click
the Connect button. You will be asked for your password.
l Enter your password but do NOT check the save pass-

word box or you risk someone else access your account
without your knowledge.
l Once your password is accepted you should see the list of

files on the web server on the left hand side of the screen.
NOTE: If you have trouble connecting, you need to check

your site preferences to make sure you have the server
name, the path on the server and your username correct.
From the Site menu select Define Sites to return to the
screen where you originally placed this information.
l On the right hand side of the screen, locate the file you
edited. Then on the left hand side of the screen open the
folder were you want to place the new file.
l Once you have the two locations visible, drag the icon for
the new file from the right column (your hard drive) to the
left column (the web server) and place it in the folder where
it belongs.
l As you drag the file, an outline will show on the screen to

help you position it in the correct location.
l As Dreamweaver starts to upload the page, it will ask you if you want to also upload any related items.
This includes any graphics or files on your hard drive you may have linked to in the new document.
l If you are starting a brand new site, clicking Yes is a quick way to get all those files up on the web server
at the same time.
l If you are just uploading a page you made some minor

changes to and you know that all the linked items are
already on the server, click No.
Your page is now on the web server.

Boston College
l To check that the results were as expected you should launch a web browser and put in the URL (the
page address which begins with http://) to your web page and see how it looks to the "public".
l If there are any problems, simply reopen the web page file you have on your hard drive using
Dreamweaver, make the changes, save them, then follow the above steps to copy the updated version to
the server and look at it again in the browser.
Downloading a Web Page to Edit

Downloading a file from the web server is the reverse of placing a file on the web server.
l Go to the Site Management window in Dreamweaver. At the top of the site window before the Connect
button is a drop-down menu which contains the names of the web sites you have defined. Make sure the
name of the site where you want to get the page from is showing in that box. Click the Connect button.
You will be asked for your password.
l Enter your password but do NOT check the save password box or you risk someone else access your
account without your knowledge.
l Once your password is accepted you should see the list of files on the web server on the left hand side of
the screen.
l Locate the file on the server that you want to edit. Then on the right hand side of the screen open the
folder were you want to place the new file.
l Once you have the two locations visible, drag the icon for the file you want to edit from the left column
(the web server) to the right column (your hard drive) and place it in the folder where it belongs. As you
drag the file, an outline will show on the screen to help you position it in the correct location.
l As Dreamweaver starts to download the page, it will ask you if you want to also download any related
items. This includes any graphics you may have linked to in the document or other web pages linked to
this document.
If you want to have a copy of the entire on your hard drive, or you want to be able to see any linked
graphics as you work in the local copy, clicking Yes is a quick way to get all those files downloaded at the
same time.
If you are just downloading a page to make some minor changes and you don't need to see the linked
items, click No. This will save disk space as well as download time if you are working on a large site or
over a modem.
l Double click the file on the right hand side (the local copy) to open the edit window and begin working.
Repeat the steps in the previous section for Placing a File on the Web Server to put the edited file back
on the server.
l Alternative download method: If you double click on a file on the web server instead of dragging the
file to a particular location on your hard drive site, Dreamweaver will automatically download the file and
create on your hard drive the same folder structure if finds on the web server. This can be useful for
keeping the remote and local web sites in synch.

Boston College
For example, if we opened the tvp folder on www.bc.edu and doubleclicked on the file testfile.html to
download that html file to edit, Dreamweaver would make the following directory path in the
D:\webpages\ directory that is defined as our local site: D:\webpages\bc_org\tvp\testfile.html because
the path to that document on the server is www.bc.edu/bc_org/tvp/testfile.html
Editing the Raw HTML Code

While Dreamweaver is fully WYSIWYG, it also allows you to edit the underlying (or "raw") HTML code which
makes up the web page. This can be useful for tweaking complicated pages where you want absolute HTML
precision. It also allows you to enter your own tags if you use advanced HTML, XML or DHTML.
l To view the HTML code, open the document.
l Click the < > button on the floating Launcher palette

or the mini-Launcher at the bottom of the edit
window.
The HTML code window will appear.
l This window does not have any functions other than

to let you see and edit your HTML code. There are
no buttons to automatically insert tags for you; you
type all code by hand. If you would like to work in
HTML code but want to have the program offer you
buttons for inserting tags, Dreamweaver gives you
the ability to launch an external editor with more
HTML editing features.
l If you purchase the full version of Dreamweaver,

BBEdit is included with the Macintosh version and
Allaire HomeSite is included with the Windows
version.
l Click the External Editor button in the upper left to

access the external program.
l If you have no external editor defined yet, the

Preferences window will open and the External
Editors category will be pre-selected.
l Use the Browse button next to the HTML Editor field to locate the external browser program. This will
place the path to the program in the field.
l You can also specify an external image editor in this window as well.
l Click OK when done and the external editor will load.
The external editor will not load your page automatically. You need to go to the program's File menu and
use the Open command to begin editing your web page in this program.

Boston College
l When you finish, save the changes and

quit the external editor. When you return
to Dreamweaver, it will auto-detect if the
file you had open at the time you went to
the External Editor has changed and will
prompt you to reload it. Click Yes.
Working with Templates

Dreamweaver includes a system for creating and using templates.You can create new pages from a template
or create a template after a page has been finished and then apply that template to the pre-existing page. One
of the benefits of using templates is that if you later want to change the template, Dreamweaver will offer you
the chance to automatically update all pages in your site that were created with that template. This can save
you much editing time.
Creating a New Template

l Open a new document and select Save As Template from the File menu.
l Select the Site you want to use this template for from the drop
down menu at the top of the dialog box. This is very important.
What Dreamweaver will do is create a folder called Templates (if it
doesn't already exist) at the local root level of the site you selected
and place the new template file in this folder. If the Templates folder
does not exist at the site's root level, it will not be available to use on
that site. The template will have the extension .DWT. The .DWT
extension indicates that this file is a Dreamweaver Template file.
(the same is true on the Macintosh)
For example, we'll create a new template called main_page. Our site www.bc.edu has a local root path
defined at D:\webpages\ so when we create a new template for the www.bc.edu site, a folder called
Templates will be placed inside the folder called webpages and then will be available when we choose
the www.bc.edu site in the site window. The template will then be located in the path
D:\webpages\Templates\main_page.DWT.
l Edit the page as you would any other web page. When you are finished with the content of the template,
you are read to designate which areas are editable and which are locked.
l Select the piece of the page you want the user to be able to edit.
l Go to the Modify menu and select Templates.
l From the Templates sub-menu select Mark Selection as Editable.
l A dialog box will appear asking you to name the area you selected. Type in a name and click OK. The
selected area will be highlighted (usually in green).
l Repeat the above steps until you have marked all the areas on the template that someone using the
template can edit.
Boston College
NOTE: The page title is always editable, you do not need to indicate that separately.
l Save your changes by selecting Save from the File menu and close the edit window.
l To test the template follow the instructions below.
Creating a New Page from a Template

l Select New from Template from the File menu.
l Select the site where the template you want to use is located. A
list of the templates will appear in the Templates field.
l Click on the template file you want to use as the basis for your
new file and click Select.
l A new document will appear with the locked areas colored (usually in red). You can edit text in the non-
highlighted areas only.
Applying a Template to a Pre-Existing Page

l Open the pre-existing page in Dreamweaver.
l Select Templates from the Window menu.
l A list of the available templates should appear in the Templates window.

Boston College
l Click on the template you want to apply to the page and drag it's icon onto the page. (you may need to
rearrange the windows so you can see both the Templates window and the edit window at the same
time.)
l Dreamweaver will attempt to match the parts of the pre-existing document to the editable areas of the
template. If it cannot determine exactly where the contents of the existing page should go in the template,
it will bring up a dialog box asking you where to place the contents. Usually your template will have a
large editable area. If in doubt, you can choose that and then rearrange the pieces after the template has
been applied. Do NOT select None or you will lose content.
l More detailed information on the use of templates is included in the On-line Help. To get the most out of
templates, it is strongly suggested that you consultant that information.
Sharing Templates with Other Dreamweaver Users

Dreamweaver templates can only be used by other Dreamweaver users because the code in the template file
will only be recognized by the Dreamweaver program.
l When you created a new template, a folder called Templates was placed at the root level of the site you
created the template for.
l To share that template with another user, ask the user to create a folder called Templates (if it doesn't
already exist) at the root level of the site where the template will be used.
l Copy the .DWT file from your Templates folder that you want to share on to a floppy disk.
l Ask the other user to then copy the .DWT file from the floppy disk into his/her Templates folder.
l When the user starts a new document and opens Templates from the Windows menu, the copied
template file will be available to use.

Boston College
Dreamweaver Preferences
l Select Preferences from the Edit menu.
Below are summaries of the options offered in the Preferences categories which were not covered in previous
sections. For more detailed information, click the Help button in the Preferences dialog box.
General
The General category offers you options for changing the
appearance of the user interface. Recommended settings
are to have Update Links set to prompt, have Faster
Table Editing on and have Show Only Site Window on
Startup on. The others are personal preference.
Floating Palettes Highlighting

This preference allows you to Dreamweaver allows you to create web page templates which
indicate which paletts always you can give to other dreamweaver users to create pages from.
appear in the document window. The highlighting preference lets you customize the colors used
when designating the different regions in the templates. You can
set up a template with a "locked" region that is not editable
(usually red) and an unlocked region which is editable (usually
green)
Fonts / Encoding
This is used to set the default fonts and font encoding.
HTML Colors
This allows you to set the default colors for document
background, text, comments, and tags.

Boston College
HTML Format
This allows you to set the default formatting for the raw HTML
code; indenting of table tags, wrapping, line breaks (LF UNIX
is recommended for working with BC web server) and letter
case.
HTML Rewriting
When Dreamweaver opens an existing web page, it can fix
minor errors caused by bad HTML (tags not closed for
example) as the file is opening. This preference allows you
to turn this feature on or off.
Invisible Elements
This allows you to display or hide the symbols for invisible items such as named anchors, line breaks,
comments etc. When you are starting out in HTML, having these symbols on is a good idea. Line break
symbols can crowd the page so unless you really need to see where your BR tags are, you should turn
this one off.
Layers
This preference is used to define the default settings for new layers.
Site FTP
This preference is used to set up the appearance of the Site window and configure FTP settings not
included in the New Site dialog box (such as firewall settings).
Status Bar
This preference sets the option for the status bar at the
bottom of the document window. The connection speed
setting is used in the calculation of download time estima-
tions.
Style Sheet Format

This preference controls how Dreamweaver write the code that defines the styles.
Translation
This preference controls when Dreamweaver translates server-side-include commands. The default is to
translate SSI in all documents.

Macromedia Dreamweaver Basics

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Macromedia Dreamweaver Basics

Загружено:

Авторское право:

Доступные форматы

I nfoS heet Macromedia Dreamweaver Basics

Februrary, 1999 Page 1

l Select New Site from the Site menu.

l In the Site Name box enter a name for your site.

l From the Server Access menu choose FTP. This means

l In the Host Directory field you need to enter the path on

In our example, the path to the main web directory on

Enter the directory path you were given by the web

l In the Login field, enter your username for the web

l In the password field you will enter your password to the

Februrary, 1999 Page 3

l Click on the Site Map Layout category on the

l The Site preferences are fully editable after the

l Dreamweaver will come back and ask "Would

Februrary, 1999 Page 4

Creating a New Page

The Floating Palettes

The Object Palette

Common Objects Forms Objects Head Objects Invisible Objects

The Property Inspector

Like the Objects palette, the Property

Saving Your Page

Checking Your Page in a Web Browser

Dreamweaver offers you the ability to set up

l While still looking at the editing window,

Februrary, 1999 Page 6

l Click the Add button to define a browser preference.

Februrary, 1999 Page 7

Placing your Page on the Web

l Enter your password but do NOT check the save pass-

l Once your password is accepted you should see the list of

NOTE: If you have trouble connecting, you need to check

l As you drag the file, an outline will show on the screen to

l If you are just uploading a page you made some minor

Your page is now on the web server.

Februrary, 1999 Page 8

Downloading a Web Page to Edit

You will be asked for your password.

Februrary, 1999 Page 9

Editing the Raw HTML Code

l To view the HTML code, open the document.

l Click the < > button on the floating Launcher palette

The HTML code window will appear.

l This window does not have any functions other than

l If you purchase the full version of Dreamweaver,

l Click the External Editor button in the upper left to

l If you have no external editor defined yet, the

l Click OK when done and the external editor will load.

Februrary, 1999 Page 10

l When you finish, save the changes and

Working with Templates

Creating a New Template

l Go to the Modify menu and select Templates.

l From the Templates sub-menu select Mark Selection as Editable.

l To test the template follow the instructions below.

Creating a New Page from a Template

Applying a Template to a Pre-Existing Page

l Select Templates from the Window menu.

l A list of the available templates should appear in the Templates window.

Februrary, 1999 Page 12

Sharing Templates with Other Dreamweaver Users

Februrary, 1999 Page 13

Floating Palettes Highlighting