1
<?xml version="1.0" encoding="UTF-8" ?>
3
<chapter id="using-quanta-3-2">
5
<title>Working With...</title>
8
<firstname>Robert</firstname>
9
<surname>Nickel</surname>
11
<address><email>robert@artnickel.com</email></address>
15
<firstname>András</firstname>
16
<surname>Mantia</surname>
18
<address><email>amantia@kde.org</email></address>
22
<othercredit role="reviewer">
23
<firstname>Christopher</firstname>
24
<surname>Hornbaker</surname>
26
<address><email>chrishornbaker@earthlink.net</email></address>
28
<contrib>Reviewer</contrib>
31
<othercredit role="reviewer">
32
<firstname>Fabrice</firstname>
33
<surname>Mous</surname>
35
<address><email>fabrice@kde.nl</email></address>
37
<contrib>Reviewer</contrib>
40
<!-- TRANS:ROLES_OF_TRANSLATORS -->
45
<title>Working With...</title>
48
This chapter describes the parts of &quantaplus; that you will be
49
interacting with mostly. These not only make your more productive, but
50
they also allow you to customize &quantaplus; to your work-flow.
53
<sect1 id="toolbars-howto-3-2">
54
<title>Toolbars</title>
57
As previously mentioned, toolbars in &quantaplus; are primarily managed
58
through the <guimenu>Toolbars</guimenu> menu. Usage and creation are
59
somewhat different. The creation of toolbars is discussed in a later
60
section entitled <quote><link linkend="creating-toolbars-3-2">Creating
61
Toolbars</link>.</quote>
65
Using toolbars is quite simple. When you click on an icon for a desired
66
element or action, one of three possibilities occur: the element is
67
inserted (optionally with a closing element); an element dialog is
68
activated, allowing you to fill in the attributes in a dialog box; or,
69
lastly, an action is activated and does something nifty for your current
70
file or project. If you find yourself doing tedious and redundant typing
71
for a particular element, that is not in &quantaplus;, then you can add it.
72
See <xref linkend="dtep-intro-3-2" /> for more information.
76
Configuring the toolbars and the elements on it can be done either by
77
using the context menu (right click on a toolbar), where you can
78
create a <guilabel>New Action</guilabel>, a <guilabel>New Toolbar</guilabel>, you can perform other actions like <guilabel>Remove Toolbar</guilabel>, <guilabel>Rename Toolbar</guilabel> or <guilabel>Configure Toolbars</guilabel>, which will get you the dialog where you can specify which actions should be visible on this or other toolbars.
81
By invoking the context menu on an action (icon) placed to a toolbar, aside of the above actions you will see the <guilabel>Remove Action</guilabel> and <guilabel>Edit Action</guilabel> entries, which speak for themselves.
84
The toolbars and the actions on them can be configured by using the <menuchoice><guimenu>Settings</guimenu><guimenuitem>Configure Toolbars...</guimenuitem></menuchoice> and <menuchoice><guimenu>Settings</guimenu><guimenuitem>Configure Actions..</guimenuitem></menuchoice> menu entries.
87
About the user definable actions you can read in <xref linkend="user-actions" />.
91
A tag dialog looks just like the following:
95
<imagedata fileref="taginputex.png" format="PNG" />
97
<caption><para>An example of a tag dialog.</para></caption>
102
The above image is the dialog for the anchor tag. If you know &HTML;/&XHTML;,
103
then you should have noticed that all the attributes that you can use, in
104
an anchor element, are available. Notice the tabs above for
105
<guilabel>Main</guilabel>, <guilabel>Core and i18n</guilabel>,
106
<guilabel>Events</guilabel>, and <guilabel>Focus</guilabel>, they hold
107
all of the other attributes, according to their purpose, available to the
108
anchor element. All you need do is: fill in the blanks for the attributes
109
you want in your anchor, omit the attributes you do not want, and click OK.
110
You now have a well formed anchor set down at the current cursor position.
116
<sect1 id="templates-3-2">
117
<title>Templates</title>
120
Templates are basically skeleton documents, code snippets and files to
121
link to. &quantaplus; uses templates fundamentally as a standard file
122
system with enhanced organization and interfacing. You can copy, move or
123
link any repository currently on your system into the templates tree.
124
Think of &quantaplus; templates as having roughly the limitations to your
125
imagination that your file system has.
129
Templates exist in nested folders. There is no limit to how deep you
130
can nest them, however, within any given folder &quantaplus; expects a
131
consistent action for the base template type described below. Additionally
132
templates allow for pre and post text to be concatenated to non document
133
type templates. This facilitates tag creation. The next update after the
134
introduction is scheduled to add the ability to pass variables to the text
135
such as image size information to assist in tag creation.
139
Our goal with templates is to extend them to include multi file
140
<quote>concept</quote> templates useful for things like placing an order or
141
creating an about section. Ideally this will be a tool for making your
142
work more productive and dynamic. An eventual goal is to have a structural
143
template design mode to deal with site layout and structure which you
144
could use to design and interactively update your sites. If you would like
145
to be involved, check out our
146
<ulink url="http://quanta.sourceforge.net/main1.php?contfile=needs">help
152
Some of the templates that ship with &quantaplus; have conditions for
153
their usage. Please read carefully the usage statement of conditions at
154
the top of each template before you use it.
158
<sect2 id="template-types-3-2">
159
<title>Template Types</title>
162
There are various template types supported by &quantaplus;.
167
<member>Binary templates</member>
168
<member>Document templates</member>
169
<member>Text snippets</member>
170
<member>Site templates</member>
173
Examples for these types are provided with &quantaplus;.
177
<term>Binary templates</term>
180
Binaries are anything not identified purely in text. They can be any file,
181
except text, including images, &PDF;s, flash files, etc. Binary templates
182
are usually included in your document via links (&ie; images as
183
an <sgmltag class="starttag">img src=/src/url</sgmltag>).
184
Some examples can be found in the Templates tree under Global Templates.
185
Please see <xref linkend="qit-3-2" /> for more information on the
186
<guilabel>Templates</guilabel> tree.
192
<term>Document templates</term>
195
Documents can be any type of text document. You can create new documents
196
based on these templates. Generally you would want to nest
197
more specific or diverse documents in subfolders. Here you can make a
198
basic framework for what you do and deliver it to your work in an
199
organized fashion and realize much better efficiency. Some examples
200
can be found in the Templates tree under Global Templates.
201
Please see <xref linkend="qit-3-2" /> for more information on the
202
<guilabel>Templates</guilabel> tree.
208
<term>Text snippets</term>
211
This type of template is useful when you don't want to create a new
212
document based on a template, but want to insert the same text area
213
over and over in your documents. They can contain anything, starting
214
with a comment and ending with a complete menu handling JavaScript
215
method or perl script. Some examples can be found in the Templates
216
tree under Global Templates.
217
Please see <xref linkend="qit-3-2" /> for more information on the
218
<guilabel>Templates</guilabel> tree.
224
<term>Site templates</term>
227
As the name says these templates are useful to build a whole site
228
from a template. They are a collection of various documents which
229
can be organized in a directory structure, everything gathered in
230
a compressed tar archive. As of writing there are no example site
231
templates in &quantaplus;.
239
<sect2 id="template-scope-3-2">
240
<title>Template Scopes</title>
243
Templates are accessible based upon their established
244
<link linkend="quanta-workspaces-3-2">workspace</link> in &quantaplus;
249
<sect2 id="creating-templates-3-2">
250
<title>Creating Templates</title>
252
<sect3 id="creating-document-templates">
253
<title>Creating document templates</title>
255
Create a document structure that you love (&XML;, &HTML;, DocBook, &etc;.)
258
<guimenu>File</guimenu>
259
<guimenuitem>Save as Template</guimenuitem>
260
<guimenuitem>Save as Local/Project Template</guimenuitem>
265
Once this is done, you will notice that (even if it is saved as a Project
266
template) the template does <emphasis>not</emphasis> show in the project
267
tab view. Look into the templates view to find your template under the
268
Project templates tab.
271
<sect3 id="creating-text-templayes">
272
<title>Creating text snippets</title>
273
<para>Select some text in your document and click on
275
<guimenu>File</guimenu>
276
<guimenuitem>Save as Template</guimenuitem>
277
<guimenuitem>Save Selection to Local/Project Template file</guimenuitem>
279
Alternatively you can just use drag and drop to drag the selection to the <guilabel>Templates</guilabel> treeview.
282
<sect3 id="creating-binary-templates">
283
<title>Creating binary templates</title>
284
<para>Creation of a binary template is simple: just copy the file
285
into a template folder. You can use standard file management
286
functions to do it, like drag and drop or copy and paste from
287
Konqueror or the <guilabel>Files Tree</guilabel>.
290
<sect3 id="creating-site-templates">
291
<title>Creating site templates</title>
293
In the <guilabel>Files Tree</guilabel> or the <guilabel>Project Files</guilabel>
294
treeviews right click on a folder and select <guilabel>Create Site Template</guilabel>,
295
pick up a name for the template and save it. By default it will try
296
to save to the project template folder, but of course you can choose
297
to save it as a local or global template as well.
302
<sect2 id="using-templates-with-projects-3-2">
303
<title>Using Templates With Projects</title>
306
Project templates allow you to be more tightly focused. You can create
307
headers, footers or go dynamic with &PHP; include files and link them.
308
Additionally there are some very cool things we took into consideration
309
when using templates in projects.
313
When creating a project you can opt to copy to your local project, all the
314
existing global and user templates. Legacy project get default templating
315
abilities so nothing is lost You can choose where to locate your template
316
files so they can be in your server root and easy to upload or you can
317
make them secure to link to below server root which is a very cool trick.
318
When linking to a file not in the project templates you will be prompted
319
to copy the file to the project templates prior to linking. This will prevent
320
broken links on upload. You always have control where you place your
321
templates so you can choose to move them. However &quantaplus; does not
322
track this so you will need to change links.
327
<sect2 id="managing-templates-3-2">
328
<title>Managing Templates</title>
331
Template structure on the template tab is based on the files found in
332
<filename class="directory">
333
$<envar>KDEDIR</envar>/share/apps/quanta/templates</filename> and
334
<filename class="directory">
335
$<envar>HOME</envar>/.kde/share/apps/quanta/templates</filename>. Each of
336
these folders is specified as one of four types of container as explained <link linkend="template-types-3-2">above</link>.
340
To set the behavior of each folder, &RMB; click in the template view on
341
the folder and choose <guimenuitem>Properties</guimenuitem>. The
342
following dialog will come up:
346
<imagedata fileref="template-rmb.png" format="PNG" />
348
<caption><para>Properties dialog.</para></caption>
354
<term><guilabel>Type</guilabel></term>
358
Drop down box with the three types discussed previously; files, text,
359
template. This box will be grayed out if you have the <guilabel>Inherit
360
parent attribute box</guilabel> checked.
366
<term><guilabel>Inherit parent attribute</guilabel> (<sgmltag
367
class="starttag">foo</sgmltag>)</term>
370
This is checked by default and is fine for all but the top level
371
folders in your templates tree. If the top level folder has this
372
checked, it will basically deactivate templates for that folder and all
373
that aren't explicitly set below it. If this is not a top level folder,
374
then the <sgmltag class="starttag">blah</sgmltag> will say something like
375
<literal>Text snippet</literal>. If it says nothing, then chances are that
376
you are on a top level folder.
381
<term><guilabel>Use pre/post text</guilabel></term>
384
Enables pre and post text for templates in this folder. This could be a
385
common header/footer for all of your templates for a given project and
386
then you copy content templates into that folder and have a complete
387
page with the custom header/footer as a starting point.
392
<term><guilabel>Pre-text</guilabel></term>
395
The actual text to insert before your templates content.
400
<term><guilabel>Post-text</guilabel></term>
403
The actual text to insert after your templates content.
409
The properties for a template file looks a bit different:
412
<imagedata fileref="template-file-rmb.png" format="PNG" />
414
<caption><para>Properties dialog.</para></caption>
419
Additionally if you look at your options with the &RMB; you will see
420
complete file management tools for creating folders or copying and
421
pasting templates from one location to another.
428
<title><application>Visual Page Layout</application></title>
431
<firstname>Nicolas</firstname>
432
<surname>Deschildre</surname>
434
<address><email>nicolasdchd@ifrance.com</email></address>
438
<othercredit role="reviewer">
439
<firstname>Christopher</firstname>
440
<surname>Hornbaker</surname>
442
<address><email>chrishornbaker@earthlink.net</email></address>
444
<contrib>Reviewer</contrib>
447
<!-- TRANS:ROLES_OF_TRANSLATORS -->
452
<title><application>Visual Page Layout</application></title>
454
<sect2 id="vpl-views-3-2">
455
<title>&VPL; Modes</title>
458
The <application>Visual Page Layout</application> (&VPL;) editor (also known
459
as <acronym>WYSIWYG</acronym> (What You See Is What You Get)) allows you
460
to edit a &HTML; or &XHTML; document while seeing the changes on-the-fly.
461
Just like your favorite wordprocessor, you can click on your document and
462
a cursor will appear, thus enabling you to enter text, insert images,
463
apply text decorations, &etc;. &VPL;'s aim is to allow you to create great,
464
valid web pages without any knowledge of Internet markup languages.
468
&quantaplus; offers two modes: <guilabel>&VPL; Editor</guilabel> and
469
<guilabel>&VPL; & Source Editors</guilabel>, which are accessible from
470
the <guimenu>View</guimenu> menu. The first replaces the <guilabel>Source
471
Editor</guilabel> with the <guilabel>&VPL; Editor</guilabel>, and the
472
second splits the editor window into two parts: the <guilabel>Source
473
Editor</guilabel> and the <guilabel>&VPL; Editor</guilabel>.
477
The <guilabel>&VPL; Editor</guilabel> works like so: It loads a document
478
like a normal &HTML; or &XHTML; page and a cursor appears. Then you can
479
edit it, and switching back to <guilabel>Source Editor</guilabel>, you see
480
that the changes you made on the <guilabel>&VPL; Editor</guilabel> have
481
been merged in the <guilabel>Source Editor</guilabel>.
486
When working in the <guilabel>&VPL; Editor</guilabel> with a document that
487
contains &PHP;, you will see a small green icon representing the &PHP;
488
code. You cannot directly edit it with the <guilabel>&VPL;
489
Editor</guilabel>. To edit &PHP;, you will still need to use the
490
<guilabel>Source Editor</guilabel>. There are no plans to change this
496
The second mode behaves exactly like the first, except that you instantly
497
see the impact that your changes have made, either in the <guilabel>Source
498
Editor</guilabel> or in the <guilabel>&VPL; Editor</guilabel>, and the
499
cursors of the source editor and of the <guilabel>&VPL; Editor</guilabel>
500
are synchronized. Pressing <keycap>F9</keycap> loads this mode, but, if
501
it is already loaded, it will move the focus from one view to the other,
502
while keeping you at the same location of the document.
506
The refresh intervals between the <guilabel>&VPL; Editor</guilabel> and
507
the <guilabel>Source Editor</guilabel> are configurable. Go to
509
<guimenu>Settings</guimenu>
510
<guimenuitem>Configure Quanta...</guimenuitem>
511
</menuchoice>. Select the <guimenu>&VPL; View</guimenu> tab. You can
512
choose whether you want to refresh a view only when you click on it or
513
automatically. If you choose automatically, then you can choose a refresh
514
interval. The general recommendation is: A smaller number for fast
515
computers and a bigger number for slower ones.
520
<imagedata fileref="vplsourceview.png" format="PNG" />
522
<caption><para>The <guilabel>&VPL; & Source Editors</guilabel> mode.</para></caption>
526
<sect2 id="vpl-editing-3-2">
527
<title>&VPL; Editing</title>
529
<sect3 id="doc-prop-dia-3-2">
530
<title>The <guilabel>Document Properties</guilabel> Dialog</title>
533
Now, let's say you want to edit the title of your web page. How do you do
536
<guimenu>Tools</guimenu>
537
<guimenuitem>Document Properties</guimenuitem>
538
</menuchoice>. This tool allows editing of <quote>invisible</quote>
539
tags when using the <guilabel>&VPL; Editor</guilabel>. The
540
<guilabel>Document Properties</guilabel> dialog is also launched when you
541
create a new document while in the <guilabel>&VPL; Editor</guilabel>. This
542
is in order to lessen the amount of hand coding you need to perform. With
548
<term><guilabel>Title</guilabel></term>
551
The title of the document.
556
<term><guilabel>Meta items</guilabel></term>
559
Meta tags allow you to store information about the document itself
560
⪚ keywords for the Internet search engines. You can add or remove
561
<guilabel>Meta items</guilabel> by pressing the two buttons below,
562
and edit them by clicking on the list ⪚ put <quote>keywords</quote> on
563
the <quote>name</quote> column and <quote>keyword1 keyword2</quote> on the
564
<quote>content</quote> column.
569
<term><guilabel>CSS Rules</guilabel></term>
572
<guilabel>CSS Rules</guilabel> are the new way to tell your web browser
573
how to present the page. You can add or delete the <guilabel>CSS
574
Rules</guilabel> by pressing the buttons below. You can also fill the
575
fields like the <guilabel>Meta items</guilabel>. The editing of
576
<guilabel>CSS Rules</guilabel> is not yet supported.
581
<term><guilabel>Link CSS Stylesheet</guilabel></term>
584
You can also link an external CSS stylesheet. Simply click on the
585
<guilabel>Browse</guilabel> button and select your file.
593
<sect3 id="vpl-editor-3-2">
594
<title>The <guilabel>&VPL; Editor</guilabel></title>
597
You can use your cursor like you do in a wordprocessor, moving with the
598
arrows. There may come a time when the cursor does not want to go where you
599
want it to go (a pesky bug). Selection also works as usual. You can insert
600
text by typing and remove text by pressing the &Backspace; or Delete key.
604
Now we come to tag insertion. You can insert images, applets, text
605
decorations such as bold and so on by using the same toolbars you use in
606
the source editor. Note that the insertion of tags does not remove previous
607
identical tags ⪚ if you insert an anchor tag around some text, then you
608
must remove any other anchor tag around it.
613
Some toolbar items will be disabled, such as the <guilabel>Table
614
Wizard</guilabel> or <guilabel>Quick List Wizard</guilabel>. They will
615
work later in &VPL;, but, for this release, you should use the
616
<guilabel>Tables</guilabel> or <guilabel>Lists</guilabel> toolbars.
621
To edit a tag (be it an image, an applet, or whatever), switch to the
622
<guilabel>Attribute Tree</guilabel>, accessible via
624
<guimenu>View</guimenu>
625
<guisubmenu>Tool views</guisubmenu>
626
</menuchoice>. Click on the tag you wish to edit, or, if you cannot access
627
it, click on an object contained by it. The <guilabel>Attribute
628
Tree</guilabel> will show the current tag name as well as a list of all its
629
parents and attributes. Currently &VPL; does not support, say,
630
&XHTML;+<acronym>MathML</acronym>, but you will see that you can edit
631
namespaces via this view. You can simply click on the
632
<guilabel>Value</guilabel> field and modify whatever you want. If you want
633
to access a parent of the current tag, then select it and the
634
<guilabel>Attribute Tree</guilabel> will load it.
638
To delete a tag, we will use the <guilabel>Attribute Tree</guilabel>. Have
639
you noticed the two little red crosses at the top-right corner? The first one
640
deletes only the currently selected tag and, if the &HTML;/&XHTML;
641
specification does not allow some children of the deleted tag to be children of
642
the parent tag of the tag set to be deleted, then they are also deleted,
643
and so on. The second cross will delete the selected tag as well as all of
644
its children, so be careful!
added
removed
doc/quanta/working-with-quanta.docbook
