Website made using only Xara Web Designer, and no other graphics or software tools.
Pop-ups
You can easily create pop-ups with Web Designer. 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 add a simple pop-up to a photo right click on the photo and select Web Properties, go to the Image
tab and just select the pop-up check box.
But pop-ups can be a lot more exciting 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 Web
Designer. 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 Web
Designer 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.
Mouseover & Other Animation Effects
By default mouseover buttons have a fade in effect, but if you want to draw attention to an object you can
choose from many other more eye-catching effects such as bounce, pulse or even slide in. What’s more in
Premium you can add similar animated effects to clicks or ‘on reveal’ (so for example you can make objects
slide, zoom, roll or fade into view as you scroll down the page). Premium also has Scroll Animations, where
objects animate while the user is scrolling your page. Right click on the object and select Web Animation
to choose your effect(s).
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 Animation dialog you can
make any link or any object trigger a pop-up
like this, with a variety of animation or fade
effects.