Build a Website Version 30-JUL-02 / 13186

An appeaIing page, don't you think?

You can find this completed sample page and its related pages on the StudioLine CDROM. Just locate the folder
"Tutorial\Eng\04 Build a Website\Result and open the document "lndex.html. By following this tutorial, you will
quickly and efficiently create such a page with ease.
BuiId a Website


2

Preface:

This tutorial will get you started right away. Before you realize it, you'll have completed an entire website, even if
you had no prior experience in this field.

Text shown in italics and over a gray background contains technical explanations and in-depth information.

Step-by-step instructions in this tutorial are based on the assumption, that panels are immediately closed after
each use thus making it necessary to re-open the same panel when it may be needed again. lndeed, panels
with an "OK button will close automatically. However, most other panels may either be left open on the
StudioLine workspace or can be minimized to reduce clutter. lf a panel is still open, then there is no need to follow
the instructions and open it a second time.

The StudioLine user interface is designed to forgive any mistakes you may make. You can safely experiment with
settings and properties. Virtually every change can be taken back. ln rare occasions where an action would be
final, a prompt will give you the opportunity to reconsider.

As always the case with software, carefully read and consider any messages or prompts.

You can view a pop-up help for any icon, simply by resting the mouse pointer over it.

This tutorial requires that StudioLine has already been installed. See the StudioLine manual for installation
instructions.


Break
This tutorial is quite comprehensive and you may not be able to complete it in a single session.
Therefore, you will find box like this at the end of each chapter, containing instructions on how to
properly close StudioLine. Every new chapter has a similar box with instructions on how to start
StudioLine and resume your work.
BuiId a Website


3

First Steps (approx. 10 minutes)

The StudioLine CDROM comes with a number of practice files for this tutorial. The files are not copied to your
hard disk during setup to make certain that you are working with the original files. Adding pictures to StudioLine or
importing entire image archives, layouts and pages from other StudioLine users is a common task so this is a
perfect opportunity to learn the necessary steps.

Start StudioLine by clicking the Windows Start button. From the Start menu, choose the Programs and
StudioLine submenus, then click on StudioLine.

From the opening panel, choose "work with the lmage Archive.

Image Archive
The StudioLine Image Archive is the central repository of all images for your sites. You can optimize the
appearance, add descriptions, sort and search for your pictures. The left pane of the Image Archive is a list of
folders; the right pane displays image previews for the current folder. The Image Archive has extensive
capabilities, covered in a separate tutorial. For now you'll use it to organize the images for your website.

Maximize the StudioLine program window (see below).

Usually, you will maximize the StudioLine program window to have the most workspace available. It does make
sense to run smaller program windows whenever you need to exchange information between multiple windows.

ln the folder pane, click the button "New Folder (see below).



Enter "Tutorial Recipes", and click "OK.

StudioLine creates a new Image Archive folder.

ln the folder pane, double-click on the newly created folder "Tutorial Recipes to open it.

lf the StudioLine Explorer "My Computer is not already open, click the "Explore My Computer button on the
toolbar (see below).



StudioLine Explorer
The StudioLine Explorer panel is a key function of StudioLine. Here is where you access and organize your files
and documents. It manages your image archive, StudioLine internal objects (sites, layouts, templates, pages,
etc.) and regular files located on your computer or the network.
On the left is the folder pane, showing sites, folders, hard disks or removable drives depending on the type of
StudioLine Explorer that was opened.
On the right is the content pane, showing images, layouts, templates, pages or whatever objects may be
appropriate in the current context.
It is possible to open several StudioLine Explorer panels simultaneously. This is helpful when moving objects
between folders. You may also open different types of StudioLine Explorers, e.g., one Explorer panel for the
Image Archive, another one showing pages. Check the title bar to see the type of a StudioLine Explorer.

Double-click the CDROM drive with the StudioLine CD to access the folder list. Then open the folders
"Tutorial, "lmages and "01 with a double-click.

BuiId a Website


4

The StudioLine Explorer should now appear as shown below. lf the content pane looks differently, then click
repeatedly on the "Switch View button (see below) until your Explorer panel matches the sample below.



