Dreamweaver CS5

Sites Profissionais

Camila Ceccatto da Silva

1ª Edição

Santa Cruz do Rio Pardo/S.P.

Editora Viena

2011

Copyright© 2011 - Viena Gráfica e Editora Ltda.

Todos os direitos reservados pela VIENA GRÁFICA E EDITORA. LEI 9.610/98 e atualizações.

Nenhuma parte desta publicação poderá ser reproduzida ou transmitida, sejam quais forem os meios empregados:

eletrônicos, mecânicos, fotográficos, gravações ou quaisquer outros.

Todas as marcas e imagens de hardware, software e outros, utilizados e/ou mencionados nesta obra, são propriedades

de seus respectivos fabricantes e/ou criadores.

Autora: Camila Ceccatto da Silva

Revisão Técnica: Rafael Uchida

Revisão Ortográfica: Graciele Alves de Mira

Capa: Luciane Mendonça

Diagramador: Rafael Uchida

Ilustrações: iStockphoto.com, stockxpert.com, Camila Ceccatto da Silva

Revisão de Diagramação: Karina de Oliveira

Supervisora Editorial: Karina de Oliveira

ISBN: 978-85-371-0239-8

1ª Edição - 08/2011 - SCRPardo / SP

Impresso no Brasil

Dados Internacionais de Catalogação na Publicação (CIP)(Câmara Brasileira do Livro, SP, Brasil)

Silva, Camila Ceccatto da Dreamweaver CS5 : sites profissionais / Camila Ceccatto da Silva. -- Santa Cruz do Rio Pardo, SP : Editora Viena, 2011. -- (Coleção premium)

ISBN 978-85-371-0239-8

1. Dreamweaver (Arquivo de computador) 2. Web sites - Criação 3. Web sites - Desenvolvimento I. Título. II. Série.

11-07264 CDD-005.369

Índices para catálogo sistemático:

1. Dreamweaver CS5 : Computadores : Programas : Processamento de dados 005.369

À Deus, que faz maravilhas na minha vida.

C.C.S.

“ Jamais se desespere em meio as sombrias aflições de sua vida, pois das nuvens mais

negras cai água límpida e fecunda.”

Provérbio Chinês

Prefácio

A utilização da Internet para fins comerciais tornou-se uma estratégia para

as empresas e diversos tipos de profissionais. Com a valorização desse meio de

comunicação, ter um endereço na Internet com informações sobre seus produtos

e serviços é fundamental. Por isso, a procura por profissionais especializados no

desenvolvimento e manutenção de sites aumentou.

Da elaboração do design até as constantes atualizações é preciso contar com o

trabalho, a criatividade e o conhecimento de desenvolvedores que utilizem programas

que ofereçam ferramentas capazes de criar páginas diferenciadas, atrativas e funcionais.

O Dreamweaver é um editor de códigos de várias linguagens voltado para a web,

por isso, é um programa muito utilizado para a criação e edição de páginas e aplicativos

para a Internet.

Com ele é possível desenvolver trabalhos com várias linguagens de programação

como HTML, ASP, Ajax, JavaServer Pages (JSP). Ele permite ainda a criação de

aplicativos com suporte a banco de dados, utilizando tecnologias como: PHP, ASP,

ASP.NET entre outras.

Este livro apresenta o conteúdo para a criação de páginas dinâmicas, utilizando o

Dreamweaver CS5. Entre os tópicos abordados estão: as novidades da versão CS5,

os tipos de arquivos, configuração de um site, gerenciamento de transferência de

arquivos, recursos visuais para layout, itens para conteúdo da página, arquivos SWF,

inserção de arquivo de som, utilização de links, páginas com CSS, banco de dados,

formulários, aplicação de efeitos, a utilização do software com os outros aplicativos

Adobe entre outros.

O material possui ainda exemplos ilustrados e de fácil compreensão e, um capítulo

com exercícios práticos para a fixação dos principais tópicos abordados.

Denise de Fátima Andrade

Jornalista - MTB 53227/SP

11S U M Á R I O

SumárioLista de Siglas e Abreviaturas ............................................................................ 19

1. Introdução ........................................................................................... 21

