Macromedia Dreamweaver 8 UNLEASHED [Electronic resources] نسخه متنی

Designing Table-less Websites Using Layers

One of the biggest trends in web development is that of designing websites that don't use antiquated tables to control the structure of the site, but instead rely on layers and CSS positioning to control the layout and flow of web pages. In the next few sections, you'll learn how Dreamweaverin conjunction with the <div> tag and a little CSScan create standards-compliant web designs.

NOTE

The term given to the process used for creating CSS-based page designs in known as

CSS

-P .

Designing Layers Using a Style Sheet

In the previous sections of this chapter, you learned how easy it was to insert layers using either the Insert, Layout Objects, Layer command or the Draw Layer option available from the Layout category in the Insert bar. Although these are viable options for designing a site using layers, they aren't the best choice. The reason for this is simple: When you use either of these methods to insert layers on the page, Dreamweaver automatically assigns document-wide CSS positioning properties for each layer. As a result, the page becomes inflexible and nearly impossible to modify globally when numerous pages exist within the site.

A better alternative to inserting or drawing layers onto the page is to create an external style sheet (which we already have for our project) and define numerous ID selectors that define the various divisions of the page. For instance, we know our site will contain the following major divisions based on the design we've been working with up to this point:

• Header :
  We know we'll have a header that resides near the top of the page. The header will have a width of 100% and a height of 177 pixels. We also know that the header will have a background image that spans the entire width of the browser. Finally, the header will contain the header.gif image that defines the logo and company name.

• Navigation :
  Just under the header but to the left of the page, we'll have a simple navigation menu. In this scenario, we can add a layer that will serve as a container for the five navigation links. Although the height doesn't matter in this case, we'll want to set the width at 200 pixels.

• Content :
  The third major division in the page is a section that defines the content. This section will reside under the header but just to the right of the navigation area. Because our navigation area has a set width of 200 pixels and we want to keep the entire width of the page to an accessible 640 pixels, we'll set the content area's width to 440 pixels. Again, because a user will naturally scroll up and down the web page, the height for this section is irrelevant.

Now that we've outlined the major sections for our page, let's begin outlining the CSS rules. Because we know we'll have at least three major sections in the page (Header, Nav, and Content), we can surmise that we'll need at least three CSS rules represented by three unique IDs titled header, nav, and content respectively. To begin creating these selectors, follow these steps:

That's it! You're now ready to define the style rules for the remaining layers. To define the Nav rule, follow these steps:

To finish up the design, let's define the Content style rule:

Now that we've outlined the properties for the three major sections of the site, we're ready to insert the <div> tags that will act as containers for the content. The properties we've outlined will serve as the formatting and positioning attributes for the <div> tags we'll add next.

Inserting DIV Tags

Now that the style rules have been defined for each section of the page, we can start adding the <div> tags that will serve as containers for our content. Because we've already outlined the style rules using ID selectors in an external style sheet, we need only to insert three <div> tags into the page with IDs that match the ID selector names we created. To demonstrate this, let's insert a <div> for the Header portion of our page. You can do this by clicking the Insert Div Tag icon located second from the left in the Layout category in the Insert bar. Clicking this icon launches the Insert Div Tag dialog (see Figure 11.14).

Although the dialog allows you to enter a class name and pick an insertion point for the tag, all we care about is entering the ID name that represents the ID selector we've defined within our style sheet. Because we're creating the header of the page, select the Header option from the ID drop-down menu and click OK. The layer is created, complete with the dimensions, placement properties, and the background image we defined.

By default, Dreamweaver adds the text

Content for id "Header" Goes Here within the layer. Select this text and delete it so that we can add the header.gif image into the layer. When you've deleted the text, drag the header.gif image, located in the Images folder, into the layer. The result of the design resembles Figure 11.15.

Now you're ready to create the second <div> tag that will define the navigation layer. To do this, click the Insert Div Tag icon located in the Layout category of the Insert bar. When the Insert Div Tag dialog appears, select the Nav option from the ID drop-down menu and click OK. As you'll see, the Nav layer is added just below the Header layer.

Again, remove the

Content for id "Nav" Goes Here text so that we can begin to define the navigational elements that will appear within this layer. When the placeholder text is deleted, let's add the first navigation element,

Home , to the layer. Do this by following these steps:

Now you can add the rest of the navigation elements: HelpDesk (helpdesk), Company Directory (companydirectory), Employee Store (employeestore), and Admin (admin). When you finish adding the navigation items, the result appears similar to Figure 11.16.

Finally, let's add the content layer. Again, you can accomplish this task by clicking the Insert Div Tag icon in the Insert bar. When the Insert Div Tag dialog appears, choose the After Tag option from the Insert menu, choose the <div id="Nav"> option from the menu that becomes enabled, and choose the Content option from the ID drop-down menu. Click OK. The new layer is added below the Header layer but just to the right of the Nav layer. With the layer firmly in place, you can add the content that will fill that area. For instance, you might want to add the subheader_about.gif image as the subheader within the layer. You might also decide to add the text contained in the welcome.txt file in the Assets folder. Next, you might want to add the intranetsymbolism.gif image so that it appears as though the text wraps around it. When you've finished, the result should closely resemble Figure 11.17.