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 PDF.
Page Count: 1438 [warning: Documents this large are best viewed by clicking the View PDF Link!]

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:
oA new default Page & Layer Gallery 'pages' mode displays a narrow list of page
thumbnails ? for easy page selection and access.
oXara 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.
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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.
5. Export the rectangle as a PNG image. Click the Export as PNG icon .Once exported drag
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