© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1

Macromedia Dreamweaver 4

Advanced Level Course

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 2

Add Rollovers

• Rollovers or mouseovers are possibly the most popular effects used in designing Web pages

• When the user’s cursor passes over an image, and the image changes, it is

called a rollover.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 3

Animated Rollovers

• Animated rollovers have been created in Flash, and are referred to as Flash Buttons.

• There are 44 different templates available in Dreamweaver.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 4

Inserting a Navigation Bar

• A navigation bar consists of several buttons that represent each page in the Web site.

• Navigation elements can be text or rollover images.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 5

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 6

Form Objects

• Forms are used to communicate information.

• Information is entered into labelled text fields, and with check boxes and radio buttons.

• The information the form generates is activated by a CGI script

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 7

Create a Form

• A red dashed box will be displayed in the document window.

• The form outline will expand as elements are added to the form.

• All form elements are inserted within the outline.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 8

Lists and Menus

• A menu consists of a single-line text field, which has a drop-down menu.

• A drop-down (or pop-up) menu allows the user to select a single option in the list.

• A scrolling list consists of a control-sized text box, with a scroll bar at the side.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 9

A Jump Menu

• A Jump Menu has only one menu (or link) item is visible on the page.

• The remaining items are available in a drop-down list.

• A Jump Menu is an alternative to a navigation bar.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 10

Hidden Fields

Hidden fields enable the form to send

data that is unseen by the user.

This data could be information such as variable data, a form name or version, a page URL, or an e-mail address.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 11

File Fields

• A file field enables the user to upload a file from their hard drive, and send it with the form data upon submission.

• This field enables data sharing, and features a “browse” button for locating the file to be uploaded.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 12

Submit and Reset Buttons

• The Submit button, when pressed by the user, sends the form data to the server.

• Submit sends the form information based on the method and action.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 13

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 14

Create a Cascading Style Sheet

• Text

• Paragraphs

• Lists

• Positioning

• Background

• Borders

• Rollovers

• HTML tags.

A Cascading Style Sheet is a set of formatting rules that can be applied to all pages in the Web site.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 15

Apply and Link CSS Styles

• Apply CSS Styles automatically with Auto Apply

• Link to an external CSS Style Sheet with the the click of a button.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 16

Modify CSS Styles

Modify a style sheet using the Edit Style Sheet function.

Link to an external style sheet using the Link External Style Sheet function.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 17

Attributes and Options

• Type – controls the text attributes.

• Background – controls background.

• Block – controls the block of text.

• Box – controls the spacing of images or elements on the page.

• Border – controls the border around images or blocks of text.

• List – controls the bulleted style.

• Positioning – controls the placement of elements on the page.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 18

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 19

Add Layers

Layers enable absolute positioning of objects and elements on a page without having to use tables.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 20

Create Layers

• Creating layers visually is made easy with the use of the Draw Layer function.

• Layer objects placed numerically, using the Property Inspector, havex, y, and z coordinates :

x=lefty=top,z=depth (stacking order).

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 21

Modify Layers

The Property Inspector simplifies editing and modification of layers.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 22

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 23

Behaviors, Events, and Actions

• A behavior is the combination of an event and an action, which consists of prewritten JavaScript code.

• When a behavior is attached to an element, Dreamweaver writes the JavaScript code into the <head> section, and links to the selected HTML tag in the <body> of the page.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 24

Attach a Behavior

1. Window > Behaviors (main menu)

2. Shift + F3 key combination

3. Show Behaviors in the Launcher

Attach a behavior by using one of the following three methods to access the Behaviors Panel:

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 25

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 26

Animation and Timelines

Animations need a timeline to make them move.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 27

Create a Timeline Animation

• Timelines are made up of a series of still frames, which are displayed on the screen at 15 frames

per second (fps).

• Keyframe are frames containing the change to the movement of the

object.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 28

Behaviors and Timelines

Add a behavior to a timeline to:

• to stop and play the animation

• enable user to control interactivity

• link to other frames

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 29

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 30

Add Plug-Ins

A plug-in enables the specific multimedia content of Web page to be viewed.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 31

Add Movies

• Director is a fully interactive multimedia program, incorporating digital audio and video.

• Flash uses vector graphics to create animations, special effects, and site navigation

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 32

Review Questions

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 33

Previewing the Site Pages

• Preview the site pages in all browsers

• Add hard drive resident browsers to the Browser List

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 34

Remote Site

• Set up the Remote Site connection

• Information is generally supplied by the host server

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 35

Transferring Files to the Server

• Connect to the Remote Site

• Transfer files

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 36

Synchronizing Files

• Compares Local and Remote files

• Displays a list of files that are mismatched

• Saves a record of changes

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 37

Review Questions