First Step:
Make a rough drawing of your layout outlining each element
and count how many columns each element spans.
Write this down!
Then, we will start coding our HTML.
THE CSS of the Grid:
.container_15 {
WIDTH: 1200px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
This names and determines the overall shape of webpage, in this case, 1200px wide.
.grid_1 {
POSITION: relative; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 10px; MARGINRIGHT: 10px
}
.grid_2 {
POSITION: relative; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 10px; MARGINRIGHT: 10px
}
....
.grid_15 {
POSITION: relative; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 10px; MARGINRIGHT: 10px
}
This names and determines the individual position of the columns.
Position is Relative, so that it fits into the .container_15,
Display is inline, telling into line up one after the other
Float: Left pushes it as far left as it can go.
The margins give it the bumper space between elements that make up the gutters.
.container_15 .grid_1 {
WIDTH: 60px
}
…
.container_15 .grid_15 {
WIDTH: 1180px
}
These these CSS declarations are the ones that actually determine the width of the columns where a
grid_xx class is assigned.
Writing the .container and the .grid together makes them descendent selectors, meaning that anything
tagged “grid_xx” that is inside of “container_15” will have the defined properties.
THE OTHER SELECTORS
.container_15 .prefix_XX {
PADDING-LEFT: XXpx
}
.container_15 .suffix_XX {
PADDING-LEFT: XXpx
}
.container_15 .push_XX {
LEFT: XXpx
}
.container_15 .pull_1 {
LEFT: -XXpx
}
.alpha {
MARGIN-LEFT: 0px
}
.omega {
MARGIN-RIGHT: 0px
}
Prefix and Suffix make there be empty space (columns) before or after where
they are put. they give additional left (prefix_xx) and right (suffix_xx) padding,
increasing the size of a grid_xx class unit. Thus, prefix_1,prefix_2, and prefix_3 will
give your element left paddings of 80px, 160px, and 240px, respectively; while the
same amount of paddings are given to its suffix_xxcounterparts, but in the opposite
side.
For whitespace (negative) in your designs, just add the prefix_xx and suffix_xx
classes. They lock up your content to a certain width (determined by the grid_xx class
you assign), while the space on either side in filled up with padding.
Push and Pull do just that, they move columns before or after where they currently
are, for semantic reasons. They either give your divs a negative or positive left
padding, then “pull” or “push” your content according to the number of columns you
need your content to be pulled or pushed.
alpha and omega classes cancel the horizontal paddings set by grid_xx classes.
Their primary use lies when you havegrid_xx classes inside nested divs.
they simply zero out the left (alpha) and right (omega) margins. And as we've seen a
while ago, when we assign an element a grid_xxclass, we automatically give it
horizontal margins of 5px on both sides. With nested divs, we don't want to double
these margins, so we give an alpha or an omega class, or both, accordingly.
.clear {
WIDTH: 0px;
DISPLAY: block;
HEIGHT: 0px;
VISIBILITY: hidden;
CLEAR: both;
OVERFLOW: hidden
}
This acts like a return or line break entry in the code.
It stops the follow div (columns) from being pulled up next to the
one before it. Because all of our columns are floated left, the all
want to line up. This stops that.
Width is 0, so it takes up no real space.
Display is block, so it acts like an object that takes up all “available”
space.
Clear means that it cancels out the floating properties on either side
of it. No floating elements allowed on either the left or the right side
with both. (Nothing can be attached to the right or left side of it.)
Visibility: Hidden: The element is invisible (but still takes up space)
Overflow:The overflow property specifies what happens if content
overflows an element's box. Hidden means it is clipped.
Step 1:
Make a list of all of the elements on the page, in the order that they appear.
For example:
●
●
●
●
●
●
●
●
●
KLI Logo
Klingon Language Institute Header
Red Footer Bar
Big Picture of Klingons Screaming
Red Footer Bar
About the Klingon Language Block
About the KLI Block
KLI Activities Block
etc.
Step 2:
Refer to your photoshop file that you designed it in. Using your grid guidelines, count how
many columns each item takes up. Don’t worry about height yet.
For Example:
●
●
●
●
●
●
●
●
●
KLI Logo: 3 columns
Klingon Language Institute Header: 12 columns
Red Footer Bar: 15 columns
Big Picture of Klingons Screaming: 15 columns
Red Footer Bar: 15 columns
About the Klingon Language Block: 5 columns
About the KLI Block: 5 columns
KLI Activities Block: 5 columns
etc.
STEP 3:
Refer to the grid.css file shared with you.
Add the code tags for each element that
determine the width of the that element.
<div class="container_15">
<div class="grid_15"><h1>Klingon
Language Institute</h1>
</div>
<div class="clear"></div>
For example:
We have determined that the KLI Logo takes
up 3 columns:
<div class="grid_15">Big Image</div>
<div class="clear"></div>
<div class="grid_15">Red Footer
Bar</div>
<div class="clear"></div>
So we would add the tags:
<div_class=“grid_3”></div>
around the text “KLI Logo”
So you get:
<div_class=“grid_3”>KLI Logo</div>
Do this for each element.
<div class="grid_5">
About the<br>
KLINGON<br>
LANGUAGE<br>
</div>
<div class="grid_5">
About the<br>
KLI<br>
</div>
<div class="grid_5">
KLI<br>
ACTIVITIES<br>
</div>
STEP 4:
After you have each element surrounded by the proper grid tag, go back to
your design and note which elements are in a row together.
For instance, my KLI logo and header text are in one row.
After each row you have identified, add the following tag:
<div class="clear"></div>
This acts as a “return” or “enter”, creating a line break for each row.
Like this:
<div class="grid_3">KLI Logo
</div>
<div class=”grid_12”> Klingon Language Institute Header
</div>
<div class="clear"></div>
<div class=”grid_15”>Big Picture of Klingons Screaming
</div>
<div class="clear"></div>
etc.
STEP 5:
Next, put those elements that are in a row together (the logo and the header text for example) inside another
set of div tags.
This second set of div tags will make sure to put these items in a row.
Like this:
<div class=”grid_15”>
<div class="grid_3">KLI Logo
</div>
<div class=”grid_12”> Klingon Language Institute Header
</div>
</div>
<div class="clear"></div>
STEP 6:
For those items that are in a row together, like the above put this code after the grid tag for the first element:
alpha
and this one for the last element:
omega
So it will look like this:
<div class=”grid_15”>
<div class="grid_3 alpha">KLI Logo
</div>
<div class=”grid_12 omega”> Klingon Language Institute Header
</div>
</div>
<div class="clear"></div>
Now, think about how you want your page to look, referring back to your
design.
You will have to decide what your type face is (use only web-safe or google
fonts!), background colors, link colors, and row (section) heights
Start filling in the details of your html and your css. You will be able to
change your design as you go.
You will need to insert images and the typefaces you want.
For example, you will likely need to define in your CSS the follow selectors:
<header>
<footer>
<.sectionfooter>
<article>
<.articlevariations>
<h1>
<h2>
<h3>
<p>
<a>
<a:visited>
<img>
Here are some I used:
img{
display: inline-block;
max-width:100%;
height:auto;
vertical-align: center;
padding: 0px;
margin: 0px;
body {
font-family: arial, sans-serif;
background-color: #9e9e9e;
}
header {
color: #ffffff;
background-color: #000000;
text-align: center;
padding: 0px;
margin: 0px;
}
footer {
color: #ffffff;
background-color: #000000;
text-align: center;
font-size: 12px;
padding: 0px;
margin: 0px;
}
.sec_footer {
height: 10px;
color: #ffffff;
background-color: #AE0202;
text-align: center;
padding: 0px;
margin: 0px;
border: none;
}
}
section {
min-height: 190px;
}
article {
color: #ffffff;
background-color: #000000;
padding: 0px;
margin: 0px;
min-height: 140px;
}
.article_800 {
color: #ffffff;
background-color: #000000;
padding: 0px;
margin: 0px;
min-height: 800px;
}
.article_650 {
color: #ffffff;
background-color: #000000;
padding: 0px;
margin: 0px;
min-height: 650px;
}
header {
color: #ffffff;
background-color: #000000;
text-align: center;
padding: 0px;
margin: 0px;
}
article {
color: #ffffff;
background-color: #000000;
padding: 0px;
margin: 0px;
min-height: 140px;
}
.sec_footer {
height: 10px;
color: #ffffff;
background-color: #AE0202;
text-align: center;
padding: 0px;
margin: 0px;
border: none;
}
header {
color: #ffffff;
background-color: #000000;
text-align: center;
padding: 0px;
margin: 0px;
}
HERE IS THE CODE FOR THE HEADER, insider the 15 col. wide
grid, containing the smaller grids, the logo, text, and header tags.
<div class="grid_15">
<header>
<div class="grid_1 prefix_1 alpha">
<img src="http://karlericksondigitalmedia.com/kli/KLIlogo.gif" alt="KLI Logo"
style="float:left;width:auto; height:60px">
</div>
<div class="grid_13 omega">
<h1>Klingon Language Institute</h1>
</div>
</header>
</div>
article {
color: #ffffff;
background-color: #000000;
padding: 0px;
margin: 0px;
min-height: 140px;
}
HERE IS THE CODE FOR THE NAV AREA, inside a 15 col. wide grid, containing three 5 col. wide
grid blocks, each which have an article inside of it. The article properties are what is being used to
determine height.
<div class="grid_5">
<article>
<h2><a href="#language">About the<br>
KLINGON<br>
LANGUAGE<br>
</a></h2>
</article>
</div>
<div class="grid_5">
<article>
<h2><a href="#kli">About the<br>
KLI<br>
</a></h2>
</article>
</div>
<div class="grid_5">
<article>
<h2><a href="#activities">KLI<br>
ACTIVITIES<br>
</a></h2>
</article>
.sec_footer {
height: 10px;
color: #ffffff;
background-color: #AE0202;
text-align: center;
padding: 0px;
margin: 0px;
border: none;
}
And this is how the .sec footer is called in th eHTML.
<div class="grid_15">
<footer class="sec_footer"></footer>
</div>
To create an external style sheet, add this to your <head>:
<link href="grid.css" rel="stylesheet" type="text/css" />
where “grid.css” is the name of the css file.
You can use more than one style sheet and I recommend one for your grid and one for your formatting.
To add an image, use this tag inside of the grid tag you want the image to go:
<div class="grid_7 omega">
<img src="http://karlericksondigitalmedia.com/kli/happy_klingon_web.jpg" alt="Happy
Klingon" style="width:540px;height:auto;">
Where “image src” is the link to the image you want placed.
(after you have it all online, you can shorten the link to something like <img src=
“happy_klingon_web.jpg"
Add your images to your file manager first!
style your images so that they fit the column you want them in, so define the width to the
column width and the height to auto.
To Add an Internal Link or “anchor”
Put this where you want your link to COME from:
<a href="#YourLinkDescription">WORD/IMAGE TO CLICK</a>
And put this where you want the link to GO to:
<a name="YourLinkDescription">WORD/IMAGE DESTINATION</a>
HOMEWORK:
FOR MONDAY:
Finish your Klingon Language Institute redesign, complete with images, colors, typefaces, aAs much
as you can.
You should have specific formatting for all of the important elements like headers, footers,
paragraphs, etc.
We will work Monday on some final formatting elements.
The project will be due at the end of class on Wednesday.
You will be graded on:
The coding:
does it fit into the grid logically
does it have specific coding for the major elements (header, footer, etc.)
The design:
is it appropriate for the content?
doe sit have a well thought out color scheme
does it have a well thought out layout? (do the items make sense where they are at?)
You must have:
At least one external style sheet
At least 4 images
At least three internal links
A header, footer, and a main content area