• No results found

HTML Options

In document WEB BUILDER 12 MANUAL (Page 58-61)

Generate external CSS style sheets for page specific styles.

Enable this option to generate a separate CSS file with the styles used by a page. The name of the file will be the same as the page name. So 'index.html' will generate a 'index.css' file.

Inline styles will not be part of the style sheet! So for the best results your objects should make use of styles created in the Style Manager.

Generate single CSS style sheet for global styles.

Enable this option to generate a single CSS file with all styles created in the Site Manager. All pages will refer to this file.

The global style sheet will not contain page specific styles (like menu bar styles).

Optimize inline styles (experimental)

This is an option which attempts to clean up the HTML code by moving inline styles to the page's style sheet.

Note:

This option will process all HTML elements on the page, however not all (third party) extensions may support this behavior. So please test all functionality of your website before using this!

Web Fonts (@font-face)

• Do not use @font-face (default)

No code will be generated to support non-web safe fonts.

• Automatically use @font-face for non-websafe fonts.

If you enable this option you will be able to use any type of true type font even if it's not web safe by using a new CSS3 feature called @font-face. WYSIWYG Web Builder will automatically generate the necessary code and upload the font to the server. It will even generated a secondary (eot) font file required to make this feature work with IE!

• Manually specify @font-face fonts.

In some cases it's necessary to manually configure @font-face. For example if it's not possible;

to automatically determine the filename associated with a specific font or if you want to use separate files for each format. Enabling this option allows advanced users to manually link font files to a specific font.

Notes about @font-face:

- Be aware that font files can be pretty large, so they can add a considerable weight to the page.

- Make sure you check the license of the font you wish to use, as most fonts are not licensed to allow this kind of use. Making the font available on your server violates most end user licensing agreements.

- Unfortunately Internet Explorer requires a different font type (EOT instead of TTF), so the software will automatically generates the EOT version of the font. This means that you will end up with two versions of each font!!

• Use Google Fonts for non web-safe fonts

Enable this option if you plan to use Google Fonts in your project. If this option is enabled then the software will assume that all non web safe fonts you are using are Google Web Fonts and it will automatically generate a link to the font in the HTML code, so you do not have to do that manually. Note however that to use Google Fonts during design time you must have it installed on your computer!

Here's how you can install a Google Font on your computer:

1) Visit the Google Fonts website: http://www.google.com/fonts/

2) Find the font you want to use and add it to a collection (Click 'Add to collection'). Take note of the font name, you will need it in step 6.

3) To be able to use the font on your computer you will have to download and install it so it will be available in WYSIWYG Web Builder (and other Windows software).

Click the “Download your Collection” link at the top of the Google Fonts website and you’ll get a zip file containing all the requested font(s) in TTF format.

4) Unzip the collection and and drag the TTF files to your Windows fonts folder. (In Windows 8:

Control Panel\Appearance and Personalization\Fonts). The font(s) will now be available to all your Windows applications.

5) To see the font in WYSIWYG Web Builder, make sure the option 'Display web safe fonts only' is disabled: Menu->Tools->Options->Miscellaneous

Note: Some Google fonts require additional parameters. You can add those parameters by clicking the 'Manage' button. Next click 'Add' and select the font family. In the Parameters field specify the parameters.

Example:

&subset=latin,cyrillic-ext or

:400,700,900&subset=latin,cyrillic

Use CSS3 gradients instead of images (when possible).

Enable this option to generate CSS styles for background gradients instead of images. This reduces the number of images generates for the page. Keep in mind however than not all browsers (especially Internet Explorer!) do support CSS3 gradient yet. Also note that not all gradients styles are yet supported, for in some case images still will be used.

Include page name in automatically generated ID attributes.

This option will add the page name to automatically generated ID when a new object is added to the page. So for example 'Image1' it will become 'indexImage1'. Where 'index' is the name of the page.

This can be useful when you use lots of master pages in which case it will prevent duplicated ID attributes within a page.

Note: This option does not change your existing ID's only for newly created objects!

Enable HTML encoding (based on the selected character set).

This will save the document encoded with the selected codepage. This is a new feature in version 7.5 in an attempt to generate (even) better W3C compliant HTML documents. This option should be enabled unless you are experiencing problems with character display in browsers.

Enable URL encoding to prevent web unsafe file names.

Specifies whether to use URL encoding for file names. In general you should not use white spaces or other non-alphanumeric characters in file names, because it may confuse web servers and browsers (especially in combination with JavaScript). If you enable this option then the software will encode file names to prevent possible problems with invalid file names. Of course it's still better to make sure your filenames are valid before adding them to your website.

Use shared folder for assets (pages in folders will not have their own asset folder)

Enabling this option will share the asset target folder(s) for the entire website (including pages in sub folders!). This means that sub folders in the Site Manager no longer use a separate asset folder.

Note that you can set the target folder for specific file types in Publish & Preview. If this option is disabled then each folder you create in the Site Manager will have its own asset folder.

Generate external JS file for page specific scripts.

Enable this option to generate a separate JS file with the script used by a page. The name of the file will be the same as the page name. So 'index.html' will generate a 'index.js' file.

Move JavaScript to the end of the page

This will place all scripts at the end of the page and may result in better performance because the JavaScript will be executed after the rest of the page has been loaded. This is also known as

"Unobtrusive JavaScript".

Formatting

• Default

The HTML will be published "AS IS". No formatting will be applied.

• Beautify

Formats the HTML code so it looks better and is easier to read. If you select this option then the size of the page will slightly increase because of the extra white spaces added to the page. But in general this does not affect the performance in the browser

• Minify

This option reduces the size of the generated HTML and and may improve the performance of the page. However the HTML becomes more difficult to read.

Notes:

- Formatting will affect all HTML on the page. Including custom code and code generated by extensions!

- PHP and JavaScript will not be formatted.

In document WEB BUILDER 12 MANUAL (Page 58-61)