Dreamweaver is a WYSIWYG
This is an acronym for "what you see is what you get". It means
that you design your HTML document visually, as if you were using a
word processor, instead of writing the HTML (HyperText Markup Language)
in a plain-text file. Now, to be sure, sometimes it will not look exactly the same and will require checking.
How to Start:
To start a new site, open Dreamweaver and in the SITE menu select
NEW SITE. You will be asked a few questions about the site, what
you would like to name it, where it will live on your computer, etc.
After answering you will be ready to make a page in your site. In the
menu select FILE > NEW. By default a blank white page appears.
To select a new background color (or a background image), go to: MODIFY > PAGE PROPERTIES
Type something (your name or the name of your artwork) in the page and
then, if you want to change the color, font, size, style and alignment
of the text, highlight the text and change it using the tools in top
of the Property Inspector Window (fig. B). Note that you will now need to understand CSS to work with this panel.
In the menu go to INSERT > IMAGE. The image is kind of like text, in that you are able
to highlight it, align it using the same tools in the properties window
and use common text editing keystrokes to move it around (copy/paste,
delete, carriage return). Do not resize the image! I know, the
program lets you do this, but it degrades the image to make it bigger
and takes up unnecessary space to make it smaller. All image sizing
should take place in Photoshop before in you put it into the
Making Links to other
You can make pictures or text into links that, when clicked, take
you to another page. Highlight the type or image that is to become a
link, then type the name of the page or URL that you want to link to in
the Properties Window (fig. B). Or, if you cannot remember the exact name of the page you want to link to, and it already exists
in your web site folder, click on the file icon to the right of the
white space and navigate to the file. Exact names are imperative, as
links will not work, otherwise. To change the default link color, visited
link color (the color that links turn into after you have visited a
page) and active link color (the color the links turn in the instant
they are being clicked) in the Page Properties dialog box (fig. A)
To make a link to an outside URL (ie. some one else’s web page,
a page outside of your own web folder, on some one else’s server)
type the full URL in the link box, for instance: http://www.rhizome.org.
This is called an Absolute URL. The term relative URL refers
to links to pages inside your own website. These look like this: index.html and they do not ever have the "http://www".
Preview in a web Browser:
To try out the links and to see what your page actually looks like
in Netscape or Internet Explorer, go to: FILE > PREVIEW IN BROWSER and select the one you want. (The F12 key will automatically load
the primary brower) The browser will launch and your page will be displayed.
Another simple way to do the same thing is to click on the tiny world
icon in the Document Toolbar immediately above the
Dreamweaver document you are working on. (see fig. D below)
Make your main page
an index.html page:
Name the home page of your site index.html. This could be
a "splash page" or the one that contains the main menu. Servers
generally know to go to the index page, even if index.html is not typed
in the URL address.
About file names:
your files will eventually be loaded onto a server, there are certain
rules to follow and get used to early on. Don't use spaces, if you are
tempted to use a space, just use an underscore_instead. Don't use capital
letters. They are not "illegal" they just get you in trouble
because some servers are case sensitive. On the web all files need to
have extensions at the end . Those are the 3 letters at the end that
come after the period.
For html pages that will be either: .html or .htm Both
of these extensions are interpreted as html pages by web browsers.
the file extension for an HTML page, which stands for Hyper Text Markup Language.
For images it will most often be one of these: .jpg
the extension for JPEG which stands for Joint Photographic Experts Group
.gif is the extension for GIF which stands for Graphical Interchage Format