• In the Value field, type in "Sales Links", or click the folder button to

bring up the Locate Object dialog where you can choose "Sales Links"
from the Page dropdown list.
• In the Default target for links in frame, enter "Sales Target". This
specifies that when the user clicks on links in the "Sales Links" frame,
the object will display in the "Sales Target" frame.

At this point you should see the "Sales Links" page displaying in the frame.

Step 3. Specify the frame size properties

The width of the frame should be set to match the width of the contents of the Sales
Links page. Also, since this frame is displaying a static image, there's no need for
scrollbars.

Select the second tab of the Frame Properties box:

• Set the Width units to Pixels.

• Set Width to 180.
• Set Scrolling to Off.

Choose File - Save, or press Ctrl+S to save your work.

Set the right frame...

The right frame is the target frame. This means that when the user clicks on a link in the
"Sales Links" frame, the contents of the right frame update to display the new object.
But we still need to specify the initial contents for this frame. We'll set the default
contents to the "Contact Management" view.

Step 1. Bring up the Frame Properties box

Right-click inside the right frame to bring up the popup menu. Choose the Frame
Properties command. This brings up the Frame Properties box:
Step 2. Specify the frame properties

• Set Name to "Sales Target".

• Set Type to Named Element.
• When you choose the Named Element type, another field pops up for
you to specify the type of named element. Set the named element type to
View.
• In the Value field, type in "Contact Management", or click the folder
button to bring up the Locate Object dialog where you can choose
"Contact Management" from the View dropdown list.

At this point you should see the Contact Management view displaying in the frame.

Step 3. Specify the frame size properties

There is no need to set the width or height of this frame. This is because the other
frames have their sizes specified in pixels. Given the sizes specified for those frames,
this frame has no choice. We do want to specify that there should be no scrollbars
because this keeps the display cleaner.

Select the second tab of the Frame Properties box:

• Set Scrolling to Off.

Choose File - Save, or press Ctrl+S to save your work.

Preview your work...

Click the preview button of your choice to see the frameset you created. It should look
something like this:
Congratulations - you have created your first frameset!

You can now click back in the Designer window and close the "Sales" frameset.
11. Creating the Home Page
In this section...
We'll complete the WaterWorks site now by creating the home page. We'll also create a
link on the Home page to the Sales frameset. Here's how the home page will look (with
an indication of the link we'll be adding):

Also, to complete the navigation structure of the site, we'll go back to the "Sales Links"
page, (the page that provides all the Sales Department links in the left frame), to create a
link from the Sales Frameset back to the home page.

Create the home page...

First we'll create the home page.

Step 1. Select the Pages element

Select the Pages element in the Design pane:

Step 2. Create a new page

Click the New Page button at the top of the Work pane:
The Work pane now displays the new page.

Step 3. Name the page

Choose the menu command Design - Page Properties to bring up the Page Properties
box:

Set Name to "Home".

Add the image to the page...

We brought all the images into the database as Image Resources in the "Working with
Images" lesson. Now it's a simple matter to insert the image resource on the page.

Step 1. Add the image to the page

Choose Create - Image Resource. This brings up the Insert Image Resource dialog
box:

Select the homemap.gif image. Click OK to add the image to the page.
Choose File - Save, or press Ctrl+S to save your work.

Add a link to the Sales Frameset...

We'll now create the link to the Sales frameset by adding a hotspot to the image.

If you're familiar with creating image maps for the Web, this is similar. But as you'll
see, we'll do everything graphically, there's no need to mess around with area tags and
coordinates.

Step 1. Create the hotspot

Click anywhere in the image to select it.

Choose the menu command Picture - Add Hotspot Rectangle. The cursor changes to a
crosshair indicating that you can drag out the rectangle.

Drag out a rectangle around the "Sales Department" text. When you finish dragging, a
rectangle is displayed to indicate the hotspot, and the Hotspot Properties box pops up
for you to fill in the information needed to complete the specification of the hotspot:

Specify the following settings in the Properties box:

• Set the hotspot Name to "LinkToSalesFrameset".

• Set Type to Named Element.
• For the type of named element, choose Frameset.
• For Value, enter "Sales", or click the folder button to bring up the
Locate Object dialog box. In the Locate Object dialog box choose the
frameset "Sales".
• The Frame field specifies where to bring up the object we're linking to.
Enter "_top". "_top" is a standard HTML setting that indicates the entire
browser window, rather than any particular frame.

Choose File - Close to close the page. Since you've made changes to the page since the
last time you saved your work, Designer will ask if you want to save your work before
closing. Click Yes.

Create link from Sales frameset back to home page...

To complete the navigation structure of the site, we'll now go back to the "Sales Links"
page and add a link to go from the Sales frameset back to the home page.

