MAGIX Xara Web Designer Premium MX User guide

Purchasing and unlocking

Web Designer MX Premium

When you run the downloaded trial version of Web Designer MX Premium, the start screen will present

you with three options. Check the option you require and you will be presented with further instructions.

Activate with serial number

Select this option if you have already purchased your copy of Web Designer Premium and enter the

serial number that you were given in the email confirming your purchase. Enter your email address so

your copy can be registered (if you have already registered this will be ignored). Then click Register

Online and Activate

Purchase online.

Select this option if you would like to purchase a copy of Web Designer Premium. You will be given an

serial number when you purchase.

Continue using trial

Select this option if you would like to continue using the free trial. To the right of this option it will tell you

how many days of the trial you have left. Then click Continue trial

. The trial lasts for 7 days from when you first start the program, but you can extend this free trial period

to 30 days if you register. Click the Extend Trial button to register and extend your trial.

Important note

: Please keep a record of the email address and password you used when purchasing Web Designer MX

Premium since you may need them in the future, for example if you wish to upgrade.

Other ways to purchase

If you do not have the trial you can order directly on our website www.xara.com/store

and you will be given a serial number that can be used to unlock the trial later.

Xara titles are great value for the money, but we offer further generous discounts to academic

establishments on all our products. You can find details on our website.

Affiliate Program

Web Designer MX Premium page templates include a small 'Made with Xara' link at the bottom. You

can easily delete this link if you don't want it, but if you leave it on your published website you can earn

commission from customers introduced to Xara through your links, or you can have that commission

donated to charity. Select "Help" > "Affiliate Program"

to find out more or, if you are already an affiliate, to change your commission settings.

Page 1

Support

If you purchased Web Designer MX Premium from Xara you can contact Xara support and if you

purchased from MAGIX you can contact MAGIX support, full details are given below.

Xara Support

http://support.xara .com



Our own support site includes a Troubleshooter for downloading, unlocking and installation

issues, plus comprehensive FAQs (frequently asked questions) which are constantly updated and

available 24 hours, 7 days a week; always the best source for instant answers.



you can also submit a ticket to our support staff via the support site above if you have an account

with Xara, but please remember we can only respond during office hours! Please note

TalkGraphics members cannot help with Xara account issues

If you can't find the answer in this guide, we highly recommend viewing the Web Designer movie tutorials

. It is the ideal way to get to know Web Designer MX Premium and get an overview of its features,

allowing you to make the most of the program.

Here are some other sources of information and help from Xara and the Xara community that may be of

use:



Program help - Choose "Web Designer MX Premium Help" from the "Help" menu to open Web

Designer MX Premium Help (containing hundreds of pages of information).



Status bar - Try reading the text on the status bar at the bottom of the main Web Designer MX

Premium window. It always describes what actions are currently possible and what they will do

(even during drags), and helps you learn to use the Web Designer MX Premium tools. It also

gives details of what buttons and controls do as you move the pointer over them. See Status Bar

for more details.



ToolTips - If you hold the mouse pointer over a button or control for a short while, then a short

message appears telling you what it does.



Menus - If you want to know what a menu item does, highlight it and press "F1".



Dialog boxes - If you want to know what a dialog box does or how to use it, click Help.



Movies - Use the menu option "Help" > "Movies" or click here to view a list of available

movies.



The TalkGraphics forums - Post your question in the popular, dedicated Xara forums at

TalkGraphics.com (www.talkgraphics.com), where you can ask other Web Designer MX

Premium users for advice or suggestions ? available 24x7. You can share tips and ideas, ask

questions or offer solutions to other users.



Xara Xone - Visit the Xara Xone (www.xaraxone.com) for a host of excellent Xara support

resources including tutorials, tips and free stuff.



"The Outsider" newsletter (www.xara.com/outsider) Subscribe to our monthly newsletter "The

Outsider" (with news about the latest versions, monthly tutorials and tips, offers, inspirational art,

and more).



Join the Xara community on Facebook or follow our news on Twitter.



Search or browse through our Resource Index, a definitive list of tutorials and movies created by

Xara and third parties: (www.xara.com/resources/)

MAGIX Support

Dear MAGIX customer,

Our aim is to provide convenient, fast and solution-focused support at all times. To this end, we offer a

