Part 2: Setting up the files
In this part we’re going to set up the files, folders and CSS framework that we will use to build our interface.
About CSS Frameworks
CSS Frameworks offer a great way to build an interface. They’re robust, expansive and clear. One big disadvantage however is that they take longer to load and you often have code that doesn’t get used at all. For this project, we aren’t going to create anything nearly as complex as some of the frameworks you can find, but it will help us create a complete package.
Step 1: Create the folders
Go to your working directory and create the following folders:
- images (You should have already created this folder in part 1)
- css
Step 2: Create the HTML Files
In your working directory create the following files
- index.htm
- about.htm
- styles.htm
Step 3: Create the CSS Files
In the CSS folder create the following files
- layout.css
- typography.css
- general.css
- home.css
1. Open layout.css and paste the following code, this is called a CSS Reset.
/*======================
RESET
========================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
This basically resets everything so that all the elements are displayed the same way across all browsers. It’s a great time saver.
2. Open typography.css and paste the following code.
/*======================
HEADINGS
========================*/
h1{ }
h2{ }
h3{ }
h4{ }
h5{ }
h6{ }
/*======================
LINKS
========================*/
a
{
}
a:hover
{
}
a:visited
{
}
/*======================
PARAGRAPHS
========================*/
p
{
}
/*======================
STRONG/B EM/I
========================*/
strong, b
{
font-weight:700;
}
em, i
{
font-style:italic;
}
/*======================
UNORDERED LIST
========================*/
ul
{
list-style:disc;
margin-left:30px;
}
ul li
{
}
/*======================
ORDERED LIST
========================*/
ol
{
list-style:decimal;
margin-left:35px;
}
ol li
{
}
/*======================
DEFINITION LIST
========================*/
dl{ }
dt{ font-weight:700; text-decoration:none; margin-top:10px; font-size:14px; border:0; }
dd{ margin-left:18px; }
/*======================
MISC
========================*/
blockquote{ }
abbr{ }
acronym{ }
sub{ font-size:10px; line-height:1.5; vertical-align:bottom; }
sup{ font-size:10px; line-height:1.5; vertical-align:top; }
code{ }
small{ font-size:11px }
These typography styles make it easier for you to globally change all typographic elements. It also covers some of the more obscure HTML tags.
3. Open general.css and paste the following code
/*======================
TABLE
========================*/
table
{
}
table th
{
}
table td
{
}
/*======================
IMAGE
========================*/
img
{
}
This CSS file handles the appearance of general css elements. Anything that doesn’t fall in the category of typography or layout.
When finished, your files should look like:
So that’s it as far as files and CSS frameworks go. Onward!
Comments
Post by hajan reckiest on September 1, 2009
very good download
Post by Antwan on September 10, 2009
Hey! Thnx for this tutarial, it helped me to understand the basics of slicing and creating a solid -cross browser- webpage. With my PHP expierences this will help me master all elements to create a dynamicly perfect website! PS1: Are you planning to add a part of navigation user firnedly through the menu? PS2: Seems you forgot somethings (I didn't have all the images in te process) and what exactly is the styles.htm for..?
Post by Joshua Bolduc on October 3, 2009
Styles.htm is the place where you can put all your generic html elements (headings, images, paragraphs etc) that you'll use throughout the rest of the website.
It's a great way to see how all the elements will work together and also ensures that you don't forget anything.
Post by Michalis89 on October 18, 2009
Dude that awesome, congrats 'cause this tut it's very helpful you have no idea how much I need it, in a way to learn how to turn a psd layout to html. Thanks! God bless ya'
Post by Avijit Dey on October 30, 2009
very good to learn in very short period....
Post by pascal on November 4, 2009
Thanks voor the great tut!
Post by Bob on November 9, 2009
Great tutorial. I particularly like your CSS breakdown/organization methodology. Thanks!
Post by dogan on November 17, 2009
Hi Joshua, Big Thanks for this tutorials very perfect, Realy very best. Best Regards Have a wonderfull days
Post by JustMe on December 7, 2009
Very detailed and well made tutorial. Great job.
Post by Albin on December 13, 2009
Hai! thanks. I am not able to downloade the psd file you have given. It is downloaded without layer i.e., Composited layer (0ne layer). What should I do?
Post by Joshua Bolduc on December 13, 2009
It sounds like you're opening the file with Adobe Acrobat. Make sure you open it with Photoshop.
Post by allen on December 23, 2009
was wondering why when I dowload source files for tutorial, the code is all already included in each file. Tutorial that I thought was step by step to recreate your pages seem to have already been built. Also when attempting to cut header images with no text, PSD buttons had text in them that I was not able to remove. Please advise.
Post by Twitz on January 24, 2010
Hmmm. Wouldn't it be easier to just do a File / Export to the CSS and HTML after the slices are all added and let PhotoShop create the files for you? :o)
Post by Joshua Bolduc on January 24, 2010
Hi Twitz, That is an excellent question.
There are a few reasons why you shouldn't export directly from Photoshop.
Photoshop doesn't generate standards based code.
The design won't look the same in all browsers.
Photoshop can't create repeating backgrounds which are crucial in pretty much all designs.
Coding it by hand results in much leaner code that downloads faster.
However, exporting from photoshop could be useful for protyping purposes . . .
Post by eve on February 1, 2010
awesome tutorial.. exactly what I needed! Helped heaps xox
Post by peter on February 10, 2010
when i open the Home.psd file in photoshop cs4 on a mac to begin slicing i see a bunch of blue outlines with numbers in the upper left hand corner. What are these and how do i get rid of them so i can see what i'm slicing (and saving because they show up when i'm trying to save the slices as well. thanks i'm a newbie to this.
Post by Bill Miller on February 12, 2010
Great tutorial. It has helped tremendously.
Post by ganapat on February 27, 2010
one of the tutorial i was searching from last 4 months....... thanks a lot.........