Step 1. Open the "Sales Links" page

Select the Pages element in the WaterWorks Design list:

This brings up the list of pages in the Work pane. Double-click the "Sales Links" page
to open it.

Step 2. Position the cursor below the Sales links outline control

Click to the right of the Sales links outline control and press <Enter> twice to create a
line below the outline control and add a blank line for some spacing.

Step 3. Add the "Home page" icon

Choose Create - Image Resource to bring up the Insert Image Resource dialog box:

Choose "homeicon.gif".

Step 4. Add alternate text to the icon

Alternate text is a short description provided for users who cannot view graphics,
either because they are visually impaired or because they have turned off image loading
in their browser. The description will appear on the page, in place of the graphic. It is
generally good practice to fill out alt text for all graphics in an application which has the
possibility of reaching a wide audience.

Choose Picture - Picture Properties to bring up the Picture Properties box

Enter "Link to WaterWorks Home Page" into the Alternate Text field and close the
properties box.

Step 5. Add a label for the icon

Immediately to the right of the home icon, enter the text "Home".

Choose Text - Text Properties to bring up the Text Properties box:

• Set Font to Arial.

• Set Size to 9.
• Set Style to Bold.

The page should now look something like this:

Step 6. Create the link

Now we'll set up the icon and "Home" text to be a link back to the home page by
specifying these elements to be a Link Hotspot.
Select the home page icon and "Home" text by clicking to the left of the icon and
dragging to the end of the text.

Choose the menu command Create - Hotspot - Link Hotspot. This brings up the
Hotspot Properties box:

Set the link to bring up the home page:

• Set Type to Named Element.

• Set the Named Element type to Page.
• In the Value field, enter "Home". You can also click the folder icon to
bring up the Locate Object dialog box, and select "Home" from the list
of pages.
• Set Frame to "_top" so that the home page comes up full screen in the
browser.

Choose File - Close to close the page. Since you've made changes to the page, Designer
will ask if you want to save your work before closing. Click Yes.

Preview your work...

Open the home page in the Designer. Click the preview button of your choice to
preview the home page in a browser:
Move the cursor over the "Sales Department" text. Notice that the cursor changes to
indicate this is a hotspot. Click to go to the Sales frameset:

Move the cursor over the home page icon or text. Notice that the cursor changes to
indicate this is a hotspot. Click to go back to the home page.

Explore the WaterWorks site...

Congratulations! You have completed your first Web site created with Domino
Designer. Now you can explore the completed site.

Here are some suggestions for exploring the site with your browser:

• From the home page, click the "Sales Department" link to display the
Sales frameset.
• Click the "Industry News" link to display the Industry News page in the
right-hand frame.
• Click the "Contact Management" link to display the Contact
Management view in the right-hand frame.
• Click the "New Contact" action button to create a new contact form.
• Create several contact documents.
• Double-click a contact document to open in for reading.
• Click the "Edit Contact" action button to edit an existing contact. Update
the information and save the document.
• Select one or more contact documents and click the "Move to Trash"
action button to mark the documents for deletion. Click the "Empty
Trash" action button to delete the marked documents.
12. Deploying the Application
In this section...
Now that you've completed the WaterWorks application, the final step is deploying the
application on a Domino server to make it available to the intended audience. This
section highlights some things to consider when deploying your application on a
Domino server.

Note: Some of the steps of deploying the application on a server require the support of
your friendly Domino server administrator. For example, you will need access rights to
create databases on the server, and the server must be set up to support Web access.

Set up the database launch option...

Up until now you've viewed the WaterWorks application in a browser by using the
Designer preview capability. In preparation for accessing the database on a server, you
need to specify the element of the database that displays first when you open the
database.

To do this, right-click the database in the Design pane, and choose Database -
Properties. In the Database Properties box, select the Launch tab:

Set When opened in a browser to Open designated Page.

Set Page to Home.

Now, when you open the database in a browser, it opens directly to your home page.

Set up access control...

In preparation for making the WaterWorks database available on a server, you should
specify access rights for the database.
Domino gives you extensive support for controlling who can access your applications
and what they can do. A fundamental component of this support is the access control
list (ACL). The ACL is a list of who has access to your application, and what rights
they have. Every Domino database has an ACL.

To set up the ACL for the WaterWorks database, right-click the database in the Design
pane, and choose Database - Access Control. This brings up the Access Control List
dialog box:

The ACL dialog box lets you specify the level of access to the database for people and
servers. The access levels, from most access to least access, are Manager, Designer,
Editor, Author, Reader, Depositor, and No Access. Each level includes the rights of the
levels below it, with the addition of some additional access. For example, Reader access
allows a person to view the contents of a database, but not the right to create or edit any
content. The level higher, Author, includes all the rights of Reader, but also adds the
right to author new documents.

