Posts in Category "Adobe.com"

Optimal CSS Tiled Background Image Size

Posted on February 7, 2011 by Randy Edmunds | Comments (18)

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.

CS5 Updates to Style Rendering Toolbar

Posted on October 22, 2010 by Randy Edmunds | Comments (1)

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

Posted on August 17, 2010 by Randy Edmunds | Comments (1)

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

Posted on June 24, 2010 by Randy Edmunds | Comments (8)

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

Posted on June 1, 2010 by Randy Edmunds | Comments (0)

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

Dreamweaver CS5 HTML5 Pack is now available for download

Posted on May 19, 2010 by Randy Edmunds | Comments (2)

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

Shortcut when Creating a New Document

Posted on May 18, 2010 by Randy Edmunds | Comments (1)

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.

Looking for Old Features that have been removed from Dreamweaver?

Posted on April 22, 2010 by Randy Edmunds | Comments (9)

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?

Dreamweaver CS5 Help now available

Posted on April 19, 2010 by jvarese | Comments (39)

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.

Check out the new features in Dreamweaver CS5

Posted on April 19, 2010 by Randy Edmunds | Comments (2)

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