This post is a continouation from a previous post titled Web Art and Design - Slicing a PSD. If you have not yet read this thread please do so before continuing onto ‘creating a CSS layout’.
Ok lets get started.
Creating a layout in XHTML and CSS is a very easy thing to do even for people who have never had any experience with website development. I will explain to you how XHTML and CSS work together in an easy to understand way.
What is XHTML?
XHTML is a markup language which basically tells a web browser how to display a piece of information.
For example. Writing the following text <img src=”http://abc.com/123.jpg” /> tells the web browser to display an image which is found at http://abc.com/123.jpg. Knowing how to write quality XHTML is no more than knowing what tags are available to you for use.
http://www.w3schools.com/html/ Is a great website for expanding your XHTML knowledge.
However for or sake it is acceptable to not know any XHTML at all as I will explain everything that you need to know.
What is CSS?
CSS stands for cascading style sheets. It is basically a file that is connected to your XHTML file. Your CSS file holds characteristics (such as height, width etc) of items in your website.
Combining XHTML and CSS
When trying to create a CSS layout this is how the XHTML and CSS files work together:
In the CSS file we will be setting all of the characteristics of our rectangular areas. In this tutorial we will be working with width, height and background-color.
In the XHTML file we will actually call these rectangular areas and display them on the web browser.
STEP ONE: Defining your Div
Using Dreamweaver or any other similar application of your choice (notepad will work) create a file called master.css
In this file we will have all of our CSS code.
We will now create our first simple CSS layout.
In your master.css file write the following code
#top-container {
width:500px;
height:300px;
background-color:blue;
}
#bottom-container {
width:500px;
height:600px;
background-color:red;
}
In this piece of code we have defined two divs (divs are rectangular areas in CSS). We have given each of these divs an ID. A div id is basically a way of labeling the div.
Our first div is called top-container. All of the rules associated with top-container are contained within the { and }.
So the following rules belong to top-container:
width:500px;
height:300px;
background-color:blue;
So as you could imagine, the first step of creating a CSS layout would be to declare your divs (rectangular areas) in the CSS file and the provide them with their attributes.
If you are working with a website design which originates from a PSD file the trick is to use the slice tool to break apart your PSD file into rectangular slices. Then using the slice select tool you can double click on any slice to retrieve its height and width.
Make sure that you use a logical labeling system within your CSS when you are naming your divs. There is nothing worse than downloading a CSS template and seeing DIVs labeled as #div1 , #div2 , #div3 etc. Try use meaningful names such as #content-left, #header, #footer, #navigation etc.
Onto the XHTML
This is a XHTML skeleton for you to use. Use dreamweaver or any text editor to create a new .html file. Paste the following code into the newly created file.
<! DOCTYPE html PUBLIC “-//WC3//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!– The DOCTYPE tells the browser which HTML standard to use–> <html> <head> <meta http-equiv=“Content Type” conent=“text/html; charset=UTF-8″/><!– Sets the character mode to UTF-8 –> <title>Kristian Tasevski-Home</title> <meta http-equiv=“Content-Language” content=“en-us” /> <!– Sets language. Good for engine searches–> <meta http-equiv=“imagetoolbar” content=“no” /> <!–Stops the internet explorer tool bars appearing over images –> <meta name=“MSSmartTagsPreventParsing” content=“true” /> <!– Stops the smart tags on the page from being parsed –>
<meta name=“description” content=“description goes here” /> <!– Website Description –> <meta name=“keywords” content=“keywords go here” /> <!– Website Keywords –> <meta name=“author” content=“author goes here” /> <!– Website Author –> <style type=“text/css” media=“all”>@import “css/master.css”;</style> <!– Specify the CSS file to be displayed –> </head> <body>
</body> </html>
The area that we will be working with is the space between the <body> and </body> tags. This is where all the content for the website goes.
So now that we have created our divs in the CSS file we need to actually use them in our xhtml file.
This is how we call a div:
<div id=”div-name”>
content goes here
</div>
So for example if in the CSS we labeled one of our divs as #content-left
i.e
#content-left{
height:100px;
width:100px;
}
we would do the following in the XHTML file:
<div id=”content-left”>
this is the left hand side content…
</div>
So no we go ahead and call all of the divs that we need in order from top to bottom.
Popularity: 4% [?]