Fone: (19) 3234-4864 Fone: (19) 3234-4864

E-mail: editora@komedi.com.br E-mail: editora@komedi.com.br

Site: www.komedi.com.br Site: www.komedi.com.br
DWR 9.0 DWR 9.0

Adobe Adobe
Dreamweaver Dreamweaver
versão CS3 versão CS3
 K O M  D I K O M  D I
Copyright © by Editora Komedi, 2009 Copyright © by Editora Komedi, 2009

Dados para Catalogação Dados para Catalogação

Rimoli, Monica Alvarez Rimoli, Monica Alvarez

Jang, Renan Jang, Renan

Adobe Dreamweaver Adobe Dreamweaver

versão CS3 versão CS3

Campinas: Editora Komedi, 2009. Campinas: Editora Komedi, 2009.

210 p. 210 p.

ISBN: 978-85-7582-499-3 ISBN: 978-85-7582-499-3

Adobe Dreamweaver CS3 é marca registrada da Adobe Systems Incorporated Adobe Dreamweaver CS3 é marca registrada da Adobe Systems Incorporated
nos Estados Unidos e/ou em outros países. nos Estados Unidos e/ou em outros países.

Nenhuma parte desta publicação poderá ser reproduzida, armazenada ou Nenhuma parte desta publicação poderá ser reproduzida, armazenada ou
transmitida de qualquer modo, ou por qualquer meio, seja mecânico, eletrônico, transmitida de qualquer modo, ou por qualquer meio, seja mecânico, eletrônico,
fotocópia, gravação ou outros, sem prévia autorização escrita da Editora Komedi. fotocópia, gravação ou outros, sem prévia autorização escrita da Editora Komedi.

Editor: Sérgio Vale Editor: Sérgio Vale

Gerente de Vendas: Sandro Celestino de Araújo Gerente de Vendas: Sandro Celestino de Araújo
Diagramação: Monica Alvarez Rimoli Diagramação: Monica Alvarez Rimoli
Capa: Felippe dos Santos Capa: Felippe dos Santos

Todos os direitos reservados na forma da lei pela: Todos os direitos reservados na forma da lei pela:
Editora Komedi Editora Komedi
Rua Álvares Machado, 460, 3 o andar Rua Álvares Machado, 460, 3 o andar
13013-070, Centro, Campinas, SP 13013-070, Centro, Campinas, SP
Tel/fax: (19) 3234.4864 Tel/fax: (19) 3234.4864
www.komedi.com.br www.komedi.com.br
e-mail: editora@komedi.com.br e-mail: editora@komedi.com.br

2009 2009
Impresso no Brasil Impresso no Brasil
 Índice
1. O AMBIENTE ADOBE DREAMWEAVER CS3 .....................................................9
1.1. INSTALAÇÃO DO DREAMWEAVER ..............................................................................9
1.2. ARQUIVOS UTILIZADOS NA APOSTILA .....................................................................10
1.3. A INICIALIZAÇÃO DE DREAMWEAVER .....................................................................10
1.4. ÁREA DE TRABALHO DREAMWEAVER .....................................................................11
1.4.1. Criação de uma página em branco ...............................................................13
1.4.2. Visão Geral da Área de Trabalho.................................................................13
1.4.3. Visão Geral dos Menus ................................................................................16
1.5. O QUE É NOVO NO DREAMWEAVER ..........................................................................17
1.5.1. Outros recursos importantes.........................................................................18
1.6. FECHAMENTO DE ARQUIVOS ....................................................................................19
1.7. A FINALIZAÇÃO DO DREAMWEAVER .......................................................................20
1.8. EXERCÍCIOS ..............................................................................................................20
2. SITES DREAMWEAVER .........................................................................................23
2.1. A CRIAÇÃO DE UM NOVO SITE .................................................................................23
2.2. DEFINIÇÃO DE UM SITE LOCAL .................................................................................24
2.3. EDITANDO CONFIGURAÇÕES DE UM SITE DREAMWEAVER.......................................29
2.4. DEFINIÇÃO DE UM SITE REMOTO ..............................................................................30
2.5. DOCUMENTOS DO SITE .............................................................................................31
2.5.1. Criação de Documentos em Branco .............................................................32
2.5.2. Salvando um Documento .............................................................................33
2.5.3. Criação de um documento baseado em um arquivo predefinido .................36
2.5.4. Criação de um documento baseado em um Template .................................37
2.5.5. Abertura de documentos existentes .............................................................38
2.6. EXERCÍCIOS ..............................................................................................................39
3. GERENCIAMENTO DO SITE DREAMWEAVER...............................................41
3.1. ACESSO A SITES, SERVIDORES E DRIVES LOCAIS.......................................................41
3.1.1. Painel Files ...................................................................................................41
3.2. VISUALIZANDO ARQUIVOS E PASTAS........................................................................43
3.2.1. Arquivos no painel Files ..............................................................................44
3.2.2. Localizando arquivos no Site Dreamweaver ...............................................46
3.3. MAPA DO SITE ..........................................................................................................47
3.3.1. Visualizando um mapa do site .....................................................................47
3.3.2. Trabalho com páginas no mapa do site ........................................................48
3.3.3. Exibindo e ocultando arquivos no mapa do site ..........................................50
3.3.4. Salvando o mapa do site...............................................................................51
3.4. IMPORTANDO E EXPORTANDO SITES .........................................................................52
3.5. REMOÇÃO DE UM SITE DA LISTA DE SITES ................................................................53
3.6. EXERCÍCIOS ..............................................................................................................53
4. PROPRIEDADES DOS DOCUMENTOS ................................................................55
4.1. CORES WEB-SAFE ....................................................................................................55
4.2. CODIFICAÇÃO DO DOCUMENTO ................................................................................55
4.3. ESPECIFICANDO HTML EM LUGAR DE CSS .............................................................55
www.komedi.com.br III
Índice
1. O AMBIENTE ADOBE DREAMWEAVER CS3 .....................................................9
1.1. INSTALAÇÃO DO DREAMWEAVER ..............................................................................9
1.2. ARQUIVOS UTILIZADOS NA APOSTILA .....................................................................10
1.3. A INICIALIZAÇÃO DE DREAMWEAVER .....................................................................10
1.4. ÁREA DE TRABALHO DREAMWEAVER .....................................................................11
1.4.1. Criação de uma página em branco ...............................................................13
1.4.2. Visão Geral da Área de Trabalho.................................................................13
1.4.3. Visão Geral dos Menus ................................................................................16
1.5. O QUE É NOVO NO DREAMWEAVER ..........................................................................17
1.5.1. Outros recursos importantes.........................................................................18
1.6. FECHAMENTO DE ARQUIVOS ....................................................................................19
1.7. A FINALIZAÇÃO DO DREAMWEAVER .......................................................................20
1.8. EXERCÍCIOS ..............................................................................................................20
2. SITES DREAMWEAVER .........................................................................................23
2.1. A CRIAÇÃO DE UM NOVO SITE .................................................................................23
2.2. DEFINIÇÃO DE UM SITE LOCAL .................................................................................24
2.3. EDITANDO CONFIGURAÇÕES DE UM SITE DREAMWEAVER.......................................29
2.4. DEFINIÇÃO DE UM SITE REMOTO ..............................................................................30
2.5. DOCUMENTOS DO SITE .............................................................................................31
2.5.1. Criação de Documentos em Branco .............................................................32
2.5.2. Salvando um Documento .............................................................................33
2.5.3. Criação de um documento baseado em um arquivo predefinido .................36
2.5.4. Criação de um documento baseado em um Template .................................37
2.5.5. Abertura de documentos existentes .............................................................38
2.6. EXERCÍCIOS ..............................................................................................................39
3. GERENCIAMENTO DO SITE DREAMWEAVER...............................................41
3.1. ACESSO A SITES, SERVIDORES E DRIVES LOCAIS.......................................................41
3.1.1. Painel Files ...................................................................................................41
3.2. VISUALIZANDO ARQUIVOS E PASTAS........................................................................43
3.2.1. Arquivos no painel Files ..............................................................................44
3.2.2. Localizando arquivos no Site Dreamweaver ...............................................46
3.3. MAPA DO SITE ..........................................................................................................47
3.3.1. Visualizando um mapa do site .....................................................................47
3.3.2. Trabalho com páginas no mapa do site ........................................................48
3.3.3. Exibindo e ocultando arquivos no mapa do site ..........................................50
3.3.4. Salvando o mapa do site...............................................................................51
3.4. IMPORTANDO E EXPORTANDO SITES .........................................................................52
3.5. REMOÇÃO DE UM SITE DA LISTA DE SITES ................................................................53
3.6. EXERCÍCIOS ..............................................................................................................53
4. PROPRIEDADES DOS DOCUMENTOS ................................................................55
4.1. CORES WEB-SAFE ....................................................................................................55
4.2. CODIFICAÇÃO DO DOCUMENTO ................................................................................55
4.3. ESPECIFICANDO HTML EM LUGAR DE CSS .............................................................55
www.komedi.com.br III
Adobe Dreamweaver CS3
4.3.1. Trabalho com Cores .................................................................................... 56
4.4. PROPRIEDADES DA PÁGINA ..................................................................................... 56
4.4.1. Título do documento ................................................................................... 57
4.4.2. Definindo a imagem e a cor de fundo ......................................................... 58
4.4.3. Definindo cores padrão de texto ................................................................. 59
4.4.4. Configurando estilos CSS de sublinhado de links ...................................... 59
4.5. VISUALIZAÇÃO DOS ELEMENTOS DA PÁGINA .......................................................... 60
4.6. EXERCÍCIOS ............................................................................................................. 61
5. ADIÇÃO DE CONTEÚDO À PÁGINA .................................................................. 63
5.1. INSERÇÃO DE TEXTO................................................................................................ 63
5.1.1. Formatação do texto .................................................................................... 63
5.1.2. Aplicação de cor e estilo ............................................................................. 64
5.2. INSERÇÃO DE IMAGENS ........................................................................................... 65
5.2.1. Criação de uma imagem cambiável ............................................................ 67
5.3. VISUALIZAÇÃO DO DOCUMENTO ............................................................................. 68
5.4. INSERÇÃO DE TEXTO A PARTIR DE UM ARQUIVO...................................................... 69
5.4.1. Importação de um arquivo do Microsoft Word .......................................... 72
5.4.2. Importação de um arquivo do Microsoft Excel .......................................... 73
5.4.3. Cópia e colagem de trechos de arquivos Word e Excel .............................. 74
5.5. EXERCÍCIOS ............................................................................................................. 75
6. LINKS E NAVEGAÇÃO........................................................................................... 77
6.1. LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS............................................. 77
6.2. CRIANDO OS LINKS .................................................................................................. 78
6.3. VINCULAÇÃO DE DOCUMENTOS .............................................................................. 78
6.3.1. Vinculação de documentos a partir de textos.............................................. 81
6.4. TESTANDO A PÁGINA ............................................................................................... 84
6.5. LINKS PARA LOCAIS ESPECÍFICOS DE UM DOCUMENTO............................................ 84
6.6. CRIAÇÃO DE UM LINK DE CORREIO ELETRÔNICO ..................................................... 87
6.7. GERENCIAMENTO DOS LINKS................................................................................... 88
6.7.1. Criando e modificando os links no Site Map .............................................. 90
6.7.2. Alteração de um link no site inteiro ............................................................ 92
6.8. OS MENUS DE SALTO ............................................................................................... 92
6.8.1. Edição dos itens do menu de salto .............................................................. 94
6.9. EXERCÍCIOS ............................................................................................................. 95
7. FORMATAÇÃO DE TEXTO ................................................................................... 97
7.1. AS LISTAS ................................................................................................................ 97
7.2. AS FOLHAS DE ESTILOS CSS .................................................................................... 98
7.2.1. Painel CSS Styles ........................................................................................ 98
7.2.2. Criação de um estilo CSS .......................................................................... 100
7.2.3. Folhas de estilos CSS externas .................................................................. 101
7.2.4. Aplicando um estilo CSS ao texto ............................................................ 105
7.2.5. Trabalhando com o painel CSS Style........................................................ 106
7.3. VERIFICAÇÃO ORTOGRÁFICA ................................................................................ 111
7.4. LOCALIZAÇÃO E SUBSTITUIÇÃO DE TEXTO ............................................................ 112
7.5. EXERCÍCIOS ........................................................................................................... 112
IV www.komedi.com.br
Adobe Dreamweaver CS3
4.3.1. Trabalho com Cores .................................................................................... 56
4.4. PROPRIEDADES DA PÁGINA ..................................................................................... 56
4.4.1. Título do documento ................................................................................... 57
4.4.2. Definindo a imagem e a cor de fundo ......................................................... 58
4.4.3. Definindo cores padrão de texto ................................................................. 59
4.4.4. Configurando estilos CSS de sublinhado de links ...................................... 59
4.5. VISUALIZAÇÃO DOS ELEMENTOS DA PÁGINA .......................................................... 60
4.6. EXERCÍCIOS ............................................................................................................. 61
5. ADIÇÃO DE CONTEÚDO À PÁGINA .................................................................. 63
5.1. INSERÇÃO DE TEXTO................................................................................................ 63
5.1.1. Formatação do texto .................................................................................... 63
5.1.2. Aplicação de cor e estilo ............................................................................. 64
5.2. INSERÇÃO DE IMAGENS ........................................................................................... 65
5.2.1. Criação de uma imagem cambiável ............................................................ 67
5.3. VISUALIZAÇÃO DO DOCUMENTO ............................................................................. 68
5.4. INSERÇÃO DE TEXTO A PARTIR DE UM ARQUIVO...................................................... 69
5.4.1. Importação de um arquivo do Microsoft Word .......................................... 72
5.4.2. Importação de um arquivo do Microsoft Excel .......................................... 73
5.4.3. Cópia e colagem de trechos de arquivos Word e Excel .............................. 74
5.5. EXERCÍCIOS ............................................................................................................. 75
6. LINKS E NAVEGAÇÃO........................................................................................... 77
6.1. LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS............................................. 77
6.2. CRIANDO OS LINKS .................................................................................................. 78
6.3. VINCULAÇÃO DE DOCUMENTOS .............................................................................. 78
6.3.1. Vinculação de documentos a partir de textos.............................................. 81
6.4. TESTANDO A PÁGINA ............................................................................................... 84
6.5. LINKS PARA LOCAIS ESPECÍFICOS DE UM DOCUMENTO............................................ 84
6.6. CRIAÇÃO DE UM LINK DE CORREIO ELETRÔNICO ..................................................... 87
6.7. GERENCIAMENTO DOS LINKS................................................................................... 88
6.7.1. Criando e modificando os links no Site Map .............................................. 90
6.7.2. Alteração de um link no site inteiro ............................................................ 92
6.8. OS MENUS DE SALTO ............................................................................................... 92
6.8.1. Edição dos itens do menu de salto .............................................................. 94
6.9. EXERCÍCIOS ............................................................................................................. 95
7. FORMATAÇÃO DE TEXTO ................................................................................... 97
7.1. AS LISTAS ................................................................................................................ 97
7.2. AS FOLHAS DE ESTILOS CSS .................................................................................... 98
7.2.1. Painel CSS Styles ........................................................................................ 98
7.2.2. Criação de um estilo CSS .......................................................................... 100
7.2.3. Folhas de estilos CSS externas .................................................................. 101
7.2.4. Aplicando um estilo CSS ao texto ............................................................ 105
7.2.5. Trabalhando com o painel CSS Style........................................................ 106
7.3. VERIFICAÇÃO ORTOGRÁFICA ................................................................................ 111
7.4. LOCALIZAÇÃO E SUBSTITUIÇÃO DE TEXTO ............................................................ 112
7.5. EXERCÍCIOS ........................................................................................................... 112
IV www.komedi.com.br
 Índice
