MX

ManualsBrandsMagix Xara ManualsApplicationsXara Web Designer Premium

171

172

173

174

175

176

177

178

179

180

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

Back on the base (MouseOff) layer (click it in the Page & Layer Gallery to set this as current

layer) now select the text you want to trigger the pop-up, using the usual method (in the Text

tool). Then open the Web Properties dialog (right click and choose Web Properties or press

"Ctrl + Shift + W") and on the Mouse-over tab select the new layer from the Show pop-up

layer drop-down menu. Click OK.

Preview and test your mouseover effect.

If you want the pop-up to only appear when you click, then select the same option on the Link

tab of the same Web Properties dialog instead.

Note:

The mouseover layer appears and disappears as you move the mouse pointer on and off the triggering

object. If you use a click method to display the layer (from the Link dialog), then the layer is revealed by

a click on the object, and is hidden when you click anywhere else on the page.

Pop-up Photos

There is a second, easier, way of showing enlarged photos from thumbnails, that does not involve

creating new layers. See the Photo section

earlier in this chapter. This method is better for when you have large pop-up photos as the pop-up

photos are not loaded until the thumbnail image is clicked.

Page 171