~ubuntu-branches/ubuntu/natty/bluefish/natty-proposed

<p>Le but de ce chapitre est de vous donner une courte introduction aux fonctions de base, afin de vous rendre capable de commencer à créer et dessiner sur le champ vos sites web avec Bluefish. Notre but pour l'instant est de vous faire faire connaissance avec l'environnement et l'interface utilisateur de Bluefish.</p>

<p>Ce chapitre ne couvre pas tous les aspects de Bluefish, mais c'est une simple introduction à tout l'environnement. Les autres chapitres couvriront tout en détail.</p>

<h2>Lancer le programme</h2>

<p>Après l'installation, si vous n'avez pas changé le répertoire d'installation, le fichier exécutable doit avoir été placé dans <code>/usr/local/bin/</code>. Ainsi tout ce que vous avez à faire pour lancer le programme est de taper : <code>blashyrkh:~# bluefish</code></p>

<b>NOTA BENE:</b> Pour des raisons de sécurité, le compte <i>root</i> ne peut pas lancer Bluefish. Ainsi, si vous êtes root et tapez <code>bluefish</code> un message d'erreur apparaîtra. Afin d'outrepasser ce point de sécurité et de lancer le programme en root, tapez <code>bluefish -s</code>.

</div>

<p>Le logo de Bluefish apparaîtra quelques secondes et puis l'écran principal (comme nous verrons par la suite) apparaîtra. Bien sûr, vous pouvez minimiser, maximiser, etc. cet écran, en accord avec les caractéristiques qui vous sont données par votre gestionnaire d'écran (toutes les captures d'écrans suivantes ont été prises en utilisant KDE).</p>

<p>Les options de lignes de commande peuvent être trouvées en utilisant -h:</p>

<pre>

blashyrkh:~# bluefish -h

bluefish 0.6 HTML editor

Usage: src/bluefish [options] [filename]

Les options couramment acceptées sont :

-s sauter la vérification root

-v version courante

-h aide en ligne

-p nom de fichier charge le projet au démarrage

</pre>

<div class="note"><b>TIP:</b> Si vous voulez ouvrir tous les documents PHP dans un répertoire <i>et</i> ses sous-répertoires, vous pouvez lancer bluefish comme cela : <code>bluefish `find -name '*.php'`</code>. Ou vous voulez ouvrir tous les fichiers html de votre machine? (Attention! environ 1100 sur une machine Debian standard!) Faites <code>bluefish `find / -name '*.html'` </code>.Regardez <i>man find</i> et <i>man bash</i> pour plus d'info.</div>

<h2>Interface</h2>

<p>Nous allons commencer l'explication de quelques trucs de base sur l'interface de Bluefish, et afin de faire cela, nous prendrons l'écran ci-dessus comme guide.</p>

<p>En haut de l'écran se trouve le <i>menu</i>, où sont répertoriées toutes les fonctions de Bluefish. Les fonctions sont regroupées selon leur usage, ainsi le menu <b>Fichier</b> contient des fonctions qui concernent les fichiers, <b>Editer</b> concerne les fonctions principales d'édition (<i>Couper, Copier, Coller, etc.</i>), et ainsi de suite. Si vous cliquez sur un menu, ses sous-menus apparaissent. Chaque sous-menu a son nom sur la gauche, et sur la droite son <i>raccourci</i> qui sera expliqué plus loin.</p>

<div class="note"><b>NOTA BENE:</b>Dans ce manuel, quand nous nous référons à une commande de sous-menu

, nous donnons son chemin complet de la manière suivante : <i>Fichier--> Nouveau</i> signifie que du menu Fichier vous devez sélectionner Nouveau.</div>

<tr>

Une fonction trè utile fournit par GTK+ est <b>tearoffs</b>. Afin de voir ce que c'est, sélectionnez <code>Fichier</code> et appuyer sur la petite ligne pointillée. Comme vous le verrez, une nouvelle fenêtre apparaîtra qui contiendra tout les sous-menus de Fichier. De cette façon, vous pouvez accéder plus rapidement aux fonctions d'un menu, puis vous pourrez simplement placer cette fenêtre à coté de la fenêtre principale. Si vous appuyez à nouveau sur la ligne pointillée ou fermez la fenêtre, la fenêtre disparaitra. Notez que le menu est encore accessible pas seulement de la fenêtre qui est apparue, mais aussi du menu de la fenêtre principale.

<p>Ainsi, ce qu'il fait actuellement est de permettre au menu de <i>flotter</i> sur l'écran. L'inconvénient est qu'il n'y a pas de possibilité de sauvegarder leur position et, quand vous re-démarrez Bluefish, aucun menu ne flottera.</p>

</td>

</tr>

</table>

<h4>Raccourcis</h4>

<p>Pendant que vous regardiez aux menus, vous pourriez avoir noté que pour certaines fonctions il y a une combinaison de touches sur la droite. Celles-ci sont appelées raccourcis et sont des combinaisons de touches, habituellement commençant par Control ou Alt. Si cette combinaison de touches est appuyée, alors la fonction est exécutée. Ainsi, par exemple, si vous voulez ouvrir un nouveau fichier, au lieu de sélectionner <code>Fichier-->Nouveau</code> (qui a le texte Ctrl-N sur sa droite) vous pouvez appuyer sur les touches Control et 'N' ensemble.</p>

<p>Une caractéristique très utile est, à part les raccourcis par défaut, que vous pouvez ajouter vos propres raccourcis ou re-définir ceux par défaut. Il faut simplement bouger la souris sur le sous-menu auquel vous voulez ajouter un raccourci et appuyez sur la combinaison de touches (ex. Control avec 'G'). Comme vous le verrez, la combinaison apparaîtra à coté et la fonction sera exécuté la prochaine fois que vous ferez cette combinaison. Si le raccourci existait déjà dans un autre sous-menu, il sera effacé de l'ancienne position et ira là où vous l'avez placé.</p>

<p>Au cas où vous voulez effacer un raccourci, placez la souris sur le sous-menu qui a le raccourci et appuyez sur <code>Retour en arrière</code>.</p>

<div class="note"><b>TIP:</b>un raccourci peut également être une combinaison de Control, Alt, Shift avec une autre touche, aussi bien deux d'entre elles ensemble, ex. <code>Ctrl-Alt-G</code>. Cependant, notez que Shift+touche, bien qu'accepté ne sera pas accessible, car Shift a déjà l'usage de modifier la casse. Alt+Shift+key or Ctrl+Shift+Key fonctionnera.</div>

<p>Depuis que les raccourcis sont utilisés très fréquemment, vous pouriez vouloir sauvegarder les changements que vous avez fait. Sélectionner <code>Options-->Sauvegarder touches raccourcis </code> pour faire cela. Cela sauvegardera tous les raccourcis que vous avez défini pour le <i>Menu personnalisé</i> (Bluefish 0.5 et suivant). Notez que les raccourcis NE sont PAS sauvegardés automatiquement, ainsi vous devrez sélectionner ce sous-menu chaque fois que vous voudrez les sauvegarder.</p>

<p>Aussi, notez que certains raccourcis sont réservés par la zone de texte et ne peuvent pas être utilisé. Un listing de ceux-ci pourra être trouvé plus tard.</p>

<h3>Les barres d'outils</h3>

<p>En dessous du menu il y a 3 barres d'outils (dans l'écran au dessus, seul deux d'entre elles apparaissent); <i>la barre d'outils principale, la barre d'outils HTML et le menu personnalisé</i>.<br>

</p>

<li><b>La barre d'outils principale</b> a des raccourcis pour les fonctions de bases de Bluefish, comme <i>Nouveau, Ouvrir, Sauvegarder, Couper, Copier, Coller, Rechercher, Défaire, etc.</i>. Afin de rendre visible cette barre d'outils, vous devez avoir coché l'<code>Options-->Visualiser barre d'outils principale </code> .</li>

<li><b>La barre d'outils HTML</b> deviendra très pratique pour vous, car elle contient les balises HTML très importants que vous pourrez utiliser tout le temps. Les boutons de la barre d'outils HTML sont catégorisés en onglets, selon leur usage, ainsi ils sont plus facile à trouver. Afin de rendre cette barre d'outils visible, vous devez avoir coché l'<code>Options-->Visualiser la barre d'outils HTML </code> .</li>

<li><b>Le menu personnalisé</b> est un endroit où vous pouvez stocker les fonctions que vous utilisez le plus, pour que vous puissiez les atteindre par un simple clic de bouton, plutôt que par le menu. Afin de rendre la barre d'outils visible, vous devez avoir coché <code>Options->visualiser barre d'outils personnalisée </code> . A partir de Bluefish 0.5 l'éditeur de menu personnalisé est étendu, pour un bon exemple utiliser l'option <code>Menu personnalisé-->Redéfinir menu personnalisé</code> . L'entrée pour une option du menu personnalisé consiste en un chemin de menu délimité par des slashs, aussi le chemin <code>Options-->Visualiser barre d'outils personnalisée </code> sera <i>/Options/View custom menu</i> dans l'éditeur. L'entrée consiste également en un mot <i>avant</i> et un mot <i>après</i> . Quand vous sélectionnez un morceau de texte et choisissez l'option de menu le mot <i>avant</i> sera inséré avant la sélection, et le mot <i>après</i> après la sélection. S'il n'y a pas de sélection les entrées seront insérées l'une après l'autre et le curseur est placé entre elles. Souvent vous avez une certaine partie du code qui est principalement similaire dans beaucoup de situations, mais une ou deux choses change à chaque fois. Pour permettre ce genre d'entrées vous pouvez utilisez des variables dans le menu personnalisé, les variables sont interrogées dans une boîte de dialogue avant d'insérer le texte actuel. D'abord augmentez le <i>nombre de variables</i>, vous voyez directement les entrées apparaissant nommées %0, %1, etc. Les valeurs de ces entrées sont les noms des valeurs demandées dans la boîte de dialogue. Si vous utilisez maintenant %0 dans votre mot avant ou après elles seront remplacées par les valeurs entrées dans la boîte de dialogue.</li>

</ul>

100

101

102

<tr>

103

104

105

<td align="left" valign="top"../../site/>Une chose importante à propos des barres d'outils est le fait qu'elles puissent flotter. Notez que le coin gauche de chaque barre d'outils, qui est similaire à l'image sur la gauche. Placez la souris dessus, maintenez le bouton gauche de la souris appuyé et tirer la barre d'outils vers où vous voulez et puis relacher le bouton de la souris. De cette manière, vous pouvez faire flotter une barre d'outils.</td>

106

</tr>

107

</table>

108

109

<p>Quand une barre d'outils flotte, elle n'apparaît plus dans la fenêtre principale, de cette façon plus d'espace est donné à la zone de texte.</p>

110

111

<p>Si vous tirez la barre d'outils vers sa place d'origine, elle redeviendra une partie de la fenêtre principale. Notez que les barres d'outils seront placées dans l'ordre suivant (de haut en bas): barre d'outils principale, barre d'outils html, menu personnalisé. Jusque là, il n'y a pas de manière pour placer une barre d'outils au dessus d'une autre.</p>

112

113

<p>Une courte description de ce que chaque bouton de la barre d'outils peut apparaître si vous laissez le pointeur de la souris quelques secondes sur le bouton (elles sont appelés <i>bulles d'aide</i>).</p>

