Trabalhar com ativos

Última atualização em 25/04/2024

Use o painel Ativos no Dreamweaver para gerenciar ativos do site atual.

É possível usar o Adobe Dreamweaver para controlar e visualizar os ativos do armazenados no site como, por exemplo, imagens, filmes, cores, scripts e links. Você também pode arrastar diretamente um ativo para inseri-lo em uma página do documento atual.

Você obtém os ativos de várias origens. Por exemplo, você pode criar ativos em um aplicativo como Adobe Photoshop ou Adobe Animate, recebê-los de um colega ou copiá-los de um CD de clipart ou site de gráficos.

O Dreamweaver também oferece acesso a dois tipos especiais de ativos: bibliotecas e modelos. Ambos são ativos vinculados: quando você edita um item de biblioteca ou modelo, o Dreamweaver atualiza todos os documentos que usam esses ativos. Os itens de biblioteca geralmente representam pequenos ativos de design como, por exemplo, o logotipo de um site ou os direitos autorais. Para controlar uma área de design maior, use um modelo.

Use o painel Ativos (Janela > Ativos) para gerenciar ativos do site atual. O painel Ativos exibe os ativos do site associado ao documento ativo na janela Documento.

Nota

Para poder exibir os ativos no painel Ativos, você deve definir um site local.

Painel Ativos na Visualização dinâmica
Painel Ativos na Visualização dinâmica

Painel Ativos na Visualização de código e de design

O painel Ativos oferece diferentes maneiras de visualizar ativos:

Lista de sites

Mostra todos os ativos do site, incluindo cores e URLs usadas em qualquer documento do site.

Lista Favoritos

Mostra apenas os ativos que você escolheu explicitamente.

Para alternar entre essas duas visualizações, selecione o botão de opção Site ou Favoritos acima da área de visualização.(Essas duas visualizações não estão disponíveis para as categorias Modelos e Biblioteca.)

Nota

grande parte das operações do painel Ativos funciona da mesma forma em ambas as listas. No entanto, há algumas tarefas que você só consegue executar na lista Favoritos.

Nas duas listas, os ativos são classificados de acordo com uma das seguintes categorias:

Imagens

Arquivos de imagem nos formatos GIF, JPEG ou PNG.

Cores

Cores usadas em documentos e folhas de estilo, incluindo cores de texto, fundos e links.

URLs

