Photoshop CS web design Q...

I am a newbie at site building. I have designed a few pages with Photoshop CS. I am using the dimensions 600x800. My Q: when I look at other sites on the web the browser window adjusts the size of the page accordingly. When I preview my pages in a browser they remain the 600x800 dimension leaving a lot of white space around the page. I remember using dreamweaver a few years ago and being able to set some self adjusting size window option. How can I do this in CS? What do you guys think of the size i'm using too? TIA

Not sure about the option in CS, but as for window size...Here are the stats from my Buyer's Guide (based on last 100 hits):

43% 1024x768
28% 1280x1024
11% Unknown
10% 800x600
4% 1152x864
1% 1600x1200

75% Win XP
15% OS X
6% Win 2000
1% Win 98
1% Unknown
1% PPC
1% Linux

36 36.00% MSIE 6.0
26 26.00% Firefox 1.5
12 12.00% Safari 1.2
10 10.00% Firefox 1.5.0
5 5.00% Firefox 1.0.7
4 4.00% Firefox 1.0.4
3 3.00% Firefox 1.0.6
3 3.00% Opera 8.51
1 1.00%

The page gets 5-20 unique hits per day, and it seems like most of the rations between choices stay about the same.

Thanks for the reply. But i'm not quite sure how to think of your answer. When I preview my page in safari the window opens at the size of my page 600x800. Now if I resize the window to a larger dimension, my page stays the same size and the excess window space is blank. Sorry if im not explaining this clearly. I notice on other sites if you resize the browser window the page stretches to fit. The contents of the page remain the same, but the background fits the window and that's what i'm wanting to achieve. Or, do you think it even matters? I suppose if nobody tried to size their window larger than my page it woudlnt matter. It just seems like a nice effect. Thanks.

rs2sensen said:

Not sure about the option in CS, but as for window size...Here are the stats from my Buyer's Guide (based on last 100 hits):

43% 1024x768
28% 1280x1024
11% Unknown
10% 800x600
4% 1152x864
1% 1600x1200

75% Win XP
15% OS X
6% Win 2000
1% Win 98
1% Unknown
1% PPC
1% Linux

36 36.00% MSIE 6.0
26 26.00% Firefox 1.5
12 12.00% Safari 1.2
10 10.00% Firefox 1.5.0
5 5.00% Firefox 1.0.7
4 4.00% Firefox 1.0.4
3 3.00% Firefox 1.0.6
3 3.00% Opera 8.51
1 1.00%

The page gets 5-20 unique hits per day, and it seems like most of the rations between choices stay about the same.

Click to expand...

b16crx69 said:

I am a newbie at site building. I have designed a few pages with Photoshop CS. I am using the dimensions 600x800. My Q: when I look at other sites on the web the browser window adjusts the size of the page accordingly. When I preview my pages in a browser they remain the 600x800 dimension leaving a lot of white space around the page. I remember using dreamweaver a few years ago and being able to set some self adjusting size window option. How can I do this in CS? What do you guys think of the size i'm using too? TIA

Click to expand...

If we are talkng about the same thing, the websites which can strech accordingly to the screen resolution, like this one for example. I dont know if there are any other possibilities, but once in frontpage I made a website like this using shared borders. There are probably other ways, but I dont make such sites a lot. All I know is that the borders (top, left right etc...) work in some way like frames. They will align themselves automatically on the screen and in most cases only the central page and the banner will strech out.

In PS CS, all your doing is making the design and then save for web, which gives you a basic page to work with, you need to design your site to be expandable. What software are you using to code the pages?

normally in the code, the table you want to expand is coded like this

<table width="100%" border="0" cellpadding="0" cellspacing="0">
and/or like this
<td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

You want to design your sites with a max table width of 950px. if you want it to look good on a 1024x768 screen res.

I hope this helps you out.

JGruber said:

In PS CS, all your doing is making the design and then save for web, which gives you a basic page to work with, you need to design your site to be expandable. What software are you using to code the pages?

normally in the code, the table you want to expand is coded like this

<table width="100%" border="0" cellpadding="0" cellspacing="0">
and/or like this
<td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

You want to design your sites with a max table width of 950px. if you want it to look good on a 1024x768 screen res.

I hope this helps you out.

Click to expand...

Thanks for the reply. The onlys software I have is CS and Imageready. Basically I have designed pages using layers. I have a background layer, my text on another layer, and my thumbnails on individual layers. The text and thumbs function as buttons via slices. The entire document is fixed at 600x900, including the background layer and all. Would I have to build a different background and set that to expand while having the remaining layers floating on top? Am I thinking about this correctly? I dont remember using "tables". I just threw everything together and created slices for the buttons. I use "save optimize as" to preview the pages in safari. And I remember reading in the help menu that the file is exported as a a single table. I apologize for my redundantness, is that a word?, but i'm not sure how else to explain this. Maybe I should just start from scratch, which sucks because it took me forever to make these. It's been a good learning experience either way.

Here is some of the html that seems similar to what your suggestions address. I dont know how to read this.

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Home.psd) -->
<table id="Table_01" width="801" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img name="index_01" src="images/index_01.gif" width="800" height="526" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="526" alt=""></td>
</tr>
<tr>
<td>
<img name="index_02" src="images/index_02.gif" width="325" height="4" alt=""></td>
<td rowspan="2">
<a href="people1.html"