8. AUTOMATIZAÇÃO DE TAREFAS .....................................................................115
8.1. USO DO PAINEL HISTORY .......................................................................................115
8.1.1. Automatizando tarefas ...............................................................................116
9. O LAYOUT DE PÁGINA ........................................................................................121
9.1. LAYOUT DE PÁGINAS COM CSS .............................................................................121
9.2. BLOCOS DE CONTEÚDO ..........................................................................................121
9.2.1. Cor do destaque do bloco ...........................................................................123
9.2.2. Trabalhando com blocos de conteúdo........................................................123
9.3. CAMADAS NO DREAMWEAVER ..............................................................................124
9.3.1. Código HTML das camadas ......................................................................124
9.3.2. Inserção de camadas...................................................................................125
9.3.3. Camadas aninhadas ....................................................................................126
9.4. GERENCIANDO CAMADAS.......................................................................................127
9.4.1. Painel Layers ..............................................................................................128
9.4.2. Seleção de camadas ....................................................................................128
9.4.3. Preferências da camada ..............................................................................129
9.4.4. Propriedades para uma camada única ........................................................129
9.4.5. Propriedades de camadas múltiplas ...........................................................130
9.4.6. Trocando a ordem de empilhamento das camadas ....................................130
9.4.7. Mudando a visibilidade da camada ............................................................131
9.5. MANIPULANDO CAMADAS ......................................................................................132
9.5.1. Redimensionando camadas ........................................................................132
9.5.2. Movendo camadas......................................................................................133
9.5.3. Alinhando camadas ....................................................................................133
9.6. CONVERTENDO CAMADAS PARA TABELAS .............................................................133
9.6.1. Prevenção de sobreposição ........................................................................133
9.6.2. Convertendo camadas e tabelas .................................................................134
10. TABELAS ..................................................................................................................135
10.1.1. Precedência de Formatação em HTML .....................................................135
10.1.2. Divisão e Mesclagem de células de tabela .................................................135
10.2. INSERÇÃO DE TABELA E ADIÇÃO DE CONTEÚDO .....................................................136
10.2.1. Importação e exportação de dados tabulares .............................................137
10.3. SELEÇÃO DE ELEMENTOS DA TABELA ....................................................................139
10.3.1. Seleção de uma tabela ................................................................................139
10.3.2. Seleção de linhas ou colunas......................................................................140
10.3.3. Seleção de células ......................................................................................141
10.4. FORMATAÇÃO DE TABELAS E CÉLULAS ..................................................................142
10.4.1. Definição das propriedades da tabela ........................................................142
10.4.2. Definição das propriedades das colunas, linhas e células ..........................144
10.4.3. Usando um esquema de design para formatar uma tabela .........................146
10.5. REDIMENSIONANDO TABELAS, COLUNAS E LINHAS................................................147
10.5.1. Redimensionando uma tabela ....................................................................147
10.5.2. Redimensionando colunas e linhas ............................................................148
10.5.3. Tornando consistente a largura de código com a largura visual ................148
10.5.4. Limpando larguras e alturas .......................................................................149
www.komedi.com.br V www.komedi.com.br
Índice
8. AUTOMATIZAÇÃO DE TAREFAS .....................................................................115
8.1. USO DO PAINEL HISTORY .......................................................................................115
8.1.1. Automatizando tarefas ...............................................................................116
9. O LAYOUT DE PÁGINA ........................................................................................121
9.1. LAYOUT DE PÁGINAS COM CSS .............................................................................121
9.2. BLOCOS DE CONTEÚDO ..........................................................................................121
9.2.1. Cor do destaque do bloco ...........................................................................123
9.2.2. Trabalhando com blocos de conteúdo........................................................123
9.3. CAMADAS NO DREAMWEAVER ..............................................................................124
9.3.1. Código HTML das camadas ......................................................................124
9.3.2. Inserção de camadas...................................................................................125
9.3.3. Camadas aninhadas ....................................................................................126
9.4. GERENCIANDO CAMADAS.......................................................................................127
9.4.1. Painel Layers ..............................................................................................128
9.4.2. Seleção de camadas ....................................................................................128
9.4.3. Preferências da camada ..............................................................................129
9.4.4. Propriedades para uma camada única ........................................................129
9.4.5. Propriedades de camadas múltiplas ...........................................................130
9.4.6. Trocando a ordem de empilhamento das camadas ....................................130
9.4.7. Mudando a visibilidade da camada ............................................................131
9.5. MANIPULANDO CAMADAS ......................................................................................132
9.5.1. Redimensionando camadas ........................................................................132
9.5.2. Movendo camadas......................................................................................133
9.5.3. Alinhando camadas ....................................................................................133
9.6. CONVERTENDO CAMADAS PARA TABELAS .............................................................133
9.6.1. Prevenção de sobreposição ........................................................................133
9.6.2. Convertendo camadas e tabelas .................................................................134
10. TABELAS ..................................................................................................................135
10.1.1. Precedência de Formatação em HTML .....................................................135
10.1.2. Divisão e Mesclagem de células de tabela .................................................135
10.2. INSERÇÃO DE TABELA E ADIÇÃO DE CONTEÚDO .....................................................136
10.2.1. Importação e exportação de dados tabulares .............................................137
10.3. SELEÇÃO DE ELEMENTOS DA TABELA ....................................................................139
10.3.1. Seleção de uma tabela ................................................................................139
10.3.2. Seleção de linhas ou colunas......................................................................140
10.3.3. Seleção de células ......................................................................................141
10.4. FORMATAÇÃO DE TABELAS E CÉLULAS ..................................................................142
10.4.1. Definição das propriedades da tabela ........................................................142
10.4.2. Definição das propriedades das colunas, linhas e células ..........................144
10.4.3. Usando um esquema de design para formatar uma tabela .........................146
10.5. REDIMENSIONANDO TABELAS, COLUNAS E LINHAS................................................147
10.5.1. Redimensionando uma tabela ....................................................................147
10.5.2. Redimensionando colunas e linhas ............................................................148
10.5.3. Tornando consistente a largura de código com a largura visual ................148
10.5.4. Limpando larguras e alturas .......................................................................149
V
Adobe Dreamweaver CS3
10.6. ADIÇÃO E REMOÇÃO DE LINHAS E COLUNAS ......................................................... 149
10.6.1. Dividindo e Mesclando Células ................................................................ 150
10.6.2. Copiando, colando e deletando células ..................................................... 151
10.6.3. Tabelas aninhadas ..................................................................................... 153
10.6.4. Ordenação em tabelas................................................................................ 153
10.7. EXERCÍCIOS ........................................................................................................... 154
11. FRAMES (MOLDURAS OU QUADROS) ............................................................ 157
11.1. FRAMES E FRAMESETS .......................................................................................... 157
11.1.1. Utilização de frames .................................................................................. 157
11.1.2. Framesets aninhados ................................................................................. 158
11.2. TRABALHO COM FRAMESETS EM UMA JANELA DE DOCUMENTO............................ 158
11.3. CRIAÇÃO DE FRAMES E FRAMESETS ...................................................................... 158
11.3.1. Desenhando um frameset .......................................................................... 160
11.4. SELEÇÃO DE FRAMES E FRAMESETS....................................................................... 161
11.4.1. Seleção de frames e framesets na janela Document ................................. 162
11.4.2. Abertura de um Documento no Frame ...................................................... 163
11.4.3. Salvando frames e framesets ..................................................................... 164
11.4.4. Visualização e configuração das propriedades e atributos do frame ........ 165
11.4.5. Visualização e configuração das propriedades do frameset...................... 166
11.4.6. Controlando o conteúdo do frame ............................................................. 166
11.4.7. Browsers que não mostram frames ........................................................... 167
11.5. EXERCÍCIOS ........................................................................................................... 168
12. OS FORMULÁRIOS ............................................................................................... 169
12.1. OS SCRIPTS CGI .................................................................................................... 169
12.2. OS OBJETOS DE FORMULÁRIO ................................................................................ 169
12.3. CRIAÇÃO DE UM FORMULÁRIO .............................................................................. 170
12.4. OS CAMPOS DE FORMULÁRIO................................................................................. 172
12.4.1. Criação de campos de texto....................................................................... 172
12.4.2. Criação de um campo oculto ..................................................................... 174
12.5. CAIXAS DE SELEÇÃO E BOTÕES DE OPÇÃO ............................................................. 175
12.5.1. Caixas de seleção ...................................................................................... 175
12.5.2. Botões de opção ........................................................................................ 176
12.6. AS LISTAS E OS MENUS .......................................................................................... 177
12.6.1. Criação de uma lista de rolagem ............................................................... 177
12.6.2. Criação de um menu pop-up ..................................................................... 179
12.7. OS BOTÕES DE FORMULÁRIO ................................................................................. 180
12.8. UTILIZANDO OS COMPORTAMENTOS COM FORMULÁRIOS ..................................... 181
12.9. EXERCÍCIOS ........................................................................................................... 183
13. INSERÇÃO DE MÍDIA........................................................................................... 185
13.1. INSERÇÃO DE OBJETOS DE MÍDIA ........................................................................... 185
13.2. ARQUIVOS FLASH .................................................................................................. 185
13.3. OS OBJETOS DE BOTÃO FLASH ............................................................................... 186
13.4. OS OBJETOS DE TEXTO FLASH ............................................................................... 189
13.5. INSERÇÃO DE FILMES FLASH ................................................................................. 191
13.6. INSERÇÃO DE FILMES SHOCKWAVE ....................................................................... 192
VI www.komedi.com.br
Adobe Dreamweaver CS3
10.6. ADIÇÃO E REMOÇÃO DE LINHAS E COLUNAS ......................................................... 149
10.6.1. Dividindo e Mesclando Células ................................................................ 150
10.6.2. Copiando, colando e deletando células ..................................................... 151
10.6.3. Tabelas aninhadas ..................................................................................... 153
10.6.4. Ordenação em tabelas................................................................................ 153
10.7. EXERCÍCIOS ........................................................................................................... 154
11. FRAMES (MOLDURAS OU QUADROS) ............................................................ 157
11.1. FRAMES E FRAMESETS .......................................................................................... 157
11.1.1. Utilização de frames .................................................................................. 157
11.1.2. Framesets aninhados ................................................................................. 158
11.2. TRABALHO COM FRAMESETS EM UMA JANELA DE DOCUMENTO............................ 158
11.3. CRIAÇÃO DE FRAMES E FRAMESETS ...................................................................... 158
11.3.1. Desenhando um frameset .......................................................................... 160
11.4. SELEÇÃO DE FRAMES E FRAMESETS....................................................................... 161
11.4.1. Seleção de frames e framesets na janela Document ................................. 162
11.4.2. Abertura de um Documento no Frame ...................................................... 163
11.4.3. Salvando frames e framesets ..................................................................... 164
11.4.4. Visualização e configuração das propriedades e atributos do frame ........ 165
11.4.5. Visualização e configuração das propriedades do frameset...................... 166
11.4.6. Controlando o conteúdo do frame ............................................................. 166
11.4.7. Browsers que não mostram frames ........................................................... 167
11.5. EXERCÍCIOS ........................................................................................................... 168
12. OS FORMULÁRIOS ............................................................................................... 169
12.1. OS SCRIPTS CGI .................................................................................................... 169
12.2. OS OBJETOS DE FORMULÁRIO ................................................................................ 169
12.3. CRIAÇÃO DE UM FORMULÁRIO .............................................................................. 170
12.4. OS CAMPOS DE FORMULÁRIO................................................................................. 172
12.4.1. Criação de campos de texto....................................................................... 172
12.4.2. Criação de um campo oculto ..................................................................... 174
12.5. CAIXAS DE SELEÇÃO E BOTÕES DE OPÇÃO ............................................................. 175
12.5.1. Caixas de seleção ...................................................................................... 175
12.5.2. Botões de opção ........................................................................................ 176
12.6. AS LISTAS E OS MENUS .......................................................................................... 177
12.6.1. Criação de uma lista de rolagem ............................................................... 177
12.6.2. Criação de um menu pop-up ..................................................................... 179
12.7. OS BOTÕES DE FORMULÁRIO ................................................................................. 180
12.8. UTILIZANDO OS COMPORTAMENTOS COM FORMULÁRIOS ..................................... 181
12.9. EXERCÍCIOS ........................................................................................................... 183
13. INSERÇÃO DE MÍDIA........................................................................................... 185
13.1. INSERÇÃO DE OBJETOS DE MÍDIA ........................................................................... 185
13.2. ARQUIVOS FLASH .................................................................................................. 185
13.3. OS OBJETOS DE BOTÃO FLASH ............................................................................... 186
13.4. OS OBJETOS DE TEXTO FLASH ............................................................................... 189
13.5. INSERÇÃO DE FILMES FLASH ................................................................................. 191
13.6. INSERÇÃO DE FILMES SHOCKWAVE ....................................................................... 192
VI www.komedi.com.br
 Índice
