Page 486 - Xara Designer Pro X17
P. 486
486 Web Graphics and Websites
As mentioned above, you can just paste the HTML code directly onto your page instead
of inserting it in this dialog (while in the SELECTOR TOOL). And using that approach
automatically gives you a placeholder image that looks just like the actual widget, so it’s
the recommended way to insert widget HTML code.
Warning: You need to be careful to insert only code which you know is safe and from a
trustworthy source. Invalid or broken code will affect your published web page because
Xara Designer Pro X simply inserts the code as you provide it, unmodified and
unchecked, into your page when it is exported.
If the HTML code that you enter references external files which are expected to be found
in your website, then you need to copy those external files into the support folder for your
design. See the Document Handling (on page 33) chapter for information about support
folders. Once in the support folder, the files will be automatically copied to the _htm_files
folder of your website when you export. Therefore you also need to make sure that any
references to these files in the HTML code references them at the right location.
Let’s take a simple example to make this clearer. Suppose I want to insert a small piece
of HTML code which adds an image to my website. The HTML code I add will need to
reference the image file somewhere. First I copy the image file, say "myLogo.gif", into the
support folder of my document. If the document is "mySite.web", the support folder will
be "mySite_web_files". I know that when I export this website, It will export it to the name
"index.htm" because the default name for the first page of the web site is always
index.htm regardless of the name of the .web file. This means that all the generated
images for my site, and a copy of "myLogo.gif" which I put in the support folder, will be
exported to the folder "index_htm_files". Therefore I must make the HTML code I’m
inserting reference the image file in that location. So I may insert:-
<img src="index_htm_files/myLogo.gif" />
Note that this references the image file in the exported image folder location (_htm_files),
NOT directly in the support folder (_web_files), because only the exported image folder
gets copied to the web server along with my web page when the site is published.
Of course if I really only wanted to put an image on my website, it’s much easier to just
import the image into Xara Designer Pro X directly! But this is a simple example that
shows how to add HTML code which references an external file.
Check Embedding YouTube, Flash And Other Widgets (on page 501) for more
examples!
Adding code to page head
Some code needs to be inserted into the head (<head> tag) section of the exported
HTML code, instead of to the body (<body> tag) section as it is by default.
To do this, click the HTML code (head) button in the Placeholder, Website or Page tab of
the Web Properties dialog and type in or paste your code.
