<chapter id="tutorial">
<title>Step by Step Tutorial</title>

<sect1 id="choose-template">
<title>Tutorial: Choosing the initial template</title>

<note><para>The steps to this tutorial are numbered from 1 thru 22.
Beneath each step, is text in <emphasis>italics</emphasis>. This text
will explain what the previous step in the tutorial accomplished.</para>

<para>Also, you will notice a red rectangle on many screen shots. This
rectangle outlines the next object you will need to push/change/click/&etc;
Obviously a red rectangle will not appear when you are running
&kword;.</para></note>

<para>When you first start &kword; (or <link linkend="file">start a new
document</link> after &kword; is running), a dialog appears.</para>

<mediaobject>
<imageobject>
<imagedata format="PNG" fileref="ChooseTempDia.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject>
</mediaobject>

<para><emphasis>This dialog box is used to:</emphasis></para>
<orderedlist numeration="arabic">
<listitem>
<para><emphasis>To select the initial template for your new
document</emphasis></para>
</listitem>
<listitem>
<para><emphasis>Open a &kword; Document saved to your hard
drive or network.</emphasis></para>
</listitem>
<listitem>
<para><emphasis>Start &kword; without any document
started.</emphasis></para>
</listitem>
</orderedlist>

<para>For your first document:</para>

<para>Step 1: Click on the <guilabel>Page Layout</guilabel> tab.</para>

<mediaobject><imageobject><imagedata format="PNG"
fileref="Tut1.png"/></imageobject><textobject><phrase>Screen shot</phrase></textobject></mediaobject>

<para><emphasis>This will list the Page Layout templates available on
your system.</emphasis></para>

<para>Step 2: Now select the <guilabel>Simple Layout</guilabel> icon by
clicking once with the left button of your mouse.</para>

<mediaobject><imageobject><imagedata format="PNG"
fileref="Tut2.png"/></imageobject><textobject><phrase>Screen shot</phrase></textobject></mediaobject>

<para><emphasis>This is the template we will use for the
tutorial</emphasis></para>

<para>Step 3: Now confirm your selection by clicking on
<guibutton>OK</guibutton> </para>

<mediaobject><imageobject><imagedata format="PNG" fileref="Tut3.png"
align="center"/></imageobject><textobject><phrase>Screen shot</phrase></textobject></mediaobject>

<para><emphasis>To complete your selection</emphasis></para>

<para><emphasis>&kword; will open a new document with three frames. The
frames are outlined on the white background, as gray boxes. Each box is
a separate frame.</emphasis></para>

</sect1>

<sect1 id="tutorial-frame-select">
<title>Tutorial: Selecting a frame and entering text into that frame</title>

<para><emphasis>To begin entering text (or adding any sort of data for
that matter), to a document, you must first let the computer know which
frame to put the data in.</emphasis></para>

<para>Step 4: Place the mouse cursor over the upper-left frame</para>
<para>Step 5: Click once with the left mouse button.</para>

<mediaobject><imageobject><imagedata format="PNG"
fileref="Tut4.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject>

<para><emphasis>This selects a frame.  You can tell this is the current
frame because a cursor appears in the upper left
corner. </emphasis></para>

<para>Step 6: Enter the following text into the keyboard: <userinput>KWord Press Release</userinput>.</para>
<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut6.png"/></imageobject><textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>This is some sample text for our
newsletter.</emphasis></para>

<para>Step 7: Select <emphasis>KWord Press Release</emphasis> by placing
the mouse cursor on the left end of the text.  Click once with the
<mousebutton>left</mousebutton> mouse button and drag the mouse cursor
to the right.  Selected text will be white text on dark
background.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut7.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para>Step 8: Click inside the text size drop down box.  Change this
number to 36.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut8.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>This changes the size of the text to one more
appropriate for a title.</emphasis></para>

</sect1>

<sect1 id="tutorial-resize-frame"> <title>Tutorial: Changing the size of a frame</title>

<para><emphasis>Now that we have entered some text, we can see that the
frame is too large for the text. </emphasis></para>

<para>Step 9: Place the mouse cursor over the frame border, and click
once.</para>

<para><emphasis>This will select this frame, so it can be
re-shaped.</emphasis></para>

<para><emphasis>You will now notice the frame is outlined in black, with
8 black squares on the outline.  These squares are used for re-sizing the
frame.</emphasis></para>