13.7. ADIÇÃO DE SOM A UMA PÁGINA .............................................................................192
13.7.1. Vinculação a um arquivo de áudio.............................................................193
13.7.2. Incorporando áudio ....................................................................................193
14. EDIÇÃO DE HTML NO DREAMWEAVER ........................................................195
14.1. OS TAGS HTML BÁSICOS .......................................................................................195
14.2. INSERINDO COMENTÁRIOS......................................................................................196
15. TESTE E PUBLICAÇÃO DE UM SITE ................................................................199
15.1. VERIFICAÇÃO DA COMPATIBILIDADE COM O NAVEGADOR .....................................200
15.2. VERIFICAÇÃO DOS LINKS NUMA PÁGINA OU SITE ...................................................202
15.2.1. Ajuste de links rompidos............................................................................204
15.2.2. Abrindo documentos vinculados no Dreamweaver ...................................204
15.3. UTILIZAÇÃO DE RELATÓRIOS PARA TESTAR UM SITE .............................................205
15.4. DOWNLOAD E UPLOAD DE ARQUIVOS ....................................................................206
15.4.1. Download de arquivos de um servidor remoto ..........................................207
15.4.2. Upload de arquivos em um servidor remoto ..............................................208
15.4.3. Sincronização dos arquivos........................................................................209
15.4.4. Registro de atividades de transferência......................................................210
www.komedi.com.br VII
Índice
13.7. ADIÇÃO DE SOM A UMA PÁGINA .............................................................................192
13.7.1. Vinculação a um arquivo de áudio.............................................................193
13.7.2. Incorporando áudio ....................................................................................193
14. EDIÇÃO DE HTML NO DREAMWEAVER ........................................................195
14.1. OS TAGS HTML BÁSICOS .......................................................................................195
14.2. INSERINDO COMENTÁRIOS......................................................................................196
15. TESTE E PUBLICAÇÃO DE UM SITE ................................................................199
15.1. VERIFICAÇÃO DA COMPATIBILIDADE COM O NAVEGADOR .....................................200
15.2. VERIFICAÇÃO DOS LINKS NUMA PÁGINA OU SITE ...................................................202
15.2.1. Ajuste de links rompidos............................................................................204
15.2.2. Abrindo documentos vinculados no Dreamweaver ...................................204
15.3. UTILIZAÇÃO DE RELATÓRIOS PARA TESTAR UM SITE .............................................205
15.4. DOWNLOAD E UPLOAD DE ARQUIVOS ....................................................................206
15.4.1. Download de arquivos de um servidor remoto ..........................................207
15.4.2. Upload de arquivos em um servidor remoto ..............................................208
15.4.3. Sincronização dos arquivos........................................................................209
15.4.4. Registro de atividades de transferência......................................................210
www.komedi.com.br VII
Adobe Dreamweaver CS3 Adobe Dreamweaver CS3

