Introduction

Designing an attractive and professional looking web site used to be both time consuming and expensive. Finally, with StudioLine comes the all-in-one solution, which gives a web designer complete freedom in imaginative page layouts, previously only possible with printed media. At the same time, StudioLine delivers an extensive array of image filters and dazzling text effects that previously required specialized photo editing tools.

The Web Edition of StudioLine incorporates the Photo Edition, which will gather digital photography directly from most cameras. After optimizing and categorizing images, they may be used for web site projects, high-quality prints, slide shows or picture galleries that can be shared via email or the web.

Concepts

StudioLine employs DHTML to deliver previously unseen flexibility in the layout of web pages. Text, images and other content are freely positioned anywhere on a page - and may be layered to add dynamic to a design. Without any knowledge of HTML or scripting languages, even novice users create superior looking and functioning web sites that are not effected by browser differences.

Professionals appreciate rapid development times thanks to StudioLine's exclusive battery of timesaving features, which eliminate repetitive steps for like objects. Projects are completed in less turn-around time and require reduced maintenance effort, due to StudioLine's ability to perpetually remember, reverse, duplicate or re-sequence any number of text and graphic effects.

Modes of Operation

Traditionally, web designers were forced to a piecemeal approach. A number of distinct tools, such as an image editor, an HTML editor had to be mastered to design or program individual elements of a web page. Only after assembling the results was the user able to view the outcome and recognize where refinement was needed. Usually, the process required numerous iterations before completion.

StudioLine has been designed from ground up to integrate all steps of web design in a single software. Positioning of elements, treatment of headlines, photo effects, roll-overs and any other special functions are all applied directly in StudioLine's page editor. The result of each decision is immediately visible in the context of the full page. Appropriate DHTML code and scripts are created automatically when the site is published.

Innovative web design with StudioLine is accomplished in four operating modes:

Mode
Function
Page Editor

The "core" of the StudioLine software. Any new page will be based on the default Layout Template defined for the site. Additional images, text and other elements can be added and then treated with a broad range of special effects and graphics filters - without effecting original images.

StudioLine uses exact (absolute) positioning of elements. They will not change their relative position in differently sized browser windows. The Page Editor also provides a special container into which the user can place elements to let the editor manage the arrangement.

Layout

Each page has an associated Layout. It defines common design elements such as the background, logos, headlines, the container, place holders for image variables, navigation buttons and other standard buttons. The Layout also sets image processing defaults for the Page Editor.

Recognizing the importance of visuals to a successful web presentation, StudioLine offers unique features for image collections. Each Layout can define automatic picture views to quickly build fully functional image galleries with interlinked thumbnail views, detail views and full-screen views.

Layout Template

Layout Templates control the initial appearance of a page. When a page is created, the site’s default Layout Template is used to initialize the Layout for that new page.

Image Archive

A central repository for final, high-resolution versions of the user's images, which have been treated and optimized by any number of photo effects. Properties and variables can also be associated with images. Use of the Image Archive is not mandatory, but will ensure best and consistent appearance of images across any number of web sites and pages.


Documentation

To accommodate the different needs of users’ various experience levels, the StudioLine documentation is organized in the following chapters:

Introduction

A conceptual view of the StudioLine will briefly introduce the key components of the product. By gaining an understanding of the software's philosophy, users will be able to fully benefit from its innovative approach.

Installation

Information about setting up and maintaining StudioLine on a workstation.

Tutorial

Instructions on how to create a sample web site in a few simple steps. Even experienced web designers should take this quick tour.

User Guide

Fully experience the vast capabilities of StudioLine by following in-depth explanations. This is meant to be a companion for users working on their own web site projects.

Tips & Techniques

Tricks combining different features of StudioLine to open endless possibilities for advanced users.

Reference

Concise descriptions for the StudioLine graphical user interface, such as menus, toolbar, panels and context menus.

Appendix

A collection of tables, charts, technical background and other miscellaneous information.

Accessing as Online Help

The reference information and most other chapters of this documentation are available as online help from within StudioLine, simply by press the F1 key. StudioLine’s online help is context sensitive. Whenever possible, it will open a chapter of the documentation that is relevant to the currently opened panel or menu.

Symbols Used

Throughout this documentation, common symbols are used to concisely relate certain concepts or information.
Suggested Reading

This will point to a different section of the documentation, where the subject is covered more in detail.

Drag Source

Items marked as a Drag Source may be copied or moved with the mouse by way of a Drag & Drop operation.
Drop Target

Items marked as a Drop Target may be receive objects or settings by way of a Drag and Drop operation.

Revision Status

This document applies to StudioLine 1.0.0.12955, built July 15, 2002.

Last document update: 27-Jun-02 02:24


Preparation

  • Review the file README.TXT, located in the root directory of the StudioLine CDROM and on the StudioLine download site

  • Verify that your PC is compatible with the system requirements

  • Install or update required software components

  • Close all running applications until the Windows® task bar is empty


System Requirements

  • Windows® XP, 2000, ME, 98, Windows NT 4.0 SP5, or higher

  • Pentium II, 300 MHz or faster

  • 128 MB RAM

  • 80 MB available disk space for programs (allow extra space for data)

Recommended Settings

For best results, set your display properties to at least 800x600 pixels of screen resolution and choose the HiColor or TrueColor setting (with 65,536 or more colors).

Disk space requirements will increase substantially with the number and size of StudioLine created sites.


Software Requirements

StudioLine requires that certain software be installed on your PC. The Setup program will remind you to install the latest versions of any required components off the StudioLine CDROM. You may also download these components from the StudioLine web site.

DHTML Capable Browser

HTML pages created by StudioLine need to be viewed in a browser that is compatible with the specifications of the Document Object Model, Level 2, by the World-Wide-Web Consortium (W3C DOM Lvl. 2). Versions 4 or higher of Netscape® Navigator or Internet Explorer are compatible, as well as Opera Version 5.0 and higher.

Microsoft® Components

  • MDAC 2.5 - This component update, or a later version, is required for the StudioLine database. For multi-boot systems it is crucial that identical versions of MDAC are installed in each of the operating systems (e.g., Windows 98 and Windows 2000), sharing one and the same “Program Files” folder.

  • WordPad - StudioLine includes some helpful documents in .RTF format on the CDROM and in the program folders on your hard disk. To view these documents, you will need WordPad or a comparable text editor.

This program is included with Windows. If WordPad is missing, you can install it from your Windows CDROM:

    • open Control Panel and choose Add/Remove Programs

    • select Windows Setup, then Accessories

    • select WordPad


Installing the Software

Installation from CDROM

Insert the StudioLine CDROM in the drive to start Setup. If AutoRun has been disabled for your CDROM drive, open Control Panel and choose Add/Remove Programs.

Installation of Downloaded Software

The download version of StudioLine is compressed into a single program file. Locate the downloaded file SLSetup.EXE on your disk and run it.

Language Support

During Setup, StudioLine will adhere to the language settings of the operating system. Once installed, StudioLine offers a number of supported languages to choose from.


Relocating StudioLine

To relocate StudioLine sites to a different PC or to another disk, use the Export function.

Using Export

  • Export the Image Archive, Sites and Layout Templates

  • Install StudioLine at the new location

  • Import the backed up files.

File Menu - Export


Removing StudioLine

To remove StudioLine from a workstation, either

  • open Control Panel and choose Add/Remove Programs, or

  • select Uninstall StudioLine from the StudioLine Start Menu, or

  • locate the StudioLine program folder on your hard disk and run the program Uninstall.

StudioLine Uninstall Options

Uninstall Software Only

By default, only the StudioLine software will be removed from your disk. Any items you created, such as sites, layouts and the contents of the Image Archive, will be retained. Choose this option if you intent to reinstall the StudioLine software at a later time, e.g., to a different folder or hard disk.

Remove Sites, Layouts and Image Archive

This option also removes any source documents and files you created with StudioLine. Published versions of your projects (e.g., sites, HTML documents) are not effected, but you will not be able to revise those sites at a later time. Choose this option if you are replacing your PC, after successfully importing all your StudioLine sites to the new computer.

Remove Locally Published Sites

This option also removes the published versions of your projects from your workstation’s hard disk and networked drives. Uploaded HTML document and other files on the server are not effected. Choose this option if you are certain that no other users of your computer, LAN or Intranet are relying on your locally published sites.

Last Document Update: 26-May-02 14:56


QuickStep Bar

The QuickStep bar walks novice users through the basic steps of loading, editing, printing and sharing images. Clicking on a task will open an instruction window, as well as any panels that may be relevant for this task.

If the instruction window doesn’t answer all your questions, then click on the “More Information” button for a more in-depth description.

After becoming familiar with StudioLine, you can suppress the instruction window by clicking the button “Don’t show this hint again.” To restore the instruction window, choose “Show All Hints” from the Help menu.

If the QuickStep Bar does not appear, choose “Show QuickStep Bar” from the Preferences menu.


Importing Images

To use StudioLine for your images, they need to be imported into the StudioLine Image Archive. The Image Archive will always safe-keep the original image, so that you can safely experiment with the effects of the various StudioLine functions and not worry about losing your originals.

Locate your images on your computer:

Understanding the Terminology

Disk Drives

Computers and digital cameras are storing images as files. With Microsoft Windows, files are saved to disk drives. Each disk is labeled with a unique drive letter (followed by a colon) and usually represents a physical device - either internal to your computer or some external unit. Most commonly, drive letters “A:” and “B:” are used for diskette or ZIP drives, “C:” is the hard disk. Other drive letters (“D:”, “E:”,…) may be assigned to additional hard disks or your computer’s CDROM or DVD drive.

Digital Cameras

There are two common interfaces to connect digital cameras to your computer. One method treats your camera like a scanner and uses the TWAIN interface. In that case, follow the directions supplied with your camera on how to copy images to your hard disk.

Many cameras are treated by Windows, as if they were simply another removable disk drive. Windows will assign an available drive letter (e.g., “E:”) as soon as your camera is connected and your pictures are immediately available to StudioLine.

Folders

Managing hundreds or thousands of images, documents, programs and other files on your computer would quickly become confusing. That’s why Windows organizes files in folders. In many cases, larger folders are further devided into sub-folders.

It may be helpful to visualize a disk drive as the root structure of a tree. The very top of the root structure is the main folder – also known as “root”. The first level of branches represents any folders contained in the “root” folder. Each of the branches can branch out even deeper, representing another level of folders.

Locating Your Images

The StudioLine Explorer “Desktop” shows a list of all drives connected to your computer.

Double-click the drive letter that contains your images, e.g. “Removable Disk (E:)” for your digital camera, or “Compact Disc (D:)” for a photo CDROM.

The left pane of the StudioLine Explorer panel lists any folders on the selected drive. The right “content” pane, lists the content of the top-level “root” folder on the selected drive. To keep the display concise, the content of other folders is not listed immediately. Double-click on any folders in the left pane, to open and view its content.

Typically, digital cameras store about 100 images per folder. Several image folders are then grouped together in a parent folder. To locate your first 100 images, you would have to double-click on drive letter “E:”, then on the parent folder “DCIM” and finally on the image folder “100abc”. (Of course, you would have to substitute the drive letter and the folder names with the appropriate letters and names applicable to your computer and camera.) To view the next 100 images, you would first have to return to the parent folder by pressing the button “One Level Up”:

Then click on the folder containing the next set of images, e.g. "101abc".

Importing Your Images

Once you located the images on your digital camera or your computer, you can drag them from the StudioLine Explorer panel to the StudioLine workspace:

  • Simply press the left mouse button on any picture.

  • Hold the mouse button while moving the mouse pointer to the background of the main StudioLine window.

  • Finally, release the mouse button and the image will be dropped on the Image Archive content pane.

This technique is referred to as “Drag & Drop”.

You can also import multiple images at one. To select more than one image, hold down the Ctrl key while clicking the left mouse button on the chosen images. You may also click between images, hold down the mouse button and drag it across the list of chosen images to create a selector band around them. You can still add additional images to your selection, by using the Ctrl key.

See the chapter on Selecting Objects, for further information. [->LINK].

Organizing Images

You can create folders in the Image Archive to better organize your images.

See the chapter on Creating Folders, for further information. [->LINK].

Viewing the Image Archive

Once you imported your images, they’ll appear as thumbnail pictures in the Image Archive content pane. Don’t be alarmed by the small appearance - the images are stored full size and are ready for further use.

See the chapter Working on Images for further information.


Working with Images

Before you can work with images, they need to be imported into the StudioLine Image Archive.

See the chapter Importing Images for further information.

Image Tools

In StudioLine, you edit your images by applying image tools to them. Each image tool performs specific functions against an image. For instance, there are images to rotate and crop, correct color hues or to subject the image to various special effects.

For every image, StudioLine remembers the tools you used and their settings and uses those when displaying an image. However, the original image is maintained unchanged. This way, you can experiment with image tools, change settings or reverse any actions – even months later.

Applying an Image Tool

To apply an image tool on an image in the Image Archive, select the particular image by clicking on it with the left mouse button. On the “Image Tools” panel, click on one of the tools and filters listed. A panel opens with the settings for the selected tool. Use the various controls to change the tool settings – and StudioLine will immediately update the thumbnail picture to show the effect.

There is no need to confirm your actions with an “OK” button. Any tools and settings can easily be changd or reversed at any time.

Applying Image Tools on Multiple Images

To apply the same tool against multiple images, first select these images before accessing tools or changing their settings: Press and hold the Ctrl key while clicking the chosen images with your mouse. You may also click left mouse button on the workspace background, then hold the mouse button down while moving the mouse pointer across the chosen images to create a selector band around them. You may still add additional images to your selection, by using the Ctrl key.

See the chapter on Selecting Objects, for further information. [->LINK].

Active Tools List

For every image, StudioLine remembers the list of filters that may have been applied and their settings. To view the list of active tools, select an image and choose “Active Tools” from the “Edit” menu. (You can also click the right mouse button on an image to access its Context Menu and then choose “Active Tools”.)

Changing the Processing Order

You can control the order in which tools are applied against an image, but dragging them in the Active Tools list. StudioLine will apply the tools top to bottom.

To illustrate the effect of the processing order, assume you applied the “Colorize” tool first and then the “Black and White” tool. The resulting picture will be black and white – totally negating the effect of any colorizing you did first. However, by changing the processing order, the image would be first turned into black and white and then the black and gray areas would be colorized. The result would be a uni-color picture with various color saturations.

Discarding Tool Settings

To discard the effect of an image tool, simply drag the tool from the “Active Tools” list of a particular image to the Trash Can in the upper right corner of the StudioLine window. If the tool’s settings panel is currently open, you may also select the particular image and then drag the “Copy” button from the top left corner of the tool’s setting panel to the Trash Can.

Copying Settings

There are a number of ways how you can copy tool settings from one image to another.

Dragging the “Copy” Button to a Single Image

  • Click the left mouse button on the image, which already has the correct image tools settings.

  • Open the image tool you wish to copy.

  • Drag the “Copy” button of the image tool’s settings panel to any other image that should inherit the identical settings.

Clicking the Copy Button

  • Click the left mouse button on the image, which already has the correct image tools settings.

  • Open the image tool you wish to copy.

  • Hold down the Ctrl key to select additional images (be certain that the original images remains selected!)

  • Click the “Copy” button of the image tool’s settings panel to apply the same settings to all selected images.

Using the Active Tools List

To copy the settings of a single image tool, drag the particular tool from the Active Tools list to any target images.

To copy all image tools, drag “Copy” button of the Active Tools list onto any target images (or use the Ctrl key to select additional images and then click the “Copy” button.)

Using the Lock Button

The “Lock” button will freeze the current settings of this tool. The button will turn red, to indicate that these settings are locked. You may now freely select target images located elsewhere in StudioLine (e.g., other Image Archive folders). When you have located a target image, use or drag the “Copy” button to apply the settings. You can continue this process as long as you choose. Once completed, unlock the settings by clicking the “Lock” button a second time.

Advanced Techniques

The Image Archive offers a number of additional functions that are covered elsewhere in the online help:

Image Preprocessing

Image Descriptors


Slide Show

The Image Archive content pane and the StudioLine Explorer display only thumbnail images of your pictures. The StudioLine Image Viewer can display your images also full-screen or in their actual size. Series of images can be viewed as a slide show.

To present your images in a slide show, they need to be imported into the StudioLine Image Archive. See the chapter Importing Images for further information.

Initially, the Image Viewer displays the first selected image. Drag the sizing handle to change the size of the viewer panel.

Click the VCR-style “Start” button to display all selected images, one at a time. The interval and other options can be controlled by clicking “Configure Slide Show”:

For the most appealing display, click the “Full Screen” button on the bottom left of the Image Viewer panel:

This will temporarily hide the Windows screen with all its program windows – including StudioLine. To exit the full-screen mode, press any key on your keyboard. You may also click the “Exit Full-Screen Mode” button on the slide show control bar:

If the control bar is not visible, click the right mouse button anywhere on the screen. The context menu allows you to enable the control bar.


Web Galleries

StudioLine can generate fully functional picture galleries that may be viewed with the popular web browsers and that can be published to a web site.

Each web gallery has an index page, showing thumbnail images of all pictures in that gallery. By clicking a thumbnail image, a page will open showing a larger view of that same image together with any narrative text. Navigation buttons allow you to browse other images in the gallery or to return to the index page.

Creating a Web Gallery

In the Image Archive, select any number of images. Then click the “Web Gallery” on the QuickStep Bar. The “Web Gallery” panel will open and allow you to choose from a number of gallery designs:

The left pane shows different styles for the thumbnail images. Click on any of the styles to preview the gallery’s index page in the right pane. Accept your design choice by clicking the “OK” button.

Next you’ll decide on a name for the gallery. Once you click “OK” again, there will be a slight delay while StudioLine generates the web gallery.

Customizing a Web Gallery

After generating the web gallery, StudioLine switches to Page Editor mode where you work on the gallery pages. Refer to the QuickStep bar for additional instructions.

To return to the Image Archive, click the appropriate button on the QuickStep bar, or, click the drop-down list “Page Editor” between the menu and tool bars and select “Image Archive”.


Send Images via Email

Sending Images via Email

StudioLine can create a new email message, attach your images and then and pass it to one of the popular email programs. Select any number of images, then click “Email” on the QuickStep bar. Or, click the right mouse-button on the selected images to open the context menu, then select “Send via Email”.

The “Send via Email” panel opens, where you can determine the size and file format of your image attachments.

Image Size

Click the Image Size button to change the outer dimensions of your image attachments.

Selecting the option “Original Size” will email the images at the full size as they are stored in the Image Archive. Otherwise, choose the most common sizes from the drop-down list or enter custom values for maximum height and width.

The maximum height and width define the outer dimensions into which each image attachment will fit. If necessary, images will be reduced appropriately while maintaining the orientation and aspect ratio. Small images will not be enlarged, as that would impair the picture quality.

Click the “OK” button to return to the “Send via Email” panel.

File Format

StudioLine will propose to email images in the widely recognized and very compact JPEG format. The transmission times during sending and receiving will benefit from the resulting small message size. The estimated size of the email message appears near the bottom of the panel.

For the JPEG file format, you can further customize the image quality by clicking the appropriate button. High qualities result in larger emails. Low qualities may be suitable for a series of images that is sent solely for discussion purposes.

Other file formats always use the quality of the original image. These file formats should only be used for specific applications – such as sending images for print purposes. If you need to send an image with transparent areas or irregular shapes, choose the TIFF or PNG file formats and select the option “with Transparency”.

Sending

Click “OK” on the “Send via Email” panel. If you have compatible email software installed, the program will start and open a new message with the selected images as attachments. Simply enter the recipient email addresses, type a cover letter and send when ready.


Printing

Select images to print, then click on the button “Print” of the QuickStep bar or the “Print” button on the toolbar.

Print Spooler

The selected images appear in the Print Spooler panel. The “View” button on the left toggles the image list between different display styles.

The buttons on the right control the print process in detail, such as the size, number and layout of images.

Number of Prints Per Image

This button opens a panel to choose the number of times an individual image is printed. This can be helpful, if the various guests of an event ask for copies of different photos you took. Select one or multiple images in the print queue, click the “Prints per Image” button and enter the number of prints needed.

Print Settings

Click this button to change the cut-out area, orientation or size of an image.

The drop-down list “Picture Format” lists popular image sizes. The cropping handles in the image preview area will adjust automatically, if the the aspect ratio of the chosen picture format is different than that of the picture itself. Any excess area is filled with a background color, which can be chosen by clicking the “Background” button.

To crop the image to the picture format, drag the cropping handles in the image preview area. If the aspect ratio is locked, two perpendicular cropping handles will automatically move proportionally. To define the exact cut-out area, click in the center between the cropping handles and drag the cut-out.

Refer to the Reference Guide for additional functions available on this panel.

Submitting to Printer

After choosing appopriate options for each image, proceed by clicking the “Print” button. This will include all images in the Print Spooler. To choose specific images for printing, select those images in the Print Spooler before clicking the “Print” button.

The “Print” panel opens.

If you have access to more than one printer, choose one from the drop-down list. The “Printer Settings” button will allow you to change options that are hardware-specific.

Two buttons allow you to limit the print process to any images that were selected from the Print Spooler – or to disregard the selection and print all images.

The “Copies” option determines how often each page will be printed.

Use the “Cropmarks” option, if you intend to cut the printed images with the help of a ruler and cropping blade.

Click the Print Preview button to view the effect of any options you have chosen.

“Images per Page” can be used to limit the number of images that are printed on the same page. This may be helpful when pages intended for a photo album. The “Maximum” option will minimize the use of expensive photo paper.

“Optimize Utilization” will change the order and orientation of images across all pages to minimize the number of printed pages. This option should be used, if you plan to cut the individual images from the printed page.

“Center on Page” will center the page content on the paper. This will produce the most aestetically pleasing look.

“Optimize Quality” will determine the exact resolution of the printer. If necessary, images are printed slightly larger, to match the printer resolution. The result are higher-quality prints – but the printing process may be slowed down significantly.


Page Editor


Preview

To preview and test a web gallery with a web browser, click “Render” on the QuickStep bar. StudioLine will generate the necessary HTML documents. This process may take a few minutes, depending on the number and size of images.

A message box will advise you, once the web gallery has been rendered. Choose “Preview in Browser” to open the gallery in your computers default web browser.

Verify that the appearance of the pages meet your expectations and test the links from the index page and the navigation between the individual image pages.

If necessary, close the browser and make adjustments in the StudioLine page editor. For another preview, click “Render” once again.


Publish


Image Archive

If you are done working on web galleries, click “Image Archive” on the QuickStep bar.

You may also use the “Mode” drop-down list (between the menu and tool bar) and select “Image Archive”.


Planning Sites

StudioLine easily accommodates web site projects of any size. If all your web sites consist of only a small number of pages and files, then there is no need for advance planning. You can add an organizational scheme later, as your sites grow.

In contrast, some planning considerations apply for large web sites, possibly with several distinct sections, each with hundreds or even thousands of pages, plus associated images, media objects and other files. With StudioLine, a web design firm can easily manage large projects or an extensive list of client sites by organizing all associated files into folders.

Choosing Names

Names for sites, pages, images and folders are internal to StudioLine. Descriptive names may be used without regard to character set limitations. Choosing sensible words and proper spelling improves the likelihood that you’ll later successfully find a page or image with the help of the StudioLine search feature.

Valid, permanent external names will be generated for the web server, when a page is first published by StudioLine. An external name closely resembles the initial internal name.

The advantage to separating internal from external names becomes apparent as the site grows or the structure of the site changes. With the StudioLine Explorer, a web master can freely rename objects or organize them in folders, even after the site has already been life for a while. External names and web addresses (URLs) are not effected by this reorganizing. Search engine positioning is maintained and visitors’ bookmarks continue to be valid.

Using Folders

Folders may be created and maintained in StudioLine Explorer and from most panels that create or save an object. You can freely invent and revise any organizational scheme using StudioLine folders, without regard to the published site. Folders are used only to organize your work inside StudioLine, they do not become part of the external web site address (URL).

Organizing with Folders

Sites

Most users may only maintain a very small number of sites, thus won’t require site folders. However, if you have a number of clients, some with an Intranet site, a staging site and a production Internet site, you could create a folder for each client to hold all related sites.

