Curso Criiar web siites com o Dreamweaver Parrttee II 1. Introdução O Macromedia DreamWeaver é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que gostam do controlo da codificação manual HTML ou para os que preferem trabalhar num ambiente de edição visual, o DreamWeaver fornece ferramentas úteis para melhorar 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 preferir inserir códigos manualmente, no entanto, o DreamWeaver também inclui diversas ferramentas e recursos com esse fim. O DreamWeaver também ajuda o utilizador a construir aplicativos dinâmicos para a Wed, com suporte de base de dados utilizando linguagens de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP e PHP. 2. A área de trabalho Segue-se uma breve descrição das janelas e elementos da área de trabalho do DreamWeaver.
2..1.. Janeel lass,, barrrrass ee painééi iss Para mostrar ou esconder as barras, basta usar o comando View/Toolbars: A barra Standard apresenta alguns botões de comando, tais como: A barra Insert contém botões para inserção de vários tipos de objectos, como imagens, tabelas e camadas num documento. Cada objecto é uma parte do código HTML, que permite ao utilizador 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 objectos utilizando o menu Inserir em vez da barra Inserir: Se fizer clique em Commom, obterá outras barras: www.netprof.pt 2
Por exemplo, ao escolher Forms, obterá: A barra de ferramentas Document contém botões e menus pop-up que possibilitam diferentes visualizações da janela do documento (visualização do projecto 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á a ser criado e editado: O inspector de propriedades permite exibir e alterar várias propriedades do objecto ou texto seleccionado. Cada tipo de objecto possui diferentes propriedades: Por exemplo, se seleccionar uma imagem, obterá, entre outras opções: www.netprof.pt 3
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 gerir os arquivos e as pastas que compõem o site. 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, inspectores e janelas que não são mostrados nesta secção, como o painel Histórico e o inspector de código. Para abrir os painéis, inspectores e janelas do DreamWeaver, utilize o menu Janela: www.netprof.pt 4
No painel Code tem acesso aos códigos HTML da página: Nota: Consulte o curso sobre HTML, publicado no NetProf. Pode dividir a janela em duas: Design e HTML: 3. Criar o primeiro web b site Esta secção oferece uma série de breves dicas, as quais deve seguir através do processo de criação de um site estático simples utilizando as ferramentas de criação visuais do Macromedia DreamWeaver. www.netprof.pt 5
3..1.. Parra ccrri iarr um ssi itee eessttátti icco Para criar um site estático, siga os seguintes passos: 1. Planear e elaborar. 2. Criar as páginas. 3. Criar um layout e configurar as páginas. 4. Adicionar conteúdo às suas páginas. 5. Criar links entre as páginas. 6. Publicar o site. 3..2.. Conffi igurrarr um ssi ittee loccal l l 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 no seu computador local, enviar os arquivos a um servidor temporário (staging server) ou utilizar um disco anexo como o disco local). No DreamWeaver, a palavra site é utilizada como abreviação para os seguintes itens: Site da web: conjunto de páginas num servidor, que pode ser visualizado pelo visitante através de um navegador (browser) da web, como o Internet Explorer. Site remoto: arquivos contidos no servidor que compõe um site da Web, do ponto de vista do seu autor em vez do ponto de vista de um visitante. Site local: arquivos no disco local que correspondem aos arquivos no site remoto. Os arquivos são editados no seu disco local e carregados no site remoto. Normalmente, é preciso planear um site da Web antes de cria-lo: calcule o número de páginas, que conteúdo será exibido em cada página e como as páginas serão vinculadas entre si. 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. www.netprof.pt 6
3..3.. Parra deeffi inirr um ssi itee Para definir um novo web site, deverá: 1. Escolher Site/New Site. A caixa de diálogo Site Definition é exibida. Se a caixa de diálogo estiver a exibir a guia Advanced, fazer clique em Basic. 2. O primeiro ecrã do assistente de definição do site aparece, pedindo ao utilizador que digite um nome para o site. Na caixa de texto, digite um nome para identificar o site no DreamWeaver: 3. Fazer clique em Next, para prosseguir ao passo seguinte. O ecrã seguinte do assistente será exibido, onde é perguntando se deseja trabalhar com uma tecnologia de servidor. Seleccionar a opção No para indicar que, no momento, este site é um site estático, sem páginas dinâmicas: www.netprof.pt 7
Nota: Para configurar um site para criar um aplicativo para a web, é preciso seleccionar 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. 4. Fazer clique em Next para passar ao passo seguinte. O ecrã seguinte do assistente aparece, perguntando se desejar trabalhar com os seus arquivos. Seleccionar a primeira opção, para editar as cópias locais no seu computador e, em seguida, efectuar o upload para o servidor quando terminar: 5. Em baixo, 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 exacto se pesquisar a pasta em vez de digitar o caminho, portanto, deverá fazer clique no ícone da pasta próximo à caixa de texto. 6. Na caixa de diálogo Browse, escolha a pasta raiz local do site, comece a navegar até uma pasta no seu disco local, no qual todos os sites estão armazenados. 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. www.netprof.pt 8
Se ainda não houver uma pasta de sites, criar uma agora (com o botão de criação de pastas). Denomine a pasta como Sites. O local indicado para a pasta de sites depende do sistema operativo instalado no seu computador. 7. Fazer clique em Next para prosseguir ao passo seguinte. O ecrã seguinte do assistente surgirá a perguntar se deseja conectar-se ao servidor remoto. Por enquanto, escolha None no menu pop-up: 8. Fazer clque em Next para prosseguir ao passo seguinte. O ecrã seguinte do assistente abre-se exibindo um resumo das configurações. 9. Fazer clique em Done. 10. 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. Fazer clique em OK para o DreamWeaver criar o cache do site. 11. O painel Site exibirá agora a nova pasta raiz local para o site actual junto com um ícone para que o utilizador possa visualizar as unidades locais em forma de árvore hierárquica. O ícone é denominado Área de trabalho no Windows: www.netprof.pt 9
O painel Site normalmente exibe todos os arquivos e pastas do site, mas por enquanto o seu site não contém nenhum arquivo ou pastas. Quando houver arquivos num site, a lista de arquivos no painel Site actua como um gestor de arquivos, permitindo ao utilizador copiar, colar, apagar, mover e abrir arquivos da mesma maneira que na área de trabalho do computador. Se houver um conjunto de arquivos HTML locais que deseja utilizar para criar um site da Web, é possível utilizar o navegador de arquivos no painel Site para copiar esses arquivos à pasta recém-criada do site. Na próxima parte iremos demonstrar como criar uma nova página, ajustar o seu layout, adicionar e formatar texto, inserir fundos, assim como inserir texto flash e botões flash. www.netprof.pt 10