14 Replies Latest reply on Oct 16, 2008 1:01 PM by pixlor

    Trouble with Fireworks to Dreamweaver integration

    Henrici
      Hi, I am just learning both programs so bear with me if I have made a simple mistake.
      I have designed a page in Fireworks that I want to have as basically want to have as the background with a few button slices. I then exported the html to dreamweaver but when I open it up it doesnt take up the whole canvas. I made the original page in fireworks at 1000 x 1000 thinking that would fill it up. Is there something that I am missing or doing wrong?
        • 1. Re: Trouble with Fireworks to Dreamweaver integration
          JoeDaSilva Level 4
          Can you post a link to a site that you like that "fills up the whole canvas"? Then I can explain how they did it.
          • 2. Re: Trouble with Fireworks to Dreamweaver integration
            Henrici Level 1
            I guess even this page is the idea that i want.
            I see other pages like this: http://www.ommegang.com/
            that just a color for the background but I was trying something more like this: http://www.adobe.com/devnet/fireworks/samples/pen_gradient_showcase.html
            That was what I was trying to emulate, with a pattern built into the background. I know thats just a sample and not a website, but I couldnt find any quickly that had exactly what I ment.

            • 3. Re: Trouble with Fireworks to Dreamweaver integration
              JoeDaSilva Level 4
              Henrici,

              Sorry for the delay with this response, it's not an easy answer and I had to wait until I had a larger block of freetime.

              To answer your question, you can't do this as simply as Fireworks would make it appear. The main reason is that you're not designing for a fixed-size canvas like you would be with a print design. As different users are going to have different monitor sizes you have to learn to accommodate their different resolutions, or "viewports" as best you can.

              There's a couple of different ways to do this, and each involves two steps. The first step for both would be setting the background color in your Dreamweaver document. To do this just go to Modify > Page Properties. From there use either the color chip selector or the HEX field to enter your color. You probably set a "canvas color" in Fireworks, nine times out of ten it would make sense to enter than same value here.

              Now how do you get the pattern? You'll notice a lot of backgrounds start with a pattern at the top, and then fade out to the background color we already set. You can create this type of graphic pretty easily in Fireworks, and then use your "slice" tool to draw a box over a narrow strip of the pattern. Once you export the slice, you can "tile" the graphic in Dreamweaver. This process repeats the image over and over, and fills the screen despite any width the user might have.

              Look at this site here: http://brightkite.com/

              See the dark blue to light blue gradient at the top?

              That's handled by this image here:
              http://brightkite.com/images/bg-main.png
              The image is only one pixel wide, and 200 pixels tall.

              If you switch to code view in Dreamweaver, the program would have written a body style near the top of the page. To achieve the background effect you're talking about, let's look at the code our example site used:

              background: #354E61 url('/images/bg-main.png') top left repeat-x;

              This is shorthand, and you could just as easily write this out as:

              background-color: #354E61;
              background-image: url(/images/bg-main.png);
              background-position: top left;
              background-repeat: repeat-x;

              The neat thing about Dreamweaver is that if you start typing out "background-image" it'll guess the rest and even ask you where you're image is located on your drive. It's quite easy once you realize that DW does a lot of the work (assuming you understand the concepts).

              Hopefully this will get you started, or at least get you to your next question ;-)

              If you need me to clarify anything just let me know - and good luck!
              • 4. Re: Trouble with Fireworks to Dreamweaver integration
                Henrici Level 1
                Ahh I am beginning to understand. I was playing around with setting a background up in DW. I tried to make my background canvas in FW be transparent so that the background in DW would be the one I wanted. When I bring it in it comes up white instead. I understand that the easy way around this is just to also do the background that way in FW, but was just wondering if there is a way to make it transparent (the FW file).

                Also when I am importing a FW page with any slices in the html, the page comes up all messed up and everything out of proportion. Do you have any hints for me?
                Thanks again,
                Brian
                • 5. Re: Trouble with Fireworks to Dreamweaver integration
                  pixlor Level 4
                  The best thing to do is export your images from Fireworks, but build your page in Dreamweaver. Dreamweaver is designed to build Web pages in a robust way, but Fireworks is not (it's only good for prototypes). Fireworks constructs a hard-coded table that breaks easily when you try to change or adapt your content.

                  As for your white background... Only .gif and .png images support transparency, .jpg does not. Even so, in order to get transparency, you need to select the setting you want (index or alpha). A good place to do that is the File>Image Preview dialog before export.
                  • 6. Trouble with Fireworks to Dreamweaver integration
                    Henrici Level 1
                    I exported my main background image and tryed to create separate slices to put on top for my links. This would work but only if I did not put it ontop of the background image imported. It would seem to put it underneath that. Do you have any ideas how to get it to the front? I know im getting more into a DW question than a FW but Id thought id ask.
                    • 7. Re: Trouble with Fireworks to Dreamweaver integration
                      pixlor Level 4
                      Without seeing your design, it's hard to say. You can set an image as a background for a table, then put your other images over it. You can also set a background image for a div element. In other situations, it's better to incorporate your background image with your navigation buttons. It depends on what you're going for. Can you export a .jpg or flattened .png of your design so we can see? It's kind of hard to give advice blindly. :P
                      • 8. Re: Trouble with Fireworks to Dreamweaver integration
                        Henrici Level 1
                        Yeah that would be easier to explain if I had it up. How exactly do I upload the file. I didnt see it in the help.
                        • 9. Re: Trouble with Fireworks to Dreamweaver integration
                          pixlor Level 4
                          You can't upload to the forum, you have to post it somewhere. A free account at Photobucket works well.
                          • 10. Re: Trouble with Fireworks to Dreamweaver integration
                            Henrici Level 1
                            http://photobucket.com/brianhenrici
                            Okay, uploaded it. Basically what i was trying to do was have that as the basic backdrop and I want to be able to make the text into simple rollovers so the text color changes.
                            When i tryed to put the slices in through FW it would jumble it all up. And when I would try to have the swap image in DW it would put it behind this image.
                            So I at one point moved the text out of the way and tryed again to put the swap images in but it still did not work.
                            • 11. Re: Trouble with Fireworks to Dreamweaver integration
                              pixlor Level 4
                              Okay, I getcha!

                              You have some images on top of a teal background. You don't even really need a background image. All your shadows and highlights against the teal need to be images placed on your page. For your two navigation menu areas, I think you might be happier with image rollovers, rather than text. For one thing, you can keep the font consistent. (Also, give your text some breathing room. "Consultant," for example, is butted up against the right-hand edge. Reduce the size a point and go for that elegant look Also, align the Cs in "Chef" and "Consultant.") Er...where was I? Oh yeah.

                              You need to understand that you are building with rectangles. It doesn't matter if you go with a Luddite table-based layout or make the WC3 folks happy and use only CSS. Tables or divs, you have rectangles. Personally, I'm a bit of a Luddite because I know how to make tables work and I know they will work. If you don't know much about HTML or CSS, then I'd go with a table-based layout. However, what you have is actually pretty complex, due to the big curves.

                              I took your image and gave it a trial slicing... You can grab screen shots here. If you want to produce this layout in HTML or CSS, you're going to have to know what you're doing. In the slicing-sc.jpg image, I have three small images shown in red. I've made them 5 pixels wide for visibility, but you could make them 1 pixel. They're for tiling in those sections, so that you don't have large images reducing your download times. You'll need to make sure your right-hand navigation is aligned to the top, so that if the text you put in your main area extends that cell the images in the navigation don't break apart - the cell below them needs to expand.

                              The brewery site is much simpler, as all the elements are rectangular and fit together neatly. You can clearly see where you would slice this design and fit it back together. The "Pen and gradient tools showcase" example has a header that is vertically separated from the content, which looks like a CSS layout. Again, it is much simpler to execute than the design you have. There's a header, below that is navigation, below that is content. There's no need to align images horizontally, as you need to do.

                              Not sure what's next.


                              • 12. Re: Trouble with Fireworks to Dreamweaver integration
                                Henrici Level 1
                                I see what you mean. I went in and moved the text away from the sidebar and went to place in an image rollover. When I would put in a Div Tag to hold it in place. When I went to view it in the browser it would jump over to the left about 1 inch. When I placed a table over the page and lined up the table where it needed to be and placed in the rollover. My old problem of the image not showing up happened again.

                                I think Im going to go back into FW and make the page simpler. But should I break up all the images and place them together that way? Im just getting confused because I thought DW was a WYSIWYG and when i view in my browser thats when all my problems happen.
                                • 13. Re: Trouble with Fireworks to Dreamweaver integration
                                  Henrici Level 1
                                  Ah I see what you mean by tables. I just have gone through and made my page with tables and just inserted many pics instead of just one. This made the rollover work. Ill just keep it simple for now. Thanks for the help.
                                  • 14. Re: Trouble with Fireworks to Dreamweaver integration
                                    pixlor Level 4
                                    quote:

                                    Originally posted by: Henrici
                                    I see what you mean. I went in and moved the text away from the sidebar and went to place in an image rollover. When I would put in a Div Tag to hold it in place. When I went to view it in the browser it would jump over to the left about 1 inch. When I placed a table over the page and lined up the table where it needed to be and placed in the rollover. My old problem of the image not showing up happened again.

                                    I think Im going to go back into FW and make the page simpler. But should I break up all the images and place them together that way? Im just getting confused because I thought DW was a WYSIWYG and when i view in my browser thats when all my problems happen.


                                    Yes and no, DW is WYSIWYG. There are HTML tags, there's CSS, there are standards...and not everything is rendered properly by the browsers. Also, with a CSS layout you must know what you're doing. Designing for the Web in DW is not like designing for print in, say, InDesign. You aren't designing visually, you're designing code in a visual mode that should approximate what you're going for. Not the same thing.

                                    If you move your right-hand navigation to a line below your horizontal navigation, then you could use a background color and place the image of the chef as a background image on your page (kinda tricky, you might make it really wide with most of it your teal background, then put it in the upper right with no repeat on x and y). After that, you could put a fairly straightforward table system on top: logo, navigation, content, footer. Much simpler.

                                    Good luck!