Passo a Passo Lite - Dreamweaver 4 01

Prévia do material em texto

ASSOCIAÇÃO BR ASILEIRA DE DIR EITOS R EPROGRÁFICOS
Microsoft Word 2002 Passo a Passo Lite
Copyright  2002 MAKRON Books Ltda.
Todos os direitos para a língua portuguesa reservados pela MAKRON
Books Ltda. Nenhuma parte desta publicação poderá ser reproduzida,
guardada pelo sistema “retrieval” ou transmitida de qualquer modo ou
por qualquer outro meio, seja este eletrônico, mecânico, de fotocópia, de
gravação, ou outros, sem prévia autorização, por escrito, da Editora.
EDITOR: MILTON MIRA DE ASSUMPÇÃO FILHO
Gerente de Produção: Coordenador da Série:
Silas Camargo Marcos Jorge
Editora Assistente:
Gisélia do Carmo Costa
Produtora Editorial:
Sandra Cristina Pedri
Capa:
Marcelo S. Françozo
Editoração Eletrônica: ERJ Composição Editorial e Artes Gráficas
Dados de Catalogação na Publicação
Microsoft Word 2002 Passo a Passo Lite
Núcleo Técnico e Editorial Makron Books
Revisão Técnica: Marcos Jorge
 
ISBN: 85.346.1402-4
Apresentando a Série Passo a Passo Lite
A Série Passo a Passo Lite da Makron Books foi idealizada para atender a um
público diferenciado: o leitor e usuário iniciante na área de informática.
Esta série foi desenvolvida a partir da necessidade de se criar livros
práticos, inteligentes, objetivos, rápidos e fáceis que proporcionem a todos os
leitores, como a própria série classifica, um aprendizado lite.
Apresentando exercícios aplicáveis ao dia-a-dia e notadamente inteli-
gentes, a Série Passo a Passo Lite consegue atingir as diferentes faixas de usuários
do mercado porque não se limita a ensinar comandos, funções ou opções que
cada produto oferece em suas versões. A série apresenta ao leitor, claramente,
o tipo de exercício que ele vai desenvolver no livro e explica passo a passo
todos os procedimentos necessários para construí-lo.
A Série Passo a Passo Lite pode ser extremamente útil para você que
deseja conhecer, de uma forma prática e eficaz, os novos softwares do mercado.
Um disco de exercícios, para ser utilizado durante a leitura dos capítulos, acom-
panha todos os livros da série, com exceção dos livros não dirigidos especifi-
camente a programas.
Fazem parte da Série Passo a Passo Lite os seguintes livros:
➢ Microsoft Windows 95 Passo a Passo Lite
➢ Microsoft Windows 98 Passo a Passo Lite
➢ Microsoft Windows Me Passo a Passo Lite
➢ Microsoft Office 97 Passo a Passo Lite
V
Apresentando a Série
Passo a Passo Lite
➢ Microsoft Word 97 Passo a Passo Lite
➢ Microsoft Word 2000 Passo a Passo Lite
➢ Microsoft Excel 97 Passo a Passo Lite
➢ Microsoft Excel 2000 Passo a Passo Lite
➢ Microsoft Access 97 Passo a Passo Lite
➢ Microsoft Access 2000 Passo a Passo Lite
➢ Microsoft PowerPoint 97 Passo a Passo Lite
➢ Microsoft PowerPoint 2000 Passo a Passo Lite
➢ Microsoft FrontPage 97 Passo a Passo Lite
➢ Microsoft Visual Basic 5.0 Passo a Passo Lite
➢ Microsoft Visual Basic 6.0 Passo a Passo Lite
➢ Borland Delphi 3.0 Passo a Passo Lite
➢ Borland Delphi 4.0 Passo a Passo Lite
➢ Borland Delphi 5.0 Passo a Passo Lite
➢ AutoCad v14 Passo a Passo Lite
➢ AutoCad 2000 Passo a Passo Lite
➢ Corel Draw 7 Passo a Passo Lite
➢ Corel Draw 8 Passo a Passo Lite
➢ Corel Draw 9 Passo a Passo Lite
➢ Corel Draw 10 Passo a Passo Lite
➢ HTML 4 Passo a Passo Lite
➢ Internet Passo a Passo Lite
➢ JavaScript Passo a Passo Lite
➢ Flash 4 Passo a Passo Lite
➢ Flash 5 Passo a Passo Lite
➢ Dreamweaver 4.01 Passo a Passo Lite
VI Dreamweaver 4.01 Passo a Passo Lite
O livro que você está adquirindo trata de um dos maiores programas
para criação e gerenciamento de sites e páginas Web do mercado, o poderoso
e popular Dreamweaver 4.01, da empresa americana Macromedia.
Leia atentamente as seções introdutórias antes de passar para os ca-
pítulos referentes ao exercício que você construirá efetivamente. Nessas seções
você aprenderá as normas e os conceitos aplicados no livro, por onde começar
(se você não se considera um usuário iniciante), e como proceder na instalação
do disco de exercícios que acompanha o livro.
Todos os esforços foram feitos para que os livros da Série Passo a
Passo Lite atingissem seu objetivo, mas você pode nos ajudar muito enviando
suas críticas e sugestões pela World Wide Web.
Você pode se conectar ao nosso endereço Internet de duas maneiras:
➢ Após a instalação do disco de exercícios, você encontrará um ícone
de atalho para a Internet intitulado “Bem-vindo à Makron Books”.
Basta dar um clique duplo nesse ícone e seguir as informações da
sua conexão Dial-Up.
➢ A outra maneira é você digitar diretamente no seu browser (nave-
gador da Web) o nosso endereço URL: www.makron.com.br
Visite o site da Web da Editora Makron Books na Internet e envie suas
opiniões sobre a Série Passo a Passo Lite.
Muito obrigado e uma ótima leitura!
Marcos Jorge
Coordenador da Série Passo a Passo Lite
Apresentando a Série Passo a Passo Lite VII
Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XV
Os Exercícios do Livro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XV
Instalando o Disquete de Exercícios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XV
Normas e Conceitos Utilizados no Livro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Por Onde Começar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
1. Apresentando o Dreamweaver 4.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Requisitos Necessários para Trabalhar com o Dreamweaver 4.01 . . . . . . . . . . . . 2
Como Carregar o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
O Novo Ambiente do Dreamweaver 4.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
A Barra de Título . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
A Barra de Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
A Barra de Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
A Janela Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
A Barra de Status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Os Elementos Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Tamanho da Janela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Tamanho do Documento e Tempo de Download . . . . . . . . . . . . . . . . . . . 10
O Mini-Launcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
As Principais Janelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
O Painel History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
IX
Sumário
Personalizando o Ambiente de Trabalho do Dreamweaver . . . . . . . . . . . . . . . . . 22
Mostrando e Ocultando Paletas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Modificando o Painel Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Escolhendo Ícones, Texto ou Ambos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Mudando a Posição dos Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Modificando o Painel Launcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Modificando o Painel History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 26
As Lições Incorporadas na Versão 4.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
O Sistema de Ajuda do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Uma Demonstração do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Fechando e Continuando no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Fechando o Arquivo e Saindo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Revisão Rápida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2. Desenvolvendo Sites e Páginas na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Armazenamento de Site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Criando Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Carregando o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
A Caixa de Diálogo Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
A Categoria Local Info . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
A Categoria Remote Info . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A Categoria Site Map Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
A Categoria Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Gerenciando Sites a Partir da Janela Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Criando Novas Pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Criando Novas Páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Gerando Conteúdo e Salvando Páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Abrindo Sites Existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Abrindo Páginas Existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Anexando Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Definindo Preferências Globais FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Usando Pastas em Sites Local e Remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Sincronizando Sites Local e Remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Usando Links e URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
O Que São Links e URLs? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
URLs Absolutos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
X Dreamweaver 4.01 Passo a Passo Lite 
URLs Relativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Fechando e Continuando no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Fechando o Arquivo e Saindo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Revisão Rápida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3. A Linguagem HTML no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Carregando o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Editando Rótulos com o Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Tags, Elementos e Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Usando o Code Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Ajustando a Visualização . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Digitando no Code Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Definindo as Opções do Code Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Definindo a Fonte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Definindo as Cores dos Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Trabalhando com Números de Linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Fazendo Alterações com Editores Externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Especificando um Editor HTML Externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Acessando um Editor HTML Externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Usando as Opções HTML de Regravação, Formatação e Limpeza . . . . . . . . . . . 84
Definindo as Opções de Regravação de HTML . . . . . . . . . . . . . . . . . . . . . . . 84
Reconhecendo Erros HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Definindo a Formatação HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Definindo Opções de Formatação na Caixa de Diálogo Preferences . . . . . . 88
Usando o Comando Clean Up HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
O Comando Clean Up Word HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Testando HTML nos Navegadores de Destino . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Definindo o Navegador de Visualização Padrão . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Executando o Teste de Compatibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Fechando e Continuando no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Fechando o Arquivo e Saindo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 103
Revisão Rápida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4. Aperfeiçoando Seu Site Com Imagens e Cores . . . . . . . . . . . . . . . . . . . . . . 105
Carregando o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Inserindo Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Movendo e Copiando Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
 Sumário XI
