Guia do Usuário Cancelar

Adicionar objetos de mídia

  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 como inserir e editar objetos de mídia em páginas da Web do Dreamweaver, usar o Design Notes e muito mais.

Além de arquivos SWF e FLV, você pode inserir outros objetos de áudio ou vídeo em um documento do Dreamweaver. Se você inseriu atributos de acessibilidade com um objeto de mídia, poderá definir atributos de acessibilidade e editar esses valores no código HTML.

  1. Coloque o ponto de inserção na janela Documento onde deseja inserir o objeto.
  2. Insira o objeto seguindo um destes procedimentos:
    • Na categoria HTML do painel Inserir, selecione o ícone referente ao tipo de objeto a ser inserido.

    • Selecione o objeto apropriado no submenu Inserir > HTML.

    • Uma caixa de diálogo será exibida, permitindo que você selecione um arquivo de origem e especifique determinados parâmetros para o objeto de mídia.

    Observação:

    para evitar que essas caixas de diálogo apareçam, selecione Editar > Preferências > Geral (Windows) ou Dreamweaver > Preferências > Geral (Macintosh) e desmarque a opção Mostrar caixa de diálogo ao inserir objetos. Para anular qualquer preferência definida para a exibição de caixas de diálogo, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto insere o objeto. 

  3. Complete a caixa de diálogo Selecionar arquivo e clique em OK.
    Observação:

    a caixa de diálogo Atributos de acessibilidade é exibida se você tiver optado por mostrar atributos ao inserir a mídia na caixa de diálogo Editar > Preferências.

  4. Defina os atributos de acessibilidade.
    Observação:

    você também pode editar os atributos do objeto de mídia selecionando o objeto e editando o código HTML na Visualização de código, ou clicando com o botão direito do mouse (Windows) ou mantendo a tecla Control pressionada enquanto clica (Macintosh), e selecionando Editar código de tag.

    Título

    Digite um título para o objeto de mídia.

    Chave de acesso

    Digite um equivalente de teclado (uma letra) na caixa de texto para selecionar o objeto de formulário no navegador. Isso permite que um visitante do site use a tecla Control (Windows) com a tecla de acesso para acessar o objeto. Por exemplo, se você digitar B como tecla de acesso, use Control+B para selecionar o objeto no navegador.

    Índice de abas

    Digite um número para a ordem de abas do objeto de formulário. A definição de uma ordem de abas é útil quando há outros links e objetos de formulário na página e o usuário precisa percorrer esses itens em uma ordem específica. Se você definir a ordem das abas de um objeto, não deixe de definir essa ordem para todos eles.

  5. Clique em OK para inserir o objeto de mídia.
    Observação:

    se você clicar em Cancelar, um alocador de espaço de objeto de mídia aparecerá no documento, mas o Dreamweaver não associará tags ou atributos de acessibilidade a ele.

    Para especificar um arquivo de origem ou definir dimensões e outros parâmetros e atributos, use o Inspetor de propriedades para cada objeto. Você pode editar os atributos de acessibilidade de um objeto.

Iniciar um editor externo para arquivos de mídia

Você pode iniciar um editor externo no Dreamweaver para editar a maioria dos arquivos de mídia. Também é possível especificar o editor que o Dreamweaver iniciará para editar o arquivo.

  1. Verifique se o tipo de arquivo de mídia está associado a um editor no sistema.

    Para descobrir que editor está associado ao tipo de arquivo, selecione Editar > Preferências no Dreamweaver e selecione Tipos de arquivos/editores na lista Categoria. Clique na extensão do arquivo na coluna Extensões para exibir o(s) editor(es) associado(s) na coluna Editores. Você pode alterar o editor associado a um tipo de arquivo.

  2. Clique duas vezes no arquivo de mídia no painel Arquivos para abri-lo no editor externo.

    O editor iniciado quando você clica duas vezes no arquivo no painel Arquivos é chamado editor principal. Se você clicar duas vezes em um arquivo de imagem, por exemplo, o Dreamweaver abrirá o arquivo no editor externo de imagem principal como Adobe Fireworks.

  3. Se você não deseja usar o editor externo principal para editar o arquivo, poderá usar outro editor no sistema para editar o arquivo seguindo um destes procedimentos.
    • No painel Arquivos, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no nome de arquivo e selecione Abrir com no menu de contexto.

    • Na Visualização de design, clique o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no elemento de mídia na página atual, e selecione Editar com no menu de contexto.

Especificar o editor a ser iniciado no Dreamweaver

Você pode especificar o editor que o Dreamweaver deve usar para editar um tipo de arquivo e adicionar ou excluir tipos de arquivo que o Dreamweaver reconheça.

