DREAMWEAVER TUTORIALS

Tag Tips
Go ahead: hand code if you want to--Macromedia won't mind. The company has created Dreamweaver knowing that professional Web builders want to get their hands into the guts of their sites. So unlike some other Wysiwyg editors that may deter you from hand coding, you have easy access to the HTML in Dreamweaver. Use these tag tips to take advantage of this feature.

Hand Code If You Want
To get into the code, you need to launch the HTML Inspector:

If you want to work in the HTML Inspector and save on mouse-clicks, the best way to open the HTML Inspector is to use Ctrl+Tab. This will open the HTML Inspector as the active window so that you can immediately type in it without having to change the focus first. You can also use this command to toggle between the HTML Inspector and Document window.

As you work in the HTML Inspector, you can click back to the Document window to see your changes. Alternatively, you can work in the Document window and see your changes immediately take effect in the HTML Inspector (without switching windows). Although several Wywiwyg editors now let you view the layout view and the source code simultaneously, Dreamweaver is one of the few that allows you to work in both at the same time. (It should be noted, however, that closing the HTML Inspector will improve the overall performance of Dreamweaver.)

Use a Code-Based Editor
The HTML Inspector is not really what you'd consider a code-based powerhouse. But that's OK, because the Macromedia team realizes there are better code-based editors out there--and even provides one for you.

Dreamweaver 2.0 is bundled with HomeSite 4.0 for Windows or BBEdit 5.0 for Mac (except the educational, upgrade, and ESD versions). To work with one of these editors, simply launch the HTML Inspector and click the External Editor button. (You can also select Edit/Launch External Editor from the Document window, or use Alt+E, D.) If you haven't previously specified which external editor you want to use, the Preferences dialog box will appear. Make sure External Editors is highlighted in the left column, and then type or browse for the program you want to use. Click OK to launch the editor. The next time you launch an external editor, the code-based editor of your choice will open.

Eradicate Unnecessary Tags
Editing a complex site can be difficult, and you may have an empty set of tags dangling somewhere in your document. These types of errors can easily occur when you're moving objects around in your document, but Dreamweaver 2.0 lets you eradicate these code errors easily with its Clean Up HTML feature.

This feature is not an HTML validator by any means, but it lets you tighten up your code by eliminating such errors as a stray end tag. Choose Commands/Clean Up HTML from the menu bar. In the dialog box that appears, you have several options for cleaning up your HTML:

Remove Empty Tags
If, for some reason, you have tags that don't contain content, you'll want to get rid of them. You can select this option, which is checked by default, and Dreamweaver will eliminate all the empty tags. For example, the second set of italic tags in this code will be deleted:

Ponch was <I>way</I> cooler than Jon.<I></I>

Remove Redundant Nested Tags
In case you got a little carried away with coding and inserted some extra tags along the way, Dreamweaver with delete them with this option (selected by default). For example, the nested italic tags in the following code will be deleted (so make sure the nested tags are the ones you really want to eliminate before choosing this option!):

<I>Ponch was <I>way</I> cooler than Jon.</I>

Remove Non-Dreamweaver HTML Comments
This option deletes all of the comments in the document that were not inserted automatically by Dreamweaver. For instance, <!--Created by Kim Wimpsett, 4/6/99--> would be deleted because it was entered manually, but <!-- #BeginLibraryItem "/Library/library1.lbi" --> would be retained since it's a Dreamweaver comment (used to specify a library item).

Remove Dreamweaver HTML Comments
This option allows you to eliminate all of the comments that Dreamweaver has inserted into your code. However, Dreamweaver only inserts comments into documents using library items, templates, or tracing images to signal the documents as such. Removing these comments turns template-based documents into regular HTML documents, library items into normal HTML code, and removes tracing images. If you remove these comments, you won't be able to automatically update all of your pages that contain the element, so you'll want to be careful when selecting this option.

Remove Specific Tag(s)
With this option you can delete all instances of a specific tag with one click of the OK button. Say you had a change of heart and decide you don't like all those <BLINK> tags you used when your first learned HTML. Just check the box, enter blink, and click OK. You can even delete several tags at once by separating them with commas. Don't include the tag's brackets, and don't worry about the case: blink,FONT works just fine, for example.

Combine Nested <FONT> Tags When Possible
This option combines <FONT> tags so that something like this:

But I had a crush on <FONT color="red"><FONT size="+1">Sgt. Getraer<FONT><FONT>!

would be more lean and mean, like this:

But I had a crush on <FONT color="red" size="+1">Sgt. Getraer<FONT>!

When you've selected which options you want to use to clean up your HTML, you can decide if you want a notice of what was changed by selecting Show log on completion. You might like to know the number of empty tags you had in your document, for example, so you can watch out for those in the future. The log is not very informative, but JavaScript experts can open the file Clean Up HTML.js in a text editor (the default location is \Dreamweaver 2\Configuration\Commands\) and customize the report.

