Datis Design Weblog

(X)HTML, CSS, Web Design by Farshad

In the first part I have told you how can you make a HTML web page from a Photoshop template, Now in this part I am going to tell you how can you make a CSS file for that HTML file and finishing this web site. If you want you can see the first part here.

Building CSS File

First I set the general settings for the page, like font, font size, color and… :

*, body, html {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
}

Now if you look at the HTML file you can see that we have a container DIV which surrounds all of our elements in the page. So I can easily make it the size I need, also I give it a 10px margin to have some space from the top of the browser window :

#container {
	margin:10px auto;
	border:2px solid #000000;
	width:800px;
}

Ok, the header DIV in Photoshop file has 150px height and its background color code is 99cc66 :

#header {
	background-color:#99cc66;
	height:150px;
}

And for the title header :

#header_title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:34px;
	color:#FFFFFF;
	padding:10px 0 0 20px;
}

Slogan :

#slogan {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	padding:5px 20px;
	color:#FFFFFF;
}

For building the navigation I use the method that previously I write a tutorial about, you can check it here :

ul, li {
	list-style:none;
}

#navigation {
	margin:20px 0 0 0;
	padding:0 10px;
}

#main_nav li{
	display:inline;
	margin:0 20px;
}

#home, #about, #portfolio, #services, #contact{
	position:relative;
}

#home a, #about a, #portfolio a, #services a, #contact a {
	text-align:center;
	padding:5px 25px;
	border:2px solid #FFFFFF;
	background-color:#009999;
	text-decoration:none;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}

#home a:hover, #about a:hover, #portfolio a:hover, #services a:hover, #contact a:hover {
		background-color:#000000;
}

I need 450px width for content DIV, also I have added 25px padding all around it, and it should be left float :

#content {
	width:450px;
	padding:25px;
	float:left;
}

And for content header :

#content_header {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	padding:0 0 10px 0;
}

For sidebar DIV I give it 250px width and 300px height, and it should be right float :

#sidebar {
	text-align:center;
	background-color:#009999;
	border:2px solid #000000;
	margin:25px 20px 30px 0;
	width:250px;
	height:300px;
	float:right;
}

Recent works title :

#recent_work_title {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#FFFFFF;
	font-size:18px;
	padding:10px 0;
}

Images of portfolio and mouse over effect :

.portfolio_image img {
	border:2px solid #99cc66;
	margin:5px;
}

.portfolio_image img:hover {
	border:2px solid #000000;
}

And finally site info DIV which is similar to navigation part :

#siteinfo {
	text-align:right;
	clear:both;
	height:50px;
	background-color:#000000;
	color:#FFFFFF;
	padding:5px;
}

#siteinfo_title {
	padding:5px;
}

#siteinfo_nav li {
	display:inline;
}

#siteinfo_nav li a {
	padding:5px;
	text-decoration:none;
	color:#FFFFFF;
}

#siteinfo_nav li a:hover {
	text-decoration: underline;
}

You can how can you easily make a valid (X)HTML/CSS web site with a designed Photoshop template, also your code is very readable…

You can download all files from this link. (13 Kb, RAR File)

(X)HTML, Photoshop, Web Design by Farshad

One of the important objects that web designers need to know is to make a valid (X)HTML and CSS website with a designed template from Photoshop or other designing softwares. In this tutorial I am going to show how can you build a valid website with a template that I have designed in Photoshop. Please note that this tutorial is in two sections, first one is for making the HTML one and second one is for making the styles with CSS.

Dividing The Template

If you look at the websites, you can see that most of them are following a fixed structure, maybe in some cases you see that a website has more elements or less. When you are designing a website template you should note that arranging these elements is very important, if you look at this picture you will understand :

This simple template was made in Photoshop, if you look you will see that this has a division for Header, a division for Navigation, a division for Content, a division for Sidebar and a division for Site Info (or Footer). In some cases maybe you see that a website has more sidebars or other elements. Now look at this picture :

In this picture I have divided the template to the sections that I have mentioned above, now we can easily make a HTML file with this picture. (You can see larger images by clicking on them)

Building HTML File

We begin with the top of the picture, the first section is Header, so we can easily make a DIV tag for Header and give it an ID, We use to build other DIVs for other sections :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

In building a website which you want to be a Valid (X)HTML/CSS site and have a good SEO, you should bring all those elements that you have designed in the template, for example if you look at the template you will see that I have put a large text for website title (Welcome to my Site), so we can easily use H1 tag to create this text, and then we will create the style for it later. With this method at the end you will see that your website has a great readability which is very good for screen readers, also it is very understandable even without any styles and graphics.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="container">
<div id="header">
  <h1 id="header_title"> Welcome to my Site </h1>
  <h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

Giving an ID is very useful, later you can easily give any style to your HTML tags, you should keep this note in mind that you only can use each ID for one time. Now for Navigation we can use ul and li tags :

<div id="navigation">
  <ul id="main_nav">
    <li id="home"><a href="#" title="home">home</a></li>
    <li id="about"><a href="#" title="about">about</a></li>
    <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
    <li id="services"><a href="#" title="services">services</a></li>
    <li id="contact"><a href="#" title="contact">contact</a></li>
  </ul>
</div>

