8 Replies Latest reply on Jan 24, 2010 9:07 PM by pixlor

    Export CSS problems ?

    jbhoo12 Level 1

      Hello,

      I have sliced and exported my site layout to css/images (FW CS4) and when I open it to work on it in dreamweaver, it is a little off here and there I have tried re-slicing it several times, looks the same. But when I export it as html/images it looks fine in the browsers. But I would really rather use CSS then Tables. Anyone know of any solution for this ?

        • 1. Re: Export CSS problems ?
          Jim_Babbage Level 4

          Can you post a link to your PNG file? Are you getting any messages from Fireworks when you attempt the export?  While the export can be helpful at times, you may find it easier to properly build the layout in Dreamweaver. Chances are excellent that you will have to tweak the CSS/HTML that Fireworks creates anyway.  Keep in mind that he whole idea behind CSS is flexibility, too. Generating a table-based layout from FW is wrong for many reasons, as it creates graphics of everything - including text, and the table -or tables - created by Fireworks are very rigid and can break quite easily if you try to edit the page. FIne for protoyping, not good at all for final web sites.

          1 person found this helpful
          • 2. Re: Export CSS problems ?
            jbhoo12 Level 1

            Hey, Jim

            Thanks for the reply. I dont really have away to post a link to my .png. I have apache installed on my windows machine to test my sites with. I'm a second year student at IADT working towards a degree in web design.

             

            I have used and followed your tutorials, Great Stuff!! I have seen alot of tuts about using FW for prototyping but not much about using it for your a final site. You mentioned doing the CSS layout in DW first, I'm not a wizard at css yet, but know enough to really mess things up

            I like to hard code.So would I basicly make a layout in DW with my basic demensions using DIV,S and ID,S. Like  wrapper, header, nav_bar, content, footer, etc... etc...

            Then design your site in FW or PS  with he same outer demensions or width ? and then slice out your header, nav-bar content buttons etc... etc... Or just export as images and then drop them into DW without slicing ? I can redo the css that FW generates but that is a hassle and it slices all thease little pieces called r11_c12_jpg etc.. I name the important slices, the ones that I will be using, but it is still a mess and hard to navigate the code.

            I know this is to many ? for a forum maybe if you could point me to a tutorial that addresses thease issues, if there is one that you know of.

            • 3. Re: Export CSS problems ?
              Jim_Babbage Level 4

              OK, this is my teacher side speaking. If you're working toward your degree in web design, the last thing you should be doing is using Fireworks to generate your web pages. There's a reason you don't see many tutorials about using FW to build the pages of your final site. Actually, probably more than 1 reason.

               

              My workflow:

               

              • Know CSS and HTML first. The software is there to make life easier, but it is not a way around learning the basics.
              • Design in Fireworks.
              • Slice and optimize in Fireworks (being sure to name your slices)
              • Export the necessary slices (not all the ones that FW automatically creates).
              • Build out the design in Dreamweaver. 

               

              And as for creating a link to your png file, you can do that right here. Just upload the file, assuming it's not a huge file size.

               

              If you want to learn more about CSS export from Fireworks, check out David Hogue's articles on the Adobe Developers center for Fireworks: http://www.adobe.com/devnet/fireworks/

              1 person found this helpful
              • 4. Re: Export CSS problems ?
                jbhoo12 Level 1

                Thanks, Jim

                We really haven't gotten that far in school yet only had one programing class so far.I new more about coding before going to school at least HTML. I can layout a  CSS stylesheet pretty well, have had classes using PS,ID,IL,FL and typography etc...

                 

                Heres my .png For your amusement

                • 5. Re: Export CSS problems ?
                  jbhoo12 Level 1

                  I followed that link you posted,Ive watched that before,very good. But I did some more digging while I was there on the Adobe Developers Connection and found this great vidio and downloads by Chris Converse. Just what I have been looking for custom templates for DW that includes the PSD so you can see how he sliced it. I haven't watched the whole thing yet, but he walks you through setting them up and the slicing of the psd. Setting up your custom templates. He goes alot deeper to into using alot of dynamic elements like spry and spry widgets.

                   

                  http://http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html# templates

                  • 7. Re: Export CSS problems ?
                    Jim_Babbage Level 4

                    Enjoy.

                     

                    Jim Babbage

                    • 8. Re: Export CSS problems ?
                      pixlor Level 4

                      I found this nice tutorial, a while back:

                      http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

                       

                      The author produces her graphics in Photoshop, but I used Fireworks when I followed it. It's very clearly written and displays a good workflow and hits the major (common) design elements.