| Designing
with Dreamweaver |
Debbie offers
hands-on, one-on-one Dreamweaver training
Contact
Debbie for details
Agenda
-Set up and define a Web site
-NEW: Create
an accessible table
-NEW: Working with
text
-Work with CSS Styles and HTML Styles
-Create a dynamic Web site with JavaScript behaviors, layers,
the Timeline, Flash buttons and Flash text and more
-Manage your Web site with Dreamweaver's Site Management tools
-Extend the power of Dreamweaver with extensions www.macromedia.com/extensions
-Create a user-friendly, quick-loading, browser-compatible
Web site with Dreamweaver!
See
September's D.E.B. Tip for a
step-by-step lesson on the Dreamweaver Timeline
Create an Accessible Table
• Dreamweaver can create accessible Web content for
users who have impairments
• Use the Insert Accessible Table feature to create
accessible table content
• Dreamweaver supports JAWS for Windows, from Freedom
Scientific (http://www.freedomscientific.com/), and Window
Eyes screen readers, from GW Micro (http://www.gwmicro.com/)
• The screen reader starts reading in the top left corner
of the Document window.
1. Choose Edit…Preferences from the
document window and then choose Accessibility from the Category
section
2. Click the Tables checkbox and click OK
3. Choose the Layout tab on the Insert bar and select the
Insert Table button
NOTE: Standard View must be selected on the Layout tab in
order to insert a standard table
4. Set the table options to the desired settings and click
OK
5. The Accessibility Options for Tables dialogue box appears.
Choose the appropriate settings and click OK.
Accessibility Options for Tables
Caption: Enter a table caption that will appear as
a title outside of the table
Align Caption: Select an align option to
either the top or bottom of the table
Summary: Enter a description of the material
contained within the table; table summaries are read by screen
readers, but do not appear in the browser
Header: Choose an option to apply
scope tags that will indicate the content for each of the
cells in their respective rows or columns. Scope tags are
used by assistive devices and do not appear in the browser
window.
Working with Text
Text can be added to a Dreamweaver document
in a number of ways:
• Type text directly into the document
• Import text
• Copy and paste text
• Use the Property Inspector to set
the font type, style, size and color
• Choose a font combination from the Fonts menu on the
Property Inspector or create a new font combination:
o Choose Edit Font List from the Fonts menu on the Property
Inspector
o Choose a font from the Available Fonts list and press the
<< button to add the font to the Chosen Fonts list
o It’s recommended to add a generic font family to your
font combination so that if none of the chosen fonts are installed
on the user’s system, the text displays as a font that
is associated with the chosen generic font family
HTML font sizes are relative, not specific, point sizes:
Absolute scale = (1-7)
• This scale is relative to the user’s browser
preferences
• Text is 508-compliant: the viewer is in control of
the text size
Relative-to-base scale = (+1 - +7;
-1 - -7)
• Text sizes are in relation to the base font size of
3 (base font 3=default font size: 12 pts)
• Non-508 compliant text: the designer is in control
of the text size, NOT the viewer
Commands
Commands are Dreamweaver's version
of macros. To create a macro:
1. First place your mouse where you want to apply the macro
2. Choose Commands...Start Recording
3. Apply
4. Choose Commands...Stop Recording
5. The Command is now available under the Commands menu
6. To save a Command, choose Window...History to access the
History panel
7. Select the step(s) you'd like to save and then choose the
Save Selected Steps as Command button on the History panel
8. Give the Command a name and save it
9. To remove the Command, go to your hard drive and access
the Dreamweaver/Configuration/Commands directory. Move the
Command to the trash.
Create Disjointed
Rollovers with the Show-Hide Layer Behavior
Rollovers consist of two images—an original
image and a rollover image that appears when the visitor rolls
their mouse over the original graphic. Standard rollovers
created in Dreamweaver require that both images (the original
image and the rollover image) be the same size. Both images
must be stacked up on top of each other as well. If you want
to create more sophisticated rollovers that don't have to
be the same size as the original image, nor do they have to
be stacked on top of one another, use layers and the Show-Hide
Layer behavior.
-
Create a layer for both the original image and rollover
image and place the images in each layer.
- Choose
Window…Layers to access the Layers panel and name both layers
respectively.
- Set
the rollover layer’s visibility to hidden from the Property
Inspector.
- Choose
Window…Behaviors
-
Select the original image on-screen and choose the Show-Hide
Layers behavior from the Behaviors panel.
- Select
the rollover image’s layer and choose the “Show” button.
Then click OK.
- Choose
the onMouseOver event from the Behaviors panel. The rollover
image will now appear when the visitor mouses over the original
image.
- With
the original image still selected, choose the Show-Hide
Layer behavior again. This time select the rollover image’s
layer and choose the “Hide” button. Then click OK.
- Choose
the onMouseOut event from the Behaviors panel. The rollover
image will now disappear when the visitor mouses away from
the original image.
- Test
the rollover in a browser to see the sophisticated rollover
effect.
CSS: Remove the Underlining
From Text Links
(Check out the Digital
Design Camp Conference, Session 4A for the steps to create
this)
Create a Form Validator
To ensure that visitors fill
out forms in their entirety, attach the Validate Form action
to individual form fields.
- After
inserting the desired form fields, either select the entire
form, or select an individual form field and choose the
Validate Form action from the Behaviors panel.
- Select
the Required checkbox if the field must contain data
- Accept
options:
- Anything:
checks that the field is filled out, but it can contain
any form of data
- Number:
checks that the form field contains only numbers
- E-Mail
Address: checks that the form field contains an @ symbol
- Number
from: checks that the form field contains a number in
a specific range
- Select
an event from the Behaviors panel:
- OnBlur:
triggers the Validate Form action when the user moves
away from the field, whether or not the user has typed
in the field
- OnChange:
triggers the Validate Form action when the user moves
away from the field only if the user changed the contents
of the field
- OnSubmit:
triggers the Validate Form action for several text fields
at once when the user clicks the Submit button
URLs
Dreamweaver exchange: http://www.macromedia.com/downloads/
Download from the Dreamweaver exchange:
DOCTYPE, Flash buttons, Advanced E-Mail, JavaScript Integration
Kit and more!
CSE Validator: www.htmlvalidator.com
W3C: www.w3c.org
Word Tracker: www.wordtracker.com
Search Engine Watch: www.searchenginewatch.com
Debbie will
be teaching a hands-on Dreamweaver MX class in March
Click here for details
Source:
These lessons were developed especially for YOU by Debbie
Berg :-)
WATCH
FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB
TIP EACH MONTH...
back
to top
about debbie |
debbie's clients | deb's
schedule | deb's monthly tip
flawebdeb home | dreamweaver
| flash | frontpage
| photoshop
web seminar | digital
design camp | dreamweaver/flash
conference
|
Web Designer
