<chapter id="guides">
<title>Detailed Guides</title>

<para>

This chapter describes how to perform some common tasks in
&kpresenter;.
</para>

<sect1 id="html-wizard">
<title>Create an HTML Slideshow</title>

<para><guilabel>Create an HTML Slideshow</guilabel> is a way of turning an existing presentation
into <acronym>WWW</acronym> pages.</para>

<procedure>
<step>
<para>First make a few slides to include in the show.  I made one slide, used <menuchoice><guimenu>Edit
</guimenu><guimenuitem>Duplicate Page</guimenuitem></menuchoice> to make a couple of copies, and added a little text
and a couple of GNOME images that I found in
<filename class="directory">/usr/share/AbiSuite/clipart</filename></para>

<!-- Heh, not too sure about this, I certainly don't have AbiSuite installed, and I'm sure many other people
don't.  We might want to dig around for some KDE clipart that we can be sure people who have Kpresenter installed will have -->

<screenshot>
<screeninfo>The <guiicon>Add Clipart</guiicon> icon</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow01.png" format="PNG"/>
</imageobject>
<textobject><phrase>The <guiicon>Add Clipart</guiicon> icon</phrase></textobject>
</mediaobject>
</screenshot>

</step>

<step>
<para>You can then click on the <guiicon>Create HTML slideshow</guiicon> icon (outlined in red)

<screenshot>
<screeninfo>The <guiicon>Create HTML slideshow</guiicon> icon</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow00.png" format="PNG"/>
</imageobject>
<textobject><phrase>The <guiicon>Create HTML slideshow</guiicon> icon</phrase></textobject>
</mediaobject>
</screenshot>

or use the menu (under <guimenu>File</guimenu>) to start the wizard that guides you through the process.</para>
</step>

<step>
<para>A dialog box asks if you want to use an existing file.  Click <guibutton>No</guibutton> if this is the
first time you have used it.  The <guibutton>Yes</guibutton> option allows you to use the details you have
previously entered for your HTML slideshow.</para>
</step>

<step>
<para>You will then get a dialog box asking for a few details.</para>

<screenshot>
<screeninfo>Filling in the details for your HTML slideshow</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow02.png" format="PNG"/>
</imageobject>
<textobject><phrase>Filling in the details for your HTML slideshow</phrase></textobject>
</mediaobject>
</screenshot>

<para>Fill in each field and ensure that you get the path details correct, as this is where &kpresenter; 
will save your new HTML files and pictures.  Click on <guibutton>Next</guibutton> when you are done.</para>
</step>

<step>
<para>You then have a few display options to set.</para>

<screenshot>
<screeninfo>Setting up the display style for your HTML slideshow</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow03.png" format="PNG"/>
</imageobject>
<textobject><phrase>Setting up the display style for your HTML slideshow</phrase></textobject>
</mediaobject>
</screenshot>

<para>When &kpresenter; creates the web pages for you, the text colors will be whatever you set here.</para>

<para>Click the colored bar to choose a color scheme that suits you.</para>
</step>

<step><para>The <guibutton>Next</guibutton> buton brings a dialog box that allows you to change the name
of each slide.</para>

<screenshot>
<screeninfo>Setting the slide names</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow04.png" format="PNG"/>
</imageobject>
<textobject><phrase>Setting the slide names</phrase>
</textobject>
</mediaobject>
</screenshot>
</step>

<step>
<para>Finally, save the configuration before you close the dialog box.</para>

<screenshot>
<screeninfo>Saving your configuration</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow05.png" format="PNG"/>
</imageobject>
<textobject>
<phrase>Saving your configuration</phrase></textobject>
</mediaobject>
</screenshot>
</step>

<step><para>What we have now are new HTML and pictures directories, created where we earlier set the path.</para>

<screenshot>
<screeninfo>The newly created HTML slideshow directories</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="htmlshow07.png" format="PNG"/>
</imageobject>
<textobject><phrase>The newly created HTML slideshow directories</phrase></textobject>
</mediaobject>
</screenshot>
</step>
</procedure>
<para>There is also an <filename>index.html</filename> file to launch your web slideshow.</para>

<para>You can see how it works by using your file manager or web browser to open the <filename>index.html</filename> file.  Click where it says, and
the first page of your presentation is displayed.  It then works the same as a &kpresenter; slideshow.</para>

