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.

DW 2004 MX shows yellow layer icons

The absolutely positioned layers are shown as selectable with a yellow icon in Dreamweaver MX 2004.

Design View with layer selected

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.

Portfolio in design view in dw 8

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.

Style Rendering toolbar

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.

DW 8 with CSS rendering off

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.

Good piece on semantic markup

Semantic Typography: Bridging the XHTML gap : Journal : Mark Boulton | Information design gives a concise and well illustrated description of semantic markup.

I myself wrote on a similar topic at the Wise Women site in the article The Early Bird Catches the CSS: Planning Structural HTML. My article doesn’t have illustrations, however, and Mark’s add a lot to help explain the concepts. Nice going, Mark.

Web Patterns

John Allsopp of West Civ fame has a thoughtful article suggesting that work needs to begin in an organized way on the idea of web patterns. dog or higher: WebPatterns and WebSemantics is his initial post on the topic. He’s also starting a site on the topic at webpatterns.org.

Here’s an excerpt: “In a nutshell, a pattern describes a problem which occurs over and over again … and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice (my emphasis).

“The essence of a pattern is that it articulates a problem, then considers how that problem might be solved. It does not dictate a single solution, rather, a strategy for solving the problem.

“The idea has been taken up in a number of computer related fields, most famously in object oriented analysis and design, the seminal work there being Design Patterns Elements of Reusable Object-Oriented Software, by "the gang of four" – Gamma, Helm, Johnson and Vlissides. In this context, Brad Appleton observed, Fundamental to any science or engineering discipline is a common vocabulary for expressing its concepts, and a language for relating them together.
This really struck a chord with me. Can web design and development today rightly be called a discipline? Or is it, as I suspect, a practice in the process of becoming a discipline. If we consider Appleton’s observation, do we have a common vocabulary for expressing [our] concepts, and a language for relating them together? We certainly have technologies like HTML and CSS (though we still struggle to even use the terms "tag", "attribute" and "element" correctly – I’m still hearing "alt tag" frequently in my travels). But what about higher order, more complex structures and strategies? What do we call the parts of a page we use over and over again? What names do we have for particular navigation strategies (such as hierarchical trees, linear progressions through sections, and so on)? My survey, as well as a more detailed, though much more narrowly focussed one by Francois Briatte suggest that while it’s clear that there are many structures we use over and over again, we lack that common vocabulary to talk about these structures, and to relate them to one another.

“In short, we lack a pattern language for the web.”

Adobe reveals its business plans for the Macromedia merger

Company News Adobe finally released some info about how they plan to bundle and release products following the completion of the merger with Macromedia. One statement: “Ultimately, the goal of the merger is to make Adobe’s ubiquitous portable
document format (known as PDF) and Macromedia’s equally widespread Flash
technology a single platform.”