slicing help plz!

hasnain721 · #1 (**permalink**) Aug 22nd, 2006, 15:00

Hello,
After spending a whole week on a template. i have finally finished it!. I am new to slicing and i dont know any thing about it. I need help. Would appreciate it if some one helps me.
I need to slice this urgently as every thing is ready as in webhosting and domain.
This is what i've come up with: -

Thanks a lot
Cheers!

Legacy_Staff · #2 (**permalink**) Aug 22nd, 2006, 18:38

Nice design m8 but you haven't told us what software you're using, and the question you're asking covers rather a large topic depending on what you want to achieve from slicing.
I use PhotoShop CS (which includes ImageReady). If you use the same, go to 'Help / Photoshop Help'. In the new window, go to the left hand Nav Bar and select 'index' and the 'S' link. Then look at the 'Slice' entries for more info.

The most basic suggestion I can offer is to have you select the 'Slice Tool' and use it to enclose the areas you wish to slice. You will see them appear as slices. If possible try to get the horizontal and vertical lines to line up. This isn't compulsory in any way but may eliminate optential problems further down the line.

hasnain721 · #3 (**permalink**) Aug 22nd, 2006, 18:41

done!!

pretty simple than i thought lolz
Thanks 4 ur help.

Cheers!

*Edit*
So all i hav to do is link up the pages in dreamweaver right?

Legacy_Staff · #4 (**permalink**) Aug 22nd, 2006, 19:31

Ahh, now I don't use Dreamweaver to tie 'em all together but, as I recall, there was another question on that topic in here a few days ago (maybe a couple of weeks). That should help ya.

Incidentally, I found slicing becomes much more powerful when you start to consider it in ImageReady. I rarely slice anything in PhotoShop now. If you're prepared to incorporate a little javascript into your pages you can create some surprisingly eye-catching effects.

hasnain721 · #5 (**permalink**) Aug 22nd, 2006, 21:54

Quote:

Originally Posted by RedSkwirrell

Ahh, now I don't use Dreamweaver to tie 'em all together but, as I recall, there was another question on that topic in here a few days ago (maybe a couple of weeks). That should help ya.

Incidentally, I found slicing becomes much more powerful when you start to consider it in ImageReady. I rarely slice anything in PhotoShop now. If you're prepared to incorporate a little javascript into your pages you can create some surprisingly eye-catching effects.

Yea...i've sliced in image ready as well.
All i did is that i saved a jpeg image from photoshop and then opened the jpg image; clicked on the edit in image ready button and started slicing!

As for the javascript, which javascript do u recommend me to use for a travel agent's site?

*Edit*
Since we are talking about my site,
this is my contact page: -

i wanna know how to code this so that i can use it (i heard i need a script but i dunno how to use it in it.)

Plz reply
Thanks

Legacy_Staff · #6 (**permalink**) Aug 23rd, 2006, 18:30

ImageReady will prepare the javascript you need for you, when you 'save as optimised'. It will create an 'images' file for your slices and a mini html page from where you can cut and paste the bits you need.

hasnain721 · #7 (**permalink**) Aug 23rd, 2006, 19:49

I saved my sliced pages in the same way as u mentioned above and every thing got saved as a image. As for the contact page, how do i make it work?

Legacy_Staff · #8 (**permalink**) Aug 23rd, 2006, 21:48

What do you mean?

Quote:

As for the contact page, how do i make it work?

Taking the question literally, I would suggest starting a new thread in the php or asp forum as it sounds like you're asking about something which will require some SSI's to make a dynamic page. You won't be able to do that from a Graphics viewpoint.

hasnain721 · #9 (**permalink**) Aug 23rd, 2006, 22:55

okie...ic.....
and one more question m8(i knoe that iam bein anoyin) but i dunno y but the sliced html pages dont work very well. The home page works fine but other pages dont. At the moment, only three pages are running out of which two dont load properly: -
http://www.imrastravels.com/hotels.html
and
http://www.imrastravels.com/contact.html
while the homepage works fine.

Plz reply.
Thanks

Legacy_Staff · #10 (**permalink**) Aug 24th, 2006, 00:36

Ohhhhhhhhhh dear.
How much do you know about CSS?
lol

