Build a Website

Version 30-JUL-02 / 13186

An appeaIing page, dont 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 Index.html. By following this tutorial, you will quickly and efficiently create such a page with ease.

BuiId a Website

Preface: This tutorial will get you started right away. Before you realize it, youll 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. Indeed, 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. If 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. In 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

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 Image 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 youll 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. In the folder pane, click the button New Folder (see below).

Enter Tutorial Recipes, and click OK. StudioLine creates a new Image Archive folder. In the folder pane, double-click on the newly created folder Tutorial Recipes to open it. If 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, Images and 01 with a double-click.

BuiId a Website

The StudioLine Explorer should now appear as shown below. If 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 Image 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. If 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 Image 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, youll 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 Image 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

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. In 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. In the panel Work on Sites and Pages choose the option Create new site. Enter Italian Recipes as the name for the site and click OK. In the panel Choose Default Layout Template, check the location bar (see below) to verify that you are currently viewing the folder Layout Templates\Basic.

If 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.

In 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

From the toolbar, choose Explore Image 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. Thats 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

Undo The image jumps back to its previous position. The Undo button allows you to take back any steps when you dont 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, well 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

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 Image 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

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 Image Toolbox. Position the text and image so that it approximates the sample page shown below. Use the techniques youve 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, lets preview our first page in a browser.

BuiId a Website

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.

10

BuiId a Website

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 (If 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 Italian Recipes and open the page Home.) - maximize the StudioLine program window - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox - click Explore Image 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. In 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 wont 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. 11

BuiId a Website

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 threecolumn 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.

12

BuiId a Website

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 Image Archive (see below).

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

13

BuiId a Website

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 Image 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. In the Active Image 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.

14

BuiId a Website

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 Ignore 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, well 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. If Microsoft Word is installed, it usually can be found in the Start menu under Programs.) If 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 processors window floating on top of the StudioLine workspace. If necessary, resize and move the word processors window. In the document Recipes.rtf, highlight the first line below Home Page. We will make My Italian Recipes the Headline. Click the selected line, click and hold the mouse button and drag it to the StudioLine workspace. Release the mouse button.

15

BuiId a Website

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 youre 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 Italian 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 Italian Recipes and Do you like to cook?. Open the Image 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.

16

BuiId a Website

Close the Scalable Backdrop tool and minimize the Image Toolbox. Drag the various text objects to align with the appropriate guide lines, as shown below.

Next well 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).

17

BuiId a Website

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.

18

BuiId a Website

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 (If 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 Italian Recipes and open the page Home.) - maximize the StudioLine program window - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox - click Explore Image 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 Image 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 Image Archive. From the File menu choose New Instance. 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 Image Tools from the context menu.

19

BuiId a Website

In the Active Image 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. If not, you may have to repeat this step for each of the remaining two images. In the second instance, close the Active Image 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.

20

BuiId a Website

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 cant 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

21

BuiId a Website

Ingredients = 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 Image 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 Ingredients. In the second instance, close the Active Image 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.

22

BuiId a Website

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, wed like to spice up our pages a bit more. Thats why the following chapters deal with effective page designs and automating recurring tasks. This way we wont have to repeat all the same steps for every page. Break To take a break, simply close both StudioLine instances and your word processor.

23

BuiId a Website

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 Italian Recipes, either choose Open page Entree (if available), otherwise choose Open existing page then open the page Entree - if the current site is not Italian Recipes, choose Switch to a different site, select the site Italian Recipes and open the page Entree - maximize the StudioLine program window - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox - click Explore Image 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 Import, 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 Imported 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).

In 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. (If you dont 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).

24

BuiId a Website

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 doesnt 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 Image 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 Image 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.

25

BuiId a Website

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 Image 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 Image 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. Thats why we instructed StudioLine to already prepare an empty page and link to that. (If youd 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.)

26

BuiId a Website

On the navigation bar, click on the object Pasta. In 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 well use a slightly different technique to link to the existing page. On the navigation bar, click on Entree. In 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 sites 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. If your word processor is still running, you may close it was well.

27

BuiId a Website

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 Italian Recipes, either choose Open page Entree (if available), otherwise choose Open existing page then open the page Entree - if the current site is not Italian Recipes, choose Switch to a different site, select the site Italian Recipes and open the page Entree - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox - click Explore Image Archive on the toolbar, then minimize the StudioLine Explorer panel - from the File menu choose New Instance and open the existing page Home If 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 doesnt 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 doesnt 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).

28

BuiId a Website

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

Switch to the 2nd 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. It was not included as part of our copying process. To add the background, choose Background from the Page menu. Then click Explore Image 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 Image Archive. Click the right mouse button on the backdrop image of the landscape, thats 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.

29

BuiId a Website

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. If your word processor is still running, you may close it was well.

30

BuiId a Website

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 (If 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 Italian Recipes and open the page Entree.) - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox - click Explore Image 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 dont 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 well simply replace the placeholder objects with the appropriate content for this page. Restore the StudioLine Explorer for Image 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 Image Archive. Next well replace the text passages associated with each image.

31

BuiId a Website

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. In 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 Image Archive and replace the placeholder images with the three Spaghetti images. Minimize the StudioLine Explorer for Image 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 Image Archive and replace the placeholder images with the three Dolce Di Ricotta images. Minimize the StudioLine Explorer for Image Archive. Delete the text object to the right of the top-most image it doesnt 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 browsers Back button to return to the detail pages. Next, well apply our common layout to the home page as well.

32

BuiId a Website

Close the browser. Break To take a break, simply close StudioLine.

33

BuiId a Website

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 Italian Recipes, choose Open existing page then open the page Home - if the current site is not Italian Recipes, choose Switch to a different site, select the site Italian Recipes and open the page Home - from the Edit menu choose Image Toolbox, then minimize the Image Toolbox If 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 Italian 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 pages Layout mode. Choose Layout from the mode selector (see below).

34

BuiId a Website

Follow the sample below and delete the text objects Carciofi e Pisellini, Ingredients 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 chefs 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).

35

BuiId a Website

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.

36

BuiId a Website

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.

37

BuiId a Website

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 (If 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 Italian Recipes and open the page Home.) - from the Edit menu choose Image Toolbox, then minimize the Image 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, youll 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.

38

BuiId a Website

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, well now highlight the currently viewed page on the navigation bar. This is a feature expected from any professional looking web site. Close your browser. In 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 Image 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.

39