Page 2

wide range of services:



Unlimited web support:



As a registered MAGIX customer, you have unlimited access to web support offered via the

convenient MAGIX service portal on http://support.magix.net, including an intelligent help

assistant, high-quality FAQs, patches and user reports that are constantly updated.



The only requirement for use is product registration on www.xara.com



The online community - on-the-spot support and a platform for exchange:



MAGIX customers have free and unlimited access to the online community at www.magix.info,

which includes approx. 120,000 members and offers the opportunity to ask members questions

concerning MAGIX products as well as use the search function to search for specific topics or

answers. In addition to questions & answers, the knowledge pool includes a glossary, video

tutorials and a discussion forum. The multiple experts, found round-the-clock on www.magix.info

guarantee quick answers, which sometimes come within minutes of a question being posted.



Email support for MAGIX products:



For every new MAGIX product you will receive, as of date purchase, 12 months of email based

customer service.



Premium email support:



For priority support, or if you want the MAGIX support team to help with non-MAGIX related

harware problems you can purchase an Premium email support ticket. The ticket is for a specific

problem, and is valid until it is solved, it is not restricted to an email.

Please note

: To be able to use the Premium email support and free product email support via the Internet, you have

to register your MAGIX product using the serial number provided. This can be found on the CD case of

your installation CD or on the inside of the DVD box.



Additional telephone service:



Besides the large number of free customer service offers, we also offer a fee-based telephone

customer service available to customers that have purchased from Magix. Here you can find a

summary of our technical support telephone numbers:

http://support.magix.net

Mail (Europe):

MAGIX Development Support, P.O. Box 20 09 14, 01194 Dresden, Germany

Mail (North America):

MAGIX Customer Service, 1105 Terminal Way #302, Reno, NV 89502, USA

Please make sure you have the following information at hand:



Program version



Configuration details (operating system, processor, memory, hard drive, etc.), sound card

configuration (type, driver)



Information regarding other audio software installed

MAGIX Sales Department

You can reach the MAGIX Sales Department workdays for help with the following questions and

problems:



Orders



Product consulting (pre-purchase)



Upgrade requests



Returns

Europe

Monday - Friday, 09:00-16:00 GMT

Page 3

U.K.:

0203 3189218

Denmark:

699 18149

Sweden:

0852500858

Finland:

09 31581630

Norway:

0210 30665

North America

9 am to 4 pm EST Mon-Fri

Phone:

1-305-722-5810

Page 4

What is new in Web Designer

MX Premium? (v8)

Web Authoring/Web Publishing



Text Styles Web Designer Premium now supports Text Styles, a powerful way to alter the

appearance of text throughout your document with just a few clicks. Update an element of your

Text Style eg font, color, line spacing etc, and all text with that Style applied throughout your

document is instantly updated ? headings, titles or body text. Consistent text styles help you

create professional looking documents, and now it couldn't be easier. What's more we offer 'live'

Style preview; Simply select some text and then traverse the Style menu - the selection will

change to show your text in each Style. It's a quick and easy way to try out your Styles without

having to actually select and undo each in turn.



Automatic Object Positioning / Smart Page Resize In previous versions of Web Designer

Premium you had to manually adjust the position of items on your page as you edited or added

more text. Similarly you had to drag the bottom of the page down to make it longer as your

content grew. No longer! Web Designer Premium has the ability to make growing text areas

automatically push other objects down the page, and also lengthen the page automatically to

accommodate the enlarged text areas. Creating websites based on templates will now be

considerably easier and faster.



Inline Graphics Web Designer Premium now allows you to embed 'inline graphics' in text using

a simple 'Paste' operation. Embedded graphics are great for really small items on the line such as

symbols, icons etc, and are treated just like a 'character', in other words they flow and follow the

same formatting rules as a character embedded in the text.



Embedded Fonts (Premium only) Web Designer Premium's font embedding technology

overcomes the serious design limitation of having to stick to the very small selection of so called

'web safe' fonts. Our technique is compatible with the vast majority of modern web browsers and

works by embedding a special version of the font on your website which the web browser can

download and display.



New Widgets & Widget Improvements There's a selection of new web page Widgets in the

Designs Gallery under Page Elements.

New re-sizeable JavaScript Widgets (Premium only) In previous versions of Web