Especificar explicitamente quais editores externos devem ser iniciados para um determinado tipo de arquivo

  1. Selecione Editar > Preferências e, em seguida, selecione Tipos de arquivos/editores na lista Categoria.

    Extensões de nome de arquivo, como .gif, .wav e .mpg, são listadas à esquerda, abaixo de Extensões. Os editores associados de uma extensão selecionada são listados à direita, abaixo de Editores.

  2. Selecione a extensão de tipo de arquivo na lista Extensões e siga um destes procedimentos:
    • Para associar um novo editor ao tipo de arquivo, clique no botão de adição (+) acima da lista Editores e preencha a caixa de diálogo exibida.

      Por exemplo, selecione o ícone de aplicativo para que o Acrobat o associe ao tipo de arquivo.

    • Para tornar um editor o editor principal para um tipo de arquivo (ou seja, o editor que é aberto quando você clica duas vezes no tipo de arquivo no painel Arquivos), selecione o editor na lista Editores e clique em Tornar primário.

    • Para dissociar um editor de um tipo de arquivo, selecione o editor na lista Editores e clique no botão de subtração (-) acima da lista Editores.

Adicionar um novo tipo de arquivo e editor associado

  1. Clique no botão de adição (+) acima da lista Extensões e digite uma extensão de tipo de arquivo (incluindo o ponto no início da extensão) ou várias extensões relacionadas separadas por espaços.

    Por exemplo, você poderia digitar .xml .xsl se quisesse associá-los a um editor XML instalado no sistema.

  2. Selecione um editor para o tipo de arquivo clicando no botão de adição (+) acima da lista Editores e preenchendo a caixa de diálogo exibida.

Remover um tipo de arquivo

  1. Selecione o tipo de arquivo na lista Extensões e clique no botão de subtração (-) acima da lista Extensões.
    Observação:

    não é possível desfazer a remoção de um tipo de arquivo. Portanto, é preciso ter a certeza de que deseja removê-lo.

Usar as Design Notes com objetos de mídia

Assim como com outros objetos do Dreamweaver, você pode adicionar Design Notes a um objeto de mídia. As Design Notes são notas associadas a um arquivo específico que são armazenadas em um arquivo separado. Você pode usar as Design Notes para controlar as informações de arquivo extras associadas aos documentos, como nomes de arquivo de origem de imagem e comentários sobre status de arquivos.

  1. Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) no objeto na janela Documento.
    Observação:

    você deve definir o site antes de adicionar as Design Notes a qualquer objeto.

  2. Selecione Design Notes da página no menu de contexto.
  3. Digite as informações desejadas na Design Note.
    Observação:

    você também pode adicionar uma Design Note a um objeto de mídia no painel Arquivos selecionando o arquivo, revelando o menu de contexto e escolhendo as Design Notes no menu de contexto.

Adicionar vídeo (não FLV)

Você pode adicionar vídeo à página da Web de diferentes formas e usando diferentes formatos. O vídeo pode ser baixado para o usuário ou pode ser transmitido de modo que seja reproduzido durante o download.

  1. Coloque o clipe na pasta do site.

    Esse clipes estão geralmente no formato de arquivo AVI ou MPEG.

  2. Vincule-se ao clipe ou incorpore-o na página.

    Para vincular o clipe, digite um texto para o link, como “Clipe de Download”, selecione o texto e clique no ícone de pasta no Inspetor de propriedades. Navegue até o arquivo de vídeo e selecione-o.

    Observação:

    o usuário deve baixar um aplicativo de ajuda (um plug-in) para exibir formatos comuns de fluxo contínuo, como Real Media, QuickTime e Windows Media.

Inserir conteúdo de plug-in

Você pode criar um conteúdo como um filme QuickTime para um plug-in de um navegador e, em seguida, usar o Dreamweaver para inserir esse conteúdo em um documento HTML. Os plug‑ins mais comuns são RealPlayer e QuickTime, ao passo que alguns arquivos de conteúdo incluem mp3s e filmes QuickTime.

Você pode visualizar filmes e animações que se baseiam nos plug-ins de navegador diretamente na Visualização de design da janela Documento. É possível reproduzir todos os elementos de plug-in simultaneamente para ver como a página aparecerá para o usuário ou reproduzir cada um individualmente para garantir que você incorporou o elemento de mídia correto.

Observação:

você não pode visualizar filmes ou animações que se baseiam em controles ActiveX.

Após a inserção do conteúdo para um plug-in do , use o Inspetor de propriedades para definir parâmetros para esse conteúdo. Para exibir as propriedades a seguir no Inspetor de propriedades, selecione um objeto de plug-in.

Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expansão no canto inferior direito para ver todas as propriedades.

