Slicing Templates?? [Archive]

Akka4kz

November 25th, 2005, 07:36

Hello, i created some nice templates with photoshop. I looked at some tutorials of slicing/coding. I did it but when I take my template in to Dreamweaver and try to add text in the part I have sliced the template messes up with white background and all that.
What am I doing wrong?? Slicing?
Please reply....

Tree

November 25th, 2005, 09:42

After you slice a template, it's best if you edit the HTML code by hand, not in a WYSIWYG editor. If you cannot code the whole webpage in a text editor, then change all of the code for the slices to look like this:

<TD background="images/Copyright.gif" WIDTH=523 HEIGHT=82>
instead of

<TD>
<IMG SRC="images/top_left_head.gif" WIDTH=189 HEIGHT=244 ALT=""></TD>

The first code allows you to place text over the table cell. Now if you're outputting the code as CSS-based, reply and I'll show you how.

Akka4kz

November 25th, 2005, 10:01

Thanks, but how ? :P

Tree

November 25th, 2005, 10:07

Oh, sorry.

Save the HTML code from ImageReady if you haven't already. To do that go File > Save Optimized as... > and then save it as whatever you want.

Then go into a text editor such as Notepad and find a code similar to this:

<TD><IMG SRC="images/YOUR_IMAGE" WIDTH=*** HEIGHT=*** ALT=""></TD>
and change it to

<TD background="images/YOUR_IMAGE">Blah Blah text goes here</TD>

If you can't find any code like that, reply and say so.

Akka4kz

November 25th, 2005, 10:15

I found that code and replaced it but it goes white the text part when I add the code...
Edit: Heres the image when i insert the code
http://www.imagefx.be//imagesAnB28514.jpg

Tree

November 25th, 2005, 10:30

I don't know what it might be then. I don't use DreamWeaver, so I don't know what could go wrong.

Akka4kz

November 25th, 2005, 11:47

I don't know what it might be then. I don't use DreamWeaver, so I don't know what could go wrong.
What do you use then ??

Tree

November 25th, 2005, 13:14

I use ImageReady and Photoshop to create the graphics. Then I export the HTML from IR, and edit the HTML using EditPlus, Notepad, Metapad, and Zend Studio.

Akka4kz

November 25th, 2005, 13:32

I even tried with notepad... still same. I did the slicing properly with IR using a tutorial.

Tree

November 25th, 2005, 13:34

Maybe another member of FWS can help?

Akka4kz

November 25th, 2005, 13:52

lolz yeh but no ones replying...........

TaintedPearls

November 25th, 2005, 15:02

can u post the code u use to get what u are getting?

Akka4kz

November 25th, 2005, 16:12

Here is what Im using

