PDA

View Full Version : Dreamweaver or Photoshop ????


Bhappy
10-11-2005, 04:50 PM
:( I'm new to Photoshop and Dreamweaver. Not sure if this is a Photoshop or Dreamweaver question:

I have a web page designed in Photoshop. I've created the necessary slices. When I open it up in Dreamwever the slices become images. How do I change these images into tables. I've tried copy the image into a background page, but there are some many. Wont that create a downloading problem. Can I do the images all into tables automatically. Or is there some else I need to do in Photoshop.

Creative Insanity
10-11-2005, 06:17 PM
In PS create the slices and then on the base of the toolbar click on the buttom to jump to ImageReady (see image for button) and from there select save optimized as and select
On the second option 'Save as type' select html and images.
Place a name in the file name option and click save.

Bhappy
10-11-2005, 06:54 PM
Thanks Crative Insantiny for your reply, but I've already tried exactly what you said and when I open the html document in Dreamweaver all of the slices are images. I want all of the slices to be in tables when it opens up in Dreamweaver. What am I missing????

Creative Insanity
10-11-2005, 07:13 PM
They normaly are in a table.
Here is the code form a typical sliced tamplate from ImageReady.


Format: GIF
Dimensions: 749w x 800h
Size: 117.9K
Images: 21
Settings: Selective, 256 Colors, 100% Diffusion Dither, Transparency on, No Transparency Dither, Non-Interlaced, 0% Web Snap

<html>
<head>
<title>wt_blue_template</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">
<!-- ImageReady Slices (wt_blue_template.psd) -->
<table id="Table_01" width="750" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/wt_blue_template_01.gif" width="514" height="91" alt=""></td>
<td colspan="3">
<img src="images/wt_blue_template_02.gif" width="235" height="91" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="91" alt=""></td>
</tr>
<tr>
<td>
<img src="images/wt_blue_template_03.gif" width="3" height="36" alt=""></td>
<td colspan="4">
<img src="images/wt_blue_template_04.gif" width="511" height="36" alt=""></td>
<td colspan="3">
<img src="images/wt_blue_template_05.gif" width="235" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/wt_blue_template_06.gif" width="624" height="110" alt=""></td>
<td colspan="2">
<img src="images/wt_blue_template_07.gif" width="125" height="110" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="110" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/wt_blue_template_08.gif" width="3" height="402" alt=""></td>
<td colspan="7">
<img src="images/wt_blue_template_09.gif" width="746" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/wt_blue_template_10.gif" width="19" height="370" alt=""></td>
<td rowspan="4">
<img src="images/wt_blue_template_11.gif" width="234" height="370" alt=""></td>
<td rowspan="2">
<img src="images/wt_blue_template_12.gif" width="27" height="264" alt=""></td>
<td colspan="4">
<img src="images/wt_blue_template_13.gif" width="466" height="225" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="225" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/wt_blue_template_14.gif" width="466" height="50" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/wt_blue_template_15.gif" width="27" height="106" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/wt_blue_template_16.gif" width="341" height="95" alt=""></td>
<td>
<img src="images/wt_blue_template_17.gif" width="3" height="95" alt=""></td>
<td>
<img src="images/wt_blue_template_18.gif" width="122" height="95" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/wt_blue_template_19.gif" width="749" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/wt_blue_template_20.gif" width="749" height="95" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/wt_blue_template_21.gif" width="749" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="234" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="231" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="122" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Bhappy
10-11-2005, 07:45 PM
Here is how my code looks. I did not see much difference. Not that great with code. Did I miss something or do something wrong here. When my html page opens in Dreamweaver and I click on a slice it show as an image in the properties section.

<HTML>
<HEAD>
<TITLE>testslice2</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>
<!-- ImageReady Slices (testslice2.psd) -->
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=6>
images/testslice4_01.jpg</TD>
<TD COLSPAN=6 ROWSPAN=2>
images/testslice4_02.jpg</TD>
<TD ROWSPAN=4>
images/testslice4_03.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=9>
images/testslice4_04.jpg</TD>
<TD COLSPAN=3 ROWSPAN=2>
images/testslice4_05.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=5>
images/testslice4_06.jpg</TD>
<TD ROWSPAN=2>
images/testslice4_07.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=8>
images/testslice4_08.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=6>
images/testslice4_09.jpg</TD>
<TD COLSPAN=9>
images/testslice4_10.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=9>
images/testslice4_11.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=4>
images/testslice4_12.jpg</TD>
<TD COLSPAN=2 ROWSPAN=3>
images/testslice4_13.jpg</TD>
<TD COLSPAN=6>
images/testslice4_14.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=3>
images/testslice4_15.jpg</TD>
<TD>
images/spacer.gif</TD>
<TD COLSPAN=4 ROWSPAN=3>
images/testslice4_17.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=2>
images/testslice4_18.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=2>
images/testslice4_19.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=4>
images/testslice4_20.jpg</TD>
<TD COLSPAN=12>
images/testslice4_21.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=12>
images/testslice4_22.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD ROWSPAN=2>
images/testslice4_23.jpg</TD>
<TD COLSPAN=8>
images/testslice4_24.jpg</TD>
<TD COLSPAN=3 ROWSPAN=2>
images/testslice4_25.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD COLSPAN=8>
images/testslice4_26.jpg</TD>
<TD>
images/spacer.gif</TD>
</TR>
<TR>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD>
images/spacer.gif</TD>
<TD></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Creative Insanity
10-12-2005, 03:12 AM
Yep that are in a table :)

<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>

Can't understand then what the problem is.

gmcrone
10-12-2005, 10:22 PM
Your slices from photoshop/imageready are images period.
You can't convert a picture to a table.
All your pictures are in a table as they are meant to be.

Are you trying to add text or exactly what are you trying to do???

Mike...

Creative Insanity
10-13-2005, 01:18 AM
Are you trying to add text or exactly what are you trying to do???

Good point gm.

If you are, you will need to make the image where you want to add text a background image for that div in the table.