8 Replies Latest reply on Oct 14, 2010 2:36 PM by Jim_Babbage

    Please help with slicing question

    markf12 Level 1

      I'm new to FW and to slicing. I have tried to get all of the info from tutorials and the help that I could.I'm still confused.I'm trying to produce a multi page website mockup with FW using export to CSS and Images.

       

      I've submitted two other posts with 0 replies. I guess my questions were too broad? I've done some trial and error and tried testing with a simplified version of the multi page website mockup I'm trying to produce. See the simplified file here:

      http://www.openrangeimaging.com/test-posts/slicetest01.png

       

      The top area would be the header. The lower bar will have some nav tabs. The circle is to be a logo that if clicked on will take the user to the home page.. Below the nav bar is to be two columns with content.

       

      I have tried different ways of slicing this but cannot get the file to export correctly as CSS and Images. I also can't seem to include the logo as a slice with a link without getting the "overlap" problem. I have been beating myself against this for some time and have not had any success. Any help or advice on where to get help or any reply at all will be most appreciated. Thanks!

        • 1. Re: Please help with slicing question
          Jim_Babbage Level 4

          It would be helpful if you fleshed out the design a little more.

           

           

          Jim Babbage

          • 2. Re: Please help with slicing question
            markf12 Level 1

            Thanks for your reply Jim! sorry I was thinking a simplified version might help focus my

            questions/lack of understanding. Below is the link to the full mockup

            I'm trying to export as CSS and Images.

             

            http://www.openrangeimaging.com/test-posts/Gravity_Mockup11.png

             

            any advice or critique is very much appreciate.

            • 3. Re: Please help with slicing question
              Jim_Babbage Level 4

              Honestly I wouldn't even try to directly export this design from FW to a CSS based layout. I think I'd move a lot faster by exporting the graphics from FW and builidng the design in DW. You have a lot of overlapping objects in the design, which is going to mess up a Fireworks CSS export. Also note that button symbols will not export all four states when you export as CSS an Images, and even if they did, you must avoid overlapping the slices as seen in your design.

               

              Generally if you plan to export a CSS-based design from FW, you have to keep the design simple and particularly avoid any overlaps of content. If you're new to Fireworks, you really want to keep things simple as you learn the process. Regardless, a solid knowledge of HTML and CSS is very important.

               

              While FW can export a multi-page design as CSS and images, it will create a separate style sheet for each page - not fun. I'd concentrate on creating a single page, then exporting the necessary content  (images) for the subsequent pages and buliding those from copies of the single page export.

               

              David Hogue has created a great series of CSS export videos on the Fireworks Dev Center. I strongly recommend watching them.

               

              http://www.adobe.com/devnet/fireworks/articles/atv_fwcs4_css-export_demos.html

               

              Likewise Michel Bozgounov has written an excellent article on setting up a Fireworks document for CSS export:

               

              http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html

               

              Dave or Michel might disagree with my thoughts on this and they do pop into the forums so perhaps they can shed more light on the design as is.

               

              HTH

              1 person found this helpful
              • 4. Re: Please help with slicing question
                Jim_Babbage Level 4

                The test sample has an "L" shaped slice. for CSS export, stick to rectangular slices. The right column area is a rectangle shape. It doesn't need a slice. If you leave it unsliced, FW will create a div with a light blue background color.

                1 person found this helpful
                • 5. Re: Please help with slicing question
                  markf12 Level 1

                  Jim, thank you for your very helpful reply!

                   

                  >>Honestly I wouldn't even try to directly export this design from FW to a CSS based layout. I think I'd move a lot faster by exporting the graphics from FW and building the design in DW.<<

                   

                  This is what I needed to know. Being new to FW I was mistakenly assuming that I could use the Images and CSS to export a clicklable mockup that would also form the html/css basis of the 15 page site I'm designing. I thought that this was possible if only I could figure out how. I expected some pretty involved work in Dreamweaver would be needed. I now understand that for what I'm doing using the HTML and Images is what should be used. Then I develop the site in Dreamweaver using perhaps some images exported from the FW mockup, but not any html or css. Thank you for clearing that up for me! I knew i had some fundamental/core misunderstanding. The export to Images and CSS is only for very simple design.

                   

                  >>. If you're new to Fireworks, you really want to keep things simple as  you learn the process. Regardless, a solid knowledge of HTML and CSS is  very important.<<

                   

                  Yes I'd like to keep it simple but this is a bit of trial by fire (pun intended) on a project. I have gotten books and other tutorial type stuff on html and css. I would not call my knowledge of it solid as I am new to it. i think I get the gist of it and am determined to become proficient. The only real way to do that is to actually create something/gotta start somewhere so.......

                   

                  >>David Hogue has created a great series of CSS export videos on the Fireworks Dev Center. I strongly recommend watching them. Likewise Michel Bozgounov has written an excellent article on setting up a Fireworks document for CSS export:<<

                   

                  I had viewed a number of  Dave H's tutorials. I somehow overlooked the ones that you provided a link to. I'm going to watch them straight away. I had read the Article by Michel B. also excellent. I have also read your excellent tutorials and watched your lynda.com video training. I've gained allot from all of this.

                   

                  Thanks again for your help!

                  • 6. Re: Please help with slicing question
                    Jim_Babbage Level 4

                    Comment inline.

                    • 7. Re: Please help with slicing question
                      markf12 Level 1

                      I'm sorry I don't understand "comment inline". Thanks again for your help!

                      • 8. Re: Please help with slicing question
                        Jim_Babbage Level 4

                        Great, my entire message was wiped out. Here it is again:

                         

                        My comments are inline.

                         

                        On 2010-10-14, at 2:16 AM, markf12 wrote:

                         


                        Jim, thank you for your very helpful reply!

                         

                        Honestly I wouldn't even try to directly export this design from FW to a CSS based layout. I think I'd move a lot faster by exporting the graphics from FW and building the design in DW.<<

                         

                        This is what I needed to know. Being new to FW I was mistakenly assuming that I could use the Images and CSS to export a clicklable mockup that would also form the html/css basis of the 15 page site I'm designing. I thought that this was possible if only I could figure out how. I expected some pretty involved work in Dreamweaver would be needed. I now understand that for what I'm doing using the HTML and Images is what should be used. Then I develop the site in Dreamweaver using perhaps some images exported from the FW mockup, but not any html or css. Thank you for clearing that up for me! I knew i had some fundamental/core misunderstanding. The export to Images and CSS is only for very simple design.

                         

                        JB - It IS possible, but you have to design the site based on certain practices. Overlapping slices is one thing to avoid.

                         

                        . If you're new to Fireworks, you really want to keep things simple as  you learn the process. Regardless, a solid knowledge of HTML and CSS is  very important.<<

                         

                        Yes I'd like to keep it simple but this is a bit of trial by fire (pun intended) on a project. I have gotten books and other tutorial type stuff on html and css. I would not call my knowledge of it solid as I am new to it. i think I get the gist of it and am determined to become proficient. The only real way to do that is to actually create something/gotta start somewhere so.......

                         

                        JB - getting the "gist" isn't enough. If you do not have a solid grounding in HTML and CSS, you will likely run into trouble even IF you successfully export the design, because you will need to to edit and tweak the code once you're in DW. I'd recommend building your first sites "the old fashioned way" first, before trying to automate the process.

                         

                        David Hogue has created a great series of CSS export videos on the Fireworks Dev Center. I strongly recommend watching them. Likewise Michel Bozgounov has written an excellent article on setting up a Fireworks document for CSS export:<<

                         

                        I had viewed a number of  Dave H's tutorials. I somehow overlooked the ones that you provided a link to. I'm going to watch them straight away. I had read the Article by Michel B. also excellent. I have also read your excellent tutorials and watched your lynda.com video training. I've gained allot from all of this.

                         

                        Thanks again for your help!

                         

                        JB - You're very welcome. Good luck.