Layout Templates

If you are maintaining more than one site, each with multiple layout templates, it would be a good idea to organize your custom templates in folders per client and/or per site.

Pages

Grouping related pages into folders will help un-clutter a large site or to make use of automated folder links.

Image Archive

Image Archive folders may be created to represent clients, sites, subject areas, application or even periods of time. The best organization for you will depend on the type of images you collect over time.

StudioLine has a very powerful search engine to look for pictures across any folders. As long as you diligently store sensible descriptions with every picture, you’ll be able to locate them later in a snap.

The folders for the different object types are entirely separate of one another. One may choose to use folders for one type of object and not for another.

Sectioning a Large Web Site

Large web sites are often maintained by a team of web masters. Distinct sections, such as Products and Services, Customer Support, Corporate Public Relations may have different requirements or employ a specific look and feel. In StudioLine, one could treat each major web site section as a unique site. This way, each can be based on different layout defaults and be maintained on different workstations.

Sample Structure

Web Site Section URL
StudioLine Site
Remote Dir.

www.Kingfisher.StudioLine.net/Products/

Sites\Kingfisher\Products and Services

Products

www.Kingfisher.StudioLine.net/Support/

Sites\Kingfisher\Customer Support

Support

www.Kingfisher.StudioLine.net/Corporate/

Sites\Kingfisher\Corporate PR

Corporate

www.Kingfisher.StudioLine.net/

Sites\Kingfisher\Root

Creating a Site in a Folder

  • Use the “New Folder” button to create a folder “Kingfisher”, which will hold all the StudioLine sites related to the web site “www.Kingfisher.StudioLine.net”.

  • Make “Sites\Kingfisher” the current folder, by double-clicking it in the folders window.

  • Enter the name of the first site, “Products and Services”.

After you have worked on the Products and Services site, you can create any of the other sites in the “Sites\Kingfisher” folder, if this section is to be maintained from your workstation. If you ever make a mistake, simply use the StudioLine Explorer to rename or move existing sites into the correct folder.

Publishing Considerations

Once a site is completed, it must be published to the respective subfolder on the web server. This is accomplished by specifying the appropriate “Remote Directory” in the publishing profile of a site.
Publishing Profile

Implications when Linking

When sites are kept on a single workstation, then it is simple to create links between pages by using simple drag and drop. If multiple workstations are used to maintain distinct sections of a large site, then web designers have to manually enter appropriate URLs to link between pages contained in different StudioLine sites.


Page Editor

At the core of StudioLine is its page editor mode. Here is where pages are designed, images, text and effects are added and links to other pages are implemented.

To create a new page, either

  • choose New from the File menu, or

  • choose "create a new page" when opening a site.

The initial appearance of the new page, its background and common elements are controlled by the default layout template defined in the Site Settings. To choose a different design, select StudioLine Explorer from the File menu, find a suitable layout template and drag it onto the page.

Page Alignment

Most web masters decide to layout their pages to a standard, small width (e.g., 800 pixels). This accommodates visitors who have their PCs set to low resolutions or who don’t maximize their browser windows. However, when these pages are viewed in large browser windows, the page would normally appear flush left with a wide, empty margin to the right.

To change the vertical and horizontal page alignment, press the Page Align buttons in the tool bar.

Absolute Positioning

Content can be placed freely anywhere on a page. StudioLine’s absolute positioning maintains your composition of all text and visual elements on any supported browser, regardless of the size of the browser window. In addition, container objects are available to arrange objects automatically.


Text_Editor

StudioLine comes complete with a multi-lingual text editor, which integrates smoothly with many popular word processing tools.

Text is added by either:

  • dragging the Text icon from the menu bar to a location on the page, or

  • choosing New Text Object from the Text menu, then clicking the mouse on the page, or

  • clicking the right mouse button on the page and choose New Text Object, or

  • highlighting text in a word processor or other applications and then drag the text to the StudioLine page editor, or

  • starting a new instance of StudioLine and dragging text from a different page.

The default appearance of new text is controlled by the font properties in the Text menu. If the Font Properties panel is not currently open, then the font settings in the Preferences menu apply. If the Text Width panel is open, then this controls the initial width for a next text object.

Editing Text

After double-clicking an existing text object, the text ruler and tool bar become visible. Either can be dragged out of the way, if necessary. Sizing handles to the left and right of the text column are available to change the width.

Inserting, replacing, deleting and selecting text is done using standard text processing procedures. (If you are not yet familiar with text processing under Windows, please follow the exercise in the StudioLine tutorial.)

Use the Backdrop tool from the Image Toolbox to give the text object a background color.

The text editor is closed by clicking elsewhere on the page.

Keyboard and Selection Shortcuts

Del

Delete character at cursor.

Ctrl + Del

Delete word at cursor.

Backspace

Delete previous character.

Ctrl + Backspace

Delete previous word.

Ins

Toggles between Insert and Overwrite mode.

Home

Beginning of line.

End

End of line.

Ctrl + Cursor Up

Beginning of paragraph.

Ctrl + Cursor Down

Beginning of next paragraph.

Ctrl + Home

Beginning of First Paragraph.

Ctrl + End

End of Last Paragraph.

Ctrl + Left

Previous word.

Ctrl + Right

Beginning of next word.

Shift + Cursor keys

Moves the cursor to the appropriate position and selects any text in between.

Ctrl + B

Bold.

Ctrl + I

Italics.

Ctrl + U

Underlined.

Ctrl + J

Splits the current text object into two at the cursor position, or joins multiple selected text objects into one.

Ctrl + Shift + A

Toggle case between three states: lower case, mixed case, all caps.

Ctrl + Click or
Double-Click

Selects the word the text cursor is on. Drag the mouse on the last click to select additional words.

Shift + Click

Selects text block between position of text cursor and position of mouse pointer. Drag the mouse to change the text block.

Shift + Ctrl + Click

Selects text block starting from the full word at the text cursor position up to and including the word at the position of the mouse pointer.

Triple-Click

Selects entire paragraph. Drag the mouse on the last click to select additional paragraphs.

See the appendix for additional keyboard shortcuts that are available system-wide.

Text Editor Functions

Most text editor functions effect a specific text passage. Select an appropriate section of text before clicking a button on the text editor tool bar.
Color

Changes the color of the selected text.
Bold

Makes the selected text bold.
Italics

Changes the appearance of the selected text to italics.
Underscore

Underscores the selected text.
Link

Links the selected text to another page or bookmark.
Alignment

Aligns paragraph left, centered, right, or justifies paragraph to both left and right margins.
Bullets

Inserts a bullet in front of each selected paragraph and indents the text.

The text attributes for the bullet character (such as size and color) can be controlled by the carriage return for this paragraph. Choosing bold or italics will distort the bullet character. The typeface is fixed to the Symbol font.

Note: Bullets will only work for paragraphs with either left or justified alignment.
Search

Search for text in the currently selected area, the entire text object or all text objects of that page.

Search & Replace

Replace text in the currently selected area, the entire text object or all text objects of that page.
Spell Check

Checks text for possible spelling errors.
Language

Associates a language with the currently selected text for spell checking.

Paragraph Properties

The global text properties of a paragraph (such as color or font weight) are stored with the invisible end-of-paragraph marker, which appears as a space behind the last character. They control the appearance of the bullet for bulleted text. However, the font of a bullet is always “Symbol” and underscoring will not apply.

To change the properties or copy and entire paragraph, be certain to include the invisible end-of-paragraph marker in the selection.

Spell Checker

Spelling can be checked using different methods:

  • Global spell check: Choose Spell Checker from the Text menu or the text tool bar.

  • Check spelling as you type: Questionable words are marked with a wavy underscore. (This option can be turned off.)

  • Single check: Click right mouse button over a word. If it is not recognized, a list of alternatives will be offered.

When a questionable word is detected, one can accept suggested alternatives, correct the spelling manually, ignore the word or add it to a custom dictionary.

Languages

Text can be checked in a variety of languages. To associate a different language to a section of text, select the section and press the Language button on the text tool bar. The default language is determined by the operating system. Text that was pasted from a Word Processor will have inherited the originally used language.


Fonts

Most web design tools permit the browser to decide the ultimate display of text. The first problem arises, when the visitor’s computer is missing some of the fonts that the web master is using on the web site. But even if all fonts exist, there is an issue that various browsers and operating systems interpret the same font specifications and HTML tags differently. Height, width, spacing - even the individual character itself is inconsistent. As a result, a web designer can never predict the final appearance of a page.

StudioLine’s text editor has been programmed with extra intelligence to overcome the majority of these inherent incompatibilities. If necessary, it will even generate complex HTML tables to achieve the proper spacing. The resulting text blocks have a consistent appearance in most browsers. However, the extra control elements may limit the usefulness of any text, if web site visitors attempt to copy it from the browser to a word processor.

Text as Graphic

StudioLine is able to convert text to graphics to eliminate any possible interference by the visitors' browser or operating system - thus offering true WYSIWYG. Instead of storing text on the web server and leaving rendering decisions to the browser, StudioLine will render the text itself, before storing it on the web server as a graphics file.

The downside is, that links can only be defined for the entire text object, not individual words or phrases.

Certain design choices will implicitly result in text being published as a graphic, e.g., text superimposed by a partially transparent image, or applying special effects from the Image Toolbox to a text object.

To explicitly convert text to graphic, apply an image tool and apply neutral settings, e.g.:

  • Select the text object.

  • Choose Image Toolbox from the Edit menu.

  • Select the Transparency tool and set the value to 0.

ALT Text

StudioLine will automatically use the content of the text object to generate alternate text for the graphic. If this is not desired, simply change the image descriptor for alternate text to at least one space character or any other preferred text string.

Choosing Fonts

When text is not rendered as graphic, then care should be taken that only widely available fonts are used on a web site.

Many web site visitors will have access to the fonts supplied with Microsoft Windows. Since Microsoft Office is popular amongst businesses, many users will also have some, if not most, of the fonts supplied with Microsoft Office.

System
Supplied Fonts
Microsoft Windows

Arial, Comic Sans MS, Courier New, Marlett, Symbol, Times New Roman, Wingdings

For a cross reference of fonts included with various applications, see http://www.microsoft.com/typography/fonts/

Apple Macintosh

Chicago, Charcoal, Courier Regular, Geneva, Helvetica, Monaco, New York, Palatino, Symbol, Times

Unix

charter, clean, courier, fixed, helvetica, lucida, lucidabright, lucidatypewriter, new century schoolbook, symbol, terminal, times, utopia

Microsoft Internet Explorer

Andale Mono (formerly Monotype.com), Arial Black, Georgia, Impact, Trebuchet MS, Verdana, Webdings

Netscape Navigator

Bitstream Prima Serif, Bitstream Prima Sans, Bitstream Prima Sans Mono

Generic Fonts

Generic font names will leave the final appearance up to the browser. The system of the web site visitor will choose a font that matches the general classification of the generic font name:

Character Translation

Caveats with Font Names

Some operating systems use the same font names, even though the fonts are indeed different. Sometimes a font name may not even be unique on a single computer: the same font name (e.g., "Symbol") may be shared between typefaces generated with different technologies (TrueType, Bitmap, PostScript). In these cases, the actual font and technology chosen will vary with the font size, operating system and browser. Thus, the same letter in the same font may have a different appearance on different systems. The MacOS will even replace certain characters of the "Symbol" font against entirely different ones.

It is also possible that the same font may be known by slightly different names in various operating systems and their versions. To avoid potential pitfalls, especially with the "Symbol" font, permit StudioLine to render text as graphic.

Caveats with Font Sizes

Various browsers, versions and operating systems apply different factors when displaying a chosen font "size". The actual width of characters, height and spacing between lines and the number of lines needed for a given text block are often unpredictable. This can lead to alignment problems, if underlying imagery requires a portion of a text column to be rendered as graphic. In that case, it may be safest to let StudioLine render the entire text block as graphic.

Font Smoothing

Font smoothing (anti-aliasing) removes the jagged edges of characters by adding levels of gray. Windows uses 17 levels of gray with unconditional gamma correction; MacOS uses 16 levels of gray without gamma correction. Browsers depend on the settings of the visitor's operating system on whether this feature is in effect.

If StudioLine renders text as a graphic, then the browser or the visitor's operating system are irrelevant - StudioLine controls the final appearance. Based on the font used and the character size, it will apply anti-aliasing in accordance with the font data received from Windows. Typically this means that very small font sizes (e.g., 6 points) and fairly large sizes (e.g., 14 points) will be smoothed. StudioLine uses 65 levels of gray without gamma correction.

The differences in font smoothing algorithms should only be noticeable, if the same font in a small size is used more than once on a page - with some text rendered as graphic and some text not. The text rendered as graphic may appear to have a slightly different weight.


Linking from Text

Adding links to pages enhances the interactive experience for the visitor. By clicking their mouse on a link, visitors trigger an action that was predetermined by the web master, such as opening a new page or sending email. Links can be associated either with an entire text object, or with individual words or phrases. To draw attention to links, they are highlighted with specific color and font options defined in the Text Link Properties of the Page menu.

Linking from Words or Phrases

To add a link:

  • Open the text editor.

  • Select the word or phrase in the text editor

  • Press the Link button in the text tool bar.

Links from words or phrases have no effect, if the text object is converted to graphic.

Linking from the Text Object

If the entire text object is to serve as a link, then there is a quicker way:

  • If the text editor is currently open, close it by clicking elsewhere on the page.

  • Click the right mouse button over the text object to open the context menu.

  • Choose Link from the context menu.

Links from word or phrases take precedence over a link defined for the entire object. The object specific link affects only for those words or phrases that have no other explicit links defined.

Linking with StudioLine Explorer

The StudioLine Explorer offers a convenient way to create a text link to another page:

Linking to an Existing Text Object

  • Open the StudioLine Explorer.

  • To link from a different site, select Sites and double-click a site in the folder pane.

  • Choose Pages.

  • Locate the page you would like to link to.

  • Drag the page to an existing text object.

Linking to a New Text Object

  • Open the StudioLine Explorer.

  • To link from a different site, select Sites and double-click a site in the folder pane.

  • Choose Pages.

  • Locate the page you would like to link to.

  • Drag the page to an empty spot of the workspace.

  • A new text object is created with a link to the chosen page.

  • Customize the text to suit your needs.

Following Links

If text links to another StudioLine page, one can easily switch to that page.

  • Select the text which has a link defined.

  • Either choose Follow Link from the Navigation menu, or open the context menu for the selected text with the right mouse button and choose Follow Link.


Text Placeholders

Placeholders may be used anywhere in the text where the value of a descriptor should appear, even in other page or image descriptors. Samples of available descriptors include the title of the page, the caption of a picture or the name of the web master. By using placeholders, the text will always reflect the most current descriptor values.

A list of valid system and page descriptors can be found in the appendix. Image specific descriptors can be freely assigned by the user.

Placeholders are often used in Layouts and Layout Templates, when setting up image views. They allow common text blocks, such as a page header or picture caption to automatically adapt to the respective image.

Inserting a Placeholder

Move the text cursor to the location in the text where the placeholder should appear. Click the right mouse button and select Insert Field from the text editor context menu.

For image descriptors, simply bracket the descriptor name with double percent signs, and use it anywhere in a text block:

Descriptor | Placeholder
Event | %%Event%%

If a placeholder is wider than the text column where it is used, it will wrap into a new line. Text attributes (such as color or font settings) can only be applied to the entire placeholder, e.g., it is not possible to underline or boldface only a portion of it.

Resolving a Placeholder

Placeholders will be resolved, when the individual page is rendered to HTML code. If a descriptor is not unique on a page, then the first occurrence is used. When evaluating image descriptors, StudioLine ignores those images that are not dependent on the image prototype, such as the navigation buttons, banners and other design elements of the layout. The practical use of image descriptors is on image views, where image descriptors are used to dynamically provide the page content.

On pages that contain multiple images, it is possible to explicitly associate the descriptor values of a specific image with a text object. A practical application would be a standard text block with picture title and credits that appears next to each of several pictures on a page.


Working with Images

All images added to StudioLine are stored in the central Image Archive. The archive contains a high-resolution master copy of an image as well as descriptive information. The original image is no longer required and can be moved to an offline medium, such as a backup tape or other removable storage device. This helps conserving disk space. If an image is later needed in another application, it can simply be exported.

Images added in Page Editor mode are stored in a special $AutoArchive$ folder of the image archive. Generally, it is preferred to switch to Image Archive mode when adding images. This way images can immediately be organized into folders and categorized for easy retrieval later. See the chapter Image Archive for further information.

Images on Removable Media

The origin of an image (e.g., a specific Photo CD) is remembered in the Image Archive, in case there is ever a need to refresh or update the master copy.

The first time images are added from a new CD-ROM, StudioLine will prompt to name the CD-ROM. (In case of Photo CDs, the default name is the disk label.) Should StudioLine ever need to reload the original image file, it will ask you to re-insert that same CD-ROM by the name you had chosen.

Placing an Image

  • Open the StudioLine Explorer from the File menu.

  • Locate your image in the Image Archive, or in My Computer or Network Neighborhood.

  • Drag the image to the desired location on your page.

You may also open a second instance of StudioLine and drag the image from another page. Click the right mouse button over an image to view it’s context menu.

Defaults Inherited from Prototype

The Prototype Image is found in the layout of a page and defines the standard image settings for this page. Whenever an image is placed on a page, it is automatically processed by any image tools associated with the prototype. This makes it easy to give all images on a page consistent size and appearance, such as soft borders or shadow effects. See the chapter on Layouts for additional information.

The list of active tools can be viewed and edited from the image’s context menu.

Severing the Inheritance

Any changes to the Layout’s prototype image will propagate to the images on the page. By making a single change in the prototype, all images on the page can be updated.

You may decide that some images, such as buttons or logos, are to be separate from the prototype. For those images, choose “Independent of Prototype” from the context menu.

Scaling the Image

The 8 handles on the selector band appear when a single object has been selected. It can be used to resize the object.

  • Drag a corner handle to scale the height and width proportionally.

  • Drag a midpoint handles to stretch or shrink the object in that direction.

  • Normally images cannot be made larger than the size of the original in the Image Archive. Press the Ctrl key to enlarge an image even further. (This may result in a reduction in picture quality.)

Additional scaling, cropping and orientation functions are available in the Image Toolbox.

Providing Descriptive Information

Most browsers are capable to display a small pop-up window with descriptive information about the image over which the cursor is resting. The information may also appear while an image is loading. It is usually taken from the so-called “Alternate Text”. For some images this function may be a requirement, for others it could be distracting.

StudioLine generates the descriptive information from the image’s descriptors. To change or remove the “Alternate Text”:

  • Select the image.

  • Choose Descriptors from the Edit menu. This opens the Descriptors panel.

  • Choose Alternate Text from the drop-down list box.

If the image had been inserted from the Image Archive, it may already contain descriptive information. Any changes you make in Page Editor will be local to that page. The original in the Image Archive will not be effected.

Animated GIF Files

Normally, StudioLine stores images in a compressed format. For animated GIF files, it is important that the original image format is not altered. To avoid loss of the animation effect, certain restrictions apply:

  • No image tools can be applied against the animated GIF.

  • No text or other objects with transparent areas may overlay the animated GIF.


Image Tools

Open the Image Toolbox from the Edit menu. It offers a full complement of visual effects, including buttonize, shadows, emboss and soft frames, which may be applied against pictures or text. Tools and their settings can be viewed and revised at any time, or may even be copied to other objects. The power of StudioLine’s image tools can also benefit other applications. See the chapter Import and Export for details.

It is highly recommended, that you review the StudioLine Tutorial to learn about the toolbox and how to copy settings between objects.

QuickSteps: Image Tools

Applying a Tool

  • Select one or multiple objects.

  • Click on the desired tool in the Image Toolbox.

  • Choose the appropriate settings.

The effects of any tool settings are immediately visible on the page.

Modifying Toolbox Settings

Any enhancements or effects you apply are added to the Active Tools list for that particular graphical object. The list can be accessed from the object’s context menu. Settings can be reviewed, modified, reordered, deleted or copied. See the online help or the reference chapter “Object Context Menu ” for specific procedures.

QuickSteps: Image Tools


Stacking Order

Several objects may be stacked atop of one another, partially or fully covering objects layered below. Based on shape and transparency, portions of an object may or may not be visible.

Page vs. Layout Stacks

Images appearing on a page can originate from the Layout Template, or could have been added in Layout or in Page Editor mode. There are five stacks, dedicated to layout images and page images respectively.

Working with Stacks

The order of the three layout stacks and two page stacks is permanent. Using the Object Context menu, images can be moved forward and backward through the stacks. The specific capabilities depend on the current StudioLine mode and whether the image is page or layout based.

Page Editor Mode

Both page and layout images are visible. Page-based images can be moved freely through and between the page foreground and background stack. Layout-based images can only move within their current stack.

New images are added to the very front of the Page Foreground stack.

Layout and Template Modes

Images can be moved within their current layout stack or can be assigned to a different layout stack. New images are added to the very front of the Layout Middle stack.


Graphic Links

Certain images, such as buttons, are commonly used to allow visitors to trigger predetermined actions, such as opening a new page or sending email.

To add a link, select the image and choose Link from the Edit menu or the image’s context menu.

Linking to an Image View

It is possible to link a small “preview” picture to a higher resolution image view page with descriptive information.

  • Select the image.

  • Choose Link from the Edit menu or the image’s context menu.

  • Choose the type “Link to Image View”.

  • Switch to Layout Editor mode.

  • Confirm that the layout is set up for image views.

For additional information, see the chapter on “Layouts”, specifically the section on Image Views.

Linking with StudioLine Explorer.

The StudioLine Explorer offers a convenient way to add a page link to an existing graphic:

  • Open the StudioLine Explorer.

  • To link from within the same site, select “Pages.” To link from another site, select “Sites”, double-click a site in the folder pane and then choose “Pages”.

  • Locate the page you would like to link to.

  • Drag the page to a graphic on the screen.

  • The graphic now has a link to the chosen page.

Providing Visual Clues

It is important to provide visitors with unambiguous clues that an image is associated with a link. One effective technique is, to give the image the appearance of a button:

  • Select the Image.

  • Open the Image Toolbox from the Edit menu.

  • Choose the Buttonize and Shadow effect.

Following Links

If an image links to another StudioLine page, one can easily switch to that page by double-clicking on the image, or:

  • Select an image which has a link defined.

  • Either choose Follow Link from the Navigation menu, or open the object’s context menu with the right mouse button and choose Follow Link.


Roll-Over Effects

Visitors appreciate web sites with roll-over effects, as they add dynamic to the page. When the mouse cursor moves across an image, it can change its colors, shadows, transparency, or other aspects of its appearance.

Rollover effects are commonly used as visual clues for graphic links. But they are also a highly effective way to draw attention to follow-up information, which only becomes visible when the mouse rests over an area of the page.

Using a Single Image

In this technique, the appearance of a single image is altered, while the mouse cursor rests over it.

  • Place an image on the page and open the Image Toolbox to choose any image processing.

  • Click the [image] Roll-Over Mode button on the tool bar. The mouse cursor will change to red.

  • Open the Active Tools from the context menu.

  • Change or add tool settings to be used when the image is in rollover mode, e.g. colorize the image or change to black & white.

  • Repeatedly click the Roll-Over Mode button on the tool bar to preview the result.

Depressed Button

In a variation of the single image technique, a button will appear to have been pressed while the mouse cursor rests over it.

  • Add a suitable image to a page, layout or layout template.

  • Apply the Buttonize and Shadow tool. Set the direction to the top/left corner and a shadow distance of 3 pixels.

  • Press the Roll-Over button on the toolbar

  • Apply the Buttonize tool, but turn off the shadow.

  • Apply the Offset tool, to 3 horizontal, -3 vertical.

  • Repeatedly click the Roll-Over Mode button on the tool bar to preview the result.

Using Two Images

