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.
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.
Après l'installation, si vous n'avez pas changé le répertoire d'installation, le fichier exécutable doit avoir été placé dans /usr/local/bin/
. Ainsi tout ce que vous avez à faire pour lancer le programme est de taper : blashyrkh:~# bluefish
bluefish
un message d'erreur apparaîtra. Afin d'outrepasser ce point de sécurité et de lancer le programme en root, tapez bluefish -s
.
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).
Les options de lignes de commande peuvent être trouvées en utilisant -h:
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
bluefish `find -name '*.php'`
. Ou vous voulez ouvrir tous les fichiers html de votre machine? (Attention! environ 1100 sur une machine Debian standard!) Faites bluefish `find / -name '*.html'`
.Regardez man find et man bash pour plus d'info.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.
En haut de l'écran se trouve le menu, où sont répertoriées toutes les fonctions de Bluefish. Les fonctions sont regroupées selon leur usage, ainsi le menu Fichier contient des fonctions qui concernent les fichiers, Editer concerne les fonctions principales d'édition (Couper, Copier, Coller, etc.), 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 raccourci qui sera expliqué plus loin.
Une fonction trè utile fournit par GTK+ est tearoffs. Afin de voir ce que c'est, sélectionnez Fichier 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.
Ainsi, ce qu'il fait actuellement est de permettre au menu de flotter 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. |
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 Fichier-->Nouveau
(qui a le texte Ctrl-N sur sa droite) vous pouvez appuyer sur les touches Control et 'N' ensemble.
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é.
Au cas où vous voulez effacer un raccourci, placez la souris sur le sous-menu qui a le raccourci et appuyez sur Retour en arrière
.
Ctrl-Alt-G
. 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.Depuis que les raccourcis sont utilisés très fréquemment, vous pouriez vouloir sauvegarder les changements que vous avez fait. Sélectionner Options-->Sauvegarder touches raccourcis
pour faire cela. Cela sauvegardera tous les raccourcis que vous avez défini pour le Menu personnalisé (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.
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.
En dessous du menu il y a 3 barres d'outils (dans l'écran au dessus, seul deux d'entre elles apparaissent); la barre d'outils principale, la barre d'outils HTML et le menu personnalisé.
Options-->Visualiser barre d'outils principale
.Options-->Visualiser la barre d'outils HTML
.Options->visualiser barre d'outils personnalisée
. A partir de Bluefish 0.5 l'éditeur de menu personnalisé est étendu, pour un bon exemple utiliser l'option Menu personnalisé-->Redéfinir menu personnalisé
. L'entrée pour une option du menu personnalisé consiste en un chemin de menu délimité par des slashs, aussi le chemin Options-->Visualiser barre d'outils personnalisée
sera /Options/View custom menu dans l'éditeur. L'entrée consiste également en un mot avant et un mot après . Quand vous sélectionnez un morceau de texte et choisissez l'option de menu le mot avant sera inséré avant la sélection, et le mot après 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 nombre de variables, 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.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. |
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.
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.
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 bulles d'aide).
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.
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.
Le menu onglets montre les fichiers qui ont été ouverts. Dans l'image au dessus, on a deux fichiers : preface.html
, un fichier que nous avons ouvert du disque et Sans titre
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 Fichier-->Nouveau
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 F1
pour sélectionner le prochain document et F2
pour sélectionner le document précedent (Ces raccourcis sont dans le menu Visualiser
).
L'apparence de la zone d'édition peut être changée dans Options--> Préférences
comme nous le verrons plus loin.
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.
Maintenant que nous avons expliqué les bases sur l'interface, nous allons continuer avec l'utilisation de Bluefish.
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 Départ rapide...).
Pour créer un nouveau fichier sans titre, vide, il y a 3 façons :
Fichier-->Nouveau
ou appuyez sur Ctrl-N
.Appuyez sur le premier bouton de la barre d'outils principale. |
Comme vous le verrez, un nouvel onglet apparaîtra dans l'aire de rédaction et le texte sera complètement vide.
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.
Dialogues-->Général-->Départ rapide
ou appuyez sur ALt-Q
.De l'onglet "Barre rapide" dans la barre d'outils HTML, appuyez sur le premier bouton à gauche. |
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.
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 Dialogues
) 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.
Par défaut, le retour de mot est utilisé (vous pouvez le désactiver dans Options-->Préférences
). 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.
Je crois qu'il est temps de s'intéresser au menu Editer
, car il contient quelques fonctions très intéressantes.
|
Au cas où vous avez fait une erreur de saisie ou
si vous voulez effacer la dernière chose que vous avez écrite, vous pouvez annuler le changement en sélectionnant Editer-->Défaire , en appuyant sur Ctrl-Z 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 Editer-->Refaire , en appuyant sur Ctrl-R ou en le sélectionnant sur la barre d'outils principale. |
|
Les fonctions très connues - couper, copier, coller - ne pouvaient pas être oublié, bien sûr. Elles sont également dans le menu Editer , comme d'habitude et leurs raccourcis sont Ctrl-X, Ctrl-C, Ctrl-V 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'.
|
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: |
Remplacer ajoute une paire d'options supplémentaires. La première de toutes, vous pouvez remplacer trois choses:
Demander avant de remplacer vous permet de vérifier manuellement chaque item que Bluefish veux remplacer. remplacer une fois stoppera le remplacement
après avoir trouvé la première occurence. Vous pouvez utiliser Editer->remplacer encore pour remplacer la prochaine.
|
<[^>]*>
trouvera tout entre un <
et un >
, qui ne doit pas avoir un >
entre les deux. Maintenant sélectionnez Remplacer par minuscule
et c'est fait! Le revers: ce motif simple mettra aussi, bien sûr, en minuscule le alt de la description d'une image etc. Bon ce n'est pas parfait.trouver:
dans la boîte de dialogue chercher, remplacez la avec une simple ligne, et sélectionnez Recherches parallèles
. Toutes les multiples de lignes vides seront réduits en une simple ligne vide.Une autre caractéristique intéressante est le menu contextuel 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 plus tard.
Pour ouvrir un fichier d'un disque:
Fichier-->Ouvrir
ou appuyez sur Ctrl-O
.Appuyez sur le second bouton de la barre d'outils principale. |
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!
Shift
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.Ctrl
.Une autre caractéristique très utile est que vous pouvez ouvrir un fichier directement pris du web. Afin de faire cela, sélectionnez Fichier-->Ouvrir du web
. 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.
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.
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 :
Fichier-->Sauvegarder
ou appuyez sur Ctrl-S
pour le sauvegarder avec le nom qu'il avait déjà, ou sélectionnez Fichier-->Sauvegarder Sous
pour le sauvegarder avec un nom différent. |
Appuyez sur le bouton 'Sauvegarder' ou 'Sauvegarder Sous' de la barre d'outils principale. |
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à.
Au cas où vous désirez sauvegarder tous les fichiers ouverts, sélectionnez Fichier-->Tout Sauvegarder
. 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.
Afin de fermer un fichier, vous devez d'abord le sélectionner ainsi il est visible dans l'aire de rédaction, puis:
Fichier-->Fermer
ou appuyez sur Ctrl-W
.Appuyez sur le cinquième bouton de la barre d'outils principale. |
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.
Si vous voulez fermer tous les fichiers qui sont ouverts, sélectionnez Fichier-->Tout fermer
. Au cas où ils ne sont pas sauvegardés, la boîte de dialogue apparaitra.
Afin de fermer Bluefish, vous pouvez soit fermer la fenêtre principale, soit sélectionnez Fichier-->Quitter
, qui a pour raccourci Ctrl-Q
.
Au cas où il y aurait des fichiers non sauvegardés, avant que l'application ferme, une boîte de dialogue similaire à celle expliqué au dessus apparaîtra.
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.
Vous pouvez avoir noté deux menus, Balises
et Dialogues
. La plupart des fonctions de ces menus peuvent aussi être trouvé dans la barre d'outils HTML.
Le menu Balises
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 Balises-->Spécial
qui contient une liste de caractères spéciaux.
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.
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 Balises-->Titres-->H1
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).
Le balises-->remplacer caractères ascii
remplacera toutes les occurences des caractères HTML spéciaux comme <>&" par leurs entités HTML <>&" dans la sélection courante.
Le menu Dialogues
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.
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 Editer balise. Le temps est venu d'expliquer ce qu'il fait.
Comme vous l'avez vu, avec le menu Dialogues
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'.
Du menu Dialogues
, sélectionnez une balise (ex. Dialogues-->Tableau-->Tableau
, 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.
Notez que cela fonctionne seulement avec les balises qui ont été insérées du menu Dialogues
ou des boutons correspondant dans la barre d'outils HTML.
Cette caracatéristique sera expliquée en détail dans le second chapitre, mais voici un synopsis de son utilisation.
Afin d'identifier les balises et de les distinguer du texte normal, les balises peuvent être surlignées (actuellement, le texte est coloré différemment du texte normal afin d'être distingué, vu qu'un vrai surligneur change la couleur du fond).
Pour définir cette caractéristique, cochez Visualiser-->Surligner la syntaxe
. Chaque fois que vous voudrez que les balises soient colorées, sélectionnez Visualiser-->Rafraîchir le surlignage
, 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.
Les projets dans Bluefish vous rappeleront quelques histoires. Si vous avez un couple de fichiers ouverts qui sont en relation, choisissez Projet->ajouter tous les documents ouverts
. Maintenant sauvegardez le projet (habituellement situé dans ~/.bluefish/projects/). 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 Projet->Editer
, le menu contient fichiers
et
listes
, où vous pouvez accéder au contenu d'un projet.
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 basedir est retiré du nom de fichier et est replacé dans le webdir. 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.