Adobe Dreamweaver Tutorial: How do you use Tables, Frames, Div tags, CSS, AP Divs, and Layers?
For years, Web designers used the HTML feature called Tables to create page layouts, now everyone is talking about Cascading Style Sheets, but how do you know when it's best to use tables, CSS, or both, and what about layers, AP divs, and frames?
Today, most professional designers agree that the best way to create a Web page design is to use XHTML (eXtensible HyperText Markup Language) with Cascading Style Sheets.
But over the years, web design books (including a few I've written) have recommened web design options that aren't the best choice anymore, such as Layers (now called AP Divs).
Here's a quick look at the most common design options in Web design, followed by more detailed explanations of each.
- Tables: In the early days, most people used Tables to create layouts, and they're still used for tabular data. Tables are ideal when formatting database or spreasheet content, as well as laying out columns and rows of information from a datases. (You'll find a lesson on creating accessible tables on the Layers Magazine Web site.)
- Cascading Style Sheets (CSS): These days the most recommended approach to web design is a combination of clean XHTML code (using div tags and heading tags) with CSS. (Follow this link for an introduction to CSS or use the links on the side of this page to choose any of our tutorials on creating and editing CSS with Dreamweaver.)
- Layers and AP Divs: In Dreamweaver MX, MX 2004, and 8, there was a button for the Layer feature, and it offered an easy way to click and drag boxes using divs that were positioned with precision on a page. Layers were intuitive and popular among some designers for a while, but they create such inflexible layouts that they're not well suited to the modern Web. In my early books and videos, I cover Layers because Adobe included many features for them in their program, but today, like most professional web designers, I no longer recommend Layers or AP Divs except in very special cases.
- Frames: If you're still considing using Frames, stop yourself now. When HTML Frames first came along, many people were excited by the ability to display multiple pages in one browser window, which is also possible with iFrames. But few people use Frames anymore -- they're confusing and awkward by modern web standards.
- Todays Web sites are viewed on everything from large monitors to small cell phone screens. Using CSS you can help you create layouts that are far more flexible and adaptable for your users and for all the devices they may use to visit your site. (Learn how to use CSS in Dreamweaver.)
Creating page designs with HTML Tables
In the early days of Web design, most page layouts were on the Web were created with tables. By merging and splitting table cells and even adding background images, designers created complex Web designs with tables. CSS expands upon this concept by adding many new design options, including the ability to precisely add margins and padding around elements and better control of how and where background images appear.
The web design shown here for the ChocolateGameRules.com web site, provides an example of an old-school site created with the HTML table tag. As you see in this example, most designers turn off table borders by setting the table border to 0 to create cleaner layouts. Although you don’t see it, table cells surround each of the photos and captions in this two-column layout.
In the old days, the only way you could create a complex Web page design was to use an HTML table to control text and image placement. This site also uses a background image to give it that chocolate texture.
You find a lesson on how to convert a site design from Tables to CSS on the Layer's Magazine site, which features a tutorial by Janine on how to covert a site like the one at Chocolate Game Rules.
Although tables are no longer recommended for creating page layouts, they’re still considered the best way to format tabular data like you’d find in a spreadsheet program.
You can use tables to format a consistent collection of information, such as the list of trees for sale on the Dexter Tree Farm site, shown in this example, which uses a table to format a list of trees for sale.
Tables are still considered the best way to display tabular data like the list of trees for sale on the Dexter Tree Farm site.
Although I recommend that you redesign sites that use tables to create page designs, like you see above with the Chocolate Game Rules site, I do understand that many designers still find it easier to create layouts with tables, and not everyone has time to redesign their Web sites right away. I have to admit, I’ve been guilty of leaving a few sites online designed with tables long after I knew better.
That said, I recommend using CSS with clean XHTML today for all your Web page layouts (except when you are creating a layout for tabular data). Even then, I still urge you to use CSS to add any styling you want for your tables, such as background colors or padding.
To learn more about tables, you can visit the Chocolate game site, which I created to serve as an example of a site created with Tables and CSS, at www.chocolategamerules.com. Choose View --> Code in your web browser to see the underlying HTML and compare it with sites created using <div> tags and CSS. (I explain how <div> tags work with CSS in these tutorials.)
Considering design options with HTML frames
You won’t find any instructions on this site for creating frames, such as the Pink Flamingos site shown in this figure.
Frames enable you to display multiple Web pages in one browser window. Among Web designers, frames are a little like those plastic pink flamingos stuck in the front yards of so many homes in South Florida: some people love how kitsch they are, and others just think they are tacky. Although frames are still used on the Web, most designers don’t like them because they can make navigation confusing.
Frames are also problematic because when you use frames, the URL at the top of a Web browser does not change, even when you click on links and change the pages displayed within frames. As a result, you can only bookmark, or create a link to, the first page of a site that uses frames. Worse yet, search engines have a hard time properly indexing a site designed with frames, which can diminish your site’s search engine ranking.
Using layers (or AP Divs) to create designs
In Dreamweaver MX, MX 2004, and 8, a Layer feature offered an easy way to click and drag boxes that designers could position with precision on a page. Starting in version CS3 and continuing in version CS5, Adobe changed the name to AP Divs. Divs are simply XHTML <div> tags that serve as dividers in a page. Essentially, they create boxes around content, where the content between the opening and closing <div> tags is considered a box. By organizing content in this way, designers can position sections of text or images independently. Don’t be confused by the fact that I (and most other Web designers today) recommend using <div> tags with CSS to create your page layouts. We just don’t recommend that you do so with the AP Divs (except in a few special cases).
AP Divs, as the name implies, are <div>tags that include styling information that adds absolute positioning. That means when you place an AP Div in a Web page, it stays where you put it, no matter how much space you have in the browser window. This may seem like a good idea at first, and AP Divs were popular among some designers for a while because they are so easy to use and so similar to many of the features in desktop publishing programs (such as Adobe InDesign). But because AP Divs create such inflexible layouts, they don’t adapt well to the changing environment of the Web, where different-sized monitors and other display variations can lead to cut-off text and other undesirable results in AP Div-based designs.
Many designers use AP Divs on occasion to add immovable elements, such as a logo anchored to the top left of a page, to a page layout, but creating an entire design with this feature is no longer recommended.
How to use CSS in Dreamweaver
Editing a CSS Layout in Dreamweaver
Choosing the right Selector for CSS style rules
Customizing CSS Layouts in Dreamweaver CS3
Whether you’re new to CSS, or you’ve been struggling (I mean designing) with styles for decades, the new collection of CSS layouts included in CS3 are a welcome addition to any designer’s arsenal – as long as you know how to customize them.
If you’re new to CSS, altering one of these layouts may seem confusing at first, but it’s certainly easier than starting from scratch. If you’ve been using CSS for a while, you may appreciate the head start these layouts offer, and you shouldn’t have too much trouble finding the styles you need to customize the design. (Free tutorial on customizing CSS Layouts in Adobe Dreamweaver CS3)
Create a Custom Centered Design using Div tags and CSS in Adobe Dreamweaver
Step-by-step instructions for creating a two-column, centered design using divs and CSS in Adobe Dreamweaver. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Creating a Navigation Menu Bar using an Unordered List with CSS Styles
A complete lesson in creating rollover effects for a collection of links by creating a styles for the unordered list and links tags. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Using Floats in CSS to Wrap Text and Align Images and other Elements left or right
Use CSS floats to wrap text and align images left or right in Dreamweaver. When it comes to positioning and designing images, you'll find many styles to choose from. Free tutorial for Adobe Dreamweaver 8 and CS3
More Adobe Dreamweaver tutorials
Short funny clip from Adobe Dreamweaver CS4 training video
Watch more about training videos and order a video course today.
For specific questions, search the Dreamweaver FAQ.
For more comprehensive training, try Dreamweaver training videos or a book, such as Dreamweaver CS4 For Dummies.
To find answers to questions or start learning Dreamweaver right away, click on any of the links on the left, or read through the introductions to the tutorials below.
Free Step-by-Step Tutorials for Dreamweaver
Adding a Drop-Down Menu with Ajax using the Spry features in Dreamweaver CS3
One of the most dramatic enhancements to Adobe Dreamweaver CS3 is the Spry framework, a new set of tools you can use to create drop-down menus, collapsible panels, and other advanced interactive features. There are so many Spry features, Adobe added a new Insert bar to the top of the work area to provide easy access to all of the Spry options.
Spry makes it easy to create AJAX, a combination of CSS and JavaScript that makes it possible to create elements that can be changed without reloading a page.
The following tutorial shows you how to create a horizontal drop-down menu bar for site navigation. You can also use these steps to create a vertical menu bar by selecting Vertical instead of Horizontal in Step 5. (Free tutorial for Adobe Dreamweaver CS3)
Creating Collapsible Panels with Spry in Dreamweaver
(An AJAX-inspired Interactive Effect)
Adobe introduced the new Spry menu in Dreamweaver CS3, adding a powerful set of tools for creating interactive AJAX-style features.
Using the tools in this new menu (located at the top in the Insert bar at the top of the workspace), you can create a variety of AJAX-inspired interactive effects, such as the collapsable panels featured in this step-by-step tutorial. (Free tutorial on Adobe Dreamweaver CS3 Spry Feature)
Multimedia Tutorials
Inserting Flash Files into a Web Page with Dreamweaver CS3
Dreamweaver can insert Flash video (.flv) files, as well as Flash files with the .swf extension. In the last issue, I used Dreamweaver to add Flash video to a Web page. In this tutorial, you learn to insert Flash files with the .swf extension. The process is similar to inserting an image file, but Dreamweaver has more settings for Flash.
Inserting Flash Video with Dreamweaver CS3
The day that everyone has long predicted arrived. Video is no longer a novelty online and Flash video has become the darling of the Web, favored by video giants YouTube and Google Video, as well as a growing number of Web designers. What makes Flash so special? Not only does it combine good quality with great compression, it comes with a video player that is already in use by 95% of Web surfers.
In this column, you discover just how easy it is to convert video to Flash, get a look at how the well-integrated programs in Adobe CS3 Production Premium make it easy to get your video ready for the Web. And, once your video is ready, just follow the step-by-step instructions in this column to add the file to a Web page with Dreamweaver.
Converting Video into Flash with the Flash Video Encoder
You can convert video from one file format to another relatively easily using most video-editing programs. For example, you can open a video in AVI format in a program such as Adobe Premier Elements (a good video editor for beginners) and then choose File->Export to convert it to any of a dozen other formatting and compression options.
Working with Behaviors
Creating Complex Effects with the Swap Image Behavior
Use the Swap Image behavior in Dreamweaver to change multiple images at once with a simple rollover effect.
In this tutorial, you'll learn how to swap several images at once.
(Free tutorial on Behaviors for Adobe Dreamweaver 8 and CS3)
Using a Behavior to Launch a New Browser Window in Dreamweaver
You can use Behaviors in Dreamweaver to create many interactive features; like opening a small browser window when someone clicks on an image. This is a great way to make supplemental information available without closing the page a visitor is already viewing. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Defining a Site in Dreamweaver
The first step to working on any site in Dreamweaver is defining your site and identifying a main root folder where you'll store all of the files and folders in your site. Take a few minutes to set up your site and Dreamweaver will manage your links properly. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Enhancing Dreamweaver with New Extensions from Adobe.com
Extend Dreamweaver's capabilities by installing new extensions to create interactive navigation elements, Flash buttons, online shopping systems and more. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Connecting an HTML Form to a Script in Dreamweaver
Creating a form isn't hard, but connecting to a script like sendmail can get complicated. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Queston: Does Janine really have a new Dreamweaver blog where she publishes the best questions she gets from her books and videos?
Answer: Yep, you'll find many common Dreamweaver questions in Janine's Dreamweaver FAQ blog, and you can email your questions to janine@jcwarner.com.
Bring Janine to Your Conference or Event for a Dynamic Presentation
Combining her professional experience managing Web projects, with the knowledge she has gained as an author and video host, Janine teaches professional Web design with a focus on Adobe Dreamweaver and Microsoft Expression Web.
Call or email Janine to discuss how she can provide the right program for your group.
Partners and sponsors
