10 dicas e truques úteis do Dreamweaver para iniciantes

Um usuário do Dreamweaver definitivamente vai adivinhar o que é uma potência. Embalado com toneladas de recursos, opções e um dos mais conhecidos IDE (Integrated Development Environment) no mercado de hoje. Pode não atender aos critérios que alguns desenvolvedores exigiram, no entanto, o Dreamweaver inegavelmente fornece uma gama decente de ferramentas de desenvolvimento, colaboração e codificação. Essas opções e ferramentas estão escondidas sob camadas de menus menos intuitivos, e é por isso que estamos oferecendo tutoriais no post de hoje..

Mostraremos algumas das funções mais poderosas do Dreamweaver para ajudá-lo a acessá-las rapidamente, além de muitos outros truques úteis que irão lubrificar seu tempo de desenvolvimento e melhorar significativamente a qualidade do seu código. Lista completa depois do salto.

1. Visualização Dinâmica com “Visualização ao vivo”

Nós já sabemos que o DW oferece uma visão estática de nossos arquivos abertos, mas e quanto a "visualizações dinâmicas" de uma aplicação como o WordPress?

Primeiro, precisamos contar DW quais configurações usar para apresentar o nosso"visualizações dinâmicas" corretamente. Para fazer isso, selecione Configurações de solicitação HTTP de Ver> Opções da Visualização ao Vivo menu, depois digite o PEGUE ou POSTAR parâmetros que você precisa para visualizar seu aplicativo corretamente.

Então, mudando para Visualização ao vivo em DW, substitui o antigo Design View painel com uma renderização de WebKit ao vivo e perfeita para pixels da sua página; completo com Javascript ativo, manipulações DOM, consultas de banco de dados, código do lado do servidor e CSS renderizado, em vez dos ícones de espaço reservado que você vê em Design View.

2. "Code Navigator" é o Firebug da DW

Dar um passo adiante é tudo sobre o Navegador de código e quando no Visualização ao vivo janela, clique ALT (clique em Command-Option para Mac) em qualquer lugar na janela, apresenta instantaneamente o código que renderizado esse item. Semelhante ao que você pode ver atualmente no Firefox / Firebug.

3. Congelando o JavaScript

Devido à natureza dinâmica do Ajax, muitas vezes precisamos interagir com uma página na qual determinados itens não são renderizados ou estão disponíveis no carregamento da primeira página. Estes são itens que são injetados na página algum tempo após o carregamento da página. Aqui está um exemplo:

Você pode querer alterar o estilo de uma dica de ferramenta que é implementada inteiramente em JavaScript. Antes de hoje, você teria que pesquisar metodicamente seus scripts para encontrar o que estava sendo criado e onde.

Em vez disso, tente isto:

Renderize sua página em Visualização ao vivo, então aperte F6 Congelar o JavaScript a qualquer momento, permitindo-lhe segmentar e dissecar o código relacionado a qualquer item dinâmico na página.

4. O próximo melhor amigo do Live View - "Live Code"

Ao usar Visualização ao vivo, você também pode ligar Código Vivo. Código Vivo atualizará seu código conforme você passa o mouse, clica e interage com elementos e itens no Janela Live View!

5. Conclusão Automática do JavaScript

O Dreamweaver vem com um completo e inteligente código HTML e CSS, mas e os Javascripts? Se você codificar jQuery ou Prototype no Dreamweaver, você deve saber que existem extensões de API que fornecem a conclusão de código Javascript. Reduz a digitação necessária e pode ser bastante útil para codificadores rápidos.

Clique aqui para ler mais ou baixar:

• Extensão da API do jQuery para o Dreamweaver
• Extensão da API de protótipo para o Dreamweaver

6. Beautify Codes On The Fly

Sua página de códigos se parece com linhas de código desorganizadas e confusas? Use o Aplicar formatação de origem recurso e reformatá-lo exatamente de acordo com suas preferências. Para limpá-los rapidamente, clique no Código fonte do formato ícone na parte inferior do Barra de Codificação (Editar> Barras de Ferramentas> Codificação) e selecione Configurações de formato de código para definir sua formatação preferida.

Você também pode acessar a opção de formatação Comandos> Aplicar formatação de origem ou apenas aplicá-lo a um bloco de código selecionado, selecionando o Aplicar formatação de fonte à seleção opção.

7. Fique com o widgety

Basta clicar no Estender o ícone do Dreamweaver (parece uma engrenagem) na sua barra de aplicativos e selecione Procure por widgets da Web. Isso levará você ao Adobe Exchange, onde você pode encontrar widgets adicionais de fornecedores como Yahoo !, JQuery e muitos outros.

8. Subversion e Dreamweaver

E sim, o Dreamweaver suporta o Subversion (SVN). Para os desenvolvedores que usam o SVN para manter o controle de revisão do projeto, isso pode ser uma boa notícia. O desenvolvedor do Dreamweaver, Andrew Voltmer, discute como você pode usar o Subversions com o Dreamweaver.

9. Não há mais estilos redundantes

Muitas pessoas usam o Dreamweaver como uma forma de atualizar o conteúdo visualmente, como um processador de texto. Antes do Dreamweaver CS4, isso poderia resultar em regras de CSS redundantes, como .classe 1, .class2, e assim por diante. No Dreamweaver CS4, basta mudar o seu Inspetor de propriedades para HTML mode (clique no ícone HTML à esquerda do Inspector) e você vai se despedir de todo esse CSS redundante, inserindo apenas a marcação HTML apropriada.

10. Validação de formulário facilitada

