MX

ManualsBrandsMagix Xara ManualsApplicationsXara Web Designer Premium

231

232

233

234

235

236

237

238

239

240

Table Of Contents

Purchasing and unlocking Web Designer MX Premium
Support
What is new in Web Designer MX Premium? (v8)
Introduction
- Getting started with Web Designer MX Premium
- What makes Web Designer Premium so special?
- A Website In 6 Steps
Getting Help
- Document info
- ToolTips
- About Web Designer MX Premium
Getting Started
- Program Layout
  - Zooming / Scrolling / Pushing your page
  - Flyout Bars
- Objects On The Page
- Object Based Web Design
  - Stacking Order
- The Selector Tool
  - Nudging Objects
  - Rotating Objects
  - InfoBar
  - Copying Objects
- Website Toolbar
- Creating a website
- Previewing Your Website
- Using Templates, Clipart & Widgets
  - Adding New Pages To Your Website
  - Embedding Movies, Flash And Other Widgets
  - Flash Clipart
- The Designs Gallery
- Website Colors
  - Coloring Shapes
  - Coloring Imported Clipart
  - Coloring Photos
  - Page Background Color
  - Page Background Layer
  - Offsetting the top of your page
  - Advanced backgrounds
  - Linked shades
- Photos
  - Replacing Multiple Photos
  - Importing Large Photos
  - The Photo Tool
  - Thumbnail Photos With Pop-ups
- Text
  - Font Size
  - Web Safe Fonts
  - Creating New Text Objects
  - Rotated Text
  - Bulleted and numbered lists
  - Soft Shadows, Color Filled Text, Transparent Text
  - Text Repel Around Objects
  - Anchored Objects
  - Spell Checker
- Selecting a page size
- Automatic page resizing
  - Page Size
- Saving Your Work. Creating A Website
  - Automatic backups
- Stretchy Objects
- Groups
  - Converting Text To Be A Graphic
  - Soft Groups
  - Anchored Groups
  - Repeating Groups
- Repeating Objects
- Links, Buttons & Navigation Bars
  - Changing Button Text
  - Mouseover (Rollover) Buttons
  - Adding New Buttons
  - Button Bars (NavBars)
- Displaying your own icons in browser tabs: favicons
- Drawing Tools
  - Current attributes (styles)
  - Shape Tool
  - Straight Line and Arrow Tool
  - Rectangle Tool
  - Fill Tool
  - Transparency Tool
  - Feather
  - Shadow Tool
  - Example Graphics
- Right-click menus
- Layers, Mouseover (Rollover) & Pop-ups
  - Mouseover Effects
  - The MouseOff and MouseOver Layers
  - Mouseover (Rollover) Buttons
  - Creating Your Own Mouseover Buttons
  - Layer ordering in website documents
  - Moving Objects Between Layers
  - Applying settings to popup layers
  - Pop-up Layers
  - Pop-up Photos
- Creating Buttons, Banners And Other Web Graphics
- Publishing Your Website
Document handling
- Starting a new document
- Opening an existing document
- The Web Designer MX Premium window
- Opening a second window
- Changing the zoom value
- Sliding the document within the window
- Changing the page size
- Multiple pages in the document
- Saving the document
- Support folders
- Closing the document
- Automatic Backups
- On-screen grid
- Rulers
  - Displaying/hiding rulers
  - Changing the ruler zero points
- View quality
- Galleries
- Undo and Redo
Object Handling
- The Selector Tool
  - Selecting objects
  - Change object selection
  - Marquee selection
  - Extend Selection
  - Select under
  - Select inside
  - Moving objects selected under or inside
  - Selecting and layers
  - Selecting all objects
  - Deselecting an object
  - Selection markers
  - Status line
  - Selection bounds handles
  - Tab
- Moving objects
  - Drop copy
  - Fills
  - Nudging objects
  - Cut, copy and paste
- Removing objects from the document
  - Cutting objects
  - Deleting objects
- Duplicating and cloning
  - Duplicating
  - Cloning
- Moving objects forward and backwards
- Rotating using the mouse
  - Rotating objects
  - Rotating by exact angles (using the InfoBar)
  - Rotating objects in Resize Mode
- Scaling (resizing) objects
  - Scale Line Widths button
  - Lock Aspect button
  - Scaling using the mouse
  - Scaling using the InfoBar
- Flipping objects
- Stretching and squashing objects
- Skewing objects
- The Mold tool
  - Perspective
  - Enveloping
  - Editing mold shapes
- Snapping
  - Snap to grid
  - Snapping and line widths
  - Magnetic object snapping (snap to objects)
