• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 6. Translating a Fireworks Layou... > Getting the <body> into Shape

Getting the <body> into Shape

Having examined the design concept, you should now have a good idea of how the page elements need to be styled. In this section, you’ll create an external style sheet and set the common page properties for the page by redefining the <body> tag with CSS.

In Dreamweaver, start a new page. Create a standard HTML page, and save it as index.htm in the root folder of your site.

Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel.

In the New CSS Style dialog, set the Selector Type option to Tag and the Define In option to New Style Sheet file.

Use the drop-down field at the top of the New CSS Style dialog to set the tag to body and click OK.

In the Save Style Sheet As dialog, name the file pbr_style.css and save it into the root folder of the web site.

The familiar Dreamweaver interface for creating style sheets will appear after you have completed those steps. Examining the page elements from the source Fireworks design reveals that a common font is used throughout the page, the page is set without margins, and the repeating graphic is used as a page background.

In the Style Definition dialog, set the text style to Verdana, Arial, Helvetica, sans serif with a color of #666666. Leave the text size unspecified, and set Line Height to 1.1 ems.

Leaving the text size unspecified allows the viewer’s browser setting to set the size as needed. For most people, that will be the equivalent of 12 pixels. Because the design calls for a little spacing between lines, you need the Line Height value of 1.1 ems. An em is a proportional value based on the size of a text element. This setting equates roughly to a line height of 110%.

Select the Background category, and click on the Browse button next to the Background image field. Locate the page_bg.gif file inside the assets/images folder and click OK to set it as the page background. Set the Repeat property to repeat-y. Set the Background color to white (#ffffff). These parameters set up the page background that repeats down the left side of the page.

Click the Box category, and set the Top Margin property to 0. Be sure that the Same for All check box is selected. This removes the default page margins.

Click OK to close the dialog. Switch to the CSS file, which should now be open, and save the CSS file. Save your page and get ready to insert the structure for the page in the next section.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint