RE: Style

Nick,

1. Nope. You can build the form, but to do the back-end work takes server-side scripting. Try http://www.wrensoft.com/zoom/ - we use it, and believe it was well worth the cost. Works well.

2. Try to use transparent images. That way it doesn't matter which background colour you're using. GIF and PNG images can have transparent backgrounds. JPG can't.

3. Overlapping images can be tricky. CSS seems to be the way to go. http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

I can't see the overlapping images you're talking about on http://www.labradoodles.com - are you sure that's the site you mean? I can't see any 'scrapbook' feel or staple images, or wonky left hand menu. If you pasted the wrong url in, let me know the one you meant to paste, and I can discuss it.

But basically, to create a scrap book type feel, I would use CSS, with a combination of background images.

Try http://www.csszengarden.com for inspiration and techniques (Change the CSS of the site on the right hand side - some designs are amazing. The whole look and feel is changed just by CSS).

4. No, that's not really good practice. You'd have to update the image if you ever wanted to change the text. Urgh! Use a DIV with CSS background as your image. Then type whatever text you want in the DIV.

5. Margin by default is 2px all around. Use this CSS definition in your global CSS file:
body {
margin: 0;
}

6. Semi-transparent doesn't always work in all browsers. CSS again! Good tutorial with code examples: http://www.domedia.org/oveklykken/css-transparency.php

7. CSS again. Most likely DIVs. You can specify a style for each boxed area, then redefine a heading tag within that DIV.

For example, CSS code:
#boxed_div h3 {
background-color: blue;
color: white;
weight: bold;
font-size: 200%;
}

Then use HTML code:
<DIV id="boxed_div">
<H3>This is a heading</H3>
<P>All other text you want in the box</P>
</DIV>

8. CSS techniques usually. Some techniques use little rounded corners in the background colour, so it looks like the remaining area is rounded. eg. http://kalsey.com/2003/07/rounded_corners_in_css/

There are tools to get this technique spot on now. Try:
http://www.spiffycorners.com/

See also:
http://www.html.it/articoli/nifty/index.html

Hope all that helps. Good luck.

Regards, Rich

RE: Style

Nick,

The site has a nice design, I'll give you that.

They've obviously done a lot of work on the graphics. I imagine they would have done a one page design in something like photoshop, and have then sliced the images up and used them either as HTML elements (anchor clickable) or CSS background images where appropriate.

I'd say it's been done professionally.

For the stapled boxes, you'll notice the background is a gradient from dark to light, left to right. So that's just a repeating background in the DIV. You'll also notice the left and right hand sides are perfectly straight. The top and bottom images 'finish off' the notepad feel, and are images. It's clever and effective. Notice the staples are always the same. Another option would be to have 2 or 3 different 'top' images, staggering the placement of the staples.

So you'd start with the top image, have a DIV with the gradient background for as long as the text in the box allows (this way they can have different sized boxes, all the same style), then finish with the bottom image, which includes a shadow effect, which makes the whole thing look 3D.

In your browser, right click the image you want to see, and choose 'view image' or 'view background image'. The browser should then just show you the image. Do this for the spiral at the top, and you can see the top image is quite large. They then overlay other images for the polaroids, making it easy to update the site. If you hit refresh on your browser, you'll notice the polaroids change, indicating they've got a pool of images and they're displayed at random.

You can use this technique of viewing individual images and background images around the site, to see how it's done, and use this inspiration in your own designs.

Yep, you're right, it's all CSS placement.

The 'wonky' top left hand menu section is simply rectangular images, but the image itself has the box within it that is on that angle. Again, they've designed the whole thing, then sliced the images rectangularly.

You can still design sites like this using a table, you just have to make sure there are no gaps between your cells. But CSS would be better for compatibility and future updates.

Rich