Tri-Edre Freeway - 5 Instruction Manual

using freeway 5

Copyright and acknowledgments

Copyright © 2008 and 2012 Softpress Systems Ltd. All rights reserved.

The Freeway software and this documentation are copyright materials. No

part of the Freeway software may be reproduced, transmitted, transcribed,

stored in a retrieval system, or translated into any language, or computer

language, in any form or by any means without the prior written permission

of Softpress Systems Ltd. Additional copies of this guide may be made and

distributed provided they include this copyright notice.

Softpress Systems Ltd specifically retains title to all Freeway computer

software. The software described in this guide is furnished under a license

agreement and may only be installed, used, or copied in accordance with

the terms of that agreement.

Softpress is a trademark of Softpress Systems Ltd in the United States and

other countries. Freeway is a trademark of Softpress Systems Ltd, which

may be registered in some countries. Apple, Macintosh, Power Macintosh,

the Universal logo and the Mac Logo are registered trademarks of Apple

Computer Inc. All other product names are trademarks, or registered

trademarks of their respective owners.

Limitation of liability

The information in this guide is believed to be correct as of the date of

publication. However, our policy is one of continuous development and so

the information in this guide is subject to change without notice, and does

not represent a commitment on the part of Softpress Systems Ltd.

About this guide

This Using Freeway 5 guide will explain some of the concepts
behind Freeway. It will introduce you to the intuitive
interface, menus and palettes you will use to import or
create design elements and add web functionality.

There is also a step-by-step tutorial in which you will
design and produce a web site in Freeway faster than you
would ever have thought possible. You’ll see how easy it is
to make a multi-page web site with graphics, text and links.

This guide covers the use of both Freeway 5 Express and
Freeway 5 Pro. Both versions work in essentially the same
way, but Pro includes many additional powerful features.
Where the methods of working are substantially different
they are highlighted in separate box panels.

Further information, in far greater depth than this short
guide allows, is available in the Freeway 5 Reference. This can
be found on your installation CD, on the disk image (.dmg)
file you downloaded or on the Softpress web site.

Three movies of the tutorial found in this guide can be
found at: http://www.softpress.com/support/tutorials.html
where they are called “Getting Started with Freeway”.

Contact details

Head Office

Softpress Systems

First Floor

25 Hanborough House

Hanborough Business Park

Witney, Oxon

OX29 8LH

Phone: [phone]

Fax: [phone]

Sales: 0800 731 3425

United States and Canada

Softpress Systems Inc.

3020 Bridgeway #408

Sausalito, CA 94965, USA

Phone: [phone]

Fax: [phone]

Sales: [phone]

System requirements

Freeway is a Universal Binary application which will run
natively on Intel and PPC Macs. The minimum operating
system requirement for Freeway 5.4 is Mac OS X 10.4 or
higher. The minimum operating system requirement for
Freeway 5.5 is Mac OS X 10.5 or higher.

2

Foreword

Congratulations on choosing Freeway 5, the most
design-friendly way to create web sites. Before you
begin it is worth spending a little time making sure
you understand how Freeway works and how you can
get the very most from this software.

Freeway’s approach to web page and site design
means you can concentrate on form and function, not
spend most of your time tweaking code and worrying
about compatibility. Because of this, if you’ve come
from a code-based web production background—or
even a template-bound one—you may have some
unlearning to do. But relax, things will almost
certainly be easier and more logical than you imagine.

The biggest thing to grasp is that Freeway is an
HTML generator, not an editor. You use Freeway’s
high-end layout tools to make your designs, and
it deals with producing optimized web page code
from your work, on demand. This means that you’ll
never have to worry about over-manipulated layouts
producing awkward code, a typical problem with
visual HTML editors; the output is new every time.
All the necessary fixes are included to help pages
work consistently across browsers, and you’re free
to switch your page output from different forms of
HTML and XHTML as you prefer. On top of this,

Freeway makes pages that validate as W3C-compliant
code, automatically. So with those worrisome aspects
banished, you can get on with thinking about more
interesting matters: your web page designs.

For further details, tips and extra Freeway Actions,
browse the Softpress KnowledgeBase at http://www.
softpress.com/kb and http://www.actionsforge.com.
To tap into the collective experience of Freeway users
around the world visit the lively Freewaytalk forum at
http://freewaytalk.net/.

Freeway delivers the design freedom of high-end
DTP software to the world of web production, with
intelligent features that make casual users, professional
designers and free-thinking programmers alike smile in
delight. Make the most of it!

Keith Martin

Senior Lecturer

London College of Communication

For some more useful tips from Keith, see Thinking
Design on page 19.

Foreword

3

Contents

Introduction and getting started 8

About Softpress and Freeway 8
Installing and serializing Freeway 9
Launching Freeway for the first time 10
Registering Freeway 11
Keep your serial number safe 11
Freeway help and information resources 12
Freeway Reference 12
The KnowledgeBase 12
Video tutorials 13
Freewaycast 13
Dan Jasker screencasts 13
ActionsForge 13
FreewayTalk.net 14
Help desk 14

Contents

Telephone support 14

The World Wide Web and Freeway 15

