MX

ManualsBrandsMagix Xara ManualsApplicationsXara Web Designer Premium

161

162

163

164

165

166

167

168

169

170

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

Mouseover Effects

There are two types of mouseover effect you can control. Firstly the one used by mouseover buttons,

where any object with a web address can display an overlapping graphic object that appears on a layer

called MouseOver

. See below for more detail.

There is a more powerful mouseover ability where you can make the contents of any layer appear as

your mouseover, or click any object on your page. This pop-up layer can contain text, graphics, photos

or any combination of these things. More below.

The MouseOff and MouseOver Layers

All the main objects on your website are placed on the bottom layer, usually called MouseOff. Buttons

that highlight when you move the mouse over them on the web page have an alternative graphic on the

layer called MouseOver

If you open the Page & Layer Gallery

you can show or hide any layer by checking or un-checking the visibility icon (the eye symbol). This is a

way of showing what your MouseOver elements will look like on your page.

The current layer is always highlighted in the Page & Layer Gallery - the MouseOff layer in the above

diagram - and this is the layer that all new objects are drawn on. To place objects on any other layers

just click the required layer in the Page & Layer Gallery

, ensure the eye and the lock icon are open for that layer.

Note

: The MouseOver layer must always be above, that is on top of, the MouseOff layer, as shown in the

above example.

To edit the objects on a layer both the 'eye' and 'lock' icons have to be open - this means you can see

and edit the layer (as shown above in the MouseOff layer).

Mouseover (Rollover) Buttons

Almost all the ready-made buttons from the Designs Gallery

have a mouseover effect in Web Designer Premium. These are created by having two versions of each

button, the main one on the MouseOff layer and a 'highlight' one on the MouseOver layer.

Normally you do not need to know or care about this because both buttons behave as one - the changes

you make to one, such as editing the label text, are reflected on the other version. If you move, drag or

resize a button on the MouseOff layer, the other version on the MouseOver layer will change as well,

even if you can't see it. This is done using Soft Groups (Soft Groups, Soft Groups

Page 167