4 Replies Latest reply on May 7, 2009 7:10 AM by Nadia-P

    Illustrator -> Fireworks slice help

    cre8nkos4u

      Hi. I am putting together a website for a client that provided the design to me in Illustrator.  I just upgraded from CS1 to CS4, so I'm new to Fireworks and Dreamweaver.  Which way is the most efficient, making a 'template' with the heading and then putting body of the site in, or just slicing up each individual page (the header is the same for each page, other than the color of the button for the active page). 

       

      Also, when I have an area that will be a 'button', should I create a slice, or insert a button symbol instead?  And if I make a slice, do I make it an html slice?  Also, with form content, should I make a slice over the form element and make it an html slice, or is there another way take care of that in Fireworks or dreamweaver?

       

      Thanks for the help!

        • 1. Re: Illustrator -> Fireworks slice help
          pixlor Level 4

          It is more efficient to make a template and build your pages from there. To have a different color button for the active page, though, is trickier. Small sites usually don't change the look from page to page, large sites use multiple templates. You'll either need to break your template once the page is finished or do something very clever in JavaScript or CSS.

           

          What do you mean by "when you have an area that is a 'button?'" Do you mean a part of your page's navigation or a form button? If it's a submit button you code it in Dreamweaver. It's possible to use an image as the input element, though. If you mean your site's navigation, then whether or not you want to use a FW button depends on what you want it to do.

           

          Forms are built in Dreamweaver, not in Fireworks. Forms must be coded in HTML. Fireworks is a graphics program. While it can output some HTML, it is not robust and is good only for prototyping. Fireworks is not a magicial WYSIWYG Web page development program; you don't build pages in Fireworks.

          • 2. Re: Illustrator -> Fireworks slice help
            cre8nkos4u Level 1

            Thanks for the info! I realize that Fireworks is just a graphics markup tool, not the end of the coding.  What I'm trying to figure out though, is when I make  a slice of a functional element (such as a menu button or submit button) should I set it to 'html' slice in Fireworks, or leave it as a foreground image and do the coding in Dreamweaver?  The other option I suppose, is since I already have the graphics layed out from Illustrator from my client, is just put them straight in to Dreamweaver and start coding from there?  Or should I go ahead and slice the page up in fireworks, name the slices, etc., and THEN go to Dreamweaver?  I guess I'm looking for workflow help more than anything. I can find out how to use the tools individually from 'help' and other tutorials, but knowing where to go from one place to the next is a bit confusing right now.

             

            Thanks!!

            Amy

            • 3. Re: Illustrator -> Fireworks slice help
              Linda Nicholls Level 4

              Slice and dice in Fireworks, and then do your markup in Dreamweaver. If you want the button slices to be images rather than CSS, then export them as foreground image slices.

              1 person found this helpful
              • 4. Re: Illustrator -> Fireworks slice help
                Nadia-P Level 5

                Not so much efficient, but best practise is to do all your slicing of individual elements in FWs and exporting the images for use in the html or css.  You would then move over to Dreamweaver to markup the site (just as Linda has already pointed out).

                 

                 

                Before going any further, have a read of this tutorial, it takes you through the steps of taking a FWs comp and creating a web page in Dreamweaver - It will give you a clearer idea of how to start  :-)

                 

                 

                http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

                 

                 

                Also, when I have an area that will be a 'button', should I create a slice, or insert a button symbol instead?

                Use the buttons as images for the navbar, so you would export them and use them either directly in the html or via the css.. here's a list of various methods of creating navbars using lists:

                http://css.maxdesign.com.au/listamatic/

                 

                 

                Also, with form content, should I make a slice over the form element and make it an html slice, or is there another way take care of that in Fireworks or dreamweaver?

                 

                Again, you would write the code for the form in Dreamweaver and use CSS to add styling to the various elements of the forum... no need for images at all with a forum, unless of course you want to use an image for the submit button for example.  Another link to show you how to style forms using CSS:

                http://www.sitepoint.com/article/style-web-forms-css/

                 

                Better off doing a bit of research and doing this correctly, otherwise you'll end up with a website that is fragile in layout, will not work in different browsers and break at the least provocation  (eg:  like the user increasing the text size in their browser)  :-)

                 

                When you move over to create the web page in Dreamweaver and need to ask any HTML and CSS questions, you are more than welcome to ask them over at the Dreamweaver General Forum

                http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions&start=0

                 

                Good luck  :-)