Dreamweaver - Page Layout Issues

Author

Page Layout Issues

PattyO

2005-04-29, 7:21 pm

Good day,

I am a newbie to design and apologize in advance if this topic is ridiculous
in nature but we all start somewhere so here goes...

I am trying to do a website for a friend with 800X600 monitor resolution and
am having issues with how best to layout the design. Long story short, he wants
it designed for that resolution and I understand that. However, I also
understand the need for creating a page that will produce acceptable results at
a larger resolution. For the record he is also aware of my inexperience and is
comfortable with his site being the "guinea pig."

This past weekend I did a quick mock-up page containing just the logo
and header graphic so I could determine table width requirements not run into
the horizontal scroll bar thing.I then set to designing the entire page layout
using the Layout Table and Layout Cell tools. Everything seemed to go well
until I inserted some "fake" text into the content area. Instead of the text
wrapping in the cell it first squeezed the left-side navigation area out of
existence then stretched the cell to the right until it finally plunged into
the Atlantic. I inserted a spacer into the navigation cell to keep it open but
I'd still wind up going to the right and into the drink. I made sure there were
no NOWRAP tags in the code so I can't figure out why this would happen.

I had in the past generated a layout using the layers tool. As far as I can
recall I had had success with this method and was even able to center an
800X600 layout and higher screen resolutions. Additionally, the content area
would wrap and shrink and grow with the addition and removal of text. I was
therefore considering starting from scratch with this method till I read an
article (Tableless Layout with CSS) in the knowledgebase.

This article was great and I followed the tutorial with success. I would
definitely pursue this option but one of the biggest points made was
maintaining focus on keeping only content in the HTML page and removing all
structural and font styling markup to the stylesheet. My problem here is that I
had previously learned how to generate an entire nav bar in Fireworks and was
planning on exporting the Fireworks HTML to the webpage code. I know that
Fireworks uses and exports <TABLE>, <TD>, spacer images and even DW generated
JavaScript during the process. Would this page work when I've got the rest of
the structural tags in the stylesheet? Is there a way to remove the table tags
and handle via CSS?

Perhaps I am looking too closely and not seeing the big picture, but at this
point I'm not even sure how to go about laying this simple page (header, left
nav, content, footer) out.

Thank you in advance for any help, input, feedback, links, tutorials,
explanations, anecdotes, limericks, prayers, or horoscopes. It would be much
appreciated.

Regards,

Pat

Tim Gallant

2005-04-29, 7:21 pm

Hm. Where to begin?

First, let's clarify: there is nothing wrong with tables. You can structure
your page with tables and style them with CSS. Don't let anybody tell you
tables are evil (or deprecated, for that matter). They have their advantages
and limitations, like everything else.

Second: a CSS-based layout will still work with an FW created nav bar.
But... the real issue is how workable it is to employ the html and
javascript generated by Fireworks. I don't recommend it. You will be
introducing all sorts of annoying problems into your site. I suggest you
learn how to create a clean graphic in Fireworks, and a cleanly-structured
page in Dreamweaver, and place the graphics. No Fireworks html.

Third: given the drift of your post, I'm hoping that you are abandoning
Layout Mode?

Fourth: there are various ways to make your site work at 800x600. Simplest
to say that your options are either fluid or fixed.

If the latter, make your content about 760px wide; this will be seen in a
maximized 800x600 browser. I suggest centering your content area, so that
the empty space is divided in half in larger windows.

A fluid design is based on percentages and resizes to the browser window.
The one problem that arises with this are the ridiculously large monitors
and the few people who maximize with them - a string of text 200 words long
is unreadable! (There are ways of limiting width, but unfortunately the
simplest option - max-width - is not supported well by browsers.)

I'd suggest reading this article and getting a handle on it:

http://www.thepattysite.com/window_sizes1.cfm

tim

--
Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.pactumgroup.com/tutorials/
Techblog: http://www.pactumgroup.com/techblog
******************

darrel

2005-04-29, 7:21 pm

> (There are ways of limiting width, but unfortunately the
> simplest option - max-width - is not supported well by browsers.)

More specifically, not supported in IE. The rest do just fine ;o)

Here's a recent article that addresses that issue:

http://www.456bereastreet.com/archi..._width_elastic/

-Darrel

Tim Gallant

2005-04-29, 7:21 pm

"darrel" <notreal@hotmail.com> wrote in message
news:d4u7ad$k45$1@forums.macromedia.com...
>
> More specifically, not supported in IE. The rest do just fine ;o)

Yes. I resisted the temptation of saying that. When the browser in question
is sitting at roughly 85%....

> Here's a recent article that addresses that issue:
>
> http://www.456bereastreet.com/archi..._width_elastic/

Yes.

tim