© 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 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, have x, y, and z coordinates : x=left y=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 section, and links to the selected HTML tag in the 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