In this technique, the visitors mouse cursor will “uncover” an alternate image.

  • Create two images of the same size, one for the "normal state" and one for the "roll-over state".

  • Place the "roll-over state" image at its final location.

  • Select the "normal state" image and open the Image Toolbox.

  • Click the Roll-Over Mode button on the tool bar.

  • Set the Transparency to a center position. This will help with aligning both images perfectly over each other.

  • Drag the "normal state" image perfectly on top the "roll-over state" image.

  • Set the Transparency of the "normal state" image to 100%. (The system should still be in roll-over mode at this time!) This will make the "normal state" image invisible in roll-over mode, allowing the "roll-over state" image to appear.

  • Repeatedly click the Roll-Over Mode button on the tool bar to preview the result.

Uncovering Text

The mouse cursor will uncover a narrative description.

  • Create a text block with the text that is to “pop up”.

  • Open the Image Toolbox and apply the Backdrop tool.

  • Choose a suitable color, set the transparency to about 70% and set the corner radius of 0.

  • Place a suitable image to cover up the text and it’s backdrop.

  • Right-click the image. From the context menu, select Stacking Order – Send to Back.

  • Place the same image a second time.

  • Click the Roll-Over Mode button on the tool bar.

  • Set the Transparency for the second image to 100%.

  • Repeatedly click the Roll-Over Mode button on the tool bar to preview the result.


Manual Positioning

Text and image objects can be freely positioned on a page, simply by dragging them to their desired location. Objects may even overlap.

To assist the web designer with the proper alignment of objects, StudioLine offers margins, rulers and guidelines.

Margins

Margins are a visual aid to judge the appearance of a page in common screen sizes.

  • Click the right mouse cursor over an empty area of the workspace to open the Page Context menu.

  • Choose Margins.

By looking at the margins, you will be able to see how your page will fit into a particular screen size. For details regarding margin options see the online help or the reference chapter on “Margins ”.

Rulers & Guidelines

Rulers display a pixel counter across the top and left of the StudioLine workspace. Guidelines can be pulled on the workspace to assist with positioning objects in perfect columns or rows.

  • To display rulers, click the Ruler button on the tool bar.

  • To create guidelines, drag from either ruler to the desired location of the page.

  • To remove guidelines, drag them back to the ruler.

Choose Guides from the Page Context menu to review advanced options, including the ability to save or reuse a set of guidelines. See online help or the reference chapter “Guides ” for details.

Position Indicators

To learn the exact position of a guideline, or the distance between guidelines, move the cursor over it. A set of up to three numbers will appear:

The absolute position of the guideline.

The distance to the next guideline in the direction of the arrow.

Position indicators are valuable, if accurate spacing between guidelines is essential.

Spacing and Alignment Tool

The toolbar offers a tool that assists in perfect alignment or even spacing of multiple objects.

  • Select two or more objects.

  • The Align Objects [image] tool will become available on the toolbar.

  • Press the button to see a list of alignment options. If three or more objects were selected you will also be able to choose from spacing options.

Locking Positions

An intricate page may have several objects in very close proximity. Some may even overlap one another. It is foreseeable, that sooner or later objects could be moved accidentally. This can be prevented by locking objects in place:

  • Select any number of objects.

  • Use the right mouse button to display the Object Context menu.

  • Choose Lock Position.

To unlock objects, access their context menu and choose Unlock Position.


Automatic Positioning

Despite all the comfort that StudioLine provides for manual positioning, there are situations where manual positioning can become too time-consuming. A good example is a gallery of thumbnail images. It could take considerable effort to line up all thumbnail images perfectly. Worse, any future additions or subtractions would quickly negate all the prior work.

Containers

Any objects dropped into a container object can automatically be arranged in rows. The user can choose the horizontal and vertical grid, as well as the alignment of objects.

  • To move or resize a container drag the container box or its handles.

  • To change the container settings, click the right mouse button over an empty area inside the container. This will open the Container Context Menu.

  • To start a new row of items at the current object, click the right mouse button on the object and choose Line Break from the Object Context menu.

Position Anchors

Often, you design a headline to be centered at a certain distance over the container, or buttons aligned below its bottom. By anchoring these objects to the container, they will maintain their relative positions, even if the container is moved or its dimensions change.

  • Select an object.

  • Choose Position Anchor from the Edit menu.


Color Pane Container

Color panes can be used to display one or multiple objects over a color backdrop, apply border styles and add color bands at the top and bottom. One application would be text columns, where headlines are shown over a different background color. Other applications include thumbnail galleries that are emphasized with a border and a different background than the rest of the page.

  • To insert a color pane, choose Insert from the Page Context menu, then drag the sizing handles as necessary.

  • To customize the appearance, select the color pane and select Color Pane Properties from the context menu.

Additional interesting effects can be achieved by applying Image Tools against the Color Pane, e.g. the Rotate tool.

Since a color pane is a container object, it can hold any number of other objects, which can either be arranged manually or by choosing automatic positioning options.

Automatic Positioning


Object Status

Press Ctrl + G repeatedly to toggle between normal page view, locked status view and the full display of the object status. These views are also accessible by selecting Object Status from the page context menu.

Object Status Icons
Active Tools

There are image tools associated with this object. Open the Context Menu to work with the Active Tools list.
Link

This object has a Link. Open the Context Menu to change.
Anchored

This object is anchored to a relative position. Choose Position Anchor from the Edit Menu to change.
Locked

This object is locked at its current location. It cannot be accidentally dragged. Open the Context Menu to unlock.
Layout Object

This status icon will only appear in page editor mode. It marks any objects that originate from the underlying layout.
Roll-Over

This object has a roll-over effect. Use the StudioLine toolbar to toggle the roll-over mode for the page.
Target Position

This object has been defined a label so that it may be used as a target in a link.


Setting the Background

Open the Page menu on the menu bar to access the background options. Either choose a solid color, or drag an image to the Background panel to create a tiled background.

Solid Color vs. Tiled Background

A solid color background, such as white, is frequently the aesthetically most pleasing choice. It also makes it easy for StudioLine to share images where appropriate.

Irregular textures with little contrast can also be quite suitable for a background - as long as they don’t show any visible margins when tiled and don’t interfere with the readability of text.

Busy images, strong contrasts or geometric patterns, however, may be very distractive. They also introduce a number of issues when graphics with transparent areas appear on a page.

Transparency and Tiled Background

Where feasible, StudioLine will attempt to share buttons and other common images between pages. This will save time during transfers and while browsing a site.

When transparent images are placed on a page, some of the tiled background will show through. During rendering, a cut-out of the tiled background is incorporated into the graphics file used by the browser. That same graphics file would then be shared for various screen positions, where it has to blend perfectly with the background pattern at those locations.

Background images with geometric or other regular patterns (such as text or logos) may yield less suitable results.

Example: Effects, Dimensions & Background

Here is a simple 'at' (@) character, created by using the text tool and choosing a font color. The blue markers indicate the character’s height and width.

Once a button effect and a drop shadow were added, the text had to be converted to an image.

The @ character and shadow don’t fill a solid, rectangular area. In some areas, the solid background color is visible. (Also, because of the drop shadow, the dimensions of the resulting image file are now larger than the original height and width.)

At this point we purposely experimented with a tiled background of squares. StudioLine incorporates a section of the background squares in the graphics file that it prepares for browser use.

If this graphics file is shared for other locations on the page, the grid pattern may be disrupted.

This demonstrates that a regular, geometric pattern (such as squares) is usually a poor choice for backgrounds.

If regular pattern backgrounds cannot be avoided, then it may be necessary to:

  • use only non-graphical text,

  • use rectangular images without shadows or softening, or

  • use the Backdrop image tools to place images and text over solid color rectangles, or

  • place images and text on top of a non-transparent rectangular image.

Render at Ultimate Position

If the sharing of a single transparent image at various locations leads to a disturbance of a background pattern, then StudioLine can be instructed to generate unique versions for each occurrence. StudioLine will determine the ultimate positions where the image will appear in the browser, incorporate the appropriate background sections and store each as a unique graphic file.

On pages that are centered, right-aligned or aligned to the bottom, the ultimate position of images over the background pattern will change with the height or width of the browser window. Depending on the specific background pattern, the function “Render at Ultimate Position” may be ineffective for pages that are not aligned top/left.

Copying Background to Other Pages

To achieve consistency, the background color or graphic should be defined in Layout Template mode so that it is automatically applied to all derived pages. Sometimes, there may be a need to copy settings from one page or layout to another:

  • Open a page, layout or template.

  • Select Background from the Page menu.

  • Press the Lock button in the Background panel to freeze the current settings.

  • Open a different page, layout or template.

  • Press the Copy button in the Background panel to apply the settings.

Using Untiled Images

It is also possible to place an image directly on a page, thus using it as an untiled backdrop.

  • Select Background from the Page menu and choose a single color.

  • Place an image on the workspace.

  • Choose Image Tools from the Edit menu and apply an appropriate transparency or other desirable effects.

  • Right-click the image and choose Stacking Order – Send to Back.

  • Right-click the image and choose Lock Position to avoid accidental movement.


Custom HTML Code

You may insert your own HTML code, server scripts and support files into StudioLine’s rendered.

HTML Include File

Some of your HTML code may not be represented visually, such as function definitions, global variables and some of the server scripting. Sometimes, the code may be extensive, is shared between many pages or you simply prefer to maintain that code outside of StudioLine. In that case, use HTML include files to augment the code that StudioLine renders.

  • Create a basic HTML document outside of StudioLine, with HTML, HEAD and BODY tags.

  • Insert your custom code at the proper locations in your document.

  • Choose Include HTML File from the Page menu.

  • If necessary, choose URL from the Page menu if the rendered page needs to be uploaded under a specific name or file type.

During publishing, the content of your HTML include file will be merged into the appropriate locations of the rendered page. If you make changes to your HTML include file, you need to manually select the StudioLine page for publishing.

HTML Object

Where feasible, it may be easier to maintain your custom code directly inside of StudioLine. This also allows you to upload external files into StudioLine.

  • Choose Insert HTML Object from the File menu.

  • In the HTML Object Properties, choose the location of your HTML code.
    Typically, code placed in the HEAD or BODY section is not represented visually. Code placed in a DIV section will be processed at the position of the HTML object on the page.

  • If you require an additional support or media file, use the Browse button to include it. StudioLine will publish the file to the /Media folder on your site.

  • Type or paste your HTML code into the HTML Code Editor.

  • For HTML objects with visual content, drag the object on the proper location on the page and use the sizing handles to reserve space.


Layouts and Templates

To achieve consistent appearance and facilitate easy navigation, web sites typically match designs across many pages. In StudioLine, Layout Templates and Layouts define common design elements, such as the background, logos, headlines, navigation buttons and image placeholders. They also control certain automated and default behaviors, such as the creation of image views and image processing defaults.

Layout Templates vs. Layouts

The following chart explains the differences between templates and layouts, in terms of their scope, when they are used and how they interact.

Effect
Layout Template
Layout
Scope

Effects all new pages of a site, and their image views (if any.)

Effects the single page and its image views (if any.)

Timing

One time association - when page is created or when template is manually applied to an existing page.

Continuous association – a layout is an integral part of its page.

Interaction

May be defined as the site’s default.
May be applied manually to an existing page.

May be saved as a new Layout Template.

If common design elements or settings are to be shared by multiple pages, place them in a Layout Template. If common design elements or settings are to be used by a single page with automatically created image views, place them in the Layout. If design elements are limited to a single page, place them directly in the Page Editor

Applying a Layout Template

When a page is created, the default Layout Template from the Site Settings is always used to initialize the new page.

To apply a different Layout Template:

  • open the page,

  • open the StudioLine Explorer,

  • choose Layout Templates,

  • locate a suitable template and drag it onto the workspace.

Note: Once a different template has been applied to a page, this step cannot be reversed with the Undo function. Prior customizations, defaults and image settings for this page and its image view pages could be lost permanently. To avoid problems, apply the correct template before working on the page itself.


The Layout Editor

The Layout and Layout Template modes are an extension of the page editor and offer largely identical functions. One can think of layouts as the control layer for a page, and layout templates as their blueprints.

To view and customize the layout of a specific page:

  • open the page in Page Editor mode,

  • switch to Layout mode.

To view and customize a layout template:

  • switch to Layout Template mode,

  • select a template.

Transferring Objects to the Layout

From a creative standpoint it is often easier to first design a boilerplate page without deciding immediately, whether some objects belong on the layout. Once the creative process is complete:

  • open the page in Page Editor mode,

  • from the Edit menu, choose Lock Layout Objects

  • select any objects that should be located on the layout,

  • from the Context menu, choose Transfer to Layout

Common Objects

Elements placed in the template or layout will appear on all derived pages.

Graphical Elements

By adding any logos, backgrounds and other common design elements, you will achieve consistency and can be certain that the same objects always appear at the same location.

Images are added to a template or layout without any default settings, processing or links. You have to manually scale the pictures and then apply appropriate Image Tools.

Images can be declared as image placeholders to define the position for images that are not yet available. The scaling and cropping image tools are used on the image placeholder to define the dimensions available to the picture. Later, one can simply drag a replacement image on top of the image placeholder. It will automatically scale and crop to the available space.

Text Elements

Wherever feasible, use text placeholders for common text elements such as page title, author or copyright information. This ensures, that the layout or template can automatically adapt itself to any number of pages, simply by retrieving the appropriate system, page or image descriptors.

Note: Text elements that originated from the layout, but later are customized in page editor, are still considered layout objects. If the original text element is removed from the layout, the customized version will also disappear from the page.

Links

Place suitable text or image objects to represent standard links, such as a link to the home page, to a contact page, or for sending email to the web master. Click the right mouse button on each object and choose Link from the Object Context menu.


Image Prototype

Frequently, web masters establish standards for graphic treatments, such as soft borders, drop shadows and maximum dimensions.

In StudioLine, the Image Prototype controls standards for pictures added in Page Editor mode. Pictures stay associated with the prototype! Any changes made to the prototype in the layout will propagate to all associated images on the page. However, it is possible to break the dependence of the prototype on a per-image basis.

The prototype picture is only a visual representation of all standard properties and tools that are in effect for this layout. It does not actually appear on the page.

Setting Image Standards

  • Open a layout or layout template.

  • Select the image prototype.

  • Use the Edit menu to apply any image tools, or click the right mouse button over the prototype to access its context menu.

  • To define the maximum image dimensions, use the Scale (Absolute) tool.

Make Image Independent

  • Select an image in Page Editor.

  • Click the right mouse button over the image to access its context menu.

  • Select Independent of Prototype.

The same menu can be used to make an image dependent of the prototype again.

Once an image is independent of the prototype, its descriptors will be skipped when evaluating any placeholders used on a page.


Image Views

The true powers of templates and layouts come to light when they define image view pages. Layouts with image views will automatically generate interlinked sub-pages with common style elements, navigation buttons and automatic text generated from image and page descriptors.

The size of the image prototype determines the picture size used for a particular image view. Typically, the image prototype for the page would be of a small size. The resulting main page consists of a thumbnail gallery for all pictures dropped on the page. The image prototype for the image views could have increasingly larger sizes. The resulting sub-pages display only one picture each – but each with increasing detail. A web visitor would simply click on a picture to see a larger version, or choose a navigation link to browse between image view pages.

Applications

This feature is a great time-saver for publishing pictures in a user-friendly manner. For a product catalogue, listing pages can show small preview pictures for each item – and the detail page with a full view is only a mouse-click away.

Photographers can design extensive thumbnail galleries that load quickly, yet visitors can still gain access to full-size images. By adding an Automatic Forward from the Page menu, one can even publish a self-running slide show.

Layouts with Image Views

The appearance of each image view page is based on the design for its particular level of detail.

To design a specific image view page:

  • Open the layout or template.

  • Select an existing item on the Image Views panel, or press the New Image View button.

Whenever possible, use placeholders instead of static text. This way, text is automatically substituted against image, page and system descriptors.

Disabled Navigation Buttons

Creating Image View Pages

Not all pictures on a page have to have image views. Buttons, banners and logos are usually to be excluded.

To cause image view pages for a single picture to be created:

  • Click the right mouse button on an image.

  • Choose Link from the object context menu

  • Choose Link to Image View in the Link panel.

To cause image views to be created for all images on a page:

  • Open a layout or layout template.

  • Click the right mouse button on the image prototype.

  • Choose Link from the object context menu

  • Choose Link to Image View in the Link panel.

To prevent image view pages from being created for an individual image, or to remove existing image views, simply change its link settings to “No Link”.

Following Links

If an object links to an image view page, one can easily switch to it.

  • Select the object.

  • Either choose Follow Link from the Navigation menu, or open the object’s context menu with the right mouse button and choose Follow Link.

  • From an image view page, use the Navigation menu to switch to other pages.


Automated Folder Links

Often there is a need to break content into a series of pages – whether it be a slide show or a step-by-step tutorial. StudioLine can automatically generate links between the pages in a folder and to an index or start page.

The automated folder link features relies on a number of components:

  • An optional index page that contains thumbnails or text links to the pages in a sub-folder.

  • A folder, which will hold a series of pages.

  • An optional layout template that contains common navigation buttons and other design elements.

  • Generic navigation links, allowing visitors to browse between the pages inside the folder and back to the index page.

  • Folder settings that control the sequence in which pages are displayed.

  • The individual pages inside the folder.

Setting It Up

  • Open the StudioLine Explorer for Pages. Create a new folder.

  • Switch to Layout Editor and design a page layout. Add common navigation buttons and generic links (e.g., to the first page, the previous page, the next page, the index page, the site’s home page).

  • For a self-running presentation choose Automatic Forward from the Page menu and set the navigation link to “next page”.

  • Save the Layout as a Layout Template.

  • Change the Site Settings to use your new Layout Template as the default for the new pages. Note the original Layout Template you had been using.

  • Open the File menu.

  • Create as many additional pages as you need inside the new folder you had created. Each page will inherit the same generic links from the layout template.

  • Reset the Site Settings to the original Layout Template you were using.

  • Optionally, create a special index page or use any existing page. This page could link to all pages, some of the pages, or only to the page you want to appear first. A page can serve as the index page for several folders.

  • In StudioLine Explorer, click the right mouse button over the new folder. Choose “Folder Navigation Links ” from the folder’s context menu.

To exclude pages from the automatic folder links, place them in a different folder, in a sub-folder or use the “Exclude Current Page” option in the “Publish” menu. The index page is automatically exluded.

Tips & Techniques: Slide Show

Following Links

If an object contains a folder link, one can easily switch to the first page.

  • Select the object.

  • Either choose Follow Link from the Navigation menu, or open the object’s context menu with the right mouse button and choose Follow Link.

  • From a page within the series, use the Navigation menu to switch to other pages.


Image Archive

The image archive is a key productivity feature of StudioLine. While its use is not mandatory, it certainly is invaluable for today’s media-rich web site projects. Instead of a web master having to keep track of various derivatives of the same image, StudioLine will centrally maintain picture originals in its database of images. A folder structure and powerful search engine provide for easy retrieval and reuse.

Original image corrections, such as cropping, proper alignment and color adjustments need only be performed once. When an image is placed and customized on a web page, the image archive original remains intact. Name, descriptions and other information carry over from the archive to any occurrences on all sites.

The Folder Pane

The folder pane allows you to organize your original images in folders.

  • To locate an image, press the Search button.

  • To view the content of a folder, single-click the left mouse button on the folder’s icon.

  • To view a list of sub-folders, double-click the left mouse button on the folder’s icon.

  • To add a folder, press the New Folder button.

  • To delete or rename a folder, access the context menu by clicking the right mouse button over the folder’s name.

The $AutoArchive$

A system folder $AutoArchive$ contains any images, which were copied from an external source directly onto a page, rather than being first added to the Image Archive.

The $AutoArchive$ is organized by sites, templates and pages, based on where a picture was first used. If the picture is unchanged in the Image Archive and placed onto other pages from the same original, then the same copy is reused from the Image Archive. For that reason, the original name and location in the $AutoArchive$ will not be effected, even if the first-use page is ever relocated, renamed or deleted.

If a picture in the $AutoArchive$ is no longer used at all, it is automatically removed. To prevent this, move the image from the $AutoArchive$ folder structure to a user folder.

The Workspace

The workspace displays preview images (thumbnails) for the content of the current Image Archive folder. Display options, such as the arrangement, size and order of preview images can be customized for each folder. Simply access the context menu by clicking the right mouse button over an empty area of the workspace.

To set certain default options, select Preferences from the menu bar and then choose Image Archive.

Adding New Images

  • Open the StudioLine Explorer or the Windows Explorer.

  • Locate your images on your local disk, a network drive.

  • Select one or multiple images and drag them either to the Image Archive workspace or to a folder in the folder pane.

The Image Archive will store pictures in the best available quality, based on the limits defined in the Preferences menu.

Moving Images

To move images between archive folders, simply open the StudioLine Explorer or another instance of the image archive. Then drag images between folders.

Copying Images

To create a copy of an image, choose Create a Copy from its context menu. Copying an image allows you to define different cut-out areas or apply other image tools against different copies of the same image.

Sorting Images

  • Click the right mouse button over an empty spot of the Image Archive workspace.

  • Choose Sort from the Context Menu

  • Choose the Descriptor by which the images in this folder should be sorted.

New images are inserted at the proper location for the sort criteria that has been defined.

If no sort criteria has been defined, then the location can be controlled by the user. If a new image is dropped on a closed folder, it will be appended at the bottom. If a new image is dragged on the workspace, it will be inserted where it was dropped.

Creating Image Shortcuts

Some images could logically belong to more than one folder. An image shortcut allows you to include references to the same image in any number of other folders.

  • Select an image on the work space

  • Choose Create a Shortcut from its context menu

  • Open the StudioLine Explorer for Image Archive to locate other folders

  • Drag the image to any other Image Archive folder

Copying Settings to Images in Other Folders

StudioLine allows you to open multiple folders of the Image Archive by using more than one instance. This makes it possible to easily duplicate image tool settings by dragging the active tools list from images in one folder to images in another folder.

Direct Access from Other Modes

While in editing a page, layout or template, use the Context Menu of an image to open it in the Image Archive.


Image Descriptors

Descriptive information should always be entered when pictures are added to the Image Archive. Browsers can use it to display pop-up information about an image, or in place of slow-loading pictures. On image view pages, image descriptors automatically fill in placeholders such as image titles, captions and copyright information. In addition, image descriptors help the StudioLine search engine to find pictures.

As an image collection is rapidly expanding, it becomes increasingly difficult to locate images even in well thought-out folder structures. Liberal use of descriptors permit a user to sort, categorize and search for images by any number of classifications, including location, occasion, subject shown, photographer – just to name a few.

To add descriptive information:

  • Choose Image Descriptors from the Edit menu.

  • Select and fill in the existing descriptors, e.g., image header, description and name.

  • Use the Add button to create and enter further classifications.

Like other settings, image descriptors may be applied to other images by dragging the copy button.

Globally Remove ALT Text


Viewing and Sharing

StudioLine comes with a array of features to present your images or share them with others.

Image Viewer

Use the image viewer to display an image in any scale. You can also compare the original image vs. the combined effects of any tools and filters you may have applied.

Viewing a Single Image

  • Double-click an image on the Image Archive work space or in the StudioLine Explorer for Image Archive.

  • Use the Active Image Tools button to suppress or view the effects of tools and filters.

Presenting as a Slide Show

Within a few clicks, you can turn your computer screen into an ad-hoc slide projector. A selection of images or even the content of entire folder trees can be shown full screen, complete with a caption for each.

  • Select any number of images on the work space. (If you want to include the entire folder, then no selection is necessary.)

  • Choose Image Viewer from the Context Menu.

  • Press the button Configure Slide Show to specify the content and customize any other settings.

  • In the Image Viewer panel, press the VCR style Start Button.

If some of the images for your slide show are located in different folders, create a shortcut for each of these images and drag the shortcuts to the current folder.

Send As Email

For easy sharing of images, StudioLine can create attachments that are optimized for email use and pass them to most commonly used email applications.

  • Select images on the work space.

  • Choose Send as Email from the Context Menu.

  • If necessary, change the image size and quality – being mindful of the total message size.

  • Press the OK button to start the default email application configured for your computer. (This requires that your email application is capable of accepting attachments from external program sources, such as StudioLine).

The default email settings are controlled in the Preferences menu.

Printing