Format Your Code With One Click

Web builders can be picky about their source code. You know how you are--you must indent subsections four spaces instead of five. You lie awake at night thinking about how someone mixed their cases (gasp!). Neat code is a good habit to pick up and it usually saves you time later when you're looking for a specific piece of code. But if you share coding responsibilities with co-workers, you may find that not everyone shares your tidy coding habits.

With Dreamweaver, you can now get a good night's rest even if some tags are capitalized and others are lowercase. Just use the Commands/Apply Source Formatting option to format the code exactly how you want it to look. But first you must define how you would like your code formatted.

Select Edit/Preferences from the menu bar (Alt+E, S in Windows or Command+U for Mac), highlight HTML Format in the left column, and you'll see the wide variety of options you can specify: the size of indents, the case of tags and attributes, and more. Once you've chosen your personal formatting preferences, click OK.

Now if someone was a little sloppy in their coding, you can just select Commands/Apply Source Formatting-your own formatting options will be applied to the existing code. Furthermore, every time you create a new document, your formatting techniques will already be in place. Ahh, no more sleepless nightsò.

For Advanced Web Builders
Advanced Dreamweaver users can have even more control over code formatting on a tag-by-tag basis. Quit Dreamweaver, and open the SourceFormat.profile file (located in Dreamweaver\Configuration) in a text editor. This can be a little confusing, but Macromedia offers some instructions. When you're finished editing the file, save it and restart Dreamweaver to see your formatting take effect.

Search and Replace Globally

The advanced search capabilities of Dreamweaver 2.0 will make experienced Web builders starry-eyed. You might even want to switch from other tools to Dreamweaver just for this powerful feature.

You can launch the search-and-replace function from within the Document window using Edit/Replace (Alt+E, E for Windows or Command+H for Mac) or from within the HTML Inspector (right-click for Windows or Ctrl+click on the Mac, and then choose Replace for Windows from the pop-up menu). You'll be able to search the current document, the current site, or a selected folder. You can also launch this function from within the Site window (by using the same commands). From here, you'll be able to search selected files, the current site, or a selected folder.

The site-wide option is not the only feature that makes the search-and-replace so impressive. You also have a lot of leeway as to what you can search for:

• The HTML Source option lets you search for text that may appear within tags, as well. For instance, this is the option you would use if you were looking for "CNET Builder.com" within this tag: <IMG src="cnetlogo.gif" alt="CNET Builder.com logo">.

• With the text (advanced) option, you have the choice of searching for specific text inside or outside of a tag. And you can limit your search by using the plus or minus buttons to use specific tags.

• You can search for specific tags, attributes, and values with the powerful tag option. For instance, you could find all the <TABLE> tags in the entire site that have the height attribute as 100 percent and change them, delete them, or add text within them.

You also have the option of being case-sensitive in your search, ignoring whitespace differences, and using regular expressions. That's all there is to it. By choosing a few options in an easy-to-use dialog box, you have the most powerful search-and-replace feature to date in a Wysiwyg editor.

Add <BR> and &nbsp; Quickly
Spacing your text just right is important to most Web designers and graphic artists. Keyboard shortcuts for frequently used tasks exist in most Wysiwyg HTML editors to save Web builders' time, and Dreamweaver is no exception. It offers two spacing shortcuts that will save you time.

When you want a non-breaking space--one that keeps the two words around it on the same line--who can remember that convoluted character code? This tip will let you insert the   code into the HTML easily. For Windows, just position the cursor where you want and select Ctrl+Shift+Spacebar. If you use a Mac, it's even simpler: use Option+spacebar.

As for vertical space, sometimes a paragraph break is just too much space. For those who know HTML, the line-break tag is a lifesaver in these situations. To enter <BR> quickly in Dreamweaver, just use Shift+Return. Those familiar with the soft Return in Microsoft Word will find this shortcut to be second nature.

Graphics Tips
The Web is a graphical place, and Dreamweaver offers you many features to keep your graphics lively while also keeping them compact.

One of the most popular features on Web pages these days is mouseovers (or rollovers). You've seen them: You move your cursor over an image and it changes into a different image! A mouseover consists of two images--the image that you first see and the one that is loaded when you mouse over that image.

Dreamweaver makes it really easy to create mouseovers if you know where to look. In the Document window, simply place your cursor where you want the original image to appear on your page. Then select Insert/Rollover Image. (You can also launch this box by clicking the Insert Rollover Image button on the Objects palette.)

The Insert Rollover Image dialog box will appear, where you specify which two images you want to use. The Original Image field should be the image you want to appear on your page, and the Rollover Image field should be that one that pops up when the cursor moves over the original image.

