11 Replies Latest reply on May 1, 2007 9:05 AM by Newsgroup_User

    FW to DW Web Layout Tutorial?

    woward
      I have both FW and DW and have used Jumpstarts from CommunityMX a bit. I'd like to find an online step-by-step tutorial about how to prototype in FW, turn that into slices, code, etc. and get it into DW. Essentially, "how was the Jumpstart built"? Anybody know of anything that might help?

      Thanks,

      Bill
        • 1. Re: FW to DW Web Layout Tutorial?
          Level 7
          Yes, but it's not free:
          http://www.projectseven.com/products/templates/designpacks/42nd_street/index.htm

          --
          Al Sparber - PVII
          http://www.projectseven.com
          Extending Dreamweaver - Nav Systems | Galleries | Widgets
          Authors: "42nd Street: Mastering the Art of CSS Design"




          "woward" <webforumsuser@macromedia.com> wrote in message
          news:f132fs$ikm$1@forums.macromedia.com...
          >I have both FW and DW and have used Jumpstarts from CommunityMX a bit.
          >I'd
          > like to find an online step-by-step tutorial about how to prototype in
          > FW, turn
          > that into slices, code, etc. and get it into DW. Essentially, "how
          > was the
          > Jumpstart built"? Anybody know of anything that might help?
          >
          > Thanks,
          >
          > Bill
          >

          • 2. Re: FW to DW Web Layout Tutorial?
            woward Level 1
            To put a finer point on it, I pretty much understand basic web layout in FW. What I cannot find a good reference for is how you decide what to "slice", how you do it, and exactly how you make it work in DW.

            Bill
            • 3. Re: FW to DW Web Layout Tutorial?
              Level 7
              woward wrote:
              > To put a finer point on it, I pretty much understand basic web layout in FW.
              > What I cannot find a good reference for is how you decide what to "slice", how
              > you do it, and exactly how you make it work in DW.

              Well, I'm not sure you're going to find a "how to" for this that will
              serve you in every situation. All designs are different and slicing them
              is approached differently. There are of course a few general principles
              but learning this comes mostly with experience.

              With that said, you cannot go wrong with the design pack Al gave you the
              link to.

              --
              Stéphane Bergeron
              reach:connect:communicate
              www.webfocusdesign.com
              blog:tutorials:articles:gallery
              www.pixelyzed.com
              • 4. Re: FW to DW Web Layout Tutorial?
                Level 7
                woward wrote:
                > To put a finer point on it, I pretty much understand basic web layout in FW.
                > What I cannot find a good reference for is how you decide what to "slice", how
                > you do it, and exactly how you make it work in DW.
                >
                > Bill
                >

                Bill, I've posted some links to your question on the CMX forum.

                --
                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                Extending Knowledge, Daily
                http://www.communityMX.com/
                CommunityMX - Free Resources:
                http://www.communitymx.com/free.cfm
                ---
                .:Adobe Community Expert for Fireworks:.
                news://forums.macromedia.com/macromedia.fireworks
                news://forums.macromedia.com/macromedia.dreamweaver
                • 5. FW to DW Web Layout Tutorial?
                  jsteinmann Level 1
                  It's true... if you look for how to books for fireworks, they are almost never found. Maybe bundled with a dreamweaver how to books at best. I would suggest learning how to do this in Photoshop. There are tons of books to show you how to mockup designs with that software. And frankly, if you can get it down in PS, Fireworks will seem easy. Fireworks, and I'm sure other designers that have been doing this a while can tell you, is almost like a dumbed down version of PS. Keep in mind it's not dumbed down in features or capabilities, but the user interface and similar is very easy to use. Either way, the concepts will be the same so you can apply them to either program one you learn them

                  As far as slices, as mentioned it really depends on the design. To make some generalizations... obviously you want to slice things that are going to be animated, rollovers, and simliar. And usually you create a slice for pictures so you can make them JPEGs. You slice page titles and key text so they can be GIFs. You don't want to go slice crazy though because it can be counterproductive. You use slices when you benefit from doing it, not for the sake of doing it. From there, export with HTML and Images and open the HTML in Dreamweaver.

                  • 6. Re: FW to DW Web Layout Tutorial?
                    Level 7
                    jsteinmann wrote:

                    > And frankly, if you can get it down in PS,
                    > Fireworks will seem easy.

                    Learning Photoshop first will not help you to learn Fireworks. Fireworks
                    is more like Illustrator than PS.

                    --
                    Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
                    --------------------------------------------------------------
                    http://www.projectseven.com
                    Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                    CSS Newsgroup: news://forums.projectseven.com/css/
                    http://www.adobe.com/communities/experts/
                    --------------------------------------------------------------
                    • 7. Re: FW to DW Web Layout Tutorial?
                      woward Level 1
                      Thanks for the help. I'm trying to sort out all the stuff and apply it to my project.

                      Bill
                      • 8. FW to DW Web Layout Tutorial?
                        jsteinmann Level 1
                        Same tools, same concepts, and plenty of resources for PS. Why would anyone say it's not useful? Design work is as much conceptually understanding how to design as it is logistics, and both are very universal. If you can slice in Photoshop, you can slice in Fireworks. If you can use a marquee tool in PS, you can use it in FW. If you can do a gradient fill in PS, you can do it in FW. It's not even tricky, the icons are the same. If you can't find a tutorial/book that teaches you the process in fireworks, doing so with the many books available for PS will teach you all of the concepts and tools you'll use. Taking those skills to FW is a breeze and requires no relearning.
                        • 9. Re: FW to DW Web Layout Tutorial?
                          Level 7
                          jsteinmann wrote:
                          > Same tools, same concepts, and plenty of resources for PS. How is it not
                          > useful? That's like saying learning to drive a car with a left seat steering
                          > wheel doesn't help you if you drive a car in england with a right seat steering
                          > wheel.

                          Actually, you are wrong about that. Fireworks is primarily a vector
                          based graphic application much more akin to Illustrator than Photoshop.
                          It shares quite a bit of functionality with Photoshop yes, but Fireworks
                          is a unique hybrid vector/raster application that offers real workflow
                          advantages over Photoshop alone for a lot of things (vector masking for
                          example). So, although learning Photoshop would help working with the
                          similar tools in Fireworks, there's an entire other toolset PS doesn't
                          have which makes working in Fireworks easier, faster and more flexible
                          to create Web layouts.

                          --
                          Stéphane Bergeron
                          reach:connect:communicate
                          www.webfocusdesign.com
                          blog:tutorials:articles:gallery
                          www.pixelyzed.com
                          • 10. Re: FW to DW Web Layout Tutorial?
                            Level 7
                            I found the PS Knowledge I had actually hindered my progress in Fireworks.
                            It was only once I put PS to one side and made myself do everything with FWs
                            that I started to make real progress.

                            Peter
                            _________________
                            "Stéphane Bergeron" <news@webfocusdesign.com> wrote in message
                            news:f14j3a$cf6$1@forums.macromedia.com...
                            | jsteinmann wrote:
                            | > Same tools, same concepts, and plenty of resources for PS. How is it
                            not
                            | > useful? That's like saying learning to drive a car with a left seat
                            steering
                            | > wheel doesn't help you if you drive a car in england with a right seat
                            steering
                            | > wheel.
                            |
                            | Actually, you are wrong about that. Fireworks is primarily a vector
                            | based graphic application much more akin to Illustrator than Photoshop.
                            | It shares quite a bit of functionality with Photoshop yes, but Fireworks
                            | is a unique hybrid vector/raster application that offers real workflow
                            | advantages over Photoshop alone for a lot of things (vector masking for
                            | example). So, although learning Photoshop would help working with the
                            | similar tools in Fireworks, there's an entire other toolset PS doesn't
                            | have which makes working in Fireworks easier, faster and more flexible
                            | to create Web layouts.
                            |
                            | --
                            | Stéphane Bergeron
                            | reach:connect:communicate
                            | www.webfocusdesign.com
                            | blog:tutorials:articles:gallery
                            | www.pixelyzed.com


                            • 11. Re: FW to DW Web Layout Tutorial?
                              Level 7
                              woward wrote:
                              > I have both FW and DW and have used Jumpstarts from CommunityMX a bit. I'd
                              > like to find an online step-by-step tutorial about how to prototype in FW, turn
                              > that into slices, code, etc. and get it into DW. Essentially, "how was the
                              > Jumpstart built"? Anybody know of anything that might help?
                              >
                              > Thanks,
                              >
                              > Bill
                              >


                              I have a CD movie training course that teaches you how to do the layout
                              in FW, slice, optimize then export. It is then put together in DW using
                              CSS styles not tables. It's the "Web Page in a Day!" CD found at:
                              http://www.joycejevans.com



                              --
                              Joyce J. Evans Erb *Adobe Community Expert*
                              http://www.JoyceJEvans.com
                              http://www.IdeaDesignWebsites.com

                              Web Page in a Day! CD training now available at http://www.joycejevans.com