VIII www.komedi.com.br VIII www.komedi.com.br

 O Ambiente Adobe Dreamweaver CS3 O Ambiente Adobe Dreamweaver CS3

1. O Ambiente Adobe Dreamweaver CS3 1. O Ambiente Adobe Dreamweaver CS3

1 1
Adobe Dreamweaver CS3 é um editor profissional de HTML utilizado para projetar, codificar e Adobe Dreamweaver CS3 é um editor profissional de HTML utilizado para projetar, codificar e
desenvolver Páginas, Sites e Aplicações Web. desenvolver Páginas, Sites e Aplicações Web.
Tanto para controle manual do código HTML como para operação em um ambiente de edição Tanto para controle manual do código HTML como para operação em um ambiente de edição
visual, Dreamweaver oferece ferramentas úteis para otimizar seu trabalho de criação de sites para visual, Dreamweaver oferece ferramentas úteis para otimizar seu trabalho de criação de sites para
Internet. Internet.
Além disso, Dreamweaver pode ajudá-lo a construir aplicações dinâmicas para Internet, utilizando Além disso, Dreamweaver pode ajudá-lo a construir aplicações dinâmicas para Internet, utilizando
banco de dados, com desenvolvimento nas linguagens de servidor, como ASP, ASP.NET, banco de dados, com desenvolvimento nas linguagens de servidor, como ASP, ASP.NET,
ColdFusion, JSP e PHP. ColdFusion, JSP e PHP.

1.1. Instalação do Dreamweaver 1.1. Instalação do Dreamweaver

Antes de instalar Dreamweaver, certifique-se de que seu computador possui o seguinte hardware e Antes de instalar Dreamweaver, certifique-se de que seu computador possui o seguinte hardware e
software: software:
Processador Intel® Pentium® 4, Intel Centrino® Intel Xeon®, ou Intel Core™ Duo (ou Processador Intel® Pentium® 4, Intel Centrino® Intel Xeon®, ou Intel Core™ Duo (ou
compatível). compatível).
Microsoft Windows XP com Service Pack 2 ou Windows Vista™ Home Premium, Business, Microsoft Windows XP com Service Pack 2 ou Windows Vista™ Home Premium, Business,
Ultimate, ou Enterprise (certificado para edições de 32-bit). Ultimate, ou Enterprise (certificado para edições de 32-bit).
Pelo menos 512 MB de memória RAM disponível (1 GB recomendados). Pelo menos 512 MB de memória RAM disponível (1 GB recomendados).
Pelo menos 1 GB de espaço disponível em disco (é necessário um espaço adicional durante a Pelo menos 1 GB de espaço disponível em disco (é necessário um espaço adicional durante a
instalação). instalação).
Monitor com resolução de 1024 x 768, 16-bits (32-bits recomendável) ou superior. Monitor com resolução de 1024 x 768, 16-bits (32-bits recomendável) ou superior.
Software QuickTime 7, necessário para recursos de multimédia. Software QuickTime 7, necessário para recursos de multimédia.
Ligação à Internet, necessária para ativação do produto. Ligação à Internet, necessária para ativação do produto.
Para instalar Dreamweaver: Para instalar Dreamweaver:
1. Insira o CD do Dreamweaver na unidade de CD-ROM de seu computador. O 1. Insira o CD do Dreamweaver na unidade de CD-ROM de seu computador. O
programa se inicia automaticamente. programa se inicia automaticamente.
2. Clique no ícone de instalação “Dreamweaver CS3”. 2. Clique no ícone de instalação “Dreamweaver CS3”.
3. Clique no botão “Install” 3. Clique no botão “Install”
4. Siga as instruções de instalação. O programa de instalação solicitará as 4. Siga as instruções de instalação. O programa de instalação solicitará as
informações necessárias. informações necessárias.
5. Ao final da instalação, se solicitado, reinicie seu computador. 5. Ao final da instalação, se solicitado, reinicie seu computador.

1 1
Adobe Dreamweaver CS3 é nome oficial do programa, mas, ao longo desse ,texto, será denominado Adobe Dreamweaver CS3 é nome oficial do programa, mas, ao longo desse ,texto, será denominado
simplesmente de Dreamweaver. simplesmente de Dreamweaver.

www.komedi.com.br 9 www.komedi.com.br 9
Adobe Dreamweaver CS3 Adobe Dreamweaver CS3

1.2. Arquivos Utilizados na Apostila 1.2. Arquivos Utilizados na Apostila

Durante o desenvolvimento do curso serão utilizadas imagens e textos para construção de um site
demonstrativo, além de imagens fornecidas na instalação do programa, para exemplificação dos
passos de desenvolvimento.
Os arquivos necessários para a construção do site podem ser obtidos por meio de download no
endereço www.komedi.com.br/download/DWVCS3.Zip. Após o download, os arquivos devem ser
descompactados e salvos em uma pasta denominada Site no diretório designado para o aluno.
Localize em seu computador, a pasta que contém arquivos de imagem do programa: C:\Arquivos de
programas\Adobe\Dreamweaver CS3\Tutorial_assets\cafe_townsend\images.
Nota: Mesmo sem acesso a estes arquivos, os exemplos podem ser compreendidos e realizados com
outros arquivos (imagens e textos) de seu próprio computador.
Durante o desenvolvimento do curso serão utilizadas imagens e textos para construção de um site
demonstrativo, além de imagens fornecidas na instalação do programa, para exemplificação dos
passos de desenvolvimento.
Os arquivos necessários para a construção do site podem ser obtidos por meio de download no
endereço www.komedi.com.br/download/DWVCS3.Zip. Após o download, os arquivos devem ser
descompactados e salvos em uma pasta denominada Site no diretório designado para o aluno.
Localize em seu computador, a pasta que contém arquivos de imagem do programa: C:\Arquivos de
programas\Adobe\Dreamweaver CS3\Tutorial_assets\cafe_townsend\images.
Nota: Mesmo sem acesso a estes arquivos, os exemplos podem ser compreendidos e realizados com
outros arquivos (imagens e textos) de seu próprio computador.

