Posts in Category "Real World Use"

David Powers – new PHP code hinting video

Adobe and Dreamweaver Community Expert David Powers takes us through some of the great new PHP code-hinting features in Dreamweaver CS5. When it comes to Dreamweaver and PHP, there is no better person to consult!
You can watch the video here.

Adobe announces the HTML5 pack for Dreamweaver CS5

This morning Adobe announced the new HTML5 pack for Dreamweaver CS5. The HTML5 pack is an extension that adds support for HTML5 and CSS3 in Dreamweaver. If you’ve been watching the technology news at all lately, then you’ll know that this sort of improvement marks a great advance for any Dreamweaver user working in this fast-changing world of smart phones and other handheld devices.
The HTML5 pack introduces great things like multiscreen preview (which lets you see what your web page will look like on phones, tablets, and desktop computers simultaneously), HTML5 and CSS3 code hinting, and even a few HTML5-compliant starter layouts to get you up and running with HTML5 layouts quickly.
There is an article by yours truly that provides an overview of the whole pack on the Dreamweaver Developer Center, and there’s a great video by the Dreamweaver team’s own Jorge Taylor that takes you through the steps of working with the HTML5 pack in Dreamweaver.
The HTML5 pack for Dreamweaver is available today on Adobe Labs.

Dreamweaver CS5 HTML5 Pack is now available for download

For more information, see Adobe Labs:
http://labs.adobe.com/technologies/html5pack/

Shortcut when Creating a New Document

Here’s cool trick that should help save you some time in Dreamweaver:

  1. In the Files Panel, use: right-click > New File to create a new document
  2. By default, you’ll get an HTML file named something like "untitled.html", and you’ll automatically be in Rename file mode.
  3. Change the file extension so it’s "untitled.css", and hit Enter to accept the new file name.
  4. Open the file and you’ll see that DW changed the contents so it’s the default CSS (not HTML) file!

So there’s no need to use the New Document dialog when you want to create a new document other than the default.

Note that this only works from the initial Rename mode. Also, this is not new for CS5, but I just re-remembered it today, so I thought I’d share.

Great Dreamweaver resources now available from Brian Wood

Dreamweaver friend and expert Brian Wood has started making some of his superior-quality content free to Dreamweaver (and other Adobe product) users. Brian is a master of HTML, CSS, and Dreamweaver, and anyone trying to get up to speed on any of these technologies should consult his materials. You can find his free Dreamweaver offerings at his webiste, askbrianwood.com.
Brian’s materials are also a major part of Adobe Community Help. If you search for “askbrianwood” in the new Community Help client, you’ll see the resources pop up there as well.

Looking for Old Features that have been removed from Dreamweaver?

The Dreamweaver product sometimes removes old features that are no longer used enough to justify their maintenance cost. If the feature can be still be provided as an Extension, the the DW Team tries to provide that code on an “as is” (i.e. unsupported) basis.
Start by looking in this folder to find some old Server Models:

  [install-dir]/configuration/DisabledFeatures/

Also, check the Dreamweaver Exchange:
http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3
Then search for the Feature name. For example, you can find the old table-based Starter Pages here:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1915526
Are there any other old features that you’d like to be able to install as an extension?

Check out the new features in Dreamweaver CS5

Check out the new features in Dreamweaver CS5:
http://tv.adobe.com/watch/dreamweaver-cs5-feature-tour/dreamweaver-overview/

Using jQTouch in Dreamweaver

I was playing around with a Web Site developed using jQTouch (which is very cool, BTW) in Dreamweaver and I quickly realized that I could not see anything in Design View. jQTouch web sites consist of a single HTML file and each "page" is a <div> which is a direct descendent of the <body>. The site interaction is implemented with a combination of CSS and (unobtrusive) JavaScript.

I know that the Design View does not execute JS, so it will not render the styles applied via JS in jQTouch, and will not look like browsers (starting with CS4 you can use Live View for that), but it’s sometimes helpful to see the static content and to be able to select elements for navigating to them in Code View for editing.

So, I created a Design-time Style Sheet with the following CSS rules and attached it to my page:

* {
display: inherit !important;    /* override display:none */
font-family: Arial !important;  /* Windows: no Helvetica */
}
body > div {
visibility: hidden !important;  /* hide divs (except if selected) */
}

Now I get a list of the "pages" in the AP Elements Panel. They are all hidden (so all of the AP Elements don’t render on top of each other), but when I choose the one I want to edit, I see the static content in Design View (which displays selected AP Elements even if hidden) and the markup is selected in Code View. Here’s how it looks in DW CS4:

dw_jqtouch_dtss.png

Customizing Spry widgets

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.

Get up to speed with CSS layouts

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.