How to make a web page like this?

L

Lucky Dog

Hello:

I'm trying to figure out how to make a web page like the free
templates offered here (I downloaded the "gardening" one on the left
side of page).

http://www.brandednewmedia.co.uk/

I'm particularly interested in the graphics at the top of page. It
looks like they sliced it into pieces. I tried that with mine in
Paintshop Pro (can't afford Photoshop ;-) and it seems to work except
for the white space at the bottom-right between the header and body
where the flowers are.

Can anyone please explain how this is done?

Thank you very much in advance.
 
R

rf

Lucky Dog said:
Hello:

I'm trying to figure out how to make a web page like the free
templates offered here (I downloaded the "gardening" one on the left
side of page).

http://www.brandednewmedia.co.uk/

I'm particularly interested in the graphics at the top of page. It
looks like they sliced it into pieces.

Yep. They sliced it up and stuck it in a table. This is not a nice thing to
do. The same effect could be achieved by simply using the entire image as a
background. Then there is no reason to use tables for layout.
I tried that with mine in
Paintshop Pro (can't afford Photoshop ;-) and it seems to work except
for the white space at the bottom-right between the header and body
where the flowers are.

You probably have whitespace after the image.

Look for

<img ...>
</td>

and replace with

<img...></td>

Cheers
Richard.
 
L

Lucky Dog

Hello Nico:

Thanks so much for your reply, but the one I was talking about does
not have any Flash animation at all. It's one of the free templates
that they offer. I was looking at the gardening one. :)
 
L

Lucky Dog

Hello Richard:

Thanks so much for your reply. A few more questions...

Yep. They sliced it up and stuck it in a table. This is not a nice thing to
do. The same effect could be achieved by simply using the entire image as a
background. Then there is no reason to use tables for layout.

I thought the reason they slice the graphic is so it load faster? So
slicing a picture is not a good practice? I want to try to do
everything correctly. :)
You probably have whitespace after the image.

Look for

<img ...>
</td>

and replace with

<img...></td>

What's the different between the two examples you gave me? Is it a
hard return or something?

Thanks again!
 
M

Mark Parnell

Sometime around Thu, 02 Oct 2003 20:13:10 -0700, Lucky Dog is reported to
have stated:
I thought the reason they slice the graphic is so it load faster? So
slicing a picture is not a good practice? I want to try to do
everything correctly. :)

If anything it will load slower, because there are several trips to the
server required, instead of just 1. And it makes it difficult to get it to
go back together properly, as you have discovered. :)
What's the different between the two examples you gave me? Is it a
hard return or something?

No, it is whitespace, like he said. In the example he posted, it is a line
break/carriage return/whatever you want to call it, but it could just as
easily be a normal space, e.g.

<img ...> </td>

To eliminate the spaces between your images, you need to make sure there
are no gaps between tags at all in your HTML.

But of course, you are better off just to use 1 image in the first place.
:)
 
R

rf

Lucky Dog said:
Hello Richard:

Thanks so much for your reply. A few more questions...



I thought the reason they slice the graphic is so it load faster? So
slicing a picture is not a good practice? I want to try to do
everything correctly. :)

No. In fact it probably makes the image download slower. With one file there
is one round trip back to the server. With slices there is a trip back to
the server for each slice. Grips to that server from where I am take at
least half a second. For a 10 slice image that can be 5 seconds dead time. A
sliced up image is also usually bigger (in total) than the original image,
especially if it is a gif. The gif's palette and other overhead (up to 300
bytes or so) must be in every slice.
What's the different between the two examples you gave me? Is it a
hard return or something?

Yep. The first example has a carriage return between <img ...> and </td>.
Some browsers, most noticably IE, treat the carriage return as wite space so
it's the same as writing <img ...> </td>. That white space will be usually
positioned below the image within the cell.

Cheers
Richard.
 
N

Nicolai P. Zwar

rf said:
Yep. They sliced it up and stuck it in a table. This is not a nice thing to
do. The same effect could be achieved by simply using the entire image as a
background. Then there is no reason to use tables for layout.

Well, there IS in some cases, but tables for layout are by now generally
best used carefully and sparingly. I have not downloaded the gardening
template, though, and so I cannot comment whether that's the case there.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,079
Messages
2,570,575
Members
47,207
Latest member
HelenaCani

Latest Threads

Top