Dreamweaver Intermediate

Advanced web design skills are becoming increasingly useful in the business world, for both web developers and those just maintaining or updating an existing website. Our Dreamweaver training gives you the tools to create rich, dynamic pages that make you and your company stand out from the crowd.

Although complex, Dreamweaver's features are user-friendly, and this Dreamweaver class in Sacramento uses simple, hands-on examples to teach you how to:

• Position text and graphics on a page using HTML and CSS
• Use templates and snippets to streamline the design process
• Add interactive forms and buttons
• Design rollovers and other dynamic features
• Embed Flash videos and audio files
• Create simple animations
• Check browser compatibility and accessibility

This course continues from the Dreamweaver training class and focuses on intermediate topics with the objective of enabling students to take full advantage of the power and flexibility of the application. In this course, you will be introduced to advanced features for designing sophisticated and interactive web pages that employ CSS, forms, and JavaScript.

Using Dreamweaver's Layout Tools

The creators of Dreamweaver recognize that web designers and developers have a cornucopia of different users - with different browsers and settings. Accordingly, Dreamweaver allows designers to choose several different ways to layout a page and includes tools for each technique. We show you the differences between table and css layouts and how to align different parts of your page relative to each other. After completing this section, you should be able to:

• Set a tracing image of your page design
• Use layers to design a page
• Use DIV tags and CSS to lay out a page
• Draw tables in layout view

Templates and Library Items

Larger sites often involve both content entry and web design: webmasters produce a template of a page, and then other members of the organization populate instances of that page with data. This entails the risk that the content/data entry staff will accidentally change the layout of the page. To guard against this, Dreamweaver offers a tool called "templates", web pages where only certain designated portions are allowed to be edited. Even on small websites, it is often necessary to include identical snippets of code in several web pages. For example, all the pages in a site might contain the same main navigation code. Without resorting to templates, Dreamweaver allows the web author to create "libraries" of code snippets and to include them into one or more pages. When the code changes, Dreamweaver will replicate the changes to all the individual pages. This makes it extremely easy to manage and add headers, footers and navigation bars. After completing this section, you should be able to:

• Create a site template and use it for creating pages
• Modify the template and update pages
• Add a repeating region to a template
• Define an optional region in a template
• Modify the properties of the template
• Understand the difference between templates and library items
• Create a new library item and add it to a page
• Modify a library item

Adding Forms with Dreamweaver

Forms and the various elements within a form allow users to enter information into a web page. The information may be employed only within the web browser to perform some calculation for the visitor (such as a calculator) or may be submitted back to the server for greater interaction with the user such as product orders, user registration and web site searching. Although a scripting language is necessary to process the data, the actual form elements themselves are HTML and are easily added with Dreamweaver. After completing this section, you should be able to:

• Understand the use of forms on the web
• Create a basic form with text fields
• Add check boxes and radio buttons to a form
• Include a dropdown menu
• Provide buttons for submission and reset

Rollover Images in Dreamweaver

Designers have a variety of tools at their disposal for drawing a user's attention to something. One of the most common and reliable techniques for navigation and for linking is to employ images that somehow react when a user "rolls over" the image with their mouse. Rollover images are an easy way to spice up a site and make it more interactive. After completing this section, you should be able to:

• Create a simple rollover with 2 images
• Use a mouseover one image to change a different image
• Set up a navigation bar with different rollover states
• Make a Flash button

Adding Behaviors in Dreamweaver

"Behaviors" is Adobe's term for JavaScript functions associated with elements of a web page. For example, the following linkhas a behavior associated with it : when the user clicks on it, a pop-up box is launched. We will discuss the types of events that can trigger behaviors to take effect - for example, when the mouse moves over an item, when a link is clicked, or when a page is loaded. You will learn how to associate Dreamweaver's pre-written JavaScript functions with these events to accomplish advanced image rollovers and writing to text layers. In this part of the course you will learn how to:

• Launch a new browser window of a designated size
• Alert the user with a pop-up message
• Validate a form's data before it is submitted

Multimedia & Specical Effects in Dreamweaver

Web pages have evolved to become "richer", full of flash animations, audio, video, interactive forms and popular Ajax effects. We show you how to add the following effects to your pages:

• Flash animations
• Audio and Video
• Timelines for HTML/JavaScript animation

Using XML in your Web Pages

XML is a data format slightly different from the HTML you're already using to design your web pages. Using XML, you can separate the content (e.g., prices, product descriptions, and contact info) from the styling (e.g., prices in italics, product descriptions in blue, and contact info on the right). We show you how to use Dreamweaver to:

• specify the location of your XML content
• format the XML content in your web page
• rearrange the XML content using XSLT

File Management within Dreamweaver

Managing the files that compose your web site is an important task for any web developer. If a team is working on a web site, they can make use of Dreamweaver's version control system. For each page, you can use Dreamweaver to error-check its syntactic validity, whether any of its links are broken, and more. We show you:

• how to use check-in/check-out version control features
• how to find broken links sitewide
• how to measure a page's accessibility to different audiences

Prerequisites:

• Dreamweaver Fundamentals, or equivalent experience
• Basic knowledge of HTML