Assignment 11 — Designing Page Layout

Description:

You can use the CSS float and position properties to create more complex page layouts for your web page. If you examine web sites, you'll notice that many incorporate multi-column layouts, header and footer regions, menus, sidebars, and so on. This week, you'll start to layout that type of organization for your web pages.

Flows

Browsers place all of the elements on a page within a flow. Block elements (such as divs, paragraphs, lists, headings, and so on) are placed by default on the page in order from top to bottom, have a line break between them, and take the entire width of the page.

Inline elements (such as span, emphasis, strong, and so on) and text within a block flow from the left top corner to the lower right corner of the block that they are in. If the flow of the text and inline elements is wider than the width of the page, they wrap to the next line and the height of the containing block increases.

If the margin property of two adjacent blocks differs, the browser uses the larger of the two margin properties to create the white space between the two elements.

I float right with the float:right property.

I float left with the float:left property.

You can impact the default flow of the block elements by the using CSS float properties. You can specify that the block floats to the left or to the right of the blocks before and after it. The adjacent blocks will flow around the block with value that you set. You can use the float clear property to not allow things to float to the left or right of it.

I use float:clear so that those other floats can't tell me what to do.

Layout types

You can use several different layout types when designing your pages:

A layout is considered liquid when the content of the content on the page expands to fit the page when you resize the browser.
A layout is considered frozen is when the width of the content is fixed no matter how you resize the browser. When you create a frozen layout, you set fixed widths for your content in your CSS.
```
.contents {
  width:800px;
}
```
A layout is considered jello when the content is fixed (and usually centered) but the margins expand and shrink with the browser window. When you create a jello layout, you typically set a fixed width as well as automatic margins:
```
.contents {
  width:800px;
  margin-left: auto;
  margin-right: auto;
}
```

Positioning

You can use the CSS position element to position elements by specifying the top, right, bottom, and left properties of where the element should be located.

Position type	Description
static	The block element is positioned within the normal block flow.
absolute	The block element is positioned at the location specified in the top, right, bottom, and left properties, relative to the containing element in which it is placed. div {position:absolute; top: 100px; left:100px;}
fixed	The block element is positioned at the location specified in the top, right, bottom and left properties, relative to the page itself (and not elements within the page. Use fixed when you want an element to appear in a specific location on a page, and you don't want it to change regardless on how the rest of the information in the page flows. div {position:absolute; top: 100px; left:100px;}
relative	The block element is positioned relative to where it normally would occur. The top, right, bottom, and left properties act as an offset in this case, to move it relative to its normal position. div {position:relative; top: 100px; left:100px;}

If you have elements that overlap, you can use the z-index property to indicate which element would be appear on top.

For more information, see Chapter 11 of the Head First HTML and CSS book.

CSS properties:

float	position	clear	display
top	right	left	bottom
vertical-align	z-index	height

Videos:

Designing page layout

Tasks:

Read and complete the exercises from Chapter 11 of the Head First HTML and CSS book.
Create a folder named Chapter11.
In your Chapter11 folder, create your customized versions of the following files.
- index.html
- starbuzz.css
- images folder that contains the required images
Duplicate the folder structure described in the book.
Ensure that all of your links work correctly and display the appropriate file when clicked.
Validate the HTML page at https://validator.w3.org/. Fix any errors that occur.
Upload the contents of your Chapter11 folder to your website.
Zip your Chapter11 folder and name the file yourName_chapter11.zip.
Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Grading criteria:

You assignment should demonstrate:

Creating your own customized version of the Starbuzz files, including having a header, a main body, a left side bar, a right side bar, and a footer.
Defining the heading to have a logo on the left and a slogan on the right.
Using the table display page layout to create a three-column display of the main body and side bars.
Adding an image using absolute positioning to the header.
Adding an image using fixed positioning and using a negative left property value.
Defining the style for a footer that doesn't overlap with any of the columns.
Validating your HTML and CSS files and correcting any errors.
Uploading your files to your website.

Due:

By 11/20

Example assignment:

Chapter 11 example