Guia do Usuário Cancelar

Sobre codificação no Dreamweaver

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

Saiba mais sobre como o Dreamweaver oferece suporte aos diferentes idiomas de codificação usados para construir sites.

As linguagens de programação mais populares para criar e desenvolver sites totalmente funcionais são HTML, HTML5 e CSS para front-end e PHP, JavaScript, Java e jQuery para back-end.

Você pode projetar a aparência de um site (por exemplo, fontes e cores) usando CSS. E, depois, você pode usar HTML para inserir imagens, texto, vídeos, formulários e outros tipos de conteúdo para criar uma página Web coesa.

Usando CSS e HTML juntos, você pode construir um site estático. No entanto, a maioria dos sites requer algum tipo de interação (como solicitar que o cliente preencha um formulário ou faça um pagamento) e um banco de dados para armazenar os dados do site.

Para criar esses canais back-end de comunicação, você precisa de uma linguagem de programação no lado do servidor (como PHP) que se comunica com o banco de dados.

Linguagens de programação compatíveis com o Dreamweaver

Além dos recursos de edição de texto, o Adobe Dreamweaver oferece vários recursos, como dicas de código, para ajudar você a codificar nas seguintes linguagens:

  • HTML
  • PHP
  • CSS
  • JavaScript

Não há suporte para outras linguagens, como Perl, nos recursos de codificação específicos de linguagem no Dreamweaver; por exemplo, você pode criar e editar arquivos Perl, mas as dicas de código não se aplicam a essa linguagem.

Modificação automática de código

Você pode definir opções que instruam o Dreamweaver limpar automaticamente o código manuscrito de acordo com os critérios especificados. No entanto, o código nunca é regravado, a menos que as opções de regravação de código sejam ativadas ou que você execute uma ação que altere o código. Por exemplo, o Dreamweaver não altera o espaço em branco nem altera as maiúsculas e minúsculas dos atributos, a menos que você use o comando Aplicar formatação de origem.

Algumas dessas opções de regravação de código são ativadas por padrão.

Os recursos de Roundtrip HTML do Dreamweaver permitem que você mova os documentos para frente e para trás entre um editor HTML baseado em texto e o Dreamweaver com pouco ou nenhum efeito no conteúdo e na estrutura do código-fonte HTML original do documento. Esses recursos incluem:

  • Você pode usar um editor de texto de terceiros para editar o documento atual.

  • Por padrão, o Dreamweaver não altera o código criado ou editado em outros editores HTML, mesmo se o código for inválido, a menos que você ative as opções de regravação de código.

  • O Dreamweaver não altera tags que não reconheça, incluindo as tags XML, porque ele não tem critérios que possa usar para julgá-las. Se uma tag não reconhecida sobrepuser outra tag (por exemplo, <MyNewTag><em>text</MyNewTag></em>), o Dreamweaver a marcará como um erro, mas não regravará o código.

  • Se desejar, defina o Dreamweaver para realçar o código inválido na Visualização de código (em amarelo). Quando você selecionar uma seção realçada, o Inspetor de propriedades exibirá as informações sobre como corrigir o erro.

Código XHTML

O Dreamweaver gera o novo código XHTML e limpa o código XHTML existente de uma forma que atenda à maioria dos requisitos XHTML. As ferramentas de que você precisa para atender a alguns requisitos XHTML restantes também são fornecidos.

Observação:

alguns requisitos também são necessários em várias versões HTML.

A tabela a seguir descreve os requisitos XHTML aos quais o Dreamweaver atende automaticamente:

Requisito XHTML

Ações do Dreamweaver

Deve haver uma declaração DOCTYPE no documento anterior ao elemento raiz e a declaração deve referenciar um dos três arquivos de definição de tipo de documento (DTD) para XHTML (strict, transitional ou frameset).

Adiciona um XHTML DOCTYPE a um documento XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Se o documento XHTML tiver um conjunto de quadros:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

O elemento raiz do documento deve ser html e o elemento html deve designar o espaço para nome XHTML.

Adiciona o atributo namespace ao elemento html, da seguinte maneira:

<html xmlns="http://www.w3.org/1999/xhtml">

Um documento padrão deve ter os elementos estruturais head, title e body. Um documento de conjunto de quadros deve ter os elementos estruturais head, title e frameset.

Um documento padrão inclui os elementos head, title e body. Um documento de conjunto de quadros inclui os elementos head, title e frameset.

Todos os elementos do documento devem ser adequadamente aninhados:

<p>Este é um <i>péssimo exemplo.</p></i> <p>Este é um <i>bom exemplo.</i></p>