Redimensionando Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Usando Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Escolhendo Cores Eficazes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Cores Quentes e Frias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Cores Complementares e de Contraste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Cores Naturais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Como as Cores Criam Efeitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Usando as Configurações de Cores do Dreamweaver . . . . . . . . . . . . . . . . . 120
Usando Cores Nomeadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Transferindo Cores com o Conta-Gotas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Composição e a Paleta de Cores Web-Safe . . . . . . . .. . . . . . . . . . . . . . . . . 124
Definindo Cores Personalizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Definindo as Cores de Fundo, Fonte e de Link . . . . . . . . . . . . . . . . . . . . . 128
Definindo as Cores Individualmente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Usando Esquemas de Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Fechando o Arquivo e Continuando no Dreamweaver . . . . . . . . . . . . . . . . . . . . 136
Fechando o Arquivo e Saindo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 137
Revisão Rápida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
5. Aprendendo a Trabalhar com Tabelas e Frames . . . . . . . . . . . . . . . . . . . . . 139
Por Que Usar Tabelas? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Carregando o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Inserindo Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Colocando uma Tabela na Página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Definindo Preferências de Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Mudando os Valores Padrão das Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Frames no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Por Que Usar Frames? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Adicionando Frames e Conjunto de Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Planejando os Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Criando Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Armazenando Frames e Conjuntos de Frames . . . . . . . . . . . . . . . . . . . . . . . 158
Usando Camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
O Que São Camadas? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Considerações Finais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Fechando o Arquivo e Continuando no Dreamweaver . . . . . . . . . . . . . . . . . . . . 165
XII Dreamweaver 4.01 Passo a Passo Lite 
Fechando o Arquivo e Saindo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 165
Revisão Rápida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Apêndice A — O Que Há de Novo no Dreamweaver 4.01 . . . . . . . . . . . . . . . . 167
Apêndice B — Instalação do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Índice Analítico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
 Sumário XIII
Introdução
Para você que é iniciante em Informática e vai agora ter contato com um pro-
grama novo — o Dreamweaver 4 —, este texto introdutório vai ajudá-lo a
compreender a organização deste livro e a aproveitar melhor os exercícios que
o acompanham.
Os Exercícios do Livro
Cada capítulo apresenta exercícios e exemplos específicos do tema abordado.
Dessa forma você encontrará vários exercícios e exemplos para praticar no de-
correr dos cinco capítulos.
E ainda terá, no término de alguns dos capítulos, uma revisão rápida,
para testar ainda mais seus conhecimentos.
Bom trabalho!
Instalando o Disquete de Exercícios
O disquete que acompanha este livro contém os arquivos necessários para a
realização de todos os exercícios.
Depois que você copiar o conteúdo do disquete em seu disco rígido,
uma pasta contendo o nome do livro é criada na sua unidade C:. A partir daí,
você poderá realizar toda a seqüência que for solicitada.
XV
Introdução
Esta pasta apresenta em seu interior subpastas referentes aos capítulos
do livro, dentre outros arquivos de exercícios. Desta forma, você poderá, a
qualquer momento, carregar e analisar um arquivo específico.
Sempre que o exercício mostrar um arquivo ou mesmo lhe pedir para
carregar um arquivo específico na pasta de exercícios, utilize os arquivos que
você copiou em seu disco rígido, preservando assim o conteúdo original do
seu disquete de exercícios para uma futura reciclagem ou mesmo para uma
nova instalação em um outro equipamento.
Para instalar o disquete de exercícios em seu disco rígido, unidade C:,
proceda da seguinte forma:
1. Se seu computador ainda não estiver ligado, ligue-o agora.
2. Apanhe o disquete que está no final deste livro e insira-o na unidade
31/2" de seu equipamento.
3. Dê um clique no botão Iniciar na barra de tarefas do Win-
dows, aponte para a opção Programas e, em seguida, dê um clique
na opção Acessórios.
4. Finalmente, dê um clique na opção Windows Explorer.
A janela do Windows Explorer parecerá.
Neste livro estamos utilizando o sistema operacional Microsoft
Windows Me (Millennium Edition), caso você esteja utilizando
a versão 95 ou 98 deste sistema operacional, dê um clique em
Windows Explorer, logo após a opção Programas.
5. Agora dê um clique na unidade de disco em que você inseriu o
disco de exercícios.
6. Depois dê um clique e arraste para sua unidade C: a pasta Dream-
weaver Passo a Passo Lite que aparece na janela lateral direita do
Windows Explorer.
Aguarde enquanto o Windows realiza a cópia da pasta de exercícios
para sua unidade C:.
Pronto! A pasta Dreamweaver Passo a Passo Lite foi copiada para a
sua unidade C:.
XVI Dreamweaver 4.01 Passo a Passo Lite
7. Feche a janela do Windows Explorer dando um clique no botão Fechar
 localizado no canto superior direito.
