DesignGeek 03: Tips for Web Design Image Borders, OS X Column View Navigation

******************************
*** DesignGeek ***
******************************
Tips and techniques for the digital designer

In this issue:
--Web Design: Image Border tricks
--OS X Tips for navigating column views

Issue 3, 7/21/03
Written by Anne-Marie "HerGeekness" Concepcion

--------------------------------
Web Design: Image Borders

Beginning/occasional web designers may have noticed that there's no easy way to add a custom-colored border around a .jpeg or .gif in their web page. Yes, you can set a border width attribute in the <img src> tag, for example:
<img src="logo.gif" border="5">
... but the color of the border is the default color of your body text, usually black. If the image is a link, the border changes color to match your link color. [Note: For brevity's sake I'm not including the image's alt, height or width attributes in these code examples, but they should of course be there.]

One trick is to surround a bordered image with <font> tags that change the font color:
<font color="maroon"><img src="logo.gif" border="5"></font>
... which allows the border to be a color other than the default text color, but it doesn't stop the color from changing once you link the image to something.

I hesitate even mentioning that trick, though. Web designers should be avoiding any use of the <font> tag if they want their sites to adhere to current coding standards. Instead, they should be using CSS (Cascading Style Sheets) to set at least text attributes, if not entire layouts.

Can you set image borders with CSS? You betcha:
.myborder { border: solid 5px maroon }

That's a class style called "myborder" that you add or link to your page. (You can call the style anything you want, of course.) Then you apply it to an image in your web page like this:
<img class="myborder" src="logo.gif">

Your web authoring program probably has a way of creating and applying CSS that doesn't involve <heavenforbid> typing in your own code </heavenforbid>, just look for the area in the CSS palette or dialog that deals with "Borders".

What if you prefer to avoid CSS for image borders because you're concerned about cross-platform and cross-browser consistency? A legitimate concern, so here's a solution that uses the down-and-dirty web designer's favorite tool, the paramecium table (one cell, get it ... hello? hello? I think they hung up):

1. Put the image in a 1x1 table, table width/height set to Auto, all other table attributes initially set to "0". (You don't want to use the table border attribute at all, since it draws differently on different browsers.)
2. Make sure the image has its own border set to "0".
3. Assign the table a background color that will serve as your border color.
4. Set the Cell Space for the table to the width of your border (e.g., cellspacing="5" for a five-pixel border).

Here's what the code would look like:
     <table border="0" cellspacing="5" cellpadding="0" bgcolor="maroon">
     <tr>
     <td><img src="logo.gif" border="0"></td>
     </tr>
     </table>

Et voila... you have a border in the color you want and the size you want. If you resize the image or replace it with another one, the table will automatically resize to kiss fit the border, and the border will always be the size and color you originally assigned. If you link the image, the border still stays the same color, since it belongs to the table, not the image.

Other things you can do with paramecia borders:
-- To add an inset from the border, add a Cell Pad attribute to the table (e.g., cellpadding="10" for 10 pixels of margin on all four sides of the image). Then modify the cell attribute (the "<td>" part) by assigning a background color to the cell that's different than the background color of the table. For example, assign a cell color that's the same as the page color so the image appears to float within the border.

-- You can add a border around a block of text the same way... put it in a 1x1 table, but instead of an Auto width, set the table to a width equal to the desired width of your text block. The table should have a background color of the border you want, a cellspacing amount equal to the width of the border, and a cellpadding amount equal to the "text inset" you want. The cell itself should be assigned a different background color than the table's as above. You may also need to change the color of the text so it stands out from the cell's background color.

-- Experiment: For a textured frame instead of a flat color, try assigning an abstract background image to the table instead of a background color. Or after creating your border, assign a background image to the *cell* with enough cellpadding so it's visible.

|| top ||

--------------------------------
OS X Tips: Navigating Column View from the Keyboard

It took me a while, but I've really grown enamored with the "column view" (the one with the side-by-side columns that all appear in the same window) in Finder windows in OS X. It's a relief not to have to continually open new windows to find what I want in my 60GB hard drive.

I like columns even more so these days, since I discovered how to navigate them via the keyboard instead of always having to drag the jellybean scrollbars around.

In addition to Finder windows, most of the same keyboard shortcuts I'll talk about also work in the OS X's Open/Save dialogs (technically they're called "sheets" now btw) which you may have noticed don't support any view of your hard drive's files other than column view.

But Open/Save usually has two or three fields which can be active (the field where you name a new file, for example). So before you use the shortcuts there, you need to use the Tab key to make the columnar file list active...just keep pressing Tab till you see a blue outline around the entire column view portion.

In a Finder window in Column view, you don't have to do that, the file listing area is always active.

Now you can use the main keyboard shortcuts: the arrow keys. Tap the right arrow key to move deeper into your folders and the left arrow to back out of them. Use the up and down arrow keys, or tap the first letter(s) of a filename, to choose an item in the targeted column.

What's a targeted column? It's the rightmost pane in your window with a highlighted item. (If you can see a horizontal jellybean --the bottom scrollbar -- and it isn't flush right, you're not seeing the targeted column. Tap the right arrow once and it'll scroll immediately there.)

With a highlighted file or folder, pressing the Return key will put the filename in edit mode, allowing you to rename the item. Press Return again when you're done renaming it. Pressing Command-Shift-N adds a new untitled folder to the targeted column in edit mode. (Neither of these works in Open/Save dialogs, for some reason, only in the Finder.)

In the Finder, to open the highlighted file from the keyboard, press Command-O (the letter 'o'). In an Open/Save sheet, press Return to open a file.

You don't have to do anything special to open a folder -- as opposed to a file -- since as soon as you highlight it, its contents appear in a column to the right. That's one of the main features of column view, after all. But to select a file in that folder, you'll have to tap the right arrow key to target that column first.

Remember that in Open/Save sheets, pressing Command-D will immediately target the Desktop folder just like in OS 9; and Command-Shift-H will target your home directory (your user name).

In Finder windows, Command-D doesn't work, but Command-Shift-H does bring you home. The keyboard navigation keys (home, end, page up and page down) all work as expected to scroll hidden column items into view. Command-[ and Command-] are the same as clicking the Back and Forward buttons. Also, don't forget that just like in OS 9, Command-I opens the Get Info window for a highlighted item, and Command-Delete puts it in the Trash. New in OS X, Command-Z undoes the last thing you did in the Finder... including trashing, moving, and renaming files. Love that feature!

Using the keyboard instead of the scrollbars to move through column views really saves time, especially when you're navigating a folder with hundreds of files, like your Downloads or Fonts folders. Just target the column and press the first letter or two of the filename, or one near to it, to get that area of the column in view. (I know I said that already, but it bears repeating!)

BONUS TIP for those of you who read this far:
Did you know you can copy and paste entire files from the keyboard in the Finder, using our friend the Clipboard? With a file or folder highlighted (not in edit mode), type Command-C, the usual Copy command. Now navigate (via keys or mouse) to another folder but *don't* select any item in its contents. Just keep the folder name highlighted and press Command-V. You'll see a copy of the actual file(s) appear in that folder's list of contents. Unfortunately you can only move duplicates of files around this way, since it's only Copy, not Cut, that's supported.

***********************
OS X TRANSITION:
A SURVIVAL GUIDE FOR DESIGN STAFF AND MANAGEMENT
....coming to a city hopefully near you in 2003-2004...

Get the skinny on how to have smooth transition to OS X without missing a step in your production workflow. Anne-Marie will be presenting her one-day seminar in locations throughout the U.S. as part of Dynamic Graphics Training.

Seminar details here:
http://www.dgusa.com/dgstore/a/dgtosx.htm

And registration is here:
http://www.dgusa.com/dgstore/product.asp?prodno=4030

All software/seminar training info, student pix and testimonials, fees, etc. are here:
http://www.senecadesign.com/training/

***********************

|| top ||

--------------------------------
DesignGeek is a free bimonthly publication written by Anne-Marie "HerGeekness" Concepcion, authorized Adobe and Quark training provider and president/creative director of Seneca Design & Training, Inc. in Chicago, Illinois.

To subscribe to DesignGeek or read archived issues, go to its home on Seneca's site: http://www.senecadesign.com/designgeek/subscribe.html.

To unsubscribe, follow the link at the bottom of this page.

Contact Seneca by phone at 312-946-1100 or email at info@senecadesign.com

Copyright 2003 by Seneca Design & Training, Inc.
Please forward without cutting. Please contact Seneca for reprint permissions. We don't guarantee accuracy of articles. Company or product names mentioned in DesignGeek may be registered trademarks, we use the names in an editorial fashion with no intention of infringement.
--------------------------------