Basic Initial Webpage Layout With CSS - Part 1
Let me start by stating that this tutorial is by no means an exhaustive tutorial on how to design a webpage with a Cascading Style Sheet (CSS) and Extensible Hypertext Markup Language (XHTML) page. It is, as the title states, a basic, one page initial layout structure. You will have a barebones layout when you are finished, but one that is quite functional and common throughout the web. It will also be a foundation that adheres to the W3C (World Wide Web Consortium) standards.
It is assumed that you have at least a general knowledge of setting up a web page, how to transfer your files to your host via FTP, and are using either notepad or some other basic text editor.
What you will be designing here will be a site which is comprised of:
* a wrapper (this will enclose all the items below)
* a header (can be text, a logo, or whatever you choose for the top of your page)
* a left area (content that is vertical aligned on the left)
* a right area (content that is veritcal aligned to the right)
* a footer (this will contain your copyright, additional links, etc.)
This site will be structured with two files, an index.php file which will contain all your XHTML code, and a default.css file which will contain all of your style sheet information. I will explain the .php portion a little later in this hub. You will also be utilizing a folder called "images" for all your images. This is to keep them separate from your design files and just makes for better clarity and overall design. Anything that is an image, icon, etc. will go in this folder.
We will tackle the CSS portion in this hub and the XHTML in a future hub.
Now, lets first start with laying out our default.css file's basic structure.
Open your file editor and create a new file called "default.css" and paste in the following:
body { } #wrapper { } #header { } #leftarea { } #rightarea { } #footer { } .clear { } Each area designated with a "#" is a CSS ID tag. The areas designated with a "." is a CSS class tag. There are MANY options that can be inserted into each of these tags that, due to limitations of this article we wont go into. But know this: this is where your site design becomes unique. This is where 95% of your layout work is done. In the past designers would use "tables" in their HTML pages. This was not only incorrect usage, but bloated their pages and slowed their load-time down considerably. We will be using the very basic settings for the sake of this hub.
What we will do is make the page "fit" all web browser resolutions. This is critical. If a page is hard to navigate a read people will not stay on your website. The standard resolution these days is "really" 1280x1024, but quite honestly, 1024x768 is the de facto standard. HOWEVER, we will be designing at a "safe" 800x600. This way NO ONE is left out when viewing your web page.
First thing we need to do is edit the body tag. You can add a background image if you wish by adding the "background-image: url(images/yourbackgroundimage.jpg); but we are just going to leave it a solid color. Next you can add the line margin: 0px; if you wish. What this does is set's the body margin to the top of the page so that your header will be flush to the top of the web browsers display area. Entirely up to your preference.
Next, lets tackle the wrapper ID. What the wrapper ID does is it takes all of you ID elements and ensure that they are constrained within a certain area. The benefit of this is that you can set the width of the area and nothing can go past that. This allows you to also center the entire webpage very easily (which is what we will be doing). So, edit your #wrapper ID to look like the following:
#wrapper { width: 800px; margin-right: auto; margin-left: auto; }
What this will do is set the width of the area to 800 pixels and automatically adjust the left and right margins for the size of your browser - basically it centers it.
I will continue in my next hub... stay tuned!