Art 451 Forever!
Syllabus | Assignments | Links

Dreamweaver Basics

Dreamweaver is a WYSIWYG Editor:
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.

Background Color:
To select a new background color (or a background image), go to: MODIFY > PAGE PROPERTIES

(fig. A)

Text 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.

(fig. B)

Inserting Images:
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 page.

Making Links to other pages:
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: 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)

(fig. D)

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:
Because 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.

.html is 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 or .gif

.jpg is the extension for JPEG which stands for Joint Photographic Experts Group
is the extension for GIF which stands for Graphical Interchage Format