Combining the Look and Function - Exercise

Contact Us or call 1-877-932-8228
Combining the Look and Function - Exercise

Combining the Look and Function

Duration: 15 to 25 minutes.

In this exercise, you will use artwork and CSS rules to create a proper page layout.

  1. Using Dreamweaver, open integration/Exercises/Sliced Art/Layout_SLICED.html.
  2. Use the CSS tools available to build rules that will place the images back into the proper layout, making sure the content to come later will fit properly.
  3. Save your changes and preview.

Possible code you may choose to use:

CSS style sheet:

@charset "utf-8";
body {
background-color:#145f8c;
margin:0px;
}
#MainContent {
margin: auto;
height: 768px;
width: 1024px;
background-color:#FFF;
}
#Main {
margin: 0px;
padding: 0px;
width:1024px;
height:546px;
background-image:url(images/Layout_SLICED_01.png);
background-repeat:no-repeat;
}
#Bottom {
margin: 0px;
padding-top:125px;
height: 174px;
width: 1024px;
clear:both;
background-image:url(images/Layout_SLICED_03.png);
background-repeat:no-repeat;
text-align:center;
}
#Nav {
width:230px;
margin-left:25px;
height:450px;
margin-top:75px;
float:left;
overflow:hidden;
}
#Content {
width:669px;
height:450px;
margin-left:100px;
margin-top:75px; 
float:left;
overflow:auto;
}
#ContactArea {
position:relative;
width:560px;
height:100px;
left:464px;
top:25px;
text-align:right;
}

HTML page code:

<body>
<div id="MainContent">
<div id="Main">
<div id="ContactArea">Contact area here</div>
<div id="Nav">Navigation</div>
<div id="Content">Main data and stuff here.  </div>
</div>
<div id="Bottom">bottom area</div>
</div>
</body>

Solution:

  1. Using Dreamweaver, open integration/Exercises/Sliced Art/Layout_SLICED.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. Click OK when you return to the Create New CSS File dialog box.
  7. View the external style sheet by clicking ABC_Styles.css.
  8. The code behind the CSS is now available to view and edit directly.
  9. Edit the code to match below.
  10. @charset "utf-8"; body { background-color:#145f8c; margin:0px; } #MainContent { margin: auto; height: 768px; width: 1024px; background-color:#FFF; } #Main { margin: 0px; padding: 0px; width:1024px; height:546px; background-image:url(images/Layout_SLICED_01.png); background-repeat:no-repeat; } #Bottom { margin: 0px; padding-top:125px; height: 174px; width: 1024px; clear:both; background-image:url(images/Layout_SLICED_03.png); background-repeat:no-repeat; text-align:center; } #Nav { width:230px; margin-left:25px; height:450px; margin-top:75px; float:left; overflow:hidden; } #Content { width:669px; height:450px; margin-left:100px; margin-top:75px; float:left; overflow:auto; } #ContactArea { position:relative; width:560px; height:100px; left:464px; top:25px; text-align:right; }
  11. Switch to Code view.
  12. Edit the <body> code to match the sample below.
    <body> <div id="MainContent"> <div id="Main"> <div id="ContactArea">Contact area here</div> <div id="Nav">Navigation</div> <div id="Content">Main data and stuff here. </div> </div> <div id="Bottom">bottom area</div> </div> </body>
  13. Switch back to Design view and run a browser preview.
Next