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.Open Dialog Box
  2. Click on Window > CSS Designer.Window CSS Designer
  3. In the CSS Designer panel, click the + sign and choose Create A New CSS File.Create A New CSS File in CSS Designer Panel
  4. In the dialog box, name the style MainContent, and store the new style in a New Style Sheet File, then click Browse.Create a New CSS File Dialog Box
  5. Choose a place to store the external style sheet. Usually in the root directory. Click Save.Save Style Sheet File As Dialog Box
  6. View the external style sheet clicking on the CSS button at the top-left of the document window.CSS Button
  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