A professional printing engine will output high-quality prints and optimize the use of expensive photo paper. Images can be batched up, with different settings for each image. The intelligent print spooler work on your print tasks (which can take significant time) while you are free to tend to other things.

  • Select images on the work space.

  • Choose Select for Printing from the Context Menu.

  • If necessary, switch to other folders and keep adding images to the print spooler.

  • In the Print Selection Panel, select one or multiple images in the spooler.

  • Press the Copies button to control the number of prints for each image.

  • Press the Settings button to control size, orientation, resolution and other image specific options.

  • Press the Print button to review the settings for the printed page.

The default print settings are controlled in the Preferences menu.


Image Bulk-Processing

When adding a series of photos taken under identical conditions on one roll of film, it is likely that the same adjustments (e.g., color corrections, contrast, despeckle) would apply to most if not all images of the series. Images provided on Photo CD usually have a black margin that should be cropped. Slides or transparencies may accidentally have been scanned off their backside, thus reversing the image. Some photos may be portrait mode and require rotating by 90°.

Fortunately, StudioLine provides efficient ways to deal with large series of images in just a matter of minutes.

Step 1: Add to Image Archive

  • Review the Image Archive Preferences in case your pictures have unique resolution or sizing requirements.

  • Open the StudioLine Explorer and create a new Image Archive folder.

  • Drag your images to the folder.

Step 2: Alignment Preprocessing

In the Image Archive, the tool for image alignment and cropping is also available as a preprocessor. This is ideal for removing unsightly black borders from scanned slides or Photo CD pictures, and for properly orienting images in portrait mode.

The preprocessing settings will not appear in the Image Tools list. This prevents that someone could later accidentally reverse our careful cropping. It also enables us to copy various visual effects or enhancements to a complete series of pictures – without including the rotation that was only intended for images in portrait mode.

  • Click the Select All button in the toolbar.

  • Choose Alignment Preprocessor from the Edit menu.

  • Crop as necessary.

  • Press the copy button of the Image Alignment Preprocessing panel.

  • Select an image in portrait mode (standing upright on their short edge).

  • Choose Alignment Preprocessor from the Edit menu.

  • Rotate the image by 90°. Use the Flip function if the image was reversed during the scanning process.

  • Drag the copy button of the Image Alignment Preprocessing panel to those images that require identical treatment.

Remember, you can select more than one image by holding down the Ctrl key.

Step 3: Describe and Categorize Images

Certain descriptive information may be identical for all images. All photos were taken at the same event or occasion, usually by the same photographer and at the same date. We can easily apply must of the same descriptive information against all images.

  • Press the Select All button on the tool bar. All images in the current folder are now selected.

  • Choose Image Descriptors from the Edit menu.

  • Select a descriptor and enter any information that is common to all pictures. The copy button of the Image Descriptor panel will turn red.

  • Click the copy button so that your information is added to all images in the folder.

  • Select another descriptor and repeat the process as often as necessary.

Step 4: Image Enhancements

  • Select a representative image.

  • Choose Image Tools from the Edit menu.

  • Use the Tone Level and possibly the Image Enhancement tool to improve contrast and saturation as necessary.

  • Use the Color Tuning tool to perform any color corrections.

  • Use the Despeckle tool to remove any grainy artifacts.

Of course, this is just a list of common tasks. Your images may need fewer or more corrections.

Step 5: Copy the Enhancements

  • Click the right mouse button over the image that we just enhanced. The context menu opens.

  • Choose Active Image Tools to see the list of all image enhancements.

  • Press the Select All button on tool bar. All images in the current folder are now selected.

  • Click the copy button of the Image Tools list.

At this point, StudioLine will apply the identical enhancements to your series of pictures. If there are many hundreds of images involved, this could take minutes or even hours. Yet, this process is still much faster than manually enhancing each image individually – and it runs entirely unattended, freeing up your time for other matters.

Step 6: Customize Individual Images

At this point, portrait images have been rotated and all images have been preset with identical descriptive information. The same enhancements were applied across the board.

To customize individual images, simply use the right mouse button to open the context menu and access the image descriptors or active tools.

Step 7: Create a Gallery for the Web

StudioLine can automatically create a picture gallery for the web.

  • Switch to Page Editor mode and open or create a page that should hold your thumbnail gallery.

  • Switch to Layout mode and verify that your Layout has at least one image view defined in addition to the page itself! If not, add an image view or open the StudioLine Explorer to apply a Layout Template with image views.

  • Customize the Image Prototype. It represents the thumbnail pictures that will appear on your gallery page. For your gallery page, scale the prototype to a small size and apply a buttonize effect.

  • Select the image view from the Image Views list and customize the Image Prototype, if necessary. This time, it represents the single image that will appear if a visitor clicks on a thumbnail picture.

  • Switch back to Page Editor mode and open the StudioLine Explorer.

  • Select your folder in the Image Archive.

  • Press Ctrl+A to select all images in the folder.

  • Drag the images from the StudioLine Explorer to the container of the Page Editor.

StudioLine will now create thumbnail pictures for all the images in your folder and automatically arrange them inside the container. Each thumbnail picture links to a detail page with a larger size version. Visitors can use navigation buttons to move from picture to picture.


Publishing

Before pages can be viewed in a web browser, pages and their content have to be rendered in compatible formats and then transferred to a web server. Pages are rendered using HTML, CSS and JavaScript, images are rendered in JPEG format. StudioLine avoids using GIF files whenever possible. Their color palettes impose limitations that do not apply with today’s predominant video graphics adapters and color settings.

Change Management

StudioLine determines exactly, which files need to be published. Only new or changed content will be uploaded to the web server, speeding up the publishing process. Obsolete content will be removed from the server, saving disk space and making sure that unwanted information is no longer accessible.

To determine if a page requires publishing, StudioLine considers a number of factors:

  • Has the page ever been published.

  • Was the page or its layout edited since it was previously published.

  • Were pictures on the page changed in the image archive (e.g., using image tools or descriptors.)

  • Were there changes to the structure of the site, which require different navigation links.

Shared Files

To conserve server disk space and to speed up the web browser, StudioLine will attempt share images, which have been used more than once at a site. One of the following conditions must apply:

  • The image originates from a layout template. Images placed in layout templates are stored in a common directory on the web server and will be shared for the derived pages.

  • The image appears more than once on the same page. Images placed on pages are stored in a unique directory for each page. Multiple occurrences of the same image on the page are shared.

  • The image appears on multiple image views of the same layout. The index page and all image view pages share their images.

It is important to understand, that the combination of tools and their settings have to be identical for an image to be shared. Therefore, crop, size and apply any other tools to an image before you copy it to various pages. Even slightly different tool settings would result in unique pictures.

Other factors may prevent an image from being shared, including different backgrounds or the use of the image in a collage. In those cases, parts of the image may be merged or overlayed with other graphical content.

Publishing Profile

To manage files on the web server, StudioLine employs the standard File Transfer Protocol (FTP). It allows StudioLine to verify the content on the web server and then upload, replace or delete files, as necessary. An intelligent publishing procedure will confirm that a new or updated page and all its supporting files exist on the server, before it is taken live. Any missing or incomplete files are automatically refreshed. This minimizes any possible downtime.

Before StudioLine can communicate with the FTP server, it requires certain information for the publishing profile.

  • Choose Profile from the Publish menu.

  • Choose Edit to revise the profile settings.

  • Contact your server administrator to obtain the correct FTP server settings.

  • Press the Test button to validate the settings.

See the Reference Guide for detailed information about the publishing profile.

Testing the Profile

StudioLine will report the progress for each step of the FTP test. If there is any trouble, then an error message will identify the specific problem.

Step 1: FTP Connection

Message: Connection to Server:Port failed

StudioLine tried to establish a connection to the FTP server at the specified port.

  • Double-check the settings for "FTP Server" and "Port" for accuracy.

  • Make sure that the workstation is currently connected to a network, either through a LAN or a dial-up connection. Try opening a web browser to see if you can reach your ISP’s web site.

  • Attempt to reach the FTP server using the tools provided with your operating system. In Windows, open a Command Prompt, then type "ftp" followed by FTP server name and hit the Enter key. If the connection is refused, then either the server name or port are incorrect, or the server may not be operational at this time.

Message: Invalid Login and/or Password

StudioLine was able to connect to the FTP server, but the login was rejected.

  • Double-check the settings for "Login" and "Password".

  • Many servers require the Login and Password to be properly capitalized. Make sure you are using the correct capital and lower-case letters.

  • After a number of invalid login attempts, many servers will reject any new logins for an extended period of time. If you are certain that you now remember the correct login, you still may have to wait a few hours before retrying.

Step 2: FTP Remote Directory Access

Message: Unable to access Remote Directory

After logging in, StudioLine attempted to switch to or create the Remote Directory without success.

  • Double-check the settings for "Remote Directory".

  • Some FTP servers automatically switch to the proper Remote Directory after logging in. If the value for "Remote Directory" is the same as "Login", then try leaving the "Remote Directory" blank.

  • If the value for "Remote Directory" contains nothing but a single slash “/” or backslash "\", then try leaving the "Remote Directory" blank.

Message: Unable to write to Remote Directory

After logging in, StudioLine attempted to switch to the Remote Directory but was unable to upload a test file.

  • Double-check the settings for "Remote Directory".

  • Some FTP servers automatically switch to the proper Remote Directory after logging in. If the value for "Remote Directory" is the same as "Login", then try leaving the "Remote Directory" blank.

  • If the value for "Remote Directory" contains nothing but a single slash “/” or backslash "\", then try leaving the "Remote Directory" blank.

Step 3: Web Server Access

Message: Invalid Site-Root URL

StudioLine attempted to upload a test file to the FTP server's remote directory and then access it from the web site's root directory.

  • Copy the "URL of the Site-Root" into your browser's address field. If your browser reports a "DNS error" or a "technical difficulties with the web site", then you may need to contact your ISP.
    (Note: Since nothing has actually been uploaded yet, it is expected for your browser to display some error message indicating that the requested page was not found.)

  • Double-check the settings for "Remote Directory" and "URL of the Site-Root".

  • Some FTP servers automatically switch to the proper Remote Directory after logging in. If the value for "Remote Directory" is the same as "Login", then try leaving the "Remote Directory" blank.

  • If the value for "Remote Directory" contains nothing but a single slash “/” or backslash "\", then try leaving the "Remote Directory" blank.

Step 4: Web Server Default Document

Message: Invalid web server default document

StudioLine uploaded a file to the FTP server's remote directory, using the default document name specified in the publishing profile. It was unable to retrieve that document when using a URL without a document name.

The test was repeated with a series of typical default document names (default.htm, default.html, index.htm, index.html) without success.

  • Double-Check the “Default Document” setting in your publishing profile.

  • Contact your server administrator to obtain the correct setting.

If StudioLine can determine the correct default document name automatically, it will update the publishing profile accordingly.

FTP Log

StudioLine generates a detailed daily log file for FTP connections. It is located in the "Logs" folder of the StudioLine directory on your hard disk. Your support personnel may ask you to provide this file to further troubleshoot your publishing profile settings.

Publishing a Site

Once a publishing profile has been set up and tested successfully, the site may be published to the web server.

  • Select Render from the Publish menu. StudioLine will render your site to your local disk. This may take a while, depending on the number and complexity of pages.

  • Select Transfer from the Publish menu. StudioLine will upload the rendered content to the server.

  • Select Browse Web Server to open the current page in your web browser.

Due to StudioLine's multitasking design, it is possible to continue working on other sites or pages while publishing is in progress. Of course, care should be taken not to save any of the same objects that are about to be rendered.

New Content Does Not Show

If a published site does not appear in your browser, try the following:

  • Check the Site Settings to see if you have selected a home page.

  • Press the “Refresh” or “Reload” button of your browser.

  • Check with your support personnel, if there is a time delay before updated pages are made visible on the web server.


Publishing to Multiple Servers

Sometimes, an updated web site requires integration testing or formal approval, before it may be made public. In that case, the site would first be uploaded to a restricted “staging” area or server where it can be previewed and tested. Once testing and review is concluded, the site is finally uploaded to the “production” server.

For load-balancing or better response times on different continents, a site may also be uploaded to multiple “mirror” servers.

StudioLine allows a user to create as many different publishing profiles as necessary. It will maintain separate list of published files for each profile. This way it is always aware, which files still need uploading.


Import and Export

Sites, layout templates, pages and images may be shared between users or copied between StudioLine sites. This allows delegating work between multiple users and reusing designs for several projects.

StudioLine can also exchange text and images with third-party word processing software and graphics tools.

Sites

Choose Export or Import from the File menu to transfer an entire site, including publishing profiles, layout templates, pages and any associated images or media files.

Layout Templates

Choose Export or Import from the File menu to transfer layout templates and associated images or media files between computers.

Pages

Choose Export or Import from the File menu to transfer the current page, its layout and any associated images or media files.

Images

Images may be exported from the image archive or from the page and layout editors and later used by other applications. A variety of standard file formats is supported.

  • Locate the image in the Page or Layout editors, in Image Archive mode or in the StudioLine Explorer for Image Archive.

  • Open the StudioLine Explorer for My Computer and choose a destination folder.

  • Drag the image to the destination folder.

The size of the exported image in Megapixels is controlled by the Image Base Preferences.

Effects and Collages

The power of StudioLine’s image tools can also benefit other applications. Open the StudioLine page editor, compose a collage of images, apply any desired effects. Then select the entire collage and export. When prompted, choose the option to create a single collage of images.

Image Archives

Image archives are collections of images stored in a proprietary StudioLine archival format. Besides the actual image, this also retains any tool settings and descriptor values for each picture.

To create portable image archives, switch to Image Archive mode, select a folder or an image and choose Export from the File menu. The image archives may be imported by other StudioLine users.

Be mindful of copyrights and license restrictions before sharing pictures with other people.

Text

Text blocks may be dragged directly from most word processing tools to the StudioLine page editor. In cases where this may not work, create a new text object on the page, then copy and paste the text.

Text Effects

The StudioLine page editor and its image tools offer great opportunities to design interesting headlines or banner text. Once image tools are applied against a text element, it can be treated as if it were an image and exported for use by other applications.

  • Design the banner text.

  • Open the StudioLine Explorer for My Computer and choose a destination folder.

  • Drag the text element to the destination folder.

Last Document Update: 15-Jul-02 02:37


Organizing Styles

For consistent appearance, it is usually preferable for all pages of a site to have identical effects and type options, such as font, size and color.

  • Open a second instance of StudioLine

  • Create a new Layout Template.

  • Create sample text elements, for headlines, sub-headers, captions and any other styles you will be using.

  • Apply the appropriate settings for each style in the text editor.

  • Create sample images for common design elements, such as buttons, rulers, bullets – just to name a few.

  • Apply the appropriate tools for each design element.

  • Save the Layout Template.

Now you can create pages in one instance and easily copy the standard settings from the style template on the second instance.


Blurred Text

By changing the default order of image tools, it is possible to blurred text for headlines, backdrops or to overlay images.

  • Add a new text element, choose a large font size and boldface.

  • Type the desired text.

  • Open the Image Toolbox from the Edit menu.

  • Apply the Buttonize and Shadow tool.

  • Set the direction to come from straight above, turn off the buttonize option and set the distance larger than the height of the text element. Choose a low blur factor.

  • The shadow will now appear as a separate entity below the actual text element.

  • Apply the Image Alignment tool.

  • Open the Object Context menu for the text element and select Active Image Tools.

  • Drag the Buttonize and Shadow tool to the first position of the list.

  • In the Image Alignment tool, choose a cut-out area that encompasses only the blurred text.


Storing Type in Image Archive

Text and symbols can be used to create attractive headlines, banners, buttons, bullets and other layout elements.

  • Open the Page Editor.

  • Open the Text Editor and choose any suitable text font or symbol font.

  • Type the phrase or create the symbol.

  • Apply Image Tools such as color, rotate, buttonize, shadow, etc.

  • Select the object and click Copy on the toolbar to copy to the Windows clipboard.

  • Switch to Image Archive mode.

  • Click Paste on the toolbar to store the object in the Image Archive. The image will be created with a transparent background so that it can be used on any page.


Type as Background

Text, single letters and other type can be used to design an attractive background.

  • Use the Text Editor to add text objects to an empty page in Page Editor.

  • Apply Image Tools such as color and rotate.

  • Choose a high transparency factor, e.g. 70% or more.

  • Select all objects and click Copy on the toolbar to copy to the Windows clipboard.

  • Switch to Image Archive mode.

  • Click Paste on the toolbar to store the object in the Image Archive. This will create a new image comprised of all text objects, which can be used as the background for any page.

Setting the Background


Create a Frame Around Text

  • Create the text object.

  • Open the Image Toolbox from the Edit menu.

  • Add a Simple Backdrop to the text object. Match the color of the background and set transparency factor 0.

  • Add a Scalable Backdrop. Set a border width of 1 pixel high and wide, corner radius 0, color black and transparency factor 0.


Crop Multiple Pictures to Same Size

Certain page designs require uniform sizes for multiple pictures on a page. This is easily accomplished in a three-step process: First define an aspect ratio, then define a cut-out area, and finally scale the images to the required size.

  • Select all images requiring the same size.

  • Select Image Toolbox from the Edit menu.

  • Open the Crop tool and enter the desired pixel dimensions. Select the “Fix” option to lock the aspect ratio.

  • Press the Copy button to apply the same pixel ratio to all pictures in the selection.

  • With the Fix option selected, enlarge, reduce or move the cut-out area of the first pictures.

  • Use the picture arrow buttons to access the other pictures in the selection and enlarge, reduce or move the cut-out area for each of the other pictures as necessary.

  • Open the Scale (Absolute) dialog, enter the required image dimensions.

  • Press the Copy button to scale all images to the same physical dimensions.


Combining Objects into a Collage

Sometimes it is advantageous to combine multiple images into one, or to combine text with a logo graphic.

  • Open the Page Editor.

  • Compose the collage by arranging the desired objects on the page.

  • Apply effects, such as cropping, scaling, colorize, soft edges and transparency. (Certain effects, such as shadows and buttonize usually look best when applied later in the process.)

  • Once you are satisfied with your creation, select the objects.

  • Click Copy on the toolbar to copy to the Windows clipboard.

  • Switch to Image Archive mode.

  • Click Paste on the toolbar to store a combined image in the Image Archive.

  • Apply any effects that should act upon the combined image, such as shadows or buttonize. (These effects may also be added after the entire collage is added to a page.)


Globally Remove ALT Text

Certain design elements, such as rulers, logos should not display ALT text in the browser, when the mouse cursor rests over them. Otherwise, it could draw attention away from the primary content of the site.

  • Open the page, layout or template.

  • Select all images on the page that should not have alternate text. (The Ctrl and Shift keys are helpful when selecting multiple objects.)

  • Choose Descriptors from the Edit menu.

  • Select Alternate Text and use the delete key on the keyboard to remove any text.

  • Click the Copy button of the Descriptors panel.


Navigation Panel

Ease of navigation is a key factor in winning repeat visitors. Accordingly, web designers spend considerable time and effort in designing attractive and functional navigation panels.

Before StudioLine, a navigation panel and its buttons had to be laid out in a graphics tool. Multiple layers or distinct button versions were created to achieve roll-over effects. At the end, the design had to be cut into partial images and placed into carefully calculated HTML tables or frames. Any modification required a repeat of most of these steps. Image maps may have been less work, yet did not allow for any roll-over effects.

With StudioLine, attractive navigation panels are easily created in the page editor:

  • Place navigation buttons anywhere on the page and on any back-drop.

  • If necessary, use the Align Objects button on the toolbar for proper orientation.

  • Select a navigation button and open the Image Toolbox to choose any image processing.

  • Click the Roll-Over Mode button on the tool bar and choose any roll-over effects. Repeatedly click the Roll-Over Mode button on the tool bar to preview the result.

  • Drag the Copy control of the toolbox panel to apply identical image processing to the other navigation buttons.

If the navigation panel is created on a Layout Template, it will automatically be duplicated to any derived pages.
Roll-Over Effects


Disabled Navigation Buttons

For layouts with image views or folders, StudioLine will generate automatic navigation links. If a link does not apply (e.g., the Next button on the last page of a series), that button can be displayed with a transparency factor.

For esthetic reasons it may be preferred to display a special version of the button, indicating that it is disabled:

  • Open the appropriate page or image view level in the layout.

  • Select the navigation button.

  • Select Link from the Context Menu and set the transparency for inactive buttons to 100%.

  • Create a copy of the button.

  • Apply suitable special effects to the copy of button, which represent a "disabled" state. You might decide to remove any shadow or button effects, or change the button to black and white.

  • Drag the "disabled" button over the existing button on the layout.
    (To align the "disabled" button perfectly, make it transparent until properly aligned.)

  • Select Link from the Context Menu and choose No Link.

  • Select Stacking Order from the Context Menu and choose Send to Back to hide the "disabled" button under the regular button.

When the regular navigation button is suppressed, the special "disabled" button will become visible.


Slide Show

A slide show window can be helpful to convey a message that requires series of images or information.

  • For consistency, create a layout template for your slide show pages.

  • To automate creation of links, use automatic folder-links.
    To automate the creation of pages as well as links, use a layout with image views. Switch to the first image view level of the layout.
    (Refer to the appropriate sections in the User Guide.)

  • Set margins and guides, so that the content will later fit into a small window.

  • Select Automatic Forward from the Page menu.

  • Choose the type Navigation Link and set it to Next Page.

  • Choose an appropriate delay factor based on the content provided.

  • Save the layout template and use it to create the individual pages of the slide show.
    For layouts with image views, the individual pages are created automatically, simply by dropping images into the index page.

  • Open the index page or page that will contain a link to your first slide show page. In the Link panel, choose Open New Browser Window.

  • Under Options choose an appropriate window size for your slide show and eliminate any unwanted tool and menu bars.

Automatic Folder Links


Floating Images

Floating images are graphical objects over a transparent background. This technique is also referred to as images with an "alpha-channel" or a "transparency mask". Generic graphics formats supporting floating images (fully, or to some extent) include TIFF, PNG and GIF. Many proprietary formats will also work.

Importing Floating Images

Stock libraries of floating images are available for purchase. In addition, many graphics tools, including Adobe PhotoShop and Corel Draw, may be used to create floating images. Consult the documentation of your graphics software for ways to apply a mask to an image, or how to use a special tool to trace the edges of an object. Once the object has been isolated from its background, it usually must be pasted on a transparent background. If available, use an anti-aliasing feature to smoothen the edges of the object.

Export the image in a file format that supports floating images and import into StudioLine.

Creating Floating Images in StudioLine

Imagery created in StudioLine can always be used as a floating object.

  • Open the Page Editor.

  • Create a collage of text, simple geometric objects or any other graphics.

  • Use Image Tools such as Buttonize & Shadow, Soft Frame or Rotate which require partial transparency over the background.

  • Select the entire collage, click Copy on the toolbar to copy to the Windows clipboard.

  • Switch to Image Archive mode.

  • Click Paste on the toolbar to store the collage as a floating image in the Image Archive.

  • Optionally, export the image for use in other applications.


Painted Text

Very interesting text effects can be achieved by giving letters the appearance that they have been painted on.

  • Open a page or layout.

  • Place a colorful image on the page.

  • Use the Image Tools to crop the picture to the approximate size of the text.

  • Create a new text object to overlay the image. Choose large, bold font settings

  • Use the Image Tools to add a Scalable Backdrop to the text object. Set a border width of 30 pixels and a corner radius of 0. Choose a color to match your page background, transparency factor of 100.

  • Apply the Invert Mask tool against the text object. Choose the same color as in the previous step, and an intensity setting of 100.

  • Apply the Buttonize and Shadow tool against the text object. This will give your “painted” text depth.

  • Apply the Cropping tool against the text object.

  • Open the active tool list for the text object. Make sure that the cropping tool is on the bottom of the list.

  • Trim off the excess border previously created by the Scalable Backdrop.


Using Image Archive Designs

Creating Navigation Buttons

  • Open a page or layout.

  • Open the StudioLine Explorer for the Image Archive.

  • Browse to the folder “Design\Buttons” to locate a button set to match your taste.

  • Drag any number of buttons to the container for consistent spacing. Arrange the buttons in a logical order and select them all.

  • Choose Image Toolbox from the Edit menu.

  • Use Invert Image if you want to reverse black and white areas of the button.

  • To achieve special effects, experiment with tools such as Emboss and Simple Backdrop. Change the tool order in the Active Tools list and assess the outcome.

  • Open the colorize tool and apply a color.

  • Use the Buttonize and Shadow tool to give your buttons a raised appearance.

  • Finally, drag the buttons to their final location on the page.

  • Choose Position Anchor from the Edit menu if the buttons should maintain a relative position from the container.