Gera um código corretamente aninhado e, ao limpar o XHTML, corrige o aninhamento do código que não foi gerado pelo Dreamweaver.

Todos os nomes de elemento e atributo devem ser minúsculos.

Força os nomes de elemento e atributo HTML a estarem em minúsculas no código XHTML gerado e ao limpar o XHTML, independentemente das preferências de minúsculas ou maiúsculas da tag e do atributo.

Cada elemento deve ter uma tag de finalização, a não ser que isso seja declarado na DTD como EMPTY.

Insere tags de finalização no código gerado e ao limpar o XHTML.

Os elementos vazios devem ter uma tag de finalização ou a tag de abertura deve ser finalizada com />. Por exemplo, <br> não é válido. A forma correta é <br></br> ou <br/>. Estes são os elementos vazios: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta e param.

Para compatibilidade com versões anteriores em navegadores que não são ativados para XML, deve haver um espaço antes de /> (por exemplo, <br />, e não <br/>).

Insere elementos vazios com um espaço antes da barra de fechamento nas tags vazias do código gerado e ao limpar o XHTML.

Os atributos não podem ser minimizados; por exemplo, <td nowrap> não é válido. A forma correta é <td nowrap="nowrap">.

Isso afeta os seguintes atributos: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly e selected.

Insere pares completos de atributo/valor no código gerado e ao limpar o XHTML.

Nota: se um navegador HTML não oferecer suporte a HTML 4, pode ser que ele não consiga interpretar esses atributos boolianos quando eles aparecerem na forma completa.

Todos os valores de atributo devem ser envolvidos por aspas.

Delimita os valores de atributo com aspas no código gerado e ao limpar o XHTML.

Os seguintes elementos devem ter um atributo id, bem como um atributo name: a, applet, form, frame, iframe, img e map. Por exemplo, <a name="intro">Introduction</a> não é válido; a forma correta é

<a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.

Define os atributos name e id para o mesmo valor, sempre que o atributo name é definido por um Inspetor de propriedades no código gerado pelo Dreamweaver e ao limpar o XHTML.

No caso dos atributos com valores de um tipo enumerado, os valores devem estar em minúsculas.

Um valor de tipo enumerado é um valor que consta em uma lista especificada de valores permitidos; por exemplo, o atributo align tem os seguintes valores permitidos: center, justify, left e right.

Força os valores de tipo enumerado a serem minúsculos no código gerado e ao limpar o XHTML.

Todos os elementos de script e estilo devem ter um atributo type.

(O atributo type do elemento script tem sido obrigatório desde o HTML 4, quando o atributo language se tornou obsoleto.)

Define os atributos type e language nos elementos script e o atributo type nos elementos style, no código gerado e ao limpar o XHTML.

Todos os elementos img e area devem ter um atributo alt.

Define esses atributos no código gerado e, ao limpar o XHTML, relata atributos alt ausentes.

Expressões regulares

As expressões regulares são padrões que descrevem combinações de caracteres em texto. Use-as nas pesquisas de código para descrever conceitos como linhas que começam com ‘var’” e valores de atributo que contêm um número.

A tabela a seguir lista os caracteres especiais nas expressões regulares, seus significados e exemplos de uso. Para procurar um texto que contenha um dos caracteres especiais da tabela, aplique o escape ao caractere especial precedendo-o com uma barra invertida. Por exemplo, para procurar o asterisco real na frase some conditions apply*, o padrão de pesquisa pode ter a seguinte aparência: apply\*. Se você não aplicar o escape ao asterisco, encontrará todas as ocorrências de “apply” (bem como qualquer ocorrência de “appl”, “applyy” e “applyyy”), e não apenas as seguidas por asterisco.

Caractere

Corresponde a

Exemplo

^

Início da entrada ou linha.

^T corresponde a “T” em “This good earth”, mas não em “Uncle Tom’s Cabin”

$

Fim da entrada ou linha.

h$ corresponde a “h” em “teach”, mas não em “teacher”

*

O caractere precedente 0 ou mais vezes.

um* corresponde a “um” em “rum”, “umm” em “yummy” e “u” em “huge”

+

O caractere precedente uma ou mais vezes.

um+ corresponde a “um” em “rum” e “umm” em “yummy”, mas não tem nenhuma correspondência em “huge”

?

O caractere precedente no máximo uma vez (ou seja, indica que o caractere precedente é opcional).

st?on corresponde a “son” em “Johnson” e “ston” em “Johnston”, mas não tem nenhuma correspondência em “Appleton” ou “tension”

.

Qualquer caractere único, exceto o caractere de nova linha.

.an corresponde a “ran” e “can” na frase “bran muffins can be tasty”

x|y

x ou y

