Combine images into CSS sprites

Artivideo, here’s everything you need to get started:

http://kiramek.com/21test95/SafariSearchField.zip

That ZIP file includes the original layered Photoshop files for the 72ppi version (low-rez) and the 144ppi version of my Safari-style search field. (The page’s HTML Markup code references both.) I converted the background to pure black for you, but since you now have the PS files, you can change it to your liking (assuming you have PS). You can also change the highlight color from blue to anything you want. Or you can just use the PNG and GIF files in that archive as-is.

I included a sample Freeway 5.6.5 document for you. Check the page’s HTML Markup to view the code. And be sure to check the Actions palette to see the code there.

Note that I used the Extra Resources Action to link the needed two graphics to the page. But in your practical use, you would most likely want to use the Extra Resoources action in only one place on your site and then use a relative link in the Page Markup to reference those files. Or you could manually just upload them to your web server using Transmit or another FTP client, and then change the page’s HTML Markup accordingly. All said, if you test this and find it displays the graphics fine but then when you implement it in your website and find the search graphics aren’t displaying, it’s almost certainly due to your not having the URLs correct in the HTML Markup. So keep an eye on that.

If you play around with my test page long enough, you may notice that I have a graphic item there. You don’t actually need that if your background is a solid color. But I left it there because that is the box I used to import my hi-rez background footer graphic, using the Retina Image action:

http://cl.ly/0v173N1S322m

If you are wondering why I put the field inside a table cell, it’s so as to keep it vertically centered within my footer box. The same reason applies for the Copyright box I have at the far right.

The only thing not functioning on the TEST PAGE I made for you is the actual search feature. I use Atomz, but you can use anything you want. You simply need to put the appropriate info inside the Page menu’s “Form Setup” dialog. More on Atomz Search is here:

http://atomz.com/

I may be an over-eager designer, but I know what I like and I like what I know. Part of what I like is consistency, even if that means I must round off the corners in FireFox! :slight_smile:

Best wishes,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options