Datis Design Weblog

General by Farshad

It seems that Firefox 3 will be ready to download soon, and their marketing community Spread Firefox wants us to help them set a world record in 24 hours for download Firefox ! Because I am a Firefox user and lover ! I want to help them to achieve this record, so I put their logo here maybe you become interested too ! So help them set a world record ! Only FireFox !

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

Flash, General by Farshad

Adobe Systems Inc. today rolled out a beta version of its Adobe Flash Player 10 (formerly called Astro) browser plug-in, which adds features to help designers and developers create special effects and cinematic Web experiences.

The new offering adds support for custom filters and effects created using Adobe’s Pixel Bender tool kit, Adobe said. The Pixel Bender technology is used in the company’s After Effects CS3 tool, which creates motion graphics and visual effects for film and broadcast.

"We’re doing things that really change the game of what’s possible on the Internet," said Tom Barclay, senior product marketing manager of Flash Player. "The community now has the ability to upgrade the capabilities of the player and create new types of effects and cinematic experiences that are not available with any other browser plug-in."

The beta version of the player also includes native 3-D transformation and animation capabilities, an extensible rich-text layout, and graphics processing unit hardware acceleration, he added.

The new support for 3-D is "really 3-D for the rest of us," Barclay noted. "It allows people to take what they know in the 2-D world and transform it into 3-D. It’s native so the performance is very fast, and it will not result in larger file sizes."

New bit-rate streaming for video links between the Flash Player and intended future releases of Adobe’s Flash Media Server will automatically adjust video quality as bandwidth changes without having to rebuffer, the company said. "This will provide a seamless playback experience with no starting or stopping of video waiting for the stream to catch up," Barclay said.

In addition, a new text engine in Flash Player 10 allows designers and developers to have more creative control over device font attributes such as rotation and style, Adobe said. The new version also adds more text layouts, like vertical and bidirectional, which support the creation of rich Internet applications like interactive e-books and online publications in additional languages, Barclay added.

The beta version of Adobe Flash Player 10 runs on the Windows Vista, Windows XP, Windows Server 2003, Windows 2000, Mac OS X and Linux operating systems. The Adobe Pixel Bender Exchange is available for beta users to create custom effects for the Flash Player, according to the company.

The general release of Flash Player 10 is expected later this year.

Source : Computerworld.com

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

General by Farshad

One of the important tool for every web designer and web developer is FTP software, there are many FTP software out there, I have tested some of them but recently I have found something that I think is best !

FileZilla FTP client software is really good, its so easy to use, fast and reliable. And most importantly it is Free ! Yes its a free FTP software that you can download it for many operating systems.

Some of the program screen shots :

Main Features :

• Easy to use
• Supports FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
• Cross-platform. Runs on Windows, Linux, *BSD, OSX and more
• Available in many languages
• Supports resume and transfer of large files >4GB
• Powerful Site Manager and transfer queue
• Drag & drop support
• Configurable Speed limits
• Filename filters
• Network configuration wizard
• Remote file editing
• Keep-alive
• FTP-Proxy support

You can download it from this link. Also you can check its website.