Working with Layers

Now that we’ve added basic content into an “index.html” page, it’s time to move on to adding content with more of a purpose in mind. In particular, we want to add content to specific regions on the page.

Remember from the earlier Getting Started page that the basic building blocks of content in Dreamweaver are

• Sites, which have one or more
• Pages, which have one or more
• Layers, which have one or more, and
• Paragraph Blocks, which contain the words and images for your page.

Until now we’ve talked about Sites, Pages, and Paragraph Blocks, but we haven’t yet mentioned Layers. How, then, is it possible that a Page (e.g., our index.html file) has “one or more” Layers when we never added a single Layer? The answer is actually subtle but is important to understand:

A Note on The Way of Things

The process of laying out content on a Web Site is full of caveats, subtle points, and mixed terminology. There are in fact four primary methods of laying out your Web Site, and Dreamweaver actually has support for all of them.

1. HTML Frames are actually a sort of “meta” layout in the sense that a layout done with HTML frames is actually only putting two or more web pages side-by-side in the browser window, each of these pages being its own “frame”.

   HTML Frames are not accessible, are hard to maintain, and tend to be a usability concern because most users do not expect elements of your site to scroll (or not scroll) independently of other elements.

2. HTML Tables allow you to construct a grid-like structure for your layout and were very popular in the early days of Web design.

   They are to avoided, however, because they are not accessible and are very hard to change once you have a lot of content inside them. Tables are intended to list tabular data, not to layout content.

3. Layers allow you to create arbitrarily-sized, arbitrarily-positioned containers on the page. Layers are generally much more accessible than HTML Tables and offer more design freedom.

   They are, however, limited in the sense that the user cannot resize the page’s text and expect the integrity of the layout to be retained. They also tie the layout and the content very closely together, making the layout difficult to maintain across large sites.

4. CSS Layouts including Dreamweaver CS3’s built-in elastic, fixed, liquid and hybrid layouts (addressed later) are considered the “best” way to layout content: they maximize design freedom and are simultaneously very accessible and easy to maintain across large sites.

   The rub of CSS Layouts is the difficulty found in writing good CSS for layouts. Our workshop on CSS covers this topic, but it is not currently possible to create a CSS Layout from scratch in Dreamweaver without knowing a fair amount of CSS. Recognizing this, Dreamweaver CS3 includes a number of pre-built starter CSS Layouts that simply have a number of columns with some starter content.

So where does that leave us? The “best practices” in the industry are to use CSS Layouts, but Dreamweaver’s support of CSS Layouts is dependent on your knowledge of CSS, and many designers come to Dreamweaver hoping to reduce the amount of code they’re expected to learn and write.

We’ve actually decided to walk a tight line between following the industry standards, making the design process as code-free as possible, and appeasing users of older versions of Dreamweaver (e.g. MX 2004 and 8) which do not have pre-built CSS Layouts to work with. With all of this in mind, we will be demonstrating creating Layouts using Layers which are a fair balance of these aspects.

An Important Note on Terminology

Dreamweaver Version CS3 favors the term AP Div instead of Layer. The “AP” means Absolutely Positioned while the “Div” comes from the fact Dreamweaver implements them as HTML <div> tags (simply generic containers) under the hood. These technicalities need not concern us at the moment.

We will stick with the term Layer despite Dreamweaver CS3’s preferred terminology. Dreamweaver versions MX 2004 and 8 use the term Layer in the sense that this curriculum does.

What is a Layer?

A Layer is a container for content. Unlike Photoshop’s concept of layers, which use the transparent-piece-of-plastic metaphor, you can think of Layers in Dreamweaver as being like stick-on cork-boards: they have a fixed size and location, and they contain visible content on the page. They can be moved and (unlike cork boards) resized to arbitrary measures.

Getting Started

First create a pen-and-paper mockup of your layout. It doesn’t have to be pretty: just good enough to get your mind off the layout itself and onto how to create the layout in Dreamweaver.

