/usr/share/doc/kde/HTML/en/stage/tutorial.docbook is in calligrastage 1:2.4.0-0ubuntu2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 | <!-- <?xml version="1.0" ?>
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
To edit or validate this document separately, uncomment this prolog
Be sure to comment it out again when you are done -->
<chapter id="tutorial">
<chapterinfo>
<authorgroup>
<author>
<firstname>Neil</firstname>
<surname>Lucock</surname>
<affiliation>
<address><email>neil@nlucock.freeserve.co.uk</email></address>
</affiliation>
</author>
<author>
<firstname>Krishna</firstname>
<surname>Tateneni</surname>
<affiliation>
<address><email>tateneni@pluto.njcc.com</email></address>
</affiliation>
</author>
<author>
<firstname>Anne-Marie</firstname>
<surname>Mahfouf</surname>
<affiliation>
<address><email>annemarie.mahfouf@free.fr</email></address>
</affiliation>
</author>
<!-- TRANS:ROLES_OF_TRANSLATORS -->
</authorgroup>
</chapterinfo>
<title>A Step-By-Step Tutorial</title>
<para>
In this chapter, &stage; is introduced using a simple tutorial. We
shall walk through the most basic steps that are involved in creating a
presentation, and adding some basic effects.
</para>
<sect1 id="start-new">
<title>Start a new document</title>
<para>
When you start &stage;, the usual &calligra; startup dialog appears.
</para>
<screenshot>
<screeninfo>The <guilabel>&calligra;</guilabel>
startup dialog</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut01.png" format="PNG"/></imageobject>
<textobject><phrase>The &calligra; startup dialog</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Select <guilabel>Screen</guilabel> on the left then select the template labeled
<guilabel>Empty</guilabel> (highlighted in blue in the screenshot above) by
clicking on it. You can check <guilabel>Always use this template</guilabel> to
make it the default template.
</para>
<para>
Now click <guibutton>Use This Template</guibutton>. This brings up the slide
editor window, where you can view and edit the slides (and objects contained in
them) in your document.
</para>
<para>At the moment, we just have one empty slide, so select the upper left slide
with the single text box from the <guilabel>Slide Layouts</guilabel> docker.</para>
<para>
Double-click the text box. The cursor changes to a vertical bar to show
that you can now type some text.
</para>
<screenshot>
<screeninfo>The text insertion cursor</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut03.png" format="PNG"/>
</imageobject>
<textobject><phrase>The text insertion cursor</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Go ahead, type some text!
</para>
<screenshot>
<screeninfo>Adding text</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut04.png" format="PNG"/></imageobject>
<textobject><phrase>Adding text</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Click away from the text to de-select the text box when you are done
typing.
</para>
</sect1>
<sect1 id="insert-page">
<title>Add a new page</title>
<para>
Let's now add a new slide to our document. To do so, click the
<guimenu>Slide</guimenu> menu, and then click on
<guimenuitem>Insert Slide</guimenuitem>.
</para>
<para>
Now we can decide what the new slide should look like. This time, select
one column layout (highlighted in blue.)
</para>
<screenshot>
<screeninfo>Choosing a layout for the new page</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut07.png" format="PNG"/></imageobject>
<textobject><phrase>Choosing a layout for the new
page</phrase></textobject>
</mediaobject>
</screenshot>
<para>
The new slide layout now appears in the editing window. To change between pages
of your presentation, you can select slides in the pane to the left
(highlighted in blue for this screenshot).
</para>
<para>
The newly inserted slide has two text boxes. There is one for a title,
and another to contain a bulleted list of items.
</para>
<screenshot>
<screeninfo>The new slide</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut09.png" format="PNG"/></imageobject>
<textobject><phrase>The new slide</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Double-click and type a title. Then double-click on the second text
box with the bullet. Type some text and end the paragraph by pressing the
<keycap>Enter</keycap> or <keycap>Return</keycap> key. As you type new
paragraphs, bullets automatically appear in front of them.
</para>
<screenshot>
<screeninfo>Adding text to the second slide</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut10.png" format="PNG"/></imageobject>
<textobject><phrase>Adding text to the second slide</phrase></textobject>
</mediaobject>
</screenshot>
<para>
You can de-select the text box by clicking away from it.
</para>
</sect1>
<sect1 id="insert-pic">
<title>Insert a picture</title>
<para>
Let's go back to the first slide now. Use the list of slides on the left
of your screen.
</para>
<para>
In this section, we'll liven our presentation up a bit by adding a nice
logo to the title page. To do so, the first step is to enable the <guilabel>Add
Shape</guilabel> docker using <menuchoice><guimenu>Settings</guimenu>
<guimenuitem>Dockers</guimenuitem></menuchoice> from the menu.
</para>
<para>Now select Image in the <guilabel>Add Shape</guilabel> docker
and click with the &LMB; where you want to place the loge in it's original size or
draw a rectangle with the left mouse (click the &LMB; and keep the button pressed)
to specify the position and size for the logo.
</para>
<para>
A file selection dialog appears. To learn about this or other
standard &kde; dialog boxes in detail, please consult the &kde;
documentation. You can browse by clicking on <guiicon>folder</guiicon>
icons or by using the <guiicon>browser</guiicon> style buttons on the
toolbar. Clicking the <guiicon>up arrow</guiicon>
takes you up one folder level.
</para>
<para>
Select a file and click <guibutton>OK</guibutton>.
</para>
<para>
Now the image is inserted in the slide and there are selection handles
(little squares) visible around the border of the graphic.
</para>
<screenshot>
<screeninfo>The newly added image</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut13.png" format="PNG"/></imageobject>
<textobject><phrase>The newly added image</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Place the mouse cursor anywhere in the middle of the logo, and drag it
to the middle of the title page. Then use the selection handles to resize
it correctly.
</para>
<para>
That's it. Now you have a picture on the title page!
</para>
<!--FIXME Double click opens the file dialog to replace the image-->
</sect1>
<sect1 id="insert-object">
<title>Insert a &calligra; object</title>
<para>Let's insert another &calligra; object under the picture, for example
a chart.</para>
<para>
Every &calligra; supported object can be embedded in a &stage; slide.
Let's choose a chart from the <guilabel>Add Shape</guilabel> docker.
</para>
<para>
Select <guilabel>Chart</guilabel> and then outline with your mouse the area you
want to put your chart in on the &stage; slide.
</para>
<screenshot>
<screeninfo>Select the area where to put the chart</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut25.png" format="PNG"/></imageobject>
<textobject><phrase>Select the area where to put the chart</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Once you release the mouse button, a template chart is added on the slide. Whenever
you work in the chart, its <guilabel>Tool Options</guilabel> appear in the docker.
</para>
<screenshot>
<screeninfo>&kchart; Tool Options</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut26.png" format="PNG"/></imageobject>
<textobject><phrase>&kchart; Tool Options</phrase></textobject>
</mediaobject>
</screenshot>
<para>To move, resize or even delete the embedded chart switch to the
<guibutton>Basic shape manipulation</guibutton> tool and click anywhere
within the chart area. It should now appear with a green border
and with a small yellow square at each corner and in the middle of each edge.
</para>
<para>If you move the cursor over any of the squares it should change
to a double headed arrow. You can resize the chart by dragging one of these
squares with the <mousebutton>left</mousebutton> mouse button pressed. To
delete the chart <mousebutton>right</mousebutton> click on one of the
squares and select <guimenuitem>Delete</guimenuitem>.</para>
<para>To move the chart move the cursor into the chart.
The cursor should then change to a cross, press the
<mousebutton>left</mousebutton> mouse button and you will be able to drag the
chart to where you want it to be.</para>
<para>To restore the chart to its normal appearance simply click anywhere
outside of the chart area.</para>
<para>To change the format of the chart itself <mousebutton>left</mousebutton>
click twice within the chart area. The chart <guilabel>Tools Options</guilabel>
should appear in the docker. You can then
use these tools to edit the chart properties like chart type, labels, axis and data.</para>
<para>Click anywhere with the &LMB; outside the chart to go back to
&stage; slide.</para>
<para>A single click on the chart will allow you to drag it to change its
location and also to drag the borders to make it bigger as with any other
&stage; object. Double click on the chart to get into &kchart; mode and
modify any of the chart property.</para>
</sect1>
<!-- does not work in BETA6 here
<sect1 id="addshadow">
<title>Add a shadow to the title text</title>
<para>
Let's continue enhancing our title page by adding a shadow
behind the title. <mousebutton>Right</mousebutton> click anywhere on the
title text. This achieves two things: the text box containing the title
is selected, and a menu pops up.
</para>
<para>
Select the <guimenuitem>Shadow Objects...</guimenuitem> option in the popup menu.
</para>
<screenshot>
<screeninfo>The context menu</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut15.png" format="PNG"/></imageobject>
<textobject><phrase>The context menu</phrase></textobject>
</mediaobject>
</screenshot>
<para>
The <guilabel>Shadow</guilabel> dialog pops up. The distance between the
shadow and the text is currently 0 so the shadow cannot be seen (this
part of the dialog box is highlighted in red.)
</para>
<screenshot>
<screeninfo>The <guilabel>Shadow</guilabel> dialog</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut16.png" format="PNG"/></imageobject>
<textobject><phrase>The <guilabel>Shadow</guilabel>
dialog</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Increase the distance value to 3. The effect of changing the distance
can be seen in the preview window. Now click <guibutton>OK</guibutton>.
</para>
<screenshot>
<screeninfo>Adding a shadow to the title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut17.png" format="PNG"/></imageobject>
<textobject><phrase>Adding a shadow to the title</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Now the title has a shadow!
</para>
<screenshot>
<screeninfo>The new shadowed title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut18.png" format="PNG"/></imageobject>
<textobject><phrase>The new shadowed title</phrase></textobject>
</mediaobject>
</screenshot>
</sect1>
-->
<sect1 id="textcolor">
<title>Change the color of the title text</title>
<para>
Let's finish by changing the color of the title text from black to
blue. To do so, select the title text by double-clicking the text box and select the text.
</para>
<!-- Font from menu Format or contextmenu with a lot of options-->
<para>
Open the color selector by clicking on the <inlinemediaobject><imageobject>
<imagedata fileref="22x22-actions-format-text-color.png" format="PNG"/></imageobject>
</inlinemediaobject> icon in the Text editing Tools Options (this icon has
a Text Color... tooltip).</para>
<screenshot>
<screeninfo>The color selector</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut19.png" format="PNG"/></imageobject>
<textobject><phrase>The color selector</phrase></textobject>
</mediaobject>
</screenshot>
<screenshot>
<screeninfo>The color selector</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut20.png" format="PNG"/></imageobject>
<textobject><phrase>The color selector</phrase></textobject>
<caption><para>Change the color to blue.</para></caption>
</mediaobject>
</screenshot>
<para>
Changing the color of
the selected text to blue changes its appearance. The exact color that
highlighted text turns depends on your system color scheme.
</para>
<note>
<para>Text color selection is also available on the <guilabel>Decorations</guilabel>
tab of the <guilabel>Select Font</guilabel> dialog. Open this dialog with
<guimenuitem>Font</guimenuitem> in the <guimenu>Format</guimenu> menu or context menu.
</para>
</note>
<para>
Now click away from the text to de-select it.
</para>
<screenshot>
<screeninfo>The finished title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut21.png" format="PNG"/></imageobject>
<textobject><phrase>The finished title</phrase></textobject>
</mediaobject>
</screenshot>
<para>
Now that there are two slides, why not try a slide show! To start the
slide show, press the <guiicon>Start Presentation</guiicon> button in
the toolbar. The first slide should appear on your screen.
</para>
<para>
To advance from the first slide to the next, just click anywhere on the
screen, or use the <keycap>Page Down</keycap> key.
</para>
<para>
To exit the slide show, press the &Esc; key.
</para>
</sect1>
</chapter>
|