The idea is using two divs, first one for IE only (IE6, IE7), the second one for Major browsers that support PNG, such as IE7, Firefox, and Safari. IE7 will pick up both, so we have to target it to force it use one only.

For example: If we want to make a button with transparent background using png image, first we need to make a div for browser that don’t support png, and another div for those does support png.

HTML Code:

<div id="ie6_button"><a href="#"></a></div> /*No text here, other browser will use the one below*/
<div id="general_button"><a href="#">Click here</a></div>

CSS Code:

IE6, IE7 will read this, other browser won’t understand the filter part, but will pick up the image dimension.

#ie6_button a{ display:block;height:50px; width:100px; float:right;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/button.png', sizingMethod='scale');}

#ie6_button a:hover{ cursor:pointer;display:block;filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader (src='/images/button_over.png', sizingMethod='scale');}

Target IE7 and Firefox, etc.

html>body #general_button a{ color:#FFFFFF; display:block; text-transform:uppercase; font-size:9px;float:right;width:100px; height:50px; position:relative; left:149px;background:url(images/button.png) no-repeat right top; text-align:right}

html>body #general_button a:hover{background:url(images/button_over.png) no-repeat right top}

Because IE7 will recognize the AlphaImageLoader script, it will display both background settings, here we can target IE7 make it use AlphaImageLoader only.

*:first-child+html #button { background:none; /* Make IE7 use ImageLoader only */}

Be aware that the genera_button need to be relative positioned so that it won’t be pushed by ie6_button.

Note:

1. AlphaImageLoader require ActiveX support and will not work on Stand alone IE6.

2. If there is more transparent effect on the page, this may not be a practical way. You may consider cutting the png with backgroud.

More information about AlphaImageLoader
Cross-Browser Variable Opacity with PNG: A Real Solution

What do you need

1. Customized contact form
2. Wordpress API key
You can get one if you sign up with Wordpress.
3. Akismet Class
You can download it here

The precess

1. Upload akismet.class.php to your plugin folder. (It make sense if you put it under akismet plugin folder.)
2. Include akismet.class.php
Write include ‘akismet.class.php’; (depend where you put your php file)
3. load array with data in contact from

$checkthis = array(
'author' => $name,
'email' => $email,
'website' => $website,
'body' => $message,
);

4. Instantiate an instance of the class

$akismet = new Akismet('http://www.yourdomain.com/', 'YOUR_WORDPRESS_API_KEY', $Checkthis);

5. Check for spam

if($akismet->isSpam()){
header( "Location: $spamurl" );
exit;
}

Ok, now your contact form is protected by Akismet. Here is a sample of how the final php file might look like.
Download Sample Code

Why Wordpress?

First of all, its free, it was build upon MySQL(database) and PHP(server side script), which are also free. Secondly, it has been there for almost 5 years, there is a big community behind it., its totally customizable with millions of plugins contributed from people around the world, the possibility is infinite. Last but not least, it’s very easy to use, even you don’t have much of knowledge in programming, all the plugins will make your life easy enough to take advantage of all the potential it offers.

What do you need?

1. Apache, MySQL and PHP

First of all you need to install server in you PC or MAC, you will need Apache to turn you computer to a server, but lots of people have concern of doing this because they think this might increase the possibility of getting computer virus or crash the computer. The fact is the server installed in a local computer only makes it act as a server, not necessarily means turn it to a actually server which is open for hacker on the internet. It is no different than installing other softwares. However, it’s a bit tricky to install these components, if you are using Windows Vista check out following tutorials from senese, install apache on Windows Vista, Install PHP under Apache and Vista.

Note: There are tutorials that teach you how to customize themes without install a server, but I found it hard to edit multiple pages using these methods and the result isn’t always precisely what you are expecting. You can check out how to edited Wordpress design using Dreamweaver.

2. HTML editor

HTML and CSS editor is necessary even for the most senior web developer, in my case I prefer Dreamweaver, coz it has a clean interface very easy to use and can cope with HTML and CSS beautifully.

3. Wordpress theme

