Adobe Dreamweaver CS4: classroom in a book, guia oficial de treinamento

Autor(es): Adobe Creative Team
Visualizações: 488
Classificação: (0)

11 capítulos

Formato Comprar item avulso Adicionar à Pasta

1. INTRODUÇÃO

PDF Criptografado

18 ADOBE DREAMWEAVER CS4

Classroom in a Book

Defina um site do Dreamweaver

As lições deste livro funcionam dentro de um site do Dreamweaver. No Dreamweaver, você trabalha com um site local armazenado em uma pasta de seu disco rígido. Quando estiver pronto para publicar seu site (ver a Lição 11, “Publicando para a Web”), você também vai trabalhar com um site remoto, armazenado no computador do seu Web host. As estruturas de pastas e os arquivos dos dois sites são essencialmente espelhos um do outro.

Primeiro, configure seu site local.

1 Abra o Adobe Dreamweaver CS4. Se você ainda não abriu o Dreamweaver

CS4, é recomendável preencher a tela de registro.

2 Escolha Site > New Site e a caixa de diálogo Site Definition “Unnamed Site

1” aparece. Se a visualização Advanced não estiver selecionada, clique em

Advanced.

A visualização Basic da caixa de diálogo Site Definition, embora menos técnica, exige a inclusão de informações adicionais preliminares. Escolhendo a visualização Advanced, você inicialmente só precisa configurar uma parte da definição do site.

 

2. TRABALHANDO COM CASCADING STYLE SHEETS

PDF Criptografado

LIÇÃO 2

Trabalhando com Cascading Style Sheets

49

Anexe uma folha de estilo externa

No Web design contemporâneo, considera-se uma prática recomendada manter a maioria dos seus estilos CSS em folhas de estilo externas. Tipicamente, todas as páginas de um site devem estar vinculadas a folhas de estilo externas apropriadas. Isso permite que seja feita uma única modificação no estilo – como alterar a cor de uma tag

– que afetará o site inteiro. O Dreamweaver fornece uma maneira muito simples e direta de anexar uma folha de estilo externa a páginas

Web.

1 Se o painel Files não estiver visível, escolha Window > Files.

2 No painel Files, dê um clique duplo em lesson03 > about-start.html para abrir a página na janela de documento.

Como você pode ver, essa página contém conteúdo básico – imagens, títulos e parágrafos – mas nenhum layout ou estilo real. Para este exercício, o layout inteiro e uma boa parte dos estilos foram criados e armazenados anteriormente em uma folha de estilo externa. Antes de começar a trabalhar na página, crie uma nova versão dela.

 

3. TRABALHANDO COM TEXTOS, LISTAS E TABELAS

PDF Criptografado

78 ADOBE DREAMWEAVER CS4

Classroom in a Book

5 Escolha File > Edit, ou pressione Control+C (Windows) ou Command+C

(Mac), para copiar a seleção.

6 Na parte superior da janela de documento, localize a aba do arquivo santorini.html e clique nela para voltar à página Web.

7 Localize e selecione a frase Add text here localizada na página logo após a primeira imagem, mas antes do segundo título.

8 Escolha File > Paste, ou pressione Control+V (Windows) ou Command+V

(Mac), para colar o novo texto nessa localização.

● Nota: O texto colado foi formatado como parágrafos no

Dreamweaver porque o arquivo santorini. txt utilizava dois retornos de parágrafo no fim de cada seção. Se o arquivo santorini.txt original só contivesse um retorno de parágrafo no final de cada seção, a formatação padrão do Dreamweaver teria inserido uma quebra de linha
no fim de cada linha.

Por padrão, o texto colado é inicialmente formatado com as tags

, ou como parágrafos. Observe que os parágrafos são estilizados com as opções de fonte já presentes na folha de estilo. Você pode atribuir facilmente um formato básico – como uma tag

, ou

– a qualquer bloco de texto utilizando o painel Properties.

 

4. TRABALHANDO COM IMAGENS

PDF Criptografado

102 ADOBE DREAMWEAVER CS4

Classroom in a Book

Visualize o arquivo final

Para ter uma ideia do arquivo que será utilizado nesta lição, vamos visualizar a página concluída no navegador.

1 Abra o Adobe Dreamweaver CS4.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB na lista de sites.

3 No painel Files, expanda a pasta lesson04.

4 Selecione o arquivo naxos-finished.html e pressione F12 (Windows) ou

