Guia do Usuário Cancelar

Ativar as Design Notes para sites do 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

 

 

Sobre as Design Notes

As Design Notes são notas que você cria para um arquivo. As Design Notes são associadas ao arquivo que descrevem, embora sejam armazenadas em um arquivo separado. Você pode ver quais arquivos têm Design Notes anexadas no painel expandido Arquivos: um ícone de Design Notes é exibido na coluna Notas.

Você pode usar as Design Notes para controlar as informações de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentários sobre o status do arquivo. Por exemplo, caso copie um documento de um site para outro, você pode adicionar Design Notes a esse documento com o comentário de que o documento original está na outra pasta de site.

Você também pode usar as Design Notes para controlar as informações importantes que não pode colocar em um documento por motivos de segurança como, por exemplo, notas sobre como um determinado preço ou configuração foi escolhido ou quais fatores de marketing influenciaram uma decisão de design.

Caso um arquivo esteja aberto no Adobe® Fireworks® ou em Flash e seja exportado para outro formato, o Fireworks e o Flash salvam automaticamente o nome do arquivo fonte original em um arquivo de Design Notes. Por exemplo, caso você abra myhouse.png no Fireworks e o exporte para myhouse.gif, o Fireworks cria um arquivo de Design Notes chamado myhouse.gif.mno. Esse arquivo de Design Notes contém o nome do arquivo original, como um arquivo absoluto: URL. Dessa forma, as Design Notes de myhouse.gif podem conter a seguinte linha:

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

Uma Design Note Flash semelhante pode conter a seguinte linha:

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Observação:

para compartilhar as Design Notes, os usuários devem definir o mesmo caminho de raiz do site, sites/assets/orig).

Quando você importa o gráfico para o Dreamweaver, o arquivo de Design Notes é copiado automaticamente para o site com o gráfico. Quando você seleciona a imagem no Dreamweaver e opta por editá-la usando o Fireworks, este abre o arquivo original para edição.

Ativar e desativar as Design Notes para um site

Design Notes são notas associadas a um arquivo, embora sejam armazenadas em um arquivo separado. Use as Design Notes para controlar as informações de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentários sobre o status do arquivo.

Você ativa e desativa as Design Notes para um site na categoria Design Notes da caixa de diálogo Definição de sites. Ao ativar Design Notes, você pode optar por usá-las apenas localmente, se quiser.

  1. Selecione Site > Gerenciar sites.
  2. Na caixa de diálogo Gerenciar sites, selecione um site e, em seguida, clique em Editar.
  3. Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Design Notes.
  4. Marque Manter Design Notes para ativar Design Notes (desmarque para desabilitá-las).
  5. Caso você queira excluir todos os arquivos de Design Notes do site, clique em Limpar e, depois, clique em Sim. (Se você desejar excluir os arquivos remotos de Design Notes, precisará excluí-los manualmente.)
    Observação:

    o comando Limpar da Design Notes exclui somente arquivos MNO (Design Notes). Ele não exclui a pasta _notes ou o arquivo dwsync.xml dentro da pasta _notes. O Dreamweaver usa o arquivo dwsync.xml para manter informações sobre a sincronização do site.

  6. Selecione Ativar carregamento de Design Notes para compartilhamento para carregar Design Notes associadas ao site com os demais documentos e clique em OK.
    • Caso selecione essa opção, você pode compartilhar as Design Notes com o restante da equipe. Quando você coloca ou obtém um arquivo, o Dreamweaver coloca ou obtém automaticamente o arquivo de Design Notes associado.

    • Caso você não selecione essa opção, o Dreamweaver manterá as Design Notes localmente, mas não fará upload delas com seus arquivos. Caso você trabalhe sozinho no site, desmarcar essa opção melhor a o desempenho. As Design Notes não serão transferidas para o site remoto quando você devolver ou colocar os arquivos, e você pode continuar adicionando e modificando as Design Notes do site localmente.

Associar Design Notes a arquivos

Você pode criar um arquivo de Design Notes para cada documento ou modelo no site. Você também pode criar Design Notes para applets, controles ActiveX, imagens, conteúdo Flash, objetos Shockwave e campos de imagem nos documentos.

