I'm currently working on a new layout design for my employer's website (link takes you to a screenshot of what it is so far).

It's not done yet but I'm happy with the direction it's going (although feedback would be welcome). I would like to make this site have a fluid layout so that it will adjust to screen sizes. How would I slice this in Photoshop (or Fireworks) so that I can make it a Dreamweaver template?

Thankey kindly for suggestions!

Right firstly.. Denotation...

Site is mainly neutral browns large text on the top right (largest there i would assume its some kind of title.)

The colour of the "Title" is deep red "WoodCounty"

Connotations.. the colour scheme used suggests its themes on the wood elements mentioned in the title... as an anchor to the wood part.

the layout and conventions seem to be set for a simple page layout with boxes filled wth text information possibly pictures and so on...

No animation as of yet but it has potential for an animated navigation button system either gif over states coded in html or flash.
the slicing i would recommend...

saving one long thin slice of that background and using that as a vertically aligned tile saving greatly on loading times... only load it once and it carrys on down the page as part of the css style... the logo make it a transparent png that way if sombody does come to the site they can copy the logo straight from the cache and use it without fucking around with it and it will be high quality...


navigation

cut the button states out... Over,on, down and hit if necassary.
for each buttons in the navigation...

so the heirachy looks kinda like.

- natural web background colour matching the extreme edges for seamless appearance.
- Tiled background above that centrally aligned loads second as it wont take less than a second. and the text needs somthing to contrast with.
- navigation loads first after the misc quick backdrop has been placed. for quick browsing for people who have been there before..
- Title at the top (need to know where you are.)
- Contents in the middle (know where you are theres the content.)
Png logo at the bottom, (loads last a it is of a high quality. should be placed over the top of the tiled background...)

well thats my slant on it anyways

great post

Ummmm... I know. I'm making/doing it.

Great grasp of the obvious you've got there Marx.
Must fight urge to say no shit sherlock. Web developer but not graphic artist however I do know how to do background images and tiles. The part I'm worrying about is fluid layout along the width (length pretty much takes care of itself).


Anyone else understand what I'm trying to do? Maybe it'd help if I finished the preview so that people can see the nav links and other features.

Maybe this can help
http://www.entheosweb.com/photoshop/slice.asp

Looks good Tofu. Very...Wisconsony, that's the word. Seriously I like it.

This has nothing to do with web design, but I have a couple very small design-y suggestions...

I would suggest kerning the "Wood County" heading a bit... in other words, close up some of the space between the letters-- particularly in "Wood"-- and especially between the "W" and "o". (Well-set type can often be that little detail that makes a design "professional"-looking.)

And center "In beautiful central Wisconsin" vertically in the bar. Not sure if you intentionally set it a little high (so as not to be mistaken for a clickable menu item), but it looks odd to me. Perhaps make that type the same red as "Wood County" so it ties together better.

what the slicin will do is make a table cell fer each slice. soooo... keep it simple stu... er... tofu... ya can then manipulate the tables, table size cell size in dreamweaver.

the problem is that there are so many ways of doing this that it just become personal choice... like with everythin else done is photoshop...

dont go crazy slicin it up.. just cause ya sliced everythin into lil images at the size 1kb, they will still add up.

"about directory...etc" unless yer using a special font, just use linked type when ya bring it into dreamweaver. "Wood county" & "in beautiful blahblah.." can be one big banner image. OR "in beautiful" can also be texted in... OOOOOORRRR...
i dont know.. read what nifft linked

theres a nav bar option in dreamweaver that will set it up a template and if ya change that, it will automatically change it for all the files.

... i think i remember how to do it. once ya have it set up save it as a template in dreamweaver. while in the template ya can set certain table cells that are affected by the template whenever ya make changes to it and areas that will be left alone

then ya creat a new from the template you ll see the areas that are template and areas that ya left open for manipulatin. fill it the empty areas wth whatever and save it as about.html etc... just create a new from template fer each page and ya should be all set

Thanks for the tippage E! I've done some edits and hopefully it's better. I've also added dummy text to show where the design is going.

http://i12.photobucket.com/albums/a232/tofuthegreat/Site-Makeover-Template.jpg

Thanks also to you Beetster. I am pretty familiar with templates in Dreamweaver (as I am layout tables, layout divs, etc, etc, etc.). I was indeed planning on using CSS and text for as much as possible.

Lemme see if I can describe my question a bit better. See the background border that appears on the left and right? I want keep those edges no matter what the viewer's browser width is set to (within reason say down to 800x600 which is, I believe, is actually somewhere around 783x550 or so of viewable area).

So I'm wondering how to slice the image so that I can keep those right and left borders. Everything else is easy really. I thought about doing a 5px high bar section for the vertical tile (basically what Marx said). But that limits my width to the width of the slice. I want the width to expand or contract. Maybe I just need to do a right and left slice, vertically tile those and then just set the background to the color?

OH! And thank you to nifft for pointing that site out. I haven't finished reading through it yet but it does look like it'll help.

And, BTW, the colors are from our "tourism" logo (it's in the bottom right with the lowered opacity). The board paid a ton of money for the thing and they've demanded we use it. Funny thing is that they paid enough that they probably could have had a logo and a web template done. But they didn't know better and didn't ask us (the IT dept) for advice before doing it. Now we can't afford a designer so I get the duty.

Also it appears that my laptop's color profile is different than my desk's flat panel so now I've got to determine the best color profile before generating my slice images.

Better-- though I think that heading needs a little breathing room from the top of the header bar. And maybe adjust its shadow so it's got a little less blur, and is 180 degrees from where it is now (down and to the right, rather than up and to the left). You'd need to nudge the subhead away a little, so it's not sitting in the shadow.

sorry to nitpick, just trying to help

Yes. To try and avoid the useful information of the Marx-Man.

the color scheme isn't exciting for me, be sure to use text links for the menu, if i understood you want the website to resize itself horizontally...why? that would compromise all of your design work, stick with a width and keep going.

and another thing, i suggest going for css layout, ditch tables and use them for what they were intended for: tabular data. Trust me you'll be very happy plus the pages load way faster, this way you'l only need 4 images: the header, the menu strip, the shadow and the bottom right logo, the rest use #colors.

cheers