Macromedia Dreamweaver MX Tutorial

Macromedia Dreamweaver MX Tutorial
(Modified with permission from Academic Technologies, CIT – Cornell University)
Teaching Resources Center
University of California, Davis
Updated June 2003
Dreamweaver Tutorial - 1

---

Making your first website using Macromedia Dreamweaver MX
Dreamweaver MX is the latest version of the web site creation program by Macromedia. This program will
enable you to go beyond Netscape Composer or Mozilla Composer by adding more flexible formatting. It
also enables one to make rollovers, navigation bars, and insert other advanced features. In addition,
Dreamweaver has an excellent site navigation tool that enables one to view and organize an entire site.
The first step in making a web site is to plan the content and design of the site. Three criteria are often
used to evaluate a web site:
1. Unity – when elements are tied together
Unity is accomplished using similar elements throughout the site, and having the parts or
pages tied together using similar backgrounds, layouts and graphical images.
2. Readability – organization into logical, manageable units
Readability refers to having link names clear for the reader and having material easily
managed within subsections.
3. Control – enables users to navigate with ease through the site
Requires well thought out navigation and flexibility in moving throughout the site.
In creating a web site the information is generated by HTML codes, very similar to the way programs
worked in the early days of word processing. The code tells the browser what kind of formatting to apply
to the text or image, follows with the text or image, and then tells the browser to stop the formatting.
With Dreamweaver, as with modern word processing programs, we no longer have to know code. The
program works as WSYWIG – what you see is what you get. As Dreamweaver becomes more sophisticated
and complex, more features become available for building web sites.
Name Your Site and Locate Web Files new Web
age
Although it is possible to start constructing a web site by composing individual pages, it is best to first
define the web site. In this way all files related to the site will be located together. All files from a single
web site should be in one folder or directory with subdirectories as necessary.
If you are working on this tutorial in one of the SITT or TRC labs, make a new folder on your desktop and
name is ‘Dreamweaver’.
The first step is to tell Dreamweaver where those files reside.
1. From the Site menu,
choose New Site…. The
Site Definition dialog box
appears.
2. Select the “Advanced” tab
in the Site Definition
dialog box. You’ll name
your site so that if you
need to you can easily
return to it.
3. In the Category window on
the left side of the dialog
box, make sure that Local
Info is highlighted. “Local
Info” refers to information
about the files on your
computer, or local system.
This is where your files
currently exist. Now you’ll
give your site a name to
distinguish it from other
sites that you have or will
publish.
Dreamweaver Tutorial - 2

---

4. In the Site Name: field, type ‘Course
Web Site’. This name refers to this
specific site, both the files that you’re
publishing and the server on which
you’re publishing those files. It is for your use— your viewers will not see it—and you’ll learn how
to use it later in the exercise.
5. In the Local Root Folder field click the Browse icon (the yellow folder). Choose Local Folder
dialog box appears.
6. Using the dialog box, find and highlight the Dreamweaver folder on your local drive, and click
Select.
7. In the HTTP address area, type the following address to tell Dreamweaver where the “root” of your
Web site is on the server:
http://trc.ucdavis.edu/sitt/yourfoldername/
Create a New Web Page a new Web Page
1. From the File menu, choose New…The New page dialog box appears.
2. Click the Create button.
3. An untitled Dreamweaver document window appears. You are now ready to start writing your Web
page. The first thing you’ll do is enter some course information.
4. In the Document window, type the name of your course
5. Press enter and type ‘University of California, Davis’.
6. On the document toolbar, locate the Title field
7. Click in the Title field, and type ‘Home Page’.
8. The title that you typed in the toolbar will not appear on the Web page, but appears in the title bar
at the top of the Browser window. If your Web page is bookmarked, the title becomes the
bookmark.
9. In the toolbar on top select the ‘Layout’ tab and click on ‘Standard View’.
Page
Save the Page
1. From the File menu, choose Save. A Save
As dialog box appears.
2. In the Save in box, locate the
Dreamweaver folder on your desktop.
This is where you will be saving all of your
work. Now you need to name the file that
you’re working on. This name is different
than the page title; it won’t appear on your
Dreamweaver Tutorial - 3

---

