129
4
Add other browsers by clicking the plus (+) button. Type the browser’s name in the Name
field, click the Browse button to locate its executable file, and then click OK to register it.
The Edit button lets you change the details of the selected browser. Click the minus (–)
button to remove the selected browser from the list. Although default keyboard shortcuts
exist for only two browsers, you can launch the current page in one of the other browsers
by using File ä Preview in Browser or clicking the Preview/Debug in browser icon on the
Document toolbar, as shown in the following screenshot.
The most important setting is the checkbox highlighted in Figure 4-9. It determines
whether Dreamweaver creates a temporary file for the preview. This often causes confusion
among PHP beginners, because if they make a mistake in their code, they might see
an error message like this:
The file TMP2erxjfculq.php isn’t some mysterious, hidden aspect of the PHP engine, but a
random file name created by Dreamweaver for previewing the page. It’s automatically
deleted as soon as you preview another file or close Dreamweaver.
The advantage of using a temporary file for preview is that Dreamweaver doesn’t overwrite
the existing file on your testing server. You can also see the effects of your changes
without needing to save the file. However, you cannot test server behaviors that insert,
update, or delete database records this way.
If you leave this option deselected, you must always save your file before using Preview in
Browser. You will also see the alerts shown in step 6 of “Testing your PHP site.” If you have
set up a local testing environment and use your local root folder as the testing server
folder, you can safely ignore these alerts and check the option not to show them again.
Your local files and testing ones are actually the same files, so you’re not overwriting anything.
However, if your testing server is in a different location, such as on a remote server,
you need to be aware of the following consequences:
When you preview a file in a browser, if you haven’t selected the option to use
temporary files, Dreamweaver uploads it to the remote server even if you haven’t
entered any details in the Remote Info category of the Site Definition dialog box. This
permanently overwrites the existing file on the remote server.
Unless you use temporary files, dependent files, such as images, style sheets, and
external JavaScript files, must also be uploaded to the remote server when using
Preview in Browser.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
130
Managing Dreamweaver sites
To change any settings in your site definition, select Manage Sites from the Site menu to
open the Manage Sites dialog box (Figures 4-3 and 4-10 show the Windows and Mac versions,
respectively). Select the name of the site that you want to change, and click Edit. This
reopens the Site Definition dialog box ready for you to update the settings. If you’re feeling
really impatient, though, the quickest way of opening the Site Definition dialog box is to
double-click the site’s name in the drop-down menu at the top left of the Files panel.
The other buttons on the right side of the Manage Sites dialog box are fairly self-explanatory.
However, the following is a quick guide to each one:
New: This offers two options: Site and FTP & RDS Server. The first opens the Site
Definition dialog box. The second option is rarely used, but lets you create a direct
FTP connection to a remote site (RDS is for ColdFusion only). You might want to
use this to upload a single file without defining a local site in Dreamweaver.
Duplicate: This creates an exact copy of the site definition for whichever site is highlighted
in the left panel. You might find this useful if a new site shares common settings
with an existing one. It’s important to understand that creating a new site
definition doesn’t make a mirror version of the common files and folders. Editing or
deleting a shared file in one site affects both sites, as there is only one set of files.
Remove: This removes only the site definition from Dreamweaver. The actual files
and folders remain untouched.
Export: This exports your site definition as an XML file (Dreamweaver gives it an
.ste file name extension). You can export multiple site definitions by using Shiftclick
or Ctrl/Cmd-click to select several sites in the left panel.
If any of the site definitions contain login details for a remote server, Dreamweaver
presents you with the following dialog box:
Figure 4-10.
The position of the Help and Done buttons
is reversed in the Mac version.
SETTING UP A PHP SITE
131
4
This dialog box is shown only for the first site that contains login details, and the
export option you choose applies to all sites being exported at the same time.
Dreamweaver then asks you where to save the file. Just browse to the folder where
you want to store the .ste files and accept the default value for File name.
Definitions for all selected sites are exported in a single operation.
Import: This imports site definitions from .ste files. If the .ste files are in the same
folder, you can import multiple sites simultaneously. If a site of the same name
already exists, Dreamweaver creates a duplicate site definition with a number after
the name, rather than overwriting the existing definition.
It’s a good idea to back up your site definitions from time to time, just like any other valuable
data. The vastly improved Export and Import options in this version of Dreamweaver
make it a lot easier.
Now let’s get on with it . . .
The last two chapters have been full of some pretty heavy but essential stuff. Getting your
work environment set up doesn’t offer the same excitement as developing websites, but if
you have ever repainted your house, you’ll know the value of preparation. Skimp on the
preparation, and the paint starts peeling off in next to no time. If everything is set up properly
now, you’re less likely to find yourself coming suddenly unstuck later in this book.
Keeping in mind the importance of laying a solid foundation, I don’t plan to start working
with PHP until Chapter 9. Dynamic websites that use Ajax and server-side languages like
PHP demand a much more disciplined approach to web standards than static websites
built solely with HTML. So the next two chapters provide your essential guide to creating
standards-compliant websites using cascading style sheets (CSS).
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
132
5 ADDING A TOUCH OF STYLE
Judging by the runaway success of books such as CSS Mastery by Andy Budd with Simon
Collison, and Cameron Moll (friends of ED, ISBN-13: 978-1-59059-614-2), web designers
have finally got the message that Cascading Style Sheets (CSS) are the way to design a
website. Getting the message is the easy part, but many designers rapidly find their initial
enthusiasm takes a severe dent when they run into the reality of creating a CSS-driven site.
Creating a style rule is simple enough, and most CSS properties have intuitive names. The
difficulty lies in the infinite number of ways in which style rules can be combined. And
that’s what makes it so powerful and worthwhile. You need only visit the CSS Zen Garden
at www.csszengarden.com to see why—the underlying XHTML of every page is identical;
what makes each one so different is the CSS.
Whether you’re capable of designing a masterpiece worthy of the CSS Zen Garden or just
a beginner, the improved handling of CSS in Dreamweaver CS3 should make your life
easier by showing you the impact of your style rules without needing to load the page in a
browser every few minutes. Another welcome new feature is the addition of 32 readymade
CSS layouts that you can use as the basis for designing your own pages. In the next
chapter, I’ll take one of these basic layouts and show you how to transform it into a goodlooking,
standards-compliant page, but before you can do that, you need to understand
the nuts and bolts of how Dreamweaver handles CSS. So that’s what this chapter is all
about. In particular, it examines the CSS Styles panel—an extremely powerful tool that
takes a little getting used to, but once you know how it works, it speeds up the design
process immensely.
What this chapter covers
Understanding the limitations of styles created by the Property inspector
Creating basic style rules for a page
Using the CSS Styles panel in All mode
Exporting style rules from the of a document
Using drag and drop to move style rules
Setting Dreamweaver preferences for CSS
To start off, though, I want to show you how not to use Dreamweaver to create style rules.
Avoiding bad habits
A well established program like Dreamweaver needs to add new features but risks the
wrath of existing users if old features are taken away or the program is changed radically.
In the bad old days, when everybody used <-span-> tags and other presentational markup,
the Property inspector was where all the action was. It remains one of the most important
tools in Dreamweaver, but its handling of text is a compromise between the old and the
new—a brave compromise but one that doesn’t really work.
For the past couple of versions of Dreamweaver, the Property inspector has generated CSS
instead of <-span-> tags. But don’t be fooled into using it to build your style rules. Instead of
littering your pages with <-span-> tags, it litters them with meaningless classes that make
sites a nightmare to maintain.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
136
Stay away from the Property inspector for fonts
Let’s say that you have an <-h1-> heading that you
want displayed in 24-pixel Verdana. Select the text
of the heading in Design view or the <-h1-> tag in
the Tag selector, set Font in the Property inspector
to Verdana, Arial, Helvetica, sans-serif, and choose
24 pixels as Size. As the screenshot alongside shows, Dreamweaver automatically generates
a style name and displays it in the Style field.
The style is applied to the heading as a class like this:
<-span->How not to use CSS
<-span->The following class definition is placed in a <-style-> block and embedded in the of
the document:
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}
As far as it goes, it’s not bad. The class definition is perfectly valid, and you can easily move
it to an external style sheet later. The problem is that you don’t need a class to style <-h1->
tags. It’s much more efficient to create an h1 selector in your style sheet and apply the
style automatically to all <-h1-> tags. Moreover, when using the Property inspector to format
text, you need to select the entire text before you can apply the style. If you accidentally
miss part of the heading, Dreamweaver takes your
instructions literally and applies the style as a
<-span-> only to the selected characters like this:
Figure 5-1 shows a simple page styled using the Property inspector (badCSS.html in
examples/ch05). The design isn’t particularly inspiring, not because I deliberately wanted
to show an example of poor design, but because I didn’t want to waste a lot of effort. If
you examine the page in Code view, you’ll see classes everywhere and four style rules in
the .
Figure 5-1. The design is basic, but using the Property inspector involved a lot of effort and
created bad CSS.
ADDING A TOUCH OF STYLE
137
5
Classes are the first thing most beginners learn about CSS. They draw beginners unwittingly
into a love affair—just like George Segal and Glenda Jackson in the movie A Touch
of Class. In the end, it all becomes too much and ends in failure but is nowhere near as
funny as the movie. Classes play only a minor role in well-designed CSS, but Dreamweaver’s
automatically generated CSS relies on them exclusively. Because it has no way of knowing
the purpose of the styles it’s creating, it gives them only generic names: style1, style2,
etc. With just three or four, you might be able to remember what each one is for, but how
on earth are you going to remember what style32 is for?
The Property inspector is great for a lot of things. It’s the quickest way to apply XHTML
format tags, such as <-h1->, <-h2-.>,
, <-strong-.>, <-em->, and
<-blockquote-><-em->. And as you’ll seein the rest of the book, it’s where you set the values of many XHTML attributes. But the
Property inspector falls down when it comes to styles. The CSS it creates is both crude and
inefficient. Don’t use it.
Creating simple CSS for beginners
If you’re new to CSS, Dreamweaver offers a simple dialog-based interface to create basic
styles that are automatically applied to the entire page without the need for meaningless
classes. It’s not capable of anything sophisticated, but provides a gentle starting point. If
you’re already up to speed with CSS, I suggest that you skip forward to the next section,
“Introducing the CSS Styles panel.”
This exercise shows you how to create a basic set of style rules for a page. I’ve removed all
style markup from badCSS.html (see Figure 5-1) and saved it as betterCSS_start.html.
Copy the file from examples/ch05 to workfiles/ch05, and save it as betterCSS.html.
1. Open betterCSS.html in the Document window, and click the Page Properties
button in the Property inspector as shown in the following screenshot. If you can’t
see the button, click the expander triangle at the bottom right of the Property
inspector.
Using Page Properties to create basic style rules
Although this section shows you how to get started on the right footing with CSS in
Dreamweaver, it’s not intended to teach you CSS. For that, you need a book like
Beginning CSS Web Development: From Novice to Professional by Simon Collison
(Apress, ISBN-13: 978-1-59059-689-0). Also, any book by Eric Meyer will give you a
solid grounding in CSS.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
138
If the Property inspector is closed, use Window ä Properties or Ctrl+F3/Cmd+F3 to
open it. Alternatively, select Modify ä Page Properties (Ctrl+J/Cmd+J).
2. This opens the Appearance category of the Page Properties dialog box, as shown in
Figure 5-2. This is a multiple category dialog box that sets a wide range of options.
Figure 5-2. The Page Properties dialog box offers a simple way of setting
basic style rules for a page.
It’s a good idea to set a default font for the page, which you can override in special
cases, such as headings or pull quotes. Setting the font size to 100 percent uses the
browser’s default for all text elements, which you can again override later. You
should also always set default colors for the text and page background. Use the settings
shown in Figure 5-2, and then select the Links category from the column on
the left.
3. The Links category lets you set the font and colors for hyperlinks. The color options
are the equivalent of the following CSS pseudo-classes:
Link color: a:link
Visited links: a:visited
Rollover links: a:hover
Active links: a:active
The Underline style option lets you choose whether your links are always underlined,
never underlined, show an underline on hover, or hide the underline on
hover. If you decide not to underline links, it’s a good idea to choose a distinctive
color and select the Bold icon alongside Link font. Use the settings shown in the following
screenshot, and select the Headings category from the column on the left:
ADDING A TOUCH OF STYLE
139
5
4. The Headings category lets you choose a different font for headings (the same
choice applies to all six levels). You can also set the size and color separately for
each level. Using percentage sizes gives visitors more freedom to adjust your page
to their visual needs and preferences, so is better from the accessibility point of
view, but you can use pixels if you prefer. I used the following settings:
5. When you have finished, click OK to close the Page Properties dialog box. Your
styles are immediately applied to the page in Design view. What’s more, they’re
automatic. Position your cursor anywhere inside the first paragraph, and select
Heading 2 from the Format menu in the Property inspector; the paragraph is transformed
into a large, brown Verdana. Select Paragraph again from the Format menu,
and it switches back to normal black Arial. This is because the Format menu
changes the surrounding tags from
to <-h2-> and back again. Everything is controlled
by CSS type selectors that Dreamweaver has embedded into the of
the page (type selectors change the default style of HTML tags).
6. Select some text in one of the paragraphs, and type # in the Link field of the
Property inspector to create a dummy link. The text is automatically styled as a link.
If you have been used to the old-school way of selecting everything and applying
colors and fonts, this should be an exciting revelation that convinces you of the
power of CSS.
7. Save betterCSS.html. You’ll improve it later in the chapter.
Unfortunately, the Page Properties dialog box creates only the most basic rules. To change
the size of the paragraph font and wrap the text around the image, you need to create a
couple of style rules yourself. For that, you need the CSS Styles panel.
Introducing the CSS Styles panel
To get the most out of the CSS Styles panel, you need a solid understanding of CSS.
Although that statement is likely to provoke sighs of despair—or even anger—from
readers expecting Dreamweaver to do everything for them, it’s true of any tool or piece of
software. The greater your understanding of the tools you’re working with, the easier the
job becomes. Also, with a little persistence, using the CSS Styles panel should help beginners
improve their skills, because it shows you exactly which rules affect a particular part
of the page. And even if the theory behind CSS taxes your brain, the almost perfect rendition
in Design view shows you how your page will look 99 percent of the time.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
140
Opening the CSS Styles panel
To open the CSS Styles panel, click the title bar of the CSS panel group (in the default
workspace layout, it’s at the top right of the screen), and select the CSS Styles tab.
Alternatively, select Window äCSS Styles. On Windows, there’s also the keyboard shortcut
Shift+F11. Mac keyboard shortcut enthusiasts are out of luck, because the same combination
runs Exposé in slow motion on OS X.
The CSS Styles panel is so useful you can also open it by clicking the CSS button in the
center of the Property inspector whenever your cursor is in a position to enter text. If you
have a <-div-> selected, the button is labeled Edit CSS.
Viewing All and Current modes
The CSS Styles panel has two modes, All and Current, which are toggled by clicking the button
at the top of the panel. Figure 5-3 shows both modes with an explanation of the icons
at the bottom of the panel and in the middle pane of Current mode. Current mode (on the
right of Figure 5-3) is more powerful, but it’s also more complex, so beginners should try
to get used to working in All mode first.
Figure 5-3. The CSS Styles panel crams a lot of tools and information into a small space.
A good way of regarding All mode is as a window into all CSS rules available to the page,
regardless of whether they are embedded in the of the document or in multiple
external style sheets. The top pane (labeled All Rules) displays the hierarchy of style rules
as a tree menu. If the rules are embedded in the of the document, the root of the
tree (at the top) is displayed as a <-style-> tag, as in Figure 5-3. If they’re in an external style
sheet, the file name appears at the root. The tree menus are collapsible to make it easier
to work when multiple style sheets are attached to the page. The only style rules that you
cannot inspect or edit in All mode are inline styles, although you can see them in Current
mode.
ADDING A TOUCH OF STYLE
141
5
The Properties pane at the bottom of the CSS Styles panel is common to both modes. It
displays details of the currently selected style rule and lets you edit or delete properties
and add new ones.
Use All mode when you need to do any of the following:
View the overall structure of the styles attached to a page
Change the order of rules
Inspect or edit the contents of a style rule identified by its selector
Add a new style rule (you can do this in both modes)
Attach a style sheet to the current page (this is one of several places you can
do this)
I’ll describe the features of Current mode in the next chapter. For the moment, let’s take a
look at the seven icons at the bottom of the CSS Styles panel, as they apply to both
modes.
Exploring the Properties pane of the CSS Styles panel
The default setting of the Properties pane is to display only those CSS properties that have
been set in a particular style rule, as shown in Figure 5-3. However, the two leftmost icons
let you display properties grouped by category or alphabetically.
Displaying CSS properties by category
If you select the leftmost icon (see alongside) at the bottom of the CSS Styles panel, the
Properties pane lists all available CSS properties grouped together in easily identifiable categories,
as shown in Figure 5-4. Click the plus (+) and minus (–) symbols (triangles in the
Mac version) to expand or close each category, and click in the right column alongside
the property name to edit it. If a fixed range of options is available, a drop-down menu
appears. Similarly, a folder icon or color picker appears if the property requires a pathname
or color. To remove a property, highlight it and click the trash can icon at the far
right. Unlike the default display, the property remains listed, but the value is deleted. If
you’re new to CSS and find it difficult to remember the names of the various properties, I
recommend that you use this display until you gain sufficient confidence to use the less
cluttered default view.
Don’t confuse the Properties pane of the CSS Styles panel with the Property
inspector, which is normally docked at the bottom of the Document window. If
you’re not familiar with Dreamweaver, the names are easy to mix up, because
the title bar of the Property inspector says “Properties.” When working with
CSS, any reference to the Properties pane means the pane at the bottom of the
CSS Styles panel as shown in Figure 5-3.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
142
Displaying CSS properties alphabetically
Clicking the middle icon (shown alongside) at the bottom left of the CSS Styles panel lists
virtually all available CSS properties in alphabetical order, as shown in Figure 5-5.
Properties that have already been set move to the top of the list, but to set a new one, you
need to scroll down to find it, making this view the least user-friendly.
This alphabetical list omits a small number of poorly supported CSS properties, such as
counter-increment and counter-reset, but as you can see from Figure 5-5, nonstandard
properties beginning with -moz are also listed. These are supported mainly by Firefox and
Mozilla, but are expected to become part of CSS 3. Dreamweaver also lists some
Microsoft-only properties, such as layout-grid, and properties that were dropped from
the CSS 2.1 specification, such as font-stretch. This wide choice is useful if you are a CSS
expert, but could lead you astray if you’re a novice. Use the alphabetical display with care.
Displaying only CSS properties that have been set
To restore the Properties pane to its default display of only those properties that have been
set (see Figure 5-3), click the third icon from the left at the bottom of the CSS Styles panel
(shown alongside).
Figure 5-5.
You can also display all available CSS
properties in alphabetical order.
Figure 5-4.
Displaying all available CSS properties organized
by category makes life easier for beginners.
ADDING A TOUCH OF STYLE
143
5
Attaching a new style sheet
The chain icon at the bottom right of the CSS Styles panel opens the Attach External Style
Sheet dialog box (see Figure 5-6). This lets you attach the file using either or
@import and set the media type.
The File/URL field lists recently used style sheets as a drop-down menu. Click the Browse
button to navigate to a new style sheet. Select a media type from the drop-down menu in
the Media field or enter a comma-separated list of valid types (all, aural, braille, handheld,
print, projection, screen, tty, tv). Choose screen for visual browsers, or all to
apply your styles to all types of media. If you leave the Media field empty, browsers apply
your styles to all media.
Figure 5-6. You can attach an external style sheet using or
@import.
If you choose a media type other than screen or all, use the Style Rendering toolbar,
which was described in “Checking what your page will look like on other media” in
Chapter 1, to see the effect of your styles in Design view.
If you type the file name of a nonexistent style sheet in the File/URL field, Dreamweaver
displays a warning, and asks if you want to create the link/import statement anyway. If you
click Yes, you can create the necessary style sheet afterward, and it becomes immediately
available inside your page.
Adding, editing, and deleting style rules
The final three icons at the bottom right of the CSS Styles panel let you add new rules,
edit existing rules, and delete existing rules and properties. Most editing and deletion is
done directly in the CSS Styles panel, and I’ll show you how to do that in the next chapter,
but the creation of new rules involves the use of two dialog boxes. Let’s take a look at how
you define a new style rule.
There are several other ways of attaching external style sheets. As you’ll see in the
next chapter, you can attach style sheets in the New Document dialog box when first
creating a page. There is also an option to attach a new style sheet at the bottom of
the Style drop-down menu in the main Property inspector and in the New CSS Style
dialog box (see Figure 5-7).
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
144
Creating new style rules
Creating a style rule involves two steps: first define the selector, and then add property/
value pairs to the style block. The selector determines which parts of the page the rule
applies to.
The main types of CSS selectors are as follows:
Type: A type selector uses the name of the HTML tag that you want to style. For
instance, using h1 as the selector for a style rule applies the rule to all <-h1-> tags.
Dreamweaver calls this a Tag selector.
Class: A class can be applied to many different elements in a page. The selector
name always begins with a period, for example, .warning.
ID: An ID selector applies the rule to an element identified by its id attribute. If the
element, such as a list, has child elements, the rule also applies to the children. The
name of an ID selector always begins with the hash or pound sign, for example,
#mainContent.
Pseudo-classes and pseudo-elements: These selectors style elements according to
their positions or roles in a document, such as a link when the mouse passes over
it or the first line of a paragraph. They consist of a type selector followed by a
colon and the name of the pseudo-class or pseudo-element, for example, a:hover
or p:first-line.
Descendant: A descendant selector combines two or more of the previous types to
target elements more precisely. For instance, you may want to apply a different style
to links inside a <-div-> with the id attribute footer. Descendant selectors are separated
by a space between the individual parts of the selector, like this: #footer a.
Group: When you want to apply the same set of rules to several selectors, you can
group them together as a comma-separated list, for example, h1,h2,h3,h4,h5,h6.
Dreamweaver refers to anything that isn’t a Class or Tag (Type) selector as an Advanced
selector.
Defining a selector
To create a new style rule, click the New CSS Rule icon (shown alongside) or right-click
inside the CSS Styles panel, and select New from the context menu. This opens the New
CSS Rule dialog box shown in Figure 5-7. Depending on where the insertion point is in the
current web page, Dreamweaver may suggest an appropriate name for the selector, or it
may present you with an empty dialog box.
Figure 5-7.
When creating a new style rule, you
must specify its type, selector name,
and location.
ADDING A TOUCH OF STYLE
145
5
Choose the Selector Type from the three radio buttons at the top of the dialog box.
Depending on your choice, Dreamweaver renames the field labeled Name in Figure 5-7.
Regardless of what the field is called, this is where you enter the name of the selector. If
you choose Tag as the Selector Type, the field turns into a drop-down menu listing all the
HTML tags that you can use. Alternatively, just type in the name of the tag without the surrounding
angle brackets (p not
).
The Define in option lets you choose where to put the new rule. The drop-down menu lists
all style sheets currently attached to the page and contains an option to create a new
external file. If you choose This document only, the style rule is embedded within <-style->
tags in the of the document. When you click OK in the New CSS Rule dialog box,
Dreamweaver opens the CSS Rule Definition dialog box (see Figure 5-8), unless you decide
to create the rule in a new style sheet. In that case, you’re first asked to specify the name
of the new file and where it is to be located. Using this method to attach a new style sheet
uses ; there is no option to use @import instead.
Defining the rule’s properties
As you can see in Figure 5-8, the CSS Rule Definition dialog box groups properties in the
same way as the category view of the CSS Style panel Properties pane. Table 5-1 describes
what each category contains. Most are obvious; others less so.
Figure 5-8. The CSS Rule Definition dialog box provides access to CSS 1
properties.
Dreamweaver gives you flexibility in allowing you to attach new style sheets at different
stages of your workflow. However, if you want the option to use @import, you
must always use the chain icon or select Attach Style Sheet from the Style menu in the
main Property inspector.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
146
Table 5-1. Properties that can be set in the CSS Rule Definition dialog box
Category Properties covered
Type All font-related properties, plus color, line-height, and
text-decoration
Background All background properties, including background-color and
background-image
Block word-spacing, letter-spacing, vertical-align, text-align,
text-indent, white-space, and display
Box width, height, float, clear, padding, and margin
Border All border properties
List list-style-type, list-style-image, and list-style-position
Positioning CSS positioning, including visibility, z-index, overflow, and clip
Extensions page-break-before, page-break-after, cursor, and nonstandard
filters
The CSS Rule Definition dialog box is intended to make life easier for beginners, but the
need to hunt around in the different categories can be very frustrating and time consuming.
It also lists only CSS 1 properties, so you may end up looking for something that’s not
there. Unfortunately, Dreamweaver won’t create the new style rule unless you set at least
one property. I often select anything and click OK to create the new style rule. Once the
rule has been created, you can delete the dummy property in the Properties pane and add
the ones you want. Although Dreamweaver won’t let you create an empty rule to start
with, it doesn’t object to all properties being deleted from an existing rule.
If you’re new to CSS, you can now add some extra style rules to betterCSS.html from earlier
in the chapter. Experienced users of CSS can skip to the next section.
1. With betterCSS.html from earlier in the chapter open in the Document window,
position your cursor inside one of the paragraphs, and click the CSS button in the
middle of the Property inspector to open the CSS Styles panel.
Dreamweaver should detect that you are in a paragraph and automatically load the
following settings into the New CSS Rule dialog box:
Improving the basic page layout
ADDING A TOUCH OF STYLE
147
5
Check the settings and amend them if necessary. For the purpose of this exercise,
make sure that Define in is set to This document only. Then click OK.
2. In the CSS Rule Definition dialog box, select the Type category. You don’t need to set
a value for Font because that is inherited from the body rule set in the previous
exercise. Set Size to 85. Once you type a value in the Size field, the drop-down
menu alongside is activated. Dreamweaver automatically selects pixels. That’s far
too big, so open the drop-down and select % from the bottom of the list.
Alternatively, you can just type the percent sign after the number (but without any
space in between).
3. Set Line height to 1.4, and select multiple from the drop-down menu alongside. This
adds vertical space between the lines of the paragraph to make the text easier to
read. You can use pixels or percent to set the line-height property, but I find that
choosing multiple gives the most reliable results.
4. Select the Box category from the column on the left of the CSS Rule Definition dialog
box. This category lets you define such properties as width, padding, and
margin. It’s better to set a width for the whole page by wrapping everything in a
<-div->, so let’s just tidy up the margins around each paragraph.
Both Padding and Margin have a checkbox labeled Same for all, which is selected by
default. This applies to all sides whatever value you enter in the Top field. That’s not
suitable for a paragraph, so deselect the checkbox for Margin, and enter the values
shown in the following screenshot:
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
148
By setting the top margin to 0 and the bottom one to 8 pixels, you’ll get good spacing
between paragraphs. Setting the left margin to 20 pixels indents the text nicely
in comparison with the headings.
Click OK to save the new style rule for paragraphs.
5. To wrap text around images, you need to float the image either left or right and
add a margin on the opposite side to leave some breathing space between them.
Although there’s only one image in betterCSS.html, you might want to do the
same with several images on a page, so this is the ideal situation for a class.
Click the New CSS Rule icon at the bottom of the CSS Styles panel. In the New CSS
Rule dialog box, select the Class radio button and type .floatright in the Name field.
Make sure that Define in is set to This document only, and click OK.
6. In the CSS Rule Definition dialog box, select the Box category, and set Float to right.
Deselect the Same for all checkbox for Margin, and set Left to 10 pixels. Leave all
other settings blank. This aligns any element that uses the floatright class to the
right of its parent element and puts a 10-pixel margin on the left side. This is much
more flexible than using the HTML hspace attribute, which puts the same amount
of space on both sides. The advantage of CSS is that you can put a different margin
on each side. Click OK to save the new class rule.
7. Select the image in Design view, and open the Class drop-down menu on the right
of the Property inspector. This lists all classes defined in your styles. Select either
floatleft or floatright, and the text is wrapped around the image with a margin separating
them, as shown in Figure 5-9.
To align images to the left, create another class called .floatleft, set the value
of Float to left, and set the right margin to 10 pixels.
When typing the name of a class in the New CSS Rule dialog box, you must
include the leading period. Although class names don’t begin with a period
when used with the class attribute inside an HTML tag, you mustn’t omit it
when creating the style rule.
ADDING A TOUCH OF STYLE
149
5
Figure 5-9. With just a handful of style rules, the page is beginning to look quite respectable.
8. There’s too much space beneath the headings. If
you look at the CSS Styles panel (shown alongside),
you’ll see there’s a group selector that
affects all six heading levels, which was created
by the Page Properties dialog box earlier in the
chapter. Highlight it as shown in the screenshot,
and click the Edit Style icon at the bottom of the
CSS Styles panel (it’s the second from the right
and looks like a pencil).
9. This reopens the CSS Rule Definition dialog box
ready to edit the existing rule. Select the Box category
from the column on the left, and deselect
the Same for all checkbox for Margin. Set Top to 0
pixels and Bottom to 8 pixels. Leave Right and Left
blank, and click OK to save the rule.
10. Save betterCSS.html and press F12/Opt+F12 to
preview it in a browser. Although the page is
nicely styled, the text spreads right across the
screen on a large monitor.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
150
11. Back in Dreamweaver, select the <-body-> tag in the Tag selector at the bottom of
the Document window. This selects everything on the page ready to wrap it in a
<-div->. Click the Insert Div Tag button in the Common category of the Insert bar. This
opens the following dialog box:
Because you have already selected the page in Design view, Dreamweaver automatically
sets Insert to Wrap around selection, which is exactly what you want. Type
the name of the new <-div-> in the ID field as shown in the screenshot above, and
click the New CSS Style button at the bottom of the dialog box.
12. Dreamweaver automatically populates the New CSS Rule dialog box with the correct
details as shown here:
Dreamweaver has added a hash or pound sign (#) at the beginning of wrapper, indicating
that this is an ID selector. Click OK to open the CSS Rule Definition dialog
box.
13. Select the Box category, and set Width to 770 pixels. In the Margin section, deselect
the Same for all checkbox, and set Top to 15 pixels. For Right and Left, click the dropdown
menu, and select auto. Because the wrapper <-div-> has a declared width, this
will center it in the page in all modern browsers. Click OK to close the CSS Rule
Definition dialog box. Then click OK again to close the Insert Div Tag dialog box.
14. Most browsers automatically apply padding or margin to the <-body->, so to round
off this exercise, let’s neutralize that.
Select body in the top pane of the CSS Styles panel, and click the Edit Style icon.
Switch to the Box category in the CSS Rule Definition dialog box, leave Same for all
selected for both Padding and Margin, and type 0 in the Top field for both. Click OK.
ADDING A TOUCH OF STYLE
151
5
15. Save betterCSS.html, and preview it in a browser. There you have it: a page styled
completely with CSS. Admittedly, it’s still very plain. A lot more could be done, but
once you have grasped the basics of CSS, you can start experimenting on your own,
and the next chapter shows a much more sophisticated design. Compare your file,
if necessary, with betterCSS.html in examples/ch05.
If you found hopping around in the CSS Rule Definition dialog box tedious and repetitive,
you’ll be pleased to know that working directly in the Properties pane of the CSS Styles
panel is usually much faster. However, unless you’re comfortable editing style sheets in
Code view, creating a new style rule always involves the dialog box, so you need to know
how it works. With more experience, you’ll find yourself using the Properties pane more
and more. You’ll learn how to do that in the next chapter.
All the rules you have just created are in the of the document, so they apply only
to the current page. The real value of CSS lies in the ability to apply the same styles to an
entire website by storing the rules in one or more external style sheets. That way, any
change to the external style sheet is propagated throughout the site. In Dreamweaver CS3,
moving style rules is a breeze.
Moving style rules
Many developers like to design the basic layout of their sites by embedding style rules in
the of a page and move them to an external style sheet only after they’re happy
with the design. It’s a good way of keeping everything together at the initial stage. In the
past, moving these rules involved several steps: creating a blank style sheet, attaching it to
the page, and cutting and pasting the rules into their new location. Not any more . . .
Dreamweaver CS3 automates the process for you.
Exporting rules to a new style sheet
The best way to show you how this works is with a hands-on exercise. If you have been
doing the exercises for CSS beginners, continue working with the same page. Otherwise,
copy betterCSS.html from examples/ch05 to workfiles/ch05. If Dreamweaver prompts
you to update links, click Update.
1. With betterCSS.html open in the Document window, switch to Code view, and
scroll up to the top of the page. You should see the style rules embedded in the
of the document in a <-style-> block like this:
Moving embedded styles
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
152
2. Position your cursor anywhere inside the first style rule (shown on lines 8–12 in the
preceding screenshot). Right-click and select CSS Styles ä Move CSS Rules from
the context menu. This brings up the following dialog box:
3. Select the radio button labeled A new style sheet, and click OK.
4. In the next dialog box, navigate to the styles folder, and save the new style sheet as
betterCSS.css. When you click Save, what happens next depends on the way your
Dreamweaver preferences have been set (more on this later in the chapter).
If your preferences specify opening the style sheet whenever changes are made,
betterCSS.css opens in a new tab, but the focus remains in the web page. If your
preferences don’t specify opening the style sheet, it may look as though nothing
has happened. However, if you look carefully, you’ll see in both cases that the
body,td,th selector is no longer in the of the page. It’s now in the external
style sheet.
5. Now select everything between the <-style-> tags but not the tags themselves.
Right-click and select CSS Styles ä Move CSS Rules from the context menu.
This time, the Move to External Style Sheet dialog box should automatically select
betterCSS.css as the destination for the style rules. Click OK to move them.
ADDING A TOUCH OF STYLE
153
5
6. You’re now left with an empty <-style-> block followed by a tag to the external
style sheet as the following screenshot shows:
7. Delete the empty <-style-> block shown on lines 6–9 in the preceding screenshot,
and switch back to Design view. The page is still styled exactly the same way as
before, but the styles are being drawn from the external style sheet instead of the
of the page. You can confirm this by looking
at the CSS Styles panel in All mode: the root
of the tree menu now reads betterCSS.css
instead of <-style->, as shown here:
If you want to examine the finished files, they’re
betterCSS_external.html in examples/ch05 and
betterCSS.css in examples/styles.
As the preceding exercise demonstrates, the Move CSS Rules command works with either
a single rule or a selection. When moving a single rule, your cursor can be anywhere inside
the rule you want to move. Dreamweaver treats partial selection of a rule as affecting the
whole rule.
Moving rules within a style sheet
Whenever you add a new style rule through the New CSS Rule and CSS Rule Definition dialog
boxes, Dreamweaver puts it at the bottom of the style sheet. To take advantage of the
cascade or simply to group your rules in a more logical way, you need to be able to move
them. Nothing could be easier. Simply highlight the rules
you want to move (use the Shift or Ctrl/Cmd key to
select multiple rules), and drag and drop them within
the top pane of the CSS Styles panel in All mode. As the
screenshot alongside shows, the mouse pointer turns
into a document icon while dragging. The thick blue line
indicates where the rule(s) will be located when you
release the mouse button.
The tag is inserted by Dreamweaver during step 4 when the first rule
is exported, but it is immediately before the closing tag, so you may
not notice it until now.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
154
Moving rules between external style sheets
The ability to drag and drop style rules doesn’t apply only to rules within the same style
sheet or <-style-> block. If more than one style sheet is attached to a page, you can move
them at will from one to another. The following example demonstrates the power of this
new feature. Not only are the style rules moved, any change in the cascade is immediately
reflected in Design view.
1. Open moveStyles.html in examples/ch05. Open the CSS Styles panel in All mode,
and expand the tree menus for both style sheets. The page should look like this:
In All mode, the CSS Styles panel displays CSS selectors in the same order that they
are applied to the page. As you can see from the preceding screenshot, the first
style sheet contains two rules (for body and h1), and the second one contains only
a rule for h1. If you inspect the properties for h1 in the Properties pane, you will see
that the first style sheet sets the color to maroon, but the second one sets it to
deep blue. Because the second rule is lower in the cascade, it takes precedence.
That’s why the page heading in Design view is deep blue.
2. Drag the h1 selector from the first style sheet to immediately below the h1 selector
in the second style sheet. Dreamweaver detects a conflict and displays the following
dialog box so that you can compare both versions of the rule:
Changing the look of the page by moving style rules
ADDING A TOUCH OF STYLE
155
5
When a rule with the same name exists in the target style sheet, the rule being
moved is displayed in the left panel, and the rule in the target style sheet is shown
on the right. If you click Yes, Dreamweaver preserves the rule in the target style
sheet and inserts the rule being moved alongside it.
No instructs Dreamweaver not to move the rule currently displayed but to carry on
with the rest of the operation. Cancel tells Dreamweaver to abandon the operation,
and no rules are moved. If you select the checkbox labeled Use this decision for all
remaining conflicts, the Yes and No buttons are treated as Yes to All and No to All.
3. Click Yes. The page heading should immediately turn maroon in Design view.
The ability to move and edit style rules without ever needing to leave Design view makes
Dreamweaver a very powerful tool for creating websites with CSS.
Setting your CSS preferences
Developers have individual ways of working, and Dreamweaver tries to accommodate
most common preferences. Two sections of the Preferences panel (Edit ä Preferences, or
Dreamweaver ä Preferences on a Mac) control the way Dreamweaver handles CSS. The
CSS Styles category of the Preferences panel (see Figure 5-10) controls the creation and
editing of style rules.
Figure 5-10. My personal preferences for the way style rules are created and edited
The Code Format category of the Preferences panel also lets you determine how style rules
are laid out. First, let’s take a look at the options in the CSS Styles category.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
156
Creating and editing style rules
There are two ways of writing style rules for font, background, margin, padding, border,
and list-style: the long way and shorthand. For example, the following style rules both
have the same meaning:
/* long way of declaring font and margin properties */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
line-height: 1.4;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 15px;
}
/* shorthand version of preceding example */
p {
font: 85%/1.4 Arial, Helvetica, sans-serif;
margin: 0 5px 5px 15px;
}
The advantage of the long way of declaring these properties is that the meaning is crystal
clear. The disadvantage is that it makes your style sheets much longer. The shorthand version
is more compact, but it comes at a price: you need to remember the correct order of
the property values. For margin and padding, it’s easy: they start at the top and go in a
clockwise direction—top, right, bottom, and left. The shorthand for border is also easy:
the width, style, and color properties can go in any order. As shown in Figure 5-10, the
CSS Styles category of the Preferences panel lets you choose the default way of writing
these rules. My preference is to use shorthand for margin, padding, and border only.
The next set of options lets you specify whether to use shorthand when editing existing
style rules. If you’re working as part of a team, the first option (If original used shorthand)
prevents Dreamweaver from messing up the styles used by your colleagues. If you’re on
your own, choose the second option so that Dreamweaver converts style rules to your
own preferred format.
Arguably the most important option is the checkbox labeled Open CSS files when modified.
As you can see from Figure 5-10, I have left it unchecked. This means that Dreamweaver
modifies my style sheets silently in the background. It doesn’t matter how many changes I
make in the CSS Styles panel, the external style sheets remain closed and changes are
automatically saved. This suits my way of working, because every time I use F12/Opt+F12
to preview a page in a browser, I know the CSS is up to date.
Some people, however, prefer the style sheet to be open when any changes are being
made. If you check this option, Dreamweaver opens the style sheet in a separate tab
behind the web page, but leaves the focus in the web page so that you can see the effect
of the changes in Design view. However, you must save the changes to the style sheet
yourself.
ADDING A TOUCH OF STYLE
157
5
The final section lets you choose what happens when you double-click inside the CSS
Styles panel. The first option, Edit using CSS dialog, opens the CSS Rule Definition dialog
box (see Figure 5-8) described earlier in the chapter. This dialog box can be helpful, but I
don’t recommend its use on a regular basis. The most useful option is the last one, Edit
using code view. This opens the style sheet in the Document window and positions your
cursor inside the selected rule ready to edit it. Most of the time, though, you’ll edit properties
directly in the Properties pane by clicking just once, as you’ll see in the next chapter.
Setting the default format of style rules
A useful new feature in Dreamweaver CS3 lets you control the way your style rules are laid
out. Select the Code Format category in the Preferences panel, and click the CSS button in
the Advanced Formatting section. This opens the CSS Source Format Options dialog box
(see Figure 5-11).
Figure 5-11. Dreamweaver CS3 now lets you control how style rules
are formatted.
The options are self-explanatory, and the Preview panel at the bottom of the dialog box
shows you what your selections will look like. Click OK to close the dialog box, and click
OK to save your new preferences. All new style rules will use the new settings.
To apply your format preferences to existing style sheets, open the style sheet, and select
Apply Source Formatting from the Commands menu. This is an all-or-nothing option: you
can’t apply the formatting to a selection. Dreamweaver is smart enough to apply the CSS
format options to <-style-> tags in the of a page, but it ignores styles inside conditional
comments (covered in the next chapter).
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
158
Let’s get creative . . .
This chapter has concentrated heavily on the mechanics of working with CSS in
Dreamweaver—important knowledge for you to get the best out of the program but
hardly inspiring. The next chapter shows you how to put that knowledge to practical use
by adapting one of the 32 built-in CSS layouts that are new to Dreamweaver CS3. You’ll
also learn about using the CSS Styles panel in Current mode, a powerful tool for analyzing
the effect of the cascade within your style sheets.
ADDING A TOUCH OF STYLE
159
5
6 CREATING A CSS SITE STRAIGHT
OUT OF THE BOX
Much of the book so far has been devoted to the mechanics of setting up your work environment
and getting to know the tools that Dreamweaver provides. From this point
onward, the approach will be more “hands on,” showing you how to build standardscompliant
sites with Dreamweaver.
In this chapter, I’ll lead you through the process of creating a page using one of the
32 built-in CSS layouts that are new to Dreamweaver CS3, putting into practice everything
from the preceding chapter, and showing you how to get the most out of the CSS Styles
panel in Current mode. For a sneak preview of where this chapter ends up, load
stroll_final.html from examples/ch06 into a browser or take a look at Figure 6-7 at the
end of the chapter. If you’re new to CSS, you may find some parts of this chapter daunting,
but come along for the ride. Even if you don’t understand how all the style rules fit
together, you’ll pick up some cool techniques that will give your own sites that extra lift.
What this chapter covers
Attaching external style sheets when creating a new page
Making sure conditional comments are applied correctly
Adapting a Dreamweaver CSS layout
Getting the most out of the CSS Styles panel in Current mode
Understanding the impact of the CSS cascade
Using a stored query to remove CSS comments
Using a built-in CSS layout
If you click HTML or PHP in the Create New section of the welcome screen, Dreamweaver
opens a blank page using your default settings (see “Setting new document preferences”
in Chapter 1). You get a much bigger choice with File ä New, which opens the New
Document dialog box (see Figure 6-1).
Figure 6-1. Open the New Document dialog box to select one of the built-in CSS layouts.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
162
In both the Blank Page and Blank Template categories, the Layout column offers you a
choice of 32 CSS layouts when the Page Type is suitable for a complete web page, such as
HTML or PHP. You can also choose just a blank page by selecting
the Layout column. The dialog box remembers your choices the next time you open it.
Choosing a layout
The layouts cover the most commonly used conventions of web page design: one-, two-,
and three-column pages, with and without a header and footer. They have been tested in
all the main browsers and provide a rock-solid basis for building a site.
You can choose four different types of column widths, identified by simple diagrams, as
follows:
Fixed: The width is defined in pixels.
Elastic: The width is defined in ems.
Liquid: The width is defined as a percentage.
Hybrid: The main column width is defined as a percentage; other
columns are defined in ems.
As you select each layout, a diagram appears on the right of the New Document dialog box
showing the style together with a brief description, as shown in Figure 6-1.
Deciding where to locate your style rules
When you select a layout, the Layout CSS menu at the bottom right of the New Document
dialog box is activated (it’s grayed out when
options, as follows:
Add to Head: This embeds the style rules in the of the document.
Create New File: This puts all the style rules in an external style sheet.
Link to Existing File: This discards all style rules associated with the layout and links
to an existing style sheet.
The CSS layouts work in Firefox 1.0, 1.5, and 2.0 (Windows and Mac), Internet
Explorer 5.5, 6.0, and 7.0 (Windows), Opera 8 and above (Windows and Mac),
and Safari 2.0 (Mac).
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
163
6
Linking to existing style sheets
The third option is typically for subsequent pages based on the same layout. Before clicking
Create, you must specify the style sheet by clicking the chain icon alongside Attach CSS
file, as shown here:
This opens the Attach External Style Sheet dialog box, which I described in “Attaching a new
style sheet” in the previous chapter. After selecting the style sheet, Dreamweaver might
warn you that your document should first be saved to create a document-relative path.
This is nothing to worry about. Just click OK, and you will be returned to the New
Document dialog box. You can add as many style sheets as you want. The text area below
the chain icon displays a list of the selected style sheet(s).
When you’re satisfied, click Create to load the new layout page into the Document
window. When you first save the page, Dreamweaver automatically adjusts any documentrelative
paths to style sheets.
In many dialog boxes, Dreamweaver remembers your last set of options—and this includes
the list of attached style sheets at the foot of the New Document dialog box. That’s very
helpful if you want to link the same style sheets to your next document but may give you
a nasty surprise if you forget. To remove style sheets from the list, highlight them, and click
the trash can icon alongside the chain icon.
Making sure conditional comments are applied
To make the style sheets easier to edit, as well as to ensure standards compliance, the layouts
don’t use any weird and wonderful CSS hacks to overcome bugs in Internet Explorer.
Instead, special rules to correct these bugs are embedded in conditional comments just
before the closing tag of the layout page. Conditional comments are a Microsoft
extension of HTML comments and look like this:
Only the Windows version of Internet Explorer takes any notice of the style rules embedded
in them. All other browsers treat them as ordinary comments and ignore them. It’s a perfect,
standards-compliant way of tackling Internet Explorer bugs. However, for them to be
effective, they must come after all other style rules. If your style rules are in external style
sheets, the conditional comments must come after the or @import commands that
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
164
attach them to the page. Although you can put special rules for Internet Explorer in an
external style sheet and use a conditional comment to attach the style sheet, the comments
themselves cannot go inside an external style sheet. They must be in your web page.
This has important implications if you attach further style sheets. When you use the Attach
Style Sheet icon at the bottom of the CSS Styles panel, as described in Chapter 5,
Dreamweaver attaches external style sheets immediately above the closing tag—
in other words, after any conditional comments. This means you must always move the
code that attaches your style sheet back above the conditional comments. Even if you’re
sure there’s no conflict of style rules, it’s safer to do so because Dreamweaver ignores the
conditional comments in the same way as a non-Microsoft browser, so you won’t notice
any difference in Design view if you forget to move the link to the new style sheet.
However, it will be immediately apparent to anyone using a version of Internet Explorer
with bugs that the conditional comments are meant to correct.
You must move the link to the external style sheet manually in Code view. Dragging and
dropping the style rules in the CSS Styles panel in All mode has no effect.
Styling a page
The layout I have chosen for this chapter is 2 column fixed, left sidebar, header and footer. It
creates a 780-pixel wide page centered horizontally in the browser. This is designed to fit
in an 8005600 monitor. You can change the width to suit your own needs, but I’m going
to leave it as it is.
The following exercise shows how to start transforming the basic layout. Of course, I didn’t
just pluck the settings out of thin air; it took some experimentation. But the way I did it
was exactly the same—using the CSS Styles panel to edit each property and watching the
gradual transformation of the page in Design view. These instructions assume that you
have already familiarized yourself with using the CSS Styles panel in All mode, as described
in Chapter 5.
1. Open Dreamweaver, and select File ä New. In the New Document dialog box, select
the Blank Page category, and use the following settings:
Page Type: HTML
Layout: 2 column fixed, left sidebar, header and footer
DocType: XHTML 1.0 Transitional
Layout CSS: Create New File
Make sure there are no style sheets listed under Attach CSS file, and click Create.
Preparing the basic layout
Visit http://msdn.microsoft.com/workshop/author/dhtml/overview/
ccomment_ovw.asp to learn more about Microsoft conditional comments.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
165
6
2. Dreamweaver prompts you to save the style sheet. Navigate to the workfiles/
styles folder, and save the style sheet as stroll.css. When you click Save, the
CSS layout loads into the Document window as an unnamed and untitled document.
Save it in workfiles/ch06 as stroll.html. The style sheet is saved but
remains closed.
Your first reaction may be: Ugh, what an ugly duckling! But this ugly duckling has
the right genes or infrastructure to turn it into a beautiful swan. The first task is to
analyze the structure. Do this with the help of the CSS visual aids (see “Using visual
aids to understand your CSS structure” in Chapter 1), and by clicking in each part
of the document to see the structure revealed in the Tag selector.
To assist you, Figure 6-2 shows how the page is divided. The whole page is wrapped
in a <-div-> called container, which centers the content in the browser. The rest of
the page is made up of four sections, each within a <-div-> named header, sidebar1,
mainContent, and footer. The sidebar and main content are both floated left.
Figure 6-2. The main underlying structure of the two-column fixed layout with header and footer
3. Double-click stroll.css in the Files panel to open it in the Document window. As
Figure 6-3 shows, the style sheet begins with an @charset rule. This is not strictly
necessary when working with English, but it tells Dreamweaver and the web server
which encoding you’re using. It must come before any CSS selectors.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
166
Figure 6-3. The style rules are liberally commented to make it easy to understand the role they play
in the layout.
The rules are copiously sprinkled with CSS comments that explain what they’re for.
The styles applied to the body selector control the fonts and give the page a dark
gray background color. The white background is common to all elements in the
container <-div->, but the header, sidebar1, and footer override this with various
shades of gray.
Most of the content on the page is dummy text, but the first paragraph in the left
sidebar contains the important information that the background color stretches
only as far as the content. It also advises adding a border to the left side of the
mainContent <-div-> if it will always contain more content. So let’s start by fixing
that.
4. Open the CSS Styles panel in All mode, and highlight the
.twoColFixLtHdr #mainContent selector, as shown in the screenshot
alongside. This is the rule for the mainContent <-div->.
You could go straight ahead and make the necessary changes
to this rule, but I want to show you how to use Current mode
to identify which style rules affect a particular part of the page
when you don’t know the name of the selector.
The built-in CSS layouts use a technique known as giving the
page a CSS signature. This is a class added to the tag of
the page, identifying the layout. Each style rule uses a descendant
selector that begins with the class name. The addition of
the class makes the style rules more specific, so you can combine
one of these layouts with an existing site that already
has its own style rules. If you add new rules yourself, remember
that CSS selectors are case sensitive. Use the same camel-case
spelling.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
167
6
5. In Design view, click inside the text beneath the Main
Content headline, select <-div-#maincontent> in the Tag
selector at the bottom of the Document window, and then
click the Current button at the top of the CSS Styles panel.
The panel should now look similar to the screenshot
alongside.
In Current mode, the CSS Styles panel consists of three
sections, which you may need to resize to see everything
(the width of the columns is also resizable by dragging
horizontally). The top pane (Summary for Selection) shows
the rules that apply to the current selection both through
its own selector and through the rest of the cascade,
whereas the bottom pane (Properties) shows you the style
rules for the currently highlighted selector. By default, the
middle pane tells you where the property selected in
either pane is defined in the style sheet.
Although it looks confusing at first glance, Current mode presents you with a lot of
useful information and is the most productive place to edit CSS. Using it in practice
makes it easier to understand, so just follow along for the time being.
6. Click Add Property at the bottom of the Properties pane. This opens a blank dropdown
menu. You can either click the down arrow on the right of the menu to
reveal all the options, or you can start typing the name of
a CSS property. Type bor, and press the down arrow key
(or click the menu’s down arrow). The border property
should already be highlighted. Scroll down to border-left, as
shown alongside.
Press Tab or click border-left, and Dreamweaver opens the
right side of the pane for you to type in the style rule. If it
doesn’t open automatically, click to the right of border-left.
Type 1px dashed #000000, and press Enter/Return.
Click anywhere inside the mainContent <-div-> to deselect it, and you should see a
dotted black border on the left side of the text.
7. Now let’s deal with the sidebar background. Click anywhere inside the sidebar. If
you look at the Properties pane of the CSS Styles panel, you’ll see that it refers to
.twoColFixLtHdr #container and not the sidebar. Because
nothing is actually selected, Dreamweaver shows you the
rules for the parent <-div-> for the whole page. Although
this seems counterintuitive, it’s actually quite useful.
As you can see from the screenshot alongside, background,
border, margin, and width are all struck through with a horizontal
line. This indicates that a more specific rule is overriding
these properties in the sidebar. The useful piece of
information here is that the background property for the container <-div-> is white
(#FFFFFF). If you remove the background for the sidebar, it will inherit the color of
its parent.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
168
8. Click <-div-#sidebar1> in the Tag selector at the bottom of the
Document window. The Properties pane now shows the rules
for .twoColFixLtHdr #sidebar1. Highlight background, and
press Delete or click the trash can icon at the bottom of the
CSS Styles panel, as shown here.
9. The sidebar should now have the same white background as
the mainContent <-div->. Let’s do the same to the footer.
Position your cursor anywhere inside the footer <-div->, select
<-div-#footer> in the Tag selector, and then delete background
from the Properties pane of the CSS Styles panel.
10. Save stroll.css if you have been working with the style sheet open in the
Document window; then switch back to stroll.html, and press F12/Opt+F12 to
view the page in a browser. The gray background should have gone from the sidebar
and footer, and there should be a dashed border down the left side of the main
content.
Check your files, if necessary, against stroll_border.html and stroll_border.css
in examples/ch06.
Getting rid of the background colors doesn’t make a dramatic difference to the look of
the page. The real transformation begins with adding background images. By using the
CSS Styles panel, the changes are reflected immediately in Design view.
Continue working with the same files as in the preceding exercise.
1. Let’s turn attention now to the background for the header. Instead of white or gray,
I’ve chosen a shade of cornflower blue. This is because I’m going to use a background
image but want a similar color to be displayed if the image fails to load.
Click inside the header <-div->, select <-div-#header> in the Tag selector, and delete
background from the Properties pane of the CSS Styles panel. Although you’re
going to use a different color, I’ve suggested deleting the shortcut property
because it’s easier to use the separate background-color and background-image
properties.
2. With the header <-div-> still selected, click Add Property, and
select background-image using either the arrow keys or dropdown
menu. Dreamweaver not only opens the right side of
the pane for you to type in the name of the image but also
displays two icons that should be familiar from the main
Property inspector, as shown here.
The Point to File icon on the left can be used to point to the image in the Files panel,
or you can click the folder icon to navigate to the file. It’s often easier to close the
Files panel when working in the CSS Styles panel, so the latter tends to be more
useful. Use either method to select images/stroll_header_bg.jpg.
Adding background images
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
169
6
3. Click Add Property, select background-repeat, and select repeat-x from the dropdown
menu that appears alongside. This tiles the background image only horizontally.
4. Click Add Property again, and select background-color from the drop-down menu.
This time, Dreamweaver inserts the Color Picker alongside the property, as shown
here:
5. Click the Color Picker, and use the eyedropper tool to get the color of the background
image in the header <-div->. It has a slight pattern, so the precise color isn’t
important. I told you that it was a lot easier not using shortcuts for the background
property.
6. Remove all padding from the header <-div-> by clicking the value alongside padding
and change it from 0 10px 0 20px to 0.
7. Select the word Header, and replace it with Stroll Along the Thames. Then select the
<-h1-> tag in the Tag selector, and press the right arrow key on your keyboard. If you
open Split view, you’ll see that this positions the cursor between the closing
tag and the closing
8. Insert the header image by selecting the Insert Image button in the Common category
of the Insert bar or Insert ä Image. Browse to images/stroll_header.jpg. In
the Image Tag Accessibility Attributes dialog box, set Alternate text to Stroll Along the
Thames, and click OK.
9. Change the Document title to Stroll Along the Thames by replacing Untitled
Document in the Document toolbar. The top of the page should now look like this
in Design view:
Sizes in CSS must always be accompanied by a unit of measurement, such as em or px,
with no gap between the number and unit. The only exception is 0, which doesn’t
require a unit of measurement. Although 0px is valid, the px isn’t necessary—and leaving
it out saves typing.
There’s a real time saver in dialog boxes that navigate the site’s file system. It’s a button
labeled Site Root. In some dialog boxes it’s at the top; in others it’s at the bottom
left. Just click it, and the dialog box takes you straight to the site root folder. It’s often
a lot quicker than trying to remember the hierarchy of your folders to go back to the
root and navigate from there.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
170
The text heading in the <-h1-> tags is for the benefit of search engines and browsers
that can’t cope with CSS, but we need to hide the text for visual browsers. Once it’s
out of the way, we can tuck the header image neatly into the top of the page.
10. Position your cursor inside the text heading, and select the <-h1-> tag in the Tag
selector. Highlight the padding property in the Properties pane of the CSS Styles
panel, and delete it. Then add two the following two properties and values:
position: absolute
top: –100px
Using absolute positioning removes the heading from the flow of the document,
and giving it a top position of minus 100 pixels moves it conveniently out of
the way.
11. Now let’s add a bit of interest to the bottom of the page. Click anywhere inside
Design view, and select <-div-#container> in the Tag selector. Highlight background in
the Properties pane of the CSS Styles panel, and delete it. The whole of Design view
will turn a dark gray, but fear not. We’ll restore the light right away by clicking Add
Property, selecting background-color, and setting its value to #FFFFFF.
12. Next add the background-image property, and navigate to images/city_footer.
jpg. It tiles throughout the page, so you need to set the following properties and
values:
background-repeat: no-repeat
background-position: left bottom
When entering a value like –100px, you can either type the unit of measurement
immediately after the number or select it from the drop-down menu that
Dreamweaver places alongside. Since you’re already at the keyboard, it’s
quicker to type it yourself.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
171
6
The first of these properties accepts only one value, so Dreamweaver lists valid
options as a drop-down menu. The second accepts combined values, so no dropdown
menu is available. Nevertheless, Dreamweaver still comes to your rescue by
displaying code hints when you hover your mouse pointer over the field where the
values need to be entered.
13. Save stroll.html (and stroll.css if you selected the option to open CSS files
when modified). If you press F12/Opt+F12 to preview the page in a browser, it
should look similar to Figure 6-4. It’s far from perfect yet, but the main thing to
notice is that it should look almost identical to the way it does in Design view. This
is one of the main advances in Dreamweaver CS3’s handling of CSS: Design view
normally offers a very close rendition of what you’ll see in a standards-compliant
browser.
Figure 6-4. The built-in CSS layout looks very different after changing some background settings.
14. The page is beginning to look pretty good, but the margins on either side look
drab. Their color is controlled by the body selector; and after some experimentation,
I decided to make them a light pink to match the winter sunset sky behind
Saint Paul’s Cathedral. The color I chose was #F8F1EB. Select <-body-.twocolfixlthdr>
in the Tag selector, and click the value of background in the Properties pane of the
CSS Styles panel. Replace #666666 with #F8F1EB.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
172
15. The border around the container <-div-> is now a little too dark, so select
<-div-#container> in the Tag selector. The Properties pane of the CSS Styles panel
shows that border has been set to 1px solid #000000—in other words a solid, black
border all around. Although I have set my preferences to use shorthand styles for
the border property, you can use shorthand only when all sides have the same
value. I want no border at the top and bottom, but a deep russet on either side.
Highlight the existing border property, and delete it. Then click Add Property to
create two separate rules for border-left and border-right with the value 1px solid
#C99466.
16. Save stroll.html (and stroll.css if necessary) and preview the page in a
browser. It’s now looking quite respectable. If you want to check your progress,
compare your files with stroll_bg.html in examples/ch06 and stroll_bg.css in
examples/styles.
Making these changes to the background has already transformed the basic CSS layout,
but to make further changes, you need to exploit the Current mode of the CSS Styles
panel to its full potential by using it to analyze the way style rules interact with each
other—in other words, the cascade.
No comments:
Post a Comment