Working with Dreamweaver

Dreamweaver is an advanced, yet easy-to-use visual editor for creating and managing Web pages. 



One of the biggest advantages of Dreamweaver is that it offers DHTML features like animated layers and behaviors, and you don’t need to write any code for it. You can make a complete cross-platform, cross-browser Web page–including text, images, sound, animation, and links to other
documents–without writing any script. You can also check for how your page would display in different browsers.

Let’s look at some of the advanced features in Dreamweaver, and how to use them. 

Code reusability



If you’ve got some content that you want to use on more than one page of your Website, you needn’t write it again and again for every page. You have three options in Dreamweaver–you can reference an external file, using either the server side include, or Dreamweaver’s library items; or you can create templates if you want most of the pages on your site to look the same. 

Server-side includes



Server-side includes are instructions that your server processes. So, your server must be configured to accommodate them. To reference an external file with a server-side include, select Insert>Server side include and browse or type the path of the external file.

To edit the content of your external file, select the include and click on Edit in the Property inspector dialog box. 

Library items



To create a library item, select the content you want to reuse, choose Modify>Library>Add object to Library and name the library item.

To insert a library item on an HTML page, open the Library Palette (Window>

Library), and drag the particular item from the library to the document.

Templates



Another way of reusing stuff is to create templates. After you’ve determined the design of the page that you want to use as a template, go to File> Save as Template. To define which sections of the page will be editable, click on

Modify>Templates> Mark selections as editable.

Layers



Layers are used to position elements at exact locations in the browser window. Layers can contain text, images, plug-ins, or other layers.

To create a layer, click on the Layer button in the Object palette. The mouse cursor changes to “#”, which enables you to draw a layer in the client area of the window. After you’ve finished with the drawing, you should see a layer markup in the upper left corner of the window, which shows that you’ve created a layer. You can also select layers using this markup. If the layer markup isn’t visible, choose View>Invisible elements. The name of the layer appears in the Layer palette. As you create more layers, their names will be added to the Layer palette, and you can also see a markup for each layer that you create.

Timelines 



Timelines help in creating animations by changing the size, visibility, position, and stacking order of layers over a certain period of time. You can also use timelines when you want to use time as a variable on your Web page. For example, you may want to display an image a few seconds after the Web page has loaded, or you may want to change the image and display another one.

However, this function appears only in browsers 4.0 and above.

To animate text or images using timelines, you need to insert them in layers. To do this, first make a layer and insert the content you want to animate, say an image. Then, move it to the location from where you want the animation to begin.

Launch the Timeline window by clicking on the launcher. Select the image that you’ve just inserted in the layer. 

Go to Modify>Timeline>Add object to Timeline, or simply drag the selected image on to the Timeline inspector. When you do that, a bar in the first channel of the timeline will display the name of the layer you’re using.

Now you need to define the final location of the image on your Web page, and the path the image would take. Click the Keyframe marker in the Timeline window. Then, move the layer to where you want the animation to stop. If you want the layer to move in some sort of curve, select its animation bar and control-click to add a keyframe at the cursor position. Or, click a frame in the middle of the

animation bar and choose Add keyframe from the shorcut menu. Repeat this step to define additional

keyframes. To view the animation, hold down the Play button.

Behaviors



Dreamweaver lets you attach behaviors to objects to give you features similar to

DHTML. The advantage is that you don’t have to write any code for this–it’s generated automatically.

A behavior is a combination of event and action. An action is a pre-written JavaScript that performs specific tasks, for example, opening a browser, playing a sound file, etc. 

Behaviors can be attached to links, images, form elements, or any of the several HTML documents. What’s more, you can attach as many behaviors as are defined for the particular object.

To attach a behavior, first select the object (if you want to attach a behavior to the entire page, click the tag in the tag selector at the bottom left of the document window). Then, go to Window>Behaviors to open the Behavior inspector. You can see the HTML tag of the object in the title bar.

Then click on the “+” button to see a drop-down menu of available and allowed behaviors for that object. Select one and click on it. The default event for the action appears in the Events column. If you want a different event, select one from the Events pop-up menu. You’ll be able to activate only some of the behaviors and events attached to them, depending on the browser you’ve specified and the object selected, because some actions don’t work in the earlier versions of browsers. 

Roundtrip HTML



Roundtrip HTML is a unique feature of Dreamweaver that very few of us know about. This lets you move your documents between Dreamweaver and a text-based HTML editor, with little or no impact on the content and structure of the document’s HTML source code.

If you’ve used Dreamweaver, you’d know that when you cut or copy something into

Dreamweaver, the whole structure of the content is gone, and you have to rewrite the tags or redefine the properties. Roundtrip HTML helps you handle this problem. 



By default, Dreamweaver rewrites overlapping tags, closes open tags that aren’t allowed to remain open, and removes extra closing tags when you switch back to Dreamweaver from your external editor, or when you open an existing HTML document. If you don’t want Dreamweaver to rewrite any source HTML, choose Edit>Preferences, then select HTML Rewriting to turn off all rewriting. 

Dreamweaver displays markers in the document window for HTML that it doesn’t support. The invalid tags are highlighted in yellow, and the text within the tags appears as plain text. When you select the invalid tag, Dreamweaver describes the error and how you can correct it in the Property inspector. If you turn off HTML Rewriting, Dreamweaver displays as invalid any HTML that it would have rewritten, and you can correct it if you need to.

However, Dreamweaver doesn’t alter Cold Fusion Markup Language

(CFML) or Microsoft Active Server Page (ASP) tags, and it displays icons to identify blocks of CFML or ASP code in the Document window whenever possible.

However, these sophisticated features aren’t all that Dreamweaver has to offer. You can enhance its capabilities tremendously by creating your own actions, events, objects, and

commands. You can use HTML, XML, JavaScript, or C to add to the available options in

Dreamweaver.