Creating a Ruler (Line)

  • Open the Page Editor.

  • Select a rectangular or square image. (You will find basic geometric shapes in the ImageArchive\Designs folder.)

  • Choose Image Toolbox from the Edit menu.

  • Open the Scale Absolute tool.

  • Turn the option “Enlarging Allowed” on, and the option “Maintain Proportions” off.

  • For a horizontal ruler, enter a height of 1 pixel and a width that accommodates the length you need.
    For vertical ruler, enter a width of 1 pixel and a height that accommodates the length you need.

Creating an Ellipsis

  • Open the Page Editor.

  • Select a circular image. (You will find basic geometric shapes in the ImageArchive\Designs folder.)

  • Choose Image Toolbox from the Edit menu.

  • Open the Scale Absolute tool.

  • Turn the option “Enlarging Allowed” on, and the option “Maintain Proportions” off.

  • Enter the desired height and width for your ellipsis.

Creating an Octagon

  • Open the Page Editor.

  • Select a rectangular or square image. (You will find basic geometric shapes in the ImageArchive\Designs folder.)

  • Choose Image Toolbox from the Edit menu.

  • Use the Rotate tool to turn the image 45 degrees

  • Use the Image Alignment tool to turn the image back 45 degrees. (Watch the image on the page – it should appear perfectly horizontal.)

  • Crop all four sides evenly.

Last Document Update: 07-Nov-01 01:29


File Menu

StudioLine Explorer

The StudioLine Explorer provides access to sites, pages and related objects, the image archive, as well as the files on your computer and local network.
StudioLine Explorer Panel

Insert Submenu

Assists with placing objects on the work space and displays a panel with hints. If hints do not appear, select Show All Hints from the Help menu.

Image from My Computer

Opens the StudioLine Explorer. Locate the image on your computer and drag it onto the page.

Note: To view your desktop or network folders, use the button “Up One Level” as necessary.

Image from Image Archive

Opens the StudioLine Explorer. Locate the image in the Image Archive and drag it onto the page.

New Text Object

Click anywhere on the page to open the text editor.

New HTML Object

Click anywhere on the page to open the HTML code editor.

New

Creates a new StudioLine document.

Folders may be created to organize documents.
Organizing Sites

Open

Opens an existing document.

There will be a prompt, if the workspace contains unsaved changes.

Recently Used

Displays a list of the most recently used documents for the current mode. To open, choose a document from the list.

Save

The document will be saved to disk.

In Page Editor mode, StudioLine will automatically save the work every 2 minutes. After an abnormal termination, the user will be offered to revert to the last saved version.

Ctrl+S

Save As

The document will be saved to disk under a new name.

Save Copy as Layout Template

The layout will be saved as a layout template. Choose this menu item to reuse the same design for other pages.

Site Submenu

New / Open

Switches to a different StudioLine site.

Settings

Site Settings Panel

Verify Links

Verify Links Panel

Import Submenu

Load Images

Opens the StudioLine Explorer. Locate an image on your computer and drag it onto the StudioLine workspace or an Image Archive folder.

Note: To view your desktop or network folders, use the button “Up One Level” as necessary.

StudioLine File

This function permits exchanging of StudioLine files between different users or workstations. The StudioLine Explorer opens. Locate a file that was previously exported by StudioLine. They can be recognized by their file extensions:

  • .SLI – Image archives. May contain several images.

  • .SLD – Layout templates. Includes any images used.

  • .SLG – Single page. Includes the layout and any images used.

  • .SLX – Group of pages. Includes associated layouts and any images used.

  • .SLS – Sites. Includes pages, publishing profiles, layouts and images. If the site already exists, StudioLine will offer to replace the existing site or rename the imported site.

Export Submenu

Objects to Files
Images to Files

This function allows third-party text and graphics applications to use content maintained by StudioLine.

  • The StudioLine Explorer opens.

  • Browse to the folder where you would like the exported files to be stored.

  • Drag a StudioLine text or image object to the folder in the StudioLine Explorer.

  • Choose a file format and optional settings.

Export Object As Panel

StudioLine File

This function permits exchanging of StudioLine objects between different users or workstations.

User Guide: Import and Export

Image Viewer / Slide Show

Allows manual or automatic browsing (slide-show) through currently selected images.

Image Viewer

Create Web Gallery

Arranges the selected images in a gallery for use on a website.

Web Gallery Panel

Send Images via Email

Creates a new message in the default email software configured for your computer (if any). Any images selected on the StudioLine workspace are enclosed as attachments.

Note: If no compatible email has been configured on your computer, use the function “Export Object/Images to Files” to export the images to your desktop instead. Then follow the instructions of your email software on how to attach these images to a new message.

Send Images via Email Panel

Print Spooler

Collects and formats images for quality printing.

Print Spooler Panel

Print Images

Adds the selected image(s) to the print spooler.

New Instance

Creates another instance of StudioLine.
Permits working on multiple documents or objects side by side, as well as drag and drop operations between different StudioLine modes or StudioLine sites.

Exit

Exits StudioLine.


Edit Menu

This menu contains object specific functions.

Image Toolbox

A collection of image enhancements and special effect tools.
Image Toolbox Panel

Active Image Tools

Displays a list of image tools that have been applied against the selected object, if any.

  • Click the right mouse button on any tool listed, to access the context menu.

  • Click the left mouse button on any tool, or choose Open from the context menu, to view the specific settings.

  • Drag a list item to change the sequence in which the tools are applied.

  • Drag a list item to the Trash Can, or choose Delete from the context menu, to stop using this tool on the selected object.

  • Open the Image Toolbox to apply additional tools.

  • Use the Copy/Override button to apply the same settings against other objects. The copied active tools list will replace any settings that may have previously existed.

  • Drag the Copy/Override button to the Trash Can to eliminate all image processing for the selected object.

Roll-Over Mode

Each object can have a second, distinct list of active tools. The second list is used in rollover mode. Use the Rollover button on the tool bar to toggle the page view between normal mode and rollover mode.

Undo

Takes back the last action.

The undo stack remembers any actions performed in the current StudioLine mode since the last time the file was saved.

Ctrl+Z

Redo

Performs the action for which "Undo" was previously chosen.

Ctrl+Y

Cut

Moves the current selection to the system clipboard.

Ctrl+X

Copy

Copies the current selection to the system clipboard.

Ctrl+C

Paste

Pastes the content of the system clipboard.

Select All

Selects all objects.

Ctrl+A

Selection

Displays the list of all selected objects, if more than one. The left mouse-button can be used to manipulate the elements of the list.

  • Click on an item to select that object.

  • Ctrl + Click to toggle the selected state.

  • Double-click a text item to open the text editor.

  • Right-click an item to view the context menu of the currently selected object(s).

The selection list can be useful to pick specific objects out of a stack of layered objects.

Lock Layout Objects

Prevents layout objects from being selected or moved accidentally.

Ctrl+L

Choose Color

Sets a color for selected elements or tools.
Choose Color Panel

Link

Defines a link for selected objects.
Link Properties Panel

Image Quality

Sets image quality and file size by controlling image compression.
Image Quality Panel

Descriptors

Assigns descriptive information to selected objects.
Descriptors Panel

Position Anchor

Position Anchor Panel

Container Submenu

Container Submenu


Page Menu

This menu groups the settings, which are specific to an entire page or layout. For layouts with image views, each image view level maintains unique settings. Changes made to any level (including the "Page" level) will not effect any other image views.

Background

Fills the background with a solid color or by tiling an image.
Background Panel

Text Link Properties

Defines colors and styles for text links.

  • Link: Any link embedded in text.

  • Visited Link: Links to a page, which was previously visited.

  • Active Link: Links to a page that is currently viewed in another browser window.

  • Rollover Link: Links that are currently under the mouse pointer.

If not explicitely defined, then the default for any text link is the normal link color and style.

Automatic Forward

Sets an automatic forward to a different page. The current page can be displayed for a selected time period, before the visitor is redirected.

This function can be helpful for self-running presentation sequences or after the content of a web site has been reorganized. Search engines or visitors may have book marked old URLs. Instead of deleting old URLs, set an automatic forward to the new address.

Apply Layout Template

Opens StudioLine Explorer. Drag a layout template onto the work space to apply it to the current page.

Layout Submenu

Layout Submenu

Page Descriptors

Page Descriptors Panel

Include HTML File

During publishing, StudioLine renders all necessary HTML code to display the current page. Sometimes, server side scripts or other customizations have to be added.

  • Create an HTML formatted file, containing any additional code.

  • Specify the name of that HTML file to be included.

During publishing, StudioLine will merge the content of the included file with its own HTML code. For the <HEAD> section, any included code is appended just before the closing tag. For the <BODY> section, any included code will appear right behind the opening tag.

User Guide: Custom HTML Code

Scrollbar Properties

This setting controls, whether a vertical and/or horizontal scrollbar is displayed in the browser window.

Show as necessary

An appropriate scrollbar will appear if the height or width of the document is larger than the browser window.

Show always

Scroll bars are displayed, even if the complete page fits in the browser window.

Show never

No scrollbars are displayed, even if the complete page does not fit in the browser window. Some content of the page may not be visible.

Controlled by browser

With this option, StudioLine does not set any explicit scrollbar options. The appearance of scrollbars is ultimately controlled by browser defaults or a script.

URL

Normally, StudioLine will use the name of a page and automatically create a valid web page address (URL).

Sometimes, it may be necessary for StudioLine to use a specific URL so that pages better fit into the existing structure of a site, or because a StudioLine pages may replace existing pages, which had been previously created by other tools. Reusing URLs will preserve existing search engine links and visitors’ bookmarks.

When entering the URL, omit the server name and specify only the absolute path from the root directory specified in the publishing profile. If the URL specifies only a path and omits a document name, then the default document name from the publishing profile will be used.

Margins

Margins Panel

Guides

Guides Panel


Text Processing Menu

New Text Object

Creates a new text object and opens the editor.

· Click the menu item to change the mouse pointer to a text insert cursor. Click in the workspace to open the editor at a chosen location, click outside the workspace to cancel the text insert.

· Drag the menu item to open the editor at a chosen location.

Edit Text Object

Opens the editor for the selected text object.

Font Properties

Sets properties for selected text inside a text element.
Font Properties Panel

If a new text object is being created while the Font Properties panel is open, then the current font properties will be used as default settings.

Text Width

Changes the width (in pixels) of the selected text element. This is useful, if multiple text columns have been selected and should be set to the same width.

The width of a text element may also be set by selecting it and then dragging the sizing handles.

Search

Search for text in the currently selected area, the currently open text editor window or all text objects on the page.

Search and Replace

Replace text in the currently selected area, the currently open text editor window or all text objects on the page.

Spell Checker

Checks for possible spelling errors inside the currently open text editor window or in all text objects on the page.

User Guide: Text Editor


Publish Menu

Before a site can be viewed with a browser, the content of a StudioLine site needs to be converted to a compatible format and transferred to a web server.

Render

Renders the current site to browser compatible HTML documents, graphics and media files, and stores the site on a local drive for preview. A prompt will offer to render any updated pages and to include any pages you select manually.

During the render process, a progress bar estimate the time to completion, based on the number and size of pages and objects.

F7

Transfer

Copies rendered pages from the local drive to the web server.

StudioLine will open the panel Pages to Publish, ready to transfer only new or updated files. The user can customize that list of pages to be published.

If pages were deleted from the site, then the appropriate files will be removed from the server.

Note: This function requires some network connection to the server, e.g., via the Internet or a LAN.

F8

Profile

Maintain Publishing Profiles and select the current profile to be used for the Publish or Unpublish Page functions.

Publishing Profile Panel

Exclude Current Page…

A page may be excluded either from all publishing profiles, or just from the currently active one. This option is page-specific. It is not available for the home page of a site.

When a page is excluded, it will not be rendered and/or published. If that page had previously been published, it will be deleted off the server. Links to excluded pages that are rendered as "No Link" on any referring pages. Automatically generated navigation links, such as “previous” or “next”, will simply skip past any excluded page. If the referring pages already exist on the server, they will automatically be updated.

Use this option to exclude new pages that are not yet ready for public viewing. By excluding a page from only the current profile, one could omit the page from a production server, but still upload it to a staging server for testing.

Another possible use is a page that act as project notepad. By excluding a page from all publishing profiles, it will be visible only to the StudioLine user but not to regular web site visitors. Such an “internal” page could be used to collect notes, contact informatin, to-do lists, reminders, images, font samples and other information related to the current site.

Browse Preview

Opens the browser to preview the rendered site from the local drive.

Browse Web Server

Opens the browser to view the current content on the web server.

User Guide: Publishing


Layout Submenu

The content and appearance of a new page is derived from its layout. Options, objects and design derived from the layout can be customized for an individual page by using the Page Editor. Later changes to the layout will preserve these customizations.

With this menu, the layout is reapplied to the derived pages. Prior customizations of options, objects and design derived from this layout will be lost.

Reapply Layout to Page (excluding Image Views)

Reapplies the layout to the page. Only the primary page level will be processed. Image view levels will not be reapplied.

Reapply Layout to Current Image View

Reapplies the layout to all pages derived from the current image view.

Reapply Layout to Page and Image Views

Reapplies the layout for the page and all image views, if any.

User Guide: Layouts and Templates


Navigation Menu

Clicking elements in a browser window would activate any link and display the linked-to page. In StudioLine, however, clicking an object will select it so that it may be manipulated.

The navigation menu will open pages that are linked to the current page.

Follow Link

Select a linked object on the workspace and then use this function to open the target page, or double-click the object.
Object Context Menu

Home

Open the home page defined for the site.

Site Settings Panel

Index

In a page that is part of an automatically created page hierarchy, the function will open the topmost page of the hierarchy.

Up

In a page that is part of an automatically created page hierarchy, the function will open the parent document in the higher level of the hierarchy.

Next Page / Previous Page

In a page that is part of an automatically created page hierarchy, the function will open the next or previous page on the same level of the hierarchy.

First Page / Last Page

In a page that is part of an automatically created page hierarchy, the function will open the first or last page on the same level of the hierarchy.

Automatic Forward

In a page with an automatic forward, the function will follow the forward.

Target Positions

Skips to one of the target positions defined on this page.


Preferences Menu

Image Archive

Controls the pre-processing of pictures to be stored in the Image Archive.

Image Archive Preferences Panel

Image Archive Background

Controls the background colors in the Image Archive content pane.

Image Archive Background Panel

Text

Defines the default settings for new text objects.
Text Preferences Panel

Image Rendering

Defines the initial quality settings for new images and text graphics.
Image Rendering Preferences Panel

Mailing Images

Defines the default settings used when images are sent via email.

Mailing Images Preferences Panel

Export Object

Defines the default settings used when images are exported for use by other applications.

Export Object Preferences Panel

Print Settings

Defines the default settings used when printing images.

Print Preferences Panel

Show Rulers

Toggles the display of the page ruler.
Page Context Menu - Guides Panel

Customize Toolbar

Select, which toolbar palettes to show.

Show QuickStep Bar

Select, which toolbar palettes to show.

System Language

Choose the language used by StudioLine.

During setup, StudioLine will adhere to the language setting of the operating system.


Help Menu

Help

Opens the StudioLine help.

F1

Tutorials

Opens a list of available tutorials.

Show All Hints

Certain StudioLine hints can be suppressed by the user. Select this function to start displaying all hints again.

About StudioLine

Displays the StudioLine banner.

Version

Displays the product version and build number, as well as the location of the StudioLine log file. Product support personnel may ask for this information.

Product Activation

Enter the product registration code your received when you purchased the product.

StudioLine Website

Opens your browser to the StudioLine website.


Page Context Menu

The Page Context menu appears after clicking the right mouse button over the background of a page or layout.

A context menu will contain different choices, based on the current circumstances. Only some of the following menu items will appear at any one time.

Paste

Pastes the content of the system clipboard.

Ctrl+V

Insert Submenu

Assists with placing objects on the work space and displays a panel with hints. If hints do not appear, select Show All Hints from the Help menu.

Image from My Computer

Opens the StudioLine Explorer. Locate the image on your computer and drag it onto the page.

Image from Image Archive

Opens the StudioLine Explorer. Locate the image in the Image Archive and drag it onto the page.

New Text Object

Click anywhere on your page to open the text editor.

New HTML Object

Click anywhere on the page to open the HTML code editor.

New Color Pane

Click anywhere on the page to place a color pane object. Then drag the sizing handles as necessary. Finally, choose Properties from the Object Context menu.

Color Pane Properties Panel

Margins

Margins Panel

Guides

Guides Panel

Lock Layout Objects

Prevents layout objects from being selected or moved accidentally.

Ctrl+L

Hide Selector Bands

Toggles the display of selector bands around selected objects.

Selector bands will reappear, if any object is being selected.

Ctrl+H

Object Status

Controls the display of icons representing the object status.

Object Status Icons

Ctrl+G

Container Submenu

Container Submenu


Container Submenu

Position Anchor

Changes the reference point of the current object.
Position Anchor Panel

This function is disabled when the page has no container.

Off

Removes the container from the page. Objects previously contained inside the container become regular objects on the page.

 Ctrl+N

Create

Creates a new container object.

Insert Line Break Before/After

Objects inside the container are lined up in rows until the width of the container has been reached. Insert a line break to start a new row at the current object.

This menu item will only appear for objects inside a container.

Settings

Container Settings Panel


Object Context Menu

The Object Context menu appears after clicking the right mouse button over an object, or after selecting an object and then pressing Alt+Enter or the special Context Menu key on the Windows keyboard.

A context menu will contain different choices, based on the current circumstances. Only some of the following menu items will appear at any one time.

Active Image Tools

Displays a list of image tools that have been applied against the selected object, if any.

Edit Menu - Active Image Tools

Descriptors

Descriptors Panel

Descriptor Association

Descriptor Association Panel

Cut

Moves the current selection to the system clipboard.

Ctrl+X

Copy

Copies the current selection to the system clipboard.

Ctrl+C

Paste

Pastes the content of the system clipboard.

Ctrl+V

Delete

Deletes the current selection.

Delete

Split Text Object

Splits the current text object into two at the cursor position.

Ctrl+J

Join Text Objects

Joins multiple selected text objects into one.

Ctrl+J

Discard Roll-Over Settings

Resets the active tools from the special list used for rollover processing back to the standard list. When the page is rendered, no scripting code for rollover processing will be generated.

User Guide: Roll-Over Effects

Use as Placeholder

This option marks the selected object as a place holder so that it can be replaced by different images at a later time.

One application could be to design a layout that uses place holder images temporarily for positioning and sizing. Once the actual imagery is available, it is dropped onto the place holders to take their place. The active tools of the place holder, including scaling and cropping, are applied against the replacement image.

Updating news pages is just as easy. Drop new images onto the place holders and drag replacement text from your word-processor – voila!

Independent of Prototype

When an image is added to a page, a global list of active tools is applied. The global list is copied from the prototype image of the Layout. If a different Layout is assigned to the page or if the settings for the prototype are modified, the changed image processing can be propagated to all images on the pages.

  • Select this option to disregard future layout changes.

  • Unselect this option to propagate any future changes from the prototype image of the layout to the current object.

Transfer to Layout

The selected object is dropped from the page layer into the layout layer.

With this option, you can design an entire page and later decide which objects are unique content and which objects should become part of the layout.

Text Width

Changes the width (in pixels) of the selected text element. This is useful, if multiple text columns have been selected and should be set to the same width.

The width of a text element may also be set by selecting it and then dragging the sizing handles.

Position

Position Panel

Lock Position

Once an element's position has been locked, it cannot be accidentally dragged to a new location. If a locked element is copied to a different page, it will be placed at the same position.

Stacking Order Submenu

Bring to Front / Send to Back (of Current Stack)

The selected image is moved to the very front or back of the current stack.

Step Forward / Step Backward

The selected image is moved one step in forward or backward direction through the current stack.

Move to … Stack

This option is only available in layout and layout template mode. The image is moved to one of the three layout stacks.

Stacking Order (User Guide)

Line Break

In the container, items are lined up in rows until the width of the container has been reached. Choose Line Break to start a new row of items at the current object.

Link

Link Properties Panel

Target Position

Assigns a label to the selected object. This label may be used as a target in a link, causing the browser to scroll the page directly to the object.

Each page has predefined labels referencing the top and bottom of the page.

Link Properties Panel

Follow Link

If an element has a link to a page in the current site, that page is opened in the Page Editor.

Reload Source Image

Reloads the graphics file, which originally had been imported into StudioLine. If available, StudioLine will look for the file in its original location. If the file is not found and if only a single image is currently selected, then the user will be offered to browse for the file.

This function can improve image quality whenever a small section of an image was first cropped and subsequently enlarged. The reload function retrieves the original graphics file and stores the cutout area in the highest resolution permitted by the Image Archive Preferences. In case of Kodak Photo CDs, the most suitable resolution will be loaded.

Reloading may also be used to restore a lost image. Images that somehow were lost inside StudioLine would appear in StudioLine with a special icon instead of the actual picture. The reload function offers a way to address this situation.

Image Viewer / Slide Show

Allows manual or automatic browsing (slide-show) through currently selected images.

Image Viewer

Export

This function allows third-party text and graphics applications to use content maintained by StudioLine.

Export Object As Panel

Create Web Gallery

Arranges the selected images in a gallery for use on a website.

Web Gallery Panel

Send via Email

Creates a new message in the default email software configured for your computer (if any). The selected images are enclosed as attachments.

Send Images via Email Panel

Print Images

Adds the selected image(s) to the print spooler.

Selection

Displays the list of all selected objects, if more than one. The left mouse-button can be used to manipulate the elements of the list.

  • Click on an item to select that object.

  • Ctrl + Click to toggle the selected state.

  • Double-click a text item to open the text editor.

  • Right-click an item to view the context menu of the currently selected object(s).

The selection list can be useful to pick specific objects out of a stack of layered objects.

Hide Selector Bands

Toggles the display of selector bands around selected objects.

Selector bands will reappear, if any object is being selected.

Container Submenu

This menu item only appears for objects inside a container.

Container Submenu

Properties

This menu item only appears for container objects.

Color Pane Properties Panel

Open in Image Archive

Opens the original image in Image Archive mode.

Create a Copy

Creates a duplicate of the image under a new name.

This function can be helpful when you need more than one distinct cut-out area from a single picture.

This menu item only appears in the Image Archive.

Create a Shortcut

Creates a reference pointer (shortcut) to the original image. The shortcut may be moved to other folders in the Image Archive. Any changes to the original image will propagate to the shortcuts.

This function can be helpful, when preparing a slide show from images that are located in a number of different folders.

This menu item only appears in the Image Archive.

Where Used

Displays a list of pages or layout templates where an image is being used.

This menu item only appears in the Image Archive.


Settings Panel Context Menus

These context menus appear when pressing the right mouse button on the Copy or Lock buttons of the panels for image tools, descriptors and other object specific settings. The Copy and Lock buttons are used to copy settings from a source object to one or multiple target objects.

Copy Button

This button changes to red color when the settings in the panel are different from the settings for the selected object(s).

Copy Settings

Copies the settings from the respective panel to all selected target objects.

This is equivalent to clicking the left mouse button on the Copy button.

Reset Settings

This function discards the settings.

This is equivalent to dragging the Copy button to the Trash Can.

Note: Some panels have settings that cannot be reset, e.g., in StudioLine a background will always have “some” color – even that color is plain white.

Delete from Active Image Tools List

This function removes the image tool from the Active Tools list. Any settings related to this panel are discarded.

This is equivalent to dragging the Copy button to the Trash Can.

Help for this Button

Displays the help topic you are currently reading.

Help for this Panel

Displays the help topic for the respective panel.

Lock Button

This button changes to red color, when the panel settings have been “locked”.

Lock Settings on Original Selection

Normally, the settings displayed in the panel always reflect the currently selected object.

When trying to copy settings from one “source” object to other “target” object or objects, it can be helpful to first “lock” the settings on the “source” object, before selecting the target objects. This way, the settings will not change the moment the target objects are selected.

