making my optimized p/s file fit to browser

building photoshop html file in dreamweaver

[meanweaver]

I am building my site templates in photoshop at a resolution of 800 x 1200. I then do my stuff in image ready and have my html template, but how in dreamweaver do i add the code so they resize to the browser window, maybe this is more of a html question and there's some code to drop in the head of the document. Thanks Ian

[dragonlady7]

You're doing your whole site in Photoshop?
!
I don't even know how that works. I did my banner graphics and the like in Photoshop-->ImageReady, which then exported nice little HTML blocks of neatly positioned images. So I suppose that's what you're working with.

To get them to resize to the browser window you'll have to edit the HTML, I'm afraid. You can do it through Dreamweaver's Design View, I suppose-- it's probably images in tables, and you'll have to set the table widths to be 100% or whatever relative to the size of the rest of your graphical elements.

But you're really generating all of your HTML in Photoshop? That's... I've just never heard of anyone actually doing that before. How does that work? Can you have plain text sections? Or are you just doing the page borders and other graphical elements in PS, and adding the actual text content in DW?

[le_gber]

A question for you meanweaver,

are you graphics taking the whole 800 x 1200 canvas in Photoshop.

If yes nobody will be able to see the whole page fit in one screen. Most people have a screen resolution of 800x600 or 1024x768 (widthxheight) so it's best to design on a canvas of, say, 780x500 (actual window in which the site is displayed).

Then you can put your site in DW in a 100% table which will fit the screen. With complex graphics I usually have a 750px table with all my graphs in, within a 100% table with the end of my grahps as a table or cell background image. For more simple graph I've got 3 columns, left and right fixed width, and middle %age

Hope this helps

Leo

[meanweaver]

Hi thanks for the replys, well i am doing the whole background on a 800 x 1200 canvas, the whole outside of the page is blue but the blue border is thicker on the right handside to accomodate the links the text is being added in a white rounded rectangle, i have put a name up the top in photoshop as this will be the same on all pages, everything else will be added in dreamweaver, i have a very small scroll sideways so i think a screen res of 780 may have been better there but there is only blue border nothing to view outside this, but the site is nearly all text based and it would be almost impossible to fit on a 600 screen res down to get the desired effect, i just wondered if there was a simple way of fitting the whole image in a % table, i think i should add that i saved the background in image ready as optimized and a html file, did try to put it in a table but it seems to split the image up, still new to dramweaver.

Regards Ian

[caine]

backgrounds are messy when your talking about different rez's on view browsers.

One way around it would be to use a JS browser detect script for the res, and use various bg's for different rez's, alternatively though i am not that hot with CSS, i would have thought that you could have CSS position the BG, into a central top position so that you can have the same background centre at what ever size, with color fill for the varying rez size.

Question that i am not clear about: what size is the background, or is it a solid color?

[meanweaver]

Never used css before so maybe i need to do some homework on that, the background size is 800 x 1200, the outer edges are blue with a white rounded rectangle in the middle, because i have saved it as a html file from photoshop dreamweaver opens it at this screen res. However if there is a js i can drop in the head of the file i could experiment with that.
Cheers Ian

[le_gber]

The pb with background images are:

your 800x1200 image will be big a take time to download. If you have the simplest design or shape the size can climb up to 100's of Kb

if it's a dark bg and you wrote in wite font on top of it, people WILL have to wait b4 they can start reading - and they don't like waiting

if somebody got a bigger screen res (~50% of people browsing the internet have 1024x768), your background image will repeat itself (you could use CSS for no repeat but then you will not have anything but your bg color to fill the blank)

in some older browser (netscape 4.7 for ex) the bg image re-start in all the cells of the page. Meaning that if you have a table with, say, 3 col and 5 rows, your image will start at the top left of each cell and stop at the bottom right of the same cell and so on for each of your 15 cells.

Hope this helped you

Leo

[limbo]

With regards to the width of the page - you mentioned that you have a little horizontal scroll - the page always looks better if you can ensure that it will view perfectly in 800x600 with Ms toolbar right or left. I still try to keep pages viewable on 480x600 but this isn't really necessary.

With one almighty BK image like this testing on the largest resolutions would be advisable as the image will begin to repeat itself and can intrude on your overall design.

Have come across liquid design? It might be something for you consider
that way you could have the Bkground set within a table with a % width so no scrolling would occur - and the page will resize for different resolutions and extras like the M$ toolbar. or context menus like history and favourites

[dragonlady7]

I'm a big fan of the liquid design idea-- just size everything at 100% width and subdivide with tables-- and I'm having a really hard time envisioning what you're trying to get at by having your whole background be an image. Is it that you're slicing it into table cells and so the image itself isn't that big, but is sized by the size of the table? Because that wouldn't be hard to convert to a not-so-fixed size.
Though Mozilla doesn't do too well with images sized at height="100%" etc... :-( If anyone has any tips for dealing with that, I'd love to hear them.

[le_gber]

dragonlady7, hope this will help.

If I want to have the top part of the site to carry on forever sideways:

I put a 100% width table at the top with a 1px wide bg image in the cell. It'll repeate itself until it reaches the edge of the screen. Basically it's just a 1px vertical slice of the end of my 750px header design. The height of the slice will depend of the height of your header/table.

If I want to have the left part of the site to carry on forever top to bottom:

Same trick. 1px height image, which is a horizontal slice of a part of the design, export it and make the canvas 3000px wide, with the design on the left and apply this image to the page background.

YOu can use both tricks together and you'll have a fast to download bg for your pages which will cover your page both ways left to right and top to bottom.

Leo

[dragonlady7]

># I put a 100% width table at the top with a 1px wide bg image in the cell

That's what I've done. Well. The table is 100% wide, and I have several cells in it. Most of the cells are set to the width of the images in them, and then there's one left over that's meant to expand to fit the rest of the page. This works fine in IE6 (win) and Safari 1.0 (mac), but in Mozilla, the image sits at the left, 4 px wide (or whatever size the slice I used is) and refuses to be as wide as the table cell. Do I have to put a subsidiary table in there to get it to be as wide as that table? What a pain that would be...

Other than that, all my liquid design elements work. I'm just using a bgcolor for the background, and the graphics are overlaid. I wanted to have as little be fixed as possible. It just seemed lighter to me to go about things that way. And it does look good in a window larger than 615 px wide... it squishes right down, and expands.
Just not... quite... in Mozilla.

[meanweaver]

Although my bg was created in photoshop, when i moved it into image ready i then saved it optimized as html file, i set the original canvass to 800 x 1200. There's to much info for it all to fit on a page nicely without scrolling down, the size of this template is only 4kb and with just text and a few rollover images should load quickly, so hence there is not a table involved at all, on a bigger screen res the page sits on the left side but top to bottom looks ok, would be better if i could make it sit in the middle and get the rest of the screen outside the page to be the same colour as the page surround,I've seen this with other sites but they seem to be asp sites, only just getting the hang of these static sites so wont worry about that for a bit,
Cheers Ian