Home | CSS | Tables | Images | Typography | Layout | Devices | Color Theory | Forms | DW Features | Resources | Accessibility
Dreamweaver behaviors allow visitors to interact with a Web page, to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.
For example, if you want a Web page to open in a new browser window when your user clicks a link, you can use a behavior to achieve this effect. The behavior is made up of the (onClick) event and the Open Browser Window action. Dreamweaver also gives users the ability to use popup messages when you want to give additional information tthat might not warrant building anentire Web page to deliver.
You can use the Open Browser Window action to open a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. For example, you can use this behavior to open a larger image in a separate window when the visitor clicks a thumbnail image; with this behavior, you can make the new window the exact size of the image.
The Swap Image action swaps one image for another by changing the src attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). Because only the src attribute is affected by this action, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in appears compacted or expanded to fit the original image's dimensions.
Below is a print screen of a popup message behavior:
Templates in Dreamweaver help designers make pages look consistent and help when you want to keep updating changes throughout your site. Templates make it easy to create consistent pages and their page elements while automatically updating multiple pages when you need to make changes. Templates are useful for designing an entire page. Dreamweaver allows users to lock in colors, fonts, style sheets, tables, images, and behaviors while leaving other parts of the document editable. Once a template is created, new pages can be created based on that template.
The use of templates can be helpful to users because it lets you lock down your design and make changes, but the benefits of using templates comes when your're working with other design groups or with other teams that contribute content. Dreamweaver has made it possible for novice designers or people with no experience at all to use templates, making it possible to control your design while giving content editors the ability to do their jobs. Dreamweaver allows content editors to work on a site using templates so they can add content without affecting the integrity of the site's design.
Below is a print screen of a template being modified:
Library items and template functions are similar in that users can apply changes to multiple Web pages. The difference between the two is that templates affect the entire design of pages, and library items affect individual pages. When you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later.
Other kinds of changes to library items include renaming items to break their connection with documents or templates, deleting items from the site's library, and recreating a missing library item.You can create a library item from any element in the body section of a document, including text, tables, forms, Java applets, plug-ins, ActiveX elements, navigation bars, and images.
For linked items such as images, the library stores only a reference to the item. The original file must remain at the specified location for the library item to work correctly. It can still be useful to store an image in a library item, though; for example, you could store a complete img tag in a library item, which would allow you to easily change the image's alt text, or even its src attribute, throughout the site. Users shouldn't use this technique to change an image's width and height attributes, though, unless they want to also use an image editor to change the actual size of the image.
Below is a print screen of a library item and a page previewed in a portable device:
When you create HTML documents, you may want to perform the same task many times. This explains how to use the history panel to automate repetitive tasks in Dreamweaver.
To repeat a series of steps once or twice, play them straight from the History panel of Dreamweaver, which records the steps in accordance working on a document. (For background information on the History panel, see Panel History.) To automate a task often performed, you can create a new command to carry out that task automatically.
Some movements of the mouse, click and drag to select or some element of the document window, you can not reproduce or store as part of commands stored. To make a move of this kind, a black line in the History panel (though that line is not visible until you make another action). To avoid movements that can not reproduce, use the arrow keys instead of the mouse to move the insertion point within the document window of Dreamweaver. To make or extend a selection, hold down the Shift key while pressing an arrow key.
You can also save the steps in your history panel as a command so that Dreamweaver automatically formats elements of your page using those same exact steps. The steps are reproduced exactly as they were originally made, it can not modify the steps while playing. For example, if the past has changed to red color of the cell of a table and applies this passage to another cell of the table, will also change the color of that cell. However, you can not specify a different color to implement the transition to a new cell. This tool is very useful. Especially when doing the same tasks over and over. This feature of Dreamweaver is a huge timesaver. I just wish that I knew about it a lot sooner.
Below is a print screen showing Dreamweaver's find and replace feature:
The Dreamweaver software comes with a collection of Spry widgets, which make adding dynamic elements to your websites quick and easy. The widgets are also CSS-enabled, which means you can customize the look and feel of the widgets to match your site.
If you look at the Spry section on the Insert panel in Dreamweaver, you'll see three groups of Spry widgets. The first group controls data and how to display it with widgets such as Spry XML Data Set, Spry Region, Spry Repeat List, and Spry Table. The second group handles form elements with widgets such as Spry Validation Text Field, Spry Validation Select, Spry Validation Checkbox, and Spry Validation Text Area. The last group covers dynamic elements with widgets such as Spry Menu Bar, Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panel.
The Spry widgets are a great addition to Dreamweaver. These powerful elements that once required programming skills have finally been broken down to the novice designer's level. With just a couple of clicks and CSS modifications, you can create a tightly integrated and highly interactive menu with the Spry Menu Bar widget. And instead of creating many pages with a little bit of content, you can create one page with a lot of content organized by tabs with the Spry Tabbed Panel widget.
Below is a print screen of the Teacloud Web-site using one of the spry widgets.
Here are some terms and definitions related to using spry tools:
AJAX: Ajax, is shorthand forAsynchronous JAvaScript and XML, is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications.
Spry: Spry is the framework Dreamweaver uses to allow users to integrate complex AJAX implementations into their Web pages and provide a much richer Web experience for visitors.
XML: Shorthand for eXtensible Markup Language. is a general-purpose specification for creating custom markup languages.It is classified as an extensible language, because it allows the user to define the mark-up elements. XML's purpose is to aid information systems in sharing structured data, especially via the Internet.
Spry Widgets: Spry Widgets are an element of Dreamweaver that displays an information arrangement changeable by the user, such as a window or a text box. They allow you to insert complex layout controls such as tabbed and accordion panels.
