Creating a Basic CSS Layout


CSS is a great way to control the layout and appearance of your Website. CSS functionality is best achieved with recent browsers (5.0 and up) that can support the widest range of features. CSS can be used in combination with, or as an alternative to, creating layouts with tables, which you'll learn about in Lesson 6. Many sites are migrating toward the use of CSS instead of tables because although tables offer a layout method that might seem to be currently more compatible with a larger number of browsers, there are a number of drawbacks to using them. Tables, particularly complicated ones, can cause your page to load slowly, require a great deal more code, and often necessitate the use of spacer gifs to force the table to hold its position. One of the primary drawbacks is the combination of content with formatting and appearance. The benefits of CSS include the ease and speed with which a CSS-based site can be updated, a consistent appearance, less code, and faster download time. With CSS, content is separated from the design and attributes that define appearance. The advantages to using CSS for layout also include increased accessibility, flexibility, and efficiency. The important things to consider when deciding which layout tools to use in a Web page are what works best for the particular layout that you are trying to achieve, and what the majority of your visitors will be able to access. Make sure that you preview your pages in multiple browsers and operating systems to test how your chosen layout method will appear.

In this exercise, you will edit the description rule that you created earlier in the lesson to obtain a basic single box for content that uses the description style. In the index.html document, the <div> containing the paragraph near the top of the document uses the description rule.

1.

Click the All button on the CSS Styles panel. Select the description rule from the All Rules list and click the Edit Style button at the bottom of the CSS Styles panel.

You're beginning to set up the class that will be used to define the look of a simple box for this page.

2.

Select Background from the list of categories. Choose white (#FFFFFF) from the Background color picker.

You have defined the background color of the column that will appear on top of the yellow page background.

3.

Select Box from the list of categories. Enter 90 in the Width text field and verify that % is selected in the measurement menu. In the Padding section, enter 8 in the Top text field. The Same For All box should be checked, and pixels should be selected in the measurement menu (these are the default settings).

The Box category provides a number of options to control the container you are creating. In this case, you defined the width of the box you will create as 90% of the available browser width. The padding creates the specified amount of space between the edge of the box and the content it contains. The margin defines the space that will exist between the edges of the browser and the edges of the box as well as the space that would exist between the box and any additional elements that might be created outside of the box.

4.

Select Border from the list of categories. Select Solid from the Top menu in the Style section. In the Width section, leave the Same For All box checked and enter 1 in the text field; then verify that the pixels option is selected in the measurement menu. Select black (#000000) from the Top color picker in the Color section and leave the Same For All box checked. Click OK to close the CSS Rule Definition dialog box.

The border options allow you to define how the outline around the box appears.

Note

There are a total of eight categories available for style definition. You've used five: Type, Background, Box, Block, and Border. The other three categories are as follows:

  • List: Provides options to control the formatting of ordered and unordered lists.

  • Positioning: Provides options to control where elements are located.

    Dreamweaver considers any element with positioning options defined to be a Layer. (Layers are covered in Lesson 16.) You can integrate CSS and Layers for more complex layouts.

  • Extensions: Provides additional options, some of which are not widely supported.

At this point, the <div> containing the paragraph displays a white background with a black outline.

5.

Roll the pointer over the border of the box. When the line turns red, indicating that you can select the <div>, click the border.

The <div> is selected, as you can see by the highlighted <div.description> in the tag selector.

The selected <div> uses a number of visual aids to indicate the CSS attributes that are affectedsuch as the solid blue outline that designates the border property and the shaded area between the border and the text that signifies the padding property.

6.

Choose View > Visual Aids > CSS Layout Backgrounds.

Dreamweaver uses color coding to identify areas of a document that have been formatted with CSS, and every div uses a different color to help you distinguish between them when creating layouts. Values of other properties, such as font and background colors, are temporarily ignored in this mode. This visual aid, which is available only in Dreamweaver, is not indicative of how the page will appear in the browser.

7.

Choose View > Visual Aids > CSS Layout Backgrounds to turn off the CSS Layout Backgrounds visual aid. Save and both the index.html and sangha.css documents and preview the index.html document in the browser.

You now have a box surrounding content. Because this layout is created with an external style sheet, you can easily apply it to many other documents for a consistent appearance. You can use techniques such as this one to create more complex layouts without using tables.

You can close the both files.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net