Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Formatting Layers with CSS Styles

Because layers are a component of CSS-P (remember, P stands for positioning), you can control the page layout of layers with CSS. Whenever you draw a layer on your page, the layer ID appears in the CSS Styles panel, allowing you to control your layers through the CSS Styles panel rather than the Property Inspector. Using CSS instead of the Property Inspector to control your layers opens a whole new range of possibilities. Not only does the CSS Styles panel offer many more options than the Property Inspector, but for site maintenance, CSS is unmatched.

The CSS rules that control a page's layout can reside in either an embedded style sheet or an external style sheet. An embedded style sheet is contained within the current page and applies to that page only. An external style sheet is much more powerful. An external style sheet can be attached to multiple web pages to control and maintain their layouts simultaneouslymaking updating your site as simple as opening a single file (the external style sheet) making your adjustments, and then resaving the file. All pages that use the external style sheet are then updated automatically. No previous web page layout method, such as tables or frames, offers this capability.

Noteworthy

You can nest one existing layer on your page inside another. In the Layers panel, Control-drag (Windows) or Command-drag (Mac) a layer into another layer. Remember, though, that the nested layer's position is oriented by the outer layer's top-left corner. For example, if you drag Layer 2, which is positioned at 150x50, into Layer 1, which is positioned at 50x50, Layer 2 will now be positioned at 150x50 from the position of Layer 1meaning that Layer 2 is now at 200x100.

So let's see what can be done with CSS and layers. As you begin drawing layers on your page, by default Dreamweaver begins building an embedded style sheet. However, you want to be able to control your entire site via an external style sheet. To do this, you first export the layer IDs that control your layers. Then you link your current page to the external style sheet. Once that's done, you can create additional pages that use the external style sheet. Then, whenever you want, you can update your style sheet file, and the changes will be reflected on all your pages.

Here's how to export an internal style sheet to create an external style sheet:

Editing an External Style Sheet

Now that your page layout is being controlled by an external style sheet, you can make changes to it, and the changes will take effect right away. You can make changes to an external style sheet in either of two ways. One way is to open the style sheet file directly in Dreamweaver by double-clicking the .css file in the Files panel. The .css file opens in Code view. You can then edit the code by hand if you like, or you can make your changes through the CSS Styles panel.

With your page layout controlled by an external style sheet, you can make changes to it, and the changes will take effect right away.

You can also edit an external style sheet within any page that uses it. As you saw in the previous section, if a page is linked to an external style sheet, the style sheet name (ending in .css) appears in the CSS Styles panel. You can then edit the external style sheet through the CSS Styles panel. This is the method we'll use here.

Here's how to edit an external style sheet using the CSS Styles panel:

Normally, a layer's placement is set in relation to the top-left corner of the page, so that you can simply enter values in the Top and Left fields. However, you can further control a layer's position by entering values for Right and Bottom.

Next, you'll set the way that content behaves on the layer. By default, layers display their entire contents, even if the contents are larger than the layer itself. But you can use the Overflow pull-down menu to determine how the layer handles content that's placed in it.

5.

Open the Positioning category's Overflow menu and choose an option.

Visible: Ignores the layer's width and height settings. The layer expands to accommodate it's content. This is Dreamweaver's default, and not the best choice when using layers for layout because you'll want fixed control in your layout. You might use this option if you're using a layer in other waysfor a pop-up message, for example.

Hidden: Applies the layer's width and height settings. Any content that exceeds this area is hidden. This setting is good when using layers to control page layout, as it creates a fixed container.

Noteworthy

Watch those target browsers when it comes to Overflow. Be sure to preview your page in popular browsers to ensure that your setting makes your pages appear as you intend.

Scroll: Forces the layer to display horizontal and vertical scrollbars, even if the content fits within the layer. The scrollbars are not visible in Dreamweaver. To see them, you need to preview your page in a browser.

Auto: Adds scrollbars to the layer, but only if the layer contains content that exceeds its boundaries. To see the scrollbars, you need to preview your page in a browser.

The Positioning category also contains several other options, such as Visibility and Clip, which we'll talk about shortly. Now, though, we'll set a background color or image for the layer.

6.

To set a background for your layer, click the Background category in the CSS Rule Definition dialog box; then use the Background Color field to choose a color, or click the Browse button beside the Background Image field and select an image.

[View full size image]

If you don't set a background image or a background color, then your layer's background will be transparent.

Layers primarily make use of the Positioning and Background categories, as you just saw. However, that doesn't mean that you can't use the other categories in the dialog box. For example, maybe you want to set a border for your layer or control the look of any text that appears on the layer. With CSS, it's all fair gamejust be sure to preview your settings in as many browsers as you can to make sure that your layout looks as you expect.

7.

Using other categories in the CSS Rule Definition dialog box, set any other options that you want for your layer. When your changes are complete, click OK.

When you click OK, the settings that you specified are applied to your layer.

8.

Use this same process to make changes to the other layers on your page.

Instantly, your page is updated.

1.

Create a new, blank web page.

2.

Using the Draw Layer button on the Insert bar, draw the layers you need for your layout.

As before, you can draw your layers anywhere. However, each layer that you want to control with the external style sheet must use a layer ID that's defined in the style sheet.

3.

Select each layer in turn and, in the Property Inspector's Layer ID field, type the name of the layer ID that you want to control each layer.

4.

Choose File > Save As and save your new web page. You can name your page whatever you likejust make sure to save it in your local site folder.

Now you're ready to attach your new page to the external style sheet. Here's where the magic happens.

5.

At the bottom of the CSS Styles panel, click Attach Style Sheet.

6.

In the Attach External Style Sheet dialog box that appears, click the Browse button beside the File/URL field; then navigate to your external style sheet. Make sure that Add As is set to Link; then click OK.

Presto! Your three new layers resize and snap into the same position as the layers on your previous page. They also take on any other properties that you've set.

How'd they know to do that? Look at your CSS Styles panel. You'll see <style>, which is the embedded style sheet, and you'll also see your external style sheet (ending in .css). The layer IDs in the external style sheet are overriding the ones in the embedded style sheet.

[View full size image]

Noteworthy

If you'd really like to wrap the 'ol cranium around layers and their use in controlling page layout, explore Dreamweaver's CSS-based design files to see how they were built. Choose File > New; then in the Category list on the left, click Page Designs (CSS). You'll see a list of six very well-designed pages, which you can pick apart.

7.

Your embedded style sheet is no longer needed. Select it and click Delete Embedded Style Sheet at the bottom of the CSS Styles panel.

Profess Your Devotion to CSS: Get Inked for Life!

Badass dudes ride choppers, smoke filterless cigarettes, and drink milk straight from the cartonand girls dig dangerous dudes.

Web design isn't dangerous, unless you consider not backing up your work a walk on the wild side. Fed up with getting pushed around? Tired of being called a Ctrl+Alt+Dweeb? Show 'em you're a badass with one of these killer CSS tattoos. Once the guys in the cellblock see you sporting one of these, nobody will wanna mess with you. In each case, these tats were taken right from the author's own body!^[*]