Click to See Complete Forum and Search --> : [RESOLVED] Image Slices question
WhiteDragon
11-03-2008, 08:35 PM
When photoshop slices up a image, it exports the image with HTML into tables then you typically cut and paste the code into a <div> lets say, and that's it.
What I would like to know if there is a more better way, maybe CSS to load the images instead of tables? CSS tables ? And also converting it over pretty painless :)
Images used in this way usually convey no information, so should be used on the background of elements. Tables, often nested, are incorrectly used for this purpose.
CSS is the way to go.
You can pre-load the images with JavaScript.
WhiteDragon
11-04-2008, 06:29 AM
That is what I mean, what method using CSS could I use ? You have to remember that the tables within the HTML align the images perfectly. I don't want to loose this perfect alignment but I want to convert it to something more better as mentioned then the HTML page that gets spit out from the program after creating the slices.
So what is a more preferred method to convert the tables created after slicing the image?
That would depend on the page layout.
WhiteDragon
11-04-2008, 05:25 PM
What do you mean page layout?
The sliced images form the (partial) page layout.
WhiteDragon
11-05-2008, 06:20 AM
You still lost me, what I'm after is to convert the <tables> in which photoshop spits out for sliced images and convert it to something better and placing that within a <div>. I find the <tables> photoshop spits out old (although I will use if I have too) and would like to use a more better approach.
Layout - structure - template - the site design. This is basically what Photoshop makes for you.
Show what you want to convert.
WhiteDragon
11-05-2008, 07:05 PM
This is the code from a basic image sliced up. Now if I were to use as it is, I would take this code paste it within a <div> and done. Now I would like to convert these split up tables into better more simplier code do you know of a way?
<table id="Table_01" width="300" height="275" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images/Untitled-1_01.png" width="300" height="63" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Untitled-1_02.png" width="300" height="85" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Untitled-1_03.png" width="121" height="127" alt=""></td>
<td>
<img src="images/Untitled-1_04.png" width="179" height="127" alt=""></td>
</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>slices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#slices {width:300px;}
#slices img {vertical-align:bottom;}
</style>
</head>
<body>
<div id="slices">
<img src="images/Untitled-1_01.png" width="300" height="63" alt="">
<img src="images/Untitled-1_02.png" width="300" height="85" alt="">
<img src="images/Untitled-1_03.png" width="121" height="127" alt=""><img src="images/Untitled-1_04.png" width="179" height="127" alt="">
</div>
</body>
</html>
WhiteDragon
11-06-2008, 06:52 PM
So just place the image slices within the div and give it a style sheets as you mentioned and it will work, perfectly ? Just to be double sure :)
Yes, but why you would slice images and than place them in a block is a mystery.
WhiteDragon
11-07-2008, 05:44 PM
What other method is there with image slices?
Other methods to do what exactly?
Victorinox
11-08-2008, 05:53 AM
I find the <tables> photoshop spits out old (although I will use if I have too) and would like to use a more better approach.
Please explain why you find tables being "old" a reason to require a "better approach".
Please explain why you find tables being "old" a reason to require a "better approach".
http://www.hotdesign.com/seybold/
Victorinox
11-08-2008, 07:42 AM
http://www.hotdesign.com/seybold/
Thanks for the link Fang. I'm aware of the issues but more specifically interested in the OP's reasons.
WhiteDragon
11-08-2008, 09:53 AM
Alright, thank you very much. I will either technique and hope it works, as I want it to.
Victorinox
11-08-2008, 10:51 AM
If you find Photoshop a good tool to work with then just go ahead and use the table-based output.
Avoiding tables for layout does not in itself guarantee that your pages will be either accessible or easier to maintain.
Sometimes finishing the job is a wiser course than seeking perfection.
One more table-based layout will not cause the sky to fall.