Dreamweaver - Optimizing for different resolutions

Author

Optimizing for different resolutions

blakrapter

2005-09-14, 7:33 pm

Hi, I am new here and relatively new to web design, so I am not very technical
or html savy... I have a question that you all may be able to help me with. I
am designing a website and would like to build it such that the entire
screen/window is used when the page is being used. I can do this with tables I
have been told by setting them to use 100% of the window. I will have menu
bars on the right and left of fixed size and the middle area will expand and
contract to make up the difference in screen resolutions. Here is my problem
though:

The top banner that extends from one side of the page to the other and
contains a black backdrop for a logo on the left side. The backdrop fades into
a landscape photograph that extends all the way to the right side of the page.
I am not sure how to make the top banner expand and contract to accomodate
screen widths from 800 to 1024 pixels. Obviously I cannot "stretch" the photo
because it will distort it. I would prefer to keep the black backdrop as small
as possible (just large enough for the logo). What I would really prefer is to
"crop" the excess of the photo for lower screen resolutions. I do not need the
entire photo to show, so I can set it up 1024 pixels wide and "crop" the excess
200 or so pixels for 800x600 resolution. I am not sure how to do this though.

I have two possible solutions. The first is to create a small vertical strip
in the black portion of the logo backdrop that will expand and contract to take
up slack. I don't like that idea because the backdrop will be almost twice the
necessary size when the page is being viewed in 1024x768. It will throw the
banner off "balance." Also, the fade/gradiant on the right side of the
backdrop is tapered because the logo is wider at the bottom, therefore, the
verticle "takeup" strip will need to be placed to the left of the logo, which
would then shift the logo toward the center of the banner at higher
resolutions/window sizes and throw off the "balance" even more. Hopefully that
makes sense.

My prefered method, which is where I need help, is to create two overlapping
images. The logo and backdrop will be one image and the photo another. The
backdrop/logo will be left justified and the photo right justified. The photo
will be behind the backdrop. Therefore, the backdrop covers the extra width of
the photo when a lower resolution is being used, and the photo will "slide out"
from under the backdrop if higher resolutions are being used. My two problems
with this: First, since the backdrop is fades into the photo, I basically need
the black to fade to clear so that the photo can be seen through it. I have
heard there is a file format that will do this, but I do not know what it is or
how well it works. Second, I don't know if I can overlap those images like I
mentioned without the browser going crazy.

Any suggestions will be greatly appreciated. Thanks.

darrel

2005-09-14, 7:33 pm

> The top banner that extends from one side of the page to the other and
> contains a black backdrop for a logo on the left side. The backdrop fades
into
> a landscape photograph that extends all the way to the right side of the
page.
> I am not sure how to make the top banner expand and contract to accomodate
> screen widths from 800 to 1024 pixels.

For starters, understand that screen resolution isn't the issue. Browser
viewport size is. And that can be anything.

That said, for your banner, you need to get creative. Some options:

- tile the photo so it repeats seamlessly.

- make the image REALLY wide...like 2000 pixels, and then set it as a
background image to the banner. The banner will then crop/show more/less of
the banner depending on the width of the browser.

- fade the image off to a flat color

-Darrel

blakrapter

2005-09-14, 7:33 pm

Darrel,

Thanks for the info. I like the sound of making the photo the background
image for the banner. That is basically what I thinking, I just didn't
describe it very well. If I have a 2000 pixel wide image set as the
background, what will it do to the users with lower resolutions or smaller
window sizes? Will it make them scroll? Also, if I am able to make it work
with the background image, I still need the logo backdrop to fade to clear. Is
this possible? Finally, how do I actually set this up in dreamweaver? I am
using an older version, about three years old, but I am not sure about the
version.

Thanks.

blakrapter

2005-09-14, 7:33 pm

Oops, just figured out the background image. Still have to find a file format to fade to clear though.

darrel

2005-09-14, 7:33 pm

> Oops, just figured out the background image. Still have to find a file
format to fade to clear though.

PNG is the only format that offers alpha transparency. Alas, IE/PC by
default, doesn't support that. So you will need to use some javascript hacks
for that.

But, that said, why not just make the fade part of the background image?

-Darrel

blakrapter

2005-09-14, 7:33 pm

Darrel,

Thank you again for your help, your awesome. One more question though. I put
basically the entire banner in the background and positioned the photo such
that it is OK for the right side to be cut off when smaller windows/resolutions
are used. It is wide enough for a 1024x user to use it without "blank" spots
around the banner. It appears to work fine when I resize the layer I stuck it
in in dreamweaver, but when I preview it in IE it does not automatically cut it
like it does when re-sizing the layer. I tried to convert the layer to a
table, but that didn't work because it deleted the whole image. (I normally
don't deal with tables, so I probably did something wrong) So, how do I set it
so that the layer automatically resizes to the window size?

Thanks, you have been a great help so far.

darrel

2005-09-14, 7:33 pm

> It appears to work fine when I resize the layer I stuck it
> in in dreamweaver, but when I preview it in IE it does not automatically
cut it
> like it does when re-sizing the layer.

Avoid layers if you can. Layers are absolutely positioned and sized DIVS. If
a div is set to a fixed width, it won't stretch.

Simple fix, just make the div a percentage width.

-Darrel

blakrapter

2005-09-14, 7:33 pm

Almost working, but when I changed it to 100% (and tried a few percentage
points + and -) it gives me a small gap on the right side. How do I get rid of
that? Should I trash the layer and use something else? If so, what do you
recomend. I have always used layers to make images and text easy to move
around, but maybe that stems from my dreamweaver roots from the early days...

Thanks

blakrapter

2005-09-14, 7:33 pm

Ok, I am a little to quick to ask questions. I got it figured out! I had to set the borders to 0 in the page properties menu

.: Nadia :. *TMM*

2005-09-15, 7:20 am

Seems you are already into your design using layers, but as mentioned layers
(absolutely positioned divs) may not be your best option at this stage ...
have a look at this 'flexible table' tutorial which will help solve all the
problems you appear to be having.
http://www.dwfaq.com/Tutorials/Tabl...ible_tables.asp

You may also be interested in the CSS tutorials at the MM site which will
teach you the right way of using divs to layout your site.
http://www.macromedia.com/devnet/dreamweaver/css.html

--
Nadia
Team MM Volunteer for Dreamweaver
--------------------------------------------
http://www.csstemplates.com.au
Templates | CSS Templates |
http://www.DreamweaverResources.com
Dropdown Menu Templates | SEO Articles |Tutorials
---------------------------------------------
MM Dreamweaver Tutorials
http://macromedia.com/devnet/mx/dreamweaver/
---------------------------------------------

"blakrapter" <webforumsuser@macromedia.com> wrote in message
news:dg9c95$6n5$1@forums.macromedia.com...
> Hi, I am new here and relatively new to web design, so I am not very
> technical
> or html savy... I have a question that you all may be able to help me
> with. I
> am designing a website and would like to build it such that the entire
> screen/window is used when the page is being used. I can do this with
> tables I
> have been told by setting them to use 100% of the window. I will have
> menu
> bars on the right and left of fixed size and the middle area will expand
> and
> contract to make up the difference in screen resolutions. Here is my
> problem
>