Your SlideShare is downloading. ×
Module 2  lexington minuteman web development basic layout template
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Module 2 lexington minuteman web development basic layout template

243

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
243
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 3. index background-color:#efefef; } #navigationarea{ width:900px; height:60px; background-color:#707070; } #centerbox{ width:800px; height:500px; background-color:#d6d6d6; margin-top:30px; margin-left:50px; } #footer{ width:900px; height:150px; background-color:#828282; margin-top:30px; } </style> Page 2
  • 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

×