lambada
New Member
- Messages
- 2,444
- Reaction score
- 0
- Points
- 0
I noticed there are lots of tutorials on how to create graphics, how to create content via PHP etc. But not really one to bring it all together into a working website. So this hopefully will be the stepping stone from images, to layout.
It's quite late in the UK so forgive me if I miss out a few things - i'll add them tomorrow. Comments are always appreciated - especially as this is my first tutorial.
1. Before you do ANYTHING at all think about your site. Who is it aimed at? (Teenagers / Business Professionals etc). What does it provide? (Tutorials, news, blog?). These will help you to create a site which meets your needs - Business professionals don't want bright flashing text with lots, teenagers surfing the web for an interesting blog might though.
2. What am I going to use to achieve this? Forum, CMS, custom coded site?
2b. If you answered Forum or CMS start doing your research - this is beyond the scope of this tutorial.
3. So we are left with custom coded site. Next question to ask. What languages do you know? (X)HTML - ESSENTIAL, PHP - USEFUL (not essential) can be replaced by other technologies etc. This dictates the coding of your site. If you know CSS you will use that, if not you will either use tables or learn it.
4. Now we ask ourselves - do we want it to be 'standards compliant'? This simply means - do you want to stick by the book so you use only standard features (I.E. doesn't like standards very much)? Or do you want to scrap standards and keep I.E. happy? This will mainly depend on whether your audience uses IE or not. You can get it to work on all browsers (with a bit of extra help).
5. Now think about your layout - do you want a header, 2 columns, footer or 3 colums, or maybe a more 'modular' based approach?
6. Think of the type of graphics you will have - if you have a header / banner what size will it be? What will your colour scheme be?
7. Sketch potential designs on paper. Repeat many times until you are happy. If you are using tables, try and invision some kind of table structure within your layout.
8. get the layout onto the screen using chosen language (HTML / CSS etc) - don't bother with colour co-ordination yet go with clashing colours to help identify any bugs with your code if text doesn't go where it should - this has helped me loads. Give each <table> <tr> <td>, id, clas etcetera a differnt colour. If there is the wrong colour in your browsers then find a way to fix it. You can always ask for help.
9. Once the layout is exactly how it should be on the browsers you are testing. Then change the colours to your chosen colour scheme (garish doesn't = good for business remember
inert all your images.
Test again (problems? remove images one by one to find the faulty image) And re-work your layout to incorporate it, or try and find an image that works.
10. Add your content in whatever language you chose (again beyond the scope of this tutorial).
11. Test your code with sample content and check to see if it works and how have you accomodated for overflow? Stretch the layout or scrolling text box.
Well thats it.
Hope it was ok :S First ever tutorial, and now i'm off to bed. at midnight. PLease leave critisim and support - i'll try and make this better. Remmber this is a tutorial on howto create a decent template design and not on the actual code / image creation.
It's quite late in the UK so forgive me if I miss out a few things - i'll add them tomorrow. Comments are always appreciated - especially as this is my first tutorial.
1. Before you do ANYTHING at all think about your site. Who is it aimed at? (Teenagers / Business Professionals etc). What does it provide? (Tutorials, news, blog?). These will help you to create a site which meets your needs - Business professionals don't want bright flashing text with lots, teenagers surfing the web for an interesting blog might though.
2. What am I going to use to achieve this? Forum, CMS, custom coded site?
2b. If you answered Forum or CMS start doing your research - this is beyond the scope of this tutorial.
3. So we are left with custom coded site. Next question to ask. What languages do you know? (X)HTML - ESSENTIAL, PHP - USEFUL (not essential) can be replaced by other technologies etc. This dictates the coding of your site. If you know CSS you will use that, if not you will either use tables or learn it.
4. Now we ask ourselves - do we want it to be 'standards compliant'? This simply means - do you want to stick by the book so you use only standard features (I.E. doesn't like standards very much)? Or do you want to scrap standards and keep I.E. happy? This will mainly depend on whether your audience uses IE or not. You can get it to work on all browsers (with a bit of extra help).
5. Now think about your layout - do you want a header, 2 columns, footer or 3 colums, or maybe a more 'modular' based approach?
6. Think of the type of graphics you will have - if you have a header / banner what size will it be? What will your colour scheme be?
7. Sketch potential designs on paper. Repeat many times until you are happy. If you are using tables, try and invision some kind of table structure within your layout.
8. get the layout onto the screen using chosen language (HTML / CSS etc) - don't bother with colour co-ordination yet go with clashing colours to help identify any bugs with your code if text doesn't go where it should - this has helped me loads. Give each <table> <tr> <td>, id, clas etcetera a differnt colour. If there is the wrong colour in your browsers then find a way to fix it. You can always ask for help.
9. Once the layout is exactly how it should be on the browsers you are testing. Then change the colours to your chosen colour scheme (garish doesn't = good for business remember
inert all your images.Test again (problems? remove images one by one to find the faulty image) And re-work your layout to incorporate it, or try and find an image that works.
10. Add your content in whatever language you chose (again beyond the scope of this tutorial).
11. Test your code with sample content and check to see if it works and how have you accomodated for overflow? Stretch the layout or scrolling text box.
Well thats it.
Hope it was ok :S First ever tutorial, and now i'm off to bed. at midnight. PLease leave critisim and support - i'll try and make this better. Remmber this is a tutorial on howto create a decent template design and not on the actual code / image creation.