Navigation Bar
The Online Content Catalog contains a wide range of template Navigation bars for you to use. There are both horizontal and vertical bars and they are fully customizable. Just import a bar from the gallery to place it on your page. Or replace an existing bar by dropping the new one onto it – the new bar takes on all the button labels, links and menus of the bar it replaces.Edit Navigation Bar
The best way to edit the labels, links and other attributes of a NavBar, and to add or remove buttons, is to use the Navigation Bar properties dialog. Double click on a bar to bring up the dialog, or right click on it and choose 'Edit navigation bar' from the context menu. The upper half of the dialog allows you to set various properties of the NavBar. The lower half allows you to add and remove buttons and menus and to edit the labels and links of each button and menu entry.
Editing Navigation
An Introduction
Website
navigation bar
This is a very important option on the NavBar dialog, which turns on automatic linking so that buttons and links are added to your bar for you, as you add pages. And all changes you make to the bar are reflected on every page of the site as soon as you close the NavBar dialog. Normally you have this option on only if you want your NavBar to appear on all pages of your website. However you can manually delete the bar from pages if desired. The site navigation bar is also useful for automatically repopulating the menu items on a single button NavBar after converting it from a multi-button NavBar. More detailsMoving and transforming
a site navigation bar
If you move a site navigation bar on the page, the bar is also moved on all the other pages on which it appears. Similarly if you scale the bar to make it larger or smaller using the Selector Tool, again the same transformation is applied to the copy of the bar on the other pages. No other transformations of a NavBar using the Selector Tool are supported (rotation, skew, scaling in one dimension).Automatic
page linking
Whenever you add a new page to your site, a link to that page will be added to your site navigation bar for you and the new page will be given a copy of the bar, if it doesn't already have one. If your bar has an unused button on it, then the first such button will be linked to your new page. If all buttons are already linked, a new button is automatically added to the end of your bar and it is linked to the new page. In either case, the label of the button is changed to match the name of the new page, if it has a name, or to "New page" otherwise. Normally you will want to immediately edit this new label in the NavBar dialog. When you delete a page from your website, the button linking to it on your site navigation bar is automatically deleted for you, on all pages of your site.Save
When you select File > Save this saves a Xara Web Designer+ .web file. This is the working format for Xara Web Designer+. 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. The _files folder contains all the graphics and other files that go to make up your website. You can name each page individually if you wish using the Page tab of the Web Properties dialog, or using the Page & Layer Gallery.Publish
To publish your website simply select File > Publish Website.., or just click this icon on the top bar: We include one year of Xara M Hosting with some versions of Xara Web Designer+, and once you have registered for M Hosting you can simply enter your Xara Hosting email address and password to publish. But you can publish your website to any other hosting company via FTP upload (file transfer protocol). If you do so, then you’ll 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.
More on Website Tools
Find out more about the power of Xara Web Designer+ in our summary of some of the key benefits and features below.Responsive Web Design
With Xara Web Designer+ you can create mobile optimized websites which dynamically adjust to different width devices. So you can create a version of your website that is tailored to narrow screen phones and at the same time offers a different layout and text sizes more suited to wider screen devices such as tablets and desktop browsers. Here is an example, that provides three layout variants for mobile, tablet and normal desktop browsers. All of the web themes in Xara Web Designer+ include mobile variants, but if you have based your site on an older theme or created your own design, then you can add variants to your own design. Start by right clicking on the page background and selecting Website Variants > Website Variants > Create. Read this popular online intro to get you started.
Website Presentations
Xara Web Designer+ allows you to create web
presentations - much like a Microsoft PowerPoint®
presentation but as a website with effects such as
animated step transitions within a page.
Website Widgets
Add dynamic content to your website, such as
movies, animations, forms and thousands of the
available gadgets such as page counters and currency
converters. We refer to these using the general term
of "website widgets".
Web Sticky & Stretchy Objects
Some websites have items on the page that stick or
stretch on screen, and float over the page that scrolls
below. With Xara Web Designer+ you have control of
both.
Open Graph Tab
Open Graph (OG) is a set of meta data that controls
how your website is previewed when sharing the URL
on social media platforms. Xara Web Designer+ has
this too.
Embedding Movies, GIF and Other Widgets
You can very easily embed movies, MP3 audio files,
animated GIFs, PDFs, photo gallery and unlimited
types of other interactive widgets on your website
with Xara Web Designer+.
Links, Buttons & Navigation Bars
You can add a web link to any object, a button,
graphic or some text. The Link tab of the Website
Properties dialog allows you to control what happens.
Additional information
In the online help you will find a lot of information about other tools available in Xara Web Designer. Below are some of the useful topics.
Press "Preview whole website" in the top toolbar.
Website made using only Xara Web Designer+, and no other graphics or software tools.
Navigation Bar
The Online Content Catalog contains a wide range of template Navigation bars for you to use. There are both horizontal and vertical bars and they are fully customizable. Just import a bar from the gallery to place it on your page. Or replace an existing bar by dropping the new one onto it – the new bar takes on all the button labels, links and menus of the bar it replaces.Edit Navigation Bar
The best way to edit the labels, links and other attributes of a NavBar, and to add or remove buttons, is to use the Navigation Bar properties dialog. Double click on a bar to bring up the dialog, or right click on it and choose 'Edit navigation bar' from the context menu. The upper half of the dialog allows you to set various properties of the NavBar. The lower half allows you to add and remove buttons and menus and to edit the labels and links of each button and menu entry.
Editing Navigation
An Introduction
Website
navigation bar
This is a very important option on the NavBar dialog, which turns on automatic linking so that buttons and links are added to your bar for you, as you add pages. And all changes you make to the bar are reflected on every page of the site as soon as you close the NavBar dialog. Normally you have this option on only if you want your NavBar to appear on all pages of your website. However you can manually delete the bar from pages if desired. The site navigation bar is also useful for automatically repopulating the menu items on a single button NavBar after converting it from a multi-button NavBar. More detailsMoving and transforming
a site navigation bar
If you move a site navigation bar on the page, the bar is also moved on all the other pages on which it appears. Similarly if you scale the bar to make it larger or smaller using the Selector Tool, again the same transformation is applied to the copy of the bar on the other pages. No other transformations of a NavBar using the Selector Tool are supported (rotation, skew, scaling in one dimension).Automatic
page linking
Whenever you add a new page to your site, a link to that page will be added to your site navigation bar for you and the new page will be given a copy of the bar, if it doesn't already have one. If your bar has an unused button on it, then the first such button will be linked to your new page. If all buttons are already linked, a new button is automatically added to the end of your bar and it is linked to the new page. In either case, the label of the button is changed to match the name of the new page, if it has a name, or to "New page" otherwise. Normally you will want to immediately edit this new label in the NavBar dialog. When you delete a page from your website, the button linking to it on your site navigation bar is automatically deleted for you, on all pages of your site.Save
When you select File > Save this saves a Xara Web Designer+ .web file. This is the working format for Xara Web Designer+. 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. The _files folder contains all the graphics and other files that go to make up your website. You can name each page individually if you wish using the Page tab of the Web Properties dialog, or using the Page & Layer Gallery.Publish
To publish your website simply select File > Publish Website.., or just click this icon on the top bar: We include one year of Xara M Hosting with some versions of Xara Web Designer+, and once you have registered for M Hosting you can simply enter your Xara Hosting email address and password to publish. But you can publish your website to any other hosting company via FTP upload (file transfer protocol). If you do so, then you’ll 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.
More on Website Tools
Find out more about the power of Xara Web Designer+ in our summary of some of the key benefits and features below.
Website Presentations
Xara Web Designer+ allows you to create web
presentations - much like a Microsoft PowerPoint®
presentation but as a website with effects such as
animated step transitions within a page.
Website Widgets
Add dynamic content to your website, such as
movies, animations, forms and thousands of the
available gadgets such as page counters and currency
converters. We refer to these using the general term
of "website widgets".
Web Sticky & Stretchy Objects
Some websites have items on the page that stick or
stretch on screen, and float over the page that scrolls
below. With Xara Web Designer+ you have control of
both.
Open Graph Tab
Open Graph (OG) is a set of meta data that controls
how your website is previewed when sharing the URL
on social media platforms. Xara Web Designer+ has
this too.
Embedding Movies, GIF and Other Widgets
You can very easily embed movies, MP3 audio files,
animated GIFs, PDFs, photo gallery and unlimited
types of other interactive widgets on your website
with Xara Web Designer+.
Links, Buttons & Navigation Bars
You can add a web link to any object, a button,
graphic or some text. The Link tab of the Website
Properties dialog allows you to control what happens.
Additional information
In the online help you will find a lot of information about other tools available in Xara Web Designer. Below are some of the useful topics.
Contours
•
The Contour Tool
•
Contouring objects
•
Converting contours to
shapes
•
Removing a contour
This is an example website created in Xara Web Designer+
Responsive Web Design
With Xara Web Designer+ you can create mobile optimized websites which dynamically adjust to different width devices. So you can create a version of your website that is tailored to narrow screen phones and at the same time offers a different layout and text sizes more suited to wider screen devices such as tablets and desktop browsers. Here is an example, that provides three layout variants for mobile, tablet and normal desktop browsers. All of the web themes in Xara Web Designer+ include mobile variants, but if you have based your site on an older theme or created your own design, then you can add variants to your own design. Start by right clicking on the page background and selecting Website Variants > Website Variants > Create. Read this popular online intro to get you started.
Website made using only Xara Web
Designer+, and no other graphics or software
tools.
