PDA

View Full Version : Need help creating a 3 column web page


CSUjr
02-25-2010, 12:41 PM
I haven't used my Dreamweaver program for a few years
and now I can't figure out how to do something that seems simple,
so I thought I'd come here and ask for some help.

I'm using Dreamweaver 8

I need help creating a simple, basic layout.

I looked through the help files but couldn't find what I need.

Can someone tell me how to create a vertical 3 column web page?

http://i45.tinypic.com/2wolqtc.png

That is, plain textured and/or colored columns to the left and right of the 'Content Area'.

Whereas, the Content Area is about 2/3 the size of the entire page.

From there I just want to be able to insert
- Just within the Content Area -
the header, text, navagational bars and other graphics (pictures, etc.)

The standard 'layout templates' in DW 8 seem to provide everything but a vertical 3 column layout.

Can someone provide a simple, clear solution to help me get this done?

With appreciation,
Charles

gentleone
02-25-2010, 01:13 PM
something like this?

HTML:

<div id="wrapper">
<div id="col-01"></div>
<div id="col-02"></div>
<div id="col-03"></div>
</div>

CSS:

#col-01, #col-03 {
width: 150px;
height: 500px;
float: left;
background: #CCCCCC;
}

#col-02 {
width: 660px;
height: 500px;
float: left;
}

CSUjr
02-25-2010, 03:44 PM
Thank you for your reply.

I don't know.

What do I do with that code?

I opened DW8, clicked on Create New, HTML, clicked on Code, pasted it like this;
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
<div id="col-01"></div>
<div id="col-02"></div>
<div id="col-03"></div>
</div>
</body>
</html>

then pasted a Logo into the center column
( <div id="col-02"> between here </div> )

saved it and previewed it but it was still left justified.

How do I specify the widths and color of "col-01" & "col-03"?

Or, how do I use the CSS code?
(I clicked on Create New CSS and it just took me to a CSS Code area within a new page, with no design view)

Or better still, how do I use this HTML code to make the web page appear like the sample image shown above?

With appreciation,
Charles

Corrosive
02-25-2010, 05:16 PM
You need to put the CSS in a stylesheet and link it in to the page where your HTML code is. You don't get design view with the CSS page because you are in fact styling the HTML page which is where you find design view.

CSUjr
02-25-2010, 05:31 PM
Thank you Corrosive for your reply.

Geez, I just want to 'point & click', like within a Template.

What I'm looking for is something (I guess code) that I can just paste into the Code Area, which creates color shaded columns on the left & right of a Central Area, that I can then just type in & insert what I want into the Design View Area.

This seems so common - Isn't there some kind of 'Template code' for what I need?

domedia
02-25-2010, 05:33 PM
Geez, I just want to 'point & click', like within a Template. Dreamweaver is not a replacement for the skills you need to create a webpage. Once you start to dive into HTML and CSS, this will be really easy for you :)

CSUjr
02-25-2010, 05:45 PM
Thank you domedia for your reply.

I do appreciate and respect what you have said.
However, DW8 is a WYSIWYG Html editor that is designed for Point & Click web page building - Just so that people don't have to learn all that other stuff. Also, that's why almost all HTML editors - including DW provide Templates. So, all I'm asking for here is a Template to create a simple 3 column vertical web page - that I can use to fill in the 'blanks'.

Now again, my DW8 supplies a lot of page layout Templates (2 column vertical, horizonal, 3 column horizonal, etc.) - but, no 3 column vertical.
So, can anyone help me acquire one of these 3 column vertical Page Layout templates?

With appreciation,
Charles

domedia
02-25-2010, 06:00 PM
However, DW8 is a WYSIWYG Html editor that is designed for Point & Click web page building - Just so that people don't have to learn all that other stuff. There's mixed opinions about that ;)
Unfortunately, Katy Sierra has stopped tweeting, and apparently quit blogging as well, but this is interesting:
http://headrush.typepad.com/creating_passionate_users/2007/02/its_lunchtime_a.html

Corrosive
02-25-2010, 06:04 PM
However, DW8 is a WYSIWYG Html editor that is designed for Point & Click web page building - Just so that people don't have to learn all that other stuff.

This simply isn't true. You still have to learn to code. Design view is a (very) rough guide to how your coding is going! As a web designer, the insinuation that my trade is 'point and click' is, frankly, insulting.

However, paste this in a blank page;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
background-color: #999;
}
#wrapper {width:960px; margin: auto;}
#col-01, #col-03 {
width: 150px;
height: 500px;
float: left;
background: #CCC;
}

#col-02 {
width: 660px;
height: 500px;
float: left;
}
-->
</style></head>

