Module 2 lexington minuteman web development basic layout template
0 likes544 views
This document provides instructions for a web design module in 3 steps. Step 1 has students copy HTML and CSS code into a template to create a webpage layout defining sizes and colors. Step 2 instructs on saving the file as an HTML page. Step 3 states the goal is to have a layout with a preferred color scheme to add content.
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
- 4. index </head> <body> <div id="wrapper"> <div id="banner"> </div> <div id="navigationarea"> </div> <div id="centerbox"> </div> <div id="footer"> </div> </div> </body> </html> Page 3