www.xara.com 2 Contents Contents First Page 1 Purchasing and unlocking Xara Web Designer 10 9 What is new in Xara Web Designer 10? 9 Web Authoring & Publishing 10 Tools 13 Content 14 Other Minor Enhancements 15 Web Designer vs Web Designer Premium 16 Introduction 20 What makes Web Designer 10 so special? 20 A Website in a Few Steps 21 Getting Help 22 Document info 22 Support 22 Tooltips 25 About Xara Web Designer 10 25 Getting Started 26 Program Layout 26 Objects On The Page 29 Object Based Web Design 29 The Selector Tool 30 Website Toolbar 32 Creating a website 32 Previewing Your Website 33 Using Templates, Clipart & Widgets 34 Website Colors 36 Website Backgrounds 41 The Designs Gallery 42 The Online Content Catalog 43 Photos 45 Text 49 Page Size 53 Saving Your Work. Creating A Website 54 Stretchy Objects 55 Links, Buttons & Navigation Bars 55 Groups 58 Contents 3 Drawing Tools 60 Right-click menus 66 Layers, Mouseover (Rollover) & Pop-ups 66 Creating Buttons, Banners And Other Web Graphics 71 Publishing Your Website 72 Document handling 74 Starting a new document 74 Opening an existing document 74 The Xara Web Designer 10 window 75 Opening a second window 78 Changing the zoom value 79 Sliding the document within the window 81 Changing the page size 81 Multiple pages in the document 82 Saving the document 85 Support folders 85 Closing the document 86 Automatic Backups 87 On-screen grid 89 Rulers 90 View quality 91 The constrain key 91 Galleries 93 Undo and Redo 101 Object Handling 102 The Selector Tool 102 Moving objects 105 Removing objects from the document 108 Duplicating and cloning 108 Moving objects forward and backwards 109 Rotating objects 110 Scaling (resizing) objects 111 Flipping objects 114 Stretching and squashing objects 114 Skewing objects 115 Snapping 115 Guide Objects and Guidelines 119 Summary of shortcuts on the numeric keypad 121 Grouping and ungrouping objects 121 Soft Groups 123 Alignment 124 Copying Styles: Paste Attributes 127 Naming objects 128 Repeating Objects 129 4 Contents Footers and objects that stretch with the page 132 Drawing Lines and Shapes 135 Drawing a line or shape 135 The Straight Line & Arrow tool 135 The Shape Editor tool 136 Extending the line 138 Finishing the line 138 Adding a new point handle 139 Selecting multiple point handles 139 Deleting points 140 Moving point handles—Shape Editor Tool 140 Smoothing a line 141 Constraining the line 142 Changing curves 142 Changing a straight line to a curve (and vice versa) 144 Joining lines 144 Splitting a shape 145 Closing a shape 145 Changing the line width (thickness) 146 Shape Handling 147 Shape drawing tools 147 Changing the line width (thickness) 147 Creating rectangles and squares 148 Creating circles and ellipses 148 SmartShapes 149 Editing SmartShapes 150 Creating polygons and stars 151 Color Handling 155 The color line 155 Applying fill & line colors by drag & drop 157 Editing an object’s color 158 The Color Editor 159 Local colors and Theme colors 161 Theme color schemes 161 Editing theme colors WD 162 Importing named colors 162 Replacing colors 163 Normal colors, Tints, Shades and Linked colors 165 Text Handling 167 Introduction 167 Terminology 167 The Text Tool 168 Contents 5 The Font Menu 170 Simple text 171 Text in a column 172 Text areas 173 Text along a curve 175 Editing text 176 Spell checker 177 Synchronising Text using Soft Groups 178 Tabs, Margins and Indents 179 Repelling text objects 182 Anchored Graphics 184 Embedding Graphics 188 Text Styles 188 Applying text attributes 192 Text links 195 Text inside groups for websites 196 Copying text appearances 196 Copying/Pasting formatted text (RTF) 197 Seeing fonts in use 198 Font embedding 198 Browser text compatibility 198 The Fill Tool 200 Creating a graduated color fill 200 Fill types 200 Fill Tool InfoBar 201 Flat fills 204 Linear fills 204 Circular fills 205 Elliptical fills 205 Bitmap fills 205 Fractal fills 208 Multi-stage color graduations 209 The Fill Gallery 210 Transparency 212 Applying flat transparency 213 Applying graduated transparency 213 Applying transparency to several objects 214 Shadows 215 The Shadow tool 215 Applying a shadow 215 Changing the shadow color or fill effect 217 Removing a shadow 218 Applying a shadow to several objects 218 6 Contents Selecting objects using the Shadow Tool 218 Copying shadows onto other objects 219 Web Properties Dialog 220 Link Tab 221 Page Tab 228 Image Tab 230 Publish Tab 235 Mouse-over Tab 236 Placeholder Tab 237 Website Backgrounds 241 Template Backgrounds and re-coloring backgrounds 244 Fixed, non-scrolling backgrounds 244 Using photos as backgrounds 244 Offsetting the top of your page 245 Page and Pasteboard Background Layers 246 Advanced backgrounds 247 Website Publishing 249 Publishing to MAGIX Online World (MOW) 249 Publishing to an alternative web host 250 Include website in user gallery 253 Fast Publish (Only changed files) 254 Photo Handling 255 Introduction 255 Photo Objects 255 Importing Photos 256 Zero-memory Copies 258 The Bitmap Gallery 259 Embedded JPEG files 261 Photo display quality 262 Saving & Exporting Photos 262 Photo Edit Attributes 264 Editing the outline of Photos 265 Cropping photos 265 Coloring photos 266 Using Windows to capture screenshots 267 Resize, rotate and position a photo within its frame 267 Horizon Straighten 268 Viewing a scaled photo at its full size 269 Making a photo its full size 269 Optimizing Photos and Bitmaps 270 Converting objects or drawings to bitmaps 273 Photo Documents 273 Contents 7 Editing Photo Files 274 The Photo Tools 276 Introduction 276 Using the Photo Tools 277 Common photo functions 277 Enhance Tool 278 Clip Tool 281 Photo Tool Notes 283 Navigation Bars 285 Using template Navigation bars 285 Navigation bar properties dialog 286 Site navigation bar 287 Buttons & Menus 289 Updating your NavBar across all pages 292 On canvas editing 292 Changing the font on NavBar buttons 292 Importing & pasting NavBars 293 Creating your own Navigation Bars 293 Button margins 294 Advanced - Editing a Navbar button design 295 Navbars with different first or last buttons 296 Website Widgets 298 Widgets & placeholders – it’s all automatic! 298 Widgets from the Designs Gallery 299 Embedding movie, audio, animation and other files 300 Widgets from other widget sites 303 Resizing widgets 303 Adding widget placeholders manually 305 More Information 305 Page & Layer Gallery 306 The Page & Layer Gallery 306 Pages 309 Layers 309 Layer Operations 311 Special Layers 313 Hiding Layers 313 Solo Mode 313 Locking Layers 314 Show All & Unlock All 314 Moving Objects Between Layers 314 Importing and Exporting 316 8 Contents General notes on exporting and importing 316 Import and Export Supported File Formats 316 Importing files 318 Exporting files 321 JPEG, PNG and GIF export dialog overview 323 Customizing Web Designer 10 329 Changing the blank template document 329 Displaying your own icons in browser tabs: favicons 329 Options in the Utilities menu 330 General tab 330 Grid and Ruler tab 334 Mouse tab 335 Page Size tab 337 Backups Tab 338 Control bars 338 Menus and Keyboard Shortcuts 342 Introduction 342 File menu 342 Edit menu 345 Arrange menu 347 Insert Menu 349 Utilities menu 350 Share Menu 351 Window menu 353 Help menu 354 Key shortcuts 356 More about Xara Group 361 About Xara Group Ltd. 361 Other Xara products 362 Legal 364 Copyright 364 Xara Web Designer 10 end user license agreement 364 Acknowledgements 368 Index 369 Purchasing and unlocking Xara Web Designer 10 9 Purchasing and unlocking Xara Web Designer 10 When you run the downloaded trial version of Xara Web Designer 10 , the start screen will present you with three options. Check the option you require and you will be presented with further instructions. Enter the serial number Select this option if you have already purchased your copy of Web Designer and enter the serial number that you were given in the email confirming your purchase. Enter your email address so your copy can be registered (if you have already registered this will be ignored). Then click Register Online and Activate. Purchase the program. Select this option if you would like to purchase a copy of Web Designer 10. You will be given an serial number when you purchase. Continue the trial Select this option if you would like to continue using the free trial. To the right of this option it will tell you how many days of the trial you have left. Then click TEST THE PROGRAM NOW. Important note: Please keep a record of the email address and password you used when purchasing Xara Web Designer 10 since you may need them in the future, for example if you wish to upgrade. Other ways to purchase If you do not have the trial you can order directly on our website www.xara.com/ordering. and you will be given an serial number that can be used to unlock the trial later. Xara titles are great value for the money, but we offer further generous discounts to academic establishments on all our products. You can find details on our website. Affiliate Program Xara Web Designer 10 page templates include a small ‘Made with Xara Web Designer 10’ link at the bottom. You can easily delete this link if you don’t want it, but if you leave it on your published website you can earn commission from customers introduced to Xara through your links, or you can have that commission donated to charity. Select "HELP" > "AFFILIATE PROGRAM" to find out more or, if you are already an affiliate, to change your commission settings. What is new in Xara Web Designer 10? If you already own Web Designer 9 (or earlier) then you'll find plenty of exciting new features and content in Web Designer 10.