Designing with CSS – Part 1: Understanding CSS Design Concepts

Creating a Cascading Style Sheet

Before we get started, it is important to look at why using CSS for site projects is a good idea. Using font tags embedded within the HTML page to control the look of the text is an obsolete web design tactic. By default, Dreamweaver CS3 uses styles rather than font tags to redefine the appearance of your text content. Going forward, it is best practice to take advantage of the new features in Dreamweaver and use CSS styles, rather reverting to the old method of defining text formatting using font tags. Let me explain why. After providing some background on the future of web technologies, you’ll see why switching to CSS will not only improve your designs but will also make the process of updating and maintaining sites much easier in the long run.

To begin with, font tags are deprecated, which means they may not be supported by browsers in the future. Font tags are no longer a part of the XHTML specification. That is a good enough reason not to use them, because at some point older sites using font tags for text formatting will not display correctly.

The real problem with font tags begins as soon as your design client requests changes. Maybe the font color needs to be changed or perhaps they request that the font face changes from Verdana to Arial. If the site content is formatted using font tags, making these types of changes can take a huge amount of time. By contrast, you can make changes such as these—and indeed far more complicated changes—in a very short time by editing an external style sheet. By using an external file to control the text, document and layout elements, you can apply site wide changes instantly. In addition, sites using CSS styles result in easier document manipulation and lighter, faster-loading pages. There are many benefits to using CSS.

In previous versions of Dreamweaver, it was necessary to have an advanced understanding of CSS to create your own designs. However, with the release of Dreamweaver CS3 this is no longer the case. Dreamweaver CS3 provides you with just about every conceivable option for a layout, and they are all available to you with just a few clicks. You may be thinking that you still need to know CSS in order to understand what is going on and have a clear concept of what the CSS styles are doing within the layouts. That is absolutely correct, and that is the purpose of this series of tutorials.

Dreamweaver CS3 goes even further than just providing you with layout options. The generated CSS for each of these new layouts is commented, so that you can read your way through the style sheet to see exactly how specific rules affect each individual layout. This is a huge step, because it opens up new opportunities for developers who are new to CSS, and it makes it easy to get started using CSS styles for formatting and layout.

Getting started with CSS

Let's start at the beginning of the CSS trail and look at the methods available to you when you want to apply a Cascading Style Sheet to your HTML documents. You can use an external style sheet, an embedded style sheet, or inline styles. External style sheets are best because they give you the most control over your styles. Many developers also find it easier to use external files, because then the formatting is separate from the contents of the web page. The New Page dialog box in Dreamweaver CS3 enhances this process. We’ll discuss some of the options available in the upcoming sections of this tutorial.

Using an External Style Sheet

By using an external (linked) style sheet, you exercise global control over the appearance of every page in your site that is linked to that CSS file. This is most powerful way to use CSS. By using a linked style sheet, you have the ability to make site wide changes on any number of pages by simply making changes in a single location. Major site updates can be completed in what may amount to no more than a few seconds' work. Powerful indeed!

Dreamweaver CS3 offers functionality that differs greatly from the previous version. Let’s explore the New Page dialog box now.

1. Select File > New or press Control-N to open the New Document dialog box, (see Figure 1).

   

   Figure 1. The New Document dialog box in Dreamweaver CS3

   In the left column there are five options:

   • Blank Page
   • Blank Template
   • Page from Template
   • Page from Sample
   • Other

   Clicking on each of these options updates the content listed in the Page Type column. For the purposes of this tutorial, we’ll be concentrating on the Blank Page option. But be sure to explore the alternatives and review the new options that can be found when each option is selected.

2. Select the Blank Page option in the far left column.
3. In the Page Type column, choose HTML.
4. When HTML is selected as the page type, the Layout column to the right updates with an extensive list of layout options.

5. Select the 2 column elastic, left sidebar, header and footer option, (see Figure 2).

   

   Figure 2. Select the 2 column elastic, left sidebar, header and footer layout option

   Notice that a visual display of the page is shown on the top right side, the looped lines indicate the layout’s flexibility. (Some of the other options display straight lines and padlocks to indicate that they are fixed width layouts).

   You can select a doc type version from the DocType drop-down menu. For this tutorial, keep the default setting of XHTML 1.0 transitional.

   The Layout CSS drop-down menu allows you to select how the layout you’ve selected will be added to your new page. Selecting the option Add to Head will embed the CSS styles directly into the new HTML document. If you want to create a new external style sheet for this new HTML page, you would select Create New File. Or if you are working with an existing HTML page and want to add this new CSS layout code to it, choose Link to Existing File. (In this case, leave the default option of Add to Head).

   It’s important to note that you also have the option to click the link icon next to the Attach CSS file option. This feature allows you to link this new CSS layout to another pre-existing style sheet. (The screen shot in Figure 2 does not show the link icon, because it is obscured by the Layout CSS drop-down menu options).

6. After selecting the Add to Head option, click Create.
7. The CSS layout is automatically generated and displayed in Design view.

You’ve just created a CSS layout with a few clicks. Select the code view button and review the CSS content created by Dreamweaver CS3. This layout will work well in the latest browsers, and the CSS also contains filters that allow the design to render successfully in older browsers as well. This is a huge time saver. If you’ve had any previous experience working with CSS in the past, you are aware that most of the time involved with developing CSS layouts is spent debugging and fixing display issues in older browsers. Dreamweaver CS3 has done this work for you.

And that’s just the beginning. If you examine the code and scroll down to the closing <head> tag of your page, you’ll see a conditional comment immediately above it that resolves certain CSS issues that could cause problems when the page is viewed in Internet Explorer for Windows. The descriptive comments added to the CSS code from start to finish are very helpful and make it easy to understand. The CSS file generated by Dreamweaver is now ready to deploy in your latest project.

Close your page without saving it (unless you wish to save it to a local folder outside of this tutorial to use for your own purposes later).

Page 2 of 5

Previous Page

Next Page