Designing in Layoutmode?

I am designing a website for my trainer. Is it a mistake to design it in Layout mode using Dreamweaver? I don’t want to have to struggle learning CSS too in depth right now. I just want to get the website done. Of course, I hope to learn some CSS along with way. I’m still back in the table days. What do you think?
Am I behind the times?
Thanks

Yes, you are behind the times. But that isn’t a problem in any which way and Sitepoint has some of the most impressive CSS brains to guide you when things go wrong!

Designing in layout mode will not get you anywhere. Designing with tables will not get you anywhere. It’s not worth doing it the wrong way now and then having to learn everything AGAIN when you eventually do consider it worthwile to learn CSS and HTML indepth.

Seriously, the CSS and HTML fora here are an excellent resource to get you started the right way. There are also tons of books, but for a start you don’t even need them.

Well do I use the div and float CSS class to create sections instead of tables? Thanks. :slight_smile:

div stands for division. It is just one element out of many that you can use to structure your HTML document.

There are a plethora of ways to design a layout in CSS. The float property, like the position property, allows you to organise your elements in the way you want.

If, for example, you wanted a simple two column layout, then you would want two columns to float side by side.

Your CSS could look like this:

#primary-column {
    width:65%;
    float:left;
}

#secondary-column {
   width:35%;
   float:left;
}

In this very simple example, you’re simply declaring that the primary column will be floated to the left and have a set width of 65% of the viewport.

Your secondary column will have 35% and also be floated to the left, next to your primary column. You could also float it to the right. It is up to you how you do it, best to experiment a bit.

Both columns have a total computed width of 100%, those 100% being whatever width of a user’s viewport.

Your HTML for that would be simply:

<div id="primary-column">
    <h1>Hello, Anotherdesigner!</h1>
    <p>This is my main column.</p>
</div>

<div id="secondary-column">
     <h2>Good day</h2>
     <p>Things that aren't the main focus of this page go here.</p>
</div>

To make it slightly easier for controlling whether or not (for example) you’d like to center your design, you could add a container to hold your two columns.


#container {
    width:80%;
    margin:0 auto 0 auto;
}

Now your HTML would look like this:


<div id="container">
   <div id="primary-column">
    
      <h1>Hello, Anotherdesigner!</h1>
           <p>This is my main column.</p>
    </div>

    <div id="secondary-column">
            <h2>Good day</h2>
            <p>Things that aren't the main focus of this page go here.</p>
    </div>
</div> <!-- close the container -->

This is really basic. Of course you’ll need to know how to prevent floated content from “spilling out” and why floats need to be cleared, but that isn’t relevant now. I just wanted to show you how you can start.

The “auto” values in your margin property mean nothing other than “please assign the remaining width across my left and right margins equally”. That results in your layout being centred, should you wish to do so.

Another Designer, here’s a good tip I usually give to individuals starting fresh (or rebooting their knowledge)… write your HTML before you start using CSS. If you mark-up all your content using the right tag for the right job you won’t go wrong. So a paragraph of text uses <P>, an image uses <IMG>, an abbreviation uses <ABBR>, an unordered list uses <UL> with <LI> for each list item… etc, the key is to have your content (at least the base content) and look at all the HTML tags available, thinking what describes this best. Once your done you can style using CSS using the structure you have produced (so you could color abbreviations red using the abbr {} CSS selector - targeting elements or elements within elements). If you find yourself needing to apply style to a specific element you can use ID attributes (for multiple elements use class) and you can wrap blocks (like header, footer, content) in DIV’s if you feel it will help you target stuff better. While kohoutek is right about what you could do, it’s much easier to write HTML with content (to describe) and it’s much easier to write CSS (if you have the HTML laid out to splash style on as you need it - you can always tweak your HTML as you go). You could get one of those cheat-sheets with HTML and CSS elements / properties if you find it hard to remember what’s available for you to use for each language, just remember to use everything in moderation :slight_smile:

Thanks AlexDawson.
What is a “cheat sheet?” Also, I am so used to creating my pages with the Dreamweaver tools. I guess I should start just doing it with html in the code mode. That means I must know what I want to design before I start coding. This means just have a sketch of what I want to start designing, am I correct?

A cheat sheet is sort of like a poster or wallet sized card… depending on what you get. What the cheat sheet has is every single HTML element or CSS property or JavaScript function (depending on which language you go with). The great thing about cheat sheets is they give you something you can just “look at” and decide what will work best for you (it’s excellent if you have problems remembering what stuff you can use). SitePoint have posters for CSS, JavaScript and PHP - which act like cheat sheets, but if you want some free ones the following website is good…

http://www.veign.com/reference/index.php

PS: You don’t need to have a sketch if you want to just “design as you code”, I tend to write the HTML and then apply the CSS as I go. It can be helpful to have a sketch of what you would like the site to look like though (it’ll help you stay focused on your aims). :slight_smile:

:tup: nice example

Perhaps most importantly, the old Layout mode in Dreamweaver CS3 and earlier sits between you and real HTML tables,and fools you into believing that concepts like “layout cell” and “autostretch” really mean something. They do not. As long as you use Layout Mode, you’ll never learn one of the most important things for new web developers - how to build solid and reliable tables.