<para>Step 10: Place the mouse cursor over the black square in the lower
right corner of the frame. Click with the left mouse button and hold it
down. Drag the mouse up and to the left.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut11a.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>Notice how the frame changes shape.  Adjust the size and
shape of the frame until it looks like this:</emphasis></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut11b.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para>When it does, release the mouse button.</para>

</sect1>

<sect1 id="tutorial-move-frame"> 
<title>Tutorial: Moving a frame on the page</title>

<para>Now that we have created a title block, we will center it at the
top of the page.</para>

<para>Step 11: Place the mouse cursor over the border of the frame (but
not on any of the black squares).</para>

<para><emphasis>The cursor will now change to a 4 way arrow.  This
indicates &kword; is ready to move the frame on the
page.</emphasis></para>

<para>Step 12: Click and hold with the left mouse button. Drag the
mouse, and the frame will follow it.  Position the frame in the center
of the page near the top. When you are satisfied with its final
location, release the mouse button.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut13.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

</sect1>

<sect1 id="tutorial-add-frame"> 
<title>Tutorial: Adding a new frame/Making text flow between two frames</title>

<para>Step 13: Begin by selecting
<menuchoice><guimenu>Insert</guimenu><guimenuitem>Text
Frame</guimenuitem></menuchoice></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut14.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>The cursor has changed to cross-hairs.  You can draw
your new text box with this cursor.  Start by placing the cursor at one
corner.  Click and hold the <mousebutton>left</mousebutton> mouse
button.  Drag the mouse diagonally.  An outline will appear which
represents your new text frame.  When you have a text frame of
reasonable size, release the <mousebutton>left</mousebutton> mouse
button.</emphasis></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut14a.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>It is not important if your text box does not resemble
the example for the purposes of this tutorial.</emphasis></para>

<para><emphasis>When you release the <mousebutton>left</mousebutton>
mouse button, a new dialog box appears.</emphasis></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut15.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>This dialog box lists all the current frame sets.  The
default value is highlighted.  By selecting the default value, you will
create a new frame set (text will not flow from any other frame into this
frame)</emphasis></para>

<para>Step 14: For the purposes of this tutorial, select
<guilabel>Frameset 2</guilabel></para>

<para><mediaobject><imageobject><imagedata format="PNG" fileref="T
ut15a.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para>Step 15: Select <guibutton>OK</guibutton></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut16.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>What you have just done, is connect frameset 2 to your
new text frame.  To test this:</emphasis></para>

<para>Step 16: Click once inside the new frame.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut18.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>Notice that your cursor immediately jumps to the frame
below the newly created text frame.  That is because that lower left
frame is the first frame in the current frameset.</emphasis></para>

<para>Step 17: Begin typing.  You will need to type quite a bit, but
keep typing.  When you run out of space in the text frame, you will see
your new text is moved immediately into your new text frame.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut19.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

</sect1>

<sect1 id="tutorial-del-frame"> 
<title>Tutorial: Deleting a frame</title>

<para>Now we will delete an unneeded frame. (Yes I know, we just created
a new frame, but &kword; will forgive you being fickle).  We will delete
the long text frame on the right side of the page.</para>

<para>Step 18: Place the mouse cursor over the frame border of the right
hand text frame, and click with the left mouse button.</para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut21.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>This selects the frame.</emphasis></para>

<para>Step 19: Select
<menuchoice><guimenu>Frames</guimenu><guimenuitem>Delete
Frame</guimenuitem></menuchoice></para>

<para><mediaobject><imageobject><imagedata format="PNG"
fileref="Tut22.png"/></imageobject>
<textobject><phrase>Screen shot</phrase></textobject></mediaobject></para>

<para><emphasis>This deletes the frame.</emphasis></para>

</sect1>
<sect1 id="tutorial-summary">
<title>Tutorial: Summary</title>

<para>Hopefully this tutorial has introduced you to the basics of using
frames in &kword;.</para>

<para>At this point, you have been introduced to:</para>

<itemizedlist>
<listitem><para>Adding Text to a frame.</para></listitem>
<listitem><para>Creating, moving, resizing and deleting frames.</para></listitem>
<listitem><para>and Resizing text.</para></listitem>
</itemizedlist>
<para>Now you should begin to feel more comfortable with the basics of &kword;.</para>
</sect1>
</chapter>
