Slicing Into DIVs, rather than Tables

topic posted Tue, August 12, 2008 - 12:08 PM by  Here & There
First off, I am not sure if this is more appropriate to a web design or graphic design tribe so I am sorry if this is indeed OT.

Im wondering if there is a way to make use of the Photoshop slice feature in reference to div tags (rather than a tabled layout). Im new at Photoshop slices but am finding it useful to slice some of the images up in my layout. Still, it always outputs HTML code in table form (rather than divs). Im using CS3. Is there any setting that will help get it to DIVs rather than tables?
  • Re: Slicing Into DIVs, rather than Tables

    Tue, August 12, 2008 - 11:30 PM

    When you choose Save For Web from PS:
    -- Hit Save in the dialog box
    -- Near the bottom of the Save dialog box, choose "HTML" or "HTML and Images" from Format dropdown
    -- From settings choose "Other"
    -- Second drop down menu in window with HTML at top of list, choose "Slices"
    -- Click "Generate CSS" radio buttom.
    -- As long as your slices are fairly neat, it generates fairly neat HTML/CSS...

    course, my two cents: better to just write the code yourself...

    Good luck.
    • Re: Slicing Into DIVs, rather than Tables

      Wed, August 13, 2008 - 6:05 AM
      Thanks so much!

      >>>course, my two cents: better to just write the code yourself... >>

      Agreed. I just am finding it handy in some areas. Either way, definitly will be checking the code on that. Oh, and there are probably a ton of people out there who, upon deciding to try for DIVs vs tables, had some sort of method to convert a site they did in tables to look the same (or almost the same) but with DIVS
  • Re: Slicing Into DIVs, rather than Tables

    Wed, August 13, 2008 - 9:25 PM
    hi kat - im in agreement - when you use the "slice tool " in photoshop - the next step is the process of saving for web/devices this process actually boots up image ready - and you can adjust /compress your images withing inches of there lives bet NEVER ever ever ever let image ready write your html for you - its awful -choose the save images only feature and save yourself and others from a worlf of image readyrandom code gliches and large patches of image that could be better generated as code ....

    but this is not really an answer to your question - more of a small process issue
    i still use photoshop slices and i havent made a table based layout in a while ....
    at first slice as you would a table but eventally you will learn more css and be able to use tranperency ,z indexs and overlaps and this does require a different approch to slicing up your stuff - in fact some stuff may not need to be "sliced " in the traditional sences - check out these rollovers for instance .....
    wellstyled.com/css-noprel...lovers.html
    • Re: Slicing Into DIVs, rather than Tables

      Thu, August 14, 2008 - 9:43 AM
      Totally understand what you mean, wolf. In my case, Im doing slicing (and the subsequent coding) for a *template* rather than a from-scratch webpage. In addition, Im kind of stuck with t ables at least for now. This is because of how the programmers have designed the functionality of our software.

      Just like my attitude about Dreamweaver, I like the idea that maybe Photoshop slicing will serve as a guide (rather than an "in the box" ultimate solution). The way that Photoshop outputs the Table code as well as the CSS (thanks to the first poster on this thread, it worked great!) will at least help me achieve what I want. One of my other designs (and you can see the nightmare from the first image in this tribe's gallery) might be solved by learning from this (yes, that site still isnt done because the right side wont behave)