Professional Documents
Culture Documents
using freeway 5
reference
The Freeway 5 Reference |
Freeway 5 Reference—Rev. 001, May 2008
Contact details
Contents
Copyright and acknowledgements
Copyright and acknowledgments You can reach Softpress Systems using the following contact details:
Introduction
Contents
Note: A full contents listing starts on page v.
The Freeway Reference is intended to be an in-depth resource for beginners
Getting Started with Freeway. .....................................................................1 and experienced users alike.
Starting a web site in Freeway, working with pages, items,
text, graphics, hyperlinks, anchors, metatags, publishing, We try to cover almost everything, from planning and preparation, to
and uploading. starting your web site in Freeway, defining page sizes, and so on right
through to dealing with forms, markup, and managing your site. You
Advanced Techniques..................................................................................183
will occasionally find cross references to other Softpress publications.
Working with CSS for layout and styles, color, styles,
If you don’t have copies of these, please visit the Softpress web site
flexible layout, tables, framesets, and forms.
(http://www.softpress.com/support/usermanuals.php).
Freeway Actions............................................................................................311
Extending Freeway using Actions, adding code manually Along the way, watch for hints and tips and links to resources where
to Freeway’s output, and working with markup. you can learn more about both Freeway and World Wide Web.
Appendix..........................................................................................................423
Working with Freeway’s preferences, Document Setup, A note about the differences between
and a complete list of keyboard shortcuts. Freeway 5 Pro and Express
Much of this Reference covers both Freeway 5 Pro and Express, but there are
some fundamental differences between the two versions. Where possible,
we have highlighted in the text where such differences affect any actions
described. You can find a list on the next page which outlines the key features
that are only available in Freeway 5 Pro.
Enjoy Freeway!
◆ Multiple output options (HTML 3.2, HTML 4.01 Transitional and Strict, ◆ Specify padding, wrap, margin, and border (HTML items only) separately
XHTML Transitional and Strict). for each side of an item.
◆ Link map: overview and maintenance of all the links in your document. ◆ Extended transformation options: Skew, Scale, and Mirror content
separately from its box.
◆ Multiple windows open for the same document at once.
◆ Freely combine and manipulate shadows, glows, and other graphic effects
◆ Snapping palettes for easier workspace management. with greater control over their appearance.
◆ Complete color and text style management across your entire document. ◆ Save items and pages as images.
◆ Employ multiple style sheets for each document. ◆ Use the full range of Freeway Actions, or write your own.
Contents
CSS inflow items FW 5 Pro only . ................................................................. 12
Browser restrictions........................................................................................... 12
Introduction...............................................................................................................ii Setting the HTML level FW 5 Pro only . ......................................................... 13
The differences between Freeway 5 Pro and Express. ............................iii To set the HTML level for the document . ...................................................... 13
HTML page alignment . .................................................................................... 14
Getting Started Page alignment...................................................................................................... 14
Starting a web site ................................................................................................ 2 Setting a different page alignment . .............................................................. 14
Creating a new site ............................................................................................ 2 Saving your document...................................................................................... 15
Publishing and previewing your site .............................................................. 2 Saving your document with a new name..................................................... 16
Workflow .................................................................................................................... 3 Saving your document as an archive............................................................. 16
1 Planning the site ......................................................................................... 3 Automatic backups .............................................................................................. 16
2 Designing the layout .................................................................................. 3 Opening a backup document . ........................................................................ 17
3 Creating and assembling content . ........................................................... 3 Working with Freeway’s templates................................................................. 17
4 Creating a new Freeway document ......................................................... 4 Using a template to create a new site document......................................... 17
5 Defining grids, master pages, and navigation ....................................... 4 Creating a new template.................................................................................. 18
6 Adding and laying out pages .................................................................... 5 Installing a template......................................................................................... 19
7 Previewing the site and making corrections .......................................... 5 Creating a custom icon for a template........................................................... 20
8 Publishing and uploading the site ........................................................... 6
9 Maintaining the site ................................................................................... 6 Working with pages
Creating a new site document. .......................................................................... 6 Working with pages . ............................................................................................ 21
Default HTML FW 5 Pro only .......................................................................... 7 Adding pages ..................................................................................................... 21
Default page size, width, and height .............................................................. 7 Page title and file name . ................................................................................. 22
Site Folder.............................................................................................................. 7 Viewing and changing pages . .......................................................................... 22
Resources............................................................................................................... 8 Changing pages using the Site panel ............................................................ 22
Specifying the resource folder . ......................................................................... 8 Changing pages by following internal hyperlinks . .................................... 22
File names............................................................................................................. 9 Changing pages using the Link Map FW 5 Pro only . ............................... 22
Deciding on a page size ...................................................................................... 9 Selecting pages, folders, and items in the Site panel .................................. 23
Changing document setup............................................................................... 10 Deleting pages ................................................................................................... 23
Choosing an HTML level FW 5 Pro only ........................................................ 11 Rearranging pages using the Site panel ....................................................... 24
Choosing between Strict and Transitional FW 5 Pro only ....................... 11 Copying pages ................................................................................................... 24
Layout options........................................................................................................ 11 Duplicating pages.............................................................................................. 24
Table layout (CSS Layout button off)............................................................... 11 Working with master pages .............................................................................. 25
CSS layout (CSS Layout button on) FW 5 Pro only .................................... 11 Adding a new master page using menu commands .................................. 25
Contents
Selecting an item .............................................................................................. 46 Item titles . ......................................................................................................... 55
Parent and child highlight of the selected item . ......................................... 47 Preventing an item from publishing ............................................................. 55
Selecting multiple items . ................................................................................ 47 Using the contents of a master item ............................................................. 55
Deselecting an item . ........................................................................................ 47 Using the attributes of a master box . ........................................................... 56
Deleting an item ............................................................................................... 47 Creating layer items FW 5 Pro only .............................................................. 56
Deleting the content of a box . ........................................................................ 47 Setting any item to output as a layer item FW 5 Pro only ................... 57
Displaying and hiding box outlines . ............................................................. 47 Item General panel ........................................................................................... 58
Resizing items ................................................................................................... 48 Combined Graphic Output panel ................................................................... 59
To resize an item using the Selection tool . ................................................... 48 Referring to layer items in DHTML or Actions ............................................. 59
To resize an item using the Inspector palette................................................ 48 Arranging items...................................................................................................... 60
To resize an item using keyboard commands .............................................. 48 Cutting, copying, and pasting ........................................................................ 60
To resize an item using the Transform dialog FW 5 Pro only ................. 48 Option-dragging to duplicate items .............................................................. 60
Moving items . ........................................................................................................ 49 Duplicating an item using the Duplicate dialog ......................................... 60
Using the Selection tool ................................................................................... 49 Aligning items . ................................................................................................. 60
Using the Inspector palette ............................................................................. 49 Changing the stacking order of items using the Item menu . ................... 61
Using the keyboard arrow keys . .................................................................... 49 Changing the stacking order of items using the Site panel........................ 61
Moving an item to another page using the Site panel ............................... 49 Group command..................................................................................................... 61
Locking and unlocking an item ..................................................................... 50 Preventing items from breaking apart........................................................... 61
Changing box shape ......................................................................................... 50 Grouping items.................................................................................................. 62
Showing items in the Site panel. .................................................................... 50 How grouping works......................................................................................... 62
Reshaping paths ................................................................................................... 51 Distributing items . ............................................................................................... 63
Moving points ................................................................................................... 51 Using Distribute ................................................................................................ 63
Adding points .................................................................................................... 51 Spacing selected items evenly ........................................................................ 64
Deleting points .................................................................................................. 51 Spacing items evenly across the page . ......................................................... 64
Altering curves . ................................................................................................ 51 Spacing items a fixed distance apart............................................................. 64
To make a round-cornered graphic box . ....................................................... 52 Integrating items and text ................................................................................ 65
Transforming items .............................................................................................. 53 Setting an inner inset ...................................................................................... 65
Rotating an item using the Rotate tool . ....................................................... 53 Wrapping text in a graphic box ..................................................................... 65
Skewing an item using the Skew tool FW 5 Pro only .............................. 53 Wrapping text in an HTML box ...................................................................... 65
Skewing an item using the Transform dialog box FW 5 Pro only . ........ 53 Creating horizontal rules ................................................................................... 66
Reflecting an item using the Mirror tool FW 5 Pro only ......................... 53 To create a rule with the Path tool.................................................................. 66
Reflecting an item using the Transform dialog box FW 5 Pro only ...... 54 To create a text rule ......................................................................................... 66
Scaling an item using the Selection tool . ..................................................... 54 Linking and unlinking text boxes to form a chain..................................... 67
Scaling an item using the Transform dialog box FW 5 Pro only . ......... 54 To link two or more text boxes ....................................................................... 67
Selecting text across linked text boxes .......................................................... 67 Outer Shadow and Inner Shadow effects....................................................... 85
Unlinking text boxes ........................................................................................ 68 Outer Glow and Inner Glow effects................................................................. 86
Adding a text box into an existing chain ..................................................... 68 Foreground effect (graphic items).................................................................... 86
Deleting a text box from the text flow . ........................................................ 68 Graphic effects in Freeway 5 Express........................................................... 87
Cutting/copying and pasting a linked box ................................................... 68 Applying graphic effects to HTML items........................................................ 87
Inserting a break to the next linked text box . ............................................. 68 Background effect (HTML items)...................................................................... 88
Inflow items ............................................................................................................ 69 Border effect (HTML items)................................................................................ 88
Creating inflow items ...................................................................................... 69 Shadow effect..................................................................................................... 88
Inserting items using the Insert menu . ........................................................ 69 Glow effect.......................................................................................................... 89
Selecting inflow items ..................................................................................... 70 Emboss effect...................................................................................................... 89
Resizing inflow items . ..................................................................................... 70 Scatter effect....................................................................................................... 90
Aligning text beside inflow items .................................................................. 70 Lighting............................................................................................................... 90
Controlling space around inflow items . ....................................................... 71 Shape effects....................................................................................................... 91
Padding and margins. .......................................................................................... 72 Wobble................................................................................................................. 91
Applying padding.............................................................................................. 72 Crack.................................................................................................................... 92
Padding and item dimensions FW 5 Pro only .......................................... 72
Padding and item positions FW 5 Pro only . ............................................. 73 Working with text
Applying margins.............................................................................................. 73
Adding text ............................................................................................................. 94
Applying a background color to an HTML item........................................... 75
Typing in new text ........................................................................................... 94
Applying a background color to a graphic item......................................... 76
Importing a text file using the Import Text command .............................. 94
Background color filters FW 5 Pro only ..................................................... 76
Importing text using drag and drop from the Finder . ............................... 94
Background images FW 5 Pro only ............................................................ 77
Importing text using drag and drop from another application ............... 95
Applying a background image to an HTML item. ....................................... 77
Pasting text via the clipboard ........................................................................ 95
Tiling a background image.............................................................................. 77
When text doesn’t fit in a box ......................................................................... 95
Sliced background images................................................................................ 78
Editing text ............................................................................................................. 96
Item borders in Freeway 5 Pro......................................................................... 79
Highlighting text using the Selection tool .................................................... 96
Applying a border to an HTML item .............................................................. 79
Moving text ....................................................................................................... 96
Applying a border to a graphic item ............................................................. 80
Searching for and replacing text . .................................................................. 97
Item borders in Freeway 5 Express................................................................ 83
Finding a text string......................................................................................... 97
Applying a border to an HTML item............................................................... 83
Finding a selection ........................................................................................... 97
Applying a border to a graphic item.............................................................. 83
Replacing a text string or selection ............................................................... 98
Graphic effects in Freeway 5 Pro.................................................................... 84
Working with lists.................................................................................................. 98
Applying graphic effects to HTML items........................................................ 84
Creating lists....................................................................................................... 98
Background effect (HTML items)...................................................................... 84
Nested lists.......................................................................................................... 99
Contents
Selecting lists for editing.................................................................................. 99 Text direction . ................................................................................................. 110
Graphic lists........................................................................................................ 99 Vertical text ..................................................................................................... 110
Checking spelling ............................................................................................... 100
To check spelling.............................................................................................. 100 Working with graphics
Checking spelling in other languages........................................................... 100
Editable graphics ............................................................................................ 111
Checking text using more than one language ........................................... 100
Importing graphics ............................................................................................. 112
Exporting text . ..................................................................................................... 102
To import a graphic using the Import command ..................................... 112
Language encoding FW 5 Pro only ............................................................... 102
To import a graphic using Import From iPhoto ......................................... 112
Issues that affect HTML text. ......................................................................... 103
To import a graphic using drag and drop .................................................. 112
Line breaks . ..................................................................................................... 103
Replacing text with a graphic ...................................................................... 113
Soft returns ...................................................................................................... 103
Pasting a graphic from the clipboard . ........................................................ 113
Spaces/Non-breaking spaces ......................................................................... 104
Deleting a graphic .......................................................................................... 113
Tabs ................................................................................................................... 104
Positioning a graphic within its box manually . ....................................... 113
Quotation marks ............................................................................................ 104
Positioning a graphic within its box using the Graphic dialog box ....... 113
Graphic text . ........................................................................................................ 104
Centering a graphic within its box automatically ................................... 114
Graphic text character attributes ................................................................ 105
Copying graphics to the clipboard ............................................................... 114
Typography settings FW 5 Pro only .......................................................... 105
Exporting graphics from Freeway ............................................................... 114
Font ................................................................................................................... 105
Resizing graphics . .............................................................................................. 115
Missing fonts ................................................................................................... 106
Resizing a graphic to fit its box exactly . .................................................... 115
Size . .................................................................................................................. 106
Resizing a graphic to its box, retaining proportions . ............................... 115
Style .................................................................................................................. 107
Fitting a box to its contents .......................................................................... 115
Color . ................................................................................................................ 107
Controlling graphic sizing behavior ............................................................ 116
Opacity.............................................................................................................. 107
Scaling a graphic item with the mouse and modifier keys . ................... 117
Shift .................................................................................................................. 107
Scaling a graphic using the Transform dialog box FW 5 Pro only . ..... 117
Width . .............................................................................................................. 107
Scaling a graphic up and down ................................................................... 117
Weight .............................................................................................................. 107
Restoring a graphic to its original size ....................................................... 117
Slant . ................................................................................................................ 107
Showing high resolution graphics at pixel size.......................................... 117
Spacing . ........................................................................................................... 107
Using the contextual menu for graphic commands.................................. 118
Language FW 5 Pro only ............................................................................. 107
Managing imported graphics . ........................................................................ 118
Graphic text paragraph attributes . .............................................................. 108
Using the Graphic dialog box ....................................................................... 118
Leading . ........................................................................................................... 108
To define whether a graphic is published . ................................................. 119
Alignment ........................................................................................................ 108
The Resources dialog box ............................................................................... 120
Indents . ............................................................................................................ 109
Detaching missing graphics. ........................................................................... 121
Space before and after paragraphs . ............................................................ 109
Contents
Setting the site folder . ................................................................................... 167
Meta tags............................................................................................................... 155 Publishing a fresh version of your site . ...................................................... 167
Applying meta tags . ...................................................................................... 155 Force republish ................................................................................................ 168
Should you tag all your pages? . .................................................................. 155 Choosing between efficient and readable HTML ........................................ 168
How to add meta tags in Freeway . ............................................................. 155 Line feeds ......................................................................................................... 168
Defining a new meta tag .............................................................................. 156 Specifying whether layout tables are reinforced ....................................... 169
Defining keywords that describe your site ................................................. 156 Reuse of images .............................................................................................. 169
Defining the description of a page . ............................................................. 156 Uploading . ............................................................................................................. 169
Loading another page automatically .......................................................... 157 Upload method . .............................................................................................. 170
Finding out more about meta tags .............................................................. 157 Setting the upload options ............................................................................ 170
Search Engines.................................................................................................... 158 To set the upload options .............................................................................. 170
Getting noticed on the web . ......................................................................... 158 To set the upload options the first time ...................................................... 170
Tagging the page ............................................................................................ 158 Upload options for FTP ..................................................................................... 171
Improving your rank ..................................................................................... 158 Upload options for .Mac. .................................................................................. 173
HTML style attributes...................................................................................... 158 Upload options for File Copy .......................................................................... 173
Page content..................................................................................................... 159 Publishing your site using personal web sharing.................................... 174
Noframes content ........................................................................................... 159 To turn on personal web sharing.................................................................. 174
Important points ............................................................................................ 159 To upload files using File Copy....................................................................... 174
Where to submit ............................................................................................. 159 Uploading your site . .......................................................................................... 175
Shared databases ............................................................................................ 160 To upload your site . ....................................................................................... 175
How files are uploaded .................................................................................. 175
Publishing and uploading To cancel an upload . ...................................................................................... 176
Previewing, publishing, and uploading. ....................................................... 161 If an error occurs while uploading .............................................................. 176
Preview options in Freeway ............................................................................ 161 Error messages for Upload.............................................................................. 177
Previewing text . ............................................................................................. 161 FTP details for popular ISPs .......................................................................... 178
Anti-aliasing .................................................................................................... 162 AOL . .................................................................................................................. 178
Previewing graphics . ..................................................................................... 162 Yahoo/Geocities ............................................................................................... 178
HTML layout . ........................................................................................................ 164 EarthLink ......................................................................................................... 178
Previewing in a browser . ................................................................................. 165 Angelfire ........................................................................................................... 178
Maintaining the browser list ........................................................................ 165 Managing your site ............................................................................................ 179
Viewing your document’s HTML .................................................................. 166 Splitting your Freeway document ............................................................... 179
Refreshing the browser .................................................................................. 166 How to split your Freeway document ......................................................... 179
Creating relative links . .................................................................................. 180
Contents
Defining styles FW 5 Pro only ........................................................................ 208 Leading.............................................................................................................. 216
Styling text....................................................................................................... 208 First Indent....................................................................................................... 216
Temporary styles............................................................................................. 208 Left Indent......................................................................................................... 216
Permanent styles............................................................................................. 208 Right Indent...................................................................................................... 216
Style definition................................................................................................. 208 HTML Indent (HTML 3.2 only) FW 5 Pro only ........................................... 216
Edit Styles dialog FW 5 Pro only ................................................................... 209 Space Before...................................................................................................... 217
Tags and names............................................................................................... 209 Space After........................................................................................................ 217
Adding attributes............................................................................................. 209 Word Space........................................................................................................ 217
Character Attributes FW 5 Pro only ............................................................. 210 Letter Space....................................................................................................... 217
Font.................................................................................................................... 210 Thinking ahead with styles FW 5 Pro only ................................................. 217
Size..................................................................................................................... 210 Foundation Styles............................................................................................ 217
Style................................................................................................................... 210 Text modification styles.................................................................................. 217
Color................................................................................................................... 210 Headers.............................................................................................................. 217
Background Color............................................................................................. 210 Apply sensibly.................................................................................................. 217
Image................................................................................................................. 210 Making global changes FW 5 Pro only ........................................................ 218
Isolating Effects................................................................................................... 210 Define BodyText................................................................................................ 218
Graphic text effects in Freeway 5 Pro......................................................... 211 Define ancillary styles..................................................................................... 218
Normal............................................................................................................... 211 Apply your Styles............................................................................................. 218
Background....................................................................................................... 211 Working with styles FW 5 Pro only ............................................................... 218
Shadow.............................................................................................................. 211 Basic concepts about styles . ......................................................................... 218
Glow................................................................................................................... 212 Methods of creating, applying, and changing styles ................................ 218
Overlay.............................................................................................................. 212 The Styles & Colors palette FW 5 Pro only ............................................... 219
Effect filters .................................................................................................... 213 HTML and graphic text styles FW 5 Pro only .......................................... 219
Graphic text effects in Freeway 5 Express................................................ 213 [No Style] and other default styles FW 5 Pro only .................................. 219
Outline effect.................................................................................................... 213 Character and paragraph styles FW 5 Pro only ...................................... 220
Shadow effect................................................................................................... 213 Applying a style FW 5 Pro only . ................................................................ 221
Emboss effect.................................................................................................... 214 Renaming a style FW 5 Pro only . .............................................................. 221
Scatter effect..................................................................................................... 214 Removing styles from a run of text FW 5 Pro only ................................ 221
Lighting............................................................................................................. 214 Importing styles FW 5 Pro only ................................................................. 222
Graphic shape effects....................................................................................... 214 Making a temporary style permanent FW 5 Pro only ........................... 223
Crack.................................................................................................................. 215 Hiding and showing temporary styles FW 5 Pro only ........................... 223
Paragraph attributes.......................................................................................... 215 Working with the predefined styles FW 5 Pro only ................................ 223
Force Graphic Paragraph................................................................................ 215 Creating a style FW 5 Pro only ...................................................................... 224
Align................................................................................................................... 215 Using the style.................................................................................................. 226
Applying a custom style to a page................................................................ 226 Allowing the browser to determine the dimensions of an item ............. 244
Using tags for accessibility FW 5 Pro only ................................................ 227 Margins and centering . ................................................................................. 245
Creating a header style................................................................................... 227 Overlapping Items FW 5 Pro only .................................................................. 246
Adding tags....................................................................................................... 227 Layer items and the Rollover Action............................................................. 246
Overriding the page style............................................................................... 228 Float and Clear FW 5 Pro only ....................................................................... 247
Learning more.................................................................................................. 228 Conclusion. ............................................................................................................ 249
Styles Inspector FW 5 Pro only ..................................................................... 229
Anatomy of the Styles Inspector.................................................................... 229 Working with tables
Page level styles............................................................................................... 230
Creating tables . .................................................................................................. 251
Item level styles................................................................................................ 230
Creating a table using the Table tool . ......................................................... 252
Table styles........................................................................................................ 231
Creating a table using the Insert menu ...................................................... 252
Text level styles................................................................................................ 231
Modifying tables ................................................................................................. 253
Editing styles.................................................................................................... 232
Positioning tables . ............................................................................................. 254
To position a table using the mouse ............................................................ 254
Creating flexible layouts To position a table numerically using page coordinates . ........................ 254
Flexible table layout........................................................................................... 233 Resizing tables .................................................................................................... 255
Flexible item behavior ................................................................................... 233 To resize a table using the mouse ................................................................ 255
Defining flexible width for an item ............................................................. 233 To resize a table using numeric values ....................................................... 255
Controlling the variable width of items ..................................................... 234 Selecting table cells, rows, and columns . ................................................ 255
Controlling the appearance of a flexible-width item ................................ 234 To select a cell . ................................................................................................ 256
Defining flexible height for an item ............................................................ 235 To select two or more cells ............................................................................ 256
To select an entire row or column ............................................................... 256
Creating CSS layouts FW 5 Pro only To select the table ........................................................................................... 257
Adding and removing rows and columns .................................................. 257
Introduction...................................................................................................... 237
To change the overall number of rows and columns in the table .......... 257
CSS positioning FW 5 Pro only ...................................................................... 238
Deleting one or more rows or columns ....................................................... 258
Positioning a fixed-size item from the edge of a page............................... 238
Adding rows and columns ............................................................................ 258
Positioning a fixed-size item relative to the browser page ...................... 239
Deleting cell content ........................................................................................ 259
Setting an item’s size to be relative to the size of the browser page ..... 240
Empty cells ........................................................................................................... 259
Using relative positions and sizes for child items ..................................... 241
To set a cell to be empty ................................................................................ 259
CSS inflow items ................................................................................................ 242
Resizing rows and columns ............................................................................ 260
Creating inflow items within other items................................................... 242
To change the widths of rows or columns using the mouse ................... 260
Creating inflow items directly on the page................................................. 242
Contents
To change the table border ............................................................................ 260 Changing normal pages into frameset pages ............................................ 274
To remove the table border . .......................................................................... 260 Noframes content .............................................................................................. 274
Changing cell spacing . ..................................................................................... 261 Options for working with frames . ................................................................. 275
To change the cell spacing ............................................................................ 261 Specifying an existing page to be the frame source ................................. 275
To remove the cell spacing ............................................................................ 261 Creating a new page to be the source of the frame .................................. 276
Changing cell padding ...................................................................................... 261 Specifying an external HTML page as the frame source .......................... 276
To change the cell padding ........................................................................... 261 Creating a new frameset within a frame.................................................... 277
To remove the cell padding ........................................................................... 261 Adding more frames at the same level ....................................................... 277
Changing cell alignment .................................................................................. 262 Using the mouse to add frames ................................................................... 277
Applying color ...................................................................................................... 262 Changing the orientation of the frames in a frameset ............................ 277
To apply color .................................................................................................. 262 Removing a frame .......................................................................................... 277
Joining and splitting cells . .............................................................................. 263 Selecting frames ............................................................................................. 277
To join two or more cells ............................................................................... 263 Deselecting frames ......................................................................................... 278
To split a cell . .................................................................................................. 263 Using the Frames palette . ............................................................................. 278
Formatting text across table cells ............................................................... 264 Sizing frames .................................................................................................. 278
To apply a style to a table FW 5 Pro only .................................................. 264 Interactive resizing of frames . ..................................................................... 279
Copy/pasting table data ................................................................................... 264 Sizing frames using the mouse .................................................................... 279
Importing content into tables ........................................................................ 265 To size a frame using a numeric value ....................................................... 279
Adding text ...................................................................................................... 265 Setting frame size to be completely flexible . ............................................. 280
Adding text into a table cell . ........................................................................ 265 Making frames that can’t be resized when viewed . ................................. 280
To import delimited text into a table .......................................................... 265 Controlling whether frames scroll ............................................................... 280
To import graphic content into a table cell ................................................ 265 To set the scrolling behavior of a frame . .................................................... 280
To import pass-through content into a table cell ...................................... 266 Setting the border for the frameset ............................................................. 281
To import other content into a table cell .................................................... 266 Specifying a name for a frame . ................................................................... 281
Nesting inflow items. ......................................................................................... 266 Targeting links ..................................................................................................... 282
Setting a particular frame as the target of a link . ................................... 282
Working with Frames Setting a default target for all the links on a page ................................... 283
To set a base target for a page . .................................................................... 283
What are frames and frameset pages? ....................................................... 267
Using the predefined link targets . ............................................................... 283
Linking within frames . ................................................................................. 268
To apply a predefined link target ................................................................. 283
Benefits of using frames ................................................................................ 269
Extending the FRAME and FRAMESET tags .............................................. 284
Disadvantages of using frames .................................................................... 270
How to create frameset pages . .................................................................... 272
Creating a predefined frameset page .......................................................... 272
Servers and browsers...................................................................................... 285 Customizing the HTML output . ...................................................................... 305
Parts of a form ................................................................................................ 285 Adding code to Freeway’s output . ............................................................... 305
Setting up a form ........................................................................................... 286 Using a dialog box to add code to a page . .............................................. 306
Using “mailto:” ............................................................................................... 286 Extending the code generated for specific items . ................................ 306
Example form . ................................................................................................ 287 Referencing external URL content when the page is viewed . ........... 307
Form tools ............................................................................................................. 288 Using a URL box to reference external content .......................................... 307
Creating form items ....................................................................................... 288 Inserting code at a specific point on the page ....................................... 309
Checkboxes . ......................................................................................................... 289 To add an independent markup item . ........................................................ 309
Radio buttons ...................................................................................................... 290 To add an inflow markup item .................................................................... 309
Buttons.................................................................................................................... 291 Import external HTML into a document . .................................................... 310
Text fields .............................................................................................................. 292 To import HTML content . .............................................................................. 310
Popup menus and selection lists.................................................................. 293
Text areas............................................................................................................... 294 Freeway Actions
Form setup . .......................................................................................................... 295
What are Freeway Actions? . .......................................................................... 312
Form Setup dialog options ............................................................................ 295
Installing extra Actions. .................................................................................... 312
Setting up your form scripts ........................................................................ 296
Managing Actions . ............................................................................................. 313
Hidden fields..................................................................................................... 297
Action Files ...................................................................................................... 313
Form validation .............................................................................................. 298
The Edit Actions dialog .................................................................................. 313
Form security .................................................................................................. 298
Duplicate Actions . .......................................................................................... 313
Where to find out about forms . ................................................................... 298
Modifying Actions . ............................................................................................. 314
Troubleshooting forms ..................................................................................... 299
Writing Actions FW 5 Pro only ........................................................................ 314
Third Party Actions.............................................................................................. 314
Accessibility Actions in the Freeway interface. ................................................................. 314
Text Size . ............................................................................................................... 302 Anatomy of the Actions palette..................................................................... 314
Style sheet FW 5 Pro only ............................................................................... 302 Types of Actions . ................................................................................................ 315
Refresh ................................................................................................................... 302 How to use the Actions supplied with Freeway ...................................... 316
Images . .................................................................................................................. 302 Rollover .................................................................................................................. 317
B/W FW 5 Pro only .............................................................................................. 302 What is a rollover? . ....................................................................................... 317
JavaScript .............................................................................................................. 303 Key Terms . ....................................................................................................... 317
Alt text .................................................................................................................... 303 Using the Rollover Action .............................................................................. 318
Access keys .......................................................................................................... 303 Using an external graphic file as the mouseover image . ........................ 318
Language ............................................................................................................... 304 Using an item on the page as a mouseover image ................................... 319
Tables . .................................................................................................................... 304 Applications for using an item as the mouseover image.......................... 321
Contents
Making an image appear embedded ........................................................... 321 1 Link to PDF . .............................................................................................. 342
Settings for the Rollover Action .................................................................... 322 2 Graphic Link to PDF . ............................................................................... 343
The Rollover Parameters view ...................................................................... 322 3 Link to File ................................................................................................ 343
The Rollover Images view ............................................................................. 324 Miscellaneous . .................................................................................................... 344
Targets . .................................................................................................................. 325 1 Move Layer FW 5 Pro only ................................................................... 344
Some key terms . ............................................................................................. 325 2 Navigation Popup .................................................................................... 344
Using targets in Freeway Actions . ............................................................... 325 3 Country List .............................................................................................. 345
Using an external graphic file for the triggered state............................... 325 4 Current Date ............................................................................................. 346
Using items on the page as image(s) for the triggered state ................... 326 5 Popup Window ......................................................................................... 346
Applying the Target Image Item Action ...................................................... 327 6 Self Closing Popup Window . .................................................................. 348
Settings for the Target Image Action ........................................................... 327 7 No Cache . .................................................................................................. 348
The Parameters view ..................................................................................... 328 8 Text Link Style .......................................................................................... 348
The Images view . ........................................................................................... 329 9 Fieldset . ..................................................................................................... 348
Other Trigger and Target Actions . ................................................................ 330 10 Form Item Label ..................................................................................... 349
1 Random Rollover ...................................................................................... 330 Scriptaculous Actions FW 5 Pro only . ......................................................... 349
2 Text Rollover ............................................................................................. 330 1 Transition FX and Attention FX ............................................................. 349
3 Target Show/Hide Image . ....................................................................... 331 2 Sound FX ................................................................................................... 350
4 Target Show/Hide Layer FW 5 Pro only ............................................. 332 Buttons Action...................................................................................................... 350
5 Sequence Timer ........................................................................................ 333 Glass buttons . ................................................................................................. 351
6 Random Sequence . .................................................................................. 334 Round Rect buttons ........................................................................................ 352
7 Target Group Timer ................................................................................. 334
8 Target Load Frame ................................................................................... 335 Navigation Actions
9 Text Link to New Window ...................................................................... 336
CSS Menus ........................................................................................................... 353
10 Link to New Window/Pic in New Window ........................................ 337
Creating a menu ............................................................................................. 353
Redirects ............................................................................................................... 338
Editing the Appearance of the Menu ........................................................... 354
1 Timed Redirect . ........................................................................................ 338
Main menu settings......................................................................................... 354
2 Not in Frameset Redirect . ....................................................................... 338
Submenu settings............................................................................................ 354
Multimedia ............................................................................................................ 339
Menu Bar ............................................................................................................... 355
1 QuickTime Extras .................................................................................... 339
What does the Menu Bar Action do? ........................................................... 355
2 Flash Extras .............................................................................................. 340
Key terms ......................................................................................................... 355
3 Director . .................................................................................................... 341
Creating a Menu Bar ...................................................................................... 356
4 Background Sound . ................................................................................. 342
Creating popup menus .................................................................................. 357
Creating hierarchical menus ........................................................................ 358
Contents
Creating a shop page....................................................................................... 408 Map Area Boxes................................................................................................ 427
Setting up a Mal’s e-commerce account. .................................................. 412 Revert to Default Colors.................................................................................. 427
Shipping Calculations..................................................................................... 412 Grids & Guides panel......................................................................................... 428
Sales Tax............................................................................................................ 413 Grid color FW 5 Pro only ............................................................................. 428
Changing the shopping cart’s appearance. ............................................... 414 Grid magnetic range FW 5 Pro only . ........................................................ 428
Viewing Orders................................................................................................. 415 Horizontal/Vertical guide color...................................................................... 428
Reference............................................................................................................... 416 Margin guide color FW 5 Pro only ............................................................. 428
E-Shop Settings................................................................................................. 416 Guide magnetic range FW 5 Pro only ....................................................... 428
Mal’s Connection Settings............................................................................... 416 Document Setup, Freeway 5 Pro................................................................... 429
Mal’s Shopping Cart Settings......................................................................... 416 Default page size.............................................................................................. 429
E-Buy Button..................................................................................................... 418 Site folder.......................................................................................................... 429
E-Buy Text.......................................................................................................... 419 Pasteboard width............................................................................................. 429
E-Buy Form........................................................................................................ 419 Document graphics FW 5 Pro only . .......................................................... 429
Adding Quantities and Variations................................................................. 420 Document Setup, Freeway 5 Express.......................................................... 430
Using a custom button for an E-Buy Form.................................................. 420 Default page size.............................................................................................. 430
E-Review Button............................................................................................... 420 Site folder.......................................................................................................... 430
E-Review Text.................................................................................................... 421 Pasteboard width............................................................................................. 430
Output, Freeway 5 Pro....................................................................................... 430
Appendix Default HTML FW 5 Pro only ...................................................................... 430
HTML code......................................................................................................... 431
Working with preferences . .............................................................................. 424
Line Feeds FW 5 Pro only ............................................................................ 431
General panel. ...................................................................................................... 424
Resources........................................................................................................... 431
Arrows nudge FW 5 Pro only ..................................................................... 425
File names......................................................................................................... 431
Make backups . ................................................................................................ 425
Reinforce layout tables FW 5 Pro only ...................................................... 431
Old selection behavior FW 5 Pro only ....................................................... 425
External Stylesheets FW 5 Pro only . ......................................................... 431
Palettes snap FW 5 Pro only ....................................................................... 425
Uppercase tags................................................................................................. 431
Adjust box dimensions when adding padding FW 5 Pro only .............. 425
IE 6 Compatible................................................................................................ 431
Enable AppleScript in Actions . ..................................................................... 425
Max. filename length FW 5 Pro only . ....................................................... 431
Show Help Tags ............................................................................................... 425
Image type creator FW 5 Pro only ............................................................. 431
Text panel............................................................................................................... 426
Output, Freeway 5 Express.............................................................................. 432
Invisibles color ................................................................................................ 426
HTML code......................................................................................................... 432
Readability when editing .............................................................................. 426
Resources........................................................................................................... 432
Appearance panel. .............................................................................................. 427
File names......................................................................................................... 432
Graphic Boxes................................................................................................... 427
Uppercase tags................................................................................................. 432
Table-Positioned Boxes..................................................................................... 427
Getting Started
Quick Finder
Creating documents.................................................................................................... 6
Saving and opening documents.............................................................................. 15
Managing pages in your site document................................................................ 21
Creating items for text or graphics........................................................................ 41
Importing text............................................................................................................ 94
Importing graphics................................................................................................. 112
Publishing and previewing.................................................................................... 161
Uploading your Web site........................................................................................ 169
Starting a web site pages as you like, each of which corresponds to an HTML web page that will be
Getting started
created when you export or “publish” the site. Each HTML page is a file that a web
It’s probably a good idea to have some basic information before you start, browser displays. On your pages, you can create items that may contain text,
such as the width of screen you want to work within and an idea of what graphics, or multimedia content, or that are exported as colored graphics or lines.
the main sections of the site will be. The most important thing to appreciate You can also build master pages, which are used to define the basic
before you start a site in Freeway is how the process works, especially if you appearance of the pages in your document. Any items—such as logos or
have tried other web publishing software before. navigation buttons—that should appear on all the pages in a particular
Freeway is not an HTML editor but a layout program that automatically section can be created on a master page, which can then be applied to one or
generates HTML files to display your web page designs in a browser. Using more of your site pages. Within a document you may also define folders and
Freeway is like using Desktop Publishing (DTP) software. In DTP, one creates subfolders to organize the physical structure of your site.
a document that can only be read by the original application and is then Navigation is one of the most important issues when planning a new site, and
(usually) printed as PostScript. In Freeway you define documents, which again it is important to decide on a consistent scheme early on. Careful structuring
can only be read by Freeway and are then exported as HTML pages and web- of your content so that it makes sense to the visitor is also crucial. Make your
ready graphics for viewing in any web browser. site easy to get around, let your visitors know where a link will take them, and
Freeway’s approach to web authoring separates web design from HTML code, ensure that visitors can tell where they are in your site at all times.
and allows you to design for the medium of the web instead of concentrating
on the low-level task of writing markup to express your designs. Freeway Publishing and previewing your site
produces clean and efficient HTML and offers significant advantages over Once you have created your document with its pages, page contents, and
HTML editing programs. These include: links, the next step is to “publish” the pages from the document as HTML files.
◆ Advanced layout options: text and graphics can be juxtaposed easily and
You will then transfer the resulting files to a web server, which allows other
it is possible to overlay text on graphics or graphics on other graphics. people to access them.
◆ Advanced typography: Freeway contains professional typography tools Publishing is the process whereby Freeway generates the HTML pages with
that you would normally expect to find in a DTP program. Typographic their associated resources (i.e. graphics and multimedia elements). This is done
designs can be preserved by converting text into graphics, which remain using either the Preview command or the Publish command. Both commands
fully editable. publish the site into the local site folder, but the Preview command also
◆ Advanced graphic support: graphics can be converted from standard
launches a browser and displays the current page. When you publish the site
formats (such as TIFF, Photoshop PSD, and Illustrator AI) into web using either of these commands, you need to specify a site folder to hold the
formats (such as GIF, JPEG, and PNG), and then optimized in order to published web files.
generate small web files that will make your site display quickly. As you work, you need to preview your site regularly. When you do this, any
◆ Easy redesign: pages can be redesigned quickly and easily. new pages or any elements that have been changed are republished. If you
delete a page from the document, the HTML file and associated graphics will
Creating a new site be removed as well.
To begin a web site you first create a Freeway document, which stores all the
After you have published your site locally, you can use the Upload command to
information about your web site. Within the document you may define as many
transfer it to a web server where other people can view it.
| Getting Started
Workflow If you’re producing work for clients, you may be working closely with them on
Getting started
the design brief. The site may need to fit in with an existing identity, so that
There is a sequence of steps to designing a web site with Freeway: typefaces, colors, and even design elements may be prescribed for you—or you
1 Planning the site may be expected to come up with an identity yourself. Either way, you’ll want
2 Designing the layout to get client approval for the design before you go too far in creating the site.
3 Creating and assembling content Freeway is great for pulling a few ideas together quickly and producing two or
4 Creating a new Freeway document three mock sites for clients to look at in a very short space of time.
5 Defining grids, master pages, and navigation Don’t worry too much if the client wants some small, last minute changes as
6 Adding and laying out pages long as these only affect elements created within Freeway. It’s mainly design
7 Previewing the site and making corrections elements that need to be painstakingly created in other packages that cause
8 Publishing and uploading the site trouble if the client wants to change them later. Be especially sure to clear
9 Maintaining the site typeface and color choices with the client if you’re going to be doing any
animation, 3D work, or image manipulation to form part of the site content.
1 Planning the site
The end product of the design stage should be confirmation of the basic layout
It’s usually beneficial to spend some time planning the site before you start,
that’s going to be used, as well as an understanding between you and the client
even if it’s just a few minutes to gather your thoughts—this will help to
over typeface, color, and how much (and what) technology is going to be used.
avoid false starts.
If you are designing for clients, then it’s essential that you understand their 3 Creating and assembling content
requirements and expectations before you start and then plan how to fulfil these. With the design stage complete, you’re ready to begin creating and assembling
For example, you may find that they want to include advanced features such as the content for the site. This includes the basic textual copy for the pages and any
multimedia, animation, database integration, or online shopping at a later stage, graphic or multimedia elements that can’t be easily created within Freeway—for
and your design may need to take these factors into account. example, animated GIFs, or Flash, video, or sound content, PDFs for download,
You may also want to clarify up front with the client how far your photographic images, and so on.
responsibility extends—are you just going to hand over a disk containing the It’s often a good idea to assemble all the resources in one place before you import
HTML and graphics which make up the site or are you expected to upload it to them into Freeway, purely for administrative reasons. When the project is
their web space? Do they expect you to provide web space for them? Are you complete, archive these original resources along with the Freeway document and
expected to arrange their domain name? What about revisions and routine the finished HTML site folder. When creating art for the web, it’s best to work at 72
maintenance in the future? ppi (pixels per inch) for bitmap images. As a result, you’ll find you’re spending less
time watching the clock in Photoshop and more time creating.
2 Designing the layout
You don’t need to save your artwork as GIF or JPEG before you use it in
Just as with designing for print, you’ll probably want to take a few moments
Freeway—actually, you often have more control and get better results if you
to rough out some ideas on paper before you sit down at the computer. Even
don’t. Also, repeated JPEG compression of an image will introduce cumulative
experienced designers usually find that sitting at a computer staring at a
artifacts, which damage the image every time you save.
blank page is the last place to find inspiration!
Getting Started |
Freeway 5 Pro allows you to import a large variety of file types, so if you are
Getting started
working with bitmap images (such as those generated by Photoshop), you can
A typical web site folder. import them as Photoshop files in addition to TIFF (the preferred format) or any
This one is created of the other supported formats. TIFF and PSD files with transparency are also
automatically by supported by Freeway 5 Pro.
Freeway when choosing
a template as a basis for Note: Freeway 5 Express does not support TIFF or Photoshop import
your site. If you create formats. If you require transparency, you can save graphics in PNG format
a new site using the (PNG is a lossless format which can be used for graphics with millions of
custom settings, you colors). Another possible alternative is PICT.
may want to create a
similar folder structure 4 Creating a new Freeway document
by hand. Once you’ve come up with a basic layout, the essential design decisions have
been made and you have assembled at least some of the content, you can then
go ahead and create a new Freeway document.
Your Freeway document is essentially a self-contained unit, fonts and external
resources aside. It can contain as many pages as you need and allows you to define
There’s no need to create bitmap graphics of text or simple shapes in an image a hierarchical folder structure for your site. This document file is not uploaded to the
editing program because Freeway allows you to create these with much more web but remains on your system. Only Freeway can open the document.
control and greater flexibility. As you’re planning the actual content, try to look
When you want to make changes to your site, open this document up in
for things that can be created in Freeway itself, and do so—when last minute
Freeway, edit it, and then publish it into the site folder again.
changes are called for, you’ll be glad you did.
To view the site in a web browser, you need to publish it as HTML into a
When you finally import the finished content into Freeway, Freeway links to
destination folder. This folder is known as the Site Folder, and it is the contents
the original files as well as storing a version internally. The original is used
of this folder that need to be uploaded to your web space when you publish
when the site is published, but if the linked files can’t be found, Freeway often
your site on the web. For more information about the Site Folder, see page 7.
has enough information stored to produce acceptable results.
If you’re creating art in a vector illustration program such as Illustrator or 5 Defining grids, master pages, and navigation
FreeHand, you can take advantage of Freeway 5 Pro’s support for Illustrator Once you have created your new document, the first job is generally to set up
files. Import Illustrator files directly into Freeway 5 Pro or save EPS documents a consistent layout grid using one or more master pages. These master pages
in Illustrator format. You can also use your vector program to save as EPS, form a basis for the real pages you create in your document—the guides and
and then use Photoshop to rasterize it for you. Save the finished raster version grid you define are repeated on every page that uses the master page, and any
as a TIFF or PSD for import into Freeway 5 Pro. Alternatively, the most up-to- page elements also appear on all the instance pages.
date versions of these professional drawing tools allow you to save a version
as a bitmap format.
| Getting Started
Master pages can be used to ensure consistent design, branding, and
Getting started
Important: Never rename or move your web files outside Freeway, as this
navigation throughout your site. When using links on graphics for will break the links between pages in your site or mean that images won’t
navigation, replicate the links using HTML text elsewhere on the page, so load when the page is viewed.
that visitors browsing with their images off or using older browsers can still
navigate your site.
7 Previewing the site and making corrections
You should also be scrupulous about defining “alt text” for graphic elements; You’ll find it helpful to preview your pages in a web browser from time to time
alt text describes an image on the web page if it is not displayed in the while you’re working. Although the screen feedback in Freeway is excellent, it
browser. Freeway can create alt text for imported images automatically. See will still be subtly different from the result in the browser. By previewing in the
Alt text for exported graphics on page 121 for more information. browser periodically, you can alert yourself to any problems that emerge.
Remember that the visitor is only going to see one page at a time and is Take care to preview the site using a variety of different browser versions,
going to have to reach every page in your site by navigating from a starting and—most important—using Microsoft Internet Explorer, Firefox, or Camino,
point—you need to keep asking yourself, does this make sense? Is it easy to as well as Apple’s Safari browser. Unfortunately, just because a page looks fine
tell which section I’m in or which page I’m on? Is it obvious where to go now? in one browser does not mean it will automatically look good in others.
Is it easy to get back to the home page?
You can also preview within Freeway, but although the internal preview uses
6 Adding and laying out pages the same engine that drives Safari, it is only really suitable for a quick check
Apart from the familiar tasks of adding text, graphics, and other content, on one page at a time. Most links in Preview won’t work, and you won’t be
there are other considerations to bear in mind at this stage. able to navigate around your site. On the other hand, Freeway’s Preview
provides options for checking accessibility: you can view the page with an
You should use the title of each page to help visitors keep track of where they
accessibility stylesheet, or in grayscale.
are: use the Title field in the Inspector palette to set these, and make them
helpful and informative. It’s most important to give the home page in the site When you create a page, you should preview it in a browser with font sizes
a sensible title, such as “Softpress Systems Home Page” so that when someone set to larger (and smaller) than the default. This is essential to check that
bookmarks it in their browser, it is easy to find again in their bookmarks menu. page elements haven’t broken up or moved apart under different viewing
conditions. Also, be aware that font sizes on Windows PCs are approximately
You should also remember to check that the file name for your home page
one third larger than they are on the Mac, and problems can occur when
is set to something like index.html or default.html (whichever is
pages that look fine on the Mac are viewed using Windows browsers.
supported by the web server you’re going to be using). This is so that someone
coming to your web site without specifying a particular page name will be If you don’t have a Windows PC available to check the pages yourself, ask a friend
taken to the home page. Freeway automatically uses index.html as the or colleague with a PC to check the site for you or join a web design mailing list on
name of the first page that is created in a document or folder. You can change the Internet and ask for a site review (Softpress’s own Freeway Talk list is a good
a page’s file name using the Page General panel in the Inspector palette place to start!). You may be surprised how helpful people are on such lists, but you
in Freeway. do need to make the pages available on the web for other people to view at their
convenience. You might like to consider Windows emulation software, or Apple’s
Bootcamp software if you have an Intel-based Mac.
Getting Started |
8 Publishing and uploading the site Creating a new site document
Getting started
Previewing your site on your own machine or network is one thing, but if
others are to see it, you have to get the files (HTML documents, graphics, sounds, To create a new document, choose New… from the File menu. The New
etc.) onto a web server. Whether you have a web server on your internal Document dialog is displayed to allow you to specify settings that will apply
network or you use File Transfer Protocol (FTP) to upload files to your web space, to your entire site.
Freeway can do this for you automatically using the Upload… command. See Either:
the section Publishing the site on page 166 for more information. Select the Templates tab to display sets of predefined templates to help you
In order to make the connection to your web space, you need to know create a site in a specific style.
the server or host details, the path to your folder (if any), and a login and
password. If in doubt about what these should be, you need to speak to either
your web server system administrator or the support helpline of your ISP,
who will be able to give you this information.
Or:
Select the Custom tab to specify the settings explicitly for a new blank
site. FW 5 Pro only
| Getting Started
Default page size, width, and height
Getting started
Freeway allows you to define a nominal page size for the pages in your
document. This size is used to define the page boundaries viewed within
Freeway. Items placed within the page boundaries are exported when the site
is published.
However, the dimensions of the page area viewed in the browser are defined
by the bounds of any page items displayed, not the nominal page size used in
the Freeway document. This means that you can safely work with page sizes
that are longer or wider than you need, without the risk of scroll bars being
shown in the browser window when there is no more content to scroll to.
The page sizes set here are used to define the sizes of the master page or
pages in your document, and therefore define the default size for any new
Freeway 5 Pro’s New Document dialog showing the Custom panel.
pages that are created. It is also possible to set the dimensions of individual
site pages using the Page General panel of the Inspector palette. If you
In the following pages, we will concentrate on the Custom settings, available set page sizes individually, changes to the default page size in the New
only in Freeway 5 Pro. Document dialog or the Document Setup dialog (see Changing document
setup on page 10) will not take affect on these pages.
Default HTML FW 5 Pro only
This popup menu in the New Document dialog box Custom panel allows you to The Default page size popup menu in the New Document dialog contains
select which version of HTML will be supported by Freeway’s output. It also affects some sample sizes, but you can enter your own values for width and height by
whether certain functionality is available. typing values into the Width and Height text fields.
◆ HTML 3.2 gives greatest compatibility with older web browsers but does Freeway offers several default page sizes, but a good starting point is a width
not support CSS. of 550 pixels to make sure that your page will be visible on a small monitor. If
you’re planning to make pages that hold more content than is visible at one
◆ HTML 4.01 Transitional and HTML 4.01 Strict are the recommended
time, it is often preferable to make people scroll vertically to see more content,
settings, and provide dynamic HTML and CSS support with all recent
rather than horizontally.
browsers.
For more information on sizes and screen resolutions, see Deciding on a page
◆ XHTML 1.0 Transitional and XHTML 1.0 Strict generate XHTML-
size on page 9.
compliant code, for use with applications that require it.
Site Folder
Important: Freeway 5 Express only publishes to HTML 4.01 Transitional.
Freeway publishes the HTML and images that make up your web site into
a folder specified using the Site Folder option. You should set a separate
site folder for each web site that you create. The Site Folder should ideally be
contained within the folder that holds your project files, such as the main
Freeway document, image and multimedia files, etc. The illustration on page
Getting Started |
4 shows a typical project folder. On no account should you save your Freeway Specifying the resource folder
Getting started
document in the Site Folder. It is usually best to let Freeway control the
contents of the Site Folder, since only the latest version of the published code is
placed there when you publish from your document.
If creating a large site, it may be best to split your site across several Freeway
documents to make it quicker and easier to work with. In this case, you
should ensure that each of the Freeway documents is set to publish into your
main Site Folder.
Any folders defined within your Freeway document will be created within
the Site Folder as subfolders. The site folder corresponds to the root directory
of your web site, and like the root directory, it should contain any top-level
items required, such as the index or default page. For more information, see
Document Setup: Site Folder on page 429.
The location for publishing page resources is set using the New Document
Note: If you selected a template as the basis for your site, Freeway will dialog when you open a new Freeway document or in the Document
already have created a Site Folder to contain the HTML files and resources Setup… dialog accessed from the File menu.
generated when you publish the site. If you are using Freeway 5 Express the
folder structure is always generated automatically.
Resources
When exporting pages from your document, Freeway creates an HTML document
representing each page, as well as any image files required. The image files
referenced from each HTML document are known as the “resources” for that page.
Freeway allows you to choose where you want the resources for each page to
be published. Freeway defaults to using a Common Resource Folder. This
can make it easier to manage the output files for your site.
When common or separate Resource folders are specified for a site, any
graphics, movies, mp3s, Java applets, or other files used in your site will be
published into a folder called Resources, leaving the actual HTML files for your
pages together.
| Getting Started
The Resources popup menu offers the following options: When Freeway generates the file names using the titles of items or pages
Getting started
Common Resource Folder All resources are saved in a single “Resources” within Freeway as a basis, any illegal characters will be removed.
folder in the root of the site folder. This is the The way file names are specified may be important when transferring your
default option for new documents. files to a web server. All Macintosh, Windows 95/98/NT/2000/XP/Vista and
Separate Resource Folders Resources are saved in separate “Resources” UNIX computers handle long file names. If you find that you need to transfer
folders in each subdirectory of the site folder, as your site files via DOS on a PC, or are experiencing problems which you
well as in the root of the site folder. suspect are a result of long filenames being truncated, you can use this option
to tell Freeway to use DOS 8.3 file names instead. Alternatively, if Freeway
With HTML Files Resources are saved in the same directories as
reports that it is unable to upload a file because its file name is not allowed,
HTML files.
you can use the Alphanumeric option to avoid this problem.
Note 1: If DOS file names are selected, the Resources folder is renamed This can be done at any time. If you change this option after a site has been
“resource” instead of “Resources”. created, you must republish the site to ensure that changes to referenced files
Note 2: If a resource is shared by several pages in different folders, and the are correctly updated.
common or separate Resource folder options are selected, the resource will be
copied into a single folder and not duplicated in each of the separate folders.
Deciding on a page size
Note 3: Full details of Freeway’s preference settings, Document Setup
Each web page seen by a visitor to a web site exists as an individual HTML
dialog and shortcuts can be found in the Appendix section, starting on page
file; and every page you create in Freeway is exported as an individual HTML
423.
file when you publish your site. One of the most important things to do
when deciding on a page size is to plan the overall structure of your site in
File names advance—although you can create pages as you need them, it’s best to have
The File names popup menu allows you to specify whether you want a clear idea of the general sections that your site will contain.
to use UNIX/Windows style long file names, DOS 8.3 file names, or long Web pages are not limited in dimension; and if you create pages that are
Alphanumeric file names. By default, the HTML pages and other files
wider or longer than the visible area inside the visitor’s browser window, the
created from your site will be named with UNIX/Windows style long file browser window will display scroll bars to allow the visitor to view parts of
names. These allow characters other than numbers and letters to be used the page that are off the screen. However, it is usually considered poor design
in the file names for the files generated from your document, though you to have pages that force the user to scroll horizontally to see the rest of the
should bear in mind that some characters, such as apostrophes and speech page, and some design briefs require the designer to use only the area that
marks, are deemed “illegal”. Alphanumeric long file names allow only will be visible inside a standard browser window.
letters, numbers, hyphens, and underscores in the file name (apart from the
Your pages may be viewed in a variety of environments, including cell
dot before the file extension): some ISPs require file names to be limited to
phones, small monitors with a 640 x 480 pixel display, and large monitors
these characters.
up to 1280 x 1024 or greater. A screen’s resolution refers to its dimensions in
pixels; therefore a 640 x 480 screen is 640 pixels wide by 480 high. Currently
(2008) the most common display resolution for browsing the internet is
Getting Started |
1024 x 768 pixels, although larger and wider displays are becoming more
Getting started
common.
If you wish to create pages for commercial sites with a non-scrolling policy,
you need to judge carefully the size you define for your Freeway pages, so that
they will fit comfortably inside a browser window. The size you choose needs
to allow for the menu bars, button bars, status bar, and so on belonging to the
browser. This can result in a very small area indeed if you are designing for
640 x 480 displays.
Generally, you should aim to work to a width of around 550 pixels. This
fits comfortably within the browser window viewed on an older 640 x 480
display and makes an attractively sized window on higher resolution
displays. Remember, however, that Microsoft Windows browsers tend to open
full screen, and many users never change that default. If you are creating Comparison between New Document (above) and
a site that will be flexible if the browser window is resized, you need to be Document Setup (below) dialogs (both are Freeway 5 Pro).
aware of how it may appear on a full-screen high resolution PC display. Mac
users surfing on high-resolution screens tend to prefer to size the window
to approximately the aspect ratio of a portrait sheet of paper, rather than
expand windows to fill their field of vision.
Freeway lets you specify a page size for the document as a whole in the
Document Setup dialog box, but you can set different sizes for individual
pages using the Page General panel of the Inspector palette.
10 | Getting Started
Choosing an HTML level Choosing between Strict and Transitional FW 5 Pro only
Getting started
FW 5 Pro only
Transitional versions of HTML 4.01 and XHTML allow the use of deprecated
Freeway 5 Pro offers support for different levels of HTML. The choice is between elements and attributes, and may be compatible with a wider range of
HTML 3.2, which has limited formatting abilities but is supported by almost any browsers. Strict versions of HTML 4.01 and XHTML do not support framesets or
browser, HTML 4.01 (strict and transitional), which has more advanced formatting the target attribute.
abilities provided by Cascading Style Sheets (CSS), including the ability to use
CSS layer and inflow items, and XHTML 1.0 (strict and transitional), which is Layout options FW 5 Pro only
a combination of XML and HTML. HTML 4.01 and XHTML 1.0 are not properly
Freeway 5 Pro allows you to create CSS or table layouts.
supported by some older browsers such as Netscape 3 and Internet Explorer 3,
though these tend to be very much in the minority among users. Table layout (CSS Layout button off)
Important: Freeway 5 Express supports HTML 4.01 only, without the ability
Table-positioned items are drawn with a blue outline and/or blue corner
to use layer items or the extended range of CSS styles. mounts in Freeway. These items form a layout that is reproduced in HTML
when you publish your site. To recreate your layout in HTML, Freeway creates
When creating a document or working on a page in Freeway 5 Pro, you can an invisible layout table, consisting of rows and columns that combine to
decide which level of HTML you wish to output. There are three main options create table cells. Because the contents of Freeway boxes are output into their
you can choose from (with HTML 4.01 and XHTML 1.0 also giving a choice corresponding cell or cells in this two-dimensional grid, it is not possible to
between transitional and strict versions): have the contents of two different cells overlapping one another in the output
except by using layer items.
HTML Level Description Layout Formatting
CSS layout (CSS Layout button on) FW 5 Pro only
HTML 3.2 This is the most Invisible layout Basic. CSS layouts are created using CSS items, which are drawn with a green
basic level, and tables.
is the most outline and/or green corner mounts in Freeway. CSS items may be part
compatible with of a flow (inflow items), in which case their position is dependent on
old browsers. the position of previous items within the flow, or they may have a fixed
HTML 4.01 Allows the creation Invisible layout Basic, plus position on the page (layers). Freeway distinguishes layers from inflow
(strict and of CSS-positioned tables, fixed advanced CSS items by drawing small triangular corner mounts in the top left and
transitional) items. and absolute options. Output bottom right corners.
positioned uses CSS type
CSS items formatting One way in which CSS boxes differ from table-positioned boxes is that
(layers), relative- exclusively. their height is treated inflexibly by browsers. If a box is specified as being
positioned
200 pixels high, it will always be 200 pixels high in a browser, regardless
(inflow) CSS
items. 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
XHTML 1.0 As HTML 4.01. As HTML 4.01. As HTML 4.01.
(strict and reason, CSS boxes that contain text content should normally be set to have
transitional) an undefined height by deselecting the height button in the Item General
Getting Started | 11
panel of the Inspector palette. CSS items whose height is undefined will CSS inflow items FW 5 Pro only
Getting started
grow and shrink to fit their content in a browser. 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
Note: Using CSS items for layout is also regarded as a “cleaner” web design as text) within the same flow. This makes them useful in cases where you
technique than using invisible layout tables, since their use shouldn’t cause do not want content to overlap in a browser. One of the problems that can
problems for unusual browser software. For example, the screen reader occur when using layers is that text content which fits within the layer
software used by visually impaired people may become confused when in Freeway may spill out of it, and overlap with other content, when it
it encounters a layout table. As more and more web users have adopted is displayed within a browser. Alternatively, if the layer is set to have an
modern browsers, the need for web designers to use tables for layout will undefined height, the box as a whole will grow to fit its content, and may
decrease. 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,
CSS layer items FW 5 Pro only
you cannot position two CSS inflow items so that they next to each other
Layer items are output so they float in the HTML output and their position horizontally.
relative to the top left hand corner of the browser window is fixed. To draw a CSS inflow item within Freeway, insert a text cursor onto the
This difference makes layer items extremely useful for layout. Their position page or within another CSS item and then draw the item. To insert a text
on the page can be recreated in the browser window absolutely, without cursor onto the page, either click in it when it is already selected, or double-
requiring an invisible layout table to hold them in place. They can overlap click on the page if “Require double-click to enter text in page” is selected in
each other without requiring other items to reflow, be cut up or combine Freeway’s General Preferences.
with them.
Important: Freeway 5 Express does not support CSS inflow items.
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 Browser restrictions
behavior using JavaScript. For example, a layer item may be animated so Some old browsers (version 3 and earlier of Netscape and Internet Explorer)
as to appear from the edge of the screen and move across the screen in a will display layer items incorrectly: the contents of the layer items simply
particular path. appear one after another vertically on the page, in the order that they are
defined in the HTML.
Important: Freeway 5 Express does not support layer items.
12 | Getting Started
Setting the HTML level
Getting started
FW 5 Pro only
Important: Freeway 5 Express does not have an option for setting the HTML
level. All pages are output as HTML 4.01, but without support for CSS items
and styles.
You can set the default HTML level for all pages in a document or for
individual pages. The choices available are HTML 3.2 (compatible with
old browsers), HTML 4.01 (Strict or Transitional), and XHTML 1.0 (Strict or
Transitional). HTML 4.01 and XHTML 1.0 allow the use of CSS items (layers and
inflow items) and CSS styles.
Make sure nothing is selected on the page. The Inspector palette now shows
the page panel. Choose the desired level of HTML support from the HTML
popup menu.
Choosing default HTML in the New Document dialog. The Document Setup
dialog, below, allows the HTML level to be changed for the whole document.
Getting Started | 13
HTML page alignment Setting a different page alignment
Getting started
1 Go to the page or master page where you wish to set the alignment.
New pages in Freeway are set to an undefined page alignment called None.
This is the best option for creating flexible pages that can grow or shrink
when viewed in a browser.
It is also possible to set the page contents to appear left-aligned, centered in
the browser window, or even right-aligned. These are known as fixed-width
pages, and can open up some interesting design options. However, they will
not be flexible in width, although HTML text items will grow in height if the
text size is enlarged in the browser. In the browser, left-aligned pages will
show clear space to the right, right-aligned will show clear space to the left,
and center-aligned will show clear space on both sides.
You should be careful if the effect of your page design depends on a precise
alignment with a page background image. Background images can be Freeway 5 Pro Freeway 5 Express
controlled using the Inspector palette (see Applying a background image
to a page, page 29, for more information). 2 From the Page General panel of the Inspector palette, locate the
Align popup menu. Choose from the following:
Further information about how to create flexible layouts using Freeway can
None allows flexible page content items to have
be found in Creating flexible layouts on page 233 and Creating CSS layouts
variable width.
on page 237.
Left aligns the page contents with the left-hand
What are the advantages of None? edge of the browser window.
If you wish to create a flexible page design you should leave Page Center centers the page contents within the browser
Alignment on its default setting of None. The reason for this is that flexible window.
items are only flexible—growing or shrinking in width as the browser is
Right aligns the page contents with the right-hand
resized—if the page width is undefined. If the page width is defined, as
edge of the browser window.
it has to be for center- and right-aligned pages, flexible items will have
a fixed width (since the parent has a fixed width). More information on 3 When the page is viewed in the browser, the contents will display using
flexible layouts can be found in the second part of this section, Creating CSS the chosen alignment.
layouts on page 237. Note: The effect of changing this setting can be viewed in Freeway itself
using the Preview option. For more accurate results, though, check your
page in a browser.
14 | Getting Started
Saving and opening files automatically add a “.freeway” extension to the file name—this identifies the
Getting started
document to the system as a Freeway document. If you wish to see the file
After you have created your document, you need to save it. Freeway saves extension on the end of the file name, click on the disclosure triangle to the
documents in its own format, not as HTML. Only Freeway can open and right of the Save As text field, and deselect the Hide extension checkbox at
save Freeway documents. To export a document as HTML, you must use the the bottom left of the dialog.
Publish or Preview commands.
You may wish to keep both the Freeway document and the Site Folder
together for ease of administration. However, it isn’t a good idea to keep the
Freeway document inside the Site Folder itself, but rather put both in a new
folder. Freeway will automatically create a folder structure for you if you use
a template for your new design. For more information about Site Folders, see
The Save As dialog box in its default state.
Creating and assembling content on page 3.
Choose a location, then type a file name for your Freeway document. You When you have made some changes to the file, use the Save command
should make the document file name simple and informative, so that you again. When you choose Save in a document which has already been saved,
can identify it easily in the future. It does not matter what name you give the Freeway updates that file with the new information without asking you for a
document file, as this file remains on your system and is not uploaded to the file name again.
web. Do not use an extension, such as .html, since this may cause problems
later. Mac OS X filenames can be long enough to be descriptive. Freeway will
Getting Started | 15
Freeway does not automatically save as you work. As with any software
Automatic backups
Getting started
16 | Getting Started
Opening a backup document Working with Freeway’s templates
Getting started
In Freeway, you can open an existing document by choosing Open… in the
File menu. Use the Open dialog to find your desired Freeway document. Freeway 5 Pro and Express ship with a set of “get you started” templates.
These are essentially complete mini web sites, with master pages and layouts
Freeway lists backup documents in the Open dialog as grayed out by default. ready for you to import your own images and text.
This is because you should never need to open the backup, unless the original
Freeway 5 Express always uses a template for new site creation, and if the
document is damaged. If you do need to open the backup document, you can various templates that are available don’t appeal, you can choose the “Blank”
do one of the following: template to give you a clean canvas from which to design your own site.
Double-click on the icon of the backup document in the Finder, which You can also create your own templates for future use, or to share with other
will cause the backup file to open in Freeway as an untitled copy of your Freeway users.
document. Creating a new site document on page 6 briefly explained the process of
Alternatively, if you are in Freeway, you can hold down O as you choose creating a new site document using Freeway 5 Pro’s Custom settings. This
Open… from the File menu. The menu entry changes to Open Backup…, section explains in a little more detail creating a new document using a
and the backup files are listed normally in the Open dialog. template, and how to save and use your own template designs.
Getting Started | 17
2 The New Document dialog appears. If you’re using Freeway 5 Pro, it
Getting started
will show two tabs across the top: Templates and Custom. If you are
using Freeway 5 Express, you will see only the templates section.
3 Select one of the headings in the panel on the left of the dialog to view
the templates in that section. To get a clearer view, you can enlarge the
icons by dragging the slider below the main panel to the right.
4 To open the preferred template, select it and click the OK button. You will
be prompted to save the new document by the Save dialog.
Freeway creates a folder structure like the one illustrated on page 4. The folder
contains the new Freeway document, a Media folder (to contain images and
other materials you wish to use with your new document), and a Site Folder
where Freeway saves the HTML code and images that make up the web site.
By default, new template-based documents will be saved to your user
Documents folder, but you can choose any location using the Save dialog.
If you choose the “Blank” template, the folder structure created by Freeway is
the same as the other templates. The only difference is that the Media folder
for the other templates will contain the images that were used to create the
template.
If your document needs to be saved, a warning dialog will appear. To
Creating a new template continue simply click OK. If you click Cancel, the save will be stopped
You can save any Freeway document as a template. The advantages of using and you can then manually choose Save from the File menu.
a template are that you can create new copies of the document without 2 The Save dialog opens. The default save location is the user’s
accidentally saving over the original, and you can share your design with Documents folder.
others if you wish.
When you save a document as a template, Freeway makes a special file,
called a bundle, which contains the Freeway document and images that were
used to create it. Once this template has been saved, it can be imported into
Freeway so that it appears in the New Document dialog.
1 Choose Save as Template… from the File menu.
18 | Getting Started
If desired, enter a new name for the template in the Save As text field. From the Language popup menu, choose a default language for your
Getting started
Clicking the disclosure button will reveal the full Save dialog, which template if you desire. The languages available are Danish, Dutch,
allows you to navigate to an alternative location to save the template. English (default), French, German, Hebrew, Italian, Japanese, Spanish,
See page 15 for more information about using Freeway’s Save dialog. and Swedish.
The default template icon is shown in the Icon box. If you would like to use
a custom icon so that your template can be recognized quickly in the New
Document dialog, select the new icon by clicking the Select… button and
choosing a suitable image from the dialog box.
4 Click OK to complete saving the template.
Freeway will save the template, and return you to the document from which
you created the template.
The new template is now ready to be installed in Freeway.
3 When you click the Save button, the Save as Template dialog appears. Installing a template
1 Choose New… from the File menu.
2 In the New Document dialog, show the Templates panel. If you are
using Freeway 5 Express, the templates will already be visible.
3 Click the Install Templates… button.
The default group for a new template is “General”. If you wish to save
the template in a different group, enter its name in this field. You may
enter some copyright text and a description if you wish.
Getting Started | 19
4 Freeway opens the Choose a File dialog.
Getting started
Power Tip: To take a screen shot of the page you can use the Mac OS
5 Navigate to the location of the new template, and select it. Click the shortcuts. Grab just a part of the screen by pressing CS4. This will
Choose button. change the mouse cursor to a target. Click and drag across the area you
Freeway will add the new template to the relevant group. wish to grab, and when you release the mouse button, the image will be
saved to your desktop.
To check that the new template appears, click on the group heading in the
left panel. If the template has been installed correctly, it will appear in the The saved screen shot format will depend on which version of Mac OS X you
are using. If you are using OS X 10.3.x, the file will be saved as a PDF and
preview panel on the right.
will require further work to convert it to a JPEG or PNG. If you are using OS
X 10.4.x the file will be saved as a PNG.
3 Using your favorite image editor application you can resize the screen
grab and save to JPEG or PNG if you wish.
4 Follow steps 1 to 3 of Creating a new template. In the Save as
Template dialog, click the Select… button next to the Icon preview
box to select the new custom icon. Click the Choose button, and the
icon should appear in the preview box in the Save as Template dialog.
5 Click OK to continue saving the template.
Choose New Document from the File menu to check that your new icon
appears properly in the Templates window.
The new template icon will appear in the New Document dialog.
20 | Getting Started
Working with pages
Adding pages 3 Enter the number of pages you want to add to the document. New pages
You can add pages to your document using the following steps: will be automatically named “YourTitle1”, “YourTitle2”, etc
1 Choose New Pages… from the Page menu or click on the menu 4 If you want to apply a different master page from that shown, select its
in the lower left corner of the document window and choose New name from the Master popup menu.
Pages…, or L-click and choose New Pages… from the contextual 5 Click OK. The current page changes to the first of the new pages.
menu. New pages are normally inserted after the current page, in the same folder—
unless you have selected a folder in the Site panel, in which case the pages
will be added at the end of the selected folder.
You can also add a new page by dragging the icon of the master page from the
Master Pages area in the Site panel into the Site Pages section. This brings up
the New Page dialog, which asks you to supply a title for the new page.
Getting Started | 21
Page title and file name Viewing and changing pages
Working with pages
It’s important to give pages meaningful titles. This is not only helpful in
assisting you to navigate the document more easily but also determines the When viewing a document in Freeway, you can see only one page at a time
window title of the page when it is viewed in a browser and is used as the in the document window, but changing to another is quick and easy. You can
title when the page is bookmarked. It may also play a role in the way search change pages using the Site panel, or the Link Map view (Freeway 5 Pro
engines list your site, so it should describe your page well. only), or you can follow internal hyperlinks.
Enter the title into the Title field in the Page General panel of the Inspector Changing pages using the Site panel
palette. Freeway will automatically generate an HTML file name from this The current page is shown in the Site panel
title (unless the file name is already distinct), but you can type a different file with its icon darkened and the title shown
name into the File field if you wish. in bold. To change pages, click on the icon or
name of another page.
the correct extension to the file name; Freeway will automatically apply the You can also follow hyperlinks in Freeway’s Link Map. The Link Map
correct extension (.htm or .html, depending on your settings in the Output graphically presents the relation of a selected page to the other pages in the
panel of Document Setup) when you press E or R. site—the pages which link to it are on the left of the icon and the pages to
which it links on the right.
For more information on changing the titles of your pages, see Changing the
title of a page in the Inspector palette on page 27.
22 | Getting Started
Deleting pages
Getting Started | 23
Rearranging pages using the Site panel Duplicating pages
Working with pages
You can rearrange the order of the pages in a document, although this has You can use the Duplicate Page… command on the Page menu to create
no effect on how the site is viewed by the visitor. Navigation through a site is identical copies of the current page.
determined solely by the hyperlinks that you define to permit this. However, 1 Choose Duplicate Page… from the Page menu, or L-click on the
sometimes it is helpful to have the pages arranged in a particular order to page and choose Duplicate… from the contextual menu.
help you work with the document more easily. 2 In the New Page dialog, enter a name for the duplicated page and
To change the page order, simply drag the page using either its icon or its title up click OK.
or down to a new position in the Site panel. Feedback in the panel shows where
the new position will be. You can change the order of pages in the same folder or
drag them into a subfolder by dragging below the site folder and to the right.
See Working with folders on page 31 for how to create subfolders in the Site
panel.
Copying pages
In order to copy a page, simply select it as described above and choose Copy
from the Edit menu. You can only copy one page at a time.
You can also O-drag a page, or range of pages, within the Site panel to
duplicate the selected pages. Type a new title into the New Page dialog that
appears.
24 | Getting Started
Working with master pages Adding a new master page using menu commands
The Site panel uses a secondary (light gray) highlight to indicate which
master page is applied to a particular site page, or which site pages derive
from a particular master. When a site page is selected, the master page on
which it is based is shown with a secondary highlight. When a master page 2 Type in a name for the new master page in the dialog box and click OK.
is selected, the site pages that are based upon that master are shown with a Applying master pages to site pages
secondary highlight. Any changes you make to a master page automatically affect all the pages
Master pages can also hold guides and grids that help you position elements using that master. When you create new pages for your document, you can
consistently over a range of site pages. (These guides do not appear on your choose which master page you want the new pages to be based on if you
published web pages.) have more than one.
By default, a new document contains one master page and one ordinary site page. You can also apply a new master page to an existing page. See Applying a
If you’re only using one basic page design, you can modify the default master different master page on page 28.
page, Master1, to suit your needs. Simply change to the master page to set up
items, guides, and page grids as you want. However, if you want to work with
more than one master page, you can add new master pages.
Note: Freeway 5 Express has ruler guides, but not page grids.
Getting Started | 25
Renaming a master page Subsequently, you may need to reapply the master page elements as they
Working with pages
To change the title of the current master page: originally appeared. You can do this by choosing Reapply Master from the
Page menu. The elements you changed remain on the page and the elements
1 Click on the page or pasteboard to deactivate any selected items and display
the Page General panel of the Inspector palette. from the master page are reapplied. You then need to carefully select and
remove the duplicate elements you no longer require. (If you have not moved
2 Type a new name in the Title text field.
an element, the master page element may appear on top of a modified one.)
3 Press R or click on the page to confirm the new name.
You can also O-click on the title of the master page in the Site panel to Making site pages into masters
select it for editing. using menu commands
Site pages can be used to create master pages. This is useful if you have
Reapplying a master page created a site page and want to use it as a base for other pages. To make the
When working with site pages, you may move or otherwise alter items that current site page into a master:
derive from a master page. However, this uncouples the item or its content from
1 Choose Make Master… from the Page menu, or L-click on the page
the master and changes to the master item or its content are no longer shown
and choose Make Master… from the contextual menu.
in the instance item.
2 Enter the new master page name in the dialog box and click OK.
Freeway creates a new master page from the site page.
26 | Getting Started
Making site pages into masters using the Site panel Modifying pages
2 Highlight the text in the Title field and enter the new title.
3 Press R or click back onto the page to confirm the new title.
Getting Started | 27
Changing the title of a page in the Site panel Applying a different master page
Working with pages
1 Hold down the O key as you click on the title of the page in the To apply a different master page to the current page:
Site panel. 1 Click on the page or pasteboard to deactivate any selection and display
the Page General panel in the Inspector palette.
2 The existing title is shown highlighted for you to overtype. Enter the
new title.
3 Press R or click back onto the page to confirm the new title. Freeway
Freeway 5 Pro Freeway 5 Express
renames the page, changing the title displayed in the Site panel.
Note: Freeway automatically changes the file name for the HTML page to 2 From the Master popup menu, choose the master page you want to apply.
match the title unless the file name is already distinct, as described in Page The elements you changed remain on the page and the elements from the
title and file name on page 22. Freeway automatically manages hyperlinks new master page are applied. You then need to carefully select and remove
in your site during such changes. the duplicate elements you no longer require, as described in Reapplying a
master page on page 26.
28 | Getting Started
To apply a background image to the current page, you can either:
Getting Started | 29
The options for Horizontal are: The options for Vertical are:
Working with pages
30 | Getting Started
Working with folders Moving folders and pages into subfolders
Deleting folders
To delete a folder, select it in the Site panel and either press the D or
Backspace key or click on the button at the bottom of the Site panel or
choose Delete from the Edit menu. Click OK in the confirmation dialog. You
can also delete a folder by L-clicking on it and choosing Delete… from the
contextual menu.
Important: Deleting a folder will also delete any pages and their content in
the folder. If you wish to keep any of the pages, drag them out of the folder in
the Site panel, or copy their content to a new page before deleting the folder.
Getting Started | 31
Renaming folders Viewing the page at different
Working with pages
To rename a folder, O-click on the name of the folder in the Site panel.
magnifications
To look at a page in more or less detail, you can enlarge or reduce the
magnification at which the page is viewed.
There are several ways of doing this: using the popup Zoom menu at the
bottom right of the document window, using the Zoom tool or selecting a
preset magnification from the View menu.
Take care while viewing the page at different magnifications, as Freeway’s
representation of how things will look in a web browser is only valid at 100%
zoom. You can zoom in up to a maximum magnification of 1600% or out to a
Color labels minimum of 5%.
You can use colors to label pages, folders, and items in the Site panel, in a
similar way to using color labels in the Finder.
To set a color label: Preset options available
1 L-click on an item, page, or folder in the Site panel. from the popup Zoom
2 Select a color label from the contextual menu. menu in the bottom
right of the document
You can change the names of color labels in the Preferences dialog.
window.
When you click on the popup Zoom menu at the lower right of the document
window, you’ll see a list of magnifications to choose from. You can also type
in a custom magnification by choosing Other… from the popup menu or
automatically select a zoom that reveals the entire page in the window by
choosing Fit Page In Window.
32 | Getting Started
Changing the view magnification using the Zoom tool Zooming to a preset view size from the View menu
Defining a rectangular
marquee by clicking
and dragging with the
Zoom tool.
To quickly restore the view to 100%, just double-click on the Zoom tool in the
Toolbar. (This does not work with the Tools palette Zoom tool.)
You can also call up the Zoom dialog from the View menu.
While working with the Zoom tool, press the C key to temporarily toggle
to the Selection tool.
Getting Started | 33
Working with multiple windows You can move and resize windows in the normal way to display two or more
Working with pages
34 | Getting Started
Stacking windows Rulers, guides, and grids
Guides preferences in
Freeway 5 Express.
Getting Started | 35
Rulers
Working with pages
Rulers along the top and left-hand side of the page view give you an
indication of the position of items on a page with respect to the ruler origin.
Initially, the ruler origin is aligned with the top left corner of the page. When
working in a particular area of the page though, you may wish to move the
ruler origin to work more conveniently.
The ruler display varies with the selection on the page. For example, with an
item selected, the horizontal ruler reflects the standard origin but with the text
cursor in a box, the horizontal ruler reflects the text margins of the item.
36 | Getting Started
Ruler guides
4 When you reach the position you want, release the mouse button to
place the guide.
Getting Started | 37
Creating guides FW 5 Pro only Repositioning ruler guides numerically
Working with pages
The Create Guides dialog allows you to set guides for a page, and Double-click on an existing ruler guide to display the Guide dialog box.
automatically calculates the correct widths and heights for layouts with a Type in a new value for the position of the guide relative to the ruler origin
fixed number of columns or rows, with or without a gutter. and click OK. There is no need to enter “px” in the text field as Freeway will
1 Choose Create Guides… from the Page menu. automatically add the measurement when the OK button is clicked.
2 Specify the number of rows and columns you want.
3 Select the From Margins checkbox if you want guide positions to be
relative to page margins.
4 Enter values for row or column gutters if required.
5 Click OK to confirm your changes.
Freeway automatically updates the page display to show guides as they are
created. If you cancel the dialog, any guides that have been created in this Removing a ruler guide
way will be removed. To remove a ruler guide from a page, use the Selection tool to drag the
Moving a ruler guide with the mouse guide off the page in any direction. Alternatively, double-click on the ruler
Use the Selection tool to drag the guide to the new position, then release guide to display the Guide dialog box, and click on the Remove button.
the mouse. To remove all guides from a page (in Freeway Pro), choose Remove Guides
When you try to move a guide, you may select a nearby item or rule instead. from the Page menu.
If this happens, try dragging from somewhere else along the guide first.
Snapping to guides
If you want to drag a guide to a new part of the page and have the view You can make guides “magnetic”, so that when you move items within a
scroll to follow it, hold down the S key as you drag. certain distance of a guide or gridline, they snap into alignment.
Snapping to guides is on by default, but you can turn it off if necessary by
deselecting Snap to Guides from the View menu.
38 | Getting Started
Hiding and displaying guides and grids Displaying guides and grids above
To display guides and grids again, choose Guides from the View menu once more.
Getting Started | 39
Margins and grids Setting horizontal and vertical grids
Working with pages
FW 5 Pro only
To apply a horizontal or vertical grid:
To help you position items and rulers consistently, you can set up horizontal
1 Choose Margins and Grids… from the Page menu.
and vertical grids of regularly spaced guides.
2 Turn on the type of grid(s) you want to apply (Vertical and/or
Horizontal) using the relevant checkboxes.
3 Specify the width of the grids in the appropriate fields.
4 Select From Top Margin and/or From Left Margin if you want your
grids to be defined relative to the page margins.
5 Click OK if you’re happy with the settings. The grids you specify are
placed over the page.
Note: If the new grid doesn’t appear, check that Freeway is set to show
grids. Use the Guides command on the View menu to toggle the display of
the grid.
40 | Getting Started
Working with items
This chapter assumes you are already familiar with the basic functions of
the various tools and palettes available to you in Freeway 5 Pro.
Types of items
Elements created on your Freeway pages are known as “items”. To create
Important: Freeway 5 Express does not support CSS items. However, “blue items, use the drawing tools in the Toolbar or Tools palette (Freeway 5 Pro
outline” HTML items referred to in this chapter have the same functionality only) or choose commands from the Insert menu.
in both the Express and Pro versions of Freeway.
Independent and inflow items
Independent items have a position relative to the page or to a parent
item—in constrast to inflow items, which are placed within a flow of text
and/or other items. Inflow items do not have an independent position—their
location on the page or within an item is determined by where they are in the
The Freeway 5 Pro Tools palette flow. Some types of inflow item can stand on the same line as text and other
duplicates the tools available from the items, in which case they are known as inline items.
main Toolbar. It enables the Toolbar Freeway distinguishes independent items from inflow items by drawing
to be hidden so that more space is triangular corner mounts on the item’s outline.
available for the document you are
working on.
Note: For more information on creating items, and manipulating them and
their contents, see Working with graphics in Freeway on page 111.
Getting Started | 41
Child items
Working with items
Important: Freeway 5 Express does not support CSS layer items, and has
limited support for inflow layout.
HTML items
HTML items are shown with a blue outline (table layout) or green outline (CSS
layout). The contents of an HTML item are output to the web using standard
HTML tags. Graphics that are imported in HTML boxes are published in their
original form and cannot be resized or modified within Freeway. HTML items
may contain text, images in GIF, JPEG, or PNG format, or multimedia content.
Additional types of HTML items include form controls, tables, Action items,
and others.
Note: The default box colors (blue for table-positioned items and green for
CSS items) can be changed in the Preferences dialog.
42 | Getting Started
Creating items
Note: Freeway 5 Express supports a smaller range of graphic types: GIF, JPEG,
PNG, and PICT. Graphic items drawn in Freeway 5 Express have the same
functionality as non-CSS layer items drawn in Freeway 5 Pro.
The HTML The Graphic The Graphic The Graphic
rectangle tool. rectangle tool. Path tool. Oval tool.
Items that are drawn with the main box tools default either to HTML boxes
Map area items (with a blue or green outline) or GIF boxes (with a gray outline). The output
type can be changed in Item Output panel of the Inspector palette. The
Map area items are shown with a purple outline. These items indicate the
output type of an item determines how its content is reproduced in a web
area of a hyperlink “hotspot” over an item. Unlike HTML items and graphic
browser when the site is published. The six main output types are: HTML, GIF,
items, map areas do not hold any content of their own. (For more information
JPEG, PNG, URL, and Map Area.
on map area items, see Image maps on page 147.)
To access the Path tool from Freeway’s default toolbar, click and hold on the
Graphic box drawing toolbar item and select the Path tool from the menu.
If you later wish to change the output type of an item in Freeway, simply
select the item, switch to the Item Output panel in the Inspector palette
and choose a different output format. The output type might also change
automatically when a graphic or other content is imported.
Getting Started | 43
When you want a box to hold text Drawing items
Working with items
The contents of a box drawn to hold text can be published either as HTML
text, or as a graphic. You normally make this decision when you draw the Drawing a rectangular box
box—Freeway offers the ability to draw HTML text boxes or graphic text boxes 1 Select the HTML or graphic box-drawing tool.
with the individual drawing tools. Graphic boxes holding text can be any
shape you choose, but HTML text boxes can only be rectangular.
44 | Getting Started
Drawing a polygonal graphic box
Note: You can draw an item with both curves and straight lines.
Note: If you press the O key before beginning to draw the box, you will
activate the Grabber hand, which drags the page within the window.
Getting Started | 45
Drawing a square or circular box Manipulating items
Working with items
Selecting an item
Drawing child items
Before making changes to an item, you must first select it using one of these
Items may be drawn directly on the page, or as children of other items.
five methods:
When you are drawing an item as the child of another item, this is indicated
by the cursor having a small square around it. Freeway also highlights the ◆ Click on an item with the Selection tool. This is probably the easiest
prospective parent of a box that is being drawn. If you draw a box within an way of selecting an item, so long as you are not currently editing text
existing box, Freeway will normally choose that as the box’s parent. If you within the item.
are not drawing the box within another box, Freeway will choose the page as ◆ Hold down the C key and click anywhere on the item.
the parent. You can cycle between possible parents by pressing the space bar ◆ Click on the edge of the item using the Selection tool.
while a box is being drawn. ◆ CO-click an item to select the item behind another item.
◆ Click on the item’s icon in the Site panel, if Show Items has been
selected in the menu.
Once an item has been selected, selection handles (tiny black squares) will
then appear around the edge of the item.
Selection handles
Selected
graphic item
Selection tool
Graphic
pan tool
46 | Getting Started
Parent and child highlight of the selected item ◆ COS-click to select successive items stacked one in front of
Note: Freeway does not allow you to select multiple items that do not have
the same parent.
Deselecting an item
Selecting multiple items
There are six ways of selecting multiple items: To deselect an item, you can select something else, click on the box again
while holding down the S key, or click on any blank area of the page
◆ With the Selection tool, S-click on each item.
or pasteboard.
◆ With the Selection tool, drag around or through items on the page or
pasteboard that you want to select. Deleting an item
To delete an item, select it and press either the Backspace or D key, or
choose Delete from the Edit menu.
Dragging the mouse
Deleting the content of a box
over several items
You can delete the content of a box and leave the box itself on your page.
to select them is
If it contains graphic or plug-in content, select the box and choose Delete
sometimes referred
Content from the Edit menu. If it contains text, click inside the box, choose
to as ‘dragging a
Select All and then Delete from the Edit menu.
marquee’.
Displaying and hiding box outlines
You can hide or display the non-printing box outlines, which are displayed by
default. To hide or display box outlines, choose Outlines from the View menu.
◆ Choose Select All from the Edit menu. This selects all items on the
currently visible page and pasteboard—unless a child item is selected, in
which case it selects all items that have the same parent as the selected
child.
Getting Started | 47
Resizing items To resize an item using keyboard commands
Working with items
You can resize an item using the Selection tool by selecting it and then Hold down the S key on the keyboard as you press the arrow keys to
dragging its handles. To specify its size more accurately, use the Transform resize the box in 1 pixel increments.
dialog, the Inspector palette or keyboard commands. You can change the increment in Preferences, General panel, Arrows
Note: Freeway 5 Express does not have a Transform dialog. Nudge setting.
Freeway 5 Express
Freeway 5 Pro
48 | Getting Started
Moving items 2 Enter new values in the Left Inset and Top Inset text fields of the
Note: Copying items in this way may cause non-layer HTML items on the
destination page to become overflowed. Items affected will be displayed with
a diagonal cross in the box.
Freeway 5 Express
Freeway 5 Pro
Getting Started | 49
Locking and unlocking an item Showing items in the Site panel
Working with items
You can lock an item into position to prevent inadvertently moving it. To do
this, select the box and choose Lock from the Item menu or select the Lock Items can be shown in the Site panel, either by switching from Site view
checkbox in the Item General panel of the Inspector palette. to Page view (click on the popup menu in the Site panel header), or by
selecting Show Items from the menu at the bottom of the Site panel.
When an item is locked, its selection handles are drawn in red. Some boxes that
When items are displayed, their order and arrangement within the Site
have not been locked in this way may also have locked selection handles:
panel indicates the stacking order of items on the page.
◆ The top and bottom selection handles of a box are locked if the box’s
Items that belong to each page are shown below and slightly to the right of
height is undefined or if “Height can shrink” is selected—in this case, the
the page icon. Similarly, items that are children of other items are shown
height is determined by the box contents, and cannot be set separately.
below and slightly indented from their parent item. If an item is on the
◆ In Freeway 5 Pro, the left and right selection handles of an inflow box
pasteboard or has overflowed from its containing box, its icon has a small
are locked if the box’s width is undefined—in this case, the width is
cross in the center.
determined by the width of the parent (or by the box contents in the case
of floated boxes).
You can hide the display of items on individual pages by clicking the
disclosure triangle next to each page.
Freeway 5 Pro
Freeway 5 Express Showing all
items on a
2 Choose a different shape from the Shape popup menu in the Other page (left),
panel. and hiding
Note: HTML items can only be rectangular. the items by
clicking the
disclosure
triangle.
50 | Getting Started
Reshaping paths Deleting points
Moving points
1 Using the Selection tool, select the path item to display hollow squares,
called “control points”.
2 Point at a control point—the mouse cursor will then change to a tail-
less, hollow arrow.
Altering curves
1 Select the box to display its points and direction handles.
Adding points
You can add extra points to a path with the Path tool:
1 Select the item.
2 Switch to the Path tool and move the cursor over the path position 2 Drag the points or direction handles to reshape the curve.
where you want to add a control point. The cursor will change to .
Getting Started | 51
To make a round-cornered graphic box All four corners of the box are altered by the amount
Working with items
1 Select the box and display the Item Appearance panel in the Inspector you set. Small circles appear inside the box, close to
palette. each corner at the radius origin of the curve. You
can alter the shape of individual corners by dragging
these circles.
If you want to give precise dimensions to each corner, choose Custom… from
the Corner popup menu. Enter the dimensions you want in the text fields.
Entering 0px removes the radius from a corner.
Freeway 5 Pro
Freeway 5 Express
52 | Getting Started
Transforming items Skewing an item using the Skew tool FW 5 Pro only
Toolbar or Tools palette. The Mirror tool allows you to reflect an item and at the same
3 Drag any handle to rotate the item. time, rotate it.
1 Select the item.
Note: HTML items cannot be rotated.
2 Select the Mirror tool from the Toolbar or Tools
palette.
Rotating an item using the Transform dialog 3 Drag any selection handle to rotate and reflect the item
box FW 5 Pro only at the same time. To reflect the item across a vertical
1 Select the item, and choose Transform… from the Item menu. axis, single-click any handle. To reflect the item across
2 Under the Item section of the dialog, enter the desired angle in the a horizontal axis, drag the left edge handle across the
Rotation field. Entering a positive value rotates the item counter- central axis of the item and release.
clockwise. Entering a negative value rotates the item clockwise. To
Note: HTML items cannot be mirrored.
prevent the contents from being rotated, type in the negative value of
the rotated item.
3 Click OK.
Getting Started | 53
Reflecting an item using the Transform dialog Scaling an item using the Transform dialog
Working with items
Note: Freeway 5 Express does not have the Transform dialog box.
54 | Getting Started
Changing attributes for items Preventing an item from publishing
Getting Started | 55
Using the attributes of a master box Creating layer items
Working with items
FW 5 Pro only
Master pages are useful in getting items to appear automatically on multiple
site pages. If you have altered an item’s position or other attributes, you can HTML and graphic items may be set to output as layer items using fixed or
restore them to those of the master page: absolute positioning in HTML 4.01 or XHTML 1.0. Additionally, graphic items
may be set to output as individual images or combined into one.
1 Select the item and display the Item General panel on the Inspector
palette. If the CSS Layout button is not active (shows as gray in the Toolbar, or is
not checked in the Tools palette), non-inflow items that are drawn on the
Freeway page are positioned in the output using a hidden layout table—this
is what imposes the restrictions on certain types of overlap between items
and why images are cut up by overlapping HTML text, for example.
However, when items are set to output as layer items, they no longer form
part of this layout table and are freed from these restrictions. Layer items may
overlap without interacting in any way and are stacked in the HTML output
in the same order as they appear on the Freeway page.
2 Click to select the Use Master Settings checkbox.
If a layout table is output because of the presence on the page of any non-
layer items, it is always the rearmost element in the output. Layer items are
always treated as being in front of the layout table. It is therefore impossible
for non-layer items to be output in front of layer items.
HTML elements may be positioned with complete freedom when they are set
to output as layer items, and will not interact with each other in any way.
Their stacking order may be changed by using the Bring to Front or Send to
Back commands from the Item menu, or by dragging their icons in the Site
panel when this is set to Show Items.
See Creating CSS layouts for further information about layer items on page 237.
56 | Getting Started
Creating a layer item FW 5 Pro only Setting any item to output as a layer item FW 5 Pro only
2 Draw the item using one of the drawing tools. 2 Select the item you wish to make a layer and turn on the Layer
checkbox in the Item General panel of the Inspector palette. The item
Power Tip: It can be hard to remember which items you have drawn in border changes from blue to green, visible if Outlines is turned on in the
your layout are layers and which are not. Freeway 5 Pro helps you by using View menu.
a simple color code to identify items. When the CSS layout button is active,
HTML item tools are shown with a green border in the Toolbar and Tools
palette. HTML items drawn on the page have the same green border. Non-
layer items are drawn with a blue border. Graphic items are always drawn
with a gray border, but will show a small green ‘corner mount’ if they are
layers, or blue if non-layers.
Getting Started | 57
Setting publishing options for items Item Output panel
Working with items
When an item is selected, the Inspector palette displays a number of settings Use the Item Output panel to select an item’s output type as well as
for that item, with the basic options shown in the Item General panel. There attributes for the content that is output.
will also be options available in the Item Output panel that control how the
item outputs when the site is published.
Freeway 5 Express
Freeway 5 Pro
58 | Getting Started
Combined Graphic Output panel Referring to layer items in DHTML or Actions
If you want several items to be kept together in the same layer, you can insert
them into an HTML layer item as child items. See Child items on page 42 for
Freeway 5 Pro Freeway 5 Express more information.
Getting Started | 59
Arranging items Duplicating an item using the Duplicate dialog
Working with items
You can duplicate an item to make as many copies as you need, while
It is possible to change the stacking order of items on the page. You can also simultaneously assigning a horizontal and vertical offset to each copy.
copy, duplicate, and paste items in a document.
1 With the box selected, choose Duplicate… from the Item menu.
Cutting, copying, and pasting 2 Enter the number of copies you want, as well as the horizontal and
1 Select the item(s) to be cut or copied. vertical offset.
2 Choose Cut or Copy from the Edit menu to transfer the selected items 3 Click OK.
to the Clipboard. (Cut removes the original from its location, while Copy
Aligning items
leaves the original in place.)
You can align selected items along their edges or through their center points:
3 Move to a new page or new document (or select a new parent on the
1 Select the items you want to align.
current page) and choose Paste from the Edit menu. Freeway then
pastes the items into the same relative position in which they appeared 2 Choose Align… from the Item menu. The Alignment dialog box opens
in their original parent. with the most recently used alignment options chosen.
60 | Getting Started
Changing the stacking order of items using the Group command
Getting Started | 61
Grouping items be dragged outside their parent unless you press the space bar (which causes
Working with items
1 Select the items you want to group either by S-clicking each in turn, the item to be moved into a different parent), or hold down the C key
or by dragging a marquee over them. (which allows layer items to be positioned outside their parent).
2 From the Item menu, choose Group. Another way to create a group is to drag items in the Site panel:
1 Click on the button at the bottom of the Site panel and choose
Show Items.
3 In the Site panel, select the item you wish to make into a child.
You can also create a group by drawing new items within the boundary of a
4 Drag the item up and to the right, so that the item you wish to become
larger item. Child items drawn like this are constrained to the parent item’s
the target parent becomes highlighted.
boundary: you can move children around within the parent, but they cannot
62 | Getting Started
Distributing items
Note 1: If the dragged item is outside the original parent boundary, the
parent may stretch to encompass the new child, or the child may be moved
within the parent’s boundary. This can be a little unpredictable, so it may be
better to drag the first item over the second in the page layout, then drag it
in the Site panel to create the group.
Note 2: Grouping items is an essential part of using the Rollover Action. For
more information see Layer Items and the Rollover Action on page 246, and
Using the Rollover Action on page 318 and the Rollover Action on page 97 of
Using Freeway 5. Freeway 5 Express users, please refer to Using Freeway 5,
Tutorial 3, Creating a rollover navigation menu on page 55.
Getting Started | 63
◆ Direction (Horizontal or Vertical). Spacing items a fixed distance apart
Working with items
◆ Method (Across Items, Across Page, Fixed Distance). To space items so that they are a fixed distance apart, choose Fixed Distance
◆ Distance (in pixels—only available for Fixed Distance method). from the Method popup menu. Choose one of the following from the
◆ Between (Items, Top/Left Sides, Centers, Bottom/Right Sides). Between popup:
3 When you are happy with the positions of the items shown in the Items positions items so that the space between the
preview, click OK. If the results are not quite right, you can choose end of one item and the start of the next one is
the Undo command from the Edit menu to return the items to their the amount specified in the Distance field.
previous positions and try again. Left/Top Sides positions items so that the space between
the left or top of each item (depending on the
Spacing selected items evenly
chosen direction) and its neighbor is the amount
To adjust the positions of the selected items so that they are evenly spaced
specified in the Distance field.
between the two endmost items in the selection, choose Across Items from
the Method popup menu. Ensure the Between option is set to Items—this Centers positions items so that the space between the
is normally the best option. center of each item and its neighbor is the
amount specified in the Distance field.
Spacing items evenly across the page Right/Bottom Sides positions items so that the space between the
To adjust the positions of the selected items so that they are evenly spaced right or bottom of each item (depending on the
across the page, choose Across Page from the Method popup menu. Ensure chosen direction) and its neighbor is the amount
the Between option is set to Items. specified in the Distance field.
64 | Getting Started
Integrating items and text
Note: HTML items cannot be forced to wrap by an overlying graphic item. The
Wrap value only affects graphic text in graphic boxes.
Getting Started | 65
Creating horizontal rules To create a text rule
Working with items
1 With the cursor flashing in an HTML or graphic text box, choose Rule
Horizontal rules can be used to visually separate or organize elements or from the Insert menu.
sections of a page. They can also be used to emphasize text or titles, or simply
to add to the visual impact of your page.
Power Tip: Using a graphic path like this allows you to use the range of
effects described on pages 84–87. Freeway 5 Express users, please refer to
pages 87–91.
66 | Getting Started
Linking and unlinking text boxes to After linking your text boxes, a thick red line joining the text boxes will
To link two or more text boxes 2 Place the cursor at the start of the selection, then hold down the S
key and click where you want the selection to end. All the text between
Flow tool the two positions will be selected.
3 Click and drag across the text you want to select.
1 Select the Flow tool in the Toolbar or Tools palette.
2 Click on the first box and then on each subsequent box in the same order
that you want text to flow through the text boxes.
Getting Started | 67
Unlinking text boxes Deleting a text box from the text flow
Working with items
When you delete a text box from the flow, text reflows into the remaining text
Break Flow tool boxes. To do this, simply select the box using the Selection tool, and delete it.
To break the link between two linked text boxes: Cutting/copying and pasting a linked box
1 Select the Break Flow tool. You can cut or copy a text box from a linked series. Cutting a text box from a
2 Click one of the linked text boxes to display the links. linked series is the same as deleting it—the text is not removed from the flow
3 Click on the red line linking the text boxes. but rather reflows into the remaining text boxes.
The box “downstream” (box to which the arrow points) of the link is removed
from the flow of text. Text reflows into the box that was “upstream” of the
removed box. If the upstream box is an HTML item, it will resize vertically to If the box is not linked to a “downstream” box, will be displayed in the
contain the new text. If the upstream box is a graphic item it will display an lower right corner of the box in which you inserted the break, and the text
overflow icon in the lower left corner to show that there is more text in the after the insertion point will disappear from view. You can, however, sketch
box than can be displayed. another box and link to it from the box in which you inserted the break. The
text will automatically flow into the “downstream” box.
Adding a text box into an existing chain
To add a new text box into the chain of text boxes:
1 Draw a new box.
2 Using the Flow tool, click on the box you want to come before the new
box in the chain.
3 Click on the box you’ve just drawn.
4 Click on the box that will follow it in the chain.
68 | Getting Started
Inflow items Creating inflow items
Note: Although Freeway 5 Express does not support CSS layout items, inline
items can still be used to, for example, flow HTML text around an image.
Note: For more information on using CSS items, see Creating CSS layouts on
page 237.
Getting Started | 69
The items that can be created using the Insert menu are: Aligning text beside inflow items
Working with items
◆ HTML Items When inflow items are inserted into a line of text (as inline items), you can
◆ Graphic Items control the position of the inline item relative to the surrounding text. Inflow
◆ Action Items items (including non-inline items such as HTML boxes) can also be floated left
◆ Form controls (Checkbox, Radio Button, Menu/List, Text Field, and Text or right within a text flow.
Area)
◆ Tables
◆ Markup items
70 | Getting Started
Controlling space around inflow items
Inflow items (including non-inline items such as HTML boxes) can also be
floated left or right within a text flow.
Left The inflow item sits flush left in the
column and adjacent text wraps beside it. Freeway 5 Pro allows you to set custom margin values for each side of the
inflow item. Choose Custom… from the Margin popup list, and enter the
desired margin values in the Margins dialog box. This feature is not available
in Freeway 5 Express.
Right The inflow item sits flush right in the
column and adjacent text wraps beside it.
Certain HTML items (including form items and some Action items) do not
have alignment options.
Getting Started | 71
Padding and margins and now we apply a 20 pixel padding to the item:
Working with items
Padding and margins are commonly used to space out elements in your
layout. Padding provides a method to inset an item’s content from its edge,
while margins allow you to insert extra space between an inflow item and
the other content that surrounds it.
Applying padding
Padding can be applied to any item that can contain content. Applying
padding is straightforward—just select the item, and choose a value from the
Padding popup menu on the Item General panel of the Inspector palette, If you look at the Width and Height fields, you will see that they are now
or alternatively enter a value in the Padding field next to it. If you now click both set to 260 pixels. Why have these values been changed by applying
inside the HTML item to enter text, you will see an internal border that gives padding? The answer lies in the way that CSS calculates the size of a box:
visual feedback of the padding that you have set: padding is added to a box’s dimensions, so that a 300x300 box with 20 pixels
padding will be 340x340 pixels when it is viewed in a browser. Freeway
compensates for this by reducing the size of the item to account for the
padding. Overall, your item remains the same size as you designed it to be.
Of course, it is entirely possible that you don’t want to perform a mental
calculation every time you want to work out how large your item will
appear on screen when you publish your site. To make life easier, Freeway
Freeway 5 Pro also provides a Custom… option in the Padding popup—by also includes a Screen Measurements section in the Inspector palette.
selecting this you will be presented with a dialog that allows you to specify This will display the size and position of your item taking into account any
different padding values for each of the four sides of an item. padding that has been applied; for the example above it displays as follows:
72 | Getting Started
As you can see, the dimensions are the correct screen values for when the and then apply a 20 pixel padding to the parent item, the child item will
Padding also affects the position of child items. Just as text is inset when you
apply padding, child items (with the exception of layer items) are inset when
padding is applied to their parent. Layer items are not affected because CSS
positions them relative to the bounds of their parent, irrespective of padding.
In situations where a child’s position is affected by padding, the child’s
position is calculated relative to the inside of the padding (i.e. the inner border
that is shown when you are entering text into an item with padding applied).
So, for example, if we draw a non-layer HTML item and then draw a child
non-layer HTML item within it with the following position/dimension settings:
Applying margins
Margins can only be applied to inflow items—they are meaningless anywhere
else because absolutely positioned items have no surrounding context to space
themselves from.
Applying margins to a child item is straightforward—in many ways identical to
applying padding. Select your child item, switch to the Item General panel of
the Inspector palette, and either enter a value into the Margin field, or select a
value from the popup. Once applied, you will see a dotted border outside the item
giving visual feedback on the margins you have set:
Getting Started | 73
Background colors
Working with items
Graphic and HTML items can have a background color, or fill, applied to them.
(See also Working with color on page 185.)
To apply a colored fill to an item, select it and show the Item General panel
in the Inspector palette. Click on the Color popup menu to choose a color
from those available in your Freeway document. Choose Other… from the
popup menu to choose a new color.
In Freeway 5 Pro background colors can also be applied to HTML and graphic
items using the Styles & Colors palette. Background colors applied to
graphic items can also be made transparent to create special effects when
overlaid on other graphic items on the page. This feature is accessible through
the Item Appearance panel or the Styles & Colors palette.
Note: Freeway 5 Express does not have a Styles & Colors palette.
74 | Getting Started
Applying a background color to an HTML item ◆ Select the item and choose a color from the Color popup menu in the
◆ Select the item and choose a color from the Color popup menu in the
Item General panel of the Inspector palette.
Freeway 5 Pro (left); ◆ In Freeway 5 Pro, you can also apply background colors to HTML items
Freeway 5 Express (right). using the Styles & Colors palette.
Getting Started | 75
Applying a background color to a graphic item The options for graphic item background filters are as follows:
Working with items
There are three ways you can apply background colors to graphic items. Emboss
◆ Select the item and choose a color from the Color popup menu in the
Item General panel of the Inspector palette, as outlined in the section
on HTML items earlier.
◆ Select the item and choose a color from the Color popup menu in the
Item Appearance panel of the Inspector palette.
Angle / Altitude Control the angle and height of the “light source”
Freeway 5 Pro. Freeway 5 Express.
that generates the emboss effect. Changes can be
made by clicking and dragging the control button,
◆ In Freeway 5 Pro, you can also apply background colors to graphic or entering numbers in the text fields.
items using the Styles & Colors palette, as outlined in the section on Global This checkbox, selected by default, ensures that
HTML items earlier. the angle and height information is used across
all similar settings on the current page, e.g.
Background color filters FW 5 Pro only
embossing graphic text, adding a drop shadow
There are three special effect filters that can be applied to a graphic item
effect, etc.
background color.
Specular Controls the percentage of specular highlight.
1 Select the item and choose the Item Appearance panel from the
Higher values make the object look smooth and
Inspector palette.
shiny.
2 Click on the Background disclosure triangle to show the options available.
Diffuse Specifies the percentage of diffuse lighting.
3 Choose Emboss, Blur, or Scatter from the Filter popup menu.
Higher values make the object look rough or
matte.
76 | Getting Started
Blur
Background images
In Freeway 5 Pro, you can apply background images to HTML items. These may
be in any graphic format that Freeway can read. Images that are in a web
format (GIF, JPEG, or PNG), are exported unchanged in their original format
(as pass-through images), unless they are sliced (see below). Other images are
converted to an appropriate web format.
Note: Freeway 5 Express does not allow you to apply background images to
items.
Getting Started | 77
The options for Vertical are: The way in which a sliced background is output depends on the type of item,
Working with items
Tile is the default setting and the level of IE compatibility that is applied to the page on which the item
Top places the image at the top of the item sits:
Center places the image in the center of the item ◆ Table-positioned items are output using a table to hold the background
Bottom places the image at the bottom of the item slices.
◆ CSS items are output using CSS-positioned divs to hold the slices if IE
Sliced background images
Compatibility is set to IE7 or None.
Freeway can slice background images so that they can be used to apply a
border or effect to an item. You will normally want to use an image that has ◆ CSS items are output using a table to hold the slices if IE Compatibility
a framed border and a uniform central area, which may be transparent or is set to IE6/IE7.
semi-transparent.
Note 1: Background images are automatically sliced if a graphic effect is
To create a sliced background image: applied to an HTML box.
1 Apply a suitable background image to an HTML item.
2 Select the Slice Image checkbox. Note 2: Internet Explorer 6 has a number of deficiencies in its support for
There are no tiling options for sliced background images—the central slice of CSS positioning, and is unable to display CSS-positioned slices correctly. If
the image is tiled automatically. you do not need to support this browser, you can set the compatibility level
When you resize an item with a sliced background, the background resizes to IE7 or None for non-table-positioned background slicing.
automatically. This also happens when the item is viewed in a browser.
The content area of an item that has a sliced background is limited to the
central slice—it cannot overlap the borders of the sliced background. Freeway
displays the content area of a selected item as a green or blue dotted line
within the item. (The color depends on whether the item is a CSS or table-
positioned item.) You can also inset the content area to a greater extent by
applying padding to the item.
78 | Getting Started
Borders in Freeway 5 Pro Click on the disclosure triangle in the Border section to reveal more options.
Getting Started | 79
Applying a border to a graphic item
Working with items
1 Select the item and choose the Item Appearance panel from the
Inspector palette.
2 Select the Border checkbox.
This will set a default 1px black border around the graphic item. To change
the color, click on the black color swatch on the right side of the Inspector
palette, as described in the HTML item section described earlier.
Click on the disclosure triangle in the Border section to reveal more options.
80 | Getting Started
The options for graphic item borders are as follows: Filter Provides options to Emboss, Blur, or Scatter
Getting Started | 81
Angle / Altitude Control the angle and height of the “light source” Border: Scatter
Working with items
82 | Getting Started
Borders in Freeway 5 Express Applying a border to a
Getting Started | 83
Graphic effects in Freeway 5 Pro Applying graphic effects to graphic items
Working with items
(For graphic effects in Freeway 5 Express, see 87.) To apply an effect to a graphic item:
Graphic effects can be applied to HTML or graphic items. 1 Select the item and choose the Item Appearance panel from the
Inspector palette.
Applying graphic effects to HTML items 2 Choose an effect from the Effects section.
Graphic effects which are applied to HTML items are output as sliced
There are five effects to choose from: Outer Shadow, Inner Shadow, Outer
background images. You can choose a background image in addition to a
Glow, Inner Glow, and Foreground.
graphic effect—in this case the background image will be composited with
the effect and sliced. You can remove a graphic effect by clicking a second time on the effect icon to
deselect it, or by clicking on the far right of the section header for that effect
To apply a graphic effect to an HTML item:
(Freeway displays a minus icon under the mouse when you move it to this
1 Select the item and choose the Item Appearance panel from the point). It is also possible to disable an effect without removing it: to do this,
Inspector palette. hold down the O key when you move the mouse to the right of the section
2 Choose a graphic effect from the Graphic Effects section. header. Disabled effects are indicated by an eye with a red line through it—
There are six effects to choose from: Background, Border, Outer Shadow, click on this a second time to re-enable the effect.
Inner Shadow, Outer Glow, and Inner Glow.
You can also create effects with rounded corners by setting the Corner Background effect (HTML items)
radius. If you set a large value, border slices will be correspondingly large and
The Background effect allows you to set a graphic background on HTML
you will have a restricted amount of space for adding content. items. In contrast to HTML backgrounds (which are set in the Background
section of the Item Appearance panel), graphic backgrounds can be semi-
You can remove a graphic effect by clicking a second time on the effect icon to
transparent, and can also have rounded corners.
deselect it, or by clicking on the far right of the section header for that effect
(Freeway displays a minus icon under the mouse when you move it to this Color This popup menu lets you choose an existing color
point). It is also possible to disable an effect without removing it: to do this, for the background effect, or choose a new color if
hold down the O key when you move the mouse to the right of the section required.
header. Disabled effects are indicated by an eye with a red line through it— Opacity The Opacity slider sets the transparency
click on this a second time to re-enable the effect. level of the background. The default setting is
100%, and the range is from 0% (completely
Note: if you wish to set a background color on an HTML item that has
transparent) to 100% (completely opaque).
a graphic effect, you should normally use the Background effect (in the
Graphic Effect section) to do this. It is also possible to set a background
color in the Background section of the Item Appearance panel—but this
will color the entire background of the item (including transparent areas).
This also applies to borders: you should normally use the Border effect (in
the Graphic Effect section) rather than the HTML Border option to apply a
border to an item that has other graphic effects.
84 | Getting Started
Border effect (HTML items)
Getting Started | 85
Outer Glow and Inner Glow effects Foreground effect (graphic items)
Working with items
The Outer Glow and Inner Glow effects allow you to apply an inner or outer
glow to HTML or graphic items.
86 | Getting Started
Color This popup menu lets you choose an existing
Graphic effects in Freeway 5 Express
Note: if you wish to set a background color on an HTML item that has a
graphic effect, you should normally use the color popup in the Background
section. It is also possible to set a background color using the Color popup
at the top of the Item Appearance panel—but this will color the entire
background of the item (including transparent areas).
Getting Started | 87
Background effect (HTML items) Shadow effect
Working with items
88 | Getting Started
Glow effect Emboss effect
Getting Started | 89
Scatter effect Lighting
Working with items
90 | Getting Started
Shape effects Period The distance between each peak or trough, from
Freeway 5 Pro.
Freeway 5 Express.
Freeway 5 Pro.
Freeway 5 Express.
It is possible to create an
almost hand-drawn appearance
using the Wobble shape effect.
Getting Started | 91
Crack Period The distance between each crack, from 0px to
Working with items
100px.
Random Makes the cracks appear at random depths.
Gap Varies the gap between cracks, from 0px to
100px.
Depth Varies the depth of the cracks, to a maximum
of 100px.
Freeway 5 Pro.
Freeway 5 Express.
Freeway 5 Pro.
Freeway 5 Express.
92 | Getting Started
Working with text
When working with text, Freeway 5 Pro offers three basic choices: standard HTML text has the following advantages over GIF text:
HTML text, HTML text using Cascading Style Sheets (CSS), or graphic text. ◆ It can be searched in browsers.
Freeway 5 Express offers a simpler choice between HTML text and graphic text. ◆ It is fast to download and can be displayed quickly in browsers.
For HTML text, standard HTML is more compatible with old browsers but it ◆ It can be copied and pasted as editable text.
offers a minimum of stylistic controls. With HTML 4.01 and XHTML 1.0, CSS ◆ It may be accessible to users with special needs.
provides the added bonus of extended text control, while still outputting
◆ It can be resized in the browser (unless a fixed pixel size is specified in
HTML. The idea behind CSS is that if a browser cannot display the designer’s
CSS text).
intended style, it will cascade down the style sheet until it finds something
◆ It is used by search engines to evaluate a page’s content and relevance.
it can display. (See What are Styles? on page 200 for more information about
styles, font sets, and how they are displayed in browsers.) As a result, many designers use HTML text for the majority of a page’s
content, reserving graphic text for distinctive layout elements such as
Note: Freeway 5 Express publishes HTML 4.01 Transitional. Only Freeway 5 headings, logos, and navigation bars.
Pro supports full CSS text control and custom styles.
This section explains how to work with text in a Freeway document. You can
type in text yourself or import existing text from another source. Once you
The only way to make sure that viewers see text exactly as you intend is have text in your document, you can:
by exporting it as a graphic, usually in the GIF format, but this has serious
◆ Copy and paste it.
drawbacks. Viewers cannot search graphic text, nor can they copy and paste
◆ Edit, correct and modify it.
it into documents as editable text. It increases file sizes and is generally
slower to download. Furthermore, viewers with special needs, such as ◆ Search for and replace text strings.
those with visual impairments, may not be able to access your text, while ◆ Check the spelling.
other viewers who may prefer text of a different size or font cannot alter its ◆ Apply attributes and change styles.
appearance in their browsers. Finally, search engines cannot read graphic For information on basic styling of HTML and graphic text in Freeway, see
text, which can affect your site’s ranking. In short, graphic text lacks many Styling text in Freeway on page 197.
of the advantages of the versatility and accessibility of HTML text. (See
http://www.w3.org/MarkUp/ for a discussion of the ideals behind the
creation of HTML and the web. See also http://www.w3.org/WAI/ for a
discussion and guidelines about accessibility for the internet.)
Getting Started | 93
Adding text The style of the new text depends on where you started. If you started typing
Working with text
inside an existing run of text, the new text will have the same style as the
There are several ways to add text to a Freeway document. You can import rest of the run. If no style has been assigned, the new text appears in the
text saved as plain text or as styled text in Rich Text Format (RTF). Freeway default style.
does not currently import text files in other text formats.
Note 1: Freeway 5 Express does not support the saving of custom styles.
To add text:
◆ Type in the new text directly.
Importing a text file using the Import Text command
◆ Import a text file previously prepared in another application.
To import a text file prepared using a word processor or some other application
◆ Paste in text that has been copied to the clipboard from another Freeway and saved in text only format, styled text, or Rich Text Format (RTF):
document or another application.
1 Using the Selection tool, click on the box to select it (if it is not already
◆ Drag text from another application that supports Drag and Drop.
selected).
Typing in new text 2 Click inside the box to position the cursor where you want the imported
To type new text directly into an HTML or graphic box: text to appear.
1 Using the Selection tool, click on the box to select it (if it is not already 3 Choose Import Text… from the File menu. The Import dialog displays
selected). all the available text files.
2 Click inside the box to position the cursor. A flashing vertical bar appears 4 Find and select the name of the file you want.
at the insertion point. 5 Click Open.
The text is imported into the selected box. The new text will take on the style
of the surrounding text, if it doesn’t already have a style.
The text cursor is used to place
text in HTML or graphic item Importing text using drag and drop from the Finder
boxes. In an empty box, the 1 In the Finder, locate the text file you want to import.
flashing insertion point appears 2 Drag the file onto the Freeway document window. The text is imported
at the top left corner. at the pointer position.
A text file can be dragged into a previously drawn box, or straight onto the
3 If there is already text in the box, you can move the insertion point to page. Dragging straight onto the page will make Freeway create a box to
another position, either using the arrow keys or by clicking at the new contain the text. In either case, the box will become large enough to contain all
position. the text, and may cause the page depth to grow to accommodate it.
4 Begin typing. To start a new paragraph, press R.
94 | Getting Started
Importing text using drag and drop from another When text doesn’t fit in a box
Text in a table-positioned HTML item (with a blue outline) will not overflow.
Instead, the item will grow vertically to display all the text it contains. If
As with dragging and dropping text files from the Finder, you can drag text
necessary, the page height will also increase to accommodate the new height
over an existing box or straight onto the Freeway page.
of the item.
Pasting text via the clipboard Text in a CSS-positioned HTML item (with a green outline) will overflow
1 Open the document containing the text you want to insert. unless the item has undefined height. You can choose whether the overflowed
2 Select the text and choose Copy from the Edit menu to copy it to the text should be visible outside its box, or
clipboard. whether it should be hidden, or whether a
3 Place the cursor at the insertion point in your chosen Freeway document scroll bar should be displayed. Generally,
and choose Paste from the Edit menu. CSS boxes which contain text should be set
Choose Paste And Match Style from the Edit menu if you wish the pasted to have undefined height, so that the text
text to adopt the style of surrounding text in Freeway. does not overflow. To do this, deselect the
height button in the Dimensions section
Choose Paste Markup from the Edit menu if you wish to paste HTML
of the Inspector palette.
markup into Freeway.
Getting Started | 95
HTML items that have grown because of text overflow can also shrink
Editing text
Working with text
You can cause the text to “flow” into a second box by linking boxes in a chain Highlighting text using the Selection tool
before or after importing text. For details on how to link text boxes in a chain, Use the following techniques to select text:
see Linking and unlinking text boxes to form a chain on page 67.
◆ Drag the cursor with the mouse button down over a run of text to select it.
◆ Place the cursor over a word and double click to select it.
◆ Place the cursor in a box and press Ca to select all the text in a
“story” (the text in either a box or a flowed series of boxes).
Clicking repeatedly on some text with the selection tool will highlight
different ranges of text depending how many times you click:
Double-click to select a word.
Click three times to select the line.
Click four times to select the paragraph.
Click five times to select the entire story (list block if you’re editing a
list).
You can also use keyboard shortcuts to select text—for more information on
Freeway keyboard shortcuts, see the Appendix on page 442.
Moving text
To move text, cut it to the clipboard and paste it in at a new position. With
this method you can move text from one place to another within a story, from
one story to another, or from one document to another.
Use Paste and Match Style if you wish the pasted text to take on the style
of the surrounding text.
Note: Freeway does not support drag and drop text editing.
96 | Getting Started
Searching for and replacing text 5 Choose from the following options:
Getting Started | 97
Replacing a text string or selection Working with lists
Working with text
You can search for a text string (or occurrences of a highlighted selection) and
then replace it with another string: You can create HTML lists in Freeway. Lists are a special kind of indented
paragraph with a leading bullet character. There are 10 list styles you can
1 Choose Replace… from the Find/Replace submenu in the Edit menu.
choose from.
The Replace dialog box appears.
2 Choose the Range you want to search from the popup menu.
An HTML list as it appears in Freeway (left), and in a browser (right).
3 Enter the text you want to replace in the Find text field.
4 Enter the replacement text in the Replace with text field.
5 Choose from the other available options. These are the same as the
Creating lists
To create a list:
options described for Find earlier in this section.
6 Click Replace to replace the next instance and then stop. Click Replace 1 Select the paragraphs that you wish to make into a list.
All to search the story, item, page, or document and automatically 2 Open the List section of the Text General panel of the Inspector
replace all the instances of the specified text. palette.
3 Click on the Increase List Indent button ( ). This will indent the
Note: You can undo a Replace operation but not a Replace All.
selected paragraphs by one level, making them into an HTML list so that
Freeway then finds and replaces the text. If Keep Dialog Open is selected, each paragraph is a list item within the list. Alternatively, you can use
the dialog box remains open for you to use again. If you have closed the the List entry in the Style menu, or the keyboard shortcut COÂ.
Replace dialog, choosing Replace Next replaces the next occurrence of the To change a list item back into a non-list paragraph, select it and click on
text without displaying the Replace dialog box. the Decrease List Indent button ( ), or use the List entry in the Style
menu, or the keyboard shortcut COÒ.
98 | Getting Started
Nested lists Selecting lists for editing
Note: A list requires a list item to contain it—so Freeway does not allow Graphic lists
you to have a list at indent level 2 without a list item at indent level 1 List styling can also be applied to graphic text paragraphs, whether the text
preceding (containing) it. is contained in an HTML item or a graphic item. The published text will be
output from Freeway as a graphic. For more information about using graphic
Inserting a return into a list item will create a new list item within the current text in Freeway, see Graphic text on page 104.
list block. Typing OSR at the end of a line will create a new list Vertically set graphic text can also be made into lists. For more information
block at the current list depth. on using vertical text, see Vertical text on page 110.
List styling
Lists can be styled in various ways (bulleted, numbered, etc.) A list that has
no styling will default to being a bulleted list — to change the type of list,
simply click within it and apply an appropriate list style.
List styling will not have any visible effect unless it is applied to list items.
The Styles Inspector shows styles from any ancestor list block containing
the whole of the current selection (Freeway 5 Pro only).
Getting Started | 99
Checking spelling Alternatively, you can select one of the other suggestions by clicking it in
Working with text
3 The Language popup menu shows the language currently applied. The
<Use Language Style> option sets Freeway to use the appropriate
dictionary for the language applied to the text. Alternatively, you can
choose to check all of the text against one dictionary. In this case, select the
language name from the popup menu.
When you select encoding for a page, a Meta Tag is added to the document
To export the contents of the current item as a text file, make sure you have to specify the language. The items in the encoding popup show the Internet
an insertion point or a text selection in the item. Then choose Export… from names for these languages. The browser uses this encoding to decide what
the File menu. Fill in an appropriate file name, choose a location on your character set to use for displaying a page—this means that accented
hard drive to save the file, and click Save. characters can be output directly into the HTML (such as “Ö” rather than
The entire text content of the current box will be exported as a text file. “ö”).
The encodings options are also tied in with fonts selected in the Text panel
Language encoding FW 5 Pro only in Document Setup. Each encoding is associated with both a fixed and a
proportional font, which will be used only for display in Freeway. The fixed
and proportional fonts are meant to represent the default fonts used for these
encodings by the browser. To select other fonts for HTML text, you need to use
the Font Sets dialog in the Edit menu to set them.
Checkboxes and radio buttons for Form items use the fixed version of the font.
The same is true for straight HTML text where a fixed font has been specified.
In addition to text in HTML boxes, some other fields (namely the title, alt text
and form items) are also affected by the encoding. This means that on a non-
Roman page (such as Japanese or Russian) the fields can be entered either in
that language or in Roman.
Note: Language encoding is not supported in Freeway 5 Express. Note: For HTML text in a non-Roman language, the viewer’s browser will
require suitable language support to display the page correctly.
The solution is not to force returns but to let the text wrap naturally. The
result is less control, but less damage. If you absolutely need a bit of text to
wrap in a certain way, you’ll have to make it a graphic or use CSS fixed sizes
(Freeway 5 Pro only). Just be aware that if graphic text is used, it is no longer
text when viewed in the browser, and it loses the ability to be recognized by
search engines or copied and searched by users. The best method is to accept
the flexible nature of HTML and work with it. (For a discussion of the relative
merits of HTML and GIF text, see Working with text on page 93.)
In HTML multiple spaces are treated as a single space. If you want them to be
recognized in HTML text, you must use non-breaking spaces. To insert a non- Unlike many HTML-editing programs, Freeway offers the ability to export text
breaking space in Freeway, hold the O key as you type a space. as anti-aliased, web-ready graphics that remain fully editable in Freeway.
This reduces the need to use an image-editing program to create high-quality
Tabs bitmap artwork for publishing on the web.
Tabs are not supported in Freeway, and pressing the T key will simply insert Graphic text can be created in two ways:
a space character. To set tabular information in columns, create a table and
◆ Create a graphic text box that will export as a graphic using the GIF
use the rows and columns to organize the material. For more information on
export format.
using tables, see Working with tables in Freeway on page 251.
◆ Highlight a run of text and apply GIF paragraph or character formats using
Quotation marks the Text General panel of the Inspector palette.
If you want to insert curly quotes (“”) instead of straight quotes ("") in your
HTML text, you must type them manually—press O[ on the keyboard for
the left quotation mark and SO[ for the right one. For single quotes
(‘’), press O] and SO].
Note: Custom styles are not supported in Freeway 5 Express. Styles can still be
applied to graphic text using the Style menu and the Inspector palette. The Typography panel on the
left is for the standard OS X
Typography settings FW 5 Pro only installed TrueType Palatino font;
With OpenType fonts, and also certain TrueType fonts that are installed as that on the right is for an Adobe
standard with OS X, a Typography panel appears in the Inspector palette OpenType font.
when text set in these fonts is selected. This panel gives access to extra
typographic features that may be embedded in the font, such as custom
ligatures, fractions, tabular numbers etc.
Font
You can apply a different font to a run of text using the Font popup menu in
the Text General panel of the Inspector palette or the Style menu. Some
typefaces are available in several different fonts (such as Book, Oblique, Black).
If you want to embolden a word, for example, it’s best to choose a bold font
of the current typeface rather than applying the bold or italic type styles,
especially if the text is to be used at large sizes.
Freeway 5 Pro supports both PostScript Type 1, OpenType and TrueType fonts.
If you have any QuickDraw GX fonts, these are also recognized.
Freeway 5 Express supports only TrueType fonts and PostScript Type 1 fonts.
If you open a document containing text in a typeface for which you have font. Note that choosing a font that is very different in style to the missing
no corresponding fonts installed, Freeway will bring up the Missing font may cause text to overflow in your Freeway document.
Fonts dialog. Clicking the Errors… button opens the Font Problems dialog.
From this dialog, you can choose a replacement for each of the missing fonts This shows a list that contains information about the missing fonts in your
by clicking the Edit… button. document. If you wish, you can save the errors list as a text file by clicking
Clicking the Edit… button opens the Select Font dialog. the Save… button.
Note: If the missing font is required for the document you are opening, you
will need to quit Freeway, activate the font, then relaunch Freeway. This is
because Freeway scans installed and active fonts at start-up, but does not
scan for newly activated fonts while it is running.
Size
You can change the size of a character or selection using the Style menu, or the
Text General panel of the Inspector palette. Freeway also provides keyboard
shortcuts for altering the character size.
Character size values can be between 1 pixel and 3000 pixels.
Spacing
Available type styles include Bold, Italic, Character underline, Word You can uniformly increase or decrease the space between individual
underline, Outline, and Shadow. characters. You can use this to “kern” characters.
The Type Style menu offers these options plus Condense, which closes Character spacing may be altered using the Style menu or the Text General
letters together, and Extend, which spreads letters apart. panel in the Inspector palette. Freeway also provides keyboard shortcuts for
changing the character spacing. See page 442 for a list of styling shortcuts.
Color
You can increase or decrease the character spacing by choosing Increase
You can change character color using the Style menu, the Inspector
Spacing or Decrease Spacing from the Spacing submenu in the Style
palette, or the Styles & Colors palette. Freeway 5 Express does not have a
menu. This changes the spacing by 5% for each selection. If you hold down
Styles & Colors palette.
the O key before choosing the menu, the change will be 1%.
Opacity Applying a spacing attribute, with the “caret” (flashing insertion
You can change the opacity of text to give transparency effects. point) placed between two characters, will kern that character
pair.
Shift
Keyboard shortcut commands for kerning are the same as those used to
You can change the baseline shift of a highlighted run of
control character spacing. The difference is that kerning occurs if the caret
text using either the Shift command on the Style menu or
is simply placed between two characters. Spacing occurs if two or more
keyboard shortcuts.
characters are selected.
Width
Language FW 5 Pro only
You can change the width of text using the Style menu. These values apply
In Freeway 5 Pro, text always has a language associated with it; and you can
an artificial stretch to the characters.
use more than one language in the same document. The default language
Weight (defined as part of the Default fonts using the Text panel of the Document
You can change the typographic weight (boldness) of a character using the Setup dialog box) is automatically applied if you don’t explicitly assign a
Style menu. language to a run of text, in other words leave the Encoding popup menu set
to Automatic.
These values apply an artificial weight to characters. Choose directly from the list
of standard weights displayed in the Style menu, or apply a custom weight. Making sure the correct language is applied to text is important because
Freeway uses the information to identify the correct dictionaries for spelling.
See Checking spelling on page 100.
size applied to the text. For example, 14 pixel leading provides a spacing of 14
You can set paragraph attributes such as alignment, indents, leading, and pixels between the baselines of the text, regardless of the actual point size of
spacing to graphic text with options in the Style menu, and Inspector text in the paragraph.
palette. See Working with styles on page 218 (Freeway 5 Pro only).
You can choose an absolute point size or an automatic percentage. You can
If you are working with text in an HTML text box and choose GIF paragraph also choose Increase Leading or Decrease Leading from the Leading
formatting, your character attributes will also have GIF formatting options. submenu in the Style menu to alter the leading point size by 1 pixel or 10%
This is because you cannot have HTML character formats within a GIF (depending on whether the current leading is in points or percent). If you hold
paragraph. When you select a GIF paragraph, the Format popup menu in the down the O key as you select the menu, the leading will change by 0.1 pixel
Character area of the Text panel disappears and the panel changes to reflect or 1%. You can also use the keyboard shortcuts listed next to the appropriate
GIF character options. HTML character attributes currently applied to the text menu options. Choosing Other… from the Leading submenu in the Style
are translated into their GIF equivalents. menu displays a dialog box into which you can type a custom leading.
Leading Alignment
Leading is the spacing between lines of text. It can be set using the Style You change the alignment of a paragraph using the Style menu or the
menu, or the Text General panel in the Inspector palette. For more buttons on the Inspector palette. To use the Style menu, select the text or
information on leading, see Paragraph attributes: Leading on page 216. place the cursor in the paragraph, choose Alignment from the Style menu
and select the alignment from the list.
The available alignments are Left, Right, Center, Justified, and Force
100% leading Justified.
The difference between Justified and Force Justified is in the spacing of the
words on the last line of a paragraph—Forced Justified spreads the words
to fill the whole line while Justified left-aligns the last line.
150% leading
You can also use the Text General panel in the Inspector palette to apply
alignment. Click on the preferred Align button to choose the alignment.
To set indents using the ribbon, select the text you want to change, then drag
the triangles in the ribbon to your chosen positions for the left, right, and
first line indents. You can only use the ribbon for GIF text. It does not apply to
HTML text.
For more information about using custom styles in Freeway 5 Pro, see What are
styles? on page 200, Working with styles on page 218 (Freeway 5 Pro only).
To set the distance between the text and its bounding box in a graphic text
item, see Integrating items and text: Setting an inner inset on page 65.
If you work with languages which are generally read from right to left, such as To set text in a graphic item to flow vertically, select the item itself; in the
Hebrew or Arabic, Freeway automatically handles the punctuation and direction Item General panel of the Inspector palette, reveal the Other panel if it is
from the input text. For example, in Hebrew text, punctuation defaults to the left of not already showing, select the Vertical Text button . The flow of the text
the paragraph. If you want to override the default setting, select the text and choose will be top to bottom, right to left.
from the Text Direction submenu in the Style menu. This command is available
for HTML and graphic text.
Power Tip: Using the Edit Styles dialog you can set any or all of the GIF
character and paragraph styles just described. Once a style has been set, you
can select a run of text and apply it by clicking the style name in the Styles &
Colors palette. For more information on using styles, see What are styles?
on page 200 and Working with styles on page 218 (Freeway 5 Pro only).
Note: Freeway 5 Express does not support custom styles and does not have a
Styles & Colors palette.
The text direction setting can also be controlled from the Edit Styles dialog
by assigning the text direction to a character or paragraph style (Freeway 5
Pro only).
Note: Text direction also affects the function of D. If text is set right to
left, D removes characters to the right instead of to the left as occurs in
Western formatted text.
Although you can use Freeway’s box-drawing tools to create simple graphic When your web pages are published, Freeway exports graphics as GIF, JPEG,
shapes, you’ll likely want to import images that have been created in a or PNG, depending on which export type is applied to them. GIFs are normally
dedicated graphics program. Freeway can import such images either as used for simple graphics containing a limited range of colors, while JPEGs are
editable graphics (which can be cropped, scaled, combined with other text used for photographic and other continuous-tone images. Freeway usually
and graphics, etc. in Freeway) or as “pass-through” graphics (which are defaults to the appropriate type for each graphic. PNG is not used by default,
exported unaltered). (See To import a pass-through graphic on page 133.) as it is less widely supported by older browsers.
Freeway offers you a variety of image editing and optimization options that
Editable graphics
are normally only found in major graphics editing packages. You can scale,
Freeway 5 Pro and Express can import the following file formats as
crop, and transform images, alter the color palette of GIF and PNG images,
editable graphics:
vary the compression level of JPEG images, and choose “interlaced” (GIF) or
GIF (Graphics Interchange Format) “progressive” (JPEG) display. Using the Graphics Action suite gives further
JPEG (Joint Photographic Experts Group) image editing possibilities (see The Graphics Actions on page 371).
PNG (Portable Network Graphics) )
Additionally, you don’t have to go through a separate process of saving web-
PICT (a standard Mac graphics format)
ready images. Freeway 5 Pro supports the direct import of TIFF, PICT, and
many other standard file formats, which will be converted automatically to
In addition, Freeway 5 Pro can import the following formats:
the correct, web-ready export formats. (In Freeway 5 Express, you can use PNG
TIFF (Tagged Image File format) as an alternative to TIFF if you require transparency support.) You can also
Adobe Photoshop (PSD) optimize the quality-versus-size of your images in Freeway, with real-time
Adobe Illustrator (AI and EPS) visual feedback on the resulting image.
PDF (Portable Document Format)
Freeway can also be used to slice the images on your page if necessary, to
BMP (Windows Bitmap)
make the most efficient, fast downloading pages possible.
EPS (Encapsulated PostScript)
QDGX (a legacy Mac graphics format) Freeway automatically will keep track of graphic source files if you move the
document to a different location on the same disk. In addition, if you move
a Freeway document and all of its associated imported graphics files onto a
different disk and keep the same relative directory structure, you won’t need
to re-import graphics the next time you open the document because Freeway
uses relative paths to locate graphics.
1 Click on a box so that its selection handles are visible, then choose
Graphics in Freeway documents are held in boxes. Together, the graphic and its Import From iPhoto… from the File menu. If the command is not
box are referred to as an “item”. (See Creating items on page 43.) available, check to make sure that there is no text already contained in
You can import graphics into any empty box in Freeway but only GIF, JPEG, the box.
and PNG files may be imported as “pass-through” graphics. 2 Select the album you wish to view from the list of albums on the left.
TIFF or PSD are the preferred formats when importing editable graphics into This will display thumbnails of all the images in that library in the
Freeway 5 Pro, but if you have Freeway 5 Express, PNG or PICT are suitable panel on the right.
alternatives. Unless you want to import a transparent GIF, it is best not to 3 Select the thumbnail of the image you wish to import.
save your file as indexed color before importing it into Freeway, especially if 4 If you decide to import the graphic as pass-through, ensure that the
the image will be combined with other images or possibly exported as a JPEG. Pass-through checkbox is selected.
(See Setting publishing options for items on page 58.) 5 If you wish to import a graphic pixel for pixel (without scaling it in
accordance with its resolution), select the Ignore resolution checkbox.
To import a graphic using the Import command
6. If you wish to set alt text for the imported graphic, you can do so in the
1 Click on a box so that its selection handles are visible, then choose
Alt Text field.
Import… from the File menu. If the command is not available, check to
make sure that there is no text already contained in the box. 7 Click Open (or double-click on the thumbnail).
2 Use the resulting dialog box to find and select the graphic file you want To import a graphic using drag and drop
to import. 1 Select an existing box or create a new box to hold the graphic.
3 If you decide to import the graphic as pass-through, ensure that the Alternatively, you can skip this step, since Freeway will automatically
Pass-through checkbox is selected—this is selected by default when create a box if you drop a graphic onto a blank area of the page.
importing images into HTML boxes and deselected by default when 2 Locate a file on the desktop, in a Finder window or open an application
importing images into graphic boxes. that supports drag and drop, such as iPhoto.
4 If you wish to import a graphic pixel for pixel (without scaling it in 3 Drag the file or graphic over the box in your Freeway document. (As you
accordance with its resolution), select the Ignore resolution checkbox. drag the pointer over different boxes, their borders become highlighted.)
Resolution information is always ignored for pass-through graphics. Alternatively, drag the file or graphic over a blank area of the page.
5 If you wish to set alt text for the imported graphic, you can do so in the 4 Release the mouse when over the appropriate box or page area.
Alt Text field. A box can only hold one graphic. If you try to copy or import a graphic into
6 Click Open. a box that already holds a graphic, the first graphic will be replaced by the
Freeway imports your chosen graphic into the selected box and establishes a second. The second graphic will assume the scaling and orientation attributes
link to the original file. of the previous image. For more information on deleting graphic content, see
Deleting a graphic on page 113.
2 In the Horizontal offset and Vertical offset boxes, enter new values
for the position of the graphic.
3 Click OK.
See also Manipulating items on page 46.
You can center a graphic within its box by selecting the item and choosing You can export any selection of graphic items or entire pages as graphics
Center from the Graphic submenu on the Item menu (see over). You can also using Freeway’s export command:
L-click and choose Center from the Graphic submenu on the contextual 1 Select the graphic items you wish to export or change to the page you
menu. The keyboard shortcut to center a graphic is SCm. wish to export.
2 Choose Export… from the File menu.
L-clicking an
imported graphic
gives access to the
contextual menu
for quickly applying Freeway will choose an output format depending on your selection. A color
transformations. photo, for example, will default to JPEG, but graphic text will default to GIF.
3 If the automatic format selection is not what you want, choose a
different export Format from the popup menu. Choose either Selection
(just the items selected) or Page (all items on the page, complete with
the page background).
4 Enter a name for the exported file and click Save.
Copying graphics to the clipboard 5 An Options dialog box will appear, with options tuned to the format
When you have a graphic contained in a graphic item in Freeway you can copy option selected in step 3.
the item or its contents to the clipboard in a variety of ways. Select the item, and: When exporting items, it’s important to remember that the background color
◆ Choose Copy from the Edit menu to copy the item to the clipboard. of the page is not exported with them. When exporting items as a GIF you
◆ Hold down the O key and choose Copy from the Edit menu to copy may need to select an anti-aliasing color from the Options dialog or give the
the contents of the item to the clipboard as a PICT image—this allows items being exported a colored fill to control the color of anti-aliased edges
you to copy/paste graphic material from Freeway into other applications. and prevent a halo from appearing if the exported image is used on a colored
◆ Hold down the O and S keys and choose Copy from the Edit background. For more information on anti-aliasing, see Preview options on
menu to copy the contents of the item to the clipboard ready to paste page 161.
into another item in Freeway.
The following examples illustrate graphics resized in Freeway. The options The graphic is scaled to fit its box’s
available for the graphic sizing behavior are: larger dimension. The graphic’s
aspect ratio is retained. If necessary,
Preserve Size
the graphic is trimmed to fit its box’s
The graphic dimensions remain smaller dimension.
unaltered, no matter what
happens to its box. This means
that the graphic may be cropped
if its box becomes smaller or may
be padded with white space if its
box becomes larger. This is the
default behavior.
There is also a version of this dialog (without graphics editing options) for
pass-through graphics and plug-in content.
Note: If you select a graphic pasted from the clipboard, or if the original
is on a master page, Freeway displays a smaller version of this dialog box
which omits the file information.
2 Deselect the Alt Text checkbox to turn off alt text generation for the selected
item. The text entry field will disappear when the option is turned off.
Sometimes you may wish to override the automatically generated alt text.
For example, if you have imported a digital photograph the alt text will be In Freeway, file names for graphics and other resources are automatically
generated from its filename, which might be something incomprehensible generated when the site is published. These file names are usually derived
such as “DSCF0002.JPG”. You may also wish to expand the automatic entry to from their associated item names. You can control the names of exported
something more meaningful, such as adding “Click here to email us” to the graphics from the item title, except in the case where graphics are “reused.”
Email button in the example above. When your web site is published, Freeway checks for any identical graphics
across your entire site. If such graphics are found, only one graphic file will
To edit the alt text entry for a graphic item be exported into your site folder. Freeway will then create multiple references
1 Select the graphic box and display the Item Output panel of the to that exported graphic, one for every instance in your site. For example,
Inspector palette. let’s say Freeway determines that you have five identical graphics when
publishing the site. Freeway would then export only one copy of the five into
your site folder. At the same time, Freeway will create five references to that
one graphic in the HTML files that are exported. This reusing of images results
in faster download times for the sites you create. However, because of this
optimization, the exported graphic name will not necessarily be derived from
the item name in Freeway.
Let’s look at the relationship between the title of an item and the name of the
resulting graphic that is generated when the site is published. While working
on a master page, you might define a given graphic item as a banner for the
page and wish it to be called “banner.gif ” on output. To achieve this, the item
is titled “banner” in the Item Output panel of the Inspector palette. When
the site is built, if Freeway determines there to be no identical images, the
2 Click in the Alt Text field and double-click to select the existing text. resulting filename will be “banner.gif.” If there is a non-identical image called
Type the new text you want to appear in the browser help tag and press “banner.gif ”, the resulting filename will be “bannera.gif ” or “bannerb.gif.”
R to accept it. Finally, if Freeway finds an identical graphic prior to encountering “banner,”
the output name will be derived from that first graphic.
Power Tip: The Alt Text field can contain up to 256 characters, so you can
provide very descriptive alt text if you wish. This is can be used to provide Note: Freeway never overwrites graphics (or other resource files) that it has
a reasonable text description of a photograph, for example, so that visually not created; however, it will overwrite HTML files.
impaired visitors to your web site who use screen reader software can get
some idea of what the image shows. Descriptive alt text may also help with
search engine listings.
The range of actual color values used in a GIF file is called the color Interlaced GIF graphics are displayed gradually as the file is downloaded
palette. Freeway allows you to choose from three different color palettes by the browser. Your viewers see the image forming as they wait for the
for your GIF images: full file to download. This setting is on by default. Interlaced graphics may
Adaptive Color values are chosen from the original color have slightly larger file sizes. To disable interlacing, deselect the Interlaced
values in the source graphic. The palette will checkbox. The default for this option may be changed using Document
consist of color values which are closest to those Setup.
in the original image. Anti-alias
Web 216 The colors are mapped to the nearest colors in The Anti-alias option allows you to
the web-safe palette. soften the outlines of GIF text and box
shapes when the browser displays them.
Mac 256 The colors are mapped to the nearest colors in
Anti-aliased text can be difficult to read
the Macintosh system palette.
at small sizes, since the outline of letters
The default color palette for your Freeway document can be set in the is blurred, so you may want to test this
Document Setup dialog. To set the default color palette for all subsequent effect. The Anti-alias option is set to Auto
documents, close all open Freeway documents and choose Document by default, so Freeway will automatically
Setup… from the File menu. Any settings made in the dialog will be applied select an appropriate color with which
to all new Freeway documents. Existing documents will retain the previous to blend text into a background image or
settings. color. Select Off in the Anti-alias popup
Bilinear menu to disable this effect. You can also
The Bilinear option causes graphics to be scaled more smoothly. You might choose a different color against which the
want to turn this option off for some types of line art. text or shape will be blended.
Dither When an image is anti-aliased, its color blends with
Dithering tries to match colors in your graphic using only those available in the fill color of the box that contains it. If an image
the browser. For example, a full color image uses thousands of colors but GIF or graphic text is in a GIF box that doesn’t have a
graphics are limited to a maximum of 256 colors. Dithering provides a way background color, it is exported as transparent, which,
of making your graphic look as though it is using a wider range of colors. On if anti-aliased, can produce an unwanted halo. When you’re using Freeway to
the other hand, dithering will generally increase the file size of your exported export a GIF and you don’t want it to be transparent, make sure its box has a
graphics. Dithering is off by default for GIF graphics. Select the Dither fill color.
checkbox to turn this effect on. The default for this option may be changed in
Document Setup.
When Freeway combines two or more graphic items, the new image takes on
the format and settings of the underlying box. These are displayed in the Item
Output panel of the Inspector palette. This contains an Item section (with Type
and Alt Text controls) and a Combined Graphic section (see the next page for an
Freeway 5 Pro Freeway 5 Express illustration).
An image is exported in PNG format if the PNG option is selected in the Item If the Combine Graphics option for a table-positioned graphic item that
Output panel of the Inspector palette. (Individual pages or selections can
overlaps another is turned off in the Item Output panel, it will cut up the
also be exported in PNG format via the Export… option on the File menu.) underlying graphic item, just as an HTML item would cut it. This issue does
not affect layer-based items.
PNG images have the same export options as GIF images (see Export settings
for GIF graphics on page 123), except that they can also be exported with
millions of colors. Some options are only applicable to images that contain 256
or fewer colors (dithering, palette, number of colors)—these are unavailable if
Millions of colors is selected.
You can prevent two overlapping graphic items combining by selecting one
of the items, switching to the Item General panel in the Inspector palette
and turning off the Combine Graphics checkbox.
Note: The reproduction methods used for this Reference may not be able to
show the improvements made to the graphic we’ve used in our example.
The JPEG format does not support transparent pixels. If you combine graphic
items where the underlying item is set to export as JPEG, or use a non-
rectangular box for a JPEG image, the pixels which Freeway inserts to fill out
the group are opaque and will obscure any background image for this page.
Various areas of
this graphic can be
reduced in quality in
order to improve file
sizes and download
times.
possible to minimize the file size, but to optimize areas of the image that can Inspector palette. At the same time, set the image compression to
use a higher quality setting. JPEG and leave the Quality setting to the default. These image slices will
We will use Freeway to slice the image into separate parts using different compress on export using these settings.
compression settings. To help visualize how the compression settings are
working, and see the output file sizes for the sliced images, turn on Graphics
Preview from the View menu. Now, as we work, Freeway will show the effect
of different settings to the selected image, and show the file size in the Item
Output panel of the Inspector palette.
1 Select the image.
2 In the Inspector palette, switch off the Combine Graphics checkbox.
6 The original poster includes some areas of text. These will benefit from
different compression settings to the Robot. Draw some new graphic
boxes over parts of the words “With Working Laser!” (taking care not to
overlap the boxes making up the Robot), and set their compression to
75% JPEG. These two image portions will compress using these settings.
7 Selecting the main image, we can drastically reduce the JPEG image
3 Now we can select different areas for special treatment. We can either quality. Adjust the Quality slider until the best trade-off between image
choose to select areas to be of higher quality, or choose areas that can be quality and file size is made. We’ve settled on JPEG at 20% quality.
set to lower quality. The choices depend on the image itself. 8 Finally, we will apply some GIF compression settings to the poster’s
4 Use the Graphic tool to draw several graphic boxes that define the head, main heading. We have done this because the original image has some
body and legs of the robot. blurring. The lower number of colors available for GIF won’t be that
obvious, and a JPEG may suffer from some fuzziness.
On the left is part of the final optimized image, compared with the same
image using a 20% JPEG output setting. Note the blocky artifacts in the
Robot, and the noisier heading quality.
Animated GIFs are special GIF images that contain multiple image frames. Pass-through graphics are images that Freeway exports without modifying in
When viewed in most web browsers, the frames are played back, just like any way. You might import an image as a pass-through graphic if you have
the frames in a piece of film. Animated GIFs are widely supported and are an already optimized its color palette in another program (although Freeway’s
excellent way of putting simple animations on the web in a form that can be Adaptive option also preserves existing color palettes). Pass-through graphics
accessed without downloading and installing a custom plug-in for the browser. should normally be in GIF, JPEG, or PNG format, since other graphic formats
Freeway cannot be used to create animated GIFs, but you can import them. are not directly supported by web browsers. If you import other formats (such
Animated GIFs can be combined with other graphic items on output, but this as TIFF or PICT) as pass-through graphics, Freeway will treat them as plug-
can degrade their performance and result in unwieldy files. in content, and web browsers will only display them if a suitable plug-in is
installed—this is true even if the graphic appears in Freeway.
When working with animated GIFs, it’s best to import them as pass-through
graphics or turn off the Combine option for them. This prevents them In general, it is not advised to use pass-through for graphic formats other
combining with other page items and gives better performance. than PNG, GIF, or JPEG. Graphics that are exported in a standard web-ready
format, such as GIF and JPEG, can be viewed in all browsers without requiring
plug-ins. However, graphics that are not already in GIF or JPEG format should
normally be imported into a graphic box, so that Freeway can convert them
to the appropriate format.
To fit the box to the actual size of the imported image, choose Fit Box to
Content from the Item menu. If having done this, the image still does not
appear, it may be that the page itself is too small to contain the image. Make
the page larger using the Page General panel of the Inspector palette to
increase its width and/or height.
Using multimedia It is essential that if you use plug-in content, you inform the visitor what software
they require in order to view it, and then provide links to sites that offer software
Some of the most exciting pages on the web use multimedia items such as for downloading (such as the relevant manufacturer’s site). Unless you do this, you
sound, movies, or animation. If you have multimedia items that you wish to risk causing the visitor extreme annoyance and frustration.
display on the web, you can add them to your page in Freeway in the same Certain formats, such as Flash, allow the author to specify alternative content
way as adding text or graphics—by creating boxes on the page to hold them. for those visitors who lack the ability to view that format. An alternative
Such multimedia content could be created by a wide variety of different image can automatically be displayed.
programs (some are listed later in this section), and generally requires
additional software in the browser to properly display. The additional Note 1: Many modern browsers ship with recent multimedia plug-ins.
software is usually available as a plug-in that extends the browser’s ability to However, while many include Flash or Shockwave plug-ins as standard,
display certain kinds of content. many PC browsers do not include the QuickTime plug-in. It is important
to take this into account when considering including QuickTime-based
Because of this, multimedia content in Freeway is often referred to as “plug-
multimedia content in your designs.
in” content. Plug-in content cannot be previewed in Freeway’s Page view.
However, it will be displayed in Preview mode, which is based on the same Note 2: Some people find that certain types of content, such as content that
“engine” that drives Apple’s Safari browser. It is always best to preview such uses Java to work, can create instability on their system. This can be down to
content in a web browser with the appropriate plug-in installed. problems with the Java Virtual Engine that is installed with their operating
When playing certain kinds of content, such as QuickTime, you can specify system. The web designer has little control over this, so as a general rule it’s
additional parameters using Actions to control how it displays. (See probably best be wary of using content created with and requiring Java to
QuickTime Extras Action on page 339, and QuickTime on page 136 for more run in a web page.
information.) Note 3: Plug-in content will always play on top of other items on the
If you use plug-in content on your web page, it is generally a good idea to let page, even if other layered items are above the box item containing the
the visitor know what they will encounter on the page before it occurs. This plug-in content.
gives visitors the freedom to decide in advance if they wish to view it or not.
Often, such content is quite large, which can be frustrating to download over
a slow connection.
QuickTime
QuickTime is the most common way of creating movie content for
multimedia and the web. Applications like Adobe Premiere or Apple’s
iMovie and Final Cut are used to digitize video and edit it, then save it in
the QuickTime format. QuickTime is also sometimes used for exporting Freeway 5 Pro
animations created in 3D modeling programs.
Freeway 5 Express
Some browsers come with default plug-ins for displaying QuickTime but also
require QuickTime to be installed on the user’s computer. QuickTime movies
To set the parameters for the playback of the movie in the browser, use the
may consist of both sound and pictures, sound only, or pictures only, and are
options in the Item Output panel of the Inspector palette:
normally identified by having “.mov” at the end of the filename.
Controller Causes the QuickTime control bar to appear. If the
Controller button is selected and the item’s box is
then resized to fit the movie by choosing Fit Box
to Content from the Item menu, Freeway will
automatically size the item to accommodate the
controller. The default is off.
Autoplay Causes the movie to play automatically when the
page is loaded. The default is on.
Loop Causes the movie to be continuously replayed. Loop
is set to No by default. If the Palindrome option
How a QuickTime movie appears in the page view, left, with the
is selected, the full duration of the movie will be
Controller setting selected in the Inspector palette. On the right
played forwards and then backwards repeatedly.
is how the movie appears in the browser.
Eolas Workaround When applied to a page containing multimedia
content, will update the Freeway generated HTML so
To import a QuickTime movie, sketch an HTML box. While it is still selected,
that files play seamlessly again. The ability to turn
choose Import… from the File menu. The “Poster” frame of the movie will
off this setting is only available in Freeway 5 Pro.
then appear in the item. The poster frame is the first frame of the movie, or the
Alt Text Determines whether alt text for image items is
frame that’s been set to show as a still image before the movie begins to play.
shown in the browser when the viewer has chosen
not to display images. This option is on by default.
(See Alt text for exported graphics on page 121.)
Freeway 5 Express
Freeway 5 Pro
Note: If you try to import a Flash movie into a graphic item box, the movies
and other plug-in files will appear grayed out in the Import dialog list.
Choose All Files from the Show popup menu to make all items in the list
selectable. Freeway will convert the graphic item box into an HTML item box
on importing the Flash movie.
options in the Item Output panel of the Inspector palette: SVG is an XML-based vector graphics format developed by Adobe in
Loop Causes the Flash file to be continuously replayed. association with the World Wide Web Consortium. In many ways similar
to Flash, SVG supports layers, transparency, raster effects, and scripting.
Play Causes the Flash file to play automatically
Currently, SVG has not been widely adopted, but is still used occasionally as
when the page is loaded.
an alternative to Flash animations.
Quality Four options are available for setting the quality
of the playback of the Flash file in the browser: Most mainstream browsers require a plug-in to support SVG. However, native
Autohigh automatically sets the quality at the
support for the standard is in Firefox 1.5 and above and various other Mozilla-
highest that the browser can handle (this is the based browsers (see http://www.croczilla.com/svg). For more
default setting); Autolow automatically sets information about SVG, see http://www.adobe.com/svg/
the quality at the lowest setting; High forces An SVG file can be imported into an HTML box, but Freeway will treat it as
the movie to be exported at the highest quality; pass-through plug-in content. As such, there is little control over the published
Low exports the movie at the lowest quality. output from within Freeway.
Eolas Workaround See QuickTime above.
PDF
Alt Text Determines whether alt text for image items is PDF (Portable Document Format) is an Adobe format for electronic
shown in the browser when the viewer has chosen documents. Electronic documents created as PDF files can be transferred
not to display images. This option is on by default. via the web for viewing and printing locally. To view or print a PDF file,
(See Alt text for exported graphics on page 121.) Adobe Reader software is generally required, though Apple’s Preview.app
For additional options, applying the Flash Extras Action allows you to edit parts can also read PDFs. Adobe Reader is freely available from Adobe’s web site
of the movie when it is placed in the page, such as modifying the background (http://www.adobe.com) and is often distributed with CD-ROMs and
color, altering embedded URLs, etc. For more information, see page 340. various software products.
PDFs are supported in two ways by Freeway 5 Pro and Express. Firstly,
Director Shockwave
you can use an Action to provide a link so the visitor to your web site can
In order to play Director Shockwave (.dcr) files, it’s best to use the Director
download the PDF or view it within a browser window (if their browser
Action explained in Freeway Actions on page 341. Ordinary Director files (.dir)
supports this). To allow visitors to your site an easy means of downloading PDF
are also supported but their file sizes can be excessively large.
documents, see the Link to PDF Action, explained in Freeway Actions on page
342.
Secondly, Freeway 5 Pro and Express can import a PDF into a graphic box,
and export the resulting image as a JPEG, GIF, or PNG. Doing this treats the
PDF as a normal imported graphic file. Multiple page documents and any
interactivity will not be imported using this method. For more information,
see Managing imported graphics on page 118.
Java applets can be imported into a box in Freeway just like any other
content. You can add additional parameters to the applet in the Extended
dialog on the Item menu. The applet parameters are inserted in the
Parameters section of this dialog. If there is a large number of parameters, it
might be best to insert a Markup box in Freeway and paste the code in there.
You will need to upload the applet separately to the web server. For more
information about adding markup, see Extending the code generated for
specific items on page 306.
Your content may be top notch but it’s of no benefit if visitors can’t navigate When defining a link to a page in the same Freeway document (referred to
through your site. It is essential that you consider navigation as an important as an internal link), it does not matter what the title of the destination page
part of the planning of your site. is, or what the filename of the destination page will be. In Freeway, pages in
To allow the visitor to navigate your site, you must define hypertext links the same document are internally referenced as objects, and internal links are
(hyperlinks). A hyperlink can be applied to a selected run of text or to any box defined as being links to a page object whose title and filename may change
you have drawn in Freeway, with the exception of HTML text boxes. before the site is exported. This provides you with a considerable amount of
freedom and flexibility in the way you create your site, as you can continue
When creating navigation, you can set up links either between pages in the
to change the page titles and/or filenames right up until the site is published,
same document or to external pages and other objects anywhere on the web,
without fear of breaking the links you have carefully defined.
using hyperlinks defined within Freeway. You can also define the browser
window in which your linked file will open. When the pages are published as HTML, the internal links are converted to explicit
references to the actual page filenames as shown in the Inspector palette.
There are many types of hyperlinks and this chapter will introduce you to all
of them. The most important ones to begin with are the links that you create Linking to external pages
between pages in your document. Sometimes you need to define a link to a page that is not part of the same
Freeway document. When you do this, you must type or copy/paste a
Linking between pages in your document
reference to that page into the Edit Hyperlink dialog yourself. To do this, you
Prior to laying out your pages, you should define the structure of your site;
can either refer to the external page with an absolute reference, using its
that is, what pages should be linked and how you want users to be able to
complete URL (Uniform Resource Locator), or with a relative reference, if the
navigate. Defining site navigation often starts when creating the basic layout
destination page is on the same web site as the source page.
of your web pages. To ensure that navigation is consistent and easy is one of
the main tasks carried out when defining master Pages. When entering external references, you must take care that the spelling and
case used for external filenames is exactly the same.
Actually, creating the links to other pages can be done at any stage during
the design process. If the destination page already exists in the document Absolute references
when you wish to link to it, you can simply choose it by name from the list of If you use an absolute reference, this specifies which web server the
existing pages. If the destination page does not yet exist, you can create it as destination page resides on, the exact path to it, and its filename. If you are
you define the hyperlink. This is called linking to a new page. linking to a page that is held on a different web server to the one your source
page is on, you must use the absolute reference, specifying the complete URL.
Here is an example of such a URL:
http://www.robotsfrommars.com/my_folder/page1.html
my_folder, on the web server www.robotsfrommars.com. No matter where index.html which resides in a directory called marketing which is contained
the source page is located on the web, this link will always succeed if the in the top level (or “root directory”) of the same web server. You can move the
destination page remains in the same location. source page anywhere on the web server and the link will still work, but the
Relative references link will not work if you move the source page to a different web server or if
If you use a relative reference, then there is no mention of the specific server you move the directory marketing so that it is no longer in the root directory.
the destination page is on, and the link will assume that the source page It is also possible to have a relative link which includes references to parent
and the destination page are on the same server. This method is of great directories. For example, this would be required to establish a relative link to
advantage if you wish to have the flexibility to move the pages to a different a resource in another directory at the same level. From a page in a directory
location, without having to change the links. called marketing, to a page called sales.html, in a directory called sales, that
For example, if a customer has commissioned some pages and you wish to resides next to the directory marketing:
test them on your own server before giving them to the customer to put on ../sales/sales.html
their own web site, it may well be best to use relative references. Remember Using the double dot (..), it is possible to refer to a higher level directory
that this only applies if the source and destination pages are not part of the without specifying its name. In this case, “..” refers to the directory which
same Freeway document. contains both the sales and marketing directories—we don’t need to know its
Here are three examples of relative references: name.
1 page2.html ../../charts
2 marketing/index.html
This refers to a directory called charts, which is one level higher than the
3 /marketing/index.html sales directory.
The first example would be used to link to a page with a filename of
For more information about managing links like this, see Managing your site
page2.html which resides in the same folder (“directory”) as the source page.
on page 179.
If you move either the source page or the destination page to a different
directory, the link will break.
Example 2 would be used to link to a page with a filename of index.html
which resides in a directory called marketing, which in turn resides in the
same directory as the source page. If you move the source page to a different
location from the directory marketing, then the link will break; but you can
move both somewhere else together.
4 The link will be indicated by blue, underlined formatting for HTML text, OR
by displaying a link icon in the top left corner of boxes, as appropriate.
The link will be displayed, using the page title you have given to it in
Freeway, in the hyperlink area at the foot of the document window when the
linked text or box is selected.
Or:
click on the globe icon at the bottom of the document window.
3 The link will normally be indicated by blue, underlined formatting
for text, or by displaying a link icon in the top left corner of boxes, as
appropriate. The link will be displayed in the status line at the foot of the
document window when the text is highlighted or the box is selected.
For more information about how to change the styling of HTML text
hyperlinks, see Hyperlink styles on page 148.
3 The link will be indicated by blue, underlined formatting for HTML text,
or by displaying a link icon in the top left corner of boxes, as appropriate.
The link will be displayed in the status line at the foot of the document
window when the linked text or box is selected.
1 Highlight the text, or select the box to which you wish to apply the You can remove a hyperlink by highlighting the text or selecting the box in
hyperlink. question, then going into the Edit Hyperlink dialog as above and click the
2 Either: Remove Link button. Alternatively, choose No Link from the hyperlinks popup
choose Hyperlink… from the Edit menu. menu at the bottom of the document window.
Or: Viewing and selecting hyperlinks defined for a page
click on the blue globe button at the bottom of the document window. To view the hyperlinks in a document, choose Show Links from the
3 Select the New Page… button and if you wish, choose a different menu at the bottom of the Site panel. The links defined on each page will
master page on which to base the new page. appear listed below the page. Links are shown as underlined. Clicking any
4 Name the new page and click OK. link shown in the Site panel will select the text or item which bears the link
5 The link will be indicated by blue, underlined formatting for HTML text, and scroll that area of the page into view within the document window.
or by displaying a link icon in the top left corner of boxes, as appropriate.
The link will be displayed in the status line at the foot of the document
window when the linked text or box is selected.
Note: In Freeway 5 Pro, if the page HTML level is set to HTML 4.01 Strict or
XHTML 1.0 Strict link targeting is not possible as it is not valid code for these
output levels.
2 Draw a map area item over each part of the graphic you wish to be a
hot-spot.
3 Assign each map area item a unique hyperlink as described previously.
and path. Freeway creates client-side image maps, which are fully supported
by most modern browsers. When hyperlinks are displayed on HTML text in a web browser, they are
normally shown in color and underlined to set them apart from normal text
Note: If you apply a link to a graphic item that is exported as part of a that is not linked. If you do not specify otherwise, the link colors set in the
combined image, the link will be recreated using an image map in the output. browser will be used.
There are four colors and styles that may be displayed for any piece of linked
HTML text. These are: (1) normal: the color and style of links that have yet
to be visited, (2) visited: the color and style of links that have already been
visited, (3) hover: the color and style of links when the mouse cursor is
hovering over them, and (4) active: the color and style of links when they are
clicked on. Web browsers remember which pages have been viewed in the
past, and by changing the color of visited links they can show visitors what is
yet to be explored.
It is important that link colors contrast clearly against the page background
or the visitor may find it hard to read the text or difficult to make out where
the links on a page are located.
The default colors used by web browsers typically stand out against a white
or gray page background but do not show up well against, for example, a
dark or black background. You must use your judgement, and when you
feel that it is necessary, specify your own colors to be used for linked text.
However, users tend to expect hyperlinks to be blue and underlined.
2 Choose an appropriate color and style for normal links (Link), visited
links (Visited), links that are underneath the mouse cursor (Hover), and
links that are being clicked on (Active).
In Freeway 5 Pro, the underline button has three states: on (dark gray), off
(light gray), and undefined (white). When underlining is undefined, its actual
state is determined by the inherited or default style. To access other link style
options in Freeway 5 Pro, click on the More button.
As you define the navigation between pages in your site, it is essential that The Edit URLs dialog is used to manage the external links used in your
you test it as you go along to ensure that the links go to the correct places and document. It allows you to view and modify the links without the need to
the navigation is smooth. You can do this while previewing the pages in your find each one and manually update it.
web browser but you can also test internal links from within Freeway. Select URLs… from the Edit menu to display the Edit URLs dialog:
At each vertical location which you’d like to become a target destination, In Freeway, you can place an anchor on any run of text in an HTML item or on
an anchor must be defined. When you define an anchor, you do so by giving any graphic item. It is not possible to apply an anchor to an HTML item.
it a name. Every anchor should be given a unique name, so that no two
anchors within the same page share the same name. Each anchor can then be To define an anchor
referenced as the destination of a link by using its name. 1 Highlight the text or select the item you wish to bear the anchor.
2 Choose Anchor… from the Edit menu or press CSa to bring up
Once anchors have been defined within a Freeway document, they will be
the Define Anchor dialog.
available for linking. You start by defining a link, which simply points to the
page itself as normal, but you then have the option to additionally specify
any anchor that has been defined within that page. You can also link to
anchors on external pages.
When defining anchors, it’s usually a good idea to give them descriptive
names. Although it’s often quicker and easier to simply use different numbers
or letters for the names of your anchors, meaningful names can assist visitors
as they navigate your site. 3 Type a name for the anchor.
Meaningful anchor names help visitors to navigate because as the visitor 4 Click OK.
moves the mouse over a link in their browser, the destination of the link will The anchor will now be available in the anchor popup menu when you are
usually appear in the status bar of the browser window, or as a help tag defining links to that page using the Edit Hyperlink dialog.
under the mouse cursor. This will display the name of any anchor specified.
Careful naming of anchors will help the visitor decide whether they wish to Viewing and selecting anchors defined for a page
follow the link.
For example, if you have some HTML text giving contact information at the
bottom of one of your pages, you can create an anchor on the text and give The anchor “fourth page#top”
it the name “contact”. You might link to this contact information from other appears in the links shown for
points on the page or from other pages. “fourth page”.
To view the anchors in a document, choose Show Links from the menu
at the bottom of the Site panel. The links and anchors defined on each page
will appear listed below the page. Anchors and links are shown with an
underline. Clicking any link or anchor shown in the Site panel will select the
text or item which bears the link or anchor and scroll that area of the page
into view in the document window.
To remove an anchor
1 Highlight the text or select the item that bears the anchor.
2 Choose Anchor… from the Edit menu to bring up the Define Anchor
dialog. You should see the name of the anchor displayed in the dialog.
3 Click Remove Anchor button.
The anchor will be removed and will no longer show in the anchor popup menu.
Note: When working with anchors on text, if the text selection is not exactly
the same as it was when the anchor was defined, you may get unexpected
results when editing or trying to remove the anchor. If the selection includes
additional text which was not part of the original selection, you will see
a hyphen (–) indicating that there is a mixture of attributes specified for
anchor. Alternatively, if you do not select all the originally highlighted text,
the anchor will not be completely removed from the page.
3 Using the scrolling list, choose the page containing the anchor to which
you wish to link.
page to which you wish to link and click OK. Email links allow you to define a link that, when clicked on by the user, creates
a new mail message in the user’s email application with the “To:” field filled in
with the details you specify in the Email link. An Email hyperlink is defined by
the mailto protocol.
The name of the anchor takes the form of the page title, followed by a “#”
symbol and the anchor’s name. Encoded email addresses
To remove a link to an anchor Freeway 5 automatically encodes email addresses, in HTML text and in links,
1 Highlight the text or select the item that bears the link. to make them less accessible to spam harvesters. Encoded addresses can still be
read by humans and web browsers, of course, and are a limited defense against
2 Select <None> from the Anchor popup menu in the Edit Hyperlink
more sophisticated spam harvesters.
dialog to remove the link to the anchor, leaving only a link to the page.
Removing items that have anchors attached to them In Freeway 5 Pro, this feature can be turned off using the Output pane of the
Document Setup dialog.
When an item (or text) that bears an anchor is deleted—either directly or by
a page/folder/master being deleted—a dialog will appear warning you that
all links to this item will be removed. Clicking OK will delete the item and
remove all links to it in the same document. Clicking Cancel will leave your
document unchanged.
Meta tags Be sure to define the description and keywords meta tags correctly for the
home or index page for your site, so that you will get the most benefit from
search engines.
Applying meta tags
Unseen by visitors to your site, meta tags play an important role in Should you tag all your pages?
enhancing your site’s effectiveness. The most important use of meta tags is to Opinions differ on whether it is a good thing to add description and keywords
make it easier for potential visitors to find out more about your site and what tags to every page in your site. It is probably best though to define these
it can do for them. Without the correct meta tags to help search engines to tags only for the home or index page. The reason for this is that once your
bring visitors—no matter how well designed your site or how compelling the site becomes live and has been indexed by several search engines, references
content—the chances of making a big impact are greatly reduced. to your site may abound in the outside world and will be largely outside
Meta tags added to an HTML page are not visible when viewed in a browser, but your power to change. This becomes a problem if you subsequently move
they can be seen when viewing the HTML source code. If you are new to web or rename the pages which are referenced by outside agencies, as the links
publishing, it’s a good idea to visit some sites that are similar to the one you are to your site will be broken and people will find it far less easy to get to your
going to design and view their source to see how the designers have used meta pages. The one page which will always be there in the future and whose
tags. You’ll find that successful sites and those created by professional designers name is unlikely to change, is the home page.
will usually have well specified meta tags, whereas those created by novices or Another reason is that you generally want visitors to come through the front
casual web publishers won’t. page so that they will see any new information you have added since the last
There are many potential uses for meta tags, but here are some of the more time they visited.
common ones:
Describing the content of a page. How to add meta tags in Freeway
Listing keywords which relate to the page. Meta tags are added to pages in Freeway using the Meta Tags… command
Storing the name of the author of the site. on the Page menu. If you want particular tags to appear on more than one
Storing the name of the software used in the site creation. page, consider adding the meta tags to a common master page.
Loading a different page automatically. Here is an example of a meta tag:
<meta name="GENERATOR" content="Freeway 5 Pro">
The most important uses are the first two—it is the content and keywords
which have the most effect on the ability of Internet search engines to This tag is added to every page that Freeway 5 Pro creates by default.
correctly store and retrieve your site in response to user queries.
Meta Tags dialog box, which is divided into two parts: User and System to the HTML output for the page.
(HTTP-EQUIV).
Defining keywords that describe your site
You can add new tags to either of these parts using the New…, Delete, and To define keywords for a given page:
Edit buttons.
1 Change to the page on which you wish to include the keywords.
2 Choose Meta Tags… from the Page menu.
3 Click New… to define a new User Variable tag.
description tag to define what the site is about and the keywords tag for
matching the terms used in a search. If someone does a search for “car
Getting noticed on the web
dealer”, then the search engine would list your site based on the above
In the seemingly endless expanse of the web, search engines play an important
entries. However, where your site appears on that list is another point that
role in bringing people to your site. In fact, apart from other methods such as
needs to be taken into consideration.
costly advertising, a search engine is the main way to get those coveted hits.
This short guide will show you how to construct your site to use the search Improving your rank
engines to your advantage and provide a few hints and tips for getting your Having an effective page title (see Page title and file name on page 22 and
site listed. strongly constructed keyword and description tags can help with your search
The four main factors are: engine ranking. To make an effective tag, you need to use a few techniques that
Meta tags apply to a wide selection of search engines.
HTML style attributes Let’s say that we are the car dealer in the previous example and we are
Page content situated in the UK. We would construct our tags to look something like this:
Submitting to search engines Page Title: UK Car Dealer, selling a wide selection of Audi,
Saab, Volvo, and more
Tagging the page Description tag: UK Car Dealer selling a wide selection of Audi,
First, we will talk about tagging the page. To make a site “search-engine Saab, Volvo, Rover, Ford, and many other types
friendly”, you need to have two tags attached to the page: description and and models.
keywords. Adding these is simple in Freeway; simply go to the Page menu and
Keywords tag: UK Car Dealer, audi, saab, volvo, rover, ford,
select Meta tags…. Here you need to add two tags:
renault, bmw, uk cars, cars in the uk, etc.
Description
See Applying meta tags on page 155 for more information.
Keywords
These two tags are used by most search engines as a base for evaluating your
HTML style attributes
Currently, search engines are giving greater weight to HTML text styles, since
site. For example if you were a car dealer, then your description and keywords
meta tags have been abused in the past to falsely enhance ranking. To help to
tags may be similar to this:
improve your site’s search engine friendliness, the use of <h> and <p> tags
<meta name=”DESCRIPTION” content=”Car Dealer selling
is recommended. For more information on using HTML tags in Freeway, see
audi, saab, and other cars”>
Freeway’s Default Styles on page 203.
<meta name=”KEYWORDS” content=”cars, car dealer,
audi, saab etc...”>
UK Plus: http://www.ukplus.co.uk appear with a search engine. When submitting a site to a search engine or
Webcrawler: http://www.webcrawler.com directory, check to see the estimated time, which can usually be found within
Yahoo: http://www.yahoo.com the “Add URL” page in the site’s “Help” section. If it estimates two weeks to list
your site, and it does not appear after this period, leave it for a few more days
Shared databases and submit the site again. If you still can’t get it listed, then go to the help
The above list comprises just a few of the thousands of search engines that section and email the search engine’s “Support” address with your problem.
are available. But remember that if you are listed within the majority of You will be amazed at how helpful they can be.
these, then you are likely to be listed in many other search engines.
For more information on search engines, see:
Many search engines and directories also use other search engines’ databases.
http://www.searchenginewatch.com/
By submitting a site to the “master” search engine database, you will ensure
your listing appears elsewhere. For example, searching with HotBot will Also of interest is:
offer a choice of using Ask or Google; Direct Hit and Lycos both use the Ask http://www.searchengineguide.com/
database, while Net Find uses Google. http://www.thehelpful.com/befound/
Google currently appears to be the most popular search engine, as a search bar
is included as standard in many recent browsers. Although there is a direct
URL submission link system, this simply ensures your web site isn’t missed by
Google’s automated “spiders”. By ensuring your site has good keywords, page
content, and descriptive page titles, it will eventually be “spidered” and entered
into the Google database. Much has been written about how you might be able
to influence the Google rankings, and search engine optimization (SEO) has
become a complete industry in its own right.
Also note that DMOZ—the Open Directory Project—is gaining popularity. This
directory relies on human review of your site submissions within whatever
category you have elected. To be listed by DMOZ is beneficial. Be descriptive
with your site in a directory but don’t just fill it with keywords; you will be
penalized or possibly excluded completely.
Previewing text
If you wish, you may change the default display fonts in Freeway using the
Text option in Document Setup. This way you can approximate what a
visitor will see if their browser is set to display fonts differently from the
default font settings. Remember that many visitors will have increased the
font size in their browser in order to make on-screen text easier to read.
Note: Under normal circumstances, the default settings in the Text section
of Document Setup should not be changed unless there are specific reasons
to modify them.
when your pages are viewed using Windows computers. This is because the you may turn the function off if you wish (see Export formats on page 123).
nominal screen resolution of a Windows computer is 96 ppi (pixels per inch), Freeway offers you the chance to preview what they will be like—without
whereas the typical screen resolution of a Macintosh computer is 72 ppi. exporting the graphics—by turning on the Graphics Preview command.
To preview roughly how your text will look when viewed under Windows if Note: In Page view, Freeway automatically renders graphic fonts with a
you don’t have access to a Windows PC, increase the type size by using the form of anti-aliasing so they appear smooth at various magnification levels.
browser’s controls until the text is as large as it will go. Alternatively, set the Turning on Graphics Preview will cause text and images to appear blocky
font size to 16 pixels in the browser’s preferences. This can give you an idea of at zoom levels above 100%.
where any problem areas may occur on your page, but it is not a substitute
for previewing in a proper PC browser.
Previewing graphics
Anti-aliasing Any text or object to be exported with anti-aliased edges will be displayed
When you publish your page using text or colored boxes as GIF graphics, there is with its edges softened artificially. It is worth turning on the Graphics
a likelihood that any curved or diagonal edges will appear jagged on the screen, Preview to see a more accurate view of your page while you’re creating
owing to the low resolution of the pixel grid used to display computer video. it. It uses a bit more memory than normal to display the page, and slows
This jaggedness is called aliasing and leads to unprofessional-looking graphics. performance slightly, though it’s not normally noticeable.
Professional image-editing software is used to create bitmapped graphics that do When you import any graphic (with the exception of images imported as
not display this jaggedness, using a procedure called anti-aliasing. This method “pass-through”—see Pass-through graphics on page 132), Freeway uses the
smooths jagged edges by blending the colors of the pixels along the edge. original as a basis for a completely new exported version. In the process,
Freeway offers you precise options that can be used to adjust the compression,
interlacing, color palette, and number of colors in the resulting exported
These images have been graphic. However, these options may have a profound effect on either the
magnified to show the effect final file size, the appearance of the resulting image or both; and it’s useful to
of anti-aliasing. have feedback on these two factors when adjusting the options provided.
When adjusting images with the Inspector palette’s Item Output panel
graphics controls, in order to preview the effect of your changes in real-time,
Anti-alias off Anti-alias automatic the Graphics Preview command can be used. When you turn on Graphics
Preview, all the graphics in the page go through the entire export process and
Anti-alias off are then displayed for you in position on the page, just as they would appear
in the browser.
Anti-alias automatic
You can use Graphics Preview to help optimize images in your page. Turn
on Graphics Preview, then make adjustments to the quality level (JPEG), or
number of colors used (GIF and PNG). You will see the effect of the adjustments
in your page, so you can get the quality set for the best looking image at the
smallest overall file size.
At any point while Graphics Preview is calculating, it can be interrupted—
for example, to turn it off again, move elements, or carry out any other
action. However, once it has been interrupted, it needs to restart the process
from the beginning, if you allow it to continue.
In Freeway, when working with table layouts (in Freeway 5 Pro this means
with the CSS button off), it is possible to place an HTML item in front of a
graphic item. When you do this, the HTML item slices the graphic item behind
it, revealing the page background color or background image—this is how
the output will appear in a web browser.
Note: Freeway 5 Express does not support CSS layers and works in table
layout mode only.
Upon publishing your site, Freeway slices the underlying image appropriately On the left is how we might expect
and exports it in sections, holding them together in the HTML. The HTML the previous image to preview in
text will expand in two directions to fill the available space defined by a browser. On the right is what
the size of the HTML box. If the text becomes too large in the browser, the happens when the browser’s text
area occupied by the HTML box will expand. This can cause problems in is enlarged.
some circumstances—as the HTML box expands, it will force apart the cut
segments of the “underlying” image.
You may find that designs will break on Windows PCs even though they
Enabling the HTML Layout option from the View menu can help avoid this
seemed robust at the largest text point size on a Macintosh. This is because,
problem—Freeway displays the cuts made to images (if any) as light blue
on the Windows platform, the font can be set to an even larger size than it
lines; and where an HTML box may potentially cause problems, the danger
can on a Mac. When creating commercial work, it is essential to view your
zone is indicated by red arrows. These arrows indicate the areas where your
pages using browsers under Windows.
design may break if the text size used in the browser is too large.
Note: When viewing under the HTML Layout option, it’s best to switch
off Outlines in the View menu; otherwise, the HTML table outlines could
be confusing.
HTML layout with the CSS button on (Freeway 5 Pro only) is unlikely to
With HTML Layout on,
encounter layout splitting, since each item is held on its own discreet layer
problem areas of overlapping
with relation to other items on the page. (See also Creating CSS layouts
items that may break in a
(Freeway 5 Pro only) on page 237.)
browser are highlighted by
red arrows.
There are two ways to view the HTML that Freeway generates:
When you publish your document, Freeway outputs any pages or images that
◆ Preview the page as normal in a browser. Then from the browser’s View
have been changed since the last time the site was published, ensuring that the
menu, choose to view the source (all browsers use the word “source”,
site folder contains a complete and current version of your site.
even though the command may be worded differently).
◆ Within Freeway, choose a text editor (such as BBEdit) as a browser. Follow
To prevent the site folder from becoming clogged up with out-of-date files,
the procedure for adding a browser (discussed above in Maintaining the Freeway ensures that any files that are no longer needed for the site are
browser list) but choose your text editor of choice. removed each time you publish. If you need to change your site folder at any
point, you can use the Document Setup… command on the File menu (see
In either case, when viewing the HTML, make sure to choose More Readable
Document Setup: Site folder on page 429 for more information). The next time
from the HTML code popup menu in the Output panel in the Document
you preview the site, Freeway will generate a completely new version of all
Setup dialog.
the files. Freeway stores information about what files should be in the site
Note: If you choose a text editor as a browser, make sure to close the file folder using a small file called “_siteinfo” which also resides in the site folder.
in the text editor before attempting to republish the site. If the file remains Site folder information is also stored in the Freeway document itself.
open, Freeway may not be able to overwrite it when you republish changes. When you’re ready to publish your document to the web, Freeway can upload
all the required files to your server.
Refreshing the browser—when the browser
The three commands related to publishing your site are:
misrepresents what’s on the page
Publish updates the site folder with any changes.
Browsers often “cache” images, potentially causing display anomalies when
Preview updates the site folder and loads the current
you preview sites more than once from Freeway. The effect can be most
page in a web browser.
problematic when you are working with frames (see Working with Frames
Upload updates the site folder and then transfers all the
on page 267), rollover, or target images (see Rollovers on page 317). The
required files to your server.
solution is to “refresh” or “reload” the page in the browser.
Whenever you make changes to the original Freeway document, you will need
To do this, choose Reload or Refresh from the browser’s View menu, click
to republish the site using one of the above commands so that these changes
the Reload or Refresh button on the browser’s tool bar or press Cr. You
are reflected in the site folder.
may also have to force the browser to refresh by holding the O key while
refreshing. If this doesn’t work, go to the browser’s Preferences and in the When you change the contents of a page or create a new one, the Site
Advanced section, clear the cache. Quitting and restarting the browser may panel displays a bullet point beside its icon in the palette to show that it
also help. Some browsers let you set the cache to 0MB. needs to be rebuilt.
Power Tip: When working with rollover or target images, you may refresh
the mouseover image in the browser by holding the cursor over the rollover
item and then pressing Cr to refresh the image.
The HTML code that Freeway generates can be customized using the Output
settings in Preferences. You can choose whether to make the HTML more
compact or more readable, and whether HTML tags are output in upper- or
lowercase; you can also set how any layout tables are reinforced and select
the type of line feeds that will be used. You can also do this on a page-by-
page basis using the Page Output panel in the Inspector palette.
Line feeds
Freeway offers three options for the line feed characters it produces: Use the Document Setup dialog to set how readable the published
Macintosh, Unix, or DOS. Selecting the appropriate platform will allow the HTML code is, set the preferred line feeds and whether layout tables
HTML text files to be read more easily. These settings will not affect page are reinforced globally for the whole site.
display in browsers but may be important for CGI scripts and the like.
To set the appropriate line feed characters, choose the Output button in
Document Setup. In the Line feeds popup menu, select the desired
operating system. The default setting is Macintosh.
A site can be uploaded using either File Transfer Protocol (FTP), .Mac or File
Copy. Use the Upload popup menu in the Document Setup or Upload dialog Before you can use the Upload facility to update your active web site, you need
to specify which upload method you require. to tell Freeway where this is located and the upload method you wish to use;
you may also need to enter a username and password. You can do this using the
A site located on a remote server, which can only be accessed over the
Document Setup dialog or the first time you choose the Upload command.
Internet, will usually be uploaded using FTP—this will normally be the
method to use if you rent or receive free web space from a web hosting service The upload settings—including the password, if you wish—are saved with
or from your internet service provider (ISP). your Freeway document. If you set the upload options and then save your
file, they will be retained for future sessions. You will need to enter the upload
A site located on a local volume (or on a server that is accessed using a local
settings again for every new Freeway document you create.
network), or on an iDisk volume other than the Sites folder, must be uploaded
using File Copy. This will normally be the method to use if you have your To set the upload options
own web server or if you will be publishing your site using your own 1 Choose Document Setup… from the File menu. The Document Setup
computer and Personal Web Sharing (or similar software). Like FTP, File Copy dialog appears.
determines any changes to your site and automatically uploads or deletes the
2 Specify the upload settings you require using the options in the Upload
changed files only.
section.
3 Click OK to accept your choices and return to the document.
specifically Freeway Shop (see page 403 for more with a different code, this is interpreted as an error and the
information). login is aborted.
Passive FTP This is an FTP option that you may need to turn on FTP commands can also include <input> or
Mode (PASV) (or off) depending on how the FTP server that you are <password> tokens, which prompt Freeway to display a
uploading to has been configured, and how your Mac dialog asking for user input. For example:
OS firewall is set up. Try turning this on (or off) if you site group <input>
experience problems uploading. 200, 201
would cause Freeway to display a dialog asking the user
Tip: If you find that upload fails for some reason, try toggling Passive FTP
to type the text which should be sent after ‘site group’. If
Mode on or off and then upload again.
the script contains <password> instead of <input>,
Save FTP log This creates a text file which is saved in a Freeway folder this has the same effect, except that the text is displayed
in ~username/Library/Logs/Freeway 5/FTP as bullets on screen and is also hidden in FTP log files.
Logs. This file may be quite large, so unless you want
Only one <input> or <password> token can be
a detailed record of Freeway’s FTP transfers, you should included in each command. There is also a limit of eight
leave this turned off. If you are having FTP problems, tokens for the whole script.
Freeway’s support department may ask you for a copy.
Script In some rare situations, your ISP may require you to
enter certain FTP commands to access your site. Login
scripts contain FTP commands that are sent to the
FTP server after Freeway has logged in with the user’s
name and password. This allows server-specific login
commands to be sent (such as “ACCT” to specify an FTP
account).
Within a login script, each FTP command must be on a
separate line, and the following line should specify one or
more response codes, which the FTP server sends to indicate
that the command has been completed successfully. For
example:
site group test1
200 201
sends the command ‘site group test1’ and waits for the
server to respond with ‘200’ or ‘201’ to indicate that the
◆ From the File menu, choose Upload…, then choose File Copy from the
computer using personal web sharing Upload popup menu.
You can use the personal web sharing built into Mac OS X to host your web site ◆ Click the Select… button and browse to the location where you want to
from your own computer. In this case you upload your site using File Copy. upload the site. In the case of using personal web sharing, this will be to
the Sites folder in your user Home folder.
To turn on personal web sharing You can then access your site using the URL in the form of:
◆ Open the Sharing panel in the Mac OS X System Preferences on your http://xxx.xxx.xxx.xxx/~myname/
computer. where xxx.xxx.xxx.xxx is the IP address of your computer, and myname
◆ In the Services tab, click to turn on Personal Web Sharing. is your user name. This information is displayed in the System Preferences
Sharing panel when you turn on Personal Web Sharing.
Alternatively, instead of using the IP address of your computer, you can use
the local hostname, which is displayed beneath “Computer Name” in the
Sharing panel of System Preferences. E.g.
http://mycomputer.local/~myname/
where mycomputer.local is the local hostname of your computer.
During the upload process, Freeway copies any files which have changed since
the site was last uploaded and deletes any files which are no longer needed.
Files are also uploaded if they have been removed from the server or if their
size and date does not match the size and date of the uploaded files. Files are
not uploaded if they have not been changed.
The upload process is carried out as a background task and the progress
window will stay open even if you bring other windows in front of it. You can
continue editing the document being uploaded, work on a different document
or switch to another application. You cannot publish a document while it is
3 Click OK to proceed with the upload. Freeway will now publish the
being uploaded (the Publish option is disabled), but you may preview pages if
site into the site folder first, to ensure that this is up-to-date with any
they have not been changed since the upload was started (the Preview option
changes made to your document.
is disabled for pages that have been changed).
4 Before uploading, Freeway will ask for your name and password if you
have not entered these in the Document Setup or Upload dialogs. If
you enter your name and password at this stage, Freeway will remember
your name for the duration of the Freeway session but will ask you for
your password each time you connect.
Uploading can be stopped by clicking the Stop button in the progress window or
by pressing the ‰ key when the progress window is at the front of the screen.
Server: ftp.angelfire.com
The following examples show the type of FTP details that you should expect Directory: /
to get from your Internet Service Provider. There is a multitude of ISPs, but User name: your directory / user name (for example, “games/eddiegordo”)
these are a few of the more popular ones. Specifics for your particular ISP will Password: your password
be available from their web site or support department.
Note: When setting up a site with Angelfire, specify a “directory” such as a
AOL type of site (for example, “Games”), which is used in the User name field.
Server: members.aol.com
Directory: (leave this blank)
User Name: ftp
Password: your email address (for example, “me@aol.com”)
You must be logged on to AOL to upload—you cannot upload from another ISP.
Note: With AOL, you should use alphanumeric filenames in Freeway (see
Output: File names on page 431), as some characters, such as quotes and
spaces, are not allowed on the AOL server.
Yahoo/Geocities
Server: ftp.geocities.com
User name: your Yahoo Geocities member name
Password: your Yahoo Geocities password
Directory: leave it blank
For more information, please visit: http://geocities.yahoo.com/
EarthLink
Server: ftp-www.earthlink.net
User: your FTP user name
Password: your FTP password
Directory: leave it blank
For more information, please visit: http://support.earthlink.net/
Select the text or item to which you’d like to link, then bring up the Edit page resides, then you need to preface the file name with a “double dot” and a
Hyperlink dialog. Enter a relative link into the URL field of the dialog, slash: ../ —this means “go up to the folder above”. For example, if you were
replacing the “http://” text if it is a new link. In this dialog, you will have making a link from a page in the Sales folder back up to the home page in
to enter the file name of the HTML file to which you want to link. the folder above, you would enter ../index.html.
The file name is shown in the Page General panel of the Inspector palette If the linked file is in a folder that is in the same parent folder as the folder that
of the relevant page. If the file you want to link to is in the same folder, the source page is in, you need to use ../ and the folder name. So if you were
just enter this file name. For instance, if you want to link to a page called linking from a page in the Sales folder to a page called faq.html within the
Company X Home Page whose file is called index.html, you would Support folder, you would type ../support/faq.html.
enter index.html in the URL field. Generally, you should try to make these kinds of links as infrequently as
If the linked file is in a folder within the folder from which you are linking, possible, as they are more difficult to maintain than internal links within the
you would preface the file name with the folder name(s). Our example same Freeway document. To avoid making too many links across documents,
illustrates a folder called Site Folder, within which is a home page make sure your site is organized in such a way that there is one means of
(index.html) and two folders: Sales and Support. If you were linking entering the Sales section and most of the links within that section are to
from the home page to a page called offers.html within the Sales other pages within the same Freeway document. This minimizes the number
folder, you would type sales/offers.html. of links you need to check and enter by hand. It also makes your site easier
to navigate—for example, if someone wants sales information, they know
that they can find everything they need in that one section without having to
jump around to different sections of the web site.
The URLs… option on the Edit menu allows you to manage these links and
make global changes, and you might also find the Link Map useful.
Before making such a major change to your web site, it’s best to make a backup
of your Freeway document(s) in case you delete anything by mistake. It’s also
a good idea to create some small test documents and practice linking between
them so that you can familiarize yourself with how the process works.
Explorer.
According to current browser statistics, Internet Explorer is the most widely
used web browser—with a market share in 2008 of around 80%. Unfortunately,
Internet Explorer is also the least standards-compliant browser, although
Internet Explorer 7 has improved in comparison with previous versions. This
means that web pages which display correctly in other browsers—and contain
valid (X)HTML and CSS—may be displayed incorrectly in Internet Explorer.
One way in which web designers sometimes adapt their pages to work in
Explorer is by use of so-called “browser hacks”. These exploit bugs in Internet
Explorer’s handling of HTML and CSS in order to fix display bugs without
affecting the way that a page is displayed in other browsers. This approach
has several disadvantages, including the fact that browser hacks depend upon
non-standard or illegitimate use of HTML and CSS.
An alternative approach is to use conditional comments to include code which
is specific to Internet Explorer.
Freeway takes this second approach. If you select an IE-compatible option,
Freeway 5 Pro writes an IE-specific stylesheet which contains style definitions
that are used to work around some of the problems in Internet Explorer.
Freeway also writes some other files which allow PNG images to be displayed
transparently in IE6.
Advanced techniques
Once the essentials of designing and building web sites with Freeway have
been mastered, you will feel ready to learn how to handle colors and text
styles, where and when to use tables, framesets, forms, and how to produce a
flexible layout that doesn’t break in a web browser. Therefore, read on…
Quick Finder
Working with color ............................................................................................................. 185
Styling text ......................................................................................................................... 197
Styles Inspector FW 5 Pro only . ..................................................................................... 229
Creating flexible layouts..................................................................................................... 233
Creating CSS layouts FW 5 Pro only . ............................................................................ 237
Float and clear...................................................................................................................... 247
Working with tables............................................................................................................ 251
Working with frames.......................................................................................................... 267
Working with forms............................................................................................................ 285
Working with color
An important difference between print publishing and web publishing is the Web-safe colors are defined using six possible percentages for red, green, and
method for defining color and the range of available colors. Although many blue. These are 100%, 80%, 60%, 40%, 20%, or 0%. The hexadecimal numbers
computer monitors support thousands or millions of colors, the use of cell that relate to these percentages are FF for 100%, CC for 80%, 99 for 60%, 66 for
phones and other methods of accessing the web is on the rise. The result can 40%, 33 for 20%, and 00 for 0%. These percentages can also be presented as
be an unexpected dithering of colors on the viewer’s monitor, making your red, green, and blue values in Photoshop. The corresponding values are 255,
images look sloppy. 204, 153, 102, 51, and 0.
Freeway allows you to define colors and apply them to your page Shown as a table, the hexadecimal numbers, their RGB Photoshop values and
backgrounds as well as text and other items created on the page. The Color corresponding percentages look like this:
popup menu is the standard way of applying color and appears in various
places in Freeway. Colors can also be applied through the Styles & Colors Hex Photoshop Percentages
palette. FF 255 100%
Note: Freeway 5 Express does not have a Styles & Colors palette, or
CC 204 80%
support the saving of custom colors. More information about using colors in 99 153 60%
Freeway 5 Express can be found on page 196. 66 102 40%
33 51 20%
00 0 0%
Web-safe color
The standard 256 colors differ slightly on a Mac and a Windows PC, so if you
Only 216 combinations of the color values contained in this table are possible
want to make sure that viewers see colors as you intend, then you should
when working with the three color channels Red, Green, and Blue, and these
choose from the 216 “web-safe” colors, especially for flat areas such as fills
combinations provide the 216 web-safe colors. Any color composed in RGB
and background colors for pages. These are defined and offered whenever you
using combinations of the above values will be web-safe and reproduce
need to specify additional colors in Freeway. It is also possible to define colors
without dithering.
outside the 216 web-safe colors.
You can use the web-safe palette when applying an indexed palette to graphic
On the web, colors are defined in RGB, using a hexadecimal (Base 16) system
items set to export as GIF or PNG images. This may result in a dithered or
of numbers. Hex uses the numbers 0 to 9 and the letters A to F to represent the
posterized image but the result will be more consistent when viewed under
numbers 0 to 15.
different conditions than the millions of colors in a JPEG or PNG image. An
adaptive palette gives better results in most cases but is less predictable
because it may contain non-web-safe colors.
Note: Colors, aside from the permanent standard colors (None, Knockout, In Freeway 5 Pro, the Styles & Colors palette provides two color panels:
Black, Blue, Cyan, Green, Magenta, Red, White, Yellow), are always a Colors panel and a Web Colors panel. Switch panels by clicking on their
temporary in Freeway 5 Express. tabs.
Colors listed in the Styles & Colors palette or Colors popup menu can be Anatomy of the Styles & Colors palette FW 5 Pro only
either temporary or permanent:
Styles button Web-safe colors
◆ Temporary colors appear in italic type in the Styles & Colors palette.
(see Defining styles button
Temporary colors are deleted from a document when they are not used. on page 208)
Convert temporary colors to permanent colors to prevent this (see
Making temporary colors permanent on page 195). Custom Options menu: gives
colors button options to create
◆ Permanent colors appear in bold type in the Styles & Colors palette.
new colors and edit
The default permanent colors are None, Black, White, Cyan, Magenta, existing ones
Yellow, Red, Green, and Blue. Knockout is available for graphic text only.
Checkbox to force
Permanent colors remain in a document, even if they are not currently
the custom color to Apply to popup menu
used. the nearest web-safe
color Renamed permanent
custom color
Temporary
custom color
Permanent
custom color
Color list
You can create more colors and add them to the Colors panel in the Styles & To display the Web Colors panel, click on its button in the Styles & Colors
Colors palette. Colors applied to elements of your document are also listed palette.
here automatically. To apply a web-safe color, select the object and click on the color swatch in
Colors shown in bold are permanent, while those shown in plain type are the Web Colors panel. Colors applied to text and boxes are displayed with a
temporary. Colors added to the list as you work or defined from scratch are black outline when the object is selected. Colors cannot be added to the Web
editable—you can change them or delete them from the palette. The default Colors panel, but applied colors are added to the Styles & Colors palette.
colors are not editable. Hover the mouse cursor over a color swatch to show that color’s hexadecimal
value (requires Help Tags to be on in Freeway’s Preferences—see page 424
for more information).
FW 5 Pro only
brings up the Color dialog.
The menu on the Styles & Colors palette offers commands for
managing your colors.
From here you can manage the list of custom colors defined in your
document. For example, you can duplicate or delete an existing custom color,
create new colors or import custom colors from another Freeway document.
Select the box (or with the text cursor in a box, choose Background from the
You can color text and boxes by applying: Apply To popup menu at the top of the Styles & Colors palette) and choose
◆ Existing colors in the document. a color from the Styles & Colors palette or Inspector palette. When the
◆ New colors you’ve created or edited. box is selected, the color is highlighted in the Styles & Colors palette. If you
◆ Colors you’ve imported from another Freeway document. select several boxes filled with different colors, all the selected colors appear
highlighted in the Styles & Colors palette.
You can use the Colors and Web Colors panels in the Styles & Colors
palette (Freeway 5 Pro only), the Color popup in the Inspector palette or Note: If a box has a border applied, it is only possible to change the color by
Freeway’s menus and dialog boxes to apply color. using the Item Appearance panel in the Inspector palette.
You can, for example, simply select an object
and click on a color in either panel of the Note: Freeway 5 Express users can apply color to boxes using the color popup
Styles & Colors palette. (If the Styles & menus in the Inspector palette. See page 196 for details.
Colors palette isn’t already on the screen,
choose Styles and Colors from the Window None and Knockout
menu.) At the top of its window, the Styles Freeway’s colors list includes two special colors: None and Knockout.
& Colors palette has a popup menu, which
can be used to apply color for shadow, glow, None
background, foreground, text, text background HTML and graphic items drawn on the page in Freeway have None as the
and foreground options. These options are contextual, depending on what background color by default. None means there is no color fill applied to the
kind of item is selected. selected item, so it will be transparent and show items and colored items
behind it.
Applying color to text
Graphic text can also be given a fill of None. This can be used in association
The simplest way to apply a color to a text run is to select it and choose
with the Overlay attribute to give the selected text a border but a transparent
a color from the Color popup in the Inspector palette. You can use this
background so that the colors of items behind the text show through.
method to make different words in a box appear in different colors.
Note: The Overlay and Outline effects can only be applied to text while it
is selected.
Knockout can be used to punch text through its container item’s background You can use the Mac OS Color Picker to create a new color and add it to the
color. You can only apply Knockout to selected text; the color cannot be Colors panel of the palette or to edit an existing color. The Color Picker also
applied to graphic items. In this example, we’ve also used the Overlay gives you a choice of color models, which allows you to specify colors in
attribute to outline the word, and applied the Shadow attribute to the item slightly different ways.
that contains the knocked out text.
In order to create a new color, you can type in Hex values or display the Color
Picker. There are three ways to do this in Freeway 5 Pro:
◆ Choose Colors from the Edit menu, click New…, then click on the
Picker button.
◆ Click on the Styles & Colors palette pop-out menu and choose New
Color, or L-click and choose New Color… from the contextual menu,
To create this effect in Freeway 5 Pro and Express: then click on the Picker button.
◆ Click on the Styles & Colors palette pop-out menu and choose Color
1 Draw some graphic items that will become the background to the text.
Picker…, or L-click and choose Color Picker… from the contextual
These can contain photographs, plain background colors, or fills created
menu
using graphic Actions. You can also just use the page background color
or image. The Mac OS X Color Picker window is displayed, showing the available color
pickers. To use the different color pickers, click on one of the color model
2 Draw a graphic item, click in it and add some text. The Knockout effect
icons in the top of the Color Picker window, then select your color using the
works best with bold typefaces.
available controls.
3 Give the text box a color, then select the text and choose Knockout from
the color popup menu.
The text will appear to have been punched out of its container item, and any
background items will show through. Add further effects as you wish.
Note: When using Knockout, the text color Opacity and Filters have no
effect on the selected text.
2 With the Color dialog now displayed, choose a new color. Power Tip: You can edit a specific color quickly by L-clicking it in the
3 Click OK. Styles & Colors palette and choosing Edit Color… from the contextual
menu.
FW 5 Pro only
1 Choose Colors… from the Edit menu, or in the Styles & Colors
palette choose Edit Colors… from the menu. You can import colors directly from other Freeway documents.
2 Select the color you want to remove from the scrolling list. If the color
Importing colors from a Freeway document
can be deleted, the Delete button will be active. You can’t change or
To import colors from another Freeway document, first make sure that they
delete the non-editable colors—these are None, Knockout, Black, Blue,
are permanent colors, then follow these steps:
Cyan, Green, Magenta, Red, White, and Yellow.
1 Choose Colors… from the Edit menu, or in the Styles & Colors
3 Click Delete or press the Backspace or D key. If the color is used in
palette choose Edit Colors… from the menu.
your document, Freeway displays the Select Color dialog box asking
you to select from the scrolling list a color that you want to use in place 2 Click on Import….
of the deleted color. 3 Find and select the document in the File selection dialog box.
4 Click OK.
Freeway imports the colors from the selected document and displays them in
the Styles & Colors palette as permanent colors.
Imported colors are displayed using their original names. If different colors
using the same name already exist in the receiving document, Freeway
displays a warning notice which gives you the options to let Freeway rename
the imported colors automatically, cancel the import, or carry on.
If you click OK, the imported colors may replace colors already in the
document which you would like to keep, giving unpredictable results. If
possible, rename the colors in the original document and they will then
import correctly.
Power Tip: You can delete a specific color quickly from the Styles & Colors
palette by L-clicking and choosing Delete… from the contextual menu.
To use the Color dialog, C-click on the color in the list of custom colors
Select the color to edit from the list and then select the box in the Permanent
in the Styles & Colors palette, select the Permanent box and click OK.
column.
Freeway then changes the color from temporary to permanent and displays
its name in bold in the Styles & Colors palette. It will not be deleted if it is
unused in the document, unlike a temporary color.
Power Tip: To avoid the accidental deletion of a custom color when you delete
items that may use it, create an item on the pasteboard area, apply the color,
then turn off the Publish checkbox in the Inspector palette.
Specifying the appearance of text HTML text, HTML 3.2 FW 5 Pro only
You can specify the appearance of text by selecting it and then using the The fonts are restricted to the standard web fonts, or predefined font sets.
options in the Inspector palette. The options available are divided into Sizes are relative to the default size.
Character settings and Paragraph settings, and depend on whether it is
HTML text or graphic text, and which version of HTML you are generating.
Note: Freeway 5 Express produces HTML 4.01 Transitional code only. The
ability to set alternative HTML levels is a Freeway 5 Pro feature.
Note: For a discussion about the differences between and uses of HTML
text and graphic text, and how to insert and import text into your Freeway
document, see Working with text, beginning on page 93.
With HTML 4.01 Freeway takes advantage of CSS style sheets to provide With graphic text you can use any of the fonts available on your computer, at
additional options, including absolute sizes and indented paragraphs. any size.
You can also apply a wide range of text effects, using the options on the Text
Appearance panel of the Inspector palette.
Note: Freeway 5 Express produces HTML 4.01 Transitional code only. The To change the appearance of text
ability to set HTML 4.01 Strict is a Freeway 5 Pro feature. ◆ Select the text you want to change.
◆ Select the options as required from the Character and Paragraph
panels of the Inspector palette.
Styling text
If you need text in a distinctive font or style within a block of HTML text, you You can also convert a complete paragraph into graphic text.
can convert a selection into graphic text. When you publish the site, Freeway ◆ Position the insertion point in the paragraph and select triple-click to
will convert the section of text into an in-line GIF image. select it.
◆ Select the text you want to create as a graphic. ◆ Click on the text icon at the top of the Inspector palette.
◆ Click on the text icon at the top of the Inspector palette to display the ◆ In the Paragraph section choose GIF from the Type popup menu to
character and paragraph settings. convert the entire paragraph into graphic text.
◆ In the Character section, choose GIF from the Type popup menu to
convert the selected characters into graphic text.
The formatting options will then change to the options for graphic text, and
you can specify the settings as required.
For more information about editing text, checking your spelling and finding
and replacing words in your Freeway document, see Working with text on
page 93.
The formatting options will then change to the options for graphic text and
you can specify the settings as required.
FW 5 Pro only Important Note: Most of the content of this chapter is concerned with
Freeway 5 Pro. Freeway 5 Express does not support creation of styles, so
In traditional DTP and word processor applications, styles are used to control
whilst Express users can style and color text using the Inspector palette,
how the lettering on the page looks.
the creation of permanent reusable styles is not possible. See Styling text on
Sea of probabilities page 197.
Throughout this chapter, we will be making references to probabilities. When This chapter contains examples of HTML created by Freeway. This is included
designing a web site, all we can do is hope that the end user will see what we to give you a better understanding of what is going on when Freeway
have designed. This is down to a good number of factors: generates the HTML. While you do not have to learn HTML to use Freeway, it
◆ The client machine is set to override your settings is helpful to have an idea of what is going on so you can get the most out of
◆ The fonts you specified are not on the client machine the software.
◆ The client machine can only “display” text
This chapter will also discuss some of the deeper issues in web design. Again,
◆ Different browser
this is unavoidable as using styles effectively in any web design application
◆ Different operating system
requires knowing more than just colors and typeface names.
◆ … etc.
Note: “Display” does not always mean “show on a screen”. It can also
mean “read in a synthetic voice” or “translate into Braille”.
Because of this, we cannot be 100 per cent sure that the end display will
represent your design as you intend it. However, as you will learn, using
Freeway’s styles can help improve the chances of conveying your message,
despite the above limitations.
It is also very likely that the client machine will display your text differently,
even if it has the same fonts that you specify. This is due to the way in which
different Operating Systems (OS) display text. You may find in some cases that
different browsers will display text differently on the same OS. Because of this,
you should test your layouts on more than one browser in at least Mac OS X
and Windows to ensure that there are no nasty layout surprises in store.
Styling text
FW 5 Pro only
HTML text is fluid; it can be resized by the user, and it can be read
HTML is basically a text file which contains various bits of information. electronically by search engine spiders that index a site, as well as assistive
HTML is not a document description language in the way that PostScript devices that help those who have difficulty using displays. HTML text can be
is. PostScript is a language that describes all aspects of a page from the styled — we can change the color, font, and size of this text. What we can’t
position of blocks of text and images to any gradients, lines, and fills used. do is make this styling absolute. The user can always override the choices
PostScript is output by applications such as Adobe’s InDesign and Illustrator, made. This kind of text can also be selected in the browser and can be copied
and QuarkXPress, and any other application that has a print button. This and pasted into another application.
information is sent to a printer or image setter which uses the instructions to
HTML text also occupies a small amount of space. It is fast to download and
print the page.
will normally be displayed before any graphics are.
In contrast, HTML is a description of how information is organized. This
information includes text that can be read. It was not designed for the control Serving Suggestions
that one can exert over printed documents. It has been bent into that task The most we can hope to do is suggest to the user’s browser that the text is
by web designers who want more control over the layout of the page and displayed in a particular way (for example Verdana at 11 pixels). The user’s
positioning of items. machine may not be able to display the text for a number of reasons:
◆ The user has set up defaults that override your settings.
CSS
CSS is an acronym for Cascading Style Sheets. These are used to apply styling ◆ The font may not be present on the client machine
to text and layout in an HTML document. CSS can control a good many ◆ The site may be being browsed using a Braille reader or a system that
things: positioning of items, borders around items as well as the appearance reads text using a synthetic voice.
of HTML-based text. ◆ The browser displaying the site may be too primitive to handle layout
instructions (e.g. Lynx)
Classes
In HTML, a class can be used to assign one or more style attributes to a part It should be pointed out that these are likely to be minority users, but
of the page, for instance a block of text or an item. This functionality is remember that minority users have just as much right to view your web site
mirrored in Freeway using Styles. When a Freeway site containing HTML text as those with the capabilities to view everything you care to throw at them.
is published, Freeway generates classes for the Styles used on the page and
What fonts are available?
assigns them to the relevant text or objects in the HTML output. The classes
Freeway offers a very limited set of fonts for use with HTML styles. This is not
are then used by the browser to display text and objects on the page in the
an oversight; Freeway gives you access to the fonts that are most likely to be
way they have been styled in the Freeway document.
on most machines.
You can add to the small list of Font Sets in Freeway. There are fonts that are
used on other machines that may not have been included in Freeway’s default
set of font sets. To create a font set, you need to do the following in Freeway 5
Pro and Freeway 5 Express.
If you want to create a font set that can be used in any document, you need
to do the following with no document open.
1. Select Font Sets from the Edit menu.
3. In the dialogue that opens, give the font set a name. Select the screen
font in the drop down. Its name will appear in the text field below.
You need to add some extra font names yourself manually. These are
fonts that will be used if your selected font is not available on the client
machine. Be sure to include fonts that are more likely to be available. In
this case, we have opted for Helvetica, Arial, Geneva, and sans-serif as
the final fallback. Click OK.
Styling text
FW 5 Pro only
As the majority of visitors to your site will be running Windows in some
form, it is worth checking on Microsoft’s site to see what fonts Windows ships Freeway will insert styles into your HTML at certain points. This is to ensure
with before building a new font set. correct browser display and to preserve the WYSIWYG model, and will not
adversely affect your own styling of the page. These styles will start with an
To find out more about the core web fonts:
underscore (_) character, such as the “_lp” style which is applied to the last
http://www.microsoft.com/typography/fonts/default.aspx
paragraph of text.
httP://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
HTML styles have meaning
Graphic styles HTML’s structural tags have a bearing on Styles. Freeway supports the
creation of tag styles—when a site is output, any HTML text to which they
If you want to ensure text appears in a certain style, regardless of the fonts are applied will be enclosed in the HTML tag specified for the Style.
or browser settings specific to a particular user’s computer, you can use a When you apply a tag style to a block of HTML text, you are doing two things.
Graphic Style. There are some very good reasons to avoid excessive use of The most obvious thing you will see is a change in the appearance of the
graphic text, for example: text: color, size, weight, and so on. These changes will help your site’s visitors
◆ Not readable by assistive devices see any distinctions you care to make when the page is being browsed, and
◆ Not displayed by more primitive browsers (such as Lynx) hopefully will make reading the content easier.
◆ Cannot be indexed by search engines The second change that is made is the way which the information being sent
appears to the browser. By applying a heading style, you are giving that text more
◆ Some browsers may have images switched off
importance than the normal paragraph text, and search engine bots (for example
Note: If you use the Inspector palette to supply useful Alt text for images, Google’s indexing system) will pick up on that when your site is indexed.
some of these issues can be overcome (see page 121 for further details). For example:
HTML will reflect this too: It is important to realize that a <p> tag is created by default. If the <p> tag is not
present, the HTML page could fail validation.
<h1>This text is a heading</h1>
<p>And here is some text underneath which is to do with the <h> styles
heading</p> The <h> tag is used to mark out portions of HTML text that are headers. By
default, these will be displayed bigger and bolder than normal text by the
The <h1> tags around the heading text indicates to the device reading the browser. However, you can define their appearance in Freeway more precisely
HTML that this text has a higher weight of importance than the rest of the to fit in with your site’s design.
text.
The <h> tags are block level tags. They will affect whole paragraphs, rather
So, as you can see, getting styles right not only means that the information than the selected words. As such, they are not substitutes for emboldening
you present is visually well structured, but it will also be structured well for text.
non-visual systems that read your pages. A site with good markup is more
Consider this block of text:
likely to perform well in search engine results, especially if the content of the
text following a header is relevant.
When a style is applied to HTML text in Freeway (or any other modern
HTML editor/generator), two things happen. Firstly, an HTML tag is created,
and secondly, a CSS style is created. The CSS style is used by supporting
So, a block of text with an <h> tag applied to it will look like this in the HTML
browsers to display the text in the way that has been specified. If the browser
source:
can not display the style, or does not support CSS, then it will revert to a
default. However, by creating the tag, the page has been marked up and the
importance of the styled text is evident to the browser and its viewer. <h1>Gustav's Hat</h1>
<p class="_lp">Gustav's hat is brown with a pink feather in it.</p>
Paragraph <p> styles
By default Freeway wraps a <p> tag around the text like this: You will see that the header “Gustav’s Hat” is in an <h1> tag instead of a <p>
tag.
There are six levels of <h> tags, allowing you to create a hierarchy of headings.
<h1> is the most important, whilst <h6> is the least. So, you could have your page
title contained within an <h1> tag, headings on the page as <h2> tags and so on.
The HTML for the above example text looks like this:
These tags help search engines and other non-visual readers to determine the
importance of information on a page, so use intelligently and for maximum
<p>Gustav's Hat</p> impact ensure that the heading is relevant to the text that follows it.
<p class="_lp">Gustav's hat is brown with a pink feather in it.</p>
Styling text
The Emphasis tag usually causes the browser to display the text in italics. All the above options are available to you from within Freeway’s interface.
For example: You can apply them as you would any other style using the Styles & Colors
palette.
Note that Freeway automatically wraps a <em> tag around the word “brown”:
<h1>Gustav's Hat</h1>
<p class="_lp">Gustav's hat is <em>brown</em> with a pink
feather in it.</p>
Again, like the <h1> tag, you can define the appearance of the text more. In
the case above, simply italicizing the text will be enough.
Strong
This tag by default causes the browser to embolden the text it’s applied to.
For example:
In the above example, an extra <h1> style has been defined, in addition to
those supplied in the default Blank template. You apply these to selected text
just as you would any other style. Freeway will then create appropriate CSS
and HTML.
The HTML produced looks like this:
<h1>Gustav's Hat</h1>
<p class="_lp">Gustav's hat is <em>brown</em> with a
<strong>pink</strong> feather in it.</p>
The word “pink” has a <strong> tag wrapped around it. Again, you can
change the appearance of the text beyond simply emboldening it using
Freeway 5 Pro’s Edit Styles dialogs.
FW 5 Pro only
Styles can be applied to an HTML box.
HTML text boxes and tables can have a default <p> style attached to
them. Simply select the item as normal and click on the style’s name in the <div id="item1" class="BodyText" style="position:absolute; left:9px;
inspector palette. The item will then get that style as the default style for any top:9px; width:266px; height:55px; z-index:1">
HTML text it contains. <p>Gustav's hat was blown away by the wind and landed in a puddle.</p>
<p class="_lp">"Oh, bother," said Gustav.</p>
</div>
Pages
A page can be given a default style. To apply the style to a page, select
The above code shows the HTML created when applying a style named
the page in the Site panel (it has to be highlighted) and then click on the
BodyText to a CSS positioned HTML box. The style is named as a class in the
style name.
DIV tag, with the <p> tags having only Freeway’s default styles (where
needed).
Tables
A style can also be applied to whole tables. Select the table as normal, and
click on the style’s name in the Styles & Colors palette. In HTML <tr>
means a table row, and <td> means a cell within that row.
In the above code, the table gets a class “BodyText”. All default text within the
table will have this style as its default.
Styling text
You can apply a default style to a table cell or group of table cells. Simply
select the cells as normal, and click on the style’s name in the Styles & <table class="TableStyle" border=1 cellspacing=0 cellpadding=0>
<tr>
Colors palette. <td class="TableHeader" width=111 height=27 valign=middle
bgcolor="#ffffcc"><p class="_lp">Header 1</p>
<table border=0 cellspacing=0 cellpadding=0> </td>
<tr> <td class="TableHeader" width=111 valign=middle
<td class="BodyText" width=282 height=50 valign=top><p bgcolor="#ffffcc"><p class="_lp">Header 2</p>
class="_lp">Gustav's hat was blown away by the wind and landed in a </td>
puddle.</p> <td class="TableHeader" width=111 valign=middle
</td> bgcolor="#ffffcc"><p class="_lp">Header 3</p>
</tr> </td>
<tr> </tr>
<td width=282 height=50 valign=top><p class=_lp">"Oh, <tr>
bother," said Gustav.</p> <td width=111 height=27 valign=middle><p class="_lp">Item
</td> 1</p>
</tr> </td>
</table> <td width=111 valign=middle><p class="_lp">Item 2</p>
</td>
<td width=111 valign=middle><p class="_lp">Item 3</p>
In this case, the style “BodyText” has been applied to one of the table cells. </td>
</tr>
<tr>
Table rows or columns <td width=111 height=27 valign=middle><p class="_lp">Item
Styles can be applied to a row or column. Simply select the row or column 4</p>
as normal, and click on the style name in the Styles & Colors palette. The </td>
<td class="TableSub" width=111 valign=middle><p class="_
style will be applied to all the table cells in that row or column in a similar
lp">Item 5</p>
fashion to the example given above. </td>
<td class="TableSub" width=111 valign=middle><p class="_
Advantages lp">Item 6</p>
</td>
Applying styles to items like the previous examples means less bulky code; no
</tr>
extra style definitions need to be defined in the <p> tag. </table>
FW 5 Pro only
Freeway will build temporary styles whenever you apply styling attributes to
The Styles & Colors palette can display text using the Inspector palette if it does not already have a style with those
permanent styles or both permanent and attributes. Temporary styles exist only as long as text with those attributes
temporary styles. exists. Their names are shown in the Styles & Colors palette in a regular font
The Edit Styles dialog covers both CSS weight.
styling and graphic styling at the same time.
Attributes that are peculiar to one or the other Permanent styles
type of text will be labelled as such in the edit Permanent styles are those styles that have been marked by the user as styles
styles dialogue. that should always be available, even if that style is not used in the site.
Permanent styles are set in the Edit Styles dialog window, and the names
Most of the effects listed here can also be
are shown in bold.
applied in the Inspector palette. Freeway 5
Express users will not be able to define styles, Style definition
but they will have access to most of the effects You can define styles in a number of ways. The most obvious way is to select
listed here. the text in Freeway and use the Inspector palette to change the attributes
The information here covers CSS. CSS is not available in HTML 3.2, which of the text. If you want to make the style permanent, select the text and use
is included for backwards compatibility purposes. If you want to use CSS the Styles & Colors palette to make the style permanent (and even give it a
styling, you should be using HTML 4.01 or XHTML. more meaningful name).
Note: The Styles & Colors palette and Edit Styles dialog are only
However, this is not the most satisfactory way to define a style, nor is it the
available for Freeway 5 Pro. Freeway 5 Express does not support defined best if you want to include meaningful mark-up in your HTML. The best way
reusable styles. to define a style is via the Edit Styles dialog.
Styling text
FW 5 Pro only
You need to give your style a name. Make the name meaningful, so you know
Go to the Styles… option in the Edit menu. A new window will open for what it is when you come to use it on the site. A good idea to is to use a name
you. It will look something like the image below. that is descriptive of the style’s function, so you may want to name the text
that is applied to the body text of your site BodyText. Note that style names
can not have a space in them.
As discussed previously, you can also make Freeway output a tag around
the text as well as styling information. So, in our example BodyText will be
applied to most of the text on the page, so we can select the <p> tag in the
Tag popup menu. If you wanted to make an <h1> tagged style, then select
h1 in the Tag popup menu.
Adding attributes
You can add different attributes to
the right hand panel by clicking the
button. This gives you a menu of
attributes from which you can pick the
ones you want. If you want to select
Down the left hand side is the list of defined styles in your document, and to
more than one at this stage, click the
the right is the area where you will be creating your style.
Select button at the bottom of the
There is a View popup menu at the bottom of the window that lets you see dialog box, and select those you want.
either CSS Attributes, Graphic Attributes, or both. Showing both allows you Click Select again to return to the main
to define styles that can be applied to both HTML and graphic text. If you are style editing view.
defining a style for just HTML text, you can just show the CSS attributes.
CSS and HTML styles are defined using the same dialog. In most situations,
it is possible to define a style that can combine both graphic and HTML text.
However, if you want to create a style for just HTML text, or one for use solely The following section describes the various options available in the Edit
Styles dialog.
on graphic elements, then you can use the View popup menu to select which
attributes you want to see.
FW 5 Pro only
Font
This changes the background color of the text.
Image
You use this option to select the fonts to use in the style. The fonts available
are limited to the font sets that have been defined to allow for maximum
compatibility with other machines on the Internet. The Graphic drop down You can also have your HTML text use
allows you to select any font on your machine. This will only be used when a background image. When applied,
the style is applied to graphic text. you can select various tiling options.
Size
This allows you to define the size of the font using a number of different Note: Note that Freeway can not display this effect in the page layout. You
methods. Note that the item marked Graphic will only apply to styles applied will need to preview the page to see the effect.
to graphic text.
Color
Styling text
or scatter filter. See page 213 for filter settings.
Graphic effects can be used to enhance the appearance of graphic text.
To apply an effect to graphic text:
Background
The Background effect allows you to set a background on which the text will
1 Select the text and choose the Text Appearance panel from the be drawn.
Inspector palette.
2 Choose an effect from the Effects section. The above text has a red
There are five effects to choose from: Normal, Background, Shadow, Glow, background set to 50%
and Overlay. opacity. The yellow box
is positioned behind the
You can remove a text effect by clicking a second time on the effect icon to
word TEXT.
deselect it, or by clicking on the far right of the section header for that effect
(Freeway displays a minus icon under the mouse when you move it to this
point). It is also possible to disable an effect without removing it: to do this,
Color This popup menu lets you choose an existing
hold down the O key when you move the mouse to the right of the section
color for the background, or choose a new color if
header. Disabled effects are indicated by an eye with a red line through it—
required.
click on this a second time to re-enable the effect.
Opacity The Opacity slider sets the transparency
Normal level of the background. The default setting is
The Normal effect allows you to set a text color, along with other attributes 100%, and the range is from 0% (completely
such as outline and background filter. transparent) to 100% (completely opaque).
Shadow
Text with the Emboss The Shadow effect allows you to add a drop shadow to text.
filter applied.
Example of the
Color This popup menu lets you choose an existing color Shadow effect.
for the text, or choose a new color if required.
Opacity The Opacity slider sets the transparency level
of the text. The default setting is 100%, and the Color This popup menu lets you choose an existing color
range is from 0% (completely transparent) to for the shadow effect, or choose a new color if
100% (completely opaque). required. The default shadow color is Black.
Draw Choose whether text is drawn solid, or with an
outline, or solid and thickened.
the shadow. The default setting is 75%, and the from the text, from 0 (default) to 10.
range is from 0% (completely transparent) to Blur The slider controls the amount of blur, from 0 (no
100% (completely opaque). blur) to 20 (very blurred).
Angle Control the angle of the “light source” that
generates the shadow effect. Changes can be made
Overlay
by clicking and dragging the control button, or
entering numbers in the text field. The Overlay effect allows you to add an overlay layer to text. This is useful
for creating outlines and other effects.
Global This checkbox, selected by default, ensures that
the same angle information is used for other
global effects on the current page. The Overlay
Offset The slider controls the amount the shadow is offset effect in action.
from the text.
Blur The slider controls the amount of blur, from 0 (no
blur) to 20 (very blurred). Color This popup menu lets you choose an existing color
for the overlay effect, or choose a new color if
Glow required.
The Glow effect allows you to add a glow to text. Opacity This slider sets the transparency level of the
overlay. The default setting is 75%, and the
range is from 0% (completely transparent) to
Example of the
100% (completely opaque).
Glow effect.
Draw Choose whether the overlay is drawn solid, or
with an outline, or solid and thickened.
Color This popup menu lets you choose an existing Filter This popup allows you to apply an emboss, blur,
color for the glow effect, or choose a new color if or scatter filter to the overlay. See 213 for filter
required. The default glow color is Red. settings.
Opacity This slider sets the transparency level of the
glow. The default setting is 75%, and the range
is from 0% (completely transparent) to 100%
(completely opaque).
Styling text
There are three filters that can be applied to graphic text with normal and/or
overlay effects. Freeway 5 Express
Emboss Graphic effects can be used to enhance the appearance of graphic text.
Angle / Altitude Control the angle and height of the “light source” To apply an effect to graphic text:
that generates the emboss effect. Changes can be 1 Select the text and choose the Text Appearance panel from the
made by clicking and dragging the control button, Inspector palette.
or entering numbers in the text fields.
2 Choose a graphic effect from the Effects area.
Global This checkbox, selected by default, ensures that There are four effects that can be selected in various combinations: Outline,
the same angle and height information is used Shadow, Emboss, and Scatter.
for other global effects on the current page.
Specular Controls the percentage of specular highlight. Outline effect
Higher values make the object look smooth and The Outline effect allows you to set an outline on graphic text.
shiny. Color This popup menu lets you choose a color for the
Diffuse Specifies the percentage of diffuse lighting. text fill that is used to create the outline effect.
Higher values make the object look rough or Opacity The Opacity slider sets the transparency level
matte. of the text fill that is used to create the outline
Blur The slider controls the amount of blur, from 0 effect. The default setting is 100%, and the
(no blur) to 20 (very blurred). range is from 0% (completely transparent) to
100% (completely opaque).
Scatter The slider controls the amount of scatter, from 0
(no scatter) to 20 (very scattered). Shadow effect
The Shadow effect allows you to add a drop shadow to graphic text.
Color This popup menu lets you choose an existing color
for the shadow effect, or choose a new color if
required. The default shadow color is Black.
Opacity The Opacity slider sets the transparency level of
the shadow. The default setting is 75%, and the
range is from 0% (completely transparent) to
100% (completely opaque).
Offset The slider controls the amount the shadow is offset
from the text.
The Emboss effect allows you to create an embossed appearance for graphic Shape effects can be applied to graphic text. They modify the basic shape of
text. the text characters by adding a crack or wobble.
Specular Controls the percentage of specular highlight. Wobble
Higher values make the object look smooth and
shiny.
Diffuse Specifies the percentage of diffuse lighting. Higher The effect of
Wobble.
values make the object look rough or matte.
Scatter effect
The Scatter effect allows you to create a scattered appearance for graphic
text.
Radius The slider controls the amount of scatter, from 0
(no scatter) to 20 (very scattered).
Lighting
Angle / Altitude Control the angle and height of the “light
source” that generates the shadow and emboss
effects. Changes can be made by clicking
and dragging the control button, or entering
numbers in the text fields. Note that any
changes that are made to lighting are global—
they affect everything on the current page that
has a shadow or emboss effect.
Selecting the Wobble effect in Freeway Pro (left) and Freeway Express.
Styling text
amount, from 0px to 100px.
Smooth Varies the smoothness of the wobble, from 0% Paragraph attributes force Freeway to create styles that will apply to a whole
(sharp) to 100% (smooth). paragraph. Even if one word is selected when the style is applied, the whole
paragraph will be styled.
Crack If you create styles that generate tags, some will force this behavior as the
behavior of those tags will be the same as the paragraph tag. The most
obvious example are the <p> and <h#> tags.
There will be times when you want a graphic style to be applied to a whole
paragraph of text, or that you want to force the creation of a paragraph.
Setting this attribute lets you do this. Note that the graphic text will still be
rendered as an image, and not as HTML text.
Align
This allows you to set the alignment (and justification) of the text. Most of
these options are available for both graphic and CSS based styles, with only
one—force justify—being available only for graphic styles.
Selecting the Crack effect in Freeway Pro (left) and Freeway Express.
This lets you create list styles that can be applied to list items. Note that list This will indent the first line of the paragraph to which the style is applied.
styles will not have any visible effect unless they are applied to list items. (See The indent can be defined in pixels, or ems.
page 99 for list styling.)
Left Indent
This will indent the left side of the paragraph to which the style is applied.
The indent can be defined in pixels, or ems.
Right Indent
This will indent the right side of the paragraph to which the style is applied.
The indent can be defined in pixels, or ems.
percentages or pixels.
Leading refers to the space between lines If you are using HTML 3.2, a lot of the CSS options will not work for you. This
Ay
including the space occupied by the type. So, setting allows you to indent HTML 3.2 text.
applying leading of 100% to 12px text will
mean that there are no spaces between lines.
Leading of 14px applied to 12px text means
that the lines will be 2 pixels apart.
Styling text
FW 5 Pro only
When starting a new site, it is best to think about the styles fairly early on.
This allows you to define the space that precedes a paragraph. The size can be Even if you change a style’s appearance later on, you can still use it during
fixed (in pixels) or relative (as a percentage). the early design stages.
Apply sensibly
First, apply the main “foundation style” to all your text. Then apply the other
styles to places where they are needed. This structural construction will help
keep your HTML clean, but it will also help with the ordering of the site and
will make style changes easier in the future.
The power of styles is that you can change a lot of effects very simply. Let’s Note: Freeway 5 Express does not support custom styles.
say that your client suddenly wants all the main body text on the site set in
Helvetica instead of Verdana. Instead of visiting every text block and changing When working with formatting options, it is useful to note that attributes fall
the style manually, you need only open the Edit Styles dialog and change the into two categories:
typeface in one style. Click the OK button and… ◆ Character attributes such as font and size—which can apply to a run
…all the text changes in one go. All that is needed is a quick check on each of text of any length, even to a single character.
page to ensure that the text is flowing logically, and you are all set to publish ◆ Paragraph attributes such as alignment and interlinear spacing (and
and upload. So how does one achieve this? also font attributes)—which apply to entire paragraphs.
In Freeway, you can apply attributes directly to selected text, but this can be
Define BodyText slow and tedious work if there are several attributes applied to similar pieces
Start by defining your BodyText style. This would be a paragraph, and would of text that appear throughout a document.
define everything—text size, leading, font, color. This style would be applied
To save time and effort, a set of attributes may be saved as a style, and
to every block of HTML text that you enter. You could even set it as a default
applied in one step to any piece of text that you want to look this way.
style on any HTML boxes on your master Pages.
Applying styles to text gives a consistent look to your document.
Define ancillary styles For more information about using styles in Freeway, see What are styles? on
Next, you would define your italic, bold, and other similar styles. This time, page 200.
you would only need to use the Italic and Bold Style attributes, and nothing Freeway generates styles on the fly as you work, which saves you the effort
else. To earn extra points, set the style to define emphasis and strong tags. of creating your own styles from scratch. Freeway also offers both character-
level and paragraph-level styles, so that you have all the advantages of styles
Apply your Styles
for words and individual characters as well as entire paragraphs.
Now apply the styles as normal. If you need to make a change, such as the
typeface you need only alter the BodyText style. Basic concepts about styles
This working method can be applied for most attributes—color, size, leading, This section introduces the basic concepts you’ll need to understand for
and so on. It can be used equally effectively with graphic styles as well as working with styles.
HTML styles. Making global changes such as this is one of the major strengths
of Freeway. Methods of creating, applying, and changing styles
There are several ways of working with styles in Freeway:
◆ You can alter the character and paragraph attributes of an individual
run of text, using either the Text panel of the Inspector palette or the
Styles menu. Each time you alter a text attribute using one of these
methods, a new temporary style is created in the Styles & Colors
palette. New styles are only created for unique sets of attributes.
Styling text
HTML and graphic text styles FW 5 Pro only
use the existing style.
The formatting attributes available differ somewhat for HTML and graphic text.
◆ You can change the definition of an existing style, using the Edit Styles When defining a style, you may select HTML or GIF attributes. However, taking
dialog box, and therefore alter the appearance of all text in the document a style defined with one set of attributes for export in one format and setting it
that currently uses that style. to export as the other format will lead to different results—only the attributes
◆ You can change the appearance of selected text by applying a different relevant for the export format already chosen for the text will be applied.
style from the Styles & Colors palette.
◆ You can define a completely new style using the Edit Styles dialog box [No Style] and other default styles FW 5 Pro only
and then apply it to text using the Styles & Colors palette.
The Styles & Colors palette shows you which styles currently exist within
a document and which ones are applied to selected text. You can also use the
Styles & Colors palette to apply different styles to text.
The Styles & Colors palette contains some predefined styles: em, h1, h2,
h3, p, and strong. These are default CSS tags and styles. You can edit these
styles if you wish. For a discussion about these default styles, see Freeway’s
default styles on page 203.
Styles can be either temporary or permanent. Every time you change a In a new document, you’ll see [No Style], em, h1, h2, h3, p, and strong
character or paragraph attribute in a run of text, a temporary style is listed in the Styles & Colors palette.
created. This style only exists while it is in use (applied to one or more text When you first type text into a new document, it has [No Style] applied
runs). If the text is deleted or the attributes changed, the style is removed. to it, although the style is not highlighted in the palette. Because it has no
For example, if you type a word and then change its font, you’ll create a character or paragraph attributes set explicitly by the user, it draws its
temporary style called “style1”. If you then change the font size of that word, attributes from the Default style. Generally speaking, it is best to leave this
“style1” will disappear and you’ll create a new “style2”. style set to the defaults in the Document Setup dialog. (See Freeway’s
default styles on page 203.)
However, you can make a style permanent so that it remains in the document,
regardless of whether it is currently in use. Temporary style names appear
in plain text in the Styles & Colors palette, while permanent style names
appear in bold.
FW 5 Pro only
You can create both character and paragraph styles. Character styles contain
attributes, which can be applied to an individual character, for example, font,
size, style, and color. Paragraph styles include attributes such as alignment,
leading (the vertical space between lines) and indents and are shown in the
Styles & Colors palette with the “¶” symbol.
Styling text
FW 5 Pro only
The Styles & Colors palette displays all the styles currently in use within a palette to highlight the existing name—type the new name and press
document. Once you have created a style, you can apply it to other text: the R key to accept the change. Style names can only contain letters
and numbers; other characters are not permitted. Any spaces you type will
1 Select the text to which you want to apply the style.
automatically be removed because they are “illegal” CSS code.
2 In the Styles & Colors palette, click on the name of the style you want
to apply.
Note: If the Styles & Colors palette is not currently visible, open it by
choosing Styles from the Window menu. The Styles & Colors palette
will show the predefined Default styles with every new document.
If you highlight a text run that has more than one style applied to it, all the
styles will be highlighted in the Styles & Colors palette. To apply one style
to a run of text, select the text and then click on a style name in the Styles &
Colors palette. You can click either on one of the already highlighted styles
or a completely different one.
FW 5 Pro only
Freeway imports all the permanent styles from the selected document into a
new style sheet. Imported styles
can be dragged
4 You can now drag styles from the new style sheet into the existing
into the current
style sheet.
main style sheet.
Dragging makes a copy of the styles, leaving the originals in the imported
style sheet. Once you have moved the styles you want, you can choose to
delete the imported style sheet by selecting its name in the list and clicking
the button at the bottom of the Edit Styles dialog.
5 Click OK to close the Edit Styles dialog box.
Styling text
FW 5 Pro only FW 5 Pro only
A permanent style is always displayed in the Styles & Colors palette, The list displayed in the Styles & Colors palette can show either
regardless of whether it is currently in use. To make a temporary style permanent styles only, or both temporary and permanent styles. To change
permanent: the list of styles displayed, click on the Styles & Colors palette menu
1 L-click on the temporary style name in the Styles & Colors palette. and choose either Temporary Styles or Permanent Styles Only.
This opens the Edit Style dialog for the selected style.
2 Select the Permanent box in the Edit Style dialog box. You can alter and work with these styles or ignore them and use only the
styles you create and name yourself.
To change the predefined styles:
1 Choose Edit Styles… from the Styles & Colors palette menu.
2 The Edit Styles dialog opens.
3 Select the style you wish to edit from the sheet1 list on the left.
4 Make the changes to the attributes as you wish.
6 Click OK to confirm your settings and close the Edit Styles dialog box.
3 Give the style a new name, if you wish. Click OK to close the Edit Style The chosen attributes will now be applied whenever you choose the style
dialog box. you have edited.
FW 5 Pro only
A practical example is perhaps the best way to show how styles in Before you do anything else, choose Styles… from the Edit menu. This will
Freeway 5 Pro work. First, set up your document. The size doesn’t matter for show the Edit Styles dialog.
the purposes of this example, so let’s choose one of the standard settings:
XHTML 1.0, 800px by 600px.
Styling text
Attributes from the View popup menu in the bottom right corner. This will Edit Styles dialog.
hide any references to graphic text from the Edit Styles dialog and make it
Note: If you type a style name with spaces, Freeway will automatically remove
easier to set up the attributes you want.
them. This is because space characters are not legal for CSS titles. Other illegal
Click on the button at the bottom left of the dialog. This adds a new style characters include quote marks and apostrophes.
to the list, called “style1”. You will notice that, at the moment, the new style
has no attributes.
Open the Styles & Colors palette from the Window menu. You can also
Click the Select button at the bottom open it by clicking and holding the Inspector button at the top right of the
center of the dialog window. This changes Toolbar, or typing OCy. Click on the Document Styles icon at the
the main view to show a list of all the left of the palette to show the styles in your document.
attributes you can add to your new style.
Your new style appears in the list. Because it
In this case, we will choose just the basic
includes paragraph attributes, it is marked
Character attributes for Font, Size, and
with a pillcrow (¶). Styles that only contain
Color, and Paragraph attributes of Align,
character attributes do not have this symbol,
Leading, Space before, and Space after.
for instance the predefined styles of “em”
You may need to scroll down the window
and “strong”. The new style’s name also has
to see all the of attributes. Once you have
a full point at the start. This is a standard
clicked all the required checkboxes, click the Select button once more to
CSS naming convention, and is handled
return to the main dialog window.
automatically by Freeway as you create
You will see that the attributes you selected have been added to your style, styles.
but they are still default settings. Set the attributes as follows:
Font Verdana
Size 11px Note: Please also refer to Styles Inspector on page 229.
Color Black
Align Left
Leading 100%
Space before 6px
Space after 0px
Give the new style a name.
Styling text
FW 5 Pro only
custom name.
See also Freeway’s Default Styles on page 203. 3 Give the style the name “Header” and click OK.
Using our example document, we shall now look at adding structural tags to The new style appears in the Styles & Colors palette.
our styles.
Now we have two custom styles in the Styles & Colors palette. Both styles
Creating a header style can be used right away, but they don’t really provide any clear indication
1 From the Styles & Colors palette menu select New Style… of the structure of your page to a screen reader, or a browser not capable of
displaying the style as intended. To overcome this, we can assign structural
2 Set the character and paragraph attributes as follows:
tags to our styles.
Adding tags
1 From the Edit menu, choose Styles…
2 Select the Header style created earlier, and choose h1 from the Tag field
popup menu.
3 The Header style is renamed to reflect the tag that’s been added to it.
Styling text
FW 5 Pro only
With Freeway 5 Pro’s ability to apply text styles to pages and items, as well as The Styles Inspector button. The button removes the style.
to text, it can be a little overwhelming when trying to work out which style The button shows a popup
has been applied to what and where. The Styles Inspector gives an easy-to- Disclosure triangles can menu (see below).
follow hierarchical overview of where CSS styles have been applied in your be set to show or hide the
design. styles for each element.
The Styles Inspector is a panel that appears in the Inspector palette.
Depending on what is currently selected, it gives a hierarchical list of page
elements, and styles that have been applied to those elements. To describe
the Styles Inspector’s functionality, we have shown the Styles & Colors
palette alongside the Inspector palette, together with items on a page.
Note: See also What are Styles? on page 200, and Working with Styles on
page 218.
Note: Freeway 5 Express does not support the saving of custom styles. The
Styles Inspector is a Freeway 5 Pro feature only.
Applied styles are shown in a When clicked, the button shows a
standard order, showing Page, menu with options to create a new style,
Item (or Table and Cell) and or choose an existing one. Only styles
Text in a fixed hierarchy. Clicking that can be applied to the particular
a style name will open the Edit item are shown. In this case, only
Styles dialog. paragraph styles can be applied to the
item “clearbox”.
Selecting an item changes the Styles Inspector display to show any style
With a page selected in the Site panel, the paragraph style “.MainBody” applied to that item. This information appears below the Page section.
has been selected in the Styles & Colors palette. With no items selected
The button allows the style to be removed from the item.
on the page, the Styles Inspector shows Page, with the currently applied
style shown in the list. The button, when clicked, shows a popup menu that allows a paragraph
style to be applied from the currently available list. Choosing New… from the
The button allows the style to be removed from the page.
menu opens up the Edit Styles dialog so a new style can be created.
The button, when clicked, shows a popup menu that allows a style to be
If no style has been applied to the item,
applied from the currently available list. Choosing New… from the menu
then the section shows just Item and the
opens up the Edit Styles dialog so a new style can be created.
button.
If no style has been applied to the page,
then the section shows just Page and the
button.
Styling text
Selecting a table or table cell changes the Styles Inspector display to show
any styles applied to that table or cell. This information appears below the Selecting some text in an item adds a further Text section to the Styles
Page section. Inspector. This information appears sequentially below the Page and Item
sections.
The button allows the style to be removed from the item.
The button allows the style to be removed from the selected text.
The button, when clicked, shows a popup menu that allows a paragraph
style to be applied from the currently available list. Choosing New… from the The button, when clicked, shows a
menu opens up the Edit Styles dialog so a new style can be created. popup menu that allows paragraph or
character styles to be applied from the
If no style has been applied to the table or cell, then the section shows just
currently available list. Choosing New…
Table or Table Cell and the button.
from the menu opens up the Edit Styles
dialog so a new style can be created.
If both paragraph and character styles
have been applied to the selection, both
styles will be displayed in the Styles
Inspector. Permanent paragraph styles show a ¶ (paragraph symbol) and
the style name in bold type; temporary styles are shown in plain type. Styles
are listed with the most recently applied at the bottom of the list.
If there are different runs of styled text within the selection, then it is not
possible to produce a single list of styles that reflects the output. Instead, the Editing styles
Styles Inspector displays Mixed Styles in gray text at the bottom of the
Text panel. Styles that apply to the whole selection will be listed as usual. For
By clicking the name of a style listed in the
Styles Inspector, Freeway will open the
example, in the illustration above, the selected text has the “global” style of
Edit Styles dialog.
.AltBody, and “mixed styles” of em, strong and .style1.
You may wish to impose more control over the width of flexible-width HTML
An HTML item which
items, for example, to control the width of the item relative to the width of
is not set to grow in
the browser window. This can be somewhat tricky to achieve and requires a
width can be used
little experimentation to get right.
to control a flexible
It is important to realize that your layout, and therefore the width of the item. In this example,
flexible HTML item, is controlled by a layout table in the output HTML. This the left hand box will
table is drawn to the width of the items on the page, not the width of the grow as the browser
page as seen in Freeway. This can lead to unexpected results if a flexible-width window is resized.
item is the rightmost item and you don’t want it to occupy all the available
space in the browser window.
To control the output appearance of flexible items as seen on the page, it
is necessary to ensure that some additional space is included in the output
layout table. This technique can be useful for creating a right hand margin
beside HTML text in a variable width item.
All the following techniques use the page alignment set to None.
Power Tip: The above method can also be used to keep an item flush
against the right-hand edge of the browser window, regardless of the
window size.
4 When the page is output, your HTML item will now have a flexible
height and will adjust to fit the content within it.
The Height Can Shrink option changes the way HTML items are presented
in the web browser so they will shrink to fit their content (or the content of
adjacent items) when they are displayed in a browser.
Flexible height is very useful in cases where an item that contains HTML text
is followed by other items on a page. Note: Items that do not have flexible height will always grow to fit their
If the HTML item is given flexible height, it will adjust to fit the size of its content at large point sizes. Specifying the flexible-height option simply
text at any browser font size. This prevents browsers from displaying a gap causes them to shrink to fit their contents, as well as grow.
between the HTML text and any following items at small font sizes.
You should leave this option switched off if you want an HTML box to occupy a fixed
height. This will probably be the case with most HTML boxes that contain no text.
This example will show you how to center a single item using flexible-
width items:
Using two flexible-
1 Make sure your new page has no alignment by clicking on the page
width items to help
and looking at the Align pop-out in the Page General panel of the
control the position
Inspector palette and choose None.
of the central box.
2 Somewhere in the middle of the page, sketch an HTML or graphic box of
150 x 150 pixels.
3 Sketch another HTML box 100 pixels wide by 150 high at the right edge
of your first box. Fill it with a different color and, making sure that it is
still selected, go to the Item Output panel of the Inspector palette and
select the Width Can Grow checkbox.
4 Make a copy of the flexible-width item and place it on the other side of
the first item. You can do this by either copy/pasting it or selecting it
and O-dragging it to the other side of the box. (Pressing O while
dragging an item makes a copy of it.)
Preview in your browser. When you resize the pages, you can see that flexible-
width items can work as a sort of spring to keep the first item centered.
You can also set your item so that its position is flexible but not centered.
For instance, if you follow the above procedure but set the flexible item on
the right to a width of 50 pixels while keeping the left one at 100 pixels,
you’ll see that it keeps the first item proportionally closer to the right edge
of the window.
CSS Layout FW 5 Pro only Freeway 5 Pro and CSS FW 5 Pro only
To turn CSS-positioning on, select the CSS Layout button in the Toolbar:
Introduction
Originally, HTML was designed as a way of dividing up a document based
on content—it was used to specify the organization of a document, not its
presentation. Where presentation was concerned, it was left to browsers to
decide how to display the types of content specified in a web page, defining
All items drawn while this button is on will be positioned using CSS layout.
styles and positions based on their interpretation of the content.
CSS-positioned items can be identified by their differently colored border and/
Inevitably, as the web became more popular, web page authors began or corner mounts (by default this is set to green, but can be changed in the
demanding more control over the presentation of their documents. The two Appearance panel in Freeway Preferences):
major browsers, from Netscape and Microsoft, soon started extending the
HTML specification with proprietary tags, as well as differing and competing
extensions.
Out of this confusion, Cascading Style Sheets (CSS) was born—a
standardized way to separate content from presentation once more, and
to give authors the greater presentational control they wanted. CSS allows
authors far greater control over both content styling and positioning,
particularly specifying position and dimensions relative to the browser
window, without confusing the HTML source.
FW 5 Pro only
independent (non-inflow) items by selecting or deselecting the Layer checkbox
on the Item General panel of the Inspector palette:
Positioning a fixed-size item a specified distance
from the edge of a page
By default, Freeway specifies an item’s position using two values—the
distance from the top of the page (or parent item), and the distance from the
left of the page (or parent item). This is displayed in the Inspector palette by
the Left margin and Top margin positioning buttons being depressed in the
Dimensions section of the Item General panel:
When viewed in the browser, this item will always be positioned 50 pixels
from the right and bottom edges of the browser page. If this item was not
specified as a layer, it would be in a fixed position 650 pixels from the left edge
of the browser page and 450 pixels from the top edge of the browser page.
repositioned automatically as the browser window is increased in size: the browser page
An item’s width and height can also be specified relative to the size of the browser
page. Once again, you will need to be careful when using percentage values
for the height of an item, because CSS calculates the height of a browser page
as the height of the content on that page—excluding layer items. Unless you
have table-positioned or inflow items on the page, the page height may be
calculated as being zero.
The following screenshots show how an item with a width of 50% is resized
automatically as the browser window is resized:
Naturally, percentage positioning values can also be entered into the Bottom
margin and Right margin positioning fields.
As you would expect, this will cause the item’s width to increase as the
browser page’s size is increased to maintain the 50 pixel indents that have
been specified.
will cause the child to be repositioned and resized as the parent item is itself
resized by changes in the size of the browser page: An inflow child HTML item will be created (you can also create inflow child
graphic items or tables by selecting the appropriate option from the Insert menu).
For inflow child items, because their position is determined by the text flow,
you can only specify their dimensions. Set their height and width either by
resizing them using their drag handles, or by setting appropriate values in the
Inspector palette. As usual, you can specify either fixed pixel dimensions or
flexible percentage dimensions.
The last value is Auto. This is similar to Scroll, but will only display the scroll
bars when the item has actually overflowed:
There are four values to which the Overflow attribute can be set. The default value
is Visible. This will cause content to spill out of the bottom of the item if the item
becomes too small to contain all the content.
The other values for the Overflow attribute constrain the text to the box in
different ways. The Hidden value causes only content which fits inside the item
to be displayed.
The Scroll value will cause the item to be displayed with scroll bars to allow
the user to scroll through the contents of the item—the scroll bars will be
displayed whether the item has overflowed or not:
of an item the height of the item will change to accommodate its contents:
As helpful as these settings are, we may want to allow our item to fit to its
content rather than specifying how it should behave when it can no longer
contain its content. This can be achieved by setting the Height attribute to be
undefined. To do this, deselect the button next to the Height field in the
Dimensions section of the General panel of the Inspector palette:
Note that the top and bottom resize handles of a box whose height is
undefined are locked (and drawn in red)—showing that the box height is
determined by its contents and cannot be changed separately:
Note: In this example the width of the HTML box has been set as a
percentage of the page width. This will let the box maintain its relative size You can configure Freeway so that CSS boxes will be automatically set to have
to the browser window in a similar way to using Width Can Grow for a undefined height whenever text or other inflow content is entered within
table-positioned layout. them. To do this, choose Yes for Automatic undefined height in the Layout
panel of Freeway’s Preferences dialog
FW 5 Pro only
other—compare this to the table-positioned layout of non-layer items where
One of the big advantages of using layer items is the ability to freely overlap overlapping items requires significant care, and overlapping graphic items are
items without them affecting each other. This layout in Freeway: by default combined into one graphic in the Freeway output. CSS allows us
to position items wherever we like on the page, and graphic items will only
combine with their child graphic items (which will by definition be entirely
contained within the parent).
Because of the way layer items are treated by the browser, they will always
be rendered above any non-layer items on your page. This is reflected in
the Freeway interface. All layer items will be on top of non-layer items, so
selecting and deselecting the Layer checkbox for an item will usually cause
the item to change its position in the stack of items on the page; it may
appear in front of items it was previously behind or vice versa.
will appear like this in a browser: Layer items and the Rollover Action
The Rollover Action requires that the table-positioned graphic items involved
are set to Combine Graphics within Freeway. As has already been observed,
layer graphic items will not combine with each other, and so if you create a
Rollover with layer items in exactly the same way as you would with non-
layer items, it will not work. Of course, there is a way to combine both the
layout freedom of layers, and the Rollover functionality.
The simplest method is to create your layer graphic items that you would like
to use in the rollover, and then select them both:
Now create a containing item by using the Group command in the Item menu:
Once you’ve created your rollover in this way, it can be easily overlapped with
other items.
If we want to wrap the text around the right side of the item, we set its Float
value to Left:
we set its Float value to Right: popup in the Item General panel of the Inspector palette:
This effect can be applied to any inflow child item, although where it is set
is slightly different depending on whether the inflow item is an HTML or a
graphic item. For an inflow HTML item, select either Left or Right from the
Float popup in the Item General panel of the Inspector palette:
If there is more than one inflow item present, we may end up with a situation
similar to this:
In Freeway, tables are a powerful means of organizing and presenting tabular In addition to the number and relative sizes of the rows and columns in the
(rows and columns) information correctly and easily. Tables are quite useful table, you can also control other aspects of how the table is displayed. These
for presenting such content as price lists, schedules, product features and include the presence and thickness of a border between the table cells, fill color
the like. They can also be advantageous for designing complex forms, where to be applied to the table or cell background, and the vertical alignment of the
form control items (see Working with forms in Freeway on page 285) and text contents of the cell. You can also choose to merge two or more adjacent cells in
must be carefully arranged. a table into a single cell, which gives even more flexibility in presenting and
A table consists of a collection of rectangular “cells”, laid out side by side arranging the information contained in your tables.
to form rows and columns. When you create a table in Freeway, you will
be asked to specify the number of rows and columns you want the table to
contain. Once you have created a table, you can adjust the width and height
Creating tables
of the cells in the table, join cells, enter text and place inflow graphic items or Tables may be created in Freeway using the Table drawing tool or by
form control items. choosing the Insert Table… command from the Insert menu. Using either
Tables within Freeway are classified as HTML items, which means that they method, you will be asked to specify the number of rows and the number of
behave in a similar manner to HTML text boxes, pass-through graphics, or columns that you wish your table to contain.
form controls. Just like form controls in Freeway, tables can’t have other items
in front of them, and they can cause graphic items behind them to be cut up,
unless they are layered items (Freeway 5 Pro only). In Freeway 5 Express, left,
When you first create a table, all the rows will be the same height and all the choose the Table tool from the
columns will be the same width. Once you have created a table, you can then HTML Item drop-down menu in
resize the individual rows and columns as you wish within the overall dimensions the Toolbar.
of the table. You can add or remove rows or columns at any time.
In Freeway 5 Pro, the Table tool
Like other HTML items, the vertical height of a table on your page may vary
can be found on the Toolbar,
when the page is viewed in a web browser; this is because browsers may
and in the Tools palette, right.
have different default text sizes. Using tables in complex layouts requires the
same care as the use of HTML text boxes or form controls, as they can expand
and potentially cause items on your page to break or shift when the page is
viewed. For more information on the behavior of HTML items, see Flexible
table layout on page 233.
To draw a table using the Table tool: Using the Table… command on the Insert menu, you can create a table as
1 Select the Table tool in the Toolbar or Tools palette. an inflow item in an existing HTML box. To do this:
2 Click and drag diagonally on the page to define a rectangular area. This 1 Draw an HTML box, and click inside it to get the text insertion cursor.
area defines the size and position for the new table. 2 Choose Table… from the Insert menu. The Insert Table dialog will appear.
3 In the Insert Table dialog which appears, enter numeric values for the
number of rows and columns you wish the new table to contain, and set
the border, cell spacing, and cell padding attributes as you wish, and click
OK. You can change these settings at a later stage if you wish.
A new table will appear at the insertion point, with the rows and columns
evenly spaced to fit the size of the table. The starting size of the inserted
table will vary depending on the number of cells, the width of borders,
spacing, and padding.
3 In the Insert Table dialog which appears, enter numeric values for the Power Tip: Using this technique you can insert a table into the cell of
number of rows and columns you wish the new table to contain, and an existing table, if you so wish. See Importing content into tables on
set the border, cell spacing, and cell padding attributes as you wish, page 265.
and click OK. You can change the number of rows or columns, and the
border, spacing, and padding settings using the Inspector palette at a Note: The Insert Table dialog defaults to a table of two rows and two
later stage if you wish. columns, with Border and Cell spacing of 5px. If you change these settings,
A new table will appear in the area you defined by dragging with the Table Freeway will remember them for all new tables you draw, even when you
tool. The rows and columns are evenly spaced to fit the size of the table. quit Freeway.
coordinates
Tables can be moved and positioned like other independent objects on the 1 Select the table.
Freeway page either by dragging with the mouse or numerically using the
Inspector palette.
2 In the Item General panel in the Inspector palette, use the X and Y
values to enter the offset across and down from the top left corner of the
page to the top left corner of the table. You can press the T key while
you are editing to move between fields in the Inspector palette, and
press R when you are finished to accept the changes.
Freeway also allows you to select entire rows or columns quickly by clicking
at the top or left-hand edge—a small solid arrow is displayed to show that
when you click, a row or column will be selected.
Using the Selection tool, click on the cell you wish to select. You can move the 1 Move the mouse over the top of a column or the left-hand edge of a row
cell selection using the T and arrow keys. until the cursor changes to a small solid arrow.
Note: Any cell spans (that is, two or more cells that have been joined) will
be selected only if they start in that row or column.
2 Using the Rows and Cols options, enter the number of rows and columns
you wish to have. You can press the T key while you are editing to move
between fields in the Inspector palette, and press R when you are
finished to accept the changes. The table will be updated to reflect your
changes, and if any rows or columns need to be added or removed, this will
be done from the bottom right of the table outwards.
You can easily delete specific rows or columns within a table in two ways, 1 Select the table, a cell, or a range of cells in the table.
depending on whether you select the entire row or column, or a cell within a 2 From the Table submenu on the Item menu, choose Insert Rows or
desired row (the latter method only applies to rows). Insert Columns as appropriate. You may find that one or more of these
Follow the above steps for selecting rows and columns. With your targets options is unavailable, depending on the current cell selection—for
selected, press Backspace. example, if you have an entire row selected, you will not be able to insert
a column, and vice versa.
If you have selected a single cell, you can also delete the row or column to
which the cell belongs by choosing Delete Row or Delete Column from the
Table submenu in the Item menu, or by L-clicking and choosing Delete
Row or Delete Column from the contextual menu.
Insert Columns… is
grayed out here because
the initial selection was
an entire row.
3 Freeway displays a dialog that allows you to choose the number, size and
location of the columns or rows to be created. Click OK once you have
made your choice.
Note 1: Dragging a divider up or to the left will cause the table to shrink.
be and deselect the Empty checkbox in the Inspector palette. Clicking Dragging down or to the right will cause the table to grow. You can cause
twice with the Selection tool where the cell should be, and then the adjacent row or column to be resized, instead of repositioned, by holding
entering content will also recreate a cell. Local formatting will be down the C key after you have begun to drag, and releasing the key after
retained, such as font size and styling, content positioning, and cell releasing the mouse button.
background color.
Note 2: Rows and columns have a minimum size when empty and cannot
Resizing rows and columns be made smaller. If cells contain text, they cannot be made smaller than the
size required to hold the text. When a cell contains an inflow item, the cell
When you resize a row or a column using the mouse, you can choose whether contents will overflow if the cell is too small to display the entire item.
the adjacent row or column has its size changed to preserve the current table
size or is simply repositioned.
You can also specify the size for rows and columns using numeric values. Changing table borders
To change the widths of rows or columns using the
mouse
1 Using the Selection tool, point to the border between two rows or
columns so that the cursor changes to the resizing shape .
You can apply a colored fill to the background of the table or to individual cells.
To apply color
1 Select the table or a run of one or more cells.
2 Choose the color you wish to apply from the Table or Table Cell panel
in the Inspector palette, or as appropriate or from the Styles &
The contents of table cells can be top-, middle-, or bottom-aligned using the Colors palette.
Align buttons in the Table Cell panel of the Inspector palette.
Note: Freeway 5 Express does not support the saving of custom colors. You
can choose the background color for a table or cell by choosing Other…
from the Color popup menu, then choosing the color you want from the Mac
OS X Color Picker.
If splitting the cell will create an entirely new row or column, the cell will be
split into equal parts. However, if the cell being split was created by joining
cells initially, the original divisions will be recreated if the number of cells you
2 Choose Join Cells from the Table submenu on the Item menu, L- specify matches the original number of cells.
click and choose Join Cells from the contextual menu, or press C-
Backspace. The cells will be combined into one new cell, with the
content and settings of the target cell in the original selection.
Freeway can format text in a table as a whole, and in several table cells at the You can copy/paste cell selections between tables in your documents.
same time, although it isn’t possible to highlight text in more than one cell 1 S-click to select the cells you wish to work with.
at a time. Select the actual cells containing the text you want to format by 2 Choose Copy from the Edit menu.
S-clicking on each one, then apply the formatting you want.
3 Select a cell in a destination table and choose Paste.
See also Styles on items: Tables on page 206.
Note: If, when pasting copied cells, the table you’re pasting into needs
To apply a style to a table FW 5 Pro only
to be resized to accommodate the pasted information, Freeway will show
Applying a style to a whole table means that all cells in the table will use the a warning dialog box. Be careful when choosing from the options in the
chosen style. You can still apply local styling to individual cells or their text warning dialog, because if a page is enlarged to accommodate the growing
content. table, other design elements may be adversely affected.
1 Select the table, as already described.
2 Choose the style you wish to apply from the Styles & Colors palette.
See also Using the style: Applying a custom style to a CSS item on page 226.
Note: Freeway 5 Express does not support custom styles, and does not have
a Styles & Colors palette.
1 Click inside a table cell using the Selection tool to create a text
insertion point.
2 Choose HTML Item from the Insert menu to insert an inflow item.
3 C-click twice on the new item to select it and then choose Import…
from the File menu.
Note: If imported image is too large to fit the inflow box, a diagonal cross
will show in the box. Making the box fit the content may force the table
to grow with unpredictable results. In most cases it may be best to import
a pass-through image into an HTML box drawn elsewhere on the page,
copying it and pasting it as an inflow item, as described earlier. See To
import graphic content into a table cell.
To import other content into a table cell It is possible to insert inflow items within inflow items, both in tables and
1 Click inside a table cell using the Selection tool to create a text within other items, with no real limit to how many can be nested in this way.
insertion point. While nesting items like this opens lots of possibilities in terms of layout and
2 Choose the preferred content type from the Insert menu (table, Action, control of items on the page, remember there are often several, perhaps better,
or Markup) to insert an inflow item. ways to create such layouts in Freeway.
Note: Inflow Actions and Mark-up items work the same in table cells as
when they are imported into normal HTML boxes. To find out more about
Actions, see page 312. To find out more about Markup items, see Adding code
to Freeway’s output on page 305.
Frames However, with frames, a single browser window may be used to view two or
more HTML pages at the same time, by using commands to split the window
Frames can enhance the performance, navigation, and branding of your site into two or more parts. The parts created by splitting the window are called
when used well, but they can be unsightly and confusing for the visitor when frames and each frame then holds a single HTML page.
used inappropriately. It is important to be aware that frames also have some A simple use of frames is to make a navigation bar along the side or top of
unique disadvantages compared with presenting your site without frames. your site and a main frame for the content. So if your content is long and
requires scrolling, for instance, the navigation bar will always be available.
What are frames and frameset pages?
Frames are essentially a different way of viewing individual HTML pages in a The way it commonly works is that the user clicks on a link in the navigation
web browser. When viewing HTML pages normally (that is, without frames) a bar and the linked page appears in the main frame. Basically, frames are just
single HTML page is viewed in a single browser window. If you wish to view containers for your web pages.
two HTML pages together, each must be viewed in its own browser window. To define how the browser window must be split and what HTML pages
should be displayed in each part, a special kind of HTML page is used,
called a frameset page. When viewed in a frames-capable web browser, this
page displays no content of its own, but is simply used to define the way
in which the window is split into frames, and which further HTML page
should be displayed in each frame to begin with. This information is called
the frameset definition.
Once you have defined your frameset, you have a single container for your
web pages. It’s then just a matter of using Freeway to define your links so
that when the user clicks on a link, the page opens in the intended frame.
The frameset page defines the number and orientation of the frames to be
created in the browser window, as well as information about how each frame
should behave. You can define:
◆ Whether a border is to be displayed between frames, and if so, what its
width will be.
◆ Whether frames are to be a fixed-width, or a width proportional to the
actual width of the browser window.
displayed at a particular size. When the user follows a link contained in a frame, the default behavior of
◆ Whether a frame can be resized interactively by the web site visitor. the browser software is to load the new page into the same frame as the link.
This is usually the correct thing for it to do, but there are important cases
Here is a summary of Frames terminology: when something different should happen. Examples of when this may not
Frame Part of a browser window which has been split be appropriate are when links point to external web sites or when separate
to display two or more HTML pages at the same frames are being used for navigation and displaying content.
time. To allow the necessary control over this, there are two other important ideas
Frameset The container for two or more frames. which are related to the use of frames; the naming of individual frames, and
Framesets may be nested within each other to the ability to target a link to load the new page somewhere other than the
create complex structures. frame in which the link appears.
Frameset page An HTML page which contains one or more Using link targeting, you can tell the browser that, instead of replacing
framesets. the content of the frame containing the link, the new page should appear
Source The page that is displayed within a frame when somewhere else—such as in a different frame in the same window or
the frameset page is viewed in a web browser. a new window altogether—or replace the entire content of the current
browser window.
The frameset page may also contain content to be displayed by web browsers
that cannot display frames. This is called Noframes content, and it will never In order to load the new page into a different frame in the same browser
be seen by the majority of visitors who will be using frames-capable browsers. window, you need to be able to tell the browser which frame is to be the
It is important to display some basic content to allow people who aren’t using “target” of the link. To permit this, you can give any frame a unique name so
frames-capable browsers to contact you. You might want to link them to a that it can be identified.
separate, non-frames version of your site. Once you have named a frame, you can specify that name as the target when
you specify links. You can specify a unique target for every link you create.
However, to save time and effort when several links on a page all need to be
targeted the same way, it is possible to set a “base target” option for the page
containing the links. If this is set, all links on that page without individual
link targets should load into the given target frame.
Although the benefits of using frames can be great, they can be time- Frames were originally a proprietary extension to the HTML language, which
consuming to create and work with, especially at first. They may also be became popular with users and web site designers long before there was any
confusing to beginners. There are other disadvantages too that must be formal recognition of them in the HTML specification.
understood and weighed against the benefits. Statistically speaking, at the time of this writing, almost everyone who visits your
Frames—in depth site will be using a frames-capable browser of some sort. Studies indicate that
Using frames to construct a site goes against some of the theoretical between 95–100% of visitors to most sites are using a frames-capable browser.
principles underlying the development of the web as an information However, it’s worth remembering that in some browsers, it is possible to
space. One leading commentator on the web is a strong critic of the use of turn off the display of frames using the browser preference options. This
frames—read Jakob Nielsen’s views about how “Frames suck most of the means that even someone using a frames-capable browser may not be able
time” at: http://www.useit.com/alertbox/9612.html. Also: to see your frames site if the display of these has been turned off (whether by
http://www.apptools.com/rants/framesevil.php. accident or intentionally).
You may also want to consider iFrames. More information about Visitors who aren’t using a frames-capable browser at all may include people
using iFrames (supported by third-party Actions in Freeway 5 using text-based or PDA-based web browsers, and visually impaired people
Pro and Express) can be found on the Softpress Knowledgebase using speaking browsers.
(http://www.softpress.com/kb/article.php?id=196). Other Web designers need to decide for themselves whether to use frames at all,
sources of information about frames and iFrames can be found on these links: provide alternate content or sites for the non-frame users, or just ignore
http://www.samsite.com/test-csb2nf/id43.htm the issue altogether, based on the kind of site they’re designing and the
http://webmonkey.wired.com/webmonkey/96/37/ anticipated audience.
index2a.html?tw=authoring
It often helps to see what other designers have done when creating frames-
http://webmonkey.wired.com/webmonkey/96/31/
based sites similar to yours. One option is to visit a few sites which are aimed
index3a.html?tw=authoring
at the same sort of audience as yours, and simply view the source of the
Please be aware that these links are not aimed at the visual designer, and contain a main frameset page in your web browser to see if there is Noframes content
lot of HTML mark-up code. specified. Another method would be to obtain a browser that does not support
frames, and visit a selection of sites using it. Microsoft Internet Explorer Mac
is probably the only browser which allows the user to set a preference to
turn off frames while browsing, but is no longer available as a download
from Microsoft. A large number of major sites which use frames, offer no
alternative content whatsoever, without seeming to antagonize people.
page with two or more frames using the Split Horizontal or Split Vertical
The easiest way to create a frameset in Freeway is to use the New commands. Each frame may point to either a page in the same Freeway
Frameset… command on the Frames submenu on the Page menu. This document or an external HTML page. The page referenced in a frame is known
displays a dialog allowing you to select from a range of predefined frame as the source page of that frame.
layouts. A new frameset page will be created in your document. You can If the source page for any of the frames is not available when a frameset
choose whether or not Freeway automatically creates source pages for the page is rendered in the web browser, the browser may display a dialog
frames in the new frameset page. box containing an error message. Freeway will warn you if you publish a
frameset that has unspecified source pages.
The same source page may be referenced in two or more frames in the same
frameset page—this is often done, for example, when using empty HTML
pages (which usually contain nothing but a page background color) as fillers
in a layout designed using frames. A source page will usually be a standard
HTML page, although it is possible for the source of the frame to be another
frameset page (thereby creating a nested frameset) or any valid HTML object,
such as a graphic or multimedia element.
You can work directly in each frame as it appears in the window or you can
use the Link Map or Site panel to select a page by clicking on the page’s
icon. If a page is selected, the Noframes and Frameset buttons revert to the
Page button. You can return to the frameset at any time by clicking its icon
in the Link Map or Site panel.
3 Choose the frame layout of your choice from the selection and specify to
Show borders if desired.
4 Enable the Create pages for frames option if you wish Freeway to
create source pages for the frames in the new frameset pages and select
a master page on which to base these.
5 Click OK.
A new frameset page will be created in your document with the frames
named and given the most likely attributes.
a Freeway document
The procedure described in this section is useful if you have an existing page Noframes content is displayed when a frameset page is viewed using any
that you want to define as the Noframes content for a frameset. The result browser which is not frames-capable, or when a frameset page is viewed with
will be an empty frameset—each frame of which is ready to be linked with a the option to display frames turned off
source page. Making your existing page into a frameset is easy: There are two ways of creating Noframes content within Freeway. First, as
1 View the page you wish to become the frameset page. described above, any content on the page before it is made into a frameset
2 Choose either Split Horizontal or Split Vertical from the Page menu. page will be specified as Noframes content. Second, you may choose to edit
the Noframes content by selecting the Noframes view button at the bottom
The normal page outline and pasteboard will disappear and be replaced by
right of the window.
two colored sections, dividing the area of the document window in half. These
areas are the frames you have created. Some web publishers do not designate any Noframes content at all, but
this can be unfair to users of other browsers who visit your site. Without
If the page already contains content when it is changed into a frameset page,
Noframes content being specified, visitors who come to your site with
it is not lost in the process; and if you remove the frames from the page, the
browsers which are not frames-capable see absolutely nothing—not even an
initial content will be restored. The original page contents are output in the
error message.
HTML as Noframes content, which will not be displayed in frames-capable
browsers, although it will be downloaded in the background when the page is On each frameset page, you can define some Noframes content, which at
viewed, increasing download time. the very least informs visitors without frames capability why they aren’t
seeing your site. It’s a good idea to provide Noframes visitors with an email
address and basic contact details. You may also wish to supply a list of links
Frameset pages have a into the content pages of your site. This not only assists Noframes visitors,
different icon to normal but can also help some search engines to index your site more effectively.
pages in the Site panel.
In the Site panel, frameset pages are differentiated from normal pages by a
different icon.
1 Select the frame by clicking inside it. A selection marquee appears inside In order to do this, you first need to know the file name of the HTML page you
the selected frame. wish to set as the frame source, as well as where it will reside in relation to
2 In the Current Frame panel of the Inspector palette, choose Other… the frameset page you’re creating. To find out more about specifying relative
from the Source popup menu. The Frame Source dialog will appear. URLs to external pages, see Relative references on page 142.
1 Select the frame by clicking inside it. A selection marquee appears inside
the selected frame.
2 In the Current Frame panel, choose Other… from the Source popup
menu. The Frame Source dialog will appear.
3 Select the External tab. Choose the option URL and type or paste in the URL
for the external page you wish to specify as the frame source. The URL for
the external page will appear in the frame against the colored background.
When the page is viewed using a browser, the browser will attempt to load
the specified URL into the frame.
Freeway allows you to view and edit the contents of the pages viewed in a
frameset, as long as they are contained within the same Freeway document
and do not themselves contain framesets. This offers a great advantage
for designing your site, since you can see what the finished result will look
like without having to constantly switch in and out of a web browser to
preview changes.
The edge of the source page viewed within a frame is indicated by means of
3 Click the New Page… button and then select the master page on which a dotted line. You can create, move, or delete objects on the source page, type
you wish the new page to be based. text or change page attributes using the Inspector palette, just as if it was
4 Click OK. After the New Page dialog appears, type the title for the new the current page in view instead of the frameset page.
page and click OK.
Note: When working in Frameset view, the zoom level is fixed at 100%,
The frame now displays the source page as its content. You may edit objects
and it is not possible to zoom in or out of the page. If you wish to work at a
on the source page as if you were viewing it as the current page.
closer zoom level, switch to the source page using the Site panel.
Note: With any frame selected, you can use the Frame Source… command on
the Frames submenu of the Page menu (or the Frame Source… command on
the options menu in the Frames palette) to set or change the source page for that
frame. You can also use the Go to Selected Page command to change from the
frameset page to the actual content page itself, if the content page is in the same
Freeway document.
Note: It is also possible for the source page to be the focus for keyboard
To remove an active frame selection, you can hold down the S key while commands without any objects or text being selected on it—this happens
clicking inside the selected frame. In addition, clicking and dragging with the when you drag using the selection tool on the page, but no objects are left
mouse on an empty part of the page viewed within a frame will deactivate the selected.
frame selection, as will selecting an object on the page viewed inside the frame.
You can also use the palette to select individual frames or framesets. Clicking
Using the Frames palette in a frame shown in the palette will select the frame. S-clicking will
The Frames palette can be of great assistance in seeing the structure toggle the selection on or off. O-clicking in turn will select the successively
of your framesets. It shows how the various framesets on your page are enclosing framesets. You can also select a frameset using the palette by
nested, and the orientation and number of frames within them. Put another clicking on the border between the frames themselves or between the frames
way, it is a schematic view of your frame set that will allow you to see how and the edge of the palette.
your frames and framesets are organized. The dimensions of the frames
You can use the Frames palette to select “invisible” frames too. These are
and framesets shown in the Frames palette do not reflect the actual
frames that can’t be displayed because the other frames are taking up all the
dimensions that are specified.
available room in the window.
Delete frame or Add new frame to Sizing frames
frameset button frameset button Whether the frame border is visible or not, you can resize any frame while
Add new working in Freeway. You can either use the mouse or type in numeric values
Extra frames to size a frame. Because frames are the result of splitting the page area and
frameset button
options menu are not objects in their own right, resizing one frame will always affect at
button least one other in the frameset. Regardless of whether you use the mouse or
Frames in the
type in values to size frames, each frame may have its dimension specified
frameset
either as a proportion of the overall dimension of the frameset that contains it
or as a fixed size in pixels.
This palette will show the currently selected or active frame and the name Except in the case of predefined frameset pages, frames are initially created
of the frame, if any. When you have the frame itself selected, the Frames using proportional values to specify their dimension. This means that their
palette shows the selected frame in dark gray instead of light gray. However, actual size, when viewed, will depend on the current size of the browser
if your current selection is an object or text contained on the page being window. When a visitor resizes the browser window, the size of the frames
viewed through the frame, then the active frame in the Frames palette is will also change. If a frame becomes too small to display all of the content
indicated using a gray, diagonally striped pattern. within it, it will display scroll bars to allow the rest of the content to be
viewed. It is also possible to set a frame so as not to display scroll bars if there
is more content than can be viewed in one go.
Note: If a web design relies on the precise arrangement of frames, it could You can resize a frame
pose problems when viewed in different browsers. Netscape, for example, on a frameset page by
may alter the width in unpredictable ways. Furthermore, Netscape has dragging its border.
a tendency to scroll a frame by about 8 pixels when the user refreshes or
returns to it. Careful testing across browsers is needed if you intend to use
frames heavily in your design.
If you wish to set a frame so that it will be completely flexible in size, set the There are three settings to control the behavior of a frame if there is more
other frames in the same frameset to be fixed value, and leave this frame set content displayed inside it than can be viewed at one time. By default, frames
as a percentage or proportional value. The same result is also attainable by are created so that they will automatically display scroll bars if necessary, but
explicitly setting the frame to have a flexible size: if all the content of the page fits into the available size of the frame, the scroll
1 Select the frame. bars won’t appear; this is called Auto scrolling. You also have the options to
set the frame so that it will permanently display scroll bars—these will be
drawn grayed out if the content fits comfortably within the frame—or never
to display scroll bars.
2 Deselect the Size checkbox in the Current Frame panel of the
Inspector palette. To set the scrolling behavior of a frame
In the HTML output, the size for this frame will now appear as an asterisk (*) 1 Select the frame.
rather than as a percentage value (such as 76%). 2 In the Current Frame panel, use the Scroll popup to choose from:
Auto (default) display scroll bars only if necessary.
Making frames that can’t be resized when viewed
To effectively prevent the visitor from resizing the frames in the browser Yes always display scroll bars, even if content fits.
window, you can set the frame border to be 0px using the Border option in No never show scroll bars, even if content does not fit.
the Frameset Page panel. You can also explicitly instruct the browser to
Important: When a frame is set to Auto, browsers display scroll bars even
prevent the frame from being resized, and you must do this in any event to
when the content displayed in the frame should theoretically fit without
prevent resizing if the frame border is to be left visible.
scrolling. Extra room is required within the frame to prevent scroll bars
To set a frame so that it can’t be resized: appearing.
1 Select a frame.
Freeway gives you feedback on the current scrolling behavior in each frame
as follows:
2 In the Current Frame panel of the Inspector palette, select the No ◆ Frames set to “scroll=Auto” display outline scrollbars and real scroll bars
Resize checkbox. if the source page contents viewed inside the frame don’t fit.
The selected frame will no longer be resizable even when frame borders are ◆ Frames set to “scroll=Yes” show grayed out versions of scroll bars and
shown. Note that depending on the number of frames in the same frameset, real scroll bars if the source page contents don’t fit.
this may also prevent the neighboring frame from being resized. ◆ Frames set to “scroll=No” show nothing, even if the source page
contents don’t fit.
Note 1: Vertical and horizontal scroll bars don’t always behave identically Note: Although in HTML it is possible to mix the border attributes used
when there is more content than will fit inside an Auto scrolling frame. If in different nested framesets within the same frameset page, this is not
content fits comfortably within the width of the frame but the height of the supported within Netscape browsers. Freeway therefore only allows you to
content exceeds the height of the frame, only a vertical scroll bar will be set the frame border width for the page as a whole.
displayed. However, if the content fits comfortably within the height of the
frame but is excessively wide, both horizontal and vertical scroll bars will Specifying a name for a frame
usually be shown. To set the name for a frame, so that it can be explicitly referenced by a link
target command or within a script:
Note 2: Be very careful when setting the scrolling of a frame to No. If there
1 Select a frame.
is overflow content within the frame, there may be no way for the visitor to
display it and no clue that there is content which isn’t being displayed. 2 In the Current Frames panel of the Inspector palette, type or paste
the desired name into the Name text field and press R.
Note 3: Different browsers may calculate the size of the content area
Note: Setting a frame name does not affect either the page title or the
differently. As ever, try to check your design in as many browsers on different
file name that will be used. Using words that are reserved commands in
computer platforms as possible.
HTML or JavaScript as frame names may lead to unexpected results. If
link targeting or references to the frame name in a script fail to work as
expected, try changing the word you have chosen for the name to something
else.
Note 1: It is also possible to type the name of a target directly into the Target
text field. This is useful when the frameset definition is contained within a different
Using link targets allows you to decide where the result of clicking on a link
Freeway document or in an external HTML page.
will appear. Link results can replace the contents viewed in a different frame
or frameset within the same frameset page, replace the content of the entire
Note 2: When targeting links, you can type a name into the Target text
browser window or appear in a completely new browser window. Individual
field for a link before you have named the intended frame. However, if there
links can be targeted in the Hyperlinks dialog while all links on a given page
has been a typing error or if for any reason the browser can’t find the frame
can be targeted in the Page panel of the Inspector palette. There are preset
target, it will open a new window. This will also happen if you have removed
targets available but you can also define your own by naming frames.
or renamed your frame. Always name the frame, and then choose this name
Setting a particular frame as the target of a link from the Target popup menu when applying the link. If you change the
1 Give the target frame a name as described above. The name is added to name of a frame, make sure you update the links which have that frame as
the list of known targets for the document. their target.
2 Select the text or item that is being linked on.
3 Choose Hyperlink… from the Edit menu to bring up the Edit Hyperlink
dialog box.
4 Using the Target popup menu, choose the name of the desired frame
from the list. The target name appears in the Target text field. Now,
when the link is activated in the browser window, the result of the link
will appear in the named target frame.
Whether you know it or not, you have most likely come across forms on they’ve provided in the form fields is sent to a place on the server where a
many web sites. Basically, any time you type something onto a web page, you certain script (usually a CGI-script) resides. For instance, “/cgi-bin/formmail.
are using a form; this includes search engines, feedback forms, guest books, pl” is a typical location of a script on the server’s disk; if the form sends the
order forms, and so on. Using Freeway and scripts or applications running information to that location, the script will automatically handle it, processing
on the server, you can create forms that allow users to send you information, the form according to how the script has been written to carry out the job.
integrate your site with databases or implement shopping applications.
Parts of a form
Servers and browsers There are three parts of a form. The first consists of form items that are
In order to better understand forms, you may need some background on how viewed on the screen and allow the user to enter information in response to
web servers work and how a visitor’s browser communicates with it. questions or select from available options. You draw or insert these items
If you want to view a web page over the Internet, you type its URL (Universal using tools in Freeway.
Resource Locator, which is basically an address) into your browser, then the The second part is the instructions that have to be given to the browser when
browser searches the Internet for the web server that has the web page you’re your visitor clicks the Submit button—where the information is to be sent
looking for. If you’ve just typed an address like http://www.macintouch.com, and what is to be done with it, for example. These instructions need to be
your browser reads the first segment (“http:”) as the protocol (method of entered into the Form Setup dialog on Freeway’s Page menu.
communication) and searches for the server www.macintouch.com. The third part is a script, program, or other service hosted on the web server that
Having made a connection with the server, the browser then asks the server deals with the information sent back from the completed form. Typically, “Perl”
to fetch the requested page and send it down the line. If you haven’t specified scripts, located in the cgi-bin directory of the server, handle form processing, but
a page on that server (such as www.macintouch.com/imac.html), the other technologies such as ASP and PHP are also used. The system administrator of
server will send the default page. This is why you must ensure your site has a the web server normally handles this part. If you are publishing your site through
home page with a name like “index.html” or “index.htm”. an Internet Service Provider (ISP), you must contact them to see what options
The system of fetching web pages is more or less static: the visitor uses the are available to you. Often there are existing Perl scripts that you may use or
browser to ask for a page, and the web server sends it. The browser then occasionally you may be able to upload your own.
processes the HTML to make what the visitor views as a web page. Freeway provides an easy-to-use interface that allows you to deal with the
The next level beyond simple page fetching is dynamic: instead of just asking first and second aspects of the process. Using the form tools, you can create
for a page, the browser can send information and request the server to do form items or controls on your Freeway page.
something with it, which is what happens with forms. You can use Freeway to
set up forms so that when the visitor clicks a Submit button, the information
Name Enables the form to be identified. This may for forms functionality. If you are renting web space from an ISP, then they
cover just one element or a group. If you have will likely have standard programs or scripts in the Perl language that you
a group of radio buttons, they will all have may point your form at (that is, configure your forms so that they are sent
the same Name (with radio buttons, the user to the location of the recommended Perl script). Their support department
chooses one of multiple options). Other form should be able to tell you what’s available, what the programs or scripts do,
items will generally have distinctive names. and what you need to include in your form to use them.
Value What the form reports to the form handler. This Alternatively, you may have direct access to the server or have the ability to
is the information you want to receive from upload your own scripts or programs to the cgi-bin directory. Although this is
your visitor. less common for security reasons, some ISPs do allow this.
Action The location of the script that will be handling If this is the case, you will find a wide variety of scripts and programs
the form. (This is not to be confused with available on the Internet—often for free—which you can use. Some servers
Freeway Actions.) also provide free form scripts, which you can use to process your forms. If you
need more guidance on this, contact Softpress Support.
In most forms, the visitor provides information and then clicks a
Submit button. The script handler processes the form and sends the Using “mailto:”
results/information back to you at the email address you’ve specified in the It is possible to set up forms without referencing a forms handler on the
Form Setup dialog. The form may also be configured to provide feedback to server. Instead, for the form action you can simply insert “mailto:” followed
the sender, often by redirecting them to a “thank you” page. by your email address. If the visitor’s browser is properly configured, this can
theoretically generate an email response that is sent automatically to your
Setting up a form
email account, containing the information from the form.
Creating a basic form in Freeway is simple—you just draw boxes using the
relevant drawing tools and label them appropriately to tell the visitor what However, this is an unreliable way of handling the results of a form. We
information to provide. However, for the form to actually work, more effort recommend that you use a forms handler (that is, a script for handling or
is required. processing your forms) designed for that purpose rather than the “mailto:” tag.
You must create a Submit button or there will be no way for the contents of
the form to be sent back to the server.
You must also enter a form action into the Form Setup dialog on the Page
menu (see Form setup on page 295). The action is usually the location on the
web server of the script that will be handling the form.
What you type into the Form Setup dialog depends on the script or program
that is going to handle the form. If you already know how to use forms and
have access to the relevant scripts or programs, then this should be all you
need to get started. If you don’t, however, then you need to obtain guidance
To the left of the “=” sign is the Name and to the right is the Value.
Form items are a unique type of item within Freeway and behave in a similar
way to boxes containing plug-in content. You create them in the same way
that you create other items, but once they are drawn, you cannot convert
The form tools them to another format, such as a GIF item.
drop-down menu Note: Form items cannot be overlapped unless they are created as CSS layer
on the Toolbar. items. Freeway 5 Express does not support CSS layer items.
Freeway 5 Pro on
the left; Freeway To create a form item, select the tool for the type of form control you want and then
5 Express on the draw a box. The form control will be displayed when you release the mouse.
right. You can move and resize form items that you have drawn as you can any
other item. You can select options for form controls using the Inspector
palette’s Item General panel and Item Output panel. The options available
to you in the Item Output panel will depend on the type of element in
question.
The Toolbar and Tools palette provides six tools for use in creating form
You can also insert form control items into cells in a table or into a run of
items: Checkbox, Radio button, Button, Text field, Popup menu, or List
text in an HTML box, using the commands on the Insert menu. Using inflow
and Text Area. You can also use the Insert menu to add form control items
items you can control the style of form item labels (for more information
to your page.
on creating inflow items, see Inflow items on page 69). Tables can be useful
Note: Freeway 5 Express does not have a Tools palette. for aligning form controls and their associated text labels, as can grouping
elements together (for more information about using tables, see Working with
tables in Freeway on page 251; for information about grouping items, see
Group command on page 61).
Power Tip: Form item labels will publish to a browser using the “default”
style. To make the labels match your site’s main text style, sketch the form
item, go to the Inspector palette’s Item Output panel and delete the Text
field contents. Resize the form item’s box to just leave the item, and create
an HTML or graphic item for your label. Group both items to keep them
together.
formbox = ON
Power Tip: If you insert the checkbox (or radio button) as an inflow item,
you can enter the text and style it yourself. See Inflow items on page 69.
sex = f
You can set the button options using the Button Item Output panel in the
Inspector palette.
Name This is used in JavaScript to identify the button
and is also returned with the form. You do not
need to set this option for normal forms.
Value This is the text which is shown on the button in
Freeway and on the web page.
A Reset button is optional. It clears the form completely, which is useful if
Type Set the button to Submit, Reset, or Button
the user has made a series of errors while completing the form or wishes to
reset the form to its initial state for any reason. from the popup menu.
A Button button is not used for conventional forms but can be used to
execute a JavaScript command.
Note: The button in Freeway’s design view represents the Mac OS X browser
button. The button style is drawn from the host computer’s graphics
routines, and will appear differently in different Mac browsers, and appear
differently again in Windows browsers.
email = fred@softpress.com
up or down list
New Choice/Value pair Delete Choice/Value pair
Edit Choice/Value pair
You can create larger fields for visitors to enter text into, if you wish them
The set of icons at the bottom of this panel allow you to create a new Choice/ to provide more information than would be convenient in a one-line text
Value pair, edit an existing pair, remove a pair, or rearrange the order in field—this is called a text area. In the browser, text areas have scroll bars
which the pairs appear. which become active when the user adds more text than the field can display
at one time.
When you wish to control which option is initially active in the menu or list
in the browser, you can do so by editing a Choice/Value pair and turning on
the Initially Selected checkbox in the Edit Choice dialog. Only one option
in a list may have this attribute turned on at one time (unless the Multiple
selection box is checked). If you have already set one option in a list to be
the initially selected choice, and repeat this for another, this attribute is
automatically turned off for the previous option.
Text area options
Power Tip: You can quickly change the Choice/Value pair by clicking the √
column next to the pair’s name in the Inspector palette. Name This identifies the text area. It is not displayed on
the page but is sent back as part of the response
The results you receive for the above example will be something like:
when the form is submitted. The name can also
be used to identify the text area in JavaScript.
language = f Text This field allows you to enter some default text
which the visitor can either leave as it is, add to
or overtype with their own text. This is optional.
Note: This section refers to instructions in the example set out on page 296.
Method instruction 1 You can choose from two methods for sending
the data in the completed form to the server,
POST and GET. Unless you are told otherwise,
you should always leave Method on the option
POST. This sends the information to the server
as an actual data stream, whereas GET sends
the form information as part of the URL.
Action instruction 2 This is where you specify the location on the
Internet of the script or program that will
handle the form results. Note that this can be
located on any server anywhere in the world,
and does not necessarily have to point to the
action is expressed as a URL. Make sure not to When you ask your ISP about setting up a form, they might give you
enter it in quotation marks. instructions in HTML code format. It can be a little difficult to work out where
You can test your form if you wish by pointing this information needs to be entered in the Freeway Form Setup dialog; the
it at one of the URLs below—this is a service ISP may provide a script like the example below.
run free of charge by the NCSA (National Center Example form setup code:
for Supercomputing Applications), and will
return a page to the browser showing the 1 2
information that was sent to it. You cannot use <form method=POST action="/cgi-bin/FormMail.pl">
this action on a form you publish on the web, 3a 3b
as it is the visitor who will receive the results <input type=hidden name="recipient" value="email@domain.com">
of the form, not you! Use it only for testing 4a 4b
forms as you construct them, and use it in <input type=hidden name="subject" value="The email subject">
moderation, as it is a free service. 5a 5b
For testing forms using the POST protocol: <input type=hidden name="redirect" value="http://www.domain.com/thethankspage.html">
http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query 6
<input type=text name="email">
For testing forms using the GET protocol:
http://hoohoo.ncsa.uiuc.edu/cgi-bin/query
</form>
Encoding If you wish your form to submit information in
a different language encoding, you can specify It all looks very daunting, but getting these instructions into Freeway is
the encoding type here. You do not normally straightforward. Copy the script (it will likely have been sent by email or
need to enter any information into this field. will appear on the support section of your ISP’s web site) to your clipboard
Hidden Fields Many form-handling programs or scripts by selecting it and choosing Copy from the Edit menu in whatever program
require additional information (parameters) your viewing it. Go to the Freeway page on which the form appears and
to be returned along with the contents of the choose Paste Special… from the Edit menu. Now check the Form Setup
form. For example, a program which forwards dialog and the data will have appeared.
the completed form details to an email address Alternatively, you can add the information yourself.
would require to be told which email address
The first line of information which starts <form and ends with a > needs to
the completed information was to be mailed
go in the Form Setup dialog. method=POST means that you need to select
to and the Subject line to use for the email. For
POST from the Method popup. This is the most common setting for the
information on hidden fields that may be added
Method. The text in quotes after action= needs to go into the Action field.
to your form, see Hidden fields on page 297.
This is the link which actually calls up the form on the server. You must not
put quotes around this as Freeway will add quotes for you.
message will appear instead when the visitor If your form sends credit card details or other sensitive information, you
submits the form. This may be called resulturl should make sure that this will be transmitted securely so that it cannot be
in some forms. intercepted by hackers. The best way to do this is to have the form submitted
Less common hidden fields via a Secure Server. When you use a secure server, the information is
encrypted by the browser before it is transmitted across the web. Your web
required This is a comma-separated list of the fields
provider may be able to provide a secure server to process your forms—
which the user must fill in. The value would
although they may charge extra for this service. If you are selling on the web,
be something like: email, realname, address1,
you will probably find that customers are reluctant to buy your products if
address2 and so on. (It’s a good idea to limit this
their credit card information is not secure.
to what is really required, and indicate those
fields with an “*” on the original form, as some Another option is to call the customer to take the credit card information
people find long forms annoying.) separately. You can also set up an account with an Internet clearing service
so that you don’t need to deal with the financial transaction at all—a third
sort Determines how the fields will be sorted in the
party processes the credit card transaction and credits the money to your
email. The value would either be alphabetic or
account. However, this may involve a substantial charge.
order: name1, name2, name3.
You will need to find out the specific details for the form from your ISP. Where to find out about forms
If you need help setting up your form after receiving the necessary You’ll often find the information on the web site of your web space provider
information from your ISP, contact Softpress Support. (look in the support section for any information about forms, CGI, or scripts).
Or call up and ask about standard scripts for forms—if they don’t have a
Form validation form provided as standard, ask if you can install your own.
It’s often a good idea to have the form contents checked automatically
before they are submitted to the server and sent via email. For example,
if you need to return information to the person by post, you may want to
require that all the address fields are fully filled in. The script may have
some checking built-in, but you can also add additional JavaScript to
check the form fields. We have a set of Freeway Actions called “Validate
Form Suite”, available from the Softpress KnowledgeBase web site
http://www.softpress.com/kb/article.php?id=545, which will
do this for you.
Note: The Validate Form Suite of Actions is for Freeway 5 Pro only.
For all of us, the web is increasingly becoming a part of everyday life. We use
it for finding news, shopping, paying bills, searching for jobs, entertainment,
Accessibility Report FW 5 Pro only
and much more. Because it now plays such a vital role, it is important that The Accessibility Report dialog in Freeway Pro displays a list of the
the content we put on the web be available to everybody, including those who accessibility issues associated with the current document or page. The
are using assistive technologies such as screen readers or braille converters. information about each issue tells you what the problem is and which item
or page the problem is associated with. If you move the mouse over each item
in the list, a help tag is displayed explaining why the issue is a problem for
accessibility.
To view the Accessibility Report for an individual page, select the desired page
in the Site Panel and choose Accessibility Report… from the Page menu. To
view the Accessibility Report for the current document choose Accessibility
Report… from the File menu.
The following types of issues are reported: problems with pages (e.g. absence
of a title), problems with items (e.g. issues with alt text, form items without
placeholder text, too much consecutive graphic text, lack of contrast between
text and background), problems with links, problems with access keys,
and problems with styles (e.g. use of the blink style). Freeway also lists text
phrases that have links attached so that you can check that they would make
sense when read out of context by a screen reader.
In cases where there is a problem with alt text, the Accessibility Report
dialog provides a text field where you can edit the alt text.
the Site Panel and choose Usability Report… from the Page menu. To view
the Usability Report for the current document choose Usability Report… Freeway 5 provides some options on the Preview Toolbar that can help you
from the File menu. to assess how accessible a page is.
The following types of issues are reported: problems with pages (e.g. absence Text Size
of a title), problems with items (e.g. combined graphics covering an entire Clicking on the Text Size buttons will increase or decrease the size of HTML
page, HTML items with text overlapping graphic items, text output as a JPEG, text. This can be useful for testing how usable a web layout is at different text
excessive use of graphic text, multiple spaces in HTML text, paragraphs split sizes. Visually impaired readers may prefer to use larger than normal text
across flow-linked items), and problems with styles (e.g. use of the blink style, sizes. You can also use the standard browser shortcuts: C+ and C-.
use of font sets that do not contain generic alternatives).
Style sheet FW 5 Pro only
The Accessibility style sheet (available from the Style Sheet popup)
displays how your web page might look to users who are using an
accessibility style sheet in their browser.
Refresh
This option will reload the page, as in a browser.
Images
Clicking on the Images button will hide or show images on the page. Most
browsers will display alt text when images are hidden—but there are some
versions of Safari which fail to do this. Freeway uses Safari’s Webkit engine to
preview web pages, which means that it will mirror Safari’s behavior in this
respect.
Clicking on B/W will toggle between displaying the page in black and white
(grayscale) and in color. If parts of your page become unreadable when it
is displayed in grayscale, you should consider using different colors for the
benefit of users who have some form of color blindness.
A side-effect of using this option is that JavaScript is disabled when the page
is displayed in grayscale.
Accessibility
Click on the JavaScript button to disable or enable JavaScript in Freeway’s
Preview. Some users may have JavaScript disabled for security reasons, Alt text
and some PDAs and mobile phone browsers do not have JavaScript support. Alt text is helpful for people who use assisitive technology, such as screen
In addition, JavaScript effects may be inaccessible to people using a screen readers, and for people who are using handheld devices or have low
reader. bandwidth connections and choose not to display images.
This option can help you to check that your page functions correctly when Freeway allows alt text to be set on images and map areas.
JavaScript is disabled. You should also check with JavaScript turned off in a Select Alt Text in the View menu to view alt text and hide images.
real browser.
Select Alt Text… in the Page menu to display the Edit Alt Text dialog. This
allows you to edit alt text on the current page and reports on any problems.
The Accessibility Report dialog (available from the File and Page menus)
reports on problems with alt text, and allows you to edit the alt text for these
items.
Select Show Alt Text from the Site panel menu to display alt text in
the Site panel. Problems will are indicated by a warning badge on the item’s
icon. O-click on the alt text to edit it.
Access keys
Access keys are a way of providing keyboard shortcuts that offer an
alternative way of navigating a page. Unfortunately, they may also conflict
with keys that are already being used by assistive software.
See the following web pages for a list of recommended UK Government access
keys, and a discussion of problems:
http://www.hobo-web.co.uk/tips/36.htm
http://www.hobo-web.co.uk/tips/37.htm
Access keys can be set in the Edit Hyperlink dialog and in the Form Output
panel of the Inspector palette.
Forms can be made more accessible by the use of form labels and fieldsets—
see the Fieldset Action on page 348 and the Form Item Label Action on page
349.
Select Tab Order in the View menu to show the tabbing order of form items.
The tabbing order of form items is normally the same as the reading order
of items on a page: items that are near the top left of the page come ahead
of items that are further down or to the right (assuming left-to-right reading
order). In the case of layer items, the tabbing order is the same as the stacking
order: items that are further back in the stacking order precede items that are
nearer the front of the stacking order.
Language
The Page Output panel of the Inspector palette contains an option to set
the language of a page. This is helpful for screen readers. In addition, any
spelling language that is assigned to text is now output.
Tables
The Inspector palette provides the following options to improve accessibility
with tables:
◆ The Table Cell panel can be used to define table headers (helpful for
screen readers).
◆ The Table Output panel contains a Summary field. This can be used to
summarize the table’s contents for the benefit of screen readers.
For more information about using Freeway Actions, see page 312. You can use one of several methods to add code to the Freeway document
depending on what you want to do:
◆ Use a dialog box for adding code to a page.
◆ Extend the code generated for specific objects.
◆ Reference external URL content when the page is viewed.
◆ Insert code at a specific point on the page (markup items).
◆ Import external HTML into a document.
◆ Use a Freeway Action, which will automatically place code in Freeway’s
output when you publish. For more information on using Freeway
Actions, see page 312.
The HTML Markup dialog provides a simple but powerful means of adding specific items
any other custom HTML code or script which needs to be added for a page.
When you need to add code to the HTML used to represent a specific item,
Select HTML Markup… in the Page menu and choose the section of the
you can use the Extended… command. You’ll see this command appear in
HTML document into which you wish the code to be inserted from the popup
several places in Freeway: on the Item menu, in the Edit Styles and Edit
menu and paste or type the code into the text field below.
Hyperlink dialog and on the Page menu. It is also possible to extend the
code generated for frames and for rows and cells of tables created in Freeway.
This method is used to “extend” the HTML code by inserting extra code inside
the HTML tag that Freeway generates for that object. When you choose the
Extended… command, a dialog box appears in which you define one or
more “name/value” pairs for the object. You create a new name/value pair by
clicking New… in the Extended dialog. The tag that is going to be extended
by the name/value pair you define depends on the type of object selected at
the time and which Extended… command you’re using, and is shown at the
top of the dialog box.
◆ When you use the Extended… command on the Page menu, the name/
value pair you define is added inside the <BODY> tag for that page.
◆ When you use the Extended… command in the Edit Hyperlink dialog,
the name/value pair you define is added inside the <A HREF> tag. You
must define a hyperlink on the selected item in order for your name/
Freeway allows you to store separate pieces of code for each of the different value pair to be added to the output.
sections of the HTML file created for the page so, for example, you can add ◆ When you use the Extended… command in the Item menu, the tag
code into the <HEAD> section as well as at the end of the <BODY> section for that will be extended depends on the selected object on the page—this
the same page. might be <IMG> if a graphic element is selected, or <EMBED> if a
This dialog would often be used when you need to add some JavaScript code multimedia element is selected.
to the page. The best place to add JavaScript code would be in the section Other items that can be extended in this way are frames and framesets (using
Before </HEAD>. This places it in the part of the page, which is processed Extended… from the Item menu), Form items, CSS Layer items, and Styles
before the <BODY> or page content is loaded. (these last two apply only to Freeway 5 Pro.).
Important: If you specify external content in a URL box using the HTML
option, this can only be previewed when the pages are served by web server
software—you will not see the included HTML when previewing locally in
your browser. This is because the comment used to reference external HTML
is not an instruction to a web browser but rather an instruction to web
server software.
This also requires the web server to be set up to support “Server Side
Includes”. Many web servers disable this for security reasons.
◆ When you specify a URL box by choosing Image, the URL you specify is
inserted into the Freeway output inside an “IMG” tag as follows:
<IMG SRC="/cgi-bin/counter.cgi" BORDER=0>
◆ When you specify a URL box by choosing HTML, the URL you specify
is inserted into the Freeway output inside an “include” statement as
follows:
<!-- #include virtual="included.inc" -->
Nothing happens when the page is viewed locally, but when the page is
requested from a web server, the server automatically extracts the above
comment and substitutes the code contained in the file referenced by the URL.
This file can be a complete HTML document, but it is better if it just contains
the necessary piece of HTML required to achieve its purpose.
Note 1: Freeway doesn’t read or modify the code that you add in a
Markup item. If the code refers to any images or other files which need to
be uploaded to the web site, you will have to upload these manually (see
Dedicated FTP tools on page 181).
Note 2: It’s important to allow plenty of space in the browser for the code
you insert by making the Markup item box on the Freeway page large
The above example will insert a “linkexchange” counter on the page. The enough to hold that content. This will prevent that item from causing the
inserted code will appear just as you have entered it. layout to break up in the browser. It also helps when you are trying to
incorporate that item into the rest of your design.
To edit a markup item, double-click on it on the page. Use the HTML Markup
dialog to edit it.
If you have HTML content that you wish to reference within an existing page
in Freeway, you can import an HTML text file from disk into a box in Freeway.
The imported HTML can’t be displayed or edited within Freeway, but it will be
visible when the page is previewed in a web browser. The external file must
be available when the document is published.
Note: The file to be imported must be named with the file extension “.htm”,
“.html”, “.asp”, “.inc” or “.php”.
3 When the text file has been successfully “imported”, you will see a text
file icon and a reference to the location of the imported file displayed in
the box on the page.
You can use complete HTML pages if you need to, although some web
browsers may react unpredictably. We recommend that if you are using this
feature, the imported HTML file should be edited so as to contain only the
parts you actually need.
Bear in mind that some commands in the imported HTML file may conflict with
commands used by Freeway, which may cause unpredictable results in the browser.
An example of this is imported HTML that contains HTML form commands: form
elements created in Freeway may fail to reproduce correctly when the page is viewed
in the browser when the “combination page” is viewed.
Actions are Freeway’s plugin technology. They provide you with the ability
to quickly and easily add functionality, for example a rollover, to your web
page. There are many Actions built into Freeway that cover a wide range
of features. In addition, a variety of third-party Actions are available to
download and use with Freeway Pro.
Quick Finder
Installing and managing Actions...................................................................................... 312
Rollover.................................................................................................................................. 317
Targets.................................................................................................................................... 325
Buttons Action...................................................................................................................... 350
Navigation Actions ............................................................................................................. 353
Graphics Actions................................................................................................................... 371
Shop Actions.......................................................................................................................... 403
What are Freeway Actions? Installing extra Actions
Working with Actions
Freeway 5 Pro and Express come with a set of Actions which you can use to
add functionality and dynamic effects to web pages. Actions can be installed by dropping them directly onto the Freeway
application icon, either in the Dock or in the Finder. You can also install
This chapter gives information on the use of the “standard” Actions that
Actions through the Edit Actions dialog (see The Edit Actions dialog on page
ship pre-installed with Freeway. Information on the use of custom Actions
313). You can use newly installed Actions immediately—you don’t even need
should be sought from the developer, or may be available on the Softpress
to restart Freeway when you add them.
KnowledgeBase.
In Freeway 5 Pro, custom Actions are stored in
They are comparable to plug-in modules, allowing you to do some remarkable
~username/Library/Application Support/Freeway 5/Actions
things, which would require sophisticated programming on your part in other
programs. Actions can be as simple as making an image change color when a In Freeway 5 Express, custom Actions are stored in
visitor runs their mouse over it, or as complex as controlling forms, browser ~username/Library/Application Support/Freeway 5 Express/Actions
windows and multiple images, or for such tasks as creating navigation systems, You should ensure that the Action has a .fwaction extension prior to
processing graphics, or creating an on-line shop. installation. Other extensions, such as .act3 used for Freeway 3 Actions, will
Freeway 5 Pro allows you to add further Actions which enhance the also work.
functionality of your web pages. Freeway 5 Express allows you to add
Note: It is important to ensure that downloaded Actions for Freeway 5
new Actions that are encoded. You can download custom Actions from the
Express are the correct format. Freeway 5 Express can only install custom
Softpress KnowledgeBase (http://www.softpress.com/kb/), or you
Actions that are encoded for use.
can create your own Actions following the guide to developing Actions, which
is also available from the KnowledgeBase. At the end of this section we have
listed some Actions developers’ web sites where you can find other useful
Actions. See page 314 for more information.
It’s also helpful to subscribe to the FreewayTalk web forum
(http://www.softpress.com/support/freewaytalk.php) for
active discussions about the many aspects of using Freeway and a wealth of
tips on using Actions from the Freeway community.
Duplicate Actions
If you have two Actions of the same type with the same name, Freeway
will disable the older version by default and will warn you when you run
or switch into Freeway. If you look in the Edit Actions dialog you will be
able to find out which one has been disabled. If you wish to use a different
Action, you can disable the Action currently in use and enable the one that
has been disabled.
Because Freeway Actions are contained in standard text files, this means When Actions are applied to parts of a design in Freeway, there are various
that you could modify them according to your own needs. Some of the visual cues which appear as you work.
Actions are very simple, but some are more complex and can interact with
other Actions, so it’s probably a good idea not to edit them unless you know
what you are doing.
Freeway 5 Express Actions are encoded, so it is not possible to edit them.
Rollover click image The image that appears when a visitor clicks
their mouse on the rollover item.
What is a rollover? trigger An item that causes an effect in another item on
the page or in another page or frame.
Note: You don’t need to import an image into the box. You could type text
or give the item a fill color.
Freeway Actions
(see Creating hyperlinks on page 143). This method allows you to create a rollover with images that are already on
In order to see the effect of the rollover, you can preview your page in your Freeway page. While the method described above requires that you select
Freeway’s Preview or a browser. When viewing in the browser, if the image a web-ready mouseover image imported from an external file, this technique
doesn’t appear, you may need to refresh the browser by typing Cr. Each allows you to use non web-ready graphics or images created from graphic
time you edit the rollover and then preview in the browser, you may need to text or from shapes drawn with Freeway’s drawing tools.
place the cursor over the rollover item and type Cr. 1 Using one of the three graphic drawing tools, create a graphic item on
the page.
Note 1: It’s not possible to refresh Freeway’s Preview. You may also find
2 Import an image using the Import… command in the File menu. This
that the browser you are using has cached images, and they may not refresh
image will serve as the normal image.
properly until you either clear the cache or quit and relaunch the browser.
Note: You don’t need to import an image into the box. You could type text
Note 2: The graphic file that you select for the mouseover image will be scaled to
or give the item a fill color.
fit the dimensions of the rollover item. For best results, make sure that the image
you’ve used for the mouseover image is exactly the same size as the rollover item 3 To make a copy of this item, click on it with the Selection tool (or C-click
or it will appear distorted or badly aligned in the browser. on it) and begin to drag it. Move it a short distance, and before you release
the mouse button, hold down the O key. The mouse cursor will change to
Power Tip: To ensure that your rollover item is exactly sized for your . With the O key held down, release the mouse button.
mouseover image, import the mouseover image (temporarily) into the box, 4 While the copied item is selected, import an image to serve as the
then select Fit Box to Content from the Item menu (CSd). Then mouseover image, or alter the text or background color.
once the box is the correct size, you can clear the graphic content (Cb)
Note: To enter text in the new item, you have to clear the original graphic,
and import any content that you may want.
which can be done by selecting the item and typing Cb.
5 Select both items and choose Align… from the Item menu and use the
dialog to place one directly on top of the other.
6 If you are using Freeway 5 Pro, and both items are layers: choose Group
from the Item menu. If you are using Freeway 5 Pro with layers off, or
Freeway 5 Express there is no need to Group the rollover components.
7 In the Actions palette, click on the button.
8 In the Add Item Action dialog choose Rollover. If you have grouped the
items in step 6, you need to ensure the group is selected, not one of the
individual items.
Images option has been chosen and the panel appears like this: (see Creating hyperlinks on page 143).
In order to see the effect of the rollover, you can preview your page in Freeway
or a browser.
Power Tip: Modifier keys offer additional features when in the Rollover
Action Images view:
• Clicking on a check while pressing the L key will disable all items in
that column
• Clicking on a check while pressing the O key will disable that item in all
states
• Clicking in the check area while pressing the O key will turn the cursor
(This image shows the Actions palette as it appears in Freeway 5 Pro into a Grabber hand, allowing you to pan long lists of items
using CSS layers, with both rollover elements grouped. The group item is • Clicking on a column’s title while pressing the O key will turn that
labelled item2.) column on and off.
Power Tip: Naming each item which makes up the rollover makes it easier
to identify each state in the Actions palette. See Changing attributes for
items: Item titles on page 55 for more information.
10 To set the mouseover image, you first need to define the source of the
image. By default, the MouseOver column will be grayed out to indicate
that it is off—that is, that no mouseover image has been chosen.
11 All items will have a check in the Normal column. Set the normal and
mouseover images by clicking in their relevant columns.
Freeway Actions
mouseover image To place a graphic item behind the rollover so that it will appear embedded,
create an item and turn off the Combine Graphics checkbox in the Item
Revealing images
General panel of the Inspector palette. Then place it in front of the rollover
One use of Rollovers is to reveal hidden images as the mouse moves over certain
and choose Send to Back from the Item menu.
areas on the page. For example, as the mouse passes over an image of a map,
a picture of a vineyard could appear in an area famous for its wine. To achieve Note 1: When an item with an Action applied is overlapped by another
this effect, you would start with the image of the map then follow these steps: item which causes them to combine, the Action will apply to the combined
1 Draw some empty graphic boxes on top of the image in the areas where image. If you do not wish this to happen, it is a good idea to turn off
you want the hidden images to appear. Combine Graphics for the item to which the Action is applied in the Item
General panel of the Inspector palette.
4 In the Actions palette Images view, set the image to be hidden for the
normal image (by clicking on it in the Normal column to remove the
check), but displayed in the mouseover image.
Now, when the page is published, images will appear when they are moused
over. To make the rollover item a hyperlink, select it and attach a link to it
(see Creating hyperlinks on page 143).
Freeway Actions
preloaded and cached by the browser. Setting for targets. This allows you to specify which
it to No will prevent automatic preloading. target number will be triggered when the user
Although this is sometimes beneficial when moves their mouse over the rollover item. The
large graphics are used, it causes a lag when implication of this is that you can make the
the mouse moves over the image for the first rollover item cause an effect on other items on
time. Setting it to Yes forces the browser to load the page or even other pages. The targets that
all of the mouseover images once the rest of a given trigger affects when the mouse moves
the page has been loaded. Although this causes over the rollover item are all of the ones that
the mouseover to be more responsive, it leads share a common click number.
to extra network activity. Yes is the default
Click # Pertains to the use of the rollover as a trigger for
setting, as it is general practice to preload
targets. This allows you to specify which target
mouseover images.
number will be triggered when the user clicks
Find Targets Determines the frameset frame where the Action on the rollover. The targets that a given trigger
should target the rollover effect. If your page is affects when the mouse is clicked are all of the
contained within a frameset the code can be told ones that share a common click number.
to start its search from the top (the outermost
frameset), parent (the frameset that wraps
directly around this page) or this (simply within
this page itself). Can be used, for example, to set
a rollover button in one frame which activates a
target rollover item in another frame.
Target Group Pertains to the use of the rollover as a trigger
for targets. This sets the name of the group to
which the trigger is sent when the rollover is
used to trigger targets. This option allows you
to have different groups of targets that can
receive triggers. The names of the target groups
only serve to differentiate between chains. You
can have a maximum of twenty target numbers
in a group—though there can be more than one
target with the same number. The default name
is Indigo.
The rollover Images view shows the items involved in the rollover you the normal image when the mouse moves over
have created. it in the browser (the mouseover image). There
are four options in the MouseOver column’s
popup menu:
Off/On Determines whether Freeway will publish a
mouseover image. If this is off, there will be no
apparent change when the visitor moves the
mouse over the image in the browser.
None Enables the rollover function but selects no
items to act as the mouseover. The result is that
when the mouse moves over the rollover, it
seems to disappear.
All Enables all the selected items. You can then
select which ones you want.
Normal The Normal column represents the image that Select… Allows you select an external image for use as
appears in the browser when the rollover is not the mouseover image.
activated (the normal image).
Click This column represents the image that will
appear when the rollover is clicked. It has the
same options as MouseOver (Off/On, None,
All, and Select…) and they affect the On Click
image in the same way as the MouseOver
options affect the mouseover image.
Freeway Actions
1 Using one of the three graphic drawing tools, create a graphic item on
One of the keys to understanding Freeway Actions is to understand targets. In the page.
the previous section, we saw that a rollover can change its image when the 2 Give the item some content by importing an image or giving it a fill
mouse moves over it. But a rollover can also trigger other events—such as color and/or entering some text.
replacing an image or images somewhere else on the page with new images.
3 Attach a Target Image Action to the item, either by choosing Target
The items that receive these triggers are called targets—they “listen” for
Image from the Actions submenu in the Item menu, or by clicking the
something to trigger an effect on them. A target can be an item on the page
button in the Actions palette and selecting Target Image from the
or it can be a new frame or a new page. The trigger that talks to it could be
Add Item Action dialog.
any number of things, including a graphic item, some text, or a timer.
4 In the Actions palette, click on the Parameters button to switch to the
Some key terms Parameters view.
It’s important to be familiar with the concept of rollovers and triggers in 5 Choose Select… from the Image 1 popup menu to set a target image
order to use targets effectively, so it is recommended that you acquaint (the image that will replace the normal image when the mouse moves
yourself with the previous sections of this chapter, in particular see Key Terms over the rollover item). Select an image in the Open dialog. Note that this
on page 317. Here are two additional states relating to targets: graphic should be in a web-ready format—that is, a GIF, JPEG, or PNG.
normal state The state of the target item when it isn’t being 6 Make sure the Restore popup is set to Yes. This will cause the normal
triggered, that is, when it is not being affected image for the target item to be restored when the mouse leaves the
by a trigger, such as a rollover or a timer. rollover item.
7 Now select the rollover item. In the Actions palette click on the
triggered state The state of the target item when it is being
Parameters button to switch to the Parameters view. In the
triggered.
MouseOver # popup, select 1. This corresponds to target Image 1,
Using targets in Freeway Actions which has already been selected and applied to the target item. Notice
The following examples will use a rollover to trigger a target image. They that both rollover and target items have a chain name of Indigo. This
assume familiarity with the concepts and procedures discussed in the is the default chain name, but can be changed in the Parameters view
Rollover section beginning on page 317. Target Group popup menu.
Preview your page in a browser. Move the mouse over the rollover item and
To use a target item, you should first create a rollover as described above. In
you will see that the target item also changes.
these examples, the target item will be triggered when the visitor moves their
mouse over the rollover item. There are two ways to create a target item in
Freeway: using an external graphic file for the triggered state, and using items Normal
on the page as images for the triggered state.
MouseOver
triggered state the Images option has been chosen and the panel appears like this:
Make sure you have already created a rollover item on the page.
1 Using one of the three graphic drawing tools, create a graphic item on
the page.
2 Give the item some content by importing an image or giving it a fill
color and/or entering some text.
3 Make a copy of this item by clicking on it with the Selection tool and
dragging it. Move it a short distance, and before you release the mouse
button, hold down the O key. The mouse cursor will change to .
With the O key held down, release the mouse button.
4 Select the copied item and import an image to serve as the target image.
9 To set the target image, you first need to define the source of the image.
Note: To enter text in the new item, you have to clear the original graphic,
By default, the Image 1 column will be grayed out to indicate that it is
which can be done by selecting the item and typing Cb. off—that is, that no target image has been chosen.
5 Select both items and choose Align… from the Item menu to place one 10 Both items will have a check in the Normal column. To disable the
directly in front of the other. image that you don’t want to appear in the normal state, click beside it
6 Click on the items with the Selection tool to select one for applying the in the Normal column to turn off the check. Set the appropriate image
Target Image Action. in the Image 1 column.
7 Attach a Target Image Action to the item either by choosing Target 11 Click on the Parameters button to switch to the Parameters view.
Image from the Actions submenu in the Item menu or by clicking the 12 Make sure the Restore popup is set to Yes. This will cause the normal
button in the Actions palette and selecting Target Image from the image for the target item to be restored when the mouse leaves the
Add Item Action dialog. rollover item.
Freeway Actions
button to switch to the Parameters view. In the MouseOver # popup The Target Chain popup for the Rollover Action allows you to select a
select 1. This corresponds to target Image 1, which has already been number between 1 and 20. Each Target Image item can have up to twenty
selected and applied to the target item. Notice that both rollover and target target images applied to it, each of which corresponding to a Target Image
items have a Target Group name of Indigo. This is the default chain number. This allows you to trigger up to twenty different target image effects
name. on the page.
One example of how this might be used is to have a number of different
rollover items on the page—for example, navigation buttons—each with a
different number selected in the MouseOver # popup. Each rollover would
then trigger a different target image to be displayed in a single Target Image
item. Each target could display some text describing the page that will load
when the visitor clicks on the relevant navigation button.
Preview your page in a browser. Move the mouse over the rollover item and
you will see that the target item also changes.
Freeway Actions
as the target image. This graphic can be a GIF, when the target item has not been triggered. It
JPEG, or PNG file. This image will be scaled to is the normal image.
the dimensions of the graphic that it replaces.
Image 1 … 20 These are the images that replace the normal
If you do not wish this image to be scaled you
image when the target is triggered by another
should ensure that the bounds of the graphic
item such as a rollover. The target item can
are exactly the same as the bounds of your
respond to twenty different trigger messages
Freeway item. A difference of even a few pixels
by displaying different images. There are four
can result in the image becoming distorted and
options in the Image column’s popup menu:
performing slowly in the browser.
Off/On Determines whether Freeway will publish a
On Click Refers to the image that will appear when the
target image. If this is set to Off, the target
mouse button is clicked. The choices are the
will not respond to trigger messages sent to the
same as for the MouseOver popup (Off, Items,
target chain with this number.
and Select).
None Enables the target item to respond to a trigger
The Images view but selects no images to display. The result is
The Image view shows the items involved in the target image item you that when this particular trigger is sent, the
have created. target item seems to disappear.
All Enables all the images. You can then select
which ones you want.
Select Allows you select an external image for use as
the target image.
Note: To set a hyperlink on the text rollover item, select the item and attach
a link to it (see Creating hyperlinks on page 143). If you do not apply a link,
The concepts behind triggers and targets have been discussed in the previous
the text rollover can still trigger target items but clicking on it will have no
sections of this chapter. This section will examine other Actions that either
effect.
trigger target effects or are triggered when a message is sent by an Action
such as a rollover.
Important: Freeway 5 Express does not support CSS layered items.
1 Random Rollover
◆ This is an Item Action.
◆ It is a trigger.
◆ It requires JavaScript.
The Random Rollover Action is a variant of the Rollover Action, and allows
you to create a random rollover effect. You can choose up to ten rollover
states and up to ten click states, so that when the mouse is moved or clicked
over the rollover in the browser, different rollover states will be randomly
displayed. Most of the parameters are the same as for the Rollover Action. You can choose from the following options in the Actions palette.
Select the Next Image Different checkbox if you want to ensure that the Text This is the text that will be displayed in the
same rollover state is not displayed twice in succession (as can happen with a browser with a link. Any target effects will be
strictly random order). triggered when the mouse moves over this link.
2 Text Rollover Target Group Sets the name of the group that the trigger is sent to.
◆ This is a free-standing Action. Changing this allows you to have different groups
◆ It is a trigger. of targets that can receive different triggers. You can
◆ It requires JavaScript. have a maximum of twenty targets in a group. The
default setting is Indigo.
This free-standing Action can be used to trigger target effects when the mouse
MouseOver # Allows you to specify whether the text rollover
moves over a text link. The Text Rollover Action can be created either by
item triggers a target chain. This means that
clicking the Action button in the Toolbar or the Tools palette (Freeway 5
you can make the Text Rollover cause an effect
Pro only) and selecting Text Rollover, or by selecting Text Rollover in the
on other items on the page or other pages. The
Action Item submenu in the Insert menu.
targets that a given trigger affects are all those
If the Text Rollover is inserted as an within a group (e.g., Indigo).
inflow item in a stream of text it will
pick up the styling of the surrounding
text. For more information about
creating inflow items, see page 69.
Freeway Actions
◆ This is an Item Action. until the mouse rolls over the rollover item again.
◆ It is a target. Sticky Causes the item to remain in its triggered state
◆ It requires JavaScript. until the mouse moves over another rollover
with the same target group. This option also
This Item Action allows you to display or hide an image in response to a affects any target images triggered by the
trigger. It can be hidden initially then displayed when triggered or displayed rollover.
initially then hidden when triggered.
Preload Determines whether the image is preloaded
The Target Show/Hide Image Action is applied to a selected graphic item
and cached by the browser, typically making it
on the page. To apply it, choose Target Show/Hide Image from the Actions
more responsive. This option is irrelevant if the
submenu in the Item menu or by clicking the button in the Actions palette
image is initially visible. For an image which
and selecting Target Show/Hide Image from the Add Item Action dialog.
is initially invisible, setting Preload to No will
prevent automatic preloading. Although this is
sometimes beneficial when large graphics are
used, it causes a lag when the mouse moves
over the image for the first time. Setting it
to Yes forces the browser to load all of the
mouseover images once the rest of the page has
been loaded. Yes is the default setting.
Target Group Sets the name of the group to which the target
image responds. Changing this allows you to
have different groups of targets that can receive
You can choose from the following options in the Actions palette. different triggers. You can have a maximum of
Initially Determines whether the image is visible when the twenty targets in a group. The default setting is
page is first loaded. The image is visible by default. Indigo.
Restore Refers to what happens when the mouse moves Target # Sets the number of the trigger to which the
away from the rollover item or other trigger for Action responds.
the target item. There are four choices:
Yes Causes the item to return to its initial state when
the mouse moves away from the rollover item.
No Causes the item to remain in its triggered state when
the mouse moves away from the rollover item.
◆ This is an Item Action. Initially Determines whether the layer is visible when the
◆ It is a target. page is first loaded. By default the layer is visible.
◆ It requires JavaScript.
Restore Refers to what happens when the mouse moves
◆ It can only be applied to layer items.
away from the rollover item or other trigger for
Note: Freeway Express does not support this or other layer Actions. the target item. There are four choices:
Yes Causes the item to return to its initial state
when the mouse moves away from the rollover
item.
No Causes the item to remain in its triggered state
when the mouse moves away from the rollover
item.
Toggle Causes the item to remain in its triggered state
until the mouse rolls over the rollover item again.
Sticky Causes the item to remain in its triggered state
until the mouse moves over another rollover
with the same target group. This option also
This Item Action should only be applied to an item that is set to be a layer. affects any target images triggered by the
Layers can only be used when the HTML level of the page is set to HTML 4.01 rollover.
or XHTML 1.0 in Freeway 5 Pro (Freeway 5 Express does not support layers). Effect Sets an effect that will be applied when showing
It is similar to the Target Show/Hide Image Action, but because it can be and hiding the layer. Choose Fade (a Scriptaculous
applied to a layer item, it can be used to show and hide HTML items as well effect) if you want layers to fade in and out.
as graphic items. This flexibility means that you can create more interesting
Target Group Sets the name of the group to which the item
rollovers. For example, you could create a popup menu by embedding items
responds. Changing this allows you to have different
with links in a layer item.
groups of targets that can receive different triggers.
To apply this Action to a selected layer item, choose Target Show/Hide Layer You can have a maximum of twenty targets in a
from the Actions submenu in the Item menu or by clicking the button in group. The default setting is Indigo.
the Actions palette and selecting Target Show/Hide Layer from the Add
Item Action dialog. Target # Sets the number of the trigger to which the
Action responds.
Freeway Actions
Action to create fading slideshows: ◆ This is a Page Action.
1 Create a layer item (HTML or graphic) and add some content. ◆ It is a trigger.
2 Open the Actions palette, by selecting it from the Window menu or ◆ It requires JavaScript.
from the Toolbar.
This Page Action allows you to control target Actions. It can trigger up to
3 Click on the button in the Actions palette and choose the Target twenty targets in sequence—that is, they will be triggered one after another
Show/Hide Layer Action from the list of Actions. at the time interval determined in the Speed field of the Action. After the last
4 In the Actions palette, set Initially to Hidden, Restore to Sticky, and trigger, the sequence starts again from the beginning.
Effect to Fade.
The Sequence Timer can be used together with a number of Show/Hide
5 Duplicate the item and change its content. In the Actions palette, Image items to make images appear sequentially at various places on the
change the Target # to 2. Repeat this step to add any further items, page. You could also use the Sequence Timer together with a single Target
incrementing the Target # each time. Image item to cycle through a set of images as a simple animation. However,
6 Select the page by clicking on a blank area. it may be more efficient to use an animated GIF for this purpose.
7 Click on the button in the Actions palette and choose Sequence To apply the Sequence Timer Action to a page, first ensure that nothing is
Timer from the list of Actions.
selected on the page. Then either select Sequence Timer from the Actions
8 Use the Actions palette to change the following Sequence Timer submenu on the Page menu, or by clicking the button in the Actions
settings: set Speed to 1000 and Trigger # to Yes for the total number palette and selecting Sequence Timer in the Add Page Action dialog.
of target items. E.g. if you have three target items that have the Target
Show/Hide Layer Action, set Trigger 1 to Trigger 3 to Yes.
To see your slideshow, click the Preview button. The speed of the slideshow
can be changed by altering the Speed setting for Sequence Timer, and the
fade duration can be changed with the Duration setting for Target Show/
Hide Layer.
6 Random Sequence
◆ This is a Page Action. This Page Action will simultaneously trigger all of the page’s target Actions
◆ It is a trigger. that share a particular Target Group. It does this at fixed intervals, which
◆ It requires JavaScript. is useful for causing a large number of Actions with different triggers to be
triggered simultaneously at a fixed interval.
The Random Sequence Action is identical to the Sequence Timer
Action, except that the triggers are sent in a random order rather than in a To apply the Target Group Timer Action to a page, you must first ensure
predefined sequence. that nothing is selected on the page. Then either select Target Group Timer
from the Actions submenu on the Page menu, or click on the button
in the Actions palette and select Target Group Timer in the Add Page
Action dialog.
You can choose from the following options in the Actions palette.
Speed This is the time interval between each trigger
(in thousandths of a second). The default is 500
(milliseconds), which means that an interval of
half a second will pass between each trigger.
Freeway Actions
Group Timer sends triggers to. Changing this The Target Load Frame Action should be applied to the frameset page itself
allows you to have different groups of targets and not one of the pages within it. The easiest way to select the frameset
that can receive different triggers. You can have page is to use the Frames palette. If the Frames palette is not displayed,
a maximum of twenty targets in a group. The select Frames from the Window menu.
default setting is Indigo. To select the frameset, click on the outer border within the Frames palette
Trigger 1 … 20 Each of these popups corresponds to a target as shown in the picture below.
number. At each interval, a trigger will
simultaneously be sent to all items that have
the same target number as the popups that are
set to Yes.
The Target Load Frame is a Page Action that is applied to a frameset page.
It is designed to respond to a trigger by loading a page into the frame. This
could be used to display information in a small frame at the bottom of the When you have selected the frameset correctly, attach the Target Load
screen to describe each item which the mouse moves over on the page. The Frame Action either by choosing Target Load Frame from the Actions
ability to load up a whole page into a frameset in response to a rollover or submenu on the Page menu or by clicking the button in the Actions
other trigger is an easy way to load up any kind of content—HTML, graphic, palette and selecting Target Load Frame in the Add Page Action dialog.
multimedia.
A small Action icon is attached to the frameset page in the Site panel
However, you should make sure that any pages loaded by the Target Load when the Action is correctly applied.
Frame Action will be fairly quick to download so that the page is responsive.
If you trigger the Action using a Sequence Timer make sure that the Note 1: Because you are applying the Action to the frameset, the gray box
interval is long enough to allow each page to load and display. with yellow writing that normally displays the name of the Action at the top
left of the page does not appear.
Note 2: The Target Load Frame panel will only appear in the Actions
palette when the frameset is selected as described above.
This free-standing Action Item can be used to open a new window of a specific
width and height when the mouse is clicked on a link. The Text Link to New
Window Action Item can be created either by clicking the Action button in
the Toolbar or the Tools palette (Freeway 5 Pro only) and selecting Text
Link To New Window or by selecting Text Link To New Window in the
Action Item submenu in the Insert menu.
If the Action is inserted as an inflow item in a stream of text it will adopt the
style of the surrounding text. For more information about creating inflow
You can choose from the following options in the Actions palette.
items, see Inflow items on page 69.
Frame This is the name of the frame which the pages
will be loaded into (that is, the target). If there is
no frame present in the frameset with that name
then the Action will do nothing when triggered.
Target Group Sets the name of the group to which the Action
responds. Changing this allows you to have
different groups of targets that can receive
different triggers. You can have a maximum of
twenty targets in a group. The default setting is
Indigo.
Source 1 … 20 Each popup can be used to select a page to
load into the frame in response to a particular
trigger. If a page is selected in a source popup,
the target will load the page into the named
frame when the trigger of the same number is
received. If a source is not set for a particular You can choose from the following options in the Actions palette.
trigger and the target receives that trigger Text This is the text that will be displayed in the
nothing will happen. browser with a link. Clicking on the link will
open a new window.
Freeway Actions
which the page is opened. If the link is clicked ◆ These are Item Actions.
and a window with that name has already been ◆ They are triggers.
opened, the same window will be used for the ◆ They require JavaScript.
new link. If you have a list of links on the page,
and you want each link to open into the same These Item Actions are very similar to the Text Link to New Window
window, use the same Window Name for each. Action. The Link to New Window Action opens a page in a new window
However, if you want each link to open its own when the mouse is clicked on an item, and the Pic in New Window Action
window, make sure that the Window Name for opens an image in a new window. This can be used to display a high-
each link is different. resolution version of an image when the visitor clicks on a thumbnail
version on the page.
Auto Close Choose Yes to automatically close the popup
The Link to New Window and Pic in New Window Actions can be applied
window you have linked to. The popup window
to a selected graphic item on the page. To apply them, either select the Action
page must have the Self Closing Popup
from the Actions submenu on the Item menu, or by clicking the button
Window Action applied to it for this to work.
in the Actions palette and selecting the Action in the Add Item Action
(For information about the Self Closing Popup
dialog.
Window Action, see page 348.)
The parameters for these Actions are basically the same as those for the Text
Page This is the page that will be displayed in the Link To New Window Action, but Pic in New Window has an additional
new window. parameter:
width/height The dimensions of the window in pixels. Image Allows you to select an image in a web-ready
Toolbar Determines whether the new window will have format such as a GIF, JPEG, or PNG to display in
a toolbar. the new window.
This Page Action redirects the user to a different page after a set number of
seconds. The most common use of this is for a splash screen—a screen that
loads up, often displaying a graphic or short animation for a few seconds
before the visitor is directed on to the main part of the web site. This Action
does not require JavaScript and is supported by most browsers, however it is
good practice to also put a link on the splash page so that the user can click
on the link in case they are not automatically redirected for some reason. This Page Action allows you to redirect the visitor to a frameset page if the
You should make sure that you have allowed enough time for the splash screen page has not been loaded in a frameset.
to load completely before redirecting the visitor to the next page. If you have a This might happen if your site uses frames and the visitor has stumbled
large image some visitors with slower connections might not see it at all. across your site via a search engine. In many cases, if they are not redirected
To apply the Timed Redirect Action to a page, first of all ensure that nothing to the correct frameset they may not be able to navigate the site. You may
is selected on the page. Then either choose Timed Redirect from the Actions want to redirect them to the home page of the site.
submenu on the Page menu or by clicking the button in the Actions To apply the Not in Frameset Redirect Action to a page, first of all ensure
palette and selecting Timed Redirect in the Add Page Action dialog. that nothing is selected on the page. Then either choose Not in Frameset
Redirect from the Actions submenu on the Page menu, or by clicking the
button in the Actions palette and selecting Not in Frameset Redirect
in the Add Page Action dialog.
Freeway Actions
Destination This is the page that will replace the page that
Multimedia items can be imported directly into Freeway and they will be
has the Action applied if it is loaded outside its
handled by plug-ins in the browser. (See Working with multimedia on page
normal enclosing frameset.
135.) The Actions provide a way to set specific options for those types of plug-
Note: This is a partial solution to the problem. Some people like to load the ins.
content of frames into a new window to view separately from the rest of the
page. If you use this Action, anyone attempting to do this will be redirected
back to the frameset. Another consequence is that anyone viewing your site
with frames disabled in the browser may also be redirected.
Standard QuickTime and Flash options are handled by Freeway in the Item
Output panel in the Inspector palette, but the QuickTime and Flash Extras
Actions provide additional options.
1 QuickTime Extras
QuickTime movies can be imported and displayed within Freeway, and a
number of standard options are available in the Inspector palette’s Item
Output panel. To gain some additional options, the QuickTime Extras Action
can be applied to an item containing an imported QuickTime movie.
To apply this Action to a selected item, either select QuickTime Extras from
the Actions submenu on the Item menu, or by clicking the button in
the Actions palette and selecting QuickTime Extras in the Add Item
Action dialog.
Flash movies can be imported and displayed within Freeway, and a number
of standard options are available in the Inspector palette’s Item Output
panel. The Flash Extras Action can be applied to an item containing an
imported Flash movie, adding the extra functionality of letting you edit any
embedded URLs in the Flash movie, and change its background color to match
with the Freeway page.
To apply this Action to a selected item, either select Flash Extras from the
You can choose from the following options in the Actions palette. Actions submenu on the Item menu, or by clicking the button in the
Movie Scale This affects how the movie is scaled in the Actions palette and selecting Flash Extras in the Add Item Action dialog.
browser. There are a three choices:
Actual Size The movie is displayed at its original size.
Aspect The movie is scaled to the container but
maintains the aspect ratio.
To Fit The movie is scaled to the container without
maintaining aspect ratio.
All frames This allows you to set whether to display all
frames in the movie or skip frames to keep in
synch.
Volume You can set the initial audio volume to a value
You can set the following basic options in the Actions palette.
from 100% down to 0%.
Edit Movie This provides access to a further set of options
that control settings within the movie (these
affect the published movie but are not reflected
in Freeway’s preview).
Scale Movie This scales the movie to the size of its box. If this is
not selected, the movie will be clipped by its box.
Protect Movie Flash movies have an internal setting that
prevents them being opened and edited in
Flash authoring software. If your movie is not
already protected, this option is enabled. Setting
this parameter will force Freeway to publish a
protected movie.
Freeway Actions
within the movie. There are two options: Item This free-standing Action allows you to embed a Director file (.dcr) in your
sets the color to be that of containing item, Freeway page. Note that the Director file will not be visible within Freeway,
while Other displays a color popup from which but you will see it when you preview the page in the browser. The visitor will
you can choose a specific color. need to have the correct plug-in to view the director file.
Links Following the color options is a list of up to
twenty links if URLs have been defined in the
Flash movie. These are labeled with the link
text followed by a number. If the movie has no
links you will see no further parameters. If the
movie has more than twenty links then only
the first twenty are shown. The movie used in
the screenshot has six links. The links that were
entered in the Flash-authoring program were
“About us”, “Services”, “Portfolio”, “Search”,
“Contact” and “Home”. The popup associated
with the link allows you to link to any page
You can choose from the following options in the Actions palette.
within your Freeway Document or to an
external URL (if you leave the popup at None, Director File Select the director file to display using this popup.
the original link is unchanged). Setting links Alt Image You can specify an alternative image to be
for your Flash movie using the Flash Extras displayed if the person viewing your site does
Action means that those links will be managed
not have the correct plug-in installed.
by Freeway.
Alt Text You can specify some text to display if the Alt
Note: When authoring Flash movies for use in Freeway, use meaningful Image is not loaded in the browser.
names rather than URLs for links in the movie. This will make them easier to
read in the Flash Extras panel in the Actions palette.
This Page Action allows you to play a sound when the page loads into the
browser window. You will probably want to use a sound that can be played 1 Link to PDF
by the visitor without the need for additional plug-ins if possible. The best This free-standing Action can be used to add a link to your page to allow the
formats to use are WAV, MIDI, AIF, or mp3. MIDI is a particularly good format visitor to download a PDF file. The Link to PDF Action item can be created
to use as the files are very small in comparison to digitized formats such as either by clicking the Action button in the Toolbar or the Tools palette
WAV or AIF. MIDI files are analogous to vector format in the graphics world, (Freeway 5 Pro only) and selecting Link to PDF or selecting Link to PDF in
while WAV and AIF are analogous to a bitmap format. the Action Item submenu in the Insert menu.
To apply the Background Sound
Action to a page, first of all ensure
that nothing is selected on the page.
Then either choose Background
Sound from the Actions submenu
on the Page menu, or by clicking
the button in the Actions
palette and selecting Background
Sound in the Add Page Action
dialog.
You can choose from the following options in the Actions palette.
Sound File Use this popup to select a sound file to be If the Link to PDF Action is inserted as an inflow item in a stream of text it
played. This will allow you to select any type of will pick up the styling of the surrounding text. For more information about
file—sound files often do not have the correct creating inflow items, see Inflow items on page 69.
Macintosh file type, which means that Freeway You can choose from the following options in the Actions palette.
cannot always identify them in advance.
File Use this popup to select the PDF file to be
Loop If this is set to true the sound will play repeatedly. downloaded.
Note: There is no volume control available in the Background Sound Action, If Displayed This allows you to specify how the PDF will
so you must set the sound level before the sound file is imported. There is no appear if the user has the Adobe Weblink plug-
user interface available for visitors to your site to either mute or stop playing in, which allows PDF files to be displayed in
the sound, which should be considered before using this Action. the browser window. These options will have
no effect if the Weblink plug-in is not installed.
There are three options:
Freeway Actions
frame or window. This is the default option. This free-standing Action allows you to add a link to your page to allow the
Full Window This loads the PDF into the entire browser visitor to download a file. Freeway will automatically upload the file to the
window if you are using framesets. web site for you and create the correct link. The Link to File Action item can
New Window This opens a new window to display the PDF. be created either by clicking the Action button in the Toolbar or the Tools
This is recommended particularly if you are palette (Freeway 5 only) and selecting Link to File or selecting Link to File
using framesets. in the Action Item submenu in the Insert menu.
Name This text will appear as the link which the If the Link to File Action is inserted as an inflow item in a stream of text it
visitor will click to download the PDF file. will pick up the styling of the surrounding text. For more information about
creating inflow items, see Inflow items on page 69.
Note: Visitors to your web site who are using a Macintosh running Mac OS X
10.4 Tiger or later may be using Preview.app to view PDFs. Safari 2 and higher
will also show PDFs by default in the browser window.
You can choose from the following options in the Actions palette.
File Use this popup to select the file to be
downloaded from the link.
This Item Action has a similar purpose to the Link to PDF Action, but it is Name This text will be used for the link which the
applied to an item on the page. This enables you to have an image on the visitor will click on to download the file.
page which, downloads a PDF file when clicked. The options are the same as
the options for the Link to PDF Action.
To apply this Action to a selected layer item, either select Move Layer from
the Actions submenu on the Item menu, or by clicking the button in the
Actions palette and selecting Move Layer in the Add Item Action dialog.
You can choose from the following options in the Actions palette.
Speed This is the time interval between each
movement of the layer item (in thousandths of
a second).
Freeway Actions
Action button in the Toolbar or the Tools palette (Freeway 5 only) and This is a free-standing Action that can be used to insert a popup on the page
selecting Navigation Popup or selecting Navigation Popup in the Action listing countries based on information from the U.S. State Department web
Item submenu in the Insert menu. site. You would normally use this popup as part of a form so that the visitor
You can choose from the following options in the Actions palette. could choose their country of origin.
Target This is the target that the new link page will The Country List Action item can be created either by clicking the Action
appear in. There are three options: button in the Toolbar or the Tools palette (Freeway 5 only) and selecting
Country List or selecting Country List in the Action Item submenu in the
Whole Window The new page will load into the current browser
Insert menu.
window (if the popup is in a frame, the page
will load into the current window, overwriting
the current frame).
New Window The new page will open in a new window in the
browser.
Other The name of the target is taken from the Other
Target field.
Other Target This is the name of the target if you have
selected Other in the Target popup above. For
example, if you want the page to load into a
frame which is called “main”, you would enter
You can choose from the following options in the Actions palette.
“main” into this field.
Next Option Lets you define the next link that shows in the Name This allows you to set what you want the
popup menu after a link has been chosen. popup to return to the script which is handling
the form. For more information, see Working
Option 1 … 20 Each of these is a name that appears in the with forms on page 285. For example if the
popup when displayed in the browser. For Name is set to “country” which is the default,
example, if you want the first item in the popup the form would return something like this:
to call up the links page, then you can set country = Belgium
Option 1 to “Links”.
Default This lets you choose the country you want to
Url 1 … 20 Each of these is a link to open up when the
appear in the popup list as the first choice.
corresponding item is chosen in the popup when
the site is viewed in the browser.
can edit or add to the list of countries. button in the Toolbar or the Tools palette (Freeway 5 only) and selecting
Current Date or selecting Current Date in the Action Item submenu in the
Insert menu.
If the Current Date Action is inserted as an inflow item in a stream of text it
will pick up the styling of the surrounding text. For more information about
creating inflow items, see Inflow items on page 69.
You can choose from the following option in the Actions palette.
Day By choosing Yes from the popup menu, the day
is shown with the date in the browser.
5 Popup Window
This Page Action can be used to automatically display a new window at a
specific position, with a specific width and height when the page is loaded
into the browser. The popup window could be used to display an advertising
banner or could be used as a small navigation window.
Reset Clears the default country so the popup list
Note: Many browsers allow the blocking of automatic popup windows like
shows [none].
those which the Popup Window Action creates. If a visitor to your site has
4 Current Date chosen to block popup windows, perhaps for security reasons, but you need
This is a useful Action which shows the current day and date on your web the popup to work, it is perhaps advisable to mention that requirement in
page. This Action uses JavaScript, so if a visitor to your site has JavaScript other pages of your site.
turned off in their browser, they will not see the results of the Action.
To use the Action, first create a page that you want to display in the popup
window. Then switch to the page on which you want to open the popup
window and apply the Popup Window Action. Either select Popup Window
from the Actions submenu on the Page menu, or by clicking the button
in the Actions palette and selecting Popup Window in the Add Page
Action dialog.
Freeway Actions
a toolbar.
Scrollbars Determines whether the new window will have
scrollbars.
Resizable Determines whether the new window will be
resizable.
Delay Sets the number of seconds that elapse after a page
is loaded before the popup window appears.
Close Set this to Yes if you want the new window
to close automatically when a new page loads
replacing the one that the Action is applied to.
In order for this to work correctly you will also
need to apply the Self Closing Popup Window
Action to the page that will be displayed in the
popup window. (For information about the Self
You can choose from the following options in the Actions palette.
Closing Popup Window Action, see below.)
Window Name This is the name used to identify the window
in which the page is opened. If the link is clicked Important: If you set the Close popup to “Yes” JavaScript errors may occur
and a window with that name has already been if you do not also apply the Self Closing Popup Window Action (see below)
opened, the same window will be used for the new to the page displayed in the popup window.
link. If you have a list of links on the page and you
If the popup window will be used for navigation, you need to make sure that links
want each link to open into the same window, use
are targeted back to the main window. In the Popup Window page (the page that
the same Window Name for each. However, if you
will appear in the window), set the Target field for any links to “opener”.
want each link to open its own window, make sure
that the Window Name for each link is different.
Page This is the page that will be displayed in the
popup window.
Left/Top The position of the popup window from the top
left corner of the screen.
Width/Height The dimensions of the popup window.
This Page Action is for use in conjunction with the Popup Window, Text Link standard HTML, which will fail validation.
to New Window, Link to New Window, and Pic in New Window Actions.
It should be applied to the page displayed in the popup window in order to 8 Text Link Style
make the window close automatically when a new page is loaded into the
browser window that opened it.
Switch to the page that will be
displayed in the popup window
and apply the Self Closing Popup
Window Action.
Either select Self Closing Popup
Window from the Actions
submenu on the Page menu, or by This is an Item Action which can be applied to any HTML box that contains
clicking the button in the Actions palette and selecting Self Closing hyperlinks. It allows you to control the color of the links under various
Popup Window in the Add Page Action dialog. circumstances, and whether or not the link appears underlined.
There are no user-definable settings for this Action.
9 Fieldset
7 No Cache
Under some circumstances it is desirable to prevent the browser from caching a
web page. You might need to do this if your page has specialized JavaScript (or
Actions that generate JavaScript) that needs
to be executed each time a page is appears in
the browser. The No Cache Action adds the
required meta tags to the HTML generated
by Freeway in order to prevent a page being
cached.
This Item Action can be used to create a fieldset, which may be used to group
To apply the No Cache Action to a page, related form elements and labels. Grouping form items in this way makes a
first ensure that nothing is selected on the page easier to navigate—visually or via a screen reader.
page. Then either select No Cache from the Actions submenu on the Page
To use the Fieldset Action:
menu, or by clicking the button in the Actions palette and selecting No
Cache in the Add Page Action dialog. 1 Draw an HTML item on the page.
This Action has a single option (off by default) that will add an extra <head> 2 Open the Actions palette, by selecting it from the Window menu or
tag after the <body> tag, as recommended by Microsoft, to prevent the page from the Toolbar.
Freeway Actions
3 Click on the button in the Actions palette and choose the Fieldset FW 5 Pro only
Action from the list of Actions.
Scriptaculous Actions use the Scriptaculous JavaScript library (http://script.
4 Enter a suitable description in the Legend text field in the Actions
aculo.us) to create JavaScript effects.
palette.
Finally, choose the trigger type (On Click or On Mouse Over) from the
Trigger popup. The Buttons Action allows the instant creation of stylish graphical push
5 When you are ready click Preview and click or rollover the item to see buttons. Two basic styles are provided—Glass and Round Rect. Each style
the effect run. has several parameters including color, highlight, shadow, shadow color,
shadow opacity, shadow positions and sizes. These may be varied to produce
2 Sound FX millions of different buttons.
This Action allows you to make an item in Freeway trigger or stop a sound.
This handy for providing feedback on links or buttons, or using custom
graphics for audio files.
To add a sound to an item:
Sample buttons created with the Buttons Action
1 Open the Actions palette, by selecting it from the Window menu or
from the Toolbar. To use the Buttons Action, you should apply it to a graphic box and then
2 Select the item you want to add the sound to. adjust the parameters in the Actions palette. Graphic text or a picture may
3 Click on the button in the Actions palette and choose either the also be inserted into the same graphic box. The button graphic appears in
Sound FX Action from the list of Actions. front of any fill color and behind any text or graphic contained in the box.
Whenever the box is resized the Buttons Action recalculates and redraws the
4 In the Actions palette choose Play from the Function popup. Choose
button so that it fits the box perfectly.
the audio file you want the item to use from the Audio File popup and
the type of trigger you want to use in the Trigger popup. Power Tip: FW 5 Pro only Before you start creating buttons it’s a good
5 When you are ready click Preview and click or rollover the item to hear idea to define named colors for use with your buttons where the name
the sound. describes the usage rather than the color e.g. “Standard Button”, “Standard
Button Shadow” and “Standard Button Text”. This way you can change all
Note: You will need to enable JavaScript in your browser for these
your buttons instantly simply by redefining the actual colors associated with
Actions to work. If you find the effects are not working then try deleting
the names. You can also do a similar thing with any text styles used on the
the contents of your Site Folder or creating a new Site Folder in the
buttons. Freeway 5 Express does not support the saving of custom colors and
Document Setup dialog.
text styles.
Freeway Actions
graduated transparent shadow or glow. When enabled, the color of the shadow is
specified by the Color popup in the Shadow section of the palette.
Note: Setting the color to None leaves the appropriate space for the drop
shadow, but does not draw it. This is sometimes useful when creating rollovers.
The Opacity slider specifies the maximum opacity of the shadow. The Left, Top,
Right and Bottom number fields specify the distances and directions to out-set
the shadow relative to the body of the button. Negative values are towards the
center of the button. It is possible to achieve a variety of shadow (and glow)
effects by using different combinations of these numbers.
The Glass style button has a round ended rectangular shape that appears to
be made from a colored glass rod. The basic color of the button is defined by
the Color popup menu. Setting the color to None results in just the shadow
being drawn. The Highlight slider adjusts the amount of white that is used to
draw the specular highlight. A setting of 100% produces a completely white
highlight and a setting of 0% produces no highlight.
Three Glass style buttons with Highlights of 50%, 75% (the default) and 100%.
Round Rect buttons with Highlights of 50%, 75% (the default) and 100%.
The Round Rect style button has the appearance of a hollowed interior with
a beveled edge and rounded corners.
This style of button uses the Highlight setting to create both a light (highlight)
color and a dark (lowlight) color to produce the effect of a hollowed interior.
The Radius parameter specifies the curvature of the corners. A value of “0px”
creates square corners. The Bevel parameter specifies the depth of the edge/
frame. Setting a value of “0px” creates a frameless button that is darkest at
the top left and lightest at the bottom right. Setting a value greater than half
the smaller of the height and width of the button creates a frameless button
that is lightest at the top-left and darkest at the bottom right.
CSS Menus Moving further down the list in that menu we have System Preferences…
and Dock. Dock has a further submenu consisting of Turn Hiding On, Turn
The CSS Menus Action provides an easy way to create accessible and Magnification On and so on. This can be represented as follows:
responsive drop-down navigation menus. These can have rollover effects,
drop-down markers, can highlight the current page, can be horizontal or
vertical, and can pop-out to the right or the left.
Creating a menu
CSS menus are built around an HTML list structure, which gives them their
accessibility. A text-based browser that doesn’t support CSS will see a neat list
of links.
Each level of indentation in the list represents a submenu of the list item
To create a CSS menu:
before it. Using the OS X menu bar as an example, the Apple menu contains
a submenu of About This Mac, Software Update, Mac OS X Software… 1 Create a list in an HTML item containing the names of your pages. See
and so on. This can be represented in an HTML list as follows: Working with lists on page 98.
2 Apply the CSS Menus Action to the HTML item. The first thing you
will see is the text **Publish to See Something** in place of the list that
you just created.
3 Publish your site to see a live preview of the menu in the item. You
may now need to adjust your HTML item to fit your menu.
4 Double-click inside the item to edit your menus. The menus will now
be displayed as a list, and you will be able to edit its contents as
normal.
Note: Make sure there is only one set of nested lists in the item, If there
are more, the Action will not work.
The CSS Menus Action has two main sections, which can be chosen from a that an item contains submenus. There are
popup: Main Menu Settings controls the appearance of the main menu bar, a number of marker graphics built into the
and Submenu Settings controls the appearance of submenus. Action, or you can choose your own images.
Navigation Actions
Menu titles
Note: We recommend that you use the CSS Menus Action rather than Menu bar
the Menu Bar Action to create navigation menus. Menu
Submenu
What does the Menu Bar Action do? Menu item
The Menu Bar Action makes it possible to create menu bars with menus
that open and close as the user moves the mouse over the menu titles in the
browser. Menu Bar A bar containing menu titles.
Title Area The part of the Menu Bar containing menu titles
A menu bar
for each menu.
An open menu Menu Title The title or name of a menu. When the mouse
moves over a Menu Title the corresponding
menu opens.
Menu A list of items that appear when a menu is
By moving the mouse down the menu, the user of your site is able to select opened. Typically there are Menu Items for each
menu items that will navigate to different pages in the browser. title in the Menu Bar.
A menu with a Menu Item Each menu is composed of Menu Items. A Menu
menu item selected Item is typically text with a link. The user
experience of selecting a Menu Item is that the
browser follows a hyperlink to another web page.
Submenu A Menu that is attached to a Menu Item in
The Menu Bar Action also makes it possible to create hierarchical menus.
another menu. The Submenu opens when the
A hierarchical menu is a menu with submenus that open and close as your
user moves their mouse over that item, and
mouse moves over hierarchical menu titles.
closes when the mouse moves away.
A hierarchical menu Menu Bar Table The table sketched in Freeway to which the
Menu Bar Action is attached. The contents and
structure of this table forms the Menu Bar.
Menu Items Table The table sketched in Freeway that contains the
text used for the Menu Items.
Using menu bars in your web site is a way of creating web pages with
comprehensive navigation using a small visual footprint.
A Menu bar is created from a table that has a Menu Bar Action applied. This
is the Menu Bar Table. The contents (usually text) of this table form the titles
of the menus, while the attributes of the table (its position, color, cell-spacing,
etc.) control the appearance of the Title Area. (See Working With Tables in
Freeway on page 251 for further information on manipulating tables.)
1 Sketch a table with one row and two (or more) columns in Freeway. This
will be the Menu Bar Table.
2 Color the table.
3 Enter text into each table cell for the menu titles.
Note: Selecting tables without borders can be tricky. An easy way to do this
is to C-click on a table cell and then CO-click on the selected cell.
6 Attach a Menu Bar Action to the table, either by choosing Menu Bar
from the Actions submenu in the Item menu, or by clicking the
button in the Actions palette and selecting Menu Bar from the Add 9 In order to see your Menu Bar, you must preview your page in a browser.
Item Action dialog.
7 Make sure that the Actions palette is visible. Note: If you want your users to be able to navigate by clicking on the text
in your menu bar you can do this by attaching hyperlinks to the text in the
Note: This Action only works on HTML 4.01 or XHTML 1.0 pages. If you see table. See Hyperlinks on page 141.
a message in the Actions palette stating that the Action can not be used,
go to the Page Output panel of the Inspector palette and change the HTML
output. Freeway 5 Express outputs HTML 4.01 pages.
Navigation Actions
7 In the Actions palette
Popup menus are created from text entered into a second table (the Menu select the Menu Bar table,
Items Table), which is then connected to the Menu Bar. then your Menu Bar Item
1 Create a Menu Bar using the steps described earlier. from the Menu Items
2 Sketch a table with one row and the same number of columns as the (table) popup menu. This
Menu Bar (three columns in the previous example). This is your Menu establishes the connection
Items Table: it will contain all your menu items. between the Menu Titles and the Menu Items.
Power Tip: FW 5 Pro only Place the Menu Items Table on the pasteboard Note: The Menu Items (table) popup will list all tables that do not have a
so that it does not obscure your layout, and uncheck the Layer property Menu Bar Action applied. As the items are listed by name you will find it
using the Item General panel of the Inspector palette. If you wish easier to identify your Menu Items Table if you name it distinctively. You
to retain the layered properties of the Menu Items Table, place it on the can name it either by setting its name in the Inspector palette or by O-
pasteboard above your page. Freeway 5 Express does not support CSS layered clicking on the table’s title in the Site panel (with Show Items turned on).
items.
8 In the Actions palette
3 In the Inspector palette name this table “My Items” so that it is easy to set the Link, Hover, and
identify by name. Highlight colors of the Menu
4 Enter text into the columns of your Menu Items Table for your menu Items.
items. Column 1 of your Menu Items Table corresponds to column 1.
Different menu items are defined by different paragraphs of text. So, 9 Choose an appearance for the Menus of your Menu Bar. The Appearance
to enter menu items for your first menu type the text for each item popup menu selects the Background and Arrow images (arrows are
followed by a R. Similarly for Column 2. used to denote hierarchical menus) from a predefined set.
Power Tip: FW 5 Pro only Set “Space Before” and “Space After” to “0px”
for all the text in the item. This will prevent the text from being double-
spaced. This does not make any difference to the menu that is generated but
will make your Menu Bar more manageable within Freeway.
Power Tip: FW 5 Pro only To ensure consistency create a style and use this
to style text quickly in your Menu Items. Often the same style is used in both
the Menu Bar and the Menu Items.
Warning: The user experience of having hierarchies that are many levels
deep is often confusing. You should generally avoid having submenus where
possible, especially submenus from submenus.
4 Preview in a browser.
Navigation Actions
The Menu Bar Action is installed with a number of predefined appearances The Menu Bar Action also allows you to generate vertical menu bars.
for the background and arrow images used in Menus. If you want to use your
own images you can do so.
1 Create a Menu Bar with Menu Items, as described on page 355.
2 In Actions palette, from the
Appearance popup menu select
Custom Files. Generating vertical menu bars is achieved by having a Menu Items Table
3 The Arrow and Background popup with one column and several rows, rather than one row and several columns.
menus are enabled to allow you to In the event that you have a table with a single cell the Menu Bar Action will
select individual images for these parts always create a horizontal menu.
of your menu.
Power Tip: Giving your images a unique name can reduce the problems of
browser caching when you change between different image sets during the
development of your sites. You can do this by naming your images bg1.gif,
bg2.gif etc.
FW 5 Pro only
The Menu Bar Action has a set of options that are available if the Menu Bar
What does the Navigation Map Action do?
Table is a layer (see Creating CSS layouts on page 237). These options make it
The Navigation Map Action makes it possible to create a navigation element
possible for the Action to generate a Menu Bar that stretches the full width of
that represents a hierarchy of hyperlinks as an arrangement of pages and
the page and to align the menu titles within it. When applied to a layer the
folders (containing additional pages and folders).
interface of the Action supports control for these additional settings.
A key feature of Navigation Maps is that they have disclosure controls that
Align titles allow the user to expand and collapse folders. Navigation Maps are commonly
(layer option) used in frames to provide a sophisticated and detailed navigation system for
a site.
Key terms
Navigation Actions
Navigation Map are defined by different paragraphs of text. Enter the
The Navigation Map Action is applied to HTML items. The folders and pages text for each item on a separate line.
that are in the Navigation Map are defined by the text within that item. 5. The hierarchy is defined by prefixing the text by one or more “+” signs.
1. Sketch an HTML item. To have a folder with items in it prefix the contained items with a “+”.
2. Attach a Navigation Map Action to the HTML item, either by choosing If the contained items themselves contain items then prefix the doubly
Navigation Map from the Actions submenu in the Item menu, or by contained navigational items with two “+” characters. The text of a
clicking the button in the Actions palette and selecting Actions short Navigation Map might look like this.
palette and selecting Navigation Map from the Add Item Action dialog.
Power Tip: FW 5 Pro only Set “Space Before” and “Space After” to “0px”
for all the text in the item. This will prevent the text from being double-spaced.
This does not make any difference to the menu that is generated but will make
your Navigation Map more manageable within Freeway.
3. Make sure that the Actions palette is visible. 6. Style the text appropriately.
7. Attach hyperlinks to the text in the table (see Hyperlinks on page 141).
Note: This Action only works on HTML 4.01 or XHTML 1.0 pages. If you see
a message in the Actions palette stating that the Action can not be used, 8. Select the HTML item that the Navigation Map Action is applied to. In
go to the Page Output panel of the Inspector palette and change the HTML the Appearance popup menu in the Actions palette choose one of the
output. Freeway 5 Express outputs HTML 4.01 pages. predefined appearances.
A person visiting your site can, by clicking the disclosure controls, open and
close portions of the navigation hierarchy so that just the area of interest is
visible. The Navigation Map provides a means by which this can be preserved.
This can be desirable as reloading the page in the browser, or moving to a
different page that also has a navigation Action will cause the Navigation
Map to collapse back to its original state.
The Action provides a checkbox where the state of the menu can be preserved
using cookies.
Note: The “Seattle” appearance produces a hierarchical structure in the
browser where the folders appear to be connected by dotted lines. If you
use appearances like this you must be careful to use text of a size that is
compatible with the appearance. Larger text will result in lines that do not
connect properly.
9. In order to see your Navigation Map, preview your page in a browser. You
can preview in Freeway, but this does not currently support hyperlinks.
Note 1: Not all users like sites that use cookies and some users configure
their browsers to warn them whenever cookies are being set. You should
consider this before getting the Action to generate pages that use cookies.
Note 2: Browser caching can interfere with the cookie mechanism. This
may cause the Navigation Map to open and close unpredictably when the
user navigates back to a page that they have viewed previously in the same
session. What actually happens is that when a page is drawn from the
browser cache it appears as it was last seen, and does not load its state from
cookies. You can prevent these problems by applying the No Cache Action to
the page (see page 348 for more information).
Navigation Actions
Note: All the images must be the same size for the Action to work properly.
It is possible to create Tree Menus of your own design by creating a set Power Tip: Giving your images a unique name can reduce the problems of
of web-ready graphics, which are appropriately named. The following browser caching when you change between different image sets during the
diagram shows the images that are used in “Seattle” and “Glass”, two of the development of your sites. You can do this by naming your images folder1.
appearances that are installed with the Action. gif, folder2.gif etc.
Not all images are required in an appearance. For example the “Glass” style
makes no distinction between open and closed folders. It does not have corner
or line graphics. The Navigation Map will use the graphics that are available
and will substitute or omit those that are not.
1. Create GIF, JPEG, or PNG images, using the following naming convention:
Opener: opener.gif, opener.jpeg, or opener.png
Closer: closer.gif, closer.jpeg, or closer.png
End Opener: endopener.gif, endopener.jpeg, or endopener.png
End Closer: endcloser.gif, endcloser.jpeg, or endcloser.png
Branch: branch.gif, branch.jpeg, or branch.png
Corner: corner.gif, corner.jpeg, or corner.png
Branch: branch.gif, branch.jpeg, or branch.png
Folder: folder.gif, folder.jpeg, or folder.png
Open Folder: openfolder.gif, openfolder.jpeg, or openfolder.png
Page: page.gif, page.jpeg, or page.png.
Navigation bar
What does the Navigation Bar Action do?
The Navigation Bar Action makes it possible to create a web site with a Menu title
Home item
Menu Bar that reflects the structure of your site automatically. For a site
Arrow Menu item
that has a hierarchical structure, the Navigation Bar will provide feedback
indicating your position in the hierarchy. So if, for example you are
currently browsing in a “PCs” section of a site, which is within a section on Navigation Bar The portion of the menu that is visible when the
“Computers”, which is within a section on “Shopping”, you might have a menu is in its rest state. The menu titles show
Navigation Bar something like this: the current position within the site hierarchy.
Menu Title The name of a menu. When the mouse moves
over a Menu Title the corresponding menu
opens.
If you are creating a large and complex site this sort of navigational aid can
Menu The list of items that appears when a menu is
provide your users with feedback of where they are in your site, and how to
navigate within it. opened.
The Navigation Bar Action has an option to create navigational menus Menu Item Each menu is composed of Menu Items. A Menu
automatically. Navigational menus will then open as you move your mouse Item is text with a link. The user experience of
over the titles in the Navigation Bar. selecting a menu item as the browser navigates
to another web page.
Home Item The root of the home page.
Navigation Actions
Power Tip: With a large site (where this Action is most useful) it is generally most
convenient to apply the Action to one or more master pages.
The Navigation Bar Action generates its content from your site’s structure,
so the organization of your site is an important part of using this Action 3. Make sure that the Actions palette is visible.
(see Working with pages on page 21 and Workflow: 1 Planning the site on
Note: This Action only works on HTML 4.01 or XHTML 1.0 pages. If you see
page 3).
a message in the Actions palette stating that the Action can not be used,
1. Organize your site into a hierarchy of named folders that reflect the go to the Page Output panel of the Inspector palette and change the HTML
structure of the site that you want to present to people browsing your site. output. Freeway 5 Express outputs HTML 4.01 pages.
2. From the Insert menu, select Navigation Bar from the Action Item
submenu; or in the Toolbar Actions menu or the Tools palette click on 4. Set the Home Title. This determines what the name of the root (left-
the Sketch Action popup and select Navigation Bar. The cursor will most) Menu Item of your site is. This is commonly called “Home”.
change into a “crosshair”. Sketch an item in the location where you’d 5. Choose an appearance for the Navigation Bar and Navigation Menus. The
like it to appear on the page. Appearance popup selects the Background and Arrow images from a
predefined set.
6. In the Action set the text styling (Font, Color, Size, and Hover).
7. In order to see your Navigation Bar, you must preview your page in a
browser.
1. Create a Navigation Bar. The Navigation Bar Action is installed with a number of predefined sets of
2. Select the Navigation Bar images for the background and arrow mark used in menus. However if you
item. In the Actions palette want to use your own images you can do so.
click on the Navigation 1. Create a Navigation Bar with Menu Items.
Menus checkbox. This will 2. In the Appearance popup menu select Custom Files.
cause the Action to create
menus when you publish.
When this option is turned
on a further set of settings
for the Navigation Menu are
available.
3. Preview in a browser. The Action will create Menu Items for folders and
pages.
The Menu Items that are generated in the Menu are hyperlinks to pages and
folders that are within the same parent folder. The user experience of selecting
an item from the Menu is that they follow a hyperlink to another web page.
In the case of a Menu Item that corresponds to a page there is a hyperlink to
that page. In the case that there is a hyperlink to a folder then there is a link
to the home page within that folder. The Action determines the home page
within a folder as being:
Either A page with a file name of index.htm or index.html 3. The Arrow and Background popups will become enabled allowing you to
Or A page with a file name of home.htm or home.html use these to select individual images for these parts of your menu.
Or The first page in the folder.
Defining a custom set of images
The Action only includes pages that themselves have a Navigation Menu If have sets of images (backgrounds and arrow symbols) that you use
Action on them. Similarly it only includes folders that contain pages that frequently you can create a folder and select this folder rather than the
have the Navigation Menu. The pages and folders appear as Menu Items in individual files.
the same order that they appear in the Freeway Site panel. You can change
the order of items by changing the order in the Site panel (see Rearranging
pages using the Site panel on page 24 and Workflow: 1 Planning the site on
page 3). You can change the text of the menu items by changing the names of
pages and folders within your site.
Navigation Actions
is the hierarchical arrow symbol. You should make GIF, JPEG, or PNG
images only.
What does the Site Map Action do?
2. Name these images as follows: The Site Map Action automatically generates a Navigation Map of pages and
Menu Background: bg.gif, bg.jpeg, or bg.png folders that reflects the structure of your web site.
Menu Arrow: arrow.gif, arrow.jpeg, or arrow.png
Power Tip: Giving your images a unique name can reduce the problems of
browser caching when you change between different image sets during the
development of your sites. You can do this by naming your images bg1.gif,
bg2.gif etc.
The key thing about the Site Map Action is that it generates this map
automatically. This means that when the structure of your site changes (i.e.
you add pages or folders, or change the names or existing pages and folders)
the Site Map will update automatically.
Home page The Site Map Action generates its content from your site’s structure so the
organization of your site is an important part of using this Action.
Page 1. Organize your site into a hierarchy of named folders that reflects the
structure of the site that you want to present to people browsing your site.
Folder (open) 2. In the Insert menu, select Site Map from the Action Item submenu; or
in the Toolbar Actions menu or the Tools palette click on the Action
Disclosure control Folder (closed) button and select Site Map. The cursor will change into a “crosshair”.
Sketch an item in the location where you’d like it to appear on the page.
Power Tip: With a large site (where this Action is most useful) it is generally
Folder A navigational item that can contain pages and most convenient to apply the Action to one or more master pages.
other folders.
Open Folder A folder whose contents are visible. 3. Make sure that the Actions palette is visible.
Closed Folder A folder whose contents are hidden. Note: This Action only works on HTML 4.01 or XHTML 1.0 pages. If you see
a message in the Actions palette stating that the Action can not be used,
Page A web page.
go to the Page Output panel of the Inspector palette and change the HTML
Navigational Item A page or folder in the Navigation Map. output. Freeway 5 Express outputs HTML 4.01 pages.
Disclosure Control A graphic that when clicked will toggle whether
a folder is open or closed. 4. Set the Home Title field. This determines what the name of the root
(left-most) item of your site is. This is commonly called “Home”.
Home Page The root page of the site.
5. Choose an appearance for the images used in your Site Map. The
Appearance popup menu selects a set of images from one of sets
predefined in the Action.
6. In the Action set the text styling (Font, Color, Size, and Hover).
7. In order to see your Site Map, you must preview your page in a browser.
Navigation Actions
The normal behavior of the Site Map Action is to list all files and folders A person visiting your site can, by clicking the disclosure controls, open and
when creating a Site Map. If you want to omit certain pages and folders the close portions of the navigation hierarchy so that just the areas of interest are
Site Map Action has a facility to omit pages and folders of a given prefix. visible. The Site Map provides a means by which this can be preserved. This
1. Select the Site Map Action. In the Actions palette select the Omit Pages can be desirable as reloading the page in the browser, or moving to a different
and Folders checkbox. The Beginning With text field becomes enabled. page that also has navigation Action will cause the Site Map to collapse back
to its original state.
The Action provides a checkbox where the state of the menu can be preserved
using cookies.
When generating a site map, the Site Map Action will omit all files and
folders whose file name is prefixed by this text. You can change this from the
default underscore (“_”) if required.
2. For individual pages that you wish to omit change the file name of the
pages so that they are prefixed by an underscore (see Page title and file
name on page 22).
Note: The Action looks at the file name of a page not the title.
3. For folders that you want to omit change the name of the folder so that Note 1: Not all users like sites that use cookies and some users configure
they are prefaced by an underscore (see Renaming folders on page 32). their browsers to warn them whenever cookies are being set. You should
consider this before getting the Action to generate pages that use cookies.
Note 2: Browser caching can interfere with the cookie mechanism. This
may cause the Navigation Map to open and close unpredictably when the
user navigates back to a page that they have viewed previously in the same
session. What actually happens is that when a page is drawn from the
browser cache it appears as it was last seen, and does not load its state from
cookies. You can prevent these problems by applying the No Cache Action to
the page (see page 348 for more information).
Note: All the images must be the same size for the Action to work properly.
Opener
Folder
End opener
Not all images are required in an appearance. For example the “Glass” style
makes no distinction between opened and closed folders. It does not have
corner or line graphics. The Navigation Map will use the graphics that are
available and will substitute or omit those that are not.
1. Create GIF, JPEG, or PNG images, using the following naming convention:
Home: home.gif, home.jpeg, or home.png
Opener: opener.gif, opener.jpeg, or opener.png
Closer: closer.gif, closer.jpeg, or closer.png
End Opener: endopener.gif, endopener.jpeg, or endopener.png
End Closer: endcloser.gif, endcloser.jpeg, or endcloser.png
Branch: branch.gif, branch.jpeg, or branch.png
Corner: corner.gif, corner.jpeg, or corner.png
Branch: branch.gif, branch.jpeg, or branch.png
Folder: folder.gif, folder.jpeg, or folder.png
Open Folder: openfolder.gif, openfolder.jpeg, or openfolder.png
Page: page.gif, page.jpeg, or page.png
What are Graphics Actions? This set of WYSIWYG graphical effects and functions may be used separately
Graphics Actions are a collection of Freeway Actions which consists of the to create many varied results, and they may also be mixed and matched to
following tools (listed alphabetically): create an enormous variety of graphical results.
• Advanced Fade—allows more control over fade settings. Graphics Actions either create new graphic content or affect existing graphic
• Blur—blurs an image. content. They never modify the original graphic; they always work on a copy.
• Chroma Key—creates transparency using a color in the image.
The original files are always referenced whilst they preview or when the
graphics are published, and so do not degrade over repeated adjustment. If the
• Duotone—applies duotone/tritone effects.
Action is removed from an image, or the Action is disabled, the original image
• Fade—applies image fade effects.
will be restored. Multiple instances of the same original graphic can have
• Fill Master—generates filled, framed, shadowed, and glowing shapes different Actions applied to it, and each will yield different results according to
with transparency and shading. the individual settings for that particular item. When applied to graphic file
• Hue Rotate—allows the colors to be changed by rotating them through content they will automatically update when the file is changed and resampled.
the hue spectrum. If named colors are used in any of the Action parameters, then the images will
• Impress—alters the image by simulating raised and lowered areas change if any of the colors are edited.
using lightness information in the image.
• Linear Blur—blurs an image along a vertical or horizontal axis.
• Photo Frame—applies graphic edge effects.
• Photo Magic—adjusts image settings.
• Posterize—applies posterize effect.
• Saturate—controls the amount of color in an image.
• Scan Lines—applies image scan lines effects.
• Sharpen—sharpens an image.
• Solarize—applies solarizing effects on the image.
• Watermark—places a watermark on an image using an external file.
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Direction This controls the direction of the fade. The fade
can pass over the image in either a horizontal
or vertical direction. The original picture before the Action is applied.
Horizontal The fade effect will start at the left of the image
and continue towards the right edge.
Vertical The fade effect will start at the top of the image and
continue down towards the bottom of the image.
The original
This Action blurs the image, with an option to include the alpha channel
image before
(transparency) in the effect.
the Action is
Parameters applied.
Graphic Actions
The Blur Alpha
Channel has been
Some images have a subject that is difficult to separate from a background
checked, so the because of its complexity. Plants, for example, are one such example of this. The
edges of the image Chroma Key can help make areas of an image transparent by simply selecting
are affected by the a color in the Actions palette. This is similar to the effects used by film and
blur. television companies when they use “green screens” to enable them to place
a subject on a different background. This Action can make up to four colors
transparent, and offers control over the depth of the color selection.
Sampling Colors
It is possible to sample a color directly from the image using Apple’s Colors
palette.
1. In the Actions palette, select Other… in the color popup
2. When the color palette appears, click on the color wheel at the bottom of
the window.
3. When Apple’s Colors palette opens, click on the magnifying tool at the
top of the window.
4. The pointer will change into a magnifying glass, and color on the screen
can be sampled by clicking the mouse.
Colors palette will cause the new color to be entered into the Styles & transparency setting of the keyed out area of
Colors palette by Freeway, and allow the Action to use it to key out the the image.
color in the image.
Examples
Note: Freeway 5 Express uses Apple’s Color palette and does not allow the
saving of custom colors.
The original
Power Tip: In Freeway 5 Express, to avoid the accidental deletion of a
image—a pink
custom color when you delete items that may use it, create an item on the
rose on a green
pasteboard area, apply the color, then select the Publish checkbox in the
background.
Inspector palette so that it is not checked.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its In this case, one of the pinks
original state without having to remove the Action. was sampled as well as the
Key Colors Up to four colors can be used to key out of the green. The Tolerance slider
image. was set to a lower number,
and the box was given an
Tolerance This slider determines how much tolerance is given
even fill of blue.
to the color(s) selected. A low number will result
in only a few related colors chosen, whilst a high
number will cause more related colors to be hidden.
Graphic Actions
This effect may be applied to a graphic box containing a picture and/or Fill 1. Original image
Master content and adjusted via the parameters in the Actions palette. For 2. Default Duotone
more information on the Fill Master Action, see page 379. settings
3. Sepia style
Parameters 1 2 Duotone settings
4. Default Tritone
settings
3 4
Tritone Example
The Tritone checkbox adds a third (Middle) color popup that specifies the
The Actions palette showing the Duotone Action color to use for any 50% gray pixels.
with default and sepia style settings.
The Duotone effect maps any white pixels in the image to the color specified
by the White color popup and any black pixels to the color specified by the
Black color popup. All other colors in the image are treated as if they are a
grayscale and are mapped to a color interpolated between the White and
Black mapped colors.
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
The Fade effect allows the opacity of a graphic to be varied either across the
width of the graphic box (Direction: Right) or from the top to the bottom of
the graphic box (Direction: Down). As the opacity of the graphic decreases,
anything underneath (behind) the graphic shows through.
The Action may be applied to a graphic box containing a picture and/or Fill 1 2
Master content. If it is applied to a picture then it affects the intersection of
the picture and its graphic box. If the graphic box has both a picture and Fill
Master content then it only affects the picture. If the graphic box has both Fill
Master content and graphic text then it only affects the Fill Master content.
If the graphic box has a fill color then that color shows through more as the
3 4
opacity decreases.
For more information about the Fill Master Action, see page 379. 1. Original image
2. Fade Right: 100%–20%
Parameters 3. Fade Right: 25%–75%
4. Fade Down: 100%–0%
The Actions
palette showing
the Fade Action
Graphic Actions
Fill Master differs from the other Graphics Actions in that it creates content
rather than affecting existing content. When applied to a graphic box Fill
Master’s graphic (content) appears in front of the fill color and behind
any text or graphic contained in the box. Whenever the box is resized or
transformed Fill Master recalculates and redraws its graphic with the
appropriate settings.
Fill Master is used by applying the Action to a graphic box and then adjusting
the multiple parameters in the Actions palette. If desired, graphic text or
a picture may also be inserted into the graphic box. These will appear in
front of the graphic created by Fill Master. Other graphic effect Actions may
also be applied to the graphic box. The effect of these Actions will be seen in
the content created by Fill Master or any picture content, but not in any text
content or background (Fill) color (set via the Styles or Inspector palettes).
Note: Freeway 5 Express does not have a Styles & Colors palette.
Parameters
Fill Master’s parameters are divided into four groups: Shape, Fill, Frame,
and Effect. Each of these may be set and altered independently. However, the
resultant graphic is produced by combining all the chosen settings.
The parameters in the Shape group define the basic shape of the Fill Master
graphic.
Note: This does not affect the shape of the graphic box itself.
Graphic Actions
The parameters in the Fill group define if and how the shape of the Fill Master
graphic is colored.
Note: This does not affect the shape of the graphic box itself.
counter-clockwise rotation of the gradient’s axis. to stretch or squash the gradient. The default
The default value of 0° produces a horizontal value of 100% neither stretches or squashes the
gradient from left to right. For a bottom to top gradient. Stretching the gradient means that the
gradient use 90° and for top to bottom use –90°. whole range of colors will not be used. Squashing
the gradient means that the first and/or the
second color will be stretched in order to fill the
entire shape with color which, depends on the
1 2 Center X and Center Y parameters.
1. Linear fill (default)
Center X A number (–100% to 100%) that specifies the
2. Linear fill with an angle of 30°
3. Linear fill scaled to 50% amount to offset the center of the gradient
3 4 4. Linear fill shifted by –33% horizontally with respect to the shape’s width. The
default value of 0% centers the gradient on the
shape. Negative values shift the gradient’s center
Radial left. Positive values shift the gradient’s center right.
Center Y A number (–100% to 100%) that specifies the
amount to offset the center of the gradient vertically
with respect to the shape’s height. The default value
of 0% centers the gradient on the shape. Negative
values shift the gradient’s center up. Positive values
shift the gradient’s center down.
The shape is filled with a radial gradient. This gradient traverses between
two colors in a series of concentric circles. 1 2
Opacity A number (0% to 100%) that specifies the 1. Radial fill (default)
opacity of the fill color. The default value of 2. Fill scaled to 50%
100% is completely opaque. 3. Center X shifted by –50%
First The color to be used at the start of the gradient
3 4 4. Center Y shifted by –50%
with which to fill the shape.
Second The color to be used at the end of the gradient
with which to fill the shape.
Graphic Actions
A simple solid outline of the specified opacity, color, and width.
Opacity A number (0% to 100%) that specifies the opacity
of the frame color. The default value of 100% is
completely opaque.
Color The color to be used to draw the frame of the shape.
The shape is filled with a gradient that traverses between two colors in a Width A number between 0.0px and 100.0px that
series of concentric versions of the shape itself. defines the thickness of the frame line. A value
Opacity A number (0% to 100%) that specifies the of 0 indicates a hairline frame. Widths with a
opacity of the fill color. The default value of fractional component may be entered e.g. “3.5px”.
100% is completely opaque.
First The color to be used at the start of the gradient 1. Four-pointed polygon with 5px frame
with which to fill the shape. 1 2 2. Four-pointed polygon with 10px frame
Second The color to be used at the end of the gradient
with which to fill the shape.
Effect
The parameters in the Effect group define if and how the Fill Master graphic
includes a special effect. The available effects are:
1 2 None
1. Rectangle with shape fill No effect is drawn. This is the default.
2. Oval with shape fill
3. Polygon with shape fill Shadow
3 4 4. Star burst with shape fill
Frame
The parameters in the Frame group define if and how the shape of the Fill This effect creates a transparent, graduated, drop shadow of a user defined
Master graphic draws an outline. Note: This does not affect the border of the color, size, and offset.
Graphic Box itself. The available frames are: Opacity A number (0% to 100%) that specifies the maximum
None opacity of the shadow. The default value of 50%
No frame is drawn. This is the default. creates a partially transparent shadow.
Spread A number (0% to 100%) that specifies how far the This is the same as Shadow except that the filled area of the shape is clipped
umbra (the darkest part of the shadow) extends out of the shadow. This is useful of the fill is not 100% opaque and you don’t
into the area created by the Size parameter before want to see the shadow through it.
the graduated part of the shadow. A value of 0%
(the default) indicates that the umbra is the same Glow
size as the shape and the graduated part extends
the full amount of the Size. A value of 100%
indicates that the umbra covers the entire extent
of the shadow and there is no graduated part.
Size A number (0px to 100px) that specifies the
amount, on each side, by which the shadow is
Opacity A number (0% to 100%) that specifies the
bigger than the shape.
maximum opacity of the glow. The default value
X Offset A number (–200px to +200px) that specifies
of 50% creates a partially transparent glow.
the amount by which to horizontally offset the
Color The color to be used to draw the glow.
shadow relative to the shape. Positive numbers
Size A number (0px to 100px) that specifies the
move the shadow to the right and negative
amount, on each side, by which the shadow
values to the left. The default value of 0px
extends outside the shape.
centers the shadow horizontally.
Y Offset A number (–200px to +200px) that specifies
the amount by which to vertically offset the 1. Rectangle with default glow
shadow relative to the shape. Positive numbers 2. 4-pointed polygon with a 15px glow
1 2 3. 6-pointed star burst with a 10px
move the shadow to downwards and negative
values to upwards. The default value of orange glow
5px positions the shadow so that it extends 4. Oval with a 12px, 25% opacity, blue
vertically below the shape. 3 4 glow
Graphic Actions
Spherical Effect A flash sticker effect. The text
content has been rotated 20°
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Angle
This is the position on the color wheel that the colors will be adjusted to. A
setting of 0° will be the image’s normal appearance.
Graphic Actions
If the image has an alpha channel which Freeway uses for transparency, this can
This Action allows you to alter the apparent surface qualities of the image using produce hard edged results when the image is blurred. By enabling this option, the
a combination of embossing and blurring processes. By using fairly low settings, image’s alpha channel is blurred, thus producing a more natural result.
emboss type effects can be achieved. More pronounced settings affect the image Diameter
to such an extent that it begins to take on painterly qualities. This Action can This is the amount of embossing applied to the image.
generate images that can be manipulated further using other Graphics Actions
Intensity
with striking results.
This slider controls the strength of the embossing effect. Some images react
Parameters better to low settings than others.
Color Shift
Changing the Color Shift can improve the embossing effect in images that
have areas where there is little or no contrast between colors. In these images,
embossing may not be evident.
The Impress Action can manipulate colors before and after the emboss effect
is applied. By shifting the colors, you can control how much manipulation
is performed. The Color Shift determines how much a color’s hue is moved
around the color wheel, in a similar fashion to the Hue Rotate Action (see
page 386). This is done before the embossing effect is applied to the image.
After embossing, the colors are shifted back by the same amount. When the
setting is 0°, no Color Shift is performed.
When colors are moved around the color wheel, they mix, which means that
when they are moved back by the same amount, the resulting colors will be
different. As the Color Shift approaches 180°, the colors are mixed more, and
Unchecking the Enabled checkbox immediately restores the graphic box to its the resulting image can appear washed out.
original state without having to remove the Action. Lighting
Grayscale This determines the angle at which the light will appear to hit the relief in
Switching this button on will result in the final output being a grayscale image. the image. The top of the image is 0°, with 90° to the right of the image, 180°
at the bottom, and 270° to the left.
Blur Diameter
The image can be blurred using a simple Gaussian blur. The diameter Apply to Alpha Channel
determines the strength of the blur applied. By default, only the RGB channels are affected by this Action. The alpha
channel can also be altered, allowing for a more natural transition between
foreground and background.
Graphic Actions
The original
image before the This Action blurs an image along a linear axis; so an image appears to be
Action is applied. moving in the direction specified. Whilst the image is partially blurred in all
directions, the overall effect is to “streak” the image in one direction, much
like a fast moving object in a photograph. It may be necessary to resize the
image’s box in Freeway, or reposition the image within its container as the
blur effect may otherwise become clipped.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Type
There are four directions in which the blur can occur. These are Left to Right,
Right to Left, Up, and Down.
Length
This determines the length of the blur. A larger number causes more blurring,
and a longer image than the original.
Apply to Alpha Channel
The Action can be set to apply the linear blur to the Alpha Channel. Switching
this option off will result in the original Alpha channel being retained; with
the resulting image retaining its original transparency. The blur will get a
hard edge as a result.
The Photo Frame effect creates a graduated fade, lighter, or darker effect
The original image along the edges and at the corners of pictures (including those created with
before the Action is Fill Master).
applied. The Action may be applied to a graphic box containing a picture and/or Fill
Master content. If it is applied to a picture then it affects the intersection of
the picture and its graphic box. If the graphic box has both a picture and Fill
Master content then it only affects the picture. If the graphic box has both Fill
Master content and graphic text then it only affects the Fill Master content.
If the graphic box has a fill color then that color shows through more as the
opacity decreases.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Depth A number (1px to 200px) that specifies the
distance the frame protrudes into the picture
from the edge of its bounding box.
Amount A number (0% to 100%) that specifies maximum
amount of the Effect to apply to the frame of
the picture.
Separate Corner Radii Putting a check in this box replaces the
Radius parameter with four separate radius
parameters for the frame corners.
Power Tip: If the image box or contents is rotated, the Linear Blur still retains
Radius A number (0px or Depth to 1000px) that
its orientation with respect to the page. In other words, the down Linear Blur in
specifies the radius of all the corners. The value
the example would still be down if the image itself was rotated.
0px (the default) indicates that rounded corners
are not required.
Graphic Actions
fade, lighten, or darken) to use on all four edges
of the picture or when set to Separate Effects
adds four more effects popup menus one for
each of the left, top, right, and bottom edges.
The actual effects are:
None Apply no effect to this edge
Fade Apply an opacity effect to this edge that
increases the transparency for pixels closer to
the edge
Lighten Apply a brightness effect to this edge that increases
the brightness for pixels closer to the edge
Darken Apply a brightness effect to this edge that decreases
the brightness for pixels closer to the edge
Profile This specifies the shape of the transition curve
to use across the Depth of the frame between
0% of the Effect and Amount of the effect.
When set to Separate Profiles four more
profile popup menus are added one for each of
the left, top, right, and bottom edges. The actual
profiles are:
Very Convex The curve moves very slowly towards the final
value at first and then very quickly
Convex The curve moves more rapidly at the start and
less rapidly at the end
Bevel This is a straight line (linear gradient) between
the initial and final values Photo Frame effect applied
Concave The curve drops less rapidly and flattens out later to a plain blue rectangular Fill
Very Concave The curve drops very rapidly towards the final Master fill
value and then flattens out
Flat The value Amount is used across the entire
depth of the edge
Reset Restores all the parameters to their default values.
The Photo Magic effect allows you to manipulate the color settings of a
graphic. For example you can very easily create rollover effects such as
color image/grayscale image and normal image/bright image by simply
duplicating a graphic box, applying the Photo Magic effect and combining
the images with the rollover Action.
The Action may be applied to a graphic box containing a picture and/or Fill
Master content. If it is applied to a picture then it affects the intersection of
the picture and its graphic box. If the graphic box has both a picture and Fill
Master content then it only affects the picture. If the graphic box has both Fill
Master content and graphic text then it only affects the Fill Master content.
If the graphic box has a fill color then that color shows through more as the
opacity decreases.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Graphic Actions
picture into grayscale version before applying or increases the amount of blue in a picture.
any of the other adjustments. The default value of 0% leaves the blue balance
Gamma A number (0.1 to 5.0) that adjusts the gamma unchanged. Values greater than 0% increase
curve of the picture. Changing the gamma the blue values (making the picture more blue).
curve increases or decreases the brightness of Values less than 0% decrease the blue values
colors in the mid-range. The default value of 1.0 (making the picture more yellow).
gives a straight line between black and white. Neutral A number (0% to 100%) that adjusts the balance
Higher values lighten the mid-range and lower between color and gray in a picture. The higher
values darken it. the number the more color that is removed and
Opacity A number (0% to 100%) that adjusts the opacity replaced with gray. The default value of 0%
of the picture. The default value of 100% leaves removes no color.
the opacity of the picture unchanged. This is the Brightness A number (–100% to +100%) that adjusts the
only parameter that changes the opacity (alpha) overall brightness of the picture. The default
of the picture. All the others leave it unchanged. value of 0% leaves the picture unchanged. A
Red A number (–100% to +100%) that decreases value of -100% makes the picture completely
or increases the amount of red in a picture. black and a value of +100% makes the picture
The default value of 0% leaves the red balance completely white.
unchanged. Values greater than 0% increase the Contrast A number (–100% to +100%) that adjusts the
red values (making the picture more red). Values overall contrast of the picture. The default value
less than 0% decrease the red values (making of 0% leaves the picture unchanged. A value of
the picture more cyan). –100% makes the picture completely 50% gray.
Green A number (–100% to +100%) that decreases or Reset Returns all the sliders to their default positions/
increases the amount of green in a picture. The values.
default value of 0% leaves the green balance
unchanged. Values greater than 0% increase the
green values (making the picture more green).
Values less than 0% decrease the green values
(making the picture more magenta).
The Posterize effect lets you specify the number of Red, Green, and Blue color
(brightness) levels available for use by a graphic and then remaps the pixels to
the closest levels. The minimum number of color levels that can be specified is
2 and the maximum is 100.
1 2 3 The Action may be applied to a graphic box containing a picture and/or Fill
Master content. If it is applied to a picture then it affects the intersection of
the picture and its graphic box. If the graphic box has both a picture and Fill
Master content then it only affects the picture. If the graphic box has both Fill
Master content and graphic text then it only affects the Fill Master content.
4 5 6 If the graphic box has a fill color then that color shows through more as the
opacity decreases.
Parameters
Unchecking the Enabled checkbox
immediately restores the graphic box
7 8 9 to its original state without having to
remove the Action.
1. Original image 6. Blue: +33%
2. Grayscale: checked 7. Neutral: +33%
3. Gamma: 1.5 8. Brightness: +33%
4. Red: +33% 9. Contrast: +33%.
5. Green: +33%
Color Levels Specifies the number of color levels available for
the graphic.
Example
This image has
been remapped to
3 color levels
(giving 3 (R) ×
3 (G) × 3 (B) = 27
available colors)
Graphic Actions
This Action controls the amount of saturation an image’s colors have. An The original image before
image’s colors can be desaturated to give a washed out appearance, or be the Action is applied.
highly saturated to increase their vibrancy.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action. The image has a saturation
Saturate setting of 50%, giving a
This controls the amount of saturation that an image has, ranging from 0% washed out effect to the colors.
(no color saturation) to 200% (double the vibrancy of the image’s normal
color). The default setting is 100%—the image’s normal color appearance.
Graphic Actions
of the Even Color to mix in. The value 0% (the
default) indicates that the pixels in the even The Sharpen Action applies a controllable level of sharpening to an image.
numbered stripes should be left unaltered. The This is particularly useful to compensate for the loss of detail that JPEG
value 100% indicates that the pixels should be compression will give. By slightly sharpening an image, the resulting JPEG
completely replaced with the Even Color. will appear to have more detail than it normally would.
Example Parameters
1 2
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Sharpen Alpha Channel By default, the Sharpen Action will only
1. Image with default Scan Lines applied in front of red box
sharpen the image’s RGB channels, and not the
2. Scan Lines with odd amount of 33%
alpha (transparency) channel, thus preserving
the original transparency of the image. If the
Alpha channel needs to be sharpened, then
check this box.
Diameter The Action will sample each pixel in the
image, as well as its neighbors, to process the
sharpening. The size of the surrounding area for
each pixel is determined by using this slider. A
higher value produces more sharpening.
Parameters
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Smooth Solarizing relies on an internal graph to create the
curves needed to alter the image. The transition
from each point can be straight or smoothed.
Combined Red, Green & Blue By default, this box is checked. The red, green,
and blue channels will be altered identically.
Unchecking this box will gives access to a set of
sliders for each color channel.
The image has been sharpened Percentage Sliders These sliders control the output value at specific
using a radius of 17 pixels. locations in the image’s (or channel’s) tonal
The lettering on the telephone range (or input value) To adjust the output
keypad is much more value for a specific input value, drag the slider
pronounced and legible. or type in a number into the text box.
Graphic Actions
Freeway page as a guide.
The examples below show how the sliders relate to a graph plot. The
horizontal axis indicates the input value, whilst the vertical axis represents
the output value.
Examples
The following are examples of some solarized images, with their settings in
the Actions palette.
Graphic Actions
watermark. The options are Top, Middle, and
The Watermark Action allows you the place a watermark on your image Bottom.
in Freeway. This allows you to “sign” your work using a common image file,
and ensure that your signature is placed consistently on the same location on Examples
every image. The position and opacity of the signature can be defined in the
Actions palette.
The original image
before the Action is
Parameters
applied.
Unchecking the Enabled checkbox immediately restores the graphic box to its
original state without having to remove the Action.
Watermark Graphic
By default, this option shows None and the Action will not affect the image
in any way. Use this popup menu to select an image. In the examples, we
have used a 24 bit PNG image which was exported from Freeway into the
Media folder.
Opacity This controls the opacity of the watermark on
the image.
Horizontal This controls the horizontal positioning of the
watermark. The options are Left, Center, and
Right.
Introduction And now, using the power of Freeway’s Actions technology, you can take
Of the many innovations the Internet has brought us, one of the most visible advantage of Mal’s shopping cart to quickly create your own online store.
is online shopping. The advantages for merchants are clear lower overheads Freeway 5 includes several Shop Actions to provide easy configuration and
in both staff and shop space, provision of greater convenience for their seamless integration. Simply design your store pages in Freeway as you
customers, 24/7 and international availability of the store, and the ability to would for the rest of your web site, apply the Actions in the appropriate
compete on a far more level playing field with larger companies. The spread places, specify the required settings, publish and upload your site—and a
of internet shopping sites is a testament to all of these. highly functional online store is now yours!
However, the implementation of an online store has often been difficult, This document will provide you with a tutorial and reference for these Actions
especially for the individual user. A catalogue needs to be presented allowing and the fundamentals of setting up and using Mal’s e-commerce. Happy
customers to select products to buy, these product choices must be tracked online trading!
(usually in the form of the common shopping cart), and all-importantly, a
secure way of processing the customer’s payment details is vital.
As is often the case, a demand for services rapidly begets solutions, and there
are now numerous companies that offer these services for integration into a
web site. PayPal, Verisign, and Authorize.Net are well-known companies who
provide secure credit card processing services. Many companies who provide
shopping carts link with these (and other) credit card processors.
One of the better shopping carts is Mal’s e-commerce
(http://www.mals-e.com) which provides two packages: a free service
offering integration with PayPal, NoChex, and Paymate, and a premium
service offering integration with VeriSign, Authorize.Net, and a wide variety
of other credit card processors.
Initial setup
Click on this link to take you to the New Account page: Before you progress into the Administration area, you’ll be asked to set a
Payments Password:
Here you are required to fill in some personal details. Part of the Terms of
Service for Mal’s e-commerce is that you enter valid contact details here, so fill Fill in a new password (making sure you record the password you use
in the required information (you should try to ensure that you enter a valid somewhere) and click on the Submit Password button. A confirmation page
email address as this will be used to send account details to) and finally click will appear reminding you to keep a record of your password.
on the Join Now button at the bottom of the page.
International and Currency setup
You will now be presented with a thank you message which has some There are now some initial settings you will need to check and potentially
important information on it: change before starting to use your store. Now you have created a cart in your
account, a new section of links will be available on the left hand side of the
Admin page, under the heading of Cart Links. Click on the Cart set-up link.
Shop Actions
where you can maintain various settings for your shopping cart: page where you can change international settings for your cart. Firstly select
the language you would like text in the cart to appear in:
is outside the realms of this tutorial. The Reference section on page 15-108
provides further details about using multiple currencies. Mal’s e-commerce
allows you to set a message to be displayed which describes to customers
the currency in which the prices in the shopping cart are shown. The default
message is “All prices are in US dollars”. If you are not selling in US dollars,
you should change this to something more appropriate, for example “All
prices are in UK Pounds Sterling”. The Format menu allows you to select a
format in which to display prices there are three options available, so select
the currency format most suitable for the currency you are using in your
shopping cart. The final option for currency (the Currency menu) allows
you to select the currency you wish to send to your third party credit card
processor. Select the currency you wish to use from the menu.
This completes setting up the international options for your account so scroll to
the bottom of the web page and click the Submit Changes button.
You will need to return to this page later when working in your Freeway
document, but for now you can move onto the next step.
Shop Actions
There are many different payment processors which can be used with Mal’s
e-commerce; the free service provides a small number, while the premium Initial setup
service provides integration with a great many more. It wouldn’t be feasible Although templates are provided for Freeway Shop, for the purposes of this
to cover all of these different setups, so we shall just focus on PayPal. tutorial we will use a blank template and apply all the Actions ourselves to
To use other payment processors, please refer to the Mal’s e-commerce help familiarize you with the Actions used to enable the links to the shopping
documentation for the specific service you wish to use. cart. Therefore, start Freeway and create a new document based on the Blank
Setting up PayPal integration is in fact very straightforward. On the Cart set- template.
up page, click on the PayPal link in the Payments section. All you need to do is The first thing you must do for the Actions to work is to specify the web
enter your email address in the PayPal Account ID text entry field, and ensure address of your shop. This is the URL of your shop as seen in a web browser.
that Website Payments Standard radio button below it is selected. Open the File menu and select Document Setup. Click on the Upload button
at the top of the dialog to switch to the Upload panel.
You don’t even need to have set up a PayPal account for this to work when
PayPal receives the first order from your site, they will get in contact with you
at the email address you specify in the PayPal Account ID field. Finally, click
the Update button at the bottom of the web page to save your changes.
This completes a simple setup of Mal’s e-commerce for use with Freeway. There
are plenty more options which can be set, some of which are elaborated on in the
Reference section later in this document. For details of options not covered here,
please refer to the Mal’s e-commerce documentation.
fill in the URL of your shop. For the purposes of this tutorial, you should use the server your account was set up on from the MAL Server popup menu (you
root address of your web site, and it should include http:// at the beginning should have recorded this information at the same time as you recorded
(for example http://www.softpress.com). It is possible to set this to a your User ID). If you have forgotten or lost this information, log into
subfolder on your web site, and this will be covered in the reference section of your Mal’s account and you’ll be able to see which server your account
this documentation. is on in the address bar of your web browser (it will be something like
It’s now time to start applying the Actions which will enable the integration ww4.aitsafe.com).
with your store. The most important of these is the E-Shop Settings Action The next step is a little more involved. You must fill in the Link
where you will enter information about your Mal’s e-commerce account. This Verification key code. To obtain this code, you need to log into your Mal’s
is an Action which is applied to a folder, so select your Site Folder in the account and navigate to the Cart set-up page. From here, click on the
Site panel. Now open the Actions palette, if it is not already open, and Link Verification link this will take you back to the Link Verification
click on the button in the bottom-left corner of the palette. A dialog will page which you visited earlier. At the bottom of this web page is a section
appear listing all of the Folder Actions you have available. Select the E-Shop entitled “Javascript Button Creator”.
Settings Action and OK the dialog. The Actions palette will now display the To obtain the key code for your account, select the “Hash secret on its own”
E-Shop Settings user interface. radio button, enter your Payment password (not your main Mal’s account
password; you set the Payment password in the section “Setting up a Mal’s
e-commerce account: Initial setup”) into the “Payment password” field, and
click on the “Get Validator” button. This will take you to a web page simply
containing some text of the form “Hash Secret key for [Your User ID] : [Your
Hash Secret key]”. Copy the hash secret key (the string of letters and numbers
after the colon), return to Freeway, and paste it into the Key code field in the
E-Shop Settings Action.
There are a number of other settings for your cart which can be changed in this
Action, available in the Cart section of the Action’s user interface (changing
the Cart popup menu reveals different groups of settings), however these
mainly relate to the appearance of your cart and will be covered in detail in the
Reference section of this documentation. For now, leave them as they are. You’re
now ready to move on to creating products to sell on your web site.
Shop Actions
the Inspector palette to give it the following dimensions: Left 125px, Width an image of a paintbrush. Next to the graphic item containing the paintbrush
300px, Height 70px. Click inside the graphic item and type the text “Paint image, draw another smaller graphic item and enter into it the text “Buy
Shop”. Select the text and use the Inspector palette to set its font to Brush a paintbrush”. Select this item, open the Item menu, and then the Actions
Script MT and its size to 72px. submenu, and select E-Buy Button from the list of Actions.
If it is not already visible, show the Actions palette. Select the item to which
you have just applied the Action, and the user interface for the Action will be
displayed in the Actions palette:
Here we will set parameters to be passed to the shopping cart. Enter the text
There are several Actions which can be used to create product links to the Mal’s “Paintbrush” into the Product field, then enter “5.00” into the Price field,
shopping cart. We shall use three of these in this tutorial: E-Buy Button and E- and leave the Quantity field with its default value of 1. Unsurprisingly, when
Buy Text which will allow customers to add products to their shopping cart, and a customer clicks on this button, they will add 1 Paintbrush costing 5.00
E-Review Button to allow them to view their shopping cart. currency units to their shopping cart. In fact, you have now entered enough
First we will use E-Buy Button to allow customers to purchase paintbrushes. information to be able to test the store.
The E-Buy Button Action can be applied to a graphic item or an HTML form Select Upload from the File menu, and enter the FTP settings of your web
button, and when clicked on by a customer will add the product to their space (remember that your site needs to be uploaded to the same location
shopping cart in the quantity specified. specified in the Web Address field in the Upload dialog). Click OK to upload
your site.
page you have created with a header, graphic of a paintbrush, and some this message, the most likely cause is that you have not correctly specified
graphic text offering you the opportunity to buy a paintbrush. Click on the the URL of your shop in the Mal’s e-commerce configuration. To check this, log
“Buy a paintbrush” text. Normally at this point you would be taken to your into your Mal’s e-commerce account and navigate to the Account Details
Mal’s shopping cart, however because this is the first time you have uploaded page (the link is in the Management section on the left-hand side of the Mal’s
your site, you should see the following message: administration page). On the Account Details page, ensure that the Web
site URL field contains the correct URL of your shop, and if it doesn’t enter
the correct URL and click the Update Record button. Now return to your
online shop and try clicking on the “Buy a paintbrush” text again. You should
now see the message confirming that the configuration file has been loaded
correctly.
To proceed on to the shopping cart, refresh the page in your browser and the
Mal’s shopping cart page will be loaded. Here you will see that 1 paintbrush
at a price of 5.00 currency units has indeed been added:
The settings that you specify in the E-Shop Settings Action are transferred
to Mal’s e-commerce using an automatically generated configuration file.
Whenever you change these settings and upload your site, the first time your
Mal’s shopping cart is accessed after this, the new settings are loaded into
Mal’s from your configuration file and you will see this message to confirm
that the configuration file has been loaded correctly. If Mal’s cannot find the
configuration file you will see the following message:
At the bottom of the shopping cart there are three buttons. Recalculate
allows the customer to change the number of a particular product to buy
without needing to return to your shop. When they click on Recalculate,
the cost of the products in their shopping cart will be recalculated based
on changes they have made. The Go To Payments button will take the
customer to the payments page, which will depend on which methods of
Shop Actions
Shopping; clicking on this will return the customer to the web page in your
shop from which they entered the shopping cart.
We will now use the E-Buy Text Action to create HTML text links for
customers to click which will add paint to their shopping cart. Return to
Freeway and draw a 300 pixels wide by 200 pixels high HTML item beneath
the graphic items we just created for buying a paintbrush. With the item
selected, use the Inspector palette to give the item a 1 pixel black border,
and padding of 5 pixels.
Click inside the HTML item you just created to get a text cursor and type the
text “Purchase Paint”. Now hit the E key to add a carriage return and
then insert a graphic item into the text flow by selecting Graphic Item from
the Insert menu. Select the graphic item and use the Inspector palette to
change its size to 30 pixels wide by 30 pixels high, and to align Middle (using
the Align popup menu in the Dimensions section), and use the Styles & You will notice that this Action has very similar options to the E-Buy Button
Colors palette to change its background color to orange: Action we used earlier, but then this is unsurprising as it is designed to do
exactly the same job! The only difference is the presence of a new field, Text
in Link, which allows you to specify the text that will be output for the
customer to click on. Start by entering “Buy 1 Container of Orange Paint”
into this field, and enter “Container of Orange Paint” into the Product field.
Change the Price field to “13.00” and leave the Quantity field at its default
value of 1. You can now upload your site again and test it to check you can
add containers of paint to the cart:
As you will see, the E-Buy
Text Action has created a
link on the text you entered
into the Text in Link field
which adds a container of
Click back inside the HTML item (after the graphic item you just inserted) to paint to the cart.
get the text cursor again, and hit the space bar to add a space character. Open You can also use the E-Buy Text (and the E-Buy Button) Action to add
the Insert menu, go to the Action Item submenu and select E-Buy Text. This different quantities of a product to the cart, if this is desirable. To demonstrate
will insert the E-Buy Text Action into the text flow. Select it to display its this, we will add another E-Buy Text Action to the page which will allow
options in the Actions palette: customers to add 5 containers of paint to their cart. In Freeway, click in the
you just created. Hit Enter to start a new line, and then insert a 30 pixel wide
by 30 pixel high graphic item as you did earlier, and again use the Inspector
Shipping Calculations
palette to vertically align it in the middle of the text line. This time give it a
We’ll take a quick break from Freeway to have a look at a couple of the
purple background color. Once again, add a space after the graphic item and
options available within Mal’s e-commerce, so log into your Mal’s account.
then insert an E-Buy Text Action.
Navigate to the Cart set-up page and select the Shipping link. This will
Select the Action and use the
allow you to specify the method you wish to use to calculate the amount of
Actions palette to change
shipping to charge your customers. There are eight options available, but only
the Text in Link field to “Buy
the first three are simple enough to consider in this tutorial see the Mal’s e-
5 Containers of Purple Paint”,
commerce documentation for details of the others.
the Product field to “Container
of Purple Paint”, and the Price At the top of the Shipping Calculations page there are two text entry fields.
to “15.00” (purple paint is The first of these allows you to specify that all orders over a specified value
clearly more expensive than orange paint). The final field to change is Quantity, into will have free shipping. The second allows you to add a fixed cost to all orders,
which you should enter “5”. The price of 15.00 is per unit, so the total cost of these 5 regardless of shipping method or order value. By default, both of these fields
containers will be 75.00. You can now upload and test your store once again to see are set to 0.00 which means that both of these options are switched off. To
how 5 containers of purple paint will be added to the cart by clicking on this link. enable them, simply enter a value in the field relevant to the option you wish
to enable. To switch the option off again, return the value to 0.00.
The final thing that we are going to add to the page is a button which allows
the customer to view their cart without adding anything to it. This will be Beneath these fields, there is a set of radio buttons to select the shipping
accomplished by using the E-Buy Button Action. Draw a graphic item which is calculation method you wish to use in your shopping cart. As mentioned
100 pixels wide by 20 pixels high and place it below the HTML item containing above, we shall only consider the first three here. By default, the No Shipping
the E-Buy Text Actions. Click inside the graphic item and type the text “Go option is selected and, as would be expected, this means no shipping is
to Cart”, and using the Inspector palette, change the font to Verdana, and calculated by the shopping cart.
the size to 16px. Select the graphic item and use the Item menu to apply the Selecting “Option 1: Fixed Value” will add a fixed shipping cost to every order
E-Review Button Action to it. This is all you need to do! There are a couple of processed by your shopping cart, regardless of the number of items ordered.
options which can be set for this Action, but we won’t use them here. If you
once again upload your page, you will now be able to click on the “Go to Cart”
button that you just created to view the Mal’s shopping cart.
Enter the shipping cost you wish to add to the order into the text entry field
for this option.
Selecting “Option 2: Calculated from quantity” will apply a fixed cost for
every item ordered, i.e. if you set a fixed shopping cost of $2.00 per item, if 5
items are ordered the total shipping cost will be $10.00.
Shop Actions
Return to the Cart set-up page again, and click on the Sales Tax link
(which should be just below the Shipping link). You will be taken to the Tax
Calculations page we shall only consider the simpler options in this tutorial.
Enter the shipping cost per item into the text entry field for this option. The first setting is the checkbox labeled “Tax Basis”.
Selecting “Option 3: Calculated from weight or other value” allows calculation of
shipping cost based on a value you can specify later in Freeway.
These allow you to select whether no tax will be used (the default setting), use
a global tax rate that is the same for all products you sell (determined in the
next setting) or specify the tax rate for each product separately in Freeway.
The second setting is a text entry field labeled “Default Tax Rate”.
This option will apply a shipping cost per shipping unit in a similar way
to Option 2, but using a value you specify rather than the number of items If you chose to use a global tax rate for all your items in the previous options
ordered. Enter the shipping cost per shipping unit in the text entry field for you will need to enter the rate here.
this option. There is also a checkbox at the bottom of the text for the option. The third setting is the checkbox labeled “Shipping”.
By checking this box, you specify that the shipping units used to calculate
the shipping cost is the price of the item. This allows you to specify that
the shipping cost should be a percentage of the total cost of the order; for
example, to specify that the shipping cost should be 10% of the total order,
This box is is checked by default which means that any delivery charges for
check this box and set the text entry field to 0.10.
an order will be included in the taxable value. Uncheck this box if you do not
Select the radio button corresponding to the shipping calculation you wish wish to charge tax on shipping costs.
to use, and then enter the appropriate details as described above. To confirm
Finally, there is another group of radio buttons under the heading “Quote tax
your changes, scroll to the bottom of the web page and click the Update
before we have their shipping address”.
Shipping button.
Each of the options in the popup will display a different group of settings to
control the appearance and behavior of the cart. The first thing we will do is
set the cart to horizontally center itself in the browser window. Change the
Cart popup menu to General; a group of settings containing two popups
titled Cart Width and Cart Align will be displayed. Select Center from the
Cart Align popup.
Shop Actions
which should contain the single container of orange paint that you have just
added. Now proceed to the payment process by clicking the “Go To Payments”
button. You will be taken to a page that allows the customer to enter their
address details; fill in the fields so that you’ll be able to see how this translates
into Mal’s later.
When you have entered this information, click the “Continue” button at the
bottom of the page to move on. This will show a summary page containing
the details of your order and, at the bottom, a list of payment options. As
the only payment option that we set up in Mal’s earlier was Paypal, this is
the only one that will be listed. Click on the “Continue” button and you will
be taken to the payments page on the Paypal web site. There is no need to
proceed any further than this because transferring the customer to this page
is the last point that your Mal’s shopping cart has in the process; Mal’s will
Now change the Cart popup menu to Background. In the group of settings now have made a record of the transaction.
displayed, select Other… from the Color popup menu, and select a light You should now log into your Mal’s e-commerce account once more. In the
yellow color from the color selection dialog that appears. This will set the Cart Links section on the left, click on the link titled “List Orders”. The List
background color of the cart to the light yellow color you have selected. Orders page contains a list of all the orders that have been processed by your
Upload your site, and then navigate to your shop page in your browser. Click shopping cart, and you should see the order that you have just made in the
on one of the buttons or links to add a product to the shopping cart you will list. If you click on the link titled “DETAILS” on the right hand side of the row
be taken to the page informing you that your new configuration settings for your order, you will be taken to a page which contains all of the details
have been loaded. Refresh this page to view your shopping cart, and you for the order, including the products ordered and shipping/billing addresses.
will see that the cart now has a light yellow background and is horizontally One important thing that should be noted is that these orders do NOT confirm
centered in the browser window. There are plenty more options to personalize payment by the customer, they simply provide you with a record of an
your shopping cart see the Reference for further details. order that has been made through the cart. You shouldn’t fulfil orders until
you receive confirmation of payment from Paypal or whichever payment
While you are in the shopping cart, change the quantities of all the products
processor you decided to use.
to 0, and click on the Recalculate button. This will empty your shopping
cart in preparation for the last stage of this tutorial. This completes the introductory tutorial for Freeway’s integration with
Mal’s e-commerce. Explore the Reference section of this documentation for
Viewing Orders further explanation of features covered in the tutorial, and for details of
The last thing we will look at is how you view orders that customers have features not covered in it, for example adding product variations using the
made in your shop. To do this, we will pretend to purchase 1 container of E-Buy Form Action.
orange paint. Return to your shop page, and click on the “Buy 1 Container
E-Shop Settings
The E-Shop Settings Action is applied to the root folder in your Freeway
document. To apply it, select the root folder in your Freeway document and
click on the button in the bottom-left corner of the Actions palette, then Cart Width Allows you to select the width of the Mal’s
select the E-Shop Settings Action from the list that appears. It contains shopping cart in the browser. You can select either
numerous settings, all related to the identification and behavior of the Mal’s a fixed-width value or a percentage width value.
shopping cart. Cart Align Specifies the horizontal alignment of the Mal’s
shopping cart in the browser window. Options
Mal’s Connection Settings
are Left, Center, or Right.
Text
Mal’s Shopping Cart Settings Color Specifies the background color of the shopping
Selecting different values in the Cart popup menu will display different cart pages.
groups of settings for the appearance and functionality of your Mal’s Image Allows selection of a background image for the
e-commerce shopping cart. shopping cart pages.
Shop Actions
how the background image should behave when
the user scrolls the browser window. There are
two values: Scrolls which specifies that the
background should scroll with the contents of
the page, and Fixed which specifies that the
This section contains settings to control the appearance of input header rows
background should remain stationary when the
in the cart. These headers are displayed above information which can be
user scrolls the browser window.
changed by the customer.
Header Image Background Specifies the background color of the header row.
Text Specifies the color used for the text in the
header row.
Link Colors
the Mal’s Admin area, this will specify which currency units as these are set by the cart itself.
currency to use. This should be a value from 1 to Tax If your Mal’s account has been set up so that tax
5, corresponding to the currency number in the is calculated based on Buy Now links that you
Mal’s Admin area. There is no need to change this create (see the Basis section of the Sales Tax
value if you are not using multiple currencies. page in Mal’s Admin), then this field will specify
the tax percentage to apply for this item.
E-Buy Button
Quantity Specifies the number of this product which will
be added to the shopping cart by clicking on
this button.
Shipping Units If your Mal’s account has been set up to calculate
shipping costs based on weight or some other
value (options 3, 5, 7, and 8 in the Shipping
page in Mal’s Admin), this field specifies the
weight or other value to be used to calculate
shipping. If you are not using these options to
calculate shipping, leave this field blank.
Tool tip Specifies a message to be displayed in a popup
bubble when the customer hovers their cursor
over this button. To automatically insert the
contents of the Product field into the tool tip,
The E-Buy Button Action creates an HTML or graphic button which when
enter the characters ^o (the first character
clicked on the web page will add a specified product to the shopping cart. It
is created by holding down the O key and
can be applied to graphic items and HTML form buttons. To apply it, select
pressing the i key)—the text in the Product
the item you wish to apply it to, open the Item menu, open the Actions
field will be substituted for these characters
submenu, and select E-Buy Button.
when you publish your site.
Options Target Specifies where the new link should be opened. See
Product Specifies the name of the product that will be the section Targeting links on page 282, and To
added to the shopping cart when this button apply a predefined link target on page 283 for a
is clicked on. It will appear with this name in description of what each of these settings do.
the shopping cart, and also on orders once they
have filtered into your Mal’s account.
Shop Actions
The E-Buy Form Action is another Action which will allow your customers to
add products to their shopping cart, however it is somewhat more advanced
than the E-Buy Button and E-Buy Text Actions. It will create a form on your
shop page, complete with a “Buy Now” button which the customer clicks
to submit their choices to the Mal’s shopping cart. By creating child items
of the E-Buy Form you can add HTML form items which give the customer
greater control over the quantity and variation (for example a sweater may
be available in several sizes) of the product they wish to buy. The E-Buy Form
Action works with two other Actions, E-Quantity and E-Product Variation
to provide this functionality.
The E-Buy Form Action can be applied to HTML items and HTML tables. To do
so, select the item you wish to apply it to and open the Item menu, open the
Actions submenu, and select E-Buy Form.
Options
The E-Buy Text Action creates a HTML text link which when clicked on the
web page will add a specified product to the shopping cart. It can be inserted
onto the page, or into another HTML item. To insert it, open the Insert menu,
open the Action Item submenu, and select E-Buy Text.
Options
The options for the E-Buy Text Action are identical to those for the E-Buy
Button Action, apart from one field. Refer to the documentation for the E-Buy
Button Action for all other options.
Text in Link This field specifies the text that will actually be
output with the link on. To automatically insert
the contents of the Product field into the text,
enter the characters ^o (the first character
The E-Buy Form options are almost exactly the same as for the E-Buy Button
is created by holding down the O key and
Action. The only differences are that there is no Tool tip field, and the difference
pressing the i key)—the text in the Product
in the behavior of the Quantity field, which is described below.
field will be substituted for these characters
when you publish your site.
shopping cart if there is either no E-Quantity Action Allow the customer to enter the quantity of the product to add to the
that is a child of the E-Buy Form Action item, or if shopping cart.
there is no valid value selected in the E-Quantity Form items with the E-Product Variation Action applied
Action which is a child of the E-Buy Form Action. ◆ Checkbox
Value: Enter text here to specify the variation of the product that should
Adding Quantities and Variations
be added if the customer checks this checkbox.
To make quantity and variation fields available to the customer, you use the
◆ Radio Button
E-Quantity and E-Product Variation Actions. These can be applied to certain
Create a group of radio buttons as you normally would, and apply the
HTML form items that are children of the item to which the E-Buy Form
E-Product Variation Action to each of them to allow the customer to
Action is applied. The types of form items which they can be applied to are
select one variation from a number of options.
checkboxes, radio buttons, text fields and menu/lists, and the items can either
be inflow children (clicking inside the E-Buy Form item, and inserting the Value: Enter text here to specify the variation of the product that should
child form item from the Insert menu) or absolute children (drawing the child be added if the customer selects this radio button in the group.
form item inside the bounds of the E-Buy Form item). ◆ Menu/List
Allow the customer to select one variation from a list. Create Choice/
You use the Item Output panel of the Inspector palette to specify the
Value pairs for each variation option you would like to provide.
quantity or variation that the child form item will adjust when the customer
clicks the Buy Now button. The specific settings for each type of form item Value: Enter text here that corresponds to the variation to add to the
are outlined below. shopping cart for the specified Choice.
◆ Text Field
Form items with the E-Quantity Action applied
Allow the customer to enter the variation of the product to add to the
◆ Checkbox shopping cart.
Value Enter a number here to specify the quantity of the product that
should be added if the customer checks this checkbox. Using a custom button for an E-Buy Form
◆ Radio Button If you would like to use a button for an E-Buy Form that is different from the
Create a group of radio buttons as you normally would, and apply the one which is added automatically, simply create a child graphic item or HTML
E-Quantity Action to each of them to allow the customer to select one button of the E-Buy Form and apply the E-Buy Button Action to the child.
quantity from a number of options. Freeway will automatically recognize that this button is present and will use
Value Enter a number here to specify the quantity of the product that it as the button to submit the form, and will not output the default button.
should be added if the customer selects this radio button in the group.
E-Review Button
◆ Menu/List The E-Review Button Action creates an HTML or graphic button which when
Allow the customer to select one quantity from a list. Create Choice/Value clicked on the web page will transfer the customer to the shopping cart page.
pairs for each quantity option you would like to provide.
It can be applied to graphic items and HTML form buttons. To apply it, select
Value Enter a number here that corresponds to the quantity to add to the item you wish to apply it to, open the Item menu, open the Actions
the shopping cart for the specified Choice. submenu, and select E-Review Button.
Shop Actions
Tool tip Specifies a message to be displayed in a popup
bubble when the customer hovers their cursor
over this button. The options for the E-Review Text Action are identical to those for the
E-Review Button Action, apart from one field. Refer to the documentation for
Target Specifies where the new link should be opened.
the E-Review Button Action for all other options.
See the section Targeting links on page 282, and
Text in Link This field specifies the text that will actually be
To apply a predefined link target on page 283
for a description of what each of these settings output with the link on.
do. Tool tip Specifies a message to be displayed in a popup
bubble when the customer hovers their cursor
E-Review Text over this button.
The E-Review Text Action creates a HTML text link which when clicked on
Target Specifies where the new link should be opened.
the web page will transfer the customer to the shopping cart page. It can
See the section Targeting links on page 282, and
be inserted onto the page, or into another HTML item. To insert it, open the
To apply a predefined link target on page 283
Insert menu, open the Action Item submenu, and select E-Buy Text.
for a description of what each of these settings
do.
Appendix
Quick Finder
Working with Preferences................................................................................................... 424
Document Setup................................................................................................................... 429
Working with Freeway’s Toolbar....................................................................................... 436
List of Freeway’s Tools......................................................................................................... 438
Keyboard shortcuts............................................................................................................... 442
Working with preferences General panel
Appendix
The preferences for both Freeway 5 Pro and Express are split logically
between those that affect the application itself, and those that refer to the
individual document.
Preferences, found under the Freeway menu, allow you to set the
working environment within Freeway. The Document Setup dialog, from
the File menu, contains options that you can use to customize the output General preference panel: Freeway 5 Pro above; Freeway 5 Express below.
Freeway generates.
The changes that you make in Document Setup will affect the current
document you’re working in. To make the current settings your new application
defaults so that they will affect any new documents you create, close any open
documents, then reopen Document Setup from the File menu.
424 | Appendix
Arrows nudge FW 5 Pro only Palettes snap FW 5 Pro only
Appendix
In Freeway, you can move or resize selected items using the arrow keys on the In Freeway 5 Pro, all palettes can be made to snap together at any edge. Once
keyboard. The value set for Arrows Nudge is the nudge distance. Normally, snapped, the group of palettes can be O-dragged as a set. If you prefer
this is set to 1px. palettes not to snap together, uncheck this preference.
Appendix | 425
Text panel Minimum anti-alias size FW 5 Pro only
Appendix
This option lets you define a minimum size for applying anti-aliasing
(smoothing) to graphic text. As anti-aliasing softens the edges of lines, small
fonts can appear blurred when anti-aliasing is applied. The default is 0px.
Invisibles color
When you choose to display invisible characters (such as spaces and carriage
returns) while working in Freeway, you can choose which color they are
displayed in. Clicking the color button opens the Mac OS X system color picker
dialog where you can choose a new color. Show or hide invisible characters by
choosing Invisibles from the View menu.
426 | Appendix
Appearance panel Graphic Boxes
Appendix
Specifies the color used for the border of graphic items. Clicking the color
button opens the Mac OS X system color picker dialog where you can choose
a new color.
Table-Positioned Boxes
Specifies the color used for the border of HTML non-layer items. Clicking the
color button opens the Mac OS X system color picker dialog where you can
choose a new color.
Specifies the color used for the border of HTML layer items. Clicking the color
button opens the Mac OS X system color picker dialog where you can choose
a new color.
Appendix | 427
Grids & Guides panel Grid color FW 5 Pro only
Appendix
Specifies the color used to display the grid lines. Clicking the color button opens
the Mac OS X system color picker dialog where you can choose a new color.
Specifies the color used to display margins. Clicking the color button opens the
Mac OS X system color picker dialog where you can choose a new color.
Freeway 5 Pro above; Freeway 5 Express below.
Guide magnetic range FW 5 Pro only
428 | Appendix
Document Setup Document graphics FW 5 Pro only
Appendix
When you import a bitmap image into Freeway, Freeway notes the location
Freeway 5 Pro of the original file on your computer. It also captures a 72ppi (pixels per inch)
Freeway 5 Express settings are shown on page 430. version and stores this internally within the Freeway document.
256 colors will give the smallest Freeway document size; Millions of colors
will save the highest possible quality image with your Freeway document,
allowing high quality images to be generated when you publish your site if
the original images are not available.
Choosing 256 colors is not recommended for normal use, as it means that
Freeway will not have sufficient information to export images at reasonable
quality if the original image is unavailable.
Note: Changing this option affects newly imported graphics. If you wish to re-
import existing graphics, select Resample All in the Edit Resources dialog.
Freeway 5 Pro
Site folder
Click the Select… button to specify the location of the Site folder, which
will be used to contain the HTML and resource files when the site is published.
Pasteboard width
Specifies how far the pasteboard extends in each direction outside the page area.
Appendix | 429
Freeway 5 Express Output
Appendix
Freeway 5 Pro
Freeway 5 Express settings are shown on page 432.
Freeway 5 Express
Site folder
Click the Select… button to specify the location of the Site folder, which
will be used to contain the HTML and resource files when the site is published.
Pasteboard width
Specifies how far the pasteboard extends in each direction outside the page area. Freeway 5 Pro
Specifies the default standard of HTML generated by Freeway 5 Pro. For more
information about the different HTML levels available, see Default HTML on
page 7 and Choosing an HTML level on page 11.
430 | Appendix
HTML code External Stylesheets FW 5 Pro only
Appendix
This determines the formatting applied to the HTML generated by Freeway. Stores CSS style sheets in a separate file from the HTML. This option is off
Note that this option has no effect on the appearance of the page in a browser. by default, because some Actions may exhibit problems with an externally
More Efficient leaves out optional white space to make the files as small as referenced style sheet.
possible.
Uppercase tags
More Readable makes the HTML easier to read by indenting the output. Specifies that the HTML tags should be generated in upper case rather than
the default lower case. This is not applicable to the XHTML output options in
Line Feeds FW 5 Pro only
Freeway 5 Pro.
Macintosh, DOS, and UNIX use different linefeed characters. Selecting DOS
or UNIX will allow the HTML text files to be read more easily on DOS/UNIX IE 6 Compatible
systems. This doesn’t matter for browsers, but may be important for CGI This setting specifies that Freeway will write an IE 6-specific stylesheet
scripts, etc. which contains style definitions that used to work around some of the
known display problems in IE 6. For more information, see Freeway and IE 6
Resources
compatibility on page 182. IE 6 Compatible defaults to on.
For more information, see Resources on page 8.
Max. filename length FW 5 Pro only
File names
This specifies the maximum length of automatically generated filenames.
This specifies the conventions used to generate the file names of HTML files
and resources when the site is published. Image type creator FW 5 Pro only
Alphanumeric restricts the file names to letters and digits, as When Freeway 5 Pro creates image files, they are given a creator type to
required by older servers. control which application will be used to open them. By default this is set to
DOS restricts the file names to 8.3 format for the default browser, as specified in Preview Setup… on the File menu.
maximum compatibility with MS-DOS web For consistency you may wish to change the creator type to that of another
servers. application. Either type in a new creator type (these are a Mac OS attribute
UNIX/Windows (recommended) generates file names suitable for and are case sensitive) or choose the application you wish image files to be
UNIX or Windows servers. associated with using the Choose Application… command.
None specifies no creator type.
Reinforce layout tables FW 5 Pro only
Other allows you to specify the four-letter creator type
For technical reasons, the layout tables generated by Freeway’s output may
explicitly.
need to be reinforced to prevent browsers distorting the layout. Freeway 5 Pro
gives the option to insert invisible GIF images that are scaled to precise widths Default Browser sets the image creator type to the default
to reinforce the table. This option is on by default. browser.
Choose Application… allows you to set the creator by selecting an
application on your hard disk.
Appendix | 431
Freeway 5 Express File names
Appendix
This specifies the conventions used to generate the file names of HTML files
and resources when the site is published.
Alphanumeric restricts the file names to letters and digits, as
required by older servers.
DOS restricts the file names to 8.3 format for
maximum compatibility with MS-DOS web
servers.
UNIX/Windows (recommended) generates file names suitable for
UNIX or Windows servers.
Uppercase tags
Specifies that the HTML tags should be generated in upper case rather than
Freeway 5 Express the default lower case. This is not applicable to the XHTML output options in
Freeway 5 Pro.
HTML code
This determines the formatting applied to the HTML generated by Freeway.
Note that this option has no effect on the appearance of the page in a browser.
More Efficient leaves out optional white space to make the files as small as
possible.
More Readable makes the HTML easier to read by indenting the output.
Resources
For more information, see Resources on page 8.
432 | Appendix
Upload
Appendix
The Upload panel specifies the default upload method for when your
document is uploaded to a web server using the Upload… command on the
File menu.
There are three upload options, selected from the Method popup menu:
FTP File Transfer Protocol. The default method
of uploading web sites to a server. You will
need to provide the Server, Directory (folder
on the server), User Name, and Password
information. Consult your service provider for
this information if you don’t have it to hand.
File Copy This setting allows you to copy to a site located
on a local volume (or on a server accessed
using a local network). This will normally be
the method to use if you have your own web
server, or if you will publishing your site using
your own computer and Personal Web Sharing For information about uploading your web site, see Uploading on page
(or similar software). Choose a local hard drive, 169 and Setting the upload options on page 170. For information about
folder or networked server by clicking the publishing using your own computer, see Publishing your site using personal
Select… button. web sharing on page 174.
Appendix | 433
Text
Appendix
The Upload options shown here are from Freeway 5 Pro but the
Document Setup, Text panel, Freeway 5 Pro (above) and Freeway
settings and options are the same for Freeway 5 Express.
5 Express (below)
434 | Appendix
This option specifies the default encoding and language used for HTML
Graphics
Appendix
FW 5 Pro only
generated when the site is published, and the default fonts used to display
text in the Freeway document when editing the site.
Default encoding FW 5 Pro only
Freeway 5 Pro uses certain default values for GIF, PNG, and JPEG images that
it creates. These can be controlled on an image by image basis using the Item
Output panel of the Inspector palette or you can change the default values
Freeway uses.
GIF/PNG
Allows you to specify the default color palette, and whether the resulting
images will be interlaced. The settings for GIF and PNG are similar, but there
is an option for PNGs to be saved with a color depth of “millions”.
JPEG
Allows you to specify whether images are made progressive, and the default
compression/quality level. The higher the quality setting, the larger will be
the images exported by Freeway.
Appendix | 435
Apply bilinear scaling to images Working with Freeway’s Toolbar
Appendix
This option allows you to determine whether images will be scaled using
bilinear filtering. Bilinear scaled images generally look smoother than images The Toolbar provides access to the tools you use for creating and editing
that are scaled without bilinear filtering. This setting will not affect images items on your Freeway page.
imported as pass-through into HTML item boxes.
◆ Hide the Toolbar by clicking the button in the top right corner
of the document window. This rolls the Toolbar up into the document
window’s title bar. To show the Toolbar, click on the button again.
436 | Appendix
Customizing the Toolbar ◆ To remove a tool, drag it out of the Toolbar.
Appendix
The default tool set can also be customized. To do this, choose Customize
Toolbar… from the View menu, or L-click on the Toolbar area and
choose Customize Toolbar… from the contextual menu. This presents the Deleting a tool from
customization panel which allows you to drag your preferred tools into the the Toolbar.
Toolbar, and change their order if you wish.
◆ To return the Toolbar to the default tool set, drag the default set shown
at the bottom of the customization panel.
You can also remove a tool directly from the Toolbar without opening
the customization panel by L-clicking the tool you wish to remove and
choosing Remove Item from the contextual menu. Note that this action only
removes the item from the Toolbar, it does not completely delete the tool from
Freeway itself.
◆ To add a tool to the Toolbar, drag the icon of the tool you wish to add
The Inspector button
into the Toolbar area and drop it where you want it to appear. The other
contains a menu of palettes
tools will move to make room for the new tool you place.
that can be shown or hidden
by choosing from the list.
Dragging a tool
into the Toolbar.
Appendix | 437
Modifier keys Tools palette
Appendix
FW 5 Pro only
Holding down certain keys on the keyboard while using any tool will alter the
behavior of the tool until you release the key. To show the Tools palette, choose Tools from the View menu. A floating
palette of tools appears.
Holding the O key temporarily changes any tool (except the Zoom tool) to
a grabber hand, allowing you to drag the page around within the window.
Holding the O key while using the Zoom tool changes it from zoom in to
The Tools palette, shown
zoom out.
with the CSS Layout
Holding the C key temporarily changes to the Select tool, allowing you to button active.
select, deselect, or move items.
SC temporarily changes to the Zoom tool.
For more information about using the Zoom tool, see Viewing the page at
different magnifications on page 32.
The Tools palette cannot be customized, but it does have the advantage that it
can be moved freely about the screen, or “docked” to other floating palettes. It
also allows the main Toolbar to be hidden, freeing up extra space to work on
your document.
Certain tools in the palette feature a small
triangle, which denotes that clicking and holding
the tool will show a submenu of further tools in
that group.
438 | Appendix
Tools Oval Draws a graphic item with an oval
Appendix
outline.
The tools allow you to create or manipulate the different types of item you
Map Area Draws rectangular clickable
work with in Freeway. The tools available in Freeway 5 Express can be found
on page 440. areas on images. Clicking and holding this tool
displays a submenu with further tools.
Standard tools (Freeway 5 Pro) Rotate Rotates graphic items. Clicking and
Back/Forward Steps between recently visited holding this tool displays a submenu with
pages.
further tools.
Select tool Selects of manipulates items or Flow tool Links two or more HTML or graphic
edits text. items that contain text so the text can flow
Zoom tool Zooms in and out of the Freeway between them. Clicking and holding this tool
window to change the viewed scale of what you displays a submenu with further tools.
are working on. Inspector Displays or hides the Inspector
CSS Layout Specifies whether new items palette. Clicking and holding this tool displays
added to the page use CSS layers or invisible a submenu with further tools.
tables (compatible with older browsers).
Optional tools (Freeway 5 Pro)
HTML Draws an HTML item on your page,
These are available from submenus on the standard tools, or you can add
to enter HTML text in your site or contain a
them to the Toolbar using the Customize Toolbar… command on the View
web-ready graphic format such as GIF, JPEG, or
menu (see Customizing the Toolbar on page 437).
PNG. Clicking and holding this tool displays a
Separator Adds a dividing line to the Toolbar.
submenu with further tools.
Table Draws a table on your page, with a
specified number of rows and columns derived Space Adds a space to the Toolbar.
from a dialog box.
Action Adds a Freeway Action to page. Flexible space—Adds a space that right aligns
Clicking and holding this tool displays a subsequent tools.
submenu with further tools.
Customize Displays the Customize Toolbar
Graphic Draws a rectangular graphic items dialog box.
on your page which can hold an image or
Break Flow Unlinks HTML or graphic items
text. Clicking and holding this tool displays a
that have been linked with the Flow tool.
submenu with further tools.
Appendix | 439
Path Draws a graphic item with an arbitrary Standard tools (Freeway 5 Express)
Appendix
outline constructed from straight lines or Back/Forward Steps between recently visited
smooth curves. pages.
Button Adds a button to a form. Select tool Selects of manipulates items or
edits text.
Checkbox Adds a checkbox to a form. Zoom tool Zooms in and out of the Freeway
window to change the viewed scale of what you
are working on.
Radio Adds a radio button to a form.
HTML Draws an HTML item on your page,
to enter HTML text in your site or contain a
Text Field Adds a text field to a form.
web-ready graphic format such as GIF, JPEG, or
PNG. Clicking and holding this tool displays a
Menu/List Adds a popup menu or list item to
submenu with further tools.
a form.
Action Adds a Freeway Action to page.
Text Area Adds a text area to a form. Clicking and holding this tool displays a
submenu with further tools.
Oval Map Area Creates a clickable area with Graphic Draws a rectangular graphic items
an arbitrary outline on an image. on your page which can hold an image or
Path Map Area Creates a clickable area with
text. Clicking and holding this tool displays a
an arbitrary outline on an image. submenu with further tools.
outline.
Map Area Draws rectangular clickable
Mirror Mirrors graphic items.
areas on images. Clicking and holding this tool
displays a submenu with further tools.
Styles & Colors Displays or hides the Styles Rotate Rotates graphic items. Clicking and
& Colors palette. holding this tool displays a submenu with
Actions Displays or hides the Actions further tools.
palette. Flow tool Links two or more HTML or graphic
Frames Displays or hides the Frames items that contain text so the text can flow
palette. between them. Clicking and holding this tool
displays a submenu with further tools.
440 | Appendix
Colors Displays or hides the Mac OS X system Radio Adds a radio button to a form.
Appendix
colors palette.
Text Field Adds a text field to a form.
Inspector Displays or hides the Inspector
palette.
Menu/List Adds a popup menu or list item to
a form.
Optional tools (Freeway 5 Express) Text Area Adds a text area to a form.
These are available from submenus on the standard tools, or you can add
them to the Toolbar using the Customize Toolbar… command on the View
Oval Map Area Creates a clickable area with
menu (see Customizing the Toolbar on page 437).
an arbitrary outline on an image.
Separator Adds a dividing line to the Toolbar.
Path Map Area Creates a clickable area with
an arbitrary outline on an image.
Space Adds a space to the Toolbar.
smooth curves.
Table Draws a table on your page, with a
specified number of rows and columns derived
from a dialog box.
Button Adds a button to a form.
Appendix | 441
Keyboard Shortcuts Edit menu
Appendix
Cz Undo/Redo
Freeway menu Cx Cut
C Preferences… Cc Copy
Ch Hide Freeway COc Copy Content
COhH Hide Others CSOc Copy as Picture (externalize the clipboard)
Cq Quit Freeway Cv Paste
442 | Appendix
Page menu Style menu
Appendix
COn New Pages… CS\ Size: Other…
COf Form Setup… CS. Size: Next Size
CS Size: Previous Size
CSO. Size: Grow Size
Item menu
COt Transform… FW 5 Pro only CSO Size: Shrink Size
Appendix | 443
Alignment: Forced Insert menu
Appendix
CSOj
OCÂ List: Increase indent CE Break (to next box in text flow)
OCÒ List: Decrease indent SR New Line
CSe Leading: Other… CSR Rule
CS' Leading: Increase Leading by 1px or 10%
CS; Leading: Decrease Leading by 1px or 10% View menu
CSO' Leading: Increase Leading by 1/10th px or 1% COz Zoom…
CSO; Leading: Decrease Leading by 1/10th px or 1% C1 Actual Size
C0 Fit in Window
CSOi Invisibles
CSOo Outlines
CSOt Titles
CSOg Guides
CSOp Graphics Preview
CSOh HTML layout
C[ Back
C] Forward
COm Master Page
COp Preview in Freeway
COr Hide/Show Rulers
COs Hide/Show Site panel
444 | Appendix
Window menu Selecting and editing text
Appendix
CSn New Window FW 5 Pro only R Place text cursor in selected box
COi Inspector SÂ Highlight next character
COy Styles and Colors FW 5 Pro only SÒ Highlight previous character
COa Actions SÎ Highlight to next line
CSh Show/Hide Palettes SË Highlight to previous line
SOÂ Highlight text to beginning of next word
Selecting combined graphic items
OS click an item Selects all combined items* or its enclosing SOÒ Highlight text to beginning of previous word
bounds SOÎ Highlight text to beginning of next paragraph
*If the items are grouped so that they become children of a graphic, SOË Highlight text to beginning of current
OS-clicking will select the enclosing item. paragraph
OÂ Moves to beginning of next word
OÒ Moves to beginning of previous word
OÎ Moves to end of current paragraph
OË Moves to beginning of current paragraph
CÒ Moves to beginning of line
CÂ Moves to end of line
CË Moves to beginning of text box
CÎ Moves to end of text box
SD Delete next character
Appendix | 445
Manipulating items Manipulating graphic items
Appendix
Start drawing then hold O Draw from center CSk Restore graphic to original size
Arrow keys ËÒÎÂ Move box by nudge distance CSd Fit box to content
O +Arrow keys ËÒÎÂ Move box by 1/10th nudge distance CSm Center graphic in box
(minimum 1px) CSf Scale graphic exactly to box
S + Arrow keys ËÒÎÂ Resize box in direction of arrow by nudge CSOf Scale graphic to box maintaining
distance proportions
SO + ËÒÎÂ Resize box in direction of arrow by 1/10th CSO. Increase scaling of contents of box by 5%
nudge distance (minimum 1px)
CSO Decrease scaling of contents of box by 5%
Drag handle and S Constrain shape of box to square/circle
Start resizing box and then Temporarily set graphic behavior to
Drag handle and SO Constrain proportions of box (and scale hold L Preserve Size
graphic content)
Start resizing box and then Temporarily set graphic behavior to Scale
CSd Fit box to content hold C
S drag Move with horizontal and vertical Start resizing box and then Temporarily set graphic behavior to Scale
constraints hold CO and Pad
Start drag with Select tool Move and clone box Start resizing box and then Temporarily set graphic behavior to Scale
and then hold O O and Trim
Start drag with Rotate tool Rotate and clone box FW 5 Pro only
446 | Appendix
Manipulating tables Dialog boxes and palettes
Appendix
Shortcut Command Shortcut Command
C click on cell Select a cell R or E OK in a dialog box
CO click on an already Select a table ‰ Cancel in a dialog box
selected cell T Highlight next field in dialog box/palette
C click anywhere on a table Move a table ST Highlight previous field in dialog box/palette
and begin dragging FW 5 Pro only
C click on color in palette Displays Color dialog box
Select a cell; CS click Join cells
C click on highlighted style Removes the style from the currently
another cell; then type CD
in Styles & Colors palette selected text or item FW 5 Pro only
Point to border between Resize a row or column (affects overall FW 5 Pro only
O click on style name in Edit style name
border two rows or columns table size)
Styles & Colors palette
so cursor changes to resizing
cursor; drag to desired size O click on name in Site panel Edit name
O click on color name in Edit color name FW 5 Pro only
With resizing cursor, C drag Resize a row or column (overall table size
border between two rows will not change) Styles & Colors palette
or columns CLT Show Tools palette and select next tool
FW 5 Pro only
With resizing shape, O drag Insert a row or column
border between two rows or CLST Show Tools palette and select previous
columns tool FW 5 Pro only
Cb Delete contents of selected cells
Appendix | 447
Zoom control
Appendix
Shortcut Command
LS click or LS drag Zoom in
CSO click Zoom out
General
Shortcut Command
L click and object Displays a popup contextual menu of
commands relating to the object.
448 | Appendix