1 introducao

143
Usando o Dreamweaver MX Copyright © 1997-2002 Macromedia, Inc. Todos os direitos reservados. Marcas comerciais e Agradecimentos

Upload: api-3742123

Post on 07-Jun-2015

432 views

Category:

Documents


7 download

TRANSCRIPT

Page 1: 1 Introducao

Usando o

Dreamweaver MX Copyright © 1997-2002

Macromedia, Inc. Todos os direitos reservados.

Marcas comerciais e Agradecimentos

Page 2: 1 Introducao
Luis Carlos Quinhone
Sequência dos Arquivos Introdução Tutoriais Princípios básicos do Dreamweaver Como preparar a criação de sites dinâmicos Como trabalhar com códigos de página Como projetar um layout de página Como adicionar conteúdo Como trabalhar com comportamentos e animações Como trabalhar com várias páginas Como tornar as páginas dinâmicas Como desenvolver aplicativos em pouco tempo Apêndices
Page 3: 1 Introducao

Guia de introduçã o

Familiarize-se com as ferramentas de projeto visual, codificaçã o e desenvolvimento de aplicativos do Dreamweaver MX criando um site simples, mas funcional.

Esta seção contém os seguintes capítulos:

l Introdução l Como criar seu primeiro site da Web com o Dreamweaver l Como editar códigos no Dreamweaver l Como compreender os aplicativos para a Web l Como desenvolver um aplicativo para a Web no Dreamweaver MX l Como instalar um servidor Web no Windows l Configuração de um exemplo de site ColdFusion l Configuração de um exemplo de site ASP.NET l Configuração de um exemplo de site ASP l Configuração de um exemplo de site JSP l Configuração de um exemplo de site PHP l Como solucionar problemas de conexão no banco de dados

Introdu çã o

Este guia foi elaborado como introdução ao Macromedia Dreamweaver MX para usuários que não estão familiarizados com os principais aspectos do programa. As lições contidas neste guia o conduzirão através do processo de criação de um site da Web simples, mas funcional.

O Macromedia Dreamweaver MX é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que gostam do controle da codificação manual HTML ou para os que preferem trabalhar em um ambiente de edição visual, o Dreamweaver fornece ferramentas úteis para aprimorar a sua experiência de cria ção para Web.

Os recursos de edição visual no Dreamweaver permitem criar páginas, de modo rápido, sem escrever uma linha de código. Se você preferir inserir códigos manualmente, no entanto, o Dreamweaver também inclui diversas ferramentas e recursos relacionados à codificação. O Dreamweaver o ajudará a construir aplicativos para a Web dinâmicos com suporte de banco de dados utilizando linguagens de servidor como ASP, ASP.NET, ColdFusion ColdFusion Markup Language (CFML), JSP e PHP.

Nota: Este guia não contém todos os recursos do Dreamweaver MX, nem tem o objetivo de ser uma introdução ao web design. Para obter informações detalhadas sobre o Dreamweaver, consulte Dreamweaver Ajuda (selecione Como utilizar o Dreamweaver no menu de ajuda).

 

Página 1 de 141Guia de introduçã o

Page 4: 1 Introducao

Como aprender as noções básicas do Dreamweaver

Antes de utilizar o Dreamweaver, leia este Guia de introdução (consulte Como utilizar este guia). Em seguida, prossiga com os outros recursos, como os tutorais, sistema de ajuda e o centro de suporte (consulte Outros recursos).

Como utilizar este guia

O guia é dividido em vários capítulos. Leia os capítulos em seqüência ou o restante desta introdução e comece com o capítulo que melhor lhe convier ou de acordo com sua experiência. Dentro de cada capítulo, recomendamos seguir as lições em seqüência. A ordem das lições foi elaborada para simular basicamente uma seqüência de cria ção de site da Web.

A lista a seguir descreve o conteúdo de cada capítulo:

l Esta introdução explica como instalar o Dreamweaver e apresenta a área de trabalho do Dreamweaver. Leia este capítulo primeiro seguido de outros capítulos de seu interesse.

Nota: Muitos aspectos da área de trabalho foram modificados nesta versão do Dreamweaver, portanto, recomendamos que você leia esta introdução mesmo se você já tenha utilizado o Dreamweaver.

l Como criar seu primeiro site da Web com o Dreamweaver destina-se a usuários que já criaram páginas para a Web, mas nunca utilizaram o Dreamweaver. Este capítulo descreve os aspectos básicos para criar um site para a Web pequeno e funcional utilizando as ferramentas de criação visual do Dreamweaver.

l Como editar códigos no Dreamweaver destina-se principalmente a usuários experientes em codificação manual (como usuários do Macromedia HomeSite), mas também é recomendando para qualquer pessoa que utiliza ferramentas visuais e gostaria de iniciar-se na edi ção de códigos. Ele descreve os fundamentos e uso das ferramentas de edição de códigos do Dreamweaver.

l Como compreender os aplicativos para a Web explica os conceitos e funcionamento dos aplicativos para a Web.

l Como desenvolver um aplicativo para a Web no Dreamweaver MX destina-se a qualquer usuário experiente na criação de páginas estáticas (utilizando o Dreamweaver ou não) e que gostaria de aprender a criar aplicativos para a Web com banco de dados. Esta seção guiará o usuário através do processo de construção de um aplicativo para a Web simples.

l Um conjunto de instruções de configuração fornece informações sobre como instalar um servidor web e como configurar sites dinâmicos utilizando várias linguagens de servidor.

l Um conjunto de tutoriais fornece instruções detalhadas para que você possa realizar algumas tarefas comuns.

As lições deste guia utilizam layouts de página e conteúdo de exemplo fornecidos com o Dreamweaver. Se preferir, pode criar seu primeiro site no Dreamweaver utilizando seus próprios layouts e conteúdo, mas as li ções tornam-se mais fáceis de acompanhar se o conteúdo de exemplo fornecido for utilizado.

 

 

 

Página 2 de 141Guia de introdução

Page 5: 1 Introducao

Outros recursos

O Dreamweaver contém vários recursos para ajudá-lo a aprender rapidamente a utilizar o programa e tornar-se um experiente criador de suas páginas e sites da Web. Estes recursos incluem os seguintes:

l O conjunto de tutoriais contém lições sobre tópicos individuais, fornecendo mais informações sobre áreas específicas que o restante do Guia de introdução.

l A ajuda do Dreamweaver inclui informações detalhadas sobre como utilizar todos os aspectos do Dreamweaver, bem com uma versão HTML do Guia de introdução e dos tutoriais. É exibida no visualizador da ajuda do sistema operacional: Ajuda HTML Microsoft (Windows).

l Como utilizar o Dreamweaver é uma versão PDF do conteúdo de ajuda do Dreamweaver (excluindo o Guia de introdução e os tutoriais), que fornece informações sobre como utilizar os comandos e recursos do Dreamweaver. Certos tópicos de referência não são incluídos na versão PDF. Para obter mais informações sobre esses tópicos, consulte a ajuda do Dreamweaver. O arquivo PDF está disponível no Dreamweaver CD.

Além disso, é possível encontrar dicas regularmente atualizadas, notas técnicas, exemplos, tutoriais e informações na central de suporte do Dreamweaver.

Para obter mais detalhes sobre recursos informacionais e tutoriais do Dreamweaver, consulte Introdução ao Dreamweaver.

Convenções tipográficas

As seguintes convenções tipográficas são utilizadas na Ajuda do Dreamweaver:

l Os itens de menu são mostrados neste formato: nome do menu > nome do item de menu. Os itens nos submenus são mostrados neste formato: nome do menu > nome do submenu > nome do item de menu.

l Fonte do código indica os nomes de tags e atributos HTML, bem como o texto utilizado nos exemplos.

l Fonte do código em itálico indica os itens substituíveis (às vezes denominados metassímbolos) no código.

l Texto romano em negrito indica o texto a ser digitado exatamente conforme a indicação.

   

 

 

   

Página 3 de 141Guia de introdução

Page 6: 1 Introducao

Como instalar e executar o Dreamweaver

Esta seção descreve os requisitos mínimos de sistema necessários para o funcionamento do Dreamweaver (consulte Requisitos do sistema) e explica como instalar o Dreamweaver (consulte Como instalar o Dreamweaver). Explica também como personalizar o Dreamweaver de acordo com suas preferências pessoais em um sistema operacional multiusuário, como Windows XP (consulte Como utilizar o Dreamweaver em ambiente multiusuário).

Requisitos do sistema

Os seguintes componentes de hardware e software são necessários para executar o Dreamweaver.

Requisitos mínimos de sistema para Windows:

l Processador Intel Pentium II ou equivalente, 300 MHz ou superior l Windows 98, Windows 2000, Windows NT (com Service Pack 3 ou superior), Windows ME

ou Windows XP l A versão 4.0 ou mais avançada do Netscape Navigator ou do Microsoft Internet Explorer l 96 MB de memória RAM disponível (recomenda-se 128MB) l 275 MB de espaço disponível em disco l Monitor colorido configurado para 256 cores, resolução de 800 x 600 pixels (recomenda-

se uma resolução de 1024 x 768 pixels) l Uma unidade de CD-ROM

Requisitos de sistema para Macintosh:

l Power Macintosh G3 ou superior l Mac OS 9.1, Mac OS 9.2.1 Mac OS X 10.1 ou superior l Mac OS Runtime for Java (MRJ) 2.2 ou superior (incluso no CD do Dreamweaver MX) l A versão 4.0 ou mais avançada do Netscape Navigator ou do Microsoft Internet Explorer l 96 MB de memória RAM (recomenda-se 128 MB) l 275 MB de espaço disponível em disco l Monitor colorido configurado para 256 cores, resolução de 800 x 600 pixels (recomenda-

se uma resolução de 1024 x 768 pixels) l Uma unidade de CD-ROM

Como instalar o Dreamweaver

Siga estas etapas para instalar o Dreamweaver em um computador com o sistema Windows ou Macintosh.

Nota: Em determinados sistemas operacionais, somente será possível instalar ou desinstalar o

 

 

 

 

Página 4 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 7: 1 Introducao

Dreamweaver se o usuário tiver privilégios administrativos no computador. Para obter mais informações, veja Como utilizar o Dreamweaver em ambiente multiusuário.

Para instalar o Dreamweaver:

1. Insira o CD do Dreamweaver na unidade de CD-ROM do computador. 2. Escolha uma das seguintes opções:

¡ No Windows, escolha Iniciar > Executar. Clique em Procurar e selecione o arquivo Installer.exe no CD do Dreamweaver MX. Ao surgir a caixa de diálogo Executar, clique em OK para iniciar a instala ção.

¡ No Macintosh, clique duas vezes no ícone do instalador do Dreamweaver MX. 3. Siga as instruções na tela. 4. Se for solicitado, reinicie o computador.

Como utilizar o Dreamweaver em ambiente multiusuário

Em sistemas operacionais multiusuário, como Windows NT, Windows 2000, Windows XP ou Mac OS X, os aplicativos s ão geralmente instalados em uma pasta na qual todos os usuários podem executá-los, como C:\Programas Arquivos. Somente usuários com privilégios administrativos podem instalar aplicativos nas pastas em um sistema operacional multiusuário.

É possível personalizar o Dreamweaver de várias maneiras. O Dreamweaver impede que a configuração personalizada de um usu ário afete a configuração personalizada de outro usuário. Para que isso ocorra, na primeira execução do Dreamweaver em um sistema operacional multiusuário que o reconheça, o aplicativo criará cópias de vários arquivos de configuração para você. Estes arquivos de configuração do usuário são armazenados em uma pasta.

Nota: Em sistemas operacionais mais antigos (Windows 98 e Windows ME), todos os usuários compartilham um único conjunto de arquivos de configuração do Dreamweaver, mesmo que o sistema esteja configurado para oferecer suporte a vários usuários.

Se você reinstalar ou atualizar o Dreamweaver após instalar o Dreamweaver MX, o Dreamweaver efetua automaticamente c ópias backup dos arquivos de configuração do usuário existentes, de modo que se esses arquivos forem personalizados manualmente, você ainda terá acesso às modificações efetuadas. Para obter informações sobre a personalização dos arquivos de configuração manualmente, veja “Customizing Dreamweaver” no Centro de suporte da Macromedia.

Ao desinstalar o Dreamweaver de um sistema multiusuário, o Dreamweaver remove cada pasta de configuração do usuário automaticamente.

Como registrar o Dreamweaver MX

Para obter suporte adicional da Macromedia, recomenda-se registrar sua cópia do Macromedia

 

 

 

 

Página 5 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 8: 1 Introducao

Dreamweaver MX via Internet ou pelo correio.

Ao registrar o programa você pode inscrever-se para receber notícias recentes sobre atualizações e novos produtos da Macromedia. Você também pode se inscrever para receber informações periódicas por e-mail sobre atualizações de produtos e conteúdo dos sites www.macromedia.com e www-euro.macromedia.com na Web.

Para registrar o Dreamweaver MX, siga um dos procedimentos abaixo:

l Selecione Ajuda > Registro on-line e preencha o formulário eletrônico. l Selecione Ajuda > Imprimir o registro para imprimir o formulário e enviá-lo pelo correio

ao endereço exibido no formulário.

Para familiarizar-se com a área de trabalho do Dreamweaver

No Windows, o Dreamweaver MX fornece duas opções de layout de área de trabalho: um layout-integrado-em uma única janela e um layout flutuante, semelhante ao do Dreamweaver 4.

No Macintosh, está disponível apenas o layout flutuante.

Esta seção explica como selecionar um layout de área de trabalho inicial no Windows (consulte Escolha de um layout de área de trabalho (no Windows)). Esta seção também descreve os elementos primários da área de trabalho no Windows (consulte Visão geral das janelas e painéis e Visão geral dos menus).

Escolha de um layout de área de trabalho (no Windows)

No Windows, ao iniciar o Dreamweaver pela primeira vez, uma caixa de diálogo permite selecionar um layout de área de trabalho. Caso você mude de idéia posteriormente, é possível alternar para uma área de trabalho diferente utilizando a caixa de diálogo Preferências.

   

 

 

Página 6 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 9: 1 Introducao

Para escolher um layout de área de trabalho:

Selecione um dos seguintes layouts:

A área de trabalho do Dreamweaver MX é integrada e utiliza a MDI (Multiple Document Interface, interface de múltiplos documentos) na qual todas as janelas de documento e os painéis estão integrados em uma janela de aplicativo maior, com os grupos de painéis encaixados à direita. Este layout é recomendado para a maioria dos usuários.

Nota: Este guia pressupõe que você esteja utilizando a área de trabalho integrada do Dreamweaver MX em sua maior parte.

A área de trabalho Estilo do HomeSite/Coder do Dreamweaver MX consiste na mesma área de trabalho integrada, porém os grupos de painéis estão encaixados à esquerda, apresentando um layout semelhante ao utilizado pelo Macromedia HomeSite e o Macromedia ColdFusion Studio, e as janelas de documento mostram a visualização de código como padrão. Este layout é recomendado para usuários do HomeSite ou ColdFusion Studio e outros usuários mais experientes j á familiarizados com o layout da área de trabalho. Para utilizar este layout, selecione a opção Área de trabalho do Dreamweaver MX e selecione a opção Estilo do HomeSite/Coder.

Nota: Os grupos de painéis podem ser encaixados em ambos os lados da área de trabalho, em qualquer dos layouts de área de trabalho.

A área de trabalho do Dreamweaver 4 apresenta um layout semelhante ao utilizado no Dreamweaver 4, no qual cada documento está em uma janela flutuante individual. Os grupos de painéis são encaixados juntos, mas não estão situados dentro da janela maior do aplicativo. Recomendado somente para usuários do Dreamweaver 4 que preferem utilizar uma área de trabalho mais familiar.

Visão geral das janelas e painéis

   

Página 7 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 10: 1 Introducao

A seguir uma breve descri ção janelas e elementos da área de trabalho do Dreamweaver. Alguns aspectos específicos sobre como utilizar estas janelas serão descritos posteriorment neste guia. Para obter informações mais detalhadas, consulte a ajuda do Dreamweaver (Ajuda > Como utilizar o Dreamweaver).

A janela Bem-vindo contém dicas sobre a configuração da área de trabalho, para diversos objetivos, e informações sobre os novos recursos, para as pessoas que utilizaram as versões anteriores do Dreamweaver.

A barra Inserir contém botões para inserção de vários tipos de “objetos”, como imagens, tabelas e camadas em um documento. Cada objeto é uma parte do código HTML, que permite ao usuário definir vários atributos à medida que são inseridos. Por exemplo: é possível inserir uma imagem clicando no ícone de Imagem, na barra Inserir. Se preferir, inclua os objetos utilizando o menu Inserir em vez da barra Inserir.

A barra de ferramentas do documento contém botões e menus pop-up que possibilitam diferentes visualizações da janela do documento (visualização do projeto e de código), várias opções de exibição e algumas operações comuns, como a visualização no navegador.

A janela do documento exibe o documento que está sendo criado e editado.

O inspetor de propriedades permite exibir e alterar várias propriedades do objeto ou texto

Página 8 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 11: 1 Introducao

selecionado. Cada tipo de objeto possui diferentes propriedades.

Grupos de painéis são conjuntos de painéis inter-relacionados sob um cabeçalho. Para expandir um grupo de painéis, clique na seta de expansão, à esquerda do nome do grupo; para desanexar um grupo de painéis, arraste a pinça, na extremidade esquerda da barra de título do grupo.

O painel Site permite gerenciar os arquivos e as pastas que compõem o site. Para obter mais informações, veja Configurar um site local. Esse painel também possibilita a exibição de todos os arquivos no disco local, como no Windows Explorer e no Finder (no Macintosh).

O Dreamweaver fornece muitos outros painéis, inspetores e janelas que não são mostrados nesta seção, como o painel Histórico e o inspetor de código. Para abrir os painéis, inspetores e janelas do Dreamweaver, utilize o menu Janela.

Visão geral dos menus

Esta seção fornece uma breve descrição dos menus do Dreamweaver.

O menu Arquivo e menu Editar contêm os comandos padrão de menu, como Novo, Abrir, Salvar, Cortar, Copiar e Colar. O menu Arquivo também contém vários outros comandos para exibição e edi ção de documentos, como visualização no navegador e imprimir o código. O menu Editar inclui comandos de seleção e busca, como selecionar a tag-mãe, localizar e substituir e fornece acesso ao editor de atalhos do teclado e ao editor de bibliotecas de tags. O menu Editar também oferece acesso às preferências.

O menu Exibir permite visualizar vários modos do documento (como visualização de código e visualização do projeto), além de exibir e ocultar diversos tipos de elementos de página e ferramentas do Dreamweaver.

O menu Inserir oferece uma alternativa à barra Inserir para inclusão de objetos em seu documento.

O menu Modificar permitir modificar as propriedades do elemento ou item de página selecionado. Com este menu é possível editar atributos de tags, modificar tabelas e elementos da tabela e executar várias ações itens de biblioteca e modelos.

O menu Texto permite formatar facilmente qualquer texto.

O menu Comandos fornece acesso a uma variedade de comandos, incluindo um comando para formatar códigos de acordo com suas preferências de formatação, um para criar álbuns de fotos e outro para otimizar a imagem utilizando o Macromedia Fireworks.

O menu Site contém itens de menu para criar, abrir e editar sites gerenciar arquivos no site atual (Macintosh).

O menu Janela fornece acesso a todos os painéis, inspetores e janelas no Dreamweaver.

O menu Ajuda fornece acesso à documentação do Dreamweaver, incluindo sistemas de ajuda para utilizar o Dreamweaver, criar extensões para o Dreamweaver material de referência para diversas linguagens.

 

 

Página 9 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 12: 1 Introducao

Além dos menus da barra de menu, o Dreamweaver contém diversos menus contextuais que dão acesso fácil a comandos úteis pertencentes à seleção ou área. Para exibir um menu contextual, clique com o botão direito do mouse no item de uma janela. Todos is itens nos menus contextuais pode ser localizados nos menus da barra de menu.

Exibir um site de exemplo

Os exemplos utilizados neste guia forem retirados de um site de exemplo pequeno para uma empresa fictícia chamada Locadora de veículos Global. Antes de iniciar as lições, visualize o site de exemplo em um navegador para ter uma idéia do que você criará com as lições.

Para visualizar o site de exemplo no navegador:

1. Abra a pasta Samples na pasta do aplicativo Dreamweaver. Abra a pasta GettingStarted em seguida e a pasta FinalSite.

2. Clique duas vezes no arquivo index.htm na pasta FinalSite para visualizar o site no navegador.

3. Após visualizar o site de exemplo, continue com o capítulo do guia de sua preferência.

Como criar seu primeiro site da Web com o Dreamweaver

Este capítulo oferece uma série de breves lições para orientá-lo através do processo de criação de um site estático simples utilizando as ferramentas de criação visuais do Macromedia Dreamweaver MX. Para obter mais informações sobre como utilizar as ferramentas de codificação manual do Dreamweaver, consulte o Como editar códigos no Dreamweaver. Para mais informações sobre criação de um aplicativo para a web dinâmico com a geração de bancos de dados, consulte o Como compreender os aplicativos para a Web.

A ordem das lições neste capítulo segue um possível fluxo de trabalho para a criação de um site. Ao criar seus próprios sites, é possível acompanhar a sequência que achar mais adequada.

Para criar um site estático:

1. Planejar e elaborar (veja Configurar um site local e Adicionar propriedades ao site). 2. Crie páginas (veja Como criar e salvar uma nova página). 3. Crie um layout e configurar as páginas (veja Ajuste o layout e Defina o título da página). 4. Adicionar conteúdo às suas páginas (veja Adicionar texto formatado e Adicionar imagens). 5. Crie links entre páginas (veja Adicionar link de texto entre as páginas e Crie imagens

cambiáveis para links gráficos). 6. Publicar o site (veja Visualizar no navegador e Configurar um site remoto e publicar).

   

   

 

Página 10 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 13: 1 Introducao

Configurar um site local

O método mais comum para se criar um site utilizando o Dreamweaver é elaborar e editar páginas no disco local e carregar as cópias das páginas a um servidor web remoto para publicá-las. É possível utilizar o Dreamweaver de outras formas (como executar um servidor web em seu computador local, enviar os arquivos a um servidor temporário (staging server) ou utilizar um disco anexo como o disco local), mas as li ções deste guia levam em consideração que você esteja trabalhando no computador local e efetuando upload a um servidor remoto.

No Dreamweaver, a palavra site é utilizada como abrevia ção para os seguintes itens:

l Site da web: conjunto de páginas em um servidor, que pode ser visualizado pelo visitante através de um navegador da web.

l Site remoto : arquivos contidos no servidor que compõe um site da Web, do ponto de vista de seu autor em vez do ponto de vista de um visitante.

l Site local: arquivos no disco local que correspondem aos arquivos no site remoto. Os arquivos são editados em seu disco local e carregados no site remoto.

l Dreamweaver defini ção do site : conjunto de características de definição para um site local, além das informações sobre como o site local corresponde a um site remoto.

Normalmente, é preciso planejar um site da Web antes de cria -lo: calcule o número de páginas, qual conteúdo será exibido em cada página e como as páginas serão vinculadas entre si. Nesta lição, entretanto, o site a ser criado é muito simples, portanto, não necessita de muito planejamento: ele consistirá de apenas duas páginas com links entre elas. Portanto, para este site, você pode omitir o planejamento e prosseguir com a criação de uma defini ção do site.

Uma definição do site pode ser criada através da caixa de diálogo Definição do site. Esta caixa de diálogo pode ser preenchida de dois modos: Básico ou Avançado. O método básico o orienta através da configuração do site passo a passo. Se preferir editar as informações do site sem ajuda, clique na guia Avançado.

O procedimento a seguir descreve como definir as opções na versão básica da caixa de di álogo, que também é conhecido como Assistente de definição do site. Para mais detalhes sobre como definir as opções avançadas, clique na guia Avançado e no botão de ajuda.

Para definir um site:

1. Escolha Site > Novo site (ou seja, selecione Novo site no menu Site).

A caixa de diálogo Definição do site é exibida.

2. Se a caixa de di álogo estiver exibindo a guia Avançado, clique em Básico.

A primeira tela do Assistente de definição do site aparece solicitando que você digite um nome para o site.

3. Na caixa de texto, digite um nome para identificar o site no Dreamweaver. Escolha o nome de sua preferência. Por exemplo: o site pode ter o nome “aluguel de ve ículos Global”.

 

Página 11 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 14: 1 Introducao

4. Clique em Avançar para prosseguir ao passo seguinte.

A tela seguinte do assistente será exibida perguntando se você deseja trabalhar com uma tecnologia de servidor.

5. Selecione a opção Não para indicar que, no momento, este site é um site estático, sem páginas dinâmicas.

Para configurar um site para criar um aplicativo para a web, é preciso selecionar um tipo de documento dinâmico, como Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) ou PHP: Hypertext Preprocessor (PHP), e forneça as informações sobre o servidor de aplicativos (para mais informações, consulte o Como desenvolver um aplicativo para a Web no Dreamweaver MX).

6. Clique em Avançar para prosseguir ao passo seguinte.

A tela seguinte do assistente aparece perguntando se desejar trabalhar com seus arquivos.

Página 12 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 15: 1 Introducao

7. Selecione a opção “Editar as cópias locais no meu computador e, em seguida, efetuar o upload para o servidor quando terminar (recomendável).”

Há diversas maneiras de se trabalhar com arquivos durante o desenvolvimento de um site, mas para fins desta li ção, selecione esta opção.

8. A caixa de texto permite especificar uma pasta no disco local onde o Dreamweaver deverá armazenar a versão local dos arquivos do site. É mais fácil especificar um nome de pasta exato se você pesquisar a pasta em vez de digitar o caminho, portanto, clique no ícone da pasta próximo à caixa de texto.

A caixa de diálogo Escolha a pasta raiz local do site será exibida.

9. Na caixa de diálogo Escolha a pasta raiz local do site, comece navegando até uma pasta em seu disco local no qual todos os sites estão armazenados. Não clique em OK ainda.

Nota: Esta pasta com os sites eventualmente conterá sites múltiplos, portanto, não escolha a pasta de sites como a pasta raiz local. Esta pasta raiz local será criada em seguida para este site individual dentro da pasta de sites.

Se ainda não houver uma pasta de sites, cria uma agora (com o botão de criação de pastas na caixa de diálogo Escolha a pasta raiz local do site). Denomine a pasta como Sites. O local indicado para a pasta de sites depende do sistema operacional:

¡ No Windows, se ainda não existir um lugar para armazenar os sites, crie uma pasta no top level da unidade C e denomine-a de Sites. Isto significa que o caminho para a pasta é C:\Sites.

10. Ainda na caixa de diálogo Escolha a pasta raiz local do site, crie uma nova pasta nova dentro da pasta Sites. Nomeie a nova pasta Inicial e clique em OK para sair da caixa de diálogo Escolha a pasta raiz local do site.

Esta nova pasta é a pasta raiz local de seu site.

11. Clique em Avançar para prosseguir ao passo seguinte.

A tela seguinte do assistente surgirá perguntando se você deseja conectar-se ao servidor remoto.

Página 13 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 16: 1 Introducao

12. Por enquanto, escolha Nenhum no menu pop-up. Clique em Avançar para prosseguir ao passo seguinte.

A tela seguinte do assistente se abre exibindo um resumo das configurações.

13. Clique em Concluir.

É possível configurar as informações sobre o site remoto posteriormente (veja Configurar um site remoto e publicar). No momento, as informações do site locais são suficientes para a cria ção de uma página.

Uma mensagem de alerta informará que o Dreamweaver está prestes a criar o cache do site. Este cache do site é um recurso que o Dreamweaver utiliza para armazenar informações sobre o site para tornas as operações de acesso ao site mais rápidas.

14. Clique em OK para o Dreamweaver criar o cache do site.

O painel Site exibirá agora a nova pasta raiz local para o site atual junto com um ícone para que o usuário possa visualizar as unidades locais em forma de árvore hierárquica. O ícone é denominado Área de trabalho no Windows.

O painel Site normalmente exibe todos os arquivos e pastas do site, mas por enquanto seu site não contém nenhum arquivo ou pastas. Quando houver arquivos em um site, a lista de arquivos no painel Site atua como um gerenciador de arquivos, permitindo ao usuário copiar, colar, excluir, mover e abrir arquivos da mesma maneira que na área de trabalho do computador.

Se houver um conjunto de arquivos HTML locais que você deseja utilizar para criar um site da Web, é possível utilizar navegador de arquivos no painel Site para copiar esses arquivos à pasta recém-criada do site. No entanto, é possível concluir as lições deste guia utilizando os arquivos fornecidos pelo Dreamweaver antes de começar a utilizar seus próprios arquivos

