PDA

View Full Version : CSS based Blog, from slices?



etherbend
Jan 21st, 2010, 07:27 PM
Greetings,

I created a site from photoshop using the slices feature. I realize this is a cardinal sin, to some. I am not versed in the ways of code. I am a designer, that has to do web stuff occasionally. So I apologize for my nube-ness.

For one of the pages, my client woulld like there to be a simple, live html text, blog style text box.

As it stands now, the entire site is flattened, sliced images, text included. The links are dreamweaver "hotspots", or rollovers. I have (2) flash movies that vertically pillar the left and right side of the site, for a star field animation.

This is the current BLOG page (http://etherbend.com/keaton/blog.html)

http://etherbend.com/sample.png

I would like to find a way to keep the flash pillars, and the rollover navigation, and add a scroll based text box, with the COURIER as the font and potentially a different color scroll bar, or better yet, a custom one.

Not sure where to start. I assume, the blog.html page will need to be completley redone in CSS and have no idea how to do this, while keeping the flash pillars, or what should be background...

I do not know CSS well enough to plan out how it should be handled. It seems, like it shouldn't be so difficult but I am baffled by code. Any detailed help would be greatly appreciated. Thanks in advance! :thumbsup:


<html>
<head>
<title>Chris Keaton</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-image: url(images/back.jpg);
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/index_09.gif','images/index_10.gif','images/index_11.gif','images/index_12.gif','images/index_13.gif')">
<div align="center">
<!-- ImageReady Slices (MASTER_ARTWORK_BLOG.psd) -->
<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','93','height','600','src','images/left_gif','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/left_gif' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="93" height="600">
<param name="movie" value="images/left_gif.swf">
<param name="quality" value="high">
<embed src="images/left_gif.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="93" height="600"></embed>
</object></noscript></td>
<td colspan="2">
<img src="images/blog/blog_02.gif" alt="" width="212" height="63" border="0" usemap="#Map2MapMap">
<map name="Map2MapMap">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
<td colspan="3">
<img src="images/blog/blog_03.gif" alt="" width="212" height="63" border="0" usemap="#Map2MapMapMap">
<map name="Map2MapMapMap">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
<td colspan="2">
<img src="images/blog/blog_04.gif" alt="" width="190" height="63" border="0" usemap="#Map2MapMapMap2">
<map name="Map2MapMapMap2">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
<td rowspan="4"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','93','height','600','src','images/right_gif','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/right_gif' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="93" height="600">
<param name="movie" value="images/right_gif.swf">
<param name="quality" value="high">
<embed src="images/right_gif.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="93" height="600"></embed>
</object></noscript></td>
</tr>
<tr>
<td colspan="2">
<img src="images/blog/blog_06.gif" alt="" width="212" height="67" border="0" usemap="#Map2MapMapMap3">
<map name="Map2MapMapMap3">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
<td colspan="3">
<img src="images/blog/blog_07.gif" alt="" width="212" height="67" border="0" usemap="#Map2MapMapMap4">
<map name="Map2MapMapMap4">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
<td colspan="2">
<img src="images/blog/blog_08.gif" alt="" width="190" height="67" border="0" usemap="#Map2MapMapMap5">
<map name="Map2MapMapMap5">
<area shape="rect" coords="2,3,217,66" href="index.html">
</map></td>
</tr>
<tr>
<td><a href="work.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','images/index_09.gif',1)"><img src="images/keaton_09.gif" name="Image25" width="125" height="20" border="0"></a></td>
<td colspan="2"><a href="films.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','images/index_10.gif',1)"><img src="images/keaton_10.gif" alt="" name="Image26" width="103" height="20" border="0"></a></td>
<td><a href="http://www.chris-keaton.com/blog.html" target="_blank" onMouseOver="MM_swapImage('Image27','','images/index_11.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/keaton_11.gif" alt="" name="Image27" width="106" height="20" border="0"></a></td>
<td colspan="2"><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','images/index_12.gif',1)"><img src="images/keaton_12.gif" alt="" name="Image28" width="102" height="20" border="0"></a></td>
<td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','images/index_13.gif',1)"><img src="images/keaton_13.gif" alt="" name="Image29" width="178" height="20" border="0"></a></td>
</tr>
<tr>
<td colspan="7">
<img src="images/blog/blog_14.gif" width="614" height="450" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="125" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="106" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="178" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>

Excavator
Jan 21st, 2010, 09:10 PM
Hello etherbend,
I'm not much good at tables, see the link about tables in my sig below, and I'm not a fan of slicing up images either.
This might help though - You'll need to add a div with dimensions and set overflow to auto so it will scroll when it fills up with text.

Add this bit to your markup -

<td colspan="2"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','images/index_12.gif',1)"><img src="http://etherbend.com/keaton/images/keaton_12.gif" alt="" name="Image28" width="102" border="0" height="20"></a></td>
<td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','images/index_13.gif',1)"><img src="http://etherbend.com/keaton/images/keaton_13.gif" alt="" name="Image29" width="178" border="0" height="20"></a></td>
</tr>
<tr>
<td colspan="7">
<div id="scroller">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end scroller--></div>
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" alt="" width="93" height="1"></td>
<td>

And add the bit that controls it to your CSS -
<!--
body {
background-image: url(images/back.jpg);
}
#scroller {
height: 450px;
width: 614px;
overflow: auto;
background: #f00; /*for testing only*/
}
-->