You need to position everything.
(If you change something after you've save the optimised images, you'll need to re-save (I find it easier to delete the original html and image files to make sure there are no errant files there that shouldn't be.
Make sure the sizes are correct and agree with your image sizes.

(I reset my IR to save as CSS rather than html and then use an external CSS file linked to each page of the site using the images)

cperkins · #11 (**permalink**) Aug 24th, 2006, 03:25

Hasnain,

The SiteGrinder Photoshop plug-in can do email forms and it supports both CGI mail forms as well as PHP. But the way it lays out forms is pretty much center-line vertical, not the flush-left two-column design you have. Here's an example of a form it created (top of page) along with what was typed into a Photoshop text layer to get that form: http://www.medialab.com/PWMenus/form...339/index.html

Anyway, you could use the demo version of SiteGrinder to generate the PHP and general Form HTML/CSS for you, transfer that to your page, and then go into the CSS and modify it to match the two column design you are looking for.

Chris Perkins
http://www.medialab.com/sitegrinder

hasnain721 · #12 (**permalink**) Oct 6th, 2006, 19:51

Quote:

Originally Posted by cperkins

Hasnain,

The SiteGrinder Photoshop plug-in can do email forms and it supports both CGI mail forms as well as PHP. But the way it lays out forms is pretty much center-line vertical, not the flush-left two-column design you have. Here's an example of a form it created (top of page) along with what was typed into a Photoshop text layer to get that form: http://www.medialab.com/PWMenus/form...339/index.html

Anyway, you could use the demo version of SiteGrinder to generate the PHP and general Form HTML/CSS for you, transfer that to your page, and then go into the CSS and modify it to match the two column design you are looking for.

Chris Perkins
http://www.medialab.com/sitegrinder

Hi Chris,
This is what i have done: -
firstly, i removed every thing except the text and generated a css document using site grinder. Then i manually sliced every thing (hiding the text layers) and saved it as xhtml.

This is what the xhtml file says: -

Quote:

<!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>
<title>home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<table id="Table_01" width="1025" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="27">
<img id="index_01" src="images/index_01.jpg" width="1024" height="113" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="113" alt="" /></td>
</tr>
<tr>
<td rowspan="26">
<img id="index_02" src="images/index_02.jpg" width="62" height="776" alt="" /></td>
<td colspan="11" rowspan="3">
<img id="index_03" src="images/index_03.jpg" width="565" height="133" alt="" /></td>
<td colspan="15">
<img id="index_04" src="images/index_04.jpg" width="397" height="59" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="3">
<img id="index_05" src="images/index_05.jpg" width="137" height="118" alt="" /></td>
<td colspan="3">
<img id="index_06" src="images/index_06.jpg" width="24" height="18" alt="" /></td>
<td rowspan="8">
<img id="index_07" src="images/index_07.jpg" width="30" height="206" alt="" /></td>
<td>
<img id="index_08" src="images/index_08.jpg" width="27" height="18" alt="" /></td>
<td rowspan="8">
<img id="index_09" src="images/index_09.jpg" width="34" height="206" alt="" /></td>
<td>
<img id="index_10" src="images/index_10.jpg" width="23" height="18" alt="" /></td>
<td colspan="4" rowspan="8">
<img id="index_11" src="images/index_11.jpg" width="122" height="206" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="7">
<img id="index_12" src="images/index_12.jpg" width="24" height="188" alt="" /></td>
<td rowspan="7">
<img id="index_13" src="images/index_13.jpg" width="27" height="188" alt="" /></td>
<td rowspan="7">
<img id="index_14" src="images/index_14.jpg" width="23" height="188" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="56" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img id="index_15" src="images/index_15.jpg" width="565" height="44" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img id="index_16" src="images/index_16.jpg" width="332" height="25" alt="" /></td>
<td colspan="9">
<img id="index_17" src="images/index_17.jpg" width="314" height="23" alt="" /></td>
<td colspan="3" rowspan="4">
<img id="index_18" src="images/index_18.jpg" width="56" height="86" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="9" rowspan="3">
<img id="index_19" src="images/index_19.jpg" width="314" height="63" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img id="index_20" src="images/index_20.jpg" width="295" height="43" alt="" /></td>
<td rowspan="20">
<img id="index_21" src="images/index_21.jpg" width="37" height="574" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img id="index_22" src="images/index_22.jpg" width="295" height="36" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img id="index_23" src="images/index_23.jpg" width="131" height="87" alt="" /></td>
<td colspan="3" rowspan="7">
<img id="index_24" src="images/index_24.jpg" width="65" height="113" alt="" /></td>
<td colspan="5" rowspan="4">
<img id="index_25" src="images/index_25.jpg" width="131" height="87" alt="" /></td>
<td rowspan="18">
<img id="index_26" src="images/index_26.jpg" width="43" height="513" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td rowspan="17">
<img id="index_27" src="images/index_27.jpg" width="12" height="511" alt="" /></td>
<td colspan="7" rowspan="3">
<img id="index_28" src="images/index_28.jpg" width="133" height="85" alt="" /></td>
<td colspan="3" rowspan="5">
<img id="index_29" src="images/index_29.jpg" width="115" height="109" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_30" src="images/index_30.jpg" width="294" height="40" alt="" /></td>
<td rowspan="16">
<img id="index_31" src="images/index_31.jpg" width="1" height="495" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="index_32" src="images/index_32.jpg" width="294" height="35" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img id="index_33" src="images/index_33.jpg" width="131" height="26" alt="" /></td>
<td colspan="5" rowspan="2">
<img id="index_34" src="images/index_34.jpg" width="131" height="24" alt="" /></td>
<td colspan="7" rowspan="2">
<img id="index_35" src="images/index_35.jpg" width="133" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img id="index_36" src="images/index_36.jpg" width="294" height="28" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img id="index_37" src="images/index_37.jpg" width="1" height="134" alt="" /></td>
<td colspan="4" rowspan="3">
<img id="index_38" src="images/index_38.jpg" width="130" height="102" alt="" /></td>
<td colspan="8" rowspan="5">
<img id="index_39" src="images/index_39.jpg" width="134" height="105" alt="" /></td>
<td colspan="2" rowspan="7">
<img id="index_40" src="images/index_40.jpg" width="114" height="125" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>

hasnain721 · #13 (**permalink**) Oct 6th, 2006, 19:52

Quote:

</tr>
<tr>
<td colspan="4" rowspan="3">
<img id="index_41" src="images/index_41.jpg" width="132" height="102" alt="" /></td>
<td colspan="2" rowspan="7">
<img id="index_42" src="images/index_42.jpg" width="64" height="132" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="10">
<img id="index_43" src="images/index_43.jpg" width="294" height="392" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="92" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="5">
<img id="index_44" src="images/index_44.jpg" width="130" height="32" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img id="index_45" src="images/index_45.jpg" width="132" height="19" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img id="index_46" src="images/index_46.jpg" width="134" height="20" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img id="index_47" src="images/index_47.jpg" width="1" height="279" alt="" /></td>
<td rowspan="5">
<img id="index_48" src="images/index_48.jpg" width="128" height="104" alt="" /></td>
<td colspan="2" rowspan="6">
<img id="index_49" src="images/index_49.jpg" width="3" height="279" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="index_50" src="images/index_50.jpg" width="3" height="277" alt="" /></td>
<td colspan="8" rowspan="3">
<img id="index_51" src="images/index_51.jpg" width="133" height="100" alt="" /></td>
<td rowspan="5">
<img id="index_52" src="images/index_52.jpg" width="112" height="277" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td rowspan="4">
<img id="index_53" src="images/index_53.jpg" width="62" height="268" alt="" /></td>
<td colspan="5">
<img id="index_54" src="images/index_54.jpg" width="130" height="84" alt="" /></td>
<td rowspan="4">
<img id="index_55" src="images/index_55.jpg" width="3" height="268" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="84" alt="" /></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img id="index_56" src="images/index_56.jpg" width="130" height="184" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img id="index_57" src="images/index_57.jpg" width="133" height="177" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_58" src="images/index_58.jpg" width="128" height="175" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="175" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="62" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="294" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="128" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="62" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="81" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt="" /></td>
<td></td>
</tr>
</table>

</body>
</html>

and this is what the css file of the text layers says: -

Quote:

#grandcanyon p,
#machupicchusouthamerica p,
#channeltunnelfrance p,
#greatwallofchina p,
#statueoflibertyusa p,
#badshahimasjidpakistan p,
#tajmahalindia p,
#burjalarabdubai p {
font: bold 15px/13px Tahoma;
margin: 0px;
color: #008CD2;
text-align: left;
}

#greatwallofchina,
#machupicchusouthamerica {
visibility: visible;
position: absolute;
left: 394px;
z-index: 2;
width: 202px;
}

