Adobe Dreamweaver CS3

Visualizações: 491
Classificação: (0)

Este livro ensina a utilizar todos os novos recursos do Dreamweaver CS3, o mais importante programa de criação para a Web. Cada capítulo é uma lição. O leitor segue os passos indicados no texto praticando nos arquivos contidos no CD-ROM que acompanha o livro. Ele pode ler o livro do começo ao fim ou escolher as lições que lhe interessam. Este livro, totalmente colorido, faz parte da série Classroom in a Book, líder de vendas em livros de treinamento de software

FORMATOS DISPONíVEIS

Impresso
eBook

14 capítulos

Formato Comprar item avulso Adicionar à Pasta

1. Introdução Rápida ao Dreamweaver CS3

PDF Criptografado

LIÇÃO 1 21

Introdução Rápida ao Dreamweaver CS3

2 Posicione o cursor no início do espaço reservado de texto Main Content e arraste-o

ao longo da frase. Com o texto selecionado, insira a frase a seguir: Where you are royalty. Utilize o método de clicar e arrastar para selecionar uma parte qualquer do texto no

Dreamweaver.

3 Escolha File > Save.

Insira texto

O texto do parágrafo é tão fácil de atualizar quanto o texto do título. Além de inserir texto manualmente, o Dreamweaver fornece um poderoso mecanismo de colar texto copiado a partir de outras fontes, como produtos do Microsoft Office, mantendo a formatação conforme desejado.

1 Posicione o cursor na frente do título de nível H2 do espaço reservado e arraste-o até o

final do parágrafo seguinte para que tanto o título como o parágrafo sejam selecionados.

Pressione Delete (Windows) ou Forward Delete (MacOS) para remover a seleção.

2 Com o Explorer (Windows) ou o Finder (MacOS), navegue até os arquivos do CD copia-

dos para seu sistema e abra lesson01 > vacation.rtf.

 

2. Personalizando seu Espaço de Trabalho

PDF Criptografado

46 ADOBE DREAMWEAVER CS3

Classroom in a Book

A Tag Selector é muito útil para identificar exatamente o que você quer modificar, e representa precisamente a natureza hierárquica da HTML, em que uma tag é aninhada dentro de uma outra.

Embora a Tag Selector seja excelente para selecionar uma seção específica do código, a barra de status oferece outro recurso para uma abordagem mais visual: a ferramenta Zoom.

4 Na barra de status, clique na ferramenta Zoom ( ). Com o cursor de lupa, clique uma vez na imagem superior na coluna esquerda. Clique outra vez para ampliar mais a página.

A ferramenta Zoom aumenta a ampliação da página de 100% a 150% com o primeiro clique. Com cada clique subseqüente, a ampliação aumenta de acordo com os valores na lista

Set Magnification, também localizada na barra de Status.

5 Pressione Alt (Windows) ou Opt (MacOS) e clique na imagem novamente para reduzir a

ampliação; o sinal de adição do cursor na ferramenta Zoom muda para um sinal de subtração. Observe que a entrada na lista Set Magnification muda com cada clique e agora mostra

 

3. Aplicando Folhas de Estilo em Cascata

PDF Criptografado

3 Aplicando Folhas de

Estilo em Cascata

Nesta lição, você aprenderá a trabalhar com as Cascading Style Sheets

(CSS) no Dreamweaver e a fazer o seguinte:

• Definir um site Dreamweaver

• Anexar uma folha de estilo externa

• Criar uma nova regra de estilo CSS

• Aplicar um estilo a sua página

• Alterar as propriedades CSS existentes

• Criar uma folha de estilo de impressão

Esta lição levará aproximadamente 90 minutos para ser concluída. Certifique-se de você copiou Lessons/Lesson03 do CD do Adobe Dreamweaver

CS3, Classroom in a Book para sua unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Defina um site do Dreamweaver