The World Wide Web 16
How do I get on the web? 16
HTML–speaking the right language 17
What are HTTP and FTP? 17
How Freeway works 17

Thinking design 19

Design plans 20
Page sizes 20

4

Type 20

Styles 20
Graphics 21
Optimizing 21
Code 21
Output 21
Upload 22

Quick Tour 23

The main Freeway interface window 24
The menu bar 26
The tool bar 27
The site and page panels 29
The page mode buttons 30
The hyperlink box and site buttons 30
Contextual menus 31
The Inspector 32
Other palettes 34

Tutorial 35

Tutorial 1 36
Starting and saving the site 37
Setting page dimensions and alignment 38
Basic concepts and terminology of the

Inspector 38
Setting the page dimensions and

alignment 39
Setting the page background color 39
Adding a page background image 40
Adding a graphic text item 41

Importing a graphic 43
Adding HTML text 44
Importing photos 44
Duplicating items 45
Importing text 47
Previewing your page 49
Tutorial 2 50
Basic concepts of Master pages 50
The Site panel 51
Setting up a Master page 51
Naming pages and files in the Site panel 52
Working on a Master page 52
Adding pages to a site 53
Title and file names for pages 53
Adding content to our new pages 54
Applying hyperlinks 56
Previewing the site in a browser 59
Tutorial 3 61
Graphic hyperlinks 61
Creating a rollover navigation menu 61
Creating a simple photo gallery 66
Other types of Action 68
Uploading your site to the web 70
Different ways to upload a site 70
Required information for FTP uploading 70
Required information for a MobileMe account 70
Required information for uploading to a

local server using File Copy 71
Uploading your files using FTP 71
Uploading to a MobileMe account 72
Uploading using File Copy 73
How files are uploaded 73
Troubleshooting upload problems 73
Dedicated FTP tools 75

Deleting files 76
Creating a directory or folder 76
External files 76
FTP applications 76

Working with Freeway 77

Creating a new document 78
To create a document from a template 78
To create a document using custom

settings
The Freeway workflow, publishing,

and previewing 79
To upload your web site 79
Working with pages 79
To create a new master page 80
To create one or more new site pages 80
To delete a page 80
Working with items 80
To create an item 80
To delete an item 81
Parent/Child relationships 81
To create an item that is the child of

another item 82
To make an existing item a child of

another item 82
To group several items together 82
To ungroup items 82
Aligning and distributing items 82
To align several items 82
Manipulating items 83
To resize an item to fit its content 83
To rotate a graphic item 83
Changing an item’s appearance 83
To set the background color of an item 83

Pro only

78

Contents

5

Changing how an item will output 83
To change the type of an item 83
To set the alt text of a graphic item 84
Working with Tables 84
To resize a column or row in a table 85
To change the number of rows or columns

in a table 85
To merge cells into one 85
To split cells 85
Working with colors 85
Colors in Freeway Express 85
To apply a color using the color palette

in Freeway Express 85
Colors in Freeway Pro 86
To apply a color in Freeway Pro using the

color palette 86
To apply a color that is not already in

your document using the color palette 86
To create a new color 86
To edit a color 87
To delete a color 87

Contents

6

Working with graphics 87
To import a graphic into an existing item 88
Manipulating graphics in graphic items 88
To position a graphic within its containing

item 88
To scale a graphic to the size of its

containing item 88
Working with other media 89
Working with text 89
To enter text into an item 89
To import text from a file into an item

or page 89
Styling text 89
To remove styling from text 90

Working with lists 90
To create a list 90
Inserting items into a text flow 90
To insert a graphic item into a text flow 90
To insert an HTML item into a text flow 91
To center an in-flow HTML item within its

Pro only

Pro only

91

91

containing item
Working with Styles
To create a new style 92
To edit an existing style 92
To apply a style to text 92
To delete a style 93
Permanent and temporary styles 93
Hyperlinks and anchors 93
To create a hyperlink 93
To remove a hyperlink 94
To create an anchor 94
To remove an anchor 94
Working on HTML forms 94
To set up form properties for the current page 94

Freeway Actions 95

What are Freeway Actions? 96
The different types of Actions 96
Applying Actions 96
The Actions palette 97
Installing Actions 98
Working with Freeway Actions 99
The Rollover Action 99
Rollover options in the Actions palette 100
Common queries with rollovers 101
The Target Image Action 101
Target Image options in the Actions palette 102
New window Actions 102

Text Link to New Window Action 102
Link to New Window Action 103
Pic in New Window Action 103
Download Actions 104
Link to PDF Action 104
Graphic Link to PDF Action 105
Link to File Action 105
Graphic Link to File Action 105
Target Show/Hide Actions 105
Target Show/Hide Image Action 105
Target Show/Hide Layer Action
The Sequence Timer Action 106
Graphic Actions 106
CSS Menus 107
CSS Menu troubleshooting tips 112

Pro only

105

What’s New in Freeway 5.5 113

New Features at a Glance 114
Facebook Activity Feed Action 116
Facebook Like Box Action 118
Facebook Like Button Action 120
Facebook Recommendations Action 122
Twitter Follow Button Action 124
Tweet Button Action 126
PayPal Button Action 128
Showcase (Application and Action) 131
Building a photo gallery 132
Building a slideshow 134
Relative Page Layout
Working with Relative Page Layout 139
Other Actions in the Relative Page Layout

