Posts in Category "General"

CS5 Updates to Style Rendering Toolbar

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.

Text Size

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, reset, and decrease text size buttons

  • Increase Text Size (by 15%)
  • Reset Text Size to original size
  • Decrease Text Size (by 15%)

Pseudo-class Rendering

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.

Pseudo class buttons

  • :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.

Adobe announces the HTML5 Video Player widget

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.

David Powers: the PRO!

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:
http://foundationphp.com/about.php

Facebook invite here:
http://bit.ly/AskCSPro10_FB

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 Web Fonts

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

Dark Background Color in Dreamweaver Code View

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.

Tip for using Live View Inspect Mode in CS5

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:

  1. In Inspect Mode, place mouse over any element.
  2. Without moving mouse, press left-arrow key to change inspection to parent element.
  3. You can keep navigating to the parent all the way up to the <body> element.
  4. 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.
Thanks,
Randy

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.