Guia do Usuário Cancelar

Criar páginas de pesquisa e de resultados

  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

 

 

Observação:

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 páginas de pesquisa e de resultados

Você pode usar o Dreamweaver para criar um conjunto de páginas e permitir que os usuários pesquisem o banco de dados e exibam os resultados da pesquisa.

Na maior parte dos casos, você precisa de pelo menos duas páginas para adicionar esse recurso ao aplicativo da Web. A primeira página contém um formulário em HTML no qual os usuários inserem os parâmetros de pesquisa. Embora não realize nenhuma pesquisa efetiva, essa página é conhecida como página de pesquisa.

A segunda página de que você precisa é a de resultados, que realiza grande parte do trabalho. A página de resultados realiza as seguintes tarefas:

  • Lê os parâmetros de pesquisa enviados pela página de pesquisa

  • Conecta-se ao banco de dados e procura os registros

  • Cria um conjunto usando os registros encontrados

  • Exibe o conteúdo do conjunto de registros

    Você também pode adicionar uma página detalhada. Uma página detalhada dá aos usuários mais informações sobre um determinado registro da página de resultados.

    Caso você tenha apenas um parâmetro de pesquisa, o Dreamweaver permite adicionar recursos de pesquisa ao aplicativo da Web sem usar consultas e variáveis SQL. Basta criar as páginas e completar algumas caixas de diálogo. Caso tenha mais de um parâmetro de pesquisa, você precisa escrever uma instrução SQL e definir muitas variáveis para ela.

    O Dreamweaver insere a consulta SQL na página. Quando a página é executada no servidor, todos os registros na tabela do banco de dados são verificados. Caso o campo especificado em um registro atenda às condições da consulta SQL, o registro é incluído em um conjunto de registros. A consulta SQL ativa cria um conjunto de registros contendo apenas os resultados da pesquisa.

    Por exemplo, a equipe de vendas em campo pode ter informações sobre clientes de uma determinada área cujas rendas são superiores a um determinado nível. Em um formulário de uma página de pesquisa, o associado de vendas insere uma área geográfica e um nível de receita mínimo e, em seguida, clica no botão Enviar para enviar os dois valores a um servidor. No servidor, os valores são passados para a instrução SQL da página de resultados, que cria um conjunto de registros contendo apenas os clientes da área especificada cujas receitas estejam acima do nível especificado.

Criar a página de pesquisa

Uma página de pesquisa na Web normalmente contém campos de formulário nos quais o usuário insere os parâmetros de pesquisa. A página de pesquisa deve ter, no mínimo, um formulário em HTML com um botão Enviar.

Para adicionar um formulário em HTML a uma página de pesquisa, conclua o seguinte procedimento.

  1. Abra a página de pesquisa ou uma nova página e selecione Inserir > Formulário > Formulário.

    É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) para ver os limites do formulário, representados por linhas finas em vermelho.

  2. Adicione objetos de formulário para que os usuários insiram os parâmetros de pesquisa selecionando Formulário no menu Inserir.

    Entre os objetos de formulário estão campos de texto, menus, opções e botões de opção. Você pode adicionar quantos objetos de formulário quiser para ajudar os usuários a refinar suas pesquisas. No entanto, lembre-se de que quanto maior for o número de parâmetros na página de pesquisa, mais complexa será a instrução SQL.

  3. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão).
  4. (Opcional) Altere o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um novo valor na caixa Valor.

    Em seguida, você informará ao formulário para onde enviar os parâmetros de pesquisa quando o usuário clica no botão Enviar.

  5. Escolha o formulário selecionando a tag <form> no seletor de tags na parte inferior da janela Documento, como mostra a seguinte imagem:
    Tag form

  6. Na caixa Ação do Inspetor de propriedades do formulário, digite o nome de arquivo da página de resultados que realizará a pesquisa no banco de dados.
  7. No menu pop-up Método, selecione um dos seguintes métodos para determinar como o formulário envia os dados para o servidor:
    • GET envia os dados do formulário anexando-os ao URL como uma sequência de caracteres de consulta. Como os URLs estão limitados a 8.192 caracteres, não use o método GET com formulários longos.

    • POST envia os dados do formulário no corpo de uma mensagem.

    • Padrão usa o método padrão do navegador (normalmente, GET).

      A página de pesquisa está pronta.

Criar uma página de resultados básica

Quando o usuário clica no botão Pesquisar do formulário, os parâmetros de pesquisa são enviados para uma página de resultados no servidor. A página de resultados no servidor, e não a página de pesquisa no navegador, é a responsável por recuperar os registros do banco de dados. Caso a página de pesquisa envie um parâmetro de pesquisa único para o servidor, você pode criar a página de resultados sem consultas e variáveis SQL. Você cria um conjunto de registros básico com um filtro que exclui os registros que não atendam ao parâmetro de pesquisa enviado pela página de pesquisa.

Observação:

Caso tenha mais de uma condição de pesquisa, você deve usar a caixa de diálogo avançada Conjunto de registros para definir o conjunto de registros (consulte Criar uma página de resultados avançada).

Criar o conjunto de registros para manter os resultados de pesquisa

  1. Abra a página de resultados na janela Documento.

    Caso você ainda não tenha uma página de resultados, crie uma página dinâmica em branco (Arquivo > Novo > Página em branco).

  2. Crie um conjunto de registros abrindo o painel Ligações (Janela > Ligações), clicando no botão de adição (+) e selecionando Conjunto de registros no menu pop-up.
  3. Verifique se a caixa de diálogo simples Conjunto de registros é exibida.
    Caixa de diálogo Conjunto de registros

    Observação:

    Mas caso seja exibida a caixa de diálogo avançada, alterne para a caixa de diálogo simples clicando no botão Simples.

  4. Digite um nome para o conjunto de registros e selecione uma conexão.

    A conexão deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usuário.

  5. No menu pop-up Tabela, selecione a tabela a ser procurada no banco de dados.
    Observação:

    Em uma pesquisa com parâmetro único, você pode procurar registros em apenas uma tabela. Para pesquisar mais de uma tabela simultaneamente, você deve usar a caixa de diálogo avançada Conjunto de registros e definir uma consulta SQL.

  6. Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (macOS) na lista.

    Você deve incluir apenas as colunas que contenham as informações a serem exibidas na página de resultados.

    Saia da caixa de diálogo Conjunto de registros por enquanto. Você a usará para recuperar os parâmetros enviados pela página de pesquisa e criar um filtro do conjunto de registros a fim de excluir os registros que não atendam aos parâmetros.

Criar o filtro do conjunto de registros

  1. No primeiro menu pop-up na área Filtro, selecione uma coluna da tabela do banco de dados na qual procurar uma correspondência.

    Por exemplo, caso o valor enviado pela página de pesquisa seja o nome de uma cidade, selecione a coluna da tabela que contém nomes de cidades.

  2. No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele deve ser o padrão).
  3. No terceiro menu pop-up, selecione Variável de formulário caso o formulário na página de pesquisa use o método POST ou Parâmetro de URL caso ele use o método GET.

    A página de pesquisa usa uma variável de formulário ou um parâmetro de URL a fim de passar informações para a página de resultados.

  4. Na quarta caixa, digite o nome do objeto de formulário que aceita o parâmetro de pesquisa na página de pesquisa.

    O nome do objeto é duplicado como o nome da variável de formulário ou do parâmetro de URL. Você pode obter o nome alternando para a página de pesquisa, clicando no objeto de formulário no formulário para selecioná-lo e verificando o nome do objeto no Inspetor de propriedades.

    Por exemplo, suponhamos que você queira criar um conjunto de registros que inclua apenas viagens de aventura para um país específico. Vamos pressupor que haja uma coluna na tabela chamada TRIPLOCATION. Além disso, suponhamos que o formulário em HTML na página de pesquisa use o método GET e contenha um objeto de menu chamado Location que exibe uma lista dos países. O seguinte exemplo mostra como a seção Filtro deve ficar:

    Parâmetros de objeto de formulário

  5. (Opcional) Clique em Testar, digite um valor de teste e clique em OK para se conectar ao banco de dados e criar uma ocorrência do conjunto de registros.

    O valor de teste simula o valor que retornaria da página de pesquisa. Clique em OK para fechar o conjunto de registros de teste.

  6. Caso você esteja satisfeito com o conjunto de registros, clique em OK.

    Um script do servidor é inserido na página que verifica todos os registros na tabela do banco de dados quando executada no servidor. Caso o campo especificado em um registro atenda à condição de filtragem, o registro é incluído em um conjunto de registros. O script cria um conjunto de registros contendo apenas os resultados da pesquisa.

    A próxima etapa é exibir o conjunto de registros na página de resultados. Para obter mais informações, consulte Exibição dos resultados da pesquisa.

Criar uma página de resultados avançada

Caso a página de pesquisa envie mais de um parâmetro de pesquisa ao servidor, você deve escrever uma consulta SQL para a página de resultados e usar os parâmetros de pesquisa em variáveis SQL.

Observação:

Caso tenha apenas uma condição de pesquisa, você pode usar a caixa de diálogo simples Conjunto de registros para definir o conjunto de registros (consulte Criar uma página de resultados básica).

  1. Abra a página de resultados no Dreamweaver e, em seguida, crie um conjunto de registros abrindo o painel Ligações (Janela > Ligações), clicando no botão de adição (+) e selecionando Conjunto de registros no menu pop-up.
  2. Verifique se a caixa de diálogo avançada Conjunto de registros é exibida.

    A caixa de diálogo avançada tem uma área de texto para inserir instruções SQL. Mas caso seja exibida a caixa de diálogo simples, alterne para a caixa de diálogo avançada clicando no botão Avançado.

  3. Digite um nome para o conjunto de registros e selecione uma conexão.

    A conexão deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usuário.

  4. Insira uma instrução Select na área de texto SQL.

    Verifique se a instrução inclui uma cláusula WHERE com variáveis que mantêm os parâmetros de pesquisa. No seguinte exemplo, as variáveis são chamadas varLastName e varDept:

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ 
    WHERE LASTNAME LIKE 'varLastName' ¬ 
    AND DEPARTMENT LIKE 'varDept'

    Para reduzir o trabalho de digitação, você pode usar os três itens de banco de dados na parte inferior da caixa de diálogo avançada Conjunto de registros. Para obter instruções, consulte Definir um conjunto de registros avançado escrevendo em SQL.

    Para obter ajuda sobre a sintaxe SQL, consulte o SQL primer em www.adobe.com/go/learn_dw_sqlprimer_br.

  5. Atribua às variáveis SQL os valores dos parâmetros de pesquisa clicando no botão de adição (+) na área Variáveis e digitando o nome da variável, o valor padrão (o valor que a variável deve assumir caso não retorne nenhum valor de runtime) e o valor de runtime (normalmente um objeto de servidor que mantém um valor enviado por um navegador como, por exemplo, uma variável de solicitação).

    No seguinte exemplo em ASP, o formulário em HTML na página de pesquisa usa o método GET e contém um campo de texto chamado LastName e outro chamado Department:

    Exemplo em ASP

    No ColdFusion, os valores de runtime seriam #LastName# e #Department#. No PHP, os valores de runtime devem ser $_REQUEST["LastName"] e $_REQUEST["Department"].

  6. (Opcional) Clique em Testar para criar uma ocorrência do conjunto de registros usando os valores de variável padrão.

    Os valores padrão simulam os valores que retornariam da página de pesquisa. Clique em OK para fechar o conjunto de registros de teste.

  7. Caso você esteja satisfeito com o conjunto de registros, clique em OK.

    A consulta SQL é inserida na página.

    A próxima etapa é exibir o conjunto de registros na página de resultados.

Exibir os resultados da pesquisa

Depois de criar um conjunto de registros para manter os resultados da pesquisa, você deve exibir as informações na página de resultados. Exibir os registros pode ser uma simples questão de arrastar colunas individuais do painel Ligações para a página de resultados. Você pode adicionar links de navegação para avançar e retornar o conjunto de registros, ou criar uma região repetitiva para exibir mais de um registro na página. Você também pode adicionar links a uma página detalhada.

Para obter mais informações sobre métodos de exibição do conteúdo dinâmico em uma página que não seja o de exibição dos resultados em uma tabela dinâmica, consulte Exibição dos registros do banco de dados.

  1. Coloque o ponto de inserção onde você deseja que a tabela dinâmica seja exibida na página de resultados e selecione Inserir > Objetos de dados > Dados dinâmicos > Tabela dinâmica.
  2. Complete a caixa de diálogo Tabela dinâmica, selecionando o conjunto de registros definido por você para manter os resultados de pesquisa.
  3. Clique em OK. Uma tabela dinâmica que exibe resultados de pesquisa é inserida na página de resultados.

Criar uma página detalhada para uma página de resultados

O conjunto de páginas de pesquisa e de resultados pode incluir uma página detalhada para exibir mais informações sobre registros específicos da página de resultados. Nessa situação, a página de resultados também é duplicada como página mestre em um conjunto de páginas mestre/detalhadas.

Você pode criar um link que abre uma página relacionada e passa parâmetros existentes para essa página. O comportamento do servidor só está disponível quando se usa o modelo de servidor ASP.

Antes de adicionar um comportamento de servidor Ir para página relacionada a uma página, verifique se ela recebe parâmetros de formulário ou URL de outra página. A função do comportamento de servidor é passar esses parâmetros para uma terceira página. Por exemplo, você pode passar os parâmetros de pesquisa recebidos por uma página de resultados para outra página e evitar que o usuário digite novamente esses parâmetros.

Além disso, você pode selecionar um texto ou uma imagem da página para servir como o link para a página relacionada ou posicionar o ponteiro na página sem selecionar nada, e o texto do link é inserido.

  1. Na caixa Ir para página relacionada, clique em Procurar e localize o arquivo da página relacionada.

    Caso a página atual envie dados para ela própria, digite o nome do arquivo da página atual.

  2. Caso os parâmetros que você deseja passar tenham sido recebidos diretamente de um formulário em HTML usando o método GET ou estejam listados no URL da página, selecione a opção Parâmetros de URL.
  3. Caso os parâmetros que você deseja passar tenham sido recebidos diretamente de um formulário em HTML usando o método POST, selecione a opção Parâmetros de formulário.
  4. Clique em OK.

    Quando o novo link é clicado, a página passa os parâmetros para a página relacionada usando uma sequência de caracteres de consulta.

Receba ajuda com mais rapidez e facilidade

Novo usuário?