suite 140

Pro only

136

Create Email Action 141
Before you start 141
Using the Create Email Action 143
Getting the HTML code to use 143
Creating a plain text email 143
Sending out your email 144
Simple Site Search Actions
Applying the Folder Action 145
Creating the search form 146
Creating a search results area 146
Page titles and descriptions used in the

search results item 148
Using custom text for the search results item 148
Excluding specified content from the

Simple Site Search Action 149
Site Mapper Actions 150
Applying the Site Mapper Folder Action 150
Submitting your sitemap 151
Applying frequency and priority to

individual pages 152
Excluding specified pages from the

Sitemapper Action 152
Amazon Associates Actions 153
Text Link Action 153
Image Link Action 154
Enhanced Action 154
Showcase Application Reference Section 156
The Document window 156
The Inspector 158
Showcase Action Reference Section 161
The Showcase Action palette 161

Pro only

145

Glossary 165

Contents

7

About Softpress and Freeway

Softpress Systems was founded in 1993 in Oxford,
England to address the emerging needs of professional
publishers and designers for cross-media authoring
tools.

Freeway is the result of those efforts. It is a web site
development application designed from the ground up
for people to design and assemble content for the web
without needing to learn HTML, or indeed any code, to
build sites of the highest quality.

Freeway uses the familiar approaches and tools seen
in traditional desktop publishing. Simply draw boxes
on your page, fill them with text and images, make
links between the pages, add dynamic content or
anything else you can think of, and then ask Freeway
to publish and upload your web site for you. Freeway
will write all of the code required to describe your
vision, and the code will always be clean, efficient, and
standards compliant. You never have to deal with the
code unless you want to.

With its desktop publishing origins, Freeway is
a favorite of traditional print designers looking to
transfer their skills to the web. However, this is just one
group within the Freeway community.

Photographers publish their portfolios online,

Introduction and getting started

businesses establish an online presence to sell their
products, home users build web sites for their local
clubs or organizations, or create personal web sites to
share their thoughts and photos.

Freeway empowers everyone—design, expression,

and commerce.

Enjoy Freeway!

Freeway Pro and Freeway Express

Freeway comes in two versions, Freeway 5 Pro and
Freeway 5 Express. Freeway 5 Express is our entry­level version, for people looking to create small web
sites and who don’t need the full power of Freeway
Pro. Freeway 5 Pro provides many features for creating
modern web sites not available in Freeway 5 Express,
and a huge number of productivity features.

Just some of the extra features in Freeway 5 Pro at the

time of writing include:

•

Multiple output options (HTML 3.2, HTML 4.01,

XHTML Transitional and Strict).

•

Full choice of output encodings available.

• Complete color and text style management across

your entire document.

•

Extended graphic import capabilities. Import

Illustrator, Photoshop, TIFF, SVG files and many
more.

•

Accessibility reporting.

• Employ multiple style sheets for each document.

• Full CSS text styling and CSS Layout.

• Ability to specify relative and percentage positions

and dimensions for layout items.

•

Specify padding, wrap, margin and border (HTML

items only) separately for each side of an item.

8

• Advanced visual effects on your web site using

Scriptaculous Actions.

•

Specify link styles on any CSS-positioned HTML item.

• Link map: overview and maintenance of all the links

in your document.

•

Multiple windows open for the same document at

once.

•

Snapping palettes for easier workspace management.

• Extended transformation options: Skew, Scale and

Mirror content separately from its box.

•

Freely combine and manipulate shadows, glows and

other graphic effects with greater control over their
appearance.

•

Save items and pages as images.

• Use the full range of Freeway Actions, or write your

own.

Installing and serializing Freeway

Introduction and getting started

Installing Freeway

Installation of Freeway 5.5 is as simple as dragging
both the Freeway and Showcase applications to the
Applications folder within the disk image window.

Note: Freeway 5 users only need to drag and drop the
Freeway application to the Applications folder.

If you purchased a boxed copy of Freeway:

1. Insert the CD that came in the box. The CD will
launch automatically and a window will open.

2. Drag the Freeway and Showcase applications to the
Applications icon in the disk image window. This
copies both applications to the Applications folder
on your Mac’s hard drive.

3. Close the window and eject the CD. Keep it in a safe
place in case you need to reinstall Freeway in future.

If you downloaded a copy of Freeway:

1. Once the download is complete, locate the disk
image (.dmg) file, which will be in the location set
in your web browser’s preferences. If the disk image
doesn’t mount automatically, double-click the disk
image file to mount it on your Desktop.

2. Read the license agreement and click OK to proceed.
The disk image will be mounted on your Desktop
and a window should open automatically. If it
doesn’t open, double-click its icon.

9

3. Drag the Freeway and Showcase applications to the
Applications icon in the disk image window. This
copies both applications to the Applications folder
on your Mac’s hard drive.

4. Close the window and drag the mounted disk
image to the Trash to unmount it. You may wish to
archive or copy the disk image file to a safe place in
case you need to reinstall Freeway in the future.

