Ten Ton Dreamweaver [Electronic resources]

Geoff Blake

نسخه متنی -صفحه : 109/ 39

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:

Choose Window > CSS Styles to open the CSS Styles panel.

An external style sheet can be attached to multiple web pages to control and maintain their layouts simultaneouslymaking updating your site a breeze.

When the CSS Styles panel opens, you'll see the layer IDs for each of your layers.

Choose File > Export > CSS Styles.

In the Export Styles as CSS File dialog box, navigate to the location where you want to save your external style sheet, give the file a name, and click Save.

[View full size image]

Although the style sheet has been exported, the layer IDs remain in the document they were created in. You need to remove the internal style sheet that contains the layer IDs. Then, when that's done, you'll need to link the document to the external style sheet.

In the CSS Styles panel, click the <style> expander heading at the top of the panel (this header represents your embedded style sheet); then click the Delete Embedded Style Sheet button at the bottom of the panel.

The embedded style sheet is removed. On your page, it appears as though your layers are removed, too. They're still on your page, however; they're just not being controlled by a style sheet. You need to connect your page to the external style sheet that you created.

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

In the Attach External Style Sheet dialog box, click Browse and navigate to the external style sheet you saved earlier.

Set the Add As option to Link; then click OK.

Link is Dreamweaver's default. This setting creates a reference to the style sheet from your page.

When you click OK, the layers on your page revert to their previous formatting. The layers are now being controlled by your external style sheet, as you can tell by looking at the CSS Styles panel. Notice that your external style sheet has been added (its name ends in .css), as have the layer IDs that the style sheet contains.

Easy, right? Now to really see the power of using CSS to control your page layout, you'll make changes to the external style sheet and watch the updates appear on your page right away.

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:

On your Dreamweaver page, in the CSS Styles panel, double-click the layer ID associated with the layer that you want to manipulate.

In the CSS Rule Definition dialog box that appears, in the list on the left, click the category of the settings that you want to change. For this example, click the Positioning category.

Inserting Div Tags" later in this chapter.

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.

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.

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.

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.

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

Instantly, your page is updated.

Now suppose your web site contains 50, 100, or 200 pages that all need to be updated. Maybe you need to add a new element to a navigation bar that appears on every page. If you're using an external style sheet to control all of your pages, you can update the whole siteevery single pagein a matter of seconds. That's how powerful external style sheets are.

Attaching an External Style Sheet to Create Additional Pages

Once you've created CSS layers and an external style sheet, you can quickly build out your site to as many pages as you need. Whether you're creating a five-page personal web site or a massive commercial site with thousands of pages, the process is the same.

Here's how to use CSS layers and an external style sheet to create additional pages:

Create a new, blank web page.

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.

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.

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.

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

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.

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

Even though this is a simple example, you can see how amazing layers can be when they're controlled by an external style sheet. What's even better is that now you can open your external style sheet in Dreamweaver and make whatever changes you want, and the pages that are connected to your external style sheet will all update automatically. With CSS, you can control the layout of your entire site from a single teeny-tiny text file. Now that's the cat's meow!

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!^[*]

Let 'em know where you stand with CSS or Death.

Let co-workers know you're serious with the Keep Coding skull and crossbones.

Nobody messes with the External Breathes Fire dragon!

The IE sunburst. Contemporary, yet sophisticated.

The snake death-choke. Show this to the fellas at the AOL booth at the next tradeshow!

Pledge your allegiance to CSS with the CSS Forever heart.

^[*] Tattoos taken from the author's body were temporary transfers, but that doesn't mean he's not a badass.