1.1. Novidades do Dreamweaver CS5 .......................................................................................... 23

1.2. Área de Trabalho .......................................................................................................................... 23

1.2.1. Tela de Boas-vindas .................................................................................................................... 24

1.2.2. Barras de Ferramentas ............................................................................................................... 25

1.2.2.1. Barra de Ferramentas Documento ........................................................................................ 25

1.2.2.2. Barra de Ferramentas Padrão .................................................................................................. 25

1.2.2.3. Barra de Ferramentas Processamento do Estilo ............................................................... 26

1.2.2.4. Barra de Ferramentas Navegação do Navegador ............................................................ 26

1.2.2.5. Barra de Ferramentas Codificação ........................................................................................ 26

1.2.3. Painel Propriedades .................................................................................................................... 27

1.2.4. Menus de Contexto .................................................................................................................... 28

1.2.5. Grupo de Painéis .......................................................................................................................... 28

1.3. Alternar entre Visualizações na Janela Documento ........................................................ 28

1.4. Painéis .............................................................................................................................................. 29

1.4.1. Painel Arquivos ............................................................................................................................. 30

1.5. Planejamento do Site ................................................................................................................. 30

1.5.1. Objetivo .......................................................................................................................................... 30

1.5.2. Compatibilidade com Navegadores ..................................................................................... 31

1.5.3. Estrutura ......................................................................................................................................... 31

1.6. HTML ................................................................................................................................................ 31

1.7. Tipos de Arquivos do Dreamweaver .................................................................................... 32

2. Site do Dreamweaver .......................................................................... 33

2.1. Configuração de um Site do Dreamweaver ....................................................................... 35

2.1.1. Estrutura de Pastas Locais e Remotas .................................................................................. 35

2.1.2. Configurar um Site Novo .......................................................................................................... 36

2.1.2.1. Guia Site .......................................................................................................................................... 37

2.1.2.2. Guia Servidores ............................................................................................................................ 37

2.1.3. Configurar um Servidor de Teste ........................................................................................... 40

2.1.4. Gerenciar e Editar Sites .............................................................................................................. 40

2.1.5. Remover um Site da Lista de Sites ........................................................................................ 41

2.2. Criar um Arquivo.......................................................................................................................... 42

2.2.1. Criar uma Página em Branco ................................................................................................... 42

2.2.2. Criar um Modelo em Branco ................................................................................................... 43

2.2.3. Criar Outros Tipos de Página ................................................................................................... 45

2.3. Abrir Documentos ....................................................................................................................... 46

2.4. Salvar Documento ...................................................................................................................... 46

2.5. Definindo Preferências do Documento Padrão ................................................................ 48

2.5.1. Definir o Tipo e a Codificação ................................................................................................. 48

2.5.2. Definir a Extensão de Arquivo Padrão ................................................................................ 49

2.6. Limpar Arquivos em HTML do Microsoft Word ................................................................ 49

12 D R E A M W E A V E R CS5

2.7. Gerenciando Transferência de Arquivos para Servidor ................................................. 51

2.7.1. Colocar Arquivos em um Servidor Remoto ....................................................................... 51

2.7.2. Obter Arquivos de um Servidor Remoto ............................................................................ 52

2.7.3. Exibir Informações sobre Transferência de Arquivo........................................................ 53

2.8. Visualizar Páginas ........................................................................................................................ 54

2.8.1. Visualizar Páginas no Dreamweaver ..................................................................................... 54

2.8.2. Visualizar Páginas em Navegadores ..................................................................................... 55

2.8.3. Visualizar Páginas em Dispositivos Móveis ........................................................................ 56

3. Layout de uma Página ......................................................................... 59

3.1. Recursos Visuais para Layout .................................................................................................. 61

3.1.1. Réguas ............................................................................................................................................. 61

3.1.2. Guias ................................................................................................................................................ 61

3.1.3. Grade .............................................................................................................................................. 64

3.2. Tabelas ............................................................................................................................................. 65

3.2.1. Inserir Tabela ................................................................................................................................. 66

3.2.2. Dividir e Mesclar Células ........................................................................................................... 66

3.2.3. Importar e Exportar Dados Tabulares .................................................................................. 67