Introdução XVII
Neste momento você apenas realizou a cópia do disco de exercícios
em sua unidade C:, não a instalação do software Dreamweaver.
Para a instalação deste software, siga as instruções do manual
que acompanha o programa e veja também o Apêndice B —
Instalação do Dreamweaver 4.
Após a leitura e realização dos exercícios do livro, pode ser que você
não queira mais a pasta de exercícios. Para excluí-la você chamará novamente
o Windows Explorer. Para isso, proceda da seguinte forma:
1. Dê um clique no botão Iniciar na barra de tarefas do Win-
dows Me, aponte para a opção Programas e, em seguida, dê um
clique na opção Acessórios.
2. Finalmente, dê um clique na opção Windows Explorer.
A janela do Windows Explorer parecerá.
Neste livro estamos utilizando o sistema operacional Microsoft
Windows Me (Millennium Edition), caso você esteja utilizando
a versão 95 ou 98 deste sistema operacional, dê um clique em
Windows Explorer, logo após a opção Programas.
3. Na sua unidade C: localize a pasta Dreamweaver Passo a Passo Lite
e, em seguida, dê um clique sobre ela para selecioná-la.
4. Pressione a tecla DELETE.
5. Finalmente, dê um clique no botão Sim para confirmar a exclusão.
Relação dos arquivos que fazem parte da pasta Dreamweaver Passo a
Passo Lite:
XVIII Dreamweaver 4.01 Passo a Passo Lite
Pasta: C:\Dreamweaver Passo a Passo Lite\
Bem-Vindo à Makron Books Atalho para o site Web da Makron Books
Glossário Arquivo Word com termos técnicos
Leia-me Arquivo Word de apresentação
Gifs animados Pasta de exercício
Imagens Pasta de exercício
MeuSite Pasta de exercício
Textos Pasta de exercício
Revisão Rápida Pasta para armazenamento da revisão rápida
Pasta C:\ Dreamweaver Passo a Passo Lite\Gifs animados\
Ag00021_.gif Arquivo de gif animado
Ag00139_.gif Arquivo de gif animado
Ag00142_.gif Arquivo de gif animado
Ag00158_.gif Arquivo de gif animado
CONSTR01.gif Arquivo de gif animado
Email.gif Arquivo de gif animado
explosao.gif Arquivo de gifanimado
frank.gif Arquivo de gif animado
fundo2.gif Arquivo de gif animado
garfield.gif Arquivo de gif animado
GifAnim4.gif Arquivo de gif animado
porta.gif Arquivo de gif animado
Pasta C:\ Dreamweaver Passo a Passo Lite\Imagens\
Imagem1.gif Arquivo de imagem
vampiro.gif Arquivo de imagem
Introdução XIX
Pasta C:\ Dreamweaver Passo a Passo Lite\MeuSite\
_notes Pasta de exercício
DadosPessoais Pasta de exercício
DadosProfissionais Pasta de exercício
FaleComigo Pasta de exercício
GostoDeFazer Pasta de exercício
Frame0.htm Arquivo de página HTML
Frame1.htm Arquivo de página HTML
Frame2.htm Arquivo de página HTML
index.htm Arquivo de página HTML
explosao.gif Arquivo de imagem
Imagem1.gif Arquivo de imagem
Pasta C:\ Dreamweaver Passo a Passo Lite\Textos\
Abertura.txt Arquivo de texto
Dados pessoais.txt Arquivo de texto
Dados profissionais.txt Arquivo de texto
Fale comigo.txt Arquivo de texto
Gosto de fazer.txt Arquivo de texto
Após a instalação da pasta de exercícios em seu equipamento, retire
o disquete da sua unidade de disco e guarde-o em um lugar seguro.
As pastas geradas na instalação do disco de exercícios possuem, entre
outras coisas, os arquivos referentes aos exercícios aplicados durante o livro.
Caso você encontre alguma dificuldade na realização dos exercícios de
determinados capítulos, ou mesmo tenha curiosidade de verificar como eles
foram criados, você pode a qualquer momento carregar e trabalhar com estes
arquivos.
Se você por algum motivo qualquer modificar ou até mesmo apagar
alguma informação destes arquivos comprometendo sua execução, repita nova-
mente o processo de instalação do disquete de exercícios.
XX Dreamweaver 4.01 Passo a Passo Lite
Nunca altere os arquivos diretamente no disquete de exercícios que
acompanha o livro, preserve-o na forma original. Ele é a sua garantia para
possíveis novas instalações em seu micro ou em qualquer outro.
Normas e Conceitos Utilizados no Livro
➢ Todos os exercícios possuem seqüência numérica crescente.
➢ Os nomes das teclas utilizadas no exercício são escritos em letras
MAIÚSCULAS.
➢ As opções de menu, os comandos, os botões, as funções, os nomes
das janelas e das caixas de diálogo e de verificação estão em Itálico
nas descrições de exercícios práticos.
➢ Os caracteres ou comandos que você digitar aparecem em negrito.
➢ Toda vez que você encontrar o sinal de adição (+) entre dois nomes
de teclas, deverá pressionar estas teclas ao mesmo tempo. Por exem-
plo, “Pressione ALT + TAB” significa que você deverá manter pres-
sionada a tecla ALT enquanto pressiona a tecla TAB.
➢ “Dar um clique” significa apontar para um objeto e, então, pressionar
e liberar rapidamente o botão esquerdo do mouse.
➢ “Arrastar” significa apontar para um objeto e, então, pressionar e
manter pressionado o botão esquerdo enquanto desloca o mouse.
➢ “Dar um clique duplo” significa pressionar e liberar o botão esquerdo
do mouse duas vezes, rápida e sucessivamente.
Por Onde Começar
Este livro está dividido em cinco Capítulos e dois Apêndices. Cada capítulo
possui alguns exemplos e exercícios desenvolvidos passo a passo. Ao final de
alguns capítulos, você poderá fazer uma rápida revisão do que aprendeu até
aquele momento, testando assim seus conhecimentos ainda mais.
Introdução XXI
• Se você se considera iniciante
no Dreamweaver
• Vá para o Capítulo 1 e faça toda a
seqüência passo a passo.
• Se você já tem algum
conhecimento com o
Dreamweaver ou outro
programa similar no mercado
• Vá para o Capítulo 3 — A Linguagem
HTML no Dreamweaver, faça a
seqüência passo a passo e leia os
Apêndices.
XXII Dreamweaver 4.01 Passo a Passo Lite
1.Apresentando o Dreamweaver 4.01
O Macromedia Dreamweaver 4.01 é um programa de edição e criação de páginas
Web que permite que você também gerencie suas páginas desenvolvidas e até
mesmo o seu site. Você não precisa escrever sequer uma linha de programação
ou mesmo saber alguma linguagem específica para usar o Dreamweaver. Ele
é compatível com os principais navegadores existentes no mercado, como o
Microsoft Internet Explorer e o Netscape.
Quando você abre pela primeira vez o Dreamweaver, percebe imedia-
tamente que este é um programa diferente. É óbvio que muitas idéias foram
usadas no Dreamweaver, não apenas na funcionabilidade básica, mas também
no design da interface. O programa tem os elementos clássicos de todas as
grandes ferramentas: simplicidade, elegância e profundidade. Se você estiver
ainda começando no design de páginas Web, o Dreamweaver não vai intimidá-lo.
Se você for um usuário veterano que tem criado páginas Web durante anos,
apreciará a grande quantidade de opções que o Dreamweaver coloca nas suas
mãos. Muitos programas de criação de páginas Web não são nada mais do que
um outro processador de texto com alguns botões extras. O Dreamweaver é
diferente. Ele foi criado desde o zero com apenas uma finalidade: ajudá-lo a
criar sites Web profissionais. 
Neste capítulo, iniciamos nossa introdução do Dreamweaver com um
rápido passeio por sua interface. Você conhecerá as partes do layout do Dream-
weaver e como elas são usadas.
1
Apresentando o
Dreamweaver 4.01
Requisitos Necessários para Trabalhar
com o Dreamweaver 4.01
Para trabalhar com o Dreamweaver 4.01 é necessário ter a seguinte configuração
de hardware e software:
Para o Windows:
➢ Um processador Pentium da Intel ou equivalente, de 166 MHz ou
mais rápido, executando o Windows 95, Windows 98, Windows
2000, Windows ME ou Windows NT (com o Server Pack 3)
➢ A versão 4.0 ou mais avançada do Netscape Navigator ou do Mi-
crosoft Internet Explorer
➢ 32 MB de memória de acesso aleatório (RAM) e 110 MB de espaço
disponível em disco
➢ Um monitor de 256 cores com resolução de 800 x 600 pixels
➢ Uma unidade de CD-ROM
Para o Macintosh:
➢ Um Power Macintosh, executando o Mac OS 8.6 ou 9.x
➢ 32 MB de memória de acesso aleatório (RAM) e 135 MB de espaço
disponível em disco
➢ Um monitor de 256 cores com resolução de 800 x 600 pixels
➢ Uma unidade de CD-ROM
Como Carregar o Dreamweaver
Antes de iniciarmos efetivamente nossa introdução ao ambiente do Dreamweaver
4.01, vamos aprender a carregá-lo em nosso computador. Para isso, proceda
da seguinte forma:
1. Na barra de tarefas do Windows, dê um clique no botão Iniciar
 aponte para a opção Programas e, em seguida, dê um clique
