GFX9.COM share WordPress as a cms: part 2, you can download now.
In the last tutorial we whipped up a quick, simple layout in photoshop and now we need to turn that into a static HMTL and CSS page.
Also available in this series:
- WordPress as a CMS: Part 1
- WordPress as a CMS: Part 2
- WordPress as a CMS: Part 3
This tutorial includes a screencast available to Tuts+ Premium members.
Once you become more comfortable with HTML and WordPress you can skip this step and just create your WordPress theme, but that would defeat the purpose of this tutorial so we are going to take this extra step.
There are two different types of tutorials that I see out there and the most popular one seems to be here is the full HTML and here is the full CSS and that's the end of the tutorial. I'm not a huge fan of that method so I'm going to walk you through the entire process. For the people who are fans of the other method, you can find the entire HMTL and CSS at the end of this tutorial.
Slice and Dice
We stuck with an extremely simple design, so we really only need to cut up 2 images. These are the logo and our content image.
Take out your cropper tool and cut out both those images.
For the logo, try to keep it as close to each edge as possible.
Save the image for web and then do the same for our content image.
You Need a Solid Foundation
Now that we have all of our images sliced out and saved, we can go ahead and create our HTML file.
Open up your editor and prepare to create some folders and files. In your root folder create these folders and files.
Move your newly created images into the img folder and go into your inc folder. Once inside inc we are going to create a new folder as well as 2 new files. Create a new folder called CSS and inside that folder create 2 new files, reset.css and style.css.
Your folder structure should look like our screenshot below.
Reset and Basic Structure
When creating a site, it's always good to start out with a solid CSS reset. This makes sure that you are starting at ground zero and eliminating any browser inconsistency you may have.
The CSS reset that I always use is from http://meyerweb.com/eric/tools/CSS/reset/ so point your browser to that site and copy the CSS reset code he has created.
Before we paste this into our reset.CSS file we are going to quickly compress it into a smaller file.
If you google CSS compressor there are hundreds of scripts that will do this for you, personally I use CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ so again, point your browser to this site.
Paste your CSS reset code into that box, and set the compression mode to super compact. Hit compress it!
You will be redirected to another page with our newly compressed CSS reset code. Copy the code, open up reset.css in your editor and paste in your code. Save reset.css and close this file.
Now that we have our CSS reset all setup, we are going to create the basic HTML structure of our site so we can apply some CSS styles to make sure everything is working properly.
Open up index.html and add this HTML for the basic HTML file.
WordPress CMS - Part 2