3.2.4. Selecionar Elementos de Tabela ............................................................................................ 69

3.2.4.1. Copiar, Colar e Excluir Elementos de Tabela ...................................................................... 70

3.2.5. Propriedades da Tabela ............................................................................................................. 71

3.2.6. Formatação de Tabelas .............................................................................................................. 72

3.2.6.1. Redimensionamento de Tabelas, Colunas e Linhas ........................................................ 73

3.2.6.2. Inserir e Remover Linhas e Colunas ...................................................................................... 74

3.2.6.3. Preenchimento e Contorno ..................................................................................................... 75

3.2.7. Tabelas Aninhadas ...................................................................................................................... 76

3.2.8. Ordenação de Tabelas ............................................................................................................... 76

3.3. Quadros .......................................................................................................................................... 77

3.3.1. Criar Quadros ................................................................................................................................ 78

3.3.2. Seleção de Quadros .................................................................................................................... 80

3.3.3. Abrir Documentos em um Quadro ....................................................................................... 81

3.3.4. Salvar Arquivos de Quadro ...................................................................................................... 81

3.3.5. Propriedades de Quadro .......................................................................................................... 82

3.3.6. Controle do Conteúdo do Quadro com Links ................................................................... 83

3.3.7. Quadros Aninhados .................................................................................................................... 83

3.4. Trabalho com Ativos ................................................................................................................... 84

3.4.1. Painel Ativos .................................................................................................................................. 84

3.4.2. Inserir Ativo a um Documento ............................................................................................... 86

3.4.3. Aplicar Cor ao Texto com o Painel Ativos ............................................................................ 86

3.4.4. Aplicar URL com o Painel Ativos ............................................................................................ 86

3.4.5. Selecionar e Editar Ativos ......................................................................................................... 86

3.4.6. Usando Ativos em Outro Site .................................................................................................. 87

3.5. Biblioteca ........................................................................................................................................ 88

3.5.1. Inserir um Item na Biblioteca .................................................................................................. 88

3.5.2. Utilizando um Item de Biblioteca .......................................................................................... 89

3.5.3. Editar Itens de Biblioteca .......................................................................................................... 89

3.6. Aplicar Cor à Página .................................................................................................................... 91

13S U M Á R I O

4. Conteúdo das Páginas ......................................................................... 93

4.1. Painel Inserir .................................................................................................................................. 95

4.2. Texto ................................................................................................................................................. 96

4.2.1. Inserir Texto ................................................................................................................................... 96

4.2.1.1. Inserção de Caracteres Especiais ........................................................................................... 96

4.2.1.2. Importar Texto de Documentos do Microsoft Office ................................................... 97

4.2.2. Listas Numeradas e com Marcadores .................................................................................. 97

4.2.3. Localizar e Substituir Texto ...................................................................................................... 98

4.2.4. Verificação Ortográfica .............................................................................................................. 99

4.2.5. Formatação de Texto ................................................................................................................101

4.2.5.1. Formatação HTML no Painel Propriedades ......................................................................101

4.2.5.2. Alterar Cor do Texto ..................................................................................................................102

4.2.5.3. Alterar Alinhamento de Texto ...............................................................................................103

4.2.5.4. Aplicar Recuo ao Texto ............................................................................................................103

4.2.5.5. Aplicar Estilos de Fonte ...........................................................................................................103

4.2.6. Linhas Horizontais .....................................................................................................................104

4.2.7. Modificação das Combinações de Fontes ........................................................................104

4.2.8. Inserção de Datas ......................................................................................................................105

4.3. Imagem .........................................................................................................................................106

4.3.1. Inserir Imagem ...........................................................................................................................106

4.3.2. Formatar Imagem ......................................................................................................................107

4.3.2.1. Alinhar Imagem .........................................................................................................................108

4.3.2.2. Redimensionar Imagem ..........................................................................................................108

4.3.3. Alocador de Espaço de Imagem ..........................................................................................109

4.3.4. Editar Imagens no Dreamweaver ........................................................................................110

4.3.5. Editar Imagens em um Editor Externo ...............................................................................112

4.3.6. Imagem de Sobreposição ......................................................................................................113