114

115

<p>Comme pour les menus, vous ne pouvez pas mettre en mémoire leur position, aussi quand Bluefish est re-démarré, elles apparaîtront à leur position normale, comme une partie de la fenêtre principale.</p>

116

117

<h3>La zone d'édition de fichier</h3>

118

119

120

121

<p>La plus grande partie de la fenêtre est prise pour l'aire de rédaction. C'est là qu'apparaissent le texte des fichiers. Bluefish vous permet d'avoir simultanément autant de documents ouverts que vous voulez.</p>

122

123

<p>Le menu onglets montre les fichiers qui ont été ouverts. Dans l'image au dessus, on a deux fichiers : <code>preface.html</code>, un fichier que nous avons ouvert du disque et <code>Sans titre</code> qui est un nouveau fichier non sauvegardé. Les nouveaux fichiers sont toujours nommé "Sans titre". Le fichier actuellement sélectionné est "Sans titre". Les onglets vous permettent de permuter entre les fichiers. Si vous appuyez sur un autre onglet, cela passe sur le fichier dont le nom a été sélectionné. Allez-y ! et essayez, en cliquant sur <code>Fichier-->Nouveau</code> deux fois et puis permuter les onglets. Une autre manière de changer les documents (si vous n'avez pas modifié les raccourcis) est avec la touche <code>F1</code> pour sélectionner le prochain document et <code>F2</code> pour sélectionner le document précedent (Ces raccourcis sont dans le menu <code>Visualiser</code> ).</p>