Se o site estiver em um servidor remoto e você desejar editar aquele site com o Dreamweaver, consulte Como editar os sites da Web já existentes no Dreamweaver.

 

Página 14 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 17: 1 Introducao

Adicionar propriedades ao site

Após criar um site local, caso você já tenha configurado as propriedades (imagens ou outro tipo de conteúdo) do site, coloque as propriedades em uma pasta dentro da pasta raiz do site local. Em seguida, quando estiver pronto para adicionar conteúdo, as propriedades estarão prontas para serem utilizadas.

Os arquivos de imagens e de texto do site “locação de veículos” são fornecidos com o Dreamweaver. Se você estiver criando páginas para este site, é preciso copiar as imagens para o site na pasta raiz local do site. Para isto, utilize o painel Site.

As propriedades estarão contidas em uma pasta denominada Design. Para maior simplicidade e consistência com este Guia de introdução, copie a pasta Design para seu site e trabalhe com o conteúdo daquela pasta.

Para copiar uma pasta de imagens para a pasta raiz local de seu site:

1. Se o painel Site não estiver aberto, abra-o selecionando Janela > Site.

O painel Site será exibido (se o painel Site já estiver aberto, ele não aparecerá neste passo. Se o painel Site não for exibido, selecione Janela > Site novamente para exibi-lo).

2. No painel Site, expandir o ícone da área de trabalho do Windows para visualizar as unidades disponíveis.

3. Expandir as pastas até localizar a pasta do aplicativo Dreamweaver. 4. Expandir a pasta Samples. 5. Expandir a pasta GettingStarted na pasta Samples. 6. Selecione a pasta Design na pasta GettingStarted e pressione Control+C para copiá-la.

A pasta Design contém uma pasta chamada Propriedades, que contém várias propriedades relacionadas ao site, incluindo uma subpasta de imagens.

7. Ainda no painel Site, role a tela até a pasta raiz local do site (a pasta que você criou quando o site foi definido) e selecione aquela pasta. Em seguida, pressione Control+V para colar uma c ópia da pasta Design em seu site.

Como criar e salvar uma nova página

Agora que o site foi configurado, é possível criar páginas da web para preenchê-lo.

Ao iniciar o Dreamweaver, um documento HTML é automaticamente criado. Antes de continuar, feche este documento.

Para fechar o documento em branco padronizado:

Escolha Arquivo > Fechar.

 

   

Página 15 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 18: 1 Introducao

Para criar uma nova página:

1. Selecione Arquivo > Novo.

A caixa de diálogo Novo documento é exibida.

2. Na lista de categorias à esquerda, selecione a categoria Projetos de pagina.

A lista na coluna central da caixa de diálogo é renomeada como Projetos de pagina. Uma lista de modelos de páginas pré-formatadas é exibida.

3. Com as setas, localize a lista Projetos de pagina e selecione o item denominado Texto: artigo D com navegação.

Nota: Há outro item com nome semelhante. Tenha cuidado para não escolher o item denominado Texto: artigo D, que não possui barra de navegação.

Uma pequena visualização da página surge à direita da caixa de diálogo.

Se preferir, é possível criar uma página utilizando qualquer modelos de p ágina fornecidos ou criar uma página sem um design padronizado selecionando um item da categoria Página básica. O restante desta lição leva em consideração que você esteja utilizando o

Página 16 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 19: 1 Introducao

design de página Texto: artigo D com navegação.

4. Certifique-se de que o botão de opção Documento esteja selecionado no canto direito inferior da caixa de diálogo.

5. Clique em Criar.

Uma nova página é exibida com o layout selecionado em uma nova janela documento. A página aparece preenchida com o alocador de espaço de texto “Lorem ipsum”, que mostra como será o aspecto da página quando o texto for adicionado.

6. Salve o documento.

Para salvar a nova página:

1. Escolha Arquivo > Salvar. 2. Na caixa de diálogo Salvar como, localize a pasta Design dentro da pasta raiz do site.

Lembre-se: a pasta raiz do site é a pasta criada ao configurar o site em Configurar um site local.

3. Digite o nome de arquivo index.htm. 4. Clique em Salvar.

O nome de arquivo aparecerá na barra de título da janela do documento em parênteses, após as palavras “Documento sem título”.

Ajuste o layout

As páginas predefinidas fornecem um ponto de partida, mas seu layout de página provavelmente não corresponderá exatamente a todas as necessidades do usuário.

Para modificar o layout de uma página, utilize as ferramentas de layout do Dreamweaver. Este guia descreve brevemente algumas ferramentas, mas para obter mais detalhes, consulte o Apresentação do conteúdo com tabelas, Definição do layout de páginas na visualização de

 

 

Página 17 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 20: 1 Introducao

layout e Animação de camadas.

Primeiro, remova os elementos de layout desnecessários. Para criar o layout da página locação de veículos Global, remova várias tabelas e células desnecessárias. Veja Remover elementos desnecessários.

Em seguida, adicione alocadores de espaço de imagem e ajuste as larguras das colunas da tabela (com a visualização de layout do Dreamweaver) para enquadrar as colunas corretamente. Veja Adicionar um alocador de espaço de imagem e Provocar o alongamento automático da coluna.

Remover elementos desnecessários

Pode haver elementos desnecessários para sua página final em qualquer design de página pré-formatado. É possível selecionar e excluir tais elementos.

Se você estiver criando a página de locação de veículos Global, os elementos no design de página padrão a seguir são desnecessários:

l Dois links de navegação no topo da página l A área de título e cabeçalho na coluna de texto principal l Uma pequena caixa próxima ao título da coluna lateral l A barra de direitos autorais na base da página

O procedimento geral para remover um elemento consiste em selecioná-lo e pressionar a tecla de retorno do teclado (backspace). Os procedimentos a seguir mostram como selecionar e excluir cada elemento desnecessário. Depois de conclu ído, verifique se todos os itens selecionados foram removidos e salve o documento.

Para remover links de navegação desnecessários:

1. Selecione Exibir > Visualização de tabelas > Visualização padrão para assegurar que as tabelas sejam visualizadas no modo de visualização padrão.

2. Na barra de navegação do documento, arraste a célula da tabela com o link “Sic Amet” para a célula da tabela com o link “Consectetur”.

Ambas as células da tabela são realçadas para indicar que foram selecionadas.

3. Pressione a tecla backspace.

As células da tabela serão removidas. As outras células da tabela (links “Lorem,” “Ipsum” e “Dolor”) expandem-se automaticamente para preencher a largura da tabela.

Para remover o t ítulo da coluna de texto desnecessário:

1. Na parte superior das colunas de texto, clique na palavra Título.

 

 

Página 18 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 21: 1 Introducao

2. No seletor de tags na base da janela Documento, clique na tag <table> mais à esquerda,

aquela que aparece imediatamente à direita da tag<body> (se a tag <body> não estiver visível na área de trabalho flutuante, amplie a janela documento)

3. Pressione a tecla backspace para remover a tabela que contém o título.

Nota: Há duas tags <table> no seletor de tags, uma vez que a área do título é uma tabela aninhada dentro de outra tabela. Nesse caso, exclua a tabela externa indicada pela tag <table> mais à esquerda.

Para remover a caixa desnecessária no cabeçalho da barra lateral:

1. Na coluna direita, à esquerda das palavra Notícias, clique na caixa que contém o ponto de exclamação.

2. No seletor de tags, clique na tag <td> mais à direita para selecionar a caixa em volta do

ponto de exclamação.

3. Pressione a tecla backspace.

Para remover a barra de direitos autorais desnecessária:

1. Role a página até o final. Clique em qualquer lugar na barra de direitos autorais no fundo da página.

2. No seletor de tags, clique na tag <table> mais à esquerda, a tag que aparece imediatamente à direta da tag <body>. Em seguida, pressione Excluir para remover a tabela que contém a informação de direitos autorais.

Para verificar e salvar a página:

1. Exibir a página para verificar se os elementos desnecessários foram removidos.

A página deve ser similar à do exemplo:

Página 19 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 22: 1 Introducao

2. Salve o documento.

Adicionar um alocador de espaço de imagem

Crie um alocador de espaço para representar a imagem que será adicionada posteriormente.

Para adicionar um alocador de espaço de imagem:

1. Clique no início da coluna de texto principal na parte superior esquerda do texto, antes da primeira palavra em negrito do texto. Em seguida, clique na tecla Enter para inserir uma linha em branco antes do texto. Clique na nova linha em branco.

O ponto de inser ção deve estar na própria linha. Se não estiver, coloque o ponto de inserção na linha em branco.

2. Escolha Inserir > Alocador de espaço de imagem. 3. Na caixa de diálogo, Alocador de espaço de imagem, digite um nome para o alocador de

espaço (como uma imagem de abertura) e uma largura e altura. Para a página Global, digite 523 para largura e 220 para altura.

 

 

Página 20 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 23: 1 Introducao

Nota: Os nomes de alocadores de espaço devem iniciar com uma letra e podem conter somente letras e números.

4. Clique em OK.

Uma caixa cinza com as dimensões especificadas é exibida. Este alocador de espaço de imagem é utilizado para auxiliar o usuário a criar layouts de páginas sem as imagens finais disponíveis.

5. Talvez seja necessário ampliar a janela do documento para exibir a coluna de texto à direita.

Provocar o alongamento automático da coluna

A coluna de texto da barra lateral à direita da página index.htm possui uma largura fixa. Para modificar sua largura do mesmo modo que o visitante redimensiona a janela do navegador, provoque o alongamento automático da coluna. Em seguida, ajuste a largura da coluna que contém o alocador de espaço de imagem.

Para provocar o alongamento automático da coluna esquerda:

1. Se a barra Inserir não estiver visível, selecione Janela > Inserir para exibi-la. 2. Na barra Inserir, clique na guia Layout. 3. Clique no botão Visualização de layout para alternar ao modo de visualização de layout. 4. Leia as informações caixa de diálogo e clique em OK.

Uma guia verde aparece no canto esquerdo superior de cada tabela da página. A guia é denominada “Tabela de layout.”

5. Na janela Documento, clique na guia Tabela de layout acima e à esquerda do alocador de imagem inserido para selecionar a tabela que contém ambas as colunas de texto.

Um cabeçalho de coluna aparece sobre cada uma das duas colunas de texto mostrando a largura de cada coluna.

 

 

Página 21 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 24: 1 Introducao

6. Se a janela do documento for muito estreita para exibir toda a coluna à direita da coluna, amplie a janela de documento.

Mesmo após expandir a janela de documento, outras guias de tabelas de layout podem ocultar os números de exibição da largura número no cabeçalho da coluna à direita. Não clique nas guias de tabela de layout.

7. Clique com cuidado no cabeçalho da coluna acima da coluna direita (certifique-se de clique acima da parte superior das guias da tabela de layout na coluna direta).

O menu pop-up é exibido.

8. No menu pop-up, selecione Provocar o alongamento automático da coluna.

A caixa de diálogo Escolha a imagem espaçadora é exibida para que o usuário possa escolher uma imagem espaçadora.

Nota: Se a imagem espaçadora já tiver sido escolhida, esta caixa de diálogo não aparecerá. Nesse caso, a coluna direita é definida para alongamento automático. Se a caixa de diálogo não aparecer, ignore o restante deste procedimento.

9. Na caixa diálogo Escolha a imagem espaçadora, selecione a opção Utilizar um arquivo existente de imagem espaçadora e clique em OK.

Outra caixa de diálogo será exibida denominada Selecione o arquivo de imagem espaçadora.

10. Na caixa de diálogo Selecione o arquivo de imagem espaçadora, vá até a pasta raiz e abra a pasta Propriedades. Em seguida, abra a pasta Imagens, selecione spacer.gif e clique em OK.

A coluna direita é definida para alongamento automático. No navegador, a coluna direita deverá ser ampliada o máximo possível depois que a coluna esquerda for desenhada com sua largura fixa.

Para ajustar a largura da coluna de texto principal:

1. Clique no cabeçalho da coluna acima da coluna esquerda e selecione Tornar consistentes as larguras das células no menu pop-up exibido.

Página 22 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 25: 1 Introducao

A coluna esquerda é definida com uma largura fixa (igual à largura da imagem mais os valores de preenchimento e espaçamento das células).

2. Clique no botão Visualização padrão na barra Inserir para retornar ao modo de visualização padrão.

3. Salve o documento.

Defina o t ítulo da página

É possível definir diversas propriedades para uma página, incluindo título, cor de fundo, cor de texto e assim consecutivamente (para definir as propriedades de uma página, selecione Modificar > Propriedades da página). No entanto, se desejar definir o título da página (o título que se aparece na barra de título do navegador), utilize a barra de ferramentas do documento.

Para definir um título de página para seu documento:

1. Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento.

A barra de ferramenta do documento do Dreamweaver é exibida. Na área de trabalho integrada, a barra será exibida normalmente na parte superior da área do documento e, na área de trabalho flutuante, aparecerá como parte da janela Documento.

2. Na caixa de texto T ítulo, onde aparece “Documento sem título”, digite um título para a página, por exemplo: página inicial, Locação de ve ículos Global. Em seguida, pressione a tecla Enter para visualizar o título da página atualizado na barra de título da janela Documento.

3. Salve o documento.

Adicionar texto formatado

É possível inserir texto na janela de documento ou copiar e colar texto de outra fonte (como um

   

 

 

Página 23 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 26: 1 Introducao

arquivo do Microsoft Word). Veja Adicionar texto. Além disso, é possível formatar o texto utilizando o painel Estilos CSS. Veja Adicionar estilos ao texto.

Antes de inserir um texto, certifique-se de alternar ao modo de visualização de projeto selecionando Exibir > Projeto.

Adicionar texto

Ao inserir e formatar texto na visualização do projeto, o Dreamweaver cria um código HTML básico Para digitar o código diretamente, utilize a visualização de código. Para obter mais informações sobre visualização do código, consulte o Como editar códigos no Dreamweaver.

As páginas predefinidas fornecidas com o Dreamweaver contêm o texto alocador de espaço “Lorem ipsum”. Caso você não queira utilizar uma página pré-formatada, substitua o texto alocador de espaço pelo seu próprio texto ao adicionar conteúdo. No entanto, pode ser útil deixar o texto alocador de espaço em seu lugar até completar o projeto e layout, de modo que você ou seu cliente possam visualizar o layout sem se distrair com o texto.

Para adicionar texto à página:

1. Clique três vezes no texto alocador de espaço no topo da coluna esquerda (sob o alocador de espaço de imagem) para selecionar todo o parágrafo em negrito.

2. Digite Dicas de segurança (ou, se preferir, seu próprio texto de cabeçalho). 3. Selecione os três parágrafos de texto alocador de espaço sob a régua horizontal. 4. Digite o texto a seguir (ou seu próprio texto se preferir):

A segurança de nossos clientes é muito importante. Observe as dicas de segurança para que sua viagem transcorra sem incidentes

5. Na coluna direita, clique tr ês vezes na palavra “Notícias” e digite promoção relâmpago para substitui-la.

6. No painel Site, localize o texto promoções.txt na pasta Propriedades. Clique duas vezes no ícone do arquivo para abri-lo.

Este arquivo contém as cópias das promoções especiais do site Global.

Nota: Neste site de exemplo, o arquivo que contém a cópia é um arquivo de texto. Para os demais sites, é possível utilizar documentos HTML gerados pelo Microsoft Word. É possível importar o HTML e limpá-lo com o comando Importar HTML do word do Dreamweaver. Para obter mais informações, veja Como abrir documentos existentes .

Observe que o arquivo de texto aparece em uma nova janela de documento com uma barra escura sob o lado esquerdo. Esta janela se encontra no modo de visualização do código e não pode ser alternada para a visualização de projeto, pois o arquivo não está no formato HTML.

   

Página 24 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 27: 1 Introducao

Nota: Se preferir, utilize seu pr óprio texto na página em vez do texto fornecido.

7. Na janela de documento promoçoes.txt, pressione Control+A para selecionar todo o texto e selecione Editar > Copiar para copiar o texto.

8. Na janela de documento index.htm, selecione todo o texto alocador de espaço na célula inferior da coluna direita e escolha Editar > Colar.

O texto é colado na tabela.

9. Clique antes da palavra “locação” (o segundo parágrafo de texto copiado) e selecione Inserir > Régua horizontal para colocar uma linha horizontal entre as duas promoções.

10. Salve o documento. 11. Alterne para o arquivo promoçoes.txt. Selecione este arquivo com a opção Arquivo >

Fechar.

Adicionar estilos ao texto

Há vários modos de adicionar estilo a um texto HTML. Um método é utilizar folhas de estilo em cascata (CSS) para definir tags HTML à medida que são formatadas de modo específico.

Esta li ção mostra como criar uma folha de estilo CSS simples de uma folha de estilo predefinida e como aplicar esta nova folha de estilo ao texto e modificar os estilos.

Para criar uma folha de estilo CSS:

1. Selecione Arquivo > Novo. 2. Na caixa de diálogo Novo documento, selecione a categoria Folhas de estilo CSS da lista

de categorias à esquerda.

A lista na coluna central da caixa de diálogo é renomeada como Folha de estilo CSS. Uma lista de folhas de estilo pré-formatadas é exibida.

3. Na lista Folhas de estilo CSS, selecione uma folha de estilo. Para o site de locação de veículos Global, selecione Básico: Verdana, que redefine as tags body, td e th ao especificar fontes para elas. Em seguida, clique em Criar.

 

 

Página 25 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 28: 1 Introducao

O Dreamweaver cria um novo arquivo de texto contendo um pequeno conjunto de estilos CSS predefinidos.

4. Escolha Arquivo > Salvar para salvar o novo arquivo CSS. Salve -o na pasta de propriedades do site e nomeie a pasta texto.css (ou qualquer outro nome desejado).

5. Selecione Arquivo > Fechar para fechar o arquivo CSS.

Para adicionar estilo ao texto com as folhas de estilo CSS:

1. No menu Janela, selecione um arquivo HTML (como index.htm).

Nota: Se as preferências do sistema estiverem configuradas para não exibir as extensões de arquivo, o arquivo index.htm aparecerá no menu Janela com o nome index.

2. Selecione Janela > Estilos CSS para exibir o painel Estilos CSS. 3. Na parte superior do painel Estilos CSS, clique no botão de opção Editar estilos para exibir

os estilos disponíveis.

Se você não definiu um estilo para este documento, não haverá estilos disponíveis.

4. Na base do painel Estilos CSS, clique no botão Anexar a folha de estilos.

A caixa de diálogo Vincular a folha de estilos externa é exibida.

5. Na caixa de diálogo Vincular a folha de estilos externa, clique em Procurar para localizar a folha de estilo.

6. Na caixa de diálogo Selecione o arquivo de folha de estilos, localize e selecione a nova folha de estilo criada na pasta de propriedades e clique em OK para anexar a folha de estilo.

7. Na caixa de diálogo Vincular a folha de estilos externa, clique em OK para anexar a folha de estilo.

O nome e conteúdo da folha de estilo serão exigidos no painel Estilos CSS. Os estilos definidos na folha de estilo serão aplicados ao texto no documento HTML. Por exemplo: o corpo do texto aparece no formato Verdana.

8. Salve o documento.

Página 26 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 29: 1 Introducao

Para editar os estilos na folha de estilo:

1. Na parte superior do painel Estilos CSS, clique no botão de opção Editar estilos para exibir os estilos disponíveis.

2. Selecione o nome do arquivo CSS no painel Estilos CSS e clique no botão Editar folha de estilo na base do painel Estilos CSS.

Uma caixa de di álogo é exibida com os nomes dos estilos na folha de estilo.

3. Selecione um dos estilos, por exemplo body, e clique em Editar.

A caixa de diálogo Definição de estilos CSS é exibida.

4. Digite um tamanho para o texto, como 13 pixels. Defina as outras opções de acordo com suas preferências.

5. Clique em OK para redefinir o estilo. 6. Edite os outros estilos. Para criar os estilos utilizados no site de locação de veículos,

defina os estilos body, td e th com tamanho de 13 pixels. 7. Após completar a edição dos estilos, clique no botão Salvar para salvar as alterações e

fechar a caixa de diálogo Folha de estilo.

Os estilos alterados são aplicados a seu documento. Por exemplo: o corpo do texto aparece no formato Verdana de 13 pixels.

Adicionar imagens

Nesta lição é possível acrescentar imagens à página que você está criando. Utilize suas próprias imagens se desejar, mas ao adicionar uma imagem pela primeira vez, recomendamos utilizar as imagens do site de exemplos do Dreamweaver.

Caso não tenha seguido o procedimento do capítulo Adicionar propriedades ao site para copiar as propriedades do site Global à pasta raiz local do site, faça-o agora.

Para adicionar uma imagem a um documento:

   

Página 27 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 30: 1 Introducao

1. Salve o documento primeiro.

É possível inserir uma imagem em um documento não salvo, mas para isso uma caixa de diálogo será exibida informando que a URL utilizado para a imagem local é o caminho completo para a imagem. Se este método for utilizado, o Dreamweaver definir á os endereços URL ao salvar o documento, porém é mais fácil salvar o documento antes de adicionar as imagens.

2. Para inserir uma imagem em lugar de um alocador de espaço de imagem existente, clique duas vezes no alocador de espaço. Por exemplo: para inserir o logotipo da empresa na parte superior esquerda da página de locação de veículos Global, clique duas vezes no alocador de espaço pequeno denominado “imagem (100 x 50).”

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

3. Verifique se o menu pop-up Em relação a esteja definido para Documento próximo à base da caixa de diálogo.

Para mais informações sobre URLs relativos ao documento e relativos à raiz, consulte Sobre as localizações e os caminhos dos documentos.

4. Localize uma imagem na pasta propriedades (como logo.jpg). 5. Clique em OK ou Open para inserir a imagem.

Na janela Documento, a imagem será exibida no lugar do alocador de espaço.

6. Clique no alocador de imagem grande criado de acordo com as instruções de Adicionar um alocador de espaço de imagem para selecioná-lo (não clique duas vezes de uma só vez).

É possível utilizar o mesmo método para o outro alocador de espaço para substituir este alocador de espaço por uma imagem, no entanto, as instruções a seguir oferecem um método alternativo.

7. Certifique-se de que o painel Site e o inspetor de propriedades estejam visíveis (selecione Janela > Arquivos do site e Janela > Propriedades caso não estejam visíveis).

8. No inspetor de propriedades, arraste o ícone Indicar o arquivo da caixa de texto Src para o painel Site (arraste o ícone Indicar o arquivo próximo à caixa de texto Src, mas não o ícone seguinte à caixa de texto Link). Continue a pressionar o botão do mouse enquanto aponta para a pasta Propriedades (se a pasta estiver fechada). A pasta se abre. Continue a pressionar o botão enquanto aponta para a pasta de imagens também para abri-la. Continue a pressionar o botão até que o ponteiro esteja sobre o arquivo vintage.jpg. Solte o botão do mouse para selecionar vintage.jpg.

Na janela Documento, a imagem será exibida no lugar do alocador de espaço. Se a imagem incorreta aparecer, verifique o nome de arquivo na caixa de texto Src. Se o arquivo incorreto foi selecionado, arraste o ícone Indicar - arquivo novamente.

9. Para inserir imagens em locais sem alocadores de espaço, clique na visualização do projeto para colocar o ponto de inserção onde deseja adicionar a imagem e escolha Inserir > Imagem.

Se uma imagem para a qual o arquivo de imagem não esteja dentro da pasta raiz local do site for inserida, o Dreamweaver oferecerá a opção de copiar automaticamente a imagem ao site.

Página 28 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 31: 1 Introducao

10. Salve o documento.

Defina cores de fundo

Nas páginas predefinidas fornecidas com o Dreamweaver, as cores de fundo das células da tabela aparecem normalmente em cinza. Para a maioria dos sites, será preciso modificar as cores para corresponder ao esquema decores de site.

Para configurar as cores de fundo de uma célula da tabela:

1. Se o inspetor de propriedades estiver fechado, selecione Janela > Propriedades para abri-lo.

2. Se o inspetor de propriedades estiver recolhido (mostrando somente a barra de título), clique na seta de expansão na barra de título para expandi -lo.

3. Se o inspetor de propriedade não estiver mostrando todas as propriedades, clique na seta de expansão inferior direito do inspetor de propriedades para exibir todas as propriedades.

4. Pressione a tecla Control em uma célula para seleciona-la. Por exemplo: na página de

exemplos do site Global, há uma célula contendo a imagem do logo da empresa de locação de veículos. Pressione a tecla Control na célula contendo a imagem do logo.

A janela inferior do inspetor de propriedades exibe as propriedades da célula. Se janela inferior do inspetor de Propriedade não estiver visível, clique na seta de expansão no canto inferior direito do inspetor de propriedades para exibir todas as propriedades.

5. No inspetor de propriedades, clique no botão Cor do fundo que aparece próximo ao campo Fundo inferior.

O seletor de cores será exibido e o ponteiro se transforma em um conta-gotas.

6. Selecione uma cor. É possível selecionar uma cor na paleta do seletor de cores ou clique em qualquer lugar da exibição para selecionar a cor do pixel no qual você clicou. Por exemplo: clique no fundo da imagem do logotipo da empresa para fazer com que a cor de fundo da célula da tabela corresponda à cor de fundo da imagem.

A cor de fundo da c élula da tabela modifica-se para a cor selecionada.

 

 

Página 29 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 32: 1 Introducao

7. Repita este procedimento para cada c élula da tabela que desejar alterar a cor de fundo. Na página de exemplos do site locação de veículos Global, modifique as cores de fundo de todas as células da tabela da barra de navegação e da célula de cabeçalho na segunda coluna de texto (a célula que contém o texto “promoção relâmpago”), para fazer com que correspondam à cor de fundo do logo Global.

8. Salve o documento.

Verificar o código

Observe em seguida o que acontece com o Dreamweaver quando você adiciona conteúdo à página. Ao adicionar texto, imagens ou outro conteúdo, o Dreamweaver gera códigos HTML.

O Dreamweaver permite exibir seu documento de duas maneiras: Visualização de projeto (em que o formato do documento se parece como exibido no navegador) e visualização de código (em que o código HTML básico pode ser visualizado). Também é possível utilizar a tela dividida para exibir tanto a visualização de código como a visualização de projeto.

Para exibir o código HTML do documento:

1. Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento.

2. Na barra de ferramentas do documento, clique no botão Visualização de código e de projeto.

A janela se divide exibindo o c ódigo HTML básico.

É possível editar o código no modo de visualização de código. As alterações feitas no código não aparecem na visualização do projeto até que a visualização seja atualizada.

Para que as alterações do código sejam exibidas na visualização do projeto, efetue

 

 

Página 30 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 33: 1 Introducao

um dos procedimentos a seguir:

l Clique em qualquer lugar no modo de visualização do projeto. l Clique no botão Atualizar na barra de ferramentas do documento.

O Dreamweaver oferece diversos recursos avançados para ajudar o usuário a exibir os códigos na visualização de código. Consulte o Como editar códigos no Dreamweaver para obter mais informações.

Quando estiver trabalhando com suas próprias páginas, é possível escolher o modo de visualização mais adequado. Para o restante deste capítulo, consideramos que você esteja utilizando a visualização do projeto.

Para exibir somente a visualização do projeto:

1. Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento.

2. Na barra de ferramentas do documento, clique no botão Visualização do projeto.

Crie uma segunda página

Nesta lição, você criará uma segunda página para o site e na lição seguinte, Adicionar link de texto entre as páginas, poderá criar links entre as páginas.

Há vários modos possíveis de se criar uma segunda página. Nesta lição, você criará uma segunda página fazendo uma cópia da primeira, de modo que a segunda página terá o mesmo layout que a primeira.

Nota: Se desejar criar seu pr óprio layout, é possível utilizar as ferramentas de-edição de tabelas do Dreamweaver ou a visualização de layout. Outras opções de layout incluem molduras e camadas. Esta lição, no entanto, não abrange nenhuma dessas opções.

Em sites mais complexos, a melhor maneira de assegurar que todas as páginas tenham o mesmo layout seria utilizar um modelo. Para obter mais informações sobre edição de tabelas, visualização de layout, molduras, camadas e modelos, consulte Informações adicionais.

A segunda página a ser criada no site locação de veículos é a página de serviço ao cliente. Crie a página de serviço fazendo uma cópia da página principal (index.htm) e, em seguida, remova o conteúdo que deve ser omitido na página do cliente e adicione novo conteúdo.

Para obter mais informações sobre como adicionar e formatar texto, consulte Adicionar texto formatado.

Para criar uma cópia da página inicial (index.htm):

1. No painel Site, clique com o botão direito do mouse no nome de arquivo da página inicial, index.htm (ou qualquer outro nome desejado para o arquivo).

 

 