4.3.7. Aplicar Comportamentos às Imagens ...............................................................................114

4.4. Inserindo Conteúdo de Mídia ...............................................................................................115

4.4.1. Arquivos SWF ..............................................................................................................................115

4.4.1.1. Inserir Arquivos SWF ................................................................................................................115

4.4.1.2. Visualizar Arquivos SWF ..........................................................................................................117

4.4.2. Filmes Shockwave .....................................................................................................................118

4.4.3. Vídeos de Outros Formatos ...................................................................................................118

4.4.4. Widgets da Web .........................................................................................................................118

4.4.5. Conteúdo de Plug-in do Netscape Navigator .................................................................119

4.4.6. Controle ActiveX ........................................................................................................................119

4.4.7. Applet Java ..................................................................................................................................120

4.5. Som.................................................................................................................................................120

4.5.1. Vincular um Arquivo de Áudio .............................................................................................121

4.5.2. Incorporar um Arquivo de Áudio .........................................................................................121

5. Hiperligações ....................................................................................123

5.1. Vinculação ....................................................................................................................................125

5.1.1. Adicionar Link ............................................................................................................................126

5.1.1.1. Link para um Local do Documento .....................................................................................127

5.1.1.2. Link de E-mail ..............................................................................................................................127

14 D R E A M W E A V E R CS5

5.1.1.3. Links Nulos e de Script ............................................................................................................128

5.1.2. Definir o Caminho Relativo ....................................................................................................128

5.1.3. Atualizar Links Automaticamente .......................................................................................129

5.1.4. Testar Links no Dreamweaver ...............................................................................................131

5.2. Menus de Salto ...........................................................................................................................131

5.2.1. Inserir Menu de Salto ...............................................................................................................131

5.2.2. Editar Menu de Salto ................................................................................................................132

5.3. Mapas de Imagem ....................................................................................................................133

5.3.1. Inserir Mapas de Imagem .......................................................................................................133

5.3.2. Editar Pontos Ativos do Mapa de Imagem .......................................................................134

5.4. Solução de Problemas de Links ............................................................................................135

5.4.1. Localizar Links Rompidos, Externos e Órfãos ..................................................................135

5.4.2. Corrigir Links Rompidos ..........................................................................................................136

6. Páginas com CSS ................................................................................139

6.1. Painel Estilo CSS .........................................................................................................................141

6.1.1. Painel Estilo CSS Modo Atual ................................................................................................142

6.1.2. Painel Estilo CSS Modo Tudo .................................................................................................143

6.2. Criar CSS ........................................................................................................................................143

6.2.1. Criar Novas Regras CSS ............................................................................................................143

6.2.2. Definir Propriedades CSS ........................................................................................................145

6.2.2.1. Definição das Propriedades de Tipo ...................................................................................145

6.2.2.2. Definição das Propriedades de Fundo ...............................................................................146

6.2.2.3. Definição das Propriedades de Bloco ................................................................................147

6.2.2.4. Definição das Propriedades de Caixa .................................................................................147

6.2.2.5. Definição das Propriedades de Borda ................................................................................148

6.2.2.6. Definição das Propriedades de Lista .................................................................................149

6.2.2.7. Definição das Propriedades de Posicionamento ...........................................................150

6.2.2.8. Definição das Propriedades de Extensão .........................................................................150

6.2.3. Vincular Folha de Estilos CSS Externa ................................................................................151

6.2.4. Exemplos de Folhas de Estilos do Dreamweaver ...........................................................152

6.3. Aplicar Estilos CSS .....................................................................................................................152

6.4. Editar Regra CSS .........................................................................................................................153

6.4.1. Editar Regra no Painel Estilos CSS .......................................................................................153

6.4.2. Inserir uma Propriedade a uma Regra ...............................................................................153

6.4.3. Editar Folha de Estilos CSS .....................................................................................................153

6.5. Movimentação de Regras CSS ..............................................................................................154

6.6. Layout das Páginas com CSS .................................................................................................155

6.6.1. Estrutura do Layout de Página CSS .....................................................................................155

6.6.2. Criar Página com Layout CSS ................................................................................................157