<html>
<head>
<title>main</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="21">
<img src="images/index_01.jpg" width="800" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/index_02.jpg" width="16" height="592" alt=""></td>
<td>
<img src="images/index_03.jpg" width="47" height="20" alt=""></td>
<td rowspan="2">
<img src="images/index_04.jpg" width="4" height="26" alt=""></td>
<td>
<img src="images/index_05.jpg" width="65" height="20" alt=""></td>
<td colspan="4">
<img src="images/index_06.jpg" width="87" height="20" alt=""></td>
<td colspan="13" rowspan="2">
<img src="images/index_07.jpg" width="581" height="26" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_08.jpg" width="47" height="6" alt=""></td>
<td colspan="5">
<img src="images/index_09.jpg" width="152" height="6" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_10.jpg" width="760" height="129" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/index_11.jpg" width="24" height="179" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_12.jpg" width="760" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/index_13.jpg" width="116" height="33" alt=""></td>
<td>
<img src="images/index_14.jpg" width="64" height="20" alt=""></td>
<td rowspan="2">
<img src="images/index_15.jpg" width="11" height="33" alt=""></td>
<td colspan="5">
<img src="images/index_16.jpg" width="75" height="20" alt=""></td>
<td rowspan="2">
<img src="images/index_17.jpg" width="9" height="33" alt=""></td>
<td>
<img src="images/index_18.jpg" width="82" height="20" alt=""></td>
<td rowspan="2">
<img src="images/index_19.jpg" width="9" height="33" alt=""></td>
<td>
<img src="images/index_20.jpg" width="68" height="20" alt=""></td>
<td rowspan="2">
<img src="images/index_21.jpg" width="13" height="33" alt=""></td>
<td>
<img src="images/index_22.jpg" width="81" height="20" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_23.jpg" width="232" height="33" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_24.jpg" width="64" height="13" alt=""></td>
<td colspan="5">
<img src="images/index_25.jpg" width="75" height="13" alt=""></td>
<td>
<img src="images/index_26.jpg" width="82" height="13" alt=""></td>
<td>
<img src="images/index_27.jpg" width="68" height="13" alt=""></td>
<td>
<img src="images/index_28.jpg" width="81" height="13" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="3">
<img src="images/index_29.jpg" width="199" height="328" alt=""></td>
<td colspan="2" rowspan="6">
<img src="images/index_30.jpg" width="8" height="387" alt=""></td>
<td colspan="11">
<img src="images/index_31.jpg" width="559" height="143" alt=""></td>
<td rowspan="6">
<img src="images/index_32.jpg" width="18" height="387" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/index_33.jpg" width="559" height="8" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/index_34.jpg" width="553" height="177" alt=""></td>
<td rowspan="4">
<img src="images/index_35.jpg" width="6" height="236" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="3">
<img src="images/index_36.jpg" width="199" height="59" alt=""></td>
<td colspan="10">
<img src="images/index_37.jpg" width="553" height="36" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_38.jpg" width="16" height="23" alt=""></td>
<td colspan="8">
<img src="images/index_39.jpg" width="356" height="14" alt=""></td>
<td rowspan="2">
<img src="images/index_40.jpg" width="181" height="23" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/index_41.jpg" width="356" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="65" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="64" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="82" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="68" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="81" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="181" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
</tr>
</table>

</body>
</html>

felguard

November 25th, 2005, 16:21

Why do you have so many images?

TaintedPearls

November 25th, 2005, 16:35

try this. i couldn't test it because i don't have your images so let me know what happens.

<html>
<head>
<title>main</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/index_01.jpg" width="800" height="8" alt="" colspan="21"></td>
</tr>
<tr>

<td background="images/index_02.jpg" width="16" height="592" alt="" rowspan="12"></td>
<td background="images/index_03.jpg" width="47" height="20" alt=""></td>

<td background="images/index_04.jpg" width="4" height="26" alt="" rowspan="2"></td>
<td background="images/index_05.jpg" width="65" height="20" alt=""></td>

<td background="images/index_06.jpg" width="87" height="20" alt="" colspan="4"></td>
<td background="images/index_07.jpg" width="581" height="26" alt="" colspan="13" rowspan="2"></td>
</tr>
<tr>
<td background="images/index_08.jpg" width="47" height="6" alt=""></td>
<td background="images/index_09.jpg" width="152" height="6" alt="" colspan="5"></td>
</tr>
<tr>
<td background="images/index_10.jpg" width="760" height="129" alt="" colspan="18"></td>
<td background="images/index_11.jpg" width="24" height="179" alt="" colspan="2" rowspan="4"></td>
</tr>
<tr>
<td background="images/index_12.jpg" width="760" height="17" alt="" colspan="18"></td>
</tr>
<tr>
<td background="images/index_13.jpg" width="116" height="33" alt="" colspan="3" rowspan="2"></td>
<td background="images/index_14.jpg" width="64" height="20" alt=""></td>