Designer Premium only Flash Widgets could be resized, DHTML or JavaScript Widgets

were fixed size. This release introduces re-sizeable JavaScript Widgets. All existing Widgets

have been updated to this new level, and several new ones have been added. Unlike Flash

Widgets they are compatible with all modern devices including iPhone, iPads and Windows

Phone 7, and do not require a Flash plug-in.

New Chart Widgets (Premium only) There is a new chart drawing Widget included which

lets you create interactive charts and graphs for your website. The charts use interactive

DHTML and SVG to render the chart in the browser, which responds to mouse-over to

highlight particular chart values.

Other New Widgets. A Widget for creating QR codes.

Enhancements to Widget Handling You can now preview a Widget in the Widget

document directly (you do not need to Close & Save it back to the original).When linking to

other pages of your website from within a Widget editor, you'll now see a list of all pages,

making it very easy to link to any page in your website from within a Widget.

Page 5

Premium Widgets added to classic version of Web Designer Premium We have also added

several new Widgets to the collection in the classic version of Web Designer PremiumWeb

Designer Premiumslideshow and chart Widget (in the folder called Example Premium

Widgets).



Presentations (Premium only) We've enhanced presentations in Web Designer Premium in a

number of ways.



Slide navigation Move your mouse to the lower left corner of the browser window in any page

of your presentation and you'll now see a pop-up page navigation control that includes a menu of

all slides, allowing you to jump directly to any slide. Plus there's handy Previous, Home and Next

controls.



Layer-less bullet lists The new graphical bullet and numbered list feature (see below for more

info on this feature) creates automatic presentation steps (each bullet or numbered item is treated

as a separate step in the presentation). This makes a huge improvement to usability and

productivity when creating lists.



Page & Layer Gallery Change page transition - you can now select multiple pages in the Page

& Layer Gallery ? this is handy for presentations because you can then use the right-click menu

'Web page properties' to alter the page animation transition for all the selected pages.



Graphical Bullet and Number Lists (Premium only) MX introduces the ability to use your

own graphical designs for the bullet character or the number at the start of bullet or numbered

lists, which can make a significant improvement in the presentation quality of any list. You can use

any of the in-built drawing and text tools to create your own bullet and number graphics and we

also supply a collection of ready-made examples in the Designs Gallery.



Designs Gallery New content & usability improvements

New web themes and new template elements in both versions.

Existing themes have been updated to support new features, such as the smart page

resizing or graphical bullets and numbers.

The Designs Gallery has been completely re-arranged and re-ordered to be more easily

navigable.

Live Designs Gallery The Designs Gallery is now completely server linked, so we can

update and add more templates, clipart, Widgets etc.

3000+ new items of traditional clipart.



Pop-Up Layers (Premium only) You can now choose whether you want your pop-up layers to

close automatically, or only when a viewer clicks a close box.



In Document Pop-Up Link Checker When you click on any item with a web link in Web

Designer Premium (not on the web page), a small pop-up appears giving you the option to follow

the link, change it, or remove it - very useful if you want to test a link or view the linked page

while you're working on the document.

General Tools & Usability Enhancements



Media Exchange via the Share Menu The new Share Menu puts the MX (Media Exchange)

into Web Designer! All titles in the MAGIX/Xara range can share media files with each other and

with some important third party services.



Using the new Share menu, the current selection (whether it's a photo, or any other object) can

be passed as a JPEG to other installed MAGIX MX applications (eg Movie Edit Pro MX), to

MAGIX Online Album, and to Flickr and Facebook.



Live Effects Tool & Photoshop Plug-ins (Premium only) The Live Effects tool allows

Photoshop plug-in effects to be applied to both photos and vector graphics, opening up a huge

range of special graphical effects. What's more we have included more than 40 plug-ins from

MAGIX and Xara, from bumpmap and emboss to painting and blur.

Page 6



Page & Layer Gallery Re-position/Delete/Cut or Copy multiple pages. It's now possible to

select more than one page in the Page & Layer Gallery and re-position them with drag & drop.

Plus there's right click access to menu options to Delete, Cut or Copy the selection of pages to

the clipboard. You can go into another document and paste whole pages. You can now also

drag objects into and out of ordinary groups in the Gallery (note this is not supported for special

groups like anchored groups, repeating groups, etc).



You can now also drag objects into and out of ordinary groups in the Gallery (note this is not

supported for special groups like anchored groups, repeating groups, etc).



Import & Export

'Import graphics from the Web' has been improved and now imports graphics and text

from a web page, and places them in the right position on the page. Note that since most

websites use scripts, mouse-over effects,hidden objects and text, this will rarely produce a

WYSIWYG result, but it is very useful for importing all graphics and text from an existing

website.

Improved Copy / Paste of HTML items from other applications such as web browsers

(Note the same restrictions apply as above).

SVG Import It's now possible to import most SVG files (we say 'most' because there is no

industry agreement for SVG format - for example different web browsers support different

sets of features). (Premium only)