6.6.3. Folhas de Estilo em Tempo de Design ...............................................................................158

6.7. Tags Div .........................................................................................................................................159

6.7.1. Inserir Tags Div............................................................................................................................159

6.7.2. Editar Tags Div ............................................................................................................................160

6.7.3. Blocos de Layout CSS ...............................................................................................................161

6.8. Problemas com CSS em Navegadores ...............................................................................161

15S U M Á R I O

7. Sites Dinâmicos ..................................................................................163

7.1. Aplicativos da Web ....................................................................................................................165

7.1.1. Princípios Básicos .....................................................................................................................165

7.1.2. Como Funciona um Aplicativo de Web .............................................................................166

7.1.2.1. Processamento de Páginas Estáticas ..................................................................................166

7.1.2.2. Processamento de Páginas Dinâmicas ..............................................................................166

7.2. Recursos para o Desenvolvimento de Aplicativo Web ................................................167

7.2.1. Instalando o EasyPHP ..............................................................................................................167

7.2.2. Servidor Web ...............................................................................................................................171

7.2.3. Servidor de Aplicativo .............................................................................................................171

7.2.4. Banco de Dados .........................................................................................................................172

7.2.5. Criação de uma Pasta Raiz para o Aplicativo ...................................................................172

7.3. Acesso ao Banco de Dados com PHP .................................................................................172

7.3.1. Conectar a um Banco de Dados ...........................................................................................172

7.3.2. Editar ou Excluir uma Conexão de Banco de Dados .....................................................174

7.4. Criação de Página Dinâmica ..................................................................................................176

7.4.1. Criar a Página ..............................................................................................................................176

7.4.2. Criar um Conjunto de Registros ...........................................................................................176

7.4.3. Inserir Conteúdo Dinâmico à Página ..................................................................................179

7.4.4. Testar a Página Dinâmica ........................................................................................................181

8. Formulários ........................................................................................183

8.1. Coleta de Informações do Usuário ......................................................................................185

8.1.1. Parâmetros de Formulário em HTML .................................................................................185

8.1.2. Parâmetros de URL ....................................................................................................................186

8.2. Criando um Formulário ...........................................................................................................186

8.3. Objetos de Formulário .............................................................................................................187

8.3.1. Propriedades dos Objetos ......................................................................................................189

8.3.1.1. Propriedades do Objeto Campo de Texto ........................................................................189

8.3.1.2. Propriedades do Objeto Botão .............................................................................................190

8.3.1.3. Propriedades do Objeto Caixa de Seleção .......................................................................190

8.3.1.4. Propriedades do Objeto Botão de Opção ........................................................................190

8.3.1.5. Propriedades do Objeto Menu .............................................................................................191

8.3.1.6. Propriedades do Objeto Campo Oculto ...........................................................................191

8.3.2. Inserindo Objetos no Formulário ........................................................................................192

8.4. Objetos de Formulário Dinâmicos ......................................................................................192

8.4.1. Inserir um Menu Dinâmico ....................................................................................................193

8.4.2. Exibir Conteúdo Dinâmico em Campos de Texto .........................................................194

8.4.3. Configurar uma Caixa de Seleção Dinâmica ....................................................................195

8.4.4. Configurar um Botão de Opção Dinâmico .......................................................................198

8.5. Personalizar Objetos do Formulário ...................................................................................199

8.5.1. Comportamentos do JavaScript .........................................................................................200

8.5.2. Scripts Personalizados para Botões ....................................................................................200

8.6. Validar Dados do Formulário .................................................................................................201

9. Trabalho com Outros Aplicativos .....................................................203

9.1. Trabalho com o Fireworks ......................................................................................................205

16 D R E A M W E A V E R CS5

9.1.1. Inserir uma Imagem do Fireworks .......................................................................................205

9.1.2. Editar uma Imagem do Fireworks a Partir do Dreamweaver .....................................207

9.1.3. Editar os Menus Pop-up do Fireworks no Dreamweaver ............................................208

9.1.4. Inserir Código HTML do Fireworks no Dreamweaver ...................................................208

9.1.5. Atualizar o Código HTML do Fireworks Utilizado no Dreamweaver .......................209

