Please help: Trying to find the right...

i have finish putting together the website and the size of the site is 1680 x 900.

I would like to make sure that the webpages are able to fit to any screen size and the hot spot do not get destorted.

The background image is large also.

Below is the code to the site-- Any help would be great

(i have set the background image to 1680x900 in size?the div has a table inserted and the table size is 1680

My problem is that when i go to a smaller computer screen it remains 1680x900

I need to know what I have to so to make the current design in Dreamweaver fit any screen size:

body {

background-image: url(images/Design-BK2.png);

background-color: #030307;

background-repeat: no-repeat;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

margin-left: 0px;

margin-top: 0px;

}

--%26gt;

%26lt;/style%26gt;

%26lt;script src=''Scripts/AC_RunActiveContent.js'' type=''text/javascript''%26gt;%26lt;/script%26gt;

%26lt;link href=''Css/design.css'' rel=''stylesheet'' type=''text/css'' /%26gt;

%26lt;! Begin Smooth Blend Pages --%26gt;

%26lt;meta http-equiv=''page-enter'' content=''BlendTrans(duration=0.5)''%26gt;

%26lt;meta http-equiv=''site-exit'' content=''BlendTrans(duration=0.5)''%26gt;

%26lt;! End Smooth Blend Pages

IN and OUT --%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;div id=''wrapper''%26gt;

?%26lt;table width=''1680'' border=''0'' cellspacing=''0'' cellpadding=''0''%26gt;

?%26lt;tr%26gt;

?%26lt;td%26gt;%26lt;img src=''images/a28sample.png'' alt=''design'' width=''1680'' height=''900'' border=''0'' usemap=''#Map'' /%26gt;%26lt;/td%26gt;

?%26lt;/tr%26gt;

?%26lt;/table%26gt;

%26lt;/div%26gt;

%26lt;map name=''Map'' id=''Map''%26gt;%26lt;area shape=''rect'' coords=''35,192,103,211'' href=''Selectwork.html'' alt=''Work'' /%26gt;

%26lt;/map%26gt;%26lt;/body%26gt;

%26lt;/html%26gt;

THANKS FOR ANYONE'S HELP

Please help: Trying to find the right...

You may have a real challenge here.?Trying to precisely fit content over complex background images is not exactly an optimal way to build web pages.?But anyway....

Start by changing your table width to 100%.?1680px is very wide even by today's standards.?Most of my site visitors use 1024 -1280 wide displays.?And most of those do not brows with the viewport maximized.?So 1680 is just too awkward for most users.

Liquid layouts or percentages have some major drawbacks as well.?Your layout may start dropping stuff down if it's re-sized too much, or it may grossly stretch apart on ultra wide displays.?Personally, I think the best layouts for beginners are fixed-width, somewhere between 900 - 1000px, centered.

3-column, CSS layout (view page source in browser to see the code)

http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml

You may find this 2-part tutorial of interest:

From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html

From?Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html

Nancy O.
Alt-Web Design %26amp; Publishing
Web | Graphics | Print | Media?Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Please help: Trying to find the right...

I have taken a look at your suggestions, and i am going to push to design pages in dreamweaver to similar formats in the future.

I have heard there is a Javascript that can allow the entire page to resize in accordance to smaller browsers and/ or ask the end user to resize to full browser size to view information.

Is this true. if so please let me know. If not, in your opinion, do all the elements of the page have to be changed?

Thanks again, you have been most helpful.

Please visit the site www.trbla.com

Sorry to say, but image maps are not an optimal way to build web pages and haven't been since the mid 1990's.?To illustrate my point,?run your web page URLs through this SEO Browser tool.

http://www.seo-browser.com

You will see your site as the Search engines see your site.?Which is to say, NO CONTENT!.?Images or image maps are no substitute for actual HTML text.?I think your design is very nice for print but it doesn't work well on the web where pages need to be flexible and contain content for search engines, people, screen readers and translators to grab onto.

If you think a Javascript that resizes your page is going to solve this problem, you're mistaken.?It won't resize all your graphics and adjust the layout proportionately for you.?That comes from good web design and pre-planning in the design phase. Viewing maximized doesn't help people like myself who do not have a 1680 wide display.

Rebuild this site the correct way.?Find a suitable CSS layout to work with. I highly recommend using CSS Layout Magic or one of the Page Packs from Project Seven. They're rock solid, work in all browsers and you'll learn a great deal from examining their code.

CSS Layout Magic - DW Extension

http://www.projectseven.com/products/templates/pagepacks/cssmagic/index.htm

IQ by PVII - Page Packs

http://www.projectseven.com/products/templates/pagepacks/iq/index.htm

Slice your images in your favorite graphics editor.?Insert them into your CSS and HTML pages along with actual text using the following tutorial to guide you.

Taking a Fireworks (or PhotoShop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

Best of luck on your project,

Nancy O.
Alt-Web Design %26amp; Publishing
Web | Graphics | Print | Media?Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com