FF0000|0000FF corresponde a “FF0000” em bgcolor=”#FF0000” e “0000FF’” em font color=”#0000FF”

{n}

Exatamente n ocorrências do caractere precedente.

o{2} corresponde a “oo” em “loom” e às duas primeiras letras o em “mooooo”, mas não tem nenhuma correspondência em “money”

{n,m}

No mínimo n e no máximo m ocorrências do caractere precedente.

F{2,4} corresponde a “FF” em “#FF0000” e às quatro primeiras letras F em #FFFFFF

[abc]

Qualquer um dos caracteres entre colchetes. Especifique uma faixa de caracteres com um hífen (por exemplo, [a-f] equivale a [abcdef]).

[e-g] corresponde a “e” em “bed”, “f” em “folly” e ”g” em “guard”

[^abc]

Qualquer caractere que não está entre colchetes. Especifique uma faixa de caracteres com um hífen (por exemplo, [^a-f] equivale a [^abcdef]).

[^aeiou] corresponde inicialmente a “r” em “orange”, “b” em “book” e “k” em “eek!”

\b

Um limite de palavra (como um espaço ou um retorno de carro).

\bb corresponde a “b” em “book”, mas não tem nenhuma correspondência em “goober” ou “snob”

\B

Algo que não seja um limite de palavra.

\Bb corresponde a “b” em “goober”, mas não tem nenhuma correspondência em “book”

\d

Qualquer caractere de dígito. Equivalente a [0-9].

\d corresponde a “3” em “C3PO” e “2” em “apartment 2G”

\D

Qualquer caractere que não seja dígito. Equivalente a [^0-9].

\D corresponde a “S” em “900S” e “Q” em “Q45”

\f

Feed de formulário.

\n

Feed de linha.

\r

Retorno de carro.

\s

Qualquer caractere único de espaço em branco, incluindo espaço, tabulação, feed de formulário ou feed de linha.

\sbook corresponde a ”book” em “blue book”, mas não tem nenhuma correspondência em “notebook”

\S

Qualquer caractere único de espaço que não seja em branco.

\Sbook corresponde a “book” em “notebook”, mas não tem nenhuma correspondência em “blue book”

\t

Uma tabulação.

\w

Qualquer caractere alfanumérico, incluindo sublinhado. Equivalente a [A-Za-z0-9_].

b\w* corresponde a “barking” em “the barking dog”, e “big” e “black” em “the big black dog”

\W

Qualquer caractere que não seja alfanumérico. Equivalente a [^A-Za-z0-9_].

\W corresponde a “&” em “Jake&Mattie” e “%” em “100%”

Control+Enter ou Shift+Enter (Windows), ou Control+ Return ou Shift+Return ou Command+ Return (Macintosh)

Caractere de retorno. Verifique se você desmarcou a opção Ignorar diferenças de espaço em branco ao realizar essa pesquisa, caso não esteja usando expressões regulares. Observe que isso corresponde a um caractere específico, e não à noção geral de uma quebra de linha. Por exemplo, isso não corresponde a uma tag <br> ou <p>. Os caracteres de retorno aparecem como espaços na Visualização de design, e não como quebras de linha.

Use parênteses para executar agrupamentos na expressão regular que será referenciada posteriormente. Em seguida, use $1, $2, $3 e assim sucessivamente, no campo Substituir por para se referir ao primeiro, segundo, terceiro e subsequentes agrupamentos entre parênteses.

Observação:

na caixa Procurar por, para se referir a um agrupamento entre parênteses anterior na expressão regular, use \1, \2, \3 e assim por diante, em vez de $1, $2, $3.

Por exemplo, a procura por (\d+)\/(\d+)\/(\d+) e sua substituição por $2/$1/$3 trocará o dia e o mês em uma data separada por barras, convertendo entre datas em estilo americana e em estilo europeu.

Código de comportamento de servidor

Quando você desenvolver uma página dinâmica e selecionar um comportamento de servidor no painel Comportamentos de servidor, o Dreamweaver inserirá um ou mais blocos de código na página para fazer com que o comportamento de servidor funcione.

Se você alterar manualmente o código em um bloco de códigos, não poderá usar mais painéis como Ligações e Comportamentos de servidor. O Dreamweaver procura padrões específicos no código de página para detectar comportamentos de servidor e exibi-los no painel Comportamentos de servidor. Se você alterar o código em um bloco de códigos de qualquer forma, o Dreamweaver não poderá mais detectar o comportamento do servidor e exibi-lo no painel Comportamentos de servidor. No entanto, o comportamento do servidor ainda existirá na página e você poderá editá-lo no ambiente de codificação do Dreamweaver.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online