Making a layout for PHP website

[Unruffled]

I am wanting to make a PHP website and before doing so I am wanting to know how to create a layout for the site for ex. If you look at wowhead.com they have a nice layout set out , how do you make a part of the image be a specific link? Probably should reword that last part how do you divide the layout so that each part can be linked to something else like a div?

[traq]

Your question is unclear.
Please provide more information, and be as specific as possible.

• What do you want to accomplish?
• What have you already tried?
• What problems did you encounter?

Also, please be sure that you have included all relevant code and/or a link to the page in question.

First off, making a layout for a PHP-driven website is no different than making a layout for any other website - you use HTML and CSS. The bigger issue is what you want the layout to look like.

To try to answer part of your question, images can be "part of" hyperlinks simply by putting them inside the anchor element (just as you would with text), like so:

<a href="http://example.com/"><img src="image.png"></a>

If you have a more specific question, please explain.

[Unruffled]

I guess I should have put in more in detail , I do not know of a specific way to explain it. Basicacly what I am trying to get is part of the image to hyperlink to another part of the site

Ex. If I had a image of the navigation bar how can I specificly have sections of the image be hyperlinked ?

Please let me know if that is a better explanation I have just got back to coding and did not know much before.

[djr33]

I think you probably want to split your image using a technique called "slicing," where you just make one large image into a lot of small images. Then you can make any of the individual images a link if you want.

[Unruffled]

Thank you for the reply and i will be looking into "Slicing".

Edit:

Btw i searched a little bit and upon reading some thread's i gathered that it would be slower loading?

Would this be a recommended method? Or are there any other method's i can look at?

[traq]

Bigger/more images make pages load more slowly, yes. That's going to be the case no matter what you do ("slicing" or not).

[jscheuer1]

Yes, and the site you posted as an example does take a bit of time to load. But they're only linking to two parts of a relatively small (at least in dimensions) image. Either they have a lot of other stuff going on on the page and/or the images are much higher resolution (larger byte size) than they need to be.

There's no reason why such a limited use of images like they're doing should in and of itself cause that much load time.

[djr33]

One good way to make the page load faster is to replace certain slices with solid background colors (or stretched 1px by 1px images). If you do this well (using some creativity) you can design the layout so that most of it isn't actually images, but some is.

[traq]

image maps just occurred to me as well; they're a pain to make, but it would allow you to use one image instead of several sliced images, and that would save you the extra HTTP requests.