- Guide Objects and Guidelines
  - Placing objects onto the Guides Layer
  - Creating a guideline
  - Deleting a guideline
- Summary of shortcuts on the numeric keypad
- Grouping and ungrouping objects
  - To create a group
  - Ungrouping objects
  - To add more objects to a group
  - Removing objects from a group
  - Selecting a single object from within a group
  - Groups and layers
- Soft Groups
  - Creating Soft Groups
  - Removing Soft Groups
  - Text Synchronization
- Alignment
  - Within
  - Aligning
  - Distribute
- Copying Styles: Paste Attributes
- Naming objects
  - Adding names
  - Names applied
- Repeating Objects
  - Editing the contents of a repeating object
  - Advanced use of Repeating Objects
  - Stopping objects repeating
  - Deleting repeating objects
- Footers and objects that stretch with the page
Drawing Lines and Shapes
- Drawing a line or shape
- The Freehand & Brush Tool
  - Erasing while drawing
  - Drawing straight segments in the Freehand Tool
  - Extending a line
  - Joining two lines
  - Closing a freehand shape (to create a filled shape)
- Editing lines/shapes with the Freehand & Brush Tool
  - Sketch Mode
  - Pressure sensitive drawing
  - Trace mode
  - Brush styles
- The Straight Line & Arrow tool
  - Why a straight line tool?
  - Drawing & editing straight lines
  - Adding arrowheads & tails
  - Reverse path
  - Adding more line segments
- The Shape Editor tool
  - To draw a straight line segment
  - Mixing curved and straight lines
  - To draw a curved line segment:
- Extending the line
- Finishing the line
- Adding a new point handle
  - To the end of a line:
  - To the middle of a line:
  - To the start of a line:
- Selecting multiple point handles
- Deleting points
- Moving point handles—Shape Editor Tool
  - Using the text boxes on the InfoBar
- Smoothing a line
- Constraining the line
- Changing curves
  - Using the curve handle
  - Dragging the line segment
  - Making sharp corners
  - Making smooth curves
  - Balancing curves
- Changing a straight line to a curve (and vice versa)
- Joining lines
- Splitting a shape
- Line Gallery
  - Change join type
  - Change line cap
- Closing a shape
- Changing the line width (thickness)
Shape Handling
- Combining shapes
- Changing the line width (thickness)
- Creating rectangles and squares
  - Creating a square
  - Creating and editing rounded corner rectangles
- Creating circles and ellipses
- Creating regular polygons (the Quickshape Tool)
  - Polygons with rounded corners
  - Editing a polygon
- Creating stars (polygons with indented sides)
  - Removing stellation
- Editing stars
Color Handling
- The color line
- Applying fill & line colors by drag & drop
- Editing an object’s color
- The Color Editor
- Local colors and Theme colors
- Theme color schemes
- Creating your own color schemes
- Creating new named colors
- Editing named colors
- Normal colors, Tints, Shades and Linked colors
- Creating a Tint, Shade or Linked color
  - Editing the parent color
Text Handling
- Introduction
- Terminology
- The Text Tool
- The Font Menu
  - Web Safe Fonts
  - Live Font Preview
  - Live Font Size preview
  - Instant font menu navigation
- Simple text
- Text in a column
  - Changing the width of the column
  - Changing the angle of the column
- Text areas
  - Connecting text areas—text flow
  - Resizing text areas
  - Word count
- Text along a curve
  - Adjusting the left and right margin of text on a curve
  - Swapping sides of the line
- Editing text
  - Selecting the whole text object
  - Swap case
  - Smart Quotes
  - Entering special characters
  - Entering dummy text ('Lorem Ipsum')
- Spell checker
  - Language selection
  - User dictionary
- Find & Replace
- Synchronising Text using Soft Groups
- Tabs, Margins and Indents
  - Rulers
  - Margins and indents
  - Text along a curve
  - Tabs
  - Custom tabs
  - Custom tab types
  - How to creating hanging indents
- Repelling text objects
  - Making an object repel
- Anchored Graphics
  - Moving Anchored Objects
  - Viewing the anchor point
  - Soft Groups
  - Removing an anchor
- Embedded Graphics
- Text Styles
  - Text Styles InfoBar
  - Paragraph Style and Character Style
  - Updating Text Styles
  - Styles based on other styles
  - Creating new Styles
  - Removing Styles
  - Style Properties
- Applying text attributes
  - Changing the font size
  - Bold & Italic
  - Text Underlining
  - Justification or text alignment
  - Subscript & superscript
  - Indents and Outdents
  - Bulleted Lists
  - Numbered lists
  - Graphical Bulleted and Numbered Lists
  - Line spacing
  - Paragraph Spacing