9.2. Trabalho com o Photoshop ...................................................................................................209

9.2.1. Objetos Inteligentes .................................................................................................................210

9.2.1.1. Criar Objetos Inteligentes.......................................................................................................211

9.2.1.2. Atualizar um Objeto Inteligente ..........................................................................................212

9.2.1.3. Redimensionar um Objeto Inteligente ..............................................................................213

9.2.1.4. Editar o Arquivo Original ........................................................................................................213

9.2.2. Imagens Coladas .......................................................................................................................213

9.2.2.1. Copiar e Colar uma Seleção do Photoshop .....................................................................213

9.2.2.2. Editar Imagens Coladas ...........................................................................................................214

9.2.3. Opções da Caixa de Diálogo Visualização da Imagem ................................................215

9.3. Trabalho com o Flash e Dreamweaver ...............................................................................216

9.3.1. Edição de um Arquivo SWF do Dreamweaver no Flash ..............................................216

10. Spry .....................................................................................................219

10.1. Widgets do Spry .........................................................................................................................221

10.1.1. Widget Barra de Menus ...........................................................................................................221

10.1.1.1. Inserir o Widget Barra de Menus ..........................................................................................222

10.1.1.2. Editar o Widget Barra de Menus...........................................................................................223

10.1.1.3. Personalizar o Widget Barra de Menus ..............................................................................224

10.1.2. Widget Painel Flexível ..............................................................................................................226

10.1.2.1. Inserir Widget Painel Flexível ...............................................................................................227

10.1.2.2. Editar Widget Painel Flexível .................................................................................................227

10.1.2.3. Personalizar o Widget Painel Flexível .................................................................................227

10.1.3. Widget Painéis com Aba .........................................................................................................228

10.1.3.1. Inserir Widget Painéis com Aba ............................................................................................229

10.1.3.2. Editar o Widget Painéis com Aba .........................................................................................229

10.1.3.3. Personalizar o Widget Painéis com Aba ............................................................................230

10.1.4. Widget Grupo de Botões de Opção de Validação .........................................................231

10.1.4.1. Inserir Widget Grupo de Botões de Opção de Validação ............................................232

10.1.4.2. Editar o Widget Grupo de Botões de Opção de Validação .........................................233

10.1.4.3. Personalizar o Widget Grupo de Botões de Opção de Validação .............................233

10.1.5. Widget Campo de Texto de Validação ...............................................................................234

10.1.5.1. Inserir Widget Campo de Texto de Validação ..................................................................235

10.1.5.2. Editar o Widget Campo de Texto de Validação ...............................................................235

10.1.5.3. Personalizar o Widget Campo de Texto de Validação ..................................................237

10.1.6. Widget Área de Texto de Validação ....................................................................................238

10.1.6.1. Inserir Widget Área de Texto de Validação .......................................................................239

10.1.6.2. Editar o Widget Área de Texto de Validação ....................................................................239

10.1.6.3. Personalizar o Widget Área de Texto de Validação ........................................................241

10.1.7. Widget Seleção de Validação ................................................................................................242

10.1.7.1. Inserir Widget Seleção de Validação ...................................................................................243

10.1.7.2. Editar o Widget Seleção de Validação ................................................................................244

17S U M Á R I O

10.1.7.3. Personalizar o Widget Seleção de Validação ...................................................................244

10.1.8. Widget Caixa de Seleção de Validação ..............................................................................245

10.1.8.1. Inserir Widget Caixa de Seleção de Validação .................................................................246

10.1.8.2. Editar o Widget Caixa de Seleção de Validação ..............................................................246

10.1.8.3. Personalizar o Widget Caixa de Seleção de Validação .................................................247

10.1.9. Widget Senha de Validação ...................................................................................................248

10.1.9.1. Inserir Widget Senha de Validação ......................................................................................248

10.1.9.2. Editar o Widget Senha de Validação ...................................................................................249

10.1.9.3. Personalizar o Widget Senha de Validação ......................................................................251

10.1.10. Widget Confirmação de Validação ......................................................................................252

10.1.10.1. Inserir Widget Confirmação de Validação .........................................................................252

10.1.10.2. Editar o Widget Confirmação de Validação ......................................................................253

