5 Replies Latest reply on Jan 12, 2009 10:41 AM by IanJG

    Slicing and dicing with FW CS4?

    IanJG
      Hi there,

      I am having a few issues understanding FW CS4 and where it fits in the market, but i think i am understanding it now and was looking for some confirmation and advice.

      Basically i have created my website in PS CS4 and i am ready to slice and dice which i would normally do in PS but weather i am missing something it appears that once i export to html and slices i will need to edit the CSS and fine tune it i.e. Absolute positioning, etc etc..

      It appears FW CS4 supports more advanced slicing features ... so i was wondering if i do the following, is this considered the recommended way ??

      Create my design etc in PS (due to it being quite advanced - and i just don't see the same features in FW)
      Import my PSD into FW CS4
      Slice in FW and export after customising each DIV etc

      I don't know if anyone can help me here????

      Is this right? or should i still do my slicing in PS?? I presume not as FW seems more powerful

      FW also seems to support exporting to EXTERNAL css file...

      I look forward to any info anyone can offer
        • 1. Re: Slicing and dicing with FW CS4?
          Level 7
          IanJG wrote:

          > Create my design etc in PS (due to it being quite advanced - and i just don't
          > see the same features in FW)
          > Import my PSD into FW CS4
          > Slice in FW and export after customising each DIV etc

          I recommend that you try it this way:

          Create the Web page mockup in Fireworks rather than in Photoshop. Slice
          and dice in Fireworks. Export the slices to the assets folder of a site
          you have properly defined in Dreamweaver. Build the HTML page(s) in
          Dreamweaver.

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: Slicing and dicing with FW CS4?
            IanJG Level 1
            Hi there,

            Thank you for your reply... Great..

            Ok ... you say build the HTML pages in dreamweaver.. but FS CS4 will export the html for me with an external style sheet.... SO i presume i need to fine tune it - in this case no?

            I presume FW CS4 uses absolute postioning etc??

            If i was not to export an html file and try and build an html file with all my assets it would be a bit difficult, due to the number of slices - no?

            So i would use the html that was exported to either fine tune it or use it as reference etc

            I presume its better to have all images as "background" images on a div etc, does FW CS4 take care of this?? if so how?? ... otherwise i presume i just need to edit the css manually?

            Thanks again..
            • 3. Re: Slicing and dicing with FW CS4?
              Level 7
              IanJG wrote:
              > Hi there,
              >
              > Thank you for your reply... Great..
              >
              > Ok ... you say build the HTML pages in dreamweaver.. but FS CS4 will export
              > the html for me with an external style sheet.... SO i presume i need to fine
              > tune it - in this case no?
              >
              > I presume FW CS4 uses absolute postioning etc??
              >
              > If i was not to export an html file and try and build an html file with all my
              > assets it would be a bit difficult, due to the number of slices - no?
              >
              > So i would use the html that was exported to either fine tune it or use it as
              > reference etc
              >
              > I presume its better to have all images as "background" images on a div etc,
              > does FW CS4 take care of this?? if so how?? ... otherwise i presume i just need
              > to edit the css manually?
              >
              > Thanks again..
              >

              I agree with Linda regarding the creation of the design. If there is
              something in particular you are trying to do in PS and can't find the
              equivalent in FW, please let us know.

              If you follow the guidelines in the tutorials below, FW will generate a
              relatively positioned layout, using floats. If objects (slices, text or
              rectangles) overlap, FW switches to Absolute Positioning.

              If you are planning to use the CSS and images export in Fireworks, I
              strongly recommend you read the tutorials listed below. Chances are,
              yes, you will need to fine tune the CSS after exporting from Fireworks.

              >>> So i would use the html that was exported to either fine tune it
              or use it as reference etc

              It could go either way, but I think you would have a better chance using
              the CSS generated from FW by installing the new CSS export script (3rd link)

              >>>I presume its better to have all images as "background" images on a
              div etc, does FW CS4 take care of this?? if so how?? ... otherwise i
              presume i just need to edit the css manually?

              If the graphics are just cosmetic then yes, it's probably a good idea to
              set them as background images. FW has both foreground and background
              slices. You choose which you want from the Property inspector. FW will
              export them accordingly.

              Basic intro:
              http://www.adobe.com/designcenter/fireworks/articles/lrvid4238_fw.html

              Detailed explanation:
              http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

              Advanced, with an updated CSS export script:
              http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

              HTH

              --
              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
              ---
              .:Author:.
              Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
              Peachpit Press -
              http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
              Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
              • 4. Re: Slicing and dicing with FW CS4?
                Level 7
                IanJG wrote:
                > Hi there,
                >
                > Thank you for your reply... Great..
                >
                > Ok ... you say build the HTML pages in dreamweaver.. but FS CS4 will export
                > the html for me with an external style sheet.... SO i presume i need to fine
                > tune it - in this case no?

                The markup that Fireworks generates is fine for demo pages, but not
                recommended for actual Web sites.

                > If i was not to export an html file and try and build an html file with all my
                > assets it would be a bit difficult, due to the number of slices - no?

                You only need to export the bits that will be used as images on the Web
                page. The logo, for example, or an anchor image.

                You'll find lots of great articles on how to build Web pages with
                Dreamweaver here:

                http://www.adobe.com/devnet/dreamweaver/

                --
                Linda Rathgeber - Adobe Community Expert
                http://www.adobe.com/communities/experts/members/8.html
                --------------------------------------------------------------
                • 5. Re: Slicing and dicing with FW CS4?
                  IanJG Level 1
                  Thank you everyone for some great insight.... its really been helpful...

                  I am off the slice and dice now :-)

                  I am sure i will be back later :-)

                  Again thank you