troubles slicing a layout I made in photoshop

[dochappy]

I recently posted a topic in the webdesign section thinking the reason I couldn't get my layout to code properly was because I'm not to good with coding , but now I'm thinking it might be because my layout was sliced wrong in the beginning , not saying the code was wrong to begin with cause it was but I'm getting the hang with coding and thought maybe just see if slicing the layout better would work

Here's a link to the layout , the green colored sections is where I want content to go , In dreamweaver I can get the layout decent enough but when I type in my content the layout ends up stretching to the right or down thus putting gaps in my layout. Any ideas on how I cna slice this layout to make it work better.

http://img22.echo.cx/img22/762/layoutexample5tl.jpg

thanks in advance

 

[jonbalza]

Ok, first off, be aware that there are a MILLION different ways to slice any one layout, depending on what you want to do with it, especially if you want to have a liquid layout as opposed to a fixed one.


The attached image is what I came up with thinking about a fixed layout, with as few slices as possible. There are a few things you would have to think about in addition to what I have there, such as making sure the navigation on the left is sliced correctly, or if you want the layout to "blend" into the background of the page no matter what resolution you are at, etc...

This should get you started.

 

[theKeeper]

I'd just like to add to what Jon said, and propose an alternate method.

In the image below you see 4 yellow lines. Those represent slices.
The small blue images that results from the 2 horizontal slices are to be made into table cell background images.
This will allow the design to lengthen and the blue bg images to fill the extra space. And as well, allows you to put text or links or other content in those cells; so they're not wasted.
This should be done on both sides, as seen in the example.

The slice in the green text area should be merged with the cell above it (rowspan=2). This will allow the text area to stretch as a single box, and as much as it needs to.

Hope this makes sense. :B

 

[jonbalza]

Excellent points Mark.

 

[dochappy]

I appreciate the help guys but I don't think I'm cut out for web designing lol I tried following the examples but I guess I got lost at some point because it didn't turn out as expected. I'm including a .rar attachment , with the images and html file generated by imageready and the edited html file where I went in and made the certain images part of the background , maybe this will show where ym problem lies , I'm like a lamb helplessly floating in shark infested water [confused]

 

[Joy Foraker]

Doc-happy -- me thinks the advice here is excellent but maybe you are chosing the hard way to make slices. Fastest way for web development is to make the art in photoshop. Save. Open in fireworks. Slice any way you want including menu. Menu can pop up or become disjointed or anything you want even animated. Save as html and jpg using export. Open in dreamweaver using "insert interactive" . Done. You can do the whole thing in about half a hour once you become accustom to the system. Remember one of the key reasons Adobe bought Macromedia is because they were ahead in web development - way ahead [saywhat] .

If I understand your problem your page (using the techniques you are using) - just make the slices you want to add text background slices. Type text on top. Everything stays in one place per Marks suggestion %} .

 

[theKeeper]

From what i see Doc you have way too many slices.

Follow Jon's suggestion for the best slice layout. Then add in my extra step on top of that.

Keep at it, you're almost there.

 

[dochappy]

Thanks for being so patient with me , msot people I know could be this patient and refused to help me :\

I took my time and sliced it like Jon mentioned then I added what you said to , but for some reason when I take it into dreamweaver everything falls apart. I've included (like last time) the original html file created via IR with the images and I've also included the html document after trying to edit it.

if Fireworks is that good I might try out the demo and if it works well I'll purchase it but I'm not giving up on my trusty Photoshop yet

 

[jonbalza]

DocHappy, you really should start out setting the slices exactly like I showed in my example, and then go through the code and see how IR chose to output it. With all the additional slicing you have in there, I can see how you are getting frustrated trying to figure it out.

Once you have my layout done, what you can do is create nested tables for the navigation on the left and the "what's new" on the right, instead of trying to do it all in one table, which is just giving you the mess of the code that you are trying to deal with right now.

Please don't give up on web design. It's not an easy thing to get the hang of, it takes a lot of practice to get started.

One suggestion I have that might help you out is to start with a simpler layout and code it yourself. By simpler, I mean maybe a header, footer and content area in the middle. Once you have that done and working, you might have a better idea of how to handle a little more complex layout like this.

 

[dochappy]

I decided to take your advice Jon and start simple . I used the top portion of my previous layout and used it as my header the rest of it was made with html/css but I've ran into one small problem . I have a menu on the left but I also want the exact menu on the right also.

here is what it looks like so far.http://img250.echo.cx/img250/3440/newlayoutcss0fg.jpg

still need some improvement but better than slicing imo.

here is the html if need be i can post the stylesheet also

<html>
<head>
<title>EWI</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<Style>
<Table width="750" border="0" cellspacing="0" cellpadding="0" align="center" class="outline">
<tr>
<td class="botline"><img src="header.jpg" width="750" height="166"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="3" cellpadding="2" name="body">
<tr>
<td valign="top" width="130"><!-- start left navigation -->
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="outline" name="menu">
<tr>
<td class="head">Navigation</td>
</tr>
<tr>
<td class="menuBody">+<a href="http://www.ewi.com">Home</a><br>
+<a href="http://www.ewi.com/about.html">About</a><Br>
+<a href="http://www.ewi.com/games.html">Games</a><Br>
+<a href="http://www.ewi.com/downloads.html">Downloads</a><Br>
+<a href="http://www.ewi.com/links.html">Links</a>
</td>
</tr>
</table><!-- end of left navigation -->
</td>
<td valign="top" class="outline">
<p class="head">News</p>
<p></p>
<p></p>

</td>
<td valign="top" width="130">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer"><center>EWI (c) 2005 <a href="mailto:accbiggz@gmail.com?subject=Website problems and or feedback"> ACCBIGGZ</a> layout created by:<a href="mailto:dochappy@gmail.com?subject=Make Me A Graphic">Dochappy</a> All rights reserved.</center></Td>
</tr>
</table>


</body>
</html>

thanks again Jon and mark I appreciate , thinks are looking up lol

 

[diarrhea]

Sorry for the interruption.

I'm currently working on a layout and just played with Slicing for the first time. I have no trouble slicing my image. The problem I?m having is making the image as background table.

By default when you sliced, it cuts the image into pieces and those pieces are put onto the individual cells. What I want is to have those pieces as the background for the cells so I can put some text on top of it.

Is this possible or impossible?

By the way, is there any tutorial that shows you how to make a layout from start to finish with IR and some other program like Dreamweaver?

 

[dochappy]

take the html that imageready or photoshop generates and open it in dreamweaver. click on the image that you want to be the background , in the properties bar you will see the location of the graphic , highlight it and the copy it. Now delete it and on the property box should be a place you can set the background pic paste the location of the graphic you deleted there and that should make the graphic your background