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

Freeway Reference: Getting Started

Freeway distinguishes layers from inflow items by drawing

small triangular corner mounts in the top left and bottom

right corners.

One way in which CSS boxes differ from table-positioned

boxes is that their height is treated inflexibly by browsers. If

a box is specified as being 200 pixels high, it will always be

200 pixels high in a browser, regardless of whether this is tall

enough for the box’s content to be displayed. By contrast, table-positioned boxes will grow to fit their contents. For this reason, CSS

boxes that contain text content should normally be set to have an undefined height by deselecting the height button in the Item

General panel of the Inspector palette or by setting the Height popup in the Inspector to Minimum or Minimum (%) (Minimum

is the default setting). CSS items whose height is undefined will grow and shrink to fit their content in a browser.

Layer items are output so they float in the HTML output and their position relative to the top left hand corner of the browser

window is fixed.

This difference makes layer items extremely useful for layout. Their position on the page can be recreated in the browser window

absolutely, without requiring an invisible layout table to hold them in place. They can overlap each other without requiring other

items to reflow, be cut up or combine with them.

It is important to note that every layer item will be used on a layer of its own (i.e., it is not like using layers in desktop publishing

where you can use multiple items on the same layer). Also, you can control the stacking order of layer items by selecting them and

using Item>Bring Forward, Item>Send Backward, etc., or by assigning a specific “z-index” attribute to an item in the item’s <div

style> dialog.

Finally, because individual layer items are individual objects in the HTML output, they offer tremendous scope for adding animation

and interactivity to your web pages using Dynamic HTML

(DHTML), i.e. by scripting their behavior using JavaScript. For

example, a layer item may be animated so as to appear from the

edge of the screen and move across the screen in a particular

path.

Using Relative Page Layout with CSS layout

Although CSS (layer) items have many advantages they also have a major disadvantage—and that is that because the items are

positioned on the page using CSS, they will not automatically move down the page if the content above grows in height (which

table-based items do automatically). This can mean that if HTML text increases slightly in size when rendered in a browser (especially

if the text turns to create additional lines), layer items may overlap or underlap the content above. To avoid this problem, Freeway

has a powerful Action called Relative Page Layout which you can apply to either the Site Folder in the Site Panel (which will make it

take effect globally for all pages in the site) or to individual pages/master pages.

Using Relative Page Layout on your site file effectively means that it will be converted to an inflow layout, so that if any content on

the page grows in height, all other items will move down the page, keeping the spacing between the items relative to how were used

on the Freeway page. There are some limitations, however (for example if a single item overlaps multiple other items, or if multiple

items are stacked on top of each other)—in which case you may need to consider applying the Remove from Relative Page Layout

Action on one or more Actions. It is also important to note that to use Relative Page Layout, every item on the page needs to be a

layer item, and you will see error messages if you have any table-based items used on the page.

You can read all about the principles of Relative Page Layout and how to troubleshoot inherent issues by reading through the articles

on the Softpress KnowledgeBase at http://www.softpress.com/kb/questions/238/ and http://www.softpress.com/kb/questions/287/.

CSS inflow items

FW Pro only

CSS inflow items are output as part of a flow, and their position is dependent on the position of previous inflow items and other

content (such as text) within the same flow. This makes them useful in cases where you do not want content to overlap in a browser.

One of the problems that can occur when using layers is that text content which fits within the layer in Freeway may spill out of it,

and overlap with other content, when it is displayed within a browser. Alternatively, if the layer is set to have an undefined height,

the box as a whole will grow to fit its content, and may overlap with other content. Inflow items provide a way of dealing with this

problem, but they also have their own limitations—unless they are floated, you cannot position two CSS inflow items so that they

next to each other horizontally.

To draw a CSS inflow item within Freeway, insert a text cursor onto the page or within another CSS item and then draw the item. To

insert a text cursor onto the page, either click in it when it is already selected, or double-click on the page if “Require double-click to

enter text in page” is selected in Freeway’s General Preferences.

You can download a (very basic) tutorial on how to build inflow CSS layouts along with a sample Freeway file by clicking on the link

at the foot of the page at http://users.softpress.com/keith/box_model_tutorial/.

Note also that because there is an inherent bug in CSS when building inflow CSS layouts with items which are floated inside a parent

item, you will need to apply the Auto Clearfix Action to the

Master page(s) of your site so that the parent item’s height will

not collapse. You can get the Action from http://actionsforge.

com/actions/view/299-auto-clearfix.

Note: Using CSS items for layout is also regarded as a “cleaner” web

design technique than using invisible layout tables, since their use shouldn’t

cause problems for unusual browser software. For example, the screen reader

software used by visually impaired people may become confused when it

encounters a layout table. As more and more web users have adopted modern

browsers, the need for web designers to use tables for layout will decrease.

Important: Freeway Express does not support layer items, but it has

limited inﬂow functionality, such as inﬂow table-based items (see Working

with Items later in this manual)

Important: Freeway Express does not support CSS inﬂow items.

1 2 ... 13 14 15 16 17 18 19 20 21 22 23 ... 249 250

Comments to this Manuals

No comments

American Audio DCD-PRO240 User Manual Page 18

Comments to this Manuals

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