This function is equivalent to clicking the Lock button with the left mouse-button. Repeated clicking will toggle the “Lock” function on and off.

Help for this Button

Displays the help topic you are currently reading.

Help for this Panel

Displays the help topic for the respective panel.

Using the Copy and Lock Buttons

Copy Settings by Extending Selection

  • Select the source object (that has the settings you wish to copy).

  • Hold down the Ctrl key while selecting additional objects.

  • Click the “Copy” button to apply the same settings to all objects.

Copy Settings by Dragging the Button

  • Select the source object (that has the settings you wish to copy).

  • Drag the “Copy” button to a target object. The settings will be applied to this object.

Lock and Copy Settings

  • Select the source object (that has the settings you wish to copy).

  • Click the “Lock” button to freeze the settings based on the source object.

  • Select target object(s).

  • Click or drag the “Copy” button to apply the settings to the target object(s).

Discard Settings

  • Select the source object (that has the settings you wish to discard).

  • Drag the “Copy” button to the trash can, or select “Delete from Active Tools list” or “Reset Settings” from the context menu of the “Copy” Button.


Text Editor Context Menu

Cut

Moves the current selection to the system clipboard.

Ctrl+X

Copy

Copies the current selection to the system clipboard.

Ctrl+C

Paste

Pastes the content of the system clipboard.

Ctrl+V

Split Text Object

Splits the current text object into two at the cursor position.

Ctrl+J

Insert Descriptor

Inserts variable information into text.

Insert Field Panel

Toggle Case

Toggles the case between three states: all caps, lowercase, mixed case.

Ctrl+Shift+A

Link

Link Properties Panel

Follow Link

Select a linked object in the text editor. Then use this function to open the target page.

Suggestion

This menu item is displayed, if the current word was rejected by the spell checker.

Choose this function to display a list of similar words.

Ignore Always

This menu item is displayed, if the current word was rejected by the spell checker.

Choose this function to ignore all occurrences of this word in the text. Other occurrences in the same text will not be rejected.

Add

This menu item is displayed, if the current word was rejected by the spell checker.

Choose this function to add the rejected word to the custom dictionary. Future occurrences of the word in the current language will not be rejected.

Spell Check

This menu item is displayed, if the current word was rejected by the spell checker.

Choose this function to open the spell check panel to access further options.


HTML Object Context Menu

Descriptors

Descriptors Panel

Cut

Moves the current selection to the system clipboard.

Ctrl+X

Copy

Copies the current selection to the system clipboard.

Ctrl+C

Paste

Pastes the content of the system clipboard.

Ctrl+V

Delete

Deletes the current selection.

Delete

Transfer to Layout

The selected object is dropped from the page layer into the layout layer.

With this option, you can design an entire page and later decide which objects are unique content and which objects should become part of the layout.

Text Width

Changes the width (in pixels) of the selected text element. This is useful, if multiple text columns have been selected and should be set to the same width.

The width of a text element may also be set by selecting it and then dragging the sizing handles.

Position

Position Panel

Lock Position

Once an element's position has been locked, it cannot be accidentally dragged to a new location. If a locked element is copied to a different page, it will be placed at the same position.

Stacking Order Submenu

Bring to Front / Send to Back (of Current Stack)

The selected image is moved to the very front or back of the current stack.

Step Forward / Step Backward

The selected image is moved one step in forward or backward direction through the current stack.

Move to … Stack

This option is only available in layout and layout template mode. The image is moved to one of the three layout stacks.

Stacking Order (User Guide)

Follow Link

If an element has a link to a page in the current site, that page is opened in the Page Editor.

Export

This function allows third-party text and graphics applications to use content maintained by StudioLine.

Export Object As Panel

Hide Selector Bands

Toggles the display of selector bands around selected objects.

Selector bands will reappear, if any object is being selected.

Container Submenu

This menu item only appears for objects inside a container.

Container Submenu

Edit

HTML Code Editor

Properties

HTML Object Properties Panel


Guide Context Menu

Position

Opens a panel for entering the position of the guide. This is helpful, when the location or distance between guidelines has to meet very specific requirements.

Delete

Removes this guide.

Settings

Guides Panel


Image Archive Context Menu

The context menu appears after clicking the right mouse button over the image archive workspace.

Paste

Pastes the content of the system clipboard.

Ctrl+V

Insert Image from My Computer

Opens the StudioLine Explorer. Locate the image on your computer and drag it onto the page.

Sort by…

Images may be sorted by any of the assigned descriptors. Placeholders will be resolved before sorting. (Choose Descriptors from the Edit menu to assign descriptor values to an image.)

Note: The sort criteria for a folder will be remembered. New images will be inserted at the proper location.

Object Status

Controls the display of icons representing the object status.

Object Status Icons

Ctrl+G

Display Options

Controls the spacing and alignment of preview (thumbnail) images on the workspace.

Image Archive Background

Controls the background colors in the Image Archive content pane.

Image Archive Background Panel

Preview Dimensions

This setting defines the maximum height and width with which images will be previewed in the current folder. Smaller images will be previewed in their original size.

Image Viewer / Slide Show

Allows manual or automatic browsing (slide-show) through currently selected images.

Image Viewer

Create Web Gallery

Arranges the selected images in a gallery for use on a website.

Web Gallery Panel


Work on Pages

This startup panel appears when StudioLine Photo Edition is started.

Open Page…

Use this option to resume with the same page you had most recently worked on.

Open Existing Page

This will show a list of pages, you previously had saved. Select the page you wish to resume working with.

Create Page

This will create a new page with a web gallery for your images.


StudioLine Explorer Panel

StudioLine Explorer

The Explorer provides access to files on your computer and local network, as well as StudioLine-internal objects. For certain objects, a click with the right mouse button will preview the object or reveal a list of other actions that may be performed. Dragging an object to the trash can will delete it. Multiple Explorer windows may be opened simultaneously, allowing for drag and drop operations between windows.

Folder and Content Panes

StudioLine Explorer employs two panes. Use the folder pane to navigate, search, access, rename and delete folders.

  • To view the content of a folder, single-click the left mouse button on the folder’s icon.

  • To view a list of subfolders, double-click the left mouse button on the folder’s icon.

  • To view a list of available functions, access the context menu by clicking the right mouse button over the folder’s name.

  • To delete a folder, drop it into the trashcan.

The content pane shows the objects of the current folder in one of three distinct views:

  • Text View: a list of object names only

  • Thumbnail View: thumbnail images or icons

  • Combination View: a listing of a thumbnail image or icon, name and (if available) certain properties per each object.

My Computer
My Desktop

“My Computer” displays files on local and network disks. To view desktop and network folders, press the “Up One Level” button as necessary.

“My Desktop” displays folders, files and system objects that appear on the Windows desktop.

Viewing Images or Slide Shows

Click the right mouse button on an image to open the context menu. Select Image Viewer to view a large scale picture or to configure a slide show for the current folder.

Image Viewer Panel

Adding Images to StudioLine

Double-click a graphics file or drag it onto the workspace to pre-process the image in accordance with the preference settings. Depending on the active StudioLine mode, the image is then added either to the current page, the Layout or the Image Archive.

Image Archive Preferences Panel

Note: The standard Windows Explorer may be used instead.

Adding Media Files to StudioLine

Drag a media file on the workspace to add a skeleton HTML object to the page. Customize the HTML code to your specific needs.

Media File Types

Note: The standard Windows Explorer may be used instead.

Exporting to Other Applications

Drag an image or text element from the StudioLine workspace to the content pane of the desired local or network folder to open the Export As panel.

Export As

Image Archive

Displays images in the Image Archive.

  • Double-click an image to open the Image Viewer.

  • In Page Editor, Layout or Layout Template modes, add an image by dragging the graphics file onto the workspace.

  • In Image Archive mode, move an image to the current folder by dragging it onto the workspace.

  • Drop a graphics file into the Explorer's content pane to add it to the image archive.

  • Move an image archive folder by dragging it to a new location in the image archive content pane.

  • Drop an image into the trashcan to delete it.

  • Click the right mouse button on a user folder to rename or delete it.

  • Click the right mouse button on an image to access its context menu with additional functions.

Note: The folder $AutoArchive$ contains images used by the current site which the user has not yet organized in permanent Image Archive folders. Images will be discarded, if they are no longer used.

Sites

Displays web site projects, their settings and pages.

  • Double-click on a site to list its related objects. Additional functions are available for each type of object.

  • Drop a site onto an open page on the workspace to create a link to the site.

  • Drop a site into the trashcan to delete the site. This will also offer to remove the site from the web server.

  • In the content pane, click the right mouse button on a site to view its settings, or to rename or delete it.

  • Move a folder by dragging it to a new location in the same or a secondary Explorer window.

  • Click the right mouse button on a folder to rename or delete it.

Pages

Displays pages in the currently selected site.

  • Double-click a page to open it in the StudioLine editor.

  • Drop a page onto the page on the workspace to create a link.

  • Drop a page into the trashcan to delete it.

  • Click the right mouse button on a file to preview, rename, edit or open it, or to create a new page.

  • Move a folder by dragging it to a new location in the same or a secondary Explorer window.

  • Click the right mouse button on a user folder to rename or delete it.

Layout Templates

Displays available Layout Templates.

  • Double-click a layout template to open it in the StudioLine editor.

  • Drop a template onto the workspace to use it as the layout for the current page.

  • Drop a template into the trashcan to delete it from the system.

  • Click the right mouse button on a file to preview or rename it.

Note: When a new Layout Template is assigned to a page, the new image settings will propagate to all images on the page. To prevent an image from being altered, choose Independent of Prototype from its Object Context menu.

Publishing Profiles

Displays Publishing Profiles for the currently selected site.

  • Double-click a profile to edit it.

  • Click the right mouse button on a profile to edit or delete it.


Folder Navigation Links Panel

Folder Navigation Links

Activate Folder Navigation Links

Provides links between the pages in a folder and to an index or start page.

User Guide: Automated Folder Links

Index Page

Defines a “parent” page. The special Index Page navigation link will be associated with that page. Even though the index page may reside in the folder itself, it will be excluded from the previous/next navigation chain.

Normally, the index page would be set up to contain a link to all pages or at least to the first page in the folder navigation chain.

Sort By

Defines the sequence in which pages inside the folder are linked:

  • Page Name (alphabetical)

  • Order in Index Page (the navigation sequence follows the order of appearance on the index page)

  • Creation Date

  • Modification Date

Sort Order

Defines either ascending or descending sort order.


Send Images via Email Panel

Send Images via Email

Image Size

For large images, choose the maximum dimensions that the image should be scaled down to. You may also opt to email the picture in its full size.

Proportional Scaling Panel

Note: Images used in pages or templates are often scaled and cropped. If necessary, locate and email the original image from the image archive.

Format

Choose from one of the most common picture formats.
Note: JPEG is widely used and reduces the size of email attachments.

Image Quality

Choose a quality setting that delivers an acceptable file size and quality.

Image Quality Panel

Note: This option is not available for all file formats.

With Transparency

Select this setting to maintain the transparency information with the images.
Note: This option is not available for all file formats.

Message Size

Displays the estimated size of the email message. Many mail accounts can only receive messages up to a predetermined size (typically a few MB).

QuickSteps: Email


Export As Panel

Export As

Specify options for sharing objects with other applications.

Collage /
Single Files

Multiple images may be exported as a single graphic file in their current layout (a collage), or as individual image files.
Note: Available only if exporting from Page Editor or Layout.

Roll-over Pictures

When exporting images from a page, they will be either shown with rollover mode on or off, based on the current setting on the Tool Bar.
Choose this option to export both versions of an image.
Note: Available only if exporting from Page Editor or Layout.

Include Image Views

A page may contain thumbnail images which link to image views with larger or full-size versions of that image. Choose this option to include the image versions from all image view pages.
Note: Available only if exporting from Page Editor or Layout.

Image Size

For large images, choose the maximum dimensions that the image should be scaled down to. You may also opt to export the picture in its full size.

Proportional Scaling Panel

Note: Available only if exporting from Image Archive.

Format

Choose a file type supported by your other applications.
Text elements may be exported either to a graphics file or in a number of text formats.

Image Quality

Choose a quality setting that delivers an acceptable file size and quality.

Image Quality Panel
Note: This option is not available for all file formats.

With Transparency

Select this setting to maintain the transparency information with the images.
Note: This option is not available for all file formats.

File Name

Enter a file name to help you identify the exported file. StudioLine will add a sequence number to the name, if more than one file needs to be created.

A file name of “*” will instruct StudioLine to derive a file name from the name of each image.

Note: Do not enter a path or a file type. The path is determined by the current folder in the StudioLine Explorer, the file type is determined by the chosen Format.


Export Site Panel

Export Site

When exporting a site for another user, you need to decide if they should be able to publish the site to your web servers of if they need to create their own publishing profiles after import.

Choose Publishing Profiles

Click a profile to include it in the export.

Deselect All Profiles

Choose this option to reset the list of selected publishing profiles.

Select All Local Profiles

Choose this option to include all local publishing profiles.

Select All Profiles

Choose this option to include all publishing profiles.


Proportional Scaling Panel

Proportional Scaling

Reduces large images to the maximum dimensions specified, while maintaining the aspect ratio (width to height proportions).

Use Original Image Size

This option turns off scaling.

Max. Pixel Dimensions

Choose one of the common image dimensions, or choose to specify your own width and height.

Width / Height

Choose the maximum width and height that the image will not exceed.


Site Settings Panel

Site Settings

Name

Project name.
Used only within StudioLine and has no effect on the published web site.

Home Page

Select the page that should be displayed when a web browser is requesting the root directory for the site.

If a site with a former home page is changed to have no home page, then the former home page will be removed during publishing. Any documents having a “home” navigation link will be broken.

Default Layout Template

Select the layout template used for any new pages you create for this site.

Publishing Profile

Select the publishing profile used to transfer this site to a server.


Verify Links

Validates links and allows for global changes of all occurrences of a link on the site.

List of Links

Displays a list of URLs and email addresses that are referenced in links from pages of the current site.

  • Links that have yet to be verified show a gray question mark.

  • Valid links show a green checkmark.

  • Invalid links show a warning sign. Too see the specific error condition, move the mouse pointer over the warning sign.

Use the right mouse button to open a context menu for a link. It allows to verify, change or delete that link. You may also view a linked page in a web browser.

Verify Selection

Select individual URL links to be verified, then press the Selection button.

Verify All

All URL links will be verified.

Change Link

Globally changes all occurrences of the selected link.

Leave the new URL empty to delete all occurrences of the link.


Choose Site

Choose Site for Web Gallery

The gallery will become part of a web site. A single site can be used to publish any number of web galleries.

Current Site

Displays the name of the most recently used site.

To continue using the same site, simply press the OK button.

Switch Sites

Select a different site for this gallery.

Create Site

Choose this option to create a new site for this gallery.


Web Gallery Panel

Web Gallery

The gallery will have an index page with small thumbnail images, which links to detail pages showing each image in regular size. Navigation buttons make it easy for visitors to browse through the gallery.

Styles

Select a thumbnail style.

Preview

Displays a preview of the index page design.

QuickSteps: Web Gallery


Print Spooler Panel

Print Spooler

The print spooler maintains a list of images to be printed.

To add an image to the spooler, drag it from the windows desktop, the Windows Explorer or from StudioLine to the Print Spooler panel. In the Image Archive, you can choose Select for Printing from the Object Context menu or press the Print button on the QuickStep bar.

To remove an image from the spooler, drag it to the trash can.

Context Menu

Right-click an image in the spooler to access its context menu.

Image Viewer

Allows manual or automatic browsing (slide-show) through currently selected images, using any print settings that were specified for each.

Image Viewer

Create Duplicate

Creates a duplicate of the selected image. This way, the same image can be printed multiple times, each with different settings.

Prints per Image

Choose the number of times the selected images should be printed.

Note:.If multiple copies of all images are needed, then it is quicker to set the Copies per Page in the final Print panel.

Print Settings

Controls the printed appearance of the selected images.

Print Settings

Print

Prints the selected images.

Delete

Deletes the selected images from the spooler.

Function Buttons

Switch View

Choose how images are listed:

  • Text View - displays image names

  • Thumbnail View – displays thumbnail images

  • Detail View - displays thumbnail images, names and settings

Additional buttons provide quick access to the functions in the context menu.


Print Settings Panel

Print Settings

Cropping Tool

Use the cropping blades or the diagonal corner handles to define the cutout area to be printed.

Click inside the cutout area, then drag the hand cursor to move the cutout without changing its dimensions.

Use the appropriate “Lock” button next to the Image Size and the Resolution settings to control which one will remain fixed during cropping.

Note: If the Aspect Ratio is locked, then the movement of horizontal and vertical cropping blades is coordinated to maintain the image proportions.

Navigation

Click the forward or backward arrow to browse to other selected images.

Picture Format

Choose one of the common picture formats.

Rotate 90°

The image will be rotated by 90° for printing.

Note: The display of the image will not change, only the orientation of the image on the printed page.

Background Color

This color will be appear on the unused areas of the printed page and in any transparent areas of the images.

Image Size

Displays the size of the printed image.

To maintain the image size while cropping, use the “Lock” button to fix the size. StudioLine will adapt the resolution as necessary.

Aspect Ratio

Displays the printing proportions.

To crop the image to custom proportions, use the “Lock” button so that the aspect ratio is not fixed.

Resolution

Displays the print resolution.

To maintain a given resolution while cropping, press the “Lock” button to fix the resolution. StudioLine will adapt the image size as necessary.

Note: For optimal results, StudioLine may make minor adjustments to the print resolution.

QuickSteps: Printing


Choose Printer

You have chosen an option that is printer specific. Choose a printer and configure any relevant hardware options.

Available Printers

Choose the desired printer from the list.

Settings

This option will access the settings specific for the selected printer hardware.


Print Panel

Print

Printer

Choose a printer.

Printer Settings

Displays the Windows settings for the chosen printer, allowing you to control hardware specific options, such as paper size.

Print All /
Print Selected

Choose to print only the selected images or all images in the spooler.

Note: This option defaults to “Print All” if no images were selected.

Copies per Page

Choose the number of copies per page.

Crop Marks

Prints crop marks for each image for easier cutting.

Print Preview

Generates a preview of the printed pages.

Images per Page

Choose to fit as many images as possible on a page, or specify a maximum number.

Optimize Utilization

This option will optimize paper utilization.

Images will be ordered and aligned so that a minimum number of pages are printed.

Center on Page

Centers images on the page.

Optimize Quality

Adapts the print resolution based on the capabilities of the printer driver. This optimizes print quality.

QuickSteps: Printing


Print Preview Panel

Print Preview

Generates a preview of the pages that are ready to be printed.

Scale To

Choose a suitable scaling factor for the preview.

Full-Screen Mode

Displays the preview using the entire computer screen.

Note: Press the Esc key to return to the normal, windowed mode or choose Exit from the Context menu.

Caption

Displays the current page number and total number of pages.

You may drag the caption to a suitable position no the screen.

(Only visible in full-screen mode)

Button Bar

The VCR style buttons allows browsing through the pages.

The print button sends all pages to the printer.

The exit button will return from full-screen mode to the normal windowed preview.

(Only visible in full screen mode)

QuickSteps: Printing


Page Descriptors Panel

Page Descriptors

Descriptive information can be associated with each page. System Descriptors are needed by web browsers, search engines or internally by StudioLine. All Descriptors can be used to replace placeholders (variables).

Page Specific System Descriptors
Title

This text is displayed in the title bar of the web browser and displayed by the search engines.

Default: %%PageTitle%%

Author

Name of the person who developed the page.

Default: %%RegisteredUser%%

Description

Narrative description of the page contents, primarily used by search engines. Should be limited to 200 characters.

Keywords

A comma separated list of key words and phrases, which are appearing on the page or are relevant to the content. Keywords are used by search engines. They should be limited to 1,000 characters and entered in lower case.

Copyright

Copyright notice.

Example:

Title

StudioLine - Features and Benefits

Author

Jim Smith

Description

StudioLine allows creative freedom in web page layout. No knowledge of HTML or scripting languages is required. It integrates all image editing functions directly in the web page editor.

Keywords

studioline, h&m, software, web, site, page, editor, fast, easy, creative, attractive, imaginative, layout, appearance, template, absolute, position, dynamic, html, dhtml, http, script, code, image, photo, graphic, editing, filter, special, effect, thumbnail, gallery, level, jpg, gif, jpeg, compression, superior, quality, roll-over, buttons, placative, banners, browser, server, ftp, publish, export, import, links

Copyright

2001, H&M Systems Software, Inc.

Appendix: Page Descriptors


Margins Panel

Margins

StudioLine employs absolute positioning, placing every page element in a pre-determined location. As a result, the size of the web browser window will not change the appearance of a page by realigning the content.

Margins can be used by the web page designer to judge the appearance of a page on common screen sizes. Different margins may be set for each StudioLine site.

Show

Show or hide the left or right margins or the centerline of the page.

Optimize for ...

Select from common screen sizes (dimensions in pixels). The margins will show the approximate viewable area of a maximized browser window.

Margins on Top

Displays margins on top of any graphical content.

Note: Use the Page Align function buttons on the toolbar to control the alignment of the entire page in the browser window.


Guides Panel

Guides

Guides can be used for proper alignment of elements on a page.

Current Set

Displays the name of the currently used arrangement of guides. Use the Save and Browse buttons to save, reuse or delete a particular arrangement.

Save

Saves the current set of guides.

Saved sets are available in all StudioLine sites and pages.

Open

Retrieves the set of guides that was previously saved.

Clear

Clears all guides from the current set.

Magnetic

With this option active, elements will snap to a guide once they are dragged to its proximity.

Color

Choose a color, which contrasts the background, or other predominant colors on the page.

Guides On Top

Choose this option to display guides on top of all other objects.

Transparency

A transparency setting of 100% will "hide" the guides.

Creating Guides

  • Use the Ruler function button on the toolbar to display the ruler

  • Click on the horizontal or vertical ruler and drag it into the page

  • If guides are not visible, adjust the color and transparency setting


Container Settings Panel

Container Settings

Auto-Positioning

The container and its content is aligned by the Page Editor in accordance with these settings.

Position

The top left corner of the container.

Note: This can also be set by dragging the border of the container.

Width

The width of the container.

Note: This can also be set by dragging the handles of the container.

Spacing

The spacing between objects inside the container.

Alignment

The alignment of objects inside the container.


Container Settings

Container Adjusts to Width

-- purpose unclear --

Container Adjusts to Height

-- purpose unclear --

Text Adjusts to Container Width

-- purpose unclear --

