Autostretch in Dreamweaver and Photoshop

[Delphi123]

Dear friends:

I've been reading up on Photoshop layers and Dreamweaver layout. This is not really a new thread but I feel that I now understand the issues well enough so I can make a coherent presentation of what I have done:

Please take a look at the original jewelry template.

http://www.immortalgems.com/original/index.html

Now my attempt at editing it in Dreamweaver in a systematic way based on what I have learned:

http://www.immortalgems.com/

I first opened the Photoshop psd file in Photoshop, removed the layers in question in order to leave the entire main layout table blank. I then saved it Optimized as HTML and images in ImageReady. I then opened it in Dreamweaver MX, where I could quickly see the complex table layout structure with nested layout tables.

My purpose was to take the edited web site home page (with blank main panel) in HTML format (index.html) with an images folder and add autostrech to it so that the final result would look equally good whatever the user's screen resolution. I want this to work automatically in so far as possible. Perhaps I am wrong to think that this is possible. But I assume (perhaps wrongly) that this is how the original was made.

As you can see, my edited version has a big, vertical white column running through it at 1024 X 768. On the other hand, at 800 X 600, the white column is very narrow but still there. Yet, by selecting in Dreamweaver's Column Header to add a spacer.gif, I did succeed in creating a genuine autostretch page (as was clearly shown both online and in the double lines and wavy line in the column header.

My question is: What's causing this white line that's running through the page? And is it possible to get rid of it by configuring Dreamweaver in some way? Or simply: what am I doing wrong, please?

Please see the following versions:

1) original template:

http://www.immortalgems.com/original/index.html

2) edited version with autostretch and white column:

http://www.immortalgems.com/

3) edited version with proper layout but with white margin on right:

http://www.immortalgems.com/index-a.html


Thank you so much.

Benjamin

 

[theKeeper]

First off, this topic is not actually PS related Delphi, so it should be posted in the "Other Interests" board.

( As a side note, i scanned the code for your template and it's quite complex. Not something a beginner would have an easy time wading through. You might want to study a little more on html construction before continuing.
As well... those templates are not usually designed to be reconstructed. You're simply supposed to edit the text to reflect your own content; including the type within the images. )

To continue...
You need to use nested tables Delphi.

The table that contains the content should be hard coded to fixed pixel sizes; based on the images it contains.

Then that content table should be put within a larger surrounding table, sometimes called a "Master" table, and that master table set to use 100% width & height. The Master table will usually contain 3 TD cells and one row. The center cell is where you 'nest' the 'content' table. Sometime there is just 1 TD cell.

The TD cell that will contain the 'content' table, should be set to align="top" vAlign="center". That will center all the contents in the page, should someone with a higher screen resolution view it.
As well, there will be empty space left and right of the content.

In your template, the the Master table has 2 rows & 2 columns. One row for all of the content except that blue bar at the bottom. That blue bar is within a TD cell where the bottom bar type image you were missing before ( in your other thread ) needed to be set as the TD cell's background image.

If you go through the code and change the table borders to "1", you'll be able to see exactly how your page layout is constructed. It makes it easy to decipher things that way. DW has "fake" borders to help as a visual guide, but they're dotted and hard to look at in a complex layout as yours.

 

[Delphi123]

Dear Mark and friends:

My deep thanks for a most illuminating discussion. Only now do I realize how complex this template really is. It seemed so elegant and simple but clearly its simplicty belied an intricate layout structure. I think I'll heed your advice, namely, not to tamper with the design but just to use exactly as it was to be used, as a template and to just change the text. That may well be wisest until I get more experience at this.

All my thanks.

Benjamin

 

[Delphi123]

Dear Mark and friends:

I've done some reading tonight on scaleability and I am just now realizing the predicament all web designers are in on this issue (as if they don't have enough to worry about!). How do you assure scalability in size AND resolution on a whole range of monitors from 15 inches to 20 + inches? Wow! I can see how my own template would look very tiny on a 20 '' monitor. Someone suggested elsewhere that there is special software that will let you do this but you must keep the original, big image on your server and then allow your users computer to downsize it when viewing it on their computers. Could someone suggest such a product?

Any idea on what would be the easiest way to handle this scaleability issue? Is there a way for me to do this with my template? That is, keep everything just as it is but just scale it so that it shows up without any white margin on the right or at the bottom?

Thanks so very much.

Benjamin

 

[theKeeper]

Actually Benjamin, you wouldn't want to do that.

I run at 1280x960, and if i saw a Web page that filled my entire screen area, it would drive me nuts. (that doesn't include message boards) That's just too much area to spread your content out in.

Best advice... max out your content width to an 8x6 resolution. At this time, that is the most common resolution being used.
Keep in mind though that if you're using "fixed pixel" widths, 760px should be your highest width amount. I usually use 740px myself, just to be safe.

Your template as is should fill a screen set to 800x600. I would suggest leaving at that.

And that program you talked about is expensive and not 100% accurate/useful anyway. Just learn the "html design rules" and you won't need an app like that.

First "rule of thumb" is... know your intended audience. Then design around their specific needs, and don't be overly concerned about those folks that are outside your target audience. There's no way to cater to every single user, so don't even try.

Do a search on "html tutorials" and you'll find more than enough data to keep you busy for awhile. :B

 

[lindaw]

Ditto Mark. I tried to reach all screen sizes when I first put up my business site. I code for 800x600 now. Follow Mark's advice and code for 800x600. I use three computers 18+ hours a day and I work off of 3 different screen sizes; 1280x960, 1024x768, 1600x1200. I am with Mark in that most users like to have a little border room around the screen, not completly filled. What I would suggest for worry number one is to make sure your page renders across the board, not IE only. You will serve your audience better covering that area instead of the screen size. :}

 

[Delphi123]

Dear Mark, Lindaw and friends:

I hear you loud and clear: 800 X 600. Leave some space to the right and left of the web page. OK. That's a relief. So, the only thing I'd like to do is to CENTER my page so that there is an equal amount of background margin space on the left and right. My jewlery template does not seem to be properly centered at 800 X 600. Could you please confirm this?

http://www.immortalgems.com/original/index.html

If so, what's the best way to center it? Could you please be specific?

My thanks to everyone for your kind help.

Benjamin