Style

Resolved · Low Priority · Version CS3

Sun 1 Mar 2009, 12:04 Delegate Nicholas said...

Nicholas has attended:
Dreamweaver Introduction (2 days) course

Style

Hi

I have a few further questions as I have been playing around with Dreamweaver over the last few weeks - so here goes!

1. Can a search website function be added in DW?
2. I create some images in Photoshop without backgrounds - can an image be carried over to DW without a background (as currently I always have to ensure any images carry the same bg colour as the site I'm designing).
3. At the moment my site looks very 'uniform' (having used a table to construct it). I have seen many websites whereby overlapping images etc. are used eg. www.labradoodles.com - can you tell me how they achieve a) the overall 'scrapbook' feel to the site via the book imagery b) the effect of using staples holding text sections and c) the 'wonky' top left hand menu section (home/gallery/wish list etc.).
4. At the moment I cannot write text over an image I have input in DW - I currently add any text in Photoshop and save/insert the whole thing as one image (not a particularly good practice I'd imagine!).
5. I cannot get my site to begin at the very top of the page (there is always a small gap at the top - why might this be??!).
6. I have seen a website which uses a semi-transparent centre box - how is this achieved eg. http://www.windsor-racecourse.co.uk/8/
7. I have seen a 'boxed' approach to presenting text areas http://www.gammaxuk.co.uk/ - each section has a header with a blue background - can I do this in DW?
8. Lastly (!) when I use a table format and decide to add text to a particular cell, the shape of the cell is obviously a square/rectangle - is there any way to have a text box with rounded corners (as if the overall background of the site is grey, and a white text box is used, it really doesn't look that great from a design POV - and I want to avoid colouring it the same as the site background as I would like the text area to stand out).

Your advise is much appreciated!

Nick

Fri 6 Mar 2009, 17:09 Trainer Rich said...

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

Sat 7 Mar 2009, 10:23 Delegate Nicholas said...

RE: Style

Hi Rich,

Thanks again for the advice.

The URL should have been http://www.labradoodles.co.uk/ - oops! I suspect the answer to my question regarding this style will again have something to do with CSS!

Thanks again.

Nick

Sat 7 Mar 2009, 14:53 Trainer Rich said...

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