Chapter 1.
Introduction
Xara Xtreme 4 and 4 Pro provide the ability to export Xara document content as HTML which
allows for WYSIWYG design of HTML websites. This tutorial covers everything that can be
produced in Xara with this feature. Chapter 2 covers the main features of HTML website
creation, and a basic website-making walkthrough is given in Chapter 3.
Chapter 2.
Features and functions
This section will outline the features available for website making using Xara. The process of
designing a website using Xara is typically to determine the size of the page(s) that are going
background image or colour will be (section 2.4), add text, images and other content (sections
Once the website is complete, it can be exported by going to File > Export… (Ctrl+Shift+E),
selecting a location, file name, and selecting the file type as website (HTML). Once exported,
an HTML file(s) is generated, and a folder is also created which stores all the images and other
necessary content associated with the website.
2.1.
Page sizes
The size of the page in the Xara document will reflect the size of the HTML webpage (owing to
Xara’s WYSIWYG nature of HTML export). The page size in Xara can be changed by going to
the options menu (Utilities menu > Options, or Ctrl+Shift+O as the keyboard shortcut),
selecting the Page tab, and selecting a Paper size.
Note 1: Only objects on the page are exported as part of the web page, items on the
Pasteboard (off the page) are not exported.
Note 2: Xara version 4 only supports a single page size for multi-page websites (covered in
section 2.2). There is a registry hack available which can allow different page sizes for
subsequent Xara document pages however this will not be covered in this tutorial as
Xara does not officially support it. It is possible that future versions of Xara will
officially support multiple page sizes in a document, and a future version of this tutorial
will cover it.
2.2.
Multi-page websites
Most websites consist of multiple webpages. Creating multiple webpages from a single Xara
file is very simple: each new page in the Xara document will export with its own separate
HTML file. These HTML files have sequentially indexed names. For example, when exporting
the multi-page website as MySite.htm, the second and third pages will be named
MySite_2.htm, MySite_3.htm etc.
New pages in a Xara document can be added by going to Edit > Pages and then selecting
one of the new page options listed.
All images created during HTML export of a Xara document are stored within a single folder,
e.g. MySite.htm_files.
It is recommended that each distinct section of a website (e.g. photo section, download
section, help section etc.) be made in its own single- or multi-page Xara file to ensure
maximum naming opportunity (see section 2.3); each Xara file (multi-page or not) can only
Note: In multi-page documents, layers in the Layer gallery exist document-wide and are not
page dependent; names in the Name gallery however are page specific and will only appear
for the selected page.
2.3.
Naming a website
The name of the website that appears in the browser can be set by going to File > Document
Info…, and entering a name in the Comment field. This name will be displayed in the browser
instead of the HTML filename.
Only a single name can be given to a Xara file, even if it contains multiple pages, so in general,
each distinct section of a website (e.g. photo section, download section, help section etc)
should be made in its own single- or multi-page Xara file to ensure maximum naming
opportunity. It is recommended that the main page of the HTML website be a single page and
exported with the name index.htm to ensure it loads first when uploaded to a web server. The
rest of the website can be designed in separate Xara files and exported as other, more
informatively named HTML files. This implies multi-page websites may consist of at least two
HTML (and Xara) files; this is demonstrated in Chapter 3. If the entire website is designed in a
single Xara document, not only can only one name be used (e.g. “index”), but the URLs of the
pages end up being labelled as “index”, “index_2” etc.
Note: When displayed in a browser, HTML pages exported from multi-page Xara files (covered
in section 2.2) will have the name given to it in the comment box appended with “Page x”
where x is the page number. For example, if a multi-page website was given the name MySite
in the Comment box, then in the browser, the tabs would show “MySite Page 1”, “MySite Page
2” etc. This does not occur for single page exports though.
2.4.
Background image
The colour or bitmap image fill of the page in the Xara document will become the webpage
background.
•
To set the page background colour, hold Ctrl and drag a desired colour from the colour
•
To set the page background to be a bitmap image, open the Bitmap gallery (F11),
used in the document appear in the Bitmap gallery. Load an image into the document
for it to be shown in the Bitmap gallery.)
Note: Due to how HTML works, backgrounds are tiled over the whole browser screen and not
clipped to the page as in Xara. To ensure a fixed size background in a webpage, a manual
background object must be made in Xara. Draw an object around all other objects and send it
to the back, and fill it as desired. This object will simulate a fixed-size background in the
browser.
2.5.
Text handling
2.5.1.
Displaying HTML text
Ordinary text in Xara that is not grouped or part of a more complex object type will export and
display as standard text in a browser. If the text is grouped, it will export as a bitmap image.
2.5.2.
Font size units
Text should be designed in Xara to be whole pixel units in size, and ideally not whole point
sizes. While whole point sizes will export as whole point sizes in HTML, points produce
different results when displayed on Macs compared to PCs.
Fractional pixel font sizes should also be avoided. Different browsers will round either up or
down any fractional pixel sizes, producing different results in the browser to what is designed in
Xara. For example, text with a size of 10.9 pixels will be rounded either up to 11 pixels or
down to 10 pixels by the different browsers, and will look quite different to what was designed.
In Xara, the default font size units are points. While “10 pix” can be entered in the font size
toolbar control for example, it will show as “7.5 pt” once accepted. The font units that Xara
displays can be changed to pixels in the options dialogue: Utilities menu > Options
2.5.3.
HTML and browser limitations
2.5.3.1.
Browser display differences
Unfortunately, different browsers can display text slightly differently to each other. It is
recommended that a webpage containing text be checked in various browsers for display
differences. Recall from section 2.5.1 that grouped text will be exported as an image however,
and images should look the same in all browsers.
2.5.3.2.
Using standard fonts
To maintain maximum compatibility of a website with the various browsers and platforms, it is
recommended that the common fonts be used for text (unless the text is exported as an
image). Standard fonts include:
• Arial
• Impact
• Arial Black
• Lucinda Console
• Comic Sans MS
• Lucinda Sans Unicode
• Courier New
• Palatino Linotype
• Georgia
• Tahoma
• Times New Roman
• Verdana
• Trebuchet MS
2.5.3.3.
Rotated text
Rotated text is always exported by Xara as a bitmap because browsers either don’t support
vector text at an angle, or if they do, display it with poor quality.
2.5.3.4.
Justification and tabs
HTML restrictions often prevent accurate displaying of right justified or fully justified text. If text
is designed in Xara with full or right justification, it may not always display correctly in
browsers. Left and centred text should display correctly however.
Tabs, indents, and other related text formatting displays correctly in HTML for left and centred
text relative to their original design in Xara, but may not display correctly for other text
justifications.
2.5.4.
Repelling text around objects
HTML doesn’t directly support the text repelling feature offered in Xara, but the HTML code
produced on export accurately simulates its effects, and thus it can be used when designing
webpages. It will only display correctly however for left and centre justified text.
2.6.
Image handling
2.6.1.
Image formats
JPEG images in a Xara document will export as JPEGs, but all other images will export as
PNGs.
To force an object to export as either a PNG or JPEG, give it the name “JPEG” or “PNG” as
desired. Note that an object can have many names assigned to it.
To name an object, select it and either:
1.
name in the dialogue that appears, and press Create. Or;
2.
name in the dialogue that appears, and press Create.
2.6.2.
Transparency handling
If using transparency on JPEG photos, it may be necessary to set it to export as a PNG, as
described in section 2.6.1. JPGs do not support an alpha channel for transparency whereas
PNGs do and this can lead to display differences in browsers when the webpage is exported.
If there are only graphics underneath the transparent JPEG photo in Xara, then it will not be
necessary to export the transparent JPEG as a PNG because the graphics under the photo will
be exported as part of the new JPEG photo and will display identically in browsers.
However, if there is text visible underneath the transparent JPEG photo, naming it to export as
a PNG will be necessary because the browser will likely display the text slightly differently to
how it is shown in Xara (as discussed in section 2.5.3.1), and there could be a discontinuity in
2.6.3.
Photo auto optimisation
All photos (JPEG or PNG) in the Xara document will be re-rendered at 96 pixels per inch
(ppi)—screen resolution—on HTML export. 96 ppi is the maximum resolution that can be seen
on screen and so exporting at higher resolutions would be without advantage and inefficient for
websites.
2.6.4.
Image tags
Alt and Title tags can be assigned to images in Xara.
The Title tag is displayed when the mouse cursor is hovered over the image in a browser. It’s
also used by internet search engines to help identify images when performing image searches.
The Alt tag is shown on images when they can’t be displayed, or for assistive technology such
as web readers for the blind.
Assigning tags is done by naming the images with the following (using the process described
Title tag
Title="<title text>"
Alt tag
Alt="<alt text>"
For example: Title=“This is photo 1”.
Note: Title tags can be added to hyperlinked text in the same way as images, allowing more
details to be displayed on short-text links when the mouse is hovered over it. Just highlight the
text-link in Xara and assign it a Title tag name.
2.7.
Links
There are several types of link that can be assigned to images or text and they can be
separated into two main categories: navigation-based links and content-based links,
determined by whether links are assigned using the Web Address… dialogue (Ctrl+Shift+W)
or the Name gallery (Ctrl+Shift+F9). These two types of link will be discussed in their own
subsections below.
2.7.1.
Navigation links
Objects can be assigned a link which will navigate to a different part of the website being
created, or to another place on the internet. Links can even be given which will load email
editors or reveal hidden layers. These links are discussed in their own subsections below.
To assign any of these navigation links, select either the portion of text, or any objects, and
open the Web Address… dialogue by either right-clicking on the object and selecting Web
Address… or by using the keyboard shortcut (Ctrl+Shift+W). Then enter the appropriate link
in the URL box and press the Add button.
The Web Address… dialogue is a modeless dialogue—like many in Xara, allowing it to remain
open and on-screen at all times. This allows for speedy use, as the dialogue contents update
when an object is selected.
2.7.1.1.
To another page
To navigate to another page in the website, enter in the URL field of the Web Address…
dialogue (Ctrl+Shift+W) either “##X”, “_X” or just “X” where X is the Xara page number (shown
in the bottom right of the Xara application when multiple pages are present in the
Multi-page websites.)
2.7.1.2.
To a named object
Linking to a named object is the most versatile method of linking to other pages within a multi-
page Xara file, as the link leads to the correct place even if the page order is changed during
later design. For example, if on page 2, there is a photo that has been given the unique name
Main Photo, then an object on page 1 can link to it, and it will lead to page 2 when clicked. If
page 2 then becomes page 3 after some design changes, the link remains valid and will
instead navigate to page 3. If the object on page 1 had instead been given the link 2 for page
2 where the photo was originally placed, the link would then direct to the wrong page. (Linking
To link to a named object:
1.
Name an object on the destination page with a unique name e.g. LinkObject (naming
2.
Select the object that will link to the destination page (the activation object) and set the
URL field in the Web Address… dialogue to that same name e.g. LinkObject, and
then press the Add button.
3.
In a browser, when that activation object is clicked, the page that the named object is
on will load.
Note: Linking via named objects can only be done using objects that are in the same Xara file
as the activation object. It is not possible to use relative paths to link to objects that are in
HTML websites created from other Xara files. This is not a problem however, as other HTML
files have their own unique names which can be linked to (see section 2.7.1.3), and this
includes multi-page websites which have separate HTML files for each page, with sequential
numerical indices at the end of the filename.
2.7.1.3.
To another HTML file (webpage)
To link to another HTML file (webpage) that has been created from another Xara file from the
current one being designed:
1.
Select the object that will link to the destination webpage (the activation object), and set
the URL field in the Web Address… dialogue to the name of the HTML file e.g.
OtherWebsiteFile.htm, and press Add. This can also have a relative path before it to
specify its location if not in the same directory as the one currently being designed, e.g.
Some Directory/OtherWebsiteFile.htm. Note that other Xara-made multi-page
websites have HTML files with unique names generated for each page, making linking
this way easy.
2.
In a browser, when that activation object is clicked, the linked HTML file will load
displaying the webpage.
Note: This is slightly different from linking to websites on the internet with full http URLs—see
2.7.1.4.
To an Internet address
An internet address can be set as an object link:
1.
Select the object that will link to the destination webpage (the activation object), and set
the URL field in the Web Address… dialogue to the name of the website e.g.
www.google.com. ‘www’ addresses are automatically corrected for the full path if the
Correct URL automatically checkbox is checked, for example, entering
www.google.com and pressing Add will cause the address to change to the full
http://www.google.com.
2.
In a browser, when that activation object is clicked, the internet webpage will load.
2.7.1.5.
To a Popup layer
The name of a layer in the Layer gallery (F10) can be set as a link in the URL field of the Web
Address… dialogue, which is necessary when using popup layers. When the mouse cursor is
moved over the object with the link, the popup layer contents will appear. See section 2.8.3 for
the full details about popup layers which involve more than just linking.
2.7.1.6.
To an Email address (Mailto command)
To cause a mail editor to load with an email address set when an object is clicked:
1.
Select the object that will link to the destination webpage (the activation object), and in
the URL field in the Web Address… dialogue (Ctrl+Shift+W), enter mailto:<email
address>. Adding ?subject=<subject> will also include a subject in the mail editor, for
example: mailto:fred@123.com?subject=I’m emailing you!.
2.
Clicking the object in a browser will load an email editor, with “Fred@123.com” in the
To… field, and “I’m emailing you!” in the subject field.
2.7.2.
Placeholder links
Objects can be used as placeholders to display a variety of other things. Placeholder links,
unlike navigation links, are assigned by giving a name to the object using the Name gallery
(Ctrl+ShiftF9) rather than the Web Address… dialogue. Using the Name gallery in this way
is covered in section 2.6.1. The object will then be replaced with whatever it was linked to
when the webpage is viewed in a browser. There are a number of different kinds of things that
can be linked to, including images or animations from the web, offline images, animated gifs or
Flash animations (including multi-level Flash animations), YouTube videos, Google maps, and
other things. Each kind of placeholder content is discussed in its own subsection below.
2.7.2.1.
Photos or animated gifs
Including an animated gif image in the Xara document will not result in its animation when
exported as an HTML webpage and loaded into a browser. This is because (as discussed in
section 2.6.3) the gif image will be exported as a screen resolution PNG on export. A
placeholder object with a link to the gif must be used to display the animated gif in a browser.
The animated gif being linked to must be located either:
•
In the folder containing the files associated with the HTML webpage (created when the
webpage is exported and named <exported HTML file name>.htm_files); or
•
Online on an internet website.
To replace the placeholder object with the animated gif, assign the following name to the
•
If the image or animated gif is stored in the HTML images folder discussed above, then
name the placeholder object: IMG=“<image file name>.gif”, e.g. IMG=“butterfly.gif”.
•
If the animated gif (or any other image type) is located somewhere else on the web,
then name the placeholder object: IMG=“<website address>.<image extension>”,
e.g. IMG=“http://www.animatedgif.net/animals/bears/bear1_e0.gif”.
Note: IMG is short for image.
2.7.2.2.
Flash animations
There are two name types that can be assigned to a placeholder object for it to be replaced
with a Flash animation when the webpage is loaded in a browser. They are Flash and
SWFObject, the examples below use the Flash command. SWFObject is essentially a more
recent version of Flash script; if SWFObject produces unexpected results, use Flash instead.
(For those interested, further information about SWFObject scripts can be found at
http://code.google.com/p/swfobject/.)
The Flash animation being linked to must be located either:
•
In the folder containing the files associated with the HTML webpage (created when the
webpage is exported and named <exported HTML file name>.htm_files); or
•
Online on an internet website.
To replace the placeholder object with the Flash animation, assign the following name to the
•
If the Flash animation .swf file is stored in the HTML images folder discussed above,
then name the placeholder object: Flash=“<Flash file name>.swf”, e.g.
Flash=“Banner.swf”.
•
If the Flash animation .swf file is located somewhere else on the web, then name the
placeholder object: Flash=“<website address>.swf”, e.g.
Flash=“http://www1.istockphoto.com/file_thumbview_approve/8269312/2/istockp
hoto_8269312-ufo-interactive-animtation.swf”.
Multi-level Flash animations can be used with placeholder objects. Simply give the
placeholder object the name of the level0 Flash .swf file using the process described above.
However, there are additional things to know about getting multi-level Flash files to work
2.7.2.3.
YouTube videos
Embedding YouTube videos is similar to embedding Flash files as discussed in section 2.7.2.2.
The placeholder object for the video needs to be named with the video name using the
following command:
Flash=“<video name>”
The video name can be found by going to the video on YouTube, and in the Embed box to the
right of the video, find in the text the line “…src=…” and copy the address following the “=”.
For example, if the embed text reads:
<object width="640" height="505"><param name="movie"
value="http://www.youtube.com/v/stI9LQ0mjKY&hl=en&fs=1&rel=0"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed src="http://www.youtube.com/v/stI9LQ0mjKY&hl=en&fs=1&rel=0"
type="application/x-shockwave-Flash" allowscriptaccess="always" allowfullscreen="true" width="640"
height="505"></embed></object>
The text highlighted in red should replace <video name> above to read:
Flash=“http://www.youtube.com/v/stI9LQ0mjKY&hl=en&fs=1&rel=0”
There are additional switch commands that can be added to this web address text to force the
video to automatically play in high quality (HQ) or high definition (HD) mode.
Add to the end of the address:
•
&ap=%2526fmt%3D18 for HQ (480x360)
•
&ap=%2526fmt%3D22 for HD (1280x720 a.k.a. 720p)
For example:
Flash=“http://www.youtube.com/v/stI9LQ0mjKY&hl=en&fs=1&rel=0&ap=%2526fm
t%3D18”
Note that a video will only automatically play in HD with the above extension if the video was
uploaded at HD quality, otherwise it will play in standard definition (SD)—which is poorer
quality than HQ. HQ mode will always work however. Hence unless the video is HD or SD
quality, the address should always have the HQ extension added to ensure maximum playback
quality.
2.7.2.4.
Google maps (iframes)
Google maps rely on the use of iframes which are not directly supported by Xara 4 in
placeholder objects in the same way that Flash is supported. Getting iframes and Google
maps to work in Xara requires manual editing of the HTML file generated by Xara on export.
The process to get a working Google map embedded in a webpage requires the following
procedure:
1.
Go to Google Maps (http://maps.google.com/) and locate the default region to be
shown on the website.
2.
Click the Link button in the top right corner of the map and then click Customize and
3.
Select the desired options and then copy the code at the bottom of the window that is
4.
Paste this code into a text editor for use later.
5.
In Xara, create a placeholder object the same size as the map size indicated by the
width and height values in the code just copied.
6.
Give this placeholder object an Alt tag as described in section 2.6.4; name the object
Alt=“GoogleMap1” (or some equivalent name). This is to help easy location of the
required code later in step 10.
7.
Export the document as an HTML file using File > Export… (Ctrl+Shift+E).
8.
Go back to the code copied from Google Maps in the text editor. Locate the code
9.
Locate the HTML file generated by the export in step 7 and load it into another text
editor window.
10.
Search for the alt tag name supplied to the placeholder object in step 6.
11.
It will occur within a line of code associated with the image. This code is highlighted in
Figure 2.11. (Separate this code to make it easier to read by placing a few returns
before and after.)
12.
Paste the code from the clipboard to a location just before the code highlighted in
13.
The code associated with the image highlighted in Figure 2.11 will eventually be
deleted. First some if it is required to be placed in the iframe code highlighted in Figure
2.12. Select the code highlighted in Figure 2.13 associated with the placeholder object
style and copy it to the clipboard.
14.
Paste this code into the iframe code just after the text “<iframe> ”. The result is shown
15.
16.
Save the HTML file. When loaded into a browser, it will display the Google Map.
17.
It may be wise to save a copy of the iframe code in case the HTML file is re-exported
from Xara, overwriting all the manual changes made. If the location and size of the
placeholder object remain unchanged, it will be possible to replace the image code with
the copied iframe code and avoid repeating the editing steps. Future versions of Xara
may support iframes as easily as Flash avoiding the need to manually edit HTML.
2.7.2.5.
Picasa photo albums
Google Picasa (picasa.google.com) is a free photo management software utility, including
basic photo touch-ups and basic movie making capabilities. It is capable of generating Flash-
like slideshows of photos and outputs code that can be embedded into websites.
To incorporate Picasa slideshows in Xara-made HTML websites:
1.
Copy the embedding code given by Picasa to the clipboard and paste it into a text
2.
Copy the code relating to the web address of the Picasa Flash file highlighted in Figure
2.17 to the clipboard for use in step 3.
3.
In Xara, create a place holder object the same size as the width and height values in
<paste> with the code copied from step 2. Note SWFObject is used here instead of
command must be used here instead of the Flash command. This name will cause the
object to be replaced with the .swf Flash file linked to when viewed in a browser.
However, additional manual HTML code editing is required for this to work in Xara 4.
4.
Export the HTML webpage.
5.
From the Picasa code pasted into the text editor in step 1, highlight the ‘Flashvars’ code
6.
Load the HTML file exported from Xara in step 4 into a new text editor window. Locate
the code associated with the SWFObject placeholder object shown in Figure 2.19 and
separate it from the main code (to make it easier to deal with) by pressing return a few
times before and after it.
7.
Highlight the code in braces shown in Figure 2.20, and paste in the code copied from
8.
with a colon (:).
9.
Save the HTML file changes. When loaded into a browser, the placeholder object will
be replaced with the Picasa slideshow.
10.
It may be wise to save a copy of the swfobject code that has been manually edited in
case the HTML file is re-exported from Xara, overwriting all the manual changes made.
It should remain valid unless changes are made to the placeholder object, and it will be
possible to paste it back in replacing the original code if necessary. Future versions of
Xara may directly support Picasa slideshows and other similar features avoiding the
need to manually edit HTML.
Note: Copying and pasting from Notepad in Vista can sometimes introduce extra spaces owing
to bugs with its line wrapping handling. If these are introduced within a web address (such as
the code copied in step 5), the Picasa slideshow will not load until the spaces are removed.
2.8.
Mouse interactivity
Most webpages have interactive content that changes when the mouse cursor moves over it,
or is pressed down on it. There are three distinct types of interactive content: MouseOver,
MouseDown, and popup layer content which are discussed in their own section below.
2.8.1.
MouseOver
In HTML websites, objects or text can change their appearance when the mouse cursor is
moved over them. For example, a text link can change colour to indicate it can be clicked on.
There is a special type of layer called the MouseOver layer that can be used in Xara when
making websites, which deals with this kind of interactivity.
The MouseOver layer works by revealing its contents when the mouse pointer is moved over
an object that has a link assigned to it (an activation object—see step 2 below for what kinds of
links are valid). However, only the contents of the MouseOver layer that are within the
bounding box of the activation object are revealed—NOT the whole layer contents. This is
what distinguishes a MouseOver layer from a popup layer (section 2.8.3)—only part of the
MouseOver layer is revealed instead of all of it. Because of this, it follows that activation
objects should not overlap, otherwise the corresponding bounding regions will overlap and
display errors will occur.
To use the MouseOver layer and effects:
1.
Create a layer in the Layer gallery (F10) called MouseOver and make sure it’s above
the layer in the gallery that contains the activation objects.
2.
Assign the necessary navigation link to the activation object (navigation links are
3.
On the MouseOver layer, place whatever should appear when the mouse is moved
over the activation object, for example, in the case of a button, a copy of the button can
be used with its colour changed. (It’s recommended that the contents of the
button—including any text—be grouped into a single object.) The Paste in place
command (Ctrl+Shift+V) can be used after copying the original object to paste it onto
the new layer in the exact same place.
Note 1: Only one MouseOver layer can be made per Xara document, but it works for all pages
within the document.
Note 2: Only objects on one layer can be used to call the MouseOver layer, and they must be
on the layer closest to and underneath the MouseOver layer in the Layer gallery
(usually the layer containing the main page content). A consequence of this is that the
MouseOver layer can’t be called from other popup layer objects elsewhere on other
layers. This also applies to the MouseDown layer.
Note 3: The copies of the objects from the original layer that are placed on the MouseOver
layer (and MouseDown layer—see section 2.8.2), do not need to have links assigned.
While it doesn’t matter if they do, only the link on the original object on the main layer
will be activated when the button is pressed. The links on the objects on the
MouseOver and MouseDown layers do not get activated.
2.8.2.
MouseDown
The MouseDown feature in HTML webpages allows changes to be made to the document
content when the primary button is pressed down. For example, a button may change colour
when pressed to indicate an action will occur.
Using the MouseDown feature in Xara is identical to using the MouseOver feature discussed in
section 2.8.1 (which should be consulted before further reading) but with the following
differences:
1.
The MouseDown layer should be named MouseDown.
2.
The MouseDown layer should be above the layer containing the objects being clicked,
but can be either above or below the MouseOver layer.
2.8.3.
Popup layers
Popup layers are similar to MouseOver layers (section 2.8.1) and reveal the contents of that
layer when the mouse cursor is placed over an object with a link to that popup layer (an
activation object). Unlike the MouseOver layer, the entire popup layer contents are displayed
and not just the region of the layer corresponding to the bounding region of the activation
object.
Popup layers are typically used to display an area bigger than the bounding box of the
activation object, or when activation objects overlap. For example, a larger photo can be
displayed over the original when the mouse is moved over it.
An unlimited number of popup layers can be created in a website. Creating and using a popup
layer is similar to designing a MouseOver layer:
1.
Create a layer in the Layer gallery and name it as desired. Make sure it is above the
layer containing the original activation object. This will be the popup layer.
2.
Assign a popup layer link to the activation object (as previously discussed in section
the name of the popup layer in the Layer gallery. For example, if the layer was called
BigPhoto, then the URL box should contain the text BigPhoto.
3.
Make sure the Add button is pressed to assign the link.
4.
On the popup layer, place the contents that will be displayed when the cursor is moved
over the activation object.
2.9.
Using multi-level Flash animations
It is possible to use placeholder objects to display multi-level Flash animations. Using
placeholder object links with basic Flash animations has been covered in section 2.7.2.2. The
making of multi-level Flash animations is also discussed in section 3.3.3 of my Flash Animation
tutorial which can be referred to for supplementary information. Multi-level Flash animations
allow other Flash animations to be played within it, allowing for a much greater number of
effects that play independently of each other. Here, the making of a multi-level Flash
animation will be covered again in its entirety—tailored for inclusion in Xara-made websites, as
there are some slight differences when making them for Xara-made websites.
This section will be split into two subsections:
•
2.9.1.
Preparing the HTML webpage
1.
In a Xara webpage, create a placeholder object (which can be resized later to be the
size of the Flash animation).
2.
Export this webpage to generate the HTML file and the folder associated with it
containing all the image files etc.
3.
4.
With the multi-level Flash file complete, name the placeholder object: Flash=“<Level 0
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Website Creation
(Xara Xtreme 4)
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
Contents
Chapter 1. Introduction
Chapter 2. Features and functions
2.1. Page sizes
2.2. Multi-page websites
2.3. Naming a website
2.4. Background image
2.5. Text handling
2.5.1. Displaying HTML text
2.5.2. Font size units
2.5.3. HTML and browser limitations
2.5.3.1. Browser display differences
2.5.3.2. Using standard fonts
2.5.3.3. Rotated text
2.5.3.4. Justification and tabs
2.6. Image handling
2.6.1. Image formats
2.6.2. Transparency handling
2.6.3. Photo auto optimisation
2.6.4. Image tags
2.7. Links
2.7.1. Navigation links
2.7.1.1. To another page
2.7.1.2. To a named object
2.7.1.3. To another html file (webpage)
2.7.1.4. To an Internet address
2.7.1.5. To a Popup layer
2.7.1.6. To an Email address (Mailto command)
2.7.2. Placeholder links
2.7.2.1. Photos or animated gifs
2.7.2.2. Flash animations
2.7.2.3. YouTube videos
2.7.2.4. Google maps (iframes)
2.7.2.5. Picasa photo albums
2.8. Mouse interactivity
2.8.1. MouseOver
2.8.2. MouseDown
2.8.3. Popup layers
2.9.1. Preparing the HTML webpage
2.10. Editing the CSS file
Chapter 3. Making a simple website example
3.1. Designing main page
3.1.3. Making a menu bar
3.1.5. Exporting and testing
3.2.3. Modifying menu bar
3.2.4. Adding photo content
3.2.5. Making popup layers
3.2.6. Making Photos page 2
3.4. Uploading to host
3.5. Final comments
