In Dreamweaver CS5, the Design View Style Rendering Toolbar was given a couple new features.
Note that the Style Rendering Toolbar is not displayed by default, so you may need to turn it on using the
View > Toolbars menu.
These are buttons to quickly adjust the font size on the page. This is a temporary adjustment to emulate font zooming as done in browsers so you can quickly see how this may affect the layout of your page.
- Increase Text Size (by 15%)
- Reset Text Size to original size
- Decrease Text Size (by 15%)
These radio buttons are used to temporarily change the filtering of CSS pseudo-class styles in your page. By default, browsers display the
:link styles and hide all of the other pseudo-class styles until a certain action takes place. This is a temporary change in the way styles are cascaded so you can quickly see how the other pseudo class styles are rendered in your page.
- :l – :link
- :v – :visited
- :h – :hover
- :a – :active
- :f – :focus
Notice that it’s not possible to hover over more than 1 link at a time, so this feature can cause your page to render in a state that can never be seen in a browser. This is just for doing a quick, temporary check of how styles are rendered, not to represent valid link states in your page.
All of the Style Rendering Toolbar functionality is also available through the
View > Style Rendering menu.
HTML5 has received a tremendous amount of buzz, much of it driven by the potential for plugin-free video. However, the limited browser support for the HTML5 <video> tag has forced web designers to scramble for a solution that would work across platforms as well as browsers. To help customers overcome these challenges, Adobe has released an easy-to-use, totally CSS-customizable solution that shifts gracefully from the HTML5 <video> tag to the Flash Player when the tag is not supported. The shift takes place regardless of the screen—from phone to monitor to TV.
The HTML5 Video Player widget, now available through the Adobe Widget Browser, works with or without Dreamweaver CS5. Code generated from the widget plays video in the best possible player for the requested platform using a range of video codecs. Based on the Kaltura open source library, the HTML5 Video Player widget is fully cross-browser compatible with support for Internet Explorer, Firefox, Safari, Chrome, and Opera. Moreover, the player is completely customizable with industry standard CSS techniques.
You can run the Adobe Widget Browser directly from within Dreamweaver and, once you’ve set it up, insert the generated code and files for the HTML5 Video Player widget with point-and-click simplicity. But if you’re not a Dreamweaver user (shame on you), you can also download the Widget Browser independently. (You’ll need to install Adobe AIR first.)
If you’re new to the Widget Browser, you can get up to speed quickly with this video from Lynda.com.
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”.
Adobe introduced Adobe Web Fonts, a specialized subset of fonts from the Adobe Type Library. They look great on screens and are easy to add to your website. Now, with the help of our partners from Typekit, you can deliver type to your website that is searchable, editable and viewable with the high performance and selection that you demand for your viewers.
For more info, visit: http://www.adobe.com/type/webfont/info.html
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.
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.