<para>Each click on the screen takes you to the next slide.</para>

<para>&FTP; it all to your website, remembering to keep the directory structure intact,
and the world can admire your work.</para>

</sect1>

<sect1 id="creating-templates">
<title>Creating &kpresenter; Templates</title>

<para>It is really easy to add new templates to &kpresenter;'s library.</para>

<para>If you have made a presentation in a style you would like to use again, you can save it
as a template.</para>

<para>This tutorial will show how we can make a new template and save it.</para>

<procedure>
<step><para>Open &kpresenter; and create a new document.</para>
<para>I chose a plain background with a text entry box.  <mousebutton>Right</mousebutton>
click on the work area and you get a <guilabel>Page Background</guilabel> dialog box.</para>

<screenshot>
<screeninfo>The &kpresenter; <guilabel>Page Background</guilabel> dialog.</screeninfo>
<mediaobject>
<imageobject>
<imagedata format="PNG" fileref="template02.png"/>
</imageobject>
<textobject><phrase>The &kpresenter; <guilabel>Page Background</guilabel> dialog.</phrase></textobject>
</mediaobject>
</screenshot>

<para>Under <guimenu>Format</guimenu> you will find <guimenuitem>Page Background</guimenuitem>
which opens the same dialog box.</para></step>

<step>
<para>I want the background to look attractive. In the top Combo box you can
choose to use a picture or some clipart for the background.</para>

<screenshot>
<screeninfo>Choosing a page background</screeninfo>
<mediaobject>
<imageobject>
<imagedata format="PNG" fileref="template03.png"/>
</imageobject>
<textobject><phrase>Choosing a page background</phrase></textobject>
</mediaobject>
</screenshot>

<para>I have left this at the default <guilabel>Color/Gradient</guilabel>
option. In the next Combo box down I have chosen <guilabel>Vertical gradient</guilabel>,
clicked into the two long boxes below it and chosen two colors.</para>
 
<para>You can alter the start positions of the colors in  the gradients by
clicking in the <guilabel>Unbalanced</guilabel> Check box. This lets you use
 the pair of X and Y sliders. Sometimes one slider will not do anything at all, it
depends on what type of gradient you have chosen.</para>
 
<para>Remember to choose contrasting colors first. If you leave both white, you will not see
anything. When you have a color scheme that you like, click <guibutton>Apply</guibutton> and
<guibutton>OK</guibutton> to close the Dialog box.</para>

</step>

<step>
<para>The page should now be in the colors you chose. Double click in the
text box to add a heading.</para>

<screenshot>
<screeninfo>Adding a Heading to the new template</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="template04.png" format="PNG"/>
</imageobject>
<textobject><phrase>Adding a Heading to the new template</phrase></textobject>
</mediaobject>
</screenshot>

<para>When you are happy with your template, click <guimenu>File</guimenu> on
 the Menu Bar and choose
 <guimenuitem>Create Template From Current Slide</guimenuitem>.</para>

<!-- Skipped screenshot of menu "template05.png" -->

<para>This Dialog box allows you to select where you want your template to
be saved.</para>

<screenshot>
<screeninfo>Saving the new template</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="template06.png" format="PNG"/>
</imageobject>
<textobject><phrase>Saving the new template</phrase></textobject>
</mediaobject>
</screenshot>

<para>I chose to save mine under the <guilabel>Screenpresentations</guilabel>
 menu and called it <userinput>tutorialtemplate</userinput>. Click <guibutton>OK</guibutton>
 to close this Dialog box.</para>
</step>

<step>
<para>Now close the document you have been working on (do not save it)
and &kpresenter; will show the <guilabel>Choose</guilabel> Dialog box.</para>

<screenshot>
<screeninfo>Your new template in the &kpresenter; <guilabel>Choose</guilabel>
dialog.</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="template07.png" format="PNG"/>
</imageobject>
<textobject><phrase>Your new template in the &kpresenter; <guilabel>Choose</guilabel>
dialog.</phrase></textobject>
</mediaobject>
</screenshot>

<para>You want to <guilabel>Create a new document from a Template</guilabel>.
 Click to open the <guilabel>Screenpresentations</guilabel> tab and there is 
 the template we made earlier (highlighted in red by me).</para>
</step>
</procedure>

</sect1>

</chapter>