Iniciando com este capítulo, as lições restantes neste livro trabalham dentro de um site Dreamweaver. No Dreamweaver, você trabalha com um site local localizado em uma pasta no seu sistema e com um site remoto, armazenado no computador do seu provedor de espaço Web. Os dois sites são, basicamente, espelhos um do outro na sua estrutura de pastas e de arquivos. Neste exercício, você irá configurar seu site local.

 

4. Trabalhando com Texto

PDF Criptografado

4 Trabalhando com Texto

Nesta lição, você aprenderá a trabalhar com títulos, parágrafos e outros elementos de texto no Dreamweaver e mais o seguinte:

• Inserir texto de título e de parágrafo

• Incluir texto a partir de uma outra fonte

• Inserir listas numeradas e listas com marcadores

• Verificar a ortografia do seu documento

• Localizar e substituir texto

• Inserir e modificar tabelas

• Importar dados tabulares

Esta lição levará aproximadamente 90 minutos para ser concluída. Certifique-se de que você copiou Lessons/Lesson04 do CD do Adobe Dreamweaver CS3, Classroom in a Book para sua unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Visualize seu arquivo final

Para ter uma idéia do arquivo em que você trabalhará na primeira parte desta lição, vamos visualizar a página final no navegador.

1 Inicie o Adobe Dreamweaver CS3.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB

 

5. Design com Imagens

PDF Criptografado

LIÇÃO 5

Design com Imagens

3 Na categoria Common da barra Insert, clique em Image ( ).

Se você não vir o ícone Image na barra Insert, clique na seta que aponta para baixo ao lado do botão do menu Images e selecione Image. Como ocorre com os outros botões de menu na barra Insert, o botão do menu Images exibe o último objeto escolhido como a primeira entrada.

4 Quando a caixa de diálogo Select Image Source aparecer, navegue até a pasta lesson05 >

images e selecione boat. Clique em OK quando tiver terminado.

Você também pode dar um clique duplo em um placeholder para abrir a caixa de diálogo

Select Image Source e trocá-lo por um elemento gráfico real.

Certifique-se de que suas páginas estão acessíveis aos visitantes do site utilizando leitores de tela ou outras tecnologias de auxílio visual; uma boa idéia é sempre adicionar texto apropriado alt para qualquer imagem inserida.

5 Se necessário, escolha Window > Properties para exibir o inspetor de propriedades.

6 Com a imagem do barco ainda selecionada, digite Red rowboat by the side of a river no

 

6. Inserindo Links

PDF Criptografado

6 Inserindo Links

Nesta lição, você aprenderá a aplicar diferentes tipos de links a vários elementos de página com as seguintes ações:

• Aplicar um link de texto a uma página dentro do mesmo site

• Utilizar uma imagem como origem de um link

• Criar um link para uma página em outro site Web

• Estabelecer um link de email

• Criar um link para uma parte específica de uma página

Esta lição levará aproximadamente 60 minutos para ser concluída. Certifique-se de que você copiou Lessons/Lesson06 do CD do Adobe Dreamweaver CS3, Classroom in a Book para sua unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Visualize seu arquivo final

Para ter uma idéia do arquivo em que você trabalhará na primeira parte desta lição, vamos visualizar a página final no navegador.

1 Inicie o Adobe Dreamweaver CS3.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB

na lista de sites.

 

7. Elaborando Layouts de Página

PDF Criptografado

7 Elaborando Layouts de Página

Nesta lição, você aprenderá a criar e a trabalhar com layouts de página baseados em CSS com o seguinte:

• Definir as regras de CSS para áreas de layout

• Aplicar as regras de CSS a tags

• Adicionar texto e placeholders à página

• Exportar as regras de CSS para uma folha de estilo externa

• Utilizar réguas e guias para fazer o ajuste fino de um layout

Esta lição levará aproximadamente 120 minutos para ser concluída. Certifique-se de que você copiou Lessons/Lesson07 do CD do Adobe Dreamweaver CS3, Classroom in a Book para sua unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Visualize seu arquivo final

Para ter uma idéia do arquivo em que você trabalhará na primeira parte desta lição, vamos visualizar a página final no navegador.