10.1.10.3. Personalizar o Widget Confirmação de Validação .........................................................254

10.2. Exibição de Dados com o Spry .............................................................................................255

10.2.1. Criar um Conjunto de Dados do Spry ................................................................................255

10.2.2. Criar uma Região do Spry .......................................................................................................258

10.2.2.1. Criar uma Região Repetitiva do Spry .................................................................................259

10.2.2.2. Criar uma Região de Listas de Repetição do Spry .........................................................261

10.3. Efeitos do Spry ............................................................................................................................261

10.3.1. Efeito Aparecer/Desaparecer ................................................................................................262

10.3.2. Efeito Veneziana .........................................................................................................................263

10.3.3. Efeito Aumentar/Diminuir ......................................................................................................264

10.3.4. Efeito Realce ................................................................................................................................264

10.3.5. Efeito Espalhar ............................................................................................................................265

10.3.6. Efeito Deslizar .............................................................................................................................266

10.3.7. Efeito Apertar ..............................................................................................................................266

10.3.8. Efeito Extra ...................................................................................................................................267

10.3.9 Excluir um Efeito ........................................................................................................................267

11. Exercícios ............................................................................................269

11.1. Exercício 1 ....................................................................................................................................271

11.2. Exercício 2 ....................................................................................................................................271

11.3. Exercício 3 ....................................................................................................................................274

11.4. Exercício 4 ....................................................................................................................................275

11.5. Exercício 5 ....................................................................................................................................276

Referências ........................................................................................................283

Glossário............................................................................................................285

18 D R E A M W E A V E R CS5

L I S T A D E S I G L A S E A B R E V I A T U R A S 19

Lista de Siglas e Abreviaturas

20 D R E A M W E A V E R CS5

1Introdução

Dre

am

we

ave

r C

S5

1.1. Novidades do Dreamweaver CS5

1.2. Área de Trabalho

1.2.1. Tela de Boas-vindas

1.2.2. Barras de Ferramentas

1.2.3. Painel Propriedades

1.2.4. Menus de Contexto

1.2.5. Grupo de Painéis

1.3. Alternar entre Visualizações na Janela Documento

1.4. Painéis

1.4.1. Painel Arquivos

1.5. Planejamento do Site

1.5.1. Objetivo

1.5.2. Compatibilidade com Navegadores

1.5.3. Estrutura

1.6. HTML

1.7. Tipos de Arquivos do Dreamweaver

23I N T R O D U Ç Ã O

1. Introdução O Adobe Dreamweaver CS5 é um editor de páginas da Web utilizado para

desenhar  páginas com aspecto profissional. Esse software possui muitos recursos e

suporta várias tecnologias, como folhas de estilos, javascript, arquivos multimídia,

entre outros.

Com o Dreamweaver os desenvolvedores de sites podem criar páginas de modo

visual ou por meio de código, o que torna o trabalho de criação mais fácil e eficiente.

1.1. Novidades do Dreamweaver CS5

A versão CS5 foi lançada em 2010 e traz alguns recursos novos. Acompanhe a

seguir os principais recursos inseridos:

• Adobe BrowserLab: O Adobe BrowserLab é integrado com o novo serviço

on-line, o CS Live. Agora o BrowserLab permite testar rapidamente a

compatibilidade de vários navegadores.

• Integração do Business Catalyst: O Business Catalyst é um aplicativo de

hospedagem que possui uma plataforma central para desenvolvedores Web.

Esse aplicativo trabalha em conjunto com o Dreamweaver e possibilita

desenvolver desde sites simples até complexas lojas on-line.

• Desativar/Ativar CSS: Esse recurso possibilita desativar ou reativar

propriedades do CSS por meio do painel Estilos CSS.

• Inspeção do CSS: O modo inspeção possibilita exibir visualmente as

propriedades de modelo de caixa do CSS com detalhes, sem leitura de código.

• Layouts iniciais de CSS: Há layouts iniciais de CSS simplificados e atuais.

• Arquivos rel. dinamicamente: Esse recurso permite visualizar os arquivos

relacionados de páginas dinâmicas na barra de ferramentas Arquivos relacionados, ou seja, permite visualizar as inclusões dinâmicas utilizadas