Launching Freeway for the first time

Unless you are using a trial version, the first time you
run Freeway you’ll have to enter your registration
details to unlock the program. This only needs to be
done once, although updates to Freeway will also need
to be unlocked in the same way. For this reason, you
should keep a copy of your serial number somewhere
safe so you can locate it easily.

1. Double-click the Freeway application icon in your
Applications folder, or in the Freeway folder within
your Applications folder. Freeway will launch and
will present you with a registration dialog.

2. Enter your serial number and, optionally, your
name and organization.

If you purchased a boxed copy of Freeway, the
serial number is printed on a label inside the back
cover of this guide. Be careful to enter the serial
number exactly as it is printed. As soon as you
complete each block of characters, the entry cursor

will automatically jump to the next field.

If you purchased and downloaded Freeway
from the Softpress web site, you’ll have been sent

an email containing the serial number to unlock
your copy of Freeway. You can copy and paste the
whole number from the email to the first serial
number field in the registration dialog and Freeway

will fill in all the fields automatically.

3. Once the serial number has been entered, check
the “I agree” checkbox (after reading the License
Agreement) then click
Freeway.

Note: The development of Freeway is a continual
process, and regular updates are available for free
download from the Softpress web site. We recommend
you use the most recent version.

When Freeway starts, it will check to see if you’re using
the latest version. If you aren’t, you will be offered the
choice to download the latest version.

If you downloaded your copy of Freeway, it will
generally be the latest version.

OK to continue launching

Introduction and getting started

10

4. If your computer is connected to the internet, a
“splashscreen” will appear when Freeway launches
which offers links to learning resources, such as
the complete Freeway 5 Reference manual, video
tutorials, etc. If you don’t want to see this screen
on start-up in the future, deselect the Show This
Dialog at Startup option.

Place Freeway in
the Dock

Speed up your workflow by
placing your Freeway application
in you computer’s Dock so you
can launch it by simply clicking
on its icon. To do this, open your
Freeway folder in the Applications
folder and drag the application file
onto your Dock. Move it to the
position you want it to appear in
the Dock and let go.

!

Tip

Important

Trial versions of Freeway cannot be serialized

Please note that when you buy Freeway after using the free 30-day trial,
you need to install and serialize the full version (either from the CD or
from the download link supplied in your confirmation email from our
Sales department). It is not possible to serialize the trial version.

Launch Freeway from the icon in the Applications Folder

Freeway will not work correctly if you launch it for the first time from the
icon in the CD or Disk Image window. Once you have installed Freeway,
eject the CD or unmount the Disk Image then launch Freeway either
by double-clicking the application icon in Applications Folder or, if you
placed it there, from the Dock.

!

Introduction and getting started

Registering Freeway

To ensure we can offer support as efficiently as possible,
it’s important that you register your copy of Freeway
with Softpress. Registration also ensures you are able to
download updates from the web site.

http://www.softpress.com/support/register.html

Another advantage of registering your software is that
you’ll be able to use the serial number retrieval facility
on the Softpress web site (see below).

Keep your serial number safe

Whether you downloaded Freeway from the Softpress
web site or you purchased a retail boxed copy, you
should keep your serial number safe. If you have
bought a new computer or you have problems with
your hard disk, you’ll need your serial number to
reinstall Freeway.

If you’ve lost your serial number, we have a page
on our web site which should enable you to retrieve
it—but this facility is only available to those who have
registered their software with Softpress. The serial
number retrieval page is found under the “Retrieve my
Serial Number” heading at:

http://www.softpress.com/support/

Enter the email address you used when you registered
Freeway, and you will receive an email containing
your serial number or numbers. Make sure you keep
these numbers in a safe place this time!

11

Freeway help and information resources

Using Freeway

Visit http://www.softpress.com/support/tutorials.html
to see three movies of the tutorial contained within
this guide. By far the best way to learn Freeway,
however, is to build the tutorial site in Freeway as you
read through the instructions in the tutorial section
which starts on page 35 of this guide. The tutorial
section also offers plenty of useful tips and other notes
which add to your learning experience of Freeway.

If, however, you need to clarify something, or if you
need a quick refresher, the tutorial movies are there for
you to watch. The movies correspond to each of the
three parts of the Using Freeway tutorial in this guide.

Freeway Reference

The most comprehensive guide to using Freeway is the
complete Freeway 5 Reference. It aims to provide clear
step-by-step instructions for using all the main features
of Freeway, including setting up, previewing, and
publishing a site, working with pages, text, graphics,
tables, and forms, and creating dynamic effects, as well
as detailed reference information about advanced Web
design features that may not be needed by all users.

It also provides a summary of the Freeway preference

Introduction and getting started

panels, palettes, and keyboard shortcuts.

You can find the Freeway 5 Reference as a PDF on the

CD or disk-image file from where you installed Freeway
or download it from the Softpress web site. You can
either print out the Reference or view it on-screen. The

PDF is hyperlinked from the Contents section, so you

mp to the relevant page of the manual.

can ju

If you view the PDF in Apple’s Preview you can use
double quotes to search for multiple words used in a
particular order. For instance, if you want to search for
instructions on how to set up the Target Show/Hide
Image Action, you can enter “Target Show/Hide Image”
(with the double quotes) to find results where those
words are used in that particular order.

