Home > Articles

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.

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.

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:

L/T/W/H—These are Left, Top, Width, and Height. The Left and Top fields specify the coordinates of the upper-left corner of the layer. The width and height of the layer are given in the other two fields.
Z-index—The Z (depth) ordering of the layers on the page controls the overlapping of the layers on the HTML page. If you'd like a layer to be above another layer, enter a value that is greater than the "underneath" layer. If you don't understand what this value does, it's best to leave it set at the default.
Vis—This is the initial visibility of the layer. If you're going to use JavaScript to control the visibility of your layers, you might have reason to set a layer to be hidden when it is first drawn on the screen. You can use JavaScript to make the layer appear—this is frequently used to create pop-up windows within a Web page.
Tag—The tag used to create the layer. The default tag is <div>, which works across different browsers. The <span> tag will also work with other browsers, but the <layer> tag is Netscape only.
Overflow—The overflow attribute does not apply to the Netscape-only layers. On <div> and <span> based layers, setting the overflow determines how the browser handles situations in which the contents of a layer are larger than the layer itself. The visible setting displays all the layer's contents. Hidden clips the contents that extend beyond the viewable area of the layer. The last two options, scroll and auto, will display scrollbars either constantly, or only if the content exceeds the amount of space available.
Clip L/T/W/H—These are similar to the coordinates for defining the layer, but are used to define the visible portion of the layer. Also, instead of giving coordinates in terms of the page, these coordinates are specified in relation to the layer itself. This is mostly useful for JavaScripting layer-based effects.

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).

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.

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:

Use Transparent GIFs—Forces the use of transparent GIFs in the newly generated table. These GIFs will force spacing of the table to be correct on any browser.
Center on Page—Centers the resulting table on the HTML page.
Prevent Layer Overlaps—Toggles the layer overlap checking.
Show Layer Palette—Displays the layer panel after creating the table.
Show Grid—Displays the document design grid after the table is created.
Snap To Grid—Toggles the snap to grid settings once the table is generated.

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.

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:

Borders—If you want a visible border around your frames, set this option.
Border width—This is the width in pixels of a border, if any.
Border color—This is the color of the border, if any.
Column/Row sizes—Sets the exact pixel size or percentage of the browser that a frame should occupy.

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.

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:

Frame Name—This is the name by which the frame will be referenced in a target attribute. If a link's target is set to this value, the contents of the link will be displayed in this frame.
Src—This is the HTML that will fill this frame. For my example, the filename is navigation.html for the left frame and content.html for the right.
Scroll—Sets whether the frame will scroll if necessary. If you are using a frame as a holder of a static graphic such as a navigation table, you don't want scroll bars to appear.
No Resize—If you'd like the user to be able to drag frame borders around and resize content areas, make sure that this selection is turned off.
Border—To draw a border around the current frame, set this to Yes. This setting takes precedence over the frameset settings.
Border Color—If you want a border, what color would you like it to be?
Margin Width/Height—Sets a margin for the frame.

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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020