Class 15
Rest of the Semester
• Class 15 – Grid Layout I
• Class 16 – Grid Layout II
• Class 17 – Navigation & Spry
• Class 18 – JQ...
Grid Layout
Walk with me!
Creating Layouts using Grid Framework
• For the two classes, we will create two layouts
with Grid Layout framework.
• Firs...
Grid Layout Examples
• http://grid-based.com/
960.gs – How it Works
• http://960.gs
960.gs – the Basics
The basics principles
You have to know a couple basic principles to “learn how the
framework works“. Y...
960.gs – the Basics
Once we have this ready, we have to include our own CSS file.
For example, you can call this file styl...
960.gs – the Basics
Once we have this ready, we have to include our own CSS file.
For example, you can call this file styl...
960.gs – the Basics
Containers
In the 960 framework, you can choose between 2 container
classes namely .container_12 and ....
960.gs – the Basics
Grids / Columns
For 2 columns in your container (say sidebar/content), you can
do that this way:
<div ...
960.gs – the Basics
• Let’s say we will create a layout with 4 columns. The codes will
be these:
<div class="container_12"...
960.gs – the Basics
Margins
By default, the columns have some margin between them. Every
grid_# class has 10px left and ri...
960.gs – the Basics
Styling
Add styles to the elements by assigning IDs or Classes in a
separate CSS file.
<div class="con...
Assignment Due November 7, 2010
1. Add content to the Two-Column Layout - you may plug
in content from the midterm project...
Upcoming SlideShare
Loading in …5
×

Class15

704 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
704
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class15

  1. 1. Class 15
  2. 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. 3. Grid Layout Walk with me!
  4. 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. 5. Grid Layout Examples • http://grid-based.com/
  6. 6. 960.gs – How it Works • http://960.gs
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×