Module 2 lexington minuteman web development basic layout template
1. Module 2: Web Design & Development
Step 1: Using the template at the bottom of this document enter the code listed into the
notepad document. This template covers learning:
Defining the layout of HTML & CSS in the code.
Defining the size of the body of the webpage.
Determining the height, width, background colors of divs in the layout.
Working with margins, hex colors and div id’s.
Use these resources to define your color schemes:
Hex Color Web Resource
http://www.december.com/html/spec/color0.html
Color Scheme Designer
http://colorschemedesigner.com/
Step 2 . Once all the code is entered you will need to save the file to view as a web page.
The process for doing this is:
1. File>save as>index.html
2. Change the file type to “all files”
3. Save into a folder on your desktop.
4. Click on the saved browser file and see if it views the way you need.
5. This will be the layout for your homepage.
Step 3. By the end of this lesson you should have a layout which has the color scheme
you like and you can begin to envision your content for the homepage into the web page.
2. index
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body{
width:1000px;
height:1000px;
background-color:#000000;
}
#wrapper{
margin:auto;
width:900px;
height:900px;
background-color:#ffffff;
margin-left:170px;
}
#banner{
width:900px;
height:150px;
Page 1
