Cursos Tutorial Completo Dreamweaver 8

MACROMEDIA
DREAMWEAER 8
Preencha a ficha de cadastro no final deste livro
e receba gratuitamente informações
sobre os lançamentos e as promoções da
Editora Campus/Elsevier.
Consulte também nosso catálogo

completo e últimos lançamentos em
www.campus.com.br
MACROMEDIA
DREAMWEAER 8
Do original:
Macromedia® Dreamweaver® 8
Tradução autorizada do idioma inglês da edição publicada por Adobe Press
Copyright © 2006 by Adobe Systems, Inc.
© 2006, Elsevier Editora Ltda.
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.

Nenhuma parte deste livro, sem autorização prévia por escrito da editora,
poderá ser reproduzida ou transmitida sejam quais forem os meios empregados:
eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros.
Copidesque: Adriana Kramer

Editoração Eletrônica: Estúdio Castellani
Revisão Gráfica: Roberto Mauro Facce
Projeto Gráfico
Elsevier Editora Ltda.
A Qualidade da Informação.
Rua Sete de Setembro, 111 – 16º andar
20050-006 Rio de Janeiro RJ Brasil
Telefone: (21) 3970-9300 FAX: (21) 2507-1991
E-mail: info@elsevier.com.br
Escritório São Paulo:
Rua Quintana, 753/8º andar
04569-011 Brooklin São Paulo SP
Tel.: (11) 5105-8555
ISBN 13: 978-85-352-2057-5

ISBN 10: 85-352-2057-7
Edição original: ISBN 0-321-33626-7
Nota: Muito zelo e técnica foram empregados na edição desta obra. No entanto, podem ocorrer erros de digitação,
impressão ou dúvida conceitual. Em qualquer das hipóteses, solicitamos a comunicação à nossa Central de Atendimento,
para que possamos esclarecer ou encaminhar a questão.
Nem a editora nem o autor assumem qualquer responsabilidade por eventuais danos ou perdas a pessoas ou bens,
originados do uso desta publicação.
Central de atendimento
Tel.: 0800-265340
Rua Sete de Setembro, 111, 16º andar – Centro – Rio de Janeiro
e-mail: info@elsevier.com.br
site: www.campus.com.br
CIP-Brasil. Catalogação-na-fonte.
Sindicato Nacional dos Editores de Livros, RJ
P149d Page, Khristine Annwn

Dreamweaver 8 : guia autorizado Macromedia /
Khristine Annwn Page ; tradução Edson Furmankiewicz. –
Rio de Janeiro : Elsevier, 2006
Tradução de: Macromedia dreamweaver 8 : training from

the source
Apêndices
ISBN 85-352-2057-7
1. Dreamweaver (Programa de computador). 2. Sites da Web
– Projetos. I. Título.
06-1721. CDD 005.369

CDU 004.42
À toda minha família, em memória de meu avós
e com um amor profundo ao Espírito e o Divino,
em toda sua miríade de formas.
A autora
Khristine Annwn Page escreveu Macromedia Dreamweaver MX 2004 Guia Autorizado

Macromedia e Macromedia Dreamweaver MX Training from the Source, e também foi
co-autora dos livros Macromedia Dreamweaver MX 2004 Certified Developer Study Guide
e Macromedia Dreamweaver 4 Training from the Source, todos publicados por Peachpit
Press e Macromedia Press. Khristine deu aulas sobre o Dreamweaver e Web design no
programa Multimedia Studies da San Francisco State University e deu treinamento em
Dreamweaver no programa Reuters Digital Vision Fellowship da Stanford University e
para diversos clientes independentes. Khristine é atualmente diretora do Prakasa Ma, um
centro de arte, dança e ioga em San Jose, na Califórnia, [www.prakasama.com] e editora
da Crescent Magazine. Ela também trabalha como desenvolvedora Web freelance para o
NorthWind Studios, um grupo de artistas e escritores [www.northwindstudios.com]. No
passado, Khristine também trabalhou como especialista em multimídia no San Francisco
Exploratorium e como Web designer sênior na Ideum, uma empresa dedicada a produzir
Web sites para museus, organizações sem fins lucrativos e empresas socialmente respon-
sáveis. Khristine é bacharelada em belas-artes e conquistou o prêmio Senior Award for
Excellence da Rhode Island School of Design [www.risd.edu]. Ela recebeu prêmios da
Adobe e seu trabalho artístico foi exibido nas galerias de Providence, RI, Nova York e Palo
Alto, CA.
Agradecimentos
Muito obrigada a Susan Hobbs, Angela Kozlowski, Demian Holmberg, Sue Hove e a todas
as demais pessoas maravilhosas na Peachpit e na Macromedia. Muito obrigado especial-
mente a Jayne Hillman e Yoga Sangha [www.yogasangha.com], bem como aos demais ins-
trutores e ao pessoal no estúdio, por permitir que seu site fosse utilizado como o projeto
para esse livro. Quero expressar agradecimentos especiais a Mary Page, Rick Page, Jill Page,
Rich Page, Yayoi Page, Adrienne Renka Page, Jessie Gauld, Russell Reza-Khaliq Gonzaga,
Carol Coughlin, Paul e Britta da Avalon Art e a Yoga, Katarina, Bhaktisukhini e todo o pes-
soal da DoK e meus demais amigos e familiares por todo o apoio, amor e estímulo.
Sumário
Introdução xv
LIÇÃO 1 Princípios básicos do Dreamweaver 8 1

Explorando o espaço de trabalho
Preparando-se para desenvolver seu site
Definindo um site local
Criando e salvando uma nova página
Explorando as ferramentas
Trabalhando com painéis e documentos
Dando um título à página
Especificando navegadores de visualização
Explorando os princípios básicos por conta própria
LIÇÃO 2 Adicionando conteúdo a uma página 39

Importando texto
Identificando a estrutura do conteúdo
Criando quebras de linha
Inserindo um espaço não-separável
Alinhando texto
Identificando aspas
Criando listas
Criando listas de definição
Aninhando listas
Formatação de caracteres inline
Adicionando caracteres especiais
Criando documentos em vários idiomas
Adicionando linhas horizontais
Adicionando uma data automaticamente
Formatando conteúdo por conta própria
LIÇÃO 3 Criando links 71

Especificando as cores e os formatos dos links
Criando links de hipertexto
Entendendo links e estrutura de arquivos
Adicionando novas pastas e arquivos a um site
Criando um mapa de site
Trabalhando com links na visualização Site Map
Visualizando um subconjunto do site inteiro
Salvando o mapa do site
Selecionando o alvo dos links
Inserindo âncoras identificadas e criando links para elas
Inserindo links de e-mail
Trabalhando com links por conta própria
LIÇÃO 4 Desenvolvendo folhas de estilo 107

Especificando uma cor de fundo
Alterando a fonte
Alterando o tamanho da fonte
Especificando a cor da fonte
Entendendo estilos
Trabalhando com estilos internos
Convertendo estilos internos em estilos externos
Vinculando a uma folha de estilos externa existente
Criando estilos externos
Criando estilos para combinações de tags
Editando um estilo existente
Trabalhando com precedência de estilos
Entendendo a ordem
Criando um layout CSS básico
Trabalhando com CSS por conta própria
LIÇÃO 5 Trabalhando com imagens gráficas 169

Utilizando uma imagem gráfica de fundo
Posicionando imagens gráficas na página
Redimensionando e atualizando imagens gráficas
Posicionando imagens gráficas
Adicionando uma borda em torno de uma imagem
Atribuindo nomes a imagens
Inserindo uma imagem a partir do painel Assets
Gerenciando imagens com a lista Favorites
Ajustando o espaço em torno de uma imagem
Inserindo um marcador de lugar de imagem
Substituindo um marcador de lugar de imagem
Configurando as preferências de edição de imagens
Edição de imagem básica
Criando links para imagens gráficas
Criando mapas de imagens
Utilizando imagens gráficas por conta própria
LIÇÃO 6 Criando tabelas 207

Criando uma tabela
Importando dados de planilhas
Copiando e colando células de tabela
Selecionando uma tabela
Selecionando e formatando células de tabela
Classificando uma tabela
Modificando uma tabela
Exportando uma tabela
Utilizando imagens em tabelas
Aninhando tabelas
Projetando para telas de computador
Utilizando tamanho de janela para verificar o layout
Criando uma tabela na visualização Layout
Modificando o layout da tabela
Aplicando formatação de célula
Especificando a largura do layout
Utilizando uma imagem guia
LIÇÃO 7 Utilizando multimídia 255

Criando texto Flash
Modificando o texto Flash
Adicionando botões Flash
Modificando botões Flash
Adicionado animações Flash
Utilizando o Image Viewer
Incorporando filmes QuickTime
LIÇÃO 8 Adicionando interatividade com o usuário 277

Inserindo uma imagem de rollover
Adicionando comportamentos
Trocando várias imagens por um único evento
Adicionando comportamentos a mapas de imagens
Editando ações e eventos
Criando uma mensagem de barra de status
Verificando o navegador
Abrindo uma nova janela de navegador
Criando um menu pop-up
LIÇÃO 9 Criando camadas 307
Criando camadas
Nomeando camadas
Modificando camadas
Alterando a ordem de empilhamento de camadas
Aninhando e desaninhando camadas
Alterando a visibilidade de camada
Configurando opções de grade e régua
Utilizando o comportamento Drag Layer
Utilizando o comportamento Show-Hide Layers
Convertendo camadas em tabelas
Utilizando o Netscape Resize Layer Fix
Animando com linhas do tempo
Entendendo como as linhas do tempo funcionam
O painel Timelines
Adicionando um objeto a uma linha do tempo
Utilizando quadros-chave
Controlando linhas do tempo com comportamentos
Posicionando um objeto
Gravando o caminho de uma camada
Modificando propriedades da imagem
Modificando a visibilidade e o tamanho
Visualizando a animação no Dreamweaver
LIÇÃO 10 Criando frames 351

Criando um frameset
Salvando um frameset
Redimensionando frames em um frameset
Especificando propriedades de frame
Criando e editando o conteúdo de frames
Criando outros documentos de conteúdo
Abrindo uma página existente em um frame
Verificando o conteúdo de frame
Controlando o conteúdo do frame com links
Criando conteúdo NoFrames
Utilizando frames por conta própria
LIÇÃO 11 Criando formulários 377

Criando formulários
Agrupando conteúdo de formulário
Adicionando campos de texto de uma única linha
Adicionando botões de opção
Adicionando caixas de seleção
Adicionando itens de listas e de menus
Adicionando campos de texto multilinha
Adicionando botões
Criando campos ocultos
Formatando formulários
Processando formulários
Testando formulários
Criando menus de salto
Criando formulários por conta própria
LIÇÃO 12 Utilizando itens de biblioteca 413

Criando um item de biblioteca
Colocando um item de biblioteca em uma página
Recriando um item de biblioteca
Modificando um item de biblioteca
Atualizando referências da biblioteca
LIÇÃO 13 Utilizando templates 427

Criando templates
Adicionando áreas editáveis a um template
Removendo regiões editáveis
Criando conteúdo opcional
Inserindo regiões repetitivas
Construindo páginas com base em um template
Controlando conteúdo opcional
Adicionando entradas repetitivas
Modificando um template
Criando atributos de tag editáveis
Modificando um atributo de tag editável
Criando templates aninhados
LIÇÃO 14 Gerenciando seu site 459

Utilizando o painel Files
Acessando arquivos fora de um site do Dreamweaver no seu computador
Modificando páginas no painel Files
Conectando-se a um site remoto
Fazendo o upload de arquivos
Bloqueando arquivos e pastas
Check In e Check Out
Utilizando notas de design
Exportando definições de site
Criando conexões a servidores
Ativando a compatibilidade com o Contribute
LIÇÃO 15 Acessibilidade e testes 497
Testes de acessibilidade
Verificando a compatibilidade de navegador
Verificando links no site
Verificando arquivos órfãos
Gerando relatórios para um site
Verificando a ortografia
LIÇÃO 16 Editando o código 515

Alternando entre visualizações do documento
Editando HTML na visualização Code
Utilizando a barra de ferramentas Code
Ajustando o posicionamento de uma nova janela
Tags meta
Utilizando o inspetor Tag
Editando código com tags rápidas
Utilizando fragmentos de código
Utilizando Clean Up XHTML
Trabalhando com HTML no Microsoft Word
Imprimindo a partir da visualização Code
Personalização avançada
LIÇÃO 17 Utilizando Find and Replace 549

Pesquisando seu documento
Removendo tags HTML
Utilizando Find and Replace para anexar folhas de estilo externas
Aplicando estilos personalizados com Find and Replace
Salvando e reutilizando critérios de pesquisa
Pesquisando e substituindo com expressões regulares
Localizando variações em um nome
LIÇÃO A Expressões regulares 569
LIÇÃO B Atalhos do Macintosh 571
LIÇÃO C Atalhos do Windows 576
Índice 581
Introdução
O Dreamweaver 8 da Macromedia combina poderosas ferramentas visuais de layout com
excelentes recursos de edição em HTML baseados em texto para criação, gerenciamento e
manutenção de Web sites. Ele oferece aos iniciantes acesso imediato às ferramentas neces-
sárias para criar páginas Web e permite que desenvolvedores experientes e familiarizados
com a codificação manual trabalhem diretamente com o código quando necessário. Esse
programa flexível torna as técnicas avançadas acessíveis e fáceis de utilizar. A integração
de poderosos recursos de design, recursos de código e recursos interativos fornece vários
benefícios tanto aos usuários iniciantes como aos avançados.
Pré-requisitos
Este livro foi concebido para que você se familiarize com o ambiente de desenvolvimento
do Dreamweaver, buscando equipá-lo com as habilidades necessárias para organizar e
projetar páginas Web. Como é projetado para usuários iniciantes e intermediários que
talvez tenham pouca ou nenhuma experiência anterior com o Dreamweaver, tópicos
como construção de aplicativos avançados e criação de Web sites dinâmicos com o uso de
bancos de dados, comportamentos de servidor e aplicativos Web estão fora do escopo
deste livro. Esses recursos requerem conhecimento dos conceitos de design dinâmico e
das linguagens utilizadas para criar sites – incluindo ASP, JSP, ColdFusion e outras. Para
os leitores interessados em aprender sobre o código, a Lição 16 servirá como um ponto de
partida ao ambiente de codificação, demonstrando como trabalhar com as ferramentas
de codificação do Dreamweaver e apontando os recursos dentro do programa que permi-
tirão que você aprenda mais.
As instruções neste livro são projetadas para designers e desenvolvedores Web, e ou-
tros que se interessam por criar páginas Web. Este livro pressupõe que você seja um ini-
ciante em Dreamweaver, mas conheça os métodos básicos de emitir comandos em um
computador Macintosh ou Windows, como escolher itens nos menus, abrir e salvar ar-
quivos e assim por diante.
Para tirar o máximo proveito deste livro, é recomendável que você tenha uma familia-
ridade básica com a Web. Um entendimento geral sobre processadores de textos padrão,
como o Microsoft Word, também é útil, embora não seja obrigatório.
Por fim, as instruções neste livro pressupõem que você já tem o Dreamweaver MX 8
instalado em um computador Macintosh ou Windows e que seu computador atende aos
requisitos de sistema listados mais adiante. Essa configuração mínima permite executar o
Dreamweaver 8; uma versão demo foi incluída no CD para o leitor utilizar. Você pode
completar as lições com a versão de avaliação do software, mas a versão demo funciona
somente por 30 dias, depois desse período o programa não mais carregará sem um núme-
ro serial.
+
Outline
Este livro o acompanha em cada lição, apresenta os principais recursos e ferramentas no
Dreamweaver 8 e o orienta a desenvolver as habilidades necessárias para criar Web sites.
Todas as lições a seguir devem levar entre 24 e 28 horas:
Lição 1: Princípios básicos do Dreamweaver 8

Lição 2: Adicionando conteúdo a uma página
Lição 3: Criando links
Lição 4: Desenvolvendo folhas de estilo
Lição 5: Trabalhando com imagens gráficas
Lição 6: Criando tabelas
Lição 7: Utilizando multimídia
Lição 8: Adicionando interatividade com o usuário
Lição 9: Criando camadas
Lição 10: Criando frames
Lição 11: Criando formulários
Lição 12: Utilizando itens de biblioteca
Lição 13: Utilizando templates
Lição 14: Gerenciando seu site
Lição 15: Acessibilidade e testes
Lição 16: Editando o código
Lição 17: Utilizando Find and Replace
Apêndice A: Expressões regulares
Apêndice B: Atalhos do Macintosh
Apêndice C: Atalhos do Windows
Elementos e formato
Cada lição começa com uma visão geral do conteúdo da lição e os objetivos de aprendiza-
gem. As lições são divididas em tarefas individuais que lhe ajudam a aprender e utilizar
vários aspectos do tópico da lição.
Este livro é parte da série Guia autorizado Macromedia. Ele contém informações con-
ceituais, explicações passo a passo e materiais detalhados. Além disso, cada lição inclui os
seguintes recursos especiais:
Fonte especial para código: Para ajudá-lo a identificar facilmente o código no livro,
ele foi formatado em fonte especial que é diferente do restante do texto.
Texto em itálico: Fonte em itálico é utilizada para mostrar o texto que o leitor digita.
À medida que segue os passos numerados, você pode ver imediatamente sua próxi-
ma entrada digitada.
Dicas: As dicas contêm atalhos para executar tarefas comuns e maneiras como você
pode utilizar as habilidades que está aprendendo para resolver problemas comuns.
Notas: As notas fornecem informações adicionais que dizem respeito à tarefa dispo-
nível.
Apêndices: Os Apêndices contêm informações úteis relacionadas ao Dreamweaver,
desde expressões regulares até atalhos pelo teclado para PC e Mac.
Este curso foi criado para ajudá-lo a desenvolver suas habilidades progressivamente ao
trabalhar em cada lição. Depois de completar todo o curso, você terá um conhecimento
completo do Dreamweaver.
O CD que acompanha o livro contém todos os arquivos necessários para completar
cada lição. Os arquivos para cada lição aparecem em uma pasta intitulada com o número
da lição. Recomendamos que você crie uma pasta na sua unidade de disco e transfira to-
dos os arquivos de lição para ela antes de começar o curso.
As lições neste livro supõem que:
Você saiba utilizar menus, abrir e salvar arquivos e assim por diante em um sistema
operacional Windows ou Macintosh.
O Dreamweaver 8 já esteja instalado na sua máquina.
Seu computador atenda aos requisitos de sistema listados na seção a seguir.
Guia Autorizado Macromedia

Ideal para aprendizes ativos, os livros na série Guia Autorizado Macromedia oferecem
uma instrução prática projetada para fornecer uma base sólida sobre os fundamentos do
programa. Se você aprende melhor fazendo, esta é a série para você. Cada título da série
Guia Autorizado Macromedia contém horas de instrução. Elas são projetadas para ensinar
as técnicas necessárias a fim de criar projetos sofisticados de nível profissional. Cada livro
inclui um CD-ROM que contém todos os arquivos utilizados nas lições, projetos comple-
tados para comparação e mais.
Macromedia Authorized Training

and Certification
Este livro é projetado para permitir que você estude no seu próprio passo com conteúdo
fornecido pelo próprio fabricante do produto. Há outras opções de treinamento no pro-
grama Macromedia Authorized Training Partner. Atualize-se em questão de dias com
cursos orientados a tarefas ensinadas por instrutores certificados da Macromedia. Ou
aprenda por conta própria com o treinamento on-line interativo da Macromedia Univer-
sity. Todas essas fontes de treinamento farão com que você se prepare para ser um desen-
volvedor certificado pela Macromedia.
Para obter mais informações sobre o treinamento autorizado e a certificação, visite
www.macromedia.com/support/training.
O que você aprenderá

À medida que estuda as lições, você desenvolverá as habilidades necessárias para criar e
manter seus próprios Web sites.
No final deste curso, você será capaz de:
Abrir o Dreamweaver, criar páginas e visualizá-las nos navegadores

Formatar texto em diferentes tamanhos, cores e estilos utilizando os estilos inte-
grados
Importar texto de diversas fontes, incluindo arquivos de texto, documentos do
Word e planilhas
Inserir imagens gráficas e controlar a aparência
Criar e gerenciar e-mail e links internos e externos por todo seu site
Aprender a fazer alterações diretamente dentro do código HTML
Posicionar texto e imagens gráficas dentro de tabelas para ter mais controle sobre o
layout
Utilizar rollovers de imagem e outros elementos interativos
Utilizar a janela Site para gerenciar seus arquivos e pastas
Desenvolver itens de biblioteca para utilizar os mesmos elementos rápida e repeti-
damente
Criar templates para configurar a aparência e o comportamento de um site
Tornar suas páginas acessíveis e redirecionar os visitantes de acordo com a versão
do navegador que eles utilizam
Inserir uma imagem de fundo ou alterar as cores de fundo das suas páginas
Especificar os atributos de texto utilizando folhas de estilo em cascata para ter mais
controle sobre a aparência do texto
Personalizar e estender as capacidades do Dreamweaver para atender às suas neces-
sidades
Requisitos mínimos de sistema
Windows
Processador Intel Pentium III de 800 MHz ou superior
Microsoft Windows 2000 ou Windows XP
256 MB RAM (1 GB recomendado para executar mais de um produto Studio 8 si-
multaneamente)
Resolução de tela de 1024×768, 16 bits (32 bits recomendado)
650 MB de espaço em disco disponível
Macintosh
PowerPC G3 de 600 MHz ou superior
Mac OS X 10.3, 10.4
256 MB RAM (1 GB recomendado para executar mais de um produto Studio 8 si-
multaneamente)
Tela de 1024×768 e milhares de cores (milhões de cores é recomendado)
300 MB de espaço em disco disponível
Princípios básicos
1 do Dreamweaver 8
O Macromedia Dreamweaver 8 é a ferramenta preferida de muitos desenvolvedores
Web – ele fornece os meios tanto para design visual como para edição de código, com-
binado com um ambiente que permite trabalhar com uma ampla variedade de solu-
ções tecnológicas atuais e em evolução, enquanto, ao mesmo tempo, atende à neces-
sidade de sites acessíveis e compatíveis com padrões. O Dreamweaver ajuda a acele-
rar o tempo de produção e fornece ferramentas para gerenciamento e manutenção de
sites. Líder na indústria de softwares para desenvolvimento Web, o Dreamweaver for-
nece as ferramentas de que você precisa para enfrentar os desafios da criação e manu-
tenção de Web sites, incluindo padrões em constante alteração, novas tecnologias e a
capacidade de atender às necessidades dos usuários.
Nesta lição, você aprenderá os princípios básicos do planejamento e da preparação de si-

tes – passos vitais no desenvolvimento de qualquer Web site, seja ele totalmente novo
na Web ou uma reformulação de um já existente. Nesse processo, você conhecerá o
site utilizado em todas as lições neste livro. O projeto é um exemplo prático: a recriação
do Web site para Yoga Sangha – uma academia de yoga localizada em San Francisco.
Em seguida, você aprenderá os princípios básicos do Dreamweaver 8 e conhecerá a in-

terface e as ferramentas do programa. Começaremos a utilizar os recursos básicos de
Nesta lição, você aprenderá sobre a

interface do Dreamweaver enquanto
configura e se prepara para
desenvolver o site que utilizará por
todo este livro.
PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 1

gerenciamento de site estabelecendo um site local na sua máquina que conterá as pá-
ginas que você cria ao desenvolver partes do site Yoga Sangha.
Esta lição ensina a trabalhar com configurações de documentos para criar uma página
Web simples, a abrir uma página existente e também a testar seu trabalho em diferen-
tes navegadores – uma parte essencial da criação de Web sites acessíveis e funcio-
nais. Você também começará a aprender a personalizar o Dreamweaver de acordo
com seu próprio fluxo de trabalho e descobrirá como estender as funcionalidades des-
se programa.
No exercício final desta lição, você iniciará o processo de aplicar as habilidades e técni-
cas que aprendeu nesta lição aos seus próprios projetos Web.
Você pode encontrar um exemplo da Lição 1 concluída na pasta Completed dentro da

pasta Lesson_01_Basics no CD-ROM.

Nesta lição, você irá:
Familiarizar-se com a interface do Dreamweaver
Personalizar o ambiente do Dreamweaver
Explorar o processo de planejamento
Configurar um novo site
Criar e salvar um novo documento
Identificar as ferramentas
Dar um título à sua página
Especificar navegadores para visualizar e testar sua página
Aplicar o que você aprendeu ao(s) seu(s) próprio(s) site(s)
Tempo aproximado
Esta lição deve levar aproximadamente uma hora para ser concluída.
Arquivos da lição
Arquivos iniciais:
Lesson_01_Basics/resources/client-questionnaire.doc
Projeto concluído:
Lesson_01_Basics/Completed/yoga.html
Lesson_01_Basics/Completed/yoga-sangha-responses.pdf
2 LIÇÃO 1
Explorando o espaço de trabalho
Para começar a utilizar o Dreamweaver, você precisa se familiarizar com a interface e as
opções iniciais que estão disponíveis para seu espaço de trabalho. As versões Windows e
Macintosh são um pouco diferentes.
Usuários do Windows: Se esta for a primeira vez que você abre o Dreamweaver 8 em um
computador Windows, terá a opção de selecionar um entre dois espaços de trabalho: De-
signer ou Coder. Para este exercício, selecione o espaço de trabalho Designer porque ele
será utilizado por todo este livro. O espaço de trabalho Designer integra todas as janelas e
painéis relacionados ao Dreamweaver em um ambiente que é otimizado para a criação de
Web sites visualmente orientados – essa opção é ideal para designers. O espaço de traba-
lho Coder é personalizado para programadores – aqueles que querem trabalhar principal-
mente com HTML e outras linguagens de programação Web. Você pode acessar todos os
recursos e ferramentas do Dreamweaver de qualquer espaço de trabalho. Esses espaços de
trabalho simplesmente organizam as ferramentas em configurações otimizadas.
Você pode alternar entre os espaços de trabalho a qualquer momento escolhendo
Window > Workspace Layout e então selecionando o espaço de trabalho desejado.
Usuários do Macintosh: A opção de escolha entre os espaços de trabalho Designer e Co-

der descrita anteriormente não está disponível no Macintosh. O Macintosh utiliza um sis-
tema de painéis flutuantes que você pode organizar para obter o mesmo ambiente otimi-
zado conforme necessário.
Você aprenderá mais sobre a personalização do espaço de trabalho do Dreamweaver
mais adiante nesta lição e por todo o livro.

Página inicial
Ao abrir o Dreamweaver 8, você deve ver a página inicial que fornece o seguinte:
Links rápidos aos documentos recentes

Opções para criar um novo documento a partir de vários tipos de arquivos
Exemplos de design de página que podem lhe fornecer um ponto de partida para
desenvolver seus próprios sites
Recursos do programa incluindo um tour e um tutorial sobre o Dreamweaver
Um link ao Dreamweaver Exchange contendo recursos que você pode utilizar para
estender as ferramentas do programa
Por padrão, a página inicial aparece todas as vezes que você abre o Dreamweaver, a menos
que clique na caixa de seleção Don’t show again.
Se a página inicial não aparecer na inicialização e você quiser visualizá-la, ajuste

sua exibição em Dreamweaver Preferences. Para isso, escolha Dreamweaver > Prefe-
rences (Macintosh) ou Edit > Preferences (Windows), selecione General na lista Cate-
gory e clique na caixa de seleção Show Start Page na seção Document options. Uma
marca de seleção indica que a página inicial será exibida quando o programa for aberto;
se não houver nenhuma marca de seleção, isso indica que a página inicial não aparecerá.
Ao começar a criar novas páginas ou explorar outras opções na página inicial, ela fechará
automaticamente. Os usuários de Macintosh também podem fechar essa janela utilizan-
do o botão Close no canto superior esquerdo da janela.
Página inicial
do Dreamweaver
4 LIÇÃO 1
Preparando-se para desenvolver seu site
É essencial dedicar um tempo para resolver completamente as etapas de pesquisa e planeja-
mento necessárias para a criação de um Web site. Desenvolver um método estratégico com o
qual você possa abordar o desenvolvimento o ajudará a ser mais eficiente, a desenvolver me-
lhor e mais completamente suas idéias, a obter um entendimento mais abrangente do escopo
do seu projeto e a economizar tempo e recursos no futuro. Um bom Web site deve ser intuiti-
vo e proporcionar uma experiência única e positiva ao usuário. A criação de um Web site efi-
ciente começa com tarefas que incluem definir e resumir a razão e a necessidade do site, anali-
sar a concorrência, criar uma visão geral ou fluxograma, documentar a maneira como recur-
sos do site funcionarão e projetar a aparência e o comportamento. Em empresas maiores, es-
sas tarefas podem ser delegadas a várias pessoas ou departamentos e o tempo em que elas são
completadas pode coincidir significativamente. A divisão específica desse processo pode va-
riar bastante – os componentes básicos da criação de um Web site são apresentados neste livro
como etapas que ocorrem em cinco fases do desenvolvimento. Para o site mais eficiente, to-
dos esses componentes devem ser abordados – independentemente de você estar criando seu
próprio site, trabalhando para um cliente ou trabalhando como parte de uma equipe. Como
aprenderá ao trabalhar nas lições, o Dreamweaver pode ajudá-lo em muitas dessas tarefas –
não só aquelas nas etapas da produção e pós-produção.
Fase 1: Pesquisa
Antes de começar a trabalhar em uma página qualquer, faça a você mesmo ou ao seu
cliente perguntas como as apresentadas aqui. Uma versão completa do Questionário do
Cliente (Client Questionnaire) utilizada no desenvolvimento do Web site em questão,
Yoga Sangha, está incluída no CD-ROM, na pasta Lesson_01_Basics/resources. Nesta se-
ção, você encontrará respostas do Yoga Sangha a perguntas-chave do questionário.
Explorar essas respostas pode lhe dar uma percepção de como o site Yoga Sangha foi de-
senvolvido e o ajuda a entender como o processo descrito aqui foi a espinha dorsal do
desenvolvimento desse site. Entender como todo o processo funciona o ajudará ao criar
seus próprios Web sites.
Qual é o público, por que o site é necessário e qual a impressão final que você quer
que os visitantes tenham de seu site? É vital conhecer seu público. A definição de
um perfil de usuário geral ajuda a alcançar eficientemente seu público-alvo. Você
pode ter vários tipos de usuários; se tiver, desenvolva um perfil para cada um deles.
Depois de saber qual é o seu público, você precisa considerar quais tecnologias esses
usuários podem ter. Que tipos de plug-ins, navegadores e sistemas operacionais a maio-
ria de seus visitantes utiliza? É importante considerar o tipo de equipamento utilizado
por seus visitantes ao criar um Web site que seja acessível para o público pretendido.
Por exemplo, você não criaria um site que utilizasse elementos suportados apenas pelos
navegadores mais recentes e atualizados se a maioria de seu público utilizasse máquinas
mais antigas que não podem executar nem mesmo esses navegadores.
Considere o propósito a que seu site servirá e como cada usuário em potencial
fará uso dele. O que o site precisa conter para servir seu propósito? Utilize o(s) per-

fil(is) de visitante criado(s) para determinar possíveis cenários sobre o que os visi-
tantes fariam em seu site.
Site de projeto: O público do Yoga Sangha

Qual é o seu público? Quais são as diferentes idades e interesses de potenciais
alunos e visitantes do site?
“Buscamos atrair alunos entre 20 e 60 anos que estejam interessados em fazer yoga ou
que estejam tentando aprimorar a saúde por meio de atividades físicas.”
Como eles utilizarão o Web site e os serviços fornecidos por sua empresa?
“Queremos que eles utilizem essas informações para escolher uma turma e decidir de
quais workshops eles gostariam de participar. Queremos que os alunos tenham uma
primeira impressão da academia e de suas ofertas, mostrando nossa qualidade, profun-
didade, conexão e serviço personalizável.”
Como o Yoga Sangha ajuda e se encaixa no dia-a-dia dos alunos?
“Oferecendo aulas de yoga em diferentes níveis de capacidade durante todo o dia e à
noite e oferecendo workshops nos fins de semana, o que permite que os alunos encon-
trem uma turma ou workshop que se ajuste aos seus níveis de condicionamento físico e
sua agenda pessoal.”
Quais são as possíveis principais razões para que os alunos escolham Yoga Sangha?
“Porque estamos próximos de onde eles vivem, porque oferecemos yoga Anusara ou
porque seus professores favoritos ensinam na Yoga Sangha. Além disso, na Yoga San-
gha eles realmente aprenderão a praticar yoga em vez de apenas fazer poses.”
Qual conteúdo será necessário para o site? A identificação e a coleta de recursos do

seu site é uma parte importante da preparação para projetar e produzir um Web
site. Você precisa reunir todo o conteúdo, como texto, imagens gráficas e elementos
multimídia que serão utilizados no site. A organização desses recursos permite criar
um Web site completo e detalhado. Você pode então determinar quais tipos de con-
teúdo precisam ser desenvolvidos.
Site de projeto: Conteúdo do Yoga Sangha

Liste as seções, os recursos e o conteúdo que você quer ver incluídos no site.
Desse conteúdo, o que já existe e o que precisará ser desenvolvido?
“Queremos ver incluído um tour pela academia, notícias trimestrais, uma carta trimes-
tral de Katchie e Jayne [os proprietários da academia], um mapa e orientações. Tudo
isso teria de ser desenvolvido. Também queremos incluir um destaque trimestral ou
mensal de alguma organização sem fins lucrativos que faça um bom trabalho no mundo,
destaques para certos professores e quaisquer outras informações tópicas das quais
precisamos ser comunicados com base nas necessidades futuras. Esses tópicos tam-
bém precisariam ser desenvolvidos”.
6 LIÇÃO 1
O que o site deve comunicar? É essencial saber exatamente o que você quer expressar
para seus visitantes. Se você não sabe o que está tentando dizer, existe a possibilidade
de seus usuários também não saberem. Esclareça a mensagem de seu site. A comuni-
cação com seus visitantes é uma parte integral da manutenção de um site eficaz.
Site de projeto: Objetivos

da comunicação do Yoga Sangha
Quais são os principais objetivos do seu site?
“Nossa academia é bastante orientada à comunidade, à ecologia e às pessoas. Seria
maravilhoso poder transmitir mais integralmente a filosofia da yoga Anusara, o foco na
comunidade e a experiência pessoal da nossa academia no nosso Web site. Também
fazemos parte de um novo programa em que esperamos ser uma academia completa-
mente Verde até o ano que vem; isto é, ecologicamente responsável e sustentável.
Queremos mostrar como a yoga se relaciona com a vida cotidiana oferecendo palestras
com convidados proeminentes nas áreas de ativismo, consciência ecológica, nutrição,
relações comunitárias, filosofia e meditação”.
A parte final da pesquisa de um novo Web site é conferir a concorrência. Esse passo é
crucial, mesmo que o Web site que está sendo desenvolvido não se destine ao público.
Como a Web é um lugar imenso, quase qualquer tipo de Web site concebível já foi cria-
do. Entender quais são seus concorrentes e como eles construíram seus Web sites faz
toda a diferença no mundo. Você pode achar que o Web site dos seus concorrentes foi
mal projetado ou carece de recursos. Isso pode lhe oferecer a capacidade de projetar um
site que se destaca, dando-lhe um diferencial. Ou você pode descobrir que o Web site da
concorrência é bem projetado, o que o incentiva a criar um site melhor. Em qualquer
caso, ignorar sua concorrência coloca você e o Web site que está projetando em uma po-
sição desfavorável.
Fase 2: Planejamento e estrutura

A conexão entre seu Web site e o público depende, em parte, da estrutura do seu site. A
clareza e a facilidade de uso são componentes vitais de um bom Web site. É com essa im-
portante fase do desenvolvimento que você começará este livro.
Criando a estrutura do site: Web sites contam com uma estrutura. Um Web site
com uma estrutura pobre pode ser confuso para navegar, difícil de utilizar e difícil
de manter. Para criar um site limpo, comunicativo e fácil de os visitantes utilizarem,
é preciso planejar detalhadamente a estrutura e a hierarquia de arquivos e pastas do
site – antes de começar a construir qualquer documento HTML.
A criação de uma estrutura básica completa do site bem como de um fluxograma
detalhado ou um storyboard é uma etapa importante do processo de planejamento.
Fluxogramas no nível de página individuais mais detalhados também são fre-
qüentemente desenvolvidos nessa etapa para organizar o conteúdo antes da etapa

de design na Fase 3. Você trabalhará nesse tipo de organização de conteúdo, no nível
de página, na Lição 2.
Configurando a estrutura de pastas e arquivos: É importante ter uma estratégia de
gerenciamento de arquivos desde o início do processo de desenvolvimento. Agru-
par diferentes tipos de mídia em pastas individuais para cada tipo de arquivo é
uma boa maneira de fazer isso. Você poderia criar uma pasta de HTML, uma pasta
de imagens, uma pasta folhas de estilo CSS (Cascading Style Sheets) e uma pasta
de multimídia. Utilizar uma pasta chamada html_docs que contenha apenas ar-
quivos HTML ou XHTML, por exemplo, ajudará a manter esses arquivos organi-
zados e fáceis de localizar. Se o site for muito grande, talvez você queira dividi-lo
em partes mais gerenciáveis com uma pasta para cada seção e possivelmente sub-
seções – caso em que poderá haver pastas para os mesmos tipos de arquivo em
cada pasta de seção e subseção. Se houver elementos como imagens gráficas utili-
zados globalmente no site, é recomendável criar uma ou mais pastas comuns na
pasta principal para esses arquivos, evitando duplicar os mesmos arquivos em vá-
rios locais no site. Criar um fluxograma visual dos diferentes níveis das pastas
pode ajudá-lo no processo de definir a hierarquia de pastas. Um Web site bem es-
truturado e limpo é muito mais fácil e mais eficiente de desenvolver e manter do
que um que seja desorganizado. Você aprenderá mais sobre a estrutura de sites, a
hierarquia de pastas e como eles se relacionam a links na Lição 3. Neste livro, a or-
ganização de arquivos está disposta por lição.
No próximo exercício, você será capaz de ver a estrutura do site de projeto

Yoga Sangha examinando as pastas e os arquivos dentro da pasta DW8_YogaSan-
gha/Completed_YogaSangha_SampleSite.
Fase 3: Desenvolvimento – projetando o site

Ao projetar um Web site, você pode iniciar criando miniaturas que mostrem os designs
gerais – um método de revisão rápido de colocar representações visuais das suas idéias em
papel. Por todo esse processo, você deve continuar a levar em conta as respostas às per-
guntas feitas na Fase 1 e os resultados da sua pesquisa. O segundo passo no desenvolvi-
mento do seu design é preencher esboços mais detalhados das suas melhores idéias ini-
ciais. Por fim, podem ser criados modelo(s) completo(s) de como a página aparecerá para
o design escolhido. Durante esse processo de design, normalmente há comunicação cons-
tante com o cliente – você não quer finalizar um modelo completo para as idéias de design
que não são nada o que seu cliente espera. Essa é a etapa em que muitos dos elementos
gráficos para o site são criados – você trabalhará na criação de layouts de página na Lição 4
e na incorporação de imagens gráficas a suas páginas na Lição 5.
8 LIÇÃO 1
Além disso, o processo de teste dos componentes visuais de design para verificar se
aquilo que você está vislumbrando funcionará tecnicamente em uma página Web deve
ser feito por toda essa etapa. Um Web design eficiente se baseia na criação de conceitos vi-
suais que podem ser traduzidos em aspectos técnicos completamente funcionais de um
site. Quanto mais você aprende sobre o que é possível em um Web site, mais bem equipa-
do estará para projetar eficientemente para a mídia on-line. Você aprenderá por todo este
livro muitos recursos técnicos da Web que o Dreamweaver pode ajudar a criar.
Um guia de estilo contendo detalhes específicos de comportamento, aparência, cores e
estilos a serem utilizados por todo o site normalmente é criado nessa etapa também.
Durante a criação de um Web site, freqüentemente há uma quantidade considerável de
sobreposição das fases de desenvolvimento – o trabalho em cada uma das fases costuma
ocorrer de maneira concorrente. Embora você aborde alguns conceitos da Fase 2 nas vá-
rias lições a seguir, a etapa de produção da Fase 3 é aquela em que você mais vai trabalhar
por todas as lições deste livro.
Agora que você entende o que faz parte das etapas de pré-produção das Fases 1 e 2 – o
que já foi feito para o site de projeto – está pronto para começar a trabalhar na recriação de
partes do site de projeto “Yoga Sangha” com o Dreamweaver. Ao trabalhar no site de pro-
jeto por todo o livro, você aprenderá a implementá-lo por meio do Dreamweaver criando
a HTML que reúne toda a pesquisa, o conteúdo e o design de um Web site bem-sucedido.
Fase 4: Testes
Depois de terminar de projetar seu Web site, é importante testá-lo antes de você disponi-
bilizá-lo ao público-alvo. Mesmo os Web sites mais simples devem ser testados de todas as
maneiras concebíveis. Por exemplo, você deve testar o Web site no maior número possí-
vel de navegadores populares. Embora o Microsoft Internet Explorer para Windows seja
o navegador mais comum hoje em dia, Mozilla Firefox, Opera e Safari têm uma fatia de
mercado suficientemente grande a ser considerada. Mesmo com um navegador como o
Internet Explorer, há diferenças significativas entre as versões 5, 5.5 e 6; mas não é preciso
se preocupar com as diferenças entre as versões Windows e Macintosh. Além da maneira
como diferentes navegadores renderizam suas páginas, você também deve certificar-se de
testar cada página e link. O Dreamweaver 8 pode ajudar nessas tarefas de pós-produção,
como veremos mais adiante na Lição 14.
Fase 5: Manutenção
Muitos desenvolvedores de Web sites acreditam que um Web site nunca está concluído. Adi-
cionar páginas, atualizar links, modificar conteúdo e substituir imagens são partes normais da
manutenção de um Web site. O Dreamweaver 8 oferece alguns recursos que ajudam a simpli-
ficar o processo da manutenção de um Web site com itens de biblioteca, templates e outras
ferramentas. Você aprenderá mais sobre esses recursos nas Lições 13 a 16.

Definindo um site local
O primeiro passo da criação de um Web site – antes de você começar a criar páginas indi-
viduais – é projetar ou especificar a pasta no seu computador que conterá tudo do seu site.
Esse processo é chamado de “definição de um site local”. A pasta designada, conhecida
como pasta-raiz local, configura os limites do site local que reside em seu disco rígido e es-
pelha o site remoto, ou seja, o site real no servidor Web que seus visitantes acessarão. A de-
finição de um site local permite manter a mesma hierarquia de pastas entre as versões lo-
cal e remota, o que é crucial para criar e manter um site funcional.
A criação de um site local, composto pela pasta-raiz local dentro da qual você configu-
ra a estrutura dos arquivos e pastas do site, evita que o site armazene qualquer arquivo
dele fora da pasta-raiz local. Os arquivos em seu disco rígido que estão fora da pasta-raiz
local não podem ser transferidos para o servidor remoto. Essa restrição assegura que, ao
desenvolver seu site, você não acessará arquivos que não estejam disponíveis quando o
site ficar on-line. Muitos recursos do Dreamweaver, como o potencial para atualizar to-
das as referências a um arquivo que foi movido para um local diferente no site, requerem a
definição de um site local para funcionar completamente. Você deve manter o hábito de
sempre criar e trabalhar nos sites locais. Se não o fizer, pode ter problemas com o geren-
ciamento de links, caminhos e arquivos (as ferramentas do Dreamweaver para esses re-
cursos são abordadas em lições posteriores neste livro).
O desenvolvimento de seu site ocorre no site local em seu disco rígido, em que você
constrói e inicialmente testa suas páginas.
A configuração de um site não é obrigatória, embora seja recomendada. O

Dreamweaver permitirá que você rapidamente edite, conecte e transfira arquivos sem
configurar um site. Você aprenderá mais sobre gerenciamento de sites na Lição 14.
1. Copie a pasta DW8_YogaSangha do CD-ROM para o disco rígido.

A pasta DW8_YogaSangha se tornará a pasta-raiz local do seu site. Ela contém todos os
arquivos e pastas para o site de projeto Yoga Sangha do qual você recriará partes à medida
que estuda as lições deste livro. Ao começar a trabalhar nos seus próprios sites, você preci-
sará criar uma pasta-raiz local individual para cada um.
O nome da pasta-raiz local pode ser o do respectivo site ou qualquer outro que você
escolher. Se você desenvolver vários sites, é bom utilizar nomes que sejam descritivos e
possam ser distinguidos facilmente uns dos outros. O nome da pasta-raiz local é sim-
plesmente para propósitos de gerenciamento de arquivo e não é visível para os visitantes
do site.
Salve sua pasta-raiz local em um lugar no seu disco rígido que esteja fora da pasta do
aplicativo Dreamweaver 8. Se precisar reinstalar o Dreamweaver, seu trabalho será perdi-
do se ele estiver dentro da pasta de aplicativo do Dreamweaver 8.
10 LIÇÃO 1
Sugestões para locais comuns para armazenar pastas-raiz locais:
Macintosh: Pasta Macintosh HD/Nome do usuário/Sites/raiz-local

Windows: Pasta Meus Documentos\raiz-local
2. Na página inicial do Dreamweaver, selecione Dreamweaver na seção Create New.
Você também pode criar um novo site escolhendo Site > New Site ou Site >
Manage Sites, clicando no botão New e selecionando Site no menu pop-up. A caixa de
diálogo Site Definition é exibida.
A caixa de diálogo Site Definition se abre com duas guias: Basic e Advanced. Essas
guias permitem escolher como você passará pelo processo de definição de um site. A
versão Basic, que é mostrada por padrão ao abrir a caixa de diálogo, conduz o leitor pas-
so a passo pelo processo. A versão Advanced fornece várias opções e configurações adi-
cionais para definir e não inclui as descrições de texto explicativas disponíveis na visua-
lização Basic.
Para este exercício, clique na guia Basic se ainda não estiver selecionada.
Seção Basic da caixa de diálogo Site Definition

3. Na guia Basic da caixa de diálogo de Site Definition o Dreamweaver faz a pergunta
“What would you like to name your site?” [Que nome você quer dar ao seu site?]. Digi-
te Yoga Sangha no campo de texto Site name e então clique em Next.
Yoga Sangha é o nome de site do projeto que você está criando. Ao criar seus próprios si-
tes, os nomes que você atribui devem permitir identificá-los facilmente. Nomes claros e
específicos permitem distinguir os sites por nome, facilitando o gerenciamento de vários.
Como ocorre com a pasta-raiz local, o nome do site serve apenas para sua referência na
lista de sites definidos no Dreamweaver e não é visível para usuários do seu site.
Você deve deixar em branco o campo de texto HTTP Address nessa tela. HTTP Address
– o URL do site on-line – é utilizado para definir links relativos do site-raiz, que serão abor-
dados na Lição 3. Esse item é opcional e não é necessário para os exercícios neste livro.
Esta seção do Basic site setup corresponde ao campo de texto Site name da
categoria Local Info na visualização Advanced. Durante todo o processo de definição
de seu site, você poderá alternar entre as visualizações Basic e Advanced se quiser ver
como esta última aparece. Você trabalhará com a visualização Advanced na Lição 14.
4. O Dreamweaver solicita, “Do you want to work with a server technology such as Cold-
Fusion, ASP.NET, ASP, JSP, or PHP?” [Você quer trabalhar com uma tecnologia de servi-
dor como ColdFusion, ASP.NET, ASP, JSP ou PHP?”] Clique no botão de opção para a
opção “No, I do not want to use a server technology” [Não, eu não quero utilizar uma tec-
nologia de servidor]. Clique em Next para avançar para a próxima seção.
Nesse momento, você não está criando as páginas que irão incorporar bancos de dados ou
outras tecnologias de servidor, portanto, selecione a opção No. Você sempre pode adicio-
nar essa funcionalidade em um momento posterior – sempre que precisar fazer alterações
na configuração do seu site, escolha Site > Manage Sites, selecione seu site na lista e clique
no botão Edit.
Especificando
a tecnologia
de servidor
na caixa
de diálogo
Site Definition
12 LIÇÃO 1
Esta seção da configuração Basic corresponde à categoria Testing Server na vi-
sualização Advanced, que fornece opções adicionais que estão envolvidas na criação
de sites dinâmicos, como escolher o modelo de servidor utilizado em seu servidor re-
moto.
5. Na parte superior desta seção, o Dreamweaver pergunta “How do you want to work
with your files during development?” [Como você quer trabalhar com seus arquivos du-
rante o desenvolvimento?]. Clique na opção “Edit local copies on my machine, then
upload to server when ready (recommended)”. [Editar cópias locais em minha máquina
e então fazer upload para o servidor quando pronto (recomendado)].
Escolhendo
como trabalhar
com arquivos
na caixa
de diálogo
Site Definition
Por enquanto, você trabalhará com arquivos que estão localizados na sua máquina –
não é preciso ter acesso a um servidor remoto. Editar arquivos que existem no seu com-
putador é a seleção mais comum. Se você tiver um servidor remoto, essa opção significa
que há duas cópias dos arquivos – uma cópia na sua unidade de disco local e uma segun-
da cópia no seu servidor. Isso fornece a opção de recuperar os arquivos originais a partir
do servidor se necessário – desde que você não os tenha substituído fazendo upload dos
arquivos que foram modificados localmente. Realizar o trabalho de produção e de tes-
te na sua unidade de disco local evita que páginas não concluídas sejam exibidas ao
público.
Se estivesse trabalhando diretamente em um servidor, quaisquer alterações feitas se-
riam imediatamente aplicadas aos arquivos originais.

6. Também nesta seção, o Dreamweaver pergunta “Where on your computer do you
want to store your files?” [Onde em seu computador você quer armazenar seus arqui-
vos?]. Clique no ícone de pasta à direita do campo de texto e navegue até localizar a
pasta DW8_YogaSangha.
Esse campo de texto permite selecionar a pasta em seu disco rígido na qual todos os ar-
quivos do site são armazenados. Essa pasta é a equivalente à pasta-raiz no site remoto. O
Dreamweaver precisa definir essa pasta-raiz local para determinar os caminhos para docu-
mentos, imagens e links em seu site. Você aprenderá sobre caminhos e links na Lição 3.
DW8_YogaSangha é a pasta que você copiou do CD-ROM para seu disco rígido no Pas-
so 1 deste exercício. Por padrão, o campo de texto continha inicialmente o caminho para
uma pasta chamada Yoga Sangha. Utilizar esse padrão criaria uma nova pasta no seu disco
rígido chamada Yoga Sangha, que se tornaria sua pasta-raiz local. Como você precisa utili-
zar a pasta DW8_YogaSangha que contém os arquivos, é necessário encontrá-la.
Usuários do Macintosh: Localize a pasta DW8_YogaSangha no seu disco rígido, selecio-
ne-a e clique em Choose.
Usuários do Windows: Localize a pasta DW8_YogaSangha no seu disco rígido, selecio-
ne-a e clique em Open; em seguida, clique em Select para escolher a pasta DW8_Yoga-
Sangha como sua pasta-raiz local. O texto “Select:DW8_YogaSangha” aparece no canto
esquerdo inferior da caixa de diálogo Choose Local Root Folder For Site Yoga Sangha
para indicar que a pasta DW8_YogaSangha será selecionada.
Certifique-se de selecionar a pasta DW8_YogaSangha que você copiou para seu

disco rígido – não aquela que está no CD-ROM. Em algumas versões Windows, arqui-
vos copiados de um CD são marcados como de leitura; para corrigir isso, selecione to-
dos os arquivos (Ctrl-A), depois de copiá-los, vá para Propriedades (Alt-Enter ou clique
com o botão direito do mouse nos arquivos selecionados e clique em Propriedades) e
desmarque a caixa de seleção Somente Leitura. Clique então em Aplicar ou em OK.
Especificando
a pasta-raiz
na caixa de
diálogo
Site Definition
14 LIÇÃO 1
O caminho para a pasta-raiz local, DW8_YogaSangha, agora é exibido no campo de
texto, e sua localização é mostrada em relação ao seu disco rígido.
Mas, neste caso, você precisa escolher a pasta DW8_YogaSangha que já existe (e con-
tém os vários arquivos de que você precisa para trabalhar com as lições deste livro) como
sua pasta-raiz local.
Ao criar seus próprios sites, se você ainda não tiver uma pasta, talvez considere útil per-
mitir que o Dreamweaver crie automaticamente uma com base no nome que você esco-
lheu para seu site.
Entendendo as opções avançadas

de definição de site
Essa seção da configuração do Basic setup – em que você especifica a pasta-raiz local –
corresponde ao campo de texto Local Root Folder da categoria Local Info na visualização
Advanced. As opções de definição de site Advanced também permitem selecionar atua-
lizar a lista de arquivos locais automaticamente, ativar o cache, especificar uma pasta pa-
drão para imagens e definir o endereço HTTP para o site.
A opção Refresh local file list é marcada por padrão, fazendo com que o Dreamweaver
atualize a lista de sites sempre que você adicionar um novo arquivo à pasta do site. Se
você desmarcar essa opção, precisará atualizar os arquivos locais manualmente sempre
que fizer alterações como adição ou exclusão de arquivos.
A opção de ativar cache (Enable Cache) aparece marcada por padrão. A ativação do ca-
che aloca memória para armazenar dados de sites freqüentemente utilizados, aprimo-
rando a velocidade das tarefas de vinculação e de gerenciamento do site. O cache de
site armazena as informações na memória RAM do computador, tornando mais rápido o
acesso aos recursos que utilizam o cache. Quando essa opção está ativa, o Dreamwea-
ver atualiza continuamente as informações armazenadas no cache à medida que você
trabalha. Embora normalmente seja melhor deixar a opção de cache ativa, lembre-se de
que recriar o cache pode tornar lentas as operações em sites extremamente grandes.
A pasta Default Images permite especificar a localização das imagens no seu site e pode
reduzir o tempo que leva para navegar pelas imagens ao inseri-las. O uso de imagens é
abordado na Lição 5.
O endereço HTTP, outro recurso opcional, é utilizado para definir o URL de seu Web site.
Esse endereço é utilizado para verificar links absolutos. A Lição 3 aborda informações
adicionais sobre links.

7. Clique em Next para avançar para a próxima seção. Abaixo da pergunta “How do
you connect to your remote server?” [Como você se conecta ao seu servidor remo-
to?], escolha None no menu.
Opções de conexão na caixa de diálogo Site Definition
Neste momento, você está trabalhando em um site local; não é necessário acesso a um ser-
vidor remoto. Informações adicionais sobre a conexão a um servidor remoto podem ser
encontradas na Lição 14.
Essa seção da configuração básica corresponde à categoria Remote Info na vi-

sualização Advanced, que fornece opções adicionais que fazem parte da transferência
de arquivos para um servidor remoto, como, por exemplo, especificar a pasta em que
armazenar arquivos no servidor.
16 LIÇÃO 1
8. Clique em Next para avançar para a próxima seção. Revise as informações sobre o
site que você acaba de definir e então clique no botão Done na parte inferior da caixa
de diálogo.
Resumo do site na caixa de diálogo Site Definition
Como você escolheu as opções No para as seções Remote Info e Testing Server, o Dream-
weaver exibe “Access: I’ll set this up later” [Acesso: Irei configurar isso mais tarde] para
ambas.
Ao clicar em Done, o Dreamweaver varre os arquivos na pasta DW8_YogaSangha para
criar o cache do site. Talvez você veja uma caixa de diálogo aparecer brevemente à medida
que o Dreamweaver completa o processo de criação do cache pela primeira vez. Criar o
cache levará mais tempo em sites muito grandes.

O painel Files agora exibe a pasta DW8_YogaSangha. Por padrão, o painel Files é exibi-
do na parte inferior dos grupos de painéis que você irá explorar mais adiante nesta lição.
Você também aprenderá mais sobre o painel Files na Lição 14.
O painel Files
mostrando
o site Yoga
Sangha
Se você nunca definiu um site no Dreamweaver, o painel Files exibe uma hie-
rarquia de pastas no seu computador e um link para abrir a caixa de diálogo Manage Si-
tes. Para usuários de Macintosh, a seleção padrão no menu pop-up do painel Site será
Computer, que inicialmente contém Macintosh HD, Network FTP & RDS Servers e a
pasta Desktop. Para usuários do Windows, a seleção padrão é Desktop, que contém
inicialmente Meu computador, Ambiente de Rede, Servidores FTP & RDS e itens da
área de trabalho. Depois de criar um site, ele se tornará a seleção padrão. Se você tiver
mais de um site, o Dreamweaver exibirá o site mais recentemente utilizado no painel
Files. O painel Files está localizado no grupo de painéis Files.
Criando e salvando uma nova página

Depois de definido o site local, você está pronto para começar a criar páginas Web e traba-
lhar nelas. Sempre que criar uma nova página, sua primeira ação deve ser salvar o docu-
mento.
1. Escolha File > New. A caixa de diálogo New Document aparece.
18 LIÇÃO 1
Você pode utilizar os comandos de teclado Cmd+N (Macintosh) ou Ctrl+N
(Windows) para abrir a caixa de diálogo New Document. Se quiser pular a caixa de diá-
logo New Document e criar um novo documento imediatamente sempre utilizando es-
ses comandos de teclado, escolha Dreamweaver >> Preferences (Macintosh) ou Edit
> Preferences (Windows), selecione New Document da lista Category e desmarque
Show New Document Dialog, Command+N (Macintosh) ou Show New Document Di-
alog, Ctrl+N (Windows). Essa seção também fornece a opção para alterar o tipo de do-
cumento padrão, bem como a extensão e a codificação. As lições neste livro assu-
mem que você esteja utilizando os padrões. Clicar no botão Preferences na parte infe-
rior da caixa de diálogo New Document é uma outra maneira de abrir a caixa de diálogo
Preferences.
A caixa de diálogo New Document abre com duas guias: General e Templates. Neste
exercício, você criará uma nova página em HTML (Hypertext Markup Language). A op-
ção para criar uma nova página em HTML está localizada na categoria Basic da guia Ge-
neral. Essas seleções são os padrões e já podem estar selecionadas para você.
Caixa de
diálogo
New
Document
A caixa de diálogo New Document também fornece opções adicionais para criar uma
variedade de tipos de página. A categoria Basic Page oferece algumas opções além de
HTML, incluindo CSS (Cascading Style Sheets), JavaScript e XML. Outras categorias
disponíveis de tipo de página incluem Dynamic Pages (que utiliza linguagens como
ASP, ColdFusion e PHP) e Page Designs (que você pode utilizar como um ponto de par-
tida ao criar seu próprio site). Você pode acessar tipos específicos de páginas escolhendo

da lista de categorias na coluna esquerda da caixa de diálogo que inclui Dynamic, Tem-
plates, CSS Style Sheets, Framesets e Page Designs. Você não utilizará nenhum desses ti-
pos de página adicionais neste excercício, mas deve estar ciente deles. O conteúdo da co-
luna do meio da caixa de diálogo muda, dependendo da categoria selecionada na coluna
esquerda.
Entendendo XHTML, XML e

Document Type Definition
Por trás da aparência visual de uma página Web há um código, chamado linguagem de
marcação, utilizado para produzir o que visitantes vêem em seus navegadores – a mar-
cação descreve a estrutura e aparência de uma página rotulando elementos, como tex-
to e imagens com instruções, na forma de tags e seus atributos, de acordo com a ma-
neira como esses elementos devem ser exibidos. A Hypertext Markup Language
(HTML) é atualmente uma das linguagens de marcação mais bem conhecidas; entre-
tanto, a HTML é limitada por natureza, particularmente pelo fato de que novos recur-
sos geralmente não são compatíveis com versões anteriores e há um grande número
de problemas de compatibilidade com HTML para uso em múltiplos navegadores. A
HTML é uma linguagem de marcação mais antiga que está se tornando obsoleta por-
que não atende aos padrões Web atuais, nem tem o potencial de evoluir para corres-
ponder a esses padrões.
A Extensible Hypertext Markup Language (XHTML) estende as capacidades da HTML
reformando esta como uma linguagem Extensible Markup Language (XML). A marca-
ção XML enfatiza e facilita a separação da estrutura, conteúdo e apresentação especifi-
cando o conteúdo e a estrutura de uma página, mas não a aparência ou apresentação – a
definição de toda a apresentação é tratada separadamente por outro meio, como CSS.
As vantagens de se utilizar XHTML incluem compatibilidade com versões anteriores e
posteriores, operabilidade em dispositivos de acesso à Web alternativos como telefo-
nes celulares ou computadores de mão e o potencial para extensibilidade. XHTML 1.0
Transitional é uma versão XHTML que permite o uso de alguns elementos HTML que
estão “condenados” – isto é, marcados como obsoletos pelo World Wide Web Consor-
tium (W3C), que desenvolve padrões Web a fim de assegurar compatibilidade por toda a
indústria – e, portanto, não disponível em versões mais estritas da XHTML. Uma vez que
permitir esses elementos obsoletos ativa a compatibilidade com versões anteriores por
meio da conversão de HTML em XHTML, a XHTML 1.0 Transitional é atualmente a lin-
guagem de marcação recomendada para desenvolvimento Web.
O uso dessas linguagens é definido pela Document Type Definition (DTD). Embora in-
visível para o visitante, a DTD está localizada no começo do código que abrange a pági-
na Web. A DTD declara a sintaxe da linguagem de marcação para a página – isto é, defi-
ne a maneira como o navegador ou outro dispositivo de acesso Web deve interpretar a
página.
20 LIÇÃO 1
Por padrão, o Dreamweaver utiliza a XHTML 1.0 Transitional como o Docu-
ment Type Definition em todos os novos documentos HTML a menos que você sele-
cione um tipo diferente. Você pode alterar a DTD de um novo documento na caixa de
diálogo New Document escolhendo o tipo desejado no menu DTD na parte inferior da
caixa de diálogo. Neste livro, você deve utilizar a XHTML 1.0 Transitional DTD padrão –
não altere a DTD. Você pode converter entre HTML e XHTML escolhendo File > Con-
vert e selecionando o tipo em que você quer converter.
Depois de clicar no botão Create, um novo documento XHTML sem título aparece, e a
página inicial se fecha automaticamente.
Você também pode criar um novo documento diretamente da página inicial se-
lecionando o tipo de arquivo (como HTML, como fez neste exercício) da coluna Create
New. Um novo documento do tipo que você selecionou aparece, e a página inicial se
fecha.
2. Clique na guia General na caixa de diálogo New Document e escolha Basic Page
na lista de categorias. Escolha HTML na lista Basic Page e clique no botão Create.
3. Escolha File > Save e localize a pasta html_docs em Lesson_01_Basics, na qual

você salvará esse arquivo. Digite yoga.html no campo Save As (Macintosh) ou no
campo Nome de arquivo (Windows) e então clique em Save.
Caixa
de diálogo
Save As

Não espere até que você tenha texto ou imagens para salvar – salve suas páginas logo que
abrir novos documentos. Se seu arquivo for salvo primeiro, ao importar imagens ou outra
mídia, todos os caminhos que referenciam a localização desses elementos em seu site se-
rão feitos adequadamente. Se você não salvar o documento, é utilizado um nome de cami-
nho que começa com file://, descrevendo a localização do elemento que está sendo inseri-
do em relação a seu disco rígido. Se você tentar inserir um objeto sem primeiro salvar o
documento, o Dreamweaver o advertirá de que é preciso utilizar um nome de caminho de
file:// para o elemento. Esses caminhos de file:// não funcionam em servidores remotos
porque descrevem a localização de arquivos específicos para seu computador.
Você pode utilizar os comandos de teclado Cmd+S (Macintosh) ou Ctrl+S

(Windows) para salvar seu documento. Lembre-se sempre de salvar com freqüência,
de modo que você não perca uma grande quantidade de trabalho se seu computador
travar por qualquer razão.
Usuários do Macintosh: O Dreamweaver adiciona automaticamente a extensão .html ao

nome do arquivo dos documentos HTML no campo de texto File Name – você deve dei-
xar essa extensão ou especificar uma diferente.
Usuários do Windows: O Dreamweaver adiciona automaticamente a extensão .html ao

nome de arquivo dos documentos HTML quando você os salva se a extensão não for especi-
ficada no campo de texto File Name. Você mesmo também pode especificar a extensão.
O Dreamweaver acrescenta a extensão padrão de qualquer arquivo que você

cria. Por exemplo, se criar um arquivo Cascading Style Sheet, o Dreamweaver adicio-
nará .css ao nome do arquivo.
Você sempre deve salvar seus documentos com a extensão .html. Se o Dreamweaver
fornecer um padrão de .htm, você poderá alterar esse padrão escolhendo Dreamweaver >
Preferences (Macintosh) ou Editar > Preferências (Windows) e selecionando a categoria
New Document. A extensão padrão é exibida em uma caixa de texto. Neste livro, a exten-
são .html é utilizada nos exemplos e materiais incluídos no CD-ROM, e os exercícios su-
põem que você utilizará a extensão padrão.
A extensão .htm é remanescente de quando o Windows só podia tratar exten-

sões de arquivo de 3 caracteres. A menos que você ache que alguém com o Windows
3.1 vá trabalhar nesse site, não há razão para utilizar a extensão .htm, visto que isso ge-
ralmente não é considerado profissional.
22 LIÇÃO 1
Novos documentos recebem um nome padrão Untitled-1.html no campo de texto
Save As, com os números que aumentam seqüencialmente para cada novo documento
criado.
As opções New Document e Save também estão disponíveis na barra de ferra-

mentas Standard, que você pode abrir escolhendo View > Toolbars > Standard. Apare-
cem outras barras de ferramentas além da barra de ferramentas de documento padrão
quando você adiciona ou as move apenas no documento ativo; as alterações não são
refletidas em outros documentos.
Convenções para atribuição

de nomes de arquivos
Lembre-se de que a nomeação de arquivos para utilização em um servidor Web é um
pouco diferente da nomeação de arquivos para uso em seu disco rígido. É útil conhecer
qual sistema operacional o servidor usará – os sistemas mais comuns são Unix, Linux,
Windows NT e Mac OS X. A estrutura de atribuição de nomes é diferente no Windows
de outros sistemas operacionais baseados em *NIX. O Unix, por exemplo, faz distinção
de maiúsculas/minúsculas, o que significa que myfile.html não é igual a MYFILE.HTML.
Utilizar apenas letras minúsculas para seus arquivos torna a nomeação de arquivos mais
simples e ajuda a manter a consistência. Você só deve utilizar caracteres alfa (A–Z) e nú-
meros (0–9) para nomear arquivos. Eis outras convenções importantes a serem segui-
das tanto para nome de arquivos como para nome de pastas:
• Espaços. Jamais utilize espaços em nome de arquivos. Utilize o sublinhado ou carac-
teres de hífen para simular um espaço se precisar separar palavras. Podem surgir
problemas porque os navegadores substituem %20 por espaços.
• Caracteres especiais. Não utilize nenhum caractere especial, como ?, %, *, >, ou /,
nem letras acentuadas ou ç. Não utilize vírgulas.
• Números. Evite iniciar o nome de seus arquivos com números.
• Comprimento. Mantenha os nomes de pasta e de arquivo o mais curto possível.
Lembre-se de que o nome de pasta torna-se parte do URL que você digita para che-
gar à página.
Explorando as ferramentas
Antes de avançar para um desenvolvimento mais detalhado de quaisquer páginas Web,
você precisa conhecer a variedade de ferramentas e painéis que compõem a interface do
Dreamweaver 8 e que permitem produzir um Web site de forma eficaz.
1. Mova o ponteiro sobre a janela do documento e a barra de ferramentas do docu-

mento. Deixe o ponteiro pairado sobre um botão para ver seu nome.
A maior parte de seu trabalho de design e de codificação é feita dentro da janela do docu-
mento. Essa área é conhecida como o corpo da página, em que você pode inserir, modifi-

car e excluir a ampla variedade de elementos que compõem uma página Web. À medida
que você trabalha, a janela Document exibe uma aparência aproximada que sua página
terá em um navegador. É uma aproximação porque há diferenças na maneira como nave-
gadores interpretam páginas Web.
Visualização Design Janela de documentos
Visualização Split Barra de título de documento
Visualização Code Campo de texto Title
Barra
de ferra-
mentas
de docu-
mento
Seletor
de tag
O nome de arquivo yoga.html (conforme foi salvo no exercício anterior) é mostrado

na barra de título (no Windows, o nome de arquivo é mostrado em uma guia na parte su-
perior da janela de documentos; veja a ilustração na Seção “Trabalhando com painéis e
documentos”, posteriormente nesta lição). Por padrão, essa página é inicialmente intitu-
lada Untitled Document, como mostrado no campo de texto Title na barra de ferramen-
tas do documento. A barra de ferramentas do documento, que pode ser mostrada ou
ocultada por meio de View > Toolbars, contém botões e menus pop-up para fornecer
acesso rápido a operações comuns. Por padrão, a barra de ferramentas faz parte da janela
Document. Os usuários do Windows podem dar um clique duplo ou arrastar a alça na
borda esquerda da barra de ferramentas para separá-la da janela Document, tornando-a
um painel individual.
Há três modos de visualização no Dreamweaver: visualização Design, visualização
Code e visualização Split, que mostra tanto a visualização Design como a visualização
Code. Os botões para esses modos estão localizados no lado esquerdo da barra de ferra-
mentas do documento. Você pode ver o nome dos modos de visualização pairando o
ponteiro sobre os botões. Neste momento, o modo de visualização que você está utilizan-
do deve ser a visualização Design. O botão ativo é destacado, indicando que o Dreamwea-
ver está exibindo a página nesse modo de visualização. Você trabalhará com as visualiza-
ções Code e Split na Lição 16. Se a janela Document for mostrada dividida em dois painéis
24 LIÇÃO 1
com o código em um painel, você precisará selecionar o ícone Design View localizado na
barra de ferramentas do documento.
No canto inferior esquerdo da janela de documento está o seletor de tag. O seletor de
tag sempre inicia da tag <body> e exibe hierarquicamente tags HTML aplicadas ao ele-
mento atualmente selecionado. Utilizando as tags HTML que correspondem a esses ele-
mentos, o seletor de tag permite que você se mova rapidamente pela hierarquia de código
para ver com qual elemento está trabalhando e para selecionar facilmente outros elemen-
tos. Familiarizar-se com o uso do seletor de tag será particularmente útil quando você co-
meçar a utilizar tabelas na Lição 6.
Se você não puder ver o seletor de tag, tente reduzir o tamanho da sua janela
de documentos. O seletor de tag pode tornar-se oculto abaixo do inspetor Property.
Você se familiarizará com os vários botões e opções personalizáveis na janela Docu-

ment à medida que trabalha com as lições deste livro.
2. Certifique-se de que Common está marcado no menu pop-up na extremidade es-

querda da barra Insert, então mova o ponteiro sobre a barra, cuja posição padrão é na
parte superior da sua tela. Deixe o ponteiro pairado sobre um botão para ver seu
nome.
Link de e-mail
Menu: Âncora de nome
Common Tabela
(o grupo Inserir a tag DIV
ativo padrão) Images: Imagem
Indicador adicional Seletor de tag

de ferramentas
Mídia Templates
Data Comentário
Server Side Includes (Inclusões no servidor)
A barra Insert contém muitos dos objetos ou elementos que você pode adicionar à sua pá-
gina, incluindo imagens, tabelas, caracteres especiais, formulários e HTML. Os elementos
são organizados em oito grupos, de acordo com seu tipo: Common, Layout, Forms, Text,
HTML, Application, Flash Elements e Favorites. O nome do grupo ativo é exibido no
menu. O grupo Common está ativo por padrão. Você pode utilizar o menu pop-up para
alternar para um grupo diferente de objetos. Muitos dos objetos individuais nesses grupos
têm seus próprios menus pop-up, indicados por uma pequena seta preta, com ferramen-
tas, opções e outros objetos adicionais relacionados; clique nessa seta preta uma vez para
abrir o menu pop-up. A última opção no menu pop-up de categoria da barra Insert é
Show as Tabs, que converterá a barra Insert para mostrar guias na parte superior da barra

para cada categoria. Para voltar ao formato de menus, escolha Show As Menu no menu
Options no canto superior direito da barra Insert. Utilize um método de visualização
qualquer – guias ou o menu – o que você preferir.
Barra Insert com guias Botão de menu Options
Neste livro, as palavras “objetos” e “elementos” são utilizadas intercambia-

velmente. Onde for possível, “objeto” será utilizado quando se referir ao botão e “ele-
mento” será utilizado para o item depois de aparecer na janela Document.
Para inserir um elemento, você pode arrastar o ícone do objeto a partir da barra Insert
para o local onde deseja que ele apareça na janela Document. Você também pode posicio-
nar o ponto de inserção em seu documento onde o elemento deve aparecer e então clicar
no ícone do objeto no painel. Ao clicar no ícone, o elemento aparecerá no documento no
ponto de inserção.
Você pode mover boa parte dos objetos que utiliza regularmente para o grupo
Favorites da barra Insert clicando com o botão direito do mouse (usuários do Macin-
tosh com mouses de único botão podem utilizar Control+clique para acessar as mes-
mas opções) na barra e escolhendo Customize Favorites. Selecione o item desejado
no menu Available Objects que aparece e clique no botão de seta dupla entre as listas
Available Objects e Favorite Objects. Você pode utilizar as teclas de seta para cima e
para baixo acima da lista Favorite Objects a fim de ajustar a ordem de objetos. A caixa
de diálogo também permite remover objetos do grupo Favorites e adicionar separado-
res entre eles, de modo a organizá-los ainda mais.
3. Mova o ponteiro sobre o inspetor Property, normalmente na parte inferior da sua

tela. Deixe o ponteiro pairado sobre um botão para ver seu nome.
O inspetor Property é utilizado para visualizar e modificar os atributos do texto seleciona-
do, imagens, tabelas e outros elementos em um documento. O inspetor Property é con-
textual – os atributos que ele disponibiliza mudam dependendo de o que é selecionado na
janela Document. Para expandir ou recolher o inspetor Property, clique na seta de expan-
são no canto inferior direito do painel. Se o inspetor Property for recolhido, poderá haver
propriedades adicionais que não serão visíveis até que você expanda o painel.
Os usuários do Windows também podem reduzir o inspetor de modo que somente o
nome do painel apareça a fim de obter uma área de visualização maior.
26 LIÇÃO 1
Inspetor Property
Expandir/Reduzir
Os usuários do Windows também podem redimensionar a área inteira para o

inspetor Property (e painéis adicionais que mais tarde aparecem nessa área) arrastan-
do o botão de seta na borda horizontal entre a janela de documentos e o inspetor Pro-
perty. Clicar no botão de seta recolhe a área inteira; basta clicar no botão novamente
para reabri-la. A borda horizontal não é parte da interface do Macintosh.
Trabalhando com painéis e documentos

A maioria dos painéis do Dreamweaver é encaixada – combinada em janelas com guias –
dentro de grupos de painéis de acordo com suas funções. Os grupos de painéis padrão são
CSS, Application, Tag Inspector e Files. Você pode acessar painéis a partir desses grupos,
bem como do menu Window. Os grupos de painéis permitem ocultar ou acessar os pai-
néis utilizados com mais freqüência. O encaixe maximiza a área da sua tela, enquanto for-
nece acesso rápido aos painéis necessários. Cada grupo de painel pode ser expandido a fim
de exibir o painel ativo e as guias para o restante dos painéis que ele contém ou pode ser
diminuido de modo a mostrar apenas o nome do grupo.
Se você abriu o Dreamweaver antes de começar esta lição, os painéis estão posiciona-
dos exatamente onde estavam da última vez em que fechou o programa. No menu Win-
dow, uma marca de seleção ao lado de um item indica que o painel ou a barra de ferra-
mentas está selecionado(a) e ativo(a) (visível) nos grupos de painéis.

1. Clique na seta na barra de título do grupo de painel CSS para expandir o grupo se
ainda não estiver aberto.
O grupo de painéis CSS está localizado (por padrão) na parte superior dos grupos de pai-
néis. Quando o grupo de painéis CSS for expandido, você verá o painel CSS Styles, com o
qual trabalhará na Lição 4. No canto superior direito do painel está o botão do menu
Options, que não é visível quando o grupo de painéis é reduzido.
Barra de título do grupo de painéis CSS

Alça de painel Botão do
Guia do painel menu Options
CSS Styles
No menu Window, um painel oculto não possui uma marca de seleção ao lado do
nome de painel. Para exibir um painel oculto, escolha o painel desejado no menu Win-
dow. Se o painel escolhido estiver em um grupo de painéis que não esteja atualmente dis-
ponível, o painel e o grupo de painéis que contiverem esse painel escolhido aparecerão. Se
o grupo contendo o painel desejado estiver visível mas reduzido, a escolha do painel no
menu Window expandirá o grupo e exibirá o painel selecionado.
Ocasionalmente, um painel pode estar oculto embaixo de outro painel ou da ja-

nela Document. As alterações na resolução de tela podem ser uma causa desse pro-
blema. Se estiver faltando um painel e você não conseguir fazê-lo aparecer esco-
lhendo-o no menu Window, talvez seja preciso escolher Window > Arrange Panels
(Macintosh somente) para redefinir todos os painéis abertos para as posições pa-
drão. Usuários do Macintosh ou do Windows também podem escolher Window >
Workspace Layout > Default a fim de restaurar todas as ferramentas e painéis de acor-
do com suas posições originais. A barra Insert se move para o canto superior esquerdo
da tela, o inspetor Property se move para a parte inferior da tela, e todos os outros pai-
néis abertos se movem para o lado direito da tela.
28 LIÇÃO 1
2. Posicione o ponteiro sobre a parte inferior de uma linha que separa dois grupos de
painéis. Quando o ponteiro mudar para um ponteiro vertical de duas setas, clique e ar-
raste para cima ou para baixo a fim de ajustar o tamanho dos painéis.
À medida que trabalha, talvez você precise redimensionar os painéis para mostrar infor-
mações adicionais ou fornecer mais espaço a outros painéis e à janela Document.
Os usuários do Windows também podem redimensionar a largura da área in-

teira para todos os grupos de painéis encaixados arrastando o botão de seta na borda
vertical. Ao clicar no botão de seta, recolhe-se toda a área de encaixe; basta clicar no
botão novamente para reabri-la.
A borda vertical não faz parte da interface do Macintosh. Os usuários do Macintosh
podem redimensionar a largura dos grupos de painéis encaixados clicando e arrastan-
do o botão de redimensionamento no canto inferior direito dos grupos de painéis.
Painéis
encaixados
(Macintosh)
Borda vertical
para ajustar
o tamanho
da área
de painel
(Windows)
Painéis
Controle
encaixados
de redimen-
(Windows)
sionamento
Ajustando o tamanho de um painel (Macintosh)

Depois de se familiarizar com os painéis e as ferramentas do Dreamweaver, você pode
personalizar a interface reorganizando painéis e reordenando grupos de painéis para fazer o
programa funcionar com suas necessidades específicas. Você pode salvar qualquer espaço
de trabalho personalizado que você cria escolhendo Window > Workspace Layout > Save
Current. O submenu Workspace Layout também oferece um espaço de trabalho para de-
senvolvedores que trabalham com dois monitores – tela dual – bem como a capacidade de
renomear ou excluir espaços de trabalho salvos por meio da opção Manage.
Você pode desencaixar qualquer grupo de painéis e separá-lo da área de encai-

xe. Para desencaixar um grupo de painéis, posicione o ponteiro sobre a alça do painel
designado pelos pontos à esquerda da barra de título do grupo de painéis. Quando o
ponteiro mudar para uma mão (Macintosh) ou uma cruz com setas (Windows), clique e
arraste o grupo de painéis para fora da janela e solte-o. Ao arrastá-lo para fora dos pai-
néis encaixados, você verá uma imagem fantasma do grupo de painéis até que o libe-
re. É possível renomear essa nova janela ou grupo de painéis clicando no botão de
menu Options e escolhendo Rename Panel Group no menu Options. Ao arrastar um
grupo de painéis de volta para a área de encaixe com outros grupos, você vê a imagem
fantasma do painel antes de soltá-lo, bem como uma linha espessa escura no ponto
em que o grupo de painéis aparece. Você também pode reorganizar a ordem de gru-
pos de painéis utilizando a área de seleção para mover qualquer um dos grupos acima
ou abaixo dos outros. Se quiser alterar a organização de guias de painel movendo-as
para grupos diferentes, selecione um painel clicando em sua guia e escolha Group
(nome painel) With no menu Options.
As lições neste livro assumem que você esteja utilizando a configuração padrão de pai-
néis no Dreamweaver 8, sem alterações na ordem ou no nome dos painéis e grupos de
painéis. Se reorganizou quaisquer ferramentas, você poderá reverter para a configuração
padrão escolhendo Window > Workspace Layout > Default (Macintosh) ou Window >
Workspace e selecionando Designer (Windows).
3. Escolha File > New e selecione HTML a partir da categoria de página Basic da guia
General.
Um novo documento XHTML abre com uma nova guia na janela de documentos atual.
30 LIÇÃO 1
Guias da janela de documentos Maximizar/Restaurar (Windows somente)
Usuários do Windows: Cascade, Tile Horizontally e Tile Vertically são três opções para
visualizar documentos. Se você abrir mais de uma janela Document por vez, a opção Cas-
cade fará com que essas janelas flutuem, empilhadas umas sobre as outras, dentro da parte
da janela Document do espaço de trabalho. A opção Tile Horizontally faz com que as ja-
nelas Document apareçam organizadas horizontalmente. A opção Tile Vertically faz com
que as janelas Document apareçam lado a lado verticalmente. Essas opções podem ser
acessadas no menu Window. Você também pode alternar para a visualização Tile clican-
do no botão de maximizar no canto superior direito da janela de documentos – não no
botão de maximizar para o programa inteiro. Clique no botão Maximize em uma janela
Document novamente a fim de voltar para o layout de guias.
Usuários do Macintosh: Cascade, Tile e Combine As Tabs são as três opções para visuali-
zação de documentos. A opção Cascade fará com que os documentos apareçam em jane-
las individuais que flutuam, empilhadas umas sobre as outras. A opção Tile fará com que
os documentos sejam exibidos em janelas individuais que aparecem lado a lado. Combine
As Tabs é o arranjo padrão – novos documentos aparecerão na mesma janela como docu-
mentos atuais com guias para cada um. Você pode abrir qualquer documento com guias
clicando com o botão direito do mouse (Windows) ou pressionando Control+clique
(Macintosh) na guia correspondente e escolhendo a opção Move To New Window.

Dando um título à página
Cada documento HTML que você cria precisa ter um título. O título é utilizado principal-
mente para identificação do documento. O título é exibido em uma barra de títulos do na-
vegador, indica o conteúdo de uma página e aparece como o nome do bookmark nas listas
de favoritos. Você deve escolher uma expressão informativa curta, começando com o nome
do site, que descreve o propósito do documento. Adquira o hábito de adicionar um título a
cada página que você criar antes de adicionar texto ou imagens a ela. Se você se esquecer, o
Dreamweaver intitula o arquivo como Untitled Document por padrão.
Para dar um título à sua página, clique na guia para o documento yoga.html e digite
Yoga Sangha Project no campo de texto Title na barra de ferramentas do documento.
Pressione Return (Macintosh) ou Enter (Windows) ou clique no documento yoga.html.
Se você não vir a barra de ferramentas de documento com o campo de texto

Title, escolha View > Toolbars > Document.
O campo de texto Title exibe inicialmente Untitled Document – você agora está substi-
tuindo esse título de marcador de lugar por um título para uma página no site de projeto.
Você também pode especificar o título de seu documento no campo de texto

Title localizado na categoria Title/Encoding da caixa de diálogo Page Properties. Para
acessar a caixa de diálogo Page Properties, escolha Modify > Page Properties.
32 LIÇÃO 1
Especificando navegadores de visualização
Ao desenvolver páginas Web, é necessário testar continuamente como seu trabalho apare-
cerá em diferentes navegadores, como o Internet Explorer e o Safari. O que você vê na janela
Document do Dreamweaver é apenas uma aparência aproximada de como as páginas serão
exibidas. Cada navegador possui diferenças na maneira como exibe as páginas Web e, em-
bora algumas dessas discrepâncias sejam pequenas, as diferenças às vezes podem ser muito
significativas. É possível notar diferenças até entre versões diferentes do mesmo navegador.
Quanto mais você testa seu site em vários navegadores e diferentes sistemas operacionais – e
faz alterações nas páginas correspondentemente – mais certo pode estar de que os visitantes
do site verão suas páginas como você desejava que elas aparecessem.
A caixa de diálogo Preferences no Dreamweaver permite que você especifique quais
navegadores deseja utilizar para visualizar as páginas no site. Para acelerar o processo,
você pode definir um navegador primário e um secundário, com um atalho de teclado
para cada um.
1. Escolha File > Preview in Browser > Edit Browser List.
Você também pode escolher Dreamweaver > Preferences (Macintosh) ou Edit

> Preferences (Windows) e selecionar Preview In Browser na lista Category, localiza-
da no lado esquerdo da caixa de diálogo, para abrir a mesma caixa de diálogo Preview
In Browser Preferences. Você também pode utilizar o comando de teclado Com-
mand+U (Macintosh) ou Ctrl+U (Windows) para abrir a caixa de diálogo Preferences.
A caixa de diálogo Preferences é aberta para exibir as preferências de Preview In Brow-

ser. O Dreamweaver pode listar automaticamente mais de um navegador em seu com-
putador.
No Windows, o Internet Explorer pode aparecer como iexplore ou iexplore.exe na

lista.

Ao clicar no nome de um navegador na lista de navegadores, as caixas de seleção abaixo
da lista mostram se esse navegador é principal ou secundário. Se você tiver mais de dois
navegadores, ele deixa ambas as caixas desmarcadas para mostrar que não é nenhum dos
dois.
A opção Preview Using Temporary File é desmarcada por padrão para quaisquer nave-
gadores na lista. Ao marcar essa opção, o Dreamweaver criará arquivos temporários ao vi-
sualizar páginas em um navegador.
2. Clique em OK para fechar a caixa de diálogo depois de terminar de revisar as prefe-

rências.
Você pode adicionar, modificar ou remover navegadores da lista se necessário.
Adicionando um navegador: Para adicionar um navegador à lista, clique no botão

de sinal de adição (+). Quando a caixa de diálogo aparece, navegue por seu disco rí-
gido para localizar e escolher um aplicativo do tipo navegador. Marque a caixa de
seleção Primary Browser se quiser carregar esse navegador pressionando Opti-
on+F12 (Macintosh) ou F12 (Windows) ao visualizar suas páginas. Marque a caixa
de seleção Secondary Browser se quiser visualizar seus documentos nesse navegador
pressionando Command+F12 (Macintosh) ou Ctrl+F12 (Windows). (Você visua-
lizará com freqüência as páginas que desenvolve enquanto estiver concluindo as li-
ções neste livro, então a utilização desses atalhos pode lhe poupar tempo.)
Suas teclas de função devem estar ativadas para os atalhos pelo teclado Pre-
view In Browser funcionarem. As teclas de função normalmente estão ativadas por
padrão; se elas não estiverem funcionando, verifique as preferências do seu sistema
operacional. Se suas teclas de função estiverem executando as funções do sistema,
você pode precisar pressionar Fn Key a fim de utilizar as teclas de função para o
Dreamweaver – ou ajuste as preferências do seu sistema.
Removendo um navegador: Para remover um navegador da lista, selecione o nome

do navegador na lista e, em seguida, clique no botão de subtração (–).
Para alterar uma escolha de navegador, selecione o nome de navegador na lis-

ta. Então, clique em Edit e localize um navegador diferente.
3. Clique na guia do documento yoga.html e pressione F12 para visualizar a página

no seu principal navegador.
Você também pode escolher File > Preview in Browser e selecionar o navega-
dor que deseja utilizar a partir do submenu. A barra de ferramentas de documento tam-
bém contém um botão Preview/Debug In Browser; clique nele para abrir o menu
pop-up e selecione o navegador em que você deseja visualizar sua página.
34 LIÇÃO 1
Botão Preview/ Debug in Browser
O navegador definido como principal nas preferências de Preview In Browser é ativado e

exibe o arquivo yoga.html em uma janela do navegador. Observe o título Yoga Sangha na
barra de título do navegador.
Neste ponto, seu navegador mostra uma página em branco. Você está pronto para co-
meçar a inserir conteúdo. Você adicionará texto a esse arquivo na próxima lição.
A menos que tenha clicado na caixa de seleção Don’t Show Again na página
inicial no início desta lição, a página inicial reaparecerá se você fechar todos os docu-
mentos abertos.
4. Salve o documento yoga.html. Feche e não salve o documento sem título.

Você pode deixar o documento yoga.html aberto para a próxima lição.
Explorando os princípios básicos por conta própria

Agora que aprendeu como planejar um Web site, configurou um site no Dreamweaver e
trabalhou tanto com páginas novas como com existentes, você está pronto para aplicar es-
sas habilidades e técnicas ao(s) seu(s) próprio(s) Web site(s).
1. Utilize as fases de planejamento e as perguntas para completar a pesquisa e de-

senvolver um resumo criativo (Creative Brief) para seu próprio site.
À medida que avança pelo processo, lembre-se de ser detalhista. Inicie o processo de de-
senvolvimento do seu site:
Considerando o propósito, os objetivos e o mercado para seu site

Explorando qual é o público e quais são suas necessidades
Avaliando o conteúdo e os recursos que já estão disponíveis
Determinando quais elementos precisarão ser criados
Desenvolvendo a estrutura do site
Configurando a estrutura dos arquivos
O Creative Brief é um documento em que você organiza a pesquisa e o trabalho que fo-
ram feitos no site na Fase 1. Isso pode lhe ajudar a coordenar os esforços nas etapas poste-
riores e, ao mesmo tempo, torna mais fácil permanecer focado no desenvolvimento do
site que você está criando.
2. Utilize a caixa de diálogo Site Definition para configurar seu site no Dreamweaver.
A configuração de site incluirá a criação da pasta-raiz local em que todos os arquivos do
site serão armazenados.

3. Utilize as páginas starter e designs disponíveis na caixa de diálogo New Document
para criar várias páginas de marcador de lugar dentro do seu novo site.
Você pode salvar essas páginas dentro da sua pasta-raiz local como marcadores de lugar
para conteúdo futuro.
Você também pode acessar esses recursos selecionando uma categoria da

seção Create From Samples na página inicial.
À medida que concluir as lições, você aprenderá a trabalhar com os vários elementos
que podem ser vistos nessas páginas starter, incluindo links, imagens e CSS.
Recursos recomendados
Livro: Web ReDesign 2.0: Workflow that Works de Kelly Goto e Emily Cotler publica-
do pela editora New Riders. © 2004 ISBN 0-7357-1433-9
Esse livro é uma excelente fonte de informações que pode lhe ajudar no processo do de-
senvolvimento de um Web site – seja criando um novo site a partir do zero ou reformu-
lando um site existente. O processo de desenvolvimento é claramente apresentado e
oferece algumas ferramentas e técnicas para desenvolver o fluxo de trabalho que me-
lhor servirá ao seu projeto – incluindo estudos de caso, formulários, listas de verificação
e planilhas.
Web: www.macromedia.com/resources/techniques
Um recurso Web criado em conjunto pela Macromedia e Kelly Goto, co-autor do Web
ReDesign: Workflow that Works, esse site apresenta um amplo espectro de artigos em
cada fase do desenvolvimento Web. Recursos adicionais estão incluídos nos fóruns
hospedados nesse site, como o Production Management Online Forum.
Livro: Don’t Make Me Think: A Common Sense Approach to Web Usability
(2a edição) de Steve Krug publicado pela da New Riders.
© 2005ISBN 0-3213-4475-8
A usabilidade é um fator-chave na criação de Web sites bem-sucedidos – esse livro in-
clui atenção à facilidade de uso e clareza. Explorando o senso comum dos aspectos so-
bre conceitos de usabilidade para a Web, esse livro oferece métodos para examinar seu
site e determinar se todas as partes desse site – navegação, layout, conteúdo e mais –
são utilizáveis para o público-alvo.
36 LIÇÃO 1
O que você aprendeu
Nesta lição, você:
Abriu o Dreamweaver
Aprendeu as fases do desenvolvimento de um Web site
Preparou-se para criar um Web site, configurou um site local e definiu a pasta-raiz
local
Criou uma nova página e salvou o documento utilizando as convenções adequadas
para atribuição de nomes
Familiarizou-se com o painel Insert do Dreamweaver, o inspetor Property, a janela
Document e outras ferramentas, janelas e painéis
Atribuiu um título à página
Especificou navegadores para visualização e utilizou atalhos pelo teclado para testar
sua página

Adicionando
conteúdo a
2 uma página
Nesta lição, você determinará a hierarquia de conteúdo baseada em texto para desen-
volver o fluxo do material em uma página. Esse é o próximo passo na criação de um
Web site – desenvolver a estrutura e a hierarquia do conteúdo. Estabelecendo e cons-
truindo a estrutura, você aborda o elemento básico do site: conteúdo. Especificar a es-
trutura utilizando os princípios abordados nesta lição lhe ajudará a criar um Web site
acessível, eficiente e mais flexível. Nos exercícios a seguir você criará o formulário por
meio do qual o Web site tomará forma. Você fará isso determinando a ordem de impor-
tância do conteúdo – agrupando e subdividindo as informações em áreas distintas.
Essas distinções ajudam a dar significado àquilo que o visitante verá e ajudam a criar
um site eficiente e bem organizado.
Nesta lição, você

trabalhará na home
page do site de
projeto Yoga Sangha
e aprenderá a
adicionar conteúdo e
desenvolver
estruturas de página
eficientes agrupando
os materiais.
ADICIONANDO CONTEÚDO A UMA PÁGINA 39

Esta lição ensina a importar texto que talvez tenha sido salvo em diferentes formatos
de arquivo, a tratar o recebimento de material proveniente de diferentes sistemas ope-
racionais e a abordar documentos multilíngüe. Você também aprenderá a configurar
propriedades de documento básicas, por exemplo, fonte e tamanho de texto e como
formatar texto em diferentes tipos de listas e incluir caracteres especiais como símbo-
los de direitos autorais.
Formatar texto é uma parte importante para facilitar a leitura das páginas Web pelos visi-
tantes. O texto pode ser um elemento vital nas suas páginas; invista tempo para organizar
e dispor o material de modo que os usuários possam interpretá-lo rápida e facilmente.
Você pode encontrar um exemplo da Lição 2 concluída na pasta Completed dentro da

pasta Lesson_02_Content no CD-ROM.

Posicionar o texto em uma página
Organizar conteúdo em seções lógicas
Posicionar e formatar o texto
Configurar padrões de fontes e cores para documentos
Inserir caracteres especiais e outros elementos
Criar documentos em múltiplos idiomas
Tempo aproximado
Arquivos da lição
Arquivos iniciais:
Lesson_02_Content/index.html
Lesson_02_Content/definitions.html
Lesson_02_Content/sanskrit.html
Lesson_02_Content/Text/home_mac.txt
Lesson_02_Content/Text/home_win.txt
Lesson_02_Content/Text/definitions_mac.txt
Lesson_02_Content/Text/definitions_win.txt
Lesson_02_Content/Text/sanskrit_terms.rtf
Projeto concluído:
Lesson_02_Content/Completed/index.html
Lesson_02_Content/Completed/definitions.html
Lesson_02_Content/Completed/sanskrit.html
40 LIÇÃO 2
Importando texto
Você pode adicionar texto a uma página de várias maneiras:
Digitando na janela Macromedia Dreamweaver Document.
Copiando e colando a partir de um outro aplicativo. Você pode abrir o Dreamwea-
ver e o aplicativo do qual você quer obter conteúdo e então copiar e colar (ou sele-
cionar e arrastar o texto ou elemento desejado) para o Dreamweaver.
Abrindo um documento HTML. Você cria documentos HTML a partir de vários
aplicativos, incluindo programas de processamento de texto como o Microsoft
Word. Para salvar um documento do Microsoft Word como HTML, abra o docu-
mento no Word e escolha Arquivo > Salvar como Página Web. Há alguns proble-
mas de codificação errada com a HTML gerada pelo Word. Esses problemas e suas
soluções são discutidos na Lição 16.
Abrindo arquivos de texto diretamente no Dreamweaver. Você pode utilizar o Dream-
weaver para abrir arquivos que foram criados em aplicativos de processamento de
texto ou de layout de página, desde que esses arquivos tenham sido salvos como ar-
quivos de texto ASCII (American Standard Code for Information Interchange). Os
arquivos de texto (.txt) sempre abrem em uma nova janela utilizando a visualização
Code no Dreamweaver. Depois de abrir um arquivo de texto no Dreamweaver, você
pode copiar e colar o texto necessário para outro documento.
Trabalhando com arquivos ASCII

Formatação simples, como parágrafos e quebras de linha, podem ser retidos ao impor-
tar texto a partir de arquivos de texto ASCII, mas para preservar adequadamente os for-
matos de linha você precisa levar em consideração as diferenças entre o formato ASCII
em diferentes plataformas. Os arquivos criados no Windows utilizam um caractere de
controle invisível chamado quebra de linha (LF – line feed) para indicar uma nova linha
dentro do texto, bem como retornos de carro (CRs – carriage returns). Computadores
Macintosh não utilizam o caractere de quebra de linha – somente CRs. O Unix utiliza so-
mente o caractere LF.
Para importar texto adequadamente de arquivos ASCII e reter a formatação de quebra
de linha, você precisa alterar as preferências Dreamweaver Line Break Type para corres-
ponder ao sistema operacional em que foram criados os arquivos de texto que você
quer importar.
Edite as preferências escolhendo Dreamweaver > Preferences (Macintosh) ou Edit >
Preferences (Windows) para exibir a caixa de diálogo Preferences e selecione Code For-
mat na lista Category. No menu pop-up Line Break Type, selecione o tipo de quebra de li-
nha – cada tipo é mostrado com o sistema operacional correspondente, assim você
pode selecionar aquele em que o arquivo de texto foi criado. No menu Line Break Code,
suas escolhas são CR LF (Windows), CR (Macintosh) e LF (Unix).
• Para usuários do Macintosh, o padrão é CR (Macintosh).
• Para usuários do Windows, o padrão é CR LF (Windows).

1. Utilize o Dreamweaver para abrir Lesson_02_Content/Text/home_mac.txt (Macin-
tosh) ou home_win.txt (Windows); em seguida, selecione e copie todo o texto. Abra o
arquivo Lesson_02_Content/index.html, certifique-se de que o documento seja exibi-
do na visualização Design, posicione o ponto de inserção na parte superior do docu-
mento e cole o texto copiado.
Para este exercício, escolha o documento criado no mesmo sistema operacio-

nal que você está utilizando. Você pode experimentar a importação de arquivos de tex-
to a partir de diferentes plataformas abrindo a versão desse documento criada na outra
plataforma; home_mac.txt foi criado em um computador Macintosh e home_win.txt
foi criado em um computador Windows. Se escolher experimentar esse arquivo adi-
cional por conta própria, lembre-se de que você precisará ajustar as preferências Line
Break Type de maneira correspondente, como descrito no quadro “Trabalhando com
arquivos ASCII” no início deste exercício.
O documento index.html é um documento XHTML semelhante àquele criado na Li-
ção 1. Para praticar mais o uso das ferramentas do Dreamweaver, você pode criar um
novo documento na pasta Lesson_02_Content e atribuir um título a ele, utilizando as ha-
bilidades aprendidas na lição anterior. É necessário salvá-lo com um nome diferente por-
que você não pode ter dois documentos com o mesmo nome na mesma pasta.
Você pode utilizar o menu Edit para copiar e colar o texto (escolha Edit > Copy and/or
Edit > Paste); ou pode utilizar os comandos comuns de teclado Cmd+C (Macintosh) or
Ctrl+C (Windows) para copiar e Cmd+V (Macintosh) ou Ctrl+V (Windows) para colar.
2. Salve o arquivo index.html e feche o arquivo home_mac.txt ou home_win.txt.

Você pode deixar o documento index.html aberto para o próximo exercício.
42 LIÇÃO 2
Identificando a estrutura do conteúdo
Configurar a hierarquia de um documento definindo a ordem do conteúdo da página é
um passo importante no processo de desenvolvimento do seu site. Neste exercício, e por
toda esta lição, você definirá a arquitetura do material por meio de algumas opções de for-
matação HTML, também conhecida como marcação estrutural. A maneira correta de uti-
lizar esse tipo de marcação é organizar e estruturar o conteúdo – não a estilização visual
do material. Formatação HTML é extremamente limitada em termos de design – você
não tem muito controle sobre tamanho, espaçamento e alinhamento porque as opções
são concebidas para descrever a hierarquia do documento, não para criar a aparência grá-
fica. Você vai trabalhar em tratamentos e ajustes visuais na aparência do conteúdo em li-
ções posteriores. É necessário desenvolver a estrutura, como você começará a fazer neste
exercício, antes de entrar nos detalhes estéticos.
Para controle específico sobre a aparência, é necessário utilizar Cascading

Style Sheets (CSS) a fim de definir o visual e o posicionamento dos elementos na sua
página. As CSS serão abordadas na Lição 4.
1. Na janela index.html Document, posicione o cursor no texto Yoga Sangha localiza-

do na parte superior da página.
Esse texto é o título principal dessa página.
2. No menu pop-up Format no inspetor Property, escolha Heading 1.

Você definiu o formato de texto como um título de Nível 1. O texto foi formatado como
um elemento no nível de bloco. Todas as opções escolhidas a partir do menu Format são
aplicadas a um bloco inteiro – um título ou qualquer outro tipo de formatação no nível de
bloco não pode ser aplicado a uma palavra individual ou a uma parte de um bloco. Como
resultado, não é preciso selecionar o texto para aplicar um título – todo o texto contido no
bloco de texto utiliza automaticamente a formatação selecionada no menu Format.
Outros elementos no nível de bloco incluem parágrafos, listas, linhas horizontais e as

opções de alinhamento disponíveis no inspetor Property. Você aprenderá a trabalhar
com essas ferramentas de formatação ao longo de toda esta lição.
Os títulos (headings) são exibidos em fontes maiores ou mais escuras que o corpo do
texto normal. A HTML tem seis níveis de títulos, numerados de 1 a 6. O título 1 tem o
maior tamanho de fonte, enquanto o título 6 tem o menor. Marcar um bloco de texto
como um título automaticamente gera um espaço em torno dele, que varia de acordo com
o título escolhido. Você não pode controlar esse espaçamento a menos que utilize a CSS
para controlar a formatação.

Exibição dos títulos 1 a 6
Os títulos podem ser úteis para dividir o conteúdo em seções e para chamar a atenção
para certas partes da página. Os usuários geralmente navegam pelas páginas Web rapida-
mente e não lêem tudo. Levar em consideração a maneira como os usuários interagem
com a Web ao projetar seu site o ajuda a desenvolver páginas que são muito mais fáceis de
o visitante utilizar. Formatar seu texto com títulos e outras técnicas utilizadas por todo o
restante desta lição permite diferenciar entre seu conteúdo e criar uma hierarquia clara.
Em muitos documentos, o título de primeiro nível (first heading) na página é

idêntico em conteúdo ao título (title). Em documentos com diversas partes, o texto do
título de primeiro nível deve conter informações relacionadas, como um título de capí-
tulo. O título que você configura para a página inteira deve identificar o documento em
um contexto mais amplo (por exemplo, incluir tanto o título de livro como o título de ca-
pítulo).
44 LIÇÃO 2
3. Utilize o menu Format no inspetor Property para configurar os outros títulos do do-
cumento. As linhas a seguir devem utilizar Heading 5:
Discover how playful and open-hearted yoga can be
[Descubra como a yoga pode ser divertida e autêntica]
Intro to Anusara Workshop With Sierra
[Introdução à palestra sobre Anusara com Sierra]
Anusara Yoga Immersion With Katchie Ananda and Jayne Hillman
[Imersão na yoga Anusara com Katchie Ananda e Jayne Hillman]
As linhas a seguir devem utilizar Heading 3:
Welcome to Yoga Sangha

[Bem-vindo à yoga Sangha]
Announcements (News, Upcoming Events etc.)
[Anúncios (notícias, próximos eventos etc.)]
Feature: The Eight Limbs of Yoga
[Apresentando: Os oito ramos da yoga]
Schedule [Horários]
Contact Us [Entre em contato conosco]
Seu documento agora estará formatado com todos os cabeçalhos apropriados e deve se
parecer com o exemplo a seguir.

4. Coloque o cursor no final da primeira linha do documento e pressione Return (Ma-
cintosh) ou Enter (Windows).
Você acabou de criar uma outra linha abaixo do título Yoga Sangha – essa linha faz parte
de um novo bloco de texto. Por padrão, o novo bloco de texto é formatado como um pa-
rágrafo. Cada novo parágrafo é seu próprio bloco de texto.
5. Digite Anusara Yoga in the Heart of San Francisco’s Mission District.

Geralmente, o formato de parágrafo é utilizado para corpo do texto regular e configurado
separadamente de outros blocos de texto por certa quantidade de espaçamento: uma li-
nha em branco separa o novo bloco de texto do anterior. Você não pode controlar esse es-
paçamento a menos que utilize CSS para controlar a formatação.
Você pode selecionar Paragraph no menu Format no inspetor Property ou utili-

zar o atalho pelo teclado Cmd+Shift+P (Macintosh) ou Ctrl+Shift+P (Windows) para
configurar a formatação de um bloco de texto para um parágrafo.
6. Salve o arquivo.
Sempre que modificar seu documento, observe o asterisco (*) que o Dreamweaver insere
ao lado do nome de arquivo na parte superior da janela Document. Esse asterisco indica
que o arquivo foi modificado, mas ainda não foi salvo. O asterisco desaparece depois que
você salva o documento. Certifique-se de salvar seus documentos freqüentemente para
evitar perda de trabalho.
Criando quebras de linha

Se quiser criar uma nova linha sem espaço entre ela e a linha de texto anterior (uma
única quebra de linha no texto), você pode utilizar uma quebra de linha. Essa técnica é útil
para uma linha de endereço; por exemplo, se quiser uma nova linha para cada linha no
endereço sem o espaçamento extra que os parágrafos criam.
1. Posicione o ponto de inserção no título Intro To Anusara Workshop, um pouco an-

tes de With Sierra. Pressione Shift+Return (Macintosh) ou Shift+Enter (Windows).
O texto depois do ponto de inserção move-se para a próxima linha. Uma quebra de linha,
não um novo parágrafo, foi criada, portanto nenhum espaçamento adicional aparece en-
tre as duas linhas.
Se utilizar duas quebras de linha, você poderá simular a aparência de um novo

parágrafo; entretanto, como, na verdade, não está criando um novo parágrafo, talvez
você tenha dificuldades ao tentar aplicar estilos de formatação ao texto que tem duas
quebras de linha em vez de um único retorno de parágrafo.
46 LIÇÃO 2
Espaçamento
de parágrafo
Quebra
de linha
Duas quebras
de linha
2. Posicione quebras de linha no seguinte texto, como a seguir:
Anusara Yoga Immersion (Inserir quebra de linha)

With Katchie Ananda and Jayne Hillman
3030-A 16th St. (Inserir quebra de linha)(between Mission and Valencia)

(Inserir quebra de linha) San Francisco, CA 94103
Email: info@yogasangha.com (Inserir quebra de linha)

Phone: 415-934-0000
Você também pode inserir uma quebra de linha escolhendo Insert > HTML > Special
Characters > Line Break ou selecionando a categoria Text na barra Insert, clicando o
menu pop-up Characters e selecionando Line Break. O ícone de caractere de quebra de li-
nha mostrado na barra Insert é BR porque a tag HTML para uma quebra de linha é <br> e
a tag XHTML para uma quebra de linha é <br/>. Você aprenderá mais sobre como traba-
lhar com esses e outras tags na Lição 16.
O menu pop-up Characters na categoria Text da barra
Inserindo um espaço não-separável

A HTML distingue um único espaço padrão – múltiplos espaços não são reconhecidos.
Um caractere especial chamado espaço não-separável (ou espaço incondicional) pode ser
utilizado quando você precisa criar um espaço entre duas palavras que não devem ser di-
vididas como resultado das quebras de linha de um texto. Um espaço não-separável evita-
rá que ocorra uma quebra de linha no ponto em que ela é inserida – o conteúdo antes e de-
pois do espaço especial ficará restrito à mesma linha. A localização em que a quebra de li-
nha acontece em um bloco de texto como resultado da disposição do texto em uma pági-
na Web pode variar enormemente dependendo de muitos fatores, incluindo tamanho de
fonte e o tamanho da janela do navegador do visitante. Utilizar um espaço normal entre

“Yoga” e “Sangha”, por exemplo, poderia resultar na palavra “Yoga” aparecendo no final
de uma linha e a palavra “Sangha” aparecendo no começo da próxima linha. Utilizar o es-
paço não-separável forçaria o navegador a manter essas duas palavras juntas.
O espaço não-separável foi utilizado para criar o efeito de múltiplos espaços, porque
você pode inserir mais de um espaço consecutivamente. É possível inserir espaços
não-separáveis no começo de uma linha de texto, mas não começar uma linha com um es-
paço padrão. Entretanto, é melhor utilizar outros métodos para controlar o layout, como
criar recuos de primeira linha com CSS. Espaços não-separáveis são mais bem utilizados
toda vez que você precisa inserir um espaço entre caracteres, palavras ou outros elementos
que não devem ser separados, como equações matemáticas, nomes e seus sufixos e datas.
1. No documento index.html, posicione o ponto de inserção entre as palavras Anusa-

ra e Yoga no final da primeira linha abaixo do cabeçalho “Discover how playful and
open-hearted yoga can be”.
Se pressionar a barra de espaço mais de uma vez, não há nenhuma alteração na quantida-
de de espaço entre as palavras, e apenas um único espaço permanece. Múltiplos espaços
não são reconhecidos.
Ponto de inserção do espaço não-separável
48 LIÇÃO 2
2. Exclua o espaço existente e então pressione Option+Barra de espaço (Macintosh)
ou Crtl+Shift+Barra de espaço (Windows) uma vez.
Você também pode inserir um espaço não-separável escolhendo Insert >

HTML > Special Characters > Non-Breaking Space ou selecionando a categoria Text
na barra Insert, clicando no menu Characters e selecionando Non-Breaking Space.
O espaçamento entre as palavras aumentará toda vez que inserir um espaço não-
separável.
Você pode permitir múltiplos espaços ao digitar alterando as preferências.

Escolha Dreamweaver > Preferences (Macintosh) ou Edit > Preferences (Windows) e
selecione a categoria General. Marque a caixa ao lado de Allow Multiple Consecutive
Spaces. Com essa opção ativada, o Dreamweaver utiliza espaços não-separáveis sem-
pre que você pressionar a barra de espaço mais de uma vez. Utilize essa opção com
cuidado porque a CSS é um método melhor de controlar espaçamento e layout.
3. Visualize index.html em um navegador. Expanda e reduza o tamanho da janela do

navegador para fazer com que a quebra de linha ocorra onde apareceria a divisão en-
tre as palavras Anusara e Yoga.
Observe como as palavras são mantidas na mesma linha – a quebra ocorre antes ou de-
pois, mas não onde o espaço não-separável está localizado.
A visualização de documentos do Dreamweaver em navegadores foi abordada

na Lição 1.
Alinhando texto
Há cinco opções básicas de alinhamento disponíveis: Default (padrão – nenhum alinha-
mento especificado), Align Left (alinhar à esquerda), Align Center (centralizar), Align
Right (alinhar à direita) e Justify (justificar). Default normalmente é (dependendo dos
padrões do navegador) o mesmo que Align Left. Essas opções especificam o alinhamento
horizontal de um elemento em relação ao container, que é um item que inclui outros ele-
mentos, como uma página inteira ou um parágrafo.
No index.html, posicione o ponto de inserção no cabeçalho Yoga Sangha na parte su-
perior da página. Clique no botão Align Center no inspetor Property.
Opções de
alinhamento de texto Align Center Align Right
no inspetor Property Align Left Justify

Agora o título está centralizado. Qualquer formatação de parágrafo que você aplicar a
um bloco de texto, como títulos ou alinhamentos, afetará tudo contido dentro desse pa-
rágrafo.
Melhores práticas de codificação:

O atributo de alinhamento tornou-se obsoleto
Na HTML 4.01, o atributo de alinhamento tornou-se obsoleto – o que significa que ele
está marcado para exclusão pelo W3C. O atributo de alinhamento aparece na tag do ele-
mento do bloco correspondente, desta maneira:
<h1 align=”center”>Yoga Sangha</h1>
Da mesma forma, especificar o alinhamento diretamente em um div (a tag <div> é um
tipo de marcação estrutural, freqüentemente utilizada junto com a CSS, utilizada para
definir seções de um documento) também se tornou obsoleto, como mostrado no
exemplo a seguir:
<div align=”right”>
A melhor maneira de alinhar elementos, como texto e imagens gráficas, nas suas pági-
nas é por meio do uso de CSS. Sempre que possível, utilize CSS – e evite as quatro op-
ções de alinhamento disponíveis no inspetor Property, porque elas utilizam o atributo de
alinhamento – a fim de criar páginas mais eficientes que seguem os padrões atuais.
O uso de CSS é abordado na Lição 4; o trabalho com código é discutido na Lição 16.
Identificando aspas
Há duas opções no inspetor Property – chamadas Text Outdent e Text Indent – cujos no-
mes podem, à primeira vista, ser enganosos. Elas não devem ser utilizadas como um mé-
todo de recuar texto mas, em vez disso, para significar texto entre aspas. Elas funcionam
incluindo um bloco de texto no que é chamado blockquote. Um blockquote (citação em
bloco) é um elemento no nível do bloco que indica que o texto que ele contém está entre
aspas – a aparência padrão de recuar o texto nas duas extremidades, daí o nome Text
Indent. Normalmente ele é reservado para longas passagens do texto entre aspas. O block-
quote não insere as aspas iniciais e finais em torno do texto – você precisará adicioná-las
ao próprio texto.
1. Posicione o cursor dentro do texto entre aspas que aparece acima do cabeçalho
Announcements e então clique em Text Indent no inspetor Property.
Você também pode escolher Text > Indent para aplicar um blockquote e, por-
tanto, recuar o texto selecionado.
50 LIÇÃO 2
Opções de recuo de texto Text outdent Text indent
no inspetor Property (Diminuir recuo) (Aumentar recuo)
O parágrafo agora aparece recuado tanto na margem esquerda como na direita. Block-
quotes são aplicados a parágrafos inteiros. A única maneira de controlar a quantidade
desse recuo é criando um estilo CSS para o elemento do blockquote – aplicar o blockquote
sem CSS utilizará o espaçamento padrão que é determinado pelo navegador e que pode
diferir entre navegadores.
Se parágrafos próximos também se tornarem recuados, verifique se você está

utilizando parágrafos ou duas quebras de linha. Para ter certeza de que está utilizando
um retorno de parágrafo, posicione o ponteiro no começo do parágrafo que você quer
recuar. Pressione Delete (Macintosh) ou Backspace (Windows) até alcançar o final do
parágrafo precedente e pressione Return (Macintosh) ou Enter (Windows) para criar
um novo parágrafo.
Se quiser recuar texto que não é uma citação para configurá-lo separadamente do cor-
po do texto padrão na página ou se você quiser recuar somente a primeira linha de um pa-
rágrafo, utilize a CSS (abordada na Lição 4).
2. Clique no botão Text Outdent no inspetor Property ou escolha Text > Outdent para
remover um blockquote.
Na XHTML, blockquotes devem conter elementos no nível do bloco, como pa-

rágrafos – não apenas texto. Para atender a esse requisito, o Dreamweaver manterá
automaticamente a formatação de parágrafo em torno do elemento original nos docu-
mentos XHTML.
Há alguns atributos adicionais que podem ser aplicados a blockquotes, incluindo
cite utilizado para especificar a origem do URL da citação, lang que indica o idioma da
citação e title utilizado para exibir uma dica de tela – uma mensagem curta que forne-
cerá ao usuário informações adicionais exibindo a mensagem quando o mouse rola so-
bre o blockquote. Esses atributos também podem ser aplicados a algumas outras tags.
Você pode adicionar atributos utilizando as ferramentas de codificação do Dreamwea-
ver, discutidas na Lição 16.

Criando listas
O Dreamweaver cria três tipos básicos de listas: ordenada, não-ordenada e de definição.
Uma lista ordenada (ordered list) consiste em itens de lista que são ordenados numérica ou
alfabeticamente. Você tem a opção de utilizar numerais arábicos ou romanos bem como
letras minúsculas ou maiúsculas. Listas ordenadas são ideais para situações em que você
precisa organizar e rotular itens claramente, como em uma lista de passos. Uma lista
não-ordenada é freqüentemente chamada de lista com marcadores (bulleted list) porque
cada item da lista tem um marcador na frente. O símbolo de marcador que o Dreamwea-
ver exibe por padrão pode ser alterado para um disco, círculo ou quadrado. Listas
não-ordenadas são ideais para apresentar informações em que cada item precisa ser dife-
renciado, mas números ou letras são desnecessários, como uma lista de tipos de alimen-
tos. Listas de definição são compostas de termos e definições; elas serão exploradas no pró-
ximo exercício.
Em todos os tipos de lista, cada item na lista precisa estar contido no próprio parágrafo
para que a lista seja formatada corretamente.
Neste exercício, você cria duas listas: uma ordenada e outra não-ordenada. Em segui-
da, você ajusta os estilos de lista utilizando a caixa de diálogo List Properties. Você irá tra-
balhar com uma lista de definição mais adiante nesta lição.
1. No index.html, selecione o texto que inicia com yama (restraints or moral codes) e
termina com samadhi (meditative absorption). Clique no botão Ordered List no inspe-
tor Property.
O texto selecionado agora está formatado como uma lista numerada.
Opções de lista Lista ordenada

no inspetor Property Lista não-ordenada
Há diversas opções disponíveis para listas. Você pode alterar o esquema de numeração
das listas ordenadas modificando as propriedades das listas, como será feito nos próximos
passos com uma lista não-ordenada.
Ao modificar uma lista ordenada, o tipo de lista ordenada é conhecido como Numbe-
red List no menu pop-up do tipo List da caixa de diálogo List Properties.
52 LIÇÃO 2
2. Selecione os dias e suas respectivas horas listadas sob o título Schedule. Clique
no botão Unordered List no inspetor Property.
Você também pode escolher Text > List > Unordered List para formatar o tex-
to selecionado como uma lista não-ordenada.
O texto selecionado é formatado como uma lista com marcadores.

Você pode alterar o símbolo padrão do marcador das listas não-ordenadas modifican-
do as propriedades da lista, descritas em mais detalhes a seguir. A aparência dos símbolos
de marcador pode variar entre navegadores, e todas as listas utilizam uma quantidade
configurada de espaçamento que pode variar de um navegador para outro. Você tem op-
ções limitadas no que diz respeito à aparência de números e letras, marcadores e espaça-
mento de lista – para obter maior controle sobre a aparência das listas, utilize as folhas de
estilo, abordadas na Lição 4.
Ao modificar uma lista não-ordenada, o tipo de lista não-ordenada é conhecido como
Bulleted List no menu pop-up do tipo List na caixa de diálogo List Properties.
Para remover a formatação da lista ou alternar para um tipo diferente de lista,

selecione a lista inteira e clique no botão da lista correspondente no inspetor Property
a fim de remover a formatação da lista (o ícone Ordered List se for uma lista ordenada
ou o ícone Numbered List se for uma lista numerada) ou o tipo de lista oposto para al-
ternar para esse tipo de lista.
3. Posicione o ponto de inserção no final da última linha na lista com marcadores e

então pressione Return (Macintosh) ou Enter (Windows). Digite Sunday [Domingo].
Ao adicionar texto a uma lista, você precisa utilizar um retorno de parágrafo regular a
fim de criar um novo bloco de texto para o item adicional. Cada item em uma lista deve
estar em um parágrafo separado.
Pressionar Return (Macintosh) ou Enter (Windows) duas vezes fecha o modo

de lista e inicia um parágrafo padrão.
4. Pressione Shift+Return (Macintosh) ou Shift+Enter (Windows) para criar uma que-

bra de linha e então digite 9-10:30am. Insira uma outra quebra de linha e digite
11am-12:30pm. Insira uma terceira quebra de linha e digite 6:15-7:45pm.
Se precisar criar uma ou mais linhas novas dentro do mesmo item você poderá utilizar
quebras de linha, como fez neste passo.

Seu documento deve ser semelhante ao seguinte exemplo.
5. Clique em qualquer linha na lista de marcadores; em seguida, clique no botão List

Item no inspetor Property.
Botão List Item
54 LIÇÃO 2
Se selecionar a lista inteira, o botão List Item permanecerá desativado e indisponível. Se o
botão List Item não estiver visível, clique na seta expansora no canto direito inferior do
inspetor Property.
Com o cursor na lista, você pode escolher Text > List > Properties para abrir a
mesma caixa de diálogo List Properties.
A caixa de diálogo List Properties é aberta. Nela, você pode escolher List Type ou o esti-
lo desejado a partir do menu pop-up Style. As opções no menu Style irão variar depen-
dendo se a lista for ordenada ou não-ordenada.
Caixa de diálogo List Properties
A área de item List na parte inferior da caixa de diálogo List Properties contém um
menu New Style que você pode utilizar para alterar a aparência de um único item ou de
vários itens em uma lista, em vez de alterar a organização e a aparência da lista inteira.
Também disponível nessa área está o Reset count para campo de texto, que permite alte-
rar a contagem da lista que inicia na linha em que o ponto de inserção é colocado.
O menu List type na caixa de diálogo List Properties contém dois tipos adicio-
nais de listas: Menu e Directory. Essas duas listas são variações mais antigas da lista
com marcadores; ambas têm propósitos semelhantes das listas não-ordenadas e, em
geral, são exibidas exatamente da mesma maneira que as listas não-ordenadas pela
maioria dos navegadores. Geralmente, é recomendado que você utilize a opção de lis-
ta com marcadores para todas as listas não-ordenadas.

6. No menu Style, escolha Square. Clique em OK.
As opções do
menu Style
na caixa
de diálogo
List Properties
Certifique-se de utilizar o menu Style, não o menu New Style. Se utilizar o menu New
style na área List item, sua alteração só será aplicada à linha da lista em que seu ponto de
inserção está localizado.
Agora, todos os itens na lista utilizam o símbolo de marcador quadrado.
A cor dos números e dos marcadores utilizada nas listas ordenadas ou

não-ordenadas está baseada no padrão de documento para a cor de texto. Você irá
configurar os padrões do documento na Lição 4, quando começar a trabalhar com
CSS. Cor, tamanho e outros atributos de aparência – incluindo o estilo dos marcadores
– são mais bem modificados por meio da CSS.
Deixe o documento index.html aberto – você retornará a ele mais adiante nesta lição.
Criando listas de definição

Uma lista de definição consiste em uma série de termos e definições. A palavra ou termo a
ser definido é alinhado à esquerda; a definição é recuada e posicionada na próxima linha.
Não há nenhum caractere inicial como há nas listas ordenadas e não-ordenadas.
1. Abra o documento definitions.html e selecione o texto que inicia com a linha Hatha
Yoga e continua até o final do documento. Escolha Text > List > Definition List.
Para praticar mais, crie um novo documento, salve-o na pasta Lesson_02_Con-

tent, atribua um título e importe o texto do documento definitions.html localizado na
pasta Text. O arquivo definitions.html foi criado em um Macintosh. Talvez você tam-
bém queira aplicar um cabeçalho ao título Yoga na parte superior do documento.
Os termos agora estão na margem esquerda e suas definições recuadas estão nas linhas se-
guintes.
56 LIÇÃO 2
Sua lista de definição deve se parecer com o seguinte exemplo.
2. Salve os dois arquivos definitions.html e index.html e visualize-os no navegador.

Agora que trabalhou na criação e formatação de todas essas listas, é um bom momento
para salvar seu documento. Deixe esses dois documentos abertos para trabalhar no res-
tante desta lição.
Aninhando listas
Você pode criar listas aninhadas, ou seja, listas dentro de listas. Listas aninhadas podem
ser do mesmo tipo que a lista pai ou podem ser de um tipo diferente. Por exemplo, uma
lista ordenada pode ser posicionada dentro de uma lista de definição. Por padrão, os mar-
cadores são exibidos como círculos preenchidos, círculos abertos e quadrados (nessa or-
dem) à medida que você aninha as listas. O Dreamweaver chama os tipos de marcadores
(bullet types) de: marcador (bullet), círculo (circle) e quadrado (square). A terminologia
HTML correspondente é disco, círculo e quadrado.
Alguns navegadores exibem marcadores quadrados abertos. Por exemplo, o Netscape
4.7 para Macintosh exibe quadrados abertos, mas o Internet Explorer 5.0 para Macintosh
exibe quadrados preenchidos. No Windows, os quadrados são preenchidos.

1. No documento index.html, selecione as linhas que iniciam com ahimsa até apari-
grapha.
Esses itens entram na categoria yama na linha anterior; portanto, você irá aninhá-los para
criar uma sublista.
2. Clique no botão Text Indent no inspetor Property.

Nessa situação, o botão Text Indent não aplica o blockquote ao texto selecionado. Em vez
disso, ele criou uma lista aninhada que recua os itens selecionados para o próximo nível.
Ao aninhar uma lista ordenada, os itens aninhados reiniciarão a contagem. Em uma lista
não-ordenada, os marcadores na lista aninhada aparecerão em um estilo diferente daque-
les na lista principal como círculos abertos. Você pode alterar o estilo utilizando a caixa de
diálogo List Properties como fez anteriormente para a lista principal.
Para alterar um item de um item aninhado para uma lista regular, posicione o
ponto de inserção dentro do item aninhado, mas não o selecione. Clique no botão Text
Outdent no inspetor Property.
Sua lista aninhada deve se parecer com o seguinte exemplo.
58 LIÇÃO 2
Da mesma maneira como recuou o texto, você não pode controlar ou ajustar o espaça-
mento de texto recuado à esquerda, de listas ou listas aninhadas.
Se uma linha em branco extra aparecer entre o último item na lista aninhada e o
seguinte item na lista principal, poderá haver uma quebra de linha que você pode ex-
cluir posicionando o ponto de inserção na linha em branco e pressionando Delete (Ma-
cintosh) ou Backspace (Windows). O último caractere na última linha da lista aninhada
pode ser excluído quando você faz isso – simplesmente redigite esse caractere.
Formatação de caracteres inline

Formatação inline é aplicada diretamente ao conteúdo em um ponto individual – esse
tipo de formatação é marcação no nível do texto, também conhecida como elementos de
frase. Um elemento de frase especifica as informações sobre a estrutura e o uso específico
dos fragmentos de texto para fornecer contexto em vez da estrutura de uma seção maior
do documento, como é o caso de elementos no nível do bloco. Você pode aplicar algumas
opções de formatação ao texto que cria no Dreamweaver para enfatizar certos pontos, pa-
lavras ou frases. As duas opções mais comuns a configurar são negrito e itálico.
1. No definitions.html, selecione o primeiro termo na parte superior da lista Hatha

Yoga.
Você aplicará formatação em negrito ao texto selecionado.
2. Clique no botão Bold no inspetor Property.
Bold Italic
Você também pode escolher Text > Style > Bold ou clicar no botão Bold na categoria Text
da barra Insert para aplicar o formato de negrito ao texto selecionado. Os atalhos pelo te-
clado são Cmd+B (Macintosh) e Ctrl+B (Windows).
Se suas preferências estiverem configuradas para isso, quando você utiliza o inspetor
Property para aplicar formatação em negrito, o Dreamweaver irá dispor as tags <strong>
e </strong> em torno do texto selecionado. De maneira semelhante, quando você aplica
formatação itálica, o Dreamweaver coloca as tags <em> e </em> (indicam ênfase) em torno
do texto selecionado. O Dreamweaver utiliza as tags strong e emphasis, chamadas de mar-
cação lógica porque afetam o conteúdo tanto conceitual como visualmente, em vez das
tags de negrito e itálico (<b>, <i>), chamadas de marcação física porque afetam somente a
aparência visual. A marcação lógica é mais flexível e acessível a um público mais amplo –
ela representa a função daquele texto, em vez de fornecer informações decorativas, o que é
feito mais apropriadamente por meio de CSS.

A formatação em itálico é aplicada da mesma maneira – basta utilizar o botão Italic no
inspetor Property.
Outras opções de formatação incluem Underline, que insere uma linha abaixo do tex-
to; Teletype, que coloca o texto em uma fonte monoespaçada; e Strikethrough, que exibe
texto com uma linha atravessando-o.
Tenha cuidado ao utilizar a formatação de sublinhado nas suas páginas Web.

Uma das maneiras mais comuns de especificar um link em uma página Web é com um
sublinhado. Utilizar o estilo sublinhado para texto que não seja um link pode confundir
potencialmente seus visitantes. Há outras maneiras de diferenciar texto incluindo ta-
manho, cor e espaçamento – todas as quais você aprenderá na Lição 4. Reconhecer e
aplicar práticas Web padrão tornará seu site mais limpo e mais prontamente acessível
aos espectadores. Evite o uso de estilos ou elementos de uma maneira que possa fa-
zer com que eles sejam facilmente confundidos com outros usos e significados.
3. Repita a formatação em negrito para cada um dos termos restantes na lista de defi-
nição.
Muitas vezes, talvez seja preciso repetir a ação mais recente, como a formatação definida
em outro parágrafo ou outro texto selecionado. O comando Redo reduz essa tarefa a um
simples pressionamento de teclas. Os primeiros dois itens listados no menu Edit são os
comandos Undo e Redo. Lembre-se destes atalhos pelo teclado:
Undo: Cmd+Z (Macintosh) e Ctrl+Z (Windows)

Redo: Cmd+Y (Macintosh) e Ctrl+Y (Windows)
Você pode utilizar o painel History para acelerar as ações que repete freqüen-
temente. Para acessar o painel History, escolha Window > History. Você pode sele-
cionar uma série de ações nesse painel e clicar no botão Save Selected Steps As
Command no canto inferior direito do painel ou escolher Save As Command no menu
de contexto no canto superior direito do painel. Se quiser uma maneira rápida de in-
serir fragmentos de código freqüentemente utilizados, utilize os Snippets (aborda-
dos na Lição 16).
60 LIÇÃO 2
Painel
History
Botão Save Selected

Steps As Command
Salve e feche o documento definitions.html.
Adicionando caracteres especiais

À medida que trabalhar no Dreamweaver, às vezes você precisará utilizar caracteres que
não pode acessar diretamente do teclado. Esses caracteres especiais têm códigos HTML
específicos ou comandos alternativos pelo teclado que talvez sejam difíceis de lembrar.
1. No index.html, posicione o ponto de inserção no começo do último parágrafo, an-

tes de 2005 Yoga Sangha.
Freqüentemente, as páginas Web contêm rodapés com as informações sobre direitos au-
torais na parte inferior. Esses rodapés também tendem a conter links de texto às seções
principais do site para propósitos de navegação e acessibilidade. Os rodapés às vezes tam-
bém contêm informações de contato.
2. Escolha a categoria Text a partir da barra Insert. Clique no menu Characters e cli-
que no caractere © (copyright, ou direitos autorais) para incluí-lo.
O menu Characters pode ser acessado clicando na seta preta à direita do ícone.
O caractere © (copyright, ou direitos autorais) é inserido na nova linha quando você
clica no ícone no menu Characters.
Como ocorre com outros menus na barra Insert, o ícone que representa o menu Cha-
racters mudará com base no último item selecionado no menu.
Talvez você receba um alerta de que caracteres especiais podem não aparecer
em todos os navegadores dependendo da codificação do seu documento. No próximo
exercício ensinaremos como alterar a codificação.

Usuários do Macintosh: Se você não vir o ícone/menu Characters na categoria Text da
barra Insert, talvez precise expandir a barra Insert. Para isso, clique e arraste o canto infe-
rior direito a fim de estender a barra horizontalmente.
O menu Character
A categoria Text na barra Insert O símbolo de direitos autorais
Embora o menu Characters na categoria Text da barra Insert forneça acesso rá-
pido a boa parte dos caracteres mais comuns que você talvez precise, ele não fornece
uma lista que englobe tudo. Se o caractere que deseja utilizar não estiver disponível no
menu Characters, você ainda pode encontrá-lo clicando na opção Other Characters na
parte inferior do menu ou escolhendo Insert > HTML > Special Characters > Other. Ao
selecionar um caractere na caixa de diálogo Insert Other Character, o código HTML
correspondente aparece no campo de texto no canto superior esquerdo da caixa de
diálogo. Depois de clicar no caractere desejado, clique em OK.
Deixe o documento index.html aberto.
62 LIÇÃO 2
Criando documentos em vários idiomas
Para criar documentos em vários idiomas que utilizem alfabetos com caracteres que dife-
rem daqueles que você utiliza na maioria das vezes, você precisará ajustar a codificação de
cada página e saber qual(is) conjunto(s) de caracteres é(são) necessário(s) para sua pági-
na. Um conjunto de caracteres é um grupo de caracteres que foi combinado para um pro-
pósito específico, como caracteres que compõem um alfabeto. Um sistema de codificação
é o método por meio do qual os caracteres nesse conjunto foram mapeados para os bytes
de dados que os representam.
1. Abra sanskrit.html na pasta Lesson_02_Content. Escolha Modify > Page Proper-

ties e selecione a categoria Title/Encoding. Do menu pop-up Encoding, selecione Uni-
code 4.0 UTF-8 (Macintosh) ou Unicode (UTF-8) (Windows). Clique em OK para fechar
a caixa de diálogo.
Você pode deixar o restante das opções nessa caixa de diálogo configurado como seus pa-
drões.
Talvez você receba uma caixa de diálogo de alerta informando que a codifica-
ção selecionada não tem todos os caracteres utilizados na codificação original. Clique
em Apply para confirmar e aplicar a nova codificação.
As opções Title/Encoding na caixa de diálogo Page Properties
Selecionando o tipo de codificação
A codificação padrão utilizada no Dreamweaver é Western ISO (Latin 1), que abrange
a maioria dos idiomas ocidentais. (ISO significa International Standards Organization.)

A codificação Western ISO (Latin 1), também conhecida como ISO-8859-1 (La-
tin 1), talvez não seja o padrão para versões internacionais do Dreamweaver.
O Unicode é um conjunto de caracteres universal que inclui a maioria dos caracteres de

um grande número de idiomas. Ele é concebido para funcionar como um superconjunto
da maioria dos outros conjuntos de caracteres, permitindo que um único documento
contenha caracteres de diversos idiomas – ele é multilíngüe e multiplataforma. Você pode
utilizar a codificação UTF-8 (Unicode Transformation Format 8) para exibir caracteres
de vários alfabetos. Ele é compatível com ASCII, que é o formato comumente utilizado
em documentos .txt, como você aprendeu anteriormente nesta lição. O UTF-8 é suporta-
do pelo Windows 2000 e Macintosh OS X – embora talvez ainda seja preciso fornecer um
link para fazer o download de uma ou mais fontes Unicode e/ou especificar fontes Unico-
de específicas. Navegadores e sistemas operacionais mais antigos podem não suportar o
UTF-8.
Talvez seja necessário utilizar a codificação UTF-8 se você precisar de caracteres que
não estejam no alfabeto latino ocidental (ou vice-versa, dependendo do idioma), como o
alfabeto japonês Katakana (palavras estrangeiras) e/ou o alfabeto Hiragana (palavras ja-
ponesas). É recomendável utilizar caracteres de outros alfabetos nos seus documentos se
sua empresa tiver um ambiente multilíngüe ou oferecer serviços em mais de um idioma.
Neste exercício, você aprenderá a fazer isso trabalhando com palavras em sânscrito,
utilizando o alfabeto devanagari.
2. Na pasta Text, abra sanskrit_terms.rtf em um aplicativo como TextEdit (Macintosh)

ou WordPad (Windows), selecione tudo, copie e cole no documento sanskrit.html.
Seu documento deve ser semelhante ao exemplo mostrado aqui.
64 LIÇÃO 2
Para importar texto que utiliza caracteres de outros alfabetos, você precisará copiá-lo
de outro documento, como fez neste exercício, ou você mesmo criá-lo utilizando kits de
idiomas que fornecem acesso a outros conjuntos de caracteres por meio de menus de en-
trada ou diretamente a partir do teclado.
O Macintosh OS X fornece suporte a um grande número de idiomas. Você pode modi-
ficar suas configurações atuais e acessar os diferentes idiomas por meio da seção Internatio-
nal das System Preferences. O menu Input permite selecionar a maneira como você quer
trabalhar com caracteres diferentes – por exemplo, pelo teclado ou uma paleta de entrada.
O Windows 2000 e versões superiores do Windows suportam múltiplos idiomas por
meio do Unicode.
3. Salve o documento sanskrit.html e visualize-o em um navegador.

Talvez você queira testar a página em vários navegadores – nem todos suportam o uso de
Unicode.
Um método alternativo de exibir conteúdo em outros idiomas e alfabetos é uti-

lizar imagens gráficas. Mas imagens podem fazer com que as modificações sejam
muito mais lentas – o texto tem a vantagem de ser atualizável rápida, fácil e diretamen-
te no Dreamweaver. Texto é mais acessível, flexível e portável que imagens.
Você pode fechar o documento sanskrit.html.
Adicionando linhas horizontais

Uma linha horizontal vai de um lado a outro da página e estabelece uma divisão visual en-
tre seções do seu conteúdo. Pode ser útil ao identificar a estrutura de um documento e
fornecer designações claras para cada parte do material. Neste exercício, você adicionará
uma linha horizontal acima das informações sobre direitos autorais.
Posicione o ponto de inserção em frente do caractere de direitos autorais, que você in-
seriu anteriormente, próximo da parte inferior do documento index.html. Na categoria
HTML na barra Insert, clique no botão Horizontal Rule.
O botão Horizontal rule
Se a barra Insert não estiver visível, escolha Window > Insert. Você também
pode clicar no documento e escolher Insert > HTML > Horizontal Rule.

Depois de inserir a linha horizontal, ela é selecionada na janela Document. Ela é posi-
cionada um pouco acima das informações sobre direitos autorais, que são reduzidas a
uma linha abaixo da linha horizontal. A linha horizontal tem uma quantidade configura-
da de espaço acima e abaixo da linha; você não pode controlar a quantidade de espaça-
mento, a menos que utilize CSS.
O inspetor Property mostrará os atributos da linha horizontal quando ele é seleciona-
do. As opções incluem especificar um ID, largura e altura, unidades de medida em pixels
ou porcentagem, sombreamento, alinhamento horizontal e a capacidade de aplicar CSS
por meio do menu Class.
Atributos de linha horizontal no inspetor Property
As opções de tamanho e de alinhamento disponíveis no inspetor Property utilizam tags

que são obsoletas na HTML 4.0 e versões posteriores. É melhor utilizar CSS para controlar
a aparência, como você aprenderá na Lição 4.
Embora a cor da linha horizontal talvez ainda apareça como o padrão cinza no
Dreamweaver – mesmo tendo modificado utilizando de CSS – você deve ver proprie-
dades aplicadas à linha horizontal com CSS no navegador.
Adicionando uma data automaticamente

Às vezes, você pode precisar monitorar a última data que modificou uma página no seu
site ou pode querer que seus visitantes vejam quando as informações sobre sua página fo-
ram atualizadas pela última vez. O Dreamweaver permite colocar data e hora nas suas pá-
ginas para monitorar essas informações. O Dreamweaver pode atualizar data e hora auto-
maticamente todas as vezes em que você salva a página com ele; portanto, não é preciso fa-
zê-lo manualmente.
Essa data não é uma data dinâmica que muda de acordo com a data e/ou hora
que o usuário acessa a página. Essa data simplesmente informa os seus usuários
quando suas páginas foram atualizadas. Datas dinâmicas que exibem a data e/ou hora
atual costumam ser geradas com JavaScript. Você pode aprender mais sobre Java-
Script na Lição 8.
1. Posicione o ponto de inserção no final do parágrafo de informações sobre direitos

autorais, insira uma quebra de linha e digite Updated:.
Essas informações são freqüentemente mostradas no canto direito superior dos sites de
notícias ou exibidas na parte inferior de uma página em outros sites informativos.
66 LIÇÃO 2
2. Selecione a categoria Common na barra Insert e clique no botão Date para inserir a
data atual na página.
Você também pode escolher Insert > Date para abrir a caixa de diálogo Insert
Date.
Data
A caixa de diálogo Insert Date abre.
3. No menu Day format, escolha a opção Thursday. No menu de formato Date, esco-
lha March 7, 1974. No menu de formato Time, escolha 10:18 PM. Marque a caixa de se-
leção Update automatically on save para atualizar a data na sua página todas as vezes
em que você salva seu documento. Clique em OK.
O dia, a data e a hora atuais são exibidos, e essas informações mudam todas as vezes em
que você salva o documento. Thursday (quinta-feira) é utilizado como um exemplo na
caixa de diálogo Insert Date de como o dia aparecerá no seu documento. A data e hora são
também exemplos.

Se a data estiver configurada para atualizar automaticamente, você pode alte-
rar o formato em qualquer momento depois de inseri-la. Para alterar seu formato, cli-
que na data no seu documento e clique em Edit Date Format no inspetor Property. A
caixa de diálogo Insert Date é aberta. Faça as alterações apropriadas e então clique em
OK. Suas alterações são aplicadas ao documento. O formato de datas que não atualiza
automaticamente não pode ser editado por meio da caixa de diálogo – para atualizar
essas datas, você terá de excluir e reinserir a data ou você mesmo terá de alterar o tex-
to na janela Document.
Você pode salvar, visualizar e fechar o documento index.html.
Formatando conteúdo por conta própria

Agora que aprendeu a estruturar suas páginas utilizando as técnicas de formatação que
podem ajudar a organizar e priorizar conteúdo, você está pronto para aplicar essas habili-
dades a suas próprias páginas. Você precisará utilizar o trabalho de pesquisa e desenvolvi-
mento que criou na seção “Explorando os princípios básicos por conta própria” da Li-
ção 1 como base para criar o conteúdo para seu site. Depois que o site tiver texto, comece a
incorporar o material a páginas criadas no Dreamweaver, conforme descrito nos passos a
seguir.
1. Crie quantas páginas HTML separadas forem necessárias e importe o conteúdo

correspondente nelas.
Utilize a estrutura de site que você desenvolveu no final da Lição 1 como guia para deter-
minar quantas páginas precisam ser criadas, onde elas devem residir na estrutura dos ar-
quivos e o conteúdo que deve entrar em cada página.
2. Aplique títulos para fornecer estrutura a cada página e inclua quebras de linha, pa-
rágrafos e espaços não-separáveis conforme necessário.
Utilizar combinações de parágrafos e níveis diferentes de título o ajudará a definir as se-
ções dos seus documentos. Incorporar elementos decorativos e de design que você apren-
derá a utilizar nas lições posteriores será muito mais fácil se tiver uma estrutura claramen-
te definida em cada um dos seus documentos.
3. Incorpore aspas, listas, caracteres especiais, formatação de caracteres inline e ele-

mentos multilíngües onde necessário, conforme vimos nesta lição.
Você pode salvar essas páginas dentro da sua pasta-raiz local como marcadores de lugar
para conteúdo futuro.
68 LIÇÃO 2
Aprendeu a configurar preferências de texto e importar texto de diferentes maneiras
Estruturou texto utilizando combinações de títulos e parágrafos
Incorporou quebras de linhas e espaços não-separáveis para controlar o fluxo do
conteúdo
Utilizou a ferramenta Text Indent para especificar adequadamente o material entre
aspas
Criou três tipos de lista e modificou suas propriedades
Aplicou formatação de caracteres inline em negrito e itálico ao conteúdo selecionado
Adicionou caracteres especiais à página
Trabalhou com conteúdo multilíngüe para incluir caracteres a partir de outros con-
juntos de caracteres
Adicionou uma data à página e a configurou para ser atualizada todas as vezes em
que a página é salva

3 Criando links
A força dos Web sites como mídia única provém da sua capacidade de conectar texto e
imagens a outros documentos por meio de links que não são seqüenciais ou lineares.
O navegador pode destacar essas regiões (normalmente com cores ou sublinhados)
para indicar que elas são links.
Um link em HTML tem duas partes: o nome e o caminho (ou Uniform Resource Loca-
tor, URL) do arquivo ao qual você quer vincular e o texto ou imagem que serve como a
área clicável. Quando o usuário clica em um link, o navegador carrega o documento
vinculado. Em alguns navegadores, o caminho do link é exibido na área de status da ja-
nela do navegador (localizada na parte inferior esquerda da janela) quando o ponteiro é
posicionado sobre o link. Links podem direcionar o usuário a outros arquivos HTML,
imagens e outras mídias e arquivos descarregáveis – você trabalhará com links basea-
dos em texto nesta lição e continuará aplicando o que aprendeu para outras mídias à
medida que avança nas outras lições.

criará um site de
teste funcional que
inclui marcadores de
lugar para o site de
projeto Yoga Sangha
inteiro com links
navegacionais.
CRIANDO LINKS 71
Nesta lição, você desenvolverá a base inicial da estrutura do site criando marcadores
de lugar para as páginas no site de projeto Yoga Sangha. Você vinculará essas páginas
utilizando as ferramentas visuais de mapeamento de site do Dreamweaver para criar
um site de teste funcional. Criar esse tipo de estrutura por meio de páginas e links em
uma versão básica, mas funcional, do site pode ajudá-lo a testar a navegação desenvol-
vida. Testar a estrutura proposta do site antes de criar o design lhe ajudará a encontrar
problemas fundamentais no início do desenvolvimento, permitindo resolvê-los mais
eficientemente.
Para ver um exemplo das páginas concluídas, visualize os arquivos na pasta Les-
son_03_Links/Completed.

Especificar as cores do link de acordo com o estado do link
Criar links no texto para outros documentos
Utilizar âncoras para pular para diferentes partes da página
Criar links de e-mail
Tempo aproximado
Esta lição deve levar aproximadamente duas horas para ser concluída.
Arquivos da lição
Arquivos iniciais:
Lesson_03_Links/index.html
Lesson_03_Links/definitions.html
Lesson_03_Links/sanskrit.html
Projeto concluído:
Lesson_03_Links/Completed/… (todos os arquivos)
72 LIÇÃO 3
Especificando as cores e os formatos dos links
Você pode especificar a cor padrão dos links de texto na sua página. Escolher uma cor de
link que se destaque do corpo do texto regular no documento permite aos espectadores
identificar os links facilmente. As propriedades de link padrão do seu documento são es-
pecificadas por meio da caixa de diálogo Page Properties.
Se você não especificar as cores de link, os padrões do navegador serão utilizados quan-
do a página é exibida no navegador do usuário. Esses padrões podem variar dependendo
do navegador.
Ao começar a trabalhar no visual do seu site, é melhor levar em consideração todo o es-
quema de cores do site. Ao decidir os estilos e cores utilizados por todo o site, você pode
alterar as cores dos links de modo que sejam consistentes com as cores utilizadas em ou-
tras partes das páginas. As cores escolhidas devem contrastar (mas não conflitar) com o
fundo e com outros elementos de modo que os links possam ser lidos claramente.
O Dreamweaver pode controlar a aparência dos links por meio de Cascading

Style Sheets (CSS) a fim de configurar as propriedades de cores, o tipo e o tamanho da
fonte que se aplicam somente a links. Um estilo de link CSS é conhecido como pseu-
doclasse, que é um tipo de estilo criado com parâmetros que só serão aplicados sob
circunstâncias específicas. CSS é abordada na Lição 4.
1. Abra o documento index.html, localizado na pasta Lesson_03_Links. Escolha Mo-

dify > Page Properties (Cmd-J/Ctrl-J) e então selecione a categoria Links.
Para este exercício, você deve deixar a opção Link Font na seleção padrão (Same As Page
Font). Com essa configuração, os links na sua página herdam as propriedades dos estilos
que você irá configurar para seu documento na próxima lição.
Se aplicar um estilo CSS ao texto em que um link está localizado – como você
fará na próxima lição – o link herdará as propriedades desse estilo em vez dos estilos
padrão do documento.
CRIANDO LINKS 73
Há diferentes estados de um link: os que foram e os que não foram clicados. É possível
especificar atributos de aparência para cada estado de um link. Você tem a opção de defi-
nir cores para até quatro estados diferentes de link com base nas ações do usuário.
Link Color: A cor inicial de um link, antes de ele ser clicado. A cor padrão dos nave-
gadores para um link é azul.
Visited Links: A cor que o link recebe quando um usuário já clicou nele antes. A cor
padrão dos navegadores para um link visitado é roxa.
Rollover Links: A cor que o link recebe enquanto o usuário pausa o ponteiro sobre
ele. Serve como mais um indicador de que o item é clicável. Nenhum rollover é utili-
zado se isso estiver em branco.
Active Links: A cor do link quando o mouse está sendo pressionado. Links ativos
podem servir ao visitante como um indicador interativo de que o link está sendo cli-
cado, embora, como resultado da velocidade crescente com que os usuários aces-
sam a Web, o link ativo não seja mais tão importante quanto costumava ser. Nenhu-
ma cor ativa é utilizada se isso for deixado em branco.
Os estilos de links CSS controlam a tag de link (<a>) com atributos específicos
para os diferentes estados que podem ser aplicados ao link. Os diferentes estados da
tag <a> são ativados quando um usuário realiza uma ação como clicar no link. Os esta-
dos são definidos por meio dos seletores CSS a seguir: a:link para a cor de link;
a:visited para links visitados; a:hover para links de rollover; e a:active para links
ativos.
2. Utilize os campos de texto ao lado das caixas de cores a fim de selecionar as cores
dos seus links digitando #FF3300 para Link color, #FF9900 para Rollover Links color,
#993300 para Visited Links color e #FFCC00 para Active Links.
74 LIÇÃO 3
Se souber os valores hexadecimais – códigos que são utilizados na Web para representar
cores – das cores que deseja usar, você poderá inserir os números diretamente nos campos
de texto de cores de links. O Dreamweaver preenche automaticamente a caixa de cores
com o swatch de cores correspondente. Você também pode clicar na caixa de cores locali-
zada à esquerda do campo de texto para exibir uma paleta com diversas amostras de cor.
Se escolher uma amostra de cor nessa paleta, o Dreamweaver preencherá automatica-
mente o campo de texto com o valor hexadecimal equivalente, que é exibido na parte su-
perior da paleta à medida que você rola pelas amostras de cores. Ao utilizar a paleta de co-
res, o mouse transforma-se em um seletor de cores, que você pode usar para escolher
qualquer cor visível na tela rolando pela área desejada e clicando para selecionar a cor.
Esse método permite igualar facilmente as cores existentes em outros documentos, ima-
gens e mídias.
Para obter mais cores, clique na seta localizada no canto superior direito da ja-
nela pop-up de cor e escolha outro tipo de paleta de cores. Lembre-se de que outras
paletas não estão limitadas às cores seguras para a Web em várias plataformas. Cores
seguras para a Web são um conjunto de 216 cores idênticas tanto em sistemas opera-
cionais Macintosh como Windows. Embora as opções de cor nessa paleta sejam ex-
tremamente limitadas, utilizar cores seguras para a Web garante que usuários com sis-
temas que utilizam 256 cores – muito menos comuns agora que várias pessoas têm
placas de vídeo capazes de exibir milhões de cores – possam ver suas páginas com as
cores pretendidas. Dispositivos de acesso a Web alternativos, como PDAs, ainda utili-
zam um número limitado de cores; portanto, talvez você queira utilizar cores seguras
para a Web se estiver desenvolvendo sites para serem acessados por esses dispositi-
vos. Esse é um exemplo de por que é importante investir tempo para pesquisar o pú-
blico do seu site – como aprendeu na Lição 1 – e determinar os sistemas e as configu-
rações mais comuns que a maioria desse público possivelmente tem.
CRIANDO LINKS 75
Entendendo códigos hexadecimais para cores
Cores são definidas no código hexadecimal utilizando RGB: red (vermelho), green (ver-
de) e blue (azul). O hexadecimal é um sistema de numeração com base 16 que utiliza os
dígitos 0 a 9 e as letras A a F. No código de seis dígitos utilizado em HTML para descre-
ver cor, os primeiros dois dígitos representam vermelho, os dois dígitos seguintes re-
presentam verde e os últimos dois dígitos representam azul. Por exemplo, #00FF00 não
tem nenhum vermelho, tem um verde brilhante e nenhum azul; #000000 não tem ne-
nhum vermelho, nenhum verde e nenhum azul – é preto. Inversamente, #FFFFFF indica
os níveis máximos de vermelho, verde e azul, que combinam para exibir branco em sua
tela. Lembre-se de que as telas dos computadores utilizam luz para exibir as cores que
você vê. As propriedades das cores da luz (que está baseada em um sistema aditivo, em
que todas as cores são combinadas para criar branco) são muito diferentes das proprie-
dades dos pigmentos utilizados em mídias de impressão (baseadas em um sistema sub-
trativo, em que todas as cores são combinadas para criar preto). O sinal de tralha(#), tam-
bém conhecido como jogo da velha, indica que o que segue é um valor hexadecimal e
não uma cor identificada (como preto, branco, vermelho e assim por diante).
Embora o Dreamweaver aceite um valor inserido sem o sinal de libra, é melhor in-
cluí-lo. Ao utilizar a caixa de cores para selecionar uma amostra, observe que o sinal de
tralha é incluído.
Considere as cores padrão de link, listadas para cada estado de link no Passo 1 desse
exercício, quando você selecionou as cores para o link. Pode ser confuso aos visitantes se,
por exemplo, você decidir utilizar uma cor roxa semelhante à cor padrão de link visitado
como sua cor de link padrão (ainda não clicado). Ao projetar um site, é importante levar
em consideração o que se tornou convenção padrão da Web e entender quais são as ex-
pectativas dos seus visitantes.
A última opção na seção Links da caixa de diálogo Page Properties é a definição do es-
tilo Underline a ser utilizado na página. Para este exercício, você deixe a seleção de
menu configurada como o padrão: Always Underline (sempre sublinhar). As outras op-
ções nesse menu são: Never Underline, Show Underline Only on Rollover e Hide
Underline on Rollover. Você pode utilizar a opção Never Underline para remover o pa-
drão de sublinhado que aparece em todos os links; entretanto, lembre-se de levar em
consideração as expectativas dos seus visitantes ao criar Web sites. Muitos usuários se
acostumaram com a aparência sublinhada convencional dos links. Se remover o subli-
nhado, seus usuários talvez menosprezem os links e deixem escapar informações. Inver-
samente, se sublinhar outras palavras no seu texto, os usuários talvez tentem clicar ne-
las, esperando que sejam links.
76 LIÇÃO 3
3. Clique em OK para fechar a caixa de diálogo Page Properties e então salve o arqui-
vo index.html.
As cores de link padrão para sua página agora são aquelas que você especificou. Você verá
essas cores em uso ao começar a criar links no próximo exercício.
Mantenha o documento index.html aberto para trabalhar nos exercícios a seguir.
Criando links de hipertexto

Links de hipertexto oferecem a capacidade de direcionar o visitante a documentos dentro
do seu Web site ou a qualquer outro local na Web. Links criados dentro do mesmo site são
chamados links relativos, que conectam a arquivos em qualquer número de localizações
dentro da estrutura de pastas de um único site. Há vários métodos para criar esse link. O
exercício a seguir demonstra esses métodos.
Lembre-se de que é importante salvar os novos documentos antes de criar quaisquer
links. Salvar um arquivo instrui o Dreamweaver o local em que seu documento está e per-
mite determinar os caminhos dos links. O Dreamweaver precisa determinar a localização
do arquivo vinculado em relação ao arquivo em que você está colocando o link. Se tentar
criar um link sem salvar seu documento pela primeira vez, esses caminhos iniciam com
file: // e não funcionam em sites remotos porque são relativos ao seu disco rígido – não ao
arquivo em que o link está contido. Embora o Dreamweaver atualize automaticamente os
links quando você salva um arquivo, é melhor evitar a possibilidade de caminhos proble-
máticos que possam causar problemas.
1. No documento index.html, selecione a palavra Yoga no início da linha Yoga is a

4.000 year-old…
Essa linha está localizada na seção Welcome to Yoga Sangha no início do documento.
Você criará um link desse termo à página com definições de diferentes estilos de yoga.
Os arquivos iniciais desta lição são cópias daqueles que você tem trabalhado
nas lições anteriores. As versões finais são fornecidas aqui para sua conveniência –
elas foram criadas utilizando as técnicas aprendidas até agora neste livro.
CRIANDO LINKS 77
Ao criar sites, escolha cuidadosamente o idioma que você utiliza para indicar links.
Evite a frase “clique aqui” porque isso não é claro e pode causar vários problemas, incluin-
do dificuldades navegacionais. Por exemplo, visitantes com deficiências visuais talvez não
sejam capazes de distinguir entre múltiplos links “clique aqui”– especialmente se você es-
tiver utilizando um navegador de áudio – talvez seja difícil para eles navegarem. Além dis-
so, quando usuários pesquisam as páginas procurando links interessantes, normalmente
observam o sublinhado que indica os links. Ver “clique aqui” em vez de uma descrição
clara pode dificultar esse processo. Sempre seja específico ao criar frases que contêm links.
Por exemplo, ao direcionar os leitores a um documento com o qual podem aprender dife-
rentes estilos de yoga, você talvez queira utilizar “aprender mais sobre diferentes estilos de
yoga (caso em que “estilos de Yoga está vinculado); o link real é mais descritivo e informa-
tivo do que “clique aqui para aprender mais sobre estilos de yoga” (caso em que “clique
aqui” está vinculado).
2. No inspetor Property, clique no botão Browse For File à direita do campo de tex-
to Link.
Campo de texto Link Botão Browse for File
A caixa de diálogo Select File se abre.
3. Selecione o arquivo definitions.html na pasta Lesson_03_Links e clique em Choose

(Macintosh) ou em OK (Windows).
O nome do arquivo definitions.html aparece no campo de texto Link, e o texto seleciona-
do no documento index.html agora está marcado como um link. Esse link é sublinhado e
aparece na cor que escolheu para links no primeiro exercício desta lição.
Você pode sobrescrever facilmente a cor padrão do link da página para links in-
dividuais selecionando o texto vinculado e escolhendo uma cor no inspetor Property.
O Dreamweaver cria automaticamente um novo estilo CSS para essa cor. Com esse
método, o estilo CSS criado pelo Dreamweaver é um estilo interno, que você aprende-
rá mais na Lição 4.
78 LIÇÃO 3
Esse link é um exemplo de um caminho relativo ao documento, que é a melhor opção a
utilizar para links locais na maioria dos Web sites e é o tipo utilizado por todo este livro.
Um caminho relativo ao documento omite a parte do URL absoluto que é a mesma do
documento atual e para o documento vinculado; portanto, ele utiliza somente a parte do
caminho que difere. Um URL absoluto é aquele que fornece o endereço Web inteiro de
um site ou recurso, como http://www.yogasangha.com. O caminho para o documento
vinculado é determinado em relação à localização do documento em que o link está conti-
do como o ponto de partida. Um caminho para um arquivo na mesma pasta, por exem-
plo, é expresso como nome_de_arquivo.html. Um caminho para um arquivo em uma
subpasta se pareceria com isto: name_do_arquivo/nome_do_arquivo.html.
Por outro lado, um caminho relativo à raiz do site é determinado em relação à pasta-raiz do
site como o ponto de partida e não é baseado na localização do documento atual. O documento
vinculado é especificado de acordo com sua localização dentro da estrutura do site.
4. Na seção Feature: The Eight Limbs of Yoga, posicione o cursor no final da linha
para o item 8 na lista numerada. Pressione Return (Macintosh) ou Enter (Windows)
duas vezes digite See the Sanskrit text for the Eight Limbs. Repita os Passos 1 a 3 para
vincular a palavra Sanskrit ao arquivo sanskrit.html na pasta Lesson_03_Links.
Como aprendeu na Lição 2, é necessário pressionar Return ou Enter duas ve-

zes para sair de uma lista; utilizar apenas um retorno de parágrafo criaria um novo item
na lista.
Se souber os nomes e localizações dos arquivos para os quais precisa criar um link, você
poderá digitar seus caminhos diretamente na caixa de texto Link em vez de navegar até
encontrá-los; mas deixar que o Dreamweaver crie os caminhos reduzirá a possibilidade de
erros de digitação.
Se precisar utilizar os mesmos links várias vezes na mesma sessão – uma sessão
é o momento em que você manteve o Dreamweaver aberto até o momento em que fe-
chou o programa – você poderá economizar tempo escolhendo os links recém-utilizados a
partir do menu pop-up à direita do campo de texto Link no inspetor Property.
Editar o destino de um link é um processo simples: clique em qualquer lugar dentro de

um link existente e faça as alterações desejadas para o valor no campo de texto do link no
inspetor Property alterando o caminho no campo de texto ou clicando no ícone Browse
for File. Você não precisa selecionar o link inteiro porque o Dreamweaver automatica-
mente impede que links se tornem aninhados um dentro do outro – um link não pode ser
colocado dentro de outro link. O texto que você escolhe para aplicar um link é definido
pelas tags HTML que o cercam; portanto, qualquer alteração feita no link é automatica-
mente aplicada a todo o texto contido dentro dele (entre as partes de abertura e fecha-
mento da tag <a> que denota links de todos os tipos). Você aprenderá mais sobre tags
HTML na Lição 16.
CRIANDO LINKS 79
5. Selecione o texto www.yogasangha.com ao lado da parte inferior do documento.
Digite http://www.yogasangha.com no campo de texto de link no inspetor Property e
pressione Return (Macintosh) ou Enter (Windows) para aplicar o link.
Você criou um link absoluto que direcionará os usuários para um site fora do site de pro-
jeto.
6. Salve o arquivo index.html e o visualize no navegador. Feche o arquivo index.html.

Os três links que você acabou de criar devem levá-lo às páginas correspondentes. Sempre
teste seus links para certificar-se de que eles vão aos locais corretos!
Se a página inicial aparecer, você poderá fechá-la.
Você pode visualizar seu documento no navegador pressionando F12 para

abrir uma janela do navegador primário definida na Lição 1. Talvez seja necessário utili-
zar uma tecla modificadora se suas teclas de função estiverem ativadas para opera-
ções de sistema.
Entendendo links e estrutura de arquivos

Os links que você cria dependem do arquivo e da estrutura de pastas do seu site. É bom
entender como os caminhos funcionam ao criar links. A ilustração a seguir é um exemplo
de uma possível estrutura de site.
Ao criar um link para qualquer documento que exista fora da pasta em que o docu-
mento atual está localizado, o caminho para o link incluirá os caracteres ../ precedendo o
nome do arquivo. ../ é um comando que informa o navegador para subir um nível de pas-
ta a partir do local atual. Cada instância de ../ indica mover para cima um nível de pasta;
talvez você tenha algo semelhante a ../../nome_do_arquivo.html para vincular a um do-
80 LIÇÃO 3
cumento que está localizado dois níveis de pasta acima do diretório atual. Por exemplo,
no exemplo anterior, o caminho de um link da página books.html para a página
about.html seria ../../about.html. No Dreamweaver, você não precisa utilizar os caracteres
../ a menos que esteja inserindo links digitando-os diretamente no campo de texto Link.
Se não estiver seguro do caminho adequado, você deve pesquisar e selecionar o arquivo
desejado. O Dreamweaver determinará o caminho apropriado para você.
Você também observará que há diversos arquivos index.html na estrutura anterior do
site de exemplo. O nome do arquivo index é um nome padrão para o arquivo padrão de
uma pasta ou diretório em muitos servidores. Esses arquivos padrão não precisam ser es-
pecificados no URL. O visitante é automaticamente levado ao arquivo padrão de uma
pasta se nenhum arquivo for especificado. No exemplo anterior, um usuário simplesmen-
te poderia digitar o nome de domínio seguido por /gardens para obter a página de índice
dentro da pasta gardens. O nome de arquivo index.html é o mais comum, mas outros no-
mes para arquivos padrão incluem default.html e home.html. Muitos tipos de extensões
podem ser utilizados, mas seu servidor talvez precise ser configurado para reconhecer os
arquivos de índice com extensões além de .html ou .htm. Verifique com seu servidor ou
host para descobrir como ele é configurado.
Quando você cria um link para um documento que existe na mesma pasta do docu-
mento atual, o caminho para o link será o nome do documento vinculado. Quando você
cria um link para um documento que existe em uma pasta dentro de uma pasta em que o
documento atual está localizado, o caminho para o link inclui nome_da_pasta/ preceden-
do o nome de arquivo. nome_da_pasta/ instrui o navegador a examinar a pasta especifi-
cada, e essa pasta está localizada dentro do diretório atual.
À medida que desenvolve seu site, você talvez descubra que é necessário mover arqui-
vos ou até mesmo pastas inteiras para diferentes locais. Utilizando o exemplo anterior, su-
ponha que você mova containers.html para dentro da pasta indoors. Quaisquer links ou
outros caminhos incluídos ao documento containers.html precisam ser atualizados, bem
como links de outros arquivos desse documento. Se esses caminhos não forem atualiza-
dos, os caminhos são “quebrados” – o que significa que links e imagens não mais funcio-
narão. À medida que você move arquivos, o Dreamweaver atualiza automaticamente os
caminhos para todos os links, imagens e outros tipos de mídia no seu site, contanto que
você faça todas as alterações dentro do painel Files do Dreamweaver. Se fizer alguma alte-
ração fora do Dreamweaver, como por meio do Finder do Mac OS X ou por meio do Win-
dows Explorer, o Dreamweaver não terá nenhuma maneira de monitorar ou manter seus
arquivos.
Usuários do Macintosh podem utilizar Command+clique no nome de arquivo

na barra de título do documento para visualizar a hierarquia das pastas do disco rígido
ao arquivo.
CRIANDO LINKS 81
Adicionando novas pastas e arquivos a um site
Para criar o esqueleto inicial da estrutura do site por meio do desenvolvimento de páginas
marcadoras de lugar vinculadas no site de projeto Yoga Sangha, você precisará criar algu-
mas novas páginas e pastas. Isso pode ser feito rápida e facilmente a partir do painel Files,
que permite configurar a estrutura de arquivos e pastas de um site. Você pode criar ime-
diatamente páginas que atuam como marcadores de lugar e adicionar o conteúdo a elas
posteriormente.
1. Clique no botão Expand na barra de ferramentas do painel Files no painel Files.
Se o painel Files não estiver visível nos painéis, talvez você precise escolher
Window > Files.
Botão Expand
Expanda para mostrar sites locais e remotos.

O botão Expand está localizado no lado direito da barra de ferramentas, acima da lista
de arquivos. Você aprenderá mais sobre as outras opções e ferramentas no painel Files na
Lição 14.
2. No painel Files expandido, verifique se Yoga Sangha está selecionado no menu

Show. Abra a pasta Lesson_03_Links mostrada na coluna Local Files clicando na seta
(Macintosh) ou ícone de sinal de adição (Windows).
82 LIÇÃO 3
O menu Show só é visível no Windows se você estiver em um site. Se estiver
visualizando apenas uma unidade (como F:), você só obterá o link Manage Sites.
A coluna Local Files está localizada no lado direito do painel Files expandido. A coluna
Remote Site no lado esquerdo do painel não contém nenhum arquivo porque nenhum
site remoto foi definido. Você aprenderá mais sobre como fazer isso na Lição 14.
Você pode ajustar a quantidade de espaço dentro do qual os arquivos são exibi-
dos movendo a barra que separa as duas extremidades do painel Files expandido.
3. Clique com o botão direito do mouse (Windows) ou clique com a tecla Control
pressionada (Macintosh) na pasta Lesson_03_Links.
Talvez você queira fechar outras pastas de lição, se houver alguma aberta, para
dar mais espaço ao painel Files e tornar mais rápido rolar pelo conteúdo do site.
CRIANDO LINKS 83
Um menu de contexto é aberto, exibindo diversas opções. As opções disponíveis por
meio desse menu variam, dependendo do que está selecionado. O menu de contexto é
uma maneira rápida de acessar várias funções do Dreamweaver e pode ajudar a acelerar
sua produção.
4. Escolha New Folder no menu de contexto.

Uma nova pasta sem título é adicionada dentro da pasta Lesson_03_Sites. Como você
acabou de criar a nova pasta, o nome é destacado e exibido com uma linha grossa em tor-
no do campo de texto para indicar que você pode nomear a pasta.
84 LIÇÃO 3
5. Digite about e então pressione Return (Macintosh) ou Enter (Windows) para no-
mear a nova pasta.
A nova pasta exibe o nome que você acabou de atribuir.
Clicar em outra parte no painel Files faz com que o nome seja desmarcado. Se
isso acontecer, e se você ainda precisar identificar a pasta, clique no nome da pasta,
dê uma pausa e então clique nela novamente. Selecionar o título permite editá-lo. Não
dê um clique duplo; isso fará com que a pasta se abra.
6. Clique com o botão direito do mouse (Windows) ou clique com a tecla Control
pressionada (Macintosh) sobre a pasta que acabou de criar dentro da pasta Les-
son_03_Links no painel Files.
Você está clicando na pasta em que criará um novo arquivo no próximo passo.
O menu de contexto se abre.
CRIANDO LINKS 85
Se você criar equivocadamente um novo arquivo na pasta errada, poderá ex-
cluí-lo com o menu de contexto, escolhendo Edit > Delete. Usuários do Windows tam-
bém podem utilizar os menus ao longo da parte superior do painel Files, bem como o
menu de contexto.
7. Escolha New File no menu de contexto.

Um novo documento sem nome é criado na pasta About. O campo de nome é destacado,
indicando que você precisa digitar um nome para esse documento.
8. Dê ao novo arquivo o nome de studio.html.
Ao criar novas pastas no painel Files, elas não abrirão a menos que haja arqui-
vos dentro delas. Talvez você precise abrir a pasta antes de conseguir nomear o arqui-
vo. Pressione Return (Macintosh) ou Enter (Windows) para aplicar a alteração de nome
de arquivo.
Não se esqueça de manter a extensão .html no nome de arquivo. Todos os documentos

criados em um site devem ter a extensão apropriada para seu tipo de documento de modo
que os navegadores possam reconhecê-los.
86 LIÇÃO 3
Se os nomes dos seus arquivos forem muito longos para a coluna Local Files,
eles podem parecer estar cortados, o que é simplesmente resultado do espaço limita-
do de exibição no painel Files. Você pode ver o nome de arquivo completo pausando o
ponteiro sobre o arquivo e esperando que o nome apareça, ou ajustando as posições
das colunas. Clique e arraste as linhas verticais que separam os títulos de coluna para
ajustá-las.
9. Repetindo os Passos 6 a 8, adicione os seguintes arquivos dentro da pasta about:

contact.html, newsletter.html, news.html, location.html, anusara.html e index.html.
Agora deve haver sete arquivos XHTML na pasta about. Lembre-se de que arquivos
XHTML ainda utilizam a extensão .html.
Como aprendeu anteriormente nesta lição, cada pasta pode conter seu próprio arquivo
index.html. Utilizar um arquivo index.html assegura que, se um visitante inserir apenas o
nome da pasta como www.yogasangha.com/about, o arquivo index.html será exibido.
O nome mais comum para um documento padrão do diretório é index.html;

entretanto, dependendo do servidor Web utilizado no seu ambiente, ele pode ser qual-
quer outro (default.html, index.cfm, index.jsp ou index.asp só para citar alguns).
10. Repetindo os Passos 3 a 8, crie as seguintes pastas e arquivos subseqüentes

que essas pastas precisam conter:
Nome de pasta Arquivos

schedule [horários] – faq.html, events.html, download-schedule.html,
index.html
teachers [professores] jayne.html, katchie.html, serra.html, index.html
community [comunidade] – outreach.html, mission.html, green.html, forums.html,
index.html
training [treinamento] – anusara-training.html, instructors.html,
training-schedule.html, application.html, resources.html,
login.html, index.html
explorations [explorações] – philosophy.html, sequences.html, meditations.html,
media.html, educational.html, index.html
CRIANDO LINKS 87
Agora, você terminou de criar marcadores de lugar para cada página no site de projeto
Yoga Sangha e está pronto para começar a vinculá-los. As pastas e arquivos no painel Files
agora devem se parecer com o seguinte exemplo.
88 LIÇÃO 3
Criando um mapa de site
Um mapa de site é uma representação visual de uma parte selecionada do site. Ele não exi-
be todas as páginas do site; em vez disso, ele inicia com uma página definida como a home
page e mostra todas as páginas às quais a home page vincula. O mapa do site continua
para baixo na hierarquia de links até alcançar uma página sem saída – uma página sem
links. Se você tiver páginas “órfãs” que não podem ser alcançadas por meio de caminhos
diretos a partir da home page, elas não serão exibidas no mapa do site.
1. No painel de Files, clique com o botão direito do mouse (Windows) ou clique com a
tecla Control pressionada (Macintosh) no arquivo index.html localizado na pasta Les-
son_03_Links e escolha Set as Home Page no menu de contexto.
Você está selecionando a página de índice de primeiro nível na pasta Lesson_03_Links

como a home page – a página principal do site de projeto.
Você não verá o resultado desse comando até que ative o mapa do site. Agora que defi-
niu a home page, você pode alternar para a visualização de mapa de site. Uma home page
deve ser criada para dar ao mapa do site um ponto de partida.
CRIANDO LINKS 89
2. Clique no botão Site Map na barra de ferramentas e escolha Map Only no menu
que aparece.
Botão
Site Map
O botão Site Map também funciona como um menu – se clicar e segurar, um

menu aparecerá por meio do qual você pode selecionar a visualização Map Only ou a
visualização Map e Files. Se redimensionar o painel Files na visualização Map Only,
você talvez veja a parte dos arquivos da janela aparecer.
Neste ponto, você deve ver um mapa com os documentos index.html, definitions.html,
sanskrit.html e um ícone de link externo representando o link yogasangha.com.
O mapa do site é uma representação gráfica do seu site; a home page, index.html, é exi-
bida no nível superior do mapa do site. Um link de uma página para outra é indicado por
uma linha desenhada do arquivo contendo o link para cada página a qual ele está vincula-
do. Pontas de seta nas extremidades dessa linha apontam para cada página vinculada.
Os novos arquivos criados no exercício anterior não são exibidos no mapa porque a
página index.html não contém nenhum link para esses arquivos – bem como os arquivos
ao quais index.html está vinculado. No próximo exercício, você começará a criar esses
links e os arquivos começarão a aparecer no mapa.
Com o painel Files na visualização expandida, você pode ajustar a visualização

Map escolhendo View > Site Map Options > Layout no menu do painel Files (Win-
dows) ou no menu Options do painel Files (Macintosh). A caixa de diálogo Site Defini-
tion se abre. Para exibir as opções Site Map Layout, clique na guia Advanced. Por pa-
drão, o Dreamweaver exibe o mapa do site horizontalmente. Você pode alterar o nú-
mero a largura de colunas a fim de que o mapa do site ajuste-se em uma única página
para visualização mais fácil – talvez você queira fazer isso se a home page tiver muitos
links e houver espaço suficiente no mapa do site para mostrar todas as páginas.
90 LIÇÃO 3
Trabalhando com links na visualização Site Map
Você pode adicionar ou excluir links por meio do mapa do site do painel Files.
Você pode controlar quais arquivos exibir no mapa do site escolhendo mostrar
ou ocultar arquivos vinculados individuais. Ocultar os arquivos fará com que eles per-
maneçam ocultos apenas na visualização Map – eles ainda estarão visíveis na lista Lo-
cal Files. Você também pode fazer alterações nos arquivos adicionando ou excluindo
links. Para ocultar ou exibir um arquivo vinculado, clique com o botão direito do mouse
(Windows) ou clique com a tecla Control pressionada (Macintosh) no link que você
quer modificar e escolha Show/Hide Link. Você pode escolher View > Show Hidden Fi-
les do menu do painel Files (Windows) ou do menu Options do painel Files (Macintosh)
para exibir todos os arquivos ocultos. O nome do arquivo será escrito em itálico para in-
dicar que ele é um link oculto – você pode então clicar com o botão direito do mouse
(Windows) ou clicar com a tecla Control pressionada (Macintosh) nos arquivos ocultos
e escolher Show/Hide Link.
1. Escolha Map e Files a partir do menu Site Map. Selecione o ícone para o arquivo in-
dex.html no painel de visualização Map, clique no ícone Point To File e arraste até o
ícone para o arquivo index.html na pasta about. Solte o botão do mouse quando o ar-
quivo index.html file tornar-se destacado.
Ícone Point To File

Botão Site Map
À medida que você arrasta, o ponteiro torna-se uma seta e um ícone Point To File.
Uma linha azul é desenhada à medida que você arrasta do arquivo index.html de primeiro
nível para o arquivo index.html que está contido na pasta about. Ao liberar o ponteiro, o
arquivo index.html localizado na pasta about aparece na visualização Site Map. O link foi
inserido no documento index.html de primeiro nível. Se abrir o documento index.html
de primeiro nível, você verá o link.
CRIANDO LINKS 91
Você também pode adicionar, remover e alterar links utilizando o submenu
Site > Site Map View, acessível por meio do menu do painel Files (Windows) ou pelo
menu Options no lado superior direito do painel Files (Macintosh).
2. Repita o Passo 1 para criar os links a partir do arquivo index.html de primeiro nível
para os arquivos index.html restantes na pasta a seguir: schedule, teachers, commu-
nity, training e explorations.
Pairar o mouse sobre um arquivo exibido no mapa mostrará uma dica de tela, exibindo o
nome e a localização do arquivo. Selecionar um arquivo na visualização Map destacará a
mesma pasta na visualização Files e vice-versa.
Neste passo, você vinculou a página principal do site, index.html, às páginas principais
de cada seção – os arquivos index.html que estão localizados em cada uma das pastas.
Links criados dessa maneira aparecerão na mesma linha – um depois do outro – abaixo
de qualquer conteúdo preexistente no documento e utilizarão o nome do arquivo para o
texto do link na página. Nesse caso, o nome de arquivo index.html não é muito descritivo,
portanto você aplicará os links à área de navegação no próximo passo.
3. Abra index.html na pasta Lesson_03_Links. Selecione o primeiro link de índice na

parte inferior da página. Então, selecione o texto no campo Link no inspetor Property.
Selecione a palavra About na lista das seções um pouco acima das informações de di-
reitos autorais e cole o link copiado no campo Link no inspetor Property.
92 LIÇÃO 3
Nesta lição, você está criando os links navegacionais principais na parte inferior da página
no documento index.html. Em um site completamente funcional, você repetiria esse con-
junto de links em cada documento. Manter links navegacionais consistentes por todo um
site – no mesmo lugar em cada página – torna mais fácil que os visitantes naveguem por
um site. Nas lições mais adiante, você criará o sistema de navegação principal que será uti-
lizado na parte superior de todas as páginas no site de projeto.
4. Repita o Passo 3 para os links e seções correspondentes para as seções Schedule,

Teachers, Community, Training e Explorations. Exclua a linha dos links de índice na
parte inferior da página, salve e feche o arquivo.
Certifique-se de examinar a localização do link no campo de texto de link no inspetor
Property ao copiar os links a fim de aplicar o link de índice correto à seção correspondente
– se fechou o Dreamweaver entre a criação das pastas anteriormente nesta lição e neste
exercício, o painel Files talvez tenha sido atualizado em ordem alfabética. Portanto, os
links de índice talvez não estejam na mesma ordem da lista de seções.
Os links navegacionais agora deixam claro para onde levarão o visitante.
Se a página inicial abrir, você pode fechá-la.
5. Repita o Passo 1 para criar links a partir do arquivo index.html na pasta schedule
para todos os outros documentos na pasta schedule.
Neste passo, você vinculou a página principal da seção schedule, schedule/index.html,
para o restante das páginas da seção schedule.
CRIANDO LINKS 93
As páginas que contêm links são exibidas no mapa de site com um sinal de adição (+)
ou subtração (–) um pouco à esquerda do arquivo. Clicar no sinal de adição exibe uma lis-
ta dos links contidos no documento, cada um com seu próprio sinal de adição. Links que-
brados (aqueles que não funcionam) são exibidos em vermelho. Links externos, como
links de e-mail e URLs são azuis e indicados com um pequeno globo.
6. Repita o Passo 5 para os arquivos nas pastas restantes: about, teachers, commu-
nity, training e explorations.
Agora você tem um site de teste com muitos dos links que permitem navegar pelo site e
testar a navegação e a estrutura do site. Para completar esse site de teste, você precisará
adicionar links, a partir de cada arquivo index.html nas seis pastas, ao arquivo de índice de
primeiro nível e também adicionar links a partir de cada página em uma pasta ao arquivo
index.html na mesma pasta. Depois de fazer isso, o mapa do seu site deve se parecer com o
exemplo a seguir.
Visualizando um subconjunto do site inteiro

À medida que seu site torna-se maior e mais complexo, o mapa do site talvez se torne mui-
to grande para ser visualizado no painel Files. Você pode refinar a visualização para mos-
trar somente uma página selecionada e seus links.
1. No mapa de site do painel Files, selecione a página index.html dentro da pasta

about.
Visualizar o documento index.html da pasta about como um subconjunto permitirá
que você focalize quaisquer páginas que podem ser acessadas com about/index.html
como o ponto de partida – o que pode ser útil se você tiver um site grande.
2. No menu do painel Files (Windows) ou no menu Options no lado superior direito do

painel Files (Macintosh), escolha View > Site Map Options > View as Root.
94 LIÇÃO 3
Você também pode configurar a opção View as Root clicando com o botão di-
reito do mouse ou utilizando Control-clique no arquivo para acessar o menu de contex-
to, no qual você pode escolher a opção View As Root.
O mapa do site muda para mostrar a página about/index.html como a raiz (o nível supe-
rior da visualização de mapa) junto com seus links (o segundo nível). Abaixo da barra de
ferramentas Files há uma barra cinza que exibe a hierarquia do site, começando com o ar-
quivo que você configura como a home page e terminando com o arquivo que você esco-
lheu visualizar como a raiz do site. Neste exercício, você deve ver index.html > in-
dex.html. Talvez você veja uma seta vermelha um pouco depois do arquivo index.html
nessa barra se não houver espaço suficiente para exibir o caminho do arquivo completo.
Essa navegação estrutural de site funciona da mesma maneira como a navega-

ção breadcrumb, utilizada em vários sites. Os breadcrumbs* mostram aos visitantes o
caminho hierárquico da página principal do site à página em que eles estão. Eles nor-
malmente aparecem próximos à parte superior da página. Cada parte do site listada no
caminho breadcrumb normalmente é vinculada a essa seção. Por exemplo, a navega-
ção “migalha de pão” para a página anusara.html na pasta about seria Main > About >
Anusara. Nesse exemplo, o texto Main seria vinculado à página index.html de primeiro
nível e About seria o arquivo index.html na pasta about, que está vinculada à página
anusara.html. Anusara não está vinculada – ela está no final das “migalhas de pão”,
que indica ao visitante que a página sendo visualizada é Anusara.
*Nota do Tradutor: Literalmente, “migalhas de pão”, que como na história infantil, lembra o caminho
percorrido.
CRIANDO LINKS 95
3. Clique no ícone do arquivo Dreamweaver à esquerda do primeiro index.html lista-
do na barra Site Navigation.
A raiz de site é retornada para sua home page, ou seja, a página de primeiro nível de in-
dex.html no site de projeto de Sangha de Yoga.
Salvando o mapa do site

1. No menu de painel Files (Windows) ou no menu Options do painel no lado superior
direito do painel Files (Macintosh), escolha File > Save Site Map.
A caixa de diálogo Save Site Map se abre para você salvar o mapa do site como uma ima-
gem. Eventualmente, você pode precisar compartilhar o mapa do site com pessoas fora do
Dreamweaver. A opção para salvar o mapa do site como uma imagem facilita sua exibição
para outras pessoas. Nos computadores Macintosh, a imagem gráfica é salva no formato
PICT. Nos computadores Windows, a imagem gráfica do mapa do site é salva no formato
PNG ou BMP.
Ao utilizar as visualizações Map e Files, em oposição a visualizar apenas o

mapa, você não poderá acessar todas as funções do mapa de site se o painel Local Fi-
les estiver ativo. Se Save Site Map estiver acinzentado, volte ao painel Files e clique no
espaço branco vazio do painel de mapa do site para certificar-se de que ele está ativo.
Em seguida, volte e escolha o comando Save Site Map novamente.
2. Na caixa de texto File Name, digite project_yoga e salve o arquivo na pasta Les-
son_03_Links.
O mapa do site é salvo como uma imagem que pode ser impressa ou visualizada em um
editor de imagens.
Selecionando o alvo dos links

Sempre que um usuário clica em um link, a página vinculada normalmente substitui a pá-
gina atual do navegador. Essa é a função do link padrão, que foi utilizada para todos os
links nesta lição até este ponto. A instrução para um navegador quanto ao local em que o
link aparecerá é conhecida como alvo (target). Há diferentes alvos que você pode utilizar
com seus links. Eventualmente, você pode querer exibir a nova página de navegador em
uma janela diferente. Você pode direcionar os usuários para fora do seu site se o novo site
substituir o seu na janela de navegador. Se os usuários não marcaram seu URL, eles talvez
não lembrem como retornar ao seu site. Quando um link externo abre uma nova janela de
navegador, a página original permanece na primeira janela.
96 LIÇÃO 3
1. Abra o documento index.html na pasta Lesson_03_Links e selecione o link para o
Web site Yoga Sangha. No menu Target do inspetor Property, escolha _blank.
Você criou o link para o Web site Yoga Sangha próximo da parte inferior da página no se-
gundo exercício desta lição.
Observe os seis links de índice na parte inferior do documento – estes são os links que
você criou anteriormente nesta lição para os arquivos index.html dentro das seis pastas.
O Dreamweaver fornece várias opções de alvo para alterar o local de exibição da página
vinculada. Outros alvos além de _blank são utilizados com frames. Você aprenderá sobre
frames na Lição 10. Os possíveis alvos são estes:
_blank: Carrega o documento vinculado em uma nova janela do navegador sem
nome.
_parent: Carrega o documento vinculado no frameset ou janela pai do frame que
contém o link.
_self: Carrega o documento vinculado no mesmo frame ou janela do link. Esse alvo
é o mesmo que o padrão, assim você normalmente não tem de especificá-lo.
_top: Carrega o documento vinculado na janela de navegador cheia, removendo as-
sim todos os quadros.
2. Salve o arquivo e visualize-o no navegador.

Ao clicar no link yogasangha.com, a página vinculada abre em uma nova janela de na-
vegador. Você pode fechar esse arquivo.
Tenha cuidado ao utilizar alvos de link para abrir novas janelas de navegador.
Muitas janelas poderiam irritar ou confundir seus visitantes. Cada nova janela pode
aumentar os requisitos de RAM no computador do usuário – com a quantidade de
memória que a maioria dos computadores hoje em dia tem, isso não é um proble-
ma, embora talvez seja se uma parte significativa do seu público utiliza máquinas
mais antigas.
CRIANDO LINKS 97
Inserindo âncoras identificadas e criando links
para elas
Quando um documento é longo ou tem muitas seções, talvez seja preciso criar uma série
de links que permitam ao usuário pular para lugares específicos dentro do documento.
Essa técnica elimina a necessidade do espectador de rolar por longas passagens de texto.
Uma âncora identificada marca o lugar na página ao qual um link pula. Neste exercício,
você insere e vincula uma âncora identificada. Você também aprenderá um outro método
de selecionar arquivos de link – utilizando o ícone Point To File.
1. Abra definitions.html a partir da pasta Lesson_03_Links. Escolha Modify > Page

Properties e selecione a categoria Links da caixa de diálogo Page Properties. Configu-
re as mesmas cores de link padrão utilizadas no documento index.html no primeiro
exercício desta lição. Clique em OK.
Lembre-se de que o valor hexadecimal da cor do link era #FF3300, a cor do link de rollo-
ver era #FF9900, o valor do link visitado era #993300 e a cor ativa do link era #FFCC00.
Mantenha as mesmas cores de link por todo seu site. Cores de links que mu-
dam aleatoriamente podem ser confusas aos visitantes.
Esse arquivo contém um grande volume de texto que exige que o visitante role para ver
o documento inteiro.
2. Posicione o ponto de inserção em frente do termo Vinyasa Yoga na parte inferior do

documento. Clique no botão Named Anchor na categoria Common da barra Insert.
Named Anchor (Âncora identificada)
A caixa de diálogo Named Anchor se abre.
Você também pode inserir uma âncora identificada escolhendo Insert > Na-
med Anchor ou utilizando os comandos de teclado Option+Command+A (Macintosh)
ou Ctrl+Alt+A (Windows).
3. Digite vinyasa no campo de texto Anchor Name; então clique em OK.
98 LIÇÃO 3
Não utilize espaços, pontuação nem caracteres especiais (como símbolos de direitos auto-
rais, sinais tralha e assim por diante) no nome. Nunca deve haver mais de uma âncora
identificada com o mesmo nome no mesmo documento; caso contrário, o navegador não
pode fazer com que o usuário pule para a âncora identificada correta.
Um ícone amarelo aparece na página para representar a âncora identificada. O ícone
pode ser selecionado quando primeiro aparece na página – ícones de âncora selecionados
são azuis. Esse ícone é um elemento invisível que não aparece no navegador.
Named Anchor (Âncora identificada)
Se você não puder ver o ícone Named Anchor, certifique-se de que a opção
Invisible Elements está ativada escolhendo View > Visual Aids > Invisible Elements.
Ao inserir uma âncora identificada, talvez uma caixa de diálogo se abra para alertá-lo de
que você não verá a âncora a menos que a opção Invisible Elements esteja ativada.
Âncoras identificadas também devem ser marcadas na categoria Invisible Elements
de Preferences. Você pode determinar quais opções foram ativadas escolhendo Edit >
Preferences e selecionando a categoria Invisible Elements. A caixa Named Anchors
deve ser marcada. As lições neste livro pressupõem que você esteja utilizando a confi-
guração padrão.
CRIANDO LINKS 99
4. Posicione o cursor no final do parágrafo que descreve yoga na parte superior da
página. Pressione Return e digite There are many styles of yoga, including:. Pressione
Return (Macintosh) ou Enter (Windows) e digite os seguintes termos, com uma quebra
de linha entre cada um:
Hatha
Anusara
Ashtanga
Bikram
Dynamic Hatha
Integral
Iyengar
Kripalu
Vinyasa
Esse texto atuará como um elemento navegacional fazendo com que o usuário pule
para seções correspondentes da página. Cada termo será um link que referencia a âncora
identificada correspondente, como aquela criada para Vinyasa Yoga próximo à parte in-
ferior dessa página nos passos anteriores.
5. Selecione o texto Vinyasa a partir da nova lista de estilos de yoga que acabou de
criar. Digite #vinyasa no campo de texto Link no inspetor Property.
O sinal de tralha (#) é requerido para informar o navegador de que esse link é interno – ele
leva o usuário a um local na mesma página.
Certifique-se de que o nome que você digita depois do sinal de libra é exatamente o
mesmo do nome da âncora. Você deve seguir as diretrizes para atribuição de nomes da Li-
ção 1 ao nomear suas âncoras. Âncoras identificadas fazem distinção entre maiúsculas e
minúsculas, embora muitos navegadores aceitem uma alteração entre letras maiúscu-
las/minúsculas. Por exemplo, se nomear sua âncora vinyasa e então digitar #Vinyasa no
campo de texto Link, seu link talvez não funcione consistentemente em todos os navega-
dores.
O texto Vinyasa, localizado na lista de estilos de yoga, agora está vinculado ao termo e à
definição de Vinyasa próximos à parte inferior da página. Agora você repetirá o processo
para Kripalu.
100 LIÇÃO 3
6. Adicione uma outra âncora identificada antes do termo Kripalu próximo à parte in-
ferior do documento e a nomeie kripalu.
Você criou uma segunda âncora.
Se a âncora for inserida no lugar errado, você poderá arrastá-la para uma nova
posição.
7. Selecione a palavra Kripalu na lista de estilos de yoga na parte superior do docu-

mento. Arraste o ícone Point to File (ao lado do campo de texto Link no inspetor Pro-
perty) para a âncora identificada kripalu que você acabou de criar. Solte o botão do
mouse quando o ponteiro está diretamente sobre a âncora identificada.
Quando você clica na ferramenta Point to File pela primeira vez, o campo de texto Link
contém inicialmente o texto instrutivo que será substituído pelo link que você escolhe.
Depois de rolar pela âncora identificada, #kripalu aparecerá no campo de texto Link. Uti-
lizar o ícone Point To File para criar links pode ajudar a evitar erros de digitação.
Você também pode utilizar o ícone Point to File para vincular outros arquivos no
seu site se o painel Files estiver aberto. Com o texto ou imagem gráfica selecionado
que você quer vincular, clique e arraste o ícone Point to File para o painel Files. O painel
Files vem para a frente se estiver atrás da janela Document ou de outros painéis, e
você pode continuar a arrastar o mouse até que o ponteiro esteja diretamente sobre o
arquivo que deseja vincular.
CRIANDO LINKS 101

8. Insira âncoras identificadas e links a elas para os demais termos navegacionais
que você criou no início do documento. Para a âncora identificada, digite hatha, anu-
sara, ashtanga, bikram, dynamic, integral e iyengar para os respectivos tipos de yoga.
Você pode editar os nomes de quaisquer âncoras que cria clicando na âncora identificada.
O inspetor Property muda para mostrar que uma âncora identificada está selecionada.
Você pode alterar o nome no campo de texto Name do inspetor Property.
9. Insira uma âncora identificada bem na parte superior da página em frente ao texto
Yoga e a nomeie top. Crie uma nova linha na parte inferior da página, digite Back to
Top e vincule-a a #top utilizando o campo de texto Link no inspetor Property.
Lembre-se de utilizar dois retornos de parágrafo para “escapar” a lista de defi-

nição e criar a nova linha.
Em documentos longos, uma prática comum é incluir links no final de cada seção para
uma âncora identificada na parte superior da página ou para um índice analítico navega-
cional. Essa âncora comum normalmente é chamada de #top. Quando você fornece esse
tipo de link, os usuários não precisam voltar à parte superior da página se quiserem conti-
nuar utilizando esses links para pular para outras seções. Qualquer número de links na
página pode fazer referência à mesma âncora identificada.
Problemas de visualização, como um link para uma âncora identificada que

pula para a área errada ou simplesmente não funciona, podem ocorrer se essa âncora
identificada estiver localizada dentro de um link. Para evitar esses problemas, qualquer
tentativa de mover ou inserir uma âncora identificada dentro de um link faz com que o
Dreamweaver termine o link automaticamente um pouco antes da âncora identificada
e crie um segundo link para o mesmo destino imediatamente depois da âncora identifi-
cada (que termina no mesmo ponto em que o link original terminou). Nesses casos, a
âncora identificada é na verdade colocada entre dois links separados que têm um valor
idêntico. Como resultado, posicionar o cursor no começo do texto vinculado e fazer
uma alteração no valor do link altera somente a primeira instância do link; você precisa
lembrar de duplicar quaisquer alterações na segunda instância do link que ocorre de-
pois da âncora identificada.
10. Salve o arquivo e o visualize no navegador.

Os termos navegacionais na parte superior da página agora vinculam para suas corres-
pondentes seções. Você pode fechar o arquivo definitions.html.
102 LIÇÃO 3
Âncoras identificadas talvez não funcionem como esperado se forem posicio-
nadas dentro de tabelas ou camadas. Para obter melhores resultados, mantenha as
âncoras identificadas fora de tabelas e camadas. Você aprenderá a criar tabelas na Li-
ção 6, e camadas na Lição 9.
No passo a seguir, você continuará a aprender a vincular a uma seção particular de um

outro documento utilizando uma âncora identificada.
11. Abra o arquivo index.html de primeiro nível na pasta Lesson_03_links. No pará-

grafo que inicia com Anusara Yoga, a form of hatha yoga… selecione as palavras hatha
yoga. Digite definitions.html#hatha no campo de texto Link do inspetor Property.
Certifique-se de substituir o sinal original de tralha (#) no campo de texto Link pelo link
que você digitou.
Nos passos anteriores, você criou uma âncora identificada na seção hatha do arquivo
definitions.html. Agora está criando um link no index.html para apontar diretamente
para a seção hatha no definitions.html – em vez de vincular à parte superior da página
como faria se tivesse utilizado definitions.html como o link. Você pode visualizar in-
dex.html no navegador e testar esse novo link.
O uso de âncoras para vincular as partes específicas de outras páginas ajuda seu site a
ser mais funcional, direcionando imediatamente seus expectadores para aquilo que eles
estão procurando e reduzindo a quantidade de tempo que eles têm de gastar para rolar
por documentos longos. Quanto mais funcional e fácil de utilizar for o seu site, maiores as
possibilidades de seu público voltar e de novos visitantes aparecerem.
Você também cria links que incluem âncoras identificadas para outras páginas
utilizando a ferramenta Point to File, utilizada nos passos anteriores para criar links
dentro do mesmo documento. Por exemplo, com index.html e definitions.html aber-
tos em janelas separadas, você pode selecionar um link em index.html, clicar no ícone
Point to File à direita do campo de texto Link e apontar para a âncora identificada dese-
jada em definitions.html.
Deixe o documento index.html aberto para o próximo exercício.
CRIANDO LINKS 103

Inserindo links de e-mail
Fornecer um endereço de e-mail com links torna fácil para seus visitantes entrarem em
contato com você a partir de uma página Web. É sempre bom incluir algum método de
contato que permita aos visitantes se corresponderem ou interagirem com uma pessoa na
sua empresa.
Há duas maneiras de inserir um link de e-mail no Dreamweaver. Você pode inserir
tanto o texto como o endereço de e-mail para o link ao mesmo tempo ou pode adicionar
um link para texto que já existe na página. Este exercício ensina essas duas ações.
1. Em index.html clique no final da data na parte inferior do documento, pressione a

barra de espaço e digite by seguido por um outro espaço.
Você irá inserir um link de e-mail aqui, no próximo passo.
2. Clique no botão Email Link na categoria Common da barra Insert, ou escolha Insert
> Email Link.
Link de e-mail
A caixa de diálogo Email Link aparece, exibindo opções para texto e e-mail.
A barra Insert deve estar aberta por padrão. Se ela não estiver visível, escolha
Window > Insert para abri-la ou Window > Arrange Panels para redefinir os painéis,
inspetores e barras para suas posições padrão.
3. No campo de texto Text, insira seu nome. No campo de texto Email, insira seu en-
dereço de e-mail e então clique em OK.
O texto aparece na página como um link. O inspetor Property mostra “mailto:” seguido
pelo endereço de e-mail no campo de texto Link quando você posiciona o ponto de inser-
ção dentro do link.
104 LIÇÃO 3
Se selecionar um texto que já está na página e então abrir a caixa de diálogo Insert
Email Link, o texto selecionado aparecerá no campo de texto Text.
Informações de contato em geral aparecem na parte inferior de uma página, freqüente-
mente próximas a informações de direitos autorais.
Você também pode criar links de e-mail digitando mailto: imediatamente seguido pelo
seu endereço de e-mail no campo de texto Link no inspetor Property – ao fazer isso, certi-
fique-se de digitar o dois-pontos e não deixe um espaço entre o dois-pontos e seu endere-
ço de e-mail.
Você pode salvar e fechar o arquivo index.html.
Trabalhando com links por conta própria

Como aprendeu nesta lição, criar um site de teste com links navegacionais permite clicar
pelo site e ver o que está funcionando e o que não está funcionando, assim como seu visi-
tante navegaria pelo site. Testar a navegação nesta etapa nos dá a oportunidade de fazer
ajustes antes de termos avançado muito no desenvolvimento. Neste exercício você criará
um site de teste para seu próprio site.
1. Utilizando a estrutura de arquivos desenvolvida para seu site na Lição 1 como guia,
crie as pastas de seção e os marcadores de lugar de página para o site.
Configurar as pastas de seção e os arquivos de marcador de lugar é o primeiro passo na
criação do site de teste. Usar o painel Files expandido para adicionar essas novas pastas e
arquivos ao site é um método rápido de criar alguns novos arquivos.
2. Desenvolva um sistema de links nas páginas marcadoras de lugar utilizando as ha-

bilidades e técnicas aprendidas anteriormente nesta lição.
Utilizar a visualização Site Map do painel Files permite criar links entre as páginas no seu
site sem abrir cada arquivo individualmente.
Não aplique nenhuma cor de link para suas novas páginas – você aprenderá a controlar
as cores de link utilizadas nos seus documentos por meio de um único arquivo para todo o
site na próxima lição.
3. Utilize a estrutura de tópicos de conteúdo desenvolvida na Lição 1 para inserir con-

teúdo baseado em texto nas suas páginas.
Você pode utilizar a estrutura de tópicos ou as listas de conteúdo que aparecerão em cada
página ou pode inserir o próprio conteúdo nas páginas. Embora seja possível continuar
adicionando e modificando o conteúdo no site por todas as diferentes fases de desenvolvi-
mento, inserir o conteúdo agora pode ajudá-lo a ver o que você tem, o que está faltando e
como o conteúdo está fluindo e funcionando por todo o site.
CRIANDO LINKS 105

Você pode transformar links em alvos, inserir âncoras identificadas e links para elas e
criar links de e-mail se necessário. Você continuará a trabalhar com links por todo o de-
senvolvimento do seu site – não precisa concluir todos eles agora.
4. Visualize sua home page em um navegador e teste a navegação e a estrutura do

site desenvolvido clicando em vários locais no site de teste.
Tente imaginar como o visitante poderia utilizar seu site – quais são os potenciais cami-
nhos que eles poderiam escolher no site? Faça quaisquer alterações conforme necessário.

Especificou as cores padrão dos links, links visitados e links ativos
Criou links de texto a páginas dentro do site de projeto e também um link para um
site externo
Criou pastas de seções e arquivos de marcador de lugar
Aprendeu a utilizar o painel File e o mapa de site para criar e visualizar links
Escolheu um link para abrir em uma nova janela
Inseriu âncoras identificadas para cada seção de um documento e vinculou os títu-
los correspondentes dessas seções a cada âncora identificada
Aprendeu a criar links de e-mail automaticamente utilizando a barra de Insert e ma-
nualmente utilizando o campo de texto Link do inspetor Property
106 LIÇÃO 3
Desenvolvendo
4 folhas de estilo
As folhas de estilo em castata (Cascading Style Sheets – CSS) permitem definir uma
variedade de elementos, como texto e imagens, exibidos nas suas páginas Web. O
termo em cascata refere-se à seqüência e à precedência ordenada de estilos. Um esti-
lo é um grupo de atributos de formatação, identificados por um único nome, que instrui
o navegador sobre como exibir um elemento. Estilos CSS em documentos HTML for-
necem bastante controle sobre a formatação, a aparência e o layout. A vantagem do
uso de estilos é que, ao fazer uma alteração em um atributo do estilo, todos os ele-
mentos controlados por esse estilo são automaticamente atualizados – em um único
documento ou no nível global do site, dependendo de como você criou o estilo. Ajus-
Nesta lição, você utilizará a CSS para aplicar uma

variedade de opções de formatação ao texto usando
três tipos de estilos fornecidos no Dreamweaver:
estilos de classe, estilos de tag e estilos avançados
personalizados.
DESENVOLVENDO FOLHAS DE ESTILO 107

tes podem ser feitos em diversas configurações, variando de atributos padrão – como
fonte, tamanho e cor do texto – a atributos avançados disponíveis apenas por meio de
CSS – como o espaço entre as linhas do texto (entrelinha, também conhecido como al-
tura de linha).
Por exemplo, utilizando as folhas de estilos você pode criar um parágrafo com uma
margem de meio-polegada, com 20 pontos entre as linhas e exibir texto em uma fonte
de 12 pontos. Isso não seria possível sem o uso da CSS, que é suportada por navega-
dores 4.0 ou superiores. Os navegadores anteriores ignoravam a CSS, embora o Inter-
net Explorer 3.0 reconhecesse alguns atributos de estilo. Os melhores resultados são
alcançados com navegadores 5.0 e superiores, que suportam uma ampla variedade de
recursos.
Você pode utilizar um estilo interno – ou seja, armazenado dentro do documento –

quando for necessário formatar uma única página. Você pode utilizar uma folha de esti-
lo externa – ou seja, armazenada fora da página Web e vinculada pela página atual –
quando for necessário controlar a aparência de vários documentos de uma só vez a fim
de manter o mesmo estilo de formatação do texto em múltiplas páginas. Nesses ca-
sos, o ideal é manter o tratamento do texto e o tratamento do layout consistentes por
todo o site, pois alterações drásticas na aparência talvez causem a impressão de que
os visitantes estão aterrissando em outro site.
Uma outra vantagem do uso de folhas de estilos é a capacidade de manter o conteúdo

das suas páginas Web separado da formatação. Em última instância, isso significa que
você tem controle mais preciso sobre a aparência do seu conteúdo. Como resultado,
inserir conteúdo no seu Web site irá tornar-se um processo mais rápido e menos com-
plicado. Isolar o conteúdo dessa maneira torna o processo de atualização e manuten-
ção do site muito mais simples. Controlar a formatação das páginas Web por meio das
folhas de estilos permite criar páginas que são mais compatíveis em diferentes plata-
formas e navegadores.
Nesta lição, você aprenderá a criar folhas de estilo básicas com estilos que afetam a a-
parência do texto. No processo, você aprenderá sobre as propriedades CSS e conhe-
cerá como isso funciona. Você então aplicará esse conhecimento criando um layout
baseado em CSS básico. Por todo o restante das lições neste livro, você continuará a
aprimorar essas habilidades aprendendo técnicas CSS adicionais e aplicando estilos a
elementos além de texto, como imagens gráficas na Lição 5.
Para ver exemplos das páginas concluídas desta lição, abra index.html e sangha.css na
pasta Lesson_04_CSS/Completed e index.html na pasta Lesson_04_CSS/Comple-
ted/about.
108 LIÇÃO 4
Configurar a cor de fundo de uma página
Aplicar atributos de texto incluindo fonte, cor e tamanho
Criar uma folha de estilos externa
Adicionar estilos a uma folha de estilo existente
Editar um estilo
Criar um estilo personalizado
Vincular a uma folha de estilo externa
Criar um estilo interno
Converter estilos internos em estilos externos
Criar um layout de página básico
Tempo aproximado
Esta lição deve levar aproximadamente três horas para ser concluída.
Arquivos da lição
Arquivos iniciais:
Lesson_04_CSS/index.html
Lesson_04_CSS/about/index.html
Lesson_04_CSS/Text/about.txt
Projeto concluído:
Lesson_04_CSS/Completed/index.html
Lesson_04_CSS/Completed/about/index.html
Lesson_04_CSS/Completed/sangha.css

Especificando uma cor de fundo
No Dreamweaver, você pode alterar facilmente a cor de fundo de uma página utilizando
uma paleta como aquela da Lição 3 para definir as cores de link. Neste exercício, você
acessará a paleta de cores da caixa de diálogo Page Properties para alterar a cor de fundo
do documento index.html.
1. Abra index.html na pasta Lesson_04_CSS. Escolha Modify > Page Properties e se-
lecione Appearance da lista Category.
Você pode utilizar os comandos de teclado Cmd+J (Macintosh) ou Ctrl+J (Win-

dows) para abrir a caixa de diálogo Page Properties.
Na tela Appearance da caixa de diálogo Page Properties, você verá que nenhum padrão foi
definido para essa página, mesmo que a cor de fundo padrão seja branca para a janela Do-
cument no Dreamweaver. Se você não definir uma cor de fundo, a página será exibida no
padrão do navegador (normalmente branco) quando um visitante visualizar a página.
Como o padrão do navegador pode variar de um navegador para outro, é recomendável
sempre definir a cor de fundo da página.
110 LIÇÃO 4
2. Clique na caixa de cores para chegar à opção Background Color. Clique no swatch
amarelo-claro que exibe o código hexadecimal #FFFFCC.
A cor amarela pálida #FFFFCC agora está selecionada como a cor de fundo para sua pági-
na. Você também pode digitar o código hexadecimal diretamente no campo de texto ao
lado da caixa de cores para mudar a cor.
3. Clique em Apply para visualizar a nova cor de fundo sem fechar a caixa de diálogo
Page Properties.
A cor de fundo de sua página é agora amarelo claro, selecionada na caixa de diálogo Page
Properties.
Deixe a caixa de diálogo Page Properties aberta para o próximo exercício.
Alterando a fonte
Para tornar sua página mais interessante e mais fácil de ler, você pode alterar a fonte utili-
zada para exibir texto. Embora haja muitas informações disponíveis sobre como tipo é
utilizado para mídia impressa, nem todo esse conhecimento serve para a Web.
Geralmente, fontes sem serifa são mais fáceis de ler na tela do computador que fontes
com serifa. Em geral, fontes com serifa são usadas na mídia impressa porque as serifas (os
pequenos traços ou extensões nas extremidades das linhas) tornam os caracteres mais fá-
ceis de reconhecer. Na tela de um computador, porém, essas mesmas serifas podem na

verdade tornar mais difícil de discernir formas de letras, particularmente quando grandes
volumes de texto estão envolvidos ou quando o texto em questão utiliza um tamanho de
fonte relativamente pequeno. Também é importante considerar que a maneira como o
texto flui em uma página pode variar entre navegadores e entre computadores.
Para definir opções de fonte, o Dreamweaver utiliza estilos CSS integrados em vez do
método mais antigo do uso de atributos de tag de fonte.
Você pode alterar a fonte da página inteira ou do texto selecionado na página, como
verá no exercício a seguir.
1. No menu Page Font na categoria Appearance da caixa de diálogo Page Properties,

escolha Arial, Helvetica, sans-serif. Clique em OK para fechar a caixa de diálogo Page
Properties.
Todo o texto na página agora está formatado em uma das fontes na lista que você sele-
cionou: Arial, Helvetica, Sans-serif. Qualquer texto adicionado à página no futuro será
formatado com a mesma fonte.
A caixa de diálogo Page Properties gera um estilo CSS interno para redefinir
um conjunto de tags (corpo, td, th) com os atributos da fonte. Estilos CSS externos se-
rão abordados mais adiante nesta lição.
As combinações de fonte que estão listadas no menu Page Font da categoria Appearance
na caixa de diálogo Page Properties instruem o navegador a exibir o texto para a fonte no
grupo selecionado, dependendo de quais fontes estão instaladas nos computadores dos
visitantes. Se a primeira opção no grupo de fontes não estiver disponível, o navegador ten-
ta utilizar a segunda. Se a segunda fonte não estiver disponível, ele utiliza a terceira. Se ne-
nhuma das fontes na combinação estiver disponível no computador do usuário, o texto é
exibido na fonte padrão do navegador.
112 LIÇÃO 4
2. Selecione o texto Anusara Yoga in the Heart of San Francisco’s Mission District pró-
ximo da parte superior da página. Do menu Font do inspetor de Property, escolha
Courier New, monospace.
A fonte configurada que você escolheu para a linha de tag sobrescreve a fonte padrão es-
pecificada para a página. As escolhas das combinações de fontes disponíveis no menu
Font no inspetor Property são as mesmas que as combinações de fontes que foram listadas
no menu Page Font da categoria Appearance na caixa de diálogo Page Properties.
Algumas opções de formatação podem ser aplicadas diretamente na janela

Document ao texto selecionado se você clicar com o botão direito do mouse (Win-
dows) ou clicar com a tecla Ctrl pressionada (Macintosh) para acessar o menu de
contexto.
Para que os visitantes do seu site visualizem o texto exibido nas fontes escolhidas, estas
devem estar instaladas nos computadores deles. Não pressuponha que todas as fontes são
carregadas nos computadores de todo mundo. Quaisquer fontes não incluídas com o sis-
tema operacional básico não estão potencialmente nas máquinas dos seus visitantes.
Além disso, a disponibilidade de fontes no Macintosh não é a mesma do Windows. As
fontes especificadas nos conjuntos de fontes padrão do Dreamweaver geralmente estão
disponíveis na maioria dos computadores, tanto no Macintosh como no Windows.
Se quiser utilizar uma fonte especial que talvez não possa ser instalada no
computador de um visitante, é recomendado criar uma imagem gráfica a ser usada
no lugar do texto. Freqüentemente, essa técnica é utilizada para cabeçalhos, títulos e
outros. Imagens gráficas não são recomendáveis para grandes quantidades de texto
porque elas restringem a acessibilidade e podem tornar a atualização do conteúdo
mais difícil.
As combinações de fontes (como Arial, Helvetica, sem serifas) são úteis, mas talvez elas
nem sempre incluam as fontes específicas que você quer utilizar. Você pode alterar uma
combinação de fontes escolhendo Edit Font List do inspetor Property menu Font ou es-
colhendo Text > Font > Edit Font List para exibir a caixa de diálogo Edit Font List.

Utilizando a caixa de diálogo Font List, você pode fazer algumas alterações para os con-
juntos de fontes:
Para adicionar fontes a uma combinação existente: Selecione a combinação de

fontes que deseja modificar na lista Font e selecione a fonte que deseja adicionar na
lista Available Fonts; então, clique no botão directional localizado à esquerda entre
a lista Chosen Fonts e a lista Chosen Fonts para adicionar a fonte à lista Chosen
Fonts.
Para remover fontes de uma combinação existente: Selecione a combinação de
fontes que você quer modificar e selecione a fonte que deseja remover da lista Cho-
sen Fonts; em seguida, clique no botão direcional direito localizado entre a lista
Chosen Fonts e a lista Available Fonts para remover a fonte da lista Chosen Fonts.
Para adicionar uma combinação de fontes: Selecione a opção Add Fonts in list be-
low na lista Font. Para combinações adicionais de fontes, clique no botão com um
sinal de adição (+) no canto superior esquerdo da caixa de diálogo e então selecione
a nova opção Add Fonts in list below da lista Font.
Para remover uma combinação de fontes: Selecione a combinação de fontes que
você quer remover da lista Font e clique no botão de sinal de subtração (–) no canto
superior esquerdo da caixa de diálogo.
Para adicionar uma fonte que não está instalada no seu sistema: Digite o nome da
fonte no campo de texto abaixo da lista Available Fonts e clique na seta direcional
para adicioná-lo à combinação. É útil adicionar uma fonte que não esteja instalada
no seu sistema; por exemplo, você pode especificar uma fonte somente do Windows
quando está criando em um Macintosh. Certifique-se de utilizar o nome exato da
fonte.
Para alterar a ordem das combinações de fontes: Selecione uma combinação de
fontes e clique nos botões de setas direcionais no canto superior direito da caixa de
diálogo.
114 LIÇÃO 4
A lista Available Fonts na caixa de diálogo Edit Font List contém as fontes instaladas no
seu computador.

Agora, o texto é exibido com as fontes que você selecionou no navegador, dependendo de
quais fontes estão instaladas no seu computador.
Você pode remover as configurações de fonte em uma página e retornar o tipo

escolhido à sua configuração padrão selecionando o texto que utiliza a fonte que dese-
ja remover. No inspetor Property, escolha Default Font no menu Font ou escolha Text
> Font > Default Font.
Alterando o tamanho da fonte

O Dreamweaver tem vários conjuntos de configurações predefinidas (presets), incluindo
valores numéricos em intervalos configurados que variam de 9 a 36, valores relativos que
variam de xx-small a xx-large e opções para menor e maior. Todas essas opções utilizam
CSS para definir o tamanho de texto. Utilizando o Dreamweaver, você pode obter muito
mais controle sobre o texto das páginas por meio do uso desses recursos integrados de
CSS. Você aprenderá sobre funcionalidades CSS mais avançadas mais adiante nesta lição.

a tag font tornou-se obsoleta
Na HTML 4.01, a tag font (uma tag que define as propriedades de texto) tornou-se obso-
leta – removida do padrão – embora atualmente ainda seja suportada pelos navegado-
res. A tag font dispõe o texto da seguinte maneira, com as tags de abertura e de fecha-
mento:
<font face=”Arial, Helvetica, sans-serif”>Yoga Sangha</font>
Os atributos da tag font oferecem um controle mínimo sobre a aparência do texto, en-
quanto o uso de CSS permite que desenvolvedores Web controlem o texto com uma
precisão muito maior. O Dreamweaver reconhece e suporta a tag font fornecendo ferra-
mentas para utilizá-la quando necessário.
Sempre que possível, utilize CSS – e evite o uso da tag font – para criar páginas eficien-
tes que seguem os padrões atuais.

Há uma diferença radical entre tamanhos das fontes no Macintosh e no Win-
dows. Os computadores Macintosh exibem texto aproximadamente 25% menor
que o mesmo texto em computadores Windows – o texto em um computador Ma-
cintosh tem três quartos do tamanho do texto no Windows. Os usuários também po-
dem alterar o tamanho da fonte, o que pode afetar seu design de página. Teste e pro-
jete suas páginas desta maneira, levando essas potenciais variações em considera-
ção para um Web site flexível que funcionará corretamente para a maior variedade
possível de visitantes.
Selecione o parágrafo que inicia com At Yoga Sangha, we’re dedicated… próximo da
parte superior da página. No menu Size do inspetor Property, escolha 12. Deixe a unidade
de medida no padrão: pixels.
Você também pode configurar um tamanho de texto padrão para o documento

na seção Appearance da caixa de diálogo Page Properties.
O tamanho de texto do parágrafo diminui ligeiramente e aparece um pouco menor

que o restante do texto na página que não tenha sido formatado com um tamanho. Você
pode digitar um valor no menu Size ou escolher uma das opções predefinidas.
Cada vez que você escolhe um atributo – ou uma combinação de atributos – tal como o
tamanho utilizado pela primeira vez na página, o Dreamweaver cria um novo estilo que é
listado no menu Style no inspetor Property. Todo o texto subseqüente definido com o
mesmo tamanho utilizará o mesmo estilo. Novos estilos são criados para cada combina-
ção única de formatação de face de fonte, tamanho e cores. Esses estilos têm nomes gené-
ricos que são gerados automaticamente em uma ordem numérica: style1, style2 e assim
por diante. Você pode renomear um estilo ativo – aquele que é exibido no menu Style no
inspetor Property – clicando no menu Style e escolhendo Rename. Você pode tornar um
estilo ativo posicionando o cursor dentro do texto que utiliza esse estilo.
Se nenhum tamanho for especificado para o texto selecionado, None será exibido no
menu Size. Os navegadores exibem texto que não tem uma definição de tamanho no ta-
manho padrão, igual ao valor de 14 no menu Size (embora isso talvez varie entre navega-
dores e/ou de acordo com as preferências de usuário que os visitantes configuraram den-
tro dos seus navegadores).
As opções numéricas de tamanho da fonte disponíveis no menu Size talvez sejam co-
nhecidas para você porque elas são semelhantes aos tamanhos padrão encontrados em
programas de processamento de texto.
116 LIÇÃO 4
Se quiser remover as configurações do tamanho de fonte e voltar à configura-
ção padrão, primeiro selecione o texto que você quer alterar no inspetor Property e en-
tão escolha None do menu Style ou escolha Text > CSS Styles > None.
Comparação de tamanho de fonte:

a tag font versus CSS
Como desenvolvedor Web, você talvez tenha de trabalhar com páginas que utilizam a
tag <font> obsoleta – por essa razão, é bom conhecer os tamanhos e as opções. Talvez
seja preciso converter em CSS removendo todas as instâncias da tag <font> e criando
estilos CSS. Você pode remover facilmente a tag <font> de um site utilizando o recurso
Find e Replace, que será aprendido na Lição 17. A tabela a seguir compara os valores
agora disponíveis no menu Size do inspetor Property com as opções mais antigas de ta-
manho da tag <font>.
Tamanhos da Valores Valores relativos Valores absolutos

tag font numéricos* no menu Size no menu Size
(baseado em CSS) (baseado em CSS)
9
-2 1 10 xx-small
-1 2 12 x-small /smaller
None (padrão) 3 14 small
+1 4 18 medium/larger
+2 5 24 large
+3 6 x-large
36**
+4 7 xx-large
*Utilizando a configuração padrão, pixels, no menu Measurement
**Esse valor numérico é um pouco maior que x-large (6) e um pouco menor que xx-large (7).
A tag <font> HTML define o texto em tamanhos que são absolutos (1 a 7) ou relativos
(+1 a +7 e –1 a –7). Selecionar um número absoluto (1 é o menor, 7 o maior) configura o
tamanho. O tamanho básico padrão para texto em um navegador é 3. Selecionar um nú-
mero negativo ou positivo torna o tamanho da fonte relativo ao tamanho básico da fonte.
O número positivo +1, por exemplo, torna o tamanho da fonte um ponto maior que o ta-
manho básico. Se escolher +3 para o tamanho da fonte, você estará efetivamente alte-
rando o tamanho para 6 (3 + 3). O maior tamanho para a fonte é 7, e o menor é 1. Qual-
quer tamanho de fonte HTLM maior que 7 é exibido como 7; por exemplo, se você confi-
gurar o tamanho da fonte como +6, 3 + 6 é maior que 7, mas a fonte ainda é exibida so-
mente no tamanho 7. Essas são limitações da tag <font> HTML e não afeta CSS, que é
um método muito mais flexível e versátil para definir especificações de texto.

Especificando a cor da fonte
Ao alterar a cor de fundo de uma página, como fez no primeiro exercício desta lição, tal-
vez também seja preciso alterar a cor do texto a fim de evitar problemas de visualização.
Por exemplo, texto em preto não é visível sobre um fundo preto. Ao escolher um esquema
de cores para seu documento, tente selecionar combinações de cores que funcionem bem
conjuntamente e têm contraste suficiente entre elas. Cores muito semelhantes entre si po-
dem ser muito difíceis de visualizar, como ocorre com as cores complementares, especial-
mente na tela de um computador. Nos passos a seguir, você irá alterar a cor de fonte pa-
drão no documento index.html.
1. Escolha Modify > Page Properties e verifique se Appearance está selecionado na

lista Category.
A seção Appearance da caixa de diálogo Page Properties fornece algumas opções que per-
mitem ajustar uma ampla variedade de configurações de documentos.
2. Clique na caixa de cores para a opção Text Color.

Uma paleta de cores se abre, semelhante àquela utilizada para escolher a cor de fundo do
documento anteriormente nesta lição.
3. Selecione a cor preta avermelhada escura com o código hexadecimal #330000 e

então clique em OK.
Você pode digitar o código da cor hexadecimal no campo de texto ou clicar para selecio-
nar a cor nas amostras. Depois de clicar em OK, a caixa de diálogo Page Properties fecha e
você retorna ao documento.
118 LIÇÃO 4
Você pode acessar uma caixa de diálogo Colors adicional escolhendo Text >
Color. Os códigos de cores hexadecimais também podem ser digitados diretamente
no campo de texto de cor, ao lado do seletor Text Color no inspetor Property.
4. Selecione o texto Welcome to Yoga Sangha. Clique na caixa Text Color no inspetor
Property e escolha uma cor laranja média (#FFCC33).
Semelhante às opções de rosto de fonte e tamanho, a cor da fonte é definida no Dream-
weaver por meio de estilos CSS. Aplicando uma cor, você cria um novo estilo. Você pode
ver o nome do estilo listado no menu Style no inspetor Property. O número do seu estilo
talvez difira daqueles mostrados neste exemplo se você criou algum estilo adicional expe-
rimentando os atributos de tipo, tamanho ou cor de fontes. Se aplicar as opções de fonte,
tamanho ou cor ao texto que já tem um estilo, os novos atributos serão adicionados ao es-
tilo mais antigo se o texto selecionado for a única instância desse estilo. Se houver outras
instâncias do estilo ou se você estiver aplicando novos atributos a apenas uma parte do
texto previamente estilizado, o Dreamweaver criará um novo estilo.
Ao estilizar o texto, uma boa idéia é manter seus estilos organizados – não tente aplicar
aleatoriamente atributos de texto porque o Dreamweaver criará novos estilos para cada
nova combinação. Em vez disso, pense em criar um sistema de estilos organizados que
herde atributos conforme necessário. Você aprenderá mais sobre herança posteriormente
nesta lição.

É possível monitorar as cores hexadecimais utilizadas nos sites por meio do
painel Assets, localizado no grupo de painéis Files. Você também pode abrir o painel
Assets escolhendo Window > Assets. Para acessar os recursos de cor, clique no íco-
ne Colors na coluna esquerda do painel Assets. Os botões de opção ao longo da parte
superior do painel Assets fornecem duas opções para visualizar as cores: Site e Favori-
tes. Clicar no botão de opção de lista Site mostra as cores que já foram utilizadas den-
tro do site de projeto Yoga Sangha ou no seu site ativo atual. Você não verá as cores na
lista se não utilizar nenhuma cor no seu site. Se definiu cores, mas não as vê listadas,
clique no botão Refresh Site List no canto direito inferior do painel. Você verá cores
nessa lista que ainda não utilizou porque há cores de outros documentos das outras
pastas de lição do site de projeto Lights of the Coast. Para assegurar que as cores se-
jam consistentes por todo o site, você pode salvar aquelas comumente utilizadas no
painel Assets como Favorites. Para salvar uma cor favorita, selecione a cor desejada
na lista Site e clique no botão Add to Favorites no canto inferior direito do painel
Assets. O Dreamweaver exibe uma caixa de diálogo informando que a cor foi adiciona-
da às suas favoritas. Clique no botão de opção Favorites na parte superior do painel
Assets para ver a lista Favorites. Você trabalhará com o painel Assets para gerenciar
imagens gráficas na Lição 5.
Opção Site
Guia do painel Assets Opção Favorites
Ícone
de cores
Botão Add to Favorites Botão Refresh Site List
120 LIÇÃO 4
Entendendo estilos
Até aqui, você utilizou alguns estilos CSS nos exercícios anteriores desta lição. No início
desta lição, começou a formatar texto com atributos de tipo, tamanho e cor de fonte utili-
zando o inspetor Property enquanto o Dreamweaver cria os estilos CSS correspondentes.
Você viu que cada vez que cria uma nova combinação de atributos em uma página, o
Dreamweaver cria um novo estilo, que é então listado no menu Style no inspetor Pro-
perty. Até agora, você também trabalhou com diversas propriedades de página incluindo
cor de fundo e cores para os diferentes estados dos links na Lição 3 e com configurações
padrão de fonte no início desta lição; todos esses atributos são controlados pelos estilos
CSS no Dreamweaver.
Neste exercício, você aprenderá mais sobre o que é uma folha de estilo e como ela fun-
ciona.
1. No documento index.html, clique no botão Split na parte superior esquerda da bar-

ra de ferramentas de documento.
Split (visualizações Show Code e Design)
Agora, você vê uma visualização dividida na janela Document que mostra a visualização
Design com que trabalhou até aqui nas lições e o código correspondente. Você vai tra-
balhar mais com essa visualização na Lição 16. Por padrão, a visualização Code é mos-
trada na parte superior da janela Document, e a visualização Design é mostrada na parte
inferior.

Você pode ajustar o tamanho dessas visualizações posicionando o cursor so-
bre a barra que separa as duas visualizações. O ponteiro transforma-se em uma seta
dupla, e você pode clicar e arrastar a barra conforme necessário.
2. Role para cima na visualização Code até que você veja o seguinte:
<style type=”text/css”>
<!–
a:link {
color: #FF3300;
}
Esse código marca o começo de uma folha de estilos que contém todas as informações
sobre os estilos utilizados nesta página. Ele é conhecido como uma folha de estilos interna
porque é incorporado ao documento. Todos os estilos criados nas lições anteriores utili-
zando o inspetor Property e a caixa de diálogo Page Properties foram estilos internos. O
Dreamweaver 8 cria esses estilos automaticamente sempre que você define a formatação
de texto ou as propriedades de página.
Os estilos CSS e anexos de folha de estilo são colocados entre as tags <head> e </head>
do documento.
Na CSS, uma folha de estilos é um grupo de estilos. Um estilo (freqüentemente referido
como uma regra) é um conjunto de propriedades que define e controla a aparência de um
elemento. No código para index.html, a folha de estilo é tudo contido entre <style
type="text/css"> (que define a folha de estilo) e </style> (que termina a folha de esti-
lo). O código a:link { color: #FF3300; } representa um estilo único (ou regra). Mais
adiante na folha de estilo você verá o seguinte código, criado quando a cor de fundo da pá-
gina foi configurada:
body {
background-color: #FFFFCC;
}
As regras são compostas de seletores e declarações. Um seletor é o elemento sendo defi-

nido. Uma declaração é a combinação de propriedades e seus valores. As propriedades são
os atributos do elemento que controlam a aparência, e o valor é a quantidade ou formato
que é especificado. A estrutura de um estilo é seletor { propriedade: valor } e propriedade:
valor é a declaração.
Por exemplo, no estilo a seguir, o elemento sendo definido é o “corpo” do seletor:
body { background-color: #FFFFCC }
A declaração { background-color: #FFFFCC } é a combinação de propriedades e va-

lores. O atributo do elemento de fundo sendo especificado é a propriedade de “cor de fun-
do”. O valor que define a cor é #FFCCCC.
122 LIÇÃO 4
Trabalhando com estilos internos
Estilos internos são aqueles definidos e utilizados apenas no documento atual. Se precisar
criar definições de estilos para uma única página no seu site, você pode utilizar os estilos
internos. Se quiser que ele tenha um design coeso entre as diversas páginas, utilize uma fo-
lha de estilos externa e vincule-a a cada documento em que deseja utilizar esse visual.
É recomendado utilizar folhas de estilos externas sempre que possível. Estilos

externos são benéficos porque permitem utilizar estilos em outros documentos. Além
disso, como o código de formatação para estilos externos está contido em um docu-
mento externo comum, as páginas com essa folha de estilos não têm de recarregar
continuamente as informações de formatação; isso faz com que menos código seja
utilizado e, portanto, torna o download das páginas mais rápido. Também torna mais
fácil atualizar os estilos porque todos estão em um lugar. Você aprende a criar estilos
externos mais adiante nesta lição.
Todos os estilos criados até agora são internos. A folha de estilo que você viu no exercício
anterior é uma folha de estilo interna – contida inteiramente dentro do documento in-
dex.html.
1. Abra o painel CSS Styles localizado no grupo de painéis CSS e clique no botão All
na parte superior desse painel.
Se o painel CSS Styles não estiver aberto, você poderá acessá-lo escolhendo
Window > CSS Styles.

O painel CSS Styles exibe uma lista dos estilos criados quando você definiu as proprieda-
des de página.
Talvez seja preciso expandir o grupo <style> na parte superior do painel CSS
Styles para ver a lista de todos os estilos internos.
2. Clique no ícone New CSS Rule na parte inferior do painel CSS Styles.
Novas regras CSS
A caixa de diálogo New CSS Rule se abre.
Você também pode abrir essa caixa de diálogo escolhendo Text > CSS Styles
> New.
124 LIÇÃO 4
Há três tipos diferentes de seletor (tipos de elementos definidos por estilos) que você pode
utilizar no Dreamweaver:
Class: Esse tipo de seletor permite criar classes que não estão associadas a quaisquer
elementos particulares. Você pode aplicar uma única classe a muitos elementos di-
ferentes. Classes são indicadas pelos seus pontos iniciais.
Tag: Esse tipo de seletor permite especificar uma tag HTML como o elemento que
será redefinido pelo estilo. A aparência padrão da tag é modificada pelo estilo.
Advanced: Esse tipo de seletor permite criar estilos utilizados para combinações de
tags específicas (seletores contextuais). Esse tipo de seletor também permite criar
IDs, que são semelhantes a classes com uma exceção importante: eles podem ser uti-
lizados apenas uma vez por página como uma maneira de definir ou identificar uni-
camente um elemento particular. Devido à sua natureza única, IDs são freqüente-
mente utilizados para propósitos de script e são indicados por um #.
3. Selecione Class na área Selector Type da caixa de diálogo New CSS Rule.
O campo de texto torna-se um campo de texto Name para criar um estilo personalizado.
O Dreamweaver atribui nomes genéricos automaticamente em uma ordem numérica:
.unnamed1, .unnamed2 e assim por diante. Esses nomes não são muito descritivos e po-
dem ser especialmente inúteis ao criar múltiplas classes. É melhor ter o hábito de atribuir
aos seus estilos nomes curtos que descrevam seus propósitos.
4. Digite .dayName no campo de texto Name para o nome da sua classe.

O ponto antes do nome é obrigatório. Se excluí-lo, o Dreamweaver o inclui automatica-
mente no começo do nome, mesmo que ele não seja mostrado.
É melhor atribuir nomes com base na função do estilo em vez de em uma descrição dos
atributos da aparência do estilo – nomes funcionalmente descritivos são mais acessíveis,
especialmente para navegadores baseados em voz.
5. Selecione This document only na área Define e então clique em OK.

A opção Document Only especifica que você está criando um novo estilo interno. A
caixa de diálogo CSS Rule definition for .dayName se abre.
6. Na categoria Type da caixa de diálogo CSS Rule Definition, configure o tamanho

como 12 pixels, Weight como bold (negrito), Variant como small-caps (versalete) e a cor
como preto (#000000). Deixe todas as outras opções sem definição e clique em OK.
Veja a classe que acabou de criar exibida na lista de estilos no painel CSS Styles.
126 LIÇÃO 4
Como você acabou de criar a regra .dayName, ela agora será automaticamente selecio-
nada na lista All Rules na parte superior do painel CSS Styles. Na metade inferior do pai-
nel há uma lista das propriedades para a regra selecionada – as propriedades são listadas
na coluna esquerda, e seus valores são listados na coluna direita. Por padrão, as proprie-
dades são exibidas no modo Show Only Set Properties, que lista apenas as propriedades
para as quais os valores foram definidos. Há dois modos de visualização adicionais para as
propriedades: Show List View e Show Category View. Show List View exibe a lista inteira
de atributos, enquanto Show Category View mostra a lista dos atributos organizados nas
mesmas categorias que estavam disponíveis na caixa de diálogo CSS Rule Definition.
Há algumas maneiras de editar a regra selecionada no painel CSS Styles:
Modifique os valores das propriedades existentes. Você pode modificar os valores

das propriedades diretamente na lista de propriedades clicando no valor a fim de
acessar os menus correspondentes.
Adicione uma nova propriedade e valor. Ao visualizar a lista de propriedades no
modo Show Only Set Properties, você pode clicar no link de propriedade Add na
parte inferior da lista para acessar um menu a partir do qual é possível selecionar
uma nova propriedade. Ao visualizar a lista de propriedades no modo Show Cate-
gory View ou Show List View, você pode adicionar um valor a uma propriedade lis-
tada clicando no campo de valor para a propriedade desejada.
Utilize a caixa de diálogo para editar a regra. Clique no botão Edit Style na parte in-
ferior do painel para abrir a caixa de diálogo de definição CSS Rule.
As classes oferecem um controle específico sobre a formatação do seu documento.

Você pode aplicá-las da mesma maneira como aplica estilos em um processador de texto:
selecionando o texto e então aplicando o estilo. Você pode aplicar esse estilo a blocos de
texto ou a palavras individuais dentro de blocos de texto.
Nos próximos passos, você aplicará a classe dayName a certos itens na lista numerada.
7. Selecione a palavra Monday na lista Schedule no documento index.html. Escolha

dayName no menu Style no inspetor Property para aplicar o estilo. Continue aplicando
dayName ao restante dos dias na lista.
O texto selecionado muda para refletir a classe dayName.

Depois de aplicar o estilo, você pode observar que a palavra selecionada na visualiza-
ção Code é precedida por <span class="dayName">; span define a seleção dos elemen-
tos, enquanto class especifica qual estilo é aplicado ao texto incluído por <span> (a tag

de abertura) e <span> (a tag de fechamento). A tag <span> é um elemento em linha que
define itens como várias palavras dentro de um bloco de texto maior. Ela é semelhante à tag
<div>, que é um elemento no nível de bloco que define blocos inteiros, semelhante a um
parágrafo.
Se quiser remover a formatação de estilo do texto, posicione o ponto de inser-

ção dentro do texto e escolha None no menu Style no inspetor Property. O estilo e sua
formatação são removidos do texto, embora o estilo permaneça na folha de estilos.
8. Clique no botão New CSS Style no painel CSS Styles. Configure Selector Type
como Class, digite .highlight no campo de texto Nome e escolha This document only
na área Define In. Clique em OK.
A caixa de diálogo CSS Rule Definition for .highlight aparece.
9. Na caixa de diálogo CSS Rule Definition, escolha Background na lista Category à

esquerda.
A caixa de diálogo CSS Rule Definition CSS muda para exibir as opções de fundo.
128 LIÇÃO 4
10. Configure Background Color como white (#FFFFFF) e clique em OK.
A classe highlight que você acabou de criar aparece na lista de regras no painel CSS Styles e
está disponível no menu Style no inspetor Property.
11. Na seção Announcements, selecione o primeiro título do evento, Intro to Anusa-

ra Workshop, e aplique o estilo de destaque utilizando o menu Style no inspetor Pro-
perty.
O texto agora parece estar destacado na cor branca. Os novos estilos criados neste exercí-
cio, dayName e destaque, são exibidos no menu Style com representações visuais – assim
como os estilos que o Dreamweaver criou quando você utilizou o inspetor Property para
configurar as propriedades de texto anteriormente nesta lição.
Para excluir uma regra interna da folha de estilo incorporada, utilize o painel
CSS Styles a fim de selecionar a regra que deseja remover e clique no ícone Delete
CSS Rule no canto inferior direito do painel. O estilo será removido da folha de estilos.
Como essa definição de estilo não mais existe, qualquer texto ao qual o estilo foi apli-
cado não mostrará os atributos definidos pelo estilo excluído. Entretanto, você deve
lembrar-se de que excluir um estilo do painel CSS Styles não é igual a remover um esti-
lo de texto escolhendo None no menu Style no inspetor Property – se um estilo for ex-
cluído da folha de estilos, as referências a ele inseridas no código permanecem no do-
cumento. Se também precisar remover as referências, você pode fazer isso rapida-
mente com Find & Replace, explicado na Lição 17. Também é possível excluir proprie-
dades das regras selecionando uma única propriedade na lista de propriedades e cli-
cando no ícone Delete CSS property.
Você pode salvar o arquivo index.html e deixá-lo aberto para o próximo exercício.

Convertendo estilos internos em estilos externos
As folhas de estilos podem ser armazenadas externamente e vinculadas a um ou mais do-
cumentos. Uma folha de estilos externa é um arquivo que contém somente as especifica-
ções CSS. Você pode utilizar as folhas de estilos externas com múltiplas páginas Web para
assegurar consistência entre elas.
Se tiver um documento com estilos internos e decidir utilizá-los em outras páginas,
você pode facilmente exportá-los para uma folha de estilos externa.
1. No documento index.html, escolha File > Export > CSS Styles.

A caixa de diálogo Export Styles As CSS File se abre.
2. No campo de texto Save As, atribua à sua folha de estilos o nome sangha.css. Sal-
ve o arquivo na pasta Lesson_04_CSS.
Não é preciso adicionar a extensão .css; ela é acrescentada ao documento au-

tomaticamente se você não incluí-la ao salvar.
É criada uma folha de estilo externa que contém todos os estilos internos existentes no do-
cumento index.html – incluindo aqueles que definem as propriedades de página, bem
como os estilos dayName e highlight.
Quando você exporta estilos, apenas os estilos internos são incluídos no novo
documento. Se houver uma folha de estilos externa anexada ao documento a partir do
qual você está exportando os estilos internos, os estilos nessa folha de estilos externa
não são incluídos na nova.
Se quiser utilizar a folha de estilos externa no documento a partir do qual você conver-
teu os estilos internos, é preciso remover a folha de estilos interna antes de vincular a folha
de estilos, o que você aprenderá a fazer no próximo exercício. Embora o Dreamweaver
permita anexar uma folha de estilos externa a estilos que utilizam os mesmos nomes da-
queles contidos em uma folha de estilos interna, você deve excluir os estilos internos para
evitar conflito, reduzir a quantidade de código no seu documento HTML e reduzir a pos-
sibilidade de erros e confusão.
Para remover a folha de estilo interna, role até a parte superior da lista de regras no pai-
nel CSS Styles. Selecione a folha de estilo interna representada por <style>, que contém
todas as regras com as quais você trabalhou nesta lição. Com <style> selecionado, clique
no ícone de lixeira na parte inferior do painel CSS Styles: o botão Delete Embedded Style
Sheet. Talvez você tenha notado que esse botão é contextual – ele muda com base no que é
selecionado, seja uma propriedade, uma regra ou uma folha de estilo inteira.
Você pode fechar o documento index.html.
130 LIÇÃO 4
Vinculando a uma folha de estilos externa
existente
Agora, você tem uma folha de estilos externa com múltiplas definições de estilo. Como ela
é externa, você pode utilizar esse arquivo com outros documentos vinculando-o às pági-
nas Web em que você quer que as definições de estilo sejam aplicadas ou tornem-se dispo-
níveis. Você precisará aplicar manualmente quaisquer classes aos parágrafos apropriados
ou ao texto selecionado. Mais adiante nesta lição você aprenderá a desenvolver estilos que
redefinem as tags HTML e a criar seletores contextuais – ambos os tipos de estilo serão
aplicados automaticamente a todos os documentos que têm a folha de estilos anexada.
IDs, que podem ser criados utilizando o tipo CSS Selector Styles, não são apli-
cados automaticamente aos documentos quando as folhas de estilos externas são
anexadas.
1. Abra o arquivo index.html da pasta Lesson_04_CSS/about.
O conteúdo do texto foi adicionado a essa página e formatado utilizando as téc-

nicas aprendidas nas lições anteriores. Para praticar mais, importe o conteúdo do texto
a partir do documento about.txt na pasta Lesson_04_CSS/Text e formate-o a fim de
que corresponda ao documento que você está utilizando neste exercício.
Essa página não contém nenhum estilo interno ou externo.

Nos passos a seguir, você vinculará esse documento à folha de estilos externa que criou
no exercício anterior a partir dos estilos internos no documento index.html. Essa vincula-
ção visa assegurar que a formatação do texto seja consistente entre as duas páginas.
Para que a formatação permaneça consistente enquanto você continua a de-

senvolver os estilos, é preciso remover os estilos internos do documento life.html e
seguir os passos neste exercício para anexar a folha de estilos externa. Utilizar folhas
de estilos externas irá assegurar que todos os documentos vinculados a essas folhas
de estilos reflitam continuamente quaisquer modificações nos estilos que essas fo-
lhas de estilos externas contêm. Você pode deixar o documento definitions.html
como está para esta lição ou trabalhar com ele conforme sugerido aqui para praticar
mais.

2. Clique no ícone Attach Style Sheet localizado no canto inferior direito do painel
CSS Styles.
Anexar uma folha de estilo
A caixa de diálogo Attach External Style Sheet se abre.
132 LIÇÃO 4
O Dreamweaver inclui algumas CSS pré-formatadas que podem ser utilizadas
nos seus próprios Web sites. Para isso, clique no link de folhas de estilos de exemplo
na parte inferior da caixa de diálogo Attach External Style Sheet. Selecione a folha de
estilos desejada na caixa de diálogo Sample Style Sheets e clique em OK. Você pode
utilizar essas folhas de estilos como estão ou como um ponto de partida para desen-
volver suas próprias. Clicar em Cancel na caixa de diálogo Sample Style Sheets leva-o
de volta à caixa de diálogo Attach External Style Sheet.
Se você tiver proficiência em escrever HTML e souber como escrever CSS, poderá
criar uma página CSS a partir do zero escolhendo File > New e selecionando o tipo de
documento na categoria Basic Page na guia General. Um novo documento se abre, em
que a visualização Code é o único modo de visualização disponível.
Para obter mais informações sobre CSS, escolha O’REILLY CSS Reference no
menu Book do painel Reference localizado no grupo de painéis Code para aprender
mais sobre os elementos CSS. Utilize o menu Style para escolher termos CSS e ler
suas descrições. Você vai trabalhar mais com o painel Reference na Lição 15.

3. Clique em Browse e localize o arquivo sangha.css criado no início desta lição. Se-
lecione a folha de estilos clicando em Choose (Macintosh) ou em OK (Windows) na
caixa de diálogo Select Style Sheet File. Verifique se a opção Link está selecionada na
seção Add As section da caixa de diálogo Attach External Style Sheet e clique em OK.
A folha de estilo externa de sangha.css agora está vinculada ao documento index.html. A
página agora reflete os atributos de formatação especificados na folha de estilo externa.
Você verá os efeitos imediatamente – as cores de link se tornarão idênticas àquelas que
você configurou na Lição 3, a cor de fundo alternará para o amarelo pálido configurado
anteriormente nesta lição e a fonte padrão de página alternará para a fonte já escolhida
nesta lição.
A opção Link foi selecionada por padrão porque é a primeira vez que você está anexan-
do uma folha de estilos ao documento index.html. A opção Import para anexar uma folha
de estilos não funciona no Netscape Navigator 4.x; esse navegador ignora quaisquer fo-
lhas de estilos que são anexadas utilizando Import. Dada a natureza em cascata das folhas
de estilo, a segunda folha de estilo tem prioridade e sobrescreve quaisquer estilos con-
flitantes na primeira folha. Da mesma forma, uma terceira folha de estilos sobrescreve
quaisquer conflitos na primeira e na segunda folhas de estilos. O processo de utilizar múl-
tiplas folhas de estilos é conhecido como cascata.
Uma técnica freqüentemente utilizada em consideração aos usuários do Netscape 4.x é
colocar todos os estilos que não são compatíveis com esse navegador em folhas de estilo
subseqüentes que usam a opção Import. Dessa maneira, o Netscape 4.x só utiliza os estilos
na primeira folha de estilo; ele não é afetado pelos estilos que poderiam conflitar ou que
poderiam causar erros porque ignora folhas de estilo vinculadas com a opção Import. Os
estilos importados contidos dentro de folhas de estilos subseqüentes podem então sobres-
crever aquelas criadas para navegadores mais antigos na primeira folha de estilos.
Criando estilos externos

Embora você possa alterar facilmente vários atributos de formatação como tipo, tamanho
e cor de fonte em documentos individuais, os estilos externos podem expandir suas op-
ções e facilitar sua aplicação em outros documentos dentro do site. Em vez de recriar os
estilos em cada página em que deseja utilizá-los, use uma folha de estilos externa para ar-
mazenar todos os estilos, tornando-os acessíveis a qualquer documento ao qual a folha de
estilos é anexada. Isso pode acelerar o processo de formatação significativamente.
134 LIÇÃO 4
Neste exercício, você criará um novo estilo na folha de estilo externa sangha.css redefi-
nindo uma tag HTML. Redefinindo a tag HTML de Heading 3 (<h3>) neste exercício,
você instrui o navegador a exibir com a formatação especificada qualquer texto que utilize
a tag <h3>. Isso é útil porque permite alterar o formato de Heading 3 básico de modo que
todo o texto que o utilize seja formatado com os atributos de estilo especificados.
1. Clique no ícone New CSS Rule no painel CSS Styles. Na área Selector Type, se-
lecione Tag. Utilize o menu Tag para selecionar h3.
Neste exercício, você cria um estilo para o formato Heading 3. Na HTML, a tag corres-
pondente é <h3>. As tags são especificadas na caixa de diálogo New CSS Style sem os col-
chetes. O título próximo da parte superior do documento é formatado como um Heading
3 e assumirá os atributos que você especificará no passo a seguir.
Ao criar um estilo que redefine uma tag HTML existente, é útil posicionar o
ponto de inserção dentro do texto na página que utiliza a mesmo tag ou selecionar
essa tag no seletor de tags antes de criar o estilo. O Dreamweaver associa a tag HTML
automaticamente ao estilo que será criado contanto que o tipo seletor de tag seja a se-
leção padrão – o tipo de seletor padrão é qualquer tipo utilizado por último. Se o tipo de
seletor de tag não for o padrão, selecione-o, clique em Cancel na caixa de diálogo New
CSS Rule e clique em New CSS Rule novamente – a tag será selecionada quando a cai-
xa de diálogo se reabrir. Pode ser bom selecionar a tag antes de abrir a caixa de diálogo
New CSS Rule se você não estiver familiarizado com HTML. Por exemplo, você pode-
ria clicar no título e selecionar a tag <h3> e então clicar no ícone New CSS Rule no pai-
nel CSS Styles. Se a opção Tag for selecionada na área Selector Type, a tag <h3> será
exibida como h3 no campo de texto Tag.

2. Da área Define In, selecione a opção de menu e escolha sangha.css. Clique em OK.
Como essa é a única folha de estilo que está vinculada ao documento atual, (New Style
Sheet File) e sangha.css são as únicas opções no menu. Para documentos que não têm ne-
nhuma folha de estilos externa anexada, a única opção nesse menu seria (New Style Sheet
File).
Você pode criar uma nova folha de estilos externa ao criar um novo estilo sele-
cionando (New Style Sheet File) na opção de menu na área Define In da caixa de diálo-
go New CSS Rule. Quando você cria uma nova folha de estilos externa para uma regra,
a folha de estilos é automaticamente vinculada ao documento para o qual foi criada.
Você deve salvar qualquer uma dessas novas folhas de estilos externas com a exten-
são .css. Para manter a estrutura dos arquivos limpa e organizada, alguns sites man-
têm todas as folhas de estilos externas em um local central.
A caixa de diálogo CSS Rule Definition for h3 in sangha.css se abre, que você utiliza para
definir a formatação das tags Heading 3.
136 LIÇÃO 4
A caixa de diálogo CSS Rule Definition sempre exibe o seletor do estilo – o elemento que
está sendo modificado – e o nome da folha de estilo em que está sendo definido. Neste
caso, o seletor é h3 e a folha de estilo é sangha.css.
3. Na categoria Type, selecione 18 no menu Size e altere a medida para points. Do

menu Font, escolha Courier New, Courier, monospace. Altere a cor para #660066. Se-
lecione bold no menu Weight e clique em OK.
Você também pode abrir o arquivo sangha.css a fim de fazer alterações diretamente no
código CSS.
Ao clicar em OK para fechar a caixa de diálogo CSS Rule Definition, o arquivo sangha.
css abre automaticamente em uma nova guia na janela Document. Os arquivos CSS são
exibidos na visualização Code, que você aprenderá em mais detalhes na Lição 16. Se fizer
alterações na folha de estilos como criar, editar ou excluir estilos, certifique-se de salvar o
documento CSS antes de fechá-lo. Se fechá-lo sem salvar, você perderá todas as alterações
feitas. É recomendável salvar periodicamente seus documentos CSS e HTML enquanto
está trabalhando.

Você pode utilizar as Dreamweaver Preferences para ajustar a maneira como
trabalha com a CSS. A categoria CSS Styles permite que você opte por abrir arquivos
CSS quando eles são modificados – essa opção é ativada por padrão. Você deve deixar
essa opção selecionada para esta lição. Também incluídas nesta seção de Preferences
estão as opções abreviadas que afetam a maneira como a CSS é escrita pelo Dream-
weaver.
138 LIÇÃO 4
Estilos de tag HTML redefinidos são aplicados automaticamente a qualquer conteúdo
contido dentro das tags redefinidas no(s) documento (s) ao qual a folha de estilo é aplica-
da. O estilo que você criou agora é refletido no texto que utiliza o formato heading 3.
4. Posicione o ponto de inserção dentro do primeiro parágrafo que inicia com Yoga
Sangha’s inspiration is emerging…
O seletor de tag na parte esquerda inferior da janela Document exibe a tag HTML <p>, in-
dicando que o ponto de inserção está dentro do parágrafo. A tag <p> define um parágrafo.
5. Clique no ícone New CSS Rule no painel CSS Styles. O campo de texto Tag deve
exibir p, Tag deve estar selecionado na seção Selector Type, e a seção Define In deve
mostrar sangha.css selecionado no menu. Faça quaisquer alterações necessárias
para corresponder a esses valores e então clique em OK.

O novo estilo que você está criando redefinirá a maneira como o texto formatado com as
tags de parágrafo deve aparecer – o seletor é p, e a folha de estilo é sangha.css.
A caixa de diálogo deve ter a tag <p> automaticamente selecionada no campo de texto
Tag porque você posicionou o ponto de inserção dentro de um parágrafo, que utiliza a tag
<p> antes de optar por criar uma nova regra CSS. Como você utilizou o Type do seletor de
tag na última vez em que utilizou a caixa de diálogo New CSS Rule nesta lição, esse tipo é
automaticamente selecionado. Se fechar o Dreamweaver, ele reverterá para automatica-
mente selecionar Class Selector Type na abertura da caixa de diálogo New CSS Style.
6. Na categoria Type da caixa de diálogo CSS Rule Definition, deixe o menu Font em
branco. Digite 12 no campo de texto Size e configure a medida como pixels no menu
de unidade Size. Digite 20 No campo de texto Line Height e configure a medida como
pixels. Escolha black (#000000) na área Color e, então, clique em OK para fechar a
caixa de diálogo e criar o estilo.
Clique em Apply para fazer com que as suas seleções apareçam na página en-
quanto a caixa de diálogo ainda está aberta. Se quiser fazer alterações com base em
como o texto aparece, faça antes de fechar a caixa de diálogo.
140 LIÇÃO 4
Qualquer texto contido dentro de tags de parágrafo no documento agora aparecerá com a
formatação dos atributos definidos na folha de estilos externa. A folha de estilo não afeta ne-
nhuma parte do texto que tem um formato diferente aplicado a ele, títulos, ou listas.
Resolução e unidades
de medidas na Web
Pixels são uma unidade de medida para definir o tamanho do texto nas páginas
Web. Pontos derivam de mídia impressa e, portanto, são uma boa escolha ape-
nas para páginas concebidas para impressão. Pixels se originam da mídia digi-
tal e descrevem uma unidade de medida baseada na resolução de tela. Conse-
qüentemente, os pixels tendem a ser convertidos de maneira mais consisten-
te entre navegadores e plataformas que os pontos. Texto pequeno que é legí-
vel em um computador Windows pode ser completamente ilegível em um Ma-
cintosh, uma situação que ocorre bem freqüentemente quando os desenvolve-
dores utilizam pontos para definir o tamanho de texto.
Há várias outras opções de medida disponíveis, incluindo tamanhos relativos,
que você aprendeu na Lição 2 (escolhas de pequeno, médio, grande e assim
por diante no menu Size no inspetor Property), em comparação com valores
absolutos (definidos numericamente) que requerem a seleção de uma unidade
de medida. Polegadas, centímetros e milímetros são as outras unidades ba-
seadas em impressão disponíveis. Paicas (uma paica tem 12 pontos), ems, exs
e porcentagem são as outras unidades de medida. A opção de porcentagem
conta com o tamanho definido pelo elemento pai ou tag e, portanto, depende
da herança de um atributo de tamanho a partir de um estilo anterior ou o padrão
do navegador. Você aprenderá mais sobre precedência e herança de estilo
mais adiante nesta lição.
Embora tamanhos relativos, ems e porcentagens sejam normalmente reco-
mendados para pontos ou outras unidades de medida baseadas em impres-
são, o mais importante é verificar suas páginas Web em plataformas diferen-
tes e ver como o texto aparece tanto em computadores Macintosh como
Windows.

7. Posicione o ponto de inserção na primeira linha da lista que inicia com is a form of
Hatha yoga. No seletor de tag, clique em <ul>.
Seletor de tag
Esse procedimento seleciona a tag de lista que controla a formatação do texto. Selecionan-
do a tag <ul> (que se aplica à lista inteira), você aplica a formatação tanto para o marcador
de lista como para o item de lista ao mesmo tempo. Você também verá a tag <li> (que só é
aplicada a um item individual na lista) no seletor de tag.
8. Clique em New CSS Rule no painel CSS Styles. Verifique se tag está selecionada
na área Selector Type, se ul é exibido no campo de texto Tag e se o estilo será criado
na folha de estilo sangha.css. Clique em OK e utilize a caixa de diálogo CSS Rule Defi-
nition para configurar o tamanho como 12 pixels, o peso como negrito e cor como
#333333. Clique em OK.
142 LIÇÃO 4
O estilo ul sobrescreve as configurações especificadas para a cor padrão do corpo de texto
(preta). Você aprenderá mais sobre como determinar a quais estilos recebem prioridades
mais adiante nesta lição.
9. Na janela Document, clique no título Anusara Yoga:, localizado um pouco acima da

lista com marcadores. Selecione a tag <h4> no seletor de tags e clique em New CSS
Rule no painel CSS Styles. Na caixa de diálogo New CSS Rule, verifique se o campo
Tag exibe <h4>, o Selector Type é Tag e o estilo será definido em sangha.css; em se-
guida, clique em OK. Na caixa de diálogo CSS Rule Definition, configure a fonte como
Courier New Courier, mono e configure o tamanho como 16 pixels. Clique em OK.
Esse subtítulo é configurado como o formato Heading 4. Você pode ver a tag <h4> exi-
bida no seletor de tags no canto inferior esquerdo da janela Document e também pode ver
Heading 4 exibido no menu Format no inspetor Property.

Nesse ponto, seu documento deve ser semelhante ao exemplo mostrado aqui.
Deixe o arquivo index.html aberto para o próximo exercício. Salve os dois documentos
index.html e sangha.css. Lembre-se de que o documento sangha.css abriu automatica-
mente em uma nova guia quando você começou a editar a folha de estilo anteriormente
nesta lição.
Criando estilos para combinações de tags

Você utilizou dois tipos de seletor até agora: classe e tag. A terceira opção na caixa de diá-
logo New CSS Rule é o tipo de seletor Advanced, que permite criar diversos estilos avança-
dos, incluindo seletores contextuais que podem ser utilizados para formatar combinações
de tags – combinações são a circunstância em que tags aparecem dentro de outras tags.
Neste exercício, você especificará um formato diferente para parágrafos de texto com
um alinhamento. Como você já criou um estilo para a tag <p>, os parágrafos no documen-
to atualmente refletem essa formatação.
144 LIÇÃO 4
1. Posicione o cursor no primeiro parágrafo localizado na parte superior do docu-
mento, um pouco abaixo da linha An Anusara Yoga Studio. Utilize o seletor de tags
para selecionar a tag <p>.
O parágrafo inteiro é selecionado.

O seletor de tag na parte esquerda inferior da janela Document mostra a hierarquia do
código. Você criará uma combinação de tags que inclui o bloco de parágrafo nos passos a
seguir.
2. Clique em Insert Div Tag na barra Insert. Escolha Wrap Around Selection no
menu Insert e clique no New CSS Style. Selecione o tipo de seletor Class, digite
.description no campo de texto de nome e escolha sangha.css na área Define In;
então clique em OK.
Insert Div Tag

Você agora está criando um estilo, descrição, que será aplicado a essa tag <div> especí-
fica. No passo a seguir, você utilizará a caixa de diálogo CSS Rule Definition para definir
os atributos do estilo da descrição.
3. Selecione a categoria Block, escolha justify no menu Text Align e clique em OK.
4. Verifique se a classe de descrição está selecionada no menu Class na caixa de diá-

logo Insert Div Tag. Clique em OK.
O parágrafo agora está contido dentro de um div, que é representado na janela Docu-
ment por contornos pontilhados – isso é um auxílio visual do Dreamweaver que não será
visível no navegador. Rolar o ponteiro do mouse sobre as linhas pontilhadas fará com que
elas se tornem linhas vermelhas sólidas, indicando que você pode selecionar o div.
146 LIÇÃO 4
Se não vir esses contornos, selecione View > Visual Aids > CSS Layout
Outlines.
Se inserir um div sem selecionar algo para contornar, por exemplo, a tag <p> como neste
exercício, o div será inserido com o texto de marcador de lugar Content for class “name
of class” Goes Here.
5. Posicione o cursor no parágrafo localizado dentro do div.

Nesse caso, <div.description><p> é mostrado no seletor de tags. Nos passos a seguir,
você criará um estilo para especificar combinações de tags, o que permitirá criar um estilo
diferente para o parágrafo dentro da tabela.
6. Clique em New CSS Rule no painel CSS Styles. Selecione Advanced na área Selec-
tor Type e digite div p no campo de texto Selector. Selecione sangha.css na área Defi-
ne In e clique em OK.
O div p digitado no campo de texto Selector representa a tag div e a tag de parágrafo den-
tro dele. Sempre que essa combinação específica de tags aparecer em um documento vin-
culado à folha de estilos sangha.css, será aplicada a formatação que você escolherá nos
passos a seguir. Utilizando div p, você especifica que somente parágrafos contidos dentro
de um div serão afetados.
O menu Selector lista os quatro estados aplicáveis a links: a:link, a:visited,

a:hover (não suportado por navegadores mais antigos) e a:active. Esse tipo de CSS Se-
lector é conhecido como pseudoclasse.

A caixa de diálogo CSS Rule Definition se abre.
7. Selecione a categoria Block na lista Category. Digite 15 no campo de texto Text

Indent, selecione pixels como a unidade de medida e clique em OK.
Suas alterações são refletidas no texto.
8. Salve suas alterações para os documentos index.html e sangha.css e visualize in-

dex.html em um navegador.
Como a folha de estilos externa não é salva automaticamente, é preciso sal-

vá-la antes de visualizar a página no navegador. Se você não salvá-la antes de visuali-
zá-la, o Dreamweaver solicitará que faça isso.
Uma vez que os seletores contextuais permitem formatar as tags que aparecem em se-
qüência com outras tags, as alterações feitas para o parágrafo no div não afetam os outros
parágrafos na página.
148 LIÇÃO 4
Editando um estilo existente
Uma das vantagens mais importantes das folhas de estilos externas é a capacidade de edi-
tar estilos com facilidade e velocidade. Como as alterações são feitas somente nas folhas de
estilos e não nas páginas Web individuais, você não tem de duplicar suas modificações por
um grande número de documentos. Com estilos externos, a formatação não é mantida no
documento HTML (como index.html) – a única informação sobre o estilo incluída é uma
referência que especifica o estilo que deve ser utilizado no caso das classes. As páginas
Web informam ao navegador quais folhas de estilos externas utilizar para instruções so-
bre como exibir a formatação. Os estilos são aplicados aos elementos pelo navegador no
momento em que um arquivo é visto por um visitante, como na ilustração a seguir.
Quaisquer modificações são automaticamente refletidas em cada página anexada à fo-

lha de estilos editada no momento em que é visualizada. Como os valores de formatação
estão contidos na folha de estilos (sangha.css, por exemplo), eles precisam ser modifica-
dos apenas em um local para afetar todas as páginas vinculadas à folha de estilos. Isso é útil
porque a aparência de um elemento como texto pode ser alterada em várias páginas ou
mesmo em um site inteiro muito rapidamente.
Neste exercício, você editará um estilo na folha de estilo externa sangha.css.

1. Selecione p na lista All Rules na parte superior do painel CSS Styles.
Os estilos que você cria na folha de estilo externa sangha.css aparecem na lista no painel
list CSS Styles.
Ao selecionar p no painel CSS Styles, o segmento CSS Properties do painel CSS Styles
indica que o estilo p está atualmente selecionado e exibe as propriedades que foram defi-
nidas para ele – nesse caso, são as propriedades de cor, tamanho de fonte e altura entre as
linhas. Cada propriedade mostra os atributos específicos que foram definidos no estilo.
2. Clique no valor para a propriedade de altura entre linha e a altere para 18.
Alterar as propriedades e seus valores diretamente no painel CSS Styles é uma maneira rá-
pida de modificar os estilos. Clicar no nome da propriedade (na coluna esquerda) selecio-
na essa propriedade. Clicar no valor (na coluna direita) permite alterar esse valor. Por
exemplo, você pode acessar um menu com os grupos de fontes disponíveis clicando no
nome da fonte e acessar o seletor de cor clicando no quadrado da cor.
Suas alterações são aplicadas ao documento. O espaço entre cada linha de texto agora é
um pouco menor. Texto que utiliza a tag <p> em quaisquer outros documentos vincula-
dos a essa folha de estilo será formatado automaticamente quando visualizado no Dream-
weaver ou em um navegador de acordo com as modificações que você acabou de fazer.
150 LIÇÃO 4
Clicar no link Add Property na parte inferior da lista Properties permite selecionar
uma nova propriedade a adicionar à regra.
Você também pode editar estilos selecionando o estilo desejado e clicando no

ícone Edit Style na parte inferior do painel CSS Styles. A caixa de diálogo CSS Rule De-
finition abre – é a mesma utilizada nos exercícios anteriores para criar os estilos.
Salve e deixe index.html e sangha.css abertos.
Trabalhando com precedência de estilos

Quando mais de um estilo é aplicado ao mesmo elemento, o navegador exibe os atributos
de cada estilo em combinação com os outros estilos – e esses estilos talvez conflitem entre si.
No caso desse conflito, a precedência de estilos é determinada pela natureza em cascata da
CSS. Entender como gerenciar e ordenar seus estilos ajuda a evitar resultados inesperados.
A CSS é aplicada cumulativamente, isto é, cada estilo é construído sobre outros estilos
se eles se aplicam ao mesmo elemento, em uma seqüência ordenada de acordo com as se-
guintes regras de origem, especificidade e ordem.
Origem
A origem, que é a procedência de um estilo, é avaliada primeiro. A seqüência das origens
dos estilos é a seguinte, começando com a prioridade mais baixa – o que o navegador utili-
za primeiro:
Padrões de navegador (prioridade mais baixa)
Estilos criados pelo usuário
Estilos especificados pela página Web (prioridade mais alta)
Isso significa que os navegadores utilizam suas especificações de formatação padrão, a
menos que haja uma folha de estilos que sobrescreva esses padrões. Uma folha de estilos
especificada pelo usuário sobrescreve os padrões de navegador, ao passo que os estilos es-
pecificados pela página Web sobrescrevem os estilos especificados pelo usuário.
1. Usuários do Windows: abra o navegador Internet Explorer, escolha Ferramentas >

Opções da Internet, selecione a guia Geral e clique no botão Acessibilidade na parte
inferior da caixa de diálogo. Usuários do Mac OS X: abra o navegador Safari, escolha
Safari > Preferences, selecione a categoria Advanced e utilize o menu pop-up Style
Sheet para escolher sua própria folha de estilo previamente criada.

Se você não tiver o Explorer ou Safari instalado no computador, utilize qualquer
navegador Web para completar esse passo. A localização e o título exato da seção em
que uma folha de estilos de usuário é especificada podem variar entre navegadores e
entre versões. Como um desenvolvedor Web, é recomendável que você conheça di-
versos navegadores; portanto, você pode desejar repetir esse passo para outros. Se
você não puder encontrar a opção para especificar uma folha de estilos, tente consul-
tar a ajuda ou a documentação do programa de navegador.
Os visitantes têm a opção de instruir os navegadores a aplicar folhas de estilos da sua

escolha às páginas que eles visitam. Essa opção pode fornecer maior acessibilidade permi-
tindo que os usuários ajustem a aparência das páginas Web por meio de uma folha de esti-
los otimizada para necessidades desses usuários. Essa é uma opção importante para usuá-
rios que talvez tenham deficiências visuais. Por exemplo, se for difícil para um usuário
distinguir um texto pequeno contra um fundo sem um bom contraste, ele pode especifi-
car uma folha de estilos com texto grande e uma combinação de cores com um contraste
forte como texto preto em um fundo branco. Embora essa opção esteja disponível, a
maioria dos seus visitantes provavelmente não terá nenhuma folha de estilos especificada,
portanto ainda é importante levar em consideração a acessibilidade do seu design ao de-
senvolver um site. Lembre-se de que alguns usuários talvez não saibam que essa opção
existe – não conte com seus visitantes para tornar seu site visualizável. Quanto mais traba-
lho eles tiverem para visualizar seu site, menos possibilidade de que permanecerão nele
para visualizar o conteúdo. Faça o design tendo as experiências do seu público em mente e
tenha como objetivo apresentar sites completos, transparentes e tão fáceis de utilizar
quanto possível para conseguir os melhores resultados (ou seja, mais visitantes!)
152 LIÇÃO 4
A opção
User Style Sheet
em Windows
Internet Explorer
Preferences
Se houver estilos conflitantes entre uma folha de estilos especificada pelo usuário e
uma especificada pela página Web, a especificada pela página Web será utilizada. Se
uma folha de estilos especificada por um usuário definir a fonte padrão como Verdana e
uma folha de estilos especificada pela página Web definir a cor de fonte padrão como
verde, o estilo de texto padrão será Verdana e verde. Esse efeito cumulativo é conhecido
como herança.
Você pode fechar browser Preferences (Macintosh) ou Ferramentas (Windows).
Declaração Weight CSS

Estilos também podem ser modificados pela declaração weight (peso), um método de
estabelecer prioridades que é principalmente concebido para oferecer ao usuário uma
opção de controle sobre a precedência de estilo. Para aumentar o peso de um estilo,
!important é incluído no final da declaração de estilo, depois dos valores de atributos.
Qualquer estilo definido com !important em uma folha de estilos especificada pelo
usuário sobrescreverá estilos conflitantes especificados pela página Web independente
de o estilo definido pela página Web utilizar ou não o modificador !important. Padrões
CSS mais antigos permitiam que estilos contendo !important e originando da página
Web sobrescrevessem os estilos especificados pelo usuário contendo !important. A al-
teração para dar prioridade aos estilos especificados pelo usuário contendo a declaração
!important é concebida para oferecer aos usuários controle sobre estilos – isso pode
ser importante para visitantes que precisam visualizar páginas de determinadas manei-
ras. Utilize o modificador com discrição e verifique se isso é verdadeiramente necessá-
rio. Um estilo que utiliza o modificador !important se pareceria com: body { color:
#339900 !important }.

Entendendo especificidade
A precedência dos tipos de estilo depende de um sistema que determina qual estilo é o
mais específico. A especificidade de estilo está baseada em valores no formato abc como a
seguir:
a é o número de IDs no estilo.
b é o número de atributos definidos pelo estilo.
c é o número de nomes de elemento no seletor.
Estilos com valores de especificidade mais altos têm prioridade sobre os estilos com va-
lores mais baixos.
Exemplos de como a
especificidade é determinada
Estilos de Tipo de a b c Especifi- Valor (abc)
exemplo estilo cidade
p { color: Tag 0 1 1 11 Esse estilo especifica que o texto
#000000 } contido dentro de blocos de
parágrafo será preto.
div p { Advanced 0 1 2 12 (Seletor contextual) Esse estilo
font-size: especifica que o texto contido
22px } dentro de um ou mais blocos de
parágrafo que está contido
dentro de um div terá 22 pixels.
h5 { font-family: Tag 0 2 1 21 Esse estilo especifica que o texto
Verdana, Arial, formatado como um Heading 5
Helvetica, será exibido em Verdana, Arial,
sans-serif; Helvetica, sem serifas com um
font-size 18px } tamanho de 18 pixels.
.quote { Class 0 3 0 30 Esse estilo especifica que todo o
font-style: texto ao qual o estilo .quote é
normal; aplicado utilizará o estilo de
font-weight: fonte normal, será negrito e
bold; color: utilizará uma cor azul escura
#0033CC } (#0033CC)
#left { Advanced 1 2 0 120 Esse estilo especifica que o texto
font-size: 22px; (ID e marcado com o ID único à
color: #000000 } Contextual esquerda terá 22 pixels e será
Selector) preto.
154 LIÇÃO 4
2. Alterne para a folha de estilo sangha.css no Dreamweaver. Calcule os valores de
especificidade para os seguintes estilos: a tag <h4>, a classe highlight e a tag <ul>.
Depois de calcular os valores, você pode compará-los com a lista de valores no final deste
passo.
A figura a seguir mostra como sua folha de estilo atual deve aparecer. Os valores de es-
pecificidade listados abaixo do exemplo de como a especificidade determina a ordem dos
estilos são calculados com base na folha de estilo que você vê aqui.
Eis um exemplo de como a especificidade determina a ordem dos estilos: a tag Heading
3 criada anteriormente nesta lição sobrescreve a fonte definida pelo estilo que foi criado
quando você configurou a fonte padrão como Arial, Helvetica sans-serif na caixa de diálo-
go Page Properties no início desta lição. Embora o estilo criado tenha sido inicialmente
um estilo interno, ele foi exportado juntamente com os outros estilos internos do docu-
mento index.html de primeiro nível para criar a folha de estilo externa css.sangha. O estilo
da tag <h3> tem um valor de especificidade mais alto (41– quatro atributos e um seletor)
que o estilo padrão de texto (23 – dois atributos e três seletores). O estilo de texto padrão

aparece no documento CSS como: body, td, th { font-family: Arial, Helvetica, sans-serif;
cor: #000000 }; o estilo heading 3 aparece como h3 {font-family: “Courier New”,
Courier, mono; font-size: 18pt; font-weight: bold; color: #660066;}
Note as vírgulas que separam os seletores no estilo que define a cor padrão de texto:
body, td, th. Elas indicam que esse estilo não é uma combinação de tags semelhante àquela
criada anteriormente para div p; em vez disso, esse estilo define um número de seletores
como um grupo. É mais eficiente agrupar seletores quando seus atributos são idênticos,
em vez de criar três estilos separados.
Na folha de estilos sangha.css, os valores de especificidade que você calculou neste pas-
so devem ser:
h4 (Tag) : a = 0, b = 2, c = 1 (para um valor de 21)

Não há nenhum ID (a) nesse estilo; há dois atributos (b) da família e tamanho da
fonte; e há um seletor (c), h4.
highlight (Class): a = 0, b = 1, c = 0 (para um valor de 10)
Não há nenhum ID (a) nesse estilo; há um atributo (b) da cor de fundo; e não há ne-
nhum seletor (c).
ul (Tag) : a = 0, b = 3, c = 1 (para um valor de 31)
Não há nenhum ID (a) nesse estilo; há três atributos (b) da família de fontes, tama-
nho da fonte e cor; e há um seletor (c), ul.
A especificidade CSS utiliza uma base numérica grande arbitrária para cal-
cular os valores dos estilos – ela não utiliza a base 10 porque os estilos podem po-
tencialmente ter mais de 9 IDs, atributos ou elementos. Suponha que um estilo não
tem nenhum ID, 14 atributos e 5 elementos. Na base 10, esse estilo utilizaria a = 0, b
= 14 e c = 5, assim o valor seria 145. Em um sistema de numeração com uma base
grande, a = 0, b = E e c = 5, portanto, o valor é E5. Isso é importante porque um estilo
com um ID, um atributo e zero elementos teria um valor de 110 tanto em um sistema
de numeração de base 10 como com uma base maior. Na base 10, o primeiro estilo
com um valor de 145 sobrescreveria o segundo estilo com um valor de 110. Entre-
tanto, em um sistema de numeração com uma base maior, o segundo estilo com um
valor de 110 sobrescreveria o primeiro estilo com um valor de E5, que é a ordem cor-
reta de especificidade.
156 LIÇÃO 4
Entendendo a ordem
A ordem dos estilos, que diz respeito ao local em que eles estão localizados, é a seguinte,
começando com a mais baixa:
Os padrões de navegador (a formatação mais distante do texto; prioridade mais baixa)

Estilos CSS externos
Estilos CSS internos
Estilos CSS em linha
Formatação de HTML local (a formatação mais próxima do texto; com prioridade
mais alta – sobrescreve quaisquer opções configuradas nos estilos mais altos se hou-
ver conflitos)

Evite estilos inline e formatação local
Um estilo em linha é uma instância de um estilo inserida diretamente no código. O uso
de estilos inline geralmente não é recomendado. <h1 style="color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif"> é um exemplo de um
estilo inline. Estilos inline são definidos dentro do conteúdo do documento e não utili-
zam nenhuma informação da folha de estilo na parte superior do documento (como os
estilos internos utilizam) nem em uma folha de estilo separada (como os estilos exter-
nos utilizam). Folhas de estilo internas e externas são significativamente mais podero-
sas porque os estilos inline mesclam o conteúdo com a formatação e porque são instân-
cias únicas da definição de um estilo que não podem ser utilizadas em outra parte.
Formatação de HTML local sobrescreve todos os estilos. A formatação HTML não é
mais utilizada pelo Dreamweaver para formatar texto porque a tag <font> está obsoleta
(marcada para exclusão) na HTML 4.0, como discutido na Lição 2. Embora ainda haja su-
porte para formatação com a tag <font> na codificação manual pelo Dreamweaver e
por navegadores, tirar proveito dos novos padrões permite projetar um web site mais
flexível e funcional. É melhor evitar o uso da tag <font>.
3. Clique na guia index.html para voltar à janela Document index.html. Aplique o estilo
de destaque ao texto Universal Principles of Alignment na última linha da lista. Clique
no botão Current na parte superior do painel CSS Styles.

A cor de fundo definida no estilo de destaque é combinada com o estilo que controla a
formatação da lista.
A visualização Current do painel CSS Styles fornece um resumo de todas as propriedades

e valores que se aplicam à seleção atual na parte superior do painel, na ordem em que eles
são aplicados. A propriedade na parte inferior é a mais próxima da seleção atual. Na parte
inferior do painel, você verá detalhes que dizem respeito à propriedade selecionada no resu-
mo [summary]. Nesse caso, a classe highlight é mostrada, incluindo informações sobre a fo-
lha de estilo em que a regra está localizada. Você pode selecionar qualquer uma das proprie-
dades no resumo para descobrir mais sobre elas. O segmento Properties do painel CSS
Styles que você utilizou para editar um estilo no exercício anterior permanece visível.
Se houver mais de um estilo aplicado pelo autor da página Web (a origem) ao mesmo
texto com atributos contraditórios, a prioridade é dada às especificações do estilo mais in-
terno (o estilo mais próximo da seleção atual). Os estilos mais recentes são aninhados
dentro dos estilos iniciais. Como os últimos atributos de formatação que você aplica são
fisicamente as tags mais próximas ao texto, eles têm precedência sobre os estilos iniciais e
controlam a aparência final do texto.
Se seu documento utilizar uma folha de estilos externa, os estilos nessa folha de estilos
serão aplicados por todo o seu documento. Suponha, por exemplo, que a folha de esti-
los externa tenha definições para Heading 3 e Heading 4 e que você também criou um es-
tilo interno dentro do seu documento que redefine a tag Heading 3. O estilo interno tem
precedência se os atributos conflitarem com aqueles no estilo externo. Por exemplo, se o
estilo interno definir a tag h3 como vermelha e o estilo externo define h3 como azul e ne-
grito, a tag h3 na verdade será vermelha e em negrito. Somente os atributos que conflitam
são afetados.
158 LIÇÃO 4
Formatação de texto aplicada manualmente a uma série de textos também pode ter
precedência sobre outros estilos. No exemplo recém-apresentado, suponha que você te-
nha utilizado o inspetor Property para aplicar uma cor diferente a uma das linhas do Hea-
ding 3. O Dreamweaver define as seleções de cores e de formatação no inspetor Property
como estilos personalizados internos. O menu Style no inspetor Property inclui tanto os
estilos internos como externos.
Se anexou uma folha de estilos a um documento e o navegador não exibe a formatação
que você espera, verifique sua folha de estilos e seu documento para ver há se outros estilos
ou formatação local que estejam sobrescrevendo os estilos que você espera ver utilizados.
Criando um layout CSS básico

A CSS é uma excelente maneira de controlar o layout e a aparência do seu Web site. A fun-
cionalidade da CSS é mais bem alcançada com navegadores recentes (5.0 e superiores)
que podem suportar o amplo espectro de recursos. As CSS podem ser utilizadas em com-
binação com ou como uma alternativa à criação de layouts com tabelas, que você apren-
derá na Lição 6. Muitos sites estão migrando para o uso de CSS em vez de tabelas porque,
embora as tabelas ofereçam um método de layout que atualmente talvez pareça ser mais
compatível com um número maior de navegadores, há diversas desvantagens. As tabelas,
particularmente aquelas complexas, podem fazer com que sua página carregue lentamen-
te, requerem muito mais código e freqüentemente necessitam do uso de gifs espaçadores
para forçar a tabela a manter sua posição. Uma das principais desvantagens é a combina-
ção de conteúdo com formatação e aparência. Os benefícios da CSS incluem a facilidade e
a velocidade com que um site baseado em CSS pode ser atualizado, uma aparência consis-
tente, menos código e tempo de download mais rápido. Com a CSS, o conteúdo é sepa-
rado do design e dos atributos que definem a aparência. As vantagens do uso da CSS no
layout também incluem maior acessibilidade, flexibilidade e eficiência. Ao decidir quais
ferramentas de layout devem ser utilizadas em uma página Web, é importante levar em
consideração o que funciona melhor para o layout específico que você está tentando obter
e o que a maioria dos seus visitantes será capaz de acessar. Certifique-se de visualizar suas
páginas em múltiplos navegadores e sistemas operacionais para testar a maneira como seu
método de layout escolhido aparecerá.
Neste exercício, você editará a regra description que criou anteriormente na lição para
obter uma única caixa básica para o conteúdo que utiliza o estilo description. No docu-
mento index.html, o <div> que contém o parágrafo próximo à parte superior do do-
cumento utiliza a regra description.

1. Clique no botão All no painel CSS Styles. Selecione a regra description a partir da
lista All Rules e clique no botão Edit Style na parte inferior do painel CSS Styles.
Botão Edit Style
Você está começando a configurar a classe que será utilizada para definir o visual de uma
caixa simples para essa página.
2. Selecione Background na lista de categorias. Escolha branco (#FFFFFF) no sele-

tor de cor de fundo.
160 LIÇÃO 4
Você definiu a cor de fundo da coluna que aparecerá na parte superior do fundo da página
em amarelo.
3. Selecione Box na lista de categorias. Insira 90 no campo de texto Width e verifique

se % está selecionado no menu de medida. Na seção Padding, digite 8 no campo de
texto Top. A caixa Same For All deve estar marcada e pixels deve estar selecionado no
menu de medida (essas são as configurações padrão).
A categoria Box fornece algumas opções para controlar o container que você está cri-
ando. Nesse caso, você definiu a largura da caixa que criará como 90% da largura disponí-
vel do navegador. O preenchimento cria a quantidade especificada de espaço entre a bor-
da da caixa e seu conteúdo. A margem define o espaço que existirá entre as bordas do na-
vegador e as bordas da caixa, bem como o espaço entre a caixa e quaisquer elementos adi-
cionais que poderiam ser criados fora dela.

4. Selecione Border na lista de categorias. Selecione Solid no menu Top na seção
Style. Na seção Width, deixe a caixa Same For All marcada e insira 1 no campo de tex-
to; então verifique se a opção pixels está selecionada no menu de medida. Selecione
black (#000000) no seletor de cores Top na seção Color e deixe a caixa Same For All
marcada. Clique em OK para fechar a caixa de diálogo CSS Rule Definition.
As opções de borda permitem definir como o contorno da caixa aparece.
Há um total de oito categorias disponíveis para definição de estilo. Você utili-

zou cinco: Type, Background, Box, Block e Border. As outras três categorias são:
List: Fornece opções para controlar a formatação das listas ordenadas e não-
ordenadas.
Positioning: Fornece opções para controlar onde os elementos estão localizados. O
Dreamweaver considera qualquer elemento com opções de posicionamento defini-
das como uma camada. (Camadas serão abordadas na Lição 16). Você pode integrar
CSS e camadas a layouts mais complexos.
Extensions: Fornece opções adicionais, algumas das quais não são amplamente su-
portadas.
162 LIÇÃO 4
Neste ponto, o <div> que contém o parágrafo exibe um fundo branco com um contorno
preto.
5. Role o ponteiro sobre a borda da caixa. Quando a linha virar vermelha, indicando que
você pode selecionar o <div>, clique na borda.
O <div> é selecionado, como você pode ver pelo <div.description> destacado no sele-
tor de tags.
O <div> selecionado utiliza alguns auxílios visuais para indicar os atributos CSS que
são afetados – como o contorno azul sólido que designa a propriedade de borda e a área
sombreada entre a borda e o texto que significa a propriedade de preenchimento [pad-
ding].
6. Escolha View > Visual Aids > CSS Layout Backgrounds.

O Dreamweaver utiliza a codificação de cores para identificar áreas de um documento
que foram formatadas com CSS e cada div usa uma cor diferente para ajudá-lo a distin-
guir entre elas ao criar layouts. Valores das outras propriedades, como fonte e cores de
fundo, são temporariamente ignoradas nesse modo. Esse auxílio visual, só disponível no
Dreamweaver, não é um indicativo da maneira como a página aparecerá no navegador.

7. Escolha View > Visual Aids > CSS Layout Backgrounds para desativar o auxílio vi-
sual CSS Layout Backgrounds. Salve os dois documentos index.html e sangha.css e
visualize o documento index.html no navegador.
Você agora tem uma caixa em volta do conteúdo. Como esse layout é criado com uma fo-
lha de estilos externa, é possível aplicá-lo facilmente a vários outros documentos para ob-
ter uma aparência consistente. Você pode utilizar técnicas como essa para criar layouts
mais complexos sem utilizar tabelas.
Você pode fechar os dois arquivos.
164 LIÇÃO 4
Trabalhando com CSS por conta própria
Por todo o restante deste livro você continuará a trabalhar na criação e redefinição de esti-
los CSS para controlar a aparência e o layout. Para praticar mais, você pode criar suas pró-
prias folhas de estilo externas utilizando as técnicas aprendidas nesta lição e vinculá-las às
páginas que criou no seu próprio site com as seções “Por conta própria” anteriores. Você
também pode experimentar vários documentos CSS fornecidos com o Dreamweaver
como exemplos e páginas iniciais aplicando-os a páginas dentro do seu próprio Web site
ou a cópias dos arquivos iniciais no site de projeto Yoga Sangha. Explorar outras folhas de
estilo é uma boa maneira de aprender sobre o que é possível com CSS e de descobrir técni-
cas que você poderia incorporar a suas próprias páginas.
1. Escolha File > New e então a categoria Page Designs (CSS) na parte General da
caixa de diálogo New Document. Selecione uma folha de estilos como Halo Left Nav
na lista Page Designs. Clique no botão Create.
O Dreamweaver criará o novo documento e solicitará que você escolha o local em que
o arquivo será salvo. Algumas páginas iniciais talvez requeiram arquivos como imagens
gráficas que serão copiadas automaticamente para seu site. Durante o processo de cópia
dos arquivos necessários para seu site, você talvez veja o conteúdo preliminar aparecer no
documento HTML – ele será atualizado depois que os arquivos tiverem sido copiados.

A folha de estilos Halo Left Nav criará uma página semelhante ao exemplo a seguir.
Você pode visualizá-la no navegador para ver como ela se parece.
Halo é uma parte de um conjunto de componentes – incluindo elementos

HTML e Flash, opções de layout e um design de interface criado pela Macromedia e in-
tegrado por todos os programas Studio – que são projetados para ajudar os desenvol-
vedores Web a criar experiências positivas com o usuário.
166 LIÇÃO 4
Ativar o auxílio visual CSS Layout Background utilizado no exercício anterior permitirá
que você veja a ampla série de estilos que funcionam juntos para criar o layout.
2. Utilize as técnicas praticadas nesta lição a fim de criar estilos para seu próprio site.
Ao criar estilos, lembre-se das diferenças entre estilos internos e externos e quais tipos
você está criando. Pense em criar estilos que ajudam a fazer uma distinção visual da hie-
rarquia do conteúdo.

Especificou uma cor de fundo e fonte
Criou um estilo interno para utilizar rápida e facilmente a mesma formatação de
texto
Criou uma classe que pode ser aplicada a diferentes tipos de formatos de texto
Converteu estilos internos em estilos externos de modo que eles pudessem ser utili-
zados por outros documentos
Vinculou uma folha de estilos externa a partir de outro documento para utilizar a
mesma formatação de texto
Criou estilos externos especificando a formatação de texto que pode ser utilizada
para manter a consistência da aparência do texto por todo Web site
Adicionou múltiplos estilos a uma folha de estilos existente redefinindo as tags
HTML
Editou um estilo na folha de estilos externa para afetar todos os documentos vincu-
lados a ela
Criou uma caixa básica com um div e classe CSS

Trabalhando com
5 imagens gráficas
Imagens gráficas podem desempenhar um papel importante em atrair a atenção do
seu público e comunicar eficientemente a mensagem do seu Web site. Nesta lição,
você incorporará imagens gráficas às páginas que está criando para o site de projeto
Yoga Sangha. No processo, você aprenderá os diferentes formatos de arquivos gráfi-
cos, aprenderá a controlar o posicionamento das imagens por meio de CSS e a combi-
nar elementos gráficos com texto.
Os recursos no Macromedia Dreamweaver 8 fornecem bastante controle sobre as

imagens gráficas utilizadas no seu site. Eles permitem modificar propriedades de ima-
gem rapidamente dentro do Dreamweaver, bem como abrir imagens imediatamente
dentro de um editor de imagem externo. O painel Assets simplifica o gerenciamento
de imagens permitindo criar catálogos de todas as imagens utilizadas em seu site ou
de imagens específicas que você precisa ter disponíveis.
Nesta lição,
você criará uma
página
semelhante a
esta enquanto
aprende a
incorporar
imagens com
texto em suas
páginas.
TRABALHANDO COM IMAGENS GRÁFICAS 169

Se quiser visualizar o resultado final desta lição, abra index.html na pasta Completed
dentro da pasta Lesson_05_Graphics.

Identificar os formatos gráficos e explorar suas diferenças
Inserir imagens em uma página
Modificar as propriedades de suas imagens
Alterar o posicionamento de imagens em uma página
Fornecer nomes e atributos alt a suas imagens
Utilizar o painel Assets para gerenciar imagens
Dispor o texto em torno de uma imagem
Utilizar marcadores de lugar de imagem
Utilizar as ferramentas básicas de edição de imagens para ajustar imagens
Alinhar texto com uma imagem
Tempo aproximado
Arquivos da lição
Arquivos de mídia:
Lesson_05_Graphics/Images/green-studio.jpg
Lesson_05_Graphics/Images/studio-om.jpg
Lesson_05_Graphics/Images/teaching.jpg
Lesson_05_Graphics/Images/ys_bkg_main.gif
Lesson_05_Graphics/Images/yoga_sangha-title.jpg
Arquivos iniciais:
Lesson_05_Graphics/index.html
Lesson_05_Graphics/about/studio.html
Projeto concluído:
Lesson_05_Graphics/Completed/index.html
170 LIÇÃO 5
Utilizando uma imagem gráfica de fundo
Neste exercício, você adicionará uma imagem gráfica de fundo a uma página. Uma ima-
gem de fundo pode ser uma pequena imagem disposta lado a lado em sua página repetin-
do-se horizontal e verticalmente pela janela de navegador. Uma imagem de fundo dispos-
ta lado a lado não tem nenhum efeito na aparência das barras de rolagem (ou na falta de-
las) em sua página. Você também pode utilizar imagens maiores como imagens gráficas
de fundo e utilizar Cascading Style Sheets (CSS) para controlar seus posicionamentos e se
elas são dispostas lado a lado, horizontal, verticalmente, ambos ou nenhum. Imagens grá-
ficas de fundo são dispostas lado a lado automaticamente nos navegadores antigos que
não suportam CSS.
Você pode definir uma cor de fundo e uma imagem de fundo para suas páginas. Em
conexões lentas ou em navegadores mais lentos e mais antigos, a cor de fundo pode ser
exibida primeiro – uma boa razão para configurar uma cor de fundo mesmo que você pla-
neje usar uma imagem de fundo. Depois de a imagem de fundo carregar, ela permanece
na tela, sobrepondo-se à cor de fundo.
Neste exercício você trabalhará com arquivos XHTML criados com as habilida-
des e técnicas que aprendeu nas lições anteriores. Se quiser praticar mais, pode re-
criá-las utilizando as páginas iniciais como guias.
1. Abra index.html na pasta Lesson_05_Graphics. Na lista All Rules no painel CSS

Styles, selecione a regra body da folha de estilo sangha.css e clique no botão Edit
Style na parte inferior do painel.
Edit Style (Editar estilo)
Esse documento index.html utiliza a folha de estilo sangha.css criada na lição anterior.
Para disponibilizar a aplicação de uma imagem de fundo a outros documentos no site,
essa folha de estilo deve ser editada. A regra body redefine a tag <body>, com o conteúdo
do documento.

Ao trabalhar em sites mais antigos talvez você encontre documentos que definem atri-
butos diretamente dentro da tag <body> – esse método de especificar cores de fundo e de
link é obsoleto e deve ser evitado em favor do uso de folhas de estilo, da maneira como
você está aprendendo a fazer neste exercício.
Você também pode configurar uma imagem de fundo diretamente em uma pá-
gina individual por meio da caixa de diálogo Page Properties – esse método criará um
estilo interno disponível apenas para o documento ao qual ele foi aplicado. Para isso,
escolha Modify > Page Properties e selecione a categoria Appearance. Você pode cli-
car no botão Browse para localizar a imagem de fundo e selecionar um método de re-
petição, se desejado. Utilize o atalho pelo teclado Cmd+J (Macintosh) ou Ctrl+J (Win-
dows) para acessar a caixa de diálogo Page Properties rapidamente. Você também
pode controlar as margens da página diretamente na seção Appearance – o que pode
ser útil se o valor da margem for dependente da imagem gráfica de fundo. Por exem-
plo, definir uma margem no documento em que você está trabalhando neste exercício
pode evitar que o texto se sobreponha à barra vertical no lado esquerdo da página.
Você também pode definir margens de página nas folhas de estilo externas especifi-
cando o atributo de margem da tag body.
2. Na categoria Background, clique no botão Browse ao lado do campo de texto

Background image. Localize a imagem gráfica ys_bkg_main.gif na pasta Images da
pasta Lesson_05_Graphics. Clique em Choose (Macintosh) ou Select (Windows) para
especificar a imagem como o fundo para a página.
A categoria Background talvez seja selecionada automaticamente porque já existe um
atributo aplicado à tag body: a cor de fundo amarelo claro, #FFFFCC.
172 LIÇÃO 5
Um nome de caminho, ou caminho, descreve a localização de um arquivo. O caminho
para imagem ys_bkg_main.gif agora é exibido no campo de texto Background image; a
localização descrita por esse caminho é relativa ao documento sangha.css. Se você não ti-
vesse salvado o arquivo ao adicionar uma imagem de fundo, o nome de caminho inteiro
para a imagem gráfica em relação ao seu disco rígido seria exibido no campo de texto. Até
que o arquivo seja salvo, o Dreamweaver não tem nenhuma maneira de fazer esses tipos
de referências, então um nome de caminho com base na localização da imagem em seu
disco rígido é colocado no lugar de um link válido. Quando o arquivo é salvo, o nome do
caminho é atualizado e muda para refletir a localização da imagem gráfica relativa ao do-
cumento que a contém. Sempre é melhor, porém, salvar seu arquivo antes de importar
quaisquer imagens gráficas – até mesmo imagens de fundo. Os nomes de caminhos relati-
vos à sua unidade de disco não funcionam no servidor remoto; se você inserir imagens
gráficas sem primeiro salvar sua página, corre o risco de ter imagens “quebradas”.
Se a imagem selecionada na caixa de diálogo Select Image Source estiver

fora de seu site local, o Dreamweaver exibe um alerta e lhe dá a opção de copiar o ar-
quivo para o site. As páginas e os elementos (HTML, imagens, multimídia etc.) que
você utiliza em seu site normalmente estarão localizados em sua pasta-raiz local.
Você também pode utilizar elementos que não existem em sua pasta-raiz local mas
que estão em algum local na Internet, seja no seu próprio site, seja em outra parte,
utilizando caminhos absolutos (abordados na Lição 3) – uma técnica que é freqüente-
mente utilizada para banners publicitários. Como esses itens não são exibidos na ja-
nela Document do Dreamweaver, você precisa visualizar sua(s) página(s) no navega-
dor para poder vê-la(s).
Você pode criar uma imagem de fundo em um editor de imagem como o Macromedia
Fireworks ou o Adobe Photoshop. Lembre-se de que imagens gráficas grandes podem au-
mentar significativamente o tamanho de uma página e o tempo de download – utilize
imagens gráficas menores sempre que possível. Quanto menor suas páginas, mais rapida-
mente elas serão carregadas; quanto mais rapidamente suas páginas são carregadas, maior
a probabilidade de seus visitantes permanecerem, navegarem e retornarem ao site.
Se estiver pensando em usar várias imagens de fundo, clique no botão Apply

para ver a imagem de fundo exibida em sua página sem fechar a caixa de diálogo Page
Properties.
Se quiser excluir uma imagem gráfica de fundo, abra a caixa de diálogo Page Properties e
exclua o nome do arquivo no campo de texto Background localizando a propriedade
Background para a página na lista Properties do painel CSS e alterando ou excluindo o
valor.

3. Escolha repeat-y no menu Repeat e clique em OK para fechar a caixa de diálogo
Page Properties.
As alterações são aplicadas ao documento, e a imagem de fundo ys_bkg_main.gif agora é

disposta lado a lado verticalmente na janela Document. A cor de fundo que você aplicou
na última lição pode ser vista se expandir a janela Document para a direita, depois do
ponto final da imagem gráfica de fundo.
Há diversas opções disponíveis para controlar a propriedade repeat da imagem de
fundo:
repeat-y dispõe a imagem gráfica de fundo selecionada lado a lado verticalmente
repeat-x dispõe a imagem gráfica lado a lado horizontalmente
repeat dispõe a imagem gráfica lado a lado tanto vertical como horizontalmente
no-repeat faz com que a imagem não seja disposta lado a lado
Por padrão, imagens de fundo são dispostas lado a lado tanto horizontal como verti-
calmente a menos que você aplique as propriedades repeat.
As outras opções disponíveis são estas:
Attachment permite especificar se a imagem de fundo deve permanecer fixa ou se

deve rolar com o restante da página – essa propriedade é utilizada com imagens de
fundo que não se repetem.
Horizontal position e Vertical position permitem controlar a posição da imagem de
fundo. O posicionamento pode ser feito selecionando as opções left (esquerda),
center (centro) ou right (direita) para posicionamento horizontal, e top (em cima),
center (centro) ou bottom (embaixo) para posicionamento vertical ou especifican-
do uma localização precisa com valores numéricos e uma unidade de medida, como
pixels.
174 LIÇÃO 5
Posicionando imagens gráficas na página
As imagens podem ser inseridas diretamente no corpo do documento, juntamente com
outro conteúdo, como texto. Neste exercício, você começará a incorporar imagens aos
seus documentos.
Neste livro, todas as imagens com as quais você trabalha já foram salvas como GIFs e
JPEGs para uso na Web. Você não precisará salvar nem otimizar qualquer imagem gráfica.
Formatos gráficos para a Web

Os formatos gráficos mais comuns e amplamente suportados na Web são GIF (Gra-
phics Interchange Format) e JPEG (Joint Photographic Experts Group). O processo de
salvar imagens para uso na Web é conhecido como otimização e pode ser feito com um
editor de imagens como o Macromedia Fireworks ou o Adobe Photoshop. Ao decidir se
salva uma imagem gráfica como GIF ou JPEG, objetive a qualidade mais alta e o menor
tamanho possível de imagem.
Como regra geral, GIFs devem ser utilizados se o trabalho artístico tiver grandes áreas
de cores sólidas, chapadas e pouca ou nenhuma mesclagem de cores. GIFs funcionam
bem com texto, imagens vetoriais, imagens com um número limitado de cores e dimen-
sões de imagem muito pequenas. Imagens GIF podem ser salvas, no máximo, utilizan-
do o modo de cor de 8 bits, em que somente 256 cores podem ser representadas. Os ar-
quivos GIF tendem a carregar mais rápido, têm mais opções de otimização e suportam
transparência e animação. A extensão utilizada para um arquivo GIF é .gif.
JPEGs são normalmente a melhor escolha para imagens fotográficas ou imagens com
um intervalo tonal grande. O formato JPEG trata da mistura de cores muito bem e pode
produzir imagens fotográficas com uma qualidade muito mais alta em uma fração do ta-
manho de um GIF. JPEG salva a imagem no modo de 24 de bits, retendo todas as cores
e utilizando uma forma de compactação com perda na qual os dados redundantes são
perdidos. Quanto mais baixa for a qualidade de um JPEG, mais informações da imagem
serão perdidas por meio desse descarte de dados. Devido à qualidade com perda dos
JPEGs, quaisquer edições sempre devem ser feitas no arquivo de origem para então se-
rem salvas novamente como JPEGs a fim de evitar a degradação da imagem. A exten-
são utilizada para um arquivo JPEG é .jpg.
Um terceiro formato gráfico, PNG (Portable Network Graphics), também é utilizado para
imagens da Web. O formato PNG foi concebido como uma substituição ao formato GIF
– ele combina recursos JPEG com GIF. Arquivos PNG são do tipo sem perda, podem ser
mais bem compactados que arquivos GIF e têm mais opções para controle de cores, po-
dem reter todas as cores como ocorre com um JPG ou utilizar um número limitado de
cores como ocorre com um GIF. Arquivos PNG não se destinam a substituir JPEGs. O
PNG não suporta animação e não é suportado por navegadores mais antigos. A exten-
são utilizada para um arquivo PNG é .png.

1. Posicione o ponto de inserção em frente do título Yoga Sangha na parte superior
do documento e pressione Return (Macintosh) ou Enter (Windows). Posicione o ponto
de inserção na nova linha em branco. Clique no botão de menu Images na categoria
Common da barra Insert; depois selecione a opção Image.
Image (Imagem)
A caixa de diálogo Select Image Source se abre, permitindo inserir uma imagem gráfica na
página. Um método alternativo é escolher Insert > Image.
Para usuários de Windows, a caixa de seleção Preview images fornece uma

opção útil que permite ver uma miniatura das imagens na qual você clica enquanto na-
vega. Quando essa opção é selecionada, as imagens são exibidas na caixa de diálogo
Select Image Source juntamente com suas dimensões, tamanho do arquivo e tempo
aproximado de download.
No Macintosh, não há nenhuma caixa de seleção Preview images; se estiver em
um modo de visualização de colunas, você vê a imagem de visualização com dimen-
sões, tamanho do arquivo e tempo aproximado de download no painel direito da caixa
de diálogo Select Image Source após selecionar uma imagem.
2. Localize o arquivo yoga_sangha-title.jpg na pasta Lesson_05_Graphics/Images.

A caixa de diálogo Select Image Source contém uma variedade de opções. Você pode
especificar a pasta a partir da qual deseja selecionar uma imagem utilizando o menu (sem
nome no Macintosh; chamado Look In no Windows) e selecionando da exibição de pasta
e arquivos abaixo do menu e das ferramentas de visualização. Os usuários de Macintosh
têm uma visualização hierárquica que permite rolar por diferentes níveis de arquivos e
pastas; usuários do Windows têm um menu Files Of Type que pode ser utilizado para li-
mitar a visualização a tipos específicos de arquivos e um campo de texto File Name que
exibe o nome do arquivo selecionado (normalmente, menos a extensão).
O campo de texto URL exibe o caminho que será utilizado pelo documento index.html
para acessar a imagem selecionada. Abaixo do campo de texto URL está o menu Relative
To. Configurada como Document por padrão, a opção Relative To permite escolher a
maneira como o Dreamweaver referencia imagens: com referências relativas ao documen-
to (a opção Document) ou relativas à raiz do site (a opção Site Root). Na referência relativa
ao documento, o Dreamweaver constrói o caminho para a imagem com base na localiza-
ção de seu documento HTML em relação ao arquivo gráfico. Quando Document é sele-
cionado no menu Relative To, o nome de arquivo do documento em que você está inse-
rindo a imagem aparece à direita do menu – neste caso você verá index.html. A referência
relativa à raiz do site constrói o caminho para a imagem com base na localização da ima-
gem selecionada em relação à raiz do site, também conhecida como primeiro nível da pas-
176 LIÇÃO 5
ta-raiz local. Se Site Root estiver selecionada, o nome do site aparecerá à direita do menu.
Geralmente, você deve utilizar links e caminhos relativos ao documento. Se tiver um site
ou planeja mover páginas freqüentemente, talvez você queira utilizar a referência relativa
à raiz do site. Durante todas as lições deste livro, você deve utilizar somente caminhos re-
lativos ao documento para imagens.
Há também várias opções adicionais na caixa de diálogo Select Image Source que são indi-
cadas para utilização com sites dinâmicos. No Macintosh, a seção Select File Name From lo-
calizada na parte inferior da caixa de diálogo contém um botão Data Sources e um botão
Sites And Servers; no Windows, a seção Select File Name From está localizada na parte
superior da caixa de diálogo e tem dois botões de opção: File System e Data Sources, bem
como um botão Sites And Servers. A opção File System é o método de seleção padrão no
Macintosh e no Windows para o projeto do site Yoga Sangha e outros semelhantes a ele que
não utilizam uma tecnologia de servidor (como ColdFusion, ASP, JSP ou PHP). As opções
Data Sources e Sites And Servers são utilizadas para sites dinâmicos em que um documento
executa em um servidor de aplicação. Você não precisa utilizar essas opções nas lições conti-
das neste livro porque não está criando um site dinâmico, com base em dados.

3. Clique em Choose (Macintosh) ou OK (Windows). Insira Yoga Sangha no campo
Alternate Text na caixa de diálogo Image Tag Accessibility Attributes e clique em OK.
A opção Alternate Text fornece a oportunidade de especificar texto que será exibido se os
usuários desativarem imagens gráficas, se seus navegadores não puderem exibir imagens
gráficas, se uma imagem particular não puder ser carregada ou se alguma outra situação
impedir que o usuário seja capaz de ver a imagem gráfica. O texto alternativo deve ser o
texto equivalente da imagem gráfica – ele deve descrever a função. Por exemplo, texto al-
ternativo deve ser incluído com quaisquer imagens gráficas que são cruciais para navega-
ção pelo site. É útil adicionar texto alternativo porque se os usuários desativarem as ima-
gens gráficas ou utilizarem um navegador somente de texto, eles poderão ver algumas in-
formações que, do contrário, não perceberiam. Além disso, as pessoas com deficiências
visuais utilizam vários programas, freqüentemente chamados leitores ou sintetizadores de
voz, que transmitem conteúdo nas páginas Web de uma maneira audível. Nesses casos, o
texto alternativo de uma imagem é falado. Muitos navegadores exibirão o texto alternati-
vo quando o usuário mover o ponteiro sobre a imagem. Quanto mais descritivo e detalha-
do seu texto alternativo é, mais útil ele será para usuários do seu site.
Às vezes, você pode ter imagens gráficas que servem a uma função estritamente visual e
não exibem palavras nem outra imagem que sejam importantes para o conteúdo de sua
página. Imagens espaçadoras, imagens gráficas invisíveis que ocupam certo espaço, são
um exemplo de imagens gráficas não-funcionais que podem dificultar para usuários com
deficiências visuais utilizarem seu site se elas forem rotuladas impropriamente com texto
alternativo. Para esses tipos de imagens, você deve clicar no botão do menu à direita do
campo de texto Alternative e selecionar <empty>. Evite configurar texto alternativo irrele-
vante – ele mais prejudica do que ajuda.
Neste exercício, o texto alternativo que você especificou é o mesmo que o texto mostra-
do na imagem. O texto alternativo é um atributo da tag <img>, que define imagens.
O texto alternativo pode ser modificado via o inspetor Property quando a ima-
gem é selecionada. O menu que contém a opção <empty> também está disponível no
inspetor Property.
178 LIÇÃO 5
Criando sites compatíveis
com Section 508 e WCAG
O objetivo da acessibilidade é criar sites que sejam acessíveis ao público mais amplo
possível. Tanto a Section 508 como a Web Content Accessibility Guidelines (WCAG),
descritos como a seguir, atendem à necessidade de acessibilidade na Web.
A Section 508 é uma emenda ao Rehabilitation Act de 1973, que requer que órgãos fe-
derais norte-americanos levem em consideração as necessidades das pessoas com de-
ficiências, assegurando que todos os usuários tenham uma oportunidade igual de aces-
sar o conteúdo disponibilizado por meio de tecnologias como a Internet. A seção 508 de-
fine os padrões necessários para que aqueles que possuem deficiências recebam infor-
mações e serviços comparáveis aos disponíveis aos usuários sem deficiências. Embora
a Seção 508 não seja obrigatória no setor privado, é importante que todos os sites Web
sigam a prática de criar código compatível sempre que possível por muitas razões. Con-
dições visuais, que variam desde visão fraca e daltonismo até cegueira total, afetam
uma parte significativa da população – e, portanto, seu público.
A WCAG foi desenvolvida pelo W3C para resolver um amplo espectro de problemas de
acessibilidade e fornecer um conjunto claro de diretrizes para o desenvolvimento de si-
tes acessíveis. Sites acessíveis também são importantes para WebTV, celulares e
PDAs. Informações adicionais podem ser encontradas em: http://www.w3.org/
TR/WAI-WEBCONTENT/.
Uma das soluções é criar uma versão alternativa somente de texto do seu site, mas isso
talvez não seja praticável nem mesmo necessário – particularmente dados os proble-
mas dos tipos de conteúdo e serviços oferecidos, quantidade de espaço disponível,
tempo e recursos necessários para criar páginas adicionais e requisitos extras para ma-
nutenção do site. Uma página somente de texto talvez nem mesmo seja acessível, de-
pendendo das técnicas utilizadas para criá-la e de seu conteúdo. Uma outra desvanta-
gem para sites somente de texto é que eles normalmente contêm menos informações
que suas contrapartes, e/ou sua funcionalidade é menor.
Incorporar recursos de acessibilidade a uma única versão do seu site normalmente é o
método mais apropriado. Isso fornece opções em um local para o maior número possível
de diferentes usuários e evita a duplicação do conteúdo e esforços de manutenção. Há al-
gumas maneiras de utilizar soluções integradas para resolver os problemas de acessibili-
dade sem criar um site duplicado e sem degradar o impacto visual do design das suas pá-
ginas. O Dreamweaver fornece maneiras fáceis de criar páginas Web acessíveis por meio
do uso de elementos como CSS, texto alternativo, descrições e resumos.
Para ativar ou desativar os prompts de acessibilidade, escolha Dreamweaver >

Preferences (Macintosh) ou Edit > Preferences (Windows) e selecione Accessibility
na lista de categorias. Desmarque as caixas de quaisquer elementos aos quais não de-
seja oferecer atributos de acessibilidade.

4. Exclua a linha de texto Yoga Sangha formatada como Heading 1 e salve o docu-
mento.
O título não é mais necessário porque a imagem contém o nome do site de projeto e o tex-
to alternativo foi incluído. O texto, bem como a linha em que ele está, deve ser excluído.
A imagem gráfica yoga_sangha-title.jpg foi salva como um JPEG devido ao

grande intervalo tonal por trás do texto. Para manter a qualidade das linhas para o tex-
to, a imagem foi salva como um JPEG de alta qualidade – resultando em um maior ta-
manho de arquivo. Como um JPEG de qualidade mais baixa, a mesma imagem mos-
traria mais artefatos JPEG – pequenos blocos em que os dados redundantes são des-
cartados, mais comuns nas áreas de cor sólida simples como no texto Yoga Sangha.
Nesse caso, JPEG foi a melhor opção para conciliar as necessidades entre as áreas fo-
tográficas e o texto.
Redimensionando e atualizando imagens gráficas

Ao importar uma imagem gráfica, a largura e a altura da imagem são mostradas no inspe-
tor Property e colocadas no código automaticamente; fornecendo ao navegador as infor-
mações necessárias para definir o layout da página. Essa opção importante pode fazer
uma diferença na velocidade de carregamento de sua página.
1. Selecione a imagem yoga_sangha-title.jpg image e utilize o inspetor Property para

mudar a largura no campo de texto W para 220 pixels e a altura no campo de texto H
para 40 pixels.
É preciso pressionar Return (Macintosh) ou Enter (Windows) ou clicar na janela Docu-
ment para aplicar a alteração e atualizar a visualização.
Os novos atributos de largura e de altura da tag <img> (imagem) fazem com que essa
imagem gráfica apareça em dimensões menores sem tornar o arquivo gráfico real menor.
Note que o tamanho do arquivo da imagem selecionada que é exibido no inspetor Pro-
perty não muda. Há muitas vantagens importantes em restringir todos os ajustes de ima-
gem para serem realizados em um editor de imagem, incluindo nitidez, qualidade de ima-
gem e tamanho do arquivo. Se você tivesse de reduzir a mesma imagem em um editor de
imagem e reotimizá-la para a Web, o arquivo seria menor no tamanho e melhor na quali-
dade de imagem.
180 LIÇÃO 5
O tamanho do arquivo é uma consideração especialmente importante para pá-
ginas Web. Quanto menor o tamanho do arquivo, mais rápido o carregamento das ima-
gens. E quanto mais rápido o carregamento de páginas, maior a probabilidade de os vi-
sitantes esperarem o tempo suficiente para ver seu site.
2. Clique em uma das alças de seleção – os quadrados pretos – na borda da imagem sele-
cionada. Arraste para redimensionar a imagem e torná-la maior que seu tamanho original.
As especificações de largura e de altura são atualizadas automaticamente. Note que as novas
dimensões são exibidas em negrito. Essa formatação em negrito é um indicador de que a
imagem gráfica foi redimensionada. Às vezes, você pode redimensionar uma imagem gráfi-
ca acidentalmente, e os números em negrito ajudarão a alertar sobre essa alteração.
Mantenha pressionada a tecla Shift enquanto arrasta as alças de seleção do

canto inferior da imagem para restringir as proporções da imagem.
Note que quando você ampliou a imagem, sua qualidade diminuiu. As imagens são
exibidas nos navegadores em resolução de tela, que é de 72 dpi. Essa resolução não é sufi-
cientemente alta para exibir uma imagem em um tamanho que seja maior do que o tama-
nho real da imagem gráfica – outra razão para sempre ajustar o tamanho de imagem em
seu software de edição de imagem (como Macromedia Fireworks ou Adobe Photoshop)
para assegurar que você tenha o menor tamanho de arquivo possível.
3. No inspetor Property, clique no botão Reset Image To Original Size localizado à di-
reita dos campos W e H.
O ícone de atualização indica o botão Reset Image To Original Size. Ele está no centro das
linhas conectando os campos W e H. O ícone de atualização e as linhas conectoras forne-
cem uma outra indicação de que as dimensões da imagem foram alteradas – ele só aparece
quando as dimensões da imagem foram modificadas. A imagem é redefinida para o tama-
nho original da imagem gráfica. Note que os números de largura e de altura revertem para
texto simples, indicando que a imagem está configurada no tamanho original.
Ao utilizar imagens muito grandes ou imagens que estejam localizadas em outros

servidores, você pode fornecer um indício visual aos visualizadores usando uma imagem de
origem baixa. Ao definir uma origem baixa, você está escolhendo uma imagem de qualida-
de inferior que aparecerá primeiro. A imagem de qualidade superior aparecerá em seu lugar
quando o download estiver concluído. Quando uma imagem é selecionada, o inspetor Pro-
perty fornece um campo de texto Low Src para definir uma imagem de baixa resolução. Cli-
que no ícone Browse For File Folder ao lado do campo para escolher uma imagem. Essa
técnica é às vezes utilizada quando você sabe que a imagem final terá um grande tamanho
do arquivo e, portanto, levará mais tempo de download do que um usuário poderia esperar
ou se a imagem está sendo obtida de uma origem que poderia experimentar freqüentes
lentidões ou atrasos. As imagens de baixa resolução utilizadas nessas situações freqüente-
mente apresentam “loading” (“carregando”) ou mensagens semelhantes.

Posicionando imagens gráficas
Quando você posiciona uma imagem em um documento, há algumas opções disponíveis.
O exercício a seguir demonstra um método para criar um alinhamento que utiliza CSS.
1. No index.html, posicione o ponto de inserção no começo da linha At Yoga Sangha,

we’re dedicated to teaching… Insira studio-om.jpg, localizado na pasta Les-
son_05_Graphics/Images.
Utilize as técnicas aprendidas no exercício anterior “Posicionando imagens gráficas na
página”, nesta lição, para inserir a imagem studio-om.jpg. Por padrão, a imagem aparece
no começo da linha de texto.
Nos passos a seguir, você utilizará CSS para alinhar a imagem à esquerda e dispor o tex-
to à direita dela.
2. Clique no botão New CSS Rule no painel CSS Styles. Selecione Class Selector
Type e insira .studioPhoto no campo de texto Name e clique em OK. Na caixa de diálo-
go CSS Rule Definition, selecione a categoria Box, escolha left (esquerda) no menu
Float e clique em OK.
Cada elemento em um documento é considerado como uma caixa. A CSS utiliza o con-
ceito de caixa para controlar a aparência, o posicionamento de um elemento e assim por
diante. Os elementos – e, portanto, as caixas que os representam – podem ser blocos ou
inline, e cada caixa pode conter outras caixas. Aqui, você está utilizando a caixa para con-
trolar a posição do elemento da imagem inline à qual aplicará a classe studioPhoto. Float é
um dos três métodos de posicionamento; os outros dois são absolute e fixed.
Escolher um left float faz com que o bloco afetado – o elemento ao qual a classe studio-
Photo é aplicada – mude para a margem esquerda do bloco que a contém. O corpo do do-
cumento é considerado como uma caixa e, em alguns casos, poderia ser considerado
como o bloco que o contém. A parte superior do elemento flutuante se alinhará com a
parte superior do bloco em que ela está, e o conteúdo adjacente fluirá em torno do ele-
mento flutuante.
182 LIÇÃO 5
3. Selecione a imagem studio-om.jpg na janela Document e escolha studioPhoto do
menu Class no inspetor Property.
A imagem muda para o lado esquerdo da página e se alinha com a parte superior do bloco
de parágrafo que a contém. O texto subseqüente é disposto em torno da imagem gráfica à
direita.
Trabalhando com o atributo Align

O Dreamweaver fornece acesso rápido às opções de alinhamento de imagem no inspe-
tor Property por meio de um menu de opções de alinhamento horizontal e vertical. Cada
uma das opções de alinhamento disponíveis nesse menu utiliza o atributo align da tag
<img>. O uso do atributo Align como aplicado a uma tag <img> é obsoleto porque é uma
marcação inline decorativa. Mas talvez você precise conhecer essa funcionalidade se
estiver trabalhando em sites mais antigos. As opções de alinhamento funcionam em re-
lação à linha atual – onde a imagem está localizada – como a seguir:
• Default. Nenhum atributo align é especificado.
• Baseline. Alinha a parte inferior da imagem com a linha de base da linha do texto.
• Top. Alinha a parte superior da imagem com o elemento mais alto da linha, que ele
pode ser uma imagem.
• Middle. Alinha o meio da imagem com a linha de base da linha do texto.
• Bottom. Alinha a parte inferior da imagem com a linha de base da linha do texto – o
equivalente à opção Baseline.
• TextTop. Alinha a parte superior da imagem com o caractere mais alto da linha do
texto; normalmente, mas nem sempre, o mesmo que Top.
• Absolute Middle. Alinha o meio da imagem de acordo com o meio da linha de texto.
• Absolute Bottom. Alinha a parte inferior da imagem com o caractere mais baixo da
linha do texto.
• Left. Faz com que a imagem se desloque para a esquerda – qualquer texto subse-
qüente contorna o lado direito da imagem.
• Right. Faz com que a imagem se desloque para a direita – qualquer texto subseqüen-
te contorna o lado esquerdo da imagem.
As opções de alinhamento no menu não são as mesmas dos botões de alinhamento
Left, Center e Right. Elas são aplicadas à tag <img>, enquanto os três botões de alinha-
mento se aplicam ao elemento do bloco que contém as imagens, como a tag <p> e, por-
tanto, tudo o mais contido dentro dessa tag é afetado pelo alinhamento porque faz parte
do mesmo bloco.

Adicionando uma borda em torno de uma imagem
Às vezes, você precisa configurar uma imagem separadamente do fundo e do conteúdo cir-
cundante para destacá-la. Uma maneira de criar esse efeito é colocar uma borda em torno
da imagem. Uma borda atrai a atenção para uma imagem e pode ser parte uma aparência
estilística por todo um site. Às vezes, uma borda também pode indicar um link. Há duas
maneiras de definir uma borda – neste exercício, você utilizará CSS para criá-la, mas tam-
bém aprenderá sobre o segundo método de aplicar o atributo de borda à tag de imagem.
1. Selecione a regra studioPhoto na lista All Rules no painel CSS Styles e clique no
botão Edit Style na parte inferior do painel.
As regras aparecem na ordem em que você as criou, com a mais antiga na parte superior
da lista e a mais recente na parte inferior.
2. Na caixa de diálogo CSS Rule Definition, selecione a categoria Border. Escolha so-
lid (sólido) nas opções Style, insira 1 no campo de texto Top para a seção Width e es-
colha #747E3F. Clique em OK para fechar a caixa de diálogo e aplicar a alteração.
O Dreamweaver adiciona uma borda de um pixel em torno da imagem. A configuração
de borda utiliza medidas baseadas em pixels, o padrão na caixa de diálogo Rule Defini-
tion. Você pode configurar a largura da borda com qualquer número que desejar.
184 LIÇÃO 5
Também é possível aplicar uma borda a uma imagem utilizando o atributo de
borda da tag <img>. Para isso, selecione a imagem e insira um valor para a espessura
desejada no campo de texto Border no inspetor Property. Se atribuir um link a uma
imagem, a cor da borda será a mesma da Link Color padrão especificada em Page Pro-
perties – a menos que um estilo CSS seja aplicado, caso em que um link não causará
nenhuma alteração na cor da borda. A cor da borda será a mesma cor de texto padrão
especificada na caixa de diálogo Page Properties. O exemplo a seguir mostra uma ima-
gem que tem um atributo de borda aplicado pelo inspetor Property. Evitar o atributo de
borda em favor do uso de CSS para definir as bordas da imagem, como fez neste exer-
cício, é um processo de codificação mais adequado.
Atribuindo nomes a imagens

Nomes de imagens são partes importantes, embora amplamente invisíveis, das páginas
Web. Geralmente, uma boa prática é atribuir nomes a imagens – eles são utilizados no
script para identificar o objeto.
Selecione a imagem yoga_sangha-title.jpg e insira Yoga no campo de texto de nome de
imagem no inspetor Property.
O campo de texto do nome da imagem não é rotulado no inspetor Property. Ele está lo-
calizado no canto superior esquerdo, diretamente sob o tamanho da imagem.
Campo de texto Image Name (Nome da imagem)
O nome atribuído à imagem é interno, utilizado principalmente para funções como

Behaviors (abordada na Lição 8). Embora não seja essencial, nomear as imagens é uma
boa prática. Você deve utilizar nomes de imagem breves, inseri-los em letras minúsculas e
evitar espaços ou caracteres especiais.

Inserindo uma imagem a partir do painel Assets
O painel Assets fornece a capacidade de organizar os componentes do site a partir do
Dreamweaver. Você pode utilizá-lo para visualizar e catalogar uma ampla variedade de
elementos de mídia e de página. Por exemplo, pode ser difícil gerenciar todas as suas ima-
gens, especialmente se estiver trabalhando em um site grande. O painel Assets proporcio-
na uma maneira de monitorar essas imagens.
1. Selecione o painel Assets no grupo de painéis Files. Clique no botão Images locali-
zado na parte superior da coluna de botões no lado esquerdo do painel Assets.
Se o painel Assets ou o grupo de painéis Files não estiver visível, escolha Win-
dow > Assets para abrir o painel Assets dentro do grupo de painéis Files.
Os outros botões ao longo do lado esquerdo do painel Assets representam diferen-

tes tipos de recursos que podem ser disponibilizados para seu site, incluindo cores.
Você pode trabalhar com o painel Assets de duas maneiras: visualizando-o com a lista
Site, que fornece uma lista completa das imagens em seu site; ou visualizando-o com a lis-
ta Favorites, que mostra somente as imagens que você marcou como favoritas. As duas vi-
sualizações permitem adicionar uma imagem selecionada à sua página.
Botão Images
186 LIÇÃO 5
2. Clique no botão Images: Site (à direita do botão Images) na parte superior do pai-
nel Assets se ainda não estiver selecionado (como deveria estar por padrão).
No site de projeto Yoga Sangha, você verá diversas cópias da maioria das ima-
gens listadas na parte Images do painel Assets, uma vez que há várias cópias de cada
imagem no site como resultado do fato de que os arquivos foram duplicados em cada
pasta de lição, bem como na respectiva pasta completada. Em seus próprios sites,
você não enfrentará essa situação, a menos que tenha várias pastas contendo várias
das mesmas imagens. Os GIFs espaçadores e as imagens de navegação às vezes es-
tão contidos em diversas pastas de imagem. Normalmente não é necessário ter várias
cópias de uma imagem porque você pode utilizar as imagens provenientes de qual-
quer localização em seu site. De fato, múltiplas imagens talvez não sejam desejáveis –
se você atualizar uma imagem, talvez seja necessário fazer alterações em alguns ar-
quivos se tiver múltiplas cópias da mesma imagem.
Todas as imagens dentro do site são mostradas na janela Site Assets. As imagens aparecem
nessa janela automaticamente, sejam ou não utilizadas em qualquer documento. Pode
demorar alguns segundos para o painel criar um catálogo dos recursos de imagem dispo-
níveis para seu site.
Se não ativou o cache para seu site quando ele foi criado, o Dreamweaver pedi-
rá para você clicar no botão de atualização no painel Assets a fim de ativar e criar o ca-
che. O cache é ativado por padrão e é automaticamente criado, a menos que você des-
marque a caixa Enable Cache na caixa de diálogo Site Definition para seu site.
Se você adicionar um novo recurso a seu site, ele pode não aparecer no painel Assets
imediatamente. Para atualizar o painel de modo a corresponder a todas as imagens em seu
site, é preciso atualizar o catálogo de site. Para isso, clique no botão Refresh Site List no
canto inferior direito do painel Assets.
3. Posicione o ponto de inserção no começo do parágrafo que inicia com Yoga

Sangha was founded by Katchie Ananda and Jayne Hillman. Localize a imagem gráfi-
ca teaching.jpg no painel Assets localizada na pasta Lesson_05_Graphics/Images e
clique no botão Insert.
Você também pode selecionar a imagem no painel Assets e arrastá-la para o lo-
cal desejado.
Você pode descobrir onde um arquivo gráfico está localizado selecionando o arquivo no
painel Assets, clicando com as teclas CMD pressionadas para o menu de contexto e esco-
lhendo Locate In Site.
A expansão do painel Assets horizontalmente permitirá ver a coluna Full Path, que
você pode utilizar para determinar onde as imagens estão localizadas. No Macintosh,

você pode expandir o painel clicando e arrastando o canto inferior direito para a direita –
você pode precisar mover o painel ou o grupo de painéis para a esquerda primeiro de
modo que tenha espaço para expandir o painel. No Windows você pode clicar na barra
vertical que separa os painéis do restante da interface e arrastá-la para esquerda.
A imagem aparece na janela Document.

À medida que selecionar imagens no painel Assets, você verá uma visualização de mi-
niatura na parte superior do painel. É possível expandir a miniatura aumentando a área
de visualização disponível (posicione o cursor sobre a borda inferior da área de visualiza-
ção e arraste para redimensionar) e/ou expandindo o painel Assets inteiro. Você pode fa-
cilmente selecionar uma imagem do painel Assets e clicar no ícone Edit para abri-la em
seu programa de edição de imagens padrão.
Ao clicar nos cabeçalhos de coluna, a lista de imagens será reordenada. Por exemplo,
clicando-se no cabeçalho da coluna Name, reordenam-se as imagens alfabeticamente em
ordem ascendente (indicada por uma seta apontando para cima) ou ordem descendente
(indicado por uma seta apontando para baixo). Você pode utilizar o cabeçalho das outras
colunas para classificar por tamanho, tipo e caminho completo. Pode ser necessário rolar
para a direita para ver as outras colunas. Se você vir um sinal de reticências (...) em uma
coluna ou cabeçalho de coluna, será preciso expandir o painel para visualizar o conteúdo
dessa coluna. Depois que o painel Assets estiver em foco (clique em uma imagem na lista
para trazê-la ao foco), você pode inserir a primeira letra (ou as primeiras letras em suces-
são rápida) do arquivo que estiver procurando para selecioná-lo.
188 LIÇÃO 5
Esta imagem fotográfica foi salva como JPEG. A mesma imagem apareceria
posterizada (graduações grosseiras, com bordas serrilhadas e cores causando notável
pixelização) se fosse salva como uma imagem GIF, pois todas as diferentes sombras
seriam mapeadas para apenas algumas cores. Neste caso, JPEG foi a melhor opção.
4. No campo de texto Alternate Text na caixa de diálogo Image Tag Accessibility Attri-
butes, insira A Yoga Sangha Teacher e clique em OK. Na janela Document, selecione a
imagem que você acabou de inserir e insira teacher no campo de texto do nome da
imagem no inspetor Property. Aplique a classe studioPhoto CSS à imagem.
Atribuir nomes e fornecer texto alt às suas imagens à medida que as insere poupa-lhe
tempo e facilita o trabalho com elas na visualização Code posteriormente, caso seja
necessário.
Neste ponto, seu documento deve ser semelhante ao exemplo anterior.

Gerenciando imagens com a lista Favorites
Colocar as imagens que você utiliza repetidamente na lista Favorites pode poupar tempo.
Você pode adicionar qualquer imagem contida no site à sua lista Favorites. Cada site pos-
sui sua própria lista Favorites. Essa lista está vazia quando você começa a utilizar o Dream-
weaver. No exercício a seguir, você adicionará uma imagem da categoria Site à sua lista
Favorites e depois organizará essa lista.
1. Na lista Site do painel Assets, selecione teaching.jpg e clique no botão Add To Fa-
vorites, localizado no canto inferior direito.
Add To Favorites
Uma caixa de diálogo aparece, permitindo que você saiba que os recursos selecionados fo-
ram adicionados à lista Favorites deste site. Escolha OK para reconhecer a mensagem e fe-
char a caixa de diálogo.
Há vários métodos alternativos de adicionar uma imagem à lista Favorites.

Você pode selecionar uma imagem no painel Files e utilizar o menu de contexto no
canto superior direito desse painel para escolher Add To Favorites (usuários do Macin-
tosh). Um outro método é colocar em Favorites uma imagem na janela Document.
Para isso, clique em Ctrl (Macintosh) ou clique com o botão direito do mouse (Win-
dows) na imagem e escolha Add To Image Favorites no menu de contexto que apare-
ce. Esse menu de contexto contém diversas opções e também funciona para outros
elementos, como links e objetos Flash.
190 LIÇÃO 5
2. Utilize as opções Images na parte superior do painel Assets para selecionar o bo-
tão de opção Images: Favorites.
O painel Assets agora exibe a lista de favoritos, com a imagem que você adicionou no pas-
so anterior.
Quando começar a gerenciar suas imagens pelo painel Assets, provavelmente precisará
remover e adicionar imagens. Quando uma imagem é selecionada na lista Favorites, o bo-
tão Add To Favorites torna-se o botão Remove From Favorites. Ao clicar em Remove
From Favorites, a imagem selecionada desaparece da lista.
Nas listas Site e Favorites na categoria Images você pode utilizar o menu de
contexto para encontrar o local de uma imagem em particular no seu site. Para isso,
selecione uma imagem e escolha Locate In Site no menu de contexto. O painel Files
torna-se ativo, com a imagem selecionada na estrutura de site.
3. Clique no ícone da New Favorites Folder na parte inferior do painel. No campo de

texto de nome da pasta que aparece, substitua o nome padrão untitled por Teachers e
pressione Return (Macintosh) ou Enter (Windows).
Você pode organizar suas imagens nas pastas para facilitar sua localização.
Também é possível selecionar a opção New Favorites Folder no menu de con-

texto. Ela está disponível somente no menu de contexto quando você estiver visuali-
zando a seção Favorites da categoria Images.
4. Arraste a imagem teaching.jpg para a pasta Teachers.

Você pode dar um clique duplo no pequeno ícone da pasta para ver seu conteúdo e dar
um clique duplo novamente para recolher a pasta. As imagens contidas dentro de uma
pasta aparecerão abaixo e ligeiramente recuadas da pasta.
Se precisar excluir uma pasta criada na lista Favorites, selecione a pasta e de-
pois clique em Remove From Favorites na parte inferior do painel Assets.
Ajustando o espaço em torno de uma imagem

Quando você faz o texto se ajustar em torno de imagens, talvez seja preciso ajustar tam-
bém o espaço em torno da imagem. Inicialmente, o texto em seu documento estará muito
perto da imagem, o que pode dificultar a leitura. A criação de certa quantidade de espaço
melhorará o layout visual de sua página. As configurações de espaço utilizam uma medida
baseada em pixel.

1. Selecione a regra studioPhoto da lista All Rules no painel CSS Styles e clique no
botão Edit Style na parte inferior do painel.
Nesse momento, o texto está muito perto da borda dessa imagem. A página pareceria me-
lhor e o texto seria mais fácil de ler se fosse adicionado um espaço em torno da imagem.
2. Na caixa de diálogo CSS Rule Definition, selecione a categoria Box. Na área Margin
da caixa de diálogo, desmarque a caixa Same For All, insira 5 tanto nos campos de
texto right como bottom Margin e pressione Return (Macintosh) ou Enter (Windows).
Essa configuração cria 10 pixels de espaço nos lados direito e inferior da imagem. Com a
CSS, você pode controlar a quantidade de espaço em cada lado do elemento individual-
mente. Isso é útil em uma situação em que a parte superior da imagem deve ser alinhada
com a parte superior da linha do texto e o lado esquerdo da imagem deve ser alinhado
com a borda esquerda do texto.
Você também pode adicionar espaço a uma imagem definindo os atributos

space H (espaço horizontal) e space V (espaço vertical) da tag <img>. Esses atributos
adicionam espaço igual aos dois lados de uma imagem, seja horizontal ou verticalmen-
te – você não pode adicionar espaço a apenas um dos lados, a menos que utilize CSS.
É possível definir esses atributos por meio dos campos de texto V space e H space no
inspetor Property.
192 LIÇÃO 5
Inserindo um marcador de lugar de imagem
Você tem a opção de inserir um marcador de lugar de imagem se não tiver a imagem final.
Um marcador de lugar pode ser inserido e utilizado para ter uma aparência aproximada
da imagem final na página em combinação com texto, tabelas ou outros elementos.
1. Posicione o ponto de inserção no final da descrição do anúncio Anusara Yoga

Immersion e pressione Return (Macintosh) ou Enter (Windows) para criar um novo pa-
rágrafo. Na categoria Common da barra Insert, clique no menu Images e selecione a
opção Image Placeholder.
Marcador de lugar de imagem
A caixa de diálogo Image Placeholder aparece.
A largura e altura padrão para um marcador de lugar da imagem é 32×32 pixels.
2. No campo de texto Name, insira class. Configure a largura como 176 e a altura
como 132. Clique na caixa de cores e utilize as amostras para selecionar preto; então,
insira a class at Yoga Sangha no campo de texto Alternate. Clique em OK.
O marcador de lugar de imagem aparece na janela Document. Ele é preto e exibe o
nome e as dimensões da imagem.
Se você tiver o Fireworks instalado e configurá-lo como o editor padrão de

seus arquivos de imagem, pode selecionar a imagem marcadora de lugar na janela Do-
cument e clicar no botão Create no inspetor Property para abrir um documento do Fire-
works no tamanho especificado para o marcador de lugar. Ao salvar esse documento,
o nome utilizado para a imagem de marcador de lugar automaticamente é atribuído no
campo de texto Save As do Fireworks.

Quando você visualiza sua página em um navegador, o marcador de lugar de imagem exi-
be um ícone de imagem “quebrada” junto com o texto alt dentro de uma caixa com as di-
mensões e a cor definidas na caixa de diálogo Image Placeholder. Para substituir isso, é ne-
cessário fazer a troca do marcador de lugar de imagem pela imagem pretendida, confor-
me é descrito no próximo exercício.
Sua página agora deve ser semelhante a esse exemplo.
Substituindo um marcador de lugar de imagem

Depois de criar a imagem gráfica final ou receber a imagem necessária de seu cliente, você
precisa substituir o marcador de lugar de imagem utilizado para obter um layout aproxi-
mado.
Você também pode usar essa mesma técnica para substituir uma imagem por
outra.
1. Dê um clique duplo no marcador de lugar de imagem na janela Document.

A caixa de diálogo Select Image Source se abre.
2. Selecione class.jpg na pasta Lesson_05_Graphics/Images e clique em Choose

(Macintosh) ou OK (Windows).
A imagem substitui o marcador de lugar na janela Document. O nome e o texto alt que fo-
ram atribuídos ao marcador de lugar de imagem agora são aplicados à imagem.
194 LIÇÃO 5
Configurando as preferências de edição de
imagens
Ao criar páginas Web com o Dreamweaver você pode achar que precisa modificar as ima-
gens utilizadas. Para edições extensas, você precisará abrir e ajustar a imagem em um pro-
grama de edição de imagens externo. O Dreamweaver facilita esse processo fornecendo
uma maneira rápida para abrir a imagem em um programa que você especifica.
1. Escolha Dreamweaver Preferences (Macintosh) ou Edit > Preferences (Windows)

e selecione File Types/Editors na lista Category da caixa de diálogo Preferences.
Você pode utilizar essa caixa de diálogo para atribuir diferentes programas externos como
editores padrão de acordo com as extensões de arquivo.
A produção com Dreamweaver 8, Flash e Fireworks pode ser totalmente inte-

grada, conhecida como edição roundtrip (ou edição de “ida e volta”), um recurso que
possibilita que as atualizações do arquivo sejam transferidas entre os programas. Para
esse recurso funcionar, o Fireworks deve ser o editor de imagens padrão.
2. Selecione .gif na lista Extensions. Clique no botão de adição (+) acima da lista Edi-
tors e selecione um programa de edição de imagem como o Fireworks. Com o progra-
ma selecionado na lista de aplicações, clique no botão Make Primary para configurar
o programa como o editor padrão de todos os arquivos GIF.

Para especificar um programa de edição, certifique-se de utilizar os botões aci-
ma da lista Editors. Os botões acima da lista Extensions são para adicionar outras ex-
tensões.
Se você não tem um programa de edição de imagem, pode pular este passo.
Se tiver um programa de edição de imagem, repita esse passo para arquivos JPEG e
PNG.
Uma versão de avaliação do Fireworks também é fornecida no CD-ROM.
3. Selecione a imagem yoga_sangha-title.jpg.

O inspetor Property para imagens realça um botão Edit (que se parece com um ícone do
Fireworks) na metade superior à direita do painel, bem como uma opção Optimize In Fi-
reworks. A opção Edit é uma maneira rápida de abrir e modificar suas imagens em um
editor de imagens externo, desde que você tenha definido um editor de imagens padrão,
como foi detalhado no passo anterior.
Edição de imagem básica

Várias funções de edição de imagem básica estão disponíveis diretamente no Dreamwea-
ver, permitindo alterar imagens sem a necessidade de um editor externo. Embora você
precise de um editor de imagens externo para criar inicialmente as imagens para seu site
ou fazer alterações importantes, agora pode fazer várias modificações – incluindo cortar,
ajustar o contraste e definir a nitidez – na janela Document do Dreamweaver utilizando
os recursos integrados de edição de imagens do Fireworks.
1. Selecione a imagem class.jpg.

As opções Image Editing aparecem no inspetor Property.
196 LIÇÃO 5
2. Clique na ferramenta Crop no inspetor Property.
Uma caixa de alerta informa que a operação irá alterar o arquivo da imagem real em seu
disco. Você pode clicar na caixa de diálogo Don’t Show Me This Message Again para não
ver essa mensagem novamente. Clique em OK para continuar.
Uma área de seleção aparece dentro da imagem, indicada por uma linha preta sólida
(Macintosh) ou uma linha tracejada (Windows). As alças de seleção estão localizadas nos
cantos e centros de cada lado da área de seleção. Pode ser difícil ver a área de seleção em
imagens escuras. Por padrão, a área de seleção é ligeiramente menor que a imagem e tem
aproximadamente as mesmas proporções. A área dentro da seleção é clara; a área fora da
seleção é acinzentada para mostrar o que será cortado. O cursor, quando colocado no
centro da área de seleção, transforma-se em uma mão (Macintosh) ou em mira com setas
(Windows) de modo que você pode clicar e arrastar para mover para a área de seleção.
Você pode clicar o cursor em qualquer uma das alças e arrastar para reduzir ou expandir o
tamanho da área de seleção.
3. Ajuste o tamanho da área de corte de modo que ela seja menor que a imagem origi-
nal e então pressione Return (Macintosh) ou Enter (Windows) para cortar a imagem.
Você também pode dar um clique duplo na área de seleção ou clicar no ícone
de corte no inspetor Property a fim de aplicar a alteração. Para cancelar o corte, clique
em qualquer parte na janela Document fora da imagem.
A imagem agora está cortada na área que você selecionou. Você pode notar que o ta-
manho do arquivo da imagem é reduzido; o tamanho resultante depende da quantidade
da imagem que você cortou. O tamanho original da imagem class.jpg foi de aproximada-
mente 7 KB. O tamanho de imagem é fornecido próximo ao canto superior esquerdo do
inspetor Property quando a imagem é selecionada.

Se você altera uma imagem utilizando as ferramentas de Image do Dreamwea-
ver, todas as instâncias dessa imagem no seu site se alterarão. Se não é isso o que
você pretende, talvez seja bom fazer uma duplicata da imagem e realizar seus ajustes
na cópia. Se você fizer um corte e decidir que não gosta dele, pode reverter para a ima-
gem original utilizando o comando para desfazer do Dreamweaver. Escolha Edit >
Undo Crop ou utilize o comando de teclado Cmd+Z (Macintosh) ou Ctrl+Z (Windows)
para retornar à imagem original.
4. Com a imagem class.jpg selecionada, clique na ferramenta Brightness And Con-

trast no inspetor Property. Altere o brilho para +25 e clique em OK.
O alerta informa que o arquivo de imagem será alterado. Clique em OK para continuar.
A caixa de diálogo de Brightness/Contrast aparece, com um controle deslizante para
Brightness e um para Contrast. Os controles deslizantes variam de –100 a +100 com o
centro e padrão sendo 0. Você pode digitar qualquer valor dentro do intervalo nos cam-
pos de texto ou clicar e arrastar os controles deslizantes. Mover um controle deslizante
para a esquerda, para os números negativos, diminui o brilho ou reduz o contraste; mover
um controle deslizante para a direita, para os números positivos, aumenta o brilho ou o
contraste.
A caixa Preview é marcada por padrão – isso permite que você veja imediatamente os
efeitos de seus ajustes na janela Document do Dreamweaver.
A mudança de brilho aplicada neste passo é relativamente drástica, de modo

que você pode ver claramente o efeito sobre a imagem. Tome cuidado com essa op-
ção porque ela pode afetar seriamente a qualidade de uma imagem se for utilizada ex-
cessivamente.
5. Com a imagem class.jpg selecionada, clique na ferramenta Sharpen no inspetor

Property. Ajuste o valor de controle deslizante para 2 e clique em OK.
O alerta informa que o arquivo de imagem será alterado. Clique em OK para continuar.
A caixa de diálogo Sharpen utiliza um controle deslizante com um intervalo de 0 a 10 e,
como o recurso Brightness and Contrast, tem uma opção Preview ativada por padrão.
Você pode repetir essa função se necessário. Tome cuidado ao utilizar essa opção por-
que ela pode afetar seriamente a qualidade de uma imagem se for usada excessivamente.
O ajuste extremo da nitidez pode fazer com que a imagem pareça pixelizada.
198 LIÇÃO 5
As opções de edição de imagem adicionais no inspetor Property incluem Edit,
Otimize In Fireworks e Resample. Você deve ter o Fireworks instalado para obter van-
tagem da opção para otimizar arquivos. A caixa de diálogo Optimize Images permite fa-
zer diversas alterações, incluindo alternar o formato de imagens, ajustar a qualidade
(JPEGs) e ajustar a paleta de cores (GIFs). Lembre-se de que você pode reduzir a quali-
dade de uma imagem e reduzir seu tamanho do arquivo, mas não pode aumentar a
qualidade. Para obter uma melhor imagem, é preciso utilizar arquivos-fonte originais.
O Launch External Editor abre em qualquer editor que você tenha definido como Pri-
mary em Preferences, o que foi feito no início desta lição. A ferramenta Resample for-
nece a opção de aumentar ou diminuir a resolução de suas imagens. É sempre melhor
começar com um arquivo de resolução mais alta e diminuir a resolução para o tamanho
desejado, em vez de aumentar um arquivo de baixa resolução. Mesmo ao aumentar a
resolução, você não pode melhorar a qualidade de uma imagem que não está presente
para iniciar. A Resolução Web é 72 ppi (pixels por polegada).
Criando links para imagens gráficas

Você também pode utilizar imagens para vincular documentos dentro do seu site, bem
como para sites além do seu próprio. Este exercício mostra como criar um link externo. Uti-
lize as mesmas técnicas do exercício anterior para vincular imagens a arquivos no seu site.
1. Clique na imagem gráfica class.jpg para selecioná-la. Insira schedule/immersi-

on-details.html no campo de texto Link do inspetor Property.
Esse link é um caminho relativo. Você pode utilizar imagens gráficas para fornecer links
de maneira tão fácil quanto texto. O arquivo immersion-details.html não existe na pasta
schedule. Você pode usar esse método para inserir links para páginas que ainda não foram
criadas.
Lembre-se, você deve usar um caminho absoluto para vincular um documento que
está localizado fora da sua estrutura de arquivos local ou a qualquer coisa que está fora da
pasta-raiz. Um link absoluto inicia com http:// (Hypertext Transfer Protocol) para indi-
car que o usuário está se conectando a um servidor Web. O restante do link absoluto espe-
cifica o endereço do site vinculado. Todos os links para documentos que existem em Web
sites externos são links absolutos.
Se um URL for longo ou complexo, você pode navegar até esse site, copiar e
colar o URL no campo de texto Link.

Observe que ao passar o mouse sobre as imagens gráficas na parte inferior da página,
você vê a mão indicando que elas estão vinculadas. Dependendo do seu navegador, as
localizações dos links podem aparecer na barra de status do navegador à medida que
rola pelos links.
Criando mapas de imagens

No exercício anterior, você viu como é fácil aplicar um link a uma imagem. O usuário
pode clicar em qualquer parte da imagem para ir para a página vinculada. Você também
tem a opção de dividir a imagem em várias áreas vinculadas chamadas pontos ativos (hots-
pots) utilizando um mapa de imagens a fim de posicionar pontos sensíveis individuais na
imagem. Esses pontos ativos não estão limitados a retângulos; eles podem ter outras for-
mas. No exercício a seguir, você adicionará um ponto ativo retangular e um ponto ativo
circular.
Conceitualmente, mapas de imagens funcionam bem quando aplicados a mapas geo-
gráficos; entretanto, você pode aplicar um mapa de imagens a qualquer imagem indepen-
dentemente do que ela representa.
1. Abra studio.html na pasta Lesson_05_Graphics/about. Selecione a imagem green-

studio.jpg.
A imagem precisa ser dividida em três pontos ativos (hotspots) – um para cada item.
2. No inspetor Property, digite greenstudio no campo de texto Map.

Não utilize espaços nem caracteres especiais no nome. Você pode ter vários mapas de
imagens em uma página, mas cada mapa nessa página dever ser identificado de maneira
única. Se não conseguir nomear seus mapas, o Dreamweaver cria automaticamente no-
mes seqüenciais para cada um (Mapl, Map2, Map3 e assim por diante). Esses nomes gené-
ricos não fornecem nenhuma informação que identifique o mapa de imagens ou a ima-
gem gráfica aplicada. O nome que você está utilizando neste exercício, greenstudio, suge-
re que o mapa da imagem tem a ver com uma academia preocupada com o meio ambien-
te. Criando seus próprios nomes no campo de texto Map, você pode utilizar nomes com
significados distintos. Nomes específicos, concisos e curtos são melhores.
Se você não vir o campo de texto Map, clique na seta expansora no canto direi-
to inferior do inspetor Property.
200 LIÇÃO 5
3. Selecione a Rectangular Hotspot abaixo do campo de texto do nome do mapa no
inspetor Property. Clique e arraste um quadrado em torno das palavras floors e ma-
terials.
Talvez você veja uma mensagem de alerta informando da necessidade de fornecer texto
alternativo para a imagem.
Uma área azul-esverdeada, transparente e com alças aparece em torno dos nomes nes-
sa parte da imagem, e o inspetor Property exibe as propriedades do ponto ativo. O Dream-
weaver posiciona automaticamente um link nulo (#) no campo Link Text do inspetor
Property. Não exclua esse caractere a menos que o substitua imediatamente por um link –
ele serve como um link marcador de lugar para indicar que a área é clicável.
Os ícones do mapa de imagem no cliente são desativados por padrão. Se qui-

ser ativá-los, marque a opção de mapas de imagem no cliente na categoria Invisible
Elements da caixa de diálogo Preferences. Com ela, ao criar um ou mais mapas de
imagem, um ícone de mapa aparece, normalmente na parte inferior do documento. O
ícone de mapa parece semelhante ao ícone Named Anchor e só é visível no Dream-
weaver – ele não aparece no navegador.
Você também pode ativar e desativar a visibilidade das regiões dos pontos ativos
escolhendo View > Visual Aids > Image Maps.

4. Selecione a ferramenta Pointer Hotspot abaixo do campo de texto Map no inspetor
Property. Redimensione o ponto ativo criado no Passo 3 arrastando uma alça até que
o ponto ativo inclua apenas a palavra floors.
Os pontos ativos são fáceis de editar – você pode redimensionar, mover ou excluí-los a
qualquer momento.
Para mover o ponto ativo, posicione o ponteiro dentro do ponto ativo e arraste-o. De-
pois que o ponto ativo é selecionado com a ferramenta Pointer Hotspot, você também
pode ajustar sua posição com as teclas de seta.
Manter a tecla Shift pressionada faz com que as teclas de seta afetem o tamanho do
ponto ativo.
Para excluir o ponto ativo, selecione-o e pressione Delete (Macintosh) ou Backspace
(Windows).
Você pode criar pontos ativos circulares utilizando a ferramenta Oval Hotspot. Você
também pode utilizar a ferramenta Polygon Hotspot para clicar em múltiplos pontos em
torno de qualquer área com uma forma mais complicada na qual deseja criar um ponto
ativo. Ao utilizar a ferramenta Polygon, cada clique cria um ponto. Uma linha conecta
cada ponto subseqüente ao ponto precedente. À medida que clica, você pode ver que a
área de ponto ativo translúcida começa a se formar. Continue clicando até conseguir a
forma desejada. Você não precisa “fechar” a forma clicando de volta no ponto original.
Quanto maior for o número de pontos que a forma de polígono utiliza para definir os
pontos ativos, maior é quantidade de código necessária no documento para descrever es-
sas áreas.
Se dois ou mais pontos ativos se sobrepuserem, o primeiro ponto criado tem

precedência sobre quaisquer pontos ativos subseqüentes que se sobrepõem.
5. Com o ponto ativo selecionado, insira floor no campo de texto Alt no inspetor Pro-
perty.
O texto alt do ponto ativo serve a um propósito semelhante ao texto alt para uma ima-
gem; ele fornece uma indicação do local em que esse ponto ativo será vinculado.
6. Insira green.html#floors no campo de texto Hotspot Link do inspetor Property e esco-

lha _blank no menu pop-up Target para abrir o link em uma nova janela de navegador.
Certifique-se de substituir o sinal original de tralha (#) no campo Link Text pelo link digi-
tado.
202 LIÇÃO 5
Nesse caso, o link levaria o visitante a uma âncora nomeada como floors em uma pági-
na HTML chamada green.html. O uso de âncoras para vincular partes específicas de ou-
tras páginas faz com o site seja mais funcional, direcionando seus espectadores imediata-
mente para aquilo que eles estão procurando e reduzindo o tempo que eles têm de gastar
rolando por documentos longos. Quanto mais funcional e fácil de utilizar for o seu site,
maiores as possibilidades de seus visitantes voltarem e de novos visitantes aparecerem.
O ponto ativo deve ser selecionado para modificar os campos de texto Link, Target ou
Alt.
Também é possível criar links que incluem âncoras identificadas para outras
páginas utilizando a ferramenta Point To File, usada na Lição 3 para criar links dentro do
mesmo documento. Para isso, selecione um ponto ativo, clique no ícone Point To File
à direita do campo de texto Link e aponte para a âncora nomeada desejada em um do-
cumento HTML aberto.
7. Utilize a ferramenta Rectangular Hotspot para criar um ponto ativo para cada uma
das palavras materials e supplies. Repita os Passos 5 a 6 para criar texto alternativo e
links para as duas palavras. Utilize materials e supplies, respectivamente, para o texto
alternativo; utilize green.html#materials e green.html#supplies para os links, respec-
tivamente.

Ao terminar de trabalhar no mapa de imagem, você pode utilizar a ferramenta Pointer
Hotspot para clicar fora do ponto ativo de uma outra área da imagem. Clicar fora do
mapa de imagem em uma parte diferente da imagem redefine o inspetor Property e faz
com que ele exiba as propriedades da imagem.
Você pode manter a tecla Shift pressionada enquanto utiliza a ferramenta Rec-
tangular Hotspot para restringir as proporções a um quadrado.

Teste os links no mapa de imagem criado. Você pode fechar os documentos stu-
dio.html, index.html e sangha.css.
Se copiar e colar um mapa de imagem para outro documento, o Dreamweaver

retém os links e os pontos ativos.
Utilizando imagens gráficas por conta própria

Incluir imagens no seu site e controlar o layout dessas imagens com CSS, da maneira
como aprendeu a fazer nesta lição, pode aumentar o impacto visual que seu site tem sobre
os visitantes.
Você precisará selecionar, editar e otimizar suas imagens com um programa de edição
de imagens. Considere o conteúdo de cada imagem ao decidir se deve utilizar GIF, JPEG
ou PNG.
Utilize as técnicas que você praticou nesta lição para inserir imagens gráficas nas pági-
nas no seu próprio site.
À medida que você incorpora as imagens, crie estilos CSS para controlar o posiciona-
mento do visual.
Lembre-se das questões de acessibilidade discutidas no começo desta lição ao integrar
imagens ao site.
204 LIÇÃO 5
Utilizou imagem de fundo
Posicionou imagens com atributos de acessibilidade na página
Redimensionou e redefiniu imagens de acordo com suas dimensões originais
Posicionou imagens
Adicionou uma borda em torno de uma imagem
Atribuiu nomes e atributos alt a imagens
Utilizou o painel Assets para gerenciar imagens no site
Gerenciou imagens com a lista Favorites
Ajustou o espaço em torno das imagens
Inseriu um marcador de lugar a imagens
Cortou uma imagem
Ajustou o brilho e o contraste de uma imagem
Criou um mapa de imagem

Criando
6 tabelas
As tabelas permitem apresentar as informações de maneira organizada; elas contêm li-
nhas e colunas que se cruzam para formar células em que você pode colocar conteú-
do. As células então podem ser mescladas para criar células maiores. Tabelas podem
ser utilizadas para apresentar uma ampla variedade de conteúdo, desde dados tabula-
res que precisam ser apresentados no estilo de planilha até tratamentos visuais com
combinações de imagens gráficas e texto HTML.
Tabelas podem ser utilizadas para controlar o layout. Organizando o conteúdo dentro
de células da tabela, você pode posicionar objetos em locais específicos em uma pági-
na e criar arranjos visuais mais complexos. Tabelas eram um dos elementos HTML
que inicialmente forneciam aos designers e desenvolvedores controle sobre o layout
dos seus sites. Lembre-se, porém, de que utilizar CSS (Cascading Style Sheets) pode
ser um método mais apropriado de desenvolver o layout e o design de uma página por-
que fornece um maior número de escolhas de layout e opções para o visual e, ao mes-
mo tempo, dá aos designers e desenvolvedores um melhor controle sobre a aparência
e o comportamento do site inteiro. Layouts baseados em tabela geralmente são mais
restritivos; você pode alcançar um maior grau de flexibilidade com a CSS. Além disso,

criará tabelas que
contêm texto e
imagens gráficas
enquanto aprende a
fazer layouts com
tabelas e utilizá-las
em conjunção com
CSS.
CRIANDO TABELAS 207

a CSS é mais eficiente, mais acessível e atende aos padrões atuais do desenvolvimen-
to Web, conforme definidos pelo W3C. Como o suporte à CSS mais recente pode ser
limitado – navegadores mais antigos em particular têm suporte ruim à CSS – as tabelas
continuam sendo úteis. Como resultado, e considerando o fato de que vários sites
mais antigos em que você talvez trabalhe possivelmente utilizem tabelas para o de-
sign, é importante entender os conceitos e as técnicas do layout baseado em tabela.
Se quiser visualizar o resultado final dessa lição, abra index.html na pasta Comple-
ted/Schedule dentro da pasta Lesson_06_Tables.

Aprender a criar tabelas para controlar o layout de suas páginas
Modificar as propriedades de tabela, incluindo borda, fundo, espaçamento, cor, ali-
nhamento e tamanho
Criar tabelas acessíveis
Importar dados tabulares provenientes de planilhas
Modificar uma tabela ajustando linhas e colunas
Classificar uma tabela
Exportar uma tabela
Determinar o tamanho ideal de seu layout
Criar seu projeto de página utilizando o modo Layout
Importar uma imagem guia
Tempo aproximado
208 LIÇÃO 6
Arquivos da lição
Arquivos de mídia:
Lesson_06_Tables/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_06_Tables/schedule/index.html
Lesson_06_Tables/schedule/events.html
Lesson_06_Tables/explorations/poses.html
Lesson_06_Tables/Text/schedule.txt
Lesson_06_Tables/Text/short-schedule.txt
Lesson_06_Tables/Text/events.txt
Projeto concluído:
Lesson_06_Tables/Completed/index.html
Lesson_06_Tables/Completed/yoga-table.html
Lesson_06_Tables/Completed/schedule/index.html
Lesson_06_Tables/Completed/schedule/events.html
Lesson_06_Tables/Completed/explorations/poses.html
Criando uma tabela

Todo o conteúdo de uma tabela sempre está dentro de uma célula, e cada tabela tem uma
ou mais células. Uma célula é a área criada pela intersecção de uma linha e uma coluna.
Uma tabela deve ter pelo menos uma linha e uma coluna, o que criará uma célula.
O Macromedia Dreamweaver 8 fornece diversas ferramentas e opções para criar tabe-
las. Essas ferramentas estão disponíveis por três modos de visualização: Standard, Layout
e Extended. Cada modo de edição visual oferece uma perspectiva diferente no projeto e na
estrutura da tabela enquanto permite criar e editar tabelas.
Neste exercício, você começará a criar uma página no site de projeto Yoga Sangha utili-
zando o modo Standard.
CRIANDO TABELAS 209

Tabelas versus CSS
Em HTML, as tabelas foram originalmente desenvolvidas como um método para organi-
zar informações – elas não foram criadas para ser uma ferramenta de projeto. Durante
anos, à medida que os Web designers trabalhavam para desenvolver Web sites mais
atraentes visualmente e funcionais, a tabela tornou-se uma ferramenta fundamental
para o layout. Como resultado, o conteúdo e a estrutura de páginas Web tornaram-se
mais interdependentes. A CSS fornece aos designers a capacidade de separar o conteú-
do da estrutura das páginas Web. Isso pode ser benéfico em relação ao aumento de
acessibilidade e flexibilidade, à redução do tempo de download e à redução do tempo
necessário para criar e manter páginas. O uso ou não de tabelas ou CSS para controlar o
layout de suas páginas Web dependerá de vários fatores, incluindo suporte de navega-
dor, de como suas páginas são exibidas por diferentes plataformas e navegadores e do
layout desejado. O suporte de CSS está se tornando mais difundido, mas ainda pode
não permitir criar o layout desejado. Você precisará considerar os requisitos do seu Web
site, as opções de uso de CSS e/ou tabelas, testar suas páginas com ambos e escolher
o(s) método(s) de layout de maneira correspondente.
1. Abra index.html na pasta Lesson_06_Tables/Schedule.

Essa página já possui conteúdo, tem formatação básica de documento configurada e inte-
gra a CSS para controlar a aparência dos elementos da página – incluindo texto e imagens.
Você aprendeu as técnicas utilizadas para criar essa página por todas as lições anteriores
neste livro.
Para praticar mais, você pode recriar essa página inicial começando com um
novo documento em branco e utilizando essa página como um guia.
2. Escolha a categoria Layout na barra Insert e verifique se o botão Standard mode

está selecionado.
A opção do modo Standard deve estar ativa por padrão – um botão destacado indica o
modo ativo. Se Standard mode não for o modo de tabela ativo, clique no botão Standard.
Você também pode marcar o modo ou mudar para outro escolhendo View >
Table Mode – uma marca de seleção ao lado de um modo no menu indica que esse
modo está ativo.
210 LIÇÃO 6
3. Posicione o ponto de inserção no parágrafo vazio entre o primeiro parágrafo e a li-
nha horizontal e então clique no botão Table na categoria Layout na barra Insert.
O botão Table também está disponível na categoria Common, na barra Insert.

Alternativamente, pode escolher Insert > Table ou utilizar o atalho pelo teclado Option
+Cmd+T (Macintosh) ou Ctrl+Alt+T (Windows) para abrir a caixa de diálogo Table.
A caixa de diálogo Table se abre.
A caixa de diálogo Table é dividida em três seções: Table Size, Header e Accessibility. A
seção Table Size contém estas opções:
Rows: O número de linhas da tabela. O padrão do Dreamweaver é 3 se você não ti-

ver criado uma tabela previamente.
Columns: O número de colunas. O padrão do Dreamweaver é 3 se você não tiver
criado uma tabela previamente.
CRIANDO TABELAS 211

Table Width: A largura da tabela em pixels ou como uma porcentagem da janela do
navegador. As tabelas especificadas em pixels são próprias para um layout preciso
de texto e de imagens. As tabelas especificadas em porcentagens são uma escolha
ideal quando as proporções das colunas são mais importantes do que suas larguras
reais. O padrão do Dreamweaver é 200 pixels se você não tiver criado uma tabela
previamente.
Border Thickness: A espessura da borda de tabela. O padrão do Dreamweaver é 1 se
você não tiver criado uma tabela previamente.
Cell padding: A quantidade de espaçamento entre o conteúdo da célula e as paredes
da célula. Se você deixar esta opção em branco, o padrão de preenchimento da célu-
la será de um pixel. Se não desejar o preenchimento da célula, certifique-se de digi-
tar 0 no campo de texto. O padrão do Dreamweaver é em branco se você não tiver
criado uma tabela previamente. À direita do campo de texto está uma tabela peque-
na que utiliza sombreamento azul para ilustrar o preenchimento de célula.
Cell Spacing: A quantidade de espaçamento entre as células da tabela, não incluindo
a borda. Se você deixar esta opção em branco, o padrão de espaçamento de célula
será de um pixel. Se não desejar o espaçamento de célula, certifique-se de digitar 0
no campo de texto. O padrão do Dreamweaver é em branco se você não tiver criado
uma tabela previamente. À direita do campo de texto está uma tabela pequena que
utiliza sombreamento azul para ilustrar o espaçamento de célula.
Essas propriedades podem ser todas alteradas posteriormente – as opções na seção Ta-
ble size estão todas disponíveis no inspetor Property quando uma tabela é selecionada na
janela Document. Os valores padrão dessas opções podem ser diferentes se você já tiver
utilizado a caixa de diálogo Table, caso em que os valores serão os mesmos que os últimos
valores especificados para uma tabela.
Várias propriedades de tabela também podem ser ajustadas pelo inspetor Tag
– em uma configuração padrão, o inspetor Tag está localizado entre os grupos de pai-
néis Application e Files. Você pode acessar o inspetor Tag escolhendo Window > Tag
Inspector.
A seção Header contém quatro opções diferentes de posicionamento para cabeçalhos:

None, Left, Top e Both. Um cabeçalho é essencialmente um título de linha ou coluna uti-
lizado para rotular seu conteúdo. Os cabeçalhos são mais freqüentemente utilizados para
tabelas de dados (aquelas que funcionam como planilhas) em oposição às tabelas de de-
sign/layout (aquelas que são utilizadas para organizar e posicionar elementos visuais para
propósitos de design). A opção de cabeçalho que utiliza o atributo de escopo para criar as
informações inseridas no cabeçalho de linhas ou colunas funciona como identificador
para cada uma das células em suas respectivas linhas ou colunas. Por exemplo, se você uti-
lizar a opção de cabeçalho superior e digitar Pedido na célula superior da primeira coluna,
as células restantes naquela coluna serão prefaciadas verbalmente pela palavra Order
212 LIÇÃO 6
quando lida em voz alta por um leitor de tela (um tipo de navegador utilizado por visitan-
tes com deficiências visuais ou situações que os impedem de usar um navegador padrão)
para indicar o conteúdo dessas células. A opção para transformar uma célula (ou células)
em cabeçalhos também está disponível por meio do inspetor Property e pode ser modifi-
cada posteriormente, embora isso não configure o atributo de escopo.
É importante considerar continuamente o quanto suas páginas serão acessíveis a seus
visitantes. O objetivo da criação de páginas acessíveis é desenvolver conteúdo que seja
funcional para o público mais amplo possível, incluindo aqueles com deficiências. O
Dreamweaver facilita a inclusão de recursos acessíveis desde o início por meio da seção
Accessibility, que inclui estas opções:
Caption: Quando você define uma legenda, ela é exibida a todos os usuários e pode
ser alinhada à parte superior, inferior, esquerda ou direita da tabela. Se você deixar
esta opção em branco, nenhuma legenda será inserida. Esta opção está disponível
somente na caixa de diálogo Table. Se quiser adicionar esse recurso posteriormente,
você precisará fazê-lo editando o código de HTML, abordado na Lição 16.
Summary: Um resumo de tabela não é exibido na página; ele é lido por leitores de
tela e é utilizado para explicar o propósito e o contexto da tabela. O resumo deve
fornecer uma sinopse concisa e descritiva, mas relativamente breve, do material
contido na tabela. Você deve indicar qual é o conteúdo da tabela. Se deixar essa
opção em branco, nenhum resumo será inserido. Essa opção pode ser modificada
posteriormente pela parte de CSS/Accessibility da guia Attributes, localizada no
inspetor Tag.
4. Digite 2 no campo de texto Rows e 4 no campo de texto Columns. Altere a largura

de Table para 500 pixels, configure Border thickness como 1 e deixe os campos de
texto Cell padding e Cell spacing em branco. Na seção Header, selecione Top. Na se-
ção Accessibility, digite Class Schedule at Yoga Sangha no campo de texto Caption e
escolha top a partir do menu Align caption. No campo de texto Summary, digite Infor-
mation about the yoga classes available at Yoga Sangha. Each entry includes the day
of the week, time, level and instructor for the class. Clique em OK para fechar a caixa
de diálogo.
Uma tabela com as propriedades especificadas aparece na página e é automaticamente
selecionada. Um cabeçalho de tabela – a barra cinza clara – é anexado à parte superior da
tabela. Linhas verdes verticais indicando os limites esquerdo e direito da tabela são exibi-
das nas laterais da barra. Uma linha verde, com o valor de largura da tabela e uma seta de
menu mostrados no centro, estende-se pela parte superior da barra. Na parte da barra
mais perto da tabela, uma série de linhas verdes mais curtas, cada uma com a própria seta
de menu, indica as larguras das colunas. O cabeçalho da tabela desaparece sempre que
você clica fora da tabela e reaparece sempre que a tabela está ativa ou selecionada. O cabe-
çalho de tabela pode ocultar o conteúdo vizinho acima da tabela. Se a tabela for o primeiro
item em seu documento, o cabeçalho da tabela pode ser anexado à parte inferior da tabela.
Você não pode controlar onde a barra aparece.
CRIANDO TABELAS 213

É possível ativar ou desativar o auxílio visual de cabeçalho de tabela selecio-
nando View > Visual Aids > Table Widths. Uma marca de seleção indica que a opção
está ativada; nenhuma marca de seleção indica que a opção está desativada. Você
também pode ativar e desativar todos os auxílios visuais por meio do mesmo menu ou
com um atalho pelo teclado: Cmd+Shift+I (Macintosh) ou Ctrl+Shift+I (Windows). Os
exercícios seguintes assumem que você possui auxílios visuais, incluindo o cabeçalho
de tabela, ativado.
Uma linha de contorno sólida preta, com alças de seleção na parte inferior e nos lados di-
reitos, cerca a tabela e a legenda, indicando que a tabela está selecionada. As duas linhas e
as quatro colunas são mostradas com uma borda acinzentada, que não envolve a legenda.
Você pode ver o espaçamento entre as células como resultado do preenchimento de célula
padrão que é aplicado porque a opção Cell spacing foi deixada em branco.
5. Clique na primeira célula da linha superior e coluna esquerda. Digite Day na célula;
em seguida, pressione Tab para ir para a próxima célula. Digite Time e pressione Tab.
Digite Level e pressione Tab. Digite Instructor na última célula.
Ao digitar e pular para outras células, a tabela talvez mude automaticamente a largura das
colunas de modo a acomodar o texto.
Você pode utilizar a tecla Tab ou as teclas de seta para se mover entre células. Tab é o
método mais rápido para pular para a próxima célula à direita, ou para baixo, até a próxi-
ma célula à esquerda se você estiver no final de uma linha. Se você for para uma célula que
já tenha conteúdo, esse conteúdo será selecionado ao pressionar Tab.
214 LIÇÃO 6
Como a linha superior é a linha de cabeçalho, o texto que você digita é centralizado e exi-
bido em negrito (uma propriedade padrão de cabeçalhos de tabela). Você pode utilizar a
CSS para aplicar formatação adicional. Para este exercício, deixe os cabeçalhos como estão.
6. Coloque o ponto de inserção na linha de parágrafo em branco abaixo da tabela.
Se você não tiver uma linha de parágrafo de branco abaixo da tabela, clique de-
pois da tabela e pressione Return (Macintosh) ou Enter (Windows).
Quando você clica fora da tabela, as colunas poderão mudar ligeiramente, alterando
sua largura. O ponto de inserção está agora em um novo parágrafo.
É possível inserir os dados na tabela digitando diretamente nas células. Entretanto, no
próximo exercício, você utilizará outro método para preencher a tabela com o conteúdo.
Importando dados de planilhas

Se você tiver texto em uma planilha ou mesmo em uma tabela do Microsoft Word, pode
facilmente inserir esse conteúdo em documentos do Dreamweaver. Para isso, é necessário
salvar um documento como arquivos delimitados por tabulação ou vírgulas para torná-lo
compatível com o Dreamweaver. Você pode utilizar arquivos delimitados por vírgulas ou
tabulações em vários programas, incluindo o Microsoft Excel e o Microsoft Word. Neste
exercício, o arquivo de texto delimitado por tabulação já foi criado para você. Você im-
portará os dados para uma nova tabela e então transferirá esses dados da nova tabela para
a primeira tabela criada.
CRIANDO TABELAS 215

1. Com o ponto de inserção na nova linha criada no exercício anterior, no documento
index.html, clique no botão Tabular Data na categoria Layout na barra Insert.
Você também pode escolher Insert > Table Objects > Import Tabular Data para
abrir a mesma caixa de diálogo.
Botão Tabular Data
A caixa de diálogo Import Table Data se abre.
2. Clique no botão Browse à direita do campo de texto Data file e escolha schedule.txt
na pasta Lesson_06_Tables/Text. Deixe Tab selecionada no menu Delimiter. Para Ta-
ble width, escolha Set to, digite 500 no campo de texto e escolha Pixels no menu. Dei-
xe Cell padding e Cell spacing em branco. Deixe Format top row configurado como
(No Formatting), que é o padrão, e deixe Border configurado como 1. Clique em OK
quando terminar.
Se Set estiver selecionado na seção Table width (largura da tabela) quando

você abrir a caixa de diálogo Import Tabular Data, o campo de texto de largura de tabela
para especificar tamanho e /ou a seleção de medida pode estar desativado. Se isso
acontecer, tente alternar para a opção Fit To Data e, em seguida, retornar para Set.
Uma tabela é construída de acordo com as opções que você acaba de selecionar e os da-
dos do arquivo schedule.txt delimitado por tabulação que você está importando foram
inseridos nessa nova tabela.
Você também pode optar por vários outros delimitadores, incluindo ponto-e-
vírgulas e dois-pontos, mas as tabulações e as vírgulas são mais amplamente utiliza-
das. Ao escolher Other no menu Delimiter, é exibido um campo de texto em que você
pode digitar o delimitador de sua escolha.
216 LIÇÃO 6
Quando a segunda tabela é selecionada, a barra acinzentada do cabeçalho de tabela
pode sobrepor-se a e ocultar a parte inferior da primeira tabela. Clique fora das tabelas e o
cabeçalho de tabela desaparecerá.
Copiando e colando células de tabela

Você agora tem duas tabelas: a primeira tabela contém os títulos e a segunda tabela con-
tém os dados de cada coluna. Agora você precisa combinar as duas tabelas. Você pode co-
piar e colar várias células de tabela ao mesmo tempo, o que preserva a formatação da célu-
la, se houver alguma, ou pode copiar e colar somente o conteúdo da célula.
As células podem ser coladas em um ponto de inserção ou substituindo uma seleção
em uma tabela existente. Se quiser colar várias células de tabela, o conteúdo da Área de
transferência (um recurso de sistema no Macintosh e no Windows – a Área de transferên-
cia não faz parte do Dreamweaver) deve corresponder exatamente à estrutura da tabela
ou à seleção na tabela que as células coladas substituirão. Você pode copiar uma célula e
colá-la para substituir uma célula selecionada, mas não é possível copiar duas células e co-
lá-las para substituir uma única célula. O número e a orientação das células que você co-
pia devem corresponder ao número e à orientação das células que planeja substituir. Você
pode colar múltiplas células em uma única célula, mas o resultado final será múltiplas cé-
lulas, como verá a seguir.
1. No documento index.html, selecione todas as células na segunda tabela clicando

na célula superior esquerda e arrastando pelas células até a célula inferior direita.
As células selecionadas agora estão delineadas com bordas pretas. Ao selecionar as células
dessa maneira, são selecionadas as próprias células, não a tabela inteira.
CRIANDO TABELAS 217

2. Escolha Edit > Copy.
Você também pode utilizar os atalhos pelo teclado Cmd+C (Macintosh) ou

Ctrl+C (Windows).
Para serem recortadas ou copiadas, as células selecionadas devem formar um retângulo.

Por exemplo, você não pode selecionar seis células na linha superior e quatro células na li-
nha inferior.
3. Clique uma vez dentro da primeira célula da segunda linha na tabela superior.
Talvez seja preciso clicar em uma parte visível da tabela superior primeiro ou em uma área
da página que esteja fora das duas tabelas para mostrar a linha inferior se o cabeçalho da
segunda tabela ocultá-la.
Essa célula vazia é onde as células copiadas serão coladas.
4. Escolha Edit > Paste.
Você também pode pressionar Cmd+V (Macintosh) ou Ctrl+V (Windows) para

colar o conteúdo da área de transferência – as células copiadas no Passo 2.
Todas as células da segunda tabela são inseridas na primeira. Sua primeira tabela agora é
semelhante ao exemplo a seguir.
Clique fora da tabela para remover a seleção de células.
218 LIÇÃO 6
Se estiver colando linhas inteiras no fim de uma tabela (como neste exercício),
as linhas serão adicionadas a ela. Se você estiver colando para substituir uma ou mais
células, o conteúdo da(s) célula(s) selecionada(s) será substituído se o conteúdo da
Área de transferência corresponder à estrutura da(s) célula(s) selecionada(s). Se esti-
ver colando fora de uma tabela, as linhas, as colunas ou as células serão utilizadas para
definir uma nova tabela.
Se você precisar remover o conteúdo das células, mas quiser deixar as próprias cé-
lulas intactas, selecione uma ou mais células (mas não uma linha ou coluna inteira); em
seguida, escolha Edit > Clear ou pressione Delete. Se precisar remover uma linha in-
teira, arraste por todas as células na linha a fim de selecioná-la e pressione Delete.
Selecionando uma tabela

Agora que todo o conteúdo da segunda tabela está na primeira tabela, a segunda tabela
não é mais necessária. Para excluí-la, primeiro selecione a tabela. O Dreamweaver fornece
vários métodos para selecionar uma tabela. Você achará alguns métodos mais fáceis que
outros, dependendo da complexidade da estrutura da tabela.
1. No documento index.html, selecione a segunda tabela posicionando o ponteiro em

qualquer lugar dentro da tabela e então selecionando a tag <table> no seletor de tags
no canto esquerdo inferior da janela Document.
Você também pode selecionar uma tabela clicando no canto superior esquer-
do da tabela ou em qualquer lugar na borda direita ou inferior. O ponteiro mostra um
ícone de tabela ao lado da seta de ponteiro quando você estiver próximo da borda.
Espere até ver o ponteiro antes de clicar. Outra maneira de selecionar uma tabela é cli-
car dentro da tabela e escolher Modify > Table > Select Table. Você também pode
clicar na linha verde horizontal de largura da tabela que atravessa a barra acinzentada a
fim de selecionar a tabela.
As alças de seleção aparecem em torno da tabela quando ela é selecionada e uma borda
preta cerca a tabela inteira – não há nenhuma borda preta em torno de nenhuma das célu-
las individuais.
CRIANDO TABELAS 219

Se o ponto de inserção estiver dentro da tabela e a própria tabela não estiver
selecionada, você poderá ver as tags <tr> e <td>> no seletor de tags, além da tag <ta-
ble>. A tag <tr> representa a linha de tabela. A tag <td> representa os dados da tabe-
la, conhecidos também como uma célula. Selecionar uma tag <td> seleciona a célula
correspondente e permite fazer alterações nessa célula no inspetor Property. Você
aprenderá mais sobre tags na Lição 16.
2. Com a tabela selecionada, pressione Delete (Macintosh) ou Backspace (Windows)

para remover a segunda tabela.
A segunda tabela foi excluída.
Quando o ponteiro está dentro de uma célula, o atalho pelo teclado Cmd+A
(Macintosh) ou Ctrl+A (Windows) seleciona a célula. Ao usar o atalho pelo teclado uma
segunda vez, a tabela inteira será selecionada.
Selecionando e formatando células de tabela

Você pode facilmente selecionar uma linha, uma coluna ou todas as células na tabela.
Anteriormente nesta lição, você selecionou células contíguas – isto é, células juntas ou que
se tocam. Você também pode selecionar células não-contíguas – aquelas que não se tocam
– em uma tabela e modificar as propriedades dessas células. Não é possível copiar ou colar
células não-contíguas. Os passos a seguir demonstram vários métodos de seleção.
Você pode alterar várias opções para cada célula, individualmente ou para várias célu-
las selecionadas. Essas opções incluem cor de fundo e alinhamento.
1. No documento index.html, selecione células não-contíguas na linha superior da ta-

bela restante mantendo pressionada Cmd (Macintosh) ou Ctrl (Windows) e clicando
na primeira célula, que contém o texto Day. Continue mantendo pressionada a tecla
CMD ou Ctrl; clique na célula que contém o texto Level.
Quando você mantém pressionada a tecla Command ou Ctrl enquanto move o ponteiro
sobre uma célula, um quadrado delineado pode aparecer próximo à seta do ponteiro para
indicar que você está selecionando células.
As duas células não-contíguas agora devem estar selecionadas, como mostrado pelas
bordas pretas em torno das células individuais.
220 LIÇÃO 6
2. Digite o código hexadecimal #CCCCFF no campo de texto Background Color no
inspetor Property.
Campo de texto Background Color
A cor da célula muda para aquela escolhida. Pode ser necessário clicar fora da tabela para a
alteração ser aplicada.
Você pode alterar a cor de fundo de uma única célula, de várias células ou da tabela in-
teira, dependendo do que seleciona. Neste passo, você alterou várias células ao mesmo
tempo.
Note que a opção Header no inspetor Property está marcada. No início desta lição você
configurou a linha de cabeçalho para a parte superior – todas as células nessa linha são
formatadas como cabeçalhos. Você deve deixar essa opção marcada para todas células na
linha superior.
Para alterar a cor de fundo da tabela inteira, selecione a tabela e utilize a caixa
Background Color no inspetor Property a fim de escolher uma cor para a tabela ou digi-
te o código hexadecimal desejado no campo de texto correspondente.
CRIANDO TABELAS 221

3. Selecione as células não-contíguas Time e Instructor; altere suas cores de fundo
para #9999CC.
Você pode aplicar também uma imagem de fundo em uma única célula, várias células de
uma vez ou em tabelas inteiras. A opção de fundo de imagem também está disponível no
inspetor Property, diretamente acima da opção de cor de fundo.
Uma imagem de fundo aplicada a uma tabela inteira talvez não seja exibida
como esperado se a tabela possuir várias células ou se houver tabelas aninhadas den-
tro dela. Sempre teste suas páginas visualizando-as em navegadores para certificar-se
de que as páginas aparecem como esperado.
4. Clique dentro da linha Monday e posicione o ponteiro na extremidade esquerda da

linha, na borda da tabela. Clique quando a seta de seleção aparecer; em seguida, alte-
re a cor de fundo para #6699CC.
Talvez você precise rolar o ponteiro para cima e para baixo na borda esquerda da tabela
para fazer com que a seta de seleção apareça. Quando você coloca o cursor na posição, to-
das as células nessa linha serão delineadas em vermelho. A seta de seleção é uma maneira
rápida de selecionar uma única linha ou coluna em uma tabela. Se não puder fazer com
que a seta de seleção nem os contornos vermelhos apareçam, tente clicar na borda esquer-
da da linha. Ao clicar na borda, todas as células da tabela são selecionadas e exibidas com
contornos pretos.
222 LIÇÃO 6
5. Continue alterando a cor das outras linhas que contêm os nomes dos dias a fim de
coincidir com o exemplo.
As linhas agora alternam entre branco e azul.
Você pode também formatar de maneira rápida as tabelas com linhas coloridas
alternadas automaticamente. Escolha Commands > Format Table para abrir a caixa de
diálogo Format Table, que permite selecionar entre várias opções de formatação pre-
definidas, bem como personalizar a aparência de sua tabela por opções de cor, estilo,
alinhamentos e linha alternada. Mas o comando Format Table não funcionará nas tabe-
las com legendas, como a que você está criando nesta lição.
6. Posicione o ponto de inserção dentro da tabela e então selecione a coluna Instruc-

tor clicando na linha verde da largura da coluna que abrange essa coluna na barra cin-
za da largura da tabela.
Você selecionou a coluna inteira.
CRIANDO TABELAS 223

Também é possível selecionar a coluna Instructor clicando na célula supe-
rior da coluna, mantendo pressionada a tecla Shift e clicando na célula inferior nes-
sa coluna.
A configuração padrão para o alinhamento horizontal faz o mesma que a configuração

Left: alinha o conteúdo das células selecionadas à esquerda. A configuração padrão para
alinhamento vertical faz o mesmo que a configuração Middle: alinha o conteúdo das célu-
las selecionadas no centro. Como a linha superior é uma linha de cabeçalho, o conteúdo
dessas células é centralizado automaticamente.
7. No inspetor Property, altere o alinhamento horizontal da coluna Instructor inteira

para Right.
224 LIÇÃO 6
O conteúdo de todas as células na coluna Instructor agora está alinhado à direta.
A metade inferior do inspetor Property contém os seguintes atributos de célula:
Merge: Combina duas ou mais células selecionadas em uma célula.

Split: Divide uma única célula em várias células.
Horizontal: Configura o alinhamento horizontal do conteúdo da célula para o pa-
drão do navegador (o padrão dos navegadores normalmente é à esquerda para célu-
las regulares e no centro para células de cabeçalho) ou à esquerda, à direita ou no
centro.
Vertical: Configura o alinhamento vertical do conteúdo da célula para o padrão do
navegador (normalmente meio) ou para parte superior, meio, parte inferior ou li-
nha de base.
Width And Height: Configura a largura e a altura de células selecionadas em pixels.
Para utilizar porcentagens, acrescente ao valor um sinal de porcentagem (%).
No Wrap: Impede a mudança automática de linha; as células se expandem na largu-
ra de modo a acomodar todos os dados. Normalmente, as células se expandem hori-
zontalmente para acomodar a palavra mais longa e, em seguida, se expandem verti-
calmente.
Header: Formata a(s) célula(s) selecionada(s) como um cabeçalho da tabela. O con-
teúdo de células de cabeçalho da tabela está em negrito e centralizado por padrão.
Background Image (a opção Bg superior): Configura a imagem de fundo das cé-
lulas.
Background Color (a opção Bg inferior): Configura a cor de fundo das células. Os
fundos de célula aparecem apenas dentro das células – ou seja, o fundo não flui so-
bre o espaçamento da célula nem sobre as bordas da tabela. Se seu espaçamento de
célula e preenchimento de célula não forem configurados como 0, aparecerão lacu-
nas entre as áreas coloridas mesmo que a borda esteja configurada como 0. Se quiser
evitar essas lacunas, aplique cor à tabela inteira ou configure o espaçamento de célu-
la e o preenchimento de célula como 0.
Border: Configura a cor de borda das células.
Talvez você precise clicar na seta expansão no lado direito do inspetor Property se não
vir essas opções. Você trabalhará com algumas dessas opções nos exercícios seguintes.
CRIANDO TABELAS 225

Classificando uma tabela
Você pode realizar uma classificação simples de tabela classificando o conteúdo de uma
única coluna. Também pode realizar uma classificação mais complicada classificando o
conteúdo de duas colunas. Não é possível classificar tabelas que contenham células mes-
cladas. O exercício a seguir demonstra a classificação.
1. Abra o documento poses.html na pasta Lesson_06_Tables/Explorations, selecione

a tabela e escolha Commands > Sort Table.
A caixa de diálogo Sort Table se abre.
2. Configure as seguintes opções.
Sort By: Selecione a coluna a classificar. Para este exercício, selecione Column 1 (padrão).
Order: Especifique se deseja classificar a coluna alfabética ou numericamente. Para este

exercício, selecione Alphabetically (padrão). Essa opção é importante quando o conteúdo
de uma coluna é numérico. Uma classificação alfabética aplicada a números de um e de
dois dígitos resulta em uma classificação alfanumérica (como 1, 10, 2, 20, 3, 30) em vez de
uma classificação numérica direta (como 1, 2, 3, 10, 20, 30). Escolha Ascending (A a Z ou
de baixo para cima) para ordem de classificação (padrão).
Then By: Para este exercício, deixe em branco (padrão). Then By permite escolher uma
classificação secundária por uma coluna diferente. Os métodos de classificação no menu
são os mesmos disponíveis em Sort By.
226 LIÇÃO 6
Sort Includes The First Row: Esta opção permite especificar se a primeira linha será
incluída na classificação. Se a primeira linha for um título que não deve ser movido,
deixe essa caixa de seleção desmarcada (padrão). Para este exercício, porém, marque
essa opção.
Sort Header Rows: Para este exercício, deixe esta opção desmarcada (padrão).
Sort Footer Rows: Para este exercício, deixe esta opção desmarcada (padrão).
Keep All Row Colors The Same After The Sort Has Been Completed: Se você alterou
qualquer atributo de uma linha, pode mantê-lo na linha escolhendo essa opção. Suponha
que você classifique uma tabela com uma cor na primeira linha. Depois da classificação,
os dados na primeira linha se movem para a segunda linha. Se esta opção estiver selecio-
nada, a cor se move com os dados para a segunda linha. Se esta opção não estiver sele-
cionada, a cor permanece na primeira linha. Para este exercício, deixe esta opção desmar-
cada (padrão).
3. Clique em OK.
A tabela agora está classificada alfabeticamente utilizando os dados na primeira coluna.
Salve seu documento.
Modificando uma tabela

Depois de criar uma tabela, você pode achar que ela é muito grande ou muito pequena ou
pode precisar adicionar colunas e linhas. É possível ajustar essas propriedades de tabela
facilmente.
1. No documento index.html, selecione a tabela e altere o valor de Width no inspetor

Property de 500 para 650. Pressione Return (Macintosh) ou Enter (Windows) para apli-
car a alteração.
Você expandiu a tabela.
Também é possível ajustar o tamanho da tabela movendo o ponteiro sobre a

margem inferior ou direita da borda da tabela. Quando o ponteiro mudar para uma seta
de duas pontas, arraste a borda da coluna a fim de ajustar a tabela no tamanho deseja-
do. Você pode ver a nova largura selecionando a tabela e vendo o número no campo de
texto Width no inspetor Property. Preste atenção ao arrastar uma borda de uma tabela
para alterar seu tamanho. Sempre que arrastar as bordas da tabela dessa maneira, o
Dreamweaver atribui e atualiza automaticamente as larguras e/ou alturas. Às vezes,
isso pode não ser o que você quer. Se quiser se livrar de larguras ou alturas, pressione
os botões Clear Column Widths e Clear Row Heights no inspetor Property. Você tam-
bém pode utilizar os comandos Clear All Heights e Clear All Widths no menu de largura
da tabela acessível pela barra acinzentada na parte superior da tabela.
CRIANDO TABELAS 227

2. Clique na célula direita da última linha da tabela (a célula inferior direita) e depois
pressione Tab.
Se o ponteiro estiver na última célula de uma tabela, ao pressionar Tab, o ponto de inser-
ção será posicionado na célula à esquerda de uma nova linha.
Você também pode adicionar novas linhas e colunas escolhendo Modify > Ta-
ble e selecionando uma das seguintes opções: Insert Row (insere uma linha acima da
linha atual), Insert Column (insere uma coluna à esquerda da coluna atual), ou Insert
Rows or Columns (esta opção permite escolher inserir linhas ou colunas, especificar o
número de linhas ou colunas que devem ser inseridas e selecionar onde essas linhas
ou colunas aparecerão.) Você também pode adicionar novas colunas clicando na linha
verde que atravessa uma coluna na barra acinzentada e escolhendo Insert Column Left
ou Insert Column Right.
3. Na célula esquerda da linha que acabou de inserir, clique e arraste para a direita
para selecionar todas as células na linha. Clique no botão Merge Cells no inspetor
Property.
As quatro células agora formam uma longa célula que se estende por quatro colunas. Qual-
quer atributo da primeira célula, como cor e alinhamento, é aplicado à célula mesclada.
Você pode dividir as células da mesma maneira clicando no botão Split Cell no
inspetor Property ou escolhendo Modify > Table > Split Cell. Esse método retorna o
número de células ao número original se você os mesclou ou pode dividir uma célula
em qualquer número de linhas ou colunas.
Você pode mesclar qualquer número de células em uma coluna ou qualquer número
de células em uma linha. Também pode mesclar células em várias linhas e colunas, mas as
células a serem mescladas devem formar um retângulo. Não é possível mesclar células
para criar uma forma L.
Para mesclar células, você também pode escolher Modify > Table > Merge
Cells. Os atalhos pelo teclado para mesclar linhas são Option+Cmd+M (Macintosh) ou
Ctrl+Alt+M (Windows). Ao pressionar somente a tecla M, as células selecionadas
também são mescladas.
4. Na célula que você acabou de mesclar, digite © 2006, Yoga Sangha.

A mesclagem de células oferece muitas opções adicionais para layout.
228 LIÇÃO 6
Se precisar excluir uma linha, clique na linha e depois escolha Modify > Table >
Delete Row. Você também pode manter a tecla Control pressionada e clicar (Macin-
tosh) ou clicar com o botão direito do mouse (Windows) na tabela e escolher Table >
Delete Row no menu de contexto.
5. Com o ponto de inserção na última linha da tabela, escolha Modify > Table > Insert
Rows or Columns. Na caixa de diálogo Insert Rows or Columns que aparece, escolha
Rows nas opções de Insert, digite 1 no campo de texto Number of rows e escolha Abo-
ve the Selection nas opções de Where. Clique em OK.
A caixa de diálogo Insert Rows or Columns permite especificar a inserção antes ou depois
da linha atual. Ao utilizar essa caixa de diálogo, você tem controle sobre onde as novas li-
nhas ou colunas serão colocadas e pode inserir qualquer número de linhas ou colunas.
Se escolher Modify > Table > Insert Row, a nova linha será inserida acima da li-
nha atual por padrão. Você pode também manter a tecla Ctrl pressionada e clicar (Ma-
cintosh) ou clicar com o botão direito do mouse (Windows) na linha acima e escolher
Table > Insert Rows Or Columns no menu de contexto.
Essa nova linha inserida funciona como um espaçador entre os direitos autorais e as in-
formações sobre os horários das aulas acima dela. A inserção de um pequeno espaço a
cada seção ou bloco de informações sobre sua página ajuda o leitor a distinguir o texto na
página – é difícil ler as informações quando há uma grande quantidade de texto exibida ao
mesmo tempo.
Exportando uma tabela

Se precisar extrair as informações de uma tabela para colocar em um banco de dados, uma
planilha ou um aplicativo de processamento de texto ou de layout de página, não é possível
simplesmente copiar e colar o texto. Tudo o que você obtém é texto sem formatação de linha e
coluna. Mas é possível exportar a tabela e salvar o arquivo como um arquivo delimitado por
tabulação que a maioria dos aplicativos de processamento de texto e de planilha pode ler.
1. No documento poses.html, selecione a tabela.

Você exportará a tabela selecionada do Dreamweaver para um novo arquivo nos passos a
seguir.
CRIANDO TABELAS 229

2. Escolha File > Export > Table .
A caixa de diálogo Export Table se abre.
3. No menu Delimiter, escolha Tab (padrão).

A maioria dos aplicativos de processamento de textos e de planilha pode ler tabelas deli-
mitadas por vírgula e por tabulações. Quando você escolhe File > Export > Table, Tab é
selecionada por padrão. Suas opções de valores de delimitadores para os dados da tabela
são Tab, Space, Comma, Semicolon e Colon. Se você não estiver certo sobre qual utilizar,
escolha Tab.
4. Do menu de Line Breaks, escolha as quebras de linha para o sistema operacional

usado (padrão): Windows, Macintosh ou Unix.
As quebras de linha são os caracteres inseridos no fim de cada linha. Você trabalhou com
eles na Lição 2 quando importou texto. Quando escolher que tipo de quebras de linha uti-
lizar, selecione o sistema operacional para o qual está exportando o arquivo. Talvez seja
preciso escolher um sistema operacional além do seu próprio se o arquivo for utilizado
em uma plataforma diferente.
5. Clique em Export. Na caixa de diálogo que abre, nomeie o arquivo exportado

yoga_poses.txt e salve-o na pasta Lesson_06_Tables/Text.
A tabela inteira é exportada para um novo arquivo com o nome escolhido. O arquivo que
você criou é um arquivo de texto simples. Se tiver o Excel ou o Word, você pode importar
as informações para esses programas utilizando o formato ASCII delimitado. Verifique a
documentação incluída nesses programas para obter detalhes sobre como importar tais
arquivos.
Utilizando imagens em tabelas

As tabelas são freqüentemente utilizadas para construir o layout de uma página com vá-
rias imagens ou montar uma imagem que foi cortada em fatias. Uma imagem pode ser
cortada em várias imagens menores para ser otimizada para a Web (o processo de otimi-
zação inclui a diminuição do tamanho do arquivo da imagem enquanto mantém a mais
alta qualidade de imagem possível). Os pedaços resultantes precisam ser alinhados entre
si utilizando uma tabela. Muitos programas de edição gráfica, como o Adobe Photoshop e
o Fireworks Macromedia, permitem designar fatias que são exportadas automaticamente
junto com a criação da tabela necessária em um documento HTML correspondente.
230 LIÇÃO 6
Neste exercício, você criará uma tabela que pode ser utilizada nas páginas no site de
projeto Yoga Sangha. Esse mesmo layout pode ser feito com o uso da CSS – no qual você
irá trabalhar na criação por todo o restante do livro.
1. Crie uma nova página HTML, salve-a como yoga-table.html na pasta Les-
son_06_Tables e atribua o título Yoga Sangha.
Essa página conterá várias tabelas.
2. Crie uma nova tabela com as seguintes configurações: 5 linhas, 4 colunas, 754 pi-
xels de extensão, Border Thickness 0, Cell Padding 0 e Cell Spacing 0. Configure Hea-
der como None, deixe o campo de texto Caption em branco e digite Yoga Sangha Con-
tent no campo de texto Summary.
Toda vez que você utilizar a caixa de diálogo Table, o Dreamweaver preencherá
automaticamente todas as opções com os mesmos valores utilizados para sua última
tabela.
A tabela que você criar deve ser igual ao exemplo a seguir.
Certifique-se de digitar o número 0 nos campos de texto Border, Cell Padding e

Cell Spacing. Deixar esses campos em branco resultará em um valor real de 1 para Cell
Padding e Cell Spacing.
CRIANDO TABELAS 231

3. Selecione todas as cinco células na primeira coluna e mescle-as. Na segunda colu-
na, selecione e mescle as duas células na segunda e terceira linhas da parte superior.
Na quarta linha, selecione e mescle as duas células na segunda e terceira colunas. Na
quinta linha, selecione e mescle as duas células na segunda e terceira colunas. Na quar-
ta coluna, selecione e mescle as duas células na quarta e quinta linhas.
Sua tabela agora deve ser igual ao exemplo a seguir.
A estrutura de sua tabela é representada por linhas pontilhadas porque você

definiu a borda como 0. Com o cursor posicionado sobre a linha verde que atravessa a
tabela na barra acinzentada Table Width, pressione Cmd (Macintosh) ou Ctrl (Win-
dows) para ver a estrutura de tabela exibida em uma linha vermelha sólida.
4. Coloque o ponto de inserção na célula da primeira coluna e utilize o menu Vert no

inspetor Property para alterar o alinhamento vertical da célula para Top. Insira na célu-
la o green-bar.gif da pasta Lesson_06_Tables/Images. Na caixa de diálogo Image Tag
Accessibility Options, escolha <empty> no menu de texto Alternative e deixe o campo
de descrição Long como está.
A barra verde que acabou de inserir agora permanecerá na parte superior dessa coluna, in-
dependentemente da altura que a tabela venha a ter.
Essa imagem serve como um elemento de design visual; portanto, o texto alternativo é
desnecessário. Conforme é mencionado na Lição 3, evite especificar texto alternativo para
imagens que servem somente propósitos de design e de layout. Essas imagens devem utili-
zar a opção <empty> – não deixe o campo de texto Alternative em branco.
232 LIÇÃO 6
Quando você insere imagens nas células no Dreamweaver, as células vazias têm uma
tendência a recolher e parecer não estar mais presentes. Elas realmente estão lá, mas estão
apenas comprimidas. Você pode ver isso acontecer se clicar fora da tabela ou em outra cé-
lula. Não tente redimensionar as células neste ponto. Quando as células se comprimem,
há várias opções para mover pelas tabelas. Evite arrastar as bordas de sua tabela e suas co-
lunas e linhas nesses casos – em vez disso, navegue por tabelas utilizando as teclas de seta,
bem como o modo Expanded Tables, que você aprenderá a fazer nos passos a seguir.
5. Clique no botão Expanded na categoria Layout na barra Insert.
Você também pode utilizar o atalho pelo teclado F6 para ativar e desativar esse
modo ou alternar os modos escolhendo View > Table Mode e selecionando o modo de
visualização desejado a partir do submenu.
Uma caixa de diálogo introdutória, Getting Started In Expanded Tables, aparece. Você
pode clicar em OK para fechar a caixa de diálogo depois de lê-la.
Uma barra exibindo “Expanded Tables Mode [exit]” aparece na parte superior da ja-
nela Document, logo abaixo da barra de ferramentas, para indicar que o modo Expanded
Tables está ativo. Você pode retornar ao modo Standard clicando no link [exit] na barra
ou no botão Standard na categoria Layout na barra Insert.
O modo Expanded Tables aparenta expandir suas tabelas ligeiramente e ao mesmo
tempo dá a impressão de aumentar a borda, o espaçamento da célula e o preenchimento
da célula. Essas mudanças de aparência acontecem somente nesse modo – nenhuma alte-
ração real é feita no tamanho de sua tabela nem nas propriedades de borda, espaçamento
da célula e preenchimento da célula. Esse modo não representa a maneira como tabelas
aparecem nos navegadores. Dada a distorção que ocorre ao visualizar sua página neste
modo, você deve evitar fazer qualquer alteração no tamanho de suas tabelas neste modo.
Se possível, redimensione as tabelas no modo Standard.
6. Posicione o ponto de inserção na segunda coluna da primeira linha e utilize o menu

Horz no inspetor Property para alterar a configuração horizontal da célula para Center.
Insira above-nav.jpg da pasta Images. Na caixa de diálogo Image Tag Accessibility
Attributes, selecione <empty> no menu de texto Alternative e deixe o campo de descri-
ção Long como está.
Essa imagem, agora localizada na célula central da linha superior, é uma imagem gráfica
menor para o efeito visual do site Yoga Sangha. Utilizar o texto alternativo para transmitir
a mesma mensagem que está contida na imagem é um passo importante. Se ela não co-
municar nenhuma informação, escolha a opção <empty>.
CRIANDO TABELAS 233

7. Clique para colocar o ponto de inserção na célula que está localizada na primeira li-
nha da terceira coluna. Insira yoga-s-header.jpg da pasta Images na célula. Utilize
Yoga Sangha como o texto Alternative.
Como o modo Expanded Tables está ativo, você pode clicar facilmente dentro da célula.
234 LIÇÃO 6
Se estivesse utilizando o modo Standard, você ainda poderia navegar pela ta-
bela recolhida com as teclas de seta. Para isso, você selecionaria a imagem do título
do Yoga Sangha e pressionaria a tecla de seta que aponta para a direita uma vez para
sair de cima da imagem. O ponto de inserção então seria na célula que contém a ima-
gem nav_titlebar.gif, diretamente à direita dessa imagem. Na borda direita da ima-
gem, você veria um cursor piscando na mesma altura que a imagem. Você pressio-
naria a tecla de seta direita mais uma vez para mover para a próxima coluna (terceira)
e então utilizaria a tecla de seta para baixo uma vez a fim de mover o ponto de inser-
ção para a terceira linha. Quando colunas se recolhem completamente, pode ser difí-
cil ver o cursor piscando entre as linhas de pontilhado que indicam os limites das cé-
lulas. Evite arrastar as bordas da tabela e redimensioná-la para ver as colunas que re-
colheram. O redimensionamento de sua tabela altera suas dimensões adicionando
tags de altura e de largura. As dimensões definidas por essas tags criam problemas,
como fazer com que as imagens não se alinhem umas às outras. Se forem criadas
tags de altura ou de largura, você pode selecionar a tabela e clicar nos botões Clear
Row Heights e Clear Column Widths no inspetor Property. Você pode precisar rede-
finir a largura da tabela depois de limpar as larguras de coluna. Quando o ponteiro es-
tiver na célula correta, digitar uma pequena quantidade de texto faz com que a célula
se expanda, o que talvez lhe ajude a ver as colunas mais claramente. Se você utilizar
esse método, é muito importante certificar-se de que excluiu o texto ou o substituiu
pelo texto ou imagem(ens) apropriada(s). Caracteres extras podem causar proble-
mas em algumas tabelas, particularmente se você calculou o tamanho de tabela uni-
camente para imagens específicas.
8. Clique para colocar o ponto de inserção na célula localizada na primeira linha da

quarta coluna. Insira om.jpg da pasta Images na célula. Utilize OM como o texto Alter-
native.
A imagem agora aparece na célula.
CRIANDO TABELAS 235

9. Clique no botão Standard na categoria Layout na barra Insert para retornar ao
modo Standard.
No modo Standard, as colunas agora se alinham com as imagens. Nos exercícios a seguir,
o modo Standard permite ver como tabelas e imagens trabalham juntas para criar um
layout perfeito. Você precisa certificar-se de que não foram criados espaços extras nas ta-
belas criadas, o que é difícil de observar no modo Expanded porque esse modo de visuali-
zação gera espaçamento adicional.
À medida que você insere imagens, se suas tabelas contiverem imagens que se alinham
entre si como acontece nessa tabela, elas talvez obscureçam as linhas pontilhadas que se-
param as células individuais.
Ao trabalhar com tabelas, lembre-se de que as linhas pontilhadas, que o Dream-

weaver utiliza para indicar as bordas da célula e da tabela, ocupam um pixel de espaço
cada uma. Esses pixels extras de espaçamento criados pelas linhas pontilhadas não
existem quando o documento é visto em um navegador. Mas talvez esses pixels de
espaçamento façam com que tabelas visualizadas dentro do Dreamweaver pareçam li-
geiramente maiores do que realmente são. Por exemplo, você poderia ter duas tabe-
las com a mesma largura em um documento. A primeira tabela pode ter cinco colunas
e a segunda tabela pode ter somente uma coluna. A primeira tabela apareceria no
Dreamweaver com quatro pixels a mais de largura que a primeira, mesmo que a largu-
ra das duas tabelas seja a mesma se visualizadas em um navegador. Você pode sem-
pre desativar as bordas de tabela escolhendo View > Visual Aids > Table Borders. Por
outro lado, as bordas de tabela são geralmente muito úteis, e pode ser muito difícil tra-
balhar com tabelas quando você as desativa.
10. Posicione o ponto de inserção na célula localizada na segunda linha da terceira

coluna e insira flower.jpg com o texto alternativo <empty>. Posicione o ponto de in-
serção na célula localizada na terceira coluna e terceira linha e insira tag-bkg.jpg com
o texto alternativo <empty >. Posicione o ponto de inserção na célula localizada na
segunda coluna que se distribui pela segunda e terceira linhas da tabela. Insira a
cell-nav.jpg da pasta Images na célula. Posicione o ponto de inserção na célula locali-
zada na quarta coluna, segunda linha, e insira teaching.jpg com Teachers at Yoga
Sangha para o texto alternativo. Na célula abaixo dessa, insira class.jpg com Classes
at Yoga Sangha para o texto alternativo. Clique fora da tabela.
Ao clicar fora da tabela, o Dreamweaver faz com que a tabela seja atualizada e as células
agora se ajustam de maneira exata em torno das imagens. Às vezes, talvez seja preciso uti-
lizar uma imagem espaçadora – freqüentemente um pequeno GIF de um pixel por um pi-
xel que pode ser transparente ou da mesma cor do fundo – utilizado para conter as di-
mensões das linhas e colunas nas tabelas que são necessárias para criar o visual final de
uma página. As tabelas freqüentemente precisam de imagens para forçá-las a manter as
dimensões desejadas. Sem uma imagem para conter esse espaço, suas colunas podem mu-
dar de tamanho. Você pode utilizar GIFs espaçadores (normalmente arquivos transpa-
236 LIÇÃO 6
rentes de 1×1pixel ) estendidos para preencher as dimensões a fim de assegurar um tama-
nho correto para suas colunas.
Ao trabalhar com pequenas imagens nas tabelas, utilizar as teclas de seta pode
tornar mais fácil navegar pelas tabelas à medida que você as cria e modifica.
Sua tabela agora é igual ao exemplo a seguir.
Se sua tabela não se parecer com essa, pode ser que o Dreamweaver esteja
adicionando espaços a suas células. Abra a caixa de diálogo Preferences, selecione a
categoria Code Format e verifique se No Break After TD está marcado.
Aninhando tabelas
Uma tabela aninhada é uma tabela que é colocada dentro da célula de outra tabela. As ta-
belas aninhadas são utilizadas para vários propósitos. Nos primeiros dias da Web, o ani-
nhamento de tabelas era geralmente considerado uma prática ruim devido aos problemas
causados (às vezes travando o navegador de um usuário, por exemplo). Mas, atualmente,
os navegadores são capazes de muito mais. As tabelas aninhadas são comumente utiliza-
das para criar páginas que têm de utilizar uma tabela incrivelmente complicada ou que
não são capazes de sustentar o design pretendido. O aninhamento de tabelas permite criar
layouts mais complexos e manter cada uma de suas tabelas o mais simples possível. Quan-
to mais complexa for uma tabela, mais difícil é criá-la e mais provavelmente ela falhará ou
terá outros problemas de visualização nos navegadores.
CRIANDO TABELAS 237

1. No documento yoga-table.html, clique fora da tabela que você criou no exercício
anterior e pressione Return (Macintosh) ou Enter (Windows). Crie uma nova tabela
com as seguintes propriedades: 2 linhas, 1 coluna, 176 pixels de extensão, Border 0,
Cell padding 0 e Cell spacing 0. Configure a opção Header como None, deixe o campo
de texto Caption em branco e digite Schedule of Classes no campo de texto Summary.
Clique em OK.
É freqüentemente mais fácil montar a tabela que você planeja aninhar criando-a fora da
tabela maior, pois você pode claramente ver as bordas da tabela menor enquanto estiver
inserindo imagens e conteúdo e não clicará acidentalmente na tabela maior quando esti-
ver tentando trabalhar com a menor.
2. Posicione o ponto de inserção na segunda linha e digite Schedule.

Sua pequena tabela agora deve ser igual à do exemplo a seguir.
3. Pressione Tab para adicionar uma linha abaixo da última. Clique no botão Split Cell
into Rows or Columns no inspetor Property, escolha Rows na seção Split Cell Into e di-
gite 7 no campo de texto Number Of Rows.
Botão Split Cell into Rows or Columns
Você preparou a tabela e agora está pronto para inserir o conteúdo na célula que acabou
de dividir.
238 LIÇÃO 6
4. Com o documento short-schedule.txt da pasta Text, copie e cole o texto utilizando
uma linha para cada dia.
Há várias maneiras de abordar tarefas como essa dentro do Dreamweaver; e o

método que você escolhe dependerá das circunstâncias de como os dados são forma-
tados. Por exemplo, outra maneira de importar o texto é salvar o arquivo .txt como um
arquivo delimitado e importá-lo como uma tabela. Você pode então copiar e colar as
células a fim de substituir aquelas na tabela atual ou modificar a tabela importada para
coincidir com a que você está criando neste exercício.
Cada linha representa um dia.

Sua tabela agora deve ser igual ao exemplo a seguir.
CRIANDO TABELAS 239

5. Selecione a tabela em que está trabalhando que contém a tabela class schedule
(horários das aulas) e escolha Edit > Cut. Posicione o ponto de inserção na célula lo-
calizada na quarta coluna e quarta linha da tabela que você criou no exercício anterior
e escolha Edit > Paste.
Seu documento agora deve ser semelhante ao seguinte exemplo.
A tabela menor agora está aninhada na primeira tabela. Neste exercício, você aninhou
uma tabela para simplificar o layout de tabelas grandes.
240 LIÇÃO 6
Procure evitar aninhar tabelas com mais de cinco ou seis níveis de profundidade. Lem-
bre-se de que navegadores mais antigos – especialmente versões mais antigas do Netscape
– podem ter dificuldade em exibir muitos níveis de tabelas aninhadas (às vezes devido à
quantidade maior de memória exigida para exibi-las). Para determinar se as tabelas ani-
nhadas que você cria funcionarão corretamente para seus visitantes, é necessário testar
suas páginas em vários navegadores em plataformas diferentes.
Não adquira o hábito de criar tabelas aninhadas exóticas. O aninhamento é uma boa
técnica que pode ser utilizada para obter layouts coesos, avançados, mas deve ser empre-
gada de maneira cuidadosamente considerada e propositada. Se estiver aninhando mui-
tos níveis de tabelas, você provavelmente deve repensar seu layout. Um layout mais sim-
ples significa que menos código será criado, o que torna mais provável que a página será
carregada rapidamente e que haja menos potencial para problemas. Se você acabar com
uma exibição imprópria em um navegador, vários níveis de tabelas aninhadas também
podem tornar mais difícil localizar a causa desses erros no código.
Projetando para telas de computador

Ao lidar com material impresso, um designer cria páginas a serem visualizadas em um
formato final com um tamanho fixo. O estoque de papel, a qualidade de impressão e o ta-
manho são todos controlados. Um Web designer, por outro lado, tem de contar com um
número maior de possibilidades. É preciso considerar não apenas a variedade de navega-
dores que os usuários possam ter, mas também o tamanho e a resolução de seus monito-
res. O número de tipos de tela em que os usuários podem visualizar as páginas Web au-
mentou e continuará a aumentar. Os usuários visualizam páginas Web nos computado-
res, TVs, telefones celulares, PDAs (como o Palm) e outros.
Se você tiver somente texto em uma página, o texto reflui na página com base no ta-
manho da janela de navegador. Como Web designer, você não tem nenhum controle
sobre a aparência da página. O usuário pode maximizar a janela, tornando as linhas lon-
gas e difíceis de ler. Se quiser controlar o fluxo do texto na página, você pode colocar seu
texto dentro de uma tabela ou utilizar CSS para limitar o comprimento da linha do texto
em uma célula.
Quando você projeta uma página com uma largura fixa, pode querer projetar o menor
denominador comum de tamanhos de monitor que seu público utilizará. Se você acha
que a maioria de seus usuários tem monitores de 13 polegadas, utilize esse tamanho. Lem-
bre-se de que o navegador ocupa algum espaço à esquerda e à direita da tela, mesmo que o
usuário maximize a janela. Não há nenhuma regra configurada para a quantidade de es-
paço que um navegador utiliza; portanto, você deve prever isso no navegador. Para moni-
tores de 13 polegadas, por exemplo, defina a largura máxima de página em 600 pixels (não
considere o espaço utilizado pelo navegador e pelo sistema operacional). Para determinar
a largura máxima de página, consulte a seguinte tabela.
CRIANDO TABELAS 241

Resolução (em Pixels) Dispositivo
160×160 Dispositivo do tipo Palm
240×320 Pocket PC
544×372 Web TV
640×240 Windows CE
640×480 Monitor de 13 polegadas
800×600 Monitor de 15 a 17 polegadas
1.024×768 Monitor de 17 a 19 polegadas
1.200×1.024 Monitor de 21 polegadas
É importante considerar a necessidade do visitante de ser capaz de imprimir

páginas Web. É particularmente importante tornar suas páginas imprimíveis ou forne-
cer versões “amigáveis a impressoras” para páginas com muito texto ou páginas que
provavelmente os usuários precisarão imprimir. A dimensão para uma página imprimí-
vel é de 535 pixels. Embora as tabelas tenham layouts rápidos e fáceis, a impressão é
uma das muitas razões para considerar o uso da Cascading Style Sheets (CSS). Ela ofe-
rece mais flexibilidade ao design; e lhe dá a capacidade de criar arquivos CSS específi-
cos utilizados apenas para imprimir, permitindo assegurar que seu layout seja amigá-
vel a impressora.
Utilizando tamanho de janela para verificar

o layout
Você pode verificar seu layout diretamente no Dreamweaver para determinar qual será a
aparência de sua página nos diferentes tamanhos de tela utilizando o menu Window Size.
Na parte inferior da janela Document, clique na seta preta localizada à direita das di-
mensões da janela atual. Escolha 760×420 (800×600 Maximized).
Usuários do Windows: Você deve primeiro clicar no botão Restore/Maximize na janela

Document – não no botão Restore/Maximize do aplicativo. A janela Document se reduzi-
rá para uma janela flutuante no espaço do documento. Só é possível ajustar o tamanho de
janela nessa visualização. Você pode retornar à interface com guias depois deste exercício
clicando no botão Restore/Maximize da janela Document novamente.
242 LIÇÃO 6
A janela Document é redefinida para 760×420. Esse tamanho é suficiente para o espaço
ocupado pelo navegador e sistema operacional em uma tela na resolução 800×600.
Você também pode adicionar suas próprias predefinições de tamanho à lista

escolhendo Edit Sizes na parte inferior do menu.
Quando alterar o tamanho da janela Document do Dreamweaver, você notará que as

dimensões no tamanho da janela mudam para refletir o novo tamanho.
Criando uma tabela na visualização Layout

O Dreamweaver 8 também fornece o modo Layout para criar tabelas. O modo de layout
funciona mais como um programa de layout de página em que você pode desenhar caixas
na página e então preencher as caixas com texto ou imagens. Você pode redimensionar as
caixas e colocá-las em qualquer lugar na página.
Alguns recursos do Dreamweaver, como camadas (abordadas na Lição 9), não funcio-
nam no modo Layout – você deve utilizar o modo Standard quando precisar utilizar esses
recursos.
No modo Layout, os valores numéricos exatos das larguras e alturas da tabela

e células que cria, bem como a inserção dessas células, serão um pouco diferentes
dos exemplos mostrados aqui. Utilize os exemplos como guias para o layout geral de
sua página.
1. Abra events.html na pasta Lesson_06_Tables/Schedule.

Você utilizará o modo Layout para criar uma tabela nesse documento nos passos seguintes.
2. Clique no botão Layout na categoria Layout na barra Insert.
CRIANDO TABELAS 243

Você mudou para o modo Layout, em que pode facilmente colocar elementos na pági-
na. Você pode ver a caixa de informações intitulada Getting Started In Layout Mode, que
descreve brevemente as ferramentas principais: a célula de layout e a tabela de layout. Cli-
que em OK para fechar essa caixa de diálogo.
Há uma caixa de seleção para Don’t show me this message again. Se deixar
essa caixa desmarcada, na próxima vez em que reiniciar o Dreamweaver, essa caixa
de diálogo será exibida novamente quando mudar para o modo Layout.
Uma barra, com o texto Layout Mode [exit] centralizado nela, aparece logo abaixo da
barra de ferramentas da janela Document, parecendo estar dentro do próprio documen-
to. Essa barra não é visível no navegador porque é utilizada apenas no Dreamweaver para
indicar que você está trabalhando no modo Layout. Como no modo Expanded, você pode
retornar ao modo Standard clicando no botão Standard, na categoria Layout, na barra
Insert, ou clicando no link [exit] que aparece na barra, na parte superior do documento
enquanto estiver no modo Layout.
Você também pode escolher View > Table Mode > Layout Mode ou utilizar o
atalho pelo teclado Cmd+F6 (Macintosh) ou Ctrl+F6 (Windows) para alternar para o
modo Layout.
3. Certifique-se de que a barra Insert exibe a categoria Layout e clique no botão Draw
Layout Cell.
Depois de selecionar a ferramenta Draw Layout Cell, o ponteiro muda para um sinal de
adição (+) quando você o move na janela Document. O seletor de tag é substituído por
uma descrição da ferramenta escolhida.
Uma célula de layout permite desenhar uma célula em qualquer lugar na página. No
modo Layout, você não precisa se preocupar com o número ou com o arranjo das linhas e
colunas ao criar sua tabela – o Dreamweaver cria e gerencia as linhas e colunas automati-
camente quando você determina a localização das células em sua página.
Você não pode utilizar a ferramenta Layout Table para desenhar uma tabela
dentro de uma célula de outra tabela no modo Layout. É preciso utilizar o modo Stan-
dard para aninhar as tabelas.
4. Coloque o ponteiro no centro da página; em seguida, clique e arraste para dese-

nhar a célula.
Uma tabela de layout é desenhada automaticamente para conter a célula. A tabela de
layout é desenhada quase na mesma largura da janela Document, embora você possa re-
244 LIÇÃO 6
dimensionar a tabela para qualquer tamanho. A célula é delineada em azul para distin-
gui-la da tabela, que aparece delineado em verde. Uma linha sólida azul indica que o pon-
to de inserção está dentro da célula, ao passo que uma linha pontilhada azul indica que o
ponto de inserção não está na célula. Todas as partes da tabela além da célula são mostra-
das em cinza. As linhas delgadas brancas indicam as linhas e colunas que o Dreamweaver
cria para construir a tabela quando você desenha células de layout. Ao mover o ponteiro
sobre a borda da célula, ela se torna vermelho para indicar sobre qual célula você está.
Por padrão, tabelas de layout aparecem com uma guia na parte superior, o que torna
mais fácil identificar a tabela. A guia faz com que a tabela desça ligeiramente em relação à
parte superior da página; esse espaço extra não existe no navegador. A tabela também apa-
rece com uma barra na parte inferior contendo larguras e menus da coluna e a largura e o
menu da tabela. A barra, que serve o mesmo propósito que a barra de cabeçalho de tabela
no modo Standard, pode não estar visível inicialmente até você rolar o ponteiro sobre o li-
mite inferior da célula que acabou de criar.
Para ocultar a guia e a barra, escolha View > Visual Aids > Table Widths. O res-
tante desta lição assume que os auxílios visuais padrão estão ativos e que você pode
ver a guia e a barra na tabela de layout.
CRIANDO TABELAS 245

5. Insira a imagem yoga_sangha-title.jpg na pasta Lesson_06_Tables/Images na célu-
la de layout que acabou de desenhar. Utilize Yoga Sangha para o texto alternativo.
Na parte Site do painel Image Assets, você pode selecionar e arrastar a ima-
gem gráfica do painel Assets para a célula na página.
Você inseriu uma imagem. A célula se expande para ajustar a imagem gráfica se ela for
menor que o tamanho da imagem gráfica. O novo tamanho é exibido entre parênteses ao
lado do tamanho original da coluna na barra de larguras da tabela.
A barra de larguras da tabela pode desaparecer ao inserir a imagem. Para visua-

lizá-la novamente, role o ponteiro sobre a borda inferior da célula.
246 LIÇÃO 6
Modificando o layout da tabela
Ao desenhar suas páginas no modo Layout, você desejará mover, redimensionar ou adi-
cionar novas células enquanto estiver adicionando conteúdo. Uma célula de layout não
pode sobrepor-se a outras células e não pode ser movida para fora da tabela de layout.
1. No documento events.html, selecione a célula movendo o ponteiro sobre a borda e

clicando na borda quando ela se tornar vermelha.
A borda de célula muda para azul e as alças aparecem. Arraste as alças para redimensionar
a célula.
Você pode também pressionar Cmd e clicar (Macintosh) ou Ctrl e clicar (Win-
dows) em uma célula para exibir as alças de redimensionamento.
2. Se a célula for maior do que a imagem, utilize as alças para arrastar a borda da cé-
lula de modo a redimensioná-la, ajustando-a precisamente em torno da imagem gráfi-
ca. A célula deve ser do mesmo tamanho da imagem gráfica.
Utilize a alça de seleção no canto inferior esquerdo da célula para ajustar o ta-
manho se a barra de largura da tabela estiver ocultando as outras alças de seleção na
parte inferior da célula. Outra alternativa é o atalho pelo teclado Cmd +Shift+I (Macin-
tosh) ou Ctrl+Shift+I (Windows) para ocultar todos os auxílios visuais – ative novamen-
te os auxílios visuais repetindo o comando quando tiver terminado de redimensionar a
célula.
Na guia Table, o tamanho listado nos parênteses substitui a exibição de tamanho antigo.
Se a célula criada inicialmente era menor do que o tamanho da imagem gráfica, a célula
terá se expandido automaticamente para se ajustar de forma precisa em torno da imagem
e não é preciso redimensioná-la. Se a célula criada era maior do que a imagem gráfica,
você deve redimensionar a célula para certificar-se de que as bordas da célula de layout se
alinhem com as bordas da imagem.
3. Clique na borda da célula (não nas alças de redimensionamento) e arraste a célula,

movendo-a para a parte superior central da página.
Se você moveu a célula para a direita ou esquerda a fim de centralizá-la, note que os nú-
meros de coluna na tabela de layout circundante mudam para exibir o novo tamanho.
4. Utilize as teclas de seta para mover a célula para a esquerda.

As teclas de seta movem a célula um pixel por vez. Mantenha pressionada a tecla Shift para
mover a célula 10 pixels por vez. Deixe algum espaço na coluna entre essa célula e o lado
da tabela.
CRIANDO TABELAS 247

5. Escolha a ferramenta Draw Layout Cell novamente e desenhe três outras células
em uma única coluna no meio da página abaixo da célula no topo, com um pequeno
espaço entre elas.
Sua página deve ser semelhante ao exemplo mostrado aqui. Não se preocupe com os ta-
manhos das colunas listados na barra de largura da tabela; eles variam de acordo com a
colocação exata de suas células de layout.
Quando você desenha uma célula na página, guias brancas aparecem para ajudar a po-
sicionar outras células que você queira alinhar à primeira célula. Utilize as guias horizon-
tais para alinhar a parte superior das células.
Para desenhar várias células sem clicar em Draw Layout Cell mais de uma
vez, mantenha pressionada Cmd (Macintosh) ou Ctrl (Windows) enquanto desenha a
primeira célula. Você pode continuar a desenhar novas células até liberar a tecla mo-
dificadora.
6. Das três células que acabou de criar, expanda a primeira célula de modo que fique
tão larga quanto a célula que contém a imagem yoga_sangha-title.jpg. Abra events.txt
na pasta Lesson_06_Tables/Text. Copie a primeira linha do cabeçalho e o parágrafo
abaixo dela, cole o texto na primeira célula abaixo da imagem gráfica yoga_sangha-
title.jpg.
A célula se expande se for necessário ajustar o conteúdo.
7. Insira a imagem om.jpg da pasta Lesson_06_Tables/Images na célula vazia abaixo

daquela em que o texto foi colado. Ajuste a célula de modo que ela tenha o mesmo ta-
manho da imagem e move-a para o centro da página. Copie o restante do texto do ar-
quivo events.txt e cole-o na última célula.
248 LIÇÃO 6
Sua página agora deve ser semelhante ao exemplo mostrado aqui.
Aplicando formatação de célula

Como no modo Standard, você pode alterar vários atributos da tabela, incluindo cor e ali-
nhamento da célula.
No documento events.html, selecione a célula acima do om.jpg clicando na borda da
célula. Digite o código #FFCC99 no campo de texto Background Color no inspetor Pro-
perty. Configure o fundo da célula para a segunda célula de texto com a mesma cor.
A cor da célula muda para a cor que você escolhida. Certifique-se de selecionar a célula
de modo que você possa ver as alças de seleção, em vez de colocar o ponto de inserção
dentro da célula.
CRIANDO TABELAS 249

Para alterar a cor de fundo da tabela inteira, selecione a tabela clicando em sua
borda verde ou em qualquer uma de suas áreas acinzentadas. Clique na caixa Bg color
e escolha uma cor para a tabela.
Especificando a largura do layout

No modo Layout, você pode controlar a largura de tabelas de duas maneiras: pode confi-
gurar uma largura fixa, o padrão, ou pode utilizar Autostretch, que faz com que a largura
das células mude dependendo da largura do navegador. Neste exercício, você controlará a
largura aplicando Autostretch.
1. No documento events.html, selecione a célula de texto no topo um pouco abaixo

da imagem gráfica yoga_sangha-title.jpg. Clique na opção Autostretch na área Width
no inspetor Property.
A caixa de diálogo Choose Spacer Image aparece se uma imagem espaçadora não esti-
ver associada a seu site.
Na caixa de diálogo que aparece, escolha Use an existing spacer image file, clique em
OK e encontre spacer.gif na pasta Lesson_06_Tables/Images. A localização do arquivo das
imagens de espaçador será salva com suas preferências. Para alterar ou remover a imagem
de espaçador, escolha Dreamweaver > Preferences (Macintosh) ou Edit > Preferences
(Windows) e selecione a categoria Layout Mode e ajuste as configurações da imagem de
espaçador para o site Yoga Sangha.
250 LIÇÃO 6
A caixa de diálogo Choose Spacer Image inclui uma opção para criar um arqui-
vo de imagem espaçadora. Se você estiver trabalhando em um site para o qual não há
nenhuma imagem existente de espaçador, escolha essa opção e clique em OK para
navegar para o diretório em que deseja que o Dreamweaver salve a imagem espaça-
dora. A pasta Images é o melhor local.
A coluna Autostretch é exibida na barra de larguras de tabela como uma linha em zi-
guezague – você pode ter de rolar para baixo até a parte inferior do documento para vê-lo.
O Dreamweaver insere imagens espaçadoras para controlar o layout das colunas de largu-
ra fixa quando você seleciona Autostretch. Uma imagem espaçadora controla o espaça-
mento no layout, mas não é visível na janela de navegador.
Você também pode clicar no menu de uma coluna na barra de largura da tabela
e escolher Make Column Autostretch para aplicar a opção Autostretch.
2. Salve e visualize a página no navegador; em seguida, altere a largura do navegador.

Observe que a coluna se estende à medida que você altera a largura. Quando seleciona
uma coluna para Autostretch, você faz com que todas células naquela coluna se estendam
automaticamente. Utilize as guias brancas na página para determinar se outra célula está
dentro da coluna que você selecionou.
Se você não escolher utilizar as imagens espaçadoras, as colunas alteram o tamanho ou
até mesmo desaparecem se não mantiverem o conteúdo. Você mesmo pode inserir e re-
mover as imagens espaçadoras ou deixar que o Dreamweaver as adicione automatica-
CRIANDO TABELAS 251

mente quando cria uma coluna Autostretch. Para você mesmo inserir e remover essas
imagens, escolha uma das seguintes opções do menu do cabeçalho da coluna:
Add Spacer Image: A imagem espaçadora é inserida na coluna. Você não vê a ima-
gem espaçadora, mas a coluna pode mudar ligeiramente.
Remove Spacer Image: A imagem espaçadora é removida e a coluna pode mudar.
Remove All Spacer Images: Seu layout inteiro pode mudar um pouco ou radical-
mente, dependendo de seu conteúdo. Se você não tiver conteúdo em algumas colu-
nas, talvez eles desapareçam.
Os menus de coluna são contextuais e mudam dependendo de qual coluna é seleciona-

da. As três opções precedentes não estão disponíveis em todas as colunas.
Você pode fechar o documento events.html.
Utilizando uma imagem guia

Eventualmente, talvez você receba páginas que outra pessoa projetou em um programa
gráfico como Macromedia Freehand, Adobe Photoshop ou QuarkXPress ou ter uma cap-
tura de tela de uma página. Se puder converter o design em uma imagem JPEG, GIF ou
PNG, você pode importar essa imagem para o Dreamweaver e utilizá-la como uma guia,
ou imagem guia (tracing image), para recriar a página HTML.
A imagem guia é visível apenas no Dreamweaver. Ela não está incorporada no código
de HTML e não é exibida no navegador. A imagem guia aparece atrás de tudo que houver
em sua página no Dreamweaver. Enquanto estiver utilizando uma imagem guia, a cor de
fundo ou imagem de fundo de sua página é ocultada, mas essa cor de fundo ou imagem é
exibida quando você vê a página em um navegador.
1. Abra o documento layout.html da pasta Lesson_06_Tables e mude para o modo

Standard.
Neste exercício, você irá inserir uma imagem guia nesse documento.
2. Escolha View > Tracing Image > Load.

A caixa de diálogo Select Image Source se abre.
3. Escolha o arquivo design_trace.jpg, localizado na Lesson_06_Tables/Images; en-

tão clique em Choose (Macintosh) ou OK (Windows).
A caixa de diálogo Page Properties se abre.
252 LIÇÃO 6
4. Selecione a categoria Tracing Image. Para ver sua imagem na página, clique em
Apply. Arraste o controle deslizante Image Transparency para a esquerda a fim de cla-
rear a imagem em 50%. Clique em Apply para ver a alteração.
Você quer poder ver a imagem, mas não que ela distraia sua atenção.
5. Clique na categoria Appearance na caixa de diálogo Page Properties e configure

todas as margens, esquerda (Left), direita (Right), superior (Top) e inferior (Bottom),
como 0. Clique em OK para fechar a caixa de diálogo Page Properties.
O Dreamweaver simula a margem entre a borda da janela do navegador e os itens na pági-
na. Se você alterar essa margem na caixa de diálogo Page Properties, ele utilizará as opções
de margem que você especifica para colocar a imagem guia. A margem padrão (utilizada
se o campo de texto da margem for deixado em branco) pode variar dependendo do nave-
gador, mas ela tem aproximadamente sete pixels.
Você pode alterar a posição de uma imagem guia escolhendo View > Tracing
Image > Adjust Position e especificando os valores das coordenadas x e y. Se mover a
imagem guia no espaço reservado para a margem, conforme está definido na caixa de
diálogo Page Properties, os valores das coordenadas aparecem como números negati-
vos. Escolher View > Tracing Image > Reset Position faz a imagem guia retornar ao
canto superior esquerdo da janela Document com espaço de margem (0 + margem, 0
+ margem). Ao escolher View > Tracing Image > Align With Selections, a imagem guia
é alinhada ao elemento selecionado. O canto superior esquerdo da imagem guia é ali-
nhado ao canto superior esquerdo do elemento selecionado.
CRIANDO TABELAS 253

6. Digite Download the latest schedule of classes at Yoga Sangha na parte superior da
página.
Note como o texto é exibido com a imagem guia atrás dele. Uma imagem guia, como o
próprio nome diz, serve como guia para você fazer o layout de uma página. A utilização de
uma imagem guia enfatiza como é útil ter antecipadamente um plano claro bem estudado
em relação à maneira como sua página aparecerá.
Você pode salvar e fechar todos os documentos abertos.

Criou uma tabela no modo Standard
Importou dados tabulares de um documento externo como uma tabela do Dream-
weaver
Modificou as propriedades de tabela, incluindo borda, fundo, espaçamento, cor,
alinhamento e tamanho
Classificou as informações de uma tabela
Modificou uma tabela adicionando e mesclando linhas e colunas
Exportou uma tabela do Dreamweaver para um arquivo de texto ASCII que outros
aplicativos podem ler
Criou uma tabela na qual inseriu uma variedade de imagens
Aninhou tabelas posicionando uma tabela dentro de uma outra
Aprendeu como vários tamanhos e resoluções de tela podem afetar a maneira como
você determina seu layout de página
Utilizou tabelas para organizar suas páginas no modo Layout
Importou uma imagem guia para utilizar como um guia para o layout
254 LIÇÃO 6
Utilizando
7 multimídia
Elementos multimídia, incluindo filmes Macromedia Flash e QuickTime, podem ajudar
a expandir o conteúdo oferecido pelo seu site. Com o uso desses elementos, você
pode incluir animação e mídia de vídeo de modo que sua mensagem atinja o públi-
co-alvo do seu site.
Nesta lição, você criará páginas Web que incorporam filmes Flash e QuickTime.
Se quiser visualizar o resultado final desta lição, abra index.html na pasta Completed
dentro da pasta Lesson_07_Multimedia.
Nesta lição,
você criará uma
página
semelhante a
esta, enquanto
aprende a
incorporar
elementos
multimídia em
suas páginas.
UTILIZANDO MULTIMÍDIA 255

Trabalhar com texto Flash para criar rapidamente texto em diversas fontes e tama-
nhos
Inserir botões e animações Flash
Desenvolver uma apresentação de slides utilizando o Image Viewer
Incorporar um filme de QuickTime em uma página
Tempo aproximado
Esta lição deve levar aproximadamente meia hora para ser concluída.
Arquivos da lição
Arquivos de mídia:
Lesson_07_Multimedia/Images/Chakras.swf
Lesson_07_Multimedia/Images/Videos/
Arquivos iniciais:
Lesson_07_Multimedia/index.html
Projeto concluído:
Lesson_07_Multimedia/Completed/
256 LIÇÃO 7
Criando texto Flash
Ao adicionar um título à sua página, você pode utilizar texto e diferenciá-lo do corpo do
texto de alguma maneira – por exemplo, formatá-lo como uma tag de título – ou pode
criar uma imagem gráfica e inseri-la na página. Texto tem a vantagem de ser carregado na
página Web rapidamente, mas a aparência é limitada, mesmo com as folhas de estilo em
cascata (Cascading Style Sheets – CSS). Utilizar imagens gráficas como títulos resolve o
problema da falta de fontes disponíveis, mas talvez você não tenha acesso a um programa
gráfico ou não tenha tempo suficiente para criar a imagem gráfica de que precisa.
O recurso Flash text fornece o melhor entre essas duas opções. Você pode utilizar qual-
quer fonte que preferir e criar o texto diretamente dentro do Dreamweaver. O texto cria-
do é salvo como um pequeno arquivo Flash – esses arquivos utilizam a extensão .SWF.
Embora seja rápido e fácil criar e trabalhar com texto Flash, você sempre deve
considerar se seu público tem os plug-ins corretos antes de adicioná-lo ao seu site.
1. Abra o documento index.html na pasta Lesson_07_Multimedia. Posicione o ponto

de inserção em uma nova linha de parágrafo em branco abaixo do texto Welcome to
Yoga Sangha, próximo da parte superior do documento. Clique no menu Media na ca-
tegoria Common da barra Insert e selecione a opção Flash Text no menu.
É importante não clicar nas opções Flash ou Flash Button. Este exercício lida com a cria-
ção de texto Flash. A opção Flash permite inserir filmes Flash na página, enquanto a opção
Flash Button permite criar botões – as duas são diferentes do texto Flash.
A caixa de diálogo Insert Flash Text aparece.

2. Configure as seguintes opções.
No menu Font, escolha Comic Sans MS. Se Comic Sans MS não estiver disponível,
escolha outra fonte.
No campo de texto Size, digite 22.
Utilize a caixa Color para escolher a cor laranja #FFCC00.
Na janela Text, digite Welcome to Yoga Sangha.
Para cor de Rollover, digite #FFFFCC.
3. No campo Save As Text, digite welcome.swf e clique em OK.

A caixa de diálogo Insert Flash Text fecha, o texto Flash aparece na janela Document, e a
caixa de diálogo Flash Accessibility Attributes aparece.
258 LIÇÃO 7
Inicialmente, um nome de arquivo padrão é automaticamente incluído no cam-
po Save as text. Esse nome padrão é gerado com um identificador numérico:
text1.swf, text2.swf e assim por diante. É recomendado substituir o nome genérico
por um nome descritivo do arquivo de texto Flash que você está criando. A localização
padrão para salvar o texto Flash é na mesma pasta do arquivo HTML em que você está
inserindo o texto Flash, embora seja possível salvá-lo em outra pasta (como uma pasta
de imagens ou uma pasta de mídia), se preferir.
4. Digite Welcome to Yoga Sangha no campo de texto Title e clique em OK.

As outras opções incluem Access key e Tab index – você aprenderá mais sobre as duas na
Lição 11.
O texto Flash aparece no seu documento. O inspetor Property reflete os atributos do
arquivo do texto Flash welcome.swf.
5. Na janela Document, selecione o texto Flash e redimensione-o arrastando uma das

alças.
Não importa o tamanho do texto Flash. Como ele é baseado em vetor, e não texto de cor-
po normal ou uma imagem gráfica de mapa de bits, é possível redimensioná-lo direta-
mente na janela Document. Você pode aumentar ou diminuir o tamanho da imagem sem
se preocupar com a perda da qualidade da imagem.
Embora possa redimensionar imagens gráficas dentro do Dreamweaver, isso não é re-
comendável porque você não poderá ajustar a resolução. Entretanto, você pode redimen-
sionar a imagem do texto Flash que cria porque ela é uma imagem vetorial. As imagens ve-
toriais retêm sua integridade quando dimensionadas; imagens de mapa de bits (como ar-
quivos GIF e arquivos JPEG) não retêm.
Mantenha a tecla Shift pressionada para restringir as proporções enquanto re-

dimensiona o texto Flash.
6. Agora, você pode excluir o texto Welcome to Yoga Sangha original localizado aci-
ma do texto Flash. Salve o arquivo e visualize-o no navegador.
O texto aparece como mostrado no Dreamweaver.
Você também pode configurar uma cor de link e de rollover no texto Flash. O bo-
tão Play no inspetor Property permitirá ver esses efeitos diretamente dentro do Dream-
weaver. Você trabalhará com rollovers e outros elementos interativos na Lição 8.

Modificando o texto Flash
Alterar objetos de texto Flash dentro do Dreamweaver é fácil. Talvez você precise alterar
esses objetos de texto se tiver de reformular o texto, utilizar uma fonte diferente ou ajustar
o conteúdo.
1. Na janela Document, dê um clique duplo no texto Flash.

Se você não puder selecionar o texto, primeiro clique em Stop no inspetor Property.
A caixa de diálogo Insert Flash Text se abre.
2. Altere as opções de acordo com seu gosto e então clique em Apply para ver os re-
sultados das suas alterações. Ao concluir, clique em OK para fechar a caixa de diálo-
go Insert Flash Text.
O texto Flash editado e o arquivo SWF são atualizados na página.
Adicionando botões Flash

Você pode obter efeitos especiais utilizando objetos do Flash como texto, botões e filmes.
Como imagens gráficas Flash são baseadas em vetor, o tamanho dos arquivos pode ser
bem pequeno, o que ajuda a carregá-las mais rapidamente que os arquivos gráficos equi-
valentes no navegador do usuário. Assim como com o texto Flash, não é preciso ter o
Flash para criar botões Flash – você pode desenvolvê-los diretamente no Dreamweaver.
Os botões Flash têm vários estados, dependendo da posição do ponteiro e de o botão
do mouse ter sido clicado ou não. O primeiro estado é a aparência do botão quando o
ponteiro não está sobre ele. O segundo estado ocorre quando o ponteiro está sobre o bo-
tão, mas o botão do mouse não foi clicado. O terceiro estado ocorre quando o ponteiro
está no botão e o botão do mouse foi clicado. Você pode criar e manter botões Flash no
Dreamweaver a partir de um conjunto de estilos de botão pré-criados.
1. Na janela Document do index.html, posicione o ponto de inserção no começo da li-

nha Email:info@yogasangha.com próximo da parte inferior do documento.
Você irá inserir um botão Flash nessa página.
2. Na categoria Common da barra Insert, clique no menu Media e então selecione o

ícone Flash Button.
260 LIÇÃO 7
A caixa de diálogo Insert Flash Button é aberta.
3. Na lista Style, role para baixo e selecione Glass-Silver. No campo de texto Button
text, digite Email. Deixe as opções Font e Size em seus padrões: Verdana e 12, respec-
tivamente.
Uma área de exemplo na parte superior da caixa de diálogo mostra uma visualização do
estilo de botão. Você pode mover o mouse sobre essa imagem de exemplo para ver como
ela funcionará.
É possível editar essas configurações mais tarde, caso seja necessário. O próximo exer-
cício mostra como fazer.
Neste exercício, deixe o campo de texto Link opcional em branco.
4. Clique no campo de texto da cor Bg e insira #FFFFCC.

O código hexadecimal #FFFFCC representa a cor do fundo que será utilizada para o bo-
tão. Se quiser que o botão pareça sem destaque na página, em vez disso, escolha a mesma
cor utilizada para o fundo da página.

5. No campo de texto Save as, digite email-button.swf; em seguida, clique em OK na
parte superior direita da caixa de diálogo. Na caixa de diálogo Flash Accessibility Attri-
butes, digite Email no campo Title.
É importante sempre nomear seus arquivos de botão Flash e fornecer informações de

acessibilidade claras. Se não o fizer, o Dreamweaver automaticamente atribui nomes ge-
néricos.
A visualização não altera dinamicamente à medida que você altera as configu-

rações; ela mostra apenas o estilo de botão. Se quiser visualizar o botão quando fizer
as alterações, clique no botão Apply para ver as alterações na janela Document.
A caixa de diálogo Insert Flash Button fecha e um botão com as especificações que você
configurou aparece no documento. Como você acabou de inserir o botão, ele está selecio-
nado.
6. Com o botão ainda selecionado, clique no botão Play no inspetor Property.

Ao clicar em Play, é possível ver os efeitos do botão Flash na janela Document. O botão
aparece como será visto em um navegador, e as alças de seleção desaparecem. O bo-
tão Play torna-se um botão Stop.
262 LIÇÃO 7
7. Na janela Document, mova o ponteiro sobre o botão Main; em seguida, clique no
botão.
O botão muda para seu estado rollover quando o ponteiro é movido sobre ele. O botão
muda para seu estado clicado – uma aparência visual diferente – quando é clicado.
8. Clique em Stop no inspetor Property. Salve o arquivo e visualize-o no navegador.

O botão altera os estados assim como fez no Dreamweaver, dependendo da posição do
ponteiro e do clique do mouse.
Modificando botões Flash

Você pode alterar facilmente muitos dos atributos de botão a qualquer momento.
1. Na janela Document, dê um clique duplo no botão Flash criado.

A caixa de diálogo Insert Flash Button se abre.
2. Faça alterações nas configurações do botão Flash. Configure as opções deseja-

das.
Altere a fonte para Arial, por exemplo.
3. Clique em Apply para ver as alterações. Clique em OK quando terminar.

Você pode adicionar os botões de seu próprio template àqueles na lista Style utilizando o
Flash para criar arquivos SWT Generator Template fora do Dreamweaver. Para adicionar
esses arquivos ao Dreamweaver, é necessário abrir a pasta de programa do Dreamweaver e
colocá-la na pasta Configuration > Flash Objects > Flash Buttons.
Adicionado animações Flash

Utilizando o Flash, é possível criar imagens, animações e filmes vetoriais. Diferentemente
das imagens de mapa de bits, como arquivos GIF e arquivos JPEG, as imagens vetoriais
utilizam fórmulas matemáticas para criar as imagens e objetos que você vê.
Você pode adicionar animações Flash a seus documentos tão facilmente quanto adi-
ciona qualquer imagem de mapa de bits, desde que a animação já exista. Não é possível
criar esses tipos de animações diretamente dentro do Dreamweaver – é preciso utilizar o
Flash. Para este exercício, é fornecida uma animação criada no Flash.
1. Abra o documento chakras.html da pasta Lesson_07_Multimedia. Adicione um pa-

rágrafo extra acima do texto e posicione o ponto de inserção na nova linha.
Certifique-se de utilizar um retorno de parágrafo e não uma quebra de linha. Você precisa
de um novo bloco de texto.

2. Na categoria Common da barra Insert, clique no menu Media e selecione o ícone
Flash. Na caixa de diálogo Select File, selecione Images/Chakras.swf e então clique
no botão Choose (Macintosh) ou no botão Select (Windows).
Semelhante a imagens, você também pode inserir uma animação Flash a partir do painel
Assets.
3. Na caixa de diálogo Object Tag Accessibility Attributes, digite chakras no menu

Title.
A animação Flash é colocada na página.
4. No inspetor Property, é importante que as caixas Loop e Autoplay estejam marca-

das. Clique em Play para visualizar a animação no Dreamweaver.
Para visualizar os arquivos de animação no Dreamweaver, clique em Play. Clique em Stop
quando tiver concluído o teste.
Você pode redimensionar as animações arrastando suas alças de seleção.

Mantenha pressionada a tecla Shift para manter as proporções.
5. Clique em Stop no inspetor Property. Salve o arquivo e o visualize no navegador.

A reprodução automática faz com que a animação Flash comece a reprodução logo que a
página é carregada no navegador. A animação reproduz repetidamente porque você esco-
lheu Loop no inspetor Property.
Certifique-se sempre de selecionar um arquivo SWF quando inserir uma ani-

mação de Flash. Não insira arquivos .FLA ou .SWT porque eles não aparecem em um
navegador.
264 LIÇÃO 7
Utilizando o Image Viewer
Os elementos Flash permitem adicionar rapidamente interatividade a suas páginas. O
Image Viewer Flash Element cria uma interface de apresentação de slides que você pode
utilizar para apresentar uma série de imagens. Esse formato interativo de apresentação,
que pode ser configurado facilmente dentro do Dreamweaver, fornece várias opções, in-
clusive a capacidade de configurar legendas e links para cada imagem na apresentação de
slides.
O Image Viewer é o único Flash Element que o Dreamweaver 8 contém inicial-

mente. Outros elementos Flash podem ser criados no futuro pela Macromedia ou de-
senvolvedores independentes e disponibilizados por meio do Developers Exchange
no Web site da Macromedia.
1. Abra yogastudio.html da pasta Lesson_07_Multimedia/about. Escolha a categoria

Flash Elements na barra Insert e clique no botão Image Viewer.
A caixa de diálogo Save Flash Element é aberta.
2. Digite yogastudio no campo de texto Save As e salve o arquivo na pasta Les-

son_07_Multimedia/about.
O arquivo do Image Viewer Flash é salvo, e o Dreamweaver adiciona automaticamente a
extensão .swf exigida. Se o novo arquivo yogastudio.swf não aparecer imediatamente no
painel Files, clique no botão Refresh na parte superior do painel para atualizar a lista dos
arquivos.
O Image Viewer aparece na janela Document como um marcador de lugar acinzenta-
do grande com o ícone Flash no centro.

3. Clique no botão Play no inspetor Property.
O Image Viewer agora aparece na janela Document com as configurações padrão. Uma
barra de controle está localizada na parte superior do Image Viewer, que contém uma área
em branco à esquerda para um título; um campo de texto que exibe o número da imagem
atual e permite ao usuário digitar um número e ir para uma imagem diferente; e três bo-
tões: Back, Play/Stop e Forward. Abaixo da barra de controle está a área de imagem.
4. No inspetor Tag, cuja barra de título foi alterada para Flash Element quando você
selecionou o Image Viewer, clique no seletor de cor para frameColor e escolha cinza
#666666.
Você fará a maior parte da configuração para o Image Viewer no inspetor Tag, que se abre
automaticamente quando o Image Viewer é inserido e exibe as configurações padrão ini-
ciais para esse Flash Element.
Se o inspetor Tag for recolhido, clique no botão de Expand/Collapse à esquerda

do nome para expandi-lo. Se você não vir o inspetor Tag, escolha Window > Tag
Inspector.
266 LIÇÃO 7
A opção frameColor determina a cor da borda que delineia o Image Viewer. A barra de
controle utiliza vários tons de cinza diferentes, e a cor cinza #666666 corresponde às som-
bras mais escuras. Depois de escolhida uma cor, o Flash Element pode retornar automati-
camente à imagem de marcador de lugar na janela Document. Nos passos seguintes, você
continuará a configurar o Image Viewer antes de torná-lo visível na janela Document no-
vamente.
5. No inspetor Tag, clique no valor (No) para a opção frameShow a fim de disponibili-
zar os botões de menu. Escolha (Yes) no menu que aparece.
A opção frameShow ativa a opção de borda para o Image Viewer.

6. No inspetor Tag, clique no campo de valor de frameThickness e mude-o para 1; em
seguida, pressione Return (Macintosh) ou Enter (Windows) para aplicar a alteração.
Clique no botão Play no inspetor Property para ver o Image Viewer novamente na jane-
la Document.
A borda agora está configurada para uma largura de um pixel e você pode ver o contorno
acinzentado em torno do Image Viewer.
A cor de fundo do Image Viewer, definida pela opção de bgColor no inspetor Tag, é
configurada como branco por padrão. Deixe-a dessa forma para este exercício.
7. Clique no campo de valor para a opção imageURLs no inspetor Tag; então, clique
no botão Edit Array Values que aparece à direita do campo de texto.
A opção de imageURLs define as imagens que o Image Viewer conterá. Você precisa utili-
zar essa opção para especificar a localização das imagens.
Uma série de valores em Flash Elements é chamada array. O Image Viewer uti-
liza arrays para opções de imagem, legenda e URL.
268 LIÇÃO 7
A caixa de diálogo Edit ‘imageURLs’ Array se abre.
8. Com o cursor posicionado na linha para o primeiro item, clique no ícone de pasta
que aparece à direita dele. Utilize a caixa de diálogo Select File para navegar até a pas-
ta Lesson_07_Multimedia/about/Images e selecione studio_photo.jpg.
Os valores, que são os caminhos para as imagens, ficarão entre aspas simples – essas aspas
devem ser incluídas para o Image Viewer funcionar adequadamente.
Se a caixa de diálogo Edit ‘imageURLs’ Array mostrar imagens na lista Value ao

abri-la pela primeira vez (talvez na forma ‘img1.jpg’), exclua-as antes de adicionar as
imagens studio_photo selecionando cada uma e clicando no botão de sinal de subtra-
ção.
9. Clique no botão de adição (+) para outro campo de valor e selecione a imagem
studio_photo2.jpg. Continue adicionando campos de valor extras e configure suas
fontes como studio_photo3.jpg, studio_photo4.jpg, studio_photo5.jpg, studio_pho-
to6.jpg e studio_photo7.jpg. Clique em OK para fechar a caixa de diálogo Edit ‘ima-
geURLs’ Array.
Você também pode pressionar a tecla Tab para adicionar outro item à lista
quando o ponto de inserção estiver no último valor.
Agora você tem sete imagens definidas no Image Viewer.

10. Clique no campo de valor da opção imageCaptions no inspetor Tag; em seguida,
clique no botão Edit Array Values que aparece à direita do campo de texto. Digite ‘Yo-
ga Sangha’ (não esqueça de incluir as aspas) no campo de texto Value. Pressione Tab
ou utilize o botão de sinal de adição (+) para inserir seis campos adicionais de valor
enquanto adiciona a mesma legenda às imagens restantes. Clique em OK.
Semelhante aos valores de imagem, as legendas devem estar entre aspas simples para o
Image Viewer funcionar adequadamente.
Ao criar legendas, é importante adicionar o texto delas na mesma ordem em que as
imagens foram adicionadas. Se as imagens e as legendas não estiverem listadas na mesma
ordem, suas legendas, se diferentes uma da outra, talvez não correspondam corretamente
às respectivas imagens.
Você pode controlar a cor da fonte, bem como o tipo da fonte e o tamanho das
legendas, utilizando as opções captionColor, captionFont e captionSize no inspetor
Tag, respectivamente. Para este exercício, deixe as opções de formatação de legenda
em suas configurações padrão.
11. Clique no campo de valor da opção de título no inspetor Tag; em seguida, digite
Yoga Studio no campo de texto e pressione Return (Macintosh) ou Enter (Windows).
Clique no botão Play no inspetor Property para ver o Image Viewer novamente na jane-
la Document.
270 LIÇÃO 7
O título é colocado no espaço à esquerda da barra de controle.
Você pode controlar a cor da fonte, bem como o tipo da fonte e o tamanho do
título, utilizando as opções titleColor, titleFont e de titleSize no inspetor Tag, respecti-
vamente. Para este exercício, deixe as opções de formatação de título em suas confi-
gurações padrão.
Por padrão, as transições entre as imagens são configuradas como Random. Você pode
modificar o efeito de transição e escolher uma única transição clicando no campo de texto
Type value e escolhendo uma opção do menu. Deixando o valor de transição configurado
como Random para este exercício, é possível ver os diferentes efeitos de transição quando
você visualiza a página em um navegador ou utiliza os botões de barra de controle para vi-
sualizar as imagens no Dreamweaver.

Agora seu documento deve ser semelhante ao exemplo a seguir.
Você pode adicionar, alterar ou remover links associados às imagens clicando

no campo de texto de valor imageLinks e então clicando no botão Edit Array Values. A
caixa de diálogo Edit ‘imageLinks’ Array é semelhante àquelas utilizadas para configu-
rar as imagens e as legendas. Cada URL deve estar entre aspas simples. Exatamente
como as legendas, você precisa tomar cuidado para adicionar os links na mesma or-
dem das imagens a fim de uma correspondência exata. Os destinos definem onde os
links serão abertos e podem ser configurados pela opção de imageLinkTarget; o pa-
drão é _blank, que faz com que os links se abram em uma nova janela.
12. Clique fora do Image Viewer na janela Document para remover a seleção. Salve o
documento, visualize-o no navegador e teste o Image Viewer.
Feche o documento yogastudio.html quando tiver concluído sua visualização no na-
vegador.
Você pode alterar o tamanho do Image Viewer por meio do inspetor Property.
272 LIÇÃO 7
Incorporando filmes QuickTime
QuickTime é um formato popular muito utilizado para vídeo na Web que está disponível
tanto para Macintosh quanto para Windows. Filmes QuickTime podem ser vídeos sim-
ples e diretos ou podem incluir elementos interativos incluindo Flash e filmes QTVR
(QuickTime Virtual Reality) interativos com panoramas de 360 graus. Você pode inserir
filmes QuickTime tão facilmente quanto os filmes Flash.
1. Abra pose-demo.html da pasta Lesson_07_Multimedia/explorations e posicione o

ponto de inserção na linha em branco abaixo do primeiro cabeçalho no documento.
Selecione a categoria Common na barra de inserção, clique no menu Media e escolha
a opção Plugin.
O Dreamweaver trata filmes de QuickTime como plug-ins.
A caixa de diálogo Select File se abre, permitindo que você escolha o plug-in.
2. Localize o arquivo Lesson_07_Multimedia/explorations/Videos/Yoga1.mov e cli-

que em Choose (Macintosh) ou OK (Windows) para selecioná-lo.
O plug-in está incorporado na página utilizando a tag <embed>, em um tamanho padrão
de 32×32 pixels, e aparece na janela Document como um quadrado acinzentado com um
ícone de plug-in no centro.
3. Com o plug-in selecionado, utilize o inspetor Property para alterar a largura para
320 e a altura para 256.

As dimensões padrão de filmes pequenos em QuickTime feitos para a Web são 320 pixels
de largura por 240 pixels de altura. O controle do QuickTime possui 16 pixels de altura;
portanto, você precisa adicionar 16 pixels à altura do filme. Às vezes, quando você insere
filmes, eles podem aparecer cortados ou o controlador pode parecer ausente. Nesses ca-
sos, tente expandir a quantidade de espaço alocada para o filme aumentando a largura e a
altura. Quando inserir seus próprios filmes, certifique-se de obter as dimensões corretas
do filme e incluir 16 pixels adicionais ao controle.
4. Com o plug-in selecionado, clique no botão Parameters no inspetor Property.

A caixa de diálogo Parameters se abre.
5. Clique na coluna Parameter e digite controller no campo de texto. Os usuários de

Macintosh devem pressionar Tab uma vez; os usuários de Windows devem pressio-
nar Tab duas vezes. Digite true e, então, clique em OK.
Os parâmetros definem as propriedades dos filmes. Ao especificar um parâmetro de con-
trole com o valor true, o controle de QuickTime será incluído abaixo do filme. Você pode
configurar o valor como true ou false. No caso do controle, true o ativará, enquanto false
o desativará. Se você não especificar o parâmetro de controle com um valor true, seus visi-
tantes não conseguirão vê-lo.
Outro parâmetro que você pode configurar é a reprodução automática, que de-
finirá se seus filmes iniciam depois de a página ser carregada ou se dependem de o vi-
sitante pressionar Play. Para definir esse parâmetro, é necessário adicionar um item à
lista Parameter, digitar autoplay no campo de texto de parâmetro e digitar true ou false
no campo de texto do valor correspondente.
274 LIÇÃO 7
6. Clique na janela Document fora do plug-in para remover a seleção. Salve e visuali-
ze o documento.
É sempre uma boa idéia permitir que seus visitantes saibam como utilizar os materiais que
você inclui em seu Web site.
Você pode clicar no botão Play no inspetor Property para visualizar o filme na janela
Document do Dreamweaver ou pode visualizar a página no navegador. É necessário ter o
QuickTime Player instalado na máquina para visualizar filmes QuickTime. Você pode
obter o QuickTime Player no Web site da Apple: http://www.apple.com/quicktime.
Salve e feche o arquivo pose-demo.html.

Criou texto Flash
Modificou texto Flash
Adicionou e modificou botões Flash
Adicionou animações Flash
Utilizou o Image Viewer para criar uma apresentação de slides
Incorporou um filme QuickTime à sua página

Adicionando
interatividade
8 com o usuário
Interatividade e feedback do usuário são componentes importantes de Web sites, e
podem produzir uma variedade de benefícios quando integrados eficientemente.
Esses benefícios incluem ajudar seus visitantes a entender melhor o conteúdo e o pro-
pósito de seu site, ajudar os usuários a navegar mais fácil e diretamente por suas pági-
nas e fornecer aos visitantes uma experiência mais agradável e produtiva.
Há muitas maneiras de levar interatividade a um Web site. Páginas dinâmicas e orien-

tadas a banco de dados, Macromedia Flash e Quick Time Virtual Reality (QTVR – filmes
que suportam panoramas de 360 graus e componentes interativos) são alguns exem-
plos das muitas ferramentas que podem ser utilizadas para criar páginas interativas.
Uma das ferramentas mais comuns e eficientes para criar Web sites interativos é o Ja-
vaScript, usado principalmente para o script do lado cliente; isto é, os scripts são incluí-
dos nas páginas Web e processados pelo navegador. Outros scripts, incluindo aqueles
Neste projeto, você criará rollovers

com imagens que já estão na
página e aprenderá a fazer mais de
uma imagem na página mudar ao
mesmo tempo.
ADICIONANDO INTERATIVIDADE COM O USUÁRIO 277

utilizados por Java Server Pages (JSP) são scripts do lado servidor; eles são processa-
dos pelo servidor e fornecidos ao usuário.
O Macromedia Dreamweaver simplifica o processo do uso de funções JavaScript

padrão fornecendo comportamentos – rotinas de código JavaScript pré-escritas que
você pode incorporar facilmente ao seu Web site. Um comportamento combina um
evento de usuário (como mover o ponteiro sobre um botão gráfico no navegador) com
uma ação ou série de ações que acontecem como resultado desse evento. Você pode
utilizar comportamentos para adicionar interatividade às suas páginas, permitindo a
seus usuários receber feedback com base em suas ações e alterar ou controlar as in-
formações que eles vêem. Nesta lição, você utilizará comportamentos do Dreamwea-
ver para criar rollovers, novas janelas e menus de navegador. O Dreamweaver inclui
vários comportamentos predefinidos; você pode estender o Dreamweaver obtendo
comportamentos adicionais ou, se for proficiente com JavaScript, pode criar seus pró-
prios comportamentos.
Para ver exemplos das páginas concluídas, abra Completed/explorations/poses.html e

Lesson_08_Interactivity/Completed/explorations/meditations.html.

Criar rollovers
Adicionar interatividade com o usuário a suas páginas utilizando comportamentos
Adicionar vários comportamentos a uma ação de usuário
Adicionar comportamentos a mapas de imagem
Criar uma mensagem de barra de status
Redirecionar usuários com base na versão de seus navegadores
Abrir uma nova janela do navegador
Criar um menu pop-up
Tempo aproximado
Arquivos da lição
Arquivos iniciais:
Lesson_08_Interactivity/explorations…(todos os arquivos)
Projeto concluído:
Lesson_08_Interactivity/Completed/explorations…(todos os arquivos)
278 LIÇÃO 8
Inserindo uma imagem de rollover
Um dos usos mais comuns de JavaScript em páginas Web é a criação de um rollover – uma
imagem que muda quando o usuário move o ponteiro sobre ela. Os rollovers combinam o
uso de duas imagens dentro do mesmo espaço. Quando um visitante chega pela primeira
vez a uma página que utiliza rollovers, essas combinações de imagem são exibidas em seu
estado original. À medida que o ponteiro move a imagem de rollover, uma nova imagem é
colocada em seu lugar. A nova imagem é, às vezes, referida como estado on ou over de uma
imagem. Quando o usuário move o ponteiro para fora da imagem, esta pode retornar no-
vamente à imagem original ou permanecer alterada. Um rollover é uma aplicação básica
de interatividade – ele fornece ao usuário uma resposta ao ato de mover o ponteiro sobre a
imagem. Essa resposta freqüentemente é um efeito visual na imagem existente, como
acender um botão, destacar uma guia ou alterar a profundidade aparente para fazer um
elemento navegacional parecer ativo. A resposta do rollover também pode incorporar in-
formações adicionais na nova imagem como uma descrição ou explicação do conteúdo.
A interatividade de um Web site diz respeito principalmente à experiência do usuário;
é o que ocorre entre o visitante e o Web site. A interação requer uma ação e uma resposta –
é um processo de comunicação de duas vias. A incorporação de interatividade em suas pá-
ginas – designando a resposta que seu site fornece às ações do visitante – pode trazer mais
complexidade e profundidade à experiência de visitar seu site. Os Web sites que encora-
jam ação ou participação provavelmente são mais bem-sucedidos, funcionais e memorá-
veis – causam um impacto maior sobre o visitante – do que aqueles em que o usuário fica
preso a uma situação passiva.
Você pode criar rollovers no Dreamweaver sem jamais examinar o código HTML Ja-
vaScript. Um rollover é um comportamento simples que é incluído na categoria Com-
mon da barra Insert. Quando você utiliza esse método, o Dreamweaver cria o comporta-
mento nos bastidores.
1. Abra poses.html da pasta Lesson_08_Interactivity/explorations. Clique na primeira

célula vazia da tabela na parte superior da janela Document. Na categoria Common da
barra Insert, selecione o botão Rollover Image no menu Images.

A caixa de diálogo Insert Rollover Image se abre.
O Dreamweaver conduz você pelo processo de criação de rollovers nesta caixa de diá-
logo. Se você ainda não tiver inserido as imagens a partir das quais deseja criar rollovers na
página, talvez prefira este método porque permite inserir uma imagem e defini-la como
um rollover ao mesmo tempo. No próximo exercício, você criará rollovers para imagens
que já foram inseridas na página.
Você também pode escolher Insert > Interactive Images > Rollover Image
para inserir uma imagem de rollover utilizando a mesma caixa de diálogo.
2. No campo de texto Image name, digite home para o nome da imagem.

Esse campo é utilizado para nomear a imagem. Se você não nomear suas imagens de rollo-
ver, o Dreamweaver atribuirá nomes genéricos automaticamente em uma ordem numé-
rica: Image1, Image2 e assim por diante. Ao criar suas páginas Web, é útil tornar padrão a
prática de atribuir a todos os rollovers nomes específicos e significativos que claramente
indiquem o propósito deles. Ao nomear suas imagens, não utilize espaços ou qualquer ca-
ractere especial e não inicie o nome com um número; qualquer uma dessas ações pode
causar problemas com o script, e seus rollovers podem não funcionar adequadamente
como resultado.
3. Clique no botão Browse ao lado do campo de texto da imagem Original e selecione

home.gif na pasta Lesson_08_Interactivity/explorations/images.
Essa imagem aparece na página antes do rollover.
4. Clique no botão Browse ao lado do campo de texto da imagem de Rollover e sele-

cione para home-on.gif na pasta Lesson_08_Interactivity/explorations/images para a
imagem de rollover.
280 LIÇÃO 8
Quando essa página é visualizada em um navegador, o visitante vê inicialmente a imagem
home.gif. Home-on.gif substitui a imagem home.gif quando o usuário rola pelo home.gif
na janela do navegador.
Ao criar imagens gráficas de rollover, crie a imagem original e a imagem que a

substituirá nas mesmas dimensões. Se as duas não forem do mesmo tamanho, a se-
gunda imagem de rollover pode ser redimensionada para o tamanho da primeira. O re-
dimensionamento distorce a segunda imagem porque ela tem disponível apenas o es-
paço reservado pela primeira imagem.
5. Digite Home no campo de texto Alternate text. Clique no botão Browse ao lado do
campo de texto When clicked, Go to URL e localize o arquivo index.html na pasta Les-
son_08_Interactivity. Deixe a caixa Preload rollover image marcada e, em seguida, cli-
que em OK.
A opção Preload rollover image aparece marcada por padrão e é altamente recomendada.
Essa configuração faz com que a imagem secundária carregue quando o documento car-
rega no navegador do visitante. Se essa configuração não for verificada, a imagem não car-
regará até que o visitante faça o rollover da imagem principal e o navegador solicite essa
imagem de rollover do servidor. Carregar a imagem junto com o restante da página faz os
rollovers acontecerem mais rapidamente, eliminando qualquer retardo causado pelo
download que ocorre no momento em que o usuário faz o rollover da imagem.
O rollover agora vincula ao arquivo que você escolheu. O arquivo escolhido no campo
de texto When clicked, Go to URL agora aparece no campo de texto Link no inspetor Pro-
perty quando a imagem está selecionada.
Quando a imagem de rollover é selecionada, o comportamento resultante aparece no
painel Behaviors, que você utilizará no próximo exercício.

6. Salve seu arquivo e teste-o no navegador.
Você pode fechar esse arquivo.
Quando estiver criando suas imagens gráficas, torne o tamanho dos arquivos o
menor possível. Lembre-se de que com rollovers, você está descarregando não uma,
mas duas imagens para o mesmo botão. O tamanho do arquivo de um rollover como o
inserido neste exercício é aumentado porque é necessário fazer o download de duas
imagens. O aumento depende do tamanho das imagens.
Adicionando comportamentos
Este exercício demonstra o processo de criação de rollovers a partir de imagens gráficas
que já foram inseridas na página. O resultado é o mesmo que no último exercício – uma
imagem é trocada para mostrar uma imagem diferente quando o usuário rola sobre ela.
Entretanto, neste exercício será utilizado um método diferente para inserir rollovers: você
irá inserir o comportamento para o rollover que utiliza o painel Behaviors. Quando esti-
ver criando suas próprias páginas Web, utilize este método se já tiver inserido as imagens
originais em uma página. Se as imagens originais ainda não estiverem na página, você po-
derá utilizar o método do exercício anterior para configurar a imagem original e a ima-
gem de rollover de uma vez.
1. Nomeie as seis imagens de navegação de seção na tabela na parte superior da pá-

gina utilizando o campo de texto de nome de imagem no inspetor Property. O nome
das imagens deve ser como segue: about.gif deve ser nomeado about, community.gif
deve ser nomeado community, explorations.gif deve ser nomeado explorations, sche-
dule.gif deve ser nomeado schedule, teachers.gif deve ser nomeado teachers e trai-
ning.gif deve ser nomeado training. Em cada uma das imagens de navegação, crie um
link para suas respectivas páginas utilizando a técnica descrita no Capítulo 5 na seção
“Criando links para imagens gráficas”.
A atribuição de nomes das imagens para corresponder ao seu conteúdo ou à sua função é
um bom método. Essa prática de nomeação ajuda a indicar claramente quais imagens são
associadas aos nomes escolhidos.
282 LIÇÃO 8
2. Selecione o link about utilizando o seletor de tags, tendo o cuidado de não selecio-
nar apenas a imagem. Abra o painel do inspetor Tag e clique na guia Behaviors.
O painel Behaviors panel se abre.
Você também pode escolher Window > Behaviors para abrir o painel
Behaviors.
3. Clique no botão do sinal de adição (+) no painel Behaviors e escolha Swap Image
do menu Actions.

A caixa de diálogo Swap Image se abre. O comportamento de Swap Image é o que cria o
efeito de rollover utilizado no exercício anterior: ele insere a nova imagem para substituir
a imagem original, sobre a qual o visitante passa o mouse. O comportamento é uma com-
binação de uma ação e um evento.
Uma ação é o que acontece como resultado da interação do usuário. Quando você sele-
ciona uma ação, o Dreamweaver a adiciona à lista no painel Behaviors. O menu Actions
exibe ou desativa ações dependendo do selecionado na janela Document. A ação, neste
caso, é a troca de uma imagem por outra.
O Dreamweaver também adiciona um evento (ou eventos) apropriado a essa ação au-
tomaticamente. O evento é o que faz com que a ação ocorra. Um evento poderia ser o
usuário passando o mouse sobre uma imagem ou clicando em um botão, por exemplo.
Nesse caso, o evento é onMouseOver, que é o padrão do Dreamweaver para rollovers. Você
aprenderá a selecionar eventos específicos posteriormente nesta lição.
4. Na lista Images, a imagem about deve estar selecionada.

A imagem é listada como “about”, que é o nome que você definiu (no Passo 2 deste exercí-
cio) para a imagem selecionada, à qual adicionou uma ação por meio do painel Behaviors
(no Passo 4 deste exercício). Selecionar a imagem about na lista de imagens na caixa de
diálogo Swap Image indica que quando um usuário passa o mouse sobre essa imagem, ela
é substituída por uma imagem de rollover. Você escolherá a imagem de rollover no próxi-
mo passo.
Se você quisesse escolher uma imagem diferente desta lista, ela seria substi-
tuída pela imagem de rollover quando o usuário passasse o mouse sobre a imagem
about, porque é nesta que o comportamento é aplicado – você fará isso no próximo
exercício.
Lembre-se de que se você não nomear suas imagens, todas elas aparecem com o nome,
“unnamed <img>” nesta caixa de diálogo. Você pode ver algumas instâncias de “unna-
med <img>” nessa caixa de diálogo porque apenas sete imagens foram nomeadas. Essa é a
razão por que é tão importante nomear as imagens adequadamente; é muito difícil traba-
284 LIÇÃO 8
lhar com comportamentos se as imagens não forem nomeadas clara e logicamente. Em
uma lista cheia de imagens sem nome, pode ser difícil distinguir aquelas com que está tra-
balhando.
5. Clique no botão Browse ao lado do campo de texto Set source e localize a imagem
about-on.gif na pasta Lesson_08_Interactivity/explorations/images. Clique em Choo-
se (Macintosh) ou OK (Windows) para selecionar a imagem a ser utilizada como a ima-
gem de rollover.
Configure a origem para definir qual será a imagem de rollover. Configurar a origem é o
mesmo que escolher o rollover no exercício anterior. Geralmente, a aparência original
de uma imagem é conhecida como estado “off”, e a instância do rollover quando o usuá-
rio move o ponteiro sobre a imagem e ela muda é conhecida como estado “on”. As ima-
gens utilizadas nos estados “on” em geral aparecem como se um botão foi pressionado
ou uma palavra foi destacada para indicar ao visitante que o objeto é um elemento ativo
ou vinculado.
Todas as imagens de rollover que você utilizará para este exercício estão na pasta de
imagens, e os nomes dos arquivos de imagem de rollover têm o sufixo _on. Desenvolver
um sistema de nomeação lógico e ordenado para suas imagens, como about.gif para a
imagem original e about-on.gif ou about-over.gif para a imagem de rollover, o ajudará a
mantê-las organizadas e tornará mais fácil encontrar a imagem apropriada.
Depois que escolher a imagem, você retorna à caixa de diálogo Swap Image. Um aste-
risco aparece à direita do nome da imagem na lista Images para indicar que uma imagem
alternativa foi atribuída a ela para o rollover.
6. É importante que as caixas de seleção Preload images e Restore images onMouse-

Out estejam marcadas; em seguida, clique em OK.

Como com os rollovers que você inseriu no exercício anterior, a opção Preload images
está marcada por padrão. Essa opção faz com que as imagens sejam carregadas no mo-
mento em que a página é chamada pelo navegador, em vez de esperar carregar até que o
navegador precise exibir a imagem.
A opção onMouseOut da Restore image também é marcada por padrão e é recomen-
dada. Essa opção faz suas imagens trocadas reverterem às imagens originais quando o
usuário move o mouse para fora delas.
A restauração de imagens onMouseOut é feita por Swap Image Restore, que

está disponível como uma ação separada no painel Behaviors.
As duas partes do comportamento agora estão listadas no painel Behaviors: o evento

onMouseOver resulta na ação Swap Image, e o evento onMouseOut resulta na ação Swap
Image Restore. A combinação dessas ações e eventos cria o efeito de rollover – a imagem é
trocada quando o visitante move o ponteiro sobre ela e é trocada de volta quando o visi-
tante move o ponteiro para fora dela.
7. Repita os Passos 3 a 7 para os títulos restantes da seção de navegação utilizan-

do as versões – on para as imagens de rollover definidas no campo de texto Set
Source To.
Se alguma vez precisar excluir um comportamento, você pode selecionar o objeto na
janela Document que contém o comportamento, selecionar a ação que deseja excluir no
painel Behaviors e, em seguida, clicar no botão do sinal de subtração (–) na parte superior
do painel Behaviors. Também é possível excluir um comportamento selecionando-o e,
em seguida, pressionando Delete (Macintosh) ou Backspace (Windows).
No Dreamweaver 8, não é mais necessário aplicar um link a uma imagem para

que rollovers funcionem. Em vez disso, rollovers podem ser aplicados diretamente às
próprias imagens. Mas há duas boas razões para não fazer isso: primeira, isso não fun-
ciona em navegadores mais antigos; segunda, você terá rollovers que na verdade não
fazem nada quando o visitante clica neles. Os internautas aprenderam que rollovers
significam que podem ser clicados e, se sua imagem tiver apenas um rollover sem
também ser um link, seu site ficará confuso.
286 LIÇÃO 8
8. Salve seu arquivo e teste os rollovers em seu navegador.
Note que as imagens mudam quando você passa o mouse sobre elas.
Trocando várias imagens por um único evento

Você pode criar interações mais complexas com os visitantes aplicando várias ações a um
único evento. Por exemplo, você pode fazer com que várias imagens substituam suas ima-
gens originais pelas suas imagens de rollover ao mesmo tempo como resultado do mesmo
evento. Essa técnica pode ser utilizada para fazer com que duas imagens sejam trocadas,
cada uma sendo substituída pela respectiva imagem de rollover, quando o usuário passa o
mouse sobre um botão.
Neste exercício, você aplicará um comportamento à imagem gráfica meditation, o que
faz com que a imagem espaçadora que existe abaixo dela seja trocada por uma outra ima-
gem quando o usuário rola sobre a imagem gráfica inicial. Para o rollover adicional ocor-
rer utilizando o mesmo evento, você editará a ação Swap Image existente e definirá a ima-
gem substituta neste exercício.
1. Abra o documento HTML meditation da pasta Lesson_08_Interactivity/explora-

tions. Selecione a imagem meditation e então dê um clique duplo na ação Swap Image
existente no painel Behaviors.
Certifique-se de dar um clique duplo na ação Swap Image, não na ação Swap Image
Restore.
A caixa de diálogo Swap Image é aberta.

2. Na caixa de diálogo Swap Image, selecione a imagem chamada photoArea. Clique
no botão Browse à direita do campo de texto Set Source To e escolha a imagem
med_hands.jpg na pasta Lesson_08_Interactivity/explorations/images.
A área da imagem photoArea, que contém a imagem em branco abaixo da imagem gráfica
meditation, já foi nomeada. Neste passo, você está selecionando essa imagem em branco
na caixa de diálogo Swap Image de modo que possa substituí-la pela imagem da mulher
meditando.
Veja a lista Images na caixa de diálogo Swap Image. As imagens com um asterisco no fi-
nal do nome foram configuradas como rollover. A imagem meditation, por exemplo, tem
um asterisco ao lado dela porque esse rollover já foi definido. Agora a imagem photoArea
também tem um asterisco ao lado porque um rollover foi atribuído a ela neste passo. Exa-
minar essa lista é uma maneira rápida de verificar quais imagens serão trocadas de suas
imagens originais por imagens de rollover.
288 LIÇÃO 8
3. Clique em OK para fechar a caixa de diálogo Swap Image. Salve seu arquivo nova-
mente e teste-o no navegador.
Trocar várias imagens pode ser útil para fornecer ao usuário informações adicionais, mas
lembre-se de que muitas trocas de imagem extras em uma ação podem tornar o navega-
dor lento.
Quando você move o ponteiro sobre a imagem meditation, a palavra muda para uma
cor mais clara, e a imagem correspondente abaixo também muda. Ao tirar o ponteiro de
cima, as duas imagens retornam às imagens originais.
Adicionando comportamentos a mapas

de imagens
Mover o ponteiro sobre qualquer parte de uma imagem rollover padrão chama o script de
JavaScript e faz com que a troca de imagem aconteça. Mas talvez haja ocasiões em que
você quer que o rollover ocorra somente quando o usuário passar o mouse por certa parte
da imagem. Nesses casos, é possível utilizar mapas de imagem para definir essas áreas de
ponto ativo.
1. Em meditations.html, selecione a imagem med_img_map.jpg e atribua-lhe o nome

nav. Em seguida, utilize a ferramenta Rectangular Hotspot no inspetor Property para
desenhar um mapa de imagem em torno da palavra meditation.
O mapa de imagem torna clicável apenas a palavra meditations na imagem med_img_

map.gif.

2. Clique no botão do sinal de adição (+) no painel Behaviors e escolha Swap Image
do menu Actions.
Talvez você obtenha uma caixa de diálogo informando de que uma descrição deve ser
fornecida no campo de texto alt no inspetor Property. Neste exercício, a descrição já foi
atribuída, portanto você pode ignorar essa mensagem.
Você está aplicando um comportamento de imagem de troca a um mapa de ima-
gem. O comportamento não se aplica a nenhuma área da imagem que cerca o mapa de
imagem.
Como acabou de criar o mapa na imagem med_img_map.jpg, o ponto ativo é

automaticamente selecionado. Se você não aplicar o comportamento diretamente de-
pois de criar o mapa de imagem, deverá escolher a ferramenta de ponteiro no inspetor
Property e clicar nesse mapa de imagem para selecioná-lo a fim de ativar o ponto ativo
(hotspot) – você não quer aplicar o rollover à imagem inteira.
3. Na lista Images, selecione a imagem photoArea. Clique no botão Browse ao lado

do campo Set source to text e localize med_hands.jpg na pasta images. Clique em
Choose (Macintosh) ou OK (Windows) para selecionar a imagem e retornar à caixa de
diálogo Swap Image.
Você agora selecionou a imagem que aparecerá à esquerda ao rolar sobre o ponto sensível
em um navegador.
Se especificar a imagem com o ponto sensível como aquela a ser substituída, a

imagem inteira será substituída mesmo que a área clicável só esteja em certa parte da
imagem original.
4. Certifique-se de que as caixas de seleção Preload images e Restore images on-

MouseOut estejam marcadas; em seguida, clique em OK.
290 LIÇÃO 8
A caixa de diálogo fecha e retorna à janela Document. Sempre que o mapa de imagem em
med_img_map.jpg é selecionado, você pode ver a Swap Image listada no painel Beha-
viors. Se você tiver a imagem selecionada, mas não o mapa de imagem, não verá a imagem
de troca listada no painel Behaviors.
5. Salve o arquivo e teste seu trabalho no navegador.

O uso de mapas de imagem em combinação com os comportamentos pode fornecer
um controle adicional significativo sobre imagens, ações e eventos.
Editando ações e eventos

Você pode editar ações e eventos que se combinam para criar comportamentos de várias
maneiras: pode alterar o evento ao qual uma ação corresponde, pode anexar várias ações a
um único evento e pode alterar a ordem em que essas ações ocorrem. Por exemplo, no
exercício anterior, Swap Image foi a ação, e OnMouseOver foi o evento que correspondia ao
comportamento de rollover. Neste exercício, você adicionará uma ação a uma mensagem
pop-up e selecionará um evento correspondente.
1. No documento meditations.html, desenhe um ponto ativo retangular do mapa da

imagem em torno da palavra “poses” na imagem med_img_map.jpg. Com o ponto ati-
vo selecionado, clique no botão de sinal de adição (+) no painel Behaviors e escolha
Popup Message no menu Actions.

A caixa de diálogo Popup Message se abre, exibindo um campo de texto para digitar sua
mensagem.
2. Digite Explore a variety of different yoga poses e clique em OK.

A ação Popup Message e o evento correspondente, onClick, aparecem no painel Behaviors.
3. Clique no evento onClick no painel Behaviors. No menu que aparece à direita do

evento atual, selecione o evento onMouseOut.
Você pode escolher o tipo de navegador a exibir eventos fazendo uma escolha
em Show Events For do menu Add Behavior. É possível escolher mostrar eventos
para uma versão específica de navegador, como IE 6.0, ou para todos os navegadores
de um número de versão especificado, como 4.0 e superior. Depois de escolher um
tipo de navegador, você pode selecionar um evento no painel Behaviors para disponi-
bilizar o menu Events. O menu Events então lista somente os eventos que estão dis-
poníveis para o tipo de navegador escolhido.
292 LIÇÃO 8
Os eventos disponíveis neste menu podem diferir dependendo da ação e do tipo de na-
vegador escolhidos. O menu Events aparece somente quando você seleciona um evento
no painel Behaviors.
Os botões de seta que apontam para cima e para baixo no painel Behaviors podem ser
utilizados para ajustar a ordem em que os eventos aparecem na lista do painel Behaviors.
A seta que aponta para cima move o item selecionado para cima na lista; a seta que aponta
para baixo move-o para baixo. Utilize esses botões para alterar a ordem em que as ações
são executadas pelo navegador.
4. Salve e visualize a página no navegador.

Tenha cuidado quando adicionar o comportamento Popup Message a suas páginas. Se-
melhante às janelas pop-up, que você aprenderá a criar posteriormente nesta lição, as
mensagens pop-up podem rapidamente irritar seus visitantes quando são utilizadas em
excesso.
Deixe esse arquivo aberto para utilizar no próximo exercício.
Criando uma mensagem de barra de status

Uma mensagem na barra de status pode fornecer informações aos usuários sobre aonde
os links os conduzirão. Essa mensagem, que aparece na barra de status, na parte inferior
da janela do navegador, substitui a exibição padrão do URL ou do caminho para a página
vinculada.
A mensagem de barra de status só será visível quando a página é aberta no

Internet Explorer ou Netscape.
1. No documento meditations.html, desenhe um ponto ativo retangular de mapa de

imagem em torno da palavra “practice” na imagem med_img_map.jpg. Com o ponto
ativo selecionado, clique no botão de sinal de adição (+) no painel Behaviors e esco-
lha Set Text > Set Text Of Status Bar no menu de ações Add Behavior.
A caixa de diálogo Set Text Of Status Bar se abre, exibindo um campo de texto em que
você pode digitar sua mensagem.
2. Digite Developing a personal yoga practice e clique em OK.

Se você utilizar mensagens de barra de status, uma descrição concisa do material vincula-
do ajuda os usuários a navegar por suas páginas.

A ação Set Text Of Status Bar agora aparece no painel Behaviors.
3. Salve e teste o arquivo no navegador.

Ao mover o ponteiro sobre a palavra “practice”, você vê a mensagem que criou exibida na
barra de status na parte inferior da janela do navegador. Você pode deixar o arquivo me-
ditation.html aberto; ele será usado novamente mais adiante nesta lição.
Verificando o navegador
Nem todos os navegadores suportam eventos JavaScript e outros recursos – alguns, parti-
cularmente navegadores anteriores à versão 4.0, têm suporte bastante limitado. Com a
ação Check Browser, você pode detectar quais navegadores estão sendo utilizados pelos
visitantes para seu web site e redirecionar os usuários a outra página se quiser fornecer re-
cursos avançados que não serão exibidos corretamente em navegadores mais antigos. Por
exemplo, se sua página contiver camadas (abordado na Lição 9), você pode criar uma pá-
gina sem as camadas e redirecionar os usuários com navegadores 4.0 ou versão superior
para a página que utiliza camadas. Usuários com navegadores mais antigos ou com Java-
Script desativados permaneceriam na página que não utiliza camadas.
Neste exercício você adicionará um comportamento Check Browser a uma página e re-
direcionará os usuários com navegadores 4.0 ou superiores a uma outra página.
Se você utilizar este recurso, ele poderá ser ideal para manter a página que contém o
comportamento Check Browser muito pequena de modo que carregue e redirecione o vi-
sitante rapidamente. Se for muito grande, você poderá precisar de tempo considerável
para carregar, fazendo com que os visitantes esperem não apenas essa página carregar,
mas também aquela para onde foram redirecionados.
294 LIÇÃO 8
1. Abra sequences.html da pasta explorations. Selecione a tag <body> clicando no se-
letor de tags <body> (canto inferior esquerdo da janela Document).
A ação será anexada à tag <body> a fim de redirecionar um usuário quando a página é car-
regada. Você deve ver <body> exibido na barra de título do painel Behaviors, indicando
que está selecionado.
Quando a tag <body> está selecionada, todo o conteúdo no documento apare-

ce selecionado.
2. Clique no botão de sinal de adição (+) no painel Behaviors e escolha Check Brow-
ser no menu Add Behavior das ações.
A caixa de diálogo Check Browser se abre.

3. Para Netscape 4.0 e Internet Explorer 4.0 ou superior, escolha Go to URL no menu
apropriado. Tanto para o Netscape como para o Internet Explorer; do contrário, esco-
lha Stay on this page. Para Other browsers (outros navegadores), escolha Stay on
This Page.
Quando você utiliza o comportamento Check Browser, se tentou usá-lo para redirecionar
usuários com navegadores mais antigos a outra página, ele não funciona em navegadores
que não suportem JavaScript ou que simplesmente desativaram o JavaScript.
Para redirecionar todos os usuários a uma página diferente, independente-

mente de suas versões de navegador, você pode utilizar uma atualização de tag meta
escolhendo Insert > HTML > Head Tags > Refresh ou alternando para a categoria
HTML da barra Insert e escolhendo Refresh do menu Head. Na caixa de diálogo, digite
o URL para onde deseja redirecionar os usuários no campo de texto Go to URL. Se qui-
ser que usuários permaneçam na página por certo período de tempo antes de o nave-
gador carregar a página redirecionada, digite o tempo em segundos no campo de texto
Delay. A opção Refresh this document recarrega essa página no navegador.
4. Clique no botão Browse ao lado do campo de texto URL e localize o arquivo po-
ses.html na pasta Lesson_08_Interactivity/explorations.
O arquivo poses.html é a página para a qual os usuários com navegadores mais recentes
serão redirecionados.
5. Clique em OK para inserir o JavaScript em sua página.
296 LIÇÃO 8
O evento onLoad aparece com a ação Check Browser correspondente no painel Behaviors.
6. Salve o arquivo e teste a página em seu navegador.

Se você não tiver uma versão 4.0 ou superior do Internet Explorer ou Netscape, permane-
ce na página estática. Isso inclui navegadores comumente utilizados como Firefox, Safari
e Opera.
Se você tiver uma versão 4.0 ou superior do Internet Explorer ou Netscape, talvez veja
brevemente a página sequences.html antes de o navegador redirecioná-lo para outra pági-
na, poses.html.
Você pode fechar o arquivo sequences.html.
Abrindo uma nova janela de navegador

Este exercício demonstrará como abrir uma nova janela do navegador quando a página
carrega, que pode ser utilizada para exibir um anúncio, termos de definição ou uma am-
pla variedade de outras informações. Você poderia abrir uma janela do navegador utili-
zando o destino _blank juntamente com um link padrão, mas você não teria nenhum
controle sobre os atributos dessa nova janela. Por outro lado, a janela Open Browser per-
mite controlar o tamanho e vários atributos da nova janela do navegador, como barras de
rolagem e barras de menu.
Embora a opção Open Browser Window seja fácil de adicionar, pense bem an-
tes de utilizá-la em uma página Web. Certifique-se de que a janela extra seja necessá-
ria. Os usuários freqüentemente se irritam com novas janelas que se abrem continua-
mente enquanto navegam na Web. A moderação é importante – se você estiver crian-
do novas janelas de navegador ou utilizando outros comportamentos, considere o vo-
lume de feedback ou de opções interativas que está oferecendo ao visitante e chegue
a um equilíbrio entre muito pouco (que não fornece informações suficientes) e demais
(o que freqüentemente pode ser exagerado). Entender as experiências anteriores de
seus visitantes com Web sites e outra mídia ajuda você a personalizar a experiência
que eles terão durante a visualização e a interação com seu site.

1. No arquivo poses.html, selecione a palavra Uttanasana na oitava linha da primeira
coluna. Clique no botão de sinal de adição (+) no painel Behaviors para adicionar um
novo comportamento e então selecione Open Browser Window na lista.
A caixa de diálogo Open Browser Window se abrirá.
2. Clique no botão Browse e localize o arquivo fwd-fold.jpg na pasta explorations/

images.
Este arquivo é a imagem que carregará na nova janela.
3. Digite 405 para a largura da janela e 605 para a altura da janela; em seguida, clique
em OK.
A largura e a altura são escolhidas com base no tamanho do conteúdo na nova janela. Se
for apenas um anúncio de banner, você deve ajustar o tamanho da nova janela à largura e
à altura dessa imagem. Se o conteúdo for maior, ajuste o tamanho da janela de acordo.
Você também pode configurar vários atributos de janela conforme sejam necessários. Os
atributos adicionais para novas janelas são como seguem:
Navigation toolbar: A linha de botões de navegador que inclui Back, Forward,

Home e Reload. Deixe essa caixa desmarcada para este exercício.
Location toolbar: A linha de opções do navegador que inclui o campo de localiza-
ção. Deixe essa caixa desmarcada para este exercício.
Status bar: A área na parte inferior da janela do navegador em que as mensagens
(como o tempo de carregamento restante e os URLs associados aos links) aparecem.
Deixe essa caixa desmarcada para este exercício.
298 LIÇÃO 8
Menu bar: A área da janela do navegador (Windows somente) em que menus como
File, Edit, View, Go e Help aparecem. Você deve configurar esta opção se quiser que
os usuários sejam capazes de navegar a partir da nova janela. Se não configurar essa
opção, usuários só poderão fechar ou minimizar a janela a partir da nova janela.
Deixe essa caixa desmarcada para este exercício.
Scrollbars as needed: Especifica se barras de rolagem devem aparecer se o conteúdo
se estender além da área visível. As barras de rolagem podem não aparecer se você
não configurar esta opção. Se a opção Resize Handles também estiver desativada,
talvez não haja nenhuma maneira de os usuários verem o conteúdo que ultrapassa o
tamanho original da janela. Se esse for o caso, você precisa certificar-se de que a ja-
nela seja dimensionada apropriadamente para o conteúdo da página. Se a janela for
muito pequena ou muito grande e não tiver nenhuma barra de rolagem, será muito
frustrante para os usuários. Alguns navegadores negligenciarão essa configuração
(juntamente com aquela para alças de redimensionamento) e a fornecerão sempre
que seja necessária. Deixe essa caixa desmarcada para este exercício.
Resize handles: Especifica que os usuários devem ser capazes de redimensionar a ja-
nela, arrastando o canto inferior direito da janela ou clicando no botão Maximizar
(Windows) ou na caixa de tamanho (Macintosh) no canto superior direito. Se você
não configurar essa opção, normalmente os controles de redimensionamento esta-
rão indisponíveis e o usuário não poderá redimensionar a janela. Deixe essa caixa
desmarcada para este exercício.
Window name: O nome da nova janela. Você deve nomear a nova janela se quiser
tê-la como alvo de links ou controlá-la com JavaScript. Deixe esse campo de texto
em branco para este exercício.
A ação Open Browser Window agora é exibida no painel Behaviors. O evento atual
irá variar dependendo para que navegadores está exibindo. Aqui, terminamos tendo
onFocus.

4. Altere o evento onFocus para onClick.
O evento onClick permitirá que usuários acessem a nova janela clicando dentro da célula
da tabela. Talvez você deseje fornecer alguma indicação de que a célula da tabela é clicável,
como configurar a palavra com uma cor diferente, adicionar um sublinhado ou outra va-
riação.
5. Salve seu arquivo e teste sua página no navegador.

Uma nova janela abre com a imagem selecionada ao clicar dentro da célula da tabela con-
tendo “Uttanasana”.
Criando um menu pop-up

Você pode integrar menus pop-up JavaScript à navegação para fornecer a seus visitantes
uma lista de escolhas e acesso rápido a várias seções do site. O script do menu pop-up do
Dreamweaver funciona tanto no Netscape (versões 4 e superiores) quanto no Internet
Explorer (versões 4 e superiores) e também com outros navegadores populares atuais.
1. No documento poses.html, clique na imagem explorations na tabela na parte supe-

rior da página.
Quando selecionada, você deve ver duas ações listadas no painel Behaviors de quando
criou um rollover para este link no início desta lição.
2. Exclua o texto “index.html” do campo Link no Inspetor Property e pressione Return

(Macintosh) ou Enter (Windows). Na caixa de alerta que o adverte de que os eventos
JavaScript serão removidos, clique em OK.
Não há mais um link anexado à imagem explorations; e os comportamentos que você adi-
cionou anteriormente foram removidos.
3. Clique na imagem explorations para selecioná-la e então clique no botão de sinal

de adição (+) no painel Behaviors e escolha Show Pop-Up Menu no menu Actions.
Clique em Continue na caixa de diálogo Show Pop-Up Menu.
A caixa de diálogo Show Pop-Up Menu primeiro aparece com uma dica informando que
o programa Fireworks pode permitir construir menus pop-up mais avançados. Clique no
botão Continue para prosseguir com a criação do menu pop-up no Dreamweaver.
300 LIÇÃO 8
A caixa de diálogo Show Pop-Up Menu aparece com a guia Contents ativa. Você utili-
zará essa parte da caixa de diálogo para definir as escolhas a serem apresentadas para seu
visitante.
4. No campo de texto Text, substitua o texto padrão New Item digitando Meditations.
Clique no ícone de pasta ao lado do campo de texto Link, navegue até meditations.
html na pasta explorations e selecione-o. Clique em Choose (Macintosh) ou OK (Win-
dows) para fechar a caixa de diálogo.
O item Meditations é adicionado à lista de itens do menu.
5. Clique no botão sinal de adição (+) do menu para adicionar um novo item. Substi-
tua o texto padrão New Item digitando Sequences. Clique no ícone de pasta ao lado
do campo de texto Link, procure sequences.html e selecione-o. Adicione um terceiro
item à lista, nomeie-o Philosophy e vincule-o a philosophy.html. Adicione um quarto
item à lista, nomeie-o Media e vincule-o a media.html.
Os nomes de itens do menu e as páginas correspondentes a que eles vinculam podem ser
editados selecionando um item na lista e utilizando os campos de texto Text e Link para
fazer alterações.

Opções de menu mais curtas e mais concisas ajudam a manter seu design lim-
po e fácil de utilizar.
Para excluir um item, selecione-o na lista de itens do menu e clique no botão

de sinal de subtração (–) do menu.
6. Selecione Sequences na lista de itens do menu. Clique no botão de seta Move

item up para mover o item Sequences para a parte superior da lista. Selecione Philo-
sophy na lista e clique no botão de seta Move item down para movê-lo para a parte
inferior da lista.
A ordem de itens do menu pode ser reorganizada facilmente com os botões de seta do
menu.
Você pode criar subcategorias de itens do menu selecionando o item que de-
seja transformar em uma subcategoria e clicando no botão Indent Item. Utilize o botão
Outdent Item para mover um item para um nível mais alto de categoria.
7. Clique na guia Appearance na caixa de diálogo Show Pop-Up Menu. Selecione Ver-
tical menu no menu de orientação. Selecione o conjunto de fontes Verdana no menu
Font e insira 10 no campo de texto Size. Não deve haver nenhuma estilização em ne-
grito ou itálico, e o alinhamento deve ser esquerdo.
302 LIÇÃO 8
Talvez você precise clicar de volta no menu Font para que a área de visualização seja atua-
lizada e mostre seu menu no tamanho escolhido. A visualização também atualizará quan-
do você especificar as cores no próximo passo.
Aqui, você está correspondendo as opções de texto do menu Pop-Up aos estilos utiliza-
dos no site do projeto “Lights of the Coast”.
Se tiver menos que quatro escolhas em sua lista de menu, o Dreamweaver re-
pete a última entrada até que haja quatro escolhas na visualização mostrada nessa cai-
xa de diálogo – isso é apenas para propósitos de exibição e não acontecerá no seu do-
cumento.
8. Utilize as caixas de cor para configurar o seguinte: Up state Text #666600 (verde
acinzentado), Up state Cell #FFFFFF (branco), Over state Text #FF9900 (laranja) e
Over state Cell #FFFFFF (branco).
Essas opções permitem configurar a aparência do menu pop-up para corresponder o mais
próximo possível ao estilo das imagens navegacionais. Você pode ver qual será a aparência
do menu na área de visualização da caixa de diálogo Show Pop Up Menu. A segunda op-
ção de menu aparece com as cores de Over State aplicadas a ele; as outras opções de menu
aparecem com as cores Up State. A visualização é aproximada; ela pode não aparecer em
um navegador exatamente como você vê aqui.

9. Clique na guia Advanced na caixa de diálogo Show Pop-Up. Verifique se as confi-
gurações padrão são assim: as escolhas de menu Cell width e Cell height (altura e lar-
gura das células) devem ser configuradas como Automatic, o Cell padding (preenchi-
mento de célula) como 3, o Cell spacing (espaçamento de célula) como 0, Text indent
(recuo de texto) como 0 e Menu delay (retardo de menu) como 1000. Faça todas as al-
terações necessárias a fim de que elas correspondam às configurações listadas aqui.
Na seção Pop-up borders, deixe a caixa Show borders desmarcada.
O Menu delay controla quanto tempo o menu leva para desaparecer depois de o visitante
rolar para fora dele.
10. Clique na guia Position na caixa de diálogo Show Pop-Up. Clique no segundo bo-
tão Menu position a partir da esquerda. Digite um valor X de 5 e um valor Y de 26. Certi-
fique-se de que Hide menu na caixa MouseOut event esteja marcada. Clique em OK.
Além dos eixos X e Y, você pode utilizar os quatro botões de posicionamento geral nessa
parte da caixa de diálogo Show Pop-Up Menu para posicionar seu menu na página.
304 LIÇÃO 8
11. Salve o arquivo e visualize em seu navegador.
O comportamento Show Pop-Up Menu agora está listado no painel Behaviors. Ele está
dividido em duas partes: Show Pop-Up Menu e Hide Pop-Up Menu.
Um arquivo JavaScript externo com a extensão .js é criado. Normalmente cha-

mado mm_menu.js, esse arquivo é necessário para o menu pop-up funcionar. O arqui-
vo externo pode ser bastante grande; portanto, você precisa decidir se a adição de
scripts, como este, tem um tamanho que seus visitantes possam descarregar rápida e
facilmente.
Teste seus menus o máximo possível. Ao passar o mouse sobre a imagem explorations
navigation, você vê o menu pop-up criado neste exercício aparecer embaixo da imagem
“explorations”. As configurações aplicadas para aparência e posição fazem o menu apare-
cer integrado com o restante da navegação.
Com o comportamento do menu Show Pop-up, há algumas discrepâncias en-

tre a maneira como os menus aparecem nos vários navegadores Macintosh e no Win-
dows. Você pode precisar ajustar o posicionamento do menu.

Criou rollovers básicos
Aprendeu a editar os comportamentos escolhendo diferentes eventos e adicionan-
do ações durante a criação de uma mensagem pop-up
Aprendeu a criar várias imagens na mudança de página quando o usuário passa o
mouse sobre uma delas adicionando vários comportamentos a uma ação de usuário
Criou uma mensagem de barra de status para fornecer informações adicionais a
seus visitantes sobre um link quando passam o mouse sobre ele
Utilizou o comportamento Check Browser para redirecionar usuários para páginas
diferentes com base na versão do navegador que eles estão utilizando
Utilizou um comportamento para fazer uma nova janela do navegador abrir quan-
do a página carrega
Criou um menu pop-up de JavaScript com vários itens do menu
306 LIÇÃO 8
Criando
9 camadas
Uma camada é um container retangular para conteúdo HTML que você pode posi-
cionar em uma localização exata na janela de navegador. As camadas podem conter
uma ampla variedade de elementos: texto, imagens, tabelas e até outras camadas.
Qualquer elemento que pode ser colocado em um documento HTML também pode
ser colocado em uma camada. As camadas são especialmente úteis para inserir ele-
mentos um sobre o outro ou fazer com que se sobreponham. Elas são suportadas
apenas por navegadores 4.0 ou versões posteriores. Podem controlar layout e apa-
rência quando utilizadas em combinação com as folhas de estilo em castata (Casca-
ding Style Sheets – CSS) e fornecem interatividade quando utilizadas em combina-
ção com comportamentos.
Nesta lição, você aprenderá várias maneiras de criar camadas no Dreamweaver. Você
irá desenhar uma camada na página do tamanho quiser e colocar uma camada na pági-
na utilizando largura e altura predeterminadas. Você aprenderá a modificar atributos de
Neste projeto, você

irá criar camadas,
colocar texto e
imagens nelas,
movê-las para
localizações exatas na
página e alterar suas
propriedades. Você
também aprenderá
sobre animações que
utilizam múltiplas
camadas em uma
linha do tempo com
quadros-chave para
controlar a visibilidade
e criar movimento.
CRIANDO CAMADAS 307

camada incluindo tamanho, colocação e visibilidade. Você também converterá suas ca-
madas em tabelas para que os usuários com navegadores mais antigos possam visua-
lizar suas páginas.
Para ver um exemplo da página concluída, abra layers.html da pasta Lesson_09_

Layers/Completed.

Criar camadas
Nomear camadas
Modificar tamanhos de camada e localizações
Utilizar camadas para controlar conteúdo em sua página
Alterar a ordem de empilhamento de camadas
Aninhar e desaninhar camadas
Alterar a visibilidade de camada
Configurar réguas e grades
Utilizar uma correção de JavaScript para um bug do Netscape
Fazer páginas projetadas com camadas compatíveis com navegadores mais antigos
Aprender a utilizar linhas do tempo
Tempo aproximado
Arquivos da lição
Arquivos de mídia:
Lesson_09_Layers/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_09_Layers/layers.html
Projeto concluído:
Lesson_09_Layers/Completed/layers.html
Lesson_09_Layers/Completed/layers_table.html
Lesson_09_Layers/Completed/transparent.gif
308 LIÇÃO 9
Criando camadas
Uma camada é simplesmente um container, conhecido como tag <div>, que utiliza pro-
priedades CSS específicas (posicionamento absoluto e índice z) que permitem que ela se
sobreponha a outros elementos.
Há várias maneiras diferentes de criar uma camada. O método escolhido talvez depen-
da da maneira como você planeja utilizar a camada e onde quer colocá-la. Neste exercício,
você criará várias camadas e inserirá conteúdo nelas.
1. Abra layers.html na pasta Lesson_09_Layers. Mude para a categoria Layout na bar-

ra Insert e verifique se o botão Standard está selecionado.
Utilize a visualização Design para esta lição.
A visualização Standard é o padrão, e o botão Standard na barra Insert estará destacado

para indicar que ela está ativa. Você deve estar na visualização Standard para criar uma ca-
mada.
Botão Draw Layer
2. Clique no botão Draw Layer na categoria Layout da barra Insert. Mova o ponteiro na
janela Document; então clique e arraste para criar uma nova camada no lado direito da
página.
O ponteiro muda para uma cruz (+) quando você o move na janela Document. Depois de
arrastar e liberar o ponteiro para criar a camada, aparece um retângulo exibindo a nova
camada.
CRIANDO CAMADAS 309

3. Escolha Dreamweaver > Preferences (Macintosh) ou Edit > Preferences (Win-
dows). Selecione a categoria Invisible Elements e marque a caixa Anchor Points For
Layers. Clique em OK.
Você agora deve ver um marcador de camada na parte superior esquerda da janela Docu-
ment. O contorno da camada aparece azul quando ela é selecionada.
Você pode utilizar o marcador de camada para selecioná-la, mas se sua cama-
da estiver posicionada na parte superior esquerda da janela Document, o marcador
pode parecer mudar a posição da camada. Essa mudança só acontece na janela Docu-
ment; quando a página for visualizada no navegador, todos os elementos estarão em
suas posições corretas. Desative os marcadores utilizando temporariamente View >
Visual Aids > Invisible Elements. Uma marca de verificação ao lado do comando no
menu indica que a opção está ativa.
Por padrão, o código da camada é inserido no topo da página, logo após a tag <body>.
O Dreamweaver utiliza a tag <div> para criar camadas que utilizam posicionamento ab-
soluto a fim de determinar o posicionamento da camada em relação às partes superior e
esquerda da janela de navegador. A tag <div> é um elemento no nível de bloco, que é um
container que estrutura partes da sua página – ela inicia uma nova linha ou um novo blo-
co. Outros elementos no nível do bloco incluem <p> (parágrafo) e <ul> (lista não-orde-
nada). Os elementos no nível do bloco podem conter outros elementos no nível do bloco,
bem como elementos embutidos. Os elementos embutidos normalmente contêm apenas
texto e outros elementos embutidos e são utilizados dentro de elementos de bloco – eles
não criam novos blocos ou linhas. Alguns exemplos dos elementos inline incluem <span>
310 LIÇÃO 9
(distribuição), <br> (quebra de linha) e <a> (âncoras, anteriormente conhecidos como
links).
O Dreamweaver reconhece várias tags adicionais que podem ser utilizadas

para criar camadas (<span>, <layer> e <ilayer>), mas não fornece a opção de utili-
zar essas tags para criar camadas. A tag <span>, que é um elemento inline, utiliza
posicionamento relativo para determinar o posicionamento da camada dependendo
da posição de outros elementos em torno dela. As tags <layer> e <ilayer> só eram
aceitas no Netscape Navigator 4. O Netscape não tem mais suporte a essas tags, e o
Internet Explorer nunca teve. A visualização Design não renderiza nem exibe esses ti-
pos de camadas, embora insira um marcador de camada para a camada.
4. Posicione o ponteiro sobre a borda da camada. Clique para selecionar a camada

quando o ponteiro transformar-se em uma mão (Macintosh) ou em uma seta de quatro
pontas (Windows).
Quando o ponteiro rolar sobre as linhas que indicam a borda da camada, as linhas tor-
nam-se vermelhas para indicar que você pode selecionar a camada.
A camada agora aparece com uma guia quadrada na parte superior esquerda. Essa guia
é a alça de seleção de camada. Os quadrados azuis nas bordas da camada são alças de di-
mensionamento.
5. Coloque o ponto de inserção dentro da camada. Insira uma tabela na camada com
os seguintes atributos: 1 linha, 1 coluna, 300 pixels de largura, borda de 0, cell pad-
ding de 5, espaçamento de célula (cell spacing) de 0, sem cabeçalho, sem legenda e
sem resumo. Abra about.txt na pasta Lesson_09_Layers/Text, copie todo o texto e cole
na tabela criada dentro da camada.
A categoria Layout do painel Insert contém um botão Insert Table.
CRIANDO CAMADAS 311

A camada se expande, se necessário, para acomodar o tamanho da tabela e o texto que a
tabela agora contém. As camadas se expandem para mostrar todo o seu conteúdo, a me-
nos que você altere a configuração Overflow no inspetor Property.
6. Coloque o ponto de inserção no documento fora da camada. Clique no botão Draw

Layer e desenhe uma segunda camada pequena no lado esquerdo da página. Insira a
imagem studio-om.jpg da pasta Lesson_09_Layers/Images, na camada. Utilize OM
como o texto alternativo da imagem.
Se necessário, a camada se expande para as dimensões da imagem. A camada não muda de
tamanho se ela for maior que a imagem.
Para desenhar múltiplas camadas continuamente sem clicar na Draw Layer

mais de uma vez, mantenha pressionada a tecla Cmd (Macintosh) ou Ctrl (Windows) à
medida que você desenha a primeira camada. Você pode continuar a desenhar novas
camadas até liberar a tecla modificadora.
Se o ponto de inserção já estiver dentro de uma camada ao inserir uma nova, esta é ani-
nhada dentro da outra.
Esteja ciente de que as camadas aninhadas podem causar problemas em na-

vegadores mais antigos.
Neste ponto, seu documento deve ser semelhante ao exemplo mostrado aqui.
312 LIÇÃO 9
As camadas que não forem selecionadas e não estiverem ativadas são exibi-
das com uma tênue linha cinza marcando suas bordas. Você pode ativar e desativar
isso escolhendo View > Visual Aids > Layer Borders. Uma marca de verificação ao lado
do comando no menu indica que a opção está ativa.
7. Coloque o ponto de inserção no documento fora da primeira e segunda camadas e

então escolha Insert > Layout Objects > Layer. Insira a imagem teaching.jpg da pasta
Lesson_09_Layers/Images na camada e digite teaching para o texto alternativo da
imagem.
A camada aparece no canto esquerdo superior da janela Document com a largura e a altu-
ra padrão especificada pelas preferências de camada. Essa terceira camada talvez se sobre-
ponha à segunda camada criada anteriormente.
O padrão do Dreamweaver é 200 pixels de largura e 115 pixels de altura, mas

você pode alterar essas opções na categoria Layers da caixa de diálogo Preferences.
Para abrir a caixa de diálogo Preferences, escolha Preferences (Macintosh) or Edit >
Preferences (Windows) e escolha a categoria Layers. Você também pode utilizar pre-
ferências Layers para configurar as opções de visibilidade, fundo, aninhamento e com-
patibilidade padrão, que serão todas abordadas mais adiante nesta lição.
Dependendo da localização do ponto de inserção, os marcadores talvez não sejam visí-

veis para a camada que você acabou de posicionar, embora o código da camada tenha sido
inserido. Os marcadores de camada podem permanecer ocultos atrás das novas camadas.
Ao adicionar camadas desenhando-as sobre as páginas, o código da camada será posicio-
nado na parte superior da página, sem parágrafos ou outro código no meio. Utilizar ou-
tros métodos para inserir camadas poderia posicioná-las entre ou dentro de outras tags,
como a tag <p> (parágrafo). Você pode remover essas tags no código, o que aprenderá na
Lição 16. Neste ponto, a terceira camada talvez obscureça parcialmente os marcadores de
camada e partes das outras camadas.
8. Clique na janela Document fora das camadas existentes para remover a seleção
da camada inserida no passo anterior. Arraste o ícone Draw Layer da barra Insert na
janela Document e solte-a fora das camadas existentes. Clique dentro da nova ca-
mada para posicionar o ponto de inserção dentro dela e inserir a imagem class.jpg
da pasta Lesson_09_Layers/Images na camada; digite class para o texto alternativo
da imagem.
CRIANDO CAMADAS 313

Não solte o ícone Draw Layer em outra camada; isso tornaria as camadas ani-
nhadas.
Uma quarta camada com a largura e altura padrão é criada na janela Document, sobre a
parte superior deslocada um pouco à direita da última camada que você criou, semelhan-
te ao exemplo a seguir. Depois de inserir a camada, o ponto de inserção estará automatica-
mente nessa camada.
9. Salve o documento layers.html.

Deixe esse arquivo aberto para o próximo exercício.
Em cada método de criação de uma camada utilizado neste exercício, a tag <div> foi
posicionada no corpo do documento, enquanto as propriedades CSS que definem essas
camadas foram posicionadas em uma folha de estilo interna no cabeçalho do documento.
A CSS foi abordada na Lição 4. Uma outra maneira de criar camadas seria especificar as
propriedades CSS que definem a colocação e o posicionamento das camadas em uma fo-
lha de estilo externa – exportando os estilos internos ou criando inicialmente os estilos na
folha de estilo externa.
314 LIÇÃO 9
Nomeando camadas
O Dreamweaver atribui nomes genéricos automaticamente em uma ordem numérica:
Layer1, Layer2 e assim por diante. Esses nomes não são muito descritivos, especialmente
quando você cria páginas complexas com múltiplas camadas. É melhor adquirir o hábito
de dar nomes descritivos e breves a suas camadas.
1. Escolha Window > Layers para abrir o painel Layers.
Você também pode abrir o painel Layers abrindo o grupo de painéis CSS e cli-
cando na guia de painel Layers.
O painel Layers, localizado no grupo de painéis Design, fornece uma lista das camadas na
página. Você pode utilizar esse painel para selecionar, nomear e alterar a visibilidade de
uma camada, além de alterar a ordem de empilhamento ou selecionar múltiplas camadas
na página. Ao criar uma nova camada, ela é colocada na parte superior da lista no painel
Layer antes das outras, se houver alguma – as camadas são listadas em ordem decrescente.
Se a camada estiver oculta ou fora da página, o painel Layers e os marcadores de camada
podem ser os únicos métodos para selecionar a camada.
Se o ponto de inserção estiver dentro de uma camada, o nome dessa camada

aparece em negrito no painel Layers, e a alça de seleção aparece na janela Document
para indicar que a camada está ativa mas não selecionada.
As quatro camadas que você acabou de criar são nomeadas Layer1, Layer2, Layer3 e
Layer4.
2. Dê um clique duplo na camada Layer1 no painel Layers, digite textlayer para o

nome de camada e pressione Return (Macintosh) ou Enter (Windows). Dê um clique
duplo na camada Layer2 no painel, digite om e pressione Return (Macintosh) ou Enter
(Windows). Não altere o nome da camada Layer3. Dê um clique duplo na camada
Layer4 no painel, digite class e pressione Return (Macintosh) ou Enter (Windows).
Não utilize espaços nem caracteres especiais (incluindo o caractere de sublinhado)
para nomes de camada. O nome de uma camada deve ser único – não atribua o mesmo
nome para mais de uma camada ou para uma camada e outro elemento, como uma
CRIANDO CAMADAS 315

imagem. É uma boa idéia utilizar um esquema consistente de nomeação para todos os
nomes de camada.
Você também pode digitar o nome no campo de texto Layer ID no inspetor

Property se a camada estiver selecionada.
À medida que atribui nomes às camadas, elas tornam-se selecionadas na janela Docu-
ment. Uma camada selecionada parece ficar temporariamente na frente das outras cama-
das, que na realidade poderiam cobri-la enquanto está selecionada. Você pode clicar na
janela Document, fora de todas as camadas, para remover a seleção de uma camada.

Modificando camadas
Depois de criar uma camada, você talvez queira adicionar um fundo a ela, movê-la ou
redimensioná-la. Uma das vantagens de utilizar camadas é que você pode colocá-las em
locais precisos na página. Você pode utilizar o inspetor Property e digitar valores para o
posicionamento e pode alinhar camadas a outras. Primeiro você precisa selecionar uma
camada antes de fazer qualquer modificação nela. Há vários métodos para selecionar
uma camada, dependendo da complexidade do seu layout.
1. Na janela Document layers.htm, posicione o ponteiro sobre a borda da camada tex-

tlayer e clique na linha de borda quando o ponteiro transformar-se em uma mão (Ma-
cintosh) ou em uma cruz com setas (Windows) e a borda tornar-se vermelha.
316 LIÇÃO 9
Se nenhuma camada estiver selecionada, clicar com a tecla Shift pressionada
em uma camada seleciona-a, ao passo que simplesmente clicar dentro de uma cama-
da coloca o ponto de inserção na camada e a torna ativa, mas realmente não seleciona
a própria camada. Você pode selecionar múltiplas camadas clicando com a tecla Shift
pressionada em outras camadas. Outras maneiras de selecionar uma única camada
são clicar no marcador amarelo que representa o marcador da camada na janela Docu-
ment, na tag da camada no seletor de tag ou no nome da camada no painel Layers.
A camada torna-se selecionada, e os quadrados pretos das alças de dimensionamento apa-

recem em torno dela. O nome da camada selecionada no painel Layers é destacado.
O inspetor Property muda para refletir as opções da camada selecionada. Para ver to-
das as propriedades, clique na seta expansora no canto inferior direito do inspetor Pro-
perty.
Para excluir uma camada, selecione-a e pressione Delete (Macintosh) ou Back-

space (Windows).
2. Redimensione a camada textlayer digitando 320px para a largura no campo de tex-

to W no inspetor Property e pressionando Return (Macintosh) ou Enter (Windows).
No inspetor Property, os campos de texto W e H exibem a largura e altura especificadas da
camada. Redimensionar uma camada altera esses valores. A unidade padrão de medida é
px (pixels).
Você também pode especificar as seguintes unidades: pc (paicas), pt (pontos),

in (polegadas), mm (milímetros), cm (centímetros) ou % (porcentagem do valor do ele-
mento pai). As abreviações devem imediatamente se seguir ao valor, sem espaço (por
exemplo, 3mm). Pixels ou porcentagem são as unidades recomendadas.
Você também pode redimensionar a camada arrastando qualquer alça de dimensiona-

mento.
Para redimensionar a camada um pixel por vez utilizando o teclado, selecione a

camada e pressione Option+tecla de seta para a direita (ou qualquer seta) no Macin-
tosh ou Ctrl+tecla de seta para direita (ou qualquer seta) no Windows. Para redimen-
sionar a camada pelo incremento atual de grade, pressione Shift+Option+tecla de seta
para a direita (ou a seta na direção em que você quer que a camada se expanda) no Ma-
cintosh (ou Shift+Ctrl+tecla de seta na direção em que você quer que a camada se ex-
CRIANDO CAMADAS 317

panda) no Windows. Veja o exercício “Configurando opções de grade e régua” mais
adiante nesta lição para aprender a configurar o incremento de grade.
Como aprendeu durante a inserção do texto e imagens anteriormente nesta lição, as

camadas se expandem para ajustar-se ao conteúdo. Quando o conteúdo da camada exce-
der o tamanho especificado, os valores originais de largura e altura serão sobrescritos. A
configuração Overflow no inspetor Property controla como as camadas se comportam
quando isso ocorre. Há quatro opções Overflow: Visible, Hidden, Scroll e Auto.
Visible, a opção padrão, aumenta o tamanho da camada, expandindo a camada
para baixo e para a direita o quanto for necessário de modo que todo o conteúdo da
camada fique visível.
Hidden mantém o tamanho da camada e corta qualquer conteúdo que não se ajusta
sem fornecer barras de rolagem.
Scroll adiciona barras de rolagem à camada, se o conteúdo exceder ou não o tama-
nho da camada.
Auto exibe as barras de rolagem apenas quando o conteúdo da camada exceder seus
limites.
Talvez você precise clicar na seta expansora no inspetor Property para tornar essas op-
ções visíveis.
Você também pode configurar a área de recorte para especificar a parte da ca-
mada que é visível. A área de recorte pode ser menor, maior ou do mesmo tamanho
que a camada. Utilize o inspetor Property para definir a área visível digitando os valores
em todos os quatro campos de texto Clip: L (left, esquerda), T (top, parte superior), R
(right, direita) e B (bottom, parte inferior). Qualquer conteúdo fora da área de recorte
será oculto. Essa configuração está disponível com todas as quatro opções Overflow.
3. Com a camada textlayer ainda selecionada, digite 375px no campo de texto L e

50px no campo de texto T no inspetor Property. Selecione a camada om e digite 125px
no campo de texto L e 100px no campo de texto T.
Certifique-se de selecionar a camada om – não a imagem que ela contém – antes de tentar
modificar as propriedades de distância esquerda (campo de texto L) e superior (campo de
texto T) para a camada om no inspetor Property.
A posição de camada pode ficar fora da página se os valores em L e T forem

configurados como números negativos. Talvez você faça isso se quiser animar a cama-
318 LIÇÃO 9
da e quiser que ela seja inicialmente colocada fora da página. Você aprenderá a animar
camadas mais adiante nesta lição.
Certifique-se de utilizar os campos de texto L e T na metade superior do inspetor Pro-

perty. Não utilize os campos de texto Clip neste passo. O campo de texto L na metade su-
perior do inspetor Property define o espaço entre a camada e o lado esquerdo da janela de
navegação. O campo de texto T na metade superior do inspetor Property define o espaço
entre a camada e o lado superior da janela de navegação.
Você também pode arrastar a alça de seleção ou a borda da camada selecionada

para movê-la para um local diferente na página. Para mover uma camada com o teclado
um pixel por vez, selecione a camada e utilize as teclas de seta. Segure a tecla Shift e
pressione uma tecla de seta para mover a camada pelo incremento atual de grade.
4. Selecione a camada class no painel Layers e arraste a alça de seleção de camada

na janela Document para baixo na página de modo que a camada apareça mais abai-
xo na página, embaixo da camada om. Selecione a camada Layer3 e arraste-a para
baixo da camada class.
Arrastar a alça de seleção da camada lhe ajudará a certificar-se de que você está realmente
arrastando a camada, não apenas o conteúdo dela.
Ao arrastar a Layer3, pausar a camada sobre a borda inferior da janela Docu-

ment faz com que o documento role para cima, deixando espaço necessário para a ca-
mada na parte inferior da janela.
Quando camadas estiverem ocultando outras que aparecem abaixo delas, é necessário
utilizar o painel Layers ou os marcadores de camada para selecionar uma camada oculta
CRIANDO CAMADAS 319

que deseja modificar. Também é possível ajustar a ordem em que camadas são sobrescri-
tas (sua ordem de empilhamento), como demonstrado no próximo exercício.
Seu documento agora é semelhante ao exemplo mostrado aqui.
5. Selecione a camada textlayer. No inspetor Property, clique na caixa Bg color e sele-

cione pale tan (marrom claro) ou digite #CCCC99 no campo de texto.
É importante selecionar a camada, não a tabela que contém o texto.
O fundo da camada muda para marrom claro.

Há duas opções para os fundos de camadas:
Bg Image: Especifica uma imagem de fundo para a camada. Digite o caminho da
imagem no campo de texto ou clique no ícone de pasta para selecionar uma imagem
de origem. O fundo de uma camada talvez não seja exibido em todos os navega-
dores.
Bg color: Especifica uma cor de fundo para a camada. Deixe o campo de texto em
branco ou escolha o padrão sem cor (a mostra de cor vazia com uma linha vermelha
atravessada) na parte superior do menu de cores para especificar transparência.
Ao utilizar uma das opções, teste suas páginas em todos os navegadores – os resultados
talvez não sejam o que você espera, dependendo do conteúdo da camada. Neste caso, você
tem texto na camada. Quando visualizado no navegador, o tamanho do texto pode variar
bastante dependendo do navegador e do sistema do visitante, particularmente se o tama-
nho do texto for relativo. O texto poderia exceder o comprimento definido da camada,
caso em que o fundo poderia ser muito grande ou muito pequeno. Para evitar isso, atri-
bua a cor marron claro (pale tan) ao fundo da tabela. Outra maneira de resolver o proble-
ma é utilizar CSS para definir um tamanho absoluto para o texto e então configurar o ta-
manho da camada dessa maneira.
6. Selecione a camada om; então, pressione e mantenha a tecla Shift pressionada ao

selecionar a camada textlayer clicando na borda dessa camada.
Você também pode manter a tecla Shift pressionada e clicar no nome de cama-
da no painel Layers para selecionar múltiplas camadas.
Como múltiplas camadas são selecionadas, a camada mais recentemente selecionada

aparece com alças sólidas – a outra camada tem alças com contornos.
320 LIÇÃO 9
Para redimensionar múltiplas camadas de uma vez, selecione duas ou mais ca-
madas no documento e escolha Modify > Align > Make Same Width ou Make Same
Height. As primeiras camadas selecionadas mudam para largura ou altura da última ca-
mada selecionada. Você também pode inserir valores de largura e altura no inspetor
Property a serem aplicados em todas as camadas selecionadas.
7. Escolha Modify > Arrange > Align Top.

Ao escolher uma opção de alinhamento, todas as camadas selecionadas são alinhadas na
posição da última. As opções de alinhamento neste menu também incluem Left, Right e
Bottom.
As partes superiores das camadas textlayer e om agora estão alinhadas entre si.
8. Salve o documento.
CRIANDO CAMADAS 321

Alterando a ordem de empilhamento de camadas
Você pode utilizar o inspetor Property ou o painel Layers para alterar a ordem de empi-
lhamento de camadas ajustando o índice z de cada uma. O índice z determina a ordem em
que camadas são desenhadas em um navegador. Uma camada com um número de índice
z maior parece estar colocada em cima de camadas com números de índice z menores. Os
valores podem ser positivos ou negativos. Isso é particularmente útil quando você tem ca-
madas sobrepostas e precisa especificar qual(is) estará(ão) sobre as outras. Também é
possível mais de uma camada ter o mesmo número de índice z, caso em que a camada que
aparece no código primeiro aparece na parte superior.
1. No documento layers.html, selecione a camada class e arraste-a para cima até que
ela sobreponha parcialmente a camada om. Visualize sua página no navegador.
Ao trabalhar com imagens nas camadas, você pode criar imagens com fundos
transparentes – salvas no formato de imagem GIF, que suporta transparência. Utilizar
imagens com fundo transparente nas camadas sobre outras imagens pode dar um
maior efeito visual de camadas sobrepostas.
Nos passos seguintes deste exercício, você ajustará a ordem de empilhamento das cama-
das para fazer a camada om aparecer em cima da camada class.
322 LIÇÃO 9
2. Selecione a camada class no painel Layers e arraste-a para baixo na lista, abaixo
da camada om. Pare de arrastar e solte a camada quando uma linha preta e fina apare-
cer entre class e textlayer no painel Layers.
Você verá as alterações aplicadas no painel Layers – a camada class agora aparece entre
om e textlayer. Os números de índice z no painel Layers também são automaticamente
alterados. Pode ser mais fácil alterar a ordem de empilhamento ao mover camadas no
painel Layers do que você mesmo alterar o valor índice z via inspetor Property porque o
Dreamweaver muda automaticamente o valor índice z.
CRIANDO CAMADAS 323

O campo de texto de índice z da camada class localizado no inspetor Property mudou
de 4 para 2.
Seu documento agora é semelhante ao exemplo mostrado anteriormente.
Salve esse arquivo e deixe-o aberto para o próximo exercício.
Aninhando e desaninhando camadas

Aninhar é uma maneira de agrupar camadas. Uma camada aninhada se move com sua ca-
mada pai e herda a visibilidade do pai. Talvez haja ocasiões em que você quer aninhar ou
desaninhar uma camada, e este exercício demonstra esse processo. Seja cauteloso; os re-
sultados poderiam ser incertos porque camadas aninhadas talvez não sejam exibidas cor-
retamente em todos os navegadores. Se escolher aninhar camadas, teste suas páginas com
os navegadores principais para garantir que o resultado seja o esperado. (O teste será visto
na Lição 15.)
Os valores Top (T) e Left (L) no inspetor Property de uma camada aninhada são
relativos à camada pai, não ao canto esquerdo superior da página. T e L especificam a
localização da camada a partir do canto superior esquerdo da página ou camada pai.
1. No documento layers.html, utilize o painel Layers para selecionar a camada Layer3

e arraste o nome da camada (não a própria camada) sobre a camada textlayer en-
quanto pressiona CMD (Macintosh) ou Ctrl (Windows). Solte Layer3 quando ela esti-
ver sobre a parte superior de textlayer.
No Windows, um contorno sólido aparecerá em torno do nome textlayer quando você
arrastar Layer3 sobre ele. Não há nenhuma indicação visual no Macintosh.
Não solte quando a área entre as camadas é destacada por uma fina linha preta
– isso alteraria a ordem de empilhamento das camadas, em vez de aninhá-las.
No painel Layers, a camada Layer3 aparece agora recuada embaixo de sua camada pai,
textlayer. Ao lado da camada textlayer, vemos um triângulo apontando para baixo (Ma-
cintosh) ou um botão de sinal de subtração (–) (Windows) que permite ver a camada ani-
nhada. Você pode recolher essa visualização clicando no triângulo (Macintosh) ou no si-
nal de subtração (Windows) a fim de exibir somente a camada pai com um triângulo que
324 LIÇÃO 9
aponta para a direita (Macintosh) ou um botão de sinal de adição (+) (Windows). Você
pode clicar no sinal de adição ou no triângulo novamente para mostrar a lista de camadas
aninhadas. A posição da camada Layer3 na janela Document muda para a posição inferior
direita da camada textlayer porque o valor esquerdo da camada Layer3 agora é relativo à
sua camada pai, textlayer.
Na janela Document, o ícone de camada representando a camada Layer3 aninhada

aparece sobre a camada textlayer, bem acima da tabela. O espaço criado por esse ícone é
visto no Dreamweaver somente se você tiver auxílios visuais ativados. O ícone não é visto
(nem ocupa espaço) na janela de navegador.
Se você visualizar o arquivo layers.html em vários navegadores diferentes, talvez note
que ocorrem diferenças na exibição de camadas. A tela pode variar dependendo dos siste-
mas operacionais e navegadores dos visitantes; portanto, sempre tenha o hábito de verifi-
car o seu trabalho em diversos navegadores.
Você também pode criar uma camada dentro de uma camada existente sele-
cionando Draw Layer na barra Insert e desenhando a nova dentro da outra. Para isso
funcionar, a caixa Nest When Created Within A Layer deve estar selecionada em Pre-
ferences. Para alterar Layer Preferences, escolha Dreamweaver > Preferences (Ma-
cintosh) ou Edit > Preferences (Windows) e selecione a categoria Layers.
CRIANDO CAMADAS 325

2. No painel Layers, selecione a camada Layer3 aninhada e arraste-a acima da cama-
da textlayer para que uma linha preta fina apareça logo acima de textlayer.
O aninhamento de uma camada é removido, e a camada não aparece mais recuada no pai-
nel Layers. A camada Layer3 agora é movida de volta para sua localização original na jane-
la Document e aparece acima de textlayer no painel Layers.

326 LIÇÃO 9
Alterando a visibilidade de camada
Você pode alterar a visibilidade de camada para mostrar ou ocultar uma camada, o que
pode ser útil ao utilizar camadas para adicionar a interatividade com o usuário. Talvez
seja necessário alterar a visibilidade de uma camada se estiver criando conteúdo dinâmico
que é exibido em resposta à interação do usuário.
1. Selecione a camada Layer3 no documento layers.html. Clique uma vez na coluna

Visibility no lado esquerdo do painel Layers para alterar a visibilidade dessa camada.
Um ícone de olho fechado aparece na coluna na linha da Layer3 indicando que a visibili-
dade mudou para oculta, e a camada desaparece temporariamente.
Para alterar a visibilidade de todas as camadas de uma vez, clique no ícone de

olho na parte superior da coluna.
Há três opções de visibilidade no painel Layers: Inherit, Visible e Hidden.
Inherit utiliza a propriedade de visibilidade do pai da camada. Para essa opção, não
há nenhum ícone exibido na coluna de visibilidade.
Visible exibe o conteúdo da camada, independentemente do valor do pai. Para essa
opção, há um ícone de olho aberto exibido na coluna de visibilidade.
Hidden exibe o conteúdo de camada como transparente, independentemente do va-
lor do pai. Se configurar uma camada como hidden, os marcadores de camada e o
painel Layers talvez sejam as únicas maneiras de selecionar essa camada. Para essa
opção, há um ícone de olho fechado exibido na coluna de visibilidade.
No inspetor Property, há uma quarta opção de visibilidade: o padrão não especifica
uma propriedade de visibilidade, mas a maioria dos navegadores interpreta isso como he-
rança do valor do pai.
Escolha Dreamweaver > Preferences (Macintosh) ou Edit > Preferences (Win-

dows) e selecione a categoria Layers para configurar a visibilidade padrão para novas
camadas.
CRIANDO CAMADAS 327

2. Salve o documento layers.html e visualize-o no navegador.
Quando a camada Layer3 estiver selecionada no Dreamweaver, você pode vê-la na janela
Document. Quando não estiver selecionada, a camada desaparece, fazendo a janela Do-
cument aparecer exatamente como ela é no navegador.
Se o conteúdo em uma camada oculta ultrapassar o conteúdo de uma camada visível, a
janela do navegador continuará a rolar depois do final da camada visível devido ao conte-
údo oculto da camada class.
3. Selecione a camada Layer3 no painel Layers e escolha Edit > Clear (Macintosh) ou
pressione Backspace (Windows).
Pressionar Delete pode não funcionar com o painel Layers no Macintosh. Você pode es-
colher Edit > Clear ou, em vez disso, remover a camada da janela Document.
Configurando opções de grade e régua

Você pode querer utilizar grades e réguas como guias visuais para o posicionamento de
camadas em sua página.
1. Selecione a camada class e utilize o inspetor Property para alterar o tamanho da

camada para 158 W e 100 H.
Fazer com que o tamanho da camada corresponda ao tamanho do conteúdo ajuda a ajus-
tar o posicionamento da camada neste exercício.
2. No documento layers.html, escolha View > Grid > Show Grid.

As grades aparecem na janela Document. Uma marca de verificação perto do comando
indica que a opção está ativada.
3. Escolha View > Grid > Snap To Grid.

Essa opção ativa e desativa a aderência. Uma marca de verificação perto do comando indi-
ca que a opção está ativada. Dessa forma, as camadas aderem às linhas de grade quando
você as aproxima.
4. Selecione a camada om; então, pressione a tecla Shift e selecione a camada class.
Utilize a alça de seleção da camada class para movê-la para a direita de modo que a
borda direita da camada class seja atraída para a sétima linha vertical da grade a partir
da esquerda e uma das caixas de grade seja exibida entre a borda superior da janela
Document e a borda superior da camada om.
328 LIÇÃO 9
A camada class parece estar acima da camada om enquanto você as move porque selecio-
nou a camada class por último – você pode ver que ambas são selecionadas no painel
Layers porque os nomes das duas camadas estão destacados. Depois de clicar fora das ca-
madas em uma área em branco da janela Document, a camada om aparece acima da
camada class novamente.
A camada class terá aderido à linha de grade. Se você clicar na janela Document para
remover a seleção das duas camadas, selecione somente a camada class; o valor L agora
deve ser 200px. Talvez você veja a tênue borda acinzentada da camada class bem à esquer-
da da linha de grade na janela Document quando sua seleção for removida. Na verdade, a
camada é alinhada exatamente com a linha de grade, mesmo que a borda pareça um pixel
à esquerda da linha de grade; a borda acinzentada de camada de um pixel que você vê é um
auxílio visual do Dreamweaver que não é exibido no navegador.
Você pode alterar a configuração de grade escolhendo View > Grid > Grid Set-
tings. Aparece caixa de diálogo Edit Grid, em que você pode alterar a cor, configurar o
valor de espaçamento e as unidades (pixels, polegadas ou centímetros) e mudar a exi-
bição de grade para linhas ou pontos. A grade pode ser útil quando você precisar ali-
nhar camadas.
5. Escolha View > Rulers > Show para ativar as réguas se ainda não estiverem visíveis.
As réguas são exibidas nas extremidades superior e esquerda da janela Document. Uma
marca de verificação perto do comando indica que a opção está ativada. As unidades para
réguas podem ser alteradas escolhendo View > Rulers > Pixels, Inches ou Centimeters.
Uma marca de verificação ao lado de uma unidade de medida indica qual está configu-
rada.
6. Selecione a camada textlayer e mova-a para a direita da camada class, alinhando

suas partes superiores e alinhando a extremidade esquerda da textlayer com a linha
de grade e a borda direita da camada class. Altere a largura da camada textlayer para
300px.
7. Visualize a página no navegador. Se necessário, ajuste o valor L (esquerdo) da ca-

mada textlayer no inspetor Property ou mova a camada utilizando as teclas de seta
para a esquerda e para a direita de modo que não haja nenhum espaço em branco en-
tre a camada class e a cor de fundo da camada textlayer.
Se o fundo tan do textlayer não continuar na parte inferior da imagem dentro da

tabela e você vir espaço em branco próximo à parte inferior da tabela quando visualiza-
da no navegador, você pode configurar o fundo com a mesma cor pan ou pode aumen-
tar a altura da camada.
CRIANDO CAMADAS 329

Também é possível desativar temporariamente o auxílio visual de bordas de camada esco-
lhendo View > Visual Aids > Layer Borders. O restante desta lição assume que você tem o
auxílio visual de bordas de camada ativado.
O ponto zero é o ponto em que as réguas horizontais e verticais se cruzam. A

localização padrão do ponto zero é o canto superior esquerdo da página, onde as extre-
midades superior e esquerda da página se encontram. Você pode configurar o ponto
zero para um local diferente clicando no quadrado entre as réguas verticais e horizon-
tais, arrastando o ponto zero para baixo e para a direita e em seguida soltando. Quando
o ponto zero for movido para um ponto dentro do documento, você vê valores ne-
gativos aparecem acima e à esquerda do ponto zero. Escolha View > Rulers > Reset
Origin para voltar o ponto zero para o padrão.
Seu documento agora deve ser semelhante ao exemplo mostrado aqui.
8. Desative as opções Grid, Snap To Grid e Ruler.
Escolha View > Grid > Show Grid para remover a marca de verificação e ocultar
a grade. Utilize o mesmo método para remover as marcas de verificação das opções
Snap To Grid (View > Grid > Snap To Grid) e Ruler (View > Rulers > Show).
O restante do livro assume que a grade está desativada. Você pode desativar as réguas ou
deixá-las ativadas. Salve este arquivo e deixe-o aberto para o próximo exercício.
330 LIÇÃO 9
Utilizando o comportamento Drag Layer
As camadas podem ser combinadas com comportamentos, tratados na Lição 8, permi-
tindo que seus visitantes interajam com sua página. O comportamento Drag Layer torna
possível ao visitante pegar uma camada na janela de navegador e movê-la para um ponto
diferente na página. Essa é uma excelente maneira de criar jogos interativos ou ferramen-
tas de ensino com elementos que podem ser movidos pelo usuário.
1. Coloque o ponto de inserção no texto que está na camada textlayer. Clique na tag
<table> no seletor de tags na parte inferior da janela Document. Pressione a tecla de
seta para a direita uma vez a fim de mover o ponto de inserção para depois da tabela e
insira a imagem teaching.jpg – digite teaching como o texto alternativo para a imagem.
A imagem teaching.jpg utilizada previamente em Layer3 está agora no textlayer, logo em-
baixo da tabela contendo o texto.
2. Crie uma nova camada um pouco abaixo da camada class. Nomeie-a grab e digite
o seguinte dentro da camada: “Grab the class image above and move it next to the
photograph of the teacher below.” [Pegue a imagem class acima e mova-a para perto
da fotografia do professor, abaixo.]
CRIANDO CAMADAS 331

É bom deixar seus visitantes saberem quando um item pode ser movido. Agora que
você incluiu o texto para permitir que o visitante saiba que a imagem class é arrastável,
pode aplicar o comportamento.
3. Clique na tag <body> no seletor de tags na parte inferior da janela Document para
selecioná-la.
O comportamento Drag Layer não pode ser aplicado diretamente a uma camada, en-
tão você o aplicará à tag <body> do documento.
Você também pode aplicar o Drag Layer Behavior a outras tags, como o link
<a>, que pode estar dentro ou fora de uma camada.
4. No painel Behaviors, clique no botão de sinal de adição (+) e selecione a ação

Drag Layer no menu drop-down Actions.
O painel Behaviors está localizado no grupo de painéis do inspetor Tag. Os

comportamentos foram tratados na Lição 8.
A caixa de diálogo Drag Layer aparece com a guia Basic ativa.
A ação Drag Layer não está disponível se você tiver uma camada selecionada.
Se a ação estiver desativada, veja se a tag <body> está selecionada.
5. Selecione a camada “class” no menu Layer e escolha Constrained no menu Move-

ment.
Quatro campos de texto aparecem à direita do menu pop-up Movement: Up, Down, Left
e Right.
332 LIÇÃO 9
6. Digite 10 no campo de texto Up, 600 no campo de texto Down, 10 no campo de tex-
to Left e 10 no campo de texto Right. Deixe os campos de texto para Drop Target e
Snap If Within em branco.
As coordenadas permitem que o visitante só posicione a camada class dentro da área da
imagem teaching. A quantidade de movimento admissível é relativa à posição original da
camada class. Você está restringindo o visitante a mover a camada class apenas 10 pixels
acima de onde ele está agora, apenas 600 pixels para baixo etc.
Se você escolher Unconstrained no menu Movement, o visitante poderá mo-

ver a camada class para qualquer lugar na página.
É possível utilizar a opção Constrain para controlar a direção e a quantidade de pixels

em que o visitante pode arrastar uma camada. Você pode restringir o visitante a mover a
camada apenas em uma direção horizontal configurando os campos de texto Up e Down
como 0 de modo que a camada não possa ser movida para cima nem para baixo. Da mes-
ma forma, você pode restringir movimento para uma direção vertical configurando os
campos de texto Left e Right como 0.
Se tiver uma área alvo onde quer que o visitante coloque a camada, você pode
especificar essa localização digitando nos campos de texto Drop Target os valores es-
querdo e superior que a camada deve ter em sua posição alvo. Você pode tornar mais
fácil para um visitante colocar a camada na localização de alvo fazendo a camada aderir
à localização alvo se ela for movida para dentro de um intervalo de pixels especificado;
utilize o campo de texto Snap If Within para configurar o intervalo de aderência.
7. Clique em OK. Salve o arquivo e visualize-o no navegador.

Teste o movimento de sua imagem class tentando movê-la. Note que você só pode mo-
vê-la dentro da região especificada pelos valores numéricos inseridos no Passo 6. Esse
comportamento talvez não funcione em todos os navegadores.
CRIANDO CAMADAS 333

A guia Advanced na caixa de diálogo Drag Layer permite especificar uma área
da imagem como uma alça que o visitante pode utilizar para pegar e mover a camada.
Ela também fornece controle sobre o que acontece com o índice z das camadas quan-
do a camada é movida. Você também tem a opção de chamar JavaScripts adicionais
enquanto a camada estiver se movendo, quando a camada for solta ou quando aderir
ao alvo. O comportamento Drag Layer fornece a capacidade de criar uma experiência
mais interativa para o visitante.
Utilizando o comportamento Show-Hide Layers

Você pode utilizar o comportamento Show-Hide Layers para controlar a visibilidade
de uma camada e fazer com que essa visibilidade seja alterada com base nas ações dos
visitantes.
1. Crie uma nova camada acima da textlayer, dê-lhe o nome yoga e posicione a ima-
gem jayne.jpg dentro dela – utilize yoga para o texto alternativo da imagem. Crie uma
segunda nova camada à direita da camada yoga. Nomeie-a details e digite o seguinte
na nova camada: Learn about a variety of yoga poses in our classes (Aprenda vários
exercícios de yoga nas nossas aulas).
Seu documento deve ser semelhante ao seguinte exemplo.
334 LIÇÃO 9
2. Configure a visibilidade da camada details como oculto selecionando a camada e
escolhendo oculto no menu Vis no inspetor Property. Clique fora da camada na janela
Document para remover sua seleção.
Você também pode configurar a visibilidade da camada clicando na coluna Visi-

bility para mostrar um ícone de olho fechado que indica que a camada está designada
como oculta. Clicar no ícone de visibilidade na coluna de qualquer camada alterará sua
visibilidade.
A camada de detalhes agora desaparece.
3. Selecione a imagem jayne.jpg, digite # no campo de texto Link no inspetor Pro-

perty e pressione Return (Macintosh) ou Enter (Windows). Com a imagem ainda sele-
cionada, clique no botão de sinal de adição (+) no painel Behaviors (localizado no
grupo de painéis do inspetor Tag) para adicionar um comportamento. Escolha
Show-Hide Layers no menu de comportamentos.
A caixa de diálogo Show-Hide Layers aparece com uma lista das camadas na página.
4. Selecione a camada de detalhes na lista Named Layers e clique no botão Show.

Clique em OK para fechar a caixa de diálogo Show-Hide Layers.
Ao clicar no botão Show, (show) é exibido ao lado da camada details na lista dentro da
caixa de diálogo Show-Hide Layers.
CRIANDO CAMADAS 335

5. No painel Behaviors, clique no menu Event e escolha <A> onMouseOver.
Esse comportamento é agora desencadeado quando o visitante rolar o ponteiro do mou-

se sobre essa camada. A seleção de eventos para comportamentos foi tratada na Lição 8.
6. Salve o arquivo layers.html e teste-o no navegador.

Se quiser que a camada permaneça oculta novamente quando o visitante

rola para fora da imagem, repita os Passos 3-5 escolhendo “Hide” em vez de
“Show” no Passo 4 e escolhendo “<A>” “onMouseOut em vez “<A>” “onMou-
seOver” no Passo 5.
Convertendo camadas em tabelas

As camadas podem ser uma maneira fácil de projetar uma página; entretanto, seu público
talvez seja limitado porque nem todos os navegadores suportam camadas. Embora os na-
vegadores mais atuais suportem camadas, os primeiros navegadores exibem conteúdo de
camada sem nenhum posicionamento e controle em relação à colocação. Se decidir proje-
tar sua página utilizando camadas, você pode querer converter as camadas em uma tabela
para oferecer uma página alternativa ao público com navegadores que não suportam ca-
madas. Teste suas páginas em diferentes navegadores e veja o que os visitantes estão utili-
zando para ajudar a determinar se deseja fornecer uma página alternativa. Depois que
converteu as camadas em uma tabela, você pode mudar para visualização Layout a fim de
completar qualquer alteração de design. Você então pode utilizar o comportamento
Check Browser para redirecionar usuários com base em sua versão de navegador.
O exercício a seguir demonstra como converter camadas, mas o método recomendável
de criar tabelas é utilizar a visualização Standard para criar tabelas ou a visualização
Layout para desenhar tabelas e células de tabela (você trabalhou com os dois métodos na
Lição 6).
Algumas restrições se aplicam ao converter camadas em tabelas: não é possível ter ca-
madas aninhadas e as camadas não podem se sobrepor. Se essas condições existirem, o
Dreamweaver exibe um alerta e não cria a tabela. Você também não pode converter uma
única camada ou um grupo de camadas em uma tabela ao mesmo tempo em que deixa
outras camadas como camadas – a página inteira e todas as camadas que ela contém serão
convertidas em tabela.
336 LIÇÃO 9
1. No documento layers.html, escolha File > Save As e digite layers_tables.html no
campo de texto Save As (Macintosh) ou File name (Windows). Salve o arquivo na pas-
ta Lesson_09_Layers.
As camadas neste documento serão convertidas e substituídas por uma única tabela.
A conversão em uma tabela remove os nomes de camada.
2. Clique na janela Document. No painel Layers, marque a caixa Prevent Overlaps.

Ajuste o posicionamento das camadas na parte superior da página de modo que elas
não se posicionem lado a lado e não se sobreponham.
As camadas que se sobrepõem não podem ser convertidas em tabela. Se você selecionar
essa opção antes de começar a desenhar as camadas, o Dreamweaver impede que as cama-
das se sobreponham. Depois que a caixa Prevent Overlaps estiver marcada, talvez você
queira testá-la tentando mover a camada class sobre a camada om. Utilizando a opção
Prevent Overlaps, você pode mover camadas o mais perto possível de outras camadas.
Se já houver camadas que se sobrepõem, marcar a caixa de seleção Prevent Overlaps
não as move. Você tem de movê-las para que parem de se sobrepor.
3. Selecione a tag <body> no seletor de tags, selecione o comportamento Drag Layer

no painel Behaviors e clique no botão Remove Event. Selecione a imagem jayne.jpg
na janela Document, selecione o comportamento Show-Hide Layers no painel Beha-
viors e clique no botão Remove Event.
CRIANDO CAMADAS 337

Ao utilizar comportamentos que se aplicam às camadas ou são projetados para afetá-las,
esses não são mais necessários depois de você converter as camadas em uma tabela. Tais
comportamentos devem ser removidos para manter seu documento limpo, conservá-lo
sem erros e código desnecessário e para reduzir o tamanho do arquivo.
4. Escolha Modify > Convert > Layers to Table.

A caixa de diálogo Convert Layers to Table se abre com várias opções:
Most accurate cria uma célula de tabela para cada camada e quaisquer células adi-
cionais que sejam necessárias para preservar o espaço entre camadas.
Smallest: collapse empty cells especifica que as bordas das camadas devem ser ali-
nhadas se são posicionadas dentro do número especificado de pixels. Se essa opção
estiver selecionada, a tabela resultante pode ter menos linhas e colunas vazias.
Use transparent GIFs preenche a última linha da tabela com GIFs transparentes, o
que assegura que a tabela é exibida da mesma maneira em todos os navegadores.
Quando essa opção estiver selecionada, você não pode editar a tabela resultante ar-
rastando suas colunas. Quando a seleção dessa opção for removida, a tabela resul-
tante não contém GIFs transparentes e sua aparência talvez varie um pouco em na-
vegadores diferentes.
Centralize a tabela resultante na página. Se a seleção dessa opção for removida, a ta-
bela é alinhada à esquerda.
As ferramentas de Layout permitem configurar qualquer opção desejada de layout
ou grade.
5. Mantenha as configurações padrão de Most accurate, Use transparent GIFs e Cen-

ter on page; então clique em OK.
Se você tiver qualquer camada que se sobrepõe, uma caixa de diálogo de advertência é exi-
bida, informando que o Dreamweaver não pode converter as camadas em tabela. Se isso
acontecer, volte para seu documento e certifique-se de que as camadas não se sobrepo-
nham.
338 LIÇÃO 9
Qualquer camada oculta é excluída. Depois de converter suas camadas em uma tabela,
você pode fazer qualquer ajuste necessário à tabela.
6. Selecione o grupo <style> no painel CSS Styles e clique no ícone de lixeira na par-
te inferior desse painel. Na janela Document, selecione o texto instruction localizado
na célula da tabela abaixo da imagem class e o exclua.
O processo de converter camadas em tabelas substitui as tags <div> no corpo do docu-
mento por uma tag <table> correspondente; entretanto, as propriedades CSS internas
definidas no cabeçalho do documento ainda permanecem. Você pode utilizar o painel
CSS Styles para excluir totalmente a folha de estilo interna ou remover apenas aqueles es-
tilos que definiram as camadas. Se examinar o painel CSS Styles, você verá dois grupos de
estilos: sangha.css e <style>. A folha de estilo externa utilizada por todo o site de projeto é
sangha.css, enquanto o grupo <style> é a folha de estilo interna criada enquanto você
trabalhou com camadas nesta lição. A camada textlayer, por exemplo, é definida no grupo
<style> como #textlayer. Quaisquer estilos que utilizam os nomes das camadas cria-
das anteriormente não são mais necessários e podem ser excluídos. Embora, nesse caso,
toda a folha de estilo interna possa ser excluída, é recomendável ser cauteloso ao excluir
uma folha de estilo interna e certificar-se de que não foram incluídos estilos adicionais es-
pecificando propriedades que definem aspectos além das próprias camadas, como estili-
zação de fonte.
Ao realizar operações como conversão de camadas em tabelas, algumas funcionalida-
des podem ser perdidas. Nesse caso, o usuário não pode mais arrastar a imagem class para
um local diferente na página – portanto, quaisquer referências ou instruções relativas a
esses recursos devem ser removidas.
CRIANDO CAMADAS 339

Utilizando o Netscape Resize Layer Fix
As versões do Netscape 4.x têm um problema com camadas que ocorre quando o usuário
redimensiona a janela de navegador: a camada muda de forma quando a janela de navega-
dor é redimensionada, o que pode causar problemas com a página. Você pode corrigir
esse problema inserindo o código Netscape Resize Layer Fix JavaScript em seu documen-
to sempre que utilizar camadas. O código de JavaScript corrige o problema do Netscape
4.x e não afeta outros navegadores.
O Dreamweaver adicionará automaticamente o Netscape Resize Fix quando você criar
uma camada em um documento. Ao excluir todas as camadas de um documento, você
deve executar esse comando e remover o código se o script ainda estiver em seu documen-
to. Como a conversão foi de camadas em uma tabela no exercício anterior, você removerá
o script agora porque ele não é mais necessário.
1. No documento layers_tables.html, escolha Commands > Add/Remove Netscape

Resize Fix.
Na caixa de diálogo Add/Remove Netscape Resize Fix que se abre, você pode adicionar
ou remover o código de JavaScript, dependendo de o script estar ou não no documento.
O código faz com que a página recarregue se o usuário redimensionar a janela de nave-
gador. O Dreamweaver adiciona automaticamente esse código à página. Se ele não esti-
ver em uma página que utiliza camadas, você pode adicioná-lo facilmente com essa cai-
xa de diálogo.
O Netscape Resize Layer Fix JavaScript está localizado no topo do documento, antes da
tag <body>, e pode ser visto na visualização Split ou Code. Você trabalhará mais com o có-
digo na Lição 16.
340 LIÇÃO 9
2. Clique em Remove.
O código Netscape Resize Fix JavaScript é removido da página.
3. Salve o documento layers_tables.html.

Animando com linhas do tempo

Geralmente, páginas HTML não têm movimento, a menos que você adicione um GIF
animado ou um filme Macromedia Flash. Você pode fazer o rollover de um botão que pa-
rece mover-se ligeiramente ao ser trocado por uma outra imagem, mas permanece estáti-
co na página. Com Dynamic HTML (DHTML), você tem a opção de adicionar animações
mais extensas à página Web diretamente do Dreamweaver. Essas animações são controla-
das com JavaScript dentro da página HTML, sem a necessidade de um plug-in. A limita-
ção das animações DHTML é que os usuários devem utilizar um navegador 4.0 ou supe-
rior para visualizar as páginas; no entanto, essas animações têm muito mais restrições que
o Flash, com o qual você pode fazer muito mais – geralmente, arquivos Flash também são
mais compatíveis e menos falhos. É recomendável utilizar filmes Flash em vez de linhas do
tempo sempre que possível. O recurso de linhas do tempo foi removido do Dreamweaver
MX 2004 por essas razões. Ele foi adicionado de volta ao Dreamweaver 8 para fornecer aos
desenvolvedores Web a capacidade de editar facilmente e manter páginas que foram cria-
das com versões anteriores do Dreamweaver. Os recursos e os componentes gerais das
animações de linha do tempo estão delineados aqui, como informações básicas para tra-
balhar com páginas mais antigas. Mas se você estiver criando uma animação, o melhor
método é utilizar o Flash.
Entendendo como as linhas do tempo funcionam

Todos os objetos incluídos em uma animação de linha do tempo estão contidos em cama-
das. As camadas são organizadas em uma linha do tempo, o que gera um caminho de mo-
vimento e controla a sincronização. Uma linha do tempo consiste em uma série de qua-
dros, quase como quadros em um filme. Cada quadro é exibido na página Web em um
ponto específico do tempo, dependendo de quantos quadros por segundo você especifica
e da duração da animação. Você pode controlar o posicionamento e as propriedades de
cada camada em um quadro. Um quadro também pode desencadear um comportamento
durante a animação.
Para mover um objeto (como texto ou uma imagem gráfica), o objeto deve estar conti-
do em uma camada. Objetos, como imagens, podem ser adicionados à linha do tempo
sem posicioná-los em uma camada, mas você não poderá animar suas posições.
CRIANDO CAMADAS 341

O painel Timelines
Abra o painel Timelines escolhendo Window > Timelines.
O painel Timelines representa as propriedades das camadas e imagens ao longo do

tempo.
Cada linha no painel Timelines é chamada canal de animação e representa os elemen-
tos na página. Como você só pode animar camadas, cada linha na Timeline só pode con-
ter camadas. Você pode utilizar o painel Timelines para controlar a posição, a dimensão, a
visibilidade e a ordem de empilhamento de uma camada.
Cada coluna no painel Timelines é chamada quadro (frame) e representa uma unidade
de tempo. Os números indicam o número de quadros que cada animação ocupa.
Adicionando um objeto a uma linha do tempo

Para adicionar um objeto a uma linha do tempo, selecione a camada em que o objeto está
contido e escolha Modify > Timeline > Add Object to Timeline. Ao utilizar esse método, a
camada é adicionada ao painel Timelines no primeiro canal de animação (a primeira linha).
Você também pode utilizar a alça de seleção de camada a fim de selecionar a

camada e arrastá-la da janela Document para o painel Timelines. Ao arrastar uma ca-
mada para o painel Timelines, a camada aparece no canal (linha) de animação em que
você a insere.
Também é possível adicionar mais linhas do tempo a uma página escolhendo Modify >
Timeline > Add Timeline. O menu drop-down da linha do tempo permite selecionar uma
linha do tempo se você criou mais de uma.
342 LIÇÃO 9
Barra de animação
Ao adicionar um objeto a uma linha do tempo, uma barra de animação horizontal azul
aparece no novo canal na linha do tempo e exibe o nome da camada na barra.
Barras de animação mostram a duração de cada objeto. Uma única linha pode incluir
múltiplas barras representando diferentes objetos. Barras diferentes não podem contro-
lar o mesmo objeto no mesmo quadro. A barra de animação pode ser reposicionada em
qualquer quadro e qualquer canal. O posicionamento inicial da barra de animação no ca-
nal é baseado na posição do cabeçote de reprodução. O cabeçote de reprodução mostra
qual quadro da linha do tempo é atualmente exibido na página. Se o cabeçote de repro-
dução estiver no Frame 1, a barra de animação iniciará no Frame 1; se o cabeçote de re-
produção estiver no Frame 8, a barra de animação iniciará no Frame 8. À medida que
você move a barra de animação, o cabeçote de reprodução também moverá. É possível
mover barras de animação no painel Timelines arrastando a área sólida das barras.
Por padrão, as barras de animação têm inicialmente uma duração de 15 quadros quando
as camadas são adicionadas ao painel Timelines. Os números dos quadros mostram a
duração da animação. Você pode controlar a velocidade e a duração da animação confi-
gurando o número total de quadros e o número de quadros por segundo (frames per se-
cond – fps). Configure o número total de quadros arrastando o último quadro-chave para
a direita, como fez neste exercício. Configure o número de quadros por segundo no
campo de texto Fps. A configuração padrão de 15 quadros por segundo é uma boa taxa
média a utilizar – taxas mais rápidas talvez não aprimorem o desempenho. Os navegado-
res sempre reproduzem cada quadro da animação, mesmo se eles não puderem atingir
a velocidade de projeção especificada no sistema do usuário.
Para alterar o tempo inicial de uma animação, selecione a barra de animação (clique no
meio da barra e não em um quadro-chave) e arraste para a esquerda ou direita. Pressio-
ne Shift para selecionar mais de uma barra por vez.
Utilizando quadros-chave
Todas as animações são controladas por quadros-chave. Quadros-chave são as instâncias
centrais que definem o que acontece na animação. Depois de posicionar uma camada na
linha do tempo, utilize quadros-chave para controlar o movimento dessa camada na pági-
na. Um quadro-chave marca um ponto na animação em que uma alteração é feita nas
propriedades especificadas (como posição ou tamanho) da camada. O Dreamweaver in-
terpola valores – isto é, ele cria os valores necessários para todos os quadros entre os qua-
dros-chave a fim de apresentar o caminho da camada. A linha do caminho que é automa-
ticamente gerada entre os quadros-chave é baseada nos valores e nas localizações das ca-
madas nos quadros-chave. Por padrão, sempre haverá um quadro-chave inicial e um qua-
dro-chave final, que são indicados por círculos abertos no começo e no final da barra de
animação. Uma animação só com esses dois quadros-chave se moverá em uma linha reta.
Para criar uma animação que não se move em linha reta, tem movimento mais fluente e
segue um caminho mais complexo, é necessário adicionar quadros-chave a outros qua-
dros na linha do tempo.
CRIANDO CAMADAS 343

Para adicionar um quadro-chave, no painel Timelines, mantenha pressionada Cmd
(Macintosh) ou Ctrl (Windows) até que o ponteiro mude para um círculo; então, clique
na barra de animação no ponto desejado ou digite o número do quadro no campo de
texto frame para selecioná-lo e escolha Modify > Timeline > Add Keyframe. Para remo-
ver um quadro-chave, selecione o quadro-chave e escolha Modify > Timeline > Remove
Keyframe.
O campo de texto frame informará em qual número de quadro está o quadro-chave se-
lecionado. Você pode mover quadros-chave na linha do tempo arrastando-os à esquerda
ou direita para novos quadros. Se quiser encurtar e acelerar a animação ou expandir e
alongá-la, arraste o último quadro-chave para a esquerda ou para a direita (respectiva-
mente) a fim de alterar o tamanho da barra de animação – todos os quadros-chave serão
movidos automática e proporcionalmente a fim de que permaneçam na mesma posição
relativa aos outros quadros-chave. Para evitar que os outros quadros-chave se movam,
pressione Ctrl (Windows) ou CMD (Macintosh) ao arrastar o quadro-chave no final da
barra de animação. As teclas modificadoras restringem o movimento a apenas o último
quadro-chave.
Ao animar uma camada que contém uma imagem, os usuários com um Macin-
tosh e Internet Explorer 5.0 talvez percebam uma trilha de fragmentos da imagem à
medida que ela atravessa a tela. O Internet Explorer 5.0 em um Macintosh não pode
calcular as dimensões da camada quando ela se move através da página se a camada
tiver o mesmo tamanho da imagem. Para corrigir isso, você precisará alterar o tama-
nho da camada (ou a camada que está animando) para torná-la maior que a imagem.
Quando a camada está na linha do tempo, é preciso alterar o tamanho da camada em
cada quadro-chave. Utilize o inspetor Property para fazer os tamanhos da camada coin-
cidirem exatamente em cada quadro-chave. Se você tiver uma linha do tempo com
mais de dois quadros-chave, talvez seja mais fácil remover a camada da linha do tempo
e iniciar novamente.
Controlando linhas do tempo com

comportamentos
Adicionar um comportamento à linha do tempo é semelhante a adicionar um comporta-
mento a qualquer outro objeto, exceto que você anexa o comportamento a um único qua-
344 LIÇÃO 9
dro na linha do tempo e não à barra de animação inteira. O comportamento é adicionado
ao canal Behaviors, e um traço no canal Behaviors indica o quadro a que foi aplicado o
comportamento.
Eventos não têm de iniciar no começo da linha do tempo. Você pode utilizar a linha do
tempo para retardar a ação na página até certo tempo depois de a página carregar moven-
do a barra de animação para a direita a fim de criar o número desejado de quadros vazios.
Para adicionar um comportamento, clique no quadro desejado no canal Behaviors aci-
ma do cabeçote de reprodução. Abra o painel Behaviors e adicione o comportamento de-
sejado.
Autoplay. Utiliza JavaScript para fazer com que a linha do tempo reproduza quando
a página é carregada. Um comportamento é anexado à tag <body> da página; o
comportamento executa automaticamente a ação Play Timeline quando a página é
carregada em um navegador – utilizando o evento onLoad, que fará com que a ani-
mação inicie depois de o documento terminar de ser carregado no navegador. Às
vezes, talvez você queira que o usuário controle a reprodução da linha do tempo.
Você pode adicionar um botão Start Timeline para reproduzir a animação quando
o usuário rola sobre um botão ou clica em uma imagem. Selecione o primeiro qua-
dro no painel Timelines. Selecione a imagem ou botão que deseja utilizar. No painel
Behaviors, clique no botão de sinal de adição (+) para acrescentar um comporta-
mento e escolha o comportamento Timeline > Play Timeline.
Loop. Se selecionar Loop no painel Timelines, será adicionado ao último quadro
um comportamento que retorna o cabeçote de reprodução ao Frame 1 e reproduz a
linha do tempo novamente. O comportamento é adicionado ao canal Behaviors e
aparece como um traço acima do último quadro. Você pode editar os parâmetros
para esse comportamento a fim de definir o número de loops selecionando o traço
no canal Behaviors e dando um clique duplo na ação correspondente no painel Be-
haviors. Uma caixa de diálogo permitirá configurar quantas vezes a animação fará o
loop e em que quadro iniciará a fazer loop.
Show / Hide. Você pode fazer com que diversas camadas apareçam e desapareçam
de uma vez selecionando outras camadas na lista Named Layers e clicando nos bo-
tões Show ou Hide. Default irá restaurar a visibilidade padrão da camada. Não é ne-
cessário que as camadas estejam no painel Timelines para mostrá-las ou ocultá-las
com esse comportamento.
Posicionando um objeto
As teclas de seta moverão a camada um pixel por vez. Manter pressionada a tecla Shift e
pressionar uma tecla de seta moverá a camada pelo incremento atual da grade.
Você também pode digitar um número negativo no campo de texto L (Left) na parte
superior do inspetor Property para mover a camada fora da tela. O canto superior esquer-
do do navegador é o ponto zero (abordado anteriormente nesta lição, quando você traba-
lhou com réguas), em que as réguas horizontais e verticais do Dreamweaver se intersec-
CRIANDO CAMADAS 345

cionam quando estão visíveis. Qualquer valor à direita ou abaixo desse ponto é positivo;
qualquer valor à esquerda ou acima desse ponto é negativo. Para fazer a camada iniciar
fora da janela visível do navegador, você configurou o ponto inicial da camada como um
valor horizontal negativo.
Para mudar a localização de todo o caminho de uma animação, selecione a barra de

animação na linha do tempo e então arraste a camada na página. O Dreamweaver ajusta a
posição de todos os quadros-chave. Fazer quaisquer alterações quando uma barra inteira
é selecionada muda todos os quadros-chave na barra.
O índice z determina a ordem em que as camadas irão se sobrepor, especifi-

cando seus níveis nem horizontal nem verticalmente, mas na terceira dimensão. Se
esperar até você posicionar uma camada na linha do tempo, ajustar o índice z só irá al-
terar a ordem de empilhamento para o quadro-chave selecionado no painel Timelines.
Isso é útil se quiser que a ordem de empilhamento da suas camadas mude no curso da
animação.
Gravando o caminho de uma camada

Um outro método de especificar o movimento da animação é gravando o caminho. Para
isso, o Dreamweaver segue seu ponteiro à medida que você arrasta a camada na página. O
Dreamweaver monitora o movimento e cria os quadros-chave na linha do tempo para
você. O Dreamweaver também controla correspondentemente o tempo que você leva ao
arrastar a camada. Quanto mais lentamente arrasta, mais quadros-chave são adicionados
e maior a duração da barra de animação. Você pode então alterar a data/hora ou os qua-
346 LIÇÃO 9
dros-chave na linha do tempo. Gravar o caminho de uma camada adicionará automatica-
mente essa camada à linha do tempo.
Para gravar um caminho, selecione o primeiro quadro no painel Timelines clicando
em 1 na linha dos números dos quadros. Selecione a camada desejada na janela Docu-
ment e escolha Modify > Timeline > Record Path of Layer.
Ao arrastar a camada, uma linha cinza pontilhada mostrará o caminho resultante.
Você pode arrastar a camada para qualquer direção, cruzar de volta o caminho que está
criando e variar a velocidade com que arrasta a camada a fim de afetar a maneira como o
caminho é gravado. Quando você pára de arrastar e solta a camada, a linha pontilhada é
convertida na linha de animação. O Dreamweaver adiciona a camada à linha do tempo
com os quadros-chave necessários para controlar o movimento da camada.
Dependendo do tempo que você leva para arrastar a barra de animação enquanto gra-
va o caminho da camada, essa animação talvez demore muito. Quanto mais longo o cami-
nho criado, maior a duração da animação. Lembre-se de que animações complexas e lon-
gas e páginas com muitos canais diferentes de animação levarão muito mais tempo para
carregar e aumentarão a possibilidade de o navegador do visitante travar.
À medida que você encurta a barra de animação, todos os quadros-chave na animação
mudam, assim suas posições relativas permanecem constantes. Os quadros-chave perma-
necerão nas mesmas posições relativas aos outros quadros-chave e ao início e final da bar-
ra de animação.
CRIANDO CAMADAS 347

Modificando propriedades da imagem
Linhas do tempo permitem alterar as propriedades de origem de uma imagem selecio-
nando o ponto em que você quer que a alteração ocorra. Seria necessário adicionar um
quadro-chave à barra de animação de título no quadro desejado.
Utilizar uma imagem espaçadora como a imagem inicial é uma das maneiras de fazer
com que a imagem apareça. Esse efeito também pode ser obtido alterando a visibilidade
de uma camada.
Modificando a visibilidade e o tamanho

Linhas do tempo permitem fazer mais do que simplesmente mover camadas. Você tam-
bém pode utilizar linhas do tempo para alterar a visibilidade de uma camada ao longo do
tempo. Por exemplo, você talvez queira que uma camada só seja exibida depois de uma
outra camada de animação atravessar a tela. O estado inicial da segunda camada perma-
neceria oculto e então se tornaria visível em um quadro.
Além de alterar a visibilidade de uma camada, também é possível alterar o tamanho
de uma camada. O processo é o mesmo que as técnicas utilizadas para alterar a visibili-
dade durante a animação: para alterar o tamanho de uma camada, selecione o qua-
dro-chave em que deseja que a alteração ocorra na barra de animação da camada em
questão e então altere os campos de texto W (largura) e H (altura) no inspetor Property
ou utilize as alças de redimensionamento na janela Document. Lembre-se de que os na-
vegadores têm capacidades variáveis e nem todos exibirão corretamente – teste suas pá-
ginas para certificar-se.
Visualizando a animação no Dreamweaver

Para visualizar a animação, clique em Rewind no painel Timelines e então mantenha
pressionada Play. A camada pulará de volta à sua posição original na janela Document, e
o cabeçote de reprodução irá mover-se para o primeiro quadro no painel Timelines. Se
clicar no botão Play uma vez, você verá a camada mover-se um quadro por clique e o ca-
beçote de reprodução avançará um quadro para a direita. Ao clicar e manter o botão
Play pressionado, você verá a animação reproduzir continuamente. A animação repeti-
rá enquanto o botão Play estiver pressionado. À medida que a animação é executada, o
cabeçote de reprodução mostra qual quadro da linha do tempo está sendo atualmente
exibido na página. Você também pode utilizar o botão Back para mover um quadro
para a esquerda ou para trás. Mantenha pressionado o botão Back para reproduzir a li-
nha do tempo para trás.
348 LIÇÃO 9
Criou camadas desenhando-as na janela Document e inserindo camadas padrão
pré-dimensionadas
Nomeou camadas para monitorá-las no painel Layers
Selecionou camadas únicas e múltiplas, modificou seus tamanhos e localizações e as
alinhou entre si
Utilizou camadas para controlar o posicionamento e a exibição de conteúdo em sua
página
Alterou a ordem de empilhamento de camadas para especificar a ordem em que elas
são exibidas de cima para baixo
Aninhou e desaninhou camadas para entender como elas podem funcionar em gru-
po ou se tornar aninhadas acidentalmente
Configurou réguas e grades para ajudar ao mover camadas na página
Combinou camadas com comportamentos para permitir que os usuários interajam
com suas páginas
Alterou a visibilidade da camada para ocultar e mostrar camadas inteiras
Tornou páginas projetadas com camadas compatíveis com os navegadores mais an-
tigos convertendo as camadas em uma tabela
Aprendeu a inserir ou remover um JavaScript para corrigir um bug do Netscape que
causa problemas de visualização com camadas
Aprendeu a utilizar o recurso das linhas do tempo
CRIANDO CAMADAS 349

Criando
10 frames
Uma página HTML padrão consiste em uma região que inclui toda a janela do navega-
dor. Os frames dividem a janela do navegador em dois ou mais painéis; cada painel
tem um conteúdo independente de HTML. Cada uma dessas regiões independentes é
um subconjunto da janela maior do navegador que os contém. Os frames são comu-
mente utilizados para definir as áreas de navegação e de conteúdo de uma página. Em
geral, a área de navegação permanece constante, e a área de conteúdo altera sempre
que um link de navegação é clicado. Esse uso de frames pode ser extremamente útil
para um usuário ao navegar em um site. Os frames também podem facilitar a modifica-
ção de um site porque há apenas uma página de navegação para atualizar. Por outro
lado, os frames podem degradar um Web site se forem implementados de maneira
ineficiente: talvez possam ser confusos e desorientadores para os usuários se não for-
necerem uma estrutura de site clara, e podem tornar difícil para os usuários inserir um
marcador ou encontrar seu caminho de volta à página anterior, ou talvez possam difi-

criará e alterará as
propriedades de um
frameset e de
frames,
redimensionará
frames e utilizará
links para controlar
seu conteúdo.
CRIANDO FRAMES 351

cultar a visualização do conteúdo se não estiverem adequadamente dimensionados e
formatados.
Quando um usuário visualiza uma página Web que foi criada com dois frames, na ver-
dade o navegador está utilizando três arquivos separados para exibir a página: o arqui-
vo de frameset e os dois arquivos com o conteúdo que aparece dentro de cada um dos
dois frames. Um frameset é um arquivo de HTML que é invisível para o usuário e defi-
ne a estrutura de uma página Web com frames. Um frameset armazena as informa-
ções sobre o tamanho e a localização de cada frame, juntamente com os nomes dos
arquivos que fornecem o conteúdo de cada um dos frames. Cada frame é um arquivo
de HTML separado. Os frames têm bordas que podem ser desativadas de modo que
eles não sejam prontamente aparentes para o usuário ou podem ser ativados para divi-
dir claramente a janela em painéis diferentes. Outras opções incluem barras de rola-
gem e a possibilidade de permitir ao usuário redimensionar os frames arrastando as
bordas.
Nesta lição, você trabalhará com frames para criar uma página Web com uma área de
navegação e uma área de conteúdo. Você desenvolverá um conjunto de páginas que
aparecerão todas no frame de conteúdo quando o usuário selecionar um link a partir do
frame de navegação, e você aprenderá a definir frames diferentes como alvo para seus
links. Também ensinaremos a incluir o conteúdo para navegadores que não suportam
frames.
Para ver um exemplo da página concluída para este capítulo, abra community.html na
pasta Lesson_10_Frames/Completed.

Criar um frameset
Salvar um frameset
Criar frames e frames aninhados
Redimensionar frames
Alterar as propriedades de frameset e de frame
Criar documentos dentro dos frames
Definir o alvo de um link dentro de um frameset
Criar conteúdo NoFrames
352 LIÇÃO 10
Tempo aproximado
Arquivos da lição
Arquivos de mídia:
Lesson_10_Frames/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_10_Frames/Text/…(todos os arquivos)
Lesson_10_Frames/Community/sidebar.html
Lesson_10_Frames/Community/ys_nav.html
Lesson_10_Frames/sangha.css
Projeto concluído:
Lesson_10_Frames/Completed/Community/AboutGreen.html
Lesson_10_Frames/Completed/Community/BeginningGreen.html
Lesson_10_Frames/Completed/Community/community.html
Lesson_10_Frames/Completed/Community/community_intro.html
Lesson_10_Frames/Completed/Community/sidebar.html
Lesson_10_Frames/Completed/Community/top.html
Lesson_10_Frames/Completed/Community/ys_nav.html
Criando um frameset
Um frameset define a visão total de uma página que utiliza frames – o número de áreas de
frame na página, o tamanho de cada frame e os atributos de borda. Um frameset em si não
possui nenhum conteúdo; ele especifica qual documento HTML será utilizado em cada
frame. O documento de frameset é o arquivo para o qual você vai quando chama uma pá-
gina Web baseada em frames. Nesta lição, você cria uma página Web que consiste em três
frames. O frame esquerdo mantém os elementos de navegação que permanecem constan-
tes, o frame direito exibe as páginas com o conteúdo relativo aos links clicados no frame
de navegação, e o frame superior contém o título do site.
Há duas maneiras de criar um frameset no Macromedia Dreamweaver: você pode inse-
rir manualmente os frames ou pode escolher a partir de vários framesets predefinidos. Se
você escolher um frameset predefinido, o frameset e os frames serão configurados auto-
maticamente. O método frameset predefinido é uma das maneiras mais rápidas de criar
um layout utilizando frames, porque a maior parte do trabalho é feita para você. Você só
precisará nomear as páginas individuais.
Neste exercício, você utiliza um frameset predefinido para criar uma página Web que
utiliza frames.
CRIANDO FRAMES 353

1. Escolha File > New e selecione Framesets na lista Category na parte General da
caixa de diálogo New Document.
Você também pode acessar a parte de Framesets da caixa de diálogo New Do-
cument clicando em Framesets na lista Create from Samples na página Start.
A caixa de diálogo New Document contém várias páginas predefinidas que podem ser uti-
lizadas ao criar um novo frameset. Quando você navega pela lista Framesets, são exibidos
exemplos que mostram a estrutura básica de frame na área de visualização à direita, junta-
mente com uma descrição.
Você também pode criar um frameset a partir de um documento HTML padrão

selecionando o menu Layout na barra Insert e escolhendo um frameset predefinido do
menu Frames.
O menu Frames na categoria Layout da barra Insert
2. Selecione Fixed Right, Nested Top na lista Framesets e clique em Create.

Um frameset pode ser feito de linhas ou colunas, mas não de ambos. Os Framesets podem
ser aninhados para criar um layout como o que você escolheu com várias linhas e colunas.
354 LIÇÃO 10
3. Na caixa de diálogo Frame Tag Accessibility Attributes, utilize o menu Frame para
selecionar os frames e o campo de texto Title para configurar os títulos corresponden-
tes, como a seguir:
Configure o título do rightFrame como Right Navigation

Configure o título do topFrame como Title and Navigation
Configure o título do mainframe como Main Content
Se a caixa de diálogo Frame Tag Accessibility Attributes não aparecer, você

pode ativar o recurso de acessibilidade de frames escolhendo Dreamweaver > Prefe-
rences (Macintosh) ou Edit > Preferences (Windows) e selecionar Accessibility da lista
Category. Sob os atributos Show, ao inserir a opção, Frames deve estar marcado.
A caixa de diálogo Frame Tag Accessibility Attributes permite selecionar um título apro-
priado para cada frame. O título fornece contexto para o conteúdo de cada frame, assim
os usuários podem determinar qual frame tem as informações que eles buscam. O título
de um frame é definido pelo atributo title, que é facilmente acessado quando você cria
os frames pela primeira vez, via a caixa de diálogo Frame Tag Accessibility Attributes. Mas
você também pode aplicar ou editar títulos de um frame posteriormente selecionando
um frame e utilizando a parte CSS/Accessibility da seção Attributes do painel Tag para
modificar o atributo title.
CRIANDO FRAMES 355

O atributo title não é intercambiável com o atributo name. title rotula o frame para
os usuários; name rotula-o para script e identificação de janela. Somente o título é apre-
sentado aos usuários. Você trabalhará com nomes de frame mais adiante nesta lição.
Acessibilidade e frames
As desvantagens do uso de frames incluem a falta de acessibilidade completa e a
não-funcionalidade dos leitores na tela e dispositivos móveis, como PDAs e celulares.
Outros problemas incluem funcionalidade prejudicada do botão Back do navegador, pro-
blemas de impressão e de manutenção, além de usabilidade ruim.
Frames são utilizados para organizar uma página visualmente em diferentes painéis.
Para usuários não-visuais, os relacionamentos entre o conteúdo nos frames devem ser
transmitidos de uma maneira não-visual; portanto, utilizar os recursos de acessibilidade
que o Dreamweaver oferece ao criar frames é um passo importante na criação de docu-
mentos mais acessíveis.
Depois de aplicar os atributos de acessibilidade, você verá o frameset na janela Docu-

ment. Uma borda pontilhada aparece em torno das bordas da página no frameset, e as li-
nhas mostram a estrutura do frame.
Linhas que mostram a estrutura do frame

Borda do frameset
356 LIÇÃO 10
A página é dividida em três frames com o uso de dois framesets. Framesets só podem
conter frames horizontais ou verticais – eles não podem conter frames verticais e horizon-
tais ao mesmo tempo. Para conseguir combinar frames verticais e horizontais, os frame-
sets devem ser aninhados um dentro do outro. Um frameset aninhado é um que está con-
tido dentro de um frame definido por um frameset anterior. O frameset inicial do seu do-
cumento contém dois frames verticais – um na esquerda e outro na direita. O frame es-
querdo contém um frameset aninhado que é dividido em dois frames horizontais: um fra-
me curto na parte superior e um frame mais longo na parte inferior. Vários framesets pre-
definidos do Dreamweaver utilizam framesets aninhados. Você pode utilizar as combina-
ções desses framesets predefinidos para conceber qualquer layout de frame desejado. As
linhas acinzentadas delgadas marcam as divisões entre os frames.
Para inserir frames manualmente, abra um novo documento HTML e escolha

View > Visual Aids > Frame Borders de modo a ativar a borda de frame pontilhado em
torno das bordas de página da janela Document. Clique na borda e arraste-a para a ja-
nela Document. O documento se divide horizontalmente (se você arrastar da parte su-
perior ou inferior da borda) ou verticalmente (se arrastar do lado esquerdo ou do lado
direito da borda). Se você arrastar a borda a partir do canto, o documento se dividirá em
quatro frames. Também é possível escolher Modify > Frameset > Split Frame Left,
Right, Up ou Down. Se você selecionou a configuração errada de frames ou precisar
reduzir o número de frames em seu frameset, pode remover os frames extras arras-
tando a borda do frame indesejável para a borda da página ou para cima de outro fra-
me. O frame extra desaparece.
Salvando um frameset
Quando tiver o número de frames desejado, você precisará salvar o frameset. O arquivo
de frameset é o arquivo referenciado ao criar um link para essa página Web. O frameset,
bem como os arquivos para cada frame, precisa ser salvo antes de visualizar a página em
um navegador. Se você tentar visualizar a página no navegador antes de salvar, o Dream-
weaver exibe uma mensagem dizendo que o frameset e todos os arquivos de frame preci-
sam ser salvos para serem visualizados. Você pode salvar cada arquivo individualmente
ou pode salvar todos os arquivos abertos de uma vez. Neste exercício, você salva somente
o frameset.
1. Na janela Document, verifique se o frameset está selecionado marcando o seletor

de tags, em que o <frameset> deve estar destacado.
CRIANDO FRAMES 357

Quando você cria um frameset, ele é selecionado automaticamente. Clicar em qualquer
lugar na janela Document remove a seleção do frameset porque você está clicando dentro
de um frame. Clicar dentro de um frame é semelhante a clicar dentro de uma célula de ta-
bela; colocar o ponto de inserção dentro de uma célula tornará essa célula ativa, mas não
permitirá acesso às mesmas propriedades que você seria capaz de editar se a tabela inteira
fosse selecionada. Da mesma forma, para modificar um frameset, você deve selecionar o
frameset em si.
A janela Document com o frameset selecionado
O seletor de tags mostra que Borda pontilhada do frameset

o frameset está selecionado
Se o frameset não estiver selecionado, você pode selecioná-lo clicando na borda em

torno das margens da janela Document. Você também pode selecionar o frameset esco-
lhendo Window > Frames e, em seguida, clicando na borda mais externa que inclui os fra-
mes no painel Frames. O painel Frames mostra uma versão simplificada da estrutura de
frames no documento.
Borda sólida do
frameset selecionado
no painel Frames
358 LIÇÃO 10
Quando o frameset é selecionado, a janela Document é contornada por uma linha
pontilhada, e o seletor de tags na parte inferior da janela exibe <frameset>. A barra de tí-
tulo do documento mostra “UntitledFrameset-1”, e o inspetor Property mostra as pro-
priedades do frameset. O número (-1, -2 e assim por diante) de seu documento sem nome
pode variar dependendo de quantos novos documentos foram criados desde que você
abriu o Dreamweaver.
Se o frameset não for selecionado, um frame individual será selecionado em

vez disso e a borda de frames em torno da janela Document será uma linha preta sóli-
da. Se um frameset aninhado for selecionado, a borda do frame que a contém é cerca-
da com uma linha pontilhada.
No painel Frames, um frameset selecionado é exibido com uma borda espessa em tor-
no do perímetro do painel, e os frames são exibidos com uma borda acinzentada.
2. Escolha File > Save Frameset As e salve o arquivo como community.html na pasta
Lesson_10_Frames/Community.
A barra de título do documento mostra o nome do arquivo.
3. Com o frameset ainda selecionado, digite Yoga Sangha: Community como título da
página. Salve o frameset.
Se você não tiver o frameset selecionado ao atribuir um nome à página, pode estar atri-
buindo um nome a uma das páginas que corresponde a um frame individual – não ao ar-
quivo de frameset real. Consulte o painel Frames para verificar o que está selecionado; ele
ajuda a assegurar que você está trabalhando dentro do frame ou frameset que pretende
editar.
Deixe o arquivo community.html aberto para utilizar no próximo exercício.
Redimensionando frames em um frameset

Você pode utilizar o inspetor Property para especificar o tamanho de seus frames, ou
pode simplesmente arrastar as bordas na janela Document para realizar a mesma tarefa.
Além de especificar um tamanho no inspetor Property, também é possível determinar
como os navegadores alocam espaço para os frames quando não há espaço suficiente para
exibir todos os frames em tamanho completo.
CRIANDO FRAMES 359

1. Na janela Document, verifique se o frameset aninhado está selecionado posicio-
nando o ponteiro sobre a borda horizontal entre os frames superior e inferior. Quando
o ponteiro mudar para uma seta dupla, clique na borda uma vez para selecionar o fra-
meset.
Borda horizontal Seta dupla

do frameset principal
O frameset aninhado é selecionado, e o inspetor Property mostra as propriedades do fra-

meset. O inspetor Property muda, dependendo de você ter selecionado um frameset ou
um frame. Para alterar o tamanho dos frames, verifique se selecionou o frameset.
O inspetor Property mostrando Linha superior

as propriedades do frameset aninhado selecionada
Valor da linha Menu de unidade Área RowCol Seta

de valor de linha Selection expansora
Clique na seta expansora no inspetor Property para visualizar todas as proprie-

dades de Frameset, se já não estiverem visíveis.
360 LIÇÃO 10
2. Arraste a borda entre os frames superior e inferior até que o frame superior tenha
112 pixels de altura.
Utilize Row Value no inspetor Property para verificar a altura, ou digite 112 no campo de
texto Row Value quando a linha superior estiver selecionada na área RowCol Selection
para obter a altura exata. Certifique-se de que Pixels esteja selecionado no menu Units. A
linha superior em RowCol Selection deve ser escura para indicar que está ativa.
O frameset
aninhado
selecionado no
painel Frames
3. Com o frameset ainda selecionado, clique na linha inferior na área RowCol Selec-
tion no inspetor Property para selecionar a linha inferior no frameset aninhado. Ao
lado do campo de texto de Row Value, verifique se Relative está selecionado no menu
Units.
Ao utilizar RowCol Selection no inspetor Property para selecionar uma linha ou coluna,
você está selecionando essa linha ou coluna dentro do frameset, que permite modificar as
propriedades do frameset que se aplicam a essa linha ou coluna específicas. Você não está
selecionando um frame individual.
Configurar a unidade de valor da linha inferior como Relative permite que a linha infe-
rior se expanda ou se contraia dependendo do tamanho do navegador do usuário e de
quanto espaço é deixado depois de a linha superior ter alocado os 112 pixels que você atri-
bui a ela. Por padrão, o Dreamweaver insere automaticamente 1 no campo de texto Row
Value das linhas definidas como Relative.
Se visualizar o código HTML para o tamanho do frameset, você verá frameset

rows=”112,*”. O 1 no campo de texto Row Value, juntamente com a unidade Relative
escolhida no menu, é o mesmo que o asterisco (*) no código; ele representa um tama-
nho que é relativo ou proporcional às outras linhas no frameset.
4. No painel Frames, clique no frameset inteiro para selecioná-lo. Na representação

visual do frame no inspetor Property, clique na coluna esquerda na área RowCol Se-
lection para selecionar a coluna esquerda.
Em seu documento, o frameset externo é composto de colunas, enquanto o frameset ani-
nhado é composto de linhas.
CRIANDO FRAMES 361

A coluna esquerda no inspetor Property escurece para indicar que foi selecionada.
Valor da coluna Menu de unidade Coluna esquerda

de valor da coluna selecionada
5. No campo de texto Column Value do inspetor Property, digite 484 e pressione Re-
turn (Macintosh) ou Enter (Windows). Verifique se Pixels está selecionado no menu
Units.
A largura da coluna esquerda é ajustada para 484 pixels.
Quando você estiver decidindo como redimensionar a coluna, lembre-se destas unida-
des de medida:
Pixels: Esta opção configura o tamanho absoluto da coluna ou linha selecionada
como o número de pixels inserido. É a melhor opção para qualquer frame que pre-
cisa ter um tamanho configurado. Se as outras colunas ou linhas forem definidas
por uma unidade diferente, elas terão o espaço alocado apenas após as linhas ou co-
lunas especificadas em pixels estarem em seu tamanho completo.
Percent: Esta opção especifica uma porcentagem que a coluna atual ou linha deve
ocupar em seu frameset. As colunas ou linhas especificadas com unidades configu-
radas como Percent têm espaço alocado depois de colunas ou linhas com unidades
configuradas como Pixels e antes de colunas ou linhas com unidades configuradas
como Relative.
Relative: Esta opção especifica que a coluna ou linha atual tem espaço alocado utili-
zando as proporções atuais em relação às outras colunas e linhas. As colunas ou li-
nhas com unidades configuradas como Relative têm o espaço alocado depois de co-
lunas ou linhas com unidades configuradas como Pixels e Percent, mas elas ocupam
todo o espaço restante. Se você configurar o frame inferior ou direito como Relative,
o tamanho do frame muda para ocupar toda a largura ou altura restante da janela
do navegador.
6. No inspetor Property, clique na coluna direita na área RowCol Selection para sele-
cionar a coluna direita do frameset aninhado. Ao lado do campo de texto Column Va-
lue, verifique se Relative está selecionado no menu Units.
Esse procedimento permite que a coluna direita se expanda ou contraia, dependendo do
tamanho do navegador do usuário e de quanto espaço resta depois de a coluna esquerda
ter alocado os 484 pixels atribuídos a ela.
362 LIÇÃO 10
7. Salve o frameset escolhendo File > Save Frameset.
Se esse comando não estiver disponível, primeiro selecione o frameset externo clicando
na borda entre os frames superior e inferior.
Se o frameset estiver selecionado, Cmd+S (Macintosh) ou Ctrl+S (Windows)

salva apenas o frameset.
Deixe o arquivo locations.htm aberto para o próximo exercício.
Especificando propriedades de frame

Ao criar um frameset, adquira o hábito de nomear cada frame. O nome atribuído a um
frame não é o nome do arquivo ou título do documento que corresponde ao frame, e tam-
bém não é o título do próprio frame. O nome de um frame serve para identificar a área en-
quadrada do documento para sua referência e geralmente é utilizado para propósitos de
script. A atribuição de nome a seus frames é importante quando você cria links para exibir
páginas dentro de uma área de frame. Também é importante nomear seus frames para
acessibilidade, especialmente quando o título de frame não é suportado pela tecnologia
utilizada para visualizar a página. No exercício anterior, você trabalhou com framesets
predefinidos. Para cada frame, já havia sido atribuído um nome padrão. Neste exercício,
veremos como alterar os nomes dos frames para indicar suas funções.
1. Clique no frame superior esquerdo no painel Frames para selecioná-lo.
Se o painel Frames não estiver aberto, escolha Window > Frames.
Selecionar o frame superior esquerdo no painel Frames não é o mesmo que colocar o pon-
to de inserção dentro do frame superior esquerdo clicando na janela Document. A seleção
do frame disponibiliza suas propriedades no inspetor Property. Clicar no frame na janela
Document faz as propriedades padrão de texto aparecerem para esse documento do fra-
me. Se o ponto de inserção estiver no frame superior, ele será o frame ativo; mas você não
pode fazer alterações nas propriedades de frame. Para afetar as propriedades do próprio
frame, ele precisa estar selecionado.
Você também pode utilizar Shift+Option-clique (Macintosh) ou Alt-clique (Win-

dows) no frame superior na janela Document para selecionar o frame.
Frame superior
selecionado
no painel Frames
CRIANDO FRAMES 363

O painel Frames mostra uma fina borda preta em torno do frame superior esquerdo
com o nome topFrame mostrado no centro. O inspetor Property exibe as propriedades do
frame para topFrame.
2. No campo de texto Frame name no inspetor Property, digite titleNav para substituir
o nome padrão topFrame. Pressione Return (Macintosh) ou Enter (Windows) a fim de
aplicar a alteração de nome.
O campo de texto frame name no inspetor Property
Menu Scroll Opção para permitir que os

usuários redimensionem um frame
O painel Frames exibe a palavra titleNav no frame superior. Você sempre pode consultar
o nome de um frame específico no painel Frames. Os nomes de frame são freqüentemente
utilizados para fazer links carregarem em frames-alvo específicos. Você aprendeu sobre
alvos de links na Lição 3.
Ao nomear frames, não utilize espaços, hifens, pontos, nem caracteres espe-
ciais no nome de frame; e não inicie o nome com um sublinhado. A utilização de qual-
quer um desses caracteres pode causar problemas com código ou o script. Além dis-
so, a maioria das linguagens de codificação diferencia letras maiúsculas de minúscu-
las, assim certifique-se de manter os nomes dos seus frames consistentes.
3. Verifique se No está selecionado no menu Scroll e se a caixa No Resize está marca-

da no inspetor Property.
A opção Scroll, que define quando as barras de rolagem aparecem, aplica-se às barras de
rolagem verticais e horizontais. A configuração Auto exibe as barras de rolagem sempre
que não há espaço suficiente no frame para exibir o conteúdo da página. A opção Default
é a configuração padrão do navegador, que normalmente é Auto. Tenha cuidado com a
maneira como você configura essa opção: se for configurada como No e o frame não for
suficientemente grande para exibir todo o conteúdo, o usuário não poderá rolar para ver
o resto do conteúdo; se for configurada como Yes e o conteúdo se ajustar dentro do frame,
as barras de rolagem acinzentadas ainda ocuparão espaço na página, mesmo que não seja
possível rolar.
No Resize trava o tamanho do frame quando visualizado no navegador. Se essa opção
estiver desmarcada, os usuários poderão arrastar as bordas do frame na janela do navega-
dor. Independentemente de essa opção estar marcada ou não, ela não afeta sua capacida-
de de redimensionar frames dentro do Dreamweaver.
364 LIÇÃO 10
Não se esqueça de que os visitantes do seu Web site têm monitores com diversos tama-
nhos e resoluções. Com os frames, é particularmente importante considerar as telas me-
nores ao projetar sites em telas grandes de alta resolução. Páginas baseadas em frames tal-
vez encontrem problemas em telas que sejam maiores ou menores do que aquelas para as
quais foram projetadas. Telas pequenas, por exemplo, fazem com que suas páginas so-
fram problemas como rolar demais, o que pode torná-la extremamente difícil de usar
para os usuários. Testando suas páginas em vários ambientes, você pode certificar-se de
acomodar a mais ampla faixa de tamanhos e resoluções. Esteja ciente de que tais questões
de tamanho também podem levar a problemas de impressão. Se você utilizar frames em
seu site, talvez queira fornecer alternativas, como páginas amigáveis a impressoras.
As páginas amigáveis a impressoras possuem 530 pixels de largura (largura

imprimível) e utilizam apenas uma quantidade mínima de imagens gráficas. A navega-
ção também deve ser mínima, como links de texto na parte inferior da página. Uma cor
branca de fundo e o uso de texto preto são melhores para legibilidade contra o fundo
de papel branco. As fontes serif são boas escolhas para páginas destinadas principal-
mente à impressão; da mesma forma, mantenha seu texto em um tamanho que possa
ser lido facilmente, como 12 pontos.
4. Selecione o frame inferior direito e nomeie-o content. Scroll deve ser configurado
como Auto, e a caixa Resize deve ser marcada.
No inspetor Property, note que o menu Borders tem Default selecionado. Os framesets
predefinidos que você utilizou para criar o layout de página são configurados automatica-
mente para não ter nenhuma borda de frame. Quando a configuração Default é seleciona-
da para a opção Borders de um frame individual, esse frame utiliza a configuração do fra-
meset pai. Se outra configuração (Yes ou No) for selecionada, o frame sobrescreve a confi-
guração do frameset pai.
O painel Frames exibe o nome content no frame inferior esquerdo.
O painel Frames
exibe os nomes
que você configura
para os frames
CRIANDO FRAMES 365

5. Selecione o frame direito e nomeie-o moreContent. Scroll deve ser configurado
como No; e a caixa No Resize deve ser marcada.
No inspetor Property, note que os campos de texto para Margin Width e Margin Height
estão em branco. Esse é o padrão para framesets predefinidos que você utilizou para orga-
nizar sua página. Margin Width configura as margens esquerda e direita do frame em pi-
xels. Margin Height configura as margens superior e inferior do frame em pixels. Se você
deixá-las em branco, o padrão do navegador é assumido, o que pode variar em tamanho
dependendo da versão e do tipo do navegador.
O painel Frames exibe o nome moreContent no frame direito.
6. Escolha File > Save Frameset.

Quando você altera as propriedades do frame, na verdade está modificando o frameset,
community.html. As propriedades do frame e do frameset são definidas no frameset.
Deixe o arquivo community.html aberto para utilizá-lo no próximo exercício.
Criando e editando o conteúdo de frames

Lembre-se de que o conteúdo de um frame reside em uma página HTML separada – não
no frameset. Você pode criar as páginas de frame individuais separadamente ou dentro
dos limites de um frame. É sempre uma boa idéia usar o frameset para ajudá-lo a projetar
as páginas a serem contidas em cada frame. Dessa maneira, você não cria uma página que
seja muito larga ou muito estreita para o frame. Seus usuários acharão as páginas difíceis
de visualizar se eles tiverem de rolar em várias direções para ver todo o conteúdo.
Neste exercício, você adicionará conteúdo a cada página no frameset.
1. Coloque o ponto de inserção no frame de título (o frame superior) na janela Docu-

ment.
A barra de título de documento (Macintosh) ou a barra de título de programa do Dream-
weaver (Windows) muda para mostrar que esse é um documento sem título.
2. Escolha File > Save Frame. Salve o arquivo como top.html na pasta Les-
son_10_Frames/Community e atribua a ele o título Yoga Sangha: Title. Anexe a folha
de estilo sangha.css na pasta Lesson_10_Frames.
A barra de título de documentos (Macintosh) ou a barra de título de programa do Dream-
weaver (Windows) muda para refletir o título e nome de arquivo do documento neste fra-
me. É possível que os visitantes não vejam o título dessa página porque o navegador utiliza
o título do frameset na janela do navegador. Contudo, é uma boa prática sempre intitular
seus documentos de modo que se, por algum motivo, a página for aberta em uma janela
por si só, ela terá um título.
366 LIÇÃO 10
3. Insira a imagem ys_header.jpg da pasta Lesson_10_Frames/Images no frame de tí-
tulo e atribua-lhe um texto Alt do Yoga Sangha. Salve o frame.
Enquanto você edita suas páginas, lembre-se de salvá-las freqüentemente. Ao utilizar o

atalho pelo teclado Save, Cmd+S (Macintosh) ou Ctrl+S (Windows), você salva somente
o arquivo que corresponde ao frame atualmente selecionado ou ao frameset, se estiver se-
lecionado. O comando Save não salva todos os documentos; você deve salvá-los indivi-
dualmente ou utilizar a opção File > Save All. Se quiser salvar o arquivo exibido em outro
frame, simplesmente clique dentro desse frame na janela Document e depois clique em
Save. Você pode consultar o painel Frames para verificar qual frame está selecionado
quando estiver salvando. O nome de todos os frames exibidos no painel Frames fica acin-
zentado (desativado), exceto pelo nome do frame em que o ponto de inserção está locali-
zado.
4. Coloque o ponto de inserção no frame de conteúdo (o frame inferior esquerdo).

Salve o arquivo como community_intro.html na pasta Lesson_10_Frames/Community
e o intitule Yoga Sangha Community: Introduction to Green Yoga. Anexe a folha de esti-
lo sangha.css localizada na pasta Lesson_10_Frames.
A barra de título de documentos (Macintosh) ou a barra de título de programa do Dream-
weaver (Windows) muda para refletir o título e nome de arquivo do documento neste
frame.
5. Abra Lesson_10_Frames/Community/ys_nav.html, copie a barra de ferramentas e

cole-a na página de conteúdo.
A barra de ferramentas de navegação principal estará dentro das páginas de conteúdo;
portanto, ela será incluída em todas as páginas nesse frame.
CRIANDO FRAMES 367

6. Pressione Return (Macintosh) ou Enter (Windows) para adicionar um novo pará-
grafo abaixo da barra de ferramentas. Abra Lesson_10_Frames/Text/green_page1.txt,
copie o texto e cole-o na página. Altere o texto Green Yoga at Yoga Sangha para um
parágrafo e aplique o estilo tagline-style no inspetor Property. Salve a página.
Esse é o conteúdo da página que corresponde ao link Community que você criará no fra-
me de navegação mais adiante nesta lição.
Seu frame de conteúdo agora deve ser semelhante ao exemplo mostrado aqui.
Você pode utilizar um elemento interativo chamado barra de navegação em pá-

ginas baseadas em frame para criar uma maneira de os visitantes obterem retorno vi-
sual enquanto exploram as páginas. Embora você mesmo possa criar uma barra de na-
vegação, o Dreamweaver fornece uma ferramenta para isso. Uma barra de navegação
é um conjunto de imagens que estão vinculadas a várias páginas. As barras de navega-
ção utilizam JavaScript (abordado na Lição 8), permitindo que você adicione até quatro
estados com base na interação de usuário para cada imagem. O primeiro estado de
uma imagem ocorre quando a página carrega; o segundo estado de uma imagem é exi-
bido quando o usuário rola sobre a imagem. Quando o usuário clica na imagem, o ter-
ceiro estado é mostrado. O quarto estado de uma imagem é utilizado quando o visitan-
te rola sobre uma imagem depois de a imagem ser clicada. A barra de navegação é efi-
caz em fornecer aos visitantes respostas às suas ações de modo que entendam quais
páginas estão vendo com base no estado exibido pelas imagens de navegação.
368 LIÇÃO 10
Criando outros documentos de conteúdo
Você agora precisa criar documentos adicionais que também aparecerão no frame de
conteúdo.
1. Crie um novo documento HTML a partir da categoria Basic Page da caixa de diálo-
go New Document. Salve o arquivo como AboutGreen.html na pasta Lesson_10_Fra-
mes/Community e o intitule Yoga Sangha: Community: About Green. Anexe a folha de
estilo sangha.css localizada na pasta Lesson_10_Frames.
A barra de título de documento muda de modo a refletir o título e o nome do arquivo para
o documento.
2. Abra Lesson_10_Frames/ys_nav.html, copie a barra de ferramentas e cole-a na pá-

gina AboutGreen.html.
A barra de ferramentas de navegação principal está dentro de cada página de conteúdo.
3. Pressione Return (Macintosh) ou Enter (Windows) para adicionar um novo pará-

grafo abaixo da barra de ferramentas. Abra Lesson_10_Frames/Text/green_page2.txt,
copie o texto e cole-o na página. Altere o texto About Green Yoga para um parágrafo e
aplique o estilo tagline-style no inspetor Property.
Esta é a página de conteúdo que corresponderá a um link About Green; você criará um
link para ela a partir do frame rightNav mais adiante nesta lição.
CRIANDO FRAMES 369

4. Repita os Passos 1 a 3 para criar BeginningGreen.html na pasta Lesson_10_Fra-
mes/Community. Intitule-o Yoga Sangha: Community: Beginning Green Yoga incluin-
do o texto no arquivo green_page3.txt.
Essa é a página de conteúdo que corresponderá a um link Begin que será criado no frame
rightNav, mais adiante nesta lição.
Você pode fechar AboutGreen.html e BeginningGreen.html. Deixe o arquivo commu-
nity.html aberto para uso no próximo exercício.
Abrindo uma página existente em um frame

O conteúdo do frame moreContent já foi criado para você. Agora você atribui essa página
ao frame. Além disso, você já iniciou várias páginas de conteúdo; então, agora precisa cer-
tificar-se de que elas se ajustam no frame de conteúdo. Você pode abrir esses arquivos di-
retamente no frame para verificá-los ou editá-los.
1. Na janela Document do community.html, clique dentro do frame moreContent.

Esse é o frame em que você quer a página da barra lateral apareça.
2. Escolha File > Open in Frame. Escolha sidebar.html na caixa de diálogo. Salve o
frameset.
A página é carregada no frame de conteúdo e está disponível para edição. Observe que os
itens de navegação secundários ainda não têm links associados a eles.
3. Dentro do frame de conteúdo, abra Aboutgreen.html. Verifique se a página se ajus-

ta corretamente no frame.
Tome cuidado ao salvar seus frames, e preste atenção quando utilizar o co-
mando Save All Frames no menu File. Esse comando salva todas as páginas abertas
contidas em seus frames e no frameset. Os arquivos que inicialmente aparecem den-
tro de cada frame são definidos no frameset. Se escolher File > Save All Frames en-
quanto estiver editando outras páginas dentro dos frames (utilizando File > Open In
Frame), você redefinirá o frameset.
4. Abra BeginningGreen.html no frame de conteúdo.

Sua página agora deve ser semelhante ao seguinte exemplo. Verifique se ela se ajusta no
frame.
370 LIÇÃO 10
Verificando o conteúdo de frame
Quando você cria e edita páginas dentro de frames, pode ser fácil colocar acidentalmente
o conteúdo errado em um frame. Você pode utilizar o inspetor Property para assegurar
que as páginas corretas sejam carregadas em cada um dos frames para a visualização ini-
cial da página Web.
1. Selecione o frame Nav clicando no frame superior no painel Frames. No campo de

texto Src no inspetor Property, certifique-se de que top.html esteja selecionado. Se
não estiver, clique no ícone da pasta para localizá-lo e selecioná-lo.
O inspetor Property mostra as propriedades do frame de título.
Fonte para o arquivo que aparece no frame selecionado
CRIANDO FRAMES 371

2. Selecione o frame moreContent clicando no frame superior direito no painel Fra-
mes. No campo de texto Src no inspetor Property, certifique-se de que sidebar.html
esteja selecionado. Se não estiver, clique no ícone da pasta para localizá-lo e selecio-
ná-lo.
O inspetor Property mostra as propriedades do frame moreContent.
3. Selecione o frame content clicando no frame inferior esquerdo no painel Frames.

Ao lado do campo de texto Src no inspetor Property, clique no ícone da pasta para lo-
calizar e selecionar community_intro.html. Salve o frameset.
O arquivo BeginningGreen.html estava selecionado porque foi o último documento com
o qual trabalhou neste frame. Se você abrir uma página dentro de um frame para editá-lo,
salvar o frameset fará com que esse arquivo se torne a página padrão para esse frame
quando o documento de frameset carregar. O arquivo community_intro.html é o docu-
mento que você quer que apareça primeiro no frame de conteúdo do frameset final.
O inspetor Property mostra as propriedades do frame de conteúdo.
Você pode abrir páginas Web de várias fontes em um frame digitando o URL da página
desejada no campo de texto Src no inspetor Property. A página que você chama não tem
de residir no mesmo servidor que o frameset. A capacidade de abrir páginas de outros ser-
vidores pode ser uma desvantagem, em que o uso ético de conteúdo é uma preocupação.
Algumas páginas baseadas em frames são utilizadas para abrir o conteúdo desenvolvido
por outros, sem sua permissão. Certifique-se de respeitar os direitos autorais do conteúdo
que não seja de sua propriedade e evite transmitir aos visitantes a impressão de que os ma-
teriais são de seu Web site se não o forem.
Se estiver preocupado com a possibilidade de suas páginas serem chamadas

no frame de uma outra pessoa, você poderá utilizar JavaScript para fazer com que o
navegador abra sua página em uma janela própria se ela for chamada a partir de um fra-
me. Talvez você possa determinar se isso é um problema revisando seus logs de site;
verifique com o administrador de sistema ou host de Web para obter informações adi-
cionais.
Controlando o conteúdo do frame com links

Depois de ter criado as páginas de documento de conteúdo, você precisa vincular os ele-
mentos de navegação a essas páginas que devem ser exibidos na área de conteúdo da pági-
na Web. Para fazer com que o conteúdo apareça em sua localização adequada, é necessá-
rio definir o alvo do link para o frame desejado.
1. Posicione o ponto de inserção no link de texto Introduction no frame moreContent

(o frame direito). No inspetor Property, substitua o link nulo (#) clicando no ícone
Browse for File ao lado da caixa de texto Link. Selecione a página community_in-
tro.html no mesmo diretório. Pressione Return (Macintosh) ou Enter (Windows) para
aplicar as alterações. Selecione o conteúdo no menu Target enquanto o link ainda
está selecionado.
372 LIÇÃO 10
Por padrão, os links apontam para o frame ou a janela em que estão localizados; entretan-
to, esses links devem abrir seus documentos correspondentes no frame de conteúdo, não
no frame moreContent.
Campo de texto Link
Menu Target
Toda vez que você cria um novo frame, o nome desse frame é automaticamente adicio-
nado ao menu Target. Nomes claros, concisos e descritivos ajudam mais. Embora os no-
mes de frame padrão do Dreamweaver dêem uma idéia da localização de frame, esses no-
mes genéricos ainda podem ser difíceis e confusos de escolher quando você tentar fazer
um documento abrir em certo frame.
Se estiver trabalhando em um documento que será carregado em um frame e

não estiver trabalhando nele dentro do frameset, como você está nesta lição, não ha-
verá a opção no menu Target para selecionar os nomes de qualquer frame. O Dre-
amweaver exibe somente os nomes de frames que estão disponíveis no documento
atual no menu de alvo. Nesses casos, você precisa digitar o nome exato do frame em
que deseja que a página abra no campo de texto de alvo.
2. Repita o Passo 1 para vincular o texto About a AboutGreen.html e o texto Begin a

BeginningGreen.html. Cada um desses links deve apontar para o frame de conteúdo.
Há outras opções disponíveis no menu Target:
_blank carrega o documento vinculado em uma nova janela de navegador sem
nome.
_parent carrega o documento vinculado no frameset pai do frame que contém o
link. Se o frame contendo o link não estiver aninhado, o documento vinculado é
carregado na janela do navegador inteira.
_self carrega o documento vinculado no mesmo frame ou janela que o link. Esse
alvo é sugerido; portanto, normalmente você não tem de especificá-lo.
_top carrega o documento vinculado na janela de navegador inteira, removendo to-
dos os frames.
CRIANDO FRAMES 373

Ao visualizar suas páginas de frames no navegador, talvez você veja uma caixa de diálogo
informando que todos os frames precisam ser salvos. Clique em OK para salvar todos fra-
mes e o frameset.
Ao clicar no link About, o documento AboutGreen.html é exibido no frame de
conteúdo.
Se suas páginas não aparecem nos frames em que deveriam aparecer, verifi-
que se você selecionou o frame correto no menu drop-down Target no inspetor Pro-
perty para cada link.
Os links devem abrir todas as páginas no frame de conteúdo – se não abrirem, você
precisa corrigir o alvo utilizando o menu Target para qualquer link que não abre nesse
frame.
Criando conteúdo NoFrames

No Dreamweaver, você pode criar conteúdo que é ignorado por navegadores capazes de
exibir frames e é exibido em navegadores antigos e com base em texto ou em outros nave-
gadores que não suportam frames. Essas informações, chamadas conteúdo NoFrames,
também são utilizadas por spiders (“aranhas”) de sistemas de pesquisa, leitores de tela e
dispositivos portáveis de Internet que não suportam frames. O conteúdo NoFrames que
você cria é colocado no arquivo de frameset. Quando um navegador que não suporta fra-
mes carrega o arquivo de frameset, o navegador exibe somente o conteúdo NoFrames.
1. No documento community.html, selecione o frameset.

O documento community.html é a página que o navegador carrega inicialmente; portan-
to, o conteúdo NoFrames é especificado aqui.
2. Escolha Modify > Frameset > Edit NoFrames Content.
Se a opção Frameset no menu Modify estiver desativada, talvez você tenha

um frame selecionado.
A janela Document muda para exibir a página de NoFrames, e as palavras “NoFrames

Content” aparecem na parte superior. Esse ainda é o documento community.html; você
está apenas vendo uma visualização diferente do conteúdo da página.
374 LIÇÃO 10
3. Abra o documento green_page1.txt; então, selecione e copie todo o texto. Crie o
conteúdo NoFrames content na janela Document colando o texto copiado do arquivo
de texto green_page1.txt.
O conteúdo alternativo pode conter elementos provenientes de uma página HTML pa-
drão. Ele será incluído entre as tags <noframes> e </noframes>. Somente navegadores
que não suportam frames vêem esse conteúdo. O conteúdo deve ser relativamente sim-
ples – é possível que navegadores que não suportam frames não suportem JavaScript, ma-
pas de imagem e outros tipos de elementos complexos. Alguns Web sites utilizam o con-
teúdo NoFrames para fornecer páginas alternativas simples ou direcionar os usuários
para uma versão baseada em texto do Web site, enquanto outros sites utilizam o conteúdo
NoFrames para exibir uma mensagem aos usuários informando que o site está disponível
somente para navegadores capazes de exibir frames.
4. Certifique-se de há uma marca de seleção ao lado de Modify > Frameset > Edit
NoFrames Content.
A janela Document muda para ocultar o conteúdo NoFrames e retorna à visualização
normal do documento de frameset.
Ao terminar de editar o conteúdo NoFrames, talvez você seja inclinado a fechar

a janela porque não pode ver o documento original. Se o fizer, feche o frameset e todas
as páginas de frame. Então, abra-os novamente se quiser continuar a editá-los.
5. Escolha File > Save All e feche todos os seus documentos.
CRIANDO FRAMES 375

Utilizando frames por conta própria
Frames podem ser uma ferramenta útil de desenvolvimento Web quando são adequada-
mente implementados.
Revise seu site e pense se frames são necessários ou se você pode obter a funcionalidade
de que precisa com outros elementos, como itens de biblioteca (abordados na Lição 12)
ou Templates (abordados na Lição 13). Para praticar mais, talvez você queira desenvolver
duas versões de uma parte do seu site – uma com frames e outra sem – e compará-las.
Ao desenvolver páginas com frames, lembre-se de utilizar as opções de acessibilidade
que o Dreamweaver solicitará que você inclua, e sempre desenvolva conteúdo sem fra-
mes para navegadores ou dispositivos que não são capazes de exibir páginas Web basea-
das em frames. Se desenvolver duas versões, compare a usabilidade de cada uma, consi-
derando o seguinte:
Facilidade de navegação
Manutenção
Funcionalidade do navegador

Criou um frameset para definir o layout de frames dentro de seu documento
Salvou um frameset e aprendeu a salvar outros frames individualmente, bem como
salvá-los todos de uma vez
Criou frames e frames aninhados para modificar o layout de sua página utilizando
framesets predefinidos
Redimensionou frames alterando as dimensões no inspetor Property
Alterou as propriedades de frameset e de frame utilizando o painel Frames e o inspe-
tor Property
Criou documentos dentro de frames inserindo elementos diretamente nos frames e
abrindo documentos existentes nos frames
Definiu outros frames como alvo de links a fim de controlar onde as páginas apa-
recem
Criou conteúdo NoFrames para navegadores que são incapazes de exibir frames
376 LIÇÃO 10
Criando
11 formulários
Eventualmente, você pode precisar coletar informações dos visitantes para seu Web
site. As informações que talvez precisem ser coletadas podem incluir feedback sobre o
site, registro de usuário, respostas a pesquisas e compras de produtos (comércio eletrô-
nico). Ao coletar essas diferentes informações para criar uma oportunidade de os visitan-
tes interagirem com seu site, os formulários fornecem a interface com o usuário neces-
sária que permite obter os dados. Os formulários permitem solicitar informações especí-
ficas aos visitantes ou lhes dar uma oportunidade de enviar feedback, perguntas ou soli-
citações a você. Registros de visitantes e pedidos de produtos freqüentemente exigem
a funcionalidade dos formulários. Muitas vezes, os formulários são utilizados junto com
bancos de dados e podem permitir que os visitantes realizem pesquisas e enviem infor-
mações a serem incluídas em um banco de dados. Um formulário contém campos em
que os usuários inserem informações. Esses campos podem ser campos de texto, bo-
tões de opção, caixas de seleção, menus ou listas, para citar alguns.
Dados do formulário são normalmente enviados a um banco de dados em um servidor,

a um endereço de e-mail ou a um aplicativo que os processará. O processamento de
formulários pode ser feito por meio de páginas dinâmicas (que utilizam linguagens
como PHP, JSP, ColdFusion e outras para acessar fontes dinâmicas de conteúdo
Neste projeto, você construirá um

formulário com vários campos de texto,
caixas de seleção, botões de opção,
botões de envio e de redefinição e um
menu.
CRIANDO FORMULÁRIOS 377

como bancos de dados) ou scripts CGI (Common Gateway Interface). O CGI é um pro-
tocolo padrão que atua como o link de comunicação entre os dados do formulário e o
servidor. Nesta lição, você criará o formulário que um visitante verá. Como você não
trabalhará com páginas dinâmicas ou scripts CGI, e não precisará acessar um servidor
para completar esta lição.
Para ver um exemplo da página concluída para esta lição, abra training.html na pasta
Lesson_11_Forms/Completed/Training.

Criar um formulário em uma página Web
Dividir o conteúdo de formulário em grupos
Criar formulários acessíveis
Adicionar campos de texto de uma única linha
Adicionar um campo de texto multilinha
Adicionar caixas de seleção
Adicionar botões de opção
Adicionar itens de menu/lista
Adicionar campos ocultos
Adicionar botões
Formatar um formulário utilizando Cascading Style Sheets (CSS)
Criar um menu de salto
Testar um formulário
Tempo aproximado
Arquivos da lição
Arquivos iniciais:
Lesson_11_Forms/training/training.html
Projeto concluído:
Lesson_11_Forms/Completed/training/training.html
378 LIÇÃO 11
Criando formulários
Antes de adicionar elementos como campos individuais e botões a uma página, o formu-
lário que contém esses elementos deve ser criado. Os formulários atuam como o contai-
ner para campos, botões, menus e outros objetos que os visitantes podem utilizar para in-
serir ou selecionar informações; os formulários também especificam o que acontece com
os dados quando são enviados. Neste exercício, você criará a área de formulário.
1. Abra o documento training.html da pasta Lesson_11_Forms/Training. Posicione

o ponto de inserção no parágrafo em branco abaixo do texto Yoga Teacher Training
Certification Program Application. Clique no botão Form na categoria Forms da bar-
ra Insert.
Você também pode inserir um formulário escolhendo Insert > Form > Form.
Categoria Forms Form (Formulário)
A área ocupada pelo formulário é identificada visualmente por linhas vermelhas ponti-
lhadas na janela Document; essa área é definida pelas tags<form> e </form> no código.
Essas linhas vermelhas são elementos invisíveis que são exibidos somente no Dream-
weaver; quando você visualiza a página dentro de um navegador, não há nada que
marque a área do formulário. Essas linhas vermelhas não são arrastáveis – o tamanho
da área de formulário depende do que você coloca dentro do formulário, que se ex-
pande horizontalmente para abranger toda a área disponível e verticalmente confor-
me necessário para acomodar o conteúdo. O formulário que você posicionou na pági-
na estende-se para ocupar a largura inteira do container, seja ele um div, uma célula de
tabela ou a própria página.
As linhas vermelhas pontilhadas indicam a área ocupada pelo formulário

Se os elementos invisíveis não estiverem ativados, uma caixa de mensagem
aparecerá, para que você saiba que não poderá ver o formulário. Clique em OK para fe-
char a caixa de mensagem e, então, escolha View > Visual Aids > Invisible Elements
de modo que possa ver o limite vermelho pontilhado do formulário. Se os elementos
invisíveis estiverem ativados, você não verá a mensagem de advertência. A caixa deli-
mitadora Form também deve estar marcada na categoria Invisible Elements de prefe-
rências do Dreamweaver – ela é marcada por padrão.
É possível inserir diversos formulários em uma página; mas não é possível aninhar um
formulário dentro de outro em HTML. Por causa dessa restrição, o Dreamweaver impede
que formulários sejam acidentalmente aninhados desativando a inserção de um formulá-
rio em outro. A opção para inserir um formulário não estará desativada, mas nenhum
formulário é inserido se você tentar posicionar um formulário dentro de um outro. Se
tags de formulário forem inseridas manualmente dentro de um formulário, o Dreamwea-
ver destacará as tags incorretas a fim de chamar sua atenção para esse erro.
2. Selecione o formulário clicando na linha vermelha pontilhada.
Você também pode utilizar o seletor de tag para selecionar o formulário se o

ponto de inserção estiver dentro do formulário.
O inspetor Property muda para exibir as propriedades do formulário.
Se o inspetor Property não estiver visível, escolha Window > Properties.
3. Substitua o nome padrão form1 no campo de texto do nome Form no inspetor Pro-
perty digitando training.
O Dreamweaver gera nomes genéricos para os formulários. Os nomes são incrementa-

dos numérica e automaticamente toda vez que você criar um formulário: form1, form2 e
assim por diante. Todos os nomes de formulário devem ser únicos e não devem utilizar
nenhum caractere especial. Os nomes de formulário são identificadores importantes, par-
ticularmente se você tiver mais de um formulário em uma página ou se utilizar um banco
de dados para reunir informações coletadas ou solicitadas via o formulário. Nomes de
formulários também são utilizados para controlá-los por meio do uso de linguagens de
criação de scripts como JavaScript.
380 LIÇÃO 11
4. Posicione o ponto de inserção no formulário e escolha Insert > Table. Configure a
tabela como 3 linhas e 1 coluna. A largura da tabela deve ser de 90%. Configure a bor-
da como 0, o preenchimento de célula (cell padding) como 0 e o espaçamento de cé-
lula (cell spacing) como 10. Escolha None para o Header e então clique em OK.
A tabela aprimora o layout do formulário. Utilizar tabelas torna fácil alinhar o texto ou
as imagens com os campos de formulário para rotulá-los.
Você pode posicionar uma tabela dentro de um formulário ou posicionar um formulá-
rio em uma tabela, mas a tabela em questão deve conter completamente ou estar contida
pelo formulário.
Agrupando conteúdo de formulário

Antes de iniciar a agrupar seu formulário, você deve investir tempo para desenvolver um
esquema completo de conteúdo. Depois de criar um esboço das informações que solicita-
rá aos visitantes, você pode dividir essas informações em grupos lógicos com base na se-
melhança de conteúdo. O formulário que será criado nesta lição pode ser dividido em três
seções: Contact Information (Informações de contato), Experience e Interests (Experiên-
cia e interesses) e Send Your Answers (Envie suas respostas). Depois de determinar as se-
ções em que seu formulário será dividido, você está pronto para utilizar fieldsets de modo
a criar essas seções dentro do próprio formulário. Fieldsets são elementos de formulário
utilizados para criar seções individuais de conteúdo dentro de um formulário. Agrupar o
conteúdo do seu formulário em seções autocontidas e menores torna mais fácil para o vi-
sitante entender e preencher o formulário. Fieldsets oferecem aos visitantes uma maneira
de entender rapidamente a estrutura geral do formulário.
1. Posicione o ponto de inserção na primeira linha da tabela que você criou no exercí-
cio anterior. Na categoria Forms da barra Insert, clique no botão Fieldset.
Fieldset
A caixa de diálogo Fieldset se abre.

2. No campo de texto Label digite Contact Information e clique em OK.
Um fieldset se expande para ocupar toda a quantidade de espaço disponível para ele. A
célula superior da tabela criada no exercício anterior serve para estabelecer os limites do
fieldset e controlar o layout. Semelhante a formulários, os fieldsets podem ser posiciona-
dos dentro de uma tabela, ou você pode posicionar uma tabela em um fieldset, mas a tabe-
la deve conter ou estar completamente contida pelo fieldset.
3. Posicione o ponto de inserção na segunda linha e clique no botão Fieldset na barra

Insert. No campo de texto Legend, digite Experience And Interests e clique em OK.
A legenda que você especifica para um fieldset serve como uma legenda para a seção, uma
maneira de identificar o conteúdo. Ao criar legendas para fieldsets nos próprios formulá-
rios, seja o mais claro possível. Essas legendas devem refletir exatamente o que seus field-
sets contêm.
4. Posicione o ponto de inserção na terceira linha e clique no botão Fieldset na barra

Insert. No campo de texto Label, digite Send Your Answers e clique em OK.
Um fieldset cerca o conteúdo com uma linha cinza pálida.

382 LIÇÃO 11
Adicionando campos de texto de uma única linha
Campos de texto servem para reunir informações que o usuário digita. Campos de texto de
uma única linha são utilizados para respostas concisas e curtas como uma palavra ou fra-
se. Campos de texto de uma única linha típicos coletam nomes, partes de informações so-
bre endereços e correio eletrônico dos usuários. Campos de texto de uma única linha são
também utilizados para pesquisas básicas, em que o visitante digita palavras descrevendo
as informações desejadas no campo.
Você deve posicionar todos os campos e botões de formulário dentro das linhas ver-
melhas pontilhadas; caso contrário, eles não farão parte do formulário. Se tentar inserir
campos de formulário fora das linhas vermelhas, o Dreamweaver exibe uma caixa de
alerta com as opções Yes ou No, perguntando se você quer adicionar uma tag de formu-
lário. Se escolher No, o campo ou os botões não funcionarão como parte de nenhum
formulário.
1. No documento training.html, posicione o ponto de inserção no texto Contact Infor-

mation. Utilize o seletor de tag para selecionar a tag <legend>, pressione a tecla de
seta para a direita uma vez e pressione Return (Macintosh) ou Enter (Windows).
Objetos do formulário devem ser inseridos no fieldset, mas não dentro da legenda. Se
você posicionasse o ponto de inserção no final da legenda e pressionasse Return, um se-
gundo conjunto de tags de legenda seria criado. Não deve haver um segundo conjunto de
tags de legenda.

2. Na categoria Forms na barra Insert, clique no botão Text Field.
Você também pode escolher Insert > Form > Text Field.
Campo de texto
A caixa de diálogo Input Tag Accessibility Attributes se abre.
Criar formulários acessíveis logo no início ajuda a alcançar um público mais amplo. É
importante incluir atributos acessíveis atrair usuários que talvez precisem utilizar a tecno-
logia de assistência ao usuário com necessidades especiais, como leitores de tela. Se seus
formulários não incluírem esses atributos, pode ser difícil para algumas pessoas preen-
cher o formulário. Por padrão, o Dreamweaver solicitará que você inclua recursos de
acessibilidade ao inserir formulários.
Se o Dreamweaver não fornecer a caixa de diálogo Accessibility Attributes au-

tomaticamente, talvez seja preciso ativar os recursos de acessibilidade para objetos
de formulário. Para isso, escolha Dreamweaver > Preferences (Macintosh) ou Editar >
Preferências (Windows). Selecione a categoria Accessibility e marque a caixa Form
Objects; então clique em OK.
384 LIÇÃO 11
3. Digite Full Name (Nome completo): no campo de texto Label.
Os rótulos fornecem informações claras que especificam o propósito de todos os seus ob-
jetos de formulário (campos de texto, caixas de seleção e assim por diante), de modo que
seus visitantes saibam quais informações eles devem inserir nesses campos. Sem rótulos,
os formulários podem ser bem confusos. Os rótulos são incluídos na janela Document
como uma descrição visual do campo de texto e em um atributo dentro do código HTML
que identifica o campo de texto correspondente. Utilize rótulos concisos e descritivos
sempre que possível.
4. Na seção Style, selecione Wrap with label tag. Na seção Position, selecione Before
form item. Deixe os campos de texto Access key e Tab Index em branco.
A opção Wrap With Label Tag cerca os objetos de formulário com uma tag label. Com essa
opção selecionada, o objeto de formulário precisa permanecer sempre ao lado do rótulo de
texto na janela Document. Se o objeto de formulário for movido, essa opção evita que ele
seja separado da tag – não utilizar essa opção pode causar muita confusão para os visitantes
que utilizam leitores de tela porque o rótulo não estará mais associado a um objeto de um
formulário que foi movido. Um campo de texto criado com esse método aparece no código
como <label>Full Name: <input type="text" name="textfield" /></label>.

A opção de atributo Attach Label Tag Using For Attribute cria um rótulo independente
que é identificado com o campo de texto correspondente por meio de um id. Utilizar essa
opção permite separar o objeto de formulário, de um lado, do texto que o rotula na janela
Document, de outro, o que você talvez precise fazer para propósitos de layout. Esse méto-
do é mais flexível porque continua a funcionar de maneira adequada independentemente
de o objeto de formulário estar ou não separado do texto correspondente. Se você não es-
tiver seguro sobre qual método Style utilizar, selecione esse. Um campo de texto criado
com esse método aparece no código como <label for="textfield"> Full Name: </la-
bel> <input type="text" name="textfield" id="textfield" />.
A opção No Label Tag pula a opção Label. Se usar essa opção, você poderá adicionar ró-
tulo posteriormente utilizando o botão Label na categoria Forms na barra Insert.
Há dois atributos adicionais de acessibilidade disponíveis:
Access Key: O campo de texto Access Key permite criar um atalho pelo teclado para
o objeto de formulário especificando um caractere que os visitantes podem utilizar
em combinação com as teclas modificadoras Option (Macintosh) ou Alt (Win-
dows). Embora os visitantes possam utilizar a tecla Tab para pular de um objeto de
formulário para o próximo, as teclas de acesso podem fornecer uma maneira muita
mais rápida de pular imediatamente para qualquer objeto de formulário na página.
Ao criar teclas de acesso, tenha cuidado especialmente para não utilizar caracteres
que possam conflitar com os atalhos pelo teclado padrão. Se utilizar teclas de acesso,
uma boa idéia é deixar que os visitantes conheçam isso – forneça instruções na parte
superior do formulário ou em uma janela pop-up (que você aprenderá a criar na Li-
ção 11) e indique o atalho pelo teclado ao lado do campo de texto correspondente.
Os indicadores de atalho pelo teclado devem ser os mais claros e visíveis possíveis.
No teclado do Macintosh, os atalhos são listados ao lado de itens do menu com um
ícone visual que representa a tecla modificadora. No Windows, porém, o caractere
apropriado é sublinhado para indicar o atalho. Seja qual for o método escolhido,
seja consistente e claro – e informe-o a seus visitantes nas instruções ou nas infor-
mações de ajuda.
Tab Index: Muitos usuários Web utilizam a tecla Tab ao preencher formulários; a
tecla Tab fornece uma maneira de se mover por um formulário rapidamente alter-
nando o foco de um objeto ou link de formulário para outro. A ordem em que a te-
cla Tab altera o foco depende da ordem em que o objeto e os links ocorrem no códi-
go. Embora a ordem padrão em que o foco muda seja normalmente a que você espe-
ra, é possível que o layout visual de um formulário possa ser apresentado de modo
que a ordem percebida seja diferente da ordem real desses objetos no código. Nesses
casos, utilizar o campo Tab Index para especificar a ordem de foco mediante a atri-
buição de números a objetos de formulário ajuda os visitantes a se moverem pelo
formulário. Alternativamente, talvez você queira aplicar o Tab Index somente a
campos que são requeridos. Ao especificar um Tab Index, inicie com 1, seguido por
2 e assim por diante. Não pule nenhum número.
386 LIÇÃO 11
Se você não utilizar o recurso de acessibilidade ao inserir objetos de formulário, não
será solicitado a especificar um rótulo. Embora você possa inserir um rótulo para o objeto
de formulário na janela Document, esse texto não estará contido nas tags <label> e </la-
bel>, a menos que adicione essas tags ao código manualmente ou utilizando o botão La-
bel na categoria Forms na barra Insert.
5. Clique em OK para inserir o campo de texto.

O campo de texto de uma única linha é posicionado no formulário junto com o rótulo de
texto; ambos são selecionados automaticamente.
6. Clique na janela Document à direita do campo de texto para remover a seleção e o

rótulo. Clique no campo de texto para selecionar somente o campo de texto; em se-
guida, substitua Textfield no campo de texto de nome TextField no inspetor Property
digitando fullName.
Todos os campos devem ter nomes. O Dreamweaver atribui nomes genéricos

automaticamente em uma ordem numérica: textfield, textfield2 e assim por diante.
Quando o formulário é enviado, o nome do campo de texto identifica as informações
que foram inseridas no campo. Nesse caso, fullName significa que as informações in-
seridas nesse campo são o nome completo do visitante.
Não utilize nenhum espaço ou caracteres especiais no nome, e lembre-se de que os nomes
fazem distinção entre maiúsculas e minúsculas quando utilizados com scripts como
scripts CGI ou JavaScripts.
É importante lembrar de atribuir nomes descritivos e curtos a todos os seus campos.
Suponha que você tenha dois campos de texto em uma página com rótulos ao lado deles,
solicitando que o usuário insira um número de telefone residencial em um campo e um
número de telefone comercial em outro. Se esses campos de texto forem nomeados como
text field e textfield2, seus nomes não oferecerão nenhuma indicação sobre qual número é
o residencial e o comercial. Por outro lado, atribuindo aos campos nomes mais descriti-
vos, como worknumber (número comercial) e homenumber (número residencial), você
pode evitar confusão com relação ao tipo de informação. Os visitantes não verão nem se-
rão prejudicados pelos nomes de campo – identificá-los é vantajoso para você e sua equi-
pe de Web.
7. Com o objeto de formulário do campo de texto ainda selecionado, clique no campo

de texto Char Width no inspetor Property e digite 40. Pressione Return (Macintosh) ou
Enter (Windows).

Char Width, ou largura de caractere, é o número de caracteres visíveis que serão exibidos
nos campos de texto. A largura do campo de texto aumenta o espaço disponível de modo
que ele possa mostrar aproximadamente 40 caracteres. A largura inicial do campo de tex-
to é de aproximadamente 24 caracteres. As dimensões reais do campo de texto variam en-
tre navegadores, com base no tamanho de texto utilizado para esse campo de texto, que
poderia ser definido por meio da Cascading Style Sheets (CSS) ou deixado com os pa-
drões de navegador. A altura do campo de texto também depende do tamanho do texto.
Você pode aplicar um estilo CSS a um campo de texto escolhendo o estilo de-
sejado no menu Class no inspetor Property quando o campo de texto é selecionado.
8. Com o objeto de formulário do campo de texto ainda selecionado, clique no campo

de texto Max Chars no inspetor Property e digite 50. Pressione Return (Macintosh) ou
Enter (Windows).
Max Chars, ou caracteres máximos, limita o número total de caracteres que um usuário
pode inserir. Inicialmente, esse campo de texto permanece em branco e o número de ca-
racteres que um usuário pode inserir é ilimitado.
Se o valor de Max Chars for maior que Char Width, os usuários podem continuar a di-
gitar e o texto rolará para a esquerda dentro do campo à medida que o usuário digitar
além da área visível. A área rolável termina no valor de Max Chars.
Se seu formulário enviar informações a um banco de dados, você precisará

certificar-se de que o valor para os caracteres máximos coincida com a configuração
máxima do campo correspondente no banco de dados.
9. Coloque o ponto de inserção no rótulo de texto Full Name na janela Document. Se-
lecione a tag <label> no seletor de tags, pressione a tecla de seta para a direita uma
vez e então pressione Return (Macintosh) ou Enter (Windows). Clique no botão Text
Field na barra Insert e digite Email: no campo de texto Label na caixa de diálogo Input
Tag Accessibility Attributes. Verifique se Wrap with label tag está selecionado na se-
ção Style e se Before form item está selecionado na seção Position; deixe os outros
campos em branco e clique em OK. Selecione o campo de texto e utilize o inspetor
Property para configurar o nome do campo como email, o Char Width como 40 e o
Max Char como 70. Pressione Return (Macintosh) ou Enter (Windows) ou clique na ja-
nela Document para aplicar a alteração.
Esse campo aceita o endereço de e-mail do usuário.
É importante criar um novo parágrafo que exista fora das tags <label> que envolvem o
objeto de formulário anterior; do contrário, o novo objeto de formulário pode tornar-se
aninhado dentro das tags <label> do objeto anterior ou talvez se sobreponha ou cause
outras dificuldades. Você pode evitar isso selecionando as tags <label> no seletor de tags
e utilizando as teclas de seta para mover-se para fora dessas tags, como fez neste passo.
Pode ser bom utilizar a visualização Split enquanto está inserindo esses objetos.
388 LIÇÃO 11
Tenha cuidado ao configurar Max Chars para campos que aceitam informa-
ções como endereços de e-mail e URLs. Os usuários não podem inserir um URL com-
pleto ou outras informações se elas forem mais longas que o valor de Max Char por-
que não é possível digitar além do limite que você configura.
10. Com o campo de e-mail ainda selecionado, digite Enter Your Email Address no
campo de texto Init Val no inspetor Property.
Init Val, ou valor inicial, permite configurar o texto que aparecerá no campo de texto
quando o visitante carrega a página. Init Val pode ajudar a oferecer ao usuário um exem-
plo do tipo de informações sendo solicitado. Os visitantes podem substituir o texto do va-
lor inicial com texto próprio. Valores iniciais são úteis para solicitar que usuários insiram
informações ou exibam texto de exemplo. Embora o usuário possa alterar o texto, utilize
essa opção com atenção. Usuários que desejam passar pelo formulário rapidamente po-
dem pular acidentalmente um campo que já contém texto, talvez pensando que já preen-
cheram o formulário. Valores iniciais podem ser uma desvantagem se o visitante pular o
campo porque ele parece ter sido preenchido.
11. Posicione o ponto de inserção no rótulo de texto Email na janela Document. Sele-
cione a tag <label> no seletor de tags, pressione a tecla de seta que aponta para a di-
reita uma vez e então pressione Return (Macintosh) ou Enter (Windows). Clique no bo-
tão Text Field na barra Insert e digite Phone: no campo de texto Label na caixa de diá-
logo Input Tag Accessibility Attributes. Verifique se Wrap with label tag está seleciona-
do na seção Style e se Before form item está selecionado na seção Position, deixe os
outros campos em branco e clique em OK. Selecione o campo de texto e utilize o ins-
petor Property para configurar o nome do campo como Phone, o Char Width como 40
e o Max Char como 50. Pressione Return (Macintosh) ou Enter (Windows) ou clique na
janela Document para aplicar a alteração. Salve o arquivo e o visualize no navegador.

Um campo de texto regular exibe as informações no navegador à medida que
você digita. Um campo de texto de senha se parece com qualquer outro campo de tex-
to, mas o texto exibido na tela permanece oculto por marcadores ou asteriscos en-
quanto você digita. A opção de senha oculta apenas o texto no campo para impedir
que uma pessoa atrás de você veja o que digita – ela não criptografa nem mantém
seus dados seguros. Para criptografar dados, é necessário ter um software de servidor
seguro em execução no servidor Web – converse com seu administrador da Web
quanto a informações detalhadas sobre segurança de dados utilizando SSL (Secure
Sockets Layer). Para criar um campo de senha, insira um campo de texto padrão de
uma única linha e selecione a opção Password for the Type no inspetor Property. Essa
opção faz com que asteriscos ou marcadores apareçam quando um usuário insere da-
dos nesse campo. Os campos de texto de senha podem ser somente campos de tex-
to de uma única linha. O valor de Max Chars para senhas deve ser configurado no limi-
te para senhas no seu servidor.
Adicionando botões de opção

Botões de opção são utilizados quando você quer que o usuário escolha apenas uma única
opção entre várias. Selecionar uma opção automaticamente remove a seleção de todas as
outras. Exemplos de usos comuns dos botões de opção são para selecionar tipos de cartão
de crédito e perguntas que têm uma resposta sim ou não. Neste exercício, você inserirá
um grupo de botões de opção na tabela.
1. Coloque o ponto de inserção no rótulo de texto Phone na janela Document. Sele-

cione a tag label> no seletor de tags, pressione a tecla de seta que aponta para a dire-
ita uma vez e então pressione Return (Macintosh) ou Enter (Windows).
No próximo passo, você posicionará os botões de opção nesse novo parágrafo.
2. Na categoria Forms da barra Insert, clique no botão Radio Group.
Você também pode escolher Insert > Form > Radio Group.
A caixa de diálogo Radio Group aparece.
390 LIÇÃO 11
3. Na caixa de diálogo Radio Group, digite contact no campo de texto Name.
Com os botões de opção, você deve utilizar o mesmo nome para cada um deles no mesmo
grupo. Os botões de opção têm por finalidade permitir somente uma seleção.
Se inserir botões de opção um por um (utilizando o botão Radio Button na barra

Insert ou a opção de menu Insert > Form > Radio Button), você poderá tornar esses
botões parte do mesmo grupo atribuindo o mesmo nome. Usar o mesmo nome para
múltiplos botões de opção indica que esses botões fazem parte do mesmo grupo. Se
os nomes não forem idênticos, os botões de opção serão tratados como grupos dife-
rentes e neutralizam o propósito do uso de botões de opção. Você também pode inse-
rir um único botão de opção, mas lembre-se de que depois que o visitante clica no bo-
tão, a única maneira desse visitante remover a seleção do botão será redefinir o formu-
lário, que também limpará quaisquer informações que o visitante digitou ou selecio-
nou em outros objetos de formulário.
Lembre-se também de que os nomes dos objetos de formulário fazem distinção entre
maiúsculas e minúsculas quando utilizados com CGI e JavaScripts; portanto, contact não
é o mesmo que Contact.
4. Clique na primeira instância de Radio na área da lista Radio Buttons e substitua

esse texto por Email. Utilize o mesmo nome no campo de texto Value correspondente.
Clique na segunda instância de Radio e a substitua por Phone. Utilize o mesmo nome
no campo de texto Value correspondente.
Por padrão, cada Radio Group tem pelo menos dois botões de opção. Você pode adicio-
nar outros conforme necessário. Clicar em uma instância das listas Label ou Value destaca
o texto e permite alterá-lo.
Você pode adicionar ou excluir entradas com os botões de adição (+) e subtração (–).
Também é possível ajustar a ordem de entradas selecionando-as e utilizando os botões de
seta para movê-las para cima ou para baixo na lista.
Quando um formulário é enviado, os valores são encaminhados ao script que processa
o formulário no servidor. É importante atribuir um valor diferente a cada botão de opção
de modo que saiba qual opção o usuário escolheu.
5. Deixe a opção Line breaks selecionada na área Lay Out Using e clique em OK para
fechar a caixa de diálogo Radio Group. Exclua a última quebra de linha que ocorre um
pouco abaixo do último botão de opção.
A opção de quebra linha posiciona os botões de opção no seu documento com cada entra-
da em uma linha separada. A opção de tabela insere uma tabela com cada entrada em uma
linha separada.

6. Visualize a página no navegador e teste os botões de opção clicando em cada um.
Quando você clica em um dos botões de opção para selecioná-lo, o outro deve estar des-
marcado. Visualize o arquivo no navegador para ver o efeito; objetos de formulário não
parecem selecionados ou marcados na janela Document do Dreamweaver.
Salve o documento training.html e deixe-o aberto para o próximo exercício.
392 LIÇÃO 11
Adicionando caixas de seleção
Caixas de seleção permitem que os usuários escolham uma ou mais opções em um grupo
de itens relacionados. Em geral, as caixas de seleção são utilizadas quando você quer que o
usuário escolha o maior número de opções listadas possível. Se quiser que o usuário esco-
lha somente uma seleção, utilize um botão de opção, como demonstrado no próximo
exercício. Neste exercício, você irá inserir um grupo de caixas de seleção.
1. Coloque o ponto de inserção dentro da legenda Experience And Interests, selecio-

na a tag <legend> no seletor de tags, pressione a tecla de seta direita uma vez e pres-
sione Return (Macintosh) ou Enter (Windows). Digite I am interested in specific training
segment(s):. Adicione uma quebra de linha depois do texto pressionando Shift+Re-
turn (Macintosh) ou Shift+Enter (Windows); e então digite (check all that apply), se-
guido por outra quebra de linha.
Lembre-se da Lição 2: uma quebra de linha move o ponto de inserção para a próxima li-
nha sem inserir uma linha em branco, como um retorno regular de parágrafo faria.
2. Na categoria Forms na barra Insert, clique no botão Checkbox.
Você também pode escolher Insert > Form > Check Box.
Checkbox
3. No campo de texto Label, digite Anusara Yoga Immersion. Selecione Wrap with la-
bel tag na seção Style e selecione After form item na seção Position. Deixe os outros
campos em branco e clique em OK.
Uma caixa de seleção é inserida no formulário, junto com o texto do rótulo correspon-
dente.
4. Selecione somente checkbox. No campo de texto Checkbox Name no inspetor

Property, substitua checkbox por segment. No campo Checked Value, insira im-
mersion.
Se tanto label como checkbox forem selecionados, o inspetor Property não

exibe as propriedades CheckBox.

Se um visitante marcar a caixa de seleção Anusara Yoga Immersion, o valor de immersion
indica que a caixa de seleção correspondente foi selecionada e o valor de sources identifica
o grupo de caixas de seleção. Você pode especificar um número de caixas de seleção como
um grupo atribuindo nomes idênticos a todas – entretanto, certifique-se de atribuir a es-
sas caixas de seleção valores individuais, claros e precisos.
5. Posicione uma quebra de linha depois do espaço existente após o rótulo Anusa-
ra Yoga Immersion. Repita os Passos 2 a 5 para adicionar caixas de seleção utili-
zando In-Depth Asana Training & Practice, Yoga Philosophy Series e Satsang: Kir-
tan, Meditation and Discussion para os rótulos. Cada caixa de seleção e seu rótulo
correspondente devem estar em suas próprias linhas. No campo de texto de nome
CheckBox no inspetor Property, substitua checkbox todas as vezes por segment.
Insira asana, philosophy e satsang em cada campo de texto Checked Value, res-
pectivamente.
É importante colocar o ponto de inserção após o espaço que existe depois dos rótulos por-
que o ponto de inserção será colocado fora da tag de rótulo que cerca a caixa de seleção e o
texto. Você pode verificar isso examinando o seletor de tags. Se vir <p><label> na extre-
midade direita da hierarquia de tags, o ponto de inserção ainda está entre as tags <label>
e você precisará movê-lo. Se vir somente a tag <p>, você está pronto para inserir a quebra
de linha em preparação para a próxima caixa de seleção.
A última tag na hierarquia de códigos para a posição do ponto de inserção é exibida no
final direito do seletor de tag. A hierarquia do seletor de tags sempre inicia com <body>;
mas talvez você não veja a tag <body> à esquerda (início) do seletor de tags se a hierarquia
de tags for muito longa para ser completamente exibida. As tags no seletor de tags come-
çarão a desaparecer à esquerda para dar espaço às tags mais recentes. Expandir a janela
Document dará ao seletor de tag mais espaço se você quiser ver as outras tags.
À medida que você continua a inserir objetos de formulário, a tabela se expande para
baixo de modo a acomodar seu conteúdo. À medida que isso acontece, a linha vermelha
pontilhada do formulário talvez pareça sobrepor-se à tabela e não ser empurrada para
baixo junto com a parte inferior da tabela. Se isso acontecer, clique fora da tabela na janela
Document para fazer com que o Dreamweaver atualize a visualização.
6. Visualize a página no navegador e teste as caixas de seleção clicando em cada

uma.
394 LIÇÃO 11
Adicionando itens de listas e de menus

Você pode criar uma lista ou menu de rolagem a partir do qual os visitantes podem fazer
seleções. Uma lista de rolagem oferece a opção para que usuários façam múltiplas seleções
contíguas ou não-contíguas. Um menu restringe os usuários a uma seleção. Nos dois ti-
pos, os itens escolhidos pelo usuário são destacados.
1. Ainda dentro do fieldset Experience e Interests, depois da tag de rótulo que cerca a
caixa de seleção Satsang, pressione Return (Macintosh) ou Enter (Windows). Clique
no botão List/Menu na categoria Forms da barra Insert.
Você também pode escolher Insert > Form > List/Menu.
List/Menu

2. Digite What type(s) of yoga have you studied and/or practiced? no campo de texto
Label. A opção Wrap with label tag deve estar selecionada na seção Style, e o item de
formulário Before deve estar selecionado na seção Position. Deixe os campos restan-
tes em branco e clique em OK.
Um pequeno menu e o rótulo correspondente são inseridos no formulário. O Dreamwea-
ver insere um menu drop-down por padrão (no Macintosh isso assume a forma de um
menu pop-up).
3. Insira uma quebra de linha entre o texto de rótulo e o menu. Selecione somente o
menu para exibir as propriedades no inspetor Property.
O inspetor Property exibe as propriedades de List/Menu.
4. No inspetor Property, selecione List para a opção Type e altere Height para 4. Mar-
que a caixa de seleção Allow multiple na opção Selections.
Você alterou o formato de uma lista de rolagem. É necessário alterar a altura para um va-
lor maior que 1 para que o objeto de formulário mude de um menu para uma lista.
O formato de lista tem uma opção adicional que não está disponível para menus: você
pode escolher permitir ou não múltiplas seleções marcando ou desmarcando a caixa
Allow Multiple na opção Selections. Essa opção aparece desmarcada por padrão. Se mar-
car a caixa Selections, os usuários podem fazer múltiplas seleções não-contíguas com a te-
cla Cmd pressionada e clicando (Macintosh) ou com a tecla Ctrl pressionada e clicando
(Windows). Os usuários podem fazer seleções contíguas utilizando Shift-clique tanto no
Macintosh como no Windows. Se decidir permitir múltiplas seleções, uma boa idéia é in-
formar seus visitantes de que eles podem fazer múltiplas seleções (e informá-los como fa-
zer isso). Muitos usuários talvez não conheçam esses comandos. Sempre é melhor forne-
cer aos seus visitantes todas as informações e ferramentas de que precisam para interagir
com seu site.
Você também pode configurar uma altura para a lista de rolagem inserindo o número
de linhas que deseja tornar visível no campo de texto Height. Certifique-se de inserir um
valor de altura de linha maior que 1; caso contrário, a lista de rolagem é exibida como um
menu.
396 LIÇÃO 11
5. No campo de texto de nome List/Menu no inspetor Property, substitua select por
yogaTypes; em seguida, clique no botão List Values.
A caixa de diálogo List Values se abre. Essa caixa de diálogo é a mesma tanto para entradas
de List como de Menu.
6. No campo Item Label, digite Anusara e então pressione Tab. No campo Value, digi-
te anusara.
O item mais longo na caixa de valores de lista determina a largura da lista/menu. Você não
pode redimensionar uma lista ou menu arrastando-o ou especificando as dimensões.
7. Pressione Tab ou clique no sinal de mais (+) na área superior esquerda da caixa de
diálogo para adicionar uma outra opção ao menu.
Utilize o sinal de subtração (–) para excluir itens da caixa List Values.
8. Repita os Passos 6 e 7, adicionando Ashtanga, Bikram, Dynamic Hatha, Hatha,

Integral, Iyengar, Kripalu, Vinyasa, Other Western-style e Other Eastern-style à lista.
Altere o campo de Value a fim de que ele corresponda ao nome de cada região ashtan-
ga, bikram, dynHatha, hatha, integral, iyengar, kripalu, vinyasa, otherWest e otherEast,
respectivamente.
Utilize as setas acima do campo Value se quiser reordenar a lista.

9. Clique em OK para fechar a caixa de diálogo.
A lista mostra os itens que você acabou de adicionar.
Uma opção adicional no inspetor Property para itens no menu/lista é a caixa Initially
Selected. Você pode optar por escolher qualquer um dos itens na lista quando a página
carregar. Essa opção talvez não seja desejável para listas de rolagem, mas é útil ter uma es-
colha ou instrução de exemplo como “Escolha um” que aparece na primeira linha para
itens de menu.
Se escolher um item como a seleção inicial, não há nenhuma maneira de remo-

ver essa seleção. Para isso, abra a caixa de diálogo List Values, exclua o item que foi
selecionado e adicione-o à lista novamente.
10. Insira uma quebra de linha depois da lista e digite (select the most appropriate
options––make multiple selections with Cmd-click on the Macintosh and Ctrl-click on
Windows).
É bom sempre fornecer instruções para selecionar itens caso um visitante não saiba como
fazer múltiplas seleções. Você pode poupar muitas frustrações aos seus usuários, facilitan-
do que eles terminem de preencher o formulário!
Adicionando campos de texto multilinha

Você pode utilizar os campos de texto multilinha para coletar maiores quantidades de in-
formações de um usuário fornecendo uma área de texto com várias linhas em que o visi-
tante pode digitar. Esses campos, em geral, coletam comentários e feedback de visitantes.
Neste exercício, você posicionará um campo de texto de várias linhas na tabela dentro do
formulário.
1. Posicione o ponto de inserção em qualquer lugar dentro do texto abaixo do contro-

le de lista. Utilize o seletor de tags para selecionar a tag <label>, pressione a tecla de
seta que aponta para a direita uma vez e pressione Return (Macintosh) ou Enter (Win-
dows).
O ponto de inserção agora está onde deveria: dentro do fieldset, mas fora do controle de
lista.
2. Na categoria Forms na barra Insert, clique no botão Textarea.
Você também pode inserir um campo de texto de várias linhas escolhendo

Insert > Form > Textarea.
Textarea
398 LIÇÃO 11
A caixa de diálogo Input Tag Accessibility Attributes se abre. No Dreamweaver, um cam-
po de texto de várias linhas é conhecido como textarea (área de texto).
3. No campo de texto Label, digite Have you had any teaching experience in general?
Please describe. A opção Wrap with label tag deve estar selecionada na seção Style e
Before form item deve estar selecionado na seção Position. Deixe os campos restan-
tes em branco e clique em OK.
O campo de texto multilinha e o texto do seu rótulo correspondente aparecem na janela
Document.
4. Posicione uma quebra de linha entre o texto de rótulo e o campo de texto multili-
nha. Selecione o campo de texto multilinha.
Para posicionar uma quebra de linha diretamente entre o rótulo e o campo de

texto, selecione o campo de texto e pressione a tecla de seta para a esquerda uma
vez; em seguida, insira uma quebra de linha.
O inspetor Property mostra as propriedades Text Field porque o campo de texto multili-
nha está selecionado.
Você pode converter um campo de texto de uma única linha em uma área de
texto de várias linhas selecionando o campo de texto e escolhendo Multi line na opção
Type no inspetor Property.
5. No campo de texto Name no inspetor Property, substitua textarea por teachingExp.

No campo de texto Char Width, digite 40.
Ao utilizar campos de texto de várias linhas, você vê uma opção adicional no inspetor
Property. O menu Wrap está disponível somente para esse tipo de campo, ficando desati-
vado tanto para os campos de texto de uma única linha como para os de senha. Wrap es-
pecifica como o texto digitado em um campo de várias linhas é exibido se houver mais
texto do que caberá na área visível. Deixe a opção Wrap configurada como Default para
este exercício.
As opções de Wrap são Default, Off, Virtual e Physical:
Default utiliza o padrão de navegador. Essa opção é ativada automaticamente quan-
do você seleciona a Multi line para a opção Type.
Off evita que o texto mude de linha. O texto continua em uma linha até a tecla Re-
turn ou Enter ser pressionada. O texto rola para a esquerda quando o visitante digita
além do limite da área visível.

Virtual faz o texto mudar de linha, mas a quebra de linha não é aplicada aos dados
quando eles são enviados.
Physical faz o texto mudar de linha, e a quebra de linha é aplicada aos dados quando
o formulário é enviado.
6. Digite 4 no campo de texto Num Lines no inspetor Property.

Essa opção dita quantas linhas aparecem na área paginável. Ela não limita o número de li-
nhas que os usuários podem inserir. O texto paginará para cima à medida que o usuário
digitar além do número que é configurado para exibir.
7. Posicione o ponto de inserção no campo de texto multilinha e selecione a tag <la-

bel> no seletor de tags. Pressione a tecla de seta para a direita uma vez e pressione
Return (Macintosh) ou Enter (Windows). Repita os Passos 2 a 6 para criar uma segun-
da área de texto. Utilize What do you want to gain from this program [O que você espe-
ra ganhar com esse programa]? If you have specific goals or areas of interest that you
would like to explore, please explain (Se tiver objetivos específicos ou áreas de interes-
se que você gostaria de explorar, por favor explique). Please be specific [Seja específi-
co]. para o rótulo; os outros atributos de acessibilidade devem ser os mesmos do Pas-
so 3. Nomeie o campo gain e aplique os mesmos atributos configurados para a área
de texto multilinha nos Passos 5 e 6.
8. Visualize a página no navegador e teste a lista selecionando várias opções.

400 LIÇÃO 11
Adicionando botões
Freqüentemente, os formulários têm dois botões: um para enviar os dados do formulário
(Submit) e outro para limpar o formulário (Reset). O botão Submit informa o navegador
a enviar os dados. O botão Reset limpa todas as informações nos campos da página.
Um formulário criado para uma função básica de pesquisa normalmente tem

somente um botão Submit, que, em geral, é rotulado Search ou Go.
1. Posicione o ponto de inserção no texto Send Your Answers no terceiro fieldset. Uti-
lize o seletor de tags para selecionar a tag <legend>, pressione a tecla de seta que
aponta para a direita uma vez e pressione Return (Macintosh) ou Enter (Windows). Cli-
que no botão Button na categoria Forms na barra Insert.
Você também pode escolher Insert > Form > Button.
2. Deixe o campo de texto Label em branco e selecione No label tag na área Style. Dei-
xe as opções Position como estão e os campos restantes em branco. Clique em OK.
Um botão Submit é posicionado no formulário, e o inspetor Property exibe as proprieda-
des de Button. Os atributos de acessibilidade são desnecessários porque o rótulo está no
próprio botão. Como o botão Submit é o padrão, você não precisa alterar nenhuma opção
para ele.
3. Posicione o ponto de inserção à direita do botão Submit. Clique no botão Button na

barra Insert e repita o Passo 2 para configurar os atributos de acessibilidade como o
mesmo valor utilizado para o botão Submit.
Um segundo botão Submit é posicionado no formulário. A única diferença é o nome –
esse botão é chamado Submit2 porque dois botões não podem ter o mesmo nome. Os
únicos objetos de formulário que podem ter o mesmo nome são os botões de opção e as
caixas de seleção que estão no mesmo grupo. O botão com que você trabalhará neste exer-
cício é diferente porque ele não pode ser agrupado com outros botões e terá uma ação
própria atribuída no próximo passo.
4. Com o segundo botão Submit selecionado, escolha Reset Form nas opções Action
no inspetor Property.
O texto no campo de texto Label muda automaticamente para Reset. A ação desse botão
faz com que todos os campos de texto, caixas de seleção e botões de opção sejam limpos
e revertam ao seu estado original (quando a página foi carregada no navegador pela pri-
meira vez).

A terceira opção Action é None. Diferentemente de Submit e Reset, a opção de botão
None não tem nenhuma ação anexada. Ela pode ser utilizada com um script para realizar
uma outra tarefa. Uma rotina JavaScript, por exemplo, pode ser usada para realizar cálcu-
los de juros ou totais e retornar o valor final ao usuário.
5. No campo de texto Label, substitua Reset inserindo Clear Form. No campo de texto
Button Name, altere o nome padrão para reset.
Uma boa idéia é nomear seus botões de forma clara, levando em consideração as expecta-
tivas dos seus usuários. Submit e Reset são rótulos padrão de botões de formulário que as
pessoas entendem devido ao seu uso disseminado. Tome cuidado com o posicionamento
do botão Reset e torne o rótulo óbvio de modo que os visitantes não cliquem nele aciden-
talmente ao tentar enviar o formulário.
Você pode usar imagens no lugar dos botões padrão utilizando o botão de cam-
po de imagem no inspetor Property para inserir uma imagem como um elemento de
formulário e então inserir o valor apropriado, como value="Submit", no código. Talvez
você queira utilizar imagens para personalizar a aparência dos botões. É importante
certificar-se de que o propósito dessas imagens seja, obviamente, para botões.
Criando campos ocultos

Eventualmente você pode precisar incluir informações no seu formulário que não devem
ser exibidas ao visitante ou deixadas para que o visitante as preencha. Nesse tipo de cir-
cunstância, use campos ocultos, que não são exibidos no navegador. Campos ocultos, em
geral, são utilizados com scripts do lado servidor quando informações específicas são re-
queridas para processar o formulário: coletar o nome, o número de pedido ou outras in-
formações relevantes sobre um produto que está sendo adquirido; fornecer um endereço
de e-mail e um cabeçalho de assunto se o formulário for enviado para e-mail; incluir o
URL de uma página para a qual você quer redirecionar os visitantes depois que eles preen-
cheram o formulário; passar as informações de um formulário a outro; ou fazer com que
certos campos sejam completados pelo visitante. Nesses casos, um script do lado servidor
é requerido para processar os campos ocultos. JavaScript também pode ser combinado
com campos ocultos (o que é conhecido como script do lado cliente) para situações em que
o script do lado servidor não é necessário ou não está disponível. No script do lado cliente,
o navegador do visitante (o cliente) processa os scripts. Você aprendeu sobre JavaScript
na Lição 8.
402 LIÇÃO 11
Se nenhum script for utilizado em conexão com o campo oculto quando o formulário
é enviado para processamento, os campos ocultos incorporados no formulário são incluí-
dos exatamente como os valores de outros objetos de formulário.
1. Posicione o ponto de inserção ao longo da parte inferior da segunda linha da tabela.

O ponto de inserção agora está na célula acima daquela que contém o fieldset Send Your
Answers. Você pode posicionar campos ocultos em qualquer ponto no documento.
Agora que o ponto de inserção está na linha inferior da segunda célula, ele não está
mais dentro do fieldset rotulado Experience and Interests. Isso está certo nesse caso por-
que o campo oculto que você irá inserir nos passos a seguir não estará visível para o visi-
tante; o posicionamento não é importante.
2. Na categoria Forms na barra Insert, clique no botão Hidden Field.
Campo oculto
Um campo oculto é inserido no documento. O ícone de campo oculto é um auxílio vi-

sual para elementos invisíveis semelhantes aos ícones de âncora identificados – ele não é
exibido no navegador.

3. Com o campo oculto selecionado, substitua o nome padrão hiddenfield digitando
webRequest no campo de texto HiddenField. Digite true no campo de texto Value no
inspetor Property.
Nesse caso, você incluirá o título desse formulário como um valor predefinido para o
campo oculto. As informações que sempre permanecem idênticas podem ser passadas
para páginas dinâmicas e para scripts CGI por meio desses tipos de campos ocultos. Cam-
pos ocultos que utilizam valores configurados dessa maneira não são criptografados ou
seguros – eles podem ser facilmente visualizados no código-fonte do documento por
meio do navegador. Não coloque nenhuma informação sigilosa (como senhas) nesses ti-
pos de campos ocultos. Campos ocultos seguros podem ser criados ao gerar dinamica-
mente o valor do campo por meio do uso de páginas dinâmicas ou de scripts CGI.
O nome e o valor dos campos ocultos são normalmente dependentes do script que está
sendo utilizado para processá-los. Por exemplo, alguns scripts que enviam dados a um en-
dereço de e-mail poderiam utilizar “recipient” (destinatário) como o nome do campo
oculto e o endereço de e-mail ao qual os dados devem ser enviados como o valor. Esse par
nome/valor não funciona a menos que você tenha o script que processa o campo de desti-
natário no seu servidor.
Os campos de arquivo são outro tipo de campo que pode ser usado nos formu-
lários. Um campo de arquivo torna possível que os visitantes enviem arquivos via seu
formulário. Essa capacidade pode ser útil quando você precisa receber documentos
relacionados aos dados coletados no formulário. Por exemplo, um campo de arquivo
poderia ser disponibilizado por um candidato a uma vaga de emprego para enviar um
currículo. Os campos de arquivo contam com o servidor para processar os dados rece-
bidos pelo formulário, carregar ou, de outro modo, direcionar o arquivo para um local
apropriado.
Formatando formulários
Você pode utilizar estilos CSS (tratados na Lição 4) para tornar os formulários mais con-
sistentes com a aparência e o comportamento do seu site.
1. Posicione o ponto de inserção na legenda Contact Information no primeiro fieldset.

No seletor de tags, selecione a tag <fieldset>. Clique no botão New CSS Rule no pai-
nel CSS Styles. Para Selector Type, escolha Tag. Utilize o menu à direita do campo de
texto Tag para selecionar o fieldset se ele ainda não estiver exibido no campo de texto.
Na seção Define In, escolha This Document Only e então clique em OK. A caixa de diá-
logo CSS Rule definition for fieldset se abre.
Você pode criar um estilo para o fieldset a fim de controlar a aparência dos contornos que
cercam seções individuais do formulário.
404 LIÇÃO 11
2. Selecione Box na categoria List. Na seção Padding, digite 5 no campo de texto Top
e deixe a caixa Same For All marcada.
O espaço de preenchimento (padding) fornece aos objetos de formulário um “respiro”

para eles não ficarem grudados ao contorno do fieldset.
3. Selecione Border na lista de categorias. Na seção Style, selecione Solid no menu

Top e deixe a caixa Same for all marcada. Na seção Width, digite 1 no campo de texto
Top, certifique-se de que Pixels está selecionado e deixe a caixa Same for all marcada.
Na seção Color, digite #CCCC99 no campo de texto Top e deixe a caixa Same for all
marcada. Clique em OK.
Cada fieldset agora está cercado por uma borda.

4. Clique no botão New CSS Rule no painel CSS Styles. Para Selector Type, escolha
Tag. Utilize o menu à direita do campo de texto Tag para selecionar H5, e escolha This
document Only na área Define In. Na caixa de diálogo CSS Rule definition, selecione a
categoria Type e configure a cor como #999999. Clique em OK.
Esse estilo será utilizado para as legendas que especificam as diferentes seções do formulário.
5. Selecione o texto de legenda Contact Information. No inspetor Property, altere o

formato para Heading 5. Aplique um estilo a legendas dos dois outros fieldsets da
mesma maneira.
Você também pode simplesmente posicionar o ponto de inserção dentro do

texto e escolher H5 no menu Format do inspetor Property em vez de selecioná-lo por-
que os títulos são aplicados a blocos de texto inteiros.
Seu formulário agora corresponde à aparência das cores e dos estilos restantes utilizados
no site de projeto Yoga Sangha. Você pode salvar o arquivo e visualizá-lo no navegador.
Processando formulários
Se seu formulário for concebido para enviar ou recuperar informações a partir de um
banco de dados, realizar uma função de pesquisa ou processar dados, você precisará defi-
nir o que acontece com esses dados e como eles serão tratados para tornar o formulário
funcional. Essa definição é feita por meio das opções Action e Method no inspetor Pro-
perty enquanto o formulário é selecionado. Para selecionar o formulário, posicione o
ponto de inserção em algum lugar dentro dele e clique na tag <form#training> no seletor
de tags.
Você pode utilizar o Dreamweaver para desenvolver páginas Web dinâmicas e aplica-
ções que podem ser usadas para processar formulários e que façam uso de bancos de da-
dos. Criar e trabalhar com um Web site dinâmico e baseado em banco de dados exigem
uma conexão a um servidor. O tipo e a configuração de servidor determinam qual lingua-
gem de criação de scripts (como PHP, ASP, JSP e ColdFusion) pode ser utilizada. Como
criar um site que faça uso de bancos de dados e de páginas dinâmicas está além do escopo
deste livro, e como você talvez não tenha acesso a um servidor com as páginas dinâmicas
ou os scripts CGI necessários para processar os formulários enquanto completa esta lição,
as informações a seguir são apresentadas apenas como material de referência. Converse
com seu provedor de serviços da Internet (Internet Service Provider – ISP) ou adminis-
trador Web a fim de obter as informações necessárias para configurar as opções Action e
Method de modo a trabalhar com os scripts utilizados no seu servidor.
Action informa ao navegador o que fazer com os dados de formulário. Especifica o
caminho ou URL para a localização e o nome de uma aplicação do lado servidor
(normalmente um script CGI ou uma página dinâmica) que processa as informa-
ções quando o usuário clica no botão Submit. Os scripts CGI estão localizados no
servidor Web que processa os dados enviados por um formulário.
406 LIÇÃO 11
Method define como os dados do formulário são tratados: GET, POST ou Default.
Os dados enviados por um formulário são uma string de texto contínua obtida a
partir das informações digitadas pelo usuário. GET acrescenta conteúdo do formu-
lário ao URL especificado no campo de texto Action; essas informações são, portan-
to, visíveis na barra de endereços do navegador. GET não é um método seguro para
transferir dados; portanto, ele não deve ser utilizado para informações sigilosas
como informações de cartão de crédito ou CIC. O método GET pode enviar somen-
te um volume limitado de informações devido a restrições freqüentemente impos-
tas quanto ao comprimento de URLs pelos navegadores e servidores. Essa limitação
pode variar, assim o método GET também não é uma boa escolha para formulários
em que o visitante poderia ter inserido um grande volume de informações – formu-
lários longos perdem quaisquer informações que excedem a restrição de tamanho
ou comprimento. O método POST, por outro lado, é capaz de enviar muito mais in-
formações e é mais confiável e seguro. É o método mais comum utilizado em scripts
para enviar dados de formulário. POST utiliza uma solicitação HTTP para enviar o
valor do formulário no corpo de uma mensagem. Default utiliza o método padrão
do navegador, que normalmente é GET.
Testando formulários
É possível enviar um formulário a um endereço de e-mail se não houver um script de CGI
em execução no seu servidor por meio do uso de um mailto (um link de e-mail, visto na
Lição 3) para a ação do formulário, o que deve ser utilizado somente para testar formulá-
rios. Esse método tem alguns defeitos, incluindo erros que ocorrem como resultado do
fato de o navegador não estar configurado para enviar correio ou não ser capaz de conec-
tar-se a um programa de e-mail e a absoluta falta de segurança. Você sempre deve utilizar
páginas dinâmicas ou scripts CGI para processar formulários.
Embora a ação de mailto seja uma maneira inicial de testar seu formulário, ela
não é uma substituta para testar o formulário com os scripts de servidor correspon-
dentes. Você sempre deve certificar-se de testar completamente as páginas em um
ambiente funcional para garantir que seus scripts estão funcionando conforme o espe-
rado antes de disponibilizá-los aos visitantes.
1. No documento training.html, selecione o formulário clicando no seletor de tag

<form#training>. No campo Action do formulário no inspetor Property, digite mailto:
seguido pelo seu endereço de e-mail, sem espaços depois do dois-pontos.
Lembre-se de incluir o dois-pontos e nenhum espaço. Foi dessa mesma maneira que você
inseriu links manuais de e-mail na Lição 3.
2. Escolha POST do menu Method e digite text/plain no campo de texto Enctype no

inspetor Property.

Você configurou o tipo de codificação como texto simples (plain text); caso contrário, o
texto enviado seria codificado de uma forma quase ilegível.
O campo de texto Enctype define como os dados no formulário são codificados. O va-
lor de text/plain formata as informações com cada elemento de formulário em uma linha
separada. Utilizar esse valor facilita a leitura dos resultados em uma mensagem de e-mail.
Se você não definir um valor de enctype, os navegadores utilizarão um valor padrão que
formata os dados. Como o padrão é o valor que deve ser usado na maioria das circunstân-
cias, normalmente você não precisará especificar um enctype. Esse exemplo é uma exce-
ção porque você está enviando os dados em uma mensagem de e-mail para testar o for-
mulário.
Para adicionar uma linha de assunto ao seu formulário, altere Action para mail-
to:YourEmailAddress?Subject=Title for Subject goes here. O ?Subject= define o
texto seguinte como o assunto. É possível utilizar espaços no assunto, mas não use
nenhum outro caractere especial como aspas, apóstrofos, pontos ou barras (além do
?Subject= que separa a mensagem de e-mail e o assunto) porque eles irão interferir
no código HTML. Isso talvez não funcione em todos os navegadores e não deve ser
utilizado de nenhuma outra maneira além de testar seu formulário.
Lembre-se de que a ação de mailto não funciona de forma confiável em todos os nave-
gadores. Utilize-a somente para fins de teste. Se seu navegador não estiver configurado
para enviar mensagens de e-mail, você não poderá testar o formulário dessa maneira.
3. Salve e teste o arquivo no navegador.

Dependendo do navegador de visualização, talvez você receba mensagens de alerta sobre
o envio de e-mail. Se optar por fazer isso, os resultados do formulário devem ser enviados
ao endereço de e-mail especificado.
4. Utilize o seletor de tags para selecionar a tag <form#training>. Exclua o texto

no campo de texto Action e altere o Method para GET. Salve e teste o arquivo no na-
vegador.
Essa é uma outra maneira de testar seus formulários. Em vez de os resultados serem envia-
dos via mensagem de e-mail, o navegador permanecerá na página com o formulário e os
resultados do formulário são acrescentados ao URL no campo de Endereço na sua janela
de navegador.
408 LIÇÃO 11
Criando menus de salto
Um menu de salto é um menu que contém links para outras páginas no seu site ou para
outros Web sites. Semelhante a links normais, o menu de salto pode ser vinculado a qual-
quer tipo de arquivo, incluindo imagens gráficas ou arquivos PDF. O menu de salto ofere-
ce uma interface fácil de usar para vincular páginas no seu site, contanto que você não tor-
ne a lista muito longa.
Um menu de salto, que é incorporado a um formulário, parece uma lista de menu no
navegador. Ele não precisa de uma ação ou método, como descrito na seção anterior, por-
que o menu de salto não faz com que os dados sejam enviados, recebidos ou processados.
1. Abra o arquivo training.html na pasta Lesson_11_Forms/Training. No canto supe-

rior direito da página, posicione o ponto de inserção em qualquer lugar no texto Anu-
sara Yoga in the Heart of San Francisco’s Mission District. No seletor de tags, clique na
tag <table.tagline>. Pressione a seta direita e pressione Return (Macintosh) ou
Enter (Windows) para abrir uma nova linha. Digite o texto Choose a Program. Insira
uma quebra de linha. Clique no ícone Jump Menu na categoria Forms na barra Insert.
Outra alternativa é escolher Insert > Form > Jump Menu.
A caixa de diálogo Jump Menu se abre. Por padrão, há um item listado no menu: Unna-
med1. O Dreamweaver atribui nomes genéricos automaticamente em ordem numérica:
Unnamed1, unnamed2 e assim por diante.

2. No campo de texto Text da caixa de diálogo Jump Menu, digite Pick One. Digite #
no campo de texto When selected e vá para o campo de texto URL.
O primeiro item na lista do menu aparecerá na primeira linha. Por isso, a primeira linha
deve ser uma descrição ou uma instrução curta sobre a lista para informar ao usuário de
que isso é um menu de salto.
3. Na área Options, escolha Select first item after URL change.

Essa seleção força a lista de menu a exibir o primeiro item do menu na lista quando o usuá-
rio retorna à página; caso contrário, a lista exibe a opção mais recentemente escolhida.
O menu Open URLs in pode ser utilizado para apontar links a frames específi-
cos, como você fez na Lição 10. Para este exercício, deixe o padrão Main Window (ja-
nela principal) selecionado.
4. Clique no botão de sinal de mais (+) para adicionar um novo item de menu. Digite
Anusara Yoga Immersion no campo de texto, pressione Tab e digite immersion.html no
campo de texto When selected, go to URL. Repita este passo, digitando In-Depth Asa-
na Training, asana.html; Yoga Philosophy Series, philosophy.html; e Satsang: kirtan,
meditation, satsang.html. Clique em OK depois de terminar.
Quando esses itens são selecionados na janela de navegador, eles são vinculados a suas pá-
ginas apropriadas. Um link é ativado quando o usuário seleciona o item correspondente.
Se quiser adicionar um botão Go à sua lista, marque a caixa de seleção Insert

go button after menu.
410 LIÇÃO 11
O Dreamweaver insere automaticamente o formulário requerido quando você insere o
menu de salto, como pode ver pelas linhas vermelhas pontilhadas. Como o ponto de in-
serção estava no final da linha de texto, o menu de salto é criado um pouco abaixo do tex-
to. Se quiser que o texto de aviso “Choose a program” apareça na mesma linha do menu
de salto, você precisará mover esse texto para o formulário. As tabelas fornecem mais con-
trole sobre o layout dos formulários.
Utilize os ícones de seta que apontam para cima e para baixo a fim de ajustar a
ordem dos itens no menu.
Ao clicar em OK, o menu inserido talvez pareça muito curto. Você visualizará a página
no navegador para verificar como ele realmente parecerá a um visitante.
5. Salve o arquivo e o visualize no navegador.

Depois de criar o menu de salto, você pode fazer alterações utilizando o inspetor Pro-
perty. O inspetor Property fornece capacidade limitada de edição, permitindo alterar o
texto que o usuário vê e alterar a ordem em que o texto aparece na lista.
Para um controle mais extenso de edição, JavaScript pode ser incorporado aos
menus de salto.
Criando formulários por conta própria

Formulários são uma excelente maneira de coletar informações sobre o público do seu
Web site.
Revise o conteúdo do seu site e decida quais informações você talvez precise coletar dos
seus visitantes. Inicie delineando os tipos de informações de que precisa. Depois de ter
uma idéia clara dos dados que você coletará pelo formulário, você pode criar um formulá-
rio mais funcional e eficaz. Utilize as técnicas aprendidas nesta lição para criar os campos
de texto, menus e botões necessários.
Teste seus formulários no início e depois com freqüência. Considere suas usabilidades
e funcionalidades.

Criou um formulário em uma página Web para posicionar os campos de formulá-
rio, permitindo que os visitantes lhe enviem informações
Dividiu o conteúdo do formulário em grupos e utilizou fieldsets para conter seus
objetos de formulário
Adicionou campos de texto de uma única linha utilizando opções que incluem lar-
gura e número máximo de caracteres

Utilizou atributos acessíveis para criar um formulário que pode ser usado por um
amplo público
Adicionou botões de opção para limitar os usuários a uma única escolha
Adicionou caixas de seleção para permitir que usuários selecionem múltiplas
opções
Adicionou caixas de listagem e menus com múltiplos itens e especificou um item a
ser selecionado inicialmente
Adicionou um campo de texto multilinha e configurou opções para o número de li-
nhas, caracteres máximos e o método de vinculação de campos e rótulos de campo
(wrap method)
Adicionou os botões Submit e Reset para que os usuários enviem ou limpem o for-
mulário
Inseriu um campo oculto para incluir informações no formulário que não são visí-
veis aos visitantes
Formatou o formulário utilizando CSS
Testou um formulário com uma ação de mailto para certificar-se de que ele está
funcionando corretamente
Criou um menu de salto que permite aos usuários navegarem pelo site
412 LIÇÃO 11
Utilizando itens
12 de biblioteca
Há muitos itens e grupos de itens que talvez você precise utilizar repetidamente por
todo seu Web site. Esses itens podem incluir, entre outros, navegação, informações
de direitos autorais, cabeçalhos e rodapés. O Dreamweaver fornece a opção para ar-
mazenar essas partes freqüentemente utilizadas do conteúdo como itens de bibliote-
ca – uma única parte do conteúdo é chamada item de biblioteca, que pode ser inserida
em múltiplas páginas, com cada instância sendo vinculada ao item original e controlada
por ele. Criar itens de biblioteca permite inserir rápida e facilmente o mesmo conteúdo
em vários documentos. Se você precisar alterar as informações, como datas de direi-
tos autorais que poderiam aparecer em um grande número de páginas por todo o seu
site, os itens de biblioteca permitem editar o conteúdo e atualizar todos os documen-
tos que o contêm com um único comando. Sem um item de biblioteca, é necessário
abrir cada página e modificar as informações individualmente ou utilizar Find & Replace
(abordado na Lição 17). Em um site pequeno, isso talvez não seja difícil; mas em um
site muito grande, pode ser demorado e pode aumentar significativamente a probabili-
dade de erros.
Neste projeto, você adicionará um

item de biblioteca a uma página.
Depois de modificar o item de
biblioteca, você utilizará o recurso
de atualização para fazer rápida e
eficientemente as mesmas
alterações em todas as páginas
contendo esse item no site.
UTILIZANDO ITENS DE BIBLIOTECA 413

Os itens de biblioteca fornecem uma maneira de manter consistência e automatizar o
processo de atualização de seu site. Os itens de biblioteca permitem repetir certos ele-
mentos em páginas que ainda assim possam ter layouts diferentes. O uso eficaz dos
itens de biblioteca pode poupar bastante tempo, não apenas na etapa de desenvolvi-
mento de seu Web site, mas também nas tarefas de manutenção em andamento.
Para ver exemplos das páginas concluídas deste capítulo, abra Community/commu-
nity.html na pasta Lesson_12_Libraries/Completed.

Aprender quando e por que utilizar itens de biblioteca
Criar e insira um item de biblioteca
Recriar um item de biblioteca
Editar um item existente de biblioteca
Atualizar todas as referências a um item de biblioteca
Separar um item de biblioteca
Tempo aproximado
Arquivos da lição
Arquivos iniciais:
Lesson_08_Interactivity/index.html
Lesson_12_Libraries/Community/community.html
Lesson_12_Libraries/Community/community_intro.html
Lesson_12_Libraries/Community/BeginningGreen.html
Lesson_12_Libraries/Community/AboutGreen.html
Lesson_12_Libraries/Community/sidebar.html
Projeto concluído:
Lesson_12_Libraries/Completed/Community/Community.html
Foi acrescentado “_solution” aos nomes dos itens de biblioteca contidos den-
tro das pastas Completed a fim de diferenciá-los dos itens de biblioteca que você criará
nesta lição.
414 LIÇÃO 12
Criando um item de biblioteca
Um item de biblioteca é uma parte de conteúdo que pode ser reutilizado em várias pági-
nas. Ele é separado das páginas em seu site e mantido em um arquivo localizado na biblio-
teca (Library). O item de biblioteca consiste apenas no código para conteúdo específico;
ele não é uma página HTML. Você pode criar um item de biblioteca selecionando um ou
mais elementos em um documento e os adicionando à Library. Ao fazer isso, o Dream-
weaver converte a seleção em conteúdo não-editável que é vinculado ao item correspon-
dente de biblioteca. O exercício seguinte demonstra esse processo.
1. Abra o arquivo index.html na Lesson_08_Interactivity. Role até a parte inferior da

página e localize o texto de copyright. Selecione esse parágrafo inteiro.
Itens de biblioteca só podem incluir conteúdo que aparece entre as tags <body> e </body>.
Eles podem incluir qualquer elemento do documento como texto, tabelas, formulários,
imagens, applets Java, plug-ins ou elementos ActiveX.
Para criar um item de biblioteca de vários elementos, estes devem formar uma seleção
contígua no documento. Se você precisar que os itens não-contíguos funcionem como
um item de biblioteca, é necessário criar vários itens de biblioteca.
O texto de direitos autorais, o endereço de e-mail e a data de modificação são informa-
ções padrão que talvez sejam utilizadas na parte inferior de todas as páginas dentro de um
Web site. As bibliotecas podem ser muito úteis para esse tipo de informações.
Um item de biblioteca que contém caminhos relativos (como link a página ou a

imagem) pode ser posicionado em qualquer nível da estrutura de diretório do seu site.
O Dreamweaver calcula automaticamente os caminhos corretos para qualquer ele-
mento que o item de biblioteca poderia conter. Caminhos relativos ao documento e à
raiz do site foram discutidos nas Lições 3 e 5.
2. Clique na guia Assets no grupo de painéis Files e clique no botão Library no lado
inferior esquerdo do painel Assets para abrir a Biblioteca.
Botão Library

A categoria Library do painel Assets se abre, onde você gerenciará todos os itens da sua
biblioteca.
3. Arraste o texto selecionado de copyright para o painel Assets.
Você também pode escolher Modify > Library > Add Object to Library para
criar um novo item de biblioteca.
Um novo ícone de biblioteca aparece na categoria Library do painel Assets ao lado de um

campo de texto que destaca o nome genérico Untitled.
Ao criar um item de biblioteca, o Dreamweaver cria uma pasta chamada Li-

brary no nível superior de sua pasta-raiz local e armazena cada item de biblioteca criado
nesse local. A pasta Library deve permanecer em seu local original no nível da raiz de
seu site para o recurso de biblioteca funcionar. Essa pasta Library e os arquivos de bi-
blioteca que ela contém são armazenados apenas localmente; eles não precisam ser
carregados para um servidor, a menos que você queira compartilhá-los com outros
membros de sua equipe Web. O Dreamweaver salva cada item de biblioteca com a ex-
tensão de arquivo .lbi.
4. Digite copyright como o nome para o novo item de biblioteca e, em seguida, pres-
sione Return (Macintosh) ou Enter (Windows).
O item de biblioteca agora é conhecido como copyright (direitos autorais) no painel Li-
brary. Nomes descritivos para os itens de biblioteca o ajudarão a gerenciá-los por todo o
seu site. Os nomes são apenas para sua referência e não serão exibidos ao usuário na janela
do navegador.
416 LIÇÃO 12
Uma visualização do item de biblioteca aparece na parte superior do painel. Talvez
você precise clicar no ícone de item de biblioteca para atualizar a visualização e ver os ele-
mentos.
Feche o arquivo index.html.
Colocando um item de biblioteca em uma página

Colocar um item de biblioteca em um documento insere o conteúdo do arquivo de item
de biblioteca e cria uma referência ao item. Quando você insere um item de biblioteca, a
HTML real é inserida, o que significa que o conteúdo sempre aparece – mesmo que o item
de biblioteca não esteja disponível na pasta Library. O Dreamweaver insere comentários
no código em torno do item para mostrar o nome do arquivo de biblioteca e a referência
ao item original. Os comentários e a referência não são visíveis na janela do navegador. A
referência ao arquivo externo de item de biblioteca é o que torna possível atualizar o con-
teúdo em um site inteiro de uma vez simplesmente alterando o item de biblioteca.
1. Abra o arquivo community_intro.html na pasta Lesson_12_Libraries/Community.

Posicione o ponto de inserção no parágrafo vazio um pouco abaixo do parágrafo que
inicia com “One of the most important teachings…”
No passos seguintes, você colocará o item de biblioteca criado no exercício anterior nesse
documento.
Se o painel Library não estiver visível, escolha a janela > Assets e clique no bo-
tão Library no painel Assets. O painel Assets está localizado no grupo de painéis Files.

2. Selecione o item de biblioteca de copyright na categoria Library do painel Assets
e clique no botão Insert no canto inferior esquerdo do painel para inserir o item no
documento.
Você também pode arrastar o ícone do arquivo de copyright do painel Library

para o local onde deseja que ele apareça na janela Document.
O texto é adicionado ao documento. O item de biblioteca de copyright (direitos auto-

rais) é mostrado com um segundo plano amarelo. Embora os itens de biblioteca sejam
destacados com amarelo por padrão, a cor pode estar alterada ou pode estar desativada
completamente na caixa de diálogo Preferences. Esse item não pode ser modificado dire-
tamente na página; veja como fazê-lo no próximo exercício.
418 LIÇÃO 12
Você pode utilizar o inspetor Property para ver o nome do arquivo-fonte e realizar as
funções de manutenção para o item de biblioteca selecionado na janela Document. O ins-
petor Property tem várias opções:
Src: Exibe o nome de arquivo e a localização do arquivo-fonte para o item de biblio-
teca. Você pode abrir o item de biblioteca para edição clicando no botão Open. É
preciso salvar o arquivo para manter as alterações feitas.
Detach from original: Quebra o link entre o item de biblioteca selecionado e seu ar-
quivo-fonte. O conteúdo do item de biblioteca torna-se editável, mas não pode
mais ser atualizado pelas funções de atualização de biblioteca.
Recreate: Sobrescreve o item de biblioteca original pela seleção atual. Utilize esta
opção para criar a biblioteca de itens novamente se o arquivo de biblioteca não esti-
ver presente, o nome do item tiver sido alterado ou o item tiver sido editado.
3. Repita os Passos 1 e 2 para inserir o item de biblioteca de copyright na parte infe-

rior do arquivo Community/BeginningGreen.html.
O benefício dos itens de biblioteca torna-se aparente quando você os reutiliza em várias
páginas.
4. Abra o arquivo Community/AboutGreen.html e posicione o ponto de inserção no

parágrafo vazio abaixo do parágrafo que inicia com “For more information…”
Você colocará uma cópia separada do item de biblioteca com as informações de direitos
autorais nessa página de modo que sejam editáveis no documento.
5. Mantenha pressionada Option (Macintosh) ou Ctrl (Windows) e arraste o ícone do

arquivo de copyright do painel Library para a parte inferior do documento.
O conteúdo da biblioteca é copiado para o documento, mas não é vinculado à biblioteca;
portanto, não há nenhum destaque amarelo. Os elementos podem ser modificados dire-
tamente na página porque eles não estão conectados a um item de biblioteca. Como esses
elementos estão separados, eles não são atualizados se alguma alteração for feita no item
de biblioteca original.
6. Salve e feche todos os arquivos.

Recriando um item de biblioteca
Se um item de biblioteca for excluído acidentalmente da categoria Library do painel
Assets e você ainda tiver uma página que mostra o item de biblioteca, pode recriá-lo.
1. Abra o documento sidebar.html e selecione o item de biblioteca navegacional na

parte inferior da página clicando nele uma vez.
Este é um item de biblioteca que não está disponível em sua pasta Library. Ele é uma tabela
simples com três linhas de links de navegação para as páginas Community baseadas em
quadros. Quando você clicou na tabela, o item de biblioteca inteiro tornou-se selecionado
e acinzentado para mostrar que ele não pode ser editado dentro do documento. Você
também pode dizer que ele é um item de biblioteca ao ver o seletor de tag, que exibe
<mm:libitem>. Embora esse elemento tenha sido marcado como um item de biblioteca
na janela Document, ele não aparece na categoria Library do painel Assets porque o item
original não está contido em seu site.
420 LIÇÃO 12
2. Clique em Recreate no inspetor Property.
O arquivo de item de biblioteca é recriado com o nome de item utilizado nessa página;
ele agora aparece intitulado CommunitySubNav na categoria Library do painel Assets.
Você também pode clicar com o botão direito do mouse (Macintosh e Win-
dows) ou clicar em Control (mouses de Macintosh com um único botão) para abrir um
menu de contexto que contém a opção Recreate e outras escolhas relacionadas ao
item de biblioteca selecionado.
3. Feche o documento sidebar.html.
Modificando um item de biblioteca

Ao editar um item de biblioteca, você precisa editar o arquivo-fonte do item na pasta Li-
brary. Um arquivo-fonte pode ser o item de biblioteca original ou aquele que foi recriado
com as técnicas do exercício anterior. Ao editar um item de biblioteca, apenas o item de
biblioteca é alterado. Quando você termina a edição, o Dreamweaver solicita que atualize
todas as páginas no site que utilizam o item, permitindo fazer ou não essas alterações em
todo o site. O Dreamweaver realiza a atualização procurando comentários que referen-
ciam o arquivo de biblioteca que você acaba de editar e, em seguida, substituindo o código
HTML antigo por seu novo código HTML. Se você remover os comentários de biblioteca
do código, o conteúdo não será mais associado ao item de biblioteca e não poderá mais ser
alterado mediante atualização do item de biblioteca.
Qualquer modificação no item de biblioteca deve ser feita no arquivo-fonte lo-

calizado na pasta Library. Se você quiser editar o conteúdo diretamente em um docu-
mento, primeiro deve quebrar o link para o item de biblioteca. Para isso, mantenha
pressionada Ctrl (Windows) ou Option (Macintosh) ao inserir o item ou selecionar o
item na página e clique no botão Detach from orginal no inspetor Property.
1. Dê um clique duplo no ícone de arquivo de copyright na categoria Library do painel

Assets.
Se a categoria Library do painel Assets não estiver aberta, escolha Window >
Assets e clique no botão Library no painel Assets.

O Dreamweaver abre o item de biblioteca de copyright para editar. Quando os itens de bi-
blioteca são inseridos em uma página, eles assumem as propriedades desse documento;
cores de texto e de link mudam de acordo com as cores padrão configuradas para o docu-
mento, a menos que você tenha especificado estilos Cascading Style Sheets (CSS) inline
ou outra formatação diretamente no item de biblioteca.
Outra alternativa é selecionar copyright no painel Library e, em seguida, clicar

no painel Edit. Você pode também selecionar o item de biblioteca em uma página e cli-
car em Open no inspetor Property.
2. Na janela Document do item de biblioteca copyright, copyright.lbi, insira uma linha

horizontal acima do texto de copyright. Altere a altura da linha horizontal de indefinido
para um valor de 1 no inspetor Property. Salve o documento.
Você pode inserir uma linha horizontal como aprendeu na Lição 2: clicando no
botão Horizontal Rule na categoria HTML da barra Insert ou escolhendo Insert > HTML
> Horizontal Rule.
422 LIÇÃO 12
A caixa de diálogo Update Library Items se abre com uma lista de todos os arquivos em
seu site que utilizam o item de biblioteca de direitos autorais.
3. Clique em Update para atualizar todos os documentos em seu site que utilizam o
item de biblioteca de direitos autorais.
A caixa de diálogo Update Pages mostra quais páginas foram atualizadas com suas alte-
rações.
Se você tiver um site grande, talvez prefira esperar para atualizá-lo com todas
as alterações de uma vez. Nesse caso, clique no botão Don’t Update quando salvar o
item de biblioteca.
4. Clique em Close para fechar a caixa de diálogo Update Pages.

A linha horizontal deve estar na sua nova localização tanto em community_intro.html
como em BeginningGreen.html.

Atualizando referências da biblioteca
Se você escolher não atualizar suas páginas no momento em que edita um item de biblio-
teca, e sim mais tarde, o Dreamweaver permite fazer toda a atualização com um único co-
mando. Por exemplo, você pode querer esperar atualizar páginas posteriormente se os
membros da sua equipe Web tiverem páginas que contenham itens de biblioteca que so-
freram check-out.
Se você estiver utilizando Check In e Check Out, um recurso de manutenção

de site abordado na Lição 14, e quiser fazer atualizações nas páginas utilizando um
item de biblioteca, o Dreamweaver perguntará se você deseja conferir as páginas con-
tendo esse item de biblioteca. Clique em yes para permitir que o Dreamweaver confira
o arquivo se você quiser que ele seja atualizado.
1. No arquivo copyright.lbi, altere a data do copyright para 2006 e salve o documento.

Clique em Don’t Update na caixa de diálogo Update Library Items.
Nem community_intro.html nem BeginningGreen.html mostram a nova data do copy-
right ainda.
2. Na barra de menu, escolha Modify > Library > Update Pages.

A caixa de diálogo Update Pages se abre.
3. No menu Look in, verifique se Entire Site está selecionado.

O menu à direita exibe o site atual, Yoga Sangha. Você está escolhendo atualizar todos os
arquivos que utilizam itens de biblioteca. Com essas opções, todas as referências ao item
de biblioteca em todo o site serão atualizadas – para todos os itens de biblioteca, não
apenas para copyright.lbi. Você pode escolher atualizar referências a um único item de
biblioteca escolhendo Files That Use no menu Look in e selecionando o item de biblioteca
desejado no menu à direta.
424 LIÇÃO 12
4. Nas caixas de seleção Update, verifique se a caixa Library Items está marcada e se
a caixa Templates está desmarcada. Marque a caixa Show Log e clique em Iniciar.
A caixa de diálogo Update Pages mostra quais arquivos foram atualizados.
5. Clique em Close para fechar a caixa de diálogo.

A nova data do copyright aparece no BeginningGreen.html e no community_intro.html.
Você pode fechar o documento do item de biblioteca copyright.
Funcionalidade semelhante pode ser obtida pelo uso de inclusões no servidor

(Server Side Includes – SSI). Entretanto, a fim de incluir o SSI em suas páginas, seu
servidor deve ser configurado para suportar SSI.
Fragmentos de código (snippets) são um outro recurso do Dreamweaver –

eles permitem inserir partes do código freqüentemente utilizadas, embora não sejam
atualizáveis porque não são vinculados a um item original. Os fragmentos de código
são discutidos em mais detalhes na Lição 14.

Aprendeu a utilizar itens de biblioteca para elementos que precisam ser repetidos
em muitas páginas em um site
Criou um item de biblioteca utilizando a categoria Library do painel Assets, inse-
riu-o em uma página com um link para o item de biblioteca e o inseriu em outra pá-
gina sem link para o item de biblioteca
Utilizou o inspetor Property para recriar um item de biblioteca que estava faltando
a partir do painel Library
Editou um item de biblioteca existente a partir do painel Library e aplicou as altera-
ções em todas as páginas no site que utilizou esse item
Atualizou todas as referências a um item de biblioteca

Utilizando
13 templates
Um template é um documento que você pode utilizar como base para criar outros do-
cumentos. Cada documento baseado em template utiliza o mesmo layout e estrutura
do template. Criar um template envolve especificar as áreas que precisam ser editá-
veis nos documentos baseados nele; todas as outras partes de um template são blo-
queadas e controladas pelo template pai. Os templates são semelhantes a itens de bi-
blioteca pelo fato de que fornecem uma maneira rápida de atualizar a estrutura e o con-
teúdo em várias páginas.
Se tiver um Web site grande com muitas seções ou várias páginas que utilizam um de-
sign comum, você poderá criar um template para acelerar o processo de produção. Uti-
lizando um template, é possível alterar ou atualizar a aparência do seu site, alterando
diversas páginas em poucos minutos. As templates são úteis quando você tem uma
equipe trabalhando junta para construir uma área do site. O Web designer pode criar
um template, inserindo marcadores de lugar para partes da página que podem ser edi-
tadas. O design geral da página permanece bloqueado. Os membros de uma equipe
podem construir e editar páginas com base em um template utilizando o Macromedia
Nesta lição, você criará um

template a partir de uma
página existente, construirá
outras páginas utilizando
esse template e modificará
as páginas editando o
template.
UTILIZANDO TEMPLATES 427

Dreamweaver ou o Macromedia Contribute, um programa projetado para usuários
não-técnicos, como editores de conteúdo, que talvez tenham pouca ou nenhuma ex-
periência na criação de Web sites.
As vantagens dos templates ficam mais evidentes em duas situações: quando você
tem uma seção ou um conjunto de páginas que precisa utilizar um design e layout idên-
tico ou quando um designer cria a aparência das páginas, mas os editores de conteúdo
adicionam o conteúdo às páginas. Se você quer simplesmente páginas com os mes-
mos títulos e rodapés, mas diferentes layouts intermediários, utilize as bibliotecas (dis-
cutidas na Lição 12). Mas se quiser utilizar o mesmo design para várias páginas, utilize
templates. As bibliotecas permitem ter certos elementos ou grupos de elementos re-
petidos por todo o site, dando mais controle sobre os layouts das páginas individuais,
enquanto os templates permitem utilizar o mesmo layout e design. Por exemplo, su-
ponha que você tenha um catálogo de produtos on-line e queira que todas as páginas
tenham a mesma aparência, exceto pela figura do produto, descrição e preço. Se criar
um template, você poderá fazer com que a sua equipe construa as páginas, com o
Dreamweaver ou Contribute, e cada página terá a mesma aparência.
Para ver exemplos das páginas concluídas deste capítulo, abra Katchie.html, Hill-
man.html e Lyon.html da pasta Lesson_13_Templates/Completed.

Criar um template
Adicionar regiões editáveis ao template
Remover regiões editáveis do template
Criar regiões opcionais
Inserir regiões repetidas
Alterar as cores de destaque do template
Construir diversas páginas baseadas no template
Atualizar um site alterando o template
Definir atributos de tag editáveis
Criar um template aninhado
428 LIÇÃO 13
Tempo aproximado
Arquivos da lição
Arquivos de mídia:
Lesson_13_Templates/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_13_Templates/Teachers/teacher.html
Arquivos de texto:
Lesson_13_Templates/Text/katchie.txt
Lesson_13_Templates/Text/hillman.txt
Lesson_13_Templates/Text/lyon.txt
Projeto concluído:
Lesson_13_Templates/Completed/Teachers…(todos os arquivos)
O template utilizado para criar os arquivos na pasta Completed é teacher_com-

pleted.dwt. Esse arquivo encontra-se na pasta Completed/Template_Files, para não
conflitar ou ser confundidos com os arquivos de template que você criará nesta lição.
Em um site real, a localização correta desses arquivos seria a pasta Templates criada
pelo Dreamweaver enquanto trabalha nesta lição. Se precisar utilizar os templates
para os arquivos completados, você deve movê-los para a pasta Templates.
Criando templates
Um template define o layout e o design das páginas subseqüentes que você criará a par-
tir dele. Nesta lição, o template a ser criado fornece a navegação, a identidade do site e a
aparência e o comportamento da seção de perfis dos professores no site de projeto Yoga
Sangha.
Ao criar um template, seu primeiro passo normalmente inclui o desenvolvimento do
design da página – que já foi feito para você neste projeto. O documento teacher.html
possui estrutura, layout e navegação – tudo, menos o conteúdo que será definido nas pá-
ginas baseadas no template criado nesta página.
Nesta lição, você criará uma série de páginas Web a partir de um template comum,
cada uma constituindo o perfil de um professor diferente. Você começará o processo nes-
te exercício utilizando uma página existente para criar o template e então criará outras pá-
ginas a partir desse template nos exercícios subseqüentes.

1. Abra teacher.html na pasta Lesson_13_Templates/Teachers.
Neste documento, os materiais que seriam posicionados nas áreas de conteúdo e que são
concebidos para mudarem de uma página para outra são representados por texto descriti-
vo marcador de lugar.
2. Escolha File > Save As Template.

A caixa de diálogo Save As Template abre. Você pode selecionar o site em que deseja salvar
o template. Para esse projeto, você deve salvá-lo dentro do site Yoga Sangha.
O Dreamweaver nomeia automaticamente o template como teacher – o nome do seu

arquivo. Para este exercício, utilize esse nome automático. Ele descreve exatamente o pro-
pósito do template.
Se quiser alterar o nome do template, digite o novo nome no campo de texto

Save As. O nome do template é somente para sua referência e para sua equipe – ele
não será conhecido pelos visitantes do site. Tente utilizar nomes para os templates
que sejam os mais descritivos possíveis.
Essa página agora foi salva como um template e você pode utilizá-la para construir outras
páginas mais adiante nesta lição.
3. Clique em Save para fechar a caixa de diálogo. Clique em Yes quando Dreamwea-
ver exibe uma caixa de alerta perguntando “Update Links?” (Atualizar links?).
Atualizar os links permitirá que o Dreamweaver mantenha os caminhos dos links e das
imagens corretamente.
Seu template foi adicionado ao seu site e foi salvo na pasta Templates com uma exten-
são .dwt. O Dreamweaver adiciona automaticamente a pasta Templates se ainda não exis-
tir. Talvez você precise clicar no botão Refresh no painel Files para ver a pasta Templates.
430 LIÇÃO 13
O arquivo em que você está trabalhando agora é teacher.dwt, e a parte superior da ja-
nela Document exibe <<Template>> (teacher.dwt).
4. Clique na guia Assets no grupo de painel Files e clique no botão Templates.
Como você tem uma template aberta, teacher.dwt, o painel Assets pode abrir
a categoria de Templates automaticamente.
O painel Assets está agora aberto para a categoria de Templates. O template que você aca-
bou de criar aparece na lista, e os templates futuros criados nesse site também aparecerão
aqui. Quando um template é selecionado na lista, uma parte desse documento aparece na
área de visualização na parte superior do painel.
Botão Templates
Em vez de salvar uma página como um template que já foi criado, como acaba
de fazer, você também pode criar um novo template em branco clicando no ícone New
Template na parte inferior do painel Templates Assets. Um novo template sem título é
adicionado à lista de templates no painel. Enquanto esse template ainda está selecio-
nado, insira um nome para ele. Você também pode criar um template a partir do zero
escolhendo Template Page na lista Category na parte General da caixa de diálogo New
Document. A guia Templates da caixa de diálogo New Document serve para criar pági-
nas com base nos templates existentes – ela não permite criar novos templates.

Adicionando áreas editáveis a um template
O segundo passo para criar um template é definir as áreas da página que devem ser editá-
veis nos documentos baseados no template. (Áreas editáveis são partes do documento que
podem ser modificadas nas páginas que estão baseadas no template.)
De modo geral, todas as áreas de um template estão inicialmente bloqueadas. Se quiser
alterar as informações nas páginas que utilizam o template, você precisará criar áreas ou
regiões editáveis. Em muitos Web sites, com freqüência, essas regiões são as áreas de con-
teúdo. Tudo no template que não esteja explicitamente definido como editável está blo-
queado nas páginas que estão baseadas no template. Você pode fazer alterações tanto nas
áreas editáveis como nas bloqueadas enquanto edita o template original; mas em uma pá-
gina construída a partir de um template, é possível fazer alterações somente nas regiões
editáveis.
1. Em teacher.dwt, clique no botão de visualização Split na barra de ferramentas Do-

cument para mostrar as visualizações Code e Design simultaneamente. Selecione o
texto teacher’s full name na parte superior da área de biografia dos professores; exa-
mine o código a fim de assegurar que nem a tag <h2 class="tagline-style"> de
abertura nem a tag </h2> de fechamento são incluídas na seleção.
Essa seção da página precisa ser editável para que você possa alterar o conteúdo nas pá-
ginas subseqüentes. Nessa instância você só está selecionando o conteúdo dentro da tag
de bloco <h2>; portanto, qualquer página criada com esse template permitirá alterar
apenas o texto – ela não permitirá a adição de quaisquer tags de bloco dentro dessa re-
gião editável.
432 LIÇÃO 13
Se o arquivo <<Template >> (teacher.dwt) ainda não estiver aberto, abra-o a
partir da categoria Template do painel Assets. O template que você acabou de criar no
exercício anterior – teacher.dwt – aparece na lista como teacher. No painel Assets, dê
um clique duplo no nome do template para abri-lo. Você também pode selecionar o
nome na lista do painel Assets e clicar em Edit na parte inferior do painel.
2. No menu Templates na categoria Common da barra Insert, escolha o ícone Edita-

ble Region.
A caixa de diálogo New Editable Region é aberta. O campo de texto Name contém inicial-
mente um nome genérico gerado pelo Dreamweaver – o número no final do nome é auto-
maticamente incrementado e talvez varie daquele mostrado no exemplo a seguir.
3. Digite teacherName no campo de texto Name e clique em OK. Clique no botão De-
sign na barra de ferramentas Document para voltar à visualização Design.
Não utilize nenhum caractere especial (aspas, colchetes e outros) para os nomes da região.
Torne cada nome único – você não pode utilizar o mesmo nome de região mais de uma
vez no mesmo template.

Na janela Document, a área editável aparece delineada em azul com uma guia na parte
superior exibindo o nome da região. O espaço extra que aparece entre a borda superior da
tabela e a imagem marcadora de lugar é devido à guia da região editável. Nenhum espaço
extra foi na verdade inserido.
Se você não vir os nomes da região e os contornos, escolha View > Visual Aids > Invisi-
ble Elements.
Uma nova região editável é criada dentro do cabeçalho. Você verá o mesmo contorno
azul com uma guia na parte superior exibindo o nome da região editável e a palavra “des-
cription” posicionada dentro da área editável. Mais tarde, ao aplicar esse template a um
documento, você irá selecionar o texto dentro dessa área e substituí-lo por texto.
4. Escolha File > Salve para salvar o template. Clique em OK na mensagem de alerta.
Se tiver quaisquer regiões editáveis que estão dentro de uma tag block, você receberá um
alerta toda vez que salvar o template.
434 LIÇÃO 13
5. Utilize o seletor de tag para selecionar a célula de tabela que contém o marcador
de lugar da imagem teacherImage e o texto bio. Clique no botão Editable Region no
menu Templates na barra Insert, nomeie a região teacherBio e clique em OK.
Para selecionar a célula da tabela utilizando o seletor de tag, clique em tea-

cherImage na janela Document e então selecione o <td> que imediatamente o prece-
de no seletor de tag.
Os nomes de todas as regiões editáveis criadas são listados na parte inferior do menu Mo-
dify > Templates. Uma marca de seleção aparece ao lado de uma região editável nessa lista
se ela estiver selecionada, se o ponto de inserção estiver nessa região ou se um item nessa
região estiver selecionado.
6. Selecione a célula da tabela que contém o texto do copyright. Clique no botão Edi-
table Region no menu Templates na barra Insert, nomeie a região copyright e clique
em OK.
Quaisquer elementos que precisar mudar nos documentos baseados no template, inclu-
indo links, devem estar em uma região editável.
7. Salve o arquivo. Clique em OK na mensagem de alerta sobre a região editável den-

tro de uma tag <h2>.
Os nomes de região aparecem nas guias acima de todas as áreas delineadas para ajudá-lo a
identificar quais áreas você especificou como editáveis.

Muitas das ferramentas e recursos para criar e editar os templates originais só
estarão disponíveis na visualização Design, em que você tem trabalhado. Alguns con-
troles de template não estão disponíveis na visualização Code, com a qual você traba-
lhará na Lição 16. Se estiver trabalhando na visualização Code e achar que não conse-
gue realizar certas operações no template, mude para a visualização Design.
Removendo regiões editáveis

Você especificou certas áreas do template como “editáveis”. Também é possível blo-
queá-las novamente. Os elementos nas áreas bloqueadas não podem ser alterados em
uma página que foi criada a partir do template. Quaisquer elementos localizados nas áreas
bloqueadas devem ser editados no arquivo do template original.
1. No documento teacher.dwt, clique na guia da região de direitos autorais (copy-

right) na janela Document para selecioná-la.
436 LIÇÃO 13
O Tag Selector na parte inferior da janela Document exibe a marcação de template
<mmtemplate:editable>. O Dreamweaver destaca a tag no seletor de tag a fim de indicar
que ela está selecionado.
Se o arquivo de template que você quer editar não estiver aberto, dê um clique
duplo no nome do template desejado na categoria Templates do painel Assets para
abri-lo. Você pode utilizar o painel Assets para mover, renomear e excluir arquivos de
template. Tenha atenção ao excluir arquivos de template porque eles não podem ser
recriados de maneira tão fácil quanto os itens de biblioteca.
2. Escolha Modify > Templates > Remove Template Markup.

A parte delineada que especifica a célula de direitos autorais como editável desaparece, e
essa parte do template agora está bloqueada e não pode ser mais alterada nos arquivos ba-
seados nesse template.
Se remover uma região editável de um template que já tinha páginas subse-

qüentes construídas a partir dele, todas as páginas modificadas anteriormente na re-
gião editável serão alteradas quando você atualizá-las depois de salvar o template (en-
sinaremos a atualizar páginas mais adiante nesta lição). Quaisquer modificações na re-
gião são excluídas nessas páginas porque a área da região anteriormente editável
muda para refletir a área à medida que aparece no template. Você tem a opção de sele-
cionar uma região em que o conteúdo localizado na área sendo removida será posicio-
nado.
Criando conteúdo opcional

O recurso de conteúdo opcional permite definir se o conteúdo permanece oculto ou é exi-
bido nas páginas baseadas no template. Esse recurso permite configurar valores condicio-
nais ou específicos para exibição de conteúdo. É possível controlar esses valores por meio
de parâmetros e expressões condicionais de template.
Você pode criar uma região opcional de conteúdo para que ela utilize certos elementos
em algumas páginas baseadas em templates, mas não em outras. A capacidade de permitir
que elementos específicos sejam incluídos individualmente dá ao template muita flexibi-
lidade. Algumas páginas, por exemplo, talvez precisem de ilustrações e descrições. Você
pode criar uma tabela que controla o layout dessas ilustrações e descrições e então defi-
ni-la como uma região de conteúdo opcional. Documentos baseados no template forne-
cerão a opção de inserir ou não essas regiões.

1. No documento teacher.dwt, utilize o seletor de tag para selecionar o <td> da célula
da tabela que contém teacherName Certifications e a tabela aninhada.
A seleção fica cinza, indicando que foi selecionada. Essa seção será opcional nas páginas
que utilizam o template teacher.
2. Clique no botão Optional Region no menu Templates na barra Insert.
438 LIÇÃO 13
A caixa de diálogo New Optional Region é aberta com a guia Basic ativa.
3. Na guia Basic da caixa de diálogo Basic, desmarque a caixa Show By Default. Cli-
que em OK para fechar a caixa de diálogo.
Ao criar seu próprio Web site, se o conteúdo que você definir como opcional for utilizado
na maioria das suas páginas, deixe essa caixa marcada. Nesta lição, entretanto, somente
uma das páginas utilizará esse conteúdo; assim é mais fácil criar a página subseqüente se
esse conteúdo estiver oculto por padrão.
Neste exemplo, você utilizará o nome padrão para a região opcional.
Se você já criou uma região de conteúdo opcional em outra parte na página, a

guia Advanced da caixa de diálogo Optional Content permite vincular essa região de
conteúdo opcional existente à nova que você está criando. A guia Advanced também
permite criar Template Expressions.

Uma região opcional não é editável. Você deve definir a área da região opcional que
deve ser editável. Isso só permite definir uma parte da área como editável, o que você fará
a seguir.
4. Selecione o texto teacherName Certifications. Escolha Editable Region no menu

Templates na barra Insert, nomeie a região teacherNameCert e clique em OK.
Ao criar regiões opcionais, todo o conteúdo dentro dessas regiões será bloqueado até você
definir uma ou mais regiões editáveis.
Inserindo regiões repetitivas

Uma região repetitiva é uma área na página que precisa ser duplicada uma ou mais vezes.
As regiões repetitivas podem ser bastante úteis quando você precisa ter múltiplas entra-
das, possivelmente um número variado, posicionado nas páginas construídas a partir de
templates. Por exemplo, se um template for criado para receitas de alimentos e cada pági-
na baseada no template abranger uma receita diferente, a lista de ingredientes irá variar
em cada página. Se os itens de lista forem definidos como regiões repetitivas, você pode
então adicionar o número necessário dessas regiões para cada página individual. As re-
giões repetitivas permitem ter um controle específico sobre a aparência de múltiplas en-
tradas. Neste exercício, a tabela que lista as manifestações de clientes utilizará regiões re-
petitivas.
1. No documento teacher.dwt, utilize o seletor de tag para selecionar <tr> da linha da

tabela que contém o texto marcador de lugar para certificações de professores.
Contornos aparecem em torno da linha para indicar que ela está selecionada.
440 LIÇÃO 13
2. Escolha Repeating Region no menu Templates na barra Insert.
A caixa de diálogo New Repeating Region se abre.
3. Nomeie a região certs e então clique em OK.
A linha selecionada torna-se contornada por uma cor azul clara, e uma guia na parte supe-
rior do contorno exibe o nome “certs”. A cor de destaque para regiões repetitivas é a mes-
ma para regiões opcionais e é mais clara que a cor para regiões editáveis.

Ao desenvolver seus próprios Web sites, você talvez queira alterar a cor das re-
giões destacadas se elas não aparecerem contra as cores utilizadas na sua página.
Escolha Dreamweaver > Preferences (Macintosh) ou Edit >> Preferences (Windows)
e selecione a categoria Highlighting. Clique na caixa Editable Regions Color e selecio-
ne uma cor de destaque ou insira o valor hexadecimal diretamente no campo de texto.
Faça o mesmo conforme necessário para as outras cores de destaque. A cor da região
editável aparece no próprio template e em documentos baseados no template; a cor
da região bloqueada aparece somente nos documentos baseados no template. As co-
res padrão são azul (#66CCCC) para regiões editáveis e amarelo claro (#FFFFCC) para
regiões bloqueadas. Você pode clicar nas caixas Show para ativar ou desativar a exibi-
ção dessas cores na janela Document. Essas cores de destaque são mostradas na ja-
nela Document somente se a opção para visualizar elementos invisíveis estiver ativa.
Se os elementos invisíveis, como o highlighting, nas regiões do template não aparece-
rem na janela Document, escolha View > Visual Aids > Invisible Elements e verifique
se as caixas estão marcadas para os elementos de auxílio visual do template na cate-
goria Highlighting em preferências. Se páginas baseadas em um template estiverem
sendo construídas por várias pessoas na sua equipe, lembre-se de que outros mem-
bros da equipe poderão utilizar as configurações de cores padrão.
4. Selecione o <td> no seletor de tag para a célula da tabela que contém a data mar-
cadora de lugar de certificação: xx/xx/xxxx. Escolha Editable Region do menu Templa-
tes na barra Insert e digite certdate para o nome da região.
Múltiplas células de tabela não podem ser especificadas como uma única região editável.
Se precisar fazer com que diversas células sejam editáveis, você deve tornar a tabela inteira
editável ou dividi-la em várias regiões editáveis. Se tentar selecionar múltiplas células den-
tro de uma tabela e torná-las editáveis, a tabela inteira torna-se uma região editável.
5. Selecione o <td> no seletor de tag para a célula da tabela que contém o nome do
marcador de lugar certification. Clique no botão Editable Region na barra Insert e digi-
te certName para o nome da região.
Além de clicar na tag <td> correspondente no seletor de tag, você também

pode selecionar facilmente uma célula posicionando o ponteiro na célula e utilizando o
atalho pelo teclado CMD + clique (Macintosh) ou Ctrl+clique (Windows).
Para fazer alterações dentro de uma região repetitiva em quaisquer documentos subse-
qüentes baseados no template teacher, a região repetitiva deve conter o número necessá-
rio de regiões editáveis. As regiões repetitivas são bloqueadas por padrão; você deve defi-
nir quais áreas dentro da região repetitiva precisam se tornar editáveis.
442 LIÇÃO 13
Se for difícil ver o contorno ou a guia que indica uma região editável, você pode-
rá confirmar que a célula que tornou editável é de fato uma região editável clicando
dentro da célula e examinando o seletor de tag. A tag <td> destacada corresponde à
célula em que você clicou. Depois dessa tag <td> há a marcação do template <mmtem-
plate:editable>.
Seu documento deve se parecer com o exemplo mostrado aqui.
Você deve salvar e fechar o arquivo teacher.dwt.

Construindo páginas com base em um template
O próximo passo para criar um site que utiliza templates é criar as páginas reais que estão
baseadas no template original.
Neste exercício, você criará novas páginas que utilizam o template teacher criado nos
exercícios anteriores desta lição. Essas páginas herdarão o conteúdo do template original.
As únicas partes da página que podem ser alteradas nessas novas páginas são aquelas que
você definiu como editáveis no template.
As imagens necessárias para construir as páginas estão localizadas na pasta Les-
son_13_Templates/Images.
1. Escolha File > New e selecione a guia Templates na caixa de diálogo New Docu-
ment.
A caixa de diálogo New Document se abre. Na parte Templates da caixa, aparece uma lista
dos sites que você definiu e uma lista de todos os templates criados para o site escolhido.
444 LIÇÃO 13
2. Escolha teacher na lista de templates para o site Yoga Sangha, deixe a caixa Upda-
te page when template changes marcada e então clique em Create.
Uma nova página é criada a partir do template. Embora esse documento exiba o conteúdo
herdado, ele ainda precisa ser salvo.
3. Salve o arquivo como Katchie.html na pasta Lesson_13_Templates/Teachers. Alte-

re o título da página para Yoga Sangha: Teachers: Katchie Ananda.
Na nova página, você vê a cor de destaque das regiões bloqueadas (a cor padrão é amarelo
claro) contornando a página. Você também vê o nome do template em uma guia da mes-
ma cor no canto direito superior da janela Document.
O Dreamweaver cria automaticamente uma região editável chamada doctitle

em torno do título do documento que permite alterar o nome de todas as páginas cria-
das a partir do template.
O ponteiro muda para um círculo com uma linha atravessada quando você rola sobre ele
ou tenta clicar em qualquer das regiões bloqueadas, o que indica que essas áreas não são
editáveis.
4. Substitua o texto marcador de lugar do nome completo do professor por Katchie

Ananda.
O texto do cabeçalho marcador de lugar agora foi substituído pelo conteúdo real nesse
documento baseado em template.
5. Abra o arquivo katchie.txt da Lesson_13_Templates/Text. Selecione e copie todo o

texto e cole-o sobre o texto marcador de lugar para a biografia do professor.
O texto e a imagem aparecem dentro de uma borda com contornos. A cor da borda é a cor
das regiões editáveis. Uma guia no canto esquerdo superior da região exibe o nome da re-
gião.
Formatar texto às vezes faz com que a tabela se expanda. Se alterar para um es-
tilo que utiliza um texto com uma dimensão menor, você não será capaz de fazer com
que a tabela volte ao tamanho adequado clicando fora dela, como faria em um documen-
to normal. Como esse documento é baseado em um template, é preciso fechar e reabrir
o arquivo de tabelas para ajustá-lo ao tamanho adequado para caber o seu conteúdo.
Você não poderá alterar o tamanho do texto nesse documento, a menos que crie um
novo estilo, porque a folha de estilo interna que define o texto não é editável.

6. Selecione a imagem marcadora de lugar e utilize o inspetor Property para mudar o
Src para a imagem Katchie_sm.jpg na pasta Lesson_13_Templates/Images.
Sua página agora deve estar parecida com a figura a seguir.
Você pode salvar o arquivo Katchie.html.
7. Repita os Passos 1 a 6 para criar dois outros arquivos baseados em um template,

salve-os como Hillman.html e Lyon.html na Lesson_13_Templates/Teachers. Substi-
tua o texto marcador de lugar pelo texto dos arquivos hillman.txt e lyon.txt na pasta
Text e substitua a imagem marcadora de lugar pelas imagens jayne.jpg e darcy.jpg da
pasta Images nas respectivas páginas.
Clicar na opção More em Create New Column na Start Page é uma maneira rá-
pida de abrir a caixa de diálogo New Document.
O título para o documento Jayne Hillman deve ser Yoga Sangha Teacher: Jayne Hillman.
O título para o documento Darcy Lyon deve ser Yoga Sangha Teacher: Darcy Lyon.
Agora, você criou três páginas a partir do template teacher. Feche os arquivos Hill-
man.html e Lyon.html. Deixe o arquivo Katchie.html aberto para o próximo exercício.
446 LIÇÃO 13
Controlando conteúdo opcional
Ao criar o template teacher no começo desta lição, você definiu a tabela para uma lista de
certificações como uma região opcional que permanece oculta por padrão nas páginas ba-
seadas nesse template. Ao criar e editar novas páginas utilizando um template, você pode
mostrar ou ocultar quaisquer áreas de conteúdo opcionais que foram criadas no template
original. Neste exercício, você irá se preparar para desenvolver o conteúdo opcional para
o perfil Katchie Ananda mediante a exibição da região.
1. Abra o documento Katchie.html e escolha Modify > Template Properties.
A opção Template Properties está localizada próximo à parte superior do menu

Modify, ao lado da opção Page Properties.
A caixa de diálogo Template Properties é exibida.
2. Selecione OptionalRegion1 da lista de nomes e marque a caixa de seleção Show

OptionalRegion1.
O valor listado para OptionalRegion1 na lista de valores muda de false (oculto) para true
(visível).
3. Clique em OK para fechar a caixa de diálogo Template Properties.

Você retorna ao documento, e a tabela que criou na região opcional no template teacher
agora é exibida no documento Katchie.html. Mantenha esse arquivo aberto para o próxi-
mo exercício.

Adicionando entradas repetitivas
A tabela para teacherName Certifications, que agora é exibida no documento Kat-
chie.htlm, contém a região criada anteriormente no template teacher. Neste exercício,
você utilizará a região repetitiva para inserir entradas para as duas certificações.
1. Na região editável certDate no documento Katchie.html localizado na região opcio-

nal agora visível, digite 05/15/2000; e digite Sample Yoga Certification na região editá-
vel cert.
As regiões editáveis que você posicionou em cada célula permitem inserir conteúdo nas
regiões repetitivas.
Você pode utilizar a tecla Tab para pular de uma região para outra nessa linha,
da mesma maneira como faria em uma tabela para mover-se de uma célula para outra.
No entanto, não é possível utilizar a tecla Tab para criar uma nova linha. Para inserir
uma nova linha, siga o próximo passo.
2. Na guia Repeat: certs, clique no botão de sinal de adição (+).

Uma duplicata da região repetitiva é adicionada abaixo da linha em que você digitou as
informações para Sample Yoga Certification.
Os quatro botões na guia de região repetitiva permitem adicionar, excluir e alterar a or-
dem das entradas nessa região.
448 LIÇÃO 13
3. Na região editável certDate na linha recém-adicionada digite 01/20/1998; e digite
Sample Yoga 200 Hour Certification na região editável cert.
Você agora tem duas entradas das informações de certificação nessa tabela.
4. Posicione o ponto de inserção na célula para Sample Yoga 200 Hour Certification.
Utilize o botão da seta para cima na guia da região repetitiva a fim de mover essa en-
trada até a parte superior da lista.
Os botões de seta permitem mover as entradas para cima ou para baixo na região.
5. Selecione o texto teacherName Certifications acima das certificações e altere o tex-

to para Katchie’s Certifications. Salve o arquivo.
Salve e feche o arquivo Katchie.html.

Modificando um template
O uso de um template facilita bastante a construção de múltiplas páginas utilizando o de-
sign do template original. A pessoa que cria a página pode adicionar apenas o conteúdo
que muda entre uma página e outra, mas não pode fazer alterações em qualquer uma das
áreas bloqueadas.
A economia real de tempo aparece quando você precisa fazer alterações em todas as pá-
ginas que foram construídas com o template. Sem template, você teria de editar cada pági-
na. Com o uso de um template, você simplesmente edita o arquivo original do template
para atualizar todas as páginas construídas com o template.
1. Na categoria Templates do painel Assets, dê um clique duplo no template teacher.

O template original que você criou anteriormente nesta lição se abre.
2. Posicione o ponto de inserção dentro do texto de navegação do quadro Katchie

Ananda e utilize o inspetor Property para alterar o link para Katchie.html. Altere o link
de Jayne Hillman para Hillman.html e o link de Darcy Lyon para Lyon.html. Salve o
template.
Clique em OK para aceitar a mensagem de alerta sobre a região editável dentro de uma tag
de bloco. Então, como você fez alterações no template, a caixa de diálogo Update Templa-
te Files se abre, exibindo uma lista de todos os arquivos que foram construídos a partir
desse template.
Ao criar seus próprios Web sites, você pode escolher Don’t Update se quiser.
Mais tarde, é possível atualizar as páginas escolhendo Modify > Templates > Update
Pages.
450 LIÇÃO 13
3. Clique em Update para modificar todas as páginas com as alterações que acabou
de fazer. Feche a caixa de diálogo Update Pages depois de examinar seu log de atuali-
zação.
Os documentos Katchie.html, Hillman.html e Lyon.html criados anteriormente a par-

tir do template são atualizados de acordo com os novos links. A capacidade de atualizar
todas as páginas associadas a um template pode ser muito útil. Se tiver uma seção de nave-
gação com links do template (como as páginas Yoga Sangha em que está trabalhando),
você poderá configurar esses links no template. Se os links mudarem, você simplesmente
altera o template, e todas as páginas projetadas com o template serão atualizadas.
Você pode separar uma página de um template escolhendo Modify > Templa-
tes > Detach from Template. Uma página separada é completamente editável, mas
ela não é mais atualizada se o template mudar. Você também pode desmarcar a caixa
de seleção Update page when template changes na caixa de diálogo New Document
para criar uma cópia da página, completamente independente do template. Esse pro-
cedimento cria uma página que funciona quase da mesma maneira que papel de car-
tas e não tem nenhuma marcação de template. As páginas criadas dessa maneira não
são atualizadas se o template mudar.
4. Abra o arquivo Katchie.html e visualize-o no navegador.

Os links do quadro nessa página agora devem apontar para as páginas corresponden-
tes, como acontecerá com aqueles nas outras duas páginas criadas a partir desse template.
Se quiser criar conteúdo controlado pelas Cascading Style Sheets (CSS), estu-
dadas na Lição 4, você poderá utilizar uma folha de estilo externa para tornar possível
atualizar a folha de estilo sem atualizar o template.

Criando atributos de tag editáveis
Os atributos de tag editáveis permitem definir as tags que podem ser alteradas nos docu-
mentos subseqüentes com base no template original.
1. No template teacher, teacher.dwt, selecione a tabela que contém a imagem teacher

e bio.
Clique na borda externa dessa tabela para selecioná-la.
A janela Document contorna a tabela para mostrar que ela está selecionada.
2. Escolha Modify > Templates > Make Attribute Editable.

A caixa de diálogo Editable Tag Attributes é aberta.
3. Na caixa de diálogo Editable Tag de Tag, clique no Add botão e digite

BGCOLOR como o Attribute. Clique em OK e observe se o atributo está adicionado
no menu Attribute.
452 LIÇÃO 13
O atributo BGCOLOR não aparece nesse menu porque uma cor de fundo não foi definida
para a tabela. Para um atributo aparecer, é preciso configurá-lo inicialmente. Os outros
atributos listados são WIDTH, BORDER, CELLPADDING e CELLSPACING – todas as
propriedades da tabela que foram definidas.
Nomes dos atributos devem ser digitados em letras maiúsculas. Para que você
mesmo adicione um atributo, será necessário conhecimento sobre tags de HTML e
seus atributos. Você pode utilizar o painel Reference para aprender mais sobre tags e
seus atributos. Por exemplo, se selecionar TD no menu Tag no painel Reference, você
poderá aprender sobre esses atributos do tag clicando no menu Description e selecio-
nando um dos atributos de tag, como bgcolor. Você aprenderá mais sobre HTML e so-
bre o painel Reference na Lição 16.
4. Clique na caixa de seleção Make attribute editable. Configure o texto Label como
bgcolor; escolha Color para o Type, FFFFFF para Default e clique em OK. Salve o tem-
plate teacher, clique em Update, feche a caixa de diálogo Update Pages e feche o ar-
quivo do template teacher.dwt.

Quando você clica na caixa de seleção Make attribute editable, o valor do atributo é inseri-
do na tag table tal como é definido no template.
A caixa de diálogo Editable Tag Attributes fecha. A cor de fundo da tabela agora é um
atributo de tag editável. A template teacher.dwt talvez não seja exibida como o esperado se
você visualizá-la no navegador depois de tornar o atributo bgcolor editável. Para que o
Dreamweaver crie a marcação de template necessária que permite a ele controlar todos os
documentos baseados no template, o código exibido no campo de texto Bgcolor é (bgco-
lor). Esse tipo de marcação é necessário para que o template funcione e não causa irregu-
laridades de visualização nos documentos finais que estão baseados no template.
Para rebloquear uma tag que foi definida anteriormente como editável, você
deve selecioná-la e escolher Modify > Templates > Make Attribute Editable. Selecione
o atributo que deseja bloquear no menu drop-down Attribute e desmarque a caixa de
seleção Make attribute editable.
Modificando um atributo de tag editável

A capacidade de criar atributos de tag editáveis aumenta a possibilidade de criar templa-
tes. Você pode potencialmente tornar uma ampla variedade de atributos de tag editáveis,
o que lhe dá muito mais controle sobre os documentos individuais criados a partir do
template original. Atributos como cor de fundo, alinhamento e tamanho podem aumen-
tar a utilidade e flexibilidade dos seus documentos baseados em um template.
1. Abra o documento Katchie.html e escolha Modify > Template Properties.

A caixa de diálogo Template Properties é exibida e o atributo de tag bgcolor que você tor-
nou editável no exercício anterior agora aparece na lista Name. Você pode ver na coluna
Value que a configuração padrão para esse atributo é #FFFFFE.
2. Selecione o atributo bgcolor.
454 LIÇÃO 13
As opções para editar a tag aparecem abaixo da lista. Nesse caso, é fornecido um campo de
texto em que você pode alterar a cor.
3. Substitua #FFFFFF no campo de texto bgcolor por #FFFFCC e então clique em OK

para fechar a caixa de diálogo.
A cor da tabela opcional agora é alterada para amarelo claro.
Você pode salvar e fechar o arquivo Katchie.html.
Entender de HMTL ajuda você a tirar vantagem dos atributos de tag editáveis.
Se você não souber HTML, o painel Reference ajuda a entender as diferentes tags e as
funções dos seus atributos. Definir o atributo antes de optar por torná-lo editável tam-
bém ajuda. Se você conhece HTML, poderá utilizar um recurso de template muito po-
deroso.
Criando templates aninhados

Um template aninhado é aquele que herda um layout mestre de um template básico. Você
pode criar um template básico com o conteúdo principal que deve aparecer em todas pá-
ginas e então utilizar um template aninhado para criar conteúdo ou um estilo de layout
específico para uma certa seção no seu site. Se tiver uma seção adicional – em que você
quer utilizar um layout diferente e, ao mesmo tempo, manter os componentes principais
do site como navegação principal, rodapé e título – você poderá criar um outro template
aninhado que também está baseado no template principal. Os templates aninhados são
mais úteis para criar uma série de estilos de página com variações no layout e design que
derive o conteúdo comum a partir de um template principal.

Normalmente, o processo de criar templates aninhados começa com o planejamento.
Você precisará primeiro planejar a aparência e o comportamento do site e criar um tem-
plate pai, para depois criar os templates aninhados de cada uma das seções do site e, por
fim, as páginas do site a partir do template aninhado. Em geral, com templates aninhados,
o template pai nunca é utilizado para criar páginas diretamente – ele é utilizado para defi-
nir um container para o design do site com os templates aninhados atuando no funciona-
mento do site.
1. Abra a página ys-layout.html na pasta Lesson_13_Templates. Salve esse arquivo

como um template e mantenha o nome padrão de ys-layout. Clique em Yes para
Update Links.
Essa página contém a aparência e o comportamento geral do site Yoga Sangha. Todas as
páginas do site (exceto as aquelas baseadas em frame) podem ser criadas a partir do design
geral desse site. Observe que ele tem duas áreas principais de conteúdo: mainContent e
rightContent. Você irá criar regiões editáveis nessas áreas de modo que templates filhos
possam definir uma aparência e um comportamento personalizados para cada seção do
Web site.
2. Posicione o ponto de inserção dentro da área principal de conteúdo. Marque a área

inteira selecionando a alça de div ou utilizando o seletor de tag para selecionar a tag
<div#mainContent>. Escolha Insert > Template Objects > Editable Region. Nomeie a
região mainContent e clique em OK.
O div estará ativo quando o ponto de inserção estiver dentro da área, mas não
estará selecionado. Os pequenos quadrados sólidos nos cantos e pontos intermediá-
rios indicam que o div está selecionado.
Essa área é aquela do conteúdo principal para todas as páginas filhas – isto é, páginas que
são criadas a partir desse template.
A guia e os auxílios visuais dessa região editável não aparecerão em torno de divs – mas
você pode verificar se a região tornou-se editável examinando o inspetor de tag, que deve
exibir <mmtemplate.editable> <div#mainContent>.
456 LIÇÃO 13
3. Repita o Passo 2 para criar uma região editável fora da área rightContent. Nomeie
a nova região editável rightContent. Salve e feche o arquivo.
Agora que você criou o template Yoga Sangha original, está pronto para criar o template
aninhado nos passos restantes.
4. Escolha File > New. Na guia Templates, localize o template ys-layout e clique em
Create.
Uma nova página utilizando o template ys-layout é criada. Você utilizará o template
ys-layout como o template básico no próximo passo.
5. Escolha File > Save As Template, atribua ao template aninhado que você está cri-
ando o nome de ys-teacher e clique em Save.
Salvando como template o documento criado a partir do template original, você cria
um template aninhado. Em seguida, você pode editá-lo. O Dreamweaver adiciona a ex-
tensão .dwt automaticamente; portanto, não é necessário especificá-la.
Cada página na seção Teachers do site pode ser criada utilizando o template ys-tea-
cher. Você pode criar templates filhos para cada seção do site a partir do template pai
ys-layout.
É necessário criar regiões editáveis no template pai para fazer modificações no templa-
te filho; é preciso criar regiões editáveis no template filho para editar áreas nas páginas
subseqüentes criadas a partir do template aninhado.

Criou um template a partir de uma página existente salvando a página como tem-
plate
Adicionou áreas editáveis ao template para permitir que alterações sejam feitas nas
páginas construídas a partir desse template
Removeu áreas editáveis do template para evitar que alterações sejam feitas nas pá-
ginas construídas a partir desse template
Criou áreas de conteúdo opcionais que podem ser exibidas ou ocultadas em páginas
subseqüentes
Inseriu regiões repetitivas que permitem que páginas baseadas no template tenham
um mínimo ou máximo de entradas conforme necessário
Alterou as cores de destaque do template tanto para regiões editáveis como blo-
queadas
Construiu múltiplas páginas baseadas no template para criar páginas com o mesmo
layout
Fez alterações no template e atualizou múltiplas páginas dentro do site para refletir
essas alterações
Criou e utilizou atributos de tag editáveis para obter maior controle sobre elemen-
tos específicos
Aninhou um template para criar uma variação no layout principal que ainda é con-
trolada pelo template original
458 LIÇÃO 13
Gerenciando
14 seu site
Desenvolver um Web site geralmente começa com a fase de planejamento durante a
qual você concebe a idéia de um site, desenvolve a estrutura de arquivos do site e a es-
trutura navegacional, reúne o conteúdo e projeta a aparência e o comportamento do
site. Essas fases de preparação normalmente ocorrem antes de começar a trabalhar
no Macromedia Dreamweaver – para o site de projeto criado neste livro, Yoga Sangha,
essas fases já foram feitas para você, como descrito na Lição 1. A fase de planejamen-
to é seguida pela fase de produção, na qual você utiliza o Dreamweaver para construir
e testar as páginas de um site real, como aprendeu a fazer nas Lições 2 a 13.
O trabalho realizado em uma Web site não termina ao completar a fase de produção.
Depois da produção, o Web site precisa ser disponibilizado ao público – isso é feito por
meio de um procedimento conhecido como publicação (launching), em que o site é pu-
blicado e promovido depois de carregado (uploaded) em um servidor. Além disso, mui-

trabalhará com o painel
Files para gerenciar e
conectar arquivos a um site
remoto.
GERENCIANDO SEU SITE 459

tos Web sites precisam evoluir constantemente, junto com as necessidades e os de-
sejos de mudança do seu público, para permanecer eficiente e continuar a atrair novos
e antigos visitantes. O processo em progresso de modificar, atualizar e adicionar novo
conteúdo e constantemente otimizar um Web site é conhecido como manutenção de
site. A transição da fase de produção para a fase de manutenção de um Web site en-
volve configurar o site em um servidor, testar o site completamente, passar pelo pro-
cesso de publicação do site e preparar o gerenciamento e a manutenção constantes.
O gerenciamento de site, que é uma parte vital do desenvolvimento Web, é importan-

te para a utilização continuada de um site. O Dreamweaver fornece extensas ferra-
mentas de gerenciamento que permitem atualizar e controlar facilmente seu Web site,
manter arquivos de site localizados na pasta-raiz local, bem como no servidor remoto.
O Dreamweaver utiliza as definições de site para monitorar seus arquivos, permitindo
que atualizações ocorram automaticamente quando você utiliza as ferramentas de site
para realizar as tarefas de manutenção incluindo mover, adicionar e excluir arquivos e
pastas. O gerenciamento do fluxo de trabalho de uma equipe pode ser feito com diver-
sas ferramentas projetadas para coordenar o trabalho em equipe e os esforços colabo-
rativos. Por meio do Dreamweaver, você pode gerenciar múltiplos Web sites, importar
e exportar configurações de site e até realizar transferências rápidas criando conexões
com os servidores sem ter de passar pelo processo da configuração de um site.
Pode haver sobreposição entre as fases de planejamento, produção e manu-

tenção; as especificidades do que é feito em cada fase pode variar de um site para ou-
tro. Por exemplo, os testes devem ocorrer regularmente antes e depois da publicação
(testes básicos como visualizar as páginas no navegador foram abordados na Lição 1;
testes mais detalhados serão abordados na Lição 15).

Aprender sobre os propósitos e as utilizações do painel Files
Realizar funções de gerenciamento de site dentro do painel Files
Entender a diferença entre um site local e um site remoto
Configurar uma conexão a um site remoto
Copiar arquivos para e de um site remoto
Ativar compatibilidade com o Contribute
Administrar um site com o Contribute
460 LIÇÃO 14
Tempo aproximado
Arquivos da lição
Arquivos de mídia:
Lesson_14_Sites/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_14_Sites/…(todos os arquivos)
Utilizando o painel Files

O painel Files, que exibe a estrutura de arquivos e pastas do seu site, pode ser visualizado
como um painel encaixado ou em um modo expandido como uma janela maior. Você
pode utilizar o painel Files nas visualizações recolhidas ou expandidas para realizar uma
ampla variedade de tarefas de manutenção como adicionar, excluir, renomear e mover
arquivos e pastas. Fazer toda manutenção de arquivos dentro de um site do Dreamweaver
assegura que os caminhos a links, imagens e outros elementos sejam atualizados automa-
ticamente se necessário – o Dreamweaver monitora suas alterações e atualiza seus arqui-
vos com base em quaisquer alterações que você faz dentro de um site definido. Inversa-
mente, se fizer alterações no arquivo ou na pasta no Finder (Macintosh), no Meu Compu-
tador (Windows) ou no Gerenciador de Arquivos do Windows Explorer (Windows), o
Dreamweaver não as reconhecerá e não poderá manter os caminhos corretos a menos que
utilize o botão Refresh para atualizar as informações do Dreamweaver sobre os arquivos.
1. Abra o grupo de painéis Files e selecione a guia Files.

Por padrão, o painel Files é inicialmente acessível por meio da visualização recolhida em
que o painel é encaixado ao painel Assets no grupo de painéis Files e somente os arquivos
locais permanecem visíveis. O painel Files contém uma barra de ferramentas de site bem
como extensas opções no menu Options com funções específicas para manutenção de
site. O menu Show permite alternar para qualquer site definido ou para seu computador.
O menu View na parte superior do painel permite alternar entre as opções Local view, Re-
mote view, Testing Server e Map view.
Usuários do Macintosh: Talvez você veja arquivos chamados .DS_Store na

maioria das pastas. Arquivos DS_Store contêm as informações utilizadas pelo Ma-
cintosh Finder para visualizar as pastas. Para informações adicionais sobre eles e
como excluí-los, consulte Tech Note da Macromedia em: http://www.macrome-
dia.com/go/tn_16831.
2. Verifique se o site Yoga Sangha está selecionado no menu Site e clique no botão
Expand na barra de ferramentas do painel Files.
Usuários do Macintosh: Você deve fechar a página inicial, se estiver aberta, clicando no
botão Close Window no canto esquerdo superior da janela. Você trabalhará com o painel
Files na maior parte desta lição; e a página inicial pode às vezes obscurecer o painel Files
expandido.
Usuários do Windows: Você não precisa fechar a página inicial porque o painel Files ex-
pandido é estendido para preencher o espaço ocupado pela aplicação do Dreamweaver.
Depois de clicar no botão Expand, o painel Files abre na sua própria janela expandida,
como mostrado na figura a seguir. Você utilizará o painel Files expandido por toda esta lição.
462 LIÇÃO 14
Seus arquivos locais aparecem no painel direito do painel Files (o painel Local Files). A
qualquer momento que o painel Files estiver expandido, você pode ocultá-lo no grupo de
painéis Files clicando no botão Expand/ Collapse novamente. Os arquivos locais são tudo
que está contido na pasta-raiz, DW8_YogaSangha, definida na Lição 1. Nessa janela, a
pasta-raiz é listada pelo nome atribuído ao site na Lição 1: Yoga Sangha.
Neste ponto, é possível ver o texto de ajuda exibido no painel esquerdo da janela do
painel Files (o painel remoto), que permite que você saiba que, para ver os arquivos exis-
tentes no seu servidor Web listados nesse painel, é necessário definir um site remoto. Você
pode ajustar o tamanho dos painéis arrastando a barra que os separa.
Você definirá um site remoto mais adiante nesta lição. Clicar em Define A Re-
mote Site abre a caixa de diálogo Site Definition para a categoria Remote Info da guia
Advanced. Quando você conecta-se ao site remoto, os arquivos remotos aparecem no
painel esquerdo.
As ferramentas do painel Files principal estão localizadas na barra de ferramentas:

O menu Show lista todos os sites definidos e fornece acesso a outros arquivos no seu
computador e conexões rápidas a sites remotos. Para abrir um site particular, sim-
plesmente selecione o site desejado no menu. Para este exercício, o site Yoga Sangha
deve estar selecionado.
O botão Connect/Disconnect conecta ou desconecta do site remoto. Como você
ainda não definiu um site remoto, clicar nesse botão abre a caixa de diálogo Site De-
finition. Por padrão, o Dreamweaver desconecta um site FTP remoto se ele estiver
inativo por mais de 30 minutos.
Se precisar alterar o limite de tempo, escolha Edit > Preferences (enquanto o

painel Files estiver na visualização recolhida), selecione a categoria Site e altere o nú-
mero listado no campo de texto Minutes Idle para FTP Connection.
Refresh (Atualizar) faz o que você esperaria: atualiza as listas dos diretórios local e
remoto. Quaisquer alterações feitas nas listas de arquivo serão mostradas depois de
uma atualização. Se tiver feito alterações no seu site fora do Dreamweaver, no Fin-
der (Macintosh) ou no Windows Explorer (Windows), você talvez precise atualizar
seus arquivos locais a fim de ver as alterações.
O conjunto de três botões fornece quatro diferentes opções de visualização: Site Fi-
les, Testing Server, Map Only e Map And Files. A visualização ativa é destacada e o
padrão é Site Files.
Get File(s) copia o(s) arquivo(s) selecionado(s) do site remoto para sua pasta local,
sobrescrevendo quaisquer cópias locais existentes. Essa opção ainda não está fun-
cional porque um site remoto não foi definido.

Put File(s) copia o(s) arquivo(s) selecionado(s) da pasta local para o site remoto, so-
brescrevendo quaisquer cópias remotas existentes. Essa opção ainda não está fun-
cional porque um site remoto não foi definido.
Check Out File(s) copia o(s) arquivo(s) selecionado(s) do servidor remoto para sua
pasta local, sobrescrevendo quaisquer cópias existentes. O arquivo é então marcado
como “checked out” (conferido) no servidor. O recurso Check In/Check Out é uma
excelente ferramenta para colaboração em uma Web site. Se um arquivo foi marca-
do como “checked out”, o Dreamweaver impede que qualquer outra pessoa o edite.
Essa opção não está funcional neste momento porque um site remoto não foi defi-
nido e a opção Check In/Check Out ainda não foi ativada para o site de projeto Yoga
Sangha.
Check In copia o(s) arquivo(s) selecionado(s) da sua pasta local para o servidor re-
moto, sobrescrevendo quaisquer cópias remotas existentes. O arquivo que existe no
servidor remoto torna-se então disponível para edição por outras pessoas. A cópia
do arquivo que existe na sua pasta local (normalmente no seu computador) tor-
na-se de leitura (read-only) e não é editável a menos que você a marque como che-
cked-out. Essa opção não está funcional neste momento porque um site remoto não
foi definido e a opção Check In/Check Out ainda não foi ativada para o site de pro-
jeto Yoga Sangha.
Synchronize sincroniza os arquivos entre as pastas locais e remotas. Essa opção ain-
da não está funcional porque um site remoto não foi definido.
As opções de menu File, Edit, View e Site estão localizadas no menu Options no
canto direito superior do painel Files expandido (Macintosh) ou na parte superior
esquerda do painel Files expandido (Windows). O menu Options também está
disponível no canto superior direito do grupo de painéis Files, fornecendo acesso
aos menus quando o painel Files é recolhido tanto para o Macintosh como para o
Windows.
Acessando arquivos fora de um site

do Dreamweaver no seu computador
O painel Files pode ser utilizado para acessar e trabalhar com arquivos que se encontram
fora da sua pasta-raiz do site. Eventualmente, você pode precisar acessar arquivos, como
arquivos de origem de imagens gráficas ou layouts de página, que normalmente não estão
incluídos nas pastas-raiz.
1. Selecione Computer (Macintosh) ou Desktop (Windows) no menu Show no painel

Files.
As setas (Macintosh) ou ícones de adição/subtração (Windows) permitem expandir ou
recolher as várias unidades e pastas que poderiam estar acessíveis por meio do seu compu-
tador.
464 LIÇÃO 14
2. Clique na seta ao lado do ícone Computer (Macintosh) ou no sinal de adição ao
lado do ícone Desktop (Windows) para navegar pelas suas unidades e arquivos.
Qualquer pasta especificada como a pasta-raiz para um site definido no Dreamweaver
será verde. Todas as outras pastas serão azuis (Macintosh) ou amarelas (Windows).
Utilizar o painel Files para arrastar e soltar arquivos entre pastas do site e seu computa-
dor ou área de trabalho cria cópias dos arquivos na nova localização. Se arrastar e soltar
arquivos dentro de uma pasta do site, eles serão movidos para a nova localização.
Se precisar arrastar e soltar arquivos para ou a partir de uma pasta de site,

Computer (Macintosh) ou Desktop (Windows), você deverá fazer isso dentro do painel
Files do Dreamweaver ou no Finder (Macintosh), no Meu Computador (Windows) ou
no Gerenciador de Arquivos do Windows Explorer (Windows). Não é possível arrastar
itens do painel Files para pastas no Finder (Macintosh), no Meu Computador (Win-
dows) ou no Gerenciador de Arquivos do Windows Explorer (Windows) ou vice-versa.
Você pode abrir arquivos em outros programas dando um clique duplo neles. O Dream-
weaver utiliza o programa associado ao arquivo que você escolheu para abri-lo.
Você pode alterar os programas associados escolhendo Edit > Preferences e

selecionando File Types/Editors na lista de categorias. Selecione, adicione ou exclua
extensões de arquivos na lista de extensões; utilize a lista de editores para definir
quais programas utilizar ao abrir arquivos com as extensões selecionadas.

Modificando páginas no painel Files
Como aprendeu na Lição 3, o mapa do site exibe uma representação visual de uma parte
selecionada do seu site. À medida que visualiza páginas no mapa do site e move o ponteiro
sobre as páginas, você vê as informações sobre cada página na área de status (a barra na
parte inferior) do painel Files.
1. No painel Files local, utilize o menu Show para voltar ao site Yoga Sangha. Selecio-
ne o arquivo index.html localizado dentro da pasta Lesson_14_Sites. Clique no menu
Options no painel Files (Macintosh somente). Escolha Site > Set as Home Page.
Como várias pastas Lesson contêm uma cópia do site inteiro para o trabalho com as lições
neste livro, você precisará redefinir a home page para o arquivo index.html que está den-
tro da pasta desta lição a fim de ver o mapa do site.
2. Alterne para a visualização Map Only. Clique no sinal de adição (+) ao lado do ar-
quivo training.html. Posicione o ponteiro sobre o nome de arquivo asana.html na lista
abaixo do arquivo training.html.
Como aprendeu na Lição 3, a visualização Site Map utiliza um método visual para mos-
trar os links dos arquivos da home page. O arquivo training.html está localizado na pasta
training; os arquivos subseqüentes listados abaixo deste mostram todos os arquivos vin-
culados a ele.
A barra de status na parte inferior do painel Files mostra o título e o tamanho do docu-
mento, bem como a data em que foi criado. Certifique-se de rolar pelo nome de arquivo,
não no ícone de arquivo. As informações não aparecem na barra de status a menos que o
ponteiro flutue sobre o nome do arquivo. Você pode ver, pelas informações que aparecem
na barra de status, que o documento asana.html não tem um título.
466 LIÇÃO 14
Se tiver esquecido de atribuir um título a uma página ou se quiser alterar um título,
você pode fazer isso no painel Files.
3. No Macintosh, clique no menu Options; no Windows, utilize o menu na janela Files.

Escolha View > Site Map Options > Show Page Titles para ver os títulos das páginas
em vez de nomes de arquivos no mapa do site.
O mapa do site é renovado para exibir os arquivos pelo título.
4. Localize a segunda página intitulada Untitled Document na lista expandida, que é o

arquivo asana.html que você viu no Passo 2. Clique no título uma vez para selecio-
ná-lo. Pause e então clique no título novamente.
Um retângulo é posicionado em torno do título para indicar que ele pode ser editado. Não
dê um clique duplo; você não quer abrir o arquivo. Você só precisa selecionar o título de
modo que possa editá-lo.
5. Digite Yoga Sangha: In-Depth Asana Training & Practice como o novo título e pres-
O mapa do site mostra o novo título.
Você pode abrir uma página para edição a partir do painel Files dando um clique
duplo no arquivo no painel Site Map ou no painel Local Folder.
6. Clique no menu Options (Macintosh); ou utilize o menu na janela Files (Windows).

Escolha View > Site Map Options > Show Page Titles para alternar da visualização de
títulos de volta para nomes de arquivo.
A marca de seleção ao lado da opção Show Page Titles no menu View > Site Map Options
será removida e os arquivos voltarão a exibir seus nomes.

7. Clique no botão Site Files na barra de ferramentas do painel Files para alternar para
a lista de arquivos. Abra a pasta Training e selecione o arquivo imm.html
Talvez você queira encolher o painel esquerdo (a área de visualização remota)

arrastando a barra para a esquerda entre os dois painéis. Esse procedimento lhe dará
mais espaço para trabalhar com o painel Local Files, tornando mais fácil ver o arquivo.
Se precisar alterar o nome de um dos seus arquivos, deverá fazer isso no painel Dream-
weaver Files para preservar as informações sobre o link mantidas pelo Dreamweaver. Se
alterar o nome do arquivo fora do Dreamweaver – para um arquivo HTML, um arquivo
gráfico ou qualquer outro arquivo – o Dreamweaver não terá como monitorar suas alte-
rações. Fazendo a alteração dentro do painel Files, você dará ao Dreamweaver a oportuni-
dade de atualizar todas as páginas vinculadas ao arquivo ou que contêm a imagem gráfica.
8. Com imm.html selecionado, clique no nome de arquivo para torná-lo editável. Alte-
re o nome do arquivo para immersion.html e pressione Return (Macintosh) ou Enter
(Windows).
O nome de arquivo imm.html é destacado no primeiro clique e um retângulo aparece em
torno do nome de arquivo, indicando que ele pode ser editado no segundo clique.
A caixa de diálogo Update Files se abre, listando todos os arquivos afetados por essa al-
teração de nome.
9. Clique em Update para atualizar os arquivos com o novo nome.

Agora, os arquivos listados mostram o novo nome.
O Dreamweaver faz a alteração do nome de arquivo dentro de cada arquivo na

lista que faz referência ao arquivo modificado. Se um arquivo na lista estiver aberto, o
Dreamweaver faz a alteração, mas não salva nem fecha o arquivo. Você deve salvar
manualmente as alterações para quaisquer arquivos abertos que foram alterados es-
colhendo File > Save.
10. No painel Files, abra a pasta ysImages na Lesson_14_Sites.
468 LIÇÃO 14
Somente uma imagem, darcy.jpg, está na pasta. Se um arquivo ou pasta não
estiver no lugar adequado, você poderá mover o arquivo ou pasta para o local correto.
Fazer essa alteração no painel Files assegura que todas as informações sobre o link
permaneçam corretas e intactas.
11. Arraste o ícone da imagem darcy.jpg para a pasta Images na Lesson_14_Sites

ainda mais para cima na lista, próximo da pasta explorations.
Todos os arquivos que utilizam essa imagem serão afetados pela mudança; você precisa
corrigir o caminho para a imagem. A caixa de diálogo Update Files se abre, perguntando
se os arquivos afetados devem ser atualizados.
12. Clique em Update para manter o link a essa imagem correto.

A imagem é movida para a pasta Images. Quaisquer referências a ela nos arquivos HTML
ainda funcionam. Se você fosse mover o arquivo enquanto trabalha fora do Dreamwea-
ver, os caminhos não seriam atualizados e essa imagem pareceria estar “quebrada”. Isso
significa que quando exibida na janela Document ou no navegador, um ícone genérico da
imagem apareceria no seu lugar, indicando que o arquivo não pode ser encontrado no lo-
cal especificado na HTML.
O Dreamweaver permite personalizar o painel Files reordenando, mostrando,

ocultando ou adicionando colunas. Para fazer as alterações nas colunas no painel Files,
escolha Site > Manage Sites de modo a abrir a caixa de diálogo Site Definition e então
selecione a lista File View Columns. Você pode utilizar os botões de seta que apontam
para cima ou para baixo a fim de alterar a ordem das colunas. A caixa de seleção
Options Show controla quais colunas são exibidas no painel Files. Você também pode
adicionar ou excluir colunas e associá-las a Design Notes. Você aprenderá mais sobre
Design Notes mais adiante nesta lição. O restante deste livro supõe que você está uti-
lizando o arranjo padrão de colunas no painel Files e não fez nenhuma alteração. Você
pode utilizar a barra de rolagem na parte inferior do painel Local Files para ver todas as
colunas.

Conectando-se a um site remoto
Na Lição 1, você criou um site local – isto é, uma pasta na sua unidade de disco para arma-
zenar todas as pastas e arquivos necessários para seu site. Nas Lições 2 a 13, você desenvol-
veu páginas no site local. Mas, ao criar seus próprios sites, é necessário copiar os arquivos
locais para um site remoto depois de completar a fase de produção da criação do site para
que os visitantes vejam as páginas Web. Em geral, o site remoto está em um servidor espe-
cificado pelo seu host, administrador de Web ou cliente, mas ele também pode estar em
uma rede local.
Uma boa idéia é transferir seu site para um servidor – de preferência um servi-
dor ativo no qual o site na verdade residirá – e testá-lo para certificar-se de que tudo
funciona conforme esperado. Como você está transferindo o site para um local dife-
rente, sempre há a possibilidade de que algo talvez não funcione, como ocorreu na lo-
calização anterior. É melhor determinar se há quaisquer problemas e corrigir a situação
antes de publicar o site – tornando-o disponível ao público geral ou a um grupo especí-
fico de pessoas. Teste será abordado na Lição 15.
1. Escolha Site > Manage Sites.
Os usuários do Windows também podem utilizar o menu Site localizado na vi-

sualização expandida do painel Files.
A caixa de diálogo Manage Sites se abre.
2. Selecione o site de projeto Yoga Sangha e clique no botão Edit. A guia Advanced
deve estar ativa por padrão; se não estiver, clique nela.
A caixa de diálogo Site Definition para o Yoga Sangha se abre.
470 LIÇÃO 14
3. Escolha Remote Info na lista Category no lado esquerdo da caixa de diálogo.
A seção Remote Info da caixa de diálogo Define Sites é onde você insere as informações
para dizer ao Dreamweaver a qual site remoto conectar e os atributos desse site remoto.
A seleção atual é None, como você especificou quando o site Yoga Sangha foi configu-
rado na Lição 1.
4. No menu Access, escolha Local/Network.

Nos passos a seguir, você criará uma pasta para simular um site FTP (File Transfer Proto-
col) remoto. Esse procedimento permite testar as funções Get e Put, bem como funções
adicionais de gerenciamento de site, sem necessidade de acesso a um servidor remoto. Na
maioria dos casos, a opção Local/Network é utilizada quando você tem acesso a outro
computador em uma rede que abrigará a pasta remota. Nesse caso, será no seu próprio
computador.
O acesso FTP é um método comum de obter ou colocar arquivos em um site

remoto. Como você talvez não tenha acesso a um site de FTP remoto enquanto com-
pleta esta lição, as informações a seguir são apresentadas apenas como material de
referência: consulte o administrador da sua rede ou servidor para configurar essas op-
ções corretamente. A lista de opções a seguir está disponível escolhendo FTP no
menu Access na seção Remote Info da caixa de diálogo Site Definition.
FTP Host: O nome de host do seu servidor Web (como adobe.com).

Host directory: O diretório no site remoto em que os documentos visíveis ao públi-
co são armazenados (também conhecido como raiz do site).
Login and Password: Seu nome de login e senha no servidor. Se remover a seleção
da caixa de seleção Save, será solicitada uma senha todas as vezes em que você co-
nectar-se ao site remoto.
Use passive FTP: Utilizado quando você tem um firewall entre seu computador e o
servidor. Essa opção aparece desmarcada por padrão.
Use firewall: Utilizado se você está conectando-se ao servidor remoto protegido por
um firewall. Essa opção aparece desmarcada por padrão. As configurações de Fire-
wall estão localizadas em Dreamweaver Preferences, que você pode acessar rapida-
mente clicando no botão Firewall Settings.
Use Secure FTP (SFTP): Utilizada quando você tem um servidor SFTP, que utiliza
criptografia para criar conexões seguras. Essa opção aparece desmarcada por pa-
drão.
5. Clique no ícone de pasta à direita da caixa de texto Remote Folder para especificar
a pasta remota.
A caixa de diálogo Choose Remote Folder For Site Yoga Sangha se abre.
6. Escolha um local no seu disco rígido que esteja fora da sua pasta-raiz, DW8_Yoga-
Sangha. Clique no botão New Folder, digite YogaRemote como o nome da pasta e se-
lecione-a.
A pasta remota deve estar fora da sua pasta-raiz local.
472 LIÇÃO 14
Usuários do Macintosh: Selecione a pasta YogaRemote e clique em Choose.
Usuários do Windows: Selecione a pasta YogaRemote e clique em Open; em seguida, cli-
que em Select para utilizar a pasta YogaRemote como sua pasta remota.
Essa pasta atuará como um substituto para um servidor remoto.
7. Deixe as quatro caixas de seleção para opções adicionais de site configuradas

com seus valores padrão, clique em OK para salvar suas informações de site e clique
em Done para fechar a caixa de diálogo Manage Sites.
O Dreamweaver talvez atualize o Site Cache depois de você clicar em Done

porque você fez alterações no site.
Você sempre pode editar suas informações de site posteriormente escolhendo Site >
Manage Sites para abrir a caixa de diálogo Manage Sites e então selecionar o site que você
quer alterar. Para este exercício, deixe a caixa Refresh File List Automatically marcada e as
opções Check In/Out desmarcadas e mantenha as informações de sincronização marca-
das.
8. Clique no botão Refresh no painel Files.

O painel Files agora exibe a pasta remota vazia no painel Site Remote do painel Files. O ca-
minho do seu disco rígido para a pasta é exibido ao lado do ícone de pasta. Você pode ro-
lar pelo nome da pasta para ver o caminho completo.
Nessa situação, você definiu uma pasta local, assim o botão de ícone Connect na parte
superior do painel Files não está ativo porque você já está conectado. O botão Connect co-
necta-o a um servidor remoto especificado se você não estiver automaticamente conecta-
do, como quando utiliza a opção FTP.
Fazendo o upload de arquivos

Depois de definir um site remoto, você precisa fazer o upload (copiar) de todos os arqui-
vos existentes para esse local. Você pode fazer o upload de um site inteiro de uma só vez –
o que substitui todos os arquivos que já existem no servidor – ou pode carregar somente
aqueles arquivos que são novos ou modificados.
1. No painel Local Files do painel Files, selecione a pasta Site Yoga Sangha de primei-
ro nível e então clique no botão Put na barra de ferramentas do painel Files.
O botão Put é a seta azul que aponta para a parte superior do painel Files. O bo-
tão Get é a seta verde que aponta para a parte inferior do painel Files.

Quando o Dreamweaver exibe uma mensagem perguntando se tem certeza de que quer
colocar o site inteiro, clique em OK.
O site inteiro é copiado para a pasta remota. Você pode fazer o upload de pastas e seu
conteúdo ou de arquivos individuais selecionando o(s) item(ns) e clicando no botão Put.
Utilize Shift-clique para selecionar múltiplos itens contíguos (aqueles que estão um ao
lado do outro) ou Cmd-clique (Macintosh) ou Ctrl-clique (Windows) para selecionar
múltiplos itens não-contíguos (aqueles que estão separados por outros itens).
A janela Background File Activity se abrirá e mostrará o progresso da transferência.
Você pode continuar a trabalhar nos arquivos no Dreamweaver enquanto uma transfe-
rência de arquivos acontece.
2. No painel Local Files, localize e dê um clique duplo no arquivo asana.html na pasta

Lesson_14_Sites/Training para abri-lo. Abra o arquivo asana.txt na pasta Text e copie
o conteúdo para área de transferência. Retorne ao asana.html e cole o conteúdo so-
bre o texto info here; salve então esse arquivo. Feche os dois arquivos.
Esse arquivo agora tem uma data de modificação mais recente que o asana.html que existe
na pasta remota.
Usuários do Windows: Quando você abrir o arquivo asana.html, o painel Files se reco-
lherá automaticamente de volta no painel Site no grupo de painéis Files. Abra o painel Fi-
les na versão expandida clicando no botão Expand dentro do painel Files ao terminar de
trabalhar com o documento asana.html.
Usuários do Macintosh: Se a página inicial abrir quando você fechar os arquivos asa-
na.html, poderá fechá-la de modo que ela não atrapalhe o painel Files.
474 LIÇÃO 14
3. Selecione a pasta do site de primeiro nível local – Yoga Sangha. Clique no menu
Options (Macintosh). Escolha Edit > Select Newer Local.
O Dreamweaver compara as datas de modificação de todos os arquivos locais com as in-
formações de arquivo correspondentes no site remoto e seleciona somente os novos ar-
quivos locais. No Macintosh, o Dreamweaver examinará as datas das modificações de to-
dos os arquivos; esse processo é mostrado na janela Background File Activity. Tanto no
Macintosh como no Windows, espere até o Dreamweaver completar esse processo – ele
talvez demore vários minutos para classificar todos os arquivos.
Quando Dreamweaver concluir, o arquivo asana.html na pasta Lesson_14_Sites/Trai-
ning deve estar selecionado.
Há duas opções adicionais que você pode utilizar ao selecionar arquivos de site
que foram modificados ou criados recentemente. Escolher Newer Remote seleciona-
rá os arquivos no site remoto que são mais recentes do que os arquivos corresponden-
tes na sua pasta local. Selecionar Recently Modified irá comparar e selecionar os arqui-
vos novos ou modificados em ambos os locais.

4. Clique no botão Put File(s) na barra de ferramentas do painel Files.
A caixa de diálogo Dependent Files se abre. Suas escolhas são Yes, No e Cancel:
Yes envia todas as imagens nas páginas selecionadas, juntamente com as próprias
páginas HTML, ao servidor.
No envia somente as páginas HTML. Se alterou somente a página HTML e as ima-
gens já estiverem no servidor, você não terá nenhuma razão para enviar as imagens
novamente, portanto você deverá clicar em No. Se você modificou ou adicionou
uma imagem na página, clique em Yes.
Cancel evita a transferência e fecha a caixa de diálogo.
A caixa de diálogo Dependent Files também contém a caixa de seleção Don’t

Ask Me Again. Se essa opção foi marcada anteriormente, você não verá a caixa de diá-
logo Dependent Files. Se quiser ativar essa opção novamente, escolha Dreamweaver
> Preferences (Macintosh) ou Edit > Preferences (Windows). Selecione a categoria
Site e marque as duas caixas Dependent Files para as opções Prompt On Get/Check
Out e Prompt On Put/Check In.
5. Clique em No se visualizar a caixa de diálogo Dependent Files.

Você não modificou nenhum arquivo dependente neste exercício, portanto não é neces-
sário substituí-los na pasta remota YogaRemote.
O arquivo selecionado é transferido por upload (é copiado) para o site remoto.
Quando o upload terminar, você verá uma lista de arquivos no painel do site remoto
que espelha a lista no painel Local Folder.
476 LIÇÃO 14
Outra maneira de fazer o upload ou o download apenas dos arquivos que foram
criados ou alterados é sincronizar seu site local e remoto. A sincronização assegura
que você mantém uma estrutura paralela de arquivo e pastas entre a pasta local e o
site remoto – os arquivos em um local são duplicatas dos arquivos correspondentes no
outro local.
Para sincronizar seu site, o Dreamweaver compara as datas de modificação dos ar-
quivos existentes tanto no site local como no remoto. A sincronização permite atuali-
zar somente os arquivos que foram criados ou alterados. Para sincronizar um site, es-
colha Site > Synchronize no menu Options no painel Files (Macintosh) ou escolha Site
> Sincronize no painel Files expandido (Windows). Você pode escolher como sincroni-
zar selecionando uma direção no menu Direction. A opção Put newer files to remote
(Exportar os arquivos mais recentes para o servidor remoto) faz upload dos arquivos
somente se o Dreamweaver encontrar algum arquivo na pasta local que seja mais re-
cente que seu correspondente no site remoto. A opção Get newer files from remote
(Importar os arquivos mais recentes do servidor remoto) faz download dos arquivos
somente se o Dreamweaver encontrar algum arquivo no site remoto que seja mais re-
cente que seu correspondente na pasta local. A opção Get and Put newer files transfe-
re arquivos em ambas as direções. Para iniciar o processo, clique no botão Preview. O
Dreamweaver varre os arquivos localizados nas pastas locais e remotas e compara as
datas de modificação. Depois que o Dreamweaver termina de varrer as pastas locais e
remotas, ele abre uma lista de arquivos que determina como necessários para a trans-
ferência. Essa caixa de diálogo lista a ação (Put ou Get), o nome de arquivo e o status.
Para cada arquivo, você tem a opção de desmarcar a caixa de ação, o que faz com que
o Dreamweaver pule a transferência desse arquivo. O número de arquivos a ser atuali-
zado é listado na parte inferior dessa caixa de diálogo.
Utilize a função de sincronização cautelosamente se estiver usando Check In/Out,

porque a sincronização realiza as operações de Get e Put, eventualmente sobrescre-
vendo os arquivos – mesmo que você esteja utilizando Check In/Out. A sincronização
não faz o check in/out dos arquivos, simplesmente os substitui. Você aprenderá mais
sobre Check In/Out mais adiante nesta lição. Quando a transferência termina, a lista de
arquivos de site informa quantos arquivos foram atualizados. Você pode clicar em
Save Log para criar um registro em log da transferência de arquivos se precisar moni-
torar quando os arquivos foram transferidos.
Bloqueando arquivos e pastas

Ao desenvolver seu Web site, talvez você queira evitar o upload ou download de certos
arquivos. Por exemplo, se tiver um grande número de filmes de Flash e QuickTime in-
corporados em suas páginas, talvez você não queira substituir esses arquivos de Flash e
QuickTime na sua pasta local ou no servidor remoto todas as vezes em que realizar as

operações de Get e Put – mas você poderia querer fazer o upload automático dos outros
arquivos dependentes. Você também poderia ter arquivos-fonte para imagens na sua
pasta local – em geral, os arquivos-fonte não são carregados nos servidores remotos
porque não são necessários para os visitantes visualizarem as páginas Web e podem
ocupar muito espaço.
Você pode bloquear (cloak) pastas ou tipos de arquivo para excluí-los das funções de
transferência de site como Synchronize, Get e Put e Check In/Out. As pastas e tipos de
arquivo bloqueados (marcados como “cloaked”) também são excluídos das operações
gerais de site como selecionar os arquivos remotos e locais mais recentes, verificar links,
pesquisar/substituir, relatórios e atualizar biblioteca/template. Os tipos de pastas e arqui-
vos bloqueados não aparecem nos painéis Assets ou Files.
A operação de cloaking, como ocorre com várias funções de site do Dream-

weaver, não é reconhecida por outros programas de FTP. Os dados necessários pelo
Dreamweaver para manter as informações sobre as pastas que você bloqueará neste
exercício estão contidos na pasta Library. Essa pasta ocupa pouco espaço e não deve
ser excluída das localizações locais ou remotas.
1. No painel Local Files do painel Files, selecione a pasta Flash que está localizada na
pasta Lesson_14_Sites.
Essa pasta contém um arquivo PNG.
Você não pode bloquear arquivos individuais; deve bloquear pastas inteiras ou todos
os arquivos de certo tipo de arquivo.
Uma boa maneira de organizar seu site é manter todos os arquivos de mídia na
mesma pasta. Por exemplo, se seu site tiver um grande número de arquivos PDF (Por-
table Document Format), criar uma pasta unicamente para arquivos PDF ajudará a dei-
xá-lo organizado e de fácil manutenção.
2. Clique no menu Options e escolha Site > Cloaking > Cloak (Macintosh somente)
ou clique com o botão direito do mouse e escolha Cloaking > Cloak.
O bloqueio deve estar ativo por padrão, mas se a opção Cloak estiver acinzen-
tada, você deverá clicar no menu Options e escolher Site > Cloaking > Enable Cloaking
(Macintosh) ou escolher Site > Cloaking > Enable Cloaking (Windows). Os usuários do
Macintosh também podem utilizar Ctrl-clique para acessar o menu Options e as confi-
gurações de cloak.
478 LIÇÃO 14
O ícone da pasta PNG agora é exibido com uma linha vermelha diagonal nos painéis
Local Files e Remote Site do painel Files. A linha vermelha diagonal indica que arquivo foi
bloqueado e será excluído das operações de site. Se abrir a pasta, você verá que o arquivo
Yoga-Sangha.png também contém uma linha vermelha diagonal atravessando o ícone de
arquivo.
Você pode desbloquear a pasta para incluí-la nas operações de site clicando
com o botão direito do mouse ou utilizando Ctrl-clique (mouses de botão único no Ma-
cintosh) na pasta e escolhendo Cloaking > Uncloak.

3. Clique com o botão direito do mouse ou utilize Ctrl-clique (para mouses de um úni-
co botão no Macintosh) na pasta PNG e escolha Cloaking > Settings.
A guia Advanced da caixa de diálogo Site Definition se abrirá com a categoria Cloaking se-
lecionada.
4. Marque a caixa de seleção Cloak Files Ending With. Clique no campo de texto no fi-
nal da lista de extensões de arquivos padrão que já estão no campo de texto. Pressio-
ne a barra de espaço e digite .pdf no campo de texto.
Você pode inserir extensões de arquivo adicionais no campo de texto para bloquear mais
de um tipo de arquivo. Para bloquear múltiplos tipos de arquivos, as extensões devem ser
separadas por um espaço, como demonstrado pelas extensões .png e .fla padrão que
foram originalmente listadas no campo de texto. Arquivos-fonte Fireworks utilizam a
extensão .png; arquivos-fonte Flash utilizam a extensão .fla. Você também pode inserir
extensões a outros arquivos-fonte comuns, como a extensão de arquivo .psd do Adobe
Photoshop.
480 LIÇÃO 14
5. Clique em OK para fechar a caixa de diálogo Site Definition e clique em OK quando
Dreamweaver informar que o cache será recriado. Clique no botão Refresh no painel
Files quando o processo estiver concluído.
Todos os arquivos PDF contidos no site de projeto Yoga Sangha agora estão bloqueados.
Há um arquivo PDF na pasta Lesson_14_Sites que agora é exibido com linhas vermelhas
diagonais atravessando o ícone de arquivo: ysSchedule.pdf. Todos os arquivos PDF agora
estão excluídos das operações de site.
Para desbloquear os tipos de arquivos, clique no menu Options no grupo de

painéis Assets (Macintosh) ou no grupo de painéis Files (Windows) e escolha Site >
Cloaking > Settings. Na caixa de diálogo Site Definition, remova a extensão específica
do campo de texto para o tipo de arquivo que deseja desbloquear ou desmarque caixa
de seleção Cloak Files Ending With: para desbloquear todos os tipos de arquivos.
6. Clique com o botão direito do mouse ou clique com a tecla Ctrl pressionada (mou-
ses Macintosh de um único botão) em qualquer lugar dentro do painel Local Files do
painel Files e escolha Cloaking > Enable Cloaking.
A marca de seleção é removida da opção Enable Cloaking para indicar que o bloqueamen-
to agora está desativado para o site de projeto Yoga Sangha. Essa é uma maneira fácil de
desbloquear temporariamente pastas e arquivos do seu site. Se escolher Site > Cloaking >
Enable Cloaking novamente, o bloqueio será ativado e todos os arquivos e pastas anteri-
ormente bloqueados serão rebloqueados. O bloqueio está ativado em todos sites por pa-
drão. Você precisa ativar o bloqueamento para pastas e tipos de arquivo com bloqueios.
Você também pode escolher a categoria Cloaking na caixa de diálogo Site Defi-
nition e desmarcar a caixa de seleção Enable Cloaking para desativar bloqueio no site.
Você pode também desbloquear todas as pastas e tipos de arquivo simultaneamente
escolhendo Cloaking > Uncloak All. Essa opção deixa o bloqueio ativado e remove o
bloqueio de todas as pastas e arquivos no seu site. Você não pode rebloquear automa-
ticamente pastas e arquivos se utilizou a função Uncloak All. Se quiser suspender o
bloqueio somente temporariamente, desative-o como demonstrado no Passo 6. As
opções Cloaking também estão localizadas no menu Site no menu Options do grupo
de painéis Files (ou Assets) (Macintosh e painel File recolhido no Windows) ou no
menu Site (painel Files expandido no Windows).
Check In e Check Out

Se você estiver trabalhando em uma equipe, as opções Check In/Out podem facilitar bas-
tante o trabalho em equipe em um Web site. Quando esse recurso está ativado, se um mem-
bro da equipe fizer o check out em um arquivo para edição, o Dreamweaver bloqueia o ar-
quivo em que foi feito o check out no servidor remoto de modo que ninguém na equipe
possa editá-lo até que seja feito o check in novamente. Contanto que toda a equipe esteja
utilizando o Dreamweaver e todos os membros da equipe ativem a opção Check In/Out,

utilizem o painel Files e estejam conectados ao servidor remoto, o recurso Check In/Out
permite que o grupo saiba quando uma outra pessoa está trabalhando em um arquivo es-
pecífico, evitando sobrescrever acidentalmente o material ou duplicar esforços.
1. Escolha Site > Manage Sites.

A caixa de diálogo Manage Sites se abre.
2. Escolha o site de projeto Yoga Sangha na lista e clique no botão Edit.

A caixa de diálogo Site Definition For Yoga Sangha se abre.
3. Escolha Remote Info na lista Category em Advanced da caixa de diálogo.

As informações sobre o site remoto são exibidas.
4. Na área Check In/Out, marque a caixa Enable File Check In And Check Out.
Uma caixa de seleção adicional e duas caixas de texto adicionais aparecem. Os arquivos
sofrem check out automaticamente à medida que você os abre se a opção Check Out Files
When Opening estiver marcada. Você precisa estar conectado ao site remoto para que
esse recurso funcione adequadamente; se não estiver conectado, o Dreamweaver conec-
ta-se ao site remoto automaticamente.
As caixas de texto adicionais são Check Out Name e Email Address.
482 LIÇÃO 14
5. Digite um nome de checkout e seu endereço de e-mail nos campos de texto apro-
priados. Clique em OK na caixa de diálogo Site Definition e então clique em Done na
caixa de diálogo Manage Sites.
Seu nome de checkout é apenas para referência do grupo; ele pode ser seu nome completo
ou simplesmente um nome de usuário. Esse nome será exibido na coluna Checked Out By
do painel Files quando você faz o check out em um arquivo. Seu endereço de e-mail está
disponível para permitir que os membros da equipe enviem perguntas.
6. Na visualização de lista Local Files do painel Files, selecione a página index.html

na pasta Lesson_14_Sites e clique no botão Check In na parte superior da janela. Faça
o mesmo para a página sanskrit.html. Clique em No se for solicitado a incluir arquivos
dependentes.
Botão Check In
O Dreamweaver faz o upload dos arquivos selecionados para a pasta remota. No painel
Local Folder do painel Files, os arquivos são marcados com um pequeno ícone de cadeado
para que você saiba que os arquivos estão sob check in e é necessário fazer o check out para
que você edite-os localmente.

Quando trabalha com um grupo de pessoas e utiliza o recurso Check In/Out, é impor-
tante que todo mundo utilize os ícones Check In e Check Out File(s) em vez dos ícones
Get File(s) e Put File(s) para carregar e descarregar arquivos.
Se você já tiver uma cópia local do seu site remoto, deverá fazer o check in em cada ar-
quivo local para que o recurso Check In/Out funcione adequadamente. Ao ativar Check
In/Out, lembre-se de que seus arquivos não são verificados automaticamente no servidor
remoto. Os ícones de cadeado e de verificação indicam o status de um arquivo. Um ícone
de verificação indica que foi feito o check out em um arquivo; um cadeado indica que foi
feito o check in em um arquivo. Se um arquivo não tiver um ícone de cadeado ou de veri-
ficação, ele não tem nenhum status de Check In/Out. Esse arquivo não marcado está dis-
ponível para ser aberto ou editado. Se você estiver trabalhando com membros da equipe e
utilizar Check In/Out, uma boa idéia é fazer o check out e o check in no site inteiro depois
de ativar o Check In/Out de modo que nenhum arquivo desmarcado seja aberto e editado
acidentalmente.
7. No painel Files, selecione a página sanskrit.html na pasta Lesson_14_Sites. Clique

no botão Check Out File(s) na parte superior do painel. Clique em No se for solicitado
a incluir arquivos dependentes.
Botão Check Out Files
484 LIÇÃO 14
Para assegurar que você irá trabalhar com a versão mais recente, o arquivo é descarregado
no seu site local. O arquivo é marcado tanto nos painéis locais como nos remotos com
uma pequena marca de seleção verde ao lado do ícone de arquivo, indicando que você fez
o check out do arquivo. As colunas Checked Out By nos painéis local e remoto mostram
seu nome de check out na forma de um link clicável para seu endereço de e-mail. Arqui-
vos marcados como checked out por outros membros da sua equipe são exibidos com
uma marca de seleção vermelha, indicando que você não pode fazer o check out desses ar-
quivos até que o check in tenha sido feito.
Se tentar abrir um arquivo marcado como checked out por outra pessoa, o Dreamwea-
ver informa que esse arquivo já está sob check out e oferece várias opções: cancelar a aber-
tura do arquivo, abrir o arquivo para visualização apenas ou sobrescrever o check out.
Se receber um alerta de que o check out do arquivo foi feito por uma outra pes-
soa durante este exercício, escolha sobrescrever o checkout.
Para que o recurso Check In/Out funcione adequadamente, todas as pessoas na sua
equipe devem utilizar o Dreamweaver. Outros programas de FTP não reconhecem o re-
curso Check In/Out. Eles poderão sobrescrever os arquivos, neutralizando o propósito de
fazer o check in e out. Quando você utiliza o recurso Check In/Out, os programas FTP po-
dem ver os arquivos que o Dreamweaver cria: em cada arquivo marcado como checked
out, um arquivo LCK é criado no servidor, deixando que o Dreamweaver saiba que o ar-
quivo está sob check out. Para este exercício, talvez você possa ver o arquivo sans-
krit.html.lck no Finder (Macintosh) ou no Windows Explorer (Windows). Não exclua es-
ses arquivos! Eles são necessários à funcionalidade do recurso Check In/Out e ocupam
pouco espaço.
Além disso, o check out de todos os arquivos utilizados pela equipe deve ser feito ini-
cialmente em todas as estações de trabalho dos usuários de modo que o Dreamweaver
aplique as restrições Check In/Out. Se um arquivo nunca sofrer o check in ou o check out,
ele ainda será editável – pulando o recurso Check In/Out.
8. No painel Files, selecione a página sanskrit.html no painel local. Clique no botão

Check In na parte superior da janela. Clique em No se for solicitado a incluir arquivos
dependentes.
Agora, esse arquivo foi marcado como checked in e não pode ser editado até que seja feito
o check out. Você deve deixar o recurso Check In/Out ativado por enquanto – ele é neces-
sário para um exercício mais adiante nesta lição.
Se Check In/Out estiver desativado e você quiser desbloquear os arquivos, po-

derá clicar no menu Options no grupo de painéis Files (ou Assets) e escolher File >
Turn Off Read Only. Você também pode acessar essa opção clicando com o botão di-
reito do mouse ou utilizando Ctrl-clique (mouse de único botão no Macintosh) no arqui-
vo e escolhendo Unlock.

Utilizando notas de design
Notas de design são úteis para monitorar as informações relacionadas aos seus arqui-
vos. Essas notas são apenas para suas informações; elas são arquivos de texto ocultos que
não podem ser acessados ou exibidos nos navegadores pelos usuários do seu site. Você
pode compartilhar facilmente as informações com seus colaboradores carregando as no-
tas de design no servidor remoto. Essas notas podem ser utilizadas com todos os arquivos
no site.
1. Escolha Site > Manage Sites. Selecione o site Yoga Sangha e clique em Edit. Sele-
cione a categoria File View Columns e o item Notes na lista de File View Columns. Mar-
que a caixa Show na seção Options. Clique em OK para aplicar as alterações ao site e
em Done na caixa de diálogo Manage Sites.
A coluna Notes deve estar ativada para que você veja a nota de design que criará no painel
Files.
2. No painel Files, selecione o arquivo AboutGreen.html na pasta Lesson_14_Si-

tes/Community. Clique no menu Options no painel Files e escolha File > Design Notes
(Macintosh somente) ou clique com o botão direito do mouse no arquivo AboutGreen.
html file e escolha Design Notes.
486 LIÇÃO 14
Você também pode anexar uma nota de design a partir do painel Files dando
um clique duplo na coluna Notes para o arquivo selecionado ou escolhendo a opção no
menu Options, que você pode acessar dando um clique com o botão direito do mouse
ou utilizando Ctrl-clique (para mouse de um único botão no Macintosh) no arquivo.
A caixa de diálogo Design Notes aparece. Você pode utilizar o mesmo método desse
passo para anexar uma nota de design a um arquivo se ele estiver selecionado no painel Fi-
les ou se o arquivo estiver aberto na janela Document. A guia Basic Info exibe as informa-
ções sobre o arquivo ao qual a nota será anexada e o caminho desse arquivo no site. Você
pode alterar o status do arquivo fazendo uma escolha no menu Status.
A categoria Design Notes na caixa de diálogo Site Definition permite ativar ou

desativar Design Notes. Por padrão, ambas as caixas, Maintain Design Notes e Upload
Design Notes For Sharing, estão marcadas. O Dreamweaver carrega ou descarrega
automaticamente notas de design para qualquer arquivo manipulado com os coman-
dos get, put, check in ou check out no servidor remoto quando a caixa de seleção
Upload Design Notes For Sharing estiver marcada.
3. Clique no ícone Date acima do canto direito da caixa de texto Notes. Selecione revi-
sion1 no menu Status e marque a caixa Show When File Is Opened. Clique em OK.
Ao utilizar o recurso Check In/Out de arquivos, você precisará assegurar que o

arquivo tenha sofrido check out para criar uma nota de design. Nesse caso, ainda não
foi feito o check in no arquivo; portanto, você pode adicionar a nota de design sem fa-
zer o check out nele.
A data é inserida na primeira linha da caixa de texto Notes. Utilize essa área para inserir
qualquer informação importante sobre seus arquivos.

A caixa Show When File Is Opened na parte inferior dessa janela permite exibir essa
nota quando o arquivo é aberto – uma boa maneira de certificar-se de que os membros da
sua equipe têm conhecimento sobre suas notas.
A caixa de diálogo Design Notes se fecha e a nota é anexada ao arquivo AboutGreen.
html com as informações adicionadas.
4. No painel Local Files do painel Files, role para a direita até ver a coluna Notes.
O ícone Design Notes é exibido como um balão de texto em amarelo na coluna Note, lo-
calizada à direita do nome de arquivo, indicando que uma nota está anexada ao arquivo.
Para editar a nota, dê um clique duplo no ícone Design Notes (o balão de texto
em amarelo) para reabrir a caixa de diálogo Design Notes
Exportando definições de site

A função Site Export permite selecionar e mover um site na sua lista de sites para outro
computador. Essa função é útil em muitas situações, incluindo compartilhamento de sites
com outros membros da equipe ou se você precisar alternar entre computadores. Os sites
são salvos como arquivos XML e todas as configurações na caixa de diálogo Site Defini-
tion são retidas.
488 LIÇÃO 14
1. Escolha Site > Manage Sites e selecione o site Yoga Sangha na caixa de diálogo
Manage Sites. Clique no botão Export.
Para exportar o site atual, você pode clicar no menu Options no painel Files
(Macintosh) e escolher Site > Export.
Abre-se a caixa de diálogo Export Site, em que você pode nomear o arquivo e especificar o
local para salvar o site exportado.
2. Salve o arquivo Exported Site em um local fora da sua pasta raiz do site Yoga
Sangha.
O site é salvo com a extensão .ste. Não exclua nem altere essa extensão.
Inversamente, você pode utilizar a função Site Import para importar um site para o
Dreamweaver. Para isso, escolha Site > Import; em seguida, utilize a caixa de diálogo
Import Site para encontrar e selecionar o site. Você será solicitado a selecionar uma pas-
ta-raiz local. É possível importar somente sites que foram exportados a partir do Dream-
weaver como arquivos XML com a extensão .ste. Os recursos Export e Import transferem
apenas as configurações de Site Definition; os arquivos não são transferidos junto com as
configurações de site. Para manter ou incluir arquivos na transferência, é necessário
transferir a pasta-raiz com todos os arquivos para o novo local, além de exportar o site. Se
você utilizar a opção de acesso remoto Local/Network, talvez precise atualizar o caminho
para a pasta remota no site importado.
Criando conexões a servidores

Você pode configurar conexões rápidas a servidores remotos para transferir arquivos sem
ter de passar pelo processo de definir um site. Utilizar um site do Dreamweaver, como o
que você configurou inicialmente na Lição 1 e trabalhou por toda esta lição, oferece aces-
so a um grande número de recursos de gerenciamento de site. Conexões a servidores que
utilizam FTP ou RDS (Remote Development Services) não fornecem acesso aos recursos
de gerenciamento de site do Dreamweaver que foram abordados nesta lição.
1. Escolha Computer (Macintosh) ou Desktop (Windows) no Menu Show no painel Fi-

les. Recolha Macintosh HD (ou qualquer que seja o nome da sua unidade de disco –
Macintosh) ou Meu Computador (Windows) se estiver aberto. Clique com o botão di-
reito do mouse ou utilize Ctrl-clique (para mouses de um único botão no Macintosh)
no item FTP & RDS Servers na lista de painéis Files e selecione Add FTP Server.
A caixa de diálogo Configure Server se abre.

Você também pode acessar a caixa de diálogo Configure Server escolhendo
Site > Manage Sites, clicando no botão New e escolhendo FTP & RDS Server no menu
que aparece.
Muitas das opções disponíveis aqui são semelhantes às da categoria Remote da caixa de
diálogo Site Definition.
2. Se você não tiver acesso a um servidor FTP, poderá clicar no botão Cancel.
Como talvez não tenha acesso a um servidor remoto enquanto completa esta lição, as in-
formações a seguir são apresentadas apenas para referência:
Description: Um nome ou uma descrição breve do servidor ao qual você está crian-
do uma conexão.
Access type: Você pode escolher FTP ou RDS. FTP é mais comum e é o descrito
aqui. A opção RDS deve ser selecionada somente ao conectar-se a um servidor que
está executando o ColdFusion.
FTP host: O nome de host do seu servidor Web (como adobe.com).
Host directory: O diretório no site remoto em que os documentos visíveis ao públi-
co são armazenados (também conhecido como raiz de site).
Login: Seu nome de login no servidor.
Password: Sua senha no servidor. Se remover a seleção da caixa de seleção Save, será
solicitada uma senha quando você conectar-se ao site remoto.
490 LIÇÃO 14
Ativando a compatibilidade com o Contribute
O Macromedia Contribute é um programa (incluído no Macromedia Studio 8) utilizado
principalmente por usuários não-técnicos, como editores de conteúdo, que talvez te-
nham pouca ou nenhuma experiência na criação, edição ou gerenciamento de Web sites.
O Contribute oferece aos desenvolvedores Web a capacidade de dividir a responsabilida-
de de edição e atualização do site com uma equipe, enquanto mantém controle sobre o
design, estilo, código e estrutura do site. Como o administrador de um Web site, você
pode configurar diversas opções para controlá-lo, incluindo configurar acesso do usuário
a seções específicas do site individualmente por usuário e especificar folhas de estilo (dis-
cutidas na Lição 4) e templates (estudadas na Lição 13) para que editores de conteúdo as
utilizem.
Uma versão de avaliação de 30 dias do Contribute 3 pode ser baixada do Web

site da Macromedia.
1. Escolha Site > Manage Sites, selecione o site de projeto Yoga Sangha e clique no
botão Edit.
A caixa de diálogo Site Definition for Yoga Sangha se abre.
2. Clique na guia Advanced se ainda não estiver selecionada. Escolha Contribute na

lista Category e clique na caixa de compatibilidade Enable Contribute.
Se Design Notes e Check In/Out não estiverem ativados antes de ativar o Con-
tribute, aparecerá uma mensagem para informá-lo de que trabalhar com o Contribute
requer que os recursos Design Notes e Check In/Out do Dreamweaver estejam ativa-
dos. Clique em OK para ativar os dois.

Depois de ativados, há várias outras configurações que exibem:
Site root URL: O URL completo do Web site que você está configurando para admi-
nistrar deve ser digitado nesse campo de texto na seção Contribute da caixa de diá-
logo Site Definition. (A guia Advanced da caixa de diálogo de Site Definition deve
estar ativa.) Depois de digitar o URL, clique no botão Test para verificar se o Dream-
weaver pode conectar-se ao site que você especificou.
Administration: O botão Administer Site In Contribute abre Contribute e permite
definir as configurações administrativas, como controlar acesso ao site. Para que
isso funcione, o programa Macromedia Contribute deve estar instalado no seu
computador.
Todas as outras configurações e opções para administrar um site com o Contribute são
configuradas no Contribute. Se não tiver o Contribute instalado no seu computador, você
não poderá prosseguir com o restante deste exercício – clique em Cancel para fechar a caixa
de diálogo Site Definition e clique em Done para fechar a caixa de diálogo Manage Sites.
3. Clique no botão Administer Site in Contribute. Clique no botão de opção Dream-

weaver-style editing e clique em Yes.
Se essa for a primeira vez que esse site é administrado utilizando o Contribute, você terá
de decidir entre as duas experiências de edição a seguir:
Standard word processing: Aplica estilos CSS inline a cada nova tag p. Os estilos
CSS definidos para um Web site normalmente fazem com que parágrafos sejam
renderizados juntos. Esse estilo é freqüentemente mais familiar aos usuários que
trabalharam com aplicativos de editoração eletrônica, que fornecem melhor con-
trole tipográfico. Usuários podem incluir mais espaço entre os parágrafos pressio-
nando Enter duas vezes para adicionar uma tag (p) de parágrafo HTML padrão.
Dreamweaver-style editing: Como com os editores de página Web, adiciona pará-
grafos HTML padrão utilizando tags p. Quando um usuário pressiona a tecla Enter,
o Contribute adiciona a tag HTML p; navegadores exibem uma linha em branco en-
tre parágrafos que utilizam a tag p.
492 LIÇÃO 14
Uma desvantagem da utilização de estilos CSS inline é a adição de tags de
marcação mais complexas à página. Isso pode tornar a estrutura HTML da página me-
nos clara para Web designers que visualizam as tags HTML.
Depois de escolher, você verá a caixa de diálogo Administer Websites com o seu nome
adicionado ao papel Administrator.
4. Clique em Close para fechar a caixa de diálogo Administer Websites. Uma caixa de
diálogo aparecerá perguntando se você quer deixar a senha Administrator em branco.
Clique em No para alterar a caixa de diálogo Administer Websites para a categoria
Administration e configure a senha Administrator. Na caixa de diálogo Administration,
clique no botão Set Administrator Passsword. Configure a senha como password.
Você precisará inserir a senha uma segunda vez para confirmar, então clique em OK.
Clique em Close para fechar a caixa de diálogo Administer Websites.
5. Selecione a categoria Remote Info e desmarque a caixa Enable File Check In And
Check Out. Clique em OK na caixa de diálogo Site Definition e em Done na caixa de
diálogo Manage Sites.
Como você não está criando o site de projeto Yoga Sangha em equipe, o recurso Check
In/Out não é necessário. O restante deste livro considera que Check In/Out está desativado.

Criando uma conexão no Contribute
Se tiver um Web site bem projetado que utiliza templates e CSS, poderá facilmente fa-
zer com que usuários finais criem e modifiquem páginas sem alterar ou causar danos no
design subjacente das suas páginas.
Estes passos só podem ser seguidos se você tiver o Contribute instalado no seu compu-
tador.
1. Carregue o Contribute. Dentro da barra Address digite o URL para o site Yoga
Sangha representado na pasta Lesson_14_Sites utilizando este URL: http://loca-
lhost/yogaRemote/Lesson_14_Sites/index.html.
Você visualizará a home page Yoga Sangha. Acima da home page haverá uma nota à
qual você ainda não criou uma conexão para esse Web site.
494 LIÇÃO 14
Criando uma conexão no Contribute
(continuação)
2. Clique no botão Create Connection. Clique em Next no Connection Wizard.
O Connection Wizard permite criar uma conexão para o Web site. Uma vez criada, você
pode então iniciar a criar e manter páginas no seu Web site utilizando Contribute.
Usuários finais normalmente não criarão suas próprias conexões porque você irá
criá-las. Como administrador, você normalmente irá configurar usuários e enviar chaves
de conexão; assim, os usuários finais não precisarão conhecer o funcionamento interno
da conexão.
3. Clique em Next porque o URL para o Web site já foi preenchido para você. Sele-
cione Local/Network como seu método de conexão. Clique no botão Choose e se-
lecione a pasta remota: C:\inetpub\wwwroot\yogaRemote\Lesson_14_Sites.
Clique em Next.
Você pode conectar-se a um Web site que utiliza o Contribute via FTP, Secure FTP, Lo-
cal/Network ou WebDAV.
4. No passo User Information do Connection Wizard, preencha seu nome e ende-
reço de e-mail. Clique em Next e então em Done para fechar o assistente.
Se você tiver múltiplas cópias do Contribute, utilize um nome de usuário diferente para
cada máquina com a cópia. Por exemplo, Bob(laptop) e Bob(Mac). Utilizar o mesmo
nome de usuário pode causar problemas porque você pode sobrescrever os checkouts
no outro computador.
Agora você está pronto para manter as páginas Web no site Yoga Sangha.

Realizou funções de gerenciamento de site dentro do painel Files, incluindo criar
novos arquivos, renomear e mover arquivos
Utilizou a caixa de diálogo Update Files para assegurar que seus caminhos e links
permaneceriam corretos quando você movesse os arquivos
Personalizou o painel Files e editou as colunas
Criou um mapa do site, visualizou-o horizontal e verticalmente, utilizou-o para ge-
renciar seus arquivos e aprendeu a salvar o mapa do site como uma imagem
Aprendeu a diferença entre um site local e um site remoto, como utilizar local/net-
work e FTP para conectar-se a servidores e a definir e editar os dois tipos de sites
Copiou arquivos para e de um site remoto utilizando o comando Select Newer Lo-
cal para economizar tempo
Bloqueou certos tipos de arquivos com o recurso Cloaking para impedir seu upload
ou download
Utilizou as opções de trabalho em equipe
Anexou uma nota de design a um arquivo, editou notas de design e aprendeu a utili-
zá-las para compartilhar informações com membros da equipe e a monitorar o sta-
tus de arquivos e versões
Aprendeu a exportar um site do Dreamweaver e a importar a definição de site para
transferir as configurações de site de um computador para outro
Aprendeu a criar conexões rápidas de servidor para transferir arquivos sem configu-
rar um site do Dreamweaver
Aprendeu a administrar o Contribute da Macromedia para que ele funcione para
pessoas que talvez não conheçam o Dreamweaver, como editores de conteúdo
496 LIÇÃO 14
Acessibilidade
15 e testes
Até este ponto nas lições, você testou páginas Web visualizando-as em um navega-
dor, normalmente depois de concluir um exercício. Quando construiu páginas indivi-
duais ou seções, você teve uma chance de ver a aparência dessas páginas e fazer mo-
dificações quando necessário. Entretanto, antes de disponibilizar um site para o públi-
co geral ou ao seu público pretendido, você deve ir mais adiante e testar o site inteiro.
Reserve tempo extra para certificar-se de que solucionou todos os problemas em po-
tencial. Se você tiver acesso a um servidor de teste – um servidor remoto em que você
pode testar seu site sem torná-lo publicamente disponível – é uma boa idéia carregar o
site nesse servidor e acessar as páginas em todos os tipos de computador e com as
muitas possíveis versões de navegadores. Teste as páginas sob as condições de um
usuário real. Se você acha que a maioria de seus usuários utilizará uma conexão por
modem discada, certifique-se de usar um modem dial-up para testar a velocidade em
que as páginas são carregadas. Se você for o principal desenvolvedor Web, peça a ou-
tros para testar suas páginas. Observe como outras pessoas tentam navegar o site e
depois considere a usabilidade: o site é intuitivo e funcional? Certifique-se de testar
cada link e corrigir qualquer link rompido. Lembre-se de que nem todos os usuários
pensam da mesma maneira – tente se preparar para o inesperado enquanto verifica o
site inteiro. Analise quais os possíveis caminhos um visitante pode fazer. Faça uma lis-
Neste projeto, você utilizará o Dreamweaver

para testar páginas Web quanto à acessibilidade.
Você também testará os links no site do seu
projeto e utilizará relatórios para determinar
como o site está funcionando e quais
navegadores, se houver algum, podem
apresentar problemas ao acessar seu site.
ACESSIBILIDADE E TESTES 497

ta de tarefas potenciais que seus espectadores podem realizar (pesquisar e comprar
um item, procurar informações de contato e assim por diante) e siga passo a passo o
que esses visitantes precisarão fazer para concluir a tarefa.
O ideal é você não esperar para iniciar o processo de testes só quando o Web site esti-
ver concluído. Iniciando logo o processo de testes e incorporando-o como uma parte
do processo de produção, você pode identificar e resolver problemas rapidamente. Se
você espera até o fim, depois de ter passado horas ou semanas de trabalho no seu
site, é possível que talvez identifique um erro que exigirá muito tempo para corrigir em
todo o site. Se conseguir descobrir esses problemas no início, você poderá abordá-los
e poupar muito seu tempo e de sua equipe Web.
Em qualquer site, grande ou pequeno, a tarefa de testar tudo pode ser desanimadora.
Você trabalhou muito no conteúdo e no design, mas se os usuários ficam frustrados
por causa de links quebrados, páginas que não funcionam em seus navegadores ou pá-
ginas grandes e muito lentas para carregar, você os perde. Nesta lição, você aprenderá
a utilizar o Macromedia Dreamweaver em seu processo de testes gerando relatórios
do site para descobrir se as páginas são compatíveis com certos navegadores. Você
também aprenderá a verificar links em todo o site e a testá-los quanto à acessibilidade.

Testar a acessibilidade do seu site
Testar a compatibilidade de seu site com navegadores
Testar os links no site
Criar relatórios do site
Verificar a existência de arquivos órfãos
Verificar a ortografia
Tempo aproximado
Esta lição deve levar aproximadamente uma hora e meia para ser concluída.
Arquivos da lição
Arquivos de mídia:
Lesson_15_Testing/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_15_Testing/…(todos os arquivos)
498 LIÇÃO 15
Testes de acessibilidade
Você pode gerar relatórios sobre páginas dentro de seus sites para determinar se eles estão
em conformidade com os padrões de acessibilidade.
1. Abra access_check.html na pasta Lesson_15_Testing. Escolha Site > Reports.

A caixa de diálogo Reports se abre.
2. Selecione Current Document from the Report no menu. Clique para marcar a caixa
Accessibility na seção HTML Reports. Deixe todas as outras opções desmarcadas e
clique no botão Run.
Uma lista de resultados é exibida na guia Site Reports no painel Results. Cada item indica
o nome de arquivo do documento em que foi encontrado – que, neste caso, é o documen-
to atual, access_check.html – junto com o número da linha em que o item pode ser locali-
zado no código e uma breve descrição do item.

3. Selecione o quinto item na lista, que inicia com “Color is not essential”. Clique no
ícone More Info no lado esquerdo da janela Results.
Uma descrição mais detalhada aparece no painel Reference, localizado no grupo de pai-
néis Results. Essa descrição fornece informações específicas sobre a regra particular de
acessibilidade em questão, bem como sugestões de métodos que podem tornar suas pági-
nas mais acessíveis.
500 LIÇÃO 15
Cor, brilho e contraste são importantes elementos a considerar ao construir
seu Web site. As telas de monitor freqüentemente variam de maneira acentuada; em
geral, as telas do Windows tendem a ser bem mais escuras do que as telas do Macin-
tosh. Você pode testar suas páginas utilizando configurações diferentes para calibrar o
monitor. Também é bom utilizar vários monitores para testar a página.
O Dreamweaver fornece vários livros no painel Reference por meio dos quais você
pode aprender mais sobre o código utilizado para criar páginas Web. A UsableNet Acces-
sibility Reference fornece uma maneira rápida de obter uma explicação completa dos vá-
rios padrões requeridos pela Section 508, os quais você aprendeu na Lição 5.
Como com todos os painéis, você pode redimensionar o painel Reference.

Expandi-lo pode ajudá-lo a ler o conteúdo. Quando o painel é reduzido, pode ser difícil
ler as informações que ele contém.
4. Verifique se UsableNet Accessibility Reference está selecionado no menu

drop-down Book na parte superior do painel Reference. No menu Rule do painel Refe-
rence, escolha Spacer IMG with Valid ALT.
A descrição do padrão de acessibilidade selecionado aparece no painel Reference. Exibida

em verde logo acima do texto está a localização específica desse padrão de acessibilidade
na Section 508. A descrição fornece as informações sobre a necessidade de utilizar o texto
alternativo adequado para todas as imagens espaçadoras e decorativas (não-essenciais)
utilizadas. Você aprendeu a especificar o atributo alternativo de imagens na Lição 5; na
mesma lição, utilizou a opção <empty> disponível no menu Alt no inspetor Property para
imagens espaçadoras e outras imagens semelhantes que servem somente a um propósito
estético gráfico – isto é, elas não transmitem informações vitais ao visitante.
5. Feche (Macintosh) ou recolha (Windows) o painel Results e o arquivo access_

check.html.
O painel Reference será particularmente útil para desenvolver Web sites acessíveis depois
de começar a trabalhar diretamente no código, como você aprenderá na Lição 16.

Verificando a compatibilidade de navegador
Muitos dos elementos que você pode adicionar ao seu trabalho com páginas Web só fun-
cionarão nas versões mais recentes de navegadores. Cascading Style Sheets (CSS) e cama-
das, por exemplo, só são suportadas em navegadores 4.0 ou superiores. Antes de disponi-
bilizar um Web site para o público, você deve testar suas páginas de modo que tenha
chance de corrigir qualquer erro e certificar-se de que seu público pode visualizar as pági-
nas como deseja que sejam vistas. Para desenvolver um Web site acessível, você pode
identificar os navegadores de destino e fazer o design de suas páginas tendo-os como refe-
rência. Se suas páginas são direcionadas às pessoas que podem estar utilizando dispositi-
vos de mão, leitores de tela ou outras formas além dos navegadores padrão para acessar as
páginas, você deve testar seu site com esses dispositivos e aplicações de software.
Neste exercício, você utilizará o Dreamweaver para testar a HTML em suas páginas
contra um perfil de navegador e determinar se esse navegador suporta o código em sua
página. Você pode executar uma verificação de navegador em um arquivo, uma pasta ou
no site inteiro salvo. O Dreamweaver informa apenas os erros – ele não faz nenhuma alte-
ração nos arquivos. Para tornar seu site compatível, é necessário levar em conta o relatório
de erros do Dreamweaver e modificar as páginas em seu site de maneira correspondente
até chegar a uma solução aceitável. O que é aceitável pode variar de site para site e depende
de seu público pretendido.
1. Abra o arquivo check_browser.html na pasta Lesson_15_Testing/Check_Browser.

Nos passos a seguir, você realizará uma verificação para um navegador-alvo nesse arquivo.
2. Clique no menu Check Target Browser na barra de ferramentas Documento e esco-

lha Show All Erros. A opção Auto-check on Open deve estar ativa.
Você também pode escolher File > Check Page > Check Target Browsers.
Sempre que se abre um documento, o Dreamweaver varre automaticamente a página, ve-

rificando a existência de erros no navegador. O ícone Check Target Browser na barra de
ferramentas Document muda dependendo se algum erro foi detectado ou não: se não
houver nenhum erro, mas possivelmente avisos e mensagens informacionais, ele exibe
502 LIÇÃO 15
uma marca de seleção verde. Se erros forem localizados, ele exibe um ícone de aviso de
amarelo.
A guia Target Browser Check do painel Results se abre.
No painel Results, os erros são indicados por octógonos vermelhos com pontos de ex-
clamação em branco. Os avisos são representados por triângulos amarelos com pontos de
exclamação em preto. Os erros são sinais de que há algo errado com o código, que causará
erros no navegador ou outro problema sério de visualização. Os avisos também sinalizam
problemas de vídeo em potenciais, embora sejam de natureza menos séria e geralmente
não afetem a exibição ou a funcionalidade de uma página tanto quanto um erro pode fa-
zer. Você talvez também veja mensagens informativas aparecerem no painel Results – elas
geralmente alertam sobre código que, embora talvez não seja suportado em um navega-
dor particular, simplesmente é ignorado.
Nesse caso, um erro e dois alertas foram encontrados no documento check_brow-
ser.html.
Você pode fechar o painel Results ou simplesmente movê-lo para o lado.
3. Escolha Settings no menu Check Target Browser na barra de ferramentas Docu-

ment e escolha 3.0 no menu Netscape Navigator version para verificar esse navega-
dor em relação à página; então clique em OK.

O ícone Check Target Browser na barra de ferramentas Document agora exibe o triângulo
amarelo, avisando que partes do documento são incompatíveis com um dos navegadores
em que o Dreamweaver está configurado para verificar a página.
O painel Results atualiza e exibe o(s) erro(s) associado(s) ao documento.
Se o painel Results não atualizar, feche-o e escolha Show All Erros no menu
Check Target Browser na barra de ferramentas Document.
4. Dê um clique duplo no erro da tag Style que é exibido como o terceiro na parte su-
perior do painel Results.
Talvez você tenha de rolar no painel Results para localizar o erro da tag Style,
que é o terceiro erro.
Quando você dá um clique duplo em um erro, o Dreamweaver permite saber exatamente

onde esse erro ocorre. A janela Document alterna para visualização Split, e a tag <style> é
destacada no código. O código problemático também é sublinhado com linhas onduladas
vermelhas (pode ser difícil ver a cor quando o código está selecionado). Somente erros são
indicados no código por essas linhas vermelhas – os avisos vermelhos e as mensagens in-
formacionais aparecem somente em relatórios e no painel de resultados. Essa opção pode
ser extremamente útil quando você estiver tentando corrigir erros em seus documentos.
504 LIÇÃO 15
Neste caso, você não precisa fazer nenhuma modificação porque a versão 3.0 do Nets-
cape simplesmente ignora essa tag. Esse item é considerado um erro e não um aviso por-
que mesmo que a tag seja ignorada, a falta de suporte pode causar problemas potenciais
de exibição, ou resultados inesperados. Quando estiver desenvolvendo suas páginas Web,
é melhor testá-las para certificar-se de que nenhum código ou elemento não suportado
em certos navegadores degrade ou falhe de maneira elegante. Quando um comportamen-
to “falha de maneira elegante”, ele não produz nenhum erro ou aviso no navegador (em-
bora você ainda possa ver erros e avisos no Dreamweaver); os navegadores simplesmente
ignoram esses elementos que não suportam. Se um erro aparece no navegador, você pode
querer modificar sua página de maneira apropriada, para desenvolver uma alternativa
que não produza um erro visível.
5. Escolha Settings do menu Check Target Browser na barra de ferramentas Docu-

ment e marque a caixa Opera para incluir o navegador Opera na verificação do Nave-
gador. Clique em OK.
O painel Results agora exibe vários erros adicionais que podem ser encontrados em várias
versões do Opera, um navegador alternativo popular.
O Dreamweaver utiliza perfis de navegador para verificar se o documento con-

tém erros. Informações sobre tags, atributos e elementos suportados – bem como
alertas, mensagens de erro e sugestões de substituição de tags – podem ser incluídas
nos perfis dos navegadores. Você pode criar ou adicionar perfis a navegadores que
não estão incluídos nesta lista (como navegadores do tipo WebTV e navegadores de
telefones celulares) utilizando um perfil de navegador que já foi desenvolvido ou crian-
do um você mesmo. Você pode encontrar perfis adicionais de navegador no Web site
Dreamweaver Exchange: http://www.macromedia.com/go/dreamweaver_exchange/.

6. Clique no ícone Browse Report no lado esquerdo da caixa de diálogo Results. Revi-
se as informações apresentadas no navegador; em seguida, retorne ao Dreamweaver.
Um relatório detalhado agora é exibido em uma janela de navegador. Uma lista de nave-
gadores alvo indica o número de erros e avisos que são localizados para cada versão de na-
vegador na lista.
O recurso Check Target Browser é executado quando você abre um documento e exe-
cuta manualmente o teste escolhendo Show All Erros no menu Check Target Browser. O
ícone na barra de ferramentas do documento não é atualizado continuamente durante
seu trabalho.
7. Utilize o painel Files para selecionar a pasta Check_Browser na Lesson_15_Tes-

ting. No painel Results, clique no menu Check Target Browser, indicado pela seta ver-
de no canto superior esquerdo da guia Target Browser Check e escolha Check Target
Browsers For Selected Files/Folders In Site.
506 LIÇÃO 15
No Macintosh, o menu/botão Check Target Browser aparecerá destacado depois que você
selecionar a opção Check Target Browsers For Selected Files/Folders In Site – você preci-
sará clicar no botão para executar a verificação. No Windows, a verificação é automatica-
mente executada depois que você faz sua seleção – não é preciso clicar nela novamente.
Não é necessário fazer uma seleção do menu Show no painel Results – o

Dreamweaver muda automaticamente para Site Report quando você escolhe Check
Target Browsers For Selected Files/Folders In Site.
O teste executa, e um relatório é exibido na guia Target Browser Check da caixa de diálogo
Results.
Há diferenças na maneira como seu site é exibido em cada versão de navegador. Talvez
seja preciso fazer trocas ou compensações entre aparência e funcionalidade. Certas roti-
nas de JavaScript, por exemplo, produzem mensagens de erro nos navegadores que não as
suportam; outras rotinas de JavaScript simplesmente não funcionam e o visitante pode
nem saber disso. Para atingir o público mais amplo possível, você precisa criar um Web
site que seja livre de erros para navegadores mais antigos. É muito melhor para os visitan-
tes perderem certos recursos do que visualizarem mensagens de erro. Se seu público utili-
za uma ampla variedade de navegadores, você pode querer certificar-se de que a navega-
ção de suas páginas não conta com recursos que podem não ser suportados em navegado-
res mais antigos (ou fornecer páginas alternativas para aqueles que não estão utilizando as
versões mais recentes ou que podem estar usando aplicações Internet muito diferentes).
8. Escolha Settings no menu Check Target Browser na barra de ferramentas Docu-

ment. Retorne a configuração aos padrões escolhendo 4.0 a partir do menu Netscape
Navigator version, marcando a caixa Microsoft Internet Explorer e escolhendo 5.0 no
menu e desmarcando a caixa Opera. Clique em OK para fechar a caixa de diálogo.
Você também pode selecionar Settings no menu Check Target Browser no

painel Results.

As configurações Check Target Browser agora voltaram ao padrão original do Dream-
weaver. Ao decidir que navegadores terá como alvo, considere as últimas tendências de
navegadores e seu público-alvo. Depois de disponibilizar seu site para o público, você
pode continuar a avaliar quais sãos os navegadores-alvo utilizando estatística e programas
de Web sites que reúnem e avaliam essas informações para descobrir quais navegadores
seus visitantes estão utilizando mais. Talvez você precise conversar com seu host de Web,
provedor de serviços ou administrador de sistema para obter informações adicionais.
Muitos Web designers testam as páginas em várias versões de Netscape, Explorer e ou-
tros navegadores. É uma boa idéia ter várias versões de navegadores em seu computador
por essa razão.
Você pode fechar qualquer arquivo aberto.
Verificando links no site

Não é incomum para um Web designer adicionar, excluir ou alterar os nomes de arquivo
de páginas em um site durante o processo de desenvolvimento. Pode ser fácil examinar
páginas que estão vinculadas a arquivos excluídos ou renomeados e que não foram atuali-
zadas. Pode ser bastante frustrante para os visitantes receber a mensagem “404: File Not
Found”, indicando que uma página está faltando quando clicam em um link.
Neste exercício, você utilizará o recurso Check Link para localizar esses links ausentes.
O Dreamweaver só pode verificar links para arquivos dentro do site. Os links externos são
listados, mas cabe a você testar esses links e certificar-se de que os links externos sejam
URLs válidos.
1. Abra links.html da pasta Check_Link Links.html na pasta Lesson_15_Testing.

Escolha File > Check Page > Check Links.
A guia Link Checker da caixa de diálogo Results se abre. A opção Broken Links deve estar
selecionada por padrão quando você executa Check Links; qualquer link interrompido é
exibido na coluna Broken Links. Se Broken Links não estiver selecionada, escolha-a no
menu Show.
Neste exercício, somente um link interrompido é exibido na lista.
508 LIÇÃO 15
Você também pode utilizar o atalho pelo teclado Shift+F8 para abrir a janela de
relatórios Link Checker.
2. Clique no nome do arquivo para o qual o link interrompido aponta: ../About.html.

O nome de arquivo é destacado e um ícone de pasta aparece à direita do link interrom-
pido.
3. Substitua ../About.html digitando About.html no seu lugar; então, pressione Return

(Macintosh) ou Enter (Windows).
Você também pode clicar no ícone de pasta e navegar para o arquivo correto a fim de vin-
culá-lo.
Se houvesse qualquer outra referência interrompida para o mesmo arquivo, uma caixa
de diálogo se abriria, perguntando se você deseja corrigir as outras referências também.
Clicar em Yes corrigirá todas as referências ao arquivo.
Você também pode verificar arquivos ou pastas selecionando-os no painel Fi-

les e clicando no menu de contexto do grupo de painéis Files e escolhendo > Check
Links. Se quiser visualizar o documento ou corrigir os links utilizando o inspetor Pro-
perty, dê um clique duplo no nome do arquivo na janela Link Checker para abrir o arqui-
vo. Você utilizou o menu de contexto com o painel Files na Lição 14.
Você pode salvar e fechar este arquivo e deixar o painel Results aberto.
Verificando arquivos órfãos

No processo de criação de um Web site, você constrói novos arquivos, bem como revisa e
substitui os antigos. Por toda a fase de desenvolvimento, você pode desenvolver várias
versões de certos arquivos ou esquecer completamente outros arquivos. Um arquivo ór-
fão é aquele que é incluído com os arquivos do site, mas não é utilizado em seu site. Esses
arquivos podem ser arquivos HTML que não tenham nenhum link apontando para eles
ou imagens que não foram utilizadas em nenhuma página.

1. No painel Files, selecione a pasta raiz local para o Web site de projeto, Yoga Sangha.
Para executar um relatório de arquivos órfãos, é necessário primeiro executar uma verifi-
cação de link no site inteiro.
2. Clique na guia Link Checker da caixa de diálogo Results e verifique se Broken Links
está selecionada no menu drop-down Show. Clique no ícone Check Links (a seta ver-
de) e escolha Check Links For Entire Current Local Site no menu Check Links.
510 LIÇÃO 15
Os usuários de Macintosh precisarão clicar no menu/botão Check Links agora destacado
para iniciar o processo de verificação de link. O processo iniciará no Windows imediata-
mente depois de a opção Check Links For Entire Site for selecionada.
A barra de status do painel Results indica que o Dreamweaver está verificando o site.
Quando o processo é concluído, uma grande lista aparece na caixa de diálogo. A barra de
status do painel Results exibe um resumo do relatório.
3. No menu Show, escolha Orphaned Files.

Uma lista de arquivos órfãos aparece na caixa de diálogo.
4. Feche (Macintosh) ou recolha (Windows) o painel Results.

Excluir arquivos órfãos pode reduzir a quantidade de espaço em disco utilizado por seu
site. É particularmente útil realizar manutenção regular em sites grandes. Identificar e re-
mover todos os arquivos órfãos pode ter um grande impacto no tamanho de seu site.
Quando excluir arquivos órfãos, certifique-se de revisar completamente a lista de ar-
quivos. Pode haver arquivos úteis que sejam necessários em seu site que não estão vincu-
lados ou utilizados em nenhum outro arquivo.
Para este exercício, não exclua nenhum dos arquivos órfãos listados. Os arquivos no
site de projeto Yoga Sangha são necessários para a conclusão das lições deste livro. Há al-
guns links interrompidos e arquivos órfãos na lista de resultados porque esse site de proje-
to foi feito para fornecer os arquivos a fim de acompanhar as lições e não é um site real.

Gerando relatórios para um site
Enquanto estiver testando seu site, você pode compilar e gerar relatórios em vários atribu-
tos HTML utilizando o comando Reports, que permite verificar várias opções, incluindo
procurar documentos sem nome e tags aninhadas redundantes. Você pode gerar relató-
rios sobre um único documento, uma pasta ou sobre o site inteiro para ajudá-lo a locali-
zar e solucionar problemas potenciais antes de publicar seu site.
1. Selecione a pasta Reports na pasta Lesson_15_Testing no painel Files. Clique no

menu Options do grupo de painéis Files (Macintosh) e escolha Site > Reports.
A caixa de diálogo Reports se abre.
2. Escolha Selected Files In Site no menu Report On. Deixe todas as opções na área
Workflow desmarcadas. Marque todas as opções na área HTML Reports, exceto
Accessibility.
As opções Workflow são mais úteis quando você está colaborando com uma equipe Web
e precisa ver rapidamente quem verificou os arquivos e quais notas de design foram cria-
das. Os recursos Check In/Out e Design Notes foram abordados na Lição 14.
As opções de HTML Reports verificam quanto a tags de fontes aninhadas combináveis,
acessibilidade, texto alt ausente, tags aninhadas redundantes, tags vazias removíveis e do-
cumentos sem nome.
Você pode escolher executar relatórios no documento atual, um site local inteiro, ar-
quivos selecionados em um site e uma pasta específica.
512 LIÇÃO 15
3. Clique em Run para criar o relatório.
Uma lista de resultados é exibida no painel Results. Nesse caso, o Dreamweaver alerta que
o documento About.html não recebeu um nome.
4. Clique em Save Report no canto inferior esquerdo do painel Results e salve o rela-
tório na pasta Lesson_15_Testing.
Todos os relatórios são salvos como arquivos XML com a extensão de arquivo .xml.
O comando Reports lista problemas em suas páginas, mas não os corrige.
Depois de executar os relatórios, você pode utilizar Clean Up HTML em qual-

quer documento aberto escolhendo Commands > Clean Up HTML. Esse comando
corrige muitos, mas não todos, os problemas encontrados no relatório do site. Uma
caixa de diálogo aparece com um número de itens que você pode escolher para o Dream-
weaver remover: tags vazias, tags aninhadas redundantes, comentários HTML não-
Dreamweaver, comentários HTML Dreamweaver e tags específicas. Você também
pode optar por combinar tags <font> aninhadas quando possível (se tags <font> fo-
rem utilizadas nas suas páginas) e para mostrar o log na conclusão. O log fornece uma
lista detalhada das alterações feitas no documento. Informações adicionais sobre esse
recurso serão dadas na Lição 16 quando você trabalhar com o código.
Verificando a ortografia
A ortografia correta é um importante aspecto da aparência de seu Web site. O Dreamwea-
ver pode verificar a ortografia de texto em suas páginas Web, de maneira muito semelhan-
te a um processador de texto como o Microsoft Word.
1. Abra o arquivo check_spelling.html na pasta Lesson_15_Testing. Escolha Text >

Check Spelling.
A caixa de diálogo Check Spelling se abre com a palavra Sangha selecionada.

2. Clique no botão Ignore para pular a palavra Sangha e clique nele uma segunda vez
para pular a palavra Anusara.
A palavra Trainning agora deve estar selecionada. Uma lista de palavras sugeridas com or-
tografias semelhantes aparece. Selecione Training na lista e clique no botão Change.
Você pode salvar e fechar o documento check_spelling.html e fechar o painel Results cli-
cando no menu de contexto do painel Results panel e fechando o grupo de painéis Close.

Descobriu como o Dreamweaver pode ajudar a construir páginas Web acessíveis
Utilizou perfis de navegador para testar páginas individuais, pastas ou um site intei-
ro quanto à compatibilidade do navegador e descobrir se há algum erro ou tags não
suportadas
Testou os links em suas páginas para localizar rapidamente qualquer link interrom-
pido dentro do site
Verificou e visualizou uma lista de arquivos órfãos
Criou relatórios de site para localizar problemas comuns no site como tags aninha-
das redundantes e documentos sem nome
Verificou e corrigiu a ortografia em um documento
514 LIÇÃO 15
Editando
16 o código
Você pode ganhar mais controle sobre muitos dos elementos nas páginas Web depois
de familiarizar-se com o código utilizado para criar essas páginas e com como editá-lo
ou até mesmo escrevê-lo a partir do zero (também conhecido como codificação ma-
nual). O Macromedia Dreamweaver faz grande parte do trabalho para você; ele econo-
miza seu tempo criando o código em background enquanto você projeta as páginas vi-
sualmente. Entretanto, o Dreamweaver é muito mais do que um simples editor visual.
Ele fornece uma extensa gama de ferramentas e recursos para codificação manual e
edição de código. Esses recursos permitem que programadores avançados façam mo-
dificações precisas, solucionem problemas de documentos e utilizem os mais recen-
tes progressos no desenvolvimento de código – mesmo que esses avanços vão além
do que está disponível no Dreamweaver. A capacidade de introduzir itens que o Dream-
weaver pode não reconhecer e o nível de controle que você tem sobre o código criam
um programa muito flexível que você pode utilizar ao mesmo tempo em que se man-
Nesta lição você

trabalhará
diretamente com o
código, utilizando
recursos como
Snippets e o Quick
Tag Editor para
acelerar o processo.
EDITANDO O CÓDIGO 515

tém atualizado no mundo em rápida mudança do desenvolvimento Web. Mesmo co-
mo iniciante, você pode empregar esses recursos e ferramentas de código do Dream-
weaver para aprender o código. Você pode utilizar o Dreamweaver para trabalhar com
uma variedade de linguagens de programação diferentes incluindo JavaScript, Cold-
Fusion, ASP, JSP, XML e mais. Nesta lição, você trabalhará com Hypertext Markup
Language (HTML).
Nesta lição, você aprenderá a editar o código e empregar muitas das ferramentas que
o habilitarão a criar o código manualmente. Esta lição foi projetada para fornecer uma
introdução básica aos extensos recursos de edição de código disponíveis no Dream-
weaver – uma exploração completa e avançada dessas ferramentas está fora do esco-
po deste livro.
Para ver exemplos das páginas concluídas deste capítulo, abra training.html e asa-
na.html na pasta Lesson_16_Code/Completed/Training.

Aprender a alternar entre visualizações de documento
Utilizar a visualização Code para editar HTML
Utilizar a barra de ferramentas Code
Criar tags meta e comentários de HTML
Utilizar o inspetor Tag
Utilizar o Quick Tag Editor
Utilizar snippets
Limpar HTML
Limpar Word HTML
Estender o Dreamweaver
Tempo aproximado
516 LIÇÃO 16
Arquivos da lição
Arquivos de mídia:
Lesson_16_Code/Images/…(todos os arquivos)
Arquivos iniciais:
Lesson_16_Code/Training/training.html
Lesson_16_Code/Training/asana.html
Projeto concluído:
Lesson_16_Code/Completed/Training/training.html
Lesson_16_Code/Completed/Training/asana.html
Alternando entre visualizações do documento

Enquanto desenvolve suas páginas, talvez você precise visualizar o código-fonte gerado
pelo Dreamweaver. Talvez uma quebra de linha perdida ou outro caractere despercebido
esteja arruinando o efeito que você está tentando alcançar, mas você não consegue locali-
zá-lo na janela Document. Entretanto, examinando o código-fonte HTML, é possível lo-
calizar e remover facilmente a quebra de linha.
O Dreamweaver fornece três opções para visualizar documentos: a visualização De-
sign, que mostra todos os objetos (texto, imagens, tabelas etc.) adicionados à página; a vi-
sualização Code, que mostra somente o código de origem HTML; e a visualização Split,
uma combinação da visualização Code com a visualização Design. No próximo exercício,
você verá cada uma dessas visualizações.
1. Abra o documento training.html na pasta Lesson_16_Code/Training.

A barra de ferramentas de documento é exibida na parte superior da janela Document no
Macintosh e acima da janela Document como seu próprio painel no Windows.

Se a barra de ferramentas de documento não estiver visível, escolha View >
Toolbars > Document.
2. Clique no botão Code na barra de ferramentas do documento.
Você também pode escolher View > Code para mudar para visualização Code.
Na visualização Code, você não vê os elementos visuais da página Web como eles aparece-
riam em uma janela de navegador. Em vez disso, você vê o código de HTML em um editor
de textos. A barra de ferramentas de documento contém os seguintes controles relaciona-
dos com o código:
Refresh Design View: Esse recurso atualiza a visualização Design (a representação
visual de sua página) para refletir qualquer mudança feita na visualização Code du-
rante a utilização da visualização Split.
View Options: Esse menu fornece opções que ajustam a exibição da visualização
Code. Você pode adicionar números de linha a cada linha do código, ativar a quebra
de linha para eliminar a rolagem horizontal, facilitando a visualização do código e
assim por diante. Você pode personalizar qualquer uma dessas opções escolhendo
Botão Refresh Botão View

Design View Options
518 LIÇÃO 16
Dreamweaver > Preferences (Macintosh) ou Edit > Preferences (Windows) e sele-
cionando a categoria Code Format.
Você também pode abrir o inspetor Code, que fornece as mesmas opções e
controles que a visualização Code. A diferença é que o inspetor se abre em uma janela
separada. Alguns desenvolvedores utilizam dois monitores e colocam o inspetor Code
em uma tela para visualizar simultaneamente o código enquanto trabalham na visuali-
zação Design da janela Document. Isso oferece uma função semelhante à visualização
Split, ao mesmo tempo em que fornece mais espaço para cada visualização. Para abrir
o inspetor Code, escolha Window > Code Inspector ou pressione a tecla F10.
3. Clique no botão Split na barra de ferramentas de documento.
Você também pode mudar para visualização Split escolhendo View > Code and
Design.
Nessa visualização, você pode ver tanto o design como o código que cria a página. Você
pode redimensionar o painel HTML arrastando a borda entre os painéis Design e HTML.
Para alterar a localização do painel HTML, clique no botão View Options na barra de fer-
ramentas e escolha Design View On Top no menu. Esse menu também contém outras op-
ções para ajustar a visualização, incluindo réguas, auxílios visuais e a grade.

4. Clique no botão Design na barra de ferramentas.
Você também pode escolher View > Design para mudar para a visualização
Design.
A janela Document muda para a visualização Design, que mostra como serão aproxima-
damente todos os elementos visuais de sua página no navegador. Como nas outras visua-
lizações de documento, você pode acessar várias opções de visualização pela barra de fer-
ramentas.
Editando HTML na visualização Code

Você pode editar código manualmente, e o Dreamweaver não sobrescreve essas altera-
ções. Entretanto, se uma alteração que for feita parecer errada, o Dreamweaver a destaca
para chamar sua atenção ao código. Às vezes, talvez você precise ajustar o código manual-
mente, como demonstrado nos passos a seguir.
1. No documento training.html, posicione o ponto de inserção em qualquer lugar

dentro do formulário e clique na tag <table> no seletor de tags.
A tabela aninhada agora está delineada com uma linha preta espessa para indicar que ela
está selecionada.
2. Visualização Switch to Split. Localize o começo da tabela no código. Ele deve apa-
recer como mostrado a seguir:
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="10">
Como a tabela é selecionada na visualização Design da janela Document, o código corres-

pondente na visualização Code também é destacado. Para localizar a tag de abertura da
tabela, veja o começo da seleção na visualização Code.
Essa tabela não tem um resumo que descreve o propósito da tabela. Ao inserir uma ta-
bela, existem vários recursos de acessibilidade disponíveis, incluindo a opção de criar um
resumo para a tabela. Entretanto, depois que uma tabela foi inserida, você não pode adi-
cionar um resumo a menos que faça isso pelo código ou pelo inspetor Tag.
3. No painel de visualização Code, coloque o ponto de inserção antes do caractere >

no fim da tag de abertura da tabela.
O painel de visualização Code aparece com uma linha espessa em torno das
bordas do painel (Macintosh) ou uma margem destacada (Windows) para indicar que
ele está ativo.
520 LIÇÃO 16
Para aprender mais sobre qualquer uma das tags HTML que você vê na visualização Code,
posicione seu ponto de inserção em qualquer lugar dentro de uma tag e pressione
Shift+F1. A guia Reference da janela Results se abre, o que exibe automaticamente as in-
formações sobre um atributo atualmente selecionado – esse é espaçamento de célula (cell-
spacing) porque é o último atributo definido na tag table de abertura em que o ponto de
inserção está. Você pode escolher outras tags a partir do menu Tag na parte superior do
painel Reference. Por exemplo, selecionar TABLE a partir do menu Tag apresenta infor-
mações sobre a tag <table>. Um menu adicional, localizado à direita do menu Tag, per-
mite selecionar um atributo específico da tag <table> ou ler uma descrição detalhada da
própria tag <table> escolhendo Description. Por exemplo, você poderia escolher Sum-
mary a partir desse menu para aprender mais sobre o atributo summary que criará nos
passos a seguir.
Você pode ler informações introdutórias sobre a O’REILLY HTML Reference

utilizando o menu Book na parte superior do painel Reference para selecionar um livro
diferente. Então, utilize o menu Book para selecionar O’REILLY HTML Reference no-
vamente, o que faz com que o material de referência de HTML se abra na parte de in-
formações introdutórias, sem nenhuma tag selecionada.

4. No painel da visualização Code, pressione a barra de espaço e você verá uma lista
dos atributos para a tag <table>.
Ao utilizar a visualização Code, o Dreamweaver fornece um recurso conhecido como
Code Hinting. Code Hints (dicas de código) exibem atributos de uma tag à medida que
você digita. Você pode digitar letras e elas corresponderão à string digitada até você en-
contrar o atributo que deseja.
5. Digite su e isso corresponderá os pressionamentos de teclas ao atributo summary.

Depois que o atributo summary está selecionado, pressione Enter (Windows) ou Re-
turn (Macintosh). A string summary=”” é adicionada à tag e seu ponto de inserção per-
manecerá entre as aspas duplas. Digite “Please enter your contact information and in-
formation about your experiences with yoga” [Por favor insira suas informações de
contato e as informações sobre suas experiências com yoga”] dentro das aspas du-
plas. Clique no painel de visualização Design para atualizar o documento.
Você também pode clicar no botão Refresh que aparece no inspetor Property
depois que fizer uma alteração no código.
Se você cometer um erro durante a edição do código HTML, o Dreamweaver não o corri-
ge. O Dreamweaver tem um recurso chamado Highlight Invalid HTML (que está desati-
vado por padrão) que destaca em amarelo brilhante o código que parece inválido. Você
mesmo tem de fazer as correções. Esse recurso é uma das vantagens do Dreamweaver, co-
nhecido como RoundTrip HTML. O fato de que o Dreamweaver não altera o código é im-
portante porque às vezes o Dreamweaver encontra código que parece inválido e que foi
utilizado por alguma razão. Por exemplo, você pode adicionar tags especiais que seu ser-
vidor da Web reconhece mas que não são HTML padrão. O Dreamweaver as deixa intac-
tos. O destaque Invalid Markup aparece apenas no Dreamweaver e não afeta o que é visto
no navegador. O inspetor Property informa que a seleção é Invalid Markup e lista a tag
522 LIÇÃO 16
problemática, junto com informações adicionais relativas à razão pela qual o código é in-
válido e uma sugestão sobre como corrigir o problema.
Você pode ativar ou desativar o destaque Invalid Markup na visualização Code esco-
lhendo View > Code View Options > Highlight Invalid HTML. Você não pode desativar o
destaque visualização de Invalid Markup.
Embora você não vá ver nenhum sinal externo da alteração que você fez, agora a página
é mais acessível. Você pode adicionar tags summary ou, de outro modo, editar o código
quando precisar fazer uma alteração que não é oferecida dentro da interface visual do
Dreamweaver.
Você também pode clicar com o botão direito do mouse ou clicar com a tecla
Control pressionada (para mouses Macintosh de um botão único) em uma tag no pai-
nel de visualização Code para extrair o menu de contexto e então escolher Edit Tag. A
caixa de diálogo Tag Editor irá se abrir e oferecer várias categorias e opções para editar
a tag. O número de categorias e de opções depende da tag selecionada.
Utilizando a barra de ferramentas Code

O Dreamweaver 8 inclui uma barra de ferramentas Code repleta de conveniências para
codificação.
1. Na visualização Design da página training.html que você vê na visualização Split,

posicione seu ponto de inserção dentro da tabela e selecione a tag <table> no seletor
de tags. Na barra de ferramentas Code na visualização Code do documento, clique no
ícone da barra de ferramentas Collapse Full Tag.

A barra de ferramentas Code permite recolher tags completas, uma seleção ou tudo fora
da tag selecionada ou da seleção (mantendo pressionada a tecla Alt/Option). Isso permite
fechar o código em que você não está trabalhando de modo que possa visualizar uma par-
te maior do código com o qual você quer trabalhar.
2. Na barra de ferramentas Code, clique na opção da barra de ferramentas Expand

All.
O Dreamweaver nunca mexe com o código; ele apenas oculta partes para visualização
mais fácil. Você pode expandir o código a qualquer momento.
3. Posicione seu ponto de inserção dentro da tag (<tr>) de qualquer linha da tabela.
Clique no botão Select Parent Tag na barra de ferramentas Code.
O Dreamweaver seleciona a tag de nível superior (parent) – nesse caso, a tag <table>.
4. Com a tag <table> ainda selecionada, clique no botão Apply Comment na barra de
ferramentas Code. No menu resultante, selecione Apply HTML Comment.
524 LIÇÃO 16
Comentários de HTML são utilizados para fazer notas no código, indicar ou explicar o uso
de uma seção particular de código ou desativar uma parte do documento sem realmente
excluir o código. Utilizar a opção Apply Comment da barra de ferramentas Code torna
mais rápido comentar uma seção do código.
O Dreamweaver envolve a tabela entre as tags de comentário HTML (
que significa a região editável “teachers” em um template (consulte a Lição 13). Essa
opção aparece desmarcada por padrão.
Remove Dreamweaver Special Markup: O Dreamweaver cria várias tags que não
são HTML padrão. Essas tags incluem itens (como <mm:libitem>, que significa um
item de biblioteca) que indicam ao Dreamweaver como os objetos específicos de-
vem ser tratados. Somente o Dreamweaver reconhece essa marcação; os navegado-
res a ignoram. Tenha cuidado ao marcar essa caixa porque isso faz com que todas as
tags relacionadas com itens de biblioteca, templates e imagens guias sejam removi-
das. Se isso for feito, você não pode mais atualizar a página utilizando esses recursos.
Essa opção aparece desmarcada por padrão.
Remove Specific Tag(s): Esse campo de texto permite instruir o Dreamweaver a re-
mover tags particulares. Se quiser remover múltiplas tags ao mesmo tempo, sepa-
re-as com vírgulas. Essa opção aparece desmarcada por padrão.
Combine Nested <font> Tags When Possible: Se seu documento utilizar tags
<font>, elas podem tornar-se aninhadas quando você formatar texto em seus docu-
mentos. Por exemplo, você poderia acabar com algo semelhante a isso:
<font size="–1"><font face="Verdana, Arial, Helvetica, sans-serif"> ¬

<font color="#336633">Yoga Sangha</font></font></font>
Os três conjuntos de tags font nesse exemplo podem ser combinados em um conjunto
<font> e</font>, tornando o código muito claro e mais limpo:
<font size="–1" face="Verdana, Arial, Helvetica, sans-serif" ¬

color="#336633">Yoga Sangha</font>
Essa opção permanece marcada por padrão.
A tag <font> está obsoleta na HTML 4.0 – isto é, talvez seja eliminada nas futu-
ras versões da HTML. Em vez disso, recomenda-se folhas de estilo para formatação
de texto.
542 LIÇÃO 16
Show Log On Completion: O log permite saber que itens o Dreamweaver foi capaz
de limpar. Essa opção permanece marcada por padrão.
2. Deixe as opções padrão selecionadas e clique em OK.

O Dreamweaver executa Clean Up HTML e exibe uma caixa de diálogo com um log do
que foi limpo. Em alguns casos, pode não haver nada a limpar.
3. Clique em OK para fechar o log. Salve e feche o documento asana.html.

Executar Clean Up XHTML ajuda a tornar seu código o mais limpo e livre de erros possí-
vel. Esse comando pode ajudar a diminuir potencialmente o tamanho do arquivo e o tem-
po de carregamento do seu documento pelo navegador.
Para otimizar ainda mais o código em seus documentos, você pode executar
Validate Markup para examinar erros de tag e sintaxe do código escolhendo File >
Check Page > Validate Markup ou selecionando a guia Validation na janela Results e
clicando no botão Validate (o triângulo verde à esquerda). Qualquer erro localizado será
exibido na caixa de diálogo Results.
Trabalhando com HTML no Microsoft Word

O conteúdo da página Web pode vir de diversas fontes. Clientes ou colegas talvez enviem
material em um arquivo Microsoft Word. Se a formatação do documento do Word for re-
lativamente simples, você pode utilizar o método “copiar e colar” para importar o texto
no Dreamweaver. Se o documento do Word tiver formatação como marcadores ou tabe-
las, você pode querer salvar o documento como uma página Web (escolha File > Save As
Web Page no Word 97 ou versão posterior) e abrir o arquivo de HTML resultante no
Dreamweaver. Entretanto, o Word insere um grande número de tags desnecessárias.
Você limpa esse código no Dreamweaver em um passo. As tags que o Dreamweaver remo-
ve são requeridas para exibir a página no Word, mas não são necessárias em HTML ou em
um navegador.
1. Abra o arquivo GreenStudio.html na pasta Lesson_16_Code/Word.

Esse arquivo HTML foi criado utilizando o comando Salvar Como Página da Web dentro
do Microsoft Word.

2. Escolha Commands > Clean Up Word HTML.
A caixa de diálogo Clean Up Word HTML se abre.
O Dreamweaver tenta determinar a versão do Word utilizada para criar a HTML. Se o

Dreamweaver não puder determinar a versão, você deverá escolher Word 2000 and newer
no menu.
A caixa de diálogo tem duas guias, Basic e Detailed, com várias opções de marcação
para cada uma. Para esse exercício, utilize a configuração padrão (todas as opções marca-
das).
As opções na guia Basic são mostradas a seguir:
Remove All Word-Specific Markup (Remover toda a marcação específica do Word)
Clean Up CSS (Limpar CSS)
Clean Up <font> Tags (Limpar tags <font>)
Fix Invalidly Nested Tags (Consertar tags aninhadas de maneira inválida)
Set Background Color (Definir cor de fundo)
Apply Source Formatting (Aplicar formatação de origem)
Show Log On Completion (Mostrar log ao terminar)
A guia Detailed contém opções adicionais para remover toda a marcação específica do
Microsoft Word e limpar CSS.
544 LIÇÃO 16
3. Certifique-se de que todas as caixas na guia básica estejam marcadas e clique em
OK. Clique em OK novamente para fechar a caixa de diálogo depois de revisar as alte-
rações que o Dreamweaver fez ao limpar o arquivo e então salve o documento.
O Dreamweaver exibe uma caixa de diálogo listando todas as alterações feitas.
Imprimindo a partir da visualização Code

Freqüentemente, pode ser difícil visualizar código na tela de um computador. O Dream-
weaver oferece a possibilidade de imprimir o código, um recurso útil que permite que
você simplesmente trabalhe em uma cópia impressa ou compartilhe com membros da
equipe. Você precisará ter uma impressora conectada a seu computador para completar
este exercício.
1. No arquivo training.html, escolha File > Print Code.

Se tiver uma impressora conectada a seu sistema, você pode imprimir clicando no botão
Print depois de especificar as opções de impressão, como número de cópias e de página.
Não é possível imprimir a visualização Design de dentro do Dreamweaver. Se

precisar ter uma impressão da página Web da maneira como ela é apresentada em um
navegador, visualize a página em um navegador e a imprima a partir do navegador.
Você pode fechar o arquivo training.html.
Personalização avançada
Há algumas opções disponíveis para a personalização do Dreamweaver. Você pode
trabalhar com preferências básicas do programa a fim de personalizar configuração, fer-
ramentas, painéis e atalhos pelo teclado do programa de modo a desenvolver um espaço
de trabalho personalizado para suas necessidades.
O Dreamweaver foi projetado para ser extensível; portanto, você pode expandir as ca-
pacidades do Dreamweaver por meio do uso de extensões – softwares que podem ser adi-
cionados para aumentar a funcionalidade do programa. Há vários tipos diferentes de ex-
tensões, que variam de simples objetos de HTML a comandos de JavaScript mais comple-
xos. O Dreamweaver Extension Manager é utilizado para instalar, gerenciar e remover
extensões.

Você mesmo pode criar novos comportamentos e extensões para uso no Dreamweaver
ou pode obter extensões criadas por outros a partir do site Web Dreamweaver Exchange.
Há um amplo espectro de extensões disponíveis em Dreamweaver Exchange da Macro-
media, que variam daquelas que podem ser compradas a scripts freeware.
1. Escolha Help > Manage Extensions.

As extensões são instaladas no Dreamweaver utilizando o Extension Manager, um pro-
grama separado que é instalado junto com o Dreamweaver. A pasta Macromedia Exten-
sion Manager normalmente é instalada na mesma pasta que o Macromedia Dreamweaver
8. O local padrão de instalação estará dentro de suas pastas Applications (Macintosh) ou
Program Files > Macromedia (Windows).
O Extension Manager permite que você instale extensões, remova extensões, descubra
informações adicionais sobre uma extensão instalada e prepare suas próprias extensões.
Ele também fornece uma maneira conveniente de trazer à tona o site Web Dreamweaver
Exchange, pelo qual você pode localizar mais extensões.
O Macromedia Extension Manager exibe o nome de extensão, número de versão, tipo
e autor. Uma descrição que aparece para a extensão selecionada fornece detalhes relativos
àquilo que a extensão faz bem como à localização da extensão no Dreamweaver. Exten-
sões mais antigas talvez tenham descrições ultrapassadas que referenciam os elementos da
interface nas versões anteriores do Dreamweaver (a paleta Objects, por exemplo, agora é
conhecida como barra Insert).
546 LIÇÃO 16
2. Feche o Extension Manager escolhendo Extension Manager > Quit Extension Ma-
nager (Macintosh) ou File > Close (Windows).
As extensões listadas no Dreamweaver Exchange indicam para qual versão do Dreamwea-
ver elas foram escritas. Algumas extensões mais antigas trabalham bem com versões mais
novas do programa, enquanto outras podem causar problemas. Se encontrar alguma difi-
culdade depois de instalar uma extensão, você deve removê-la. Se você se deparar com um
problema, pode testar suas extensões desligando-as. Você pode marcar as caixas na coluna
On/Off no Extension Manager para desativar temporariamente as extensões. Fazer isso
pode ajudar a determinar se erros estão relacionados a extensões específicas. Um marca de
seleção em uma caixa indica que a extensão correspondente atualmente está instalada.
Obtendo e instalando extensões

Se estiver conectado à Internet, você poderá obter mais extensões a partir do Dream-
weaver Exchange escolhendo Go To Macromedia Exchange no Extension Manager ou
escolhendo Help > Dreamweaver Exchange no Dreamweaver. A Dreamweaver
Exchange abrirá no seu navegador padrão. Você deve ser membro do macrome-
dia.com para fazer download, enviar ou revisar extensões. (A inscrição é gratuita e
você pode se inscrever e efetuar login na home page do Dreamweaver Exchange.) A
Macromedia fornece o site Web Dreamweaver Exchange como um repositório para
todos os tipos de extensões. Quando fizer download das extensões do Dreamweaver
Exchange, o Extension Manager se abre automaticamente e começa o processo de
instalação depois que o download estiver completo para usuários de Macintosh. Os
usuários de Windows têm de abrir o arquivo descarregado ou seguir o processo de ins-
talação descrito neste exercício. O Macromedia cria algumas extensões, enquanto ter-
ceiros criam outras extensões.
Para instalar uma extensão com o Extension Manager, escolha File > Install Extension
ou dê um clique duplo no arquivo de extensão para abrir automaticamente a caixa de diá-
logo Extension Manager. A caixa de diálogo Install Extension (Macintosh) ou Select
Extension to Install (Windows) se abre.
Uma boa prática é sempre reiniciar o Dreamweaver depois de instalar as extensões. Ao
reiniciar o Dreamweaver, você pode utilizar as novas extensões. As extensões podem
não estar disponíveis até que o programa seja reiniciado.

Alternou entre as visualizações de documento e editou a HTML na visualização
Code
Editou código HTML manualmente utilizando a visualização Split Code e a visuali-
zação Design
Alterou a localização de uma nova janela de navegador adicionando coordenadas X
e Y ao código
Inseriu tags meta de palavras-chave e de descrições
Utilizou o inspetor Tag para editar rapidamente tags
Inseriu e editou código utilizando Quick Tags e Code Hints
Criou e inseriu código utilizando fragmentos de código
Executou o comando Clean Up HTML para simplificar o código
Importou um arquivo Word HTML e utilizou Clean Up Word HTML para remo-
ver tags desnecessárias
Aprendeu a imprimir o código HTML
Aprendeu a localizar e instalar extensões do Dreamweaver
548 LIÇÃO 16
Utilizando Find
17 and Replace
O recurso Find and Replace no Macromedia Dreamweaver é uma poderosa ferramen-
ta de pesquisa. Você pode pesquisar texto dentro do documento atual, uma pasta es-
pecificada ou um site inteiro. As extensas opções permitem pesquisar texto ou tags
HTML ou mesmo limitar sua pesquisa a certos atributos dentro de tags HTML. Depois
de localizar o que está procurando, você pode modificá-lo ou substituí-lo. O recurso
Find and Replace pode economizar bastante tempo quando você precisa fazer exten-
sas alterações em um documento ou site inteiro.
Neste projeto, você

utilizará Find and
Replace para alterar
palavras nesse
documento. Você
também ajustará os
atributos de
formatação de texto
utilizando Find and
Replace para
automatizar o
processo de
vinculação a uma
folha de estilo
externa e para
aplicar um estilo
personalizado ao
texto.
UTILIZANDO FIND AND REPLACE 549

Nesta lição, você utilizará o recurso Find and Replace para fazer diversas alterações em
vários documentos. Você utilizará o recurso Find and Replace para aplicar estilos Cas-
cading Style Sheets (CSS) e anexar uma folha de estilo externa a alguns documentos,
tudo de uma só vez. Você irá localizar e substituir texto, alterar formatação de texto,
aprender a salvar suas pesquisas para posterior utilização, localizar datas e substituir
nomes.
Para ver exemplos das páginas concluídas desta lição, abra index.html e work-
shops.html na pasta Lesson_17_Find/Completed.

Localizar e substituir texto
Localizar texto dentro de tags HTML
Utilizar o recurso Find and Replace para aplicar um estilo personalizado
Utilizar o recurso Find and Replace para anexar folhas de estilo externas
Salvar e reutilizar as configurações de pesquisa
Procurar padrões em texto
Localizar variações de um nome
Tempo aproximado
Esta lição deve levar aproximadamente uma hora e meia para ser concluída.
Arquivos da lição
Arquivos iniciais:
Lesson_17_FindReplace/index.html
Lesson_17_FindReplace/Training/…(todos os arquivos)
Lesson_17_FindReplace/schedule/workshops.html
Projeto concluído:
Lesson_17_FindReplace/Completed/…(todos os arquivos)
550 LIÇÃO 17
Pesquisando seu documento
Neste exercício, você realizará uma pesquisa simples para localizar e substituir palavras no
texto de um documento.
1. Abra o arquivo index.html na pasta Lesson_17_FindReplace. Selecione a palavra

Sanga dentro do cabeçalho Welcome to Yoga Sanga.
Esse documento refere-se à Yoga Sanga por todo o texto, quando na verdade deveria ser
Yoga Sangha. Você substituirá esse texto neste exercício.
2. Escolha Edit > Find and Replace.

A caixa de diálogo Find and Replace se abre.
Selecionar uma parte de texto antes de abrir a caixa de diálogo Find and Re-
place faz com que o texto selecionado automaticamente apareça no campo de texto
Search For.
3. No menu Find In, escolha Current Document. No menu Search, escolha Text. Veja
se o campo de texto Find tem o texto destacado Sanga. No campo de texto Replace,
digite Sangha. Desmarque as caixas das quatro opções (Match case, Match whole
word, Ignore whitespace, Use regular expression).
Find In Current Document, que pesquisa o documento inteiro, só pode ser utilizado a
partir de um único documento enquanto ele está aberto. O menu Find In também tem
cinco opções adicionais:
Selected Text: Pesquisa o que você selecionou no documento atual.
Open Documents: Pesquisa todos os arquivos que estão abertos.
Folder: Permite navegar para selecionar uma pasta e pesquisar todo o conteúdo des-
sa pasta.
Selected Files In Site: Pesquisa nos arquivos que você selecionou no painel do site.
Entire Current Local Site: Pesquisa no site ativo.

Há quatro opções na parte inferior da caixa de diálogo Find and Replace:
Match case: Limita a pesquisa ao uso exato de maiúsculas e minúsculas nas palavras
digitadas. Se a caixa Match Case estiver marcada, a pesquisa irá procurar apenas o
conteúdo que corresponder exatamente ao uso de letras maiúsculas e minúsculas
que você utilizou no campo de texto Find.
Match whole word: Localiza apenas palavras completas.
Ignore whitespace: Ignora todos os espaços – se esta opção estiver marcada e você
estiver procurando duas palavras, o Dreamweaver também localiza todas as instân-
cias em que essas duas palavras têm espaços adicionais entre elas.
Use regular expression: Fornece padrões para descrever combinações de caractere
no texto. Utilize esta opção para selecionar frases que iniciem com “O” (“A”) ou va-
lores de atributo que contenham um número.
4. Clique em Find Next.

A primeira ocorrência da palavra depois do ponto de inserção é destacada.
5. Clique em Replace.
A palavra mudou para Sangha e a próxima ocorrência da palavra é destacada.
Ao substituir texto no documento, é recomendável primeiro clicar em Replace

e verificar o novo texto a fim de certificar-se de que você digitou as informações corre-
tas no campo Replace; então, utilize Replace All depois de verificar os critérios e resul-
tados da pesquisa.
6. Clique em Find All.

Os resultados da pesquisa são localizados e exibidos no painel Results – mais oito instân-
cias do texto que você pesquisou. Dar um clique duplo em um item nessa lista destaca a
instância na janela Document. Utilizar a opção Find All permite revisar todas as instân-
cias do texto.
552 LIÇÃO 17
7. Clique na seta verde à esquerda do painel Results.
A caixa de diálogo Find and Replace se abre novamente.
O Dreamweaver se lembra das configurações da pesquisa mais recente. Se você fechar e
reabrir a caixa de diálogo, o texto e as opções que configurou na última vez na caixa de
diálogo que estava aberta ainda estarão aí. O campo de texto Find deve conter Sanga e o
campo de texto Replace deve conter Sangha.
8. Agora clique em Replace All na caixa de diálogo Find and Replace.

A caixa de diálogo Find and Replace se fecha automaticamente depois de terminar a pes-
quisa e a substituição do texto. A barra de status do painel Results informa o número de
itens localizados e substituídos em seu documento.
9. Clique no menu Options no canto superior direito do painel Results e escolha Clear
Results; então feche o painel Results (Macintosh) ou recolha o painel Results (Win-
dows). Salve o documento index.html.
Removendo tags HTML

O arquivo index.html contém as tags <font>. Como explicado nas Lições 2 e 4, a tag
<font> tornou-se obsoleta na HTML 4.0 e talvez seja inutilizada no futuro. Embora ainda
seja suportado por navegadores, a CSS (abordada na Lição 4) é a maneira recomendada
para estilizar texto.
Você deve estar ciente de que, em documentos criados utilizando versões anteriores do
Dreamweaver, você talvez não seja capaz de acessar alguns atributos do documento CSS –
definidos pelas Page Properties – se a tag <font> ou atributos da tag <body> obsoletos
existirem nesse documento e se esses atributos ainda não estiverem definidos para o do-
cumento que utiliza a CSS. Se fosse abrir um documento que utiliza as tags <font> e não
utiliza nenhuma CSS, o inspetor Property só listaria as categorias Appearance, Ti-
tle/Encoding e Tracing Image. As categorias Links e Headings utilizam CSS para configu-
rar os atributos e não estão disponíveis até que as tags <font> sejam removidas. As cores
de link e a cor de fundo ou imagens de fundo estarão disponíveis na seção Appearance,
embora sejam configuradas como atributos da tag <body>.

A tag <font> é um tipo de formatação local. Em CSS, a formatação local sobrescreve
todos os estilos internos ou externos – se você quiser aplicar estilos CSS, a formatação
local precisa ser removida. Em versões mais antigas do Dreamweaver, a formatação lo-
cal era aplicada utilizando o inspetor Property para definir os atributos de texto com
tags <font>. Para novos documentos no Dreamweaver 8, a formatação padrão aplicada
com o inspetor Property é baseada em CSS. Ao abrir documentos como este, que utiliza
tags <font>, o inspetor Property utiliza as tags <font> para editar e definir formatação
de texto.
Neste exercício, você utilizará o recurso Find and Replace para remover a tag HTML
<font>.
1. No documento index.html, escolha Edit > Find and Replace para abrir a caixa de
diálogo Find and Replace. O menu Find In deve ser configurado como Current Docu-
ment. Mude a seleção do menu Search para Specific Tag.
Você também pode utilizar o atalho Ctrl+F (Windows) ou Cmd+F (Macintosh)

para abrir a caixa de diálogo Find and Replace.
Escolher Specific Tag permite pesquisar certa tag no Dreamweaver. A caixa de diálogo al-
tera-se para refletir esse método de pesquisa. Um conjunto de opções a escolher é exibido
para limitar a pesquisa e procurar tags com atributos específicos.
554 LIÇÃO 17
2. Selecione a fonte da lista de tags HTML no menu Tag, localizado à direita do menu
Search.
Você também pode digitar tags (sem os sinais de maior e menor < >) no campo de texto
Search For em vez de utilizar o menu.
3. Clique no botão do sinal de subtração (–) para remover a opção de modificador de

tag. Escolha Strip Tag no menu Action e desmarque todas as quatro caixas na área
Options.
Uma vez que você removerá inteiramente as tags <font>, os modificadores não são neces-
sários.

Você pode continuar a adicionar modificadores adicionais clicando no botão de
sinal de adição (+). Vários menus e campos de texto que aparecem permitem fazer se-
leções muito específicas. Você pode utilizar esses menus e campos de texto para limi-
tar as pesquisas e localizar ocorrências únicas de uma tag ou uma tag com um atributo
específico. As opções adicionais aqui incluem um número de qualificadores para atri-
butos, incluindo a capacidade de procurar uma tag com ou sem atributo específico,
uma tag que contém ou não um atributo específico ou um atributo que está ou não no
interior da tag especificada. Os modificadores de tag fornecem a capacidade de esco-
lher um atributo específico que pode ser utilizado com a tag selecionada; selecione se
o atributo deve ser igual a (=), menor que (<), maior que (>) e não igual a (! =); e escolha
um lugar para configurar um valor para o atributo desejado. As opções nos menus va-
riam dependendo da tag e do atributo que você selecionou.
4. Clique no botão Replace All.

Todas as tags <font> dentro do documento são removidas.
A caixa de diálogo Find and Replace se fecha automaticamente. O painel Results con-
tém detalhes sobre o que foi substituído ou, nesse caso, excluído, do documento. Se o
painel Results não se abrir automaticamente, os usuários de Macintosh podem escolher
Window > Results para abrir o painel que foi fechado no exercício anterior, e os usuá-
rios de Windows podem expandir o painel que foi recolhido no exercício anterior. Para
usuários de Windows, por padrão, o painel recolhido é localizado embaixo do inspetor
Property.
Os usuários de Windows podem clicar na seta branca na barra fina localizada

logo acima do inspetor Property para reduzir tanto o inspetor Property como o painel
Results ao mesmo tempo. Clique nesse botão novamente na parte inferior da interfa-
ce Dreamweaver para expandir mais uma vez os painéis localizados nessa área.
556 LIÇÃO 17
5. Clique no menu de contexto no canto superior direito do painel Results e escolha
Clear Results. Feche o painel Results (Macintosh) ou recolha o painel Results (Win-
dows). Salve o documento index.html.
Utilizando Find and Replace para anexar folhas

de estilo externas
Na Lição 4, você criou uma folha de estilo externa e a anexou a outro documento. Os pas-
sos para adicionar uma folha de estilo a um documento não são difíceis, mas podem ser
demorados se você precisar anexar uma folha de estilo a diversas páginas ou a um site in-
teiro. Utilizando o recurso Find and Replace, você pode realizar essa tarefa em uma ques-
tão de minutos.
Neste exercício, você anexa a folha de estilo externa sangha.css a diversas páginas.
1. Abra o arquivo asana.html na pasta Lesson_17_FindReplace/Training e selecione a

visualização Design. Escolha Edit > Find and Replace.
A caixa de diálogo Find and Replace se abre com as mesmas configurações que foram uti-
lizadas no exercício anterior.
2. O menu Find In deve estar configurado como Folder. Clique no ícone de pasta de
navegação à direita da caixa de texto da pasta e escolha a pasta Lesson_17_FindRe-
place/Training. Configure o menu Search como Source Code. Digite </head> no cam-
po de texto Find. No campo de texto Replace, digite o seguinte código: <link
href="sangha.css" rel="stylesheet" type="text/css"></head>.

A tag <link> especifica que a folha de estilo é anexada vinculando-a ao docu-
mento, que é a maneira recomendada de anexar a primeira folha de estilo (em oposi-
ção ao método de importação de anexar folhas de estilo – ambos os métodos foram
abordados na Lição 4). A localização da folha de estilo é especificada por href=“sang-
ha.css”, o relacionamento entre o documento atual e a folha de estilo anexada é defini-
do por rel=“stylesheet”, e o cabeçalho type=“text/css” especifica o tipo de conteúdo
pelo tipo MIME (Multipurpose Internet Mail Extensions), permitindo aos navegadores
que não suportam folhas de estilo ignorar a tag de link.
Ao utilizar o ícone Attach Style Sheet, o Dreamweaver adiciona a tag <link> dentro da tag
<head>. Você está utilizando Find and Replace para procurar a tag inicial de fechamento
(</head>) e então adicionar a tag <link> antes dela substituindo-a pela tag <link> segui-
da por uma tag </head>.
Para obter uma nova linha quando você estiver do campo de texto Replace,
pressione Shift+Return (Macintosh) ou Shift+Enter (Windows). Utilizar apenas a tecla
Return ou Enter ativa o botão Find Next na caixa de diálogo. Como a tag </head> nor-
malmente está em uma linha diferente, talvez você queira adicionar uma quebra de li-
nha ao código antes da tag </head> – isso não é um <br> (quebra); é simplesmente
uma nova linha no código.
Há um total de cinco documentos HTML na pasta Training que precisam ter a folha de
estilo externa anexada. Nenhum dos documentos na pasta Training utiliza as tags <font>,
portanto você não precisa utilizar o recurso Find and Replace para remover a tag <font>
dos documentos, como teve de fazer com index.html no exercício anterior.
3. All The Options deve ser desmarcada. Clique no botão Find Next.
O primeiro documento na pasta em que o Dreamweaver localiza a tag </head> abre na vi-
sualização Code; asana.html agora é mostrado na visualização Code e o Dreamweaver se-
leciona a tag </head>.
558 LIÇÃO 17
4. Clique em Replace.
O Dreamweaver faz a substituição e o próximo documento que atende aos critérios da
pesquisa é aberto automaticamente na visualização Code com a tag </head> selecionado.
5. Clique no botão Replace All. Clique em Yes quando solicitado a verificar se quer
substituir as correspondências em documentos não abertos.
Para propósitos de demonstração deste exercício, há uma duplicata do arquivo

sangha.css dentro da pasta Training. Em seus próprios sites, porém, recomenda-se
não duplicar folhas de estilo externas dessa maneira porque se você alterar uma, os
documentos baseados em uma duplicata dessa folha de estilo não refletirão as altera-
ções a menos que a duplicata também seja atualizada. Para vincular documentos de
pastas diferentes ao mesmo arquivo CSS, você pode querer utilizar links relativos ao
site raiz, que asseguram que, independentemente de onde os documentos HTML es-
tejam localizados, eles ainda vincularão ao arquivo CSS correto. Os links relativos ao
site raiz foram abordados na Lição 4.
Talvez você não veja a alteração aplicada ao fundo nos documentos abertos até fechar a
caixa de diálogo Find and Replace e clicar na janela Document ou no botão Refresh, como
talvez seja solicitado a fazer pelo inspetor Property.
6. Clique no menu de contexto no canto superior direito do painel Results e escolha

Clear Results. Feche o painel Results (Macintosh) ou recolha o painel Results (Win-
dows).
A folha de estilo agora está anexada a todos os documentos na pasta. Você pode salvar to-
dos os documentos abertos e fechá-los.

Aplicando estilos personalizados
com Find and Replace
Agora que você removeu as tags <font> e anexou uma folha de estilo externa, pode aplicar
um estilo CSS personalizado ao texto no documento index.html. Neste exercício, você
utilizará o recurso Find and Replace para localizar o texto no código e aplicar as tags
HTML ao estilo personalizado.
1. Reabra o documento index.html. Selecione a primeira ocorrência da frase “Anusa-

ra Yoga” no corpo do texto – no final da frase que inicia com “At Yoga Sangha, we’re
dedicated…”
Nos passos a seguir, você utilizará Find and Replace para estilizar todas as instâncias dessa
frase com CSS.
2. Escolha Edit > Find and Replace. Selecione Current Document no menu Find In e
selecione Source Code no menu Search. Digite Anusara Yoga no campo de texto Find.
Se selecionar o texto antes de abrir a caixa de diálogo Find and Replace, esse
texto específico aparece no campo de texto Find.
A caixa de diálogo se altera para refletir o método de pesquisa Source Code.
3. Digite <span class="boldcolor">Anusara Yoga</span> no campo de texto Repla-

ce. Todas as quatro opções devem ser desmarcadas.
560 LIÇÃO 17
O código <span class="boldcolor">Anusara Yoga</span> substituirá todas as instân-
cias da frase “Anusara Yoga” no documento index.html – a palavra estilizada substituirá
as palavras não estilizadas.
4. Clique em Replace All para alterar todas as ocorrências em seu documento.

A caixa de diálogo Find and Replace fecha automaticamente e o painel Results permite
que você saiba quais alterações foram feitas no código. Todas as instâncias de “Anusara
Yoga” agora estão formatadas com o estilo CSS boldcolor. Utilizar o recurso Find and Re-
place para aplicar estilos dessa maneira pode economizar uma grande quantidade de tem-
po. Talvez você precise clicar na janela Document ou no botão Refresh para ver as altera-
ções aparecerem na janela Document.
Ao utilizar esse método, você precisa estar certo de que não há nenhuma ocor-
rência da(s) palavra(s) exata(s) que você está substituindo (nesse caso, é “Anusara
Yoga”) no código em qualquer lugar, exceto no texto. Se quaisquer imagens utilizas-
sem “Anusara Yoga” para seu texto alt ou se as palavras que você estivesse subs-
tituindo fossem parte do nome de um caminho, você teria problemas com seu código.
Quando em dúvida, utilize o botão Replace em vez do botão Replace All de modo que
possa verificar cada item a ser substituído.
5. No painel Results, clique no menu Options no canto superior direito do painel Re-
sults e escolha Clear Results; feche (Macintosh) ou oculte (Windows) o painel Results.
Salve o documento index.html.
Se não vir o painel Results, você pode abri-lo e visualizar os resultados da fun-
ção Find and Replace escolhendo Window > Results.

Você também pode aplicar um estilo ao texto selecionado e copiar o código correspon-
dente a partir da visualização Split ou Code para colar esse estilo na caixa de diálogo Find
and Replace. Mas, se fizer isso, certifique-se de examinar novamente a primeira ocorrên-
cia do texto em que você aplicou manualmente o estilo personalizado – você verá duas
tags <span> aplicadas porque o recurso Find and Replace adicionou a tag extra. Embora a
palavra seja exibida corretamente no Dreamweaver, você deve remover a tag extra. Você
pode remover manualmente o segundo conjunto de tags na visualização Code ou esco-
lher Commands > Cleanup HTML (discutido na Lição 15). Ao utilizar o comando Clea-
nup HTML, certifique-se de que a opção Remove Redundant Nested Tags está seleciona-
da na caixa de diálogo Cleanup HTML e clique em OK.
Salvando e reutilizando critérios de pesquisa

Talvez você queira salvar os critérios de pesquisa para outros documentos no site, especi-
almente com pesquisas complexas. Os critérios de pesquisa salvos, conhecidos como con-
sultas, são normalmente salvos na pasta Configuration/Queries dentro da pasta Dream-
weaver por padrão. Entretanto, eles podem ser salvos em lugares diferentes.
Neste exercício, você salvará sua consulta de pesquisa na pasta Lesson_17_FindReplace.
1. Escolha Edit > Find and Replace. Ajuste as configurações a fim de que elas corres-
pondam àquelas utilizadas no exercício anterior. Clique no botão Save Query na caixa
de diálogo Find and Replace.
A caixa de diálogo Find and Replace tem as mesmas configurações utilizadas no último
exercício.
O ícone no botão Save Query se parece com um disquete. Esse comando torna possível
salvar e reutilizar pesquisas complexas.
562 LIÇÃO 17
2. Na caixa de diálogo Save query to file (Macintosh) ou Save Query (Windows), loca-
lize e abra a pasta Lesson_17_FindReplace; então, digite addStyle no campo de texto
Save As (Macintosh) ou File Name (Windows) e clique em Save.
Consultas Find têm uma extensão .dwq; consultas Replace têm uma extensão .dwr. A ex-
tensão é automaticamente adicionada para você ao salvar a consulta.
Agora que você salvou a consulta addStyle, ela estará disponível sempre que precisar
executar a mesma função Find and Replace em outros documentos.
Para aprender a salvar suas próprias pesquisas, configure uma pesquisa pró-
pria e a teste. Então, siga os Passos 1 e 2 neste exercício.
3. Clique no botão Load Query na caixa de diálogo Find and Replace.

O ícone no botão Load Query se parece com uma pasta aberta.
4. Na caixa de diálogo Load Query (Windows) ou Load query from file (Macintosh), lo-
calize e abra a consulta addstyle.dwr na pasta Lesson_17_FindReplace.
Você pode abrir consultas “find and replace” armazenadas e executá-las de dentro da cai-
xa de diálogo Find and Replace. Você pode fechar a caixa de diálogo Find and Replace, re-
colher o painel Results e fechar quaisquer arquivos abertos.
Pesquisando e substituindo com expressões

regulares
Expressões regulares são caracteres de controle que descrevem combinações de caractere
ou padrões em texto. Por exemplo, se quiser localizar todas as ocorrências de anos de
1700–1799, o padrão é “17” seguido por qualquer combinação de dois números de 0–9.
Você pode utilizar um número de caracteres especiais para definir o padrão de pesquisa.
Por exemplo, as barras invertidas (\), o sinal de cifrão ($) e o ponto de interrogação (?) são
todos caracteres especiais. Ao utilizar expressões regulares, é importante conhecer esses
caracteres; se estiver procurando tais caracteres especiais em seu texto, você precisa prece-
der o caractere com uma barra invertida para indicar que ele faz parte da pesquisa de ca-
ractere e não é utilizado como um caractere especial.
O Apêndice A contém uma tabela com todos os caracteres especiais, expressões regula-
res e seus significados.
Neste exercício, você utilizará pesquisas com um padrão em um documento.
1. Abra o arquivo workshops.html na pasta Lesson_17_FindReplace/schedule, po-

sicione o ponto de inserção no começo do documento e escolha Edit > Find and
Replace.
A caixa de diálogo Find and Replace se abre.

2. Selecione Current Document no menu Find In. Configure o menu Search como
Text. Marque a caixa de opção Use Regular Expression.
Observe que Ignore Whitespace está desativado ou acinzentado quando você seleciona
Use regular expression..
A opção Ignore Whitespace, quando selecionada, trata todo espaço em branco

como um único espaço para fins de correspondência (localização). Por exemplo, com
essa opção selecionada, “este texto” identifica “este texto” mas não “estetexto”. A
opção Ignore Whitespace não está disponível quando a opção Use regular Expression
é selecionada; você deve escrever explicitamente sua expressão regular para ignorar
espaços em branco. Observe que as tags p e br não são consideradas espaços em
branco.
3. No campo de texto Find, digite \d*:\d\dam.

Certifique-se de digitar a barra invertida (\), não barras normais (/), quando digitar
\d*:\d\dam no campo de texto.
Neste exercício, você aplicará o estilo ênfase a workshops que iniciam antes das
12:00 pm a fim de atrair a atenção para eles. O padrão de pesquisa definido no Passo 3 uti-
liza o caractere especial \d, que representa qualquer dígito (0–9). Um asterisco significa
“localizar zero ou mais ocorrências do caractere anterior”, portanto \d* procura zero ou
mais dígitos. Assim esse padrão procura zero ou mais números, seguidos por um dois-
pontos, seguido por exatamente dois dígitos e o texto “am”. Isso corresponderá a qual-
quer horário da manhã, tal como 11:30 am. Consulte o Apêndice A e veja mais expressões
regulares a serem utilizadas para padrões de pesquisa.
Para distinguir números decimais de anos – por exemplo, 19.09 – ao pesquisar

no documento, inclua um ponto na sua pesquisa. Um ponto também é um caractere
especial, então você precisa precedê-lo com uma barra invertida em sua pesquisa.
564 LIÇÃO 17
4. Clique no botão Find Next.
O Dreamweaver seleciona “11:00am” pela entrada para October 20. Talvez você precise
mover a caixa de diálogo Find and Replace para ver a seleção.
5. Continue a clicar no botão Find Next várias vezes para ver o que se torna sele-
cionado.
Há dois workshops que iniciam antes das 12:00 pm.
6. Na caixa de diálogo Find and Replace, mude a seleção de menu Search para Sour-
ce Code.
Nos passos a seguir, você utiliza as tags de ênfase (<em> e </em>) para aplicar negrito aos
horários. Entretanto, se fosse digitar <em>\d*:\d\dam</em> no campo de texto Replace, o
texto na janela Document mudaria para \d*:\d\dam – ele literalmente modificaria os
números no horário. Em vez disso, você precisa isolar a pesquisa como um padrão colo-
cando esse padrão que está procurando entre parênteses.
7. No campo de texto Find, insira um parêntese esquerdo antes do texto e um direito

depois do texto, assim: (\d*:\d\dam).
Os parênteses criam o primeiro padrão.
8. No campo de texto Replace, digite em>$1</em>.

Para referenciar o padrão criado no passo anterior, você utiliza $1 no campo de texto Re-
place. Cercar esse símbolo com tags de ênfase faz com que as mesmas tags sejam adiciona-
das em torno dos resultados da primeira pesquisa padrão. Se você fosse criar vários pa-
drões, o próximo padrão, como indicado pelos parênteses, seria referenciado nesse cam-
po de texto com $2 e assim por diante de maneira seqüencial.

9. Clique no botão Find Next e então clique no botão Replace.
As tags de ênfase são colocadas em torno do horário no inspetor Code. Clique na janela
Document para ver os resultados.
10. Clique no botão Replace All para localizar e substituir todas as ocorrências no
documento. Salve o documento workshops.html. Clique no menu de contexto no can-
to superior direito do painel Results e escolha Clear Results. Feche (Macintosh) ou re-
colha (Windows) o painel Results.
Para visualizar e limpar os resultados, os usuários de Macintosh precisam abrir

o painel Results se ele ainda não estiver aberto escolhendo Window > Results.
Feche o painel Results, mas deixe o arquivo workshops.html aberto para o próximo exer-
cício.
Localizando variações em um nome

Você também pode procurar variações em um nome. Por exemplo, algum desses work-
shops são Satsang, mas o nome da aula nem sempre é escrito com um S maiúsculo. Você
quer tornar o formato consistente e alterá-lo para Satsang.
1. No documento workshops.html, volte à visualização Design, posicione o ponto de

inserção na parte superior do documento e escolha Edit > Find and Replace. Configu-
re a seleção de menu Find In para Current Document e a seleção de menu Search
como Text. Digite [sS]?atsang, [kK]?irtan no campo de texto Find.
O [sS] procura qualquer palavra que inicia com um S maiúsculo ou minúsculo; o ?
especifica apenas um caractere; e o atsang, é a string literal. O mesmo padrão é utilizado
para a string Kirtan.
2. Em Options, certifique-se de que Match case está marcado. A caixa Use regular ex-
pression também deve estar marcada.
3. No campo de texto Replace, digite Satsang, Kirtan. Coloque o ponto de inserção no

começo do texto na janela Document. Clique no botão Find Next para localizar a pri-
meira ocorrência de uma variação de Satsang, kirtan e então clique em Replace para
alterá-lo.
566 LIÇÃO 17
A primeira versão de Satsang, kirtan está localizada nesse documento e é substituída por
Satsang, Kirtan.
4. Clique no botão Find Next. Continue a substituir todas as versões restantes de Sat-
sang, kirtan. Salve o documento workshops.html.
Você pode fechar esse documento e o painel Results.

Localizou e substituiu texto utilizando opções detalhadas para modificar rapida-
mente um documento
Localizou texto dentro de tags HTML e aprendeu a alterá-lo utilizando o recurso
Find and Replace
Utilizou o recurso Find and Replace para anexar folhas de estilo externas a diversas
páginas dentro de um site
Utilizou o recurso Find and Replace para aplicar rapidamente um estilo personali-
zado a um documento
Salvou suas configurações de pesquisa para utilização posterior e carregou consul-
tas salvas
Pesquisou padrões no texto utilizando expressões regulares para localizar texto es-
pecífico como datas e nomes
Localizou múltiplas variações de um nome e as substituiu por uma versão

Expressões
A regulares
Expressões regulares descrevem padrões que você pode utilizar para pesquisar códi-
go e texto. A pesquisa com expressões regulares é abordada na Lição 17. A tabela a
seguir relaciona os caracteres especiais utilizados em expressões regulares, descreve
seus significados e mostra exemplos de suas correspondências.
Tipo Descrição Exemplo

^ Início da entrada ou linha ^T
identifica “T” em “This good earth,” mas
não em “Uncle Tom”
$ O fim da entrada ou linha h$ identifica “h” em “teach,” mas não em
“teacher”
* O caractere precedente zero ou um* identifica “um” em “rum,” “umm”
mais vezes em “yummy,” e “u” em “huge”
+ O caractere precedente uma ou um+ identifica “um” em “rum” e “umm”
mais vezes em “yummy,” mas nada em “huge”
? O caractere precedente zero ou st?on identifica “son” em “Johnson” e
uma vez -“ston” em “Johnston” mas nada em
“Appleton” ou “tension”
. Qualquer caractere individual .an identifica “ran,” “can,” e “and” na
exceto nova linha frase “bran muffins can be tasty and
healthy”
x|y Ou x ou y -FF0000|000FF identifica “FF0000" em
bgcolor=”#FF0000" e “0000FF” em
font color="#0000FF"
{n} Exatamente n o{2} identifica “oo” em “loom” e os
ocorrências do primeiros dois o’s em “mooooo”, mas
caractere precedente nada em “money”
EXPRESSÕES REGULARES 569

{n,m} Pelo menos n e no máximo m F{2,4} identifica “FF” em “#FF0000" e
ocorrências do caractere os primeiros quatro Fs in ”#FFFFFF"
precedente.
[abc] Qualquer um dos caracteres entre [e-g] identifica “e” em “bed,” “f” em
colchetes. Especifique um “folly,” e “g” em “guard”
intervalo de caracteres com um
hífen (por exemplo, [a-f] é
equivalente a [abcdef]).
[âbc] Qualquer caractere que não [âeiou] inicialmente identifica “r” em
esteja entre colchetes. Especifique “orange,” “b” em “book,” e “k” em “eek!”
um intervalo de caracteres com
um hífen (por exemplo, [a-f] é
equivalente a [abcdef]).
\b Um limite de palavra (como um \bb identifica “b” em “the book,” mas
espaço ou retorno de carro). nada em “goober” ou “snob”
\B Qualquer outra coisa diferente \Bb identifica “b” em “goober”, mas nada
de um limite de palavra. em “the book”
\d Qualquer caractere numérico. \d identifica “3” em “C3PO” e “2” em
Equivalente a [0-9]. “apartment 2G”
\D Qualquer caractere \D identifica “S” em “900S” e “Q” em
não-numérico. Equivalente a “Q45”
[^0-9].
\f Avanço de formulário
\n Quebra de linha
\r Retorno de carro
\s Qualquer caractere de espaço \sbook identifica “book” em “blue
em branco individual, incluindo book,” mas nada em “notebook”
espaço, tabulação, avanço de
formulário ou quebra de linha.
\t Uma tabulação.
\w Qualquer caractere alfanumérico, b\w* identifica “barking” em “the
incluindo sublinhado. barking dog” e “big” e “black” em “the
Equivalente a [A-Za-z0-9_]. big black dog”
\W Qualquer caractere \W identifica “&” em “Jake & Mattie” e
não-alfanumérico. Equivalente “%” em “100%”
a [Â-Za-z0-9_].
570 LIÇÃO A
Atalhos do
B Macintosh
Os atalhos pelo teclado podem acelerar o processo de desenvolvimento do seu site,
tornando mais rápido e mais fácil trabalhar com elementos design e código bem como
funções de gerenciamento de site. Você pode adicionar, remover ou modificar atalhos
pelo teclado do Dreamweaver escolhendo Dreamweaver > Keyboard Shortcuts para
abrir a caixa de diálogo Keyboard Shortcuts.
ATALHOS DE MENU
Menu do Dreamweaver
Comando Tradução Atalho
Preferences Preferências Command+U
Hide Dreamweaver Ocultar o Dreamweaver Command+H
Quit Dreamweaver Fechar o Dreamweaver Command+Q
Menu File
New Novo Command+N
Open Abrir Command+O
Open in Frame Abrir em quadro Shift+Command+O
Close Fechar Command+W
Close All Fechar tudo Shift+Command+W
Save Salvar Command+S
Save As Salvar como Shift+Command+S
Print Code Imprimir código Command+P
Preview in Primary Browser Visualizar no navegador primário Option+F12
Preview in Secondary Visualizar no navegador secundário Command+F12, Shift+F12
Browser
Check Links Verificar links Shift+F8
Validate Markup Validar marcação Shift+F6
Menu Edit
Undo Desfazer Command+Z ou Option+Delete
Redo Refazer Command+Y ou Shift+Command+Z
Cut Cortar Command+X ou Shift+Delete
Copy Copiar Command+C
Paste Colar Command+V
Paste Special Colar especial Shift+Command+V
Clear Limpar Delete
Select All Selecionar tudo Command+A
ATALHOS DO MACINTOSH 571

Select Parent Tag Selecionar tag pai Command+[
Select Child Selecionar filho Command+]
Find and Replace Localizar e substituir Command+F
Find Again Localizar novamente Command+G
Go to Line Ir para a linha Command+,
Show Code Hints Mostrar dicas de código Control+Space
Indent Code Aumentar recuo do código Shift+Command+>
Outdent Code Diminuir recuo do código Shift+Command+<
Balance Braces Balancear colchetes Command+’
Code Collapse > Collapse Selection Expandir código > Expandir seleção Shift+Command+C
Code Collapse > Collapse Outside Expandir código > Expandir seleção Command+Option+C
Selection externa
Code Collapse > Expand Selection Expandir código > Expandir seleção Shift+Command+E
Code Collapse > Collapse Full Tag Expandir código > Expandir toda a tag Shift+Command+J
Code Collapse > Collapse Outside Full Expandir código > Expandir toda a tag Command+Option+J
Tag externa
Code Collapse > Expand All Expandir código > Expandir tudo Command+Option+ E
Menu View
Zoom In Ampliar Command+=
Zoom Out Reduzir Command+-
Magnification > 50% Ampliação > 50% Command+Option+5
Fit Selection Ajustar seleção Command+Option+0
Fit All Ajustar tudo Shift+Command+0
Fit Width Ajustar largura Shift+Command+Option+0
Switch Views Alternar visualizações Control+`
Refresh Design View Atualizar visualização Design F5
Live Data* Dados ao vivo* Shift+Command+R
Head Content Conteúdo do cabeçalho Shift+Command+H
Table Mode > Expanded Modo de tabela > Modo de tabelas F6
Tables Mode expandidas
Table Mode > Layout Mode Modo de tabela > Modo de layout Command+F6
Visual Aids > Hide All Auxílios visuais > Ocultar tudo Shift+Command+I
Rulers > Show Réguas > Mostrar Option+Command+R
Grid > Show Grade > Exibir Option+Command+G
Grid > Snap to Grid Grade > Ajustar à grade Option+Shift+Command+G
Guides > Show Guias > Mostrar Command+;
Guides > Lock Guides Guias > Bloquear guias Command+Opt+;
Guides > Snap to Guides Guias > Ajustar às guias Command+Shift+;
Guides > Guides Snap to Elements Guias > Ajustar guias aos elementos Command+Shift+/
Plugins > Play Plugins > Reproduzir Option+Command+P
Plugins > Stop Plugins > Parar Option+Command+X
Plugins > Play All Plugins > Reproduzir tudo Option+Shift+Command+P
Plugins > Stop All Plugins > Parar tudo Option+Shift+Command+X
Hide/Show Panels Ocultar/Mostrar painéis F4
* O comando não está incluído no menu View.
Menu Insert
Tag Tag Command+E
Image Imagem Option+Command+I
Media > Flash Media > Flash Option+Command+F
Media > Shockwave Media > Shockwave Option+Command+D
Table Tabela Option+Command+T
Named Anchor Âncora identificada Option+Command+A
HTML > Special Characters > HTML > Caracteres especiais > Shift+Return
Line Break Quebra de linha
572 LIÇÃO B
HTML > Special Characters > HTML > Caracteres especiais > Espaço Shift+Command+Space
Non-Breaking Space não-quebrável
Copyright Character (©)* Caractere de direitos autorais (©)* Option+G
Template Objects > Editable Region Objetos template > região editável Option+Command+V
* O comando não está incluído no menu Insert.
Menu Modify
Page Properties Propriedades de página Command+J
Quick Tag Editor Editor Quick Tag Command+T
Make Link Criar Link Command+L
Remove Link Remover vínculo Shift+Command+L
Table > Select Table Tabela > Selecionar tabela Command+A
Move to the Next Cell* Ir para a próxima célula* Tab
Move to the Previous Cell* Ir para a célula anterior* Shift+Tab
Table > Merge Cells Tabela > Mesclar células Option+Command+M
Table > Split Cell Tabela > Dividir célula Option+Command+S
Table > Insert Row Tabela > Inserir linha Command+M
Table > Insert Column Tabela > Inserir coluna Shift+Command+A
Table > Delete Row Tabela > Excluir linha Shift+Command+M
Table > Delete Column Tabela > Excluir coluna Shift+Command+-
Table > Increase Column Span Tabela > Aumentar distribuição da Shift+Command+]
coluna
Table > Decrease Column Span Tabela > Diminuir distribuição da Shift+Command+[
coluna
Arrange > Align Left Organizar > Alinhar à esquerda Shift+Command+1
Arrange > Align Right Organizar > Alinhar à direita Shift+Command+3
Arrange > Align Top Organizar > Alinhar pelo topo Shift+Command+4
Arrange > Align Bottom Organizar > Alinhar pelo fundo Shift+Command+6
Arrange > Make Same Width Organizar > Tornar da mesma largura Shift+Command+7
Arrange > Make Same Height Organizar > Tornar da mesma altura Shift+Command+9
Timeline > Add Object to Timeline Timeline > Adicionar objeto à linha Ctrl+Opt+Shift+T
do tempo
*O comando não está incluído no menu Modify.
Menu Text
Indent Aumentar recuo Option+Command+]
Outdent Diminuir recuo Option+Command+[
Paragraph Format > None Formatar parágrafo > Nenhum Command+0
Paragraph Format > Paragraph Formatar parágrafo > Parágrafo Shift+Command+P
Paragraph Format > Heading 1 Formatar parágrafo > Título 1 Command+1
Align > Left Alinhar > Esquerda Option+Shift+Command+L
Align > Center Alinhar > Centro Option+Shift+Command+C
Align > Right Alinhar > Direita Option+Shift+Command+R
Align > Justify Alinhar > Justificar Option+Shift+Command+J
Style > Bold Estilo > Negrito Command+B
Style > Italic Estilo > Itálico Command+I
Check Spelling Verificar ortografia Shift+F7
Menu Commands
Start Recording Começar a gravar Shift+Command+X

Menu Site
Get Transferir do servidor Shift+Command+D
Check Out Fazer check out (Reter o arquivo Option+Shift+Command+D
para edição)
Put Transferir para o servidor Shift+Command+U
Check In Fazer check in (Liberar o arquivo Option+Shift+Command+U
para edição)
Check Links Sitewide Verificar links em todo o site Command+F8
Menu Window
Insert Inserir Command+F2
Properties Propriedades Command+F3
Layers Camadas F2
Behaviors Comportamentos Shift+F4
Databases Bancos de dados Shift+Command+F10
Bindings Ligações Command+F10
Server Behaviors Comportamentos de servidor Command+F9
Components Componentes Command+F7
Files Arquivos F8
Assets Recursos Option+F11
Tag Inspector Inspetor de tags Option+Shift+F9
Results Resultados F7
Reference Referência Shift+F1
Frames Quadros Shift+F2
Code Inspector Inspetor de Código Option+F10
Timelines Linhas do tempo Option+F9
Next Document Próximo documento Command+`
Previous Document Documento anterior Shift+Command+`
Menu Help
Using Dreamweaver Utilizando o Dreamweaver F1
Using ColdFusion Utilizando o ColdFusion Command+F1
ATALHOS DE CÓDIGO
Select Parent Tag Selecionar tag pai Command+[
Select Child Selecionar filho Command+]
Balance Braces Balancear colchetes Command+’
Bold Negrito Command+B
Italic Itálico Command+I
Find and Replace Localizar e substituir Command+F
Find Selection Localizar seleção Command+Shift+G
Find Next Localizar próximo Command+G
Cut Cortar Command+X
Redo Refazer Command+Y
Undo Desfazer Command+Z
Print Code Imprimir código Command+P
Next Document Próximo documento Command+`
Surround with # Cercar com # Command+Shift+3
Delete Word Left Excluir palavra à esquerda Command+Delete
Select Line Up Selecionar linha acima Shift+Up
Select Line Down Selecionar linha abaixo Shift+Down
Character Select Left Selecionar caractere à esquerda Shift+Left
Character Select Right Selecionar caractere à direita Shift+Right
574 LIÇÃO B
Select to Page Up Selecionar até a página acima Shift+PgUp
Select to Page Down Selecionar até a página abaixo Shift+PgDn
Move Word Left Ir para a palavra à esquerda Command+Left
Move Word Right Ir para a palavra à direita Command+Right
Select Word Left Selecionar palavra à esquerda Command+Shift+Left
Select Word Right Selecionar palavra à direita Command+Shift+Right
Move to Start of Line Ir para o início da linha Home
Move to End of Line Ir para o final da linha End
Select to Start of Line Selecionar até o início da linha Shift+Home
Select to End of Line Selecionar até o final da linha Shift+End
Move to Top of File Ir para o início do arquivo Command+Home
Move to End of File Ir para o final arquivo Command+End
Select to Start of File Selecionar até o início de arquivo Command+Shift+Home
Select to Start of File Selecionar até o início de arquivo Command+Shift+End
MENUS DO PAINEL FILES
Menu File
New File Novo arquivo Shift+Command+N
New Folder Nova pasta Option+Shift+Command+N
Rename Renomear F2
Preview in Primary Browser Visualizar no navegador primário Option+F12
Preview in Secondary Browser Visualizar no navegador secundário Command+F12
Menu Edit
Cut Cortar Command+X
Duplicate Duplicar Command+D
Menu View
Refresh Atualizar F5
Show/Hide Link Ocultar/Mostrar vínculo Shift+Command+Y
View as Root Visualizar como raiz Shift+Command+R
Show Page Titles Mostrar títulos de página Shift+Command+T
Site Map Mapa do site Option+F8
Site
Get Transferir do servidor Shift+Command+D
Check Out Fazer check out (Reter o arquivo para Option+Shift+Command+D
edição)
Put Transferir para o servidor Shift+Command+U
Check In Fazer check in (Liberar o arquivo para Option+Shift+Command+U
edição)
Check Links Sitewide Verificar vínculos em todo o site Command+F8
Link to New File Vincular para novo arquivo Shift+Command+N
Link to Existing File Vincular a arquivo existente Shift+Command+K
Change Link Alterar vínculo Command+L
Remove Link Remover vínculo Shift+Command+L

Atalhos do
C Windows
Os atalhos pelo teclado podem acelerar o processo de desenvolvimento do seu site, tor-
nando mais rápido e mais fácil trabalhar com elementos de design e código bem como
funções de gerenciamento de site. Você pode adicionar, remover ou modificar atalhos
pelo teclado do Dreamweaver escolhendo Edit > Keyboard Shortcuts para abrir a caixa de
diálogo Keyboard Shortcuts.
ATALHOS DE MENU
Menu File
New Novo Ctrl+N
Open Abrir Ctrl+O
Open in Frame Abrir em quadro Ctrl+Shift+O
Close Fechar Ctrl+W
Close All Fechar tudo Ctrl+Shift+W
Save Salvar Ctrl+S
Save As Salvar como Ctrl+Shift+S
Print Code Imprimir código Ctrl+P
Preview in Primary Browser Visualizar no navegador primário F12
Preview in Secondary Browser Visualizar no navegador secundário Ctrl+F12
Validate Markup Validar marcação Shift+F6
Exit Sair Ctrl+Q
Menu Edit
Undo Desfazer Ctrl+Z
Redo Refazer Ctrl+Y
Cut Cortar Ctrl+X
Copy Copiar Ctrl+C
Paste Colar Ctrl+V
Paste Special Colar especial Ctrl+Shift+V
Select All Selecionar tudo Ctrl+A
Select Parent Tag Selecionar tag pai Ctrl+[
Select Child Selecionar filho Ctrl+]
Find and Replace Localizar e substituir Ctrl+F
Find Next Localizar próximo F3
Find Selection Localizar seleção Shift+F3
Go to Line Ir para a linha Ctrl+G
Show Code Hints Mostrar dicas de código Ctrl+Space
Indent Code Aumentar recuo do código Ctrl+Shift+>
Outdent Code Diminuir recuo do código Ctrl+Shift+<
576 LIÇÃO C
Balance Braces Balancear colchetes Ctrl+’
Preferences Preferências Ctrl+U
Menu View
Switch Views Alternar visualizações Ctrl+’
Refresh Design View Atualizar visualização Design F5
Live Data* Dados ao vivo* Ctrl+Shift+R
Head Content Conteúdo do cabeçalho Ctrl+Shift+H
Table Mode > Expanded Modo de tabela > Modo de tabelas F6
Tables Mode expandidas
Table Mode > Layout Mode Modo de tabela > Modo de layout Ctrl+F6
Visual Aids > Hide All Auxílios visuais > Ocultar tudo Ctrl+Shift+I
Rulers > Show Réguas > Mostrar Ctrl+Alt+R
Grid > Show Grid Grade > Mostrar grade Ctrl+Alt+G
Grid > Snap to Grid Grade > Ajustar à grade Ctrl+Shift+Alt+G
Plugins > Play Plugins > Reproduzir Ctrl+Alt+P
Plugins > Stop Plugins > Parar Ctrl+Alt+X
Plugins > Play All Plugins > Reproduzir tudo Ctrl+Shift+Alt+P
Plugins > Stop All Plugins > Parar tudo Ctrl+Shift+Alt+X
Menu Insert
Tag Tag Ctrl+E
Image Imagem Ctrl+Alt+I
Media > Flash Media > Flash Ctrl+Alt+F
Media > Shockwave Media > Shockwave Ctrl+Alt+D
Table Tabela Ctrl+Alt+T
Named Anchor Âncora identificada Ctrl+Alt+A
Special Characters > Line Break Caracteres especiais > Quebra de linha Shift+Enter
Special Characters > Non-Breaking Caracteres especiais > Espaço Ctrl+Shift+Space
Space não-separável
Template Object > Editable Region Objeto template > Região editável Crtl+Alt+V
Menu Modify
Page Properties Propriedades de página Ctrl+J
CSS Styles Estilos CSS Shift+F11
Quick Tag Editor Editor Quick Tag Ctrl+T
Make Link Criar Link Ctrl+L
Remove Link Remover link Ctrl+Shift+L
Table > Select Table Tabela > Selecionar tabela Ctrl+A
Move to the Next Cell* Ir para a próxima célula* Tab
Move to the Previous Cell* Ir para a célula anterior* Shift+Tab
Table > Merge Cells Tabela > Mesclar células Ctrl+Alt+M
Table > Split Cell Tabela > Dividir célula Ctrl+Alt+S
Table > Insert Row Tabela > Inserir linha Ctrl+M
Table > Insert Column Tabela > Inserir coluna Ctrl+Shift+A
Table > Delete Row Tabela > Excluir linha Ctrl+Shift+M
Table > Delete Column Tabela > Excluir coluna Ctrl+Shift+-
Table > Increase Column Span Tabela > Aumentar distribuição da coluna Ctrl+Shift+]
Table > Decrease Column Span Tabela > Diminuir distribuição da coluna Ctrl+Shift+[
Align > Left Alinhar > Esquerda Ctrl+Shift+1
Align > Right Alinhar > Direito Ctrl+Shift+3
Align > Top Alinhar > Pela parte superior Ctrl+Shift+4
Align > Bottom Alinhar > Pela parte inferior Ctrl+Shift+6
Align > Make Same Width Alinhar > Tornar da mesma largura Ctrl+Shift+7
Align > Make Same Height Alinhar > Tornar da mesma altura Ctrl+Shift+9
Timeline > Add Object to Timeline Timeline > Adicionar objeto à linha do Ctrl+Alt+Shift+T
tempo
ATALHOS DO WINDOWS 577

Menu Text
Indent Aumentar recuo Ctrl+Alt+]
Outdent Diminuir recuo Ctrl+Alt+[
Paragraph Format > None Formatar parágrafo > Nenhum Ctrl+0
Paragraph Format > Paragraph Formatar parágrafo > Parágrafo Ctrl+Shift+P
Paragraph Format > Heading 1 Formatar parágrafo > Título 1 Ctrl+1
Align > Left Alinhar > Esquerda Ctrl+Shift+Alt+L
Align > Center Alinhar > Centro Ctrl+Shift+Alt+C
Align > Right Alinhar > Direita Ctrl+Shift+Alt+R
Align > Justify Alinhar > Justificar Crt+Shift+Alt+J
Bold Negrito Ctrl+B
Italic Itálico Ctrl+I
Check Spelling Verificar ortografia Shift+F7
Menu Commands
Start Recording Começar a gravar Ctrl+Shift+X
Menu Site
Get Transferir do servidor Ctrl+Shift+D
Check Out Fazer check out (Reter o arquivo Ctrl+Shift+Alt+D
para edição)
Put Transferir para o servidor Ctrl+Shift+U
Check In Fazer check in (Liberar o arquivo para Ctrl+Shift+Alt+U
edição)
Check Links Sitewide Verificar vínculos em todo o site Ctrl+F8
Menu Window
Insert Inserir Ctrl+F2
Properties Propriedades Ctrl+F3
CSS Styles Estilos CSS Shift+F11
Layers Camadas F2
Behaviors Comportamentos Shift+F4
Snippets Fragmentos de código Shift+F9
Databases Bancos de dados Ctrl+Shift+F10
Bindings Ligações Ctrl+F10
Server Behaviors Comportamentos de servidor Ctrl+F9
Components Componentes Ctrl+F7
Files Arquivos F8
Assets Recursos F11
Tag Inspector Inspetor de tags F9
Results Resultados F7
History Histórico Shift+F10
Frames Quadros Shift+F2
Code Inspector Inspetor de Código F10
Timelines Linhas do tempo Alt+F9
Next Document Próximo documento Ctrl+`
Previous Document Documento anterior Ctrl+Shift+`
Menu Help
Using Dreamweaver Utilizando o Dreamweaver F1
Using ColdFusion Utilizando o ColdFusion Ctrl+F1
578 LIÇÃO C
ATALHOS DE CÓDIGO
Atalho de edição de código

Select Parent Tag Selecionar tag pai Ctrl+[
Select Child Selecionar filho Ctrl+]
Balance Braces Balancear colchetes Ctrl+’
Bold Negrito Ctrl+B
Italic Itálico Ctrl+I
Copy Copiar Ctrl+C
Find and Replace Localizar e substituir Ctrl+F
Find Selection Localizar seleção Shift+F3
Find Next Localizar próximo F3
Paste Colar Ctrl+V
Cut Cortar Ctrl+X
Redo Refazer Ctrl+Y
Undo Desfazer Ctrl+Z
Print Code Imprimir código Ctrl+P
Surround with # Cercar com # Ctrl+Shift+3
Switch to Document Alternar para documento Ctrl+`
Select Line Up Selecionar linha acima Shift+Up
Select Line Down Selecionar linha abaixo Shift+Down
Character Select Left Selecionar caractere à esquerda Shift+Left
Character Select Right Selecionar caractere à direita Shift+Right
Delete Word Left Excluir palavra à esquerda Ctrl+Backspace
Delete Word Right Excluir palavra à direita Ctrl+Del
Move to Page Up Subir uma página Page Up
Move to Page Down Descer uma página Page Down
Select to Page Up Selecionar até a página acima Shift+Page Up
Select to Page Down Selecionar até a página abaixo Shift+Page Down
Move Word Left Ir para a palavra à esquerda Ctrl+Left
Move Word Right Ir para a palavra à direita Ctrl+Right
Select Word Left Selecionar palavra à esquerda Ctrl+Shift+Left
Select Word Right Selecionar palavra à direita Ctrl+Shift+Right
Move to Start of Line Ir para o início da linha Home
Move to End of Line Ir para o final da linha End
Select to Start of Line Selecionar até o início da linha Shift+Home
Select to End of Line Selecionar até o final da linha Shift+End
Move to Top of File Ir para o início do arquivo Ctrl+Home
Move to End of File Ir para o final arquivo Ctrl+End
Select to Start of File Selecionar até o início de arquivo Ctrl+Shift+Home
Select to End of File Selecionar até o final do arquivo Ctrl+Shift+End
Snippets Fragmentos de código Shift+F9
MENUS DO PAINEL FILES

Menu File
New File Novo arquivo Ctrl+Shift+N
New Folder Nova pasta Ctrl+Shift+Alt+N
Rename Renomear F2
Delete Excluir Del
Exit Sair Ctrl+Q
Menu Edit
Cut Cortar Ctrl+X
Copy Copiar Ctrl+C
Paste Colar Ctrl+V
Duplicate Duplicar Ctrl+D
ATALHOS DO WINDOWS 579

Menu View
Refresh Atualizar F5
Show/Hide Link Ocultar/Mostrar vínculo Ctrl+Shift+Y
View as Root Visualizar como raiz Ctrl+Shift+R
Show Page Titles Mostrar títulos de página Ctrl+Shift+T
Site Files Arquivos do site F8
Site Map Mapa do site Alt+F8
Menu Site
Get Transferir do servidor Ctrl+Shift+D
Checkout Fazer check out (Liberar para edição) Ctrl+Shift+Alt+D
Put Transferir para o servidor Ctrl+Shift+U
Check In Fazer check in (Liberar o arquivo Ctrl+Shift+Alt+U
para edição)
Check Links Sitewide Verificar links em todo o site Ctrl+F8
Link to New File Vincular para novo arquivo Ctrl+Shift+N
Link to Existing File Vincular a arquivo existente Ctrl+Shift+K
Change Link Alterar link Ctrl+L
Remove Link Remover link Ctrl+Shift+L
580 LIÇÃO C
Para obter informações sobre lançamentos e novidades
da Campus/Elsevier, dentro dos assuntos do seu
interesse, basta cadastrar-se no nosso site. É rápido e fácil.
Além do catálogo completo on-line, nosso site possui avançado
sistema de buscas para consultas, por autor, título ou assunto.
Você vai ter acesso às mais importantes publicações sobre
Profissional Negócios, Profissional Tecnologia, Universitários,
Educação/Referência
e Desenvolvimento Pessoal.
Nosso site conta com módulo de segurança de última geração

para suas compras.
Tudo ao seu alcance, 24 horas por dia.
Clique www.campus.com.br e fique sempre bem informado.
Outras maneiras fáceis de receber informações
sobre nossos lançamentos e ficar atualizado.
ligue grátis: 0800-265340 (2ª a 6ª feira, das 8:00 h às 18:30 h)
preencha o cupom e envie pelos correios (o selo será pago pela editora)
ou mande um e-mail para: info@elsevier.com.br
Nome:
Escolaridade: Masc Fem Nasc: / /
Endereço residencial:
Bairro: Cidade: Estado:
CEP: Tel.: Fax:
Empresa:
CPF/CNPJ: e-mail:
Costuma comprar livros através de: Livrarias Feiras e eventos Mala direta
Internet
Sua área de interesse é:
UNIVERSITÁRIOS EDUCAÇÃO/ PROFISSIONAL DESENVOLVIMENTO

REFERÊNCIA Tecnologia PESSOAL
Administração
Computação Idiomas Negócios Educação Familiar
Economia Dicionários Finanças Pessoais
Comunicação Gramáticas Qualidade de Vida
Engenharia Soc. e Política Comportamento
Estatística Div. Científica Motivação
Física
Turismo
Psicologia
20299-999 - Rio de Janeiro - RJ
CARTÃO RESPOSTA
O SELO SERÁ PAGO POR
Elsevier Editora Ltda
Não é necessário selar
050120048-7/2003-DR/RJ
Elsevier Editora
Ltda
Impressão e acabamento
Imprensa da Fé

Cursos Tutorial Completo Dreamweaver 8

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cursos Tutorial Completo Dreamweaver 8

Enviado por

Direitos autorais:

Formatos disponíveis

MACROMEDIA

Consulte também nosso catálogo

© 2006, Elsevier Editora Ltda.

Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.

Copidesque: Adriana Kramer

ISBN 13: 978-85-352-2057-5

P149d Page, Khristine Annwn

Tradução de: Macromedia dreamweaver 8 : training from

06-1721. CDD 005.369

Khristine Annwn Page escreveu Macromedia Dreamweaver MX 2004 Guia Autorizado

LIÇÃO 1 Princípios básicos do Dreamweaver 8 1

LIÇÃO 2 Adicionando conteúdo a uma página 39

LIÇÃO 3 Criando links 71

LIÇÃO 4 Desenvolvendo folhas de estilo 107

LIÇÃO 5 Trabalhando com imagens gráficas 169

LIÇÃO 6 Criando tabelas 207

LIÇÃO 7 Utilizando multimídia 255

LIÇÃO 8 Adicionando interatividade com o usuário 277

LIÇÃO 10 Criando frames 351

LIÇÃO 11 Criando formulários 377

LIÇÃO 12 Utilizando itens de biblioteca 413

LIÇÃO 13 Utilizando templates 427

LIÇÃO 14 Gerenciando seu site 459

LIÇÃO 16 Editando o código 515

LIÇÃO 17 Utilizando Find and Replace 549

LIÇÃO A Expressões regulares 569

LIÇÃO B Atalhos do Macintosh 571

LIÇÃO C Atalhos do Windows 576

Lição 1: Princípios básicos do Dreamweaver 8

Guia Autorizado Macromedia

Macromedia Authorized Training

O que você aprenderá

 Abrir o Dreamweaver, criar páginas e visualizá-las nos navegadores

Nesta lição, você aprenderá os princípios básicos do planejamento e da preparação de si-

Em seguida, você aprenderá os princípios básicos do Dreamweaver 8 e conhecerá a in-

Nesta lição, você aprenderá sobre a

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 1

Você pode encontrar um exemplo da Lição 1 concluída na pasta Completed dentro da

O que você aprenderá

Usuários do Macintosh: A opção de escolha entre os espaços de trabalho Designer e Co-

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 3

 Links rápidos aos documentos recentes

Se a página inicial não aparecer na inicialização e você quiser visualizá-la, ajuste

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 5

Site de projeto: O público do Yoga Sangha

 Qual conteúdo será necessário para o site? A identificação e a coleta de recursos do

Site de projeto: Conteúdo do Yoga Sangha

Site de projeto: Objetivos

Fase 2: Planejamento e estrutura

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 7

No próximo exercício, você será capaz de ver a estrutura do site de projeto

Fase 3: Desenvolvimento – projetando o site

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 9

A configuração de um site não é obrigatória, embora seja recomendada. O

1. Copie a pasta DW8_YogaSangha do CD-ROM para o disco rígido.

Macintosh: Pasta Macintosh HD/Nome do usuário/Sites/raiz-local

2. Na página inicial do Dreamweaver, selecione Dreamweaver na seção Create New.

Seção Basic da caixa de diálogo Site Definition

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 11

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 13

Certifique-se de selecionar a pasta DW8_YogaSangha que você copiou para seu

Entendendo as opções avançadas

PRINCÍPIOS BÁSICOS DO DREAMWEAVER 8 15

Opções de conexão na caixa de diálogo Site Definition

Abrir o Dreamweaver, criar páginas e visualizá-las nos navegadores

Links rápidos aos documentos recentes

Qual conteúdo será necessário para o site? A identificação e a coleta de recursos do

Adicionando um navegador: Para adicionar um navegador à lista, clique no botão

Removendo um navegador: Para remover um navegador da lista, selecione o nome

Considerando o propósito, os objetivos e o mercado para seu site