Adicionar conteúdo dinâmico a páginas

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

A interface de usuário foi simplificada no Dreamweaver 2017. Logo, talvez você não consiga encontrar algumas das opções descritas neste artigo no Dreamweaver 2017 e em versões posteriores. Para obter mais informações, consulte este artigo (em inglês).

Sobre a adição de conteúdo dinâmico

Após definir uma ou mais origens de conteúdo dinâmico, você pode usar as origens para adicionar conteúdo dinâmico na página. As origens de conteúdo podem incluir uma coluna em um recordset, um valor enviado por um formulário HTML, o valor contido em um objeto de servidor ou outros dados.

No Dreamweaver, você pode colocar conteúdo dinâmico em quase qualquer lugar em uma página da Web ou no código-origem HTML. É possível colocar conteúdo dinâmico no ponto de inserção, substituir uma string de texto ou inseri-lo como um atributo HTML. Por exemplo, o conteúdo dinâmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulário.

É possível adicionar conteúdo dinâmico a uma página selecionando uma origem de conteúdo no painel Vínculos. Dreamweaver insere um script do lado do servidor no código da página, instruindo o servidor a transferir os dados da origem de conteúdo para o código HTML da página quando a página for solicitada por um navegador.

Geralmente há mais de uma maneira de tornar dinâmico um determinado elemento de página. Por exemplo, para tornar uma imagem dinâmica, você pode usar o painel Vínculos, o Inspetor de propriedades ou o comando Imagem no menu Inserir.

Por padrão, uma página em HTML pode exibir apenas um registro por vez. Para exibir os outros registros no conjunto de registros, você pode adicionar um link para percorrer os registros um de cada vez ou pode criar uma região de repetição para exibir mais de um registro em uma página única.

Sobre o texto dinâmico

O texto dinâmico adota qualquer formatação de texto aplicada ao texto existente ou ao ponto de inserção. Por exemplo, se um estilo de folha de estilos em cascata (CSS) afetar o texto selecionado, o conteúdo dinâmico que o substitui também será afetado pelo estilo. Você pode adicionar ou alterar a formatação de texto do conteúdo dinâmico usando qualquer uma das ferramentas de formatação de texto do Dreamweaver.

Você também pode aplicar um formato de dados ao texto dinâmico. Por exemplo, se os dados consistirem em datas, você pode especificar um formato de data específico, como 04/17/00 para visitantes dos EUA ou 17/04/00 para visitantes canadenses.

Tornar texto dinâmico

É possível substituir o texto existente por texto dinâmico ou colocar texto dinâmico em um determinado ponto de inserção na página.

Adicionar texto dinâmico

Na visualização Design, selecione o texto na página ou clique onde deseja adicionar texto dinâmico.
No painel Vínculos (Janela > Vínculos), selecione uma origem de conteúdo na lista. Se você selecionar um conjunto de registros, especifique a coluna desejada no conjunto de registros.

A fonte de conteúdo deve conter texto sem formatação (texto em ASCII). Texto sem formatação inclui HTML. Se nenhuma origem de conteúdo aparecer na lista ou se as origens de conteúdo disponíveis não atenderem às suas necessidades, clique no botão Mais (+) para definir uma nova origem de conteúdo.

(Opcional) Selecione um formato de dados para o texto.
Clique em Inserir ou arraste a fonte de conteúdo para a página.

Um alocador de espaço de conteúdo dinâmico aparece. (Se você selecionou texto na página, o espaço reservado substitui a seleção de texto.) O espaço reservado para conteúdo de conjunto de registros usa a sintaxe {RecordsetName.ColumnName}, em que Recordset é o nome do conjunto de registros e ColumnName é o nome da coluna que você escolheu no conjunto de registros.

Às vezes, o comprimento dos espaços reservados para texto dinâmico distorce o layout da página na janela Documento. Você pode resolver o problema usando chaves vazias como espaços reservados, conforme descrito no próximo tópico.

Exibir espaços reservados para texto dinâmico

Selecione Editar > Preferências > Elementos invisíveis (Windows) ou Dreamweaver > Preferências > Elementos invisíveis (Macintosh).
No menu pop-up Mostrar texto dinâmico como, selecione { } e clique em OK.

Tornar as imagens dinâmicas

Você pode tornar dinâmicas as imagens na sua página. Por exemplo, suponha que você projete uma página para exibir itens à venda em um leilão de caridade.Cada página incluiria texto descritivo e uma foto de um item.O layout geral da página permaneceria o mesmo para cada item, mas a foto (e o texto descritivo) poderia mudar.

Com a página aberta na visualização Design (Visualizar > Design), posicione o ponto de inserção onde deseja que a imagem apareça na página.
Selecione Inserir > Imagem.

A caixa de diálogo Selecionar origem da imagem é exibida.

Clique na opção Fontes de dados (Windows) ou no botão Fonte de dados (Macintosh).

É exibida uma lista de fontes de conteúdo.

Selecione uma fonte de conteúdo na lista e clique em OK.