The KnowledgeBase

http://www.softpress.com/kb

The Softpress web site offers an extensive
KnowledgeBase containing a wide range of information
on every aspect of using Freeway, including technical
notes on specific features, tutorials on how to achieve
particular effects and answers to frequently asked
questions.

The KnowledgeBase is fully searchable and is
extended on a regular basis to provide answers to any
questions users ask about Freeway.

This should be the first place you go to find
information on how to set up particular functionality
on your Freeway page if your can’t find it in the Using
Freeway guide or the complete Freeway 5 Reference, or if
you have problems when building your site.

It is also the place where we will post articles
on known issues with new versions of browser
applications, etc.

12

Video tutorials

http://www.softpress.com/support/tutorials.html

There are links to many video tutorials on this page—
called Freeway Moments—which show you how to
do specific tasks in Freeway, along with two movie
tutorials which take you through the very basics of
getting started with Freeway Express and Freeway Pro.

New videos are posted from time to time, so make
sure you check back every now and again—or you can
use the Subscribe link to be alerted when new videos
are released, which you can then watch in iTunes.

ActionsForge

http://www.actionsforge.com

All Freeway Actions not offered in the core application
as it ships are available on ActionsForge. This is the
place to go for additional Softpress Actions (usually
ones which offer specific functionality) and third-party
Actions—both free and commercial.

This is also the place to find the latest versions
of Actions not bundled in the core application.
The version number of each Action is stated on its
individual page.

ActionsForge is fully searchable to help you find
suites of Actions (called ‘projects’) or individual
Actions. If an Action is part of a project suite, all the
Actions required for that project will be downloaded in
the same zip file.

See the chapter on Freeway Actions in this guide to
see how to install downloaded Actions.

FreewayTalk.net

http://freewaytalk.net

The most vibrant, exciting place to discuss Freeway! We
have always been keen to have our users communicate
not just with us, but with each other too.

FreewayTalk.net is a web-based bulletin board which
also allows you to send and receive messages via
email as well as through the web interface. The board
provides space for people to talk about Freeway, as well
as about writing Actions and developing dynamic web
sites.

To join FreewayTalk, you’ll need to register online.

Introduction and getting started

13

Help desk

http://www.softpress.com/kb/contact.php

Use the above URL to contact our Support Department.
You’ll receive a reply within one business day.

Telephone support

US Telephone Support (Mon–Fri, 9am–5pm Central):
AACTT will handle your telephone enquiries. Simply
dial [phone]. Please have your serial number
handy, and be near your Mac when making your call.

UK Telephone Support: If you are in the UK, you can
contact our Support Department by telephone for a
75p/minute charge. Please ring on 09067 556556.

Introduction and getting started

14

The World Wide Web and Freeway

The World Wide Web

and Freeway

15

The World Wide Web

Welcome to the World Wide Web

If you’ve surfed the web but you’ve never actually set
up your own web site you may think that web sites are
a bit like radio stations, and using your web browser
to visit a web site is like tuning your radio into a
particular radio station.

This analogy is pretty good apart from one major
difference; the web is totally democratic. You don’t
need a license or any highly-specialized equipment
to publish your site to the world—all you need is a
computer connected to the internet and a centrally
registered name, which costs a few dollars, so people
know where to find you.

How do I get on the web?

To publish your web site on the World Wide Web and
make it available to other users you simply need to
run a program called a web server on your computer
and give the computer a name registered with a central
authority so that other users can find it on the internet.

Unless you have a permanent internet connection,
and don’t mind leaving your computer switched on all
the time, you will probably find it more convenient to
have your web site hosted by a company specializing in
this service, called an Internet Service Provider or ISP.

If you already have an email account it probably has
some free web space included with it, and your ISP will
provide instructions on how to upload your web pages
to your free web space, and tell you what name users
will need to use to connect to it.

If you don’t have free web space included with your
package, or if you want extra features for your web site,
you’ll need to pay for a “hosting” service from an ISP
which may come in a package with a “domain name”.

The domain name is the name a visitor types into
the web address field of a web browser to access a site.
Domain names can have many different suffixes at the
end of the address, such as .com, .net, .org, etc.

The World Wide Web and Freeway

16

HTML—speaking the right language

At the heart of the web is a language called HTML,
which stands for HyperText Markup Language. HTML
performs two basic functions: it describes what the page
should look like, and it provides links to other pages.

For example, this is what the user sees: The second important part of HTML, called

“hyperlinks”, is what makes the World Wide Web a
web rather than just a notice board. Each page can link
to other pages within the same web site, or to pages on
other sites anywhere else on the web.

Just as you don’t need to understand the internal
codes your word processor uses to store information
about your document, you don’t need to know HTML
to design web pages.

What are HTTP and FTP?

These are two other terms that you might encounter,
and it is just as well to know what they mean.

•

And this is the HTML to achieve it:

HTTP, or HyperText Transfer Protocol, is a set of

conventions for transferring web pages between a

web server and a web browser. You are reminded of

this every time you surf the web by the “http://” that

your web browser inserts in front of the address in