- Text links
- Text inside groups for websites
- Copying text appearances
  - Applying attributes to whole text stories
- Copying/Pasting formatted text (RTF)
- Seeing fonts in use
- Document font embedding
- Website font embedding
- Browser text compatibility
The Fill Tool
- Creating a graduated color fill
- Fill types
- Fill Tool InfoBar
- Flat fills
- Linear fills
  - Moving the start or end handle of the fill
  - Changing the colors in a fill
- Circular fills
- Elliptical fills
- Bitmap fills
- Fractal fills
- Multi-stage color graduations
- The Fill Gallery
Transparency
- Applying flat transparency
- Applying graduated transparency
- Multi-stage graduated transparency
- Transparency types
- Enhance
  - Applying Enhance transparency
  - Photo editing with Enhance transparency
- Profile
- Bitmaps
- Handle/resolution
- Applying transparency to several objects
  - Mixing individual and group transparencies
Shadows
- The Shadow tool
- Applying a shadow
- Changing the shadow color or fill effect
- Removing a shadow
- Applying a shadow to several objects
- Selecting objects using the Shadow Tool
- Copying shadows onto other objects
Bevels
- The Bevel Tool
- Applying a bevel
- Applying a bevel to several objects
- Modifying a bevel
- Removing a bevel
Masks
- To Create A Mask
- Operating On The Mask Shapes
  - Moving the mask objects
- Operations That Use The Mask
- Copying Shapes To The Mask Layer
Web Properties Dialog
- Link Tab
- Website Tab
  - Website Link Colors
  - Web Presentations
- Page Tab
- Image Tab
- Mouse-over Tab
- Placeholder Tab
- Publish Tab
Live Effects
- Introduction
- Applying a Live Effect
Photo Handling
- Introduction
- Photo Objects
- Photo Groups
- Importing Photos
  - Replacing photos
  - Replacing multiple photos at once
  - Using photos as fills
  - Initial Photo size
- Zero-memory Copies
- The Bitmap Gallery
  - Filling shapes with a bitmap
  - Setting a Bitmap Transparency
  - Deleting images from the Gallery
  - Setting the page background to a bitmap
  - Save
  - Bitmap Properties
- Embedded JPEG files
  - Extracting the original JPEG
- Blending & Merging photos
- Photo display quality
- Saving & Exporting Photos
  - Example: To resize a photo and save as a new JPEG
- Photo Edit Attributes
- Editing the outline of Photos
- Cropping photos
- Cropping photos with a mask
- Cutting objects out of photos
- Screen capture utility
- Coloring photos
- Resize, rotate and position a photo within its frame
- Horizon Straighten
- Viewing a scaled photo at its full size
- Making a photo its full size
- Optimizing Photos and Bitmaps
- Converting objects or drawings to bitmaps
- Photo Documents
- Editing Photo Files
The Photo Tools
- Introduction
  - Photo Tool Benefits
- Using the Photo Tools
- Common photo functions
- Enhance Tool
- Clip Tool
- Photo Tool Notes
- The Red Eye Tool
- Content Aware Photo Resize
- Panorama Stitching
  - Optimizing images
  - Upgrades to Panorama Studio
3D Extrude Tool
- Introduction
- Extruding a shape
- Extrude Tool InfoBar
- Textures & Photos
- Extruding Text
- Copying 3D extrude attributes
- Putting shadows behind
Navigation Bars
- Using template Navbars
- Navigation bar properties dialog
- Site navigation bar
- Buttons & Menus
- Updating your Navbar across all pages
- On canvas editing
- Changing the font on Navbar buttons
- Importing & pasting Navbars
- Creating your own Navigation Bars
  - Button design restrictions
- Button margins
- Advanced - Editing a Navbar button design
  - Editing inside
  - Ungrouping, editing and regrouping
- Navbars with different first or last buttons
Website Presentations
- The Presentation toolbar
- Creating a presentation
- Managing presentation steps
- Adding new presentation pages
- Creating Number and Bullet lists
- Deleting presentation pages
- Linking to next/previous step
- Applying transitions to presentation step links
- Applying presentation step transitions
- Applying presentation page transitions
- Advanced presentation information
  - Steps versus layers
- Hosting remote presentation sessions
  - Hosting a presentation
  - Viewing a presentation
Website Widgets
- Widgets & placeholders – it’s all automatic!
- Widgets from the Designs Gallery
- Adding movie & animation files
- Widgets from other widget sites
- Resizing widgets
  - Turning off placeholder re-generation