1 Inicie o Adobe Dreamweaver CS3.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB

na lista de sites.

 

8. Criando Páginas Interativas

PDF Criptografado

8 Criando Páginas

Interativas

Nesta lição, você aprenderá a tornar suas páginas Web interativas fazendo o seguinte:

• Entender os comportamentos do Dreamweaver

• Aplicar um comportamento para trocar a origem de uma imagem

• Modificar um comportamento existente

• Abrir uma janela de navegador interativamente

• Definir áreas a exibir e a ocultar sob o controle do usuário

• Alterar o evento para um comportamento

Esta lição levará aproximadamente 90 minutos para ser concluída. Certifique-se de que você copiou Lessons/Lesson08 do CD do Adobe Dreamweaver CS3, Classroom in a Book para sua unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Entenda os comportamentos do Dreamweaver

Um comportamento do Dreamweaver é o código JavaScript que realiza uma ação, como abrir uma janela de navegador, quando acontece um evento particular, por exemplo, um clique de mouse. Aplicar um comportamento é um processo de três passos:

 

9. Integrando Ajax com Spry

PDF Criptografado

212 ADOBE DREAMWEAVER CS3

Classroom in a Book

O termo-chave no acrônimo Ajax é assíncrono, que literalmente significa “não ao mesmo tempo”. Em geral, a visualização de páginas na Web é um processo muito linear. Por exemplo, digamos que você esteja revisando informações sobre um site de uma determinada empresa. Eis o que acontece em um site padrão:

1 Você visita uma página com seu navegador.

2 A página inicial é enviada a partir de um servidor Web remoto.

3 Seu navegador renderiza a página.

4 Você clica em um link na página para aprender mais.

5 O navegador solicita uma nova página com informações adicionais do servidor da Web

remoto.

6 O servidor da Web envia a nova página.

7 Seu navegador carrega a página contendo os novos detalhes e exibe uma página inteira-

mente nova.

Eis como a mesma operação funcionaria com uma página baseada em Ajax:

1 Você visita uma página com seu navegador.

2 A página inicial é enviada a partir de um servidor Web remoto.

3 Seu navegador renderiza a página e, simultaneamente, carrega todos os dados relaciona-

 

10. Construindo Formulários

PDF Criptografado

10 Construindo Formulários

Nesta lição, você aprenderá a criar formulários para sua página e a fazer o seguinte:

• Inserir um formulário

• Incluir campos de texto

• Trabalhar com componentes de formulário Spry

• Utilizar botões de opção

• Aplicar caixas de seleção

• Inserir listas

• Adicionar botões de formulário

• Incorporar conjuntos de campos e legendas

• Formatar formulários com estilos de CSS

Esta lição levará aproximadamente 120 minutos para ser concluída. Certifique-se de você copiou Lessons/Lesson10 do CD do Adobe Dreamweaver

CS3, Classroom in a Book para sua unidade de disco antes de iniciar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Visualize seu arquivo final

Para ter uma idéia do arquivo em que você trabalhará na primeira parte desta lição, vamos visualizar a página final no navegador.

1 Inicie o Adobe Dreamweaver CS3.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB

 

11. Adicionando Multimídia

PDF Criptografado

LIÇÃO 11 275

Adicionando Multimídia

8 Na coluna inferior direita, clique em Play para visualizar a apresentação de slides incor-

porada. Note a mudança nas legendas e transições.

9 Quando terminar, feche todas as janelas de navegador e retorne ao Dreamweaver.

Como você pode ver, o Dreamweaver oferece um amplo espectro de oportunidades de multimídia diferentes. Vamos começar adicionando um filme de Flash animado à página.

Insira um filme de Flash na Web

O Adobe Flash é multimídia por definição. Desde sua modesta origem como um programa de animação, o Flash desenvolveu-se rapidamente para tratar anúncios publicitários de alto nível, interfaces com o usuário e até mesmo vídeo. Como convém a essa ferramenta de criação altamente versátil, a ferramenta necessária para reproduzir os arquivos SWF de saída, o

