First ensure you are working within a defined Local Site folder. This is a critical 1st step otherwise DW can't manage links and assets for you. Go to Site > New Site or Manage Sites and tell DW where you want to keep all your site files on your local hard drive. eg: C:\YourSiteName
Then, Copy & Paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with CSS 2-Col Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/**CSS Reset**/
* {
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: baseline;
}
/**Layout**/
body {
padding: 0;
width: 80%; /**adjust width in px or % as required**/
margin: 0 auto; /**this is centered**/
/**change background image to your own**/
background: #FCC url(http://alt-web.com/Images/BG/tile2.gif) repeat fixed;
color: #505050;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
box-shadow: 2px 2px 4px #333;
}
header {
margin: 0;
padding: 0 1%;
width: 100%;
background: #B00202;
color: #FFF;
}
/**top menu**/
nav {
background: #69C;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
display: inline-block;
margin: 0 3% 0 5%;
}
/**menu link styles**/
nav li a {
color: #FFF;
text-decoration: none;
line-height: 2.5em;
padding: 6px;
border: 1px solid #CCC;
}
/**on select or mouseover**/
nav li a:hover, nav li a:active, nav li a:focus {
background: #CCC;
color: #505050;
}
#wrapper {
/**50% semi-transparent background**/
background: rgba(255,255,255,0.5);
overflow: hidden; /**float containment**/
}
/**main content**/
article {
padding: 0 2%;
/**40% semi-transparent background**/
background: rgba(255,255,255,0.4);
float: left;
width: 70%;
}
figure {
width: 80%;
margin: 4% auto 4% auto;
text-align: center;
}
/**right sidebar**/
aside {
padding: 0 2%;
float: left;
width: 30%;
}
footer {
clear: both;
background: #B00202;
color: #FFF;
text-align: center;
margin: 0;
}
/**typography**/
header h1, header h2 {
display: inline;
color: #F5DD83;
padding: 0 1%;
}
h3 {
color: #2294AE;
margin-bottom: 0
}
p { margin: 0 0 1em 0 }
figcaption {
text-align: center;
font-style: oblique;
font-size: small;
color: #2294AE;
}
</style>
</head>
<body>
<!--begin header-->
<header>
<h1>Sitename</h1>
<h2>| Responsive CSS Layout</h2>
</header>
<!--begin navigation-->
<nav>
<ul>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
</ul>
</nav>
<div id="wrapper">
<!--begin main content-->
<article>
<h3>Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 1 Caption</figcaption>
</figure>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 2 Caption</figcaption>
</figure>
</article>
<!--begin right sidebar-->
<aside>
<h3>Aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</aside>
<!--end wrapper--></div>
<!--begin footer-->
<footer>
<small>© 2014 Your Site Name. All rights reserved</small>
</footer>
</body>
</html>
Nancy O.