Web Design & Multimedia: Business Web Page Framework

On Friday we began building our business web sites. You are going to build a web site for the business of your choice, and we started with this HTML framework:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Business</title>
<link href="mybusiness.css" rel="stylesheet"></link>
</head>
<body>
<div id="wrapper">
<h1>My Business</h1>
<div class="nav">
 <a href="http://draft.blogger.com/index.html">Home</a> &nbsp;
 <a href="http://draft.blogger.com/option1.html">Option 1</a> &nbsp;
 <a href="http://draft.blogger.com/option2.html">Option 2</a> &nbsp;
 <a href="http://draft.blogger.com/option3.html">Option 3</a> &nbsp;
</div>
<center>
<img src="mypicture.png" width="500" /></center>
<div>
 My Business
 1234 Main Street
 Kelseyville, CA 95451
 (707)123-4567
</div>
<div id="footer">Copyright © 2013 My Business, Inc.
<a href="mailto:youremail@mailplace.com">youremail@mailplace.com</a>
</div>
</div>
</body>
</html>

And then we have a basic framework for the CSS as well which we call mybusiness.css:

body   {
  background-color: #ffc373;
  color: #a65f00;
  font-family: Verdana, Arial, sans-Serif;
  }
#wrapper {
   margin-left: auto;
   margin-right: auto;
   width: 80%;
   }
h1  {
  background-color: #a65f00;
  color: #ffc373;
  line-height: 200%;
  text-align: center;
  }
h2 {
  background-color: #a65f00;
  color: #ffc373;
  line-height: 100%;
  text-align: center;
 }
.nav {
  text-align: center;
  }
a:link {
 color: #000000;
    }
a:visited {
 color: #000000;
 }
#footer  {
  text-align: center;
  background-color: #a65f00;
  color: #ffc373;
  font-size: .60em;
  }

I put a graphic in the web site (mypicture.png) which you can download here as well:

We also explored a few Color Scheme Designers to find good color schemes for our business pages.
http://www.designcontest.com/blog/best-color-scheme-websites-for-designers/

Sunday, September 15, 2013

Business Web Page Framework