124

125

<p>L'apparence de la zone d'édition peut être changée dans <code>Options--> Préférences</code> comme nous le verrons plus loin.</p>

126

127

<h3>Barre d'état</h3>

128

129

<p>Finalement, sur le coin en bas de l'écran se trouve la barre d'état, qui est utilisée afin de montrer des messages sur les actions qui ont été prises. Pour comprendre son usage, observez ce qu'il y apparaît lorsque vous appuyez sur les différents boutons, etc.</p>

130

131

<h2>Allons vers des choses plus importantes</h2>

132

133

<p>Maintenant que nous avons expliqué les bases sur l'interface, nous allons continuer avec l'utilisation de Bluefish.</p>

134

135

<p>Je crois que la première chose que nous devons expliquer est comment vous pourriez créer des nouveaux documents, aussi bien qu'ouvrir et sauvegarder des fichiers. Non seulement nous expliquerons ces fonctions mais aussi nous vous aiderons à réaliser quelques aspects de Bluefish cela rendra les choses plus facile et plus rapide pour vous (comme <i>Départ rapide...</i>).</p>

136

137

<h3>Créer un nouveau fichier</h3>

138

139

<p>Pour créer un nouveau fichier sans titre, vide, il y a 3 façons :</p>

140

141

142

<li>Sélectionnez <code>Fichier-->Nouveau</code> ou appuyez sur <code>Ctrl-N</code>.</li>