Option+F12 (Mac) para visualizar a página em seu navegador principal.

A página inclui várias imagens, tanto de primeiro plano como de fundo e também uma imagem Photoshop Smart Object.

5 Feche seu navegador e retorne ao Dreamweaver.

Insira uma imagem

Imagens são componentes cruciais de qualquer página Web. O painel Insert tem alguns botões que tornam a inserção de uma imagem rápida e fácil. Você também pode adicionar alocadores de espaço de imagem ou substituir alocadores de espaço de imagem por imagens, como no primeiro exercício.

1 No painel Files, expanda a pasta lesson04 e dê um clique duplo no arquivo naxos-start.html para abrir o arquivo.

 

5. TRABALHANDO COM NAVEGAÇÃO

PDF Criptografado

120 ADOBE DREAMWEAVER CS4

Classroom in a Book

Visualize seu arquivo final

Para ver a versão final do arquivo que será utilizado na primeira parte desta lição, vamos visualizar a página concluída no navegador.

1 Abra o Adobe Dreamweaver CS4.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB na lista de sites.

3 No painel Files, expanda a pasta lesson05.

4 Selecione o arquivo about-finished.html e pressione F12 (Windows) ou

Option+F12 (Mac).

5 Quando a página abrir no seu navegador principal, clique em Greece na barra de navegação da nota lateral. Quando o menu pop-up abrir, clique em

Santorini. Clique no botão Back do navegador para voltar a about-finished. html. Clique nos nomes nos painéis com abas para ver as informações sobre as pessoas. Se você tiver um cliente de correio instalado em seu sistema, clique em um dos links de email para os trabalhadores específicos. Quando a janela de mensagem de correio eletrônico abrir, feche-a.

A página inclui links para páginas dentro do mesmo site, bem como links externos e de email.

 

6. ADICIONANDO INTERATIVIDADE

PDF Criptografado

142 ADOBE DREAMWEAVER CS4

Classroom in a Book

Entenda os comportamentos do

Dreamweaver

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

1 Selecione o elemento de página com o qual você quer desencadear o comportamento.

2 Escolha o comportamento a ser aplicado.

3 Especifique as configurações ou os parâmetros do comportamento.

