View Full Version : Coding Designed Website?

02-23-2009, 06:03 AM
i am getting ready to code a fully designed template i made but i need some advice.

it is fully designed meaning areas that i want to put font in.

do i use position absolute to put them in the spots i want or is there another way of doing it?

02-23-2009, 07:25 AM
A while back I learned that absolute positioning is probably one of the worst things you can put into your code. You definitely want to use 'float', or some other alternative. The problem with absolute positioning is that it is very hard to make it look right on screens with different resolutions, or even for people running a variety of browsers.

Can you give me an example of what exactly you are doing? I'm a bit confused as to what you want, but I can help if you give me some specifics.

Have you designed something in GIMP or Photoshop (or some software like that) and you want to put text over this large image/template?

02-23-2009, 12:34 PM
First things first, one step at a time. Here’s a small guide on how to approach website development:

The most important thing of a website is its content. When people browse the internet they are looking for some information. That means the look of a website should be determined according to its content. Or to say it more clearly: You don’t design a site and put the content in, you design (around) the content, i. e. you make the content look a certain way.

Now, you have your design ready and want to start converting it into an actual HTML document. What comes first? Right, the content. Forget everything you have designed and mark up the content semantically (http://boagworld.com/technology/semantic_code_what_why_how/), i. e. the information of the document has to be given a meaning: Headlines are marked up as headlines (h1–h6), regular text is marked up as paragraphs, lists are marked up as lists, tabular data is makred up as tables.

Then, after you have given everything on your page a meaning you start structuring/dividing the content into different logical sections. That’s what the division element is for. For example you divide your page into header, content, and footer. The content can have more subsections such as main content and subcontent (again, separate divs each) which are determined by looking at your designed template. What’s the layout of the content? Two columns? Three columns? Or actually just one column? Then there are numerous sources on the internet on how to use CSS to make the content of a document look a certain way. One of the best sources is http://bonrouge.com where you have some sample CSS layouts. You just need to look for the layout that applies to your design and then learn how to do it. It’s pretty simple.

Good luck.

02-23-2009, 04:22 PM
A while back I learned that absolute positioning is probably one of the worst things you can put into your code. You definitely want to use 'float', or some other alternative.

This is totally terrible advice. Absolute positioning can be very helpful, and if you have fixed dimensions in your layout it can be the easiest way to position elements.

As far as the original question, if you're asking how to code a layout from a design, I'd say the best place to start would be a good tutorial, like the ones here (http://htmldog.com).

02-24-2009, 01:48 AM
reason i am wanting to know is because i have a design i made in photoshop.
a full website design and idk how i should code it.