Repeating Items
It’s common to have some items which are the same on all pages of your website. The heading text, the header
design, the top navigation buttons and the page footer on this website are good examples. In Web Designer these
are called ‘Repeating Items’. Repeating items have a small flower symbol like this shown in the top right corner
when they are selected.
It’s easy to create your own repeating
item. Try adding an object to this page,
say a photo, or draw a rectangle, or
perhaps some clipart. Using the
Selector Tool select the item and the
menu:
Arrange -> Repeat on all pages
Using the Page Gallery you can see the
item is now repeated at the same
position on all pages. If you change it, all
copies are updated.
Another repeating item is the footer text
at the bottom of each page. Using the
Text Tool you can just click on the footer
and edit the text as usual. The Edits are
reflected across all pages. (Tip: If you
don’t want the item on one page, just
delete it off that page. If you want one
copy not to be updated automatically
just select the Arrange -> Stop updating
menu option.)
Styles
Web Designer supports text Styles. In the TextTool there is a Style drop-down menu, on the infoBar, that shows a
list of Styles used in this document. ‘Normal’ is the main body text of this document, and there are two heading
styles. The ‘Heading 2’ style is the one used on top of this paragraph and others. To update the apperance of all
such headings, just select one heading, make the required changes, such as font, size, color etc and then in the
Style drop-down select ‘Update Heading 2’
Presentations
If you’re using the premium version of Web Designer you can now also create web-based presentations, such as this
example. And like PowerPoint presentations you use the keyboard right arrow to step through it.
Text flow around
To make any object repel text right-click on it and select ‘Repel text under’. Now, as you move the object around
the page, it repels text around it. This will of course re-arrange everything on your page, and may require you to
re-position items or change the page size to accommodate the overflowing text.
You can also anchor graphics to text. This means that the graphic can move with the surrounding text as you edit
the text. The two images immediately below are examples - add a few empty lines into the text here to see them
move.
Page selection and view
The Page & Layer Gallery is shown on the right side of the window. Just click a thumbnail to
move to the required page. Click the small triangle next to each page thumbnail to expand the
Gallery to show the layers on the page. If you prefer the scrolling document view where all
pages are shown one below another ‘word processor style’, right click on the page background
and select ‘Multiple Page View’.
Re-ordering and renaming pages
Just drag the page thumbnail in the Page & Layer Gallery to re-order. To rename a page, first
select the page by clicking on it, and then perform a second click on the small page name
shown on the bottom of each page thumbnail. (The first page of your website should always be
called ‘index’.)
Adding or removing pages
If you want to create a new page similar to the current one, just click this icon on the top bar.
(Or the Edit -> Pages menu.) If you want to add a new page from the templates. e.g. in the
style of this one, open the Designs Gallery and from the Examples -> Example Web Templates
section just drag any page design onto this document. See how easy it is to make all the colors
match! The main set of installed page templates are under Website Themes - there are lots of
different designs.
Other Tools
Let’s explore some of the other tools and features of Web Designer. You can try these things on the semi-
transparent ‘speech bubble’ graphic below. Remember for most operations you must select the item first (click on
it using the Selector Tool).
Change its color: Drag a color from the Color Line below onto the shape. Or try the Color Editor (Ctrl+E).
Change its size, position, angle: Using the Selector Tool just drag on the 4 control points around the shape.
Give it a soft shadow: Select the Shadow Tool, and drag on the bubble shape. Adjust the controls at the top.
Give it a graduated color fill: Select the Fill Tool (paint tin icon), and drag across your shape. Drag the ends of the
arrows to adjust. Try dropping a color on the ends of the fill arrow. Or select an arrow end and try the Color Editor
(Ctrl+E).
Make it semi-transparent: Select the Transparency Tool (wine glass) and adjust the transparency value using the
slider at the top. Drag the shape over the page to see the transparency effect.
Better still: In the Transparency tool, drag across the object. You’ve just given it a graduated transparency.
Edit Shape: This is a little more advanced. Select the shape, go into the Shape Editor Tool 
(on the flyout
menu of the second tool on the left). Then drag on one edge of the shape, or on one of the small control points. If
you’ve used vector ‘bezier’ editing tools you’ll be familiar with this.
Finally: Preview any of your changes - everything you do ‘just works’ in the web browser!
(If you’ve used other web authoring, HTML editors or graphics software you’ll realize just how much of an advance
Web Designer is. The ability to re-position anything with complete freedom, along with the graphics tools, and
accurate WYSIWYG results make Web Designer unique amongst web authoring tools.)
