Honesty Rocks! truth rules.

How To Do A Webpage Layout

HOME      >>       Websites and Web Designing


I am teaching myself how to create a webpage. I find this very fun and learning alot. But now I find myself in a particular spot where I can solve the issue in many different ways, but am not sure which is the best to proceed. I am creating the webpage, but find mysefl not sure how to create the webpage layout. I can do it by placing raw HTML data, and create a table on each page, although I don;t think this is the best way to do this. I also been looking at frameset, and iframe, although I find that this requires alot of coding on each individual page. What I Would like to know really is this possible to use CSS to create the frame layout of the page. as a template. If this is possible, could some one get me a link to a site or an example that I could use to learn from. Right now most of my learning been right off teh W3school website, been great, but not to clear on this issue which way is best to proceed. Thanks for any help ;)


i am not quite sure of what you are asking for. but if you want to know if we can make CSS to add a frame to the whole page, then yes. you should use the BOX idea. in fact CSS stands on the idea of BOXES. you can add small box or big box that contain the whole page. by using BOX model you can set different values to margin, padding, and border. this is a link to show you how it looks like




the main idea is creating a normal div and put all your site code inside it. that way you can make something similar to table but in CSS. keep in mind two things: CSS is always more effective than tables, when you use a div to wrap your entire page set it to id not class. good luck.


For me, I will use photoshop to conceptualize and the layout the page. Where should what goes and how much space allocated to it. Once I am satisfied with it, I will proceed to slice it into html, either through tables or css. As far as possible, I will try to stay away from iframe or frameset.


Thanks for yoru help bu tI was able to figure out much better way to this then table and with CSS which is what I was looking for ;) Since I am new at this please forgive me if my questions sound newbish, an denglish is not my first language to sometimes what I type makes little sense :PBut the code I was looking for in CSS was flaot and with it I was able to create, header, right, left and center colum with all different properties. This allowed me to create a header that took 100% of the top of the page width, and then the body to be split into 3 collums :P although thanks for all the help. I;m sure that more questions will come soon :D


An advice for you demo100 , if you want to improve your knowledge very quickly , i suggest you to find some free web templates , you can find tons of them on the net , just use google.Then you will see how people coded it , and learn , you can of course use some advanced tools like adobe photoshop and dreamweaver , but since you are just learning , then you can use some free tools , and start modifying this templates , and you will learn more then you will do , if you stuck with the tutorials.Good luck


Well props to you for trying to do things the "legit" website creating and coding school website waybut i think what i find easier (this is how i learned to code websites) is stealing a template or a website that you like, steal an easy one that somewhat has the layout you like, and from there rearrange and delete and add codes until you learn what each element of the code does.. That again is how i learned.. i know what the css files do etc, how to include something into websites (which is somewhat easier) but what i do to setup my websites is just do a ph include of the header.php file (i put everything i want to be displayed on all pages of my website into there, even the css raw, without doing an actual css include code)I personately think that is the best way to learn.. because it is more hands down, and you learn by making mistakes.. but whatever floats your boat!