Spring 2015

Lab01
Basic Desktop Layouts

Due: Tuesday January 27, 2015 11:59 PM

Lab01 - Basic Desktop Layouts

Requirements

Both HTML pages are valid and use proper semantic tags15 pts
Both CSS files are valid10 pts
All required elements are present on both pages10 pts
Page has a pleasant, designed appearance20 pts
The fixed layout page is fixed20 pts
The dynamic layout page is dynamic 25 pts
Total100 pts

Resources

Objective

to create fixed and dynamic css layouts for desktop displays

Instructions

General

For this lab you will need to create two html pages, each with it's own external CSS stylesheet. Both page's content will need to consist of a main header, a top navigation section, a left sidebar, a main content area, and a footer. The actual content "text" in each of these areas can just be Lorem Ipsum sample text of appropriate length. The html and css code must be valid. You html code will be checked to make sure that the tags that are used are semantically appropriate. Both pages should render with a pleasant, designed appearance at desktop resolutions from 800x600 pixels and higher.

Fixed

One of your two html/css page combinations should render in the browser at a fixed width. When the browser that is displaying it is resized the page's content should not be altered. Name your fixed width html page fixed.html and name it's accompanying stylesheet fixed.css

Dynamic

The second of your two html/css page combinations should be called dynamic.html and dynamic.css and should render in the browser with a dynamic layout. This dynamic layout can be fluid/liquid, elastic, or any combination that you feel works well for your design, it's your choice. When the browser displaying the dynamic page is resized the page should change as the size changes.

If you know or have read about responsive design, this is not what I am looking for in this lab. There should not be any specific page size breaks in the content's layout.