The mouseover won't be viewable within Dreamweaver, but you can easily test it by choosing File/Preview in Browser. When you move your mouse over the image, you should see the second image pop up.

Creating mouseovers is as simple as that, but there are a few tricks that will make them truly effective. First, you should use images of the same size since the code that is inserted requires the same height and width regardless of the images' original sizes. Second, the Preload option (selected by default) will load both images into the browser's cache when the page loads so that you can prevent delays caused by downloading when the mouseover is fired.

Set a Default Image Editor
Just as you can use your favorite text editor to get your hands into the HTML code, you can also work in your favorite image editor while working on your site in Dreamweaver. This tip can save you time when you need to edit an image. Instead of opening the image editor, loading the specific file, making changes, and reloading it into Dreamweaver, you can work almost seamlessly between both programs.

To set your default image editor, select Edit/Preferences. In the Preferences dialog box, highlight External Editors in the left column, and either type or browse for your favorite graphics tool in the Image Editor text box. Click OK, and your image editor is set.

Now when you need to launch the editor, your favorite image editor will open with the selected image already loaded. You can then make your changes, save it, and just click back in Dreamweaver to see the new-and-improved image. (If you resize the image, you'll have to hit Refresh in the Property Inspector.)

Reduce Image Size
Clicking on an image in Dreamweaver's Document window lets you resize it with one of the three handles that appears. (Hold down Shift while dragging the corner handle and your image will scale proportionally.) The Height and Width fields in the Property Inspector are dynamically updated as you do this. You can also type a new height and width directly in the Property Inspector to resize the layout of an image.

But if you look at the image's size in the Property Inspector before and after you do this, you'll see that the file size of the image stays the same. This is because you're not really changing the file, you're just scaling down the image's appearance.

Since load time is important on the Web--visitors who just leave your page if they grow tired of waiting for images to load--you want to get rid of any unnecessary bytes.

Select the image and click the Edit button that appears in the Property Inspector. This will automatically launch your default image editor with the graphic loaded and ready to edit. Do your editing, resizing, or whatever, save your file, and then click back to Dreamweaver. Just click Refresh and you'll see your new image resized, with a smaller file size in the status bar.

Convert Layers to Tables
Dreamweaver's layer feature lets Web builders use the positioning of style sheets to create Web pages that looks exactly how they want them to look. But professionals who also want their pages to work in pre-4.0 browsers will want to use Dreamweaver 2.0's impressive new layer-to-table conversion process.

So what if you want the benefits of absolute positioning but also want the page to look correct in older browsers? That's where Dreamweaver's layers-to-tables conversion comes in. By converting the layers to tables, you let older browsers view your nice layout. Furthermore, although you could start your layout with tables in the first place, it is much easier to use Dreamweaver's layer feature when it comes to complex layout.

To convert your layer to tables, select Modify/Layout/Convert Layers to Table. You'll have several options, including whether to use transparent gifs for spacing within your table. You may want to select this option since it will make your layout consistent on different browsers.

You can also use File/Convert/3.0 Browser Compatible to convert your layers, change your CSS style information to HTML, or both. Your page will be automatically converted with no complex-table coding from you. The style information is replaced with HTML and any coding that can't be replaced is removed. This option creates a separate, converted file and preserves the original file with layers.

Dreamweaver cannot convert overlapped layers, so you'll want to check View/Prevent Layer Overlaps while you're designing your pages. This will make it impossible for you to create overlapped layers.

Create a Frameset
In addition to mouseovers for animated buttons and tables to control layout, frames are one of the most popular features on the Web. This layout technique can be confusing for people just learning HTML, and Dreamweaver lets you create frames without coding.

This feature does have a learning curve and can be confusing for those experienced Web builders familiar with coding framesets in HTML. But once you use this tip to master framesets, Dreamweaver can make the process a lot simpler.

Creating the Frameset
To create a frameset with two frames, select Modify/Frameset and choose one of these options: Split Frame Left, Split Frame Right, Split Frame Up, Split Frame Down. (The difference between the two vertical options, and the two horizontal options, only really matters if you already have content in the frame.)

You can then subdivide these frames by going through the same steps again. However, if you want to create a frameset with four frames, it's simpler to create it by choosing View/Frame Borders and then holding down Alt (Windows) or Option (Mac) and dragging the outside frame border onto the screen.

If at any time you want to delete one of the frames, you can drag the frame border all of the way off the page or to the border of the parent frame. Or if you want to add more frames, go to Modify/Frameset and choose one of those options.

Loading the Content
Once you've created the frames, you can create the content just as you would normally, or you can load a document into a frame by choosing File/Open in Frame. A popular feature of frames is to have links located in one frame load documents in another. This is easy, but only if you're familiar with the process:

2. Specify a name in the Property Inspector's Frame Name box. Do this for each frame.

3. Now, create a link as you normally would, but make sure to choose the target frame's name from the Target drop-down box.

These frame tips will get you started with Dreamweaver's frame feature. But the more you practice creating frames in the Wysiwyg editor, the more intuitive it will be for you. The Frames palette (Window/Frames) can also be helpful for viewing and selecting frames.

Select Discontinuous Table Cells
Sometimes the simplest command can be a lifesaver when it comes to saving development time. Dreamweaver's advanced table editing features fall into this category. When you're tweaking complex tables, the code can get pretty complex.

For instance, if you want individual cells, but not the entire row, to have the same formatting, you would probably go into the code and edit the relevant attributes by hand. Depending on the size of the tables, and the number of individual cells that you want to have similar formatting, this can get pretty tedious. Looking for and tweaking individual <TD> tags by hand isn't very productive and makes your code prone to errors.

In Dreamweaver 2.0, you can select discontinuous cells so easily in the layout view that it could save you hours of work and frustration. Select individual cells anywhere in the table by holding down Control (Windows) or Command (Mac) and clicking on cells you want to format. (If you make a mistake, you can subtract cells by clicking them again.)

Apply your formatting and watch how easy it is to add code to separate places within your document without searching for the correct cells or copying and pasting indefinitely. It's this attention to detail that makes Dreamweaver such a popular tool among Web builders.

Sort a Table's Contents
Dreamweaver 2.0 has included some impressive table editing features for professional Web builders. Along with being able to select discontinuous table cells, you can now sort tables in Dreamweaver 2.0.

If you're aware of how this little trick works, it can be a pretty powerful option when developing pages with complex tables. For instance, assume you want users to be able to alternate between two different versions of a table, each sorted differently, and that you don't have database knowledge. Use Dreamweaver's sort feature to create two versions of the same table and page and then link the two separate versions using user mouse clicks.

To sort a table, click in it (or select it) and choose Commands/Sort Table. The Sort Table dialog box will give you several options by which you can sort, including the following:

• Order--You have the choice of sorting the data alphabetically or numerically, both in ascending or descending order.

• Then By--Once you select the first parameters, you can choose second level parameters to specify how to display something that comes in as a "tie".

Dreamweaver does not allow you to sort tables that contain colspan or rowspan attributes-that is, tables with merged cells. You can get around this for tables with merged rows. Just split that row to match the rest of the table by selecting the cells and choosing Modify/Table/Split Cell (or the Split button in the Properties Inspector). Then, just leave the cells blank; Dreamweaver will automatically insert a non-breaking space into those cells. You can now sort the table and then re-merge that row if necessary.

Make a Site Map
Making a site map is one of the new features that lets you create a visual representation of your site with only one click. Just select Window/Site Map-it's as simple as that. (Dreamweaver may ask you to define your site by specifying its name and root file.)

From the Site view, you can reorganize your site or add images or links by just dragging and dropping files. You can also control the zoom level of map if you only want to interact with a small portion of it.

The Site view makes maintenance easy with these colors and icons:

To customize the layout of the site map, choose View/Layout (Windows) or Site/Site Map View/Layout (Mac). You can then specify the number of columns to display, the width of those columns, and more. Unfortunately, the site map cannot be displayed vertically.

To clean up the clutter, select Window/Arrange Floating Palettes. This will put all the open floating palettes in their default positions. You can also select Window/Hide Floating Palettes to close all of the open palettes at once (or use F4 to toggle between having them open or closed).

To have all the palettes open but make the desktop a little neater, drop one floating palette onto another. This will create a tabbed palette where you can access each one with a click.

But those windows are not the only ones contributing to the workspace clutter. Every time you open a document in Dreamweaver, a new window opens. If you're like most Web builders, you may be working on several pages in one session. The more files you work on, the more Document windows taking up screen real estate.

Windows users can disable this feature and have all documents open in the active window. Select Edit/Preferences and highlight General in the left column. Deselect the Open Files in New Window option, and you'll soon be free from window overload when working on your site. (This option is not available to Mac users.)

Improve Performance
You can improve the general performance of Dreamweaver in several ways:

• Disable RAM Doubler--Mac users may see improved performance if RAM Doubler is disabled.

• Allocate more RAM to Dreamweaver--Mac users should find this speeds up the program.

• Disable some fonts--If you have a lot of fonts on your system, you may see sluggishness in Dreamweaver. The less fonts you have, the more the general performance of Dreamweaver will improve (to a certain point). One hundred fonts or less is ideal.

• Close the HTML Inspector--You can improve performance by closing the HTML Inspector. Only open it as needed.