Steps I do to create a website for myself without a CMS.

Posted by klevisi - 08/08/10 at 03:08:43 pm

1. Brainstorming
The first thing I do is a brainstorming session.
I think of the features the website will have, write them down. Then I ask friends, they could have good ideas too.

2. Sketching
I get a piece of an A4 paper, a pencil, and begin to sketch the layout for the website.
Sometimes I use a graphic tablet to do the sketch on photoshop, but I really prefer paper and pencil.

3. Photoshoping
From the ugly, curvy lines paper sketch, I transform it into a clean image using photoshop.
Applying colors. Colors are not used at a random order. I’ll use a color wheel, and with the wheels rules I stick to a color pattern.

4. Slicing (or not)
With photoshop I slice the image to fit my needs. I try to slice as few images as possible.
To say the truth, slicing looks outdated to me.

5. CSS/XHTML
I do a paralel work on an external css file, and the main index file. I create the layout which looks like the image in photoshop.

6. Lorem ipsum
I add lorem ipsum text to the content area.

8. Fix details
A little padding here, a little padding there, the link color is not right. Those kind of things I do at the end until I’m really satisfied.

DOCTYPE!’s

Posted by klevisi - 18/04/10 at 08:04:51 am

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Make a linkable div

Posted by klevisi - 15/04/10 at 12:04:49 pm

A div can be made into a link very simple using javascript using this code:


<div onclick="location.href='http://www.domain.com';" style="cursor:pointer;">CLICK ME</div>

Here everything that is inside this div will be clickable and will poing to http://www.domain.com.
Using cursor: pointer dhe mause will change when it is over the div, just like in a real link.

Klevis Miho Copyright © 2010