Web Design Assistance (Dreamweaver) please

D

DDD3

Registered
Please bare with me since I am a newbie. I am desperately overdue in redoing my website (I have barely updated it in the last 3 years. When I created it 5 years ago, it was in Front Page on Windows. I bought an IMac and last week I finished the design elements in IWeb and decided it was a little like being in High School with Kindergarten tools. So now I bought Dreamweaver and need to get some basics down before starting this project. My two questions now are:

1. When a website uses a center area for the website content (such as the design of this forum), what is that called as opposed to filling up the entire screen with one's website. How is a center area created in Dreamweaver and what are the pro's and con's of each?

2. I am an artist and have a photo I want to use as the background for my website template? What is the optimum size when doing that so it isn't a loading nightmare (or is it always going to make it very sluggish?)

DDD3
 
Hi there,

The term 'Island design' generally applies to layouts like this forum. The main advantage is line length: The rule is around 63 characters so the text is comfortable to read. Too many characters per line makes the text more taxing to read. The center area is created using html and css. Something like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style>
#container {
Width:500px;
margin:0 auto;
background:#ccc;
}
</style>

</head>

<body>

<div id="container">copy</div>

</body>
</html>


As for the photo, It's tricky to say a size -Given today's monitors (think about the 24" iMac, 20 cinema display, etc) you'd need a pretty large image to occupy the whole background. Is the image something that can tile (repeat)? This may make more sense depending on the image you're going to use.
 
Thanks for your response.

Since I am creating this website via WYSIWYG, not HTML, do you know how to create the island design that way? Is it done by using a table?

The photo is not one that can be tiled. Actually in Photoshop Elements, I took a picture of some draped fabric I had dyed and then overlayed some graphics on the top with my logo in there also. So the photo is my background and my header combined. So I'm guessing that if I size it the same as the pixels I use for the island design and keep it at 72dpi, I should be alright?

DDD3
 
I switched from Front Page to Dreamweaver a few years ago and love it. There were a few challenges, but overall, great move!

I would suggest you go to www.lynda.com and subscribe for one month. It will cost your $25 to do that. Then, spend the month watching as many tutorials as you can. The Dreamweaver ones are phenomenal, and you will save more than the $25 in your time alone after watching it. Best move I made.

Rob
 
The centered content I've heard called a frame/container. Use CSS and HTML to accomplish this (works in IE 6 and above and other major browsers like Firefox).

Any image you use as a background (or at all) will use memory. Try to keep your pages fast loading by keeping them under 150K (Use Firefox's Web Developer Tools add-on to get the size of your pages and other great tools/validators). Use a small image and repeat it to make a background pattern. Use a small jpg for a background image that doesn't repeat, 30K or less.

I like centered containers because they are always in the center (duh! he he) and the text remains consistent. Flexible layouts adapt to whatever screen width they are on, but can make text very hard to read because the lines get too long for your eye to follow. Centered containers using CSS don't work in older browsers, but those are a small percentage of users these days.

For CSS and HTML codes and tips, go to www.htmldog.com

I'd recommend avoiding tables for your layout because as you add pages you can't update them as easily using CSS which is its strong point. CSS allows you to update an entire site's look just by editing a few lines of code. Tables are good for presenting information, though, so don't write them off completely, and you can apply styles to the rows to make them look better.
 
Last edited:
You must log in or register to reply here.
Back
Top