Portal iMastersPortal iMasters
Assine a newsletterNewsletter
DevSecOpsARTIGO

Personalizando a barra de ferramentas INSERT do DW8

Mauricio Maujor Samy SilvaAutor
10 de abril de 2007 às 10:00
6 min de leitura

Barras de ferramentas no DW

As barras de ferramentas no DW têm por finalidade inserir elementos na página Web em desenvolvimento, gerando o código HTML correspondente.

Barras de ferramenta inserem, por exemplo: imagens, tabelas, mídia, cabeçalhos, formulários e uma grande quantidade de outros elementos de uso comum nos mais variados tipos de documento.

As cinco barras de ferramentas padrão no DW8 são:

  1. INSERT
  2. Style Rendering
  3. Document
  4. Standard
  5. Coding

Para mostrar/ocultar as barras de ferramentas marque/desmarque as cinco opções conforme descritas acima, no menu: View » Toolbars .

Veja a seguir um screenshot mostrando todas as 5 barras de ferramentas habilitadas e a barra Insert em destaque.

Figura1Figura1

Dicas:

  1. Você pode mudar individualmente a posição das quatro barras de ferramentas horizontais, alterando a ordem de empilhamento delas ou colocando-as lado a lado na largura da interface. Para movimentar as barras, posicione o ponteiro do mouse sobre as duas linhas paralelas pontilhadas existentes à esquerda da barra e arraste para cima e para baixo ou lateralmente, na área das barras;
  2. Se você clicar e arrastar uma barra para fora da área de barras ela será posicionada na tela, no local onde você soltar o mouse;
  3. Se uma das barras estiver visível e você clicar com o botão direito do mouse em uma área da barra abre um menu pop up para mostrar/ocultar as barras;
  4. Se você clicar com o botão direito do mouse sobre a palavra Insert na barra Insert e escolher Show as menu as abas desaparecem e permanecem os ícones;
  5. Se você estiver no modo menu conforme acima, clique no botão da barra à esquerda e escolha Show as tab para voltar ao modo abas. (é neste modo que desenvolverei está matéria)

A barra de ferramentas INSERT

O foco desta matéria é a barra de ferramentas INSERT.

Como você pode observar na figura anterior, existem 8 (oito) abas na barra de ferramentas INSERT a saber:

  1. Common
  2. Layout
  3. Forms
  4. Text
  5. HTML
  6. Application
  7. Flash elements
  8. Favorites

Nesta matéria mostrarei como criar e nomear uma nova aba, criar os ícones de inserção e cuja finalidade será a de inserir códigos HTML personalizados.

Criaremos uma aba denominada Maujor destinada a inserir fragmentos de códigos diversos e para efeitos de ilustração vamos tomar como exemplo a inserção do fragmento de código destinado a inserção do DOCTYPE e da seção HEAD de um documento novo conforme mostrado a seguir: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br" >
<head>
<title>Construção de Sites</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="NONE" />
<meta name="author" content="Mauricio Samy Silva" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="/favicon1.ico" type="image/x-icon" />
<style type="text/css">
@import url("estilos/comum.css");
</style>
<link href="estilos/template.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 6]>
<link href="estilos/ie-hack.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

Nota: Existem outros métodos para inserção deste tipo específico de código. Talvez fosse mais prático criar um arquivo .DWT que já abriria o novo documento com o código proposto.

Contudo, como a finalidade da matéria é mostrar a criação da aba personalizada e não discutir métodos, usaremos o código proposto. Sabendo como fazer, voce usa o código que bem entender, como por exemplo um fragmento de código para inserir um arquivo FLASH ou seja lá o que for.

Criando a nova aba no arquivo XML correspondente

O arquivo do DW que cria as barras de ferramentas, na maioria das instalações, denomina-se insertbar.xml e está localizado em:

C:\Arquivos de programas\Macromedia\Dreamweaver 8\Configuration\Objects

  1. Abra o arquivo insertbar.xml no DW ;
  2. Salve o arquivo como insertbarBACKUP.xml para se caso algo dê errado você poder restabelecer as configurações originais;
  3. Feche o arquivo;
  4. Abra o arquivo insertbar.xml;
  5. Tecle Ctrl + End para ir para o fim do arquivo;
  6. Insira o código mostrado em destaque na figura abaixo, imediatamente antes da TAG de fechamento do documento </insertbar> e salve o arquivo.

Figura 2Figura 2

E a seguir o código para você copiar e colar.

