Craig Stroupe | University of Minnesota Duluth
Jello Page Design
What to do
How to do it
1.
Create a folder called
“jello” in your exercises
folder
The path to the folder on your disk should be:
www/5230/exercises/jello
2.
Inside “jello,” create a
folder called “assets.”
Download the images you
will use for this exercise
to the assets folder
(www/5230/exercises/
jello/assets).
In a blank Dreamweaver
page, create a threecolumn layout table that is
650 pixels wide.
Path: www/5230/exercises/jello/assets
3.
4.
(Note that as long as you
don’t include a “%” after
the number, Dreamweaver
understands that you mean
the number as a pixel
measure.)
5.
Center the layout table on
the page
6.
Make the three columns
these widths (from left to
right): 150 pixels, 350
pixels, 150 pixels.
Title the page, “Jello
Model Web Page” and
save the page as
“index.html” to the folder
“jello”
Set the image
“snowtreesback.jpg” as
the background of the
entire page
7.
8.
9.
Set the image
“pcback2.gif” as the
background of the layout
table
In Internet Explorer, choose
File > Save As
In Netscape, choose File > Edit
Page,
In the new Composer window that
appears, choose File > Save As
Insert > Table
In the “Insert Table” window, enter the following values:
Rows 3
Columns 3
Width 650
Border 0
Click “OK”
Select the table
In the Properties Palette, find the “Align” drop-down menu and choose
“Center”
Highlight each column
In the Properties Palette next to “W,”enter the number of pixels width
you want that column to be (350 for the center column, 150 for the
columns on either side)
Type in , “Jello Model Web Page” in the little “Title” window at the
top
Choose File > Save As, call it “index.html” and save to the folder
www/5230/exercises/jello
Modify > Page Properties
On the “Page Properties” dialogue box, find the “Background Image”
line, and choose the “Browse” button to select the image
“snowtreesback.jpg” from the “assets” folder.
Click “OK”
Select the table
In the Properties Palette, find the “Bg Image” line at the bottom
Click the tiny folder icon beside “Bg Image” to select the image
“pcback2.gif” from the “assets” folder.
10. Insert the other images.
Copy text from page in
your browser.
Notice the variety of ways image and text can be integrated
11. Notice that you can insert the
image “snowprints150.jpg” not
simply as an image but as the
background image of the cell,
allowing you then to insert text
or another image (ideally with a
transparent background) on top
of the picture.
Control+click in the cell
In the Properties Palette, find the “Bg” line at the bottom
Click the tiny folder icon at the end of that line to select the image
“snowprints150.jpg” from the “assets” folder.
Click anywhere off the Properties Palette to enact the edit.