Art HTML Listing 3.0 Help www.zzee.com | Support | You are here: Contents > 6. User Interface

# 6. User Interface

## 6.1. Style Tab

www.zzee.com | You are here: Contents > 6. User Interface > 6.1. Style Tab

Here you can select the template for your project. Also you can perform template manipulations: copying, renaming, changing description and image, and edit template file. You can use template toolbar for these tasks as well as menu items.

Note, changing template will start a new project, clearing all settings on other tabs. So, don't change the template for saved project.

## 6.2. Ready Made Templates

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates

### 6.2.1. Classic List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.1. Classic List

HTML table. Displays filename, size and date. See a sample.

### 6.2.2. Modern List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.2. Modern List

Displays icon, filename, size, file type and date. Folders are shown in the same table with files. This style has icons and media types added in comparison with "Classic". See a sample.

### 6.2.3. Sortable Modern List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.3. Sortable Modern List

Like Modern, but table can be sorted by filename, size or date using "safe" Javascript. See a sample.

### 6.2.4. Download list

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.4. Download list

Displays icon, filename, size, date, approximate download time at 56K/s and MD5 hash. It is like "Modern" but download time column added and type is replaced by MD5. See a sample.

This template takes longer to process, because MD5 hash calculation takes time.

### 6.2.5. Tree

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.5. Tree

Static tree of files and folders with icons. See a sample.

### 6.2.6. Expandable / Collapsible Tree

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.6. Expandable / Collapsible Tree

Like "Tree" style, but folder nodes can expand and collapse. Collapsing uses "safe" Javascript. See a sample.

### 6.2.7. Website Tree / Map

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.7. Website Tree / Map

Website tree, also called website map. Only html files are handled. Instead of file names, HTML titles are used. This template can create a facility which is referred to as "web map", which is a convenient outline of web site structure. See a sample.

### 6.2.8. Framed Table of Contents

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.8. Framed Table of Contents

Expanding/collapsing Table of Contents supposed to be located in a left frame of a two frame layout. This template creates file "menu.html", the second file "index.html" can be found in the "templates" folder. See a sample.

You need to set the default right frame HTML page in index.html, and you may need to change the title of index.html. To deploy the template you will need to transfer both index.html and menu.html, which should be in the same directory, as well as all files used to make the listing. Then you need to call index.html file - it will have both frames with TOC at the left. See deployment for more information.

Template uses "safe" Javascript.

### 6.2.9. Javascript Dropdown Menu

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.9. Javascript Dropdown Menu

A classic vertical Javascript drop-down menu that resembles Windows Start menu. As all other templates, it is automatically created from the directory structure, using HTML files as terminal nodes, and folders as menu expanding nodes. Menu item text is created from HTML file titles and folder names. See a sample.

User needs to click on the folder item to expand it, and click on the terminal item to go to the file that it links to. We designed it this way, because "expansion on click" type of menu is more usable and friendly than "expansion on mouseover" type of menu. In particular, this approach allows page scrolling with menu expanded if there are way too many files to fit on the screen.

Menu is vertical, because vertical type of menu is much more suitable for the ones automatically generated from directory structure, as if the first menu layer was horizontal, then no more than 3-4 items would fit on the screen.

Menu uses "safe" Javascript.

### 6.2.10. PDA Download List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.10. PDA Download List

HTML file table optimized for a small screen of smartphones, PDAs, palmtop and handheld computers, etc. See a sample.

### 6.2.11. Compact 3 Column List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.11. Compact 3 Column List

List of files laid out into three columns for the maximum number of files on screen. For downloadable contents. See a sample.

### 6.2.12. Recursive Folder Listing

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.12. Recursive Folder Listing

Creates an HTML table with summaries. Suitable for long recursive folder/file tree, for local listings and for printing. Also can be used to make various playlists, as it features local absolute URLs to files. See a sample.

### 6.2.13. XML

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.13. XML

XML recursive listing of the folder. It can be used for various automation tasks. See a sample.

### 6.2.14. Simple Text List

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.14. Simple Text List

Simple text list of file names, one file/folder name on each row. It can be used for various automation tasks. See a sample.

### 6.2.15. CSV - Spreadsheet

www.zzee.com | You are here: Contents > 6. User Interface > 6.2. Ready Made Templates > 6.2.15. CSV - Spreadsheet

Directory listing in CSV (comma separated values) format. Most spreadsheet programs, such as Excel or OpenOffice Calc, can open / import CSV files. See a sample.