Tutorial sull'editor HTML di testo Bluefish

click fraud protection

il pesce azzurro editor di codice è un'applicazione utilizzata per sviluppare pagine web e script. Non è un editor WYSIWYG. Bluefish è uno strumento utilizzato per modificare il codice da cui viene creata una pagina web o uno script. È pensato per i programmatori che hanno conoscenza della scrittura di HTML e CSS codice e dispone di modalità per lavorare con i linguaggi di scripting più comuni come PHP e Javascript, oltre a molti altri. Lo scopo principale dell'editor Bluefish è rendere più semplice la codifica e ridurre gli errori. Bluefish è gratis e software open source e le versioni sono disponibili per Windows, Mac OSX, Linux e varie altre piattaforme simili a Unix. La versione che sto usando in questo tutorial è Bluefish su Windows 7.

01

di 04

L'interfaccia Bluefish

L'interfaccia Bluefish

Screenshot per gentile concessione di Jon Morin

L'interfaccia di Bluefish è suddivisa in diverse sezioni. La sezione più grande è il riquadro di modifica ed è qui che puoi modificare direttamente il tuo codice. Sul lato sinistro del riquadro di modifica c'è il pannello laterale, che svolge le stesse funzioni di un file manager, permettendoti di scegliere i file su cui vuoi lavorare e rinominare o eliminare i file.

instagram viewer

La sezione dell'intestazione nella parte superiore delle finestre di Bluefish contiene diverse barre degli strumenti, che possono essere mostrate o nascoste tramite il menu Visualizza.

Le barre degli strumenti sono la barra degli strumenti principale, che contiene pulsanti per eseguire funzioni comuni come salvare, copiare e incollare, cercare e sostituire e alcune opzioni di indentazione del codice. Noterai che non ci sono pulsanti di formattazione come grassetto o sottolineato.

Questo perché Bluefish non formatta il codice, è solo un editor. Sotto la barra degli strumenti principale c'è il HTML barra degli strumenti e il menu dei frammenti. Questi menu contengono pulsanti e sottomenu che è possibile utilizzare per inserire automaticamente il codice per la maggior parte degli elementi e delle funzioni del linguaggio.

02

di 04

Utilizzo della barra degli strumenti HTML in Bluefish

Utilizzo della barra degli strumenti HTML in Bluefish

Screenshot per gentile concessione di Jon Morin

La barra degli strumenti HTML in Bluefish è organizzata in schede che separano gli strumenti per categoria. Le schede sono:

  • Barra veloce - puoi aggiungere altri strumenti a questa scheda per gli elementi che usi di frequente.
  • HTML 5 - ti dà accesso a tag ed elementi comuni in HTML 5.
  • Standard - in questa scheda è possibile accedere alle opzioni di formattazione HTML comuni.
  • Formattazione - le opzioni di formattazione meno comuni si trovano qui.
  • Tabelle - varie funzioni di generazione di tabelle, inclusa una procedura guidata di tabella.
  • Elenco - strumenti per la generazione di elenchi ordinati, non ordinati e di definizione.
  • CSS - i fogli di stile possono essere creati da questa scheda così come il codice di layout.
  • Forme - gli elementi del modulo più comuni possono essere inseriti da questa scheda.
  • caratteri - questa scheda ha scorciatoie per lavorare con i caratteri in HTML e CSS.
  • Cornici - le funzioni più comuni per lavorare con i moduli.

Facendo clic su ciascuna scheda verranno visualizzati i pulsanti relativi alla categoria pertinente nella barra degli strumenti sotto le schede.

03

di 04

Utilizzo del menu Snippet in Bluefish

Utilizzo del menu Snippet in Bluefish

Screenshot per gentile concessione di Jon Morin

Sotto la barra degli strumenti HTML c'è un menu chiamato barra dei frammenti. Questa barra dei menu dispone di sottomenu relativi a una varietà di linguaggi di programmazione. Ogni voce del menu inserisce codice di uso comune, come ad esempio i doctype HTML e le meta informazioni.

Alcune voci di menu sono flessibili e generano codice a seconda del tag che desideri utilizzare. Ad esempio, se desideri aggiungere un blocco di testo preformattato a una pagina web, puoi fare clic sul menu HTML nella barra dei frammenti e scegliere la voce di menu "qualsiasi tag associato".

Facendo clic su questo elemento si apre una finestra di dialogo che richiede di inserire il tag che si desidera utilizzare. Puoi inserire "pre" (senza le parentesi angolari) e Bluefish inserisce un tag "pre" di apertura e chiusura nel documento:

.

04

di 04

Altre caratteristiche del pesce azzurro

Altre caratteristiche del pesce azzurro

Screenshot per gentile concessione di Jon Morin

Mentre Bluefish non è un Editor WYSIWYG, ha la capacità di farti visualizzare in anteprima il codice in qualsiasi browser installato sul tuo computer. Supporta anche il completamento automatico del codice, l'evidenziazione della sintassi, gli strumenti di debug, una casella di output dello script, plug-in e modelli che possono darti un punto di partenza per la creazione di documenti su cui lavori di frequente con.

instagram story viewer