na opção Macromedia Dreamweaver 4.
2. Finalmente, dê um clique na opção Dreamweaver 4.
2 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Você verá a tela principal do novo Dreamweaver, conforme mostra a
figura a seguir:
Esta é a tela que aparece quando você carrega pela primeira vez o
Dreamweaver 4 após sua instalação.
Quando você inicia o Dreamweaver, o programa abre com uma variedade
de ferramentas que ficam disponíveis imediatamente.
Vamos conhecer muitas dessas ferramentas no decorrer deste livro.
Agora para darmos seqüência, vamos fechar a janela intitulada Welcome
que está no meio da nossa tela.
Proceda da seguinte forma:
1. Dê um clique no botão Fechar localizado no canto superior direito
da janela Welcome.
Com este procedimento a janela é fechada.
Cap 1 Apresentando o Dreamweaver 4.01 3
A instalação do Dreamweaver é simples. A menos que você tenha
alguns requisitos não usuais, basta aceitar as pastas padrão. Com
o CD de Instalação em sua unidade de CD, escolha Iniciar ➢
Executar (Windows) e procure o arquivo Installer.exe. Ou dê
um clique duplo no ícone do Instalador do Dreamweaver
(Macintosh). Em seguida, siga as instruções na tela e, ao final,
se for solicitado, reinicie o computador. Caso ache necessário,
consulte o manual do Dreamweaver que acompanha o programa.
Vamos conhecer agora o novo ambiente do Dreamweaver 4.
O Novo Ambiente do Dreamweaver 4.01
A área principal é ocupada pela janela Document onde você vai ver e editar a
página Web com a qual está trabalhando. Imediatamente à esquerda está a
paleta de objetos (Objects), contendo os ícones que você estará usando para
inserir objetos na página Web. Naparte inferior direita da barra de status está
a barra do mini-launcher, que lhe proporciona acesso instantâneo às paletas e
inspetores mais usados. Abaixo da janela Document está o inspetor de proprie-
dades (Properties), que lhe dá informações sobre as propriedades de qualquer
elemento selecionado na página Web.
Vamos examinar mais detalhadamente cada um desses elementos, co-
meçando com a barra de título.
A Barra de Título
Na parte superior, a barra de título mostra o título do documento. Se você
ainda não atribuiu um título ao documento, o Dreamweaver usa Untitled Do-
4 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
cument como título padrão. Em seguida, entre parênteses, ele mostra o nome
do arquivo. Enquanto você não salvar o documento, o Dreamweaver mostra
Untitled e um número como nome do arquivo, como por exemplo, Untitled-1
ou Untitled-2. O número é incrementado de 1 para cada novo documento que
você criar, e começará novamente em Untitled-1 todas as vezes que você iniciar
o Dreamweaver.
O título da uma página Web não é a mesma coisa que seu nome
de arquivo.
Enquanto você trabalha na sua página Web, o nome do arquivo ganha
um asterisco no fim. Esse asterisco é o sinal do Dreamweaver de que foram
feitas alterações que ainda não foram salvas. A cada vez que você salva um
documento, o asterisco desaparecerá, mas aparecerá novamente quando você
fizer mais alterações. O asterisco nunca se torna parte do nome do arquivo no
seu disco; ele á apenas um lembrete sobre as alterações não salvas.
A Barra de Menu
Sob a barra de títulos está a barra de menu. A tabela a seguir dá uma visão
rápida da função de cada opção do menu principal. Entraremos em detalhes
sobre as opções de menu em capítulos mais adiante quando discutiremos como
executar tarefas específicas.
Opções da Barra de Menu da Janela Documento
Menu Funções
File Cria, abre, e salva sites e páginas Web; importa e exporta arquivos;
acrescenta notas de design e verifica vínculos e compatibilidade de
navegador.
Edit Desfaz, recorta, cola, seleciona, localiza, chama um editor externo,
e define preferências.
View Mostra ou oculta vários elementos como réguas, grades, e barra de
status.
Cap 1 Apresentando o Dreamweaver 4.01 5
Menu Funções
Insert Insere objetos na página Web (duplica a paleta Objetos)
Modify Altera uma grande variedade de atributos para elementos de
páginas Web; por exemplo, dividir quadros, acrescentar linhas a
tabelas etc.
Text Define todos os atributos para elementos de texto e executa o
verificador ortográfico.
Commands O termo commands, ou seja, comandos tem dois significados no
Dreamweaver. No sentido estrito, um comando é um determinado
tipo de extensão. Contudo, em determinados contextos, a palavra
comando é utilizada como sinônimo de item de menu significando
qualquer item que apareça em um menu do Dreamweaver, sem
levar em conta a sua função ou como é implementado.
Site Abre, cria e usa sites; permite ver mapas de sites; transferir
arquivos; localizar arquivos.
Window Define quais paletas e inspetores estão visíveis e alterna entre
janelas abertas.
Help Abre as páginas de ajuda baseadas em HTML do Dreamweaver,
acessa o site Web do Dreamweaver, e executa registro on-line do
Dreamweaver.
A Barra de Ferramentas
A barra de ferramentas do Dreamweaver permite gerenciar como uma página
será visualizada: a visualização do projeto, visualização do código ou a visua-
lização tanto do código como do projeto. A barra de ferramentas proporciona
fácil acesso aos recursos utilizados normalmente, como visualizar no navegador.
A Janela Document
Na janela Document (documento) há muito mais do que apenas um grande
espaço em branco onde se pode digitar. Há uma grande quantidade de infor-
6 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
mações e recursos embutidos nessa janela, divididos entre a barra de títulos,
a barra de menu, e a barra de status.
A Barra de Status
A barra de status não só mostra informações sobre o que está na janela Document,
como também proporciona maneiras de interagir com o Dreamweaver. Da es-
querda para a direita, a barra de status mostra os elementos Tags, tamanho
da janela, tamanho do documento, tempo de download, e os ícones do mini-
launcher.
Os Elementos Tags
O lado esquerdo da barra de status na parte inferior da janela Document mostra
a hierarquia dos elementos Tags HTML selecionados. Inicialmente, antes de acres-
centar qualquer elemento à sua página Web, o único elemento que aparece na
barra de status é o elemento <BODY>. Ele já está lá porque ele é o elemento
que contém todos os outros elementos na página Web visível (no caso de uma
página construída com molduras você terá o elemento FRAMESET aparecendo).
Isto proporciona um atalho para selecionar elementos. Basta dar um clique em
um tag para selecionar aquele elemento. Você pode selecionar a página Web
inteira, incluindo todos os elementos que ela contém, dando um clique no tag
<body>, por exemplo.
Se você se acha inexperiente no uso da linguagem HTML e quer
aprender mais a respeito, veja o livro HTML 4 Passo a Passo
Lite.
Agora observe este exemplo:
Cap 1 Apresentando o Dreamweaver 4.01 7
Como você pode ver, somente os tags iniciais dos elementos aninhados
aparecem na barra de status. No exemplo da figura, o cursor está sobre a frase
com os estilos itálico, negrito e sublinhado e a barra de status mostra <body>
<p> <b> <u> <i>. Isso significa, lendo da direita para a esquerda, que um
elemento (texto) está i(itálico), u(sublinhado), b(negrito) e finalmente está con-
tido dentro de um elemento p(parágrafo), que por sua vez está contido dentro
do elemento <body>.
Dando um clique no tag <body> seleciona-se o documento inteiro;
dando-se um clique em qualquer outro tag, seleciona-se a sentença inteira, ou
seja, o texto em questão.
O Dreamweaver mostra os tags em letras minúsculas, o que não
está de acordo com o padrão HTML. O padrão especifica que os
tags devem ser mostrados em maiúsculas e seus atributos devem
ser mostrados em letras minúsculas. No entanto, isso não é um
requisito técnico, mas sim uma sugestão de estilo. Adotar
maiúsculo ou minúsculo nos tags não tem efeito algum sobre o
desempenho de uma página Web. Você pode mudar a configuração
(Edit ➢ Preferences) do Dreamweaver de maneira que os tags
(comandos, elementos, rótulos ou marcas) sejam mostrados em
minúsculas no código-fonte HTML, mas isso não afetará a maneira
como eles são mostrados na barra de status. Eles continuarão
lá em letras minúsculas, independente das configurações adotadas.
Tamanho da Janela
O próximo item na barra de status é o tamanho (em pixels) da janela atual.
A janela Document não está presa ao seu tamanho inicial, naturalmente, você
8 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
pode redimensioná-la como qualquer outra janela (usando o botão de maximizar
no canto superior direito ou arrastando as bordas ou cantos).
O Dreamweaver também proporciona um método rápido para alterar o
tamanho da janela para uma série de dimensões precisas. Dando-se um clique o
indicador de tamanho corrente na barra de status , aparece um menu com
várias opções de tamanho de janela já predefinidas, como mostramos abaixo:
Se nenhum dos tamanhos predefinidos serve para suas necessidade,
você pode criar o seu próprio. Para isso, proceda da seguinte forma:
1. Dê um clique na opção Edit Sizes no menu suspenso. O Dreamweaver
abre a caixa de diálogo Preferences com a categoria Status Bar se-
lecionada. Como essa é uma seleção de menu sensível ao contexto,
há um campo de edição em branco à espera de uma entrada, como
mostra a figura a seguir:
Cap 1 Apresentando o Dreamweaver 4.01 9
2. Digite a nova largura, campo Width, pressione a tecla TAB, e digite
a nova altura, campo Height.
3. Pressione TAB novamente e digite no campo Description uma des-
crição qualquer para a sua configuração personalizada.
Se você preferir, pode selecionar e digitar sobre os valores de
tamanhos predefinidos na caixa de diálogo Preferencesem vez
de criar a sua própria configuração. Antes de fazer isso, é bom
anotar os valores existentes caso você queira voltar a eles depois.
4. Se você quiser entrar com uma nova série de valores personalizados,
pressione TAB mais uma vez para começar uma nova linha.
5. Quando terminar, dê um clique no botão OK.
As suas novas configurações agora estarão disponíveis no mesmo
menu em que estavam aquelas predefinidas.
Como as páginas Web têm uma altura indefinida (podem ser
muito longas), o valor da altura é menos importante que o valor
da largura. Você não precisa especificar uma combinação
determinada de altura e largura. Você pode definir só a largura
na caixa de diálogo Preferences e não digitar um valor específico
na coluna referente à altura.
Tamanho do Documento e Tempo de Download
O próximo campo indicado na barra de status mostra o tamanho do documento
e o tempo de download. O tamanho não é exatamente o tamanho do arquivo
de código HTML. O Dreamweaver vai um pouco além das realidades do mundo
de um designer de página Web — o tamanho do documento é o tamanho do
arquivo combinado do arquivo HTML e todos os arquivos que são incorporados
com ele para produzir a página Web final. Assim, se você tiver um arquivo
HTML de 2KB, mas há uma imagem de 9KB vinculada a ele, o tamanho do
documento será mostrado como 11KB.
10 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
O tempo de download se baseia no tempo gasto por um visitante do
seu site Web usando um modem 28.8 Kbps (kilobits por segundo). Você pode
mudar esse valor para atender a outras possibilidades, variando desde um modem
mais lento até uma conexão de banda larga. Para mudar a configuração da
velocidade de conexão, proceda da seguinte forma:
1. Dê um clique na opção Edit e, em seguida, dê um clique na opção
Preferences na barra de menu.
2. Na caixa de diálogo Preferences, dê um clique na opção Status Bar
na lista de categoria (conforme visto na figura anterior).
3. E, em seguida, dê um clique na caixa de listagem drop-down Con-
nection Speed e selecione a velocidade desejada na lista.
Suas escolhas (em kilobits por segundo) são 14.4, 28.8, 33.6, 56,
64, 128 ou 1500.
4. Ao final, dê um clique no botão OK.
Como o valor da velocidade de conexão está no mesmo lugar
em que estão os tamanhos de janela, você também pode chegar
lá dando um clique no indicador de tamanho de janela na barra
de status e escolhendo Edit Sizes no menu suspenso. Isso tem a
vantagem de colocá-los diretamente na categoria Status Bar da
caixa de diálogo Preferences, e usa um clique de mouse a menos
do que o procedimento padrão.
O Mini-Launcher
O item final da barra de status é o mini-launcher, ou seja, um miniiniciador,
que apresenta também as opções da janela Launcher.
Veja a figura a seguir:
Cap 1 Apresentando o Dreamweaver 4.01 11
Assim como a janela Launcher, o mini-launcher da barra de status abre
as paletas (ou painéis) e inspetores usados com mais freqüência. Em ordem
da esquerda para a direita, os botões padrão abrem a janela Site (uma janela
que propicia o gerenciamento do seu site), Assets (uma paleta que permite que
você trabalhe com determinadas propriedades), a paleta HTML Styles (uma paleta
que permite que você trabalhe com os estilos da linguagem HTML disponibi-
lizados no Dreamweaver), a paleta CSS Styles (uma paleta que permite que
você trabalhe com os estilos de folhas de estilo em cascata), o inspetor Behaviors
(uma paleta que permite que você trabalhe com os tipos de comportamentos
do Dreamweaver), o painel History (um painel que apresenta um histórico de
todas as ações realizadas no Dreamweaver) e o Code Inspector (um inspetor
de código da linguagem HTML).
A seguir apresentamos uma tabela mais consistente que lista os botões
padrão do painel Launcher e descreve rapidamente as funções dos itens que
eles representam.
Os detalhes sobre como usar cada uma dessas janelas, paletas/painéis
e inspetores serão discutidos em capítulos mais adiante.
Botão Função
Site Serve como uma central de controle para operações de
gerenciamento de site Web. Cria mapas de site, faz upload de
arquivos etc.
Assets Apresenta as propriedades do objeto ou texto selecionado e
permite modificá-las (as propriedades que aparecerão no
inspetor dependerão do objeto ou texto selecionado).
HTML Styles Aplica estilos de fonte HTML
CSS Styles Aplica estilos personalizados das folhas de estilos em cascata
à elementos da página.
Behaviors Define ou modifica ações e comportamentos JavaScript, que
ocorrem em resposta a eventos como cliques do mouse.
History Rastreia todas as suas ações. Desfaz e refaz passos.
Code Inspector Visualiza e edita código-fonte HTML para a página Web atual.
12 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
A janela Launcher encobre parcialmente a barra de menu na
janela Document se a resolução da sua tela for menor do que
1024 x 768. Você pode resolver isso sem perder qualquer
funcionabilidade. Basta dar um clique no botão Fechar no
canto superior da janela para fechá-la (ou selecione a opção
Window ➢ Launcher da barra de menu). Se você quiser pode
movê-lo dando um clique no ícone de reposicionamento no canto
inferior direito para transformá-lo de horizontal para vertical,
depois arraste-o para fora da janela Document.
Você pode até escolher qual das paletas/painéis e inspetores serão mos-
trados no painel Launcher, e em que ordem eles são mostrados, conforme será
explicado na seção “Personalizando o Ambiente de Trabalho do Dreamweaver
4" mais adiante neste capítulo.
As Principais Janelas
Selecionamos a seguir algumas das principais janelas, ou também chamados de
painéis, que encontramos (e utilizamos com mais freqüência!) no Dreamweaver.
Objects
O painel Objects proporciona uma maneira fácil de inserir objetos no seu do-
cumento. Escolhendo ou arrastando um ícone deste painel, aquele objeto é
colocado na sua página Web. Dependendo do objeto, aparecerá uma caixa de
Cap 1 Apresentando o Dreamweaver 4.01 13
diálogo correspondente, que solicitará a seleção ou inserção do arquivo ou do
objeto desejado.
Por padrão, o painel Objects mostra somente ícones. No entanto, você
pode configurá-lo para mostrar ícones, texto (o nome do objeto), ou ambos,
conforme explicaremos mais adiante neste capítulo, na seção “Modificando o
Painel Objects”.
O painel Objects na realidade é composto por sete diferentes categorias,
cada uma contendo um grupo de novo de objetos. Para mudar de uma categoria
para outra, dê um clique na seta que aponta para baixo no topo do painel
Objects para acessar o menu suspenso (se você der um clique no Fechar 
acima da seta, fechará o painel Objects).
O painel Objects contém botões para criar e inserir objetos como tabelas,
camadas e imagens. Para mostrar ou ocultar o painel Objects, escolha a opção
Window ➢ Objects da barra de menus.
Algumas configurações das preferências gerais afetam o painel
Objects. Para modificá-las, escolha Edit ➢ Preferences na barra
de menu e, em seguida, selecione General.
Ao inserir objetos, como imagens, tabelas, scripts e elementos head,
uma caixa de diálogo solicitará informações adicionais. Utilize
o inspetor Assets para alterar as propriedades do objeto após a
inserção.
As sete categorias do painel Objects são: Character, Common, Forms,
Frames, Head, Invisibles e Special. Ele também contém botões que alteram a
visualização (View) e Layout.
As próximas seções descrevem rapidamente os painéis da paleta Objects.
Em capítulos mais adiante, apresentaremos os vários objetos e seus usos em detalhes.
Character
14 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Os objetos da categoria Character representam caracteres especiais que não são
encontrados em um teclado típico, como os símbolos de direitos autorais e
marca registrada, além de aspas curvas.
Pode acontecer que estes símbolos não sejam exibidos corretamente
nas versões anteriores à 3.0 dos navegadores (Netscape e IE).
Embora a linguagem HTML tenha outros métodos para inserir esses
caracteres (digitandoas referências da entidade caractere ou os códigos de
caractere), o Dreamweaver torna isso mais fácil. Os objetos Character inserem
alguns dos caracteres especiais mais usados comumente, desde os símbolos de
moedas internacionais, até aspas curvas.
O botão Insert Other Character do painel Character abre uma
caixa de diálogo de símbolos. Lá, você pode dar um clique em
um caractere especial para inserir na sua página.
Common
A categoria Common contém botões para criar e inserir os objetos mais comu-
mente utilizados, como imagens, tabelas, camadas e linhas horizontais, ou seja,
são aqueles objetos utilizados com maior freqüência pela maioria dos criadores
de páginas Web.
Os ícones na metade inferior do painel são para objetos que alguns
usuários podem achar que não se encaixam em qualquer uma das outras ca-
tegorias no painel Objects.
Cap 1 Apresentando o Dreamweaver 4.01 15
Se você encurtar o painel Objects redimensionando-o vertical-
mente, não conseguirá ver todos os ícones de uma só vez da
categoria Common (a menos que você tenha um monitor de 21
polegadas). Para ver todos os ícones, você precisará dar um clique
na seta que aponta para baixo na parte inferior do painel para
rolar para baixo. Quando você faz isso, aparecerá uma seta
apontando para cima na parte superior dos objetos, e você pode
dar um clique para rolar de volta para cima. Para evitar a
necessidade de rolar através do painel, basta colocar o ponteiro
do mouse na parte inferior do painel Objects e arrastar até que
você possa ver todos os ícones de objetos de uma vez.
Forms
A categoria Forms contém os objetos para criar os formulários e inserir os seus
elementos. Esses objetos são usados para criar e modificar formulários.
A única exceção é o botão Insert Jump Menu, que na realidade é por
si só um formulário especializado. Ele é usado para criar uma série de opções
que, quando selecionadas, enviam o usuário para um novo URL.
Frames
16 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
A categoria Frames contém as estruturas mais comuns dos conjuntos de molduras
encontrados em páginas Web.
Os objetos desta categoria proporcionam uma maneira incrivelmente
simples para criar páginas com molduras, ou também conhecidas como páginas
com frames. Basta escolher o layout que você quiser e arrastá-lo para a página
Web. Você pode até inserir objetos Frames em uma página Web que já contenha
outros elementos.
A seção View do painel Objects permite escolher entre a visua-
lização Standard (padrão) ou Layout. Se a visualização de layout
for selecionada, também será possível selecionar as ferramentas
de layout — desenhar a célula de layout e desenhar a tabela de
layout (os dois botões encontrados na seção Layout do painel
Objects).
Head
A categoria Head contém botões para adicionar diversos elementos de cabeçalho,
como os tags meta, palavras-chave (keyword) e base.
Os objetos da categoria Head não aparecem na parte visível de uma
página Web (o tag <BODY>), mas existem somente dentro do elemento HEAD.
Invisibles
A categoria Invisibles contém botões para criar objetos que não são visíveis na
janela do navegador, como as âncoras com nome por exemplo.
Cap 1 Apresentando o Dreamweaver 4.01 17
Escolha a opção View ➢ Visual Aids ➢ Invisible Elements da barra de
menu, para exibir os ícones que marcam a posição desses objetos.
Quando você precisar alterar, por exemplo, as propriedades desses ob-
jetos, basta dar um clique nos elementos invisíveis na janela Document para
selecioná-los e, em seguida, alterar suas propriedades.
Os objetos Invisibles, assim como os objetos Head, não são visíveis em
um navegador Web. No entanto, diferentemente dos objetos Head, os objetos
Invisibles são na realidade parte da página Web principal, e estão contidos dentro
do tag <BODY> assim como as partes visíveis.
Special
A categoria Special contém botões para inserir itens especiais, como miniapli-
cativos Java, plug-ins e objetos ActiveX.
Propriedades
O inspetor de propriedades — painel Properties — é diferente do painel Objects
e do Launcher, não somente em sua função, mas também porque ele nem sempre
contém as mesmas opções. O painel Properties básico mostra os atributos (ou
propriedades) mais comumente usados como tamanho de fonte e alinhamento.
Este painel é sensível ao contexto, portanto seu conteúdo muda dependendo
do elemento que você selecionou.
Um elemento da página é um objeto ou texto.
Por exemplo, o painel Properpies em uma página Web em branco apenas
é definido para atributos de texto.
18 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Ele também proporciona o acesso a outros atributos menos comuns,
que variam de um elemento para outro. Para vê-los, expanda o painel Properties
dando um clique na seta que aponta para baixo (chamada de seta expansora)
no canto inferior direito do painel.
Com o painel expandido, a seta aponta para cima. Dando um clique
na seta que aponta para cima o painel retorna ao seu estado diminuído.
No caso de algumas propriedades, as alterações não serão aplicadas
enquanto você não der um clique fora dos campos de texto para edição de
propriedades, pressionar a tecla ENTER ou pressionar a tecla de tabulação,
para passar a outra propriedade.
O painel Properties é uma via de mão dupla. Ele permite não apenas
ver as propriedades correntes de um elemento, como também alterá-las. Quais-
quer alterações que você faça nas configurações no painel Properties são refletidas
instantaneamente na janela Document. Por exemplo, se você seleciona algum
texto e muda a propriedade da fonte de itálico para negrito, o texto instanta-
neamente aparece como negrito em vez de itálico na janela Document.
Para mostrar ou ocultar o painel Properties, escolha a opção
Window ➢ Properties da barra de menu.
Para obter informações sobre determinadas propriedades, selecione um
elemento na janela Document e, em seguida, dê um clique no ícone Ajuda, no
canto superior direito do painel Properties.
O Painel History
O painel History nasceu no Dreamweaver 3. Este painel faz muito mais do que
simplesmente mostrar uma lista das suas ações. Ele permite desfazer e refazer
as ações sem ter de passar pelo procedimento normal de menu e teclado.
O detalhe realmente impressionante do painel History é que você pode
seletivamente refazer as ações em vez de simplesmente refazer a mais recente
delas. Tudo o que você tem de fazer é rolar de volta até encontrar a ação que
Cap 1 Apresentando o Dreamweaver 4.01 19
você quer repetir, depois selecioná-la e dê um clique no botão Replay no canto
inferior esquerdo do painel.
• Usando o painel History, você pode reproduzir uma série de
passos não-contíguos. Selecione os passos desejados dando um
Ctrl+clique neles, depois dê um clique no botão Replay. Os
passos serão reproduzidos na ordem em que eles originalmente
ocorreram, independentemente da ordem em que você os
selecionou, mas os passos intermediários, não selecionados,
não serão reproduzidos.
• O botão deslizante do painel History indica inicialmente a
última etapa efetuada.
Infelizmente, o painel History não tem a habilidade de desfazer passos
fora da ordem. Ainda assim, sua característica de desfazer é mais fácil de usar
que os comandos de menu ou teclado. Tudo o que você precisa para desfazer
uma série completa de passos é mover o cursor deslizante do lado esquerdo
para cima ao longo da seqüência de passos que você quer desfazer. Os passos
ficarão escurecidos na listagem e serão desfeitos todos de uma vez, e assim
você não precisa desfazer um de cada vez.
Se você estiver usando frames, o painel History mantém um
rastreamento das ações em cada frame separadamente. Você pode
ver isso em ação dando um clique em cada frame diferente
enquanto o painel History está aberto.
20 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Você também pode salvar uma série particular de etapas do painel
History para uso posterior. Por exemplo, digamos que você tenha algum processo
tedioso para executar repetidamente, como inserir uma quebrade linha seguida
por uma linha horizontal, que então é seguida de uma outra quebra de linha.
Em vez de executar esse processo todo repetidas vezes, ou copiar e colar re-
petidamente o mesmo código-fonte, você pode simplesmente reproduzir as etapas
na janela Document.
Há duas maneiras de salvar e depois reproduzir etapas:
➢ Você pode copiar as etapas na Área de Transferência e depois colá-las
em um documento. No painel History, selecione as etapas que você
quer salvar e dê um clique com o botão direito em uma etapa
selecionada. No menu suspenso, selecione Copy Steps. Para repro-
duzir as etapas copiadas, selecione Edit ➢ Paste na barra de menu.
Apesar da semelhança do procedimento com uma operação copiar-
e-colar típica, essa operação não cola a lista de etapas, mas em
vez disso, faz com que elas sejam repetidas.
➢ Um outro método é acrescentar aquela série de etapas ao menu
Commands. Selecione as etapas que você quer salvar e dê um clique
com o botão direito em uma etapa selecionada. No menu suspenso,
selecione Save As Command. Digite um nome para o comando na
caixa de diálogo que aparece. Dê um clique no botão OK e o comando
será acrescentado ao menu Commands. Para reproduzir os passos
salvos na forma de um comando, selecione Commands na barra de
menu, depois dê um clique no nome do comando salvo.
Outro fato importante que vale a pena comentar é que da mesma ma-
neira que uma única etapa não pode ser refeita após uma nova ação, se várias
etapas forem desfeitas, não será mais possível refazê-las depois de efetuar uma
nova ação no documento, já que elas desaparecerão do painel History.
Para apagar a lista de histórico do documento, vá até o menu contextual
do painel History (seta localizada no canto superior direito do painel History)
e escolha a opção Clear History.
Este comando também limpará todas as informações relacionadas aos
comandos Desfazer do documento. Depois de escolher Clear History, não será
mais possível desfazer as etapas que tiverem sido limpas. Observe que o comando
Clear History não desfaz etapas; ele simplesmente remove o registro das etapas
da memória do Dreamweaver.
Cap 1 Apresentando o Dreamweaver 4.01 21
Personalizando o Ambiente de Trabalho
do Dreamweaver
Como o Dreamweaver foi projetado de forma a ser personalizável, você pode
alterar o layout padrão de acordo com sua preferência. Você pode, por exemplo,
escolher quais painéis aparecem na sua tela e também modificar a maneira
como determinadas janelas são configuradas.
Mostrando e Ocultando Paletas
A maneira mais fácil de escolher os painéis ou paletas que você quer ver é
através da opção Window da barra de menu principal e, em seguida, colocar
uma marca de verificação junto àquelas que você quer usar. Se você preferir
usar as opções dos menus em vez dos ícones presentes nos painéis, vá em
frente e feche/desmarque todos os painéis através do menu Window. Por outro
lado, se você quiser que todos os painéis apareçam ao mesmo tempo, pode
fazer isso também (embora dessa forma você poderá encontrar dificuldades
para ver com o que está trabalhando por sua janela estar congestionada).
Geralmente é melhor deixar aparecendo somente os painéis necessários
para o seu trabalho atual.
Os painéis, por padrão, flutuam na parte superior da janela Document.
Você pode definir uma preferência, por exemplo, para ter somente alguns painéis
aparecendo sempre na parte superior da janela Document.
Utilize as preferências dos painéis para especificar os painéis e inspetores
que sempre aparecerão na frente das janelas Document e do Site, e quais poderão
estar obscurecidos. Também é possível utilizar as preferências dos painéis para
especificar os painéis e inspetores que aparecerão na janela Launcher e na barra
do Mini-Launcher.
Para mudar essa configuração para alguns ou todos os painéis (ou pa-
letas), proceda da seguinte forma:
1. Dê um clique na opção Edit na barra de menu e, em seguida, dê
um clique na opção Preferences.
2. Selecione Panels na lista Category.
Por padrão, todas as janelas, inspetores e painéis aparecerão na
frente da janela Document.
22 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
3. Cancele a seleção das janelas, inspetores e painéis que desejar colocar
atrás da janela Document.
Por exemplo: se desejar que a janela Document obscureça o inspetor
de código, cancele a seleção da opção correspondente a este inspetor. A partir
de agora, o inspetor de código aparecerá na frente da janela Document somente
quando for ativado. Da mesma forma, se preferir que a janela Document obscureça
quaisquer painéis flutuantes que tiver adicionado ao personalizar o Dreamwea-
ver, cancele a seleção de todos os outros flutuadores.
Você pode remover temporariamente todos os painéis flutuantes
da janela Document pressionando a tecla de função F4.
Pressionando-se a tecla novamente, os painéis ocultos são
restaurados.
Modificando o Painel Objects
Usando a interface personalizável do Dreamweaver, você pode mudar a maneira
como o painel Objects mostra os objetos, bem como que objetos aparecem nos
painéis.
Escolhendo Ícones, Texto ou Ambos
Você pode configurar a paleta Objects para mostrar somente ícones (o padrão),
texto (o nome do objeto), ou ambos (ícone e texto).
Para mudar essas configurações, proceda da seguinte forma:
1. Dê um clique na opção Edit na barra de menu e, em seguida, dê
um clique na opção Preferences.
2. Selecione General na lista Category.
3. Agora dê um clique na caixa de listagem drop-down Object Panel
e, em seguida, selecione a configuração desejada na lista.
4. Ao final, dê um clique no botão OK.
Mudando a Posição dos Objetos
Se você quiser ter alguns ícones do painel Object em um outro painel, pode
facilmente modificar o posicionamento deles. Cada um dos painéis não é nada
mais do que uma subpasta armazenada em seu disco rígido (por padrão a
Cap 1 Apresentando o Dreamweaver 4.01 23
unidade C:). Se você der uma olhada na pasta de objetos do Dreamweaver
(localizada em C:\Arquivos de programas\Macromedia\Dreamweaver 4\Configu-
ration\Objects em uma instalação Windows padrão) verá que ela tem as seguintes
subpastas: Characters, Common, Forms, Frames, Head, Invisibles, Special e Tools.
Dentro de cada uma dessas subpastas, você encontrará arquivos GIF
(.gif), HTML (.htm) dentre outros.
Os arquivos GIF fornecem as imagens que você vê nos painéis. Os ar-
quivos HTML fornecem configurações padrão e código para posicionar o objeto
(se você examinar os arquivos HTML e não conseguir ver nada, utilize a opção
Exibir código-fonte de seu navegador para examinar o código-fonte).
Para colocar um objeto em um painel diferente daquele da configuração
padrão, simplesmente arraste os arquivos .gif e .htm apropriados da subpasta
atual para onde você quer colocá-los. Se o Dreamweaver estiver aberto no ins-
tante em que você faz isso, é preciso fechá-lo e reiniciá-lo para ver os ícones
em seus painéis.
Se você mover os arquivos objeto de uma subpasta para outra
enquanto o Dreamweaver estiver aberto e não fechar e reiniciar
o Dreamweaver, o painel Objects não funcionará corretamente,
porque ele não saberá onde encontrar os arquivos apropriados.
Tome muito cuidado quando estiver fazendo estes tipos de
operação. Caso você sinta que seu programa não está funcionando
adequadamente, será necessário reinstalar o Dreamweaver.
Você pode até criar o seu próprio painel, que será acrescentado ao
painel Objects. Para fazer um painel personalizado, crie uma nova subpasta
dentro da pasta Objects, depois arraste os arquivos .gif e .htm apropriados para
ela. Assim como no caso de mover objetos, você precisará fechar o Dreamweaver
e reiniciá-lo para poder acessar o novo painel.
Além de mover objetos dentro do painel Objects e criar painéis perso-
nalizados, você também pode criar os seus próprios objetos personalizados. Essa
tarefa requer um volume moderado de recursos de programação JavaScript.
Se você é iniciante em JavaScript e quer aprender mais a respeito
através de exercícios práticos, veja o livro JavaScriptPasso a
Passo Lite.
24 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Modificando o Painel Launcher
Você pode personalizar tanto o painel Launcher como a barra do Mini-Launcher
mudando as paletas e inspetores que ele contém e a posição de seus botões.
Para fazer essas alterações, proceda da seguinte forma:
1. Dê um clique na opção Edit na barra de menu e, em seguida, dê
um clique na opção Preferences.
2. Na caixa de diálogo Preferences que aparece, dê um clique na opção
Panels na lista Category.
Na metade inferior da caixa de diálogo, ao lado e abaixo de Show in
Launcher, há quatro botões e uma lista de paletas/painéis e inspetores atualmente
existentes. Os dois primeiros botões são mais e menos; os dois próximos são
setas para cima e para baixo. O quadro abaixo desses botões mostra quais as
paletas e inspetores estão atualmente no painel Launcher.
3. Para acrescentar uma paleta ou inspetor ao painel Launcher, dê um
clique no botão de adição (+). Isso abre o menu suspenso que
lista os itens que você pode acrescentar.
Aqueles que estão incluídos no momento estão escurecidos; aqueles
que não estão incluídos estão em texto preto.
4. Dê um clique em um daqueles de texto preto para incluí-lo.
Paletas ou painéis e Inspetores acrescentados aparecem no fim
da lista.
5. Para remover uma das paletas ou inspetores do painel Launcher,
selecione-o na lista na parte inferior da caixa de diálogo e depois
dê um clique no botão de subtração (-).
Cap 1 Apresentando o Dreamweaver 4.01 25
6. Para mudar a posição de um item qualquer, selecione-o na lista e,
em seguida, dê um clique no botão da seta para cima para movê-lo
mais para cima ou seta para baixo para movê-lo mais para baixo.
7. Ao final, dê um clique no botão OK para terminar.
Mudanças feitas no painel Launcher também se refletem na barra
do Mini-Launcher localizada na barra de status.
Modificando o Painel History
Você pode mudar o número de ações que o painel History armazena, bem como
apagar todas as ações. Apagando as ações será liberado um pouco de memória
RAM de seu computador.
Para definir o número de ações armazenadas, proceda da seguinte forma:
1. Dê um clique na opção Edit na barra de menu e, em seguida, dê
um clique na opção Preferences..
2. Na caixa de diálogo Preferences que aparece, dê um clique na opção
General na lista Category.
3. Digite o número desejado no campo Maximum Number of History
Steps.
4. Finalmente, dê um clique no botão OK para terminar.
Para limpar o painel History, dê um clique com o botão direito
dentro dele e selecione a opção Clear History no menu suspenso.
O programa pedirá que você confirme a ação. A operação que
apaga o painel History afeta somente o documento particular
ou frame no qual você está trabalhando. Ao apagar a paleta
History também se esvazia a pilha Undo (Desfazer), o que significa
que não será possível usar o comando Repeat nos passos
anteriores.
As Lições Incorporadas na Versão 4.01
O Dreamweaver contém vários recursos para ajudá-lo a conhecer o programa
rapidamente e tornar-se um experiente criador de suas páginas e sites Web.
26 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
Esses recursos (conjunto de lições interativas) incluem páginas de ajuda on-line,
filmes, um tutorial em forma de lições. Além disso o site do Dreamweaver na
Web é atualizado regularmente.
Cada lição leva-o pelas etapas de uma tarefa específica e inclui páginas
de amostras que contêm todos os elementos funcionais e de desenho necessários.
Utilize as lições como guias passo a passo com páginas de amostras ou como
um guia quando estiver trabalhando em suas próprias páginas.
Para localizar as lições, proceda da seguinte forma:
1. Dê um clique na opção Help na barra de menu e, em seguida, dê
um clique na opção Lessons.
2. Finalmente, selecione o tópico que desejar estudar.
O Sistema de Ajuda do Dreamweaver
A ajuda do Dreamweaver contém informações completas sobre todos os recursos
do Dreamweaver, otimizada para uso on-line.
Para obter os melhores resultados na visualização da ajuda do Dream-
weaver, utilize os navegadores Netscape Navigator 4.0 ou o Microsoft Internet
Explorer 4.0 ou versões mais avançadas destes programas.
Cap 1 Apresentando o Dreamweaver 4.01 27
A ajuda do Dreamweaver utiliza amplamente o JavaScript.
Certifique-se de que esta linguagem esteja ativada no seu
navegador. Caso você planeje utilizar o recurso de busca, verifique
se o Java também está ativo.
Uma Demonstração do Dreamweaver
Nesta seção resolvemos dar um gostinho do poder do Dreamweaver na Web.
Você verá um site comercial totalmente feito em Dreamweaver e Flash e, com
isso, poderá conferir o poder desses produtos.
A Macromedia (www.macromedia.com.br) oferece em seu site as últimas
informações não só do Dreamweaver, mas também de todos os produtos que
ela disponibiliza no mercado. É importante que você visite este site regularmente
a fim de estar sempre atualizado.
A seguir entramos na seção de galeria do site da Macromedia e se-
lecionamos um site muito especial construído com o Dreamweaver. O desen-
volvedor também usou outro produto muito popular da Macromedia para criar
as animações, o Flash.
Para entrar na seção de galeria da Macromedia, proceda da seguinte forma:
1. Aponte seu navegador para o endereço http://www.macromedia.com/
br/gallery.
2. A seguir, no item Arquivos da Galeria Brasil, dê um clique no link
Entretenimento, como você pode ver na tela a seguir, e role até
encontrar a opção Educadora FM.
28 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
3. Dê um clique sobre o link do site e aguarde sua abertura.
Observe o resultado:
Cap 1 Apresentando o Dreamweaver 4.01 29
4. Navegue pelo site para observá-lo e, ao final, dê um clique no botão
Fechar localizado no canto superior direito da barra de título
do seu navegador.
Certamente há diversos outros sites que você poderá visitar na Web
e, dessa forma, tirar novas idéias quando for criar o seu próprio.
O importante é estar bem atualizado, principalmente com as tendências
na construção de sites Web.
Você verá que com o Dreamweaver será muito rápido e fácil construir
e manter atualizado seu site.
No próximo capítulo vamos começar a aprender a desenvolver sites e
páginas Web. Depois veremos como se comporta a linguagem HTML no Dream-
weaver 4 e, por fim, aprenderemos a aperfeiçoar nosso site com imagens, cores,
tabelas e frames.
Fechando e Continuando no
Dreamweaver
Quando você precisar fechar apenas o arquivo de trabalho sem fechar o programa
Dreamweaver, proceda da seguinte forma:
1. Dê um clique na opção File na barra de menu e, em seguida, dê
um clique na opção Close.
Ou
2. Pressione simultaneamente as teclas de atalho CTRL + W.
Dessa forma você fechará o arquivo que estiver aberto no momento,
mas continuará com o Dreamweaver aberto para poder realizar outras operações.
Fechando o Arquivo e Saindo do
Dreamweaver
Normalmente saímos de um programa quando não precisamos mais trabalhar
com ele no momento. O Dreamweaver traz diversas maneiras para fazer isso.
Quando você precisar fechar seu arquivo de trabalho e também o pro-
grama Dreamweaver, proceda da seguinte forma:
30 Dreamweaver 4.01 Passo a Passo Lite Cap. 1
1. Dê um clique na opção File na barra de menu e, em seguida, dê
um clique na opção Exit.
Ou
2. Dê um clique no botão Fechar localizado no canto superior direito
da barra de título. 
Ou
3. Pressione simultaneamente as teclas de atalho CTRL + Q.
Ou
4. Pressione simultaneamente as teclas de atalho ALT + F4.
Se aparecer uma caixa de diálogo de alerta do Dreamweaver
solicitando que você salve o arquivo, isso quer dizer que você
fez alguma alteração depois de ter salvado o arquivo. Caso deseje
salvar, dê um clique no botão Yes, caso contrário dê um clique
no botão No. Se você optar pela opção Cancel, a operação será
cancelada e com isso você retornará ao mesmo ponto que estava
no Dreamweaver.
Revisão Rápida
Neste capítulo conhecemos um pouco do que o Dreamweaver é capaz de fazer.
Vimostambém os requisitos de máquina necessários para trabalhar com
o Dreamweaver, como carregá-lo e também exploramos a fundo o seu novo
ambiente.
Verificamos também todos os passos para personalizar o Dreamweaver
em nosso computador e, em seguida, entramos em um site comercial que utiliza
duas fortes tecnologias da Macromedia, os produtos Dreamweaver e Flash juntos.
O intuito foi de apenas deixá-lo intrigado.
A partir do próximo capítulo, onde efetivamente iremos começar a de-
senvolver outras atividades, você encontrará exercícios no tópico Revisão Rápida
para poder treinar ainda mais o que leu no capítulo.
Cap 1 Apresentando o Dreamweaver 4.01 31
2.Desenvolvendo Sites e Páginas na Web
Neste capítulo, vamos descrever como criar novos sites Web e novas páginas
Web, ambos a partir da janela Document e da janela Site, e também descreveremos
como importar sites e páginas existentes para o Dreamweaver. Mostraremos
também como usar o programa FTP interno do Dreamweaver para transferir
arquivos entre o seu sistema local e servidores Web remotos. Mas primeiro,
vamos gastar alguns minutos para considerar suas opções de armazenamento
de arquivos de sites Web.
Armazenamento de Site Web
Um site Web pode ser tão simples quanto uma única página Web ou pode ser
uma coleção de uma variedade de arquivos, incluindo páginas Web, arquivos
gráficos, arquivos de som, arquivos de vídeo, e qualquer outra coisa que você
possa imaginar. No entanto, independente do conteúdo ser complexo ou simples,
um site Web precisa de um lugar para existir. Cada site que você cria precisa
de sua própria pasta separada no seu sistema local.
Há boas razões para a prática padronizada de manter os arquivos de
cada site em pastas separadas. Primeiro, considere que toda home page de
sites — a página principal usada como ponto de partida para os visitantes do
seu site — terá sempre o mesmo nome (normalmente ela é chamada de in-
dex.html). Isto torna impossível ter mais de um site por pasta, pois cada nova
home page seria gravada sobre a anterior. Mesmo que fosse possível contornar
essa dificuldade, seria ainda uma má idéia misturar diferentes sites em um
mesmo lugar.
33
Desenvolvendo Sites e
Páginas na Web
Manter o controle de quais arquivos pertencem a qual site rapidamente
se tornaria um pesadelo.
Provavelmente há tantos métodos para organizar pastas de sites em
unidades locais quanto desenvolvedores Web há no mundo. Geralmente, no
entanto, esses métodos tendem a se classificar em duas abordagens básicas:
➢ Manter cada site em uma pasta separada sob a pasta raiz da unidade
(C:\). Por exemplo, se você tivesse sites Web denominados abc.com,
def.com, e ghi.com, você prepararia as pastas C:\abc , C:\def e
C:\ghi.
➢ Preparar uma pasta principal sob a pasta raiz da unidade e depois
criar subpastas dentro dela para cada site diferente. Por exemplo, você
pode ter a pasta principal do site denominada C:\meusite, com sub-
pastas como C:\meusite\abc, C:\meusite\def, e C:\meusite\ghi.
Criando Sites
O Dreamweaver torna fácil a criação de sites. Você pode iniciar um novo site
a partir de duas localizações diferentes: da janela Document e da janela Site.
A janela Site mostra a hierarquia das pastas e arquivos para o seu site
e é certamente a maneira mais utilizada.
Primeiro vamos construir uma pasta em nossa unidade C: a qual irá
armazenar todos os arquivos do nosso site.
Você poderá encontrar uma cópia desta pasta pronta no disquete
que acompanha este livro.
Proceda da seguinte forma:
1. Dê um clique no botão Iniciar e, em seguida, aponte para
Programas.
2. Agora dê um clique na opção Acessórios (caso você esteja usando
o Windows Me) e, em seguida, dê um clique na opção Windows
Explorer. Ou simplesmente depois da opção Programas dê um clique
na opção Windows Explorer.
3. Com a janela do Windows Explorer aberta, dê um clique na unidade
C: para selecioná-la e, em seguida, crie uma pasta de nome MeuSite.
34 Dreamweaver 4.01 Passo a Passo Lite Cap. 2
Observe a figura a seguir:
Se você não sabe ou é iniciante no Windows Explorer, utilize a
seqüência Arquivo ➢ Novo ➢ Pasta da barra de menu para
criar uma nova pasta na unidade selecionada.
A pasta MeuSite será considerada o nível superior do site que vamos
construir e ela conterá todos os outros elementos e subpastas do
site.
4. Agora feche o Windows Explorer, dando um clique no botão Fechar
 localizado no canto superior direito da janela.