<body>

<div id="wrapper">
<div id="col-01"></div>
<div id="col-02"></div>
<div id="col-03"></div>
</div>


</body>
</html>


and you'll see what gentleone was getting at.

CSUjr
02-25-2010, 06:24 PM
Thank you for your reply.

I in no way intended to insult you and what you do.
I am just a 'casual' user.
I went for DW because is was HYPED as a 'WYSIWYG" Html Editor that all you need to do is to 'point & click'.
So that's what I bought into.
Therefore, for me - and others that bought into this HYPE, DW8 is just a 'point & click' HTML editor.

Your trade is another thing.
As a matter of fact, that is why I came here for help.
That is, because people like you have the knowledge that can help people like me solve SIMPLE issues - like Stock Templates and such.

It is because of the respect of your knowledge/skill/expertise that I thought that coming here would be a good idea.

Corrosive
02-25-2010, 06:31 PM
I went for DW because is was HYPED as a 'WYSIWYG" Html Editor that all you need to do is to 'point & click'.


Not by Adobe it isn't. They correctly sell it as a web authoring and HTML editing tool with some nice built-in short cuts and other goodies to make a designer's/developers life easier.

Did you try the page layout I gave you?

CSUjr
02-25-2010, 06:55 PM
Thank you for your reply.

I am not using Adobe.
I am using Macromedia Dreamweaver 8.
I bought this a few years ago because it offered a simple web page building solution.

They hyped it with stuff something like;
"Easy and Quick to use", "No Code to learn", etc.

Anyway, I didn't and still don't want to become a programmer or anything like that.

Again, I just want to point & click - simple cut & paste, etc.
Just to create a Plain non data base Single Web Page.

Nothing 'tricked-out' or flashing or anything - Just static information.
- In a Vertical 3 Column format.

Yes, I did try that code. Thank you.

I'm sorry that this simple request seemed to ruffle some feathers here.

I just wanted to ask some experts for some Basic help.

Thank you again

gentleone
02-25-2010, 07:29 PM
well then... I guess it should be clear by now that none of us is building 'point & click' websites with DW, so it should also be clear that you're at the wrong spot for your answer.

Perhaps you should look at a real drag & drop website builder like Sandvox (http://www.karelia.com/sandvox/)(Mac) or Blue Voda (http://www.softpedia.com/get/Internet/WEB-Design/HTML-Editors/BlueVoda-Website-Builder.shtml) (PC)... and they're for free.

Bill Pitts
02-25-2010, 09:38 PM
Hi Charles,
Please don't be thrown by some of the answers you receive here. I expect that there are a lot of people out there who are still using Dreamweaver in the "point & click" mode without a second thought as to the quality of the actual HTML code that the program is generating for them. AND I'm willing to bet that there are also some who go under the hood and tinker with their code to the point that they make an awful mess of their sites!

I found that a good source of information on building a properly coded website with programs like Dreamweaver is David McFarland's book CSS: The Missing Manual. If you're curious about the best way to build a site with Dreamweaver (and considering the investment that you made in purchasing it, you really should be), check out this book. Not only is it easy to understand but it also has tutorials to reinforce the lessons learned.

There is a chapter titled "Building Float Based Layouts" that covers your question very nicely. If you wish, you can see the sample pages for the tutorials in that chapter (and all of the chapters) here (http://www.sawmac.com/css/).

I bought the first edition of the book online for a third of the original price and am slowly rebuilding my site from the top down to clean up the code. I didn't know style sheets from dryer sheets when I started with Dreamweaver, but CSS: The Missing Manual has made it all so clear to me, to the point that I find myself dreaming CSS!

So, if you have a site, make it the best you can but don't sweat the details to the point that you take away all the fun. If it loads quickly enough and works, that's half the battle. But do try to learn about Cascading Style Sheets. You can improve your site so much with this knowledge AND have an interesting time learning something new!

Good luck,
Bill Pitts

domedia
02-25-2010, 10:41 PM
Again, I just want to point & click - simple cut & paste, etc..
DW really isn't like that. And it's evident when you're given the exact code to use, but you don't know how to apply it. The next step then is for someone to write the whole thing for you, which Corrosive did. But it kind of defeats the purpose, right? :)

Microsoft Expression has been described by some as a more point-and-click solution to making web pages.
You could try a demo version if they have it:
http://www.microsoft.com/expression/default.aspx

.

DWcourse
02-25-2010, 11:39 PM
I'm not sure about Dreamweaver 8 but CS3 and CS4 have built in CSS layouts that include one like you want.

Corrosive
02-26-2010, 06:02 AM
Save as HTML in Microsoft Word maybe?