While your looking at links in my sig, check out the one about DocTypes and the links about validation as well.

etherbend
Jan 21st, 2010, 10:06 PM
Hello etherbend,
I'm not much good at tables, see the link about tables in my sig below, and I'm not a fan of slicing up images either.
This might help though - You'll need to add a div with dimensions and set overflow to auto so it will scroll when it fills up with text.

While your looking at links in my sig, check out the one about DocTypes and the links about validation as well.

Wow, thanks for the thorough response. Unfortunatley, I am a total, moron, when it comes to code. I have know idea what you have written and do not understand the idea of useing a "div" or how to even go about any of the things you've described.

I guess, a forum like this requires some prerequisite knowledge, of which I do not have.

Again, thanks so much for taking the time to post. I totally appreciate it. I just wish I understood it... lol.

Back to the drawing board...

Excavator
Jan 22nd, 2010, 01:55 AM
I guess, a forum like this requires some prerequisite knowledge, of which I do not have.

Again, thanks so much for taking the time to post. I totally appreciate it. I just wish I understood it... lol.

Back to the drawing board...

In the code quoted in the above post - the black text is your original, the red stuff is what I added.
All you'll need to do is copy the red highlighted text and paste it into your code in the same spot I have it.

It sounds like you should make a backup to revert back to if it all goes wrong.

etherbend
Jan 22nd, 2010, 03:27 AM
In the code quoted in the above post - the black text is your original, the red stuff is what I added.
All you'll need to do is copy the red highlighted text and paste it into your code in the same spot I have it.

It sounds like you should make a backup to revert back to if it all goes wrong.

Oh, okay. Thanks. Just wondering about the CSS part, as my site is in HTML... should it be in CSS? I'm not sure how to put the three elements together in CSS...

The 2 flash pillars and the center "background" image. (They are are all sliced together to give the effect that it is a piece of paper floating through space.... CLICK FOR EXAMPLE (http://www.etherbend.com/blogtest) This is a three column HTML table with flash pillars on each side, then a big strip in the middle, set as the background image for that center column of the table.

I am guessing I should remove the >>BACK >>MORE flat text, as I can probably just put it in live... once I figure out how... lol.

I just need to figure out a way to do it so the background doesn't repeat, but instead I get a scroll bar, where only the text moves, etc.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
<!--
body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:
0px; padding:0px; }
-->
</style>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BLOGAGE</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-image: url(images/back.jpg);

</style></head>

<body>
<div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="93"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','93','height','600','src','images/left_gif','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/left_gif' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="93" height="600">
<param name="movie" value="images/left_gif.swf" />
<param name="quality" value="high" />
<embed src="images/left_gif.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="93" height="600"></embed>
</object></noscript></td>
<td width="614" background="images/blogback.gif">&nbsp;</td>
<td width="93"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','93','height','600','src','images/right_gif','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/right_gif' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="93" height="600">
<param name="movie" value="images/right_gif.swf" />
<param name="quality" value="high" />
<embed src="images/right_gif.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="93" height="600"></embed>
</object></noscript></td>
</tr>
</table>
</div>
</body>
</html>

etherbend
Jan 22nd, 2010, 03:54 AM
I owe an apology.

It work stellar Your original instructions. I just need to figure out the background not repeating...

but I figured out how to implement your code. It was perfect actually.

=)

Excavator
Jan 22nd, 2010, 03:59 AM
I owe an apology.

It work stellar Your original instructions. I just need to figure out the background not repeating....

=)


<!--
body {
background: url(images/back.jpg) no-repeat;
}
#scroller {
height: 450px;
width: 614px;
overflow: auto;
}
-->

etherbend
Jan 22nd, 2010, 04:23 AM
<!--
body {
background: url(images/back.jpg) no-repeat;
}
#scroller {
height: 450px;
width: 614px;
overflow: auto;
}
-->

THANKS! Check it out.... http://etherbend.com/keaton/blog99.html

Do you know how I might pull the text box in from the sides and down from the top a bit?
How and where do I control that?

Also would love to know how to change the font to COURIER?
Size and color control?

Add a link? Name it?

