Design Fundamentals for the Web – Session 5
February 20, 2014
<< Syllabus
HTML Elements for Creating Layouts
<div></div><header></header><nav></nav><aside></aside><ul><article></article><section></section><footer></footer>
More Info on HTML5 Elements for Layouts
Exercise
Log in to Github
Create a new web page using the template page you've been working on (e.g. index.html)
In addition to the <!doctype html>, <html></html>, <head></head>,
<title></title> and <body></body> elements, let's create a wrapper <div></div> holding
some additional layout elements, including a <header></header> and another <div></div> to hold our content elements: <nav></nav>,
an <article></article>, an <aside></aside>,
and a <footer></footer>
CSS Properties for Creating Layouts
CSS Centering
text-align: center;
margin: xxxpx auto;
Centering Demo
Let's open up JSFiddle and experiment with the CSS centering porperties:
margin: xxpx auto xxpx auto; /* centers a container element */text-align: center; /* centers text within an element */
Here's the CSS Centering Fiddle .
More info on CSS Centering
CSS Positioning
position: static | absolute | fixed | relative | initial | inherit;
left: xpx;
right: xpx;
z-index: x;
Positioning Demo
Let's open up JSFiddle and experiment with the CSS positioning porperties:
position: absolute;top: 50px;left: 0px;z-index: -1; /* puts the element behind the others */
Here's the CSS Positioning Fiddle .
More info on CSS Positioning
CSS Floating
float: left | right;
clear: left | right | both;
Float Demo
Let's open up JSFiddle and experiment with the CSS positioning porperties:
float: left;clear: left;
Here's the CSS Float Fiddle .
More info on CSS Floating
Exercise
Log in to Github
Open up the page you created in earlier with the HTML layout elements included
Create a new stylesheet and link it into your HTML page
Using id and tag name selectors, let's apply some style rules to our layout elements
Use an id selector to center your wrapper <div>
Use a tag selector to center the headline in your <header>
Use tag selectors to float your <nav>, <article> & <aside> elements
Use a tag selector to style your <footer> and clear your floats
Types of Layouts
static - fixed width elements
liquid - flexible width elements
responsive - flexible grid with media queries
Check out Liquidapsive.com to get a better idea of some of the different types of layouts your can make, depending on your users' needs.
Assignment 5
Reading
Design
Create a Static Layout for Your Pages
After you have completed the reading assignment, revisit your HTML pages and create a static layout using CSS Positioning.
Create a wrapper <div> to hold the content of your page and center it horizontally.
Create a <header>, a main content <div> containing a <nav>, an <article> and an <aside>, and finally, a <footer> container at the end of the page.
Re-apply your type treatment appropriately for these new page elements.