1.3. A Inicialização de Dreamweaver 1.3. A Inicialização de Dreamweaver

Dreamweaver é inicializado dentro do Windows. Ao carregar o Windows, os ícones de atalho que
você definiu estarão dispostos na tela.
Para carregar Dreamweaver você pode usar um atalho ou procurá-lo no menu “Iniciar”.
Para carregar Dreamweaver através de um atalho:
1. Dê um duplo-clique sobre o ícone do atalho, Figura 1. O programa será
inicializado.
Dreamweaver é inicializado dentro do Windows. Ao carregar o Windows, os ícones de atalho que
você definiu estarão dispostos na tela.
Para carregar Dreamweaver você pode usar um atalho ou procurá-lo no menu “Iniciar”.
Para carregar Dreamweaver através de um atalho:
1. Dê um duplo-clique sobre o ícone do atalho, Figura 1. O programa será
inicializado.

Figura 1 – Atalho de Dreamweaver Figura 1 – Atalho de Dreamweaver

Para carregar Dreamweaver através do menu “Iniciar”: Para carregar Dreamweaver através do menu “Iniciar”:
1. Na barra de tarefas, clique no botão “Iniciar”. 1. Na barra de tarefas, clique no botão “Iniciar”.
2. Aponte para a opção “Todos os Programas”. 2. Aponte para a opção “Todos os Programas”.
3. Aponte para a opção “Adobe Design Premium CS3”. 3. Aponte para a opção “Adobe Design Premium CS3”.
4. Clique na opção “Adobe Dreamweaver CS3”, Figura 2. O programa será 4. Clique na opção “Adobe Dreamweaver CS3”, Figura 2. O programa será
inicializado. inicializado.

10 www.komedi.com.br 10 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3
Figura 2 – Carregar Dreamweaver através do menu “Iniciar”
1.4. Área de Trabalho Dreamweaver
No Windows, Dreamweaver oferece uma “Área de Trabalho” única, na qual todas as janelas e painéis
são integrados em uma única grande janela do aplicativo, permitindo a observação das propriedades
de documentos e objetos.
Você pode escolher entre um layout orientado ao design ou às necessidades de programação manuais.
Ao abrir o programa pela primeira vez, é mostrada uma caixa de diálogo que permite a escolha de um
layout da “Área de Trabalho”. Uma posterior alteração pode ser feita utilizando a caixa de diálogo
“Preferences”.
Para selecionar o layout da “Área de Trabalho”:
1. Abra o programa Dreamweaver. Se esta for a primeira utilização do programa,
será aberta a caixa de diálogo “Workspace Setup”, Figura 3.
Figura 3 – Seleção de layout da “Área de Trabalho”
As opções disponíveis são:
Designer workspace – “Área de Trabalho” na qual a janela “Document” e os painéis são integrados
dentro de uma janela de aplicação maior, com os grupos de painéis localizados à direita. É o layout
recomendado para a maioria dos usuários e a maioria dos textos da apostila assumirá esta forma de
visualização.
Coder workspace – “Área de Trabalho” com o grupo de painéis à esquerda. A janela “Document”
mostra a visualização de código como padrão. É recomendado para programadores já acostumados a
este tipo de visualização.
www.komedi.com.br 11
O Ambiente Adobe Dreamweaver CS3
Figura 2 – Carregar Dreamweaver através do menu “Iniciar”
1.4. Área de Trabalho Dreamweaver
No Windows, Dreamweaver oferece uma “Área de Trabalho” única, na qual todas as janelas e painéis
são integrados em uma única grande janela do aplicativo, permitindo a observação das propriedades
de documentos e objetos.
Você pode escolher entre um layout orientado ao design ou às necessidades de programação manuais.
Ao abrir o programa pela primeira vez, é mostrada uma caixa de diálogo que permite a escolha de um
layout da “Área de Trabalho”. Uma posterior alteração pode ser feita utilizando a caixa de diálogo
“Preferences”.
Para selecionar o layout da “Área de Trabalho”:
1. Abra o programa Dreamweaver. Se esta for a primeira utilização do programa,
será aberta a caixa de diálogo “Workspace Setup”, Figura 3.
Figura 3 – Seleção de layout da “Área de Trabalho”
As opções disponíveis são:
Designer workspace – “Área de Trabalho” na qual a janela “Document” e os painéis são integrados
dentro de uma janela de aplicação maior, com os grupos de painéis localizados à direita. É o layout
recomendado para a maioria dos usuários e a maioria dos textos da apostila assumirá esta forma de
visualização.
Coder workspace – “Área de Trabalho” com o grupo de painéis à esquerda. A janela “Document”
mostra a visualização de código como padrão. É recomendado para programadores já acostumados a
este tipo de visualização.
www.komedi.com.br 11
Adobe Dreamweaver CS3 Adobe Dreamweaver CS3
2. Clique na caixa de opção “Designer”, para ativá-la, para selecionar o layout 2. Clique na caixa de opção “Designer”, para ativá-la, para selecionar o layout
“Designer workspace”. Este será o modo de trabalho que utilizaremos ao longo do “Designer workspace”. Este será o modo de trabalho que utilizaremos ao longo do
texto. texto.
3. Clique no botão “OK”. Será aberta a “Área de Trabalho”, Figura 4. 3. Clique no botão “OK”. Será aberta a “Área de Trabalho”, Figura 4.

Figura 4 – “Área de Trabalho”, com “Start Page”
A página “Start Page” permite a abertura de documentos recentes ou a criação de um novo
documento, além de fornecer um caminho para acesso ao tutorial do programa. Não utilizaremos esta
página nesta apostila.
4. Se a página “Start Page” estiver aberta, clique na caixa de verificação “Don’t
show again”, para fechá-la. Será aberta uma caixa de alerta informando o
procedimento para exibir a página novamente, se desejado, como mostrado na
Figura 5.
Figura 4 – “Área de Trabalho”, com “Start Page”
A página “Start Page” permite a abertura de documentos recentes ou a criação de um novo
documento, além de fornecer um caminho para acesso ao tutorial do programa. Não utilizaremos esta
página nesta apostila.
4. Se a página “Start Page” estiver aberta, clique na caixa de verificação “Don’t
show again”, para fechá-la. Será aberta uma caixa de alerta informando o
procedimento para exibir a página novamente, se desejado, como mostrado na
Figura 5.

Figura 5 – Caixa de alerta para fechamento da “Start Page” Figura 5 – Caixa de alerta para fechamento da “Start Page”
5. Clique no botão “OK”. A página “Start Page” não mais será aberta quando da 5. Clique no botão “OK”. A página “Start Page” não mais será aberta quando da
próxima execução do programa. próxima execução do programa.

12 www.komedi.com.br 12 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3 O Ambiente Adobe Dreamweaver CS3

1.4.1. Criação de uma página em branco 1.4.1. Criação de uma página em branco
Vamos criar uma página em branco, para podermos observar todos os elementos da “Área de Vamos criar uma página em branco, para podermos observar todos os elementos da “Área de
Trabalho”. Mais adiante explicaremos com mais detalhes os procedimentos de criação e abertura de Trabalho”. Mais adiante explicaremos com mais detalhes os procedimentos de criação e abertura de
arquivos. arquivos.
Para criar um documento: Para criar um documento:
1. No menu “File”, clique no comando “New”. Será aberta a caixa de diálogo “New 1. No menu “File”, clique no comando “New”. Será aberta a caixa de diálogo “New
Document”. Document”.
2. Não altere nada nesta caixa de diálogo, como mostrado na Figura 6. 2. Não altere nada nesta caixa de diálogo, como mostrado na Figura 6.
3. Clique no botão “Create”. Será aberta uma página em branco, na “Área de 3. Clique no botão “Create”. Será aberta uma página em branco, na “Área de
Trabalho”. Trabalho”.

Figura 6 – Caixa de diálogo “New Document” Figura 6 – Caixa de diálogo “New Document”

1.4.2. Visão Geral da Área de Trabalho 1.4.2. Visão Geral da Área de Trabalho
Esta seção descreve brevemente alguns elementos da “Área de Trabalho” do programa, os quais serão Esta seção descreve brevemente alguns elementos da “Área de Trabalho” do programa, os quais serão
utilizados e descritos com mais detalhes ao longo da apostila. utilizados e descritos com mais detalhes ao longo da apostila.

