Macromedia
Dreamweaver
Table of Contents
·
Introduction to Dreamweaver
Introduction to Dreamweaver
|
·
Creating
Sites and Web pages
·
Inserting
Objects
·
|
Inserting Form elements
·
Hyperlinks
·
Scripts, Comments & Special Characters
Scripts, Comments & Special Characters
|
·
Templates,
Layers & Timelines
·
Behaviors
Behaviors
|
·
Others
Chapter 1
Introduction
Introduction
to Dreamweaver
Macromedia Dreamweaver is a HTML editor for
designing and managing Web sites and pages. It provides the tools to edit and
modify the Web pages.
The various built-in components help in
creating Web pages that suit the creator’s requirements and make them
meaningful even without writing a line of code. For instance, using Flash
animations or attaching behaviors to a particular Web page can make it more
clients responsive.
Dreamweaver
Work Environment
Objects
Panel
The object panel is a combination of various
palettes. Some of the main palettes are Common, Form
s, Frames, Invisibles etc. This panel is mainly
used for inserting images, interactive images, form elements, special
characters etc.
Toolbar
The toolbar contains buttons that let you
toggle between different views of your document quickly: Code, Design, and a
third view that comprises both Code and Design view.
Document window
The document window is the main part of
any Web page. It is the document window where the actual web page is designed.
It has the title bar and menu bar at the top and status bar at the bottom.
Dockable floating panels
Most of the panels in Dreamweaver can be
docked—that is, combined into a single floating panel with multiple tabs. For
instance, the Layer Palette is docked along with Frames and History palettes.
Launcher bar
The launcher is a palette containing buttons
that open and close Dreamweaver palettes and windows.
Property
Inspector
The Property
inspector displays properties for the selected object or text, and lets you
modify those properties.
Menu Bar
It contains the
drop-down menus
File: The file menu contains commands for opening,
saving, importing and exporting files.
Edit: The edit menu contains cut, copy, and paste
commands, along with the select Commands, Find and replace, and the Preferences
command.
View Menu: The view menu turns on and off your view of the head
content; invisible elements; layer, table, and frame borders; the status bar;
and image maps;
Insert Menu: The insert menu is used for inserting
all of the items available on the object palette like images, Flash animations,
scripts etc.
Modify Menu: The modify menu enables you to modify properties of the
currently selected object like frames, timelines, templates etc.
Text Menu: The text menu allows you to modify the text through
various options like alignment, styles etc.
7
Command Menu: The commands menu offers useful command like Clean up
HTML and Clean up Word HTML. You can record and play an animation of format and
sort a table.
Site Menu: Site menu houses the commands that have to do with your
entire web site like site management, manage project, define new site, open
site etc.
Window Menu: The window menu contains all the object, properties,
launcher bar along with library, reference and templates etc.
Help Menu: The Dreamweaver Help menu launches your default browser
with the HTML help files. It contains command to register your Dreamweaver
software online.
Dreamweaver
View
The Web pages created in Dreamweaver can be
viewed in three different ways.
Design View: This is the basic view where all the objects are
shown but the tags are not displayed. The different objects can be inserted and
also modified by the Properties, without the use of tags. You can work with
Dreamweaver’s Design view in two different ways.
Layout View: It is used for designing a page layout, inserting
graphics text and other media.
Standard View: In
Standard view, in addition to inserting graphics, text and media, layers are
inserted, frame documents and tables etc can be inserted.
|
Code View: It displays the tags that are used in the
activated Web file.
|
Code and Design View: In this view, both the code and design view are displayed i.e. HTML
code in Code window whereas objects like Text Box, Command Button, Images etc.
in the Design Window.
|
SELF-REVIEW QUESTIONS
1.
Why and how is Macromedia Dreamweaver used?
2.
Discuss the components of Dreamweaver work environment?
3.
What is the use of Property Inspector?
4.
What are the different types of views? Differentiate their types in
terms of HTML codes and layout.
Chapter 2
Creating
Site and Web Pages
Site Management
Before creating web pages, it is necessary to define sites.
Once the site is created, the web pages, images, interactive images etc. can be
stored in that particular site.
In Dreamweaver, the term site
can refer either to a Web site or to a local storage location for the documents
belonging to a Web site. It can still be to your advantage to plan the site
carefully in order to make sure everyone will be able to use it successfully.
To create a new site:
Site-Define Sites or New Site
In the Site Definition dialog box that
appears, the Local Info category is selected.
In the Site Name field, enter a name for the
site.
In the Local Root Folder field, specify the
folder on your local disk where site files, templates, and library items will
be stored or click the folder icon to browse to and select the folder, or enter
a path and folder name in the text field.
For the Refresh Local File List Automatically
option, indicate whether or not to automatically refresh the local file list
every time you copy files into your local site. Deselecting this option
improves the speed of Dreamweaver when copying such files, but when this option
is deselected, the Local pane of the Site window does not automatically
refresh.
In the HTTP Address field, enter the URL that
your completed Web site will use, so that Dreamweaver can verify links within
the site that use absolute URLs.
For the Cache option, indicate whether or not
to create a local cache to improve the speed of link and site management tasks.
If you do not select this option, Dreamweaver will ask you if you want to
create a cache again before it creates the site. It is a good idea to select
this option because the Assets panel only works if a cache is created.
Page Properties
The first step for creating any Web page is to
give a background or color to the text. For this purpose, Modify-Page
Properties or right click on the document and choose Page Properties
Give the title to the document, which will
appear in the title bar of the browser window.
Give a background image, which can be a gif or
jpeg file.
Give a background color to document.
Indicate the color for the text or the links.
Left Margin and Top Margin is used in case of
Internet Explorer.
Margin width and Margin height is used in case
of Netscape Navigator.
Tracing Image is used for reference purpose
only. This image guides the creator in designing a web page. But, it will not
be displayed in the browser.
Using text
The inserted text can be formatted either
using Text Menu or Properties Panel for the selected text.
The various options available are Format (for
headings or paragraphs), Font (more then one font is possible), Align, Size
(font size ranges from –7 to 7), List (ordered lists etc.), Style (underline,
strikethrough etc.), Indent, Outdent, and Color.
HTML Styles
The HTML Styles once specified can be used on
multiple pages in the same site. HTML style formatting only affects text that
you apply it to, or text that you create using a selected HTML style.
To insert a new HTML Style, choose from the
Text Menu-HTML Style-New Style. In the Define HTML Style dialog box, choose the
required format or color or style etc.
To apply the chosen HTML Style to the web page
either open the HTML Styles from the Launcher or choose it from the Text
Menu-HTML Styles. “Clear Selection Style” returns the default text style and
color.
CSS Styles
A CSS (Cascading Style Sheets) style can be
used to control many documents at once and includes all of the styles for a
document. The advantage of using a CSS style sheet over an HTML style is that
in addition to being linked to multiple documents, when a CSS style is updated
or changed, the formatting of all the documents that use that style sheet are
automatically updated as well.
To create a new CSS style, choose the Text
Menu-CSS Styles-New Style.
In the Name text box, specify the name of the
style. It is preferred to choose the first option in Type "Make Custom
Style (class)".
If the CSS style has to be defined in a new
style sheet then, the style will be saved in .css file format and can be used
in multiple pages. To use this style in another web page, it is necessary to
use the command "Attach Style Sheet".
Like
HTML Styles, CSS Style can also be defined for a particular page by choosing
the option "This Document Only".
SELF-REVIEW
QUESTIONS
- How
do you create Sites? Define Sites illustrating an example.
- How
do you use the following commands?
- Changing
the background color of the document
- Inserting
the title of the document
- Changing
the font color and size of the whole document
- Application
of styles
- State
the differences existing between CSS styles and HTML styles.
Lab-exercises
- Create
a site named "website" with root folder in the Z drive.
- Save
the document as homepage.html
- Give
the background color "CC0022"
- Change
the link color "997878"
- Give
the title "netforyou"
- Insert
some text in the homepage.html
- Insert
the html style for the text with font size "+ 3", color as
7744ee
- Create
another page and save as "member.html"
- Insert
some text in this page and save it.
Chapter 3
Inserting Objects
Inserting Images
From the Insert Menu or the Objects Panel,
Insert Image. On placing the image, hotspots, alignment as to the text and
links can be created.
|
|
Inserting Interactive images
Interactive
images like Flash button, Flash text, Rollover images can be inserted. Once
inserted, they can be used as a link to another page.
Rollover Image
Rollover Image is similar to swapping images
where two different images are used in rollover and rollout state.
Navigation Bar
A navigation bar is used in case the user
wants different set of images when different events are used.
Different images are placed in different
events. But, it is preferred to keep images in Up, Over and Down states only.
Also, navigation bar can be placed only once in a Web page.
To edit the navigation bar, choose
Modify-Navigation Bar.
Flash Button
Instead of creating the button in Flash
itself, it is possible to use the predesigned buttons available in Dreamweaver.
Choose Insert-Interactive Images- Flash
Button. Before inserting the button, it is necessary to save the document. In
the Flash Button dialog box, choose from Style, a particular button. Similarly,
it is possible to insert the caption of the Flash button, change the font,
background color, and create links to web sites or target frames.
Flash Text
Dreamweaver allows you to insert Flash movies
that are just composed of text by either using the Insert Menu-Interactive
Images-Flash text or inserting from the Objects panel. Similar to Flash button,
it allows the user to change the font, background color, alignment, and font
color, create links to web pages or the targeted frames. One additional use
relates to the use of rollover color.
|
Inserting Media
It is possible insert flash animations or java
applet or active x controls in a Web page using Dreamweaver. Flash animation,
if inserted has to be a SWF file.
In case of Java applet, insert the class file
and specify the width and height.
Inserting tables
Tables are the most powerful tools used for
setting the layout of the page. Insert-Table or choose Insert table from
Objects panel to create a table in Web page.
After inserting the table, the modifications
can be carried out using the Properties of the table like bgcolor, width and
height, alignment.
To modify the cells individually, click in the
cell and make the modifications accordingly.
For splitting and merging the cells, inserting
rows or columns, increase rowspan or colspan, choose Modify-Table.
Insert Frames
Frames can be inserted or frame pages can be
created using Insert-Frame or Frames in Objects panel. The menu drop-down shows
number of ways in which a page can be divided into frames. For e.g. choosing
“Left and Top” will show the Web page in the following manner:
In this case, four frames are created. To
modify the frame properties, choose Window-Frames.
In case of frames, the target frames are most
commonly used. But for creating a target frame, it is necessary to save all the
frames as well as the frameset.
Choose File- Save All Frames. If you want to
save them individually, then make use of Save Frame as. Once the frames are
saved, the target can be created using the Modify Menu-Link Target. Link Target
will show a dropdown of many options like _self(for opening the link in the
same frame), frames names against which the link has to be created etc.
SELF-REVIEW
QUESTIONS
1.
What are the different objects that can
be inserted through the Insert-menu?
2.
What are rollover images? Illustrate
with an example.
3.
How are frames used in Dreamweaver?
Lab-Exercises
1.
Insert a table. Divide into four
columns and rows.
a.
In the first row, insert four images
that displays "Home", "Profile", "Services",
"Contact"
b.
Insert the flash button "New
Member" in the first column, second row.
c.
Use the flash text for displaying the
heading of the page "netforyou.com"
2.
Insert frame "Left and Top"
in the Homepage.html
a.
Create Web pages like home.html,
contact.html, profile.html, service.html
b.
In the Left frame, insert the flash buttons
such as "Home", "Profile", "Services",
"Contact" in leftframe such that their target opens in mainframe.
c.
In the topframe, insert any gif
animation or jpeg image as a banner.
d.
In the mainframe, write the text
required to be presented for any homepage.
Chapter 4
Inserting form elements
Forms are used to on the Web pages for
interacting with the visitors of your site. Accompanied by server-side scripts
and client-side scripts, they help in tracing the views of the clients. For
inserting form through Dreamweaver, choose Insert- Form or Form Objects, or
choose Forms from Objects panel.
Text Field
Text boxes can be inserted by choosing Form
Objects-Text Field from the Insert menu. The text of the nature of text (single
line) or password or textarea (multi line) can be inserted. Also, it is
possible to limit the length of characters by using “Max Chars”, initialize the
Value and Char Width (size of the Text Field).
Buttons
Buttons like Reset or Submit can be inserted
along with the normal button.
Checkbox and Radio Buttons
With checkboxes users toggle each individual
response "off" and "on." Each checkbox option operates
individually. A user can select more than one option in a checkbox group.
Use radio buttons when the user must select
only one choice from a set of options. Radio buttons are typically used in
groups. All radio buttons in a group must have the same name and must contain
different field values.
List/menu
A pop-up menu allows you to set up multiple
options in a confined space. Only one option choice is visible when the form
loads in a browser.
|
Scrolling lists allow you to set up multiple
options in a confined space. You can set the line height of the list, and allow
users to make multiple selections within the list.
File field
A file field looks like other text fields
except it also contains a Browse button. A user can type the path to the file
they're sending or use the Browse button to locate and select the document
they're sending.
To use a file field, the form Method must be
set to
POST. Visitors post a file to the address you set
up in the form's Action field. 
|
|
Image Field
You can make a more attractive graphic Submit
button by using the Insert Image Field command to insert an image in a form.
The button can also perform other operations
like resetting the form, play a sound etc. when a behavior is attached to it.
Hidden Field
Hidden fields are not visible to your site
visitors, they are invisible elements you place in a document to gather or send
information. The hidden field information is passed back to the server when a
form is submitted, and uses the name and value pair you define when you set up
the hidden field.
Dreamweaver adds a
marker in the document when you insert a hidden field.
Jump Menu
A
jump menu is a pop-up menu in a document, visible to your site visitors,
listing options that link to documents or files. You can create links to
documents in your Web site, links to documents on other Web sites, e-mail
links, links to graphics, or links to any file type that can be opened in a
browser.
SELF-REVIEW
QUESTIONS
1.
What are
the different form elements that can be inserted through Dreamweaver?
2.
What is
the use of image field and jump menu?
3.
How is
hidden field used in case of Dreamweaver?
Lab-exercises
1.
Insert a
form in the page called contact.asp
a.
Insert
for registering a new member text fields like name, age, address.
b.
Also
insert radio buttons for sex and checkboxes for hobbies.
c.
Use
List/Menu for profession.
d.
Use the
submit button and the reset button.
Chapter 5
Hyperlinks
For creating links, usually the <A> or
anchor tag is used. For instance <A HREF=http://www.yahoo.com >
Yahoo<A> will create a link to the site called Yahoo.
Such links can be created without using tags
with the help of tools provided by the Dreamweaver.
Creating Simple links
The easiest way of creating link is to select
the text or image or any other object inserted on the Web page. Right click the
selection and choose Make Link. Another way of inserting the link is to choose
Make Link from the Modify Menu.
The link once created can be removed as well
as changed. In order to do that, right click the selected link and Choose
Remove Link or Change Link. Remove Link option is also present in the Modify
Menu.
The linked page can be opened without using
the browser to view it’s contents by choosing Open Linked page from Modify
Menu.
Links through Property
Inspector
Select the word or image or any other object
inserted on the Web Page. Click the yellow folder placed next to the Link text
box. Choose the URL to which you want to create link to.
|
Email Link
To create an email link, choose Insert-Email
Link.
The text created as a link is “mailing
address”. On clicking the link in the browser, the New Message window will open
for the feedback or any other information.
Another way to create an e-mail link is to
insert the email text as mailto:info@cse.com.np in the Link box of the Property
Inspector.
Point-to-file Link
The Point-to-File icon is used to create links
between the document and the site and within site itself.
For creating a link between the document and
the Site, select the text or image which has to be created as a link. Reduce
the size of the Site and the document so that they are placed against each
other. Drag the Point-to-File icon from the Property Inspector on to the
document placed in the Site with which the link has to be created.
Point-to-file link can also be created inside
the site itself. For that purpose, it is necessary to set any one page as a
Home Page. Open the Site. Right-click the page, which you want as Home Page.
Choose the option- Set as Home Page. Click the icon Site Map (Map and Files).
Drag the Point-to-file icon from the map window to the File window with which
you want to create link.
|
Named Anchors
Named Anchors are used for creating intra-page
links or linking to a particular location in any other Web page of the Site.
Choose Insert- Invisible tags-Named anchors or Invisibles in case of Objects
Panel.
|
Links can also be created using frames,
interactive images, hotspots in images etc.
SELF-REVIEW
QUESTIONS
1.
What are
the different types of links used?
2.
What do
you mean by Point-to-File link? Illustrate with an example.
3.
How do
you insert email links and named anchors?
Lab-exercises
1.
Select
any text on the homepage.html and create a link through the Property Inspector
OR use the point-to-file link from the page to the site.
2.
In
contact.html, insert an email link at the bottom of the page.
3.
In the
left frame , replace the flash buttons with text like “Home” etc. and make a
link.
Chapter 6
Scripts, Comments and Special Characters
Using Scripts
In Dreamweaver, separate options are provided
for server-side and client-side scripts. The scripts can be written in the Code
view or inserted in the Design view using Insert menu.
Choose Insert- Invisible Tags-Script. Choose the script from the language drop-down
which you want to use in the Web page.
|
The script can also be inserted through the
Objects Panel-Invisibles.
|
Insert Comments
Comment is the text inserted in the Code view
for providing information to the user for the tags or the text used by the
user. Comments are not displayed in the browser window. They are used for
reference purpose only.
The HTML code for the tag is <! --….-->
To insert comments, Choose Insert-Invisible
Tags- Comments or choose Invisibles from Objects Panel.
|
Once the comment is inserted, it can be edited
by first selecting the comment icon in Design view and then doing the edits
using the Property Inspector.
Inserting special characters
Special characters are the symbols or the
character entities like &, <,
> etc. The HTML tag is used as &…;
To insert special characters in Design view,
Choose Insert-Special Characters or Character Panel From Objects Panel.
SELF-REVIEW QUESTIONS
1.
Which
command you use for writing scripts in Dreamweaver’s Design View?
2.
Is it
possible to write server-side and client side script through design view? If,
possible, illustrate with examples.
3.
Why do we
use comments while working on Web pages?
4.
Illustrate
some of the special characters used on Web pages?
Lab-exercises
1.
Use
Javascript functions in Contact.html and verify whether it is empty, contains
numeric values etc.
2.
At the
bottom of the homepage.html, insert copyright symbol in place of text “All
copyrights reserved.”
3. Try using the comments while you insert the
script.
Chapter 7
Using Templates, Layers & Timelines
Templates
A template is a document you can use to create
multiple pages that share the same layout. When you create a template, you can
indicate which elements of a page should remain constant (non-editable, or
locked) in documents based on that template, and which elements can be changed.
Create a page using different tools like page
properties, insert image, media, text etc. Save the page as template using the
command File Save as Template.
The saved template can be used on any Web page
using the command File-New from Template
The other option available is to drag the
particular template from the Library-Assets choosing Templates from the Window
Menu.
|
|
When the template is used in any Web page, no
modifications are possible if editable regions are not created. The mouse is
disabled in such pages.
|
You can modify a template even after you've
created documents based on it. When you modify a template, the locked
(noneditable) regions in documents that are based on the template are updated
to match the changes to the template.
Select the part which needs to be changed when the template is used in multiple
pages, Choose Modify-Templates- New Editable Region.
|
Layers
A layer is a container in your Web page that
holds HTML page elements. Using layers in your page gives you more control and
flexibility to make your page dynamic. The layers are quite useful in case of
latest browser, which support the animation facility. The layers can be
resized, placed on one another, hidden or placed anywhere on the document.
Layer can be used on the document using the
Insert Menu- Layer or Common-Draw Layer in Objects panel.
Layers can be nested when more then two layers
are used. In other words, two or more layers can be placed one above another.
This is possible only if the “Prevent Overlaps” box is not checked in the Layer
panel
|
|
In the Property Inspector, the Layer id
specifies the name of the layers,
which is identified when
scripting is done.
L and T specify the position of the layer relative to the left top corner of
the page.
W and H specify the size of the layer in terms of pixels. The size of the layer
can also be changed by dragging the corner square points of the
layer.
Z-index indicates the stacking order of the layers. The stacking order of the
layers can be changed by dragging the layers above or below in the Layer panel.
Vis indicates the visibility of the layer’s contents. For instance, hide
for hiding the contents of the layer.
Tag is either specified as span or div for HTML tag.
Overflow indicates if the layer’s contents are visible or not if the contents
exceed the layer size. For instance, choosing Scroll would allow the user to
see the contents of the layer by using the scroll bar of the layer.
Clip defines the visible area of a layer and can be used to cut content from
the edges of the layer.
The layer properties of the multiple layers
can be changed at once to create uniformity by selecting the layers together
using the key Shift.
Timelines
Layers can be animated by using timelines. Timeline is composed of frames that can alter the
layer’s position, visibility and depth. It can change the source for any
image on a Web page and cause another graphic of the same height and width to appear in
the same location.
Timelines work
only on 4.0 and later browsers. Multiple layers can be animated using multiple layers. Similarly,
multiple timelines are used for animating layers simultaneously.
For using timeline, choose Timelines Panel
from the Window menu.
|
|
|
For animating the layer, follow the under
given steps: ---
·
Insert a
layer.
·
Place any
image or text in the layer.
·
Select
the layer.
·
Modify-Timeline-Add
object to Timeline. The layer added to the timeline will cover 15 frames by
default. The frames can be increased or reduced by dragging the added object in
the timeline.
·
Select
the last keyframe (in this case 15th frame).
·
Drag the
layer anywhere on the document to create the path of the animation.
·
Check
Autoloop (at the top) of the Timeline panel to play the animation in the
browser.
·
Check
Loop along with the Autoloop to play the animation indefinitely.
|
|
The speed of the animation can be changed by
reducing or increasing the Fps (Frames per second).
Animation of more then one layer is also
possible.
Select the frame and right-click to choose
“Add Keyframe” to change the path of the animation. More animations can be
created and used by inserting additional timelines. Choose Modify-Timeline-Add Timeline to insert
timeline and Remove Timeline to delete the unwanted timelines.
SELF-REVIEW QUESTIONS
What is
a template? How do we create editable parts in a template?
1.
What are
layers? Is it possible to use more then one layer in the same place? Illustrate
with examples
2.
How do we
animate layers?
3.
What is
timeline? How do we use timeline while animating layers?
Lab-exercises
1.
Create a
template and save it as “temp1”
2.
Use the
template in a new page named “ani.html”
3.
Create
editable regions in the “temp1” and apply the same changes to the page
“ani.html”
4.
Insert a
layer with an image in the top frame of the homepage.html
5.
Animate
the layer using timeline up to 65 frames in a loop giving a straight path.
Chapter 8
Behaviors
Behavior is one of the powerful tools of
Dreamweaver that allows interaction with the visitors when a particular action
is called upon on the trigger of a particular event.
Events are messages generated by browsers
indicating that a visitor to your page has done something. For instance, if the
user opens a particular web page, the message box pops up as soon as the page
loads in the <onLoad> event.
An action consists of prewritten JavaScript
code that performs a specific task, such as opening a browser window, showing
or hiding a layer, playing a sound, or stopping a Shockwave movie.
After you attach a behavior to a page element,
whenever the event you've specified occurs for that element, the browser calls
the action (the JavaScript code) that you've associated with that event. A
single event can trigger several different actions, and you can specify the
order in which those actions occur.
To open the Behaviors panel either choose
Window-Behaviors or choose the same from the Launcher.
|
|
|
Behaviors Panel will show behaviors depending
upon the version of the browser, for instance IE 5.0 or Netscape 4.0. The old
browser if choose will highlight only some of the behaviors, but on choosing
the latest browsers, almost all the behaviors can be used.
To use the behavior according to the browser,
Click the “+” icon the Behaviors panel and click “Show
Events for”.
Attaching Behaviors
Call
JavaScript
The JavaScript functions can be called in any
event and executed. The behavior can be used in layer, body, image or any other
object used on the document. But the object must be selected before using the
desired behavior.
Choose Call JavaScript from the Behaviors
Panel.
|
The output in the browser would be as follows:
Change Property
Change property allows you to change the
properties of the tag specified in the “Type of Object”.
In the Select drop-down, choose the desired
property.
When this behavior is used, the output in the
browser looks like:--
Check Browser
Some websites are increasingly split into
multilevel versions of themselves to gracefully handle the variety of browsers
in operation. For example, you might want visitors to go to one page if they
have Navigator 4.0 or later, to go to another page if they have Internet
Explorer 4.0 or later, and to stay on the current page if they have any other
kind of browser.
It is generally assigned to the <body>
tag and uses the onLoad event.
Choose this behavior from clicking the “+”icon
of the Behaviors panel.
Specify the versions of the Netscape and the
IE and whether you want to stay on the current page or use another URL or
alternative URL. Use the Browse button to display the Web page as the URL or
Alternative URL.
Check Plugin
If certain pages of your website require the
use of one or more plugin, you can use this behavior to see if a visitor has
the necessary plug-in installed. You can look for only one plugin at a time,
but you can use multiple instances of the Check Plug-in action, if needed.
If there are other plugins apart from the one
specified in the drop-down, the name of other plug-in can be specified in the
“Enter” textbox.
If the plug-in is installed in the client
computer, he is directed to the URL specified in “If Found” otherwise; he is directed to the
alternative URL.
Drag Layer
Drag Layer behavior allows the Web page
visitors to move the layers around the screen or restrict the dragging to a
particular direction only.
This behavior is commonly used in the
<body> tag.
Choose the layer, which you want to drag.
If the movement is “ Unconstrained” then the
layer can be dragged any where on the screen.
If the movement is constrained then the
dragging is limited to the area specified in the Up, Down, Left and Right
textboxes in pixels.
Drop target sets the location for a target for
the dragged layer. Get Current Position fills the current position coordinates
of the layer.
While using the advanced tab, Drag Handle
allows you to limit the area to be used as a Drag Handle. Enter the dimensions
in the Left, Top, Width and Height textboxes. While Dragging option is used for
controlling the positioning of the dragged layer. JavaScript can be executed
when the layer is being dragged and also when the layer is dropped on the
target.
Go to URL
Go to URL behavior allows you to open a URL
window on calling any event. The behavior is also used for opening the URL in
the frames if the frame pages are used.
Choose the behavior from the Behavior panel by
clicking “+” icon. Enter the path in the URL.
Jump Menu
The Jump Menu behavior is used to edit the
existing Jump Menu object.
Jump Menu Go
This menu is used for choosing the menu
defined in the Jump Menu when it works with the “Go” button.
For using the Jump Menu or the Jump Menu
behavior, it is necessary to define the menus in the jump menu.
Open Browser Window
With the Open Browser Window, it is possible
to resize the URL window and also choose to display the scrollbar, navigation
bar, menu bar etc.
If you choose not to display any URL then the
browser window will display the “about blank” window.
Choosing the Attributes will allow you to
display a window according to the chosen attributes.
The output of the above action would be as
follows:--
Play Sound
The Play Sound action is used to add external
controls to an audio file that normally uses the Netscape Live Audio plug-in or
the Windows Media Player. t inserts an <embed> tag with attributes like
loop, autostart, mastersound, hidden width, height. The sound files normally
used are .wav, .mid, .au etc.
Popup Message
This behavior allows you to display a message
box when any event is called through any object. The Popup Message is similar
to a JavaScript Alert box. You enter the message in the Message window of the
Popup Message action.
The output will be displayed in the browser in
the following manner:--
Preload images
The Preload Images action loads images that do
not appear on the page right away (such as those that will be swapped in with
timelines, behaviors, or JavaScript) into the browser cache. This prevents
delays caused by downloading when it is time for the images to appear.
Designs commonly require a particular image or
images to be displayed immediately when called by an action or a timeline, you
designate the images you want to cache for later use through the Preload images
parameter form.
Select the object on which to use this
behavior. Click the “+” icon in the Behaviors panel and choose Preload Images.
To add more images click the “+” con at the
top and delete the unrequired images by clicking the “-“ icon.
Set Navigation Bar
Similar to Jump Menu behavior, this behavior
allows you to modify the already inserted Navigation Bar. It enables the user
to add, delete images as well as setting up advanced rollover techniques.
When you select one element of a navigation
bar, all the elements are swapped to their up state. The set Navigation Bar
enables you to modify that default behavior to a rollover in another area or
any other image swap desired.
Select the Navigation bar from the Drop-down
in the Behavior panel. The Basic tab is similar to Navigation Bar dialog box.
Make the changes as desired by you.
Under the Advanced tab, choose the state form
the drop-down. Set the image in the image file displayed in the “Also Set
Image”. Choose the desired image files from the “To Image File” and the “if
Down, to Image File”.
Set Text
Under this heading, Dreamweaver allows you to
carry out four different types of actions. The different actions are carried
out for setting the text for frame, layer, status bar and text field.
Set
Text of Layer
Similarly, the text of the layer can also be
set even if the text is not used in the layer originally. In other words, the
image or any other object can be replaced in the layer by any text if called
upon in any event.
Choose the layer for which you want to set the
text. From the Behaviors panel, choose
the action Set Text-set text of Layer.
The output of the above behavior in the
browser is as follows:--
Set
Text of Status bar
On setting the text of the status bar it can
be called through any tag usually in the onMouseover or onLoad event. The
message stays displayed in the status bar until another message replaces it.
But, the length of that message is limited to the size of the browser’s status
bar.
Set
Text of Text Field
This behavior enables you to update any text
or textarea dynamically. It accepts any text or JavaScript code (specified in
curly braces).
Select the text field or the password field or
the textarea. Choose Set Text from the Behavior Panel and select Set Text of
Text Field.
When this action is called in the desired text
field through the chosen event the text “Enter the value” is displayed inside the text box.
Show/Hide Layers
Through DHTML, layers can be made to appear or
disappear on command. This behavior gives you easy control over the visibility
attribute for all the layers in the current Web page. It reveals one layer
while concealing another.
The layers can be hidden or shown in any
event. The default button restores the layer’s default visibility value.
Swap Image and Swap Image
Restore
These behaviors work together and especially
called in the onMouseover and onMouseout event. The output of these actions is
that the image changes on the rollover events.
Rollovers are the most commonly used DHTML effects. With the Swap Image
action, the image changes instantaneously to another image in a specific event.
With the Swap Image Restore action, the original image is restored through a
particular event.
TimeLine
The animated layers created through the
timeline can be further animated dynamically by using different events. The
events can be called for any action specified through the options provided in
the Timeline behavior.
Select the layer and animate the same by using
Timeline panel. Choose Show Timeline form the Behaviors panel and select the
desired option.
Go to Timeline Frame is usually called in the
onLoad event. Modifications can be done in this behavior by choosing a
different event and changing the frame number.
Play Timeline and stop Timeline allows any
animation to be played or stopped on the call of any event.
Validate form
The Validate Form action checks any text
field’s input and returns the form to the user if any of the entries are
unacceptable. Attaching this action to an individual text box alerts the user
to any errors as the form is being filled out. To check the entire form, the
Validate Form box must be linked to the form’s Submit button.
Select the textbox for which you require the
validation. Choose Validate Form from the Behaviors panel.
SELF-REVIEW QUESTIONS
1. What do you mean by
behaviors? What are events and actions in case of behaviors?
2. What are the different types
of behaviors used in case of layers? State with examples.
Lab-exercises
1.
Use the
Swap Image behavior in the onMouseover event.
2.
Insert
two layers in such a way that on using onMouseover event on the first layer,
contents of another layer shows up and in onMouseout event, the contents of the
second layer hides.The contents of the second layer are not at all visible as
soon as the document opens in the browser.
3.
Use
Change Property in such a way that in the onClick event, the text gets the
background color.
4.
Set the
text of the Status bar in the onLoad event to “Welcome to IT world”
5.
Using
Open Browser Window, open any URL window with the menu window only.
6. Choose some text and use the behavior “Go to
URL” to open any website.
Chapter9
Others
Library
Library
helps in maintaining consistency through out the site. The Library is contained
in the Assets which display the items present in the site.
Assets
The
Assets panel lets you view the assets present in your site like Flash buttons,
Templates.
All the
images, Flash items, Movies, Color, Library, Templates, Scripts, URLs can be
viewed and used in any Web page.
|
Code Inspector
The Code Inspector displays the Window where
the HTML tags cane be inserted or removed in the Design view itself.
History
The
History panel keeps track of every step of your work in Dreamweaver. You can
use the History panel to undo multiple steps at once.
Similar
to Code Inspector, it is also used for inserting HTML tags and attributes in
the Web page. The main advantage is that
the tag can be inserted wherever the cursor is present in the Document window.
Also, it displays the attributes automatically when the tag is being inserted.
The Quick Tag Editor can be inserted
through the Modify Menu or the Property Inspector.
|
No comments:
Post a Comment
Thanks for comment me