5 Replies Latest reply on Aug 13, 2008 9:25 AM by Newsgroup_User

    Exporting Slices

    dynamite_swordsman@y
      I have dabbled with Fireworks export to HTML and Images for a while now and I only seem to be able to export the sliced images to be coded in the HTML as images within the cell.
      This is not much use to me as it takes much longer to go into Dreamweaver and add the backgrounds to the cells whilst copying the table widths and heights to the cell properties and then assigning a CSS rule of non-repeating background with a position of "0 0". I can do this manually in Dreamweaver but it's a real laborious process which Im trying to avoid. As I understand there is a file which has within in it the instructions for Fireworks export to code the HTML with the appropriate table structure, dimensions etc. The file is located in the %:Program Files\Adobe\Fireworks 8\Configuration\HTML folder and is named styles.htt . Does anyone know how to alter this code in order to produce the HTML with the slice image being the background with a no background repeat rule added in. It may seem a bit of a messy way to ask this but i've included some example text i found on an Adobe page so you can see what I mean and get the idea. _

      PLEASE NOTE: THE COED SHOWN HERE IS NOT PERFECT ITS JUST HERE AS AN EXAMPLE...

      THIS IS TAKEN FROM http://www.adobe.com/devnet/fireworks/articles/fw_html_styles.html


      WRITE_HTML("<table>\n");
      var row, col, slice;
      var rowspan, colspan, imagepath;
      for (row=0; row<slices.numRows; row++) {
      WRITE_HTML("\t<tr>\n");
      for (col=0; col<slices.numColumns; col++) {
      slice = slices[row][col];
      if (slice.skipCell) continue;
      rowspan = slice.rowSpan > 1 ? " rowspan=\""+slice.rowSpan+"\"" : "";
      colspan = slice.columnSpan > 1 ? " colspan=\""+slice.columnSpan+"\"" : "";
      WRITE_HTML("\t\t<td"+rowspan+colspan+">");
      // generate image path
      imagepath = slices.imagesDirPath + slice.getFrameFileName(0) + slice.imageSuffix;
      WRITE_HTML("<img src=\""+imagepath+"\"");
      // add width and height attributes
      WRITE_HTML(" width=\""+slice.width+"\" height=\""+slice.height+"\"");
      WRITE_HTML(" alt=\"image\" />");
      WRITE_HTML("</td>\n");
      }
      WRITE_HTML("\t</tr>\n");
      }
      WRITE_HTML("</table>\n");
      // export images
      "ok";
      This exports something along the lines of the following table:
      <table>
      <tr>
      <td colspan="3"><img src="images/buildings_r1_c1.jpg" width="300" height="75" alt="image" /></td>
      </tr>
      <tr>
      <td rowspan="2"><img src="images/buildings_r2_c1.jpg" width="75" height="225" alt="image" /></td>
      <td><img src="images/center.jpg" width="150" height="150" alt="image" /></td>
      <td rowspan="2"><img src="images/buildings_r2_c3.jpg" width="75" height="225" alt="image" /></td>
      </tr>
      <tr>
      <td><img src="images/buildings_r3_c2.jpg" width="150" height="75" alt="image" /></td>
      </tr>
      </table>


      So anyone got any ideas... heres a tip make a new folder go to the "HTML Code" folder and create a new folder, call it whatever and copy the original "styles.htt" file into it and play about with it. If you need to export using your modified export instructions then go into the export options and select the option in the General tab.

      If anyone can do this please let e know how as I am in need of using it and im trying my best to work it out but me and code arent best friends so any advice is welcome.

      ps. I cant use the html css for what im doing you can ask why but you may find out how boring my life is at times.

      cheers all

      Paul

        • 1. Re: Exporting Slices
          pixlor Level 4
          Fireworks HTML is for mockups and prototypes. The export is quite limited, as Fireworks makes a table replica of your design. That's all it's intended to do. Fireworks is not a visual Web development environment and Fireworks HTML is not for production code.

          What you're describing is something like, "I've been experimenting with my convertible, adding beefier shock absorbers and such so that I can carry loads suitable to a one-ton pickup truck." The convertible has its use, but so does the one-ton pickup truck. When you need to haul a big load, get out the truck. Don't try to make a convertible into something it isn't designed to be.

          Fireworks is great for making Web graphics. When you need to write production code, get out Dreamweaver, similar, or a coder-oriented text editor..


          • 2. Re: Exporting Slices
            Level 7
            pixlor wrote:
            > Fireworks HTML is for mockups and prototypes. The export is quite limited, as
            > Fireworks makes a table replica of your design. That's all it's intended to do.
            > Fireworks is not a visual Web development environment and Fireworks HTML is not
            > for production code.
            >
            > What you're describing is something like, "I've been experimenting with my
            > convertible, adding beefier shock absorbers and such so that I can carry loads
            > suitable to a one-ton pickup truck." The convertible has its use, but so does
            > the one-ton pickup truck. When you need to haul a big load, get out the truck.
            > Don't try to make a convertible into something it isn't designed to be.
            >
            > Fireworks is great for making Web graphics. When you need to write production
            > code, get out Dreamweaver, similar, or a coder-oriented text editor..
            >
            >
            >
            >
            Well put, Lorraine. :-)

            --
            Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
            http://www.communityMX.com/
            CommunityMX - Free Resources:
            http://www.communitymx.com/free.cfm
            ---
            .:Adobe Community Expert for Fireworks:.
            Adobe Community Expert
            http://tinyurl.com/2a7dyp
            ---
            See my work on Flickr
            http://www.flickr.com/photos/jim_babbage/
            • 3. Re: Exporting Slices
              dynamite_swordsman@y Level 1
              hey fear not ive been messing about this way for a while now.. infact you can use fireworks for crating the tables for the presentation of your website... As far as Im concerned if it does something i can use somewhere else then ill use it to its full extent. When i export the html from fireworks i drop it into a centered cell in DW the table created by fireworks and then have to change the code so that the background of the cell is the same filename as what was dropped in there as an image (on which, when in the browser you wouldnt get the "bookmark this page" option). You still have to use the tables but then you can add in some div tags with teh relevant dimensions in order to get teh scroll down the pretend screen thingy... infact ill be putting this site up tonight just so i can show the customer in the morning so heres the link www.mr-wolfs.com/rps/ it will be up there for about a day or two when i stick it up there tonight.

              The thing is by changing the code in the styles.htt folder it could whittle down this process of recoding each cell and instead of creating the html with teh image planted in the the cell just the cell background would have the image. The problem is im not greatwith that sor of code but ill keep trying.
              • 4. Re: Exporting Slices
                pixlor Level 4
                quote:

                Originally posted by: Newsgroup User
                Well put, Lorraine. :-)
                --
                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.



                Thanks, Jim!



                quote:

                Originally posted by: dynamite_swordsman@y
                hey fear not ive been messing about this way for a while now.. infact you can use fireworks for crating the tables for the presentation of your website... As far as Im concerned if it does something i can use somewhere else then ill use it to its full extent. When i export the html from fireworks i drop it into a centered cell in DW the table created by fireworks and then have to change the code so that the background of the cell is the same filename as what was dropped in there as an image (on which, when in the browser you wouldnt get the "bookmark this page" option). You still have to use the tables but then you can add in some div tags with teh relevant dimensions in order to get teh scroll down the pretend screen thingy... infact ill be putting this site up tonight just so i can show the customer in the morning so heres the link www.mr-wolfs.com/rps/ it will be up there for about a day or two when i stick it up there tonight.

                Sure. It works. Kinda. Sorta. View>Source is ugly. Why is your style sheet not external? Why are you not making a template in Dreamweaver? Why, in the name of my sister's new kitten, do you have image names like 12_slice and 13_slice? This code is not maintainable.

                Aside from that, the W3C Markup Validation Service gives you 3 errors (= your HTML is wrong) while the W3C CSS Validation Service gives you 5 errors and 6 warnings. Build in Dreamweaver and that's less likely to happen to you. Do you really want to go live with stuff like that hanging out?

                quote:

                The thing is by changing the code in the styles.htt folder it could whittle down this process of recoding each cell and instead of creating the html with teh image planted in the the cell just the cell background would have the image. The problem is im not greatwith that sor of code but ill keep trying.


                Uh huh. You're complaining about how much effort it is to do things right, when you're actually spending more time trying to hack up some moderately fragile code rather than use a robust, heavily-tested program to do things right. That makes no sense to me. I like "Red Green" as much as the next crazy person, but this is just...silly.
                • 5. Re: Exporting Slices
                  Level 7

                  "pixlor" <webforumsuser@macromedia.com> wrote in message
                  news:g7qumk$26p$1@forums.macromedia.com...
                  |
                  quote:

                  Originally posted by: Newsgroup User
                  | Well put, Lorraine. :-)
                  | --
                  | Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                  |

                  |
                  | Thanks, Jim!

                  I think it would be a good idea if Adobe set up an automated message that is
                  sent on a daily basis, saying the same thing :-)

                  Peter
                  ________________