143

<li>

144

145

<tr>

146

147

<td align="LEFT" valign="CENTER">Appuyez sur le premier bouton de la barre d'outils principale.</td>

148

</tr>

149

</table>

150

</li>

151

</ul>

152

153

<p>Comme vous le verrez, un nouvel onglet apparaîtra dans l'aire de rédaction et le texte sera complètement vide.</p>

154

155

<p>Mais cela n'est pas bien d'être vide. Ne serait-ce pas merveilleux si vous aviez les balises élémentaires HTML écrites pour vous (ex. la DTD, le titre, etc.). Bluefish a une bonne méthode pour vous aider à écrire les choses élémentaires aisément.</p>

156

157

158

<li>Sélectionner <code>Dialogues-->Général-->Départ rapide</code> ou appuyez sur <code>ALt-Q</code>.</li>

159

<li>

160

161

<tr>

162

163

164

<td align="LEFT" valign="CENTER">De l'onglet "Barre rapide" dans la barre d'outils HTML, appuyez sur le premier bouton à gauche.</td>

165

</tr>

166

</table>

167

</li>

168

</ul>

169

170

<p>Cela affichera des fenêtres, dans lesquelles vous pourrez sélectionner la DTD, titre de la page et les balises META, aussi bien que les variables du Corps.</p>

171

172

<h3>Editer le texte</h3>

173

174

<p>Apparemment, vous pouvez éditer le fichier en utilisant l'aire de rédaction. En écrivant les balises, la barre d'outils HTML peut apparaître très utile, puisqu'elle contient toutes les balises de base. Certains boutons (aussi bien que les fonctions dans le menu <code>Dialogues</code> ) montrent des fenêtres dans lesquelles vous pouvez facilement définir les paramètres de la balise, rendant les choses plus rapides. Au cas où vous vous voudriez une description de ce que fait chaque bouton de la barre d'outils HTML, bouger la souris dessus et attendez jusqu'à ce que sa bulle d'aide apparaisse.</p>

175

176

<p>Par défaut, le retour de mot est utilisé (vous pouvez le désactiver dans <code>Options-->Préférences</code>). Au cas où une ligne est retournée, une petite icone apparaît sur la droite de la ligne, indiquant quelles lignes sont retournées. S'il y a beaucoup d'icones dans une ligne, cela signifie qu'elle a été retournée en plusieurs autres lignes.</p>

177

178

<p>Je crois qu'il est temps de s'intéresser au menu <code>Editer</code> , car il contient quelques fonctions très intéressantes.</p>

179

180

181

<li>

182

183

<tr>

184

185

186

<td align="LEFT" valign="TOP">Au cas où vous avez fait une erreur de saisie ou

187

si vous voulez effacer la dernière chose que vous avez écrite, vous pouvez annuler le changement en sélectionnant <code>Editer-->Défaire</code>, en appuyant sur <code>Ctrl-Z</code> ou en sélectionnant le bouton Défaire de la barre d'outils principale. Au cas où vous avez changé d'avis , vous pouvez refaire le changement, en sélectionnant <code>Editer-->Refaire</code>, en appuyant sur <code>Ctrl-R</code> ou en le sélectionnant sur la barre d'outils principale.</td>

188

</tr>

189

</table>

190

</li>

191

192

<li>

193

194

<tr>

195

196

197

198

Les fonctions très connues - couper, copier, coller - ne pouvaient pas être oublié, bien sûr. Elles sont également dans le menu <code>Editer</code>, comme d'habitude et leurs raccourcis sont <code>Ctrl-X, Ctrl-C, Ctrl-V</code> pour respectivement couper, copier, coller. Un texte qui est coupé ou copié peut être collé soit dans le même document soit dans tout autre fichier ouvert. En outre, si vous défaites un couper, le texte réapparaît mais le texte qui a été coupé est encore en mémoire et sera collé quand vous appuierez sur 'Coller'.