www.komedi.com.br 13 www.komedi.com.br 13
Adobe Dreamweaver CS3
Figura 7 – Visão Geral da “Área de Trabalho”
Principais elementos da “Área de Trabalho”:
Barra “Insert” – contém botões para inserção de vários tipos de
objetos (trecho de código HTML) no documento como, por
exemplo, imagens, tabelas, camadas etc. Como alternativa, o
mesmo processo pode ser efetuado através do menu “Insert”.
Esta barra possui diferentes categorias, de acordo com o tipo de
elemento a ser aplicado ao documento. Estas categorias podem
ser selecionadas na caixa de lista, mostrada na Figura 8, que é
aberta ao clicar no triângulo invertido ( ), ao lado do nome da
barra.
As barras são mostradas abaixo, com seus ícones diferenciados:
Figura 8 – Categorias da
barra “Insert”
14 www.komedi.com.br
Adobe Dreamweaver CS3
Figura 7 – Visão Geral da “Área de Trabalho”
Principais elementos da “Área de Trabalho”:
Barra “Insert” – contém botões para inserção de vários tipos de
objetos (trecho de código HTML) no documento como, por
exemplo, imagens, tabelas, camadas etc. Como alternativa, o
mesmo processo pode ser efetuado através do menu “Insert”.
Esta barra possui diferentes categorias, de acordo com o tipo de
elemento a ser aplicado ao documento. Estas categorias podem
ser selecionadas na caixa de lista, mostrada na Figura 8, que é
aberta ao clicar no triângulo invertido ( ), ao lado do nome da
barra.
As barras são mostradas abaixo, com seus ícones diferenciados:
Figura 8 – Categorias da
barra “Insert”
14 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3
Figura 9 – Categorias da Barra “Insert”
Para mostrar a barra como um conjunto de guias encaixadas:
1. Clique na seta ao lado do nome de qualquer barra e clique no comando “Show as
Tabs”.
Figura 10 – Barra “Insert” mostrada como um conjunto de guias encaixadas
Para voltar a mostrar a barra como um conjunto menus:
1. Clique na seta ao lado do nome de qualquer barra, com o botão direito do mouse, e
clique no comando “Show as Menus”.
Barra de Ferramentas “Document” – contém botões que permitem trocar a forma de visualização
do documento, que são: “Code”, “Design” e “Split” (as duas visualizações simultâneas), além de
comandos e opções relacionadas a outras de visualização do documento e de transferência entre o site
local e remoto.
Barra de Ferramentas “Standard” – contém botões para operações básicas dos menus “File” e
“Edit”. São eles: “New”, “Open”, “Save”, “Save All”, “Print Code”, “Cut”, “Copy”, “Paste”, “Undo”
e “Redo”, que operam de forma idêntica à dos correspondentes comandos dos menus.
Figura 11 – Barra “Standard” mostrada como um conjunto de guias encaixadas
Barra de Status – localizada no rodapé da janela “Document”, proporciona informações adicionais
sobre o documento aberto, como seletor de “Tag” (que mostra a hierarquia das tags selecionadas),
caixa de lista “Window Size” (visível no modo “Design”, para redimensionar o documento), tempo e
tamanho estimados de download.
Janela “Document” – mostra o documento atual quando criado ou editado.
Inspetor “Properties” – mostra e permite a alteração de propriedades de textos ou objetos
selecionados. Como cada objeto possui diferentes propriedades, o inspetor “Properties” é
diferenciado conforme o objeto selecionado.
Grupo de Painéis – conjunto de painéis semelhantes agrupados sob um título. O grupo de painéis
inicialmente é alocado em conjunto, mas os painéis podem ser deslocados para suas próprias janelas.
Painel “Files” – permite o gerenciamento de arquivos e pastas, quer eles sejam parte de um Site
Dreamweaver ou estejam em um servidor remoto. Também acessa os arquivos no disco local de
forma semelhante ao Windows Explorer.
www.komedi.com.br 15
O Ambiente Adobe Dreamweaver CS3
Figura 9 – Categorias da Barra “Insert”
Para mostrar a barra como um conjunto de guias encaixadas:
1. Clique na seta ao lado do nome de qualquer barra e clique no comando “Show as
Tabs”.
Figura 10 – Barra “Insert” mostrada como um conjunto de guias encaixadas
Para voltar a mostrar a barra como um conjunto menus:
1. Clique na seta ao lado do nome de qualquer barra, com o botão direito do mouse, e
clique no comando “Show as Menus”.
Barra de Ferramentas “Document” – contém botões que permitem trocar a forma de visualização
do documento, que são: “Code”, “Design” e “Split” (as duas visualizações simultâneas), além de
comandos e opções relacionadas a outras de visualização do documento e de transferência entre o site
local e remoto.
Barra de Ferramentas “Standard” – contém botões para operações básicas dos menus “File” e
“Edit”. São eles: “New”, “Open”, “Save”, “Save All”, “Print Code”, “Cut”, “Copy”, “Paste”, “Undo”
e “Redo”, que operam de forma idêntica à dos correspondentes comandos dos menus.
Figura 11 – Barra “Standard” mostrada como um conjunto de guias encaixadas
Barra de Status – localizada no rodapé da janela “Document”, proporciona informações adicionais
sobre o documento aberto, como seletor de “Tag” (que mostra a hierarquia das tags selecionadas),
caixa de lista “Window Size” (visível no modo “Design”, para redimensionar o documento), tempo e
tamanho estimados de download.
Janela “Document” – mostra o documento atual quando criado ou editado.
Inspetor “Properties” – mostra e permite a alteração de propriedades de textos ou objetos
selecionados. Como cada objeto possui diferentes propriedades, o inspetor “Properties” é
diferenciado conforme o objeto selecionado.
Grupo de Painéis – conjunto de painéis semelhantes agrupados sob um título. O grupo de painéis
inicialmente é alocado em conjunto, mas os painéis podem ser deslocados para suas próprias janelas.
Painel “Files” – permite o gerenciamento de arquivos e pastas, quer eles sejam parte de um Site
Dreamweaver ou estejam em um servidor remoto. Também acessa os arquivos no disco local de
forma semelhante ao Windows Explorer.
www.komedi.com.br 15
Adobe Dreamweaver CS3
1.4.3. Visão Geral dos Menus
Figura 12 – Menus e Submenus
File Menu – contém os itens de menu padrão para tratamento de arquivos, como “New”, “Open”,
“Close”, “Close All”, “Save”, “Save As”, “Save All”, “Revert”, assim como comandos para
visualização e ação sobre o documento atual, como “Print Code”, “Import”, “Export”, “Convert”,
“Preview in Browser” etc.
Edit Menu – contém os itens de menu padrão para edição de arquivos, como “Cut”, “Copy”, “Past”,
“Undo” e “Redo”, além de comandos de seleção e busca, como “Select Parent Tag”, “Find and
Replace”, “Preferences”.
View menu – permite a visualização do documento de várias formas (como “Design”, “Code”,
“Code and Design”) e a exibição ou ocultação de vários elementos da página e de barras de
ferramentas do programa.
Insert menu – caminho alternativo para a “Insert bar”, para inserir objetos no documento.
Modify menu – permite alterações das propriedades dos elementos selecionados nas páginas, tais
como edição de atributos de tag, alterações de tabelas e seus elementos, além de ações sobre itens de
2 2
biblioteca e de “Templates” .
Text menu – realiza formatação de texto de forma fácil.
Commands menu – fornece acesso a vários comandos, tais como formatação de código
personalizada, criação de álbum de fotos e otimização de imagens pelo uso do Adobe Fireworks.
Site menu – apresenta itens de menu para gerenciamento de sites e transferência de arquivos com o
provedor de Internet.
Window menu – fornece acesso a todos os painéis, inspetores e janelas do programa.
Help menu – fornece acesso à documentação do programa, sistema de ajuda para uso do programa e
manual de referência para linguagens.
2 2
Templates são modelos predefinidos de formatação de páginas HTML.
16 www.komedi.com.br
Adobe Dreamweaver CS3
1.4.3. Visão Geral dos Menus
Figura 12 – Menus e Submenus
File Menu – contém os itens de menu padrão para tratamento de arquivos, como “New”, “Open”,
“Close”, “Close All”, “Save”, “Save As”, “Save All”, “Revert”, assim como comandos para
visualização e ação sobre o documento atual, como “Print Code”, “Import”, “Export”, “Convert”,
“Preview in Browser” etc.
Edit Menu – contém os itens de menu padrão para edição de arquivos, como “Cut”, “Copy”, “Past”,
“Undo” e “Redo”, além de comandos de seleção e busca, como “Select Parent Tag”, “Find and
Replace”, “Preferences”.
View menu – permite a visualização do documento de várias formas (como “Design”, “Code”,
“Code and Design”) e a exibição ou ocultação de vários elementos da página e de barras de
ferramentas do programa.
Insert menu – caminho alternativo para a “Insert bar”, para inserir objetos no documento.
Modify menu – permite alterações das propriedades dos elementos selecionados nas páginas, tais
como edição de atributos de tag, alterações de tabelas e seus elementos, além de ações sobre itens de
biblioteca e de “Templates” .
Text menu – realiza formatação de texto de forma fácil.
Commands menu – fornece acesso a vários comandos, tais como formatação de código
personalizada, criação de álbum de fotos e otimização de imagens pelo uso do Adobe Fireworks.
Site menu – apresenta itens de menu para gerenciamento de sites e transferência de arquivos com o
provedor de Internet.
Window menu – fornece acesso a todos os painéis, inspetores e janelas do programa.
Help menu – fornece acesso à documentação do programa, sistema de ajuda para uso do programa e
manual de referência para linguagens.
Templates são modelos predefinidos de formatação de páginas HTML.
16 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3
1.5. O que é novo no Dreamweaver
Dreamweaver contém uma nova interface enxuta, associada com uma performance otimizada. Há
uma grande variedade de aspectos que facilitam a utilização, auxiliando a construção de páginas, nos
dois modos de exibição. O programa torna simples e acessíveias tecnologias complexas, permitindo
que você realize mais em menos tempo.
Novos Recursos:
Quadro Ágil para Ajax – com o Adobe ® Dreamweaver ® CS3, você pode visualmente conceber,
desenvolver e implantar interfaces dinâmicas para usuários usando o quadro de Ajax. O quadro para
o Ajax é uma biblioteca JavaScript para web designers que permite aos desenvolvedores criarem
páginas que oferecem uma experiência mais rica para os seus utilizadores.
Componentes Ágis – são components de interface para usuários comuns que você pode customizar
usando CSS, e, então, adicionar às suas páginas web. Com o Dreamweaver, você pode adicionar um
número de Componentes Ágis às suas páginas, incluindo XML-listas orientadas e tabelas, interfaces
com tabulação, elementos de formulário com validação etc.
Efeitos Rápidos – são uma forma simples e elegante de melhorar a aparência do seu site. Você pode
aplicá-los para praticamente qualquer elemento em uma página HTML. Você pode adicionar efeitos
rápidos para aumentar, encolher, ocultar e destacar elementos; visualmente alterar um elemento de
página para um determinado período de tempo e muito mais.
Avançada integração com o Photoshop CS3 – agora, os projetistas podem simplesmente selecionar
qualquer parte de um desenho no Photoshop, mesmo através de múltiplas camadas, e colá-lo
diretamente em uma página Dreamweaver. Dreamweaver apresenta uma caixa de diálogo onde você
pode especificar opções para a otimização da imagem. Se você alguma vez precisar editar a imagem,
simplesmente dê um duplo-clique na imagem para abrir o arquivo original PSD do Photoshop para
edição.
Verificação de Compatibilidade de Browser – a nova funcionalidade gera relatórios que
identificam tags CSS relacionadas com a apresentação em uma variedade de navegadores. No modo
“Code View”, as tags são sinalizadas com verde sublinhando, assim você sabe exatamente onde está
o problema. Depois de identificar o problema, você pode corrigi-lo rapidamente se você souber a
solução, ou, se você precisar de mais informações, pode visitar o Adobe CSS Orientador.
Adobe CSS Orientador – contém informações sobre as últimas questões sobre CSS e é acessível
diretamente a partir da interface do usuário durante o processo de verificação de Compatibilidade de
Browser. Mais que um fórum, uma página wiki ou um grupo de discussão, o CSS Orientador torna
fácil para você realizar comentários com sugestões e melhorias no conteúdo existente ou adicionar
novas questões para o benefício de toda a comunidade.
CSS Layouts – o Dreamwaver oferece agora uma lista abrangente de desenhos essenciais que você
pode personalizar para atender às suas necessidades através de layouts CSS predefinidos.
Gerenciamento CSS – esta característica torna mais fácil para você mover regras CSS de documento
para documento, desde o cabeçalho de um documento até uma folha externa e muito mais. Você pode
também colocá-las onde você precisar, apenas arrastando e soltando.
Adobe Device Central – integrado com o Dreamweaver, bem como toda a família de software
Creative Suite 3, o Adobe Device Central simplifica a criação de conteúdos móveis, dando-lhe a
possibilidade de acessar rapidamente especificações técnicas essenciais de cada dispositivo, bem
como diminuir o texto e as imagens da sua página HTML.
Novidades da versão anterior:
www.komedi.com.br 17
O Ambiente Adobe Dreamweaver CS3
1.5. O que é novo no Dreamweaver
Dreamweaver contém uma nova interface enxuta, associada com uma performance otimizada. Há
uma grande variedade de aspectos que facilitam a utilização, auxiliando a construção de páginas, nos
dois modos de exibição. O programa torna simples e acessíveias tecnologias complexas, permitindo
que você realize mais em menos tempo.
Novos Recursos:
Quadro Ágil para Ajax – com o Adobe ® Dreamweaver ® CS3, você pode visualmente conceber,
desenvolver e implantar interfaces dinâmicas para usuários usando o quadro de Ajax. O quadro para
o Ajax é uma biblioteca JavaScript para web designers que permite aos desenvolvedores criarem
páginas que oferecem uma experiência mais rica para os seus utilizadores.
Componentes Ágis – são components de interface para usuários comuns que você pode customizar
usando CSS, e, então, adicionar às suas páginas web. Com o Dreamweaver, você pode adicionar um
número de Componentes Ágis às suas páginas, incluindo XML-listas orientadas e tabelas, interfaces
com tabulação, elementos de formulário com validação etc.
Efeitos Rápidos – são uma forma simples e elegante de melhorar a aparência do seu site. Você pode
aplicá-los para praticamente qualquer elemento em uma página HTML. Você pode adicionar efeitos
rápidos para aumentar, encolher, ocultar e destacar elementos; visualmente alterar um elemento de
página para um determinado período de tempo e muito mais.
Avançada integração com o Photoshop CS3 – agora, os projetistas podem simplesmente selecionar
qualquer parte de um desenho no Photoshop, mesmo através de múltiplas camadas, e colá-lo
diretamente em uma página Dreamweaver. Dreamweaver apresenta uma caixa de diálogo onde você
pode especificar opções para a otimização da imagem. Se você alguma vez precisar editar a imagem,
simplesmente dê um duplo-clique na imagem para abrir o arquivo original PSD do Photoshop para
edição.
Verificação de Compatibilidade de Browser – a nova funcionalidade gera relatórios que
identificam tags CSS relacionadas com a apresentação em uma variedade de navegadores. No modo
“Code View”, as tags são sinalizadas com verde sublinhando, assim você sabe exatamente onde está
o problema. Depois de identificar o problema, você pode corrigi-lo rapidamente se você souber a
solução, ou, se você precisar de mais informações, pode visitar o Adobe CSS Orientador.
Adobe CSS Orientador – contém informações sobre as últimas questões sobre CSS e é acessível
diretamente a partir da interface do usuário durante o processo de verificação de Compatibilidade de
Browser. Mais que um fórum, uma página wiki ou um grupo de discussão, o CSS Orientador torna
fácil para você realizar comentários com sugestões e melhorias no conteúdo existente ou adicionar
novas questões para o benefício de toda a comunidade.
CSS Layouts – o Dreamwaver oferece agora uma lista abrangente de desenhos essenciais que você
pode personalizar para atender às suas necessidades através de layouts CSS predefinidos.
Gerenciamento CSS – esta característica torna mais fácil para você mover regras CSS de documento
para documento, desde o cabeçalho de um documento até uma folha externa e muito mais. Você pode
também colocá-las onde você precisar, apenas arrastando e soltando.
Adobe Device Central – integrado com o Dreamweaver, bem como toda a família de software
Creative Suite 3, o Adobe Device Central simplifica a criação de conteúdos móveis, dando-lhe a
possibilidade de acessar rapidamente especificações técnicas essenciais de cada dispositivo, bem
como diminuir o texto e as imagens da sua página HTML.
Novidades da versão anterior:
www.komedi.com.br 17
Adobe Dreamweaver CS3
Ferramenta “Zoom” – adquira maior controle sobre seu projeto com esta ferramenta que amplia e
reduz de forma fácili a área de visualização, de acordo com o tipo de trabalho a ser realizado,
minucioso ou que exija uma visão global;
“Guides” – as guias permitem a comparação do layout criado com o modelo de página desejado com
maior precisão. A realimentação visual torna a medição mais precisa, além de suportar o modo
inteligente de “colar” imagens à guia;
“Visual XML data binding” – permite o desenvolvimento mais rápido em XML. É uma ferramenta
visual poderosa, que elimina os mistérios da conversão entre XML e HTML;
Novo “CSS Styles panel” – este novo painel unificado proporciona um ambiente centralizado para
aprender, compreender e trabalhar com estilos CSS, os quais são aplicados às páginas de forma
visual. Toda a funcionalidade CSS é consolidada em um único painel, criado e otimizado para tornar
o trabalho mais fácil e produtivo;
Visualizção de “Layout CSS” – torna muito mais fácil a formatação de páginas em CSS. Recursos
visuais facilitam o esboço de cores e bordas de layout CSS. Dreamweaver pode reproduzir os mais
complicados layouts e designs baseados em CSS de forma mais precisa, com manipulações visuais
robustas. Ao clicar no layout CSS, valiosas dicas são exibidas, para ajudá-lo a entender os elementos
que controlam o design;
“Code collapse” – com a expansão e redução de blocos de código, você pode focar apenas no código
que deseja visualizar, agilizando o trabalho de programação.
“Coding toolbar” – esta nova ferramenta fornece botões, para utilização dos recursos de código
mais comuns, em uma barra auxiliar alocada na lateral do “Code View”.
Background file transfer – enquanto o programa faz o upload de arquivos para o servidor de
hospedagem, você pode continuar trabalhando normalemente, sem interferências.
Comando “Insert Flash Video” – permite a inserção simples e fácil de um filme flash em uma
página web.
1.5.1. Outros recursos importantes
Cópia e Colagem do Microsoft Word e do Microsoft Excel – permite copiar diretamente de um
document Word ou Excel, diretamente no Dreamweaver, preservando formatação e gerando um
código HTML de qualidade.
Realimentação visual da edição de tabelas – permite verificar os efeitos que o redimensionamento
de colunas produzirá nas tabelas, além de tornar mais fácil a seleção de elementos de tabelas.
Interface de usuário – maximiza o espaço útil da “Área de Trabalho”, mostrando mais claramente o
contexto e o foco, tornando a interface mais amigável e lógica.
Start Page – permite acessar arquivos usados mais recentemente, criar novos arquivos e ter acesso
aos recursos do Dreamweaver.
Opção de salvar desktop – Permite reabrir o último documento alterado quando o programa for
reinicializado.
Suporte completo Unicode – Dreamweaver no Windows suporta todas as codificações de texto
suportadas pelo Internet Explorer, permitindo utilizar quase todas as fontes de qualquer línguas.
FTP seguro – Permite encripitar todas as transferências de arquivos e prevenir acesso não autorizado
a seus dados, arquivos, nomes e senhas.
Validação dinâmica de cross-browser – automaticamente verifica a compatibilidade do documento
atual com vários browsers, quando este é salvo, ou seja, deixa você seguro de não estar utilizando
tags ou construções CSS que os browsers de destino especificados não suportam.
18 www.komedi.com.br
Adobe Dreamweaver CS3
Ferramenta “Zoom” – adquira maior controle sobre seu projeto com esta ferramenta que amplia e
reduz de forma fácili a área de visualização, de acordo com o tipo de trabalho a ser realizado,
minucioso ou que exija uma visão global;
“Guides” – as guias permitem a comparação do layout criado com o modelo de página desejado com
maior precisão. A realimentação visual torna a medição mais precisa, além de suportar o modo
inteligente de “colar” imagens à guia;
“Visual XML data binding” – permite o desenvolvimento mais rápido em XML. É uma ferramenta
visual poderosa, que elimina os mistérios da conversão entre XML e HTML;
Novo “CSS Styles panel” – este novo painel unificado proporciona um ambiente centralizado para
aprender, compreender e trabalhar com estilos CSS, os quais são aplicados às páginas de forma
visual. Toda a funcionalidade CSS é consolidada em um único painel, criado e otimizado para tornar
o trabalho mais fácil e produtivo;
Visualizção de “Layout CSS” – torna muito mais fácil a formatação de páginas em CSS. Recursos
visuais facilitam o esboço de cores e bordas de layout CSS. Dreamweaver pode reproduzir os mais
complicados layouts e designs baseados em CSS de forma mais precisa, com manipulações visuais
robustas. Ao clicar no layout CSS, valiosas dicas são exibidas, para ajudá-lo a entender os elementos
que controlam o design;
“Code collapse” – com a expansão e redução de blocos de código, você pode focar apenas no código
que deseja visualizar, agilizando o trabalho de programação.
“Coding toolbar” – esta nova ferramenta fornece botões, para utilização dos recursos de código
mais comuns, em uma barra auxiliar alocada na lateral do “Code View”.
Background file transfer – enquanto o programa faz o upload de arquivos para o servidor de
hospedagem, você pode continuar trabalhando normalemente, sem interferências.
Comando “Insert Flash Video” – permite a inserção simples e fácil de um filme flash em uma
página web.
1.5.1. Outros recursos importantes
Cópia e Colagem do Microsoft Word e do Microsoft Excel – permite copiar diretamente de um
document Word ou Excel, diretamente no Dreamweaver, preservando formatação e gerando um
código HTML de qualidade.
Realimentação visual da edição de tabelas – permite verificar os efeitos que o redimensionamento
de colunas produzirá nas tabelas, além de tornar mais fácil a seleção de elementos de tabelas.
Interface de usuário – maximiza o espaço útil da “Área de Trabalho”, mostrando mais claramente o
contexto e o foco, tornando a interface mais amigável e lógica.
Start Page – permite acessar arquivos usados mais recentemente, criar novos arquivos e ter acesso
aos recursos do Dreamweaver.
Opção de salvar desktop – Permite reabrir o último documento alterado quando o programa for
reinicializado.
Suporte completo Unicode – Dreamweaver no Windows suporta todas as codificações de texto
suportadas pelo Internet Explorer, permitindo utilizar quase todas as fontes de qualquer línguas.
FTP seguro – Permite encripitar todas as transferências de arquivos e prevenir acesso não autorizado
a seus dados, arquivos, nomes e senhas.
Validação dinâmica de cross-browser – automaticamente verifica a compatibilidade do documento
atual com vários browsers, quando este é salvo, ou seja, deixa você seguro de não estar utilizando
tags ou construções CSS que os browsers de destino especificados não suportam.
18 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3
Aba CSS – mostra as regras de CSS aplicadas na seleção atual, tanto no modo visual quanto no
modo de código.
Inspetor de propriedades de texto baseado em CSS – lista todos os estilos disponíveis no texto e
possui uma pré-visualização do aspecto do texto após a aplicação do estilo.
Propriedades de página baseado em CSS – oferece mais controle sobre as propriedades de página,
como aparência de cabeçalhos e links, usando construções codificado em CSS.
Barra integrada de edição de imagens – permite que você faça edições de imagens básicas de
dentro do Dreamweaver, utilizando tecnologia Adobe Fireworks.
Inspetor de Tag aperfeiçoado – mostra uma lista das propriedades disponíveis para a seleção atual,
permitindo edição rápida e abrangente.
Edição de arquivo sem site – permite trabalhar diretamente em um servidor FTP ou RDS, sem criar
um Site Dreamweaver.
Comportamentos de servidor PHP – permite criação de conjuntos de páginas mestre/detalhe e de
páginas de autenticação de usuário.
Controle de formulários para ASP.NET aperfeiçoado – oferece novas e melhoras formas de
construir e manipular formulários de Web ASP.NET no modo visual.
1.6. Fechamento de Arquivos
Para fechar apenas o arquivo de trabalho, sem fechar o programa, proceda da seguinte forma:
Para fechar um arquivo:
1. No menu “File”, clique no comando “Close”.
ou,
1. Pressione, simultaneamente, as teclas CTRL + W.
www.komedi.com.br 19
O Ambiente Adobe Dreamweaver CS3
Aba CSS – mostra as regras de CSS aplicadas na seleção atual, tanto no modo visual quanto no
modo de código.
Inspetor de propriedades de texto baseado em CSS – lista todos os estilos disponíveis no texto e
possui uma pré-visualização do aspecto do texto após a aplicação do estilo.
Propriedades de página baseado em CSS – oferece mais controle sobre as propriedades de página,
como aparência de cabeçalhos e links, usando construções codificado em CSS.
Barra integrada de edição de imagens – permite que você faça edições de imagens básicas de
dentro do Dreamweaver, utilizando tecnologia Adobe Fireworks.
Inspetor de Tag aperfeiçoado – mostra uma lista das propriedades disponíveis para a seleção atual,
permitindo edição rápida e abrangente.
Edição de arquivo sem site – permite trabalhar diretamente em um servidor FTP ou RDS, sem criar
um Site Dreamweaver.
Comportamentos de servidor PHP – permite criação de conjuntos de páginas mestre/detalhe e de
páginas de autenticação de usuário.
Controle de formulários para ASP.NET aperfeiçoado – oferece novas e melhoras formas de
construir e manipular formulários de Web ASP.NET no modo visual.
1.6. Fechamento de Arquivos
Para fechar apenas o arquivo de trabalho, sem fechar o programa, proceda da seguinte forma:
Para fechar um arquivo:
1. No menu “File”, clique no comando “Close”.
ou,
1. Pressione, simultaneamente, as teclas CTRL + W.
www.komedi.com.br 19
Adobe Dreamweaver CS3 Adobe Dreamweaver CS3

