Demo - CSS Rules with Dreamweaver

Contact Us or call 1-877-932-8228
Demo - CSS Rules with Dreamweaver

Demo - CSS rules with Dreamweaver

  1. Using Dreamweaver, open integration/Demos/LL_HTML_CODE-Img/layout_withFolders.html.
  2. Click on Window > CSS Designer.
  3. In the CSS Designer panel, click the + sign and choose Create A New CSS File.
  4. In the dialog box, name the style MainContent, and store the new style in a New Style Sheet File, then click Browse.
  5. Choose a place to store the external style sheet. Usually in the root directory. Click Save.
  6. View the external style sheet clicking on the CSS button at the top-left of the document window.
  7. The code behind the CSS is now available to view and edit directly.
  8. Edit the code to match below.
    @charset "utf-8";
              body {
    background-color:#333;
    margin:0px;
    }
    #MainContent {
    margin: auto;
    height: 768px;
    width: 1024px;
    }
    #Top {
    margin: 0px;
    padding: 0px;
    width:1024px;
    height:122px;
    background-image:url(images/layout_withFolders_01.png);
    }
    #Main {
    margin: 0px;
    padding: 0px;
    height: 646px;
    width: 1024px;
    background-image:url(images/layout_withFolders_02.png);
    }
    #LeftCol {
    width:250px;
    height:646px;
    left:0px;
    top:0px;
    float:left;
    overflow:hidden;
    }
    #MiddleCol {
    width:500px;
    height:570px;
    left:250px;
    margin-top:15px; 
    float:left;
    overflow:auto;
    }
    #RightCol {
    width:254px;
    height:646px;
    left:750px;
    top:0px;
    float:left;
    overflow:hidden;
    }
    #Specials {
    position: relative;
    width: 190px;
    height: 150px;
    margin-left: 35px;
    margin-top: 100px;
    overflow: auto;
    }
    #navArea {
    position:relative;
    width:560px;
    height:30px;
    left:464px;
    top:90px;
    text-align:right;
    }
  9. Save the file for use later with artwork integration.
Next