15 Replies Latest reply on Nov 30, 2010 7:34 PM by pixlor

    [newbie] Help - I can't Export to Dreamweaver!

    Alan Johnstone-98

      Hi,

      I've just started using the Adobe webcreation suite, and have done a little 'plan' of the site I want to do.   That's just a flattened PNG but on my Mac, I of course have the complete 'layout' plan with slices etc.  This is what it looks like in FireWorks.  But now I'm stuck, and I can't find anything in the various tutorials on the web, to tell me how to proceed.  This is what I usually do:

       

      1. I select the round photo in the top-left, the white rounded rectangle, and the buttons (I think I've understood that text is to be reinserted once in Dreamweaver, so I make the text in both the buttons and the main white rectangle invisible).
      2. I do ALT-SHIFT-U and answer 'multiple' to the question that pops up. 
      3. When those layers are created, I rename them according to what they do, and then I do 'export'.
      4. I choose 'HTML and Images', leave 'Selected Slices Only' checked, and specify that I want the images in a separate directory (/images).  I also untick 'Include Areas Without Slices'
      5. I export (pausing to ask myself why the 'index' file which I name, has an 'htm' extension...)
      6. I go into Dreamweaver and create a new Site, using the previous directory for the image files. 

       

      Sure enough, it opens in Dreamweaver, and this is what it looks like in Safari (the last button got cut off for some reason, but that doesn't usually happen, so I think it can be ignored).  But then what?  I can't add any text to any of the buttons, and I can't reinsert the text at the top or bottom of the pages.  And I don't know how to create new pages with the same layout and look.

       

      In short, I've learnt a lot about FireWorks, and a lot about Dreamweaver, but there's a 'missing link' between the two that I can't fathom.


      Can anyone help?


      Thanks.

        • 1. Re: [newbie] Help - I can't Export to Dreamweaver!
          Linda Nicholls Level 4

          Ideally you would export the round image and the button images seperately and add them to the HTML page in Dreamweaver. If you wanted to export the entire page from Fireworks and add it to your Dreamweaver page, slice it more like this:

           

           

          screen.png

          In this case you would add the text to the buttons in Fireworks. Note that the slice over the content area has been changed from an image slice to an HTML slice via thew FW Properties panel.

           

          Once you have properly defined a site in Dreamweaver, export the page from FW to your Deeamweaver site's assets (or images) folder. Do not open the FW exported HTM file in Dreamweaver, Instead, create a new HTML page in Dreamweaver.  Save it. Place the cursor on the page where you want to add your Fireworks page and, from the DW Insert menu, choose Insert > Image Objects > Fireworks HTML. Note that if you add too much text to the content area, the page will split apart.

          1 person found this helpful
          • 2. Re: [newbie] Help - I can't Export to Dreamweaver!
            Alan Johnstone-98 Level 1

            > slice it more like this

             

            Hi Linda.  Thanks for the tips.  So looking at the little image you posted, would I be right in assuming that you're in fact creating those slices manually with the slice tool, and you're not just creating slices from the images and objects that are there already?

             

            > Do not open the FW exported HTM file in Dreamweaver

             

            Hah!  That's where I was going wrong!  Thank you!  When I create the new HTML, do I need to save it as 'index.html', or do I insert CSS and if so, how?


            Sorry to be asking so many (undoubtedly) dumb questions.  Is there a good tutorial somewhere on the web where I can learn this for myself (bearing in mind that I already tried this, this, this and this)?

            • 3. Re: [newbie] Help - I can't Export to Dreamweaver!
              Linda Nicholls Level 4

              >  would I be right in assuming that you're in fact creating those  slices manually with the slice tool, and you're not just creating slices  from the images and objects that are there already?

               

              That's correct.

               

              >When I create the new  HTML, do I need to save it as 'index.html',

               

              Yes. Save it as index.html before adding the FW stuff to it.


              > Is there a good tutorial somewhere on the web where I can  learn this for myself (bearing in mind that I already tried this, this, this and this)?

               

              Here's a whole bunch

              http://www.adobe.com/devnet/fireworks/article-index.html

              • 4. Re: [newbie] Help - I can't Export to Dreamweaver!
                Alan Johnstone-98 Level 1

                Ah, OK, so I'm getting there.  This is what the page looks like when I export the HTML and the images.

                 

                Some things I don't understand, though

                 

                1. I made the top button a link pointing to index.html.  But if you mouseover that link, you'll see the 'hotspot' extends a good 3/4 inch on either side.  I assume this is because I created slices bigger than the buttons?  Is there something I missed, or should I go back and resize those slices in FW?
                2. I tried to put text onto that button but, well .. you can see the result.  But I'm sure it said in a tutorial to make the various text things invisible, and reinsert them in DW...
                3. Is there an easy way to create the CSS so that all of my pages will be like that?
                4. Finally, is there a way to have a scrollbar inside the white box, so that only what's inside there will scroll, or are we getting into the domain of flash now?

                 

                May I ask also.. if you were coming from newbie level and wanted to work up to doing websites in flash, in which order would you learn the various components of the suite?

                 

                Thanks for the advice and the link - a lot of tutorials on that site, and on AdobeTV, too.  A steep learning curve is ahead of me, I fear.

                • 5. Re: [newbie] Help - I can't Export to Dreamweaver!
                  Linda Nicholls Level 4

                  Whaever size you made the slice is the size the exported image will be. I can think of no reason you would not be able to add text to the button shapes unless you are using button symbols rather than simple shapes.  If you are using symbols, add the text for the symbol while in symbol editing mode, and then change it on each instance of the button in the text box of the Properties panel. You haven't created any CSS. You have exported images and HTML. You can save it as a template in Dreamweaver if you wish, and then use the template to generate new pages of the same kind.

                   

                  A one month membership at Lynda.com doesn't cost very much.  You'll find the tutorials covering the components of the suite are the easiest, quickest means of learning to use the suite.

                  • 6. Re: [newbie] Help - I can't Export to Dreamweaver!
                    Alan Johnstone-98 Level 1

                    Thanks for that, Lynda.   I'd love to take out a membership to your website, but alas, I am a victim of the recession, having done UNIX for a long time.  One of my last acts in my last job was to buy a Master Collection licence, as I'd quite like to work from home, having just adopted a puppy.  Rest assured, though: when I get the means, I will look at your courses first.

                     

                    As for my question, there is obviously something about the slicing & exporting business that has yet to penetrate my thick skull.  I created rollover events for my buttons, sliced the rest of the page up, followed your instructions and this is the resultant Fireworks PNG.  As you can see, however, the end result is not what I had been expecting.

                     

                    What I simply don't get is.. why is the text box the same colour as the canvas (blue), and not white?  Why are there broken links at the bottom-left of the screen?  Why don't my rollovers function?  Why is there only a sliver of white available at top?

                     

                    Aaggh!!  I'm tearing my hair out here...

                    • 7. Re: [newbie] Help - I can't Export to Dreamweaver!
                      Linda Nicholls Level 4

                      I'm not that Lynda. :-) There's no JavaScript in the code to show that you ever added the rollovers. The blue color in the content area is that background color of the page? I don't see any links at the bottom of the page. Why not upload your editable PNG file so I can have a look at it?

                      • 8. Re: [newbie] Help - I can't Export to Dreamweaver!
                        Alan Johnstone-98 Level 1

                        I think I uploaded it - the link in my previous message entitled ' this is the resultant Fireworks PNG'.  No matter, here's a zipped copy, which should prevent its being displayed inline ..

                         

                        http://bicycle-travel.org/hotspots/editable.png.zip

                         

                        There are rollovers there, but yeah, strange that I can't see them in the document.

                        • 9. Re: [newbie] Help - I can't Export to Dreamweaver!
                          Jim_Babbage Level 4

                          There are also many free learning resources at adobe.com, tv.adobe.com and communitymx.com.

                           

                          Jim Babbage

                          • 10. Re: [newbie] Help - I can't Export to Dreamweaver!
                            Linda Nicholls Level 4

                            Is this pretty much what you are looking for?

                            http://www.playingwithfire.com/test/bike/index.html

                             

                            Here's a link to the new PNG file

                            http://www.playingwithfire.com/test/bike/editable.png

                             

                            Note that because table design, as exported from Fireworks, is very inflexable,you will never be able to add more text than what you see in the content area without breaking the table apart. You really need to learn how to do the coding in Dreamweaver instead of in Fireworks.

                            • 11. Re: [newbie] Help - I can't Export to Dreamweaver!
                              pixlor Level 4

                              Linda Nicholls wrote:

                               

                              ...You really need to learn how to do the coding in Dreamweaver instead of in Fireworks.

                               

                              ...And here are some resources on coding HTML and CSS

                              1 person found this helpful
                              • 12. Re: [newbie] Help - I can't Export to Dreamweaver!
                                Alan Johnstone-98 Level 1

                                Hi.  Sorry I didn't respond to this yesterday.

                                 

                                > Is this pretty much what you are looking for?

                                > http://www.playingwithfire.com/test/bike/index.html

                                 

                                Yes, that's exactly it - aaargh, how did you do that???  

                                 

                                > You really need to learn how to do the coding in Dreamweaver

                                 

                                What do you mean by 'coding'?  Writing raw HTML in Dreamweaver?  That, I can do.  I cut my teeth on HTML whilst doing support work at IBM in Scotland in the nineties.  But then I lost interest, so my 'abilities' in that respect are limited to HTML itself (and not Javascript or anything).  But if you mean use DW's point-and-click stuff to do the page, then I'm up for it.  Indeed, I'd been wondering something: if rollovers and text etc. aren't exported from FW, then what is the point of doing the website in FW to begin with?  OK, if it's just to get the layout nice, but why go through the bother of 'exporting' to DW, if DW's not going to be able to use the bells and whistles that I've busted my a** doing in FW? 

                                • 13. Re: [newbie] Help - I can't Export to Dreamweaver!
                                  Alan Johnstone-98 Level 1

                                  Thanks for those links, Jim and 'pixlor'.  I particularly like the first one posted by the latter. 

                                   

                                  Tell me, though - is it at all possible to bypass DW alltogether and do a complete site in Flash?   I assume that I wouldn't need FW in that case, except to do graphics, which could conceivably be done in the gimp (which I know better than PS).... 

                                  • 14. Re: [newbie] Help - I can't Export to Dreamweaver!
                                    Alan Johnstone-98 Level 1

                                    > http://www.adobe.com/devnet/dreamweaver/articles/turning_design_into_h tml_and_css_pt1.html

                                    > ("Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow," link

                                    > stolen from Jim Babbage's posts. This is the first of two parts.)

                                     

                                    Halfway down the page, I read ..

                                     

                                    "Unless the design is very simple, it is likely that there will be background images, icons, and other design elements (for example, custom list bullets) that will need to be exported separately and then assembled by editing the HTML and CSS. If the site has many pages, it is often more efficient to export page frameworks (that is, the layout focused on the <div> structure without most of the page content and images) from Fireworks, turn them into page templates in Dreamweaver, and then export unique pages and page components from Fireworks to be combined in Dreamweaver.

                                    Although simple pages can be completely exported in a single pass, most designs will look better and the final code will be more efficient if you make multiple export passes and assemble the final code and assets in Dreamweaver"

                                     

                                    LOL ... that is the first time I've read that, and it makes a lot of the problems I've been experiencing, seem so much more normal. 

                                     

                                    Nice link - thanks again !

                                    • 15. Re: [newbie] Help - I can't Export to Dreamweaver!
                                      pixlor Level 4

                                      Alan Johnstone-98 wrote:

                                       

                                      ...  Indeed, I'd been wondering something: if rollovers and text etc. aren't exported from FW, then what is the point of doing the website in FW to begin with?  OK, if it's just to get the layout nice, but why go through the bother of 'exporting' to DW, if DW's not going to be able to use the bells and whistles that I've busted my a** doing in FW?

                                       

                                      Because it's very easy to design in FW. It's hard to design in DW. With FW, you can add rectangles for your divs (header, content areas, footer), move them around, see where you want them, tweak the colors and opacities, try out graphic effects (like drop shadows). It isn't so easy to do in DW, although CSS gurus probably can do it. Then, you can export an HTML version to show people, which is good if you need approvals from other people. Finally, you fire up DW to write some robust code based on the design you made in FW and using the image elements you exported.

                                       

                                      (Personally, I don't use all the bells and whistles in FW, but that is not a universal approach. I get a static image I like and do all the interactivity in DW.)

                                       

                                       

                                      Alan Johnstone-98 wrote:

                                       

                                      Thanks for those links, Jim and 'pixlor'.  I particularly like the first one posted by the latter. 

                                       

                                      Tell me, though - is it at all possible to bypass DW alltogether and do a complete site in Flash?   I assume that I wouldn't need FW in that case, except to do graphics, which could conceivably be done in the gimp (which I know better than PS).... 

                                       

                                      You're welcome. Yes, I think that first link is stellar, myself.

                                       

                                      Yes, you can do a site in Flash...but you need to know Flash. You'll need to either brush up on your HTML (which hasn't changed all that much since the 90s) and learn CSS or learn to do sites in Flash.