~ubuntu-branches/ubuntu/lucid/kdewebdev-kde4/lucid

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.

</para>

<para>

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.

</para>

<para>

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.

</para>

<para>

About the user definable actions you can read in <xref linkend="user-actions" />.

</para>

<para>

A tag dialog looks just like the following:

</imageobject>

<caption><para>An example of a tag dialog.</para></caption>

</mediaobject>

</para>

100

101

<para>

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.

111

</para>

112

</sect1>

113

114

&quanta-projects;

115

116

117

<title>Templates</title>

118

119

<para>

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.

126

</para>

127

128

<para>

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.

136

</para>

137

138

<para>

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

147

wanted</ulink> page.

148

</para>

149

150

151

<para>

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.

155

</para>

156

</important>

157

158

159

<title>Template Types</title>

160

161

<para>

162

There are various template types supported by &quantaplus;.

163

These are:

164

</para>

165

<para>

166

167

<member>Binary templates</member>

168

<member>Document templates</member>

169

<member>Text snippets</member>

170

<member>Site templates</member>

171

</simplelist>

172

173

Examples for these types are provided with &quantaplus;.

174

</para>

175

176

177

<term>Binary templates</term>

178

179

<para>

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.

187

</para>

188

</listitem>

189

</varlistentry>

190

191

192

<term>Document templates</term>

193

194

<para>

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.

203

</para>

204

</listitem>

205

</varlistentry>

206

207

208

<term>Text snippets</term>

209

210

<para>

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.

219

</para>

220

</listitem>

221

</varlistentry>

222

223

224

<term>Site templates</term>

225

226

<para>

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;.

232

</para>

233

</listitem>

234

</varlistentry>

235

</variablelist>

236

237

</sect2>

238

239

240

<title>Template Scopes</title>

241

242

<para>

243

Templates are accessible based upon their established

244

245

</para>

246

247

</sect2>

248

249

250

<title>Creating Templates</title>

251

252

253

<title>Creating document templates</title>

254

<para>

255

Create a document structure that you love (&XML;, &HTML;, DocBook, &etc;.)

256

and click on

257

258

259

<guimenuitem>Save as Template</guimenuitem>

260

<guimenuitem>Save as Local/Project Template</guimenuitem>

261

</menuchoice>.

262

</para>

263

264

<para>

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.

269

</para>

270

</sect3>

271

272

<title>Creating text snippets</title>

273

<para>Select some text in your document and click on

274

275

276

<guimenuitem>Save as Template</guimenuitem>

277

<guimenuitem>Save Selection to Local/Project Template file</guimenuitem>

278

</menuchoice>.

279

Alternatively you can just use drag and drop to drag the selection to the <guilabel>Templates</guilabel> treeview.

280

</para>

281

</sect3>

282

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>.

288

</para>

289

</sect3>

290

291

<title>Creating site templates</title>

292

<para>

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.

298

</para>

299

</sect3>

300

</sect2>

301

302

303

<title>Using Templates With Projects</title>

304

305

<para>

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.

310

</para>

311

312

<para>

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.

323

</para>

324

325

</sect2>

326

327

328

<title>Managing Templates</title>

329

330

<para>

331

Template structure on the template tab is based on the files found in

332

333

$<envar>KDEDIR</envar>/share/apps/quanta/templates</filename> and

334

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>.

337

</para>

338

339

<para>

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:

343

344

345

346

347

</imageobject>

348

<caption><para>Properties dialog.</para></caption>

349

</mediaobject>

350

</para>

351

352

353

354

355

356

357

<para>

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.

361

</para>

362

</listitem>

363

</varlistentry>

364

365

366

<term><guilabel>Inherit parent attribute</guilabel> (<sgmltag

367

class="starttag">foo</sgmltag>)</term>

368

369

<para>

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.

377

</para>

378

</listitem>

379

</varlistentry>

380

381

382

383

<para>

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.

388

</para>

389

</listitem>

390

</varlistentry>

