Tutorial do editor de HTML de texto Bluefish

click fraud protection

The Bluefish editor de código é um aplicativo usado para desenvolver páginas da web e scripts. Não é um editor WYSIWYG. Bluefish é uma ferramenta usada para editar o código a partir do qual uma página da web ou script é criado. Destina-se a programadores que têm conhecimento de escrita em HTML e CSS código e tem modos para trabalhar com as linguagens de script mais comuns, como PHP e Javascript, além de muitas outras. O principal objetivo do editor Bluefish é facilitar a codificação e reduzir os erros. Bluefish é grátis e software livre e as versões estão disponíveis para Windows, Mac OSX, Linux e várias outras plataformas do tipo Unix. A versão que estou usando neste tutorial é Bluefish no Windows 7.

01

de 04

A interface do Bluefish

A interface do Bluefish

Captura de tela cortesia de Jon Morin

A interface do Bluefish é dividida em várias seções. A maior seção é o painel de edição e é aqui que você pode editar diretamente seu código. No lado esquerdo do painel de edição está o painel lateral, que executa as mesmas funções de um gerenciador de arquivos, permitindo que você escolha os arquivos com os quais deseja trabalhar e renomeie ou exclua arquivos.

instagram viewer

A seção de cabeçalho na parte superior das janelas do Bluefish contém várias barras de ferramentas, que podem ser mostradas ou ocultas por meio do menu Exibir.

As barras de ferramentas são a barra de ferramentas principal, que contém botões para executar funções comuns como salvar, copiar e colar, pesquisar e substituir e algumas opções de recuo de código. Você notará que não há botões de formatação, como negrito ou sublinhado.

Isso porque o Bluefish não formata o código, é apenas um editor. Abaixo da barra de ferramentas principal está o HTML barra de ferramentas e o menu de trechos. Esses menus contêm botões e submenus que você pode usar para inserir códigos automaticamente para a maioria dos elementos e funções da linguagem.

02

de 04

Usando a barra de ferramentas HTML no Bluefish

Usando a barra de ferramentas HTML no Bluefish

Captura de tela cortesia de Jon Morin

A barra de ferramentas HTML no Bluefish é organizada por guias que separam as ferramentas por categoria. As guias são:

  • Barra Rápida - você pode fixar outras ferramentas nesta guia para itens que usa com frequência.
  • HTML 5 - dá acesso a tags e elementos comuns em HTML 5.
  • Padrão - opções comuns de formatação HTML são acessadas nesta guia.
  • Formatação - opções de formatação menos comuns são encontradas aqui.
  • Mesas - várias funções de geração de tabela, incluindo um assistente de tabela.
  • Lista - ferramentas para gerar listas ordenadas, não ordenadas e de definição.
  • CSS - as folhas de estilo podem ser criadas a partir desta guia, bem como o código de layout.
  • Formulários - os elementos de formulário mais comuns podem ser inseridos nesta guia.
  • Fontes - esta guia possui atalhos para trabalhar com fontes em HTML e CSS.
  • Molduras - as funções mais comuns para trabalhar com formulários.

Clicar em cada guia fará com que os botões relacionados à categoria relevante apareçam na barra de ferramentas abaixo das guias.

03

de 04

Usando o menu Snippets no Bluefish

Usando o menu Snippets no Bluefish

Captura de tela cortesia de Jon Morin

Abaixo da barra de ferramentas HTML está um menu chamado barra de snippets. Esta barra de menu possui submenus relacionados a uma variedade de linguagens de programação. Cada item do menu insere o código comumente usado, como doctypes HTML e metainformações, por exemplo.

Alguns dos itens de menu são flexíveis e geram código dependendo da tag que você deseja usar. Por exemplo, se você deseja adicionar um bloco de texto pré-formatado a uma página da web, você pode clicar no menu HTML na barra de snippets e escolher o item de menu “qualquer tag emparelhada”.

Clicar neste item abre uma caixa de diálogo que solicita que você insira a tag que deseja usar. Você pode inserir "pré" (sem os colchetes angulares) e o Bluefish insere uma tag "pré" de abertura e fechamento no documento:

.

04

de 04

Outras características do Bluefish

Outras características do Bluefish

Captura de tela cortesia de Jon Morin

Embora Bluefish não seja um Editor WYSIWYG, ele permite que você visualize seu código em qualquer navegador instalado no computador. Ele também oferece suporte ao preenchimento automático de código, realce de sintaxe, ferramentas de depuração, uma caixa de saída de script, plug-ins e modelos que podem ajudá-lo a começar a criar documentos que você trabalha com frequência com.

instagram story viewer