We will be implementing the following layout, but feel free to follow along using your own layout.

Click thumbnail to view full image.

(Colors added just to clearly distinguish the layers; a less-garish color scheme might be advisable.)

This layout has four layers:

1. Header, which is 800 pixels wide by 150 pixels high (written as simply 800x150) position at the top left of the page,
2. Menu, which is 150x400 and is all the way to the left and just below Header,
3. Content, which is 500x400 and is to the right of Menu and is just below Header, and
4. Sidebar, which is 150x400 and is to the right of Content and is just below Header.

When drawing these Layers it’s helpful to enable Dreamweaver’s Ruler by selecting View > Ruler > Show from the menu. Try and get as close to these dimensions as possible by hand, but we can always fine-tune height, width, and position later.

The Insert Window Again

We’ve used the insert window before to insert content (i.e. images); it turns out that we need to use the Insert Window again to insert our Layers. This time, however, we need the “Layout” tab from the Insert Window (depicted to the right).

Most of the buttons on this tab of the Insert Window are not relevant to this curriculum. We are, however, interested in the fourth button from the right, the “Draw Layer” button (labeled “Draw AP Div” in Dreamweaver CS3), depicted to the right. Clicking this will allow you to click-and-drag to create a Layer in the Design View.

Drawing Layers

After clicking on the Draw Layer button, move your mouse down into the design view and notice that your cursor is now in the form of a cross-hair. Click and drag in the Design View to create a rectangle for your first layer.

Upon drawing a new Layer, its border turns blue and intensifies:

Click thumbnail to view full image.

Repeat this process for the other three Layers:

1. Click the Draw Layer button on the Insert Window
2. Position the mouse in the Design View and click and hold down. This is where the top-left corner of your new Layer will be.
3. Drag the mouse and let go. Wherever you let go will be the lower-right corner of your new Layer

You should now have something like the following:

Click thumbnail to view full image.

Notice that the edges of the layers don’t quite meet and it doesn’t look very professional quite yet.

Cleaning it Up: Properties Inspector Reprise

Unless you have a very steady hand, chances are your Layers might not be exactly the right height and width or position. The ruler helps us with this initially, but the mouse is not a very precise tool. In order to get our Layers sized and positioned exactly right we’ll have to do some fine-tuning using the Properties Inspector.

Selecting Layers

To modify the Properties (including height, width, and position) of a Layer, you must first make it “active”. Making a Layer active is much like making an image active, which we discussed on our page on the Dreamweaver Interface, but it’s actually slightly more complicated since Dreamweaver thinks we’re trying to put our cursor inside the Layer to start adding content to it rather than selecting the Layer to make it active and change its Properties.

To select a Layer:

Click thumbnail to view full image.

1. Position your mouse just to the side of one of the Layer’s borders, and then
2. Slowly Move your mouse over the Layer’s border until the border turns red and your cursor turns into a hand, and finally
3. Single-click the mouse. The Layer’s border will turn blue. The screenshot to the right shows the Header Layer selected.

Reading Layer Positions

Now that we have a Layer selected, the Properties Inspector changes to show us the Properties of that Layer:

Click thumbnail to view full image.

There are four Properties that control size and position of Layers in the Properties Inspector. The screenshot to the right shows what your Header Layer’s Properties might be after drawing it by hand.

1. L indicates the distance from the left-hand edge of the page to the upper-right-hand corner of the page,
2. T indicates the distance from the top edge of the page to the upper-right-hand corner of the Layer,
3. W indicates the width of the Layer, and
4. H indicates the height of the Layer.

So if we have

• L = 0px
• T = 0px
• W = 793px
• H = 148px

as in the above, this indicates that the layer is

793 pixels wide by 148 pixels high and is positioned with its upper-left-hand corner 0px from the left (L) and 0px from the top of the page.

Cleaning Up Layer Size and Position

