Magix Xara Web Designer Premium 7.0 Owners Manual 7
User Manual: magix Xara Web Designer Premium - 7.0 - Owners Manual Free User Guide for Magix Xara Web Designer Software, Manual
Open the PDF directly: View PDF .
Page Count: 1438
Download | |
Open PDF In Browser | View PDF |
Purchasing and unlocking Xara Web Designer 7 Premium When you run the downloaded trial version of Xara Web Designer 7 Premium, the start screen will present you with three options. Check the option you require and you will be presented with further instructions. Activate with serial number Select this option if you have already purchased your copy of Web Designer Premium 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 online. Select this option if you would like to purchase a copy of Web Designer Premium. You will be given an serial number when you purchase. Continue using 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 Continue trial . Important note : Please keep a record of the email address and password you used when purchasing Xara Web Designer 7 Premium 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/store and you will be given a 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 7 Premium page templates include a small 'Made with Xara' 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. Page 1 Support If you purchased Xara Web Designer 7 Premium from Xara you can contact Xara support and if you purchased from MAGIX you can contact MAGIX support, full details are given below. Xara Support http://support.xara .com Our own support site offers comprehensive FAQ page (frequently asked questions) which is constantly updated and available 24 hours, 7 days a week; always the best source for instant answers. You can also contact our technical support staff using the form on this page, if you cannot find the answer to your question! If you are an owner of a Xara product you can also submit a ticket to our support staff via the support site above, but please remember we can only respond during office hours! Please note TalkGraphics members cannot help with Xara account issues. If you can't find the answer in this manual, we highly recommend viewing the Web Designer movie tutorials . It is the ideal way to get to know Xara Web Designer 7 Premium and get an overview of its features, allowing you to make the most of the program. If you need some help using this program, here are some sources of information that may be of use: Program help - Choose "Xara Web Designer 7 Premium Help" from the "Help" menu to open Xara Web Designer 7 Premium Help (containing hundreds of pages of information). Status bar - Try reading the text on the status bar at the bottom of the main Xara Web Designer 7 Premium window. It always describes what actions are currently possible and what they will do (even during drags), and helps you learn to use the Xara Web Designer 7 Premium tools. It also gives details of what buttons and controls do as you move the pointer over them. See Status Bar for more details. ToolTips - If you hold the mouse pointer over a button or control for a short while, then small message appears telling you what it does. Menus - If you want to know what a menu item does, highlight it and press "F1". Dialog boxes - If you want to know what a dialog box does or how to use it, click Help. Movies - Use the menu option "Help" > "Movies" or click here to view a list of available movies. The TalkGraphics forums - Post your question in the popular, dedicated Xara forums at TalkGraphics.com (www.talkgraphics.com), where you can ask other Xara Web Designer 7 Premium users for advice or suggestions ? available 24x7. You can share tips and ideas, ask questions or offer solutions to other users. Xara Xone - Visit the Xara Xone (www.xaraxone.com) for a host of excellent Xara support resources. "The Outsider" newsletter (www.xara.com/outsider) Subscribe to our monthly newsletter "The Outsider" (with monthly tutorials and tips, offers, inspirational art, and more). Join the Xara community on Facebook or follow our news on Twitter. MAGIX Support Dear MAGIX customer, Our aim is to provide convenient, fast and solution-focused support at all times. To this end, we offer a wide range of services: Unlimited web support: Page 2 As a registered MAGIX customer, you have unlimited access to web support offered via the convenient MAGIX service portal on http://support.magix.net, including an intelligent help assistant, high-quality FAQs, patches and user reports that are constantly updated. The only requirement for use is product registration on www.xara.com The online community - on-the-spot support and a platform for exchange: MAGIX customers have free and unlimited access to the online community at www.magix.info, which includes approx. 120,000 members and offers the opportunity to ask members questions concerning MAGIX products as well as use the search function to search for specific topics or answers. In addition to questions & answers, the knowledge pool includes a glossary, video tutorials and a discussion forum. The multiple experts, found round-the-clock on www.magix.info guarantee quick answers, which sometimes come within minutes of a question being posted. Email support for MAGIX products: For every new MAGIX product you will receive, as of date purchase, 12 months of email based customer service. Premium email support: For priority support, or if you want the MAGIX support team to help with non-MAGIX related harware problems you can purchase an Premium email support ticket for USD 12.99 | CAD 13.99 | GBP 9.99 | AUD 18.99 | ZAR 120.00 | EUR 12.99 | SEK 119.00 | NOK 99.00 | DKK 99.00. Log in at http://support.magix.net and click on "Purchase access code", the ticket isfor a specific problem, and is valid until it is solved, it is not restricted to an email. Please note : To be able to use the Premium email support and free product email support via the Internet, you have to register your MAGIX product using the serial number provided. This can be found on the CD case of your installation CD or on the inside of the DVD box. Additional telephone service: Besides the large number of free customer service offers, we also offer a fee-based telephone customer service. Here you can find a summary of our technical support telephone numbers: http://support.magix.net / Mail (Europe): MAGIX Development Support, P.O. Box 20 09 14, 01194 Dresden, Germany Mail (North America): MAGIX Customer Service, 1105 Terminal Way #302, Reno, NV 89502, USA Please make sure you have the following information at hand: Program version Configuration details (operating system, processor, memory, hard drive, etc.), sound card configuration (type, driver) Information regarding other audio software installed MAGIX Sales Department You can reach the MAGIX Sales Department workdays for help with the following questions and problems: Orders Product consulting (pre-purchase) Upgrade requests Returns Europe Monday - Friday, 09:00-16:00 GMT Page 3 U.K.: 0203 3189218 Denmark: 699 18149 Sweden: 0852500858 Finland: 09 31581630 Norway: 0210 30665 North America 9 am to 4 pm EST Mon-Fri Phone: 1-305-722-5810 Page 4 What is new in Xara Web Designer 7 Premium? Web Authoring/Web Publishing New widgets. Make your websites eye-catching and dynamic with our new smart widgets that enable you to add an advanced selection of slick photo and text animations to your web pages without the need for coding knowledge. More widgets will be automatically downloaded and added to your gallery over time. Presentation websites. Create web-based 'slide-show' style presentations that your website visitors can step through using the keyboard arrow keys. Apply animated transition effects as each step and page is displayed. You can also easily remotely host a web meeting (a Webinar) to showcase your presentation, step by step and page by page, to a group of invited participants. New animated transition effects for layers and page links. Xara Web Designer 7 Premium makes it easy to add a wide range of animated effects to the layers and page links in your website. You can add animated transitions to any page link or pop-up layer in your web pages. Intelligent repeating headers / footers / watermarks. Xara Web Designer 7 Premium now automatically updates all occurrences of a repeating object when you edit it, so you don't have to manually update when you make a change. When one instance of a repeating object is edited, the updates appear instantly on all other instances of that object on other pages of the document. What's more, Xara Web Designer 7 Premium is smart about positioning, so objects in the top half of the page are positioned on other pages relative to the top of the page, and objects near the bottom are positioned relative to the bottom of the page, irrespective of page sizes. Add individuality to your web page browser tabs using 'favicons'. Xara Web Designer 7 Premium now supports the addition of favicons, allowing you to customize the tabs of your web pages by displaying a custom graphic, such as a logo, on the document browser tab. Sitemap support. You can now automatically generate a sitemap for submission to search engines to assist them with the crawling of your website when you publish it. Built-in preview window now includes navigation buttons. The navigation buttons in the top bar of the preview window allow you to move back or forward, just like in a web browser, and the Home button returns you to the page you started the preview on. Quickly preview your pages in the most popular web browsers. If you have Firefox, Internet Explorer, Opera, Safari or Chrome installed, you can preview exactly how your page will appear in each of these popular web browsers with one click. Preview your web page in full screen by clicking the new View Full Screen button in Xara Web Designer 7 Premium's built-in Preview window. When you next use preview, Xara Web Designer 7 Premium remembers the last used mode (normal, maximized or full screen). and displays subsequent previews in the same way. Explore your FTP web space from within Xara Web Designer 7 Premium. You can browse through and delete files and folders on your FTP server using Xara Web Designer 7 Premium's built-in Web Space Explorer. A new range of templates gives you a greater design choice when creating your websites in Xara Web Designer 7 Premium. Page 5 General Tools and Usability Enhancements Web Designer includes many customizable graphic templates, of course, and a good set of basic drawing tools, but Xara Web Designer 7 Premium now includes a range of additional graphic creation tools for those who wish to create their own graphics from scratch. These include the Freehand and Quickshape drawing tools, Shadow, Bevel and Mold tools, 3D extrude and feathering. Plus additional photo features such as red-eye removal and masking. Brand new 'magic snap' for object alignment. Xara Web Designer 7 Premium now provides 'magic' magnetic object snapping. As you drag an object, it 'snaps' to points and lines of interest nearby and indicates what it has snapped to by displaying dynamic snap lines and points. This makes it easy to align objects with each other, or with guidelines or the page center or edges. Enhanced ease of use. Xara Web Designer 7 Premium galleries now give faster access to the information you need: o A new default Page & Layer Gallery 'pages' mode displays a narrow list of page thumbnails ? for easy page selection and access. o Xara Web Designer 7 Premium initially displays an uncluttered single page view. Use the Page & Layer Gallery to quickly move to different pages, or switch to multi-page view by right clicking on the page and selecting the multi-page view option on the menu. A hierarchical arrangement of the Designs Gallery makes it far easier to find the template you're looking for at a glance. Improved embedding of graphics into flowing text. Creating anchored objects is now a one-click action and objects that you anchor in text can now also repel text, helping you create a wrap-around effect easily. Repel margins can also now be defined separately for the margin width and height. And anchored objects can be constrained to move vertically only, which is very useful where you have objects to the right or left of the text that need to move only up and down. New paste operations bring much more flexibility to pasting operations, allowing Paste position, Paste size, Paste replacing selection, Paste in current layer and Paste in place in current layer. A new straight line / arrowhead tool. This provides a really simple way to draw single-segment straight lines and a new way to control the arrow head and tail on any line. Tabbed document windows. Tabs at the top of the Xara Web Designer 7 Premium window show clearly which document you are currently viewing, the document type and whether there are unsaved changes. See at a glance which documents you have currently open and gain access to them by just clicking on the document tab. New gallery system supports fly-out galleries for instant viewing and flexible docking options. A new gallery bar gives instant access to all galleries, which now fly out as you hover the mouse pointer over a new gallery bar. It's easy to move galleries around the workspace, and you can pin and dock them wherever you want, either individually or in groups or 'stacks' on top of each other. Quick alignment of selected objects is made possible by the new right click menu option 'Align'. This enables you to directly align multiple objects horizontally and vertically, without having to open the alignment dialog. Solid, live shape drawing. When creating new shapes such as rectangles, ellipses and quickshapes you'll now see a solid filled shape as you drag across the page (instead of an outline). It's far more WYSIWYG, you'll see the correct fill and line color as you drag. This works even if you have a fat line. Easier control of graphic styles (attribute rules). There is a major change in the way that attributes (the appearance or 'style' of an object) are applied to a newly drawn object or line. Now a new object can take on the style of the last selected object, rather than the last drawn. It sounds like a small change, but is more intuitive and more powerful - for example you can copy Page 6 the style of any object by just selecting it then drawing a new object. Export animation documents as AVI files. Xara Web Designer 7 Premium now allows you to export any animation document as an AVI file, helping you create your own web-ready movie content. HTML 5 video. MP4 movie files added to your website will now play without Flash installed if the browser supports HTML5 video, so movies play on iOS devices such as iPhones and iPads. Other minor enhancements Greater control over clipping objects. A new option in the Website tab of the Website Properties dialog allows you to choose whether or not to clip objects to web page edges. If you do not clip, then any objects overlapping your page on to the pasteboard will be displayed in full, rather than cropped to the page border. In addition, any animated transitions you apply will now start from the browser window edge rather than the page border. Improved context sensitive menus offer direct access to useful actions. Right-click on objects, page or pasteboard for instant access to many useful operations relevant to the object. Clearer Infobar text rendering brings greater screen display quality and clarity to all Xara Web Designer 7 Premium toolbars, if ClearType text is enabled in your Windows' control panel. Add your website to Xara/MAGIX user galleries. When you publish your website, you can now choose to include a thumbnail of your site in existing user website galleries hosted by Xara/MAGIX. The Optimize photo dialog now includes the option to maintain the photo's current resolution. Prevent objects on the current layer from repelling text on other layers using the new 'Text repelling within layer' option in the Layer Properties dialog. This option also stops text on the current layer being repelled by objects on higher layers. This is useful for (and is set by default on) popup layers in web documents. Easily add header code to a page or website. Xara Web Designer 7 Premium now allows you to enter HTML code into the head of your web pages, as well as the body, giving you greater versatility to customize your website. You can easily add your own code (or code from a widget provider) into individual pages or all pages in your website. Also code entry for either the head or body is easier with a new larger pop-up code editing dialog. Page 7 Introduction It's evident that the vast majority of websites are of a graphical nature. The presentation of your website matters a great deal. You want a competent, professional looking website. We believe you should not have to use multiple different tools - graphics and HTML editing - to create your website. We believe you should have complete freedom to include any text, graphics, photos anywhere on the page. Creating websites should be like creating PDF files - you should not need to know anything about what happens 'under the hood'. You would not expect to edit the PDF file data directly. You should not need to know, or even see, the HTML that goes into creating your website. Getting started with Xara Web Designer 7 Premium If you click on the contents tab of this help guide, you will find a detailed description of each of the tools, galleries, menus, and control bars. You can also click on the index tab to search for a particular keyword. Getting started with Xara Web Designer 7 Premium Watch the demo movies Getting more help Program designed and developed by Xara Group Ltd. For more information about Xara and its products, click here. Alternatively, visit our web site: www.xara.com ©1995-2011 Xara Group Ltd. The Geotype font is provided by kind permission of Gary Bouton and remains © Gary Bouton. Take a look at www.theboutons.com Other fonts are provided by third parties who retain the copyright. In all cases, copyright is reserved by Xara or its licensors and is protected by international copyright law. The contents of this documentation and the associated Xara Web Designer 7 Premium software are the property of Xara Group Ltd and are copyrighted. Any reproduction in whole or in part is strictly prohibited. For additional copies of the software, please contact Xara Group Ltd. Xara Web Designer 7 Premium license terms . Xara is a trademark of Xara Group Ltd. Read all acknowledgements Last changed: 13/09/2011 14:35 Page 8 Getting started with Xara Web Designer 7 Premium If you click on the contents tab of this help guide, you will find a detailed description of each of the tools, galleries, menus, and control bars. You can also click on the index tab to search for a particular keyword. Getting started with Xara Web Designer 7 Premium Watch the demo movies Getting more help Program designed and developed by Xara Group Ltd. For more information about Xara and its products, click here. Alternatively, visit our web site: www.xara.com ©1995-2011 Xara Group Ltd. The Geotype font is provided by kind permission of Gary Bouton and remains © Gary Bouton. Take a look at www.theboutons.com Other fonts are provided by third parties who retain the copyright. In all cases, copyright is reserved by Xara or its licensors and is protected by international copyright law. The contents of this documentation and the associated Xara Web Designer 7 Premium software are the property of Xara Group Ltd and are copyrighted. Any reproduction in whole or in part is strictly prohibited. For additional copies of the software, please contact Xara Group Ltd. Xara Web Designer 7 Premium license terms . Xara is a trademark of Xara Group Ltd. Read all acknowledgements Last changed: 13/09/2011 14:35 Page 9 What makes Web Designer Premium so special? Web Designer Premium is unique in that it's the only truly free-form web design tool, that allows true freedom of web page design, with 'anything anywhere' yet produces completely accurate WYSIWYG results. In other words you can position text, graphics, photos anywhere on the page, any size, any angle, overlaid, with transparency...and Web Designer Premium will produce a pixel accurate perfect working HTML page. Web Designer Premium can do things that are regarded as near impossible with other web-authoring software, such as repel text around irregular shapes and photos. It includes advanced vector graphics tools to draw anything from simple shapes to complex company logos and graphics. It includes automatic optimisation of graphics (not only producing optimized resolution images, but automatically detecting repeating elements across the website so producing faster, more optimized websites). It supports CSS layers with advanced features such as transparency, even graduated transparency, mouse-over effects and more. It creates cross-browser, cross-platform totally XHTML compatible HTML websites. On top of all this Web Designer Premium is perhaps the easiest, simplest to learn web authoring tool available. Web Designer Premium is aimed at graphic designers who do not want to learn HTML or scripting languages. For graphics designers it's the perfect 'rapid website prototyping' tool. It's also aimed at beginners who just want the easiest possible way of create professional looking websites. Web Designer Premium provides no programming tools, no script editing and doesn't even provide an 'HTML view'. Our design philosophy is this: You do not need to know the PDF programming language in order to produce PDF files. So neither should you have to know anything about HTML or Javascript in order to create great websites. Page 10 A Website In 6 Steps For those with short attention spans (that's most of us), you can discover the main benefits of Web Designer Premium by just following the instructions in the initial opening document when you start Web Designer Premium. This is both a basic introduction and an actual website you can experiment with. You can also find this example document in the Designs Gallery . Click the Designs Gallery tab, open the Introduction category and just double click on the first document. Here you can find out how to change your website colors, edit your text, drag and drop photos, move objects around the page and more. Undo Remember you can undo any change you make using the Undo button or "Ctrl + Z". If you hold the button down you can race back through all your actions, right back to the beginning. Page 11 Getting Help If you need some help using this program, see Support . Document info "File" > "Document info" displays information about the selected document such as its size and any fonts used. This is a good way to find out if you are missing a required font that could prevent the document from displaying correctly. Anything you type into the comment field is stored as part of the file. This comment is displayed whenever you display the document info dialog box. Page 12 Document info "File" > "Document info" displays information about the selected document such as its size and any fonts used. This is a good way to find out if you are missing a required font that could prevent the document from displaying correctly. Anything you type into the comment field is stored as part of the file. This comment is displayed whenever you display the document info dialog box. Page 13 ToolTips When you move over a button, the toolTip tells you the function of the button. About Xara Web Designer 7 Premium Choose "Help" > "About Xara Web Designer 7 Premium" . This displays general information about the program. If you contact Xara support, you may be asked for this information. Page 14 About Xara Web Designer 7 Premium Choose "Help" > "About Xara Web Designer 7 Premium" . This displays general information about the program. If you contact Xara support, you may be asked for this information. Page 15 Getting Started This section gives an overview of the main functionality of Web Designer Premium. Later sections go into more detail about each tool. In this chapter Program Layout Objects On The Page Object Based Web Design The Selector Tool Website Toolbar Creating a website Previewing Your Website Using Templates, Clipart & Widgets Website Colors Photos Text Page Size Saving Your Work. Creating A Website Stretchy Objects Groups Repeating Objects Links, Buttons & Navigation Bars Drawing Tools Right-click menus Layers, Mouseover (Rollover) & Pop-ups Creating Buttons, Banners And Other Web Graphics Publishing Your Website Page 16 Program Layout Info Bar - changes with each tool Zoom Preview Website Designs Gallery (Galleries bar) Page & Layer Gallery (Galleries bar) Selector Tool Photo Editing Tool Drawing Tools Text Tool Shadow Tool Tabs for all open documents - icon identifies document type. Color Line Note : All Web Designer Premium infobars now have improved text rendering for easier viewing, if you have ClearType text enabled in your Windows Control Panel. There are four buttons in the top bar that relate to website functions. Three of these have flyout bars which are shown when you move the mouse pointer over them, revealing more web function buttons. Export and preview web page/website Page 17 Link properties Website options Export Move your mouse pointer over each button in the flyout bar to see a tooltip describing the button. There are two ways to create a new website. Either by starting with a pre-designed template and then customizing this with your own text, photos and color scheme. Or by creating a website from scratch, placing all the required elements, text, graphics and photos on the page where you require. Note: By default Web Designer Premium opens a new document showing just one page. To view all the pages in your website document, right click a page and choose Multiple Page View . You can now scroll the Web Designer Premium window up and down to view all the pages in the document. Zooming / Scrolling / Pushing your page These common operations are made very easy: To Zoom in or out, hold "Ctrl" and use the mouse-wheel To push the page, press your mouse-wheel and push (yes it's a button as well) To scroll use the mouse-wheel (or the scroll bars of course) Web documents are displayed in single page mode by default and print documents in multi-page view mode. Switch between display modes by right clicking on the page or pasteboard and selecting or deselecting Multiple Page View from the drop-down menu. An example of multiple page view is shown to the left. You can drag and drop items between pages. When you make document-wide Theme color changes, you can see how the changes affect all pages. The current page is marked with 4 corner brackets. In this example you can see some items have been placed on the pasteboard area beside the pages. These are not exported as part of your website. The pasteboard area is useful as a place to keep temporary or working graphics, photos or other objects. Flyout Bars Some tools on the main toolbar are grouped together under a single icon. These icons have a small triangle indicator in the bottom right corner and when you move the mouse pointer over one of these icons a flyout bar appears. The bar holds the other tool icons that are in this group. Simply move the mouse pointer over each one to see a tooltip, and click to select the tool you want. If you select a modal tool from a flyout bar, that tool becomes the primary tool for that group. So you'll then see its icon highlighted on the main toolbar. There are also some flyout bars on the toolbar at the top of the window. Again these are used to group together closely related operations under a single icon. This makes them conveniently accessible while not taking up too much space on the bar. Page 18 See the Customizing chapter in the pdf manual for more information on flyout bars. Page 19 Zooming / Scrolling / Pushing your page These common operations are made very easy: To Zoom in or out, hold "Ctrl" and use the mouse-wheel To push the page, press your mouse-wheel and push (yes it's a button as well) To scroll use the mouse-wheel (or the scroll bars of course) Web documents are displayed in single page mode by default and print documents in multi-page view mode. Switch between display modes by right clicking on the page or pasteboard and selecting or deselecting Multiple Page View from the drop-down menu. An example of multiple page view is shown to the left. You can drag and drop items between pages. When you make document-wide Theme color changes, you can see how the changes affect all pages. The current page is marked with 4 corner brackets. In this example you can see some items have been placed on the pasteboard area beside the pages. These are not exported as part of your website. The pasteboard area is useful as a place to keep temporary or working graphics, photos or other objects. Flyout Bars Some tools on the main toolbar are grouped together under a single icon. These icons have a small triangle indicator in the bottom right corner and when you move the mouse pointer over one of these icons a flyout bar appears. The bar holds the other tool icons that are in this group. Simply move the mouse pointer over each one to see a tooltip, and click to select the tool you want. If you select a modal tool from a flyout bar, that tool becomes the primary tool for that group. So you'll then see its icon highlighted on the main toolbar. There are also some flyout bars on the toolbar at the top of the window. Again these are used to group together closely related operations under a single icon. This makes them conveniently accessible while not taking up too much space on the bar. See the Customizing chapter in the pdf manual for more information on flyout bars. Page 20 Flyout Bars Some tools on the main toolbar are grouped together under a single icon. These icons have a small triangle indicator in the bottom right corner and when you move the mouse pointer over one of these icons a flyout bar appears. The bar holds the other tool icons that are in this group. Simply move the mouse pointer over each one to see a tooltip, and click to select the tool you want. If you select a modal tool from a flyout bar, that tool becomes the primary tool for that group. So you'll then see its icon highlighted on the main toolbar. There are also some flyout bars on the toolbar at the top of the window. Again these are used to group together closely related operations under a single icon. This makes them conveniently accessible while not taking up too much space on the bar. See the Customizing chapter in the pdf manual for more information on flyout bars. Page 21 Objects On The Page Whether you customize a template or create your own graphics from scratch, you can rotate, resize and position anything on the page, anywhere you like. You can easily resize the page to be any required size and add new web pages as required. Certain features, such as changing color schemes, work across all pages simultaneously. These are the basic types of page element: Text: Using the Text Tool you can create anything from single word headings to columns of text or even blocks of text that flow from one block into another. You can also create bulleted or numbered lists. The Text Tool InfoBar provides controls over the font, size, line spacing and more. You can resize text either by using the Selector Tool or by selecting the text in the usual fashion and choosing alternative point or pixel sizes. Perhaps surprisingly you can even rotate text by any angle, and by using Repel text under (right click an object to see this option) you can automatically flow text around objects on the page, such as photos. Graphics: Any type of logo, heading and most buttons that appear on your website are graphics. Web Designer Premium is a vector graphics program which means you can edit the shape, rotate and resize your graphic objects with no loss of quality (unlike pixel photo editing tools such as Photoshop). And although there is no vector graphics standard for web pages (for websites all graphics have to be either JPG, GIF or PNG formats) Web Designer Premium creates the correct format and resolution automatically. For example, if you want to create a colored panel to place behind your text, you'd do this by drawing a rectangle or rounded rectangle object on the page, and placing this behind your text. When you save your website, this is automatically converted into a PNG graphic image of the correct resolution. Photos: There are few websites that do not contain photos of some sort. Xara Web Designer 7 Premium has a great range of photo editing tools. You can drag and drop photos directly from your camera or File Explorer window onto the page, rotate, enhance, crop, and Web Designer Premium automatically generates the correct resolution JPG image. Replacing existing photos in templates is as easy as drag and drop - and you can alter the size and angle of photos 'inside' their frame very easily. You can easily create clickable photo thumbnails that pop-up an enlarged version and optionally include gallery controls that allow your visitors to browse your photos or view an automatic slideshow. Placeholders: These are graphic objects on the page which represent the size and position of dynamic "widgets" such as a Flash animations, movies, or forms. When your site is exported the placeholder graphic is replaced by the code required to make the widget work and so the working widget appears at the same position on your page. See the Website Widgets chapter in the pdf manual for details. Page 22 Object Based Web Design All the types of elements described above are collectively referred to as objects. One of the unique benefits of Web Designer Premium is that you have complete freedom to place any object anywhere on the page, and your website will faithfully reproduce this. The Selector Tool can be used to select any object on the page, and to move (just drag it), resize and rotate the objects. You can adjust the stacking order (that is whether an object appears in front or behind others on the page) by right clicking and choosing Arrange or using the Arrange menu options. With the Selector Tool you can resize objects by dragging on the corner resize handles. You can rotate any object by dragging just inside the corner selection handles. And although websites do not support rotated text, Web Designer Premium knows to automatically create the appropriate graphic image so the resulting page will always look exactly right. To add some text to your website, select the Text Tool and click anywhere on the page and start typing. You can also create text columns, by clicking and dragging horizontally in the Text Tool, or text areas by dragging diagonally. See the Text section in the pdf manual for more details and the Chapter Text Handling for a complete reference of text functions of Xara Web Designer 7 Premium. You can use the drawing tools to create rectangles, rounded rectangles, circles and ellipses, and just about any shape you like using the Shape Editor Tool. See the Drawing tools section in the pdf manual for more detail. Stacking Order All objects on the page are placed one on top of another. The most recently drawn or created object is always on top, that is, in front of any others. You can adjust the stacking position by right clicking and choosing Arrange or using the Arrange menu options. For example, when you draw a new rectangle it always appears to cover all the objects behind it. By right clicking and choosing Arrange or pressing "Ctrl + B" (or the menu "Arrange" > "Put to Back ") the object is moved behind everything else. Similarly "Ctrl + F" brings any selected object to the top, that is, in front of everything else. There is an added complication: layers. All objects are collected into named layers, and each layer can be turned on or off to show or hide everything on that layer. See the Layers section in the pdf manual for more detail. The Page & Layer Gallery allows you to easily see and adjust the stacking order of objects and layers. Objects are listed in order from front to back in the gallery. See the Page & Layer Gallery chapter in the pdf manual for details. Page 23 Stacking Order All objects on the page are placed one on top of another. The most recently drawn or created object is always on top, that is, in front of any others. You can adjust the stacking position by right clicking and choosing Arrange or using the Arrange menu options. For example, when you draw a new rectangle it always appears to cover all the objects behind it. By right clicking and choosing Arrange or pressing "Ctrl + B" (or the menu "Arrange" > "Put to Back ") the object is moved behind everything else. Similarly "Ctrl + F" brings any selected object to the top, that is, in front of everything else. There is an added complication: layers. All objects are collected into named layers, and each layer can be turned on or off to show or hide everything on that layer. See the Layers section in the pdf manual for more detail. The Page & Layer Gallery allows you to easily see and adjust the stacking order of objects and layers. Objects are listed in order from front to back in the gallery. See the Page & Layer Gallery chapter in the pdf manual for details. Page 24 The Selector Tool This tool is a general purpose tool that allows you to select, move, resize and rotate all objects on your web page. You can do all these things by just dragging on the objects on the page, or on the selection handles around the object, or you can enter precise numeric values. The selected object is shown with 4 or 8 handles around the outside, and the status line at the bottom of the screen also tells you what is selected. Drag on any corner handle to resize an object. Drag just inside the corner handles (shown left) to rotate. Rectangles and rounded rectangles have eight handles so you can stretch them as well as resize. Other objects, such as groups, blocks of text, photos show only 4 handles and can't be stretched (because they would distort). Nudging Objects The arrow keys can be used to nudge the selected object, one pixel at a time. If you hold "Shift", it nudges objects 10 pixels at a time. Rotating Objects There are two ways to rotate an object. Either click on the object a second time, so the selection handles change to show rotation handles, which you can then drag on to rotate the object. Or, when it's showing the square selection handles, move the mouse pointer just inside the corner handles until you see the mouse pointer change to a rotation indicator - you can then also drag to rotate the selected object. Unusually you can rotate just about anything in Web Designer Premium, including photos, headings, even blocks of text. Since web browsers can't display text at an angle, Web Designer Premium will automatically convert any rotated text into graphics when exporting as a website. InfoBar When an object is selected, the InfoBar - just above your document - shows all the relevant controls for the current tool. This bar changes depending on which tool is selected. This is the InfoBar in the Selector Tool : The InfoBar, just above your document, shows controls for the selected tool. You can enter numeric values into any field. e.g. to reduce the size of an object by 20% you can enter 80% into the W field (which is a % size). The little padlock selects whether both the width and height change together. Copying Objects You can use the usual "Edit" > "Copy" ("Ctrl + C") and "Edit" > "Paste" ("Ctrl + V") options or Page 25 right click an object and choose Copy , but a really quick way to copy any item is drag on it with the right mouse button. You can also copy and paste a page anywhere in your document from the current document or another document ? see Copying and pasting pages. Page 26 Nudging Objects The arrow keys can be used to nudge the selected object, one pixel at a time. If you hold "Shift", it nudges objects 10 pixels at a time. Rotating Objects There are two ways to rotate an object. Either click on the object a second time, so the selection handles change to show rotation handles, which you can then drag on to rotate the object. Or, when it's showing the square selection handles, move the mouse pointer just inside the corner handles until you see the mouse pointer change to a rotation indicator - you can then also drag to rotate the selected object. Unusually you can rotate just about anything in Web Designer Premium, including photos, headings, even blocks of text. Since web browsers can't display text at an angle, Web Designer Premium will automatically convert any rotated text into graphics when exporting as a website. InfoBar When an object is selected, the InfoBar - just above your document - shows all the relevant controls for the current tool. This bar changes depending on which tool is selected. This is the InfoBar in the Selector Tool : The InfoBar, just above your document, shows controls for the selected tool. You can enter numeric values into any field. e.g. to reduce the size of an object by 20% you can enter 80% into the W field (which is a % size). The little padlock selects whether both the width and height change together. Copying Objects You can use the usual "Edit" > "Copy" ("Ctrl + C") and "Edit" > "Paste" ("Ctrl + V") options or right click an object and choose Copy , but a really quick way to copy any item is drag on it with the right mouse button. You can also copy and paste a page anywhere in your document from the current document or another document ? see Copying and pasting pages. Page 27 Rotating Objects There are two ways to rotate an object. Either click on the object a second time, so the selection handles change to show rotation handles, which you can then drag on to rotate the object. Or, when it's showing the square selection handles, move the mouse pointer just inside the corner handles until you see the mouse pointer change to a rotation indicator - you can then also drag to rotate the selected object. Unusually you can rotate just about anything in Web Designer Premium, including photos, headings, even blocks of text. Since web browsers can't display text at an angle, Web Designer Premium will automatically convert any rotated text into graphics when exporting as a website. InfoBar When an object is selected, the InfoBar - just above your document - shows all the relevant controls for the current tool. This bar changes depending on which tool is selected. This is the InfoBar in the Selector Tool : The InfoBar, just above your document, shows controls for the selected tool. You can enter numeric values into any field. e.g. to reduce the size of an object by 20% you can enter 80% into the W field (which is a % size). The little padlock selects whether both the width and height change together. Copying Objects You can use the usual "Edit" > "Copy" ("Ctrl + C") and "Edit" > "Paste" ("Ctrl + V") options or right click an object and choose Copy , but a really quick way to copy any item is drag on it with the right mouse button. You can also copy and paste a page anywhere in your document from the current document or another document ? see Copying and pasting pages. Page 28 InfoBar When an object is selected, the InfoBar - just above your document - shows all the relevant controls for the current tool. This bar changes depending on which tool is selected. This is the InfoBar in the Selector Tool : The InfoBar, just above your document, shows controls for the selected tool. You can enter numeric values into any field. e.g. to reduce the size of an object by 20% you can enter 80% into the W field (which is a % size). The little padlock selects whether both the width and height change together. Copying Objects You can use the usual "Edit" > "Copy" ("Ctrl + C") and "Edit" > "Paste" ("Ctrl + V") options or right click an object and choose Copy , but a really quick way to copy any item is drag on it with the right mouse button. You can also copy and paste a page anywhere in your document from the current document or another document ? see Copying and pasting pages. Page 29 Copying Objects You can use the usual "Edit" > "Copy" ("Ctrl + C") and "Edit" > "Paste" ("Ctrl + V") options or right click an object and choose Copy , but a really quick way to copy any item is drag on it with the right mouse button. You can also copy and paste a page anywhere in your document from the current document or another document ? see Copying and pasting pages. Page 30 Website Toolbar The Website Toolbar at the top of the Xara Web Designer 7 Premium provides convenient access to the main web functions you'll use regularly. Preview Link Website Options Export Move your mouse pointer over each button in the flyout bar to see a tooltip describing the button. Page 31 Creating a website There are two ways to create a new website. Either by starting with a pre-designed template and then customizing this with your own text, photos and color scheme. Or by creating a website from scratch, placing all the required elements, text, graphics, photos and placeholders on the page as you require. Placeholders are graphic objects on the page which are substituted in the final website for elements such as Flash animations, YouTube videos, Interactive Maps, HTML snippets and 'widgets' of all kinds. See later sections in the correspondending chapter of the pdf manual for more information on placeholders. Page 32 Previewing Your Website When creating your website in Web Designer Premium, your working document shows an accurate static preview, but to check the behavior of pop-ups, mouseover effects and Flash and other widgets it's necessary to use true Browser Preview. There are two preview options, in the flyout bar on the web toolbar. Preview website exports all the pages of your site and then brings up the preview window. So all the pages and links in your site should be working. The navigation buttons in the top bar of the preview window allow you move back or forward, just like in a web browser, and the Home button returns you to the page you started the preview on. Preview page exports and previews only the current page. So it's useful if you have a large site which takes some time to export as a whole. You can just quickly preview the page you are working on, without exporting the rest of the site. You can preview your website or web page in full screen mode by clicking the View Full Screen button at the top right of the preview window (press "Esc" to exit or "F11" to enter and exit full screen mode). When you close the preview window and next reopen it, Web Designer Premium displays the last mode you chose for the window, i.e., normal, maximised or full screen. If you've not yet exported your site, these previews export to a temporary folder on your computer. Once you've exported, the same export location is used each time you preview, so your exported site is continually updated as you preview. Choose your preview browser Although this internal preview uses a simplified version of the Internet Explorer browser by default, you can choose one of the five most popular browser types to view your page or website from the preview window. To preview your website in your favorite web browser, click one of the following from the bar at the top of the preview window: Note : These buttons are only enabled if you have installed the browsers on your PC. Previews your page or website in Google Chrome Previews your page or website in Mozilla Firefox Previews your page or website in Internet Explorer Previews your page or website in Opera Previews your page or website in Safari When you click on one of the above buttons, the browser opens in the page that you are currently viewing in the preview window. If you want to preview your pages in a browser other than these types, you can right click on the exported .htm file and select Open With... Page 33 , or you can just drag and drop the file onto an open browser window. Once you have exported then each time you click the Preview buttons, the export is updated as well, and so it's just necessary to click the Reload button in your browser (or press "F5"). Page 34 Using Templates, Clipart & Widgets Open the Designs Gallery by clicking the Designs Gallery tab in the Galleries bar (or use "File" > "New from Designs Gallery "). This shows folders containing collections of website designs and associated graphic files that each follow a specific theme. There are also folders of widgets, like forms, e-commerce facilities, web gadgets, and many other features. Browse through the folders and double click to open any file as a new document. Each theme section has a collection of alternative page layouts and some other useful page elements such as buttons or expanding text panels. Each theme generally also contains a complete website template and several 'color schemes'. You can change your entire site to a different color scheme by just dragging and dropping the scheme from the gallery onto your page, or by just double-clicking on it. Some of the folders in the gallery (most notably the widget folders) are downloaded automatically from Xara's servers when you are online and you open the gallery. Therefore the selection of folders and the items available in the folders will change periodically. Check back regularly to see the latest updates. Adding New Pages To Your Website You can drag any template design from the Designs Gallery onto your page. If this is a page template, it will add a new page to your website, after first asking if you want to match any color changes. If you drag a clipart item such as a button, heading or photo object, this gets added onto the page where you dropped it, and again you will be asked if you want to match any color changes you've made. In addition to themed web page sections, the Designs Gallery also has folders containing additional button designs, banners, headings, photo objects and more. Just drag the required design from the gallery onto your page. You will be asked whether you want the graphic to match the colors of your website or not. If you choose not to you can still edit the colors of the imported graphic - see below. Your imported graphic is just another object on the page, and can be re-positioned, resized and rotated using the Selector Tool as usual. To add a new page of the same design, the easiest way is to right click the page and choose Duplicate current page or use the Duplicate current page button on the standard toolbar. This replicates the current page below. You can then just delete or edit the elements as required. This has the advantage of keeping the same navigation structure. Or you can copy and paste an existing page in the same or another document. Right-click an empty part of a page and choose Copy Page. In the destination document right-click a page and choose Paste > Page (or press "Ctrl + V"). The page on the clipboard is added as a new page immediately following the current page. The pasted page adopts the page size of the document it's pasted into (as long as the All pages in document the same checkbox is enabled in File > Page Options ). Page layers and attributes and all the objects on the page are also pasted. You can add a new blank page by right clicking and choosing New Page 35 Page or use the Insert blank page button in the 'page' flyout menu bar. You can delete pages by right clicking and choosing Delete current page or click the Delete current page button in the 'page' flyout menu bar. Page 36 Adding New Pages To Your Website You can drag any template design from the Designs Gallery onto your page. If this is a page template, it will add a new page to your website, after first asking if you want to match any color changes. If you drag a clipart item such as a button, heading or photo object, this gets added onto the page where you dropped it, and again you will be asked if you want to match any color changes you've made. In addition to themed web page sections, the Designs Gallery also has folders containing additional button designs, banners, headings, photo objects and more. Just drag the required design from the gallery onto your page. You will be asked whether you want the graphic to match the colors of your website or not. If you choose not to you can still edit the colors of the imported graphic - see below. Your imported graphic is just another object on the page, and can be re-positioned, resized and rotated using the Selector Tool as usual. To add a new page of the same design, the easiest way is to right click the page and choose Duplicate current page or use the Duplicate current page button on the standard toolbar. This replicates the current page below. You can then just delete or edit the elements as required. This has the advantage of keeping the same navigation structure. Or you can copy and paste an existing page in the same or another document. Right-click an empty part of a page and choose Copy Page. In the destination document right-click a page and choose Paste > Page (or press "Ctrl + V"). The page on the clipboard is added as a new page immediately following the current page. The pasted page adopts the page size of the document it's pasted into (as long as the All pages in document the same checkbox is enabled in File > Page Options ). Page layers and attributes and all the objects on the page are also pasted. You can add a new blank page by right clicking and choosing New Page or use the Insert blank page button in the 'page' flyout menu bar. You can delete pages by right clicking and choosing Delete current page or click the Delete current page button in the 'page' flyout menu bar. Page 37 Embedding Movies, Flash And Other Widgets You can embed a wide variety of interactive widgets easily; YouTube™ videos, Google Maps, Flash files or any HTML snippet. This is done using placeholders, which are objects (simple rectangles or photos) that have an associated piece of HTML or Flash file that is substituted for the placeholder when saving your website. For full details on widgets and placeholders, see the Website Widgets Chapter in the pdf manual. The Designs Gallery contains a frequently updated selection of widgets from a variety of providers. Simply drag and drop these onto your web page. A web browser window appears which takes you to the widget providers site, where you can choose and customize the widget. When you're done you click the Insert button at the bottom of the browser window and the widget is inserted into your page with an automatically generated preview image. It's that easy! Or you can find widget sites yourself and just as easily add the code to your site. Flash Clipart Xara Web Designer 7 Premium includes the ability to create Flash animations from scratch (see the Flash Animations section in the pdf manual), but also includes a range of Flash templates you can customize. Flash templates cannot be dragged onto the page directly, but have to be opened as a separate animation document, where you can customize it as required, and then save the Flash (.swf) file to your local disk. Then use "File" > "Import" or drag and drop the .swf file onto your web page. A placeholder image is automatically rendered for you and this will appear on your page. Preview your page to see your working Flash animation. Alternatively you can create your own placeholder object (e.g., a rectangle) and use the Placeholder tab of the Web Properties dialog to associate it with your Flash file. Widgets Some of the items in the Designs Gallery are dynamic widgets that you can add to your website quickly and easily. When you drag one of these onto your page, a browser window opens onto a widget website which allows you to configure the widget. Therefore you must be online to use widgets. Once you've finished configuring your widget click the Insert button at the bottom of the browser window. A placeholder image is automatically generated which is a static snapshot of what your widget will look like when it's viewed in your website. The widget won't work on the page in Xara Web Designer 7 Premium - you just see the preview image. Simply preview your page to see the widget in action! If you find other interesting widgets out there on the Internet, normally the widget provider will give you a piece of HTML code to copy and paste into your website. With Xara Web Designer 7 Premium this is very easy. All you need to do is go into the Selector Tool and then paste the code into your page. Xara Web Designer 7 Premium will detect that you've pasted HTML code and will render a placeholder image for you automatically, which will appear on your page after a few seconds. The code is already attached to the placeholder, so just preview your page to see your widget working! Alternatively you can paste widget code directly into the head of your page if necessary. Click the Placeholder tab in the Web Properties dialog and click the HTML code (head) button, then paste your code into the HTML code (head) dialog. For more information see the Widgets Chapter in the pdf manual. Page 38 Flash Clipart Xara Web Designer 7 Premium includes the ability to create Flash animations from scratch (see the Flash Animations section in the pdf manual), but also includes a range of Flash templates you can customize. Flash templates cannot be dragged onto the page directly, but have to be opened as a separate animation document, where you can customize it as required, and then save the Flash (.swf) file to your local disk. Then use "File" > "Import" or drag and drop the .swf file onto your web page. A placeholder image is automatically rendered for you and this will appear on your page. Preview your page to see your working Flash animation. Alternatively you can create your own placeholder object (e.g., a rectangle) and use the Placeholder tab of the Web Properties dialog to associate it with your Flash file. Widgets Some of the items in the Designs Gallery are dynamic widgets that you can add to your website quickly and easily. When you drag one of these onto your page, a browser window opens onto a widget website which allows you to configure the widget. Therefore you must be online to use widgets. Once you've finished configuring your widget click the Insert button at the bottom of the browser window. A placeholder image is automatically generated which is a static snapshot of what your widget will look like when it's viewed in your website. The widget won't work on the page in Xara Web Designer 7 Premium - you just see the preview image. Simply preview your page to see the widget in action! If you find other interesting widgets out there on the Internet, normally the widget provider will give you a piece of HTML code to copy and paste into your website. With Xara Web Designer 7 Premium this is very easy. All you need to do is go into the Selector Tool and then paste the code into your page. Xara Web Designer 7 Premium will detect that you've pasted HTML code and will render a placeholder image for you automatically, which will appear on your page after a few seconds. The code is already attached to the placeholder, so just preview your page to see your widget working! Alternatively you can paste widget code directly into the head of your page if necessary. Click the Placeholder tab in the Web Properties dialog and click the HTML code (head) button, then paste your code into the HTML code (head) dialog. For more information see the Widgets Chapter in the pdf manual. Page 39 Widgets Some of the items in the Designs Gallery are dynamic widgets that you can add to your website quickly and easily. When you drag one of these onto your page, a browser window opens onto a widget website which allows you to configure the widget. Therefore you must be online to use widgets. Once you've finished configuring your widget click the Insert button at the bottom of the browser window. A placeholder image is automatically generated which is a static snapshot of what your widget will look like when it's viewed in your website. The widget won't work on the page in Xara Web Designer 7 Premium - you just see the preview image. Simply preview your page to see the widget in action! If you find other interesting widgets out there on the Internet, normally the widget provider will give you a piece of HTML code to copy and paste into your website. With Xara Web Designer 7 Premium this is very easy. All you need to do is go into the Selector Tool and then paste the code into your page. Xara Web Designer 7 Premium will detect that you've pasted HTML code and will render a placeholder image for you automatically, which will appear on your page after a few seconds. The code is already attached to the placeholder, so just preview your page to see your widget working! Alternatively you can paste widget code directly into the head of your page if necessary. Click the Placeholder tab in the Web Properties dialog and click the HTML code (head) button, then paste your code into the HTML code (head) dialog. For more information see the Widgets Chapter in the pdf manual. Page 40 Website Colors All the templates use a small set of theme colors, and various shades of those theme colors. The easiest way to re-color your site is to use one of the alternative color schemes provided with each web theme in the Designs Gallery . Just drop a scheme onto your page to change the color of the whole site, or double-click on it. Or you can edit each of the theme colors individually yourself. These are called 'Named Colors' and appear on the left side of the Color Line along the bottom of the window. Current Outline and Fill Color Color Editor Eye dropper color picker 'No color' patch. Named 'Theme' Colors and Linked Colors Fixed palette of standard colors Hold pointer over a color to see its name Status line. Shows what is selected, and provides hints Simply click on any of the Named Colors and select the Edit option (if you hover the mouse pointer over the color you will see a tooltip name). When editing a color you can drag the eye dropper to pick colors off screen, even from other open windows Select the color to edit: Fill color/Line color of the selected object or any of the named theme colors Click the label icon to create a Named Color Click to show extended color controls Previous color Actual color Drag here to select any shade of the selected hue Drag here to select any hue The Color Editor provides an easy way of choosing any color. Click the Extended Controls to enter RGB values. Page 41 Note that when you change a Theme Color in this way, all the related shades used throughout the document will change as well. Coloring Shapes You can fill any drawn shape with a color, either by dragging the color from the Color Line and dropping it on to the shape, or by first selecting the object and then clicking on the Color Line. Alternatively right click the shape and choose Fill Color or click the small Color Editor icon (or press "Ctrl + E") to display the Color Editor, where you can set any color you like. You can give drawn objects a graduated color fill using the Fill Tool. Coloring Photos If you try to color a photo it turns it into a 'contoned' photo. For example, to make any photo black and white, right click and choose "Contone" > "Make black and white" or select it and click on the white color patch on the end of the Color Line. You can set the light or dark color to be any two colors, not just white and black - right click, choose "Contone" > "Light " and click a color in the Color Editor. Note: If the photo is inside a group, as many of the photo objects in the templates or clipart are, then you will have to select the photo inside the group first. You can do this by holding "Ctrl" down when clicking on the object in the Selector Tool. Another way of directly selecting the photo is to click on it in the Photo Tool . Coloring Imported Clipart When you import a clipart graphic by dragging from the Design Gallery, using the "File" > "Import" option, or dragging a .web or .xar file onto your page, you will usually be asked whether you want to match the colors. If you select not to, then any named colors used in this graphic will be added to the Color Line. Clicking on any color on the Color Line will give you the option to edit the color. Page Background Color Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. And on top of this is drawn the web page elements, that usually consists of various colored panels. On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc Page 42 Background Color Panel Color Theme 1 & 2 colors Setting the page background color When you open a new blank page ("File" > "New " >) the page defaults to being white. This is the background on which you place all the elements of your website. If you drag a color from the Color Line over the page, and drop it, it will set the page background to that color. In the Web Browser this background color is shown over the whole area of the window background. However you can also make the page background one color, as described above, and then set the area around the page to a different color. This area around the page is referred to as the pasteboard. Just drop a color onto the pasteboard to set its color and set the page color as described above. Now when you preview your page you'll see the browser window background color is set to the pasteboard color Page 43 and you can see the page rectangle with its own color. You can use the color editor to edit these colors. Right click on the page and choose Change page background to bring up the color editor, then you can edit the page color. To edit the pasteboard background color, right click on the pasteboard and choose Change background color . To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery, scroll to the photo you just loaded, click on it to select it, and then click the Background button on the gallery. Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above Page 44 your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Page 45 Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Page 46 Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 47 Coloring Shapes You can fill any drawn shape with a color, either by dragging the color from the Color Line and dropping it on to the shape, or by first selecting the object and then clicking on the Color Line. Alternatively right click the shape and choose Fill Color or click the small Color Editor icon (or press "Ctrl + E") to display the Color Editor, where you can set any color you like. You can give drawn objects a graduated color fill using the Fill Tool. Coloring Photos If you try to color a photo it turns it into a 'contoned' photo. For example, to make any photo black and white, right click and choose "Contone" > "Make black and white" or select it and click on the white color patch on the end of the Color Line. You can set the light or dark color to be any two colors, not just white and black - right click, choose "Contone" > "Light " and click a color in the Color Editor. Note: If the photo is inside a group, as many of the photo objects in the templates or clipart are, then you will have to select the photo inside the group first. You can do this by holding "Ctrl" down when clicking on the object in the Selector Tool. Another way of directly selecting the photo is to click on it in the Photo Tool . Coloring Imported Clipart When you import a clipart graphic by dragging from the Design Gallery, using the "File" > "Import" option, or dragging a .web or .xar file onto your page, you will usually be asked whether you want to match the colors. If you select not to, then any named colors used in this graphic will be added to the Color Line. Clicking on any color on the Color Line will give you the option to edit the color. Page Background Color Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. And on top of this is drawn the web page elements, that usually consists of various colored panels. On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc Page 48 Background Color Panel Color Theme 1 & 2 colors Setting the page background color When you open a new blank page ("File" > "New " >) the page defaults to being white. This is the background on which you place all the elements of your website. If you drag a color from the Color Line over the page, and drop it, it will set the page background to that color. In the Web Browser this background color is shown over the whole area of the window background. However you can also make the page background one color, as described above, and then set the area around the page to a different color. This area around the page is referred to as the pasteboard. Just drop a color onto the pasteboard to set its color and set the page color as described above. Now when you preview your page you'll see the browser window background color is set to the pasteboard color Page 49 and you can see the page rectangle with its own color. You can use the color editor to edit these colors. Right click on the page and choose Change page background to bring up the color editor, then you can edit the page color. To edit the pasteboard background color, right click on the pasteboard and choose Change background color . To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery, scroll to the photo you just loaded, click on it to select it, and then click the Background button on the gallery. Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above Page 50 your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Page 51 Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Page 52 Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 53 Coloring Photos If you try to color a photo it turns it into a 'contoned' photo. For example, to make any photo black and white, right click and choose "Contone" > "Make black and white" or select it and click on the white color patch on the end of the Color Line. You can set the light or dark color to be any two colors, not just white and black - right click, choose "Contone" > "Light " and click a color in the Color Editor. Note: If the photo is inside a group, as many of the photo objects in the templates or clipart are, then you will have to select the photo inside the group first. You can do this by holding "Ctrl" down when clicking on the object in the Selector Tool. Another way of directly selecting the photo is to click on it in the Photo Tool . Coloring Imported Clipart When you import a clipart graphic by dragging from the Design Gallery, using the "File" > "Import" option, or dragging a .web or .xar file onto your page, you will usually be asked whether you want to match the colors. If you select not to, then any named colors used in this graphic will be added to the Color Line. Clicking on any color on the Color Line will give you the option to edit the color. Page Background Color Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. And on top of this is drawn the web page elements, that usually consists of various colored panels. On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc Background Color Panel Color Theme 1 & 2 colors Setting the page background color Page 54 When you open a new blank page ("File" > "New " >) the page defaults to being white. This is the background on which you place all the elements of your website. If you drag a color from the Color Line over the page, and drop it, it will set the page background to that color. In the Web Browser this background color is shown over the whole area of the window background. However you can also make the page background one color, as described above, and then set the area around the page to a different color. This area around the page is referred to as the pasteboard. Just drop a color onto the pasteboard to set its color and set the page color as described above. Now when you preview your page you'll see the browser window background color is set to the pasteboard color and you can see the page rectangle with its own color. You can use the color editor to edit these colors. Right click on the page and choose Change page background to bring up the color editor, then you can edit the page color. To edit the pasteboard background color, right click on the pasteboard and choose Change background color . Page 55 To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery, scroll to the photo you just loaded, click on it to select it, and then click the Background button on the gallery. Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) Page 56 across the page. By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: Page 57 This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 58 Coloring Imported Clipart When you import a clipart graphic by dragging from the Design Gallery, using the "File" > "Import" option, or dragging a .web or .xar file onto your page, you will usually be asked whether you want to match the colors. If you select not to, then any named colors used in this graphic will be added to the Color Line. Clicking on any color on the Color Line will give you the option to edit the color. Page Background Color Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. And on top of this is drawn the web page elements, that usually consists of various colored panels. On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc Background Color Panel Color Theme 1 & 2 colors Setting the page background color When you open a new blank page ("File" > "New " >) the page defaults to being white. This is the background on which you place all the elements of your website. If you drag a color from the Color Line over the page, and drop it, it will set the page background to that color. In the Web Browser this background color is shown over the whole area of the window background. Page 59 However you can also make the page background one color, as described above, and then set the area around the page to a different color. This area around the page is referred to as the pasteboard. Just drop a color onto the pasteboard to set its color and set the page color as described above. Now when you preview your page you'll see the browser window background color is set to the pasteboard color and you can see the page rectangle with its own color. You can use the color editor to edit these colors. Right click on the page and choose Change page background to bring up the color editor, then you can edit the page color. To edit the pasteboard background color, right click on the pasteboard and choose Change background color . To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery, scroll to the photo you just loaded, click on it to select it, and then click the Background button on the gallery. Page 60 Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. Page 61 By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the Page 62 color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 63 Page Background Color Most of the page designs in the Design Gallery have two types of background. A wide page background that extends across the background of the whole browser window. And on top of this is drawn the web page elements, that usually consists of various colored panels. On the Color Line there is usually one color named 'Background Color', another 'Panel Color', and by editing these you can control the various background colors. The other colors used are typically Theme Color 1, 2 etc Background Color Panel Color Theme 1 & 2 colors Setting the page background color When you open a new blank page ("File" > "New " >) the page defaults to being white. This is the background on which you place all the elements of your website. If you drag a color from the Color Line over the page, and drop it, it will set the page background to that color. In the Web Browser this background color is shown over the whole area of the window background. Page 64 However you can also make the page background one color, as described above, and then set the area around the page to a different color. This area around the page is referred to as the pasteboard. Just drop a color onto the pasteboard to set its color and set the page color as described above. Now when you preview your page you'll see the browser window background color is set to the pasteboard color and you can see the page rectangle with its own color. You can use the color editor to edit these colors. Right click on the page and choose Change page background to bring up the color editor, then you can edit the page color. To edit the pasteboard background color, right click on the pasteboard and choose Change background color . To set a repeating background texture, drag the photo or bitmap onto your document. Open the Bitmap Gallery, scroll to the photo you just loaded, click on it to select it, and then click the Background button on the gallery. Page 65 Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. Page 66 By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the Page 67 color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 68 Page Background Layer When you set the page background color by dropping a color onto the page as described above, this actually adds another layer to your document, which you can see if you open the Page & Layer Gallery. It's called the Page background layer . This layer is normally locked, so you can't select and edit its contents. But you can unlock it in the Page & Layer Gallery in order to perform some limited editing of it, to customize your page background. Just click on the lock symbol next to the "Page background" layer to unlock it. Now if you click on the page background, you'll see a rectangle becomes selected (see status bar). This rectangle covers your whole page - it's used to set the page color. You can now do some limited editing of this rectangle, such as give it a graduated fill using the Fill Tool, or give it rounded corners using the Rectangle Tool . Note : You must also set the pasteboard color too, before you can give your page anything other than a flat color. Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. Page 69 By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the Page 70 color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 71 Offsetting the top of your page Normally if you just set the page and pasteboard to different colors, when you preview you'll see that the page extends right to the top of the browser window. You can't see any of the pasteboard color above your page. However you can add an offset so that there is some space above your page in the web browser. To add an offset, you change the page origin. Normally the page origin is set to be the top left corner of your page. By moving the origin up 20 pixels, for example, you add a 20 pixel margin to the top of your page when it's viewed in a web browser. You can change the origin in two ways. The easiest way is to open the "Utilities" > "Options" dialog (or right click a page and choose Page Options), go to the Grid & Ruler tab and increase the value of the Y coordinate of the origin point. This is normally set to the vertical size of your page, so just increase it by the margin size you would like. So for example if your page is 700 pixels tall, change the Y value of the origin coordinate from 700 to 720, in order to add a 20 pixel offset. Alternatively you can set the origin point interactively. Turn rulers on by right clicking and choosing " Show Grid/Guides" > "Show Rulers" or by choosing Show rulers from the Window menu ("Ctrl + L"). Then click and drag on the crosshairs button, which is located where the horizontal and vertical rulers join, at the top left of the canvas. Now you are dragging around the origin position, so position it the appropriate distance vertically above the top left corner of your page. Changing the horizontal position of the origin has no effect on the horizontal positioning of your page, so this should be left unchanged. Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be Page 72 very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Page 73 Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 74 Advanced backgrounds Web browsers do not allow a graduated color background over the whole visible window (i.e. as a real HTML background), but they do support repeating, tiled, bitmaps as backgrounds. So you can use this to create a full-window graduated background, by creating a bitmap, which is then tiled (repeated) across the page. By creating a long thin strip as on the left, when set as a background,you get a graduated color background across the whole page. To create this effect, follow these steps; 1. Draw a tall thin rectangle. This needs to be as tall as any user is likely to make their browser window so it doesn't repeat vertically. A value of 1000 pixels or more is recommended, which is much taller than your page. You may need to zoom out to draw one large enough. It should be very narrow. 2. Make sure your rectangle has no outline: Click it in the Selector Tool and set it to have no outline. Click on the 'no color' cross-hatch patch on the Color Line (or select 'none' from the Line Width drop down menu on the top button bar). 3. Ensure the rectangle is a few whole pixels wide, and then ensure it is on exact whole pixel X and Y coordinates: In the Selector Tool select the rectangle, edit the Width (W) value, press "Enter", then edit the X and Y positions to be whole numbers. 4. Using the Fill Tool, give it a graduated color fill as required: Just drag on the rectangle. Make sure it's graduated top to bottom by adjusting the fill arrow if necessarily. Click the Export as PNG icon .Once exported drag 5. Export the rectangle as a PNG image. it back onto the page from your File Explorer. 6. Open the Bitmap Gallery, scroll down to see the graphic you just loaded (it will be a very thin, almost invisible thumbnail in the gallery), and select it (click on it in the gallery) and then click the Background button on the Bitmap Gallery. You can now delete the original rectangle from the page. Note : This will only work across the whole browser window background if you haven't given the pasteboard background its own color. If you have set the pasteboard background, then the graduated fill will only be applied to the background of the page area. Page 75 Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 76 Linked shades You can create colors that are lighter or darker shades of another color, so that when you alter the 'parent' color, all the lighter and darker shades change to match the new hue. For example a graduated color shade on a button, such as this: This is a simple rounded rectangle with a graduated color fill created with the Fill Tool. In the Fill Tool you can click on the either end of the arrow to set the color. If you create the main green color as a named color, and then make a lighter or darker shade of the color, as a linked shade, when you now edit the named color the shades change as well, so you get simple re-coloring of complex shaded objects. To create a linked shade, open the extra controls in the Color Editor and select the 'Normal Color' drop-down menu and choose 'Shade of another color '. Click this button to reveal the extra controls. You can now select any light or darker shade of the parent color. The cross marks the parent color. Select Shade from this drop-down list and then the parent color. You can also create a Linked Shade that appears on the Color Line (so you can easily apply it to other objects). When you select to create a new Named Color you can choose to make this a linked 'Shade of another color'. Page 77 Photos You can replace any photo by dragging and dropping it from your File Explorer onto any photo in Web Designer Premium. If you drop it onto the background then it is imported and placed on the page where you dropped it. All imported photos are shown as 500 pixels wide, but you can of course change this to be any size in the usual way with the Selector Tool . Drag and drop your photo over any existing picture to replace it. Drop onto the background to import as a new photo When you replace an existing photo, the Fill Tool is selected and a pair of fill arrows are shown at right angles on the photo. This is because the photo is really a fill inside a shape. You can drag on the picture to re-position it, or drag on the ends of the fill arrows to resize and rotate the picture inside its outline shape. Drag on photo to re-position inside its frame. Drag on end of arrows to resize and rotate. Replacing Multiple Photos Page 78 Some templates in the Designs Gallery , particularly photo album styles, can have multiple photos replaced at once. Select multiple photo files using Windows File Explorer ("Ctrl + click" to add more files to the selection, or "Shift + click" to select a range of files). Then drag and drop them onto the page in Xara Web Designer 7 Premium. Photos are replaced one by one from the top of the page downwards. This makes it easy to rapidly fill a photo album page with your own photos! If you drag in more photos than can be fitted on the current page, Xara Web Designer 7 Premium will look at any following pages in the document, to see if they can accommodate some or all of the remaining photos. If that still doesn't exhaust the supply of photos imported, Xara Web Designer 7 Premium will duplicate the current page as many times as necessary in order to accommodate all the photos. This powerful mechanism means that you can create a multi-page photo album website rapidly, by loading an album template from the Designs Gallery and then dragging in your photos. Importing Large Photos When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. The Photo Tool The Photo Tool provides a range of ways to enhance and crop any photo. To crop a photo, just drag across the photo while in the Enhance Photo Tool . You can adjust the crop edges by dragging on the crop handles around the outside of the photo. Or use the Clip Tool for more control over crops. See the section on Photo Handling for background information on the advanced way in which Xara Web Designer 7 Premium handles photos, and the section on the Photo Tool to find out how to use the Photo Tool . Thumbnail Photos With Pop-ups You can very easily create small thumbnail photos (just resize it to be tiny), that when clicked will show an enlarged version. Simply resize your photo to be small, the usual way using the Selector Tool . Select the small thumbnail photo, and select the Pop-up photo option in the Link tab of the Web Properties dialog (click the Link button in the Web Toolbar Page 79 ). Click the Settings button next to the popup photo option, to change to the Image tab of the Web properties dialog. There you can change how your pop-up appears. One option allows you to place a title above each pop-up photo. Set the title for each photo using the Title field. You can also optionally show a caption below each popup photo. Just set the Image Caption (Alt text) for the thumbnail on the same dialog. See the popup photo section of the Web Properties Dialog chapter for full details of the options available. In Internet Explorer the Image caption ("ALT"-Text) will be also shown in a tooltip pop-up as you mouse-over the image. To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set Show pop-up text to be Click to Enlarge Page 80 . Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 81 Replacing Multiple Photos Some templates in the Designs Gallery , particularly photo album styles, can have multiple photos replaced at once. Select multiple photo files using Windows File Explorer ("Ctrl + click" to add more files to the selection, or "Shift + click" to select a range of files). Then drag and drop them onto the page in Xara Web Designer 7 Premium. Photos are replaced one by one from the top of the page downwards. This makes it easy to rapidly fill a photo album page with your own photos! If you drag in more photos than can be fitted on the current page, Xara Web Designer 7 Premium will look at any following pages in the document, to see if they can accommodate some or all of the remaining photos. If that still doesn't exhaust the supply of photos imported, Xara Web Designer 7 Premium will duplicate the current page as many times as necessary in order to accommodate all the photos. This powerful mechanism means that you can create a multi-page photo album website rapidly, by loading an album template from the Designs Gallery and then dragging in your photos. Importing Large Photos When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. The Photo Tool The Photo Tool provides a range of ways to enhance and crop any photo. To crop a photo, just drag across the photo while in the Enhance Photo Tool . You can adjust the crop edges by dragging on the crop handles around the outside of the photo. Or use the Clip Tool for more control over crops. See the section on Photo Handling for background information on the advanced way in which Xara Web Designer 7 Premium handles photos, and the section on the Photo Tool to find out how to use the Photo Tool . Thumbnail Photos With Pop-ups You can very easily create small thumbnail photos (just resize it to be tiny), that when clicked will show an enlarged version. Simply resize your photo to be small, the usual way using the Selector Tool . Page 82 Select the small thumbnail photo, and select the Pop-up photo option in the Link tab of the Web Properties dialog (click the Link button in the Web Toolbar ). Click the Settings button next to the popup photo option, to change to the Image tab of the Web properties dialog. There you can change how your pop-up appears. One option allows you to place a title above each pop-up photo. Set the title for each photo using the Title field. You can also optionally show a caption below each popup photo. Just set the Image Caption (Alt text) for the thumbnail on the same dialog. See the popup photo section of the Web Properties Dialog chapter for full details of the options available. Page 83 In Internet Explorer the Image caption ("ALT"-Text) will be also shown in a tooltip pop-up as you mouse-over the image. To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set Show pop-up text to be Click to Enlarge . Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 84 Importing Large Photos When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. The Photo Tool The Photo Tool provides a range of ways to enhance and crop any photo. To crop a photo, just drag across the photo while in the Enhance Photo Tool . You can adjust the crop edges by dragging on the crop handles around the outside of the photo. Or use the Clip Tool for more control over crops. See the section on Photo Handling for background information on the advanced way in which Xara Web Designer 7 Premium handles photos, and the section on the Photo Tool to find out how to use the Photo Tool . Thumbnail Photos With Pop-ups You can very easily create small thumbnail photos (just resize it to be tiny), that when clicked will show an enlarged version. Simply resize your photo to be small, the usual way using the Selector Tool . Select the small thumbnail photo, and select the Pop-up photo option in the Link tab of the Web Properties dialog (click the Link button in the Web Toolbar ). Page 85 Click the Settings button next to the popup photo option, to change to the Image tab of the Web properties dialog. There you can change how your pop-up appears. One option allows you to place a title above each pop-up photo. Set the title for each photo using the Title field. You can also optionally show a caption below each popup photo. Just set the Image Caption (Alt text) for the thumbnail on the same dialog. See the popup photo section of the Web Properties Dialog chapter for full details of the options available. In Internet Explorer the Image caption ("ALT"-Text) will be also shown in a tooltip pop-up as you mouse-over the image. To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set Show pop-up text to be Click to Enlarge . Page 86 Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 87 The Photo Tool The Photo Tool provides a range of ways to enhance and crop any photo. To crop a photo, just drag across the photo while in the Enhance Photo Tool . You can adjust the crop edges by dragging on the crop handles around the outside of the photo. Or use the Clip Tool for more control over crops. See the section on Photo Handling for background information on the advanced way in which Xara Web Designer 7 Premium handles photos, and the section on the Photo Tool to find out how to use the Photo Tool . Thumbnail Photos With Pop-ups You can very easily create small thumbnail photos (just resize it to be tiny), that when clicked will show an enlarged version. Simply resize your photo to be small, the usual way using the Selector Tool . Select the small thumbnail photo, and select the Pop-up photo option in the Link tab of the Web Properties dialog (click the Link button in the Web Toolbar ). Click the Settings button next to the popup photo option, to change to the Image tab of the Web properties Page 88 dialog. There you can change how your pop-up appears. One option allows you to place a title above each pop-up photo. Set the title for each photo using the Title field. You can also optionally show a caption below each popup photo. Just set the Image Caption (Alt text) for the thumbnail on the same dialog. See the popup photo section of the Web Properties Dialog chapter for full details of the options available. In Internet Explorer the Image caption ("ALT"-Text) will be also shown in a tooltip pop-up as you mouse-over the image. To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set Show pop-up text to be Click to Enlarge . Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Page 89 Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 90 Thumbnail Photos With Pop-ups You can very easily create small thumbnail photos (just resize it to be tiny), that when clicked will show an enlarged version. Simply resize your photo to be small, the usual way using the Selector Tool . Select the small thumbnail photo, and select the Pop-up photo option in the Link tab of the Web Properties dialog (click the Link button in the Web Toolbar ). Click the Settings button next to the popup photo option, to change to the Image tab of the Web properties dialog. Page 91 There you can change how your pop-up appears. One option allows you to place a title above each pop-up photo. Set the title for each photo using the Title field. You can also optionally show a caption below each popup photo. Just set the Image Caption (Alt text) for the thumbnail on the same dialog. See the popup photo section of the Web Properties Dialog chapter for full details of the options available. In Internet Explorer the Image caption ("ALT"-Text) will be also shown in a tooltip pop-up as you mouse-over the image. To show different text, typically something like 'Click to enlarge' as you move over the thumbnail image, go to the Mouse-over tab and set Show pop-up text to be Click to Enlarge . Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 92 Photo Resolution - It's All Automatic! When importing high resolution photos (anything above 1920 pixels either wide or high) into a web document, Xara Web Designer 7 Premium automatically resizes the photo down to HD screen size without asking you if you want to import a lower resolution version. For a web document, even at the reduced size, there should be more than enough resolution in your photos for high quality results on your website, so it's rarely necessary to import digital camera images at full resolution for web use. However, if you are importing a large photo into a print or animation document, Xara Web Designer 7 Premium asks you if you want to import a lower resolution version of your photos. If your document is to include many photos, you may want to choose this reduced resolution option. Otherwise with large photos you may find that your saved design file is much bigger than it needs to be (because it contains a copy of each of your photos) and you may not have enough memory in your computer to load, edit and export your documents. If you're not sure whether you will need the full resolution photo you can import the original photo and then optimize it down later. To optimize a photo, right click on it and choose the Optimize option from the context menu. Or you can optimize all the JPEG photos in your document at once, using "Utilities" > "Optimize all JPEGs" . Web Designer Premium always stores the full resolution image (unless you chose to import reduced resolution images when asked during import, as mentioned above). This means you can resize or crop your image as required with no loss of quality. Web Designer Premium automatically converts all photos into the correct resolution JPEG image when saving your website. You do not need to bother about dpi, image size, pixels or anything like that. What you see in Web Designer Premium (at 100% zoom) is exactly what will be produced on your web page. If you want to size a photo, or any object, to a specific size, just enter the required size into the Selector Tool InfoBar width or height fields. When you drop a photo on the page (assuming you're not replacing an existing photo), it's sized to be 500 pixels wide. But if you want this to be exactly 200 pixels wide, just enter 200pix into the W size field of the Selector Tool . You can enter it in any unit e.g. entering 2in will make it 2 inches wide. Page 93 Text You can edit the text by selecting the Text Tool and clicking on the text. You have all the usual word processing facilities, and can paste text from the system clipboard. Double click will select a word, triple click will select a whole line - which can be useful for selecting all the text in a button. As usual the InfoBar provides a wide range of controls for this tool. Alternatively you can right click within text and choose Advanced Text Properties . The font menu displays a list of fonts and is split into three sections. The top section shows fonts already used in the document, the next section shows web safe fonts, and finally the lower section shows all fonts installed on your computer. The three sections of the font menu. In this example Courier New is selected showing the available bold and italic variants. Not all fonts have such variants. The font menu offers live font selection. As you traverse the menu, the selected text changes font allowing you to immediately preview what the font will look like in the document. Font Size The font size field shows the font size in pixels, as this is the most reliable method of setting the text size for use in a web browser. But you can enter any size in points (or any other unit for that matter), by entering a value with pt after it (for point) e.g. 72pt or 1in and this will get converted to the correct pixel size. Web Safe Fonts Only a small set of fonts can be used safely for the main text of a website - only those fonts that you know will exist on the computer of the viewer of your website. Although there are no guarantees, there is a common subset of fonts that are widely used by something like 98% of all computers, including Apple Page 94 Mac and some Linux computers. These fonts are called the 'web safe fonts', and are listed at the top of the font menu. If you try and save a website using non-web safe fonts you will get a warning. If you turn any text object into a graphic, you are free to use any font. See the Groups section below for details about this. Creating New Text Objects There are three types of text object - a single line of text, a column of text or a rectangular text area. To create a simple line of text, select the Text Tool and then you can click anywhere on the background and start typing. To create a column click and drag horizontally on the background, and then start typing. You can adjust the column width at any time. To create a text area, click and drag diagonally. You can adjust the width and height of a text area by clicking and dragging on it in the Text Tool . Rotated Text Unusually (uniquely for a web authoring tool) you can rotate any text object, even columns of text, using the usual rotate feature of the Selector tool. But because web browsers do not support native rotated text Web Designer Premium converts any rotated text into a graphic when the page is exported as a website. Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Page 95 Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting Page 96 with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 97 Font Size The font size field shows the font size in pixels, as this is the most reliable method of setting the text size for use in a web browser. But you can enter any size in points (or any other unit for that matter), by entering a value with pt after it (for point) e.g. 72pt or 1in and this will get converted to the correct pixel size. Web Safe Fonts Only a small set of fonts can be used safely for the main text of a website - only those fonts that you know will exist on the computer of the viewer of your website. Although there are no guarantees, there is a common subset of fonts that are widely used by something like 98% of all computers, including Apple Mac and some Linux computers. These fonts are called the 'web safe fonts', and are listed at the top of the font menu. If you try and save a website using non-web safe fonts you will get a warning. If you turn any text object into a graphic, you are free to use any font. See the Groups section below for details about this. Creating New Text Objects There are three types of text object - a single line of text, a column of text or a rectangular text area. To create a simple line of text, select the Text Tool and then you can click anywhere on the background and start typing. To create a column click and drag horizontally on the background, and then start typing. You can adjust the column width at any time. To create a text area, click and drag diagonally. You can adjust the width and height of a text area by clicking and dragging on it in the Text Tool . Rotated Text Unusually (uniquely for a web authoring tool) you can rotate any text object, even columns of text, using the usual rotate feature of the Selector tool. But because web browsers do not support native rotated text Web Designer Premium converts any rotated text into a graphic when the page is exported as a website. Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery Page 98 are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type Page 99 this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 100 Web Safe Fonts Only a small set of fonts can be used safely for the main text of a website - only those fonts that you know will exist on the computer of the viewer of your website. Although there are no guarantees, there is a common subset of fonts that are widely used by something like 98% of all computers, including Apple Mac and some Linux computers. These fonts are called the 'web safe fonts', and are listed at the top of the font menu. If you try and save a website using non-web safe fonts you will get a warning. If you turn any text object into a graphic, you are free to use any font. See the Groups section below for details about this. Creating New Text Objects There are three types of text object - a single line of text, a column of text or a rectangular text area. To create a simple line of text, select the Text Tool and then you can click anywhere on the background and start typing. To create a column click and drag horizontally on the background, and then start typing. You can adjust the column width at any time. To create a text area, click and drag diagonally. You can adjust the width and height of a text area by clicking and dragging on it in the Text Tool . Rotated Text Unusually (uniquely for a web authoring tool) you can rotate any text object, even columns of text, using the usual rotate feature of the Selector tool. But because web browsers do not support native rotated text Web Designer Premium converts any rotated text into a graphic when the page is exported as a website. Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . Page 101 All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if Page 102 you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 103 Creating New Text Objects There are three types of text object - a single line of text, a column of text or a rectangular text area. To create a simple line of text, select the Text Tool and then you can click anywhere on the background and start typing. To create a column click and drag horizontally on the background, and then start typing. You can adjust the column width at any time. To create a text area, click and drag diagonally. You can adjust the width and height of a text area by clicking and dragging on it in the Text Tool . Rotated Text Unusually (uniquely for a web authoring tool) you can rotate any text object, even columns of text, using the usual rotate feature of the Selector tool. But because web browsers do not support native rotated text Web Designer Premium converts any rotated text into a graphic when the page is exported as a website. Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Page 104 Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 105 Rotated Text Unusually (uniquely for a web authoring tool) you can rotate any text object, even columns of text, using the usual rotate feature of the Selector tool. But because web browsers do not support native rotated text Web Designer Premium converts any rotated text into a graphic when the page is exported as a website. Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Page 106 Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 107 Bulleted and numbered lists Use the bullet and numbered list buttons on the Text Tool info bar to quickly enter bulleted or numbered lists. You can right click on a numbered list and choose List properties… from the context menu to change the numbering scheme for your list. See the Text Tool chapter for more information. Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. Page 108 The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 109 Soft Shadows, Color Filled Text, Transparent Text You can apply any of these effects using the appropriate tools, e.g., if you drag across some text in the Fill Tool it will give it a graduated color, or if you drag on it with the Shadow Tool it will give it a soft shadow. In all these cases Web Designer Premium will automatically convert the text to be a graphic on your exported website. Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. Page 110 You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 111 Text Repel Around Objects If you right click on an object like a photo and select the menu option 'Repel text under' ' you can make text flow around the object that is on top of the text. Many of the objects, such as photos, side panels, buttons and headings used in the templates from the Designs Gallery are automatically repelling - the text will always flow around these objects as you drag them around. Repelling objects only repel text that is behind the object - so you may have to 'bring to front' the object in order for the repel to work ("Ctrl + F"). Alternatively if you only want an object to repel text within an individual layer, you can prevent text that is below that layer from being repelled (useful for popup layers within a web page) - see Layer Properties . All operations in the Text Tool are live - the text re-formats and re-flows as you adjust the column width or move repelling objects around. Note: You can now also repel text around anchored objects . Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note Page 112 : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 113 Anchored Objects If you want a graphical object to appear next to a particular part of a block of text, you can anchor the object to the text so it moves with it. Right click the object and choose Anchor to text. Using the Selector Tool click and drag the anchor symbol that appears in the top left of the object to the location in the text where you would like the object anchored. Now if you edit or move the text, the anchored object moves with the anchor point. Note: You can also repel text from an anchored object. Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool Page 114 . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 115 Text Panels Just as some Design Gallery buttons stretch to accommodate the text, so some text panels can adapt to the width or length of text entered into them. The panel background changes to accommodate longer or wider blocks of text. You can adjust the width of a text column by going into the Text Tool and dragging the column width handles (under the first line of text). Most of the Design Gallery templates provide a few text panels in keeping with the theme. Some text panels will only stretch vertically, others will stretch vertically and horizontally. To create your own stretching button or text panel, use one of the existing ones from the Design Gallery and adapt this by re-coloring the background or adjusting text color / size / width. Note : You can create new stretching components using Xara Designer Pro. Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 116 Spell Checker On the Text Tool InfoBar is a button that selects the spell checker options and language. If you select Check Spelling as you type this will also mark all unrecognized words with a red dotted underline. Right click on any marked word to be presented with suggested alternatives. Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 117 Embedded Fonts Web Designer Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your .web file, or transfer the file to another computer they will see exactly what you see, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (it's not a full font that is included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Text Tip: There are a lot of shortcuts available in the Text Tool . Refer to the reference section on keyboard shortcuts to see them all. One useful one for experimenting with page layouts, "Ctrl + Shift + L", inserts a block of random pseudo Latin. Page 118 Page Size The pages in the Designs Gallery are designed to be a width that is known to fit the vast majority of computer screens. Creating wider pages is not recommended, even though you will probably have a wider computer screen, experience shows most viewers prefer to have a fixed width page. However you can adjust the page size to be anything. You can set any page size you like by selecting the Page size tab of the Options dialog (right click and choose Page options or Page Options from the File menu). It's not recommended that you make the page width more than 990 pixels, as that's the maximum width for many computer screens (1024 minus a small amount for the scroll bar). A more common page width is typically around 800 pixels. You can directly adjust the height and width of your page by just dragging on the bottom or right margin of the page. Go into the Selector Tool and hover the pointer over the bottom edge of the page, and it will change to indicate you can now drag resize the page up or down as required. Changing The Page Size of Templates You can change the vertical size of the pre-designed templates by just dragging on the bottom edge of the page. However you will often need to move and resize various objects on the page. For example many templates have a footer group. You can just drag this using the Selector Tool to the new position. Sometimes the main text will be on a colored background rectangle. Again using the Selector Tool you can drag on the lower resize handle to extend this down the page as required. Most templates use columns of text which will just grow vertically as you add more text. Hint : If you hold "Ctrl" down while dragging you can ensure the drag will be exactly vertical or horizontal. Page 119 Changing The Page Size of Templates You can change the vertical size of the pre-designed templates by just dragging on the bottom edge of the page. However you will often need to move and resize various objects on the page. For example many templates have a footer group. You can just drag this using the Selector Tool to the new position. Sometimes the main text will be on a colored background rectangle. Again using the Selector Tool you can drag on the lower resize handle to extend this down the page as required. Most templates use columns of text which will just grow vertically as you add more text. Hint : If you hold "Ctrl" down while dragging you can ensure the drag will be exactly vertical or horizontal. Page 120 Saving Your Work. Creating A Website Use the Save or Save As menu options to save your work in progress. This saves a file with the .web extension, which is the native file format for Web Designer Premium (this is not a website). You are recommended to regularly save your work as you go along. If you want to edit or update your website in future, you must save a .web file this way and use to do further updates. It's also recommended that you work with the automatic backup facility turned on. This is controlled from the Backups tab of the "Utilities" > "Options" dialog. When on, a backup of your modified open documents is taken regularly. Here you can also choose how the program should behave when you close it. You can either be prompted about saving or discarding each open modified document, or have all documents automatically saved to the backup location and restored the next time you start. To save your website, that is the HTML and associated files for publishing to the web, use the "File" > "Export Website" menu option or click this button on the top bar. This saves a .htm file for each page and a folder alongside these which contains all the graphic files that make up your website. When you export a website, all the pages are exported together, and each page unnamed has _1, _2 ... appended to the end of the name you give when you export. The _files folder contains all the graphics and other files that go to make up your website. You can name each page individually if you wish using the Page tab of the Web Properties dialog or using the Page & Layer Gallery . The default name given to your website is index.htm as this is the usual name for the first page of a website. You can preview your saved website in any web browser, by dragging the index.htm (or any .htm) file from your Windows File Explorer onto a browser window. Automatic backups The Backups tab of the "Utilities" > "Options" dialog allows you to turn the automatic backup facility on and off. This facility saves a copy of all your modified open documents at regular intervals. It's recommended that you work with this backup option turned on, so your work is saved regularly. You can also choose whether you are prompted about unsaved documents when closing the program, or if instead all open documents should be backed up and restored for you when you next start up. See the Document Handling chapter for full details about these facilities. Page 121 Automatic backups The Backups tab of the "Utilities" > "Options" dialog allows you to turn the automatic backup facility on and off. This facility saves a copy of all your modified open documents at regular intervals. It's recommended that you work with this backup option turned on, so your work is saved regularly. You can also choose whether you are prompted about unsaved documents when closing the program, or if instead all open documents should be backed up and restored for you when you next start up. See the Document Handling chapter for full details about these facilities. Page 122 Stretchy Objects Many of the graphic objects, such as buttons and text panels, can automatically adjust their size depending on the size or length of text. For example some of the buttons are called 'stretch buttons' which means that the length of the button adjusts to accommodate the label text on the button. Most template sets, and all of the buttons in the Button folder in the Designs Gallery , have both fixed width and stretchy versions. It's recommended that if building a set of navigation buttons (typically either a horizontal or vertical collection of links or buttons) that you use fixed width so they are all the same size. Similarly many of the side or text panels in the templates, and sometimes the main text area, can also adjust their vertical, and sometimes their horizontal size. In the case of text panels you can adjust the width of the column in the Text Tool by dragging on the left or right end of the column indicator. Page 123 Groups You can group together any selection of objects on the page. Groups act much like a single object, in that you can drag them around the page, resize and rotate them as if they were one object. Many of the items in the template designs from the Designs Gallery such as buttons, text panels, and photo objects are grouped items. For example, you can draw a simple button from scratch by drawing a rectangle with the Rectangle Tool, and then placing a text label on top of this with the Text Tool. These are separate objects and you can move them around independently in the Selector Tool. But if you select both in the Selector Tool (you can lasso drag around to enclose them both, or hold "Shift" and click on additional objects) and right click and choose Group (or press "Ctrl + G" or use the menu "Arrange" > "Group"), these now become a grouped object (Hint : The status line at the bottom always tells you what is selected). Now when you drag, resize, rotate this object, all component parts of the group are moved and transformed as if they are one object. Important: Grouped objects are usually converted into a single graphic object when you export your web page. By un-grouping (right click and choose Ungroup or press "Ctrl + U"), you can access all the parts of your group again to make any changes. An alternative is that you can sometimes edit items directly inside a group. For example when using the Text Tool to edit text or the Photo tool to edit a photo, a click will automatically select the item inside a group. Converting Text To Be A Graphic As mentioned above only a very limited number of fonts are available in web browsers. If you want to use a different font on a button or, say, as a heading, you can do this by ensuring it is converted to a graphic, and all you need to do is group the object to make this happen automatically. You can still edit the text inside the group, but groups are automatically converted into a graphic when the website is exported. So all you need to do to include a font like this is to group it. It doesn't have to be grouped with anything - you can group it with itself, by just selecting Group from the Arrange menu or pressing "Ctrl + G". Soft Groups There is another type of group, called a 'Soft Group', which is a more loosely connected set of objects. The difference between Groups and Soft Groups is: When you group items they must all be on a single layer (if they are not they are moved to a single layer when you group the items). Soft groups retain their layers, so you can tie together items across multiple layers. Groups are usually converted into a single graphic when exported as HTML for a website. Soft Groups are not and each object is exported as a separate item. Text inside a soft group is kept as text in the HTML, whereas text in Groups is converted into a graphic (with some exceptions). You can nest groups inside other groups. For complex drawings consisting of many, sometimes thousands of shapes, creating a hierarchy of nested groups is a good organizational technique, just like having folder inside other folders. Soft Groups however cannot be nested and are designed primarily a way of tying multiple objects on different layers together. Because Soft Groups can contain items on different layers, when you select a Soft Grouped item on one layer it will automatically select the corresponding 'soft grouped' item/s on other layers, often a layer that is not even visible. See the section on Layers below to understand more about this. Page 124 Most buttons are Soft Groups, that is when you select, move or resize a button you are in fact performing these operations on two copies of the button, one called the 'MouseOff' version and another 'MouseOver' version. Some of the more complex panel objects in the Designs Gallery are Soft Groups. This is so that you can move it around as a single object, but the component parts, the photos, background shapes, are all exported into the HTML as separate items for maximum efficiency. Synchronized Text There is another useful feature of Soft Groups. If you have the same text on two or more objects within a Soft Group, the text will be synchronized when you edit it. This is the mechanism used to keep the button text the same on both the normal and MouseOver buttons - see below. Anchored Groups When you make an object anchored to text, it gets put inside an Anchored Group. See Anchored Graphics for more information on anchored objects. Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 125 Converting Text To Be A Graphic As mentioned above only a very limited number of fonts are available in web browsers. If you want to use a different font on a button or, say, as a heading, you can do this by ensuring it is converted to a graphic, and all you need to do is group the object to make this happen automatically. You can still edit the text inside the group, but groups are automatically converted into a graphic when the website is exported. So all you need to do to include a font like this is to group it. It doesn't have to be grouped with anything - you can group it with itself, by just selecting Group from the Arrange menu or pressing "Ctrl + G". Soft Groups There is another type of group, called a 'Soft Group', which is a more loosely connected set of objects. The difference between Groups and Soft Groups is: When you group items they must all be on a single layer (if they are not they are moved to a single layer when you group the items). Soft groups retain their layers, so you can tie together items across multiple layers. Groups are usually converted into a single graphic when exported as HTML for a website. Soft Groups are not and each object is exported as a separate item. Text inside a soft group is kept as text in the HTML, whereas text in Groups is converted into a graphic (with some exceptions). You can nest groups inside other groups. For complex drawings consisting of many, sometimes thousands of shapes, creating a hierarchy of nested groups is a good organizational technique, just like having folder inside other folders. Soft Groups however cannot be nested and are designed primarily a way of tying multiple objects on different layers together. Because Soft Groups can contain items on different layers, when you select a Soft Grouped item on one layer it will automatically select the corresponding 'soft grouped' item/s on other layers, often a layer that is not even visible. See the section on Layers below to understand more about this. Most buttons are Soft Groups, that is when you select, move or resize a button you are in fact performing these operations on two copies of the button, one called the 'MouseOff' version and another 'MouseOver' version. Some of the more complex panel objects in the Designs Gallery are Soft Groups. This is so that you can move it around as a single object, but the component parts, the photos, background shapes, are all exported into the HTML as separate items for maximum efficiency. Synchronized Text There is another useful feature of Soft Groups. If you have the same text on two or more objects within a Soft Group, the text will be synchronized when you edit it. This is the mechanism used to keep the button text the same on both the normal and MouseOver buttons - see below. Anchored Groups When you make an object anchored to text, it gets put inside an Anchored Group. See Anchored Graphics for more information on anchored objects. Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 126 Soft Groups There is another type of group, called a 'Soft Group', which is a more loosely connected set of objects. The difference between Groups and Soft Groups is: When you group items they must all be on a single layer (if they are not they are moved to a single layer when you group the items). Soft groups retain their layers, so you can tie together items across multiple layers. Groups are usually converted into a single graphic when exported as HTML for a website. Soft Groups are not and each object is exported as a separate item. Text inside a soft group is kept as text in the HTML, whereas text in Groups is converted into a graphic (with some exceptions). You can nest groups inside other groups. For complex drawings consisting of many, sometimes thousands of shapes, creating a hierarchy of nested groups is a good organizational technique, just like having folder inside other folders. Soft Groups however cannot be nested and are designed primarily a way of tying multiple objects on different layers together. Because Soft Groups can contain items on different layers, when you select a Soft Grouped item on one layer it will automatically select the corresponding 'soft grouped' item/s on other layers, often a layer that is not even visible. See the section on Layers below to understand more about this. Most buttons are Soft Groups, that is when you select, move or resize a button you are in fact performing these operations on two copies of the button, one called the 'MouseOff' version and another 'MouseOver' version. Some of the more complex panel objects in the Designs Gallery are Soft Groups. This is so that you can move it around as a single object, but the component parts, the photos, background shapes, are all exported into the HTML as separate items for maximum efficiency. Synchronized Text There is another useful feature of Soft Groups. If you have the same text on two or more objects within a Soft Group, the text will be synchronized when you edit it. This is the mechanism used to keep the button text the same on both the normal and MouseOver buttons - see below. Anchored Groups When you make an object anchored to text, it gets put inside an Anchored Group. See Anchored Graphics for more information on anchored objects. Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 127 Synchronized Text There is another useful feature of Soft Groups. If you have the same text on two or more objects within a Soft Group, the text will be synchronized when you edit it. This is the mechanism used to keep the button text the same on both the normal and MouseOver buttons - see below. Anchored Groups When you make an object anchored to text, it gets put inside an Anchored Group. See Anchored Graphics for more information on anchored objects. Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 128 Anchored Groups When you make an object anchored to text, it gets put inside an Anchored Group. See Anchored Graphics for more information on anchored objects. Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 129 Repeating Groups When you make an object repeating, it is placed inside a Repeating Group. See the Repeating Objects section of the Object Handling chapter for details. Page 130 Repeating Objects It's common to have items like navigation buttons, headers or logos repeating on all pages of your document or website. Xara Web Designer 7 Premium provides the ability to repeat any item in the same place on any of your web pages. When you update one of the copies, all changes are automatically replicated across all pages. See the Repeating Objects section of the Object Handling chapter for details. Page 131 Links, Buttons & Navigation Bars You can add a web link to any object, a button, graphic or some text. Select the object and just click the link icon on the top bar to enter the web address that you want to link to. Enter the web address you want to link to in the highlighted field. The Link tab of the Website Properties dialog allows you to control what happens when you click the linked object on the page. You can jump to any other web page (you can quickly select to link to any other page within your website by using the Link to drop down) and you can control whether this opens the page in a separate window. You can also link to any pop-up layers if you have created these. So to set one of your buttons to be a link, just select it (click on it in the Selector Tool), click the icon, and enter the web address, or just select one of your pages from the drop- down list and click Apply . That's it. Applying a transition to a link You can also add a transition to the link, so that when it is clicked an animated effect is applied to the object that the link displays. 1. Enter the web address or choose the page you want to link to. 2. Under Link transition, choose a transition effect from the drop-down list and use the Speed slider to set the amount of time the effect displays. Page 132 3. Click Apply. Note: You cannot apply a transition effect to a link when it links to an anchor, a file, a pop-up layer or pop-up photo. You also cannot apply transitions to a link in a navigation bar. However you can apply effects directly to a page or layer , so page and layer contents can still display an effect when they open on the web page. The link transition takes precedence when both the link and the page it loads have a transition applied. Link to Anchor You can link to any text or object anywhere in your website by using 'anchors'. First you need to apply a name to the object you want to link to. This is called the anchor. Right click the item (which can be a graphic or some text) and then select Names or choose Names from the Utilities menu to display the name dialog. Enter any unique name you like and click Add . To link to this anchor from anywhere in your website (a button or just a link on some text) open the link dialog (shown above), and choose from the Link to anchor drop down list of names. Link to File Sometimes you may want to provide a document, movie or other file to visitors to your site. To do this use the Link to file option. Select the object on your page that you want to link to the file. Then choose the Link to file option and browse for your file. This copies the file into a support folder alongside your design file, so that the file gets published along with the rest of your site. The folder is named using the name of your design file, with "_files" appended. Click OK, preview your page and try the link. When you want to modify the file, just go through the same process - browse for your new/updated file. See the Web Properties dialog chapter for more information on this feature, and the Document Handling chapter for information about support folders . Changing Button Text This is easy - in the Text Tool , just click on the button text and edit it. Hint : if you triple-click on the button text that selects the whole line of text for easy replacement when you type. Note : You can't edit the text of navigation bars this way, if the bar is set to be a site navigation bar. You need to edit the labels using the Navigation Bar Properties dialog instead - double-click a navigation bar to display it. Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers Page 133 section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 134 Applying a transition to a link You can also add a transition to the link, so that when it is clicked an animated effect is applied to the object that the link displays. 1. Enter the web address or choose the page you want to link to. 2. Under Link transition, choose a transition effect from the drop-down list and use the Speed slider to set the amount of time the effect displays. 3. Click Apply. Note: You cannot apply a transition effect to a link when it links to an anchor, a file, a pop-up layer or pop-up photo. You also cannot apply transitions to a link in a navigation bar. However you can apply effects directly to a page or layer , so page and layer contents can still display an effect when they open on the web page. The link transition takes precedence when both the link and the page it loads have a transition applied. Link to Anchor You can link to any text or object anywhere in your website by using 'anchors'. First you need to apply a name to the object you want to link to. This is called the anchor. Right click the item (which can be a graphic or some text) and then select Names or choose Names from the Utilities menu to display the name dialog. Enter any unique name you like and click Add . To link to this anchor from anywhere in your website (a button or just a link on some text) open the link dialog (shown above), and choose from the Link to anchor drop down list of names. Link to File Sometimes you may want to provide a document, movie or other file to visitors to your site. To do this use the Link to file option. Select the object on your page that you want to link to the file. Then choose the Link to file option and browse for your file. This copies the file into a support folder alongside your design file, so that the file gets published along with the rest of your site. The folder is named using the name of your design file, with "_files" appended. Click OK, preview your page and try the link. When you want to modify the file, just go through the same process - browse for your new/updated file. See the Web Properties dialog chapter for more information on this feature, and the Document Handling chapter for information about support folders . Changing Button Text This is easy - in the Text Tool , just click on the button text and edit it. Hint : if you triple-click on the button text that selects the whole line of text for easy replacement when you type. Note : You can't edit the text of navigation bars this way, if the bar is set to be a site navigation bar. You need to edit the labels using the Navigation Bar Properties dialog instead - double-click a navigation bar to display it. Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your Page 135 browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 136 Link to Anchor You can link to any text or object anywhere in your website by using 'anchors'. First you need to apply a name to the object you want to link to. This is called the anchor. Right click the item (which can be a graphic or some text) and then select Names or choose Names from the Utilities menu to display the name dialog. Enter any unique name you like and click Add . To link to this anchor from anywhere in your website (a button or just a link on some text) open the link dialog (shown above), and choose from the Link to anchor drop down list of names. Link to File Sometimes you may want to provide a document, movie or other file to visitors to your site. To do this use the Link to file option. Select the object on your page that you want to link to the file. Then choose the Link to file option and browse for your file. This copies the file into a support folder alongside your design file, so that the file gets published along with the rest of your site. The folder is named using the name of your design file, with "_files" appended. Click OK, preview your page and try the link. When you want to modify the file, just go through the same process - browse for your new/updated file. See the Web Properties dialog chapter for more information on this feature, and the Document Handling chapter for information about support folders . Changing Button Text This is easy - in the Text Tool , just click on the button text and edit it. Hint : if you triple-click on the button text that selects the whole line of text for easy replacement when you type. Note : You can't edit the text of navigation bars this way, if the bar is set to be a site navigation bar. You need to edit the labels using the Navigation Bar Properties dialog instead - double-click a navigation bar to display it. Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. Page 137 In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 138 Link to File Sometimes you may want to provide a document, movie or other file to visitors to your site. To do this use the Link to file option. Select the object on your page that you want to link to the file. Then choose the Link to file option and browse for your file. This copies the file into a support folder alongside your design file, so that the file gets published along with the rest of your site. The folder is named using the name of your design file, with "_files" appended. Click OK, preview your page and try the link. When you want to modify the file, just go through the same process - browse for your new/updated file. See the Web Properties dialog chapter for more information on this feature, and the Document Handling chapter for information about support folders . Changing Button Text This is easy - in the Text Tool , just click on the button text and edit it. Hint : if you triple-click on the button text that selects the whole line of text for easy replacement when you type. Note : You can't edit the text of navigation bars this way, if the bar is set to be a site navigation bar. You need to edit the labels using the Navigation Bar Properties dialog instead - double-click a navigation bar to display it. Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Page 139 Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 140 Changing Button Text This is easy - in the Text Tool , just click on the button text and edit it. Hint : if you triple-click on the button text that selects the whole line of text for easy replacement when you type. Note : You can't edit the text of navigation bars this way, if the bar is set to be a site navigation bar. You need to edit the labels using the Navigation Bar Properties dialog instead - double-click a navigation bar to display it. Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition Page 141 controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 142 Mouseover (Rollover) Buttons You will have noticed that most buttons highlight as you move the mouse pointer over them in your browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons used in the templates or from the Button section of the Designs Gallery . For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers. The Soft Group means that both layers are changed at the same time when you do anything to the button, such as change the text, or move or resize it. See the Layers section below for more detail. Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 143 Adding New Buttons In the Designs Gallery , each Theme has a collection of button graphics that you can just drag onto the page. Typically there are two types of button. The ones called Stretch Button will elongate to accommodate the button label text. In addition there is a Buttons category that has a set of general button designs that can be added to your page in the same way. Or you can copy any existing button - this is probably the best way for adding more buttons to a navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button held down. (This is a general shortcut to copy any object). You can now just edit the text and link as required. Tip : If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical, making it really easy to create a row or column of buttons. Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 144 Button Bars (NavBars) Most websites, and so most of the template designs we provide, have a row or column of buttons to navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7 Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and choose Edit Navigation bar from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links and tooltips, add and delete buttons, re-order and even add menus and sub-menus. When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition controls are grayed out. In the Navigation Bar Properties dialog you can also turn on the Site navigation bar option. This makes your bar automatically appear on new pages you add to your site and buttons/links are added to the bar automatically for each new page. However you can't edit your bar on canvas when this option is turned on ? you can only edit it using this dialog. To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and choose Repeat on all pages . This will make the button bar a repeating object and copy it from the current page onto all other pages. Read the Navigation Bars Chapter for full details about Navigation Bars. Page 145 Drawing Tools Web Designer Premium provides all the graphics tools you need to create just about any graphical object on your page, as well as a range of pre-designed graphical elements in the Designs Gallery . There are several basic drawing tools that let you create rectangles, ellipses, regular polygons, stars or any shape you like. Web Designer Premium provides vector drawing tools which means you can resize, edit the outline shape and re-color with no loss of quality. You can zoom in to see almost infinite detail, and all edits are undoable. Current attributes (styles) An 'attribute' is some characteristic of an object which you can modify in Xara Web Designer 7 Premium. For example a shape's attributes include its color, its outline width and its outline color. As mentioned above you can change the attributes of an object after you've drawn it, by selecting it and then changing its fill color, line width, or any of its other attributes. But Xara Web Designer 7 Premium also keeps track of the 'current' attributes, which are the attributes that get applied to newly drawn objects as they are created. Setting current attributes manually If, for example, you want the next rectangle you draw to be red, make sure you have nothing selected (press "Esc" or click an empty part of the page) and then click red on the color line. You've now set the current fill color attribute to red. Now when you draw a new shape, it will be filled red. You can set other current attributes the same way ? by first making sure nothing is selected before changing the attribute's value. Setting current attributes automatically By default, Xara Web Designer 7 Premium automatically updates the current attributes for you, to match the object you last drew, or last selected. So for example if you draw a rectangle and then make it green, the next shape you draw will also be green. If you have a blue rectangle in your design and you wish to draw another one just like it, first select the blue rectangle (this makes its attributes current) and then the next shape you draw will also be blue. So by simply clicking an object, you set the current attributes to match that object. This allows you to use existing objects as a 'palette' of available styles. Click an object to select it, then draw new objects in that style. You can turn off this behavior in the General tab of the "Utilities" > "Options" dialog. Select the Ask before setting current attribute checkbox. Now Web Designer Premium will ask you before changing the current attributes to those recently used. Attribute groups Many designs consist of a combination of closed filled shapes and open shapes (lines where the start and end points are not coincident). Normally it wouldn't be desirable to have the attributes of an open shape used for a closed shape, nor vice-versa. Therefore the attributes for open and closed shapes are kept separate ? these are known as attribute groups. Setting the values of one group does not affect the other group. So for example, selecting a filled rectangle with no outline will not change the current line width to Page 146 zero for open shapes. For the same reasons, text attributes make up a third attribute group. The text attribute group is only set when you select text objects, or when you set the attributes manually while in the text tool. Exempt attributes Some attributes do not get set as current automatically even when 'Give new objects most recent attributes' is on. This is because some attributes can cause problems if they become current. For example if you applied a 10 pixel feather to a large object (to blur the edges) and then drew a new 10 pixel sized shape, that new shape would be invisible if the feather attribute was copied to it, due to the amount of feathering! Other attributes can adversely affect the way designs export, or significantly increase the time taken to render the design and so should not be applied unnecessarily. Examples of attributes which are copied automatically: Fill colors, fill styles, line width, line color, line style, line join style, line endcap style, arrow heads/tails, text font, text font size, text margins. Examples of attributes which are not copied automatically: Feather, transparency, shadow, bevel, 3D extrude. Resetting current attributes You can reset all current attribute groups instantly by pressing "Esc" when you have no objects selected. If you have objects selected, pressing "Esc" clears the selection, so just press "Esc" again to reset the current attributes back to their default values. Shape Tool The Shape Editor Tool allows you to create detailed vector based shapes, and also to edit the outline of any shape. For preset shapes such as rectangles or ellipses, or if you want to edit the outline of your text character shapes, you need to convert the object to an editable shape first. You can do this by selecting the "Ctrl + 1" key shortcut. You can then use the Shape Editor Tool to perform various advanced vector editing. Refer to the reference section (Drawing Lines and Shapes, The Shape Editor tool ) on how to use this very powerful tool. Straight Line and Arrow Tool The Straight Line Tool makes it easy to draw single segment straight lines and to add arrow heads and tails to any lines. Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads and tails using the Straight Line tool The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Page 147 Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Rectangle Tool To draw a rectangle, select the Rectangle Tool and just drag across the page. You will see a solid filled shape as you drag across the page, indicating the fill and line color and boundaries of the shape you are drawing. Click the 'curved corners' button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness. You can drag on any corner handle to resize an object. Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector Tool you can drag it, resize it and rotate it as required. See Selector Tool. You can put this rectangle behind all other objects as a background image, by pressing "Ctrl + B" for 'Put to back'. Alternatively if it's in front of all other objects ("Ctrl + F") then you can right click on it and select Repel text under to make the text on your page repel around the outside of this shape (another Web Designer Premium first for any web authoring tool.) Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag Page 148 across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the Page 149 top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. Page 150 You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 151 Current attributes (styles) An 'attribute' is some characteristic of an object which you can modify in Xara Web Designer 7 Premium. For example a shape's attributes include its color, its outline width and its outline color. As mentioned above you can change the attributes of an object after you've drawn it, by selecting it and then changing its fill color, line width, or any of its other attributes. But Xara Web Designer 7 Premium also keeps track of the 'current' attributes, which are the attributes that get applied to newly drawn objects as they are created. Setting current attributes manually If, for example, you want the next rectangle you draw to be red, make sure you have nothing selected (press "Esc" or click an empty part of the page) and then click red on the color line. You've now set the current fill color attribute to red. Now when you draw a new shape, it will be filled red. You can set other current attributes the same way ? by first making sure nothing is selected before changing the attribute's value. Setting current attributes automatically By default, Xara Web Designer 7 Premium automatically updates the current attributes for you, to match the object you last drew, or last selected. So for example if you draw a rectangle and then make it green, the next shape you draw will also be green. If you have a blue rectangle in your design and you wish to draw another one just like it, first select the blue rectangle (this makes its attributes current) and then the next shape you draw will also be blue. So by simply clicking an object, you set the current attributes to match that object. This allows you to use existing objects as a 'palette' of available styles. Click an object to select it, then draw new objects in that style. You can turn off this behavior in the General tab of the "Utilities" > "Options" dialog. Select the Ask before setting current attribute checkbox. Now Web Designer Premium will ask you before changing the current attributes to those recently used. Attribute groups Many designs consist of a combination of closed filled shapes and open shapes (lines where the start and end points are not coincident). Normally it wouldn't be desirable to have the attributes of an open shape used for a closed shape, nor vice-versa. Therefore the attributes for open and closed shapes are kept separate ? these are known as attribute groups. Setting the values of one group does not affect the other group. So for example, selecting a filled rectangle with no outline will not change the current line width to zero for open shapes. For the same reasons, text attributes make up a third attribute group. The text attribute group is only set when you select text objects, or when you set the attributes manually while in the text tool. Exempt attributes Some attributes do not get set as current automatically even when 'Give new objects most recent attributes' is on. This is because some attributes can cause problems if they become current. For example if you applied a 10 pixel feather to a large object (to blur the edges) and then drew a new 10 pixel sized shape, that new shape would be invisible if the feather attribute was copied to it, due to the amount of feathering! Other attributes can adversely affect the way designs export, or significantly increase the time taken to render the design and so should not be applied unnecessarily. Examples of attributes which are copied automatically: Fill colors, fill styles, line width, line color, line style, line join style, line endcap style, arrow Page 152 heads/tails, text font, text font size, text margins. Examples of attributes which are not copied automatically: Feather, transparency, shadow, bevel, 3D extrude. Resetting current attributes You can reset all current attribute groups instantly by pressing "Esc" when you have no objects selected. If you have objects selected, pressing "Esc" clears the selection, so just press "Esc" again to reset the current attributes back to their default values. Shape Tool The Shape Editor Tool allows you to create detailed vector based shapes, and also to edit the outline of any shape. For preset shapes such as rectangles or ellipses, or if you want to edit the outline of your text character shapes, you need to convert the object to an editable shape first. You can do this by selecting the "Ctrl + 1" key shortcut. You can then use the Shape Editor Tool to perform various advanced vector editing. Refer to the reference section (Drawing Lines and Shapes, The Shape Editor tool ) on how to use this very powerful tool. Straight Line and Arrow Tool The Straight Line Tool makes it easy to draw single segment straight lines and to add arrow heads and tails to any lines. Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads and tails using the Straight Line tool The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Page 153 Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Rectangle Tool To draw a rectangle, select the Rectangle Tool and just drag across the page. You will see a solid filled shape as you drag across the page, indicating the fill and line color and boundaries of the shape you are drawing. Click the 'curved corners' button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness. You can drag on any corner handle to resize an object. Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector Tool you can drag it, resize it and rotate it as required. See Selector Tool. You can put this rectangle behind all other objects as a background image, by pressing "Ctrl + B" for 'Put to back'. Alternatively if it's in front of all other objects ("Ctrl + F") then you can right click on it and select Repel text under to make the text on your page repel around the outside of this shape (another Web Designer Premium first for any web authoring tool.) Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will Page 154 a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. Page 155 This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Page 156 Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 157 Shape Tool The Shape Editor Tool allows you to create detailed vector based shapes, and also to edit the outline of any shape. For preset shapes such as rectangles or ellipses, or if you want to edit the outline of your text character shapes, you need to convert the object to an editable shape first. You can do this by selecting the "Ctrl + 1" key shortcut. You can then use the Shape Editor Tool to perform various advanced vector editing. Refer to the reference section (Drawing Lines and Shapes, The Shape Editor tool ) on how to use this very powerful tool. Straight Line and Arrow Tool The Straight Line Tool makes it easy to draw single segment straight lines and to add arrow heads and tails to any lines. Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads and tails using the Straight Line tool The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Rectangle Tool Page 158 To draw a rectangle, select the Rectangle Tool and just drag across the page. You will see a solid filled shape as you drag across the page, indicating the fill and line color and boundaries of the shape you are drawing. Click the 'curved corners' button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness. You can drag on any corner handle to resize an object. Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector Tool you can drag it, resize it and rotate it as required. See Selector Tool. You can put this rectangle behind all other objects as a background image, by pressing "Ctrl + B" for 'Put to back'. Alternatively if it's in front of all other objects ("Ctrl + F") then you can right click on it and select Repel text under to make the text on your page repel around the outside of this shape (another Web Designer Premium first for any web authoring tool.) Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the Page 159 new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also Page 160 import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: Page 161 On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 162 Straight Line and Arrow Tool The Straight Line Tool makes it easy to draw single segment straight lines and to add arrow heads and tails to any lines. Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads and tails using the Straight Line tool The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Rectangle Tool To draw a rectangle, select the Rectangle Tool and just drag across the page. You will see a solid filled shape as you drag across the page, indicating the fill and line color and boundaries of the shape you are drawing. Click the 'curved corners' button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness. Page 163 You can drag on any corner handle to resize an object. Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector Tool you can drag it, resize it and rotate it as required. See Selector Tool. You can put this rectangle behind all other objects as a background image, by pressing "Ctrl + B" for 'Put to back'. Alternatively if it's in front of all other objects ("Ctrl + F") then you can right click on it and select Repel text under to make the text on your page repel around the outside of this shape (another Web Designer Premium first for any web authoring tool.) Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. Page 164 The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and Page 165 more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: Page 166 On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 167 Rectangle Tool To draw a rectangle, select the Rectangle Tool and just drag across the page. You will see a solid filled shape as you drag across the page, indicating the fill and line color and boundaries of the shape you are drawing. Click the 'curved corners' button on the InfoBar to make this a rounded rectangle - and you can drag on the curved corner handle to adjust the roundedness. You can drag on any corner handle to resize an object. Drag and drop a color from the Color Line onto your shape to re-color it. See Coloring Shapes. With the Selector Tool you can drag it, resize it and rotate it as required. See Selector Tool. You can put this rectangle behind all other objects as a background image, by pressing "Ctrl + B" for 'Put to back'. Alternatively if it's in front of all other objects ("Ctrl + F") then you can right click on it and select Repel text under to make the text on your page repel around the outside of this shape (another Web Designer Premium first for any web authoring tool.) Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool Page 168 and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. Page 169 This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Page 170 Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 171 Fill Tool You can easily put a graduated color fill onto a shape using this tool (and a lot more besides). Select the tool and just drag across your object. The fill arrow can be adjusted by dragging the ends to alter the direction, angle and extent of the graduation. Rounded rectangle with a graduated fill. Note: If you drag with the Fill Tool across a grouped item, such as a text panel, then everything in the group takes on the same fill style. To overcome this you must first select just the item you want to fill. You can do this several ways. A single click on the item with the Fill Tool will select just that item, as will a click in the Selector Tool with the "Ctrl" key pressed (this is called 'select inside' because it selects just the one item inside the group). Now when you drag it will fill only the selected object. To edit the start or color of the fill just drag and drop a color from the color line onto the shape, or you can select the end of the Fill Arrow in the Fill Tool and use the Color Editor ("Ctrl + E"). You can create a multi-stage graduated fill by making sure the fill arrow is visible (select it with the Fill Tool ), now just drag a color from the Color Line and carefully drop it on the arrow line where you want the new color. You can now drag this fill point, or select "Ctrl + E" to adjust the color using the Color Editor. There are different fill styles, for example this is a circle with a circular fill. The shadow is another ellipse with a graduated color fill and feathered (see below). Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Page 172 Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note Page 173 : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 174 Transparency Tool Modern browsers support advanced transparency effects, and so does Web Designer Premium. You can adjust the transparency of any graphic or photo to make it see-through. Try it on your rectangle example. Just select the Transparency Tool , and adjust the large slider on the InfoBar. More than this, Web Designer Premium supports graduated transparency. It works very like the graduated color fill. In the Transparency Tool just drag across your shape and you can see the transparency fades. You can adjust the degree of transparency of each end of the fill arrow, by clicking on either end of the arrow, and adjusting the Transparency slider. Preview this and you'll find this works in your browser as well. Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool Page 175 A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Page 176 Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 177 Feather This is a graphical term for blending the edges of objects. Web Designer Premium provides a feather control that enables any object, graphics, text or photo to be feathered - giving it a blurred edge that blends with the background. The Feather control is not a tool on the left, but one of the controls on the top bar. Try it on your rectangle shape. Select the shape and then click this Feather control on the right of the top bar. The shadow below the ball drawing above has a feathered edge. Combining all of these controls you can very quickly produce amazing layered graphics for your website, all directly in Web Designer Premium without needing any other graphics tools. This is an example of a rounded rectangle with grad color, grad transparency and feathered edges with some text placed on top of it. This has a graduated color fill, light to dark green going left to right. It also has a vertical graduated transparency fading from top to bottom. The feather gives it a soft edge. It takes a couple of seconds to create such an image, and it's automatically converted to the right graphic when you save your web page. In Web Designer Premium you can create any type of graphic, photo, text with transparency, and it 'just works'. It can also import almost all graphics files, from Adobe EPS, to Photoshop PSD, Camera RAW and more. Technical note : Web Designer Premium automatically converts any vector graphics into PNG images, an alpha-channel PNG if transparency is used. It uses CSS layers to replicate the object layer stacking in Web Designer Premium. This is compatible with all modern web browsers. Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Page 178 Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 179 Shadow Tool A very popular graphics effect is to create a soft drop- shadow under a graphic or some text. This serves to lift the object away from the background. The Shadow Tool lets you add a soft shadow to any object, text, graphics or photo. Select the Shadow Tool and just drag on the object. You can adjust the shadow blur and transparency using InfoBar controls. Some text with a soft shadow. To adjust the position of an existing shadow, go into the Shadow Tool and drag on the shadow Advanced note : Note that because a shadow itself is semi- transparent (part of the objects below show through the shadow) objects with shadows are converted to PNG images when saved on a web page (it's the only image format that supports transparency). PNG images can be quite large, especially for photos. It's perfect for images such the above shadow graphic. You may find you can convert the whole graphic to a JPEG to save space. Whether this works or not depends on what's behind the shadow. If it's a plain or static non-text background you can probably use a JPEG which is a much smaller file size (quicker website download). To force an object to be a JPEG use the Image tab of the Web Properties dialog. JPEG images cannot have semi-transparent parts, so when creating a JPEG of a semi-transparent object Web Designer Premium includes the background (what's behind the semi-transparent part) as part of the JPEG image, but because of the pixel perfect positioning on the web page you can't tell this. This doesn't work if the shadow or semi-transparent object is placed over some text, as the text will be included as part of the graphic. Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required - Page 180 everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 181 Example Graphics This is a perfect example of what can be created in Web Designer Premium. This button combines many of the features described above - it's drawn by combining just a few feathered shapes, and using graduated transparency (the white reflection effect). The text has a slight soft shadow and the button has a glow shadow. The whole thing is grouped. (You do not need to draw this button as it's provided in the Button category of the Designs Gallery ). The huge benefit of vector graphics, compared to 'bitmap' graphics created in pixel editing software such Photoshop, is that you can re-color, edit, rotate, and resize the button with no loss of quality. Make it huge and it remains pin sharp: On top of that you can re-color using the Named Color system, and it will even stretch as required everything in Web Designer Premium remains non-destructive (which means you can always edit it, with no loss of quality). Something that would take skill and time to produce using alternative graphics software, is trivially easy in Web Designer Premium. Page 182 Right-click menus When you right-click any object in the Xara Web Designer 7 Premium workspace, a drop-down menu lists useful operations that are relevant to the object clicked on. For example, if you right-click a rectangle you've drawn previously, the drop-down menu allows you to perform actions only relevant to a rectangle. If you right-click a photo, however, some of the menu options that appear apply only to photos, while others are similar to the actions you can perform on a rectangle. The object-specific operations are listed towards the top of the right-click menu's list, e.g., in the case of a rectangle the first three actions above apply only to rectangles. You can also right click both the page and pasteboard to see a menu of page- and pasteboard-related operations you can apply. If you select more than one object and right-click, the menu lists actions specific to multiple objects, such as group, align and combine, as well as the common operations such as cut, copy and delete. Similarly if you right-click objects that you have previously grouped, actions specific to a group are displayed. It's recommended that you right-click any object or multiple objects in the workspace to access the menu specific to those objects. Once you've done this a few times you will know which actions you can quickly perform with right-click menus. Page 183 Layers, Mouseover (Rollover) & Pop-ups As mentioned earlier all objects have a stacking order on the page - from the backmost to the frontmost item. These objects are stacked over each other. In addition, all items can be placed into named layers. Each layer can have any number of objects, and has the ability to be turned on or off. When the layer is turned off all objects on that layer become invisible. The layers are controlled from the Page & Layer Gallery in the Galleries bar. In Web Designer Premium layers are used to provide mouseover (sometimes called rollover) features on your website. These include highlighting buttons (they highlight when you move the mouse over them) and also other pop-up effects such as text panels containing a detailed product description. You can also apply a transition to a layer, so that it appears on your web page in an animated way. 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 . Page 184 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 ). Creating Your Own Mouseover Buttons You can create your own mouseover buttons from scratch by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it ) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer). In other words, you give the main object a web address using the link option, and then select the MouseOver Layer in the Page & Layer Gallery , and place the required mouseover versions of your button on this layer so it overlaps the linked object. Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped Page 185 version on the other layer, even if the layer is switched off. When you edit the text of the button on one layer, it's automatically synced with the other version of the button. To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected. Select "Arrange" > "Apply Soft Group" . Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden. (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped). Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter for more information on this, including how to have different first and last buttons in your bar. Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, which is shown in the same order as displayed by the Page & Layer Gallery (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Page 186 Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Page 187 Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. Preview and test your mouseover effect. Page 188 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 189 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 190 Creating Your Own Mouseover Buttons You can create your own mouseover buttons from scratch by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it ) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer). In other words, you give the main object a web address using the link option, and then select the MouseOver Layer in the Page & Layer Gallery , and place the required mouseover versions of your button on this layer so it overlaps the linked object. Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped version on the other layer, even if the layer is switched off. When you edit the text of the button on one layer, it's automatically synced with the other version of the button. To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected. Select "Arrange" > "Apply Soft Group" . Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden. (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped). Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter for more information on this, including how to have different first and last buttons in your bar. Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, which is shown in the same order as displayed by the Page & Layer Gallery Page 191 (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Page 192 Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. Preview and test your mouseover effect. Page 193 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 194 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 ). Creating Your Own Mouseover Buttons You can create your own mouseover buttons from scratch by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it ) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer). In other words, you give the main object a web address using the link option, and then select the MouseOver Layer in the Page & Layer Gallery Page 195 , and place the required mouseover versions of your button on this layer so it overlaps the linked object. Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped version on the other layer, even if the layer is switched off. When you edit the text of the button on one layer, it's automatically synced with the other version of the button. To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected. Select "Arrange" > "Apply Soft Group" . Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden. (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped). Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter for more information on this, including how to have different first and last buttons in your bar. Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, which is shown in the same order as displayed by the Page & Layer Gallery (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 Page 196 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Page 197 Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. Preview and test your mouseover effect. Page 198 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 199 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 ). Creating Your Own Mouseover Buttons You can create your own mouseover buttons from scratch by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it ) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer). In other words, you give the main object a web address using the link option, and then select the MouseOver Layer in the Page & Layer Gallery , and place the required mouseover versions of your button on this layer so it overlaps the linked object. Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped version on the other layer, even if the layer is switched off. When you edit the text of the button on one layer, it's automatically synced with the other version of the button. To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected. Select "Arrange" > "Apply Soft Group" . Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden. (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped). Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter for more information on this, including how to have different first and last buttons in your bar. Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have Page 200 several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, which is shown in the same order as displayed by the Page & Layer Gallery (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a Page 201 mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and Page 202 just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. 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 203 Creating Your Own Mouseover Buttons You can create your own mouseover buttons from scratch by drawing the necessary elements from rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it ) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff version has a web address link, then the MouseOver version will automatically be displayed as you move the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer). In other words, you give the main object a web address using the link option, and then select the MouseOver Layer in the Page & Layer Gallery , and place the required mouseover versions of your button on this layer so it overlaps the linked object. Technical note: Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped version on the other layer, even if the layer is switched off. When you edit the text of the button on one layer, it's automatically synced with the other version of the button. To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso select around both buttons. The status line should tell you if you have everything selected. Select "Arrange" > "Apply Soft Group" . Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden. (Note this only works if the Off and Over text are the same to start with, and relies on the objects being Soft Grouped). Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter for more information on this, including how to have different first and last buttons in your bar. Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, Page 204 which is shown in the same order as displayed by the Page & Layer Gallery (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Page 205 Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. Preview and test your mouseover effect. Page 206 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 207 Layer ordering in website documents If your website document has mouseover effects, popup layers and perhaps even mouseover effects on those popup layers, there are some important rules you need to follow in terms of how you order the layers in your document. If you don't follow these ordering rules, you may find that some of the effects don't work. Considering the layers in turn from background to foreground (which is working upwards in the Page & Layer Gallery ), first you must have all the static layers. These are layers which are always visible and are not used as popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have several, in which case they must be the first layers in the layer stack. Next comes the MouseOver layer, if there are mouseover effects on the static layer(s). This contains the mouseover states for all your mouseover buttons. This must be followed by the "MouseDown" layer, if you have mousedown effects on the static layer(s). Next you may have a popup layer. If the objects on this popup layer have mouseover effects, then the next layer following the popup layer must be the layer holding those effects. It must have a name that begins with "MouseOver", E.g. "MouseOverPopup1". And then if the popup layer also has mousedown effects, a layer whose name begins with "MouseDown" must follow containing those effects. Then you can have another popup layer, followed again by any mouseover and mousedown layers for that popup layer. And so on - you can have as many popup layers as you like. So to summarise the above, in general the layer ordering needs to be as indicated by the following list, which is shown in the same order as displayed by the Page & Layer Gallery (foreground to background). All layers are optional and the layer names can be anything you like, except for the characters shown in Bold, which identify the special mouseover and mousedown layers. MouseDown popup n MouseOver popup n PopUp layer n ... MouseDown popup 1 MouseOver popup 1 Popup layer 1 MouseDown MouseOver Static layer n ... Static layer 2 MouseOff Note that you only need to be concerned with these ordering rules if you are building complex pages with multiple popup effects! If you are just using the template designs provided in the Designs Gallery , you should not have any problems with layer ordering on your website. Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current Page 208 layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Page 209 Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. 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 210 Moving Objects Between Layers There are several ways to move objects between layers. First select the object or objects you want to move, then; Cut the object ("Ctrl + X" or right click and Cut). Ensure the target layer is the current layer (shown with , click the layer if it's not) and then right click and choose Paste or Paste in Place . Note that if you cut or copy multiple items that are on different layers, the layer structure is preserved when you paste. Items are pasted to the same layer they were copied/cut from, instead of being pasted to the current layer. If you want to paste all such items to the current layer, ignoring the layer structure, use the Paste in current layer option instead. If you want to retain layer structure, choose Paste in place in current layer. These paste options are also in the clipboard fly-out bar on the top bar, as well as the Edit menu. Right click and choose Arrange then Move to layer in front / Move to layer behind to shift the selected objects one layer up or down. Ensure the target layer is selected as current, then find the selected item in the Page & Layer Gallery (click the Locate button), right click and select Move to Current Layer. Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Pop-up Layers Page 211 A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. 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 212 Applying transitions to popup layers You can apply a transition to a popup layer to control how the layer appears, whether it's triggered by a mouse-over action or a click. So for example if you apply a fade transition, when the popup layer appears it will fade in instead of appearing instantly. 1. Click the layer in the Page & Layer Gallery and click the Properties button at the top of the gallery. 2. Click the Web transition tab of the Layer properties dialog. 3. Choose an effect from the Transition effect drop-down list and move the slider to set a speed for the transition in seconds. 4. Click Apply. Note: There are fewer transition effects available for layers compared to links and pages. Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: Page 213 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. 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 214 Pop-up Layers A more powerful alternative allows you to display the contents of any layer as a result of mousing over, or clicking, any object. This can be used for a range of different pop-up effects such as pop-up photos, menus or detailed object descriptions. To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer Gallery click New while you have a layer selected - don't use the MouseOver layer), then set the Mouseover property (Mouse-over tab of the Web Properties dialog) of the original object to trigger the display of this layer when you mouseover any other object. For example you can make a pop-up, like this, appear as you mouse over some text: Here are the steps to create a pop-up text block like this: 1. Click New in the Page & Layer Gallery, while you have a layer selected, to create a new layer. 2. Draw a rounded rectangle with the Rectangle Tool, click a (pale) color patch on the Color Line to give it a fill color. For good measure give it a soft shadow (select the Shadow Tool and just drag on the rectangle). 3. Create a block of text on top of your rectangle. Select the Text Tool and drag diagonally across the rectangle. Type your text. You probably want to hide the pop-up layer now, so just un-check the 'eye' checkbox of your new layer. 4. 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. 5. 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 215 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 216 Creating Buttons, Banners And Other Web Graphics Web Designer Premium is great tool for creating any standalone web graphics for use with other programs or other web authoring tools. You can draw these objects from scratch using the drawing tools, or use ready made web clipart from the Designs Gallery. Just draw, design or import an item from the Designs Gallery onto a blank page. Manipulate this as required - size it, color it and change the text or fonts as required, and then export the item as a PNG or JPG. For example this is how to create a standalone button graphic from a template: Open the Designs Gallery and then the Web Button category (or Icons or Banners - whatever category you require). Double click on a design to open this in a new document. Edit this as required e.g. you can: Resize it (or rotate) it using the Selector Tool Change the color by clicking on the appropriate colors on the left end of the Color Line and choosing 'edit' Change the text with the Text Tool When you're happy, select the object and export it as a PNG or JPG using the buttons in the Website bar (these are on a flyout bar on the Export HTML icon). For almost all graphics, such as buttons, headings, icons and other non-photographic objects you should use PNG format. For items that contain photos or that have large textured parts made from photos, then JPEG is a better format. If you're saving a rotated photo, or one with a soft shadow, or soft edge, then this should be in a PNG format, but be warned this will be a lot larger file than JPEG. If you click the Settings button in the Export file dialog you can access an advanced control panel that lets you optimize the image. Page 217 Here you can compare side-by-side two different versions of the same image. For example you can compare a JPEG against a PNG version of the same graphic to compare the quality and / or file size, or you can compare two differently optimized PNG images. Refer to the reference chapter on the Export dialog in the pdf manual. The in the above example the JPEG compression is being adjusted to produce the optimum file size. Page 218 Publishing Your Website You will need a web hosting company to host your website. MAGIX Online World is recommended for this, although quite often your existing Internet provider will include 'web space' as part of your normal subscription. The dialog shown below also contains suggested hosting solutions in its Profile list. Most companies also offer the ability to purchase your own domain name (e.g. like www.xara.com) and have this set to point to your web pages. Choose "File" > "Publish Website " or click Publish Properties in the website toolbar. The Publish tab of the Web Properties dialog opens. Entering publishing details 1. In the Profile drop-down list, choose either Custom or, if you are a MAGIX Online World user, choose Magix web hosting. 2. In the FTP Host Address box, type in your FTP host address. If you have a domain name this is often the same as your domain name. For example, for MAGIX Online World users, this would be ftp.magix-online.com. If you chose the Magix web hosting option in the profile list, the FTP host address is set for you automatically. 3. In the FTP username box, type in your FTP username. For MAGIX Online World users, this is the same as your Online World login (FTP username = your email address). 4. In the FTP password box, type in your FTP password. For MAGIX Online World users, this is the same as your Online World password. 5. The optional Sub-folder box lets you publish your website into a sub-folder. e.g. if you are publishing to your MAGIX website and want the web address to be Page 219 'http://yourname.magix.net/public/sub-folder', then you'd set a sub-folder to be 'sub-folder'. If you set a sub-folder this way then all the pages in your website will be published to this folder. 6. If you want a sitemap generated for your website, or if you want your site included in the Xara or MAGIX User Gallery, you need to enter the full URL of your published website in the Website URL field. See the Publish tab help for information on sitemaps. The Include my website in the user gallery checkbox is only enabled if you have added a valid website URL. If you select this option, after publishing your site Web Designer Premium generates a thumbnail of your website and places it in a Xara or MAGIX gallery of websites created by Web Designer Premium users. Click the More Info button to learn more. 7. Select the Save details in current document checkbox to have the publish details you have provided saved with the current document. When you enable the Save details in current document checkbox, the Save password in document checkbox also becomes selectable. Select this checkbox to also save the FTP password with the current document, if you are sure that is what you want. This is not recommended because it means anyone who gets a copy of your design file can publish to your website without knowing or entering your password! 8. You can also opt to save the publish details on your computer in a named profile. Click the Save in profile button and enter a suitable profile name. Now you can select the profile from the profile list at the top of the dialog, so you can use them in other documents without having to re-enter them. 8. Note: You can delete a profile by selecting it in the Profile list and clicking the Delete button next to it. 9. Normally leave the Re-publish changed files only checkbox selected. This makes re-publishing much quicker in most cases because only files changed since the last publish are re-published. 10. Click the Explore web space button to browse, view and delete files you have uploaded to your FTP server. 11. Click OK. Web Designer Premium displays a dialog confirming the publish details that it will use to publish your website. Click Publish. Setting up the Export folder Once you've set your Publish details, you can then click the Publish icon on the top bar (on the Export HTML flyout bar) or use the menu option "File" > "Publish Website ". 1. Web Designer Premium displays a dialog confirming that you want to publish to the server and username you have provided. Click Publish. 2. If you haven't exported your website yet, Web Designer Premium prompts you to export your site to your local disc and displays the Export dialog. 3. Choose a folder to which to export your website data. If you haven't yet defined a folder, simply select an existing folder or create a new folder and select it. Then click on Export. Important : If you have not set any specific page names in the Page & Layer Gallery, then the name you exported to last will be used as the basis for all the pages in your website. E.g., if you open a template website, and export this as 'test' to your file system, and now publish this, it will be published as test.htm to your web server, and all additional pages will be test_2.htm, test_3.htm etc. index.htm is the usual name for the first page of a website. Transferring data 1. After you have clicked Export (or Publish), Web Designer Premium displays a small window that shows the progress of data transmission. 2. As soon as the transfer is finished, you can open a browser window and navigate to the URL of your published website. MAGIX Online World users can open their website via their Online Page 220 World web address: http://yourname.magix.net/public. Note : If you entered a sub-folder in the Publish tab of the Web Properties dialog, your website is saved there. In this case, you have to add the name of the sub-folder to your web address (http://yourname.magix.net/public/sub-folder) to open the page. See the Web Properties Dialog chapter for full details on how to use this dialog. Note: Many web servers use case sensitive filenames. So, for example, the web address xara.com/products.htm is not the same thing as xara.com/Products.htm. To reduce confusion and the likelihood of errors Web Designer Premium enforces that all page names are all lower-case and contain only allowable characters. This means that spaces are not allowed in page names. We suggest using an underscore as an alternative separator. Page 221 Document handling In this chapter 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 View quality Galleries Undo and Redo Page 222 Starting Xara Web Designer 7 Premium To start Web Designer Premium: Choose "Start" > "All programs" > "Xara" > "Xara Web Designer 7 Premium". Or double click the Xara Web Designer 7 Premium icon on your desktop (shown left). This may vary depending on which version of Windows you are using. Page 223 Starting a new document Primarily, there are three different types of documents in Xara Web Designer 7 Premium, i.e. web page, photo and animation. To start a new document: Choose "File" > "New" This opens a sub menu with several pre-defined template documents to start from. The first template is the default and is used to create a new document after starting Xara Web Designer 7 Premium. The Animation template is the default template for animation documents. The New document button on the Standard control bar creates a new document using the default template (shortcut "Ctrl + N"). You can save your own templates with the "File" > "Save template" command ? see "Changing the template document " for details. Page 224 Opening an existing document To open an existing document: Drag & drop a file. Select the file in Windows Explorer or on your desktop, and drag it over an existing open document to import it into that document, or any other part of the Web Designer Premium window to open the document. Or double click a Web Designer Premium file. Or to open a recently used file, select it from "File" > "Open recent" Or select "File" > "Open" (shortcut "Ctrl + O"). Or click the Open button on the standard control bar. The open dialog will be displayed. The dialog allows multiple file selection, "Ctrl + click" to select several files or "Shift + click" to select a range of files. As in Explorer windows, you can switch the file display to a detailed or thumbnail view with this button If Show preview in the upper right corner is checked, the selected file is shown in an even bigger preview (this does not work for a multiple file selection). Page 225 The Xara Web Designer 7 Premium window Title bar File name for currently displayed file Standard button bar Galleries bar InfoBar Toolbar Rulers Page Pasteboard Color line Status line Live drag / snapped indicators Web toolbar Document tabs for every open file The Web Designer Premium window is similar to a conventional sheet of paper on a drawing board or easel. The white rectangle represents the sheet of paper (the spread or page). The gray border is the pasteboard. You can change the size of the page by right clicking it and choosing Page Options, then click the Page Size tab. Selected document and title bar You can have more than one file open at a time in Web Designer Premium, which displays all open Page 226 documents as tabs at the top of the workspace. The current document is displayed in the workspace and its name is highlighted gray in the document tabs. The current document type is indicated in the top left corner of the Web Designer Premium window, next to the menu options. The current document receives all input. Any unsaved changes in a document are indicated with a star after the file name. Document tabs show all open documents, with the current document tab highlighted gray. Control bars These contain buttons that you can use to operate Web Designer Premium. You can customize control bars in several ways, such as re-ordering, creating, and hiding bars. The default window shows the standard button bar with commonly used buttons: You can customize the standard control bar in the same way as other control bars. Those icons with a triangle indicator in the bottom right corner have "fly-out bars" on them. Hold the mouse pointer over these icons and you'll see the fly-out bar appear, with more icons. For information on customizing control bars, refer to "Customizing Web Designer Premium ". InfoBar This is a special control bar. Its contents change when you select different tools. InfoBars specific to certain tools are described in their relevant chapters. You cannot customize the InfoBar. The InfoBar for the Selector Tool Main toolbar This is a control bar that initially contains all the tools available in Web Designer Premium (see left). You can customize the toolbar, or move tools to other control bars. Some of the toolbar icons have a small triangle indicator in the bottom right corner. This indicates that there is a flyout bar containing more tool icons. Hold your mouse pointer over the icon to see the flyout bar appear. You can then move the mouse pointer over each icon in the bar to see a tooltip indicating what each one does. Click on a tool to select it (some tools have keyboard shortcuts, too). For information on customizing control bars, refer to "Customizing Web Designer Premium ". Rulers Page 227 You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Page 228 Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 229 Selected document and title bar You can have more than one file open at a time in Web Designer Premium, which displays all open documents as tabs at the top of the workspace. The current document is displayed in the workspace and its name is highlighted gray in the document tabs. The current document type is indicated in the top left corner of the Web Designer Premium window, next to the menu options. The current document receives all input. Any unsaved changes in a document are indicated with a star after the file name. Document tabs show all open documents, with the current document tab highlighted gray. Control bars These contain buttons that you can use to operate Web Designer Premium. You can customize control bars in several ways, such as re-ordering, creating, and hiding bars. The default window shows the standard button bar with commonly used buttons: You can customize the standard control bar in the same way as other control bars. Those icons with a triangle indicator in the bottom right corner have "fly-out bars" on them. Hold the mouse pointer over these icons and you'll see the fly-out bar appear, with more icons. For information on customizing control bars, refer to "Customizing Web Designer Premium ". InfoBar This is a special control bar. Its contents change when you select different tools. InfoBars specific to certain tools are described in their relevant chapters. You cannot customize the InfoBar. The InfoBar for the Selector Tool Main toolbar Page 230 This is a control bar that initially contains all the tools available in Web Designer Premium (see left). You can customize the toolbar, or move tools to other control bars. Some of the toolbar icons have a small triangle indicator in the bottom right corner. This indicates that there is a flyout bar containing more tool icons. Hold your mouse pointer over the icon to see the flyout bar appear. You can then move the mouse pointer over each icon in the bar to see a tooltip indicating what each one does. Click on a tool to select it (some tools have keyboard shortcuts, too). For information on customizing control bars, refer to "Customizing Web Designer Premium ". Rulers You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Page 231 Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 232 Control bars These contain buttons that you can use to operate Web Designer Premium. You can customize control bars in several ways, such as re-ordering, creating, and hiding bars. The default window shows the standard button bar with commonly used buttons: You can customize the standard control bar in the same way as other control bars. Those icons with a triangle indicator in the bottom right corner have "fly-out bars" on them. Hold the mouse pointer over these icons and you'll see the fly-out bar appear, with more icons. For information on customizing control bars, refer to "Customizing Web Designer Premium ". InfoBar This is a special control bar. Its contents change when you select different tools. InfoBars specific to certain tools are described in their relevant chapters. You cannot customize the InfoBar. The InfoBar for the Selector Tool Main toolbar This is a control bar that initially contains all the tools available in Web Designer Premium (see left). You can customize the toolbar, or move tools to other control bars. Some of the toolbar icons have a small triangle indicator in the bottom right corner. This indicates that there is a flyout bar containing more tool icons. Hold your mouse pointer over the icon to see the flyout bar appear. You can then move the mouse pointer over each icon in the bar to see a tooltip indicating what each one does. Click on a tool to select it (some tools have keyboard shortcuts, too). For information on customizing control bars, refer to "Customizing Web Designer Premium ". Rulers You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Page 233 Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 234 InfoBar This is a special control bar. Its contents change when you select different tools. InfoBars specific to certain tools are described in their relevant chapters. You cannot customize the InfoBar. The InfoBar for the Selector Tool Main toolbar This is a control bar that initially contains all the tools available in Web Designer Premium (see left). You can customize the toolbar, or move tools to other control bars. Some of the toolbar icons have a small triangle indicator in the bottom right corner. This indicates that there is a flyout bar containing more tool icons. Hold your mouse pointer over the icon to see the flyout bar appear. You can then move the mouse pointer over each icon in the bar to see a tooltip indicating what each one does. Click on a tool to select it (some tools have keyboard shortcuts, too). For information on customizing control bars, refer to "Customizing Web Designer Premium ". Rulers You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Page 235 Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 236 Main toolbar This is a control bar that initially contains all the tools available in Web Designer Premium (see left). You can customize the toolbar, or move tools to other control bars. Some of the toolbar icons have a small triangle indicator in the bottom right corner. This indicates that there is a flyout bar containing more tool icons. Hold your mouse pointer over the icon to see the flyout bar appear. You can then move the mouse pointer over each icon in the bar to see a tooltip indicating what each one does. Click on a tool to select it (some tools have keyboard shortcuts, too). For information on customizing control bars, refer to "Customizing Web Designer Premium ". Rulers You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope Page 237 with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 238 Rulers You can hide the rulers, change their zero point (origin), and use them to create guidelines. For more information, see Rulers . The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second Page 239 screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 240 The status line Selected objects Available options Indicators Mouse pointer X-Y This appears at the bottom of the window. The status line tells you about the selected objects, available options, live drag/snapping indicators, and the X/Y position of the pointer. The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 241 The indicators These appear on the right of the status line: Live drag indicator This indicator shows whether live drag is active or not (it is active by default). Double click the indicator to toggle live drag on/off. When active, if you reposition, resize, or rotate an object, the whole object moves (not just an outline), making it far easier to judge the effect of your edits in real time. Drawing in the Freehand, Straight Line, Quickshape, Rectangle and Ellipse Tools is also live with this option on. If your computer is unable to cope with a particularly complex document, it will automatically turn active drag off to ensure editing remains fast and efficient. Snapped indicator This indicator is active when Snap to objects is enabled (by default in web documents - click the Snap to objects button (shown on the lower left) to toggle off and on. Snap to objects allows you to see potential snapping paths and points relative to other objects and the page center and edges by showing blue snapping lines for snapping paths and red dots for points as you drag an object. For more information on snapping, refer to "Object Handling ". X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 242 X/Y co-ordinates Web Designer Premium shows measurements relative to the bottom left corner of the page area or spread. However, this is configurable. For more information refer to "Object Handling ". Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 243 Normal/full screen modes In normal screen mode part of the window is occupied by the title bar, menu bar, and scroll bars. This can be inconvenient if you want the maximum possible editing area. Web Designer Premium has a second screen mode, fullscreen, which displays a more streamlined screen. You can configure each screen mode as you wish. For example, each can have its own configuration of the control bars. The configuration is remembered and applies whenever you swap between screen modes. Normal/full screen is controlled by "Window" > "Full Screen" or right click and choose Full Screen ("8" on the numeric keypad). To display the menu bar in full screen mode, move the pointer to the top of the screen. Page 244 Opening a second window You may want to open a second window onto the same document to: Get an enlarged or reduced view of the document; Show another part of the document; Have two views of the same area at different quality settings (quality settings are described later.) Choose "Window" > "New View" to open another window. You can have several windows open on the same document. Selecting which window to display Each window that you have currently open is displayed as a tab below the infobar. Click on a tab to display the window or click on the Window menu and choose a window name at the bottom. Ordering multiple windows "Window" > "Arrange views" helps you organize multiple windows. Each window has its own title bar but no control bars. Click on a window to make it the current window. Pressing "Ctrl + F6" steps through the windows in sequence. Arrange views displays the windows arranged vertically or, for more than three windows, as tiles. Minimizing multiple windows Minimizing one of several windows displays an icon on the background of the main Web Designer Premium window. Double click the icon to reopen the window. Page 245 Selecting which window to display Each window that you have currently open is displayed as a tab below the infobar. Click on a tab to display the window or click on the Window menu and choose a window name at the bottom. Ordering multiple windows "Window" > "Arrange views" helps you organize multiple windows. Each window has its own title bar but no control bars. Click on a window to make it the current window. Pressing "Ctrl + F6" steps through the windows in sequence. Arrange views displays the windows arranged vertically or, for more than three windows, as tiles. Minimizing multiple windows Minimizing one of several windows displays an icon on the background of the main Web Designer Premium window. Double click the icon to reopen the window. Page 246 Ordering multiple windows "Window" > "Arrange views" helps you organize multiple windows. Each window has its own title bar but no control bars. Click on a window to make it the current window. Pressing "Ctrl + F6" steps through the windows in sequence. Arrange views displays the windows arranged vertically or, for more than three windows, as tiles. Minimizing multiple windows Minimizing one of several windows displays an icon on the background of the main Web Designer Premium window. Double click the icon to reopen the window. Page 247 Minimizing multiple windows Minimizing one of several windows displays an icon on the background of the main Web Designer Premium window. Double click the icon to reopen the window. Page 248 Changing the zoom value It's often useful to enlarge your view of the document to examine details or reduce your view to get an overall impression. Scalings above 100% show an enlarged view (similar to looking through a magnifying glass); below 100% a reduced view. The only change is your view of the document; the size of the document itself and the objects in it are unchanged (changing the document size is described later). To change the zoom value you can use either the Zoom Tool , mouse, or control bars. Some shortcuts are available for quick setting of zoom values: The plain numeric keys (1, 2, 3, 4) set the zoom to between 100% and 400%. The number 5 key sets it to 50%. Using the Zoom tool To zoom: Select the Zoom Tool from the Main Toolbar. Or press "Alt + Z" to toggle between the current tool and the Zoom Tool. Or press and hold down "Alt + Z" to temporarily swap to the Zoom Tool (release "Alt + Z" to return to the previous tool). Or press "Shift + F7" to select the Zoom Tool. Changing the zoom value using the mouse If you have a mouse wheel: Hold "Ctrl" and scroll your mouse wheel to change the zoom level. You can also configure a mouse button to zoom in or out. Furthermore, you can change the mouse wheel action between scrolling and zooming in "Utilities" > "Options" > "Mouse tab" or right click and choose "Page Options" > "Mouse" tab. The opposite action is available then by pressing "Ctrl". Alternatively, select the Zoom Tool , and Click to zoom in (enlarge). "Shift + click" to reduce the zoom value (to see more of the document). Drag the mouse diagonally to create a rectangle. When you release the mouse button, the area within the rectangle is enlarged to fit the window. Changing the zoom using the zoom InfoBar/control bar There is a flyout bar on the standard toolbar which gives you quick access to zoom functions, without having to go into the Zoom Tool. There is also a flyout bar on the Zoom Tool icon on the main toolbar. Hold the mouse pointer over the zoom icon on the standard toolbar to see the flyout bar. To change the zoom: Shortcut "Ctrl + R". Click the Previous zoom button. This is the zoom value before the current setting. Using this button lets you flip zoom in and out on the document. This is useful for switching between examining an area in detail and an overall view. The previous zoom value is stored for each window. You can swap between windows and the previous Page 249 zoom values are retained. Shortcut "1" Click the Zoom to 100% button. The zoom factor is changed to 100%. Shortcut "Ctrl + Shift + J". Click the Zoom to drawing button. The window shows all the objects in the document. Shortcut "Ctrl + Shift + P". Click the Zoom to Page button. The window shows the entire page or pair of pages. Shortcut "Ctrl + Shift + Z". Click the Zoom to Selection button. The selected object or objects fill the window. Type a value into the text box. Press " ¿" to implement the change, or select preset zoom values including those above (page, drawing, selected, previous) in the drop-down menu. Page 250 Using the Zoom tool To zoom: Select the Zoom Tool from the Main Toolbar. Or press "Alt + Z" to toggle between the current tool and the Zoom Tool. Or press and hold down "Alt + Z" to temporarily swap to the Zoom Tool (release "Alt + Z" to return to the previous tool). Or press "Shift + F7" to select the Zoom Tool. Changing the zoom value using the mouse If you have a mouse wheel: Hold "Ctrl" and scroll your mouse wheel to change the zoom level. You can also configure a mouse button to zoom in or out. Furthermore, you can change the mouse wheel action between scrolling and zooming in "Utilities" > "Options" > "Mouse tab" or right click and choose "Page Options" > "Mouse" tab. The opposite action is available then by pressing "Ctrl". Alternatively, select the Zoom Tool , and Click to zoom in (enlarge). "Shift + click" to reduce the zoom value (to see more of the document). Drag the mouse diagonally to create a rectangle. When you release the mouse button, the area within the rectangle is enlarged to fit the window. Changing the zoom using the zoom InfoBar/control bar There is a flyout bar on the standard toolbar which gives you quick access to zoom functions, without having to go into the Zoom Tool. There is also a flyout bar on the Zoom Tool icon on the main toolbar. Hold the mouse pointer over the zoom icon on the standard toolbar to see the flyout bar. To change the zoom: Shortcut "Ctrl + R". Click the Previous zoom button. This is the zoom value before the current setting. Using this button lets you flip zoom in and out on the document. This is useful for switching between examining an area in detail and an overall view. The previous zoom value is stored for each window. You can swap between windows and the previous zoom values are retained. Shortcut "1" Click the Zoom to 100% button. The zoom factor is changed to 100%. Shortcut "Ctrl + Shift + J". Click the Zoom to drawing button. The window shows all the objects in the document. Shortcut "Ctrl + Shift + P". Click the Zoom to Page button. The window shows the entire page or pair of pages. Shortcut "Ctrl + Shift + Z". Click the Zoom to Selection button. The selected object or objects fill the window. Page 251 Type a value into the text box. Press " ¿" to implement the change, or select preset zoom values including those above (page, drawing, selected, previous) in the drop-down menu. Page 252 Changing the zoom value using the mouse If you have a mouse wheel: Hold "Ctrl" and scroll your mouse wheel to change the zoom level. You can also configure a mouse button to zoom in or out. Furthermore, you can change the mouse wheel action between scrolling and zooming in "Utilities" > "Options" > "Mouse tab" or right click and choose "Page Options" > "Mouse" tab. The opposite action is available then by pressing "Ctrl". Alternatively, select the Zoom Tool , and Click to zoom in (enlarge). "Shift + click" to reduce the zoom value (to see more of the document). Drag the mouse diagonally to create a rectangle. When you release the mouse button, the area within the rectangle is enlarged to fit the window. Changing the zoom using the zoom InfoBar/control bar There is a flyout bar on the standard toolbar which gives you quick access to zoom functions, without having to go into the Zoom Tool. There is also a flyout bar on the Zoom Tool icon on the main toolbar. Hold the mouse pointer over the zoom icon on the standard toolbar to see the flyout bar. To change the zoom: Shortcut "Ctrl + R". Click the Previous zoom button. This is the zoom value before the current setting. Using this button lets you flip zoom in and out on the document. This is useful for switching between examining an area in detail and an overall view. The previous zoom value is stored for each window. You can swap between windows and the previous zoom values are retained. Shortcut "1" Click the Zoom to 100% button. The zoom factor is changed to 100%. Shortcut "Ctrl + Shift + J". Click the Zoom to drawing button. The window shows all the objects in the document. Shortcut "Ctrl + Shift + P". Click the Zoom to Page button. The window shows the entire page or pair of pages. Shortcut "Ctrl + Shift + Z". Click the Zoom to Selection button. The selected object or objects fill the window. Type a value into the text box. Press " ¿" to implement the change, or select preset zoom values including those above (page, drawing, selected, previous) in the drop-down menu. Page 253 Changing the zoom using the zoom InfoBar/control bar There is a flyout bar on the standard toolbar which gives you quick access to zoom functions, without having to go into the Zoom Tool. There is also a flyout bar on the Zoom Tool icon on the main toolbar. Hold the mouse pointer over the zoom icon on the standard toolbar to see the flyout bar. To change the zoom: Shortcut "Ctrl + R". Click the Previous zoom button. This is the zoom value before the current setting. Using this button lets you flip zoom in and out on the document. This is useful for switching between examining an area in detail and an overall view. The previous zoom value is stored for each window. You can swap between windows and the previous zoom values are retained. Shortcut "1" Click the Zoom to 100% button. The zoom factor is changed to 100%. Shortcut "Ctrl + Shift + J". Click the Zoom to drawing button. The window shows all the objects in the document. Shortcut "Ctrl + Shift + P". Click the Zoom to Page button. The window shows the entire page or pair of pages. Shortcut "Ctrl + Shift + Z". Click the Zoom to Selection button. The selected object or objects fill the window. Type a value into the text box. Press " ¿" to implement the change, or select preset zoom values including those above (page, drawing, selected, previous) in the drop-down menu. Page 254 Sliding the document within the window The quickest and easiest way to move around the document is to use the middle mouse button (normally the mouse wheel) if you have one. Click and hold the middle button down and then move the mouse. Release the button to return to your previous tool. To move the document within the window you can also: Use the scroll bars and arrows at the side of the window. Use the mouse wheel to scroll the document up and down ("Shift + mouse wheel" for left and right) Or select the Push Tool from the main toolbar ("H"). Or press the space bar or "Alt + X" to toggle between the current tool and the Push Tool. Or press and hold down the space bar or "Alt + X" to temporarily switch to the Push Tool (release key(s) to return to the previous tool). You can then use the mouse to drag the document around in the window. The Push Tool InfoBar is the same as the Zoom Tool InfoBar (described above). Displaying the scroll bars is optional. Choose "Window" > "Bars" > "Scrollbars" to turn them off. You can change the mouse wheel action between scrolling and zooming in "Utilities" > "Options" > " Mouse" or right click and choose "Page Options" > "Mouse" . The opposite action is available then by pressing "Ctrl". Page 255 Changing the page size When you open a new Web Designer Premium document, the page size is 760 x 700 pixels (SVA web page). However, you can change the page size if required, e.g. to support other screen resolutions such as VGA. 1. Choose Menu "Utilities" > "Options" or right click a page and choose "Page Options". 2. If necessary, click the Page Size tab. 3. Choose the required page size. If you select Custom in the size selector, you can set a custom width and height in the fields below it. Every page in the document (exported website) can have a different size. With the option All pages in website the same size you will set the page size to the same value for all pages in the document. You can resize the height and width of the page by dragging the lower and right border of the page with the selector tool. Page 256 Multiple pages in the document A Xara Web Designer 7 Premium document can have multiple pages. Each page is exported to a separate HTML page and so each document in Xara Web Designer 7 Premium corresponds to a website. By default when you open or create a new web document, Web Designer Premium shows only one page. Print documents however are displayed in multiple page view by default. Right click a page or its pasteboard and select/deselect Multiple Page View to toggle between display modes. The current page If you click a page in a multi-page document it will become the current page. The current page is relevant when inserting, duplicating, or moving pages as described in the following sections. The current page in the document is shown by indicators on the page's corners. Inserting pages into your document Right click a page and choose New Page or New double page spread . A new blank page is inserted after the page. or Right click a page and choose Duplicate current page or Duplicate current double page spread . A duplicate of the current page is inserted after the page. The new page will be the same as the original page, including its size and orientation, and will include all its content so that you can use it as a template for new content. You can also use the Menu items under "Edit" > "Pages" In addition, the standard toolbar has a flyout bar which allows you to add, duplicate and delete pages quickly. Hold the mouse pointer over each icon in the bar to see a tooltip for each available operation. You can add a new blank page, duplicate the current page or delete the current page. Copying and pasting pages You can copy and paste whole pages in the current document or paste pages to another document. This copies the page dimensions, layers and other page attributes in addition to all the objects on the page. To copy the current page, clear any current selection by pressing Esc or by clicking on an empty part of the page or pasteboard. The status line says "No objects selected". Right click an empty part of a page and choose Copy Page Page 257 (or press "Ctrl + C"). When you paste a copied page, it is added immediately following the current page. To paste use "Ctrl + V" or right click the page and choose Paste > Page from the context menu. Note: If the document into which you paste a page has the All pages in document the same option enabled in File > Page Options , the dimensions of the pasted page will be overridden by the page dimensions of the document. So the new page will be given the same dimensions as all the other pages in the document. Moving pages within the document If you wish to move a page's location within the document page order you can do so. To move the current page: Choose "Edit" > "Pages" > "Move page up" or right click and choose Move page up to swap the current page with the one previous to it. Choose "Edit" > "Pages" > "Move page down" or right click and choose Move page down to swap the current page with the one after it. These menu options will be grayed out of if you are on the first or the last page of the document respectively. Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather Page 258 than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 259 The current page If you click a page in a multi-page document it will become the current page. The current page is relevant when inserting, duplicating, or moving pages as described in the following sections. The current page in the document is shown by indicators on the page's corners. Inserting pages into your document Right click a page and choose New Page or New double page spread . A new blank page is inserted after the page. or Right click a page and choose Duplicate current page or Duplicate current double page spread . A duplicate of the current page is inserted after the page. The new page will be the same as the original page, including its size and orientation, and will include all its content so that you can use it as a template for new content. You can also use the Menu items under "Edit" > "Pages" In addition, the standard toolbar has a flyout bar which allows you to add, duplicate and delete pages quickly. Hold the mouse pointer over each icon in the bar to see a tooltip for each available operation. You can add a new blank page, duplicate the current page or delete the current page. Copying and pasting pages You can copy and paste whole pages in the current document or paste pages to another document. This copies the page dimensions, layers and other page attributes in addition to all the objects on the page. To copy the current page, clear any current selection by pressing Esc or by clicking on an empty part of the page or pasteboard. The status line says "No objects selected". Right click an empty part of a page and choose Copy Page (or press "Ctrl + C"). When you paste a copied page, it is added immediately following the current page. To paste use "Ctrl + V" or right click the page and choose Paste > Page from the context menu. Note: If the document into which you paste a page has the All pages in document the same option enabled in File > Page Options , the dimensions of the pasted page will be overridden by the page dimensions of the document. So the new page will be given the same dimensions as all the other pages in the document. Moving pages within the document Page 260 If you wish to move a page's location within the document page order you can do so. To move the current page: Choose "Edit" > "Pages" > "Move page up" or right click and choose Move page up to swap the current page with the one previous to it. Choose "Edit" > "Pages" > "Move page down" or right click and choose Move page down to swap the current page with the one after it. These menu options will be grayed out of if you are on the first or the last page of the document respectively. Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 261 Inserting pages into your document Right click a page and choose New Page or New double page spread . A new blank page is inserted after the page. or Right click a page and choose Duplicate current page or Duplicate current double page spread . A duplicate of the current page is inserted after the page. The new page will be the same as the original page, including its size and orientation, and will include all its content so that you can use it as a template for new content. You can also use the Menu items under "Edit" > "Pages" In addition, the standard toolbar has a flyout bar which allows you to add, duplicate and delete pages quickly. Hold the mouse pointer over each icon in the bar to see a tooltip for each available operation. You can add a new blank page, duplicate the current page or delete the current page. Copying and pasting pages You can copy and paste whole pages in the current document or paste pages to another document. This copies the page dimensions, layers and other page attributes in addition to all the objects on the page. To copy the current page, clear any current selection by pressing Esc or by clicking on an empty part of the page or pasteboard. The status line says "No objects selected". Right click an empty part of a page and choose Copy Page (or press "Ctrl + C"). When you paste a copied page, it is added immediately following the current page. To paste use "Ctrl + V" or right click the page and choose Paste > Page from the context menu. Note: If the document into which you paste a page has the All pages in document the same option enabled in File > Page Options , the dimensions of the pasted page will be overridden by the page dimensions of the document. So the new page will be given the same dimensions as all the other pages in the document. Moving pages within the document If you wish to move a page's location within the document page order you can do so. To move the current page: Choose "Edit" > "Pages" > "Move page up" or right click and choose Move page up to swap the current page with the one previous to it. Choose "Edit" > "Pages" > "Move page down" or right click and choose Move page down to swap the current page with the one after it. These menu options will be grayed out of if you are on the first or the last page of the document Page 262 respectively. Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 263 Copying and pasting pages You can copy and paste whole pages in the current document or paste pages to another document. This copies the page dimensions, layers and other page attributes in addition to all the objects on the page. To copy the current page, clear any current selection by pressing Esc or by clicking on an empty part of the page or pasteboard. The status line says "No objects selected". Right click an empty part of a page and choose Copy Page (or press "Ctrl + C"). When you paste a copied page, it is added immediately following the current page. To paste use "Ctrl + V" or right click the page and choose Paste > Page from the context menu. Note: If the document into which you paste a page has the All pages in document the same option enabled in File > Page Options , the dimensions of the pasted page will be overridden by the page dimensions of the document. So the new page will be given the same dimensions as all the other pages in the document. Moving pages within the document If you wish to move a page's location within the document page order you can do so. To move the current page: Choose "Edit" > "Pages" > "Move page up" or right click and choose Move page up to swap the current page with the one previous to it. Choose "Edit" > "Pages" > "Move page down" or right click and choose Move page down to swap the current page with the one after it. These menu options will be grayed out of if you are on the first or the last page of the document respectively. Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: Page 264 All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 265 Moving pages within the document If you wish to move a page's location within the document page order you can do so. To move the current page: Choose "Edit" > "Pages" > "Move page up" or right click and choose Move page up to swap the current page with the one previous to it. Choose "Edit" > "Pages" > "Move page down" or right click and choose Move page down to swap the current page with the one after it. These menu options will be grayed out of if you are on the first or the last page of the document respectively. Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 266 Removing pages from your document To delete the current page from your document right click and choose Delete current page or select "Edit" > "Pages" > "Delete current page" . The current page and all its content will be deleted. Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 267 Navigating between pages As well as the usual methods of moving through your document (such as scrollbars and the mouse wheel), there are also some other ways to navigate through the pages: Page up: Moves up the document. The amount moved depends on your zoom level. The further you are zoomed out the bigger the move. Ctrl + Page up: Go to and center on the previous page. Page down: Moves down the document. The amount moved depends on your zoom level. The further you are zoomed out the greater the move. Ctrl + Page down: Go to and center on the next page. Or click the up or down arrow on the status line: The status line is also useful for knowing what page(s) you are currently viewing. Note: All of these movements are relative to the page you are viewing, not the current page. Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 268 Page & Layer Gallery You can also use the Page & Layer Gallery to conveniently manage the pages in your document. It allows you to view, add, duplicate, delete, re-order and rename pages all from a single view. By default the Page & Layer Gallery is open on the right of the Web Designer Premium window in pages mode, only displaying pages (rather than their contents) with a thumbnail for each page of the current design. Click on a thumbnail to go to that page. For more information see Page & Layer Gallery . Page 269 Saving the document This section covers saving in Web Designer Premium's own format (native format). Refer to Importing and Exporting for details of exporting in other formats. We recommend that you always save documents regularly. A complicated document may represent many hours of work and power failures or computer crashes always happen at just the wrong moment. Make sure you have the automatic backup facility turned on, so that regular backups are taken of your open documents as you work. See the Automatic Backups section below for details. Save option (on the File menu) ("Ctrl + S", or click the Save button on the standard control bar.) This provides a quick way to save a document using the same file name. The option is disabled unless the document has unsaved changes, i.e. you have made changes, but haven't saved them to disk. For a new document that has not been saved to disk, this option acts like "Save as" (described below). Save as (on the File menu) This opens a dialog box letting you save the document under a different name or to a different directory. This option is useful for making backups of Web Designer Premium documents. Save all (on the File menu) This acts like a series of Save or Save As commands to save all currently open files. Page 270 Save option (on the File menu) ("Ctrl + S", or click the Save button on the standard control bar.) This provides a quick way to save a document using the same file name. The option is disabled unless the document has unsaved changes, i.e. you have made changes, but haven't saved them to disk. For a new document that has not been saved to disk, this option acts like "Save as" (described below). Save as (on the File menu) This opens a dialog box letting you save the document under a different name or to a different directory. This option is useful for making backups of Web Designer Premium documents. Save all (on the File menu) This acts like a series of Save or Save As commands to save all currently open files. Page 271 Save as (on the File menu) This opens a dialog box letting you save the document under a different name or to a different directory. This option is useful for making backups of Web Designer Premium documents. Save all (on the File menu) This acts like a series of Save or Save As commands to save all currently open files. Page 272 Save all (on the File menu) This acts like a series of Save or Save As commands to save all currently open files. Page 273 Support folders Some documents which are used to create websites need to reference external files which cannot be embedded in the .xar design file. For example you may have a Flash (.swf) file which is used on your website and so you'll want to keep that file with the design file because you can't export a fully working website from the design file without also having the Flash file. And if you were to send the design to someone else, or move it to another computer, you'd want the referenced Flash file to go along with the main design file. So Xara Web Designer 7 Premium uses an optional "support folder" right alongside the design file to hold these important external files. Support folder naming The design file and its corresponding support folder are tied together by their names. The support folder for "mySite.xar" is always "mySite_xar_files". This naming convention makes it obvious which support folder belongs to which design file. So if you rename, copy or move a design file, always remember to do the same to the corresponding support folder, if it exists! And if you send a design file to someone else, send any support files folder along with it. If you load a design that has a support folder, and then subsequently do a Save As to save another copy of that design, Xara Web Designer 7 Premium will copy the whole support folder too, if there is one. Support folder contents When you use the Placeholder Tab of the Web Properties dialog to insert a reference to an external file into your website design (using the Browse buttons), Xara Web Designer 7 Premium will automatically copy that file into the design's support folder for you. If the support folder doesn't already exist, it will be created. Note that if you subsequently change a placeholder object to reference a different file, the original file will not be automatically deleted from the support folder. So if a file is no longer needed, you need to remove it manually. You can also manually copy any files you like into the support folder of a design, creating the folder manually if required. Xara Web Designer 7 Premium will never delete any files from it, whether or not they are referenced from the corresponding design file. The reason for this is that there are many different ways in which a design may reference an external file. For example you may insert a complex piece of HTML code into your design, which somewhere references an external file which you've placed in the support folder. Or perhaps one of the external files references another external file! There's no way that Xara Web Designer 7 Premium can be sure that a file is not used by the website, so it never deletes files. Exporting websites with support folders When you export a website document, any files in the corresponding support folder are copied to the folder which contains all the generated images for your website. So if you export "mySite.xar" to "index.htm", then any files in folder "mySite_xar_files" are copied into the "index_htm_files folder". Page 274 Support folder naming The design file and its corresponding support folder are tied together by their names. The support folder for "mySite.xar" is always "mySite_xar_files". This naming convention makes it obvious which support folder belongs to which design file. So if you rename, copy or move a design file, always remember to do the same to the corresponding support folder, if it exists! And if you send a design file to someone else, send any support files folder along with it. If you load a design that has a support folder, and then subsequently do a Save As to save another copy of that design, Xara Web Designer 7 Premium will copy the whole support folder too, if there is one. Support folder contents When you use the Placeholder Tab of the Web Properties dialog to insert a reference to an external file into your website design (using the Browse buttons), Xara Web Designer 7 Premium will automatically copy that file into the design's support folder for you. If the support folder doesn't already exist, it will be created. Note that if you subsequently change a placeholder object to reference a different file, the original file will not be automatically deleted from the support folder. So if a file is no longer needed, you need to remove it manually. You can also manually copy any files you like into the support folder of a design, creating the folder manually if required. Xara Web Designer 7 Premium will never delete any files from it, whether or not they are referenced from the corresponding design file. The reason for this is that there are many different ways in which a design may reference an external file. For example you may insert a complex piece of HTML code into your design, which somewhere references an external file which you've placed in the support folder. Or perhaps one of the external files references another external file! There's no way that Xara Web Designer 7 Premium can be sure that a file is not used by the website, so it never deletes files. Exporting websites with support folders When you export a website document, any files in the corresponding support folder are copied to the folder which contains all the generated images for your website. So if you export "mySite.xar" to "index.htm", then any files in folder "mySite_xar_files" are copied into the "index_htm_files folder". Page 275 Support folder contents When you use the Placeholder Tab of the Web Properties dialog to insert a reference to an external file into your website design (using the Browse buttons), Xara Web Designer 7 Premium will automatically copy that file into the design's support folder for you. If the support folder doesn't already exist, it will be created. Note that if you subsequently change a placeholder object to reference a different file, the original file will not be automatically deleted from the support folder. So if a file is no longer needed, you need to remove it manually. You can also manually copy any files you like into the support folder of a design, creating the folder manually if required. Xara Web Designer 7 Premium will never delete any files from it, whether or not they are referenced from the corresponding design file. The reason for this is that there are many different ways in which a design may reference an external file. For example you may insert a complex piece of HTML code into your design, which somewhere references an external file which you've placed in the support folder. Or perhaps one of the external files references another external file! There's no way that Xara Web Designer 7 Premium can be sure that a file is not used by the website, so it never deletes files. Exporting websites with support folders When you export a website document, any files in the corresponding support folder are copied to the folder which contains all the generated images for your website. So if you export "mySite.xar" to "index.htm", then any files in folder "mySite_xar_files" are copied into the "index_htm_files folder". Page 276 Exporting websites with support folders When you export a website document, any files in the corresponding support folder are copied to the folder which contains all the generated images for your website. So if you export "mySite.xar" to "index.htm", then any files in folder "mySite_xar_files" are copied into the "index_htm_files folder". Page 277 Closing the document To close the document: Choose "File" > "Close". Or press "Ctrl + F4", or "Ctrl + W". Or click the smaller, lower X of the two in the top right hand corner. Page 278 Automatic Backups Xara Web Designer 7 Premium will optionally save regular backup copies of your open documents while you work. This helps you avoid losing your work in the event of a power failure or other abnormal program closure. It's also useful if you decide to return to an earlier version of your document, should you want to do so. To turn automatic backups on or off, open the "Utilities" > "Options" dialog and choose the Backups tab. Backup open documents To turn backups on select this checkbox and choose how often you would like backups to be taken. The suggested period is 10 mins, which means each open document will be backed up if it's more than 10 mins since the last backup of that document was taken (or since the document was created or opened). Note that once the configured period since the last backup has expired, the next backup is only saved when the program has been idle for at least 15 secs. This is to avoid interrupting your work as much as possible and to avoid backing up the document while it is being actively modified. In normal use it's unlikely that there won't be regular inactive periods of 15 secs or more, allowing a backup to be taken soon after it is due. But note that if you are actively editing for an extended period of time it could be significantly longer than the configured backup period before the next backup runs. The Automatic Backup facility does not save modifications to open 'edit inside' sub-documents. Only the parent main document is saved when a scheduled backup runs, in its current state without the unsaved group edits. For this reason it's recommended that you save 'edit inside' edits back to the parent document regularly. When a backup is taken, you'll see the save progress bar appear at the bottom of the Xara Web Designer 7 Premium window while the save is completed. Backup location User the Browse button if you want to change the folder where your backups are stored. You can access the backup documents saved here at any time using the "File" > "Open recent" > " Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. Revisions By default up to 10 revisions of each design are kept in your backups folder, but you can choose to change this number in the revisions field. Older revisions in excess of the number chosen are deleted Page 279 automatically. Each backup file is named using the name of the document from which it is taken, suffixed by the date and time at which the backup was taken. Warning : Note that if you have multiple documents that share the same filename in different folders on your computer, their backups will also share the same names in the backups folder. Therefore try and use unique filenames for your designs to avoid the backups of one design overwriting another with the same name. Untitled documents Documents that you have created and not saved are backed up using the name "Untitled" followed by a number and the date/time. This name and number corresponds to those shown in the titlebar when you are editing new unsaved documents. Warning : Since all new unsaved documents are named Untitled1, Untitled2, etc. backups of these documents are likely to be overwritten relatively quickly. Therefore you should always save important documents with a unique name of your choice, so that you can easily identify backups of that document in the backups folder. Backup open documents on program close The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from Page 280 which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 281 Backup open documents To turn backups on select this checkbox and choose how often you would like backups to be taken. The suggested period is 10 mins, which means each open document will be backed up if it's more than 10 mins since the last backup of that document was taken (or since the document was created or opened). Note that once the configured period since the last backup has expired, the next backup is only saved when the program has been idle for at least 15 secs. This is to avoid interrupting your work as much as possible and to avoid backing up the document while it is being actively modified. In normal use it's unlikely that there won't be regular inactive periods of 15 secs or more, allowing a backup to be taken soon after it is due. But note that if you are actively editing for an extended period of time it could be significantly longer than the configured backup period before the next backup runs. The Automatic Backup facility does not save modifications to open 'edit inside' sub-documents. Only the parent main document is saved when a scheduled backup runs, in its current state without the unsaved group edits. For this reason it's recommended that you save 'edit inside' edits back to the parent document regularly. When a backup is taken, you'll see the save progress bar appear at the bottom of the Xara Web Designer 7 Premium window while the save is completed. Backup location User the Browse button if you want to change the folder where your backups are stored. You can access the backup documents saved here at any time using the "File" > "Open recent" > " Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. Revisions By default up to 10 revisions of each design are kept in your backups folder, but you can choose to change this number in the revisions field. Older revisions in excess of the number chosen are deleted automatically. Each backup file is named using the name of the document from which it is taken, suffixed by the date and time at which the backup was taken. Warning : Note that if you have multiple documents that share the same filename in different folders on your computer, their backups will also share the same names in the backups folder. Therefore try and use unique filenames for your designs to avoid the backups of one design overwriting another with the same name. Untitled documents Documents that you have created and not saved are backed up using the name "Untitled" followed by a number and the date/time. This name and number corresponds to those shown in the titlebar when you are editing new unsaved documents. Warning : Since all new unsaved documents are named Untitled1, Untitled2, etc. backups of these documents are likely to be overwritten relatively quickly. Therefore you should always save important documents with a unique name of your choice, so that you can easily identify backups of that document in the backups folder. Backup open documents on program close Page 282 The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 283 Backup location User the Browse button if you want to change the folder where your backups are stored. You can access the backup documents saved here at any time using the "File" > "Open recent" > " Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. Revisions By default up to 10 revisions of each design are kept in your backups folder, but you can choose to change this number in the revisions field. Older revisions in excess of the number chosen are deleted automatically. Each backup file is named using the name of the document from which it is taken, suffixed by the date and time at which the backup was taken. Warning : Note that if you have multiple documents that share the same filename in different folders on your computer, their backups will also share the same names in the backups folder. Therefore try and use unique filenames for your designs to avoid the backups of one design overwriting another with the same name. Untitled documents Documents that you have created and not saved are backed up using the name "Untitled" followed by a number and the date/time. This name and number corresponds to those shown in the titlebar when you are editing new unsaved documents. Warning : Since all new unsaved documents are named Untitled1, Untitled2, etc. backups of these documents are likely to be overwritten relatively quickly. Therefore you should always save important documents with a unique name of your choice, so that you can easily identify backups of that document in the backups folder. Backup open documents on program close The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Page 284 Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 285 Revisions By default up to 10 revisions of each design are kept in your backups folder, but you can choose to change this number in the revisions field. Older revisions in excess of the number chosen are deleted automatically. Each backup file is named using the name of the document from which it is taken, suffixed by the date and time at which the backup was taken. Warning : Note that if you have multiple documents that share the same filename in different folders on your computer, their backups will also share the same names in the backups folder. Therefore try and use unique filenames for your designs to avoid the backups of one design overwriting another with the same name. Untitled documents Documents that you have created and not saved are backed up using the name "Untitled" followed by a number and the date/time. This name and number corresponds to those shown in the titlebar when you are editing new unsaved documents. Warning : Since all new unsaved documents are named Untitled1, Untitled2, etc. backups of these documents are likely to be overwritten relatively quickly. Therefore you should always save important documents with a unique name of your choice, so that you can easily identify backups of that document in the backups folder. Backup open documents on program close The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups Page 286 You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 287 Untitled documents Documents that you have created and not saved are backed up using the name "Untitled" followed by a number and the date/time. This name and number corresponds to those shown in the titlebar when you are editing new unsaved documents. Warning : Since all new unsaved documents are named Untitled1, Untitled2, etc. backups of these documents are likely to be overwritten relatively quickly. Therefore you should always save important documents with a unique name of your choice, so that you can easily identify backups of that document in the backups folder. Backup open documents on program close The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 288 Backup open documents on program close The Backups tab in the Options dialog also allows you to turn on automatic backup and restore . When this option is on, when the you close Xara Web Designer 7 Premium you will not be prompted to save any modified documents that you have open. Instead all open documents are backed up to the backups folder and the program closes. Then when you next start the program, the same documents are automatically reloaded so that you can continue working where you left off. Note that if you have any "Edit inside" sub-document views open, these are silently closed and saved back to the main document when the program is closed, and the main document is backed up. The 'edit inside' sub-document views are not re-opened on next program start. See editing inside groups. Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 289 Recovering from abnormal program closures If you have automatic backups turned on and the program closes abnormally (perhaps due to a power failure for example) the program should detect this when it is next restarted. It will then offer you the chance to restore the most recent backup version of each document that was open at the time of the last backup. Abnormal closure will not be detected if no automatic backup completed since the last normal program closure. Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 290 Backups on system shut down If you shut down Windows without first closing the program, all open documents are backed up to the backup folder even if 'Backup open documents on program close' is not turned on. This allows system shutdown to proceed without Xara Web Designer 7 Premium interrupting it by prompting you about unsaved or modified documents. On next program startup you'll be asked whether or not you want to restore the documents that were open at the time of the system shut down. Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 291 Recovering backups You can access your document backups using the "File" > "Open recent" > "Backups" menu option. This opens a file dialog onto your backup folder so that you can browse, open, or delete any of your backup files. It's a good idea to use this file dialog to clear out any old unwanted backups periodically. Note that when you load a backup document, it is not automatically associated with the design file from which the backup was taken. It's treated as an independent document in its own right. Therefore if you decide to keep a backup document you should use "File" > "Save As" to save it elsewhere with a suitable name. Page 292 On-screen grid To help you lay out your document, Web Designer Premium can display a grid on the screen (the grid appears only on the screen; it is never exported or printed.) The grid helps you align objects (similar to using graph paper as a drawing aid). Right click and choose "Show Grid/Guides" > "Show Grid" to turn display of the grid on/off or choose "Snap to" > "Snap to Grid". You can also choose "Window" > "Snap to Grid" . The grid points then act like magnets, and as you move objects, they snap to the nearest grid point. By default web documents have snap to grid on, with a 1 pixel grid. The type of grid (isometric/rectangular), the 0,0 point (the origin), and spacing of grid points is controlled by the Grid & Rulers tab of the options dialog box. Any changes you make apply only to the selected document. Magnetic object snapping is also enabled by default in web documents. Object snapping is a very powerful way of accurately aligning lines, points and the edges of objects to any other object so they exactly touch. You can even use this to align the centers of objects, or align objects to the center of the page, or align them horizontally and vertically anywhere in the middle of the page or edge of the page. To toggle object snapping, click the Snap to objects button or right click and choose "Snap to" > "Snap to Objects". You can also choose "Window" > "Snap to Grid" . Refer to Object Handling for details on snapping to grid and snapping to objects. Page 293 Rulers Rulers are turned off by default. To turn them on: Right click and choose "Show Grid/Guides" > "Show Rulers" to turn display of the grid on/off. Press "Ctrl + Shift + R". Or select "Window" > "Bars" > "Show Rulers". Web Designer Premium uses rulers to: Control text margins, tabs and indents in the Text Tool. Let you know which part of the page you are viewing; Show the current pointer X/Y position; Apply guidelines. If "Window" > "Snap to grid" is active, guidelines snap to divisions on the ruler. For more information on guidelines, refer to the guides & guidelines section in "Object Handling". As you create or scale objects, you can use the rulers to check their size. You can also more accurately use the Selector Tool (see "Selecting objects" for more information). Rulers are displayed at the left and top of the window. A dotted line on each ruler follows the current pointer position. The units and number of divisions on the rulers are the same as those set for customizing the on-screen grid. These are set using the Grid & Ruler Tab of the options dialog box. The current units and any scaling factor are displayed on the right hand end of the top ruler. Displaying/hiding rulers Right click and choose "Show Grid/Guides" > "Show Rulers" ("Ctrl + Shift + R") to turn rulers on/off. Any change applies to the current window and subsequent windows you open. It does not affect other open windows. Changing the ruler zero points It is often easier to measure objects if you align the origin (0,0) point of the rulers with the object. To move the origin (0,0) point, drag the square at the intersection of the two rulers. You can drag vertically or horizontally along the rulers or over any part of the Web Designer Premium editing window. As you do, a dotted line will outline the new position. This also moves the grid origin so that divisions on the ruler always align with the grid. You can also move the zero point under the Grid & Ruler tab of the Options dialog. Page 294 Displaying/hiding rulers Right click and choose "Show Grid/Guides" > "Show Rulers" ("Ctrl + Shift + R") to turn rulers on/off. Any change applies to the current window and subsequent windows you open. It does not affect other open windows. Changing the ruler zero points It is often easier to measure objects if you align the origin (0,0) point of the rulers with the object. To move the origin (0,0) point, drag the square at the intersection of the two rulers. You can drag vertically or horizontally along the rulers or over any part of the Web Designer Premium editing window. As you do, a dotted line will outline the new position. This also moves the grid origin so that divisions on the ruler always align with the grid. You can also move the zero point under the Grid & Ruler tab of the Options dialog. Page 295 Changing the ruler zero points It is often easier to measure objects if you align the origin (0,0) point of the rulers with the object. To move the origin (0,0) point, drag the square at the intersection of the two rulers. You can drag vertically or horizontally along the rulers or over any part of the Web Designer Premium editing window. As you do, a dotted line will outline the new position. This also moves the grid origin so that divisions on the ruler always align with the grid. You can also move the zero point under the Grid & Ruler tab of the Options dialog. Page 296 View quality There are five different quality settings available in the "Windows" > "Quality" menu, which affect how the document appears in Xara Web Designer 7 Premium: Outline only. This is now fully anti-aliased for higher quality screen display. Outline with blend steps. Full color (no anti-aliasing). High quality (full anti-aliasing and image smoothing) Very high quality (best anti-aliasing in the industry. New bi-cubic photo display considerably improves the quality of scaled down photos). Full color shows the document colored, but with anti-aliasing turned off. On the outline setting only the outlines of the shapes appear (they are drawn as wire frames). This makes it easier to select objects hidden behind other objects. The quality setting has no effect on how the document exports or prints, except for bitmap exports which do use the current quality setting. Page 297 Galleries Xara Web Designer 7 Premium uses galleries to provide convenient access to libraries of content such as templates, fonts, colors, clip-art, line attributes, and bitmaps/photos. This section of the help gives general information on features which are common to multiple galleries. Individual sections describe features specific to a particular gallery. By default the Page & Layer Gallery is open in Pages mode (displaying only pages, not their layers) and docked on the right of the Web Designer Premium window Page & Layer Designs Bitmap Lines Fill The Page & Layer Gallery shows you, and allows you to manipulate, the pages in your document and the layers within each page. The Designs and Fill Galleries allow you to choose from different templates and styles provided with Xara Web Designer 7 Premium. The Bitmap Gallery shows you the bitmaps and photos which are used by all open documents. Some galleries are described in detail later. Displaying a gallery To display a gallery: Page 298 1. Click or hover the mouse pointer over the vertical tab for the gallery to the right of the workspace (the gallery bar). The gallery opens automatically. When you move the mouse pointer away from the gallery, it automatically closes. 2. To keep a gallery open while you work, click the Auto Hide (pin) button in its top right corner. The Auto Hide button changes so the pin points downwards to indicate that the gallery is now 'pinned' to the workspace. 3. To close a 'pinned' gallery, see Closing a Gallery. Unpinned: gallery closes when you move the mouse pointer away from the gallery. Pinned: gallery stays open when you move the mouse pointer away, and can also be moved and docked elsewhere. Note: By default the Line and Fill Galleries do not display their title, just their individual icons, until they have been opened. Web Designer Premium always displays the title of the last gallery that you have viewed. Moving and docking a gallery You can 'detach' any gallery from the gallery bar and move it to a more convenient location anywhere in the workspace. You can also dock the gallery (or a gallery group, see Grouping Galleries) in the top, bottom, left or right of the workspace. You can move a gallery anywhere in the workspace To move a gallery: 1. Open a gallery and click the Auto Hide button to pin the gallery. The button changes to a downward-pointing pin to indicate that the gallery can be moved and pinned elsewhere. 2. Click and drag on the gallery's title bar to move it around. You can either leave the gallery 'free floating' anywhere in the workspace or dock it in a new location. If you move any of the following galleries, the others accompany it as a group. Access an individual gallery by clicking its tab at the bottom of the group or click and drag a gallery tab to move it away from the group. Bitmap Line Fill Page 299 When you click and drag on a dockable gallery's title bar, a number of arrows appear on the workspace, indicating where you can dock the gallery. Dragging a gallery causes docking arrows to appear in the center, top, bottom, left and right of the workspace. Dock the gallery by dragging it to an arrow. Example of a gallery that has been docked to the left of the workspace To dock a gallery: 1. Click and drag the gallery to the arrow pointing towards the location where you want to place the gallery. For example, if you want the gallery at the top of the screen, move it to the upward pointing arrow at the top of the workspace. 2. When the mouse pointer reaches the arrow, a gray transparent box highlights the gallery's new location. 3. Let go of the mouse button to dock the gallery. Now when you close or 'auto hide' the gallery, its Page 300 tab will be displayed in the new location. 4. Hover over or click its tab to reopen the gallery. Note: To move all galleries back to their default position, choose Control Bars from the Window menu, click Galleries then Reset . Grouping galleries You can arrange two or more frequently-used galleries so that they are next to each other. 1. To move a second gallery so that it is adjacent to a gallery you have previously docked, click and drag the second gallery to the four arrows in the workspace center. 2. Let go of the mouse when you are over the arrow pointing towards the previously moved (first) gallery. The second gallery docks next to the first. You can also group galleries and move the whole group to a new location if, for example, you are working primarily with 2 or 3 galleries that you want to be close to each other and easily accessible. Example of a gallery group with gallery tabs at the bottom - click and drag to add a gallery to or remove a gallery from the group. To group galleries: 1. Disable the Auto Hide button (pin) on one of the following galleries: Bitmap, Line and Fill Gallery.The gallery is automatically grouped with the other five galleries, displayed as tabs at the bottom of the group. 2. Click a tab and drag to remove a gallery from the group. 3. Click on a tab to open a gallery in the group. 4. To add a gallery to a group, click and drag the gallery over the group. Four docking arrows appear in the center of the group. 5. Drag and drop the gallery into the square in the middle of these arrows and Web Designer Premium adds it to the group and its tab displayed at the bottom of the group. 6. When you dock a gallery group, all galleries within the group are also docked. When you auto hide or close a gallery group, all gallery tabs in the group are displayed in the workspace border Page 301 nearest to the last docking location. Using galleries To fold or unfold a section in a gallery: Click the Fold/Unfold icon. Or double click the title strip. Or right click a section to display a pop-up menu. Select Fold/Unfold section. The pop-up menu also has options to scroll to the previous section or next section. This illustration shows the gallery is unfolded. Other galleries are similar. The buttons along the top depend on the gallery (e.g. Fill and Transp are specific to the Bitmap Gallery .) However, most galleries have these buttons: Apply applies the selected item in the gallery. Click on an item to select it. More opens a menu where you can then choose: Find is described later in searching for an item name. Sort is described later in re-ordering items in a gallery. Properties provides control over size of the icons and amount of information displayed in the gallery. Add (clipart, fill, and fonts galleries) is described later in adding to a gallery. Remove (clipart, fill, and fonts galleries) is described later in deleting sections from a gallery. Page 302 Selecting items To select an item: Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Page 303 Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 304 Displaying a gallery To display a gallery: 1. Click or hover the mouse pointer over the vertical tab for the gallery to the right of the workspace (the gallery bar). The gallery opens automatically. When you move the mouse pointer away from the gallery, it automatically closes. 2. To keep a gallery open while you work, click the Auto Hide (pin) button in its top right corner. The Auto Hide button changes so the pin points downwards to indicate that the gallery is now 'pinned' to the workspace. 3. To close a 'pinned' gallery, see Closing a Gallery. Unpinned: gallery closes when you move the mouse pointer away from the gallery. Pinned: gallery stays open when you move the mouse pointer away, and can also be moved and docked elsewhere. Note: By default the Line and Fill Galleries do not display their title, just their individual icons, until they have been opened. Web Designer Premium always displays the title of the last gallery that you have viewed. Moving and docking a gallery You can 'detach' any gallery from the gallery bar and move it to a more convenient location anywhere in the workspace. You can also dock the gallery (or a gallery group, see Grouping Galleries) in the top, bottom, left or right of the workspace. You can move a gallery anywhere in the workspace To move a gallery: 1. Open a gallery and click the Auto Hide button to pin the gallery. The button changes to a downward-pointing pin to indicate that the gallery can be moved and pinned elsewhere. 2. Click and drag on the gallery's title bar to move it around. You can either leave the gallery 'free floating' anywhere in the workspace or dock it in a new location. If you move any of the following galleries, the others accompany it as a group. Access an individual gallery by clicking its tab at the bottom of the group or click and drag a gallery tab to move it away from the group. Page 305 Bitmap Line Fill When you click and drag on a dockable gallery's title bar, a number of arrows appear on the workspace, indicating where you can dock the gallery. Dragging a gallery causes docking arrows to appear in the center, top, bottom, left and right of the workspace. Dock the gallery by dragging it to an arrow. Example of a gallery that has been docked to the left of the workspace To dock a gallery: 1. Click and drag the gallery to the arrow pointing towards the location where you want to place the gallery. For example, if you want the gallery at the top of the screen, move it to the upward pointing arrow at the top of the workspace. Page 306 2. When the mouse pointer reaches the arrow, a gray transparent box highlights the gallery's new location. 3. Let go of the mouse button to dock the gallery. Now when you close or 'auto hide' the gallery, its tab will be displayed in the new location. 4. Hover over or click its tab to reopen the gallery. Note: To move all galleries back to their default position, choose Control Bars from the Window menu, click Galleries then Reset . Grouping galleries You can arrange two or more frequently-used galleries so that they are next to each other. 1. To move a second gallery so that it is adjacent to a gallery you have previously docked, click and drag the second gallery to the four arrows in the workspace center. 2. Let go of the mouse when you are over the arrow pointing towards the previously moved (first) gallery. The second gallery docks next to the first. You can also group galleries and move the whole group to a new location if, for example, you are working primarily with 2 or 3 galleries that you want to be close to each other and easily accessible. Example of a gallery group with gallery tabs at the bottom - click and drag to add a gallery to or remove a gallery from the group. To group galleries: 1. Disable the Auto Hide button (pin) on one of the following galleries: Bitmap, Line and Fill Gallery.The gallery is automatically grouped with the other five galleries, displayed as tabs at the bottom of the group. 2. Click a tab and drag to remove a gallery from the group. 3. Click on a tab to open a gallery in the group. 4. To add a gallery to a group, click and drag the gallery over the group. Four docking arrows appear in the center of the group. 5. Drag and drop the gallery into the square in the middle of these arrows and Web Designer Page 307 Premium adds it to the group and its tab displayed at the bottom of the group. 6. When you dock a gallery group, all galleries within the group are also docked. When you auto hide or close a gallery group, all gallery tabs in the group are displayed in the workspace border nearest to the last docking location. Using galleries To fold or unfold a section in a gallery: Click the Fold/Unfold icon. Or double click the title strip. Or right click a section to display a pop-up menu. Select Fold/Unfold section. The pop-up menu also has options to scroll to the previous section or next section. This illustration shows the gallery is unfolded. Other galleries are similar. The buttons along the top depend on the gallery (e.g. Fill and Transp are specific to the Bitmap Gallery .) However, most galleries have these buttons: Apply applies the selected item in the gallery. Click on an item to select it. More opens a menu where you can then choose: Find is described later in searching for an item name. Sort is described later in re-ordering items in a gallery. Properties provides control over size of the icons and amount of information displayed in the gallery. Add (clipart, fill, and fonts galleries) is described later in adding to a gallery. Page 308 Remove (clipart, fill, and fonts galleries) is described later in deleting sections from a gallery. Selecting items To select an item: Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". Page 309 If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 310 Moving and docking a gallery You can 'detach' any gallery from the gallery bar and move it to a more convenient location anywhere in the workspace. You can also dock the gallery (or a gallery group, see Grouping Galleries) in the top, bottom, left or right of the workspace. You can move a gallery anywhere in the workspace To move a gallery: 1. Open a gallery and click the Auto Hide button to pin the gallery. The button changes to a downward-pointing pin to indicate that the gallery can be moved and pinned elsewhere. 2. Click and drag on the gallery's title bar to move it around. You can either leave the gallery 'free floating' anywhere in the workspace or dock it in a new location. If you move any of the following galleries, the others accompany it as a group. Access an individual gallery by clicking its tab at the bottom of the group or click and drag a gallery tab to move it away from the group. Bitmap Line Fill When you click and drag on a dockable gallery's title bar, a number of arrows appear on the workspace, indicating where you can dock the gallery. Page 311 Dragging a gallery causes docking arrows to appear in the center, top, bottom, left and right of the workspace. Dock the gallery by dragging it to an arrow. Example of a gallery that has been docked to the left of the workspace To dock a gallery: 1. Click and drag the gallery to the arrow pointing towards the location where you want to place the gallery. For example, if you want the gallery at the top of the screen, move it to the upward pointing arrow at the top of the workspace. 2. When the mouse pointer reaches the arrow, a gray transparent box highlights the gallery's new location. 3. Let go of the mouse button to dock the gallery. Now when you close or 'auto hide' the gallery, its tab will be displayed in the new location. 4. Hover over or click its tab to reopen the gallery. Page 312 Note: To move all galleries back to their default position, choose Control Bars from the Window menu, click Galleries then Reset . Grouping galleries You can arrange two or more frequently-used galleries so that they are next to each other. 1. To move a second gallery so that it is adjacent to a gallery you have previously docked, click and drag the second gallery to the four arrows in the workspace center. 2. Let go of the mouse when you are over the arrow pointing towards the previously moved (first) gallery. The second gallery docks next to the first. You can also group galleries and move the whole group to a new location if, for example, you are working primarily with 2 or 3 galleries that you want to be close to each other and easily accessible. Example of a gallery group with gallery tabs at the bottom - click and drag to add a gallery to or remove a gallery from the group. To group galleries: 1. Disable the Auto Hide button (pin) on one of the following galleries: Bitmap, Line and Fill Gallery.The gallery is automatically grouped with the other five galleries, displayed as tabs at the bottom of the group. 2. Click a tab and drag to remove a gallery from the group. 3. Click on a tab to open a gallery in the group. 4. To add a gallery to a group, click and drag the gallery over the group. Four docking arrows appear in the center of the group. 5. Drag and drop the gallery into the square in the middle of these arrows and Web Designer Premium adds it to the group and its tab displayed at the bottom of the group. 6. When you dock a gallery group, all galleries within the group are also docked. When you auto hide or close a gallery group, all gallery tabs in the group are displayed in the workspace border nearest to the last docking location. Page 313 Using galleries To fold or unfold a section in a gallery: Click the Fold/Unfold icon. Or double click the title strip. Or right click a section to display a pop-up menu. Select Fold/Unfold section. The pop-up menu also has options to scroll to the previous section or next section. This illustration shows the gallery is unfolded. Other galleries are similar. The buttons along the top depend on the gallery (e.g. Fill and Transp are specific to the Bitmap Gallery .) However, most galleries have these buttons: Apply applies the selected item in the gallery. Click on an item to select it. More opens a menu where you can then choose: Find is described later in searching for an item name. Sort is described later in re-ordering items in a gallery. Properties provides control over size of the icons and amount of information displayed in the gallery. Add (clipart, fill, and fonts galleries) is described later in adding to a gallery. Remove (clipart, fill, and fonts galleries) is described later in deleting sections from a gallery. Selecting items To select an item: Page 314 Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide Page 315 button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 316 Grouping galleries You can arrange two or more frequently-used galleries so that they are next to each other. 1. To move a second gallery so that it is adjacent to a gallery you have previously docked, click and drag the second gallery to the four arrows in the workspace center. 2. Let go of the mouse when you are over the arrow pointing towards the previously moved (first) gallery. The second gallery docks next to the first. You can also group galleries and move the whole group to a new location if, for example, you are working primarily with 2 or 3 galleries that you want to be close to each other and easily accessible. Example of a gallery group with gallery tabs at the bottom - click and drag to add a gallery to or remove a gallery from the group. To group galleries: 1. Disable the Auto Hide button (pin) on one of the following galleries: Bitmap, Line and Fill Gallery.The gallery is automatically grouped with the other five galleries, displayed as tabs at the bottom of the group. 2. Click a tab and drag to remove a gallery from the group. 3. Click on a tab to open a gallery in the group. 4. To add a gallery to a group, click and drag the gallery over the group. Four docking arrows appear in the center of the group. 5. Drag and drop the gallery into the square in the middle of these arrows and Web Designer Premium adds it to the group and its tab displayed at the bottom of the group. 6. When you dock a gallery group, all galleries within the group are also docked. When you auto hide or close a gallery group, all gallery tabs in the group are displayed in the workspace border nearest to the last docking location. Using galleries To fold or unfold a section in a gallery: Click the Fold/Unfold icon. Page 317 Or double click the title strip. Or right click a section to display a pop-up menu. Select Fold/Unfold section. The pop-up menu also has options to scroll to the previous section or next section. This illustration shows the gallery is unfolded. Other galleries are similar. The buttons along the top depend on the gallery (e.g. Fill and Transp are specific to the Bitmap Gallery .) However, most galleries have these buttons: Apply applies the selected item in the gallery. Click on an item to select it. More opens a menu where you can then choose: Find is described later in searching for an item name. Sort is described later in re-ordering items in a gallery. Properties provides control over size of the icons and amount of information displayed in the gallery. Add (clipart, fill, and fonts galleries) is described later in adding to a gallery. Remove (clipart, fill, and fonts galleries) is described later in deleting sections from a gallery. Selecting items To select an item: Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Page 318 Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close Page 319 button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 320 Using galleries To fold or unfold a section in a gallery: Click the Fold/Unfold icon. Or double click the title strip. Or right click a section to display a pop-up menu. Select Fold/Unfold section. The pop-up menu also has options to scroll to the previous section or next section. This illustration shows the gallery is unfolded. Other galleries are similar. The buttons along the top depend on the gallery (e.g. Fill and Transp are specific to the Bitmap Gallery .) However, most galleries have these buttons: Apply applies the selected item in the gallery. Click on an item to select it. More opens a menu where you can then choose: Find is described later in searching for an item name. Sort is described later in re-ordering items in a gallery. Properties provides control over size of the icons and amount of information displayed in the gallery. Add (clipart, fill, and fonts galleries) is described later in adding to a gallery. Remove (clipart, fill, and fonts galleries) is described later in deleting sections from a gallery. Selecting items Page 321 To select an item: Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery Page 322 By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 323 Selecting items To select an item: Click an item to select it. Or click an item, then "Shift + click" on another item; all items in between the two points will be selected. Or "Ctrl + click" to add that item to the selection. Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Page 324 Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 325 Re-ordering items in the gallery In some galleries, "More" > "Sort" opens a dialog box. You can sort by name and, depending on the gallery, by other criteria. The primary key controls the initial sort. For some sort parameters such as file type or name length, there may be two or more files with the same type or name length. These files can be further sorted using the secondary key. Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close Page 326 button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 327 Searching for an item name You can search, for example, for all names containing the word red: 1. Choose "More" > "Find". 2. Type "red" into the text box. 3. Select "Search Names & Keywords" to search only the item names, e.g. file, color, etc., or "Search All Information" to search the names and keywords available in some galleries. Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 2. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Page 328 Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 329 Adding to a gallery You may want to add extra items to these galleries (Design & Fill Galleries only). To do this: 1. Copy the files you want to add into a new directory (folder) using the Windows Explorer. o For the Designs Gallery these files can be any of a wide range of vector or bitmap file types. o For the Fill Gallery they can be any of the bitmap formats supported by Web Designer Premium (listed in importing and exporting). 2. In the appropriate gallery, click the Disc Designs/Fills button. This opens a dialog box. 3. Use the dialog box to select the directory you want to add. 4. Click Add. This creates a new section in the gallery. If you later want to add more items to the folder: 1. Copy the new files into the existing folder. 2. In the gallery, click Disc Designs/Fills. This opens a dialog box. 3. Use the dialog box to select the folder you want to add. 4. Click Update to update the section in the gallery. Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars Page 330 to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 331 Deleting sections from a gallery To delete a section from a gallery (Designs & Fill Galleries only): 1. Click on the title strip of the section or sections you want to delete. 2. Click "Remove". If you later want the section again, add its folder to the gallery (described earlier). Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 332 Closing a gallery By default a gallery's Auto Hide button is enabled (i.e., the gallery's Auto Hide button in the top right corner is unpinned), so that the gallery closes automatically when you move the mouse pointer away from it. However if you have disabled the Auto Hide button (pinned the gallery), you have to close the gallery manually. To close a free-floating gallery, click the Close button in the top right of the gallery. The gallery closes and its tab is displayed in the gallery bar. To close a docked gallery, click the Auto Hide (pin) or Close button in the top right of the gallery. The gallery closes and its tab is displayed in the workspace border where you docked it. To re-open the gallery, hover over or click on its tab. Note: To remove a gallery completely, choose Galleries from the Utilities menu and choose the gallery you want removed. Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 333 Removing a gallery from the workspace By default, when you close a gallery, Web Designer Premium returns it to the gallery bar so that you can reopen it by hovering the cursor over its icon or tab. However you can configure Web Designer Premium to remove any gallery from the workspace if it's not needed. To remove unwanted galleries from the workspace, do one of the following: Choose Galleries from the Utilities menu and choose the gallery you want removed. The selected gallery disappears from your workspace. If you want to reinstate a gallery, choose Galleries from the Utilities menu and choose the gallery you want to reinstate. Choose Control Bars from the Window menu and scroll down the list of available control bars to find Galleries. Click the Galleries box to show the Galleries toolbar. Click Close. In the Galleries toolbar that is now displayed above the workspace, you can toggle display of a gallery by clicking its toolbar button. Page 334 Restoring the default control bars/galleries Choose "Window" > "Control Bars" and click Reset to restore the control bar setup to the default setting. Page 335 Undo and Redo What are undo and redo? We all make mistakes or change our minds. Web Designer Premium makes it easy to correct mistakes or cancel unwanted changes. Every action you make is recorded in an undo list which lets you undo not just the last operation, but also to step back by undoing successive operations. In this way, you can experiment freely knowing that you can always undo anything that doesn't look correct. Page 336 What are undo and redo? We all make mistakes or change our minds. Web Designer Premium makes it easy to correct mistakes or cancel unwanted changes. Every action you make is recorded in an undo list which lets you undo not just the last operation, but also to step back by undoing successive operations. In this way, you can experiment freely knowing that you can always undo anything that doesn't look correct. Page 337 The undo command "Undo " cancels the effects of the last operation. To undo an operation: Click Undo on the standard control bar. Or choose "Edit" > "Undo" (the exact wording tells you what the next undo step is, i.e. undo scale). Or press "Ctrl + Z". Or press the comma key (in any tool except the Text Tool). You can repeat the undo command to step back through the sequence of previous operations. Page 338 The redo command Redo cancels the last undo command. To redo the last operation: Click the Redo button on the standard control bar. Or choose "Edit" > "Redo" (the exact wording tells you what the next redo step is, i.e. redo scale). Or press "Ctrl + Y". Or press the period (full stop) key (in any tool except the Text Tool). You can only redo immediately after undo. You cannot redo after changing the document (for example, by moving or adding an object). Page 339 Object Handling In this chapter The Selector Tool Moving objects Removing objects from the document Duplicating and cloning Moving objects forward and backwards Rotating objects Scaling (resizing) objects Flipping objects Stretching and squashing objects Skewing objects The Mold tool Snapping Guide Objects and Guidelines Summary of shortcuts on the numeric keypad Grouping and ungrouping objects Soft Groups Alignment Copying Styles: Paste Attributes Naming objects Repeating Objects Page 340 The Selector Tool The Selector Tool is the main tool for selecting, moving, scaling, and rotating objects. It is typically used more than any other tool and is the central tool for manipulating documents. Dimensions of selection % size controls Lock aspect ratio Rotate and skew Flip Scale line widths Apply names To use the Selector Tool : Click on the Selector Tool on the Main toolbar. Or press "Alt + S", "V", or "F2". When switching to the Selector Tool , if there are objects selected inside a group or other composite object type, the parent object (group) becomes selected instead. Because the Selector Tool is the most used tool, there is an additional shortcut that lets you switch to the Selector Tool to perform a selection or other operation, and quickly switch back to the previous tool. If you are using another tool, you can easily switch to the Selector Tool : Press and release "Alt + S" to switch to the Selector Tool. Press again to return to the previous tool. Page 341 Selecting objects To select a single object, click on any visible part of the object. Change object selection Once an object is selected, you can use the following keys to change the selection: End selects the back object. Home selects the front object. "Tab" selects the next object towards the back. "Shift + Tab" selects the next object towards the front. Front and back objects are described in "Object handling ". Marquee selection To select multiple objects, press and hold down the mouse button. Dragging the mouse draws a selection rectangle, and all objects wholly within the selection rectangle are selected. Some other drawing programs call this marquee selection. If you have an object in the way which is preventing you from drawing a rectangle because you end up moving the object, hold down " ?" while dragging out the selection rectangle. Extend Selection To select additional objects: "Shift + click" on them. Or "Shift + drag" the mouse pointer. This draws a selection rectangle and adds objects within the rectangle to the selection. Select under Hold down "Alt" to select objects hidden by other objects. By "Alt + clicking" you can step through several overlapping objects. Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Page 342 Or you can use the arrow keys ?on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 343 Change object selection Once an object is selected, you can use the following keys to change the selection: End selects the back object. Home selects the front object. "Tab" selects the next object towards the back. "Shift + Tab" selects the next object towards the front. Front and back objects are described in "Object handling ". Marquee selection To select multiple objects, press and hold down the mouse button. Dragging the mouse draws a selection rectangle, and all objects wholly within the selection rectangle are selected. Some other drawing programs call this marquee selection. If you have an object in the way which is preventing you from drawing a rectangle because you end up moving the object, hold down " " while dragging out the selection rectangle. Extend Selection To select additional objects: "Shift + click" on them. Or "Shift + drag" the mouse pointer. This draws a selection rectangle and adds objects within the rectangle to the selection. Select under Hold down "Alt" to select objects hidden by other objects. By "Alt + clicking" you can step through several overlapping objects. Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Page 344 Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 345 Marquee selection To select multiple objects, press and hold down the mouse button. Dragging the mouse draws a selection rectangle, and all objects wholly within the selection rectangle are selected. Some other drawing programs call this marquee selection. If you have an object in the way which is preventing you from drawing a rectangle because you end up moving the object, hold down " " while dragging out the selection rectangle. Extend Selection To select additional objects: "Shift + click" on them. Or "Shift + drag" the mouse pointer. This draws a selection rectangle and adds objects within the rectangle to the selection. Select under Hold down "Alt" to select objects hidden by other objects. By "Alt + clicking" you can step through several overlapping objects. Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Page 346 Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 347 Extend Selection To select additional objects: "Shift + click" on them. Or "Shift + drag" the mouse pointer. This draws a selection rectangle and adds objects within the rectangle to the selection. Select under Hold down "Alt" to select objects hidden by other objects. By "Alt + clicking" you can step through several overlapping objects. Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Page 348 Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 349 Select under Hold down "Alt" to select objects hidden by other objects. By "Alt + clicking" you can step through several overlapping objects. Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Page 350 Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 351 Select inside You can select an object that's inside a group or other container object by holding down "Ctrl" while you click on it. This is called selecting inside. The object you click on will always become selected, even if it's deep down inside several levels of nested groups. When you have such deep nesting of groups, sometimes you may want to select one of the nested groups (a group inside another group). If you hold down the "Alt" and "Ctrl" keys while you click you can do this easily. The first such click will select the top level group (just as an unmodified click does). Click again and the next group down in the hierarchy will be selected instead. Continue clicking to 'drill down' into the group structure until the group you want becomes selected. Note that some operations are not permitted with select inside. For example, marquee selection and right-click copy does not work for select inside. Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Page 352 Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 353 Moving objects selected under or inside If you need to move a selected object that's either under others or inside a group, then just dragging doesn't work as it will select and drag a different object. To overcome this hold "Ctrl + Alt" and start dragging. This will always drag the existing selected object. You can let go of the keys once you've started dragging. Or you can use the arrow keys ï€ on the keyboard to nudge the object. Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Page 354 Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 355 Selecting and layers You cannot select objects in locked or invisible layers. See "Page & Layer Gallery " for more details on layers. Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 356 Selecting all objects To select all objects: Choose "Edit" > "Select all", Or press "Ctrl + A". Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 357 Deselecting an object To deselect all objects: Click anywhere on an unused part of the document, Or choose "Edit" > "Clear selection", Or press "Esc". To deselect one object from several: "Shift + click" on the object. This deselects that object. Other objects remain selected. Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 358 Selection markers Each selected object displays a single selection marker to show it is selected. This is a useful reminder when selecting and deselecting several objects. Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 359 Status line The status line at the bottom of the window also describes what is selected. Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 360 Selection bounds handles Selection bounds handles let you scale and stretch selected objects. See Stretching and squashing objects for more details. Successive clicks on an object alternate between showing selection bounds and rotation handles. Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 361 Tab With any selected object, pressing "Tab" and "Shift + Tab" will move through the selected objects (previous and next object in the document). Page 362 Moving objects To slide an object across the page 1. Choose the Selector Tool. 2. Drag the object to the required position. Hold down "Ctrl" to restrict the direction of movement to one of the constrain angles. The constrain angles are user definable. Refer to "Customizing Web Designer Premium " Hold down "Ctrl + Alt" and you can drag the selected object even if the pointer is not over it. This is useful when the selected object is hidden behind another object or part of a group. Release "Ctrl" and "Alt" after you start the move unless you want to constrain the move. You can also move objects using the arrow cursor keys. This is described on the next page. Magnetic object snapping is also enabled by default in web documents. Object snapping is a very powerful way of accurately aligning lines, points and the edges of objects to any other object so they exactly touch. It also helps you align to the horizontal and vertical center lines of the page. To toggle object snapping, click the Snap to objects button or right click and choose "Snap to" > "Snap to Objects". You can also choose "Window" > "Snap to objects" . Click and drag on the object you want to snap. As you drag, Web Designer Premium displays a magnet icon whenever you are near a "point of interest" or potential snapping site relative to a visible object on the page. To snap in a path relative to the page center (both horizontally and vertically), move the object over the lines that appear as you drag on the page. A red dot on the line also indicates potential "point to path" snapping points, so that you can snap the object to a point such as the center or center line of the page. See Snapping for details on snapping to grid and snapping to objects. Drop copy During a move (and while still holding the left mouse button down) click the right mouse button or press + on the numeric keypad to drop a copy of the object. The original object doesn't move. You can do this as many times as you wish to create a series of duplicated objects. You can also hold down the right mouse button and drag a copy of the object. Left click to leave a copy at the current mouse position. Fills Usually, moving an object also moves the fill with it: Normal move left to right with a linear filled object. This also applies to rotating, skewing, scaling and stretching objects. Web Designer Premium can also move the object but not the fill origin. To do this click the "-" key on the numeric keypad during the move. The same move, but pressing "-" (minus) during the drag. Nudging objects Page 363 Usually you can move an object a small amount by using the arrow?keys to nudge the object (these keys sometimes have other uses, especially in the Text Tool ). Nudging is not affected by either magnetic or grid snapping (snapping is described later). Nudge modifiers To modify the nudge distance, use these key combinations while using the arrow keys: Ctrl nudge 5 times the normal distance Shift nudge 10 times the normal distance Ctrl + Shift nudge by l/5th the normal distance Alt nudge by 1 pixel Alt + Shift nudge by 10 pixels You can change the normal nudge distance under the General tab in "Utilities" > "Options". Refer to " Customizing Web Designer Premium ". Nudge works in most tools. Cut, copy and paste These let you move or copy an object in the same document or between different documents. The procedure is: 1. Select the object. 2. To remove the object, choose "Edit" > "Cut" (or "Ctrl + X"). To copy the object but not remove it, choose "Edit" > "Copy" (or "Ctrl + C"). Either option puts the object (or a copy of it) onto the clipboard. 3. Choose "Edit" > "Paste", "Ctrl + V", or "Insert". This pastes the clipboard contents into the document. Note that if the objects you copy are all on the same layer, then you can paste those objects to any layer by first making it the current layer and then choosing "Edit" > "Paste" > "Paste in layer" or "Paste in place in current layer" . The layer from which the objects were copied is ignored in this case. However if the objects you copy are on several different layers , then the layer structure is maintained when you paste. This allows you to copy layered data within a document or to a different document. Any layers which are missing in the target document are created automatically by this operation. So for example if you copy a mouse-over button, which has one object on the MouseOff layer and another object on the MouseOver layer, to a new document, the MouseOff and MouseOver layers will be created if they don't already exist and the button objects copied onto them. "Ctrl + Shift + V" or "Edit" > "Paste in place" pastes the clipboard contents into the same X/Y position from where they were cut or copied. This only applies to objects cut or copied from within Web Designer Premium. Objects imported from other programs are always pasted into the center of the current view. The object remains on the clipboard so you can paste the same object several times. If there is a choice of formats on the clipboard, Xara Web Designer 7 Premium will display a Paste Special dialog which allows you to choose the format you want to paste in (eg. When pasting in text you may have the choice of pasting in unformatted text or Rich Text). In addition you may see the following paste options, depending on the clipboard contents: Paste unformatted text Pastes any text on the clipboard into your document without any formatting. Page 364 Paste format/attributes Preserves the format (e.g., font and font size) or style attributes (e.g., line and fill color) of the pasted object. Paste position This option applies the position of a copied object on the clipboard to a currently selected object, which moves to the exact same position as the copied object. If multiple items have been copied to the clipboard, Web Designer Premium treats them as if they are a group and moves the currently selected object to the position of the copied group as a whole. The currently selected object is pasted or moved into the center position of the copied object or group of objects. Paste size This option applies the size of a copied object on the clipboard to a currently selected object, which resizes around its center to the exact size of the copied object. If you have multiple items selected when you 'paste size', each of those objects is made the target size, instead of the selection as a whole. So for example if you copy a 200x200 pixel photo, then select 10 other photos and 'paste size', all 10 photos each become 200x200 pixels. This gives a quick way to make a bunch of objects a particular size. Paste replacing selection This is similar to Paste position , except that the copied object on the clipboard replaces the currently selected object and retains the deleted item's position. The copied object is pasted into the center position of the deleted object. Paste in current layer The same as Paste in place, except your object will only be pasted into the current layer. This is useful if you want to display or hide just your pasted object when layers above or below are displayed. Paste in place in current layer The same as Paste in current layer, except your object will be pasted into the current layer in the exact same position from which you copied it. Page 365 Drop copy During a move (and while still holding the left mouse button down) click the right mouse button or press + on the numeric keypad to drop a copy of the object. The original object doesn't move. You can do this as many times as you wish to create a series of duplicated objects. You can also hold down the right mouse button and drag a copy of the object. Left click to leave a copy at the current mouse position. Fills Usually, moving an object also moves the fill with it: Normal move left to right with a linear filled object. This also applies to rotating, skewing, scaling and stretching objects. Web Designer Premium can also move the object but not the fill origin. To do this click the "−" key on the numeric keypad during the move. The same move, but pressing "−" (minus) during the drag. Nudging objects Usually you can move an object a small amount by using the arrowï€ keys to nudge the object (these keys sometimes have other uses, especially in the Text Tool ). Nudging is not affected by either magnetic or grid snapping (snapping is described later). Nudge modifiers To modify the nudge distance, use these key combinations while using the arrow keys: Ctrl nudge 5 times the normal distance Shift nudge 10 times the normal distance Ctrl + Shift nudge by l/5th the normal distance Alt nudge by 1 pixel Alt + Shift nudge by 10 pixels You can change the normal nudge distance under the General tab in "Utilities" > "Options". Refer to " Customizing Web Designer Premium ". Nudge works in most tools. Cut, copy and paste These let you move or copy an object in the same document or between different documents. The procedure is: 1. Select the object. 2. To remove the object, choose "Edit" > "Cut" (or "Ctrl + X"). To copy the object but not remove it, choose "Edit" > "Copy" (or "Ctrl + C"). Either option puts the object (or a copy of it) onto the clipboard. 3. Choose "Edit" > "Paste", "Ctrl + V", or "Insert". This pastes the clipboard contents into the document. Note that if the objects you copy are all on the same layer, then you can paste those objects to any Page 366 layer by first making it the current layer and then choosing "Edit" > "Paste" > "Paste in layer" or "Paste in place in current layer" . The layer from which the objects were copied is ignored in this case. However if the objects you copy are on several different layers , then the layer structure is maintained when you paste. This allows you to copy layered data within a document or to a different document. Any layers which are missing in the target document are created automatically by this operation. So for example if you copy a mouse-over button, which has one object on the MouseOff layer and another object on the MouseOver layer, to a new document, the MouseOff and MouseOver layers will be created if they don't already exist and the button objects copied onto them. "Ctrl + Shift + V" or "Edit" > "Paste in place" pastes the clipboard contents into the same X/Y position from where they were cut or copied. This only applies to objects cut or copied from within Web Designer Premium. Objects imported from other programs are always pasted into the center of the current view. The object remains on the clipboard so you can paste the same object several times. If there is a choice of formats on the clipboard, Xara Web Designer 7 Premium will display a Paste Special dialog which allows you to choose the format you want to paste in (eg. When pasting in text you may have the choice of pasting in unformatted text or Rich Text). In addition you may see the following paste options, depending on the clipboard contents: Paste unformatted text Pastes any text on the clipboard into your document without any formatting. Paste format/attributes Preserves the format (e.g., font and font size) or style attributes (e.g., line and fill color) of the pasted object. Paste position This option applies the position of a copied object on the clipboard to a currently selected object, which moves to the exact same position as the copied object. If multiple items have been copied to the clipboard, Web Designer Premium treats them as if they are a group and moves the currently selected object to the position of the copied group as a whole. The currently selected object is pasted or moved into the center position of the copied object or group of objects. Paste size This option applies the size of a copied object on the clipboard to a currently selected object, which resizes around its center to the exact size of the copied object. If you have multiple items selected when you 'paste size', each of those objects is made the target size, instead of the selection as a whole. So for example if you copy a 200x200 pixel photo, then select 10 other photos and 'paste size', all 10 photos each become 200x200 pixels. This gives a quick way to make a bunch of objects a particular size. Paste replacing selection This is similar to Paste position , except that the copied object on the clipboard replaces the currently selected object and retains the deleted item's position. The copied object is pasted into the center position of the deleted object. Page 367 Paste in current layer The same as Paste in place, except your object will only be pasted into the current layer. This is useful if you want to display or hide just your pasted object when layers above or below are displayed. Paste in place in current layer The same as Paste in current layer, except your object will be pasted into the current layer in the exact same position from which you copied it. Page 368 Fills Usually, moving an object also moves the fill with it: Normal move left to right with a linear filled object. This also applies to rotating, skewing, scaling and stretching objects. Web Designer Premium can also move the object but not the fill origin. To do this click the "−" key on the numeric keypad during the move. The same move, but pressing "−" (minus) during the drag. Nudging objects Usually you can move an object a small amount by using the arrowï€ keys to nudge the object (these keys sometimes have other uses, especially in the Text Tool ). Nudging is not affected by either magnetic or grid snapping (snapping is described later). Nudge modifiers To modify the nudge distance, use these key combinations while using the arrow keys: Ctrl nudge 5 times the normal distance Shift nudge 10 times the normal distance Ctrl + Shift nudge by l/5th the normal distance Alt nudge by 1 pixel Alt + Shift nudge by 10 pixels You can change the normal nudge distance under the General tab in "Utilities" > "Options". Refer to " Customizing Web Designer Premium ". Nudge works in most tools. Cut, copy and paste These let you move or copy an object in the same document or between different documents. The procedure is: 1. Select the object. 2. To remove the object, choose "Edit" > "Cut" (or "Ctrl + X"). To copy the object but not remove it, choose "Edit" > "Copy" (or "Ctrl + C"). Either option puts the object (or a copy of it) onto the clipboard. 3. Choose "Edit" > "Paste", "Ctrl + V", or "Insert". This pastes the clipboard contents into the document. Note that if the objects you copy are all on the same layer, then you can paste those objects to any layer by first making it the current layer and then choosing "Edit" > "Paste" > "Paste in layer" or "Paste in place in current layer" . The layer from which the objects were copied is ignored in this case. However if the objects you copy are on several different layers , then the layer structure is maintained when you paste. This allows you to copy layered data within a document or to a different document. Any layers which are missing in the target document are created automatically by this operation. So for example if you copy a mouse-over button, which has one object on the MouseOff layer and another object on the MouseOver Page 369 layer, to a new document, the MouseOff and MouseOver layers will be created if they don't already exist and the button objects copied onto them. "Ctrl + Shift + V" or "Edit" > "Paste in place" pastes the clipboard contents into the same X/Y position from where they were cut or copied. This only applies to objects cut or copied from within Web Designer Premium. Objects imported from other programs are always pasted into the center of the current view. The object remains on the clipboard so you can paste the same object several times. If there is a choice of formats on the clipboard, Xara Web Designer 7 Premium will display a Paste Special dialog which allows you to choose the format you want to paste in (eg. When pasting in text you may have the choice of pasting in unformatted text or Rich Text). In addition you may see the following paste options, depending on the clipboard contents: Paste unformatted text Pastes any text on the clipboard into your document without any formatting. Paste format/attributes Preserves the format (e.g., font and font size) or style attributes (e.g., line and fill color) of the pasted object. Paste position This option applies the position of a copied object on the clipboard to a currently selected object, which moves to the exact same position as the copied object. If multiple items have been copied to the clipboard, Web Designer Premium treats them as if they are a group and moves the currently selected object to the position of the copied group as a whole. The currently selected object is pasted or moved into the center position of the copied object or group of objects. Paste size This option applies the size of a copied object on the clipboard to a currently selected object, which resizes around its center to the exact size of the copied object. If you have multiple items selected when you 'paste size', each of those objects is made the target size, instead of the selection as a whole. So for example if you copy a 200x200 pixel photo, then select 10 other photos and 'paste size', all 10 photos each become 200x200 pixels. This gives a quick way to make a bunch of objects a particular size. Paste replacing selection This is similar to Paste position , except that the copied object on the clipboard replaces the currently selected object and retains the deleted item's position. The copied object is pasted into the center position of the deleted object. Paste in current layer The same as Paste in place, except your object will only be pasted into the current layer. This is useful if you want to display or hide just your pasted object when layers above or below are displayed. Paste in place in current layer The same as Paste in current layer, Page 370 except your object will be pasted into the current layer in the exact same position from which you copied it. Page 371 Nudging objects Usually you can move an object a small amount by using the arrowï€ keys to nudge the object (these keys sometimes have other uses, especially in the Text Tool ). Nudging is not affected by either magnetic or grid snapping (snapping is described later). Nudge modifiers To modify the nudge distance, use these key combinations while using the arrow keys: Ctrl nudge 5 times the normal distance Shift nudge 10 times the normal distance Ctrl + Shift nudge by l/5th the normal distance Alt nudge by 1 pixel Alt + Shift nudge by 10 pixels You can change the normal nudge distance under the General tab in "Utilities" > "Options". Refer to " Customizing Web Designer Premium ". Nudge works in most tools. Cut, copy and paste These let you move or copy an object in the same document or between different documents. The procedure is: 1. Select the object. 2. To remove the object, choose "Edit" > "Cut" (or "Ctrl + X"). To copy the object but not remove it, choose "Edit" > "Copy" (or "Ctrl + C"). Either option puts the object (or a copy of it) onto the clipboard. 3. Choose "Edit" > "Paste", "Ctrl + V", or "Insert". This pastes the clipboard contents into the document. Note that if the objects you copy are all on the same layer, then you can paste those objects to any layer by first making it the current layer and then choosing "Edit" > "Paste" > "Paste in layer" or "Paste in place in current layer" . The layer from which the objects were copied is ignored in this case. However if the objects you copy are on several different layers , then the layer structure is maintained when you paste. This allows you to copy layered data within a document or to a different document. Any layers which are missing in the target document are created automatically by this operation. So for example if you copy a mouse-over button, which has one object on the MouseOff layer and another object on the MouseOver layer, to a new document, the MouseOff and MouseOver layers will be created if they don't already exist and the button objects copied onto them. "Ctrl + Shift + V" or "Edit" > "Paste in place" pastes the clipboard contents into the same X/Y position from where they were cut or copied. This only applies to objects cut or copied from within Web Designer Premium. Objects imported from other programs are always pasted into the center of the current view. The object remains on the clipboard so you can paste the same object several times. If there is a choice of formats on the clipboard, Xara Web Designer 7 Premium will display a Paste Special dialog which allows you to choose the format you want to paste in (eg. When pasting in text you may have the choice of pasting in unformatted text or Rich Text). In addition you may see the following paste options, depending on the clipboard contents: Page 372 Paste unformatted text Pastes any text on the clipboard into your document without any formatting. Paste format/attributes Preserves the format (e.g., font and font size) or style attributes (e.g., line and fill color) of the pasted object. Paste position This option applies the position of a copied object on the clipboard to a currently selected object, which moves to the exact same position as the copied object. If multiple items have been copied to the clipboard, Web Designer Premium treats them as if they are a group and moves the currently selected object to the position of the copied group as a whole. The currently selected object is pasted or moved into the center position of the copied object or group of objects. Paste size This option applies the size of a copied object on the clipboard to a currently selected object, which resizes around its center to the exact size of the copied object. If you have multiple items selected when you 'paste size', each of those objects is made the target size, instead of the selection as a whole. So for example if you copy a 200x200 pixel photo, then select 10 other photos and 'paste size', all 10 photos each become 200x200 pixels. This gives a quick way to make a bunch of objects a particular size. Paste replacing selection This is similar to Paste position , except that the copied object on the clipboard replaces the currently selected object and retains the deleted item's position. The copied object is pasted into the center position of the deleted object. Paste in current layer The same as Paste in place, except your object will only be pasted into the current layer. This is useful if you want to display or hide just your pasted object when layers above or below are displayed. Paste in place in current layer The same as Paste in current layer, except your object will be pasted into the current layer in the exact same position from which you copied it. Page 373 Cut, copy and paste These let you move or copy an object in the same document or between different documents. The procedure is: 1. Select the object. 2. To remove the object, choose "Edit" > "Cut" (or "Ctrl + X"). To copy the object but not remove it, choose "Edit" > "Copy" (or "Ctrl + C"). Either option puts the object (or a copy of it) onto the clipboard. 3. Choose "Edit" > "Paste", "Ctrl + V", or "Insert". This pastes the clipboard contents into the document. Note that if the objects you copy are all on the same layer, then you can paste those objects to any layer by first making it the current layer and then choosing "Edit" > "Paste" > "Paste in layer" or "Paste in place in current layer" . The layer from which the objects were copied is ignored in this case. However if the objects you copy are on several different layers , then the layer structure is maintained when you paste. This allows you to copy layered data within a document or to a different document. Any layers which are missing in the target document are created automatically by this operation. So for example if you copy a mouse-over button, which has one object on the MouseOff layer and another object on the MouseOver layer, to a new document, the MouseOff and MouseOver layers will be created if they don't already exist and the button objects copied onto them. "Ctrl + Shift + V" or "Edit" > "Paste in place" pastes the clipboard contents into the same X/Y position from where they were cut or copied. This only applies to objects cut or copied from within Web Designer Premium. Objects imported from other programs are always pasted into the center of the current view. The object remains on the clipboard so you can paste the same object several times. If there is a choice of formats on the clipboard, Xara Web Designer 7 Premium will display a Paste Special dialog which allows you to choose the format you want to paste in (eg. When pasting in text you may have the choice of pasting in unformatted text or Rich Text). In addition you may see the following paste options, depending on the clipboard contents: Paste unformatted text Pastes any text on the clipboard into your document without any formatting. Paste format/attributes Preserves the format (e.g., font and font size) or style attributes (e.g., line and fill color) of the pasted object. Paste position This option applies the position of a copied object on the clipboard to a currently selected object, which moves to the exact same position as the copied object. If multiple items have been copied to the clipboard, Web Designer Premium treats them as if they are a group and moves the currently selected object to the position of the copied group as a whole. The currently selected object is pasted or moved into the center position of the copied object or group of objects. Paste size This option applies the size of a copied object on the clipboard to a currently selected object, which resizes around its center to the exact size of the copied object. Page 374 If you have multiple items selected when you 'paste size', each of those objects is made the target size, instead of the selection as a whole. So for example if you copy a 200x200 pixel photo, then select 10 other photos and 'paste size', all 10 photos each become 200x200 pixels. This gives a quick way to make a bunch of objects a particular size. Paste replacing selection This is similar to Paste position , except that the copied object on the clipboard replaces the currently selected object and retains the deleted item's position. The copied object is pasted into the center position of the deleted object. Paste in current layer The same as Paste in place, except your object will only be pasted into the current layer. This is useful if you want to display or hide just your pasted object when layers above or below are displayed. Paste in place in current layer The same as Paste in current layer, except your object will be pasted into the current layer in the exact same position from which you copied it. Page 375 Removing objects from the document First select the objects you want to remove. You can then either cut the objects to the clipboard or delete them. Cutting objects Choose "Edit" > "Cut", or press "Ctrl + X".The contents of the clipboard are overwritten and you can paste the deleted object(s) somewhere else if desired. Deleting objects Right click and choose Delete or choose Delete from the Edit menu, or press the "Delete" key, or click the delete button on the Standard control bar. In this case the deleted objects are not put onto the clipboard. If you accidentally delete an object, undo retrieves it. Page 376 Cutting objects Choose "Edit" > "Cut", or press "Ctrl + X".The contents of the clipboard are overwritten and you can paste the deleted object(s) somewhere else if desired. Deleting objects Right click and choose Delete or choose Delete from the Edit menu, or press the "Delete" key, or click the delete button on the Standard control bar. In this case the deleted objects are not put onto the clipboard. If you accidentally delete an object, undo retrieves it. Page 377 Deleting objects Right click and choose Delete or choose Delete from the Edit menu, or press the "Delete" key, or click the delete button on the Standard control bar. In this case the deleted objects are not put onto the clipboard. If you accidentally delete an object, undo retrieves it. Page 378 Duplicating and cloning Both these options create a copy of the selected object. The original object is deselected and the duplicate or clone becomes the selected object. You can also duplicate an object during moving, rotating, scaling, or skewing. During the drag action (and while still holding the left mouse button down) click the right mouse button or press "+" on the numeric keypad to drop a copy of the object. The original object doesn't move. You can do this as many times as you wish to create a series of duplicated objects. So an easy way to create one or more copies of an object that is exactly horizontally or vertical aligned, is to drag the object, hold "Ctrl" to constrain the movement, and right click (or press "+" on the numeric keypad) for each copy required. To quickly create a line of objects, draw one, then drag while holding "Ctrl" and right click for each copy required. Duplicating Right click and choose Duplicate, or choose "Edit" > "Duplicate ", or press "Ctrl + D". The copy is displaced slightly, usually down and to the right, from the original. The duplicate distance is user definable, see "Customizing Web Designer Premium " Cloning Choose "Edit" > "Clone", or press "Ctrl + K". This places a copy exactly on top of the original. Cloning is an easy way to create concentric shapes. This example uses an original large letter "A" with a black fill and a 4pt thick white outline and a clone with no fill and a 1pt black line. Page 379 Duplicating Right click and choose Duplicate, or choose "Edit" > "Duplicate ", or press "Ctrl + D". The copy is displaced slightly, usually down and to the right, from the original. The duplicate distance is user definable, see "Customizing Web Designer Premium " Cloning Choose "Edit" > "Clone", or press "Ctrl + K". This places a copy exactly on top of the original. Cloning is an easy way to create concentric shapes. This example uses an original large letter "A" with a black fill and a 4pt thick white outline and a clone with no fill and a 1pt black line. Page 380 Cloning Choose "Edit" > "Clone", or press "Ctrl + K". This places a copy exactly on top of the original. Cloning is an easy way to create concentric shapes. This example uses an original large letter "A" with a black fill and a 4pt thick white outline and a clone with no fill and a 1pt black line. Page 381 Moving objects forward and backwards Complex documents have objects stacked on top of each other, such as this target: The target on the left is made from three circles stacked on top of each other. To ensure that objects overlay each other in the correct order, you often need to rearrange their order from front to back. The front object always covers lower objects, and objects always cover other objects which are further back. Each new object you create is always created on top of older ones. Right click an object and choose Arrange , which gives you these options: Bring to front ("Ctrl + F"): This makes the selected object the front object, and it will hide any other object it covers. Move forward ("Ctrl + ? + F"): This moves the object up a level towards the front rather like climbing a staircase one step at a time. Move backward ("Ctrl + ? + B"): This moves the object one level towards the back. Put to back ("Ctrl + B"): This moves the object to the back. These options move objects forwards and backwards within their layer. Right click and Move to layer in front/Move to layer behind lets you move objects between visible layers (invisible layers are skipped when moving objects). Read more in Layers . Page 382 Rotating objects This is part of the Selector Tool . When in rotate mode, the transformation center (around which the object rotates) initially appears in the center of the object, as shown by a small target like this. Simply click on an object again to put the selector into rotate mode. To move the transformation center, drag the transformation center target where required. Attention : If the rotation center is moved, it remains in this location for any selected object until all objects are deselected, at which point it returns to the center of any selected object. Rotating using the mouse The Selector Tool must be in rotate/skew mode (the selection handles are arrow shaped). Dragging the side handles stretches the object. This is described in Stretching and squashing objects. Drag on a corner arrow. As you drag, the object rotates around the transformation center. The InfoBar shows the current rotate angle. " ?+ drag" to rotate the object around its center (the transformation center is ignored). Hold down "Ctrl" to restrict rotation to the constrain angles. The constrain angles are user definable. Refer to "Customizing Web Designer Premium ". To create a copy while rotating, click "+" on the numeric keypad while rotating, or click the right mouse button. Rotating by exact angles (using the InfoBar) Type an angle into the rotate box and press " ¿". Positive angles rotate anti-clockwise and negative angles rotate clockwise. Click the arrows to the right to nudge the rotate angle. Rotating objects in Resize Mode It is possible to rotate and skew an object even if not in rotate mode. Using resize mode, move the mouse pointer into the according small areas near the selection area handles as illustrated above. The mouse pointer changes into a rotate or skew icon, showing you that you are now able to rotate or skew Page 383 the object by dragging with the mouse. Page 384 Rotating using the mouse The Selector Tool must be in rotate/skew mode (the selection handles are arrow shaped). Dragging the side handles stretches the object. This is described in Stretching and squashing objects. Drag on a corner arrow. As you drag, the object rotates around the transformation center. The InfoBar shows the current rotate angle. " + drag" to rotate the object around its center (the transformation center is ignored). Hold down "Ctrl" to restrict rotation to the constrain angles. The constrain angles are user definable. Refer to "Customizing Web Designer Premium ". To create a copy while rotating, click "+" on the numeric keypad while rotating, or click the right mouse button. Rotating by exact angles (using the InfoBar) Type an angle into the rotate box and press " ¿". Positive angles rotate anti-clockwise and negative angles rotate clockwise. Click the arrows to the right to nudge the rotate angle. Rotating objects in Resize Mode It is possible to rotate and skew an object even if not in rotate mode. Using resize mode, move the mouse pointer into the according small areas near the selection area handles as illustrated above. The mouse pointer changes into a rotate or skew icon, showing you that you are now able to rotate or skew the object by dragging with the mouse. Page 385 Rotating by exact angles (using the InfoBar) Type an angle into the rotate box and press " ¿". Positive angles rotate anti-clockwise and negative angles rotate clockwise. Click the arrows to the right to nudge the rotate angle. Rotating objects in Resize Mode It is possible to rotate and skew an object even if not in rotate mode. Using resize mode, move the mouse pointer into the according small areas near the selection area handles as illustrated above. The mouse pointer changes into a rotate or skew icon, showing you that you are now able to rotate or skew the object by dragging with the mouse. Page 386 Rotating objects in Resize Mode It is possible to rotate and skew an object even if not in rotate mode. Using resize mode, move the mouse pointer into the according small areas near the selection area handles as illustrated above. The mouse pointer changes into a rotate or skew icon, showing you that you are now able to rotate or skew the object by dragging with the mouse. Page 387 Scaling (resizing) objects This is part of the Selector Tool . Scale Line Widths button The Scale line widths button on the Selector Tool infobar is used in many operations where the width and height of the selected objects are important. It controls whether the line attributes (not just line widths) are taken into account when working out the size and position of the selected object(s). With the Scale line widths button set, scaling an object also scales its line widths. With this button unset, line widths remain unchanged. You can toggle this button during drags by clicking "/" on the numeric keypad. If you have a rectangle with a 4 pixel line width, as you turn Scale line widths on and off you'll see that the X, Y W And H fields in the Selector Tool change as the effects of the line width are included and excluded. The following features are affected by Scale line widths : Position and size as reported on the Selector Tool infobar XYWH fields Changing position and size by entering values into the infobar XYWH fields Changing size by entering values in the W% H% fields Scaling/stretching objects by dragging in the Selector tool Alignment Snapping The line attributes that are taken into account when Scale line widths is turned on are: Line width End caps Join type Dash pattern Arrowheads Brush style Stroke type (inc. variable width strokes) In general, if you are interested in the visual positions of objects you should turn Scale line widths on. If you're interested in the exact positions of lines (e.g. where the centers of lines are, as is typical in technical drawings) then you should turn Scale line widths off. Lock Aspect button With the Lock aspect button set, the width/height aspect ratio remains constant as you scale the object. In other words, the shape remains in the same proportions as the original. It's recommended that this button remains selected most of the time in order to ensure that when you resize objects they do not become squashed. Page 388 With this button unset, you can change the aspect ratio as you scale the object, in other words, you can stretch object one way or another when dragging a corner resize handle or when entering a new size. Scaling using the mouse The Selector Tool must be in scale mode (the selection bounds handles are squares). If necessary, click on the object to change to scale mode. Drag one of the corner handles. The object scales as you move the pointer diagonally. The InfoBar shows the current scaling. The object will scale between the dragged handle and the opposite one. To use any other point of the object as the fixed point move the transformation center to it and use the InfoBar buttons to scale. Hold "Shift" while dragging to scale the object around its center. This works independently of the position of the transformation center. "Ctrl + drag" scales the object in multiples of its original size (x2, x3, and so on). To create a copy while scaling (leaving the original in place) right click, or press "+" on the numeric keypad. Dragging the side handles stretches or squashes the object. This is described in Stretching and squashing objects. Scaling using the InfoBar Type into the Scale Text boxes and press " ¿". Scalings below 100% reduce the object. 50 halves the size of the object. Scalings above 100% enlarge the object. 200 doubles the object size. If Lock Aspect is set, you can type into either text box to resize the object by the desired percentage. If this button is unset, you can enter separate values for both the width and height. Alternatively, type the required size of the object into the W or H text boxes. If the Lock Aspect button is on, this scales the object and maintains the aspect ratio. You can enter the size in any unit, such as 1 cm. Scaling with the InfoBar buttons (or number boxes) always scales around the transformation center. You can position this anywhere else in the object, as described in Rotating objects. Page 389 Scale Line Widths button The Scale line widths button on the Selector Tool infobar is used in many operations where the width and height of the selected objects are important. It controls whether the line attributes (not just line widths) are taken into account when working out the size and position of the selected object(s). With the Scale line widths button set, scaling an object also scales its line widths. With this button unset, line widths remain unchanged. You can toggle this button during drags by clicking "/" on the numeric keypad. If you have a rectangle with a 4 pixel line width, as you turn Scale line widths on and off you'll see that the X, Y W And H fields in the Selector Tool change as the effects of the line width are included and excluded. The following features are affected by Scale line widths : Position and size as reported on the Selector Tool infobar XYWH fields Changing position and size by entering values into the infobar XYWH fields Changing size by entering values in the W% H% fields Scaling/stretching objects by dragging in the Selector tool Alignment Snapping The line attributes that are taken into account when Scale line widths is turned on are: Line width End caps Join type Dash pattern Arrowheads Brush style Stroke type (inc. variable width strokes) In general, if you are interested in the visual positions of objects you should turn Scale line widths on. If you're interested in the exact positions of lines (e.g. where the centers of lines are, as is typical in technical drawings) then you should turn Scale line widths off. Lock Aspect button With the Lock aspect button set, the width/height aspect ratio remains constant as you scale the object. In other words, the shape remains in the same proportions as the original. It's recommended that this button remains selected most of the time in order to ensure that when you resize objects they do not become squashed. With this button unset, you can change the aspect ratio as you scale the object, in other words, you can stretch object one way or another when dragging a corner resize handle or when entering a new size. Scaling using the mouse Page 390 The Selector Tool must be in scale mode (the selection bounds handles are squares). If necessary, click on the object to change to scale mode. Drag one of the corner handles. The object scales as you move the pointer diagonally. The InfoBar shows the current scaling. The object will scale between the dragged handle and the opposite one. To use any other point of the object as the fixed point move the transformation center to it and use the InfoBar buttons to scale. Hold "Shift" while dragging to scale the object around its center. This works independently of the position of the transformation center. "Ctrl + drag" scales the object in multiples of its original size (x2, x3, and so on). To create a copy while scaling (leaving the original in place) right click, or press "+" on the numeric keypad. Dragging the side handles stretches or squashes the object. This is described in Stretching and squashing objects. Scaling using the InfoBar Type into the Scale Text boxes and press " ¿". Scalings below 100% reduce the object. 50 halves the size of the object. Scalings above 100% enlarge the object. 200 doubles the object size. If Lock Aspect is set, you can type into either text box to resize the object by the desired percentage. If this button is unset, you can enter separate values for both the width and height. Alternatively, type the required size of the object into the W or H text boxes. If the Lock Aspect button is on, this scales the object and maintains the aspect ratio. You can enter the size in any unit, such as 1 cm. Scaling with the InfoBar buttons (or number boxes) always scales around the transformation center. You can position this anywhere else in the object, as described in Rotating objects. Page 391 Lock Aspect button With the Lock aspect button set, the width/height aspect ratio remains constant as you scale the object. In other words, the shape remains in the same proportions as the original. It's recommended that this button remains selected most of the time in order to ensure that when you resize objects they do not become squashed. With this button unset, you can change the aspect ratio as you scale the object, in other words, you can stretch object one way or another when dragging a corner resize handle or when entering a new size. Scaling using the mouse The Selector Tool must be in scale mode (the selection bounds handles are squares). If necessary, click on the object to change to scale mode. Drag one of the corner handles. The object scales as you move the pointer diagonally. The InfoBar shows the current scaling. The object will scale between the dragged handle and the opposite one. To use any other point of the object as the fixed point move the transformation center to it and use the InfoBar buttons to scale. Hold "Shift" while dragging to scale the object around its center. This works independently of the position of the transformation center. "Ctrl + drag" scales the object in multiples of its original size (x2, x3, and so on). To create a copy while scaling (leaving the original in place) right click, or press "+" on the numeric keypad. Dragging the side handles stretches or squashes the object. This is described in Stretching and squashing objects. Scaling using the InfoBar Type into the Scale Text boxes and press " ¿". Scalings below 100% reduce the object. 50 halves the size of the object. Scalings above 100% enlarge the object. 200 doubles the object size. If Lock Aspect is set, you can type into either text box to resize the object by the desired percentage. If this button is unset, you can enter separate values for both the width and height. Alternatively, type the required size of the object into the W or H text boxes. If the Lock Aspect button is on, this scales the object and maintains the aspect ratio. You can enter the size in any unit, such as 1 cm. Page 392 Scaling with the InfoBar buttons (or number boxes) always scales around the transformation center. You can position this anywhere else in the object, as described in Rotating objects. Page 393 Scaling using the mouse The Selector Tool must be in scale mode (the selection bounds handles are squares). If necessary, click on the object to change to scale mode. Drag one of the corner handles. The object scales as you move the pointer diagonally. The InfoBar shows the current scaling. The object will scale between the dragged handle and the opposite one. To use any other point of the object as the fixed point move the transformation center to it and use the InfoBar buttons to scale. Hold "Shift" while dragging to scale the object around its center. This works independently of the position of the transformation center. "Ctrl + drag" scales the object in multiples of its original size (x2, x3, and so on). To create a copy while scaling (leaving the original in place) right click, or press "+" on the numeric keypad. Dragging the side handles stretches or squashes the object. This is described in Stretching and squashing objects. Scaling using the InfoBar Type into the Scale Text boxes and press " ¿". Scalings below 100% reduce the object. 50 halves the size of the object. Scalings above 100% enlarge the object. 200 doubles the object size. If Lock Aspect is set, you can type into either text box to resize the object by the desired percentage. If this button is unset, you can enter separate values for both the width and height. Alternatively, type the required size of the object into the W or H text boxes. If the Lock Aspect button is on, this scales the object and maintains the aspect ratio. You can enter the size in any unit, such as 1 cm. Scaling with the InfoBar buttons (or number boxes) always scales around the transformation center. You can position this anywhere else in the object, as described in Rotating objects. Page 394 Scaling using the InfoBar Type into the Scale Text boxes and press " ¿". Scalings below 100% reduce the object. 50 halves the size of the object. Scalings above 100% enlarge the object. 200 doubles the object size. If Lock Aspect is set, you can type into either text box to resize the object by the desired percentage. If this button is unset, you can enter separate values for both the width and height. Alternatively, type the required size of the object into the W or H text boxes. If the Lock Aspect button is on, this scales the object and maintains the aspect ratio. You can enter the size in any unit, such as 1 cm. Scaling with the InfoBar buttons (or number boxes) always scales around the transformation center. You can position this anywhere else in the object, as described in Rotating objects. Page 395 Flipping objects This is part of the Selector Tool. Clicking on the Flip buttons flips the object vertically or horizontally around the transformation center. The scale and aspect ratio do not change; the object just flips. Page 396 Stretching and squashing objects This is similar to scaling objects except that the object is scaled in one direction only. Stretching and squashing are basically the same action ? stretching makes the object larger, squashing makes it smaller. Stretching/Squashing using the mouse The Selector Tool must be in scale mode. (The selection handles are squares.) If necessary, click on the object to change to scale mode. Use the side, top and bottom handles, instead of the corner handles, to stretch or squash a shape in one dimension only. Note that these handles are shown only on rectangles which are not photo filled, because stretching other objects in one dimension rarely produces useful results (photos become distorted). Drag one of the side handles. The object scales as you move the pointer in the appropriate direction. The InfoBar shows the current scaling. The Lock Aspect button is ignored. Right click or press "+" on the numeric keypad while dragging to stretch or squash a copy of the object, leaving the original in place. Stretching/squashing using the InfoBar The Lock Aspect button must be unset (if it is set, you scale the object instead of stretching or squashing it). Type into either the width or height text box (as appropriate) and press " ¿". Alternatively enter a % scale (width or height). So entering 200% into the top % scale box will make the object twice as wide, but the same height. If the Lock Aspect is set then it will not stretch. Page 397 Skewing objects This is part of the Selector Tool . Left is the original object, to the right with a horizontal skew Skewing using the mouse Switch the Selector Tool to rotate/skew mode. (The selection handles are arrow shaped) by clicking on the object. Drag a side, top or bottom arrow to skew the object. Note that these handles are shown only on rectangles which are not photo filled, because skewing other objects rarely produces useful results (eg. photos become distorted). As you drag, the object skews in the direction of movement (vertical or horizontal). The InfoBar shows the current skew angle. " ?+ drag" to skew the object around its center. Hold down "Ctrl" to restrict the skew to the constrain angles. Right click, or press "+" on the numeric keypad as you drag to create a copy, leaving the original where it was. Or right-drag with the mouse to create instant copies, additional copies by left clicks. You can also skew an object in the Selector Tool's resize mode using the skew areas. Read more under Rotating objects in resize mode . Skewing using the InfoBar To skew horizontally type an angle into the skew text box and press " ¿". Page 398 The Mold tool The Mold Tool is used to distort shapes. It is used for both perspectivizing (that is, rotating in three dimensions) and enveloping (like distorting a rubber sheet). Mold tool InfoBar Mesh Remove mold Detach mold Rotate mold Copy mold Enveloping Paste envelope mold Perspectivizing Paste perspective mold The InfoBar contains two sets of preset mold shapes. Just click a button to apply the preset mold. The left-hand button in each group is the default "no distortion" mold which you can then manually edit after applying it. Page 399 Perspective The Mold Tool lets you perspectivize shapes to give an impression of depth. You can perspectivize all types of objects including text and bitmaps. Note that bitmaps lose perspective if you later blend them or convert them to editable shapes. 1. Select the object or objects. 2. Select the Mold Tool (shortcut "Shift + F6"). 3. Choose one of the perspective options: The right-hand button (paste perspective) is described later. Web Designer Premium draws a rectangle around the object or selection. You can drag the control handles at each corner of the rectangle to produce the perspective effect. You can rotate, resize and skew the perspectivized object using the Selector Tool . You may want to move control handles without redrawing the perspectivized object (doing this speeds up screen redraws). To do this select the Detach mold button. To refit the object, deselect the button. Using vanishing points As you reduce the size of the sides of the perspective mould, you see a "vanishing point" target. This is similar to vanishing points in conventional perspective drawings. You can use vanishing points to obtain consistent perspective for several objects. All three object share a common vanishing point at the small cross. The perspective mesh This button paints a faint series of dots in a grid to preview the degree of perspective distortion of an object. Using molds You may want to apply the same perspective to several objects. To do this you create a mould shape, copy it to the clipboard and then use it to perspectivize the other objects. A perspective mould shape must have four straight sides: This is acceptable as a mold These are not acceptable. The object on the left shape has too many sides (must be four). The object on the right has curved sides (must be straight). Page 400 Removing perspective Click Remove to remove perspective. If the selected object has more than one perspective or envelope mould applied, only the most recent mold is removed. Rotating the object within the mold Sometimes you will find that the mold is the correct shape but the object needs rotating within it. You can rotate the object by clicking the rotate object button. Page 401 Enveloping The Mold Tool lets you envelope shapes in a wide variety of ways. The effect is similar to a rubber sheet or balloon that you can stretch in any direction. You can envelope all types of objects except bitmaps. Sample enveloped text Enveloping is similar to applying perspective. That is: 1. Select the object or objects. 2. Select the Mold Tool (shortcut "Shift + F6"). 3. Choose one of the envelope options: The right-hand button is similar to paste perspective described earlier. The left-hand button does not initially alter the object. The other buttons immediately alter the object. After applying the mold, to edit it: 1. Drag any of the corner handles. 2. Or click on a corner handle and then drag the curve handles. The above example shows the 4 curve handles of the corners have been dragged outwards to bend the content of the mold. You can also rotate, resize and skew the enveloped object using the Selector Tool . The mold mesh button The Mesh button displays a series of faint dots which can help preview the distortions that the envelope mold is giving. Envelope molds Your can create an envelope mould from any four sided shape, which you can distort as you require, and then use as an envelope mold by clicking the Paste Envelope button on the Mold Tool InfoBar. Editing mold shapes You can edit the contents of a mold (essentially a group) using editing inside groups. Editing is not possible using direct selection inside (molds do not allow objects inside them to become selected). To edit a mold inside, right click on the mold and choose Open mold from the context menu. You can edit the shape of envelope or perspective molds with the Shape Editor Tool (or the edit handles with Selector Tool , if shown). According to the nature of molds, there are some restrictions: You cannot add point handles to a perspective or envelope mold, because it has to stay a four-sided shape You cannot change a straight line of a perspective mold into a curve. Page 402 Editing mold shapes You can edit the contents of a mold (essentially a group) using editing inside groups. Editing is not possible using direct selection inside (molds do not allow objects inside them to become selected). To edit a mold inside, right click on the mold and choose Open mold from the context menu. You can edit the shape of envelope or perspective molds with the Shape Editor Tool (or the edit handles with Selector Tool , if shown). According to the nature of molds, there are some restrictions: You cannot add point handles to a perspective or envelope mold, because it has to stay a four-sided shape You cannot change a straight line of a perspective mold into a curve. Page 403 Snapping Snapping makes it easier to position edges, or specific points on objects, exactly where required. It can be used to align edges to a specific point or line, or to evenly space objects, using the grid. Xara Web Designer 7 Premium offers three types of snapping. Snap to grid Magnetic snapping (snap to objects) Snap to guidelines or guide objects Grid snap is useful for making objects evenly spaced, or making the sizes exact multiples of a given value. Guidelines are useful for aligning edges (although it's a lot more powerful using guide objects) and lastly magnetic snap is a general purpose way of accurately positioning lines, points or object edges relative to other objects or to the page center or edges. Snap to grid When Snap to Grid is selected, grid points act like magnets. Right click on the pasteboard and choose "Snap to" > "Snap to Grid" or use the menu option "Window" > "Snap to grid", (or press "." (decimal point) on the numeric keypad). You can control the grid spacing from the options dialog (right click and choose Page Options or use the menu command "Utilities" > "Options ") on the Grid and Ruler tab. By default web document templates have snap to grid on, with a single pixel grid, so that normally all object dimensions and positions are whole pixels. When dragging objects the edges will snap to grid points. If the size of the object is such that opposing edges can't both be snapped, the edge that snaps depends on the direction the object is dragged in. This shows a coarse grid with 5 subdivisions between major divisions. The shape has a very thick gray outline. Because the object has been dragged down and to the left, the lower and left outside edges are snapped to the nearest grid point. Note: The default grid spacing is 50 pixel spacing for major grid lines with 50 subdivisions. This means the grid is spaced at exactly one screen pixel and so may appear not to be working at a normal 100% zoom. If you zoom in to say 500% then you can see it does snap correctly. Alternatively, change the grid values to have, say, 10 subdivisions which means that the grid points are on 5 pixel boundaries. Snapping and line widths The Scale line widths control on the Selector Tool InfoBar affects whether snapping happens to the bounds of objects including their outlines. The above example shows a shape with a very thick gray outline. It also shows (thin black line) the outline of the shape itself (you can see the thick outline is drawn equally on either side of the center line so Page 404 that it partly overlaps the inside of the shape and partially goes outside). With scale line widths on, the width of the outline is deemed to be important and so 'snap to grid' will snap the bounds of objects, including outlines, to the grid. Snap to objects will allow you to snap using the bounds or the outline center lines. If the outlines as they appear on screen are small, so there is little difference between these two snapping positions, bounds snaps are favored. So zoom in if you want to snap outline centers in this case. With scale line widths off, 'snap to grid' and 'snap to objects' will snap the center lines of objects, ignoring the outline widths. Because snapping honors the Scale line widths switch it means that the bounds used by snapping are always the same bounds that are reported in the Selector Tool infobar. Magnetic object snapping (snap to objects) Magnetic object snapping makes it much easier to accurately position objects relative to each other or relative to the page center or edges. So, for example, if you want several lines to start at exactly the same point, or want a line to exactly join the edge of a circle, then using "magnetic object snap" is useful. You can even use this to align the centers of objects, or align objects to the center of the page, or align them horizontally and vertically anywhere in the middle of the page. Magnetic snapping works when either moving or scaling objects using the Selector Tool . Magnetic snapping to objects is enabled by default in web documents. To toggle it on and off, click the Snap to Objects button in the top toolbar. Alternatively right click the pasteboard and choose "Snap to" > "Snap to Objects", or use the menu option "Window" > "Snap to objects ". You can also toggle it on/off during dragging by tapping 's'. Click and drag on the object you want to snap. As you drag, Web Designer Premium displays a magnet icon, blue lines and red points whenever you are near a "point of interest" that it has snapped to. Snap indicators Snap indicators are shown whenever a snap occurs. That is whenever a point of interest on the object you are dragging comes in range of a point of interest in the document (which could be on another object or be part of the page). Web Designer Premium snaps to the point of interest and the mouse pointer changes to show a magnet symbol so you know a snap has happened. Also further indications are shown dynamically on screen to help you see what snap has occurred. A red dot indicates that a specific point has snapped A blue line indicates a snap to some feature of another object (e.g. to the edge of a rectangle). An orange line indicates a snap to a page feature (corners, edges, center) The snap indicator lines pulse to show that they are temporary "live" indicators and to help them be seen Page 405 over different background colors. The snapping distance is controlled by the Mouse tab of the Options dialog box ("Utilities" > " Options" or right click a page and choose Page Options ). You can specify two snap distances in the "Magetic snap radii" section, which control how close things need to be before they will snap together. The size of a circle around points (point) and the distance either side of lines (lines). It's usually best to make the point value larger than the line value, so that it's easier to snap to the end points of lines. Customizing Web Designer Premium has full details of the Options dialog. Page 406 Snap to grid When Snap to Grid is selected, grid points act like magnets. Right click on the pasteboard and choose "Snap to" > "Snap to Grid" or use the menu option "Window" > "Snap to grid", (or press "." (decimal point) on the numeric keypad). You can control the grid spacing from the options dialog (right click and choose Page Options or use the menu command "Utilities" > "Options ") on the Grid and Ruler tab. By default web document templates have snap to grid on, with a single pixel grid, so that normally all object dimensions and positions are whole pixels. When dragging objects the edges will snap to grid points. If the size of the object is such that opposing edges can't both be snapped, the edge that snaps depends on the direction the object is dragged in. This shows a coarse grid with 5 subdivisions between major divisions. The shape has a very thick gray outline. Because the object has been dragged down and to the left, the lower and left outside edges are snapped to the nearest grid point. Note: The default grid spacing is 50 pixel spacing for major grid lines with 50 subdivisions. This means the grid is spaced at exactly one screen pixel and so may appear not to be working at a normal 100% zoom. If you zoom in to say 500% then you can see it does snap correctly. Alternatively, change the grid values to have, say, 10 subdivisions which means that the grid points are on 5 pixel boundaries. Snapping and line widths The Scale line widths control on the Selector Tool InfoBar affects whether snapping happens to the bounds of objects including their outlines. The above example shows a shape with a very thick gray outline. It also shows (thin black line) the outline of the shape itself (you can see the thick outline is drawn equally on either side of the center line so that it partly overlaps the inside of the shape and partially goes outside). With scale line widths on, the width of the outline is deemed to be important and so 'snap to grid' will snap the bounds of objects, including outlines, to the grid. Snap to objects will allow you to snap using the bounds or the outline center lines. If the outlines as they appear on screen are small, so there is little difference between these two snapping positions, bounds snaps are favored. So zoom in if you want to snap outline centers in this case. With scale line widths off, 'snap to grid' and 'snap to objects' will snap the center lines of objects, ignoring the outline widths. Because snapping honors the Scale line widths switch it means that the bounds used by snapping are always the same bounds that are reported in the Selector Tool infobar. Page 407 Magnetic object snapping (snap to objects) Magnetic object snapping makes it much easier to accurately position objects relative to each other or relative to the page center or edges. So, for example, if you want several lines to start at exactly the same point, or want a line to exactly join the edge of a circle, then using "magnetic object snap" is useful. You can even use this to align the centers of objects, or align objects to the center of the page, or align them horizontally and vertically anywhere in the middle of the page. Magnetic snapping works when either moving or scaling objects using the Selector Tool . Magnetic snapping to objects is enabled by default in web documents. To toggle it on and off, click the Snap to Objects button in the top toolbar. Alternatively right click the pasteboard and choose "Snap to" > "Snap to Objects", or use the menu option "Window" > "Snap to objects ". You can also toggle it on/off during dragging by tapping 's'. Click and drag on the object you want to snap. As you drag, Web Designer Premium displays a magnet icon, blue lines and red points whenever you are near a "point of interest" that it has snapped to. Snap indicators Snap indicators are shown whenever a snap occurs. That is whenever a point of interest on the object you are dragging comes in range of a point of interest in the document (which could be on another object or be part of the page). Web Designer Premium snaps to the point of interest and the mouse pointer changes to show a magnet symbol so you know a snap has happened. Also further indications are shown dynamically on screen to help you see what snap has occurred. A red dot indicates that a specific point has snapped A blue line indicates a snap to some feature of another object (e.g. to the edge of a rectangle). An orange line indicates a snap to a page feature (corners, edges, center) The snap indicator lines pulse to show that they are temporary "live" indicators and to help them be seen over different background colors. The snapping distance is controlled by the Mouse tab of the Options dialog box ("Utilities" > " Options" or right click a page and choose Page Options ). Page 408 You can specify two snap distances in the "Magetic snap radii" section, which control how close things need to be before they will snap together. The size of a circle around points (point) and the distance either side of lines (lines). It's usually best to make the point value larger than the line value, so that it's easier to snap to the end points of lines. Customizing Web Designer Premium has full details of the Options dialog. Page 409 Snapping and line widths The Scale line widths control on the Selector Tool InfoBar affects whether snapping happens to the bounds of objects including their outlines. The above example shows a shape with a very thick gray outline. It also shows (thin black line) the outline of the shape itself (you can see the thick outline is drawn equally on either side of the center line so that it partly overlaps the inside of the shape and partially goes outside). With scale line widths on, the width of the outline is deemed to be important and so 'snap to grid' will snap the bounds of objects, including outlines, to the grid. Snap to objects will allow you to snap using the bounds or the outline center lines. If the outlines as they appear on screen are small, so there is little difference between these two snapping positions, bounds snaps are favored. So zoom in if you want to snap outline centers in this case. With scale line widths off, 'snap to grid' and 'snap to objects' will snap the center lines of objects, ignoring the outline widths. Because snapping honors the Scale line widths switch it means that the bounds used by snapping are always the same bounds that are reported in the Selector Tool infobar. Magnetic object snapping (snap to objects) Magnetic object snapping makes it much easier to accurately position objects relative to each other or relative to the page center or edges. So, for example, if you want several lines to start at exactly the same point, or want a line to exactly join the edge of a circle, then using "magnetic object snap" is useful. You can even use this to align the centers of objects, or align objects to the center of the page, or align them horizontally and vertically anywhere in the middle of the page. Magnetic snapping works when either moving or scaling objects using the Selector Tool . Magnetic snapping to objects is enabled by default in web documents. To toggle it on and off, click the Snap to Objects button in the top toolbar. Alternatively right click the pasteboard and choose "Snap to" > "Snap to Objects", or use the menu option "Window" > "Snap to objects ". You can also toggle it on/off during dragging by tapping 's'. Click and drag on the object you want to snap. As you drag, Web Designer Premium displays a magnet icon, blue lines and red points whenever you are near a "point of interest" that it has snapped to. Snap indicators Page 410 Snap indicators are shown whenever a snap occurs. That is whenever a point of interest on the object you are dragging comes in range of a point of interest in the document (which could be on another object or be part of the page). Web Designer Premium snaps to the point of interest and the mouse pointer changes to show a magnet symbol so you know a snap has happened. Also further indications are shown dynamically on screen to help you see what snap has occurred. A red dot indicates that a specific point has snapped A blue line indicates a snap to some feature of another object (e.g. to the edge of a rectangle). An orange line indicates a snap to a page feature (corners, edges, center) The snap indicator lines pulse to show that they are temporary "live" indicators and to help them be seen over different background colors. The snapping distance is controlled by the Mouse tab of the Options dialog box ("Utilities" > " Options" or right click a page and choose Page Options ). You can specify two snap distances in the "Magetic snap radii" section, which control how close things need to be before they will snap together. The size of a circle around points (point) and the distance either side of lines (lines). It's usually best to make the point value larger than the line value, so that it's easier to snap to the end points of lines. Customizing Web Designer Premium has full details of the Options dialog. Page 411 Magnetic object snapping (snap to objects) Magnetic object snapping makes it much easier to accurately position objects relative to each other or relative to the page center or edges. So, for example, if you want several lines to start at exactly the same point, or want a line to exactly join the edge of a circle, then using "magnetic object snap" is useful. You can even use this to align the centers of objects, or align objects to the center of the page, or align them horizontally and vertically anywhere in the middle of the page. Magnetic snapping works when either moving or scaling objects using the Selector Tool . Magnetic snapping to objects is enabled by default in web documents. To toggle it on and off, click the Snap to Objects button in the top toolbar. Alternatively right click the pasteboard and choose "Snap to" > "Snap to Objects", or use the menu option "Window" > "Snap to objects ". You can also toggle it on/off during dragging by tapping 's'. Click and drag on the object you want to snap. As you drag, Web Designer Premium displays a magnet icon, blue lines and red points whenever you are near a "point of interest" that it has snapped to. Snap indicators Snap indicators are shown whenever a snap occurs. That is whenever a point of interest on the object you are dragging comes in range of a point of interest in the document (which could be on another object or be part of the page). Web Designer Premium snaps to the point of interest and the mouse pointer changes to show a magnet symbol so you know a snap has happened. Also further indications are shown dynamically on screen to help you see what snap has occurred. A red dot indicates that a specific point has snapped A blue line indicates a snap to some feature of another object (e.g. to the edge of a rectangle). An orange line indicates a snap to a page feature (corners, edges, center) The snap indicator lines pulse to show that they are temporary "live" indicators and to help them be seen over different background colors. The snapping distance is controlled by the Mouse tab of the Options dialog box ("Utilities" > " Options" or right click a page and choose Page Options ). Page 412 You can specify two snap distances in the "Magetic snap radii" section, which control how close things need to be before they will snap together. The size of a circle around points (point) and the distance either side of lines (lines). It's usually best to make the point value larger than the line value, so that it's easier to snap to the end points of lines. Customizing Web Designer Premium has full details of the Options dialog. Page 413 Guide Objects and Guidelines Guide objects and guidelines are objects on a special layer, the guides layer. A guide layer is automatically created when you create a guideline (see below), or you can create one manually by right clicking in the Page & Layer Gallery and selecting Create Guide Layer (see Layers for more information). Use Snap to guides in the Window menu (or key 2 on the numeric keypad) to turn on snapping to guide objects. Any object placed on the guides layer becomes a guide object. These can be any object type including lines at any angle, irregular shapes, and quickshapes. You can create, scale, and delete objects on the guides layer as usual, but they always appear as thin dotted red outlines; any applied line width or fill color is ignored. This information is retained, and if you later move the object from the guides layer to a normal layer, line thickness, and colors are shown again. You can use guide objects to draw construction lines such as lines passing through a vanishing point for perspective drawing. Placing objects onto the Guides Layer First ensure there is a guide layer in the Page & Layer Gallery, see above. You can create objects directly on the guides layer by selecting it and creating objects as usual. You can also cut or copy objects from another layer and then paste those objects into the guides layer. To paste the objects in the same relative position on the guides layer use the keyboard shortcut "Ctrl + Shift + V". The Page & Layer Gallery showing a guides layer above two other layers, and selected. Move to layer in front and Move to layer behind on the Arrange menu (or right click and choose " Arrange" > "Move to layer in front/behind") will skip the guides layer and so cannot be used to move objects onto the guides layer. Creating a guideline Guidelines are vertical or horizontal lines and are a quick and easy way to align a series of objects on the page. Turn rulers on ("Ctrl + L") or right click and choose "Show Grid/Guides" > "Show Rulers" Drag from a ruler onto the page. Or Double click on the ruler to create a guideline aligned to the click point. This automatically creates a guides layer and puts the guidelines on that layer. Or, using the Page & Layer Gallery : 1. Right click in the Page & Layer Gallery and choose Properties. 2. If necessary, click the Guides tab. 3. Select horizontal or vertical. Page 414 4. Click New. 5. Type in the required position. Deleting a guideline Using the Selector Tool drag the guideline onto the appropriate ruler (the vertical ruler for vertical guidelines, horizontal ruler for horizontal). Or, right click on the guideline and then choose Delete . Page 415 Placing objects onto the Guides Layer First ensure there is a guide layer in the Page & Layer Gallery, see above. You can create objects directly on the guides layer by selecting it and creating objects as usual. You can also cut or copy objects from another layer and then paste those objects into the guides layer. To paste the objects in the same relative position on the guides layer use the keyboard shortcut "Ctrl + Shift + V". The Page & Layer Gallery showing a guides layer above two other layers, and selected. Move to layer in front and Move to layer behind on the Arrange menu (or right click and choose " Arrange" > "Move to layer in front/behind") will skip the guides layer and so cannot be used to move objects onto the guides layer. Creating a guideline Guidelines are vertical or horizontal lines and are a quick and easy way to align a series of objects on the page. Turn rulers on ("Ctrl + L") or right click and choose "Show Grid/Guides" > "Show Rulers" Drag from a ruler onto the page. Or Double click on the ruler to create a guideline aligned to the click point. This automatically creates a guides layer and puts the guidelines on that layer. Or, using the Page & Layer Gallery : 1. Right click in the Page & Layer Gallery and choose Properties. 2. If necessary, click the Guides tab. 3. Select horizontal or vertical. 4. Click New. 5. Type in the required position. Deleting a guideline Using the Selector Tool drag the guideline onto the appropriate ruler (the vertical ruler for vertical guidelines, horizontal ruler for horizontal). Or, right click on the guideline and then choose Delete . Page 416 Creating a guideline Guidelines are vertical or horizontal lines and are a quick and easy way to align a series of objects on the page. Turn rulers on ("Ctrl + L") or right click and choose "Show Grid/Guides" > "Show Rulers" Drag from a ruler onto the page. Or Double click on the ruler to create a guideline aligned to the click point. This automatically creates a guides layer and puts the guidelines on that layer. Or, using the Page & Layer Gallery : 1. Right click in the Page & Layer Gallery and choose Properties. 2. If necessary, click the Guides tab. 3. Select horizontal or vertical. 4. Click New. 5. Type in the required position. Deleting a guideline Using the Selector Tool drag the guideline onto the appropriate ruler (the vertical ruler for vertical guidelines, horizontal ruler for horizontal). Or, right click on the guideline and then choose Delete . Page 417 Deleting a guideline Using the Selector Tool drag the guideline onto the appropriate ruler (the vertical ruler for vertical guidelines, horizontal ruler for horizontal). Or, right click on the guideline and then choose Delete . Page 418 Summary of shortcuts on the numeric keypad + / * 2 . Makes a copy while dragging, resizing, skewing, and so on. The original object doesn't change. Toggles leaving line widths unchanged during scaling and scaling with changing line widths. Toggles leaving fills unchanged during moves, scaling, skewing, etc. Toggles object magnetic snap on and off. Toggles snap to guides on and off. Toggles snap to grid on and off. Page 419 Grouping and ungrouping objects The Shadow and Transparency Tools offer different results depending on whether objects are grouped or not. For more information see "Transparency" and "Shadows ". You will often create complex shapes from several different objects. The "Arrange" > "Group" menu option (or right click selected objects and choose Group ) lets you lock those objects together to form what appears as a single object. You can then select the grouped objects and copy, rescale, move or perform any other operation on the entire group. To create a group 1. Select all the objects you want in the group. 2. Right click and choose Group or choose Group from the Arrange menu (or "Ctrl + G") to create the group. Ungrouping objects 1. Select the group. 2. Right click and choose Ungroup or choose Ungroup from the Arrange menu (or "Ctrl + U"). After this, all the individual objects in the group remain selected. To add more objects to a group 1. Select the group. 2. Ungroup ("Ctrl + U") 3. Select the extra objects. 4. Group again ("Ctrl + G") You can also incorporate a group into a second group by omitting step 2. Web Designer Premium remembers the original grouping information. If you ungroup the objects later, the original group remains. Removing objects from a group 1. Ungroup the objects. 2. "Shift + click" on the objects you want to remove. This deselects them; the other objects remain selected. You can then choose "Arrange" > "Group " to regroup the remaining objects. Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object Page 420 nearest the front. Page 421 To create a group 1. Select all the objects you want in the group. 2. Right click and choose Group or choose Group from the Arrange menu (or "Ctrl + G") to create the group. Ungrouping objects 1. Select the group. 2. Right click and choose Ungroup or choose Ungroup from the Arrange menu (or "Ctrl + U"). After this, all the individual objects in the group remain selected. To add more objects to a group 1. Select the group. 2. Ungroup ("Ctrl + U") 3. Select the extra objects. 4. Group again ("Ctrl + G") You can also incorporate a group into a second group by omitting step 2. Web Designer Premium remembers the original grouping information. If you ungroup the objects later, the original group remains. Removing objects from a group 1. Ungroup the objects. 2. "Shift + click" on the objects you want to remove. This deselects them; the other objects remain selected. You can then choose "Arrange" > "Group " to regroup the remaining objects. Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 422 Ungrouping objects 1. Select the group. 2. Right click and choose Ungroup or choose Ungroup from the Arrange menu (or "Ctrl + U"). After this, all the individual objects in the group remain selected. To add more objects to a group 1. Select the group. 2. Ungroup ("Ctrl + U") 3. Select the extra objects. 4. Group again ("Ctrl + G") You can also incorporate a group into a second group by omitting step 2. Web Designer Premium remembers the original grouping information. If you ungroup the objects later, the original group remains. Removing objects from a group 1. Ungroup the objects. 2. "Shift + click" on the objects you want to remove. This deselects them; the other objects remain selected. You can then choose "Arrange" > "Group " to regroup the remaining objects. Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 423 To add more objects to a group 1. Select the group. 2. Ungroup ("Ctrl + U") 3. Select the extra objects. 4. Group again ("Ctrl + G") You can also incorporate a group into a second group by omitting step 2. Web Designer Premium remembers the original grouping information. If you ungroup the objects later, the original group remains. Removing objects from a group 1. Ungroup the objects. 2. "Shift + click" on the objects you want to remove. This deselects them; the other objects remain selected. You can then choose "Arrange" > "Group " to regroup the remaining objects. Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 424 Removing objects from a group 1. Ungroup the objects. 2. "Shift + click" on the objects you want to remove. This deselects them; the other objects remain selected. You can then choose "Arrange" > "Group " to regroup the remaining objects. Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 425 Selecting a single object from within a group This feature is useful for changing an object's color, for example. "Ctrl + click" on the object (you can also use this to select a "group within a group"). Pressing "Tab", or "Shift + Tab" moves the selection within the group, to the next, or previous object. Once you have selected an object inside a group, you can also use "Alt + click" to select the object under the selected one. This is called "select inside". Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 426 Groups and layers There's more about layers in Layers . If all the objects to be grouped are in one layer, the group is created in that layer. The group is at the level of the highest member of the group, i.e. the group does not automatically become the front object. If the objects are in more than one layer, then the group is created in the layer containing the object nearest the front. Page 427 Soft Groups Ordinary Groups as described in "Grouping and ungrouping objects" sit on a single layer, they cannot span layers. Soft Groups are an alternative way of linking objects together where the objects can be across several different layers. Selecting one member of a Soft Group also selects all other members of the same Soft Group ? even members that are on invisible or locked layers. This means when you delete, move, rotate or otherwise transform one member of a Soft Group, all the other members are similarly modified. The status line indicates when a Soft Group is selected. Soft Groups are useful for keeping closely related objects together. For example the MouseOff and MouseOver states of a web button are Soft Grouped together, so that if one state is moved or transformed, so is the other state. Creating Soft Groups To create a Soft Group, select all the objects that are to be included in it and then choose "Arrange" > "Apply soft group" (or press "Ctrl + Alt + G"). Note that if the Soft Group is to include members on invisible or locked layers, you'll need to make those layers temporarily visible and editable using the Page & Layer Gallery in order to select the objects and Soft Group them. An object cannot be a member of more than one Soft Group and Soft Groups cannot be nested (soft groups as members of soft groups). Removing Soft Groups To disband a Soft Group, select it and choose "Arrange" > "Remove soft group " (or press "Ctrl + Alt +U"). The objects don't get deleted, they are just no longer linked together by a Soft Group. Text Synchronization Any text objects which have the same text value and which are members of the same Soft Group are kept synchronized if any of those text objects are edited. So change the text in one object and any other text objects that had the exact same characters will also be changed to match. Only the text value itself if synchronized, so different text objects can have different sizes, fonts and text attributes. Text synchronization using Soft Groups is useful where a label is duplicated in several places, perhaps in different styles and you want each object to show the same label. Page 428 Creating Soft Groups To create a Soft Group, select all the objects that are to be included in it and then choose "Arrange" > "Apply soft group" (or press "Ctrl + Alt + G"). Note that if the Soft Group is to include members on invisible or locked layers, you'll need to make those layers temporarily visible and editable using the Page & Layer Gallery in order to select the objects and Soft Group them. An object cannot be a member of more than one Soft Group and Soft Groups cannot be nested (soft groups as members of soft groups). Removing Soft Groups To disband a Soft Group, select it and choose "Arrange" > "Remove soft group " (or press "Ctrl + Alt +U"). The objects don't get deleted, they are just no longer linked together by a Soft Group. Text Synchronization Any text objects which have the same text value and which are members of the same Soft Group are kept synchronized if any of those text objects are edited. So change the text in one object and any other text objects that had the exact same characters will also be changed to match. Only the text value itself if synchronized, so different text objects can have different sizes, fonts and text attributes. Text synchronization using Soft Groups is useful where a label is duplicated in several places, perhaps in different styles and you want each object to show the same label. Page 429 Removing Soft Groups To disband a Soft Group, select it and choose "Arrange" > "Remove soft group " (or press "Ctrl + Alt +U"). The objects don't get deleted, they are just no longer linked together by a Soft Group. Text Synchronization Any text objects which have the same text value and which are members of the same Soft Group are kept synchronized if any of those text objects are edited. So change the text in one object and any other text objects that had the exact same characters will also be changed to match. Only the text value itself if synchronized, so different text objects can have different sizes, fonts and text attributes. Text synchronization using Soft Groups is useful where a label is duplicated in several places, perhaps in different styles and you want each object to show the same label. Page 430 Text Synchronization Any text objects which have the same text value and which are members of the same Soft Group are kept synchronized if any of those text objects are edited. So change the text in one object and any other text objects that had the exact same characters will also be changed to match. Only the text value itself if synchronized, so different text objects can have different sizes, fonts and text attributes. Text synchronization using Soft Groups is useful where a label is duplicated in several places, perhaps in different styles and you want each object to show the same label. Page 431 Alignment This lets you accurately align or distribute two or more objects. Quick aligning Select the objects you want to align, and right click the selection to choose Align from the drop-down menu, and then do one of the following: Align the objects vertically by choosing Left edges, Centers or Right edges. Align the objects horizontally by choosing Top edges, Centers or Bottom edges. Aligning and distributing space If you want to distribute space between the objects as well as align them, select the objects, right click the selection and choose "Align" > "Alignment" to display the Object Alignment dialog. Alternatively choose "Arrange" > "Alignment" ("Ctrl + ?+ L"). The small diagram at the top of the dialog box shows you the effect of selecting each option. The selected objects in the document do not change until you click Apply . The alignment dialog is a non-modal dialog, which means you can keep it on screen and continue to work on the document at the same time. So you can change tools, draw, and change your object selection, and then easily select from the various alignment options. If you've got your selection wrong, you can change the selection, and just click the Apply button to apply the last alignment settings again. This can be a real-time saver. Within This section of the dialog controls the boundaries within which you align or distribute the objects. The options are: Selection bounds : The boundaries are the outer edges of the selected objects. Their relative position on the page or spread has no effect. Page 432 Bounds of Back object : The boundaries are the outer edges of the backmost selected object. This object is not affected by the alignment. You can use this to define the "reference" object when you want to align several objects in a row, for instance. With the normal "Selection bounds" options on the leftmost object is the reference object (the one that won't move) Page(s): If the objects are on a single page, the boundaries are the edges of the page. (This lets you, for example, center objects on the page or align against the page edge.) Aligning To align objects, for example, so their left edges are aligned to the left. 1. Select the objects and right click the selection. 2. Choose "Align" > "Left Edges" from the drop-down list. The selected objects move to align the left edges. Alternatively: 1. Choose "Align" > "Alignment" or press "Ctrl + Shift + L" or choose Alignment from the Arrange menu to open the Object Alignment dialog. 2. Select the required Within option, e.g. Selection bounds. 3. Select Align Left for horizontal positions. 4. Leave vertical positions to No Change. 5. Click Apply. The selected objects move to align the left edges. All the align options act in a similar way. For brevity, only the left align option, shown in the illustration of the dialog box is described. Experiment to learn about the other options. To quick-select any combinations of vertical and horizontal alignment click with the mouse in the diagram: A simple mouse click aligns horizontal and vertical positions to the clicked position to any of the nine combinations of top-centrally-bottom/left-centrally-right. "Ctrl + mouse click" leaves the horizontal position unchanged and arranges the objects in a to a top, centrally, or bottom aligned row. "ñ+ mouse click" leaves the vertical position unchanged and arranges the objects in a left, centrally, or right-aligned column. Distribute The distribute options will position all the selected objects evenly across the "Within" area (usually within the selection bounds, but it could be the page or spread). Again all the distribute options work in a similar way. The following examples show how the different vertical position options align objects: Top edges distribution: the tops of the objects are evenly spaced. Bottom edges distribution is the inverse?the bottom of the objects are evenly spaced. Page 433 Centers distribution : the centers of the objects are evenly spaced. Equi-spaced distribution: the objects are evenly spaced from each other. The horizontal position options are similar but operate in the horizontal direction. So, for example, to distribute this collection of randomly positioned ellipses, so they are all equally spaced and aligned to the top edge: Select the shapes Display the Alignment dialog ("Ctrl + ?+ L") Ensure Within shows Selection bounds Select Horizontal positions: Distribute centers Select Vertical position: Align top Click Apply And they will now look like this, all equally spaced horizontally and aligned to the top. Remember if you make a mistake you can always undo the operation. Page 434 Within This section of the dialog controls the boundaries within which you align or distribute the objects. The options are: Selection bounds : The boundaries are the outer edges of the selected objects. Their relative position on the page or spread has no effect. Bounds of Back object : The boundaries are the outer edges of the backmost selected object. This object is not affected by the alignment. You can use this to define the "reference" object when you want to align several objects in a row, for instance. With the normal "Selection bounds" options on the leftmost object is the reference object (the one that won't move) Page(s): If the objects are on a single page, the boundaries are the edges of the page. (This lets you, for example, center objects on the page or align against the page edge.) Aligning To align objects, for example, so their left edges are aligned to the left. 1. Select the objects and right click the selection. 2. Choose "Align" > "Left Edges" from the drop-down list. The selected objects move to align the left edges. Alternatively: 1. Choose "Align" > "Alignment" or press "Ctrl + Shift + L" or choose Alignment from the Arrange menu to open the Object Alignment dialog. 2. Select the required Within option, e.g. Selection bounds. 3. Select Align Left for horizontal positions. 4. Leave vertical positions to No Change. 5. Click Apply. The selected objects move to align the left edges. All the align options act in a similar way. For brevity, only the left align option, shown in the illustration of the dialog box is described. Experiment to learn about the other options. To quick-select any combinations of vertical and horizontal alignment click with the mouse in the diagram: A simple mouse click aligns horizontal and vertical positions to the clicked position to any of the nine combinations of top-centrally-bottom/left-centrally-right. "Ctrl + mouse click" leaves the horizontal position unchanged and arranges the objects in a to a top, centrally, or bottom aligned row. "ñ+ mouse click" leaves the vertical position unchanged and arranges the objects in a left, centrally, or right-aligned column. Page 435 Distribute The distribute options will position all the selected objects evenly across the "Within" area (usually within the selection bounds, but it could be the page or spread). Again all the distribute options work in a similar way. The following examples show how the different vertical position options align objects: Top edges distribution: the tops of the objects are evenly spaced. Bottom edges distribution is the inverse?the bottom of the objects are evenly spaced. Centers distribution : the centers of the objects are evenly spaced. Equi-spaced distribution: the objects are evenly spaced from each other. The horizontal position options are similar but operate in the horizontal direction. So, for example, to distribute this collection of randomly positioned ellipses, so they are all equally spaced and aligned to the top edge: Select the shapes Display the Alignment dialog ("Ctrl + + L") Ensure Within shows Selection bounds Select Horizontal positions: Distribute centers Select Vertical position: Align top Click Apply And they will now look like this, all equally spaced horizontally and aligned to the top. Remember if you make a mistake you can always undo the operation. Page 436 Aligning To align objects, for example, so their left edges are aligned to the left. 1. Select the objects and right click the selection. 2. Choose "Align" > "Left Edges" from the drop-down list. The selected objects move to align the left edges. Alternatively: 1. Choose "Align" > "Alignment" or press "Ctrl + Shift + L" or choose Alignment from the Arrange menu to open the Object Alignment dialog. 2. Select the required Within option, e.g. Selection bounds. 3. Select Align Left for horizontal positions. 4. Leave vertical positions to No Change. 5. Click Apply. The selected objects move to align the left edges. All the align options act in a similar way. For brevity, only the left align option, shown in the illustration of the dialog box is described. Experiment to learn about the other options. To quick-select any combinations of vertical and horizontal alignment click with the mouse in the diagram: A simple mouse click aligns horizontal and vertical positions to the clicked position to any of the nine combinations of top-centrally-bottom/left-centrally-right. "Ctrl + mouse click" leaves the horizontal position unchanged and arranges the objects in a to a top, centrally, or bottom aligned row. "ñ+ mouse click" leaves the vertical position unchanged and arranges the objects in a left, centrally, or right-aligned column. Distribute The distribute options will position all the selected objects evenly across the "Within" area (usually within the selection bounds, but it could be the page or spread). Again all the distribute options work in a similar way. The following examples show how the different vertical position options align objects: Top edges distribution: the tops of the objects are evenly spaced. Bottom edges distribution is the inverse?the bottom of the objects are evenly spaced. Centers distribution : the centers of the objects are evenly spaced. Equi-spaced distribution: the objects are evenly spaced from each other. The horizontal position options are similar but operate in the horizontal direction. So, for example, to distribute this collection of randomly positioned ellipses, so they are all equally spaced and aligned to the top edge: Select the shapes Display the Alignment dialog ("Ctrl + + L") Ensure Within shows Selection bounds Page 437 Select Horizontal positions: Distribute centers Select Vertical position: Align top Click Apply And they will now look like this, all equally spaced horizontally and aligned to the top. Remember if you make a mistake you can always undo the operation. Page 438 Distribute The distribute options will position all the selected objects evenly across the "Within" area (usually within the selection bounds, but it could be the page or spread). Again all the distribute options work in a similar way. The following examples show how the different vertical position options align objects: Top edges distribution: the tops of the objects are evenly spaced. Bottom edges distribution is the inverse?the bottom of the objects are evenly spaced. Centers distribution : the centers of the objects are evenly spaced. Equi-spaced distribution: the objects are evenly spaced from each other. The horizontal position options are similar but operate in the horizontal direction. So, for example, to distribute this collection of randomly positioned ellipses, so they are all equally spaced and aligned to the top edge: Select the shapes Display the Alignment dialog ("Ctrl + + L") Ensure Within shows Selection bounds Select Horizontal positions: Distribute centers Select Vertical position: Align top Click Apply And they will now look like this, all equally spaced horizontally and aligned to the top. Remember if you make a mistake you can always undo the operation. Page 439 Copying Styles: Paste Attributes This lets you copy attributes (such as line pattern or fill color) between objects. It is a quick way of applying multiple attributes to an object. The square has a specific color, shadow, line and fill style. Copying it and then pasting its attributes on to the circle in the middle, results in the circle to the right. 1. Select the object from which you wish to copy the attributes. 2. Copy the selection to the clipboard. ("Edit" > "Copy", or "Ctrl + C".) 3. Select the object(s) to which you want to apply the attributes. 4. Choose "Edit" > "Paste attributes", or "Ctrl + Shift + A". The object remains on the clipboard until overwritten by a cut or copy operation. This lets you repeat paste attributes as many times as required. Style libraries It's quite easy to use this technique to create documents that can be used as style libraries. Create a series of small objects with a variety of useful fill, color and other attribute styles. Then the quickest way to use one of these styles is: Click on the source object, "Ctrl + C" to copy the style Move to the destination object (which can be in another document, "Ctrl + Tab" to quickly switch between open documents), click on the object to apply the style to Press "Ctrl + Shift + A" to apply the attributes Note: Most attributes can be copied this way, including shadows, feather values, fill styles, etc. However bevels can only be copied from one object to another if the object the bevel is copied to has already a bevel to apply the bevel attributes to. Page 440 Naming objects You can apply names to any object in Xara Web Designer 7 Premium using the Apply, remove or inspect names of objects button on the Selector Tool infobar. Naming is a general mechanism which has a variety of uses, some of which are described below. Most commonly names are used to form loose sets of objects. Example uses of names Flash Animations: Names are used in flash animations to mark objects which are to be tweened by the Flash exporter. See the Flash chapter for full details. Adding names To add a name to an object, select the object and open the Names dialog using the button on the Selector Tool infobar or right click on the object and choose Names... Type the new name into the Apply name field, or use the drop down list on the same field to select a name which is already used elsewhere in the current document. Click Add. You should see the name appear in the Names applied list. Names applied The Names Applied field shows you the names applied to the current selection. If more than one object is selected, a list of names is only shown if all objects in the selection have exactly the same set of names applied. Otherwise "" is displayed, indicating that there are differences in terms of the names applied to different objects in the selection. To remove a name from the selected object(s), click the name in the Names Applied list to select it and then click the Remove button. Page 441 Adding names To add a name to an object, select the object and open the Names dialog using the button on the Selector Tool infobar or right click on the object and choose Names... Type the new name into the Apply name field, or use the drop down list on the same field to select a name which is already used elsewhere in the current document. Click Add. You should see the name appear in the Names applied list. Names applied The Names Applied field shows you the names applied to the current selection. If more than one object is selected, a list of names is only shown if all objects in the selection have exactly the same set of names applied. Otherwise " " is displayed, indicating that there are differences in terms of the names applied to different objects in the selection. To remove a name from the selected object(s), click the name in the Names Applied list to select it and then click the Remove button. Page 442 Names applied The Names Applied field shows you the names applied to the current selection. If more than one object is selected, a list of names is only shown if all objects in the selection have exactly the same set of names applied. Otherwise " " is displayed, indicating that there are differences in terms of the names applied to different objects in the selection. To remove a name from the selected object(s), click the name in the Names Applied list to select it and then click the Remove button. Page 443 Repeating Objects It's common to have items like navigation buttons, headers or logos repeating on all pages of your website. Web Designer Premium provides the ability to repeat any item in the same place on any of your web pages. When you update one of the copies, Web Designer Premium automatically replicates those changes across all pages that have a copy of the repeating object. On most of the template designs the main navigation buttons are repeating. You can make any object such as a button a repeating object by right clicking it and choosing Repeat on all pages . The object is copied to the same place on all pages, displaying the repeating symbol icon in the top right hand corner. If you make any further changes to this item all the copies will be automatically updated. However if the bar is set to be a Site navigation bar it automatically appears the same on all pages of your site and there is no need to make it a repeating object. Logo text and footers are also normally set to be repeating objects in the templates. Again this means you can edit them on one page, and the same object is automatically updated on all other pages. Note : This uses the current page as the source of the repeating items to update across all the other pages. The red box highlights the repeating object symbol, shown on every instance of the repeating object If you don't want a copy of the repeating object on a page, just delete it from that page. When edited, the repeating object is only automatically updated to those pages that already have it. This means you can choose which of the pages in your document should have the repeating object and which should not. If you want a repeating object on just a few pages of a large website, you can: 1. First make your object repeat on all pages of your site, using Arrange > Repeat on all pages. 2. Select one of the repeating objects and copy it to the clipboard ("Ctrl + C"). 3. Hit the Delete key and choose the Delete from all pages option when prompted. 4. Now simply paste the repeating object onto each page that needs a copy of it. Editing the contents of a repeating object When Web Designer Premium creates a repeating object, the repeating items are placed in a containing 'repeating group', similar to a normal group. If you drill down to a layer containing a repeating object in the Page & Layer Gallery , you can see that there's a repeating group containing each repeating object on that layer. Page 444 Web Designer Premium places each repeating object inside a repeating group If you want to edit an item inside this repeating group, press "Ctrl + click" on the item to select it inside the repeating group. You can also double click on a group to edit it in a new sub-document view (or right click on it and choose Open from the context menu). It contains only the contents of the group and not the group itself, so you can select all the direct children of the group just by clicking on them. Alternatively if you go into a specific tool you can usually click directly on any object that is applicable to that tool and it will be selected inside its repeating group (or any other type of group). So for example you can select a Quickshape that's inside a repeating group by simply going into the Quickshape tool and then clicking on the shape. As with any other edits made to a repeating object, any edits you make inside a repeating group are applied to all instances of that repeating object on other pages. Locking a repeating object You can lock a repeating object right clicking it and choosing Lock repeating object . Once locked, the object is not selectable. But editing any other copies of that repeating object on other pages, which aren't locked, will change all copies, including the locked copy. Headers/Footers You may have pages in your site of varying lengths and want some repeating objects to be positioned relative to the top of each page and others (e.g. footers) positioned relative to the bottom of each page. You can configure Xara Web Designer 7 Premium to do this, so header and footer repeating objects will move with respect to the top and bottom of each page. The position of a repeating object on the page determines whether it is considered to be a header or footer. If any part of the object is in the top half of the page, Xara Web Designer 7 Premium treats it as a header and will move it to the same position relative to the top of each page. Objects entirely in the bottom half of the page are treated as footers and Xara Web Designer 7 Premium positions them relative to the bottom of each page, irrespective of page length. For some repeating objects, this automatic decision making about whether the object should be positioned relative to the top or bottom of pages may be inappropriate. So if required you can force any repeating object to be positioned relative to the top or bottom of pages by right clicking on it and choosing "Repeat position" > "Top" or "Repeat position" > "Bottom". To restore normal automatic positioning behavior to a repeating object, right click it and choose " Repeat position" > "Automatic" Page 445 . Stopping objects repeating Right click an object and choose Stop updating to turn off the repeating nature of an object, or all of its copies in your website. Choosing Stop updating from the Arrange menu also allows this. You'll be asked whether you want to just stop the selected object repeating or all copies of the object in the website. Choose the All option. Now the different copies of that object can be independently edited and the next time one is changed it won't update any of them. Use this if, for example, you've used Repeat on all pages to copy an object to all pages of your website, but then you want to make those objects different on each page so that they are no longer tied together. Stop updating is also useful if you want to make a copy of a repeating object (eg. a footer or logo) on one page and you don't want that copy to be updated. In this case choose the Just this copy option when prompted. Note that you can't use Stop updating on Navbars which have the Site navigation bar option turned on in the Navbar dialog. That's because site navigation bars always update across the whole website. See the Navigation Bar chapter for more information on site navigation bars. Deleting repeating objects If you don't want a copy of the repeating object on a page, just delete it from that page. Xara Web Designer 7 Premium displays a prompt asking whether to delete just that copy or all copies of that repeating object. Pressing "Ctrl + Delete" will delete just the selected repeating object without asking whether you want to delete all instances or just this one. Page 446 Editing the contents of a repeating object When Web Designer Premium creates a repeating object, the repeating items are placed in a containing 'repeating group', similar to a normal group. If you drill down to a layer containing a repeating object in the Page & Layer Gallery , you can see that there's a repeating group containing each repeating object on that layer. Web Designer Premium places each repeating object inside a repeating group If you want to edit an item inside this repeating group, press "Ctrl + click" on the item to select it inside the repeating group. You can also double click on a group to edit it in a new sub-document view (or right click on it and choose Open from the context menu). It contains only the contents of the group and not the group itself, so you can select all the direct children of the group just by clicking on them. Alternatively if you go into a specific tool you can usually click directly on any object that is applicable to that tool and it will be selected inside its repeating group (or any other type of group). So for example you can select a Quickshape that's inside a repeating group by simply going into the Quickshape tool and then clicking on the shape. As with any other edits made to a repeating object, any edits you make inside a repeating group are applied to all instances of that repeating object on other pages. Locking a repeating object You can lock a repeating object right clicking it and choosing Lock repeating object . Once locked, the object is not selectable. But editing any other copies of that repeating object on other pages, which aren't locked, will change all copies, including the locked copy. Headers/Footers You may have pages in your site of varying lengths and want some repeating objects to be positioned relative to the top of each page and others (e.g. footers) positioned relative to the bottom of each page. You can configure Xara Web Designer 7 Premium to do this, so header and footer repeating objects will move with respect to the top and bottom of each page. The position of a repeating object on the page determines whether it is considered to be a header or footer. If any part of the object is in the top half of the page, Xara Web Designer 7 Premium treats it as a header and will move it to the same position relative to the top of each page. Objects entirely in the bottom half of the page are treated as footers and Xara Web Designer 7 Premium positions them relative to the bottom of each page, irrespective of page length. Page 447 For some repeating objects, this automatic decision making about whether the object should be positioned relative to the top or bottom of pages may be inappropriate. So if required you can force any repeating object to be positioned relative to the top or bottom of pages by right clicking on it and choosing "Repeat position" > "Top" or "Repeat position" > "Bottom". To restore normal automatic positioning behavior to a repeating object, right click it and choose " Repeat position" > "Automatic" . Stopping objects repeating Right click an object and choose Stop updating to turn off the repeating nature of an object, or all of its copies in your website. Choosing Stop updating from the Arrange menu also allows this. You'll be asked whether you want to just stop the selected object repeating or all copies of the object in the website. Choose the All option. Now the different copies of that object can be independently edited and the next time one is changed it won't update any of them. Use this if, for example, you've used Repeat on all pages to copy an object to all pages of your website, but then you want to make those objects different on each page so that they are no longer tied together. Stop updating is also useful if you want to make a copy of a repeating object (eg. a footer or logo) on one page and you don't want that copy to be updated. In this case choose the Just this copy option when prompted. Note that you can't use Stop updating on Navbars which have the Site navigation bar option turned on in the Navbar dialog. That's because site navigation bars always update across the whole website. See the Navigation Bar chapter for more information on site navigation bars. Deleting repeating objects If you don't want a copy of the repeating object on a page, just delete it from that page. Xara Web Designer 7 Premium displays a prompt asking whether to delete just that copy or all copies of that repeating object. Pressing "Ctrl + Delete" will delete just the selected repeating object without asking whether you want to delete all instances or just this one. Page 448 Headers/Footers You may have pages in your site of varying lengths and want some repeating objects to be positioned relative to the top of each page and others (e.g. footers) positioned relative to the bottom of each page. You can configure Xara Web Designer 7 Premium to do this, so header and footer repeating objects will move with respect to the top and bottom of each page. The position of a repeating object on the page determines whether it is considered to be a header or footer. If any part of the object is in the top half of the page, Xara Web Designer 7 Premium treats it as a header and will move it to the same position relative to the top of each page. Objects entirely in the bottom half of the page are treated as footers and Xara Web Designer 7 Premium positions them relative to the bottom of each page, irrespective of page length. For some repeating objects, this automatic decision making about whether the object should be positioned relative to the top or bottom of pages may be inappropriate. So if required you can force any repeating object to be positioned relative to the top or bottom of pages by right clicking on it and choosing "Repeat position" > "Top" or "Repeat position" > "Bottom". To restore normal automatic positioning behavior to a repeating object, right click it and choose " Repeat position" > "Automatic" . Stopping objects repeating Right click an object and choose Stop updating to turn off the repeating nature of an object, or all of its copies in your website. Choosing Stop updating from the Arrange menu also allows this. You'll be asked whether you want to just stop the selected object repeating or all copies of the object in the website. Choose the All option. Now the different copies of that object can be independently edited and the next time one is changed it won't update any of them. Use this if, for example, you've used Repeat on all pages to copy an object to all pages of your website, but then you want to make those objects different on each page so that they are no longer tied together. Stop updating is also useful if you want to make a copy of a repeating object (eg. a footer or logo) on one page and you don't want that copy to be updated. In this case choose the Just this copy option when prompted. Note that you can't use Stop updating on Navbars which have the Site navigation bar option turned on in the Navbar dialog. That's because site navigation bars always update across the whole website. See the Navigation Bar chapter for more information on site navigation bars. Deleting repeating objects If you don't want a copy of the repeating object on a page, just delete it from that page. Xara Web Designer 7 Premium displays a prompt asking whether to delete just that copy or all copies of that repeating object. Pressing "Ctrl + Delete" will delete just the selected repeating object without asking whether you want to delete all instances or just this one. Page 449 Stopping objects repeating Right click an object and choose Stop updating to turn off the repeating nature of an object, or all of its copies in your website. Choosing Stop updating from the Arrange menu also allows this. You'll be asked whether you want to just stop the selected object repeating or all copies of the object in the website. Choose the All option. Now the different copies of that object can be independently edited and the next time one is changed it won't update any of them. Use this if, for example, you've used Repeat on all pages to copy an object to all pages of your website, but then you want to make those objects different on each page so that they are no longer tied together. Stop updating is also useful if you want to make a copy of a repeating object (eg. a footer or logo) on one page and you don't want that copy to be updated. In this case choose the Just this copy option when prompted. Note that you can't use Stop updating on Navbars which have the Site navigation bar option turned on in the Navbar dialog. That's because site navigation bars always update across the whole website. See the Navigation Bar chapter for more information on site navigation bars. Deleting repeating objects If you don't want a copy of the repeating object on a page, just delete it from that page. Xara Web Designer 7 Premium displays a prompt asking whether to delete just that copy or all copies of that repeating object. Pressing "Ctrl + Delete" will delete just the selected repeating object without asking whether you want to delete all instances or just this one. Page 450 Deleting repeating objects If you don't want a copy of the repeating object on a page, just delete it from that page. Xara Web Designer 7 Premium displays a prompt asking whether to delete just that copy or all copies of that repeating object. Pressing "Ctrl + Delete" will delete just the selected repeating object without asking whether you want to delete all instances or just this one. Page 451 Drawing Lines and Shapes In this chapter 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 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 Page 452 Drawing a line or shape You can use any of these tools to draw lines and shapes: The Freehand & Brush Tool ("F3"). The Straight Line & Arrow Tool The Shape Editor Tool ("F4"). The Freehand & Brush Tool is the easiest way to draw simple lines, curves, and shapes, and it acts rather like a pencil. The Straight Line & Arrow Tool is best if you want to draw single segment straight lines, or add arrow heads and tails to any types of lines. The Shape Editor Tool is best for drawing precise curves and lines. It is also the main tool to edit lines and shapes. Note: Although it is not in the Drawing Tools toolbar, you can also use the Pen Tool to create precise shapes. It has limited functionality and works like the line tool of other drawing programs. To use the Pen Tool , choose Control Bars from the Window menu and click the Button Palette checkbox. Then click the Pen Tool icon in the Button Palette. Or use the keyboard shortcut "Shift + F5". Page 453 The Freehand & Brush Tool You can use this tool to draw in a freehand manner, as you would with a pencil. It can also be used to create brush strokes, which is described later. And it includes the option to draw variable width lines using a compatible pressure sensitive drawing device such as a graphics tablet. While using this tool the status line provides reminders on how to use the tool. 1. Position the pointer where you want the line to start. 2. Press and hold down the mouse button. (or draw with your graphics tablet or other connected device). 3. As you drag the pointer around the document, your line is drawn in real time. 4. Release the mouse button to terminate the line. After you've drawn a freehand line you can control how smooth the Smoothing Re-fit Indicator curve is (i.e. how many control points) by adjusting the smoothing control slider on the InfoBar. Low values make the line follow your mouse movement more closely by creating more control points, and higher values produce smoother curves with fewer control points. Low values are less smooth Higher values produce a smoother curve You can change the smoothing at any time until you make further edits to the line (the re-fit indicator on the InfoBar tells you when you can still change the smoothing.) Erasing while drawing Before you release the mouse button you can erase part of the line by holding "Shift". The pencil icon reverses so the eraser at the end is downwards. You can now erase back along the line. Release "Shift" and you can continue drawing. Drawing straight segments in the Freehand Tool While drawing a freehand line hold down "Alt", move the pointer to a new position and release "Alt" to draw a straight line. You can continue drawing a line or hold down "Alt" again to draw another straight segment. Remember, you can use "Ctrl" to constrain the angle of the line. If you only want to draw lots of single segment straight lines, use the Straight Line Tool described below. Extending a line Make sure the line is selected (a single click on the shape or line in the Freehand & Brush Tool will do this). Now if you move over the end of the line, a small + sign next to the pencil icon will indicate you can just draw to add a new freehand section to the line. Page 454 Joining two lines Select both lines, ("Shift + click" on the second line to add it to the selection) and you can now just draw from the end of one line to an end of the other. A small + sign next to the pencil icon (appearing after a pause) indicates you are over the end. Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 455 Erasing while drawing Before you release the mouse button you can erase part of the line by holding "Shift". The pencil icon reverses so the eraser at the end is downwards. You can now erase back along the line. Release "Shift" and you can continue drawing. Drawing straight segments in the Freehand Tool While drawing a freehand line hold down "Alt", move the pointer to a new position and release "Alt" to draw a straight line. You can continue drawing a line or hold down "Alt" again to draw another straight segment. Remember, you can use "Ctrl" to constrain the angle of the line. If you only want to draw lots of single segment straight lines, use the Straight Line Tool described below. Extending a line Make sure the line is selected (a single click on the shape or line in the Freehand & Brush Tool will do this). Now if you move over the end of the line, a small + sign next to the pencil icon will indicate you can just draw to add a new freehand section to the line. Joining two lines Select both lines, ("Shift + click" on the second line to add it to the selection) and you can now just draw from the end of one line to an end of the other. A small + sign next to the pencil icon (appearing after a pause) indicates you are over the end. Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 456 Drawing straight segments in the Freehand Tool While drawing a freehand line hold down "Alt", move the pointer to a new position and release "Alt" to draw a straight line. You can continue drawing a line or hold down "Alt" again to draw another straight segment. Remember, you can use "Ctrl" to constrain the angle of the line. If you only want to draw lots of single segment straight lines, use the Straight Line Tool described below. Extending a line Make sure the line is selected (a single click on the shape or line in the Freehand & Brush Tool will do this). Now if you move over the end of the line, a small + sign next to the pencil icon will indicate you can just draw to add a new freehand section to the line. Joining two lines Select both lines, ("Shift + click" on the second line to add it to the selection) and you can now just draw from the end of one line to an end of the other. A small + sign next to the pencil icon (appearing after a pause) indicates you are over the end. Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 457 Extending a line Make sure the line is selected (a single click on the shape or line in the Freehand & Brush Tool will do this). Now if you move over the end of the line, a small + sign next to the pencil icon will indicate you can just draw to add a new freehand section to the line. Joining two lines Select both lines, ("Shift + click" on the second line to add it to the selection) and you can now just draw from the end of one line to an end of the other. A small + sign next to the pencil icon (appearing after a pause) indicates you are over the end. Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 458 Joining two lines Select both lines, ("Shift + click" on the second line to add it to the selection) and you can now just draw from the end of one line to an end of the other. A small + sign next to the pencil icon (appearing after a pause) indicates you are over the end. Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 459 Closing a freehand shape (to create a filled shape) If you connect the start and end of a line, then it becomes a filled shape. You can now alter the fill color by dragging colors from the Color Line or using the Color Editor. Page 460 Editing lines/shapes with the Freehand & Brush Tool You cannot directly modify shapes created by the Quickshape, Rectangle, or Ellipse Tools. First convert them to editable shapes using "Arrange" > "Convert to editable shapes ". See "Shape handling" for more information. You can use the Freehand & Brush Tool to edit lines (or outlines of shapes) by simply redrawing the section of line you want to replace. For example: To edit the object: Select the object that you wish to edit. Move the freehand pencil over a part of the line. A ~ shows when the pencil is in position. Draw the required line, then move the freehand pencil over to the second point of the existing line. Again, a ~ shows when the pencil is in position. Release the mouse button, and the section of line is replaced. Sketch Mode This option is useful if you are rapidly sketching lots of separate lines close to each other, perhaps using a drawing tablet. When working this way you won't normally want to edit existing lines you've already drawn, but instead draw new lines with every stroke. But as described above, if you start a draw operation on an existing line, or on its end point, that existing line is modified. So when sketching you may inadvertently modify existing lines with your strokes, instead of drawing new lines on top as you'd intended. To overcome this problem, turn on sketch mode. Now if you hold the mouse pointer over an existing line, or end point, you'll notice that there is a short pause before the mouse pointer changes to indicate that the line will be edited or extended. This pause means you can still edit existing lines if you want, but you won't do so unintentionally when you actually mean to sketch new lines. Trace mode Trace mode helps you to draw lines which follow visible edges in photo images. For example you can use it to help you draw around a building or other object in a photo, that you want to cut out. For most photos it's best to turn smoothing down from the default value, so that the line more closely follows complex edges with less smoothing of the line as you draw. You can always adjust the smoothing after drawing the line, if required. Trace mode on/off Page 461 Turn on trace mode using the toggle button on the infobar. Draw with the Freehand tool over a photo and you should see that the line tries to follow edges in the image. You can also turn trace mode on and off while you are actively drawing a line, by pressing the T key. The mouse pointer changes to indicate whether trace mode is on or off. This allows you, for example, to turn off trace mode when you are drawing over a complex part of an image where there is no obvious edge for trace mode to follow. Commit points You'll often notice as you draw along an edge in a photo that sometimes the last few pixels of the line you've drawn will 'jump' around as it searches for different routes. When there is more than one possible route, move the mouse pointer around and see the edge jump between them. You can 'commit' the edge at any time by pressing the space bar when a correct route has been found. Then continue and trace mode will find more routes between the last commit point and the mouse pointer. Commit points are automatically added for you every 50 screen pixels, because you don't normally want to re-route the line more than that distance from where you are currently drawing. Erasing As mentioned above, whether tracing is on or off you can erase the last part of the line you've drawn by holding down the Shift key and moving the mouse pointer back to an earlier part of the line. The line is erased from that point to the end of the line. Complex images Few real world photos have objects with obvious unambiguous edges that can easily be followed by trace mode. There is often texture in the objects themselves or in the background which mean that trace mode will find many different candidate edges. Zoom into difficult parts of photos to get more control over the trace and use the space bar to enter manual commit points more often, the more complex the image. And press T to turn tracing on and off as you move between parts of an image that are easy to trace and parts that are not. Cutting out objects from photos To cut out part of a photo you can either draw an ordinary shape over the top of the photo and then use the combine shapes operations in the Arrange menu to cut the photo with the shape (see the Shape Handling chapter Page 462 for details). Or you can go into mask mode, draw a mask shape over the photo and then use cut, copy and paste (or the combine shapes operations) to cut or copy the part of the photo you've indicated with the mask. See the Photo Handling chapter for more information on using mask mode. Once you've cut out a piece of a photo, it's often a good idea to apply a small amount of feather to blur the edge slightly. Non-destructive editing Unlike most photo tools which permanently edit the pixels of the photo when you cut objects out like this, Xara Web Designer 7 Premium is non-destructive. The outline remains an editable vector outline that you can edit just like any other vector shape, using the Freehand tool or Shape editor. Use the shape editor to manually clean up your outline, revealing more or less of the image as you edit the edges. Brush styles The Freehand & Brush Tool can also be used to apply different brush stroke styles along the path of the line. Instead of being a solid, fixed-width line, you can change it to be a variable-width line, or one of a near-infinite range of fancy brush styles, like airbrush, felt tip marker, and many more. It's important to understand that the line remains fully editable so, unlike most painting or photo re-touching programs, you can select and later adjust the line shape and the brush stroke. Page 463 Sketch Mode This option is useful if you are rapidly sketching lots of separate lines close to each other, perhaps using a drawing tablet. When working this way you won't normally want to edit existing lines you've already drawn, but instead draw new lines with every stroke. But as described above, if you start a draw operation on an existing line, or on its end point, that existing line is modified. So when sketching you may inadvertently modify existing lines with your strokes, instead of drawing new lines on top as you'd intended. To overcome this problem, turn on sketch mode. Now if you hold the mouse pointer over an existing line, or end point, you'll notice that there is a short pause before the mouse pointer changes to indicate that the line will be edited or extended. This pause means you can still edit existing lines if you want, but you won't do so unintentionally when you actually mean to sketch new lines. Trace mode Trace mode helps you to draw lines which follow visible edges in photo images. For example you can use it to help you draw around a building or other object in a photo, that you want to cut out. For most photos it's best to turn smoothing down from the default value, so that the line more closely follows complex edges with less smoothing of the line as you draw. You can always adjust the smoothing after drawing the line, if required. Trace mode on/off Turn on trace mode using the toggle button on the infobar. Draw with the Freehand tool over a photo and you should see that the line tries to follow edges in the image. You can also turn trace mode on and off while you are actively drawing a line, by pressing the T key. The mouse pointer changes to indicate whether trace mode is on or off. This allows you, for example, to turn off trace mode when you are drawing over a complex part of an image where there is no obvious edge for trace mode to follow. Commit points You'll often notice as you draw along an edge in a photo that sometimes the last few pixels of the line you've drawn will 'jump' around as it searches for different routes. When there is more than one possible route, move the mouse pointer around and see the edge jump between them. You can 'commit' the edge at any time by pressing the space bar Page 464 when a correct route has been found. Then continue and trace mode will find more routes between the last commit point and the mouse pointer. Commit points are automatically added for you every 50 screen pixels, because you don't normally want to re-route the line more than that distance from where you are currently drawing. Erasing As mentioned above, whether tracing is on or off you can erase the last part of the line you've drawn by holding down the Shift key and moving the mouse pointer back to an earlier part of the line. The line is erased from that point to the end of the line. Complex images Few real world photos have objects with obvious unambiguous edges that can easily be followed by trace mode. There is often texture in the objects themselves or in the background which mean that trace mode will find many different candidate edges. Zoom into difficult parts of photos to get more control over the trace and use the space bar to enter manual commit points more often, the more complex the image. And press T to turn tracing on and off as you move between parts of an image that are easy to trace and parts that are not. Cutting out objects from photos To cut out part of a photo you can either draw an ordinary shape over the top of the photo and then use the combine shapes operations in the Arrange menu to cut the photo with the shape (see the Shape Handling chapter for details). Or you can go into mask mode, draw a mask shape over the photo and then use cut, copy and paste (or the combine shapes operations) to cut or copy the part of the photo you've indicated with the mask. See the Photo Handling chapter for more information on using mask mode. Once you've cut out a piece of a photo, it's often a good idea to apply a small amount of feather to blur the edge slightly. Non-destructive editing Unlike most photo tools which permanently edit the pixels of the photo when you cut objects out like this, Xara Web Designer 7 Premium is non-destructive. The outline remains an editable vector outline that you can edit just like any other vector shape, using the Freehand tool or Shape editor. Use the shape editor to manually clean up your outline, revealing more or less of the image as you edit the edges. Brush styles The Freehand & Brush Tool can also be used to apply different brush stroke styles along the path of the line. Instead of being a solid, fixed-width line, you can change it to be a variable-width line, or one of a near-infinite range of fancy brush styles, like airbrush, felt tip marker, and many more. It's important to understand that the line remains fully editable so, unlike most painting or photo re-touching programs, you can select and later adjust the line shape and the brush stroke. Page 465 Trace mode Trace mode helps you to draw lines which follow visible edges in photo images. For example you can use it to help you draw around a building or other object in a photo, that you want to cut out. For most photos it's best to turn smoothing down from the default value, so that the line more closely follows complex edges with less smoothing of the line as you draw. You can always adjust the smoothing after drawing the line, if required. Trace mode on/off Turn on trace mode using the toggle button on the infobar. Draw with the Freehand tool over a photo and you should see that the line tries to follow edges in the image. You can also turn trace mode on and off while you are actively drawing a line, by pressing the T key. The mouse pointer changes to indicate whether trace mode is on or off. This allows you, for example, to turn off trace mode when you are drawing over a complex part of an image where there is no obvious edge for trace mode to follow. Commit points You'll often notice as you draw along an edge in a photo that sometimes the last few pixels of the line you've drawn will 'jump' around as it searches for different routes. When there is more than one possible route, move the mouse pointer around and see the edge jump between them. You can 'commit' the edge at any time by pressing the space bar when a correct route has been found. Then continue and trace mode will find more routes between the last commit point and the mouse pointer. Commit points are automatically added for you every 50 screen pixels, because you don't normally want to re-route the line more than that distance from where you are currently drawing. Erasing As mentioned above, whether tracing is on or off you can erase the last part of the line you've drawn by holding down the Shift key and moving the mouse pointer back to an earlier part of the line. The line is erased from that point to the end of the line. Complex images Few real world photos have objects with obvious unambiguous edges that can easily be followed by Page 466 trace mode. There is often texture in the objects themselves or in the background which mean that trace mode will find many different candidate edges. Zoom into difficult parts of photos to get more control over the trace and use the space bar to enter manual commit points more often, the more complex the image. And press T to turn tracing on and off as you move between parts of an image that are easy to trace and parts that are not. Cutting out objects from photos To cut out part of a photo you can either draw an ordinary shape over the top of the photo and then use the combine shapes operations in the Arrange menu to cut the photo with the shape (see the Shape Handling chapter for details). Or you can go into mask mode, draw a mask shape over the photo and then use cut, copy and paste (or the combine shapes operations) to cut or copy the part of the photo you've indicated with the mask. See the Photo Handling chapter for more information on using mask mode. Once you've cut out a piece of a photo, it's often a good idea to apply a small amount of feather to blur the edge slightly. Non-destructive editing Unlike most photo tools which permanently edit the pixels of the photo when you cut objects out like this, Xara Web Designer 7 Premium is non-destructive. The outline remains an editable vector outline that you can edit just like any other vector shape, using the Freehand tool or Shape editor. Use the shape editor to manually clean up your outline, revealing more or less of the image as you edit the edges. Brush styles The Freehand & Brush Tool can also be used to apply different brush stroke styles along the path of the line. Instead of being a solid, fixed-width line, you can change it to be a variable-width line, or one of a near-infinite range of fancy brush styles, like airbrush, felt tip marker, and many more. It's important to understand that the line remains fully editable so, unlike most painting or photo re-touching programs, you can select and later adjust the line shape and the brush stroke. Page 467 Brush styles The Freehand & Brush Tool can also be used to apply different brush stroke styles along the path of the line. Instead of being a solid, fixed-width line, you can change it to be a variable-width line, or one of a near-infinite range of fancy brush styles, like airbrush, felt tip marker, and many more. It's important to understand that the line remains fully editable so, unlike most painting or photo re-touching programs, you can select and later adjust the line shape and the brush stroke. Page 468 The Straight Line & Arrow tool This tool makes it easy to draw single segment straight lines and to add arrow heads and tails to any lines in a way that is much easier and more powerful than doing the same thing with the Line Gallery . Why a straight line tool? Prior to the addition of this simple tool, many users new to Xara Web Designer 7 Premium had great difficulty doing something as simple as drawing a straight line using the other drawing tools! That's because the Shape Editor is more geared to drawing multi-segment lines and shapes and the Freehand Tool to drawing freehand. Hence the need for this tool, which makes it obvious how to do something elementary. Drawing & editing straight lines Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads & tails The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 469 Why a straight line tool? Prior to the addition of this simple tool, many users new to Xara Web Designer 7 Premium had great difficulty doing something as simple as drawing a straight line using the other drawing tools! That's because the Shape Editor is more geared to drawing multi-segment lines and shapes and the Freehand Tool to drawing freehand. Hence the need for this tool, which makes it obvious how to do something elementary. Drawing & editing straight lines Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads & tails The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 470 Drawing & editing straight lines Simply click and drag on the page to draw a straight line. You can click on any existing line to select it, and once selected you can click-drag on either end to move the end of the line around. Adding arrowheads & tails The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 471 Adding arrowheads & tails The infobar has two dropdown lists on the left which allow you to choose an arrow head or tail style for each end of the selected line. Arrow head Arrow tail Arrow head/tail size Reverse path The slider on the infobar allows you to change the size of the arrow head and tail on the current selected line. Or you can enter a percentage value into the size text field to the right of the slider. By default new arrowheads are created with a width of around 6 times that of the line width and that is taken as the 100% size, as indicated by the size slider. If you make the line wider, the arrowhead width also updates accordingly. Therefore enter a value less than 100% to reduce the size of the arrowhead (and tail), or greater than 100% to increase. Although the slider only takes the size value up to a maximum of 800%, you can enter percentage values larger than this into the size text field. Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 472 Reverse path Press the Reverse path button on the infobar to switch around the head and tail of the selected line. Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 473 Adding more line segments Lines created with the Straight Line Tool are of course fully compatible with the other drawing tools. So if you want to add more segments to a line, make it curved, or perhaps even turn it into a closed shape, use the Shape Editor Tool . Page 474 The Shape Editor tool The Shape Editor Tool is the main tool used for both creating precise curves, lines, and shapes, as well as editing or altering lines and shapes. Add/Change/Edit Indicator Make curve Make line Smooth join Sharp join Break at points Delete points Reverse paths Positions of handles Smoothing The InfoBar, shown above, provides a wide range of controls as well as precise numeric control. All lines and shapes in Xara Web Designer 7 Premium are made from a sequence of curve and line sections. Curves are sometimes called "Bézier" curves after the mathematician who first described them. Although this section describes the Shape Editor Tool, you can also edit lines and shapes using the Selector Tool if you have the Show edit object handles button selected on the Selector Tool InfoBar. The sections or segments of a line are marked by small black point handles. You can drag, add and delete these handles to manipulate the shape of the line or outline. Some objects such as quickshapes, rectangles, ellipses, and text have to be converted into editable shapes before you can use the Shape Editor Tool on them. To do this, select an object and choose " Arrange" > "Combine shapes" > "Add shape ". To draw a straight line segment Using the Shape editor Tool, start a straight line: 1. Click where you want to start the line. You can start a line at either end; you don't have to work left to right, or top-to-bottom. This creates a point handle, and is displayed as a red square to indicate that it is the selected handle. 2. If necessary select the Make line button on the InfoBar ("L"). This ensures the next click will Page 475 draw a straight line segment. Either click where you want the next point handle to be, or click and drag, and then release the mouse button when the line is correct. This creates a line segment and selects the new end point handle. Mixing curved and straight lines To create an object which is a mixture of straight and curved segments, just switch between the Make Curve and Make Line buttons as you create the object (you can also press "L" or "C" on the keyboard.) Note: You can also use the keyboard shortcut "X" to create a Cusp Join or "S" to create a Smooth Join while using the Shape Editor Tool . These affect the way two line segments come together. A Cusp Join creates 2 independent Bezier control handles that you can edit separately. With a cusp join, you can create a sharp angle. A Smooth Join creates a symmetrical join that works like a see saw. If you drag one Bezier control handle down, the opposing control handle goes up. To draw a curved line segment: This is similar to starting a straight line (described above). 1. Click where you want to start the line. 2. If necessary select the Make curve button (shortcut "C".) 3. Either click or drag (as described for straight lines) to create a second point handle, and a curve segment will be added to the line. A curve segment has Curve handles associated with the selected point handle. You can drag these to adjust the angle and radius of the curve. Page 476 To draw a straight line segment Using the Shape editor Tool, start a straight line: 1. Click where you want to start the line. You can start a line at either end; you don't have to work left to right, or top-to-bottom. This creates a point handle, and is displayed as a red square to indicate that it is the selected handle. 2. If necessary select the Make line button on the InfoBar ("L"). This ensures the next click will draw a straight line segment. Either click where you want the next point handle to be, or click and drag, and then release the mouse button when the line is correct. This creates a line segment and selects the new end point handle. Mixing curved and straight lines To create an object which is a mixture of straight and curved segments, just switch between the Make Curve and Make Line buttons as you create the object (you can also press "L" or "C" on the keyboard.) Note: You can also use the keyboard shortcut "X" to create a Cusp Join or "S" to create a Smooth Join while using the Shape Editor Tool . These affect the way two line segments come together. A Cusp Join creates 2 independent Bezier control handles that you can edit separately. With a cusp join, you can create a sharp angle. A Smooth Join creates a symmetrical join that works like a see saw. If you drag one Bezier control handle down, the opposing control handle goes up. To draw a curved line segment: This is similar to starting a straight line (described above). 1. Click where you want to start the line. 2. If necessary select the Make curve button (shortcut "C".) 3. Either click or drag (as described for straight lines) to create a second point handle, and a curve segment will be added to the line. A curve segment has Curve handles associated with the selected point handle. You can drag these to adjust the angle and radius of the curve. Page 477 Mixing curved and straight lines To create an object which is a mixture of straight and curved segments, just switch between the Make Curve and Make Line buttons as you create the object (you can also press "L" or "C" on the keyboard.) Note: You can also use the keyboard shortcut "X" to create a Cusp Join or "S" to create a Smooth Join while using the Shape Editor Tool . These affect the way two line segments come together. A Cusp Join creates 2 independent Bezier control handles that you can edit separately. With a cusp join, you can create a sharp angle. A Smooth Join creates a symmetrical join that works like a see saw. If you drag one Bezier control handle down, the opposing control handle goes up. To draw a curved line segment: This is similar to starting a straight line (described above). 1. Click where you want to start the line. 2. If necessary select the Make curve button (shortcut "C".) 3. Either click or drag (as described for straight lines) to create a second point handle, and a curve segment will be added to the line. A curve segment has Curve handles associated with the selected point handle. You can drag these to adjust the angle and radius of the curve. Page 478 To draw a curved line segment: This is similar to starting a straight line (described above). 1. Click where you want to start the line. 2. If necessary select the Make curve button (shortcut "C".) 3. Either click or drag (as described for straight lines) to create a second point handle, and a curve segment will be added to the line. A curve segment has Curve handles associated with the selected point handle. You can drag these to adjust the angle and radius of the curve. Page 479 Extending the line Make sure an end point handle is the selected handle (red outline) and then just click again to add a new line or curve section. Each successive click places a new point handle and draws a new line segment to the selected point handle. Page 480 Finishing the line ?+ click completes the line (keeps it selected), or press "Esc" to finish the line and de-select it. After this, additional clicks will start a new line. Page 481 Adding a new point handle The Shape Editor Tool has three modes, depending on whether no point handles are selected (a click will start a new line), an end handle is selected (a click will add a new section), or one or more other point handles are selected (you can drag or change the handles). The InfoBar shows the current mode. New: Click to start a new line, Add: Click to extend the line, Change: Drag or delete point handles to change. This applies to the Shape Editor Tool only. To the end of a line: Make sure the line is selected, then: 1. If necessary, click on the end point to select it. 2. Position the pointer and click to add a new section. To the middle of a line: Make sure the line is selected, then; 1. Click on the line to add a new point handle into the line 2. Drag the point handle to the required position. To the start of a line: If the end point is selected, clicking on the start point closes the shape (this is described in "Closing a shape "). To add a new control handle to the start of a line: 1. Finish the line using "Shift + click". 2. Click on the start handle. 3. Position the pointer and click. Page 482 To the end of a line: Make sure the line is selected, then: 1. If necessary, click on the end point to select it. 2. Position the pointer and click to add a new section. To the middle of a line: Make sure the line is selected, then; 1. Click on the line to add a new point handle into the line 2. Drag the point handle to the required position. To the start of a line: If the end point is selected, clicking on the start point closes the shape (this is described in "Closing a shape "). To add a new control handle to the start of a line: 1. Finish the line using "Shift + click". 2. Click on the start handle. 3. Position the pointer and click. Page 483 To the middle of a line: Make sure the line is selected, then; 1. Click on the line to add a new point handle into the line 2. Drag the point handle to the required position. To the start of a line: If the end point is selected, clicking on the start point closes the shape (this is described in "Closing a shape "). To add a new control handle to the start of a line: 1. Finish the line using "Shift + click". 2. Click on the start handle. 3. Position the pointer and click. Page 484 To the start of a line: If the end point is selected, clicking on the start point closes the shape (this is described in "Closing a shape "). To add a new control handle to the start of a line: 1. Finish the line using "Shift + click". 2. Click on the start handle. 3. Position the pointer and click. Page 485 Selecting multiple point handles You may want to select several point handles to delete them, move them as a group, or change a region of points to curved or straight lines. To do this: 1. Select one point handle in the normal way by clicking on it. 2. "Shift + click" the other point handles to select them ("Shift + click" also deselects.) o Or "Ctrl + Shift + click" on a point handle to select all point handles on the line. o Or drag the mouse pointer diagonally to create a selection rectangle. All point handles in the rectangle are selected. o Or "Shift + drag" diagonally to create a selection rectangle. This adds all points within the rectangle to those already selected. 3. If the line has one or more selected point handles: o End moves the selection to the end of the line. o Home moves the selection to the start of the line. o Tab moves the selection to the next point handle towards the end. o "Shift + Tab" moves the selection to the next point handle towards the start. The start and end points are significant when applying arrows . Page 486 Deleting points Select the point handle(s) as described above and either click the Delete points button (Shape Editor Tool InfoBar), or press "Del". Page 487 Moving point handles—Shape Editor Tool You can move one or more selected handles: Drag the handles using the mouse. Or use the arrow keys on the keyboard. Or to move a single handle, type new values into the text boxes on the InfoBar (see below). Using the text boxes on the InfoBar The center pair of text boxes always shows the X/Y co-ordinates of the selected point. The surrounding X/Y fields show the co-ordinates of the curve handles on either side of the selected point. X/Y co-ordinates are relative to the bottom left corner of the page by default for print document and top left for web documents. You can change this in the "Grid and ruler" tab in the options dialog. If the selected point is on the end of a straight line section, the left fields show the length and angle of the line. You can adjust either by entering a new value and pressing return. Length and angle for straight line Position of selected point Position of curve handle Page 488 Using the text boxes on the InfoBar The center pair of text boxes always shows the X/Y co-ordinates of the selected point. The surrounding X/Y fields show the co-ordinates of the curve handles on either side of the selected point. X/Y co-ordinates are relative to the bottom left corner of the page by default for print document and top left for web documents. You can change this in the "Grid and ruler" tab in the options dialog. If the selected point is on the end of a straight line section, the left fields show the length and angle of the line. You can adjust either by entering a new value and pressing return. Length and angle for straight line Position of selected point Position of curve handle Page 489 Smoothing a line Imported shapes or shapes from tracers may have unnecessary points on a line. Lines with too many points can be unwieldy and can slow down rendering. Xara Web Designer 7 Premium can smooth the line to remove unnecessary points. Select all the points on the part of the line you want to smooth (see above). Drag selecting around the region in the Shape Editor Tool is probably the easiest way to select a large number of points. Drag the smoothing slider on the end of the Shape Editor InfoBar. Removed points are remembered so you can make further changes to the smoothing of the line by adjusting the slider. Removed points are discarded when you make further edits to the line by dragging a handle (for example). Tip : to make sure important points are not deleted, make sure they are not selected ("Shift+ click" on a selected point deselects it). Page 490 Constraining the line When dragging a point handle, holding down the constrain key ("Ctrl") will constrain the movement to multiples of the constrain angle (controlled from the options dialog, general tab). When dragging a curve handle the angle is constrained. Page 491 Changing curves Using the curve handle Dragging the curve handle will adjust the curvature of the adjoining curve segments. Move the curve handle towards or away from the point handle to pull the curve in the required direction. Dragging the line segment You can also change the curve by dragging the line segment between points. Notice the difference between dragging the line to change its shape, and clicking on the line to add a new point handle. Dragging a straight line segment changes it to a curved line segment. Making sharp corners Normally, Xara Web Designer 7 Premium draws a smooth curve through a point handle. For this, the two curve handles either side of a point handle are linked. Moving either curve handle also moves the other. Sometimes you will want a sharp corner, and to achieve this, you need to unlink the curve handles: 1. Double click the point handle, 2. Or select the point handle and either: Click the Cusp join button, or press "Z". You can now move each curve handle independently. Making smooth curves To convert a sharp join into a smooth curve: 1. Double click the point handle, 2. Or select the point handle and either: Click the Smooth join button, or "S". The two curve handles become linked and move to opposite sides of the point handle. This may change the shape of the curve. Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles Page 492 with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 493 Using the curve handle Dragging the curve handle will adjust the curvature of the adjoining curve segments. Move the curve handle towards or away from the point handle to pull the curve in the required direction. Dragging the line segment You can also change the curve by dragging the line segment between points. Notice the difference between dragging the line to change its shape, and clicking on the line to add a new point handle. Dragging a straight line segment changes it to a curved line segment. Making sharp corners Normally, Xara Web Designer 7 Premium draws a smooth curve through a point handle. For this, the two curve handles either side of a point handle are linked. Moving either curve handle also moves the other. Sometimes you will want a sharp corner, and to achieve this, you need to unlink the curve handles: 1. Double click the point handle, 2. Or select the point handle and either: Click the Cusp join button, or press "Z". You can now move each curve handle independently. Making smooth curves To convert a sharp join into a smooth curve: 1. Double click the point handle, 2. Or select the point handle and either: Click the Smooth join button, or "S". The two curve handles become linked and move to opposite sides of the point handle. This may change the shape of the curve. Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 494 Dragging the line segment You can also change the curve by dragging the line segment between points. Notice the difference between dragging the line to change its shape, and clicking on the line to add a new point handle. Dragging a straight line segment changes it to a curved line segment. Making sharp corners Normally, Xara Web Designer 7 Premium draws a smooth curve through a point handle. For this, the two curve handles either side of a point handle are linked. Moving either curve handle also moves the other. Sometimes you will want a sharp corner, and to achieve this, you need to unlink the curve handles: 1. Double click the point handle, 2. Or select the point handle and either: Click the Cusp join button, or press "Z". You can now move each curve handle independently. Making smooth curves To convert a sharp join into a smooth curve: 1. Double click the point handle, 2. Or select the point handle and either: Click the Smooth join button, or "S". The two curve handles become linked and move to opposite sides of the point handle. This may change the shape of the curve. Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 495 Making sharp corners Normally, Xara Web Designer 7 Premium draws a smooth curve through a point handle. For this, the two curve handles either side of a point handle are linked. Moving either curve handle also moves the other. Sometimes you will want a sharp corner, and to achieve this, you need to unlink the curve handles: 1. Double click the point handle, 2. Or select the point handle and either: Click the Cusp join button, or press "Z". You can now move each curve handle independently. Making smooth curves To convert a sharp join into a smooth curve: 1. Double click the point handle, 2. Or select the point handle and either: Click the Smooth join button, or "S". The two curve handles become linked and move to opposite sides of the point handle. This may change the shape of the curve. Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 496 Making smooth curves To convert a sharp join into a smooth curve: 1. Double click the point handle, 2. Or select the point handle and either: Click the Smooth join button, or "S". The two curve handles become linked and move to opposite sides of the point handle. This may change the shape of the curve. Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 497 Balancing curves Balancing makes the two curve handles the same distance from the point handle, which gives smoother, more symmetrical curves. To balance a curve, select the point handle, then drag one of the curve handles with "Shift" held down. As you drag one curve handle the other one will move to be exactly opposite it and the same distance from the point handle. Page 498 Changing a straight line to a curve (and vice versa) 1. Select the point handles at both ends of a line segment. For several line segments select all bordering point handles. 2. Click the Make curve or Make line button on the InfoBar, or press "L" or "C" (these shortcuts only work in the Shape Editor Tool). After changing the line type, you may need to move the curve handles for a smooth transition between curved and straight line segments. You can select several line segments and convert them all. The point handles at both ends of the segment must be selected. Page 499 Joining lines You can only join lines if both are selected (the point handles are shown on both lines): Using the Selector Tool, hold down "?" and click on the lines to select them (if you are already in the Shape Editor Tool, you can press "Alt + S" to temporarily go into the Selector Tool, "?+ click" to select the second line, then "Alt + S" again to return to the Shape Editor Tool ). Selecting objects is described fully in "Selecting objects ". Once both objects are selected, in the Shape Editor Tool, drag the end handle of one line over the end of the other line. As you drag the mouse pointer will show a + symbol to indicate that the lines will be joined.. If the ends of the two lines are already very close to each other (but not joined), then you can either zoom in or drag the end point away, and then back again so it's over the end point, and you see the + sign to indicate a join will occur. To create a filled shape, drag the other two end handles together. Because you join the end handles, you can only join lines and not shapes. Shapes are closed objects and so have no end handles. Page 500 Splitting a shape If you want to split (break) a line or shape: Either select an existing point handle on the line or outline of the shape, or create a new one where you want to break the line. Just click on the line in the Shape Editor Tool (see above). Click on the Break at points button, or press "B". If you split a line, there is no visible change. However, if you move the point handle, then only part of the line moves. If you split a shape, it changes to being a line. Any fill disappears. Note: "Slice shapes" (part of "Arrange" > "Combine shapes") also lets you split shapes into two separate shapes. This is described in "Shape handling ". Page 501 Changing the line width (thickness) To change the line thickness or the outline thickness of a shape, first select the object or objects: Type a new line width into the text box on the standard control bar or choose the default line thickness from the menu. Line thickness is traditionally measured in points, abbreviated to pt. 1 point is 1/72nd of an inch (about 0.3mm), which is slightly less than the thickness of one screen pixel when viewed at 100% zoom. You can use any of Web Designer Premium's standard measurement units. You can enter the thickness value in any unit, and Xara Web Designer 7 Premium will convert it to the correct number of Points. E.g. you can enter 0.5cm, and you will get a line half a centimeter thick, but it will show just over 14pt in the line width field. If you have no object selected and you change the line thickness value, this changes the default for all new lines. Note : A zero width line is a special case, and should not normally be used. This draws a line one device-pixel wide. The actual size will therefore depend on the device the drawing is displayed on. On a monitor screen one pixel is clearly visible and is never shown anti-aliased. On devices such as printers and particularly on image setters, which have a much higher resolution, the line is almost invisible (zero width lines in imported files are converted to 0.25pt). Page 502 Line Gallery The Line Gallery can be used to apply a range of line styles or attributes, such as brush strokes, dash patterns, arrow heads, and more. To display the Line Gallery : Choose "Utilities" > "Line Gallery" Or click the Line Gallery tab on the Galleries tab. The Line Gallery is split into sections. To open or close any section, click on the small folder icon in the gallery window. Line Width Join type Line cap To apply any line style or attribute from the gallery you can: Drag and drop the required style from the gallery onto the shape or line. Or double click on the required style in the gallery. Or select the style and then click the Apply button. Line width The text box at the top of the gallery duplicates that on the standard control bar. Brush strokes There are several sections that show a selection of various brush styles. Page 503 Dash pattern This section provides a selection of line dash styles. Arrowheads The best way to apply an arrowhead is to use the Straight Line & Arrow Tool , as described earlier in this chapter. However you can also use the line gallery. Drag and drop the arrowhead from the gallery onto the appropriate end of the line. Alternatively, to apply an arrowhead: Double click on the arrowhead in the gallery. Or select the required arrowhead and click Apply. Web Designer Premium has two types of arrowhead designs: beginning and end. If the line already has a beginning arrowhead, applying an end arrowhead automatically places it at the opposite end of the line. If the line has no arrowheads, and you use the Apply button or double click a style to apply it, then the arrowhead will be placed at the end of the line. The size of the arrow head is related to the thickness of the line. Thicker lines have proportionally larger arrowheads. If you hold "Ctrl" down and double click an arrow head or tail style, it will apply it to the other end of the line. For general information about galleries see document handling . Change join type This control on the top of the Line Gallery sets the style of corners. To change an existing line, select the line. To change the current join type, deselect all lines. Select the required type from the menu. Change line cap This control at the top of the Line Gallery sets the style of the ends of the line. To change an existing line, select the line. To change the default line cap, deselect all lines. Select the required type from the menu. Page 504 Change join type This control on the top of the Line Gallery sets the style of corners. To change an existing line, select the line. To change the current join type, deselect all lines. Select the required type from the menu. Change line cap This control at the top of the Line Gallery sets the style of the ends of the line. To change an existing line, select the line. To change the default line cap, deselect all lines. Select the required type from the menu. Page 505 Change line cap This control at the top of the Line Gallery sets the style of the ends of the line. To change an existing line, select the line. To change the default line cap, deselect all lines. Select the required type from the menu. Page 506 Shape Handling In this chapter Closing a shape Joining shapes Combining shapes Changing the line width (thickness) Variable width lines Creating rectangles and squares Creating circles and ellipses Creating regular polygons (the Quickshape Tool) Creating stars (polygons with indented sides) Editing stars Page 507 Closing a shape A shape is a closed object with no start or end handle. Only shapes can be color filled. To close a shape: 1. Create an open object with the end point handle close to the start handle. All the point handles (except the end handle) should be in their required positions. 2. Position the pointer over the end handle. 3. Drag the end handle over the start handle and release the mouse button. The two handles snap together. Or: 1. Create an open object with all the control handles in their correct positions. Do not create the final line segment. 2. Move the pointer over the start point. A + appears to the right of the pointer when it is over the start handle. 3. Click to create the final line segment and close the shape. Or: 1. Choose the Shape Editor Tool. 2. Click on an end point to select it. 3. Press the "¿" key. Or: 1. Use the Freehand & Brush Tool to create the final segment. Any of these closes the shape. If there is a current fill color, the shape is filled with that color. Closing a freehand shape You can directly create a closed shape by ending a line back at the beginning over the start handle. A + by the pointer shows when it is positioned over the start handle. Page 508 Closing a freehand shape You can directly create a closed shape by ending a line back at the beginning over the start handle. A + by the pointer shows when it is positioned over the start handle. Page 509 Joining shapes "Arrange -> Join shapes" lets you create holes in solid shapes. Because overlapping parts of the same shape are drawn with no fill color (i.e. you can see through the overlapping parts), you can use this effect to create holes in shapes but retain the ability to break them apart later. For example, to create a donut shape: 1. Create an ellipse (described later). 2. Create a second ellipse over the first. (The color of the second ellipse has been changed to make it obvious.) 3. Select both. 4. Choose "Arrange -> Join shapes". This creates a single shape with a hole in it. You can combine or join several shapes. The cutout is made using the top object. If that object is a group, you can make several holes in one operation. For example, a group of three stars can make a hole in this rectangle shape: Groups are described in Object handling . When several shapes overlap: The top shape (or top group) becomes a hole through the other shapes. The line attributes and colors of the other shapes change to those of the top shape. If several shapes overlay: o an even number of shapes overlapping becomes a transparent area; o an odd number of shapes overlapping becomes a solid area. The numbers on this example of three circles show how many shapes overlay in each area: The joined shape on the left shows the number of segments which overlap. On the right are the original three circles shown unjoined. Breaking joined shapes Choose "Arrange -> Break shapes". This breaks the joined shape into separate objects, but the original attributes will not be restored to the separated objects. You can also break several joined shapes in one operation. Page 510 Breaking joined shapes Choose "Arrange -> Break shapes". This breaks the joined shape into separate objects, but the original attributes will not be restored to the separated objects. You can also break several joined shapes in one operation. Page 511 Combining shapes The menu option "Arrange" > "Combine shapes" (or right click and choose Combine Shapes ) provides you with a range of advanced options to combine shapes to make new shapes, such as adding, cutting, or slicing. You can use combine shapes on any type of object, including bitmaps. Creating holes in shapes Use "Arrange" > "Combine shapes" > "Subtract shapes" . This is similar to using join shapes (described above). The differences are: The top shape (or top group) becomes a hole through the other shapes. The line attributes and colors of the underlying shapes are unchanged. Combine shapes physically alters the lines. The only way to restore the original shapes is by using undo. The number of overlapping shapes has no effect. Merging several shapes into one For example, to produce the shape on the right from the three shapes on the left: 1. Create the two circles and the rectangle. 2. Select all three shapes. 3. Right click and choose "Combine shapes" > "Add shapes". The new shape takes line attributes and colors from the top shape (in this case the rectangle in the illustration). Intersecting shapes With intersecting shapes , the new object is created from those parts of lower shapes that are covered by the top object. Select the shapes you want to mask and the front (mask) shape. Choose "Arrange" > "Combine shapes" > "Intersect shapes" . This creates a new shape. The top shape disappears. The line attributes and colors of the underlying shapes are unchanged. Areas not covered by the top Page 512 shape are discarded. The top shape can be a group for more complex subtracting. Groups are described in Object handling . Slicing shapes Xara Web Designer 7 Premium lets you easily slice shapes into two or more pieces, and you can use either a solid object or a line for slicing. For example, to cut a segment from a circle: 1. Create a circle and a triangle on top 2. Select them both. 3. Choose Arrange" > "Combine shapes" > "Slice shapes". The edges of the triangle cut the circle into two shapes. The triangle disappears. 4. You can now drag the segment out from the circle: You can also use a line to cut an object: The line should be drawn completely though the object and extend beyond it (as shown in the illustration). If the line is too short, this operation cuts out a thin slice. Page 513 Creating holes in shapes Use "Arrange" > "Combine shapes" > "Subtract shapes" . This is similar to using join shapes (described above). The differences are: The top shape (or top group) becomes a hole through the other shapes. The line attributes and colors of the underlying shapes are unchanged. Combine shapes physically alters the lines. The only way to restore the original shapes is by using undo. The number of overlapping shapes has no effect. Merging several shapes into one For example, to produce the shape on the right from the three shapes on the left: 1. Create the two circles and the rectangle. 2. Select all three shapes. 3. Right click and choose "Combine shapes" > "Add shapes". The new shape takes line attributes and colors from the top shape (in this case the rectangle in the illustration). Intersecting shapes With intersecting shapes , the new object is created from those parts of lower shapes that are covered by the top object. Select the shapes you want to mask and the front (mask) shape. Choose "Arrange" > "Combine shapes" > "Intersect shapes" . This creates a new shape. The top shape disappears. The line attributes and colors of the underlying shapes are unchanged. Areas not covered by the top shape are discarded. The top shape can be a group for more complex subtracting. Groups are described in Object handling . Slicing shapes Page 514 Xara Web Designer 7 Premium lets you easily slice shapes into two or more pieces, and you can use either a solid object or a line for slicing. For example, to cut a segment from a circle: 1. Create a circle and a triangle on top 2. Select them both. 3. Choose Arrange" > "Combine shapes" > "Slice shapes". The edges of the triangle cut the circle into two shapes. The triangle disappears. 4. You can now drag the segment out from the circle: You can also use a line to cut an object: The line should be drawn completely though the object and extend beyond it (as shown in the illustration). If the line is too short, this operation cuts out a thin slice. Page 515 Merging several shapes into one For example, to produce the shape on the right from the three shapes on the left: 1. Create the two circles and the rectangle. 2. Select all three shapes. 3. Right click and choose "Combine shapes" > "Add shapes". The new shape takes line attributes and colors from the top shape (in this case the rectangle in the illustration). Intersecting shapes With intersecting shapes , the new object is created from those parts of lower shapes that are covered by the top object. Select the shapes you want to mask and the front (mask) shape. Choose "Arrange" > "Combine shapes" > "Intersect shapes" . This creates a new shape. The top shape disappears. The line attributes and colors of the underlying shapes are unchanged. Areas not covered by the top shape are discarded. The top shape can be a group for more complex subtracting. Groups are described in Object handling . Slicing shapes Xara Web Designer 7 Premium lets you easily slice shapes into two or more pieces, and you can use either a solid object or a line for slicing. For example, to cut a segment from a circle: 1. Create a circle and a triangle on top 2. Select them both. 3. Choose Arrange" > "Combine shapes" > "Slice shapes". The edges of the triangle cut the circle into two shapes. The triangle disappears. 4. You can now drag the segment out from the circle: You can also use a line to cut an object: The line should be drawn completely though the object and extend beyond it (as shown in the illustration). If the line is too short, this operation cuts out a thin slice. Page 516 Intersecting shapes With intersecting shapes , the new object is created from those parts of lower shapes that are covered by the top object. Select the shapes you want to mask and the front (mask) shape. Choose "Arrange" > "Combine shapes" > "Intersect shapes" . This creates a new shape. The top shape disappears. The line attributes and colors of the underlying shapes are unchanged. Areas not covered by the top shape are discarded. The top shape can be a group for more complex subtracting. Groups are described in Object handling . Slicing shapes Xara Web Designer 7 Premium lets you easily slice shapes into two or more pieces, and you can use either a solid object or a line for slicing. For example, to cut a segment from a circle: 1. Create a circle and a triangle on top 2. Select them both. 3. Choose Arrange" > "Combine shapes" > "Slice shapes". The edges of the triangle cut the circle into two shapes. The triangle disappears. 4. You can now drag the segment out from the circle: You can also use a line to cut an object: The line should be drawn completely though the object and extend beyond it (as shown in the illustration). If the line is too short, this operation cuts out a thin slice. Page 517 Slicing shapes Xara Web Designer 7 Premium lets you easily slice shapes into two or more pieces, and you can use either a solid object or a line for slicing. For example, to cut a segment from a circle: 1. Create a circle and a triangle on top 2. Select them both. 3. Choose Arrange" > "Combine shapes" > "Slice shapes". The edges of the triangle cut the circle into two shapes. The triangle disappears. 4. You can now drag the segment out from the circle: You can also use a line to cut an object: The line should be drawn completely though the object and extend beyond it (as shown in the illustration). If the line is too short, this operation cuts out a thin slice. Page 518 Changing the line width (thickness) To change the line thickness or the outline thickness of a shape, first select the object or objects: Type a new line width into the text box on the standard control bar or choose the default line thickness from the menu. Line thickness is traditionally measured in points, abbreviated to pt. 1 point is 1/72nd of an inch (about 0.3mm), which is slightly less than the thickness of one screen pixel when viewed at 100% zoom. You can enter the thickness value in any unit, and Xara Web Designer 7 Premium will convert it to the correct number of Points. E.g. you can enter 0.5cm, and you will get a line half a centimeter thick, but it will show just over 14pt in the line width field. If you have no object selected and you change the line thickness value, this changes the default for all new lines. Page 519 Variable width lines From the Freehand & Brush Tool InfoBar you can select a drop-down menu that shows a selection of alternative variable line thickness profiles. As you move the mouse over the selection, an enlarged preview is shown on the right. Selecting one of the styles will change the line (or outline of a shape) from being a constant thickness line, to a variable thickness. This is great for creating pen and ink style artwork, and is often used in the creation of cartoons. The line width dropdown still should be used to change the overall thickness of the line. To restore a constant line width, select the top left corner item from the menu. Page 520 Creating rectangles and squares To create a rectangle: Use the Rectangle Tool ("Shift + F3", or "M"). Click and drag on the canvas to draw a rectangle. Creating a square To create a square rather than a rectangle, hold down "Ctrl" while dragging. Creating and editing rounded corner rectangles To give your rectangle rounded corners, select it and then press the "Curved corners" button on the Rectangle Tool infobar. You can then drag on the selection handles shown on the corners to adjust the diameter of the rounded corners. You can resize rectangles using either the Rectangle Tool (by dragging on the handles shown at the corners) or the Selector Tool . Note that if you change the aspect ratio of a rounded corner rectangle using the Selector Tool (by stretching it in one dimension only) the aspect ratio of the rounded corners is not stretched, it is maintained. However if you have multiple objects selected, or if you're stretching a group containing a rounded corner rectangle, the aspect ratio of the corners is not maintained. Page 521 Creating a square To create a square rather than a rectangle, hold down "Ctrl" while dragging. Creating and editing rounded corner rectangles To give your rectangle rounded corners, select it and then press the "Curved corners" button on the Rectangle Tool infobar. You can then drag on the selection handles shown on the corners to adjust the diameter of the rounded corners. You can resize rectangles using either the Rectangle Tool (by dragging on the handles shown at the corners) or the Selector Tool . Note that if you change the aspect ratio of a rounded corner rectangle using the Selector Tool (by stretching it in one dimension only) the aspect ratio of the rounded corners is not stretched, it is maintained. However if you have multiple objects selected, or if you're stretching a group containing a rounded corner rectangle, the aspect ratio of the corners is not maintained. Page 522 Creating and editing rounded corner rectangles To give your rectangle rounded corners, select it and then press the "Curved corners" button on the Rectangle Tool infobar. You can then drag on the selection handles shown on the corners to adjust the diameter of the rounded corners. You can resize rectangles using either the Rectangle Tool (by dragging on the handles shown at the corners) or the Selector Tool . Note that if you change the aspect ratio of a rounded corner rectangle using the Selector Tool (by stretching it in one dimension only) the aspect ratio of the rounded corners is not stretched, it is maintained. However if you have multiple objects selected, or if you're stretching a group containing a rounded corner rectangle, the aspect ratio of the corners is not maintained. Page 523 Creating circles and ellipses To create an ellipse or circle: Select the Ellipse Tool ("Shift + F4", or "L"). The Radius and diameter buttons automatically create circles. Radius Diameter Bounds creation With the Bounds creation button selected, drag on the canvas to draw an ellipse. Hold down "Ctrl" while dragging to create a circle rather than an ellipse. Select the Radius option to draw circles. The start point of a drag determines the circle's center. Select the Diameter option. Now the start point of a drag determines the position of the edge of the circle. You can convert an ellipse into a circle at any time by double clicking on a control handle. Page 524 Creating regular polygons (the Quickshape Tool) The Quickshape Tool lets you quickly create almost any regular, symmetrical shape with sharp or rounded corners. You can then drag the edges to bend the sides, and at any time you can change the number of sides or make the object an ellipse, a polygon, or a star. Creation Modes: Radius/Diameter/Bounds Polygon Ellipse Stellate Round corners Restore edges Number of sides Editable items menu Editing fields 1. Select the Quickshape Tool ("Shift + F2"). 2. Select Polygon. 3. Select the number of sides either from the menu, or by typing into the text box. To create the polygon drag: Radius Diameter Bounds creation From the center outwards (Radius button), Or from an outside edge (Diameter button), Or diagonally to create an imaginary rectangle enclosing the polygon (Bounds creation button) letting you distort the polygon. Polygons with rounded corners Select the Round corners button or double click on a corner point. The polygon has extra handles (radius handles) where the rounding starts. To increase or decrease the radius, drag any of the radius handles. To remove the round corners: Click the Round corners button. Page 525 Or double click a control handle. Editing a polygon The Selector Tool lets you move, rotate, resize, and skew a polygon as normal (the Selector Tool is described in Object handling .) Using the Quickshape Tool, you can resize or rotate: Drag the corner handles. Or select Size & rotation in the Editable Items menu. Type the required values into the text boxes. Size Rotation You can also nudge the values using the buttons to the right. To move: Drag the handle in the center of the polygon. Or use the arrow keys on the keyboard. Or select "Center" in the editable items" menu. Type the required X/Y values into the text boxes. Apply or remove rounded corners by clicking the round corners button. Change the polygon to an ellipse by clicking the create ellipse button (ellipses are described later) or double clicking the polygon's center. Stellate the polygon (make it star-shaped) by clicking the starred shapes button (starred shapes are described later). Drag the sides to make them curved. Move the pointer over the edge of the polygon (it changes to an arrow shape). You can now drag the sides. On the left are the original polygons. Just drag on the sides to create curved sides. "Ctrl + double click" on a side, or click the restore edges button to make the sides straight again. Change the number of sides by typing the number into the menu or selecting from it. Page 526 Polygons with rounded corners Select the Round corners button or double click on a corner point. The polygon has extra handles (radius handles) where the rounding starts. To increase or decrease the radius, drag any of the radius handles. To remove the round corners: Click the Round corners button. Or double click a control handle. Editing a polygon The Selector Tool lets you move, rotate, resize, and skew a polygon as normal (the Selector Tool is described in Object handling .) Using the Quickshape Tool, you can resize or rotate: Drag the corner handles. Or select Size & rotation in the Editable Items menu. Type the required values into the text boxes. Size Rotation You can also nudge the values using the buttons to the right. To move: Drag the handle in the center of the polygon. Or use the arrow keys on the keyboard. Or select "Center" in the editable items" menu. Type the required X/Y values into the text boxes. Apply or remove rounded corners by clicking the round corners button. Change the polygon to an ellipse by clicking the create ellipse button (ellipses are described later) or double clicking the polygon's center. Stellate the polygon (make it star-shaped) by clicking the starred shapes button (starred shapes are described later). Drag the sides to make them curved. Move the pointer over the edge of the polygon (it changes to an arrow shape). You can now drag the sides. On the left are the original polygons. Just drag on the sides to create curved sides. "Ctrl + double click" on a side, or click the restore edges button to make the sides straight again. Page 527 Change the number of sides by typing the number into the menu or selecting from it. Page 528 Editing a polygon The Selector Tool lets you move, rotate, resize, and skew a polygon as normal (the Selector Tool is described in Object handling .) Using the Quickshape Tool, you can resize or rotate: Drag the corner handles. Or select Size & rotation in the Editable Items menu. Type the required values into the text boxes. Size Rotation You can also nudge the values using the buttons to the right. To move: Drag the handle in the center of the polygon. Or use the arrow keys on the keyboard. Or select "Center" in the editable items" menu. Type the required X/Y values into the text boxes. Apply or remove rounded corners by clicking the round corners button. Change the polygon to an ellipse by clicking the create ellipse button (ellipses are described later) or double clicking the polygon's center. Stellate the polygon (make it star-shaped) by clicking the starred shapes button (starred shapes are described later). Drag the sides to make them curved. Move the pointer over the edge of the polygon (it changes to an arrow shape). You can now drag the sides. On the left are the original polygons. Just drag on the sides to create curved sides. "Ctrl + double click" on a side, or click the restore edges button to make the sides straight again. Change the number of sides by typing the number into the menu or selecting from it. Page 529 Creating stars (polygons with indented sides) Select the Quickshape Tool. To create a star or to make the selected polygon stellated: Stellated/stellation = star shaped. Select the Starred Shapes button . Or double click on a side. Left: polygon with starred off. Right : starred on. Removing stellation Click the starred shapes button. Or double click on the star handle. Note : double click on the star handle, not the control handle. Page 530 Removing stellation Click the starred shapes button. Or double click on the star handle. Note : double click on the star handle, not the control handle. Page 531 Editing stars You can edit stars in the same ways as ordinary polygons (described earlier). To increase or decrease the depth of stellation: Drag a star handle or select stellation radius & offset on the editable items menu. Type the required values into the text The original shape is on the left. boxes. Or drag the sides to make them curved: The original shape is on the left. You can also nudge the values using the buttons to the right. Offset from center Angular offset "Ctrl + drag" one side of a star moves all the sides symmetrically. "Ctrl + Shift dragging" moves pairs of sides as mirror images. "Ctrl + double click" on a side, or click the restore edges button to make all sides straight again. Page 532 Color Handling Xara Web Designer 7 Premium gives wide control over applying, creating and altering the colors of objects. For simple documents, you can just choose colors from the on-screen color palette, the Color Line. More advanced color operations are described later. In this chapter 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 Page 533 The color line The Color Line is displayed at the bottom of the window. It shows you the current fill and line colors, provides access to the color editor and provides a palette of pre-defined colors including a special "no color". Color swatch: The outer part of the color swatch on the left-hand end of the Color Line shows the line color and the center shows the fill color. These are the colors of any selected objects, or the current color attributes if no objects are selected. This button provides access to the color editor Color picker: Use the eye-dropper to pick a color from any part of the document or any part of the computer screen. See Using the eye-dropper to pick colors for details. No color: Clicking this applies a "no color fill". Shift-clicking applies "no color" to a line. Note that this is not the same as 100% transparent. "No color" and transparency are different. A shape with transparency applied remains a solid shape whereas a shape filled with "no color" is effectively hollow. The No Color button can also be used to restore the original colors to a photo which has had a contone color applied. Current Fill color Current Line color If the length of the Color Line exceeds the window, you can scroll through the Color Line with the scroll bar below or by "Alt + dragging" the Color Line. Xara Web Designer 7 Premium provides several options for the displayed size of the Color Line (described in Customizing Web Designer Premium). Colors on the color line Named (Theme) Colors: First comes the Named Colors (if present in the document, see below). Named colors are used to give templates and designs theme colors, so that the color scheme of a design can easily be changed without editing every object in it individually. Linked Colors are represented differently on the color line by smaller rounded rectangles, so it's much easier to distinguish which are normal independent Named Colors and which are linked to a parent. See Creating a Tint, Shade or Linked color . Palette colors: There are 46 pre-defined palette colors. There are 5 shades of 7 standard hues and 10 shades of grey, black and white. Palette colors are not editable (i.e they are not Named Colors) and are Page 534 designed as a simple, limited selection of colors to apply to objects (either by dragging on to the object or clicking). Little markers in the color icons shows which of the named colors (if any) or palette colors have been applied to the selected object(s). Diamond markers show the colors used by the selected objects. A diamond in the top-left corner indicates the fill color, in the top-right corner indicates the line color. Cross-shaped markers show the current color attributes if there are no objects selected. Line color on the right, fill color on the left. Triangular markers show the colors of a fill if you have applied one. This works also when choosing a color with the color picker from existing objects, see Using the eye-dropper to pick colors . The color line markers update immediately and indicate the color of the object under the eye-dropper as you're dragging around. Re-ordering colors on the color line You may prefer to re-arrange colors on the Color Line. To do this, "Ctrl + drag" colors along the Color Line. This also reorders the Color Gallery . Only named colors can be re-arranged on the Color Line. Color line context menu Click on a color on the Color Line to show a context sensitive menu with the following options: Edit Opens the color editor with the selected color (not available for palette colors) Set fill color / Set line Set the fill or line color of the selected object with color this color Rename Rename a named color (not available for palette colors) Delete Delete a named color (not available for palette colors) Options Opens the General tab of the Options dialog. If the selected object is a bitmap, you can also see Set contone dark color / Set contone light color. See Bitmap coloring for more information. When clicking the "no color" swatch, the fill and line color options are replaced by: Clear fill color / Clear line color . This sets the selected object's relative attributes to "no color". Page 535 Colors on the color line Named (Theme) Colors: First comes the Named Colors (if present in the document, see below). Named colors are used to give templates and designs theme colors, so that the color scheme of a design can easily be changed without editing every object in it individually. Linked Colors are represented differently on the color line by smaller rounded rectangles, so it's much easier to distinguish which are normal independent Named Colors and which are linked to a parent. See Creating a Tint, Shade or Linked color . Palette colors: There are 46 pre-defined palette colors. There are 5 shades of 7 standard hues and 10 shades of grey, black and white. Palette colors are not editable (i.e they are not Named Colors) and are designed as a simple, limited selection of colors to apply to objects (either by dragging on to the object or clicking). Little markers in the color icons shows which of the named colors (if any) or palette colors have been applied to the selected object(s). Diamond markers show the colors used by the selected objects. A diamond in the top-left corner indicates the fill color, in the top-right corner indicates the line color. Cross-shaped markers show the current color attributes if there are no objects selected. Line color on the right, fill color on the left. Triangular markers show the colors of a fill if you have applied one. This works also when choosing a color with the color picker from existing objects, see Using the eye-dropper to pick colors . The color line markers update immediately and indicate the color of the object under the eye-dropper as you're dragging around. Re-ordering colors on the color line You may prefer to re-arrange colors on the Color Line. To do this, "Ctrl + drag" colors along the Color Line. This also reorders the Color Gallery . Only named colors can be re-arranged on the Color Line. Color line context menu Click on a color on the Color Line to show a context sensitive menu with the following options: Edit Opens the color editor with the selected color (not available for palette colors) Set fill color / Set line Set the fill or line color of the selected object with color this color Rename Rename a named color (not available for palette colors) Delete Delete a named color (not available for palette colors) Page 536 Options Opens the General tab of the Options dialog. If the selected object is a bitmap, you can also see Set contone dark color / Set contone light color. See Bitmap coloring for more information. When clicking the "no color" swatch, the fill and line color options are replaced by: Clear fill color / Clear line color . This sets the selected object's relative attributes to "no color". Page 537 Re-ordering colors on the color line You may prefer to re-arrange colors on the Color Line. To do this, "Ctrl + drag" colors along the Color Line. This also reorders the Color Gallery . Only named colors can be re-arranged on the Color Line. Color line context menu Click on a color on the Color Line to show a context sensitive menu with the following options: Edit Opens the color editor with the selected color (not available for palette colors) Set fill color / Set line Set the fill or line color of the selected object with color this color Rename Rename a named color (not available for palette colors) Delete Delete a named color (not available for palette colors) Options Opens the General tab of the Options dialog. If the selected object is a bitmap, you can also see Set contone dark color / Set contone light color. See Bitmap coloring for more information. When clicking the "no color" swatch, the fill and line color options are replaced by: Clear fill color / Clear line color . This sets the selected object's relative attributes to "no color". Page 538 Color line context menu Click on a color on the Color Line to show a context sensitive menu with the following options: Edit Opens the color editor with the selected color (not available for palette colors) Set fill color / Set line Set the fill or line color of the selected object with color this color Rename Rename a named color (not available for palette colors) Delete Delete a named color (not available for palette colors) Options Opens the General tab of the Options dialog. If the selected object is a bitmap, you can also see Set contone dark color / Set contone light color. See Bitmap coloring for more information. When clicking the "no color" swatch, the fill and line color options are replaced by: Clear fill color / Clear line color . This sets the selected object's relative attributes to "no color". Page 539 Applying fill & line colors by drag & drop To apply a fill color to an object (selected or unselected), drag a color from the Color Line and drop it into the center of the shape. To set the line or outline color, drop it on the outline, not the center. To change the current fill color, drag a color into a blank space. To change the page background color, "Ctrl + drag" a color onto the page background. When dragging colors an indicator beside the pointer tells you what effect dropping the color will have: Set flat fill color (seen when you drag over an object) or the intermediary colors of a multi-color fill Set line color (seen when you drag over a line). Set the current fill color (seen when you drag over an empty space). Set start color of graduated fill (seen when dragged over start of fill). Set end color of graduated fill (seen when dragged over end of fill). Set page background color (seen when you drag a color onto the page). Instead of drag & drop, if you have an object selected, you can just click on the Color Line. This opens the Color Line context menu where you can set the line or fill color. In any other case, you can alter the line color by "Shift + clicking" on the Color Line. If a photo or a bitmap-filled shape is selected, then clicking on the Color Line will contone the bitmap. That means, the bitmap is converted to greyscale (black and white) and the selected color is used as a contone light color. The contone dark color is usually black. You can set both contone colors via the Color Line context menu (see above). See Bitmap coloring for more information. To set a fill or line to no color (clear), perform the operations as outlined above but use the "No color" option instead of a color. Page 540 Editing an object’s color To edit the fill color of the selected object(s): Choose "Utilities" > "Color editor" ("Ctrl + E"). Or click the Edit color icon on the Color Line. Or right click the object and choose Fill Color Or double click on the current line and fill color icon on the Color Line (the edge of the leftmost panel). To edit the line color of the selected object /s "Shift + click" on the Edit color icon Or double click on the current line and fill color icon (the edge of the leftmost panel). This displays the Color Editor which allows you to select from any color of the spectrum. Unlike most graphics programs the Color Editor can remain on screen while you continue to work. It changes to reflect the color of the selected objects, and so you can easily and directly adjust the color of the selected object. Page 541 The Color Editor The Color Editor is used to change the color of objects in the document. When editing a color you can drag the eye dropper to pick colors off screen, even from other open windows Select the color to edit: Fill color/Line color of the selected object or any of the named theme colors Click the label icon to create a Named Color Click to show extended color controls Previous color Actual color Drag here to select any shade of the selected hue Drag here to select any hue The easiest way to create a new color is to select the hue along the bottom color strip. All possible shades of this hue are then shown in the top section, so just click or drag in the top section to select the new color. You'll notice the selected objects change color as you adjust them in the color editor (called "live preview"). For example to select a pink color, which is a pale shade of red, select red along the bottom section and then select a very pale red (pink) from the top right area of the top section. Previous and Current color As you drag on the color editor the two small color swatches in the upper right of the color editor show the current color and the previous (before you started changing the color). This is useful if you want to make a small change and want to compare the old and new colors. Using the eye-dropper to pick colors Instead of selecting hues and shades on the Color Editor you can instead pick a color from any part of the document or any part of the computer screen?even from other windows and programs. To do this just click and drag on the eye dropper icon. As you drag you see the color editor continuously picks up the color under the eye dropper. Release the mouse button when you have the desired color. This is an easy and quick way to use the same color again or copy colors from photos or from one object to another. The color picker doesn't simply sample the screen (RGB) color. Instead, if you point to a shape with a solid fill color, the sampler will pick up the actual color of that shape, including the color model (RGB, Page 542 HSV or CMYK), so the color is copied exactly to the selected object(s). If the target color is a named or palette color, instead of simply copying the color the color picker will apply the same color to the selected object(s). If the object under the mouse pointer is complex (eg. has transparency applied) and the color cannot be determined, screen RGB color is applied. The color sampler shows a small popup at the mouse pointer which indicates the color that is being sampled at that point. This will either be the palette color name, the name of a named color, or the color model and color value. However if you want to use the same color often it is recommended to use a named color instead. Advanced color operations Click the Show advanced options icon on the Color Editor to reveal the lower part of the dialog that provides more options. No fill color Make named color local to Frame/Layer Rename named color HSV color values RGB hex value Color model (HSV, RGB or grayscale) Color type: See Creating a Tint, Shade or Linked color Here you can enter precise RGB (or HSV) color values. The most common requirement for web graphics is to enter a hex RGB color. The H, S and V fields allow you to specify the color as HSV (hue saturation value) values in percent. In the # field you can enter RGB value in hexadecimal numbers (0-F). Also a 'No fill color' button and a help button is available here. Page 543 Previous and Current color As you drag on the color editor the two small color swatches in the upper right of the color editor show the current color and the previous (before you started changing the color). This is useful if you want to make a small change and want to compare the old and new colors. Using the eye-dropper to pick colors Instead of selecting hues and shades on the Color Editor you can instead pick a color from any part of the document or any part of the computer screen?even from other windows and programs. To do this just click and drag on the eye dropper icon. As you drag you see the color editor continuously picks up the color under the eye dropper. Release the mouse button when you have the desired color. This is an easy and quick way to use the same color again or copy colors from photos or from one object to another. The color picker doesn't simply sample the screen (RGB) color. Instead, if you point to a shape with a solid fill color, the sampler will pick up the actual color of that shape, including the color model (RGB, HSV or CMYK), so the color is copied exactly to the selected object(s). If the target color is a named or palette color, instead of simply copying the color the color picker will apply the same color to the selected object(s). If the object under the mouse pointer is complex (eg. has transparency applied) and the color cannot be determined, screen RGB color is applied. The color sampler shows a small popup at the mouse pointer which indicates the color that is being sampled at that point. This will either be the palette color name, the name of a named color, or the color model and color value. However if you want to use the same color often it is recommended to use a named color instead. Advanced color operations Click the Show advanced options icon on the Color Editor to reveal the lower part of the dialog that provides more options. No fill color Make named color local to Frame/Layer Rename named color HSV color values RGB hex value Color model (HSV, RGB or grayscale) Color type: See Creating a Tint, Shade or Linked color Here you can enter precise RGB (or HSV) color values. The most common requirement for web Page 544 graphics is to enter a hex RGB color. The H, S and V fields allow you to specify the color as HSV (hue saturation value) values in percent. In the # field you can enter RGB value in hexadecimal numbers (0-F). Also a 'No fill color' button and a help button is available here. Page 545 Using the eye-dropper to pick colors Instead of selecting hues and shades on the Color Editor you can instead pick a color from any part of the document or any part of the computer screen?even from other windows and programs. To do this just click and drag on the eye dropper icon. As you drag you see the color editor continuously picks up the color under the eye dropper. Release the mouse button when you have the desired color. This is an easy and quick way to use the same color again or copy colors from photos or from one object to another. The color picker doesn't simply sample the screen (RGB) color. Instead, if you point to a shape with a solid fill color, the sampler will pick up the actual color of that shape, including the color model (RGB, HSV or CMYK), so the color is copied exactly to the selected object(s). If the target color is a named or palette color, instead of simply copying the color the color picker will apply the same color to the selected object(s). If the object under the mouse pointer is complex (eg. has transparency applied) and the color cannot be determined, screen RGB color is applied. The color sampler shows a small popup at the mouse pointer which indicates the color that is being sampled at that point. This will either be the palette color name, the name of a named color, or the color model and color value. However if you want to use the same color often it is recommended to use a named color instead. Advanced color operations Click the Show advanced options icon on the Color Editor to reveal the lower part of the dialog that provides more options. No fill color Make named color local to Frame/Layer Rename named color HSV color values RGB hex value Color model (HSV, RGB or grayscale) Color type: See Creating a Tint, Shade or Linked color Here you can enter precise RGB (or HSV) color values. The most common requirement for web graphics is to enter a hex RGB color. The H, S and V fields allow you to specify the color as HSV (hue saturation value) values in percent. In the # field you can enter RGB value in hexadecimal numbers (0-F). Also a 'No fill color' button and a help button is available here. Page 546 Advanced color operations Click the Show advanced options icon on the Color Editor to reveal the lower part of the dialog that provides more options. No fill color Make named color local to Frame/Layer Rename named color HSV color values RGB hex value Color model (HSV, RGB or grayscale) Color type: See Creating a Tint, Shade or Linked color Here you can enter precise RGB (or HSV) color values. The most common requirement for web graphics is to enter a hex RGB color. The H, S and V fields allow you to specify the color as HSV (hue saturation value) values in percent. In the # field you can enter RGB value in hexadecimal numbers (0-F). Also a 'No fill color' button and a help button is available here. Page 547 Local colors and Theme colors Web Designer Premium has two types of color: Local colors are used in only one place in the document. Each object has a separate color and nothing is shared. This is useful if you want to change the color of an object without affecting other objects. Local colors are the easiest method and best for simple documents that use relatively few colors. "Applying color" and "Editing an object's color" above describe local color handling. Theme colors (or Named colors) can be used again and again in the document. (As such, they are like styles in a word processor.) Theme colors are used in templates and assure a consistent look of your page elements like buttons or navigation bars. Any edits you make to a Theme color are immediately reflected on all objects and parts of the drawing that use that color. You can also copy Theme colors between documents. Theme colors appear on the Color Line. If there are any Theme colors already present in the design and you load or paste templates from the Designs Gallery containing Theme colors with the same name, you will be asked if you want to match the actual color of the imported Theme colors to the existing ones. The Theme colors in most templates are consistently named so when you import elements from different themes colors are matched perfectly. Important: If you just select an object on the page that has a named color applied to it, and alter it with the Color Editor, this will always turn it into a local color instead of a named color (because it is assumed that if you try to edit the color of the object that's what you mean to do. If you really want to change the named color so this and all occurrences of the color change, then you should do so by editing the named color ). Page 548 Theme color schemes Many of the web themes offered in the Designs Gallery and in separately purchasable Template Packs include alternative color schemes which can easily be applied to websites which use the same theme, to transform the color scheme instantly. The color schemes are normally found in the Designs Gallery in each theme, after all the page layouts and separate graphic elements that make up the theme. They all have "Color scheme" in their titles in the Designs Gallery, so they are easily identified. To apply a color scheme to your website, simply drag the scheme from the Designs Gallery and drop it on your page. You can try applying the color schemes of one theme to a website created from the templates of another theme. But you will get mixed results doing this and some schemes will not work acceptably with some themes. So for best results stick to the color schemes of the theme that you used to create the site. One of the color schemes provided with each theme matches the default colors used by that theme. This allows you to easily return to the original colors if you prefer, after experimenting with the alternate schemes. Page 549 Creating your own color schemes It's very easy to create your own color scheme files, which you can pass on to other Web Designer Premium users for them to apply to websites created with the same theme. 1. Load one of the page templates for the theme. Choose one which shows off all the colors of the theme most effectively. You can add more elements to the page if required, to help show off the range of theme colors. 2. Edit the named colors of the theme one at a time, as described in the 'Editing named colors' section below. 3. Once you are happy with your new color scheme, use "File" > "Save As" to save it. The filename you choose MUST include "ThemeColorScheme" as part of the filename. That is how Web Designer Premium identifies color scheme files ? just by looking for that sequence in the filename. It's a good idea to also include the name of the theme to which the scheme applies. For example a new blue color scheme for the "Beta" themeset could be named something like "BetaThemeColorSchemeBlue.web". To test your color scheme, drag and drop it from File Explorer onto a page that still has the default theme colors. The page should be instantly re-colored using your color scheme. Page 550 Creating new named colors If you want to use the same color in different parts of the drawing, and there is any chance you might want to change that color in future, if is highly recommended that you create a named color . This is easy in Xara Web Designer 7 Premium: Select an object whose color you want to use and then click New named color in the Color editor . Click to create a new named color Give the color a suitable name, like "car color" and click create. You will see the new color added to the Color Line . You can now apply this color to any object the usual way, by drag-dropping it from the Color Line or just clicking (or right clicking to use it as a line color) to apply as the fill color. When you edit a named color, all objects that use this color will change. Page 551 Editing named colors There are three ways to display the color in the Color Editor so it can be edited: Choose from the menu in the Color Editor. Or right click on the color on the Color Line and choose Edit from the menu that appears. Or drag & drop a color from the Color Line onto the Color Editor. You can then edit the color as required. All objects that use this color are automatically and immediately updated to show the new color. Renaming named colors While editing a Named Color, right click on the Color Editor and select Rename Or right click the color on the Color Line and select Rename. Deleting named colors To delete a named color right click on the color on the Color Line and choose Delete . Deleting unused colors To clear the Color Line of unused colors, right click a Theme or Named color and choose Delete . If the color is being used in the current document, Web Designer Premium displays a message that allows you to cancel the deletion or use local colors instead. However note that by default unused named colors are automatically deleted when a document is saved or loaded. You can change this option in the View tab of the "Utilities" > "Options " dialog. Page 552 Renaming named colors While editing a Named Color, right click on the Color Editor and select Rename Or right click the color on the Color Line and select Rename. Deleting named colors To delete a named color right click on the color on the Color Line and choose Delete . Deleting unused colors To clear the Color Line of unused colors, right click a Theme or Named color and choose Delete . If the color is being used in the current document, Web Designer Premium displays a message that allows you to cancel the deletion or use local colors instead. However note that by default unused named colors are automatically deleted when a document is saved or loaded. You can change this option in the View tab of the "Utilities" > "Options " dialog. Page 553 Deleting named colors To delete a named color right click on the color on the Color Line and choose Delete . Deleting unused colors To clear the Color Line of unused colors, right click a Theme or Named color and choose Delete . If the color is being used in the current document, Web Designer Premium displays a message that allows you to cancel the deletion or use local colors instead. However note that by default unused named colors are automatically deleted when a document is saved or loaded. You can change this option in the View tab of the "Utilities" > "Options " dialog. Page 554 Deleting unused colors To clear the Color Line of unused colors, right click a Theme or Named color and choose Delete . If the color is being used in the current document, Web Designer Premium displays a message that allows you to cancel the deletion or use local colors instead. However note that by default unused named colors are automatically deleted when a document is saved or loaded. You can change this option in the View tab of the "Utilities" > "Options " dialog. Page 555 Importing named colors When a design is imported into the current document (e.g. import from the Designs Gallery , import a XAR file or paste objects in from another design) if there are any named colors in the imported design which have the same names but different color values as colors in the current design, an alert appears as follows: If you want the imported objects to inherit the colors of your current design, choose the "Match " option. This makes all objects using a given named color use the existing instance of that color as it appears in the current document. Alternatively if you want the imported objects to keep their own independent colors, select the "Don't Match " option. This adds new named colors into your design, with a number appended to the color names to distinguish them from the colors already in the current design. This allows the imported objects to keep their original colors. Note that if you import objects from lots of different designs and choose "Don't Match " each time, you will end up with a large number of separate Named Colors on your color line. The match prompt above includes a "Don't ask me again " checkbox. If you check this, the option you choose will be assumed for all future imports, without asking you again. However this only applies during the current session, so after a program restart you will be asked again on the next import if there is a color clash. Using the Match option means that you can choose a template, change its theme colors and then import more templates of the same theme and the imported designs will immediately pick up your modified theme colors. For example, import a red graphical button from the Designs Gallery, change its main theme color from red to green, then import a red logo graphic of the same theme and choose the "Match" option. When the logo appears in your design, instead of being red it will have picked up your chosen green theme color automatically. Since most themes have their main theme color named "Theme color 1", you will also usually get good results when importing graphics from different themes and matching the colors. Make Named Color local to Frame/Layer When you click this button, a new named color is created which is identical to the one you have selected. This new color is then applied to all objects in the current frame or layer that use the selected named color. This means that with one click you can localize a color to the frame/layer. You can then independently edit the original color and this localized color. This feature is useful when you are creating animations and you want an object's color to change part way through the animation. This button is dimmed unless you are editing a named color that is also used in another frame or layer. Page 556 Make Named Color local to Frame/Layer When you click this button, a new named color is created which is identical to the one you have selected. This new color is then applied to all objects in the current frame or layer that use the selected named color. This means that with one click you can localize a color to the frame/layer. You can then independently edit the original color and this localized color. This feature is useful when you are creating animations and you want an object's color to change part way through the animation. This button is dimmed unless you are editing a named color that is also used in another frame or layer. Page 557 Normal colors, Tints, Shades and Linked colors Normal colors These are the normal stand-alone colors you apply to objects. Xara Web Designer 7 Premium can also define colors that are linked to another color, that is when the parent color changes the linked color will change as well. There are three ways you can link a color to its parent Tints, Shades, and Linked colors . These are very powerful techniques that allow, for example, single-click re-coloring of complex shaded drawings. Some of the example clipart uses this technique. Tints Tints are based on other colors (called the parent color) and are always a paler version of the parent. They have two main uses: Where you have paler shades of a parent color and you may want to change the parent color in future with the tints automatically updating. To extend the range of colors available from printing inks. For example, a 25% red tint gives a pink color. Therefore using just a red ink you can have both a pure red and a pink using only one ink. Similarly, if just using black-and-white printing, it's often useful to be able to use tints to create various shades of gray. If you are printing with a limited range of colors (it's usually cheaper to print one or two color, instead of full or four color printing). A tint can be based on any type of color, including another tint. Any changes you make to the parent color also change tints based on it. For example, you might define the color pink as 50% of a red parent color. Changing the parent color to orange automatically changes pink to light orange. Shades These allow both lighter and darker colors to be created all based on a parent color. Changing the color of the parent changes all associated shades. For example, a drawing of a car might use shades for the highlight and shaded regions of the car body. A single edit to the parent changes all the colors of the entire body but keeps the shading correct. Setting up shades this way is more time consuming but it is a very powerful way of altering colors. For best results, the parent color should be a "pure" saturated color. When using the HSV color mode, saturation and value should ideally be 100%. When viewed in the Color Editor the cross should be in the top left-hand corner. Linked colors Linked colors are similar to shades but give greater flexibility. These are also based on a parent color but you define which attributes you want the linked color to share with its parent. For example you can create a linked color that is a more or less saturated version of the parent, but the hue and lightness / darkness follow the parent. Page 558 Normal colors These are the normal stand-alone colors you apply to objects. Xara Web Designer 7 Premium can also define colors that are linked to another color, that is when the parent color changes the linked color will change as well. There are three ways you can link a color to its parent Tints, Shades, and Linked colors . These are very powerful techniques that allow, for example, single-click re-coloring of complex shaded drawings. Some of the example clipart uses this technique. Tints Tints are based on other colors (called the parent color) and are always a paler version of the parent. They have two main uses: Where you have paler shades of a parent color and you may want to change the parent color in future with the tints automatically updating. To extend the range of colors available from printing inks. For example, a 25% red tint gives a pink color. Therefore using just a red ink you can have both a pure red and a pink using only one ink. Similarly, if just using black-and-white printing, it's often useful to be able to use tints to create various shades of gray. If you are printing with a limited range of colors (it's usually cheaper to print one or two color, instead of full or four color printing). A tint can be based on any type of color, including another tint. Any changes you make to the parent color also change tints based on it. For example, you might define the color pink as 50% of a red parent color. Changing the parent color to orange automatically changes pink to light orange. Shades These allow both lighter and darker colors to be created all based on a parent color. Changing the color of the parent changes all associated shades. For example, a drawing of a car might use shades for the highlight and shaded regions of the car body. A single edit to the parent changes all the colors of the entire body but keeps the shading correct. Setting up shades this way is more time consuming but it is a very powerful way of altering colors. For best results, the parent color should be a "pure" saturated color. When using the HSV color mode, saturation and value should ideally be 100%. When viewed in the Color Editor the cross should be in the top left-hand corner. Linked colors Linked colors are similar to shades but give greater flexibility. These are also based on a parent color but you define which attributes you want the linked color to share with its parent. For example you can create a linked color that is a more or less saturated version of the parent, but the hue and lightness / darkness follow the parent. Page 559 Tints Tints are based on other colors (called the parent color) and are always a paler version of the parent. They have two main uses: Where you have paler shades of a parent color and you may want to change the parent color in future with the tints automatically updating. To extend the range of colors available from printing inks. For example, a 25% red tint gives a pink color. Therefore using just a red ink you can have both a pure red and a pink using only one ink. Similarly, if just using black-and-white printing, it's often useful to be able to use tints to create various shades of gray. If you are printing with a limited range of colors (it's usually cheaper to print one or two color, instead of full or four color printing). A tint can be based on any type of color, including another tint. Any changes you make to the parent color also change tints based on it. For example, you might define the color pink as 50% of a red parent color. Changing the parent color to orange automatically changes pink to light orange. Shades These allow both lighter and darker colors to be created all based on a parent color. Changing the color of the parent changes all associated shades. For example, a drawing of a car might use shades for the highlight and shaded regions of the car body. A single edit to the parent changes all the colors of the entire body but keeps the shading correct. Setting up shades this way is more time consuming but it is a very powerful way of altering colors. For best results, the parent color should be a "pure" saturated color. When using the HSV color mode, saturation and value should ideally be 100%. When viewed in the Color Editor the cross should be in the top left-hand corner. Linked colors Linked colors are similar to shades but give greater flexibility. These are also based on a parent color but you define which attributes you want the linked color to share with its parent. For example you can create a linked color that is a more or less saturated version of the parent, but the hue and lightness / darkness follow the parent. Page 560 Shades These allow both lighter and darker colors to be created all based on a parent color. Changing the color of the parent changes all associated shades. For example, a drawing of a car might use shades for the highlight and shaded regions of the car body. A single edit to the parent changes all the colors of the entire body but keeps the shading correct. Setting up shades this way is more time consuming but it is a very powerful way of altering colors. For best results, the parent color should be a "pure" saturated color. When using the HSV color mode, saturation and value should ideally be 100%. When viewed in the Color Editor the cross should be in the top left-hand corner. Linked colors Linked colors are similar to shades but give greater flexibility. These are also based on a parent color but you define which attributes you want the linked color to share with its parent. For example you can create a linked color that is a more or less saturated version of the parent, but the hue and lightness / darkness follow the parent. Page 561 Linked colors Linked colors are similar to shades but give greater flexibility. These are also based on a parent color but you define which attributes you want the linked color to share with its parent. For example you can create a linked color that is a more or less saturated version of the parent, but the hue and lightness / darkness follow the parent. Page 562 Creating a Tint, Shade or Linked color See above for a description of Tints, Shades and Linked colors . They are useful where you want a lighter or darker shade to track that of a parent color. Tints, shades and Linked color have to have a master "parent" color, which needs to be a named color, so that when you change this parent color, the tint will change as well. So, if necessary, first create a named color (see Creating new named colors ). To create a tint, shade or linked color: 1. Select the object or objects to which you want to apply the color. 2. Open the Color Editor showing the advanced options. 3. Select the "normal color" drop-down menu and select the Tint, Shade, or Linked option. 4. From the Parent dropdown menu, select the named color that you want this color to be linked to. 5. Adjust the Tint, Shade or Linked color on the top section of the color editor. If the tint, shade and linked color options aren't included in the color type drop down list, this probably means you haven't yet created a named color to link to, or that you are editing the one and only named color in the design. On the left you can see the new color is a tint of the parent "yellow" and so the editor provides only paler tints of the parent color. On the right, if you select a shade, you get to choose any lighter or darker shades of the parent color. If you want to use this color in many places in the document it's recommended that you also make this a Named Color, so it appears on the Color Line, for easy picking. Just click on the New Named Color label icon on the top of the Color Editor and give it a name. It will now appear on the Color Line where you can pick it for use on other objects. Editing the parent color The key point of using tints, shades and linked colors is that they track any changes to the parent color. To see this working try editing the Named color that is the parent (drag it from the Color Line to the Color Editor and alter the color). You will see the objects with the tint, shade or linked color change in sync with the Page 563 parent. Note: Be careful not to edit the color of objects on the page to which you've applied Named, Tints, Shades, or Linked colors as this will change them to Local colors . Page 564 Editing the parent color The key point of using tints, shades and linked colors is that they track any changes to the parent color. To see this working try editing the Named color that is the parent (drag it from the Color Line to the Color Editor and alter the color). You will see the objects with the tint, shade or linked color change in sync with the parent. Note: Be careful not to edit the color of objects on the page to which you've applied Named, Tints, Shades, or Linked colors as this will change them to Local colors . Page 565 Text Handling In this chapter Introduction Terminology The Text Tool The Font Menu Simple text Text in a column Text areas Text along a curve Editing text Spell checker Find & Replace Synchronising Text using Soft Groups Tabs, Margins and Indents Repelling text objects Anchored Graphics Applying text styles Text links Text inside groups for websites Copying text styles Copying/Pasting formatted text (RTF) Seeing fonts in use Font embedding Browser text compatibility Page 566 Introduction The text editing facilities of Xara Web Designer 7 Premium are very like your text editor or word processor, but in addition it provides a range of features you won't find in those programs: You can enlarge or magnify text to a huge degree. You can apply the range of normal Xara Web Designer 7 Premium attributes and effects: fills, feather, transparency, color fades, shadows, and still continue to edit the text. You can convert the outlines of characters to shapes which can be edited just like all normal shapes. Fit text to a curve. All text can be rotated, skewed and stretched. Page 567 Terminology Font or Typeface : A set of characters with a consistent style. Font family : A set of similar fonts. For example Garamond and Garamond Italic are different fonts from the same Garamond family. Justification: An alternative way of describing text alignment. Left aligned text is sometimes called left justified, or flush-left, or ragged right. Monospaced : All the individual characters of a monospaced font have the same width. Sometimes referred to a fixed width fonts. Useful for program listings. Courier is the most common monospaced font. Most fonts are proportional spaced fonts, meaning the characters vary in width. Point : Text or font sizes are traditionally measured in points, abbreviated to pt. 1pt is approximately 1/72nd inch, so 72pt text is approximately 1inch tall, although different fonts of a given size can vary. Page 568 The Text Tool Use the Text Tool ("F8") to enter or edit text. Text Tool InfoBar Left Side Font Font Size Bold Italic Underlined Justification Text Tool InfoBar Right Side Subscript/Superscript Line Spacing Paragraph Spacing Bulleted Lists Numbered lists Indent Outdent Spell Checker Xara Web Designer 7 Premium supports three basic type of text objects Simple text lines: Click on the page, and type. Text columns: Click and drag to create a column, and type. Text areas: Click and drag diagonally to create a rectangular area, and type. After you've created any text object you can transform it (rotate, scale, skew) and can apply all the normal attributes, fill color, transparency, feather etc, using the normal tools. You can also attach it to a curve. The text will remain editable. Page 569 The Font Menu The font menu lists all installed fonts, and is split into three sections. The top section displays those fonts that are currently used in the document. The second section shows the "web safe" fonts. These are the fonts you can safely use in web pages, because all commonly used web browsers will support these fonts. See Web Safe Fonts section. The final section displays an alphabetical list of all other installed fonts. Each font name is displayed in the menu using its own typeface, making font selection easier. Those fonts for which multiple font styles are available are shown with small black triangles against them on the right hand side of the menu. Simply hold the mouse pointer over such a font name for a second or two and a small sub-menu appears to the right of the main menu, listing the available styles of that font. While this sub-menu is displayed, you can move the mouse pointer over it to select the desired font style. Web Safe Fonts Only a small set of fonts can be used safely for the main text of a website - only those fonts that you know will exist on the computer of the viewer of your website. Although there are no guarantees, there is a common subset of fonts that are widely used by something like 98% of all computers, including Apple Mac and some Linux computers. These fonts are called the 'web safe fonts', and are listed in a separate section of the font menu. If you try and export a website using non safe fonts you will get a warning. Live Font Preview As you move the mouse pointer over any entry in the font menu, the selected text in the document is instantly updated to preview the font. This is not a permanent change until you actually click on the required font. Moving the mouse pointer over the menu will revert back to the initial font until you move over another entry. This is great for very rapidly previewing large numbers of fonts. If you hold down the "Shift" key while traversing the font menu, then the font selection is not updated instantly, there is a short pause before it is updated. This is useful if you find that instant preview slows down your traversal of the menu (perhaps if you have a large amount of text selected). Page 570 Live Font Size preview Next to the font size menu is a small pop-up slider control, like that used elsewhere in Web Designer Premium. This provides a direct, live font size control, and will adjust the font size of the selected text in real-time as you drag the slider. Click to display font size pop-up As with the pop-up sliders used elsewhere this can be used two ways. "Click + release" on the arrow and the pop-up will appear and stay on screen. You can now drag the slider, or use the mouse scroll wheel over the control to rapidly adjust the values. So in this case, this provides a fast way of adjusting the point size using the mouse wheel to see the results directly on the page of the document as you work. The alternative method of using the pop-up slider is to "click + drag + release" on the button and slider. This is a slightly more direct way of adjusting the control (requires less clicks). Instant font menu navigation While the font menu is displayed, you can type the initial characters of the font name, and the menu will be scrolled to that section of the list. E.g. if you type "ver" it will instantly scroll and locate the Verdana font. Page 571 Web Safe Fonts Only a small set of fonts can be used safely for the main text of a website - only those fonts that you know will exist on the computer of the viewer of your website. Although there are no guarantees, there is a common subset of fonts that are widely used by something like 98% of all computers, including Apple Mac and some Linux computers. These fonts are called the 'web safe fonts', and are listed in a separate section of the font menu. If you try and export a website using non safe fonts you will get a warning. Live Font Preview As you move the mouse pointer over any entry in the font menu, the selected text in the document is instantly updated to preview the font. This is not a permanent change until you actually click on the required font. Moving the mouse pointer over the menu will revert back to the initial font until you move over another entry. This is great for very rapidly previewing large numbers of fonts. If you hold down the "Shift" key while traversing the font menu, then the font selection is not updated instantly, there is a short pause before it is updated. This is useful if you find that instant preview slows down your traversal of the menu (perhaps if you have a large amount of text selected). Live Font Size preview Next to the font size menu is a small pop-up slider control, like that used elsewhere in Web Designer Premium. This provides a direct, live font size control, and will adjust the font size of the selected text in real-time as you drag the slider. Click to display font size pop-up As with the pop-up sliders used elsewhere this can be used two ways. "Click + release" on the arrow and the pop-up will appear and stay on screen. You can now drag the slider, or use the mouse scroll wheel over the control to rapidly adjust the values. So in this case, this provides a fast way of adjusting the point size using the mouse wheel to see the results directly on the page of the document as you work. The alternative method of using the pop-up slider is to "click + drag + release" on the button and slider. This is a slightly more direct way of adjusting the control (requires less clicks). Instant font menu navigation While the font menu is displayed, you can type the initial characters of the font name, and the menu will be scrolled to that section of the list. E.g. if you type "ver" it will instantly scroll and locate the Verdana font. Page 572 Live Font Preview As you move the mouse pointer over any entry in the font menu, the selected text in the document is instantly updated to preview the font. This is not a permanent change until you actually click on the required font. Moving the mouse pointer over the menu will revert back to the initial font until you move over another entry. This is great for very rapidly previewing large numbers of fonts. If you hold down the "Shift" key while traversing the font menu, then the font selection is not updated instantly, there is a short pause before it is updated. This is useful if you find that instant preview slows down your traversal of the menu (perhaps if you have a large amount of text selected). Live Font Size preview Next to the font size menu is a small pop-up slider control, like that used elsewhere in Web Designer Premium. This provides a direct, live font size control, and will adjust the font size of the selected text in real-time as you drag the slider. Click to display font size pop-up As with the pop-up sliders used elsewhere this can be used two ways. "Click + release" on the arrow and the pop-up will appear and stay on screen. You can now drag the slider, or use the mouse scroll wheel over the control to rapidly adjust the values. So in this case, this provides a fast way of adjusting the point size using the mouse wheel to see the results directly on the page of the document as you work. The alternative method of using the pop-up slider is to "click + drag + release" on the button and slider. This is a slightly more direct way of adjusting the control (requires less clicks). Instant font menu navigation While the font menu is displayed, you can type the initial characters of the font name, and the menu will be scrolled to that section of the list. E.g. if you type "ver" it will instantly scroll and locate the Verdana font. Page 573 Live Font Size preview Next to the font size menu is a small pop-up slider control, like that used elsewhere in Web Designer Premium. This provides a direct, live font size control, and will adjust the font size of the selected text in real-time as you drag the slider. Click to display font size pop-up As with the pop-up sliders used elsewhere this can be used two ways. "Click + release" on the arrow and the pop-up will appear and stay on screen. You can now drag the slider, or use the mouse scroll wheel over the control to rapidly adjust the values. So in this case, this provides a fast way of adjusting the point size using the mouse wheel to see the results directly on the page of the document as you work. The alternative method of using the pop-up slider is to "click + drag + release" on the button and slider. This is a slightly more direct way of adjusting the control (requires less clicks). Instant font menu navigation While the font menu is displayed, you can type the initial characters of the font name, and the menu will be scrolled to that section of the list. E.g. if you type "ver" it will instantly scroll and locate the Verdana font. Page 574 Instant font menu navigation While the font menu is displayed, you can type the initial characters of the font name, and the menu will be scrolled to that section of the list. E.g. if you type "ver" it will instantly scroll and locate the Verdana font. Page 575 Simple text If you wish to type a small amount of simple text, position the pointer where you want to enter text and click. A red cursor appears where you clicked and you can now start typing on the keyboard. If you make a mistake, use "Delete" and "Backspace" in the usual way. Pressing "Enter" completes the line and starts a new line of text below it. The inter-line spacing is controlled by the line spacing text box on the InfoBar. By default text has no outline color. "Shift + clicking" on a color on the Color Line will give the selected text an outline color - the thickness of which can be controlled by the line width control, as usual. You will probably want to set the Line join type to be rounded to give it a more smooth appearance (control at the top of the Line Gallery ). Line width is described in Changing the line width (thickness) (Changing the line width (thickness), Changing the line width (thickness)). Applying color is described in Color handling . You can continue to enter text even after rotation, color filling or placing it on a curve. Page 576 Text in a column If you are entering larger amounts of text, over multiple lines, using a column may be more useful. Changing the width of the column will automatically re-flow the text. To type a column of text: 1. Select the Text Tool. 2. Move the mouse pointer where you want the column to start. 3. Drag right to create a horizontal line the width of the column. This red line just shows you the width of the column. It is never exported or printed. 4. Type in the text. You don't need to press "Enter" at the end of a line. When the text reaches the edge of the column, it automatically flows onto a new line. Note : If you click away or change tools before you start typing, the text column will be removed and nothing left on the page. Therefore always start typing after you've dragged the column width line. Instead of typing in the text you can create the text in a separate text editor or word processor, copy it to the clipboard and paste it into Xara Web Designer 7 Premium. Copy and paste supports RTF-formatted text. Words only split across lines if they contain a hyphen character (minus key) The effect of typing a hyphen into "running" If you type "Ctrl + -" (minus key) it inserts a soft hyphen which is a hyphen that only appears if the word can wrap at the end of a line. This is particularly useful for narrow columns of text, to avoid rivers of white, you might need to hyphenate some words. Inserting a normal dash character will split the word at the end of the line. It's called a 'soft' hyphen because when the word appears in the middle of a line the hyphen vanishes (unlike a normal dash or minus character), so it intelligently hyphenates the words only if it needs to. When editing the text a soft hyphen is treated as an invisible character (it takes no space), but you can tell it's in the text by moving the cursor left/right over where the invisible character is. A hard hyphen can be inserted by typing "Ctrl + Shift + -" (minus key). A hard hyphen is one that will not cause a wrap at all. This is useful in situations where you have dashes in words that you do not want split at the end of lines. Changing the width of the column Drag either of the two red handles at the ends of the line. Changing the angle of the column "ñ+ drag" either of the red handles at the end of the line to change the angle of the column. Alternatively, "Ctrl + drag" to restrain the line to the constrain angles. Or alternatively you can use the Selector Tool to rotate the object in the usual way. For more on constrain angles, see Introduction to Xara Web Designer 7 Premium. Page 577 Changing the width of the column Drag either of the two red handles at the ends of the line. Changing the angle of the column "ñ+ drag" either of the red handles at the end of the line to change the angle of the column. Alternatively, "Ctrl + drag" to restrain the line to the constrain angles. Or alternatively you can use the Selector Tool to rotate the object in the usual way. For more on constrain angles, see Introduction to Xara Web Designer 7 Premium. Page 578 Changing the angle of the column "ñ+ drag" either of the red handles at the end of the line to change the angle of the column. Alternatively, "Ctrl + drag" to restrain the line to the constrain angles. Or alternatively you can use the Selector Tool to rotate the object in the usual way. For more on constrain angles, see Introduction to Xara Web Designer 7 Premium. Page 579 Text areas In the Text Tool if you click and drag diagonally on the page you will create a rectangular text area. The blinking cursor will be positioned in the top left corner and you can type or paste text. A text area can contain a "flowing" text story. This is where a single piece of text flows from one text area to another. It's called flowing text because, like water, as you add or remove text in one area it overflows into connected text areas or flows back from text areas. If the text overflows the bottom of the text area the overflowing text is shown gray, although you can continue to edit this text as usual. Connecting text areas—text flow When text overflows the bottom of the text area, an overflow indicator is shown on the bottom of the area. If you drag this over any other text area, the overflow text will flow into the new text area, and the two areas become connected. This is shown with a flow arrow. Dragging the overflow indicator from one text area to another will connect the two areas so text flows from one to another. You can link as many together as you require. There is a quick way to create flowing text. If the text cursor in an area with overflowing text, then just click-drag on the page to create a new text area. The new text area is automatically connected and text will flow into the new area. Tip : You can flow text from one area to another on any page, even earlier pages. If you need to flow into an area many pages away, it's probably easier to use the above method, although if you zoom out to a small page size you can drag the overflow arrow across pages. To disconnect one text area from another, just drag on the overflow indicator and drop it away from any text area. If you delete a text area that is connected to another only the area is deleted, the text will simply re-flow into the remaining text areas. Resizing text areas Using the Text Tool , you can click and drag on any of the corner control handles. The text in the area will be reformatted to fit the new size. Alternatively you can use the Selector Tool to resize the text object, but in this case the behavior is different. If you resize a text object using the Selector Tool, the text itself changes size. This is consistent with the normal operation of the Selector Tool . However in the case of flowing text areas this would cause undesired side-effects; you almost certainly do not want part of a flowing text story to be a different point size than the rest. Therefore, the Selector Tool behavior varies depending on whether you are resizing one text area that contains a flowing text story, or resizing the whole text story. The rule is: If you resize a single unconnected text area (or simple text or text column) then the area "container" and text content are resized together. If you select the text areas of the whole flowing text story (they have to be on a single page) then Page 580 a resize will resize the text and areas together. But if you resize a text area that is part of a flowing series of text areas, then only the container size is altered and the text inside remains the original size, and will be re-formatted to fit the new size. This is like resizing a text area with the Text Tool. If you want to resize all text in a text story, select it all with "Ctrl + A", and apply the required font size. You can rotate a text area, using the Selector Tool as normal, and the text will flow through the rotated text area normally. Text flow is unaffected if you rotate any of the text areas Hold down "Ctrl" while rotating to constrain the text rotation angle to 90° angles and screen aligned angles. Word count The word and character count total of the current text is shown in the status line. This also shows the number of overflowing words. If any region of text is selected, it shows the count of this selection instead. Page 581 Connecting text areas—text flow When text overflows the bottom of the text area, an overflow indicator is shown on the bottom of the area. If you drag this over any other text area, the overflow text will flow into the new text area, and the two areas become connected. This is shown with a flow arrow. Dragging the overflow indicator from one text area to another will connect the two areas so text flows from one to another. You can link as many together as you require. There is a quick way to create flowing text. If the text cursor in an area with overflowing text, then just click-drag on the page to create a new text area. The new text area is automatically connected and text will flow into the new area. Tip : You can flow text from one area to another on any page, even earlier pages. If you need to flow into an area many pages away, it's probably easier to use the above method, although if you zoom out to a small page size you can drag the overflow arrow across pages. To disconnect one text area from another, just drag on the overflow indicator and drop it away from any text area. If you delete a text area that is connected to another only the area is deleted, the text will simply re-flow into the remaining text areas. Resizing text areas Using the Text Tool , you can click and drag on any of the corner control handles. The text in the area will be reformatted to fit the new size. Alternatively you can use the Selector Tool to resize the text object, but in this case the behavior is different. If you resize a text object using the Selector Tool, the text itself changes size. This is consistent with the normal operation of the Selector Tool . However in the case of flowing text areas this would cause undesired side-effects; you almost certainly do not want part of a flowing text story to be a different point size than the rest. Therefore, the Selector Tool behavior varies depending on whether you are resizing one text area that contains a flowing text story, or resizing the whole text story. The rule is: If you resize a single unconnected text area (or simple text or text column) then the area "container" and text content are resized together. If you select the text areas of the whole flowing text story (they have to be on a single page) then a resize will resize the text and areas together. But if you resize a text area that is part of a flowing series of text areas, then only the container size is altered and the text inside remains the original size, and will be re-formatted to fit the new size. This is like resizing a text area with the Text Tool. If you want to resize all text in a text story, select it all with "Ctrl + A", and apply the required font size. You can rotate a text area, using the Selector Tool as normal, and the text will flow through the rotated text area normally. Page 582 Text flow is unaffected if you rotate any of the text areas Hold down "Ctrl" while rotating to constrain the text rotation angle to 90° angles and screen aligned angles. Word count The word and character count total of the current text is shown in the status line. This also shows the number of overflowing words. If any region of text is selected, it shows the count of this selection instead. Page 583 Resizing text areas Using the Text Tool , you can click and drag on any of the corner control handles. The text in the area will be reformatted to fit the new size. Alternatively you can use the Selector Tool to resize the text object, but in this case the behavior is different. If you resize a text object using the Selector Tool, the text itself changes size. This is consistent with the normal operation of the Selector Tool . However in the case of flowing text areas this would cause undesired side-effects; you almost certainly do not want part of a flowing text story to be a different point size than the rest. Therefore, the Selector Tool behavior varies depending on whether you are resizing one text area that contains a flowing text story, or resizing the whole text story. The rule is: If you resize a single unconnected text area (or simple text or text column) then the area "container" and text content are resized together. If you select the text areas of the whole flowing text story (they have to be on a single page) then a resize will resize the text and areas together. But if you resize a text area that is part of a flowing series of text areas, then only the container size is altered and the text inside remains the original size, and will be re-formatted to fit the new size. This is like resizing a text area with the Text Tool. If you want to resize all text in a text story, select it all with "Ctrl + A", and apply the required font size. You can rotate a text area, using the Selector Tool as normal, and the text will flow through the rotated text area normally. Text flow is unaffected if you rotate any of the text areas Hold down "Ctrl" while rotating to constrain the text rotation angle to 90° angles and screen aligned angles. Word count The word and character count total of the current text is shown in the status line. This also shows the number of overflowing words. If any region of text is selected, it shows the count of this selection instead. Page 584 Word count The word and character count total of the current text is shown in the status line. This also shows the number of overflowing words. If any region of text is selected, it shows the count of this selection instead. Page 585 Text along a curve To place text along a curve of your choice: 1. Create either basic text, text in a column or a text area (see above). 2. Select your text object and one curve. 3. Choose "Arrange" > "Fit text to curve". Alternatively, select a curve or line and then in the Text Tool , click on the line, where you want the text to start, and type. This automatically fits the text along the line. When you reach the end of the line the text will wrap onto a new line, immediately below the start of the previous one. If you do not want the text to wrap to a new line, "Shift + click" on the line. To hide the curve so it's not visible, select the Shape Editor Tool and set the line color to No color or a width of None . You can also edit the curve as usual this way. Applying color is described in Color handling . Adjusting the left and right margin of text on a curve If you just start typing or place a column of text on a curve, you can change the start and end position of the red handles. Just drag them along the curve as required. If you center text it will be between these two margins. Swapping sides of the line Right click on the text and select the Reverse text on curve menu option. Alternatively, if you reverse the direction of the line (Shape Editor Tool, Reverse paths button on the InfoBar), then the text will move to the other side of the line or, in the case of a closed shape, move from the inside to the outside of the shape. Page 586 Adjusting the left and right margin of text on a curve If you just start typing or place a column of text on a curve, you can change the start and end position of the red handles. Just drag them along the curve as required. If you center text it will be between these two margins. Swapping sides of the line Right click on the text and select the Reverse text on curve menu option. Alternatively, if you reverse the direction of the line (Shape Editor Tool, Reverse paths button on the InfoBar), then the text will move to the other side of the line or, in the case of a closed shape, move from the inside to the outside of the shape. Page 587 Swapping sides of the line Right click on the text and select the Reverse text on curve menu option. Alternatively, if you reverse the direction of the line (Shape Editor Tool, Reverse paths button on the InfoBar), then the text will move to the other side of the line or, in the case of a closed shape, move from the inside to the outside of the shape. Page 588 Editing text Double clicking on a text object in any tool takes you into the Text Tool and places the cursor at the click position in the text. All the normal word processor-style cursor and mouse operations can be used. For example: Click where you want to place the cursor. Use the left and right arrow keys to move left, right, up or down. Use "Ctrl + left and right arrow keys" to move left or right one word. Press "Home" or "End" to move to the start or end of the line. Press "Ctrl + Home", or "Ctrl + End" to move to the start or end of the text object. Text selection: "Shift + any" of the above keys to select text Double click to select a word Triple click selects a whole line of text, or "Ctrl + L" Quadruple (4x) click selects a paragraph of text Or just drag across the text in the Text Tool to select the text "Ctrl + A" will select all the text in the text object (you must be in the Text Tool.) If you have a text selection any attribute change will apply only to the selected region of text. If you have only the cursor in the text, then any attribute change, say selecting a new color, will only appear when you type new text. Selecting the whole text object There is a quick shortcut for selecting the whole text object. Instead of using "Ctrl + A" or dragging across all the text, simply press the "Esc" key. This removes the cursor but selects the whole text (the status line will confirm 1 text object). This makes it easy to apply an effect or attribute to the whole text story. For example, to change the font size of the whole text object, just press "Esc" and select the new size from the InfoBar. Swap case Pressing "Ctrl + W" will swap the case of the character after the cursor and move the cursor on. So, if you've accidentally typed a section of text with the caps lock key on, just place the cursor at the start and press and hold "Ctrl + W". You can swap the case of a selected region of text, the same way. The cursor will not be moved. Smart Quotes When you type quote ' or double quote " characters, Xara Web Designer 7 Premium will automatically convert these into the more appropriate and aesthetically accurate opening or closing quotes. So this changes 'this' into 'this' and "quotes" into "quotes". It's smart enough to understand the use of single quotes within words to signify missing characters, so that 'don't' becomes 'don't' . Entering special characters There are a number of useful shortcuts to allow insertion of special characters, like © or ™. See Special characters (in Text Tool) section in "Menus and keyboard shortcuts". All these shortcuts (with the exception of the hard space) are compatible with Microsoft Word. Page 589 Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 590 Selecting the whole text object There is a quick shortcut for selecting the whole text object. Instead of using "Ctrl + A" or dragging across all the text, simply press the "Esc" key. This removes the cursor but selects the whole text (the status line will confirm 1 text object). This makes it easy to apply an effect or attribute to the whole text story. For example, to change the font size of the whole text object, just press "Esc" and select the new size from the InfoBar. Swap case Pressing "Ctrl + W" will swap the case of the character after the cursor and move the cursor on. So, if you've accidentally typed a section of text with the caps lock key on, just place the cursor at the start and press and hold "Ctrl + W". You can swap the case of a selected region of text, the same way. The cursor will not be moved. Smart Quotes When you type quote ' or double quote " characters, Xara Web Designer 7 Premium will automatically convert these into the more appropriate and aesthetically accurate opening or closing quotes. So this changes 'this' into 'this' and "quotes" into "quotes". It's smart enough to understand the use of single quotes within words to signify missing characters, so that 'don't' becomes 'don't' . Entering special characters There are a number of useful shortcuts to allow insertion of special characters, like © or ™. See Special characters (in Text Tool) section in "Menus and keyboard shortcuts". All these shortcuts (with the exception of the hard space) are compatible with Microsoft Word. Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 591 Swap case Pressing "Ctrl + W" will swap the case of the character after the cursor and move the cursor on. So, if you've accidentally typed a section of text with the caps lock key on, just place the cursor at the start and press and hold "Ctrl + W". You can swap the case of a selected region of text, the same way. The cursor will not be moved. Smart Quotes When you type quote ' or double quote " characters, Xara Web Designer 7 Premium will automatically convert these into the more appropriate and aesthetically accurate opening or closing quotes. So this changes 'this' into 'this' and "quotes" into "quotes". It's smart enough to understand the use of single quotes within words to signify missing characters, so that 'don't' becomes 'don't' . Entering special characters There are a number of useful shortcuts to allow insertion of special characters, like © or ™. See Special characters (in Text Tool) section in "Menus and keyboard shortcuts". All these shortcuts (with the exception of the hard space) are compatible with Microsoft Word. Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 592 Smart Quotes When you type quote ' or double quote " characters, Xara Web Designer 7 Premium will automatically convert these into the more appropriate and aesthetically accurate opening or closing quotes. So this changes 'this' into 'this' and "quotes" into "quotes". It's smart enough to understand the use of single quotes within words to signify missing characters, so that 'don't' becomes 'don't' . Entering special characters There are a number of useful shortcuts to allow insertion of special characters, like © or ™. See Special characters (in Text Tool) section in "Menus and keyboard shortcuts". All these shortcuts (with the exception of the hard space) are compatible with Microsoft Word. Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 593 Entering special characters There are a number of useful shortcuts to allow insertion of special characters, like © or ™. See Special characters (in Text Tool) section in "Menus and keyboard shortcuts". All these shortcuts (with the exception of the hard space) are compatible with Microsoft Word. Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 594 Entering dummy text ('Lorem Ipsum') When creating page layouts, it's common practice to use dummy text, which is a type of pseudo-Latin (it doesn't really mean anything), but has the overall appearance of typical English text (or other similar Latin-based languages). The text begins "Lorem ipsum dolor sit amet..." Historical note : This same text has been used as dummy text going back more than 500 years in the print trade and parts of the actual Latin used can be traced to text written more than 2000 years ago. You can insert a paragraph of the "Lorem ipsum" text by typing "Ctrl + Shift + L" ("L" for Lorem) while using the Text Tool . To insert a larger block of text, just press the key combination a few times. Page 595 Spell checker The Text Tool includes a spell checker. To turn it on, select the Spell Checker icon on the Text Tool infobar, which opens a menu. Select "Check spelling as you type ". Now all unrecognized words in your document and as you type are shown with a red dashed underline. To correct a misspelled word, right click on it and the context menu shows you suggested correct spellings of the word at the top of the menu. Simply select one of the suggestions to replace the word. Language selection The menu shown when you click on the Spell Checker icon on the infobar lists all the languages for which you have dictionaries installed. By default the language corresponding to the current locale setting is selected. You can choose different languages for different text objects, so you can use text in multiple languages in your document if required. To change the language associated with a text object, select the text object, then in the Text Tool choose the required language from the Spell Checker menu. Now the text object will be checked against the dictionary for the language you chose. If you want to enter many text objects using a language other than the default, you can change the current language text attribute so that you don't have to change the language on every text object individually. To do this, make sure you have nothing selected (click an empty area of your design using the Selector Tool). Then in the Text Tool , choose the language you want to make current using the Spell Checker menu. You will be asked if you want to set the current language text attribute. Click "Set" to confirm. Now each new text object you create will be associated with the chosen language. Note that this current attribute is not re-loaded when you save and load your design. So you will need to repeat the above procedure to set the current language text attribute again the next time you load the document, if you want to continue entering new text objects using the same language. If you have a text object which you don't want to be spell checked at all, select the object and choose the "No language (ignore)" option from the Spell Checker menu. User dictionary Words that you use regularly which are not in the dictionary provided with Xara Web Designer 7 Premium can be added to your own personal dictionary. Right click on the word and choose "Add to user dictionary ". Now the word is no longer shown as being misspelled. The user dictionary applies to all documents that you use on your computer and it applies to all languages. Page 596 Language selection The menu shown when you click on the Spell Checker icon on the infobar lists all the languages for which you have dictionaries installed. By default the language corresponding to the current locale setting is selected. You can choose different languages for different text objects, so you can use text in multiple languages in your document if required. To change the language associated with a text object, select the text object, then in the Text Tool choose the required language from the Spell Checker menu. Now the text object will be checked against the dictionary for the language you chose. If you want to enter many text objects using a language other than the default, you can change the current language text attribute so that you don't have to change the language on every text object individually. To do this, make sure you have nothing selected (click an empty area of your design using the Selector Tool). Then in the Text Tool , choose the language you want to make current using the Spell Checker menu. You will be asked if you want to set the current language text attribute. Click "Set" to confirm. Now each new text object you create will be associated with the chosen language. Note that this current attribute is not re-loaded when you save and load your design. So you will need to repeat the above procedure to set the current language text attribute again the next time you load the document, if you want to continue entering new text objects using the same language. If you have a text object which you don't want to be spell checked at all, select the object and choose the "No language (ignore)" option from the Spell Checker menu. User dictionary Words that you use regularly which are not in the dictionary provided with Xara Web Designer 7 Premium can be added to your own personal dictionary. Right click on the word and choose "Add to user dictionary ". Now the word is no longer shown as being misspelled. The user dictionary applies to all documents that you use on your computer and it applies to all languages. Page 597 User dictionary Words that you use regularly which are not in the dictionary provided with Xara Web Designer 7 Premium can be added to your own personal dictionary. Right click on the word and choose "Add to user dictionary ". Now the word is no longer shown as being misspelled. The user dictionary applies to all documents that you use on your computer and it applies to all languages. Page 598 Find & Replace The Find & Replace function performs live search so that as you type the search string the text is searched and highlighted in real-time. To search for some text select the menu "Edit" > "Find/Replace..." or "Ctrl + Alt + F" and the following dialog is displayed: Enter the search string and it's shown highlighted in the text. You can choose to search just the current text story, page or the whole document (all text flows on all pages). The Whole word option will only search for whole words that match the search string. E.G. searching for 'met' will not find 'metro'. The Case sensitive option will match only the exact case. E.g., with this option on, searching for 'aBc' will not find 'abc'. Page 599 Synchronising Text using Soft Groups In some designs, you may find you need multiple text objects to always show the same text, but perhaps using different styles. Animating text in an animation document is one example of this and mouse over buttons which highlight when the mouse pointer is moved over them in a web browser is another. Normally when you want to change the text shown on these objects, you'd need to edit each one individually. By adding such related text objects into a Soft Group, you can ensure that they will always show the same text. To add the related text objects into a Soft Group, first make sure that they all already have exactly the same text (otherwise they will not become synchronized). Then select them all using the Selector Tool. Then select "Arrange" > "Apply soft group" ("Ctrl + Alt + G"). Now when the text is edited on one text object, the others will be updated automatically, even if they are scattered across different layers (or in the case of animation documents, different frames) throughout your document. Note that this synchronization still works even if some of the text objects are on locked or invisible layers. To ungroup a Soft Group, select "Arrange" > "Remove soft group" ("Ctrl + Alt + U"). See the Soft Groups section of the Object Manipulation (Soft Groups, Soft Groups ) chapter for more information on Soft Groups. Page 600 Tabs, Margins and Indents Rulers To adjust tabs, margins and indents you need to turn on rulers in your document. To do this: Choose "Windows" > "Show Rulers" or right click a page and choose "Show Grid/Guides" > "Show Rulers". Or press "Ctrl + ñ + R". Or press "Ctrl + L" (when not in the Text Tool). The enhanced text features will only appear on the ruler when you are using the Text Tool and when the text cursor is in a text story or the text object is selected when in the Text Tool . In the Text Tool when you drag the margins or tabs on the ruler, you get a temporary vertical guide to make it easier to align the tabs or margins to objects elsewhere on the page. In addition when dragging tabs or margins, if you have magnetic snap switched on, these will snap to each other making it easier to position tabs and margins. Margins and indents Any changes you make are made to the current paragraph of text. (i.e. the paragraph containing the text cursor) or, if you have a selected region of text, to the paragraphs of the selected region. You can apply changes to all text in a text story by selecting all the text within that story ("Ctrl + A"). To change more than one text story, select the text objects while in the Selector Tool then change to the Text Tool and make the required changes. Left margin . Drag this to change the left margin of the text. First line margin. Drag this to change the left margin for the first line of the paragraph (useful for lists, as shown below). Right margin. Drag this to change the right margin of the text. Demonstrating the left margin and first line margin Demonstrating a right margin Text along a curve If you have fitted a single line of text to the curve using the Fit text to curve option, then the curve line is the margin. If the text is longer than the line it will just flow off the end. Page 601 If you have clicked on the line or fitted a column of text to a curve or line then you have left and right margin indicators (small red squares) that can be dragged along the line to adjust the margins used for justification. Tabs By default, text stories are created with tabs set 0.5 cm apart. This means you can just press "Tab" and your text will be moved along to the next tab stop. You only need to define new tab stop positions if you want alternative tab spacing. These default tabs are shown as faint Ls on the ruler: Standard tabs, indicated by faint "L"s Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be Page 602 tab-aligned. How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 603 Rulers To adjust tabs, margins and indents you need to turn on rulers in your document. To do this: Choose "Windows" > "Show Rulers" or right click a page and choose "Show Grid/Guides" > "Show Rulers". Or press "Ctrl + ñ + R". Or press "Ctrl + L" (when not in the Text Tool). The enhanced text features will only appear on the ruler when you are using the Text Tool and when the text cursor is in a text story or the text object is selected when in the Text Tool . In the Text Tool when you drag the margins or tabs on the ruler, you get a temporary vertical guide to make it easier to align the tabs or margins to objects elsewhere on the page. In addition when dragging tabs or margins, if you have magnetic snap switched on, these will snap to each other making it easier to position tabs and margins. Margins and indents Any changes you make are made to the current paragraph of text. (i.e. the paragraph containing the text cursor) or, if you have a selected region of text, to the paragraphs of the selected region. You can apply changes to all text in a text story by selecting all the text within that story ("Ctrl + A"). To change more than one text story, select the text objects while in the Selector Tool then change to the Text Tool and make the required changes. Left margin . Drag this to change the left margin of the text. First line margin. Drag this to change the left margin for the first line of the paragraph (useful for lists, as shown below). Right margin. Drag this to change the right margin of the text. Demonstrating the left margin and first line margin Demonstrating a right margin Text along a curve If you have fitted a single line of text to the curve using the Fit text to curve option, then the curve line is the margin. If the text is longer than the line it will just flow off the end. If you have clicked on the line or fitted a column of text to a curve or line then you have left and right margin indicators (small red squares) that can be dragged along the line to adjust the margins used for justification. Page 604 Tabs By default, text stories are created with tabs set 0.5 cm apart. This means you can just press "Tab" and your text will be moved along to the next tab stop. You only need to define new tab stop positions if you want alternative tab spacing. These default tabs are shown as faint Ls on the ruler: Standard tabs, indicated by faint "L"s Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. Page 605 How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 606 Margins and indents Any changes you make are made to the current paragraph of text. (i.e. the paragraph containing the text cursor) or, if you have a selected region of text, to the paragraphs of the selected region. You can apply changes to all text in a text story by selecting all the text within that story ("Ctrl + A"). To change more than one text story, select the text objects while in the Selector Tool then change to the Text Tool and make the required changes. Left margin . Drag this to change the left margin of the text. First line margin. Drag this to change the left margin for the first line of the paragraph (useful for lists, as shown below). Right margin. Drag this to change the right margin of the text. Demonstrating the left margin and first line margin Demonstrating a right margin Text along a curve If you have fitted a single line of text to the curve using the Fit text to curve option, then the curve line is the margin. If the text is longer than the line it will just flow off the end. If you have clicked on the line or fitted a column of text to a curve or line then you have left and right margin indicators (small red squares) that can be dragged along the line to adjust the margins used for justification. Tabs By default, text stories are created with tabs set 0.5 cm apart. This means you can just press "Tab" and your text will be moved along to the next tab stop. You only need to define new tab stop positions if you want alternative tab spacing. These default tabs are shown as faint Ls on the ruler: Standard tabs, indicated by faint "L"s Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: Page 607 The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 608 Text along a curve If you have fitted a single line of text to the curve using the Fit text to curve option, then the curve line is the margin. If the text is longer than the line it will just flow off the end. If you have clicked on the line or fitted a column of text to a curve or line then you have left and right margin indicators (small red squares) that can be dragged along the line to adjust the margins used for justification. Tabs By default, text stories are created with tabs set 0.5 cm apart. This means you can just press "Tab" and your text will be moved along to the next tab stop. You only need to define new tab stop positions if you want alternative tab spacing. These default tabs are shown as faint Ls on the ruler: Standard tabs, indicated by faint "L"s Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Page 609 Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 610 Tabs By default, text stories are created with tabs set 0.5 cm apart. This means you can just press "Tab" and your text will be moved along to the next tab stop. You only need to define new tab stop positions if you want alternative tab spacing. These default tabs are shown as faint Ls on the ruler: Standard tabs, indicated by faint "L"s Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. Page 611 How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 612 Custom tabs To create a custom tab position, just click on the ruler where you wish to place the new tab. It will replace default tabs up to that point on the ruler. For example: The triangle indicates a custom tab To set more than one tab click multiple times on the ruler. To move a custom tab drag it along the ruler. To remove a tab drag it off of the ruler (default tabs will come back). Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. Page 613 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 614 Custom tab types You can set different types of custom tab. By default, custom tabs are left align tabs. This means that text will be aligned with the tab on the left of the text. To change the tab type, click the tab icon on the ruler. The following custom tab types are available. You are not limited to just one type in a story, and can choose a different type then set additional tabs. Left align: The text will be aligned with the tab to the left. Right align: The text will be aligned with the tab to the right. Center align: The text will be centered on the tab. Decimal point align: The decimal points in the text will be aligned with the tab. This is useful for lists and, however long the number, the decimal points (periods) will be tab-aligned. How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 615 How to creating hanging indents Hanging Indents, as they are known, are where the first line of a paragraph has a negative margin or a margin that hangs to the left of the normal left margin. Numbered or bulleted lists are examples of hanging indents. To create hanging indents: 1. Drag the left margin inwards. 2. Click on the ruler away from the left margin (creates a new tab stop) and drag this tab stop to be exactly over the left margin. 3. Now each line will start outdented?you can insert any special character or number and press "Tab" to move to the left margin. And (as with this paragraph) all subsequent lines of text are indented to the left margin. Page 616 Repelling text objects You can make any object in Xara Web Designer 7 Premium repel text so that text underneath it automatically flows around the object, instead of appearing underneath it. This makes it easy to lay out pages containing long passages of text combined with photos and graphics. Once you've set them to repel, you can adjust the positions of your graphics and photos and the text will automatically adjust and reflow around them. You can also choose to only repel text within a layer, which stops objects within a layer from repelling text on other layers and also stops text on the layer being repelled by objects on higher layers. Making an object repel To make an object repel text, right click it and select the Repel text under option. Any text in the same layer underneath the object will be repelled with a default margin of 5 pixels between the text and object. Note that repelling text objects only repel text that is underneath the objects, not any text that is on top. Alternatively right click on the object and select Repelling & Anchoring to display the Text repelling & anchoring dialog. Click the Repel text around this graphic checkbox. If desired, set a repel margin for the object to set the space between the text and the object. If you want a different height and width for the repel margin, click the padlock symbol and enter the margin height in Page 617 the H (horizontal) box and width in the V (vertical) box. Click OK . To turn off repelling right click the object and choose the Repel text under option again to deselect it. Or right click and select Repelling & Anchoring to display the Text repelling & anchoring dialog again. Click the Repel text around this graphic checkbox to deselect it and click OK . Note that single lines of text do not respond to repelling objects, only text areas and text columns do. To only repel text within the same layer as the repelling object, see Layer Properties . Page 618 Making an object repel To make an object repel text, right click it and select the Repel text under option. Any text in the same layer underneath the object will be repelled with a default margin of 5 pixels between the text and object. Note that repelling text objects only repel text that is underneath the objects, not any text that is on top. Alternatively right click on the object and select Repelling & Anchoring to display the Text repelling & anchoring dialog. Click the Repel text around this graphic checkbox. If desired, set a repel margin for the object to set the space between the text and the object. If you want a different height and width for the repel margin, click the padlock symbol and enter the margin height in the H (horizontal) box and width in the V (vertical) box. Click OK . To turn off repelling right click the object and choose the Repel text under option again to deselect it. Or right click and select Repelling & Anchoring to display the Text repelling & anchoring dialog again. Click the Repel text around this graphic checkbox to deselect it and click OK . Note that single lines of text do not respond to repelling objects, only text areas and text columns do. To only repel text within the same layer as the repelling object, see Layer Properties . Page 619 Anchored Graphics You can position any graphic, or group, so it's tied (anchored) to a position in some text, so that as the text moves because of editing, the graphic object will move to remain at the same relative position. 1. The quickest way to anchor a graphic or group is to right click it and choose the Anchor to text option. However, if you also want to edit anchoring properties, you can right click on the object and select Repelling & Anchoring to display the Text repelling & anchoring dialog. 2. Click the Move graphic with text checkbox. 3. By default Move vertically only is also selected, so that your anchored graphic will only move vertically as the text is edited. You can click to deselect this option to allow the graphic to move horizontally with the text. This may be useful if, for example, the graphic is around the same size as the text height and you want it to stay between specific words or in a specific place in a sentence. 4. An anchor symbol appears in the top left of the object, indicating it's now anchored. 5. Using either the Selector Tool or Text Tool, click and drag the anchor symbol so that a red arrow appears. 6. Move the arrow head and drop it in the location in the text where you would like the object anchored. A red caret (inverted 'T' mark) indicates the anchor position. 7. As you edit the text around this caret mark, the anchor point and anchored object moves with the text. An anchored object displays an anchor symbol and an arrow pointing to the anchor point, shown as a red caret mark.These disappear as you type, unless you're close to the anchor point. Note: If you drag the anchoring arrow to a place on the page where there is no text, the arrow turns into a red anchor that indicates the object's anchoring properties will be lost if it's dropped here. This also happens when the arrow is dropped on the object itself. However note that the anchored object will not move outside the area of the page as a result of the anchor point moving. The anchored object will only move up to the edge of the page. Page 620 This is an example column of text with various graphic elements hanging to the left. Each of these is anchored to the start of a line of text immediately to its right. It's possible to anchor any graphic object or group, including groups containing text, such as the example side-panel, shown above. It's also possible to anchor objects to appear on top of, or below the text. The example pale blue flower graphic, shown above, is anchored this way and will flow with the text. Note : If an anchored object is also set to repel, only the text that the object is anchored to is repelled. Note : Repelling is restricted for repeating objects: Text inside a repeating group is only repelled by repelling objects inside the repeating group. Individual repelling objects inside a repeating group only repel text that is also inside the repeating group. Repeating groups as a whole can repel any text stacked below on the page. Moving Anchored Objects As new text is added or deleted, the object moves as the text flows, but will always maintain its new position relative to the anchor point. You can move an anchored graphic by dragging on it as usual. This changes its position relative to the anchor point, but does not move the anchor point, which remains visible at the end of the anchor symbol arrow as you click/move the graphic. If you want to move the anchor point to another location within the text, click and drag on the anchor symbol again to create a new arrow and drag it to the new location. If you cut and paste the text containing the caret mark, the anchored object is also cut and pasted. Viewing the anchor point The anchor point of an anchored object is only visible if you click the anchored object in the Selector Tool or click in the surrounding text area in the Text Tool . When you click in a region of text with the Text Tool, it shows any anchors points within an inverted 'T' symbol, and also draws an arrow from the anchor point to the anchor symbol in the top left of each anchored object. So the easiest way to see all the anchor points for any text is to click in it with the Text Page 621 Tool . However, when you start to edit the text, the red caret, arrow and anchored symbol temporarily disappear until you stop typing. If you are close to the anchor point, Web Designer Premium displays the caret mark, along with an arrow pointing to the anchor symbol, to let you know when you're close. Inline anchored objects If you want to embed a small graphic into a line of text, such as an icon graphic like this ; inline with the text, so it flows with the text, drag or paste the image in as an anchored object that repels and position its anchor point anywhere in the copy. It's recommended you use non-breaking space characters ("Ctrl + Space bar"). Soft Groups You can anchor Soft Groups (Soft Groups, Soft Groups ) the same way, even where part of the group is on another layer. For example web buttons with mouseover effects or pop-ups on different layers can be anchored in this way. Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 622 Moving Anchored Objects As new text is added or deleted, the object moves as the text flows, but will always maintain its new position relative to the anchor point. You can move an anchored graphic by dragging on it as usual. This changes its position relative to the anchor point, but does not move the anchor point, which remains visible at the end of the anchor symbol arrow as you click/move the graphic. If you want to move the anchor point to another location within the text, click and drag on the anchor symbol again to create a new arrow and drag it to the new location. If you cut and paste the text containing the caret mark, the anchored object is also cut and pasted. Viewing the anchor point The anchor point of an anchored object is only visible if you click the anchored object in the Selector Tool or click in the surrounding text area in the Text Tool . When you click in a region of text with the Text Tool, it shows any anchors points within an inverted 'T' symbol, and also draws an arrow from the anchor point to the anchor symbol in the top left of each anchored object. So the easiest way to see all the anchor points for any text is to click in it with the Text Tool . However, when you start to edit the text, the red caret, arrow and anchored symbol temporarily disappear until you stop typing. If you are close to the anchor point, Web Designer Premium displays the caret mark, along with an arrow pointing to the anchor symbol, to let you know when you're close. Inline anchored objects If you want to embed a small graphic into a line of text, such as an icon graphic like this ; inline with the text, so it flows with the text, drag or paste the image in as an anchored object that repels and position its anchor point anywhere in the copy. It's recommended you use non-breaking space characters ("Ctrl + Space bar"). Soft Groups You can anchor Soft Groups (Soft Groups, Soft Groups ) the same way, even where part of the group is on another layer. For example web buttons with mouseover effects or pop-ups on different layers can be anchored in this way. Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 623 Viewing the anchor point The anchor point of an anchored object is only visible if you click the anchored object in the Selector Tool or click in the surrounding text area in the Text Tool . When you click in a region of text with the Text Tool, it shows any anchors points within an inverted 'T' symbol, and also draws an arrow from the anchor point to the anchor symbol in the top left of each anchored object. So the easiest way to see all the anchor points for any text is to click in it with the Text Tool . However, when you start to edit the text, the red caret, arrow and anchored symbol temporarily disappear until you stop typing. If you are close to the anchor point, Web Designer Premium displays the caret mark, along with an arrow pointing to the anchor symbol, to let you know when you're close. Inline anchored objects If you want to embed a small graphic into a line of text, such as an icon graphic like this ; inline with the text, so it flows with the text, drag or paste the image in as an anchored object that repels and position its anchor point anywhere in the copy. It's recommended you use non-breaking space characters ("Ctrl + Space bar"). Soft Groups You can anchor Soft Groups (Soft Groups, Soft Groups ) the same way, even where part of the group is on another layer. For example web buttons with mouseover effects or pop-ups on different layers can be anchored in this way. Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 624 Inline anchored objects If you want to embed a small graphic into a line of text, such as an icon graphic like this ; inline with the text, so it flows with the text, drag or paste the image in as an anchored object that repels and position its anchor point anywhere in the copy. It's recommended you use non-breaking space characters ("Ctrl + Space bar"). Soft Groups You can anchor Soft Groups (Soft Groups, Soft Groups ) the same way, even where part of the group is on another layer. For example web buttons with mouseover effects or pop-ups on different layers can be anchored in this way. Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 625 Soft Groups You can anchor Soft Groups (Soft Groups, Soft Groups ) the same way, even where part of the group is on another layer. For example web buttons with mouseover effects or pop-ups on different layers can be anchored in this way. Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 626 Removing an anchor To remove an anchor from an object, right click it and choose Anchor to text again to disable the option. Now when you click the object in the Selector Tool or in the text in the Text Tool , the anchor symbol is no longer displayed. Page 627 Applying text styles Changing the font size There are several ways to change the font size: Type a new value into the size text box on the InfoBar and press ¿. Or select from the Font size drop-down list on the InfoBar. Or use the Font size pop-up slider. Or manually increase/decrease font size with the "Ctrl + Shift + >" and "Ctrl + Shift + <" keyboard shortcuts. This applies only if all selected text parts are of the same font size. Or use the Selector Tool to scale the whole text object. Bold & Italic Click the Bold or Italic button on the InfoBar ("Ctrl + B" or "Ctrl + I") This applies the bold or italic variant of the current font. Attention: Xara Web Designer 7 Premium does not allow you to apply italic or bold to text if the necessary italic/bold font is not installed. However you can easily emulate the same effect. To embolden a font, just give it a small line width and apply a line color. To slant a font, use the skew / slant feature of the Selector Tool . Read more in the "Font menu" section Text Underlining Click the underline button on the InfoBar to apply an underline to the selected text. The underline color and size is automatically derived from the text color and size. Justification or text alignment Justification always applies to the complete line. Any selected region is ignored. Left justification: Align the left-hand edge of the text to the initial click position. Center justification: Centers the text around the click position. Right justification: Align the right-hand edge of the text to the initial click position. Full justification: This only applies when text is along a curve or in a column and when there is at least one full line of text to justify. When using simple text the initial click position on the page is taken as the origin for text justification. Page 628 Indents and Outdents Indent a paragraph of text. Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Page 629 Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 630 Changing the font size There are several ways to change the font size: Type a new value into the size text box on the InfoBar and press ¿. Or select from the Font size drop-down list on the InfoBar. Or use the Font size pop-up slider. Or manually increase/decrease font size with the "Ctrl + Shift + >" and "Ctrl + Shift + <" keyboard shortcuts. This applies only if all selected text parts are of the same font size. Or use the Selector Tool to scale the whole text object. Bold & Italic Click the Bold or Italic button on the InfoBar ("Ctrl + B" or "Ctrl + I") This applies the bold or italic variant of the current font. Attention: Xara Web Designer 7 Premium does not allow you to apply italic or bold to text if the necessary italic/bold font is not installed. However you can easily emulate the same effect. To embolden a font, just give it a small line width and apply a line color. To slant a font, use the skew / slant feature of the Selector Tool . Read more in the "Font menu" section Text Underlining Click the underline button on the InfoBar to apply an underline to the selected text. The underline color and size is automatically derived from the text color and size. Justification or text alignment Justification always applies to the complete line. Any selected region is ignored. Left justification: Align the left-hand edge of the text to the initial click position. Center justification: Centers the text around the click position. Right justification: Align the right-hand edge of the text to the initial click position. Full justification: This only applies when text is along a curve or in a column and when there is at least one full line of text to justify. When using simple text the initial click position on the page is taken as the origin for text justification. Indents and Outdents Indent a paragraph of text. Page 631 Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Page 632 Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 633 Bold & Italic Click the Bold or Italic button on the InfoBar ("Ctrl + B" or "Ctrl + I") This applies the bold or italic variant of the current font. Attention: Xara Web Designer 7 Premium does not allow you to apply italic or bold to text if the necessary italic/bold font is not installed. However you can easily emulate the same effect. To embolden a font, just give it a small line width and apply a line color. To slant a font, use the skew / slant feature of the Selector Tool . Read more in the "Font menu" section Text Underlining Click the underline button on the InfoBar to apply an underline to the selected text. The underline color and size is automatically derived from the text color and size. Justification or text alignment Justification always applies to the complete line. Any selected region is ignored. Left justification: Align the left-hand edge of the text to the initial click position. Center justification: Centers the text around the click position. Right justification: Align the right-hand edge of the text to the initial click position. Full justification: This only applies when text is along a curve or in a column and when there is at least one full line of text to justify. When using simple text the initial click position on the page is taken as the origin for text justification. Indents and Outdents Indent a paragraph of text. Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering Page 634 normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line Page 635 contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 636 Text Underlining Click the underline button on the InfoBar to apply an underline to the selected text. The underline color and size is automatically derived from the text color and size. Justification or text alignment Justification always applies to the complete line. Any selected region is ignored. Left justification: Align the left-hand edge of the text to the initial click position. Center justification: Centers the text around the click position. Right justification: Align the right-hand edge of the text to the initial click position. Full justification: This only applies when text is along a curve or in a column and when there is at least one full line of text to justify. When using simple text the initial click position on the page is taken as the origin for text justification. Indents and Outdents Indent a paragraph of text. Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Page 637 Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing Page 638 The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 639 Justification or text alignment Justification always applies to the complete line. Any selected region is ignored. Left justification: Align the left-hand edge of the text to the initial click position. Center justification: Centers the text around the click position. Right justification: Align the right-hand edge of the text to the initial click position. Full justification: This only applies when text is along a curve or in a column and when there is at least one full line of text to justify. When using simple text the initial click position on the page is taken as the origin for text justification. Indents and Outdents Indent a paragraph of text. Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply Page 640 place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 641 Indents and Outdents Indent a paragraph of text. Outdent a paragraph of text. Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and Page 642 subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 643 Bulleted Lists You can turn any text into a bulleted list by selecting the text and then selecting the bulleted list button on the infobar. Each paragraph of text becomes a separate bullet. If you press return to finish a line at the end of one bullet point, the next line starts with a bullet point to. To finish entering a bulleted list, hit return on the end of the last bullet and then immediately hit return again on the new bulleted line. This removes the last empty bulleted line and allows you to start entering normal text again. You can nest bulleted lists by pressing the indent button on the infobar. This indents the current bulleted line and changes the bullet character to a different style, to distinguish it from the parent bullet. Example of a nested bulleted list To move a bullet point from a sub-list into its parent bulleted list, simply place the text cursor in it and press the outdent button. So it's easy to make and edit arrangements of nested bulleted lists using the indent and outdent buttons. Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Page 644 Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 645 Numbered lists You can create and edit numbered lists in just the same way as described for bulleted lists above, using the numbered list button. You can also choose the numbering scheme to be used for each list, using the List properties dialog. Place the text cursor in one of the numbered list points, press the right mouse button and choose 'List properties… " from the context menu. In the dialog you can choose from a variety of numbering schemes and also enter the value that should be used for the very first entry in the list. Then the number is automatically incremented for the second and subsequent entries in the list. Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 646 Subscript & superscript Click the appropriate button on the InfoBar. Normal text subscript superscript Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 647 Line spacing Line spacing allows you to change the space between two lines (so affects vertical spacing). Line spacing is measured in percentages (120%) or points (12pt). You can either type the line space value in the text box or click the arrows to nudge the values. A percentage setting has the benefit of scaling accordingly if you change your font size. If a percentage is applied to a line of text with more than one font size, the largest font size is used. For example, if a line contains 90% and 100% text, the line spacing is calculated on 100%. Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 648 Paragraph Spacing The last two fields on the end of the Text Tool InfoBar allow you to set the spacing above and/or below paragraphs. This is particularly useful where you want half line spaces between paragraphs. Like Microsoft Word, when you use both spacing above and below paragraphs, the spacing between paragraphs is whichever is the greater value (it's not cumulative). Paragraph spacing above paragraphs will move the first paragraph down in a frame of text. Page 649 Text links You can apply a link to any part of a text object, so that when the document is exported as HTML the text shows as a clickable link in web browsers. Use the Text Tool to select the words or characters that you want to apply the link to, then click the link button on the Web toolbar. This brings up the Web Properties dialog, with the Link tab selected. On this tab you can choose whether to link to a URL, to another page of your website, or even to a pop-up layer. By default when you apply a link to some text, the text is shown as underlined and with the text link color that is defined for the current document. You can change the link color and whether or not the links are underlined, on the Website tab of the Web Properties dialog (right click and choose Web Properties or choose Web Properties from the Utilities menu). You can also set the color to be shown when the user moves the mouse pointer over a text link in a web browser ("Mouse Over Color"), and the "Visited Color" which is used to display links which the viewer has already visited with their web browser. When setting the three global text link colors, you can either select existing named theme colors used in your website, using the drop-down lists, or you can click the Edit button to bring up the Color Editor so you can choose any color you like. You can also choose to override the global text link colors for individual links if required. On the Link tab of the Web Properties dialog, unselect the "Use common website link colors" option. Then the selected link will be displayed using the text color that you set in the document, instead of the global text link color. Page 650 Text inside groups for websites When a document is exported as a website, all groups get exported as images. So any text inside groups is not present as text in your exported website, and so it can't be picked up by search engines or selected and copied as text by a visitor to your site. For graphical buttons, headings, logos etc. this is usually desirable as the text just forms part of the graphic. But you may have more substantial pieces of text inside groups which you want to remain as text in your exported web page. To arrange this, all you need to do is apply the special name "HTMLText" to your text object. The easiest way to do this is as follows: 1. Go into the Text Tool and click on your text to insert the text cursor. 2. Press escape so that the whole text object becomes selected. 3. Open the Name dialog ("Utilities" > "Names..."). 4. Either select the "HTMLText" name from the "Apply name" dropdown list if you've already used it in the current document, or type in the name "HTMLText". Then click "Add" to add the name. Now, when you export your website, your text will remain as text and the rest of the group will be converted to an image. All the text panels provided in the Designs Gallery already have this name applied to the text objects inside them, so the text on the panels will export as text. Browsers can't render rotated text, so you can't use this name to force rotated text to be exported as text. The name is ignored in this case. Page 651 Copying text styles It's easy to copy the style of any text to any other region of text using the Paste attributes feature: Select the source region from where you want to copy the style. This can be as little as a word (just double click). Select "Edit" > "Copy" ("Ctrl + C"). Select the region of text to which you want to apply the style. Select "Edit" > "Paste attributes" ("Ctrl + ñ + A"). If you just have the text cursor positioned in some text when you Paste attributes the paragraph attributes will be pasted to this paragraph. If you have a region of text selected, then Paste attributes will paste all the visual attributes of the source text. Applying attributes to whole text stories When you have the cursor in a simple or column text object, pressing "Esc" will select the whole text object. You can then apply an attribute, say a color, and the whole text object is altered. This is often quicker than performing "Select all" ("Ctrl + A"). With text areas this method only works if all text areas of the story are selected. You can do this in the Selector Tool clicking and "Shift + clicking" on the different text areas to select them. But this method is only possible if the text areas are on a single page. If your text story flows over several pages and you want to change all the text, then it's necessary to "Select all" ("Ctrl + A"), and then apply the required attributes. Page 652 Applying attributes to whole text stories When you have the cursor in a simple or column text object, pressing "Esc" will select the whole text object. You can then apply an attribute, say a color, and the whole text object is altered. This is often quicker than performing "Select all" ("Ctrl + A"). With text areas this method only works if all text areas of the story are selected. You can do this in the Selector Tool clicking and "Shift + clicking" on the different text areas to select them. But this method is only possible if the text areas are on a single page. If your text story flows over several pages and you want to change all the text, then it's necessary to "Select all" ("Ctrl + A"), and then apply the required attributes. Page 653 Copying/Pasting formatted text (RTF) You can copy "rich text" (as it's sometimes known) from other applications such as word processors or editors and paste into Xara Web Designer 7 Premium as text, and the fonts, margins, line spacing and text links will be preserved. This makes it dramatically easier to retain the style and appearance of your text. When you paste "Rich Text Format" (RTF) from other applications you are given the choice of pasting the text in as "Unformatted text" which means it will appear in the font and style at the cursor where you paste, or "Rich Text Format", i.e. it will retain the style of the source text. This also works the other way around. You can copy text in Web Designer Premium and paste into other applications that support rich text editing and the style (font, size, colors, margins etc) will be retained. This will only work if you select and copy a single text object or from a single text flow. Some applications, such as Microsoft Word, have a "Paste special" menu option that provides a wider range of paste options. These applications will sometimes allow you to choose the format of the pasted object (text or graphic). Page 654 Seeing fonts in use It is sometimes useful to see what fonts are used in your document, particularly if you are sharing files with other Web Designer Premium users who may not have the same fonts installed. For a complete list of fonts used in your document choose "File" > "Document info ". Any fonts that are used in the document but are not currently installed on your computer have not installed by them. Another way to see which fonts are used in your document is to just open the font menu of the Text Tool InfoBar. The top section shows fonts used in your document. Page 655 Font embedding Xara Web Designer 7 Premium stores the character shapes of all the fonts used in your document. This means if you give someone else your design file, or transfer the file to another computer, the text will still look exactly right, even if the correct fonts are not installed on that computer. But this only embeds the characters that are used in the document (the full font is not included). So on computers with the fonts missing, any text that is added in the missing fonts may be missing the correct character shapes. Page 656 Browser text compatibility It is a sad fact that different browsers display the same text slightly differently, usually at a slightly different size or line length (so for example 10pt text is not displayed at 10pt size but at the nearest whole pixel size instead (13 pixels). Xara Web Designer 7 Premium is designed to emulate the behavior of the most common browsers and adjusts intermediate sizes to be whole pixels, and adjusts the line lengths to closely emulate the text on Windows browsers. You can switch this adjustment off in the Options dialog, General tab (right click and choose Page Options or choose Options from the Utilities menu) by un-checking the 'Show Windows compatible text lengths ' option. Advanced note: If you're using Web Designer Premium or switch this compatibility option off, then if you enter any intermediate size, such as 13.6 pixels or 10pt, you will get text that is exactly, accurately, scaled to this size. But be warned that most web browsers will show this text as a slightly larger or smaller size than you see in Xara Web Designer 7 Premium. A second consequence of this browser (mis)behavior is that at small font sizes, there is a quite a large jump from one size to the next. So if you want a font size, say, between 9pix and 10pix, you can't have this. Most browsers cannot display an intermediate size (whether you use Points, ems, or any other unit type). So you will see Xara Web Designer 7 Premium text sizes jump from one size to the next as you resize text objects.) Page 657 The Fill Tool In this chapter Creating a graduated color fill Fill types Fill Tool InfoBar Flat fills Linear fills 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 Creating a graduated color fill The process of creating a different fill is almost identical for all the fill types: 1. Select the object or objects to which you want to apply the fill. 2. Select the Fill Tool ("F5") 3. Select the fill type from the dropdown menu 4. Click-drag across the object to create the fill. Or, drag one of the fill handles to adjust the fill size and position Xara Web Designer 7 Premium provides a smooth interactive live preview of the fill as you drag. This provides a number of advantages over traditional dialog-based Fill Tools. Not only does it require a lot fewer clicks, it's faster, and allows you to get the required start and end positions right first time. As you drag a fill arrow is created indicating the direction of the fill. Fill handles can be selected and dragged to adjust the position and angle of the fill. Coloring fills Select one of the fill handles and click a color on the Color line or bring up the Color editor and choose a new color. You can press "Tab" to alternate between the fill handles. Changing selection In the Fill Tool just clicking on an object will select it, and so it's not necessary to always go into the Selector Tool to select other objects. Page 658 Creating a graduated color fill The process of creating a different fill is almost identical for all the fill types: 1. Select the object or objects to which you want to apply the fill. 2. Select the Fill Tool ("F5") 3. Select the fill type from the dropdown menu 4. Click-drag across the object to create the fill. Or, drag one of the fill handles to adjust the fill size and position Xara Web Designer 7 Premium provides a smooth interactive live preview of the fill as you drag. This provides a number of advantages over traditional dialog-based Fill Tools. Not only does it require a lot fewer clicks, it's faster, and allows you to get the required start and end positions right first time. As you drag a fill arrow is created indicating the direction of the fill. Fill handles can be selected and dragged to adjust the position and angle of the fill. Coloring fills Select one of the fill handles and click a color on the Color line or bring up the Color editor and choose a new color. You can press "Tab" to alternate between the fill handles. Changing selection In the Fill Tool just clicking on an object will select it, and so it's not necessary to always go into the Selector Tool to select other objects. Page 659 Fill types Web Designer Premium has these types of color fill: Flat fills - the shape has an even color or tone over its surface. Linear fills - the color gradually changes from one color to another. Circular fills - the color change radiates out from a single point in a circular pattern. Elliptical fills - similar to circular fills except the change radiates out in an elliptical pattern. Conical fills - the color change rotates around a single point. The effect is of a cone lit from one side with the opposite side in another color. Diamond fills - similar to elliptical fills, except the fill is like a diamond. Three-color fills - shows three different colors as if spotlights were lighting the object. Four-color fills - the same as three-color fills, except four colors are possible. Bitmap fills - the object is filled with one or more tiled copies of a bitmap or photo. All photos you see in Xara Web Designer 7 Premium are bitmap filled shapes (normally rectangles of course). Any photo can be used, or any bitmap in the Bitmap or Fill galleries. Fractal clouds - produces a patchy random fill which is especially useful for clouds or mist. Fractal plasma - a patchy random fill which has more Page 660 contrast than a fractal cloud fill. The Fill Tool lets you apply these fill types to the selected object(s) and to edit and adjust the fills. Automatic select inside In the Fill Tool, an automatic "Select inside" is performed when you click on an object that is a part of a group, instead of selecting the group as a whole. This makes it easier for you to work on photos and fills inside groups. If you want to change the fill attribute of a group (which is not very likely), you need to select the group using the Selector Tool first. Page 661 Fill Tool InfoBar Fill Type Fill tiling Fill effect Bitmap name Fill handle/Resolution Handle color/Grain Fill type selects the type of fill. Selecting from this menu: with a selected object, applies the fill to the object; without a selected object, sets the default current fill type, which is then used for newly drawn objects. Fill tiling is used when applying bitmap and fractal fills. The options are described later in bitmap fills. Fill tiling changes the repetition of the fill effect. The options are: Simple-the fill is used only once, regardless of the size of the object. The area around the single 'tile' is transparent. Repeating/repeating tile-repeats the effect so that it fills the entire object. Repeating tile inverted-only available on fractal and bitmap fills. This is similar to repeating tile, but every other tile is inverted. This helps to hide the seams where the tiles join. A repeating elliptical fill inside an ellipse shape Fill effect is used for all fill types. It controls how the fill colors fade from the start color to the end color: Fade-fades between the two colors in a linear fashion Rainbow-blends along the shortest edge of the HSV color wheel. For example, a blend from yellow to cyan runs yellow-green-cyan. This option has no effect when the two colors are black, white or gray. Alt rainbow-similar to rainbow except the blend is along the longest edge of the color wheel. For example, yellow to cyan runs yellow-red-magenta-blue-cyan. Bitmap name displays a pop-down menu showing thumbnails of all the bitmaps in the Bitmap Gallery and is an easy way to select the required bitmap/photo for a bitmap fill. Fill Profile -you can change the rate of the color transition between the start and end of fills. This applies to all fill types except flat, three color, four color and bitmap (unless it's a contone colored bitmap). To change the profile of a fill: 1. Select the filled object. 2. On the Fill Tool InfoBar click Profile. This opens the Profile dialog box. 3. You either select a predefined profile from the dropdown list or drag the sliders to create a custom profile. The top option in the dropdown list (the straight line) creates a linear transition Page 662 between the start and end of the fill. Show three different black-to-white graduated color fills and the corresponding profile dialogs. The center, default, is a linear black-to-white transition. Fill handle -tells you if the start or end handle is selected. This field is blank for flat fills. Resolution (bitmap and fractal fills only)-shows the resolution of the bitmap (as long as you don't have a fill handle selected). You can type in a new resolution to change the size of the bitmap. Low resolutions show the individual pixels of the bitmap. You rarely need a resolution greater than 150 DPI, even for typeset output. 96 DPI is good enough for screen resolution. Fill handle color (except bitmap fills)-indicates the color applied to the selected fill handle. Page 663 Flat fills To apply or change a flat fill: 1. Select flat fill from the fill type menu. 2. Choose a color from the Color Line. The Color Line is described in Color handling . Page 664 Linear fills To apply a linear fill: 1. Select linear fill from the fill type menu (not necessary if the object currently has a flat fill). 2. Position the pointer where you want to start the fill (this can be outside the object). 3. Drag the mouse pointer to where you want the fill to end (again, this point can be outside the object). The arrow drawn on the selected object is called the fill arrow. It indicates the direction and extent of the fill. You can select either end of the arrow by clicking it. Moving the start or end handle of the fill To change the direction and extent of the fill: 1. Move the pointer over the handle you want to move. When over the handle, the pointer changes shape. 2. Drag the handle. Changing the colors in a fill To change a color in a fill: Drag & drop the color from the Color Line onto a fill handle (you do not have to select the handle first.) Or, drag & drop the color onto the object. Each fill has an imaginary center line halfway along the fill arrow. Dropping the color on the start handle side changes the start handle color, and the end handle side changes the end handle. Or, if one of the end handles is selected (it's shown highlighted) just click on a color. You can press "Tab" to select the other fill handle, and click the color required for the other end The Color Line is described in Color handling . Each method changes the color of one handle only; they do not change any other selected fill handles, or: 1. Select the required handle (or handles, also works with multiple objects). 2. Choose the required color from the Color Line. 3. This changes all selected fill handles. Page 665 Moving the start or end handle of the fill To change the direction and extent of the fill: 1. Move the pointer over the handle you want to move. When over the handle, the pointer changes shape. 2. Drag the handle. Changing the colors in a fill To change a color in a fill: Drag & drop the color from the Color Line onto a fill handle (you do not have to select the handle first.) Or, drag & drop the color onto the object. Each fill has an imaginary center line halfway along the fill arrow. Dropping the color on the start handle side changes the start handle color, and the end handle side changes the end handle. Or, if one of the end handles is selected (it's shown highlighted) just click on a color. You can press "Tab" to select the other fill handle, and click the color required for the other end The Color Line is described in Color handling . Each method changes the color of one handle only; they do not change any other selected fill handles, or: 1. Select the required handle (or handles, also works with multiple objects). 2. Choose the required color from the Color Line. 3. This changes all selected fill handles. Page 666 Changing the colors in a fill To change a color in a fill: Drag & drop the color from the Color Line onto a fill handle (you do not have to select the handle first.) Or, drag & drop the color onto the object. Each fill has an imaginary center line halfway along the fill arrow. Dropping the color on the start handle side changes the start handle color, and the end handle side changes the end handle. Or, if one of the end handles is selected (it's shown highlighted) just click on a color. You can press "Tab" to select the other fill handle, and click the color required for the other end The Color Line is described in Color handling . Each method changes the color of one handle only; they do not change any other selected fill handles, or: 1. Select the required handle (or handles, also works with multiple objects). 2. Choose the required color from the Color Line. 3. This changes all selected fill handles. Page 667 Circular fills For circular fills, applying the fill, moving handles and changing colors are the same as for linear fills. The start handle is the center of the fill. Circular fills are useful for creating highlight effects. Changing the height/width ratio of the object automatically changes a circular fill into an elliptical fill (see below). Page 668 Elliptical fills Applying an elliptical fill is similar to applying linear fills. As you drag the mouse pointer, you first create a circle with two end handles. You can then drag the end handles to create a suitable ellipse. " ?+ drag" preserves the aspect ratio of the fill. "Ctrl + drag" constrains rotation to the preset constrain angles. Moving handles and changing colors are the same as for linear fills. A quick way to apply a elliptical fill: "Shift + drag" to create a elliptical fill. Page 669 Conical fills When you apply a conical fill, the fill arrow displays as a semi-circle with two end handles. You can then rotate either end handle around the start handle to create suitable shading. The size of the semi-circle is irrelevant-it has no effect on the fill. "Ctrl + drag" constrains rotation to the preset constrain angles. You can also drag the center handle to change the position of the fill. Moving handles and changing colors are the same as for linear fills. Page 670 Diamond fills Applying diamond fills is similar to applying elliptical fills. As you drag the mouse pointer, the fill boundary appears as a square with two end handles. You can then drag the end handles to resize the diamond. "Shift + drag" unlocks the aspect ratio of the fill, allowing you to move the fill handles independently. "Ctrl + drag" constrains your selection to the preset constrain angles. Page 671 Three-color fills Three-color fills give the effect of three colored spotlights lighting the object. As you drag the mouse pointer, the fill displays as a triangle with three end handles. By default there is a 60° angle between the two fill arrows. "n+ drag" to create triangles with different angles to form the fill triangle you require. Unlike other three-handle fill types, three-color fills can have a different color applied to each handle (the center and the two end points). The object can contain a single (simple) or multiple instances (repeating) of the fill. Page 672 Four-color fills Four-color fills are similar to three-color fills and give the effect of four colored spotlights lighting the object. When you apply a four-color fill, the fill boundary displays as a square with four end handles. You can then drag the handles to scale and rotate the rectangles. "n+ drag" to create parallelograms instead of rectangles. Hold down Ctrl while dragging to constrain the rotation of the fill.. You can apply different colors to all four fill handles/lines. The object can contain a single (simple) or multiple instances (repeating) of the fill. Page 673 Bitmap fills Fill Type Fill Tiling Not used Bitmap name Resolution Not used The Bitmap Gallery is described in The Bitmap Gallery in the Photo Handling chapter, for the Fill Gallery see below . Bitmap fills are one of the most powerful fill types. It allows any photo or texture to be used as a fill for any shape and you have direct immediate control over the size, angle, position and tiling. You can color bitmap fills. You can use any type of bitmap as a fill, including JPEG photos, and alpha-channel (semi-transparent) bitmaps. When you import a photo file into Xara Web Designer 7 Premium (eg. a JPG or PNG file) it appears as a shape with a bitmap fill type. When such an object is selected the status line shows it as a "photo", but it is just the same as a shape that has had the photo applied as a bitmap fill. To fill a shape with a bitmap or photo fill, do one of the following: Drag any bitmap from the Bitmap Gallery or from your Windows File Explorer over any shape, hold "Shift" and drop, or Drag any fill from the Fill Gallery onto the shape (there is no need to hold "Shift" to drop in this case) Select 'Bitmap' from the left side drop down menu of the Fill Tool InfoBar, and then select the required bitmap from the dropdown menu of bitmap names (this only shows bitmaps that are or have been previously loaded). You can fill an object with single or multiple tiles (repetitions of the bitmap image). Single tile (photo) Repeating tile Repeat inverted-the tiles fit together perfectly. The fill has three handles. Use it for Resizing and re-positioning bitmap fills . An alternative way to set the size of the bitmap is to type in a resolution into the InfoBar field. You first have to un-select the fill handle by clicking anywhere on the image away from a fill handle, then just type a new dpi resolution. Replacing Bitmap Fills If a shape already contains a bitmap, or is a photo, then you can just drag and drop a new bitmap from any source, such as Windows Explorer, and it will replace the existing bitmap. The new image is 'best fitted' into the shape so that it just fits in. Doing this will also replace all other instances of that photo on the current page. Holding down Shift Page 674 while replacing a photo in this way causes the position, scale and rotation of the bitmap fill to be preserved. Bitmap coloring You can color any bitmap or photo fill by just clicking on a color on the Color Line (make sure no fill handles are selected, by just clicking on the image). This will create a Contone (technically a Duotone) which uses colors between black and the selected color. Alternatively right click on the object and choose Contone > Set Light Color or Contone > Make Black and White. You can also right click the color line and select either the 'Set Contone Light Color' or 'Set Contone Dark Color '. So, for example, to make a picture black and white, just requires you to click on the White color patch on the color line. To cancel any applied color, apply no color to either fill handle. This restores the bitmap to its original bitmap colors. The Resolution box on the InfoBar shows the resolution, which can be altered by moving the fill handles or typing in a value. Resizing and re-positioning bitmap fills Once the fill has been created, you can drag anywhere on the image to re-position the fill inside the shape. When you mouse over the outer fill handles the mouse pointer changes into a "rotate" mouse pointer. Dragging on these handles will stretch and rotate the bitmap fill with the current aspect ratio locked; hold down " n" while dragging to change the horizontal and vertical size independently and to skew the fill. The InfoBar shows you the resolution of the bitmap fill (you can adjust this, and thus the bitmap size, by entering a new value). An example To fill the ellipse on the left with the photo in the center; Page 675 1. Drag the photo or bitmap file from Windows Explorer (or from the Bitmap Gallery if it is already used in the document) over the ellipse, and drop it while holding down "Shift". The Fill Tool becomes the current tool. 2. You can now adjust the angle and size of the image by dragging on the Fill Handles. The above example has a simple shadow - see the chapter on the Shadow Tool for more information. Page 676 Replacing Bitmap Fills If a shape already contains a bitmap, or is a photo, then you can just drag and drop a new bitmap from any source, such as Windows Explorer, and it will replace the existing bitmap. The new image is 'best fitted' into the shape so that it just fits in. Doing this will also replace all other instances of that photo on the current page. Holding down Shift while replacing a photo in this way causes the position, scale and rotation of the bitmap fill to be preserved. Bitmap coloring You can color any bitmap or photo fill by just clicking on a color on the Color Line (make sure no fill handles are selected, by just clicking on the image). This will create a Contone (technically a Duotone) which uses colors between black and the selected color. Alternatively right click on the object and choose Contone > Set Light Color or Contone > Make Black and White. You can also right click the color line and select either the 'Set Contone Light Color' or 'Set Contone Dark Color '. So, for example, to make a picture black and white, just requires you to click on the White color patch on the color line. To cancel any applied color, apply no color to either fill handle. This restores the bitmap to its original bitmap colors. The Resolution box on the InfoBar shows the resolution, which can be altered by moving the fill handles or typing in a value. Resizing and re-positioning bitmap fills Once the fill has been created, you can drag anywhere on the image to re-position the fill inside the shape. When you mouse over the outer fill handles the mouse pointer changes into a "rotate" mouse pointer. Dragging on these handles will stretch and rotate the bitmap fill with the current aspect ratio locked; hold down " Å„" while dragging to change the horizontal and vertical size independently and to skew the fill. The InfoBar shows you the resolution of the bitmap fill (you can adjust this, and thus the bitmap size, by entering a new value). An example Page 677 To fill the ellipse on the left with the photo in the center; 1. Drag the photo or bitmap file from Windows Explorer (or from the Bitmap Gallery if it is already used in the document) over the ellipse, and drop it while holding down "Shift". The Fill Tool becomes the current tool. 2. You can now adjust the angle and size of the image by dragging on the Fill Handles. The above example has a simple shadow - see the chapter on the Shadow Tool for more information. Page 678 Bitmap coloring You can color any bitmap or photo fill by just clicking on a color on the Color Line (make sure no fill handles are selected, by just clicking on the image). This will create a Contone (technically a Duotone) which uses colors between black and the selected color. Alternatively right click on the object and choose Contone > Set Light Color or Contone > Make Black and White. You can also right click the color line and select either the 'Set Contone Light Color' or 'Set Contone Dark Color '. So, for example, to make a picture black and white, just requires you to click on the White color patch on the color line. To cancel any applied color, apply no color to either fill handle. This restores the bitmap to its original bitmap colors. The Resolution box on the InfoBar shows the resolution, which can be altered by moving the fill handles or typing in a value. Resizing and re-positioning bitmap fills Once the fill has been created, you can drag anywhere on the image to re-position the fill inside the shape. When you mouse over the outer fill handles the mouse pointer changes into a "rotate" mouse pointer. Dragging on these handles will stretch and rotate the bitmap fill with the current aspect ratio locked; hold down " Å„" while dragging to change the horizontal and vertical size independently and to skew the fill. The InfoBar shows you the resolution of the bitmap fill (you can adjust this, and thus the bitmap size, by entering a new value). An example To fill the ellipse on the left with the photo in the center; 1. Drag the photo or bitmap file from Windows Explorer (or from the Bitmap Gallery if it is already used in the document) over the ellipse, and drop it while holding down "Shift". The Fill Tool Page 679 becomes the current tool. 2. You can now adjust the angle and size of the image by dragging on the Fill Handles. The above example has a simple shadow - see the chapter on the Shadow Tool for more information. Page 680 Resizing and re-positioning bitmap fills Once the fill has been created, you can drag anywhere on the image to re-position the fill inside the shape. When you mouse over the outer fill handles the mouse pointer changes into a "rotate" mouse pointer. Dragging on these handles will stretch and rotate the bitmap fill with the current aspect ratio locked; hold down " Å„" while dragging to change the horizontal and vertical size independently and to skew the fill. The InfoBar shows you the resolution of the bitmap fill (you can adjust this, and thus the bitmap size, by entering a new value). An example To fill the ellipse on the left with the photo in the center; 1. Drag the photo or bitmap file from Windows Explorer (or from the Bitmap Gallery if it is already used in the document) over the ellipse, and drop it while holding down "Shift". The Fill Tool becomes the current tool. 2. You can now adjust the angle and size of the image by dragging on the Fill Handles. The above example has a simple shadow - see the chapter on the Shadow Tool for more information. Page 681 An example To fill the ellipse on the left with the photo in the center; 1. Drag the photo or bitmap file from Windows Explorer (or from the Bitmap Gallery if it is already used in the document) over the ellipse, and drop it while holding down "Shift". The Fill Tool becomes the current tool. 2. You can now adjust the angle and size of the image by dragging on the Fill Handles. The above example has a simple shadow - see the chapter on the Shadow Tool for more information. Page 682 Fractal fills Xara Web Designer 7 Premium supports two types of fractal fill which are mathematically created naturalistic fill patterns. They are great for simulating sky and clouds or other natural textures. Each time you create a new fractal fill a new pattern is created. To replace an existing fractal with a new pattern choose fractal from the fill menu again. The Grain control on the InfoBar provides control over the graininess of the pattern. Low values give a smooth flowing pattern, and high values give a grainy pattern. You can adjust the size and position of the fractal fill in the usual way by dragging and adjusting the fill handles. De-select the fill handles (click on the fill away from a handle) to show the above resolution and grain controls. Fractal clouds fill. On the left a grain of 1, on the right a grain of 50. Fractal plasma fill. On the left a grain of 5, on the right a grain of 50. Note the difference between grain and resolution. Grain controls the flow of the pattern. Resolution sets the size of the fractal bitmap and how noticeable the individual pixels are. You can change the start and end colors of a fractal fill. Select the center or outer handles and then apply a color using either the Color Line or Color Gallery . To cancel any applied color, apply no color. Page 683 Multi-stage color graduations Many of the graduated color fill types support multi-stage graduation fills, which means instead of just fading from one color to another, you can go through a number of different color fill stages. To add a new color stage to a graduation, select the Fill Tool so the fill arrow shows and then: Either drag a color onto the fill arrow where required. Or double click on the fill arrow to create a new fill handle, and now click a color or display the Color Editor. You can re-position the fill handles by dragging. With one fill handle selected pressing "Tab" will select the next. If the Color Editor is open, this is updated to reflect the new fill handle To remove a fill stage handle, just click on it to select, and press "Del". Page 684 The Fill Gallery The Fill Gallery contains bitmap textures suitable for use as bitmap fills. Only when you use a fill is it copied into the document. To display the Fill Gallery : To display the Fill Gallery click its tab in the galleries bar to the right of the Web Designer Premium window. Or you can toggle display of the Fill Gallery by choosing Utilities > Galleries > Fill Gallery or pressing "Shift + F11". Import - imports the selected bitmap into the document. A copy of the bitmap then appears in the Bitmap Gallery. You can also drag-and-drop the bitmap onto a blank part of the page. This is usually easier than clicking Import . Fill - imports and applies the selected bitmap as: A bitmap fill to the selected object (if any). Or, if no objects are selected, it inserts the bitmap into the document as a new photo object. You can also drag-and-drop the bitmap onto an object to apply a bitmap fill. Page 685 There are some differences between either dragging a bitmap from the Bitmap or Fill Gallery: When dragging bitmaps from the Fill Gallery and dropping on shapes to create a bitmap fill, the fill will be tiled and the bitmap won't be best-fitted into the shape. This different behavior to that seen when dragging from the Bitmap Gallery is because normally textures are applied from the Fill Gallery and these should normally be tiled and not best-fitted. Transp - (transparency) imports and applies the selected bitmap as: A transparent bitmap to the selected object (if any). Or sets the current transparency attribute. Get fills - download free fills from Xara. Background - set the selected fill as the page background. Remove - delete the selected fill or folder. Disc fills - add new fills from your hard drive or a CD. More - lets you select the size of the preview icons and whether full information about the bitmap is shown, as well as find and sort the fills. Stop downloading - if you have a slow connection and find getting fills from the Internet too slow, you can stop downloading them and then resume later. Find & Sort are described in the Document handling chapter. Document handling includes general information about galleries. Page 686 Shadows In this chapter 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 Page 687 The Shadow Tool The Shadow Tool (shortcut "Ctrl + F2") lets you apply, remove, and modify semi-transparent (or "soft") shadows. The transparency of soft shadows increases towards the edges, which gives a very realistic effect. Shadows are resolution independent so you can scale them without losing quality. No Shadow Shadow Types Shadow Blur Shadow Transparency Profile Shadow Position Xara Web Designer 7 Premium has three shadow types: Wall where the shadow is cast on a wall behind the object Floor where the object appears to be standing upright on a surface. Glow where the shadow is used to add a halo effect around the object The transparency of soft shadows increases towards the edges, which gives a very realistic effect. Shadows are resolution independent so you can scale them without losing quality. Page 688 Applying a shadow Applying a wall shadow To apply a wall shadow: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Wall button on the Shadow Tool InfoBar. 4. You can drag the shadow away from or towards the object to create more or less distance between the object and the imaginary wall. Alternatively to create a wall shadow you can: 1. Select the object. 2. Choose the Shadow Tool. 3. Drag from the center of the object in the direction of the shadow. Applying a floor shadow 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Floor button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size or radially to change the direction. Applying a glow effect Adding a glow or halo behind an object can create dramatic graphics. To create a glow effect: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Glow button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size of the glow. Blur the edges of the shadow This changes the size of the shadow. A small blur gives the effect of a sharp light source, a large blur, a diffused or distant light source. It is recommended that shadows are always blurred slightly as this is more realistic. To blur the shadow edge: 1. Select the object 2. Choose the Shadow Tool. Page 689 3. On the Shadow Tool InfoBar either drag the blur slider or type a value into the text box on the right. Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 690 Applying a wall shadow To apply a wall shadow: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Wall button on the Shadow Tool InfoBar. 4. You can drag the shadow away from or towards the object to create more or less distance between the object and the imaginary wall. Alternatively to create a wall shadow you can: 1. Select the object. 2. Choose the Shadow Tool. 3. Drag from the center of the object in the direction of the shadow. Applying a floor shadow 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Floor button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size or radially to change the direction. Applying a glow effect Adding a glow or halo behind an object can create dramatic graphics. To create a glow effect: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Glow button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size of the glow. Blur the edges of the shadow This changes the size of the shadow. A small blur gives the effect of a sharp light source, a large blur, a diffused or distant light source. It is recommended that shadows are always blurred slightly as this is more realistic. To blur the shadow edge: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar either drag the blur slider or type a value into the text box on the right. Page 691 Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 692 Applying a floor shadow 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Floor button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size or radially to change the direction. Applying a glow effect Adding a glow or halo behind an object can create dramatic graphics. To create a glow effect: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Glow button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size of the glow. Blur the edges of the shadow This changes the size of the shadow. A small blur gives the effect of a sharp light source, a large blur, a diffused or distant light source. It is recommended that shadows are always blurred slightly as this is more realistic. To blur the shadow edge: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar either drag the blur slider or type a value into the text box on the right. Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 693 Applying a glow effect Adding a glow or halo behind an object can create dramatic graphics. To create a glow effect: 1. Select the object. 2. Choose the Shadow Tool. 3. Select the Glow button on the Shadow Tool InfoBar. 4. Drag towards or away from the object to change the size of the glow. Blur the edges of the shadow This changes the size of the shadow. A small blur gives the effect of a sharp light source, a large blur, a diffused or distant light source. It is recommended that shadows are always blurred slightly as this is more realistic. To blur the shadow edge: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar either drag the blur slider or type a value into the text box on the right. Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 694 Blur the edges of the shadow This changes the size of the shadow. A small blur gives the effect of a sharp light source, a large blur, a diffused or distant light source. It is recommended that shadows are always blurred slightly as this is more realistic. To blur the shadow edge: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar either drag the blur slider or type a value into the text box on the right. Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 695 Change the transparency of the shadow A semi-transparent shadow is more realistic than a solid shadow. But you can change the transparency level of the shadow to suit your needs. To change the transparency: 1. Select the object 2. Choose the Shadow Tool. 3. On the Shadow Tool InfoBar, drag either the transparency slider or type a value into the text box on the right. Page 696 Changing the shadow color or fill effect After applying a shadow to an object, you can change the shadow's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. How to change the shadow color: For more on colors and the Color Line refer to Color handling . The easiest way is to drag & drop a color from the Color Line onto the shadow (make sure you drop the color onto the shadow and not the object). Alternatively, this method is slightly more complex, but you have full control over the color: 1. Select the shadow using the Selector Tool (make sure you select the shadow and not the object). 2. Use the Color Editor to edit the color. Page 697 Removing a shadow To remove a soft shadow: 1. Select the object 2. Choose the Shadow Tool. 3. Select the No shadow button on the Shadow Tool InfoBar. Page 698 Applying a shadow to several objects The result of applying a shadow depends on whether the objects are grouped: If the objects are grouped, overlapping shadows merge (they do not get darker if they overlap). If the objects are ungrouped, each object has a separate shadow. Overlapping areas of shadow are darker. If you have several shadowed objects selected, any changes apply to all the shadows. Page 699 Selecting objects using the Shadow Tool Before you can apply or edit a shadow on an object, you must first select that object. The regular way of selecting objects is to use the Selector Tool but you can also use the Shadow Tool, simply click on the object while in the Shadow Tool. Page 700 Copying shadows onto other objects Once you've got a shadow looking how you want it on one object, you can copy it onto other objects using "Paste attributes". Simply copy the object that has the shadow ("Edit" > "Copy"), select the object or objects you want to paste the shadow onto and choose "Edit" > "Paste attributes" . Page 701 Transparency The Transparency Tool lets you specify how much of the underlying colors and objects appears through an object. Shape Transparency type Tiling Bitmap name Profile Handle/Resolution Amount of transparency You have control over the level of transparency from fully opaque to fully transparent. Web Designer Premium goes further than other drawing packages by offering a wide range of different graduated transparencies. You can apply flat and graduated transparency to all types of objects including bitmaps. Some uses of transparency: Simulating water or glass. Anywhere you want objects to fade to parts of objects to fade or blend with the background. Clouds or mist-fractal transparencies are particularly good for this. Using the special type of transparency you can lighten, darken and apply special effects to objects and photos. Creating highlights and reflections. The windshield is created with multiple overlaid objects with different transparency. The reflection is 100% opaque white in the center fading in an elliptical fashion. In this chapter Applying flat transparency Applying graduated transparency Multi-stage graduated transparency Transparency types Enhance Profile Bitmaps Handle/resolution Applying transparency to several objects Page 702 Applying flat transparency It's called "flat" transparency because all parts of the objects have the same transparency, as opposed to graduated transparency. 1. Select the object or objects 2. Select the Transparency Tool ("F6") 3. Drag the transparency slider on the InfoBar Xara Web Designer 7 Premium provides live-preview. As you drag the transparency slider the objects on the document are changed so you can see the effect immediately. Applying graduated transparency Graduated transparency works in a very similar way to graduated color fills. You just drag on the objects in the Transparency Tool to create a fading transparency. You have a very similar range of transparency shapes, the simplest being linear, but you can also have circular, elliptical, conical, fractal and bitmap transparencies, and others. To create a graduated fade: 1. Select the object or objects 2. In the Transparency Tool, drag across the objects to create a linear fade across the object. 3. Select alternative transparency shapes from the dropdown menu on the InfoBar You can select and adjust the position and transparency strength using the "fill" handles shown on the object. Refer to Fills for more information on manipulating fill handles and the different fill shapes (in this case transparency shapes) Multi-stage graduated transparency Just as you can add multiple stages to a graduated fill, you can do the same with a graduated transparency. This allows you to fade, for example, from opaque to 50% transparent then back up to 25% transparent, back to opaque, etc. You can set the level of transparency at each stage, by selecting a handle and then adjusting the transparency slider. Add additional stages by double-clicking on the graduated transparency line then adjusting the slider. See the Fills chapter for more information on manipulating the handles. Transparency types The most common type of transparency, and the only type that many other applications understand is called "Mix transparency". But Xara Web Designer 7 Premium supports different type that affect the objects in different ways. Web Designer Premium has these types of transparency: Mix The color of the object mixes with the color of underlying objects. The effect is similar to spraying a thin coat of color (or paint) over underlying objects. Stained glass The effect is similar to viewing underlying objects through colored glass. It is useful for the simulation of glass and selectively darkening objects. The color of the object with Stained Glass applied: White - no effect on the colors of underlying objects. Gray & Black - darkens the colors of underlying objects. Other colors - darken underlying colors towards saturated color (light red over light red results in mid-red: green over red results in black). If you want to use a colored object to darken underlying colors, you may find Darken transparency type easier to use. Page 703 Technically the process is subtractive in RGB color space. Bleach Bleach has no clear analogy in the physical world. It is useful for highlights when the light source is not white. The color of the object with Bleach applied: Gray & White - lightens the colors in underlying objects. Black - no effect on the colors of underlying objects. Other colors - lighten underlying colors towards unsaturated color. (Light-red over light-red gives a pale-red: green over red gives yellow.) If you want to use a colored object to lighten but not color-shift underlying colors, you may find Lighten transparency type easier to use. Technically the process is additive in RGB color space. Contrast Usually you would use C on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it increases the contrast of underlying colors (make them brighter or duller).The color of the object with Contrast applied: Gray (below a 50% tint of black) & White - increase contrast (compress the color range) to make the underlying colors brighter. Gray (above a 50% tint of black) & Black - make underlying colors duller (towards gray). Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the contrast of underlying objects. Saturation Usually you would use Saturation on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it makes the colors of underlying objects brighter or duller. The color of the object with Saturation applied: Gray (below a 50% tint of black) & White - increases saturation in the colors of underlying objects towards pure color. Gray (above a 50% tint of black) & Black - reduces saturation (colorization) towards black. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the color saturation of underlying objects. Darken/Lighten Darken/Lighten is useful for making underlying objects darker or lighter. Usually you would use it on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Darken/Lighten are grayscale versions of Stained Glass/Bleach transparency types. The color of the object with Darken/Lighten applied: White - no effect on the colors of underlying objects. Gray & Black - darkens/lightens the colors of underlying objects. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then darken/lighten the colors of underlying objects. Brightness Depending on the color chosen, Brightness makes the colors of underlying objects lighter or darker. The color of the object with Brightness applied: Gray (below a 50% tint of black) & White - makes the colors of underlying objects lighter. White has maximum effect Gray (above a 50% tint of black) & Black - makes the colors of underlying objects darker. Black has maximum effect. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then lighten or darken the colors of underlying objects. Luminosity Luminosity uses the grayscale equivalent of the color to control the luminosity (or Value) of underlying objects. Note that Luminosity has no effect on gray, white or black underlying objects. The color of the object with Luminosity applied: Page 704 Gray & White - increase the luminosity of underlying objects. White has the greatest effect, producing saturated color. Black - remains as a black object. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase the luminosity of underlying objects. Hue Hue is useful for color-shifting underlying objects. Its action is most easily understood using the HSV color model. The color of the object with Hue applied: Gray, White, & Black - has no effect. These colors lie at the center of the color wheel and so have no hue. If the underlying color is gray, white, or black - Hue transparency type has no effect. Other colors - replace the Hue of the underlying color with the Hue of this object. Use the Saturation and Value of the underlying color. For more information on HSV refer to Color handling . For all these, the slider controls the amount of transparency from opaque (0% transparent) to fully (100%) transparent. Applying a flat transparency to an object also applies transparency to the line around the object. It is not possible to set different transparencies, but you can remove the line by setting it to no color or by selecting "None" as the outline width. To create an object with a transparent fill and a non-transparent line, use a non-flat transparency type. For more information on colors see Color Handling . Enhance See Enhance below for more information on Enhance transparency. Page 705 Applying flat transparency It's called "flat" transparency because all parts of the objects have the same transparency, as opposed to graduated transparency. 1. Select the object or objects 2. Select the Transparency Tool ("F6") 3. Drag the transparency slider on the InfoBar Xara Web Designer 7 Premium provides live-preview. As you drag the transparency slider the objects on the document are changed so you can see the effect immediately. Applying graduated transparency Graduated transparency works in a very similar way to graduated color fills. You just drag on the objects in the Transparency Tool to create a fading transparency. You have a very similar range of transparency shapes, the simplest being linear, but you can also have circular, elliptical, conical, fractal and bitmap transparencies, and others. To create a graduated fade: 1. Select the object or objects 2. In the Transparency Tool, drag across the objects to create a linear fade across the object. 3. Select alternative transparency shapes from the dropdown menu on the InfoBar You can select and adjust the position and transparency strength using the "fill" handles shown on the object. Refer to Fills for more information on manipulating fill handles and the different fill shapes (in this case transparency shapes) Multi-stage graduated transparency Just as you can add multiple stages to a graduated fill, you can do the same with a graduated transparency. This allows you to fade, for example, from opaque to 50% transparent then back up to 25% transparent, back to opaque, etc. You can set the level of transparency at each stage, by selecting a handle and then adjusting the transparency slider. Add additional stages by double-clicking on the graduated transparency line then adjusting the slider. See the Fills chapter for more information on manipulating the handles. Transparency types The most common type of transparency, and the only type that many other applications understand is called "Mix transparency". But Xara Web Designer 7 Premium supports different type that affect the objects in different ways. Web Designer Premium has these types of transparency: Mix The color of the object mixes with the color of underlying objects. The effect is similar to spraying a thin coat of color (or paint) over underlying objects. Stained glass The effect is similar to viewing underlying objects through colored glass. It is useful for the simulation of glass and selectively darkening objects. The color of the object with Stained Glass applied: White - no effect on the colors of underlying objects. Gray & Black - darkens the colors of underlying objects. Other colors - darken underlying colors towards saturated color (light red over light red results in mid-red: green over red results in black). If you want to use a colored object to darken Page 706 underlying colors, you may find Darken transparency type easier to use. Technically the process is subtractive in RGB color space. Bleach Bleach has no clear analogy in the physical world. It is useful for highlights when the light source is not white. The color of the object with Bleach applied: Gray & White - lightens the colors in underlying objects. Black - no effect on the colors of underlying objects. Other colors - lighten underlying colors towards unsaturated color. (Light-red over light-red gives a pale-red: green over red gives yellow.) If you want to use a colored object to lighten but not color-shift underlying colors, you may find Lighten transparency type easier to use. Technically the process is additive in RGB color space. Contrast Usually you would use C on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it increases the contrast of underlying colors (make them brighter or duller).The color of the object with Contrast applied: Gray (below a 50% tint of black) & White - increase contrast (compress the color range) to make the underlying colors brighter. Gray (above a 50% tint of black) & Black - make underlying colors duller (towards gray). Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the contrast of underlying objects. Saturation Usually you would use Saturation on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it makes the colors of underlying objects brighter or duller. The color of the object with Saturation applied: Gray (below a 50% tint of black) & White - increases saturation in the colors of underlying objects towards pure color. Gray (above a 50% tint of black) & Black - reduces saturation (colorization) towards black. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the color saturation of underlying objects. Darken/Lighten Darken/Lighten is useful for making underlying objects darker or lighter. Usually you would use it on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Darken/Lighten are grayscale versions of Stained Glass/Bleach transparency types. The color of the object with Darken/Lighten applied: White - no effect on the colors of underlying objects. Gray & Black - darkens/lightens the colors of underlying objects. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then darken/lighten the colors of underlying objects. Brightness Depending on the color chosen, Brightness makes the colors of underlying objects lighter or darker. The color of the object with Brightness applied: Gray (below a 50% tint of black) & White - makes the colors of underlying objects lighter. White has maximum effect Gray (above a 50% tint of black) & Black - makes the colors of underlying objects darker. Black has maximum effect. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then lighten or darken the colors of underlying objects. Luminosity Luminosity uses the grayscale equivalent of the color to control the luminosity (or Value) of underlying objects. Note that Luminosity has no effect on gray, white or black underlying objects. The color of the Page 707 object with Luminosity applied: Gray & White - increase the luminosity of underlying objects. White has the greatest effect, producing saturated color. Black - remains as a black object. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase the luminosity of underlying objects. Hue Hue is useful for color-shifting underlying objects. Its action is most easily understood using the HSV color model. The color of the object with Hue applied: Gray, White, & Black - has no effect. These colors lie at the center of the color wheel and so have no hue. If the underlying color is gray, white, or black - Hue transparency type has no effect. Other colors - replace the Hue of the underlying color with the Hue of this object. Use the Saturation and Value of the underlying color. For more information on HSV refer to Color handling . For all these, the slider controls the amount of transparency from opaque (0% transparent) to fully (100%) transparent. Applying a flat transparency to an object also applies transparency to the line around the object. It is not possible to set different transparencies, but you can remove the line by setting it to no color or by selecting "None" as the outline width. To create an object with a transparent fill and a non-transparent line, use a non-flat transparency type. For more information on colors see Color Handling . Enhance See Enhance below for more information on Enhance transparency. Page 708 Applying graduated transparency Graduated transparency works in a very similar way to graduated color fills. You just drag on the objects in the Transparency Tool to create a fading transparency. You have a very similar range of transparency shapes, the simplest being linear, but you can also have circular, elliptical, conical, fractal and bitmap transparencies, and others. To create a graduated fade: 1. Select the object or objects 2. In the Transparency Tool, drag across the objects to create a linear fade across the object. 3. Select alternative transparency shapes from the dropdown menu on the InfoBar You can select and adjust the position and transparency strength using the "fill" handles shown on the object. Refer to Fills for more information on manipulating fill handles and the different fill shapes (in this case transparency shapes) Multi-stage graduated transparency Just as you can add multiple stages to a graduated fill, you can do the same with a graduated transparency. This allows you to fade, for example, from opaque to 50% transparent then back up to 25% transparent, back to opaque, etc. You can set the level of transparency at each stage, by selecting a handle and then adjusting the transparency slider. Add additional stages by double-clicking on the graduated transparency line then adjusting the slider. See the Fills chapter for more information on manipulating the handles. Transparency types The most common type of transparency, and the only type that many other applications understand is called "Mix transparency". But Xara Web Designer 7 Premium supports different type that affect the objects in different ways. Web Designer Premium has these types of transparency: Mix The color of the object mixes with the color of underlying objects. The effect is similar to spraying a thin coat of color (or paint) over underlying objects. Stained glass The effect is similar to viewing underlying objects through colored glass. It is useful for the simulation of glass and selectively darkening objects. The color of the object with Stained Glass applied: White - no effect on the colors of underlying objects. Gray & Black - darkens the colors of underlying objects. Other colors - darken underlying colors towards saturated color (light red over light red results in mid-red: green over red results in black). If you want to use a colored object to darken underlying colors, you may find Darken transparency type easier to use. Technically the process is subtractive in RGB color space. Bleach Bleach has no clear analogy in the physical world. It is useful for highlights when the light source is not white. The color of the object with Bleach applied: Gray & White - lightens the colors in underlying objects. Black - no effect on the colors of underlying objects. Other colors - lighten underlying colors towards unsaturated color. (Light-red over light-red gives a pale-red: green over red gives yellow.) If you want to use a colored object to lighten but not color-shift underlying colors, you may find Lighten transparency type easier to use. Page 709 Technically the process is additive in RGB color space. Contrast Usually you would use C on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it increases the contrast of underlying colors (make them brighter or duller).The color of the object with Contrast applied: Gray (below a 50% tint of black) & White - increase contrast (compress the color range) to make the underlying colors brighter. Gray (above a 50% tint of black) & Black - make underlying colors duller (towards gray). Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the contrast of underlying objects. Saturation Usually you would use Saturation on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it makes the colors of underlying objects brighter or duller. The color of the object with Saturation applied: Gray (below a 50% tint of black) & White - increases saturation in the colors of underlying objects towards pure color. Gray (above a 50% tint of black) & Black - reduces saturation (colorization) towards black. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the color saturation of underlying objects. Darken/Lighten Darken/Lighten is useful for making underlying objects darker or lighter. Usually you would use it on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Darken/Lighten are grayscale versions of Stained Glass/Bleach transparency types. The color of the object with Darken/Lighten applied: White - no effect on the colors of underlying objects. Gray & Black - darkens/lightens the colors of underlying objects. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then darken/lighten the colors of underlying objects. Brightness Depending on the color chosen, Brightness makes the colors of underlying objects lighter or darker. The color of the object with Brightness applied: Gray (below a 50% tint of black) & White - makes the colors of underlying objects lighter. White has maximum effect Gray (above a 50% tint of black) & Black - makes the colors of underlying objects darker. Black has maximum effect. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then lighten or darken the colors of underlying objects. Luminosity Luminosity uses the grayscale equivalent of the color to control the luminosity (or Value) of underlying objects. Note that Luminosity has no effect on gray, white or black underlying objects. The color of the object with Luminosity applied: Gray & White - increase the luminosity of underlying objects. White has the greatest effect, producing saturated color. Black - remains as a black object. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase the luminosity of underlying objects. Hue Hue is useful for color-shifting underlying objects. Its action is most easily understood using the HSV color model. The color of the object with Hue applied: Gray, White, & Black - has no effect. These colors lie at the center of the color wheel and so Page 710 have no hue. If the underlying color is gray, white, or black - Hue transparency type has no effect. Other colors - replace the Hue of the underlying color with the Hue of this object. Use the Saturation and Value of the underlying color. For more information on HSV refer to Color handling . For all these, the slider controls the amount of transparency from opaque (0% transparent) to fully (100%) transparent. Applying a flat transparency to an object also applies transparency to the line around the object. It is not possible to set different transparencies, but you can remove the line by setting it to no color or by selecting "None" as the outline width. To create an object with a transparent fill and a non-transparent line, use a non-flat transparency type. For more information on colors see Color Handling . Enhance See Enhance below for more information on Enhance transparency. Page 711 Multi-stage graduated transparency Just as you can add multiple stages to a graduated fill, you can do the same with a graduated transparency. This allows you to fade, for example, from opaque to 50% transparent then back up to 25% transparent, back to opaque, etc. You can set the level of transparency at each stage, by selecting a handle and then adjusting the transparency slider. Add additional stages by double-clicking on the graduated transparency line then adjusting the slider. See the Fills chapter for more information on manipulating the handles. Transparency types The most common type of transparency, and the only type that many other applications understand is called "Mix transparency". But Xara Web Designer 7 Premium supports different type that affect the objects in different ways. Web Designer Premium has these types of transparency: Mix The color of the object mixes with the color of underlying objects. The effect is similar to spraying a thin coat of color (or paint) over underlying objects. Stained glass The effect is similar to viewing underlying objects through colored glass. It is useful for the simulation of glass and selectively darkening objects. The color of the object with Stained Glass applied: White - no effect on the colors of underlying objects. Gray & Black - darkens the colors of underlying objects. Other colors - darken underlying colors towards saturated color (light red over light red results in mid-red: green over red results in black). If you want to use a colored object to darken underlying colors, you may find Darken transparency type easier to use. Technically the process is subtractive in RGB color space. Bleach Bleach has no clear analogy in the physical world. It is useful for highlights when the light source is not white. The color of the object with Bleach applied: Gray & White - lightens the colors in underlying objects. Black - no effect on the colors of underlying objects. Other colors - lighten underlying colors towards unsaturated color. (Light-red over light-red gives a pale-red: green over red gives yellow.) If you want to use a colored object to lighten but not color-shift underlying colors, you may find Lighten transparency type easier to use. Technically the process is additive in RGB color space. Contrast Usually you would use C on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it increases the contrast of underlying colors (make them brighter or duller).The color of the object with Contrast applied: Gray (below a 50% tint of black) & White - increase contrast (compress the color range) to make the underlying colors brighter. Gray (above a 50% tint of black) & Black - make underlying colors duller (towards gray). Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the contrast of underlying objects. Saturation Usually you would use Saturation on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it makes the colors of underlying Page 712 objects brighter or duller. The color of the object with Saturation applied: Gray (below a 50% tint of black) & White - increases saturation in the colors of underlying objects towards pure color. Gray (above a 50% tint of black) & Black - reduces saturation (colorization) towards black. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the color saturation of underlying objects. Darken/Lighten Darken/Lighten is useful for making underlying objects darker or lighter. Usually you would use it on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Darken/Lighten are grayscale versions of Stained Glass/Bleach transparency types. The color of the object with Darken/Lighten applied: White - no effect on the colors of underlying objects. Gray & Black - darkens/lightens the colors of underlying objects. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then darken/lighten the colors of underlying objects. Brightness Depending on the color chosen, Brightness makes the colors of underlying objects lighter or darker. The color of the object with Brightness applied: Gray (below a 50% tint of black) & White - makes the colors of underlying objects lighter. White has maximum effect Gray (above a 50% tint of black) & Black - makes the colors of underlying objects darker. Black has maximum effect. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then lighten or darken the colors of underlying objects. Luminosity Luminosity uses the grayscale equivalent of the color to control the luminosity (or Value) of underlying objects. Note that Luminosity has no effect on gray, white or black underlying objects. The color of the object with Luminosity applied: Gray & White - increase the luminosity of underlying objects. White has the greatest effect, producing saturated color. Black - remains as a black object. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase the luminosity of underlying objects. Hue Hue is useful for color-shifting underlying objects. Its action is most easily understood using the HSV color model. The color of the object with Hue applied: Gray, White, & Black - has no effect. These colors lie at the center of the color wheel and so have no hue. If the underlying color is gray, white, or black - Hue transparency type has no effect. Other colors - replace the Hue of the underlying color with the Hue of this object. Use the Saturation and Value of the underlying color. For more information on HSV refer to Color handling . For all these, the slider controls the amount of transparency from opaque (0% transparent) to fully (100%) transparent. Applying a flat transparency to an object also applies transparency to the line around the object. It is not possible to set different transparencies, but you can remove the line by setting it to no color or by selecting "None" as the outline width. To create an object with a transparent fill and a non-transparent line, use a non-flat transparency type. For more information on colors see Color Handling Page 713 . Enhance See Enhance below for more information on Enhance transparency. Page 714 Transparency types The most common type of transparency, and the only type that many other applications understand is called "Mix transparency". But Xara Web Designer 7 Premium supports different type that affect the objects in different ways. Web Designer Premium has these types of transparency: Mix The color of the object mixes with the color of underlying objects. The effect is similar to spraying a thin coat of color (or paint) over underlying objects. Stained glass The effect is similar to viewing underlying objects through colored glass. It is useful for the simulation of glass and selectively darkening objects. The color of the object with Stained Glass applied: White - no effect on the colors of underlying objects. Gray & Black - darkens the colors of underlying objects. Other colors - darken underlying colors towards saturated color (light red over light red results in mid-red: green over red results in black). If you want to use a colored object to darken underlying colors, you may find Darken transparency type easier to use. Technically the process is subtractive in RGB color space. Bleach Bleach has no clear analogy in the physical world. It is useful for highlights when the light source is not white. The color of the object with Bleach applied: Gray & White - lightens the colors in underlying objects. Black - no effect on the colors of underlying objects. Other colors - lighten underlying colors towards unsaturated color. (Light-red over light-red gives a pale-red: green over red gives yellow.) If you want to use a colored object to lighten but not color-shift underlying colors, you may find Lighten transparency type easier to use. Technically the process is additive in RGB color space. Contrast Usually you would use C on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it increases the contrast of underlying colors (make them brighter or duller).The color of the object with Contrast applied: Gray (below a 50% tint of black) & White - increase contrast (compress the color range) to make the underlying colors brighter. Gray (above a 50% tint of black) & Black - make underlying colors duller (towards gray). Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the contrast of underlying objects. Saturation Usually you would use Saturation on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Depending on the color chosen, it makes the colors of underlying objects brighter or duller. The color of the object with Saturation applied: Gray (below a 50% tint of black) & White - increases saturation in the colors of underlying objects towards pure color. Gray (above a 50% tint of black) & Black - reduces saturation (colorization) towards black. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase or decrease the color saturation of underlying objects. Darken/Lighten Darken/Lighten is useful for making underlying objects darker or lighter. Usually you would use it on a separate object to modify the color of underlaying objects (that is, you would use an object as a filter). Darken/Lighten are grayscale versions of Stained Glass/Bleach transparency types. The color of the Page 715 object with Darken/Lighten applied: White - no effect on the colors of underlying objects. Gray & Black - darkens/lightens the colors of underlying objects. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then darken/lighten the colors of underlying objects. Brightness Depending on the color chosen, Brightness makes the colors of underlying objects lighter or darker. The color of the object with Brightness applied: Gray (below a 50% tint of black) & White - makes the colors of underlying objects lighter. White has maximum effect Gray (above a 50% tint of black) & Black - makes the colors of underlying objects darker. Black has maximum effect. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then lighten or darken the colors of underlying objects. Luminosity Luminosity uses the grayscale equivalent of the color to control the luminosity (or Value) of underlying objects. Note that Luminosity has no effect on gray, white or black underlying objects. The color of the object with Luminosity applied: Gray & White - increase the luminosity of underlying objects. White has the greatest effect, producing saturated color. Black - remains as a black object. Other colors - convert the color to the equivalent shade of gray. (Yellow gives light gray, Red dark gray.) Then increase the luminosity of underlying objects. Hue Hue is useful for color-shifting underlying objects. Its action is most easily understood using the HSV color model. The color of the object with Hue applied: Gray, White, & Black - has no effect. These colors lie at the center of the color wheel and so have no hue. If the underlying color is gray, white, or black - Hue transparency type has no effect. Other colors - replace the Hue of the underlying color with the Hue of this object. Use the Saturation and Value of the underlying color. For more information on HSV refer to Color handling . For all these, the slider controls the amount of transparency from opaque (0% transparent) to fully (100%) transparent. Applying a flat transparency to an object also applies transparency to the line around the object. It is not possible to set different transparencies, but you can remove the line by setting it to no color or by selecting "None" as the outline width. To create an object with a transparent fill and a non-transparent line, use a non-flat transparency type. For more information on colors see Color Handling . Enhance See Enhance below for more information on Enhance transparency. Page 716 Enhance Enhance transparency allows you to modify any part of your design using the Enhance Photo Tool, just as if it was a photo. For example you can draw a shape over any part of your design, apply enhance transparency to it and then adjust the brightness of just the area of your design which is covered by the shape. Applying Enhance transparency To apply enhance transparency:1. Draw or select the shape to which you want to apply the enhance transparency effect. 2. Go into the Transparency Tool and select "Enhance" from the transparency type list on the infobar. 3. The shape seems to have disappeared from your page! That's because it will only apply enhancements to objects underneath it, and you've yet to specify the enhancements it will apply. The object should still be selected however. 4. Switch into the Photo Enhance Tool. Turn up the brightness using the control on the infobar. Now you can see that the area covered by your shape is brightened compared to the area outside the shape. 5. You can adjust brightness, contrast, saturation and temperature. 6. Move your shape around, or transform it and it always applies the photo enhancement(s) to the area underneath the shape. Normally you'll also want to apply some feathering to the shape using the Feather Tool , to soften the edges of your shape and blend it into your design. Photo editing with Enhance transparency When you apply enhance transparency as described above, the shape remains as an independent object that is not tied to any photos or other objects in your design (unless you go on to manually group it with other objects of course). Because you will most commonly want to use this effect when editing photos, there is a better way to use Enhance transparency which is more suited to working with photos. To apply enhance transparency to part of a photo, select the photo, go into Mask mode Page 717 and draw around the area of the photo you want to modify. Then go to the Photo Enhance Tool and start to modify the photo using the controls on the infobar. The mask shape is converted into a shape with enhance transparency applied. The shape is also grouped with the photo, to form a Photo Group . This means as you move or otherwise transform the photo, the enhanced shapes move/transform with it. The enhance shape is also clipped to the edges of the photo. For more information on using Enhance transparency with photos, see the Photo Tool chapter. Note that you can't apply the Blur/sharpen effect to enhance transparent objects, except if they are applied as part of a Photo Group, as described above. Profile You can change the rate of change of transition between the start and end of transparencies. This applies to all single stage graduated transparency types except three point and four point (where the option is not available) To change the profile of a transparency: 1. Select the object. 2. On the Transparency Tool InfoBar click Profile. This opens the Profile dialog. 3. You either select a predefined profile from the dropdown list or drag the sliders to create a custom profile. The top option in the dropdown list (the straight line) creates a linear transition between the start and end of the transparency. Bitmaps Bitmap & Fill Galleries are described in Photo Handling and Fills . When you select a transparency type of Bitmap, a default bitmap is initially used. Click on Bitmap Name in the transparency InfoBar, or use the Bitmap or Fill Galleries to change the bitmap used (click the Transp button in the gallery or drag-and-drop from the gallery). By default, the lighter colors in a bitmap are the most transparent (you can, of course, alter the relative amounts of transparency later). Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 718 Applying Enhance transparency To apply enhance transparency:1. Draw or select the shape to which you want to apply the enhance transparency effect. 2. Go into the Transparency Tool and select "Enhance" from the transparency type list on the infobar. 3. The shape seems to have disappeared from your page! That's because it will only apply enhancements to objects underneath it, and you've yet to specify the enhancements it will apply. The object should still be selected however. 4. Switch into the Photo Enhance Tool. Turn up the brightness using the control on the infobar. Now you can see that the area covered by your shape is brightened compared to the area outside the shape. 5. You can adjust brightness, contrast, saturation and temperature. 6. Move your shape around, or transform it and it always applies the photo enhancement(s) to the area underneath the shape. Normally you'll also want to apply some feathering to the shape using the Feather Tool , to soften the edges of your shape and blend it into your design. Photo editing with Enhance transparency When you apply enhance transparency as described above, the shape remains as an independent object that is not tied to any photos or other objects in your design (unless you go on to manually group it with other objects of course). Because you will most commonly want to use this effect when editing photos, there is a better way to use Enhance transparency which is more suited to working with photos. To apply enhance transparency to part of a photo, select the photo, go into Mask mode and draw around the area of the photo you want to modify. Then go to the Photo Enhance Tool and start to modify the photo using the controls on the infobar. The mask shape is converted into a shape with enhance transparency applied. The shape is also grouped with the photo, to form a Photo Group . This means as you move or otherwise transform the photo, the enhanced shapes move/transform with it. The enhance shape is also clipped to the edges of the photo. For more information on using Enhance transparency with photos, see the Photo Tool chapter. Note that you can't apply the Blur/sharpen effect to enhance transparent objects, except if they are applied as part of a Photo Group, as described above. Profile You can change the rate of change of transition between the start and end of transparencies. This applies to all single stage graduated transparency types except three point and four point (where the option is not available) To change the profile of a transparency: 1. Select the object. 2. On the Transparency Tool InfoBar click Profile. This opens the Profile dialog. 3. You either select a predefined profile from the dropdown list or drag the sliders to create a custom profile. The top option in the dropdown list (the straight line) creates a linear transition between the start and end of the transparency. Bitmaps Page 719 Bitmap & Fill Galleries are described in Photo Handling and Fills . When you select a transparency type of Bitmap, a default bitmap is initially used. Click on Bitmap Name in the transparency InfoBar, or use the Bitmap or Fill Galleries to change the bitmap used (click the Transp button in the gallery or drag-and-drop from the gallery). By default, the lighter colors in a bitmap are the most transparent (you can, of course, alter the relative amounts of transparency later). Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 720 Photo editing with Enhance transparency When you apply enhance transparency as described above, the shape remains as an independent object that is not tied to any photos or other objects in your design (unless you go on to manually group it with other objects of course). Because you will most commonly want to use this effect when editing photos, there is a better way to use Enhance transparency which is more suited to working with photos. To apply enhance transparency to part of a photo, select the photo, go into Mask mode and draw around the area of the photo you want to modify. Then go to the Photo Enhance Tool and start to modify the photo using the controls on the infobar. The mask shape is converted into a shape with enhance transparency applied. The shape is also grouped with the photo, to form a Photo Group . This means as you move or otherwise transform the photo, the enhanced shapes move/transform with it. The enhance shape is also clipped to the edges of the photo. For more information on using Enhance transparency with photos, see the Photo Tool chapter. Note that you can't apply the Blur/sharpen effect to enhance transparent objects, except if they are applied as part of a Photo Group, as described above. Profile You can change the rate of change of transition between the start and end of transparencies. This applies to all single stage graduated transparency types except three point and four point (where the option is not available) To change the profile of a transparency: 1. Select the object. 2. On the Transparency Tool InfoBar click Profile. This opens the Profile dialog. 3. You either select a predefined profile from the dropdown list or drag the sliders to create a custom profile. The top option in the dropdown list (the straight line) creates a linear transition between the start and end of the transparency. Bitmaps Bitmap & Fill Galleries are described in Photo Handling and Fills . When you select a transparency type of Bitmap, a default bitmap is initially used. Click on Bitmap Name in the transparency InfoBar, or use the Bitmap or Fill Galleries to change the bitmap used (click the Transp button in the gallery or drag-and-drop from the gallery). By default, the lighter colors in a bitmap are the most transparent (you can, of course, alter the relative amounts of transparency later). Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 721 Profile You can change the rate of change of transition between the start and end of transparencies. This applies to all single stage graduated transparency types except three point and four point (where the option is not available) To change the profile of a transparency: 1. Select the object. 2. On the Transparency Tool InfoBar click Profile. This opens the Profile dialog. 3. You either select a predefined profile from the dropdown list or drag the sliders to create a custom profile. The top option in the dropdown list (the straight line) creates a linear transition between the start and end of the transparency. Bitmaps Bitmap & Fill Galleries are described in Photo Handling and Fills . When you select a transparency type of Bitmap, a default bitmap is initially used. Click on Bitmap Name in the transparency InfoBar, or use the Bitmap or Fill Galleries to change the bitmap used (click the Transp button in the gallery or drag-and-drop from the gallery). By default, the lighter colors in a bitmap are the most transparent (you can, of course, alter the relative amounts of transparency later). Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 722 Bitmaps Bitmap & Fill Galleries are described in Photo Handling and Fills . When you select a transparency type of Bitmap, a default bitmap is initially used. Click on Bitmap Name in the transparency InfoBar, or use the Bitmap or Fill Galleries to change the bitmap used (click the Transp button in the gallery or drag-and-drop from the gallery). By default, the lighter colors in a bitmap are the most transparent (you can, of course, alter the relative amounts of transparency later). Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 723 Handle/resolution If you have a handle selected, this box tells you what handle it is. With no handles selected, and when using a bitmap transparency, it controls the DPI. Page 724 Applying transparency to several objects If you group objects and apply transparency, the whole group is treated as one object and the entire group is made transparent. But if the objects are not grouped and you apply transparency, each individual object is given a separate transparency and you get an entirely different effect when the objects are overlaid. Individual transparency (left) or group transparency (right) Mixing individual and group transparencies You can combine the methods above to create complex transparency combinations. For example you could set an object to 50% transparency, then group it and apply a transparency to the group as well. You are also able to apply a transparency to a group first, and then later apply attributes to individual objects within a group. Just hold down "Ctrl", click the individual object and change its attributes. Group transparency on blends For more on blends see Blends. When adding a transparency to a Blend object, the transparency will be applied to the blend as a whole. It is treated like group transparency. If you want the transparency to be applied to each individual step of the blend, first make the objects transparent, and then blend. Page 725 Mixing individual and group transparencies You can combine the methods above to create complex transparency combinations. For example you could set an object to 50% transparency, then group it and apply a transparency to the group as well. You are also able to apply a transparency to a group first, and then later apply attributes to individual objects within a group. Just hold down "Ctrl", click the individual object and change its attributes. Group transparency on blends For more on blends see Blends. When adding a transparency to a Blend object, the transparency will be applied to the blend as a whole. It is treated like group transparency. If you want the transparency to be applied to each individual step of the blend, first make the objects transparent, and then blend. Page 726 Group transparency on blends For more on blends see Blends. When adding a transparency to a Blend object, the transparency will be applied to the blend as a whole. It is treated like group transparency. If you want the transparency to be applied to each individual step of the blend, first make the objects transparent, and then blend. Page 727 Bevels In this chapter The Bevel Tool Applying a bevel Applying a bevel to several objects Modifying a bevel Removing a bevel Page 728 The Bevel Tool The Bevel Tool (shortcut "Ctrl + F3") gives objects an appearance of depth instead of being flat on the page. Bevels are resolution-independent so you can scale them without losing quality. Bevel type Slider type list Slider and numeric value for selected parameter Outer bevel Inner bevel Join style You can apply bevels to most types of object. The exceptions are: Part of a block of text (such as a single letter)-the bevel is instead applied to all the text. To the curve in text along a curve. Contoured objects. Live effects (the bevel is applied to the object before the effect is applied if the effect is live, or to the bounding box of the effect if the effect is locked). Page 729 Applying a bevel To apply a bevel to a single object: 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Note that None removes any applied bevels. Page 730 Applying a bevel to several objects The result of a bevel on several objects depends on if the objects are grouped: If the objects are grouped, overlapping bevels merge together. The bevel color is the same as the rear-most object in the group. If the objects are ungrouped, each object has a separate bevel. The bevel color is the same as the object color. Page 731 Modifying a bevel You can change the angle and elevation of the light and change the shape, direction and size of the bevel edge. Bevel direction Bevels can be inside the object or outside. Outside bevels make objects larger; inside bevels do not change the object size. To change bevel direction: 1. Select the object. 2. Click either the Inner or Outer button. Changing the bevel light source The bevel effect is created by a light shining across the object and highlighting the shape (profile) of the bevel. You can change the direction and height of the light and its strength (the contrast). Changing the light angle (horizontal direction): 1. Select the object. 2. Drag the arrowhead to change the position of the light source. You cannot move the center of the arrow, only the arrowhead. For precise angles, select Light angle from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, light angle changes all bevels. Dragging the arrow changes just the bevel (or bevels) to which the arrow refers. Changing the light strength (contrast) To change the light strength: 1. Select the object. 2. Select Contrast from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, any changes apply to all the bevels. The colors used in the bevel affect the contrast. For example, strong (saturated) colors require more contrast than weak colors to get the same effect. For best results, you will probably have to adjust the contrast for each object. Changing the light elevation (vertical angle) This lets you move the light anywhere from immediately above the object (90º) to the side of the object (0º). 1. Select the object. 2. Select Light elevation from the Slider type list. Then drag the slider or type into the text box. For rounded bevels we recommend a light elevation of 30º. At this angle the bevel blends smoothly with the object. Page 732 Changing the bevel size How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 733 Bevel direction Bevels can be inside the object or outside. Outside bevels make objects larger; inside bevels do not change the object size. To change bevel direction: 1. Select the object. 2. Click either the Inner or Outer button. Changing the bevel light source The bevel effect is created by a light shining across the object and highlighting the shape (profile) of the bevel. You can change the direction and height of the light and its strength (the contrast). Changing the light angle (horizontal direction): 1. Select the object. 2. Drag the arrowhead to change the position of the light source. You cannot move the center of the arrow, only the arrowhead. For precise angles, select Light angle from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, light angle changes all bevels. Dragging the arrow changes just the bevel (or bevels) to which the arrow refers. Changing the light strength (contrast) To change the light strength: 1. Select the object. 2. Select Contrast from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, any changes apply to all the bevels. The colors used in the bevel affect the contrast. For example, strong (saturated) colors require more contrast than weak colors to get the same effect. For best results, you will probably have to adjust the contrast for each object. Changing the light elevation (vertical angle) This lets you move the light anywhere from immediately above the object (90º) to the side of the object (0º). 1. Select the object. 2. Select Light elevation from the Slider type list. Then drag the slider or type into the text box. For rounded bevels we recommend a light elevation of 30º. At this angle the bevel blends smoothly with the object. Changing the bevel size Page 734 How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 735 Changing the bevel light source The bevel effect is created by a light shining across the object and highlighting the shape (profile) of the bevel. You can change the direction and height of the light and its strength (the contrast). Changing the light angle (horizontal direction): 1. Select the object. 2. Drag the arrowhead to change the position of the light source. You cannot move the center of the arrow, only the arrowhead. For precise angles, select Light angle from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, light angle changes all bevels. Dragging the arrow changes just the bevel (or bevels) to which the arrow refers. Changing the light strength (contrast) To change the light strength: 1. Select the object. 2. Select Contrast from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, any changes apply to all the bevels. The colors used in the bevel affect the contrast. For example, strong (saturated) colors require more contrast than weak colors to get the same effect. For best results, you will probably have to adjust the contrast for each object. Changing the light elevation (vertical angle) This lets you move the light anywhere from immediately above the object (90º) to the side of the object (0º). 1. Select the object. 2. Select Light elevation from the Slider type list. Then drag the slider or type into the text box. For rounded bevels we recommend a light elevation of 30º. At this angle the bevel blends smoothly with the object. Changing the bevel size How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Page 736 Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 737 Changing the light strength (contrast) To change the light strength: 1. Select the object. 2. Select Contrast from the Slider type list. Then drag the slider or type into the text box. If you have several beveled objects selected, any changes apply to all the bevels. The colors used in the bevel affect the contrast. For example, strong (saturated) colors require more contrast than weak colors to get the same effect. For best results, you will probably have to adjust the contrast for each object. Changing the light elevation (vertical angle) This lets you move the light anywhere from immediately above the object (90º) to the side of the object (0º). 1. Select the object. 2. Select Light elevation from the Slider type list. Then drag the slider or type into the text box. For rounded bevels we recommend a light elevation of 30º. At this angle the bevel blends smoothly with the object. Changing the bevel size How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) Page 738 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 739 Changing the light elevation (vertical angle) This lets you move the light anywhere from immediately above the object (90º) to the side of the object (0º). 1. Select the object. 2. Select Light elevation from the Slider type list. Then drag the slider or type into the text box. For rounded bevels we recommend a light elevation of 30º. At this angle the bevel blends smoothly with the object. Changing the bevel size How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. Page 740 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 741 Changing the bevel size How to change the bevel size: 1. Select the object. 2. Drag any of the outside arrows to enlarge the bevel. Alternatively: 1. Select the object. 2. From the Slider type list choose Size. 3. Either drag the slider or type a value into the text box. Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 742 Changing the bevel shape 1. Select the object 2. Choose the Bevel Tool. 3. Choose the bevel shape you want from the Bevel type list. Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 743 Changing the bevel color or fill effect After applying a bevel to an object, you can change the bevel's color or fill effect. You can apply any of Xara Web Designer 7 Premium's color effects including multi-stage fills. For more on colors and the Color Line, refer to Color handling . How to change the bevel color: The easiest way is to drag-and-drop a color from the Color Line onto the bevel (make sure you drop the color onto the bevel and not the object.) Alternatively, this method is slightly more complex but you have full control over the color: 1. Select the bevel using the Selector Tool (make sure you select the bevel and not the object.) 2. Use the Color editor to edit the color. Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 744 Changing the bevel join style After applying a bevel to an object, you can change the shape of the corners (joins). How to change the bevel join style: 1. Select the object. 2. Click the appropriate join button on the Bevel Tool InfoBar. Miter Round Bevel Page 745 Removing a bevel To remove a bevel: 1. Select the object(s) from which you want to remove the bevel. 2. Choose the Bevel Tool. Choose None from the Bevel Type list. Page 746 Masks A number of operations can take a mask to indicate which parts of a photo or drawing are to be operated on. The Content Aware photo scaling is one example where you can mark an area of a photo that is to be protected from the stretching operation. Another example is the photo enhance tool. You can mark part of a photo using a mask shape and then apply the enhance tool only to that part of the photo. Operations that can use a mask include; Content Aware photo scaling Cut / Copy / Delete operations Duplicate and Clone Clipview Combine Shapes (Arrange menu) Terminology ? masks versus opacity masks In Web Designer Premium the term "mask" when used on its own refers to the practice of temporarily marking part of a photo or design, such that a subsequent operation makes use of that mask in some way, as described in this chapter. Xara Web Designer 7 Premium also includes the "opacity mask" feature, which should not be confused with masks as described here. An opacity mask is a way of applying transparent effects to objects and is described in the Transparency chapter. Appearance of masks The mask is shown as a pink semi-transparent layer. You can draw shapes onto the mask to mark areas of interest - either to indicate an area you want to work on, or an area that is to be protected, depending on the operation to be applied. You can use any of the drawing tools to operate on the mask layer. So for instance it's easy using the Freehand tool to draw around any part of a photo. All masks in Web Designer Premium are vector shapes and you can use the normal vector editing tool such as the Shape Editor to edit the shape outline. Think of a mask like a transparent pink film overlaid on your drawing or photo. You can cut holes in the mask, or cut out shapes to overlay areas you want to protect. Not all operations take account of the mask, if you are applying a color fill or transparency to a shape, this will affect the whole shape as usual, irrespective of any mask. However using the mask system it's very quick to make a copy of only part of a shape and then adjust that copied part. In this chapter To Create A Mask Operating On The Mask Shapes Operations That Use The Mask Copying Shapes To The Mask Layer Page 747 To Create A Mask First select the object(s) to which you wish to apply a masked operation. Then select the Mask mode button, below the main toolbar on the left of the Xara Web Designer 7 Premium window. Or select the menu option "Window" > "Mask mode on". This will cover the whole drawing area with a pink semi-transparent mask, so you always know when mask mode is on. It also hides all unselected objects, to make it clear which objects in your design are to be operated on using the mask. So for example if you are applying a masked operation to a photo (the most common use for masks), you see only the selected photo and the mask shape(s) while you are in mask mode. Now with mask mode on and using any of the drawing tools, draw whatever mask shape you require. If you're using the Freehand tool you should create a closed shape, that is where the start and end points are coincident. The mask shapes are shown as holes in the mask background, and have a dashed 'marching ants' animating effect around the outline of the shapes. If you select to invert the mask ("Window" > "Invert mask" ) then the inside of the shapes will be shown in pink. Important: The pink area is the protected area. The visible, non-pink, parts of the drawing are the areas that will be affected by any of the mask compatible operations listed above. Clicking the Mask control button again will hide the mask layer, so you can now operate on the document as normal. Doing this just hides the mask layer, it does not remove any object you may have on the mask. Clicking the control again will reveal the mask layer again along with all objects on that layer. It's nearly always best to select the object(s) you want to operate on before turning on mask mode, as described above, because that makes it clear which object(s) will be affected. However if you don't select the target object(s) first, some operations will try and guess which object you meant to apply the mask to. For example if you draw a mask shape over a photo and apply the photo enhance tool, that tool will assume you intend to apply the masked operation to that photo even though you didn't select it first. Page 748 Operating On The Mask Shapes When you've drawn any shape on the mask, it's selected and acts pretty much like any normal line or shape. Drawing additional shapes will just add to the mask. The status line will indicate whether selected objects are on the mask layer or not. Pressing Escape will clear any selection (so there are no selected objects). If you have multiple separate objects on the mask layer, you can click on the outline (on the marching ants outline) to select any one particular shape. Or use the Page & Layer Gallery to view and select separate objects on the mask layer. You can use all the normal drawing tools on the selected shapes on the mask layer. You can copy, cut, paste, delete, duplicate etc. You can use the Freehand and Shape Editor tool to adjust the mask shape outline. You can copy any shape from another normal visible layer onto the mask layer, or vice versa, using the normal layer operations. To copy a shape from a normal layer, the easiest way to do this is to turn off mask mode, select and copy the required objects, re-enable the mask layer and then Paste. Deleting all objects from the mask simply requires a click anywhere on the pink area (selects all parts of the mask) followed by pressing the Delete key. Clicking through the holes or anywhere on the non-pink parts of a drawing will select the objects under the mask. Moving the mask objects Dragging anywhere on the pink mask will move all shapes on the mask layer. Where you have multiple shapes selected on the mask layer and want to operate on one shape only, clear the selection (press Esc) and then click on the edge of or inside the specific shape you want to select. Page 749 Moving the mask objects Dragging anywhere on the pink mask will move all shapes on the mask layer. Where you have multiple shapes selected on the mask layer and want to operate on one shape only, clear the selection (press Esc) and then click on the edge of or inside the specific shape you want to select. Page 750 Operations That Use The Mask This section outlines some of the operations that work with masks and refers to other sections of the help for information on others. ClipView You can clip your drawing or photo to be inside the mask shape. Select the object(s) you want to clip, switch on mask mode and draw the required shape on the mask. Now when you select "Arrange" > "ClipView" (or press the key short cut "Q") the drawing will be clipped to the visible areas of the mask. ClipViews are live and non-destructive in that the whole drawing is retained inside the Clipview object. . See the Object Handling chapter for details. Cut, Copy, Delete These operations are useful when used with masks, to cut pieces from photos, but you can use them on any objects. Select the object(s) you want to apply the operation to, then turn on mask mode and draw your mask shape(s). Then perform the cut/copy/delete operation. This shows a photo with mask on and an ellipse drawn on the mask. After a Cut or Delete the visible part of the photo is cut or deleted, as shown on the right. Page 751 On the left example the mask has been inverted. Now when you cut or delete the masked pink area is protected, everything else is deleted. You can use masks on top of any drawing or photo. If you have a mask shape selected when you apply these operations, you'll be asked whether you want to apply the operation to the mask shape itself, or to the objects shown under the mask using the mask. This is because you may want to use these operations on the mask shapes themselves and it's not clear from the context what your intention is. Duplicate, Clone This will copy only the visible un-masked parts of the drawing or photo. The Clone option places a copy exactly on top of the original. Content Aware photo scaling To protect part of a photo from being scaled, switch the mask on, draw around the area with the Freehand tool. Now go into the Content Aware photo scaling tool (Photo tool fly-out bar on the main toolbar). See the Content Aware Scaling feature for more information. Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Page 752 Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 753 ClipView You can clip your drawing or photo to be inside the mask shape. Select the object(s) you want to clip, switch on mask mode and draw the required shape on the mask. Now when you select "Arrange" > "ClipView" (or press the key short cut "Q") the drawing will be clipped to the visible areas of the mask. ClipViews are live and non-destructive in that the whole drawing is retained inside the Clipview object. . See the Object Handling chapter for details. Cut, Copy, Delete These operations are useful when used with masks, to cut pieces from photos, but you can use them on any objects. Select the object(s) you want to apply the operation to, then turn on mask mode and draw your mask shape(s). Then perform the cut/copy/delete operation. This shows a photo with mask on and an ellipse drawn on the mask. After a Cut or Delete the visible part of the photo is cut or deleted, as shown on the right. Page 754 On the left example the mask has been inverted. Now when you cut or delete the masked pink area is protected, everything else is deleted. You can use masks on top of any drawing or photo. If you have a mask shape selected when you apply these operations, you'll be asked whether you want to apply the operation to the mask shape itself, or to the objects shown under the mask using the mask. This is because you may want to use these operations on the mask shapes themselves and it's not clear from the context what your intention is. Duplicate, Clone This will copy only the visible un-masked parts of the drawing or photo. The Clone option places a copy exactly on top of the original. Content Aware photo scaling To protect part of a photo from being scaled, switch the mask on, draw around the area with the Freehand tool. Now go into the Content Aware photo scaling tool (Photo tool fly-out bar on the main toolbar). See the Content Aware Scaling feature for more information. Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Page 755 Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 756 Cut, Copy, Delete These operations are useful when used with masks, to cut pieces from photos, but you can use them on any objects. Select the object(s) you want to apply the operation to, then turn on mask mode and draw your mask shape(s). Then perform the cut/copy/delete operation. This shows a photo with mask on and an ellipse drawn on the mask. After a Cut or Delete the visible part of the photo is cut or deleted, as shown on the right. On the left example the mask has been inverted. Now when you cut or delete the masked pink area is Page 757 protected, everything else is deleted. You can use masks on top of any drawing or photo. If you have a mask shape selected when you apply these operations, you'll be asked whether you want to apply the operation to the mask shape itself, or to the objects shown under the mask using the mask. This is because you may want to use these operations on the mask shapes themselves and it's not clear from the context what your intention is. Duplicate, Clone This will copy only the visible un-masked parts of the drawing or photo. The Clone option places a copy exactly on top of the original. Content Aware photo scaling To protect part of a photo from being scaled, switch the mask on, draw around the area with the Freehand tool. Now go into the Content Aware photo scaling tool (Photo tool fly-out bar on the main toolbar). See the Content Aware Scaling feature for more information. Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 758 Duplicate, Clone This will copy only the visible un-masked parts of the drawing or photo. The Clone option places a copy exactly on top of the original. Content Aware photo scaling To protect part of a photo from being scaled, switch the mask on, draw around the area with the Freehand tool. Now go into the Content Aware photo scaling tool (Photo tool fly-out bar on the main toolbar). See the Content Aware Scaling feature for more information. Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 759 Content Aware photo scaling To protect part of a photo from being scaled, switch the mask on, draw around the area with the Freehand tool. Now go into the Content Aware photo scaling tool (Photo tool fly-out bar on the main toolbar). See the Content Aware Scaling feature for more information. Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 760 Photo enhance tool Use a mask to apply brightness, contrast, saturation, temperature and blur/sharpen changes to any part of a photo. Just draw the mask shape in mask mode, then go into the Photo Tool and start using the enhance controls on the infobar. See the Photo Tool and Photo Handling chapters for more information. Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 761 Photo clone tool The clone tool will take a mask shape and convert it into a clone shape, which copies one part of a photo to another part. See the Clone Tool section of the Photo Tool chapter for details. Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 762 Combine Shapes There are a set of operations under the "Arrange" > "Combine Shapes" menu that allow you to combine shapes in a number of different ways. These work with the mask. For example to slice a piece of a photo out (cookie cutter style), draw your cookie cutter shape on the mask, and select "Arrange" > "Combine Shapes" > "Slice" Mask Notes: The mask is really a special type of layer. If you open the Page & Layer Gallery you will see a mask layer appear when you switch on mask mode. You can use the Page & Layer Gallery layer controls to show, hide, lock or unlock the mask layer. You can also use the Page & Layer Gallery to find and select objects on the mask layer. Page 763 Copying Shapes To The Mask Layer You may prefer to draw your mask shape while not in mask mode, or to use an existing shape on your mask layer. This is easy. With the mask mode off, select the shape, and copy, or cut it. Now switch the mask mode on, and Paste. Use Paste in Place if you want the shape to appear in exactly the same place it was copied from. To copy shapes from the mask layer to any other, do the reverse. Select the shapes with the mask on, switch the mask mode off, and paste. Page 764 Web Properties Dialog The Web properties dialog is a multi-tabbed dialog which allows you to add and configure most of the web related features in Xara Web Designer 7 Premium and set different web properties on objects, on pages and on your whole website. Open it by right clicking an object and choosing Web Properties or by using the "Utilities" > "Web properties… " menu option (shortcut Ctrl + Shift + W). Each tab of the dialog is also directly accessible using the buttons on the Web Properties flyout bar, available on the Website toolbar. Link Tab Website Tab Page Tab Image Tab Mouse-over Tab Placeholder Tab Publish Tab Create/Edit Navbar The dialog is modeless, so you can leave it open while you select different pages and objects in your document. This makes it easy to quickly set properties on different objects and pages in your website. Use the OK button to apply your changes and close the dialog, or the Apply button to apply your changes without closing. Note that when you have an animation design as your current document, the Web Properties dialog appears in a modified form, with some controls different and many others disabled because they don't apply to animations. Refer to the Flash chapter for information about using this dialog with animation designs. The following sections cover each tab of the dialog in turn. In this chapter Link Tab Website Tab Page Tab Image Tab Mouse-over Tab Placeholder Tab Publish Tab Page 765 Link Tab The settings on this tab apply to the selected object(s) or selected text. Typically you use this tab to add a link to an object on your web page (eg. a button or photo), or to some text, so that when a visitor to your site clicks on the object/text, they are redirected to another page. You can add links to other pages in your website, to a URL (web address) or even cause a pop-up window to appear. You can also apply transition effects to links so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. To add a link to just some of the words in a paragraph of text, go into the Text Tool and drag over the text you want to link, to select it. Then setup the link in this tab. The main section of this tab allows you to choose what should happen when the selected object or text is clicked. Link to web address Enter a web or email address to link to that address. If you leave the "Correct address automatically" checkbox selected, your address will be adjusted if required when you click OK or Apply . For example, if you enter "www.xara.com" it will correct it to "http://www.xara.com/". You can put an email address in the Link address field, in which case clicking the link will launch the reader's email program with the To: field filled in. You can also optionally specify the subject line to be used, add CC or BCC email addresses to be copied on the email and even specify the default body text to be used. For example this sets the To email address and all four optional parameters: yourname@wherever.com subject:Email from website cc:another@wherever.com bcc:yetanother@wherever.com body:Auto-generated email Technical note: Xara Web Designer 7 Premium encodes your email address to reduce the likelihood that Page 766 SPAM robots will find your email address from the web page. This requires Javascript to be enabled in the browser (currently >95% of browsers). Link to... Select this option to link to another page in the current website, or if you are in a presentation document, to link to the next or previous presentation step. The drop-down list allows you to select which page or step to link to. TIP: If you have many pages in your website document, giving each one a name makes it much easier to set up and maintain your page links, because the page list will show the page names instead of just "Page 2", "Page 3", etc. See the Page Tab section below for details of how to setup page names, or edit the names in the Page & Layer Gallery . In addition to an entry for each page in your site, the dropdown list also contains the special entries Next page/Presentation step and Previous page/Presentation step . Next/Previous page Use these to add a link which leads to the next or previous page in your site. For the purposes of such links, the page order is determined by the order of the pages as they appear in Xara Web Designer 7 Premium. A "next" link on the last page links to the first page and a "previous" link on the first page links to the last page. Next/Previous presentation step Use these to add a link which leads to the next or previous presentation step in your site, if your website is a presentation document. The presentation order is also determined by the order of the steps as they appear in Xara Web Designer 7 Premium, similarly to next/previous page. Link to anchor This option allows you to jump the visitor to a specific part of any page in your website. To setup an anchor point, first go to the page and object you want to be jumped to. Select the object and add a name to it by right clicking and choosing the Names... option. Then select the object to which you want to add the link and choose the anchor name you added from the list provided with the "Link to anchor" option. Note that when you link to an object which is a long way down a web page, the web browser automatically scrolls the page down so that your anchor object is visible. Note : You cannot apply a transition to a link to an anchor. Link to File This link option is useful if you want to add a document, movie or any other file to your website to make it available to your visitors. For example you may have a PDF document that you want to make available. Select the object or text that you want to link. Then turn on this Link to file option and use the Browse button to browse for the file on your computer. The name of the file appears in the text field to the left of the Browse button. Click OK and your link is applied. As well as applying the link, Xara Web Designer 7 Premium has now taken a copy of your file and Page 767 placed it in the support folder for your design. This is a folder next to your .web or .xar file. If your design is called "MySite.web", the support folder will be called "MySite_web_files" alongside it. All the files in the support folder get published along with your website and so that means your file will be published with your website and so the link you just added will work. See the Document Handling chapter for more information on support folders. Note: Because there is a separate copy of your file held in the support folder for your design, you need to update that copy whenever you modify the file and want to publish the modified version. Or you can just go through the above linking process again and browse for your updated file. Also if you move or copy your website design to another computer, or give a copy to someone else, you need to make sure the support folder accompanies the design file, since it now contains an important part of your website! Note : You cannot apply a transition to a link to a file. Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Page 768 Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions Page 769 from Slide out from Fade Fade through black Shutter Current page contents slide out in various directions New page contents appear gradually Current page contents fade into a black screen and new page contents then appear gradually A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. New contents slide in, split into two halves which slide together either vertically or horizontally Split, vertical/ horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 770 Link to web address Enter a web or email address to link to that address. If you leave the "Correct address automatically" checkbox selected, your address will be adjusted if required when you click OK or Apply . For example, if you enter "www.xara.com" it will correct it to "http://www.xara.com/". You can put an email address in the Link address field, in which case clicking the link will launch the reader's email program with the To: field filled in. You can also optionally specify the subject line to be used, add CC or BCC email addresses to be copied on the email and even specify the default body text to be used. For example this sets the To email address and all four optional parameters: yourname@wherever.com subject:Email from website cc:another@wherever.com bcc:yetanother@wherever.com body:Auto-generated email Technical note: Xara Web Designer 7 Premium encodes your email address to reduce the likelihood that SPAM robots will find your email address from the web page. This requires Javascript to be enabled in the browser (currently >95% of browsers). Link to... Select this option to link to another page in the current website, or if you are in a presentation document, to link to the next or previous presentation step. The drop-down list allows you to select which page or step to link to. TIP: If you have many pages in your website document, giving each one a name makes it much easier to set up and maintain your page links, because the page list will show the page names instead of just "Page 2", "Page 3", etc. See the Page Tab section below for details of how to setup page names, or edit the names in the Page & Layer Gallery . In addition to an entry for each page in your site, the dropdown list also contains the special entries Next page/Presentation step and Previous page/Presentation step . Next/Previous page Use these to add a link which leads to the next or previous page in your site. For the purposes of such links, the page order is determined by the order of the pages as they appear in Xara Web Designer 7 Premium. A "next" link on the last page links to the first page and a "previous" link on the first page links to the last page. Next/Previous presentation step Use these to add a link which leads to the next or previous presentation step in your site, if your website is a presentation document. The presentation order is also determined by the order of the steps as they appear in Xara Web Designer 7 Premium, similarly to next/previous page. Link to anchor This option allows you to jump the visitor to a specific part of any page in your website. To setup an anchor point, first go to the page and object you want to be jumped to. Select the object and add a name to it by right clicking and choosing the Names... option. Then select the object to which you want to add the link and choose the anchor name you added from the list provided with the "Link to anchor" option. Note that when you link to an object which is a long way down a web page, the web browser Page 771 automatically scrolls the page down so that your anchor object is visible. Note : You cannot apply a transition to a link to an anchor. Link to File This link option is useful if you want to add a document, movie or any other file to your website to make it available to your visitors. For example you may have a PDF document that you want to make available. Select the object or text that you want to link. Then turn on this Link to file option and use the Browse button to browse for the file on your computer. The name of the file appears in the text field to the left of the Browse button. Click OK and your link is applied. As well as applying the link, Xara Web Designer 7 Premium has now taken a copy of your file and placed it in the support folder for your design. This is a folder next to your .web or .xar file. If your design is called "MySite.web", the support folder will be called "MySite_web_files" alongside it. All the files in the support folder get published along with your website and so that means your file will be published with your website and so the link you just added will work. See the Document Handling chapter for more information on support folders. Note: Because there is a separate copy of your file held in the support folder for your design, you need to update that copy whenever you modify the file and want to publish the modified version. Or you can just go through the above linking process again and browse for your updated file. Also if you move or copy your website design to another computer, or give a copy to someone else, you need to make sure the support folder accompanies the design file, since it now contains an important part of your website! Note : You cannot apply a transition to a link to a file. Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Page 772 Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition Page 773 This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 774 Link to... Select this option to link to another page in the current website, or if you are in a presentation document, to link to the next or previous presentation step. The drop-down list allows you to select which page or step to link to. TIP: If you have many pages in your website document, giving each one a name makes it much easier to set up and maintain your page links, because the page list will show the page names instead of just "Page 2", "Page 3", etc. See the Page Tab section below for details of how to setup page names, or edit the names in the Page & Layer Gallery . In addition to an entry for each page in your site, the dropdown list also contains the special entries Next page/Presentation step and Previous page/Presentation step . Next/Previous page Use these to add a link which leads to the next or previous page in your site. For the purposes of such links, the page order is determined by the order of the pages as they appear in Xara Web Designer 7 Premium. A "next" link on the last page links to the first page and a "previous" link on the first page links to the last page. Next/Previous presentation step Use these to add a link which leads to the next or previous presentation step in your site, if your website is a presentation document. The presentation order is also determined by the order of the steps as they appear in Xara Web Designer 7 Premium, similarly to next/previous page. Link to anchor This option allows you to jump the visitor to a specific part of any page in your website. To setup an anchor point, first go to the page and object you want to be jumped to. Select the object and add a name to it by right clicking and choosing the Names... option. Then select the object to which you want to add the link and choose the anchor name you added from the list provided with the "Link to anchor" option. Note that when you link to an object which is a long way down a web page, the web browser automatically scrolls the page down so that your anchor object is visible. Note : You cannot apply a transition to a link to an anchor. Link to File This link option is useful if you want to add a document, movie or any other file to your website to make it available to your visitors. For example you may have a PDF document that you want to make available. Select the object or text that you want to link. Then turn on this Link to file option and use the Browse button to browse for the file on your computer. The name of the file appears in the text field to the left of the Browse button. Click OK and your link is applied. As well as applying the link, Xara Web Designer 7 Premium has now taken a copy of your file and placed it in the support folder for your design. This is a folder next to your .web or .xar file. If your design is called "MySite.web", the support folder will be called "MySite_web_files" alongside it. All the files in Page 775 the support folder get published along with your website and so that means your file will be published with your website and so the link you just added will work. See the Document Handling chapter for more information on support folders. Note: Because there is a separate copy of your file held in the support folder for your design, you need to update that copy whenever you modify the file and want to publish the modified version. Or you can just go through the above linking process again and browse for your updated file. Also if you move or copy your website design to another computer, or give a copy to someone else, you need to make sure the support folder accompanies the design file, since it now contains an important part of your website! Note : You cannot apply a transition to a link to a file. Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Page 776 Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Page 777 Slide out from Fade Fade through black Shutter Current page contents slide out in various directions New page contents appear gradually Current page contents fade into a black screen and new page contents then appear gradually A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. New contents slide in, split into two halves which slide together either vertically or horizontally Split, vertical/ horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 778 Link to anchor This option allows you to jump the visitor to a specific part of any page in your website. To setup an anchor point, first go to the page and object you want to be jumped to. Select the object and add a name to it by right clicking and choosing the Names... option. Then select the object to which you want to add the link and choose the anchor name you added from the list provided with the "Link to anchor" option. Note that when you link to an object which is a long way down a web page, the web browser automatically scrolls the page down so that your anchor object is visible. Note : You cannot apply a transition to a link to an anchor. Link to File This link option is useful if you want to add a document, movie or any other file to your website to make it available to your visitors. For example you may have a PDF document that you want to make available. Select the object or text that you want to link. Then turn on this Link to file option and use the Browse button to browse for the file on your computer. The name of the file appears in the text field to the left of the Browse button. Click OK and your link is applied. As well as applying the link, Xara Web Designer 7 Premium has now taken a copy of your file and placed it in the support folder for your design. This is a folder next to your .web or .xar file. If your design is called "MySite.web", the support folder will be called "MySite_web_files" alongside it. All the files in the support folder get published along with your website and so that means your file will be published with your website and so the link you just added will work. See the Document Handling chapter for more information on support folders. Note: Because there is a separate copy of your file held in the support folder for your design, you need to update that copy whenever you modify the file and want to publish the modified version. Or you can just go through the above linking process again and browse for your updated file. Also if you move or copy your website design to another computer, or give a copy to someone else, you need to make sure the support folder accompanies the design file, since it now contains an important part of your website! Note : You cannot apply a transition to a link to a file. Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Page 779 Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is Page 780 not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 781 Link to File This link option is useful if you want to add a document, movie or any other file to your website to make it available to your visitors. For example you may have a PDF document that you want to make available. Select the object or text that you want to link. Then turn on this Link to file option and use the Browse button to browse for the file on your computer. The name of the file appears in the text field to the left of the Browse button. Click OK and your link is applied. As well as applying the link, Xara Web Designer 7 Premium has now taken a copy of your file and placed it in the support folder for your design. This is a folder next to your .web or .xar file. If your design is called "MySite.web", the support folder will be called "MySite_web_files" alongside it. All the files in the support folder get published along with your website and so that means your file will be published with your website and so the link you just added will work. See the Document Handling chapter for more information on support folders. Note: Because there is a separate copy of your file held in the support folder for your design, you need to update that copy whenever you modify the file and want to publish the modified version. Or you can just go through the above linking process again and browse for your updated file. Also if you move or copy your website design to another computer, or give a copy to someone else, you need to make sure the support folder accompanies the design file, since it now contains an important part of your website! Note : You cannot apply a transition to a link to a file. Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Pop-up photo Page 782 This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link Page 783 transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 784 Pop-up layer You can add any content you like to a separate layer on your page and have that content shown as a pop-up only when your visitor clicks on a link. For example you could add some descriptive text about a photo on your web page and have that text only shown to the user if they click on the photo. To add a popup layer, first you need to add the layer itself using the Page & Layer Gallery and add your pop-up content to that layer. See the Page & Layer Galler y chapter for full details. Then you can select the layer from the layer list provided next to the "Pop-up layer" option. You can also add a transition effect which is applied when the layer appears. In the Page & Layer Gallery, open the layer properties so that you can apply a transition directly to a layer to achieve an animated effect when the layer contents appear. Now when a visitor clicks on your object, the layer contents appear! Clicking anywhere else on the page makes the pop-up disappear again. Note that all the content on the pop-up layer is loaded as soon as the visitor visits your page. So if you want to provide a lot of pop-up photos, use the Pop-up Photo feature described below instead. The "Getting Started" chapter includes some step by step instructions on adding layer pop-ups. Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser Page 785 window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal Page 786 slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 787 Pop-up photo This option gives you a very easy way to add pop-up photos and other photo gallery features to your website, without adding any layers! Simply import your photo and use the Selector Tool to scale it right down so it appears as just a small photo thumbnail on your webpage. Then select it and choose this " Pop-up photo " option. Click the Settings button next to this option to go to the Image tab, where you can set the size of the pop-up photo, add a title and caption, and choose from many other options. See the Image tab section below for details. Selecting the pop-up photo option on this Link tab, also selects the pop-up photo checkbox on the Image tab ? both turn on the same pop-up behavior. Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition Page 788 This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 789 Use common website link colors This option lets you choose how the selected text links should be displayed. It is selected by default, meaning that the text link will show with the link color you have defined for the whole website. You can set this color on the Website tab (see Website Tab section). If you uncheck this option, then the selected text link will keep the color that you give it on the page. So you can give different links different colors if desired. Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions Page 790 from Slide out from Fade Fade through black Shutter Current page contents slide out in various directions New page contents appear gradually Current page contents fade into a black screen and new page contents then appear gradually A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. New contents slide in, split into two halves which slide together either vertically or horizontally Split, vertical/ horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 791 Open link in This option does nothing if either of the "Pop-up layer" or "Pop-up photo" link options are selected. But for other links it allows you to tell the web browser how the target web page should be loaded. By default it is set to "Not specified" which usually means the browser will open the link in the same browser window and frame as the link. The dropdown list contains four options that cause the browser to do special things. You can select one of these options, or type in the name of a frame: New window (_blank) Open the link in a new browser window. Same frame (_self) Open the link in this frame (the frame that contains this object). Parent frame (_parent) Open the link into the parent window or frameset that contains this frame. Same window (_top) Open the link into the main browser window, replacing any existing frames. If you want the link to be loaded into a specific frame in the browser, type the name of the frame in this field. Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Page 792 Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. New contents slide in, split into two halves which slide together either vertically or horizontally Split, vertical/ horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 793 Clickable area This option lets you specify what area of the object must be clicked on to invoke the link. However it is not supported for HTML websites (the rectangle surrounding the object is always used), it works only when exporting to Flash. Shape of object : The user must click inside the exact outline of the object to invoke the link. Rectangle surrounding object : The user can click anywhere in the rectangle surrounding the object (the bounding box) to invoke the link. Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 794 Link transition This option allows you to apply a transition effect to a link so that the page linked to (whether it's an external site or one of the pages in your site) appears with the page transition that you select. Link transitions can only be used when the link is opening a new page, and are disabled otherwise. Note: If you apply a link transition to a link that goes to a page with its own transition set using the Page tab , then the link transition is used. So the link transition overrides the page transition for a given link. Transition effect: Choose your animation effect from the drop-down list. You can apply the following transition effects to a link: Instant New page, layer or step contents appear straight away (default) Slide in New page, layer or step contents slide in from various directions from Slide out Current page contents slide out in various directions from Fade New page contents appear gradually Fade Current page contents fade into a black screen and new page through contents then appear gradually black Shutter A black bar moves across the screen from the right, obscuring the old contents, then moves back to reveal the new page contents. Split, New contents slide in, split into two halves which slide together vertical/ either vertically or horizontally horizontal slide in Speed (secs): Set the duration of the effect in seconds.By default objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. By default when a transition is applied, objects will only slide in/out to the edge of the web page. If you would like objects to start from the browser window edges, rather than the web page edges, deselect the Clip to page edges checkbox in the Website tab of the Web Properties dialog. Note: This option is grayed out if Link to anchor, Link to file, Pop-up layer or Pop-up photo are selected. Page 795 Website Tab The settings on this tab apply to the entire current document/website, so it doesn't matter what object or page is selected. Title, Description & Keywords: These fields are just as described in the Page Tab section above. You can optionally set these fields here so that they apply to every page in your site, unless overridden by the Page Tab settings for a page. So for example a page that doesn't have its own title set in the Page Tab will get the title you specify here. HTML code (head) and HTML code (body): These buttons serve the same purpose as the HTML code (head) and HTML code (body) buttons in the Page Tab , and allow you to enter and edit large amounts of HTML code to either the head or body sections of all your website pages. If code is specified here in the Website tab it is included in every page of your site in addition to any code specified for each page in the Page Tab. This allows you to have some code included on every page, while also adding other code to those pages that need it. Website Link Colors This section of the Website Tab allows you to control how text links appear on your website. Underline Text Links : Underlining is commonly used to highlight clickable links in text, so this option is selected by default. Uncheck it if you don't want your text links underlined. Mouse Off : Here you can choose the color you would like to be used for all your text links. You can either choose a Page 796 named Theme Color from the dropdown list (if there are any in your current document) or click the Edit button to open the Color Editor so you can choose any other color. Mouse Over : Text links will change to this color when a visitor moves the mouse pointer over them. Visited : Text links that point to a page which the visitor has already visited will display with this color instead of the Mouse Off color. Clip to page edges (enabled by default): If you have objects in your website that overlap the web page borders, click this checkbox to crop these objects so that only the portion on the page is visible. Deselect this checkbox if you would like the object to flow over the page edge, so that even the portion that overlaps the pasteboard is displayed. Web Presentations Click the Presentation website checkbox to convert an existing website into a presentation. Note: If you created your presentation document by choosing 955 pix presentation from the New menu, the Presentation website check box is automatically selected. Clip to page edges (enabled by default): If you have objects in your website that overlap the web page borders, click this checkbox to crop these objects so that only the portion on the page is visible. Deselect this checkbox if you would like the object to flow over the page edge, so that even the portion that overlaps the pasteboard is displayed. Note : If you have transitions applied to a layer or presentations step transitions that slide in from the sides, top or bottom of the page, disabling this checkbox causes the transition to come in at the edge of the browser window, rather than the page edge. Page 797 Website Link Colors This section of the Website Tab allows you to control how text links appear on your website. Underline Text Links : Underlining is commonly used to highlight clickable links in text, so this option is selected by default. Uncheck it if you don't want your text links underlined. Mouse Off : Here you can choose the color you would like to be used for all your text links. You can either choose a named Theme Color from the dropdown list (if there are any in your current document) or click the Edit button to open the Color Editor so you can choose any other color. Mouse Over : Text links will change to this color when a visitor moves the mouse pointer over them. Visited : Text links that point to a page which the visitor has already visited will display with this color instead of the Mouse Off color. Clip to page edges (enabled by default): If you have objects in your website that overlap the web page borders, click this checkbox to crop these objects so that only the portion on the page is visible. Deselect this checkbox if you would like the object to flow over the page edge, so that even the portion that overlaps the pasteboard is displayed. Web Presentations Click the Presentation website checkbox to convert an existing website into a presentation. Note: If you created your presentation document by choosing 955 pix presentation from the New menu, the Presentation website check box is automatically selected. Clip to page edges (enabled by default): If you have objects in your website that overlap the web page borders, click this checkbox to crop these objects so that only the portion on the page is visible. Deselect this checkbox if you would like the object to flow over the page edge, so that even the portion that overlaps the pasteboard is displayed. Note : If you have transitions applied to a layer or presentations step transitions that slide in from the sides, top or bottom of the page, disabling this checkbox causes the transition to come in at the edge of the browser window, rather than the page edge. Page 798 Web Presentations Click the Presentation website checkbox to convert an existing website into a presentation. Note: If you created your presentation document by choosing 955 pix presentation from the New menu, the Presentation website check box is automatically selected. Clip to page edges (enabled by default): If you have objects in your website that overlap the web page borders, click this checkbox to crop these objects so that only the portion on the page is visible. Deselect this checkbox if you would like the object to flow over the page edge, so that even the portion that overlaps the pasteboard is displayed. Note : If you have transitions applied to a layer or presentations step transitions that slide in from the sides, top or bottom of the page, disabling this checkbox causes the transition to come in at the edge of the browser window, rather than the page edge. Page 799 Page Tab The options on this tab apply to the current page, not to the selected object(s). The current page is indicated with black angle lines just outside each corner of the page. All fields on this tab are optional; you do not necessarily need to fill in these fields for every page of your site. If you want the same title, description and keywords on every page of your site, you can set these just once on the Website tab instead of setting them on every page here. Page filename : Use this field to set the name you'd like to be used for this page when it is exported. So if you want the page to be exported as "home.htm", set this field to "home". It's usual to make the first page of a website "index.htm" or "home.htm", because if a visitor specifies a URL consisting of just a domain name with no page name (eg. "www.xara.com") this is usually automatically mapped by the web server to the index.htm page if it is present. Note that characters entered in this field are automatically converted to lower case and accented characters and some non-alphanumeric characters are not allowed. This is to reduce the chances of compatibility problems with different web servers when you publish your website. Page title: You can optionally choose a title for your page. If set, this is used by web browsers to show a page title in the browser window frame, or tab. For example at the time of writing the www.xara.com home page has the title "Graphics Software by Xara" which you can see is shown by the web browser if you visit the site. Advanced: The title is inserted into the page header using the ' ' HTML element. Page description : This page description text can be shown by search engines within their search results when visitors find Page 800 your page with an internet search. The page description may also be displayed by browsers and other web services. Advanced: The description is inserted as metadata into the page header ('" tag. HTML code (body): Click to open the HTML Code (body) dialog, where you can paste or type large amounts of HTML code directly into the body of your web page. The code is inserted unmodified just before the closing "