Quer validar seus campos de formulário, mas tem medo de reconstruir do zero? Não se preocupe. Basta selecionar um elemento de formulário existente, como um campo de texto, e aplicar um Widget de validação do Spry de Inserir> menu Spry. Em seguida, controle os requisitos de validação, como caracteres mínimos ou máximos, diretamente do Inspetor de propriedades.

Bônus: mais 3

11. Acessar arquivos relacionados facilmente

Quando você abre um arquivo HTML ou PHP, você verá uma linha de nomes de arquivos dependentes, como CSS, Javascript e até arquivos incluídos para PHP, na parte superior da janela do documento. Você pode facilmente mudar para esses arquivos, fazer alterações e salvá-los, tudo sem nem mesmo abri-los. Ao clicar em qualquer arquivo na barra Arquivos relacionados, você verá sua origem na visualização de código e a página pai no modo Design. Ou use o Code Navigator para acessar rapidamente o código-fonte CSS que afeta sua seleção atual.

12. Verifique a compatibilidade dos navegadores

Abra o documento que você deseja verificar para compatibilidade; na mesma barra de menus, onde as visualizações Código / Divisão / Design são acessadas, olhe para a extrema direita para 'Verificar páginabotão '.

Ao clicar nele, o menu suspenso será expandido, selecione "Verificar a compatibilidade do navegador'. o Janela de resultados de compatibilidade do navegador vai aparecer na parte inferior da janela com todos os problemas que você precisa resolver.

Nota: Isto NÃO irá verificar novas versões do IE no Mac! Para selecionar quais navegadores usar para teste, selecione Verificar página > Definições do menu.

13. Visualizar páginas do PHP

O Dreamweaver permite que você execute e visualize códigos PHP dentro do software. Veja como obter a configuração.

Começando

1. Primeiro, selecione Local -> Novo site a partir da navegação superior.
2. Você verá tanto o Basic e Definição avançada do site guias de opção. Vamos prosseguir selecionando Guia Definição avançada do site.
3. Digite um nome de pasta para o site na caixa apropriada (para este exemplo, usaremos "myphp" como o nome da pasta).
4. Crie outra pasta chamada "images" inserindo seu nome no campo "Default Images Folder"..
5. Debaixo de Informação local, insira os seguintes valores nos campos:
   • Nome do site: o nome do site. Para ser usado somente no Dreamweaver
   • Pasta raiz local: Este é o nome do site em que você estará trabalhando. Certifique-se de nomear sites de forma a minimizar conflitos ou confundir nomes.
   • Pasta de imagens padrão: Isso é opcional, mas é aconselhável criá-lo agora, pois a maioria dos sites usará imagens em certa medida. É aqui que o DW "procurará" inserir imagens em seus documentos durante a fase de codificação.
   • Links Relativos a: Define como a vinculação de documentos no Dreamweaver será tratada. Você pode selecionar Documento ou Raiz. As diferenças entre os dois são:
     • Document Relative - Insere um caminho relativo ao arquivo que você está trabalhando e ao item que está sendo vinculado.
     • Root Relative - Usa / o que faz com que o documento / arquivo seja vinculado em relação à pasta ROOT.
     • Outra alternativa é adicionar alguma configuração aos arquivos de configuração do servidor. Sendo uma tarefa mais avançada, vamos continuar usando o Document-relative por enquanto.
   • Endereço HTTP: insira a pasta raiz do site para seu projeto
   • Links case-sensitive: O Dreamweaver verificará se algum arquivo no projeto pode ter um problema sensível ao caso ao fazer o upload para o servidor. As notificações serão exibidas quando você usar: Site -> Verificar links em todo o site. Você pode deixar marcado se quiser. Eu pessoalmente não deixo marcado como sempre nomeio arquivos em letras minúsculas. Letra maiúscula não é recomendada.
   • Cache: Marque Ativar cache.
6. No Informação Remota página, configure seu FTP ou outro acesso a um servidor remoto ou deixe o Acesso a Nenhum.
7. No Servidor de teste página selecione a opção que se relaciona com o tipo de arquivo / sistema que você estará testando.
8. Controle de versão não será usado para este exemplo, então você pode deixar em branco a menos que esteja familiarizado com ele.
9. Camuflagem permite que você coloque .psd, .fla e outros arquivos de origem na pasta de sites e o DW os ignorará ao fazer o upload / atualizar seu site.
10. Design Notes são ideais para uma equipe de web design, pois mantém as alterações feitas nos arquivos. É verificado por padrão e bom para nós usarmos esse caminho.
11. Sair Coluna da vista de arquivo, Contribuir, e Modelos como padrão.
12. o Spry A página simplesmente aponta para a pasta de ativos do Spry que é incluída automaticamente no Dreamweaver. Não há necessidade de mudar isso. Quando todas as configurações estiverem concluídas, clique em Está bem.

Visualizar PHP no Dreamweaver

Agora abra um arquivo PHP e faça as mudanças necessárias nele. Para ver este arquivo no Dreamweaver simplesmente pressione F12 e os resultados serão exibidos no seu navegador padrão. Você pode alterar qual navegador é usado Editar -> Preferências -> Visualizar no navegador. Isso permite um tempo de edição para visualização mais rápido, elimina a necessidade de digitar URLs longos na barra do navegador ou usar outro software de servidor para renderizar os arquivos PHP, o que economiza tempo!

Isso é tudo. Feliz Dreamweaver'ing :-)

Nota do editor: Este post foi escrito por Jesse Matlock para Hongkiat.com. Nos últimos 6 anos, Jesse mergulhou no design da interface do usuário, no desenvolvimento de aplicativos e nas tendências da web. Ele é o fundador e líder de design de uma equipe de desenvolvimento pequena, embora muito talentosa, que se concentra no desenvolvimento de aplicativos sob medida..