2 Replies Latest reply on Feb 5, 2011 10:32 AM by petrenko_spb

    Problem with exporting Fireworks mock-up into Dreamweaver

    petrenko_spb

      Hallo everyone,

       

       

       

      I’m  beginner in Fireworks and Dreamweaver. Right now I am working on a  mock-up of a web-site in Fireworks. Just for practice, I created very  simple structure in Fireworks CS5 (two rectangles with one line of text  in 3 different languages placed into one rectangle). When I exported  created page into Dreamweaver CS5 as Html and Images, it looked nice  (obviously, since it is Html and Images). Then I tried to export the  page as CSS and Images. The strange thing is that the page looks fine  when displayed in Firefox, but the text breaks into two lines when  displayed in Explorer or Opera. Moreover, the design of the page in  Dreamweaver doesn’t replicate the Fireworks’ mock-up and looks not as  nice as in Fireworks. For you reference I am including the Html and CSS  code that was created by Fireworks. Does anybody have an idea what is  happening and what should I do to prevent this kind of problems when  trying exporting more complicated Fireworks mock-ups?

       

       

       

      Sincerely yours,

       

       

      Arti

       

       

       

      This is the code created by Fireworks CS5:

       

      Html:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

                     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                     <title>index_ALA_20110129</title>

                     <link rel="stylesheet" type="text/css" href="./index_ALA_20110129.css" media="all" />

                     <!--[if IE]>

                     <style type="text/css" media="all">.borderitem {border-style: solid;}</style>

                     <![endif]-->

      </head>

       

      <body>

       

      <div id="main">

                     <div id="hor_line">

                     </div>

                     <div class="clearFloat"></div>

                     <div class="welcome">

                                   

                                                   <p class="lastNode">いらしゃいませ

                                    </p>

                     </div>

                     <div class="clearFloat"></div>

                     <div id="blue_box">

                     </div>

                     <div id="green_box">

                                    <div class="pass_***">

                                                  

                                                                  <p class="lastNode">パスワードを入れてください

                                                   </p>

                                    </div>

                                    <div class="clearFloat"></div>

                                    <div class="pass_eng">

                                                  

                                                                  <p class="lastNode">please enter password

                                                   </p>

                                    </div>

                                    <div class="clearFloat"></div>

                                    <div class="pass_rus">

                                                  

                                                                  <p class="lastNode">введите ваш пароль пожалуйста

                                                   </p>

                                    </div>

                                    <div class="clearFloat"></div>

                     </div>

                     <div id="Div">

                     </div>

      </div>

      </body>

      </html>  

       

       

      And this is CSS:

       

       

      @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 0 0;

                     width: 1000px;

      }

      #hor_line {

                     margin-left: 45px;

                     margin-top: 80px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

                     border: 11px solid #ccc;

                     width: 887px;

                     padding-top: 1px;

                     height: 1px;

                     height: 2px;

                     overflow: hidden;

      }

      .welcome {

                     font-family: 'MS Pゴシック', Arial, Helvetica, sans-serif;

                     font-size: 400%;

                     font-weight: bold;

                     text-align: left;

                     text-decoration: underline;

                     color: #900;

                     line-height: 120%;

                     padding-bottom: 2px;

                     padding-top: 1px;

                     margin-left: 50px;

                     margin-top: 58px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

      }

      #blue_box {

                     margin-left: 44px;

                     margin-top: 16px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

                     background-color: #03c;

                     width: 417px;

                     padding-top: 0px;

                     height: 290px;

      }

      html > body #blue_box {

                     height: auto;

                     min-height: 291px;

      }

      #green_box {

                     margin-left: 57px;

                     margin-top: 16px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

                     background-color: #9f9;

                     width: 406px;

                     padding-top: 0px;

                     height: 290px;

      }

      html > body #green_box {

                     height: auto;

                     min-height: 291px;

      }

      .pass_*** {

                     font-family: 'メイリオ', Arial, Helvetica, sans-serif;

                     font-size: 230%;

                     font-weight: bold;

                     text-align: left;

                     color: #006;

                     line-height: 120%;

                     padding-bottom: 2px;

                     padding-top: 1px;

                     margin-left: 31px;

                     margin-top: 42px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

      }

      .pass_eng {

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

                     font-size: 220%;

                     font-weight: bold;

                     text-align: left;

                     color: #39576b;

                     line-height: 120%;

                     padding-bottom: 2px;

                     padding-top: 1px;

                     margin-left: 31px;

                     margin-top: 45px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

      }

      .pass_rus {

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

                     font-size: 180%;

                     font-weight: bold;

                     text-align: left;

                     color: #006;

                     line-height: 120%;

                     padding-bottom: 2px;

                     padding-top: 1px;

                     margin-left: 31px;

                     margin-top: 62px;

                     display: inline;

                     float: left;

                     margin-bottom: 0;

      }

      #Div {

                     margin-right: -95px;

                     margin-top: 108px;

                     display: inline;

                     float: right;

                     margin-bottom: 0;

                     border-left: 1px solid #ccc;

                     height: 1px;

                     width: 1px;

                     height: 1px;

                     overflow: hidden;

      }