Tipicamente, o gatilho de ações é um link que pode ser anexado a um intervalo de texto ou a uma imagem. Em alguns casos, o comportamento não exige que uma nova página seja carregada, assim ele empregará um link fictício que é representado como um sinal numérico (#). Na Lição 5, você utilizou links fictícios para desencadear itens de submenu pop-up. O comportamento Spry Effect que será utilizado nesta lição não requer que um link funcione, mas tenha em mente a vinculação ao trabalhar com outros comportamentos. O Dreamweaver adicionará o código apropriado na maioria das instâncias; mas talvez você precise criar um link fictício como um gatilho para ativar alguns comportamentos do Dreamweaver. O

 

7. CRIANDO UM LAYOUT DE PÁGINA

PDF Criptografado

LIÇÃO 7 165

Criando um Layout de Página

Em comparação, o layout das páginas do site de turismo utiliza float:left para criar a nota lateral, e um valor de margem esquerda largo no Main Content para dar espaço a um elemento

flutuante simples.

Ambos os layouts utilizam clear:both na

de rodapé para mover o rodapé para a parte inferior do contêiner. Isso ocorre por causa da aplicação de float a um ou ambos os elementos que precedem o rodapé.

5 Escolha File > Close.

Crie elementos

com layout de estilo

As melhores práticas para o web designer de hoje em dia defendem layouts baseados em CSS. Um layout baseado em CSS – comparado com um layout baseado em tabela – reduz o tamanho do arquivo, é mais fácil de gerenciar e atende aos padrões da indústria. Layouts baseados em CSS têm dois componentes básicos: um conjunto de elementos

que cria uma estrutura de página que é

útil por si só e uma série de regras CSS que define as dimensões e o formato dos elementos-chave de página para que a página assuma uma aparência funcional e atraente.

 

8. TRABALHANDO COM FORMULÁRIOS

PDF Criptografado

198 ADOBE DREAMWEAVER CS4

Classroom in a Book

11 No campo Password, digite uma senha com oito caracteres, apenas de letras.

Pressione Tab.

Outra mensagem de erro aparece.

12 Clique no campo Password e digite uma senha com oito caracteres ou mais.

Pelo menos dois dos caracteres devem ser números. Pressione Tab.

13 No campo Repeat Password, digite uma senha diferente daquela que você digitou no campo Password. Pressione Tab.

O widget Spry Validation Confirm detecta que as duas senhas não correspondem e exibe uma mensagem de erro.

14 Volte ao campo Repeat Password e digite uma senha que corresponda com a entrada no campo Password. Pressione Tab.

15 Clique no campo Travel Plans e digite algo sobre uma viagem. Pressione

Tab.

16 Utilize os botões de opção para escolher um número de viajantes.

17 Nas opções Services, selecione qualquer serviço que você gostaria de solicitar.

18 Em Timelist, escolha quando você planeja viajar na lista Timeline.

● Nota: Nenhum dado de formulário é realmente salvo neste exemplo.

 

9. TRABALHANDO COM O FLASH

PDF Criptografado

228 ADOBE DREAMWEAVER CS4

Classroom in a Book

Visualize um arquivo concluído

Para ver o que será utilizado na primeira parte desta lição, visualize a página concluída no navegador. Essa página é a home page do site de turismo que você montou nas outras lições.

1 Abra o Adobe Dreamweaver CS4.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB na lista de sites.

3 No painel Files, expanda a pasta lesson09.

● Nota: Algumas versões do Microsoft

Internet Explorer talvez solicitem que você permita a execução de conteúdo ActiveX para reproduzir o filme. Se o Flash player não for a versão mais recente, talvez você precise fazer download de uma nova versão.

4 Selecione o arquivo index-finished.html e pressione F12 (Windows) ou

Option+F12 (Mac) para visualizá-lo em seu navegador principal.

A página inclui dois elementos Flash.

5 Observe que o filme de Flash é reproduzido imediatamente quando a página

é carregada.

6 Mova seu cursor sobre o vídeo na coluna esquerda e clique em Play para observar o vídeo de Flash.

 

10. AUMENTANDO A PRODUTIVIDADE

PDF Criptografado

LIÇÃO 10

Aumentando a Produtividade

237

Crie um modelo

Um modelo do Dreamweaver é um tipo de página-mestre da qual páginas filhas são derivadas. Modelos são úteis para configurar uma página-mestre na qual algumas áreas são editáveis e outras não. Ao trabalhar em ambientes de equipe, o conteúdo de página pode ser alterado por várias pessoas da equipe, enquanto o

Web designer é capaz de controlar o design de página e os elementos específicos que precisam permanecer inalterados.

Embora você possa criar um modelo a partir de uma página em branco, é muito mais prático – e comum – converter uma página existente em um modelo. Neste exercício, você vai criar um modelo a partir de uma página existente.

1 Abra o Dreamweaver.

2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB na lista de sites.

3 No painel Files, expanda a pasta lesson10 e dê um clique duplo no arquivo template-start.html para abri-lo.

A operação básica para converter uma página existente em um modelo é um

único passo: salve a página como um modelo.

 

11. PUBLICANDO PARA A WEB

PDF Criptografado

262 ADOBE DREAMWEAVER CS4

Classroom in a Book

Defina um site remoto

O Dreamweaver é baseado em um sistema de dois sites. Um site está em uma pasta no disco rígido do seu computador e é conhecido como site local. Todo o trabalho nas lições anteriores foi realizado no seu site local. O segundo site, chamado site remoto, foi estabelecido em uma pasta de um servidor Web em execução em outro computador. Em geral, o site remoto está conectado à Internet e disponível publicamente.

O Dreamweaver suporta vários métodos para conexão a um site remoto:

· FTP (File Transfer Protocol) – O método padrão para conectar-se a sites

Web hospedados.

● Nota: Os dois exercícios a seguir são mutuamente exclusivos. Se você tiver um host Internet e os detalhes para estabelecer uma conexão FTP, siga os passos em “Configure um site FTP remoto”.

Se você tiver acesso direto a um servidor

Web, siga os passos em “Estabeleça um site remoto em um servidor local ou de rede”.

· Local/Rede – Uma conexão local ou de rede é mais frequentemente utilizada com um servidor Web intermediário, chamado servidor de teste. Os arquivos do servidor de teste são finalmente publicados em um servidor Web conectado à Internet.

 

Detalhes do Produto

Livro Impresso
eBook
Capítulos

Formato
PDF
Criptografado
Sim
SKU
BP00000042617
ISBN
9788577806065
Tamanho do arquivo
18 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