the address bar.

•

FTP, which stands for File Transfer Protocol, is a

convention for transferring files over the internet

between two computers. FTP is the standard way of

uploading files to a web server, and is the method

that Freeway uses to update your web site remotely

on your ISP’s web space.

The World Wide Web and Freeway

The page description part of HTML consists of a series
of statements which say things like “Put this graphic at
the top of the page”, “Put this text below it”. When the
browser receives the HTML it reconstructs the page that
the designer intended.

How Freeway works

Whether you’re new to web site design, or an
experienced designer, Freeway lets you to create
complex sites quickly and easily with little or no
knowledge of HTML code.

Freeway works in a very similar way to DTP
programs, using a WYSIWYG (What You See Is What
You Get) environment. This, along with its intuitive,

17

user-friendly interface, lets you focus on the design
and functionality you want to achieve without the
distraction of having to worry about how it will be
encoded into HTML.

Managing the names and locations of the resources
for your site (graphics, photos, movies, etc.) is all
taken care of by Freeway—the entire design of your
site is contained in a single document. When you’re
ready to view your web site, Freeway will generate the
HTML code and resources required and place them in a
location of your choosing.

Importing and optimizing graphics is also handled
seamlessly by Freeway. Rather than preparing your
graphics in an external application before using
them in your site, Freeway imports graphics in many

different formats which will be converted to the
optimum format and size when you publish your file,
so your site will always keep browser loading times to a
minimum.

The HTML code generated when you publish your
Freeway file is 100% valid, meaning that your site
should preview perfectly in different browsers while
also ensuring that it adheres to accessibility guidelines
for people with disabilities. Your site being valid also
means that it should be reasonably future-proof.

Once you’ve published your file and the HTML
code has been generated, provide Freeway with your
web space details and it will upload your site and all
its necessary files through FTP or to your MobileMe
account.

The World Wide Web and Freeway

18

1. Gather together
the resources for

your web site.

2. Design and lay out your
site in Freeway’s intuitive

WYSIWYG environment

3. Publish your site

and Freeway generates

the HTML code.

4. With Freeway,

upload your site to

the web.

5. Visitors see your
web site as you

designed it.

Thinking design

Tutorial

19

Thinking design

by Keith Martin

Senior Lecturer, London College of Communication

Design plans

Start by thinking about your overall site design plans.
Are there parts of the layout that will be repeated across
multiple pages? This is ideal stuff for master pages, one
of the keys to working fast and efficiently in Freeway.

Set up your guides, grids, HTML text boxes and
graphics on a master page, then make new pages from
there and modify those as required. You can have more
than one master page in a site, a useful trick if you
have one layout structure for some pages and a very
different one for others.

But don’t worry about planning everything before
you begin. Freeway is very forgiving, as any decent
design-oriented tool should be.

Page sizes

Make your Freeway page widths appropriate for your
typical audience. Something around 700 to 750 pixels

Thinking Design

wide is reasonable for the vast majority of web users,
but if your normal visitor tends to use larger screens
then try 900 pixels or more. This doesn’t fix the
size of the visitor’s browser window, but it does give
you a good design foundation to help you create a
professional, consistent set of page layouts.

Use the Align option in the Inspector to align your
page content to the left, center or right. Alternatively,
leave the page alignment unset and explore linking
the sizes and positions of boxes to the page sides,
using the Dimensions pane of the Inspector palette.

With layered items in particular (which are produced
as CSS-controlled DIVs) this can make page structures
particularly dynamic and fluid, flexing to follow
browser window sizes.

Type

Setting type is easy to do, but in Freeway you have two
main choices: graphic or HTML. Graphic type—set
in graphic boxes—is turned to bitmap images of your
typesetting when you publish your work. HTML type is
encoded as regular web page text.

You have far fewer typeface choices with HTML text,
as you are restricted to the fonts that are generally
available on everyone’s computers. On the other hand,
search engines ignore graphics and only read HTML
text, so don’t set huge paragraphs as graphics—you
may never be found!

Use graphic type when you want a precise look for
a headline or something to merge with an image,
otherwise you should normally choose HTML text
instead. Yes, this means you have fewer options for
fine-tuning your typesetting, but that’s the way life
is with web design. Anyway, Freeway’s CSS-based
formatting options give you more control over regular
HTML type than you might think …

Styles

Creating and using styles efficiently is an important
part of modern web design, and it is a key part of how
Freeway works.

20

As you format text, styles are made for you
automatically and listed ready to be applied elsewhere.
Amend those and your text follows suit.

You can streamline your work by making a set of
styles first, then applying those as you go. You can
apply custom (non-tag) styles to a container and
affect all its contents in one stroke, then give selected
portions of the text further styling as required.

If you want to go further you can improve your
search engine chances and accessibility scores by
using traditional structural styles to control different
elements in your layout automatically, from tag-based
paragraph, header and list structures to object IDs and
so on. Start by editing the ‘p’ style in the Styles
window to control how paragraphs of text with no
custom formatting will appear.

Graphics

