7.0

ManualsBrandsMagix Xara ManualsApplicationsXara Web Designer Premium

1051

Table Of Contents

Purchasing and unlocking Xara Web Designer 7 Premium
Support
What is new in Xara Web Designer 7 Premium?
Introduction
- Getting started with Xara Web Designer 7 Premium
- What makes Web Designer Premium so special?
- A Website In 6 Steps
Getting Help
- Document info
- ToolTips
- About Xara Web Designer 7 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
  - Widgets
- Website Colors
  - Coloring Shapes
  - Coloring Photos
  - Coloring Imported Clipart
  - 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
  - Photo Resolution - It's All Automatic!
- 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
  - Text Panels
  - Spell Checker
  - Embedded Fonts
- Page Size
  - Changing The Page Size of Templates
- Saving Your Work. Creating A Website
  - Automatic backups
- Stretchy Objects
- Groups
  - Converting Text To Be A Graphic
  - Soft Groups
  - Synchronized Text
  - Anchored Groups
  - Repeating Groups
- Repeating Objects
- Links, Buttons & Navigation Bars
  - Applying a transition to a link
  - Link to Anchor
  - Link to File
  - Changing Button Text
  - Mouseover (Rollover) Buttons
  - Adding New Buttons
  - Button Bars (NavBars)
- 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 transitions to popup layers
  - Pop-up Layers
  - Pop-up Photos
- Creating Buttons, Banners And Other Web Graphics
- Publishing Your Website
Document handling
- Starting Xara Web Designer 7 Premium
- Starting a new document
- Opening an existing document
- The Xara Web Designer 7 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 objects
  - Rotating using the mouse
  - 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
  - Headers/Footers
  - Stopping objects repeating
  - Deleting repeating objects
Drawing Lines and Shapes
- Drawing a line or shape
- The Freehand & Brush Tool
- Editing lines/shapes with the Freehand & Brush Tool
- The Straight Line & Arrow tool
- The Shape Editor tool
- Extending the line
- Finishing the line
- Adding a new point handle
- 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
- Changing a straight line to a curve (and vice versa)
- Joining lines
- Splitting a shape
- Changing the line width (thickness)
- Line Gallery
  - Change join type
  - Change line cap
Shape Handling
- Closing a shape
  - Closing a freehand shape
- Joining shapes
  - Breaking joined shapes
- Combining shapes
- Changing the line width (thickness)
- Variable width lines
- 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
  - Inline anchored objects
  - Soft Groups
  - Removing an anchor
- Applying text styles
  - Changing the font size
  - Bold & Italic
  - Text Underlining
  - Justification or text alignment
  - Indents and Outdents
  - Bulleted Lists
  - Numbered lists
  - Subscript & superscript
  - Line spacing
  - Paragraph Spacing
- Text links
- Text inside groups for websites
- Copying text styles
  - Applying attributes to whole text stories
- Copying/Pasting formatted text (RTF)
- Seeing fonts in use
- 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
- Conical fills
- Diamond fills
- Three-color fills
- Four-color fills
- Bitmap fills
- Fractal fills
- Multi-stage color graduations
- The Fill Gallery
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
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
  - Group transparency on blends
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
Photo Handling
- Introduction
- Photo Objects
- Photo Groups
- Importing Photos
  - Replacing photos
  - Replacing multiple photos at once
  - Using photos as fills
  - Initial Photo size
- Photo resolution
- 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
- Lossless vs. Lossy
- 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
- Integration with external Photo Editors
- 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
- Photo Documents
- Editing Photo Files
The Photo Tools
- Introduction
  - Photo Tool Benefits
  - Benefits explained in more detail
- 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
- 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
  - Viewing step contents in the Page & Layer Gallery
- Hosting remote presentation sessions
  - 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
Page & Layer Gallery
- The Page & Layer Gallery
- Pages
- Layers
- Layer Operations
  - Layer Properties
- Special Layers
- Objects
  - Shadows, Bevels & Contours
  - Finding Objects
- 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 Xara Web Designer 7 Premium Flash
- Core Principles
- Your First Animation
- Exporting a Flash File
  - Previewing a Flash Object in Xara Web Designer 7 Premium
  - Inserting a Flash Object in Xara Web Designer 7 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 Xara Web Designer 7 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
- Xara Web Designer 7 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
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
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
- The Designs Gallery
Customizing Web Designer Premium
- Changing the blank template document
- Displaying your own icons in browser tabs: favicons
- 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
- Control bars
Menus and Keyboard Shortcuts
- Introduction
- File menu
- Edit menu
- Arrange menu
- Utilities menu
- Window menu
More about Xara Group
- About Xara Group Ltd.
- Other Xara products
Legal
- Copyright
- Xara Web Designer 7 Premium end user license agreement
- Acknowledgements

Widgets from the Designs Gallery

The easiest way to add widgets to your site is to choose from the selection provided in the Designs

Gallery. Look under the "Widgets, Forms & More (Download)" category near the top of the gallery.

The widgets in the gallery are automatically updated from time to time, so that Xara can add, modify or

delete the selection of widgets available to you at any time. You will sometimes see the Designs Gallery

update when you first open it or when you first open a category folder.

To add a widget, just drag and drop it from the gallery onto your page. What happens next depends on

the type of widget. If it's a Web Editable Widget, a browser window will open to allow you to configure

the widget on the widget provider's website. If it's a Locally Editable Widget, a placeholder image will

appear on your page. Double click on the placeholder and a new document opens within Web Designer

Premium, which allows you to customize the widget.

Web Editable Widgets

When you drop one of these widgets onto your page from the Designs Gallery

, a window opens which is actually an Internet Explorer browser running inside Web Designer Premium.

This is similar to the preview window shown when you click the preview page and preview website

buttons on the web toolbar. However this widget window has some additional buttons at the bottom ?

more about those later.

Example widget insertion window, showing Google News gadget.

The browser window opens onto the website of the widget provider. Here you can find out more about

the widget if required, provide any data the widget requires and in most cases also customize its

appearance. Usually the widget website will also show you a preview of what your widget will look like,

complete with any customizations you've applied.

Inserting

Press the Help

button at the bottom of the window to see some information to guide you through the process of

configuring the widget and inserting it on your page. For most widgets, you need to get to the point where

the widget website offers you the HTML code that needs to be inserted into your web page. As soon as

this is visible, you can normally click the Insert button at the bottom of the window. Xara Web Designer

Page 1053