Easiest way to design the basic layout of a website

nullbytes

New Member
How do you design the basic layout of a website? I mean the css structure of divs. For me, i try to find a similar theme\template and make some changes to fit with my requirements. So i can't get the exact thing that i want. It's really tedious to code a complex website structure, always headache with float, margins, overflow etc. So is there any ready made tool where i can make my initial structure of my site with ability of assigning ids,classes for each part so that i can modify those with external stylesheet?
Thanks friends
 

ronaldroe

Super Moderator
Staff member
It's actually pretty simple to do it yourself when you start thinking of how everything separates. When you write the HTML, think less about what it will look like, and more about what containers you'll need for what content. Write all of that first. Don't touch a bit of CSS until you at least have a skeleton down.

For example, let's say you want a header area with a logo and a nav. Below that, you'll have a content area and a sidebar. Below that, a footer.

Start by laying down the basics you must have. You could maybe keep a file that already has this, or perhaps if your editor has a snippet function, use that.
HTML:
<!DOCTYPE html>
<html><head>
<title><!--Whatever--></title>
<link rel="stylesheet" href="style.css" />
</head><body>
</body>
</html>

Then, just start blocking out what you know you'll need, not even worrying about what it'll look like.
HTML:
<!--DOCTYPE thru open <body> tag from above go here-->
<header>
  <div class="logo">
    <h1>Site Name</h1>
    <h2>Tagline</h2>
  </div>
  <nav>
    <ul>
      <li><!--Menu Items--></li>
    </ul>
  </nav>
</header>
<div class="content">
  <!--Main content stuff will go here-->
</div>
<div class="sidebar">
  <!--Guess what goes here-->
</div>
<footer>
  <!--FOOOOTTTTEEEEERRRRR!-->
</footer>
<!--</body> and </html> from above here-->

Took less than 5 minutes, and right now there would be literally nothing there. We've defined no visuals and frankly have no idea what we're going to make it look like. We don't even know which side the sidebar will be on. The important thing is, however that we have the structure of a basic page in place. From here, you can easily begin to think of how you want the various page elements to look and where they'd be. Using floats along with the box model and positioning, you can do quite a bit with just what we have here. My main point is that when you try to style elements as you go, you run into more problems because the structure isn't in place already. You can't see what you're going to be working with 20 minutes down the line, let alone several hours. But, when you get the structure down and in place, you can see what you'll have to work with ahead of time. You can begin to visualize how things will react to what you're doing. You may find, as well that your CSS comes out cleaner this way. I did.

You could use a site builder for it, and there's no shortage of them out there, but why would you when it's this simple?
 
Last edited:

DotCom

New Member
DREAMWEAVER. it has a bunch of templates with snippets within the code to guide you in editing. Just be sure you design for the user and not for yourse3lf
 

TodoRojo

New Member
I'm not super code-smart. But I love photoshop. What I do is look for a nice, free, template that is open for any use and then edit it to my liking.
 

Phreaddee

Super Moderator
Staff member
yes, that happens, you should be well aware of the way these things evolve.
example...
1. hi, how do I make a website layout?
2. use css/html > mark it up like this
3. nah dont like it, use wix.
4. templates are good.
5. yeah try this template, awesome.
6. wtf?
7. wtf? templates in website builders are even better.
8. WTF? read point 2!
9. irrelevant spam
10. another pointless post saying how templates/webbuilders/seo company x are the best and people should use it.
11. someone tells poster 10 that they are an idiot.
12. poster 10 gets the shits and starts rattling off some "valid" arguements. they dig their hole even deeper.
and on it goes...
 

ronaldroe

Super Moderator
Staff member
Yeah, well. I hoped for different this time. Alas, I was once again disappointed by the web community...
 

albionalden

New Member
Before you consider the personal preferences of your web page design, you should consider best rules and adapt the personal preferences accordingly as your site needed. Your attitude should be should always be secondary to your web site's function. Most important creative expression, corporate image or running a successful business...
 
Top