Image Economy - Design - Web Dev. - Neils Resource Web

Summary of Content

I'm trying to economise on the coding for the multiple images on my travel web pages. Apart from the number of pictures, the coding, especially using FrontPage's design tools produces tons of code. I've gone through it substituting what I think could be used instead. It hasn't broken yet, but this doesn't mean I've done it correctly or adheres to 'good practice'. Its turned out to be a combination of CSS and tables as actual table shapes in CSS seem to be extremely difficult for no discernable benefit.
You can help here. Please check my source code / outline below and offer suggestions. 03/2004
Still striving for a solution to avoid using the unrecognised i.e. Filters option which will not validate. There a useful article at Alistapart.com which is also attempting (and unlike me proving more successful) to resolve the issue. 02/2007
08/2009 just revisiting this after a couple of years years!
The use of filters continued to bite me as some of my other sites developed. Two possibilities presented themselves....
Stop using them completely is the obvious one! However, I happen to like them and will ignore the option. The second option was to find an alternative means of coding that will allow proper validation so I came up with my "variation". This does the trick for me these days.

If what I've done seems dead simple and everyone always does it this way, how come I haven't seen this anywhere else (certainly not in tutorial form) and it took me quite some time to put together so it worked (revised 09/05/05).

What I've done

A short style declaration (embedded or external CSS) sets up the framework, just once, for all the images on the page.

Defined an img.class for each size of normal thumbnail (100x75px or 100x133px) with border colour and size (BlankS and BlankL).
Defined a p.class for each size of drop shadow (p.imageS and p.imageL).
Defined a tr.class for the picture title row with font, colour and size also centred with vertical alignment.

What's not defined in the style declaration is provided in the table declaration, e.g., size/width, borders and alignment.
I've used the natural inheritance for <a>, <td>, </tr>, <font> tags so they are defined initially but I've only terminate them at the end of table.

Using this method, I've managed to reduce my Ireland Photographs page by a third = 200+ lines of code

There should be no difference(?) in the results. Not tested outside IE yet.

If any of this is not good practice or has glaring errors please tell me!

I've since learnt that its not good practice and could cause errors in some browsers if tags are not terminated.

How I did it

Insert in between <Head> and </Head>

<style type="text/css">

Open Style declaration (only if using internal CSS)

<link rel="stylesheet" type="text/css" href="CSSName.css">

Link external Style declaration (only if using external CSS)

p.imageS {width:120px;height:95px;filter:shadow(color:gray);}

(Note class p.) A drop shadow border 20px larger than the thumbnail image, e.g width 100px + 20px = 120px shadow. height 75px + 20px = 95px shadow.

p.imageL {width:120px;height:153px;filter:shadow(color:gray);}

A drop shadow border 20px larger than the thumbnail image, e.g width 100px + 20px = 120px shadow. height 133px + 20px = 153px shadow.

img.BlankS {width:100px; height:75px; border: white solid 3px; }

The image (100x75px) + border. Solid White, 3px wide. To go with p.ImageS

tr.Pictitle {font-family: Verdana; font-size: 10pt; color: #000080; vertical-align: top; text-align: center; height: 25}

The picture title class with vertical padding and centre, top alignment to suit the images.

</style>

Close Style declaration (only required if internal CSS is used)

Insert in between <Body> and </Body> at required image location

<table border="0" cellpadding="0" style="border-collapse: collapse; font-family:Verdana; font-size:x-small; color:#000080; text-align:center;" width="100%" id="table2">

Table declaration - no border, no padding, no internal (cell) borders, font type Verdana, font size x-small (approx 10px), colour navy, text (and image alignment) centred otherwise left shadow goes missing, width of table 100% of screen, table id 2.

Code for a placing a single image

<td><p class="imageS"><a href="mainimage.jpg"><img src="thumbnail.jpg" class="BlankS">

<td>table division <p.class> - class for dropshadow - <a href> destination full size image and location - <img.src>thumbnail image and location - class="BlankS" for a 100 x 75px image with a 3px white border.

A Single line of picture descriptions (for six images)

<tr class="Pictitle"><td>Pic 1<td>Pic 2<td>Pic 3<td>Pic 4<td>Pic 5<td>Pic 6

<tr.class> new line in the table with font, size, padding and alignment - <td> table data division - Pic 1 text description for image 1 - <td> table division...etc....

Close all declarations opened within the table

</a></td></tr></font></table>

Close all declarations - </a> closes <a href> anchor reference - </td> closes <td> table data declaration - </tr> closes <tr> table row - </font> closes font type Verdana statement declared in the table declaration - </table> closes the <table....>


Pic 1	Pic 2	Pic 3	Pic 4	Pic 5	Pic 6


Pic 7	Pic 8	Pic 9	Pic 10	Pic 11	Pic 12

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

A double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Updated11/08/2009 - Neils Resource Web - Web Development - Design - Image Economy

SUMMARY	GENERAL	PHOTO	TECHNICAL	WEB DEV	WORKSHOP			HOME
SUMMARY	LINKS	REFERENCE	UTILITIES	DESIGN	CSS	HTML	JAVASCRIPT
SUMMARY	LINKS	COMMANDS	REFERENCE	SHADOWS	VALIDATION	FILTERS	NOTES	WORKSHOP