Página 31 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 34: 1 Introducao

2. No menu de contexto, escolha Duplicar.

Uma cópia do arquivo é exibida.

Dica: Se a cópia não aparecer imediatamente, clique no botão Atualizar no painel Site para exibi-la.

3. Selecione o novo arquivo duplicado. Aguarde alguns segundo e clique novamente para tornar o nome do arquivo editável (a mesma técnica utilizada pelo Windows Explorer).

4. Dê ao arquivo um novo nome, como servicoaocliente.htm.

Para remover algum material desnecessário da nova página:

1. Abra a nova página servicoaocliente.htm clicando duas vezes no painel Site.

Verifique a barra de título da janela Documento para certificar-se de que esteja acessando o arquivo servicoaocliente.htm. A barra de título deve indicar “página inicial locação de veículos Global” e um nome de pasta e de arquivo. O nome de arquivo deve ser servicoaocliente.htm (ou qualquer outro nome escolhido no procedimento anterior).

2. Na página servicoaocliente.htm, clique na imagem grande (a imagem exibindo o carro na coluna de texto principal).

3. No seletor de tags, clique na tag <td>. 4. Pressione a tecla backspace.

Todas as informações da célula da tabela, incluindo a imagem e o texto, serão excluídas.

5. Salve o documento.

Para adicionar texto à nova página:

1. No painel Site, localize o arquivo infocliente.htm na pasta Propriedades. Clique duas vezes no ícone do arquivo para abri-lo.

Este arquivo possui o conteúdo a ser acrescentado à página de serviço ao cliente. Se estiver criando seu próprio site, é possível adicionar seu conteúdo aqui, mas para fins desta lição, este conteúdo já vem incluso.

2. Na janela do documento infocliente.htm, selecione Exibir > Código para exibir o código HTML.

3. Ainda na janela de documento infocliente.htm, pressione Control+A para selecionar todo o arquivo.

Se você não estiver no modo de visualização de código durante a operação, pressione Control+A várias vezes para selecionar tudo. Se o ponto de inserção estiver dentro de uma célula da tabela, a opção Selecionar tudo seleciona somente aquela célula. Para simplificar, alterne para o modo de visualização de código antes de selecionar tudo.

4. Pressione Control + C para copiar todas as informações. 5. Retorne para o documento servicoaocliente.htm. Clique na coluna de texto principal agora

vazia (a coluna larga à esquerda). 6. Selecione Editar > Colar HTML.

O código HTML copiado do arquivo de infocliente.htm é colado neste documento (se Editar > Colar for selecionado em vez de Editar > Colar HTML, o código HTML será copiado na visualização do projeto em forma de texto. Se o código HTML for exibido na visualização do projeto, selecione Editar > Desfazer e tente novamente).

Página 32 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 35: 1 Introducao

A folha de estilo text.css já está anexada a esta página, assim o texto é formatado automaticamente.

Adicionar link de texto entre as páginas

É possível criar links em qualquer estágio do processo de cria ção de sites. Se você estiver seguindo as lições deste guia ordenadamente, você já terá criado suas páginas e adicionado conteúdo a elas. Portanto, nesta lição você criará links entre as páginas.

A seguir há dois outros métodos gerais para criar links para um site:

l Crie um grupo de páginas simuladas primeiramente e, em seguida, adicionar links e conteúdo às páginas.

l À medida que você cria uma página, os links devem ser especificados a elas. Posteriormente, crie páginas com os nomes de arquivo vinculados.

Para criar um link da página de serviço ao cliente à página index.htm:

1. Alterne à página de serviço ao cliente se esta não for a página atual (se a página não estiver aberta, clique duas vezes em seu ícone no painel Site para abri-la).

2. Selecione as palavras “Home Page” na parte inferior da coluna de texto maior à esquerda.

Se você não adicionar texto à coluna esquerda da página de serviço ao cliente quando estiver criando a página, digite as palavras Home Page naquela coluna de texto e selecione aquelas palavras.

3. Se o inspetor de propriedades não estiver aberto, selecione Janela > Propriedades. 4. Clique no ícone da pasta próximo à caixa de texto Link no inspetor de propriedades.

Procure pelo arquivo index.htm na pasta raiz local do site.

Crie imagens cambiáveis para links gráficos

Uma imagem cambiável é uma imagem que parece se modificar quando um visitante passa o ponteiro do mouse sobre a imagem no site. Por exemplo: um botão em uma página parece “acender” na página quando o visitante aponta o botão do mouse sobre ela.

A imagem cambiável consiste de duas imagens: a imagem exibida quando a página for carregada pela primeira vez no navegador e a imagem exibida quando o ponteiro for passado sobre a imagem original.

Nota: Ao criar uma imagem cambi ável, certifique-se de utilizar duas imagens com o mesmo tamanho.

Para criar uma imagem cambiável:

 

 

 

 

Página 33 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 36: 1 Introducao

1. Alterne para a página principal (index.htm) se esta não for a página atual (se a página não estiver aberta, clique duas vezes em seu ícone no painel Site para abri-la).

2. Na janela do documento, colocar o ponto de inserção no local onde a imagem cambiável deverá aparecer. Na página principal do site locação de veículos Global, por exemplo: clique duas vezes na célula da tabela da barra de navegação denominada “Lorem” e pressione a tecla backspace para excluir o texto, deixando o ponto de inserção na célula.

3. Escolha Inserir > Imagens interativas > Imagem cambiável.

4. Na caixa de diálogo Imagem cambiável, digite um nome para a imagem, como imagem-

principal na caixa de texto Nome da imagem.

Com isso, a imagem assumirá um nome exclusivo e se tornará facilmente identific ável no código HTML.

5. Na caixa de texto Imagem original, clique em Procurar para localizar o arquivo btnHome.jpg na pasta de imagens de seu site (dentro da pasta propriedades). Certifique-se de que o menu pop-up Com relação a seja definido para Documento e, em seguida, clique em Selecionar.

A caixa de texto Imagem original indica qual imagem será exibida quando a página aparecer primeiro no navegador.

6. Na caixa de texto Imagem cambiável, clique em Procurar para localizar btnHome_on.jpg na pasta de imagens do site. Certifique-se de que o menu pop-up Com relação a seja definido para Documento e, em seguida, clique em Selecionar.

A caixa de texto Imagem cambi ável indica qual imagem será exibida quando o ponteiro estiver apontando para a imagem no navegador.

7. Certifique-se de que a opção Pré-carregar a imagem cambi ável esteja selecionada, de modo que as imagens cambiáveis sejam carregadas quando a página for carregada no navegador, garantindo uma transição rápida entre as imagens quando o usuário mover o ponteiro do mouse sobre a imagem original.

8. Na caixa de texto Quando clicado, vá para a URL, clique no botão Procurar para localizar index.htm.

O arquivo index.htm é o arquivo que está sendo editado, portanto, esta etapa vincula a imagem cambiável à página em que a imagem cambiável está sendo colocada. Pode parecer desnecessário criar um link para a página onde o link está ativo, mas você também utilizará o mesmo conjunto de imagens cambiáveis de navegação em outras páginas, portanto, este link permitirá que os visitantes retornem à página index.htm de outras páginas que contêm esta barra de navegação.

9. Clique em OK para fechar a caixa de diálogo.

A imagem original especificada aparece no documento.

10. Salve o documento.

Página 34 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 37: 1 Introducao

Nota: As imagens cambi áveis não funcionarão ao apontar sobre elas com o ponteiro na janela Documento do Dreamweaver. As imagens cambiáveis funcionam somente no navegador. Para verificar o funcionamento das imagens cambiáveis, visualize o documento no navegador. Para obter mais informações sobre visualização, veja Visualizar no navegador.

Para o site de locação de veículos Global, crie duas imagens cambiáveis adicionais nas outras células da tabela da barra de navegação (“Ipsum” e “Dolor”): uma imagem cambiável que utiliza as imagens btnCustomerService.jpg e btnCustomerService_on.jpg, vinculadas a servicoaocliente.htm, e outra imagem cambiável que utiliza as imagens btnLocations.jpg e btnLocations_on.jpg, vinculadas a localizacao.htm. Observe que o arquivo localizacao.htm ainda não foi criado, portanto, digite o nome do arquivo na caixa de texto Quando clicado, vá para a URL na caixa de diálogo Imagem cambiável.

Copie a barra de navegação

Após criar uma barra de navegação funcional, é possível reutilizá-la em todas as páginas. Nesta lição, as células da tabela da barra de navegação serão copiadas e coladas na página secundária.

Há diversas maneiras de reutilizar o conteúdo no Dreamweaver, incluindo itens de biblioteca, modelos e trechos de códigos.

Para copiar a barra de navegação em outra página:

1. No arquivo index.htm, clique na célula da tabela que contém a imagem cambiável “home”.

2. No seletor de tags, clique na tag <tr> mais à direita.

A linha da tabela que contém as três imagens cambiáveis da barra de navegação será selecionada.

3. Selecione Editar > Copiar. 4. Alternar para o arquivo servicoaocliente.htm. 5. Clique na célula da tabela da barra de navegação “Lorem.” 6. No seletor de tags, clique na tag <tr> mais à direita. 7. Escolha Editar > Colar.

As imagens cambi áveis da barra de navegação são coladas no lugar das células da tabela existentes.

8. Salve o documento.

Visualizar no navegador

 

 

   

Página 35 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 38: 1 Introducao

A visualização do projeto dá uma idéia geral de como a página será exibida no navegador, mas a única maneira de verificar a aparência final da página é visualizando-a no navegador. Cada versão de navegador tem suas próprias peculiaridades. Com o Dreamweaver, os códigos HTML são compatíveis em quase todos os navegadores, mas às vezes certas diferenças não podem ser evitadas (é por isso que o Dreamweaver não exibe uma visualização diretamente, pois o Dreamweaver não pode simular todos os comportamentos diferentes de todos os navegadores).

A visualização no navegador exibe o formato das páginas após sua publicação.

Para visualizar as páginas:

1. Caso index.htm não seja o documento atual, torná-lo o documento atual (abrir o documento se estiver fechado).

2. Pressione a tecla F12.

O navegador primário será iniciado caso não ainda esteja funcionando. O navegador exibe a página de índice.

Nota: O Dreamweaver deve detectar automaticamente o navegador primário e utilizá-lo para visualização. Se a visualização não aparecer ou se não aparecer no navegador conforme esperado, retorne para o Dreamweaver (se necessário) e selecione Arquivo > Visualizar no navegador > Editar a lista de navegadores. A caixa de diálogo Preferências visualizar no navegador é exibida e adicione o navegador correto à lista. Para obter mais informações, clique no botão Ajuda da caixa de diálogo Preferências.

3. Mova o ponteiro para apontar para as imagens cambiáveis para exibir a mudança das imagens. Clique nos links para verificar se funcionam.

Configurar um site remoto e publicar

Você acabou de criar um site da Web simples, mas funcional. O próximo passo é publicá-lo efetuando o upload dos arquivos a um servidor web remoto.

Antes de prosseguir, é preciso obter acesso a um servidor Web remoto (como o servidor do provedor Internet ou um servidor proprietário do cliente para o qual você está trabalhando, servidor intranet em sua empresa ou servidor IIS ou PWS em um sistema Windows). Caso você ainda tenha acesso a um servidor, contate seu provedor de serviços Internet, cliente ou administrador do sistema.

O procedimento a seguir dará mais resultado se a pasta raiz remota estiver vazia. Se o site remoto já contiver arquivos, crie uma pasta vazia em seu site remoto (no servidor) e utilize esta pasta vazia como pasta raiz remota.

O procedimento a seguir pressupõe que um site local já tenha sido configurado. Para obter mais informações, veja Configurar um site local.

Para conectar-se a um site remoto:

1. Escolha Site > Editar os sites. 2. Selecione um site (como locação de veículos Global) e clique em Editar. 3. Clique na guia Básico no topo da caixa de di álogo.

 

 

Página 36 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 39: 1 Introducao

4. Os primeiros passos da guia Básico são preenchidos ao configurar o site local, portanto clique em Avançar algumas vezes até que o passo Compartilhar arquivos seja realçado na parte superior do assistente.

5. No menu pop-up “Como se dá a sua conexão com o servidor remoto?”, selecione um

método para conectar-se ao site remoto.

O método mais comum para conexão a um servidor na Internet é o FTP e o método mais comum para conexão a um servidor via intranet é por meio de Local/Rede. Se você não estiver seguro de qual método escolher, pergunte ao administrador de sistema do servidor.

6. Se escolher FTP, digite as opções a seguir: ¡ Digite o nome do host do servidor (como ftp.macromedia.com). ¡ Na caixa de texto que solicita a pasta contendo seus arquivos, digite o caminho no

servidor da pasta raiz do ftp para a pasta raiz do site remoto. Caso n ão tenha certeza, consulte o administrador do sistema.

Na maioria dos casos, esta caixa de texto deve ser deixada em branco.

¡ Digite o nome de usuário e senha nas caixas de texto apropriadas e clique em Testar a conexão.

¡ Se a conexão falhar, consulte o administrador do sistema. 7. Se Local/Rede for selecionado, clique no ícone da pasta próxima à caixa de texto e

localize a pasta raiz do site remoto. 8. Clique em Avançar. 9. Não ative a devolução/retirada de arquivos para este site.

Se você ou seus colegas de trabalho estiverem trabalhando juntos em um site de nível profissional, a devolução/retirada de arquivos ajudará a evitar que sejam sobregravados por outros arquivos. Para este site, entretanto, este recurso não é necessário.

10. Clique em Avançar. 11. Clique em Concluir para completar a configura ção do site remoto. 12. Clique em Concluir novamente para concluir a edição do site.

Para efetuar o upload de suas páginas ao site remoto:

1. No painel Site, selecione a pasta raiz local do site.

Página 37 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 40: 1 Introducao

2. Clique no botão Colocar os arquivos.

Todos os arquivos do site são carregados ao site remoto.

3. Abra o site remoto em um navegador para certificar-se de que os arquivos foram enviados corretamente.

Informações adicionais

O Dreamweaver é um aplicativo com dezenas de recursos poderosos. Este guia descreve apenas os recursos básicos.

Este capítulo do Guia de introdução ensina principalmente como utilizar a visualização do projeto para criar um site estático. Para obter mais informações sobre visualização de código e codificação manual no Dreamweaver, consulte o Como editar códigos no Dreamweaver. Para obter mais informações sobre os aspectos básicos da criação de um aplicativo para a Web ativado por meio de banco de dados, consulte o Como compreender os aplicativos para a Web e Como desenvolver um aplicativo para a Web no Dreamweaver MX.

Para mais informações sobre os t ópicos cobertos neste capítulo do guia de introdução, consulte o tópico a seguir na ajuda do Dreamweaver:

l Exploração da área de trabalho l Como configurar um site do Dreamweaver l Configuração de um documento l Definição do layout de páginas na visualização de layout l Como inserir e formatar texto l Como inserir imagens l Criação de uma imagem cambiável l Como visualizar as páginas nos navegadores l Como configurar uma pasta remota

Além das informações sobre tópicos específicos, a ajuda do Dreamweaver fornece informações sobre outros recursos, como Central de Suporte Macromedia e fóruns de discussão on-line. Para obter informações sobre esses recursos, consulte o Bem-vindo ao Dreamweaver.

Como editar códigos no Dreamweaver

Embora muitos desenvolvedores de sites da Web se beneficiem ferramentas visuais oferecidas pelo Macromedia Dreamweaver MX, um grande número de desenvolvedores preferem utilizar as ferramentas de codificação para criar suas páginas. O Dreamweaver possui diversos recursos avançados que oferecem a usuário o ambiente de codificação profissional de que necessita.

   

 

 

Página 38 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 41: 1 Introducao

Este capítulo fornece uma visão geral do novo ambiente de codificação profissional do Dreamweaver. Para obter mais informações, veja Codificação no Dreamweaver.

Alternar para a área de trabalho de codificação

Caso você não tenha feito isso durante instala ção, pode tornar sua área de trabalho similar aos ambientes de codificação populares como o HomeSite e ColdFusion Studio.

Para utilizar a nova área de trabalho de codificação:

1. Selecione Editar > Preferência e selecione Geral na lista de categorias à esquerda.

A categoria Geral será exibida.

2. Clique no botão Alterar a área e trabalho.

A caixa de diálogo Configuração da área de trabalho é exibida.

 

 

Página 39 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 42: 1 Introducao

3. Selecione a opção área de trabalho do Dreamweaver MX e a opção Estilo do Homesite/Coder.

4. Clique em OK duas vezes para fechar a caixa de diálogo Preferências. 5. Feche o Dreamweaver e reinicie o programa.

Copie uma pasta ao site

Antes de iniciar as lições, é preciso definir um site e copiar uma pasta a ele. O navegador de arquivos integrado no painel Site permite visualizar o disco e a rede local. Isto será útil quando estiver trabalhando com arquivos do site que não estão visíveis no painel Site.

Para copiar páginas a seu site:

1. Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2. No painel Site, menu pop-up Site, selecione o nome do site definido no último capítulo.

Se você ainda não definiu um site, consulte Configurar um site local. É preciso definir um site antes de continuar.

Ao selecionar o nome do site no menu pop-up, o Dreamweaver exibe os arquivos do site.

3. Expandir a área de trabalho do Windows para visualizar as unidades disponíveis. 4. Expandir as pastas conforme necessário para chegar à pasta do aplicativo Dreamweaver e

expandir a pasta Samples. 5. Na pasta Samples, expandir a pasta GettingStarted, selecionar a pasta Code e pressionar

Control+C para copiá-la. 6. Retorne ao início o painel Site e selecione a pasta do site. 7. Pressione Control+V para colar uma cópia da pasta em seu site.

   

 

Página 40 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 43: 1 Introducao

Exibir as páginas terminadas

Antes de começar, é possível visualizar as páginas terminadas para saber como elas aparecerão no navegador. Obviamente, as páginas podem variar.

Para exibir as páginas terminadas:

1. Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2. Expandir a área de trabalho do Windows para visualizar as unidades disponíveis. 3. Expandir as pastas conforme necessário para chegar à pasta do aplicativo Dreamweaver e

expandir a pasta Samples. 4. Na pasta Samples, expandir a pasta GettingStarted e a pasta FinalSite. 5. Na pasta FinalSite, clique duas vezes em index.htm para abri-la e clique duas vezes em

location_comp.htm.

O Dreamweaver exibe as páginas na janela Documento.

6. Quando tiver terminado, feche as páginas.

Como abrir páginas múltiplas

Use o painel Site para abrir as páginas necessárias para esta lição.

Para abrir as páginas:

1. Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2. No site, expandir a pasta Code. 3. Clique duas vezes em index.htm para abri-lo e clique duas vezes em location_start.htm.

Estes são os dois arquivos que você precisará para esta lição.

4. Na janela do documento, clique no botão Mostrar a visualização do código na barra de ferramentas ou escolha Exibir > Código para alternar ao modo de visualização de código e exibir o código fonte do arquivo.

5. Para alternar para a página inicial rapidamente, pressione as teclas Control+Tab ou clique na guia ao fundo da página (somente no Windows).

Nota: É preciso maximizar a página para exibir ver as guias.

 

 

 

Página 41 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 44: 1 Introducao

Adicione uma imagem arrastando-a

Nesta lição você adicionará um botão à página inicial para a página Locations, similar aos botões inicial e atendimento ao cliente. É possível digitar o código diretamente na página, clique no ícone imagem na barra Inserir ou utilizar o editor de tags imagem (IMG) (selecione a imagem, clique com o botão direito do mouse e selecione Editar a tag).

Outra opção é arrastar a imagem da pasta.

Para adicionar uma imagem arrastando-a:

1. Abra index.htm na visualização de código, caso ainda não esteja aberto. 2. No painel de grupo Arquivos, abra o painel Propriedades (Janela > Propriedades). 3. Selecione o arquivo de imagem btnLocations.jpg. 4. Arraste o arquivo de imagem ao código da página e solte-o no código na terceira célula da

primeira tabela.

Dica: Localize o código para os botões página inicial e atendimento ao cliente. Solte a imagem Locations antes da tag final </td> para a célula da tabela após as duas células desses botões.

O Dreamweaver insere o código no ponto de inserção para criar a imagem.

5. Escolha Arquivo > Salvar.

Adicionar um link com o Seletor de tags

Agora você deve criar um link do botão adicionado à página Locais. Além de digitar códigos manualmente para o link e utilizar a barra Inserir para adicionar o link, é possível utilizar o Seletor de tags.

Para escrever códigos com a ajuda do Seletor de tags:

 

 

 

 

Página 42 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 45: 1 Introducao

1. Abra index.htm na visualização de código, caso ainda não esteja aberto. 2. No código da primeira tabela, localize e selecione o c ódigo para o botão Local inserido na

última seção.

Nota: Realce toda a tag <img>.

3. Clique com o botão direito do mouse no texto selecionado e selecione Inserir tag no menu pop-up.

É exibido o Seletor de tags.

4. Selecione Tags HTML, Elementos de página, Geral e, em seguida, selecione A no painel direito.

Nota: Você também pode selecionar Tags HTML e a tag A no painel direito, sem selecionar primeiro Elementos de página, Geral.

5. Clique em Inserir.

O editor de tags (<a>) é exibido para a tag âncora.

6. Na caixa de texto HREF, digite location_start.htm ou clique no botão Procurar para localizar o arquivo.

Nota: Se desejar criar um link uma página da Web, digite a URL da página.

7. Clique em OK para fechar o editor de tags. 8. Clique em Fechar para fechar o Seletor de tags.

O Dreamweaver insere o código em sua página criar o link.

9. Na janela Documento, selecione Arquivo > Salvar.

Editar uma tag

Em seguida, você utilizará o inspetor de tags para localizar uma tag específica na página Locais para efetuar modificações rapidamente.

 

 

Página 43 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 46: 1 Introducao

Para editar uma tag com o Inspetor de tags:

1. Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta.

2. Efetue um dos procedimentos a seguir para abrir o Inspetor de tags, caso este ainda não esteja aberto:

¡ Selecione Janela > Inspetor de tags. ¡ No grupo de painéis Código, clique na guia Inspetor de tags.

O Inspetor de tags fornece uma visão estruturada de todas as tags em sua página. Também exibe os atributos de cada tag.

3. No modo de visualização do código da janela Documento, localize o texto de cabeçalho “Rental Locations”

4. Selecione a entidade não-separável (&nbsp;) entre as tags do parágrafo que sucedem o cabeçalho:

<p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p> <p> &nbsp;</p>

5. Selecione Inserir > Tabela e clique em OK na caixa de diálogo Inserir tabela para aceitar os valores padrão.

O Dreamweaver insere o código na tabela.

6. Clique no botão Atualizar na barra de ferramentas.

O painel Inspetor de tags é atualizado, de modo que a ênfase é feita sobre a tag Table que você acabou de inserir. Uma lista de atributos aparece sob a tag.

Página 44 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 47: 1 Introducao

7. Na janela Documento, clique em algumas tags diferentes para ver como o inspetor de tags atualiza a tag e os atributos exibidos e, em seguida, clique na tag Table novamente, de modo que seus atributos sejam exibidos no inspetor de tags.

8. No painel de Inspetor de tags, clique na caixa de texto vazia ao lado do atributo align.

Uma seta aparece para o menu pop-up.

9. Clique na seta do menu pop-up e selecione centralizar.

O Dreamweaver modifica o código na janela Documento.

10. Clique no botão Mostrar a visualização do projeto na barra de ferramentas para selecionar Exibir > Projeto e visualizar a tabela.

11. Na janela Documento, selecione Arquivo > Salvar.

Localize informações sobre uma tag

Se você precisar de ajuda com os atributos de uma tag e valores de atributo, procure por informações de referência no Dreamweaver.

Para localizar informações sobre uma tag

1. Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta.

2. Na janela do documento, selecione o texto “bgcolor” na tag body. 3. Clique com o botão direito do mouse ou no texto selecionado e selecione Referência no

menu pop-up.

O painel Referência se abre e exibe informações sobre o atributo bgcolor.

Nota: Também é possível selecionar Janela > Referência para acessar o painel de referência. Este painel é integrado no ambiente de desenvolvimento no painel de grupo Código.

4. Para obter mais informações sobre um atributo de tag específico, selecione o atributo no menu pop-up.

 

 

Página 45 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 48: 1 Introducao

Adicionar uma imagem com dicas de códigos

Nesta lição você aprenderá a adicionar um logotipo à página Locations.

Para adicionar um código à página manualmente, apenas clique na janela Documento e comece a digitar. Também é possível utilizar o recurso Dicas de código do Dreamweaver para agilizar o trabalho.

Para escrever códigos com a ajuda de Dicas de código:

1. Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta.

2. Localize o código da linha da tabela que contém o texto “The International Car Rental Specialists”. Selecione a entidade do espaço não-separável (&nbsp;) no código para a célula que antecede o texto:

<td rowspan="2" bgcolor="#424973">&nbsp;</td>

3. Digite o colchete inicial (<) da tag da imagem.

Uma lista de tags aparece no ponto de inserção.

Nota: É possível selecionar a extensão do atraso ao selecionar Editar > Preferências e selecionar Dicas de código na lista de categorias à esquerda do painel. É possível abrir a opção Dicas de código pressionando a barra de espaço ou fechá-la a qualquer momento pressionando a tecla Esc.

4. Selecione a tag img na lista e pressione a tecla Enter para inserir a tag.

 

 

Página 46 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 49: 1 Introducao

Dica: Para localizar uma tag rapidamente, digite a primeira letra da tag.

5. Pressione a barra de espaço para exibir uma lista de atributos para a tag. 6. Digite src e pressione a tecla Enter.

O botão Procurar aparece sob o código que você acabou de digitar.

7. Selecione o botão de busca para navegar pelo arquivo de imagem ou digite o caminho do arquivo de imagem, Assets/images/logo.jpg.

8. Pressione a barra de espaço, selecione o atributo alt e pressione a tecla Enter. 9. Digite Logo e mova o cursor para a direita das aspas que aparecem após a palavra logo.

10. Pressione a barra de espaço, selecione o atributo align e pressione a tecla Enter.

Uma lista de valores conhecidos para o atributo align é exibida.

11. Selecione top na lista e pressione a tecla Enter. 12. Digite um colchete final (>) para completar a tag. 13. Na janela Documento, selecione Arquivo > Salvar.

Para adicionar um atributo a uma tag existente, coloque o ponto de inserção antes do colchete final (>) e pressione a barra de espaço. Uma lista de atributos é exibida. Adicione o atributo e especifique seu valor, se houver.

Verifique as alterações feitas

Após efetuar qualquer alteração em seu código, é possível visualizar imediatamente a alteração efetuada.

Para exibir uma representação visual de seu código, siga um dos procedimentos abaixo:

l Clique no botão Mostrar a visualização do projeto na barra de ferramentas ou selecione Exibir > Projeto.

l Pressione F12 para exibir a página no navegador. Para fechar o navegador e retornar ao código, pressione Alt-F4 (somente no Windows).

Adicionar um link com a barra Inserir

Em seguida, você adicionará um link à imagem do logo, de modo que, quando o usuário clique nele, a página inicial se abrirá.

Uma maneira de criar o link é simplesmente colocar uma tag âncora (<a>) ao redor da tag da imagem no código e configurar os atributos da tag âncora, com ou sem a ajuda de Dicas de código. Outra maneira é adicionar o link com a barra Inserir.

 

 

 

 

Página 47 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 50: 1 Introducao

Para escrever códigos com a ajuda da barra Inserir:

1. Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta.

2. Selecione o código da imagem logo.jpg inserida.

Nota: Realce toda a tag <img>.

3. Na categoria Comuns da barra Inserir, clique no ícone Hyperlink.

A caixa de diálogo Hyperlink se abre com a tag de imagem inserida.

4. Na caixa de texto Link,digite index.htm ou clique no ícone da pasta para localizar a página.

Nota: Para criar um link uma página da Web, digite a URL da página.

5. Clique em OK.

O Dreamweaver insere o código em sua página para criar o link ao redor da imagem.

6. Escolha Arquivo > Salvar.

Imprimir o código

É possível imprimir o código para editá-lo, arquivá-lo distribui-lo.

Para imprimir o código:

1. Abra uma página em Visualização de código. 2. Selecione Arquivo > Imprimir o c ódigo.

Dica: Para imprimir com números de linha, selecione Exibir > Opções de visualização de código > Números de linha antes de imprimir.

 

 

 

 

Página 48 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 51: 1 Introducao

Informações adicionais

Para obter mais informações sobre recursos de codificação manual no Dreamweaver, consulte Codificação no Dreamweaver.

Para obter mais informações sobre como acessar o código enquanto estiver trabalhando no ambiente de design visual do Dreamweaver, consulte Edição do código na visualização do projeto.