- Adding widget placeholders manually
- More Information
- Adding a Google Map Manually
- Adding a Flash File
- Adding an Animated GIF
- Adding an MP4 or FLV movie
Page & Layer Gallery
- The Page & Layer Gallery
- Pages
- Layers
- Layer Operations
  - Layer Properties
- Special Layers
- Hiding Layers
- Solo Mode
- Locking Layers
- Show All & Unlock All
- Moving Objects Between Layers
Animations
- Introduction
  - What Flash can and cannot do
  - The 6 core types of animation
  - What you can't do with Web Designer MX Premium Flash
- Core Principles
- Your First Animation
- Exporting a Flash File
  - Previewing a Flash Object in Web Designer MX Premium
  - Inserting a Flash Object in Web Designer MX Premium
  - Inserting using a different web authoring tool
- Exporting animations as AVI
- The Animation Frame Gallery
  - Copying Objects
- Photos
  - Non-JPEG Bitmaps
  - Bitmap Quality
- Animation Frame Rate and Tween Steps
- Cropping, Clipping and Animation Size
- Animation Speed
- Animation smoothness
- Rotation
  - The Rotate command
- Groups
  - Group Transparency
- What Web Designer MX Premium features does Flash support?
  - Non-moving Objects
- Color Transforms—Animating Color Changes
- Transparency
- URLs in Flash
- Advanced Flash Commands
  - Accelerating and Decelerating
  - Stop and Goto Commands
  - Clickable Buttons & Mouse-over Effects
- Web Designer MX Premium Flash Animation Summary
- Creating animated GIFs
  - Opening an animation document
  - Creating the animation
  - Exporting the animation
- Animation properties
  - The Frame tab
  - Flash Options
  - GIF Options
  - Animation Loop and Speed
  - Preview in Browser
  - AVI Options
Importing and Exporting
- General notes on exporting and importing
- Import and Export Supported File Formats
  - Import formats
  - Export formats
- Importing files
- Exporting files
- JPEG, PNG and GIF export dialog overview
Printing
- Show print borders
- Selecting and setting up a printer
  - Properties button
  - Network button
- The print dialog box
- Print Options: Output tab
- Print Options: Print Layout tab
Customizing Web Designer Premium
- Changing the blank template document
- Options in the Utilities menu
- General tab
- Grid and Ruler tab
  - Grid and Ruler spacing
  - Coordinate Direction
- Mouse tab
  - Mouse button function
  - Magnetic Snap Radii
- Page Size tab
- Backups Tab
- Effects & Plug-ins tab
- Control bars
- Galleries
Menus and Keyboard Shortcuts
- Introduction
- File menu
- Edit menu
- Arrange menu
- Utilities menu
- Window menu
- Help menu
- Key shortcuts
More about Xara Group
- About Xara Group Ltd.
- Other Xara products
Legal
- Copyright
- Web Designer MX Premium end user license agreement
- Acknowledgements

Multiple pages in the document

A Web Designer MX Premium document can have multiple pages. Each page is exported to a separate

HTML page and so each document in Web Designer MX Premium corresponds to a website.

By default when you open or create a new web document, Web Designer Premium shows only one

page. Print documents however are displayed in multiple page view by default. Right click a page or its

pasteboard and select/deselect Multiple Page View

to toggle between display modes.

The current page

If you click a page in a multi-page document it will become the current page.

The current page is relevant when inserting, duplicating, or moving

pages as described in the following sections.

The current page in the document is shown by indicators on the page's

corners.

Inserting pages into your document

Right click a page and choose New Page or New double page spread

. A new blank page is inserted after the page.

Right click a page and choose Duplicate current page or Duplicate current double page spread

. A duplicate of the current page is inserted after the page.

The new page will be the

same as the original page,

including its size and

orientation, and will include

all its content so that you

can use it as a template for

new content.

You can also use the

Menu items under "Edit"

> "Pages"

In addition, the standard toolbar has a flyout bar which allows you to add, duplicate and delete pages

quickly.

Hold the mouse pointer over each icon in the bar to see a tooltip for each available operation. You can

add a new blank page, duplicate the current page or delete the current page.

Copying and pasting pages

You can copy and paste whole pages in the current document or paste pages to another document. This

copies the page dimensions, layers and other page attributes in addition to all the objects on the page.

To copy the current page, clear any current selection by pressing Esc or by clicking on an empty part of

the page or pasteboard. The status line says "No objects selected". Right click an empty part of a page

and choose Copy Page

(or press "Ctrl + C").

Page 232