[Skyline_R34]

This tutorial will teach you how to convert your template slices into a fully working page, text and all.

1. Lets start with slicing properly. You want to make as little amounts of slices as possible because you are going to be converting each image, manually, into a background. It doesn't seem as hard as it sound though, so don't worry.
Begin by slicing through the unneeded areas leaving any areas you want to make into links. When clicing up a template, they can sometimes be big and your Swatch window or your layer window might be covering the image. You can tuck the away by minimizing them since you don't really need these while slicing. If you wish, you can keep the History window open, I use this window a lot if I make a mistake. Do it like in this image:

http://tech-fusion.net/slicetut/1.png

This is image is zoomed out, to show you all of the slices. Notice how the slices that don't include links are large and the links are small and precisely on the image. This is how you would slice up a link:

http://tech-fusion.net/slicetut/2.png

2. Now it's time to convert it to an html file and begin our code work. Go to File -> Save for Web. Now choose the image types you want to the right, then click save. Choose a folder to save to. Choose "index.html" as the name, Save As "HTML and Images" Default Settings and All Slices.

3. Depending on hwo you want to do your work, open up your index.html in Dreamweaver or or favorite text editor. If you don't have a text editor, Google "Textpad," I personally use this. If you use a text editor, make note of the file names of the images that are going to be turned into links.

4. Use the Split view in Dreamweaver so you can see which images you are editing on what line. In your editor (Dreamweaver and Text Editor) you will see code like this for each image:

<td colspan="6" rowspan="2">
			<img src="Tech-Fusion/images/index_02.png" width="587" height="28" alt=""></td>

The variables in the <td> tag will differ depending on your image.

Now comes the time to change the image to a background. We do this by switching the above code with this:

<td colspan="5" rowspan="2" background="images/index_05.png"></td>

Notice that we now have an extra variable in the <td> tag, "background=""" and we have removed the <img> tag. First you add " background="link/to/image.gif" " without the outside quotes. Then you remove the <img> code. Do this with every image that is not going to be turned into link.

Dreamweaver users will have to refresh after each code change to see the next image,. You will notice the images dissapear, this means they are in the background. Now you can just select the images that are left and they can be turned into links. You write text you just enter your text with any <font> tags over the image where they should be.

Congratulations! You have created your sliced image website!

This tut may not appear anywhere but the following sites:
- Tech-Fusion.net
- Agerage.net
- MPC
- Admin Fusion


TUTORIAL COPYRIGHT 2006, Skyline_R34.

[lpxxfaintxx]

Shouldn't

<td colspan="5" rowspan="2" background="images/index_05.png"></td>

be

<td colspan="5" rowspan="2" background="images/index_02.png"></td>

?

Anyways, GREAT tutorial! I swear to God I've been trying to find a tutorial on EXACTLY this... don't believe me, I'll give you links to all my threads asking.

Thanks a bunch!

P.S., you should add this to Pixel2Life, if you havent already

[Skyline_R34]

Sorry about that, it's a typo. But you get it. Hope it helped . I was tying to do this just yesterday and when a co-admin on another forum showed me i made the tut.

[n1ck]

Wow cool. thanks. I've been wanting to make a new layout for a site, but I couldn't figure out how to do this.

[Virtuosofriend]

Awesome tutorial mate. Keep them coming