November 28

posted Nov 28, 2011, 6:19 AM by Peter Knowles   [ updated Nov 28, 2011, 12:48 PM ]
Today we start our next graded assignment. It's a fairly complicated web layout that makes use of a number of different skills, tags, styles, and features that you've already done individually. The challenge now is to put them all together into a single web page layout. 

To earn full points, you'll need to work carefully through the different steps, and be sure to include all required elements. Plus, you'll want to add a few extra details here or there (suggestions are given throughout the instructions). 

So pay attention, work your way through, and you'll end up with a nicely organized web layout that meets all the criteria. 


Let's start by figuring out some basic pieces of the CSS code we'll be working with. 

Start with the two column layout that you looked at last week at w3schools.com. (Click on the link now to open a new window with the code in it. You'll be using this page throughout today's class.)



In small groups, you'll be working to figure out what all the different pieces of the code are for. What does each line of code do? What happens if you change a measurement, or a color, or a size, or a percentage? 

If you need help figuring out what your options are, use the CSS Reference page, including the list of tags at the left, to try out different options. 

Be ready to explain to the class what EACH line of your code does. (Speakers will be chosen at random; be prepared to represent your group well)

div.container controls the entire layout. Here's what the CSS code looks like:

div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}

div.header defines the gray banner at the top.  Here's what the CSS code looks like:

div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}

div.left defines the left hand section of the page.  Here's what the CSS code looks like:

div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}

div.content defines the main content of the page.  Here's what the CSS code looks like:

div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}

div.footer defines the gray banner at the bottom of the screen. Here's what the CSS code looks like:

div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}

STOP, and let's see what everyone was able to figure out. 


Now that you understand what all those code lines are for, let's see if you can figure out this one:

You'll be adding a CSS element called div.box to the code for this assignment. Here's what the CSS code looks like:

div.box 
{
float:right;
border: 2px yellow dotted;
top:70px;
right:10px;
width:100px;
height:auto;
background-color:#b0c4de;
}

Can you tell from the code what will happen when you paste it in the CSS Code?

Give it a try. Copy the CSS code for div.box and paste it in the w3schools "Try it yourself" window. (Where should you paste it? Be careful.....)

Once it's pasted, click the Edit and Click Me button and see what happens....








































Nothing.

Why not?
Because you haven't called it into action with an HTML class called box. Here's the other part of what you need. 

Copy/paste this HTML code 

<div class="box">
<h3>Additional information</h3>
<p>This is a text box. Why doesn't the rest of the text cover it up? </p>
</div>

right between this HTML code 

<div class="content">
>>>>INSERT HERE<<<<
<h2>Free Web Building Tutorials</h2>

in the <body> section of your page.

NOW try it out. What happens?

What's the answer to the question in the box that appears?













Comments