Dreamweaver MX 2004 Intermediate I

A Workshop for San Diego State University Students

2004. San Diego State University. All Rights Reserved
Sponsored by Academic Affairs
Contents
INTRODUCTION.......................................................................................................... 4
TABLES......................................................................................................................... 4
Designing Tables in the Layout View.......................................................................... 5
Bracing Your Cells with an Image Spacer ................................................................... 6
Autostretch.................................................................................................................. 6
Cell and Row Attributes .............................................................................................. 7
Changing the Color of a Row or Cell........................................................................... 7
IMAGE MAPS............................................................................................................... 8
Create and Image Map ................................................................................................ 8
ROLLOVER IMAGES ................................................................................................ 11
Behaviors .................................................................................................................. 11
HANDOUT REFERENCES....................................................................................... 13
Where to Find Help When You Need It
Student Computer Help Web Site
The computer help web site for students provides information about the type of help you
can get and locations where help is available. To find this information, look to:
http://rohan.sdsu.edu/~students
Help from the BATS Web Page
BATS (Baseline Access, Training and Support) is a California State University initiative
to provide all students, faculty, and staff with "baseline" access to information resources
via networks, training in the uses of baseline hardware and software systems, and
ongoing professional and technical support for utilization of computer resources at San
Diego State University. You can access the BATS Web Page by pointing your browser
to: http://rohan.sdsu.edu/~bats/
Help in the Love Library Student Computing Lab
The Student Computing Lab's purpose is to facilitate students in completing assigned
class work, as well as provide assistance to students having computer problems relating
to the Internet, Netscape, SPSS, File Transfers, PC Operating Systems, Microsoft Office
Software and Business Databases.
Location: 2
nd
floor of the Love Library building in LL-224
Hours: 10:00am midnight Sunday
7:00am midnight Monday - Thursday
7:00am 6:00pm Friday
10:00 am 6:00pm Saturday

