You are on page 1of 160

Princípios básicos do Dreamweaver Página 1 de 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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 2 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 3 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 4 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 5 de 160

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 .

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 6 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 7 de 160

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,

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 8 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 9 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 10 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 11 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 12 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 13 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 14 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 15 de 160

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,

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 16 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 17 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 18 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 19 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 20 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 21 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 22 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 23 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 24 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 25 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 26 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 27 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 28 de 160

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 .

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 29 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 30 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 31 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 32 de 160

(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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 33 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 34 de 160

Â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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 35 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 36 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 37 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 38 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 39 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 40 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 41 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 42 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 43 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 44 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 45 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 46 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 47 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 48 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 49 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 50 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 51 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 52 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 53 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 54 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 55 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 56 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 57 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 58 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 59 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 60 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 61 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 62 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 63 de 160

(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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 64 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 65 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 66 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 67 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 68 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 69 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 70 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 71 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 72 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 73 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 74 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 75 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 76 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 77 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 78 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 79 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 80 de 160

¡ 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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 81 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 82 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 83 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 84 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 85 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 86 de 160

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).

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 87 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 88 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 89 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 90 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 91 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 92 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 93 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 94 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 95 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 96 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 97 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 98 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 99 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 100 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 101 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 102 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 103 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 104 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 105 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 106 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 107 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 108 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 109 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 110 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 111 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 112 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 113 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 114 de 160

¡ 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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 115 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 116 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 117 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 118 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 119 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 120 de 160

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).

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 121 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 122 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 123 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 124 de 160

¡ 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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 125 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 126 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 127 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 128 de 160

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).

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 129 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 130 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 131 de 160

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, é

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 132 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 133 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 134 de 160

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,

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 135 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 136 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 137 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 138 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 139 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 140 de 160

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,

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 141 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 142 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 143 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 144 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 145 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 146 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 147 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 148 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 149 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 150 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 151 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 152 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 153 de 160

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:

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 154 de 160

¡ 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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 155 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 156 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 157 de 160

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

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 158 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 159 de 160

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.

file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações... 11/10/2002
Princípios básicos do Dreamweaver Página 160 de 160

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

You might also like