This will be a sort of a masterclass.
It is on how to handle external assets.
First off, it is best to start with a saved design file.
If you don't, the location of the external assets will be different until you make your first Save.
Xara sort of describes what is happening here: file:///I:/XPro+/help-html/help-html/xara_desktop/product_support/web_features/embedding_movie_audio_animation_files.html [Ref#1]
It does not really cover what I shall be describing as my approach is a development of this feature for any file type.
For it to make sense, I am going to start with putting images into Xara as external assets.
Images are more tangible and when you get them working, you can advance onto JS & CSS embeds.
This alone is very powerful if you have large images and want to keep their filename.
THE METHOD
Selection
Add a small box to your design. It doesn't matter where.
Pick Web Properties > Placeholder > Placeholder > Replace with graphic file. In your mind replace 'graphic' with 'any'.
Click the Browse button and change the Open dialog > File type from Image to All Files (*.*) to the right of the File name box.
Navigate and pick one of your saved JPEG or PNG images.
Click the Open button.
Press the Apply button.
Repeat (2.) for a small number of images.
Delete the original box.
Open the folder where your design is saved.
Locate the folder starting with the same filename as described in Ref#1.
- Open the folder and check all your images are there.
Linking to External Image Assets
- Note the filename of one of your images, say, <filename.jpg>.
- Create a Placeholder with the same relative dimensions.
- In the Placeholder Body, add <img src='index_htm_files/<filename.jpg>' width=100% height=100% />.
- Preview the design and check the image is rendered.
- Repeat (2.) for any number or repeats of the external image assets.
JavaScript Embeds
- Same Selection approach.
- Linkage into Website/Page/Placeholder > Body: <script src='index_html_files/<scriptname.js>'></script>.
- In the <scriptname.js> file itself, you need to remove any <script> & </script> Tags.
</script>
CSS Embeds
- Same Selection approach.
- Linkage into Website/Page/Placeholder > Head: <link rel="stylesheet" href='index_html_files/<stylename.css>'/>. This usually is fine but instead you can try the Body.
- In the <stylename.css> file itself, you need to remove any <style> & </style> Tags.
The powerful thing is you can alter these external assets contents without having to re-Publish the entire site.
I do expect questions on this.
Acorn
Bookmarks