Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Mumbai
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Slicing of photoshop layout to html

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Neha Shah (08-29-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Mumbai
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    link is here.

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

    can you suggest me the software which can help?

    Can I use <frame>

    Can anybody enlighten on frame tag?
    Last edited by Neha Shah; 08-28-2008 at 06:27 AM.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by Neha Shah View Post
    link is here.

    http://www.gcsautomation.com/prince/...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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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>

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Quote Originally Posted by Codee View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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):

    Code:
    <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.

  • #11
    New Coder
    Join Date
    Aug 2008
    Location
    Chester, United Kingdom
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post
    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
    UK Marketing Agency, developing brand identities to company websites - Please view www.suttonsilver.co.uk


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •