Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using HTML5, CSS3, and JavaScript web standards.
Download the Preview version from Adobe Labs:
http://labs.adobe.com/technologies/edge/
As part of our wind-down from CS5.5, the Dreamweaver Team has started thinking about how we can deliver a world class experience for building CSS3 Transitions for the web. In the coming weeks, the Dreamweaver Team will be conducting surveys and asking for your input on how we can do just that, so we’re bringing it to our fans directly through our social media outlets. This week we want to see examples of CSS3 Transitions (or animations).
So send us links to your sites showing off your CSS 3 Transitions skills!
This tutorial by Scott Richards on the Adobe Developer Connection shows how to package an existing HTML and JavaScript widget using the Adobe Widget Browser so that it can be shared with other users of the Widget Browser. Read the full article here:
http://www.adobe.com/devnet/dreamweaver/articles/packaging-widgets-with-widget-browser.html
I have recently analyzed several web pages for Dreamweaver customers that complained about slow page loading times. A trend that I have noticed is images used for tiling backgrounds with a width or height of 1 pixel. I have even seen some 1×1 images used for tiling. Yikes!
“Tiling” refers to using a CSS background image that repeats in the X and/or Y directions to fill a page or element.
While it’s generally best to make images as small as possible, one exception to that rule is for tiling images. The smallest download that browsers can do is 1K bytes, so the best size for tiling image files that can be made to be under 1K in size is “as close to 1K without going over”. This can significantly reduce the amount of tiling that Dreamweaver and browsers need to do, which improves page loading performance.
For example, consider a 1×1 image versus an equivalent 10×10 image. The size of both images is under 1K, so the download time is the same, but the smaller image is tiled up to 100 times more than the larger image, which requires more time to render.
This argument also applies to non-tiled images, but those can easily be combined in a single file using the CSS Sprite technique.
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.
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.
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 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:
Give this a try and let me know how this works for you.
Thanks,
Randy
For more information, see Adobe Labs:
http://labs.adobe.com/technologies/html5pack/
Here’s cool trick that should help save you some time in Dreamweaver:
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.
