Design Fundamentals for the Web – Session 4
September 18, 2014
<< Syllabus
Review of the Web Design Process
Identify the types of users you need to communicate with
Identify what each user type needs to be able to do
Organize your content semantically
Compose appropriate layouts for your content
Create visual hierarchies for your content with type
Apply design principles to emphasize relationships between elements
Create mood and enhance your visual hierarchies and element relationships using color
Breath life into your design with behavioral feedback
Test, rinse & repeat!
HTML Elements for Creating Layouts
<div></div><header></header><nav></nav><aside></aside><article></article><section></section><footer></footer>
More Info on HTML5 Elements for Layouts
Execise
Fire up you FTP client
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 CSSDeck 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 Deck .
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 CSSDeck and experiment with the CSS positioning porperties:
Here's the CSS Positioning Deck .
More info on CSS Positioning
CSS Floating
float: left | right;
clear: left | right | both;
Float Demo
Let's open up CSSDeck and experiment with the CSS positioning porperties:
float: left;clear: left;
Here's the CSS Float Deck .
More info on CSS Floating
Exercise
Fire up your FTP client
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 4
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 <nav>, an <article> and an <aside>, and finally, a <footer> container at the end of the page.
Recreate your pages from your sitemap using this as your new template & put your page links in the <nav> container.
Re-apply your type treatment appropriately for these new page elements.