While I said design, in fact it’s hard to design a wordpress theme without some serious PHP programming knowledge. So to begin with, why don’t we choose a theme out there with a similar layout as you desired, it will be a lot easier.

How does it put together?

If you a bit about HTML, you will know that a webpage is consist of several part, from the top to bottom there are Doctype, Header, Body. While Wordpress divides them into even small pieces and put them back together when a request is made by the browser. In all Wordpress root directory, there are following files with php extension that together make up a webpage:

1. index.php or page.php, search.php, single.php, archives.php, archive.php., 404.php

Each of these files collect all the contents that is necessary to build up a web page, such as header, main post, comments, footer, archives, etc.

2. header.php

Beside the header itself that appears on the top of the page, the header.php contains information about the website and webpages, such as title, meta tag and the location of style sheet, Javascripts. You can write CSS rules and Javascripts in this file, but it’s not recommended in favor of the web standard.

3. comments.php, comments-popup.php

Comment form and popup comment window.

4. sidebar.php

Collect things that should appear in sidebar, such as archive, blogroll, categories, etc.

5. footer.php

Place to include extra information about the site or page, such as copyright, RSS feed link or more.

The process

1. Setup Wordpress

Before you do anything with the style sheet, make sure you Wordpress in you computer are up and running, check here if you are not sure how to set it up. Then try to write a testing post and add some comments yourself.

2. Create HTML page

In the browser go to your homepage, the link should be something like http://localhost/wordpress/, now copy the source code. Open HTML editor create a new HTML page name it index.html, save it under the folder where the theme you have chosen located, for example: c:/apache/htdocs/wordpress/wp-content/themes/theme_name/.

3. Link CSS sheet

Open index.html in editor edit the link location of style sheet, make it as <link rel="stylesheet" href="style.css" type="text/css" media="screen" />because if you don’t move the style sheet otherwise, it’s by default in the root directory of the theme folder.

4. Edit style sheet

Open style.css in editor and customize the look of your wordpress. In HTML editor like Dreamweaver the change made to style sheet will immediately reflected in the window.

5. Preview

Once you done the editing with CSS, preview the index.html page. Since the index.html file and the webpage generated by PHP code use the same style sheet, you will find you actually customized the entire site.

What else to do?

If there is more than just the content that appears in the index page you want to change, such as popup comment page, page that display the individual post or even 404 error page, just repeat step 2 to 4.

Moreover, since you have installed the server in you computer, you can actually do a lot more than editing style sheet. You can add or remove content in those PHP files or install plugins in you local Wordpress blog before you upload them on to the hosting server.

Actually I think web design pretty much sums up everything I am capable of doing, it includes graphic design, coding, information architect, user experience, accessibility, etc. If you are specialized in any of this skills, such as graphic design, you probably wouldn’t be struggling from what to call yourself.

In terms of when and under what circumstance to call myself what, I do find this challenging, but only when watching job ads and at the time the interviewer asking you.

Personally I wouldn’t care what to tell a stranger or even a close friend that not related to my work about what I do exactly, a web designer or web developer is most probably same thing to them. In most case I would prefer just tell people I’m a web designer. Of course, it’s another story telling a professionally associated person who you are and what you can do.

I graduated with a multimedia design degree, at the time of graduation, there is much of a uncertainty of what I would be doing after that, despite the fact that I have always been passionate about web related technologies and graphic design. And everything seems natural that finally I decided to devote myself in web design and graphic design, where I believe that I can best utilize all my skills and share my passion.

As a freelance designer, I didn’t have many chances to talk to other designers out there, either doing freelance or working for an agency. Although I have been a regular visitor at design forums like designerstalk and reading articles in millions of websites, there always a feeling of lost or alienated. This blog come in to being and I hope it become a portal for me to get plugged to the real world and really people.

Before I start doing the mockup, I visited lots of portfolio sites to collect the ideas, and the one that inspired me the most is the blog of Nicolò Volpato, jek2k.com.

I was stormed with its simplicity and functionality. You can see a lot similarity between the two, actually I just hope he wont be too mad at me ^^.

Anyway, thanks for reading this, I will keep posting from now on, sharing my thoughts or whatever come across, and hoping getting response from you guys. Cheers.