Stay Signed In
Do you want to access your site more quickly on this computer? Check this box, and your username and password will be remembered for two weeks. Click logout to turn this off.

Stay Safe
Do not check this box if you are using a public computer. You don't want anyone seeing your personal info or messing with your site.
Ok, I got it

Blog >> Tutorials >>Making Coded Layouts

MAKING CODED LAYOUTS

We want to learn how to make a coded layout. Its not an easy tutorial, because you have to be a pro designer, and also be familiar with CSS & HTML

1. First of all I make a layout in paint shop pro 8 program. You can download it from the downloads page.
For example this is the layout ive made :



2. Then I upload it to Tinypic. and just make a new page on my piczo site and put the layout as the header of the page. you can find my header code here

3. Now I'll make a CSS that fits the layout. You can find the css im using for my own site here.
As you see CSS is what that gives effects to your different content.
Then I'll save it with the header layout in an HTML box.

4. After that, You should make a sidebar for your layout which contains a navigation table, Site Info, Disclaimer, etc. and it should obey your CSS.
You can see a sample of my sidebar here

5. Then I'll add the content of the page in an another HTML Box.
The content of your page can be Blog / Iframe / Archives etc. You can preview a sample of blog code here

6. Finally I will put each of the code I provided before in different document. and then zip them all and upload to a server(I upload some to my freewebs account and some to my own domain).



7. Its what it has turned to.
Got It ?!