How to Create a Website with Dreamweaver
1.
Create a new folder on
your flash drive or H drive. Give the folder a single name such as
"attribution."
Note:
It is very important
that you have just one word for the title or multiple words connected by a dash
or underline. YOU CANNOT
HAVE SPACES, PERIODS, PARENTHESES OR OTHER PUNCTUATION OR SYMBOLS IN THE TITLE:
attribution_theory
(OK)
attribution
theory (Bad! Do not do this!)
CREATING AN INDEX PAGE
2.
Launch Macromedia
Dreamweaver. Select "Create New: HTML". Save the untitled document by
selecting "save" from the "file" menu (or click the save
button). Save the document IN THE FOLDER YOU JUST CREATED. Save the document as "index". The suffix
".htm" should automatically be added. On a Mac you'll see the .htm as
you save it. On a Windows machine, make sure the "file format" box
says .htm. So the actual title of you file will be "index.htm". Note: "htm" will be at the end of every
page you create. "Htm" means the page is saved in a format that can
be displayed on the Internet. "Index" is the name you use for the
central (home) page in a folder – think of it as the index page.
3.
At the top of your
document (now it's "index.htm") there is a box that says
"Title". Click in the box and give your page a title. The title can
have multiple words and spaces. Note:
the title of a page is different from the document name. The document name will
be part of the Internet address for your web page. The page title is what
appears at the very top when someone goes to your site. It is also the name
displayed when the page is bookmarked (added as a favorite).
4.
Go to the
"Modify" menu and select "Page properties" (or click the
"Page properties" button in the toolbar). In the pop-up window, you
can change the background color of your page. Do this by simply clicking the
box next to "background" and then clicking on the color you want.
Click "OK" when you are done. Note:
if you want to get fancy, you can add a background image. Do this by first
saving an image in your folder. Then select the "browse" button and
then select the image.
5.
Now we will start typing
on the page itself. First, put a title at the top of the page. Do this by just
typing it in. You can modify the text by selecting it and then using the
toolbar above your document to make changes. Modify your title by making it
bigger, changing the color, and centering it. Note: this toolbar is called the "properties" window. It
allows you to change the font, size, style, etc just like in a word processor.
If it is not displayed, select "properties" from the
"Window" menu.
6.
Now type in two
subtitles, such as "Background Information on Goal Theory" and
"Analyzing Calvin." Align these subtitles with the left side of the
page. Modify the text if you want with the properties window.
7.
Hit return a few times
and then insert a horizontal line by clicking on the icon that looks like a
horizontal line in the toolbar (you might have to first select "HTML"
in the drop down menu. Alternatively, select "horizontal rule" from
the "Insert" menu.
LINKING TO AN EXTERNAL
WEBSITE
8.
Below the horizontal
line, type "PSY [347 or 349] Motivation Project Homepage" and center
the text. Link this text to our motivation project homepage by doing the
following:
The
text should go blue and be underlined. You've just made a hyperlink! Note: when you make a link to a page outside your
folder, you need to type in the whole address (http://www. . . ). But when you
link to a page inside your folder, you only have to type in the name of the
document (see # 13).
9.
Test whether your link
works by clicking on the little icon on the top of the page that looks like the
earth and then select "preview in [a list of web browsers should be
available]." (Alternatively you can select "preview in browser"
from the "File" menu.) Then click on the link you made and see if it
takes you to our motivation project homepage.
CREATING A WEB PAGE THAT
IS LINKED TO THE INDEX PAGE
10.
Now we'll make another
web page that you will link to from the index page. This page should relate to
the first subtopics on the index page. Open a new page by selecting
"new" in the "File" menu. Save this document in the same
folder you created early (be sure there are no spaces or "illegal"
characters in the name).
11.
Then give the page a
title (both in the box and on the actual page) that is related to the first subtitle
on index page. Change the background if you want.
12.
Go back to the index
page. Highlight the text of the first subtitle. In the link box, type in the
EXACT document name of the new page (it should end in ".htm") you
just made and hit return. You just made a link from your index page to the new
page. Preview your page to make sure it works.
13.
Go to the new page
in Dreamweaver. Now you can add information to this page by simply typing it in
or by cutting and pasting text from a word processing document. Try cutting and
pasting by opening an old word processing document (or open a new document and
type in some stuff), coping a couple paragraphs, and pasting it in your
Dreamweaver document. To paste it, select "paste" from the
"Edit" menu. Note: when you
paste text into your document, you often have to reformat it. Do this by using
the "properties" window. If you are having trouble making the text do
what you want it to do, try selecting "none" in the format drop down
menu in the properties window. This essentially erases all prior formatting so
you can start fresh.
ADDING AN IMAGE
14.
First you need to save
an image into your folder. One way to get an image is to copy an image from
another website. So go to the Internet and find an image (you can go to our motivation
project homepage and get an image of Calvin). Then click and hold on the image
(if on a Mac) or right-click (if on a Windows machine). A little menu should
pop up that gives you the option of saving the image. Be sure to save it in
your folder. Notice that the name of the image will end in ".jpg" or
".gif". To display an image on the Internet it needs to be saved in
one of these two formats (this isn't strictly true, but don't worry about it).
Go back to your Dreamweaver document. Place the cursor where you want to insert
the picture. Then click on the icon in the toolbar that has a picture of a tree
(or select "image" from the "Insert" menu). In the window
that pops up, select the image saved in your folder, and then click "open."
For your assignment,
you need to include a figure or diagram. To do this, you need to convert your
figure or diagram into "jpeg" or "gif" image and then save
it in your folder. There are a number of ways to do this. One way is to just
make the figure and then scan it into the computer and save it as a
"jpeg" or "gif" file (an assistant in the lab can show you
how to do this). Alternative, some computer programs such as PowerPoint or
AppleWorks will allow you to first create an image and then save it directly as
a "jpeg" or "gif" file. When saving the image, give it a
single name and make sure it ends in ".jpg" or ".gif".
TESTING YOUR ABILITIES
15.
To test your abilities,
make a link from the new Dreamweaver page back to the index page. As a further
test, make a new page that links to the second subtitle on the index page.