If you are as (dis)organized as I am, you probably don’t have all the assets for your web project in one place prior to building the site. Don’t get me wrong, I try – I really do – but invariably I’ll be coding along and realize that that one image didn’t get copied into the site’s images folder. The question is, what do you do now? There are basically three choices – with the third one being the subject of this tip.

The first, and most obvious, choice is to leave Dreamweaver and head out into the nether regions of your computer to find the desired image, and then copy it into the images folder of your site. Not difficult by any means, it just involves juggling several windows, and then you still have to return to Dreamweaver and insert the image into your page or CSS.

The second option is to either drag an image object onto the page in Dreamweaver (or use the Browse button if you are typing the img tag in Code View). Dreamweaver opens a dialog to allow you to navigate to the image. However, since the image is not located in your site folder, Dreamweaver will complain about this when you click the Choose button, asking you if you would like to copy the file to the your site folder. If  you say “yes”, Dreamweaver opens yet another dialog for you to name the image and select the folder you want to copy the image into. Again, not difficult, just more dialogs than I want to deal with.

Which brings us to the third option, the forgotten feature. (more…)

As one of the “experts” on Dreamweaver in the world (at least according to all of you), I always get a kick out of discovering something new in my favorite program. And, since it just happened, I thought I’d share…

Back in CS3 we implemented copy/paste between Dreamweaver and Photoshop, allowing Dreamweaver to then optimize and save the image before placing it on the Dreamweaver page. With CS4, we updated the workflow to allow you to drag-and-drop a PSD directly into Dreamweaver with the same optimization/save process happening.

However, in seminars, I have always pointed out that if you want to use a piece of the PSD as a background image, you needed to do the copy/paste procedure. Then delete the image from the page, create a CSS rule and link to the newly created image as a background image.

Well, here’s the newly discovered enhancement: there’s no need to do the copy/paste/delete! The next time you’re thinking that you need a CSS background image for an element, simply choose to edit the rule (or create a new one if necessary) using the CSS dialog box in Dreamweaver CS4. Select the Background category and click the Browse button to locate the PSD file you’re interested in. Once you click OK to choose the PSD, you should see the optimization window open within Dreamweaver. You can then use the Crop tool (located at the bottom of the window) to isolate the area you wish to use as the background image. Set your optimization format and amount and click OK. Dreamweaver will prompt you to save the file in your site, and then return you to the CSS dialog with the image field filled out so that you can set additional properties (such as repeat, positioning, etc).

The only caveat to this procedure is that your PSD file needs to have been saved in a “useable” state. In other words, if you need to turn on/off a layer or layer group in order to get the “right” image, then this technique won’t work.

Hope this helps… Cheers!

As anyone who has worked in the front-end dev world knows, keeping up with the “new” stuff is challenging. Thankfully, the browser makers have provided vendor prefixes which allow us to use a lot of the new CSS3 properties before they are finalized. But thanks to a reader of my blog, I was made aware that Chrome (version 16), as they removed the need for a prefix on border-image, has also changed the way the property is rendered. This morning, I awoke to find my site broken in the latest version of Chrome.

When I updated this blog to “HTML5″, I took the leap and used CSS3 everywhere that I could. This post area was a prime candidate for border-image. For the uninitiated, border-image allows you to use a single image as both a border and fill for an element. All you need to do is specify how much of the top, left, bottom, right of the image will be the borders, and how those pieces should fill each area (stretching or repeating).

Diagram illustrating the cuts corresponding to the value ‘25% 30% 12% 20%’ from the W3C specification

If you’ve ever used Fireworks, Illustrator or Flash, they all have a feature known as 9-slice scaling. Border-image is basically the same thing, but done on the fly via CSS. The rule for all posts here looked like this:

.post {
margin: 0 0 40px 0;
-webkit-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
-moz-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
border-width: 29px 50px 55px 32px;
}

In keeping with best practices, you can see that I have listed the official property (without the vendor prefix) last, so that as browsers drop the need for the vendor prefix, they will simply read the last property – and the change will be seamless. Except in the case where all browser vendors are rendering a property different than the spec—thus lulling us into believing their rendering is correct when it is not.

Don’t adjust your screen! This is what every post looked like!

There is actually an additional value in the spec called “fill”. The “fill” keyword instructs the browser to render the middle of the image as the background of the element. Without the keyword, the middle remains transparent (ie, the background-image or color is rendered instead). If there is no background-image or color defined for the element, it is simply transparent. Till now, all browsers have ignored the lack of the “fill” attribute and rendered the middle regardless. The code above worked perfectly—but it was based on improper rendering.

Chrome (actually, the change was made in Webkit) has recently changed their implementation of the border-image “fill” value as described in the spec. This is good, but it will ultimately break a lot of sites since many of us left the fill attribute off since vendors were ignoring it. Sloppy, sure. But it worked… until today.

So, dive back into your code and add the “fill” keyword if your site suddenly looks like swiss cheese. But you’ll want to (for now) only add the fill value to the non-prefixed version, as the addition of the value currently breaks Firefox if added to the -moz version of your rule (hat tip to @chriseppstein for that little nugget). My post class now looks like this:

border-image: url(images/article-background-stretch.png) 29 50 55 32 fill round round;

“fill” tells Chrome (and eventually other browsers) to render the center of your image as the background of the element. The two “round” values instruct the browser to tile the images on the x- and y-axis.