Macromedia Dreamweaver 4 Tutorial:
Created October 2001 by Nathan Kemler (GA).
- Introduction
- How do I create a new page?
- How do I edit a page already created?
- How do I save my page?
- How do I upload my page(s) to the web?
- How do I edit my text?
- How do I insert an image?
- How do I create a hyperlink?
- How do I use tables and lists in my web page?
- How do I insert a rollover image?
- How do I apply the history department's web site style sheet?
- How do I set additional page properties?
Introduction:
This should be used as a general guide to navigating around and using Dreamweaver 4 to create Web Pages. This program is a simple web editor. In other words, it is an easy, quick way to create web pages without requiring HTML programming skills. Creating a web page can be as simple as creating a document in a word processor.It can also be very complex, and Dreamweaver, like other web page editors allows you to create complex documents. But this tutorial, only on creating and editing a web page (II, III, IV, VI), saving your page to a drive or uploading it to the web (IV, V), inserting text, images, and links to other pages (VI, VII, VIII), and organizing your text and images in tables and lists (IX).
Back to TopHow do I create a new page?
Automatically when you open Dreamweaver a new page will appear, which is ready for content to be added in. If you need to create additional new pages after your first page, simply go to the toolbar at the top and select File and then New. Your new page should look similar to the following:
Back to Top
How do I edit a page already created?
In order to edit an already existing page you will need to open Dreamweaver and select File and then Open.
Toolbars:
Dreamweaver has several different toolbars and windows that can be viewed
besides the your main working area window, which is pictured above. The
most important of these are the Objects Toolbar and the Properties
Toolbar. By default this toolbar should already be viewable.
|
Objects Toolbar
|
Properties Toolbar
|
 |
If you do not see your Objects Toolbar, you will need to select Window from the top menu and then select Objects. If you do not see your Properties Toolbar, select Window and then Properties. * NOTE: Both of these toolbars, as well as the other windows
not mentioned here, are moveable. Which means the user may click
and drag these toolbars to where ever they want to. In most cases
you'll want to place the toolbars around the edges of your main
working window area. |
Top Toolbar:
On the far left side of this toolbar are three icons that let you create pages in different ways. The first of the three is just for HTML coding, the third will show no HTML coding, and the second displays both. Unless you know HTML coding, I suggest you create pages in the third icon method. To the right of these three icons is the title field of your page. To edit it, simply click within the text and enter in the desired title.
Back to TopHow do I save my page?
In order to save your work you will need to select File from your top menu and then Save. If this is the first time that you have save this particular page Dreamweaver will prompt you do create a name, extension, and location for this page. It is at this time that you will need to decide what file extension works best for you. The default is either .html or .htm, and you will need to type this in after your filename. For example:
How do I upload my page(s) to the web?
Find the icons on the bottom right of your main work window area,
and then select
the Show Site icon, 
Upon clicking this icon, a new window will open. This window is Dreamweaver's FTP (File Transfer Protocol) program. FTP is a way of transferring files from one computer to another. And that is what uploading to the web means: transferring your files from your computer to another (server) computer. The window should appear as follows:
On the right side are the files on the computer's hard drive
that you are using (Local Folder). And on the left side will be those
files on the server that you want to connect to (Remote Folder). In order
to connect to the server you will need to either select Site and
then Connect. After you have found your files that you wish to
send to server on the left side, select them and then hit the blue
up arrow (Put Files) icon, 
.
*NOTE: You will need to make sure that the server has been defined by selecting the site name in the site box.
Back to TopHow do I edit my text?
You can enter in text just like you would in any word processing program. The Properties Toolbar contains all of your text editing tools such as bold, italics, color, size, face, and alignments.
How is an image inserted?
Images that appear on the web, usually need to be either .gif or .jpeg
files. You can obtain these images by finding them on the web and (right-click,
save as…) saving them to your drive or scanning images into the computer
and saving them as .gif or .jpeg. In order to insert an image you will
need to first click the image icon, 
.
After clicking the icon you will need to locate your image and then hit
select. By clicking your image after it has been inserted you can
edit its alignment and size in the Properties Toolbar.
How do I create a hyperlink?
To create a hyperlink you will first have to select the text or image. Second, enter in the link's location in the Link field, located in the Properties Toolbar. You may also browse for a local link by clicking the folder to the right of the field. You may use either absolute or relative links. Absolute means that you type in the entire address, for example http://www.link.com/link.html. Relative means you make reference to the link in terms of it's relation to the page, for example ../link.html.Dreamweaver also has an icon for a mail link, 
.
This is located in the Objects Toolbar and appears as the following:
After clicking this icon, a box will appear asking you what you want the
link to say and what is the email address. You may also select text already
entered or an image and then click the icon.
In any case, your link in the HTML section should either look like this <http://….> or <mailto:…>.
Back to TopHow do I use tables and lists in my web page?
You will want to use tables, otherwise your text, pictures, etc., will appear sequentially in a long page and one will have to scroll down to find what they want. Tables force material to appear side-by-side.To insert a table into your page simply click the table icon,
in the Objects Toolbar.
Upon clicking the icon a table property box will appear:
Enter in the desired number of rows and cells as well as the width. To create a table with no border (visible to work with but invisible on the web), enter in the number 0.
To insert either a number list or a bulleted list click
the corresponding icon from the Properties Toolbar, 
.
At every "ENTER" key hit a new bullet or number will
appear. To end the list, click the icon a second time.
How do I insert a rollover image?
Rollovers are when you place your mouse over an image and with that action
the image switches to a new images, and then the original image returns
after the mouse is moved off of the image. To insert a rollover, click
the rollover icon on the Objects Toolbar: 
Upon clicking this icon a new window will pop up asking you to locate
the original and the rollover image, and then (if desired) to enter in
a link.
How do I apply the history department's web site style sheet?
In order for pages to have the same "look and feel" within the history department we have created a file that controls several different elements, such as the text font, color, size, the background color, and the link font, color, and size. In order to insert this you will need to select HTML/Design view from the top toolbar (the second viewing option). Within the HTML area locate the head tags (<HEAD> </HEAD>). Within these tags paste the following code:<link rel="stylesheet" href="http://www.eiu.edu/~history/include/history.css" type="text/css">
How do I set additional page properties (if not using the History Department's style sheet)?
Select from the top menu choices, Modify and then Page Properties. A new window will appear that holds several different elements:
To choose a background color just click the color box next
to that field and choose your color. If you know the HEX number, enter
it in to the right of the color box. After you have entered in your desired
fields, hit "OK" and the changes will take place.