Como compreender os aplicativos para a Web

Um aplicativo para a Web é um conjunto de páginas que interagem com o usuário, entre si e com vários recursos em um servidor Web, incluindo bancos de dados. Antes de criar os aplicativos para web, você deve familiarizar-se com os conceitos discutidos neste capítulo.

O capítulo contém os seguinte tópicos:

l O que é um aplicativo para a Web? l Como funciona um aplicativo para a Web l Para acessar um banco de dados l Como criar páginas dinâmicas l Para selecionar uma tecnologia de servidor l Termos mais utilizados

O que é um aplicativo para a Web?

Um aplicativo para a web é um site que contém páginas armazenadas em um servidor com conteúdo parcialmente ou totalmente indeterminado. O conteúdo final de uma p ágina será determinado somente quando o usuário solicitar uma página do servidor web. Uma vez que o conteúdo final da página varia de acordo com cada pedido de ação do usuário, este tipo de página é chamado página dinâmica.

Os aplicativos para a web são criados para solucionar diversos desafios e problemas Esta seção descreve usos comuns de aplicativos para a web e fornece um exemplo simples.

Usos comuns de aplicativos para a Web

 

 

 

 

 

 

Página 49 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 52: 1 Introducao

Os aplicativos para a Web possuem diversas utilidades, tanto para usuários como desenvolvedores, incluindo as seguintes:

l Permite que os usuários localizem informações de forma rápida e fácil em um site repleto de conteúdo.

Este tipo de aplicativo para web oferece aos usuários a capacidade de procurar, organizar e navegar através do conteúdo do modo que acharem conveniente. Os exemplos incluem intranets das empresas, Microsoft MSDN e Amazon.com.

l Agrupa, salva e analisa os dados fornecidos pelos usuários.

Há alguns anos, os dados inseridos em formato HTML eram enviados como mensagens de e-mail a funcionários ou aplicativos CGI para serem processados. Um aplicativo para a web pode salvar dados do formato diretamente em um banco de dados, extrair os dados e criar relatórios baseados na Web para análise. Páginas de bancos on-line, sites de lojas virtuais e formulários de informações pessoais do usuário são alguns exemplos.

l Atualize sites com conteúdo em constante modificação

Um aplicativo para a web elimina a tarefa de atualizar constantemente o conteúdo HTML do site. Os provedores de conteúdo, como sites de notícias on-line, fornecem o conteúdo para o aplicativo da Web e o aplicativo atualiza o site automaticamente. Exemplos: Economist e CNN.

Exemplo de aplicativo para a web

Clay é um web designer profissional e usuário do Dreamweaver há muito tempo, responsável pela manutenção do intranet e sites na Internet em uma empresa de médio porte. Um dia, sua coleta Jill, do departamento de recursos humanos, trouxe -lhe um problema. O RH da empresa administra um programa de boa forma que concede aos funcionários pontos para cada quilômetro percorrido a pé, de bicicleta ou corrido. Cada funcionário deve informar o total de quilômetros percorridos mensalmente enviando um e-mail para Jill. Ao final do mês, Jill reúne todas as mensagens de e-mail e concede aos funcionários pequenos prêmios em dinheiro de acordo com sua pontuação total.

O problema é que o programa de boa forma tem sido um sucesso. Hoje, o número de funcionários participantes cresceu tanto que a caixa postal Jill fica inundada de e-mails ao final de cada mês. Jill pergunta a Clay se existe uma-solução baseada na Web.

Clay propõe um aplicativo intranet para a web para executar as seguintes tarefas:

l Os funcionários poderão digitar sua quilometragem em uma página da Web usando formato HTML simples

l Armazena a quilometragem do funcionário em um banco de dados l Calcula os pontos com base nos dados de quilometragem l Os funcionários poderão acompanhar seu progresso mensalmente l Permite que Jill acesse o total de pontos ao final de cada mês com um único clique

Em pouco tempo, Clay desenvolveu um aplicativo com o Dreamweaver MX, que possui as

 

 

Página 50 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 53: 1 Introducao

ferramentas necessárias para a cria ção deste tipo de aplicação de forma rápida e fácil.

Como funciona um aplicativo para a Web

Um aplicativo para a Web é um conjunto de páginas normais e dinâmicas. Uma página normal é um página que não é modificada quando solicitada pelo usuário: o servidor web envia a página ao navegador que a solicitou sem modificá-la. Em contraste, uma página da web dinâmica é modificada pelo servidor antes de ser enviada ao navegador. Chama-se página dinâmica devido à sua natureza vari ável.

Por exemplo: é possível criar uma página para exibir resultados do programa de boa forma e deixar certas informações (nome do funcionário e resultados) a serem determinadas quando a página for solicitada por um funcionário.

Como processas páginas da Web normais

Um site normal compreende um conjunto de páginas e arquivos HTML inter -relacionados hospedados em um computador com servidor Web.

Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers). Um pedido de página é gerado quando o usuário clica em um link em uma página da Web, seleciona um site favorito em um navegador ou digita o endereço de um site (URL) na caixa de texto Endereço e clica em Ir no navegador.

O conteúdo final de uma página da web normal é determinado pelo designer da página e não é modificado quando a página for solicitada. Por exemplo:

<html> <head> <title>Call Department</title> </head> <body> <strong>Call Department</strong><br> Talk to someone in Sales. </body> </html>

Cada linha do código HTML da página é escrito pelo designer antes de a página ser colocada no servidor. Uma vez que o conteúdo HTML não é alterado quando colocado no servidor, este tipo de página é chamado de página estática.

Nota: Na realidade, é possível que uma página “estática” não seja totalmente estática. Por exemplo: uma imagem cambiável ou filme Flash podem tornar viva uma página estática. Este sistema de ajuda, no entanto, irá referir-se a uma página estática se for enviada ao navegador sem alterações.

 

 

 

 

Página 51 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 54: 1 Introducao

Quando o servidor web recebe um pedido de uma página estática, o servidor verifica o pedido, localiza a página e a envia ao navegador que a solicitou, conforme demonstrado na figura a seguir:

No caso de aplicativos para a web, certas linhas de c ódigo não são determinadas quando o usuário solicita a página. Estas linhas devem ser determinadas por algum mecanismo antes de a página ser enviada ao navegador. Este mecanismo é exemplificado na seção seguinte.

Processamento de páginas dinâmicas

Quando um servidor web recebe um pedido de uma página da web normal, o servidor envia a página ao navegador que a solicitou sem nenhuma alteração. Ao receber o pedido de uma página dinâmica, no entanto, o servidor web age de modo diferente: transfere a página a uma extensão de software especial responsável em completar a página. Este software especial é chamado de servidor de aplicativo.

O servidor de aplicativo lê o código da página, preenche 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 retorna ao servidor web, que por sua vez envia a página ao navegador que a solicitou. Ao acessar a página, tudo o que o navegador exibe é simplesmente HTML. A seguir, um exemplo do processo:

 

 

Página 52 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 55: 1 Introducao

Para acessar um banco de dados

Um servidor de aplicativo permite trabalhar com recursos centralizados no servidor, como bancos de dados. Por exemplo: uma página dinâmica pode instruir o servidor de aplicativo a extrair dados de um banco de dados e inseri-los no conteúdo HTML da página. Para obter mais informações, veja Guia do iniciante em bancos de dados.

As instruções para extrair dados de um banco de dados são chamadas de consulta ao banco de dados. Uma consulta consiste de critérios de busca expressos em uma linguagem de acesso a banco de dados chamada SQL (Structured Query Language), ou base de dados estruturada. A consulta por SQL é determinada por scripts ou tags no servidor da página.

Um servidor de aplicativo não pode comunicar-se diretamente com um banco de dados porque o formato propriet ário do banco de dados torna os dados indecifráveis, do mesmo modo que um documento do Word não pode ser lido pelo Notepad. O servidor de aplicativo pode comunicar-se somente com o auxílio de um driver do banco de dados. Um driver do banco de dados é um software que atua como um intérprete entre o servidor de aplicativo e o banco de dados.

Após o driver ter estabelecido a comunicação, a consulta é executada no banco de dados e um conjunto de registros é criado. Um conjunto de registros é um subconjunto de dados extra ídos de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de aplicativo e os dados são utilizados pela página dinâmica.

A seguir uma consulta simples ao banco de dados escrita em SQL:

 

 

Página 53 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 56: 1 Introducao

SELECT sobrenome, nome, pontos de aptidao FROM funcionarios

Esta sentença cria um conjunto de registros de três colunas e o preenche com linhas contendo o sobrenome, nome e pontos de aptidão de todos os funcionários no banco de dados. Para obter mais informações, veja Manual básico de SQL .

A seguir uma ilustração do processo de consulta a um banco de dados e como retornar os dados ao navegador:

É possível utilizar quase todos os bancos de dados com aplicativos para a Web, contanto que haja um driver adequado para o banco de dados.

Se você pretende criar aplicativos pequenos e de baixo custo, utilize bancos de dados com base em arquivos, como os do Microsoft Access. Se desejar criar aplicativos mais poderosos para fins corporativos, utilize um banco de dados com base em servidor, como aqueles criados no Microsoft SQL Server, Oracle 8i ou IBM DB2.

Página 54 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 57: 1 Introducao

Se o banco de dados estiver localizado em um sistema diferente do servidor Web, estabeleça uma conexão rápida entre os dois sistemas para que o aplicativo para a Web possa operar de modo rápido e eficiente.

Como criar páginas dinâmicas

A criação de uma página dinâmica consiste em desenvolver o conteúdo HTML primeiro, adicionando os scripts ou tags centralizados no servidor ao HTML para tornar a página dinâmica. Ao visualizar o código resultante, a linguagem aparece incorporada ao HTML da página. Portanto, essas linguagens s ão conhecidas como linguagens de programação incorporadas ao HTML. O exemplo a seguir utiliza ColdFusion Markup Language (CFML):

<html> <body> <b>Call Department</b><br> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> Fale com um funcionário do #department#. </cfoutput> <!--- embedded instructions end here ---> </body> </html>

As instruções incorporadas a esta página executam as seguintes ações:

1. Criam uma variável chamada departamento e atribuem a seqüência “Sales” a ela. 2. Gravam o valor da seqüência da variável “Sales” no código HTML.

O servidor de aplicativo retorna a seguinte página ao servidor web:

<html> <body> <b>Call Department</b><br> Talk to someone in Sales. </body> </html>

O servidor web envia a página ao navegador que a solicitou, que a exibe do seguinte modo:

Call Department Talk to someone in Sales.

A linguagem de scripts ou com base em tags utilizada depende da tecnologia do servidor A seguir as linguagens mais comuns para as cinco tecnologias de servidor suportadas pelo Dreamweaver MX:

 

 

Tecnologia de servidor Linguagem

ColdFusion ColdFusion Markup Language (CFML)

ASP.NET Visual Basic

Página 55 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 58: 1 Introducao

Para obter mais informações, veja Para selecionar uma tecnologia de servidor.

O Dreamweaver pode gravar escrever os scripts ou tags do servidor necessários para ativar a página ou o usuário pode inseri-los manualmente no ambiente de codificação do Dreamweaver.

Para selecionar uma tecnologia de servidor

É possível utilizar o Dreamweaver MX para construir aplicativos para a Web mediante cinco tecnologias de servidor: ColdFusion, ASP.NET, ASP, JSP ou PHP. Cada uma destas tecnologias corresponde a um tipo de documento no Dreamweaver. A escolha de uma tecnologia para o aplicativo depende de vários fatores, incluindo o grau de familiaridade com várias linguagens de script e o servidor de aplicativo que deseja utilizar.

Se você não estiver familiarizado com o desenvolvimento de aplicativos para a Web ou desenvolvimento de aplicativos em geral, é recomendável o uso de ColdFusion, pois proporciona um ambiente de criação de scripts de servidor fácil de aprender, totalmente integrado ao Dreamweaver. Se você for experiente em outras tecnologias de servidor, como JSP, PHP, ASP ou ASP.NET, o Dreamweaver também oferece suporte para essas tecnologias.

A escolha de uma tecnologia de servidor também depende do servidor de aplicativo que você pretende utilizar para criar o aplicativo da Web. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Por exemplo: se você tiver o ColdFusion MX, é possível escolher o ColdFusion como a tecnologia de servidor. Se você tiver acesso a um servidor com Microsoft Internet Information Server 5 (IIS) e .NET Framework, selecione ASP.NET. O PHP é uma opção se você tiver acesso a um servidor web com servidor de aplicativo PHP. JSP é uma opção se você tiver acesso a um servidor web com servidor de aplicativo JSP (como o Macromedia JRun).

Uma edição do desenvolvedor do ColdFusion MX está disponível no CD do Dreamweaver MX (somente versão Windows) e no site da Macromedia.

Para obter mais informações sobre servidores de aplicativos, veja Configuração de um servidor de aplicativos.

Para obter mais informações sobre ColdFusion, consulte a documentação do Dreamweaver (Ajuda > Como utilizar o ColdFusion) ou visite o site da Macromedia na Web.

Para obter mais informações sobre ASP.NET, visite o site da Microsoft na Web.

Para obter mais informações sobre ASP, visite o site da Microsoft.

C#

Active Server Pages (ASP) VBScript JavaScript

JavaServer Pages (JSP) Java

PHP PHP

 

 

Página 56 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 59: 1 Introducao

Para mais informações sobre JSP, visite o site da Sun.

Para mais informações sobre PHP, visite o site da PHP na Web.

Termos mais utilizados

Esta seção lista os termos mais freqüentemente utilizados.

Um servidor de aplicativos é um software que ajuda o servidor web a processar páginas na web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador. Para obter mais informações, veja Como funciona um aplicativo para a Web.

Os servidores de aplicativos mais comuns s ão Macromedia ColdFusion Server, Macromedia JRun Server, Microsoft .NET Framework, IBM WebSphere e Apache Tomcat.

Banco de dados é conjunto de dados armazenados em tabelas. Cada linha de uma tabela consiste de um registro de dados e cada coluna consiste de um campo do registro, do seguinte modo.

Driver do banco de dados é um software que atua como um intérprete entre o servidor de aplicativos e o banco de dados. Os dados do banco de dados são armazenados em formato proprietário. O driver de banco de dados permite ao aplicativo da Web ler e manipular os dados que, de outra maneira, não seriam decifráveis.

Sistema de gerenciamento de banco de dados (DBMS ou sistema de banco de dados) é um software utilizado para criar e manipular banco de dados. Os sistemas de gerenciamento de banco de dados mais comuns são Microsoft Access, Oracle 9i e MySQL.

Consulta ao banco de dados é a operação que extrai um conjunto de registros de um banco de dados. Uma consulta consiste de critérios de busca expressos em uma linguagem de acesso a banco de dados chamada SQL. Por exemplo: a consulta pode especificar que apenas algumas colunas ou somente alguns registros serão inseridos no conjunto de registros.

Página dinâmica é uma página da Web personalizada ao mesmo tempo que é executada por um servidor de aplicativo antes de ser enviada ao navegador. Para obter mais informações, veja Como funciona um aplicativo para a Web.

Conjunto de registros é um subconjunto de dados extraídos de uma ou mais tabelas de um banco de dados, como no exemplo a seguir:

 

 

Página 57 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 60: 1 Introducao

Banco de dados relacional é um banco de dados contendo uma ou mais tabelas, sendo que as tabelas compartilham os dados das tabelas. O banco de dados a seguir é relacional porque duas tabelas compartilham a coluna DepartmentID.

Tecnologia de servidor é a tecnologia utilizada pelo servidor de aplicativos para modificar páginas dinâmicas em tempo de execução.

O ambiente de desenvolvimento do Dreamweaver MX suporta as seguintes tecnologias de servidor:

l Macromedia ColdFusion l Microsoft ASP.NET l Microsoft Active Server Pages (ASP) l Sun JavaServer Pages (JSP) l PHP Hypertext Preprocessor (PHP)

É possível utilizar o ambiente de codificação do Dreamweaver para desenvolver páginas para qualquer tecnologia de servidor não relacionada anteriormente.

Página estática é uma página da web que não sofre alterações enquanto é executada por um servidor de aplicativo antes de ser enviada ao navegador. Para obter mais informações, veja Como processas páginas da Web normais.

Um aplicativo para a web é um site que contém páginas armazenadas em um servidor web com conteúdo parcialmente ou totalmente indeterminado. O conteúdo final das páginas somente será determinado quando o usuário solicitar uma página do servidor web. Uma vez que o conteúdo final da página varia de acordo com cada pedido de a ção do usuário, este tipo de página é chamado página dinâmica.

Servidor web é um software que fornece páginas da web em resposta a pedidos originados de

Página 58 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 61: 1 Introducao

navegadores (browsers). Um pedido de página é gerado quando o usuário clica em um link em uma página da Web, seleciona um site favorito em um navegador ou digita o endereço URL na caixa de texto Endereço e clica em Ir no navegador.

O servidores web mais conhecidos são Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server e iPlanet Web Server.

Como desenvolver um aplicativo para a Web no Dreamweaver MX

Neste capítulo, você saberá como utilizar o Dreamweaver MX para desenvolver rapidamente aplicativos para a Web dinâmicos operados por banco de dados. Um aspecto importante no desenvolvimento de aplicativos para a Web dinâmicos é a capacidade de apresentar informações armazenadas em banco de dados em formato da Web.

Ao concluir esta li ção, você saberá como incorporar informações de banco de dados em um site da Web. Você desenvolverá aplicativos para a Web para o site locação de veículos Global por meio um banco de dados existente que contém três tabelas de dados: locais, comentários e regiões. Você também utilizará o Dreamweaver para criar uma consulta SQL simples para extrair dados do banco de dados.

Nesta lição, você construirá as seguintes páginas dinâmicas:

l Uma página de inserção, que permite ao visitante do site enviar comentários para a empresa

l Uma página de detalhes, que lista os comentários do cliente e informações de contato

Antes de iniciar

O guia de configuração convenientemente localizado ao final do guia de introdução o orientará através da etapas de configuração do ambiente de trabalho do Dreamweaver para a criação de páginas dinâmicas.

Consulte o guia de configura ção apropriado para seu servidor de aplicativos.

Configuração de um exemplo de site ColdFusion

Configuração de um exemplo de site ASP.NET

Configuração de um exemplo de site ASP

Configuração de um exemplo de site JSP

Configuração de um exemplo de site PHP

 

 

 

 

Página 59 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 62: 1 Introducao

Complete as tarefas a seguir:

l Configurar o sistema l Configure o Dreamweaver para funcionar com o servidor de aplicativos de sua escolha l Defina uma conexão para o banco de dados

Os exemplos de tela neste capítulo mostram as caixas de di álogo do Macromedia ColdFusion. No entanto, você poderá concluir as li ções neste capítulo para todos os outros modelos de servidor suportados pelo Dreamweaver MX: ColdFusion, PHP, ASP.NET, ASP e JSP.

Como abrir um documento de trabalho

Um ótimo ponto de partida para desenvolver um aplicativo de banco de dados é criar uma lista dos registros armazenados em um banco de dados. No aplicativo que você está criando neste capítulo, as informações da tabela de comentários do cliente serão listadas no banco de dados. Em seguida, você criará uma página para a Web dinâmica que permite ao cliente inserir comentários ou questões diretamente no banco de dados.

Pode-se começar localizando os documentos com os quais você trabalhará para criar as páginas.

1. Siga um dos procedimentos abaixo para abrir o painel Site: ¡ No painel de grupo Arquivos, clique na seta de expansão para exibir o painel Site. ¡ Escolha Janela > Site. ¡ Pressione a tecla F8.

O painel Site será aberto.

 

 

Página 60 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 63: 1 Introducao

2. No menu pop-up Site, selecione o site Global Car definido para o servidor de aplicativos. 3. No painel Site, clique duas vezes no arquivo customerComment para abri-lo.

O documento é aberto na janela Documento.

4. Se você estiver visualizando o documento no modo Visualização de código, clique no botão Mostrar a visualização do projeto ou no botão Mostrar as visualizações de código e do projeto na barra de ferramentas do documento, de modo que seja possível utilizar os exemplos de tela fornecidos como pontos de verificação ao concluir a lição.

A página parcialmente completa será editada.

Defina um conjunto de registros

Agora você criará um conjunto de registros para selecionar os dados a serem exibidos. Um conjunto de registros é um subconjunto de informações extraídas de um banco de dados como resultado de uma consulta. (no ASP.NET, o conjunto de registros é conhecido como DataSet). Um consulta ao banco de dados consiste em um critério de pesquisa que define o que será incluído no conjunto de registros. É possível utilizar as informações extraídas como fonte de conteúdo para suas páginas dinâmicas.

O Dreamweaver MX fornece uma interface fácil de usar para a criação de consultas simples de SQL –não é necessário conhecer a SQL para criar um conjunto de registros no Dreamweaver.

Você criará um conjunto de registros para selecionar todos os valores da tabela COMMENTS no banco de dados do site Global.

1. No Dreamweaver, abra a caixa de diálogo Conjunto de registros ou DataSet (ASP.NET) efetuando um dos procedimentos a seguir:

¡ Na guia Aplicativo da barra Inserir, clique no botão Conjunto de registros ou DataSet (ASP.NET).

¡ Selecione Janela > Ligações para abrir o painel Ligações, clique no botão de adição

(+) e selecione Conjunto de registros DataSet (ASP.NET). ¡ Clique na seta de expansão do painel Application e, em seguida, clique no botão de

adição (+) no painel Ligações e selecione Conjunto de registros ou DataSet (ASP.NET).

A caixa de diálogo Conjunto de registros ou DataSet é exibida. Se a caixa de diálogo parecer mais complexa que a caixa de diálogo abaixo, clique no botão Simples.

 

 

Página 61 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 64: 1 Introducao

2. Na caixa de texto Nome, digite rsComments. 3. No menu pop-up DataSource (ColdFusion) ou menu Conexões (outros tipos de página de

servidor), selecione connGlobal.

A caixa de diálogo Conjunto de registros ou DataSet é atualizada com os dados do banco de dados.

4. No menu pop-up Tabela, COMMENTS já está selecionado. 5. Em Colunas, Todos já está selecionado.

Aceite o valor padrão para solicitar o conjunto de registros completo.

6. No menu pop-up Ordenar, selecione LAST_NAME e no segundo menu pop-up, selecione Ascendente.

Os registros recuperados listarão os dados em ordem alfabética de nome de cliente iniciando pelo último nome.

Página 62 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 65: 1 Introducao

7. Clique em Testar para testar o conjunto de registros ou conjunto de dados.

Os registros do banco de dados correspondentes aos critérios de seleção do conjunto de registros ou conjunto de dados são exibidos na janela Testar a instrução SQL.

8. Clique em OK para fechar a janela Testar a instrução SQL. 9. Clique em OK para fechar a caixa de diálogo Conjunto de registros ou DataSet.

O conjunto de registros é exibido no painel Ligações.

Dica: Se não for possível visualizar todos os campos de conjuntos de registros, clique no botão de adição (+) ao lado de Conjunto de registros (rsComments) para expandir a exibição do conjunto de registros.

Página 63 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 66: 1 Introducao

Exibir os registros do banco de dados

A seguir, você criará uma página listando os registros existentes na tabela COMMENTS. Você deve gerar a página dinamicamente em vez de digitar as informações manualmente.

Você começará criando uma tabela para estruturar a lista de dados.

1. No documento customerComment, coloque o ponto de inserção após “Comentários do cliente” e pressione Enter para definir onde a tabela será inserida.

2. Insira uma tabela seguindo um dos procedimentos abaixo: ¡ Na barra Inserir, clique na guia Comuns e no botão Tabela ou arraste-o para o

documento.

¡ Na barra Inserir, clique na guia Layout e no botão Tabela ou arraste-o para o

documento. ¡ Selecione Inserir > Tabela.

A caixa de diálogo Inserir tabela é exibida.

3. Na caixa de diálogo, defina as seguintes opções:

Em Linhas, digite 2.

 

 

Página 64 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 67: 1 Introducao

Em Preenchimento de célula, digite 2.

Em Colunas, digite 4.

Em Espaçamento de célula, digite 2.

Em Largura, digite 80.

A caixa de diálogo completada deverá ter a seguinte aparência:

4. Clique em OK.

A tabela é inserida no documento.

5. Na linha superior da tabela adicione denominações para as entradas da tabela:

Na primeira célula da tabela, digite Nome.

Na célula seguinte, digite Sobrenome.

Na célula seguinte, digite Endereço de e-mail.

Na última célula, digite Coment ários.

6. Salve o documento (Arquivo > Salvar).

Adicionar campos dinâmicos à tabela

 

 

Página 65 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 68: 1 Introducao

Agora você está pronto para adicionar os campos de conjuntos de registros à tabela.

1. Abra o painel Ligações, caso não esteja aberto, conforme um dos procedimentos a seguir. ¡ Selecione Janela > Ligações. ¡ Clique na seta de expansão do grupo de painel Application e selecione o painel

Ligações. 2. Adicione o campo FIRST_NAME à tabela efetuando um dos procedimentos a seguir:

¡ Coloque o ponto de inserção na célula da tabela sob a denominação Nome e, no painel Ligações, selecione FIRST_NAME e clique em Inserir.

¡ Arraste FIRST_NAME do painel Ligações para a célula da tabela. 3. Repita a etapa 2 para adicionar LAST_NAME, EMAIL e COMMENTS à tabela.

A sua página deverá ser semelhante a esta:

4. Salve o documento.

Defina uma região repetida

A tabela criada contém apenas uma linha de dados. Para exibir todos os registros, será necessário configurar a linha da tabela como regi ão repetida. A página se repetirá com os registros de dados para cada registro correspondente aos requisitos de busca do conjunto de registros.

1. Na janela Documento, selecione a linha inferior da tabela seguindo um dos procedimentos abaixo:

¡ Coloque o ponteiro na primeira tabela e arraste-a para a direita para selecionar todas as células da linha.

¡ Clique em uma das células e, no seletor de tags, clique na tag <tr>. ¡ Posicione o ponteiro à esquerda da linha da tabela. Ao se transformar em uma seta,

clique na borda da linha da tabela para selecionar a linha. 2. Configure uma região repetida seguindo um dos procedimentos abaixo:

¡ No painel Comportamentos de servidor, clique no botão de adição (+) e selecione Repetir a região.

¡ Na guia Aplicativo da barra Inserir, clique no botão Região repetida. ¡ Selecione Inserir > Objetos de aplicativos > Região repetida.

A caixa de diálogo Repetir a região é exibida.

 

 

Página 66 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 69: 1 Introducao

3. Na caixa de diálogo, aceite a configuração padrão e clique em OK.

A linha da tabela é exibida com um controle com alça.

4. Salve o documento.

Como visualizar as páginas

Em seguida, salve as páginas e visualize-as para saber como o aplicativo desenvolvido funcionará. Para visualizar as páginas do modo como parecerão quando processadas pelo servidor, abra a página no modo Live Data.

1. Com customerComment selecionado, efetue um dos procedimentos a seguir para visualizar o dados nas páginas:

¡ Na barra de ferramentas do documento, clique no botão Visualização do Live Data.

¡ Selecione Exibir > Live Data.

A página é atualizada com uma lista de dados do cliente extraídos do banco de dados.

 

 

Página 67 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 70: 1 Introducao

Crie um formulário de inserção de registro

A página seguinte a ser criada para o site Global é uma página de comentários do cliente. Nesta página, os clientes podem inserir comentários diretamente no banco de dados. Você conectará esta página à tabela Comentários no banco de dados do site Global.

O Dreamweaver inclui vários objetos do aplicativo que auxiliam na criação rápida e fácil das páginas do aplicativo para a Web. Você utilizará um objeto de aplicativo para criar a página de inserção. O objeto de aplicativo Inserir registro cria um formulário HTML, campos de dados vinculados (ou ligados) ao banco de dados e os scripts de servidor necessários para criar uma página dinâmica.

Adicionar um objeto de aplicativo Formulário de inserção de registro

É possível utilizar um objeto de aplicativo Formulário de inserção de registros para criar um formulário com links aos campos de um banco de dados. O objeto de aplicativo permite selecionar os campos a serem incluídos no formulário, campos identificadores e selecionar o tipo de objetos de formulário a serem inseridos. Quando o usuário insere os dados nos campos de formulário e clica no botão de envio, um novo registro é inserido no banco de dados. Também é possível definir uma página para abrir após um registro ter sido enviado com êxito, de modo que o remetente saberá que o banco de dados foi atualizado.

1. No painel Site, localize o arquivo customerInsert e clique duas vezes no arquivo para abri-lo.

 

 

 

 

Página 68 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 71: 1 Introducao

O documento se abre na janela Documento.

