PHWinfo - Afficher un message - How do I create a web mock-up using Full Width Photo's

02/03/2008, 04h37

[q]Originally posted by: Travis D
Before I do I was just wondering if I have to crop the photo for the masthead
to match the full width of my web page, when I import the photo into
dreamweaver - and into a liquid layout - will the photo be distorted when the
browser window resizes?[/q]
When you place an image in a Web page, you set the height and width. "Liquid
layout" means that the space around images expands and contracts or that
elements can flow and adjust to changing browser widths.

The Jennifer Handy site is a fixed width layout. When you expand your browser
width the content does not expand to fit the margins, it stays centered in the
browser window, but does not re-flow to fit the browser window. If you use the
browser View>Source (or View>Page Source), you'll see that the content is in a
div named "content" and the css (css/all.css) defines that to have a width of
959px.

The GNV & Partners site is liquid. The navigation at the top expands and
contracts as you resize your browser window, the images under the Portfolio
section will re-arrange from two per line to one per line if the browser window
is made narrow enough. As JoeyD points out, the large images below the
navigation tile. They have been carefully crafted to repeat horizontally, and
do so if the browser is wider than the image. If the browser is narrower than
the image, then the design retains its integrity since the center of the image
is where the company has placed the focus of the composition.

[q]Also when I create the mock up in Fireworks should I make the width of the
mock-up 1004 (and photo masthead) which I was told the 1004 would be converted
automaticly to 1024 including a vertical scroll bar?

Or since I'm planning a liquid layout - does the mock-up size really
matter?[/q]
The conversion you mention isn't a conversion. It's only allowing for the
scroll bar on the right hand side. Firefox only puts one on if the page needs
to scroll, though.

How are you planning to make your design lliquid? Are you going to make large
images tile? How do you envision your site will behave when a user resizes his
or her browser window to, say, 800 pixels? For example, I have a 1600-pixel
monitor, but I often run my browser window at less than half that width. At
work, however, I have a 1920-pixel monitor. How do you want your site to look
if someone views it at full-screen under those conditions?

Fireworks can make your graphics, and it can mock-up your pages. To see your
design fully, however, you're going to need to build the HTML and view it in a
Web browser. In order to do that, you're going to have to think about how you
want your liquid layout to behave.

Given that you seem so intent on having a 1004-width layout...are you sure you
don't really want a fixed-width one?

02/03/2008, 04h37	#5
pixlor Messages: n/a Hébergeur:	Re: How do I create a web mock-up using Full WidthPhoto's [q]Originally posted by: Travis D Before I do I was just wondering if I have to crop the photo for the masthead to match the full width of my web page, when I import the photo into dreamweaver - and into a liquid layout - will the photo be distorted when the browser window resizes?[/q] When you place an image in a Web page, you set the height and width. "Liquid layout" means that the space around images expands and contracts or that elements can flow and adjust to changing browser widths. The Jennifer Handy site is a fixed width layout. When you expand your browser width the content does not expand to fit the margins, it stays centered in the browser window, but does not re-flow to fit the browser window. If you use the browser View>Source (or View>Page Source), you'll see that the content is in a div named "content" and the css (css/all.css) defines that to have a width of 959px. The GNV & Partners site is liquid. The navigation at the top expands and contracts as you resize your browser window, the images under the Portfolio section will re-arrange from two per line to one per line if the browser window is made narrow enough. As JoeyD points out, the large images below the navigation tile. They have been carefully crafted to repeat horizontally, and do so if the browser is wider than the image. If the browser is narrower than the image, then the design retains its integrity since the center of the image is where the company has placed the focus of the composition. [q]Also when I create the mock up in Fireworks should I make the width of the mock-up 1004 (and photo masthead) which I was told the 1004 would be converted automaticly to 1024 including a vertical scroll bar? Or since I'm planning a liquid layout - does the mock-up size really matter?[/q] The conversion you mention isn't a conversion. It's only allowing for the scroll bar on the right hand side. Firefox only puts one on if the page needs to scroll, though. How are you planning to make your design lliquid? Are you going to make large images tile? How do you envision your site will behave when a user resizes his or her browser window to, say, 800 pixels? For example, I have a 1600-pixel monitor, but I often run my browser window at less than half that width. At work, however, I have a 1920-pixel monitor. How do you want your site to look if someone views it at full-screen under those conditions? Fireworks can make your graphics, and it can mock-up your pages. To see your design fully, however, you're going to need to build the HTML and view it in a Web browser. In order to do that, you're going to have to think about how you want your liquid layout to behave. Given that you seem so intent on having a 1004-width layout...are you sure you don't really want a fixed-width one?