Add an image? Position and size it?

I realize these are very basics, but If I know them, I will have a huge understanding of how to work within the mechanic you have shown me. I am going to make great use of it. Thanks allot!


Almost done... =) thanks a milion!!!

Excavator
Jan 22nd, 2010, 04:58 AM
Do you know how I might pull the text box in from the sides and down from the top a bit?
How and where do I control that?




Normally you'd just set height/width to suit and position it with margins. You're using tables though and, like I said before, I don't know anything about tables. See the link in my sig about tables to see why.

Doctor_Varney
Jan 22nd, 2010, 07:53 AM
I have know idea what you have written and do not understand the idea of useing a "div" or how to even go about any of the things you've described.

I created a site from photoshop using the slices feature. I realize this is a cardinal sin, to some.
Not to me it isn't - but only so long as it's a friendly client and not one whose paying for a web-standards compliant product. That said, I absolutely love your design and attention to detail.

I use the slice feature a lot but I don't respect some of the code it creates. I use image-slicing just to save the images. I'm currently experimenting with using imagery instead of 'real text', but the text is still in there, for the sake of search engines, but not immediately readable by the browser.

If you have to do this, then I'd suggest using a simple div-based mark-up (inspect the code CS2 creates, in Notepad, and you'll see how page-divisions (divs) work) and create a simple stylesheet to position them (which it looks like you're attempting). With those images, expressed as backgrounds of the divs, you can set this up to work for you in a way, you might find vaguely familiar with layers and slices. You really shouldn't use tables unless you intend to display tabular data; much less allow an image editor to make them for you.

Edit: You know, you can use both the Photoshop measure tool and make slices, to determine the where's and widths of your margins.

It's possible your client will like you even more, if you do manage to create something roughly standards-compliant, which would turn out to be a pleasant surprise, when Mr. Keaton hits Google and witnesses his page load at a respectable speed...

Dr. V

etherbend
Jan 23rd, 2010, 02:20 AM
If you have to do this, then I'd suggest using a simple div-based mark-up (inspect the code CS2 creates, in Notepad, and you'll see how page-divisions (divs) work) and create a simple stylesheet to position them (which it looks like you're attempting). With those images, expressed as backgrounds of the divs, you can set this up to work for you in a way, you might find vaguely familiar with layers and slices. You really shouldn't use tables unless you intend to display tabular data; much less allow an image editor to make them for you.
Dr. V

Thanks for the compliments. Yes, I have been trying to figure out how to reassemble slices using "div's". I only use tables because it is so effortless to place flash files and slices.

I do realize that it's the waaay old guard and want to figure it out.
The idea of having a nice style block controlling is also a skill I could make much use of.

Is there a place I could be pointed to learn how to assemble, images with divs? The source code looks like Chinese to me.
Also, how to implement a basic css block? I'm guessing if I rebuild the page without tables, and the use of div's instead, I can then trim the edges of the text box, without throwing off the seamlessness of the images.

ie - If I mess with any padding as of now (in table land), all images are separated.

I did read your sig, but it is a bit over my head. I get that they are less flexible, I guess that's the main sentiment. =) So thanks allot for the reply. It was very helpful to read what I was thinking, but just do not know the jargon to express clearly, yet. :cool:

Doctor_Varney
Jan 23rd, 2010, 07:33 PM
Is there a place I could be pointed to learn how to assemble, images with divs? The source code looks like Chinese to me.
Also, how to implement a basic css block? I'm guessing if I rebuild the page without tables, and the use of div's instead, I can then trim the edges of the text box, without throwing off the seamlessness of the images.

ie - If I mess with any padding as of now (in table land), all images are separated.



Make an image similar to this and slice, as I have.
http://i183.photobucket.com/albums/x103/Doctor_Varney/cs2test.jpg

Now when you use 'Save For Web' and the preview dialogue comes up, go to the Optimization Menu and choose 'Edit Output Settings'.

Choose 'Slices' from the second drop down. Check the radio button that says: 'Generate CSS' (instead of 'Generate Table'). Set up your preferred slice-naming convention.

Now when you come to the save dialogue, allowing 'All Slices', choose 'HTML & Images' (as you normally do).

Now find the files on your computer and open the HTML document in Notepad. Have a good look at the code it's created. Notice that now, instead of the usual table structure, you'll see this:


<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Untitled-1) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1130px;
height:1170px;
}

#cs2test-01 {
position:absolute;
left:0px;
top:0px;
width:1130px;
height:68px;
}

#cs2test-02 {
position:absolute;
left:0px;
top:68px;
width:145px;
height:279px;
}

#cs2test-03 {
position:absolute;
left:145px;
top:68px;
width:811px;
height:277px;
}

#cs2test-04 {
position:absolute;
left:956px;
top:68px;
width:174px;
height:1102px;
}

