Page 317 - Xara Web Designer Premium
P. 317
Web Properties Dialog 317
To turn any normal object into a placeholder for a widget, select it and then open this tab
of the Web Properties dialog. Choose whether you want the widget to be based on a
piece of HTML code you’ve obtained from a widget website or a graphic file. Browse for
the file or paste in the HTML code. Click OK and now your object is a placeholder object.
This means the object represents the dimensions and position of the content you’ve
added, but in your exported web page the object is replaced by the actual code or file
that you inserted.
However there is an easier way to add files or code to your site. Simply drag and drop an
animated GIF files from Windows File Explorer onto your page. A placeholder image is
automatically generated for you and is placed on your page. A copy of the file is added to
the support folder of your design so that it gets exported and published with your site.
When you export and publish your site, the placeholder image is replaced by the actual
file you imported.
Similarly if you’ve copied some HTML code from a third-party widget website, you can
simply paste that code into Xara Web Designer Premium (make sure you are in the
SELECTOR TOOL when you do this, not the TEXT TOOL or it will be inserted as text!). Xara
Web Designer Premium detects the HTML and uses it to render a placeholder image
which appears on your page. You can also add a placeholder for HTML code directly into
either the body or head of a page by clicking the HTML code (body) and HTML (head)
buttons, which bring up a scrolling dialog where you can paste or edit large amounts of
code, if necessary.
When you export/publish your site the placeholder is replaced by the actual code so that
your widget functions. See the Website Widgets chapter (on page 436) for more details.
Replace with graphic file
Select this option if you want to insert a graphic or image into your website in place of the
placeholder object (eg. a PNG, GIF or other web compatible image file). Use the Browse
button to select the file.
The chosen file is automatically copied to the support folder for the current design, so
that when you export your website the file will be included in the _htm_files folder along
with all the generated images for your site. See the Document Handling (on page 64)
chapter for information about support folders.
Replace with HTML code
With this option you can paste HTML code which you’ve obtained from somewhere else
into the head and/or body sections of your page; i.e., between the <body></body> tags
or <head></head> tags. For example many sites provide widgets that you can add to
your page by pasting the HTML in here. Follow the instructions given by the provider. In
most cases you need to add body code only, but some widgets also require you to
include some code in the head, which is why the head code option is also provided.
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