Help from the Student Computing Help Desk
Phone: 594-3189
Location: Love Library 220
Hours: 8:00am 4:30pm Monday
8:00am 4:30pm Tuesday
8:00am 7:30pm Wednesday
8:00am 7:30pm Thursday
8:00am 4:30pm Friday
E-mail: [email protected]
INTRODUCTION
This handout is designed to complement content presented in the BATS
Dreamweaver Intermediate I Workshop. It focuses on information needed to
understand a number of web page formatting tools and techniques that help you
to go beyond basic web page design. The handout is divided into several
sections, including Tables, Image Maps, and Rollover Images.
Dreamweaver is a WYSIWYG web page creation tool. WYSIWYG is an acronym
that stands for What You See Is What You Get. In other words, Dreamweaver
allows you to conveniently manipulate the pages look and feel in much the same
manner as you would in Microsoft Word. In fact, while you manipulate the pages
elements, behind the scenes Dreamweaver is writing HTML code-something
that, in the past, could only be done by writing straight HTML code.
TABLES
Its important to realize that HTML was originally designed to provide content and
not control page layout. Because of this, clever web designers have developed
workarounds to control the layout of web pages. One of the most popular is the
use of tables. These tables are often hidden, and because of this, visitors who
view a page see only a nicely laid out web page. Tables can become quite
intricate and may appear different in different browser types. It is recommended
that you start with a simple table design and work your way up, and that you
check your work using a number of different computer and browser
combinations.
Designing Tables in the Layout View
Dreamweaver provides a tool that helps make designing tables a lot easier, the
Layout View. When working in the Layout View, Dreamweaver allows you to
draw your tables and the cells that are contained within the tables (Note that
some tools used for manipulating tables, such as Insert Row, are not accessible
in Layout Mode. Go back to Standard View to use them.
To use the Layout View
1. Select Layout on the Insert Pop-Up List on the left side of the Insert Menu
2. Click on the Layout View button on the Insert Menu
3. Select the Draw Table Icon
4. Starting at the top left corner of your web page, click and drag down to the
right (as far as your want you table to extend).
You have now created a table in which cells can be drawn.
5. Click the Draw Table Cell Icon
6. Draw your table cells as needed (Start with a simple layout)
Constraining your Table Cells
By default, Dreamweaver inserts table cells that are fixed pixel widths. These
cell sizes remain fixed unless contents within neighboring cell is too large,
Insert Table Insert Cell
Standard View Layout View
Insert Pop-Up List
The Insert Pop-Up List has
several object sets (Layout
Objects is currently selected)
causing the neighboring cell to expand and the cell lying next to it to compact
in order to make extra room. This is a common problem, and Dreamweaver
provides a clever solution- the Image Spacer.
Bracing Your Cells with an Image Spacer
To avoid having cells squished by content in neighboring cells, web designers
use a transparent GIF file that is 1 x 1 pixels in dimension to brace table cells.
This is a very small image file and takes little time to download. However, within
the web page, web designers designate a larger image width dimension for this
image, such as 100 pixels. This stretches the small GIF file to 100 pixels,
allowing it to brace a table cell and keep the cell from shrinking. Again, because
this in actually just a 1 x 1 GIF it downloads quickly, and its transparent quality
assures that it will be hidden on the page. You can think of it as an invisible 2 x
4 used to prop up a wall or ceiling in your house.
Creating an Image Spacer
1. In Layout View you can easily create an
Image Spacer
2. Click on the small green arrow at the bottom
of any column
3. Choose insert spacer image
Autostretch
Often it is desirable to have one cell stretch within the browser, while the other
cells remain the same size. An example of this is a large table in a page in which
navigation elements on the left remain in one place, while content on the right
stretches to fit the browser window size.
Dreamweaver offers a way to set this up easily.
1. While in Layout View, click on the small green arrow at the bottom of any
column
2. Choose Autostretch
Notice that your other columns now have a solid bar displayed below them. The
solid bar represents an inserted image spacer. When you choose Autostretch for
one cell, Dreamweaver automatically inserts an image spacer in cells that lay
next to this cell. The Autostretch cell will compact the neighboring cells if this is
not done.
Cell and Row Attributes
Cells and rows can have attributes assigned to them such as colors. This can
greatly improve the readability of your page. For instance, rows that are made up
of alternating colors help lead a persons eye. An example of this is a class listing
where the classes are listed on the left side of a table, while their times are listed
on the right. Believe it or not, cells can also contain background images.
Changing the Color of a Row or Cell
Select any combination of cells in the table
Choose Window > Properties to open the Property Inspector.
Next to the words Bg Color, click the small triangle and choose a color.
Autostretch Icon Image Spacer Bar
IMAGE MAPS
An image map is a single image that contains areas that can be clicked upon,
sending users to different linked pages. Images can be highly stylized, and
because image content is not interpreted by the browser (unlike HTML Code),
the content is fixed and appears the same in any browser or computer. Just
about any layout you can dream up can be fixed within an image, and hotspots
(clickable areas) can be defined around icons or words you have created within
this image.
Our own College of Education here at San Diego State uses an attractive image
map to direct visitors to different areas of interest:
These small squares at the top of the image have been defined within
Dreamweaver as hot spots (clickable links). These hot spots within an image
map take the place of the familiar underlined, blue HTML text.
Create and Image Map
Make sure you have already placed an image on your page. You will need the
Properties Inspector palette. Make sure this window is showing.
Created by Evan Jessen
1. Select the image
2. Click the expander arrow in the lower right corner of the Property
Inspector to see all properties
3. In the Map Name field, type a unique name for the image map, for example
map1.
4. Proceed to the next section on defining Hot Spots
Defining Hot Spots
There are several methods for creating hotspots:
Select the CIRCLE or RECTANGLE and drag the pointer over the image
to create a hotspot.
Defining a Hotspot
Or
Select the polygon tool and define an irregularly shaped hotspot by
clicking once for each corner point. Click the arrow tool to close the shape.
Then
In the hotspot Property Inspectors Link field, click the folder icon to
browse to the file you want opened when the hotspot is clicked (You can
also use the point-to-file method).
Repeat as needed to define different clickable areas on the image.
To finish, click on any other element within the page.
ROLLOVER IMAGES
People who view web pages often enjoy, and may be more engaged through,
interactivity. There are a number of ways to create interactive web pages. Web
pages may contain multimedia, such as Flash, movies, or sound. Keep in mind
that some interactivity is good, but that this can be overdone, creating a web
page that is flashy but not as functional.
Behaviors
One of the simplest methods for building a page with interactivity is the use of
Dreamweaver Behaviors. Behaviors are pre-written Javascript code that
Dreamweaver embeds in your web page with just a click of a mouse. Javascript
can be used for many jobs on your web page, such as playing a sound, making
sure a form if filled out correctly, or rollover images.
Rollover Images
A rollover image is an image that, when viewed in a browser, changes when the
mouse pointer moves across it. These are commonly used in navigation bars,
and as a person moves the mouse over different navigation buttons, the buttons
appear to change color, shape, or light up.
A rollover image is created with two images: One image is present when the
page first loads. The second image appears when the mouse pointer moves over
this first image. The secret to making this effect look good is creating two images
that are the same dimension.
To Create a Rollover:
1. Select Insert>Image or click the Image button on the Insert tool bar an
image
2. In the Property Inspector, enter a name for the image in the leftmost text
box, for example faculty
3. Go to Window and Choose Behaviors
4. Click the + sign and select Swap Image from the Actions pop-up
window
5. From the Images list, select the image that you just named, for example
faculty.img
6. Click Browse to select the new image file
7. Select Preload Images option
8. Click OK
Keep in mind that you can choose other Events that will invoke the Swap
Image Behavior (the default if mouseOver).
Behaviors
Panel
Image
Properties Inspector
with image name
HANDOUT REFERENCES
Macromedia Dreamweaver MX 2004 Hands-On Training
Garo Green
Peachpit Press, 1249 Eight Street, Berkeley, CA 94710
ISBN: 032120297X
Dreamweaver MX 2004 Help System (Using Dreamweaver)