Click on the small box next to Background (or
Text or Links)
A grid of color swatches will open
Click on the color you want
Click Apply, then OK
To add a background image
From the Modify menu, choose Page Properties
Click the Browse button next to the Background
Image text box
Locate the image you want to use in your background
Click OK
Click Apply to see how it looks, then click
OK
To add a transparent background image
From the Modify menu, choose Page Properties
Click the Browse button next to Tracing Image
Locate the image you want to use in your background
Click OK
Drag the Image Transparency slider to the left
to adjust opacity
Click Apply to preview your image
Make transparency adjustments as necessary
When satisfied, click OK
To add text to your site
Click on the page where you want to place your
text (hitting Enter to space down)
Simply type your text
To format your text, drag your curser across
it to select it
In the Properties palette at the bottom of the
page, choose a font, size, style, etc.
To center your text on the page, click the center-alignment
button
To change the text color, click on the small
grey box (near the Size option)
Click on the color you want from the grid that
appears
To add an image to your site
Click on the page where you want to place your
image
From the Insert menu, choose Image
Locate the image you want in your website folder
To align your image on the page, click on it
to select it
In the Properties palette at the bottom
of the page, click on the alignment you want
To add a table
From the Insert menu, choose Table
In the Insert Table dialog box, type in the
number of rows and columns you want
If you want borders to show on your table, type
a number in the Border box (try 2 or 3)
For a table with no visible borders, leave the
Border box empty
Click OK
To add a background color to one or more
table cells
Click in a cell to select it, or highlight several
cells
In the Properties palette at the bottom of the
page, click on the small grey box labeled Bg
Click on the background color you want from
the color grid that appears
To change the border color, click on the small
grey box labeled Brdr
To add a background image to a table cell
Click in a cell to select it
In the Properties palette at the bottom of the
page, click on the folder next to the white text box labeled
Bg
Locate the image you want to use as a background
Save your web page and preview in your browser
To add text to a table
Click in the cell you want to write in
Type the text you want
To format your text, drag your curser across
it to select it
In the Properties palette at the bottom of the
page, choose a font, size, style, etc.
To center your text in the cell, click the center-alignment
button
To change the text color, click on the small
grey box (near the Size option)
Click on the color you want from the grid that
appears
To add an image to your table:
Make sure your image is saved in your website
folder in the correct size
Click in the cell in which you want to place
your image
From the Insert menu, choose Image
Locate the image you want in your website folder
To readjust the cell size, click on a
border. When the cursor turns into a double arrow, drag the
cell to the correct size.
To create frames:
Open a new DreamWeaver document
Click on the Frames tab near the top of the
page
Select the configuration of frames you desire
from the thumbnails shown
Click in the first frame and choose Save Frame
from the file menu
Give your frame a name and save to your website
folder.
Repeat for each frame.
Add text and graphics to your first frame and
save when complete
Repeat for each frame.
When done, choose Save All from the File menu
To add navigational links to a frame:
Add buttons or text to your navigation frame.
Click on a button or highlight your text to
select it.
In the Properties palette at the bottom of the
page, type a URL in the Link box
OR click on the folder to find a page in your
website folder
In the Target box, click on the arrow and drag
down to choose the frame you want your link to open in
When all links are completed, choose Save All
from the File menu
Save each file, as prompted, to your website
folder.
From the File menu, choose Preview in Browser
In the Browser, try out your links. The links
should remain visible as your linked pages load into the frames
you identified.
To create an Image Map:
(Note: Before you create your image map, you
should have the pages you wish to link to created and saved
in your website folderÑthey can be edited later)
From the Launcher, open DreamWeaver
From the Insert menu, choose Image
Locate the image you wish to use in your webpage
folder
Click OK
From the File menu, choose Save As
Give your new page a name and save it to your
website folder
In the Properties at the bottom of the page,
you will see the word Map in the lower left corner, with an
arrow and three shapes below it. (Note: if the Properties box
is not open, from the Window menu, choose Properties)
Click on one of the shapes to choose it.
Use your curser to draw a shape around the part
of your image that you wish to turn into a link.
With the area selected, click on the folder
next to the Link box (in the Properties box)
Locate the page you wish to link to in your
website folder
Click OK
Repeat this process for each link you wish to
create in your image. (Note: click on the arrow tool and click
anywhere on your page to deselect the first link before you
create the next one.)
When finished, save your page
From the File menu, choose Preview in Browser
Select the Browser you wish to use (Netscape
or Internet Explorer)
Click on the links in your picture to make sure
they work properly.
To create a rollover A rollover is an image that changes when the
pointer moves across it. A rollover actually consists of two images:
the primary image (the image displayed when the page first loads)
and the rollover image (the image that appears when the pointer
moves over the primary image). Both images in a rollover should
be the same size; if the images are not the same size, Dreamweaver
automatically resizes the second image to match the properties of
the first image.
Before you start, make sure both images are saved into your website
folder.
Click on your screen where you want the rollover
to appear.
From the Insert menu, choose Interactive Images
>Rollover Image.
The Insert Rollover Image dialog box appears.
In the Image Name field, type a name for the
rollover image.
In the Original Image field, click Browse and
select the image you want displayed when the page loads.
In the Rollover Image field, click Browse and
select the image you want displayed when the pointer rolls over
the original image.
To make the images load faster, select the Preload
Images option.
In the When Clicked Go to URL field, click Browse
and select the file you want to open when a user clicks the
rollover image.
Note: If you don't set a link for the image,
Dreamweaver inserts a null link (#) in the HTML source code
to which the rollover behavior is attached. If you remove the
null link, the rollover image will no longer work.
Click OK to close the Insert Rollover Image
dialog box.
Save your web page.
To test your rollover, from the File menu, choose
Preview in Browser.
In the browser, move the pointer over the original
image.
The display should switch to the rollover image.
Scoring
guide:
Basic requirements (16 points)
Includes a homepage
Includes 5 linked pages
Has "home" links on each page
Has links to at least two websites
Includes at least two images
Images load properly
All links work properly
Covers an educational topic/offers opportunities for critical
thinking
Basic design guidelines (14 points)
No more than two fonts and avoids all CAPS and underlines
Typeface and size allow for easy reading
Color scheme and contrast make page interesting and easy
to read
