- Advanced Navigation
- Advanced Layout and Document Control
- Cascading Style Sheets
- Customizing the Document Design Window
- Forms: A Brief Introduction
- Direct Access to the HTML
- Site-Management Tools
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Advanced Layout and Document Control
There are a few HTML constructs that behave a bit differently from images, tables, and other simple objects. Layers and frames, for example, have their own panels for fine-tuned control, whereas style sheets can be used to alter the appearance and behavior of existing HTML objects. Let's look at these features now.
Positioning with Layers
By this point in time, you should be able to use tables to position your content and navigation. Unfortunately, although tables are a good way to create consistent layouts, they are also cumbersome to use and maintain. Additionally, the complex table sets that are created within the Dreamweaver MX interface are very difficult to edit by hand. Digging through 10 or so nested tables can be a nightmare. To get around the limitations of positioning elements using tables, Netscape created the Layer tag. This tag was designed to form a floating layer that could contain HTML and be positioned on a Web site wherever the author felt necessary.
Although a good idea, the folks at Netscape had jumped the gun. There was no corresponding standard in the HTML specification for the Layer tag, and only users who were browsing with Netscape could make use of it. Designing completely separate Web sites for Netscape and everyone else didn't make much sense, so the Netscape-designed version of layers didn't live a very long or fruitful life.
Luckily additional tags were added to the HTML specification that, when coupled with style sheets, gives the author the sort of cross-browser and cross-platform support that was impossible to achieve previously.
Before you get too excited, there is one slight drawback to the use of layers: The users must have a modern browser in order to see them displayed properly. If they're viewing with an older browser, the display isn't going to look anything like you intended. For most people, this is a design decision that can be made without stepping on too many toes. Looking at the statistics from several Web sites that I oversee, fewer than 2% of the visitors to these sites use older than a 4.0 browser.
Tables can be constructed with precise cell and column widths to construct a very "tight" layout. With layers, you can accomplish the same thing in much less time, and with significantly fewer problems.
Assume you have a table with images and want to change the width of one of the images so that it extended slightly beyond the cell where it currently lies—all without changing the width of the cells underneath it. With standard HTML tables, this gets to be quite a headache because cells would have to be split, or new tables would need to be inserted.
With a layer it's very easy. For example, take a look at Figure 3.8. As you can see, it certainly isn't very consistent with a table-based layout. The images are not spaced consistently down the length of the table, and the text cells don't line up with what would be columns or rows. In fact, if you look closely, you'll see that the images are actually overlapping on the page. This isn't a specially edited graphic or any sort of trick—it's just an example of the sort of flexibility that comes with the use of layers.
){kind=link}
Figure 3.8 Layers let you create some pretty complex page designs without much trouble.
To add layers to your own page, click the Layer tool in the Common category of the Insert panel, and then move your cursor to the document design view. Next, draw a rectangle about the size of the layer you want to create. Don't worry; you can always resize it later.
Selecting Layers
You'll notice that two things were inserted into your design view: the rectangle that holds the layer contents, and a tag that represents the layer itself. To add items to the layer, click inside it and begin typing or adding HTML objects from the Insert panel. On the top-left corner of the layer is a small square handle. The handle can be used to select the layer itself (rather than its contents). This allows you to move (either through dragging or the arrow keys) and resize the selected layer.
Additionally, you can click the layer tag icon itself to select a layer. This is actually a useful way of getting to a layer. Because layers can be overlapping, or even invisible, it's often difficult to find them when you're looking.
Viewing Layer Properties
After you've added a layer to your page, open the Properties panel for the layer, as seen in Figure 3.9.
){kind=link}
Figure 3.9 Layer properties include attributes that are not shared with any other HTML object.
Layers have several attributes that are not shared with any other object:
The rest of the layer attributes should, by now, be familiar.
Using the Layers Panel
Layers are an important enough object that Macromedia felt they deserved their own tool panel. To see what I mean, insert a few layers into a design window. You can even nest layers within each other by holding Alt (Windows) or Option (Macintosh) when inserting subsequent layers in a document. Open the Layers panel from the Others option of the Window menu. Shown in Figure 3.10, this panel lets you arrange the Z ordering of all the available layers (the higher Z numbers are displayed on top of lower numbers).
){kind=link}
Figure 3.10 The Layers panel gives you a quick view of the layers in your document.
In addition, you can click within the "eye" column to toggle between visible and invisible modes (open and shut eyes). To change the layer names and ordering, just click the text you want to change and the field will become editable. If you have layers that are nested within one another, these will appear as a hierarchical indented list. You can remove nested layers from their parent list by dragging them within the panel.
Near the top of the tool panel, you'll see the Prevent Overlap check box. Choosing this will prevent new layers that you add to the document from overlapping. Now let's see why you'd even want to use this option.
Converting Layers to Tables and Vice Versa
If you like the ease of design that layers give you, but don't want to sacrifice support for other browsers, Dreamweaver MX gives you an option that will make you jump for joy: the capability to convert layer-based pages to tables and vice versa. You can design your pages using the free-form layer approach, and then convert to tables for the final deployment of your site. The only problem is that you can't convert overlapping layers to a table—thus the option that you saw in the last section. To test this function, add a few layers (with content) to a new page, and make sure that you don't have any overlap. Choose Convert Layers to Table from the Convert option of the Modify menu. Figure 3.11 shows the resulting dialog box.
){kind=link}
Figure 3.11 The conversion between layers and tables is painless.
From my experience, your best bet is to go with the dialog box defaults. If you aren't concerned about the exact positioning of the cells in the resulting table, you might want to use the Smallest option rather than Most Accurate. When Dreamweaver MX generates the accurate tables, it creates enough cells to exactly position the contents of the layers within a table cell. The Smallest setting, however, will snap to the nearest cell if it is within the given number of pixels (default is 4). This cleans up small spaces and produces a less complicated table—if possible. The other available options are listed here:
In addition, if you have an existing site that is based on tables and want to convert it to layers, Dreamweaver MX will let you do this as well. Just choose the Tables to Layers option. You'll probably notice that this does not create a perfect conversion. Using Dreamweaver MX to go back and forth between layers and tables is a good example of the shortcomings of this feature. If you've used transparent GIFs to force the layout of layers into a table and then translate back to layers, each GIF will be in its own layer. Still, even with these drawbacks, this is a very useful feature that makes it possible to design pages with layers, and then convert them to a table format viewable in older browsers.
Creating Persistent Elements with Frames
Although similar to Layers in the level of control they provide over a page's layout, frames have an entirely different purpose. If you've started to link pages together in your site, you've probably duplicated the navigation bar on each page. Providing a consistent way to navigate through a Web site is very important in creating a pleasant and seamless user experience. If your navigation is built using rollover images, the process of loading new pages can take quite a while. Even if the individual images of the rollover navigation are cached, the load time still suffers.
One potential way to get around this is to use a frameset to define a navigation frame and a content frame. These frames each contain their own HTML document and only the portions of the page that actually need to change have to change. An added benefit of frames is that although the content of one frame might move as the page is scrolled, the other frames do not. This means that your navigation bar stays in the same place on the screen at all times—no need to scroll around and find it when you're done with a particular page.
I'm sure you've seen the Target attributes that you can set as you specify links on your pages. Now those attributes are going to come into play. Each frame in a frameset has a name—when you want a link to attach to that frame, you set the Target to the destination frame's name. If you'd like a linked page to be loaded into the same frame that contains its link, there is no need to set a target.
Defining a Frameset
Setting up a frame isn't one of Dreamweaver MX's strong points—if you find this at all confusing, don't feel too bad. The frameset tools are not as intuitive as one might hope. First, create a new document to hold your frames. Next, select the frame category in the Insert panel. I'm going to insert the Left Frame frameset in order to provide a constant navigation element down the left side of the screen.
After inserting the frameset, you should see that your design view is now broken into a few segments, similar to a table. Clicking in any of these areas results in live editing of the HTML document that is contained in that frame. It's important to make the distinction that you aren't editing cells similar to a table—instead you're editing entire HTML files that will be loaded into the frame. However, before you do any editing, it's best to set up the frameset the way you want. You can click on the outline of the frame dividers in your design view to select them. Holding the mouse over one of the frame's borders will change the cursor to a resizing tool. You can click and drag to change the position of the frame borders to fit your particular application. Selecting the outer-most border will select the frameset itself. Go ahead and do that now, and then open the Properties Inspector so that you can see the frameset's information. Figure 3.12 shows the properties for a left-navigation based frameset.
){kind=link}
Figure 3.12 Select the frameset to edit properties for the individual frames.
After you have the properties open, you can edit the size of the frames by hand. In the lower-right corner of the frameset properties is a small graphical representation of the frames that are available on your screen. Click between them to see what this is actually doing. To adjust one of the frames, just click the one you want to change, and then edit the properties of the frameset:
With these properties adjusted, you can add some content to your frames. The easiest way to do that, assuming you already have HTML documents you want to insert into the frameset, is to open the Frames panel by choosing Other, Frames from the Window menu. Shown in Figure 3.13, the Frames panel provides a very simple means of selecting the individual frames that make up a frameset. The names of each frame are shown inside the content area of that frame within the panel. Clicking a frame selects it in the design view and allows you to easily adjust its properties in the Properties panel.
){kind=link}
Figure 3.13 Choose a frame to edit its properties.
The Frames Properties
After selecting a frame within a frameset, the Properties panel will display the specifics for that frame. In particular, you can modify these attributes:
Choosing the source (Src) in the Properties panel is the easiest way to attach a document to a particular frame within the set. Although it is possible to edit documents directly within the onscreen frames, this can be confusing because you can't navigate within the frameset—you can only view the initial documents that are displayed.
When you've finished setting up your frames, save the frameset by choosing Save Frameset from the File menu.
The NoFrames Content
Within a frameset definition, a special part of the HTML will be shown if the browser does not support frames. Within this area, you can place an alternate "frameless" version of the page, or inform the viewers that they must upgrade their browsers before continuing. You can access this special content by choosing Edit NoFrames Content from the Frameset option under the Modify menu.
Complex Framesets
The Insert panel's potential framesets is only a starting place for designing your own frames. Similar to tables, you can nest framesets inside of one another to create subdivisions of a given frame. You can also use the Split Frame options under Frameset in the Modify menu to subdivide a frame. This will let you set up your frames within the current frameset rather than embedding multiple frames within one another—which can lead to some nasty code.
TIP
There is one good reason to embed multiple framesets within one another. As it stands now, a link can only target a single frame, or the top of a frameset. In order to refresh multiple frames within a page, those frames can all be embedded within a single frameset, and the top of that frameset itself can be the target of a link.
To Frame or Not To Frame?
There is some debate whether frames are a good idea for Web sites. I've recently worked on a few projects in which the goal was to redesign an entire site so that it worked outside of frames, even though the layout was originally designed to be included in a frameset.
The trouble with frames is that they can get confusing depending on how a user interacts with them. Suppose that a user goes to a page and finds content in one of the frames that he'd like to bookmark. Depending on the browser, it might bookmark the frameset (which doesn't necessarily include the page the user navigated to), or it might bookmark one of the frames in the frameset if the user highlighted it. For new users, this can be confusing and more than a little distressing.
For dynamic applications, if variables are being passed around to programs that generate the content of the frames, these programs might get out of sync with each other. Instead of having to generate a single page, the software needs to update multiple pages in multiple frames. On the flip side, this means that program functionality, in some cases, can be divided among multiple programs, with each program only knowing how to generate content for its frame.
No matter what route you choose, you'll find reasons for and against it. Frames are an HTML tool, and much like layers and tables, they have their benefits and their drawbacks. Go with what works best for you.