In addition to importing media, Flash offers a variety
of tools to create high-quality graphics and text. In the
completed tutorial, text appears offering background information
about each selected kite. You'll create a symbol that tells
customers about the inventor of the box kite.
Note: While completing the tutorial,
you may find it useful to undo a change you've made. Flash
can undo several of your recent changes, depending on the
number of undo levels you have set in Preferences. To undo,
choose Edit > Undo or press Control+Z (Windows) or Command+Z
(Macintosh). Conversely, you can redo what you've undone
by choosing Edit > Redo or pressing Control+Y (Windows)
or Command+Y (Macintosh).
1
Choose Insert > New Symbol.
2
In the Symbol Properties dialog box, name the symbol
box TEXT.
3
For Behavior, verify that Graphic is selected, then
click OK.
Flash switches to symbol-editing mode.
Note that the name of the symbol you're editing appears
in the upper left corner of the window. The window background
remains the same shade of gray that you selected in
Movie Properties.
4
In the toolbox, select the Text tool.
5
If the Character panel is not open, choose Window
> Panels > Character.
6
In the Font pop-up menu of the Character panel, select
_sans.
Your Flash movie will replace your font
with your user's default sans serif font, such as Arial
or Helvetica.
7
In the Font Size pop-up menu, use the slider to select
12 pt.
8
Select the Bold button.
9
Click the color box to display the pop-up window and
select white, with the hexadecimal value of # FFFFFF.
10
Click the Text tool anywhere on the left side of the
window and type this text: The box kite was invented
by an Australian, Lawrence Hargrave, in 1893. He used
the kite to carry weather instruments aloft.
Although you selected white text, it
appears gray so that it will show up against the white
text box.
11
With the Text tool still selected, click the resizing
handle—the small circle in the upper right corner
of the text block—and drag it to the left so the
text breaks after the word invented.
The text wraps into several lines. Once
you move the sizing handle, it changes from a circle
to a square to indicate that the type block now has
a defined width.
Change the
text block registration point
Each text block, like other elements in Flash, has a registration
point that the application can use to position it. You will
check the registration point of your text block to verify
that it matches the registration point of the other text
blocks in the movie; this ensures that all the text blocks
align consistently.
1
In the toolbox, select the Arrow tool.
On the Stage, the text block is selected.
2
To open the Info panel, choose Window > Panels
> Info, or click the Info Panel button in the Launcher
bar.
3
The Info panel contains a small grid, with a black
square that indicates the registration point. If the
black square is not in the upper left corner of the
grid, click the upper left square to move the registration
point to that position.
4
Enter 0 for both the X and Y coordinates, and
press Enter (Windows) or Return (Macintosh); then close
the Info panel.
5
Click Scene 1 in the upper left corner of the window
to return to movie-editing mode.
In Flash, you can create different scenes
using the Insert > Scene command. This tutorial uses
one scene only.
Test your
movie
At any point during authoring, you can test how your movie
will look and behave as a SWF file.
1
Save your movie and choose Control > Test Movie.
Flash exports a SWF copy of your movie.
2
In the SWF file, click the Box Kite button and notice
that, instead of seeing text about the box kite as expected,
you see text about the rokkaku kite. Oops! You need
to replace rokkaku TEXT with the correct text about
the box kite.
3
Close the SWF file and return to the Flash authoring
environment.
Replace an
instance
During authoring, it is common to replace one instance
with another, especially when you decide to change artwork
or text. Flash simplifies the process by letting you replace
one instance with another while maintaining the attributes
of the original instance.
1
In the Timeline's labels layer, click the first frame
of Box Red (Frame 21) to move the playhead to the section
of the movie that displays information about the box
kite.
The selected frame number appears in
the status display at the bottom of the Timeline.
2
With the Arrow tool selected, click the text instance
on the Stage that reads "The rokkaku is a Japanese fighting
kite ..."
This is the text that you want to replace
with the text you created about the box kite.
3
If the Instance panel is not visible, choose Window
> Panels > Instance.
The Instance panel appears.
4
In the Instance panel, click the Swap Symbol button.
5
In the Swap Symbol dialog box, double-click box TEXT
in the list of symbols.
You might need to scroll through the
list to find the symbol.
On the Stage, the new symbol replaces
the previous one. Instance attributes from the previous
symbol are applied to the new symbol.
Import
media
In addition to creating high-quality text and graphics
in Flash, you can import a variety of media types into your
movie. For the kite shop, you want a sound to play when
the user clicks the Fly It! button. To associate a sound
with your button, you will first import an MP3 sound file.
By using this compressed sound format, you're ensuring that
the sound does not significantly increase the size of your
movie.
1
Choose File > Import.
2
If you're using a Windows operating system, in the
Import dialog box, browse to Tutorial/My_kite within
your Flash application folder, and double-click wizz.mp3.
If you're using a Macintosh operating
system, browse to Tutorial/My_kite within your Flash
application folder. Double-click wizz.mp3f, then click
Import.
The sound file appears in the Library
window. To hear the sound, select it and click the Play
button in the Library window.
Add
sound to a button
When you create a button symbol, Flash creates keyframes
for the different button states in relation to the mouse
pointer. The Over keyframe, for example, represents the
button's appearance when the pointer is over the button.
Other button keyframes include Up, Down, and Hit. For more
information about keyframes in button symbols, refer to
the Buttons lesson (choose Help > Lessons > Buttons).
Now you'll add a sound to the button's Down frame, which
means the sound will play when the user clicks the button.
Because you're adding the sound to the button symbol in
the library, not just to an instance of the symbol, the
sound will play for each instance of the button.
1
In the Library window, double-click the Buttons folder
to expand it.
2
Select the fly it BUTTON symbol, then choose Edit
from the Library Options menu. You can also double-click
the symbol's icon in the Library window.
Flash switches to symbol-editing mode.
3
Choose Insert > Layer and name the new layer Sound.
Remember, you can double-click a layer
name to rename that layer.
4
To insert a blank keyframe, select the Down frame
(Frame 3) of the Sound layer and choose Insert >
Keyframe.
5
To define the sound properties, double-click Frame
3 of the Sound layer.
In addition to the Sound panel, other
panels might appear.
6
In the Sound panel, select wizz.mp3 from the Sound
pop-up menu. Then close the panel.
7
Choose Edit > Edit Movie or click Scene 1 in the
upper left corner of the window to return to movie-editing
mode from symbol-editing mode.
Use
the Stage and Timeline
Now that you've created, imported, and modified your media,
use the Stage and Timeline to assemble your movie. You can
create media directly on the Stage (in which case it does
not appear in the library unless you decide to turn it into
a symbol), or you can use the Stage to arrange imported
media for individual frames. The Timeline determines when
your media appears in the movie as the playhead moves through
the frames.
Change the
width and height of a button
On the Stage, one of the Select a Kite buttons is missing:
you'll add an instance of the button, resize it, and align
it on the Stage.
Since the button symbol you will add to your movie is
larger than the button instances already on the Stage, you'll
use the Info panel to resize the new instance.
1
If the Info panel is not open, choose Window >
Panels > Info or click the Info Panel button in the
Launcher bar.
2
In the Timeline, click Frame 1 of the Pick a Kite
Button layer.
3
Drag an instance of rokkaku kite BUTTON from the Library
window to the Stage and place it between the other two
Select a Kite buttons. When you've finished, the buttons
should look like this:
4
In the Info panel, change the width (W) to 54.2 and
the height (H) to 50.0 and press Enter (Windows) or
Return (Macintosh).
Align objects
on the Stage
You can use the Align panel to align an object in relation
to other objects. You'll use this feature now to align the
three Select a Kite buttons.
1
On the Stage, select a Select a Kite button, then
Shift-click to select the other two Select a Kite buttons
pictured above.
The playhead should still be in Frame
1 of the Timeline.
2
If the Align panel is not visible, choose Window >
Panels > Align.
3
In the Align panel, click the Vertical Align Top button,
the third button from the right on the top row, to align
the buttons relative to their registration points.
4
Click the Horizontal Distribute Left button, the third
button from the right in the middle row, to distribute
the buttons evenly apart.
Depending on where you placed the Rokkaku
Kite button, the three Select a Kite buttons might require
further alignment. You can align them using other alignment
buttons on the Align panel until you achieve the desired
result.
Create a
navigation action for a button instance
Flash lets you add interactivity by adding actions to
your movie. The Actions panel assists you in adding ActionScript,
the Flash scripting language. You can use the Actions panel
to view, write, edit, or add actions to a symbol or instance.
Now you will use the Actions panel to create a navigation
action that makes the playhead move to the correct frame
in the Timeline when the user clicks the Rokkaku Kite button.
1
On the Stage, select just the Rokkaku Kite button
(press Shift and click the other two Select a Kite buttons
to deselect them).
You've selected the middle button of
the three Select a Kite buttons. The Instance panel
can help you identify instances by name.
The playhead should still be in Frame
1 of the Timeline.
2
Choose Window > Actions or click the Actions button
in the Launcher bar.
The Object Actions panel appears.
Note: When you use the Actions panel
to work with actions attached to an object, the panel is
titled Object Actions. When you work with frames rather
than objects, Flash displays the Frame Actions panel.
3
Click the triangle in the upper right corner of the
panel to display the pop-up menu. Verify that Normal
Mode, rather than Expert Mode, is selected.
Expert Mode offers features useful to
those experienced with ActionScript. In Normal Mode,
parameter fields and controls guide you in creating
actions.
If necessary, click the triangle in the
lower right corner of the Object Actions panel to open
a pane that displays the parameters, and resize the
window until the Toolbox list and Actions list are both
visible.
4
Select the Actions icon to expand that category, then
scroll down the Toolbox list and double-click goto.
5
In the Type pop-up menu, select Frame Label.
6
In the Frame pop-up menu, select rokkaku.
You are specifying that when users click
the Rokkaku Kite button, the playhead moves to the first
frame within the rokkaku label.
7
Deselect Go to and Play at the bottom of the Object
Actions panel.
Specify that
the correct kite appears
In addition to the Go To action, you will add actions
to make the correct kite appear when the user clicks the
Rokkaku Kite button.
1
In the Toolbox list, double-click setProperty.
2
In the Property pop-up menu, select _visible (Visibility)
3
In the Target text box, type demoKite and verify
that Expression, next to the text box, is deselected.
4
In the Value text box, type True, and select
Expression next to the text box.
5
In the Toolbox list, double-click loadMovie.
6
In the URL text box, type r.swf, which is the
name of the external file with the rokkaku kite image.
7
In the Location pop-up menu, select Target.
8
In the Location text box, type demoKite.
9
Verify that Don't Send is selected in the Variables
pop-up menu and that both Expression options are deselected,
then close the Object Actions Panel.
Note: For additional information about
the setProperty and loadMovie
actions, refer to the ActionScript Help.
Lock objects
Now that you've placed and modified buttons, you'll lock
the buttons to ensure that no one accidentally moves them
out of alignment or makes other changes to them.
1
In the Timeline's Pick a Kite Button layer, click
the black dot in the Lock column.
A padlock icon appears in the Lock column.
(To unlock the layer, click the padlock icon again.)
Animate
instances
Flash offers several different ways of animating instances
using either frame-by-frame or tweening techniques. In tweening
animation, you define how an instance appears in one keyframe,
then define how the same instance appears in the next keyframe.
Flash automatically creates the animation between the two
keyframes. For this tutorial, you'll create two different
types of tweening effects: motion tweening of the kite and
shape tweening of the kite string.
How will you know which kite to animate if your movie
has nine possible kite combinations (three kite models multiplied
by three kite colors)? Will you have to animate all nine
kites? Fortunately, no. Instead, you will use a kite placeholder
to assist you with setting up the animation. Later in this
tutorial you'll create a function that determines which
kite the customer selected. Based on the information the
function receives, an external SWF movie clip of the selected
kite will appear in the animation instead of the placeholder.
In preparation for tweening, you need to change the registration
point of the kite media.
Change the
registration point
By default, the registration point of a symbol in a SWF
file is in the symbol's upper left corner.
The tutorial links a kite placeholder to external SWF
files of kites, which will rotate slightly in your movie.
You need to move the registration point of the kite instance
placeholder, so that when it's replaced by a kite SWF, the
SWF will rotate around its center point rather than around
its upper left corner.
The Edit Center command lets you make an instance's center
of rotation different from that of the symbol.
1
In the Timeline's labels layer, locate the first frame
labeled kite flight loop (Frame 168) and click the frame
to move the playhead to that location.
2
Select the kite that appears on the Stage.
3
If the Instance panel is not open, click the Instance
Panel button in the Launcher bar.
Note that when the kite symbol is selected,
in the Instance panel its symbol name is placeholderKite,
and its instance name is demoKite. Later in the tutorial,
after you add ActionScript to your movie, the kite the
customer selects will replace the demoKite instance
while the movie plays.
4
Choose Modify > Transform > Edit Center.
The registration point becomes visible
and selected.
5
On the Stage, drag the registration point, the small
cross, to the approximate center of the kite.
Create motion
tweening for the kite
After customers select a kite, they click the Fly It!
button to see the invoice while the kite flies. To achieve
the effect of the kite floating around the sky, you'll add
motion tweening to your movie.
For this motion tweening, you will define kite properties
such as position, size, and rotation for an instance at
one point on the Timeline, and then you will change those
properties in keyframes that you insert in the Timeline.
Flash creates the content of the frames in between the keyframes.
Add the keyframe
for the end of your animation
As you add keyframes, keep in mind that you can insert
the keyframes anywhere you want the animation to change;
except for the first and last keyframes, you don't need
to insert the keyframes in the exact frames specified in
the tutorial.
1
In the Timeline's kite layer, verify that the playhead
is on Frame 168.
Note the keyframe, which will indicate
the start of your animation. Also notice the guideline
on the Stage, which displays the path the kite will
snap to. In the Timeline, this path is in the Guide:kite
layer, which is a guide layer, a special layer you can
create to assist in placing objects on the Stage.
Guidelines exist only to help authors
assemble media along a path; they do not appear in the
published Flash movie. You can recognize guide layers
in the Timeline by their icon.
2
Use the pop-up menu at the lower left of the application
window to increase the Stage size to 800%.
Now notice that the path is not one continuous
shape—it has a small break where the animation
ends.
3
In the Timeline's kite layer, move the playhead to
Frame 229 and choose Insert > Keyframe.
Check the status display at the bottom
of the Timeline to confirm that you selected the correct
frame.
An ending keyframe appears in Frame 228,
which is where the motion tween will end.
4
With the Stage still zoomed, and the playhead on Frame
229 of the kite layer, drag the kite slightly to the
right, so that the registration point is on the other
side of the path.
You're defining where the kite will be
at the end of the animation.
Note: If your registration
point is already on the other (right) side of the path,
your animation will not work. Redo the steps to change
the registration point, this time moving the point to
the left of where you placed it before.
5
Resize the Stage to 100%.
Specify motion
tweening
Now that you have defined the start and end of your animation,
you will use the Frame panel to specify that the tween will
be a motion tween.
1
In the Timeline's kite layer, click any frame between
168, the beginning of the animation, and 228, the end
of the animation, so that just the frames in between
those two keyframes are selected.
2
Choose Window > Panels > Frame and select Motion
from the Tweening pop-up menu.
3
Verify that Snap is selected.
Snap ensures that the kite instance attaches
to the guideline by its registration point.
In the Timeline, you can tell that the
motion tweening is implemented correctly if a solid
line appears between the keyframes, and the frames have
a light blue background.
A dashed line between keyframes indicates
the tweening is not implemented correctly, which often
occurs when a beginning or ending keyframe is accidentally
deleted.
Add the intermediate
keyframes
Now you'll add the intermediate keyframes that define
where the animation will change.
1
In the Timeline's kite layer, with the playhead on
Frame 175, press F6 to insert a keyframe.
On the Stage, the kite has moved along
the path to its position relative to Frame 175.
2
Also in the kite layer, insert keyframes in Frames
184, 198, 207, and 214.
Scale and
rotate the kite
The animation will be more realistic if the kite changes
in size and rotates as it moves along its path. To achieve
this effect, you will make the kite larger and smaller where
you've added keyframes, and you'll rotate the kite.
1
With the kite layer still selected, move the playhead
back to Keyframe 175.
Note: If you inserted keyframes in
different frames from those specified in the tutorial, you
can scale and rotate the kite wherever you inserted a keyframe.
2
In the toolbox, select the Arrow tool and the Scale
modifier. On the Stage, click and drag one of the outside
corner sizing handles around the kite to make the kite
slightly larger.
3
Select the Rotate modifier. On the Stage, move the
mouse pointer over one of the kite's corner handles.
The pointer changes into four curved
arrows.
4
Click and drag the corner handle to rotate the kite
approximately 30° clockwise.
5
Move the playhead to Frame 184. On the Stage, use
the Rotate modifier to move the kite approximately 60°
counterclockwise. Use the Scale modifier to make the
kite smaller.
During the animation, the kite will appear
to be flying farther away.
6
Move the playhead to Keyframe 198. On the Stage, use
the Scale modifier to make the kite smaller.
7
For Keyframes 207 and 214, use the Scale tool to make
the kite larger.
8
To view the kite-flying animation, drag the playhead
from Frame 168 to Frame 228.
Note: Remember to save your work frequently.
Loop the
animation
The kite animation stops when the playhead reaches Frame
228. To make the kite fly continuously, you'll add a looping
attribute.
1
In the Timeline's actions layer, insert a keyframe
in Frame 228, and then double-click it to open the Frame
Actions panel.
2
Click the Actions icon to expand that category, then
double-click goto in the Toolbox list.
3
In the Type pop-up menu, select Frame Label.
4
In the Frame pop-up menu, select kite flight loop.
The Timeline includes a label called
kite flight loop. The first frame within the kite flight
loop label is Frame 168. You are specifying that the
playhead loop from Frame 228, where you inserted the
keyframe, back to Frame 168, the start of the animation.
5
Verify that Go to and Play is selected, then close
the Frame Actions panel.
Create shape
tweening for the kite string
To animate the kite, you used motion tweening. To animate
the kite string, you will use shape tweening: you will draw
a shape—in this case, the string—at one point
in the Timeline, and you will change that shape at later
points. Flash alters the shape for the frames between the
beginning and ending keyframes to create the animation.
1
In the Timeline's string layer, insert a keyframe
(F6) in Frame 168, which is the frame where you started
the kite motion tween.
2
In the toolbox, select the Pencil tool. Click the
color box to display the pop-up window, and select a
pale shade of yellow.
3
From the Pencil Mode modifier, select Smooth.
4
To open the Stroke panel, choose Window > Panels
> Stroke. In the Stroke Size pop-up menu, move the
slider to select 2, or type 2 in the Stroke Size
text box.
5
On the Stage, draw a line that curves from the spool
to the target "bull's-eye" in the approximate center
of the kite.
6
If necessary, use the Arrow tool to select the string
on the Stage and select the Smooth modifier repeatedly
until the line resembles a string.
7
In the Timeline, add a keyframe to Frame 230 of the
string layer.
In addition to the keyframe in Frame
230, an end keyframe appears in Frame 229.
8
In Frame 231, choose Insert > Blank Keyframe so
the string will not appear in the movie from that frame
on.
Specify shape
tweening
To prepare for shape tweening, you might find it helpful
to lock the kite, sky, and Guide:kite layers in the Timeline
to avoid accidentally moving those objects on the Stage.
1
In the Timeline's string layer, click any frame between
Frames 168 and 229 so that just the frames in between
those two keyframes are selected.
2
If the Frame panel is not open, choose Window >
Panels > Frame and select Shape from the Tweening
pop-up menu.
As with motion tweening, a solid line
between keyframes tells you that you executed the tween
correctly. The Timeline indicates shape tweening with
a light green background.
3
Move the playhead to Frame 168. Slowly drag the playhead
to the right across the Timeline until the string appears
to have separated from the kite. Add another keyframe
at this point in the Timeline.
Note: The gap between the kite and
string can be fairly prominent before you need to add a
keyframe. You do not need to add a keyframe for a small
separation between the kite and string.
4
Select the Arrow tool in the toolbox. If the entire
string is selected, click anywhere on the Stage to deselect
it, then drag the top of the string so that it again
appears to be attached to the bull's-eye.
5
Use the Arrow tool, with the Smooth modifier selected,
to maintain the line's curved shape by selecting and
dragging from a point around the middle of the line.
You are setting up the animation so that
the kite string never looks as though it has separated
from the kite.
6
As you continue to move the playhead slowly to the
right, add a keyframe to the string layer each time
you see a prominent gap between the kite and the string,
then repeat steps 4 and 5 as often as necessary until
you reach the end of the animation—Frame 229.
7
To view the animation, move the playhead to Frame
168 and choose Control > Play. When you finish viewing
the animation, choose Control > Stop.
Note: Remember to save your work frequently.
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:
in the Property inspector.
