Site Navigation Window
Dreamweaver Introduction
(Vendor Web Site: http://www.macromedia.com/)
{Much of this discussion can be found in:
Coley, L. How to Use
Dreamweaver 4 and Fireworks 4, Sams Publishing, Indianapolis, IN, 2001,
ISBN:0-672-32041-X,
Towers, J. Dreamweaver for Windows and Macintosh
(4)(Visual Quickstart Guide), Peachpit Press, Berkeley, CA, 2001, ISBN:
0-201-73430-3. (Online References: http://www.peachpit.com/ , Online
Materials for the book: http://beta.peachpit.com/vqs/dreamweaver/)
See
also References]
-
Preliminaries
-
Text
-
Images (Including Imagemaps)
-
Hyperlinks
-
Tables (with Text and Images)
-
Forms
-
Frames
-
Cascading Style Sheets (CSS)
-
Behaviors
Preliminaries
-
Starting Dreamweaver
-
Defining a New Site -- Optional
(Might be problematic if you work from several computers)
-
Views
-
O'Reilly References (HTML, Style Sheets,
JavaScript References)
-
Version 4 of Dreamweaver offers help with the syntax related
to the code in HTML, Style Sheets and JavaScript.
-
The O'Reilly
Reference Window can be opened from the Menu Bar via
Window/Reference .
-
Notes:
-
The Reference Window can be resized via sizing
handles. There is no maximization button with this window.
-
To pick which area (HTML, Style Sheets, JavaScript), use the
appropriate option from the drop-down list associated with the
Book field. The other fields change appropriately with your
choice of book.
-
Recap
Text
-
Entering Text & Formatting
Text (Using the Properties Inspector)
From the Menu
Bar: Text/...
-
Preliminaries:
-
Set Code and Design View (Menu Bar: View/Code and
Design) -- Note: You might have to drag down one of the windows.
-
Display the Properties
Inspector ( Menu Bar: Window/Properties)
Note:
The Properties Inspector varies depending on the object chosen. This
is the one you will see for dealing with text. Compare it to some of
what you might see on the Formatting Toolbar of Microsoft
FrontPage.
-
Display the Launcher
(Menu Bar: Window/Launcher)
-
Enter some text, using Enter and Shift+Enter
-
Select the text and on the Properties Inspector click
the down arrow adjacent to the color swatch for the color
picker, Dragging the eyedropper, choose a color for the text.
-
Note: Size drop-down list for picking basefont
-
Note: Bold, Italics (buttons in the
Properties Inspector) and Underline (underline via Menu
Bar: Text/Style/Underline)
-
Applying a Group of Formatting Options
(Styles): Click on HTML Styles on the Launcher and
pick from options.
Note: You can also define a New Style.
-
Aligning Text (Using the
Properties Inspector)
-
Right and Left Alignment
-
Centering
-
Indenting and Outdenting
-
Changing Fonts
-
Use the Fonts Drop-Down List on the Properties
Inspector
OR
-
From the Menu Bar: Text/Font>...
-
To change the combinations, use the Menu Bar:
Text/Font>Edit Font List...
-
Importing an HTML Document from Word
-
Sample of Word document using clip art and table of contents:
toc.doc
. Note the files created when using the File/Save as Web
Page... in Word: toc.htm, toc_filelist.xml, toc_header.htm,
toc_image001.wmz, toc_image002.gif .
-
File/New (if not already in an new file)
-
File/Import>Import Word HTML ... find and open file;
use defaults in dialog boxes
-
File/Save As ... (e.g. tocdw.htm)
-
Compare the two files in browsers and editors
-
Lists
-
Via the Properties
Inspector if the options available are sufficient
-
Otherwise use Menu Bar: Text/List>...
-
For Sublists, select the sublist and use the Indent
Button of the Properties Inspector
-
To change formatting on some part of the list:
-
Alternative: From the Menu Bar: Use the Text Menu
and Text/List>... to specify a list.
-
Defining Cascading Styles for Text
-
Open a file that contains some formatting, e.g. intro1.htm
-
Click on CSS Styles in the Launcher
(Recall, Window/Launcher will get it on the Dreamweaver screen if it
is not currently visible)
-
This should give the CSS Styles
Panel
-
Now begin to define some styles that are going to be applied
to the file (e.g. intro1.htm)
by clicking on the New Style
Button
-
This will yield the New
Style Dialog Box
-
Make certain the Make Custom Style Radio Button,
as well as the New Style Sheet File Radio Button are chosen
-
Specify a name in the Name: field (e.g. cssintro1)
-
Clicking on OK will yield the a Save As ... Dialog Box.
Specify the file name and Click on: OK
-
Make some specifications in the Style
Definition Dialog Box and Click on OK. This should save the
choices in the file you specified (e.g. cssintro1.css)
and will be reflected in the newly displayed CSS Styles
Panel.
-
Select text in the original HTML file (e.g. intro1.htm)
and Click on the newly defined style sheet in the CSS Styles Panel. If
the AutoApply checkbox is checked the specifications will be applied to your
file (e.g. see intro2.htm)
Note:
If you want to apply the styles specified in this style sheet to other files
on subsequent occasions, you might need to Click on the Attach Style
Sheet Button 
on the CSS Styles Panel (Lower right-hand corner).
-
Alternative: From the Menu Bar: Use the Text Menu
and Text/CSS Styles>... to specify a list.
-
Spell Checking
-
Searching and Searching and
Replacing
-
Recap
-
Menu Bar items discussed:
-
Window/...
-
Text/...
-
File/...
-
Edit/...
-
Inspectors discussed: Properties
-
Others: Launcher (HTML Styles; CSS Styles)
Images (Including Imagemaps)
Hyperlinks
Tables
(with Text and Images)
Forms
Frames
-
Frameset
-
Goal: Construct frameset1.htm,
containing two vertical frames 
. In the left
frame, we will start with tocfr1a.htm
and finish with tocfr1b.htm
. In the right frame, we will have howdy.htm
as the initial file, where this is the target frame for most of the
links in the left frame.
-
Open a new file (Menu Bar: File/New) and from
the Menu Bar, click: Insert/Frames>Left. The two
vertical frames will appear in the Design Window, surrounded by
dashed lines.
-
Note:
-
The same result could be accomplished by clicking on
the Insert Left Frame Button in the Objects
Panel -- (Frames)
-
Recall: The Objects Panel is available via the Menu
Bar, by clicking: Window/Objects. If the Frames
Objects Panel is not displayed, it is available via the drop-down
list near the top of the panel.
-
Save the frameset via the Menu Bar and File/Save
Frameset As... , typing frameset1.htm in the File name:
field
-
Loading Frames with Existing
Files (and Name the Frames)
-
You will first need the Frames
Panel . The Frames Panel is available via the
Menu Bar by clicking: Window/Frames.
-
Click on the left frame of the Frames Panel.
Note: The Properties Inspector changes to reflect the
context [ Properties
Inspector (Frames & Frames Panel) ].
-
In the Frame Name field of this Properties
Inspector, type "framea". In the Src field,
type "tocfr1a.htm" and press: <Return>. Note:
Using the folder button 
and browsing for the file will
also work (if the file already exists, of course).
-
Click in the right frame of the Frames
Panel , typing "frameb" in the new Frame Name
field and "howdy.htm" in the Src field, and pressing
<Return>.
-
Save the changes via File/Save Frameset As... (if you
are uncertain where frameset1.htm is located, or have not yet save the
frameset), or just File/Save Frameset .
-
Changing the Frame Widths and Noting
the Frameset Properties Inspector
-
Notes:
-
Clicking in either of the frames allows you to make changes
in either of the files contained in that particular frame and the
Properties Inspector will change to reflect this fact.
Furthermore, you can save any changes made with File/Save As... or
File/Save .
-
Not surprisingly, changing the frame width can be easily
accomplished by moving the mouse until you have the double-headed
sizing arrows and dragging appropriately. The primary point of
this section is to show how to get the Properties
Inspector (Frameset) and get an exact pixel width for the
left frame.
-
Move the mouse cursor between the two frames until the
double-headed sizing arrows appear and Click the left mouse
button. The Properties
Inspector (Frameset) should appear. Make certain that
the left-hand frame is selected in the Properties Inspector.
-
Drag the sizing handles until the Column Value is
approximately 120 pixels, and save the frameset
(frameset1.htm) again.
-
Specifying Targets for Links in a
Frame File
-
Notes:
-
At this point clicking on links in framea -- the left-hand
frame (tocfr1a.htm)
will cause the sites to be displayed in the same frame. The obvious
goal here is to display the sites in the right-hand frame (frameb,
currently displaying howdy.htm)
-
We will change the first link individually (via the
target attribute associated with the anchor tag, sending it
to "_top"), and the other two via the base tag and the
target attribute in the head section of tocfr1a.htm
and save the work in tocfr1b.htm so that the two can be compared.
-
Click in the left-hand frame. Notice that you get the Properties
Inspector (Text) . Select the first link in the
list.
-
Click on the drop-down list associated with the Target
field to get the
Properties Inspector (Target) . Notice that the
names for the two frames are on this list. Click on "_top".
-
From the Menu Bar, click on Insert/Head
Tags>Base. When the
Insert Base Dialog Box appears, click on the
drop-down list associated with the Target field and select
frameb, leaving the href field blank, and clicking on OK.
-
From the Menu Bar, use File/Save Frame As... to
save this file as tocfr1b.htm
.
-
Close this session via File/Close from the Menu
Bar. You will be asked if you want to save changes in
frameset1.htm . Click on: Yes. Why?
-
Note:
-
Recap
-
Menu Bar items discussed:
-
Inspectors discussed: Properties (Frames, Frameset)
-
Panels discussed: Objects (Frames, Base), Frames
Cascading Style Sheets
(From Towers Dreamweaver book: "A style is
a group of attributes that are called by a single name, and a style sheet
is a group of styles.)
-
Specifying Anchor
"Pseudoclasses": Generating a result similar to that of cssinternal3.htm,
using "pseudoclasses for the A tag:
-
Open css3.htm
(if not already done) and obtain the Styles
Panel (If not visible, use Window/CSS Styles from the
Menu Bar)
-
Using the Styles
Panel (with Shortcut Menu) , click on: New Style ...
in the Shortcut Menu and when the New
Style Dialog Box appears, make the following settings:
-
Type radio button: Use CSS Selector (Do this
first)
-
Define In radio button: This Document Only (This will
put the class specification(s) in the <HEAD> section ... of
only this file)
-
Select Tag field and Click on the drop down list and select:
a:link
-
Click on: OK and this will give the Style
Definition Dialog Box (for a:link)
-
Make the settings as shown in the Category choices:
-
Follow the same process as just noted except:
-
Save the work in css4.htm
-
Note: The changes in the <HEAD> section of the
document
-
External Styles (Linked to an
External File, Containing Styles Specification)
-
Linking in an Existing Document
-
Open css1.htm
and follow the process outlined above to obtain the Styles
Panel (with Shortcut Menu) and Click on: Edit Style
Sheet ... (Note: This process is simpler if you use Edit,
rather than New)
-
The Edit
Style Dialog Box will appear. It is the Link... Button
that we will be using. (Note: The box containing specifications
is empty, since we have not styles currently specified.)
-
Click on: Link... and when the Link
External Style Sheet Dialog Box appears, type the file name in
the File/URL field (in this case cssdemo2.css, assuming it is in the
same folder as the current document), and make sure the radio button for the
As is radio buttons is the Link radio button.
-
Click on: OK and notice that the Edit
Style Dialog Box reappears with the style sheet file now specified
in the style specification area.
-
Close the Edit
Style Dialog Box and save the file as css6.htm.
-
Note: The Code in the <HEAD> section of css6.htm,
linking the style sheet file cssdemo2.css. View the html file in a browser
and note the first paragraph is unaffected, since we have not applied the
".intro" class to it.
Behaviors
[Major Source for this
part:
Towers, J. Dreamweaver for Windows and Macintosh
(4)(Visual Quickstart Guide), Peachpit Press, Berkeley, CA, 2001, ISBN:
0-201-73430-3. (Online References: http://www.peachpit.com/ , Online
Materials for the book: http://beta.peachpit.com/vqs/dreamweaver/)]
-
Terminology
-
Dynamic HTML (DHTML): A combination of HTML and
JavaScript, usually in conjunction with CSS styles.
-
Object: An HTML element (usually an HTML tag) in
a web document.
-
Event: Shorthand for event and event
handler. User Event is when the user or the user's browser
performs some common task, e.g. clicking on a link, or loading a web page.
-
Event Handler: JavaScript shorthand for a user
event.
-
Action: A set of programming (JavaScript) that is
executed (usually when a user event occurs).
-
Behavior: An action that occurs when an
event happens to an object. Hence:
Event + Object = Action .
-
Steps in Specifying a
Behavior
Each of the "Customized Behaviors" discussed below will
involve the following steps (Note the order.):
-
Select an object (HTML tag) that
will have an event and action associated with it.
-
Select the browser for which you
want the behavior to work (if possible).
-
Select the action to be taken when
the event occurs to the object.
-
Select the event that will trigger
the action when the event occurs to the object.
-
Preliminaries
In each of
the behaviors described below the Behaviors Panel be used. Here we
discuss how to obtain this panel and related tools.
-
Customized
-
Status Bar
Changes
[This initial source file is from: Towers, J.
Dreamweaver for Windows and Macintosh (4)(Visual Quickstart Guide),
Peachpit Press, Berkeley, CA, 2001, ISBN: 0-201-73430-3. (Online
References: http://www.peachpit.com/ , Online
Materials for the book: http://beta.peachpit.com/vqs/dreamweaver/)]
-
This example has several links: behave1.htm
-
Select an object (tag). For example, select the
link "Pioneer Valley"
-
Begin to select the action to take by clicking on the
Add Action Button 
on the Behaviors
Panel. This will give a pop up/shortcut menu showing
the actions possible with this object (tag).
-
But first use the Show Events For> submenu
will allow the selection of browser for which you wish to
specify the behavior. Pick "4.0 and Later Browsers".
-
Continue to select the action. In this case,
choose the Set Text>Set Text of Status Bar and type in the
text of the message in the Set
Text of Status Bar Dialog Box and click on: OK.
-
The Behaviors
Panel is now set to select the event which will complete
this behavior specification. Note: In this case the
only event possible for this action is onMouseOver (Also
note the Show Events For> submenu. This allows for
changing the choice of browser again at this point).
-
Save the file in behave2.htm.
-
Test the file with a MouseOver and note the code in
the <HEAD> section of the file as well as with the link in
question.
-
Popup Messages
This
example tracks very closely that of the previous one. What follows is
a copy of the previous process and the differences are noted in red. Compare the differences and note the
parallel process and sequence of steps.
-
This example has several links: behave1.htm
-
Select an object (tag). For example, select the
link "Send me comments"
-
Begin to select the action to take by clicking on the
Add Action Button on the Behaviors
Panel. This will give a pop up/shortcut menu showing
the actions possible with this object (tag).
-
But first use the Show Events For> submenu
will allow the selection of browser for which you wish to
specify the behavior. Pick "4.0 and Later Browsers".
-
Continue to select the action. In this case,
choose the Popup Message and type in the
text of the message in the Popup Message Dialog Box and click on:
OK.
-
The Behaviors Panel is now set to select the
event which will complete this behavior specification.
Note: In this case the only event possible for this
action is onClick (Also note the
Show Events For> submenu. This allows for changing the
choice of browser again at this point).
-
Save the file in behave3.htm.
-
Test the file with a Click and
note the code in the <HEAD> section of the file as well as
with the link in question.
-
Opening a Browser
Window
This example will allow for the possibility of opening several
windows.
One of them will be about the size of the frame
that contains this set of links (table of contents) as it appears in the
initial 2388 web page frame outlay: http://www.txstate.edu/cs/course/2388/sawey/).
The file in question is: http://www.txstate.edu/cs/course/2388/sawey/toc.htm
. This one will be discussed below and the other links and
window-openings will be left for the reader to practice in
producing.
As in the previous example, the steps in the process will
varying from the first example (status
bar changes) in similar ways and the variations will be noted in red.
-
This example begins with the file behave4.htm , containing 4 different links in a
bulleted list.
-
Select an object (tag). For example, select the
link "2388"
(Aside: If you want the new window to open but want the
original window to stay where it is, you will need to change the
links/anchors to be "null" by replacing them with a # .
-
Begin to select the action to take by clicking on the
Add Action Button on the Behaviors
Panel. This will give a pop up/shortcut menu showing
the actions possible with this object (tag).
-
But first use the Show Events For> submenu will
allow the selection of browser for which you wish to specify the
behavior. Pick "4.0 and Later Browsers".
-
Continue to select the action. In this case,
choose the Open Browser Window and make
appropriate entries in the Open
Browser Window Dialog Box and click on: OK.
-
The Behaviors Panel is now set to select the
event which will complete this behavior specification.
Note: In this case the event for this action is
onClick (Also note the Show Events
For> submenu. This allows for changing the choice of browser
again at this point).
-
Save the file in behave5.htm.
-
Test the file with a Click and
note the code in the <HEAD> section of the file as well as
with the link in question.
-
Note also: The other links have been adjusted to show
some other variations.
-
Checking Browsers...
-
Rollovers
-
Jump Menus and Jump Go Menus
-
Ready-Made Navigation Bars
-
Form Validation
We will
take a part of intro5.htm,
discussed above and add one more text field (for an e-mail address).
The initial file is behave6.htm
. The discussion below will only discuss validation of the e-mail
fields, but behave7.htm
will also contain validation (for non-empty) for the name.
As
in the previous example, the steps in the process will varying from the
first example (status
bar changes) in similar ways and the variations will be noted in red.
-
This example begins with the file behave6.htm , containing several form objects.
-
Select an object (tag). In
this example it is essential to select the <form>
tag, you should select the entire form.
-
Begin to select the action to take by clicking on the
Add Action Button on the Behaviors
Panel. This will give a pop up/shortcut menu showing
the actions possible with this object (tag).
-
But first use the Show Events For> submenu will
allow the selection of browser for which you wish to specify the
behavior. Pick "4.0 and Later Browsers".
-
Continue to select the action. In this case,
choose the Validate Form and make appropriate
entries in the Validate
Form Dialog Box , picking the appropriate text field, checking
the "Value Required" check box and the Email Address radio
button. Click on: OK.
-
The Behaviors Panel is now set to select the
event which will complete this behavior specification.
Note: In this case the event for this action is
onSubmit (Also note the Show Events
For> submenu. This allows for changing the choice of browser
again at this point).
-
Save the file in behave7.htm.
-
Test the file with a Click and
note the code in the <HEAD> section of the file as well as
with the form in question.
-
Ready-Made
Layers (Including Drag Layers)
-
Useful Panels/Inspector(s)
Although the Insert option on the Menu Bar will do much
of the required work, you might find it useful to have at least the following
panels (Recall, Window/... from the Menu Bar will obtain the
display of these panels):
-
Properties Inspector
-
Panels
-
Drag Layers (finished result:
layerex1.htm )
-
Save "empty file" as layerex1.htm. Some of the options
used below require and existing file before continuing.
-
Modify/Page Properties... via Menu Bar ...
set title (e.g. "Layers Example 1") and background file (bg.gif).
Click on: OK .
-
Insert/Layer (Menu Bar) or via Objects
Panel -- (Common) and the Draw Layer Button 
-
Sizing the layer (If default-sized layer is not opened,
dragging a crosshairs cursor from lower right sets a panel size.)
-
Note selection of layer and moving via the handle 
.
-
Having selected the layer, use the Properties
Inspector (Layer) to name the layer with ID "monkey"
-
Place cursor inside the layer, Insert/Image
via Menu Bar [or via the Objects
Panel -- (Common) and the Insert Image Button],
insert lilmonkey.gif .
-
Click outside the current layer, within the document.
This will keep the next layer from being contained in the current
layer. We are constructing these as separate layers.
-
In a manner similar to that shown above, insert and position
a second layer and give it the ID, "crown" and insert the image,
crown.gif . Note: The resulting
Layers Panel .
-
To set the "destination" for this drag layer,
move the "crown" layer on top of the head of the image in the "monkey"
layer. Note: Arrow keys can be helpful with the final adjustments.
-
Select the image within the "crown"
layer and NOT the layer (Reason: We are about to set
the drag layer behavior and it need to be associated with the <img>
tag to which it will attach an <a> tag and not
set for the <div> tag) and click on the Add Action Button
in the Behaviors
Panel and choose Drag Layer from the choices available
in the shortcut menu . This will yield the
Drag Layer Dialog Box.
-
Notes:
-
Make Certain to pick the
"crown" layer from the Layer Drop-Down list within the drag Layer
Dialog Box.
-
Click the "Get Current Position" Button. This
will help when the user gets close to the appropriate position.
Click on: OK.
-
Move the "crown" layer away from the head position.
-
The Behaviors Panel should appear as shown in Behaviors
Panel (Drag Layer). In particular the Event for
the image should be chosen as (onMouseOver)
if you select the image within the crown layer (Note:
Make certain that the drag layer dialog box has the crown layer selected!!!).
-
Note: The events (Behaviors Panel)
associated with the <a> and <img> HTML tags on the status
bar as well as the Properties Inspector views associated with
each of the tags. The (...) associated with the onMouseOver event
and the <img> tag indicates that the <img> tag is a "child"
of the "parent" <a> tag.
-
Save the file in layerex1.htm.
-
View the work in a browser and drag the crown near the top
of the monkey's head.
- More Examples of Layers:
Stuff for copy and paste throughout:
on the Properties Inspector.
and drag the cursor
to enclose the "Mail" part of the image. When you release the cursor
the 
button and type "inktomi" in
"Anchor Name:: field of the Insert Anchor Name Dialog Box and
Click OK.
section of
the 
and after setting boldface and centering via the Properties
Inspector, type: "Three Views of the Properties Inspector"
. You will now need to
complete the items in your list or menu, but as before:
.
on
this Styles Panel and the ){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}