Put the code in Navigation DIV, Now Content DIV, we need H1 tag for this section, also because we have some paragraphs we need p tag too :

<div id="content">
  <h1 id="content_header"> What Can I Do For You ? </h1>
  <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.

    Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.

    Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.

    Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.

    Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>

Now for the Sidebar section, we need to put 2 images for our portfolio, so we need img tag :

<div id="sidebar">
  <h3 id="recent_work_title"> My Recent Works </h3>
  <div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
  <div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>

I have used another DIV in this section because we have 2 images which has same style, and I gave it a CLASS not ID.

And finally the Site Info is same as navigation section :

<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
  <ul id="siteinfo_nav">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="about">about</a></li>
    <li><a href="#" title="portfolio">portfolio</a></li>
    <li><a href="#" title="services">services</a></li>
    <li><a href="#" title="contact">contact</a></li>
  </ul>
</div>
</div>

Building a HTML file for our website is complete, now you can save this file and view it in your browser, as I told you before this file has a great readability without styles too, you can easily understand the website structure with this file.

In the next tutorial I will show you how to make CSS for this HTML file… Good Luck…

Final Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="header">
    <h1 id="header_title"> Welcome to my Site </h1>
    <h2 id="slogan"> A Webdesigner Portfolio </h2>
    <div id="navigation">
      <ul id="main_nav">
        <li id="home"><a href="#" title="home">home</a></li>
        <li id="about"><a href="#" title="about">about</a></li>
        <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
        <li id="services"><a href="#" title="services">services</a></li>
        <li id="contact"><a href="#" title="contact">contact</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <h1 id="content_header"> What Can I Do For You ? </h1>
    <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.

      Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.

      Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.

      Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.

      Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
  </div>
  <div id="sidebar">
    <h3 id="recent_work_title"> My Recent Works </h3>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
  </div>
  <div id="siteinfo">
    <h4 id="siteinfo_title"> www.mysite.com </h4>
    <ul id="siteinfo_nav">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li><a href="#" title="services">services</a></li>
      <li><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
</div>
</body>
</html>

(X)HTML, Flash, Web Design by Farshad

As I said before, Validating a web site is an important step in web designing. But when we want to put Flash contents in our web site, validation will be failed. There are some ways to prevent this error, the method I suggest is to use UFO object.

First download UFO from this link.

Next step is to create a new (X)HTML document. Create a placeholder and give it an unique ID. Look at this code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

In next step we should link the UFO script to our page, please note that the address of the UFO script is right :

<script src="ufo.js" type="text/javascript"></script>

Then we should create an object for each of our Flash contents, look at this code :

<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
</script> 

In next step we should call UFO for each of Flash objects, we use the unique ID that we create in first step in our (X)HTML document :

UFO.create(FO, "ufo");

We put this code at the end of our script code.

Final Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
      UFO.create(FO, "ufo");
</script>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

Usually you need only these parameters that I used in this code. movie parameter get the address of your swf file, width and height parameters get the dimension of your document, majorversion and build parameters get the version of your swf file. There are other optional parameters which you can see in the UFO website. Please note that the programmers of this script wont continue this project, maybe you like to try other scripts, SWFObject is another method for placing Flash files in your document.

(X)HTML, Web Design by Farshad

One of the most important works that every web designer and developer should do is validate their pages. But what is validation ?

Validation is a process of testing a web document with World Wide Web Consortium (W3C) standards for HTML and XML documents.

So why should we validate our documents ?

One simple reason is that documents without W3C standards rely on browser error correction, so maybe one document has a different appearances on different browsers.

You may see many web sites that won’t validate specially the popular ones,  people visit them because of their name. So normal web sites can not afford that budget to make themselves popular, they should validate themselves.

Also validation is very good for disabled peoples, because screen reader programs depend on standard codes.

So DO NOT FORGET to VALIDATE your web pages… It is very very important.

To see if a web page can pass the W3C standards you can see this link :
http://validator.w3.org

(X)HTML, Javascript by Farshad

You have seen Javascripts roll overs many time to change an image when roll over on it, but as you know if you have some texts that should be changed, one way is to convert texts to images which is not recommended for SEO. But with this simple method you can change any text when you roll over an image.

You can see sample of this method in my personal web site, when you roll over the images, the top text will change.
Read More

(X)HTML, CSS, PHP by Farshad

I am assuming that you can make a navigation bar with CSS, if not you can refer to this post for more information.

Usually when we using includes in our site, we can not use that static navigation highlighting with our pages, here I am going to use PHP and CSS to make our navigation highlight depends on which page we are in.

Read More

(X)HTML, CSS by Farshad

Nowadays it is recommended to use Semantic HTML and CSS to create structure for a web site. It is very good to create navigation system based on CSS and style it as we like, so if users turn off the styles or can not use the styles for any reason, then they see the navigation easily.

So in this simple CSS tutorial I am going to show you how to use HTML lists with CSS to create a horizontal navigation.
Read More

(X)HTML by Farshad

Doctype Stands for Document Type Declaration, and it shows what type of (X)HTML you are using in your web page and tell the browser how should it be rendered. It should be written top of the page and before the <html> tag in your web page.

It is very important that your document has a Doctype, because it will be validated and it will be rendered correctly on browsers.

You can choose 3 type of Doctypes, Frameset, Transitional and Strict.
Read More