American Audio DCD-PRO240 User Manual download pdf (Page 228)

Freeway Reference: Appendices

228

Let’s add some text to the header and footer bars. Select both items one at a time and click on the Padding popup in the Dimensions

panel of the Inspector and choose 20px. Doing this will place 20 pixels of space around the inside of the item. After that, click inside

the items and enter some text and style it, align it, etc., and then give both items an undefined height by selecting them one at a time

and choosing Flexible in the Height popup in the Measurements panel of the Inspector. Preview the file in a browser again to see how it

looks now.

Now we can add two panels of text inside the main body area of the page. Because the pagebodycontainer item has a percentage width,

it is important to give percentage widths to items embedded inside it.

Select the pagebodycontainer item and give the item 20 pixels of Padding in the Dimensions popup of the Inspector.

Double-click on the pagebodycontainer item and go to Insert>HTML item twice. Select the top item and click on the Float popup in

the Dimensions panel of the Inspector and choose Left. As soon as you float the item left the second HTML item will automatically

jump up so it is alongside the first item.

Select the second HTML item and choose Right in the Float popup in the Inspector’s Dimensions panel. This will align the item right

within the pagebodycontainer item.

Select the first HTML item again and you will see that although the parent item (the pagebodycontainer item) has a percentage width,

the new items have been inserted with the normal default of a fixed width of 100px. With the item selected, enter 72% in the Width

field of the Dimensions panel in the Inspector and then select the second HTML item and give that item a Width of 25% using the

same method.

Now select each of the inserted HTML items in turn and apply a 1px black border in the Border panel of the Inspector’s Paintbrush

tab then give them logical names in the Site Panel (name the first HTML item leftpanel and the second HTML item rightpanel).

Because there is some content inside the pagebodycontainer item, you can now select that item and change the Height popup in the

Inspector’s Measurements panel to Flexible. After that, click in the Height field in the Inspector’s Measurements panel and enter

1000px for both of the inserted HTML items before previewing in a browser to see it all looking a lot more like a proper web page. Test

the percentage widths set on the pagebodycontainer, leftpanel and rightpanel items to see that as you change the width of the browser

window the items change in relation to each other.

Going back to your Freeway file, select the leftpanel item and give it a Padding of 3% in the Dimensions panel of the Inspector then

enter a lot of dummy text to almost fill the leftpanel item and give the item an undefined height by clicking on the Height popup in

the Inspector’s Measurements panel and choose Flexible. If the dummy text is less than the 1000px you originally had set, the item

will reduce in size to fit the text that is now inside it.

Let’s make the rightpanel item a column of two small box panels. To do that, first select the rightpanel item and remove the black

bornder from it, double-click inside it and go to Insert>HTML item twice. Select each of the inserted HTML items in turn and choose

Available in the Width popup of the Measurements panel of the Inspector to make them fill the width of the rightpanel item.

Now select the top HTML item, apply a 1px black border to it and then, with

the item selected, click on the Margin popup in the Measurements panel of

the Inspector, choose Custom..., enter 20px in the Bottom field and click OK.

What this does is to add 20 pixels of spacing between the two boxes in the right

column. Margin is the opposite of Padding in that it adds space to the outside of

an item rather than the inside.

Double-click inside the top box item, and insert two new HTML items then give

both the new items a Width of Available. Select the first HTML item, give it

a Padding of 10px in the Inspector’s Dimensions panel

, enter the text “Box

One”, style the text so it is in centered White type of 14px

Helvetica, select the HTML item, apply a Black background

and then click on the Height popup in the Measurements

panel of the Inspector and choose Flexible to give it an

undefined height.

Select the second HTML item, apply a Padding of 2%,

add some dummy text inside the item and then give it an

undefined height.

Repeat this to add content to the second box item in the

rightpanel column (using the heading name of “Box Two”)

and then you need to remember to select the item called

rightpanel and give it an undefined height.

Finish off by giving the names of the items in the Site Panel

list logical names so they are easy to identify and then

preview the file in a browser to see how it looks and to test

the page again by changing the width of the browser window.

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

American Audio DCD-PRO240 User Manual Page 228

Comments to this Manuals

American Audio DCD-PRO240 User Manual Page 228

Comments to this Manuals

Related products and manuals for CD players American Audio DCD-PRO240