Flash Player, é o plugin mais amplamente distribuído entre os navegadores.

O Dreamweaver fornece integração transparente com filmes de Flash. Facilmente inseridos, os arquivos SWF são instantaneamente visualizáveis na janela do documento. Além disso, propriedades-chave, como Autoplay e Loop, são rapidamente modificadas pelo inspetor de propriedades. Se o arquivo-fonte do filme de Flash estiver disponível, você pode até enviar o

 

12. Publicando para a Web

PDF Criptografado

12 Publicando para a Web

Nesta lição, você aprenderá a publicar seu site Web na Internet e a fazer o seguinte:

• Definir um site remoto

• Verificar a compatibilidade de navegador de suas páginas

• Validar páginas

• Carregar arquivos na Web

• Descarregar páginas da Web

Esta lição levará aproximadamente 90 minutos para ser concluída. Antes de começar, certifique-se de que copiou Lessons/Lesson12 do CD do Adobe Dreamweaver CS3, Classroom in a Book para sua unidade de disco. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Defina um site remoto

O Dreamweaver é baseado em um sistema de dois sites. Um site é configurado em uma pasta em seu computador e é conhecido como site local.

Todo o trabalho nas lições anteriores acontecia no seu site local. O outro site é estabelecido em uma pasta em um servidor Web em outro computador: esse é o site remoto. Em geral, o site remoto está conectado à Internet e está disponível publicamente.

 

13. Aumentando a Produtividade com Modelos

PDF Criptografado

13 Aumentando a

Produtividade com Modelos

Nesta lição, você aprenderá a utilizar modelos do Dreamweaver e fazer o seguinte:

• Criar um código de modelo

• Inserir regiões editáveis

• Produzir páginas filhas

• Adicionar regiões opcionais

• Atualizar modelos e páginas filhas

Esta lição levará aproximadamente 60 minutos para ser completada.

Certifique-se de que você copiou Lessons/Lesson13 do CD do Adobe do

Dreamweaver CS3, Classroom in a Book para a unidade de disco antes de começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais.

Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Crie um modelo

Um modelo do Dreamweaver é um tipo de página mestra da qual irão derivar páginas filhas. Você pode criar um modelo a partir de uma página em branco, mas é muito mais prático – e comum – converter uma página existente em um modelo. Ainda melhor, isso é extremamente fácil, conforme você aprenderá neste exercício.

1 Inicie o Adobe Dreamweaver CS3.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB

 

14. Trabalhando com Código

PDF Criptografado

14 Trabalhando com Código

Nesta lição, você aprenderá a trabalhar com o código de uma página Web e aprenderá a:

• Selecionar código

• Recolher seções do código

• Adicionar novo código

• Comentar o código

Esta lição levará aproximadamente 60 minutos para ser completada. Certifique-se de você copiou Lessons/Lesson14 do CD do Adobe Dreamweaver

CS3, Classroom in a Book para a unidade de disco antes de iniciar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.

Selecione o código

Antes de poder mover, copiar, excluir, ou seja, manipular qualquer bloco de código, você precisará certificar-se de que o selecionou corretamente.

Um erro ao selecionar e recortar um tag, por exemplo, poderia deixar caracteres estranhos que impediriam que a página fosse exibida corretamente no navegador. Neste exercício, você irá explorar os vários métodos para selecionar código na visualização Code do Dreamweaver.

1 Inicie o Dreamweaver.

 

Detalhes do Produto

Livro Impresso
Book
Capítulos

Formato
PDF
Criptografado
Sim
SKU
B000000042618
ISBN
9788577802203
Tamanho do arquivo
19 MB
Impressão
Desabilitada
Cópia
Desabilitada
Vocalização de texto
Não
Formato
PDF
Criptografado
Sim
Impressão
Desabilitada
Cópia
Desabilitada
Vocalização de texto
Não
SKU
Em metadados
ISBN
Em metadados
Tamanho do arquivo
Em metadados