First of all, I take it that you didn't intentionally triple-post this question. You can request the moderator to remove the other posts if something went wrong.

If I have a website template in psd format, I use ImageReady to create a html-layout. If I'm designing my own layout, I first draw my table-layout on paper. I adjust my rough layout by trial & error using css with relative widths and heights.

BTW: lifecycle of web development has nothing to do with how you design your pages. You should look into uml / use cases / incremental development / waterfall model.

NB: using table-layouts is not considered best-practice, because of the relatively large data-overhead.

Edo

Quote:Original post by Poker Champion
What I mean is if you want to create websites without using any drag and drop and wanted to do this purely in 'code mode', what is the process?

That's actually fairly common, although most web-designers will build up a collection of 'templates' so that they can quickly get started on a particular site by starting from something similar to what they're after.

As a learning experience doing your XHTML/CSS by hand is great, and there can be good reasons to do so for professional projects as well (especially if you've built up a collection of templates anyway), but just keep in mind there's absolutely nothing wrong with using some sort of editor to increase your output - they even produce pretty reasonable looking code these days.

Quote:So how do I size each and every component of a web page?

If you know the size of each element you're probably being naughty. While it's entirely possible to design a web page with all the sizes and positions fixed it isn't really very good design because except for rare cases your design will need to display and be usable on a range of devices from handhelds with very small resolutions and a small selection of colours to computers with a huge range of different resolutions, to computers that don't have a visual display at all (blind users can still browse the web using software called a 'screen reader'). Users may also want to print your page, and what looks good on screen may not work so well on paper.

Of course you would still need some idea of size and positioning, and if you're clever you might even be giving different directions to different devices. I don't know about others, but I think this one is mostly down to experience and knowing your target audince. For most sites it would probably be safe to assume a minimum resolution of 800x600 from the majority of users and then use an alternative stylesheet to handle different rendering on handheld devices and potentially when printing. Some sites will have an unusual audience and may still need to support 640x480 resolution and possibly older browsers.

Quote:Also how do I determine the position of the componets to be coded?

You mark them up in a logical order that will be reasonable without any styling rules applied, then use CSS to tweak the presentation. In many cases this means there will be a header item near the top of the page, followed by navigation, then the page content.



If you're looking for a method to go from design to code then I suppose you could draw out your intended layout on paper and then figure out how to achieve it in code.

Quote:Do you create your website on paper?

I don't, but I know of others who do, and if you think it could help you to visualise your designs then it's probably worth at least giving it a try.

Quote:Original post by Poker Champion
In the mean time is there any book(s) you can recommend on professional web develpment?

I've never actually read any books on the subject, but I would highly recommend checking out the online magazine A List Apart (and following the linked reference sites in specific articles that interest you). By this time they've published quite a lot of material, so if you're looking for a starting point you could take a look at the recently published The ALA Primer Part Two: Resources For Beginners and The ALA Primer: A Guide For New Readers (given in reverse order intentionally).

W3Schools is also an excellent place to learn about using specific technologies (such as XHTML/CSS), although design isn't really covered in any great detail.

I'm sure others will be able to recommend some good books though.