Building a template for my website

[canderous]

Hi everyone,

I have been following a simple tutorial that uses a template and I have learnt a few things about web design from that. However, I want to make my own template for my website as the available layouts don't offer exactly what I want.

From what I can tell the core template of a website is just there to hold images and text. This is the template I have used so far: http://i479.photobucket.com/albums/rr154/ianhudson2/sitetemplateprintscreen.jpg

However, I want my website to have a template basically like this: http://i479.photobucket.com/albums/rr154/ianhudson2/Whatiwantmysitetolooklikerough.jpg

As far as I know Adobe Dreamweaver is my best bet for building the layout myself. However, I think I need someone experienced with Dreamweaver to help me through the process of building my layout step by step.

If anyone can offer any advice or help it would be greatly appreciated. Thanks!

 

[CaldwellYSR]

Are you wanting to write the code to make your template or just use that image?

 

[canderous]

Looking to write the code

 

[chrishirst]

Looking to write the code

Then you really shouldn't be using Dreamweaver.

 

[ronaldroe]

Then you really shouldn't be using Dreamweaver.

Or if you do, push off the temptation of using design view.

In all seriousness, if you haven't yet spent money on Dw, don't. If you're serious about coding the site yourself, Dw doesn't offer anything you can't get for free.

Coding the template is pretty simple if you know and understand HTML/CSS. Once you've got that all down, just basically move everything into place using floats and relative positioning.

I can't see the image where I am (gov't computer), but let's say there's a header with a logo on the left and navigation on the right.

HTML:

<div class="header">
<a href="LINK TO MAIN PAGE"><img src="logo.png" /></a>
<ul class="nav">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>

CSS:

.header{
height:120px;
margin:0 auto;
overflow:auto;
width:90%;
}
.header img{
border:0;
float:left;
}
.nav{
float:right;
}
.nav li{
float:left;
}

And that would get you started. You could push things around a bit using margins, or add padding to give the nav items more breathing room, etc.

 

[canderous]

Thanks ronaldroe, that information is exactly the kind of thing I was looking for. I haven't spent anything on dw as I just got a free trial.

I will attempt to increase my understanding of HTML and CSS then hopefully I will be able to build my website they way I want it. The code you gave me is a great start though so thank you very much.