2. Coloque o ponto de inserção no documento após a palavra “possível” e pressione a tecla Enter ou Return para definir onde o objeto de aplicativo será inserido.

3. Efetue um dos procedimentos a seguir para inserir um objeto de inserção de registro: ¡ Na guia Aplicativo da barra Inserir, clique no botão Formulário de inserção de

registros.

¡ Selecione Inserir > Objetos de aplicativos > Formulário de inserção de registros.

A caixa de diálogo Formulário de inserção de registros será exibida.

4. No menu pop-up Data Source (ColdFusion) ou Conexão, selecione connGlobal. 5. No menu pop-up Tabela, verifique se COMMENTS está selecionado. 6. Na caixa de texto Após a inserção, ir para ou Se tiver êxito, ir para (ASP.NET), clique em

Procurar. 7. Na caixa de diálogo que aparece, selecione o arquivo denominado insertOK e clique em

OK para fechar a caixa de diálogo.

Você selecionou uma página para exibir a um visitante do site, de modo que possa acusar recebimento das informações enviadas.

Crie o formulário de inserção

Na seção Campos de formulário da caixa de diálogo Formul ário de inserção de registro, defina o formulário no qual o visitante irá inserir dados.

 

 

Página 69 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 72: 1 Introducao

1. Na caixa de diálogo Formulário de inserção de registro, remova os campos que você não deseja incluir no formulário do seguinte modo:

Selecione COMMENT_ID e clique no botão de subtração (-).

Selecione TELEPHONE e clique no botão de subtração (-).

Selecione SUBMIT_DATE e clique no botão de subtração (-).

Selecione ANSWERED e clique no botão de subtração (-).

2. Se você estiver criando uma página em ASP.NET, altere a ordem alfabética dos campos do formulário efetuando um dos procedimentos a seguir:

Na lista Coluna, selecione COMMENTS e clique na seta abaixo para posicionar COMMENTS sob LAST_NAME.

Na lista Coluna, selecione EMAIL e clique na seta abaixo para posiciona-lo sob LAST_NAME.

3. Na lista Campos de formulário, selecione FIRST_NAME para especificar o modo como o campo será exibido no formul ário.

4. No campo Denominação, digite Nome.

Esta denominação será exibida no formulário HTML próximo ao campo de texto.

5. Defina o tipo de objeto de formulário para o campo efetuando um dos procedimentos a seguir:

¡ Se você estiver utilizando ASP.NET, aceite o valor padrão Campo de texto em Exibir como e, no menu pop-up Enviar como, modifique o valor padrão WChar para VARCHAR.

¡ Se você estiver utilizando outros tipos de página do servidor, aceite o valor padr ão Campo de texto em Exibir como e, no menu pop-up Enviar como, aceite o valor padrão Texto.

6. No campo Valor padrão, digite Digite seu nome para definir o texto inicial no campo que permite ao usuário conhecer o tipo de informação que deverá ser fornecida.

Após concluir, a entrada FIRST_NAME deve ser similar à do exemplo.

7. Repita as etapas 3 a 6 para os campos do formulário LAST_NAME e EMAIL.

Na caixa de texto Valor padr ão, digite o texto inicial que deve aparecer no campo quando for exibido no formulário.

Página 70 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 73: 1 Introducao

8. Selecione COMMENTS para definir os valores deste campo. 9. No campo Identificador, digite Comentários.

10. Defina os valores do campo de formulário Comentários efetuando um dos procedimentos a seguir:

¡ Se você estiver utilizando ASP.NET, aceite o valor padrão Área de texto em Exibir como e, no menu pop-up Enviar como, selecione VARCHAR

¡ Se você estiver utilizando outros tipos de páginas de servidor, aceite o valor padrão Área de texto em Exibir como e, no menu pop-up Enviar como, aceite o valor padrão Texto.

11. Na caixa de texto Valor padr ão, digite o texto que aparecerá inicialmente neste campo no formulário ou deixe este campo em branco.

Após concluir, a caixa de diálogo deve se parecer como a do exemplo.

12. Clique em OK para fechar a caixa de diálogo.

O objeto de aplicativo Formulário de inserção de registro é inserido no documento.

13. Salve o documento.

Página 71 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 74: 1 Introducao

Copie arquivos ao servidor

O passo seguinte é salvar as alterações e copiar os arquivos atualizados ao servidor. Após copiar os arquivos, você exibirá a página de inserção de registro, adicionará um comentário ou pergunta e enviará os dados para testar o aplicativo.

1. No painel Site, selecione customerInsert e clique no botão Colocar os arquivos (seta azul para cima) para copiar o arquivo local ao servidor.

2. Quando o Dreamweaver perguntar se você deseja copiar os arquivos dependentes ao servidor, selecione Sim.

Nota: Com alguns modelos de servidor, o Dreamweaver cria uma pasta Conexões em sua pasta local. Copie também esta pasta ao servidor remoto para que o aplicativo possa funcionar. No painel Site, selecione a pasta Conexões e clique no botão Colocar o(s) arquivo(s) para copiar a pasta a seu servidor.

3. Com customerInsert selecionado, escolha Arquivo > Visualizar no navegador ou pressione F12 para exibir o documento.

4. Digite os dados de teste no formul ário e clique no botão Inserir registro no documento para enviar os dados.

As informações são atualizadas no banco de dados e a página insertOK é exibida.

Como exibir a atualização

É possível visualizar as alterações feitas no banco de dados. As alterações podem ser visualizadas abrindo-se o documento customerComment criado na primeira parte desta lição ou exibindo as alterações no banco de dados.

l No Dreamweaver, painel Site, clique duas vezes no documento denominado customerComment e selecione Arquivo > Visualizar no navegador e escolha um navegador para visualizar a página.

O registro inserido deve aparecer na lista de comentários do cliente.

l No Dreamweaver, painel Banco de dados (Janela > Banco de dados), localize o ícone do banco de dados connGlobal, clique no botão de edição (+) ao lado de Tabelas para exibir a lista de tabelas no banco de dados. Clique com o botão direito do mouse na tabela COMMENTS e selecione Exibir os dados.

Uma lista de registros contidos no banco de dados é exibida e o comentário recém-inserido aparece como a última entrada na tabela.

 

 

 

 

 

Página 72 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 75: 1 Introducao

Informações adicionais

O Guia de introdução apresenta algumas ferramentas que você pode utilizar para criar páginas de dados dinâmicas. Você aprendeu como criar conjuntos de registros para definir os dados que deseja utilizar em seu site da Web. Você também utilizou um objeto de aplicativo do Dreamweaver para criar um aplicativo para a Web funcional, que permite interagir com dados armazenados em um banco de dados.

Para obter mais informações sobre a criação de sites da Web com o Dreamweaver, consulte o Como criar seu primeiro site da Web com o Dreamweaver. Para obter mais informações sobre como utilizar os recursos de codificação do Dreamweaver, consulte o Como editar códigos no Dreamweaver.

Para obter informações detalhadas sobre tópicos cobertos nesta seção do Guia de introdução do Dreamweaver MX, consulte o tópicos a seguir no guia on-line, Como utilizar o Dreamweaver MX (Ajuda > Como utilizar o Dreamweaver MX):

l Como armazenar e recuperar dados para a página l Como definir fontes de dados dinâmicas l Como adicionar conteúdo dinâmico às páginas da Web l Como criar links de navegação para conjuntos de registros l Como construir uma página de inserção em pouco tempo l Como criar uma página de inserção em blocos

Como instalar um servidor Web no Windows

Para desenvolver e testar páginas para a web dinâmicas, é necessário um servidor web ativo. Este capítulo descreve como a maioria dos usuários do Windows pode instalar e utilizar um servidor web Microsoft em seu computador local.

Os usuários do Macintosh podem utilizar um servidor web em um computador conectado em rede ou empresa de hospedagem na Web. Para obter mais informações sobre o servidor Apache, visite o site da Apache. Observe, no entanto, que a pasta raiz do servidor Apache difere da pasta raiz dos servidores Microsoft, conforme já discutido neste guia (Inetpub\wwwroot).

Este capítulo contém as seguintes seções:

l Guia de introdução l Como instalar o Personal Web Server l Como instalar o Internet Information Server l Teste do servidor web l Fundamentos básicos do servidor web

Nota: A Macromedia não fornece suporte técnico para software de outros fabricantes, como o Microsoft Personal Web Server. Para obter assistência, contate o suporte técnico da Microsoft.

 

 

 

Página 73 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 76: 1 Introducao

Guia de introdução

Se você for usuário do Windows, é possível instalar e executar os servidores web a seguir em seu computador: Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS), versão completa do PWS. Também é possível instalar o servidor web em um computador com sistema Windows conectado em rede, de modo que outros desenvolvedores de sua equipe possam utilizá-lo.

Nota: O Windows Millennium Edition (ME) não suporta nenhuma versão do PWS ou IIS. Para obter mais informações, consulte o site da Microsoft na Web.

O PWS ou IIS já devem estar instalados em seu computador. Verifique a estrutura de pastas para saber se contém uma pasta C:\Inetpub or D:\Inetpub. O PWS e o IIS geram esta pasta durante a instalação.

Se a pasta não existir, faça o seguinte:

l Windows 98: Copie o arquivo de instalação do PWS do CD do Windows 98 no disco rígido. O arquivo está localizado na pasta Add-Ons/PWS. Em seguida, instale o servidor web. Para obter instruções, consulte Como instalar o Personal Web Server.

l Windows NT Workstation: Faça o download do NT 4.0 Option Pack do site da Microsoft. O Option Pack inclui o arquivo de instala ção do PWS. Em seguida, instale o servidor web. Para obter instruções, consulte Como instalar o Personal Web Server.

Nota: O Service Pack 6 ou superior deve ser instalado no computador para instalação do NT 4.0 Option Pack. Faça o download do Service Pack do site da Microsoft.

l Windows NT Server: O IIS deve estar instalado e funcionando em seu sistema. Do contrário, instale -o ou peça ao administrador de sistemas para fazê-lo.

l Windows 2000: O IIS deve estar instalado em seu sistema. Caso contrário, é preciso instalá-lo Para obter mais informações, veja Como instalar o Internet Information Server.

l Windows XP Professional: O IIS deve estar instalado em seu sistema. Caso contrário, é preciso instalá-lo Para obter mais informações, veja Como instalar o Internet Information Server.

Tópico relacionado

Fundamentos básicos do servidor web

Como instalar o Personal Web Server

Os usuários do Windows 98 e NT Workstation devem instalar o PWS. Se você for usuário do Windows NT Server, Windows 2000 ou Windows XP Professional, instale o IIS. Para obter mais informações, veja Como instalar o Internet Information Server.

 

 

 

 

Página 74 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 77: 1 Introducao

Nota: O Windows Millennium Edition (ME) não suporta nenhuma versão do PWS. Para obter mais informações, consulte o site da Microsoft na Web.

É possível instalar o PWS no mesmo sistema Windows com o Dreamweaver MX instalado. Certifique-se de que o Internet Explorer 4.01 esteja instalado no sistema, caso contrário, o PWS não poderá ser instalado.

Para instalar o PWS:

1. Clique duas vezes no arquivo de instala ção do PWS, no CD do Windows 98 ou no arquivo baixado do site da Microsoft.

2. Siga o Assistente de instalação. 3. Quando o programa solicitar o diretório padrão inicial para a publicação na Web, aceite o

diretório padrão:

C:\Inetpub\wwwroot

4. Clique em Concluir para completar o processo de instalação.

Após a instalação, faça um teste com o servidor web. Veja Teste do servidor web .

Tópico relacionado

Fundamentos básicos do servidor web

Como instalar o Internet Information Server

Usuários do Windows NT Server, Windows 2000 e Windows XP Professional devem instalar o IIS. Se você for usuário do Windows 98 ou NT, instale o PWS. Para obter mais informações, veja Como instalar o Personal Web Server.

Se você for usuário do Windows NT Server, o IIS deve estar instalado e funcionando em seu sistema. Do contrário, instale -o ou peça ao administrador de sistemas para fazê-lo.

Se você for usuário do Windows 2000 ou Windows XP Professional, certifique-se de que o IIS esteja instalado e funcionando em seu sistema. Para isso, verifique se há uma pasta C:\Inetpub. Se não existir, o IIS provavelmente não foi instalado em seu sistema.

Para instalar o IIS no Windows 2000 e XP Professional:

1. No Windows 2000, selecione Iniciar > Configurações > Painel de controle > Adicionar/Remover programas. No Windows XP, selecione Iniciar > Painel de controle > Adicionar/Remover programas.

2. Escolha Adicionar/remover componentes do Windows. 3. Selecione a caixa IIS e siga as instruções de instalação.

Após a instalação, faça um teste com o servidor web. Veja Teste do servidor web .

Tópico relacionado

 

 

Página 75 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 78: 1 Introducao

Fundamentos básicos do servidor web

Teste do servidor web

Para testar o servidor web, crie uma página HTML simples com extensão de arquivo.htm ou .html e salve-a na pasta Inetpub\wwwroot no computador. A página HTML pode consistir de uma única linha, como:

<p>My web server is working.</p>

Em seguida, abra a página de teste (mytest.htm) e a página de teste no navegador com solicitação de HTTP. Se o PWS ou IIS estiver instalado e funcionando em seu computador local, digite a seguinte URL no navegador:

http://localhost/teste.htm

Se o PWS ou IIS foram instalados em um computador em rede, use o nome do computador em rede como o nome de domínio. Por exemplo: se o nome do computador com PWS ou IIS for kojak-pc, digite a seguinte URL no navegador:

http://kojak-pc/teste.htm

Nota: Para obter mais informações sobre nomes de computadores, veja Fundamentos básicos do servidor web.

Se o navegador exibir a página, o servidor web estará funcionando corretamente.

Se o navegador não exibir a página, verifique se servidor está funcionando. Clique duas vezes no ícone do servidor web na área de trabalho do sistema (o ícone se parece com uma mão segurando uma página). A caixa de diálogo Personal Web Manager é exibida. Se o painel Publicar informar que a publicação na web está inativa, clique no botão Iniciar.

Se a página não abrir, verifique se a página de teste está localizada na pasta Inetpub\wwwroot e se a extensão do arquivo é .htm ou .html.

Fundamentos básicos do servidor web

Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers). O servidor web é chamado às vezes de servidor HTTP.

Vamos supor que você queira utilizar usar o PWS para desenvolver aplicativos para a web. Se o servidor for inicializado, um ícone aparecerá na barra de tarefas no canto inferior direito da área de trabalho indicando que o PWS está ativo (o ícone representa uma mão segurando uma página na web). Clique duas vezes neste ícone para ativar o Personal Web Manager, que pode

 

 

 

 

Página 76 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 79: 1 Introducao

ser utilizado para gerenciar suas páginas na web. O exemplo abaixo mostra o funcionamento do Personal Web Manager:

O nome padrão do servidor web é o nome de seu computador (cnadeau_pc1, neste exemplo). É possível modificar o nome de servidor alterando o nome de seu computador. Se o computador não tiver nenhum nome, o servidor utilizará a palavra localhost.

O nome do servidor representa (ou é um nome alternativo) da pasta raiz do servidor, provavelmente C:\Inetput\wwwroot. É possível abrir qualquer página da web armazenada na pasta raiz digitando o endereço URL abaixo em um navegador:

http://nomedoservidor/nomedearquivo

Por exemplo: se o nome do servidor for mar_negro e uma página da web chamada sol.htm estiver armazenada em C:\Inetpub\wwwroot\, é possível abrir a página ao digitar o endereço URL a seguir em um navegador no computador local:

http://mar_negro/sol.htm

Também é possível abrir qualquer página da web armazenada em qualquer subpasta da pasta raiz especificando o endereço URL da pasta. Por exemplo: suponha que o arquivo sol.htm esteja armazenado em uma subpasta gamelan, como no exemplo abaixo:

C:\Inetpub\wwwroot\gamelan\sol.htm

É possível abrir esta página digitando a URL a seguir em um navegador no seu computador:

http://mar_negro/gamelan/sol.htm

Quando o servidor web estiver funcionando no computador, substitua o nome de servidor por localhost. Por exemplo: as seguintes URLs abrem a mesma página em um navegador:

http://mar_negro/gamelan/sol.htm

http://localhost/gamelan/sol.htm

Nota: Outra expressão que pode ser utilizada em vez do nome de servidor ou localhost é 127.0.0.1 (por exemplo: http://127.0.0.1/gamelan/sol.htm).

Página 77 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 80: 1 Introducao

Tópicos relacionados

Como instalar o Personal Web Server

Como instalar o Internet Information Server

Teste do servidor web

Configuração de um exemplo de site ColdFusion

O Macromedia Dreamweaver MX vem com exemplos de páginas ColdFusion para que você possa criar um pequeno aplicativo para a Web neste formato. Este capítulo descreve como configurar o aplicativo de exemplo se você estiver utilizar o ColdFusion com Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Para obter mais informações sobre servidores web, consulte Como instalar um servidor Web no Windows. Se você estiver utilizando o ColdFusion MX com um servidor web diferente, consulte Configuração de um aplicativo para a Web.

A configuração de um aplicativo para a Web é um processo de tr ês etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a seu banco de dados. Este guia de instalação segue o processo de três etapas.

Este capítulo contém as seguintes seções:

l Listas de verificação de configura ção para desenvolvedores ColdFusion l Como configurar o sistema l Defina um site Dreamweaver l Conectar-se a um banco de dados de exemplo

Listas de verificação de configuração para desenvolvedores ColdFusion

Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo.

Configure o sistema:

1. Certifique-se de ter um servidor web. 2. Instale o servidor de aplicativos ColdFusion. 3. Crie uma pasta raiz.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido.

 

 

 

 

Página 78 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 81: 1 Introducao

2. Defina a pasta como pasta local do Dreamweaver. 3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver. 4. Especifique uma pasta para processar as páginas dinâmicas. 5. Efetue o upload dos arquivos de exemplo ao servidor web remoto.

Conecte-se ao banco de dados:

1. Se você tiver uma configuração do servidor remoto, copie o exemplo de banco de dados ao computador remoto.

2. Crie uma fonte de dados do ColdFusion no ColdFusion Administrator. 3. Visualize a conexão no Dreamweaver.

Como configurar o sistema

Esta seção fornece instruções para duas configurações de sistema comuns: uma utilizando Microsoft IIS ou PWS instalado no disco rígido e outra utilizando IIS ou PWS instalado em um computador Windows remoto. Se não desejar utilizar essas configurações, consulte Configuração de um aplicativo para a Web.

A ilustração abaixo exibe as duas configurações descritas nesta seção:

Para configurar seu sistema:

1. Verifique se há um servidor web (consulte Verificar um servidor web).

 

 

Página 79 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 82: 1 Introducao

2. Instale o servidor de aplicativos ColdFusion (consulte Instalação do ColdFusion MX). 3. Crie uma pasta raiz (consulte Crie uma pasta raiz).

Nota: A instala ção do servidor web e do servidor de aplicativos é uma tarefa única.

Verificar um servidor web

Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor web ativo. Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers).

Verifique se o Microsoft IIS ou PWS est ão instalados e funcionando em seu disco rígido ou em um computador Windows remoto (usuários do Macintosh devem instalar o Microsoft IIS ou PWS em um computador Windows remoto). Um modo r ápido de saber se o PWS ou IIS está instalado no sistema é verificar a estrutura de pastas. Há uma pasta c:\Inetpub ou d:\Inetpub? O PWS e o IIS geram esta pasta durante a instalação.

Se o PWS ou o IIS não estiver instalado no sistema, instale-o agora. Para obter instru ções, consulte Como instalar um servidor Web no Windows.

Após instalar o servidor web, instale o servidor de aplicativos. Veja Instalação do ColdFusion MX.

Instalação do ColdFusion MX

Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador.

Certifique-se de que o servidor de aplicativos ColdFusion MX esteja instalado e funcionando no sistema com PWS ou IIS (o PWS ou IIS podem estar localizados no disco rígido ou no computador remoto com Windows).

É possível efetuar o download do ColdFusion MX e instalar uma edi ção para desenvolvedores totalmente funcional no site da Macromedia na Web. Uma cópia do ColdFusion MX Server Developer Edition também está disponível no CD do Dreamweaver (somente na versão para Windows).

Para instalar o ColdFusion MX:

1. Feche todos os aplicativos abertos. 2. Se aplicável, conecte-se ao sistema Windows através da conta Administrator.

 

 

 

 

Página 80 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 83: 1 Introducao

3. Clique duas vezes no arquivo de instala ção do ColdFusion MX. 4. Siga as instruções de instalação.

Para obter mais informações, consulte a documentação do ColdFusion no Dreamweaver (Ajuda > Como utilizar o ColdFusion).

Após instalar e iniciar o ColdFusion, crie uma pasta raiz o aplicativo da Web. Veja Crie uma pasta raiz.

Crie uma pasta raiz

Após instalar o software do servidor, crie uma pasta raiz para o aplicativo no sistema com Microsoft PWS ou IIS ativo e verifique se a pasta tem as permissões necessárias.

Para criar uma pasta raiz para o aplicativo da Web:

1. Crie uma pasta chamada aplicativo_exemplo no sistema com PWS ou IIS ativo.

Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor web PWS ou IIS está configurado na pasta Inetpub\wwwroot. O servidor web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador.

2. Certifique-se de que as permissões de leitura e script estejam ativas na pasta.

Se você estiver utilizando o PWS, inicie o Personal Web Manager clicando duas vezes no ícone do servidor web na barra de ferramentas do sistema (o ícone representa uma mão segurando uma página na web). No Personal Web Manager, clique no ícone Avançado. A caixa de diálogo Opções avançadas é exibida. Selecione o diretório Início e clique em Editar as propriedades. A caixa de diálogo Editar o diretório é exibida. Certifique-se de que as opções Leitura e Scripts estejam selecionadas. Por razões de segurança, não selecione a opção Executar.

Se você estiver utilizando o IIS, inicie a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Sites da Web > Site da Web padrão, clique com o botão direito do mouse na pasta Site_exemplo e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção “Scripts e executáveis”.

O servidor web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web.

Após configurar seu sistema, você deve definir um site Dreamweaver. Veja Defina um site Dreamweaver.

 

 

 

 

Página 81 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 84: 1 Introducao

Defina um site Dreamweaver

Após configurar o sistema, copie os arquivos de exemplo a uma pasta local e defina um site Dreamweaver para gerenciar os arquivos.

Nota: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do Dreamweaver como um projeto do HomeSite ou Studio.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido (consulte Copie os arquivos de exemplo).

2. Estabeleça a pasta como pasta local do Dreamweaver (consulte Como definir uma pasta local).

3. Defina a pasta raiz no servidor web como pasta remota do Dreamweaver (consulte Como definir uma pasta remota).

4. Especifique uma pasta para processar as páginas dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

5. Efetue o upload dos arquivos de exemplo ao servidor web (consulte Efetuar o upload dos arquivos de exemplo).

Copie os arquivos de exemplo

Caso ainda não tenha feito, copie os arquivos de exemplo da pasta de aplicativo do Dreamweaver a uma pasta em seu disco rígido.

Para copiar os arquivos de exemplo:

1. Crie uma pasta nova chamada Sites em seu disco rígido.

Por exemplo: crie C:\Sites no diretório do Windows.

2. Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido.

O caminho para a pasta é o seguinte:

\Macromedia\Dreamweaver MX\Samples\GettingStarted\

3. Copie o conteúdo da pasta GettingStarted à pasta Sites.

Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no Dreamweaver. Veja Como definir uma pasta local.

 

 

 

 

Página 82 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 85: 1 Introducao

Como definir uma pasta local

Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de exemplo do ColdFusion como pasta local no Dreamweaver.

Para definir a pasta local do Dreamweaver:

1. No Dreamweaver, selecione Site > Novo site.

A caixa de diálogo Definição do site é exibida.

2. Ao aparecer o assistente, clique em Avançado. 3. Na caixa de texto Nome do site, digite GlobalCar - ColdFusion.

O nome identifica o site no Dreamweaver.

4. Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de exemplo do ColdFusion.

Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo:

C:\Sites\GettingStarted\Develop\coldfusion

Mantenha aberta a caixa de diálogo Defini ção do site. Em seguida, é preciso definir a pasta do servidor web como pasta remota do Dreamweaver. Veja Como definir uma pasta remota.

Como definir uma pasta remota

Após definir uma pasta local, defina uma pasta de servidor web como pasta Dreamweaver remota.

Para definir a pasta remota do Dreamweaver:

1. Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria.

A tela Informações remotas é exibida.

2. Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP.

3. Digite o caminho ou configurações de FTP para a pasta do servidor web criado na seção Crie uma pasta raiz.

A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta “remota” válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado:

 

 

Página 83 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 86: 1 Introducao

Pasta remota: c:\Inetpub\wwwroot\MySampleApp

Para obter mais informações sobre FTP, consulte Como configurar as opções de informações remotas para o acesso de FTP.

A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma pasta para processar páginas dinâmicas. Veja Especifique o local onde as p áginas dinâmicas podem ser processadas.

Especifique o local onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especifique uma pasta para processamento das páginas dinâmicas conforme descrito nesta seção. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a bancos de dados durante o processo.

Para especificar a pasta para processamento das páginas dinâmicas:

1. Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria.

A tela Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que seja capaz de processar páginas em ColdFusion, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (consulte Como definir uma pasta remota), pois indicam um servidor capaz de processar páginas em ColdFusion.

2. Selecione ColdFusion como tecnologia de servidor. 3. Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso

à pasta remota.

O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Não altere as configura ções.

4. Na caixa de texto Prefixo da URL, digite o endereço URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web.

Para exibir os live data nas páginas enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do site da Web e tenta solicitá-los através do prefixo da URL.

O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Defini ção do site. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for c:\Inetpub\wwwroot\MySampleApp, então o prefixo da URL deve o seguinte:

http://localhost/MySampleApp/

Dica: O prefixo da URL nunca deve especificar uma página individual no site.

 

 

Página 84 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 87: 1 Introducao

No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugest ão do Dreamweaver estiver incorreta. Para obter mais informações, veja O prefixo de URL.

5. Clique em OK e em Concluído.

Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web. Veja Efetuar o upload dos arquivos de exemplo .

Efetuar o upload dos arquivos de exemplo

Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web conforme descrito nesta seção. Você deve “carregar” os arquivos mesmo se o servidor web estiver ativo em seu computador local.

Se os arquivos não forem carregados, é possível que recursos Live Date e Visualizar no navegador não estejam funcionando corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor.

Para efetuar o upload dos arquivos de exemplo ao servidor web.

1. No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais.

A pasta raiz deve ser a primeira pasta da lista.

2. Clique na seta azul para cima na barra de ferramentas.

O Dreamweaver copiará todos os arquivos à pasta do servidor web definida em Como definir uma pasta remota.

O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de exemplo instalado no Dreamweaver. Veja Conectar-se a um banco de dados de exemplo.

Conectar-se a um banco de dados de exemplo

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo.

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores ColdFusion.

 

 

 

 

Página 85 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 88: 1 Introducao

Para criar uma conexão de banco de dados:

1. Se você tiver uma configuração do servidor remoto, copie o banco de dados de exemplo ao computador remoto (consulte Configuração do banco de dados (configura ção do servidor remoto)).

2. Crie uma fonte de dados do ColdFusion no ColdFusion Administrator (consulte Como criar uma fonte de dados ColdFusion).

3. Visualize a conexão no Dreamweaver (consulte Conexão ao banco de dados).

Configuração do banco de dados (configuração do servidor remoto)

Esta seção será aplicável somente se houver uma configuração de servidor remoto, ou seja, se o servidor web estiver ativo em um computador remoto. Se o servidor web estiver ativo no mesmo computador que o Dreamweaver, ignore e vá até Como criar uma fonte de dados ColdFusion.

Antes de tentar conectar-se ao banco de dados de exemplo, copie o banco de dados no disco rígido do computador remoto. Os arquivos de banco de dados, global.mdb, estão localizados na pasta a seguir no disco rígido local:

\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

É possível colocar o arquivo em qualquer pasta no computador remoto ou criar uma nova pasta nova para ele.

Após colocar o banco de dados em seu lugar, crie uma fonte de dados do ColdFusion no ColdFusion Administrator. Veja Como criar uma fonte de dados ColdFusion.

Como criar uma fonte de dados ColdFusion

Crie uma fonte de dados ColdFusion chamada connGlobal no ColdFusion Administrator indicando o arquivo do banco de dados de exemplo.

Para criar uma fonte de dados ColdFusion:

1. No Dreamweaver, abra uma página ColdFusion. 2. No painel Bancos de dados (Janela > Bancos de dados) clique no ícone Modificar fontes de

dados (segundo item à direita da barra de ferramentas do painel).

O ColdFusion Administrator abre-se no navegador.

