FontExpert 2011 Help

Web Album

Contents

 

To create web album from selected fonts choose Fonts/Export to HTML... from the main menu:

Choose the template for your web album ("Basic White" is the default template included in FontExpert), type the album title, choose destination folder for album files and press Create button.

To customize the number of rows and columns on web album page, the size and colors of output font samples, choose Font Samples options page:

To change the file format of the images that will be displayed on created web pages, choose Output Image Format options page:

By default, we recommend the JPEG file format, as it is an image format supported by all web browsers.

FontExpert creates the web album index page linked to the A-Z pages, where fonts are displayed in alphabetical order:

A-Z pages display the navigation bar with links to neighboring pages and font samples:


Using and customizing Web Album Templates

This topic is recommended to users familiar with Web design and HTML markup language.

FontExpert comes with "Basic White" web album template. ("White" stands for the background color of web pages created with this template.) If you are familiar with HTML language, you can easily customize FontExpert Web Album template and create your own templates. FontExpert web templates are located in FontExpert folder:

Each template includes images folder and several files:

 
images The folder containing images used on web pages. You can place your own images to images folder and FontExpert will copy them to generated folder with your web album.
index.html.txt The template page for web album index (the album contents page).
page.htm.txt The template page for web album category pages (A-Z pages).
styles.css Styles used in web album HTML files .
preview.jpg 120 x 90 pixels preview image for web album, this preview image is displayed by FontExpert in Fonts/Export to Html.../Album Index/"Template:" window.

You can customize template pages and styles.

Here is an example of album index template file (index.html.txt from "Basic White") opened in Notepad:

The template includes some special fields substituted by real paths, file names, page counter numbers when FontExpert generates web album:

 
$ALBUM_NAME The title (by default: "My Font Collection").
$ALBUM_FONTS_COUNT Total number of fonts in generated web album.
$ALBUM_CATEGORIES_COUNT Number of categories (named A-Z) in web album.
$CATEGORY_FIRSTPAGE_URL The URL to the first page in category. For example, for "A" category this is the first page with fonts named on A.
$CATEGORY_NAME The name of the category, for example, "A".
{A_CATEGORY_ITEM_FORMAT} Special comment used to format a category item. "A_" prefix in the name means that this field is used on album index page only. (Special fields and formats named with "$ALBUM_" prefix or "A_" prefix are not used on category pages.)
{A_CATEGORY_ITEMS} The place in HTML file where category items (A, B, C, ..., Z) are inserted.

You can move special fields within HTML template, or even can delete some special fields if you do not want to display them in your web album. You also can use your own images in web album. Place your image files to images subfolder of the template folder and then you can insert references to your images in web album HTML template files: index.html.txt and page.htm.txt.

The category page template is similar to album index template, but includes another set of special fields. Most of special fields have self-explanatory names.

TUTORIAL

How to Create New Web Album Template

1. Copy entire "Basic White" folder under different name, for example, as "Basic Black".

Basic White and Basic Black folders should be the subfolders of FontExpert\HTML Album Templates folder:

FontExpert\HTML Album Templates\Basic White\

FontExpert\HTML Album Templates\Basic Black\

2.  Edit files in Basic Black folder.

Edit styles.css file, album index and category template files as desired. Change text color definition in template files from black to white, and background color from white to black.

3. Edit Basic Black\preview.jpg image in any image editor so that it looked like a preview of a web album with black background.

4. Open Fonts/Export to HTML... window. The "Templates:" window now should display two preview images: "Basic White" and "Basic Black".

5. Select new "Basic Black" template and generate new web album. HTML pages should appear with white text on black background.