ENGH 375/507: __Web Authorship & Design

Overview

For this fourth module you will be using the information from the Learn CSS Layout tutorial site to modify the layout of a basic website.

Step One

Your first step is going to be to download the module4.zip file.

Once you have downloaded the zip file, you will need to right click it and select 'extract' to unzip it.

Please make sure you only have ONE folder that you are editing, that it is named 'module4' in all lowercase letters, and that you have deleted the .zip file and any temporary files.

Step Two: Global Modifications

In this step you will be modifying the .css file to make global changes to your website (i.e. changes that effect each and every page).

Set both your FIRST headers and your footers to have a width of 100% and a height of any number of pixels that you would like.

The first global change that you want to make is to use the fixed position declaration on only the FIRST header on each of your pages so that it sticks at the top of the page even as you scroll through content.

The second global change that you want to make is to use the fixed position declaration on the footer of every page so that it sticks to the bottom of the page even as you scroll through the page.

Try adding top and bottom margins to your #wrapper ID equal to the heights of your FIRST headers and footers respectively to make sure no content gets hidden behind them.

Step Three: Fixed Position Layout on one.html

In this step you will be modifying the presentation of ONLY your one.html file. You will need to use class tags, ID tags, and/or descending and combination selectors to make sure that you only modify these contents.

Once you've appropriately tagged the contents of one.html, begin modifying your main.css file to change their presentation.

Try to make a fixed position layout (done with pixel designations) based on page 8 of the Learn CSS Layout tutorial – i.e. make the aside appear on the left-hand side of the page with the content next to it on its right.

Give the wrapper a relative positioning.

Use absolute position on the aside and article elements and establish their widths, margins, and/or paddings.

Use overflow designations to control the spill out from articles. (Try using overflow on each article and try containing all the articles in a div tag that has the overflow set to scroll.)

Use absolute position values on left and/or right to make the images in both articles appear to the left and right of the paragraphs.

Step Four: Floating Position Layout for two.html

Build a floating position layout based on page 12 of the Learn CSS Layout tutorial. The end result should present almost exactly the same as the previous page.

Give the wrapper a relative positioning.

Use floats on the aside, article, and image elements and establish their widths, margins, and/or paddings with pixels.

Consider clearing the float (page 10) for the footer on this page.

Use the clearfix hack (page 11) for any boxes too small for their content.

Step Five: Responsive Layout for three.html

Build a responsive layout based on page 13 of the Learn CSS Layout tutorial. The end result should present almost exactly the same as the previous page.

Use floats on the aside, article, and image elements and establish their widths, margins, and/or paddings with percentages.

Step Six: Inline-block Layout for four.html

Build an inline-block layout based on page 16 of the Learn CSS Layouts tutorial. The end result should present almost exactly the same as the previous page.

Use inline-block display, vertical align, and percentage widths to achieve layout.

Intermission

Take a look at my attempt at Module 4 and check your work against it. Try to resolve any differences between your code and mine and get your first four pages working correctly.

Once you have completed all four of the different layouts, feel free to move on to the final steps in this module.

Step Seven: Inline-block Photo Gallery for five.html

Build an inline-block based image gallery based on page 15 of the Learn CSS Layouts tutorial.

Be sure to adjust the padding, border, and margins of the images on this page.

Use object-fit and object-position to make all of your images the same size and to determine how they get clipped and/or positioned. Learn more at these links: object-fit and object-position.

Try adding drop shadows to the images in your gallery.

Try adding basic on-hover overlays to your images, or more advanced overlays if you're feeling adventurous. Keep in mind that you will need to implement these overlays somewhat differently, likely targetting the figcaption elements instead of adding new divs around the text.

Step Eight: More Global Modifications

Use CSS3 patterns in your FIRST header and footer on each page. Here is some more info on patterns.

Try adding Google fonts and altering some of the presentation on your headings, paragraphs, and other basic elements to flesh out your page just a bit more.

Step Nine: Extra Credit

Try animating your aside to get more dynamic site navigation.

Try animating your FIRST header on scroll. Here is another way to animate your header on scroll.

Try using these animations to revamp your image gallery.