3. Acesse o ColdFusion Administrator e crie uma fonte de dados chamada connGlobal indicando o arquivo do banco de dados global.mdb.

 

 

 

 

Página 86 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 89: 1 Introducao

Se o ColdFusion estiver ativo em seu computador local, crie uma fonte de dados indicando o arquivo do banco de dados na pasta a seguir:

c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

Se o ColdFusion estiver ativo em seu computador remoto, crie uma fonte de dados indicando o arquivo do banco de dados colocado no computador remoto, de acordo com as instruções em Configuração do banco de dados (configura ção do servidor remoto).

Para obter mais informações, consulte a documentação do ColdFusion no Dreamweaver (Ajuda > Como utilizar o ColdFusion).

Após criar uma fonte de dados no ColdFusion, ela pode ser utilizada para conexão ao banco de dados do Dreamweaver. Veja Conexão ao banco de dados.

Conexão ao banco de dados

Após criar uma fonte de dados no ColdFusion (veja Como criar uma fonte de dados ColdFusion), é possível utilizá-la para conexão ao banco de dados do Dreamweaver.

Abra qualquer página do ColdFusion no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados). As fontes de dados do ColdFusion são exibidas no painel.

Se a fonte de dados criada não aparecer no painel, proceda do seguinte modo:

l Verifique-novamente os parâmetros de conexão no ColdFusion Administrator. l Verifique as configurações da pasta que o Dreamweaver utiliza para processar páginas

dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

l Consulte Como solucionar problemas de conexão no banco de dados.

Se a fonte de dados connGlobal aparecer no painel, o exemplo do aplicativo ColdFusion será configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Configuração de um exemplo de site ASP.NET

O Macromedia Dreamweaver MX vem com modelos de páginas ASP.NET para que você possa criar um pequeno aplicativo para a Web neste formato. Este capítulo descreve como configurar um aplicativo de exemplo.

Este capítulo destina-se a desenvolvedores ASP.NET. Para mais detalhes sobre ASP, consulte Configuração de um exemplo de site ASP.

 

 

 

 

Página 87 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 90: 1 Introducao

A configuração de um aplicativo para a Web é um processo de tr ês etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a seu banco de dados. Este guia de instalação segue o processo de três etapas.

Este capítulo contém as seguintes seções:

l Como configurar listas de verificação para desenvolvedores ASP.NET l Como configurar o sistema l Defina um site Dreamweaver l Conectar-se ao banco de dados (configuração local) l Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Como configurar listas de verificação para desenvolvedores ASP.NET

Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo.

Configure o sistema:

1. Certifique-se de ter um servidor web. 2. Instale o Microsoft .NET Framework. 3. Crie uma pasta raiz.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido. 2. Defina a pasta como pasta local do Dreamweaver. 3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver. 4. Especifique uma pasta para processar as páginas dinâmicas. 5. Efetue o upload dos arquivos de exemplo ao servidor web remoto.

Conecte-se ao banco de dados (configuração local):

Crie uma conexão no Dreamweaver.

Conecte-se ao banco de dados (configuração do servidor remoto):

Copie o banco de dados ao computador remoto e crie a conexão no Dreamweaver.

Como configurar o sistema

Esta seção fornece instruções para duas configurações de sistema comuns: uma com Windows 2000 ou Windows XOP Professional instalado no disco rígido e outra com Windows 2000 ou

 

 

 

 

Página 88 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 91: 1 Introducao

Windows XP Professional instalado no computador remoto. Se não desejar utilizar essas configurações, consulte Configuração de um aplicativo para a Web.

A ilustração abaixo exibe as duas configurações descritas nesta seção:

Para configurar seu sistema:

1. Verifique se há um servidor web (consulte Verificar um servidor web). 2. Instale o Microsoft .NET Framework (consulte Instalação do .NET Framework). 3. Crie uma pasta raiz (consulte Crie uma pasta raiz).

Nota: A instala ção do servidor web e do .NET Framework é executada simultaneamente.

Verificar um servidor web

Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor web ativo. Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers).

As páginas ASP.NET funcionam apenas com um único servidor da Web: o Microsoft IIS 5 ou superior. Não há suporte para o servidor PWS. Além disso, uma vez que o IIS 5 é um serviço dos sistemas operacionais Windows 2000 e Windows XP Professional, somente é possível utilizar essas duas versões do Windows para executar aplicativos ASP.NET. Windows 98, ME ou NT não são suportados.

 

 

Página 89 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 92: 1 Introducao

Certifique-se de que o IIS 5 esteja instalado e funcionando em um computador com sistema operacional Windows 2000 ou Windows XP Professional. O IIS 5 pode ser instalado em seu disco rígido se o Windows 2000 ou Windows XP Professional estiver instalado ou em um computador remoto. Se você for usuário do Windows 98, Windows ME, Windows NT, Windows XP Home Edition ou usuário Macintosh, o IIS 5 deve ser executado em computador remoto com Windows 2000 ou Windows XP Professional.

Um modo rápido de saber se o IIS está instalado no sistema é verificar a estrutura de pastas. Há uma pasta c:\Inetpub ou d:\Inetpub? O IIS cria esta pasta durante instalação.

Se o IIS não estiver instalado, instale -o agora. Para obter instruções, consulte Como instalar o Internet Information Server.

Após instalar o servidor web, instale o .NET Framework. Veja Instalação do .NET Framework.

Instalação do .NET Framework

Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador.

No ASP.NET, o servidor de aplicativos é chamado de .NET Framework. Certifique-se de que o .NET Framework esteja instalado e funcionando em sistema Windows 2000 ou Windows XP Professional com IIS 5 ou superior (o IIS pode estar localizado no disco rígido ou no computador remoto).

Para instalar o .NET Framework, fa ça o download do Framework do site da Microsoft na Web e siga as instruções de instalação do site. Se você for usuário do Windows 98, Windows ME, Windows NT, Windows XP Home Edition ou usuário Macintosh, o .NET Framework deve ser instalado em computador remoto Windows 2000 ou Windows XP Professional com IIS 5.

Depois de instalar o .NET Framework, criar uma pasta raiz para o aplicativo para a Web. Veja Crie uma pasta raiz.

Crie uma pasta raiz

Após instalar o software do servidor, crie uma pasta raiz para o aplicativo da Web no sistema com Microsoft IIS e verifique se a pasta tem as permissões necessárias.

Para criar uma pasta raiz para o aplicativo da Web:

1. Crie uma pasta chamada Aplicativo_exemplo no sistema com IIS ativo.

 

 

 

 

Página 90 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 93: 1 Introducao

Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor web IIS está configurado na pasta Inetpub\wwwroot. O servidor web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador.

2. Certifique-se de que a permissão Scripts esteja ativa para a pasta.

Se você estiver utilizando a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Sites da Web > Site da Web padrão, clique com o botão direito do mouse na pasta Site_exemplo e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção “Scripts e executáveis”.

O servidor web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web.

Após configurar seu sistema, você deve definir um site Dreamweaver. Veja Defina um site Dreamweaver.

Defina um site Dreamweaver

Após configurar o sistema, copie os arquivos de exemplo a uma pasta local e defina um site Dreamweaver para gerenciar os arquivos.

Nota: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do Dreamweaver como um projeto do HomeSite ou Studio.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido (consulte Copie os arquivos de exemplo).

2. Estabeleça a pasta como pasta local do Dreamweaver (consulte Como definir uma pasta local).

3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver (consulte Como definir uma pasta remota).

4. Especifique uma pasta para processar as páginas dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

5. Efetue o upload dos arquivos de exemplo ao servidor web (consulte Efetuar o upload dos arquivos de exemplo).

Copie os arquivos de exemplo

Caso ainda não tenha feito, copie os arquivos de exemplo da pasta de aplicativo do

 

 

 

 

Página 91 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 94: 1 Introducao

Dreamweaver a uma pasta em seu disco rígido.

Para copiar os arquivos de exemplo:

1. Crie uma pasta nova chamada Sites em seu disco rígido.

Por exemplo: crie C:\Sites no diretório do Windows.

2. Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido.

O caminho para a pasta é o seguinte:

\Macromedia\Dreamweaver MX\Samples\GettingStarted\

3. Copie o conteúdo da pasta GettingStarted à pasta Sites.

Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no Dreamweaver. Veja Como definir uma pasta local.

Como definir uma pasta local

Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de exemplo do ASP.NET como pasta local no Dreamweaver.

Para definir a pasta local do Dreamweaver:

1. No Dreamweaver, selecione Site > Novo site.

A caixa de diálogo Definição do site é exibida.

2. Ao aparecer o assistente, clique em Avançado. 3. Na caixa de texto Nome do site, digite GlobalCar – ASP.NET.

O nome identifica o site no Dreamweaver.

4. Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de exemplo do ASP.NET.

Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo:

C:\Sites\GettingStarted\Develop\aspnet

Mantenha aberta a caixa de diálogo Defini ção do site. Em seguida, é preciso definir a pasta do servidor web como pasta remota do Dreamweaver. Veja Como definir uma pasta remota.

 

 

 

Página 92 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 95: 1 Introducao

Como definir uma pasta remota

Após definir uma pasta local, defina uma pasta de servidor web como pasta Dreamweaver remota conforme descrito nesta se ção.

Para definir a pasta remota do Dreamweaver:

1. Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria.

A tela Informações remotas é exibida.

2. Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP.

3. Digite o caminho ou configurações de FTP para a pasta do servidor web criado na seção Crie uma pasta raiz.

A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta “remota” válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado:

Pasta remota: c:\Inetpub\wwwroot\MySampleApp

Para obter mais informações sobre FTP, consulte Como configurar as opções de informações remotas para o acesso de FTP.

A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma pasta para processar páginas dinâmicas. Veja Especifique o local onde as p áginas dinâmicas podem ser processadas.

Especifique o local onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especifique uma pasta para processamento das páginas dinâmicas conforme descrito nesta seção. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a bancos de dados durante o processo.

Para especificar a pasta para processamento das páginas dinâmicas:

1. Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria.

A tela Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que seja capaz de processar páginas em ASP.NET, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (consulte Como definir uma pasta remota), pois elas indicam um servidor capaz de processar páginas em ASP.NET.

 

 

 

Página 93 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 96: 1 Introducao

2. Selecione ASP.NET VB ou ASP.NET C# como tecnologia de servidor. 3. Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso

à pasta remota.

O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Não altere as configura ções.

4. Na caixa de texto Prefixo da URL, digite a URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web.

Para gerar e exibir o conteúdo dinâmico enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do site da Web e tenta solicitá-los através do prefixo da URL.

O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Defini ção do site. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for c:\Inetpub\wwwroot\MySampleApp, então o prefixo da URL deve o seguinte:

http://localhost/MySampleApp/

Dica: O prefixo da URL nunca deve especificar uma página individual no site.

No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugest ão do Dreamweaver estiver incorreta. Para obter mais informações, veja O prefixo de URL.

5. Clique em OK e em Concluído.

Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web. Veja Efetuar o upload dos arquivos de exemplo .

Efetuar o upload dos arquivos de exemplo

Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web conforme descrito nesta seção. Você deve “carregar” os arquivos mesmo se o servidor web estiver ativo em seu computador local.

Se os arquivos não forem carregados, é possível que recursos Live Date e Visualizar no navegador não estejam funcionando corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor.

Para efetuar o upload dos arquivos de exemplo ao servidor web.

1. No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais.

A pasta raiz deve ser a primeira pasta da lista.

 

 

Página 94 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 97: 1 Introducao

2. Clique na seta azul para cima na barra de ferramentas.

O Dreamweaver copiará todos os arquivos à pasta do servidor web definida em Como definir uma pasta remota.

O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de exemplo instalado no Dreamweaver. Se o servidor web estiver ativo no computador local, consulte Conectar-se ao banco de dados (configuração local). Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Conectar-se ao banco de dados (configuração local)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração local, ou seja, se o servidor web estiver ativo no mesmo computador que o Dreamweaver. Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores ASP.NET.

Para criar uma conexão com uma configuração local:

1. Abra qualquer página do ASP.NET no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão de adição (+) do painel e escolher Conexão com banco de dados OLE no menu-pop up.

É exibida a caixa de diálogo Conexão com banco de dados OLE.

3. Digite connGlobal como nome da conexão. 4. Clique no botão Modelos.

A caixa de diálogo Modelo da seqüência de caracteres de conexão será exibida.

5. Na lista de modelos, selecione Microsoft Access 2000 (Microsoft Jet 4.0 Provider) e clique em OK.

O Dreamweaver adicionará um modelo de seqüência de caracteres de conexão na caixa de diálogo Conexão OLE DB. O modelo contém alocadores de espaço para informações perdidas na seqüência de caracteres conexão.

6. No valor de Fonte de dados, digite o caminho completo para o arquivo do banco de dados de exemplo em seu disco rígido.

Por exemplo: durante a instalação, o Dreamweaver coloca o arquivo de banco de dados de exemplo, global.mdb, na seguinte pasta em seu disco rígido local:

c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

 

 

Página 95 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 98: 1 Introducao

Nota: O caminho pode variar, dependendo do local onde o Dreamweaver foi instalado.

Digite este caminho como o valor de Fonte de dados:

Data Source=c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb;

7. Excluir as linhas ID do usuário e Senha.

O banco de dados do Access não requer um ID do usuário ou senha.

8. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente o caminho ao banco de dados. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 9. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo ASP.NET de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração remota, ou seja, se o servidor web estiver ativo no computador remoto. Se o servidor web estiver ativo no mesmo computador que o Dreamweaver, consulte Conectar-se ao banco de dados (configuração local).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores ASP.NET.

Para criar uma conexão com uma configuração de servidor remota:

1. Copie o arquivo do banco de dados de exemplo ao computador remoto.

Os arquivos de banco de dados, global.mdb, estão localizados na pasta a seguir no disco rígido local:

\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

É possível colocar o arquivo em qualquer pasta no computador remoto ou criar uma nova pasta nova para ele. Em ambos os casos, anote o caminho completo ao arquivo de banco

 

 

Página 96 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 99: 1 Introducao

de dados em um pedaço de papel.

2. Abra qualquer página do ASP.NET no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

3. Clique no botão de adição (+) do painel e escolher Conexão com banco de dados OLE no menu-pop up.

É exibida a caixa de diálogo Conexão com banco de dados OLE.

4. Digite connGlobal como nome da conexão. 5. Clique no botão Modelos.

A caixa de diálogo Modelo da seqüência de caracteres de conexão será exibida.

6. Na lista de modelos, selecione Microsoft Access 2000 (Microsoft Jet 4.0 Provider) e clique em OK.

O Dreamweaver adicionará um modelo de seqüência de caracteres de conexão na caixa de diálogo Conexão OLE DB. O modelo contém alocadores de espaço para informações perdidas na seqüência de caracteres conexão.

7. No valor de Fonte de dados, digite o caminho completo para o arquivo do banco de dados de exemplo no computador remoto.

Digite o caminho anotado na etapa 1. Por exemplo: o caminho do computador em rede deve ser o seguinte :

Fonte de dados=c:\users\Denman\Sites\data\global.mdb;

8. Excluir as linhas ID do usuário e Senha. 9. Clique em Testar.

O Dreamweaver tentará conectar-se ao banco de dados do computador de rede. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente o caminho ao banco de dados. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 10. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo ASP.NET de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Configuração de um exemplo de site ASP

 

 

Página 97 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 100: 1 Introducao

O Macromedia Dreamweaver MX vem com modelos de páginas Active Server Pages (ASP) da Microsoft para que você possa criar um pequeno aplicativo para a Web neste formato. Este capítulo descreve como configurar o aplicativo de exemplo se você estiver o Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Para obter mais informações sobre servidores web, consulte Como instalar um servidor Web no Windows. Se você estiver utilizando um servidor web diferente, consulte Configuração de um aplicativo para a Web.

Este capítulo destina-se somente a desenvolvedores ASP. Para saber mais sobre ASP.NET, consulte Configuração de um exemplo de site ASP.NET.

A configuração de um aplicativo para a Web é um processo de tr ês etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a seu banco de dados. Este guia de instalação segue o processo de três etapas.

Este capítulo contém as seguintes seções:

l Como configurar listas de verificação para desenvolvedores ASP l Como configurar o sistema l Defina um site Dreamweaver l Conectar-se ao banco de dados (configuração local) l Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Como configurar listas de verificação para desenvolvedores ASP

Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo.

Configure o sistema:

1. Certifique-se de ter um servidor web. 2. Instale o servidor de aplicativos. 3. Teste a instala ção. 4. Crie uma pasta raiz.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido. 2. Defina a pasta como pasta local do Dreamweaver. 3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver. 4. Especifique uma pasta para processar as páginas dinâmicas. 5. Efetue o upload dos arquivos de exemplo ao servidor web remoto.

Conecte-se ao banco de dados (configuração local):

1. Crie uma conexão no Dreamweaver.

Conecte-se ao banco de dados (configuração do servidor remoto):

1. Configure o banco de dados de exemplo no computador com o servidor web ativo.

 

 

Página 98 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 101: 1 Introducao

2. Crie uma conexão no Dreamweaver.

Como configurar o sistema

Esta seção fornece instruções para duas configurações de sistema comuns: uma utilizando Microsoft IIS ou PWS instalado no disco rígido e outra utilizando IIS ou PWS instalado em um computador Windows remoto. Se não desejar utilizar essas configurações, consulte Configuração de um aplicativo para a Web.

A ilustração abaixo exibe as duas configurações descritas nesta seção:

Para configurar seu sistema:

1. Verifique se há um servidor web (consulte Verificar um servidor web). 2. Instale o servidor de aplicativos, se necessário (consulte Instalação de um servidor de

aplicativos ASP). 3. Teste a instala ção (consulte Testar a instalação). 4. Crie uma pasta raiz (consulte Crie uma pasta raiz).

Nota: A instala ção do servidor web e do servidor de aplicativos é uma tarefa única.

Verificar um servidor web

 

 

 

 

Página 99 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 102: 1 Introducao

Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor web ativo. Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers).

Verifique se o Microsoft IIS ou PWS est ão instalados e funcionando em seu disco rígido ou em um computador Windows remoto (usuários do Macintosh devem instalar o Microsoft IIS ou PWS em um computador Windows remoto). Um modo r ápido de saber se o PWS ou IIS está instalado no computador é verificar a estrutura de pastas. Há uma pasta c:\Inetpub ou d:\Inetpub? O PWS e o IIS geram esta pasta durante a instalação.

Se o PWS ou o IIS não estiver instalado, instale -o agora. Para obter instruções, consulte Como instalar um servidor Web no Windows.

Após instalar o servidor web, normalmente é necessário instalar um servidor de aplicativos. Veja Instalação de um servidor de aplicativos ASP.

Instalação de um servidor de aplicativos ASP

Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador.

Se o PWS ou IIS forem instalados em um computador com sistemaWindows, não será necessário um servidor de aplicativos ASP separado. O PWS e o IIS também funcionam como servidores de aplicativos ASP. Para obter mais informações sobre instalação e teste do PWS ou IIS, consulte Como instalar um servidor Web no Windows.

Teste o servidor para verificar se está funcionando corretamente. Veja Testar a instalação.

Testar a instalação

É possível testar o sistema ASP do PWS ou IIS executando uma página de teste, conforme descrito nesta seção.

Para testar o sistema ASP no PWS ou IIS:

1. No Dreamweaver ou qualquer editor de texto, crie um texto simples denominado teste.asp.

2. No arquivo, digite o código:

<p>This page was created at <b> <%= Time %> </b> on the computer running ASP.</p>

 

 

 

 

Página 100 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 103: 1 Introducao

Este código exibe a hora em que a página foi processada no servidor.

3. Copie o arquivo à pasta Inetpub\wwwroot no computador Windows com PWS ou IIS ativo. 4. No navegador, digite a URL da página de teste e pressione Enter.

Se o PWS ou IIS estiver funcionando em seu computador local, é possível digitar a URL a seguir:

http://localhost/teste.asp

A página de teste deve abrir e exibir a hora do dia, como no exemplo:

A hora especificada é conhecida como conteúdo dinâmico porque muda sempre que a página for solicitada. Clique em Atualizar no navegador para gerar uma nova página com uma hora diferente.

Nota: Observe o c ódigo fonte (Exibir > Código fonte no Internet Explorer) para confirmar se a página não utiliza nenhum JavaScript no cliente para gerar este efeito.

Se a página não funcionar conforme esperado, verifique os possíveis erros a seguir:

l O arquivo não possui extensão .asp. l O caminho do arquivo da página (c:\Inetput\wwwroot\teste.asp), e não a URL (por

exemplo: http://localhost/teste.asp), foi inserido na caixa de texto Endereço do navegador.

Se você digitar o caminho do arquivo no navegador (do mesmo modo que as páginas HTML normais), o servidor web e o servidor de aplicativo serão ignorados. Como resultado, sua página não será processada pelo servidor.

l A URL contém um erro de digitação. Verifique se há erros e certifique-se de que o nome de arquivo não venha acompanhado de uma barra invertida, como http://localhost/teste.asp/.

Página 101 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 104: 1 Introducao

l O código da página contém um erro de digitação.

Após instalar e testar o software servidor, crie uma pasta raiz para o aplicativo da Web. Veja Crie uma pasta raiz.

Crie uma pasta raiz

Após instalar o software do servidor, crie uma pasta raiz para o aplicativo no sistema com Microsoft PWS ou IIS ativo e verifique se a pasta tem as permissões necessárias.

Para criar uma pasta raiz para o aplicativo da Web:

1. Crie uma pasta chamada aplicativo_exemplo no sistema com PWS ou IIS ativo.

Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor web PWS ou IIS está configurado na pasta Inetpub\wwwroot. O servidor web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador.

2. Certifique-se de que as permissões de leitura e script estejam ativas na pasta.

Se você estiver utilizando o PWS, inicie o Personal Web Manager clicando duas vezes no ícone do servidor web na barra de ferramentas do sistema (o ícone representa uma mão segurando uma página na web). No Personal Web Manager, clique no ícone Avançado. A caixa de diálogo Opções avançadas é exibida. Selecione o diretório Início e clique em Editar as propriedades. A caixa de diálogo Editar o diretório é exibida. Certifique-se de que as opções Leitura e Scripts estejam selecionadas. Por razões de segurança, não selecione a opção Executar.

Se você estiver utilizando o IIS, inicie a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Sites da Web > Site da Web padrão, clique com o botão direito do mouse na pasta Site_exemplo e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção “Scripts e executáveis”.

O servidor web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web.

Após configurar seu sistema, você deve definir um site Dreamweaver. Veja Defina um site Dreamweaver.

Defina um site Dreamweaver

 

 

 

 

Página 102 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 105: 1 Introducao

Após configurar o sistema, copie os arquivos de exemplo a uma pasta local e defina um site Dreamweaver para gerenciar os arquivos.

Nota: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do Dreamweaver como um projeto do HomeSite ou Studio.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido (consulte Copie os arquivos de exemplo).

2. Estabeleça a pasta como pasta local do Dreamweaver (consulte Como definir uma pasta local).

3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver (consulte Como definir uma pasta remota).

4. Especifique uma pasta para processar as páginas dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

5. Efetue o upload dos arquivos de exemplo ao servidor web (consulte Efetuar o upload dos arquivos de exemplo).

Copie os arquivos de exemplo

Caso ainda não tenha feito, copie os arquivos de exemplo da pasta de aplicativo do Dreamweaver a uma pasta em seu disco rígido.

Para copiar os arquivos de exemplo:

1. Crie uma pasta nova chamada Sites em seu disco rígido.

Por exemplo: crie C:\Sites no diretório do Windows.

2. Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido.

O caminho para a pasta é o seguinte:

\Macromedia\Dreamweaver MX\Samples\GettingStarted\

3. Copie o conteúdo da pasta GettingStarted à pasta Sites.

Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no Dreamweaver. Veja Como definir uma pasta local.

Como definir uma pasta local

Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de exemplo

 

 

 

 

Página 103 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 106: 1 Introducao

ASP como pasta local no Dreamweaver.

Para definir a pasta local do Dreamweaver:

1. No Dreamweaver, selecione Site > Novo site.

A caixa de diálogo Definição do site é exibida.

2. Ao aparecer o assistente, clique em Avançado. 3. Na caixa de texto Nome do site, digite GlobalCar – ASP.

O nome identifica o site no Dreamweaver.

4. Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de exemplo do ASP.

Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo:

C:\Sites\GettingStarted\Develop\asp

Mantenha aberta a caixa de diálogo Defini ção do site. Em seguida, é preciso definir a pasta do servidor web como pasta remota do Dreamweaver. Veja Como definir uma pasta remota.

Como definir uma pasta remota

Após definir uma pasta local, defina uma pasta de servidor web como pasta Dreamweaver remota conforme descrito nesta se ção.

Para definir a pasta remota do Dreamweaver:

1. Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria.

A tela Informações remotas é exibida.

2. Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP.

3. Digite o caminho ou configurações de FTP para a pasta do servidor web criado na seção Crie uma pasta raiz.

A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta “remota” válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado:

Pasta remota: c:\Inetpub\wwwroot\MySampleApp

Para obter mais informações sobre FTP, consulte Como configurar as opções de informações remotas para o acesso de FTP.

A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma

 

 

Página 104 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 107: 1 Introducao

pasta para processar páginas dinâmicas.Consulte Especifique o local onde as páginas dinâmicas podem ser processadas.

Especifique o local onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especifique uma pasta para processamento das páginas dinâmicas conforme descrito nesta seção. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a bancos de dados durante o processo.

Para especificar a pasta para processamento das páginas dinâmicas:

1. Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria.

A tela Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que seja capaz de processar páginas em ASP, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (consulte Como definir uma pasta remota), pois elas indicam um servidor capaz de processar páginas em ASP.

2. Selecione ASP JavaScript ou ASPVBScript como tecnologia de servidor. 3. Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso

à pasta remota.

O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Não altere as configura ções.

4. Na caixa de texto Prefixo da URL, digite a URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web.

Para exibir os live data nas páginas enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do site da Web e tenta solicitá-los através do prefixo da URL.

O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Defini ção do site. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for c:\Inetpub\wwwroot\MySampleApp, então o prefixo da URL deve o seguinte:

http://localhost/MySampleApp/

Dica: O prefixo da URL nunca deve especificar uma página individual no site.

No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugest ão do Dreamweaver estiver incorreta. Para obter mais informações, veja O prefixo de URL.

5. Clique em OK e em Concluído.

 

 

Página 105 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 108: 1 Introducao

Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web. Veja Efetuar o upload dos arquivos de exemplo .

Efetuar o upload dos arquivos de exemplo

Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web conforme descrito nesta seção. Você deve “carregar” os arquivos mesmo se o servidor web estiver ativo em seu computador local.

Se os arquivos não forem carregados, é possível que recursos Live Date e Visualizar no navegador não estejam funcionando corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor.

Para efetuar o upload dos arquivos de exemplo ao servidor web.

1. No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais.

A pasta raiz deve ser a primeira pasta da lista.

2. Clique na seta azul para cima na barra de ferramentas.

O Dreamweaver copiará todos os arquivos à pasta do servidor web definida em Como definir uma pasta remota.

O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de exemplo instalado no Dreamweaver. Se o servidor web estiver ativo no computador local, consulte Conectar-se ao banco de dados (configuração local). Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Conectar-se ao banco de dados (configuração local)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração local, ou seja, se o servidor web estiver ativo no mesmo computador que o Dreamweaver. Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores ASP.

 

 

 

 

Página 106 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 109: 1 Introducao

Com uma configuração local, é possível utilizar o nome da fonte de dados (DSN) criada pelo Dreamweaver durante a instalação para conectar-se rapidamente ao banco de dados de exemplo. Para obter mais informações sobre DNS, veja Como compreender os DSNs.

Para criar uma conexão com uma configuração local:

1. Abra qualquer página ASP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão de adição (+) do painel e selecionar Nome da fonte de dados (DSN) no menu pop--up.

Aparecerá a caixa de diálogo Nome da fonte dos dados (DSN).

3. Digite connGlobal como nome da conexão. 4. Selecione a opção Utilizando a DSN local. 5. Selecione GlobalCar na lista de DSNs.

Durante a instalação, o Dreamweaver cria uma DSN chamada GlobalCar indicando o banco de dados Microsoft Access na pasta Samples\Database da pasta de aplicativos do Dreamweaver MX.

6. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente a DSN. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 7. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo ASP de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e tutorais na ajuda (Ajuda > Tutoriais).

Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração remota, ou seja, se o servidor web estiver ativo no computador remoto. Se o servidor web estiver ativo no mesmo computador que o Dreamweaver, consulte Conectar-se ao banco de dados (configuração local).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores ASP.

 

 

Página 107 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 110: 1 Introducao

Para criar uma conexão ao banco de dados com uma configuração de servidor remota:

1. Configure o banco de dados de exemplo no computador com o servidor web ativo (consulte Configurar o banco de dados no computador remoto)

2. Crie a conexão no Dreamweaver (consulte Como criar uma conexão de banco de dados).

Configurar o banco de dados no computador remoto

Antes de criar uma conexão ao banco de dados de exemplo, execute as tarefas a seguir no computador remoto com o servidor web ativo: copie o banco de dados de exemplo no disco rígido do computador e crie uma DSN no computador apontando ao banco de dados.

Para configurar o banco de dados de exemplo no computador remoto:

1. Copie o arquivo do banco de dados de exemplo ao computador remoto.

Os arquivos de banco de dados, global.mdb, estão localizados na pasta a seguir no disco rígido local:

\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

É possível colocar o arquivo em qualquer pasta no computador remoto ou criar uma nova pasta nova para ele.

2. Certifique-se de que o driver do Microsoft Access, versão 4.0 ou superior, esteja instalado no computador remoto.

Para saber se o driver já está instalado, veja Para exibir os drivers ODBC que estão instalados em um sistema Windows.

Se o driver ainda não foi instalado, efetue o download e instale os pacotes Microsoft Data Access Components (MDAC) versão 2.5 e 2.6 no computador remoto. É possível efetuar o download gratuito dos pacotes MDAC no site da Microsoft na Web. Estes pacotes contêm os mais recentes drivers da Microsoft, incluindo o Microsoft Access Driver.

Nota: Instalar o MDAC 2.5 antes de instalar o MDAC 2.6.

3. Configure um DSN chamado GlobalCar apontando ao banco de dados de exemplo no computador remoto.

Para obter instruções, veja Como configurar DSNs no Windows.

Após configurar o banco de dados, o driver do banco de dados e a DSN, crie uma conexão ao banco de dados no Dreamweaver. Veja Como criar uma conexão de banco de dados.

 

 

 

 

Página 108 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 111: 1 Introducao

Como criar uma conexão de banco de dados

Após configurar o banco de dados de exemplo no computador remoto (consulte Configurar o banco de dados no computador remoto), crie uma conexão ao banco de dados no Dreamweaver.

Para criar uma conexão ao banco de dados no Dreamweaver:

1. Abra qualquer página ASP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão de adição (+) do painel e selecionar Nome da fonte de dados (DSN) no menu pop--up.

Aparecerá a caixa de diálogo Nome da fonte dos dados (DSN).

3. Digite connGlobal como nome da conexão. 4. Selecione a opção Utilizando a DSN no servidor de teste. 5. Clique no botão DSN e selecione a DSN configurada no computador remoto. 6. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente a DSN. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 7. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo ASP de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Configuração de um exemplo de site JSP

O Macromedia Dreamweaver MX vem com páginas de exemplo em JavaServer (JSP) para que você possa criar um pequeno aplicativo para a Web neste formato. Este capítulo descreve como configurar o aplicativo de exemplo se você estiver o Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Para obter mais informações sobre servidores web, consulte Como instalar um servidor Web no Windows. Se você estiver utilizando um servidor web diferente, consulte Configuração de um aplicativo para a Web.

A configuração de um aplicativo para a Web é um processo de tr ês etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a seu banco de dados. Este guia de instalação segue o processo de três etapas.

Este capítulo contém as seguintes seções:

 

 

Página 109 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 112: 1 Introducao

l Como configurar listas de verificação para desenvolvedores JSP l Como configurar o sistema l Defina um site Dreamweaver l Conectar-se ao banco de dados (configuração local) l Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Como configurar listas de verificação para desenvolvedores JSP

Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo.

Configure o sistema:

1. Certifique-se de ter um servidor web. 2. Instale o servidor de aplicativos JSP. 3. Crie uma pasta raiz.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido. 2. Defina a pasta como pasta local do Dreamweaver. 3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver. 4. Especifique uma pasta para processar as páginas dinâmicas. 5. Efetue o upload dos arquivos de exemplo ao servidor web remoto.

Conecte-se ao banco de dados (configuração local):

1. Instale um driver de ligação (bridge) JDBC-ODBC. 2. Crie uma conexão no Dreamweaver.

Conecte-se ao banco de dados (configuração do servidor remoto):

1. Configure o banco de dados de exemplo no computador com o servidor web ativo. 2. Crie uma conexão no Dreamweaver.

Como configurar o sistema

Esta seção fornece instruções para duas configurações de sistema comuns: uma utilizando Microsoft IIS ou PWS instalado no disco rígido e outra utilizando IIS ou PWS instalado em um computador Windows remoto. Se não desejar utilizar essas configurações, consulte Configuração de um aplicativo para a Web.

A ilustração abaixo exibe as duas configurações descritas nesta seção:

 

 

 

 

Página 110 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 113: 1 Introducao

Para configurar seu sistema:

1. Verifique se há um servidor web (consulte Verificar um servidor web). 2. Instale o servidor de aplicativos JSP (consulte Instalar o servidor de aplicativos JSP). 3. Crie uma pasta raiz (consulte Crie uma pasta raiz).

Nota: A instala ção do servidor web e do servidor de aplicativos é uma tarefa única.

Verificar um servidor web

Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor web ativo. Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers).