1.7. A Finalização do Dreamweaver 1.7. A Finalização do Dreamweaver

Para encerrar o Dreamweaver: Para encerrar o Dreamweaver:
1. No menu “File”, clique no comando “Exit”. 1. No menu “File”, clique no comando “Exit”.
ou, ou,
1. Dê um clique no botão “Close” ( ), localizado no canto superior direito da barra 1. Dê um clique no botão “Close” ( ), localizado no canto superior direito da barra
de título. de título.
ou, ou,
1. Pressione, simultaneamente, as teclas CTRL + Q. 1. Pressione, simultaneamente, as teclas CTRL + Q.
ou, ou,
1. Pressione, simultaneamente, as teclas ALT + F4. 1. Pressione, simultaneamente, as teclas ALT + F4.

1.8. Exercícios 1.8. Exercícios

1. Quais as categorias da Barra “Insert”? Qual a função geral desta barra? 1. Quais as categorias da Barra “Insert”? Qual a função geral desta barra?

2. Quais os elementos que compõem a Barra de Ferramentas “Document”? Qual a 2. Quais os elementos que compõem a Barra de Ferramentas “Document”? Qual a
função geral desta barra? função geral desta barra?

3. Quais os elementos que compõem a Barra de Ferramentas “Standard”? Qual a 3. Quais os elementos que compõem a Barra de Ferramentas “Standard”? Qual a
função geral desta barra? função geral desta barra?

4. Qual a função principal do menu “File”? Cite alguns de seus comandos básicos. 4. Qual a função principal do menu “File”? Cite alguns de seus comandos básicos.

20 www.komedi.com.br 20 www.komedi.com.br
 O Ambiente Adobe Dreamweaver CS3 O Ambiente Adobe Dreamweaver CS3

5. Qual a função principal do menu “Text”? Cite alguns de seus comandos básicos. 5. Qual a função principal do menu “Text”? Cite alguns de seus comandos básicos.

6. Cite algumas das novas facilidades do programa que acredita serem mais 6. Cite algumas das novas facilidades do programa que acredita serem mais
interessantes e facilitadoras do trabalho de criação de páginas e sites. interessantes e facilitadoras do trabalho de criação de páginas e sites.

www.komedi.com.br 21 www.komedi.com.br 21