10 Replies Latest reply on Apr 25, 2010 2:33 AM by inspiration100

    Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP

    inspiration100

      Hi

      I hope someone can help as I originally made a basic web page in dreamweaver using a very good site that did it step by step.  Encouraged I bought Web Premium CS4 and Photoshop elements.  Then I came across Fireworks in the package and after looking on the web was excite that I could make an even better site.

       

      Now I am just sooooo frustrated.  I have made a great looking site for a friend, that when previewed in Fireworks looks brilliant.  I exported to Dreamweaver so that I can add some links and other pages, but prior ti this I thought I would look what it looks like in the browser once again.

       

      It looks awful!  My header image has been duplicated across the top, the  olours looks different and the gradient I put in the side columns isn't there at all.  The nav bar bits are a look naff.  I thought that this package was mean't to help us non techhies !  PLEASE HELP !

      Thanks

      Julie

        • 1. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
          Linda Nicholls Level 4

          Hi Julie. Could you post your Fireworks editable PNG file? Without sweeing what's going on, it's pretty hard to make suggestions.

          • 2. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
            inspiration100 Level 1

            Hi Linda

             

            Yes of course -no problem.  I so hope someone can help me.  I think also I need to  get some sort of training on coding and maybe buy some manuals and learn more.  It is just I am under pressure from my friend at the moment to get this done.  Hve you ever wished you hadn;t said yes to be helpful ?  That's me at the moment !

             

             

            Here is the fireworks png file

             

             

             

            and the html

             

             

             

            ?? Sorry Linda I can't seem to insert the file?  how can I do tis into the forum?

            • 3. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
              pixlor Level 4

              Two beginner Web site creation tutorials:

              http://www.sitepoint.com/article/html-css-beginners-guide/

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

               

              And one on the theory of slicing a design for the Web. This is for a table-based layout, but you want to use the technique in the nettuts+ tutorial.

              http://www.slicingguide.com/

               

              None of these are specific to Fireworks, but you can use Fireworks (or any other graphics program) to create your images.

               

               

              To attach an image to a post, use the Insert Image control, which is the camera icon just to the left of the smilie icon at the top of the composition window. Sometimes, it crashes. It doesn't work in Chrome, for instance, but it's generally reliable in Firefox. If you can get it to upload your image, then check that it's still editable and not flattened into a single-layer bitmap. If all else fails, I like using the drop.io service. (http://drop.io/ You can create a file drop without signing up.)

              1 person found this helpful
              • 4. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                kimikimish Level 1

                Post your entire fireworks file, I will slice them and code CSS and HTML for you, within one day you will have your home page ready.

                1 person found this helpful
                • 5. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                  inspiration100 Level 1

                  Hi Runrunforest.

                   

                  wow ! That's so kind of you.  I will have a go at uploading it now.  I did try to attach the file yesterday for Linda, but the 'image' function kept crashing.. I'm using a macbook of my daughter's so that may be the problem with the uploading?  Will have a go.

                   

                  Also can anyone suggest a good step by step way to learn the packages?  I did see that the range of 'Missing Manuals' have a god write up.

                   

                  Thanks again, so much appreciated !

                   

                  ukip1.png

                   

                   

                  This is the css file created by Fireworks

                   

                  Is that what you need?

                   

                  @charset "utf-8";

                   

                  body {

                  background-color: #fff;

                  font-size: 62.5%;

                  margin: 0;

                  padding: 0;

                  }

                  body * {

                  font-size: 100%;

                  }

                  h1, h2, h3, h4, h5, h6 {

                  font-weight: normal;

                  }

                  p {

                  margin-bottom: 1.1em;

                  margin-top: 0;

                  }

                  #main p.lastNode {

                  margin-bottom: 0;

                  }

                  a:link img, a:visited img {

                  border: none;

                  }

                  div.clearFloat {

                  clear: both;

                  font-size: 0;

                  height: 0;

                  line-height: 0px;

                  }

                  li.clearFloat {

                  clear: both;

                  }

                  ul.symbolList {

                  display: inline;

                  float: left;

                  list-style-type: none;

                  margin: 0;

                  padding: 0;

                  }

                  .AbsWrap {

                  position: relative;

                  width: 100%;

                  }

                  .rowWrap {

                  width: 100%;

                  }

                  #main {

                  margin: 0 auto;

                  width: 960px;

                  }

                  #header {

                  margin-left: 12px;

                  margin-top: 1px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  background-color: #fff;

                  background-attachment: scroll;

                  background-image: url(images/bg_header.png);

                  background-position: left top;

                  background-repeat: repeat-x;

                  width: 940px;

                  padding-top: 0px;

                  height: 100px;

                  }

                  html > body #header {

                  height: auto;

                  min-height: 100px;

                  }

                  #bg_header_top {

                  margin-left: 0px;

                  margin-top: 0px;

                  background-image: url(images/bg_header_top.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 9px;

                  margin-bottom: 0;

                  width: 938px;

                  }

                  #colwrap2 {

                  float: left;

                  margin-left: 0px;

                  margin-top: 0px;

                  width: 561px;

                  }

                  #ukipbath_r3_c2 {

                  margin-left: 0px;

                  margin-top: 0px;

                  background-image: url(images/ukipbath_r3_c2.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 1px;

                  margin-bottom: 0;

                  width: 562px;

                  }

                  #logo {

                  margin-left: 12px;

                  margin-top: 4px;

                  display: inline;

                  float: left;

                  height: 79px;

                  margin-bottom: 0;

                  width: 506px;

                  }

                  #ukipbath_r3_c9 {

                  margin-left: 0px;

                  margin-top: 0px;

                  display: inline;

                  float: left;

                  height: 91px;

                  margin-bottom: 0;

                  width: 369px;

                  }

                  #ukipbath_r3_c12 {

                  margin-left: 0px;

                  margin-top: 0px;

                  background-image: url(images/ukipbath_r3_c12.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 1px;

                  margin-bottom: 0;

                  width: 7px;

                  }

                  #nav_top {

                  margin-left: 10px;

                  margin-top: 4px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  background-color: #7e276e;

                  width: 940px;

                  padding-top: 0px;

                  height: 39px;

                  }

                  html > body #nav_top {

                  height: auto;

                  min-height: 40px;

                  }

                  #Home {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 70px;

                  margin-top: 11px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #Home :link, #Home :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Home :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Home :hover, #Home :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Home :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Bath_Enterprise_Trust {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 61px;

                  margin-top: 10px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #Bath_Enterprise_Trust :link, #Bath_Enterprise_Trust :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Bath_Enterprise_Trust :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Bath_Enterprise_Trust :hover, #Bath_Enterprise_Trust :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Bath_Enterprise_Trust :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #The_Team {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 49px;

                  margin-top: 11px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #The_Team :link, #The_Team :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #The_Team :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #The_Team :hover, #The_Team :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #The_Team :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #News {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 55px;

                  margin-top: 11px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #News :link, #News :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #News :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #News :hover, #News :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #News :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Contact {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 47px;

                  margin-top: 11px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #Contact :link, #Contact :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Contact :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Contact :hover, #Contact :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Contact :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Links {

                  color: #fff;

                  font-weight: bold;

                  font-family: Tahoma, Geneva, sans-serif;

                  font-size: 140%;

                  margin-left: 70px;

                  margin-top: 11px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  }

                  #Links :link, #Links :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Links :visited {

                  color: #fff;

                  font-weight: bold;

                  text-decoration: none;

                  }

                  #Links :hover, #Links :focus {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #Links :active {

                  color: #ececec;

                  font-weight: bold;

                  text-decoration: underline;

                  }

                  #content_wrapper {

                  margin-left: 10px;

                  margin-top: 5px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 940px;

                  padding-top: 0px;

                  height: 1399px;

                  }

                  html > body #content_wrapper {

                  height: auto;

                  min-height: 1400px;

                  }

                  #colwrap3 {

                  float: left;

                  margin-left: 0px;

                  margin-top: 0px;

                  width: 219px;

                  }

                  #bg_nav_col {

                  margin-left: 0px;

                  margin-top: 12px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  background-color: #7e276e;

                  background-attachment: scroll;

                  background-image: url(images/bg_side_nav_middle.gif);

                  background-position: center center;

                  background-repeat: repeat-y;

                  width: 220px;

                  padding-top: 0px;

                  height: 1275px;

                  }

                  html > body #bg_nav_col {

                  height: auto;

                  min-height: 1275px;

                  }

                  #bg_side_nav_top {

                  margin-left: 14px;

                  margin-top: 0px;

                  background-image: url(images/bg_side_nav_top.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 8px;

                  margin-bottom: 0;

                  width: 190px;

                  }

                  .h4_heading {

                  font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;

                  font-size: 200%;

                  font-weight: bold;

                  text-align: center;

                  color: #000;

                  line-height: 155%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 8px;

                  margin-top: 12px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 197px;

                  }

                  #bg_side_nav_bottom {

                  margin-left: 14px;

                  margin-top: 90px;

                  background-image: url(images/bg_side_nav_bottom.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 8px;

                  margin-bottom: 0;

                  width: 5px;

                  }

                  #ukipbath_r13_c5 {

                  margin-left: 10px;

                  margin-top: 46px;

                  display: inline;

                  float: left;

                  height: 220px;

                  margin-bottom: 0;

                  width: 175px;

                  }

                  .Txt_Has {

                  font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;

                  font-size: 180%;

                  font-weight: bold;

                  text-align: center;

                  color: #7e266c;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 24px;

                  margin-top: 9px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 174px;

                  }

                  .Txt_Loyal {

                  font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;

                  font-size: 180%;

                  font-weight: bold;

                  text-align: center;

                  color: #7e266c;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 21px;

                  margin-top: 17px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 179px;

                  }

                  .Txt_Is {

                  font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;

                  font-size: 180%;

                  font-weight: bold;

                  text-align: center;

                  color: #7e266c;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 24px;

                  margin-top: 21px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 174px;

                  }

                  #colwrap4 {

                  float: left;

                  margin-left: 0px;

                  margin-top: 0px;

                  width: 500px;

                  }

                  #content_img_2 {

                  margin-left: 20px;

                  margin-top: 13px;

                  display: inline;

                  float: left;

                  height: 163px;

                  margin-bottom: 0;

                  width: 461px;

                  }

                  #content_img_1 {

                  margin-left: 27px;

                  margin-top: 47px;

                  display: inline;

                  float: left;

                  height: 116px;

                  margin-bottom: 0;

                  width: 449px;

                  }

                  .h1_heading {

                  font-family: Arial, Helvetica, sans-serif;

                  font-size: 180%;

                  text-align: center;

                  color: #000;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 21px;

                  margin-top: 14px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 461px;

                  }

                  .main_content {

                  font-family: Arial, Helvetica, sans-serif;

                  font-size: 160%;

                  text-align: left;

                  color: #000;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 3px;

                  margin-top: 7px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 497px;

                  }

                  #colwrap5 {

                  float: left;

                  margin-left: 0px;

                  margin-top: 0px;

                  width: 220px;

                  }

                  #bg_sub_col_top {

                  margin-left: 0px;

                  margin-top: 12px;

                  background-image: url(images/bg_sub_col_top.gif);

                  overflow: hidden;

                  display: inline;

                  float: left;

                  height: 8px;

                  margin-bottom: 0;

                  width: 220px;

                  }

                  #footer {

                  margin-left: 0px;

                  margin-top: 24px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  background-color: #7e276e;

                  width: 940px;

                  padding-top: 0px;

                  height: 39px;

                  }

                  html > body #footer {

                  height: auto;

                  min-height: 40px;

                  }

                  .Txt_Copyright {

                  font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;

                  font-size: 140%;

                  font-weight: bold;

                  text-align: center;

                  color: #000;

                  line-height: 120%;

                  padding-bottom: 2px;

                  padding-top: 1px;

                  margin-left: 17px;

                  margin-top: 12px;

                  display: inline;

                  float: left;

                  margin-bottom: 0;

                  width: 904px;

                  }

                   

                   

                  • 6. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                    inspiration100 Level 1

                    Hi Pixor

                     

                    Thank you so much for the links I will have a look at those.

                     

                    I did try to upload with the camera image, but it crashed on me.  Seems to be working tonight though - thanks .  Must have been the ash cloud from Iceland. !

                     

                    Thanks again, much apppreciated.

                     

                    Julie

                    • 7. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                      pixlor Level 4

                      Also can anyone suggest a good step by step way to learn the packages?  I did see that the range of 'Missing Manuals' have a god write up.

                       

                      Hmm. There's learning the software, so you can make it do what you want, but there's also learning the technology so you know what you want the software to do. The "Missing Manuals" series are generally well-respected. I also like the "Visual Quickstart Guide" series (both for software and technology).

                       

                      Another option, depending on what's available near you, is to take a class. Hands-on training in software packages is good, because you can get help right away if something doesn't work right.

                       

                      The thing is, you can build HTML and CSS without Dreamweaver, but knowing Dreamweaver doesn't do you much good if you don't know your HTML/CSS. The most recent book I have that you might find value in is from Sitepoint: http://www.sitepoint.com/books/css2/ (Looks like you can only get the .pdf version, now, though.)

                       

                      Thank you so much for the links I will have a look at those.

                       

                      I did try to upload with the camera image, but it crashed on me.  Seems to be working tonight though - thanks .  Must have been the ash cloud from Iceland. !

                       

                       

                      I think...start with the NetTuts+ tutorial.

                       

                      Yeah, I don't know why the upload is so buggy! Glad to see you got it working!

                       

                      Lorraine

                      • 8. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                        inspiration100 Level 1

                        Hi Lorraine

                         

                        Thanks for the info, much appreciated.  I have enjoyed putting the site together and the challenge, but like all things get very frustrated when something doesn't work and I don't know how to fix it..  I think the idea of learning css and html is a good one, then having some background knowledge as always helps.

                         

                        I haven't got the page working yet, the image is the fireworks file so it looks good but dreamweaver doesn't transpose it right.....  The css is also the fireworks created file.  As already said if I knew coding I may be able to see where it all goes wrong.

                        I don't understand why if Dreamweaver is meant to work with Fireworks why like you say it is very buggy.  A pointless use of time.

                        Runrun is very kindly looking at the file for me, so hopefully will get it working .

                         

                        Thanks again for all your advice, very much appreciated

                        Kind Regards

                        Julie

                        • 9. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                          pixlor Level 4

                          Fireworks isn't intended to be a program that you create Web sites in. It's intended to be a program you use to design your layouts, then export your graphics from. In addition, it can export HTML and CSS for prototypes - working pages that you can show others how the site should behave so that you can get feedback. But these are rough works that you shouldn't rely on.

                           

                          You can create a number of effects in Fireworks - including gradients, rounded corners, and transparency - that you have to treat carefully when you go to code a Web site. You really do know how to put things together, you need to know the basics and the limitations, or your page won't work as you expect. Fireworks makes some really simple assumptions for its export. If you don't understand how HTML works, then you can inadvertently design a page that is very difficult to code.

                           

                          In Fireworks and Dreamweaver you have two very powerful tools. But they are just that: tools. Just as having power saws and nail guns are wonderful tools, but they can't build houses for you. Power mixers and electronically-controlled convection ovens are great, but they can't bake a cake. The tools do not substitute for knowing what you're doing. If you want to build a house, then you need to know about blueprints and lumber and structures. To bake a cake, you need to know about recipes and ingredients and baking times. In the case of building a Web site, you need to know HTML (or HTML/CSS). You need some kind of tool, yes. But it's the knowledge underneath that drives them, not the tools themselves.

                          • 10. Re: Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP
                            inspiration100 Level 1

                            Thanks for the insite.  Yes I totally agree, I am going to look at a course for learning the coding.  I think I was naive to hope that it would do all the work for me !  I had only just noticed fireworks and some tutorials on it and assumed it would do all the graphics and then dreamweaver code it for the page.  Having said that, it does do more than I initially imagined and I have been pleased with my results, albeit the problems I have encountered since trying to get more professional looks to my pages.

                            I am looking forward to starting a course now to learn it properly and do the packages justice !

                             

                            Thanks for all your comments and advice, they are all much appreciated and taken on board.

                             

                            Kind regards

                            Julie