How do I create a web mock-up using Full Width Photo's

Question

Greetings & Help!
I'm trying to create a full width photo layout using
Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Answer 1

Hi Pixlor -
I'll do my best to answer your questions - within my ability
- which isn't much.
As far as "Tile" the photo - I've checked out the responces
I've received from other's on this post - and other posts - and on
each page for the "masthead" I just want one photo to be the same
size of the page width wize - and the height of the photo should
not be tall from the top of the masthead to the bottom of the
masthead. As far as what I mean by "not being Tall" - see next
comment...
I'm just attempting to duplicate exactly (or very close to
it) the same appearence and dimensions - "Width = side-to-side,
Tall = Height - as the websites I mentioned in my first post here.
Also if you check out Joey's website (who responded to my
post as well) basicly he has created the same thing that I'm
shooting for except he is using graphics. I have to use photos in
my masthead which will be of kitchen cabinetry or construction
photo's and must highlight every detail down to the shine of the
kitchen cabinets knobs - or close to it.
Due to this I can not have the photos of the masthead "tile"
from "width-to-width or top-to-bottom because the deatils in the
photo can not repeat or multiply to completely fill the masthead
head. Otherwize if I choose a photo of kitchen cabinetry which
highlights a kitchen sink - and if I tile this photo - from what
I'm learning from everyones responce thus far - I'll end up with
several of the same kitchen sinks and cabinets in the same photo.
I must stress I could be wrong in what I described directly
above due to my lack of tech knowledge! If this post was about a
2x4 or 2x6 or Green Building or what have you, It would be heck of
alot easier for me to completely understand what you pro's are
trying to help me with - which I completely appreaciate. Expecially
someone like you who owns a monitor the size of one of my work
trucks!
Which brings me to your next question...
Liquid layout -
Yes I am trying to end up with a liquid layout for my website
using Dreamweaver CS3. Hopefully using one of the pre-built liquid
layouts in Dreamweaver and modify it within my ability.
The main reason why I would like to create a liquid layout is
because most others construction firms in my industry - and in my
target market - have websites that completely consume a viewers
monitor - viewport - screen real estate - (i'm trying to learn your
tech terms) no matter what size viewport a viewer has, or how the
viewer resizes theirs.
I've also heard that a "Min & Max" code can be included
in a liquid layout so that it would limit the "liquidness" of the
layout so "Text Lines" won't stretch too long making it difficult
to read when a viewport size extends - and when the viewport shinks
- all the elements (or Div's) will reflow an maintain order and
visability.
1004 -
The only reason why I mentioned designing the Fireworks CS3
mock-up at a 1004 is because someone else mentioned they design
their mock-ups at a "Canvas Size" of 1004. Then most browsers
automaticly inlclude a scroll bar if the vertical content exceeds
below "The Fold". Thus with the addition of the automatic scroll
bar the page now becomes 1024 - according to this person.
She went on to mention according to "recent studies" - 56% of
viewers have 1024 x 768 and most computer manufacturs shipp them
this way. Then the following stats... 22% at 800 x 600, then 13% at
1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She
also mentions most avearge viewers (every day Dick & Jane, Bob
& Besty) (excluding computer tech folks like yourself) - do not
resize - bother with - or know how to resize their viewport.
My personal note on this is most of my target market -
clients - just turn on their computer and surfs the net from
website to website without changing their viewport and when also
asked they "Feel" that a website looks much better - or more
profeshional - when the content completely fills up an entire
viewport.
"Feel - not - Think" -
Keep in mind I choose the word "Feel" & not "Think". In
my target market - Residential Construction - 95% of home
improvement decisions are made my the Woman of the houshold - not
the Man. That being in mind it is a proven stat (and not a sexest
comment) that women base most of their choices or decsions on how
something makes them "Feel". Where as most men make their choice or
decision on how they "Think".
Also most men attempt to keep their women happy and knowing
that if they don't then they will end up in the doghouse - ( not a
fun place to be trust me on this) and in addition most men do not
have much of a clue when it comes to the interior design layout of
a home, matching of paint colors, appliance choices or what have
you.
Wow that was a major side track I took -
Back to 1004 -
It's not that I'm intend in designing the mock-up in
Fireworks at 1004 - I just want to end up wth a liquid layout so
when my site is viewed by "most people" then my site will
completely consume a viewers viewport - or very close to it.
If I need to design the mock-up less then 1004 - or more then
- and still be able to end up with the same end result in a liquid
form - so be it.
I don't know the best way to proceed -
I'm just attempting to learn from others who respond and for
the most part those who have been kind enough and taken the time to
respond seem to be very knowlegeable about my issue at hand.
You might find this hard to believe but I am learning quite a
bit from all of you and I really do appreaciate it.
Well now that this responce is as long as the novel "War
& Peace" - I'll close here.
Travis