Substitua a palavra Maujor no código tanto em id como em folder pelo nome que você quiser nomear sua aba personalizada. 

	<category id="DW_Insertbar_Maujor" folder="Maujor">
	</category>

Agora você irá criar uma pasta (folder) onde serão guardados os códigos e os ícones personalizados da sua nova aba.

  1. Crie em C:\Arquivos de programas\Macromedia\Dreamweaver 8\Configuration\Objects (ou seja, no mesmo caminho onde se encontra o arquivo insert.xml que você acabou de modificar, uma nova pasta com o mesmo nome que você adotou para o atributo folder no código do arquivo insertbar.xml. No nosso caso Maujor.

Observe a seguir:

Figura 3Figura 3

A seguir feche o DW e abra novamente para carregar as modificaçõess que você acaba de fazer.

Observe na barra de ferramentas Insert que uma nova aba foi criada. Veja figura abaixo:

Figura 4Figura 4

Inserindo o código

Bem, acabamos de criar a nova aba mas ela não serve absolutamente para nada até agora.

Precisamos povar nossa aba com os códigos personalizados. Faça o seguinte:

  1. Abra um novo documento e na janela de código delete tudo que o DW colocou lá;
  2. Copie e cole o fragmento de código que você personalizou. No nosso caso aquele código lá em cima nesta matéria, destinado a inserção do DOCTYPE e da seção HEAD de um documento novo;
  3. Salve dentro da pasta Maujor que você criou, este arquivo, com um nome a sua escolha e extensão html, por exemplo: doctype_head.html;
  4. Feche o DW e abra novamente para carregar a modificação que você acabou de fazer;
  5. Observe na barra de ferramentas Insert que apareceu um ícone com um ponto de interrogação, indicando que agora há alguma coisa a inserir nesta barra. A barra já é funcional. Veja figura abaixo:

Figura 5Figura 5

Vamos testar o funcionamento da nossa criação:

  1. Abra um novo documento e na janela de código delete tudo o que o DW colocou lá;
  2. Posicione o cursor do mouse na linha 1 do documento e clique no ícone do ponto de interrogação recém criado;
  3. Bingo! O código que você salvou como doctype_head.html foi inserido no documento;
  4. Se não ‘aparecer’ o código, confira os passos feitos até agora para localizar o engano ou refaça tudo desde o início. 🙁

Personalizando o ícone

Para finalizar vamos criar o ícone que nos permitirá identificar o código criado, pois com certeza você irá criar muitos diferentes códigos para suas necessidades e imagine como saber quem é quem no meio de inúmeros ícones iguais com o ponto de interrogação !

  1. Abra o editor gráfico de sua preferência e crie seu ícone nas dimensões de 18 x 18px;
  2. Salve o ícone com a extensão GIF ou PNG32 e com o mesmo nome do arquivo HTML que contém o código (no nosso caso doctype_head.gif ou doctype_head.png) a inserir. Salve na pasta que você criou (no nosso caso a pasta Maujor);
  3. Feche o DW e abra novamente para carregar o ícone que você acabou de criar;
  4. O ícone criado ocupa o lugar do ícone padrão com o ponto de interrogação. É claro que o ícone deve lembrar o conteúdo do código

Figura 6Figura 6

Isto é tudo! Crie quantas abas quiser e dentro das abas quantos códigos forem necessários.

Faça bom proveito para agilizar seu trabalho.

Ah! e se algo der errado (o que é pouco provável mas não é impossível) basta renomear o arquivo inserbarBACKUP .xml que você criou como mostrado logo no ínicio da matéria.

Interessado em Web Standards, Acessibilidade, CSS e Tableless? Visite o Site do Maujor

Mauricio Maujor Samy SilvaAutor

Maurício Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). É um obstinado divulgador dos Padrões Web e desenvolve o site do Maujor (http://maujor.com) e o Blog do Maujor (http://maujor.com/blog). Maujor, como é conhecido na Internet, escreve para revistas de desenvolvimento web, é palestrante em eventos de TI e autor dos seguintes livros: Construindo sites com CSS e (X)HTML; Criando sites com HTML; jQuery; AJAX com jQuery; JavaScript; HTML5; CSS3; jQuery Mobile; SVG; jQuery UI; todos publicados pela Novatec Editora. Acompanhe no Twitter @maujor

urlmail
Ver perfil →

Mais de Mauricio Maujor Samy Silva

↳

Fios