Jump to content
SkatePerception
Corey

Custom Website Tutorial

Recommended Posts

This tutorial is different from the other two in that it shows you how to use Photoshop to correctly slice (or crop) your images and use CSS instead of having PS do it all for you, which creates terrible code.


*Click images for full size*
So, we'll start out with a site that you have designed in Photoshop. I will be using my Subject site that I created as an example. Here's what I started with:
[url="http://img255.imageshack.us/img255/8941/websiterr5.jpg"][img]http://img166.imageshack.us/img166/6379/websiterr5pj0.jpg[/img][/url]

So, now I thought about how I would lay the site out coding-wise. It'd be like this:

-Header
-Nav
-Content on left half
-Content on right half
-Footer

But see that the problem with my site and many sites is that there aren't simple straight lines to divide or slice each section. So, what you do is create imaginary lines that divide the website, and when you code it, everything will line up like it was one image.

So in Photoshop, I'll take the slice tool, and slice each part of my page, thinking of each slice as a separate image that I will be placing into position later.
[b]When slicing, it really helps to have Snap checked. To do this, go to View and click Snap. There should now be a checkmark by it. Then, if they aren't already checked, go to View > Snap To, and click all of those. This makes all your slices nice and even and no overlapping.[/b]
After slicing, you'll want to save each individual slice. To do this, go to:
[b]File[/b] > [b]Save for Web[/b].
Select how you want to save it (.gif, .jpg, etc.).
Click on the slice you want to save, and click on [b]Save[/b].
Select the destination and give it a name (for example, header.gif).
Make sure [b]Save as Type[/b] is set to [b][i]Images Only[/i][/b].
[b]Settings [/b]should be set to [b][i]Default[/i][/b].
And then change [b]Slices[/b] to [i][b]Selected Slices[/b][/i]. Then click [b]Save[/b].
Now, do the same for the rest of the slices.

So, all the main pieces of your site should be saved now as individual images. Something like this:
[url="http://img178.imageshack.us/img178/5893/slicedtm1.jpg"]CLICK TO SEE EXAMPLE[/url].

Now, if you had made Photoshop automatically export slices and html, you'd end up with twice as many images, and a bunch of tables in your coding.

So, now that we have our images that make up our website, we'll start coding it.

First, create a CSS page, name it [b]styles.css[/b].

Start with a "container". This will be a DIV element that will keep our site nice and centered in all resolutions. You'll want this to be as wide as your site (in my case, 900 pixels). To do this, we will apply some CSS to our [b]styles.css[/b] page.

[code]#container {
margin:auto;
width:900px;
}[/code]
Here, "margin:auto;" is the key section. This tells the browser to display the DIV centered horizontally.

Our whole website will go inside this DIV. So let's start with the rest of the sections.

We'll start with the header. Our header image is 900 pixels wide and 196 pixels tall. Here is how the CSS will work:
[code]#header {
width:900px;
height:196px;
background:url(images/header.jpg) center no-repeat;
}[/code]
We set the background image of the DIV as our header image. This makes it really easy to change, because all you have to do is edit this CSS file once, instead of editing all of your websites pages.

Next, we create the container for our navigation. All of our navigation images are 28 pixels tall.
[code]#navigation {
width:900px;
height:28px;
}[/code]

Now, the content section. For this site, I'm going to have a DIV for the left side, and one for the right side.
This is where it gets semi-complicated. Since I'm going to have content overlaying these sections, I'm going to have to define the area where it's going to show up.
[url="http://img168.imageshack.us/img168/7450/paddinguw3.jpg"]Here's what I'm talking about.[/url]
In the code below, the padding is showed like this:
padding:3px (top padding) 3px (right padding) 3px (bottom padding) 69px (left padding);
[code]#left {
float:left;
padding:3px 3px 3px 69px;
width:444px;
height:494px;
background:url(images/background.jpg) top left;
overflow:auto;
}
#right {
float:left;
padding:3px 84px 3px 3px;
width:297px;
height:494px;
background:url(images/background.jpg) top right;
}[/code]

Now that we have that set up, we'll finally finish with the footer. Our footer image is 900 pixels wide, and 84 pixels tall.:
[code]#footer {
clear:both;
width:900px;
height:84px;
background:url(images/footer.jpg) center no-repeat;
}[/code]

"Clear:both;" makes this DIV show up below the "left" and "right" DIVS.

Here is the entire CSS code for [b]styles.css[/b].
[code]#container {
margin:auto;
width:900px;
}
#header {
width:900px;
height:196px;
background:url(images/header.jpg) center no-repeat;
}
#navigation {
width:900px;
height:28px;
}
#left {
float:left;
padding:3px 3px 3px 69px;
width:444px;
height:494px;
background:url(images/background.jpg) top left;
overflow:auto;
}
#right {
float:left;
padding:3px 84px 3px 3px;
width:297px;
height:494px;
background:url(images/background.jpg) top right;
}
#footer {
clear:both;
width:900px;
height:84px;
background:url(images/footer.jpg) center no-repeat;
}[/code]


Now we finally have all the CSS set up. Save that file.

Now, create a new HTML file, name it whatever you'd like. (If it's your home page, name it index.html)

Here is the code you'll need to set it all up:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<div id="container">

<div id="header"></div>

<div id="navigation">
<!-- We're going to place all of our navigation images here in a line, as links to the pages -->
<a href="index.html"><img src="images/home.gif"></a><a href="aboutus.html"><img src="images/aboutus.gif"></a> ... And so on.
</div>

<div id="left">
Content for left side.
</div>

<div id="right">
Content for right side.
</div>

