160
Princípios básicos do Dreamweaver Aprenda como utilizar a documentação e outros recursos do Dreamweaver, além de configurar a área de trabalho do Dreamweaver de acordo com suas preferências de trabalho. Planeje e configure um site e comece a criar páginas. Esta seção contém os seguintes capítulos: l Bem - vindo ao Dreamweaver l Explora çã o da á rea de trabalho l Como planejar e configurar o seu site l Como gerenciar o seu site l Configura çã o de um documento Bem-vindo ao Dreamweaver O Dreamweaver MX da Macromedia é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que preferem o 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 do Dreamweaver permitem criar páginas, de modo rápido, sem que seja necessário escrever uma única linha de código. É possível visualizar todos os elementos ou propriedades do site e arrastá-los de um painel fácil de usar diretamente para um documento. Dinamize o fluxo de trabalho de desenvolvimento de sites através da criação e edição das imagens no Fireworks da Macromedia, em seguida importando para o Dreamweaver ou incluindo objetos criados no Flash da Macromedia diretamente no Dreamweaver. O Dreamweaver também inclui muitos recursos e ferramentas de codifica ção, como as ferramentas de edição de c ódigo no modo de na visualização de código (por exemplo: codificação por cores e preenchimento de tags), material de referência sobre HTML, CSS, JavaScript, CFML, ASP e JSP e um depurador JavaScript. A tecnologia de codificação HTML Macromedia Roundtrip permite importar os documentos HTML codificados manualmente sem reformatar o código e, em seguida, pode-se optar por reformatar o código aplicando um estilo de formatação preferido. A última versão do Dreamweaver incorpora e expande todos os recursos do Macromedia UltraDev para ajudá-lo a criar aplicativos din âmicos para a Web com base em banco de dados, utilizando linguagens de servidor, como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP e PHP. O Dreamweaver pode ser inteiramente personalizado. Crie os seus próprios objetos e comandos, modifique os atalhos de teclado e adicione códigos JavaScript para ampliar ainda mais os recursos do Dreamweaver com novos comportamentos, inspetores de propriedades e relatórios de site. Página 1 de 160 Princ í pios b ásicos do Dreamweaver 11/10/2002 file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configura ções ...

3 Principios basicos do DW

Embed Size (px)

Citation preview

Page 1: 3 Principios basicos do DW

Princípios básicos do Dreamweaver

Aprenda como utilizar a documentação e outros recursos do Dreamweaver, além de configurar a área de trabalho do Dreamweaver de acordo com suas preferências de trabalho. Planeje e configure um site e comece a criar páginas.

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

l Bem-vindo ao Dreamweaver l Exploração da área de trabalho l Como planejar e configurar o seu site l Como gerenciar o seu site l Configuração de um documento

Bem-vindo ao Dreamweaver

O Dreamweaver MX da Macromedia é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que preferem o 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 do Dreamweaver permitem criar páginas, de modo rápido, sem que seja necessário escrever uma única linha de código. É possível visualizar todos os elementos ou propriedades do site e arrastá-los de um painel fácil de usar diretamente para um documento. Dinamize o fluxo de trabalho de desenvolvimento de sites através da criação e edição das imagens no Fireworks da Macromedia, em seguida importando para o Dreamweaver ou incluindo objetos criados no Flash da Macromedia diretamente no Dreamweaver.

O Dreamweaver também inclui muitos recursos e ferramentas de codificação, como as ferramentas de edição de código no modo de na visualização de código (por exemplo: codificação por cores e preenchimento de tags), material de referência sobre HTML, CSS, JavaScript, CFML, ASP e JSP e um depurador JavaScript. A tecnologia de codificação HTML Macromedia Roundtrip permite importar os documentos HTML codificados manualmente sem reformatar o código e, em seguida, pode-se optar por reformatar o código aplicando um estilo de formatação preferido.

A última versão do Dreamweaver incorpora e expande todos os recursos do Macromedia UltraDev para ajudá-lo a criar aplicativos dinâmicos para a Web com base em banco de dados, utilizando linguagens de servidor, como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP e PHP.

O Dreamweaver pode ser inteiramente personalizado. Crie os seus próprios objetos e comandos, modifique os atalhos de teclado e adicione códigos JavaScript para ampliar ainda mais os recursos do Dreamweaver com novos comportamentos, inspetores de propriedades e relatórios de site.

 

 

 

Página 1 de 160Princípios básicos do Dreamweaver

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

Page 2: 3 Principios basicos do DW

Este capítulo contém as seguintes seções:

Introdução ao Dreamweaver

Fluxo de trabalho para criação de um site da Web

Onde iniciar

Convenções tipográficas

Novidades do Dreamweaver MX

Recursos de tecnologias da Web e HTML

Introdução ao Dreamweaver

O Dreamweaver contém vários recursos para ajudá-lo a aprender rapidamente os recursos do programa e tornar-se um experiente criador de páginas e sites da Web. Estes recursos incluem um manual impresso, Guia de introdução, o sistema de ajuda on -line e tutoriais. Além disso, dicas, notas técnicas, exemplos e informações atualizadas com regularidade podem ser encontrados no centro de suporte do Dreamweaver, no site da Macromedia na Web.

Guia de introdução

O Guia de introdução foi elaborado para orientá-lo através dos procedimentos da criação de um site da Web simples e funcional utilizando o Dreamweaver. O guia destina-se aos usuários que já criaram páginas da Web, mas não estão familiarizados com alguns aspectos do Dreamweaver. Inclui capítulos sobre a cria ção e edição de páginas estáticas simples, edi ção manual de código e cria ção de aplicativos dinâmicos para a Web. Este guia é fornecido como um manual impresso, que faz parte do sistema de ajuda, e também no formato de arquivo PDF.

Tutoriais

Os tutoriais contêm descrições mais detalhadas sobre determinados tópicos e fornecem mais informações sobre áreas específicas do que o Guia de introdução. Ao trabalhar com os tutoriais, você aprenderá a editar um exemplo de site da Web, utilizando alguns dos recursos mais avançados e utilitários do Dreamweaver. Os tutoriais estão disponíveis no Guia de introdução

 

 

 

 

   

Página 2 de 160Princípios básicos do Dreamweaver

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

Page 3: 3 Principios basicos do DW

impresso, na Ajuda do Dreamweaver (no menu Ajuda Dreamweaver, selecione Tutoriais), e como parte do arquivo PDF do Guia de introdução.

Se você já estiver familiarizado com os recursos de projeto do Dreamweaver mas quiser saber mais sobre a cria ção de aplicativos para a Web, inicie executando os tutoriais de páginas dinâmicas, que ensinam a criar páginas interativas que se conectam a bancos de dados.

Ajuda do Dreamweaver

A ajuda do Dreamweaver, otimizada para uso on-line, contém informações completas sobre todos os recursos do Dreamweaver. A ajuda do Dreamweaver é exibida no visualizador da ajuda do sistema operacional: Ajuda HTML da Microsoft ou Apple Help (Macintosh). Em ambas as plataformas, as informações necessárias podem ser encontradas de quatro maneiras:

Conteúdo permite exibir todas as informações organizadas por assunto. Clique nas entradas de-nível superior para exibir os subtópicos.

O índice, como aqueles impressos tradicionalmente, permite procurar termos e conceitos específicos.

Pesquisar permite localizar uma seqüência de caracteres em qualquer parte do texto do sistema de ajuda.

Ajuda contextual possibilita abrir um tópico relevante da ajuda a partir de cada caixa de diálogo, painel e inspetor. Para exibir a ajuda contextual, clique no botão Ajuda da caixa de diálogo, escolha Ajuda no menu Opções, na barra de título de um grupo de painéis, ou clique no ícone de ponto de interrogação em um inspetor ou outro tipo de janela.

Cada tópico da Ajuda contém botões que podem ser clicados para que se possa passar de um tópico a outro. Os botões seta à direita e à esquerda levam ao próximo tópico ou ao anterior em uma seção (de acordo com a ordem dos tópicos no conteúdo).

Extensão dos recursos do Dreamweaver

   

 

 

Página 3 de 160Princípios básicos do Dreamweaver

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

Page 4: 3 Principios basicos do DW

O sistema de ajuda Extensão dos recursos do Dreamweaver contém informações sobre o modelo de objeto de documento (DOM) e interfaces de programação de aplicativos (APIs) do Dreamweaver, que permitem aos programadores de JavaScript e C criar extensões para o programa.

Centro de suporte do Dreamweaver

Para que o usuário possa aproveitar ao máximo o Dreamweaver, é necessário consultar um centro de suporte na Web: O site do Centro de suporte do Dreamweaver na Web, é atualizado regularmente com as informações mais recentes sobre o Dreamweaver, além de conter recomendações de usuários experientes, exemplos, dicas, atualizações e informações sobre os tópicos avançados. Verifique o site da Web com freqüência para conhecer as novidades sobre o Dreamweaver e saber como obter o melhor rendimento do programa.

Central para designer e desenvolvedor

O Centro de design e programação da Macromedia, fornece ferramentas, tutoriais e outros recursos para os produtos da Macromedia.

Fóruns on-line do Dreamweaver

Compartilhe questões técnicas e sugestões úteis com outros usuários do Dreamweaver visitando os fóruns on-line do Dreamweaver. As informações sobre acesso aos fóruns estão no site da Macromedia na Web.

Atalhos de teclado

Os diagramas que mostram todos os atalhos de teclado na configuração padrão do Dreamweaver estão disponíveis no site da Macromedia na Web.

   

 

 

   

 

 

Página 4 de 160Princípios básicos do Dreamweaver

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

Page 5: 3 Principios basicos do DW

Fluxo de trabalho para criação de um site da Web

Há diversos métodos possíveis para se criar um site da Web. No fluxo de trabalho apresentado nesta documentação, o usuário inicia definindo os objetivos e as estratégias do site. Se você estiver desenvolvendo um aplicativo para a Web, será preciso configurar os servidores e bancos de dados de acordo com a necessidade. Em seguida, o usuário projetará a aparência do site. Quando o projeto estiver completo, serão criados o site e as páginas de código, adicionando o conteúdo e a interatividade. Em seguida, as páginas serão vinculadas e a funcionalidade do site será testada para verificar se atende aos objetivos definidos. É possível incluir também páginas dinâmicas no site. No final do ciclo, o site é publicado em um servidor. Muitos programadores efetuam ainda uma manuten ção periódica para assegurar que o site permaneça atualizado e funcional.

Para facilitar a obtenção de informações necessárias ao desenvolvimento de sites da Web, a documentação Como utilizar o Dreamweaver é dividida em seções amplas, que oferecem exemplos do desenvolvimento da Web: planejamento, criação, desenvolvimento, teste, publicação e manutenção do site.

Sobre o planejamento do site

O cuidado no planejamento e na organização do site desde o in ício pode economizar tempo posteriormente. A organização do site não consiste apenas em determinar onde os arquivos serão armazenados, mas também examinar os requisitos e objetivos do site, bem como o perfil do público-alvo. Além disso, é necessário considerar certos requisitos técnicos, como o acesso dos usuários e também as restri ções do navegador, dos plug-ins e de download.

Quando as informações estiverem organizadas e a estrutura tiver sido determinada, é possível iniciar a cria ção do seu site.

l Determine a estratégia a ser adotada e as questões a serem consideradas durante o planejamento do site. Consulte o Como planejar e configurar o seu site.

l Utilize o mapa do site do Dreamweaver para configurar a estrutura organizacional do site. No painel Site, é possível adicionar, excluir e renomear arquivos e pastas para alterar a organização de acordo com as suas necessidades. Consulte o Como planejar e configurar o seu site e Como gerenciar o seu site.

l Inicie criando páginas simples que poderão se tornar mais complexas posteriormente. Na caixa de diálogo Novo documento, crie novas páginas em branco ou baseadas em projetos de página predefinidos. Consulte o Configuração de um documento.

Se você fizer parte de uma equipe de desenvolvimento da Web, os tópicos a seguir podem ser de interesse:

l Para configurar um sistema para evitar que os membros da equipe substituam os arquivos, veja Como utilizar as opções de devolução e retirada de arquivos.

l Para utilizar as Design Notes para comunicar-se com os membros da equipe da Web, veja Como utilizar as Design Notes .

   

   

Página 5 de 160Princípios básicos do Dreamweaver

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

Page 6: 3 Principios basicos do DW

Sobre a configuração de um aplicativo para a Web

Cada vez mais os sites da Web contêm páginas dinâmicas que permitem aos visitantes exibir as informações armazenadas em bancos de dados. Além disso, alguns visitantes podem adicionar e editar novas informações nos bancos de dados. Para criar essas páginas, é necessário executar várias etapas preparatórias.

l Configurar um servidor da Web e um servidor de aplicativos, em seguida, criar ou modificar um site do Dreamweaver. Consulte o Configuração de um aplicativo para a Web.

l Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo servidor de aplicativos, consulte o Conexões de banco de dados para programadores ColdFusion, Conexões de banco de dados para programadores ASP.NET, Conexões de banco de dados para programadores ASP, Conexões de banco de dados para programadores JSP ou Conexões de banco de dados para programadores PHP.

Sobre a codificação manual

A codificação manual de páginas não se constitui propriamente em uma etapa do fluxo de trabalho durante a cria ção de páginas em um site da Web. O Dreamweaver fornece ferramentas de edição visual fáceis de usar, além de ferramentas de codificação sofisticadas. Você pode utilizar um dos métodos, ou ambos, para criar e editar suas páginas.

l É possível trabalhar em um ambiente de codificação sem utilizar as ferramentas visuais. Essas ferramentas o ajudarão a criar e editar o código, formatá-lo, verificar sua compatibilidade com os padrões e depurar códigos JavaScript. Consulte o Configuração do seu ambiente de codificação, Codificação no Dreamweaver e Otimização e depuração do código.

l É possível também utilizar as ferramentas de codificação no modo de visualização do projeto, que é o ambiente de criação visual do Dreamweaver. Consulte o Edição do código na visualização do projeto.

Sobre a criação de páginas da Web

Muitos projetos de design da Web começam pela criação de “roteiros” visuais ou fluxogramas que se tornam páginas de exemplo. Utilize o Dreamweaver para criar páginas de exemplo ou “protótipos” à medida que trabalha em um projeto final. Os protótipos-geralmente mostram o layout do desenho, a navegação do site, os componentes técnicos, os temas, a cor e as

   

 

 

 

 

Página 6 de 160Princípios básicos do Dreamweaver

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

Page 7: 3 Principios basicos do DW

imagens gráficas ou outros elementos de mídia, mas não contêm os elementos finais das páginas.

l As ferramentas de edição de tabelas e a visualização de layout no Dreamweaver permitem projetar rapidamente as páginas da Web, através do desenho e da reorganização da estrutura da página. Consulte o Apresentação do conteúdo com tabelas e Definição do layout de páginas na visualização de layout.

l Para exibir vários documentos simultaneamente em um navegador da Web, é possível criar documentos utilizando molduras. Consulte o Utilização de molduras.

Sobre a inclusão do conteúdo

Com o Dreamweaver, é possível adicionar facilmente diversos tipos de conteúdo às páginas da Web. Adicione propriedades e elementos de projeto, como texto, imagens, cores, filmes, som e outras formas de mídia.

l Digite diretamente em um documento do Dreamweaver ou importe o texto de outros documentos e, em seguida, formate o texto utilizando o inspetor de propriedades do Dreamweaver ou o painel Estilos HTML. É possível criar facilmente as suas pr óprias folhas de estilos em cascata (Cascading Style Sheets). Consulte o Como inserir e formatar texto.

l O painel Propriedades permite organizar facilmente as propriedades em um site. A maioria das propriedades pode ser arrastada diretamente do painel Propriedades para um documento do Dreamweaver. Veja Como utilizar o painel Propriedades.

l Insira imagens, incluindo imagens cambiáveis, mapas de imagens e imagens compartilhadas do Fireworks. Utilize as ferramentas de alinhamento, para posicionar as imagens em uma página. Consulte o Como inserir imagens e Integração do Dreamweaver com outros aplicativos.

l Insira outros tipos de mídia numa página da Web, como filmes Flash, Shockwave e QuickTime, som e miniaplicativos. Consulte o Como inserir m ídia.

l Certifique-se de que seu conteúdo esteja acessível para pessoas com deficiência física. Consulte o Dreamweaver e Acessibilidade.

Sobre interatividade e animação

Muitas páginas da Web são estáticas e contêm apenas texto e imagens. O Dreamweaver permite ir além das páginas estáticas, adicionando interatividade e animações para atrair o interesse dos visitantes. É possível fornecer comentários aos visitantes à medida que navegam pelo site, demonstrar conceitos, animar elementos da página. Em resumo, você poderá criar uma maior interatividade com o visitante do site.

Há diversas maneiras de adicionar interatividade e animação às páginas utilizando o Dreamweaver:

l Utilize os comportamentos para realizar tarefas em resposta a determinados eventos,

 

 

   

Página 7 de 160Princípios básicos do Dreamweaver

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

Page 8: 3 Principios basicos do DW

como o realce de um botão quando o visitante passar o ponteiro sobre ele, a validação de um formulário quando o visitante clique no botão Enviar ou a abertura de uma segunda janela do navegador quando a página principal terminar de ser carregada. Consulte o Como utilizar comportamentos JavaScript.

l Utilize as linhas de tempo para criar animações que dispensam plug-ins, controles ActiveX ou Java. As linhas de tempo utilizam HTML dinâmico para alterar a posição de uma camada ou a origem de uma imagem ao longo do tempo, ou para chamar certas a ções de comportamento automaticamente após a carga da página. Consulte o Animação de camadas.

Sobre a conexão das páginas do site

Páginas individuais não compõem um site. É necessário vinculá-las através da criação de links HTML e reutilizando conteúdo para que as páginas tenham uma aparência uniforme.

l Com o Dreamweaver, é possível criar links HTML padrão, incluindo links âncora e de correio eletrônico ou configurar facilmente sistemas de navegação gráfica, como menus de salto e barras de navegação. Consulte o Links e navegação.

l Os modelos e arquivos de biblioteca do Dreamweaver permitem aplicar conteúdo reutilizável e desenhos de páginas no site com facilidade. Novas páginas podem ser criadas com base em um modelo do Dreamweaver e, em seguida, seu layout poderá ser atualizado automaticamente quando o modelo for alterado. Consulte o Como gerenciar as propriedades do site, bibliotecas e modelos.

Sobre os testes e a publicação do seu site

O seu site está completo e pronto para ser publicado, mas antes de publicá-lo em um servidor é necessário testá-lo. Dependendo do tamanho do projeto, das especificações do cliente e dos tipos de navegadores que os visitantes utilizarão, talvez seja necessário mover o site para um servidor de teste onde possa ser testado e editado. Depois que as correções forem feitas, o site poderá ser publicado onde o público possa acessá-lo. Após a publicação do site, estabeleça um ciclo de manutenção para assegurar a qualidade deste, responda aos comentários dos usuários e atualize as informações do site.

Utilize os seguintes recursos do Dreamweaver para testar e publicar um site:

l Para adicionar novas tags em uma página ou corrigir o seu código, utilize o painel Referência do Dreamweaver, para pesquisar código JavaScript, CSS e HTML. Veja Acesso a referências de linguagem.

l Utilize o Depurador JavaScript para ajudar a corrigir erros de JavaScript no seu c ódigo. O depurador permite definir pontos de interrupção no código e, depois, visualizar o código quando uma página for depurada no Dreamweaver. Veja Como utilizar o depurador JavaScript.

l Execute verificações de navegador e plug-in, teste e corrija links em seus documentos e execute relatórios de site para verificar arquivos HTML quanto a erros comuns. Consulte o

 

 

 

 

Página 8 de 160Princípios básicos do Dreamweaver

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

Page 9: 3 Principios basicos do DW

Como testar um site. l No painel Site do Dreamweaver, você obterá várias ferramentas para ajudar a gerenciar o

site, transferir arquivos de e para um servidor remoto, configurar um processo de devolução/retirada, para evitar que os arquivos sejam substituídos, e sincronizar os arquivos nos seus sites local e remoto. Consulte o Como planejar e configurar o seu site.

Sobre a criação de páginas dinâmicas

No Dreamweaver, é possível definir várias origens de conteúdo dinâmico, inclusive conjuntos de registros extraídos de bancos de dados, parâmetros de formulário e componentes de software reutilizáveis para Java. Para adicionar o conteúdo dinâmico a uma página, basta arrastá-lo até a página.

A página pode ser definida para exibir um ou muitos registros de uma só vez, mais de uma página de registros, adicionar links especiais para que se possa passar de uma página de registros à próxima (e retornar) e criar contadores de registros, para ajudar os usuários a controlar os registros.

l Se você não estiver familiarizado com a criação de aplicativos para a Web no Dreamweaver, aprenda a utilizar o programa para criar páginas dinâmicas. Consulte o Otimização da área de trabalho para desenvolvimento visual e Fluxo de trabalho do Dreamweaver para projetos de páginas dinâmicas.

l Defina e exiba o conteúdo dinâmico nas suas páginas. Consulte o Como armazenar e recuperar dados para a página, Definição das fontes de conteúdo dinâmico, Como adicionar conteúdo dinâmico às páginas da Web e Como exibir os registros de bancos de dados.

l Incorpore aplicativos ou l ógica empresarial utilizando tecnologias avançadas, como os componentes ColdFusion e serviços da Web. Consulte o Como utilizar os componentes ColdFusion e Como utilizar os serviços da Web.

l Se necessitar de mais flexibilidade, crie os seus próprios comportamentos de servidor e formulários interativos. Consulte o Como adicionar comportamentos de servidor personalizados e Criação de formulários interativos.

Sobre o desenvolvimento rápido de aplicativos

O Dreamweaver oferece várias ferramentas de desenvolvimento rápido de aplicativos (RAD, Rapid Application Development), incluindo comportamentos de servidor e objetos de aplicativo, que ajudam a criar aplicativos para a Web sofisticados, sem a necessidade de escrever nenhum código do servidor.

l Crie rapidamente páginas que efetuam buscas e modificam bancos de dados, além de exibir os resultados da pesquisa. Consulte o Como criar páginas-mestras/detalhes, o Como criar páginas que realizam buscas em bancos de dados e o Como criar páginas para modificar bancos de dados.

 

 

 

 

Página 9 de 160Princípios básicos do Dreamweaver

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

Page 10: 3 Principios basicos do DW

l Ofereça segurança restringindo o acesso às páginas. Consulte o Como criar páginas que restringem o acesso ao site.

Onde iniciar

A Ajuda do Dreamweaver contém informações para os leitores em vários níveis. Para tirar o melhor proveito desta documentação, inicie lendo as partes mais adequadas ao seu nível de experiência.

Para iniciantes em desenho da Web:

1. Inicie lendo os dois primeiros capítulos do Guia de introdução: Introdução e Como criar seu primeiro site da Web com o Dreamweaver. Se alguma seção desses capítulos lhe parecer muito avançada ou complexa, ignore-a e volte a ela posteriormente.

2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho, Como planejar e configurar o seu site, Como gerenciar o seu site e Configuração de um documento.

3. Aprenda sobre layouts de páginas no Definição do layout de páginas na visualização de layout.

4. Para saber como formatar texto e incluir imagens nas páginas, consulte o Como inserir e formatar texto e o Como inserir imagens.

5. Isso é tudo que você precisa para começar a produzir sites da Web de alta qualidade. Quando estiver pronto para aprender a utilizar as ferramentas mais avançadas, poderá continuar lendo os capítulos restantes sobre as páginas estáticas, na ordem em que são apresentados. Talvez seja mais conveniente adiar a leitura dos capítulos sobre as páginas dinâmicas para quando estiver mais familiarizado com a cria ção de páginas da Web.

Para os designers da Web experientes que ainda não trabalharam com o Dreamweaver:

1. Inicie lendo os dois primeiros capítulos do Guia de introdução: Introdução e Como criar seu primeiro site da Web com o Dreamweaver.

2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho para obter mais detalhes sobre a interface do usuário do Dreamweaver.

3. Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Como planejar e configurar o seu site e Como gerenciar o seu site, examine esses capítulos para saber como os conceitos já conhecidos são implementados no Dreamweaver. Dê atenção especial às seções que tratam da utilização do Dreamweaver para configurar um novo site.

4. Siga as etapas em qualquer tutorial que lhe interesse, para saber mais sobre como utilizar o Dreamweaver para executar determinadas tarefas. Para exibir os tutoriais no sistema de ajuda, escolha Ajuda> Tutoriais.

5. O Como inserir e formatar texto e o Como inserir imagens contêm informações úteis e detalhadas sobre a utilização do Dreamweaver para criar páginas HTML básicas.

6. Consulte a visão geral, no início de cada um dos outros capítulos, para verificar se os tópicos correspondentes são de seu interesse.

Para os codificadores manuais experientes:

1. Inicie lendo o primeiro e o terceiro capítulos do Guia de introdução: Introdução e Como editar códigos no Dreamweaver.

2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho para obter mais detalhes sobre a interface do usuário do Dreamweaver.

   

Página 10 de 160Princípios básicos do Dreamweaver

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

Page 11: 3 Principios basicos do DW

3. Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Como planejar e configurar o seu site e Como gerenciar o seu site, examine esses capítulos para saber como os conceitos já conhecidos são implementados no Dreamweaver. Dê atenção especial às seções que tratam da utilização do Dreamweaver para configurar um novo site.

4. Para mais detalhes sobre codificação com o Dreamweaver, consulte o Configuração do seu ambiente de codificação, Codificação no Dreamweaver, Otimização e depuração do código e Edição do código na visualização do projeto.

5. Consulte a visão geral, no início de cada um dos outros capítulos, para verificar se os tópicos correspondentes são de seu interesse.

Para os designers da Web experientes, que já estão familiarizados com o Dreamweaver, e desejam aprender a criar páginas dinâmicas:

1. Inicie lendo o primeiro, quarto e quinto capítulos do Guia de introdução: Introdução, Como compreender os aplicativos para a Web e Como desenvolver um aplicativo para a Web no Dreamweaver MX.

2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho para obter mais detalhes sobre novos aspectos da interface do usuário do Dreamweaver.

3. Para configurar servidores da Web e de aplicativos, consulte o Configuração de um aplicativo para a Web.

4. Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo servidor de aplicativos, consulte o Conexões de banco de dados para programadores ColdFusion, Conexões de banco de dados para programadores ASP.NET, Conexões de banco de dados para programadores ASP, Conexões de banco de dados para programadores JSP ou Conexões de banco de dados para programadores PHP.

5. Consulte a visão geral, no início de cada um dos outros capítulos, para verificar se os tópicos correspondentes são de seu interesse.

6. Para personalizar o Dreamweaver manualmente, consulte o item “Como personalizar o Dreamweaver”, no centro de suporte da Macromedia. Se desejar criar extensões para o Dreamweaver, consulte Extensão dos recursos do Dreamweaver (Ajuda > Extensão dos recursos do Dreamweaver).

Para os desenvolvedores de aplicativos para a Web que não utilizaram o Dreamweaver ou o UltraDev:

1. Inicie pela leitura r ápida do Guia de introdução para familiarizar-se com os conceitos básicos do Dreamweaver.

2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho para obter mais detalhes sobre a interface do usuário do Dreamweaver.

3. Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Como planejar e configurar o seu site e Como gerenciar o seu site, examine esses capítulos para saber como os conceitos já conhecidos são implementados no Dreamweaver. Dê atenção especial às seções que tratam da utilização do Dreamweaver para configurar um novo site.

4. Siga as etapas em qualquer tutorial que lhe interesse, para saber mais sobre como utilizar o Dreamweaver para executar determinadas tarefas. Para exibir os tutoriais no sistema de ajuda, escolha Ajuda > Tutoriais.

5. Para configurar servidores da Web e de aplicativos utilizando o Dreamweaver, consulte o Configuração de um aplicativo para a Web.

6. Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo servidor de aplicativos, consulte o Conexões de banco de dados para programadores ColdFusion, Conexões de banco de dados para programadores ASP.NET, Conexões de banco de dados para programadores ASP, Conexões de banco de dados para programadores JSP ou Conexões de banco de dados para programadores PHP.

7. Consulte a visão geral, no início de cada um dos outros capítulos, para verificar se os tópicos correspondentes são de seu interesse.

Para os desenvolvedores de aplicativos para a Web que utilizaram o UltraDev 4:

Página 11 de 160Princípios básicos do Dreamweaver

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

Page 12: 3 Principios basicos do DW

1. Inicie pela leitura de Novidades do Dreamweaver MX. 2. Na ajuda do Dreamweaver, consulte o Exploração da área de trabalho para obter mais

detalhes sobre novos aspectos da interface do usuário do Dreamweaver. 3. Para personalizar o Dreamweaver manualmente, consulte o item “Como personalizar o

Dreamweaver”, no centro de suporte da Macromedia. Se desejar criar extensões para o Dreamweaver, consulte Extensão dos recursos do Dreamweaver (Ajuda > Extensão dos recursos do 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 de 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.

Novidades do Dreamweaver MX

O Dreamweaver MX contém uma grande variedade de novos recursos, como os modelos aprimorados, para auxiliar os designers visuais, e muitos novos recursos de codificação. O Dreamweaver também inclui agora todas as funcionalidades para desenvolvimento de aplicativos do Dreamweaver UltraDev 4, além de oferecer vários outros recursos novos, inclusive uma área de trabalho centralizada no código, derivada do Macromedia ColdFusion Studio, um melhor código em tempo de execução e suporte às tecnologias de aplicativos para a Web mais recentes.

Controle total sobre o código e o projeto

É possível criar o site desejado de forma personalizada utilizando as ferramentas de projeto do MX ou o ambiente avançado de codificação dos Dreamweaver.

O novo layout da área de trabalho integrada fornece um ambiente mais familiar, apresentando uma interface de múltiplos documentos (MDI, Multiple Document Interface) que

 

 

 

 

 

 

Página 12 de 160Princípios básicos do Dreamweaver

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

Page 13: 3 Principios basicos do DW

inclui painéis inteiramente encaixáveis e janelas de documento com guias.

No Dreamweaver MX o gerenciamento de painéis do Macromedia MX, é compatível com o funcionamento dos painéis no Macromedia Flash MX e no Fireworks MX. Agrupe os painéis encaixáveis, que podem ser reduzidos, e expanda ou reduza-os conforme a necessidade para que o fluxo de trabalho seja altamente configurável e homogêneo.

Os exemplos de componentes da Web pré-desenhados incluem layouts profissionais para adiantar os seus projetos, bem como bibliotecas de funções JavaScript, que permitem ter acesso à sofisticada interatividade de cliente, sem precisar ler centenas de páginas de manuais.

Modelos aprimorados do Dreamweaver permitem configurar regras sofisticadas para que os colaboradores possam inserir conteúdo sem comprometer o desenho do site. A herança de modelos permite um controle mais personalizado do layout, e as regiões editáveis possibilitam maior flexibilidade às contribuições dos colaboradores.

O assistente de definição de sites permite configurar o site de forma rápida é fácil, tanto para criar um site dinâmico pela primeira vez quanto para configurar uma conta junto ao provedor Internet.

Sugestões de código fornecem acesso fácil aos menus personalizados que mostram os atributos de tags adequados, às propriedades dos métodos, aos parâmetros das funções e aos estilos CSS durante a edição na visualização de código.

Barra de inserção personalizável permite acesso rápido aos objetos e comportamentos no Dreamweaver MX e pode ser inteiramente extensível.

A barra de ferramentas do documento poder ser agora personalizada para atender às suas necessidades e preferências, utilizando XML e JavaScript.

O explorador de arquivos foi integrado ao painel Site, permitindo a busca de propriedades e arquivos na área de trabalho e nos volumes da rede, sem precisar sair do Dreamweaver para utilizar o explorador de arquivos original do sistema operacional.

Painel de respostas estabelece a conexão direta com os recursos on-line do Centro de suporte da Macromedia. É possível recuperar novos conteúdos à vontade, para garantir o seu acesso freqüente às mais recentes dicas e truques.

Manipulação e edição aprimorada de tabelas geram um código melhor para as edições de tabelas nas visualizações padrão e de layout, dinamizando assim a manipulação dos atributos e assegurando que todos os layouts estejam o mais integrado possivel, sem comprometer a compatibilidade entre os diferentes navegadores.

Menus pop-up JavaScript em cascata agora podem ser criados diretamente no Dreamweaver MX; esse recurso estava disponível anteriormente apenas no Fireworks.

Sinalização da sintaxe por cores pode ser agora inteiramente configurada e personalizada, de acordo com as suas necessidades.

A barra de ferramentas padrão permite o acesso rápido aos comandos utilizados com freqüência (Abrir, Salvar e Novo) e da área de trabalho.

Impressão na visualização de código agora permite imprimir o código-fonte, com a formatação adequada.

 

Página 13 de 160Princípios básicos do Dreamweaver

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

Page 14: 3 Principios basicos do DW

Suporte avançado a todas as tecnologias de servidor mais recentes

Crie com rapidez aplicativos para a Web dinâmicos e orientados para banco de dados, manualmente ou utilizando objetos visuais e comportamentos.

Bibliotecas de código do servidor para ColdFusion, ASP, ASP.NET, JSP e PHP permitem criar visualmente sites da Web dinâmicos, utilizando todas as tecnologias de servidor mais avançadas. Utilize um ambiente de desenvolvimento para integrar-se a vários sites e tecnologias de especializadas.

O painel Trechos permite armazenar partes de código arbitrárias, para utilização posterior. É possível reutilizar código, layouts e funções complexas.

O Editor de bibliotecas de tags fornece um banco de dados de tags integrado para armazenar informações sobre tags originais e personalizadas. Esse recurso permite editar as propriedades das tags existentes e importar novas tags.

Centenas de editores de tags permitem editar rapidamente os atributos relevantes de determinadas tags em HTML, CFML e ASP.NET, na visualização de código.

Suporte a tags personalizadas ASP.NET permite importar os controles de servidor ASP.NET personalizados (tags personalizadas) para as páginas ASP.NET e visualizar sua estrutura e atributos no seletor de tags, nas sugestões de código e no inspetor de c ódigo.

Tags ASP.NET de formulários da Web são agora processadas no Macintosh e Windows, permitindo uma visualização e edi ção sofisticadas. Os editores de tags dos formulários da Web permitem criar rapidamente formulários ASP.NET da Web, utilizando controles de servidor e de validação.

Objetos DataGrid e DataList do ASP.NET podem ser facilmente criados no Dreamweaver MX, com o objetivo de manipular e exibir dados complexos.

Painel integrado Banco de dados permite examinar rapidamente a estrutura e o conteúdo de seus bancos de dados, percorrer as tabelas, os procedimentos armazenados e as visualizações, antes de criar as consultas.

O seletor de tags mostra a estrutura de todas as tags disponíveis ao Dreamweaver MX, inclusive as tags personalizadas, importadas através do editor de bibliotecas de tags. Utilize-o para colocar e editar as tags nas páginas, com rapidez, e veja as informações de referência de tags individuais.

O banco de dados de tags com base em XML personalizável armazena informações sobre a estrutura de todas as tags disponíveis. Esse mecanismo centralizado de armazenamento de informações permite que os recursos, como as sugestões de código, o seletor de tags e o inspetor de tags, funcionem com as tags importadas originais e personalizadas.

Detecção do ColdFusion MX permite que o assistente de defini ção de sites se configure automaticamente para definir um site ColdFusion, utilizando uma cópia instalada local do Macromedia ColdFusion MX Developer Edition.

Painel Depuração pelo servidor Live do ColdFusion MX dinamiza o fluxo de trabalho da depuração do ColdFusion MX, exibindo o resultado desta diretamente no Dreamweaver MX.

 

Página 14 de 160Princípios básicos do Dreamweaver

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

Page 15: 3 Principios basicos do DW

Visualize as informações sobre vari áveis, consultas e outras estatísticas importantes de páginas, e vá direto para as áreas problemáticas, sem sair do ambiente de desenvolvimento.

O código de tempo de execução do ColdFusion gerado pelos objetos e comportamentos de servidor do Dreamweaver MX, foi aprimorado para orientar-se mais para as tags, não podendo quase ser distinguido do código escrito manualmente por um programador.

Suporte a RDS permite transferir arquivos de/para e examinar a estrutura dos bancos de dados nos servidores ColdFusion, utilizando as conexões RDS.

Bibliotecas de tags JSP ajudam os programadores a suprimir a lógica do servidor das páginas JSP. O Dreamweaver MX pode importar as informações da biblioteca de tags JSP dos arquivos TLD (Tag Library Descriptor, descritor de biblioteca de tags) e torná-las disponíveis nas sugestões de código, no seletor de tags e no inspetor de tags.

Análise completa dos componentes de software reutilizáveis para Java mostra os métodos getProperty e setProperty dos componentes de software reutilizáveis para Java no painel Ligações, além de poder exibir todos os métodos e propriedades destes no painel Componentes do servidor, permitindo que os programadores integrem completamente os componentes de software reutilizáveis aos aplicativos JSP.

Objetos de formulário dinâmicos permitem criar listas de seleção orientadas para banco de dados e outros elementos de formul ário, através da simples escolha do objeto de formulário adequado na barra Inserir.

O criador de comportamentos de servidor do UltraDev 4 foi aprimorado para permitir que os usuários criem comportamentos de servidor com elementos de interface de usuário mais complexos, incluindo caixas de seleção, grupos de botões de opção e menus de conexão.

Pacote integrado do HomeSite 5 e ColdFusion Studio 5 fornece uma versão licenciada do HomeSite+, uma combinação do ColdFusion Studio e HomeSite 5, totalmente integrada e incluída no Dreamweaver MX.

Acesso fácil aos padrões mais recentes

Crie sites da Web compatíveis com os padrões mais recentes da Web, incluindo XML e serviços da Web, e mantenha seus recursos atualizados com as tecnologias de desenvolvimento mais avançadas.

Análise dos serviços da Web para ASP.NET, ColdFusion e Java permite examinar e interagir com os padrões mais recentes de serviços da Web com base em XML, em todas as tecnologias de servidor mais avançadas. Incorpore funcionalidades complexas aos seus aplicativos para a Web, utilizando o recurso de análise dos serviços da Web no Dreamweaver MX.

Edição e validação de XML permite importar DTDs e esquemas, assegurando assim a formatação correta dos documentos.

Suporte aprimorado às CSS, incluindo a integração TopStyle ajuda a criar sites compatíveis com os padrões mais recentes de folhas de estilos CSS. O painel Estilos CSS do Dreamweaver MX foi aperfeiçoado para mostrar os estilos definidos interna e externamente,

 

 

Página 15 de 160Princípios básicos do Dreamweaver

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

Page 16: 3 Principios basicos do DW

além de permitir o uso das folhas de estilo na fase de projeto. Também é oferecido suporte a muitas novas construções de CSS2. O inspetor de propriedades do texto também pode ser utilizado na aplicação de estilos CSS.

Suporte a XHTML permite garantir que os sites estão atualizados de acordo com os padr ões mais recentes de desenho HTML, configurando o Dreamweaver MX para gerar código compatível com XHTML. Além disso, converte rapidamente arquivos HTML mais antigos em XHTML, utilizando o conversor de XHTML.

Relatório de compatibilidade com a seção 508 do acesso ao site ajuda a determinar se o site atende às instruções de acessibilidade e detecta problemas de maneira rápida e fácil.

Conteúdo integrado de referência sobre acessibilidade, no painel Referência, fornece o contexto e subsídios para as melhores práticas relativas ao projeto da acessibilidade.

Opção de acessibilidade para gerar códigos compatíveis auxilia durante o ciclo de edição para assegurar que o conteúdo que está sendo criado atenda às instruções de acessibilidade. Configure o Dreamweaver para solicitar atributos específicos, relacionados à acessibilidade, quando as tags e os objetos adequados forem inseridos na página.

Suporte a componentes ColdFusion oferece maior portabilidade e modularidade da lógica do servidor, exibindo as propriedades através da CFML, como um serviço da Web, ou através do Flash Application Server Gateway. O Dreamweaver MX inclui suporte à análise, criação e edição de componentes ColdFusion.

Validador de código assegura que os documentos atendem aos padrões adequados, fornecendo um relatório de validação relativo a um determinado perfil de navegador ou a uma versão específica de um padrão, inclusive XHTML Transitional e HTML 4.0.

Carga e edição no Macromedia Flash MX e no Fireworks MX acelera a edição de imagens, animação e HTML entre o Dreamweaver MX, Fireworks MX e Flash MX, permitindo a carga e otimização diretamente no Dreamweaver.

Inspetor de tags para exibir XML, HTML e CFML permite ver a estrutura de um documento com rapidez e facilidade. É possível detectar e eliminar rapidamente aninhamentos e rela ções principais indevidos, sem ter que examinar o c ódigo-fonte original.

O login de FTP seguro integra-se ao MacSSH e ao PUTTY para Windows, permitindo a transferência segura e ativada por SSH das informações sobre login a partir do cliente FTP integrado do Dreamweaver.

Suporte integral ao conjunto de caracteres UTF-8, em todos os idiomas, permite criar e transformar páginas utilizando a codificação UTF-8.

Suporte integral ao Windows XP permite que o Dreamweaver MX funcione em velocidade máxima nos sistemas operacionais mais recentes e oferece suporte a todos os aprimoramentos de interface do usuário recém-lançados.

Integração com o Macromedia Sitespring ajuda-o a utilizar os melhores procedimentos para gerenciar a produção e os clientes na área de trabalho do Dreamweaver.

   

Página 16 de 160Princípios básicos do Dreamweaver

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

Page 17: 3 Principios basicos do DW

Recursos de tecnologias da Web e HTML

A seguir, estão alguns recursos úteis, disponíveis na Web:

A especificação HTML 4.01 é o documento oficial para HTML do World Wide Web Consortium.

Índice DOT HTML é uma lista completa de tags, atributos e valores HTML, bem como sua compatibilidade com os diversos navegadores.

A especificação XHTML 1.0 é o documento oficial para a Extensible HyperText Markup Language (XHTML, linguagem extensível de marcadores de hipertexto).

O site XML.com da O'Reilly fornece informações, tutoriais e dicas sobre a Extensible Markup Language (XML), assim como outras tecnologias da Web.

As especificações para o nível 1 das Cascading Style Sheets (CSS1) e para o nível 2 (CSS2) são os documentos oficiais para as folhas de estilo do World Wide Web Consortium.

Guia de referência das folhas de estilos da Web Review explica o que são os estilos CSS e em quais navegadores funcionam.

As páginas Visão geral das ASP da Microsoft contêm informações sobre as Active Server Pages (ASP).

Página ASP.NET da Microsoft contém informações sobre o ASP.NET.

A página JSP da Sun contém informações sobre as JavaServer Pages (JSP).

As páginas PHP contêm informações sobre o PHP: pré-processador de hipertexto.

O site MySQL contém informações sobre o MySQL.

Tabela de entidades apresenta uma lista dos nomes de entidades utilizadas pelo padrão ISO 8859-1 (Latin-1).

A página de eventos de HTML dinâmico contém informações sobre os eventos no Microsoft Internet Explorer.

A página de produtos ColdFusion da Macromedia contém informações sobre ColdFusion.

A página de produtos JRun Server da Macromedia contém informações sobre o servidor de aplicativos em Java JRun.

A página IBM WebSphere contém informações sobre o servidor de aplicativos WebSphere.

A página do produto da Chili!Soft contém informações sobre o servidor de aplicativos ASP da Chili!Soft.

A JavaScript Bible, de autoria de Danny Goodman (IDG Books), traz informações sobre a linguagem JavaScript 1.2 de maneira detalhada.

JavaScript: The Definitive Guide (JavaScript: o guia definitivo), de autoria de David Flanagan (O’Reilly & Associates), fornece informações de referência para cada função, objeto, método, propriedade e manipulador de evento JavaScript.

“CGI Scripts for Fun and Profit ” é um artigo do site Hotwired Webmonkey sobre a inclusão

Página 17 de 160Princípios básicos do Dreamweaver

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

Page 18: 3 Principios basicos do DW

de scripts CGI (Common Gateway Interface) j á prontos nas páginas.

O Índice de recursos CGI é um repositório de todas as questões relativas a CGI, incluindo scripts prontos, documentação, livros e até mesmo programadores que oferecem seus serviços.

O site Common Gateway Interface inclui uma introdução à CGI.

Exploração da área de trabalho

Para obter o máximo de sua experiência com o Macromedia Dreamweaver MX, é necessário compreender os conceitos básicos inerentes à área de trabalho do Dreamweaver e saber como escolher as opções, utilizar os inspetores e painéis, e definir as preferências mais adequadas ao seu estilo de trabalho.

Este capítulo contém os seguintes tópicos:

l Utilização da área de trabalho do Dreamweaver l Utilização de janelas e painéis no Dreamweaver l Utilização do Dreamweaver com outros aplicativos l Personalização do Dreamweaver: Princípios básicos

Utilização da área de trabalho do Dreamweaver

Esta seção descreve os elementos básicos da área de trabalho no Windows e explica como escolher um layout inicial para a mesma.

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. Veja Escolha de um layout de área de trabalho.

Veja Sobre o layout da área flutuante de trabalho no Windows.

Escolha de um layout de área de trabalho

Na primeira vez que o Dreamweaver é iniciado, aparece uma caixa de diálogo que permite escolher 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 18 de 160Princípios básicos do Dreamweaver

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

Page 19: 3 Principios basicos do DW

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 (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. Recomendado para a maioria dos usuários.

Nota: Na maior parte do sistema de ajuda, presume-se que está sendo utilizada a área de trabalho integrada do Dreamweaver MX.

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. Esse layout é recomendado para os usuários do HomeSite ou ColdFusion Studio e outros-codificadores manuais que desejam utilizar um layout de área de trabalho familiar. Para escolher esse layout, selecione a opção Área de trabalho do Dreamweaver MX e, em seguida, escolha a opção Estilo 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 apenas para os usuários do Dreamweaver 4 que preferem utilizar uma área de trabalho mais familiar.

Para alternar para uma área de trabalho diferente da que foi escolhida:

1. Escolha Editar > Preferências. 2. Na lista de categorias, à esquerda, selecione Geral, caso não esteja selecionada. 3. Clique no botão Alterar a área de trabalho. 4. Selecione um layout de área de trabalho e clique em OK.

Será exibida uma mensagem de alerta informando que o novo layout será mostrado após

Página 19 de 160Princípios básicos do Dreamweaver

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

Page 20: 3 Principios basicos do DW

o reinício do Dreamweaver.

5. Clique em OK para fechar a mensagem de alerta. 6. Clique novamente em OK para fechar a caixa de di álogo Preferências. 7. Saia do Dreamweaver e reinicie-o.

Sobre a área de trabalho integrada do Dreamweaver MX no Windows

No Windows, a área de trabalho integrada do Dreamweaver MX apresenta todas as janelas e painéis reunidos em uma única janela maior do aplicativo.

A área de trabalho Estilo HomeSite/Coder contém os mesmos elementos, porém os grupos de painéis estão encaixados no lado esquerdo, e não à direita, da janela principal. O padrão desse layout de área de trabalho é mostrar o inspetor de propriedades minimizado e a janela do documento ser exibida na visualização de código.

   

Página 20 de 160Princípios básicos do Dreamweaver

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

Page 21: 3 Principios basicos do DW

Os usuários do Windows podem alternar para essa área flutuante de trabalho utilizando a caixa de diálogo Preferências; para obter mais informações, veja Escolha de um layout de área de trabalho.

Para ter uma visão geral resumida das janelas e painéis, veja Sobre as janelas e os painéis. Para obter mais detalhes sobre janelas e painéis específicos, veja Utilização de janelas e painéis no Dreamweaver.

Sobre o layout da área flutuante de trabalho no Windows

No layout da área de trabalho no estilo do Dreamweaver 4, cada documento está em sua janela individual. Os grupos de painéis são inicialmente encaixados juntos, mas podem ser separados e colocados em suas próprias janelas.

 

 

Página 21 de 160Princípios básicos do Dreamweaver

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

Page 22: 3 Principios basicos do DW

Na área flutuante de trabalho, as janelas se encaixam automaticamente umas nas outras, nas laterais da tela e na janela do documento, à medida que são arrastadas ou redimensionadas. Essa característica facilita o deslocamento e a organização dos diversos painéis e janelas flutuantes no Dreamweaver.

Os usuários do Windows podem alternar para uma área de trabalho integrada em uma única janela utilizando a caixa de diálogo Preferências; para obter mais informações, veja Utilização da área de trabalho do Dreamweaver.

Para ter uma visão geral resumida das janelas e painéis, veja Sobre as janelas e os painéis. Para obter mais detalhes sobre janelas e painéis específicos, veja Utilização de janelas e painéis no Dreamweaver.

Sobre as janelas e os painéis

Esta seção descreve resumidamente alguns elementos que aparecem nos layouts de áreas de trabalho integradas e flutuantes. Para obter mais informações sobre janelas e painéis específicos, veja Utilização de janelas e painéis no Dreamweaver.

   

Página 22 de 160Princípios básicos do Dreamweaver

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

Page 23: 3 Principios basicos do DW

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 barra de ferramentas padrão (que não é exibida no layout padrão da área de trabalho) contém botões para executar operações comuns dos menus Arquivo e Editar: Novo, Abrir, Salvar, Salvar como, Salvar tudo, Recortar, Copiar, Colar, Desfazer e Refazer. Para exibir a barra de ferramentas padrão, escolha Exibir> Barras de ferramentas> Padrão.

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 selecionado. Cada tipo de objeto apresenta propriedades diferentes (o padrão é não expandido no layout da área de trabalho em estilo Coder).

O seletor de tags, na barra de status situada na parte inferior da janela do documento, mostra a hierarquia das tags que delimitam a seleção atual na visualização do projeto. Clique em qualquer tag na hierarquia para selecioná-la e exibir todo o seu conteúdo (não está visível na visualização de código e, por conseguinte, não estará visível como padrão no layout da área de trabalho em estilo Coder). Para obter mais informações, veja Edição do código com o seletor de tags.

Os grupos de painéis são conjunto vejas de painéis relacionados, agrupados 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 Sobre o painel Site. Esse painel também possibilita a exibição de todos os arquivos no disco local, como no Windows Explorer.

A barra do Iniciador (não é exibida no layout padrão de área de trabalho) exibe botões na barra de status para abrir e fechar os painéis e inspetores utilizados com mais freqüência. Para exibir a barra do Iniciador e especificar os ícones que ela mostrará, veja Definição das preferências dos painéis.

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. A maioria dos painéis pode ser reunida em grupos de painéis. Para abrir os painéis, inspetores e janelas do Dreamweaver, utilize o menu Janela. Uma marca de seleção próxima a um item, no menu Janela, indica que ele está aberto (embora possa estar oculto atr ás de outras janelas). Para exibir um item que não esteja aberto, escolha o nome do item no menu.

Se um painel, inspetor ou janela, que estiver marcado como aberto, não puder ser localizado, escolha Janela > Organizar os painéis para posicionar todos os painéis abertos.

Página 23 de 160Princípios básicos do Dreamweaver

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

Page 24: 3 Principios basicos do DW

Utilização de janelas e painéis no Dreamweaver

Esta seção explica como utilizar v árias janelas, barras de ferramentas, painéis, inspetores específicos e outros elementos da área de trabalho do Dreamweaver.

Janela do documento

A janela do documento mostra o documento que está aberto. É possível escolher uma das seguintes visualizações:

l Visualização do projeto, um ambiente de projeto para criar o layout visual da página, executar a edição visual e desenvolver rapidamente os aplicativos. Nessa visualização, o Dreamweaver exibe uma representação inteiramente editável do documento, semelhante à visualização de uma página em um navegador. É possível configurar a visualização do projeto para que exiba o conteúdo dinâmico durante o trabalho com o documento (veja Exibição de Live Data na visualização do projeto).

l A visualização de código é um ambiente de codificação manual para gravar e editar código-de servidor HTML e JavaScript, como Microsoft Active Server Pages (ASP) ou ColdFusion Markup Language, e qualquer outro tipo de código. Para obter mais informações, consulte o Codificação no Dreamweaver.

l As visualizações de código e do projeto permitem ver o documento nessas duas visualizações em uma única janela.

Para alternar rapidamente entre as duas visualizações, pressione Control+sinal de til (~).

Quando a janela do documento contém uma barra de título, esta exibirá o título da página e, entre parênteses, o nome e caminho do arquivo. Após o nome do arquivo, o Dreamweaver exibe um asterisco, se tiverem sido feitas alterações ainda não salvas.

No Windows, quando a janela do documento é maximizada no layout de área de trabalho integrada, ela não contém a barra de título. Nesse caso, o título da página, e o nome e caminho do arquivo aparecerão na barra de título da janela principal da área de trabalho.

Sobre a barra de status

A barra de status, situada na parte inferior da janela do documento, fornece informações adicionais sobre o documento que você estiver criando.

   

 

 

 

 

Página 24 de 160Princípios básicos do Dreamweaver

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

Page 25: 3 Principios basicos do DW

O seletor de tags mostra a hierarquia das tags que envolvem a seleção atual. Clique em qualquer tag na hierarquia para selecioná-la e exibir todo o seu conteúdo. Clique na tag <body> para selecionar o corpo inteiro do documento. Para definir os atributos class ou id de uma tag, no seletor de tags, clique com o botão direito do mouse na tag e escolha uma classe ou identificação no menu contextual.

O menu pop-up Tamanho da janela (exibido apenas na visualização do projeto) permite redimensionar a janela do documento para um tamanho predeterminado ou personalizado. Veja Redimensionamento da janela do documento.

À direita do menu pop-up Tamanho da janela são mostradas as estimativas de tamanho do documento e de tempo de download da página, incluindo todos os arquivos dependentes, como os arquivos de imagens e de outras mídias. Veja Como definir o tempo e o tamanho do download.

Para obter informações sobre a criação de um novo documento e como utilizar os documentos pré-desenhados, fornecidos com o Dreamweaver, consulte o Configuração de um documento.

Redimensionamento da janela do documento

A barra de status exibe as dimensões atuais da janela do documento (em pixels). Para definir um tamanho de janela caiba em qualquer um dos vários tamanhos de monitores comumente utilizados, clique no tamanho da janela e escolha um tamanho no menu pop-up Tamanho da janela. Para redimensionar de modo menos preciso, utilize os métodos padrão do sistema operacional de ajuste de janelas, por exemplo: arrastar o canto inferior direito da janela. Na área de trabalho integrada do Windows, é possível maximizar uma janela de documento para que ela preencha totalmente a área do documento da janela integrada.

Nota: Não é possível redimensionar uma janela de documento que estiver maximizada na área de trabalho integrada.

Quando a janela do documento está maximizada, as guias aparecem na parte inferior da área da janela do documento, mostrando os nomes de arquivos de todos os documentos que estiverem abertos. Para alternar para um documento, clique na sua respectiva guia.

Para criar uma página cuja aparência seja melhor em um determinado tamanho, é possível ajustar a janela do documento para qualquer um dos tamanhos predeterminados, editá-los ou criar novos tamanhos.

 

 

Página 25 de 160Princípios básicos do Dreamweaver

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

Page 26: 3 Principios basicos do DW

Nota: O tamanho da janela mostrado reflete as dimensões internas da janela do navegador, sem incluir as bordas; o tamanho do monitor é exibido entre parênteses. Por exemplo: seria recomendável utilizar o tamanho “536 x 196 (640 x 480, padrão)” se for provável que os visitantes ao seu site estejam utilizando o Microsoft Internet Explorer ou o Netscape Navigator nas suas configura ções padrão em um monitor de 640 x 480 pixels.

Para redimensionar a janela do documento de acordo com um tamanho predeterminado:

Escolha um dos tamanhos no menu pop-up situado na parte inferior da janela do documento.

Para alterar os valores na lista do menu pop-up Tamanho da janela:

1. No menu pop-up Tamanho da janela, escolha Editar os tamanhos. 2. Clique em qualquer dos valores de largura e altura na lista Tamanhos de janela, e digite

um novo valor.

Para que a janela do documento se ajuste apenas a uma largura específica (mantendo a altura inalterada), selecione um valor de altura e exclua-o.

3. Clique na caixa de texto Descrição, para digitar um texto descritivo sobre um determinado tamanho.

4. Clique em OK para salvar a altera ção e retornar à janela do documento.

Para adicionar um novo tamanho ao menu pop-up Tamanho da janela:

1. No menu pop-up Tamanho da janela, escolha Editar os tamanhos. 2. Clique no espaço em branco abaixo do último valor na coluna Largura. 3. Digite os valores de Largura e Altura. Para definir apenas os valores de Largura ou de

Altura, basta deixar um campo vazio. 4. Clique no campo Descrição, para inserir um texto descritivo sobre o tamanho adicionado. 5. Clique em OK para salvar a altera ção e retornar à janela do documento.

Por exemplo: digite SVGA ou PC comum ao lado da entrada referente a um monitor de 800 x 600 pixels, e Mac de 17 pol. ao lado da entrada referente a um monitor de 832 x 624 pixels. A maioria dos monitores permitem ajustes para várias dimensões em pixels.

Para maximizar a janela do documento (apenas na área de trabalho integrada do Windows):

Clique no botão Maximizar, na barra de título da janela do documento.

 

 

Página 26 de 160Princípios básicos do Dreamweaver

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

Page 27: 3 Principios basicos do DW

Definição das preferências da barra de status

Para definir as preferências da barra de status, escolha Editar > Preferências e selecione Barra de status, na lista de categorias, à esquerda. Para obter mais informações, veja Sobre a barra de status.

Tamanhos de janela permite personalizar os tamanhos de janelas mostrados no menu pop-up da barra de status. Veja Redimensionamento da janela do documento.

Velocidade de conexão determina a velocidade da conexão (em quilobits por segundo) utilizada no cálculo do tamanho do download. O tamanho do download da página é exibido na barra de status. Quando uma imagem é selecionada na janela do documento, o tamanho do download dessa imagem é exibido no inspetor de propriedades.

Utilização da barra do Iniciador

A barra do Iniciador é mostrada na barra de status e contém botões para abrir e fechar vários painéis, inspetores e janelas.

Para exibir a barra do Iniciador, ative a opção Mostrar os ícones nos painéis e no Iniciador, nas preferências dos painéis. É possível especificar quais itens serão exibidos na barra do Iniciador. Para obter mais informações, veja Definição das preferências dos pain éis.

Utilização da barra de ferramentas do documento

A barra de ferramentas do documento contém botões que permitem alternar rapidamente diferentes visualizações do documento: de código, do projeto, uma visualização dividida que mostra as visualizações de código e do projeto, e a visualização do Live Data (veja Exibição de Live Data na visualização do projeto). A barra de ferramentas contém alguns comandos e opções comuns relacionados à visualização do documento, transferência entre os sites local e remoto, e depuração do código JavaScript

Para exibir ou ocultar a barra de ferramentas do documento, escolha Exibir > Barras de ferramentas > Documento.

   

 

 

Página 27 de 160Princípios básicos do Dreamweaver

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

Page 28: 3 Principios basicos do DW

As seguintes opções são mostradas na barra de ferramentas do documento:

l Mostrar a visualização de código exibe apenas a visualização de código na janela do documento.

l Mostrar as visualizações de código e do projeto exibe a visualização de código em uma parte da janela do documento e a visualização do projeto na outra parte.

Quando essa visualização combinada é selecionada, a opção Visualização do projeto no alto torna-se dispon ível no menu Opções de visualização. Utilize essa opção para especificar qual visualização aparecerá na parte superior da janela do documento.

l Mostrar a visualização do projeto exibe apenas a visualização do projeto na janela do documento.

Também é possível escolher uma visualização no menu Exibir.

l Título permite digitar um título para o documento, que será exibido na barra de título do navegador.

Se o documento já tiver um título, ele aparecerá nesse campo.

l Gerenciamento de arquivos exibe o menu pop-up Gerenciamento de arquivos. l Visualizar/depurar no navegador permite visualizar ou depurar o documento no

navegador. Escolha um navegador no menu pop-up.

Para adicionar um navegador ao menu ou alterar os navegadores contidos na lista, escolha Editar a lista de navegadores.

l Atualizar a visualização do projeto atualiza a visualização do projeto do documento após as alterações feitas na visualização de código.

As alterações feitas na visualização de código não são exibidas automaticamente na visualização do projeto até que sejam executadas determinadas a ções, por exemplo: salvar o arquivo ou clique neste botão.

l Referência exibe o painel Referência.

O painel Referência contém informações de referência sobre HTML, CSS, JavaScript, CFML, ASP e JSP. Para obter mais informações, veja Acesso a referências de linguagem.

l Navegação do código permite navegar pelo c ódigo JavaScript. Para obter mais informações, veja Como utilizar o depurador JavaScript .

Página 28 de 160Princípios básicos do Dreamweaver

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

Page 29: 3 Principios basicos do DW

l Opções de visualização permite definir as opções das visualizações de código e do projeto, inclusive qual visualização deve aparecer em primeiro plano.

Para obter mais informações sobre as opções da visualização de código, veja Definição de preferências de visualização.

As opções da visualização do projeto permitem ocultar todos os auxílios visuais (por ex.: tabelas, camadas e bordas da moldura) de uma só vez, ou mostrar e ocultar aux ílios individuais, conforme a preferência. Essas opções também possibilitam exibir o conteúdo do cabeçalho e as guias visuais. Para obter mais informações sobre essas opções, que também se encontram no menu Exibir, veja Seleção de elementos na janela do documento, Visualização e edição do conteúdo do HEAD e Utilização de guias visuais no processo de projeto.

Quando as visualizações de código e do projeto estiverem em exibição, ambos os conjuntos de opções estarão disponíveis no menu.

Utilização da barra de ferramentas padrão

A barra de ferramentas padrão contém botões para executar operações comuns dos menus Arquivo e Editar: Novo, Abrir, Salvar, Salvar como, Salvar tudo, Recortar, Copiar, Colar, Desfazer e Refazer. Utilize esses botões da mesma forma que os comandos equivalentes nos menus. Para obter mais informações sobre as operações Abrir e Salvar, consulte o Configuração de um documento.

Para exibir a barra de ferramentas padrão, escolha Exibir > Barras de ferramentas > Padrão.

Utilização dos menus contextuais

O Dreamweaver utiliza amplamente os menus contextuais, que fornecem acesso conveniente aos comandos mais úteis e às propriedades relacionadas ao objeto ou à janela com a qual você estiver trabalhando. Os menus contextuais apresentam apenas os comandos pertinentes à seleção atual.

Para utilizar um menu contextual:

1. Clique com o botão direito do mouse no objeto ou na janela.

Será exibido o menu contextual correspondente ao objeto ou à janela selecionada.

2. Escolha um comando no menu contextual.

 

 

 

 

Página 29 de 160Princípios básicos do Dreamweaver

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

Page 30: 3 Principios basicos do DW

Utilização da barra Inserir:

A barra Inserir contém botões para criar e inserir objetos, como tabelas, camadas e imagens. Os botões estão organizados em guias.

Para mostrar ou ocultar a barra Inserir:

Escolha Janela>Inserir.

Para expandir ou reduzir a barra Inserir:

Clique na seta de expansão, no canto esquerdo da barra de t ítulo da barra Inserir.

Para mudar a orientação da barra Inserir, siga um dos procedimentos:

l Para mudar a posição da barra Inserir de horizontal para vertical, clique no ícone de orientação vertical, próximo ao canto superior direito.

l Para mudar a posição da barra Inserir, de vertical para horizontal, clique no ícone de

orientação horizontal, próximo ao canto inferior direito.

Para mostrar os botões em uma determinada guia, siga um dos procedimentos abaixo:

l Se a barra Inserir estiver configurada com as guias na horizontal, clique em uma guia.

   

Página 30 de 160Princípios básicos do Dreamweaver

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

Page 31: 3 Principios basicos do DW

l Se a barra Inserir estiver na posição vertical, clique no nome da categoria, na parte superior da barra, e escolha uma categoria no menu pop-up que aparecer.

Para inserir um objeto:

1. Selecione a guia adequada na barra Inserir. 2. Clique em um objeto de botão ou arraste o ícone de botão para a janela do documento.

Dependendo do objeto, poderá ser exibida uma caixa de diálogo de inserção de objeto correspondente, solicitando a busca um arquivo ou parâmetros específicos a um objeto.

Para ignorar a caixa de diálogo de inserção de objetos e inserir um objeto alocador de espaço vazio:

Pressione Control e clique no botão correspondente ao objeto.

Por exemplo: para inserir um alocador de espaço de uma imagem sem especificar um arquivo de imagem, pressione Control e clique no botão Imagem.

Nota: Esse procedimento não ignora todas as caixas de diálogo de inserção de objeto. Muitos objetos, inclusive as barras de navegação, camadas, bot ões Flash e conjuntos de molduras, não inserem alocadores de espaço ou objetos com valor padrão.

A barra Inserir contém várias guias: Comuns, Layout, Texto, Tabelas, Molduras, Formulários, Modelos, Caracteres, Mídia, Cabeçalho, Script e Aplicativo. São exibidas guias adicionais quando o documento que estiver em exibição contiver código do servidor, como documentos ASP ou CFML.

l A guia Aplicativo permite inserir elementos dinâmicos, como conjuntos de registros, regiões repetidas, e formulários de atualização e de inserção de registros. Para obter informações sobre conteúdo dinâmico, consulte o Como adicionar conteúdo dinâmico às páginas da Web.

l A guia Caracteres contém caracteres especiais, como o símbolo de direito autoral (copyright), as aspas curvas, e os símbolos de marcas comerciais e registradas. Observe que alguns desses símbolos podem não ser exibidos corretamente nas versões 3.0 e anteriores dos navegadores Internet Explorer e Netscape Navigator.

l A guia Comuns contém botões para criar e inserir os objetos utilizados com mais freqüência, por exemplo: imagens, tabelas e camadas.

l A guia Formulários contém botões para criar formulários e inserir elementos de formulários.

l A guia Molduras contém os layouts comuns dos conjuntos de molduras. l A guia Head contém botões para adicionar vários elementos head, como as tags meta e

base. l A guia Layout permite inserir tabelas e camadas, bem como escolher entre duas

visualizações de tabelas: visualização padrão (o padrão) e de layout. Quando é selecionada a visualização de layout, podem ser utilizadas as ferramentas de layout do Dreamweaver: Desenhar a célula de layout e Desenhar a tabela de layout. Para obter mais informações, consulte o Definição do layout de páginas na visualização de layout.

l A guia Mídia contém botões para inserir objetos de m ídia animados ou interativos, como botões e texto Flash, applets Java e objetos ActiveX. Para obter mais informações, consulte o Como inserir mídia.

l A guia Script permite inserir um script, uma seção noscript ou uma inclusão do servidor (server-side include).

l A guia Tabelas permite inserir uma tabela inteira ou uma tag específica a uma tabela

Página 31 de 160Princípios básicos do Dreamweaver

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

Page 32: 3 Principios basicos do DW

(como tr, th ou td). l A guia Modelos permite inserir regiões editáveis, opcionais e repetitivas nos arquivos de

modelos. Para obter mais informações, veja Sobre os modelos do Dreamweaver . l A guia Texto permite inserir v árias tags de formatação de lista e de texto, como b, em, p,

h1 e ul.

Nota: Embora alguns botões na guia Texto sejam semelhantes aos encontrados no inspetor de propriedades, suas funções são diferentes. Os botões na guia Texto servem apenas para inserir c ódigo e não refletem o estado atual da seleção; se a sele ção contiver texto em negrito, o botão Negrito, no inspetor de propriedades, será exibido como selecionado, enquanto que o mesmo botão na guia Texto não estará ativado.

l As guias de c ódigo do servidor, disponíveis apenas para as páginas que utilizam uma determinada linguagem de servidor, incluem ASP , ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP. Cada uma dessas guias fornece objetos de código do servidor, que podem ser inseridos na visualização de código.

Se apenas alguns objetos estiverem visíveis em uma determinada guia, será mostrada uma pequena seta no canto inferior esquerdo da barra Inserir; para exibir os outros objetos da guia, clique na seta.

Quando um objeto de botão é clicado, o Dreamweaver insere código no documento. Em alguns casos, o código é inserido imediatamente, em outros, é exibido um editor de tags (veja Edição de tags utilizando editores de tags) ou uma outra caixa de di álogo, permitindo a especificação de mais informações, antes da inserção do código. Se um objeto for inserido na visualização do projeto, não será exibida nenhuma caixa de diálogo, porém se ele for inserido na visualização de código, aparecerá o editor de tags. No caso de alguns objetos, a inserção destes na visualização do projeto fará com que o Dreamweaver alterne para a visualização de código, antes de inserir o objeto.

Alguns objetos, como as âncoras com nome, não estão visíveis quando a página é exibida na janela do navegador. Para exibir os ícones que marcam os locais desses objetos invisíveis na visualização do projeto, escolha Exibir > Auxílios visuais > Elementos invis íveis. Para selecionar os objetos invisíveis na visualização do projeto, clique em seus respectivos ícones. Para obter mais informações, veja Sobre os elementos invisíveis.

Algumas das definições de preferências gerais afetam a barra Inserir. Para modificá-las, escolha Editar > Preferências e selecione Geral na lista de categorias à esquerda.

l Ao inserir objetos, como imagens, tabelas, scripts e elementos head, uma caixa de diálogo solicitará informações adicionais. As caixas de diálogo podem ser suprimidas, desativando a opção Mostrar a caixa de diálogo ao inserir objetos ou mantendo pressionada a tecla Control durante a criação do objeto. Quando o objeto é inserido com essa opção desativada, são conferidos valores de atributos padrão ao objeto. Utilize o inspetor de propriedades para alterar as propriedades do objeto após a inserção.

l A opção barra Inserir permite exibir o seu conteúdo apenas como ícones, texto, ou texto e ícones.

É possível modificar qualquer objeto na barra Inserir ou criar os seus próprios objetos; veja “Customizing Dreamweaver”, no Centro de suporte da Macromedia.

   

Página 32 de 160Princípios básicos do Dreamweaver

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

Page 33: 3 Principios basicos do DW

Utilização da barra Inserir: Aplicativo

Na barra Inserir, a guia Aplicativo permite adicionar os comportamentos do servidor à página.

Para obter mais informações, veja Como adicionar comportamentos de servidor a uma página.

Utilização da barra Inserir: Caracteres

Na barra Inserir, a guia Caracteres permite inserir os caracteres especiais.

Quebra de linha insere uma quebra de linha (br) no ponto de inserção. Também é possível pressionar Shift+Enter para inserir uma quebra de linha.

Espaço não-separável insere um espaço não separável (&nbsp;) no ponto de inserção.

Aspas à esquerda, Aspas à direita e Travessão inserem marcas de pontuação no ponto de inserção.

Libra, Euro e Iene inserem s ímbolos de moedas no ponto de inserção.

Copyright, Marca registrada e Marca comercial inserem os s ímbolos correspondentes no ponto de inserção.

Outros caracteres fornece um conjunto de caracteres especiais, por exemplo: é e ç, à sua escolha. Quando um desses caracteres é selecionado e se clica em OK, ele é inserido no ponto de inserção.

Utilização da barra Inserir: Comuns

A guia Comuns, na barra Inserir, permite inserir os objetos utilizados mais comumente.

Hyperlink e Link de correio eletrônico inserem links de hipertexto no ponto de inserção ou imediatamente após a seleção. Veja Criação de links.

 

 

 

 

Página 33 de 160Princípios básicos do Dreamweaver

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

Page 34: 3 Principios basicos do DW

Âncora com nome coloca uma âncora com nome (a name="") no ponto de inserção. Será exibida uma caixa de diálogo; digite o nome da âncora. Veja Estabelecimento de um link a um local específico de um documento.

Tabela coloca uma tabela no ponto de inserção. Consulte o Apresentação do conteúdo com tabelas.

Desenhar camada cria uma camada. Clique no botão Camada e, em seguida, mova o ponteiro para a janela do documento e arraste, para definir o tamanho e a posição da camada. Como padrão, o Dreamweaver cria uma camada definida pela tag div. Utilize o inspetor de propriedades para selecionar uma outra tag ou alterar a configuração padrão nas preferências de camadas. Veja Criação de camadas na página.

Imagem insere uma imagem no ponto de inserção. Será exibida uma caixa de diálogo, para que se possa especificar um arquivo de imagem. Veja Como inserir uma imagem.

Alocador de espaço de imagem insere um alocador de espaço de imagem no ponto de inserção. Uma caixa de diálogo permite especificar o nome e as dimensões do alocador de espaço. Veja Como inserir um alocador de espaço de imagem.

HTML do Fireworks coloca um arquivo HTML produzido pelo Fireworks no ponto de inserção. Consulte o Integração do Dreamweaver com outros aplicativos.

Imagem cambiávelsolicita a especificação de dois arquivos de imagem que serão utilizados para definir uma imagem cambiável. A imagem cambiável é aquela que se altera quando o cursor for movido sobre ela. Veja Criação de uma imagem cambiável.

Barra de navegação insere um conjunto de imagens a serem utilizadas na navegação de um site. Veja Criação das barras de navegação.

Régua horizontal coloca uma régua horizontal no ponto de inserção. Veja Utilização de r éguas horizontais.

Data coloca a data atual no ponto de inserção. É exibida uma caixa de diálogo na qual se pode especificar um formato de data e indicar se o Dreamweaver deverá atualizar automaticamente a data quando o arquivo for salvo. Veja Como inserir datas.

Dados tabulares cria uma tabela no ponto de inserção, preenchida com os dados tabulares extra ídos de um arquivo de texto delimitado (por ex.: um arquivo exportado do Microsoft Excel ou de um banco de dados). Veja Como importar dados tabulares.

Seletor de tags permite escolher uma tag em uma hierarquia de tags categorizadas, para inseri-la. Veja Como inserir tags com o Seletor de tags.

Comentário coloca um comentário no HTML, no ponto de inserção. Se você estiver na visualização do projeto, será exibida uma caixa de diálogo; digite o texto do comentário. Veja Como inserir comentários de HTML.

Utilização da barra Inserir: Formulários

 

 

Página 34 de 160Princípios básicos do Dreamweaver

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

Page 35: 3 Principios basicos do DW

Na barra Inserir, a guia Formulários contém botões para criar formulários e inserir os elementos do formulário.

Os formulários são simplesmente recipientes de elementos. Os limites do formulário não são visíveis na janela do documento, a não ser que a opção Exibir > Auxílios visuais > Elementos invisíveis seja selecionada. Veja Definição das preferências de elementos invisíveis.

Para inserir um elemento de formulário, coloque o ponto de inserção dentro dos limites de um formulário; os elementos de formulário situados fora das tags form não aparecerão em todos os navegadores. Ao tentar inserir um elemento de formul ário fora de um formulário, uma caixa de diálogo perguntará se você deseja adicionar uma tag ao redor do elemento; clique em Sim, para criar um novo formulário contendo o elemento, ou em Não, para inserir o elemento fora de um formulário.

Para obter mais informações, consulte o Criação de formulários interativos.

Formulário coloca um formulário no ponto de inserção.

Campo de texto coloca um campo de texto no ponto de inserção. Defina o nome, tamanho e valor inicial no inspetor de propriedades. Veja Definição do inspetor de propriedades do campo de texto.

Campo oculto coloca um campo oculto no ponto de inserção. Defina o nome e valor no inspetor de propriedades. Veja Como criar um campo oculto.

Área de texto insere um campo de texto com várias linhas no ponto de inserção.

Caixa de seleção e Botão de rádio colocam os controles correspondentes no ponto de inserção. Defina o nome, valor quando selecionado e o estado inicial no inspetor de propriedades. Veja Como inserir caixas de seleção e botões de rádio.

Grupo de botões de rádio insere um grupo de botões de opção no ponto de inserção.

Menu de lista coloca uma lista ou menu pop -up no ponto de inserção. Defina o nome, tipo e valores da lista no inspetor de propriedades. Veja Definição das opções do inspetor de propriedades de lista/menu.

Nota: O termo menu pop-up pode ser aplicado a pelo menos dois diferentes objetos no Dreamweaver. Esse objeto insere um campo de menu pop-up em um formulário, para que o visitante de um site possa escolher um valor quando preencher um formul ário. Para obter informações sobre a inserção de um menu pop-up para navegação gráfica, veja Mostrar o menu pop-up.

Menu de salto coloca um menu pop-up de URLs no ponto de inserção. A escolha de um valor nesse menu levará o usuário à URL. Defina a lista de valores na caixa de diálogo que for exibida. Veja Criação de menus de salto.

Campo de imagens coloca um campo de imagens no ponto de inserção. Defina o nome, tamanho, texto alternativo e arquivo de origem no inspetor de propriedades. Veja Como criar um botão gráfico Enviar.

Campo de arquivos coloca um campo de upload de arquivos no ponto de inserção. Defina o nome, tamanho e valor inicial no inspetor de propriedades. Veja Criação de um campo para upload de arquivos.

Página 35 de 160Princípios básicos do Dreamweaver

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

Page 36: 3 Principios basicos do DW

Botão coloca um botão com name e value padrão “Enviar” no ponto de inserção. Para inserir um botão, coloque o ponto de inserção dentro dos limites de um formulário; os botões situados fora dos formulários não aparecerão em todos os navegadores. Utilize o inspetor de propriedades para definir o nome, identificador e a ação. Veja Definição das opções do inspetor de propriedades de Botão.

Identificador é uma maneira de associar estruturalmente o identificador do texto ao campo.

Conjunto de campos é uma tag de contenção para um grupo lógico de elementos do formulário.

Utilização da barra Inserir: Molduras

Na barra Inserir, a guia Molduras contém botões para criar layouts comuns de conjuntos de molduras. Veja Utilização de molduras.

Moldura esquerda, Moldura direita, Moldura superior e Moldura inferior criam, respectivamente, um conjunto de molduras e adicionam uma moldura estreita vazia a um dos lados da moldura atual.

Molduras inferior e esquerda aninhada e Molduras inferior e direita aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia à esquerda ou à direita da moldura atual e, em seguida, inserem outra moldura vazia abaixo dessas duas molduras.

Molduras esquerda e inferior aninhada e Molduras direita e inferior aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia abaixo da moldura atual e, em seguida, inserem outra moldura vazia à esquerda ou à direita de ambas as molduras.

Molduras superior e inferior criam um conjunto de molduras, adicionam um moldura abaixo da moldura atual e, em seguida, inserem outra moldura acima de ambas molduras.

Molduras esquerda e superior aninhada e Molduras direita e superior aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia acima da moldura atual e, em seguida, inserem outra moldura vazia à esquerda ou à direita de ambas molduras.

Molduras superior e esquerda aninhada e Molduras superior e direita aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia à esquerda ou à direita da moldura atual e, em seguida, inserem outra moldura vazia abaixo de ambas molduras.

   

   

Página 36 de 160Princípios básicos do Dreamweaver

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

Page 37: 3 Principios basicos do DW

Utilização da barra Inserir: Head

Na barra Inserir, a guia Head contém objetos para adicionar elementos à seção head dos documentos.

Meta insere uma tag meta na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar informações relativas aos atributos meta. Veja Definição de propriedades meta.

Palavras-chave insere uma tag meta name="keywords" na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar as palavras-chave relacionadas ao documento. Veja Definição de propriedades de palavras-chave.

Descrição insere uma tag meta de descrição na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar o texto que descreve o documento. Veja Definição de propriedades de descrição.

Atualizar insere uma tag meta de atualização na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar o número de segundos que se deve aguardar até que seja efetuada a atualização, assim como a instrução para recarregar a página atual ou ir até outra página. Veja Definição de propriedades de atualização.

Base insere uma tag base na seção head do documento. Será exibida uma caixa de diálogo na qual é possível digitar uma URL básica dos links do documento. Veja Definição de propriedades de base.

Link insere uma tag link na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar informações relativas aos links. Observe que esse link não é de hipertexto; ele é utilizado com mais freqüência para especificar uma folha de estilos externa. Veja Definição de propriedades de link.

Utilização da barra Inserir: Layout

Na barra Inserir, a guia Layout permite exibir as tabelas nas visualizações padrão ou de layout. Na visualização de layout, é possível desenhar células e tabelas de layout.

Tabela coloca uma tabela no ponto de inserção. Veja Apresentação do conteúdo com tabelas.

Desenhar camada cria uma camada. Clique no botão Camada e, em seguida, mova o ponteiro para a janela do documento e arraste, para definir o tamanho e a posição da camada. Como padrão, o Dreamweaver cria uma camada definida pela tag div. Utilize o inspetor de

 

 

Página 37 de 160Princípios básicos do Dreamweaver

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

Page 38: 3 Principios basicos do DW

propriedades para selecionar uma outra tag ou alterar a configuração padrão nas preferências de camadas. Veja Criação de camadas na página.

Visualização padrão exibe as tabelas como uma grade de linhas. Veja Sobre as células e tabelas de layout.

Visualização de layout exibe as tabelas como caixas que podem ser desenhadas, arrastadas e redimensionadas. Veja Sobre as células e tabelas de layout.

Desenhar a célula de layout permite desenhar c élulas individuais de tabela na visualização do projeto da janela do documento. Veja Sobre as células e tabelas de layout.

Desenhar a tabela de layout permite desenhar tabelas inteiras na visualização do projeto da janela do documento. Veja Sobre as células e tabelas de layout.

Utilização da barra Inserir: M ídia

Na barra Inserir, a guia Mídia contém botões para inserir objetos especiais configuráveis, como plug-ins e applets.

Flash coloca um filme Flash no ponto de inserção, utilizando as tags object e embed. Será exibida uma caixa de diálogo, na qual é possível procurar os arquivos de filmes. Os atributos codebase, class id e pluginspage foram predefinidos com os valores adequados ao Macromedia Flash Player; utilize o inspetor de propriedades para especificar outros atributos do filme. Veja Definição de propriedades de filme Flash e Shockwave .

Botão Flash e Texto Flash colocam os objetos Flash no ponto de inserção. Veja Como inserir um objeto de botão Flash e Como inserir um objeto de texto Flash.

Shockwave coloca um filme Macromedia Shockwave no ponto de inserção, utilizando as tags object e embed. Os atributos codebase, class id e pluginspage foram predefinidos com os valores adequados ao Shockwave. É exibida uma caixa de diálogo, para que você possa determinar um arquivo de origem do filme, ou utilize o inspetor de propriedades para especificá-lo. Veja Definição de propriedades de filme Flash e Shockwave .

Applet coloca um applet Java no ponto de inserção (o applet Java aparecerá apenas quando o documento for exibido em um navegador). É exibida uma caixa de diálogo na qual você pode especificar o arquivo que contém o código do applet, ou clique em Cancelar para manter a origem sem especificação. Utilize o inspetor de propriedades para especificar as outras propriedades do applet Java. Veja Definição de propriedades de applets Java.

Param insere uma tag que permite transferir os parâmetros para um applet ou objeto.

ActiveX coloca um controle ActiveX no ponto de inserção. Utilize o inspetor de propriedades para especificar o arquivo de origem e outras propriedades do controle ActiveX. Veja Definição de propriedades do ActiveX.

   

Página 38 de 160Princípios básicos do Dreamweaver

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

Page 39: 3 Principios basicos do DW

Plug-in utiliza a tag embed para inserir, no ponto de inserção, um arquivo que requer um plug-in do Netscape Navigator para sua execução. É exibida uma caixa de diálogo na qual é possível especificar o arquivo de origem. Veja Definição de propriedades de plug-ins do Netscape Navigator.

Utilização da barra Inserir: Script

Na barra Inserir, a guia Script permite inserir elementos de criação de script em uma página.

Script coloca um script no ponto de inserção. É exibida uma caixa de diálogo; escolha uma linguagem e digite o texto do script. Veja Edição de scripts.

Diferente de script insere uma seção noscript, para que o código HTML seja exibido nos navegadores cuja criação de scripts tenha sido desativada.

Server-Side Include coloca uma inclusão do servidor no ponto de inserção. É exibida uma caixa de diálogo na qual é possível escolher o arquivo de origem da inclusão. Veja Como trabalhar com inclusões do servidor.

Utilização da barra Inserir: Tabelas

Na barra Inserir, a guia Tabelas permite inserir as tags relacionadas a tabelas.

Tabela coloca uma tabela no ponto de inserção. É exibida uma caixa de diálogo que permite especificar os atributos da tabela, como o número de linhas e de colunas. Veja Apresentação do conteúdo com tabelas.

Tabela , Linhas da tabela , Cabeçalho da tabela, Dados da tabela e Legenda da tabela inserem, respectivamente, um par de tags relacionadas à tabela (table, tr, th, td ou caption) no ponto de inserção. Veja Apresentação do conteúdo com tabelas.

   

   

   

Página 39 de 160Princípios básicos do Dreamweaver

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

Page 40: 3 Principios basicos do DW

Utilização da barra Inserir: Modelos

Na barra Inserir, a guia Modelos permite salvar um documento como um arquivo de modelo e inserir vários tipos de regiões nesse arquivo.

Para obter mais informações, veja Sobre os modelos do Dreamweaver .

Utilização da barra Inserir: Texto

Na barra Inserir, a guia Texto permite inserir as tags de formatação de texto e de parágrafo.

Nota: Embora alguns botões na guia Texto sejam semelhantes aos encontrados no inspetor de propriedades, suas funções são diferentes. Os botões na guia Texto servem apenas para inserir código e não refletem o estado atual da seleção; se a sele ção contiver texto em negrito, o botão Negrito, no inspetor de propriedades, será exibido como selecionado, enquanto que o mesmo botão na guia Texto não estará ativado.

Editor de tags de fonte exibe o editor da tag da fonte, permitindo definir atributos antes da inserção da mesma. Veja Edição de tags utilizando editores de tags.

Negrito, Itálico , Forte e Ênfase colocam as tags de formatação de texto HTML correspondentes em volta da seleção.

Parágrafo, Aspas duplas, e Texto pré-formatado colocam as tags de bloco de HTML correspondentes em volta da seleção.

Cabeçalho 1, Cabeçalho 2 e Cabeçalho 3 colocam as tags de cabeçalho HTML correspondentes em volta da seleção.

Lista não-ordenada, Lista ordenada e Item da lista colocam as tags de lista HTML correspondentes em volta da seleção.

Lista de definições, Termo de definição e Descrição da definição colocam as tags de lista de defini ções HTML correspondentes em volta da seleção.

Abreviação e Sigla inserem tags que permitem especificar o texto completo de uma abreviação ou sigla, para beneficiar potencialmente os mecanismos de busca, as leitoras de tela, etc.

   

 

 

Página 40 de 160Princípios básicos do Dreamweaver

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

Page 41: 3 Principios basicos do DW

Utilização da barra Inserir: ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP

Na barra Inserir, as guias relativas ao código do servidor contêm botões para inserir partes úteis de código em várias linguagens de servidor. Cada uma das guias está disponível apenas nos documentos que utilizam uma determinada linguagem de servidor. Nessas guias, os objetos mais complexos fornecem caixas de diálogo com botões de ajuda; para obter informações sobre esses objetos, clique no botão Ajuda.

Utilização do inspetor de propriedades

O inspetor de propriedades permite examinar e editar as propriedades do elemento da página que estiver selecionado, como um texto ou objeto inserido. Os elementos da página podem ser selecionados nas visualizações do projeto ou de código.

Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades.

A maioria das alterações feitas às propriedades será imediatamente aplicada à janela do documento. Contudo, no caso de algumas propriedades, as alterações não são aplicadas até que você clique fora dos campos de texto de edi ção de propriedades, pressione Enter ou Tab para passar a outra propriedade.

O conteúdo do inspetor de propriedades varia dependendo do elemento selecionado. Para obter informações sobre determinadas propriedades, selecione um elemento na janela do documento e, em seguida, clique no ícone da Ajuda, no canto superior direito do inspetor de propriedades.

O inspetor de propriedades inicialmente exibir á a maioria das propriedades do elemento selecionado. Clique na seta de expansão, no canto inferior direito do inspetor de propriedades, para reduzi-lo e mostrar apenas as propriedades utilizadas mais comumente.

Dica: Em alguns casos, é possível que certas propriedades incomuns não apareçam, mesmo no inspetor de propriedades expandido; nesses casos, utilize o inspetor de código ou a visualização de código, para codificar essas propriedades manualmente, ou selecione a tag na visualização de código e escolha Modificar > Editar a tag.

Gerenciamento de painéis e grupos de painéis

No Dreamweaver, os painéis são reunidos em grupos de painéis. Cada grupo pode ser expandido ou reduzido, e encaixado ou separado de outros grupos de painéis. Os grupos de

 

 

 

 

Página 41 de 160Princípios básicos do Dreamweaver

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

Page 42: 3 Principios basicos do DW

painéis também podem ser encaixados na janela integrada do aplicativo (apenas na área de trabalho integrada do Windows). Esse recurso facilita o acesso aos painéis necessários sem desorganizar a área de trabalho. Em um grupo, os painéis são mostrados como guias.

Nota: Quando um grupo de painéis é flutuante (separado), aparece uma barra vazia estreita na parte superior do grupo de painéis. Nesta documentação, o termo “barra de título do grupo de painéis” refere-se à área na qual o nome do grupo de painéis é mostrado, e não à barra vazia estreita.

Para expandir ou reduzir um grupo de painéis, siga um dos procedimentos abaixo:

l Clique na seta de expansão, no lado esquerdo da barra de título do grupo de painéis.

l Clique no título do grupo de painéis.

Para selecionar um painel dentro de um grupo expandido de painéis:

Clique na guia do painel.

Para separar um grupo de painéis:

Arraste o grupo de painéis pela respectiva pinça (no lado direito da barra de título do grupo de painéis) até que o contorno indique que ele não está mais anexado.

Para encaixar um grupo de painéis em outros grupos de painéis (área flutuante de trabalho) ou na janela integrada, apenas no Windows:

Arraste o grupo de painéis utilizando a pinça, até que o seu contorno indique que ele não está mais anexado.

A maioria dos painéis pode ser encaixada apenas à esquerda ou à direita da janela do documento na área de trabalho integrada, enquanto os outros (como o inspetor de propriedades e a barra Inserir) podem ser encaixados somente nas partes superior e inferior da janela integrada.

Para arrastar um grupo de painéis flutuantes (desacoplados) sem encaixá-lo:

Arraste o grupo de painéis pela barra situada acima da barra de título. O grupo de painéis não será encaixado encaixado, contanto que não seja arrastado pela respectiva pinça.

Para ver o menu Opções do grupo de painéis:

Expanda o grupo de painéis clicando na seta de expansão.

Página 42 de 160Princípios básicos do Dreamweaver

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

Page 43: 3 Principios basicos do DW

O menu Opções estará visível quando o grupo de painéis for expandido.

Dica: Algumas opções estão disponíveis no menu contextual do grupo de painéis mesmo quando o grupo for reduzido; clique com o botão direito do mouse na barra de título do grupo de painéis para exibir o menu contextual.

Para renomear um grupo de painéis:

1. No menu Opções, à direita da barra de título do grupo de painéis, escolha Renomear o grupo de painéis.

2. Digite um novo nome e clique em OK.

Para desanexar um painel de um grupo de painéis:

Arraste o painel pela respectiva guia até que o seu contorno indique que ele não está mais encaixado.

O painel será exibido em um novo grupo de painéis individual.

Para encaixar um painel em um grupo de painéis:

Arraste o painel pela respectiva guia até que o seu contorno indique que ele está encaixado.

Para maximizar um grupo de painéis, siga um dos procedimentos abaixo:

l No menu Opções, na barra de título do grupo de painéis, escolha Maximizar o grupo de painéis.

l Clique duas vezes em qualquer local da barra de título do grupo de painéis.

O grupo de painéis se expandirá verticalmente de modo a preencher todo o espaço vertical disponível.

Para fechar um grupo de painéis, fazendo-o desaparecer por completo:

Página 43 de 160Princípios básicos do Dreamweaver

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

Page 44: 3 Principios basicos do DW

No menu Opções da barra de título do grupo de painéis, escolha Fechar o grupo de painéis.

O grupo de painéis desaparecerá da tela.

Para abrir um grupo de painéis que não está visível na tela:

Escolha o nome do painel no menu Janela.

Para alterar o tamanho do conjunto inteiro de grupos de painéis (apenas na área flutuante de trabalho):

Arraste o conjunto de grupos de painéis, utilizando o mesmo procedimento para redimensionar qualquer janela no seu sistema operacional. Por exemplo: é possível arrastar a área de redimensionamento no canto inferior direito do conjunto de grupos de painéis.

Definição das preferências dos painéis

Utilize as preferências de painéis para especificar quais painéis e inspetores sempre aparecerão em primeiro plano na janela do documento e quais serão ocultados por essa janela. As preferências de painéis também podem ser utilizadas para especificar se os ícones serão mostrados nas guias dos painéis, se a barra do Iniciador será exibida e quais painéis e inspetores ela conterá.

Para definir as preferências dos pain éis, escolha Editar > Preferências e selecione Painéis, na lista de categorias, à esquerda. Em seguida, escolha qualquer das seguintes opções:

Sempre visíveis permite especificar quais painéis sempre serão mostrados em primeiro plano na janela do documento. Como padrão, todos os painéis, inspetores e outras janelas desse tipo sempre “flutuarão” em primeiro plano na janela do documento. Se for cancelada a seleção de um item nessa lista, a janela do documento poderá ser exibida na frente desse item.

Por exemplo: para que a janela do documento esteja na frente do inspetor de propriedades, desmarque a opção Propriedades. O inspetor de propriedades aparecerá agora na frente da janela do documento, apenas quando ele estiver ativo.

Para que a janela do documento esteja na frente de qualquer painel flutuante, incluído na personalização do Dreamweaver, desmarque Todos os outros painéis.

Nota: A opção Sempre visíveis não se aplicará à área de trabalho integrada quando todos os painéis estiverem encaixados.

Mostrar os ícones nos painéis e no Iniciador determina se a barra do Iniciador será exibida. Quando essa opção é selecionada, o Iniciador é mostrado na área da barra de status e aparece um pequeno ícone na guia de cada painel (veja Sobre a barra de status). Os botões na barra do Iniciador abrem painéis e inspetores.

Mostrar no iniciador especifica quais itens serão exibidos na barra do Iniciador.

Para especificar quais itens aparecem na barra do Iniciador:

   

Página 44 de 160Princípios básicos do Dreamweaver

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

Page 45: 3 Principios basicos do DW

1. Para incluir um item à barra do Iniciador, clique no botão com o sinal de adição (+). 2. Para remover um item da barra do Iniciador, selecione o item e clique no botão com o

sinal de subtração (-). 3. Para alterar a ordem dos itens na barra do Iniciador, selecione um item na lista e clique

no botão de seta.

Por exemplo: para mover um item para a direita na barra do Iniciador, desloque-o para a baixo na lista.

4. Clique em OK.

A barra do Iniciador se modifica para mostrar os itens especificados.

Sobre o painel Site

O painel Site permite definir um site, gerenciar os arquivos locais no site, efetuar o upload e download de arquivos de um site remoto e procurar arquivos no disco local, fora do site. Para obter detalhes sobre a utilização do painel Site, consulte o Como gerenciar o seu site.

Sobre o painel Histórico

O painel Histórico mostra a lista de etapas realizadas no documento ativo desde que foi criado ou aberto, até um número máximo especificado de etapas (o painel Histórico não mostra as etapas realizadas em outras molduras, janelas de documento ou no painel Site). Ele permite desfazer uma ou mais etapas, executá-las novamente e criar novos comandos para automatizar tarefas repetitivas.

O botão deslizante (polegar) do painel Histórico indica inicialmente a última etapa efetuada.

   

 

 

Página 45 de 160Princípios básicos do Dreamweaver

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

Page 46: 3 Principios basicos do DW

Utilização do painel Histórico

O painel Histórico controla cada etapa do seu trabalho no Dreamweaver. Utilize o painel Histórico para desfazer diversas etapas simultaneamente.

Se desejar desfazer a última operação realizada em um documento, escolha Editar > Desfazer, como em qualquer outro aplicativo. O nome do comando Desfazer no menu Editar será alterado, refletindo a última operação efetuada.

O painel Histórico também permite executar novamente etapas j á realizadas e automatizar tarefas, através da criação de novos comandos. Para obter mais informações, veja Como automatizar as tarefas.

Para abrir o painel Histórico:

Escolha Janela > Outros > Histórico.

Para desfazer a última etapa:

Arraste o controle deslizante do painel Histórico uma etapa acima na lista. Esta ação provoca o mesmo efeito que a seleção de Editar > Desfazer.

A etapa desfeita aparecerá acinzentada.

Para desfazer várias etapas simultaneamente, siga um dos procedimentos abaixo:

l Arraste o controle deslizante até que indique uma etapa. l Clique à esquerda de uma etapa, ao longo do caminho do controle deslizante; este rolará

automaticamente até a etapa, desfazendo as etapas durante a rolagem.

Nota: Para rolar automaticamente até uma determinada etapa, clique à esquerda da mesma; o clique em uma etapa seleciona-a. A seleção de uma etapa é diferente da volta à etapa no histórico dos comandos Desfazer.

Da mesma maneira que uma única etapa não pode ser refeita, se várias etapas forem desfeitas, não será mais possível refazê-las depois de efetuar uma nova ação no documento, já que elas desaparecerão do painel Histórico.

Para definir o número de etapas que o painel Histórico manterá e mostrará:

1. Escolha Editar > Preferências e em seguida Geral, na lista de categorias. 2. Digite o Número máximo de etapas da paleta de histórico.

O valor padrão deve ser suficiente para a maioria dos usuários. Quanto mais alto for o número, maiores serão os requisitos de memória do painel Histórico. Isso poderá afetar o desempenho e diminuir significativamente a velocidade do computador. Quando o painel Histórico atingir o número máximo de etapas, as primeiras etapas serão descartadas.

Nota: Não é possível reordenar as etapas no painel Histórico. Não imagine o painel Histórico como uma coleção arbitrária de comandos; considere-o como uma maneira de visualizar as

   

Página 46 de 160Princípios básicos do Dreamweaver

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

Page 47: 3 Principios basicos do DW

etapas já realizadas, na ordem em que foram executadas.

Para apagar a lista de histórico do documento atual:

No menu contextual do painel Histórico, escolha Limpar o histórico.

Esse comando também limpará todas as informações relacionadas aos comandos Desfazer do documento; depois de escolher Limpar o histórico, não será mais possível desfazer as etapas que tiverem sido limpas (observe que o comando Limpar o histórico não refaz as etapas; ele simplesmente remove o registro das etapas da memória do Dreamweaver).

Sobre o Painel de respostas

O Painel de respostas fornece acesso rápido a informações que o ajudam a trabalhar de modo eficaz com o Dreamweaver. Ele inclui tutoriais, Notas técnicas, as extensões do Dreamweaver e outros conteúdos úteis.

Para obter as informações mais recentes sobre o Dreamweaver no site macromedia.com, clique no botão Atualizar.

Utilização do Dreamweaver com outros aplicativos

O Dreamweaver adapta o seu desenho da Web e o processo de desenvolvimento, facilitando, assim, o trabalho com outros aplicativos. Para obter informações sobre o trabalho com outros aplicativos, como navegadores, editores de HTML e de imagens, e ferramentas de animação, consulte os seguintes tópicos:

l Para obter informações sobre a utilização do Dreamweaver com outros editores de HTML, como HomeSite ou BBEdit, veja Utilização de um editor de HTML externo com o Dreamweaver.

l É possível especificar os navegadores preferidos para visualizar o site. Veja Como visualizar as páginas nos navegadores.

l Um editor de imagens externo, como o Macromedia Fireworks, pode ser iniciado no Dreamweaver. Veja Utilização de um editor de imagens externo.

l É possível configurar o Dreamweaver para que inicie um editor diferente, de acordo com o tipo de arquivo. Veja Como iniciar um editor externo para arquivos de mídia.

l Para obter informações sobre a inclusão de interatividade no seu site utilizando o Macromedia Flash, veja Sobre o conteúdo Flash.

l Para saber como adicionar animações no seu site utilizando os filmes Macromedia Shockwave, veja Como inserir filmes Shockwave .

l Para obter informações sobre a utilização do ColdFusion, consulte o Configuração de um aplicativo para a Web.

 

 

 

 

Página 47 de 160Princípios básicos do Dreamweaver

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

Page 48: 3 Principios basicos do DW

Personalização do Dreamweaver: Princ ípios básicos

Existem algumas técnicas básicas que podem ser utilizadas para personalizar o Dreamweaver, de modo a adequá-lo às suas necessidades, sem precisar conhecer códigos complexos ou saber como editar arquivos de texto. Por exemplo: é possível definir preferências, criar os seus próprios atalhos de teclado e adicionar extensões ao Dreamweaver.

Para obter informações sobre a personalização dos arquivos de configuração manualmente, veja “Customizing Dreamweaver” no Centro de suporte da Macromedia.

Definição das preferências

O Dreamweaver oferece definições de preferências que controlam a aparência e o comportamento geral da interface do usuário do programa, bem como as opções relativas a recursos específicos, por exemplo: camadas, folhas de estilos, exibição de código HTML e JavaScript, editores externos e visualização nos navegadores. Este guia do sistema de ajuda contém informações sobre determinadas op ções das preferências, juntamente com o recurso ou tópico associado.

Para obter informações sobre as diversas opções das preferências, consulte os seguintes tópicos:

l Definição das preferências gerais l Ativação das caixas de diálogo Acessibilidade l Definição de preferências de cores de código l Definição de preferências de formatação de código l Definição de preferências de dicas de código l Definição de preferências de regravação de código l Definição das preferências de estilos CSS l Utilização de editores externos, Definição das preferências do editor de imagens externo e

Como iniciar um editor externo para arquivos de mídia, para obter informações sobre as preferências dos tipos de arquivos/editores

l Definição das preferências de fontes l Definição das preferências de realce l Definição das preferências de elementos invisíveis l Definição das preferências de camadas l Definição das preferências de visualização de layout l Definição de preferências do novo documento l Definição das preferências dos painéis l Configurar as opções de preferência em Visualizar no navegador l Definição das preferências do Quick Tag Editor l Como definir as opções de preferências do painel Site l Definição das preferências da barra de status l Definição de preferências do Validador

   

 

 

Página 48 de 160Princípios básicos do Dreamweaver

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

Page 49: 3 Principios basicos do DW

Definição das preferências gerais

As preferências gerais controlam a aparência do Dreamweaver como um todo. Para alterá-las, escolha Editar > Preferências ou e, em seguida, clique em Geral. As preferências gerais dividem-se em duas subcategorias: Opções do documento e de edição.

Mostrar apenas a janela do site na inicialização (apenas na área flutuante de trabalho) exibe somente o painel Site e os outros painéis selecionados, em vez de um novo documento, quando o Dreamweaver for inicializado.

Abrir os arquivos em outra janela (apenas no Windows) facilita a abertura de diversos documentos simultaneamente. Quando essa opção estiver desativada e for escolhida a opção Arquivo > Abrir, cada arquivo aberto aparecerá na janela, substituindo o documento anterior (essa opção não se aplica à abertura de arquivos no menu Site, nem à ação de clique duas vezes no ícone de um arquivo, entre outras).

Advertir ao abrir arquivos somente de leitura alerta quando for aberto um arquivo somente de leitura (bloqueado). São oferecidas as opções de desbloquear/retirar ou visualizar o arquivo, ou cancelar.

Atualizar os links ao mover os arquivos determina a ação desencadeada pelo Dreamweaver quando um documento for movido, renomeado ou excluído no site. É possível definir essa preferência para que os links sejam sempre atualizados automaticamente, nunca sejam atualizados ou solicitar que você efetue uma atualização. Veja Gerenciamento de links.

Alterar a área de trabalho (apenas no Windows) permite escolher um dos três layouts de área de trabalho: área de trabalho integrada com os painéis à direita, área de trabalho integrada com os painéis à esquerda, adaptada aos codificadores, ou área flutuante de trabalho semelhante à do Dreamweaver 4. Após a escolha da nova área de trabalho, saia do Dreamweaver e reinicie -o para ver as altera ções. Para obter mais informações, veja Escolha de um layout de área de trabalho.

Mostrar a caixa de diálogo quando inserir objetos determina se o Dreamweaver solicitará informações adicionais durante a inserção de imagens, tabelas, filmes Shockwave e determinados outros objetos, utilizando a barra Inserir ou o menu Inserir. Se essa opção estiver desativada, a caixa de di álogo não aparecerá e será necessário utilizar o inspetor de propriedades para especificar o arquivo de origem das imagens, o número de linhas em uma tabela, etc. No caso das imagens cambiáveis e do HTML do Fireworks, sempre aparecerá uma caixa de diálogo quando o objeto for inserido, independentemente da definição dessa opção (para anular essa definição temporariamente, mantenha pressionada a tecla Control e clique ao criar e inserir objetos).

Edição mais rápida de tabela (atualização adiada) acelera a digitação em tabelas adiando alguns ajustes na largura de colunas e na altura de linhas, até que você clique fora da tabela. Quando essa opção está ativa, é possível atualizar a tabela durante a sua edição, pressionando as teclas Control e a barra de espaço.

Ativar a entrada linear de bytes duplos permite inserir texto de bytes duplos diretamente na janela do documento se você estiver utilizando um ambiente de programação ou kit de linguagem que facilite o texto de bytes duplos (por exemplo: os caracteres japoneses). Quando essa opção for cancelada, aparecerá uma janela para a entrada de texto, destinada à digitação e conversão de texto de bytes duplos; o texto aparecerá na janela do documento após ter sido

   

Página 49 de 160Princípios básicos do Dreamweaver

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

Page 50: 3 Principios basicos do DW

aceito. Veja também Definição das preferências de fontes.

Alternar para o parágrafo simples depois do cabeçalho especifica que o ato de pressionar Enter no final de um parágrafo de cabeçalho, na visualização do projeto, criará um novo parágrafo com a tag p. (o parágrafo de cabeçalho é aquele que contém uma tag de cabeçalho, por exemplo: h1 ou h2). Quando a opção estiver desativada, o ato de pressionar Enter, no final de um parágrafo de cabeçalho, criará um novo parágrafo com a mesma tag de cabeçalho (permitindo que sejam digitados vários cabeçalhos em uma linha e, em seguida, voltar e preencher os detalhes).

Permitir múltiplos espaços consecutivos especifica que a digitação de dois ou mais espaços, na visualização do projeto, criará espaços não-separáveis que serão exibidos no navegador como múltiplos espaços (por exemplo: é possível digitar dois espaços entre as frases, como em uma máquina de escrever). Essa opção destina-se principalmente às pessoas que estão habituadas a digitar em processadores de texto. Quando essa opção estiver desativada, os espaços múltiplos serão tratados como um único espaço (porque os navegadores consideram vários espaços como um único espaço).

A utilização de <strong> e <em> em vez de <b> e <i> especifica que o Dreamweaver deve aplicar a tag strong sempre que uma ação aplique normalmente a tag b e aplicar tag em sempre que uma ação colocar a tag i. Essas ações incluem o clique nos botões Negrito e Itálico, no inspetor de propriedades do texto, e a escolha de Texto > Estilo > Negrito ou Texto > Estilo > Itálico. Para utilizar as tags b e i nos seus documentos, desmarque esta opção.

Nota: O World Wide Web Consortium não recomenda a utilização das tags b e i; as tags strong e em fornecem mais informações semânticas do que as tags b e i.

Número máximo de etapas da paleta de histórico determina o número de etapas que o painel Histórico mantém e mostra (o valor padr ão deverá ser suficiente para a maioria dos usuários). Se o número máximo de etapas for excedido no painel Histórico, as etapas mais antigas serão descartadas. Veja Como automatizar as tarefas.

Barra de inserção permite visualizar o conteúdo da barra Inserir como ícones e texto, apenas ícones ou apenas texto.

Dicionário ortográfico lista os dicionários ortográficos disponíveis. Se um dicionário contiver diversos dialetos ou convenções ortográficas (ingl ês britânico e americano, por exemplo), os dialetos estarão listados separadamente no menu pop-up Dicionário.

Definição das preferências de fontes

Utilize as preferências de fontes para definir as fontes que o Dreamweaver usará para exibir cada codificação de fonte. A codificação do documento determina como ele será exibido no navegador. As definições de fontes do Dreamweaver permitem mostrar uma determinada codificação utilizando a fonte e o tamanho preferidos, sem afetar a aparência do documento quando for visualizado por outras pessoas em um navegador. Veja Configuração de um documento para obter informações sobre a defini ção de uma codificação padrão para novos documentos.

Para definir as fontes a serem utilizadas no Dreamweaver para cada tipo de

   

Página 50 de 160Princípios básicos do Dreamweaver

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

Page 51: 3 Principios basicos do DW

codificação:

1. Escolha Editar > Preferências e clique em Fontes, na lista de categorias. 2. Selecione o tipo de codificação (como Ocidental (Latin1) ou Japonês, por exemplo) na

lista Definições de fontes e, em seguida, escolha as fontes a serem utilizadas no Dreamweaver para essa codificação, nos menus pop-up de fontes situados abaixo da lista Definições de fontes.

Nota: As fontes escolhidas não afetam a aparência do documento no navegador de um visitante do seu site.

A seguir estão as descrições mais detalhadas das opções.

Definições de fontes permitem especificar o conjunto de fontes a ser utilizado no Dreamweaver para os documentos que utilizam um determinado tipo de codificação. Por exemplo: para especificar as fontes a serem utilizadas em documentos escritos em japonês, selecione Japonês na lista de Defini ções de fontes e, em seguida, escolha uma fonte proporcional, uma fonte fixa, uma fonte para a visualização de código e uma fonte para o inspetor de fontes nos menus abaixo; todos os documentos com codificações japonesas serão exibidos utilizando as fontes especificadas.

Nota: Para que uma fonte seja exibida nos menus pop-up de fontes, é necessário que ela esteja instalada no computador. Por exemplo: para poder visualizar textos escritos em japonês, é necessário contar com uma fonte japonesa instalada.

Para especificar as fontes utilizadas no ingl ês dos EUA e em todos os idiomas da Europa ocidental, escolha Ocidental, na lista Definições de fontes e, em seguida, escolha um conjunto de quatro fontes nos menus pop-up de fontes. Para definir as fontes apropriadas de bytes duplos dos idiomas asiáticos, escolha Japonês, Chinês tradicional, Chinês simplificado ou Coreano. Para exibir um idioma asiático, é necessário utilizar um sistema operacional que aceite as fontes de bytes duplos. Também é possível escolher as fontes para as codificações Centro-europeu, Cirílico, Grego, Islandês Mac ou Outra.

Fonte proporcional é a fonte utilizada pelo Dreamweaver para exibir texto normal (por exemplo: texto em parágrafos, cabeçalhos e tabelas). O padrão depende das fontes que estiverem instaladas no seu sistema. Na maior parte dos sistemas dos EUA, o padrão é Times New Roman 12 pontos (Média).

Fonte fixa é a fonte utilizada pelo Dreamweaver para exibir o texto contido nas tags pre, code e tt. O padrão depende das fontes que estiverem instaladas no seu sistema. Na maior parte dos sistemas dos EUA, o padrão é Courier New 10 pontos (Pequena).

Visualização de código é a fonte utilizada para todos os textos que aparecem no inspetor de código. O padrão depende das fontes que estiverem instaladas no seu sistema.

Inspetor de tags é a fonte utilizada para todos os textos que aparecem no inspetor de tags. Para obter mais informações, veja Edição de tags utilizando o inspetor de tags.

Definição das preferências de realce

As preferências de realce permitem personalizar as cores utilizadas pelo Dreamweaverpara

   

Página 51 de 160Princípios básicos do Dreamweaver

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

Page 52: 3 Principios basicos do DW

identificar as regiões do modelo, os itens de biblioteca, as tags de outros fabricantes, os elementos do layout e o código. Para obter mais informações, consulte os seguintes tópicos:

l Nos modelos e nos arquivos que neles se basearem, as regiões editáveis e as bloqueadas são marcadas em cores diferentes de realce. Para personalizar as cores do realce do modelo, veja Como definir as preferências de realce do modelo.

l Para especificar a cor do realce dos itens de biblioteca, veja Defina as preferências de realce da biblioteca.

l Para especificar uma cor de realce do conteúdo contendo tags de outros fabricantes, veja “Customizing Dreamweaver”, no Centro de suporte da Macromedia.

l Para especificar as cores do realce das c élulas e tabelas de layout, veja Sobre as células e tabelas de layout.

l Para especificar as cores do texto na visualização de código da janela do documento ou no inspetor de código, veja Definição de preferências de cores de código.

Utilização do editor de atalhos de teclado

Utilize o editor de atalhos de teclado para criar as suas próprias teclas de atalho, editar os atalhos existentes ou utilizar os conjuntos de atalhos predeterminados.

Nota: Os diagramas que mostram todos os atalhos de teclado na configuração padrão do Dreamweaver estão disponíveis no site da Macromedia na Web.

Para editar os atalhos de teclado:

1. Escolha Editar > Atalhos de teclado.

Será exibida a caixa de di álogo Atalhos de teclado.

 

 

Página 52 de 160Princípios básicos do Dreamweaver

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

Page 53: 3 Principios basicos do DW

2. Defina qualquer uma das seguintes opções: ¡ Conjunto atual permite escolher um conjunto de atalhos predeterminados,

incluídos no Dreamweaver, ou qualquer conjunto personalizado definido pelo usuário. Os conjuntos predeterminados estão listados no início do menu. Por exemplo: se você estiver familiarizado com os atalhos do HomeSite ou BBEdit, poderá utilizá-los escolhendo o conjunto predeterminado correspondente.

¡ Comandos permite selecionar uma categoria de comandos para editá-los. Por exemplo: é possível editar os comandos de menu, como Abrir o arquivo, ou um dos comandos de edição de código, como Ajustar as chaves.

¡ A lista de comandos exibe os comandos associados à categoria selecionada no menu pop-up Comandos, assim como os atalhos a eles atribuídos. A categoria Comandos de menu exibe essa lista como uma visualização hierárquica que reflete a estrutura dos menus. As outras categorias apresentam listas não-hierárquicas de comandos pelo nome (por exemplo: Sair do aplicativo).

¡ Atalhos exibe todos os atalhos atribuídos ao comando selecionado. ¡ Adicionar o item (+) adiciona um novo atalho ao comando. Clique nesse botão

para adicionar uma nova linha em branco na caixa de texto Atalhos. Digite uma nova combinação de teclas e clique em Alterar, para adicionar um novo atalho de teclado a este comando. Podem ser atribuídos dois diferentes atalhos de teclado a cada comando; se já existirem dois atalhos designados para um comando, o botão Adicionar o item não executará nenhuma ação.

¡ Remover o item (-) remove o atalho selecionado da lista de atalhos. ¡ Pressione a tecla exibe a combinação de teclas a ser digitada ao adicionar ou

alterar um atalho. ¡ Alterar adiciona a combinação de teclas, mostrada na caixa de texto Pressione a

tecla, à lista de atalhos ou altera o atalho selecionado de modo a refletir a combinação de teclas especificada.

¡ Duplicar duplica o conjunto atual. Denomine o novo conjunto; o nome padrão é o nome atual do conjunto acrescido da palavra cópia .

¡ Renomear renomeia o conjunto atual. ¡ Salvar como arquivo HTML salva o conjunto atual em um formato de tabela

Página 53 de 160Princípios básicos do Dreamweaver

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

Page 54: 3 Principios basicos do DW

HTML, para fácil visualização e impressão. É possível abrir o arquivo HTML no navegador e imprimir os atalhos, para refer ência rápida.

¡ Excluir exclui um conjunto (o conjunto ativo não pode ser excluído).

Para remover um atalho de um comando:

1. No menu pop-up Comandos, selecione uma categoria de comando.

A lista Comandos exibe os comandos incluídos na categoria.

2. Na lista Comandos, selecione um comando.

Os atalhos atribuídos ao comando aparecem na caixa de texto Atalhos.

3. Selecione um atalho. 4. Clique no botão Remover o item (-).

Para adicionar um atalho a um comando:

1. No menu pop-up Comandos, selecione uma categoria de comando.

A lista Comandos exibe os comandos incluídos na categoria.

2. Na lista Comandos, selecione um comando.

Os atalhos atribuídos ao comando aparecem na caixa de texto Atalhos.

3. Para adicionar um atalho a um comando, siga um dos procedimentos abaixo: ¡ Se houver menos de dois atalhos atribuídos ao comando, clique no botão Adicionar

o item (+). Será exibida uma nova linha em branco na caixa de texto Atalhos e o ponto de inserção se moverá para a caixa de texto Pressione a tecla.

¡ Se houver dois atalhos atribuídos ao comando, selecione um deles (este será substituído pelo novo atalho). Em seguida, clique na caixa de texto Pressione a tecla.

4. Pressione uma combinação de teclas.

A combinação de teclas será exibida na caixa de texto Pressione a tecla.

Nota: Se ocorrer algum problema com a combinação de teclas (por exemplo: se ela já tiver sido atribuída a outro comando), será exibida uma mensagem explicativa, logo abaixo do campo Atalhos, e talvez não seja possível adicionar ou editar o atalho.

5. Clique em Alterar. A nova combinação de teclas será atribu ída ao comando.

Para editar um atalho já existente:

1. No menu pop-up Comandos, selecione uma categoria de comando.

A lista Comandos exibe os comandos incluídos na categoria.

2. Na lista Comandos, selecione um comando.

Os atalhos atribuídos ao comando aparecem na caixa de texto Atalhos.

3. Selecione um comando para alterá-lo. 4. Clique na caixa de texto Pressione a tecla e digite uma nova combinação de teclas.

Página 54 de 160Princípios básicos do Dreamweaver

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

Page 55: 3 Principios basicos do DW

5. Clique no botão Alterar, para alterar o atalho.

Nota: Se ocorrer algum problema com a combinação de teclas (por exemplo: se ela já tiver sido atribuída a outro comando), será exibida uma mensagem explicativa, logo abaixo do campo Atalhos, e talvez não seja possível adicionar ou editar o atalho.

Como adicionar extensões no Dreamweaver

As extensões são novos recursos que podem ser facilmente adicionados ao Dreamweaver. É possível utilizar muitos tipos de extensões; por exemplo: há extensões que permitem reformatar tabelas, efetuar conexões a bancos de dados auxiliares ou que podem ajudá-lo a escrever scripts para navegadores.

Nota: Para instalar extensões que todos os usuários possam utilizar em um sistema operacional multiusuário, é necessário ter efetuado login como Administrador. Para obter mais informações sobre os sistemas multiusuário, veja Personalização do Dreamweaver nos sistemas multiusuário.

Para ter acesso às mais recentes extensões do Dreamweaver, utilize o site de intercâmbio da Macromedia na Web. Neste site, é possível efetuar o login e o download das extensões (muitas das quais são gratuitas), participar de grupos de discussão, visualizar as avaliações e críticas dos usuários, além de instalar e utilizar o Extension Manager. É necessário instalar o Extension Manager antes de instalar as extensões.

O Extension Manager é um aplicativo independente que permite instalar e gerenciar as extensões nos aplicativos da Macromedia. Inicie o Extension Manager no Dreamweaver escolhendo Comandos > Gerenciar extensões.

Para instalar e gerenciar as extensões:

1. No site do Macromedia Exchange na Web, clique no link de download de uma extensão.

O seu navegador poderá permitir escolher e abri-la diretamente no site ou salvá-la em disco.

¡ Se a extensão for aberta diretamente no site, o Extension Manager executará a instalação automaticamente.

¡ Se a extensão for salva no disco, um bom local para salvar o arquivo do pacote de extensão (.mxp) é a pasta Downloaded Extensions, na pasta do aplicativo Dreamweaver do computador.

2. Clique duas vezes no arquivo do pacote de extensão ou abra o Extension Manager e escolha Arquivo> Instalar a extensão.

A extensão será instalada no Dreamweaver. Algumas extensões não estão acessíveis enquanto o Dreamweaver não for reiniciado; é possível que haja uma solicitação para que você saia do aplicativo e o reinicie.

Utilize o Extension Manager para remover extensões ou ver mais informações sobre uma determinada extensão.

   

Página 55 de 160Princípios básicos do Dreamweaver

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

Page 56: 3 Principios basicos do DW

Personalização do Dreamweaver nos sistemas multiusu ário

O Dreamweaver pode ser personalizado para atender às suas necessidades mesmo em um sistema operacional multiusuário, como o Windows NT, Windows 2000 ou Windows XP, e impede que a configuração personalizada de um usuário afete qualquer outra. 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ê. Esses arquivos de configuração são armazenados em uma pasta que lhe pertence. Por exemplo: no Windows XP, eles são armazenados em C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\Configuration (que pode estar dentro de uma pasta oculta).

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 o Dreamweaver for reinstalado ou atualizado, ele fará automaticamente cópias de segurança dos arquivos de configura ção do usuário existentes de modo que, se eles tiverem sido personalizados manualmente, o usuário ainda terá acesso às alterações efetuadas.

Como planejar e configurar o seu site

Um site da Web é um conjunto de documentos vinculados com atributos compartilhados, como tópicos relacionados, uma concepção semelhante ou uma finalidade compartilhada.

O Macromedia Dreamweaver MX é uma ferramenta de cria ção e gerenciamento de sites que pode ser utilizada para criar sites da Web completos, além de documentos individuais. Para obter os melhores resultados, projete e planeje o seu site da Web antes de criar qualquer página contida nele.

Nota: Se não quiser aguardar até a criação dos documentos, tente utilizar algumas das ferramentas de criação de documentos do Dreamweaver, para criar um exemplo de documento (consulte Como criar um novo documento em branco). Mas não tente criar os documentos definitivos antes de configurar o site.

A primeira etapa da cria ção de um site da Web é o planejamento (consulte Sobre o planejamento e projeto de sites). A etapa seguinte envolve a configura ção da estrutura básica do site (consulte Como configurar um site do Dreamweaver). Ao iniciar a criação do conteúdo do site, considere a possibilidade de baseá-lo em um modelo do Dreamweaver (consulte Sobre os modelos do Dreamweaver e Como criar um modelo no Dreamweaver).

Se você já tiver um site em um servidor da Web e desejar utilizar o Dreamweaver para editá-lo, consulte Como editar um site do Dreamweaver.

Este capítulo inclui as seguintes seções:

   

 

 

Página 56 de 160Princípios básicos do Dreamweaver

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

Page 57: 3 Principios basicos do DW

Sobre o planejamento e projeto de sites

Como configurar um site do Dreamweaver

Como configurar uma pasta local

Como configurar uma pasta remota

Como editar um site do Dreamweaver

Como editar os sites da Web já existentes no Dreamweaver

Sobre o planejamento e projeto de sites

No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de armazenamento de documentos pertencentes a um site da Web. Ao iniciar a criação de um site da Web, é necessário seguir uma série de etapas de planejamento para assegurar que o seu site funcionará. Mesmo se estiver criando apenas uma home page pessoal a ser visitada apenas por amigos e família, é recomendável planejar o site com cuidado, para assegurar que todos poderão utilizá-lo com sucesso.

Como determinar os seus objetivos

A decisão de quais serão os objetivos do seu site é a primeira etapa na criação de um site da Web. Consulte o cliente sobre o site que ele deseja. O que pretende atingir com um site da Web? Tome nota de seus objetivos, para que se lembre deles durante o processo de criação. Os objetivos ajudam a concentrar e destinar o site da Web às suas necessidades particulares.

Um site da Web que divulga notícias sobre um tema específico deve ter aparência e navegação diferentes de um site da Web destinado a vender produtos. A complexidade dos seus objetivos afetará a navegação, as ferramentas de criação a serem utilizadas (Flash, Director e assim por diante) e até mesmo a aparência e impressão causadas pelo site.

Como escolher um público-alvo

Após decidir o que deseja alcançar com o seu site da Web, você precisará decidir quem deseja que o visite. Esta pode ser uma pergunta pouco importante, j á que a maioria das pessoas

 

 

 

 

 

 

Página 57 de 160Princípios básicos do Dreamweaver

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

Page 58: 3 Principios basicos do DW

deseja que todo mundo visite o seu site da Web. No entanto, é dif ícil criar um site da Web que todas as pessoas do mundo irão utilizar. As pessoas utilizam navegadores diferentes, se conectam em velocidades diferentes e podem ou não possuir plug -ins de mídia. Todos estes fatores podem afetar o uso do seu site. Por estes motivos, você precisa determinar o seu público-alvo.

Pense nas pessoas que serão atra ídas ao seu site da Web ou quem espera atrair. Que tipos de computadores você acredita que elas usarão? Qual será a plataforma predominante (Macintosh, Windows, Linux e assim por diante)? Qual é a velocidade de conexão média (modem 33,6 ou DSL)? Que tipos de navegadores e tamanhos de monitores estas pessoas estarão utilizando? Você está criando um site de intranet onde todos estarão utilizando o mesmo sistema operacional de computador e o mesmo navegador? Todos estes fatores podem afetar muito a aparência que a sua página da Web terá para os visitantes.

Depois de ter escolhido o seu público e determinado que tipos de computadores, velocidades de conexão e navegadores os seus visitantes utilizarão, inicie o seu projeto.

Digamos, por exemplo: que o seu público-alvo seja composto predominantemente de usuários do Windows que possuem monitores de 17 polegadas e utilizam a versão 3.0 ou mais avançada do Internet Explorer. À medida que projetar a sua página da Web, você deverá testar o funcionamento do site no Internet Explorer num computador com Windows e um tamanho de tela de 800 por 600 pixels. É pouco provável que haja visitantes utilizando o Netscape Navigator na plataforma Macintosh, mas você deve assegurar que o seu site funcione nestes tipos de computadores mesmo assim, até mesmo se a exibi ção não for exatamente a mesma que a do público-alvo.

Como criar sites compat íveis com o navegador

Ao criar um site, você deve se lembrar de que há vários navegadores da Web que poderão ser utilizados pelos seus visitantes. Se possível, desenhe sites com ampla compatibilidade com o navegador, levando em consideração as outras restrições do projeto.

São utilizados cerca de 25 navegadores da Web diferentes, sendo que a maioria deles foi lançada em mais de uma versão. Mesmo que você vise apenas o Netscape Navigator e o Microsoft Internet Explorer, que são utilizados pela maioria dos usuários da Web, lembre-se de que nem todos têm a versão mais recente desses navegadores. Se o site estiver na Web, mais cedo ou mais tarde alguém irá visitá-lo utilizando o Netscape Navigator 2.0, o navegador que a AOL fornece aos seus clientes ou algum navegador somente de texto como o Lynx.

Em algumas circunstâncias, não é necessário criar sites compatíveis com diversos navegadores. Por exemplo: se o site estiver disponível apenas na intranet de sua empresa e você souber que todos os funcionários utilizam o mesmo navegador, é possível otimizar o site de modo a ser compatível com esse navegador. Da mesma forma, se for criado conteúdo HTML para ser distribuído em CD-ROM junto com um determinado navegador, é razoável supor que todos os seus clientes terão acesso a esse navegador.

Na maioria dos sites da Web projetados para visitas públicas, é conveniente torná-los visualizáveis no maior número possível de navegadores. Escolha um ou dois navegadores como principais e desenhe o site visando-os, mas tente explorar o site com outros navegadores de vez em quando, para evitar incluir muito conteúdo incompatível. Também é possível enviar uma mensagem para um grupo de discussão, solicitando-lhes que visualizem o seu site. Esta pode ser uma boa maneira de obter comentários de um público variado.

 

 

Página 58 de 160Princípios básicos do Dreamweaver

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

Page 59: 3 Principios basicos do DW

Quanto mais sofisticado for o site termos de layout, animação, conteúdo de multimídia e interação, menor será a probabilidade de que seja compatível com diversos navegadores. Nem todos os navegadores podem executar o JavaScript, por exemplo. Uma página contendo texto simples que não utiliza caracteres especiais será exibida sem problemas em qualquer navegador, porém essa página parecerá menos atraente do que aquelas que contêm imagens, layout e forem interativas. Tente equilibrar o projeto, para obter o máximo de efeito e compatibilidade com diferentes navegadores.

Um procedimento útil consiste em fornecer várias versões de certas páginas importantes, como a home page do site. Por exemplo: é possível desenhar uma versão dessa página com molduras e outra sem molduras. Você poderá incluir na sua página da Web um comportamento para direcionar automaticamente os visitantes que não dispuserem de navegadores com suporte a molduras para a versão sem molduras. Para obter mais informações, consulte Como utilizar as ações de comportamentos enviadas com o Dreamweaver.

Como organizar a estrutura do site

O cuidado na organização do site desde o início pode, posteriormente, evitar frustrações e economizar tempo. Se começar a criar documentos sem pensar em que local da hierarquia da pasta eles deverão ser armazenados, é possível que você tenha que lidar com uma pasta de dif ícil acesso e com demasiados arquivos, ou que os arquivos relacionados estejam espalhados em várias pastas com nomes semelhantes.

Em geral, a configuração de um site envolve a cria ção de uma pasta no disco local, que contém todos os arquivos do site (conhecido como o site local), e a cria ção e edição de documentos contidos nesta pasta. Quando o site estiver pronto para ser publicado e visualizado pelo público, estes arquivos poderão, então, ser copiados para um servidor da Web. Esta abordagem é melhor do que criar e editar os arquivos no próprio site público ativo da Web, pois ela permite testar as alterações no site local antes de torná-las publicamente visualizáveis e, em seguida, quando o site estiver finalizado, efetuar o upload dos arquivos locais e atualizar todo o site público de uma vez só.

Para coordenar o site local com o Dreamweaver, consulte Como configurar um site do Dreamweaver. Depois que o site local tiver sido configurado com o Dreamweaver, você poderá, entre outras coisas, gerenciar os arquivos do site, manter um registro dos links e atualizar as páginas com mais facilidade.

Classifique o site em categorias Coloque na mesma pasta as páginas que se relacionarem. Por exemplo: todos os press releases, informações de contato e oportunidades de empregos em sua empresa poderão ser armazenados em uma pasta, enquanto que as páginas relativas ao seu catálogo on-line poderão ser armazenadas em outra pasta. Sempre que necessário, utilize subpastas. Este tipo de organização facilitará a manutenção e navegação do seu site.

Decida onde serão armazenados itens como imagens e arquivos de som  Por exemplo: é conveniente colocar todas as imagens em um único local, para facilitar a localização das mesmas quando forem inseridas em uma página. Algumas vezes, os criadores colocam todos os itens destinados a um site e que não forem HTML em uma pasta denominada Propriedades. É possível que esta pasta contenha outras pastas (para imagens, filmes Shockwave e arquivos de som, por exemplo). Alternativamente, é possível que haja uma pasta Propriedades para cada grupo de páginas relacionadas no site, se os diversos grupos não compartilharem muitas propriedades.

 

 

Página 59 de 160Princípios básicos do Dreamweaver

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

Page 60: 3 Principios basicos do DW

Utilize a mesma estrutura nos sites locais e remotos O site local e o site remoto da Web deverão ter exatamente a mesma estrutura. Se você criar um site local utilizando o Dreamweaver e, em seguida, efetuar o upload de tudo para o site remoto, o Dreamweaver se encarregará de duplicar com exatidão a estrutura local no site remoto.

Como criar a aparência do projeto

Muito tempo será economizado no processo se o seu projeto e layout forem planejados antes de iniciar o trabalho no Dreamweaver. Pode ser tão simples como criar um desenho de protótipo numa folha de papel, de acordo com a aparência desejada do layout do site. Uma abordagem mais avançada seria criar um desenho composto do site, utilizando aplicativos como o Macromedia FreeHand ou Fireworks. O importante é ter um protótipo do layout e projeto, para que este possa ser seguido mais tarde, quando o site estiver sendo constru ído.

É importante manter a coerência no layout e projeto da sua página. É do seu interesse que os usuários possam clique nas páginas do seu site sem ficarem confusos, porque todas as páginas têm uma aparência diferente ou a navegação está posicionada num local diferente em cada página.

Como projetar o esquema de navegação

Um outro aspecto em que o planejamento de sites apresenta vantagens é a navegação. À medida que cria o seu site, pense na experiência que você deseja proporcionar aos visitantes. Pense em como um visitante ao seu site poderá se mover de uma área para outra. Considere os

   

   

Página 60 de 160Princípios básicos do Dreamweaver

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

Page 61: 3 Principios basicos do DW

seguintes aspectos:

A informação “Você está aqui” permite aos visitantes saber facilmente onde estão no seu site e como retornar à página inicial.

O recurso de busca e os índices facilitam a localização de quaisquer informações buscadas pelos visitantes.

Os comentários fornecem uma maneira através da qual os visitantes podem entrar em contato com o webmaster (quando necessário) e com outras pessoas relevantes associadas à empresa ou ao site, caso ocorra qualquer problema com o site.

Projete a aparência da sua navegação. A navegação deve ser coerente no site inteiro. Se uma barra de navegação for colocada no alto da sua home page, procure mantê-la nesta posi ção em todas as páginas vinculadas.

O Dreamweaver possui duas ferramentas de navegação que podem ser utilizadas para criar o esquema de navegação. Para obter mais informações, consulte Links e navegação.

Como planejar e reunir as propriedades

Depois que souber qual será a aparência do projeto e do layout, é possível criar e reunir as propriedades que serão necessárias. As propriedades podem ser itens como imagens, texto ou mídia (Flash, Shockwave, entre outros). Antes de começar a desenvolver o site, assegure -se de ter todos estes itens reunidos e prontos para serem utilizados. Caso contrário, você terá que interromper o desenvolvimento constantemente para localizar uma imagem ou criar um botão.

Se estiver utilizando imagens de um site de clip-art ou elas estiverem sendo criadas por alguma outra pessoa, assegure-se de reuni-las e colocá-las numa pasta do site (consulte Como organizar a estrutura do site). Se estiver criando as propriedades você mesmo, assegure -se de criá-las antes de iniciar o desenvolvimento, incluindo todas as imagens necessárias, se estiver utilizando imagens cambiáveis. Em seguida, organize as propriedades, para que possa acessá-las facilmente enquanto estiver criando o site no Dreamweaver.

O Dreamweaver pode facilitar a reutilização de layouts e elementos de página em vários tipos de documentos, através da utilização de modelos e bibliotecas. No entanto, é mais fácil criar novas páginas com modelos e bibliotecas do que aplicá-los a documentos existentes.

Utilize os modelos, se souber que muitas de suas páginas utilizarão o mesmo layout. Planeje e projete um modelo para tal layout e, em seguida, você poderá criar novas páginas a partir do modelo. Se decidir alterar o layout de todas as páginas, basta alterar o modelo.

Nota: Existem algumas restrições quanto às alterações que podem ser feitas aos documentos que se baseiam em modelos. O melhor aproveitamento que se pode dar aos modelos ocorre em ambientes de colaboração, para garantir que todos estejam utilizando o mesmo layout de página. É possível que os itens de biblioteca ofereçam uma maior flexibilidade de uso fora dos ambientes de colaboração.

Utilize itens de biblioteca, se você já souber que determinadas imagens ou outros elementos aparecerão em muitas páginas do site. Crie estes elementos com antecedência e transforme-os em itens de uma biblioteca. Se estes itens forem alterados posteriormente, a nova versão

 

 

Página 61 de 160Princípios básicos do Dreamweaver

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

Page 62: 3 Principios basicos do DW

atualizada aparecerá em todas as páginas que os utilizarem.

Para obter mais informações sobre como reutilizar os layouts e elementos de uma página, consulte Como gerenciar as propriedades do site, bibliotecas e modelos.

Como configurar um site do Dreamweaver

Depois de planejar a estrutura do site (consulte Como organizar a estrutura do site) ou se já houver um site, designe um novo site no Dreamweaver, para poder passar à criação.

Os sites do Dreamweaver constituem uma maneira de organizar todos os documentos associados a um site da Web. Encare-os como um projeto. Para cada site da Web a ser criado, é necessário configurar um site. A organização dos arquivos em um site permite utilizar o Dreamweaver com o FTP para efetuar o upload do site para o servidor da Web, controlar automaticamente e manter os links, gerenciar e compartilhar os arquivos. Não é possível fazer uso completo dos recursos do Dreamweaver, exceto se for definido um site.

Os sites do Dreamweaver consistem de até três partes, dependendo do ambiente e do tipo de site da Web a ser criado:

l Pasta local é o diretório de trabalho. O Dreamweaver se refere a essa pasta como “site local”. Para obter mais informações, consulte Como configurar uma pasta local.

l Pasta remota é onde são armazenados os arquivos, dependendo do ambiente: para teste, produção, colaboração e assim por diante. O Dreamweaver se refere a essa pasta como “site remoto”. Para obter mais informações, consulte Como configurar uma pasta remota.

l Pasta de páginas dinâmicas é a pasta onde o Dreamweaver processa as páginas dinâmicas. Para obter mais informações, consulte Como especificar onde as páginas dinâmicas podem ser processadas.

Para iniciar o procedimento, configure na íntegra um site do Dreamweaver ou inicie apenas a primeira etapa, configurando a pasta local. É necessário configurar pelo menos uma pasta local antes de começar a utilizar o Dreamweaver.

Há duas maneiras de configurar um site do Dreamweaver: utilize o Assistente Defini ção do site, que o guiará através do processo de configuração, ou as defini ções avançadas de Defini ção do site, que permitem configurar cada pasta local, remota e de teste, conforme a necessidade.

Para configurar um site do Dreamweaver:

1. Selecione Site > Novo site.

Aparecerá a caixa de diálogo Defini ção do site.

2. Clique na guia Básico, para utilizar o Assistente Defini ção do site, ou na guia Avançado, para utilizar as definições avançadas.

3. Conclua o processo de configuração do site do Dreamweaver: ¡ No Assistente Defini ção do site, responda às perguntas e clique em Avançar, para

continuar o processo de configuração (consulte Como utilizar o Assistente Definição do site).

¡ Nas definições avançadas, preencha os dados nas categorias Informações locais

 

 

Página 62 de 160Princípios básicos do Dreamweaver

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

Page 63: 3 Principios basicos do DW

(consulte Como configurar uma pasta local), Informações remotas (consulte Como configurar uma pasta remota) e Servidor de teste (consulte Como especificar onde as páginas dinâmicas podem ser processadas), conforme a necessidade.

Nota: Recomenda-se aos usuários que ainda não conhecem o Dreamweaver que utilizem o Assistente Definição do site; os usuários mais experientes do Dreamweaver poderão utilizar as definições avançadas.

Como utilizar o Assistente Definição do site

Utilize o Assistente Definição do site para configurar um site do Dreamweaver. O Assistente Definição do site o guiará através do processo de configuração do site. Esse método é recomendado aos usuários que ainda não conhecem o Dreamweaver.

O Assistente possui três seções. Dependendo das definições selecionadas, cada seção apresentará diversas telas, denominadas partes. As tr ês principais seções incluem os seguintes itens:

l Como editar os arquivos é o local onde se configura a pasta local. Para obter mais informações, consulte Como configurar uma pasta local.

l Como testar os arquivos é o local onde se configura uma pasta para que o Dreamweaver processe páginas dinâmicas. Para obter mais informações, consulte Como especificar onde as páginas dinâmicas podem ser processadas.

l Como compartilhar os arquivos é o local onde se configura a pasta remota. Para obter mais informações, consulte Como configurar uma pasta remota.

O nome da seção em negrito, situado no alto da caixa de diálogo, indica o ponto do processo de configuração. Talvez não haja necessidade de configurar as pastas nas três seções. Cada seção fará perguntas, com o objetivo de auxiliá-lo a determinar as suas necessidades.

Para utilizar o Assistente Defini ção do site para configurar um site do Dreamweaver:

1. Selecione Site > Novo site.

Aparecerá a caixa de diálogo Defini ção do site.

2. Clique na guia Básica, para utilizar o Assistente Defini ção do site. 3. Responda às perguntas de cada tela e, em seguida, clique em Avançar, para prosseguir.

Clique em Voltar, para retornar a uma tela anterior, se necessário.

Como configurar uma pasta local

A pasta local é o diretório de trabalho do site do Dreamweaver (consulte Como configurar um site do Dreamweaver). Essa pasta pode estar no computador local ou em um servidor da rede.

 

 

 

 

Página 63 de 160Princípios básicos do Dreamweaver

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

Page 64: 3 Principios basicos do DW

Ela é o local onde são armazenados os arquivos “em andamento” de um site do Dreamweaver.

Os sites do Dreamweaver são estabelecidos com a configuração de uma pasta local. Também é possível adicionar pastas remotas e de teste (consulte Como configurar uma pasta remota e Como criar uma pasta raiz para o aplicativo), mas é necessário configurar pelo menos uma pasta local para poder começar a projetar sites no Dreamweaver.

Como configurar uma pasta local:

1. Escolha Site > Novo site.

Aparecerá a caixa de diálogo Defini ção do site.

2. Clique no botão Avançado, se as definições avançadas não estiverem sendo exibidas.

A guia Avançado da caixa de di álogo Definição do site exibirá as opções da categoria Informações locais.

3. Digite as opções de Informações locais.

Para obter mais informações, consulte Como definir as opções da categoria Informações locais.

4. Clique em OK.

O Dreamweaver criará o cache inicial do site e o novo site do Dreamweaver aparecerá no painel Site. Para obter mais informações sobre o painel Site e o gerenciamento do site, consulte Como gerenciar o seu site.

Posteriormente, quando o site estiver pronto para ser publicado em um servidor remoto, inclua informações adicionais relacionadas ao site. Para obter informações, consulte Como configurar uma pasta remota.

 

 

Página 64 de 160Princípios básicos do Dreamweaver

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

Page 65: 3 Principios basicos do DW

Como configurar uma pasta remota

Depois que você tiver configurado uma pasta local de um site do Dreamweaver (consulte Como configurar uma pasta local), configure uma pasta remota. As pastas local e remota permitem transferir arquivos entre o disco local e o servidor da Web, o que facilita o gerenciamento de arquivos dos sites do Dreamweaver.

Dependendo do ambiente de criação, a pasta remota receberá os arquivos para teste, colaboração, produção, disposição ou outros tipos de atividades. Normalmente, a pasta remota está situada no computador onde estiver em execução o servidor da Web.

Nota: Não será necessário especificar uma pasta remota, se a pasta que tiver sido especificada como pasta local, na categoria Informações locais (consulte Como configurar uma pasta local), for a mesma pasta que tiver sido criada para os arquivos do site no sistema que estiver executando o servidor da Web. Isso implica que o servidor da Web está em execução no computador local.

Determine como se dará o acesso à pasta remota e tome nota das informações de conexão. Quando terminar de reunir essas informações, utilize o comando Editar os sites, para configurar a pasta remota. Caso você tenha problemas, consulte Como solucionar problemas de configuração da pasta remota.

Depois que a pasta remota estiver configurada, conecte-se à mesma, procure e gerencie os arquivos do site do Dreamweaver. Se você estiver criando um site dinâmico, precisará adicionar uma pasta para processar as páginas dinâmicas (consulte Como especificar onde as páginas dinâmicas podem ser processadas).

Para configurar uma pasta remota:

1. Escolha Site> Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Selecione um site do Dreamweaver já existente.

Se não houver sites do Dreamweaver definidos, crie uma pasta local antes de continuar (consulte Como configurar uma pasta local).

3. Clique em Editar.

Aparecerá a caixa de diálogo Defini ção do site.

4. Se o Dreamweaver exibir o Assistente Definição do site, clique no botão Avançado. 5. Selecione Informações remotas, na lista de categorias à esquerda. 6. Escolha uma opção de acesso.

Para obter mais informações, consulte Como definir as opções da categoria Informações remotas.

7. Clique em OK.

Para se conectar a uma pasta remota:

No painel Site, escolha Site > Conectar, ou clique no botão Conectar ao host remoto, na barra

Página 65 de 160Princípios básicos do Dreamweaver

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

Page 66: 3 Principios basicos do DW

de ferramentas do painel Site.

Nota: Se o site utilizar FTP com SSH para acessar a pasta remota, quando você tentar estabelecer a conexão com o servidor remoto, um prompt de comando solicitará o seu logon no servidor SSH. Depois que efetuar o logon, clique em OK, na caixa de diálogo do Dreamweaver.

Para se desconectar de uma pasta remota:

No painel Site, escolha Site > Desconectar, ou clique no botão Desconectar, na barra de ferramentas do painel Site.

Como escolher o diretório do host para acesso via FTP

Se optar pelo FTP para acessar a pasta remota (consulte Como configurar uma pasta remota), será necessário determinar o diretório do host desta. O diretório do host especificado deverá corresponder à pasta raiz da pasta local. O diagrama a seguir mostra um exemplo de pasta local, à esquerda, e um exemplo de pasta remota, à direita.

Se a estrutura do site não coincidir com a da pasta local, o Dreamweaver carregará os arquivos para o local incorreto e estes não estarão visíveis para os visitantes do site. Os caminhos até as imagens e os links também se romperão.

É necessário que o diretório raiz remoto exista, para que o Dreamweaver possa se conectar a ele. Se não houver um diretório raiz correspondente à pasta remota, solicite ao administrador do servidor que crie um ou faça-o você próprio.

Se estiver em dúvida sobre o que digitar na caixa de texto Diretório do host, entre em contato com o administrador do servidor ou tente deixar a caixa de texto em branco. Em alguns servidores, o diretório raiz será idêntico àquele com o qual você estabeleceu a primeira conexão com o FTP. Para descobrir isso, conecte-se ao servidor. Se aparecer uma pasta com um nome semelhante a public_html, ou www ou o seu nome de logon na visualização de arquivos remotos, no painel Site, este será provavelmente o diretório a ser utilizado na caixa de texto Diretório do host.

 

 

 

Página 66 de 160Princípios básicos do Dreamweaver

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

Page 67: 3 Principios basicos do DW

Como utilizar o Secure Shell para obter acesso via FTP

Na caixa de diálogo Definição do site, quando você selecionar FTP para acessar a pasta remota, terá a opção de utilizar o SSH (Secure Shell). Para ativar o SSH no Windows consulte Como configurar as opções de informações remotas para o acesso de FTP.

Para utilizar o SSH no Macintosh, efetue o download do cliente de SSH para Macintosh, no site do Centro de suporte do Dreamweaver na Web.

Como solucionar problemas de configuração da pasta remota

Um servidor da Web pode ser configurado de várias maneiras. A lista a seguir contém informações sobre algumas questões comuns que podem ocorrer durante a configuração de uma pasta remota e como solucioná-las.

l É possível que a implementação de FTP do Dreamweaver não funcione corretamente em determinados servidores proxy, firewalls em muitos níveis e outras formas de acesso indireto ao servidor.

Caso você tenha problemas com o acesso de FTP, peça ajuda ao administrador de sistemas local.

l Para efetuar a implementação de FTP do Dreamweaver, é necessário estabelecer conexão com a pasta raiz do sistema remoto. Em muitos aplicativos, é possível conectar-se a qualquer diretório remoto e, em seguida, navegar pelo sistema de arquivos remotos, para localizar o diretório desejado.

Certifique-se de indicar a pasta raiz do sistema remoto como diretório do host.

Se estiverem ocorrendo problemas na conexão e o diretório do host tiver sido especificado com uma barra inclinada simples (/), é possível que você precise especificar um caminho relativo do diretório ao qual estiver se conectando, assim como a pasta raiz remota.

Por exemplo: se a pasta raiz remota for um diretório de nível mais elevado, é possível que você precise especificar ../../ correspondente ao diretório do host.

l Os nomes de pastas e arquivos que contêm espaços e caracteres especiais geralmente causam problemas quando são transferidos para um site remoto.

Utilize sinais de sublinhado em vez de espaços e evite os caracteres especiais nos nomes de arquivos e pastas, sempre que possível. Em particular, dois pontos, barras inclinadas, pontos e apóstrofes nos nomes de arquivos ou pastas podem causar problemas. Ocasionalmente, os caracteres especiais em nomes de pastas ou arquivos também podem impedir que o Dreamweaver crie um mapa do site.

l Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com designações

 

 

 

Página 67 de 160Princípios básicos do Dreamweaver

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

Page 68: 3 Principios basicos do DW

mais curtas. l Observe que muitos servidores podem utilizar links simbólicos (no UNIX), atalhos (no

Windows) para conectar uma pasta em uma parte do disco do servidor a uma outra que esteja em uma localização diferente.

Por exemplo: o subdiretório public_html do seu diretório principal no servidor pode ser, na verdade, um link para outra parte do servidor. Na maioria dos casos, esses apelidos não provocam qualquer efeito sobre a possibilidade de conexão à pasta ou diretório adequado, mas se for possível conectar-se a uma parte do servidor mas não a outras, pode ocorrer uma discrepância devida ao apelido.

l Caso apareça uma mensagem de erro como: “não é possível colocar o arquivo”, é possível que não haja espaço na pasta remota. Verifique o registro do FTP, para obter informações mais detalhadas.

Em geral, quando ocorrer um problema em uma transferência de FTP, examine o registro do FTP, escolhendo Janela > Resultados > Registro de FTP do site, no painel Site.

Como editar um site do Dreamweaver

Utilize as definições avançadas de Definição do site para editar os sites do Dreamweaver.

Para editar um site do Dreamweaver, siga um dos procedimentos abaixo:

l Escolha Site > Editar os sites, selecione um site e, em seguida, clique em Editar. l Escolha Site > Abrir o site e, em seguida, selecione um site.

Como editar os sites da Web já existentes no Dreamweaver

Utilize o Dreamweaver para editar sites existentes, mesmo se o site original não tiver sido criado no Dreamweaver. É possível editar os sites existentes no sistema local ou em um sistema remoto.

Como editar um site local da Web já existente no Dreamweaver

É possível utilizar o Dreamweaver para editar um site da Web já existente no disco local, mesmo se o site original não tiver sido criado no Dreamweaver.

   

   

 

 

Página 68 de 160Princípios básicos do Dreamweaver

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

Page 69: 3 Principios basicos do DW

Para editar um site local da Web já existente:

1. Abra a caixa de di álogo Definição do site, seguindo um dos procedimentos abaixo: ¡ Escolha Site > Editar os sites e, em seguida, clique em Novo. ¡ Escolha Site > Abrir o site > Definir os sites.

A caixa de diálogo Definição do site exibir á as opções de Informações locais.

2. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da categoria Informações locais.

3. Clique em OK.

Como editar um site remoto da Web já existente no Dreamweaver

É possível utilizar o Dreamweaver para copiar um site remoto já existente (ou um ramo deste) para o disco local e editá-lo aí, mesmo se o site original não tiver sido criado no Dreamweaver.

Mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura da ramifica ção do site remoto, desde a raiz do mesmo até os arquivos a serem editados.

Por exemplo: se a pasta raiz do site remoto (denominada public_html) contiver duas pastas (Projeto1 e Projeto2) e você desejar trabalhar apenas com os arquivos HTML no Projeto1, não haverá necessidade de efetuar o download dos arquivos do Projeto2, porém será necessário mapear a pasta raiz local para public_html, em vez de Projeto1.

   

Página 69 de 160Princípios básicos do Dreamweaver

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

Page 70: 3 Principios basicos do DW

Para editar um site remoto já existente:

1. Crie uma pasta local que abrigará o site existente e defina-a como sendo a pasta raiz local do site (consulte Como configurar uma pasta local).

2. Defina uma pasta remota utilizando as informações sobre o site já existente (consulte Como configurar uma pasta remota). Certifique-se de escolher a pasta raiz correta para o site remoto.

3. Clique no botão Conectar, no painel Site, para se conectar ao site remoto. 4. Dependendo da extensão do site remoto a ser editada, siga um dos

procedimentos abaixo: ¡ Se desejar trabalhar com o site inteiro, selecione a pasta raiz do site remoto e

clique em Obter, para efetuar o download do site inteiro no disco local. ¡ Se desejar trabalhar apenas com um dos arquivos ou pastas do site, localize-o na

visualização remota do painel Site e clique em Obter o(s) arquivo(s), para efetuar o seu download no disco local.

O Dreamweaver duplicará automaticamente o quanto for possível a estrutura do site remoto, posicionando o arquivo do qual se fez download na porção adequada da hierarquia do site. Ao editar apenas uma parte de um site, opte preferencialmente por incluir os arquivos dependentes.

5. Prossiga como se estivesse criando um site a partir do zero: edite os documentos, visualize e teste-os, e carregue-os novamente para o site remoto.

Referência

Esta seção descreve as caixas de diálogo apresentadas neste capítulo.

Como configurar as opções de edição dos arquivos na Definição do site

O objetivo desta caixa de diálogo é denominar o site do Dreamweaver.

Os sites do Dreamweaver constituem uma maneira de organizar todos os documentos associados a um site da Web. Encare-os como um projeto. Para cada site da Web a ser criado, é necessário configurar um site. A organização dos arquivos em um site permite utilizar o Dreamweaver com o FTP para efetuar o upload do site para o servidor da Web, controlar automaticamente e manter os links, gerenciar e compartilhar os arquivos. Não é possível fazer uso completo dos recursos do Dreamweaver, exceto se for definido um site.

Procedimento

Digite o nome do site do Dreamweaver.

Tópico relacionado

 

 

 

 

Página 70 de 160Princípios básicos do Dreamweaver

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

Page 71: 3 Principios basicos do DW

Como configurar um site do Dreamweaver

Como configurar as opções de edição dos arquivos na Definição do site

O objetivo desta caixa de diálogo é indicar a criação de um aplicativo para a Web, ou seja, se o site contém conteúdo dinâmico. 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.

Se você estiver criando um aplicativo para a Web, selecione a tecnologia de servidor em execução no servidor da Web, com a finalidade de oferecer suporte ao conteúdo dinâmico.

Procedimento

1. Selecione Não, caso não planeje utilizar uma tecnologia de servidor para criar um aplicativo para a Web, ou Sim, caso planeje utilizá-la.

2. Se selecionar Sim, escolha uma tecnologia de servidor.

É possível utilizar o Dreamweaver para criar aplicativos para a Web utilizando 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 seu aplicativo da Web depende de vários fatores, incluindo o grau de familiaridade com várias linguagens de cria ção de scripts e o servidor de aplicativos que deseja utilizar.

Tópicos relacionados

O que é um aplicativo para a Web?

Para selecionar uma tecnologia de servidor

Como configurar as opções de edição dos arquivos na Definição do site

O objetivo desta caixa de diálogo é selecionar o ambiente de criação.

Procedimento

1. Selecione o método a ser utilizado para lidar com os arquivos durante a criação. 2. Digite o local onde deseja armazenar os arquivos ou clique no ícone correspondente à

pasta, para procurá-la.

Este é o diretório de trabalho do site do Dreamweaver – ele é o local onde são armazenados os arquivos “em andamento” de um site do Dreamweaver. No painel Site do Dreamweaver, essa pasta é conhecida como site local.

 

 

 

 

Página 71 de 160Princípios básicos do Dreamweaver

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

Page 72: 3 Principios basicos do DW

3. Se selecionar um método que utilize o FTP ou RDS, você poderá optar por efetuar o upload automático dos arquivos para o servidor a cada vez em que forem salvos.

Como configurar as opções de teste dos arquivos na Definição do site

O objetivo desta caixa de diálogo é selecionar o método de acesso a ser utilizado pelo Dreamweaver para se comunicar com o servidor de teste.

O Dreamweaver funciona com um servidor de teste para gerar e exibir o conteúdo dinâmico enquanto você trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produção. Contanto que o servidor possa processar o tipo de páginas dinâmicas que se planeja criar, a escolha não é muito importante.

Quando o servidor de teste for configurado, o Dreamweaver também irá configurar uma pasta correspondente ao servidor remoto. Dependendo do ambiente de criação, essa pasta receberá os arquivos para teste, colabora ção, produção, disposição ou outros tipos de atividades. Normalmente, a pasta remota está situada no computador onde estiver em execução o servidor da Web.

No painel Site do Dreamweaver, a pasta remota é conhecida como site remoto. A pasta remota permite transferir arquivos entre o disco local e o servidor da Web, o que facilita o gerenciamento de arquivos dos sites do Dreamweaver.

Procedimento:

Selecione um método de acesso no menu pop-up.

l Local/rede, se você estiver acessando uma pasta da rede ou se o servidor de teste estiver sendo executando no computador local.

l FTP, se a conexão ao servidor de teste for estabelecida através do protocolo FTP. l RDS (Serviços de desenvolvimento remoto), se a conexão ao servidor da Web for

estabelecida via RDS.

Nesse método de acesso, a pasta remota deverá estar em um computador que execute o ColdFusion.

Tópicos relacionados

Como configurar as opções de acesso local/rede para testes

Como configurar as opções de acesso de FTP para teste

Como configurar as opções de acesso de RDS para teste

 

 

 

 

Página 72 de 160Princípios básicos do Dreamweaver

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

Page 73: 3 Principios basicos do DW

Como configurar as opções de acesso local/rede para testes

O objetivo desta caixa de diálogo é selecionar uma pasta no computador local ou na rede, na qual deverão ser armazenados os arquivos para teste.

Procedimento

Digite o caminho até a pasta local ou da rede onde serão armazenados os arquivos para teste, ou clique no ícone correspondente à pasta, para procurá-la.

Como configurar as opções de acesso de FTP para teste

O objetivo desta caixa de diálogo é fornecer informações sobre o acesso de FTP ao servidor de teste onde serão armazenados os arquivos para teste.

Procedimento

1. Digite o nome do host de FTP para o qual deseja efetuar o upload dos arquivos para teste.

O host de FTP é o nome completo de um sistema de computador no formato da Internet, como, por exemplo: ftp.mentesana.com. Digite o nome completo do host sem qualquer texto adicional. Principalmente, não inclua o nome de um protocolo na frente do nome do host.

Nota: Se não souber qual é o host de FTP, entre em contato com o provedor de serviços da Internet.

2. Digite o caminho até a pasta onde serão armazenados os arquivos para teste, ou clique no ícone correspondente à pasta, para procurá-la.

3. Digite o nome de logon e a senha utilizados para estabelecer a conexão ao servidor de FTP.

4. Clique em Testar a conexão, para testar o logon e a senha.

Tópico relacionado

Como escolher o diretório do host para acesso via FTP

Como configurar as opções de acesso de RDS para teste

O objetivo desta caixa de diálogo é fornecer informações sobre o acesso de RDS ao servidor de teste onde serão armazenados os arquivos.

Procedimento

 

 

   

Página 73 de 160Princípios básicos do Dreamweaver

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

Page 74: 3 Principios basicos do DW

Clique no botão Definições, para digitar as informações de acesso.

Tópico relacionado

Como configurar o acesso de RDS

Como configurar as opções de teste dos arquivos na Definição do site

O objetivo desta caixa de diálogo é especificar um prefixo de URL, de forma que o Dreamweaver possa utilizar o servidor de teste para exibir dados e se conectar a bancos de dados durante o trabalho. Um prefixo de URL é composto do nome do domínio e de qualquer subdiretório do diretório inicial ou virtual do site da Web.

Procedimento

1. Digite a URL que os usuários digitarão nos seus navegadores para abrir o aplicativo para a Web, mas não inclua qualquer nome de arquivo.

Suponha que a URL do aplicativo seja http://www.macromedia.com/meuaplicativo/iniciar.jsp. Nesse caso, digite o seguinte prefixo de URL: http://www.macromedia.com/meuaplicativo/.

Se o Dreamweaver for executado no mesmo computador que o servidor da Web, utilize o termo “localhost” como substituto do nome do domínio. Por exemplo: suponha que a URL do aplicativo seja http://www.escaravelho_pc/meuaplicativo/iniciar.jsp. Nesse caso, digite o seguinte prefixo de URL: http://localhost/meuaplicativo/.

2. Clique em Testar a URL, para garantir que ela esteja funcionando.

Tópico relacionado

O prefixo de URL

Como configurar as opções de compartilhamento de arquivos na Definição do site

O objetivo desta caixa de diálogo é decidir se há necessidade de configurar uma pasta remota.

Dependendo do ambiente de criação, essa pasta receberá os arquivos para teste, colaboração, produção, disposição ou outros tipos de atividades. Normalmente, a pasta remota está situada no computador onde estiver em execução o servidor da Web.

No painel Site do Dreamweaver, essa pasta é conhecida como site remoto. A pasta remota permite transferir arquivos entre o disco local e o servidor da Web, o que facilita o compartilhamento e gerenciamento dos arquivos dos sites do Dreamweaver.

 

 

 

 

Página 74 de 160Princípios básicos do Dreamweaver

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

Page 75: 3 Principios basicos do DW

Procedimento

Selecione Sim, para configurar uma pasta remota, ou Não, para ignorar a configuração da pasta remota.

Como configurar as opções de compartilhamento de arquivos na Definição do site

O objetivo desta caixa de diálogo é selecionar o método de acesso a ser utilizado pelo Dreamweaver para se comunicar com a pasta remota.

Procedimento

Selecione um método de acesso no menu pop-up.

l Local/rede, se você estiver acessando uma pasta da rede ou se o servidor de teste estiver sendo executando no computador local.

l FTP, se a conexão ao servidor de teste for estabelecida através do protocolo FTP. l RDS (Serviços de desenvolvimento remoto), se a conexão ao servidor da Web for

estabelecida via RDS.

Nesse método de acesso, a pasta remota deverá estar em um computador que execute o ColdFusion.

l Banco de dados SourceSafe, se a conexão ao servidor da Web utilizar um banco de dados SourceSafe.

O suporte aos bancos de dados SourceSafe está disponível apenas no Windows. Para poder utilizar o SourceSafe com o Windows, é necessário que a versão 6 do Microsoft Visual SourceSafe Client esteja instalada.

l WebDAV (Web-based Distributed Authoring and Versioning), se a conexão ao servidor da Web for estabelecida através do protocolo WebDAV.

Nesse método de acesso, é necessário que haja um servidor com suporte a esse protocolo, como o Microsoft Internet Information Server (IIS) 5.0 ou o servidor da Web Apache.

Tópicos relacionados

Como configurar as opções de acesso local/rede para acesso remoto

Como configurar as opções de FTP para acesso remoto

Como configurar o acesso de RDS

Como configurar o acesso ao banco de dados SourceSafe

Como configurar o acesso de WebDAV

 

 

Página 75 de 160Princípios básicos do Dreamweaver

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

Page 76: 3 Principios basicos do DW

Como configurar as opções de acesso local/rede para acesso remoto

O objetivo desta caixa de diálogo é selecionar uma pasta no computador local ou na rede, na qual deverão ser armazenados os arquivos.

Procedimento

Digite o caminho até a pasta local ou da rede onde serão armazenados os arquivos, ou clique no ícone correspondente à pasta, para procurá-la.

Como configurar as opções de FTP para acesso remoto

O objetivo desta caixa de diálogo é fornecer informações sobre o acesso de FTP ao servidor remoto onde serão armazenados os arquivos.

Procedimento

1. Digite o nome do host de FTP para o qual deseja efetuar o upload dos arquivos.

O host de FTP é o nome completo de um sistema de computador no formato da Internet, como, por exemplo: ftp.mentesana.com. Digite o nome completo do host sem qualquer texto adicional. Principalmente, não inclua o nome de um protocolo na frente do nome do host.

Nota: Se não souber qual é o host de FTP, entre em contato com o provedor de serviços da Internet.

2. Digite o caminho até a pasta onde serão armazenados os arquivos, ou clique no ícone correspondente à pasta, para procurá-la.

3. Digite o nome de logon e a senha utilizados para estabelecer a conexão ao servidor de FTP.

4. Clique em Testar a conexão, para testar o logon e a senha.

Tópico relacionado

Como escolher o diretório do host para acesso via FTP

   

 

 

   

Página 76 de 160Princípios básicos do Dreamweaver

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

Page 77: 3 Principios basicos do DW

Como configurar as opções de compartilhamento de arquivos na Definição do site

O objetivo desta caixa de diálogo é configurar o sistema de devoluções e retiradas de arquivos do Dreamweaver, se você estiver trabalhando em equipe (ou sozinho, mas utilizando vários computadores diferentes).

A retirada de um arquivo o torna indisponível no servidor, de modo que outros membros da equipe não possam editá-lo. A devolução de um arquivo possibilitará às outras pessoas retirar e editá-lo.

Procedimento

1. Selecione Sim, para ativar a devolução e a retirada de arquivos, se você estiver trabalhando em equipe (ou sozinho, mas utilizando vários computadores diferentes), ou Não, para desativar a devolução e a retirada de arquivos.

Esta opção é útil para informar aos outros usuários sobre a retirada de um arquivo para edição, ou para alertar a si próprio que uma versão mais recente de um arquivo foi deixada em um outro computador.

2. Selecione Sim, se desejar retirar os arquivos automaticamente ao abri-los no painel Site, ou Não, se não desejar retirá-los automaticamente ao abri-los.

Nota: A utilização da opção Arquivo > Abrir, para abrir um arquivo não o retira, mesmo quando esta estiver selecionada.

3. Digite o seu nome.

O seu nome aparecerá no painel Site, juntamente com os arquivos que tiverem sido retirados; esse sistema permite que os membros de uma equipe comuniquem o compartilhamento de arquivos entre si.

Se você trabalhar sozinho utilizando vários computadores, utilize um nome de retirada diferente em cada computador (por exemplo: AliceR-MacCasa e AliceR-PCEscritório), o que permitir á saber onde está a última versão do arquivo, caso se esqueça de devolvê-lo.

4. Digite o seu endereço de correio eletrônico.

Quando você digitar um endereço de correio eletrônico e, em seguida, retirar um arquivo, o seu nome aparecerá como um link (azul e sublinhado) no painel Site, ao lado do arquivo. Se um membro da equipe clique no link, o seu programa padrão do correio eletrônico exibirá uma nova mensagem com o seu endereço eletr ônico e o assunto correspondente ao arquivo e ao nome do site.

Tópico relacionado

Como utilizar as opções de devolução e retirada de arquivos

Definição do site Opções de resumo

   

Página 77 de 160Princípios básicos do Dreamweaver

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

Page 78: 3 Principios basicos do DW

Essa página exibe as definições que tiverem sido selecionadas no site.

Procedimento

Siga qualquer um dos procedimentos abaixo:

l Clique no botão Voltar, para retornar a uma página anterior e alterar uma definição. l Clique no botão Concluída, se estiver satisfeito com as definições e quiser que o

Dreamweaver crie o site.

Quando você clique em Concluída, o Dreamweaver criará o site e o exibirá no painel Site.

l Clique no botão Cancelar, se não quiser que o Dreamweaver crie o site.

Como definir as opções da categoria Informações locais

O objetivo desta caixa de diálogo é configurar uma pasta local de um site do Dreamweaver (também denominada site local).

Procedimento

1. Na caixa de texto Nome do site, digite o nome do site do Dreamweaver.

O nome do site aparecerá no painel Site e no submenu Site > Abrir o site. Utilize qualquer nome que preferir. Ele servirá apenas de referência e não aparecerá no navegador.

2. Na caixa de texto Pasta raiz local, digite o nome da pasta no disco local onde serão armazenados os arquivos do aplicativo, modelos e itens de biblioteca, ou clique no ícone correspondente à pasta, para procurá-la.

O Dreamweaver resolve os links relativos à raiz levando em conta esta pasta (consulte Caminhos relativos à raiz do site). Se a pasta raiz local ainda não existir, crie -a na caixa de diálogo de busca de arquivos.

3. Na opção Atualizar a lista de arquivos locais automaticamente, indique se deseja que o Dreamweaver atualize automaticamente a lista de arquivos locais a cada vez que copi á-los para o site local.

O cancelamento desta opção aumentará a velocidade com que o Dreamweaver copia estes arquivos, porém a visualização local do painel Site não será automaticamente atualizada.

Para atualizar manualmente o painel Site, clique no botão Atualizar, situado neste painel. Para atualizar manualmente apenas a visualização local do painel Site, escolha Exibir > Atualizar.

4. Na caixa de texto Pasta padrão de imagens, digite o caminho até a pasta padrão de imagens desse site, ou clique no ícone correspondente à pasta, para procurá-la.

Essa é a pasta onde o Dreamweaver coloca as imagens incluídas no site. Por exemplo:

 

 

Página 78 de 160Princípios básicos do Dreamweaver

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

Page 79: 3 Principios basicos do DW

quando uma imagem for arrastada da área de trabalho para um documento ativo, o Dreamweaver a incluirá no site na pasta padrão de imagens.

5. Na caixa de texto Endere ço HTTP, digite a URL a ser utilizada pelo site da Web finalizado.

Isso permitirá ao Dreamweaver verificar os links dentro do site que utilizarem URLs absolutas (consulte Como verificar os links em uma página ou site).

6. Na opção Ativar o cache, indique se deseja criar um cache local para melhorar a velocidade das tarefas de vinculação e gerenciamento do site.

Se você não selecionar esta opção, o Dreamweaver o notificará novamente, sugerindo a criação de um cache antes que ele crie o site. É recomendável selecionar esta opção, porque o painel Propriedades (no grupo de painéis Arquivos) funcionará apenas se um cache tiver sido criado. Para obter mais informações, consulte Como utilizar o painel Propriedades .

Tópicos relacionados

Como configurar um site do Dreamweaver

Como configurar uma pasta local

Como definir as opções da categoria Informações remotas

O objetivo desta caixa de diálogo é selecionar o método de acesso a ser utilizado pelo Dreamweaver para se comunicar com o servidor da Web no qual está localizada a pasta remota (também denominada site remoto).

Procedimento

1. Selecione um método de acesso no menu pop-up. A caixa de diálogo vai variar conforme a seleção. Escolha uma dentre as seguintes opções:

¡ Nenhum , caso não planeje efetuar o upload do site para um servidor. ¡ Local/rede, se você estiver acessando uma pasta da rede ou se o servidor da Web

estiver sendo executando no computador local. ¡ FTP, se a conexão ao servidor da Web for estabelecida através do protocolo FTP. ¡ RDS (Serviços de desenvolvimento remoto), se a conexão ao servidor da Web for

estabelecida via RDS.

Nesse método de acesso, a pasta remota deverá estar em um computador que execute o ColdFusion.

¡ Banco de dados SourceSafe, se a conexão ao servidor da Web utilizar um banco de dados SourceSafe.

O suporte aos bancos de dados SourceSafe está disponível apenas no Windows. Para poder utilizar o SourceSafe com o Windows, é necessário que a versão 6 do Microsoft Visual SourceSafe Client esteja instalada.

   

Página 79 de 160Princípios básicos do Dreamweaver

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

Page 80: 3 Principios basicos do DW

¡ WebDAV (Web-based Distributed Authoring and Versioning), se a conexão ao servidor da Web for estabelecida através do protocolo WebDAV.

Nesse método de acesso, é necessário que haja um servidor com suporte a esse protocolo, como o Microsoft Internet Information Server (IIS) 5.0 e o servidor da Web Apache.

2. No acesso Local/rede e FTP, preencha a caixa de diálogo.

Para obter mais informações, consulte a seção relevante:

Como configurar as opções de informações remotas para o acesso Local/rede

Como configurar as opções de informações remotas para o acesso de FTP

3. Nos acessos por RDS, SourceSafe Database e WebDAV, selecione as opções Ativar a devolução e retirada de arquivos e Efetuar o upload automático dos arquivos para o servidor no salvamento, para ativá-las. Em seguida, clique no botão Defini ções, para fornecer as informações de acesso.

Para obter mais informações, consulte a seção relevante:

Como utilizar as opções de devolução e retirada de arquivos

Como configurar o acesso de RDS

Como configurar o acesso ao banco de dados SourceSafe

Como configurar o acesso de WebDAV

4. Clique em OK.

Tópicos relacionados

Como configurar uma pasta remota

Como configurar as opções de informações remotas para o acesso de FTP

Como configurar as opções de informações remotas para o acesso Local/rede

Como configurar o acesso de RDS

Como configurar o acesso ao banco de dados SourceSafe

Como configurar o acesso de WebDAV

Como configurar as opções de informações remotas para o acesso Local/rede

O objetivo desta caixa de diálogo é fornecer informações sobre o acesso local ou via rede.

   

Página 80 de 160Princípios básicos do Dreamweaver

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

Page 81: 3 Principios basicos do DW

Procedimento

1. Clique no ícone de pasta, ao lado da caixa de texto Pasta remota, para procurar e selecionar a pasta onde são armazenados os arquivos do site.

2. Marque a caixa de sele ção Atualizar automaticamente a lista de arquivos remotos, se desejar que o painel Remoto do painel Site seja atualizado automaticamente quando os arquivos forem incluídos ou excluídos.

Para aumentar a velocidade de cópia dos arquivos no site remoto, não selecione esta opção.

Nota: Para atualizar manualmente o painel Site a qualquer momento, clique no botão Atualizar, neste painel. Para atualizar manualmente apenas o painel Remoto, escolha Exibir > Atualizar o remoto, no painel Site.

3. Marque a caixa de sele ção Efetuar o upload automático dos arquivos para o servidor no salvamento, se quiser que o Dreamweaver efetue o upload do arquivo para o site remoto quando for salvo.

4. Marque a caixa de sele ção Ativar a devolução e retirada de arquivos, se quiser ativar o sistema de devoluções e retiradas de arquivos.

Para obter mais informações, consulte Como utilizar as opções de devolução e retirada de arquivos.

5. Clique em OK.

Tópicos relacionados

Como configurar uma pasta remota

Como definir as opções da categoria Informações remotas

Como configurar as opções de informações remotas para o acesso de FTP

O objetivo desta caixa de diálogo é fornecer informações sobre o acesso de FTP.

Procedimento

1. Digite o nome do host de FTP para o qual deseja efetuar o upload dos arquivos que compõem o site da Web.

O host de FTP é o nome completo de um sistema de computador no formato da Internet, como, por exemplo: ftp.mentesana.com. Digite o nome completo do host sem qualquer texto adicional. Principalmente, não inclua o nome de um protocolo na frente do nome do host.

Nota: Se não souber qual é o host de FTP, entre em contato com o provedor de serviços da Internet.

2. Digite o nome do diretório do host no site remoto onde serão armazenados os

 

 

Página 81 de 160Princípios básicos do Dreamweaver

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

Page 82: 3 Principios basicos do DW

documentos que estarão visíveis para o público. 3. Digite o nome de logon e a senha utilizados para estabelecer a conexão ao servidor de

FTP. 4. Clique em Testar, para testar o logon e a senha. 5. Como padrão, o Dreamweaver salvará a sua senha. Desmarque a caixa de seleção Salvar,

para ser notificado pelo Dreamweaver a digitar uma senha sempre que estabelecer conexão ao servidor remoto.

6. Marque a caixa de sele ção Utilizar FTP passivo, se a configuração de firewall necessitar da utilização de FTP passivo.

O FTP passivo permite ao software local configurar a conexão do FTP, em vez de solicitar que o servidor remoto o faça. Caso não tenha certeza se o FTP passivo está sendo utilizado, informe-se com o administrador do sistema.

7. Marque a caixa de sele ção Utilizar a firewall, se a conexão ao servidor remoto se der atrás de uma firewall.

8. Clique em Definições da Firewall, para editar o host ou a porta da firewall.

Para obter mais informações, consulte Como definir as preferências do site.

9. Marque a caixa de sele ção Utilizar o logon seguro criptografado por SSH, para utilizar o SSH para a autenticação segura do FTP.

Nota: Para poder utilizar o SSH (Secure Shell) com o Macintosh, é necessário instalar o cliente de SSH disponível no site do Centro de suporte do Dreamweaver na Web.

10. Marque a caixa de sele ção Efetuar o upload automático dos arquivos para o servidor no salvamento, se quiser que o Dreamweaver efetue o upload do arquivo para o site remoto quando for salvo.

11. Marque a caixa de sele ção Ativar a devolução e retirada de arquivos, se quiser ativar o sistema de devoluções e retiradas de arquivos.

Para obter mais informações, consulte Como utilizar as opções de devolução e retirada de arquivos.

12. Clique em OK.

Tópicos relacionados

Como configurar uma pasta remota

Como escolher o diretório do host para acesso via FTP

Como definir as opções da categoria Informações remotas

Como configurar o acesso de RDS

O objetivo desta caixa de diálogo é configurar uma conexão ao servidor remoto utilizando os RDS.

 

 

Página 82 de 160Princípios básicos do Dreamweaver

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

Page 83: 3 Principios basicos do DW

Procedimento

1. Digite o nome do computador host onde está instalado o servidor da Web.

Provavelmente, o nome host é um endereço IP ou uma URL. Se não tiver certeza, informe-se com o administrador do sistema.

2. Digite o número da porta através da qual será estabelecida a conexão. 3. Digite a pasta raiz remota como diretório do host. Por exemplo:

c:\inetpub\wwwraiz\meuDiretdoHost\. 4. Digite o seu nome e senha de usuário de RDS.

Nota: É possível que essas opções não apareçam, se você tiver definido o seu nome de usuário e a sua senha nas definições de segurança do Administrador de ColdFusion.

5. Marque a caixa de sele ção Salvar, se desejar que o Dreamweaver memorize as suas definições.

Tópicos relacionados

Como configurar uma pasta remota

Como definir as opções da categoria Informações remotas

Como configurar o acesso ao banco de dados SourceSafe

O objetivo desta caixa de diálogo é configurar uma conexão ao banco de dados SourceSafe.

Nota: O suporte aos bancos de dados SourceSafe está disponível apenas no Windows.

Procedimento

1. Na caixa de texto Caminho do banco de dados, clique em Procurar, para procurar o banco de dados VSS desejado, ou digite o caminho completo do arquivo.

O arquivo escolhido se transformará no arquivo srcsafe.ini, que é utilizado para iniciar o SourceSafe.

2. Na caixa de texto Projeto, digite o projeto do banco de dados VSS que deseja utilizar como diretório raiz do site remoto.

3. Nas caixas de texto Nome de usuário e Senha, digite o seu nome de usuário e a sua senha para acesso ao banco de dados selecionado.

Se não souber o seu nome de usuário e a sua senha, informe-se com o administrador do sistema.

4. Clique em OK, para retornar à caixa de diálogo Definição do site.

Tópicos relacionados

   

Página 83 de 160Princípios básicos do Dreamweaver

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

Page 84: 3 Principios basicos do DW

Como configurar uma pasta remota

Como definir as opções da categoria Informações remotas

Como configurar o acesso de WebDAV

O objetivo desta caixa de diálogo é configurar uma conexão ao servidor remoto utilizando o protocolo WebDAV.

Procedimento

1. Na caixa de texto URL, digite a URL completa até o diretório do servidor WebDAV ao qual deseja se conectar.

Esta URL inclui o protocolo, a porta e o diretório (se este for diferente do diretório raiz). Por exemplo: http://apache1/WebDAV/meusite.

2. Digite o seu nome de usuário e a sua senha nas caixas de texto.

Estas informações se destinam à autenticação pelo servidor e não estão relacionadas ao Dreamweaver. Se estiver em dúvida quanto ao seu nome de usuário e à sua senha, informe-se com o administrador do sistema ou webmaster.

3. Na caixa de texto Endere ço do correio eletrônico, digite o seu endereço do correio eletrônico.

Ele é necessário e é utilizado para identificar a propriedade do servidor WebDAV. Ele aparecerá no painel Site, para fins de contato.

4. Clique na caixa de sele ção Salvar a senha, se desejar que o Dreamweaver memorize-a sempre que for iniciada uma nova sessão.

5. Clique em OK, para retornar à caixa de diálogo Definição do site.

Tópicos relacionados

Como configurar uma pasta remota

Como definir as opções da categoria Informações remotas

Como utilizar as opções da caixa de diálogo Editar os sites

O objetivo desta caixa de diálogo é editar os sites. Esta caixa de diálogo permite criar um novo site, editar, duplicar, remover um site, ou importar e exportar um site.

 

 

   

Página 84 de 160Princípios básicos do Dreamweaver

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

Page 85: 3 Principios basicos do DW

Procedimento

1. Selecione um site na janela. 2. Clique em um botão, para escolher uma das seguintes opções:

¡ Novo permite criar um novo site. ¡ Editar permite editar um site já existente. ¡ Duplicar cria uma cópia do site selecionado.

A cópia aparecerá na janela de listagem de sites.

¡ Remover exclui o site selecionado.

O Dreamweaver emitirá um alerta, informando que não é possível desfazer essa ação.

¡ Exportar permite salvar o site exportado como um arquivo XML. ¡ Importar permite selecionar um arquivo XML a ser importado para um site.

3. Clique em Concluída, para fechar a caixa de diálogo.

Tópicos relacionados

Como configurar um site do Dreamweaver

Como editar um site do Dreamweaver

Como editar um site remoto da Web já existente no Dreamweaver

Como importar e exportar sites

Como gerenciar o seu site

O Macromedia Dreamweaver MX ajuda a organizar os arquivos nas pastas local e remota (também denominadas sites), através do painel Site. Ele permite duplicar a estrutura da pasta local em um servidor remoto ou de uma pasta remota no seu sistema local. Os links relativos criados no site local continuarão a funcionar após a transferência de arquivos para o site remoto, porque a estrutura dos dois sites será idêntica.

Um site local é criado no Dreamweaver utilizando o comando Novo site, que cria a pasta raiz local do site, ou transformando uma pasta existente em pasta raiz local (consulte Como configurar uma pasta local). Ao criar um novo site, você estará definindo um site remoto. É possível adicionar essas informações posteriormente, utilizando o comando Editar os sites (consulte Como configurar uma pasta remota).

O Dreamweaver apresenta alguns recursos para gerenciar um site e transferir arquivos de e para um servidor remoto. Quando os arquivos são transferidos entre os sites locais e remotos, o Dreamweaver mantém paralelas as estruturas de pastas e arquivos entre estes sites. Ao transferir arquivos entre os sites, o Dreamweaver automaticamente criará as pastas necessárias, se ainda não exisitirem em um dos sites. Os arquivos dos sites locais e remotos também podem ser sincronizados; conforme a necessidade, o Dreamweaver copia os arquivos em ambas as direções, e remove os arquivos inúteis, se houver algum.

   

Página 85 de 160Princípios básicos do Dreamweaver

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

Page 86: 3 Principios basicos do DW

O Dreamweaver contém recursos para facilitar o trabalho de colaboração em sites da Web. É possível retirar e devolver os arquivos a um servidor remoto, de maneira que os outros membros de uma equipe da Web possam saber quem está trabalhando em um determinado arquivo. É possível adicionar Design Notes aos arquivos, para compartilhar informações com os membros da equipe sobre o status e prioridade de um arquivo, e assim por diante. Também é possível utilizar o recurso Relatórios de fluxo de trabalho, para executar relatórios relativos ao site, exibir informações sobre o status das retiradas e devoluções de arquivos e procurar as Design Notes anexadas aos arquivos.

Uma vez que o site tiver sido publicado, qualquer pessoa de sua equipe poderá continuar a mantê-lo. Antes e após a publicação do site, é recomendável manter um procedimento contínuo para a resolução de quaisquer problemas encontrados no site (para obter mais informações, consulte Como testar um site).

Este capítulo contém as seguintes seções:

l Sobre o painel Site l Sobre o mapa do site l Como importar e exportar sites l Como remover um site da lista de sites l Como utilizar as opções de devolução e retirada de arquivos l Como obter e colocar arquivos l Como sincronizar os arquivos nos sites local e remoto l Como encobrir as pastas e os arquivos do site l Como utilizar as Design Notes l Como utilizar os relatórios para aprimorar o fluxo de trabalho l Sobre o painel Sitespring no Dreamweaver l Como utilizar o painel Sitespring

Sobre o painel Site

O painel Site permite exibir um site, inclusive todos os arquivos locais, remotos e do servidor de teste que estiverem associados a ele. O site local aparecerá como padrão. Altere o layout do painel Site, para exibir o site remoto ou o servidor de teste (consulte Como alterar o layout do painel Site). Expanda o painel Site, para obter uma visualização mista (consulte Como utilizar o painel Site).

Nota: No Macintosh, o painel Site é sempre exibido na visualização mista (não é fechado).

 

 

Página 86 de 160Princípios básicos do Dreamweaver

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

Page 87: 3 Principios basicos do DW

Utilize o painel Site para executar as operações padrão de manutenção de arquivos, como, por exemplo:

l Crie novos documentos HTML l Exibir, abrir e transferir arquivos l Crie pastas l Excluir itens l Transferir arquivos entre sites locais, remotos e servidores de teste l Determinar o layout da navegação do site utilizando o mapa do mesmo (consulte Como

configurar uma pasta remota e Como utilizar o mapa do site)

O painel Site contém um navegador de arquivos integrado. Esse navegador de arquivos permite navegar o disco e a rede local, além do próprio site (consulte Como utilizar o navegador de arquivos integrado).

Como utilizar o painel Site

Como padrão, o painel Site está integrado à área de trabalho do DreamweaverExploração da área de trabalho. Conforme a necessidade, é possível mover, abrir ou fechar o painel (consulte Utilização de janelas e painéis no Dreamweaver). Também é possível expandi-lo, para obter a visualização mista de um site. Na visualização mista, opte por exibir os sites local e remoto, o servidor de teste ou o mapa do site (Como alterar o layout do painel Site).

Para abrir ou fechar o painel Site:

Escolha Janela > Site.

Para expandir ou reduzir o painel Site:

Clique no botão Expandir/Fechar, na barra de ferramentas do painel Site.

Nota: Se você clique no botão Expandir/Fechar para expandir o painel enquanto este estiver encaixado, ele será maximizado, de modo a impossibilitar o trabalho na janela do documento.

 

 

Página 87 de 160Princípios básicos do Dreamweaver

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

Page 88: 3 Principios basicos do DW

Para retornar à janela do documento, clique novamente no botão Expandir/Fechar, para reduzir o painel. Se você clique no botão Expandir/Fechar para expandir o painel enquanto este estiver flutuando, ele não sofrerá alterações e você poderá continuar a trabalhar na janela do documento. É necessário reduzir o painel para poder encaixá-lo novamente.

Utilize os seguintes botões e opções da barra de ferramentas do painel Site, para determinar o que será exibido nele e para transferir arquivos:

Nota: Os botões Arquivos do site, Servidor de teste e Mapa do site aparecerão apenas quando o painel Site estiver expandido.

A visualização dos arquivos do site exibe a estrutura de arquivos do site local e remoto nos painéis do painel Site. Uma definição de preferência determinará qual site aparecerá nos painéis esquerdo e direito; consulte Como definir as preferências do site. A visualização dos arquivos do site constitui a visualização padrão do painel Site.

A visualização do servidor de teste exibe a estrutura de pastas do servidor de teste e o site local.

A visualização do mapa do site exibe uma imagem do mapa do site, levando em conta como os documentos estão vinculados uns aos outros. Mantenha pressionado este botão, para escolher no menu pop-up a opção Apenas o mapa ou Mapa e arquivos.

O menu pop-up Site lista os sites que tiverem sido definidos. Para alternar entre diversos sites, escolha um outro site da lista. Para adicionar um site ou editar as informações relativas a um site existente, escolha Editar os sites, na parte inferior do menu (consulte Como configurar uma pasta remota).

Conectar/desconectar (protocolos FTP, RDS e WebDAV e com SourceSafe) conecta-se ou desconecta-se do site remoto. Como padrão, o Dreamweaver se desconectará do site remoto depois de 30 minutos de ociosidade (apenas no FTP).

Para alterar o limite de tempo, escolha Editar > Preferências e, em seguida, selecione Site, na lista de categorias exibida à esquerda.

Atualizar atualiza as listas de diretórios locais e remotos. Utilize esse botão para atualizar manualmente as listas de diretórios, caso seja cancelada a seleção das op ções Atualizar automaticamente a lista de arquivos locais ou Atualizar automaticamente a lista de arquivos remotos, na caixa de diálogo Definição do site (consulte Como configurar uma pasta remota).

Obter o(s) arquivo(s) copia os arquivos selecionados do site remoto ou do servidor de teste para o site local (substituindo a cópia local do arquivo já existente, se houver). Se a opção Ativar a devolução e retirada de arquivos estiver ativada, as c ópias locais serão somente de leitura; os arquivos continuarão disponíveis no site remoto, para que outros membros da equipe possam retirá-los. Se a opção Ativar a devolução e retirada de arquivos estiver desativada, a obtenção de um arquivo transferir á uma cópia com os privilégios de leitura e gravação.

Página 88 de 160Princípios básicos do Dreamweaver

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

Page 89: 3 Principios basicos do DW

O Dreamweaver copiará os arquivos que tiverem sido selecionados no painel ativo do painel Site. Se o painel Remoto ou Servidor de teste estiver ativo, os arquivos remotos ou do servidor de teste que tiverem sido selecionados serão copiados para o site local; se o painel Local estiver ativo, o Dreamweaver copiará a versão remota ou do servidor de teste dos arquivos locais selecionados para o site local. Para obter mais informações, consulte Como obter arquivos de um servidor remoto ou de teste.

Nota: É possível obter os arquivos remotos ou do servidor de teste, mas os recursos pr óprios à devolução e retirada se aplica apenas aos arquivos remotos.

Colocar o(s) arquivo(s) copia os arquivos selecionados do site local para o site remoto ou para o servidor de teste.

O Dreamweaver copiará os arquivos que tiverem sido selecionados no painel ativo do painel Site. Se o painel Local estiver ativo, os arquivos locais que tiverem sido selecionados serão copiados para o site remoto ou para o servidor de teste; se o painel Remoto ou Servidor de teste estiver ativo, o Dreamweaver copiará a versão local dos arquivos remotos ou do servidor de teste para o site remoto. Para obter mais informações, consulte Como colocar arquivos em um servidor remoto ou de teste.

Nota: É possível colocar os arquivos no servidor remoto ou de teste, mas os recursos próprios à devolução e retirada se aplica apenas aos arquivos remotos.

Se você estiver colocando um arquivo que ainda não exista no site remoto e a opção Ativar a devolução e retirada de arquivos estiver ativa, o Dreamweaver adicionará o arquivo ao site remoto como “retirado”. Clique no botão Devolver os arquivos, se desejar adicionar um arquivo sem o status de retirada.

Retirar o(s) arquivo(s) transfere uma cópia do arquivo do servidor remoto para o site local (substituindo a cópia local do arquivo já existente, se houver) e marca esse arquivo como tendo sido retirado do servidor. Esta opção não estará disponível se a opção Ativar a devolu ção e retirada de arquivos, na caixa de diálogo Defini ção do site, estiver desativada no site. Para obter mais informações, veja Como devolver e retirar os arquivos de um servidor remoto.

Devolver o(s) arquivo(s) transfere uma cópia do arquivo local para o servidor remoto, tornando-o disponível para edição por outros usuários. O arquivo local se tornará somente de leitura. Esta opção não estará disponível se a opção Ativar a devolução e retirada de arquivos, na caixa de diálogo Defini ção do site, estiver desativada no site. Para obter mais informações, veja Como devolver e retirar os arquivos de um servidor remoto.

O botão Expandir/Fechar expande ou fecha o painel Site, exibindo apenas um ou dois painéis.

Como definir as preferências do site

A caixa de diálogo Preferências permite controlar os recursos de transferência de arquivos do painel Site.

Para editar as preferências do painel Site:

1. Selecione Editar > Preferências.

   

Página 89 de 160Princípios básicos do Dreamweaver

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

Page 90: 3 Principios basicos do DW

A caixa de diálogo Preferências é exibida.

2. Selecione Site, na lista de categorias à esquerda.

Aparecerão as opções de preferência do site.

3. Altere as opções conforme a necessidade.

Para obter mais informações, consulte Como definir as opções de preferências do painel Site

4. Clique em OK.

É possível definir se os tipos de arquivos serão transferidos no formato ASCII (texto) ou binário, através da personalização do arquivo FTPExtensionMap.txt, na pasta Dreamweaver/Configuration. Para obter mais informações, consulte Bem-vindo ao Dreamweaver.

Como alterar as colunas de visualização de arquivos

É possível personalizar as colunas que serão exibidas nas listas Site local e Site remoto, no painel Site. Siga qualquer um dos procedimentos abaixo:

l Reordene as colunas l Adicione novas colunas (dez, no máximo) l Exclua colunas l Oculte colunas l Designe colunas a serem compartilhadas com todos os usuários que estiverem conectados

a um site

As colunas padrão são Nome, Notas, Tamanho, Tipo, Modificado e Retirado por. Para ordenar segundo qualquer coluna, clique no respectivo cabeçalho, no painel Site. O ato de clique em

 

 

Página 90 de 160Princípios básicos do Dreamweaver

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

Page 91: 3 Principios basicos do DW

uma coluna mais de uma vez inverterá a ordem (ascendente ou descendente) de acordo com a qual o Dreamweaver a organiza.

Nota: Não é possível excluir ou renomear uma coluna padrão, ou associar uma Design Note à mesma. É possível alterar a ordenação e o alinhamento das colunas padrão, assim como ocultá-las, com exceção da coluna Nome, que não pode ser oculta.

Para adicionar, excluir ou alterar as colunas:

1. No painel Site, siga um dos procedimentos abaixo, para acessar as opções das colunas de visualização de arquivos:

¡ Escolha Exibir > Colunas de visualização de arquivos. ¡ Escolha Site > Editar os sites e, em seguida, clique em Editar. Em seguida, na lista

de categorias à esquerda na caixa de di álogo Definição do site, selecione Colunas de visualização de arquivos.

A caixa de diálogo Definição do site exibir á as opções das colunas de visualização de arquivos.

2. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da categoria Colunas de visualização de arquivos.

3. Clique em OK.

Tópico relacionado

Como alterar o layout do painel Site

Como abrir e exibir os sites no painel Site

 

 

Página 91 de 160Princípios básicos do Dreamweaver

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

Page 92: 3 Principios basicos do DW

Quando o painel Site estiver reduzido, ele exibirá o conteúdo dos sites local e remoto, ou do servidor de teste como uma lista de arquivos. Quando o painel Site estiver expandido, além do site local, ele exibirá o site remoto ou o servidor de teste em uma visualização mista. Quando estiver expandido, o painel Site também pode exibir um mapa visual do site local.

Nota: Para poder exibir um site remoto ou um servidor de teste, é necessário configurá-lo (consulte Como configurar uma pasta remota ou Como especificar onde as páginas dinâmicas podem ser processadas). Para poder exibir o mapa de um site, é necessário configurar uma home page (consulte Como utilizar o mapa do site).

Para abrir um site existente do Dreamweaver:

No painel Site, selecione um site no menu pop-up Site (esse é o local onde o nome do site examinado aparecerá).

Nota: Para definir um site do Dreamweaver, consulte Como configurar um site do Dreamweaver.

Para alterar a visualização do site enquanto o painel Site estiver reduzido:

Com esse painel reduzido, selecione Visualização local, Visualização remota ou Servidor de teste, no menu pop-up no qual a visualização estiver sendo exibida.

Nota: Como padrão, Visualização local aparecerá nesse menu pop-up.

Para alterar as visualizações do site enquanto o painel Site estiver expandido:

Com esse painel expandido, clique no botão Arquivos do site (no site remoto), Servidor de teste ou Mapa do site, na barra de ferramentas do painel.

Nota: O botão Mapa do site permite optar pela visualização apenas do mapa do site ou deste e dos arquivos do site. Para obter mais informações, consulte Como utilizar o mapa do site.

Tópico relacionado

Como alterar o layout do painel Site

Como alterar o layout do painel Site

Quando o painel Site estiver em visualização mista, o site local aparecerá, como padrão, no lado direito do painel Site. Como padrão, o site remoto, servidor de teste ou mapa do site

   

Página 92 de 160Princípios básicos do Dreamweaver

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

Page 93: 3 Principios basicos do DW

aparecerá no lado esquerdo. É possível alternar entre estas visualizações.

Para alterar o layout do painel Site:

1. No painel, clique no botão Expandir/Fechar para expandi-lo, se j á não estiver. 2. Selecione Editar > Preferências.

A caixa de diálogo Preferências é exibida.

3. Selecione Site, na lista de categorias à esquerda.

Aparecerão as opções de preferência do site.

4. No menu pop-up Mostrar sempre, selecione Arquivos locais ou Arquivos remotos. 5. Selecione onde deseja que os arquivos da opção Mostrar sempre apareçam, no lado

direito ou esquerdo do painel Site expandido. 6. Clique em OK.

Para alterar o tamanho da área de visualização:

No painel Site expandido, siga um dos procedimentos abaixo:

l Arraste a barra de divisão que separa as duas visualizações, para aumentar ou diminuir a área de exibição do painel direito ou esquerdo.

l Utilize as barras de rolagem, na parte inferior do painel Site, para rolar pelo conteúdo das visualizações.

l No mapa do site, arraste a seta acima de um arquivo para alterar o espaço entre os arquivos.

Tópico relacionado

Como alterar as colunas de visualização de arquivos

   

Página 93 de 160Princípios básicos do Dreamweaver

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

Page 94: 3 Principios basicos do DW

Como trabalhar com os arquivos no painel Site

Utilize o painel Site para exibir os sites como listas de arquivos, abrir ou renomear arquivos, adicionar novas pastas ou arquivos a um site ou atualizar a visualização do site depois de concluir as alterações.

Também é possível utilizar o painel Site para determinar quais arquivos (no site local ou remoto) foram atualizados desde a última vez em que foram transferidos. Para obter mais informações sobre a sincronização do site local com o remoto, consulte Como sincronizar os arquivos nos sites local e remoto.

Para abrir um arquivo do painel Site, siga um dos procedimentos abaixo:

l Clique duas vezes no ícone do arquivo. l Clique com o botão direito do mouse no ícone correspondente ao arquivo e, em seguida,

escolha Abrir. l Escolha Arquivo > Abrir.

Para adicionar um novo arquivo ou pasta a um site:

1. Selecione um arquivo ou pasta no painel Site.

O Dreamweaver criará o novo arquivo ou pasta dentro da pasta que estiver selecionada ou na mesma pasta do arquivo que estiver selecionado.

2. Para criar uma nova pasta, escolha Arquivo > Nova pasta, no painel Site.

Para criar um novo arquivo, escolha Arquivo > Novo arquivo, no painel Site.

Nota: Alternativamente, escolha Novo arquivo ou Nova pasta, no menu contextual do painel Site.

3. Digite um nome para o novo arquivo ou pasta. 4. Pressione a tecla Enter.

Para renomear um arquivo ou pasta de um site:

1. No painel Site, selecione o arquivo ou a pasta a ser renomeada. 2. Siga um dos procedimentos abaixo, para ativar o nome do arquivo ou da pasta:

¡ Escolha Arquivo > Renomear. ¡ Clique no nome do arquivo, fa ça uma pausa e, em seguida, clique novamente. ¡ Clique com o botão direito do mouse no ícone do arquivo e escolha Renomear.

3. Digite o novo nome. 4. Pressione a tecla Enter.

Para atualizar o painel Site, siga um dos procedimentos abaixo:

l Escolha Exibir > Atualizar. l Clique no botão Atualizar, no painel Site (essa opção atualiza ambos os painéis).

Nota: O Dreamweaver atualizará automaticamente o painel Site quando você fizer alterações em outro aplicativo e retornar ao Dreamweaver.

Para localizar e selecionar os arquivos retirados:

No painel Site, escolha Editar > Selecionar os arquivos retirados.

Página 94 de 160Princípios básicos do Dreamweaver

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

Page 95: 3 Principios basicos do DW

Para localizar e selecionar os arquivos que forem mais recentes no site local do que no remoto:

No painel Site, escolha Editar > Selecionar um local mais novo.

Para localizar e selecionar os arquivos que forem mais recentes no site remoto do que no local:

No painel Site, escolha Editar > Selecionar um remoto mais novo.

Como localizar arquivos no painel Site

No painel Site, é possível procurar um arquivo nos sites local e remoto. Para obter mais informações sobre como procurar e substituir o texto contido nos arquivos, consulte Busca e substituição de texto.

Para localizar um arquivo no site local:

1. Abra o arquivo do site remoto ou selecione-o na visualização Site remoto, no painel Site. 2. Siga um dos procedimentos abaixo:

¡ Se tiver aberto o arquivo na janela do documento, escolha Site > Localizar no site. ¡ Se tiver selecionado o arquivo no painel Site, clique com o botão direito do mouse e

selecione Localizar no site local.

O Dreamweaver realçará o arquivo na visualização Site local, no painel Site.

Para localizar um arquivo no site remoto:

1. Abra o arquivo do site local ou selecione-o na visualização Site local, no painel Site. 2. Siga um dos procedimentos abaixo:

¡ Se tiver aberto o arquivo na janela do documento, escolha Site > Localizar no site. ¡ Se tiver selecionado o arquivo no painel Site, clique com o botão direito do mouse e

selecione Localizar no site remoto.

O Dreamweaver realçará o arquivo na visualização Site remoto, no painel Site.

Nota: Se, enquanto a janela do documento estiver ativa, for selecionado Site > Localizar no site e o arquivo não fizer parte do site que estiver aberto, o Dreamweaver tentará determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrirá este site e, em seguida, procurará nele o arquivo.

Como utilizar o navegador de arquivos integrado

 

 

   

Página 95 de 160Princípios básicos do Dreamweaver

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

Page 96: 3 Principios basicos do DW

O navegador de arquivos integrado do painel Site fornece acesso à área de trabalho e à rede local, a outros sites definidos e a arquivos que não estiverem associados a um site. Utilize o navegador de arquivos integrado para efetuar as seguintes operações em arquivos situados fora do site:

l Arrastar arquivos l Excluir arquivos l Renomear arquivos l Procurar na rede l Abrir arquivos no Dreamweaver ou em outros aplicativos l Operações envolvendo sites, como a transferência de arquivos

Nota: Efetue essas operações da mesma maneira que aquelas que envolvem arquivos em um site definido (consulte Sobre o painel Site. A melhor maneira de gerenciar os arquivos consiste em criar um site do Dreamweaver (consulte Como configurar um site do Dreamweaver).

Quando se arrasta um arquivo de um site para outro ou para uma pasta que não esteja associada a um site, o Dreamweaver copia o arquivo arrastado para o local em que for solto. Se o arquivo for arrastado dentro do mesmo site, o Dreamweaver o moverá do local original para o local em que for solto.

Quando se arrasta um arquivo que não esteja associado a um site, o Dreamweaver o copia para o local em que for solto. Se o arquivo que não estiver associado ao site for arrastado para uma outra pasta sem associação com o site, o Dreamweaver o transferir á para o local em que for solto.

Nota: Para mover um arquivo que o Dreamweaver copia como padrão, mantenha pressionada a tecla Shift enquanto arrasta o arquivo. Para copiar um arquivo que o Dreamweaver move como padrão, mantenha pressionada a tecla Control enquanto arrasta o arquivo.

No navegador de arquivos, as pastas do site aparecerão com uma cor diferente das pastas que não pertencerem a ele, para que se possa distingui-las. Se você tentar efetuar uma operação no site que afete uma pasta ou arquivo que não esteja associado ao site, o Dreamweaver solicitará a definição de um site no programa antes de efetuar a opera ção.

Para utilizar o navegador de arquivos integrado:

Na hierarquia de arquivos do painel Site, clique no sinal de adição (+) ao lado da área de trabalho.

Sobre o mapa do site

Utilize a visualização do mapa do site para exibir uma pasta local de um site do Dreamweaver como um mapa visual de ícones vinculados, adicionar novos arquivos a um site do Dreamweaver, ou adicionar, modificar ou remover links. A visualização do mapa do site é ideal para criar o layout da estrutura do site. É possível configurar rapidamente a estrutura inteira do site e, em seguida, criar uma imagem gráfica do mapa do site.

Nota: O mapa do site se aplica apenas aos sites locais. Para criar o mapa de um site remoto, copie o conteúdo deste para uma pasta na unidade local e utilize o comando Editar os sites, para definir o site como sendo local. Para obter mais informações, consulte Como configurar

 

 

Página 96 de 160Princípios básicos do Dreamweaver

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

Page 97: 3 Principios basicos do DW

uma pasta local.

Como utilizar o mapa do site

É necessário definir uma home page correspondente ao site antes de exibir o mapa do mesmo. A home page pode ser qualquer página do site; ela não precisa ser a página principal do site. Nesse caso, a home page é apenas o ponto de partida do mapa.

Para definir a home page do site:

1. Escolha Site> Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Escolha Editar, para abrir um site já existente.

Aparecerá a caixa de diálogo Defini ção do site.

3. Na lista de categorias, à esquerda, selecione Layout do mapa do site.

A caixa de diálogo Definição do site exibir á as opções do Layout do mapa do site.

4. Clique no ícone da pasta, para procurar a home page do site, ou digite um caminho de arquivo na caixa de texto Home page.

5. Clique em OK.

Para exibir o mapa de um site:

1. No painel Site, clique no botão Expandir/Fechar para expandi-lo, se já não estiver. 2. Selecione Exibir > Mapa do site, ou clique no botão Mapa do site e, em seguida, selecione

Apenas o mapa ou Site e mapa.

 

 

Página 97 de 160Princípios básicos do Dreamweaver

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

Page 98: 3 Principios basicos do DW

Selecione Apenas o mapa, para exibir o mapa do site sem a estrutura de arquivos locais, ou Site e mapa, para exibir o mapa do site e a estrutura de arquivos locais.

Nota: Se você não tiver definido uma home page ou se o Dreamweaver não puder localizar uma página denominada index.html ou index.htm no site para utilizar como home page, aparecerá uma caixa de diálogo, solicitando a seleção de uma home page mediante o clique em Editar os sites. Escolha um site, clique em Editar e, em seguida, selecione Layout do mapa do site, na lista de categorias à esquerda da caixa de di álogo Definição do site.

O painel Site exibe um mapa do site, juntamente com a estrutura de arquivos locais.

Como exibir o mapa do site

O mapa do site mostrará os arquivos HTML e outras páginas como ícones. Os links serão exibidos na ordem em que forem detectados no código-fonte HTML, da seguinte maneira:

l O texto em vermelho indica um link rompido. l O texto em azul e marcado com um ícone representando um globo indica um arquivo em

um outro site ou um link especial (como um link de correio eletrônico ou de script). l Uma marca de seleção verde indica um arquivo retirado por você. l Uma marca de seleção vermelha indica um arquivo retirado por outro usuário. l Um ícone com um cadeado indica um arquivo somente de leitura.

Como padrão, o mapa exibe dois níveis da estrutura do site, a partir da home page atual. Clique nos sinais de adição (+) ou subtração (-), ao lado de uma página, a fim de mostrar ou ocultar as páginas vinculadas abaixo do segundo nível, respectivamente.

Como padrão, o mapa do site não exibe arquivos ocultos ou dependentes. Os arquivos ocultos são arquivos HTML marcados como ocultos. O conteúdo das páginas de arquivos dependentes é diferente de HTML, podendo incluir imagens, modelos, arquivos do Macromedia Shockwave ou do Macromedia Flash. Para obter mais informações, consulte Como mostrar e ocultar os arquivos do mapa do site.

   

   

Página 98 de 160Princípios básicos do Dreamweaver

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

Page 99: 3 Principios basicos do DW

Como modificar o layout do mapa do site

Utilize as opções do Layout do mapa do site para personalizar a aparência do mapa do site. É possível especificar a home page, o número de colunas exibidas, se os identificadores de ícones exibirão o nome do arquivo ou o título da página, e decidir se os arquivos ocultos e dependentes serão mostrados.

Para modificar o layout do mapa do site:

1. Siga um dos procedimentos abaixo, para abrir a caixa de diálogo Defini ção do site: ¡ Escolha Site > Editar os sites e, em seguida, clique em Editar. Na lista de

categorias, à esquerda, selecione Layout do mapa do site. ¡ No painel Site, escolha Site > Layout.

A caixa de diálogo Definição do site exibir á as opções do Layout do mapa do site.

2. Faça as alterações necessárias.

Para obter mais informações, consulte Como definir as opções da categoria Layout do mapa do site.

3. Clique em OK, para fechar a caixa de diálogo Definição do site. 4. Clique em Concluída, para fechar a caixa de diálogo Editar os sites, se estiver aberta.

Como trabalhar com as páginas no mapa do site

Durante o trabalho no mapa do site, é possível selecionar páginas, abrir uma página para edição, adicionar novas páginas ao site, criar links entre arquivos e alterar os títulos das

 

 

Página 99 de 160Princípios básicos do Dreamweaver

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

Page 100: 3 Principios basicos do DW

páginas.

Para selecionar várias páginas no mapa do site, siga um dos procedimentos abaixo:

l Pressione a tecla Shift e clique, para selecionar uma faixa de páginas adjacentes. l Inicie em uma parte em branco da visualização e arraste um grupo de arquivos,

para selecioná-los. l Pressione a tecla Control e dê um clique, para selecionar páginas não-contíguas.

Para abrir uma página do mapa do site para edição, siga um dos procedimentos abaixo:

l Clique duas vezes no arquivo. l Selecione o arquivo e escolha Arquivo > Abrir.

Para adicionar um arquivo j á existente ao site, siga um dos procedimentos abaixo:

l Arraste um arquivo do Windows Explorer e solte-o em um arquivo do mapa do site. A página será adicionada ao site e um link será criado entre ela e o arquivo no qual for solta.

l Selecione Site > Link a um arquivo existente e, em seguida procure o arquivo.

Para criar um novo arquivo e adicionar um link no mapa do site:

1. Selecione um arquivo HTML no mapa do site e, depois, siga um dos procedimentos abaixo:

¡ Escolha Site > Link a um novo arquivo. ¡ Escolha Link a um novo arquivo, no menu contextual.

Aparecerá a caixa de diálogo Link a um novo arquivo.

2. Digite um nome, título e o texto do link. 3. Clique em OK.

O Dreamweaver salvará o arquivo na mesma pasta que o arquivo selecionado. Se for adicionado um novo arquivo a uma ramificação oculta, o novo arquivo também estará oculto (consulte Como mostrar e ocultar os arquivos do mapa do site).

Para modificar o título de uma página no mapa do site:

1. Certifique-se de que a opção Mostrar os títulos das páginas esteja selecionada, escolhendo Exibir > Mostrar os títulos das páginas, no painel Site.

2. Selecione uma página e, em seguida, siga um dos procedimentos abaixo: ¡ Clique no título. Quando ele se tornar editável, digite um novo título. ¡ Escolha Arquivo > Renomear.

3. Depois de digitar o novo nome, pressione Enter.

Nota: Durante o trabalho no painel Site, o Dreamweaver atualizará automaticamente todos os

Página 100 de 160Princípios básicos do Dreamweaver

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

Page 101: 3 Principios basicos do DW

links aos arquivos cujos nomes tiverem sido modificados.

Para alterar a home page no mapa do site, siga um dos procedimentos abaixo:

l Na visualização Site local, no painel Site, selecione um arquivo e, em seguida, clique com o botão direito do mouse e escolha Definir como home page.

l Na visualização Site local, no painel Site, clique no arquivo a ser transformado em nova home page e, em seguida, escolha Site > Definir como home page.

l Selecione um arquivo no mapa do site e escolha Site > Nova home page. l Escolha Site > Editar os sites e clique em Editar. Selecione Layout do mapa do site, na

lista de categorias da caixa de diálogo Definição do site. Procure uma nova home page e, em seguida, clique em OK.

Para atualizar a visualização do mapa do site depois de ter conclu ído as alterações:

1. Clique em qualquer ponto do mapa do site, para cancelar a sele ção dos arquivos. 2. Escolha Exibir > Atualizar.

Como mostrar e ocultar os arquivos do mapa do site

É possível modificar o layout do mapa do site, para mostrar ou não os arquivos ocultos e dependentes. Esse procedimento é útil quando se deseja enfatizar tópicos ou conteúdos importantes e retirar a ênfase de materiais menos relevantes.

Para ocultar um arquivo utilizando o mapa do site, é necessário marcar o arquivo como oculto. Quando um arquivo for ocultado, os links a ele também se tornarão ocultos. Quando um arquivo marcado como oculto for exibido, o ícone e os links a ele estarão visíveis no mapa do site, porém os nomes aparecerão em itálico.

Nota: Como padrão, os arquivos dependentes já estão ocultos.

Para marcar os arquivos como ocultos no mapa do site:

1. No mapa do site, selecione um ou mais arquivos. 2. Escolha Exibir > Mostrar/ocultar o link.

Para mostrar ou ocultar os arquivos marcados como ocultos no mapa do site, siga um dos procedimentos abaixo:

l Escolha Exibir > Mostrar os arquivos marcados como ocultos. l Escolha Exibir > Layout, para abrir a caixa de diálogo Defini ção do site e, em seguida,

selecione a opção Exibir os arquivos marcados como ocultos.

Para mostrar os arquivos dependentes no mapa do site, siga um dos procedimentos abaixo:

l Escolha Exibir > Mostrar os arquivos dependentes. l Escolha Exibir > Layout, para abrir a caixa de diálogo Defini ção do site e, em seguida,

selecione a opção Exibir os arquivos dependentes.

   

Página 101 de 160Princípios básicos do Dreamweaver

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

Page 102: 3 Principios basicos do DW

Para desmarcar os arquivos marcados como ocultos no mapa do site:

1. No mapa do site, selecione um ou mais arquivos. 2. Escolha Exibir > Mostrar os arquivos marcados como ocultos. 3. Escolha Exibir > Mostrar/ocultar o link.

Como exibir o site a partir de uma ramificação

É possível exibir os detalhes de uma determinada seção de um site, tomando como ponto de referência uma das ramificações do mapa do site.

Para exibir uma outra ramificação no mapa do site:

Selecione a página a ser exibida e escolha Exibir > Exibir como raiz.

O mapa do site será redesenhado na janela como se a página especificada estivesse na raiz do site. A caixa de texto Navegação no site, situada acima do mapa do site, exibe o caminho da home page até a página especificada. Selecione qualquer item nesse caminho para exibir o mapa do site a partir desse nível, clicando uma vez.

Para expandir ou contrair as ramificações do mapa do site:

Clique no sinal de adi ção (+) ou subtração (–) de uma ramificação.

Como salvar o mapa do site

É possível salvar o mapa do site como uma imagem e, em seguida, exibi-la (ou imprimi-la) em um editor de imagens.

Para criar um arquivo de imagem do mapa do site atual:

1. No mapa do site, siga um dos procedimentos abaixo: ¡ Escolha Arquivo > Salvar o mapa do site. Na caixa de diálogo Salvar o mapa do

site, digite um nome na caixa de texto Nome do arquivo. No menu pop-up Tipo de arquivo, selecione .bmp ou .png.

¡ Selecione Site > Visualização do mapa do site > Salvar o mapa do site > Salvar o mapa do site como PICT, ou Site > Visualização do mapa do site > Salvar o mapa do site > Salvar o mapa do site como JPEG.

2. Escolha o local onde deseja salvar o arquivo e digite o nome da imagem. 3. Clique em Salvar.

   

   

 

Página 102 de 160Princípios básicos do Dreamweaver

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

Page 103: 3 Principios basicos do DW

Como importar e exportar sites

Com o Dreamweaver, é possível exportar um site como um arquivo XML e, em seguida, importá-lo de volta para o Dreamweaver. Esse recurso permite transferir sites de um computador para outro e entre diferentes versões do produto, ou compartilhá-los com outros usuários.

Para exportar um site:

1. Escolha Site > Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Clique no botão Exportar.

Aparecerá o painel Exportar o site.

3. Procure o local onde deseja salvar o site. 4. Clique em Salvar.

O Dreamweaver salvará o site como um arquivo XML com a extensão STE no local especificado.

5. Clique em Concluída, para fechar a caixa de diálogo Editar os sites.

Para importar um site:

1. Escolha Site > Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Clique no botão Importar.

Aparecerá o painel Importar o site.

3. Procure e selecione um site (salvo como um arquivo XML) a ser importado.

Nota: Para poder importar o arquivo, é necessário exportar o site do Dreamweaver, que o salvará como um arquivo XML.

4. Clique em Abrir.

O Dreamweaver importará o site, cujo nome aparecerá na caixa de diálogo Editar os sites.

5. Clique em Concluída, para fechar a caixa de diálogo Editar os sites.

 

   

Página 103 de 160Princípios básicos do Dreamweaver

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

Page 104: 3 Principios basicos do DW

Como remover um site da lista de sites

Se não desejar mais trabalhar com um site no Dreamweaver, remova-o da lista de sites. Os arquivos do site não serão removidos.

Nota: Quando um site for removido da lista, todas as informações de configuração sobre o site serão perdidas em caráter permanente.

Para remover um site da lista de sites:

1. Escolha Site > Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Selecione o nome do site. 3. Clique em Remover.

Aparecerá uma caixa de di álogo, solicitando a confirmação da remoção.

4. Clique em Sim, para remover o site da lista, ou em Não, para manter o seu nome. 5. Clique em Concluída, para fechar a caixa de diálogo Editar os sites.

Como utilizar as opções de devolução e retirada de arquivos

Em um ambiente com vários usuários, utilize o sistema de devoluções e retiradas de arquivos dos servidores local e remoto. Caso você seja a única pessoa trabalhando no servidor remoto, utilize os comandos Colocar e Obter, sem devolver ou retirar os arquivos (consulte Como obter e colocar arquivos).

A retirada de um arquivo equivale a declarar: “Estou trabalhando com este arquivo – não o toque!”. Quando um arquivo for retirado, o Dreamweaver exibirá no painel Site o nome da pessoa que o retirou, juntamente com uma marca de seleção vermelha (se um membro da equipe o tiver retirado), ou verde (se você for essa pessoa) ao lado do ícone do arquivo.

A devolução de um arquivo possibilitará aos outros membros da equipe retirar e editá-lo. Quando você devolver um arquivo depois de tê-lo editado, a sua versão local se tornará somente leitura e aparecerá um símbolo de cadeado ao seu lado, no painel Site, para evitar qualquer modificação ao arquivo.

No servidor remoto, o Dreamweaver não modifica o status dos arquivos retirados para somente leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, será possível sobrescrever os arquivos retirados. No entanto, nos outros aplicativos, o arquivo .LCK estará visível ao lado do arquivo retirado na hierarquia de arquivos, a fim de evitar acidentes deste gênero.

Para ativar a opção Devolver/retirar em alguns sites, consulte Como configurar o sistema de devoluções e retiradas. Para obter mais informações sobre a transferência de arquivos entre os sites local e remoto sem devolvê-los ou retirá-los, consulte Como obter arquivos de um servidor remoto ou de teste e Como colocar arquivos em um servidor remoto ou de teste.

 

 

Página 104 de 160Princípios básicos do Dreamweaver

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

Page 105: 3 Principios basicos do DW

Nota: É possível utilizar os recursos de obtenção e colocação de arquivos com um servidor de teste, mas não os recursos de devolução e retirada de arquivos.

Como configurar o sistema de devoluções e retiradas

Para poder utilizar o sistema de devoluções e retiradas, é necessário associar o site local a um servidor remoto (consulte Como configurar uma pasta remota).

Para configurar o sistema de devoluções e retiradas:

1. Escolha Site> Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Selecione um site e, em seguida, clique em Editar.

Aparecerá a caixa de diálogo Defini ção do site.

3. Na lista de categorias à esquerda, clique em Informações remotas.

A caixa de diálogo Definição do site exibir á as opções de Informações remotas. A seção Devolver/retirar aparecerá na parte inferior da caixa de diálogo.

Nota: Se as opções de devoluções e retiradas não forem exibidas, o servidor remoto não foi configurado (consulte Como configurar uma pasta remota).

4. Preencha a seção Devolver/retirar.

Para obter mais informações, consulte Como definir as opções de devoluções e retiradas.

 

 

Página 105 de 160Princípios básicos do Dreamweaver

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

Page 106: 3 Principios basicos do DW

5. Clique em OK.

Como devolver e retirar os arquivos de um servidor remoto

Utilize o painel Site ou a janela do documento para devolver ou retirar os arquivos de um servidor remoto.

O sistema de devoluções e retiradas de arquivos do Dreamweaver utiliza os seguintes símbolos no painel Site:

l Uma marca de seleção verde indica que você retirou o arquivo. l Uma marca vermelha indica que um outro membro da equipe retirou o arquivo. l Um símbolo de cadeado indica que o arquivo é somente de leitura.

Se você retirar um arquivo e decidir não editá-lo (ou descartar as alterações feitas), poderá desfazer a retirada.

Para retirar os arquivos de um servidor remoto no painel Site:

1. Escolha um site no menu pop-up Site. 2. Selecione os arquivos a serem retirados.

Nota: É possível selecioná-los na visualização local ou remota.

3. Siga um dos procedimentos abaixo, para retirar o(s) arquivo(s): ¡ Clique no botão Retirar, na barra de ferramentas do painel Site. ¡ Clique com o botão direito do mouse. Em seguida, escolha Retirar, no menu

contextual. 4. Clique em Sim no aviso, para efetuar o download dos arquivos dependentes, juntamente

com os arquivos selecionados, ou em Não, para não efetuar o download dos arquivos dependentes.

Nota: É recomendável efetuar o download dos arquivos dependentes na retirada de um novo arquivo, mas se a versão mais recente dos arquivos dependentes já estiver no disco local, não haverá necessidade de efetuar o seu download novamente.

Uma marca de seleção verde aparecerá ao lado do ícone do arquivo, indicando que você o retirou.

Para devolver os arquivos para um servidor remoto no painel Site:

1. Escolha um site no menu pop-up Site. 2. Selecione os arquivo(s) retirado(s) ou novo(s).

Nota: É possível selecioná-los na visualização local ou remota.

3. Siga um dos procedimentos abaixo para devolver o(s) arquivo(s): ¡ Clique no botão Devolver, na barra de ferramentas do painel Site. ¡ Clique com o botão direito do mouse. Em seguida, escolha Devolver, no menu

contextual.

 

 

Página 106 de 160Princípios básicos do Dreamweaver

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

Page 107: 3 Principios basicos do DW

4. Clique em Sim no aviso, para efetuar o download dos arquivos dependentes, juntamente com os arquivos selecionados, ou em Não, para não efetuar o download dos arquivos dependentes.

Nota: É recomendável efetuar o upload dos arquivos dependentes na devolu ção de um novo arquivo, mas se a versão mais recente dos arquivos dependentes já estiver no servidor remoto, não haverá necessidade de efetuar o seu upload novamente.

Um símbolo de cadeado aparecerá ao lado do ícone do arquivo, indicando que, a partir de agora, ele é somente de leitura.

Para devolver ou retirar um arquivo que estiver aberto na janela do documento, siga um dos procedimentos abaixo:

l Escolha Site > Devolver, ou Site > Retirar. l Clique no ícone de Gerenciamento de arquivos, na barra de ferramentas da janela do

documento e, em seguida, escolha Devolver ou Retirar, no menu pop-up.

Nota: Se você selecionar Site > Devolver, ou Site > Retirar e o arquivo não fizer parte do site que estiver aberto, o Dreamweaver tentará determinar a qual dos sites definidos localmente pertence o arquivo. Se o arquivo pertencer a apenas um site local, o Dreamweaver abrirá este site e, em seguida, efetuará a operação de devolução ou retirada do arquivo.

Se o arquivo ativo for retirado, a versão aberta deste será substitu ída pela nova versão retirada. Se o arquivo ativo for devolvido, ele deverá ser automaticamente salvo antes da devolução, dependendo das opções de preferência definidas (consulte Como definir as preferências do site).

Para desfazer a retirada de um arquivo:

1. Selecione o arquivo. 2. Siga um dos procedimentos abaixo, para desfazer a retirada do arquivo:

¡ Escolha Site > Desfazer a retirada. ¡ Clique com o botão direito do mouse no arquivo, no painel Site. Em seguida,

escolha Desfazer a retirada, no menu contextual.

A cópia local do arquivo se tornará somente de leitura e quaisquer alterações feitas serão perdidas.

Como obter e colocar arquivos

Se você estiver trabalhando em um ambiente com vários usuários, utilize o sistema de devoluções e retiradas para transferir os arquivos entre os sites local e remoto (consulte Como utilizar as opções de devolução e retirada de arquivos). Contudo, se for a única pessoa trabalhado no site remoto, utilize os comandos Obter e Colocar, para transferir os arquivos sem devolver ou retir á-los.

Nota: Se, enquanto a janela do documento estiver ativa, você selecionar Site > Obter, ou Site > Colocar, e o arquivo não fizer parte do site que estiver aberto, o Dreamweaver tentará determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a apenas

 

 

Página 107 de 160Princípios básicos do Dreamweaver

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

Page 108: 3 Principios basicos do DW

um site local, o Dreamweaver abrirá esse site e, em seguida, executará a operação de obtenção ou colocação.

Como obter arquivos de um servidor remoto ou de teste

O comando Obter copia arquivos do site remoto ou do servidor de teste para o site local, da seguinte maneira:

l Se for utilizado o sistema de devoluções e retiradas (isto é, se a opção Ativar a devolução e retirada de arquivos estiver acionada), o comando Obter produzirá uma cópia local somente de leitura do arquivo; este continuará disponível no site remoto para os outros membros da equipe retirá-lo (consulte Como utilizar as opções de devolução e retirada de arquivos).

l Se você não estiver utilizando o sistema de devoluções e retiradas (ou seja, se a opção Ativar a devolução e a retirada de arquivos não estiver selecionada), a obtenção de um arquivo transferirá uma cópia com privilégios de leitura e gravação.

Nota: Se você estiver trabalhando em um ambiente de equipe – isto é, se outras pessoas estiverem utilizando os mesmos arquivos –, não desative a opção Ativar a devolução e retirada de arquivos. Se as outras pessoas estiverem utilizando o sistema de devolu ções e retiradas no site, você também deverá utilizar o mesmo sistema.

É possível obter os arquivos selecionando-os na visualização local ou remota do painel Site. Se a visualização remota estiver ativa, o Dreamweaver copiará os arquivos remotos selecionados no site local; se a visualização local estiver ativa, as versões remotas dos arquivos locais escolhidos serão copiadas no site local.

Para obter apenas os arquivos cuja versão remota for mais recente do que a local, utilize o comando Sincronizar (consulte Como sincronizar os arquivos nos sites local e remoto).

O Dreamweaver registra todas as atividades de transferência de arquivos através de FTP. Se ocorrer um erro durante a transferência de um arquivo com o FTP, o Registro de FTP do site poderá auxiliá-lo a determinar o problema.

Para exibir o registro de FTP:

Selecione Exibir > Registro de FTP do site

Para obter arquivos de um servidor remoto ou de teste:

1. No painel Site, escolha um site no menu pop-up Site. 2. Caso esteja utilizando o FTP para transferir arquivos, clique no botão Conectar, a fim de

abrir uma conexão com o servidor remoto.

Se já houver uma conexão aberta (indicada pelo botão Desconectar), ignore essa etapa.

Caso os arquivos remotos já estejam vis íveis no painel Remoto devido a uma conexão anterior, não será preciso clique em Conectar; quando se clica em Obter, o Dreamweaver estabelece automaticamente a conexão.

 

 

Página 108 de 160Princípios básicos do Dreamweaver

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

Page 109: 3 Principios basicos do DW

3. Selecione os arquivos dos quais deseja efetuar o download.

Em geral, esses arquivos são selecionados na visualização remota ou do servidor de teste, mas é possível selecionar os arquivos correspondentes na visualização local, se preferir.

4. Siga um dos procedimentos abaixo, para obter o arquivo: ¡ Clique no botão Obter, na barra de ferramentas do painel Site. ¡ No menu contextual, escolha Obter. ¡ Escolha Site > Obter.

Nota: Se o arquivo estiver aberto na janela do documento, também é possível escolher Site > Obter, nessa janela.

Aparecerá uma caixa de di álogo, indagando se você deseja obter os arquivos dependentes.

5. Para efetuar o download dos arquivos dependentes, clique em Sim; para ignorá-los, clique em Não.

Se já houver cópias locais dos arquivos dependentes, clique em Não.

Para interromper a transferência de arquivos a qualquer momento, clique no botão Cancelar, na caixa de diálogo Status. É possível que a transferência não pare imediatamente.

Como colocar arquivos em um servidor remoto ou de teste

O comando Colocar copia arquivos do site local para o site remoto, geralmente sem alterar o status de retirada dos mesmos. Há duas situações comuns nas quais é possível utilizar o comando Colocar em vez de Devolver:

l Utilize Colocar quando você não estiver em um ambiente com muitos usuários e não estiver utilizando o sistema de devoluções e retiradas de arquivos.

Nota: Se desejar colocar um arquivo em um servidor remoto e devolvê-lo, utilize o comando Devolver (consulte Como devolver e retirar os arquivos de um servidor remoto).

l Utilize o comando Colocar quando desejar colocar a versão atual do arquivo no servidor e continuar a editá-lo.

Nota: Caso você coloque um arquivo que ainda não exista no site remoto e esteja utilizando o sistema de devoluções e retiradas, o arquivo será copiado no site remoto e, em seguida, retirado, para que você possa continuar a editá-lo.

Para colocar apenas os arquivos cuja versão local for mais recente do que a remota, consulte Como sincronizar os arquivos nos sites local e remoto.

Nota: Não utilize caracteres especiais (como é, ç ou ¥) ou pontuação, como dois pontos, barras inclinadas ou pontos nos nomes dos arquivos que serão colocados em um servidor remoto ou de teste. Muitos servidores converterão esses caracteres durante o processo do upload, provocando a ruptura dos links entre os arquivos.

   

Página 109 de 160Princípios básicos do Dreamweaver

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

Page 110: 3 Principios basicos do DW

Para colocar arquivos em um servidor remoto ou de teste:

1. No painel Site, escolha um site no menu pop-up Site. 2. Se for utilizado o FTP para a transferência dos arquivos, clique em Conectar, para abrir

uma conexão com o servidor remoto, que lhe permitirá ver o que há no site remoto antes de transferir os arquivos.

Contudo, não é necessário clique em Conectar; quando você clique em Colocar, o Dreamweaver estabelecerá automaticamente a conexão.

3. Selecione os arquivos cujo upload deseja efetuar.

Normalmente, eles s ão escolhidos na visualização local, mas é possível selecionar os arquivos correspondentes na visualização remota, se preferir.

4. Siga um dos procedimentos abaixo, para colocar o arquivo: ¡ Clique no botão Colocar, na barra de ferramentas do painel Site. ¡ No menu contextual, escolha Colocar. ¡ Escolha Site > Colocar.

Se o arquivo estiver aberto na janela do documento, será possível escolher Site > Colocar, na janela do documento.

5. Se o arquivo não tiver sido salvo, é possível que apareça uma caixa de diálogo (dependendo da definição da preferência, no painel Site, na caixa de diálogo Preferências), que permite salvar o arquivo antes de colocá-lo no servidor remoto.

Para salvar o arquivo, clique em Sim; para colocar a versão salva anteriormente no servidor remoto, clique em Não. Se preferir não salvar o arquivo, as alterações feitas após o último salvamento não serão colocadas no servidor remoto. Contudo, o arquivo continuará aberto para que ainda seja possível salvá-lo arquivo depois de colocá-lo no servidor.

Aparecerá uma caixa de di álogo, indagando se você deseja colocar os arquivos dependentes.

6. Para efetuar o upload dos arquivos dependentes, clique em Sim; para ignorá-los, clique em Não.

Se o site remoto já contiver cópias dos arquivos dependentes, clique em Não. Para evitar perguntas sobre os arquivos dependentes em uploads posteriores, selecione a opção Não indague novamente.

Para interromper a transferência de arquivos, clique no botão Cancelar, na caixa de di álogo Status. É possível que a transferência não pare imediatamente.

O Dreamweaver registra todas as atividades de transferência de arquivos através de FTP. Se ocorrer um erro durante a transferência de um arquivo com o FTP, o Registro de FTP do site poderá auxiliá-lo a determinar o problema. Para exibir o registro, selecione Exibir > Registro de FTP do site.

 

 

Página 110 de 160Princípios básicos do Dreamweaver

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

Page 111: 3 Principios basicos do DW

Como sincronizar os arquivos nos sites local e remoto

Depois que os arquivos forem criados nos sites local e remoto, é possível sincronizá-los. Utilize o comando Site > Sincronizar, para transferir as versões mais recentes dos seus arquivos de e para o site remoto.

Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a sincronização dos arquivos utilizará o FTP. Para obter mais informações sobre o uso do FTP, consulte Como configurar uma pasta remota.

Antes de sincronizar os sites, o Dreamweaver permite verificar quais arquivos serão colocados ou obtidos no servidor remoto. O Dreamweaver também confirmará quais arquivos foram atualizados após o término da sincronização.

Para verificar quais arquivos são mais recentes no site local ou no site remoto, sem sincronização, siga um dos procedimentos abaixo:

l Escolha Editar > Selecionar um local mais novo, ou Editar > Selecionar um remoto mais novo (no painel Site).

l Escolha Site > Arquivos do site Exibir > Selecionar um local mais novo.

Para sincronizar os arquivos:

1. No painel Site, escolha um site no menu pop-up da lista Sites atuais. 2. Selecione os arquivos ou as pastas específicas.

Se desejar sincronizar o site inteiro, ignore essa etapa.

3. No painel Site, siga um dos procedimentos abaixo, para sincronizar: ¡ Escolha Site > Sincronizar. ¡ Clique com o botão direito do mouse. Em seguida, selecione Sincronizar, no menu

contextual.

Aparecerá a caixa de diálogo Sincronizar os arquivos.

4. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da caixa de diálogo Sincronizar os arquivos.

Dreamweaver sincronizará os arquivos automaticamente. Se os arquivos já estiverem sincronizados, o Dreamweaver o informará que a sincronização não é necessária.

   

Página 111 de 160Princípios básicos do Dreamweaver

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

Page 112: 3 Principios basicos do DW

Como encobrir as pastas e os arquivos do site

O encobrimento de sites permite excluir determinadas pastas e tipos arquivos de um site, nas operações de obtenção e colocação. É possível encobrir pastas individuais, mas não arquivos individuais. Para encobrir arquivos, é necessário selecionar um tipo de arquivo. O Dreamweaver encobrirá todos os arquivos desse tipo e memorizará as defini ções de cada site, para evitar que você tenha que fazer seleções a cada vez que trabalhar no site.

Por exemplo: se estiver trabalhando em um site grande e não desejar efetuar o upload diário dos arquivos de multim ídia, utilize o encobrimento do site para encobrir a pasta de componentes de multimídia. O sistema excluirá os arquivos desta pasta das opera ções que afetarem o site.

É possível encobrir pastas e tipos de arquivos do site remoto ou local. O encobrimento exclui as pastas e os arquivos encobertos nas seguintes operações:

l Colocar, Obter, Devolver e Retirar l Relatórios l Selecione um local mais novo e Selecione um remoto mais novo l Operações no site inteiro, como Verificar os links, Alterar o link, Localizar/substituir l Sincronizar l Conteúdo do painel Propriedades l Atualizações de modelos e bibliotecas

Nota: O Dreamweaver excluir á os modelos e itens de bibliotecas encobertos apenas nas operações de obtenção e colocação, mas não excluirá esses itens de operações em lote porque isso poderá acarretar a sua dessincronização com as respectivas instâncias.

Para realizar uma opera ção em uma determinada pasta encoberta, basta selecionar o item no painel Site. A realização direta de uma operação em um arquivo ou uma pasta anula o encobrimento.

Como ativar e desativar o encobrimento de sites

O encobrimento de sites está ativo como padrão. É possível desativar o encobrimento em caráter permanente ou apenas temporariamente, para realizar uma operação que afete todos os arquivos, inclusive os que estiverem encobertos. Quando o encobrimento de sites for desativado, todos os arquivos que estiverem encobertos serão desencobertos. Quando ele for reativado, todos os arquivos que estavam anteriormente encobertos retornarão a esse estado.

Nota: Também é possível utilizar a opção Desencobrir tudo, para desencobrir todos os arquivos, mas ela não desativará o encobrimento; também não há uma maneira de encobrir novamente todas as pastas e os arquivos que estavam anteriormente encobertos, exceto redefinindo o encobrimento de cada pasta e tipo de arquivo.

Para ativar ou desativar o encobrimento de sites:

1. No painel Site, selecione um site no menu pop-up Site.

   

Página 112 de 160Princípios básicos do Dreamweaver

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

Page 113: 3 Principios basicos do DW

2. No painel Site, siga um dos procedimentos abaixo: ¡ Escolha Site > Encobrimento, para exibir o submenu. ¡ Selecione um arquivo ou uma pasta e clique com o botão direito do mouse, para

exibir o menu contextual. 3. No submenu, siga um dos procedimentos abaixo:

¡ Selecione Ativar o encobrimento ou Desativar o encobrimento. ¡ Selecione Definições. Em seguida, na guia Avançado da caixa de di álogo Definição

do site, escolha Encobrimento, na lista de categorias à esquerda, marque ou desmarque a opção Ativar o encobrimento e clique em OK.

O encobrimento deste site estará ativado ou desativado.

Como encobrir e desencobrir as pastas do site

É possível encobrir determinadas pastas, mas não todas as pastas ou um site inteiro. É possível encobrir diversas pastas simultaneamente.

Para encobrir ou desencobrir determinadas pastas de um site:

1. No painel Site, selecione um site no menu pop-up Site que possuir a opção de encobrimento de sites ativada.

2. Selecione a(s) pasta(s) que deseja encobrir ou desencobrir. 3. No painel Site, siga um dos procedimentos abaixo:

¡ Escolha Site > Encobrimento > Encobrir, ou Site > Encobrimento > Desencobrir. ¡ Clique com o botão direito do mouse. Em seguida, escolha Encobrimento >

Encobrir, ou Encobrimento > Desencobrir, no menu contextual.

Uma linha vermelha atravessando o ícone correspondente à pasta aparecerá ou desaparecerá, indicando o encobrimento ou não da pasta.

Como encobrir e desencobrir determinados tipos de arquivos

É possível indicar determinados tipos de arquivos a serem encobertos, de modo que o Dreamweaver encubra todos os arquivos que terminarem com um padrão especificado. Por exemplo: encubra todos os arquivos que terminarem com a extensão .txt. Os tipos de arquivos digitados não precisam ser extensões; eles podem obedecer a qualquer padrão no final dos nomes de arquivo.

Para encobrir determinados tipos de arquivos em um site:

1. No painel Site, selecione um site no menu pop-up Site que possuir a opção de encobrimento de sites ativada.

2. Siga um dos procedimentos abaixo: ¡ Escolha Site > Encobrimento > Definições.

   

   

Página 113 de 160Princípios básicos do Dreamweaver

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

Page 114: 3 Principios basicos do DW

¡ Clique com o botão direito do mouse e, em seguida, selecione Defini ções.

Aparecerá a guia Avançado da caixa de diálogo Definição do site.

3. Selecione a caixa de sele ção Encobrir os arquivos terminados com. 4. Na caixa de texto, digite os tipos de arquivos a serem encobertos.

Por exemplo: .jpg, para encobrir todos os arquivos do site que terminarem com .jpg.

Nota: Separe os diversos tipos de arquivos com um espaço; não utilize vírgulas ou sinais de dois pontos.

5. Clique em OK.

Aparecerá uma linha vermelha atravessando os arquivos afetados, indicando o seu encobrimento.

Dica: Alguns programas de software criam arquivos de cópia de segurança com um determinado sufixo, como .bak. Esses arquivos podem ser encobertos.

Para desencobrir determinados tipos de arquivos em um site:

1. No painel Site, selecione um site no menu pop-up Site que possuir a opção de encobrimento de sites ativada.

2. Siga um dos procedimentos abaixo: ¡ Escolha Site > Encobrimento > Definições. ¡ Clique com o botão direito do mouse e, em seguida, selecione Encobrimento >

Definições.

Aparecerá a guia Avançado da caixa de diálogo Definição do site.

3. Siga um dos procedimentos abaixo: ¡ Desmarque a caixa de seleção Encobrir os arquivos terminados com, para

desencobrir todos os tipos de arquivos enumerados na caixa de texto. ¡ Exclua determinados tipos de arquivos da caixa de texto, para desencobri-los.

4. Clique em OK.

Página 114 de 160Princípios básicos do Dreamweaver

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

Page 115: 3 Principios basicos do DW

As linhas vermelhas que atravessavam os arquivos afetados desaparecerão, indicando o seu desencobrimento.

Como desencobrir todas as pastas e arquivos

É possível desencobrir todas as pastas e arquivos de um site simultaneamente. Essa ação não pode ser desfeita; não há como encobrir novamente todos os itens que estavam encobertos anteriormente. Será necessário encobri-los individualmente.

Nota: Se desejar desencobrir temporariamente todas as pastas e arquivos e encobri-los novamente, desative o encobrimento de sites (consulte Como ativar e desativar o encobrimento de sites).

Para desencobrir todas as pastas e arquivos de um site:

1. No painel Site, selecione um site no menu pop-up Site que possuir a opção de encobrimento de sites ativada.

2. Selecione qualquer arquivo ou pasta do site. 3. No painel Site, siga um dos procedimentos abaixo:

¡ Escolha Site > Encobrimento > Desencobrir tudo. ¡ Clique com o botão direito do mouse e, em seguida, escolha Encobrimento >

Desencobrir tudo.

Nota: Essa etapa também cancela a seleção da caixa Encobrir os arquivos terminados com, em Site > Encobrimento > Definições.

As linhas vermelhas que atravessavam os ícones dos arquivos e das pastas desaparecerão, indicando o seu desencobrimento.

Como utilizar as Design Notes

As Design Notes s ão notas que acompanham um arquivo. Elas estão associadas ao arquivo que descrevem, mas são armazenadas em outro arquivo. Utilize as Design Notes para controlar as informações adicionais relativas aos documentos, como nomes de arquivos de origem de imagens e comentários sobre o status de arquivos.

Por exemplo: se um documento for copiado de um site para outro, é possível adicionar Design Notes a esse documento, informando que seu original está na pasta do outro site. Posteriormente, se esse documento for atualizado, você será informado que é necessário atualizar também a página original.

O comando Design Notes pode ser utilizado também para controlar informações confidenciais que não podem ser colocadas no interior de um documento por motivos de segurança. Por exemplo: podem ser incluídas informações sobre a criação do documento ou notas sobre a

 

 

 

 

Página 115 de 160Princípios básicos do Dreamweaver

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

Page 116: 3 Principios basicos do DW

escolha de um determinado preço ou configuração, ou ainda quais fatores de marketing influenciaram uma decisão sobre design.

No painel Site é possível ver quais arquivos apresentam Design Notes anexadas: haverá um ícone de Design Notes na coluna Notas.

Para obter informações gerais sobre a utilização das Design Notes, consulte Como salvar as informações sobre o arquivo contidas nas Design Notes. Para obter informações sobre a utilização das Design Notes com o Fireworks, consulte Como utilizar as Design Notes no Fireworks e no Flash com o Dreamweaver.

Como ativar e desativar as Design Notes

Ative ou desative as Design Notes de um site na categoria Design Notes da caixa de diálogo Definição do site. Ao ativar as Design Notes, é possível optar por utiliz á-las apenas localmente, se desejar.

Para ativar e desativar as Design Notes do site ou para utilizá-las localmente:

1. Escolha Site> Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.

2. Selecione um site e, em seguida, clique em Editar.

Aparecerá a caixa de diálogo Defini ção do site.

3. Na lista de categorias, à esquerda, clique em Design Notes.

Aparecerá a caixa de diálogo Defini ção do site, que apresenta as opções das Design Notes.

 

 

Página 116 de 160Princípios básicos do Dreamweaver

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

Page 117: 3 Principios basicos do DW

4. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da categoria Design Notes .

5. Clique em OK.

Como salvar as informações sobre o arquivo contidas nas Design Notes

É possível criar um arquivo de Design Notes para cada documento ou modelo do site. Pode-se criar também Design Notes referentes a miniaplicativos, controles ActiveX, imagens, filmes Flash, objetos Shockwave e campos de imagem nos documentos.

Nota: Se forem adicionadas Design Notes a um arquivo de modelo, os documentos criados com esse modelo não as herdarão.

Para adicionar Design Notes a um documento:

1. Enquanto o documento estiver ativo na janela do documento, escolha Arquivo > Design Notes.

Também é possível selecionar o arquivo no painel Site e, em seguida, escolher Arquivo > Design Notes.

Nota: Se o arquivo residir em um site remoto, retire ou obtenha o arquivo e, em seguida selecione-o na pasta local (consulte Como devolver e retirar os arquivos de um servidor remoto ou Como obter e colocar arquivos).

Aparecerá a caixa de diálogo Design Notes.

2. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da caixa de diálogo Design Notes.

 

 

Página 117 de 160Princípios básicos do Dreamweaver

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

Page 118: 3 Principios basicos do DW

3. Clique em OK, para salvar as notas.

O Dreamweaver salvará as notas em uma pasta denominada _notes, no mesmo local que o arquivo. O nome do arquivo será o mesmo do arquivo do documento, além da extensão .mno.

Por exemplo: se o nome do arquivo for índice.html, o arquivo de Design Notes a ele associado será denominado índice.html.mno.

Para adicionar Design Notes a um objeto:

1. Selecione o objeto. 2. Clique com o botão direito do mouse. Em seguida, escolha Design Notes, no menu

contextual do objeto.

Aparecerá a caixa de diálogo Design Notes.

3. Preencha a caixa de diálogo.

Para obter mais informações, consulte Como definir as opções da caixa de diálogo Design Notes.

4. Clique em OK, para salvar as notas.

O Dreamweaver salvará o arquivo de Design Notes de um objeto em uma pasta _notes, no mesmo diretório que o arquivo de origem do objeto, que não é necessariamente idêntico ao do documento no qual aparece o objeto.

Para abrir as Design Notes associadas a um arquivo, siga um dos procedimentos abaixo:

l Selecione um arquivo no painel Site ou abra o arquivo e, em seguida, escolha Arquivo > Design Notes.

l Na coluna Notas do painel Site, clique duas vezes no ícone amarelo das Design Notes.

Para atribuir um status personalizado às Design Notes:

1. Abra as Design Notes correspondentes a um arquivo ou objeto (consulte o procedimento anterior).

2. Clique na guia Todas as informações. 3. Clique no botão com o sinal de adição (+). 4. No campo Nome, digite a palavra status. 5. No campo Valor, digite o status.

Se já existir um valor de status, ele será substituído pelo novo valor.

6. Clique na guia Informações básicas e observe que o valor do novo status aparecerá no menu pop-up Status.

Nota: É possível constar apenas um valor personalizado no menu de status de cada vez. Se esse procedimento for realizado novamente, o Dreamweaver substituir á o valor de status inserido na primeira vez pelo novo valor.

Para excluir do site as Design Notes sem associação:

1. Escolha Site> Editar os sites.

Página 118 de 160Princípios básicos do Dreamweaver

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

Page 119: 3 Principios basicos do DW

Aparecerá a caixa de diálogo Editar os sites.

2. Selecione o site e, em seguida, clique em Editar.

Aparecerá a caixa de diálogo Defini ção do site.

3. Na lista de categorias, à esquerda, clique em Design Notes. 4. Clique no botão Limpar.

O Dreamweaver solicitará que verifique se as Design Notes que não estão mais associadas a um arquivo do site deverão ser excluídas.

Se você utilizar o Dreamweaver para excluir um arquivo ao qual está associado um arquivo de Design Notes, ambos serão excluídos; por essa razão, geralmente os arquivos órfãos de Design Notes ocorrerão apenas quando um arquivo for excluído ou renomeado fora do Dreamweaver.

Nota: Se a opção Manter as Design Notes for cancelada antes de clique em Limpar, o Dreamweaver excluirá todos os arquivos de Design Notes associados ao site.

Como utilizar as Design Notes no Fireworks e no Flash com o Dreamweaver

Se um arquivo for aberto no Macromedia Fireworks ou no Macromedia Flash e exportado com outro formato, estes programas salvarão automaticamente, em um arquivo de Design Notes, o nome do arquivo de origem inicial.

Por exemplo: se você abrir minha_casa.png no Fireworks e exportá-lo como minha_casa.gif, o Fireworks criará automaticamente um arquivo de Design Notes denominado minha_casa.gif.mno, contendo o nome do arquivo original, como uma URL de arquivo: absoluto. As Design Notes correspondentes ao arquivo minha_casa.gif poderão conter a linha abaixo:

fw_source="arquivo:///Meudisco/sites/propriedades/orig/minha_casa.png"

Uma Design Note semelhante do Flash poderia conter a seguinte linha:

fl_source="arquivo:///Meudisco/sites/propriedades/orig/minha_casa.fla"

Nota: Para poder compartilhar as Design Notes, os usuários devem definir o mesmo caminho relativo à raiz do site. Por exemplo: sites/propriedades/orig.

Quando a imagem for importada para o Dreamweaver, o arquivo de Design Notes será automaticamente copiado para o site, juntamente com a imagem. Quando a imagem for selecionada no Dreamweaver e você decidir editá-la no Fireworks (consulte Como iniciar um editor externo para arquivos de mídia), este programa abrirá o arquivo original a ser editado.

 

 

 

 

Página 119 de 160Princípios básicos do Dreamweaver

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

Page 120: 3 Principios basicos do DW

Como utilizar os relatórios para aprimorar o fluxo de trabalho

É possível utilizar os relatórios para aprimorar a colaboração entre os membros de uma equipe de criação para a Web.

É possível executar relatórios de fluxo de trabalho que exibam as pessoas que retiraram certos arquivos e quais destes apresentam Design Notes a eles associadas. É possível refinar ainda mais os relatórios das Design Notes, especificando os parâmetros nome/valor.

Para obter mais informações sobre a execução de outros tipos de relatórios, consulte Como utilizar os relatórios para testar um site.

Nota: É necessário contar com uma conexão definida a um site remoto, para poder executar os relatórios de fluxo de trabalho.

Para executar um relatório Retirado por:

1. Abra um documento. 2. Escolha Site > Relatórios.

A caixa de diálogo Relatórios é exibida.

3. Selecione uma categoria e os tipos de relatório a serem executados.

Para obter mais informações, consulte Configurar as opções da caixa de diálogo Relatórios.

4. Clique em Executar.

Dependendo do relatório a ser criado, será necessário salvar o arquivo, definir o site ou selecionar uma pasta (se ainda não o tiver feito).

O relatório aparecerá no painel Relatórios de site (no grupo de painéis Resultados).

Página 120 de 160Princípios básicos do Dreamweaver

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

Page 121: 3 Principios basicos do DW

Para utilizar um relatório:

1. No painel Relatórios de site, clique no cabeçalho da coluna de acordo com a qual deseja ordenar os resultados.

É possível ordenar por nome de arquivo, número da linha ou descrição. Também é possível executar vários relatórios diferentes e manter os diversos painéis Resultados abertos.

2. Selecione qualquer linha do relatório e clique no botão Mais informações, no lado esquerdo do painel Relatórios de site, para obter uma descrição do problema.

As informações aparecerão no painel Referência (no grupo de painéis Código).

3. Clique duas vezes em qualquer linha do relatório, para exibir o código correspondente na janela do documento.

Nota: Na visualização do projeto, o Dreamweaver exibe o problema relatado em código, em visualização mista.

4. Clique em Salvar o relatório para salvar o relatório.

Quando o relatório for salvo, ele poderá ser importado para um arquivo existente de modelo. Em seguida, é possível importar o arquivo para um banco de dados ou planilha, e imprimir ou exibi-lo em um site da Web.

Sobre o painel Sitespring no Dreamweaver

Utilize o painel Sitespring para exibir o Sitespring diretamente no Dreamweaver. Também é possível selecionar uma tarefa do painel, estabelecer conexão com a página do Sitespring na Web e editar a tarefa. Salve quaisquer alterações feitas no Sitespring, retorne ao Dreamweaver e atualize o painel Sitespring, para examiná-las. O painel Sitespring exibe as tarefas, juntamente com a sua prioridade, seu status, data de vencimento e o nome do projeto.

Nota: O Sitespring está disponível apenas em inglês. Observe que os comandos de menu e as tomadas de tela da interface mostrados nessa seção estão em inglês.

Requisitos do sistema

Para poder utilizar o painel Tarefas Sitespring com o Dreamweaver, é necessário que o Dreamweaver MX ou mais avançado e o Sitespring estejam instalados no sistema ou no servidor. Se o Sitespring ainda não estiver instalado, efetue o download de uma versão de teste gratuita no site da Web Macromedia Sitespring. O Sitespring é compatível apenas com os navegadores mais recentes que apresentam o Flash ativado, como o Netscape Communicator

 

 

   

Página 121 de 160Princípios básicos do Dreamweaver

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

Page 122: 3 Principios basicos do DW

4.06 ou mais avançado, e o Microsoft Internet Explorer 5 ou mais avançado.

Como se conectar ao servidor Sitespring

Para poder utilizar o painel Sitespring, é necessário se conectar e efetuar o logon no servidor Sitespring.

Nota: Para obter mais informações sobre como utilizar o Macromedia Sitespring, consulte a documentação do mesmo.

Para se conectar ao servidor Sitespring no Dreamweaver:

1. Na janela do documento, escolha Janela > Outros > Sitespring, ou pressione a tecla F7.

Aparecerá a caixa de diálogo Logon em Sitespring.

2. Na caixa de texto Servidor Sitespring, digite a URL correspondente ao servidor Sitespring ao qual você se conectará. Se você não tiver certeza a respeito da URL, entre em contato com o administrador do sistema.

3. Nas caixas de texto Nome de usuário e Senha, digite o seu nome de usuário e senha do servidor Sitespring. A caixa de texto Nome de usuário é sensível a maiúsculas e minúsculas.

4. Se desejar salvar a sua senha no computador, selecione a opção Salvar a senha e Efetue o logon automático.

Nota: Apenas essa opção permite fechar e abrir o painel Sitespring novamente, dispensando a necessidade de digitar qualquer informação de logon. Se tiver efetuado o logoff completo do Sitespring, através do Dreamweaver ou do próprio aplicativo, será necessário digitar essas informações novamente.

5. Clique em Efetue o logon, para se conectar ao servidor Sitespring.

O status da conexão aparecerá acima da caixa de texto Servidor Sitespring. Assim que a conexão for estabelecida, o painel Sitespring exibirá as tarefas.

Se tiver dificuldades em se conectar à Sitespring, entre em contato com o administrador do sistema.

 

 

Página 122 de 160Princípios básicos do Dreamweaver

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

Page 123: 3 Principios basicos do DW

Como utilizar o painel Sitespring

Utilize o painel Sitespring para visualizar todas as tarefas ou apenas aquelas associadas a um determinado projeto. É possível editar uma tarefa e atualizar a lista de tarefas, para examinar as alterações. A caixa de texto Tarefas exibe as tarefas, sua prioridade, seu status, data de vencimento e o nome do projeto.

Para utilizar o painel Sitespring:

1. Na janela do documento, escolha Janela > Outros > Sitespring, ou pressione a tecla F7. 2. Efetue o logon no servidor Sitespring, se ainda não o tiver feito (consulte Como se

conectar ao servidor Sitespring).

O painel Sitespring exibe as tarefas atuais. Ele consiste de uma caixa de texto Tarefas, que exibe as tarefas abertas, além de um menu e ícones para realizar certas ações. As tarefas são ordenadas por nome. Clique no cabeçalho de uma coluna, para ordenar de acordo com a mesma. O painel Sitespring não exibe tarefas com o status Suspenso or Concluído.

3. Selecione uma dentre as seguintes opções: ¡ Escolha um determinado projeto no menu pop-up Projeto, para exibir apenas as

tarefas a ele associadas, ou escolha Mostrar todas as tarefas, para exibir todas as tarefas.

¡ Clique no ícone Atualizar, para atualizar o painel Sitespring e examinar qualquer alteração que tiver sido feita na tarefa.

Nota: É necessário salvar as alterações no Sitespring para que elas apareçam no painel.

¡ Selecione uma tarefa na coluna Nome e, em seguida, clique no botão Editar a tarefa, para editá-la.

Para editar as tarefas, também é necessário efetuar o logon no Sitespring, através da página da Web Efetue o logon. Se você tiver efetuado o logon, aparecerá a respectiva página Editar a tarefa. Se você ainda não tiver efetuado o logon, aparecerá a página da Web Efetue o logon.

¡ Clique no ícone Sitespring, para ir diretamente para a página do Sitespring na Web.

Se você já tiver efetuado o logon, a home page do Sitespring aparecerá. Se você ainda não tiver efetuado o logon, aparecerá a página Efetue o logon.

   

Página 123 de 160Princípios básicos do Dreamweaver

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

Page 124: 3 Principios basicos do DW

¡ Para fechar o painel Sitespring, pressione a tecla F7 ou clique na caixa de fechamento do painel.

Nota: Para evitar efetuar o logon repetidas vezes, é recomendável fechar o painel Sitespring, ao invés de efetuar o logoff.

¡ Clique no link Logoff, para efetuar o logoff do Sitespring ou para alterar o usuário.

Aparecerá a caixa de diálogo Logon em Sitespring. Digite outro nome de usuário e outra senha para alterar o usuário, ou feche a caixa de diálogo, para efetuar a desconexão (consulte Como efetuar o logoff do Sitespring no Dreamweaver).

Como efetuar o logoff do Sitespring no Dreamweaver

Ao clicar no link Logoff no painel Sitespring, você também estará efetuando o logoff do Sitespring no Dreamweaver.

Para efetuar o logoff do Sitespring:

1. No painel Sitespring, clique no link Logoff.

Aparecerá a caixa de diálogo Logon em Sitespring.

2. Feche a caixa de diálogo.

Na próxima vez em que você acessar o painel Sitespring, não será necessário digitar a URL novamente para se conectar (a não ser que você deseje acessar outro servidor Sitespring), porém será necessário digitar a sua senha.

Referência

Esta seção contém informações sobre as caixas de diálogo apresentadas neste capítulo.

 

 

 

 

Página 124 de 160Princípios básicos do Dreamweaver

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

Page 125: 3 Principios basicos do DW

Como definir as opções de preferências do painel Site

O objetivo desta caixa de diálogo é definir as preferências do usuário do painel Site.

Procedimento

1. Altere as seguintes opções, conforme a necessidade:

Mostrar sempre especifica qual site (remoto ou local) será sempre mostrado e em que local do painel Site (esquerdo ou direito) aparecerão os arquivos locais e remotos.

Como padrão, o site local aparecerá sempre à direita. O painel que não for escolhido (como padrão, o esquerdo) será variável: ele poderá exibir o mapa do site ou os arquivos do outro site (como padrão, o site remoto).

Arquivos dependentes exibe uma solicitação para transferir os arquivos dependentes (como imagens, folhas de estilos externas e outros arquivos mencionados no arquivo HTML) que o navegador carregará junto com o arquivo HTML. Como padrão, as opções Solicitar na obtenção/retirada e Solicitar na colocação/devolução estão selecionadas.

Dica: Para forçar a solicitação Incluir os arquivos dependentes a aparecer mesmo quando essas opções estiverem desmarcadas, pressione a tecla Alt (no Windows) enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar.

Conexão de FTP determina se a conexão ao site remoto será terminada após o número especificado de minutos sem atividade.

Tempo limite do FTP especifica o número de segundos durante os quais o Dreamweaver tentará estabelecer uma conexão com o servidor remoto.

Se não houver resposta após o tempo especificado, o Dreamweaver exibirá uma caixa de diálogo de advertência, alertando-o para esse fato.

Opções de transferência por FTP determina se o Dreamweaver selecionará a opção padrão depois de um determinado número de segundos, quando será exibida uma caixa de diálogo durante a transferência de arquivos sem a resposta do usuário.

Host da firewall especifica o endereço do servidor proxy através do qual será estabelecida a conexão aos servidores externos, se você estiver atrás de uma firewall.

Caso contrário, deixe esse espaço em branco. No caso de estar atrás de uma firewall, selecione a opção Utilizar a firewall, na caixa de diálogo Defini ção do site. Consulte Como configurar uma pasta remota.

Porta da firewall especifica a porta da firewall através da qual você se conectará ao servidor de FTP. Se a conexão for estabelecida através de uma porta diferente da 21 (o padrão de FTP), digite o número aqui.

Opções de colocação: Salvar os arquivos antes de colocá-los indica que os arquivos não salvos serão salvos automaticamente antes de serem colocados no site remoto.

   

Página 125 de 160Princípios básicos do Dreamweaver

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

Page 126: 3 Principios basicos do DW

Editar os sites exibe a caixa de diálogo Editar os sites, onde é possível editar um site existente ou criar um novo site.

2. Clique em OK.

Tópico relacionado

Como definir as preferências do site

Como definir as opções da categoria Colunas de visualização de arquivos

O objetivo desta caixa de diálogo é efetuar alterações nas colunas de visualização de arquivos do painel Site. É possível alterar a ordem das colunas, adicionar ou excluir uma coluna.

Para alterar a ordem das colunas:

Selecione o nome de uma coluna e, em seguida, clique no botão de seta acima ou seta abaixo, para alterar a posição da coluna selecionada.

Nota: É possível modificar a ordem de qualquer coluna, exceto a coluna Nome, que é sempre a primeira.

Para adicionar uma nova coluna:

1. Clique no botão com o sinal de adição (+). 2. Na caixa de texto Nome da coluna, digite o nome da coluna. 3. Escolha um valor no menu pop-up Associar à Design Note, ou digite um outro

valor qualquer.

É necessário associar uma nova coluna à Design Note, para que haja dados a serem exibidos no painel Site.

4. Escolha uma opção de alinhamento para determinar como o Dreamweaver alinhará o texto na coluna.

5. Para mostrar ou ocultar a coluna, selecione ou cancele a sele ção da opção Mostrar. 6. Para compartilhar a coluna com todos os usuários que estiverem conectados ao site

remoto, selecione a opção Compartilhar com todos os usuários deste site.

Para excluir uma coluna que tiver sido adicionada:

Selecione uma coluna a ser excluída e, em seguida, clique no botão com o sinal de subtração (-).

Nota: A coluna será excluída imediatamente e sem confirmação, portanto certifique-se que deseja exclui-la antes de clique no botão com o sinal de subtração (-).

Tópico relacionado

Como alterar as colunas de visualização de arquivos

   

Página 126 de 160Princípios básicos do Dreamweaver

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

Page 127: 3 Principios basicos do DW

Como definir as opções da categoria Layout do mapa do site

O objetivo desta caixa de diálogo é personalizar a aparência do mapa do site.

Procedimento

1. Na caixa de texto Home Page, digite um caminho de arquivo até a home page do site ou clique no ícone da pasta, para procurar o arquivo.

É necessário que a home page esteja no site local. Se você não especificar uma home page ou se o Dreamweaver não localizar um arquivo denominado index.html ou index.htm na raiz, o programa solicitará a seleção de uma home page quando o mapa do site for aberto.

2. Escolha uma dentre as opções de Coluna: ¡ Na caixa de texto Número de colunas, digite um número, para definir quantas

páginas serão exibidas por linha na janela do mapa do site. ¡ Na caixa de texto Largura da coluna, digite um número, para definir a largura, em

pixels, das colunas do mapa do site. 3. Em Identificadores de ícones, selecione se o nome exibido com os ícones dos documentos

no mapa do site será representado por um nome de arquivo ou título de página. 4. Em Opções, selecione quais arquivos serão exibidos no mapa do site:

¡ Escolha Exibir os arquivos marcados como ocultos, para exibir os arquivos HTML que estiverem marcados como ocultos no mapa do site.

Se uma página estiver oculta, o seu nome e os links a ela aparecerão em itálico. Para obter informações sobre como ocultar os arquivos, consulte Como mostrar e ocultar os arquivos do mapa do site.

¡ Escolha Exibir os arquivos dependentes, para mostrar todos os arquivos dependentes na hierarquia do site.

Um arquivo dependente corresponde a uma imagem ou outro conteúdo estranho ao HTML que for carregado pelo navegador com a página principal.

Tópico relacionado

Como modificar o layout do mapa do site

Como definir as opções de devoluções e retiradas

O objetivo da seção Devolver/retirar é definir as opções de devoluções e retiradas de arquivos.

Procedimento

   

   

Página 127 de 160Princípios básicos do Dreamweaver

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

Page 128: 3 Principios basicos do DW

1. Selecione a opção Ativar a devolução e retirada de arquivos, se estiver trabalhando em equipe (ou sozinho, mas utilizando vários computadores diferentes).

Esta opção é útil para informar aos outros usuários sobre a retirada de um arquivo para edição, ou para alertar a si próprio que uma versão mais recente de um arquivo foi deixada em um outro computador.

Nota: Se a opção de acesso remoto for Local/rede, Banco de dados SourceSafe ou WebDAV, essa será a única opção de devolução e retirada de arquivos. As demais opções dessa seção se aplicam apenas ao acesso de FTP.

2. Selecione a opção Retirar os arquivos na abertura, se desejar retirar os arquivos automaticamente quando clique duas vezes para abri-los no painel Site.

Nota: A utilização da opção Arquivo > Abrir, para abrir um arquivo não o retira, mesmo quando esta estiver selecionada.

3. Digite um nome de retirada.

O nome de retirada aparecerá no painel Site, juntamente com qualquer arquivo que for retirado; isso permitirá que os membros da equipe se comuniquem com a pessoa certa se um arquivo necessário tiver sido retirado.

Se você trabalhar sozinho utilizando vários computadores, utilize um nome de retirada diferente em cada computador (por exemplo: AliceR-MacCasa e AliceR-PCEscritório), o que permitir á saber onde está a última versão do arquivo, caso se esqueça de devolvê-lo.

4. Digite um endereço de correio eletrônico.

Se você digitar um endereço de correio eletrônico e, em seguida, retirar um arquivo, o seu nome aparecerá no painel Site, ao lado do arquivo, como um link (azul e sublinhado). Se um membro da equipe clique no link, o seu programa padrão do correio eletrônico exibirá uma nova mensagem com o endereço eletrônico do usuário e o assunto correspondente ao arquivo e ao nome do site.

Tópico relacionado

Como configurar o sistema de devoluções e retiradas

Como definir as opções da caixa de diálogo Sincronizar os arquivos

O objetivo desta caixa de diálogo é definir as opções de sincronização dos arquivos.

Procedimento

1. No menu pop-up Sincronizar, escolha uma das seguintes opções: ¡ Para sincronizar o site inteiro, escolha Todo o ‘Nome do site’ site. ¡ Para sincronizar apenas os arquivos selecionados, escolha Apenas os arquivos locais

selecionados (ou Apenas os arquivos remotos selecionados, se a visualização remota do painel Site for o local onde tiver sido realizada a seleção mais recente).

 

 

Página 128 de 160Princípios básicos do Dreamweaver

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

Page 129: 3 Principios basicos do DW

2. Escolha uma direção para a cópia dos arquivos: ¡ Selecione Colocar os arquivos mais novos no remoto, para carregar todos os

arquivos locais com datas de modificação mais recentes que os seus correspondentes remotos.

¡ Selecione Obter os arquivos mais novos do remoto, para efetuar o download de todos os arquivos remotos com datas de modificação mais recentes que os seus correspondentes locais.

¡ Escolha Obter e colocar os arquivos mais novos, para colocar as versões mais recentes de todos os arquivos nos sites remoto e local.

3. Decida se irá excluir os arquivos do site de destino que não tiverem correspondentes no site de origem. Esta opção não estará disponível se você tiver selecionado a opção Obter e colocar, na caixa de texto de direção.

Se for escolhida a opção Colocar os arquivos mais novos no remoto e selecionada a opção Excluir, o Dreamweaver excluirá os arquivos do site remoto que não tiverem correspondentes locais. Se for escolhido Obter os arquivos mais novos do remoto, o Dreamweaver excluirá os arquivos do site local que não tiverem correspondentes remotos.

4. Clique em Visualizar.

Se a versão mais recente de cada arquivo escolhido já estiver em ambos os lugares e não houver nada a ser excluído, aparecerá um alerta informando-lhe que a sincronização não será necessária.

5. Na visualização Sincronizar os arquivos, verifique quais arquivos deseja excluir, colocar e obter.

Se não desejar que o Dreamweaver exclua, coloque ou obtenha um determinado arquivo, desmarque-o, clicando na caixa de seleção à esquerda do mesmo (na coluna Ação).

6. Clique em OK.

O Dreamweaver ir á transferir (e, conforme a necessidade, excluir) automaticamente os arquivos e, em seguida, atualizará o status da caixa de diálogo.

7. Para salvar as informações relativas à verificação em um arquivo local, clique em Salvar o registro.

Tópico relacionado

Como sincronizar os arquivos nos sites local e remoto

Como definir as opções da categoria Design Notes

O objetivo desta caixa de diálogo é ativar ou desativar as Design Notes de um site.

Para ativar as Design Notes:

1. Selecione a opção Manter as Design Notes.

 

 

Página 129 de 160Princípios básicos do Dreamweaver

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

Page 130: 3 Principios basicos do DW

2. Selecione a opção Carregar as Design Notes para compartilhamento, para efetuar o upload das Design Notes associadas ao site juntamente com os demais documentos.

Se essa opção estiver selecionada, será possível compartilhar as Design Notes com os outros membros de sua equipe. Quando um arquivo for colocado ou obtido, o Dreamweaver automaticamente colocará ou obterá o arquivo de Design Notes a ele associado.

Se você cancelar a seleção desta opção, o Dreamweaver manterá as Design Notes localmente, mas o seu upload não será feito com os arquivos. Caso esteja trabalhando sozinho no site, você poderá cancelar a seleção desta opção para melhorar o desempenho das transferências de arquivos.

3. Clique em OK.

Para desativar as Design Notes:

1. Desmarque a opção Manter as Design Notes. 2. Clique em Limpar e, em seguida, em Sim, se desejar que o Dreamweaver exclua todos os

arquivos locais de Design Notes do site. 3. Clique em OK.

Aparecerá uma caixa de di álogo, indagando se você gostaria de excluir os arquivos de Design Notes existentes.

4. Clique em Sim, para excluí-los, ou em Não, para manter esses arquivos. 5. Clique em OK, para fechar a caixa de diálogo Definição do site.

Para utilizar as Design Notes apenas localmente:

Desmarque a opção Efetuar o upload para compartilhamento.

As Design Notes não serão transferidas para o site remoto quando os arquivos forem devolvidos/retirados. Você ainda poderá adicionar e modificar localmente as Design Notes do site.

Tópicos relacionados

Como utilizar as Design Notes

Como salvar as informações sobre o arquivo contidas nas Design Notes

Como definir as opções da caixa de diálogo Design Notes

O objetivo desta caixa de diálogo é adicionar Design Notes a um arquivo.

Procedimento

1. Na guia Informações básicas, escolha um status do documento, no menu pop-up Status. 2. Clique no ícone de data (logo acima da caixa de texto Notas), para inserir a data

   

Página 130 de 160Princípios básicos do Dreamweaver

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

Page 131: 3 Principios basicos do DW

atual local. 3. Digite os comentários na caixa de texto Notas. 4. Para que o arquivo de Design Notes seja sempre aberto simultaneamente à abertura do

arquivo, selecione Mostrar quando o arquivo estiver aberto. 5. Na guia Todas as informações, clique no botão com o sinal de adição (+) para adicionar

um novo par chave/valor; selecione um par e clique no botão com o sinal de subtração (–) para removê-lo.

Por exemplo: denomine uma chave Autor (na caixa de texto Nome) e defina o valor como sendo Henfil (na caixa de texto Valor).

6. Clique em OK.

Tópicos relacionados

Como utilizar as Design Notes

Como salvar as informações sobre o arquivo contidas nas Design Notes

Como definir as opções da categoria Encobrimento

O objetivo desta caixa de diálogo é ativar ou desativar o encobrimento de determinados tipos de arquivos.

Procedimento

1. Marque ou desmarque a caixa de seleção Ativar o encobrimento, para ativar ou desativar o encobrimento.

2. Marque ou desmarque a caixa de seleção Encobrir os arquivos terminados com, para ativar ou desativar o encobrimento de determinados tipos de arquivos.

3. Digite ou exclua os sufixos de arquivos na caixa de texto a ser encoberta ou desencoberta.

4. Clique em OK.

Tópicos relacionados

Como ativar e desativar o encobrimento de sites

Como encobrir e desencobrir determinados tipos de arquivos

Configuração de um documento

O Macromedia Dreamweaver MX oferece um ambiente flexível para se trabalhar com uma variedade de documentos de desenvolvimento e criação na Web. Além de documentos HTML, é

   

 

 

Página 131 de 160Princípios básicos do Dreamweaver

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

Page 132: 3 Principios basicos do DW

possível criar e abrir documentos CFML, ASP, JavaScript, CSS ou documentos de texto.

A caixa de diálogo Novo documento fornece diversos tipos de documentos dos quais é possível criar um novo documento. Nessa interface fácil de utilizar, é possível criar um novo documento ou um modelo em branco, um documento com base em modelos existentes ou um documento ou modelo com base em um dos layouts de p ágina projetados fornecidos com o Dreamweaver. É possível utilizar esses modelos e layouts de página projetados básicos para rapidamente começar a desenvolver páginas da Web com aparência profissional.

Outras opções de documentos também estão disponíveis na caixa de diálogo Novo documento. É possível selecionar documentos de texto, tais como documentos JavaScript ou CSS (Folha de estilo em cascata, Cascading Style Sheet), e documentos de página dinâmica, como páginas Macromedia ColdFusion, Microsoft Active Server Pages (ASP) e PHP. Se geralmente o usuário trabalha com um tipo de documento, poderá defini-lo como o tipo de documento padrão para as novas páginas que criar.

No Dreamweaver, é possível definir facilmente as propriedades de um documento, tais como tags meta, título de documentos e cores de fundo, além de várias outras propriedades de página na visualização do projeto ou na visualização do código.

Este capítulo inclui os tópicos a seguir:

l Como trabalhar com a caixa de diálogo Novo documento l Como abrir documentos existentes l Definição das propriedades do documento l Seleção de elementos na janela do documento l Utilização de guias visuais no processo de projeto l Como automatizar as tarefas l Referência

Como criar documentos do Dreamweaver

A caixa de diálogo Novo documento exibe diversos tipos de documentos dos quais é possível criar uma nova página. O Dreamweaver abre a caixa de diálogo Novo documento ao escolher Arquivo > Novo. Se o usuário trabalha predominantemente com um tipo de documento, como páginas HTML, ColdFusion ou páginas ASP (Active Server Pages), convém configurar um tipo de documento padrão. A configuração de um tipo de documento padrão permite ao usuário abrir um novo documento de um tipo preferido ao criar um novo documento sem ter de abrir a caixa de diálogo Novo documento.

Tópicos relacionados

Como criar um novo documento em branco

Como abrir documentos existentes

Como criar um documento a partir de um modelo existente

Como criar um documento a partir de um arquivo de projeto do Dreamweaver

 

 

Página 132 de 160Princípios básicos do Dreamweaver

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

Page 133: 3 Principios basicos do DW

Como trabalhar com a caixa de diálogo Novo documento

A caixa de diálogo Novo documento fornece diversas opções para a seleção de um novo documento de trabalho. É possível criar um novo documento das seguintes maneiras:

l É possível começar com um documento em branco. l É possível utilizar um modelo que define a aparência do documento e determina as partes

de um documento que podem ser editadas.

Para abrir a caixa de diálogo Novo documento:

l Escolha Arquivo > Novo.

A caixa de diálogo Novo documento contém duas guias: Geral e Modelos.

A guia Geral contém vários tipos de documento que podem ser utilizados para criar uma nova página em branco. É possível selecionar um novo documento nas categorias Página básica, Página dinâmica e Conjunto de molduras. Crie uma página com base em um tipo de arquivo especial, como arquivos CSS, JavaScript, VBScript ou de texto, selecionando um documento na categoria Outro. A categoria Modelos fornece diversos tipos de documentos dos quais é possível criar um modelo em branco, como modelos HTML e modelos nos quais é possível inserir comportamentos de servidor.

As categorias Folhas de estilos CSS, Projetos de página e Projetos de páginas (acess íveis) fornecem arquivos de design pré-criados que você pode utilizar para criar suas próprias páginas. No caso de folhas de estilos CSS, é possível copiar uma folha de estilos padronizada e, depois, aplicá-la ao documento.

Dependendo do tipo de documento selecionado, outras opções são exibidas na caixa de diálogo. Se for selecionado um documento HTML, por exemplo: é possível tornar o documento compatível com XHTML. Ao selecionar um arquivo de Projetos de página, é possível criar um documento ou um modelo.

A guia Modelos contém uma lista de sites do Dreamweaver definidos pelo usuário. É possível escolher um modelo de qualquer um dos sites listados para criar novos documentos com base nesse modelo.

Selecione uma categoria para ver uma lista de tipos de documentos disponíveis na lista Documentos, exibida à direita. Quando o usuário clica em um documento da lista, é exibida a descri ção correspondente e, no caso de documentos das categorias Projetos de página, Folhas de estilos CSS e Conjuntos de molduras, uma visualização do documento selecionado.

É possível utilizar a opção Preferências, localizada na parte inferior da caixa de diálogo Novo documento, para definir preferências para o documento padrão, como tipo de documento, codificação e extensão de arquivo. Além disso, é possível definir uma opção para abrir um novo documento automaticamente sem utilizar a caixa de di álogo Novo documento. Para obter informações sobre a definição das preferências de um documento, veja Definição de preferências do novo documento.

Utilize o link Obter mais conteúdo, exibido na caixa de diálogo Novo documento, para ir para o Dreamweaver Exchange e efetuar o download de mais conteúdo para o projeto da página.

   

Página 133 de 160Princípios básicos do Dreamweaver

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

Page 134: 3 Principios basicos do DW

Como criar um novo documento em branco

É possível utilizar a caixa de diálogo Novo documento para selecionar o tipo de documento que se deseja criar.

Se, geralmente, você trabalha com um tipo de documento específico, poderá definir um documento padrão e automaticamente abrir um novo documento com base no documento padrão por ele definido. Para obter informações, veja Definição de preferências do novo documento.

Para criar um novo documento em branco:

1. No Dreamweaver, escolha Arquivo > Novo.

A caixa de diálogo Novo documento é exibida. A guia Geral já está selecionada.

2. Na lista Categoria, selecione a categoria do documento a ser criado.

Por exemplo: selecione Página básica para criar um documento HTML ou Página dinâmica para criar um documento ColdFusion ou ASP e assim por diante.

3. Na lista de documentos, selecione o tipo de página que deseja criar e siga um dos procedimentos abaixo:

¡ Clique em Criar. ¡ Clique duas vezes no item da lista de documentos. ¡ Pressione Enter.

A caixa de diálogo é fechada e um novo documento é exibido na janela do documento.

Como criar um documento a partir de um arquivo de projeto do Dreamweaver

O Dreamweaver vem com diversos arquivos de elementos de design e de layout de página com aparência profissional. É possível utilizar esses arquivos de projeto como pontos de partida para criar páginas do seu próprio site.

Os arquivos de projeto incluem documentos e modelos que seguem padrões de acessibilidade, documentos de layout de página com base em tabelas e Folhas de estilos CSS. É possível visualizar um documento e ler uma breve descrição dos respectivos elementos de design de itens nas categorias Folhas de estilos CSS, Conjuntos de molduras, Projetos de página e Projetos de página (acessíveis).

Ao criar um documento com base em um arquivo de projeto, o Dreamweaver cria uma cópia do arquivo. Se o arquivo de projeto inclui links para arquivos de propriedades (tais como imagens,

   

 

 

Página 134 de 160Princípios básicos do Dreamweaver

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

Page 135: 3 Principios basicos do DW

elementos Flash ou uma Folha de estilos CSS externa), ao salvar o documento, o Dreamweaver solicita que salve uma cópia dos arquivos dependentes. Selecione o local dos arquivos dependentes, conforme a sua preferência, ou utilizar a localização da pasta padrão gerada pelo Dreamweaver (com base no nome de origem do arquivo de projeto).

Também é possível criar um novo modelo a partir de um arquivo de projeto. O modelo já possui regiões editáveis definidas. É possível criar novas regi ões editáveis no modelo. O usuário será solicitado a salvar o arquivo como um modelo para o site atual. Arquivos vinculados também serão copiados para o site.

Nota: Se for criado um documento com base em um conjunto de molduras predefinido, apenas a estrutura do conjunto de molduras será copiada e não o conteúdo da moldura. Além disso, será necessário salvar cada arquivo de moldura separadamente. Para obter informações sobre como salvar molduras, veja Como salvar arquivos de moldura e de conjunto de molduras.

Para criar uma Folha de estilo em cascata:

1. Abra a caixa de di álogo Novo documento e escolher Arquivo > Novo. 2. Na lista Categoria, selecione Folhas de estilos CSS.

A lista de documentos à direita é atualizada com uma seleção de Folhas de estilos CSS.

3. Na lista de documentos, selecione uma folha de estilos para visualizar as propriedades e descri ção correspondentes e siga um dos procedimentos abaixo:

¡ Clique em Criar. ¡ Clique duas vezes no item da lista de documentos. ¡ Pressione Enter.

A caixa de diálogo é fechada e um novo documento CSS é exibido na janela do documento. A Folha de estilos CSS é aberta na visualização do código.

4. Escolha Arquivo > Salvar como. 5. Na caixa de diálogo Salvar como, navegar até o local onde deseja salvar o arquivo, digite

um nome de arquivo exclusivo para o documento e clique em Salvar.

Para criar um documento Projetos de página:

1. Abra a caixa de di álogo Novo documento e escolher Arquivo > Novo. 2. Na lista Categoria, selecione Projeto de página ou Projeto de página (acessível),

dependendo das necessidades de projeto. 3. Na lista Projetos de página, selecione o documento a ser usado como modelo para a nova

página. 4. Siga um dos procedimentos abaixo:

¡ Para criar um documento, selecione o botão de opção Documento. ¡ Para criar um novo modelo, selecione o botão de opção Modelo.

5. Clique em Criar.

Um novo documento é exibido na janela do documento. Se for criado um modelo, serão vistas as regiões editáveis definidas e o usuário será solicitado a salvar o documento como um modelo para o site atual.

6. Escolha Arquivo > Salvar para salvar o documento.

Se o arquivo tiver links para arquivos de propriedades, será exibida a caixa de diálogo Copiar os arquivos dependentes.

7. Na caixa de diálogo Copiar os arquivos dependentes, definir opções para copiar as

Página 135 de 160Princípios básicos do Dreamweaver

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

Page 136: 3 Principios basicos do DW

propriedades para o site atual. 8. Clique em Copiar para copiar as propriedades para a pasta selecionada e fechar a caixa de

diálogo.

Como criar um documento a partir de um modelo existente

A caixa de diálogo Novo documento pode ser utilizada para selecionar, visualizar e criar um novo documento a partir de um modelo existente. É possível selecionar um modelo de quaisquer sites definidos pelo Dreamweaver.

Os documentos da categoria Projeto de página, na caixa de diálogo Novo documento, também permitem criar modelos. Uma vez que um documento de projeto de página é salvo como um modelo no site do usuário, ele pode criar páginas com base nesse modelo. Para obter informações, veja Como criar um documento a partir de um arquivo de projeto do Dreamweaver.

Para obter mais informações sobre como trabalhar com modelos e documentos baseados em modelos, consulte o Sobre os modelos do Dreamweaver.

Para criar um novo documento a partir de um modelo:

1. Escolha Arquivo > Novo para abrir a caixa de diálogo Novo documento. 2. Na guia Modelos, na lista Modelos para, selecione o site do Dreamweaver que contém o

modelo desejado. 3. A lista Site exibe modelos no site selecionado, se houver. 4. Selecione o modelo a ser utilizado. 5. Desmarcar a opção Atualizar a página quando o modelo for alterado se desejar desanexar

o novo documento do modelo. 6. Clique em Criar.

Um novo documento é criado.

7. Salve o documento.

Salva de um documento

Ao salvar um documento, evite utilizar espaços e caracteres especiais nos nomes de arquivos e pastas. Particularmente, não utilizar caracteres especiais (como é, ç ou ¥) ou pontuação (como dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que serão colocados em um servidor remoto; muitos servidores alteram esses caracteres durante o upload, o que causa o rompimento dos links para os arquivos. Além disso, não colocar um número no início de um nome de arquivo.

Para salvar um documento:

 

 

   

Página 136 de 160Princípios básicos do Dreamweaver

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

Page 137: 3 Principios basicos do DW

1. Escolha Arquivo > Salvar. 2. Na caixa de diálogo que é exibida, navegar até a pasta onde deseja salvar o arquivo. 3. No campo de texto Nome do arquivo, digite um nome para o arquivo. 4. Clique em Salvar para salvar o arquivo.

Como abrir documentos existentes

No Dreamweaver, é possível abrir um documento HTML existente ou qualquer tipo de documento dinâmico, mesmo que não tenha sido criado no Dreamweaver. É possível abrir o documento e utilizar o Dreamweaver para editá-lo, beneficiando-se do recurso de criação de páginas da visualização do projeto ou da visualização do código.

Também é possível abrir arquivos de texto diferentes de HTML, tais como arquivos JavaScript, arquivos XML, Folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de texto.

Determinados arquivos, como um documento CSS, s ão abertos somente na visualização do código e permitem editar o código no arquivo. É possível atualizar o documento enquanto se trabalha no Dreamweaver e, depois, salvar as alterações feitas no arquivo.

Se o documento a ser aberto é um arquivo do Microsoft Word 97, Word 98 ou Word 2000 salvo como HTML, convém importá-lo para o Dreamweaver em vez de abri-lo. Ao importar um arquivo HTML do Word, o Dreamweaver solicita limpar as tags de markup irrelevantes que o Word insere em arquivos HTML. É possível utilizar o comando Limpar o HTML do Word para definir uma cor de fundo para a página e limpar a formatação da Folha de estilos CSS no documento importado.

Para abrir um arquivo existente, seguir um dos procedimentos abaixo:

1. No Dreamweaver, escolher Arquivo > Abrir. 2. Na caixa de diálogo que aparece, selecione o arquivo a ser aberto. 3. Clique em Abrir.

O documento é aberto na janela do documento.

Nota: Por padrão, documentos JavaScript, de texto e de Folhas de estilos CSS são abertos na visualização do código. Para obter informações sobre como alterar a defini ção de um editor de texto externo e exibir esses tipos de arquivos, veja Como iniciar um editor externo para arquivos de m ídia.

Para abrir e importar um arquivo HTML do Microsoft Word:

1. No Dreamweaver, escolher Arquivo > Importar > HTML do Word.

É exibida a caixa de diálogo Selecionar o arquivo HTML do Word a ser importado.

2. Na caixa de diálogo, selecione o documento a ser aberto. 3. Clique em Abrir.

O Dreamweaver abre o documento em uma nova janela e a caixa de diálogo Limpar o HTML do Word é exibida.

   

Página 137 de 160Princípios básicos do Dreamweaver

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

Page 138: 3 Principios basicos do DW

4. Escolha opções na guia Básica ou Detalhes para selecionar as opções de limpeza a serem aplicadas ao documento.

Para obter mais informações sobre as opções de limpeza, veja Como limpar o HTML do Microsoft Word.

5. Clique em OK.

O Dreamweaver aplica as definições de limpeza ao novo documento e é exibido um log das alterações feitas.

1. Salve o documento.

Definição das propriedades do documento

Os títulos de páginas, as cores e imagens de fundo, as cores do texto e dos links e as margens são propriedades básicas de todo documento HTML. O t ítulo da página identifica e nomeia o documento. Uma cor ou imagem de fundo define a aparência geral do documento. As cores do texto e dos links ajudam os visitantes do site a distinguir entre texto comum e hipertexto e também a identificar os links que foram ou não visitados.

Para obter informações sobre como preencher a caixa de diálogo Propriedades da página, veja Seleção de opções de Propriedades da página.

Alteração do t ítulo do documento

O título de uma página HTML ajuda os visitantes do site a controlar o que estão exibindo enquanto navegam e também identifica a página nas listas de histórico e marcadores do visitante. Se uma página não tiver um t ítulo, ela será exibida na janela do navegador e nessas listas como um Documento sem título. Observar que o ato de salvar um documento e lhe atribuir um nome não é o mesmo que dar um título a uma página. Para localizar todos os documentos sem título existentes no site, utilizar o comando > Relatórios do site; veja Como utilizar os relatórios para testar um site.

Para alterar o título de uma página:

1. Com o documento aberto, seguir um dos procedimentos abaixo: ¡ Escolha Modificar > Propriedades da página. ¡ Escolha Exibir > Barra de ferramentas (se ainda não estiver selecionada). ¡ Clique com o botão direito do mouse em uma área vazia do documento e, em

seguida, selecione Propriedades da página. 2. Na caixa de texto T ítulo, digite o título da página e pressione Enter. 3. Se estiver editando o título na caixa de di álogo Propriedades da página, clique em OK.

 

 

 

 

Página 138 de 160Princípios básicos do Dreamweaver

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

Page 139: 3 Principios basicos do DW

O título é exibido na barra de título da janela do documento e na barra de ferramentas, se estiver sendo exibida. O nome do arquivo da página e a pasta na qual o arquivo é salvo são exibidos entre parênteses ao lado do título, na barra de título. Um asterisco indica que o documento contém alterações que ainda não foram salvas.

Definição de uma imagem de fundo ou de uma cor de fundo para a página

Para definir uma imagem ou cor de fundo da página, utilizar a caixa de diálogo Propriedades da página. Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a cor aparecerá durante o download da imagem e, então, esta cobrirá a cor. Se a imagem de fundo contiver algum pixel transparente, a cor de fundo transparecerá.

Para definir uma imagem ou cor de fundo:

1. Escolha Modificar > Propriedades da página ou selecionar Propriedades da página, no menu contextual, na visualização do projeto da janela do documento.

2. Para definir uma imagem de fundo, clique no botão Procurar e, depois, procurar a imagem e selecioná-la. Uma alternativa é digitar o caminho da imagem de fundo na caixa Imagem de fundo.

O Dreamweaver colocará lado a lado (repetirá) a imagem de fundo se esta não preencher toda a janela, exatamente como fazem os navegadores. Para que a imagem de fundo não seja colocada lado a lado, utilizar a opção Folhas de estilo em cascata para desativar a repetição de imagens. Veja Definição de propriedades de fundo do estilo CSS.

3. Para definir uma cor de fundo, clique na caixa Cor de fundo e selecionar uma cor no seletor de cores.

Como trabalhar com as cores

No Dreamweaver, muitas caixas de di álogo, assim como o inspetor de propriedades de diversos elementos de páginas, contêm uma caixa de cores, que abre um seletor de cores. Utilize o seletor de cores para escolher uma cor para um elemento da página.

Para escolher uma cor no Dreamweaver:

1. Clique em uma caixa de cores de qualquer caixa de diálogo ou do inspetor de propriedades.

O seletor de cores é exibido.

   

 

 

Página 139 de 160Princípios básicos do Dreamweaver

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

Page 140: 3 Principios basicos do DW

2. Siga um dos procedimentos abaixo: ¡ Utilize o conta-gotas para selecionar uma exemplo de cor na paleta. Todas as cores

exibidas nas paletas Cubos de cor (padrão) e Tom contínuo são aceitas pela Web, mas as cores de outras paletas não (para obter mais informações, veja Sobre as cores aceitas pela Web).

¡ Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela, inclusive fora das janelas do Dreamweaver. Se você clicar na área de trabalho ou em outro aplicativo, o Dreamweaver selecionará a cor do local clicado, porém é possível alternar para o outro aplicativo; neste caso, clique em uma janela do Dreamweaver, para continuar a trabalhar neste programa, ou mantenha pressionado o botão do mouse enquanto move do Dreamweaver para a área de trabalho, a fim de evitar sair do Dreamweaver.

¡ Para aumentar a seleção de cores, utilizar o menu pop-up localizado no canto superior direito do seletor de cores. É possível selecionar Cubos de cor, Tom contínuo, Windows, Mac OS, Tons de cinza e Passar à cor aceita pela Web.

Deve-se observar que as paletas Cubos de cor e Tom contínuo são aceitas pela Web, mas as paletas Windows, Mac OS e Tons de cinza não são. Se estiver utilizando uma paleta que não for aceita pela Web e, em seguida, escolher Passar à cor aceita pela Web, o Dreamweaver substituirá a cor selecionada pela cor mais próxima aceita pela Web. Em outras palavras, é possível que a cor não corresponda à que for visualizada.

¡ Para limpar a cor atual sem ter de escolher outra cor, clique no botão Tachado. ¡ Para abrir o seletor de cores do sistema, clique no botão Roda de cores. Para obter

mais informações, veja Sobre as cores aceitas pela Web.

Sobre as cores aceitas pela Web

Em HTML, as cores são expressas como valores hexadecimais (por exemplo: #FF0000) ou como nomes de cores (vermelho). Uma cor aceita pela Web tem a mesma aparência no Netscape Navigator e no Microsoft Internet Explorer nos sistemas Windows em execução no modo de 256 cores. Na prática, diz-se que há 216 cores comuns e que qualquer valor hexadecimal que combine os pares 00, 33, 66, 99, CC ou FF (valores RGB 0, 51, 102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web.

No entanto, testes revelam que existem somente 212 cores aceitas pela Web em vez de 216,

 

 

Página 140 de 160Princípios básicos do Dreamweaver

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

Page 141: 3 Principios basicos do DW

pois o Internet Explorer, quando executado no Windows, não interpreta corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0).

No Dreamweaver, as paletas Cubos de cor (padr ão) e Tom contínuo utilizam a paleta de 216 cores aceitas pela Web; a sele ção de uma cor de uma dessas paletas exibir á o valor hexadecimal da cor.

Para escolher uma cor fora da faixa de cores aceitas pela Web, abrir o seletor de cores do sistema, clicando no botão Roda de cores, localizado no canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema não se limita às cores aceitas pela Web.

As versões para UNIX do Netscape Navigator utilizam uma paleta de cores diferente daquela usada nas versões para Windows e Macintosh. Se a programação for exclusiva para navegadores UNIX (ou se o público-alvo for composto por usuários do Windows ou Macintosh com monitores de 24 bits e por usuários do UNIX com monitores de 8 bits), deve-se considerar a possibilidade de utilizar valores hexadecimais que combinem os pares 00, 40, 80, BF ou FF, que produzem cores aceitas pela Web para o SunOS.

Definição das cores padrão do texto

Defina as cores padrão do texto comum, links, links visitados e dos links ativos na caixa de diálogo Propriedades da página ou escolher um esquema de cores predefinido para definir as cores do texto e do fundo da página (veja Como trabalhar com as cores).

Nota: A cor dos links ativos é a cor assumida por um link quando se clica nele. Alguns navegadores da Web podem não utilizar a cor que você especificar.

Para definir as cores padrão do texto, seguir um dos procedimentos abaixo:

l Escolha Modificar > Propriedades da página e, em seguida, escolher as cores para as opções Cor do texto, Cor do link, Links visitados e Links ativos.

l Escolha Comandos > Definir o esquema de cores e, em seguida, escolher uma cor de fundo e um conjunto de cores para o texto e os links.

A caixa de exemplo exibe a aparência do esquema de cores no navegador.

Seleção de elementos na janela do documento

Para selecionar um elemento na visualização do projeto da janela do documento, clique no elemento. Se um elemento está invisível, é necessário torná-lo vis ível para poder selecioná-lo.

Para selecionar elementos, utilizar as seguintes técnicas:

l Para selecionar um elemento visível na janela do documento, clique nele ou arrastar o

   

 

 

Página 141 de 160Princípios básicos do Dreamweaver

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

Page 142: 3 Principios basicos do DW

mouse sobre o elemento. l Para selecionar um elemento invisível, escolher Exibir > Aux ílios visuais > Elementos

invisíveis (se esse item de menu já não estiver selecionado) e, em seguida, clique no marcador do elemento na janela do documento.

Alguns objetos são exibidos na página em um lugar diferente de onde foi inserido o código correspondente. Por exemplo: uma camada pode estar em qualquer posi ção na página, mas o código que a define estará em uma posição fixa. Quando os elementos invisíveis estiverem sendo exibidos, o Dreamweaver mostrará os marcadores na janela do documento para indicar a localização do código de tais elementos. A sele ção de um marcador seleciona o elemento inteiro. Por exemplo: a seleção do marcador de uma camada seleciona toda a camada (veja Sobre os elementos invisíveis).

l Para selecionar uma tag completa (inclusive o seu conteúdo, se houver), clique em uma tag do seletor de tags, localizado na parte inferior esquerda da janela do documento (o seletor de tags é exibido tanto na visualização do projeto como na visualização do código). O seletor sempre mostra as tags que contêm a seleção atual ou o ponto de inserção. A tag mais à esquerda é a tag mais externa que contém a seleção atual ou o ponto de inserção. A tag seguinte está contida na tag mais externa e assim por diante. A tag mais à direita é a tag mais interna, que contém a seleção atual ou o ponto de inserção.

No exemplo a seguir, o ponto de inserção está em uma tag de parágrafo, <p>. Para selecionar a tabela na qual há um marcador de parágrafo, selecione a tag <table> à esquerda da tag <p>.

Para ver o código HTML associado ao texto ou objeto selecionado, seguir um dos procedimentos abaixo:

l Na barra de ferramentas Documento, clique no botão Mostrar a visualização do código. l Selecione Exibir > Código. l Na barra de ferramentas Documento, clique no botão Mostrar visualizações de código e do

projeto. l Selecione Exibir > Código e projeto. l Selecione Janela > Outros > Inspetor de c ódigo.

Para obter mais informações sobre a visualização do código, veja Exibição do seu c ódigo.

Ao selecionar um elemento em um dos editores de código (a visualização do código ou o inspetor de código), ele também é selecionado na janela do documento. Talvez seja preciso sincronizar as duas visualizações para que a seleção seja exibida; veja Exibição do seu código.

Sobre os elementos invisíveis

Alguns códigos HTML não possuem uma representação visível em um navegador. Por exemplo: as tags comment não são exibidas nos navegadores. Entretanto, enquanto se está criando uma página, pode ser útil selecionar tais elementos invisíveis, edit á-los, movê-los e excluí-los. O Dreamweaver permite especificar se ícones devem ser exibidos marcando a localização de elementos invisíveis na visualização do projeto da janela do documento.

 

 

Página 142 de 160Princípios básicos do Dreamweaver

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

Page 143: 3 Principios basicos do DW

Para exibir ou ocultar os ícones marcadores de elementos invisíveis, escolher Exibir > Aux ílios visuais > Elementos invisíveis. A exibi ção de elementos invisíveis permite selecioná-los e alterar as suas propriedades no inspetor de propriedades. A sua ocultação permite examinar a página mais detalhadamente, da maneira como ela será exibida no navegador. Observar que a exibição dos elementos invisíveis pode alterar levemente o layout da página, movendo outros elementos alguns pixels. Portanto, para obter uma precisão no layout, deve-se ocultar os elementos invisíveis.

Para indicar os marcadores de elementos que são exibidos ao escolher a op ção Exibir > Auxílios visuais > Elementos invisíveis, é possível definir opções nas preferências de Elementos invisíveis. Por exemplo: pode-se especificar que as âncoras com nome deverão ficar visíveis, mas não as quebras de linha. Veja Definição das preferências de elementos invisíveis.

É possível criar determinados elementos invis íveis (tais como comentários e âncoras com nome) utilizando botões da categoria Comuns da barra Inserir (veja Utilização da barra Inserir:). Em seguida, é possível modificar esses elementos utilizando o inspetor de propriedades.

Utilização de guias visuais no processo de projeto

O Dreamweaver fornece diversos tipos de guias visuais para auxiliá-lo a projetar os documentos e prever (aproximadamente) a aparência que eles terão nos navegadores. Siga todos os procedimentos abaixo:

l Ajuste instantaneamente a janela do documento ao tamanho desejado para veja como os elementos se ajustam à página. Veja Redimensionamento da janela do documento.

l Utilize as réguas para que sirvam como um guia visual ao posicionar e redimensionar camadas ou tabelas. Veja Exibição das réguas.

l Utilize uma imagem de rastreamento como o fundo da página para ajudar a duplicar um projeto criado em um aplicativo de edição de imagens ou ilustrações, como o Macromedia Fireworks. Veja Utilização de uma imagem de rastreamento.

l Utilize a grade para posicionar e redimensionar as camadas com precisão. As marcas da grade exibidas na página ajudam a alinhar as camadas e, quando o encaixe for ativado, as camadas se encaixarão automaticamente no ponto de grade mais próximo ao serem redimensionadas ou movidas (outros objetos, como imagens e parágrafos, não se encaixam na grade). O encaixe funcionará independentemente da visibilidade da grade. Veja Encaixe de camadas na grade.

Exibição das réguas

As réguas podem ser exibidas nas bordas superior e esquerda da página, marcadas em pixels, polegadas ou centímetros.

Para alterar as defini ções de régua, seguir um dos procedimentos abaixo:

   

 

 

Página 143 de 160Princípios básicos do Dreamweaver

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

Page 144: 3 Principios basicos do DW

l Para mostrar ou ocultar as réguas, escolher Exibir > Réguas > Mostrar. l Para alterar a origem, arrastar o ícone de origem da régua para qualquer lugar na página.

Este ícone é exibido no canto superior esquerdo da visualização do projeto da janela de documento enquanto as réguas estão sendo exibidas. Para redefinir a origem para a posição padrão, escolher Exibir > Réguas > Redefinir a origem.

l Para alterar a unidade de medida, escolher Pixels, Polegadas ou Centímetros no submenu Exibir > Réguas.

Utilização de uma imagem de rastreamento

Utilize uma imagem de rastreamento como guia para recriar o projeto de uma página da qual foi feito um protótipo em um aplicativo gráfico. As imagens de rastreamento são imagens JPEG, GIF ou PNG que são colocadas no fundo da janela do documento. É possível ocultar a imagem, definir a sua opacidade e alterar a sua posição.

A imagem de rastreamento fica vis ível apenas no Dreamweaver. Ela nunca fica visível quando a página é exibida em um navegador. Quando a imagem de rastreamento fica visível, a imagem e a cor de fundo reais da página não podem ser visualizadas na janela do documento; contudo, elas aparecem quando a página é exibida em um navegador.

Para colocar uma imagem de rastreamento na janela do documento:

1. Siga um dos procedimentos abaixo: ¡ Escolha Exibir > Imagem de rastreamento > Carregar. ¡ Escolha Modificar > Propriedades da página e, em seguida, clique no botão

Procurar, ao lado da caixa de texto Imagem de rastreamento. 2. Na caixa de diálogo que é exibida, selecione um arquivo de imagem e clique em

Selecionar. 3. A caixa de diálogo Propriedades da página é exibida. Especifique a transparência da

imagem, arrastando o botão deslizante Transparência da imagem, e clique em OK.

Para alternar para outra imagem de rastreamento ou alterar a transparência da imagem de rastreamento atual a qualquer momento, escolher Modificar > Propriedades da página.

Para exibir ou ocultar a imagem de rastreamento:

Escolha Exibir > Imagem de rastreamento > Mostrar.

Para alterar a posição de uma imagem de rastreamento:

Escolha Exibir > Imagem de rastreamento > Ajustar a posição. Depois, seguir um dos procedimentos abaixo:

l Para especificar com precisão a posição da imagem de rastreamento, digite valores de coordenadas nas caixas de texto X e Y.

l Para mover a imagem um pixel de cada vez, utilizar as teclas de seta. l Para mover a imagem cinco pixels de cada vez, pressionar a tecla Shift e uma tecla de

seta.

Para redefinir a posição da imagem de rastreamento:

   

Página 144 de 160Princípios básicos do Dreamweaver

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

Page 145: 3 Principios basicos do DW

Escolha Exibir > Imagem de rastreamento > Redefinir a posição. A imagem de rastreamento retorna ao canto superior esquerdo da janela do documento (coordenadas 0,0).

Para alinhar a imagem de rastreamento a um elemento selecionado:

1. Selecione um elemento na janela do documento. 2. Escolha Exibir > Imagem de rastreamento > Alinhar com a seleção.

O canto superior esquerdo da imagem de rastreamento é alinhado com o canto superior esquerdo do elemento selecionado.

Visualização e edição do conteúdo do HEAD

Os arquivos HTML são compostos por duas seções principais: a seção head e a seção body. A seção body é a parte principal do documento, a parte visível que contém texto, imagens, etc. A seção head é a parte invisível, com exceção do título do documento, que é exibido nas barras de título das janelas dos navegadores e do Dreamweaver. Cada página criada deve ter um título.

A seção head também contém outras informações importantes, como o tipo do documento, a codificação de idioma, as funções e variáveis JavaScript e VBScript, as palavras-chave e os indicadores de conteúdo para os mecanismos de pesquisa, bem como definições de estilo. Não énecessário fornecer todos esses elementos para cada página; é possível, por exemplo: fornecer somente as palavras-chave e os indicadores de conteúdo da home page. É possível exibir os elementos da seção head utilizando-se o menu Exibir, a visualização do código da janela do documento ou o inspetor de código.

Para exibir os elementos da seção head de um documento:

Escolha Exibir > Conteúdo do HEAD. Para cada elemento do conteúdo do head, é exibido um marcador na parte superior da janela do documento na visualização do projeto.

Nota: Se a janela do documento estiver definida para mostrar somente a visualização do código, a opção Exibir > Conteúdo do HEAD estará esmaecida.

Para inserir um elemento na seção head de um documento:

1. Siga um dos procedimentos abaixo: ¡ Na categoria Head da barra Inserir, clique em um dos botões de objeto. ¡ Escolha um item no submenu Inserir > Tags do cabeçalho.

2. Inserir as opções para o elemento na caixa de diálogo que é exibida ou no inspetor de propriedades.

Para editar um elemento na seção head de um documento:

1. Escolha Exibir > Conteúdo do HEAD. 2. Clique em um dos ícones na seção head para selecioná-lo. 3. Defina ou modificar as propriedades do elemento no inspetor de propriedades.

Para obter informações sobre as propriedades de determinados elementos do head, ver os

 

 

Página 145 de 160Princípios básicos do Dreamweaver

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

Page 146: 3 Principios basicos do DW

tópicos a seguir:

l Definição de propriedades meta l Definição de propriedades de título l Definição de propriedades de palavras-chave l Definição de propriedades de descrição l Definição de propriedades de atualização l Definição de propriedades de base l Definição de propriedades de link

Como automatizar as tarefas

Ao criar documentos, talvez se deseje executar a mesma tarefa várias vezes. Esta seção explica como utilizar o painel Hist órico para automatizar tarefas repetitivas.

Para repetir uma série de etapas uma ou duas vezes, deve-se executá-las diretamente no painel Histórico, que registra as etapas executadas pelo usuário enquanto ele trabalha em um documento (para informações básicas sobre o painel Histórico, veja Sobre o painel Histórico). Para automatizar uma tarefa realizada com freqüência, deve-se criar um novo comando que execute essa tarefa automaticamente.

Alguns movimentos do mouse, como o ato de clique ou arrastar para selecionar um elemento na janela do documento, não poderão ser executados ou salvos como parte de comandos salvos. Ao realizar um destes movimentos, uma linha preta é exibida no painel Histórico (embora a linha não estará óbvia enquanto uma outra ação não for efetuada). Para evitar movimentos que não podem ser executados novamente, utilizar as teclas de seta em vez do mouse para mover o ponto de inserção na janela do documento. Para efetuar ou estender uma seleção, manter pressionada a tecla Shift ao pressionar uma tecla de seta.

Nota: Se uma linha preta de indicação do movimento do mouse aparecer enquanto você estiver executando uma tarefa que deseja repetir mais tarde, é possível desfazer até antes desta etapa e tentar novamente, talvez utilizando as teclas de seta.

Algumas outras etapas específicas também não podem ser repetidas, como arrastar um elemento de página para outro local na página. Ao efetuar uma destas etapas, um ícone de comando de menu com um pequeno X vermelho é exibido no painel Histórico.

As etapas serão repetidas da mesma forma como foram executadas originalmente. Elas não podem ser modificadas enquanto estiverem sendo executadas. Por exemplo: se a cor de uma célula de tabela tiver sido anteriormente alterada para vermelho, a aplicação dessa etapa a uma outra célula de tabela também alterará sua cor para vermelho; é imposs ível especificar uma cor diferente quando a mesma etapa é aplicada a uma nova célula.

Repetição de etapas

 

 

 

 

Página 146 de 160Princípios básicos do Dreamweaver

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

Page 147: 3 Principios basicos do DW

Para repetir a última etapa executada, utilizar o comando Editar >Repetir ou o atalho de teclado Control+Y. O nome deste comando do menu Editar é alterado para refletir a última etapa executada; por exemplo: se a última etapa tiver sido a digitação de um texto, o nome do comando será Repetir a digitação (é imposs ível utilizar o comando Repetir imediatamente após uma operação Desfazer ou Refazer).

Para repetir as etapas que diferirem da mais recente ou para repetir diversas etapas ao mesmo tempo, utilizar o painel Histórico (para informações básicas sobre o painel Histórico, veja Sobre o painel Histórico).

Observar que as etapas executadas novamente serão aquelas que tiverem sido selecionadas (realçadas) e não necessariamente a etapa que está indicada pelo controle deslizante.

Para repetir uma etapa:

No painel Histórico, selecione a etapa e clique no botão Executar novamente. A etapa será executada novamente e uma cópia dela será exibida no painel Histórico.

Para repetir uma série de etapas adjacentes:

1. Selecione as etapas no painel Histórico, seguindo um dos procedimentos abaixo: ¡ Arrastar de uma etapa para outra (não arrastar o controle deslizante, arrastar

apenas do identificador de texto de uma etapa até o identificador de texto de uma outra etapa).

¡ Selecione a primeira etapa e, em seguida, manter a tecla Shift pressionada e clique na última etapa ou selecionar a última etapa e, depois, manter a tecla Shift pressionada e clique na primeira etapa.

Nota: Embora seja possível selecionar uma série de etapas que inclui uma linha preta de indicação do movimento do mouse, esse movimento do mouse é ignorado quando as etapas são executadas novamente.

2. Clique em Executar novamente.

As etapas serão executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, será exibida no painel Histórico.

Para repetir etapas não-adjacentes:

1. Selecione uma etapa e, em seguida, manter a tecla Control pressionada e clique nas outras etapas.

Também é possível clique na etapa selecionada mantendo a tecla Control pressionada (no Windows) para desmarcar uma etapa selecionada.

2. Clique em Executar novamente.

As etapas selecionadas serão executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, será exibida no painel Histórico.

 

 

Página 147 de 160Princípios básicos do Dreamweaver

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

Page 148: 3 Principios basicos do DW

Aplicação de etapas a um outro objeto

É possível aplicar um conjunto de etapas do painel Histórico a qualquer objeto na janela do documento.

Para aplicar as etapas do painel Histórico a um novo objeto:

1. Selecione o objeto. 2. Selecione as etapas relevantes no painel Histórico e, em seguida, clique em Executar

novamente.

Aplicação de etapas a vários objetos

Se forem selecionados diversos objetos em um documento aos quais se aplicarão as etapas do painel Histórico, os objetos serão tratados como uma única seleção e o Dreamweaver tentará aplicar as etapas a esta sele ção combinada. Por exemplo: é imposs ível selecionar cinco imagens e aplicar a mesma alteração de tamanho a cada uma delas ao mesmo tempo. Uma alteração de tamanho é uma operação que deve ser aplicada a cada imagem individualmente e não a um conjunto de imagens.

Para aplicar uma série de etapas a cada objeto existente em um conjunto de objetos, é necessário que a última etapa da série selecione o próximo objeto do conjunto. O procedimento a seguir demonstra este princípio em uma determinada situação: defini ção do espaçamento vertical e horizontal de uma série de imagens.

Para definir o espaçamento vertical e horizontal de uma série de imagens:

1. Inicie com um documento no qual cada linha consiste em uma pequena imagem (como um marcador gráfico ou um ícone) seguida de texto. O objetivo é manter as imagens afastadas do texto e de outras imagens acima e abaixo delas.

2. Abra o inspetor de propriedades (Janela > Propriedades) caso não esteja aberto. 3. Selecione a primeira imagem. 4. No inspetor de propriedades, digite números nas caixas de texto Espaço V e Espaço H

para definir o espaçamento entre as imagens. 5. Clique na imagem novamente para tornar a janela do documento ativa sem mover o

ponto de inserção. 6. Pressione a tecla de seta à esquerda para mover o ponto de inserção para a esquerda da

imagem. Em seguida, pressionar a tecla de seta para baixo a fim de mover o ponto de inserção uma linha abaixo, deixando-o à esquerda da segunda imagem da série. Pressione as teclas Shift+seta à direita para selecionar a segunda imagem.

Nota: Não selecionar a imagem clicando nela, pois desse modo não será possível executar todas as etapas novamente.

7. Selecione as etapas do painel Histórico que correspondem à alteração do espaçamento da imagem e à seleção da próxima imagem. Clique no botão Executar novamente para

 

 

Página 148 de 160Princípios básicos do Dreamweaver

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

Page 149: 3 Principios basicos do DW

reexecutar essas etapas.

O espaçamento da imagem atual é alterado e a próxima imagem é selecionada.

8. Continuar clicando em Executar novamente até que todas as imagens sejam espaçadas da forma correta.

Para aplicar etapas a um objeto de um outro documento, utilizar o botão Copiar as etapas; veja Como copiar e colar as etapas entre documentos.

Como copiar e colar as etapas entre documentos

Cada documento aberto tem seu próprio histórico de etapas. É possível copiar as etapas de um documento e colá-las em outro.

Nota: Copie as etapas (um botão do painel Histórico) é diferente de Copiar (no menu Editar). É imposs ível utilizar Editar > Copiar para copiar as etapas, embora elas sejam coladas com o comando Editar > Colar.

O fechamento de um documento limpará o seu histórico. Se tiver certeza de que desejará utilizar etapas de um documento após tê-lo fechado, copiar as etapas usando Copiar as etapas (ou salvá-las como um comando; veja Criação de novos comandos a partir de etapas do histórico) antes de fechar o documento.

As etapas que incluem um comando Copiar ou Colar devem ser copiadas com cuidado:

l Não utilizar Copiar as etapas se uma das etapas for um comando Copiar; talvez não seja possível colar estas etapas da maneira desejada.

l Se as etapas incluírem um comando Colar, será imposs ível colá-las, a não ser que também incluam um comando Copiar antes do comando Colar.

Se as etapas forem coladas em um editor de texto ou na visualização do código ou no inspetor

 

 

Página 149 de 160Princípios básicos do Dreamweaver

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

Page 150: 3 Principios basicos do DW

de código, elas serão exibidas como código JavaScript. Este procedimento poderá ser útil para aprender como gravar os seus próprios scripts. Para obter mais informações sobre como utilizar o JavaScript no Dreamweaver, veja Como gravar e editar o código.

Para reutilizar as etapas de um documento em outro documento:

1. Inicie com o documento que contém as etapas a serem reutilizadas. 2. Selecione as etapas no painel Histórico. 3. No painel Histórico, clique no botão Copiar as etapas para copiar essas etapas.

4. Abra o outro documento. 5. Coloque o ponto de inserção no local desejado ou selecionar um objeto ao qual deseja

aplicar as etapas. 6. Escolha Editar > Colar para colar as etapas.

As etapas serão executadas novamente à medida que forem coladas no painel Histórico do documento. O painel Histórico mostra as etapas como uma única etapa, denominada Colar as etapas.

Criação de novos comandos a partir de etapas do histórico

É possível salvar um conjunto de etapas do histórico como um comando com nome, que se tornará disponível no menu Comandos.

Crie e salvar um novo comando se houver a probabilidade de utilizar novamente um determinado conjunto de etapas no futuro, principalmente se desejar utilizar estas etapas sempre que iniciar o Dreamweaver; os comandos salvos são mantidos em caráter permanente (a menos que sejam excluídos), enquanto os comandos gravados (veja Gravação de comandos) são descartados ao sair do Dreamweaver; as seqüências copiadas de etapas são descartadas quando outro elemento é copiado.

É possível editar ou excluir os nomes de comandos colocados no menu Comandos utilizando Comandos > Editar a lista de comandos. É mais complicado editar e excluir os comandos incluídos no menu Comandos (ou seja, os comandos que não foram adicionados voluntariamente).

Para criar um comando:

1. Selecione a etapa ou conjunto de etapas no painel Histórico. 2. Clique no botão Salvar como comando ou escolher Salvar como comando no menu

contextual do painel Histórico. 3. Digite um nome para o comando e clique em OK.

O comando é exibido no menu Comandos.

Nota: O comando é salvo como um arquivo JavaScript (ou, às vezes, como um arquivo HTML) na pasta Dreamweaver/Configuration/Commands.

Para utilizar um comando salvo:

   

Página 150 de 160Princípios básicos do Dreamweaver

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

Page 151: 3 Principios basicos do DW

1. Selecione um objeto ao qual se deseja aplicar o comando ou colocar o ponto de inserção no local desejado.

2. Escolha o comando no menu Comandos.

Para editar os nomes de comandos no menu Comandos:

1. Escolha Comandos > Editar a lista de comandos. 2. Selecione o comando a ser renomeado e digitar um novo nome para ele. 3. Clique em Fechar.

Para excluir um nome do menu Comandos:

1. Escolha Comandos > Editar a lista de comandos. 2. Selecione um comando. 3. Clique em Excluir e, depois, em Fechar.

Gravação de comandos

O Dreamweaver permite gravar um comando temporário a ser utilizado por um curto período de tempo. São estas as principais diferenças entre essa abordagem e a reexecução das etapas do painel Histórico (veja Repetição de etapas):

l As etapas s ão gravadas à medida que são executadas, dispensando a necessidade de selecioná-las no painel Histórico antes de reexecutá-las.

l Durante a gravação, o Dreamweaver impede que sejam efetuados movimentos do mouse que não possam ser gravados (como clicar para selecionar um elemento de uma janela ou arrastá-lo para um novo local).

l Se você alternar para um outro documento durante a gravação, o Dreamweaver não gravará as alterações feitas no outro documento. Observar o ponteiro do mouse para saber se a gravação está sendo processada ou não.

O Dreamweaver mantém apenas um comando gravado por vez; assim que for iniciada a gravação de um novo comando, o antigo se perderá. Para salvar um novo comando sem perder um comando já gravado, salvar o comando no painel Histórico; veja Criação de novos comandos a partir de etapas do histórico.

Uma vez gravado o comando, é possível salvá-lo utilizando o painel Histórico.

Para gravar temporariamente uma série de etapas utilizadas com freqüência:

1. Escolha Comandos > Iniciar a gravação ou pressionar Control+Shift+X.

O ponteiro se altera, indicando que um comando está sendo gravado.

2. Ao terminar a gravação, escolher Comandos > Parar a gravação ou pressionar Control+Shift+X.

Para reexecutar um comando gravado:

Escolha Comandos > Executar o comando gravado ou pressionar Control+Shift+R.

 

 

Página 151 de 160Princípios básicos do Dreamweaver

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

Page 152: 3 Principios basicos do DW

Para salvar um comando gravado:

1. Escolha Comandos > Executar o comando gravado para executar o comando novamente.

Uma etapa denominada Executar o comando é exibida na lista de etapas do painel Histórico.

2. Selecione a etapa Executar o comando e clique no botão Salvar como comando. 3. Digite um nome para o comando e clique em OK.

Nota: O comando é exibido no menu Comandos.

Referência

Esta seção fornece informações sobre as caixas de diálogo apresentadas neste capítulo.

Definição de preferências do novo documento

É possível definir o tipo de documento que o Dreamweaver configura como o documento padrão de um site. Por exemplo: se a maioria das páginas de um site são de um determinado tipo de arquivo (como documentos ColdFusion, HTML ou ASP), é possível definir as preferências de documento que automaticamente criam novos documentos desse tipo de arquivo específico.

Para exibir ou definir as preferências do novo documento, escolher Editar > Preferências e, depois, clique na categoria Novo documento.

Para definir as preferências do novo documento:

1. Selecione Editar > Preferências. 2. Na caixa de diálogo Preferências, em Categoria, selecione Novo documento. 3. Defina as opções a serem aplicadas:

¡ Para definir um tipo de documento padrão, no menu pop-up Tipo de documento padrão, selecione um tipo de documento no qual deseja basear as novas páginas criadas no site.

¡ Para definir a extensão de arquivo padrão para os documentos do Dreamweaver, é necessário editar o arquivo XML do tipo de documento. Clique no link associado, nas Preferências do novo documento.

¡ Para definir a codificação para os documentos, utilizar o menu pop -up Codificação padrão. Por exemplo: escolher Western (Latin1) para processar as páginas com base em caracteres do idioma inglês.

Codificação padrão especifica a codificação a ser utilizada quando for criada uma nova página e quando for aberto um documento que não especifique qualquer codificação. A codificação padrão é armazenada com o documento em uma tag meta

 

 

   

Página 152 de 160Princípios básicos do Dreamweaver

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

Page 153: 3 Principios basicos do DW

inserida no cabeçalho do documento; ela informa ao navegador e ao Dreamweaver como o documento dever á ser decodificado e quais fontes deverão ser utilizadas para exibir o texto decodificado. Por exemplo:

Se for especificado Ocidental (Latin1), a seguinte tag meta será inserida: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. O Dreamweaver exibirá o documento utilizando as fontes especificadas em Preferências de fontes para a codificação Ocidental (Latin1); um navegador exibirá o documento utilizando as fontes especificadas pelo usuário para a codificação Ocidental (Latin1).

Se for especificado japonês (Shift JIS), a seguinte tag meta será inserida: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">. O Dreamweaver exibirá o documento utilizando as fontes especificadas para as codificações japonesas; um navegador exibirá o documento utilizando as fontes especificadas pelo usuário para as codificações japonesas.

¡ Pressione Control+N para mostrar a caixa de diálogo Novo documento a fim de automaticamente criar um novo documento do tipo de documento padrão ao utilizar o comando de tecla.

¡ Marcar a caixa de sele ção Tornar o documento compatível com XHTML para definir esta opção. Esta opção aplica-se a documentos HTML e à maioria dos tipos de documentos dinâmicos.

Para alterar a codificação do documento atual:

Escolha Modificar> Propriedades da página e, em seguida, selecione uma codificação no menu pop-up Codificação do documento.

Tópicos relacionados:

Definição das preferências de fontes

Como limpar o HTML do Microsoft Word

No Dreamweaver, é possível abrir ou importar documentos salvos pelo Microsoft Word como arquivos HTML e, depois, utilizar o comando Limpar o HTML do Word para remover o código HTML irrelevante gerado pelo Word. O código que o Dreamweaver remove é utilizado pelo Word basicamente para formatar e exibir os documentos no Word, não sendo necessário à exibição do arquivo HTML. É recomendável guardar uma cópia de segurança do arquivo original do Word (.doc), porque talvez não seja possível reabrir o documento HTML no Word após a aplicação do recurso Limpar o HTML do Word. O comando Limpar o HTML do Word está disponível para os documentos salvos como arquivos HTML no Word 97 ou em versões mais avançadas.

Para limpar o HTML ou XHTML que não foi gerado pelo Microsoft Word, veja Limpeza do código.

Para limpar o HTML do Word:

1. No Microsoft Word, salvar o documento como um arquivo HTML. 2. Abra o documento HTML no Dreamweaver utilizando um dos métodos a seguir:

   

Página 153 de 160Princípios básicos do Dreamweaver

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

Page 154: 3 Principios basicos do DW

¡ Escolha Arquivo > Importar > Importar o HTML do Word e selecionar um arquivo a ser aberto.

O Dreamweaver abre o arquivo e, em seguida, a caixa de diálogo Limpar o HTML do Word, automaticamente.

¡ Escolha Arquivo > Abrir e selecionar um arquivo a ser aberto.

Um arquivo de registro de corre ções de HTML será gerado automaticamente se a opção Advertir ao ajustar ou remover as tags estiver selecionada nas preferências de regravação de HTML. Isso não faz parte do recurso Limpar o HTML do Word. Clique em Continuar para sair da caixa de diálogo. No Dreamweaver, escolher Comandos >Limpar o HTML do Word.

3. Qualquer um dos métodos produzirá um pequeno atraso enquanto o Dreamweaver tenta detectar a versão do Word utilizada para salvar o arquivo. Se o Dreamweaver não conseguir detectá-la, selecione a versão correta usando o menu pop-up.

4. Escolha quais opções devem ser utilizadas pelo recurso Limpar o HTML do Word. A guia Básica exibe as opções a seguir:

¡ A opção Remover todo o markup específico ao Word remove dos estilos todo o HTML específico ao Word, inclusive o XML das tags html, os dados de meta personalizados do Word e as tags de links no cabeçalho do documento, o markup XML do Word, as tags condicionais e seu conteúdo, além dos parágrafos vazios e margens. Cada uma dessas opções pode ser selecionada individualmente usando-se a guia Detalhes.

¡ A opção Limpar CSS remove do cabeçalho todas as CSS específicas do Word, incluindo os estilos CSS de entrada linear quando possível (nos casos em que o estilo-pai tem as mesmas propriedades do estilo), os atributos de estilo iniciados por “mso”, as declarações de estilo diferentes de CSS, os atributos de estilo CSS de tabelas e todas as definições de estilo não-utilizadas. Esta opção pode ser ainda mais personalizada usando a guia Detalhes.

¡ A opção Limpar as tags <font> remove as tags HTML, convertendo o corpo do texto padrão no tamanho 2 HTML.

¡ A opção Corrigir as tags aninhadas incorretamente remove as tags do markup font inseridas pelo Word fora das tags de parágrafo e cabeçalho (nível de bloco).

¡ A opção Definir a cor do fundo permite digitar um valor hexadecimal para definir a cor do fundo do documento. Se não for definida uma cor de fundo, o documento HTML do Word terá um fundo cinza. O valor hexadecimal padrão definido pelo Dreamweaver é branco.

¡ A opção Aplicar a formatação de origem aplica ao documento as opções de formatação de origem especificadas nas preferências de formato HTML e no arquivo SourceFormat.txt..

¡ A opção Mostrar o registro quando concluir exibe uma caixa de alerta com detalhes sobre as alterações feitas no documento logo que a limpeza é concluída.

5. Clique em OK.

Dependendo do tamanho do documento e do número de opções selecionadas, a limpeza poderá demorar alguns segundos. As preferências informadas serão automaticamente salvas como as definições padrão de Limpar o HTML do Word.

Seleção de opções de Propriedades da página

   

Página 154 de 160Princípios básicos do Dreamweaver

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

Page 155: 3 Principios basicos do DW

Utilize a caixa de diálogo Propriedades da página para especificar uma variedade de opções relativas à página.

Para abrir a caixa de diálogo Propriedades da página, escolher Modificar > Propriedades da página.

A opção Título especifica o título da página que é exibido na barra de título da janela do documento e na maioria das janelas dos navegadores. Veja Alteração do título do documento.

As opções Imagem de fundo e Fundo especificam uma imagem de fundo e a cor de fundo da página. Veja Definição de uma imagem de fundo ou de uma cor de fundo para a página.

A opção Texto e links define as cores padrão do texto, dos links, dos links visitados e dos links ativos. Veja Como trabalhar com as cores. Também é possível controlar essas cores utilizando as folhas de estilos CSS; veja Aplicação de um estilo (classe) CSS personalizado.

As opções Margem esquerda e Margem superior especificam os tamanhos das margens da página na tag body, somente para o Microsoft Internet Explorer. O Netscape Navigator ignora esses valores, utilizando, ao invés disso, Largura da margem e Altura da margem. Para obter os melhores resultados em diversos navegadores, fornecer os valores de margem para ambos os navegadores, e não apenas para um, e preencher todos os quatro valores de margem, e não apenas dois. Para se assegurar de que nenhuma margem será exibida em qualquer um dos navegadores, definir todos os quatro valores como 0. O Dreamweaver não exibe as margens de página na janela do documento. Para ver as margens, utilizar a opção Visualizar no navegador.

As opções Largura da margem e Altura da margem especificam os tamanhos das margens da página na tag body, somente para o Netscape Navigator. O Internet Explorer ignora esses valores, utilizando Margem esquerda e Margem superior. Para obter os melhores resultados em diversos navegadores, fornecer os valores de margem para ambos os navegadores, e não apenas para um, e preencher todos os quatro valores de margem, e não apenas dois. Para se assegurar de que nenhuma margem aparecerá em qualquer um dos navegadores, definir todos os quatro valores como 0. O Dreamweaver n ão exibe as margens de página na janela do documento. Para ver as margens, utilizar a opção Visualizar no navegador.

A opção Codificação do documento especifica a codificação de caracteres utilizada no documento. Para o inglês e idiomas da Europa ocidental, escolher Ocidental. As outras opções são Europeu central, Cirílico, Grego, Islandês, Japonês, Chinês tradicional, Chinês simplificado e Coreano. Se a opção correspondente à codificação desejada não estiver disponível, escolher Outro para criar um documento com a codificação do sistema operacional utilizado. Todos os idiomas asiáticos utilizam codificação de bytes duplos.

Para alterar as fontes que o Dreamweaver utiliza para exibir cada codificação, escolher Editar > Preferências e selecionar Novo documento. Observar que as fontes selecionadas nas preferências de Novo documento não afetam a maneira como os visitantes verão as páginas; eles especificam as suas próprias fontes (para uma determinada codificação) nos navegadores da Web que utilizam. Para obter mais informações, veja Definição das preferências de fontes.

A opção Imagem de rastreamento especifica uma imagem a ser utilizada como guia para a cópia de um projeto. Veja Utilização de uma imagem de rastreamento. Esta imagem serve apenas como referência e não aparece quando o documento é exibido em um navegador.

A opção Imagem determina a opacidade da imagem de rastreamento, desde completamente transparente até completamente opaca.

A opção Pasta do documento exibe a pasta na qual o documento atual foi salvo, se tiver sido salvo.

A opção Pasta do site exibe o caminho da pasta raiz local do site na qual foi salvo o

Página 155 de 160Princípios básicos do Dreamweaver

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

Page 156: 3 Principios basicos do DW

documento atual, se tiver sido salvo. Veja Como configurar um site do Dreamweaver.

Definição das preferências de elementos invis íveis

Utilize as preferências de elementos invisíveis para especificar os tipos de elementos que estarão visíveis ao selecionar a opção Exibir > Auxílios visuais > Elementos invis íveis (para obter mais informações sobre os elementos invisíveis, veja Sobre os elementos invisíveis).

Para alterar as preferências de elementos invis íveis:

1. Escolha Editar > Preferências e clique em Elementos invisíveis. 2. Selecione os elementos que deverão se tornar vis íveis. A marca de seleção ao lado do

nome do elemento, na caixa de diálogo, significa que ele estará visível quando a opção Exibir > Auxílios visuais> Elementos invisíveis for selecionada.

Estes são os elementos invisíveis cujos marcadores podem ser mostrados ou ocultados:

O elemento Âncoras com nome exibe um ícone que marca a localização de cada âncora com nome (a name ="") no documento.

O elemento Scripts exibe um ícone que marca a localização do código JavaScript ou VBScript no corpo do documento. Selecione o ícone para editar o script no inspetor de propriedades ou para vincular a um arquivo de script externo.

O elemento Comentários exibe um ícone que marca a localização dos comentários de HTML. Selecione o ícone para ver o comentário no inspetor de propriedades.

O elemento Quebras de linha exibe um ícone que marca a localização de cada quebra de linha (BR). Por padrão, esta opção fica desmarcada.

O elemento Mapas de imagens do cliente exibe um ícone que marca a localização de cada mapa de imagens do cliente no documento.

O elemento Estilos incorporados exibe um ícone que mostra a localização dos estilos CSS incorporados no corpo do documento. Se os estilos CSS estiverem posicionados na seção head de um documento, eles não serão exibidos na janela do documento.

O elemento Campos ocultos de formuláriosexibe um ícone que marca a localização dos campos de formulário nos quais o atributo type está definido como "hidden".

O elemento Delimitador de formuláriosexibe uma borda ao redor de um formulário para que se veja onde devem ser inseridos os elementos do formulário. A borda mostra a extensão da tag form para que quaisquer elementos de formulário dentro de tal borda sejam adequadamente delimitados por tags form.

O elemento Pontos de ancoragem de camadas exibe um ícone que marca a localização do código que define uma camada. A camada pode estar em qualquer local da página (as camadas não são elementos invisíveis; apenas o código que as define é invisível). Selecione o ícone para selecionar a camada. Com isso, é possível ver o conteúdo da camada, mesmo que ela esteja marcada como oculta.

 

 

Página 156 de 160Princípios básicos do Dreamweaver

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

Page 157: 3 Principios basicos do DW

O elemento Pontos de ancoragem de elementos alinhados exibe um ícone que mostra a localização do código HTML dos elementos que aceitam o atributo align. Eles incluem imagens, tabelas, objetos ActiveX, plug-ins e applets. Em alguns casos, é possível que o código do elemento esteja separado do objeto vis ível.

Os elementos Tags visuais de markup de servidores e Tags não visuais de markup de servidores exibem a localização das tags de markup de servidor (como as tags Active Server Pages e ColdFusion) cujo conteúdo não pode ser exibido na janela do documento.

Definição de propriedades meta

Uma tag meta é um elemento do head que registra informações sobre a página atual, como a codificação de caracteres, autor, direitos autorais ou palavras-chave. Estas tags também podem ser utilizadas para informar o servidor sobre a data de vencimento, o intervalo de atualização e a taxa PICS da página. A PICS (Plataforma para a sele ção de conteúdo da Internet, Platform for Internet Content Selection), proporciona um método de atribui ção de classificação (como nos filmes para cinema) às páginas da Web.

O elemento Atributo especifica se a tag meta contém informações descritivas sobre a página (name) ou informações do cabeçalho HTTP (http-equiv).

O elemento Valor especifica o tipo de informação oferecida nesta tag. Alguns valores, como a descrição, palavras-chave e o intervalo de atualização, já estão bem definidos (e contam com os seus respectivos inspetores de propriedades no Dreamweaver), mas pode-se especificar praticamente qualquer valor (por exemplo: creationdate, documentID ou level).

O elemento Conteúdo é a informação propriamente dita. Por exemplo: se tiver especificado level como o Valor, o Conteúdo poderá ser beginner, intermediate ou advanced.

Definição de propriedades de título

Existe apenas uma propriedade do título: o título da página. O título é exibido na barra de título da janela do documento no Dreamweaver e na barra de título do navegador quando a página é exibida na maioria dos navegadores. O título também é exibido na barra de ferramentas. Digite o título da página na caixa de texto Título.

Definição de propriedades de palavras-chave

 

 

   

   

Página 157 de 160Princípios básicos do Dreamweaver

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

Page 158: 3 Principios basicos do DW

Vários robôs de mecanismos de pesquisa (programas que fazem pesquisas na Web automaticamente, coletando informações para serem indexadas por mecanismos de pesquisa) lêem o conteúdo da tag meta das palavras-chave e utilizam as informações para indexar as páginas do usuário nos respectivos bancos de dados. Como alguns mecanismos de pesquisa limitam o número de palavras-chave ou caracteres que indexam ou ignoram todas as palavras-chave se elas ultrapassarem o limite, é recomendável utilizar somente algumas palavras-chave escolhidas de modo criterioso.

Digite as palavras-chave, separadas por vírgulas, na caixa de texto denominada Palavras-chave.

Definição de propriedades de descrição

Vários robôs de mecanismos de pesquisa (programas que fazem pesquisas na Web automaticamente, coletando informações para serem indexadas por mecanismos de pesquisa) lêem o conteúdo da tag meta da descrição. Alguns destes robôs utilizam as informações para indexar as páginas nos seus bancos de dados, enquanto que outros também exibem as informações na página de resultados da pesquisa, em vez de mostrarem as primeiras linhas do documento. Alguns mecanismos de pesquisa impõem um limite quanto ao número de caracteres que indexam, portanto é recomendável limitar a descrição ao menor número de palavras possível (por exemplo: Seleção de livros de segunda mão em Belo Horizonte ou Projetos exclusivos de páginas da Web a preços razoáveis para clientes no mundo inteiro).

Digite o texto descritivo na caixa de texto Descrição.

Definição de propriedades de atualização

Utilize o elemento Atualizar para especificar que o navegador deve atualizar automaticamente a página – recarregando a página atual ou indo para outra página – após um certo período de tempo. Esse elemento é utilizado com freqüência para redirecionar os usuários de uma URL para outra, normalmente após exibir uma mensagem de texto informando que a URL mudou.

O elemento Atraso é o tempo, em segundos, até que seja efetuada a atualização da página pelo navegador. Para fazer com que o navegador atualize a página imediatamente após a carga, digite 0 nessa caixa de texto.

O elemento Ação especifica se o navegador deve ir para uma URL diferente ou atualizar a página atual depois do atraso especificado. Para abrir outra URL (em vez de atualizar a página atual), clique no botão Procurar e, em seguida, selecione a página a ser carregada.

   

   

 

Página 158 de 160Princípios básicos do Dreamweaver

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

Page 159: 3 Principios basicos do DW

Definição de propriedades de base

Utilize o elemento Base para definir a URL básica à qual estão relacionados todos os caminhos associados a documentos presentes na página.

O elemento Href é a URL básica. Clique no botão Procurar para procurar e selecionar um arquivo ou digitar um caminho na caixa de texto.

O elemento Destino especifica a moldura ou janela na qual todos os documentos vinculados deverão ser abertos. Escolha uma das molduras no conjunto atual de molduras ou, se desejar, um dos nomes reservados a seguir:

l _blank carrega o documento vinculado em uma janela nova e sem nome do navegador. l _parent carrega o documento vinculado no conjunto-pai de molduras ou na janela da

moldura que contém o link. Se a moldura onde está o link não estiver aninhada, o documento vinculado será carregado na janela inteira do navegador (isto equivale a _top).

l _self carrega o documento vinculado na mesma moldura ou janela que o link. Esse destino é o padrão, portanto geralmente não é necessário especificá-lo.

l _top carrega o documento vinculado na janela inteira do navegador, removendo, por conseguinte, todas as molduras.

Definição de propriedades de link

Utilize o elemento Link para definir uma relação entre o documento atual e um outro arquivo. Observar que o elemento Link na se ção head não é a mesma coisa que um link HTML entre documentos na seção body.

O elemento Href é a URL do arquivo para o qual está se definindo a rela ção. Clique no botão Procurar para procurar e selecionar um arquivo ou digitar um caminho na caixa de texto. Observar que este atributo não indica um arquivo que está sendo vinculado da maneira usual em termos de HTML; as relações especificadas em um elemento Link são mais complexas.

O elemento ID especifica um identificador exclusivo para o link.

O elemento Título descreve a relação. Este atributo tem especial relevância para as folhas de estilos vinculadas. Para obter mais informações, ver a seção Folhas de estilos externas da especificação HTML 4.0, no site do World Wide Web Consortium .

O elemento Rel especifica a relação entre o documento atual e o documento na caixa de texto Href. Os valores possíveis incluem Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help e Bookmark. Para especificar mais de uma relação, separar os valores por um espaço.

O elemento Rev especifica uma relação inversa (o oposto de Rel) entre o documento atual e o documento na caixa de texto Href. Os valores possíveis são os mesmos que os de Rel.

 

 

 

Página 159 de 160Princípios básicos do Dreamweaver

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

Page 160: 3 Principios basicos do DW

 

Página 160 de 160Princípios básicos do Dreamweaver

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