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.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
  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. Click OK when you return to the Create New CSS File dialog box.
  7. View the external style sheet by clicking ABC_Styles.css.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.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.Design View Browser Preview
Next