#burjalarabdubai,
#badshahimasjidpakistan {
visibility: visible;
position: absolute;
left: 591px;
z-index: 2;
width: 202px;
}

#tajmahalindia,
#grandcanyon {
visibility: visible;
position: absolute;
top: 593px;
z-index: 2;
width: 202px;
}

#machupicchusouthamerica {
top: 722px;
}

#badshahimasjidpakistan {
top: 710px;
}

#imrastravelscom2006 p {
font: 13px/13px Tahoma;
margin: 0px;
color: #7A7D81;
text-align: left;
}

#imrastravelscom2006 {
visibility: visible;
position: absolute;
left: 658px;
top: 792px;
z-index: 2;
width: 236px;
}

#channeltunnelfrance {
visibility: visible;
position: absolute;
left: 774px;
top: 470px;
z-index: 2;
width: 202px;
}

#statueoflibertyusa {
visibility: visible;
position: absolute;
left: 779px;
top: 721px;
z-index: 2;
width: 202px;
}

#greatwallofchina {
top: 591px;
}

#burjalarabdubai {
top: 466px;
}

#tajmahalindia {
left: 588px;
}

#grandcanyon {
left: 779px;
}

#homepage {
margin: 0px auto 0px auto;
width: 1024px;
position: relative;
}

#layer43 {
background: url(homepagemedia/layer43.gif) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 1024px;
height: 889px;
}

