Recently in General Category

It's easy enough to insert Spry widgets in Dreamweaver, but customizing them is another matter. Surprisingly, there are not a great number of resources out there that show folks how to customize Spry widgets. Below are some of the more popular and useful ones that might help you get to where you want to go.

Spry widget samples (ADOBE)
Code and styling samples of all of the Adobe Spry widgets, directly from the Adobe Spry team.

Customizing Spry Menu Bars in Dreamweaver (JUST DREAMWEAVER)
Resource page offering various Spry Menu Bar information available out on the Web.

Creating Custom Spry Widgets: Dreamweaver CS3 (LYNDA.COM)
Video series showing how to insert and modify a Sliding Panels widget.

Tabbed Panels and Menu Bar widgets: Dreamweaver CS3 (PEACHPIT PRESS)
Basic tutorial on inserting and styling Tabbed Panels and Menu Bar widgets.

Spry Validation widgets (LAYERS MAGAZINE)
Video tutorial on inserting and styling Spry form validation widgets.

Building Spry pages visually (ADOBE)
The Dreamweaver Help system. Each widget contains a customization section, which links out to the larger Spry Developer's Guide.

We get a lot (and I mean A LOT) of queries about CSS layouts -- what are they, how do they work, where do I go to start? Here are just a few of some of the best resources out there if you are trying to tackle this formidable but popular beast:

From table-based to tableless web design (ADOBE)
Popular two-part tutorial series on building a CSS layout from scratch, and converting table-based layouts to pure CSS.

CSS page layout basics (ADOBE)
Explanation of a basic CSS layout that breaks down the structure and rules that create the layout.

Creating a CSS layout from scratch (SUBCIDE)
An older but still quite useful step-by-step tutorial on creating a CSS layout.

Building your first CSS site (ADOBE)
Steps beginners through the process of defining structural elements and then styling them.

Tableless layouts with Dreamweaver CS4 (ADOBE)
Shows you how to create a simple two-column CSS layout.

Creating a simple three-column design (ADOBE)
Shows you how to build a three-column design, including using the "faux column" technique

Dreamweaver CSS starter layouts (ADOBE)
An article written for Dreamweaver CS3, but still useful as the starter layouts did not change in CS4.

Create a page with a CSS layout (ADOBE)
The Dreamweaver CS4 Help doc equivalent to the above starter layouts article.

CSS layout (HTML SOURCE)
A popular article describing many of the most common terms and principles used for CSS layouts.

In Search of the Holy Grail (A LIST APART)
Elegant article on creating the "holy grail" of CSS layouts: the three-column, fixed-width sidebars, liquid center layout.

Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:

• Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)


• Curious about Spry, but have never used Spry widget features in Dreamweaver


• You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver


• Familiar with CSS styling and how it works

We are offering a small incentive to those willing to help us complete this study.

If you meet these requirements and would like to participate, please contact me at jvarese@adobe.com.

In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.

Thanks!

Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:

• Dreamweaver CS4 user (beginner to advanced)
• Curious about CSS layouts, but have never created one in Dreamweaver or in any other application
• Familiar with table-based layouts (i.e. you've done one before)
• Familiar with CSS and how it works (helpful, but not required)
• Comfortable working in Code or Split view (i.e. know how to work with HTML tags)

In your email, please confirm that you have never created a CSS layout before, whether or not you have created table-based layouts, and whether or not you are familiar with CSS at all.

Thanks!

In Dreamweaver CS3, a feature was introduced to allow CSS style rendering to be turned OFF in Design View:

  View > Style Rendering > Display Styles

This allows you to quickly view the semantic structure of a page. It's also helpful when marking up or editing content inside elements that are not accessible in Design View for whatever reason.

Originally, this setting persisted until changed. But, many users turned off this setting without knowing what it was, and later would go crazy trying to figure out why their styles weren't rendering. So starting in CS4, this setting is always reset to ON when DW is restarted (which is a natural action to take when things don't make sense).

You can change it to default to OFF as follows:

1. Place the following code in a file called myStartup.htm :

<html>
<head>
<script language="JavaScript">
  dw.cssStylePalette.setDisplayStyles(false);
</script>
</head>
<body>
</body>
</html>

2. Place a copy of this file in the Configuration/Startup folder so that it gets executed every time you start DW.

Notice that I gave it a generic name in case you want to add any other commands to be executed at every startup.