MX

ManualsBrandsMagix Xara ManualsApplicationsXara Web Designer Premium

1141

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

Preview in Browser

You can select options suitable for the graphic and then load it into your browser so you can preview it:



Background options: Alter the background of the animated GIF to see which gives the best

result.



Additional information: The preview page will contain useful information such as potential

downloading times when placed in a web page.



Browser preview: Press this button to launch a preview in your web browser.

AVI Options

Options

: Select from a range of codecs you have installed

Quality

: Set the quality value of the AVI (up to 100%)

Key frame every ...:

Enable/disable the outputting of key frames and set the frequency.

Transparency

: Select to make the AVI background transparent.

Area to save: Setting the area to save to be Drawing

will create an AVI animation that is only as large as it needs to be ? i.e. the same as the outer bounds of

the animation. This can be useful if you don't need a specific page size.

Page 1146