html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

Now, how do i link them up together? I have tried importing the css file in dreamweaver but it aint working so i think that there is a problem with the error. Please correct me if iam wrong.

Thanks.
Hasnain

cperkins · #14 (**permalink**) Oct 6th, 2006, 21:31

Hasnain,

Did you use SiteGrinder to output a form? That CSS looks like just plain old text layout to me?

You need to name your layer something-form where -form tells SiteGrinder to make that text layer into a form. And the contents of the text layer need to follow a certain format. (see below)

Then, output the form with SiteGrinder. Then you'll pick out the HTML you need (it'll be obvious: <form>.....</form> ) and paste it into your page. Then find the matching CSS from the CSS file (look for form, fieldset, label, etc.) and add it to your CSS (if you have any, otherwise, add a <style> section to your doc and put it in there. Don't forget to also grab the .php email script that SiteGrinder will generate for you.

Chris

P.S. In SiteGrinder, forms need a certain format. Here's an example:

Code: Select all

Fill Out My Form
name:_________
email:__________
comment:__________
platform: Mac | Win | Linux
(send)

If SiteGrinder sees text like that in a text field that has the -form hint at the end of its name it'll make it into a form. You can choose the PHP email option in the SiteGrinder UI pane and adjust its settings there.

You should probably look at some of the tutorials, and look at the documentation on forms.

http://www.medialab.com/sitegrinder

hasnain721 · #15 (**permalink**) Oct 26th, 2006, 22:58

Hello,
Please accept my apologies for the delay in replying coz i was travelling. Any ways, i have used sitegrinder to generate the css and the xhtml and i have posted the results in my previous post. This would not be my contact page that is why i did not use the form function.

If you show me a example of using css in my layout then i think that i will be able to do the rest. Here is the html file along with this post u can hav a look:

http://www.megaupload.com/?d=BU9TCUGZ

Thanks.

cperkins · #16 (**permalink**) Oct 27th, 2006, 03:04

Hasnain,

The problem with the code you posted before is that they don't match each other. The HTML is from ImageReady and the CSS is from SiteGrinder. There's no way to marry them together for the whole page. Also, the context of this whole thing is to get you a working PHP email form. But you didn't even use SiteGrinder to generate a form you could borrow.

I was suggesting taking _just_ the HTML SiteGrinder generated for the form, and told you how to find it in a SiteGrinder generated page, and drop that into your page. Then go through the CSS that SiteGrinder generated and pull just the form related pieces and use those. If you do that, you'll have essentially taken the SiteGrinder generated form and moved it into your document.

If this is too complex, then just use SiteGrinder to do the whole page or site, then you don't have to worry about slicing, moving HTML and CSS, or any of that. It'll just be done.

Chris

moojoo · #17 (**permalink**) Oct 27th, 2006, 14:28

The tools you are using are just making this much more complicated than it needs to be. I know this post isn't helping anything lol but you would be better off learning how to do it yourself.

hasnain721 · #18 (**permalink**) Oct 27th, 2006, 19:27

Quote:

Originally Posted by moojoo

The tools you are using are just making this much more complicated than it needs to be. I know this post isn't helping anything lol but you would be better off learning how to do it yourself.

lolzzz true! I am in a fix now..dunno wat to do.

moojoo · #19 (**permalink**) Oct 27th, 2006, 19:39

Think of it like this.. Your layout is the following

mast head
left column - right column
footer

HTML Structure Example:

Code: Select all

<div id="container">
<div id="masthead"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>
</div> <!-- close the container div -->

See how much less complicated that is then what you have? Of course the CSS to make it work is a bit more complex but still in the same realm of simplicity.

Visualize it like a grid per say.. your images are just thumbnai

		Webforumz.com > Main Forums > Design Your Website > Graphics and 3D
slicing help plz!