Web Design‎ > ‎Assignments‎ > ‎

Assignment 4


Start with the two column layout that you looked at last week at w3schools.com. You'll probably want to copy the code for that page, as it will be your starting point for this project. 



But it's only a place to start. You'll be making many changes to the original code for this page. The items below define what you'll be doing.

div.container controls the entire layout. You'll need to make a few changes here to accommodate some of the formatting changes you'll be adding to your page. Here's how...

div.header defines the gray banner at the top. You'll be putting a drop-down menubar in it. You'll also be fixing it to the screen frame, so content on the page scrolls under it as the page moves down. Here's how...
>>> And here's how to do the menubar inside the header....

div.left defines the left hand section of the page. You'll be putting a vertical image gallery in it, and a background texture behind it. Here's how...

div.content defines the main content of the page. You'll be putting text information in it related to the images and menubar items that you choose to put in the div.header and div.left sections. You'll also code link tags in it as well. Here's how...

div.footer defines the gray banner at the bottom of the screen. You'll include copyright notice and an email link to yourself in this section, and, like the div.header, will fix it to the screen frame so the content scrolls under it.  Here's how...

You'll also be adding another item to the page:

div.box will define a box of information that floats on the right side of the screen and scrolls up and under the div.header section as the page moves.  Here's how...

You are free to change colors, font styles, widths, borders, etc. as you please; just make sure you meet all the basic requirements.

Here's what it will look like with many of the items above changed. Yours, of course, will look different.

Here's a quick look at how you will be graded on this assignment, so make sure you aren't forgetting anything. If you haven't already opened a New Google Doc using the Template called Assign4Requirements, you might want to do that. It's a little easier to navigate than what's below, and you can mark off items as you complete them. 

Assign4Requirements


ċ
twocolumnlayout(2).html
(5k)
Peter Knowles,
Nov 28, 2011, 6:33 AM
Comments