Previous article

APCUG Web Site

APCUG Reports
January-March 2009

 Next article

Index for this issue		 Default font size
Large font size
Very Large

Dreamweaver CS4
by Don Singleton

I have been building web sites since what seems like the Jurassic Period, by hard coding the html myself. I have a good friend that has been building web sites using Dreamweaver for about the same length of time (since version 4). Neither of us ever convinced the other our way was better. I did not even switch to Dreamweaver when I got a free copy with CS2. While my friend was working on her Dreamweaver CS4 review she discussed some of the new material with me, which prompted me to download the trial of Dreamweaver CS4, and I got interested enough in it that I decided to do a review of it.

If you want to see the changes from Dreamweaver CS3 to CS4, check Paula’s reviews. I will be covering mainly what I see in the product that is useful to web developers that have never used Dreamweaver before.

Many web sites do not make much use of Cascading Style Sheets (CSS), but they are the wave of the future, and if you do not have any CSS on your site, Dreamweaver can provide you with sample style sheets. It is not easy to find the information, because Dreamweaver has switched from the normal "in program/offline" Adobe Help Center menus I was used to in Photoshop CS2, to online help at http://www.adobe.com/support/dr eamweaver/ and http://community.adobe.com/help/, and whether you find what you want depends on exactly what you enter in the search box.

Using the sample Dreamweaver style sheets it indicates:

To elaborate on the above, in the Attach External Style Sheet dialog box

Click on Sample Style Sheets and you will get

The first three give you the basic font set for your site (Ariel, Times, or Verdana). Which ever you select will cause a line to be added, such as C:\don\_Tulsa_High_Tech\web site\CSS\Level1_Verdana.css.

There are seven color sheets, like C:\don\_Tulsa_High_Tech\web site\CSS\colors2.css; their color combinations are somewhat strange, but at least they do show you the major changes you can make to your site with just a few tweaks to the style sheets. I would have preferred a few options that maybe were a little more subtle, but were something that people might want to actually use.

For forms you have four choices: Accessible (Arial style sheet rewritten to use accessible measurements (ems)), Arial, Times, and Verdana), which ever you select will cause a line to be added, such as C:\don\_Tulsa_High_Tech\web site\CSS\Level2_Verdana_Forms.css. The same is true for Full Design (C:\don\_Tulsa_High_Tech\web site\CSS\Accessible_Design.css). Link Effects has a separate style sheet of its own: C:\don\_Tulsa_High_Tech\web site\CSS\a_tag_effects.css. And there are four for text. C:\don\_Tulsa_High_Tech\web site\CSS\Level2_Verdana_Text.css.

You don’t have to select one of each, and if you do, there may be some conflict, but CSS resolves that conflict by using the last specification it sees. Dreamweaver will add each of these as separate sheets, but if you want to can combine them all into one style.css sheet by cut-and-paste the styles from each file into a single file.

I did not care for their color combinations in the seven color sheets, but I went ahead and selected Full Design: Verdana, Yellow/Green which is C:\don\_Tulsa_High_Tech\web site\CSS\Level3_3.css. Let us now fix it:

Click on the yellow background color:

and I can select whatever shade I like. Ditto for foreground color.

Once you get setup with CSS, Dreamweaver has a Validate (File, Validate, Markup) capability to let you know whether your code is following the rules:

On the first error they point out I am using the deprecated HTML <center> tag. Deprecated means something that is going to be made invalid or obsolete in future versions. It may work now, but you should get out of the habit of using it, because sometime soon it may not work. They are correct. In my code which used to not use CSS, I used the <center> tag because that was the way in HTML to center something. But with CSS, that is a job for the CSS code. So I delete the <center> and </center> tags, which also gets rid of the Malformed tag error (I was missing the close bracket on my img src statement). Layout in CSS uses the Box Model. If I want to center all images I can do it in the CSS "img src" specification, but I don’t want to do that. I could use a rule with "text-align: center;" but that centers text. The proper way to center a specific graphic in CSS is to put it a <div>...</div> box with a rule to center it. I created a rule: .tophead {
width: 725px ;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
and applied it to a <div> tag.

<div class="tophead">
<img src="tulsahightech.png" alt="" width="721" height="126">
</div>

The "margin-left: auto; margin-right: auto;" centered the graphic box and at the same time allowed me to include a “margin-top: 40px;” to pull it down a little so it does not overlap the javascript menu I have at the top.

The error on line 27 was eliminated by changing the "p" into a "br", since I really did not have a paragraph there, I just wanted a line break before the javascript code. I can’t tell what they are complaining about on line 29 so I highlight that error and click the “i” for more information

and learn "The tag: "img" has an XML style closing syntax for an empty element even though version: "HTML4" is not an XML tag language.[HTML 4.0]". I am not sure how to fix that; the code was provided by Site Meter, and it works, so I will just live with the validation error for now.

In addition to helping a non CSS site get started with CSS, Dreamweaver has many tools to help you develop CSS as you build your site.

The Related Files feature displays all the documents associated with your current page (whether CSS, JavaScript, PHP or XML) in a bar along the top of your primary document. You can click any related file to edit its source in Code View while viewing the parent page in Design View. Changes made to the related file code are immediately reflected in Design View.

The Code Navigator pop-up window shows you links to all the CSS code sources that affect your current selection. A click in either Code or Design View brings up the Code Navigator, which displays CSS rules and their definitions.

The New Features documentation from Adobe says they Implement CSS best practices without writing code. The new CSS tab in the Properties panel shows the styles for the current selection as well as all the applicable CSS rules. Hover over any property to view a tool tip with no-jargon English explanations of CSS principles. New CSS rules can be created and applied in the Properties panel and stored in the same document or an external style sheet. Dreamweaver CS4 even gives you control over the specificity of your rule: Just click Less Specific or More Specific in the updated New CSS Rule dialog box to target your style precisely.

I wish there was a little bit better documentation on this new feature. I am sure it is very powerful, but I don’t really know how the new Properties Panel is supposed to work.

I work with Dreamweaver in the Classic layout

but they offer App Developer, App Developer Plus, Coder, Coder Plus, Designer, Designer Compact, and Dual Screen. If you click on the links in the HTML version of this article you can see what each of these other layouts looks like, except Dual Screen. I only have one screen on my laptop.

The cost of Dreamweaver CS4 by itself is US $399.00 with upgrades starting at US $199.00, and it is a part of their Master Collection, Design Editions, and Web Editions, but not the Production Premium.

A trial version of Dreamweaver CS4 is available from Adobe.com.

I highly recommend Dreamweaver CS4 for the web developer.