...

View Full Version : Slicing of photoshop layout to html



Neha Shah
08-27-2008, 07:39 AM
hi,

I am desiging a website in photoshop.Basic layout is ready.I have used slice tool in order to convert it into html format.

But when i open that html in dreamweaver and add my text the design is breaking (if straight line is sliced in pieces then that line is breaking.

Flexibility of the page is required in website eg. about us page is very long & contact us page is very small in height.

I am facing problem in about us page height.My layout is breaking.

thanks in advance.

_Aerospace_Eng_
08-27-2008, 08:07 AM
Don't use tables and don't rely on a program to generate the code for you. You will need to code the site by hand.

Also how are we supposed to even help you if you don't post any code or even a link to your site?

Neha Shah
08-27-2008, 11:47 AM
link is here.

http://www.gcsautomation.com/prince/princetona/innerpage.html

can you suggest me the software which can help?

Can I use <frame>

Can anybody enlighten on frame tag?

jerry62704
09-04-2008, 09:04 PM
link is here.

http://www.gcsautomation.com/prince/princetona/innerpage.html

can you suggest me the software which can help?

Can I use <frame>

Can anybody enlighten on frame tag?

<frame> defines the source code for a <frameset>. I use to use this back in the mid-90s, but dropped it. I think you would do better without it, but your results may vary.

_Aerospace_Eng_
09-05-2008, 05:17 PM
There really is no software that can help because it won't do it properly as you can see. You will need to study html and css. You need to code it by hand. No program will do what you want. Bottom line is again hand code it. If you don't know how or don't have the time to do so then consider hiring someone.

Codee
09-05-2008, 09:24 PM
You need to re-code the layout a bit.
Because when you save it and open it on your program, you can't add texts.
Your html code is something like this from the beginning:
<tr>
<td rowspan="2">
<img src="images/picture.png" width="200px" height="200px"></td>
</tr>

Then you need to change it to:
<tr>
<td rowspan="2" background="images/picture.png" width="200px" height="200px"></td>
</tr>

ThirdDash
09-06-2008, 07:24 AM
I'd suggest using Fireworks to slice and PS to design the template. I find the slicing tool in Fireworks is a lot simplier to use and has some very nifity features that PS doesn't. Also, you will need to have a decent grasp of CSS when you transfer them from slices to the actual site.

Don't use tables, Don't go for complicated designs if you're starting out...and don't use programs to do the job for you. They add bulky code which slows down the site.

Fireworks does actually have a export to HTML feature which will place all your images into tables once you have sliced them, but again I would not recommend using this as it's not how the professionals do things.

Learn the basics of CSS, then play around with PS and Fireworks and you'll find the job is not that difficult.

ThirdDash
09-06-2008, 07:25 AM
I'd suggest using Fireworks to slice and PS to design the template. I find the slicing tool in Fireworks is a lot simplier to use and has some very nifity features that PS doesn't. Also, you will need to have a decent grasp of CSS when you transfer them from slices to the actual site.

Don't use tables, Don't go for complicated designs if you're starting out...and don't use programs to do the job for you. They add bulky code which slows down the site.

Fireworks does actually have a export to HTML feature which will place all your images into tables once you have sliced them, but again I would not recommend using this as it's not how the professionals do things.

Learn the basics of CSS, then play around with PS and Fireworks and you'll find the job is not that difficult.

abduraooft
09-06-2008, 07:38 AM
You need to re-code the layout a bit.
Because when you save it and open it on your program, you can't add texts.
Your html code is something like this from the beginning:
<tr>
<td rowspan="2">
<img src="images/picture.png" width="200px" height="200px"></td>
</tr>

Then you need to change it to:
<tr>
<td rowspan="2" background="images/picture.png" width="200px" height="200px"></td>
</tr> Have a look at
Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/)

yanksno1
09-06-2008, 07:28 PM
I highly suggest you don't use Photoshop or Fireworks to create the html for you. Photoshop especially does a really awful job creating html. It throws everything into one table, so if you try to adjust it by 1 pixel it'll totally break up your layout. I REALLY, REALLY, REALLY and I mean REALLY hate Photoshop's html.

I suggest using Photoshop to create the images (using slices), then using Dreamweaver to build your site. Be sure to use the option just export the images and no html. It's really easy, especially if you're using tables. To create a new table on a page, go to on the menu, Insert --> Table. Just be sure to do a <td valign="top"> on your TD's because if you build it for expansion the images and stuff will align top (unless you specifically want something to align on the bottom or middle). This is an example of how a table should look like (IMO):


<table width="801" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">&nbsp;</td>
</tr>
</table>

One thing I also like doing for tables and divs is breaking every section into their own table or div. This way, if you have to update it later it's easy to update cause they have the same code on every page and you can just update that specific section. Using dreamweaver's find and replace with a directory, it's great to easily update your entire site with in seconds for that one section your updating.

So for yours, I'd have one outer table wrapping everything. You'd have 3 rows for the outer table. One of those rows (the middle one) will have 2 columns. Merge the top and bottom rows by using dreamweaver and align the left section accordingly (of the middle row). Then in the top row, you'd have another table for the header section. You'd probably want to split that up into 2 colums, 2 rows each. Merge the left column on the top and bottom and you should be good to go. In the middle row of your outer table, in the left column you'd have another table for your left section. On the right column, you'd probably want to use a table for that column too. Then on the bottom row of the outer table, that's where you'd put the footer section. Looking at the layout of the footer, your choice to have a table wrap for that section. You probably can just leave it in the main <td>.

And keep in mind, if you're designing the site for a 800x600 screen your site will be a bit too big. You probably want to keep it less then 780 wide or so for that resolution. I agree with the other poster, brush up on CSS to help make your site look pretty. Hope this helps.

sutton silver
09-08-2008, 04:01 PM
Get some 2-column/3column CSS layouts downloaded...

Mess about with all of the corresponding aspects within the CSS code, and experiment/learn to see what each aspect does...

Then only slide the attributes of your PSD that you need (the key graphics) the build the website, from the top to the bottom using your slides and your new found knowledge of CSS!

Failing that, hire me to do :)

Chris SS



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum