Dreamweaver Basics A r t 451

 

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 (like BBedit).

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)

Page Title:
Also in the Page Properties dialog box (fig. A), you can select a title for the page. This title that shows up on the top of the browser window and if some one makes a bookmark of your page, it is the title of the bookmark.

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 this is different than the page properties dialog box. If you can't find the properties window, go to WINDOW > PROPERTIES.

(fig. B)

Inserting Images:
In the menu go to INSERT > IMAGE, or click the insert image button (it has a tree on it) in the common tab on the insert bar (see fig. C) and navigate to the image you wish to put on the page. It will appear where the blinking cursor was on the page. 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.


(fig. C)

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). in the white area next to the word "Link". 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)


(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 Because the most commonly used image file formats used on webpages are those that compress the images into smaller file sizes.

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

 

© 2005 Amy Youngs - Multimedia Authoring Main Page