Module 2 lexington minuteman web development basic layout template
•
0 gostou•538 visualizações
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Semelhante a Module 2 lexington minuteman web development basic layout template
Semelhante a Module 2 lexington minuteman web development basic layout template (20)
Mais de Daniel Downs
Mais de Daniel Downs (20)
Último
Último (20)
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