Tutoriel de l'éditeur HTML de texte Bluefish

click fraud protection

Le poisson bleu éditeur de code est une application utilisée pour développer des pages Web et des scripts. Ce n'est pas un éditeur WYSIWYG. Bluefish est un outil utilisé pour modifier le code à partir duquel une page Web ou un script est créé. Il est destiné aux programmeurs qui ont des connaissances en écriture HTML et CSS code et a des modes pour fonctionner avec les langages de script les plus courants comme PHP et Javascript, ainsi que de nombreux autres. L'objectif principal de l'éditeur Bluefish est de faciliter le codage et de réduire les erreurs. Bluefish est gratuit et logiciels open source et des versions sont disponibles pour Windows, Mac OSX, Linux et diverses autres plates-formes de type Unix. La version que j'utilise dans ce tutoriel est Bluefish sous Windows 7.

01

de 04

L'interface Bluefish

L'interface Bluefish

Capture d'écran avec l'aimable autorisation de Jon Morin

L'interface Bluefish est divisée en plusieurs sections. La plus grande section est le volet d'édition et c'est là que vous pouvez directement éditer votre code. Sur le côté gauche du volet d'édition se trouve le panneau latéral, qui remplit les mêmes fonctions qu'un gestionnaire de fichiers, vous permettant de choisir les fichiers sur lesquels vous souhaitez travailler et de renommer ou de supprimer des fichiers.

instagram viewer

La section d'en-tête en haut des fenêtres Bluefish contient plusieurs barres d'outils, qui peuvent être affichées ou masquées via le menu Affichage.

Les barres d'outils sont la barre d'outils principale, qui contient des boutons pour exécuter des fonctions courantes comme enregistrer, copier et coller, rechercher et remplacer, et certaines options d'indentation du code. Vous remarquerez qu'il n'y a pas de boutons de mise en forme tels que gras ou souligné.

C'est parce que Bluefish ne formate pas le code, ce n'est qu'un éditeur. Sous la barre d'outils principale se trouve le HTML barre d'outils et le menu des extraits de code. Ces menus contiennent des boutons et des sous-menus que vous pouvez utiliser pour insérer automatiquement du code pour la plupart des éléments et fonctions du langage.

02

de 04

Utilisation de la barre d'outils HTML dans Bluefish

Utilisation de la barre d'outils HTML dans Bluefish

Capture d'écran avec l'aimable autorisation de Jon Morin

La barre d'outils HTML de Bluefish est organisée par onglets qui séparent les outils par catégorie. Les onglets sont:

  • Barre rapide - vous pouvez épingler d'autres outils sur cet onglet pour les éléments que vous utilisez fréquemment.
  • HTML5 - vous donne accès aux balises et éléments communs en HTML 5.
  • Standard - les options de formatage HTML courantes sont accessibles sur cet onglet.
  • Mise en page - les options de formatage moins courantes se trouvent ici.
  • les tables - diverses fonctions de génération de table, dont un assistant de table.
  • Lister - des outils pour générer des listes ordonnées, non ordonnées et de définition.
  • CSS - des feuilles de style peuvent être créées à partir de cet onglet ainsi que du code de mise en page.
  • Formes - les éléments de formulaire les plus courants peuvent être insérés à partir de cet onglet.
  • Polices - cet onglet a des raccourcis pour travailler avec des polices en HTML et CSS.
  • Cadres - les fonctions les plus courantes pour travailler avec des formulaires.

En cliquant sur chaque onglet, les boutons relatifs à la catégorie concernée apparaîtront dans la barre d'outils sous les onglets.

03

de 04

Utilisation du menu Snippets dans Bluefish

Utilisation du menu Snippets dans Bluefish

Capture d'écran avec l'aimable autorisation de Jon Morin

Sous la barre d'outils HTML se trouve un menu appelé barre d'extraits. Cette barre de menus comporte des sous-menus relatifs à une variété de langages de programmation. Chaque élément du menu insère du code couramment utilisé, comme des doctypes HTML et des méta-informations par exemple.

Certains éléments de menu sont flexibles et génèrent du code en fonction de la balise que vous souhaitez utiliser. Par exemple, si vous souhaitez ajouter un bloc de texte préformaté à une page Web, vous pouvez cliquer sur le menu HTML dans la barre d'extraits et choisir l'élément de menu « toute balise appariée ».

Cliquer sur cet élément ouvre une boîte de dialogue qui vous invite à saisir la balise que vous souhaitez utiliser. Vous pouvez saisir « pre » (sans les chevrons) et Bluefish insère une balise « pré » d'ouverture et de fermeture dans le document:

.

04

de 04

Autres caractéristiques de Bluefish

Autres caractéristiques de Bluefish

Capture d'écran avec l'aimable autorisation de Jon Morin

Alors que Bluefish n'est pas un Éditeur WYSIWYG, il a la capacité de vous permettre de prévisualiser votre code dans n'importe quel navigateur que vous avez installé sur votre ordinateur. Il prend également en charge la saisie semi-automatique du code, la mise en évidence de la syntaxe, les outils de débogage, une boîte de sortie de script, des plugins et des modèles qui peuvent vous aider à créer des documents sur lesquels vous travaillez fréquemment avec.

instagram story viewer