Select the first image ("Background.tif even a plain line is an image!), by clicking on the image once.

Click and hold the left mouse button on the image. While holding the mouse button, drag the image from the
StudioLine Explorer to the gray workspace of the lmage Base content pane. Note how the mouse pointer
changes (to include a "+ in a little square) as soon as it reaches the workspace.

Release the mouse button. lf this is the first time that images were loaded off the StudioLine CD, a prompt
"New CDROM will appear, as shown below. Click "OK to continue. You now have added your first image to
the lmage Archive.



Drag and Drop
The technique you just applied is referred to as "Drag and Drop. It simply means that you use mouse actions to
insert, move or copy images, text blocks or even settings. StudioLine relies heavily on this timesaving technique.
After a little practice, you'll quickly realize how intuitive and efficient this method is.

Select all remaining images. Click the next image ("Carciofi e Pisellini alla Romana 1.tif"), scroll the content
pane to the bottom, then hold the Shift key while clicking on the last image in the list ("Spaghetti Aglio, Olio e
Pepperoncino 3.jpg").

Drag the selected images to the lmage Archive workspace, while clicking and holding the left mouse button.

Image File Formats
The sample images are stored on the CDROM in a variety of file formats (TIFF, BMP, JPEG). When images are
added to the Image Archive, they are automatically converted to a format that is compatible with web browsers.

Close the StudioLine Explorer.

Break
To take a break, simply close StudioLine. Choose "Exit Program from the "File menu.
BuiId a Website


5

1. The First Page (approx. 35 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- maximize the StudioLine program window
StudioLine is now in Page Editor mode.

ln case you never took a break and had closed StudioLine, then simply choose "Page Editor from the mode
selector (see below).



Mode Selector
The mode selector allows you to switch between four distinct StudioLine modes, each with a specific purpose.
You will become familiar with the various modes, as you proceed through this tutorial.

ln the panel "Work on Sites and Pages choose the option "Create new site.

Enter "ltalian Recipes as the name for the site and click "OK.

ln the panel "Choose Default Layout Template, check the location bar (see below) to verify that you are
currently viewing the folder "Layout Templates\Basic.

lf you are currently in a different folder, click the "Up One Level button (see below) until the location bar
indicates "Layout Templates and you can see the folder "Basic in the left folder pane. Click the folder "Basic.



ln the content pane, click the layout template "Blank and click "OK".

You just created a new StudioLine site. The first page is automatically called "Home, which is appropriate in
many cases. That name can be changed at any time but it actually is just fine for our purpose.

On the menu bar, open the Help menu and click "Help (F1)".

Online Help
The StudioLine help window opens. It explains all program functions, techniques and panels in StudioLine. You
may also press the F1 key to access help. For speedy access to information about a specific panel, click on its
title bar to make it the current panel (the title bar should be blue), then press the F1 key. The appropriate chapter
for the current panel will open in the help window.

Take some time to familiarize yourself with the StudioLine help. Then close the help window.

To become familiar with the StudioLine user interface, you will now learn how to place images and text on a page.

BuiId a Website


6

From the toolbar, choose "Explore lmage Archive (see below).



Click on the "Tutorial Recipes".

Select the image Gamberetti alla Salvia 3".

Drag the image (while holding the left mouse button depressed) from the StudioLine Explorer onto the while
work space of your home page.

Release the mouse button. You just placed your first image on the page.

To avoid having to open and close the StudioLine Explorer panel, just click the "Minimize Window button on
the panel (see below).



Any panel with this button can be minimized to save space on the StudioLine workspace.

The image you just placed still has the selector frame making it the current object. To deselect the image,
simply click the white workspace background.

To re-select the image, click on it. Drag the image (while holding the left mouse button depressed) anyplace on
the workspace and release the mouse button.

That's how images are positioned freely anywhere on a page.

Repeat the above step except this time hold down the Ctrl key on your keyboard while dragging the image.

This time, the image movement is restricted to horizontal or vertical movements.

Select the image, then click the cursor keys on your keyboard. (The cursor keys are usually a block of four or
eight keys with arrows pointing in different directions, typically located between the letter keys and the numeric
keypad.)

Each time you press a cursor key, the image moves one pixel in the appropriate direction. (A pixel is one "dot on
your screen.)

Now, hold down the Shift key while pressing the cursor keys.

The image now moves ten pixels at a time.

On the toolbar, locate and click on the button "Undo Move Picture (see below).



BuiId a Website


7

Undo
The image jumps back to its previous position.
The Undo button allows you to take back any steps when you don't like the outcome of a function. You may
reverse more than just one step. StudioLine remembers a list of your actions, starting with the most recent and
going further back from there. Each time you press the Undo button, a more preceding action in the action list will
be reversed. The yellow pop-up help will always display what type of action would be reversed next.
Redo
If you pressed the Undo button and change your mind, then you can reinstate the action that had been reversed.
Simply use the Redo button to the left of right of the Undo button.

Choose "New Text Object from the "Text Processing menu.

The mouse pointer turns into an "I-Beam text insertion marker.

Click on the white workspace.

Text Processing
The text editor panel opens. You may just start typing or paste text from the clipboard.
To copy text on the clipboard, select a text passage in any application, then hold the Ctrl key while pressing the
"c key. To paste text from the clipboard, click the mouse pointer at the desired insertion point, then hold the Ctrl
key while pressing the "v key. This technique is referred to as "Copy and Paste.
For now, we'll go back to the basics and simply compose some text of our own.

Type "Welcome to Our Kitchen!"



Select the text you just typed, using either the mouse or by holding the Ctrl key and pressing "a. Then click on
the Fonts button (see below).



BuiId a Website


8

The panel "Font Properties will open (see below). Select the font "Verdana, the size of 10, and the style
"Bold.



The "Verdana" font is provided by Microsoft with Windows. If this font should not be available on your PC, then
you may use the font "Arial whenever this tutorial calls for the use of "Verdana. Of course, your page would have
a slightly different appearance than samples shown in this tutorial.

Close the panel "Font Properties and deselect the text editor by clicking elsewhere on the workspace.

Click on the text object once and drag it elsewhere on the page.

By clicking once on the text object, the text is selected and can be dragged as if it was an image. Use the two
sizing handles on the left and right border of the text object to change the width.

Double-click on the text object.

Double-clicking on a text object will open the text editor, enabling you to make changes.

Select the image you previously place on your page, by clicking on it.

Choose "lmage Toolbox from the "Edit menu. Click on the icon for "Scalable Backdrop (see below).



Image Toolbox
This panel offers functions to reduce, enlarge, crop, rotate and otherwise manipulate images. Images can be
optimized, by correcting color, saturation or contrast. Even special effects are available, such as drop shadows,
buttonizing and many other creative options.

Use the settings shown below:



BuiId a Website


9

Click the button for "Color.



Choose Color
This panel will open whenever colors can be selected. It is used by some of the image tools, the text editor and
for backgrounds.
Use the vertical color slider to choose a primary color tone, then drag the cross-hair icon inside the large square
to control brightness and saturation. The chosen color is shown in the vertical rectangle on the left side of the
panel the upper half shows the current (old) color, the lower half shows the selected (new) color.
You may also define exact color values by using the input fields for red, green and blue, which are the three basic
colors of the RGB color palette. Any color on your monitor is created by mixing these three basic colors.
To match the appearance of our sample, you will be using exact color values.

Define the exact color values as show in the above "Choose Color sample.

Close the "Choose Color and the "Scalable Backdrop panels.

With the help of the "Scalable Backdrop tool, you created a dark-red border around the image.

Minimize the panel "lmage Toolbox.

Position the text and image so that it approximates the sample page shown below. Use the techniques you've
learned before: Select an object and use the mouse to drag it to the desired position.



Click "Save on the toolbar (see below).



You just created a page, albeit simple. Before we move on to more elaborate pages and how to link them to
create a web site, let's preview our first page in a browser.

BuiId a Website


10

From the "Publish menu, choose "Render.

StudioLine will render your page in standard HTML format, which is compatible with web browsers.

Once rendering is complete, StudioLine will display a prompt. Click the button "browse a preview (the other
button will simply close the prompt.)

The rendered HTML page will open in your default web browser. This way you can verify the appearance of your
work, even before it is published to the Internet.

Close the web browser.

Break
To take a break, simply close StudioLine. Choose "Exit Program from the "File menu.
BuiId a Website


11

2. Creating a Home Page (approx. 50 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- from the panel "Work on Sites and Pages, choose "Open page Home (lf this choice is not available,
you may have been working on a different site in the meantime. Choose "Switch to a different site,
select the site "ltalian Recipes and open the page "Home.)
- maximize the StudioLine program window
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox
- click "Explore lmage Archive on the toolbar, then minimize the StudioLine Explorer panel

At this point we could simply fill up the page by arbitrarily placing additional images and text. However, this would
not meet our objective of creating a professional looking site. Instead, we should take a moment and design a
layout for our page just like it is done for flyers or newsletters.
The paper size and format is the key factor for designing printed publications. For web publishing, the size of the
browser window plays an equally important role. Nowadays, most computers are set to a screen size of 800 by
600 pixels and more, so it makes sense to layout our pages for that size.

Pixels
Here some information for those who are curious about "pixels and other units of measure within StudioLine.
"Points are the standard measure for font sizes. Linear measures (such as inches or centimeters) are unsuitable
for screen displays, because the physical size of a screen object is a factor of the screen size and resolution. For
that reason, screen objects are simply measured in pixels the little dots on the screen that together form a
picture.

From the "Page menu, choose "Margins.

ln the "Margins panel, define the settings shown below.


Margins
A blue vertical dotted line marks the rightmost margin of our page. It defines the content area visible in a
maximized browser window on a screen with the resolution of 800 x 600 pixels. By looking at the horizontal ruler
you will note, that the margin is actually at a position less than 800. StudioLine reserves some space for the
scrollbar, which Windows will display if a page length exceeds the height of the browser window.

Locate the vertical ruler on the right edge of the StudioLine workspace. Click on the vertical ruler, hold the
mouse button and drag it a good bit onto the workspace. Then release the mouse button.

Guides
A guide line appears at the location where you released the mouse button. Guides are helpful tools during the
layout phase and will only be visible on the StudioLine workspace. They won't appear on the rendered web page.

Use the mouse to drag the image near the guide line you just created.

Notice, how the image snaps to the guide line, once an edge or the center of the image is in the vicinity of the
guide. This makes it easy to align objects along a guide line. To deactivate this behavior, choose "Guides from
the "Page menu and turn off the "Magnetic option.
BuiId a Website


12


Drag another guide lines from the ruler and drop it on the workspace.

If you position your mouse pointer over a guide line, the mouse pointer changes and you will be able to drag the
guide line to a new location. Near the mouse pointer, information is provided about the current position if the
guide line and the distance to its neighbors, if any.
To delete a guide line, simply drag it back to the ruler. To delete all guide lines, choose "Guides from the "Page
menu and press the "Clear button.

Layouting
Take a look at the sample page shown at the beginning of this tutorial. You notice, how the page uses a three-
column layout of equal width. Since our available page width is 780 pixels (the position of the right margin), we
simply divide that number by three to determine a column width of 260 pixels.

Drag one of the guide lines to position 260. (Remember that positioning information is displayed next to the
mouse pointer, once it is located over the guide line.)

Drag the other guide line to position 520; the distance information should indicate 260 pixels to the left.

If our text and images would occupy the entire column width, then they would butt against objects in the
neighboring column. Therefore, we need to add some spacing.

Drag additional vertical guide lines 10 pixels to the right and left of the existing two guide lines.

Drag another vertical guide line to position 10.

Drag yet another vertical guide line from the ruler. Then click the right mouse button while the mouse pointer is
resting over the newly created guide.

Context Menus
Clicking the right mouse button over the background, guide lines and other objects opens a special context menu.
Context menus provide quick access to functions that presently apply to the current object. This saves time over
having to locate the same function somewhere on the menu bar.

From the context menu, choose "Position.

Enter "770 and click "OK.

Once you are ready to design your own pages, you are free to place guide lines anywhere you choose.
For our sample page, we will also need a few horizontal guide lines. To match the look of our sample page,
simply use the values we are providing you.

Drag five guide lines from the horizontal ruler and place them at the following positions: 17, 108, 285, 462 and
639.

Open the context menu for one of the guides, choose "Settings. Turn off the option "Guides on Top (the
green light in the center of the button should be dimmed).

You may also use the "Color button to choose a different color for the guide lines. Whatever color you choose
should contrast well against the predominant colors on your page. The default color cyan works equally well on
dark and light pages and is seldom used for page content.

On the panel "Guides, click the button "Save.

Enter "Recipe Home, click "OK and close the "Guides panel.

You have now saved the current arrangement of guide lines. This comes in handy, if you need to switch back and
forth between different arrangements.

BuiId a Website


13

Drag the image to the exact location shown below.



Click on the sizing handle at the bottom right corner of the image. Drag the sizing handle while you pressing
the mouse button the image is resized.

Sizing Handles
The sizing handles at the four corners of an object maintain the current proportions. Height and width are resized
at the same time. The proportional (corner) sizing handles can only be used against one image at a time.
The sizing handles in the center of the four sides affect only the object height or width, respectively. This distorts
the image proportions.
After experimenting with the height or width handles, use the Undo as often as necessary to restore the image
proportions.

Scale the image, so that it fits perfectly between the vertical guide lines of our center column (see below). The
"magnetic feature of the guide lines is in effect during scaling operations as well.



Restore the StudioLine Explorer panel "lmage Archive (see below).



From the folder "Tutorial Recipes, select the images "Carciofi e Pisellini... 3, "Dolce di Ricotta3 and
"Spaghetti Aglio... 3. (lf you can't read the full name of the picture files, then simply widen the StudioLine
Explorer panel by dragging its sizing handle as shown below.)

BuiId a Website


14



To select more than one image at the same time, click on the first image, then press and hold down the "Ctrl key
while clicking on the additional images.
The "Ctrl key allows you to select additional objects that are not consecutively listed.

Drag the images (by pressing and holding the mouse button) to the workspace. Minimize the StudioLine
Explorer panel.

Select the very first image that we had placed on the page (Gamberetti alla Salvia 3). Click the right mouse
button to open the context menu.

From the context menu, choose "Active lmage Tools, which will display the active tools list as shown below.



Active Image Tools
This panel lists the image tools, which have been applied against the selected image. Click on any of the tools in
the list to view or change its settings. To remove the effect entirely, drag the tool from the list (by holding down the
mouse key) to the trash can (to the right of the toolbar). To restore a deleted tool, simply use the Undo button on
the toolbar.

Select the other three images, either by dragging a selection frame around them, or, by clicking on each of
these images while holding the CTRL key for the last two images.

ln the Active lmage Tools list locate the "Copy button, which is the button in the top left corner of the panel
(see below). Click the "Copy button, then close the panel. Click the mouse anywhere on the background to
deselect the three images.


Copy Button
The image tools and their settings for the first image are copied to the other three images. The "Copy button can
be found on many StudioLine panels. It allows you to apply the same tools and consistent settings to several
objects at the same time.

BuiId a Website


15

One image at a time, select the three newly placed images and drag them to their final position as shown
below.

Choose "Font from the "Preferences menu.

Turn off the option "lgnore font and size. the green light inside the button should be dimmer. Click "OK.

Text Processing (continued)
The prior chapter introduced us to the text editor and how to create new text by typing. In this chapter, we'll learn
to use "Drag and Drop.

Open a Windows word processor, such as WordPad or Microsoft Word. From the StudioLine CDROM open
the file "Recipes.rtf", located in the folder "Tutorial\EN\04 Build a Website". (Normally, WordPad can be found
in the Windows Start menu, under "Programs, "Accessories. lf Microsoft Word is installed, it usually can be
found in the Start menu under "Programs.)

lf the program window of your word processor is occupying the entire screen then click on its "Restore button.
The "Restore button is the center of the three buttons located in the top right corner of the program window.
You should now be able to see your word processor's window floating on top of the StudioLine workspace. lf
necessary, resize and move the word processor's window.

ln the document "Recipes.rtf", highlight the first line below "Home Page. We will make "My ltalian Recipes the
Headline.

Click the selected line, click and hold the mouse button and drag it to the StudioLine workspace. Release the
mouse button.

BuiId a Website


16

StudioLine adds the selected text to a new text object, using the same font and formatting as used in the word
processing document.

Repeat the steps with all five text passages of the section "Home Page (see below). Once you're finished, you
should have created five text objects inside StudioLine. (We are omitting the line "Welcome to Our Kitchen.
We had already created this text passage manually, when we practiced using the StudioLine text editor.)



Keep the Word Processor window open. We will be needing other text passages later.

Click anywhere in the StudioLine program window, to raise it to the foreground.

Choose "Text Width from the "Text Processing menu.

One at a time, click on each text object and enter the appropriate width from the following list:

My ltalian Recipes = 750

Welcome to Our Kitchen = 750

Do you like to cook? = 230

all remaining text objects = 240

Close the "Text Width panel.

Select the text objects "My ltalian Recipes and "Do you like to cook?. Open the "lmage Toolbox and click on
the "Scalable Backdrop tool. Use the settings shown below. As a color, set 246 for red, 208 for green and 131
for blue.



BuiId a Website


17

Close the "Scalable Backdrop tool and minimize the "lmage Toolbox.

Drag the various text objects to align with the appropriate guide lines, as shown below.



Next we'll position the text "Welcome to Our Kitchen half way between the text objects above and below.
Select the three text objects and click the button "Align objects on the toolbar (see below).



On the drop-down icon list, click the icon "Balance objects vertically (see below).

The alignment functions allow you to quickly align objects without requiring guide lines or other layout aids.

On the toolbar, click the button "Save (see below).

BuiId a Website


18



Render the page to HTML code, by choosing "Render from the "Publish menu.

Once the "Open Browser prompt appears, click on ".browse a preview.

Preview the page in the browser and close it.

Break
To take a break, simply close StudioLine. Choose "Exit Program from the "File menu.
Close your word processor as well.


BuiId a Website


19

3. Create the First DetaiI Page (approx. 30 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- from the panel "Work on Sites and Pages, choose "Open page Home (lf this choice is not available,
you may have been working on a different site in the meantime. Choose "Switch to a different site,
select the site "ltalian Recipes and open the page "Home.)
- maximize the StudioLine program window
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox
- click "Explore lmage Archive on the toolbar, then minimize the StudioLine Explorer panel
- start your word processing application and open the file "Recipes.rtf from the folder "Tutorial\EN\04
Build a Website on the StudioLine CDROM.

Choose "New from the "File menu or click "New on the toolbar (see below).



Enter "Entree and click "OK.

Restore the StudioLine Explorer "lmage Archive, select the folder "Tutorial Recipes and drag the three
images "Carciofi e Pisellini alla Romana. to the workspace.

Minimize the StudioLine Explorer panel for "lmage Archive.

From the "File menu choose "New lnstance.

Multiple StudioLine Instances
StudioLine will open a second program window. Within the limits of available memory and computer performance,
you may start as many StudioLine instances as needed. Multiple StudioLine instances permit you to work on
multiple sites or pages, or to copy between pages, layouts or the Image Archive.

From the opening panel of the second instance, choose "work on sites and pages.

From the panel "Work on Sites and Pages, choose "Open page Home.

Drag the second instance program window so that it does NOT cover up the three images on the "Entree page
in the first instance.

Click the right mouse button over any of the four images on the home page in the second instance. Choose
"Active lmage Tools from the context menu.

BuiId a Website


20

ln the "Active lmage Tools list, click the "Copy button and drag it (while keeping the mouse button pressed)
from the second instance to the images on the three images in the first instance (see below).



All three images should have still been selected in the first instance thus all three images will be updated. lf
not, you may have to repeat this step for each of the remaining two images.

ln the second instance, close the "Active lmage Tools list, but do not close the second instance program
window we will refer to it again soon.

On the Windows task bar, click on the first StudioLine instance (with the page "Entree) as shown below.



BuiId a Website


21

Click on the background to deselect the grouping of the three images. One at a time, click on each image and
arrange them as shown below.



Choose "New Text Object from the menu "Text Processing.

Click somewhere in the upper area of the page. This will open a text editor panel. Type the exact string
"%%PageTitle%%" (no spaces).

Highlight the string, then set the font to "Verdana with the size of "24.

Close the "Font Properties panel.

Click on the background to deselect the text object.

Descriptors
Once you deselect a text object, the name of the current page is displayed in place of the text string you entered.
A string of "%% . %% identifies a text placeholder. It will be replaced with the value of a descriptor, in this case
"PageTitle, which is a StudioLine generated descriptor holding the name of the current page. Descriptors exist for
various system and page information and you can add descriptors to your images. There are extensive
possibilities to generate automatic text passages we can't get into all these details at this time.

Switch to your Word Processor.

From the document "Recipes.rtf" drag each single text passage under "Entree to the StudioLine workspace.
Each text passage must become a unique StudioLine text object.

Make "StudioLine [Entree] the active window by clicking on the workspace or by using the Windows task bar.

Choose "Text Width from the "Text Processing menu. One at a time, click on each of the text objects and
enter the respective width:

%%PageTitle%% = 750

Carciofi...= 750

BuiId a Website


22

lngredients = 230

all other text passages (steps) = 240

Close the "Text Width panel.

On the Windows task bar, click "StudioLine [Home]" (see below) to display the second instance.



Click the right mouse button over one of the light brown text objects. From the context menu, choose "Active
lmage Tools.

On the active tools list, click the "Copy button and drag it (while keeping the mouse button pressed) to the first
instance and drop it on the page header text object of "Entree, or "%%PageTitle%%, respectively.

Repeat this step for the text passage "lngredients.

ln the second instance, close the "Active lmage Tools list and switch back to the first instance (see below). Do
not close the second instance.



Arrange the text objects as shown below. The sequence of texts in "Recipes.rtf" matches the sequence of
images.



The exact positioning of the text passage "Carciofi..." requires that you select that text object with its
neighboring two objects above and below. The click the "Align objects button on the toolbar (see below). On
the drop down icon list, click on "Balance objects vertically.



BuiId a Website


23

Click the "Save button on the toolbar (see below).



Choose "Render from the "Publish menu.

On the prompt "Pages to Publish click "OK.

Preview the page in your browser and then close the browser window.

So far you created a home page and a detail page although the pages are not yet linked. We are also missing
pages for the other courses. Besides, we'd like to spice up our pages a bit more.
That's why the following chapters deal with effective page designs and automating recurring tasks. This way we
won't have to repeat all the same steps for every page.

Break
To take a break, simply close both StudioLine instances and your word processor.


BuiId a Website


24

4. Working with Layout TempIates and Layouts (approx. 25 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- on the panel "Work on Sites and Pages, check the name of the current site
- if the current site is "ltalian Recipes, either choose "Open page Entree (if available), otherwise
choose "Open existing page then open the page "Entree
- if the current site is not "ltalian Recipes, choose "Switch to a different site, select the site "ltalian
Recipes and open the page "Entree
- maximize the StudioLine program window
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox
- click "Explore lmage Archive on the toolbar, then minimize the StudioLine Explorer panel

We will import a partially completed layout template from the StudioLine CD. The entire process of creating a
layout template from scratch would not be suitable for this tutorial.

Choose "lmport, "StudioLine File from the "File menu.

Select the StudioLine CD, open the folder "Tutorial\EN\04 Build a Website and click on the layout template
file "Recipes.sld". Click "OK.

On the panel "Save lmported Layout Template As, click "OK. We could set up a new folder and change the
name of the layout template but in our case, we will use the information as it was exported.

Besides layout templates, you may also import entire image archives or pages.

On the "Entree page, delete the first text object (%%PageTitle%% / Entree).

Deleting Objects
There two options to delete objects:
Select the object, drag it to the right of the toolbar and drop it into the trashcan, or select the object and press the
"Delete key on your keyboard.

On the toolbar, click the button "Explore Layout Templates (see below).



ln the left folder pane, select "StudioLine Tutorial. From the content pane, select "Recipes and drag it (while
keeping the mouse button pressed) to the workspace. (lf you don't see the folder "StudioLine Tutorial then
click the button "Up One level as shown below.)



A prompt will appear, confirming that you wish to save the changes to the current page. Click "Yes.

Layout Templates
The page will now change its appearance. A banner and navigation bar is added across the top. A backdrop and
various graphical treatments appear. All these details were defined in the layout template we just imported.
Layout templates are used to define objects and behaviors that are common amongst a number of pages in a
project. Our sample layout template is not quite complete giving you a chance to practice how to expand and
work on layout templates. Once we have finalized the template, we will use it for the remaining detail pages of our
site.

Close the StudioLine Explorer "Layout Templates

Click the "Save button on the toolbar (see below).



BuiId a Website


25

From the "Mode Selector, choose "Layout (see below).



You are now viewing the objects that were added from the layout template to the layout of the current page. For
now we are going to ignore the "Image Views panel and the big "Prototype image.

Move the "Prototype image a little to the right, so it doesn't obstruct your view of the workspace.

Choose "Background from the "Page menu.

Click on the button for "Solid Color and choose a color.

Close the "Choose Color panel.

Page Background
You have set a different background color for your page. You also have the option to add any images to compose
a background pattern.

Restore the StudioLine Explorer "lmage Archive.

Click on the folder "Tutorial Recipes, then select the image "Background, drag it (while keeping the mouse
button pressed) to the "Background panel and release the mouse button to drop it on the large background
preview (see below).



Page Background (continued)
Our background is now composed from a thin image strip. It is 10 pixels high, the leftmost 780 pixels are white
the remaining 990 pixels are of a very dark red color, looking almost black. Since the dimensions of the image are
less than the dimensions of the page, it is being "tiled meaning, copies of the image are appended to one
another as necessary, until the entire page background is covered.
In our case, the background image is very wide and very thin. To fill the page background, copies of the images
are painted below one another. The result is the appearance of a consecutive white area on the left and a dark
red area on the right. Since the width of the image is 1680 pixels, this will work even for large browser windows.

Close the panel "Background and minimize the StudioLine Explorer for "lmage Archive.

We would like for the items on our navigation bar to change colors while the mouse pointer rests over them. This
is accomplished with the "Rollover feature.

BuiId a Website


26

Click the button "Roll-Over Mode on the toolbar (see below).



Roll-Over Mode
You will notice how the mouse pointer is now red and that the three icons on the right side of the navigation bar
changed their appearance. The roll-over mode defines the appearance of objects on the rendered web page,
while the mouse pointer rests over them. To set the roll-over appearance of an object, use the image tools.

Select all five items on the navigation bar (see below).



Restore the "lmage Toolbox panel and choose the "Scalable Backdrop tool.



Leave the settings as they are, but click on the "Color button and set the color values of red 192, green 38 and
blue 0.

Close the "Choose Color and "Scalable Backdrop panels and minimize the "lmage Toolbox.

Click the "Roll-Over Mode button on the toolbar, to switch back to normal mode.

Click on the background to deselect the navigation bar objects.

Click the right mouse button on the second navigation item, "Appetizer and choose "Link from the context
menu.

From the drop-down list, choose "Link to Page or Site (see below).



Click the button for "Create Page for Link.

Enter the page name "Appetizer and click on "OK. Keep the panel "Link for Objects open.

We are setting up the navigation bar, so that each item links to a specific detail page. Unfortunately, the page for
"Appetizer did not yet exist. That's why we instructed StudioLine to already prepare an empty page and link to
that. (If you'd happen to preview the page "Appetizer in the StudioLine Explorer, you would see an "under
construction icon. This means that the page has been prepared and currently is without a layout. Once the page
is opened the first time a layout template will be applied.)

BuiId a Website


27

On the navigation bar, click on the object "Pasta.

ln the panel "Link for Objects, the option "Link to Page or Site should still be selected.

Click the button for "Create Page for Link.

Enter "Pasta and click "OK.

Repeat these last four steps for the navigation object of "Dessert.

We had created the page "Entree in a prior exercise. So we'll use a slightly different technique to link to the
existing page.

On the navigation bar, click on "Entree. ln the panel "Link for Objects click the "Browse button.

Select the page "Entree and click "OK.

The first navigation item ("Home) is already set up with a generic navigation link to the site's "Home Page.

Close the "Link for Objects panel.

Click the "Save button on the toolbar (see below).



From the mode selector, choose "Page Editor (see below).



The changes made to the page layout are now visible in the page editor as well. We want to use this page as a
template for our other pages.

Break
To take a break, simply close all StudioLine panels and program windows. lf your word processor is
still running, you may close it was well.


BuiId a Website


28

5. Creating a Layout TempIate (approx. 15 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- on the panel "Work on Sites and Pages, check the name of the current site
- if the current site is "ltalian Recipes, either choose "Open page Entree (if available), otherwise
choose "Open existing page then open the page "Entree
- if the current site is not "ltalian Recipes, choose "Switch to a different site, select the site "ltalian
Recipes and open the page "Entree
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox
- click "Explore lmage Archive on the toolbar, then minimize the StudioLine Explorer panel
- from the "File menu choose "New lnstance and open the existing page "Home

lf you had not taken a break, use the Windows task bar to make the StudioLine instance "StudioLine [Home]"
the current application (see below).



In the previous exercise, we imported an existing layout template from the StudioLine CDROM. After having
become a little familiar with layouts, we can now create a complete new layout template from scratch. Often,
layout templates are easily derived from an existing page design. This is the technique we will now demonstrate.

Maximize the StudioLine program window (see below).



From the mode selector, choose "Layout Template (see below).



From the folder "Basic choose the template "Blank and click "OK.

From the "File menu choose "New.

Select the folder "StudioLine Tutorial" by double-clicking (if this folder doesn't appear in the content pane, click
the button "Up on Level). Enter the layout template name of "Tutorial Recipes Final" and click "OK.

Move the "Prototype image to the right and reduce it in size. This way it doesn't cover up the left area of your
page.

Use the Windows task bar to make the first StudioLine instance ("StudioLine [Entree]") the current application.



Click the "Select All button on the toolbar (see below).



BuiId a Website


29

Click the "Copy button on the toolbar (see below).



Switch to the 2
nd
instance of StudioLine (see below).



Click the "Paste button on the toolbar (see below).



Click the right mouse button on any one of the pasted objects. Choose "Position from the context menu (be
certain, that all objects have remained selected if not, click "Select All on the toolbar.)

On the "Position panel enter a horizontal and vertical value of "0. This positions the pasted objects at the top
left corner of the page.

Close the "Position" panel.

Click on the background to deselect all objects.

The only thing missing is the background image. lt was not included as part of our copying process. To add the
background, choose "Background from the "Page menu. Then click "Explore lmage Archive on the toolbar
(see below).



Click on the folder "Tutorial Recipes, then select the image "Background, drag it (while keeping the mouse
button pressed) to the "Background panel and drop it on the large background preview square.

We now have a layout template that complete matches our detail page. Next we need to make sure, that our
images are treated only as "placeholders, eventually to be replaced with the appropriate images for each of our
other pages.

Close the panels "Background and "lmage Archive.

Click the right mouse button on the backdrop image of the landscape, that's best visible behind the first text
passage in the right column on the page. From the context menu, choose "Lock Position.

Locking Image Position
This locks the backdrop image in place, avoiding that it could accidentally dragged while you are trying to move a
foreground object. As a reminder, a pushpin icon appears on the bottom right corner of the locked image (see
below).



Open the context menu of the landscape backdrop once again. Choose "Stacking Order, "Move to
Background Stack.

This ascertains, that this image is always stacked behind any of our foreground images.

Select the three photos that illustrate the recipe steps.

BuiId a Website


30

Click the right mouse button on one of the three selected images. From the context menu choose "Use as
Placeholder (see below).



Click the "Save button on the toolbar (see below).



That was all that is needed to complete our own Layout Template. Any subsequent pages can be created quickly
and with ease. The more complex a site is, the more relevant become the benefits of layout templates.

Close the current StudioLine instance (the Layout Template editor).

Break
To take a break, simply close all remaining StudioLine instances. lf your word processor is still running,
you may close it was well.


BuiId a Website


31

6. Create Pages using Layout TempIates (approx. 35 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- from the panel "Work on Sites and Pages, choose "Open page Entree (lf this choice is not available,
you may have been working on a different site in the meantime. Choose "Switch to a different site,
select the site "ltalian Recipes and open the page "Entree.)
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox
- click "Explore lmage Archive on the toolbar, then minimize the StudioLine Explorer panel
- start your word processing application and open the file "Recipes.rtf from the folder "Tutorial\EN\04
Build a Website on the StudioLine CDROM

Choose "Site "Settings from the "File menu.

Click the "Browse button for "Default Layout Template (see below).

On the panel "Choose Default Layout Template, click the button "Up One Level if you don't see the folder
"StudioLine Tutorial. Select the folder "StudioLine Tutorial, then select the layout template "Tutorial Recipes
Final and click "OK.



Accept the changes to the "Site Settings panel by clicking "OK.

Click the "Open button on the toolbar (see below).



Select the page "Appetizer and click "OK.

Initially, the new page "Appetizer will look identical to the "Entree page, because it is based on our default layout
template. Now we'll simply replace the placeholder objects with the appropriate content for this page.

Restore the StudioLine Explorer for "lmage Archive.

Click and hold the mouse button on the image "Gamberetti alla Salvia 1" in the folder "Tutorial Recipes. Drag
the image from the StudioLine Explorer panel to the top-most image on the page. Notice how the mouse
pointer is changing. Drop the image onto the placeholder image by releasing the mouse button.

StudioLine replaces the placeholder image from the layout template with the new image. All image tools and
settings, such as scaling and position are maintained.
(If you ever would need to replace the image again, open the context menu and choose "Use as Placeholder
before dropping the replacement image.)

Repeat this step for the two remaining "Gamberetti. images.

Minimize the StudioLine Explorer "lmage Archive.

Next we'll replace the text passages associated with each image.

BuiId a Website


32

Activate your word processing application and locate the text below "Appetizer in the document "Recipes.rtf".

Highlight the first text passage "Gamberetti alla Salvia, press and hold the "Ctrl key and press "c.

ln StudioLine, double-click the headline "Carciofi e Pisellini" to open the text editor. Highlight the entire old text
(either by dragging the mouse, by using "Ctrl+a or by clicking "Select All on the toolbar). Paste the new text
by using the "Ctrl and "v keys or by clicking the "Paste button on the toolbar.

Repeat the above two steps with the other text passages, pasting each new text passage in the appropriate
existing text objects.

Once you have copied and pasted all text passages, your "Appetizer page is finished.

Click the "Save button on the toolbar (see below).



Click the "Open button on the toolbar (see below). Select the page "Pasta and click "OK.



Restore the StudioLine Explorer for "lmage Archive and replace the placeholder images with the three
"Spaghetti. images.

Minimize the StudioLine Explorer for "lmage Archive".

Replace the content of all text objects with the text passages under "Pasta of the word processing document
"Recipes.rtf".

Click the "Save button on the toolbar (see below).



This completes the "Pasta page.

Click the "Open button on the toolbar (see below). Select the page "Dessert and click "OK.



Restore the StudioLine Explorer for "lmage Archive and replace the placeholder images with the three "Dolce
Di Ricotta images.

Minimize the StudioLine Explorer for "lmage Archive".

Delete the text object to the right of the top-most image it doesn't have any explanatory text passage. (Be
certain to delete the entire text object, not just the content inside the text editor panel.)

Replace the content of the other two text objects with the text passages under "Dessert of the word processing
document "Recipes.rtf".

Click the "Save button on the toolbar (see below).



Close your word processor application.

Choose "Render from the "Publish menu.

On the panel "Pages to Publish click OK".

While previewing pages in the browser, you will notice how the links between the detail pages are already
working. However, our "Home page does not yet have any links. You can use the browser's "Back button to
return to the detail pages. Next, we'll apply our common layout to the home page as well.

BuiId a Website


33

Close the browser.

Break
To take a break, simply close StudioLine.
BuiId a Website


34

7. AppIying the Common Layout to the Home Page (approx. 15 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- on the panel "Work on Sites and Pages, check the name of the current site
- if the current site is "ltalian Recipes, choose "Open existing page then open the page "Home
- if the current site is not "ltalian Recipes, choose "Switch to a different site, select the site "ltalian
Recipes and open the page "Home
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox

lf you had not taken a break, click the "Open button on the toolbar and open the page "Home (see below).



Delete the big headline "My ltalian Recipes.

Click the button "Explore Layout Templates from the toolbar (see below). Drag the layout template "Tutorial
Recipes Final to the workspace.



Confirm the prompt to save the page by clicking "Yes.

Close the StudioLine Explorer for "Layout Templates".

At first appearance, we seem to have created quite a mayhem on our page. Not to worry nothing is broken. Any
objects inserted from the layout template can be manipulated or deleted in the page's "Layout mode.

Choose "Layout from the mode selector (see below).



BuiId a Website


35

Follow the sample below and delete the text objects "Carciofi e Pisellini.", "lngredients and the three text
passages describing the preparation. Also delete the three images in the center column, which illustrate the
preparation of the dish.



Select the chef's hat, the red ruler (thin red line) below and the red icon on the far end of that line. Click the
right mouse button and choose "Position from the context menu.

On the "Position panel, enter a "Vertical position of "530".

Close the "Position panel.

Click the "Save button on the toolbar (see below).



Choose "Page Editor from the mode selector (see below).



BuiId a Website


36

Your page should now match the sample below:



Our introduction states, that one can click on the images to view the recipe for each course. We have two options
to create these image links:
- Create new links from scratch.
- Copy the existing links from the navigation bar.
We will learn both techniques.

Click the right mouse button over the image for the first course. Choose "Link from the context menu.

BuiId a Website


37

On the panel "Link for Objects choose "Link to Page or Site from the drop-down list. Click the "Browse
button, select the page "Appetizer and click "OK (see below).



Keep the panel "Link for Objects open. On the navigation bar, select the navigation item "Pasta. Notice how
the "Link for Objects panel now displays the settings for "Pasta navigation item.

Click and hold the mouse button on the "Copy button of the "Link for Objects panel. Drag it to the image for
"Spaghetti Aglio.. Release the mouse button (see below). The link to the "Pasta page has now been copied
to the appropriate picture.



Repeat these last two steps for the images showing the "Entree and the "Dessert.

Close the panel "Link for Objects.

Click the "Save button on the toolbar (see below).



This completes our home page.

Choose "Render from the "Publish menu and test the pages in your browser.

Your browser should show a fully functional site with practical links between pages. You could easily add
additional recipes and pages.
This completes the primary objective of our tutorial. The following exercises demonstrate a few additional bells
and whistles.

Close the browser.

Break
To take a break, simply close StudioLine.


BuiId a Website


38

8. FinaI Touches (approx. 20 minutes)

Resume
To resume after a break:
- start StudioLine
- from the opening panel choose "work on sites and pages
- from the panel "Work on Sites and Pages, choose "Open page Home (lf this choice is not available,
you may have been working on a different site in the meantime. Choose "Switch to a different site,
select the site "ltalian Recipes and open the page "Home.)
- from the "Edit menu choose "lmage Toolbox, then minimize the lmage Toolbox

You may have noticed the three icons on the right of our navigation bar (see below). Only the "Home button is
currently working. If you view the "Link for Objects panel for the two arrow icons, you'll find a setting of
"Navigation Link to "Previous Page and "Next Page, respectively. With StudioLine, it is easy to get these arrow
icons to work as intended.



Choose "StudioLine Explorer from the "File menu and double-click on "Pages.

Click the "New Folder button (see below), enter the name "Recipes and click "OK.



Click the button "One Level Up (see below).



Select all pages, except for the "Home page. Drag the selected pages (by holding the mouse button) from the
content pane on the right and drop them over the new "Recipes folder you just created (see below). Release
the mouse button.



Click the right mouse button on the folder "Recipes and choose "Navigation Links within Folder.

BuiId a Website


39

Enter the settings as shown below and click "OK.



Close the StudioLine Explorer panel for pages. Open the publish menu and render a new site preview.

In your browser, visit any of the detail pages for one of the courses. Depending on the page your are viewing,
either one or both of the arrow buttons will be active and open the appropriate prior or next page, if any.

To make our site easy to use, we'll now highlight the currently viewed page on the navigation bar. This is a
feature expected from any professional looking web site.

Close your browser.

ln StudioLine, click the right mouse button on the text object "Home in the navigation bar (see below).



Choose "Discard Roll-Over Settings from the context menu.

Restore the "lmage Toolbox, open the "Scalable Backdrop tool (see below), click the "Color button and enter
the values red 221, green 0 and blue 0.



Close the "Choose Color panel, but keep the "Scalable Backdrop panel open.

Once more, click the right mouse button on the navigation text object "Home and choose "Link from the
context menu.

Click the button "No Link (the green light in the center of the button should be on). Keep the "Link for Objects
panel open was well.

Click the "Save button on the toolbar.

One at a time open the remaining pages and repeat the previous 7 steps of course, referring to the
appropriate navigation bar text object for each respective page. For your convenience, the "Link for Objects
and "Scalable Backdrop panels will already be open.

Open the publish menu and render a new site preview.

This concludes our tutorial. In the browser, compare the site you created with the sample site on the StudioLine
CD-ROM.
We have introduced to a number of techniques. You are ready to get creative with your own web site projects. For
advanced capabilities remember to refer to the User Guide in the StudioLine online help.