199

200

201

<tr>

202

<td align="LEFT"><b>TIP:</b> Non seulement vous pouvez copier/coller du texte parmi

203

les documents ouverts dans Bluefish, mais aussi ce texte peut être collé dans n'importe quelle autre application. Essayez de couper/copier du texte de Gnome-edit par exemple, et vous verez que vous pouvez le coller dans Bluefish (et l'inverse bien évidemment). Ou mieux encore, sélectionnez simplement du texte et utilisez le bouton du milieu de la souris, vous pourrez le coller tout de suite!</td>

204

</tr>

205

</table>

206

</td>

207

</tr>

208

</table>

209

</li>

210

211

<li>

212

213

<tr>

214

215

216

217

Les fonctionnalités Rechercher et Remplacer sont tout à fait étendues. A la première entrée vous insérez la chaîne à chercher. Bluefish peut regarder pour vous à 4 endroits:

218

219

<ul>

220

<li>Le document courant, commençant au début</li>

221

222

<li>Le document courant, commençant à la position du curseur</li>

223

224

<li>Le document courant, seulement dans la sélection (seulement s'il y a une sélection)</li>

225

226

<li>Le document courant, dans tous les fichiers ouverts</li>

227

</ul>

228

Une paire d'options sont importantes. Sensible à la casse est assez claire, si votre motif de recherche pourrait faire la différence entre les casses. L'option expressions régulières concordantes est aussi claire mais pas triviale. Nous donnerons quelques exemples d'expression régulière concordantes plus loin, mais aussi vérifiez dans <code>man 7 regex</code> dans votre shell pour une explication complète. Recherches parallèles est seulement utile quand vous remplacezplusieurs fois ou que vous utilisez <code>Editer-->trouver encore</code>. En fait, si vous chercher aa et que votre texte contient aaa, vous pouvez avoir deux résultats dépendant de cette option:

229

230

<ul>

231

<li>Pas de chevauchement: <b>aa</b> est trouvé et rien d'autre</li>

232

<li>Avec chevauchement: <b>aa</b>a est trouvé, et a<b>aa</b> également</li>

233

</ul>

234

</td>

235

</tr>

236

</table>

237

</li>

238

239

<li>

240

241

<tr>

242

243

244

245

Remplacer ajoute une paire d'options supplémentaires. La première de toutes, vous pouvez remplacer trois choses:

246

247

<ul>

248

<li>Texte, inséré dans l'entrée <code>remplacer avec</code></li>

249

250

<li>Majuscule, ainsi la sélection trouvée est remplacée par son équivalent en majuscules</li>

251

252

<li>Minuscule, ainsi la sélection trouvée est remplacée par son équivalent en minuscules</li>

253

</ul>

254

Ces deux dernières ne sont pas très usuelles, mais peuvent le devenir très pratique quand on utilise des expressions régulières. Deux options sont importantes pour le remplacement. <code>Demander avant de remplacer</code> vous permet de vérifier manuellement chaque item que Bluefish veux remplacer. <code>remplacer une fois</code> stoppera le remplacement

255

après avoir trouvé la première occurence. Vous pouvez utiliser <code>Editer->remplacer encore</code> pour remplacer la prochaine.

256

</td>

257

</tr>

258

</table>

259

</li>

260

</ul>

261

262

<div class="note"><b>TIP:</b> Les expressions régulières sont des outils très puissants. Supposons que vous voulez mettre en minuscules toutes les balises HTML dans un document. Sans les expressions régulières vous ne pouvez pas faire un Rechercher et Remplacer. Le motif <code><[^>]*> </code> trouvera tout entre un <code>< </code> et un <code>> </code>, qui <b>ne</b> doit <b>pas</b> avoir un <code>> </code> entre les deux. Maintenant sélectionnez <code>Remplacer par minuscule </code> et c'est fait! Le revers: ce motif simple mettra aussi, bien sûr, en minuscule le <i>alt</i> de la description d'une image etc. Bon ce n'est pas parfait.</div>

263

264

<div class="note"><b>TIP:</b> Avez vous déjà vu un document HTML créé en utilisant Frontpage? Celui-ci parfois inclue des centaines de lignes vides et des espaces. il est possible de chercher et remplacer les nouvelles lignes dans Bluefish. Mais vous avez à les copier et les coller dans l'entrée de la boîte de dialogue chercher. Bon, maintenant sélectionnez deux lignes, collez la sélection dans l'entrée <code>trouver:</code> dans la boîte de dialogue chercher, remplacez la avec une simple ligne, et sélectionnez <code>Recherches parallèles</code>. Toutes les multiples de lignes vides seront réduits en une simple ligne vide.</div>

265

266

<p>Une autre caractéristique intéressante est le <i>menu contextuel</i> qui apparaît si vous appuyez sur le bouton droit de la souris. C'est un moyen rapide pour utiliser quelques fonctions élémentaires, comme 'Couper' et 'Copier'. Les fonctions ici travaillent exactement comme leurs fonctions correspondantes dans les menus et barres d'outils. Jusqu'au dernier item concerné de ce menu contextuel, le 'Editer balise', nous en parlerons <a href="#edtags">plus tard</a>.</p>

267

268

<h3>Ouvrir un fichier (d'un disque ou du web)</h3>

269

270

<p>Pour ouvrir un fichier d'un disque:</p>

271

272

273

<li>Sélectionnez <code>Fichier-->Ouvrir</code> ou appuyez sur <code>Ctrl-O</code>.</li>

274

275

<li>

276

277

<tr>

278

279

280

<td align="LEFT" valign="CENTER">Appuyez sur le second bouton de la barre d'outils principale.</td>

281

</tr>

282

</table>

283

</li>

284

</ul>

285

286

<p>Une boîte de dialogue 'sélectionnez fichiers' apparaîtra, dans laquelle vous pourrez choisir le fichier que vous voulez ouvrir. Une caractéristique très utile est que dans ce menu vous pouvez sélectionner plus d'un fichier à ouvrir en même temps (sauf que tous les fichiers à ouvrir doivent être dans le même répertoire). En fait, nous avons essayé avec succès d'ouvrir 1000 documents en même temps!</p>

287

288

289

<li>Afin de sélectionner une série de fichiers, listés l'un après l'autre, sélectionnez le premier (ou dernier) fichier de la liste 'Fichiers' , et tant que <code>Shift</code> est appuyé, sélectionner le dernier (ou premier) fichier. Puis, tous les fichiers entre le premier et le dernier fichier sélectionné seront marqués en bleu. Si vous appuyez sur 'Valider' alors ils seront ouverts.</li>

290

291

<li>Afin de sélectionner chaque fichier séparément, sélectionnez le premier et puis pour sélectionner tout autre fichier, appuyez dessus avec le bouton de la souris pendant que vous appuyez sur la touche <code>Ctrl</code>.</li>

292

</ul>

293

294

<p>Une autre caractéristique très utile est que vous pouvez ouvrir un fichier directement pris du web. Afin de faire cela, sélectionnez <code>Fichier-->Ouvrir du web</code>. Dans la fenêtre qui apparaît, écrivez l'adresse complète du document (ex. 'http://jmk.simplenet.com/prod/download.htm'). Bien sûr, des adresses comme 'http://jmk.simplenet.com/' sont acceptées et le fichier ouvert sera celui qui serait ouvert si vous aviez sélectionné cette URL d'un navigateur.</p>

295

296

<p>Enfin, une chose que vous pouvez notez est que si vous avez seulement ouvert le programme et s'il ne contyient qu'un fichier sans titre, alrs ce dernier disparaitra quand un fichier sera ouvert et sera remplacé par celui-ci. Cependant, si vous l'avez modifié un peu, il restera.</p>

297

298

<h3>Sauvegarder les fichiers</h3>

299

300

<p>Si vous voulez sauvegarder un fichier, vous devez d'abord sélectionner son nom sur l'onglet des fichiers dans l'aire de rédaction (i.e. il peut être le seul qui apparaît dans la fenêtre principale), puis :</p>

301

302

303

<li>Sélectionnez <code>Fichier-->Sauvegarder</code> ou appuyez sur <code>Ctrl-S</code> pour le sauvegarder avec le nom qu'il avait déjà, ou sélectionnez <code>Fichier-->Sauvegarder Sous</code> pour le sauvegarder avec un nom différent.</li>

304

305

<li>

306

307

<tr>

308

309

310

311

<td align="LEFT" valign="CENTER">Appuyez sur le bouton 'Sauvegarder' ou 'Sauvegarder Sous' de la barre d'outils principale.</td>

312

</tr>

313

</table>

314

</li>

315

</ul>

316

317

<p>En appuyant sur 'Sauvegarder', le fichier qui est actuellement visualisé est sauvegardé. Au cas où le fichier n'est pas sauvegardé sur le disque (i.e. s'il a été ouvert du web ou est un fichier sans titre), 'Sauvegarder' agit comme 'Sauvegarder Sous'. En appuyant sur 'Sauvegarder Sous' vous pouvez le sauvegarder avec un nom différent que celui qu'il a déjà.</p>

318

319

<p>Au cas où vous désirez sauvegarder tous les fichiers ouverts, sélectionnez <code>Fichier-->Tout Sauvegarder</code>. Cela sauvegarde tous les fichiers, examinant chaque fois si le fichier est sans titre ou bien ouvert du web. Alors la boîte de dialogue 'Sauvegarder Sous' apparait pour ces fichiers spécifiques.</p>

320

321

<h3>Fermer un fichier</h3>

322

323

<p>Afin de fermer un fichier, vous devez d'abord le sélectionner ainsi il est visible dans l'aire de rédaction, puis:</p>

324

325

326

<li>Sélectionnez <code>Fichier-->Fermer</code> ou appuyez sur <code>Ctrl-W</code>.</li>

327

328

<li>

329

330

<tr>

331

332

333

<td align="LEFT" valign="CENTER">Appuyez sur le cinquième bouton de la barre d'outils principale.</td>

334

</tr>

335

</table>

336

</li>

337

</ul>

338

339

<p>Au cas où le fichier a été modifié depuis la dernière fois où il fut sauvegardé, alors vous serez interrogé pour le sauvegarder avant de le fermer. Dans cette boîte de dialogue, en sélctionnant 'Fermer', le fichier ferme sans sauvegarde. Si vous sélectionnez 'Sauvegarder', le fichier est d'abord sauvegarder, et si vous appuyez sur 'Annuler' le fichier n'est pas fermé du tout.</p>

340

341

<p>Si vous voulez fermer tous les fichiers qui sont ouverts, sélectionnez <code>Fichier-->Tout fermer</code>. Au cas où ils ne sont pas sauvegardés, la boîte de dialogue apparaitra.</p>

342

343

<h2>Quitter Bluefish</h2>

344

345

<p>Afin de fermer Bluefish, vous pouvez soit fermer la fenêtre principale, soit sélectionnez <code>Fichier-->Quitter</code>, qui a pour raccourci <code>Ctrl-Q</code>.</p>

346

347

<p>Au cas où il y aurait des fichiers non sauvegardés, avant que l'application ferme, une boîte de dialogue similaire

348

à celle expliqué au dessus apparaîtra.</p>

349

350

<h2>Travailler avec HTML</h2>

351

352

<p>Ainsi, nous avons vu comment vous pouvez créer, ouvrir, éditer et sauvegarder un fichier. Bien que cela soit suffisant pour commencer à travailler, n'oubliez pas que c'est un éditeur HTML, pas un simple éditeur de texte. Cela signifie qu'une attention particulière a été donné pour utiliser HTML, ainsi quelques outils particuliers (que vous ne trouverez pas dans un simple éditeur de texte) ont été implémanté pour vous aider à utiliser les balises et organiser vos documents.</p>

353

354

<h3>Balises et boîtes de Dialogue</h3>

355

356

<p>Vous pouvez avoir noté deux menus, <code>Balises</code> et <code>Dialogues</code>. La plupart des fonctions de ces menus peuvent aussi être trouvé dans la barre d'outils HTML.</p>

357

358

<p>Le menu <code>Balises</code> contient quelques balises HTML, la plupart d'entre elles n'ont pas de paramètres. Ces balises incluent les balises de formatage de texte (Gras, Italique, Barré, etc.), Titres, listes, etc. Aussi, prêter attention au menu <code>Balises-->Spécial</code> qui contient une liste de caractères spéciaux.</p>

359

360

<p>Essayons d'appuyer sur un sous-menu (soyez sûr qu'aucun texte n'est sélectionné). La balise décrite apparaît et le curseur est placé entre la balise de début et (<>) celle de fin (</>) pour que vous puissiez écrire le texte qui appartient à cette balise.</p>

361

362

<p>Une autre méthode intéressante de ces fonctions est avec du texte que vous avez sélectionné. Par exemple, écrivez 'Hello World' et puis sélectionnez le. Appuyez sur <code>Balises-->Titres-->H1</code> et le texte sera encadré par une balise H1. C'est très utile puisque vous pouvez changer rapidement le formatage d'un texte déjà écrit (ex. faire qu'il soit en gras ou italique).</p>

363

364

<p>Le <code>balises-->remplacer caractères ascii</code> remplacera toutes les occurences des caractères HTML spéciaux comme <>&" par leurs entités HTML &lt;&gt;&amp;&quot; dans la sélection courante.</p>

365

366

<p>Le menu <code>Dialogues</code> a presque le même usage, mais au lieu de simplement écrire le texte, une fenêtre est affichée, dans laquelle vous pouvez placer les paramètres des balises. Si vous laissez un champ blanc, alors ces paramètres n'apparaîtront pas dans le texte.</p>

367

368

<h3>Balises d'édition</h3>

369

370

<p>Rappelez vous que nous avons parlé du menu contextuel qui apparaît quand nous appuyons sur le bouton droit de la souris sur l'aire de rédaction? Le dernier item était <i>Editer balise</i>. Le temps est venu d'expliquer ce qu'il fait.</p>

371

372

<p>Comme vous l'avez vu, avec le menu <code>Dialogues</code> vous pouvez facilement insérer des balises paramétrées. Une fois qu'elles sont insérées, vous pouvez toujours les éditer manuellement, en éditant simplement le texte. Mais, comme vous l'avez vu, c'est plus facile d'ajuster les paramètres d'une balise à travers une boîte de dialogues, plutôt que d'écrire le texte. C'est ici qu'intervient 'Editer balise'.</p>

373

374

<p>Du menu <code>Dialogues</code>, sélectionnez une balise (ex. <code>Dialogues-->Tableau-->Tableau</code>, ajustez ses paramètres et insérez la balise. Puis, placez le curseur sur la balise, appuyez sur le bouton droit de la souris et sélectionnez 'Editer balise'. Comme vous le verrez, la même fenêtre dans laquelle vous avez créé la balise apparaît (cette fois, tout les champs ne sont pas blanc, mais à la place ils sont définis pour s'adapter aux paramètres de la balise). Maintenant, vous pouvez éditer les balises à travers ce menu plus facilement et plus automatiquement.</p>

375

376

<p>Notez que cela fonctionne seulement avec les balises qui ont été insérées du menu <code>Dialogues</code> ou des boutons correspondant dans la barre d'outils HTML.</p>

377

378

<h3>Surlignage de la Syntaxe</h3>

379

380

<p>Cette caracatéristique sera expliquée en détail dans le second chapitre, mais voici un synopsis de son utilisation.</p>

381

382

<p>Afin d'identifier les balises et de les distinguer du texte normal, les balises peuvent être <i>surlignées</i> (actuellement, le texte est coloré différemment du texte normal afin d'être distingué, vu qu'un vrai surligneur change la couleur du fond).</p>

383

384

<p>Pour définir cette caractéristique, cochez <code>Visualiser-->Surligner la syntaxe</code>. Chaque fois que vous voudrez que les balises soient colorées, sélectionnez <code>Visualiser-->Rafraîchir le surlignage</code>, raccourcis par défaut F5, ou cela peut être fait continuellement si vous ajustez le menu Préférences, comme vous le verrez par la suite.</p>

385

386

<h2>Projets</h2>

387

388

<p>Les projets dans Bluefish vous rappeleront quelques histoires. Si vous avez un couple de fichiers ouverts qui sont en relation, choisissez <code>Projet->ajouter tous les documents ouverts</code>. Maintenant sauvegardez le projet (habituellement situé dans <i>~/.bluefish/projects/</i>). Toute couleur que vous utilisez, ou toute police, toutes cibles, url etc. sont racordés au projet, et si vous sauvegardez le projet, elles seront sauvegardées également. Les valeurs peuvent être édité en utilisant <code>Projet->Editer</code>, le menu contient <code>fichiers</code> et

389

<code>listes</code>, où vous pouvez accéder au contenu d'un projet.</p>

390

391

<p>Quand vous ouvrez un projet, tous les fichiers de ce projet sont ouverts. Si vous prévisualisez un fichier qui se trouve dans le projet, le <i>basedir</i> est retiré du nom de fichier et est replacé dans le <i>webdir</i>. Ainsi /home/olivier/public_html/index.html peut être replacé dans http://localhost/~olivier/index.html si vous le voulez. C'est très utile quand vous programmez des sites web dynamiques (PHP, SSI, RXML) sur un serveur local.</p>

392

393

<div class="navbox"> <a href="preface.html">préc</a> | <a href="index.html">sommaire</a> | <a href="chapter2.html">suiv</a>

394

</div>

395

</body>

396

</html>

b'\\ No newline at end of file'

Older »