Links externos nos documentos do site atual, incluindo links FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto) e arquivo local (file://).

Mídia

Arquivos de mídia como arquivos Adobe Flash (apenas SWF), arquivos Adobe Shockwave, QuickTime ou MPEG.

Scripts

Arquivos JavaScript ou VBScript. Scripts em arquivos HTML (ao contrário de arquivos JavaScript ou VBScript independentes) não são exibidos no painel Ativos. Esta categoria está disponível apenas na exibição de código e design.

Modelos

Layouts de página mestre usados em várias páginas. Modificar um modelo modifica automaticamente todas as páginas vinculadas a ele.Esta categoria está disponível apenas na exibição de código e design.

Itens de biblioteca

Elementos de design que você usa em várias páginas; quando você modifica um item de biblioteca, todas as páginas que contêm esse item são atualizadas.Esta categoria está disponível apenas na exibição de código e design.

Nota

para que seja exibido no painel Ativos, um arquivo deve estar classificado de acordo com uma dessas categorias. Às vezes, alguns outros tipos de arquivo são chamados de ativos, embora não sejam mostrados no painel.

Por padrão, os ativos em uma categoria são listados em ordem alfabética por nome, mas você pode classificá-los por tipo e vários outros critérios.Você também pode visualizar ativos e redimensionar as colunas e a área de visualização.

O ícone da Creative Cloud na coluna Tipo indica que os ativos correspondentes serão importados das Bibliotecas da Creative Cloud. Você pode clicar duas vezes no ícone da Creative Cloud para fazer uma nova amostra dos ativos correspondentes. Para obter mais informações sobre reutilização de ativos nas Bibliotecas da Creative Cloud, consulte Bibliotecas da Creative Cloud no Dreamweaver.

Exibir um ativo na área de visualização

Selecione o ativo no painel Ativos.

Exibir ativos em uma categoria

Clique em um ícone de categoria no lado esquerdo do painel Ativos.

Ordenar ativos

Clique no cabeçalho de uma coluna.

Por exemplo, para classificar a lista de imagens por tipo (para que todas as imagens GIF fiquem juntas, todas as imagens JPEG fiquem juntas, e assim por diante), clique no título da coluna Tipo.

Redimensionar uma coluna

Arraste a linha que separa dois títulos de coluna.

Redimensionar a área de visualização

Arraste a barra divisória (entre a área de visualização e a lista de ativos) para cima ou para baixo.

Atualizar o painel Ativos

Pode levar alguns segundos para criar a lista do site porque o Dreamweaver deve primeiro ler o cache do site.

Determinadas alterações não são exibidas imediatamente no painel Ativos. Por exemplo, quando você adicionar ou remover um ativo do site, as alterações não serão exibidas no painel Ativos até que você atualize a lista de sites clicando no botão Atualizar lista de sites. Se você adicionar ou remover um ativo fora do Dreamweaver—usando o Windows Explorer ou o Finder, por exemplo—você deve recriar o cache do site para atualizar o painel Ativos.

Quando você remove a única ocorrência de uma determinada cor ou URL do site, ou salva um novo arquivo contendo uma cor ou um URL que ainda não foi usado no site, as alterações não são exibidas no painel Ativos até que você atualize a lista de sites.

  • Para atualizar a lista do site manualmente, clique no botão Atualizar lista do site .Dreamweaver cria o cache do site ou o atualiza conforme necessário.
  • Para atualizar a lista de sites e recriar manualmente o cache do site, clique com o botão direito (Windows) ou Command+clique (Macintosh) na lista Assets e selecione Atualizar lista de sites.

Adicionar um ativo a um documento

Você pode inserir grande parte dos ativos em um documento arrastando-os para a Visualização dinâmica, Visualização de código ou de design na janela Documento ou usando o botão Inserir no painel. Você pode arrastar os ativos da visualização de lista e do painel de visualização do painel Ativos.

Observação: arrastar do painel de visualização é compatível apenas no Mac.

Você pode inserir cores e URLs na Visualização de design ou na Visualização dinâmica. Na Visualização de design, você pode aplicar cores e URLs aos elementos selecionados.

 

No documento, posicione o ponto de inserção onde deseja que o ativo apareça.

No painel Assets, selecione um dos botões de categoria de ativo à esquerda.
Nota

selecione qualquer categoria exceto Modelos. Um modelo é aplicado a um documento inteiro; ele não pode ser inserido em um documento.

Selecione Local ou Favoritos na parte superior do painel, em seguida, selecione o ativo.

Não há listas de Local ou Favoritos para itens de biblioteca; ignore esta etapa se estiver inserindo um item de biblioteca.

Siga um destes procedimentos:
  • Arraste o ativo do painel para o documento. Você pode arrastar da visualização de lista e também do painel de visualização.

    Observação: no Windows, não é possível arrastar ativos do painel de visualização.

    Você pode arrastar scripts para a área de conteúdo do cabeçalho na janela Documento. Caso essa área não esteja visível, selecione Exibir > Conteúdo do cabeçalho.

  • Selecione o ativo no painel e clique em Inserir.

    Caso o ativo inserido seja uma cor, ela se aplica ao texto exibido do ponto de inserção em diante.

Aplicar cor ao texto usando o painel Assets

O painel Assets mostra as cores que você já aplicou a vários elementos, como texto, bordas de tabela, planos de fundo etc.

Na Visualização de design, execute as seguintes etapas:

Selecione o texto no documento.

No painel Assets, selecione a categoria Cores.

Selecione a cor desejada e clique em Aplicar.

Na Visualização ativa, execute as seguintes etapas:

No painel Assets, selecione a categoria Cores.

Siga um destes procedimentos:

  • Clique com o botão direito na cor no painel Ativos e clique em Copiar o valor da cor. O valor da cor é copiado para a área de transferência. Agora você pode colar o valor da cor (Ctrl+v, Cmd+v) no CSS Designer.
  • Arraste a cor de visualização e passe o mouse sobre os elementos na Visualização dinâmica. Quando você solta a cor, a caixa de diálogo Nova regra CSS aparece e quando você clica em OK, a cor é aplicada ao elemento selecionado.
  • No painel Ativos, clique em Aplicar. A caixa de diálogo Nova regra CSS aparece e quando você clica em OK, a cor é aplicada ao elemento selecionado.

Atribuir URLs a imagens ou texto

Na Visualização de design, execute as seguintes etapas:

Selecione o texto ou a imagem.

No painel Assets, selecione a categoria URLs na exibição Sites ou Favoritos, dependendo de onde a URL está armazenada.

Nota

As URLs para os arquivos do local são armazenadas na visualização Locais por padrão. A visualização Favoritos contém URLs que você mesmo adicionou.

Selecione o URL.
Siga um destes procedimentos:
  • Arraste a URL do painel para a seleção na Visualização de design.

  • Selecione o URL e clique em Inserir.

Na Visualização ao vivo, execute as seguintes etapas:

No painel Ativos, selecione a categoria URLs na visualização Sites ou Favoritos, dependendo de onde a URL está armazenada.

Siga um destes procedimentos:

  • Arraste o URL da visualização ou da exibição em lista. Passe o mouse sobre os elementos na Visualização dinâmica. Quando você solta a URL, <a> envolve o elemento destacado na Visualização ao vivo.
  • Clique no elemento necessário na Visualização dinâmica. No painel Ativos, escolha o URL e clique em Aplicar. O elemento selecionado é envolvido com a tag <a>.

Selecionar e editar ativos

O painel Ativos permite selecionar vários ativos de uma vez. Ele também oferece uma maneira rápida de começar a edição dos ativos.

Selecionar vários ativos

No painel Ativos, selecione um ativo.
Selecione os demais ativos de uma das seguintes formas:
  • Pressione Shift e clique para selecionar uma série consecutiva de ativos.

  • Pressione Control e clique (Windows) ou Command e clique (Macintosh) para adicionar um ativo individual à seleção (esteja ou não adjacente à seleção existente). Pressione Control e clique ou Command e clique em um ativo selecionado para desmarcá-lo.

Editar um ativo

Quando você edita um ativo no painel Ativos, o comportamento varia de acordo com o tipo de ativo. Para alguns ativos, como imagens, você usa um editor externo, que abre automaticamente se você definiu um editor para esse tipo de ativo. Você pode editar cores e URLs apenas na lista Favoritos. Quando você edita modelos e itens de biblioteca, você faz as alterações no Dreamweaver.

No painel Ativos, execute uma das seguintes ações:
  • Clique duas vezes no ativo.

  • Selecione o ativo e clique no botão Editar.

Nota

Caso o ativo deva ser editado em um editor externo e nenhum seja aberto automaticamente, selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh), escolha a categoria Tipos de arquivos/editores e verifique se você definiu um editor externo para esse tipo de ativo.