Vamos agora para o Dreamweaver.
Carregando o Dreamweaver
Antes de iniciarmos efetivamente as explicações, vamos carregar o Dreamweaver
em nosso computador. Para isso, proceda da seguinte forma:
1. Na barra de tarefas do Windows, dê um clique no botão Iniciar
 aponte para a opção Programas e, em seguida, dê um clique
na opção Macromedia Dreamweaver 4.
2. Finalmente, dê um clique na opção Dreamweaver 4.
Você verá a tela principal do Dreamweaver.
O processo para criar um site é bem semelhante tanto na janela Site
como na janela Document. No entanto, a janela Site torna fácil criar novas páginas
e pastas e estabelecer rapidamente os vínculos entre elas. Dessa forma, você
Cap 2 Desenvolvendo Sites e Páginas na Web 35
pode esboçar a sua página inteira rapidamente. Para os detalhes completos
sobre o processo para acrescentar páginas e pastas, veja as seções “Criando
Novas Pastas” e “Criando Novas Páginas” mais adiante neste capítulo.
Agora vamos iniciar a construção do nosso site através da janela Site.
Para isso, proceda da seguinte forma:
1. Dê um clique na opção Site da barra de menu e, em seguida, dê
um clique na opção New Site.
A caixa de diálogo Site Definition aparecerá.
Na caixa de diálogo Site Definition você pode colocar todas as infor-
mações sobre o seu site e as opções que você quiser, ou pode fornecer o mínimo
necessário para ir em frente e voltar para acrescentar o resto das informações
mais tarde.
A caixa de diálogo Site Definition tem cinco categorias:
➢ A primeira categoria, Local Info, é a única que você tem de preencher
inteiramente. Na realidade, você pode iniciar colocando apenas um
nome para o seu site e selecionando uma pasta para manter os
arquivos do site. Essa pasta, chamada de pasta raiz local, corresponde
à pasta raiz HTML no seu servidor Web remoto.
➢ A segunda categoria, Remote Info, é onde você informa ao Dream-
weaver que tipo de acesso ele precisa para chegar ao seu servidor
Web.
➢ A terceira categoria, File View Columns, é opcional e trata dos am-
bientes de múltiplos usuários.
36 Dreamweaver 4.01 Passo a Passo Lite Cap. 2
➢ A quarta categoria, Site Map Layout, é onde você define os parâ-
metros para uma apresentação visual da estrutura do seu site Web.
➢ A quinta categoria é Design Notes. Design Notes é um tipo de bloco
de rascunho digital onde você pode colocar as suas anotações sobre
um determinado arquivo. Essas notas são armazenadas em um ar-
quivo separado que vai anexado ao arquivo ao qual se referem.
E se você não estiver começando do zero, mas estiver usando
uma série de arquivos HTML que você já tem? O processo ainda
é o mesmo; a única diferença é que você estará informando ao
Dreamweaver a localização de uma pasta que já contém arquivos
e não a localização de uma pasta vazia.
2. No campo Site Name digite Meu Site.
3. No camo Local Root Folder digite C:\MeuSite ou dê um clique no
pequeno desenho de uma pasta ao lado do campo e, em seguida,
localize a pasta MeuSite em sua unidade C:.
Ao final, sua tela ficará da seguinte forma:
4. Agora dê um clique no botão OK.
5. Caso apareça uma caixa de alerta, seleciona a opção Don’t show
me this message again (Não mostre-me esta mensagem novamente)
e, em seguida, dê um clique no botão OK.
Cap 2 Desenvolvendo Sites e Páginas na Web 37
A janela Site aparecerá informando agora o nome que você indicou
para o novo site.
Apenas com essas informações mínimas, você acaba de fornecer ao
Dreamweaver informações necessárias para a construção de um site.
A Caixa de Diálogo Site Definition
Antes de continuarmos