Verifique se o Microsoft IIS ou PWS est ão instalados e funcionando em seu disco rígido ou em um computador Windows remoto (usuários do Macintosh devem instalar o Microsoft IIS ou PWS em um computador Windows remoto). Um modo r ápido de saber se o PWS ou IIS está instalado no computador é verificar a estrutura de pastas. Há uma pasta c:\Inetpub ou d:\Inetpub? O PWS e o IIS geram esta pasta durante a instalação.

Se o PWS ou o IIS não estiver instalado, instale -o agora. Para obter instruções, consulte Como instalar um servidor Web no Windows.

Após instalar o servidor web, instale o servidor de aplicativos. Veja Instalar o servidor de

 

 

Página 111 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 114: 1 Introducao

aplicativos JSP.

Instalar o servidor de aplicativos JSP

Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador.

Certifique-se de que o servidor de aplicativos JSP esteja instalado e ativo no sistema com PWS ou IIS (o PWS ou IIS podem estar localizados no disco rígido ou em um computador remoto).

Caso você não tenha um servidor de aplicativos JSP, é possível descarregar e instalar uma versão gratuita de teste completa do servidor de aplicativos Macromedia JRun no site da Macromedia na Web.

Para instalar o JRun:

1. Feche todos os aplicativos abertos. 2. Se aplicável, conecte-se ao sistema Windows através da conta Administrator. 3. Clique duas vezes no arquivo de instala ção do JRun.

Surge a tela de abertura.

4. Se o um Java Runtime Environment (JRE) não estiver instalado em seu sistema, selecione a opção na tela de abertura para instalá-lo.

Uma vez que o servidor de aplicativos JRun baseia -se em Java, o JRE deve ser instalado primeiro no sistema que rodará o servidor de aplicativos. Uma vez instalado o JRE, é possível instalar o servidor de aplicativos JRun.

5. Selecione a opção na tela de abertura para instalar o JRun. 6. Siga as instruções na tela para concluir a instalação e testar o programa. 7. Crie um conector JRun ao servidor web IIS ou PWS.

Para obter mais instruções, consulte a documentação do JRun.

Após instalar e iniciar o JRun, crie uma pasta raiz para o aplicativo da Web. Veja Crie uma pasta raiz.

Crie uma pasta raiz

Após instalar o software do servidor, crie uma pasta raiz para o aplicativo no sistema com

 

 

 

 

Página 112 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 115: 1 Introducao

Microsoft PWS ou IIS ativo e verifique se a pasta tem as permissões necessárias.

Para criar uma pasta raiz para o aplicativo da Web:

1. Crie uma pasta chamada aplicativo_exemplo no sistema com PWS ou IIS ativo.

Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor web PWS ou IIS está configurado na pasta Inetpub\wwwroot. O servidor web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador.

2. Certifique-se de que as permissões de leitura e script estejam ativas na pasta.

Se você estiver utilizando o PWS, inicie o Personal Web Manager clicando duas vezes no ícone do servidor web na barra de ferramentas do sistema (o ícone representa uma mão segurando uma página na web). No Personal Web Manager, clique no ícone Avançado. A caixa de diálogo Opções avançadas é exibida. Selecione o diretório Início e clique em Editar as propriedades. A caixa de diálogo Editar o diretório é exibida. Certifique-se de que as opções Leitura e Scripts estejam selecionadas. Por razões de segurança, não selecione a opção Executar.

Se você estiver utilizando o IIS, inicie a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Sites da Web > Site da Web padrão, clique com o botão direito do mouse na pasta Site_exemplo e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção “Scripts e executáveis”.

O servidor web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web.

Após configurar seu sistema, você deve definir um site Dreamweaver. Veja Defina um site Dreamweaver.

Defina um site Dreamweaver

Após configurar o sistema, copie os arquivos de exemplo a uma pasta local e defina um site Dreamweaver para gerenciar os arquivos.

Nota: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do Dreamweaver como um projeto do HomeSite ou Studio.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido (consulte Copie os arquivos de exemplo).

2. Estabeleça a pasta como pasta local do Dreamweaver (consulte Como definir uma pasta local).

3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver (consulte Como definir uma pasta remota).

 

 

Página 113 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 116: 1 Introducao

4. Especifique uma pasta para processar as páginas dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

5. Efetue o upload dos arquivos de exemplo ao servidor web (consulte Efetuar o upload dos arquivos de exemplo).

Copie os arquivos de exemplo

Caso ainda não tenha feito, copie os arquivos de exemplo da pasta de aplicativo do Dreamweaver a uma pasta em seu disco rígido.

Para copiar os arquivos de exemplo:

1. Crie uma pasta nova chamada Sites em seu disco rígido.

Por exemplo: crie C:\Sites no diretório do Windows.

2. Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido.

O caminho para a pasta é o seguinte:

\Macromedia\Dreamweaver MX\Samples\GettingStarted\

3. Copie o conteúdo da pasta GettingStarted à pasta Sites.

Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no Dreamweaver. Veja Como definir uma pasta local.

Como definir uma pasta local

Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de exemplo JSP como pasta local no Dreamweaver.

Para definir a pasta local do Dreamweaver:

1. No Dreamweaver, selecione Site > Novo site.

A caixa de diálogo Definição do site é exibida.

2. Ao aparecer o assistente, clique em Avançado. 3. Na caixa de texto Nome do site, digite GlobalCar – JSP.

O nome identifica o site no Dreamweaver.

 

 

 

 

Página 114 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 117: 1 Introducao

4. Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de exemplo do JSP.

Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo:

C:\Sites\GettingStarted\Develop\jsp

Mantenha aberta a caixa de diálogo Defini ção do site. Em seguida, é preciso definir a pasta do servidor web como pasta remota do Dreamweaver. Veja Como definir uma pasta remota.

Como definir uma pasta remota

Após definir uma pasta local, defina uma pasta de servidor web como pasta Dreamweaver remota conforme descrito nesta se ção.

Para definir a pasta remota do Dreamweaver:

1. Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria.

A tela Informações remotas é exibida.

2. Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP.

3. Digite o caminho ou configurações de FTP para a pasta do servidor web criado na seção Crie uma pasta raiz.

A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta “remota” válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado:

Pasta remota: c:\Inetpub\wwwroot\MySampleApp

Para obter mais informações sobre FTP, consulte Como configurar as opções de informações remotas para o acesso de FTP.

A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma pasta para processar páginas dinâmicas. Veja Especifique o local onde as p áginas dinâmicas podem ser processadas.

Especifique o local onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especifique uma pasta para processar páginas dinâmicas. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a

 

 

 

 

Página 115 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 118: 1 Introducao

bancos de dados durante o processo.

Para especificar a pasta para processamento das páginas dinâmicas:

1. Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria.

A tela Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que seja capaz de processar páginas em JSP, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (consulte Como definir uma pasta remota), pois elas indicam um servidor capaz de processar páginas em JSP.

2. Selecione JSP como tecnologia de servidor. 3. Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso

à pasta remota.

O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Não altere as configura ções.

4. Na caixa de texto Prefixo da URL, digite a URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web.

Para exibir os live data nas páginas enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do site da Web e tenta solicitá-los através do prefixo da URL.

O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Defini ção do site. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for c:\Inetpub\wwwroot\MySampleApp, então o prefixo da URL deve o seguinte:

http://localhost/MySampleApp/

Dica: O prefixo da URL nunca deve especificar uma página individual no site.

No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugest ão do Dreamweaver estiver incorreta. Para obter mais informações, veja O prefixo de URL.

5. Clique em OK e em Concluído.

Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web. Veja Efetuar o upload dos arquivos de exemplo .

Efetuar o upload dos arquivos de exemplo

Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web conforme descrito nesta seção. Você deve “carregar” os arquivos

 

 

Página 116 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 119: 1 Introducao

mesmo se o servidor web estiver ativo em seu computador local.

Se os arquivos não forem carregados, é possível que recursos Live Date e Visualizar no navegador não estejam funcionando corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor.

Para efetuar o upload dos arquivos de exemplo ao servidor web.

1. No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais.

A pasta raiz deve ser a primeira pasta da lista.

2. Clique na seta azul para cima na barra de ferramentas.

O Dreamweaver copiará todos os arquivos à pasta do servidor web definida em Como definir uma pasta remota.

O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de exemplo instalado no Dreamweaver. Se o servidor web estiver ativo no computador local, consulte Conectar-se ao banco de dados (configuração local). Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Conectar-se ao banco de dados (configuração local)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração local, ou seja, se o servidor web estiver ativo no mesmo computador que o Dreamweaver. Se o servidor web estiver ativo no computador remoto, consulte Conectar-se ao banco de dados de exemplo (configuração do servidor remoto).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores JSP.

Para criar uma conexão de banco de dados com uma configuração local:

1. Instale o JDBC-ODBC Bridge driver da Sun (consulte Como instalar o bridge driver). 2. Crie a conexão no Dreamweaver (consulte Como criar uma conexão de banco de dados).

Como instalar o bridge driver

 

 

 

 

Página 117 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 120: 1 Introducao

Antes de criar uma conexão ao banco de dados de exemplo, instale o JDBC-ODBC Bridge driver da Sun tarefas no computador com o servidor web ativo. O bridge driver permite utilizar os nomes de fonte de dados (DSNs) do Windows para a criação de conexões. Este driver é fornecido com o Sun Java 2 SDK, edi ção Standard para Windows.

Para saber se você já possui o Java 2 SDK como driver, verifique se os seguintes diretórios estão visíveis no disco rígido:

c:\jdk1.2.x

c:\jdk1.3.x

Nota: Java 1.2.2 e 1.3 é o mesmo que 2.

Se você não tiver o SDK, descarregue-o do site da Sun na Web. Após descarregar o arquivo de instalação, clique duas vezes nele para executar o instalador. Siga as instru ções na tela e verifique se o componente Java 2 Runtime Environment componente foi selecionado na caixa de diálogos Selecionar componente. Esta opção é selecionada por padrão. O driver é instalado automaticamente junto com o SDK.

Embora seja adequado para uso com sistemas de banco de dados mais comuns com o Microsoft Access, o bridge driver JDBC-ODBC da Sun é bastante limitado. Por exemplo: ele permite que apenas uma página JSP conecte-se ao banco de dados de cada vez (em outras palavras, não suporta o uso simultâneo de múltiplas tarefas). Para obter mais informações sobre as limitações do driver, consulte o artigo 12409 da Centro de suporte Macromedia

Após instalar o bridge driver, crie uma conexão de banco de dados no Dreamweaver. Veja Como criar uma conexão de banco de dados.

Como criar uma conexão de banco de dados

Após instalar o Sun JDBC-ODBC Bridge driver no computador com o servidor web ativo (veja Como instalar o bridge driver), crie uma conexão de banco de dados no Dreamweaver.

Para criar uma conexão ao banco de dados no Dreamweaver:

1. Abra qualquer página JSP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão de adição (+) exibido no painel e escolher “Driver JDBC-ODBC da Sun (Banco de dados ODBC)” no menu pop-up.

Aparecerá a caixa de diálogo Banco de dados ODBC (Driver JDBC-ODBC da Sun).

3. Digite connGlobal como nome da conexão. 4. Selecione a opção Utilizando o driver nesta máquina. 5. Na caixa de texto URL, substitua o alocador de espaço [odbc dsn] por GlobalCar.

Durante a instalação, o Dreamweaver cria uma DSN chamada GlobalCar indicando o banco de dados Microsoft Access na pasta Samples\Database da pasta de aplicativos do Dreamweaver MX.

 

 

Página 118 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 121: 1 Introducao

A caixa de texto URL deverá ter a seguinte aparência:

jdbc:odbc:GlobalCar

6. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente a DSN e os demais parâmetros de conexão. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 7. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo JSP de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e tutorais na ajuda (Ajuda > Tutoriais).

Conectar-se ao banco de dados de exemplo (configuração do servidor remoto)

Durante a instalação, o Dreamweaver copia um exemplo de banco de dados do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de exemplo em caso de configuração remota, ou seja, se o servidor web estiver ativo no computador remoto. Se o servidor web estiver ativo no mesmo computador que o Dreamweaver, consulte Conectar-se ao banco de dados (configuração local).

Nota: Para conectar-se a outro banco de dados, consulte Conexões de banco de dados para programadores JSP.

Para criar uma conexão ao banco de dados com uma configuração de servidor remota:

1. Configure o banco de dados de exemplo no computador com o servidor web ativo (consulte Configurar o banco de dados no computador remoto)

2. Crie a conexão no Dreamweaver (consulte Como criar uma conexão de banco de dados).

Configurar o banco de dados no computador remoto

Antes de criar uma conexão ao banco de dados de exemplo, execute as tarefas a seguir no computador remoto com o servidor web ativo: copie o banco de dados de exemplo no disco rígido do computador, crie uma DSN no computador indicando o banco de dados e instale o

 

 

 

 

Página 119 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 122: 1 Introducao

JDBC-ODBC Bridge driver no computador.

Para configurar o banco de dados de exemplo no computador remoto:

1. Copie o arquivo do banco de dados de exemplo ao computador remoto.

Os arquivos de banco de dados, global.mdb, estão localizados na pasta a seguir no disco rígido local:

\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

É possível colocar o arquivo em qualquer pasta no computador remoto ou criar uma nova pasta nova para ele.

2. Certifique-se de que o driver do Microsoft Access, versão 4.0 ou superior, esteja instalado no computador remoto.

Para saber se o driver já está instalado, veja Para exibir os drivers ODBC que estão instalados em um sistema Windows.

Se o driver ainda não foi instalado, efetue o download e instale os pacotes Microsoft Data Access Components (MDAC) versão 2.5 e 2.6 no computador remoto. É possível efetuar o download dos pacotes MDAC gratuitamente do site da Microsoft. Estes pacotes contêm os mais recentes drivers da Microsoft, incluindo o Microsoft Access Driver.

Nota: Instalar o MDAC 2.5 antes de instalar o MDAC 2.6.

3. Configure uma DSN para o banco de dados de exemplo no computador remoto.

Para obter instruções, veja Como configurar DSNs no Windows.

4. Certifique-se de que o JDBC-ODBC Bridge driver esteja instalado no computador remoto.

Este driver será utilizado juntamente com a DSN para criar uma conexão ao banco de dados. Para obter instruções, consulte Como instalar o bridge driver.

Após configurar o banco de dados, DSN e o bridge driver, crie uma conexão ao banco de dados no Dreamweaver. Veja Como criar uma conexão de banco de dados.

Como criar uma conexão de banco de dados

Após configurar o banco de dados de exemplo no computador remoto (consulte Configurar o banco de dados no computador remoto), crie uma conexão ao banco de dados no Dreamweaver.

Para criar uma conexão ao banco de dados no Dreamweaver:

1. Abra qualquer página JSP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão de adição (+) no painel e selecione “ Banco de dados ODBC (Sun Driver

 

 

Página 120 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 123: 1 Introducao

JDBC-ODBC)” no menu pop-up.

Aparecerá a caixa de diálogo Banco de dados ODBC (Driver JDBC-ODBC da Sun).

3. Digite connGlobal como nome da conexão. 4. Selecione a opção Utilizando o driver no servidor de teste. 5. Substitua o alocador de espaço [odbc dsn] na caixa de texto URL pela DSN definida no

computador remoto.

A caixa de texto URL deverá ter a seguinte aparência:

jdbc:odbc:myDSN

6. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, siga dos procedimentos abaixo:

¡ Verifique-novamente a DSN e os demais parâmetros de conexão. ¡ Verifique as configurações da pasta que o Dreamweaver utiliza para processar

páginas dinâmicas (consulte Especifique o local onde as p áginas dinâmicas podem ser processadas).

¡ Consulte Como solucionar problemas de conexão no banco de dados. 7. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo JSP de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Configuração de um exemplo de site PHP

O Macromedia Dreamweaver MX vem com páginas de exemplo em PHP para que você possa criar um pequeno aplicativo para a Web neste formato. Este capítulo descreve como configurar o aplicativo de exemplo se você estiver o Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Para obter mais informações sobre servidores web, consulte Como instalar um servidor Web no Windows. Se você estiver utilizando um servidor web diferente, consulte Configuração de um aplicativo para a Web.

Se você for usuário Mac OS X, é possível desenvolver sites PHP localmente utilizando o servidor web Apache e o servidor de aplicativos PHP instalados em seu sistema operacional. Para obter mais informações, consulte os sites da Web a seguir:

l http://developer.apple.com/internet/macosx/php.html l http://www.entropy.ch/software/macosx/ l http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

A configuração de um aplicativo para a Web é um processo de tr ês etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a

 

 

Página 121 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 124: 1 Introducao

seu banco de dados. Este guia de instalação segue o processo de três etapas.

Este capítulo contém as seguintes seções:

l Como configurar listas de verificação para desenvolvedores PHP l Como configurar o sistema l Defina um site Dreamweaver l Conectar-se a um banco de dados de exemplo

Como configurar listas de verificação para desenvolvedores PHP

Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo.

Configure o sistema:

1. Certifique-se de ter um servidor web. 2. Instale o servidor de aplicativos PHP. 3. Teste a instala ção. 4. Crie uma pasta raiz.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido. 2. Defina a pasta como pasta local do Dreamweaver. 3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver. 4. Especifique uma pasta para processar as páginas dinâmicas. 5. Efetue o upload dos arquivos de exemplo ao servidor web remoto.

Conecte-se ao banco de dados:

1. Crie o banco de dados MySQL de exemplo. 2. Crie uma conexão ao banco de dados no Dreamweaver.

Como configurar o sistema

Esta seção fornece instruções para duas configurações de sistema comuns: uma utilizando Microsoft IIS ou PWS instalado no disco rígido e outra utilizando IIS ou PWS instalado em um computador Windows remoto. Se não desejar utilizar essas configurações, consulte Configuração de um aplicativo para a Web.

Nota: Se você for usuário Mac OS X, é possível utilizar o servidor web Apache e o servidor de aplicativos PHP instalados em seu sistema operacional. Para mais informações, consulte o site

 

 

 

 

Página 122 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 125: 1 Introducao

da Apple na Web em http://developer.apple.com/internet/macosx/php.html. Outros site úteis são http://www.entropy.ch/software/macosx/ e http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html.

A ilustração abaixo exibe as duas configurações descritas nesta seção:

Para configurar seu sistema:

1. Verifique se há um servidor web (consulte Verificar um servidor web). 2. Instale o servidor de aplicativos PHP (consulte Instalação de um servidor de aplicativos

PHP). 3. Teste a instala ção (consulte Testar a instalação). 4. Crie uma pasta raiz (consulte Crie uma pasta raiz).

Nota: A instala ção do servidor web e do servidor de aplicativos é uma tarefa única.

Verificar um servidor web

Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor web ativo. Um servidor web é um software que fornece páginas da web em resposta a pedidos originados de navegadores (browsers).

Verifique se o Microsoft IIS ou PWS est ão instalados e funcionando em seu disco rígido ou em um computador Windows remoto (usuários do Macintosh devem instalar o Microsoft IIS ou PWS

 

 

Página 123 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 126: 1 Introducao

em um computador Windows remoto). Um modo r ápido de saber se o PWS ou IIS foi instalado ou não no computador é verificar a estrutura de pastas. Há uma pasta c:\Inetpub ou d:\Inetpub? O PWS e o IIS geram esta pasta durante a instalação.

Se o PWS ou o IIS não estiver instalado, instale -o agora. Para obter instruções, consulte Como instalar um servidor Web no Windows.

Após instalar o servidor web, instale o servidor de aplicativos. Veja Instalação de um servidor de aplicativos PHP.

Instalação de um servidor de aplicativos PHP

Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativo é um software que ajuda o servidor web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor web envia a página ao servidor de aplicativo para processamento antes de enviá-la ao navegador.

Certifique-se de que o servidor de aplicativos PHP esteja instalado e ativo no sistema com PWS ou IIS (o PWS ou IIS podem estar localizados no disco rígido ou no computador remoto com Windows).

Caso você não tenha o PHP, é possível descarregá-lo e instalá-lo do site da PHP na Web. Selecione o arquivos de instala ção do Windows, que utilizar o InstallShield para instalar o PHP e configure o IIS ou PWS.

Para instalar o PHP no sistema Windows:

1. Feche todos os aplicativos abertos. 2. Se aplicável, conecte-se ao sistema Windows através da conta Administrator. 3. Clique duas vezes no arquivo instalador descarregado do site da PHP na Web. 4. Siga as instruções na tela para instalar o programa.

Após concluir a instalação, o instalador perguntará se você precisa reiniciar seu sistema, reiniciar o servidor ou apenas iniciar o PHP.

Para obter mais informações sobre como configurar o servidor, consulte a documentação do PHP que você descarregou do site da PHP.

Após instalar o PHP, teste o servidor para verificar se está funcionando corretamente. Veja Testar a instalação.

Testar a instalação

 

 

 

 

Página 124 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 127: 1 Introducao

É possível testar servidor de aplicativos PHP executando uma página de teste, conforme descrito nesta seção.

Para testar o servidor de aplicativos PHP:

1. No Dreamweaver ou em qualquer editor de texto, crie um texto simples denominado teste.php.

2. No arquivo, digite o seguinte código:

<p>This page was created at <b> <?php echo date("h:i:s a", time()); ?> </b> on the computer running PHP.</p> Este código exibe a hora em que a página foi processada no servidor.

3. Copie o arquivo à pasta Inetpub\wwwroot no disco rígido do computador Windows com PWS ou IIS ativo.

4. No navegador, digite a URL da página de teste e pressione Enter.

Se PHP estiver instalado em seu computador local, é possível digitar a URL a seguir:

http://localhost/teste.php

A página de teste deve abrir e exibir a hora do dia, como no exemplo:

A hora especificada é conhecida como conteúdo dinâmico porque muda toda vez que a página for solicitada. Clique em Atualizar no navegador para gerar uma nova página com uma hora diferente.

Nota: Observe o c ódigo fonte (Exibir > Código fonte no Internet Explorer) para confirmar se a página não utiliza nenhum JavaScript no cliente para gerar este efeito.

Se a página não funcionar conforme esperado, verifique os possíveis erros a seguir:

Página 125 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 128: 1 Introducao

