10 dicas e truques simples, mas úteis do Dreamweaver para iniciantes

Adobe Dreamweaver é uma ferramenta poderosa para web designers. O Dreamweaver fornece uma superfície de design visual e um editor de código para desenvolver sites. Embora tenha prós e contras, sua ampla gama de recursos permite que você construa sites de forma eficaz.

Aqui estão 10 dicas e truques simples, mas úteis do Dreamweaver para iniciantes.

1. Exclua as quebras de linha:

Ao copiar texto de um documento, e-mail ou arquivo do Word para o Dreamweaver, você acaba com quebras de linha no final de parágrafos ou linhas. O caractere de quebra de link <br> sinaliza o fim das linhas, portanto, qualquer texto após ele será exibido na linha abaixo dele. Esses caracteres são invisíveis e por isso é difícil removê-los. Embora o Dreamweaver normalmente não destaque esses caracteres, você pode alterar as configurações no menu de preferências para que o programa mostre um pequeno ícone amarelo que indica quebras de linha. Quando as quebras de linha estiverem visíveis, você poderá excluí-las facilmente.

2. Lembre-se de definir um site:

As pessoas costumam confundir trabalhar no Dreamweaver como trabalhar com um documento do Word. No entanto, projetar um site não é construir um arquivo, é construir um site com uma coleção de arquivos inter-relacionados, como imagens, arquivos JavaScript, páginas da Web e arquivos CSS. Os usuários que não entendem isso geralmente esquecem a importância de configurar um site. O Dreamweaver fornece um processo de site fácil de configurar. Ele fornece informações sobre a localização dos arquivos do seu site e permite que você selecione uma das muitas ferramentas de gerenciamento do Dreamweaver. Essas ferramentas transferem seu arquivo para seu servidor Web, verificam links quebrados e constroem um site com modelos.

3. Aumente o tamanho da fonte do seu código:

Com o recurso do Dreamweaver para ajustar o tamanho da fonte, você pode aumentar o tamanho do código em algumas etapas fáceis. Para aumentar o tamanho da fonte, primeiro escolha Dreamweaver > Preferências e clique na categoria Fontes, depois selecione o novo tamanho e clique em OK. Isso o ajudará a tornar o código facilmente legível e você poderá trabalhar no desenvolvimento de seu site por um longo período de tempo sem forçar os olhos.

4. Desative o plano de fundo CSS Abreviação:

Uma das características do CSS é a propriedade background. Este recurso permite adicionar cores ou imagens ao seu plano de fundo. A propriedade abreviada de plano de fundo do Dreamweaver reduz o código de 3 linhas para apenas uma linha definindo uma propriedade de imagem, cor e repetição. Isso certamente pode facilitar a definição de propriedades de plano de fundo, mas se você deixar uma propriedade na versão abreviada, o navegador da Web tratará como "nenhuma". Por exemplo, ao alterar o plano de fundo se você especificar apenas a propriedade da imagem, o navegador da Web removerá a cor existente do plano de fundo anterior. Portanto, é melhor desativar a abreviação de plano de fundo CSS para evitar esse problema.

5. Copie estilos com CSS Designer:

Com CSS Designer você pode melhorar visualmente os estilos em sua página web. Se você deseja usar mais recursos do CSS designer, clique com o botão direito do mouse em qualquer seletor para usar operações de cópia ou duplicação. Essas opções permitem copiar estilos de um seletor para outro. Esses estilos incluem plano de fundo, texto, animação ou borda. Se você quiser copiar um seletor inteiro, use o comando duplicar padrão ou duplicar na consulta de mídia para uma abordagem direcionada. Esses atalhos economizarão muito tempo e também manterão um estilo consistente.

6. Elimine a barra de navegação:

O Adobe Dreamweaver CS5 vem com uma barra de ferramentas de navegação do navegador. Essa barra de ferramentas foi criada para ser usada com a opção de visualização ao vivo do Dreamweaver. Você pode encontrar essas duas opções na janela do documento. A visualização ao vivo é usada para ver uma prévia da sua página da web. Com uma visualização ao vivo, você pode clicar no link e ir para uma página específica. A barra de ferramentas de navegação exibe a localização da nova página e permite navegar facilmente entre as páginas. Você pode ocultar esta barra de ferramentas quando não estiver em uso desmarcando a opção Navegação do navegador na seção Exibir > Barras de ferramentas.

7. Gerencie seus arquivos:

Todos os arquivos estão presentes no painel Arquivos quando você configura um site com o Dreamweaver. Você pode usar este painel de arquivos para muitas funções, como renomear, mover e destacar o nome do arquivo. Isso provavelmente é comum e você pode saber tudo isso, mas as páginas da Web são diferentes dos arquivos comuns. As páginas da Web têm imagens, links para outras páginas da Web e estilos CSS de um arquivo de folha de estilo externo. Renomear uma imagem, página da Web ou arquivo CSS normalmente pelo Windows Explorer pode resultar em links quebrados. Enquanto o Dreamweaver permite atualizar links automaticamente se você mover ou renomear um arquivo usando o painel de arquivos. Desta forma, não há links quebrados.

8. Opte pelo seletor de tags:

Ao aplicar o estilo de classe CSS, adicionar ou remover a tag com precisão pode ser difícil. Para selecionar linhas precisas, o seletor de tags do Dreamweaver é o melhor. O seletor de tags é colocado no canto inferior esquerdo da janela do documento. Este seletor mostra todo o HTML e outras tags presentes ao redor do texto. Você pode selecionar tags específicas clicando em uma tag disponível na barra seletora de tags. A marca realçada representa que a marca está selecionada.

9. Use snippets:

O Dreamweaver fornece snippets que são bits principais de código que podem economizar muito tempo. Os snippets são sincronizados via Creative Cloud, o que garante que estejam disponíveis em todos os sistemas. Você pode atribuir os mais usados ​​como um atalho de teclado. Se você deseja editar atalhos, abra o design de atalhos de teclado e duplique o conjunto padrão. Em seguida, selecione a categoria do snippet abaixo da seção de comandos para selecionar seus favoritos. Você encontrará uma lista de todos os snippets disponíveis, incluindo os que você criou. A parte mais difícil é descobrir quais combinações de teclado não são utilizadas. Mas isso pode ser resolvido usando um modificador.

10. Conecte o WordPress e o Dreamweaver:

Dreamweaver e WordPress formam uma grande equipe. Você pode projetar e modificar páginas do WordPress com o conjunto de ferramentas de arquivo dinâmico do Dreamweaver. Esse conjunto de ferramentas inclui filtros personalizados, arquivos relacionados dinamicamente e dicas de código específicas do site. A parte difícil é descobrir como trabalhar com outras páginas do site com o Dreamweaver. Você deve primeiro começar com o arquivo index.php presente na raiz do site WordPress e navegar a partir daí. Você pode adicionar um caminho diretamente ao endereço da Web ou usar o recurso Dreamweaver para clicar em um link. Depois que a página é exibida, o CSS e outras ferramentas do Dreamweaver ficam sob seu controle.

O Adobe Dreamweaver é ótimo para criar um site. Juntamente com recursos básicos, como conclusão de código, redução de código e realce de sintaxe, ele vem com alguns recursos avançados, como introspecções de código e verificação de sintaxe em tempo real. Essas dicas mencionadas ajudarão você a construir seu site com mais eficiência. Se você está procurando ferramentas para criar um site sem muita codificação, confira essas ferramentas de criação de sites.