Don’t spend precious design time churning out sliced­up and web-optimized graphics before you step across
to Freeway. As well as ready-made GIF, JPEG and PNG
files, Freeway 5 Pro can import your original high­resolution images whether they’re in TIFF, PDF, SVG
or even native Photoshop or Illustrator format. (Use
24-bit PNG if you have Freeway 5 Express.) If you have
transparency in your original graphics this will be
carried across into your Freeway designs.

Scale, crop and stack your images, and your
output will always be generated as a screen-resolution,
web-optimized JPEG or GIF, or PNG if you prefer.

If you want sliced graphics—useful for making
rollover parts of a larger graphic, for example—then
uncheck the Combine Graphics option in the Inspector

palette. This produces web-ready graphics sliced along
the uncombined item’s boundaries, without you
having to take virtual scissors to your original images.
Just move the object to adjust the slice.

Optimizing

Use the Inspector palette to tweak an image’s output
format and compression levels to get the right balance
between file size and visual quality. You can see how
the compression controls affect the look of your
graphics by turning on the Graphics Preview option
in the View menu. If you have many large graphics
in the layout this can slow things down a little, as
Freeway reads each original image file and generates
the final optimized web version on the fly. But don’t
forget about this ability; you simply can’t beat seeing
precisely how something will look right there in your
page layout.

Code

Customizing Freeway’s output can be done using the
wide selection of Actions, plugin-like tools that extend
Freeway’s feature set.

You can also add custom code to specific places in
a layout by dropping in Markup Item objects, using
the HTML Markup window to reach specific parts
of the overall code structure, or by adding extended
markup directly to elements and styles. You can even
make your own Actions to simplify tasks, making even
complex conditional code production a repeatable
snap.

Thinking Design

21

Output

Once you have some pages set up you’ll need to
check that they look right in a browser. You can look
at single pages in Freeway’s internal Preview, but to
check links and all it is best to preview in a regular
browser. Whether you’re a sucker for Safari, a Firefox
fan or an Opera buff, you should check your pages in
as many modern browsers as you can. (Don’t bother
with Internet Explorer for Mac, it isn’t related to the
Windows versions and is long dead.) Freeway makes
pages that are generally as cross-browser-compatible as
is sensibly possible, but some layouts simply don’t do
so well in some browsers. Microsoft’s Internet Explorer

6 and 7 are the biggest offenders here, so use a PC if
one is nearby, or one of the online browser rendering
services if one isn’t. If you have a cyber café nearby
that can be a pleasant way around the problem.

Upload

You can use any FTP software you like to upload
Freeway’s output to your web site, but if you do this
with Freeway itself then your files will be managed
for you. Items that you remove from your page will
be deleted from the site, and so on. It may seem like a
small thing, but it can save you a lot of head-scratching
and wasted server space.

Thinking Design

22

Quick Tour

Quick Tour

23

The main Freeway interface window

Main interface window for Freeway 5 Express

Menu bar

Tool bar

▲

Page

Mode Buttons

24

Quick Tour

Site Panel/
Page Panel

Site

▲

buttons

The

Inspector

Page area/

Layout view

Actions
palette

▲

Hyperlink box

Main interface window for Freeway 5 Pro

▲

Page

Mode Buttons

Menu bar

Tool bar

Quick Tour

Site Panel/
Page Panel

Site

▲

buttons

▲

Hyperlink box

Page area/

Layout view

The

Inspector

Actions

palette

25

The menu bar

Quick Tour

This is the drop-down menu bar which appears at
the top of the screen on all programs running on a
Macintosh computer.

In this guide, we don’t have the space to look at
every menu in detail. However, the Freeway 5 Reference
(which is on the CD or disk image file from where you
installed Freeway) has a comprehensive list of every
option and submenu accessible from the menu bar.

For now we’ll look at the types of function available
from each of the menus.

Freeway 5 menu

This is where you can set up your Preferences and hide
or quit Freeway.

File menu

The menu for all functions to do with your main
document, such as opening, saving, uploading, etc.
It also contains options for importing text, graphics
and rich media.

Edit menu

As with most Macintosh applications, this is where you
can cut, copy and paste. For Freeway it is also where
you can edit your URLs and resource lists, etc.

Page menu

As the name suggests, this menu is for functions which
are page-specific, such as adding or deleting pages,
applying a Freeway Action to a page, etc.

Item menu

The menu for item-specific functions. In here, amongst
other things, you can lock items, bring items to the
front or send them to the back, duplicate items,
transform items (Pro-only) and apply item-specific
Freeway Actions.

Style menu

This menu contains options for styling text.

Insert menu

You can insert particular types of item on your page
from this menu. This menu is mainly used for inserting
items into runs of text.

View menu

From this menu you can choose zoom values, toggle
guides on and off, view invisible characters, etc.

Window menu

This menu allows you to open any of the Freeway
palettes and switch between open document windows.

26

The tool bar

Freeway 5 Express
default tool bar

Freeway 5 Pro
default tool bar

The tools on the tool bar mainly allow you to create
or edit the different types of item you work with in
Freeway.

Back/Forward buttons

Steps between recently visited pages.

Select tool

Selects or manipulates items or text.

Zoom tool

Zooms in and out of the page area to
change the scale of what you’re working
on.

CSS Layout tool

