News, Inspiration & Stories about our Multimedia Software

Creating a Website Presentation

Creating a Website Presentation

Xara Web Designer Premium is not just about publishing websites. Perhaps surprisingly, it can also be used to create PowerPoint-style ‘slide show’ presentations which you can publish to the web. These can be public so anyone can view them, or private password protected, and you can even create ‘remote control’ Presentations where you control the slide step-through for your remote visitors (say when you’re in a conference call).

You can create your own presentation from a blank page, or the easiest solution is to start from one of the free Presentation Templates provided with Xara Web Designer. Viewers of your web presentation can move through it using the right/left arrows and Page Down/Up key to view the next/previous step or page. There is also a pop-up navigation bar, which appears at the bottom left corner of the presentation allowing easy on-screen navigation of the presentation pages. You can also add link buttons to your presentation to allow your viewers to move to the previous or next presentation step.

If you don’t have Xara Web Designer Premium you can download a free trial version to follow this tutorial.

Presentation index

Here’s a short example presentation about the Rotary organisation

Creating a Presentation
There are two main ways to create a presentation: start with a pre-designed template and then customize it with your own text, photos, color scheme and transition style or create a presentation from scratch.

Creating a Presentation from a Template

Open the Designs Gallery by clicking the ‘Designs Gallery’ tab in the Galleries bar on the right-hand side or select ‘File’ > ‘New from Designs Gallery’. Find the Presentations folder in the gallery and click to expand it. Then click on the Component Theme folder to see the pages in the presentation with their associated graphic files. Double click on the first thumbnail, named ‘Presentation’.

A new presentation document will open with each page or slide containing a number of separate steps. When viewing your Presentation each step animates onto the screen. You can control the animation styles for the individual steps and the page transitions.

Presentation 1

The opened document showing thumbnails of the pages in the presentation on the right

A number of transitions have already been applied to the steps and pages. Notice that Web Designer has displayed a Presentation toolbar on the right of the top standard toolbar – this provides all the key controls to create and edit the steps.

Presentation toolbar

Presentation Toolbar

Export & Preview iconClick this ‘Preview whole website’ icon to open a preview window, then use the arrows in the top right of the presentation (or on your keyboard) to see the steps and transitions in action. Also try moving the mouse pointer to the lower left corner of the Presentation preview windows to see the pop-up navigation controls. Close the preview.

Tip: If you’re viewing a published Presentation on an iPhone or iPad, you can swipe the screen to move to the next or previous step.

For this presentation we only need 6 pages so we will delete those not required. To do that right-click on the page and choose ‘Delete Page’, or we can delete multiple pages at once by selecting all the unwanted pages in the Page & Layer Gallery and hit ‘Delete’.

(To add new pages select the Page & Layer Gallery then click the ‘New Page’ tab or select ‘Duplicate’ to add a copy of the currently selected page.)

We will now customize page 1 with our own content. To change the pictures, simply drag one of your own photos from your computer file explorer and drop it over an existing photo on the page. It will fill the existing frame but you can drag on the fill arrows to rotate, or resize the image in the frame. To replace the text, select the ‘Text Tool’, delete the existing text and type or ‘paste’ your own text. If you are pasting from a word-processor you will be asked about the import format – select ‘unformatted text’ which will result in the text adopting the format of the text it is replacing.

Page & Layer Gallery

Page & layer Gallery showing the steps of the presentation

As you saw in the preview, there are 4 steps on page 1 (the center photo, the right photo, the text and finally the left photo).

The steps within a presentation document are just different layers on the page. When viewing the Presentation, it starts by showing the first main layer (called the Mouseoff layer) and then each step just animates successive layers on top of this. The layers are typically called Step 1, Step 2, Step 3, etc.

You can jump to any step either by expanding the Page & Layer Gallery thumbnails to show the steps (layers) for this page or, even easier, use the ‘Jump to’ control on the top right of the tool bar.

Note: It’s important to understand that you only see the content up to and including the step you are on. For example, if you jump to step 2, then you can see the content of all the steps up to 2, but later steps are not visible (these layers are hidden).

So if you are on the final step (when you open a Presentation file it always puts you on the last step of the page) then you see all the steps up to that point. You can select (using the Selector Tool) any items on any step – the status line at the bottom of the window tells you what step (layer) the selected object is on.

I am going to show you how to perform common operations on your Presentation, such as adding new steps, merging steps, re-ordering the steps and deleting steps.

