Web Layout Question

once you have finish making a layout like this: http://www.pimpmyphotoshop.com/tutorial/16

what do you save it as and how do you make it into a website?

 

Well its not that simple.

Im not an expert on this so dont take what I say as 100%, I have never done it before.

But im pretty sure first of all you need to slice it into all the differnt sections and then you need to code it.

About as much help as I can give you, sorry.

 

you slice it with the slice tool, (look for a tut on google orso ) and then save it for web (menu > save it for web)

 

you have to slice it then code it.. go to www.pixel2life.com there are some tutorials

 

thx

 

Or you could do it with CSS and Divs which makes it a lot easier to change things around, loads faster and is generally just better. You'd make a .css file and a .html file. In the CSS file you define all the styles for each section for example the banner you would do somthing like this in your .css file:

#banner
{
background-color:#ffffff;
background-image:url(path/to/image.gif);
height:150px;
width:800px;
}

Plus anymore styles you want, then for the bit under the banner you'd do somthing like:

#bar
{
background-color:#ffffff;
background-image:url(path/to/image) repeat-x;
height:30px;
width:800px;
}

Then in a .html file it would look somthing like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="/path/to/cssfile" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Site</title>
</head>
<body>

<div id="banner">
</div>

<div id="bar">
</div>

</body>
</html>

What I've said there though is nowhere near enough information to make a site from it though, you'd need to look up a tut because there's other things like making a container for it all, to keep it all in place, floating etc.

Might seem a little hard at first but once you know how to do it it's a lot easier and more functional than coding it in tables.

 

Just to add on the post above me, if you do it that method, use the rectangular marquee tool to select the area you want, open a new document, and save each file seperately.

I'd definitely say the above method is the best method listed so far.

 

CSS is really nice later on if you plan on updating/changing things frequently.