Undocumented and Advanced Web Features
Click here to view the thread on TalkGraphics
This is a complete list of the new special names and advanced Web features introduced in Web Designer / Designer Pro v6.
Files Folder
If in any placeholder code the files directory index_htm_files/ is referenced and your first page is not exported as index.htm all references to this folder will automatically be updated to the correct folder name.
For example:
A placeholder in your website may reference a file in the files folder. The HTML will be similar to src="index_htm_files/1.png"
This folder name will be correct as long as the first page is exported as index.htm
If you now export this document and specify the first page to be other than index.htm the placeholder will automatically be updated to the new folder name.
Exporting your site with the first page called home.html will update the references in the placeholders to "home_html_files/"
Layers
Layers that are in a hidden state (in the Page & Layer Gallery) on export are not exported.
These hidden layers can be forced to export by adding an exclamation mark at the beginning of the layer name.
For example change the layer name "My Hidden Layer" to "!My Hidden Layer"
Mark of the Web
In Web Designer 5, Extreme 5 and Extreme Pro 5 all pages were exported with Mark Of The Web enabled by default. In version 6 Mark Of The Web is disabled by default.
If you want to export pages with Mark Of The Web simply add the name <motw> to any object in your website. All pages in this document once exported will contain Mark Of The Web.
What is Mark of the Web?
Mark of the Web is a comment that is added to the HTML code of a web page. It is used by Internet Explorer when the page is opened so the browser can determine what security zone to open the page with.
For additional information on what Mark of the Web is, please click here.
For details on how to apply names to objects, click here
Photo Pop-up
Version 6 includes the Highslide pop-up feature that has replaced the old pop-up script used in version 5.
If you want to use the old script, you can do so by adding the name "NoHighSlide" to the thumbnail image that you want to use the old pop-up style.
This needs to be applied on a photo-by-photo basis, meaning that you can have a site which uses the old style of pop-up for some images and the new Highlide pop-up with others.
For details on how to apply names to objects, click here
Highslide Tweaks
Center image pop-up view
Default behavior: pop-up image opens over the thumbnail image.
Applied behavior: all image pop-ups on the page will open in the center of the browser windows.
Create a placeholder and apply the name <head> to it.
Copy this line of code into the Placeholder tab, under the option Replace with HTML code: <script type="text/javascript">hs.align = "center";</script>
Display caption text on left/right of image
Default behaviour: caption text below image.
Applied behaviour: The image caption text from the Web Properties -> Image tab will be place on the left or right of the image, instead of underneath
Create a placeholder on the page canvas and apply either of these lines of code to it.
Left:
<script type="text/javascript">hs.captionOverlay.position = 'leftpanel';</script>
Right:
<script type="text/javascript">hs.captionOverlay.position = 'rightpanel';</script>
For a full index of available Highslide tweaks, go to the Highslide Editor site
Text
By default each line of text is exported within its own span elements.
By applying the name "HTMLBlockText" to a text object, the text is then exported without placing each line in separate span elements.
This is less WYSIWYG than how the page is exported by default but it may be more suitable for further editing of the exported HTML in external editors and web authoring tools.
For details on how to apply names to objects, click here
Auto Highlighting
By default, the button that links to the page you are browsing is automatically highlighted with the mouse over affect.
If you want to turn this feature off, it can be done by applying the name "NoAutoHighlight" to the object.
Please note that it is only buttons that support this feature, it cannot be applied to nav bars.
This needs to be applied to each button that you want to disable this for, meaning that you can have a site which uses auto highlighting on some objects and no auto highlighting on others.
For details on how to apply names to objects, click here
Inserting code
Many will already be familiar with how to add your own code to the head of a document, as explained in this support article
There is now the ability to add your own code at the very beginning of the exported HTML page (for server side scripts).
Similar to the <head> placeholders, create a placeholder and apply the name <html> to it.
For details on how to apply names to objects, click here
Page Clipping
By default, objects that flow over the edge of the page area, as defined in the Page size tab of Web Properties are clipped.
To disable this, so that objects on the page are not contrained and clipped to the page dimensions, apply the name "NoPageClipping" to any object on the page.
This feature only disables page clipping for the page that it has been applied on. If you want to disable it on multiple pages, then an object on each of those pages will need to have this name applied to it.
For details on how to apply names to objects, click here
Char Set
Some requests came in to allow overwriting of the declared char set that is used.
This is now possible by applying the name that begins with "charset=" to any object on your site. For exmaple "charset=UTF-8"
This affects all pages in your site, so only needs to be applied to 1 object.
For details on how to apply names to objects, click here
Pop-up Layers
Simple use of locking pop-ups
A pop-up layer that contains "(lock)" is a locking layer. If it's been opened with the on-click layer pop-up it will lock visible until explicitly closed. However, if initiated by a mouse over pop-up then it is not locked. To close the locked pop-up you will need a button (any object with a link) placed on this layer with the URL link set as "popup:close".
Advanced use of locking pop-ups
- Any URL that begins with "popup:" is treated as a special command that can open and close multiple pop-up layers simultaneously.
- You have to list layer names in quotes.
- All layers following the "popup:" are opened.
- All layers following the "close" word are closed.
- All layers following the "open" word are opened.
- If there is a "close" word that is not followed by any layer name, it closes the layer on which this button is placed (see the simplified use).
Note: all layers listed in such links are automatically recognized as pop-ups.
Note: the pop-up layer names must only contain lower case letters to work correctly with this feature.
Example:
popup: "popup1", "popup2" close "popup3"
In this example popup1, popup2 and popup3 are the names of 3 pop-up layers.
popup: "popup1", "popup2" part of the command link opens layers popup1 and popup2.
close "popup3" closes the layer popup3.
Layer pop-up transition effects
Now the pop-up layers can fade-in and fade out on opening and closing. To make pop-up layer fade in place following keyword in the layer name "(fade-in 2)". The digit represents the speed of the transition. 1 is the slowest, 5 is the fastest. If you skip the digit, the default value of 3 is used. You can also set the fade in and fade out speed separately with following keywords: "(fade-in 2)", "(fade-out 5)".
Important: if you have used (fade-out) in the layer name you have to add the (fade-in) as well.
Expanding the previous example:
popup: "popup1 (lock)(fade-in 3)(fade-out 5)" "popup2 (lock)(fade-in 3)(fade-out 5)" close "popup3 (lock)(fade-in 3)(fade-out 5)"
In this example, each of the layers have the (lock), (fade-in) and (fade-out) attributes applied which alters their behavior.
The popup: command opens the layers and because of the values set in their attributes the pop-up layers will fade in at speed=3 and will remain locked open until a link that has a close command is clicked.
The close: command closes the locked popup3 layer and this will fade-out at speed=5.
Apply Filename
You may want to specify the filename that an object in your website will be called on export, for example so you can easily reference it elsewhere in your site.
To do this, using the name tag apply a name to the object filename="mypicture"
Where "mypicture" is replaced by the filename that you want to export your object as.
Do not add a file extension, that will be added automatically on export based on the image type.
Take care to aviod naming conflicts with other objects in the site. To avoid naming conflicts with autogenerated names simply make sure that the filenames do not begin with a digit.
For details on how to apply names to objects, click here
Registry Edits
There are some new registry settings used by the HTML export filter introduced with Web Designer 6 and Designer Pro 6.
They are all located here: HKEY_CURRENT_USER\Software\Xara\HTMLFilter\3.0
To apply these registry key changes, toggle the (Default) key value between 0 and 1.
ExportEmptyTitles
This key disables the tweak that forces IE to not show a tool tip with the alt property. In case there's no title property we now add an empty one by default.
Disabling this registry setting will export the old way.
Setting the registry key to 1 exports an empty title property, setting the key to 0 will only export a title property if it contains text.
IE7compatibility
In version 5 the compatibility mode was explicitly set so that IE8 would work in IE7 compatibility mode. This is no longer necessary so it is not set by default. It is possible to enable it here if you wish.
Setting the registry key to 0 does not export the site in IE7 compatibility mode, changing the registry key to 1 forces compatibility mode on export
MarkOfTheWeb
This is disabled by default. See the tab 'Mark of the Web' on how to enable this for an individual file. This registry edit will enable the setting permanently so it would not require the <motw> name applied to an object.
Setting the registry key to 0 disables this feature, setting it to 1 forces all exported pages to contain this feature.