Designing Webpages?

design

#1

I could use some help … This is want I want: On the left side of my webpage I’d like to have a separate background, with a list of links. On the right side, the main part of the page, I want the text, pictures, and more links, buttons, etc.

I am using Nvu. I was thinking of using frames, but Nvu doesn’t support frames (?). How can I create the webpages like I want? Are there any templates already to go, that I could simply download, and open up with Nvu, and go from there?

Thanks for any suggestions.


#2

Don’t use frames to try and achieve this effect. Frames are evil. What you need is a combination of sound markup and a dash of CSS. At a basic level, your HTML should look a bit like this:

[code]


your content goes here
[i]your links go here[/i]
[i]your footer information (copyright, etc.) goes here[/i]
[/code]Now, to put the links on the left and the content on the right, you can use CSS to float things to where you want: [code]div#content { width: 65%; float: right; } div#links { width: 35%; float: left } div#footer { clear: both; }[/code]The [b]clear[/b] statement ensures that your footer is always below the content and links, regardless of which column is the longest. Using this method, you can easily switch the links to be on the right of the content, simply by swapping the [b]float[/b] rules in the CSS. Both the links and the content can have a separate background. Putting the content first in the markup helps search engines to properly index your pages. I've used the 65/35 split as an example, but you can alter those percentages to suit whatever you want (as long as they add up to 100).

Simon Jessey
Keystone Websites | si-blog


#3

Thanks for the instructions with CSS and floating! I’ve never done anything like this before, so this will be challenging and should be fun at the same time!

I’ll start with a test document in Nvu today and play around with the code a bit.

Can you recommend any good websites with more information on how to do this? Thanks.


#4

There are lots of layouts covered on the css-discuss wiki, but they aren’t really going to give you much more than I already have. The only further enhancement I can suggest is to give your containing DIVs a child DIV each so that you can easily set gutters (margins, padding) without upsetting old versions of IE.


Simon Jessey
Keystone Websites | si-blog


#5

I’ve started adding a wiki entry about this, in case you find it useful.


Simon Jessey
Keystone Websites | si-blog


#6

“Can you recommend any good websites with more information on how to do this? Thanks.”

Some great sites for learning CSS and other html would be:

http://www.htmlgoodies.com
and
http://www.lissaexplains.com.

Lissa explains is made for children but it really does explain a lot and it is very very helpful especially for CSS (you’ll have to get used to the colors though ;).

Hope this helps!