Crie uma variável chamada department e atribua a sequência de caracteres "Sales" a ela.
- Guia do usuário do Dreamweaver
- Introdução
- Dreamweaver e Creative Cloud
- Áreas de trabalho e exibições do Dreamweaver
- Configurar sites
- Sobre sites do Dreamweaver
- Configurar uma versão local do site
- Conectar-se a um servidor de publicação
- Configurar um servidor de teste
- Importar e exportar configurações de site do Dreamweaver
- Trazer sites existentes de um servidor remoto para a raiz do site local
- Recursos de acessibilidade do Dreamweaver
- Configurações avançadas
- Definir preferências de site para transferência de arquivos
- Especificar configurações do servidor proxy no Dreamweaver
- Sincronizar as configurações do Dreamweaver com a Creative Cloud
- Como usar o Git no Dreamweaver
- Gerenciar arquivos
- Criar e abrir arquivos
- Gerenciamento de arquivos e pastas
- Obter e colocar arquivos no servidor
- Devolver e retirar arquivos
- Sincronizar arquivos
- Comparar arquivos em busca de diferenças
- Encobrir arquivos e pastas em seu site do Dreamweaver
- Ativar as Design Notes para sites do Dreamweaver
- Impedir possível ataque ao Gatekeeper
- Layout e design
- CSS
- Noções sobre as folhas de estilos em cascata
- Aplicar layout às páginas usando o CSS Designer
- Usar pré-processadores de CSS no Dreamweaver
- Como definir preferências de estilo CSS no Dreamweaver
- Mover regras de CSS no Dreamweaver
- Converter CSS inline em uma regra de CSS no Dreamweaver
- Trabalhar com tags div
- Aplicação de degradês ao fundo
- Criar e editar efeitos de transição do CSS3 no Dreamweaver
- Formatar código
- Conteúdo e ativos de página
- Definir propriedades da página
- Configurar propriedades de cabeçalho e propriedades de link de CSS
- Trabalhar com texto
- Localizar e substituir texto, tags e atributos
- Painel DOM
- Editar na Visualização dinâmica
- Codificar documentos do Dreamweaver
- Selecionar e exibir os elementos na janela Documento
- Definir propriedades de texto no Inspetor de propriedades
- Verificar ortografia de uma página Web
- Usar regras horizontais no Dreamweaver
- Adicionar e modificar combinações de fontes no Dreamweaver
- Trabalhar com ativos
- Inserir e atualizar datas no Dreamweaver
- Criar e gerenciar ativos favoritos no Dreamweaver
- Inserir e editar imagens no Dreamweaver
- Adicionar objetos de mídia
- Adição de vídeos no Dreamweaver
- Inserir vídeo HTML5
- Inserir arquivos SWF
- Adicionar efeitos de áudio
- Inserir áudio HTML5 no Dreamweaver
- Trabalhar com itens da biblioteca
- Usar texto em árabe e hebraico no Dreamweaver
- Vinculação e navegação
- Efeitos e widgets do jQuery
- Programar sites
- Sobre codificação no Dreamweaver
- Ambiente de codificação no Dreamweaver
- Definir preferências de codificação
- Personalizar codificação por cores
- Escrever e editar código
- Dicas de código e preenchimento de código
- Recolher e expandir código
- Reutilizar código com snippets
- Linting de código
- Otimizar código
- Editar código na Visualização de design
- Trabalhar com conteúdo do cabeçalho das páginas
- Inserir inclusões de servidor no Dreamweaver
- Usar bibliotecas de tags no Dreamweaver
- Importar tags personalizadas para o Dreamweaver
- Usar comportamentos JavaScript (instruções gerais)
- Aplicar comportamentos internos do JavaScript
- Sobre XML e XSLT
- Executar transformações XSL do servidor no Dreamweaver
- Executar transformações XSL do cliente no Dreamweaver
- Adicionar entidades de caracteres para XSLT no Dreamweaver
- Formatar código
- Fluxos de trabalho entre produtos
- Instalar e usar extensões no Dreamweaver
- Atualizações dentro do aplicativo no Dreamweaver
- Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
- Trabalho com o Fireworks e o Dreamweaver
- Editar conteúdo em sites do Dreamweaver usando o Contribute
- Integração do Business Catalyst ao Dreamweaver
- Criar campanhas de email personalizadas
- Modelos
- Sobre os modelos do Dreamweaver
- Reconhecimento de modelos e documentos baseados em modelo
- Criar um modelo do Dreamweaver
- Criar regiões editáveis nos modelos
- Criar regiões e tabelas repetitivas no Dreamweaver
- Usar regiões opcionais em modelos
- Definir atributos de tag editáveis no Dreamweaver
- Como criar modelos aninhados no Dreamweaver
- Editar, atualizar e excluir modelos
- Exportar e importar conteúdo xml no Dreamweaver
- Aplicar ou remover um modelo em um documento
- Editar conteúdo em modelos do Dreamweaver
- Regras de sintaxe para tags de modelo no Dreamweaver
- Definir preferências de realce para regiões de modelo
- Vantagens de usar modelos no Dreamweaver
- Dispositivo móvel e multitela
- Sites dinâmicos, páginas e formulários Web
- Noções sobre aplicativos Web
- Configurar o computador para desenvolvimento de aplicativos
- Solucionar problemas de conexões de banco de dados
- Remover scripts de conexão no Dreamweaver
- Criar páginas dinâmicas
- Visão geral das fontes de conteúdo dinâmico
- Definir origens de conteúdo dinâmico
- Adicionar conteúdo dinâmico a páginas
- Alterar conteúdo dinâmico no Dreamweaver
- Exibir registros de banco de dados
- Fornecer e solucionar problemas de live data no Dreamweaver
- Adicionar comportamentos personalizados de servidor no Dreamweaver
- Criar formulários usando o Dreamweaver
- Usar formulários para reunir informações de usuários
- Criar e ativar formulários do ColdFusion no Dreamweaver
- Criar formulários Web
- Suporte aprimorado a HTML5 para elementos de formulário
- Desenvolver um formulário usando o Dreamweaver
- Criação visual de aplicativos
- Criar páginas mestre e detalhadas no Dreamweaver
- Criar páginas de pesquisa e de resultados
- Criar uma página de inserção de registro
- Criar uma página de registro de atualização no Dreamweaver
- Criar páginas de exclusão de registro no Dreamweaver
- Usar comandos ASP para modificar um banco de dados no Dreamweaver
- Criar uma página de registro
- Criar uma página de logon
- Criar uma página que apenas usuários autorizados podem acessar
- Proteger pastas no ColdFusion usando o Dreamweaver
- Usar componentes do ColdFusion no Dreamweaver
- Testar, visualizar e publicar sites
- Solução de problemas
a interface de usuário foi simplificada no Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das opções descritas neste artigo no Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo (em inglês).
Sobre os aplicativos da Web
Um aplicativo da Web é um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final de uma página só é determinado quando o visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com base nas ações do visitante, esse tipo é chamado de página dinâmica.
Os aplicativos da Web são criados para superar vários desafios e problemas. Esta seção descreve usos comuns para os aplicativos da Web e apresenta um exemplo simples.
Usos comuns dos aplicativos da Web
Os aplicativos da Web têm muitos usos tanto para os visitantes quanto para os desenvolvedores do site, inclusive os seguintes:
Permitem aos visitantes localizar informações de maneira rápida e fácil em um site rico em conteúdo.
Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em conteúdo na medida em que acharem cabível. Os exemplos incluem intranets de empresa, Microsoft MSDN (www.msdn.microsoft.com) e Amazon.com (www.amazon.com).
Colete, salve e analise dados fornecidos por visitantes do site.
Antigamente, os dados inseridos em formulários em HTML eram enviados como mensagens de email a funcionários ou aplicativos CGI para processamento. Um aplicativo da Web pode salvar os dados do formulário diretamente em um banco de dados, além de extrair os dados e criar relatórios baseados na Web para análise. Entre os exemplos estão páginas de bancos online, páginas de retirada de lojas, pesquisas e formulários com comentários feitos pelo usuário.
Atualize sites cujo conteúdo mude constantemente.
Um aplicativo da Web evita que o designer fique atualizando continuamente o HTML do site. Provedores de conteúdo como, por exemplo, editores de notícias fornecem conteúdo ao aplicativo da Web, e este atualiza o site automaticamente. Os exemplos incluem o Economist (www.economist.com) e CNN (www.cnn.com).
Exemplo de aplicativo da Web
Janet é designer profissional e, há muito tempo, a usuária do Dreamweaver responsável pela manutenção de sites da intranet e de Internet de uma empresa de médio porte com 1.000 funcionários. Certo dia, Chris, dos Recursos Humanos, chega até ela com um problema. O RH administra um programa de condicionamento físico que dá aos funcionários pontos para cada quilômetro percorrido andando, de bicicleta ou correndo. Cada funcionário deve informar seu total mensal de quilômetros em um email enviado para Chris. Ao final do mês, Chris reúne todas as mensagens de email e dá aos funcionários pequenos prêmios em dinheiro de acordo com sua pontuação total.
O problema de Chris é que o programa de condicionamento físico cresceu muito. Assim, muitos funcionários estão participando, e Chris é sobrecarregado com emails ao final de cada mês. Chris pergunta a Janet se há uma solução baseada na Web.
Janet propõe um aplicativo da Web baseado na intranet que realiza as seguintes tarefas:
Permite aos funcionários inserir a quilometragem em uma página da Web usando um formulário em HTML simples
Armazena a quilometragem do funcionário em um banco de dados
Calcula os pontos de condicionamento físico de acordo com os dados da quilometragem
Permite aos funcionários controlar o andamento mensal
Dá a Chris o acesso com um clique à pontuação total ao final de cada mês
Janet coloca o aplicativo em funcionamento antes do horário de almoço usando o Dreamweaver, que conta com as ferramentas de que ela precisa para criar esse tipo de aplicativo rápida e facilmente.
Como funciona um aplicativo de Web
Um aplicativo de Web é um conjunto de páginas de Web estáticas e dinâmicas. Uma página da Web estática é aquela que não se altera quando um visitante a solicita: o servidor Web envia a página para o navegador da Web solicitante sem modificá-la. Já uma página da Web dinâmica é modificada pelo servidor antes de ser enviada para o navegador solicitante. A natureza mutável da página justifica ela ser chamada de dinâmica.
Por exemplo, você poderia projetar uma página para exibir os resultados do condicionamento físico, ao mesmo tempo em que deixaria que determinadas informações (como, por exemplo, o nome do funcionário e os resultados) fossem determinadas quando a página fosse solicitada por um determinado funcionário.
As próximas seções descrevem mais detalhadamente como funcionam os aplicativos da Web.
Processar páginas da Web estáticas
Um site estático é formado por um conjunto de páginas em HTML relacionadas e arquivos hospedados em um computador com um servidor Web em execução.
Um servidor Web é o software que apresenta páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é gerada quando um visitante clica em um link em uma página da Web, seleciona um marcador em um navegador ou digita um URL na caixa de texto de endereço do navegador.
O conteúdo final de uma página da Web estática é determinado pelo designer da página e não é alterado quando ela é solicitada. Eis um exemplo:
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
Todas as linhas do código em HTML da página são escritas pelo designer antes da página ser colocada no servidor. Como o HTML, uma vez no servidor, não é alterado, esse tipo de página é chamado de página estática.
Mais especificamente, uma página “estática” pode não ser tão estática assim. Por exemplo, uma imagem de sobreposição ou um conteúdo Flash (um arquivo SWF) pode dar vida a uma página estática. No entanto, essa documentação se refere a uma página como sendo estática caso ela seja enviada para o navegador sem modificações.
Quando recebe uma solicitação de uma página estática, o servidor Web lê a solicitação, localiza a página e a envia para o navegador solicitante, como mostra o seguinte exemplo:
A. Navegador da Web solicita a página estática. B. Servidor Web localiza a página. C. Servidor Web envia a página para o navegador solicitante.
No caso dos aplicativos da Web, certas linhas de código não são determinadas quando o visitante solicita a página. Para que a página seja enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo é abordado na seguinte seção.
Processar páginas dinâmicas
Ao receber uma solicitação de uma página da Web estática, um servidor Web envia a página diretamente para o navegador solicitante. Porém, ao receber uma solicitação de uma página dinâmica, o servidor Web reage de maneira diferente: ele passa a página para uma parte especial do software responsável pela conclusão da página. Esse software especial é chamado de servidor de aplicativo.
O servidor de aplicativo lê o código na página, conclui a página de acordo com as instruções do código e, em seguida, remove o código da página. O resultado é uma página estática que o servidor de aplicativo passa para o servidor Web que, em seguida, envia a página para o navegador solicitante. Todo o obtido pelo navegador quando a página chega é HTML puro. Eis uma visualização do processo:
A. Navegador da Web solicita a página dinâmica. B. Servidor Web localiza e passa a página para o servidor de aplicativo. C. Servidor de aplicativo rastreia a página em busca de instruções e conclui a página. D. Servidor de aplicativo passa novamente a página concluída para o servidor Web. E. Servidor Web envia a página concluída para o navegador solicitante.
Acessar um banco de dados
Um servidor de aplicativo permite trabalhar com recursos do servidor como, por exemplo, bancos de dados. Por exemplo, uma página dinâmica pode instruir o servidor de aplicativo para extrair dados de um banco de dados e inseri-los no HTML da página. Para obter mais informações, consulte www.adobe.com/go/learn_dw_dbguide_br.
O uso de um banco de dados para armazenar o conteúdo permite separar o design do site do conteúdo que você deseja exibir para os usuários do site. Em vez de escrever arquivos em HTML individuais para cada página, você só precisa escrever uma página, ou modelo, para os diferentes tipos de informações que deseja apresentar. Em seguida, você pode carregar o conteúdo em um banco de dados e, em seguida, fazer com que o site recupere esse conteúdo em resposta a uma solicitação do usuário. Você também pode atualizar as informações em uma única fonte e, em seguida, preencher essa alteração em todo o site sem ter que editar manualmente todas as páginas. Você pode usar o Adobe Dreamweaver para criar formulários da Web a fim de inserir, atualizar ou excluir dados do banco de dados.
A instrução para extrair dados de um banco de dados é chamada de consulta ao banco de dados. Uma consulta consiste em critérios de pesquisa expressados em uma linguagem de banco de dados chamada SQL (Linguagem de consulta estruturada). A consulta SQL é escrita em scripts ou tags do servidor da página.
Um servidor de aplicativo não pode se comunicar diretamente com um banco de dados porque o formato próprio do banco de dados processa os dados indecifráveis de maneira muito semelhante a um documento do Microsoft Word aberto no Bloco de Notas ou BBEdit talvez seja indecifrável. O servidor de aplicativo pode se comunicar com o banco de dados apenas por meio de um driver de banco de dados: software que funciona como um intérprete entre o servidor de aplicativo e o banco de dados.
Depois que o driver estabelece a comunicação, a consulta é executada no banco de dados e um conjunto de registros é criado. Um conjunto de registros é um conjunto de dados extraídos de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de aplicativo, que usa os dados para completar a página.
Eis uma consulta ao banco de dados simples escrita em SQL:
SELECT lastname, firstname, fitpoints FROM employees
A instrução cria um conjunto de registros com três colunas e o preenche com linhas que contêm sobrenome, nome e pontos em condicionamento físico de todos os funcionários no banco de dados. Para obter mais informações, consulte www.adobe.com/go/learn_dw_sqlprimer_br.
O seguinte exemplo mostra o processo de consulta a um banco de dados e o retorno dos dados ao navegador:
A. Navegador da Web solicita a página dinâmica. B. Servidor Web localiza e passa a página para o servidor de aplicativo. C. Servidor de aplicativo rastreia a página em busca de instruções. D. Servidor de aplicativo envia consulta ao driver de banco de dados. E. Driver executa a consulta no banco de dados. F. Conjunto de registros é devolvido ao driver. G. Driver passa o conjunto de registros para o servidor de aplicativo. H. Servidor de aplicativo insere dados na página e, em seguida, passa a página para o servidor Web. I. Servidor Web envia a página concluída para o navegador solicitante.
Você pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados apropriado esteja instalado no servidor.
Caso pretenda criar pequenos aplicativos de baixo custo, você pode usar um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais à empresa, você pode usar um banco de dados baseado em servidor como, por exemplo, um criado no Microsoft SQL Server, no Oracle 9i ou no MySQL.
Caso o banco de dados esteja localizado em um sistema que não seja o servidor Web, verifique se há uma conexão rápida entre os dois sistemas para que o aplicativo da Web possa operar com rapidez e eficiência.
Criar páginas dinâmicas
A criação de uma página dinâmica consiste em escrever primeiramente o HTML e, em seguida, adicionar os scripts ou as tags do servidor ao HTML para tornar a página dinâmica. Quando você exibe o código resultante, a linguagem aparece incorporada ao HTML da página. Dessa forma, essas linguagens são conhecidas como linguagens de programação com HTML incorporado. O seguinte exemplo básico usa a Linguagem de markup do ColdFusion (CFML):
observação: o suporte para CFML foi removido do Dreamweaver CC e posterior.
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput> <!--- embedded instructions end here ---> </body> </html>
As instruções incorporadas à página realizam as seguintes ações:
-
-
Insira o valor da variável, "Sales", ao código em HTML.
O servidor de aplicativo retorna a seguinte página ao servidor Web:
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>
O servidor Web envia a página para o navegador solicitante, que a exibe da seguinte forma:
Sobre a Trio Motors
A Trio Motors é uma grande montadora de automóveis.
Não deixe de visitar a nossa página de vendas.
Você escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponível no servidor. Estas são as linguagens mais conhecidas para as tecnologias de servidor que recebem suporte do Dreamweaver:
Tecnologia de servidor |
Linguagem |
ColdFusion |
Linguagem de markup do ColdFusion (CFML) |
ASP (Páginas ativas do servidor) |
VBScript JavaScript |
PHP |
PHP |
O Dreamweaver pode criar os scripts ou as tags do servidor necessárias ao funcionamento das páginas, ou você pode escrevê-los manualmente no ambiente de codificação do Dreamweaver.
Terminologia do aplicativo da Web
Esta seção define os termos mais usados em relação aos aplicativos da Web.
Um servidor de aplicativo
Software que ajuda um servidor Web a processar páginas da Web que contenham scripts ou tags do servidor. Quando uma página dessas é solicitada no servidor, o servidor Web a entrega ao servidor de aplicativo para que ele a processe antes do envio da página para o navegador. Para obter mais informações, consulte Como funciona um aplicativo de Web.
Servidores de aplicativo comuns incluem ColdFusion e PHP.
Um banco de dados
Um conjunto de dados armazenados em tabelas. Cada uma das linhas de uma tabela constitui um registro e cada coluna, um campo no registro, como mostrado no seguinte exemplo:
Um driver de banco de dados
Software que funciona como intérprete entre um aplicativo da Web e um banco de dados. Os dados em um banco de dados são armazenados em um formato próprio. Um driver de banco de dados permite ao aplicativo da Web ler e manipular dados que outrora seriam indecifráveis.
Um sistema de gerenciamento do banco de dados
(DBMS ou sistema de banco de dados) Software usado para criar e manipular bancos de dados. Entre os sistemas de banco de dados mais comuns estão Microsoft Access, Oracle 9i e MySQL.
Uma consulta ao banco de dados
A operação que extrai um conjunto de registros de um banco de dados. Uma consulta consiste em critérios de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por exemplo, a consulta pode especificar que apenas determinadas colunas ou certos registros sejam incluídos no conjunto.
Uma página dinâmica
Uma página da Web personalizada por um servidor de aplicativo para que a página seja enviada a um navegador.
Um conjunto de registros
Um conjunto de dados extraídos de uma ou mais tabelas em um banco de dados, como mostrado no seguinte exemplo:
Um banco de dados relacional
Um banco de dados que contém mais de uma tabela, com as tabelas compartilhando os dados. O seguinte banco de dados é relacional porque duas tabelas compartilham a mesma coluna DepartmentID.
Uma tecnologia de servidor
A tecnologia que o servidor de aplicativo usa para modificar páginas dinâmicas durante o runtime.
O ambiente de desenvolvimento do Dreamweaver dá suporte às seguintes tecnologias de servidor:
Adobe® ColdFusion®
Microsoft ASP (Páginas ativas do servidor)
PHP: PHP (Pré-processador de hipertexto)
Você também pode usar o ambiente de codificação do Dreamweaver a fim de desenvolver páginas para qualquer outra tecnologia de servidor não listada.
Uma página estática
Uma página da Web não modificada por um servidor de aplicativo para que a página seja enviada a um navegador. Para obter mais informações, consulte Processamento de páginas da Web estáticas.
Um aplicativo da Web
Um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final dessas páginas só é determinado quando um visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com base nas ações do visitante, esse tipo é chamado de página dinâmica.
Um servidor Web
Software que envia páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é gerada quando um visitante clica em um link em uma página da Web no navegador, seleciona um marcador no navegador ou digita um URL na caixa de texto de endereço do navegador.
Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server.