1. Class 15

2. Rest of the Semester
• Class 15 – Grid Layout I
• Class 16 – Grid Layout II
• Class 17 – Navigation & Spry
• Class 18 – JQuery & Slideshow
• Class 19 – JQuery & Photo Gallery
• Class 20 – More Spry
• Class 21 – Forms
• Class 22 – CSS for Various Media
• Class 23 – 3rd Party Modules
• Class 24 – Going Live: FTP, Servers, Domains / Content Management
Systems/ Looking into the Future: HTML5 & CSS3
• Class 25 – Final Project Presentation
• Class 26 – Final Project Presentation

3. Grid Layout
Walk with me!

4. Creating Layouts using Grid Framework
• For the two classes, we will create two layouts
with Grid Layout framework.
• First Layout (class 15) - Relatively simple
layout that may be used for inside-pages.
• Second Layout (class 16) - Bit complex that
may be used for the front page.

5. Grid Layout Examples
• http://grid-based.com/

6. 960.gs – How it Works
• http://960.gs

7. 960.gs – the Basics
The basics principles
You have to know a couple basic principles to “learn how the
framework works“. You can learn these during the
experimenting process, but I will explain them here for you,
too. Let’s start.
Do not edit 960.css
A small note before: do not edit the 960.css file. If you do this,
you won’t be able to update the framework in the future.
Because we need to style our HTML though, we will create a
separated CSS file.

8. 960.gs – the Basics
Once we have this ready, we have to include our own CSS file.
For example, you can call this file style.css or site.css or
anything else. Include this file with these codes:
<link rel="stylesheet" type="text/css" href="path/to/960/reset.css" />
<link rel="stylesheet" type="text/css" href="path/to/960/960.css" />
<link rel="stylesheet" type="text/css" href="path/to/960/text.css" />

9. 960.gs – the Basics
Once we have this ready, we have to include our own CSS file.
For example, you can call this file style.css or site.css or
anything else. Include this file with these codes:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />

10. 960.gs – the Basics
Containers
In the 960 framework, you can choose between 2 container
classes namely .container_12 and .container_16. These
containers are always 960px width and the difference lies in
the number of Columns.

11. 960.gs – the Basics
Grids / Columns
For 2 columns in your container (say sidebar/content), you can
do that this way:
<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>
the sum of the first column (grid_4) added with the second column (grid_8) is exact 12

12. 960.gs – the Basics
• Let’s say we will create a layout with 4 columns. The codes will
be these:
<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div> </div>

13. 960.gs – the Basics
Margins
By default, the columns have some margin between them. Every
grid_# class has 10px left and right margin. This means that in
total, between 2 columns, we have a total margin of 20px.
To get rid of margin-left, add class alpha
To get rid of margin-right, add class omega
<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>

14. 960.gs – the Basics
Styling
Add styles to the elements by assigning IDs or Classes in a
separate CSS file.
<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id="content" class="grid_6">main content</div>
<div id="photos" class="grid_2">photo's</div>
<div id="advertisements" class="grid_2 omega">advertisement</div>
</div>

15. Assignment Due November 7, 2010
1. Add content to the Two-Column Layout - you may plug
in content from the midterm project.
2. Create a header image. Your header image should be
one of the following:
– A background image without text
– An image with website name embedded (text as image)
We will use the header image for the front page in class 16.
Make sure that your header image does not go over
940px in width.