(All text objects inside the container? Only the first one? Will it automatically start a new row at each text object?

Unaligned

The content of the container is unaligned. Objects may be placed freely anywhere inside the container.

Column Alignment

Choose the alignment of object columns: left aligned, right aligned, centered or justified.

Row Alignment

Choose the alignment of object rows. Objects may be aligned along their bottoms, their centers or their tops. For images, an alignment along the bottom is commonly used. Top alignment may be used to correctly align multiple text columns.

Margins

Choose the amount of free pixles that are left between the container borders and the objects it contains.

Spacing

The spacing between objects inside the container.


Image Viewer Panel

Image Viewer

Scaling Factors

Choose a specific scaling factor, or choose “Scale to window size” to automatically enlarge or reduce the image as necessary to the size of the Image Viewer.

Choose “Shrink to window size” to limit the scaling factor to maximum of 100%. A small image that already fits inside the viewer will not be enlarged; a large image will be reduced as necessary.

Full Screen Mode

Instructs the Image Viewer to use the entire screen size.

Use the Esc key to return to normal windowed mode or choose Exit from the Context menu.

Slide Show Controls

VCR style buttons to start, pause or stop a slide show, or to view the first, previous, next or last picture of the show.

Configure Slide Show

Configure Slide Show Panel

QuickSteps: Slide Show


Configure Slide Show Panel

Configure Slide Show

Content

Choose the picture source:

  • “Selection” will include any images currently selected from the work space.

  • “Current Folder” will include any images in the currently selected folder.

  • “Current Folder and Subfolders” will include images in the currently selected folder and its subfolders.

Folder options are only available from Image Archive and StudioLine Explorer.

Delay

Defines the amount of time that each picture will appear, before the switching to the next one.

Repeat Options

  • “Continuously” will run the slide show until stopped by the viewer.

  • “Play Once” will stop the slide show after reaching the last picture.

  • “Play Repeatedly” will run the slide show a specific number of times.

Number of Repeats

Defines the number of times that the slide show will repeat.

Order

Defines the order in which the pictures are shown.

Background Color

Choose a color.

Show Descriptor

Choose a descriptor that should be displayed alongside the image in full-screen mode. Once the descriptor appears, simply drag it to any convenient location.

Control Buttons in Full-Screen Mode

Choose this option to display the slide show control buttons while in full-screen mode.

QuickSteps: Slide Show


Background Panel

Background

The background can be solid color or a tiled image. For a new page, the background is determined from its Layout. A unique background for each page can be defined in the page editor.

Preview

Drop an image to the preview. It will be tiled to create a background.

If the intended background image has transparent areas, choose a solid color background before adding the image.
Setting the Background

Solid Color

Choose a solid color background.

Render at Ultimate Position

This option only applies to backgrounds using a tiled image.

It forces StudioLine to render images over the background at the exact position where they ultimately will appear in the browser.

Choosing this option may be necessary for certain background patterns. In exchange, it may lead to potentially higher disk space needs, longer publishing times and slower loading pages.
Setting the Background

There is no way to eliminate all background settings. Every page must have either a solid color or image background.


Publishing Profile Panel

Publishing Profile

The publishing profile contains information about the computer that the site will be published to. This information is readily available from the web master at the hosting provider or ISP.

After setting up a Publishing Profile, use the Test button to validate the settings.

Profile Name

For some projects, it may be advantageous to maintain a number of different profiles. A "staging" profile may publish the site to a test server and the "production" profile would be used once the site has been tested and approved.

Default Document

The name of a document that is automatically displayed if a web browser does not specify an explicit document name in a URL. Sometimes this is also referred to as the "Index" document.

Typical Default Documents

Microsoft IIS

Default.htm

UNIX / Apache

Index.html

Other Windows Servers

Index.htm

This field can be left blank in most cases. It will be filled by StudioLine after pressing the Test button.

Maximum Connections

StudioLine uses multiple concurrent connections to the FTP server to reduce overall publishing time. Some servers have a limit of how many connections can be established in total. To avoid blocking other uses from also accessing the same server, a maximum number for StudioLine can be set.

Passive Mode

FTP servers can be accessed in active and passive mode. If a firewall prevents you from accessing FTP servers, it may be necessary to switch to Passive Mode connections.

FTP Server

The name or IP address of the FTP server.

Example: Publish.ArgosWeb.net or 127.0.0.1

Port

The FTP port on this server.

Default: 21

Login / User

The FTP User ID assigned by the web-hosting provider.

Password

The password for the User ID assigned by the web-hosting provider.

Proxy Server

The name or IP address of the proxy server.

This field should be left blank for most workstations with a telephone or cable connection to the Internet.

Some corporate networks employ proxy servers to secure or buffer certain Internet traffic. A network administrator would be able to provide the necessary settings.

Default: - blank -

Passive Mode

If selected, StudioLine will connect to the FTP server using PASV mode. Some corporate networks employ firewalls, which require passive mode connections.

Remote Directory

The directory on the FTP server where the site should be published to. The declared home page of the site will be uploaded as the default page into this directory.

For the most basic setup, the root directory of the FTP server is also the root directory of the web server. In that case, the remote directory can be left blank (the "login" directory).

Some servers use a subdirectory such as "httpd", "wwwroot", "web" or "pages" on the FTP server as the root directory for the web server. Others use the UserID as a subdirectory, such as "~username". The name of the appropriate subdirectory, if any, must be specified as the remote directory.

Default: - blank - (the "login" directory)

URL

The web address (URL) that an Internet User would have to enter to reach the root directory of the published site. If the StudioLine site is used to create a web site's home page, then enter the URL of the web site.

After successful publishing, StudioLine automatically opens a web browser window for this URL.

Use for Links to This Site

Links from other StudioLine sites will use this profile to determine which URL to use.

Sample Remote Directory and URL Settings

The following scenarios assume that StudioLine is used to create pages for www.ACME.WebLobby.com.

1. | The root directory for the web site is the login directory of the FTP Server. The StudioLine site contains the complete web site. Remote Directory = - blank - URL of the Site Root = http://www.ACME.WebLobby.com/
2. | The root directory for the web site is the login directory of the FTP Server. The StudioLine site contains a picture gallery, which is added to an existing site. The web designer would like to keep the picture gallery in its own directory so that it does not interfere with the existing web site. Remote Directory = Gallery/ URL of the Site Root = http://www.ACME.WebLobby.com/Gallery/
3. | The root directory for the web site is located in the "httpd" directory of the FTP Server. The StudioLine site contains the complete web site. Remote Directory = httpd/ URL of the Site Root = http://www.ACME.WebLobby.com/
4. | The root directory for the web site is located in the "httpd" directory of the FTP Server. The StudioLine site contains a picture gallery, which is added to an existing site. The web designer would like to keep the picture gallery in its own directory so that it does not interfere with the existing web site. Remote Directory = httpd/Gallery/ URL of the Site Root = http://www.ACME.WebLobby.com/Gallery/
5. | The user has been assigned a UserID of "John", which is used as a folder on the web server. After logging into the FTP Server as "John", the root directory for the web site is located in the "httpd" directory. The StudioLine site contains the complete web site. Remote Directory = httpd/ URL of the Site Root = http://www.WebLobby.com/~John/


Pages to Publish Panel

Pages to Publish

Site

Name of the current site that will be published.

Pages

Lists the pages in the current site. Modified pages have a red colored icon, excluded pages have a greyed icon.

  • Move the mouse cursor over a page name to view its publishing status.

  • Click the right mouse button over a page name to access its context menu.

  • Double-click on a page to preview it.

Pages that are scheduled for publishing are already selected. If necessary one can manually select or deselect individual pages:

  • To add or remove a page from the selection for this publishing run, hold down the Ctrl key and click on the page.

  • To exclude a page for this and future publishing runs, open its context menu and select the option “Exclude Page” or “Exclude Page from All Profiles”.
    For additional information see refer to Publishing Menu: Exclude Page

Select Current Page Only

Unselects all pages and selects only the page that is currently open in Page Editor.

Select Modified Pages

Unselects all pages and selects only those pages, which have been modified since any prior publishing run with the current publishing profile.

Select All Pages

Selects all pages for publishing, with the exception of pages that have been set to “Exclude Page”.


Object Descriptors Panel

Object Descriptors

Descriptive information can be associated with each image and used to replace placeholders (variables). Descriptors which currently hold values are indicated by a green checkmark.

System descriptors are used internally by StudioLine. Layout-specific descriptors are time-savers in Layouts with image views. Users can define any number of additional descriptors.

Image Specific Descriptors
Alternate Text

This text is displayed instead of a picture, if a web site visitor has disabled the display of any images in the browser settings. Many browsers will also display the alternate text, whenever the cursor rests over the picture.

Default: %%Name%%

Name

The name of the picture in the Image Archive.

Source

Path to the image file on the local computer or network.

Default: Path the image was originally imported from.

Layout Specific Descriptors
Header

Picture title. Typically displayed as a headline above the picture.

Description

A legend or descriptive text for the picture. Typically displayed as a caption below the picture.

User Defined Descriptors
Add

Associates a new descriptor with images.

Descriptor names may contain only basic alphanumeric characters, special language-specific characters will not be accepted.

Descriptors added in Image Archive mode will be available systemwide. Descriptors added in Page Editor or Layout mode will only be available for images on that page. Descriptors added to a Layout Template will only be available in derived pages.

Delete

Deletes this descriptor from all images.

If more than one object is currently selected, use the navigation buttons to browse forward or backward through your selection.


Descriptor Association Panel

Descriptor Association

Associates the descriptor values of an object with a text object on the same page. This way, a descriptive text, such as headlines, credits or file size can be written by using place holders that simply refer to specific descriptor values of the associated picture object. The same text is re-usable for other objects, simply by copying the text object and changing the association.

Drop Symbol

Click the symbol and drag it to any object on the page.

Associated Object

Name of the object from where the descriptor values will be taken.


Image Toolbox Panel

Image Toolbox

The Image Toolbox is a complete palette of professional tools. Double-click an icon to open the tool dialog, drag the icon to an image or an Active Tools list to apply the tool and open the appropriate dialog.

QuickSteps: Working with Images

Active Image Tools

To display this section, press the “Active Tools” button on the button bar across the top of the Image Toolbox.

It lists the tools that have already been applied against the currently selected image.

Preprocessing

Preprocessor tools are limited to Image Archive mode. The settings are permanent and do not appear in the Active Tools list of the Context Menu. This prevents other images from unintentionally being cropped or realigned, when the Active Tools list is copied.

Crop and Rotate

Rotates, mirrors and crops the image. You can also use any line in the image to become the new horizon or the perpendicular.

  1. Move the two handles of the alignment band until it lines up with any object in the image that should be aligned vertically or horizontally. An example would be the wall of a building or the natural horizon.

  2. Click the Flip button to flip the image horizontally, or click one of the rotate buttons to turn the image by 90° or 180°.

  3. Use the cropping blades or the diagonal corner handles to define the new image rectangle. Hold down the Shift key to drag opposite blades simultaneously. Click inside the cutout area, then drag the hand cursor to move the cutout without changing its dimensions. Press the “Fix” button to maintain the aspect ratio (perpendicular blades will move proportionally). Otherwise, the image would appear stretched in one direction.

Note: This tool will only effect a single picture at a time. Use picture arrow buttons to browse to another image in the selection.
User Guide: Image Bulk Processing

Alignment and Size

Image Alignment

Rotates and crops the image so that a chosen line in the image is perfectly horizontal or vertical.

  1. Move the two handles of the alignment band until it lines up with any object in the image that should be aligned vertically or horizontally. An example would be the wall of a building or the natural horizon.

  2. Click the Flip button to flip the image horizontally, or click one of the rotate buttons to turn the image by 90° or 180°.

  3. Use the cropping blades or the diagonal corner handles to define the new image rectangle. Hold down the Shift key to drag opposite blades simultaneously. Click inside the cutout area, then drag the hand cursor to move the cutout without changing its dimensions.

Note: This tool will only effect a single picture at a time. Use picture arrow buttons to browse to another image in the selection.

Rotate

Rotate image by any angle, or click Rotate with the left or right mouse button to rotate by 45° in the respective direction.

Click the Flip button to flip the image horizontally.

Crop

Use the cropping blades or the diagonal corner handles to define the new image rectangle. The Fix button will coordinate the movement of multiple blades to maintain the aspect ratio. Otherwise, the image would appear stretched in one direction.

Hold down the Shift key to drag opposite blades simultaneously.

Click inside the cutout area, then drag the hand cursor to move the cutout without changing its dimensions.

Note: This tool will only effect a single picture at a time. Use picture arrow buttons to browse to another image in the selection.

Scale Absolute

Fits an image into maximum picture dimensions. The scaling may be controlled numerically, or by dragging the scaling handles of the selector band.

When "Maintain Proportions" is chosen, one of the dimensions may be less than the maximum permitted. Without this option, the image would be distorted.

If the original image is smaller than either maximum dimensions, the image will not be enlarged as this would reduce image quality. To override this default behavior, choose "Allow Enlarge" or hold the Ctrl key while dragging the scaling handles. Although StudioLine employs a bicubic algorithm, the loss of quality will eventually be noticeable. Always inspect the enlarged image to determine if the result is acceptable.

Scale by %

Fits an image into maximum picture dimensions, relative to the current size.

When "Maintain Proportions" is chosen, then the same factor is used to scale width and height.

If the original image is smaller than either maximum dimensions, the image will not be enlarged as this would reduce image quality. The Scale Absolute tool offers an option to enlarge the image under these conditions.

Correction

Auto Tone Levels

Enhances image contrast by optimizing tone levels of the light and dark areas of an image, and by applying gamma correction against the mid tones. This tool is helpful for images that are over- or underexposed and for countering the effect of light diffused by a large number of lenses (e.g., in digital cameras).

Use the Highlights and Shadows sliders to manually select a reference value, which define the lightest and darkest areas of the image. The Auto-Contrast button will analyze the image to determine optimum values.

Use the Midtones slider to manually select a reference value, which defines the middle tone between the lightest and darkest areas. The Auto-Tone button will analyze the image to determine optimum value.

After using the Auto-Contrast or Auto-Tone buttons, the sliders can be used to further refine the calculated values.

Image Enhancements

The three controllers for brightness, contrast and saturation correspond to those of a color TV set. The complete color spectrum is effected.

Note: This tool applies straight linear changes, which can lead to losses in the high or low bands for each property. Consider using the Exposure Correction, tool which has a sophisticated algorithm to avoid those side-effects.

Exposure Correction

The controller for exposure will have the greatest effect on brightness in the medium range. The darkest and lightest colors will be effected the least. This prevents the loss of black or white areas of the image.

The two controllers for contrast, allow fine-tuning of the contrast for the light and dark areas of the picture.

The saturation controller has a sophisticated algorithm, producing more balanced results than the straight-line changes applied by the “Hue, Saturation, Brightness” tool.

Hue, Saturation, Brightness

The Hue control shifts colors. If applied against a single color, it is possible to recolor areas of that color.

The effect of the color specific Saturation control is identical to Saturation settings in the Color Tuning tool.

The Brightness control keeps the Hue and Saturation constant, resulting in different effects than the Brightness settings elsewhere in the image toolbox.

The option “Effect depends on saturation” will gradually reduce the effect of the controls on pixels that are less saturated with the selected color. The higher the saturation, the more pronounced are the effects.

Note: A checkmark next to a color will indicate that a particular setting is no longer in the neutral position.

Color Tuning

A color equalizer for modifying the saturation of specific colors which already exist in the image.

This tool is helpful in removing color passes that are present in the image due to bad source material or scan errors.

Note: This tool is a subset of the “Hue, Saturation, Brightness” tool.

Color Balance

Allows to correct the tone of specific colors in an image.

If choosing “All Colors”, refine your selection using the shadows/highlights controller.
If choosing a specific color you can further narrow your selection by using the hue controller.

The three controllers for colors and the brightness controller will limit the effect to the selection you made.

Equalize Brightness

Analyzes the different areas of an image and determining its Histogram. Then it will attempt to normalize the brightness values for all areas, trying to equally distribute the occurrence of each brightness.

Color

Colorize or recolor images.

This tool may be used to add color to grey images. Correcting color problems of photographs can be done better with "Color Tuning" or "Hue, Saturation, Brightness".

Despeckle

Eliminates tiny impurities that may have been introduced during the scanning process.

Sharpness

Improves the sharpness of an image.

Blur

Blurs the image.

Red-Eye Correction

Effects

Buttonize & Shadow

Can be used to add a 3D effect through light edges and shadows.

  1. Choose the direction of the light source.

  2. Use Buttonize to control the light and shadow edges of the image.

  3. Use Shadow to control smoothness, color and distance of the shadow below the image.

Normally, buttons will have a raised appearance and drop shadows will make the object appear to hover over the work space. By selecting the Inside Shadow option buttons will have a sunken appearance and objects appear to be die-cut.

Colorize

This tool may be used to replace the colors of an image with a new color. The Intensity selector defines the degree to which the new color is applied. If necessary, the contrast is reduced to obtain the selected average color.

Bicolor

Applies one color each to the dark and light areas of an image. This tool is ideally suited to obtain a uniform effect for a series of two-color images.

Black & White

Removes saturation of all colors while correcting for differences in brightness, e.g., yellow tones will appear brighter than blue tones.

The effect varies from saturation settings elsewhere in the toolbox.

Scalable Backdrop

Adds a backdrop color behind an image or text element.

The backdrop can be made larger than the actual image and with round corners. This gives it the appearance of a picture frame.

Soft Edge

Softens the outer edge of rectangular images.

Invert Image

Creates a negative image by replacing colors with their RGB complements and inverting the brightness. The saturation value is not effected.

Note: This function can be used to turn a black and white photo negative into a positive image. However, it cannot be used for color photonegatives since these contain an orange mask.

Transparency

Modifies the opacity of an image from opaque to fully transparent.

Note: A fully transparent image can be selected by dragging the selection band across the approximate area of the desktop.

Offset

Slightly shifts an image.

Use this tool to slightly shift a button in roll-over mode. This gives a more realistic appearance of a "pressed" button while the mouse cursor hovers over it.

Simple Backdrop

Adds a backdrop color behind a transparent image or text element.

Invert Mask

Inverts the transparency of an image. Opaque areas become transparent; previously transparent areas are colorized.

This filter allows for many interesting designs and text effects. It is worth experimenting with.

Smoked Glass

Covers an area of the image with a color taint. Transparency and blurring settings can give it the appearance of smoked glass.

This filter can be helpful where text is superimposed over an image.

Find Edges

Finds edges in the image and emphasizes them.

Emboss

Adds a relief effect.


Image Quality Panel

Image Quality

The size of an image directly effects the amount of time and memory needed during processing and transmission. Web designers often invest significant effort into seeking a good compromise between image quality and the time it takes for a page to load. StudioLine has been designed to automate and optimize image handling.

Original Size

View and size of the original image in uncompressed form.

Compressed Size

View and size of the resulting image after compression.

Navigation

Browse buttons if more than one image is selected.

Quality

Controls the JPEG compression factor. Higher quality images will load slower, lesser quality images may look less appealing.
Image Rendering Preferences Panel

Same quality for all images

This button appears, while exporting multiple images.

When turned on, identical image quality settings apply to all images. When turned off, use the navigation buttons to review unique settings for each picture.


Font Properties Panel

Font Properties

Font

Choose from available typefaces.
User Guide: Fonts

Size

Point-size of font.

Color

Opens the Choose Color panel.

Style

Choose if text should be displayed in italics, bold or underlined.


Insert Field Panel

Insert Field

Type

Choose one of the major classifications.

Name

Choose the name of the variable.

Options

Specify any options that this variable may require.

Preview

Preview the placeholder text to be inserted.


Choose Color Panel

Choose Color

Old / New

Displays the current and new color value.

Note: A rainbow color display indicates that no single color value has been defined, e.g., if a selection of text uses a variety of colors.

Saturation / Brightness

In the square area, drag the selector horizontally to change the color saturation. Drag the selector vertically to change the brightness.

Hue

Move the slider up and down to change the hue.

Red, Green, Blue

Displays the current RGB color value. May be used to enter a specific color value.

Site Colors

To remember a selected color for later use, drag the Copy window control to paint box.

To use a color, drag it from the paint box.

Pick Color

Allows you to pick a color from anywhere on the screen.

Pick Area

The size of the area from which the pick color will be determined by calculating a mean RGB value.


Position Panel

Position

This function allows the pixel-perfect positioning of objects.

If a single object is selected, then the position information refers to the top/left corner of the objects bounding rectangle. If multiple objects are selected, then the reference is to the top/left corner of the bounding rectangle around all selected objects.

Horizontal

The left-most position of the object(s).

Vertical

The top-most position of the object(s)

Shift Selected Objects

Moves the object(s) 1 pixel in the direction the arrow points.

Hold the Shift key on the keyboard while clicking on an a directional button will step by 10 pixels.


Position Anchor Panel

Position Anchor

Normally, the reference point for objects is the top left corner of the page. But sometimes, the design of a page calls for a title to be centered at a given distance over the container, or navigation buttons are suppose to line up below the bottom of the container. By anchoring these objects to the container, they will maintain their relative positions, even if the container is moved or its dimensions change.

Anchor objects to container

If selected, the object is anchored to the container.

If not selected, the object is anchored to the top left corner of the page.

Choose Reference Point

Select on of the four corners, four midpoints or the center of the container as a reference point for the object.

If the chosen reference point changes position, the anchored object will be shifted appropriately.

Freeze Vertically

If the chosen reference point changes its horizontal position, the anchored object will be shifted appropriately. A change in vertical position has no effect.

Freeze Horizontally

If the chosen reference point changes its vertical position, the anchored object will be shifted appropriately. A change in horizontal position has no effect.


Link Properties Panel

Link Properties

Links redirect the browser to a different page or perform other actions when the web site visitor clicks on the element or when automatic forwarding is defined.

StudioLine also offers a variety of generic links (such as “Home” or “Next”). The actual address of a generic link is determined or updated automatically, at the time the site is published.

Link to Page or Site

Creates a link to any other page maintained by StudioLine.

Use the “Browse” button to choose the target site or page.

Use the “Create New Page” button, if the target page does not yet exist. It will create and link to a new page in the current site.

If the target page has been excluded from publishing, then it will be treated as if “No Link” was chosen.

Navigation Link

These generic links are used for pages in a subfolder and on Layouts with Page Views. They allow a web site visitor to browse forward and backward between the elements of the same folder or page views, to loop from the last element back to the first element (and vice versa), to return back to the main page or index level, or display the site’s home page.

Not every navigation button applies to all pages (e.g., from the top level, one cannot move "up" any further). Non-applicable buttons will be inactive and can be rendered with a transparency factor.

If the site settings don’t define a home page, then any navigation links to home will be set to “no link” until a home page is defined.

User Guide: Layout and Templates

Link to URL

Creates a link to pages at other sites or to other resources.

Sample URLs

Web Site

http://www.StudioLine.net/

FTP Site

ftp://ftp.hm-software.com/

Newsgroup

news://News.HM-Software.com/HM.Public.Support

StudioLine does not verify or monitor the validity of external links. The user should check these links from time to time to make certain that they are still valid.

Link to Image View

This generic link is used for layouts with image views. It links to the (automatically generated) more detailed image view for this object.
Image Views

Link to Target Position

Creates a link to a predefined location or a labeled element on a page maintained by StudioLine. It will cause the browser to open the page and then scroll the content until the location or element is visible.

If possible, drag the Drop button on an object on the target page. This will set the page and target position.

Use the Target Position button to manually set the position on the target page.
Use the Page button to manually set the target site or page and a position on that page.
Object Context Menu - Target Position

Action Link

Can be used to control browser actions, such as stopping or closing the browser, printing the page, or access to the browser's history stack and “Favorites” list.

No Link

Removes any links.

Email Link

This link will open the visitor’s email application. Enter a recipient email address and a subject.

Link to Local File

Select a file on your disks that will be published to the specified URL on the server. This option is helpful for non-standard file formats that are either to be downloaded by visitors or that may require a browser plug-in.

Open New Browser Window

Normally pages appear in the same browser window.

Under "Options", leave the name blank to cause the linked page to appear in a new window each time. Reuse the same name for any number of links and they will share the one window by that name.

The effect of the advanced options may differ between browsers. Netscape defines the window size as the browseable area, only. Internet Explorer also includes the window frame, title bar and other control elements.

Page Menu: Automatic Forward


HTML Object Properties Panel

HTML Object Properties

Head

The HTML code will be placed at the end of <HEAD> element.

Div

The HTML code will be placed in a <DIV> element.

Body

The HTML code will be placed at the beginning of the <BODY> element.

Media File

Select an optional media file to be included during publishing, e.g. a .WAV file that should be played as background music.

User Guide: Custom HTML Code


HTML Code Editor Panel

HTML Code Editor

Users can add custom HTML code to extend the built-in capabilities of StudioLine, by embedding HTML objects such as forms, Java applets or media files.

The dimensions of the HTML Code object on the page control the amount of display space StudioLine sets aside. If the HTML Code does not require any

Any user code could interfere with the StudioLine generated page. It is the responsibility of the user to test the published page carefully to make sure that there are no problems with look or function.

User Guide: Custom HTML Code


Image Archive Preferences Panel

Image Archive Preferences

Image Archive Preferences control how new images are stored, whether they were added to the Image Archive or placed directly on a page.

Note: Changing the preferences does not effect existing images.

Max. Image Size
(in Megapixels)

StudioLine stores images in the best possible quality. Images in print quality require large amounts of disk space and would significantly slow down image processing. Since most web pages are designed for limited screen sizes, there is little benefit in storing images with unnecessary high resolutions.

This setting defines the maximum pixel size for an image. Larger images will be resized accordingly. Smaller images are not effected.

This setting is also used for exported images.

Note: Images pasted from the system clipboard are not resized, to avoid loss of detail of screen shots. PhotoShop files are left untouched, to avoid inconsistent scaling of different layers.

Tolerance (in %)

If an image is within the specified tolerance of the Max. Image Size, it will not be scaled to avoid unnecessary generation loss of JPEG images.

If an image size is outside the tolerance, a message will prompt the user to either permit automatic scaling or to maintain the original size.

Max. Preview Dimensions
(in Pixels)

When an image is added to the Image Archive, a smaller preview version is created.

This setting defines the default maximum height and width with which the image will be previewed in Image Archive mode. Smaller images will be previewed in their original size. The preview dimensions have no effect on the processing of images for pages or Layouts.


Image Archive Background Panel

Image Archive Background

Draw Line Pattern

Draws a line pattern in the background.

Inactive Background Color

Choose a color to be used if content pane is not currently selected.

Active Background Color

Choose a color to be used if content pane is selected.


Image Rendering Preferences Panel

Image Rendering Preferences

Image Quality

This setting is the initial Image Quality setting for images dropped onto a page or layout.

A setting of 80 and higher will avoid any compression of color resolution. This is of particular importance for text rendered as graphic.

The Default button will reset the quality to 80.

Text-Graphic Quality

This setting is the initial setting for any text that is being rendered as a graphic.

The Default button will reset the quality to 90.


Text Preferences Panel

Text Preferences

Font

Choose from available typefaces.
User Guide: Fonts

Size

Point-size of font.

Style

Choose if text should be displayed in italics, bold or underlined.

Ignore font and size of pasted text

Most word processors enable StudioLine to carry over the typeface and size attributes for any pasted text.

If this preference settings is selected, the original attributes of the pasted text is ignored. Instead, the StudioLine text editor will assign text and size attributes based on where the text is being inserted.

Text Width

The default width for new text objects.


Mailing Images Preferences Panel

Format

Choose from one of the most common picture formats.

The Default button will reset the format to JPEG, which is widely used and reduces the size of email attachments.

With Transparency

Select this setting to maintain the transparency information with the images.
Note: This option is not available for all file formats.

Image Quality

A higher quality will result in larger email sizes.

The Default button will reset the quality to 80.

Note: This option is not available for all file formats.

Use Original Image Size

Use this option to prevent images from being scaled down.

Max. Pixel Dimensions

Choose one of the common image dimensions, or choose to specify your own width and height.

The Default button will reset the dimensions to 640 x 480.

Width / Height

Choose the maximum width and height that images will not exceed.


Export Object Preferences Panel

Export Object Preferences

Format

Choose from one of the most common picture formats.

The Default button will reset the format to TIFF, which supports transparency and stores images without loss of quality.

With Transparency

Select this setting to maintain the transparency information with the images.
Note: This option is not available for all file formats.

Image Quality

Higher qualities will result in larger file sizes.

The Default button will reset the quality to 90, if the file format is JPEG.

Note: This option is not available for all file formats.

Use Original Image Size

Use this option to prevent images from being scaled down.

Max. Pixel Dimensions

Choose one of the common image dimensions, or choose to specify your own width and height.

The Default button will reset the dimensions to 1024 x 768.

Width / Height

Choose the maximum width and height that images will not exceed.


Print Preferences Panel

Print Preferences

Defines either the default image size or the default resolution used when printing images. The setting that has been fixed, will be maintained during cropping actions; the other setting will be adjusted as necessary.

Fixed Image Size

Either choose one of the common picture formats or enter a custom size for the printed image.

Fixed Resolution

Enter the default print resolution.


Search Image Archive Panel

Search Image Archive

This function will scan image descriptors for matching words or phrases.

Standard Search

Search Argument

Enter the search word or phrase.

StudioLine always finds any occurrences of the search word – no wildcard characters are required. Therefore, typical wildcard characters like % or * are treated by StudioLine as if they were part of the word to be found!

Search in

Displays the folder being searched.

Include Subfolder

With this option, the selected folder and any of its subfolders will be searched.

Advanced Search

Opens a panel to enter advanced search arguments.

Advanced Search

This function allows advanced search criteria to be entered. If more than one criteria is entered, then all of them must be found true for an object to match.

All these words must appear

Enter any number of words, separated by a space.

For an object to match, each single word must appear somewhere in its descriptors. It is not necessary for these words to appear together or in the same order.

One of these words must appear

Enter any number of words, separated by a space.

For an object to match, one of the words must appear in any one of the descriptors.

This character string must appear

Enter a phrase or character string.

For an object to match, the exact phrase or character string must appear in any one of the descriptors.

These words must not appear

Enter any number of words, separated by a space.

For an object to match, none of the words may appear in any of the descriptors.

Search in

Displays the folder being searched.

Include Subfolder

With this option, the selected folder and any of its subfolders will be searched.


Search / Replace Panel

Search
Search and Replace

Search for

Enter the letter(s), word or phrase to search for.

Replace by

Enter the new letter(s), word or phrase.

Search Focus

Search Selected Text

Search only text that has been highlighted.

Search Current Text Object

Searches the entire current text object.

Search All Text Objects on Page

Searches all text objects found on the page.

Match Whole Word

With this option, the search will match only entire words or phrases. If the same combination of letters appears as part of a word, it will be ignored.

Match Case

With this option, the search will match only the exact same capitalization as used in the “Search for” field.

Search Forward

Searches the text in forward direction.

Search Backward

Searches the text in backward direction.

(This function is not available in the Search and Replace panel.)

Replace

Replaces only the currently found match.

Replace All

Replaces all matches in the text.


Spell Check Panel

Spell Check

Words that are not found in the system or user’s dictionary will be rejected, one at a time. If possible, a list of similar words is displayed. The user may ignore the rejection, change the word, look it up in a different language, or add the original word to the user’s custom dictionary.

Start / Resume

Starts or continues the spell check.

Ignore

Overrides the spell check rejection and continues the spell check. The originally rejected word remains in the text.

Ignore Always

Ignores all occurrences of this word in the text. Other occurrences in the same text will not be rejected.

Change

Replaces the rejected word with the currently selected suggestion and continues the spell check.

A suggestion can also be accepted, by double-clicking the word in the list.

Change Always

Replaces all occurrences of the rejected word in the current text with the selected suggestion.

Add

Adds the rejected word to the custom dictionary. Future occurrences of the word in the current language will not be rejected.

Dictionary

Displays a panel to maintain, export or import a custom dictionary for each supported language.

Note: Large custom dictionaries with thousands words or more may negatively impact spell checker performance.

Language

Looks up the current word in a different language dictionary. The choice of language will be remember for this word.

Options

Spell Check Options Panel


Spell Check Options Panel

Spell Check Options

Check spelling as you type

The spell checker will continuously look up words as they are being typed in the text editor. Incorrect words will be highlighted with a wavy underscore.

Ignore capitalized words

Words with leading capitals will not be checked.

Ignore all-caps words

Words with all capital letters will not be checked. Many words with capital letters are abbreviations that would be rejected by the spell checker.

Ignore words with numbers

Words that include numeric letters will not be checked. Many words with embedded numbers are trademarks or technical terms that would be rejected by the spell checker.

Ignore words with mixed case

Words that have embedded capital letters will not be checked. Many words with embedded capital letters are trademarks or technical terms that would be rejected by the spell checker.

Ignore domain names

Words that appear to be Internet domain names will not be checked.

Case sensitive

The spell checker will reject words that may have been improperly capitalized.


Color Pane Properties Panel

Color Pane Properties

Background

Choose a transparent or a solid color background.

Lines and Corners

Configures the borders of the color pane.

Choose whether a line is displayed for each of the four sides and choose the corner style.

Border Thickness

Choose the border width in pixels.

Radius

Choose the radius for any rounded corners.

Border Color

Choose a color for border lines and corners.

Top Color Bar

Choose the height and color for a bar displayed across the top of the color pane.

Bottom Color Bar

Choose the height and color for a bar displayed across the bottom of the color pane.

User Guide: Color Pane Container


Image in Use Message Box

Image in Use

Reason:

This message box appears, when a user attempts to delete an object that is still in use. A list of effected layout templates and pages appears.

Action:

  • Double-click an item in the list to preview that effected page or layout template.

  • Click “No”, if the object should not be deleted.

  • Click “No to All” to abort deleting of a series of objects.

  • Click “Yes” to delete the object. Any effected pages will have to be revised and re-published.


Active Links Message Box

Active Links

Reason:

This message box appears, when a user attempts to delete an page that is referred to by a link from other pages. A list of effected pages appears.

Action:

  • Double-click an item in the list to preview that effected page.

  • Click “No”, if the page should not be deleted.

  • Click “Yes” to delete the page. The links on any effected pages will be set to “No Link” and those pages are scheduled to be re-published.


This page was not properly saved

Reason:

This message box appears, if StudioLine not able to properly save the document the last time it had been edited. May be the computer had locked up or there was a sudden power failure.

Action:

  • Click “OK” to use the most recent snapshot copy, which StudioLine automatically creates from time to time, while you are working.

  • Click “No”, to revert back to the previously saved version of the document.

  • Click “Preview” to view the most recent snapshot copy. Use this function to decide if the snapshot copy is more suitable than the previously saved version.


Image Too Large

Reason:

The dimensions of the image exceed the paper size.

Action:

  • Click “Correct Automatically” to scale the image to the paper size.

  • Click “Skip”, to skip printing this image.

  • Click “Apply All” to use the same action against any other oversize images in the same print run.

Last Document Update: 23-Jul-02 23:48


Keyboard Shortcuts

Text Editor shortcuts may be found in the User Guide.

Workspace and Global Shortcuts

F1

Request context sensitive help on the current program object. If no object has the focus, then the Help table of content is displayed.

Ctrl + S

Saves current page.

Alt + F4

Exit program

Tab /
Shift + Tab

Jumps to the next or previous object on the page.
(Roll-Over processing is treated as a separate element.)

F5

Refreshes the current list in StudioLine Explorer

Alt + Enter

Displays the context menu for the selection
(The special Context Menu key on the Windows Keyboard is also supported).

Delete

Deletes the current selection.

Ctrl + A

Selects all objects.

Ctrl + Mouse Click

Toggles the selection.
(The object is either added or removed from the selection.)

Shift + Mouse Click

Adds the object to the selection.

Right Mouse Click /
Shift + Right Mouse Click

Opens the context menu for the object currently under the mouse pointer.

Ctrl + Right Mouse Click

Opens the context menu for the current selection.

Ctrl + C

Copies the current selection to the system clipboard (Copy).

Ctrl + X

Moves the current selection to the system clipboard (Cut).

Ctrl + V

Pastes the content of the system clipboard (Paste).

Ctrl + Z

Undo

Ctrl + Y

Redo

Ctrl + J

Joins multiple text objects into one.

Ctrl + H

Toggles the display of the selector band.

Ctrl + G

Toggles the display of object status icons.
Object Status

Ctrl + L

Locks layout objects so they can’t be selected or moved accidentally.

Ctrl + N

Displays or hides the Container.

Arrow Keys

Moves the current selection in the direction of the arrow by one pixel.
(Press and hold the Shift key to move the current selection 10 pixels at a time.)

Panel Shortcuts

Esc

When used with a text fields: Reverts the text field to the content it had before any key was pressed and exits the field.
When used on a message box: Equivalent to Cancel button.

Shift + Esc

Used for panels with text fields.
Reverts the text field to the content it had before any key was pressed.

Tab /
Shift + Tab

Jumps to the next or previous field.

Listbox Shortcuts

Cursor Up / Cursor Down

Scroll list by one item.

Page Up / Page Down

Scroll a full page.

[keyboard input]

Scrolls the list to an item that starts with the input characters.

Enter

In a hierarchical list, opens the next hierarchy (where appropriate).

Backspace

In a hierarchical list, opens the previous hierarchy (where appropriate).


Window Controls

The StudioLine window and its panels offer the familiar window controls. In addition, certain panels offer sophisticated timesaving functions that are unique to StudioLine.
Maximize

Sizes window to the maximum available space.
Minimize

Reduces window to an icon.
Restore

Restores window to its normal size.
Close

Closes window.
Resize

Resizes the window.
Copy

Copies settings to other objects.

Drag the button to other objects to apply the same settings to the target object(s). Drag the button to the trashcan to remove the function of the current panel, or to reset it values.

Copy and Lock Buttons

Lock

Locks the settings of the current panel.

After locking the settings, other objects may be selected while the current settings are maintained. This allows the locked settings to be applied to several other objects.


Toolbar

File Palette
New

Creates a new StudioLine document.
Open

Opens an existing document.
Save

The document will be saved to disk.

Clipboard Palette
Cut

Moves the current selection to the system clipboard.
Copy

Copies the current selection to the system clipboard.
Paste

Pastes the content of the system clipboard.

Explorer Palette
Insert from Image Archive

Opens the StudioLine Explorer for the Image Archive.
Insert from My Computer

Opens the StudioLine Explorer for My Computer.
Insert from Layout Template

Opens the StudioLine Explorer for Layout Templates.

Edit Palette
Select All

Selects all objects.
Undo

Takes back the last action.

The undo stack remembers any actions performed in the current StudioLine mode since the last time the file was saved.
Redo

Performs the action for which "Undo" was previously chosen.

Standard Palette
Align page left/centered/right

Centers the page horizontally or aligns it to either side of the browser window.
Align page top/middle/bottom

Centers a page vertically or aligns it to the top or bottom edge of the browser window.
Roll-Over Mode

Toggles the display of images in roll-over mode.
Object Alignment

Aligning

Select two or more objects. Click the appropriate button to align them along one side or their center.

Spacing

Select three or more objects. Click the appropriate buttons to space them evenly, either horizontally or vertically.

Print Palette
Print

Opens the print spooler panel.
Print Spooler

The Text Editor toolbar may be found in the User Guide.


Descriptors

System Descriptors

RegisteredUser

Name of the person who registered StudioLine during setup.

SLGVersion

Version of the StudioLine software.

Page Descriptors

SiteName

Name of the current site.

PageName

Name of the current page.

HomePageName

Name of the sites home page.

IndexPageName

Name of the index page for a collection of automatically generated pages (e.g., page views, automatic folder links).

Page_Title

HTML title of the current page.

Page_Description

Content of description HTML meta tag.

Page_Keywords

Content of keywords HTML meta tag.

Page_Author

Content of author HTML meta tag.

Page_Copyright

Content of copyright HTML meta tag.

PageDir

Path to local copy of rendered page.

Date
Time

Date or time when the current page was last rendered by StudioLine.

Date(format)
Time(format)

Date or time when the current page was last rendered by StudioLine. The date or time format can be specified inside the parentheses.

Examples: Date(dddd, d MMM yyyy) Time(hh:mm:ss tt)

d

Day of month as digits with no leading zero for single-digit days.

dd

Day of month as digits with leading zero for single-digit days.

ddd

Day of week as a three-letter abbreviation.

dddd

Day of week as its full name.

M

Month as digits with no leading zero for single-digit months.

MM

Month as digits with leading zero for single-digit months.

MMM

Month as a three-letter abbreviation.

MMMM

Month as its full name.

yy

Year as last two digits, with leading zero for years less than 10.

yyyy

Year represented by full four digits.

gg

Period/era or blank.

h

Hours with no leading zero for single-digit hours; 12-hour clock.

hh

Hours with leading zero for single-digit hours; 12-hour clock.

H

Hours with no leading zero for single-digit hours; 24-hour clock.

HH

Hours with leading zero for single-digit hours; 24-hour clock.

m

Minutes with no leading zero for single-digit minutes.

mm

Minutes with leading zero for single-digit minutes.

s

Seconds with no leading zero for single-digit seconds.

ss

Seconds with leading zero for single-digit seconds.

t

One character time-marker string, such as A or P.

tt

Multi-character time-marker string, such as AM or PM.

Image Descriptors


Media Filetypes

StudioLine can recognize a number of file types and generate skeleton HTML objects.

.exe | Executable file (for download)
.ps | PostScript
.pdf | Adobe Acrobat
.dwf | Autodesk AutoCAD
.aif / .aiff | Audio Interchange Format
.au | Audio file
.wav | Wave (audio) file
.asf | Active Streaming Format
.avi | Audio-Visual Interface
.mov | Apple QuickTime
.mpg / .mpeg | Motion Picture Export Groups format
.mid / .midi | Musical Instrument Digital Interface
.mp3 | Moving Picture Experts Group Layer-3 Audio
.rm | Real Media
.wmv | Windows Media Video
.swf | Macromedia Shockwave Flash
.zip | PKZIP compressed file
.tbk | Asymetrix Toolbook
.pan | Imoveinc x/pan


Character Translation

Some browsers on platforms other than Microsoft Windows fail to successfully display certain special or foreign language characters. StudioLine will detect the visitor’s browser and use alternate representations (see table below). If no feasible replacement is available for a particular browser, then a “?” or “*” is displayed.

Most of these characters are seldomly used and the effected browsers amount to less than 15% percentage of total web visitors. However, if authenticity is critical, then the text should be rendered as graphic. This will avoid any issues with incompatible character sets or code pages.

Hex | Rendered As | Windows | Mac IE 4.5 | Mac IE 5.0 | Mac NS 4.5 | Linux NS 4.5
7f |  |  | ? |  | " " | " "
80 | € | € |  |  |  | ?
83 | ƒ | ƒ |  |  |  | f
84 | „ | „ |  |  |  | ?
85 | … | … |  |  |  | ?
86 | † | † |  |  |  | ?
87 | ‡ | ‡ |  |  |  | ?
88 | ˆ | ˆ |  |  |  | ^
89 | ‰ | ‰ |  |  |  | ?
8a | Š | Š | S`´ | S`´ | S | S
8b | ‹ | ‹ |  |  |  | <
8c | Œ | Œ |  |  |  | ?
8e | Ž | Ž | Z`´ | Z`´ | * | ?
91 | ‘ | ‘ |  |  |  | ?
92 | ’ | ’ |  |  |  | ?
93 | “ | “ |  |  |  | ?
94 | ” | ” |  |  |  | ?
95 | . | . |  |  |  | *
96 | - | - |  |  |  | -
97 | - | - |  |  |  | -
98 | ˜ | ˜ |  |  |  | ~
99 | ™ | ™ |  |  |  | ?
9a | š | š | s`´ | s`´ | s | s
9b | › | › |  |  |  | >
9c | œ | œ |  |  |  | ?
9e | ž | ž | z`´ | z`´ | * | ?
9f | Ÿ | Ÿ |  |  |  | Y
a4 | &curren; | ¤ | ? | ? | € |
a6 | ¦ | ¦ | | | | | | |
b2 | ² | ² | 2 | 2 | 2 |
b3 | ³ | ³ | 3 | 3 | 3 |
b9 | ¹ | ¹ | 1 | 1 | 1 |
bc | &frac14; | ¼ | 1/4 | 1/4 | ? |
bd | &frac12; | ½ | 1/2 | 1/2 | ? |
be | &frac34; | ¾ | 3/4 | 3/4 | ? |
d0 | &ETH; | Ð | <ETH> | <ETH> | ? |
d7 | × | × |  |  | x |
dd | &YACUTE; | Ý | Y' | Y' | ? |
de | &THORN; | Þ | <THORN> | <THORN> | ? |
f0 | &eth; | ð | <eth> | <eth> | ? |
fd | &yacute; | ý | y' | y' | ? |
fe | &thorn; | þ | <thorn> | <thorn> | ? |


Frequently Asked Questions

Images

How do I prevent an image from being modified when I assign a different Layout?

Choose Independent Processing from the Object Context menu.

How do I control the ALT text that shows in the browser whenever the mouse cursor rests over an image?

The ALT text is controlled by the “Alternate Text” descriptor of the individual image.

Text

Why does the browser take slightly longer to load my page, when I use "justify" alignment?

Various browser versions space words and letters quite arbitrary, depending on line length, number of words and HTML tags between or embedded in words. To guarantee the proper appearance, StudioLine does not rely on the browser to format the text but instead positions the words with HTML tables. This can require substantial amounts of extra HTML code, which increases the document size.

What are the implications when using text as graphic?

Graphic images require more disk space and extra transmission time compared to plain text. A page that makes extensive use of text as graphic may take slightly longer to load in the browser. This is becoming less of a concern with the growing availability of high-speed connectivity, such as ISDN, DSL and cable.

Browsers

How relevant are browsers not supported by StudioLine?

StudioLine makes use of advanced DHTML technology such as JavaScript and cascading style sheets. In 2001, about 95% of all Internet users already operate a compatible browser. For the remaining users, updated versions of Netscape, Internet Explorer and Opera are available free of charge. Other browser software account for less than 3% of total website visits.

Privacy

What unique system identifiers are used by StudioLine?

  1. StudioLine uses Windows GUIDs to identify objects in its database. This is crucial during export/import operations. GUIDs are derived from the network adapters MAC address, which is uniquely assigned by the hardware manufacturer.

  2. During setup, StudioLine generates a hardware-based ID which is used to validate your license.


Support

Getting Support

Online Support

To benefit from the combined experience of other users and the StudioLine support staff, please post questions and concerns on H&M Software's online support board. You should also check the support pages on the StudioLine web site for current product information and software updates.

  • Support Web Site: http://www.StudioLine.net/Support/

  • Support Board: http://Conference.StudioLine.net/

  • Email: Support_US@HM-Software.com

Installation Support

If you have difficulty installing this software, you may telephone H&M Software's installation hotline:

  • USA: +1 (201) 845-3357, Ext. 3

9:00 A.M. to 5:00 P.M., Eastern Time

  • Europe: +49 (6074) 9130

9:00 A.M. to 5:00 P.M., Central European Time

Please have your PC turned on and the StudioLine CDROM in the drive.

Note: You have thirty days from your first call to take advantage of installation support.

Incident Reporting

Use the form on the StudioLine support web site when reporting an incident to H&M's. It will provide H&M’s personnel with helpful information about your system configuration and the circumstances under which the problem was encountered.

Log Files

To assist support personnel, StudioLine keeps a log of important program events. The log files are located in the “Logs” folder of the StudioLine program folder. StudioLine automatically deletes old log files after one month. If disk space is getting sparse, then you may delete old log files earlier.

StudioLine Log

Certain program actions are recorded in a StudioLine log file. To determine the name and location of the current log file, choose Version from the Help menu.

Support personnel may ask you to change the level of detail for the StudioLine log. This is accomplished by editing the file “Relax.ini” and increasing the LogLevel.

FTP Log

A detailed log of publishing events is recorded in a separate FTP log. The file name of the FTP log starts with “SLG_FTP” followed by the current date in parenthesis.


Proprietary Rights

This and all copies of the software are proprietary products of H&M and are protected under U.S. and international copyright law. Therefore you must treat the software and accompanying written materials like any other copyrighted material: you may not copy any portion of them, but you may transfer the software to a single hard disk, provided you keep the original disk(s) solely for backup or archival purposes.

StudioLine is a trademark of H&M Systems Software, Inc. in the United States and other countries.

© 1994-2001, H&M System Software GmbH

Last Document Update: 15-Jul-02 05:47


Aspect Ratio

The aspect ratio defines the height to width proportion of an image. When a picture is enlarged or reduced, it is best to maintain the aspect ratio - otherwise, the picture would appear distorted (stretched in one direction).


Adding a Form

Forms and other HTML objects can be added to StudioLine pages.

By Including a Page

  • Use a third-party tool to create an entirely empty HTML page.

  • Add any form fields and properties.

  • Once complete, save the HTML page.

  • In StudioLine, open the page where the form should appear.

  • From the Page menu, choose Include HMTL File.

  • Browse to the file containing HTML form.

StudioLine will merge the third party HTML code with its own code. Your own code is responsible for including any positioning information.

By Inserting an HTML Object

  • Use a third-party tool to create the form, its fields and properties.

  • Copy the generated HTML code from the third-party tool.

  • In StudioLine, open the page where the form should appear.

  • From the File menu, choose Insert New HTML Object.

  • In the HTML Properties, choose “Div”. This way, you can control the location and dimensions of your form within StudioLine.

  • In the HTML Object Editor, paste the HTML code from the third-party tool.

While it is not necessary, that you use a third party tool, it usually is easier than manually typing the HTML code.