JavaScript code is the magic behind Web graphics that change
appearance according to mouse movement. The Behaviors inspector
is where you attach JavaScript behaviors to Web objects,
which are the objects in Fireworks that define hotspots
and slices. You can also view and modify behaviors that
are already attached to Web objects.
To display the Behaviors inspector:
Choose Window > Behaviors.
Building JavaScript rollover
buttons
In the Button Editor, you can build two-, three-, or four-state
JavaScript rollovers or navigation bars. A multi-tab window
opens when you choose Insert > New Button:
Button Editor window
The first four panels—Up, Over, Down, and Over while
Down—are where you create a graphic for each button state.
The fifth panel—Active Area—is where you can edit the
slice and create hotspots for the button.
The buttons you make in the Button Editor window—button
symbols—have several unique features that help you as you
work with buttons as graphic elements
Defining a New Site
Return to the Dreamweaver opening screen.
On the menu bar, select Site | New Site.
In the Site Definition dialog box, under Local Info,
type My Web Site in the Site Name box.
In the Local Root Folder box, type C:\website
and click on OK twice.
Creating the First Page
You are ready to create your first page with our template.
Select File | New from Template on the
menu bar.
Highlight "template" and click on the Select
button.
Save the template by selecting File | Save
as from the menu bar.
Name this page index.htm and click on the Save
button.
Using Tables
Tables are used to divide and organize information on
a Web page by separating the page into sections. Complete
the following steps to create a table with two columns
and three rows.
Click in the large white area of your template to
be sure your cursor is in the body of your page.
Click on the Insert Table button
on the Opjects panel or select Insert | Table
from the menu bar.
Set Rows to 3, columns to 2, and Width to 90 Percent.
Note: Perhaps you will want to center the table. You
may easily edit the table properties by first selecting
the table and then using the Property inspector.
Tip: A border of 0 would allow the table to be invisible.
Adding Text
Now that you have a place to put all of the information
associated with your new Web site, you can begin adding
content. Dreamweaver is one of many WYSIWYG (what you
see is what you get) editors allowing authors to create
Web pages in a user friendly, point and click environment
similar to modern word processing programs.
Personalize the Website title by replacing the text,
"My Website" in the upper left corner of the template
with Jane's Site (you may use your own name if you prefer).
Click in the top left cell of the table and type Welcome
to Jane's[Note: Press Enter key here.]Dreamweaver
4 Workshop.
Highlight Dreamweaver 4 and click on the Bold
button in the Properties inspector. Note: If the Properties
inspector is closed, you can open it by selecting Windows
| Properties from the menu bar.
To change text color, highlight Dreamweaver 4.
Then click on the text color box on the Properties inspector
and select a green in the color palette.
Finally, highlight all of the text, "Welcome to Jane's
Dreamweaver 4 Workshop" and use the Property inspector
to center the text in the cell.
Note: Continue to enter text as you see fit. At any point,
you may run Spell Check! Just select Text | Check Spelling
from the menu bar. This is a good time to save your page.
Remember to save often!
Tip: Have you noticed that when entering text and you
press the Enter key, your cursor will skip a line? To
avoid extra blank lines, press Shift-Enter and
your cursor will simply go to the next line.
Formatting Text
Click in the second cell on the left in your table and
type the following text:
Objectives
You will learn how to add text to your site.
You will learn how to insert graphics onto your site.
You will learn how to create links from your site.
Headings - Headings are used to set titles and
subtitles apart from the main text on a page. There are
six different heading sizes with Heading 1 being the largest
and Heading 6 the smallest.
Tip: For good Web page design, avoid skipping a heading
size on the page. For example, If you use Heading 3
for your title, you should use Heading 4 for subtitles
on your page.
Highlight the text, "Welcome to Jane's Dreamweaver
4 Workshop", and make it Heading 3.
Highlight the text, "Objective", and make it Heading
4.
Note: All the tools you need to format text are found
on the Properties inspector.
Ordered/Unordered Lists - Lists are used to organize
data on a Web page for a clean, concise, professional
look. You can create bulleted (unordered) lists, or numbered
(ordered) lists. You may see an example of an ordered
list in Activity 2 and an example of an unordered list
in activity 3.
Highlight the words,
"You will learn how to add text to your site.
You will learn how to insert graphics onto your site.
You will learn how to create links from your site."
Click on the Unordered List button
in the Property inspector.
Continue to enter information on your page as desired
and save your page.
Inserting Images
The creation of the World Wide Web in the early 1990's
and subsequent development of graphical browsers brought
the Internet to life with a rainbow of colors, images
and sound. You can insert an image by completing the following
steps:
In the table you created, click in the top right cell.
Click on the Image button or select Insert
| Image from the menu bar.
Highlight kid.gif in "c:\My Website\images\DWT_kid.gif",
click on OK and save your page.
Note: Keep in mind when adding images to your page, it
can also add hundreds of seconds of download time.
Making Links
Here are five different types of links that you may want to add
to your Web site:
Absolute link - Link points to an external page, one
that is not within your site.
You must link using the full or absolute address. Create a link
to your favorite search tool.
Highlight the text, "Link 1" and press the Delete key.
Click on the Hyperlink button on the tool bar.
In the Text box type Google.
In the URL box, type http://www.google.com and click on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the link you
created to see if it works.
Relative Link - Internal link points to another page
of your site.
Highlight the text for link 4 and press the Delete
key.
Right click and select Make Link.
Select About.htm from C:\website and click OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window.
Click on the link you
created to see if it works.
Mailto Link - Link to your e-mail.
Right click on the Email graphic and select Change Link.
Change the URL to mailto:workshops@dzfx.com and click
on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the link you
created to see if it works.
Named Anchor - Link to a specific location within a Web
page. For
example, you might provide a link from the bottom of a page back
to the top.
Or, you might create a table of contents or index at the top of
your page that i
ncludes named anchors to specific sections within your page or
site.
To create the former,
Click immediately to the left of the Welcome text.
Select Insert | Invisible Tags | Named Anchor
In the dialog box, type Top and click OK.
Click at the bottom of the page and press the Enter key to
extend
the page length.
Type Back to Top at the bottom of your page.
Highlight the text "Back to Top".
Click on the Point to File symbol in the Properties
inspector and
drag your pointer to the anchor at the top of your page.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window. Click
on the
link you created to see if it works.
Image Link - Link from a graphic to an external or internal
URL
Right click on the Home picture in the top right of your
template and select
Change Link.
Select index.htm under C:\website and click on OK.
Note: Links do not work in Dreamweaver. You may check your link
by
pressing the F12 key which will bring up a browser window.
Click on the
link you created to see if it works.
Creating Rollover Buttons
Rollover Buttons are fun additions to your site! They
are an added way to navigate. In the Photoshop 6 teaching
reference you learned to make a button. For a rollover
button you will need two graphics of the same size.
Click in the second cell on the right.
Click on Insert | Interactive Images
| Rollover Image.
Conclusion
Once you are done, press the F12 key and
it will bring up a browser window that should look
something like this:
on the Opjects panel or select Insert | Table
from the menu bar.
in the Property inspector.
