Using the Liquid CSS Layouts in Dreamweaver CS4
This chapter is from the book
This chapter is from the book
This chapter is from the book
WITH THE PROLIFERATION of large monitors, creating a layout that serves the same fixed width (typically either 800 x 600 or 1024 x 768) to all browsers may leave a good deal of empty space on some screens. Clients often question this unused space, since using more of the viewer's screen must give the client more bang for their buck, right? Liquid layouts, based on a percentage of the size of the browser's window (or viewport), are one way to create flexible sites that work for a variety of users.
In this chapter, we will look at the pros and cons of creating a liquid layout using our fictional client, the Pleasantville Regional Chamber of Commerce. Their in-house designer has sent us a Photoshop comp and has requested that the blue portion of the design fill the browser window. They want no space on the sides.
)
Figure 4.1 The design comp from their in-house designers shows their vision of the site.
Before proceeding, define a site within Dreamweaver CS4 and create a folder called Pleasantville to contain your files (and the images from this chapter's download if you're not going to slice the comp yourself).
The easiest way to fill the browser window and remain flexible is to use one of Dreamweaver's three-column liquid layouts with header and footer. The liquid layouts are composed of percentage-based columns contained within a percentage-based container. We'll need to make a few modifications to achieve the desired effect, but we'll discuss that as we go.
- Create a new page using File > New.
- In the Blank Page section of the dialog, select the 3 column liquid, header and footer layout.
Set the DocType to XHTML 1.0 Transitional and make sure that Create New File is selected in the Layout CSS drop-down list.
Figure 4.2 Choose the 3 column liquid, header and footer layout.
Click Create.
Dreamweaver allows you to name the CSS file as well as determine where it will reside in your site structure. If you use the defaults, your file will be called thrColLiqHdr.css and will reside in the root folder of your site.
To work efficiently with CSS, most of the time you'll establish your rules in an external CSS file, not in the page itself as is done here. As a general rule (no pun intended), even if you develop the rules locally, you should move them to an external style sheet. But, of course, the exception proves the rule (pun intended); on rare occasions, you'll have an instance of a rule designed to override a style on one single, solitary page in a site. In that case, it's perfectly acceptable to define the rule within the head of the page.- Save the (X)HTML file as index.html into the root of your site.
)
Simplifying the CSS Selectors
Since our pages will all contain three columns in this site, we won't need to mix different types of CSS layouts. As we discussed previously, if you don't need to mix layouts, you don't need to keep the class on the body that precedes the selectors. For simplicity's sake, and to make the selectors more readable in the CSS panel, let's strip out all the .thrColLiqHdr classes.
At the top of your index.html page, click the thrColLiqHdr.css on the Related Files toolbar.
If you were working in another view, you'll be placed in Code and Design view. Remember, if you have the monitor space, you can split your views vertically on the new Application Bar.
Figure 4.3 The Related Files toolbar showing both the Source Code and the linked CSS document.
Highlight a class that begins with .thrColLiqHdr in the CSS of your document (as well as the space behind it) and use Ctrl+F to open the Find and Replace dialog.
It opens with the class you highlighted in the Find portion of the window. Make sure Find in is set to Current Document and leave the Replace area blank.
Click Replace All.
Dreamweaver quickly strips those classes right out of the CSS document.
Figure 4.4 The Find and Replace dialog with the .thrColLiqHdr class highlighted.
Move back to Source Code on your Related Files toolbar and repeat the process. Also, place your cursor anywhere in the page and right-click on <body.thrColLiqHdr> in the tag selector. Choose Set Class > None from the drop-down list.
This removes the class applied to the body selector.
- Save both documents.
)
)
Remember that when using the Related Files toolbar, Dreamweaver will save the document that has the focus. Placing your cursor into the CSS or Source (design or code space) will save the respective file. In fact, if you want to put a file to your server, the same holds true. The file put is the file that has focus.
We're ready to begin the process of modifying the page for our intended layout.
Since our design uses 100% of the browser window, the background color on the body element will no longer be visible on the sides. But if we are working in a short page (which might happen if a user is working on a high-resolution monitor with their browser viewport quite large), the space below the footer will show the background color, or lack of color if none is defined. A white space below the footer will be visible, and with this design that could be quite jarring. Sampling the footer color and using it for our overall background color allows us to leave the footer background transparent and ensure we have a seamless transition when our page ends. The dark blue will simply continue to the bottom of the user's browser viewport.
- Open the CSS Styles panel in the Current view. Select <body> on the tag selector. Click the edit (pencil) icon at the bottom of the CSS Styles panel.
In the Background category, change the Background-color to #1b1a52.
Notice that in the comp from our designer, all the fonts except those in the main body are rendered in Georgia.
In order to determine the color value of a given element in a Photoshop or Fireworks comp, you'll need to arrange your screen so that both documents are visible. Then click on Dreamweaver's color picker in the CSS Rule dialog or in the CSS Styles panel's Properties section for any property that uses color. On the Mac, simply move the eyedropper over the section of the comp you are interested in sampling and click to confirm the choice. On the PC, hold the mouse button down as you drag out of the color picker and release the mouse when you are over the desired section of the comp.While you're in the CSS Rule dialog, change the font property to the preset font set of Georgia, Times New Roman, Times, serif and click OK.
Viewing the CSS document, you'll notice the body selector is now changed to:
body { font: 100% Georgia, "Times New Roman", Times, serif; background: #1b1a52; margin: 0; padding: 0; text-align: center; color: #000000; }For some designs, we'd want the container (the div that contains all other divs) to be a percentage of the total browser width, and centered. In this case, we want the design to fill the entire window, so we'll adjust the width.
Click anywhere in the main layout and select <div#container> from the tag selector.
In the Properties section of the CSS panel, you'll notice that this layout, by default, is 80% of the browser window (based on the body rule which is left at its default 100%).
Change the width value in the Properties pane to 100%.
We also won't need the border, nor will we need to center the div using the value of auto assigned to the side margins since it will completely fill the browser window. Later, we will be bringing our colors and images in through other divs, so the background can go as well.
Many times, when you're dealing with a layout that is predominantly white (or any other color), it's simplest to define that color in the overall #container rule.
Delete the border and margin properties by right-clicking each property in the Properties pane and choosing Delete or by selecting the property and clicking the trashcan icon at the bottom of the panel.
Finally, let's scale all our fonts down since the 16px size most browser defaults are set at is rather large.
With <div#container> still selected in the tag selector, click the Add Property link in the Properties pane of the CSS Styles panel and type (or choose from the drop-down list) font-size. Tab to the next input field and type 80%.
Our #container rule is now:
#container { width: 100%; background: #FFFFFF; text-align: left; font-size: 80%; }We've now completed the preliminaries and we're ready to move on to creating our client's actual page.