When this button is on (blue), Freeway
will always create CSS-based layout items.
This only applies to items drawn while the
button is on.

HTML tool

Allows you to draw an HTML item on
your page, commonly used to contain the
majority of the text in your web site.

Pro only

Action tool

Allows you to draw a Freeway Action item
on your page, such as a text rollover or
navigation bar.

Quick Tour

Graphic tool

Allows you to draw a graphic item on your
page. An item drawn with this tool can
contain a graphic (for example a photo) or
graphic text.

Oval tool

Allows you to draw an oval or circular
graphic item on your page.

Map Area tool

Allows you draw a rectangular clickable
area on top of graphic items.

Rotate tool

Allows you to rotate a graphic item when it
is selected on your page.

Flow tool

Links two or more HTML or graphic
text items together so that text can flow
between them.

27

Browser Preview

Click on this button to preview your site in
the browser you’ve set as the default browser.
Click and hold to choose a different browser,
or choose Browser Setup to select a different
default browser or update your list of installed
browsers.

Inspector

Displays or hides the Inspector. This is a
context-sensitive palette which displays
different options depending on the item
selected.

View menu and drag the tools one at a time from the

optional tool palette to your tool bar in a similar way
you add items to Mac OS X’s dock. Existing tools move,
allowing you to place the new tool in the position you
prefer.

If you want to revert to the default tool bar at any
time, simply go back to your Customize Toolbar palette
and drag the default tool bar into the tool bar area.

Freeway Express allows you to place an optional
Colors tool button which shows or hides the Colors
palette. In Freeway Pro, there is a Styles/Colors tool
button which opens a palette listing document styles
and colors.

28

Quick Tour

You can customize the Freeway tool bar by adding
optional tools you frequently use. Some optional tools
are available from a submenu on the tool bar, but you
can place them on the main tool bar for immediate
use. To do this, choose

Customize Toolbar... from the

Pro

Most of the optional tools are the same for both
versions, but Freeway Pro also features skew and mirror
tools.

Pro-only optional tools

The optional tools
available from the
Freeway 5 Express
Customize Toolbar
palette.

The site and page panels

The panel to the left of the page area toggles between
the site panel and the page panel by clicking on the
title bar which says

By default, the panel will display as the site panel.

Site or Page at the top of the list.

The site panel

The site panel displays a list of all the pages and page
folders which make up your site, with Master pages at
the top and pages created from the Master pages below.
Working with Master pages is covered in detail in the
Tutorial section.

The pages in the lower part of the site panel show
the name of the page and the
Master it was created from.

If you make a change to
any page of your site, a black
dot will appear to the left of
the page icon in the list—this
indicates that changes have
been made since the last time
the site was published.

You can change the order
that the pages appear in the
site panel list by clicking and
dragging them to a different
place.

Clicking on the disclosure triangle to the left of a
folder icon will list all the pages contained within that
folder.

You can also see in this list whether a page or folder
has a Freeway Action applied to it. If an Action is
applied, a small Freeway Action cog icon appears on
the page or folder in the list. Select the page or folder
and look in the Actions palette to see which Action or
Actions are applied.

The page panel

Clicking on the title bar of the
site panel toggles the panel
to the page panel view. This
panel only shows the page
you have displayed in your
page area.

The list of items and other
resources on your page should
display—if not, click on the
disclosure triangle to the left
of the page icon.

Like the site panel, a
Freeway Action cog icon
indicates which items have
a Freeway Action applied to
them. Select the item and
look in the Actions palette to
see which Action or Actions
are applied.

Quick Tour

29

Quick Tour

The page mode buttons

Page button will return you to the last page you were

working on that was created by that Master.

There are three page mode buttons—
and

Preview. The first two allow you to switch quickly

and easily between the page you’re working on and the
Master page it was created from. This can save a lot of
time if you have a site with multiple Master pages.

When you have a Master page displayed, the page
rulers turn to a tinted yellow color. This alerts you to
the fact that any changes you make to the page will be
applied to all pages associated with that Master.

If you have a Master page displayed, clicking on the

Master, Page

When you click on the
will be published if any changes have been made since
it was last published. Your page will then be previewed
in your Freeway window by a program which is similar
to a web browser, but with reduced functionality.

Pro

Link Map

In addition to the three page mode buttons, Freeway
5 Pro also has a Link Map button which, when clicked
on, displays a graphic representation of the links in
your site.

Preview button, your page

The hyperlink box and site buttons

30

The hyperlink box

If you select an item on your Freeway page, the
hyperlink box shows if it has a hyperlink applied to
it or not. With the item or text selected, you can click
and hold on the hyperlink box to choose from an
existing page of your site or an external site.

Clicking on the globe to the left of the hyperlink box
displays the “Edit Hyperlink” dialog box, which allows
you to link to an existing internal page or an external
page on another site. You can also choose from any of
the standard hyperlink protocols such as an email link.

Hyperlinks will be covered in detail in the Tutorial

chapter.

The site buttons

At the bottom left of the interface window are the site
buttons. The minus button lets you delete selected
pages or folders from your site. Clicking and holding
on the right-hand button displays a menu giving you
options to add pages or folders, and change the view
options for the Site/Page panel.