I’m a fan of Project Seven products. Their newest is PVII Image Gallery Magic, a very nice, standards-based gallery that uses CSS and the DOM to do its magic. I am not affiliated with this company in any way, I just think their products are high quality resources for Dreamweaver users.
Category: Dreamweaver
Announcing a new e-book
A Beginner’s Guide: Writing CSS with Dreamweaver 8 is now available. This detailed e-book covers all the important facts about how to use Dreamweaver’s CSS tools.
I’ve worked with beginners for years. I know exactly the kinds of mistakes beginners make with the Dreamweaver CSS tools. I see the same misunderstandings among beginners again and again. This e-book addresses the needs that I’ve learned from experience will strike beginners.
A Beginner’s Guide: Writing CSS with Dreamweaver 8 is a 32 page PDF book that you can buy and download immediately. Learn more!
Tip: The Dreamweaver 8 toggle displaying CSS Styles
I recently updated a page for the first time since moving to Dreamweaver 8 and noticed some changes in the way Dreamweaver 8 deals with absolutely positioned layers in Design View. It threw me off for a while and I asked for help. Al Sparber, from Project Seven came to my rescue with the advice to toggle off style rendering in Dreamweaver’s Design View. I’m now wildly happy over the toolbar that allows you to toggle style rendering! Here’s the whole story.
The page I updated uses a Project Seven scroller. This is an artist’s portfolio page on a site (hgwinn.com) that I’ve updated happily with several versions of Dreamweaver for a few years. Previous versions of Dreamweaver used an icon for each absolutely positioned layer that allowed me to select an individual layer for editing.
The absolutely positioned layers are shown as selectable with a yellow icon in Dreamweaver MX 2004.
In Dreamweaver MX 2004, when I selected the first layer icon on the left, I could edit that layer and none of the other layers appeared in Design View.
This is a complex page and I normally worked on it in Code View, except that I liked changing the image size measurements in Design View. There is a small spiral arrow that can be used to insert the correct measurements for a new image on the Property inspector. But to be able to use it to change the dimensions for a newly inserted image, one must be able to select the image in Design View. Using the icons I just described, selecting the image was a simple matter.
Now move on to Dreamweaver 8. I open the portfolio page in DW 8 for the first time and things look very different. There are no icons, every layer is visible and it’s impossible to select parts from layers individually.
Notice the tag selector at the lower left. In Dreamweaver 8, a div is selected. I cannot drill down into the text or image elements of the div in order to edit anything.
Now, I’m not in a panic, because I normally work on this stuff in Code View, but remember my penchant for changing to new image dimensions with the Property Inspector. I have a very hard time remembering numbers, and going from an image size display readout in Fireworks, to typing width and height attributes in an image tag in Code View is a multi-step process for me. I have to go back and forth several times to get the numbers right. I really want to be able to insert a new image and just press the wonderful little icon on the Property inspector that will set the image size to the right dimensions for me.
So I call out to my cronies in the web world, and Al Sparber notices my question. (He’s always on the alert for folks having trouble with Project Seven products. They have great support for their products in the Project Seven forums, by the way, but that isn’t where I was asking my question.) Al tells me about a new option in Dreamweaver 8 that I hadn’t discovered yet. There’s a toolbar for style rendering. It’s at View > Toolbars > Style Rendering.
This toolbar is such a fine addition to Dreamweaver 8! It allows you to render the page in Design View for screen media, print media, handheld media, projection media, tty media, tv media, or—the icon on the far right—toggle displaying CSS styles.
When I use the icon to toggle off CSS style rendering I get a linearized view of the page that is super easy to edit.
Each layer is now individually viewable, I can select text or image (note the tag selector at the lower right) for quick editing, and I am happy, happy, happy.
Now I’m using this toolbar extensively to work with other pages in other sites where Dreamweaver’s Design View was getting in my way. And don’t forget the value of being able to render your pages for print styles or handheld styles using this toolbar. I consider this advancement in WYSIWYG tools to be one of Dreamweaver 8’s best new features.
Standards Advice for Dreamweaver 8
Macromedia – Dreamweaver 8 Accessibility is an article on the Macromedia site that explains a few points about making data tables accessible with captions, summaries, and headers.
After using Dreamweaver 8 for a while, I can also guarantee that all the ideas I explained in Achieve Accessibility with Dreamweaver that used MX 2004 as examples still work in exactly the same way in Dreamweaver 8.
Part 2 of Sheri’s Dreamweaver courses
I mentioned the first article in this series, See how Sheri does it last month. Now Sheri German has published the second part of the curriculum at Teaching Dreamweaver Part 2. She says: “Part two of my Dreamweaver course series is devoted to how I teach students
to create database-driven web pages and web applications. We don’t call this
class Dreamweaver 2 at Trinity University in Washington, D.C. – we call it
Internet Programming. The focus is not on design, Web Standards, CSS, or graphics processing, though we do touch on those topics tangentially. The focus is on putting together all the complex pieces of the dynamic, or database-driven, web site.”
Tip: Dreamweaver 8 CSS Styles panel improvements
Dreamweaver 8 is more CSS-friendly than previous versions. I’m going to describe a couple of welcome improvements in the CSS Styles panel.
If you select a style or element in the document window, the CSS Styles panel displays information about it in two modes now: All or Current. There are now three views to choose from, controlled by three icons at the lower left. If you select Current mode and click the Show only Set Properties icon 
you’re treated to a big bag of very specific information. This is the mode and view I want to talk about in more detail.
The highlighted style can then be inspected and edited for its individual properties. The new About pane gives information about inheritance and can help you clear up Cascade problems if you are experiencing a conflict. The Properties pane also gives information about inheritance. Properties inherited from a style further up in the cascade are indicated by a strikethrough of the selector name.
Hover over the property with the strikethrough, and you’ll see a pop-up window explaining more.
Together, the new Current mode, Show Only Set Properties view, and About pane constitute useful advances in Dreamweaver 8’s CSS interface.
Accessibility Tutorial on Wise-Women
I mentioned this article of mine earlier as a presentation I made to a Macromedia users group. Now it has been reprinted at Wise-Women: Tutorial: Achieve Accessibility with Dreamweaver It is the same information (minus some hands-on examples in Dreamweaver I was able to do in a presentation) so if you read it earlier you don’t need to repeat the effort.