Join us for an Ask a CS Pro session with David Powers on the hot topic of HTML5 and CSS3 in Dreamweaver CS5. David will present and take your questions live via chat.
THIS FRIDAY, September 24th.
Session begins at 11am Pacific Daylight Time.
Location: my.adobe.acrobat.com/askcspro. Guests will be allowed in the meeting room 10-15 min before session begins
Learn more about David Powers here:
Facebook invite here:
Note that the session will be recorded and posted to the Creative Suite Facebook page Notes section soon after the event under “Ask a CS Pro”.
In Dreamweaver, you can manually change the Code Coloring colors that are displayed in Code View in the Code Coloring Category of the Preferences dialog.
This is easy when you just want to tweak a few colors, but changing your entire coloring scheme to a dark background requires changing many different settings, which can be a lot of work.
Fortunately, I found the Dark Code Colorization for Dreamweaver extension written by Tom Sramek which does the work for you. Thank you for sharing, Tom.
The Dreamweaver team is happy to announce the release of 3 extensions this week!
We got feedback on a number of issues that we could solve via extensions, so we packaged them up.
First is the HTML5 pack for Dreamweaver CS3 and CS4. We released a version for CS5 only and we heard from users that they wanted it too. This extension contains the code hinting for:
- New HTML5 tags
- New attributes and values for existing tags.
- Many CSS3 features.
- Some -moz and -webkit CSS properties.
Multi-screen Preview, Media Queries and Starter Layouts were not included since they were not fully backwards compatible.
So hopefully this will help DW users get into all the new HTML5 goodies.
Second, some CS5 users were sad to see the Validator feature go away. We got a lot of requests for this feature, so we packaged up the files to reinstate it.
After installing, you will get the old File > Validate > Markup back in the menu and the Results panel.
Fair warning: We removed it because it wasn’t totally accurate, so check with the W3C before you go live. People like this feature to find bugs in product, before they get to W3C.
And lastly, DW CS4 users that are trying out the Widget Browser, and specifically the new Spry UI widgets are getting a warning about missing widget code. DW CS4 isn’t recognizing these new widgets as Spry widgets. So we made an extension with a new translator that recognizes the new widgets and suppresses the warning.
So we hope that these new extensions will solve some issues for users. Let us know if you have other things you would like to see. We read every e-mail that comes through the wish list and it is how we saw these issues come up, so let us know!
Dreamweaver Quality Engineering
Dreamweaver CS5 introduces the Inspect Mode in Live View. This can be turned on (among other ways) using:
View > Inspect
Once you are in Inspect mode, the element under the mouse in Live View is “inspected”. Box Model highlighting is displayed in Live View for the inspected element, the element is selected in Code View (both static and Live Code) and in the Tag Selector, and element details are displayed in all Panels that track selection (such as the CSS Panel Current Mode).
This allows you to move the mouse around the page to quickly discover the page structure. Click in the page to feeze the inspection (i.e. selection) on the current element. Click again to exit Inspect Mode.
This feature uses the Live View “hover” mechanism to determine the current element. This makes it impossible to inspect any container element where the container has no padding and has only 1 child, and the child element has no margins. There are no pixels over which you can hover the mouse to choose the container element for inspection.
To handle this case, simple keyboard navigation is provided using the left-arrow and right-arrow keys:
- In Inspect Mode, place mouse over any element.
- Without moving mouse, press left-arrow key to change inspection to parent element.
- You can keep navigating to the parent all the way up to the <body> element.
- Pressing right-arrow key returns inspection to previous child element. Once the mouse is moved to a different element, then the list of “previous” child elements are forgotten.
Give this a try and let me know how this works for you.
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.
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.
Here’s cool trick that should help save you some time in Dreamweaver:
- In the Files Panel, use: right-click > New File to create a new document
- By default, you’ll get an HTML file named something like "untitled.html", and you’ll automatically be in Rename file mode.
- Change the file extension so it’s "untitled.css", and hit Enter to accept the new file name.
- 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.
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:
Also, check the Dreamweaver Exchange:
Then search for the Feature name. For example, you can find the old table-based Starter Pages here:
Are there any other old features that you’d like to be able to install as an extension?
Now that Adobe has announced CS5, you can use Dreamweaver CS5 Help without passwords. We encourage you to try out the help and report any problems with the content or with the new help client. If you’re already using Dreamweaver CS5, you can get started, by selecting Help > Dreamweaver Help.
If you’re prompted to install the AIR app update, please do. You’ll also be prompted to download the help content locally. You don’t need to download it if you’re normally connected to the Internet — the help client displays the online content by default. If you decide to download the content locally, please allow a few minutes for the files to download, unpack, and install.
It’ll take a week or two for the online content to be fully indexed by Google so search will take a while to come into its own.
CS5 introduces a new AIR-based help client called the Community Help Client, or CHC. Some of the benefits of the CHC:
- Breaks down content silos by letting users search and browse Adobe help content and Adobe-vetted community content in one place
- Provides users with the definitive Adobe help reference
- Provides users with a full offline help option
- Supports continuous updating of content, from a variety of sources
- Supports continuous updating of the help client app, allowing for iterative development like other Adobe services
If you have feedback on the help content or the help client as you work with Dreamweaver, please post a comment here and we’ll be sure that it gets sent to the CHC team.
For a list of new features in Dreamweaver CS5, see the What’s New page. Some highlights include new CSS layouts, a new simplified site setup, and integration with Adobe BrowserLab.