<td background="images/index_15.jpg" width="11" height="33" alt="" rowspan="2"></td>
<td background="images/index_16.jpg" width="75" height="20" alt="" colspan="5"></td>
<td background="images/index_17.jpg" width="9" height="33" alt="" rowspan="2"></td>
<td background="images/index_18.jpg" width="82" height="20" alt=""></td>
<td background="images/index_19.jpg" width="9" height="33" alt="" rowspan="2"></td>
<td background="images/index_20.jpg" width="68" height="20" alt=""></td>
<td background="images/index_21.jpg" width="13" height="33" alt="" rowspan="2"></td>
<td background="images/index_22.jpg" width="81" height="20" alt=""></td>
<td background="images/index_23.jpg" width="232" height="33" alt="" colspan="2" rowspan="2"></td>
</tr>
<tr>
<td background="images/index_24.jpg" width="64" height="13" alt=""></td>
<td background="images/index_25.jpg" width="75" height="13" alt="" colspan="5"></td>
<td background="images/index_26.jpg" width="82" height="13" alt=""></td>
<td background="images/index_27.jpg" width="68" height="13" alt=""></td>
<td background="images/index_28.jpg" width="81" height="13" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="3">
<td background="images/index_29.jpg" width="199" height="328" alt=""></td>
<td colspan="2" rowspan="6">
<td background="images/index_30.jpg" width="8" height="387" alt=""></td>
<td colspan="11">
<td background="images/index_31.jpg" width="559" height="143" alt=""></td>
<td rowspan="6">
<td background="images/index_32.jpg" width="18" height="387" alt=""></td>
</tr>
<tr>
<td background="images/index_33.jpg" width="559" height="8" alt="" colspan="11"></td>
</tr>
<tr>
<td background="images/index_34.jpg" width="553" height="177" alt="" colspan="10"></td>
<td background="images/index_35.jpg" width="6" height="236" alt="" rowspan="4"</td>
</tr>
<tr>
<td background="images/index_36.jpg" width="199" height="59" alt="" colspan="6" rowspan="3"></td>
<td background="images/index_37.jpg" width="553" height="36" alt="" colspan="10"></td>
</tr>
<tr>
<td background="images/index_38.jpg" width="16" height="23" alt="" rowspan="2"></td>
<td background="images/index_39.jpg" width="356" height="14" alt="" colspan="8"></td>
<td background="images/index_40.jpg" width="181" height="23" alt="" rowspan="2"></td>
</tr>
<tr>
<td background="images/index_41.jpg" width="356" height="9" alt="" colspan="8"></td>
</tr>
<tr>
<td background="images/spacer.gif" width="16" height="1" alt=""></td>
<td background="images/spacer.gif" width="47" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="65" height="1" alt=""></td>
<td background="images/spacer.gif" width="64" height="1" alt=""></td>
<td background="images/spacer.gif" width="11" height="1" alt=""></td>
<td background="images/spacer.gif" width="8" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="16" height="1" alt=""></td>
<td background="images/spacer.gif" width="43" height="1" alt=""></td>
<td background="images/spacer.gif" width="9" height="1" alt=""></td>
<td background="images/spacer.gif" width="82" height="1" alt=""></td>
<td background="images/spacer.gif" width="9" height="1" alt=""></td>
<td background="images/spacer.gif" width="68" height="1" alt=""></td>
<td background="images/spacer.gif" width="13" height="1" alt=""></td>
<td background="images/spacer.gif" width="81" height="1" alt=""></td>
<td background="images/spacer.gif" width="51" height="1" alt=""></td>
<td background="images/spacer.gif" width="181" height="1" alt=""></td>
<td background="images/spacer.gif" width="6" height="1" alt=""></td>
<td background="images/spacer.gif" width="18" height="1" alt=""></td>
</tr>
</table>

</body>
</html>

Tree

November 25th, 2005, 16:41

Why do you have so many images?

That's how IR does things.

Akka4kz

November 25th, 2005, 16:47

With your code without adding any text this is what i get:
http://www.imagefx.be//imagesTj551515.jpg

TaintedPearls

November 25th, 2005, 18:29

since i can't decipher from the file names which are buttons and which are backgrounds, the simplest way to do this would be to do what Tree suggested. where an image is supposed to go use

<td><img src="imgurl"></td>
where you won't be inserting text and use

<td background="imageurl">text you will type</td>
where you will be inserting text.

iBrightDev

November 25th, 2005, 18:53

send me a zip file with the images and the html file and i will fix it for you. you can see a sample of my work that is similar to what you are trying by visiting http://www.billycioffi.com i created the site in photoshop and slices and then added my code by using dreamweaver. i will fix your files and then give you a wolk through how to do it on your own. :) email it to me in a zip file to jstgermain@methodcomptech.com