391

392

393

394

<para>

395

The actual text to insert before your templates content.

396

</para>

397

</listitem>

398

</varlistentry>

399

400

401

402

<para>

403

The actual text to insert after your templates content.

404

</para>

405

</listitem>

406

</varlistentry>

407

</variablelist>

408

<!--<para>

409

The properties for a template file looks a bit different:

410

411

412

413

</imageobject>

414

<caption><para>Properties dialog.</para></caption>

415

</mediaobject>

416

417

</para>-->

418

<para>

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.

422

</para>

423

</sect2>

424

</sect1>

425

426

427

428

<title><application>Visual Page Layout</application></title>

429

430

431

<firstname>Nicolas</firstname>

432

<surname>Deschildre</surname>

433

434

<address><email>nicolasdchd@ifrance.com</email></address>

435

</affiliation>

436

</author>

437

438

439

<firstname>Christopher</firstname>

440

<surname>Hornbaker</surname>

441

442

<address><email>chrishornbaker@earthlink.net</email></address>

443

</affiliation>

444

<contrib>Reviewer</contrib>

445

</othercredit>

446

447

448

449

</authorgroup>

450

</sect1info>

451

452

<title><application>Visual Page Layout</application></title>

453

454

455

<title>&VPL; Modes</title>

456

457

<para>

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.

465

</para>

466

467

<para>

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>.

474

</para>

475

476

<para>

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>.

482

</para>

483

484

<note>

485

<para>

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

491

functionality.

492

</para>

493

</note>

494

495

<para>

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.

503

</para>

504

505

<para>

506

The refresh intervals between the <guilabel>&VPL; Editor</guilabel> and

507

the <guilabel>Source Editor</guilabel> are configurable. Go to

508

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.

516

</para>

517

518

519

520

521

</imageobject>

522

<caption><para>The <guilabel>&VPL; & Source Editors</guilabel> mode.</para></caption>

523

</mediaobject>

524

</sect2>

525

526

527

<title>&VPL; Editing</title>

528

529

530

<title>The <guilabel>Document Properties</guilabel> Dialog</title>

531

532

<para>

533

Now, let's say you want to edit the title of your web page. How do you do

534

it? Simply launch

535

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

543

it, you can edit:

544

</para>

545

546

547

548

<term><guilabel>Title</guilabel></term>

549

550

<para>

551

The title of the document.

552

</para>

553

</listitem>

554

</varlistentry>

555

556

<term><guilabel>Meta items</guilabel></term>

557

558

<para>

559

Meta tags allow you to store information about the document itself

560

&eg; 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 &eg; put <quote>keywords</quote> on

563

the <quote>name</quote> column and <quote>keyword1 keyword2</quote> on the

564

<quote>content</quote> column.

565

</para>

566

</listitem>

567

</varlistentry>

568

569

<term><guilabel>CSS Rules</guilabel></term>

570

571

<para>

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.

577

</para>

578

</listitem>

579

</varlistentry>

580

581

<term><guilabel>Link CSS Stylesheet</guilabel></term>

582

583

<para>

584

You can also link an external CSS stylesheet. Simply click on the

585

<guilabel>Browse</guilabel> button and select your file.

586

</para>

587

</listitem>

588

</varlistentry>

589

</variablelist>

590

591

</sect3>

592

593

594

<title>The <guilabel>&VPL; Editor</guilabel></title>

595

596

<para>

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.

601

</para>

602

603

<para>

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 &eg; if you insert an anchor tag around some text, then you

608

must remove any other anchor tag around it.

609

</para>

610

611

<note>

612

<para>

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.

617

</para>

618

</note>

619

620

<para>

621

To edit a tag (be it an image, an applet, or whatever), switch to the

622

<guilabel>Attribute Tree</guilabel>, accessible via

623

624

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.

635

</para>

636

637

<para>

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!

645

</para>

646

647

</sect3>

648

</sect2>

649

</sect1>

650

</chapter>

Older »