#cs2test-05 {
position:absolute;
left:145px;
top:345px;
width:309px;
height:2px;
}

#cs2test-06 {
position:absolute;
left:454px;
top:345px;
width:241px;
height:825px;
}

#cs2test-07 {
position:absolute;
left:695px;
top:345px;
width:261px;
height:2px;
}

#cs2test-08 {
position:absolute;
left:0px;
top:347px;
width:142px;
height:823px;
}

#cs2test-09 {
position:absolute;
left:142px;
top:347px;
width:312px;
height:823px;
}

#cs2test-10 {
position:absolute;
left:695px;
top:347px;
width:2px;
height:823px;
}

#cs2test-11 {
position:absolute;
left:697px;
top:347px;
width:258px;
height:823px;
}

#cs2test-12 {
position:absolute;
left:955px;
top:347px;
width:1px;
height:823px;
}


</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Untitled-1) -->
<div id="Table_01">
<div id="cs2test-01">
<img src="images/cs2test_01.jpg" width="1130" height="68" alt="">
</div>
<div id="cs2test-02">
<img src="images/cs2test_02.jpg" width="145" height="279" alt="">
</div>
<div id="cs2test-03">
<img src="images/cs2test_03.jpg" width="811" height="277" alt="">
</div>
<div id="cs2test-04">
<img src="images/cs2test_04.jpg" width="174" height="1102" alt="">
</div>
<div id="cs2test-05">
<img src="images/cs2test_05.jpg" width="309" height="2" alt="">
</div>
<div id="cs2test-06">
<img src="images/cs2test_06.jpg" width="241" height="825" alt="">
</div>
<div id="cs2test-07">
<img src="images/cs2test_07.jpg" width="261" height="2" alt="">
</div>
<div id="cs2test-08">
<img src="images/cs2test_08.jpg" width="142" height="823" alt="">
</div>
<div id="cs2test-09">
<img src="images/cs2test_09.jpg" width="312" height="823" alt="">
</div>
<div id="cs2test-10">
<img src="images/cs2test_10.jpg" width="2" height="823" alt="">
</div>
<div id="cs2test-11">
<img src="images/cs2test_11.jpg" width="258" height="823" alt="">
</div>
<div id="cs2test-12">
<img src="images/cs2test_12.jpg" width="1" height="823" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

There is some CSS in there at the top, but it's commented out. The important thing to note here, is that if you look at one of these divs, for instance:


#cs2test-09 {
position:absolute;
left:142px;
top:347px;
width:312px;
height:823px;
}

you will notice that the top and left positions actually correspond to the x-y positions of the slice you created, of the same name.

Basically, each slice, instead of being expressed as a table cell, is now expressed as a div.

Look further down at the HTML and you will see:

<div id="cs2test-02">
<img src="images/cs2test_02.jpg" width="145" height="279" alt="">
</div>

and there are the divs, expressed in the HTML, instead of that messy table it used to create.

Now, if you take just ONE of those HTML divs and it's corresponding CSS style and examine them together, this will no longer appear as Chinese.

The div gets instructions from it's corresponding style and it does this because of it's IDENTIFIER, which is always a # symbol.

So, wherever you see: <div id="name_of_div"> in the HTML, you will see #name_of_div {position:absolute, etc} in the CSS stylesheet.

What you need to do now is visit W3C Schools http://www.w3schools.com/. By using the search facility, you can find advice on each area of code, broken down into rules and tags, which you can copy into your own document and tweak how you want it.

Yeah, Photoshop will create divs for you instead of tables - but ideally you want to learn how to do this yourself. When you double click a slice with the Slice Select tool, you will be able to get the x-y positions and width and height, which you can use when designing with your own code.

Okay, so Photoshop makes it all for me, why bother writing code? The answer to that is that Photoshop doesn't write very clean or flexible code. It's just a framework, to get you started. If you approach this intelligently, you can soon learn to streamline the code and export only the slices you need, instead of saving them all. Then, you only have to position those few slices you actually need, in your stylesheet, to make the page work.

You will be able to design standards-compliant pages which load fast and work well in search engines.

Use W3C Schools to learn new types of positioning and the use of margins, instead of the 'Position:Absolute' Photoshop creates.

Plus, if you do that, you'll find a hell of a lot more support in the forums, for a CSS problem, than for a broken table.

Hope this helps.

Dr. V

Doctor_Varney
Jan 23rd, 2010, 07:40 PM
One other source I should mention is:
http://notepad-plus.sourceforge.net/uk/site.htm
A brilliant little code editor which colours different aspects of the code, making it easy to correct mistakes and see where you are in a sea of code. Doesn't take up much space on your drive, has it's own explorer and allows you to preview your edits in a range of browsers.

Dr. V