Many months ago, I volunteered to help my committee head to come up with a website for our school organization.
We started doing it last month and now we've got the index page and news page done already. However I've been criticized by my orgmates (we're a computer science org btw) and my head as well for my cluttered code.

I don't know what he meant by cluttered but I am quite sure that it had something to do with the outdated way I tried to code the site. For the layout of the whole site, my approach used a big table as the framework for the whole layout and then inside I used <div>s for the the different text formatting and as well as the spaces between texts, sections etc.

Prior to this, I read in Tech Republic that



I have to admit that my web coding is pretty rusty so I tried looking the source code of Yahoo and tried to analyse it. It seems that it uses <div>s and <span>s to layout the site (which I know very little about).

I'd love to hear from fellow Web Developers here: what exactly are these Web 2.0 technologies that are now being used to layout websites?



P.S The website I've coded is here and here

 

 

 

Reply

Let see as for technologies they include AJAX, Flex, javascript Java, XML, Flash, actionscript and server side technologies such as php and asp and ruby on rails to name a few. That is a lot of different languages to use and to make each one work together you not only have to know the original coding structure and they know about how to modify them in other languages as well. So if you looking into the whole web 2.0 craze, start with AJAX, flex, flash and actionscript to get you going in the right direction.

Reply

I would suggest that you use CSS to control <div>'s size, then use a 5 panel layout -
like


HEADER
Navigation | Main | Extras

FOOTER
Most CSS tutorials will show you how to do this - and this makes you pages look a lot beter that using just a table - as usong tables often ends up with everything being spaced out to much because of one image, or everything being the same level - which can look TERRIBLE!!

If not, You could use a framet - any HTML tutorial will show you how to do this - the disadvantage being that some browsers do not support frames.

otherwise, you could just use a web design application - to do it all for you.

Reply

Using tables for Layout is "old school".

Use div's and CSS for design. They are cool.

Reply

Aim for a "pure CSS" design. That means that all you'll see in the code is just a series of <div> tags. Using "float" in the CSS coding will basically emulate, if not best tables. It's really easy and fun once you get used to it!

The site looks pretty good though.

Take a look at layout gala (and use it as a skeleton if you need to.): http://blog.html.it/layoutgala/

Reply

Thank you everyone for your replies.



Thanks!

Yes I am aiming for a pure CSS design because as I've mentioned earlier, sites like Yahoo use it. I learned layouting using <tables> by studying Yahoo's code when I was much younger.

Layout gala looks very cool and useful. It's already 3 am here in my country ( and I have class at 8am! haha) so I just quickly skimmed the code of some layouts and as I've seen, some of them, correct me if I am wrong, still use that type of layouting where you specify <div> boxes for instance this much pixels away from the top and this much pixels away from the left.

This bothers me a bit coz for instance if I wanted to center a <div> box on my browser and say it, for example,it should be 300 pixels away from the top and 300 pixels away from the left, it wouldn't look the same,as in the <div> box won't look centered, on a widescreen laptop and/or screens with different resolutions.

How do you resolve this type of problem?

 

 

 

Reply