Beta import of OpenOffice Impress (.odp) and PowerPoint (.pptx). (Premium only)

Improved PDF import.

Update of camera RAW import. (Premium only).



Color Editor The color editor is now resizable, which is particularly useful when editing very

pale shades of a color in the top right area of the color picker.

Other Improvements (in both versions unless

shown)



An updated 'Optimize all images' function will scan all graphics and images in your

document - now including PNGs as well as JPEGs - and convert them to the optimum size and

optimum image type. This can substantially reduce memory use and .web file sizes. (NB this is a

destructive operation).



You are also given the option to optimize images to JPEG when importing, if Web Designer

recommends it.



Improved Incremental Publishing making it smarter about publishing updates.



We've added an option to make the button order in a NavBar match the order of pages as

shown in the Page & Layer Gallery. With this option on, if you re-order pages your NavBar

buttons will reflect this change.



Photo Enhance Tool now includes a tool for adjusting the hue on a photo. Any color can be

selected and the strength of the hue adjustment controlled.



One year's free top level domain name included with the free MAGIX Online World hosting

(Premium only)



Improved formatting support for character based languages such as Chinese, Japanese, and

Korean.



A new option to turn off the fly-out galleries.



Right clicking over any empty area of the button bars on the Web Designer window will

show a context menu to quickly enable or disable any tool bar.



The 'Preview Page' and 'Preview Website' buttons have been placed beside each other on

the top bar, for easier, quicker access and provided with new F5 and Shift+F5 key short cuts.

Page 7



A new 'Lock page size' option has been added in the 'Page Options' dialog. This can prevent

accidental drag resize of the lower or right page edge.



Page Guides are now turned on and 'snap to guides' enabled automatically if you attempt to

drag a guideline onto a page when the guides are turned off.



New keyboard shortcuts:

Delete Page

Delete

Move Page Up

PageUp

Move Page Down

PageDown

Push margins dialog

Ctrl+Shift+H

Toggle Push attribute on selection

Ctrl+H

Preview Website

Preview current web page

Shift + F5



Enhanced Photo Panorama tool The integrated photo stitcher now takes up to 8 photos, and

performance has been improved. (Premium only).



Ctrl+rotate now aligns any straight edge vertically or horizontally.



You can now set the AVI frame rate of exported animations, and the animation preview

window now has thumb track control on a timeline. (Premium only).



Also MX is smart about the lack of mouseovers and mouse pointers on iOS devices ? the first

tap on a button or link will now follow the link, a second tap isn't necessary.

And many other improvements - for full

details visit

Xara.com

Page 8

Introduction

It's evident that the vast majority of websites are of a graphical nature. The presentation of your website

matters a great deal. You want a competent, professional looking website. We believe you should not

have to use multiple different tools - graphics and HTML editing - to create your website. We believe

you should have complete freedom to include any text, graphics, photos anywhere on the page.

Creating websites should be like creating PDF files - you should not need to know anything about what

happens 'under the hood'. You would not expect to edit the PDF file data directly. You should not need

to know, or even see, the HTML that goes into creating your website.

Getting started with Web Designer MX

Premium

If you click on the contents tab of this help guide, you will find a detailed description of each of the tools,

galleries, menus, and control bars. You can also click on the index tab to search for a particular

keyword.

Getting started with Web Designer MX Premium

Watch the demo movies

Getting more help

Program designed and developed by Xara Group Ltd. For more information about Xara and its

products, click here. Alternatively, visit our web site:

www.xara.com

