Macromedia Dreamweaver 4 Advanced Level Course Add Rollovers • Rollovers or mouseovers are possibly the most popular effects used in designing Web pages • When the user’s cursor passes.
Download ReportTranscript Macromedia Dreamweaver 4 Advanced Level Course Add Rollovers • Rollovers or mouseovers are possibly the most popular effects used in designing Web pages • When the user’s cursor passes.
Macromedia Dreamweaver 4 Advanced Level Course 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. Animated Rollovers • Animated rollovers have been created in Flash, and are referred to as Flash Buttons. • There are 44 different templates available in Dreamweaver. 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. 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 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. 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. 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 dropdown list. • A Jump Menu is an alternative to a navigation bar. 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. 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. 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. Create a Cascading Style Sheet A Cascading Style Sheet is a set of formatting rules that can be applied to all pages in the Web site. • • • • • • • • Text Paragraphs Lists Positioning Background Borders Rollovers HTML tags. 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. 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. 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. Add Layers Layers enable absolute positioning of objects and elements on a page without having to use tables. 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). Modify Layers The Property Inspector simplifies editing and modification of layers. 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. Attach a Behavior Attach a behavior by using one of the following three methods to access the Behaviors Panel: 1. 2. 3. Window > Behaviors (main menu) Shift + F3 key combination Show Behaviors in the Launcher Animation and Timelines Animations need a timeline to make them move. 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. 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 Add Plug-Ins A plug-in enables the specific multimedia content of Web page to be viewed. 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 Previewing the Site Pages • • Preview the site pages in all browsers Add hard drive resident browsers to the Browser List Remote Site • • Set up the Remote Site connection Information is generally supplied by the host server Transferring Files to the Server • • Connect to the Remote Site Transfer files Synchronizing Files • • • Compares Local and Remote files Displays a list of files that are mismatched Saves a record of changes