Faça as alterações.
Ao terminar, execute um destes procedimentos:
  • Caso o ativo esteja baseado em arquivo (outro que não seja uma cor ou URL), salve-o (no editor) e feche-o.

  • Caso o ativo seja um URL, na caixa de diálogo Editar URL clique em OK.

Nota

Caso o ativo seja uma cor, o seletor de cores é fechado automaticamente depois que você seleciona uma cor. Para ignorar o seletor de cores sem escolher uma cor, pressione Esc.

Reutilizar ativos em outro site

O painel Assets mostra todos os ativos (de tipos reconhecidos) no site atual.Para usar um ativo do local atual em outro local, você deve copiá-lo para o outro local. Você pode copiar um ativo individual, um conjunto de ativos individuais ou uma pasta inteira de Favoritos de uma vez.

Talvez seja necessário localizar o arquivo no painel Arquivos que corresponde a um ativo no painel Ativos antes de transferir o ativo para ou do local remoto.

Nota

O painel Arquivos pode mostrar um site diferente daquele exibido no painel Assets.Isso ocorre porque o painel Assets está associado ao documento ativo.

Localizar um arquivo de ativo no painel Arquivos

No painel Ativos, selecione a categoria do ativo que deseja encontrar.
Clique com o botão direito (Windows) ou pressione Control e clique (Macintosh) no nome ou ícone do ativo no painel Ativos e selecione Localizar no local no menu de contexto.
Nota

Localizar no site não está disponível para cores e URLs que não correspondem a arquivos no local.

O painel Arquivos abre com o arquivo do ativo selecionado. O comando Localizar no site localiza o arquivo correspondente ao próprio ativo; ele não localiza arquivos que usam esse ativo.

Copiar ativos do painel Ativo para outro local

No painel Ativos, selecione a categoria do ativo que deseja copiar.
Clique com o botão direito (Windows) ou pressione Control e clique (Macintosh) em um ou mais ativos na lista de Sites ou lista de Favoritos, selecione Copiar para Site e selecione o nome do site de destino no submenu com todos os sites definidos.
Nota

Na lista Favoritos, você pode copiar uma pasta Favoritos assim como ativos individuais.

Os ativos são copiados para seus locais correspondentes no local de destino. Dreamweaver cria novas pastas na hierarquia do local de destino conforme necessário. Os ativos também são adicionados à lista Favoritos do local de destino.

Nota

Se o ativo copiado for uma cor ou uma URL, ele aparece apenas na lista Favoritos do local de destino. Como cores e URLs não correspondem a arquivos, não há arquivo para copiar para o outro local.