Inserir conteúdo de plug-in e definir suas propriedades

  1. Na Visualização de design da janela Documento, coloque o ponto de inserção no local em que deseja inserir o conteúdo e siga um destes procedimentos:
    • Na categoria Comum do painel Inserir, clique no botão Mídia e selecione o ícone Plug-in no menu.

    • Selecione Inserir > Mídia > Plug-in.

  2. Na caixa de diálogo exibida, selecione um arquivo de conteúdo para um plug-in do e clique em OK.
  3. Defina as opções de plug-in no Inspetor de propriedades.

    Nome

    Especifica um nome para identificar o plug-in para script. Digite um nome na caixa de texto sem rótulo no lado esquerdo do Inspetor de propriedades.

    L e A

    Especifica, em pixels, a largura e a altura alocadas para o objeto na página.

    Origem

    Especifica o arquivo de dados de origem. Clique no ícone de pasta para navegar até um arquivo ou digite um nome de arquivo.

    URL do Plg

    Especifica o URL do atributo pluginspace. Digite o URL completo do site em que os usuários podem baixar o plug-in. Se o usuário que estiver visualizando a página não tiver o plug-in, o navegador tentará baixá-lo a partir deste URL.

    Alinhar

    Determina como o objeto é alinhado na página.

    Espaço V e Espaço H

    Especifica o número de pixels de espaço em branco acima, abaixo e em ambos os lados do plug-in.

    Borda

    Especifica a largura da borda em torno do plug-in.

    Parâmetros

    Abre uma caixa de diálogo para a inserção de parâmetros adicionais que serão transmitidos ao plug-in. Vários plug-ins respondem a parâmetros especiais.

    Você também pode exibir os atributos atribuídos ao plug-in selecionado clicando no botão Atributo. É possível editar, adicionar e excluir atributos como largura e altura nesta caixa de diálogo.

Reproduzir conteúdo de plug-in na janela Documento

  1. Insira um ou mais elementos de mídia usando um dos métodos descritos na seção anterior.
  2. Siga um destes procedimentos:
    • Selecione um dos elementos de mídia inserido e, em seguida, selecione Exibir > Plug-ins > Reproduzir ou clique no botão Reproduzir no Inspetor de propriedades.

    • Selecione Exibir > Plug-ins > Reproduzir tudo para reproduzir todos os elementos de mídia na página selecionada baseada nos plug‑ins.

    Observação:

    o recurso Reproduzir tudo se aplica somente ao documento atual. Ele não se aplica a outros documentos em um conjunto de quadros, por exemplo.

Interromper reprodução do conteúdo de plug-in

  1. Selecione um elemento de mídia e, em seguida, selecione Exibir > Plug-ins > Parar ou clique no botão Parar do Inspetor de propriedades.

    Você também pode selecionar Exibir > Plug-ins > Parar tudo para interromper a reprodução de todo o conteúdo de plug-in.

Solucionar problemas de plug-ins

Se você seguiu as etapas de reprodução do conteúdo de plug-in na janela Documento, mas ainda não consegue reproduzir algum conteúdo, tente o seguinte:

  • Verifique se o plug-in associado está instalado no computador e se o conteúdo é compatível com a versão do plug-in que você tem.

  • Abra o arquivo Configuration/Plugins/UnsupportedPlugins.txt em um editor de texto e verifique se o plug-in problemático está listado. Esse arquivo controla os plug-ins que ocasionam problemas no Dreamweaver e que, portanto, não recebem suporte. (Se você está com problemas em um plug-in específico, é recomendável adicioná-lo a esse arquivo.)

  • Verifique se há memória suficiente. Alguns plug-ins requerem mais 2 a 5 MB de memória para serem executados.

Usar comportamentos para controlar mídia

Você pode adicionar comportamentos à página para iniciar e interromper vários objetos de mídia.

Controlar Shockwave ou Flash

Reproduza, interrompa, retroceda ou vá para um quadro em um filme Shockwave ou arquivo SWF.

Tocar som

Permite reproduzir um som; por exemplo, você pode reproduzir um efeito de som sempre que o usuário move o ponteiro do mouse sobre um link.

Verificar plug-in

Permite verificar se os visitantes do site têm o plug-in necessário instalado e, em seguida, os roteiam a diferentes URLs, dependendo o plug-in dos visitantes. Isso se aplica somente a plug-ins do , já que o comportamento Verificar plug-in não verifica controles ActiveX.

Usar parâmetros para controlar objetos de mídia

Defina parâmetros especiais para controlar arquivos SWF e plug-ins. Os parâmetros são usados com as tags object, embed e applet. Os parâmetros definem atributos específicos a diferentes tipos de objetos. Por exemplo, um arquivo SWF pode usar um parâmetro de qualidade <paramname="quality"value="best"> para a tag de objeto. A caixa de diálogo Parâmetro está disponível no Inspetor de propriedades. Consulte a documentação do objeto que você está usando para obter informações sobre os parâmetros necessários.

Observação:

não há um padrão amplamente aceito para a identificação de arquivos de dados para controles ActiveX. Consulte a documentação do controle ActiveX que você está usando para descobrir quais parâmetros devem ser utilizados.

Inserir um nome e valor para um parâmetro

  1. Selecione um objeto que possa ter parâmetros na janela Documento.

  2. Abra o Inspetor de propriedades caso ele ainda não esteja aberto e clique no botão Parâmetros localizado na metade inferior do Inspetor de propriedades. (Verifique se o Inspetor de propriedades está expandido.)

  3. Clique no botão de adição (+) e digite o nome e valor de parâmetro nas colunas apropriadas.

Remover um parâmetro

  1. Selecione um parâmetro e pressione o botão de subtração (–).

Reordenar parâmetros

  1. Selecione um parâmetro e use os botões de seta para cima e para baixo.

Receba ajuda com mais rapidez e facilidade

Novo usuário?