Sometime around 5/1/09 (at 05:32 -0500) David Reed said:
When you set up a page with a coloured background, the background
fills the whole of the screen when viewed in safari. I see that the
pages on the Transport for London website www.tfl.gov.uk are very
distinct with a white page on a light grey background.
This is easy to achieve. First, take a look at
http://www.tfl.gov.uk/tfl-global/images/page-background.gif - which
is the graphic that the TFL site uses for the page background. If you
copy this out of your browser to the Finder and then try it in a
Freeway page as a background graphic you can do this yourself.
With nothing selected, use the Inspector palette’s second icon and
choose this graphic as the page background image. (You can
alternatively drag and drop it into the page WITH the Shift key held
down. This applies it as a background rather than importing it as a
regular graphic.)
Once the graphic is set up as a true page background (remember NOT in
a graphic box - that’s NOT a page background!), use the Inspector
palette’s controls to set the background’s Horizontal setting to
Center and the Vertical setting to Tile. It will now be centered
horizontally in the page but be tiled to fill the page vertically.
Add a simple background colour fill and use D7D7D7 as the hex colour
code; that’s the right match for the ‘background’ part of the
graphic. Now the graphic will appear to fill the page width edge to
edge.
Preview and resize the browser window. Presto! You have the fake
‘page within browser window’ effect. This is how this trick is done.
Simple, eh?
All you need to do is make your own graphic, bearing in mind that it
should tile seamlessly down the page and that you will need to either
make it wide enough to fill a browser window in every reasonable
circumstance (aim for 2000px wide) or you will need to match the edge
colour with a simple page HTML colour fill.
Oh - this is the TFL page background graphic, but the site design
shows a white ‘fake page’, not a light grey one. I haven’t checked,
but this is either done with a white-filled HTML box (in Freeway
terms) behind the other elements or it actually uses another
background graphic. But still, this should show just how that page
effect is made.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options