<div id="footer"></div>

</div> <!-- This is closing that "container" DIV that we created at the top -->

</body>
</html>[/code]

That's it. Hopefully you understood it all. It's a lot harder to explain that I thought.
If you have any questions, just ask here.

Share this post


Link to post
Share on other sites
thank you SO much, i'm going to re-slice & re-code my site now.. probably will start tonight, and when i get everything the way i want it i will post it up (could be a week or two we'll see)..

edit: i would have commented last night but as soon as i got in this topic last night and read it a bit, the site stopped responding but thats besides the point, thank you!

Share this post


Link to post
Share on other sites
No problem, glad I could help.


Also, the code up there is if you want your content to have a set height. If you want your content area height to be adjustable (relative to however much content you have), but still have the two columns, you can do this by just using one DIV and dividing it by using a table.

Instead of using the #left and #right DIVS from above, use this CSS:
the width is 900 pixels minus 78 pixels on the right and 69 pixels on the left for padding.
[code]#content {
width:753px;
padding:3px 78px 3px 69px;
background:url(images/background.jpg) top center repeat-y;
}[/code]

And then, the HTML would look like this:
[code]<div id="content">
<table width="100%">
<tr>
<td width="50%">
LEFT CONTENT HERE
</td>
<td width="50%">
RIGHT CONTENT HERE
</td>
</tr>
</table>
</div>[/code]

Share this post


Link to post
Share on other sites
I Think this tut was very usefull... I just had one problem while trying to re-code a site. My content area was not displaying the background image for some reason. Messed around trying different codes but somehow never was successful in getting the background for the content area display.

Share this post


Link to post
Share on other sites
thanks. there's many reasons why your background might not appear.

was the css like this?

background:url(url to your image);
or
background-image:url(url to your image);

Was that URL pointing to the right image? Did you upload the image also?

Share this post


Link to post
Share on other sites
[url="http://img412.imageshack.us/my.php?image=cssqk8.jpg"][img]http://img412.imageshack.us/img412/7078/cssqk8.th.jpg[/img][/url]

rough padding and height width

Share this post


Link to post
Share on other sites
i don't see what the problem is.

do you have an image named "contentbackground.jpg" in your images folder?

Share this post


Link to post
Share on other sites
Okay so I sliced all the areas, but it won't let me select save for web, the menu item is just not choose-able. Anyone know what's wrong?

Share this post


Link to post
Share on other sites
[quote name='RobbieCopp' post='2217084' date='Mar 1 2008, 07:58 AM']Okay so I sliced all the areas, but it won't let me select save for web, the menu item is just not choose-able. Anyone know what's wrong?[/quote]
make sure you don't have anything selected, and are not resizing anything when you try to save.

Share this post


Link to post
Share on other sites
I don't know why it wouldn't work.
Try opening a blank canvas, making a slice, and then saving for web.

Share this post


Link to post
Share on other sites
Do you have the image open in photoshop? Lol. I don't know why else it wouldn't work.
can you Save As? or anything else.

Share this post


Link to post
Share on other sites
hmm... i don't know why it would do that.

try these:

[url="http://kb.adobe.com/selfservice/viewContent.do?externalId=327577&sliceId=2"]http://kb.adobe.com/selfservice/viewConten...7&sliceId=2[/url]

maybe try this first:
The first thing to check is that you have an image in RGB or Index mode. Click on Image / Mode, then make sure there's a chekcmark next to RGB or Index.

If it's the case, then you need to reset the preferences : Press Command - Shift - Option immediately after launching elments. A dialog box will offer the reset the preferences. Answer yes.

Share this post


Link to post
Share on other sites
read this:
[url="http://kb.adobe.com/selfservice/viewContent.do?externalId=327577&sliceId=2"]http://kb.adobe.com/selfservice/viewConten...7&sliceId=2[/url]

Share this post


Link to post
Share on other sites
Thanks man, I don't know why but it may be because I moved the application out of the original install place, because I put it back and now it works. Sorry for the trouble, exporting now, thanks man.

Share this post


Link to post
Share on other sites
yah, that would probably do it.
cool, glad you got it to work.

Share this post


Link to post
Share on other sites
Okay so another question. My layout has a transparent background, do I have to have that selected in ay of my slices, or just the text/images and stuff?

Share this post


Link to post
Share on other sites
well if it's transparent, i don't think you need to include it in your slices.
post a screenshot of what your talking about.

Share this post


Link to post
Share on other sites
[img]http://i30.photobucket.com/albums/c332/bakerskate8819/Picture1-12.png[/img]

Ones with the blue squares in the corner are the one's I've selected, all the others are auto select ones that aren't truly selected unless I choose to. Also, what do you think of the box that the links are in? I'm not sure if I like it or now so i just put it there last night to look.

Share this post


Link to post
Share on other sites
I followed this tutorial and my page looks like [url="http://www.the-bodega.com/index2.html"]this[/url].

heres my styles page if it helps:
[codebox]@charset "utf-8";
/* CSS Document */

#container {
margin:auto;
width:795px;
}
#header {
width:795px;
height:61px;
background:url(images/header.png) center no-repeat;
}
#navigation {
width:795px;
height:54px;
}
#left {
float:left;
padding:10px 72px 34px 39px;
width:444px;
height:494px;
background:url(images/left.png) top left;
overflow:auto;
}
#right {
float:left;
padding:75px 20px 90px 86px;
width:291px;
height:247px;
background:url(images/right.png) top right;
}[/codebox]

EDIT: this is how I want it to look

[img]http://i194.photobucket.com/albums/z284/untitleduser/layout2-1.png[/img]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×