Website made using only Xara Web Designer, and no other graphics or software tools.
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 Animationto choose your effect(s).
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.
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.
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.