FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

planning a site in CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


taitj
I was wondering if anyone has any best practices or techniques when designing a website using CSS. For instance would you start with the main HTML page content, then start working with CSS?

Would you think of the layout on paper then think of the CSS code that would make the page look llike your layout?

Just curious how people really amazing looking css pages and where they start from?

Just curious as I have taken an interest in web page design as a hobby.

Thanks.
erlendhg
Hi there.
I am also kind of a HTML hobbyist (not professional), but I have been working a bit with HTML code for some years.

I don't think there is one answer to how to plan your web site, but I can share my experience.

I think the most important thing is to have a clear idea of the goals and contents of the site. If you have planned the organizing of the contents first (including menu systems and such), I often find everything much easier.

Then I usually have an idea about the design and make a rough drawing on a paper sheet.
Further, I would make the basic HTML code (I use tables, though I know many people would rather use "pure" css with div tags), and to the end I set up the css code and experiment with it.

Then I can just say good luck Smile
alalex
i recommend that if your not very experienced with css and div-based designs you make some drawings and sketches first, making sure that you draw all the divs so you know the structure.
Once you are familiar with it, start the html in nested order, so what you would see on screen if you color the divs would be just boxes with no positioning. Remember to asign a unique id to each div.

Once that is done, start with the css, if your site will be large, I recommend creating a separate css file called layout, which will define only the layout, no colors, nothing else. Then another one called styles, another one called tags... And then separate css files for any style you need for a particular section.

Now experiment with the position and behaviour, stretch the page, add text... try it out, and when you are done, run it it IE, Firefox, opera and safari. And when it works, use the W3C jigsaw validator to make sure it is accesible and compatible.

But for a small site, or a non-escalable one, all that shoundt take you long, and you should be done in about 2 or 3 hours. Wink
sonam
I am from my first site to the last one start directly in html editor without paper and pen. In most situation I am creating all design for index page and when I am sure it is good I am starting with ohers. CSS is simple and you can easy to learn all tips and tricks. For example, I am starting with * definition (margins, paddings, font, etc) what is valid for all elements in html. Next step is body definition (background, image, etc) and then the rest. The second reason for starting in editor is step by step checking any new element in three or four different browser.

Sonam
jcnet
HTML and CSS are great friends, so CSS is a must for sites..................CSS play a major role in sites......
There are site which completely depend on CSS........sites like Orkut.com look bad if CSS is disabled.......
CSS give a life to websites.

You can find a lot of CSS templates on the internet....

so try CSS on your site..........or download some templates.....

Cheers.....!!~!! Idea Idea Arrow
jcnet
HTML and CSS are great friends, so CSS is a must for sites..................CSS play a major role in sites......
There are site which completely depend on CSS........sites like Orkut.com look bad if CSS is disabled.......
CSS give a life to websites.

You can find a lot of CSS templates on the internet....

so try CSS on your site..........or download some templates.....

Cheers.....!!~!! Idea Idea Arrow
erlendhg
alalex wrote:
Once that is done, start with the css, if your site will be large, I recommend creating a separate css file called layout, which will define only the layout, no colors, nothing else. Then another one called styles, another one called tags... And then separate css files for any style you need for a particular section.

Now experiment with the position and behaviour, stretch the page, add text... try it out, and when you are done, run it it IE, Firefox, opera and safari. And when it works, use the W3C jigsaw validator to make sure it is accesible and compatible.


I agree.
Splitting up the css code in several files makes an easy, tidy structure.

Also I wouldn't use absolute positioning of div tags, but that is only my personal opinion.
I believe it is kind of messy and "un-safe" for the behavior in different browsers with different resolutions.
jylan
I do it by trying to visualise what I want the design to look like in my head, then I do the base XHTML code and use CSS to make the layout, then I usually put some content in the XHTML and use CSS to make it look great.

After that I just sort of fine-tune everything. Probably not the best way but it works for me Razz
will24
taitj wrote:
I was wondering if anyone has any best practices or techniques when designing a website using CSS. For instance would you start with the main HTML page content, then start working with CSS?

Would you think of the layout on paper then think of the CSS code that would make the page look llike your layout?

Just curious how people really amazing looking css pages and where they start from?

Just curious as I have taken an interest in web page design as a hobby.

Thanks.


I usually sketch out my site first on a peice of paper, then I usually start with the html code, and styling it as I go, like, I'll do some of the HTML for the header, and then apply a width and height to it, and a color. I usually don't bother with specific colors, or a:link attributes till later.
Mememe
What I do, when I'm inspired by a design, or have a nice idea I want to create, is start of with an plain HTML Document, with only:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Then, I just put in

Code:

<style type="text/css">
<!--

-->


I first make the main blocks/sections. Then I move onto the smaller details, such as text color, size and so on.

In between the end of the making the main sections, and the start of the smaller details, I then make the CSS, into a External CSS File. Once I've finished, I give it a few tweaks, name it, and save it into a CSS template pack. That way when I need to, or want to start a new website, I have a couple of templates to choose from.

~Mememe.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.