Website made using only Xara Designer Pro, and no other graphics or software tools.
6) Save & Publish
When you select File -> Save this saves a Designer Pro .web file. This is the working format for web documents in
Designer Pro. 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 and puts all the associated files into a folder
next to this.
Publishing
With this version of Designer Pro we make it even easier to get your website online. We bundle 500Mbytes of web
hosting space (which is enough for a very large website, or multiple websites) thanks to MAGIX Online World
hosting. It’s quick and easy to create a MOW account.
To publish your website simply select File -> Publish Website.., or just click this icon on the top bar:
If you wish, instead of MAGIX Online World hosting, you can publish your website to any other hosting company.
There are hundreds of companies that offer ‘web space’. The process of transferring your website from your hard
disk to the web server at your hosting company is called FTP upload (file transfer protocol). You need three pieces
of information from your web hosting company: Your FTP host name, your username and password. Once you’ve
set up the details, use the same Publish option.
Congratulations - you now have a live website that the whole world can see.
Finally you’ll notice that once you’ve published your website, subsequent changes are much quicker to publish
thanks to Designer Pro’s smart publishing. It only publishes the changed parts, rather than all the files that make
up your website.
--- End ---
The following sections demonstrate a few more features:
Pop-ups
You can easily create pop-ups with Designer Pro. These are links, buttons or photos that when clicked, or even just
when the mouse is moved over the link, a pop-up window appears.
To make a simple photo have a pop-up right click and select Web Properties, and then the Image tab and just
select the ‘pop-up’ check box.
But pop-ups can be a lot more complex than that. Here are some examples. In the web browser preview of this
page, move the mouse pointer over the peacock picture, or this text, or the following annotated buttons.
This example is quite sophisticated in that it has multiple pop-ups with faded backgrounds, but it
shows what’s possible using Layers with a fade transition effect.
These 5 buttons along the top toolbar provide access to the most common functions of Xara
Designer Pro. Two of them have fly-out menus of other controls. Mouse-over the individual
controls below to find out more.
The peacock photo is set to be repelling (if you drag it around the page in Designer Pro the text moves out of the
way). It also uses a pop-up effect so as you mouse-over the image it shows another layer on top, with a slow fade-
in and fade-out effect.
NavBars
Designer Pro includes what is probably the most advanced navigation bar (NavBar) building feature of any web
authoring program. Along the top of these pages is a simple example, and here’s another, that has sub-menus.
(preview this web page to try them out)
Building high-class graphical NavBars like this has previously been the preserve of skilled graphic artists. What
makes these so special is that you can just edit the button labels and all the graphic design is adjusted to
accommodate the label automatically. You can of course have them any color, and we include dozens of alternate
designs in the Designs Gallery. With this release 9 you can drag n drop a replacement NavBar design from the
Designs Gallery onto an existing bar to replace the design. You can also incorporate drop-down menus with various
animation and transparency effects.
The next pages provides a few pointers to some more advanced features such as embedding videos, making items
repeat across all pages, and other features.
Preview
Links
Web Properties
Export & Publish
Preview current page
Preview whole website
The two Preview buttons open a Web Browser so you can
see exactly how your website will appear. The first button
previews only the current page. The second one will preview
all pages of the website.
If you have exported your website to your hard disk, these
buttons will also re-export it to the same location.
The Link button allows you to set all types of links on
regions of text, graphic objects or photos. First select the
item you want to give a link, then click this button.
You can link to external websites, you can make the link
automatically pop-up a large photo (see example on
page 1), you can link to any page or anchor point in your
website. You can make the link pop-up a layer or link it to
an uploaded document such as a PDF file.
Website
Page
Image
Mouseover
Placeholder
FTP
NavBars
The Website Properties button opens the main dialog for
setting properties of your website, page, image,
mouseover, FTP or NavBars. For example, the Website
Properties tab is where you set the website keywords,
Google analytics (visitor tracking) and more.
The Image properties tab lets you control thumbnail pop-
ups and image optimization.
The mouse icon controls mouseover effects for objects
(as you’re seeing here).
The last button opens the NavBar dialog to build and
control the smart Navigation bars like you see on the top
of each page of this website.
Publish
Save HTML
Save JPG
Save PNG
This button controls export and publish options. The
first will publish the website to the web. The second
saves the website HTML to local disc. The last two
will export the selected item as a JPG or PNG
graphic.
This is a pop-up layer that can contain any
text, graphics or photos. By using the Mouse-
over tab of the Web Properties dialog you can
make any link or any object trigger a pop-up
like this, with a variety of animation or fade
effects.