One of the benefits of choosing “nice” layer sizes like we did (e.g., our Header Layer is supposed to be 850x150 and positioned at (0,0)) is that we can usually align and position layers simply by rounding the dimensions of the layers we drew by hand.

Sometimes it might be necessary to do a little simple arithmetic to figure out exactly what these Properties should be exactly, but the act of positioning and sizing the layers visually while choosing easy-to-work-with numbers should greatly ease this process.

The following table summarizes the L, T, W, and H properties of our four layers:

After filling out these values, you should have the following page:

Click thumbnail to view full image.

Overflow

How do we know at this point the dimensions of our content? This layout is perhaps supposed to span our entire Site of tens or even hundreds of pages, each with a different amount of content. Certainly a height of 400px for our Content Layer isn’t going to be large enough for a very long page. This is precisely the problem with using Layers in Dreamweaver: they have a fixed size and a fixed position.

To help mitigate this problem, Dreamweaver allows you control how overflow is handled. Overflow is any content that is larger than the Layer that contains it. There are four distinct ways of handling overflow:

1. Click thumbnail to view full image.

   Visible allows content to overflow beyond the bottom edge of the Layer. Note that if you have background colors or background images set for the Layer that they will not be applied to the overflowing content. Similarly, if you have Layers placed below an overflowing Layer then the overflowed content will run into the lower Layer. This is to say that a Layer’s size or position will never change with respect to the size of its contents or the contents of any other Layer.

   
   

2. Click thumbnail to view full image.

   Hidden simply hides any overflowing content from the viewer. This will have the effect of cutting off only the bottom-portion of text or images.

   
   

3. Click thumbnail to view full image.

   Scroll will put both vertical and horizontal scroll-bars on the Layer so the user can scroll only a portion of the page to view the overflowing content.

   Note first that the scroll-bars will not show up in Dreamweaver, only in the version rendered by a real web browser. Note second that the web browser will always display both horizontal and vertical scroll-bars, even if the content fits within the Layer. And note finally that this has some usability concerns in that many users might not expect your page to have “inner” scroll-bars: most users are accustomed to having a single scroll-bar on the right-hand side of the page.

   
   

4. Click thumbnail to view full image.

   Auto is sort of a hybrid between visible and scroll in the sense that it will only use vertical scroll-bars (unless there is a very wide image or text that can’t be wrapped to the width of the Layer), and it will only display scroll-bars if the content overflows the Layer. The same usability concern about multiple scroll-bars exists here as well.

   
   

It is this author’s preference to always use “auto” when faced with this decision despite the usability concerns.

Adding Content to Layers

Once you have all your Layers drawn out and positioned exactly the way you want, you can add your content to them. Adding content to Layers is just as easy as adding content to the Body Layer, which is what we’ve been doing up to this point.

To add content to a Layer, simply click inside the Layer to put your cursor inside it, and then add away!

Enough With Layers…

You may have come to the conclusion that Layers are perhaps useful for single-page Sites or ones with a lot of visuals but that they are less useful for content- or text-heavy Sites or ones with a large number of pages. This conclusion is in many ways accurate. If you envision your Site being very large or having a wide variety of content types (e.g. some pages being very short while others being long while others being image-laden or with dissimilar layouts), then you will likely grow frustrated with the inflexibility of Layers. The solution is to use Dreamweaver CS3’s included layout options or to create your own. The latter of these options requires a fairly detailed knowledge of CSS.

What’s Next

So now we know how to add Layers and how to add content into those Layers. Fundamentally we’ve addressed “all there is” to designing and creating a Web Site. What’s left is how to make your site more customized (beyond what is possible with Layers) and easier to maintain.

At this point, if you wanted to change the color scheme of your Site, you’d have to manually change each page, just as you would if you wanted to change the layout of your entire Site. Both of these issues and more are addressed using Dreamweaver’s concept of Styles and Templates.

While we do occasionally venture into Styles and Templates in the Walk-In Workshop accompanying this curriculum, we omit these subjects here. For more information on these subjects, please proceed to the Resources page.