Observação:

caso você adicione Design Notes a um arquivo de modelo, os documentos que você cria com o modelo não herdam as Design Notes.

  1. Siga um destes procedimentos:
    • Abra o arquivo na janela Documento e selecione Arquivo > Design Notes.

    • No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo e selecione Design Notes.

    Observação:

    caso o arquivo resida em um site remoto, você deve primeiramente retirá-lo ou obtê-lo e, em seguida, selecioná-lo na pasta local.

  2. Na aba Informações básicas, selecione um status para o documento no menu Status.
  3. Clique no ícone de data (acima da caixa Notas) para inserir a data local atual das notas.
  4. Digite os comentários na caixa Notas.
  5. Selecione Mostrar quando o arquivo for aberto para que o arquivo de Design Notes seja exibido sempre que o arquivo for aberto.
  6. Na aba Todas as informações, clique no botão de adição (+) para adicionar um novo par chave/valor; selecione um par e clique no botão de subtração (-) para removê-lo.

    Por exemplo, você pode nomear uma chave como Autor (na caixa Nome) e definir o valor como Heidi (na caixa Valor).

  7. Clique em OK para salvar as notas.

    O Dreamweaver salva as anotações em uma pasta chamada _notes, no mesmo local do arquivo atual. O nome de arquivo é o nome de arquivo do documento mais a extensão .mno. Por exemplo, caso o nome de arquivo seja index.html, o arquivo de Design Notes associado se chama index.html.mno.

Trabalhar com Design Notes

Depois de associar uma Design Note a um arquivo, você pode abri-la, alterar seu status ou excluí-la.

Abrir Design Notes associadas a um arquivo

  1. Realize um dos seguintes procedimentos para abrir as Design Notes:
    • Abra o arquivo na janela Documento e, em seguida, selecione Arquivo > Design Notes.

    • No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo e, em seguida, selecione Design Notes.

    • Na coluna Notas do painel Arquivos, clique duas vezes no ícone amarelo Design Notes.

    Observação:

    para mostrar os ícones amarelos das Design Notes, selecione Site > Gerenciar sites > [nome do site] > Editar > Configurações avançadas > Colunas de visualização de arquivos. Selecione Notas no painel da lista e escolha a opção Mostrar. Quando você clica no botão Expandir na barra de ferramentas Arquivos para mostrar o site local e o site remoto, uma coluna Notas no site local mostra um ícone de nota amarelo para arquivos que tenham uma Design Note.

Atribuir um status de Design Notes personalizado

  1. Abra Design Notes para um arquivo ou objeto (consulte o procedimento anterior).
  2. Clique na aba Todas as informações.
  3. Clique no botão de adição (+).
  4. No campo Nome, digite a palavra status.
  5. No campo Valor, digite o status.

    Caso o valor de status já exista, ele é substituído pelo novo.

  6. Clique na aba Informações básicas e observe se o novo valor de status é exibido no menu pop-up Status.
    Observação:

    você só pode ter um valor personalizado no menu de status por vez. Caso você realize esse procedimento novamente, o Dreamweaver substituirá o valor de status que você digitou inicialmente pelo novo valor de status digitado.

Excluir Design Notes não associadas do site

  1. Selecione Site > Gerenciar sites.
  2. Selecione o site e clique em Editar.
  3. Na caixa de diálogo Definição de sites, selecione Design Notes na lista de categorias à esquerda.
  4. Clique no botão Limpar.

    O Dreamweaver solicita que você verifique se ele deve excluir todas as Design Notes que não estão mais associadas a um arquivo no site.

    Caso você use o Dreamweaver para excluir um arquivo que tenha um arquivo de Design Notes associado, o Dreamweaver também excluirá o arquivo de Design Notes. Dessa forma, normalmente só haverá arquivos de Design Notes órfãos caso você exclua ou renomeie um arquivo fora do Dreamweaver.

    Observação:

    caso você desmarque a opção Manter Design Notes antes de clicar em Limpar, o Dreamweaver excluirá todos os arquivos de Design Notes do site.

Receba ajuda com mais rapidez e facilidade

Novo usuário?