Web page, but you’ll see it as you organize and link your Web files.
3. Name your web page ‘index.html’. The main page in a Web site is often called index.html or
default.html. This naming scheme makes it easy for your visitors to find your page.
4. Click Save. Note: The way you name your Web pages can affect how well they work once you
place them on the Web.
RULES OF THUMB - NAMING WEB FILES
? Do not use spaces or special characters, such as those found about the number keys on the
keyboard, in your file names.
? You can use dashes and underscores. (e.g., my_page.html)
? Always use a 3- or 4-character file extension for every file
? In the case of a regular Web page, always use .html or .htm.
? We recommend you use all lower-case letters because most Web servers are case-sensitive.
Page Lay Out with Tables
Create a Table
Although it might appear that tables are somewhat advanced (and they are), they are so useful for layout
that we will learn them now. Many web sites use tables in order to organize the information on the page.
The UCDavis page (http://www.ucdavis.edu) uses a table with columns to organize text and pictures on
the page. Tables provide great layout flexibility.
Column
Column
Column
Column
Dreamweaver Tutorial - 4

---

We will place a table with 2 rows and 4
columns on the page. The far left column
will be a margin. In this way the words do
not butt up against the left side of the
screen The next left column will hold the
links to the major areas of your web site
such as Schedule, Lectures, Labs etc. The
center column will contain the relevant
information. The right column can hold
additional information or act as a margin.
This column format can be copied onto
each page so that there is good navigation
from each page and the site looks
consistent from page to page.
1. From the Insert menu, choose Table. An Insert Table dialog box appears.
2. In the Rows: field type ‘2’
3. In the Columns: field type ‘4’. You can leave the other settings as they are.
4. Type ‘100’ for percent.
5. Border = 0
6. Click OK. A table with the specified number of rows and columns appears.
7. Each square in the table is referred to as a cell.
8. Do not put anything in the first column.
9. Place the insertion point in the second column, top row, and type the following:
Home – (‘Return’)
Schedule – (‘Return’)
Lectures - (‘Return’)
Labs (if appropriate) - (‘Return’)
Assignments - (‘Return’)
Study Questions - (‘Return’)
Quizzes
(Note: you can change these categories later to fit your own course)
10. In the third column you will type the information specific for your class. Type ‘Course
Information’ (Note: To get
your cursor to the top of
the cell once you are in it,
go the the Property
Inspector toolbar and
choose the Vert pull down
menu and select Top.)
11. Save the file.
12. Nothing will be placed in the fourth column.
Your table should look like the following:
Dreamweaver Tutorial - 5

---

ADJUSTING COLUMN WIDTHS
1. If you look at your table you can see that although the column sizes are not equal, their widths are
not what we want. We want to keep the margins narrow, the links column somewhat wider and the
third column the widest of all. We must change the column widths at this point.
2. You must be in ‘Standard View’ for the following to work.
3. Place the cursor in the top left cell. The Properties box will appear at the bottom of the screen.
4. Type ‘30’ into the box with a ‘W’ to the left.
5. Move the cursor to a cell in the next column. In the Properties box type ‘133’ into the box with a
‘W’ to the left.
6. Place the cursor in the third column. Make sure the box following the ‘W’ is empty. We will adjust
this column later to be autostretch so that it changes size depending on the reader’s browser
window.
7. Move the cursor to the fourth column. In the Properties box type ‘30’ into the box with a ‘W’ to the
left.
8. You now have a table that has constant margins, navigation column, and a text column that we will
define next as an autostretch column so that users with different sized monitors can adjust the
size of the window yet be able to view everything. Save your file.
Making ‘autostretch’ columns in Dreamweaver
1. Autostretch columns are inserted in order to have the page expand and shrink horizontally to the
size of the browser window. Selection of the column that changes size is determined by the
author of the page. It may be the rightmost column which contains no text or images, or a more
central column containing text.
2. You have inserted and adjusted column sizes in the ‘Standard’ view. The Table width should be
set at 100%.
3. All columns except the autostretch column should be indicated in pixels, not %s, as you have
already done.
4. In order to make a column adjustable, switch to ‘Layout’ view by selecting “View>Table
View>Layout View”
Dreamweaver Tutorial - 6

---

5. Click on the header of the column you want to make adjustable and select “Make column
Autostretch”.
6. If you have not made a spacer image, Dreamweaver will ask you if you want to add a spacer
image. Click on ‘Yes’.
7. Your table will now have one autostretch column.
PARAGRAPH SETTINGS: CHANGING ALIGNMENT AND INDENTS
1. To center the heading ‘Name of your course’ and ‘University of California, Davis’ select the
appropriate text.
2. Click on the Align Center icon in the Property Inspector or “Text>Align>Center” from the top
menu.
Dreamweaver Tutorial - 7

---

Inserting Images
USING GRAPHICS
NOTE: Unlike cut-and-paste, inserting an image into a web page does not actually make the image part of
the page. The image and the page remain as separate files. The web page saves a pointer to the image
file,rather than placing the image in the document. The image will only appear if both the page and image
files are uploaded to the serve.
There are a number of file formats for computer graphics (e.g., PICT, EPS, etc.) For web presentations, use
GIF or JPEG. These compress picture information, and are platform independent, as is HTML. Any
computer can read them.
? GIF (Graphics Interchange Format) compression is most effective for graphics that have
contiguous areas of solid color, and compression is even greater when the color is continuous in
the horizontal direction. Use it for lettering , illustrations and simple visuals.
? JPEG (Joint Photographic Expert Group) compression is best for photographic images and where
the colors vary over short distances (e.g., blends). JPEG offers dramatic compression in file size,
sometimes by a factor of 10 (e.g. a 1500k file reduced to 150k), which may trade-off some image
quality.
Most graphics programs (e.g., PhotoShop) can save files in GIF and JPEG format, as do several shareware
programs. Locate shareware on the web at http://www.shareware.com. Remember that shareware is not
free; if you decide to use the application, please remit the shareware price.
CAPTURING IMAGES FROM THE WEB
1. It is easy to capture images from the web. Open Mozilla.
2. Click on File>New>Navigator Window .
3. Navigate to http://www.ucdavis.edu/ by typing the URL in the address bar and hitting the return
key
4. Put the cursor on the UC Davis banner. Hold down the right mouse button (in Windows) or
Control-click for Macintosh, and choose Save Image as… from the pop-up menu. MAC users can
also click and hold to see the popup menu.
5. Save the image in the same folder/directory that you saved index.html and leave the name as
ucd_logo_hm.gif
6. The image will be downloaded to your computer.
7. Go to http://pubguide.ucdavis.edu to see publishing guides and UCDavis logos and athletic marks
that you can download.
Dreamweaver Tutorial - 8

---

INSERTING IMAGES
You can place images on your page by clicking where you want the image to appear and then locating the
image you want to add.
1. Place the cursor after the words University of California in the top heading.
2. Press Return.
3. On the Insert toolbar, click the Insert Image button.
Insert Image
4. A Select Image Source dialog box appears.
5. Using the dialog box, locate and select the
ucd_logo_hm.gif image in your Dreamweaver
directory/folder on the desktop. Click Choose.
6. The image appears on your Web page.
7. In order to make the logo smaller, select the image
and grab the lower, right handle. While holding
down the ‘shift’ key, drag the handle left and up.
.
Add "Alt Text" to the image (For Accessibility)
1. Click on the image to
select it.
2. On the Property
inspector, click in the
Alt box.
3. Type the text to
describe the image.
4. Save and Preview the page. When your mouse is placed over the image, the “alt text” should
appear.
Delete an Image
1. In the Document window, click on the image to select the image.
2. Press the Delete key. The image disappears.
3. To reverse the deletion, use the Undo command. From the Edit menu, choose Undo. The image
Dreamweaver Tutorial - 9

---

re-appears on the page.
Add a New Row to the Table
After you have created a table, you may need to add information in the middle of the table. You can add
rows or columns to expand the table.
1. Click in the second row of your table.
2. From the Modify menu, choose Table, and then choose Insert Row.
3. A new row appears in the table.
Delete a row
The table can also be adjusted by removing unnecessary rows or columns.
1. Click in the second row of your table.
2. From the Modify menu, choose Table, and then choose Delete Row. The row and its contents
are deleted. Remember, you can always reverse an action by using the Undo command.
Formatting
The next step in creating web pages is to arrange the contents of the web page and to format the text. In
this section you’ll use Dreamweaver’s Property inspector, which allows you to change the font and
formatting. The Property Inspector appears on the bottom of the window. The choices on the Property
inspector change depending on the type of content or objects that are selected on the web page.
Create
Heading Styles
Font Styles
Font Size
Links
Font Color
Change Cells in
Table Width and
Background Color
Border Color
the Table
Height
1. Open index.html and select the course name.
2. On the Property Inspector, click in the Format field to display the popup menu, and choose
Heading 1. There are different sizes of Headings used on the Web. Heading 1 is the biggest,
Heading 6 is the smallest.
3. To change the font size, highlight some text and from the Size popup menu on the Property
Dreamweaver Tutorial - 10

---