How to deconstruct a site / figure out how it's put together)

tincat

Hi all,

For one of my classes, I have to 'deconstruct' a a type of website. My choice, as I think it will be useful one day is ifreelance.com, or scriptlance.com.

What is a sensible, time effective way of finding out how it is all put together (I'm not v. experienced)

I need to concentrate on the following aspects:

software used
skills needed
time necessary

Whenever I google freelance websites, I only get the actual freelance websites, not instructions on how to put one together. Is it too ambitious or is there a way?

I could change the project, but I would like to do this one.

Thanks

gaming_guy

....................

kiran13xtreme

If you going to create it by hand then start of with the following...

Software
Notepad
Dreamweaver but the problem with that is it inserts sometimes unneeded code.

Skills
HTML - Hyper Text Markup Language
CSS - Cascading Style Sheets
Javascript - Scripting Language

TIME
If you don't know what I'm speaking about from the skills section then it will take a while

You can create sites using photoshop and then slice it but it is not my thing at the moment.

thomas01155

This site might be helpful http://www.w3schools.com/html/html_intro.asp and http://www.w3schools.com/css/css_intro.asp gives a good overview. You can view the html of a page by right clicking it and press view source code or something along those lines depending on the browser you are using. A good plug-in for Firefox is firebug http://getfirebug.com/ allows you to easy view the page html and css aswell as other coding.

fwor

Hehe - undertaking a project by... asking people on internet forums how to do it!

But seriously, if you want to ~deconstruct~ an existing website (as opposed to wanting to construct a new one), you need a way to understand its complete structure, and for that you might want to consider a website crawler or spider. There are a few Open Source ones that should be safe enough to download and use.

And as thomas suggests above, simply looking at the page source will give a lot of clues about the tools used to build it.

Also, if you really do want to "deconstruct" an existing website (i.e. produce an analysis of how it is constructed), I suggest you choose a simpler one than the two you suggest.

tincat

Thanks all, I'll have a good look at your suggestions, and hopefully be on soon to say how I get on.

sharkie

besides the good advice from above, please remember there are static sites and database driven sites.
The static ones are easy as pages ending in .html are chained together like http://www.finger.com

the on-the-fly, or database driven sites are not as easy to deconstruct as they can be generated per content of a database for sites in constant use with data that often changes. often these pages end us as .asp or .php. e.g http://forums.moneysavingexpert.com/forumdisplay.php?f=29

Lil306

Easy way to learn how a website is built

View > Source Code

Seriously, that will show you how it's put together, CSS, XHTML and all.

If you want to design webpages, start from scratch HTML, then move onto XHTML/DHTML and CSS. My friend is a web designer and he learned CSS / DHTML simply by studying the source code of the pages. Once you understand how they worked out it's easy.

Crawlers are annoying robots, good ones read the robots.txt, bad ones ignore it