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

Freeway Reference: Appendices

226

Inﬂow layout tutorial

Percentage-based inflow layout

This type of layout method is sometimes called “fluid layout” because the layout of the page

will reflow as the containers holding the content of each item grow wider or narrower as the

browser window is resized.

Some web designers prefer the width of the container items on the page to stay at a fixed

width (although full-width items such as header and footer bars still fill the width of the

browser window regardless of its size) because the page layout can look very different when

viewed on small screens and huge desktop screens. Fixed width and other inflow layout is

discussed later.

Many people like to use percentage-based inflow layouts because they can be made to adapt

well to different screen sizes, and with careful consideration with the design of the site it is

possible to achieve a design which looks fine on a full-sized desktop computer screen as well

as on a smartphone when the screen is used in portrait mode. However, it will always be a

limitation of this type of layout that viewing the page on a very large screen can mean that

paragraphs of text may run to just one or two lines, which can compromise the original design

of the page layout.

Creating a percentage-based inflow layout page

All inflow layout uses the same basic principles of embedding items inside other items (sometimes to many levels of embedding), which

is why the layout method is called “inflow”.

To start with you need to create a new document. The size of the page isn’t particularly relevant because the page size will ultimately

depend on how large the visitor will use their browser window when they view the file online. However, you need to have enough

room to work on your layout in Freeway so create a new document using the Blank template in the General template folder, give the

new file a name, choose where you want to save it and click Save.

First thing to do is to click on the Master1 page then set the Width popup in the Measurements panel of the General Settings tab of

the Inspector to Flexible. It is important to note that you need to leave the Align popup of the page set to None, as the alignment of

items in inflow layouts are controlled by “Margins” and “Floats” (which will be covered later).

Next you need to create a “wrapper” to contain all the items used on the page. To do that, double-click in the empty page area (so you

can see a flashing text cursor in the top right of the page) and then go to Insert>HTML item to place an HTML item in the top left

corner. This item will be sized at 100 pixels square, which is the default size of items inserted using this method.

In the screenshots right and below you can see

how a percentage-based inﬂow layout can be made

to work on very wide desktop screens as well as

narrow smartphone screens.

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

Pas de commentaire

American Audio DCD-PRO240 Manuel d'utilisateur Page 226