American Audio DCD-PRO240 Manuel d'utilisateur télécharger pdf (Page 227)

Freeway Reference: Appendices

227

Select the HTML item you inserted, then enter 100% in the Width field in the Dimensions panel of the

Inspector and type a Return.

This now means that the page “wrapper” has a width of 100% of whatever size the browser window is used

at, so it will always fill the width of the browser window and this item is effectively the background of the

browser.

Now you need to set up the items which will make up the content of the page itself.

Double-click inside the HTML item page wrapper item and go to Insert>HTML item three times. Because

the wrapper item uses the default Height setting of Minimum, this will make the wrapper item grow in

height to fit all three inserted items.

Select the top HTML item then click on the Width popup in the Measurements panel of the Inspector and choose Available.

Choosing Available will make that item fill the available width of its parent item (which is the page wrapper), so that will also give

the top HTML item you inserted an effective width of 100%. Select the third (bottom) HTML item you inserted and set that width to

Available. Finally, select the middle HTML item you inserted, click in the Width field in the Dimensions panel, enter 75% and type a

Return.

You will now see that the top and bottom HTML items fill the width of the page wrapper item and the middle HTML item fills three-

quarters (75%) of the page wrapper—and that item is aligned left inside the page wrapper. To center an inflow item within its container,

select the middle HTML item, click on the Margin popup in the Dimensions panel of the Inspector and choose Auto.

This is a good time to point out the benefits of giving your items

logical names so you will be able to identify them when you start to

build your pages, so click on the header bar of the Site Panel (to toggle

the view from Site to Page) so you can see the items on the Master

page in a list in the Site Panel. You can see in here that you have one

item at the top of the list (which is the page wrapper item you first

inserted) and three other items which are embedded “inflow” within

the page wrapper.

Select the page wrapper item (it should be called “m1”) then Alt-

click on it and rename it “pagewrapper” (without the quotes).

Now rename the inflow items m2, m3 and m4 as headercontainer,

pagebodycontainer and footercontainer respectively.

While the items are displayed in the Site Panel, you can apply colors to

each of the items so it can be previewed in a browser to see the current

structure. Select the pagewrapper item and give it a color with a Hex value of FFFFDD. Select the headercontainer and footercontainer

items and give them a color of blue, then select the pagebodycontainer item and give it a color of white. Now preview the file in a

browser.

In the browser window you will see that the header and

footer bars in blue always fill the browser window’s width

and the white page area is always centered within the browser

window with the area each side of it filling the rest of the

browser window’s width. Although it isn’t too easy to see at

the moment, this is the bare bones of a web page which has a

header and footer area and a flexible main page area which is

always sized to 75% of the browser window’s width.

It is important to point out here that each of the items has

a Height attribute set to Minimum—and the reason for

this is that because none of the items have content inside

them (other than the pagewrapper item) giving the items an

undefined height will make the item collapse so it is just 1px

high, so this needs to be done after the items have content

placed inside them. For now, however, we can give the pagewrapper an undefined height—and this is done by selecting the item in the

Site Panel list then choosing Flexible in the Height popup in the Measurements panel of the Inspector.

1 2 ... 222 223 224 225 226 227 228 229 230 231 232 ... 249 250

American Audio DCD-PRO240 Manuel d'utilisateur Page 227

Commentaires sur ces manuels

American Audio DCD-PRO240 Manuel d'utilisateur Page 227

Commentaires sur ces manuels

Produits connexes et manuels pour Lecteurs de CD American Audio DCD-PRO240