Adding a Step

We shall add another object to the page and make that a new step. I dragged a graphic logo from my computer files onto the page and positioned it in the bottom left. Web Designer has placed it in Presentation step 4 because I am currently viewing my page in step 4 mode. Using the Selector Tool select the graphic and then click the ‘Make new step’ icon Make New Stepwhich will add a new step 5 at the end of the sequence. Once the new step has been added, this becomes the new ‘current step’ and anything you add to the page will be on this new step. (If you don’t want the new step to be at the end, then you can drag re-order as described above).

Merging Steps

I now want to merge steps 3 (left-hand photo) and 4 (text) so the easiest way is to ‘select’ the photo and perform a ‘cut’ (Ctrl+X), then go to the ‘Jump to’ drop down menu on the Presentation Toolbar and select step 3 and ‘paste-in-place’ (SHIFT+Ctrl+V). Now they are both on step 3 and step 4 is empty.

Note: If you leave a layer empty, it will automatically be deleted (and steps re-numbered) when you Preview or Save the document.

Re-ordering Steps
I will now move step 5 to become step 1 and step 3 to become step 2. The order of the steps can be seen in the Page and Layer Gallery so click on the tab to open it, then click on the small arrow to the left of the page thumbnail to expand the view to show all the layers.

To re-order the steps, simply drag step 5 into the desired position below step 1 and drag step 3 into position at step 2.Note that the step numbers are re-numbered so step 1 has now become step 3 and so on.

Presentation 2

The presentation showing steps 1 and 2 only

Deleting a Step

Using the Selector Tool, just select any object on the step you want to delete and click the ‘Delete step’ icon: Delete StepThis will delete the whole step (and thus all objects on that step).

Bulleted and Numbered Lists
Page 2 of our example presentation has a bullet list – these are a bit special because each step of the bullet list appears as a separate step in the presentation even though they are all one single layer. This makes it very easy to edit your list – just use the normal text editing controls to add or delete bullet items. e.g. pressing Enter will add a new bullet step.

You can change from a bullet to a numbered list using the usual text controls on the Infobar.

Tip: Pressing Shift+Enter starts a new line, but it’s not a new step, so doesn’t have a bullet or number.

If you don’t want each bullet point to appear as a separate step, in the Text Tool, right click in the list then select ‘Presentation’ > ‘Present by paragraph and deselect the option. Now when you export and preview your presentation the list is no longer split into separate steps.

Transition ControlStep Transitions
When you create a new step it takes the transition style from the last step. But it’s easy to change the animation style of any step. Just select any items on the step you want to change and click the Transition control icon which will display a drop-down list of animation styles and speeds.

Step Transition Controls

Step Transition Controls

Page Transitions

Each presentation page can be given its own transition style. To add or change a transition for the current page, right click on the document page and select ‘Web page properties’. On the dialog there’s a Page transition effect drop down menu along with a speed control.

You can also set the page transition for multiple pages at once. Just select the pages you want to change in the Page & Layer Gallery (use Shift+click and Ctrl+click to extend the selection), right click and select Web page Properties…then change the transition on the Page tab, as above.

Page Transition Controls

Page transition controls

Save & Publish

Now save your website presentation – select ‘File’ then ‘Save’, which will save your website as a .web file, which is the working format for Xara Web Designer. (If you want to save the HTML files for viewing in a browser you must choose the ‘File’ > ‘Export Website’ menu option. This creates one HTML file for each page of your website presentation and puts all the associated files into a folder next to this.)

To publish your presentation on the web for all to see, you need to upload it to your web space. (MAGIX provide you with 500 megabytes of web space and a personal web address for free.) Select the menu File > Publish website. If you’re using MAGIX Online World, which is the default, simply enter your username and password to your account – you don’t need to know anything about FTP nor do you have to enter and FTP details.

If you have an alternative web host then, on the Publish dialog, select ‘Publish to an alternative web host’ and enter your FTP settings for your website.

Xara Web Designer is probably the most flexible, powerful web design program that doesn’t require any knowledge of HTML. If you’re a creative designer your options are unlimited with Web Designer. If you’re less creative, or do not have the time, then just customize the templates as we’ve done here.

I hope you enjoy using Xara Web Designer.

In a future tutorial I will show you how to create a presentation from scratch , how to have it password protected and also how to use remote control so you can control the steps of a Presentation being viewed by others on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *