Page design and placement

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.
Can this be achieved within FreewayPro5?
I have tried and failed so far!

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

David

A simple way is to set up a separate background layer (DIV) to the
size of page you want and place this as the bottom layer of your site
(or use as a container for everything else). Select this and you can
then fill it with a colour of its own, bring in a graphic, add a drop
shadow, etc., as with any normal layer. Select the page only (i.e.
nothing selected) and in the Inspector set a different colour (or
tiled image) which will extend across the browser window.

In simple terms, the page background refers to the page that fills the
whole of the browser window. Any layer sits above this and is
controlled to the size and position you set.

Hope that helps. Though, I expect the experts will add to this later
in more technically correct terms.

Colin

On 5 Jan 2009, at 10:32, David Reed wrote:

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.
Can this be achieved within FreewayPro5?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What did I say about the experts? Shouldn’t you be getting some
college stuff done right now, Keith!? :wink:

Colin

On 5 Jan 2009, at 10:54, Keith Martin wrote:

This is easy to achieve…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks guys,
I will endeavor to make a gif of the background colour that I require and then go from there.
If it falls round my ears. I’ll be back!

Regards

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you guys, it works a treat


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options