Beginning Dreamweaver MX 2004

Introduction to Dreamweaver MX 2004

Dreamweaver is a program that allows you to quickly and easily create and manage static and dynamic websites. This documentation will walk you through creating a simple web page with links and graphics. Before we can begin, you must have Dreamweaver MX 2004 installed on your computer. If you do not have Dreamweaver installed on your computer, Macromedia offers a 30-Day trial version that you can use. This can be downloaded at http://www.macromedia.com/cfusion/tdrc/index.cfm?product=dreamweaver

I. Understand basic features of Dreamweaver MX 2004

a. Document Window

This is your dreamweaver workspace. Dreamweaver is known as a WYSIWYG program because what you see in your document window will be almost identical to what you will see on the web while you are in design mode.   The doument window can be viewed in three different modes: Design, Code and Split. You can change the mode by selecting the buttons for them at the top of the document window, which look like this: .   The code and split views allow you to see and edit the actual HTML code that makes up your web page.   It is also important to note that while you are editing HTML in the split view, the changes you make will not automatically appear in the bottom design view until you click the screen there.

This is a screenshot of the document window while in design mode. This is a screenshhot with the document window in split mode

b. Insert Panel

The insert Panel is a group of easily acessible buttons that you can use to insert objects into your web page. The panel itsef is located at the top of the screen and by default should look like this:
Later on we will be using some of the buttons in this panel. Keep in mind that you can select the button that says "common" to choose a different selection of buttons to choose from. I however, find the common buttonset to be the most useful.

c. Properties Panel

The properties panel, located at the bottom of the screen, is one of the most useful tools in dreamweaver. From here you can change the properties for just about anything, from text to tables to the page itself.

This is what the properties panel looks like while text is selected. Notice how it looks very similar to microsoft word's text editing buttons.

This is the properties panel while a table is selected. From here we can change the table's height, how many rows it has and other table settings.

d. Other Panels

You may notice the group of Panels on the right hand side of the screen. Since this is documentation for Beginning Dreamweaver users, we don't need to go into those panels. They can however be useful when using things like CSS and more complicated HTML coding.

II. Create a new web page in Dreamweaver

Before we start working on our page, you should create a folder on the desktop or in your my documents folder. All the work that you do while building a web page should ALWAYS be stored in this folder. This will prevent certain problems from happening.

a. Create A New Page

To create a new page in dreamweaver, just go up to the file menu at the top of the page and select File->New

Next you will see a screen come up like the one shown on the right. If you select "Basic Page" from the "Category" list box, you will have the option to select "HTML" from the list box on the right.   Once HTML is selected you can click the create button on the bottom right of this window.   This will load the new empty web page into the document window of Dreamweaver.

This is the screen that will show when you select File-> New from the file menu at the top of the screen

b. Page Properties

now that you have a new web page created, you can set some of the settings for this page, including a background color, the default text formatting and more. The page properties screen, pictured to the right, can be accessed a few ways. 1. You can right click the screen with your mouse (while not in a table) and select page properties which will be at the bottom of the list of options. 2. You can select the Page Properties button which is located inside of the properties Panel. 3. You can go to the top file menu and select Modify->Page Properties The page font and size on this page will set the default for when you are inserting text. We will go into how to change the font for just one paragraph later.   You can set an image for a background, by selecting browse and selecting the image that you want to set. When you set a background image like this the image will be repeated like a tile, so you should be careful when using this.   You can also select Links from the Category listbox on the left. From here you can set the default properties for links. -The Link Color will be the color for all links that the user has not yet been to.   -The Visited Links color will be for a link the user has been to   -TheActive Links will be the color when the user clicks on the link.

III. Format text

a. Inserting Text

Inserting text to your page is very easy, all you need to do is select your document window and start typing. You may want to put a title for your page first, like "Welcome to my Home Page."

b. Formatting Text

When you insert this text, it will be formatted to whatever the default is. (an example of this is shown above) You may not want the title of your text to look like the rest of your text. There are many ways to change the formatting of your text within the properties panel.

If you select the text you wrote, you will be able to edit its properties in the properties panel. From the start you may recognize a few of the formatting buttons from other programs such as micosoft word. These buttons will make text bold/italic and you can set the alignment for the text.

You can also format text using default settings for titles, known as headings. You can set this by selecting the Format combo box on the left and choosing a format for your text. The picture on the right shows your different options.   This picture below shows an example of heading 1

Lastly, you can also change the font, size and color of your selected text. Using their buttons pictured below.

c. Links

Turning your selected text in to a link is very easy and your text can say anything. It does not need to say the url for the link. All you need to do is type the link in the link box as pictured below. Once you type enter, you will see your text change to the default font for all links.

*When putting a link that is not to a page in your folder you MUST ALWAYS insert the http:// in the link

When linking to web pages that are in your folder, you can select the folder icon and then select the page or file you want to link to. When doing this, the file MUST be in the same folder or a sub folder.

d. E-mail Links

You can also make a link to e-mail someone. All you need to type in for the link is: mailto: and then the e-mail address, like it is pictured below.

When a user clicks this link, it will open their default mail program to send an e-mail to the address inside

IV. Insert and edit images

a. Inserting an Image

Once you have an image that you want to insert, save in to the same folder or a subfolder inside of that folder that all of your other files are already in. Once you do this, you can go up to the insert panel and click the insert image button, which looks like this: .

This will bring up a window that allows you to browse for your file. It should already be in the correct folder, so you can just select the file and hit ok. If it is not in the right folder, try saving your web page first and then add the image.

b. Modifying an Image

You can modify an image a few ways. One way is by changing the W(idth) and H(eight) within the properties panel.

You can also change these settings by selecting the image and dragging one of the black squares shown circled below. If you do not want the image to become distorted, hold the SHIFT button while resizing a corner.

V. Publish your page online

a. Uploading your work

You want to upload all of your work into your public_html folder using ftp
This can be done using a program called WinSCP or Fugu for mac users.
Documentation can be found at http://myweb.csuchico.edu/
You can also use dreamweaver to upload your work. Documentation on that
can be found at http://myweb.csuchico.edu/dw.php

b. Common Troubleshooting

You may get a picture that looks like this:

It means your page is not linking to your image. Make sure your image and all of your work was in the same folder when you were working on the page and after you uploaded it.
Try moving the image to the correct folder and reload the page and re-import the image in Dreamweaver.