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 Designer Pro these are called ‘Repeating Items’. They show 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

Designer Pro supports Text Styles. In the Text Tool 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 appearance 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

Designer Pro you can also create web-based presentations, which are a web-based PowerPoint-like slideshows. Your web visitors can either step through the slides themselves, or you can even remote control a slideshow for invited viewers only.

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. Version 9 includes more automatic page adjustments. If you add or remove text here, all the items lower down the page shuffle up or down as required, including the graphics and the footer. The page resizes, and even the flower graphic at the bottom of the page remains in the correct place. You can paste graphics or photos to inline in the text, or you can anchor floating graphics to a point in the text. This means that the graphic can move with the surrounding text as you edit. 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 Website Themes -> Free Example  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 Designer Pro. 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 Tool (on the flyout menu of the third 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 Designer Pro is. The ability to re-position anything with complete freedom, along with the graphics tools, and accurate WYSIWYG results make Designer Pro unique amongst web authoring tools.)