l O arquivo não possui extensão .php. l O caminho do arquivo da página (c:\Inetput\wwwroot\teste.php), e não a URL (por

exemplo: http://localhost/teste.php), foi digitado na caixa de texto Endereço do navegador.

Se você digitar o caminho do arquivo no navegador (do mesmo modo que as páginas HTML normais), o servidor web e o servidor de aplicativo serão ignorados. Como resultado, sua página não será processada pelo servidor.

l A URL contém um erro de digitação. Verifique se há erros e certifique-se de que o nome de arquivo não venha acompanhado de uma barra invertida, como http://localhost/teste.php/.

Após instalar e testar o software servidor, crie uma pasta raiz para o aplicativo da Web. Veja Crie uma pasta raiz.

Crie uma pasta raiz

Após instalar o software do servidor, crie uma pasta raiz para o aplicativo no sistema com Microsoft PWS ou IIS ativo e verifique se a pasta tem as permissões necessárias.

Para criar uma pasta raiz para o aplicativo da Web:

1. Crie uma pasta chamada aplicativo_exemplo no sistema com PWS ou IIS ativo.

Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor web PWS ou IIS está configurado na pasta Inetpub\wwwroot. O servidor web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador.

2. Certifique-se de que as permissões de leitura e script estejam ativas na pasta.

Se você estiver utilizando o PWS, inicie o Personal Web Manager clicando duas vezes no ícone do servidor web na barra de ferramentas do sistema (o ícone representa uma mão segurando uma página na web). No Personal Web Manager, clique no ícone Avançado. A caixa de diálogo Opções avançadas é exibida. Selecione o diretório Início e clique em Editar as propriedades. A caixa de diálogo Editar o diretório é exibida. Certifique-se de que as opções Leitura e Scripts estejam selecionadas. Por razões de segurança, não selecione a opção Executar.

Se você estiver utilizando o IIS, inicie a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Sites da Web > Site da Web padrão, clique com o botão direito do mouse na pasta Site_exemplo e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção “Scripts e executáveis”.

O servidor web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web.

 

 

Página 126 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 129: 1 Introducao

Após configurar seu sistema, você deve definir um site Dreamweaver. Veja Defina um site Dreamweaver.

Defina um site Dreamweaver

Após configurar o sistema, copie os arquivos de exemplo a uma pasta local e defina um site Dreamweaver para gerenciar os arquivos.

Nota: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do Dreamweaver como um projeto do HomeSite ou Studio.

Para definir um site Dreamweaver:

1. Copie os arquivos de exemplo a uma pasta em seu disco rígido (consulte Copie os arquivos de exemplo).

2. Estabeleça a pasta como pasta local do Dreamweaver (consulte Como definir uma pasta local).

3. Estabeleça a pasta do servidor web como pasta remota do Dreamweaver (consulte Como definir uma pasta remota).

4. Especifique uma pasta para processar as páginas dinâmicas (consulte Especifique o local onde as páginas dinâmicas podem ser processadas).

5. Efetue o upload dos arquivos de exemplo ao servidor web (consulte Efetuar o upload dos arquivos de exemplo).

Copie os arquivos de exemplo

Caso ainda não tenha feito, copie os arquivos de exemplo da pasta de aplicativo do Dreamweaver a uma pasta em seu disco rígido.

Para copiar os arquivos de exemplo:

1. Crie uma pasta nova chamada Sites em seu disco rígido.

Por exemplo: crie C:\Sites no diretório do Windows.

2. Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido.

O caminho para a pasta é o seguinte:

\Macromedia\Dreamweaver MX\Samples\GettingStarted\

3. Copie o conteúdo da pasta GettingStarted à pasta Sites.

Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no

 

 

 

 

Página 127 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 130: 1 Introducao

Dreamweaver. Veja Como definir uma pasta local.

Como definir uma pasta local

Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de exemplo PHP como pasta local no Dreamweaver.

Para definir a pasta local do Dreamweaver:

1. No Dreamweaver, selecione Site > Novo site.

A caixa de diálogo Definição do site é exibida.

2. Ao aparecer o assistente, clique em Avançado. 3. Na caixa de texto Nome do site, digite GlobalCar – PHP.

O nome identifica o site no Dreamweaver.

4. Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de exemplo do PHP.

Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo:

C:\Sites\GettingStarted\Develop\php

5. Mantenha aberta a caixa de diálogo Defini ção do site. Em seguida, é preciso definir a pasta do servidor web como pasta remota do Dreamweaver. Veja Como definir uma pasta remota.

Como definir uma pasta remota

Após definir uma pasta local, defina uma pasta de servidor web como pasta Dreamweaver remota conforme descrito nesta se ção.

Para definir a pasta remota do Dreamweaver:

1. Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria.

A tela Informações remotas é exibida.

2. Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP.

3. Digite o caminho ou configurações de FTP para a pasta do servidor web criado na seção

 

 

 

 

Página 128 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 131: 1 Introducao

Crie uma pasta raiz.

A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta “remota” válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado:

Pasta remota: c:\Inetpub\wwwroot\MySampleApp

Para obter mais informações sobre FTP, consulte Como configurar as opções de informações remotas para o acesso de FTP.

A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma pasta para processar páginas dinâmicas. Veja Especifique o local onde as p áginas dinâmicas podem ser processadas.

Especifique o local onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especifique uma pasta para processamento das páginas dinâmicas conforme descrito nesta seção. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a bancos de dados durante o processo.

Para especificar a pasta para processamento das páginas dinâmicas:

1. Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria.

A tela Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que seja capaz de processar páginas em PHP, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (consulte Como definir uma pasta remota), pois elas indicam um servidor capaz de processar páginas em PHP.

2. Selecione PHP MySQL como tecnologia de servidor. 3. Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso

à pasta remota.

O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Não altere as configura ções.

4. Na caixa de texto Prefixo da URL, digite a URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web.

Para exibir os live data nas páginas enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do site da Web e tenta solicitá-los através do prefixo da URL.

O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Defini ção do site. No entanto, o prefixo da URL sugerido pode estar incorreto. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for

 

 

Página 129 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 132: 1 Introducao

c:\Inetpub\wwwroot\MySampleApp, então o prefixo da URL deve o seguinte:

http://localhost/MySampleApp/

Dica: O prefixo da URL nunca deve especificar uma página individual no site.

No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugest ão do Dreamweaver estiver incorreta. Para obter mais informações, veja O prefixo de URL.

5. Clique em OK e em Concluído.

Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web. Veja Efetuar o upload dos arquivos de exemplo .

Efetuar o upload dos arquivos de exemplo

Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de exemplo ao servidor web conforme descrito nesta seção. Você deve “carregar” os arquivos mesmo se o servidor web estiver ativo em seu computador local.

Se os arquivos não forem carregados, é possível que recursos Live Date e Visualizar no navegador não estejam funcionando corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor.

Para efetuar o upload dos arquivos de exemplo ao servidor web.

1. No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais.

A pasta raiz deve ser a primeira pasta da lista.

2. Clique na seta azul para cima na barra de ferramentas.

O Dreamweaver copiará todos os arquivos à pasta do servidor web definida em Como definir uma pasta remota.

O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de exemplo instalado no Dreamweaver. Veja Conectar-se a um banco de dados de exemplo .

Conectar-se a um banco de dados de exemplo

 

 

 

 

Página 130 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 133: 1 Introducao

Durante instala ção, o Dreamweaver copia um script SQL para o disco rígido. É possível utilizar este script para criar automaticamente uma exemplo de banco de dados MySQL. Esta seção descreve como criar uma conexão ao banco de dados de exemplo.

Esta seção considera que o MySQL já tenha sido instalado e configurado em seu computador local ou remoto. Para efetuar o download e instalar o sistema de banco de dados, visite o site da MySQL na Web.

O primeiro passo é criar a exemplo de banco de dados MySQL utilizando o script SQL (consulte Como criar o banco de dados MySQL). Uma vez criado o banco de dados, é preciso criar uma conexão de banco de dados no Dreamweaver (consulte Como criar uma conexão de banco de dados).

Como criar o banco de dados MySQL

Durante a instalação, o Dreamweaver MX copia um script SQL capaz de criar e preencher uma exemplo de banco de dados MySQL.

Antes de começar, certifique-se de que o MySQL esteja instalado e configurado em seu computador local ou remoto. É possível descarregar a última versão do programa no site da MySQL na Web.

Para criar o banco de dados MySQL de exemplo:

1. Copie o arquivo de script SQL, insert.sql, para a pasta MySql\Bin do computador com MySQL instalado.

Os arquivos de script está localizado na seguinte pasta no disco rígido local:

\Macromedia\Dreamweaver MX\Samples\Database\insert.sql

2. No computador com MySQL, abra a janela de prompt de comando.

No Windows, abra a solicitação de comando Iniciar > Programas > Prompt do MS-DOS.

Nota: Em alguns sistemas, o prompt do MS-DOS pode estar localizado em Acessórios do menu Iniciar > Programas.

3. Altere o diretório mysql\bin digitando os comandos a seguir no prompt do MS-DOS:

> cd\ > cd mysql\bin

4. Inicie o cliente MySQL digitando o comando a seguir no prompt mysql\bin\:

> mysql -uUser -pPassword Por exemplo: se o nome do usuário (também conhecido como um nome de conta) MySQL e senha for Tara e Telly3, digite o comando a seguir: > mysql -uTara -pTelly3

 

 

Página 131 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 134: 1 Introducao

Se você não tiver uma senha, omitir o argumento -p do seguinte modo: > mysql -uTara Se você não definiu um nome de usuário durante a configuração da instala ção do MySQL, digite a raiz como o nome de usu > mysql -uroot O prompt de comando do cliente MySQL parece do seguinte modo: mysql>

5. Crie um novo banco de dados digitando o comando a seguir no prompt do MySQL:

mysql>CREATE DATABASE GlobalCar; O MySQL cria um novo banco de dados, mas ainda não contém nenhuma tabela ou registro.

6. Desconecte-se do cliente MySQL digitando o comando a seguir no prompt:

mysql>quit

7. No prompt de comando do sistema, preencha o novo banco de dados GlobalCar no MySQL com o seguinte comando:

> mysql -uUser -pPassword GlobalCar < insert.sql Este comando utilizar o arquivo insert.sql para adicionar tabelas e registros ao banco de dados GlobalCar criado na etapa 5.

Após criar o banco de dados MySQL, crie uma conexão a este banco de dados no Dreamweaver. Veja Como criar uma conexão de banco de dados.

Como criar uma conexão de banco de dados

Após configurar o banco de dados de exemplo (consulte Como criar o banco de dados MySQL), crie uma conexão de banco de dados no Dreamweaver.

Para criar uma conexão ao banco de dados no Dreamweaver:

1. Abra qualquer página PHP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados).

2. Clique no botão com o sinal de adição (+) e selecione Conexão MySQL no menu pop-up.

A caixa de diálogo Conexão MySQL será exibida.

3. Digite connGlobal como nome da conexão. 4. Na caixa de texto Servidor MySQL, especifique o computador servidor do MySQL.

Digite um endereço IP ou um nome de servidor. Se o MySQL estiver funcionando no

 

 

Página 132 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 135: 1 Introducao

mesmo computador que o PHP, digite localhost.

5. Informar o nome de usuário e a senha para o servidor MySQL.

Caso o nome de usuário não seja definido durante a configuração da instala ção do MySQL no computador a Windows, digite a palavra “raiz” na caixa de texto Nome de usuário. Se você não tiver uma senha, deixe a caixa de texto Senha em branco.

6. Na caixa de texto Banco de dados, digite GlobalCar ou clique em Selecionar e escolha GlobalCar na lista de bancos dados MySQL.

GlobalCar é o nome do banco de dados MySQL de exemplo criado por você (consulte Como criar o banco de dados MySQL ).

7. Clique em Testar.

O Dreamweaver tentará estabelecer a conexão com o banco de dados. Se a conexão falhar, verificar-novamente o nome do servidor, o nome do usuário e a senha. Se a conexão ainda falhar, verificar as configura ções para a pasta que o Dreamweaver usa para processar páginas dinâmicas (veja Especifique o local onde as páginas dinâmicas podem ser processadas).

8. Clique em OK.

A nova conexão aparecerá no painel Bancos de dados.

O aplicativo PHP de exemplo está configurado para o guia de introdução e tutoriais. Consulte Como desenvolver um aplicativo para a Web no Dreamweaver MX e os tutoriais da ajuda do Dreamweaver (Ajuda > Tutoriais).

Como solucionar problemas de conexão no banco de dados

Este capítulo descreve alguns problemas comuns que podem ser encontrados após a criação de uma conexão ao banco de dados e descreve como solucioná-los. Este capítulo contém as seguinte seções:

l Como solucionar mensagens de erro da Microsoft l Como solucionar mensagens de erro do ColdFusion l Como solucionar problemas de permissões

Como solucionar mensagens de erro da Microsoft

Esta seção descreve algumas mensagens de erro comuns da Microsoft e como diagnostic á-las. Estes erros podem ocorrer se você estiver utilizando o Internet Information Server (IIS) com

 

 

 

 

Página 133 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 136: 1 Introducao

um sistema de banco de dados Microsoft, como Access ou SQL Server. Estes erros normalmente acontecem ao solicitar uma página dinâmica do servidor.

Nota: A Macromedia não oferece suporte técnico para software de outros fabricantes, como o Windows e IIS. Se esta seção não ajudar a resolver o problema, entre em contato com o suporte técnico da Microsoft ou visite o site da Microsoft.

As mensagens de erros a seguir estão descritas nesta seção:

l 80004005–Data source name not found and no default driver specified (outras variações desta mensagem são “80004005–Driver's SQLSetConnectAttr failed,” e “80004005–General error Unable to open registry key ‘DriverId’”)

l 80004005–Couldn ’t use ‘(unknown)’; file already in use (outra variação desta mensagem é “80004005–Microsoft Jet database engine cannot open the file (unknown)”)

l 80004005–Logon Failed() l 80004005–Operation must use an updateable query l 80040e07–Data type mismatch in criteria expression l 80040e10–Too few parameters l 80040e10–COUNT field incorrect l 80040e14–Syntax error in INSERT INTO statement l 80040e21–ODBC error on Insert or Update l 800a0bcd–Either BOF or EOF is true

Para mais informações sobre mensagens de erro 80004005, consultar “INFO: Guia de Diagnóstico para mensagens de erro 80004005 em Active Server Pages e Componentes de Acesso de dados Microsoft (Q306518),” no site da Microsoft.

80004005–Data source name not found and no default driver specified

Este erro ocorre ao tentar visualizar uma página dinâmica em um navegador na web ou no modo Live Data. Esta mensagem de erro pode variar, dependendo do banco de dados e do servidor web. Há outras variações da mensagem de erro:

l 80004005–Driver's SQLSetConnectAttr failed l 80004005–General error Unable to open registry key 'DriverId'

A seguir possíveis causas e soluções:

l A página não pode localizar o DSN. Certificar -se de que o DSN foi criado tanto no servidor web como no computador local. Para obter mais informações, consulte Como configurar DSNs no Windows.

l O DSN deve ser configurado como DSN de usuário, não como um DSN de sistema. Remover o DSN de usuário e criar um DSN de sistema para substitui -lo.

Nota: O DSN de usuário não for excluído, o nome de DSN duplicado produzirá um novo erro de ODBC.

l Se o Microsoft Access for utilizado, o arquivo de banco de dados (. mdb) pode estar bloqueado. O bloqueio pode ocorrer devido a um DSN com nome diferente acessando o banco de dados. No Windows Explorer, localizar o arquivo bloqueado (.ldb) na pasta que

 

 

Página 134 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 137: 1 Introducao

contém o arquivo de banco de dados (.mdb) e excluir o arquivo.ldb. Se outro DSN estiver indicando o mesmo arquivo de banco de dados, excluir o DSN para evitar erros no futuro. Reinicie o computador após efetuar as alterações.

80004005–Couldn’t use ‘(unknown)’; file already in use

Este erro ocorre ao utilizar um banco de dados do Microsoft Access e tentar visualizar uma página dinâmica em um navegador na web ou no modo Live Data. Outra variação desta mensagem é “80004005–Microsoft Jet database engine cannot open the file (unknown)”

A causa provável é um problema de permissão. Para obter mais informações, veja Como solucionar problemas de permissões. A seguir algumas possíveis causas e soluções:

l É provável que conta utilizada pelo Internet Information Server (normalmente IUSR) não tenha as permissões de Windows NT corretas para um banco de dados centralizado no arquivo ou para a pasta que contém o arquivo. Verificar as permissões da conta IIS (IUSR) no gerenciador de usuários do NT.

l É possível que você não tenha permissão para criar ou excluir arquivos temporários. Verificar as permissões do arquivo e da pasta. Verificar se você tem permissão para criar ou excluir arquivos temporários. Arquivos temporários são normalmente criados na mesma pasta do banco de dados, mas o arquivo também pode ser criado em outras pastas, como /Winnt.

l No Windows 2000, pode ser necessário alterar o valor do tempo-limite para o DSN do banco de dados do Access. Para alterar o tempo-limite, selecionar > Configura ções> Painel de controle > Ferramentas administrativas > Fontes de dados (ODBC). Clique na guia Sistema, selecionar o DSN correto e clique no botão Configurar. Clique no botão Opções e modifique o valor de Tempo-limite da página para 5000.

Se ainda tiver problemas, consulte os seguintes artigos na Base de Dados de Conhecimento da Microsoft:

l PRB: 80004005 “Couldn't Use ‘(unknown)’; File Already in Use. l PRB: Microsoft Access Database Connectivity Fails in Active Server Pages . l PRB: Error “Cannot Open File Unknown” Using Access.

80004005–Logon Failed()

Este erro ocorre ao utilizar o Microsoft SQL Server e tentar visualizar uma página dinâmica em um navegador na web ou no modo Live Data.

Este erro é gerado através do SQL Server se este não aceitar ou reconhecer a conta de logon ou senha enviada (se você estiver usando segurança padrão) ou se uma conta do Windows NT não for atribuída a uma conta SQL (se você estiver usando segurança integrada).

 

 

 

 

Página 135 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 138: 1 Introducao

Algumas possíveis soluções podem ser vistas a seguir:

l Se estiver usando segurança padrão, o nome da conta e a senha podem estar incorretos. Tente utilizar a conta e senha do Admin do sistema (UID = “sa” e nenhuma senha), que devem ser definidas na linha de seqüência da conexão (DSNs não armazenam nomes de usuário e senhas).

l Ao usar segurança integrada, verificar a conta Windows NT abrindo a p ágina e localizar a conta SQL atribuída (se houver).

l O SQL Server não permite sublinhados em nomes de conta SQL. Se alguém atribuir manualmente a conta NT IUSR_machinename do Windows NT a uma conta SQL com o mesmo nome, ocorrerá uma falha. Atribuir qualquer conta com sublinhado a um nome de conta SQL que não usa sublinhados.

80004005–Operation must use an updateable query

Este erro ocorre quando um evento estiver atualizando um conjunto de registros ou estiver inserindo dados em um conjunto de registros.

A seguir possíveis causas e soluções:

l As permissões definidas na pasta que contém o banco de dados são muito restritivas. Os privilégios IUSR devem ser estabelecidos para leitura/gravação. Veja Como solucionar problemas de permissões.

l As permissões no arquivo de banco de dados não possui privilégios totais de leitura/gravação válidos. Veja Como solucionar problemas de permissões.

l O banco de dados pode estar localizado fora do diretório Inetpub/wwwroot. Embora seja possível visualizar e localizar os dados, não será possível atualizá-los, a menos que o banco de dados esteja localizado no diretório wwwroot.

l O conjunto de registros está localizado em uma consulta não atualizável. Funções lógicas são bons exemplos de consultas não atualizáveis em um banco de dados. Reestruturar as consultas de modo que se tornem atualizáveis.

Para mais informações sobre mensagens de erro, consultar “PRB: ASP ‘Error The Query Is Not Updateable’ When You Update Table Record” na Base de Conhecimento Microsoft.

80040e07–Data type mismatch in criteria expression

Este erro ocorre quando o servidor tenta processar uma página contendo um comportamento do servidor Inserir registro ou Atualizar registro, sendo que o comportamento de servidor tenta definir o valor de uma coluna Data/Hora em um banco de dados do Microsoft Access com uma seqüência nula ("").

O Microsoft Access possui situações distintas para digitação de dados e impõe um conjunto de regras rigorosas sobre determinados valores das colunas. O valor de seqüência vazio na

 

 

 

 

Página 136 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 139: 1 Introducao

consulta SQL não pode ser armazenado na coluna Data/Hora do Access. Atualmente, a única solução conhecida é evitar inserir ou atualizar as colunas Data/Hora no Access com seqüências vazias ("") ou com qualquer outro valor que não corresponde ao intervalo de valores especificado para o tipo de dados.

80040e10–Too few parameters

Este erro ocorre quando uma coluna especificada em uma consulta SQL não existir na tabela de banco de dados. Verificar os nomes das colunas na tabela de banco de dados em compara ção à consulta SQL. A causa deste erro é freqüentemente um erro tipográfico.

80040e10–COUNT field incorrect

Este erro ocorre ao tentar visualizar uma página contendo um comportamento de servidor Inserir registros em um navegador e tentar utilizá-lo para inserir um registro em um banco de dados do Microsoft Access 2000.

O usuário pode estar tentando inserir um registro em um campo de banco de dados com um ponto de interrogação (?) no nome do campo. O ponto de interrogação é um caractere especial para alguns mecanismos de busca de banco de dados, incluindo o Microsoft Access, e não deve ser usado para nomes de tabela de banco de dados ou nomes de campos.

Abrir o sistema de banco de dados, remover o ponto de interrogação (?) dos nomes do campo e atualizar os comportamentos de servidor na página referente ao campo.

80040e14–Syntax error in INSERT INTO statement

Este erro ocorre quando o servidor tenta processar uma página contendo um comportamento de servidor Inserir registro.

Este erro é normalmente o resultado de um ou mais problemas relacionados ao nome do campo, objeto ou variável no banco de dados a seguir:

l Uso de uma palavra reservada como nome. A maioria dos bancos de dados possui um conjunto de palavras reservadas. Por exemplo: “data” é uma palavra reservada e não pode ser usada para nomes de coluna em um banco de dados.

l Uso de caracteres especiais com o nome. Exemplos de caracteres especiais:

 

 

 

 

 

 

Página 137 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 140: 1 Introducao

. / * : ! # & - ?

l Uso de um espaço no nome.

Este erro também pode acontecer quando uma máscara de entrada for definida para um objeto no banco de dados e os dados inseridos não corresponderem à máscara.

Para solucionar o problema, evite usar palavras reservadas como “data”, “nome”, “selecionar”, “onde” e “nível” ao especificar nomes de coluna no banco de dados. Remover também os espaços e caracteres especiais.

Ver as páginas da web a seguir para obter listas de palavras reservadas para sistemas de banco de dados comuns:

l Microsoft Access l Microsoft SQL Server l Oracle l MySQL

80040e21–ODBC error on Insert or Update

Este erro ocorre quando o servidor tenta processar uma página contendo um comportamento de servidor Atualizar registro ou Inserir registro. O banco de dados não pode efetuar a operação de atualização ou de inserção que o comportamento do servidor está tentando executar.

A seguir possíveis causas e soluções:

l O comportamento do servidor está tentando atualizar o campo autonumeração de uma tabela do banco de dados ou está tentando inserir um registro em um campo de autonumeração. Uma vez que os campos de autonumeração são preenchidos automaticamente pelo banco de dados, qualquer tentativa de preenche-los com valor resulta em falhas.

l Os dados que o comportamento de servidor está atualizando ou inserindo consiste no tipo incorreto de dados para o campo do banco de dados, como inserir uma data em um campo booleano (sim/não), inserir uma seqüência em um campo numérico ou inserir uma seqüência formatada incorretamente no campo Data/Hora.

800a0bcd–Either BOF or EOF is true

Este erro ocorre ao tentar visualizar uma página dinâmica em um navegador na web ou no modo Live Data.

O problema acontece quando a página tenta exibir os dados de um conjunto de registros vazio. Para resolver o problema, aplicar o comportamento de servidor Mostrar região ao conteúdo

 

 

 

 

Página 138 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 141: 1 Introducao

dinâmico a ser exibido na página, do seguinte modo:

1. Realçar o conteúdo dinâmico na página. 2. No painel Comportamentos de servidor, clique no botão de adição (+) e selecione Mostrar

região > Mostrar a região se o conjunto de registros não estiver vazio. 3. Selecione o conjunto de registros que estiver fornecendo o conteúdo dinâmico e clique em

OK. 4. Repetir as etapas 1 a 3 para cada elemento de conteúdo dinâmico da página.

Como solucionar mensagens de erro do ColdFusion

Esta seção descreve algumas mensagens de erro comuns do banco de dados geradas pelo ColdFusion e sugestões sobre como diagnostic á-las.

ColdFusion–Access Denied

Este erro ocorre quando o ColdFusion 4 ou 5 tenta gravar dados em um arquivo de banco de dados (como Microsoft Access ou Foxpro) que o ColdFusion está acessando através de uma fonte de dados. O erro normalmente ocorre quando o usuário tenta sobrescrever o arquivo através de FTP ou copiando sobre ele.

A solução é reciclar os serviços do ColdFusion conserta desativar a opção “Maintain Database Connection” de Fonte de Dados em Administrador de ColdFusion.

ColdFusion–Operation must use an updateable query error

Este erro ocorre quando o ColdFusion 4 ou 5 tenta executar uma página ColdFusion ao atualizar ou excluir um banco de dados do Microsoft Access (ou outro arquivo de banco de dados).

Este erro normalmente ocorre porque o ColdFusion faz tem permissões apropriadas no nível do sistema operacional da rede para armazenar no banco de dados.

Para solucionar este problema no Windows NT, clique em Iniciar >Configura ções > Painel de controle > Serviços. Clique duas vezes no serviço ColdFusion Application Server e anote a conta inicial. Normalmente, a conta padrão é a conta System. Em seguida, ir para a pasta que contém o arquivo do banco de dados e dar permissões totais expl ícitas à esta pasta. Mesmo se a pasta exibir “Todos” têm permissões totais, adicionar a conta de inicialiazação do ColdFusion.

 

 

 

 

 

 

Página 139 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 142: 1 Introducao

Como solucionar problemas de permissões

Se o banco de dados estiver localizado em computador com Windows NT, Windows 2000 ou Windows XP e você receber uma mensagem de erro ao tentar exibir uma página dinâmica em um navegador no modo Live Data, o erro pode ter ocorrido devido a um problema de permissão.

A seguir algumas possíveis mensagens de erro apontando para problema de permissão:

l Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC Microsoft Access 97 Driver] Couldn't use '(unknown)'; file already in use.

l Microsoft OLE DB Provider for ODBC Drivers (0x80004005) [Microsoft][ODBC Microsoft Access Driver] The Microsoft Jet database engine cannot open the file '(unknown)'. Esses arquivos são exclusivos de outro usuário ou é necessário permissão para visualizar os dados.

l Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC Microsoft Access 97 Driver] Couldn't lock file.

A conta do Windows tentando acessar o banco de dados não tem permissões suficientes. Pode ser a conta anônima do Windows (por padrão, IUSR_computername) ou uma conta específica de usuário se a página for protegida com validação de acesso.

É necessário alterar as permissões para dar à conta IUSR_computername as permissões apropriadas, de modo que o servidor web possa acessar o arquivo de banco de dados. Além disso, a pasta contendo o arquivo de banco de dados também deve ter certas permissões para gravar naquele banco de dados.

Se a página for acessada anonimamente, conceder à conta IUSR_computername controle total para acessar a pasta e o arquivo do banco de dados, conforme descrito no procedimento abaixo.

Além disso, se o caminho ao banco de dados for indicado por UNC (\\Server\Share), certifique-se de compartilhar a permissão de acesso total com a conta IUSR_computername com Share Permissions. Este passo é aplicável mesmo se o compartilhamento for feito no servidor web local.

Se você copiar o banco de dados de outro local, não poderá importar automaticamente as permissões de sua pasta de destino. Talvez seja preciso alterar as permissões para o banco de dados.

Para verificar ou alterar as permissões do arquivo de banco de dados:

1. No Windows Explorer, localizar o arquivo de banco de dados ou a pasta que contém o banco de dados, clique com o botão direito do mouse o arquivo ou a pasta e selecionar Propriedades.

2. Se você estiver usando Windows 2000, selecionar a guia Segurança e se estiver usando Windows NT, selecionar a guia Segurança e clique no botão Permissões.

Nota: Este passo é aplicável somente se houver um sistema de arquivos NTFS. Se for um sistema de arquivos FAT, a caixa de diálogo não terá a guia Segurança.

 

 

Página 140 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Page 143: 1 Introducao

3. Se a conta IUSR_computername não estiver listada na caixa de diálogo Permissões de arquivo nas contas do Windows, clique no botão Adicionar para adicioná-la.

4. Na caixa de diálogo Adicionar usuários e grupos, selecionar o nome do computador no menu pop-up Listar nomes de.

Nota: Se estiver usando Windows 2000, a caixa de diálogo é chamada de “Selecionar usuários, computadores ou grupos e o menu pop-up é chamado “Pesquisar: ”.

Uma lista de nomes de contas associadas ao computador é exibida. Se a conta IUSR não aparecer na listagem de nomes, clique no botão Exibir usuários.

Nota: O Windows 2000 não possui o botão Exibir usuários.

5. Selecione a conta IUSR_computername e clique em Adicionar. 6. Atribuir à conta IUSR permissões totais selecionando Controle total no menu pop-up Tipo

de acesso e clique em OK.

Para maior segurança, as permissões podem ser definidas de modo que Ler permissão fique desativado na pasta da web que contém o banco de dados. Não será permitido navegar pela pasta, mas as páginas da web poderão acessar o banco de dados.

Para obter mais informações sobre a conta IUSR e permissões do servidor web, consultar as notas técnicas na página de suporte da Macromedia (TechNotes):

l Como compreender a autenticação anônima e a conta IUSR l Como configurar permissões para servidor web IIS

 

Página 141 de 141Guia de introdução

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...