This is the second part of a two part series on building a website from scratch a to z. If you have not yet seen part 1 on “design”, you can follow the link below.
Part 1 (Design)
First off, I just want to apologize for the delay of this second part series as I’ve been extremely busy with different projects. I hope this will be worth waiting for.
On part 1, we finished the design layout of the website. Now we need to take the design and code it so it becomes fully functional. Without further ado, let’s begin.
Let’s start off with a basic structure of the site in which we know we will need.
STEP 1 (Basic Structure)
HTML:
<html> <body> <div id="wrapper"> <div id="header"> </div><!--close header--> <div id="leftCol"> </div><!--close leftCol--> <div id="rightCol"> </div><!--close rightCol--> </div><!--close wrapper--> <div id="footer"> </div><!--close footer--> </body> </html>
Ok that is the basic structure we will need to get started. A wrapper to center the site 960 pixels wide, a header, left column, right column, and the footer. Of course the structure may change slightly as we progress which is normal.
STEP 2 (Stylesheets)
In this step I like to setup my stylesheet to also give it a basic structure we can start off with.
The way I have it done is to load up a stylesheet called “screen.css” and within that stylesheet, I import the individual stylesheets needed.
CSS: (screen.css)
/*IMPORT STYLESHEETS AND HIDE FROM IE/MAC \*/ @import url("reset.css"); @import url("style.css"); @import url("ie.css"); /*END IMPORT/HIDE */
As you can see here, I would load up the “reset.css” first as we like to set everything to default style so it is more consistent across different browsers. Then comes the meat of the stylesheet, “style.css”, which contains all the styles for the entire site on all browsers except Internet Explorer. Lastly I load “ie.css” which contains the quirky fixes for Internet Explorer specific bugs. You’ll also notice the comment line which hides those stylesheets from Internet Explorer Mac version.
With that CSS structure, we can begin our slicing phase.
STEP 3 (Slicing)
Let’s slice up some of the main pieces that we will need from the design in Photoshop. Grab your cropping tool and crop the header out as seen below. Remember we have a drop shadow applied to the header so you want to crop past the drop shadow and don’t worry about getting it exact as I will show you how to deal with that later.
After you have committed to the crop, go to your menu “image/trim” and keep the default settings and click ok. You will see that Photoshop has intelligently cropped it right to the last pixel of the drop shadow. Finally you go to your file menu and choose “save for web & devices”. Choose JPEG with the settings on high and save it with the file name “headerBG.jpg”. It is ok to save as a jpeg even though we have a drop shadow because our content area is white anyways so it is not necessary to have alpha-transparency which increases the file size significantly.
Next let’s slice the logo. Simply hide all layers except the logo by holding alt and clicking on the eyeball next to the logo layer. You should now see the logo on a transparent background. Then you go to your menu “image/trim” and leave default settings and click ok. Now you should have a nicely cropped logo. Finally go to file menu and click “save for web & devices” and choose PNG24 file format and save as file name “logo.png”.
By now you should know how to slice/crop things out easily with the techniques I showed you. Next let’s slice up the remaining items in the header section which is the divider and the searchbox. You want to save both the divider (“divider.png”) and searchbox (“searchBox.png”) as PNG24 as you want to maintain the alpha transparency.
For the navigation buttons, I have decided in this tutorial that we will keep it basic and simple because I will cover an in-depth tutorial on creating navigation buttons with hover, pressed, and current states in the near future. Moving on, all we need is a single pixel width crop with the height of the button. Save this button as a PNG24 and the file name “navBG.png”.
Next we want to crop out a 1×1 pixel of the clickable (semi-transparent button) area you see in the sidebar. Do the same thing to isolate the layer by holding alt key and clicking the eyeball next to the layer you want to isolate and then grab your crop tool and make a 1×1 pixel selection and commit to the crop and save it with PNG24 file format name “buttonBG.png”.
Lastly crop the footer since it is a gradient and not just pure black. Here we only need 1 pixel width and the height of the footer. So simply crop that out and save it as a PNG24 name “footerBG.png”.
To reiterate, we put together the basic structure of the HTML and CSS and then we sliced up the individual images for each section. Note: If you are wondering about all the icons and images of the hardware, it can be downloaded from here. I assume you can manage to crop the individual icons/images out on your own. If not, just leave a comment and I will update this tutorial. But the saved file names of the icons are as follows.
cartIcon.png (PNG24)
figure.png (PNG24)
keyboardmouse.jpg (JPG High Settings)
learnMac.jpg (JPG High Settings)
loginIcon.png (PNG24)
macair.jpg (JPG High Settings)
RSSIcon.png (PNG24)
searchIcon.png (PNG24)
star.png (PNG24)
Can you make tutorial on integrating wordpress and bbpress? I wanna do something like your site, integrate bbpress into wordpress. thanks
I will definitely give it a shot. Perhaps with a screencast.
Hi, the screencast for integrating bbPress and WordPress is posted! Enjoy!