A fonte de conteúdo deve ser um conjunto de registros que contenha os caminhos para os arquivos de imagem.Dependendo da estrutura de arquivos do local, os caminhos podem ser absolutos, relativos ao documento ou relativos à raiz.

Nota

Atualmente, o Dreamweaver não oferece suporte a imagens binárias armazenadas em um banco de dados.

Se nenhum conjunto de registros aparecer na lista, ou se os conjuntos de registros disponíveis não atenderem às suas necessidades, defina um novo conjunto de registros.

Tornar os atributos de HTML dinâmicos

Você pode alterar dinamicamente a aparência de uma página vinculando atributos HTML aos dados.Por exemplo, você pode alterar a imagem do fundo de uma tabela vinculando o atributo background da tabela a um campo em um conjunto de registros.

Você pode vincular atributos HTML com o painel Vinculações ou com o Inspetor de propriedades.

Tornar atributos HTML dinâmicos com o painel Vinculações

Abra o painel Vinculações escolhendo Janela > Vinculações.
Certifique-se de que o painel Vinculações liste a fonte de dados que você deseja usar.

A fonte de conteúdo deve conter dados apropriados para o atributo HTML que você deseja vincular.Se nenhuma fonte de conteúdo aparecer na lista, ou se as fontes de conteúdo disponíveis não atenderem às suas necessidades, clique no botão Mais (+) para definir uma nova fonte de dados.

Na Visualização de design, selecione um objeto HTML.

Por exemplo, para selecionar uma tabela HTML, clique dentro da tabela e clique na tag <table> no seletor de tag na parte inferior esquerda da janela Documento.

No painel Vinculações, selecione uma origem de conteúdo da sua lista.
Na caixa Vincular a, selecione um atributo HTML no menu pop-up.
Clique em Ligar.

Na próxima vez que a página for executada no servidor de aplicativos, o valor da fonte de dados será atribuído ao atributo HTML.

Tornar atributos HTML dinâmicos com o Inspetor de propriedades

Na exibição Design, selecione um objeto HTML e abra o inspetor de propriedades (Janela > Propriedades).

Por exemplo, para selecionar uma tabela HTML, clique dentro da tabela e clique na tag <table> no seletor de tags no canto inferior esquerdo da janela Documento.

Como você vincula uma fonte de conteúdo dinâmico ao atributo HTML depende de onde ele está localizado.
  • Se o atributo que você deseja vincular tiver um ícone de pasta ao lado no Inspetor de propriedades, clique no ícone da pasta para abrir uma caixa de diálogo de seleção de arquivo; em seguida, clique na opção Fontes de dados para exibir uma lista de fontes de dados.

  • Se o atributo que você deseja vincular não tiver um ícone de pasta ao lado, clique na guia Lista (a inferior das duas guias) no lado esquerdo do inspetor.

    A exibição de lista do Inspetor de propriedades aparece.

  • Se o atributo que você deseja vincular não estiver listado na exibição de lista, clique no botão Mais (+); em seguida, insira o nome do atributo ou clique no botão de seta pequena e selecione o atributo no menu pop‑up.

Para tornar o valor do atributo dinâmico, clique no atributo; em seguida, clique no ícone de raio ou ícone de pasta no final da linha do atributo.

Se você clicou no ícone de raio, uma lista de fontes de dados aparece.

Se você clicou no ícone de pasta, uma caixa de diálogo de seleção de arquivo aparece. Selecione a opção Fontes de dados para exibir uma lista das fontes de conteúdo.

Selecione uma origem de conteúdo da lista de origens de conteúdo e clique em OK.

A fonte de conteúdo deve conter dados apropriados para o atributo HTML que você deseja vincular. Se nenhuma fonte de conteúdo aparecer na lista, ou se as fontes de conteúdo disponíveis não atenderem às suas necessidades, defina uma nova fonte de conteúdo.

Na próxima vez que a página for executada no servidor de aplicativos, o valor da fonte de dados será atribuído ao atributo HTML.

Tornar dinâmicos os parâmetros de ActiveX, Flash e outros objetos

Você pode tornar os parâmetros de applets Java e plug‑ins dinâmicos, assim como os parâmetros de ActiveX, Flash, Shockwave, Director e objetos Generator.

Antes de começar, certifique-se de que os campos no seu conjunto de registros contenham dados apropriados para os parâmetros de objeto que você deseja vincular.

Na exibição Design, selecione um objeto na página e abra o Inspetor de propriedades (Janela > Propriedades).
Clique no botão Parâmetros.
Se seu parâmetro não aparecer na lista, clique no botão Mais (+) e insira um nome de parâmetro na coluna Parâmetro.
Clique na coluna Valor do parâmetro e, em seguida, clique no ícone de raio para especificar um valor dinâmico.

É exibida uma lista de fontes de dados.

Selecione uma fonte de dados na lista e clique em OK.

A fonte de dados deve conter dados apropriados para o parâmetro de objeto que você deseja vincular. Se nenhuma fonte de dados aparecer na lista, ou se as fontes de dados disponíveis não atenderem às suas necessidades, defina uma nova fonte de dados.