Datis Design Weblog

CSS, Photoshop, Web Design by Farshad

In previous tutorials I have told you how to design a website template in Photoshop and convert it to valid HTML/CSS file. Maybe some people cant do the coding in CSS and HTML. So Photoshop has a powerful tool to convert your template into a working website. But the generated code will not be so beautiful, but it is a fast way and you can easily customize the generated code to gain what you want, at last I will tell writing code by your self is very very better…

Making template ready !

I am using the same template which I have used it in previous tutorials. You should be able to work with slice tool in Photoshop. You should slice your template in the parts you need for example navigation, header, main content, footer and so on…

Look at the sliced template below :

Note : Slice tool has a shortcut which is very useful, it will create a slice based on your current selected layer, for using it you should select your desired layer and hit Alt+Shift+Ctrl+C or select New Layer Based Slice from Layer menu in Photoshop.

Now you Template is ready to be a HTML file…

Save for Web

Choose File menu and select Save for Web & Devices, the new window will be shown, in this window you can choose your slice image type, quality, change your slices, give them link and alt tag and… If you look at the picture below I have chose JPG for all slices and 80 for quality. When you are choosing images type and quality see the final image size and download time in bottom corner of this window it is important.

When you double click on every slice you can give them link and alt tags, look this image below :

Now when you are finished with your links and tags, click save a new window will appear again, Choose a name for your file, and for Save as Type choose HTML and Images and for Settings choose Custom, a new window will appear again, choose HTML from dropdown menu and select Output XHTML :

In dropdown menu choose Slices and in bottom choose Generate CSS and choose By ID for referenced. Now click ok and save. Your HTML file is ready !

You see how powerful is Photoshop ! With some simple clicks you have a website ready to upload ! If you are familiar with CSS and HTML you can easily customize your code to reach what you want, but again writing code by yourself is very better

At the end I put all files for you to download… Have a nice time.

Download files (275 Kb)

(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, 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

CSS by Farshad

Maybe you have heard CSS box modeling before, it is a simple concept. Look at this picture :

As you see in this picture, the orange box is our content, taken its space, if we gave it padding, it will appear like the green box in image and add space between our content and its border, then border will appear and take space as you see the blue border in the image, then margin comes and add extra space to it, the space between blue line and white dashed line.

In nutshell, padding is space between content and its border, or it is space inside content block. Margin is space outside the content block.

The whole width or height will be margin + border + padding + content. So when you are designing with CSS always remember the box modeling.

(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

CSS by Farshad

Block elements always arrange vertically, that means they take whole page width for themselves.

Inline elements always arrange horizontally, that means they take space as their width.

To control this property of elements we can use Display property :

• display : inline; arrange element in inline format
• display : block; arrange element in block format
• display : list-item; arrange element in list format (<li>)
• display : none; won’t display element
• display : inherit; element will inherit property from its parent

CSS by Farshad

CSS Rule

Selector defines which element should be styled.
Declaration Block is always inside { } which includes Property and Value.

If you are using Inline Style the you should apply the style like below, you can add as many styles as you want and separate them with semicolons. For example :

<p style="color:blue; font-size:12px;" >This is paragraph</p>

Read More

CSS by Farshad

CSS Stands for Cascading Style Sheets and it is a language to defining visual appearance of a web page. Nowadays always suggested to use CSS to describe how a web page looks rather than using HTML tags or other elements. Beyond that with CSS you can control how your web page looks like in different media types.

So with CSS you will have all powers to change the appearance of a web site, be sure to always use it whenever you want to style a web site…

There are 3 ways to add a CSS to web page :

• Inline with HTML : In this method you will put your CSS code inside the HTML tag, this way is useful when you are going to use that style once.
  For example :
  

  <p style="color:blue;" >This is Paragraph</p>

• On Page CSS Definition : A better way is to put all the styles once in a page, this method is useful when we are going to apply some styles to one page
• Separate Style Sheets : This is the best way to apply CSS to web pages, We will create all styles in a separate document and link it to our web page. This method is best way because :
  1. File sizes will be reduced, You only write CSS for once.
  2. Your bandwidth will be reduced, CSS only loads for once.
  3. They can be easily updated.
  4. Designing styles and putting web site contents will be separated.