The Geotype font is provided by kind permission of Gary Bouton and remains © Gary Bouton. Take a

look at www.theboutons.com

Other fonts are provided by third parties who retain the copyright. In all cases, copyright is reserved by

Xara or its licensors and is protected by international copyright law.

The contents of this documentation and the associated Web Designer MX Premium software are the

property of Xara Group Ltd and are copyrighted. Any reproduction in whole or in part is strictly

prohibited. For additional copies of the software, please contact Xara Group Ltd. Web Designer MX

Premium license terms

Xara is a trademark of Xara Group Ltd.

Read all acknowledgements

Last changed: 23/03/2012 13:53

Page 9

Getting started with Web Designer MX

Premium

If you click on the contents tab of this help guide, you will find a detailed description of each of the tools,

galleries, menus, and control bars. You can also click on the index tab to search for a particular

keyword.

Getting started with Web Designer MX Premium

Watch the demo movies

Getting more help

Program designed and developed by Xara Group Ltd. For more information about Xara and its

products, click here. Alternatively, visit our web site:

www.xara.com

The Geotype font is provided by kind permission of Gary Bouton and remains © Gary Bouton. Take a

look at www.theboutons.com

Other fonts are provided by third parties who retain the copyright. In all cases, copyright is reserved by

Xara or its licensors and is protected by international copyright law.

The contents of this documentation and the associated Web Designer MX Premium software are the

property of Xara Group Ltd and are copyrighted. Any reproduction in whole or in part is strictly

prohibited. For additional copies of the software, please contact Xara Group Ltd. Web Designer MX

Premium license terms

Xara is a trademark of Xara Group Ltd.

Read all acknowledgements

Last changed: 23/03/2012 13:53

Page 10

What makes Web Designer Premium so

special?

Web Designer Premium is unique in that it's the only truly free-form web design tool, that allows true

freedom of web page design, with 'anything anywhere' yet produces completely accurate WYSIWYG

results. In other words you can position text, graphics, photos anywhere on the page, any size, any angle,

overlaid, with transparency...and Web Designer Premium will produce a pixel accurate perfect working

HTML page.

Web Designer Premium can do things that are regarded as near impossible with other web-authoring

software, such as repel text around irregular shapes and photos. It includes advanced vector graphics

tools to draw anything from simple shapes to complex company logos and graphics. It includes automatic

optimisation of graphics (not only producing optimized resolution images, but automatically detecting

repeating elements across the website so producing faster, more optimized websites).

It supports CSS layers with advanced features such as transparency, even graduated transparency,

mouse-over effects and more. It creates cross-browser, cross-platform totally XHTML compatible

HTML websites.

On top of all this Web Designer Premium is perhaps the easiest, simplest to learn web authoring tool

available.

Web Designer Premium is aimed at graphic designers who do not want to learn HTML or scripting

languages. For graphics designers it's the perfect 'rapid website prototyping' tool.

It's also aimed at beginners who just want the easiest possible way of create professional looking

websites.

Web Designer Premium provides no programming tools, no script editing and doesn't even provide an

'HTML view'. Our design philosophy is this: You do not need to know the PDF programming language

in order to produce PDF files. So neither should you have to know anything about HTML or Javascript

in order to create great websites.

Page 11

A Website In 6 Steps