para criar código de tempo de execução.

• Navegação de vis. Dinâmica: Esse recurso ativa links para interagir com

dados dinâmicos. Além disso, permite digitar URL para inspecionar páginas

localizadas em servidor dinâmico da Web e verificar se elas estão em um dos

sites locais especificados.

• Dicas de código de classe personalizada PHP: Esse recurso exibe dicas

com a sintaxe de funções objetos e constantes de PHP para ajudar a digitar o

código.

• Configuração de sites simplificada: A caixa de diálogo Configuração de sites possibilita configurar um site no Dreamweaver de maneira mais fácil.

• Aprimoramentos de suporte do Subversion: O suporte para o Subversion

foi melhorado possibilitando mover, copiar e excluir arquivos localmente e

sincronizar as alterações com seu repositório remoto.

1.2. Área de Trabalho

A área de trabalho do Dreamweaver CS5 possui um layout integrado em uma

janela. Essa janela reúne todos os painéis e janelas do aplicativo.

24 D R E A M W E A V E R CS5

1 2 3 4 5

6 7 8

1 - Barra de aplicativos.2 - Barra de ferramentas de documento.3 - Alternador da área de trabalho.4 - Grupos de painéis.

5 - CS Live.6 - Seletor de tags.7 - Painel Propriedades.8 - Janela do documento.

A área de trabalho é composta pela janela de documento, painéis e muitos outros

recursos utilizados para criar páginas Web.

1.2.1. Tela de Boas-vindas

A tela de boas-vindas é exibida ao iniciar o Dreamweaver CS5. Essa tela possui

opções para criar um novo documento ou abrir um documento utilizado recentemente.

25I N T R O D U Ç Ã O

Essa tela também disponibiliza opções para conhecer mais sobre o Dreamweaver

assistindo a um tutorial ou fazendo um tour pelo produto.

1.2.2. Barras de Ferramentas

O Dreamweaver CS5 possui várias barras de ferramentas. Cada uma apresenta

opções para uma situação específica.

As barras de ferramentas Documento e Padrão são utilizadas em operações com

documentos e edição padrão. Já a barra de ferramentas Codificação é utilizada

quando se trabalha com código sendo possível inserir rapidamente algumas operações

de codificação e a barra de ferramentas Processamento do estilo é responsável por

exibir a página da maneira como seria visualizada em tipos de mídia diferentes.

As barras de ferramentas podem ser exibidas ou ocultadas conforme a necessidade.

Acompanhe a seguir como exibir as barras de ferramentas:

1. Clique no menu Exibir;

2. Na lista de opções exibidas clique na opção Barras de ferramentas;

3. Selecione a barra de ferramentas que deseja exibir na área de trabalho, ou

desmarque aquela que deseja ocultar.

1.2.2.1. Barra de Ferramentas Documento

A barra de ferramentas Documento possui botões que alternam entre os diferentes

modos de visualizações do documento. Além disso, essa barra também possui alguns

comandos comuns.

1 2 3 4 5 6 7 8 9 10 11 12

1 - Mostrar Visualização de código.2 - Mostrar Visualização de código e de design.3 - Mostrar Visualização de design.4 - Mostra o código-fonte da visualização dinâmica na visualização de código.5 - Verificar compatibilidade de navegador.6 - Alternar visualização de design para visualização dinâmica.

7 - Ativar a visualização dinâmica e o modo de inspeção.8 - Visualizar/depurar no navegador.9 - Auxílios visuais.10 - Atualizar Visualização de design.11 - Título do documento.12 - Gerenciamento de arquivos.

1.2.2.2. Barra de Ferramentas Padrão

Essa barra de ferramentas possui botões com funções dos comandos presentes

nos menus Arquivo e Editar. Deve-se utilizar esses botões da mesma forma como

utilizaria os comandos do menu equivalente.

1 2 3 4 5 6 7 8 9 10 11

1 - Novo.2 - Abrir.3 - Navegar no Bridge4 - Salvar.5 - Salvar tudo.

6 - Imprimir código.7 - Recortar.8 - Copiar.9 - Colar.10 - Desfazer.11 - Refazer.