Notice that your name is in the list, (represented by the entry "Your Name" in the
picture above), and you're specified as having Manager access. When you create a
Domino database, you're name is automatically added to the ACL and set to Manager
level. The Manager level is the highest access level. It means that you have complete
access to the design and management of the database.

There's always an entry called Default in the list. The access level you set for Default
specifies the access for all entities that you do not explicitly add to the list. For example,
if you want everyone in your company to view the WaterWorks database and add or
edit contacts, simply set Default access to Editor. To do this, select Default in the list,
and set Access to Editor.

On the other hand, it's often the case that you don't want to provide full access to the site
for everyone. For example, let's say you want everyone in your company to be able to
view the site, but you want only people from the Sales Department to be able to add and
edit contacts. To achieve this, do the following:
 • Open the Access Control List dialog box. Select Default, and set Access
to Reader. This specifies that anyone in your company can visit the site
and read the contents.
• Add an entry for each person in the Sales Department by clicking the
Add button and specifying the name. Set the Access to Editor for each
person you add. This specifies that the people you add have the right to
create and edit contacts. Note: If there are more than just a few people in
the Sales Department, it's not recommended that you add all the names to
the ACL. Instead, you should create a Group called "Sales Department"
in the Domino Directory, and add all the people to that group. You
would then simply add the Sales Department group to the ACL. For
information on the Domino Directory, see Designer Help.

This section only scratches the surface of access control. The goal is to point you in the
right direction to make use of access control in your applications. For more information
on security and access control see Domino 5 Designer Help - Database Management.

Deploy the application on a server...

The final step is to get the WaterWorks database onto a server.

To get the WaterWorks database onto a server, you'll make use of a powerful capability
of Notes and Domino called Replication. A Replica of a database is a copy of the
database with the same internal Replica ID as the original database. Domino lets you
create one or more replicas of a database on other servers or workstations. Through the
process of replication, Domino exchanges modifications made on any replica of a
database to the other replicas, thus synchronizing the contents of the replicas.
Replication has several important uses in Notes and Domino:

• Access when you're disconnected from the network: When you can't
be connected to your network, such as when you're travelling on an
airplane, you can still access a database by creating a replica of it on your
laptop computer before you go on your trip. You can then modify the
database as needed on your laptop, and then replicate the changes back to
the database on the server when you return.
• Providing access for geographically separated locations: Your
company may have branches around the world, such as in Boston and
Singapore. To allow people at both locations to access a database,
replicas can be created at each location. People work on the replica of the
database at their location. Behind the scenes, Domino replicates changes
between the two replicas on a scheduled basis.
• Providing a staging area for application development: Multiple
people can create and modify databases on a "staging" server to create
and test an application. When the application is ready, or when
modifications are made, you can replicate the databases to the
"production" server. We'll make use of this staging/production concept to
deploy the WaterWorks application on a server.

In an actual production environment, you can set up two stages of replication:

 • Stage 1: You work on database replicas locally on your workstation.
When the changes are ready, you replicate to the staging server.
• Stage 2: The staging server is used for collecting the work of all the
people working on the project, and for testing the application. When the
application is ready, you replicate to the production server.

To illustrate replication, we'll now create a replica of the WaterWorks database on a

server. To do this, you first need to have the access to create databases on a server. If
you don't already have this, see your Domino server administrator.

Select the WaterWorks database in the Design pane.

Choose File - Replication - New Replica to bring up the New Replica dialog box:

Enter the name of the server on which you want to create the replica. In the example
above, the server name is "Production".

Click OK. When the replication is complete, a status message displays in the status bar
along the bottom of the Designer window. A replica of the WaterWorks database is now
on the Production server.

This section only scratches the surface of replication and deploying your application on
a server. For more information see Domino 5 Designer Help - Database Management
and Domino 5 Administration Help.

Access WaterWorks from a browser...

Now that you've completed all the steps of setting up the WaterWorks database on a
server, you can use your browser to access the application.

You will need to find out the URL of the server from your server administrator. Let's
say it's "server.yourcompany.com". Enter the following URL to open up the
WaterWorks application:

server.yourcompany.com/wworks.nsf

This URL displays the WaterWorks database in your browser. Since you set the launch
option to bring up the home page of the database, you should now be looking at the
WaterWorks home page in your browser.

Explore on your own...

Congratulations! You have completed the QuickStart Tutorial and created your first
application with Domino Designer! There's much more to learn about Designer and
Domino. With the foundation provided by this tutorial, you are now encouraged to
continue exploring on your own!