Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Finalizing the Layout

The layout is looking pretty good. You'll need to tweak it a bit, but there's a more substantive task ahead, which involves optimizing the code. As you know, <div> tags in combination with CSS are used to create layout regions called layers. To create layers, you attach CSS to <div> tags using one of the following methods:

You can apply CSS as an inline style. That is, when you create a <div> tag, you can use its optional style attribute to apply CSS to it.

You can apply CSS as an embedded style. With this technique, you write the CSS definition at the top of the document, and you associate a collection of rules with an ID. When you create the <div> tag, you give it that ID, and the collection of rules immediately applies to it.

You apply the CSS from an external style sheet using an ID. This method is the same as the previous one, except that rather than storing the CSS styles inside th218 document, you store them in an external style sheet.

At this point in the lesson, you've created an external style sheet (jadevalley.css). However, all the style descriptions for your four CSS layers are stored in the local document. Two of them (the settings for the navbar and logo layers) use inline styles. The other two (the styles for the special_content and main_content layers) use embedded styles. The former two were exported from Fireworks, while the latter two were created in Dreamweaver.

As a rule of thumb, it's generally better to have layer styles defined in an external style sheet, so that multiple pages can use them, rather than inline or embedded styles, which can be used only on the page in which they appear. In this task, you'll move the layer styles out of jadevalley_template and into jadevalley.css. After the move is complete, you'll add further styles to some of the layers to finish their formatting.

The workflow will be as follows. You'll convert the two layers with inline styles to embedded styles. Then you'll move all the embedded styles to your external style sheet. Finally, you'll modify these styles to complete the design.

Inside the <div> tag, look for the style attribute; that's what needs to be moved out of this line and up to the top of the code.

[View full size image]

Note

In the figure, line wrapping is toggled on (View > Code View Options > Word Wrap) .

[View full size image]

The attribute is not yet formatted correctly, but at least it's in the right place.

[View full size image]

#logo {
position:absolute;
left:0px;
top:0px;
width:161px;
height:115px;
z-index:1;
visibility:visible;
}

The #logo is the identifier. Any element that has the #logo ID will be assigned this collection of styles.the <div> from which you took these styles has an id="logo" attribute, which ensures that these styles will be attached to it.

[View full size image]

If you switch back to design view, you'll see that the page looks exactly the same as it did before. Now, however, you at least have all your layer styles in one place.

[View full size image]

The next step is to move those styles out of this document and into your external CSS file.

All that's left of the <style> tag is the TD img line that was inserted by Fireworks.

[View full size image]

[View full size image]

If you look in the CSS panel, you'll see the four layer styles listed at the bottom.

A couple of tweaks remain. You want to right-align the contents of the special_content layer, and you want to put silver borders around the special_content and main_content layers. Both tasks can easily be accomplished by modifying the CSS descriptions.

The CSS Rule Definition dialog opens.

Style: (Same for all) solid

Width: (Same for all) thin

Color: (Same for all) #CCCCCC

These changes add a silver border around all sides of the main content area, reproducing the original design.

[View full size image]

Style: (Top, Bottom, and Left) solid; (Right) none

Width: (Same for all) thin

Color: (Same for all) #CCCCCC

[View full size image]

This style is identical to the one in the preceding step, with the exception that the right edge has no border. This is because #special_content already has a border, thanks to the left border of #main_content. The Text Align option not only aligns text, but images as well; the PRODUCTS and banana graphics are now right-aligned inside the layer.

[View full size image]