For those with short attention spans (that's most of us), you can discover the main benefits of Web

Designer Premium by just following the instructions in the initial opening document when you start Web

Designer Premium. This is both a basic introduction and an actual website you can experiment with. You

can also find this example document in the Designs Gallery

Click the Designs Gallery tab, open the Introduction

category and just double click on the first document.

Here you can find out how to change your website colors, edit your text, drag and drop photos, move

objects around the page and more.

Undo

Remember you can undo any change you make using the Undo

button or "Ctrl + Z". If you hold the button down you can race back

through all your actions, right back to the beginning.

Page 12

Getting Help

If you need some help using this program, see Support

Document info

"File" > "Document info"

displays information about the selected document such as its size and any fonts used. This is a good way

to find out if you are missing a required font that could prevent the document from displaying correctly.

Anything you type into the comment field is stored as part of the file. This comment is displayed

whenever you display the document info dialog box.

Page 13

Document info

"File" > "Document info"

displays information about the selected document such as its size and any fonts used. This is a good way

to find out if you are missing a required font that could prevent the document from displaying correctly.

Anything you type into the comment field is stored as part of the file. This comment is displayed

whenever you display the document info dialog box.

Page 14

ToolTips

When you move over a button, the

toolTip tells you the function of the

button.

About Web Designer MX Premium

Choose "Help" > "About Web Designer MX Premium"

. This displays general information about the program. If you contact the support, you may be asked for

this information.

Page 15

About Web Designer MX Premium

Choose "Help" > "About Web Designer MX Premium"

. This displays general information about the program. If you contact the support, you may be asked for

this information.

Page 16

Getting Started

This section gives an overview of the main functionality of Web Designer Premium. Later sections go

into more detail about each tool.

In this chapter

Program Layout

Objects On The Page

Object Based Web Design

The Selector Tool

Website Toolbar

Creating a website

Previewing Your Website

Using Templates, Clipart & Widgets

The Designs Gallery

Website Colors

Photos

Text

Selecting a page size

Automatic page resizing

Saving Your Work. Creating A Website

Stretchy Objects

Groups

Repeating Objects

Links, Buttons & Navigation Bars

Displaying your own icons in browser tabs: favicons

Drawing Tools

Right-click menus

Layers, Mouseover (Rollover) & Pop-ups

Creating Buttons, Banners And Other Web Graphics

Publishing Your Website

Page 17

Program Layout

Info Bar - changes with each tool

Zoom

Preview Website

Designs Gallery (Galleries bar)

Page & Layer Gallery (Galleries

bar)

Selector Tool

Photo Editing Tool

Drawing Tools

Text Tool

Shadow Tool

Tabs for all open documents - icon

identifies document type.

Color Line

Note

: All Web Designer Premium infobars now have improved text rendering for easier viewing, if you have

ClearType text enabled in your Windows Control Panel.

There are four buttons in the top bar that relate to website functions. Three of these have flyout bars

which are shown when you move the mouse pointer over them, revealing more web function buttons.

Page 18

Export and preview web

page/website

Link properties

Website options

Export

Move your mouse pointer over each button in the flyout bar to see a tooltip describing the button.

There are two ways to create a new website. Either by starting with a pre-designed template and then

customizing this with your own text, photos and color scheme. Or by creating a website from scratch,

placing all the required elements, text, graphics and photos on the page where you require.

Note: By default Web Designer Premium opens a new document showing just one page. To view all the

pages in your website document, right click a page and choose Multiple Page View

. You can now scroll the Web Designer Premium window up and down to view all the pages in the

document.

Zooming / Scrolling / Pushing your page

These common operations are made very easy:



To Zoom in or out, hold "Ctrl" and use the mouse-wheel



To push the page, press your mouse-wheel and push (yes it's a button as well)



To scroll use the mouse-wheel (or the scroll bars of course)

Web documents are displayed in single page

mode by default and print documents in

multi-page view mode. Switch between

display modes by right clicking on the page or

pasteboard and selecting or deselecting

Multiple Page View

from the drop-down menu. An example of

multiple page view is shown to the left.

You can drag and drop items between pages.

When you make document-wide Theme color

changes, you can see how the changes affect

all pages.

The current page is marked with 4 corner

brackets.

In this example you can see some items have been placed on the pasteboard area beside the pages.

These are not exported as part of your website. The pasteboard area is useful as a place to keep

temporary or working graphics, photos or other objects.

Flyout Bars

Some tools on the main toolbar are grouped together under a single icon. These icons have a small

triangle indicator in the bottom right corner and when you move the mouse pointer over one of these

icons a flyout bar appears. The bar holds the other tool icons that are in this group. Simply move the

mouse pointer over each one to see a tooltip, and click to select the tool you want.

Page 19

If you select a modal tool from a flyout bar, that tool becomes the primary tool for that group. So you'll

then see its icon highlighted on the main toolbar.

There are also some flyout bars on the toolbar at the top of the window. Again these are used to group

together closely related operations under a single icon. This makes them conveniently accessible while not

taking up too much space on the bar.

See the Customizing chapter

in the pdf manual for more information on flyout bars.

Page 20

MAGIX Xara Web Designer Premium MX, Web Designer Premium MX User guide

Related papers

Other documents