75 - Dreamweaver CS6

1
2
3
Sumário
Aula 1 - Introdução ao Adobe Dreamweaver CS6 ..................................................................................................... 5
Aula 2 – Tags básicas de HTML................................................................................................................................10
Aula 3 - Configuração de páginas no Dreamweaver CS6 – Parte 1 .........................................................................14
Aula 4 - Configuração de páginas no Dreamweaver CS6 – Parte 2 .........................................................................23
Aula 5 – Trabalhando com Textos ...........................................................................................................................31
Aula 6 – Trabalhando com Imagens ........................................................................................................................38
Aula 7 – Compreendendo o funcionamento dos Hyperlinks. .................................................................................47
Aula 8 – Tabelas no Dreamweaver CS6 ...................................................................................................................58
Aula 9 – Trabalhando com Frames..........................................................................................................................74
Aula 10 – Integração de Flash no Dreamweaver CS6..............................................................................................83
Aula 11 – Trabalhando com Folhas de Estilo (CSS) .................................................................................................98
Aula 12 – Entendendo o funcionamento dos Formulários no Dreamweaver CS6................................................119
Aula 13 – Desenvolvimento de Formulário completo no Dreamweaver CS6 .......................................................132
Aula 14 – Compreendendo a função de SPRY no Dreamweaver CS6 ..............................................................145
Aula 15 – Trabalhando com Div’s AP.....................................................................................................................156
Aula 16 – Entendendo o comportamento dos Navegadores ................................................................................161
Aulas 17 a 18 – Criação de Site completo no Dreamweaver CS6 .........................................................................166
4
5
Aula 1 - Introdução ao Adobe Dreamweaver CS6

O que é o Dreamweaver CS6?
O Adobe Dreamweaver é um Software para construção e edição de códigos de

várias linguagens voltadas para a web, ou seja, é um programa largamente
utilizado para a criação de páginas para a internet (websites).
Ao abrir o Dreamweaver podemos ver que é apresentada uma janela de

boasvindas, onde você pode manipular alguns documentos, criar novos, e
também conhecer alguns recursos do Dreamweaver.
Podemos abrir documentos recentes do próprio Dreamweaver, também podemos

acessar o Explorer clicando em "Abrir..." e procurando o arquivo desejado. É
possível ainda criar novos documentos, tais como: HTML, ColdFusion, PHP, AS
VBScript, XSTL, CSS, JavaScript, XML, um novo site do Dreamweaver entre mais
opções. EM qualquer uma destas opções, seu projeto sairá do zero.
6
A área de trabalho do Dreamweaver permite visualizar documentos e

propriedades de objeto. A área de trabalho também coloca muitas operações
comuns em barras de ferramentas para que você possa fazer alterações
rapidamente em seus documentos.
A. Barra de aplicativos.
B. Barra de ferramentas de documento.
C. Alternador da área de trabalho.
D. Janela do documento.
E. CS Live.
F. Grupos de painéis.
G. Seletor de tags.
H. Inspetor de propriedades. I. Painel Arquivos.
Visão geral dos elementos da área de trabalho
A tela de boas-vindas: Permite abrir um documento recente ou criar um novo

documento. Na tela de boas-vindas, você também pode saber mais sobre o
Dreamweaver, fazendo um tour pelo produto ou assistindo a um tutorial.
7
A barra de aplicativos: A parte superior da janela do aplicativo contém o

alternador da área de trabalho, os menus e outros controles do aplicativo.
A barra de ferramentas de documento: Contém botões que fornecem opções

para diferentes visualizações da janela Documento (como as visualizações de
design e de código), várias opções de visualização e algumas operações comuns,
como a visualização em um navegador.
A barra de ferramentas Padrão: (Não exibida no layout padrão da área de

trabalho.) Contém botões para operações comuns nos menus Arquivo e Editar:
Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir código, Recortar,
Copiar, Colar, Desfazer e Refazer. Para exibir a barra de ferramentas Padrão,
selecione Exibir > Barras de ferramentas > Padrão.
A barra de ferramentas de codificação: (Exibida somente na Visualização de

código.) Contém botões que permitem executar muitas operações padrão de
codificação.
A barra de ferramentas Processamento do estilo: (Oculta por padrão.)

Contém botões que permitem ver qual seria a aparência do seu projeto em tipos
de mídia diferentes se você usasse folhas de estilos dependentes de mídia. Ela
também contém um botão que permite ativar ou desativar a Folha de estilos em
cascata (CSS).
A janela do documento: Exibe o documento atual à medida que é criado e

editado.
O Inspetor de propriedades: Permite visualizar e alterar diversas propriedades

do objeto ou texto selecionado. Cada objeto tem propriedades diferentes. O
Inspetor de propriedades não é expandido por padrão no layout Codificador da
área de trabalho.
O seletor de tags: Localizado na barra de status, na parte inferior da janela

Documento. Mostra a hierarquia de tags em torno da seleção atual. Clique em
qualquer tag da hierarquia para selecionar a tag e todo seu conteúdo.
Painéis: Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem o

painel Inserir, o painel Estilos de CSS e o painel Arquivos. Para expandir um
painel, clique duas vezes na aba correspondente.
8
O painel Inserir: Contém botões para inserir vários tipos de objetos em um

documento, como imagens, tabelas e elementos de mídia. Cada objeto é uma
parte do código HTML que permite definir vários atributos à medida que são
inseridos. Por exemplo, você pode inserir uma tabela clicando no botão Tabela
do painel Inserir. Se preferir, você pode inserir objetos usando o menu Inserir
em vez do painel Inserir.
O painel Arquivos: Permite gerenciar arquivos e pastas, que podem fazer parte
de um site do Dreamweaver ou estar em um servidor remoto. O painel Arquivos
também permite acessar todos os arquivos do disco local, assim como o Windows
Explorer.
9
Exercícios:
1. O que contém no painel Inserir?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
2. O que é o Dreamweaver?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
3. O que nos proporciona a tela de boas vindas?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
4. Qual caminho utilizamos para encontrar a barra de

ferramentas Padrão?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
10
Exercícios de Fixação:
Abra o Adobe Dreamweaver CS6 e observe todos os recursos que estudamos

em nossa primeira aula.
Aula 2 – Tags básicas de HTML

O que é HTML?
HTML significa Hyper Text Markup Language e é a linguagem de marcação de

hipertexto, ou seja, é a linguagem na qual são escritas as páginas da Web,
interpretada pelo navegador.
As informações estão ligadas na forma de páginas ligadas entre si. A página é

transferida de um computador remoto para o usuário, onde o browser faz o
trabalho de interpretar os códigos naquele documento e mostra a página que o
usuário vê. A Web está estruturada em dois princípios básicos: HTTP (Hiper
Text Transfer Protocol) e HTML (Hiper Text Markup Language).
HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que

permite a navegação na Web, com o simples clicar do mouse sobre o texto (ou
imagem) que esteja associado a outro link.
11
HTML é a "língua mãe" do seu navegador, foi inventado em 1990 por um cientista
chamado Tim Berners-Lee. A finalidade inicial era de tornar possível o acesso e a
troca de informações e documentação de pesquisas entre cientistas de diferentes
universidades.
O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee.

Ao inventar o HTML ele lançou as fundações da Internet tal como conhecemos
atualmente.
HTML é uma linguagem que possibilita apresentar informações (documentação

de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página
na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o
código HTML de uma página use o menu "View" (Ver) no topo do seu navegador
e escolha a opção "Source" (Código fonte).
Se você quer construir websites terá que conhecer HTML. Mesmo que você use
um programa para criar seu website, tal como o Dreamweaver, um conhecimento
básico de HTML será necessário para tornar as coisas mais simples e para criar
um website de melhor qualidade.
Essa nossa segunda apostila será referente a uma breve explicação da linguagem,
para maiores informações sobre HTML, entre em contato com seu instrutor.
Tags HTML
Tags são rótulos usados para informar ao navegador como deve ser apresentado
o website. Todas as tags têm o mesmo formato: começam com um sinal de
menor "<" e acabam com um sinal de maior ">".
Genericamente falando, existem dois tipos de tags - tags de abertura:

<comando> e tags de fechamento: </comando>. A diferença entre elas é que
na tag de fechamento existe uma barra "/".
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento
será processado segundo o comando contido na tag.
Mas, como toda regra tem sua exceção, no HTML a exceção é que para algumas
tags a abertura e o fechamento se dá na mesma tag.
Tais tags contêm comandos que não necessitam de um conteúdo para serem
processados, isto é, são tags de comandos isolados, por exemplo, um pulo de
linha é conseguido com a tag <br />.
A tag <b> informa ao navegador que todo o texto colocado entre <b> e
12
</b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para
"bold" - negrito.)
Mas no navegador aparecerá como mostrado na imagem abaixo.
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao

navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho )
sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior
tamanho de texto, <h2> o cabeçalho de segundo nível e aquele apresentado
com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e
aquele apresentado com o menor tamanho de texto.
No navegador será apresentado como no exemplo abaixo.
Para a maioria dos navegadores é indiferente se você usa letras maiúscula,

minúscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou
<CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é
usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.
Você deve escrever suas tags em um documento HTML. Um website é constituído

por um ou mais documentos HTML. Quando você navega na Web, você está
abrindo diferentes documentos HTML.
Exercícios:
1. O que é HTML?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
2. O que são Tags?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
3. Faz diferença escrever em letras minúsculas ou maiúsculas?

____________________________________________________
____________________________________________________
13
____________________________________________________
____________________________________________________
___________________________________________________
4. Qual é o significado de HTML?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
Crie um arquivo em HTML e edite seu código para que ele fique da forma
abaixo.
Obs: É muito importante que você modifique o arquivo trabalhando APENAS

com seu código para que realmente compreenda a importância do HTML dentro
do Dreamweaver.
14
Aula 3 - Configuração de páginas no Dreamweaver CS6 –

Parte 1
Aprendendo os primeiros passos para configurar o Dreamweaver
Vamos aprender a configurar o Dreamweaver para seu site e as configurações
de uma página HTML. O Dreamweaver nos dá a opção de organizar os projetos
em sites, para auxiliar o trabalho e o gerenciamento dos arquivos.
A etapa da criação do site deve sempre preceder o desenvolvimento das páginas.
No final do trabalho de criação, utilizando o próprio Dreamweaver, podemos
enviar seus arquivos para um provedor de hospedagem.
Podemos ter vários sites configurados no programa, afinal, você pode trabalhar
em mais de um projeto ao mesmo tempo. Para criar um site, inicialmente escolha
a opção de menu Site – Gerenciar Sites.
Após clicar em Novo, a próxima etapa chamada Editando Arquivos, definimos

um nome que identifica o site no Dreamweaver e seu endereço (URL).
O nome criado tem importância somente para o Dreamweaver.

15
Propriedades da Página
Para cada página criada no Dreamweaver, é possível especificar as

propriedades de layout e formatação usando a caixa de diálogo Propriedades da
página
(Modificar > Propriedades da página).
A caixa de diálogo Propriedades da página permite especificar a família de fontes

e o tamanho de fonte padrão, a cor do fundo, as margens, os estilos de link e
muitos outros aspectos do design da página. Você pode atribuir novas
propriedades de página a cada nova página criada e modificar as propriedades
das páginas existentes. As alterações feitas na caixa de diálogo Propriedades da
página são aplicadas à página inteira.
O Dreamweaver define regras CSS para todas as propriedades especificadas nas

categorias Aparência (CSS), Links (CSS) e Cabeçalhos (CSS) da caixa de
diálogo Propriedades da página. As regras são incorporadas na seção cabeçalho
da página. Você ainda pode definir as propriedades da página usando HTML, mas
para isso, é necessário selecionar a categoria Aparência (HTML) na caixa de
diálogo Propriedades da página. (As caixas de diálogo Título/codificação e
Imagem de decalque também definem propriedades da página usando HTML.).
16
Definição de Aparência (CSS)
Fonte da página: Especifica a família de fontes padrão a ser usada nas páginas
da Web. O Dreamweaver usa a família de fontes especificada, a menos que outra
fonte seja definida para um elemento de texto.
Tamanho: Especifica o tamanho de fonte padrão a ser usado nas páginas da

Web. O Dreamweaver usa o tamanho de fonte especificado, a menos que outro
tamanho de fonte seja definido para um elemento de texto.
Cor do texto: Especifica a cor padrão em que as fontes serão processadas.
Cor do fundo: Define uma cor do fundo para a página. Clique na caixa Cor do
fundo e selecione uma cor no Seletor de cores.
Imagem do fundo: Define uma imagem do fundo. Clique no botão Procurar e

navegue até a imagem para selecioná-la. Se desejar, digite o caminho da imagem
do fundo na caixa Imagem do fundo.
O Dreamweaver coloca a imagem do fundo lado a lado (repete a imagem do
fundo) caso ela não preencha toda a janela, assim como fazem os navegadores.
(Para evitar que a imagem do fundo seja disposta lado a lado, use as folhas de
estilos em cascata para desativar esse recurso.)
Repetir: Especifica como a imagem do fundo será exibida na página:
• Selecione a opção No-repeat para exibir a imagem do fundo apenas uma vez.
• Selecione a opção Repeat para repetir ou dispor a imagem lado a lado
horizontalmente e verticalmente.
17
• Selecione a opção Repeat-x para dispor a imagem lado a lado

horizontalmente.
• Selecione a opção Repeat-y para dispor a imagem lado a lado verticalmente.
Margem esquerda e Margem direita: Especifica o tamanho das margens

esquerda e direita da página.
Margem superior e Margem inferior: Especifica o tamanho das margens

superior e inferior da página.
Definição de Aparência (HTML)
Em Aparência (HTML) você pode determinar uma imagem de fundo para o

seu site, assim como cores de fundo, texto, links, links visitados e links ativos.
Você também pode determinar as margens, tanto esquerda como superior.

18
Definição de Links (CSS)

Aqui você poderá determinar as fontes dos links criados na página, o tamanho
dos links, a cor dos links, tanto visitados como ativos.
Você pode também determinar se os links serão sublinhados ou não.
Definição de propriedades de Cabeçalho (CSS)
Na opção de Cabeçalho (CSS) você pode determinar a fonte do cabeçalho de

sua página.
Também pode determinar a cor e tamanho de cada um dos sub cabeçalhos,

você deve estar lembrado quando falamos sobre HTML que existem diversos
19
níveis de cabeçalhos, H1, H2, H3..., esses níveis no Dreamweaver são

representados por essa descrição Cabeçalho 1, Cabeçalho 2, Cabeçalho 3...
Definições de Título/codificação
Título: Especifica o título de página a ser exibido na barra de título da janela

Documento e da maioria das janelas de navegador.
Tipo de documento (DTD): Especifica uma definição de tipo de documento.

Por exemplo, você pode criar um documento HTML compatível com XHTML
selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu popup.
Codificação: Especifica a codificação usada nos caracteres do documento.
Formulário de normalização unicode
Selecione uma destas opções caso você escolha Unicode (UTF-8) como
codificação padrão.
Há quatro formulários de normalização unicode. O mais importante deles é o

formulário de normalização C, pois é o formulário mais comum utilizado no
modelo de caractere da World Wide Web. A Adobe fornece os outros três para
ser mais completa.
20
Exercícios:
1. O que podemos configurar nas Definições de Aparência

(HTML)?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
2. O que podemos configurar nas Definições de Links (CSS)?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
3. O que podemos configurar nas Definições de Propriedades de

cabeçalho (CSS)?
____________________________________________________
____________________________________________________
____________________________________________________
21
____________________________________________________
____________________________________________________
4. Para que usamos a caixa de diálogo Propriedades da página?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
Crie um arquivo em HTML.

Nas propriedades de página, selecione a opção Aparência (HTML), dentro
dela, modifique a imagem de fundo para que seu documento em HTML fique
similar ao abaixo, você pode escolher a imagem que quiser.
22
23
Aula 4 - Configuração de páginas no Dreamweaver CS6 –

Parte 2
Continuando a Configuração de Página
Nesta aula iremos ver passo a passo como se configura uma página no
Dreamweaver CS6.
Primeiramente devemos criar um documento HTML, estando com o

Dreamweaver aberto, selecione a opção HTML.
Feito isto aparecerá duas janelas, uma para os códigos e outra para a
visualização.
24
Agora digitamos Aula 4 como exemplo, veja abaixo como aparece na

janela de visualização.
Agora vamos configurar nossa página no Dreamweaver, clique em

Modificar e vá em Propriedades da Página ou tecle Ctrl+J.
25
Abrirá uma janela com todas as propriedades de página que você pode
alterar.
Vamos modificar agora as cores de texto e de fundo, observe na imagem.

Logo em seguida, clicamos em OK.
26
Observe o resultado abaixo.
Podemos selecionar uma imagem para plano de fundo conforme você viu
anteriormente nas configurações de página, vamos aplicar uma imagem do
Windows Seven.
27
Apenas lembrando que caso o texto AULA 4 for um hiperlink você

pode configurá-lo através da opção Link CSS. Formatação de Hyperlinks
28
Fonte do link: Especifica a família de fontes padrão a ser usada como texto do
link. Por padrão, o Dreamweaver usa a família de fontes especificada para a
página inteira, a menos que você especifique outra fonte.
Tamanho: Especifica o tamanho de fonte padrão a ser usado no texto do

link.
Cor do link: Especifica a cor a ser aplicada ao texto do link.
Links visitados: Especifica a cor a ser aplicada aos links visitados.
Links de sobreposição: Especifica a cor a ser aplicada quando o ponteiro do

mouse é colocado sobre um link.
Links ativos: Especifica a cor a ser aplicada quando o mouse é clicado em um

link.
Estilo sublinhado: Especifica o estilo de sublinhado a ser aplicado aos links. Se

a página já tiver um estilo de link sublinhado definido (através de uma folha de
estilos CSS externa, por exemplo), o valor padrão do menu Estilo sublinhado será
a opção “não alterar”. Esta opção informa sobre um estilo de link não definido.
Se você modificar o estilo de link sublinhado usando a caixa de diálogo
Propriedades da página, o Dreamweaver alterará a definição de link anterior.
Exercícios:
1. Quais são as abas que aparecem no menu Propriedades da

página?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
2. Para que serve os links ativos?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
3. Podemos definir uma imagem de fundo para o nosso site?

29
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
4. Quais são as teclas de atalho para acessar o painel

Propriedades da Página?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
Crie um arquivo em HTML.

Nas propriedades de página, selecione a opção Título/codificação, dentro
dela, modifique o título de seu documento em HTML para que fique similar
ao abaixo, você pode escolher o título que quiser. Logo em seguida salve seu
arquivo com nome de Aula 4.
30
31
Aula 5 – Trabalhando com Textos
Formatando textos no Dreamweaver
A formatação de texto no Dreamweaver é similar ao uso de um editor de texto

padrão. Você pode definir estilos de formatação padrão (Parágrafo, Cabeçalho 1,
Cabeçalho 2 etc.) para um bloco de texto, alterar a fonte, o tamanho, a cor e o
alinhamento do texto selecionado ou aplicar estilos de texto, como negrito,
itálico, código (mono espaçado) e sublinhado.
O Dreamweaver tem dois Inspetores de propriedades integrados em um: O

Inspetor de propriedades CSS e o Inspetor de propriedades HTML. Quando você
usa o Inspetor de propriedades CSS, o Dreamweaver formata o texto usando
folhas de estilos em cascata (CSS). A CSS proporciona aos designers e
desenvolvedores da Web maior controle sobre o design de página da Web e, ao
mesmo tempo, fornece recursos avançados de acessibilidade e menor tamanho
de arquivo. O Inspetor de propriedades CSS permite acessar estilos existentes,
bem como criar novos.
O uso da CSS é uma maneira de controlar o estilo de uma página da Web sem
comprometer sua estrutura. Ao separar elementos de design visual (fontes,
cores, margens etc.) da lógica estrutural de uma página da Web, a CSS
proporciona aos designers da Web controle visual e tipográfico sem sacrificar a
integridade do conteúdo. Além disso, a definição do design tipográfico e do layout
da página em um bloco de código único e distinto — sem precisar recorrer a
mapas de imagem, tags, font, tabelas e GIFs de espaçador — permite downloads
mais rápidos, manutenção otimizada de sites e um ponto central a partir do qual
os atributos de design serão controlados nas várias páginas da Web.
Não é possível armazenar estilos criados com CSS diretamente no documento

ou, para mais eficiência e flexibilidade, você pode armazenar estilos em uma folha
de estilos externa. Se você anexar uma folha de estilos externa a várias páginas
da Web, todas as páginas refletirão automaticamente todas as alterações feitas
na folha de estilos. Para acessar todas as regras CSS de uma página, use o painel
Estilos CSS (Janela > Estilos CSS). Para acessar as regras que se aplicam a uma
seleção atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up Regra-
alvo no Inspetor de propriedades CSS.
Se preferir, use tags de markup HTML para formatar o texto em suas páginas da
Web. Para usar tags HTML em vez de CSS, formate o texto usando o Inspetor de
propriedades HTML.
32
Definir propriedades de texto no Inspetor de propriedades
Você pode usar o Inspetor de propriedades de texto para aplicar a formatação

HTML ou a formatação da folha de estilos em cascata (CSS). Quando você aplica
formatação HTML, o Dreamweaver adiciona propriedades ao código HTML no
corpo da página. Quando você aplica formatação CSS, o Dreamweaver escreve
propriedades no cabeçalho do documento ou em uma folha de estilos distinta.
Editar regras CSS no Inspetor de propriedades
1- Abra o Inspetor de propriedades (Janela > Propriedades), caso ele

ainda não esteja aberto, e clique no botão CSS.
2 - Nessa barra você poderá visualizar diversas opções, observe abaixo.
Regra-alvo: É a regra que você está editando no Inspetor de propriedades CSS.

Quando se tem um estilo existente aplicado ao texto, a regra que afeta o formato
do texto é exibida quando você clica dentro do texto na página. Você também
pode usar o menu pop-up Regra-alvo para criar novas regras CSS, novos estilos
inline ou aplicar classes existentes ao texto selecionado. Se você estiver criando
33
uma nova regra, precisará preencher a caixa de diálogo Nova regra CSS. Para
obter mais informações, consulte os links no final deste tópico. Editar regra:
Abre a caixa de diálogo Definição de regra CSS da regraalvo. Se você selecionar
Nova regra CSS no menu pop-up Regra-alvo e clicar no botão Editar regra, o
Dreamweaver abrirá a caixa de diálogo de definição Nova regra CSS em vez disso.
Painel CSS: Abre o painel de estilos CSS e exibe as propriedades da regra-
alvo na visualização Atual.
Fonte: Altera a fonte da regra-alvo.
Tamanho: Define o tamanho de fonte da regra-alvo.
Cor do texto: Define a cor selecionada como a cor da fonte na regraalvo.
Selecione uma cor aceita pela Web clicando na caixa de cores ou digite um valor
hexadecimal (por exemplo, #FF0000) no campo de texto adjacente.
Negrito: Adiciona a propriedade de negrito à regra-alvo.
Itálico: Adiciona a propriedade de itálico à regra-alvo. Alinhar à
esquerda, Centralizar e Alinhar à direita: Adiciona as respectivas
propriedades de alinhamento à regra-alvo.
3 – Clique agora em HTML.

34
4 – Aqui você poderá editar diversas opções, observe abaixo.
Formato: Define o estilo de parágrafo do texto selecionado. O parágrafo aplica

o formato padrão de uma tag <p>, Cabeçalho 1 adiciona uma tag H1 e assim por
diante.
35
ID: Atribui uma ID à seleção. O menu pop-up ID (se aplicável) lista todas as
IDs declaradas não utilizadas do documento.
Classe: Exibe o estilo de classe atualmente aplicado ao texto selecionado. Se

nenhum estilo tiver sido aplicado à seleção, o menu pop-up mostrará Sem estilo
CSS. Se vários estilos tiverem sido aplicados à seleção, o menu estará em branco.
Use o menu Estilo para executar qualquer um destes procedimentos:
• Selecionar o estilo a ser aplicado à seleção.

• Selecionar Nenhum para remover o estilo atualmente selecionado.
• Selecione Renomear e renomeie o estilo.
• Selecione Anexar folha
Negrito: Aplica <b> ou <strong> ao texto selecionado de acordo com a

preferência de estilo definida na categoria Geral da caixa de diálogo
Preferências.
Itálico: Aplica <i> ou <em> ao texto selecionado de acordo com a preferência

de estilo definida na categoria Geral da caixa de diálogo Preferências.
Lista não-ordenada: Cria uma lista com marcadores do texto selecionado. Se

nenhum texto for selecionado, uma nova lista com marcadores será iniciada.
Lista ordenada: Cria uma lista numerada do texto selecionado. Se nenhum

texto for selecionado, uma nova lista numerada será iniciada.
Citação em bloco e Remover citação em bloco: Recua ou remove o recuo do

texto selecionado aplicando ou removendo a tag blockquote. Em uma lista, o
recuo cria uma lista aninhada e a remoção do recuo desaninha a lista.
Link: Cria um link de hipertexto do texto selecionado. Clique no ícone de pasta

para acessar um arquivo no site; digite o URL; arraste o ícone Apontar para
arquivo para um arquivo no painel Arquivos ou arraste um arquivo do painel
Arquivos para a caixa.
Título: Especifica a dica de ferramenta de texto para um link de hipertexto.
Alvo: Especifica o quadro ou a janela em que o documento vinculado será
carregado:
• _blank carrega o arquivo vinculado em uma nova janela de navegador

não nomeada.
36
• _parent carrega o arquivo vinculado em um conjunto de quadros pai ou

na janela do quadro que contém o link.
Se o quadro que contém o link não estiver aninhado, o arquivo vinculado será
carregado na janela de navegador em tamanho integral.
• _self carrega o arquivo vinculado no mesmo quadro ou janela do link.

Este alvo está implícito; portanto, você geralmente não precisa especificá-lo.
• _top carrega o arquivo vinculado na janela de navegador em tamanho

integral, removendo todos os quadros.
37
Exercícios:
1. Podemos editar estilos de formatação no Dreamweaver?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
2. Como funciona a regra alvo?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
3. O que faz o campo ID?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
4. O que é a lista ordenada?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
Crie um arquivo em HTML. Usando a ferramenta Texto, edite diversos textos

em sua página, assim como o demonstrado na imagem abaixo.
38
Aula 6 – Trabalhando com Imagens
Como funcionam as imagens no Dreamweaver CS6
Há vários tipos diferentes de formatos de arquivos gráficos, mas três formatos

são geralmente usados nas páginas da Web: GIF, JPEG e PNG. Os formatos de
39
arquivo GIF e JPEG são os mais aceitos e podem ser exibidos pela maioria dos
navegadores.
Os arquivos PNG são mais adequados para quase todos os tipos de gráficos da
Web devido à sua flexibilidade e ao seu menor tamanho de arquivo. No entanto,
a exibição de imagens PNG são apenas parcialmente aceitas no Microsoft Internet
Explorer e no Netscape Navigator. Portanto, a menos que você esteja criando
gráficos para um público-alvo específico que use um navegador com suporte ao
formato PNG, use GIFs ou JPEGs para maior acessibilidade.
GIF (Graphic Interchange Format)

Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a
exibição de imagens em tom não-contínuo ou imagens grandes de cores
simples, como barras de navegação, botões, ícones, logotipos ou outras
imagens com cores e tons uniformes.
JPEG (Joint Photographic Experts Group)

O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou
em tom contínuo, pois os arquivos JPEG podem conter milhões de cores. À
medida que a qualidade de um arquivo JPEG aumenta, também aumentam o
tamanho e o tempo de download do arquivo. Você geralmente consegue um bom
equilíbrio entre a qualidade da imagem e o tamanho do arquivo compactando um
arquivo JPEG.
PNG (Portable Network Group)

O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui
suporte a imagens true-color, em tons de cinza e de cores indexadas, além de
suporte a canal alfa para transparência. PNG é o formato de arquivo nativo do
Adobe® Fireworks®. Os arquivos PNG retêm todas as informações originais de
camada, vetor, cor e efeitos (como sombras) e todos os elementos são
completamente editáveis, continuamente. Os arquivos devem ter a extensão .png
para serem reconhecidos como arquivos PNG pelo Dreamweaver.
- Inicialmente vamos criar um novo documento HTML.

40
- Criado o documento, você irá visualizar a área de trabalho do Dreamweaver

em duas janelas, sendo uma referente ao código e outra para auxiliar na
visualização do documento. No trabalho com imagens, não usaremos a aba
Código, e sim a aba Desing. Portanto, clique no botão Design.
- Podemos inserir imagens inicialmente de duas formas. Primeiramente por

acessar o menu Inserir – Imagem e pelo atalho do teclado Ctrl + Alt + I.
Iremos utilizar a primeira opção.
41
- Selecione logo em seguida a imagem Banner.jpg.
- Na janela Atributos de Acesso a tag de Imagem, você pode definir uma

descrição para a imagem, mas normalmente esta caixa não é utilizada. Clique
em OK para seguir adiante.
42
- Muito bem! Nossa imagem foi inserida com sucesso na área de trabalho do
Dreamweaver CS6.
- Na Barra de Propriedades, temos vários recursos para edição de imagem.

Vamos conhece-los.
- Em L e A, podemos definir a Largura e a Altura da imagem, ela irá setar
como padrão, o tamanho original da mesma.
- Altere as dimensões para 600 x 200 e note as modificações.

43
- Um pouco abaixo temos os quadros Espaço V e Espaço H. O quadro V é

responsável pelo distanciamento da imagem das bordas na Vertical, e o
Espaço H é responsável pelo distanciamento das bordas na Horizontal.
- Vamos colocar um espaço de 50 px tanto para vertical quanto para horizontal

para modificarmos o posicionamento da imagem. Perceba as modificações
feitas até agora.
- Para reverter a ação que acabamos de fazer, basta deletar o conteúdo dos
campos V e H.
- Logo ao lado temos o quadro Origem, onde encontramos o diretório de

origem da imagem.
- Abaixo do quadro Origem, encontramos o quadro Link, onde podemos definir

um link para a imagem. Assim que clicado, o link ira direcionar o navegador
para um novo endereço ou uma nova página.
44
- Caso você opte por adicionar um link a sua página, logo abaixo da caixa link
você deverá definir um Destino para o link: temos o _blank, _new,
_parent, _self e _top. O Destino determina o modo como o link será
aberto, se em uma nova aba ou na mesma página.
- No canto esquerdo, temos as Ferramentas de Ponto Ativo. Elas tem como

função criar links somente em partes da imagem. Clique na ferramenta Ponto
Ativo Retângulo.
45
- Selecione uma determinada área da imagem para criar um link tendo como
base a imagem.
- Veja a mudança na barra de propriedades. No quadro Link, caso seja inserido

algum link, a parte em que foi feita a seleção será uma área clicavel para
levar até outro endereço ou caminho.
Exercícios:
1. Como podemos inserir uma nova imagem a um documento HTML?

46
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Como podemos modificar o tamanho da imagem para fique 600 x

200?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
3. Como podemos atribuir um espaçamento de 100 px, tanto para a

vertical quanto na para a horizontal na imagem?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
4. Qual o nome do grupo de ferramentas responsáveis pela criação de

links em uma determinada área da imagem?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
Crie um novo documento em HTML. Adicione uma imagem no interior de seu

documento e redimensione ela para L = 400 e A = 300. Tente obter um
resultado similar à imagem abaixo.
47
Aula 7 – Compreendendo o funcionamento dos Hyperlinks.
Como funcionam os Hyperlinks no Dreamweaver CS6?
Entre as coisas que influenciaram a grande explosão da internet, está a

facilidade de fazer leitura de textos e dos elementos totalmente definida pelo
usuário, sem a obrigação de seguir uma estrutura de navegação linear.
Isso quer dizer, você pode ir ao site que quiser, quando quiser, acessar o que
quiser e como quiser sem depender de uma programação pronta, sem ter de
seguir uma ordem de fatores até chegar onde você quer.
Ao assistir a um programa de televisão ou a um vídeo, é preciso uma estrutura

linear para o recebimento das informações que quiser.
No caso do vídeo, podemos até acelerar a fita, porém foi utilizada uma
estrutura linear, pois para chegar ao ponto mais a frente, ou atrás que
queremos, foi preciso passar necessariamente pelos outros pontos que se
encontravam no caminho.
O hyperlink é a grande solução para navegação, pois permite o usuário ir de

uma página a outra qualquer sem a necessidade de passar pelas páginas que
se encontram entre elas.
48
Para inserir links no Dreamweaver, primeiramente selecionamos o elemento

que desejamos que seja o link, seja esse elemento um texto ou imagem, e
utilizamos o campo link, na aba Propriedades.
Links Absolutos
Links Absolutos levam em consideração o caminho completo para chegar a

determinada página, incluindo o protocolo utilizado pelo navegador.
Esse tipo de link é muito usado para paginas que não pertençam ao seu site,
necessitando, portanto, do caminho completo para que a sua funcionalidade
esteja correta.
Um problema referente a links absolutos é que, como são para páginas que não
estão dentro de seu site, caso o webmaster da página troque de local ou
remova a mesma, você deve atualiza-la; caso contrario, ficará com um link
quebrado (que não o leva a página alguma).
Links Absolutos
Links Relativos consideram a página atual como ponto inicial para a

navegação.
Por exemplo, caso você esteja na raiz do seu site, e queira fazer um link para
uma página chamada interior.html, que se encontra numa pasta chamada
lugares, o link a ser digitado será assim: lugares/interior.html.
Se a pagina para qual desejamos o link se encontrar no mesmo diretório da

pagina atual, digite seu nome e extensão no campo Link.
Vamos destacar que sempre o Link Relativo leva em consideração como ponto
inicial a localização da pagina atual em que estamos inserindo o link.
Abra agora o objeto com o nome de hyper.html para que possamos editá-lo.
Para isso clique no menu Arquivo:
49
Logo em seguida clique em Abrir.
Selecione o arquivo hyper.html e clique em Abrir.

50
Acabamos de abrir uma página onde poderemos inserir hyperlinks em alguns

textos. Perceba que temos alguns textos em ordem para inserir links,
primeiramente iremos colocar links neles, depois faremos sua formatação.
Vamos selecionar o texto Link 1.
Iremos inserir um novo hyperlink nesse texto através do menu Inserir >
Hyperlink. Portanto, clique no menu Inserir e logo em seguida em
Hyperlink.
51
Na janela abaixo, podemos configurar algumas coisas, sendo o quadro mais

importante, o link, onde você definirá qual será o destino do seu link.
Você pode escolher entre um arquivo que esteja junto de seus arquivos, ou um
link externo, de outro servidor.
Neste caso iremos redirecionar este link para o site http://www.google.com.

A operação é simples, você deve apenas clicar com o mouse na caixa de texto da
opção Link e digitar http://www.google.com da mesma forma em que esta a
imagem abaixo, logo em seguida clique em OK.
52
Perceba que nosso texto mudou de cor, isto porque agora ele é um link. Na
web, se ele for clicado, o site irá para www.google.com.br.
Você pode mudar a cor e algumas opções deste link. Vamos fazer essas
modificações através das configurações da página. Para fazer isso devemos
acessar o menu Modificar > Propriedades da página..., ou através da opção
Propriedades da Página da barra de propriedades. Clique, portanto, no botão
Propriedades da Página na barra de propriedades.
O que nos interessa está na aba CSS, portanto clique na aba Links(CSS).
53
Muito bem. Vamos agora modificar as cores de nosso link. Clique na caixa de
cores da opção Cor do Link e clique na cor azul em destaque na imagem
abaixo.
Vamos mudar as cores agora dos links visitados. Para isso, clique na caixa de
cores da opção Links Visitados e selecione a cor vermelha em destaque na
imagem abaixo.
Agora vamos mudar a cor do link no momento em que o mouse estiver sobre ele.
Portanto, clique na caixa de cores da opção Links de e selecione a cor cinza em
destaque na imagem abaixo.
54
Agora iremos mudar a cor dos Links ativos. Para isso, clique na caixa de
cores da opção Links ativos e selecione a cor branca em destaque na imagem
abaixo.
Terminamos assim nossa edição. Clique agora em OK.

55
56
Exercícios:
1. Qual a diferença entre Links Absolutos e Links Relativos?

__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
2. Como podemos adicionar hyperlinks a um texto já

selecionado?
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
3. Qual o botão utilizado para editar as propriedades dos links?

_________________________________________________
_
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
4. Que caixa é responsável pela mudança de cor dos links

visitados?
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
5. Que caixa é responsável pela mudança de cor do link no

momento em que o mouse estiver sobre ele?
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
57
Crie um documento em HTML. Insira uma imagem e utilize ela como banner.
Logo abaixo do banner escreva Link do Google, em seguida selecione o texto
e adicione o link do google (www.google.com.br) nele. Tente fazer o mesmo que
foi feito na imagem abaixo.
58
Aula 8 – Tabelas no Dreamweaver CS6
Aprendendo a trabalhar com tabelas no Dreamweaver CS6.
A funcionalidade das tabelas foi adicionada ao HTML para simplificar a

apresentação de dados tabulares, como por exemplo, relatórios científicos.
Apensar de serem ótimas para trabalhar, as tabelas não estão sendo mais tão
utilizadas quanto as divs, mas não deixam de ser importantes.
Para criar uma nova tabela, é vital que a mesma seja planejada e esboçada
antes, para depois minimizar o seu trabalho.
Vamos criar então um novo documento HTML para que possamos criar uma
tabela dentro do mesmo. Sendo assim, abra o Adobe Dreamweaver CS6 e
clique em Criar Novo > HTML.
Com nosso novo documento criado, estamos prontos para adicionar uma
tabela.
Clique no menu Inserir e logo em seguida na opção Tabela.

59
Na caixa Tabela, você pode definir o número de linhas e colunas desejadas, se

quiser adicionar uma borda e qual será sua espessura, definir a largura de sua
tabela em relação a largura da tabela (em Pixels ou em porcentagem), o
espaçamento entre as células e o espaçamento entre a célula e o seu conteúdo.
Vamos fazer algumas modificações em nossa tabela.
Em Largura da tabela, digite o valor de 700.

60
Em Colunas, digite 3.
Em Espessura da borda digite 1.

61
Por fim, clique em OK.
Na Barra de Propriedades da tabela, podemos mudar suas configurações.

Podemos alterar o alinhamento da tabela, sua cor de fundo, de borda e sua
imagem de fundo, caso ache interessante adicionar.
Para podermos selecionar as células (TD), linhas (TR) ou toda a nossa tabela
(Table), podemos usar o rodapé do Dreamweaver.
Clique na primeira célula da tabela.

62
Ao clicar em uma célula ou selecionar mais de uma célula, note que a barra de
propriedades muda para a formatação de texto e abaixo as propriedades
referentes as células.
As possibilidades de alteração das células são a opção de mesclar duas ou

mais células.
Ao lado do botão mesclar, podemos visualizar o botão dividir células,

onde podemos dividir as células em colunas ou linhas.
63
Logo ao lado, temos as opções para alteração de dimensões da célula, sendo

elas largura (L) e altura (A).
A opção Sem quebra tem como objetivo impedir que o conteúdo quebre para
a linha de baixo da célula ao alcançar a largura da célula.
64
A opção Cabeçalho, permite atribuir a célula a propriedade de célula de

cabeçalho (título), acrescenta um negrito e um peso maior a fonte.
Podemos também acrescentar cor de fundo e de borda á nossa tabela, bem

como imagem de fundo.
Clique na tag <table> acima da barra de propriedades.

65
Para aumentar o numero de linhas, devemos modificar o seu valor na caixa

Linhas.
Selecione agora as três primeiras células da primeira linha.

66
Clique agora na opção Mesclar Células.
Marque a caixa Cabeçalho.

67
Agora digite na célula mesclada Aula de Tabelas e centralize o texto para que
fique similar a imagem abaixo.
Agora vamos mesclar a primeira coluna de nossa tabela, para isso, selecione
as duas células em destaque na imagem abaixo e clique no botão Mesclar
Células.
68
Agora na célula da primeira coluna, digite Aprendendo, assim como na

imagem abaixo.
Vamos agora mesclar as células restantes da tabela. Para isso selecione as

células em destaque na imagem abaixo e clique no botão Mesclar Células.
69
Na célula que você acabou de mesclar, digite Valores e Mais Valores.
Vamos aumenta agora o tamanho de nossa tabela. Para isso, clique na tag
<tr>.
70
Em A (altura), digite o valor de 400.
Vamos mudar agora a cor do cabeçalho da tabela, para isso, selecione o

Cabeçalho e clique na caixa de cores da opção Fundo que se localiza na aba de
propriedades. Selecione a cor que preferir.
71
Agora vamos salvar nosso arquivo. Para isso clique no menu Arquivo e logo
em seguida na opção Salvar.
Digite tabela e logo em seguida clique em Salvar.

72
Exercícios:
1. Como podemos inserir uma tabela em um novo documento

HTML?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
2. Como podemos mesclar duas células?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
3. Que caixa tem como objetivo impedir que o conteúdo da

célula quebre para a linha debaixo da célula?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
73
4. Como podemos adicionar uma linha a tabela?

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
Crie um documento em HTML e em seu interior crie uma tabela similar à

demonstrada abaixo.
74
Aula 9 – Trabalhando com Frames
Entendendo a Criação de Frames
A construção de paginas em Frames, embora seja possível, é considerada

ultrapassada e fora de padrões de layout atuais e futuros. Mas em algumas
situações ela pode se tornar muito útil.
Embora uma página baseada em frames funcione como uma única página WEB,
cada frame, contém um único documento de HTM que pode incluir conteúdos
completamente separados e barras de rolagem independentes.
Um frameset, pode ser considerado um conjunto de frames e a página de

frameset é que define como um conjunto.
Para criar um frame, você deve clicar em Arquivo e logo em seguida em

HTML.
Clique após isso em Inserir > HTML > Molduras.
Clique em Superior aninhada a direita.
Ao clicar no botão Criar, será solicitado que se dê nome aos frames que
compõe o seu layout.
Você pode deixar os nomes padrões ou modificar de uma forma que facilite a
identificação posterior.
Em nosso caso, no campo título iremos digitar pagina e logo em seguida, clicar
em OK.
75
Propriedades dos Frames
Podemos alterar as propriedades de nossos frames ao adicionar bordas, cores

para as bordas, largura para as bordas e definir unidade de medida através da
barra de propriedades dos frames.
Ainda na barra de ferramentas, temos a opção de edição em máscara, que será

vista em outro capítulo. Temos também atalhos para visualização em tela cheia
e para o ImageReady, editor gráfico que acompanha o Photoshop.
Podemos acrescentar novas molduras criando novas subdivisões em nossos

frames.
No topo você pode digitar o título de seu site, ou importar uma figura que seja
o título.
Clique no topo do seu frameset e digite Titulo.
Na parte a direita, você poderá definir alguns textos para os links e na esquerda
colocar um conteúdo qualquer. Clique na parte direita do frameset e digite
Principal, logo após isso pressione Enter, em seguida digite Links, logo após
isso pressione Enter novamente, em seguida digite Imagens. Você deverá
ficar com uma coluna similar a destacada abaixo.
76
Agora vamos criar nossos links para dentro de nosso frame. Selecionamos a
palavra Principal e ligamos ao arquivo Primeira página. Para isso selecione a
palavra Principal e clique em Inserir e logo em seguida clique em Hyperlink.
No campo Link, escreva Primeira página.

77
No campo Destino, selecione a opção mainFrame. E logo em seguida no

botão OK.
Agora basta ligar as demais páginas.
Existe um cuidado muito grande ao salvar uma página com Frames, pois um
frame como o nosso exemplo possui 4 (quatro) páginas abertas: o topo, o
menu, o miolo e o quadro principal que armazena o frame.
Para salvar todos os Frames, clique em Arquivo e em seguida clique em

Salvar Tudo.
78
Observe que o frame do quadro será o primeiro a ser salvo. Ele mostra uma
borda grossa em volta de todos os frames. Digite quadro e logo em seguida
clique em Salvar.
Agora o Dreamweaver quer salvar o menu, observe que o menu ficará agora
com a borda mais grossa. Digite Menu e clique em Salvar.
79
O terceiro frame a ser salvo é o topo. Digite Topo e clique em Salvar.
Para exibir o painel Frames acessamos o menu Janela e clicamos em

Molduras. Vamos fazer isso, clique no menu Janela e em seguida clique em
Molduras.
80
Neste painel de molduras, podemos definir qual será a página a ser aberta
dentro do frame, formatação de bordas, definir qual será o nome de nosso
frame, se haverá a possibilidade de redimensionamento, como será a paginação
e largura e altura da margem.
No painel Molduras, clique em topFrame.
Com o topo selecionado, vamos inserir bordas e alterar a cor da borda. Para
isso, na barra de propriedades, opção Bordas selecione Sim.
81
Na caixa de Cor de borda, selecione a cor preta destacada na imagem abaixo.
Faça o mesmo procedimento para o rightFrame e o mainFrame.
Terminamos assim de editar nosso site com Frameset, assim, encerrando nossa
nona aula de Dreamweaver CS6. Exercícios:
1. Qual o caminho para criarmos um frame do zero?

_____________________________________________________
82
___
_____________________________________________________
___
________________________________________________________
________________________________________________________
________________________________________________________
2. Como podemos criar links dentro de um frameset?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Qual o caminho para salvarmos todos os frames que criamos de

uma só vez?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
4. Que painel define qual será a página a ser aberta dentro do frame e
a formatação de suas bordas?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Cliquem em Arquivo no Dreamweaver, logo em seguida em Novo..., após isso

clique na aba Amostras e selecione a opção Conjunto de molduras, escolha
a opção Superior fixa, esquerda aninhada e crie esse modelo. Edite seu
modelo da mesma forma demonstrada abaixo, você pode utilizar qualquer link
adicionar aos textos, e para finalizar, ative o painel Molduras.
83
Aula 10 – Integração de Flash no Dreamweaver CS6
Compreendendo a integração do Flash com o Dreamweaver CS6

84
Hoje, apresentar textos e imagens em nossos sites não tem sido suficiente. A
grande disputa do mercado hoje em dia são elementos de mídia mais
elaborados, com destaque para os filmes feitos com o Flash da Adobe.
A Web atual é rica em recursos multimídia como vídeo, áudio, efeitos, etc. É
claro que tudo isso depende de diversos fatores como principalmente,
velocidade de conexão e boa distribuição do conteúdo no site.
O Dreamweaver permite inserir fácil em suas páginas HTML conteúdo

multimídia, tornando assim seu site mais rico e interativo.
Mas afinal, o que seria um arquivo em Flash? Seria um arquivo que pode ser
visualizado em uma página da internet usando um navegador que o suporta
(normalmente com o plug-in adequado) ou através do Flash Player, um leve
aplicativo distribuído gratuitamente pela Adobe.
Os arquivos desenvolvidos em Flash são normalmente utilizados para

propaganda animada (banners) em páginas da internet, mas o flash não se
limita a isso, pois existem diversos jogos e apresentações dos mais variados
tipos que utilizam esta tecnologia, sendo possível até mesmo a criação de sites
inteiros em Flash
Um filme em Flash pode agregar imagens, sons e interatividade de maneira

muito satisfatória, com tamanho extremamente reduzido.
Para podermos trabalhar com Flash, primeiramente devemos criar um novo

arquivo em HTML. Para isso, clique em Arquivo e logo em seguida clique em
criar novo HTML.
Com um novo arquivo HTML criado, vamos modificar as propriedades de nossa

página por meio do menu Modificar e logo em seguida clicando na opção
Propriedades da página....
85
Vamos alterar a cor de fundo da página, para isso clique na caixa de cores da
opção Cor do fundo e selecione a cor cinza indicada abaixo.
Vamos alterar agora o título da página, para isso, clique na opção

Título/codificação.
86
O título que iremos colocar na página será o de Flash, para isso, digite Flash
na caixa de título e logo em seguida clique em OK.
Vamos inserir agora um objeto em Flash (.swf), para isso, clique no menu
Inserir, posicione o cursor sobre a opção Mídia e selecione a opção SWF.
87
Selecione o arquivo flash e logo em seguida clique em OK.
Agora vamos ver a aba de propriedades do flash. Na esquerda da aba

propriedades temos a opção Loop. Ela está marcada. Loop tem a função de
reiniciar a animação assim que ela é terminada.
88
Mais abaixo temos a opção Execução automática, como próprio nome já diz,
assim que a animação carrega, ela inicia automaticamente.
Em L e A, é definida a Altura e a Largura de nosso objeto Flash.

89
Em espaço V e espaço H podemos definir o distanciamento do objeto das

laterais, na Vertical e na Horizontal, assim como as imagens.
Arquivo tem a função de puxar o arquivo swf, caso estivesse dentro de outra
pasta após a pasta que se encontra o .html do site, seria pasta /flash.swf.
90
Em Qualidade podemos definir a qualidade de imagem da animação .swf.
Em Escala podemos definir entre Padrão (mostrar tudo), sem bordas ou

ajuste exato.
91
Em alinhar, podemos definir o alinhamento na animação na página.
Em modoW podemos definir se o fundo da animação será opaca ou

transparente.
92
Em Fundo, você pode definir uma cor de fundo pra animação.
No botão Editar, podemos editar o arquivo do flash.

93
No botão Executar o Dreamweaver irá executar o arquivo .swf para que você
teste-o e veja como estão as configurações.
Em Parâmetros você pode definir a versão do flash player exigido pelo

site.
94
Em Classe podemos anexar algum estilo CSS no flash, porem isto não é muito
utilizado, pois o CSS não trabalha com arquivos .swf.
Encerramos assim o conteúdo de nossa décima aula de Dreamweaver CS6.

Exercícios:
1. O que é um arquivo em Flash?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
95
_______________________________________________________
2. Qual é a utilidade dos arquivos em Flash?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
3. Como podemos iserir um arquivo .swf em nosso documento HTML?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
4. Qual a utilidade da opção Executar do Flash?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um arquivo em HTML e insira um arquivo de Flash dentro dele como

demonstrado na imagem abaixo.
96
97
98
Aula 11 – Trabalhando com Folhas de Estilo (CSS)
Aprendendo o que são Folhas de Estilo
Mas o que seriam folhas de estilo? Uma folha de estilo é um conjunto de regras
que informa a um programa responsável pela formatação de um documento,
como organizar a página, como posicionar e expor o texto e, dependendo de
onde é aplicada, como organizar uma coleção de documentos.
A maior parte dos programas de editoração eletrônica e processadores de texto

modernos trabalham com folhas de estilos. O processo consiste em definir um
rótulo (nome do estilo) para um determinado parágrafo e em seguida alterar
seus atributos.
Todo o parágrafo que for rotulado com aquele estilo passará a exibir as
características definidas anteriormente. Qualquer alteração nos atributos de um
estilo, afetará todos os parágrafos que estiverem rotulados com ele.
Com folhas de estilo é possível criar muitas páginas com um layout sofisticado
que antes só era possível usando imagens, tecnologias como Flash ou applets
Java.
Estas páginas eram sempre mais pesadas, pois precisavam carregar imagens,
componentes, programas.
Com o CSS é possível definir texto de qualquer tamanho, posicioná-lo por cima
de outros objetos, ao lado ou por cima de texto e conseguir efeitos sofisticados
a um custo (banda de rede) baixo.
É possível ainda, importar fontes (que o usuário talvez não tenha).
O uso de folhas de estilo depende da boa estrutura do HTML. A linguagem CSS

é uma linguagem declarativa que trabalha com os elementos tratando-os como
“objetos”.
Cada parágrafo <P>, cada cabeçalho <H1>, cada imagem <IMG> são
objetos. Os objetos podem ser agrupados de várias formas. A cada objeto ou
grupo de objetos podem ser atribuídas propriedades de estilo definidas em
regras. Por exemplo, considere a seguinte regra: “todo objeto P da classe
“editorial” será azul, terá tamanho de 12 pontos, espaçamento duplo,
alinhamento pela direita e usará a família de fontes Arial, ou se esta não existir,
Helvetica ou então a fonte sans-serif default do sistema”. Um arquivo CSS com
99
apenas essa regra, conteria o texto: P.editorial {color: 0000ff; font-size: 12pt;
line-height: 24pt; text-align: right; font-family: arial, helvetica, sans-serif}.
Se a folha de estilos for aplicada a uma página que possua parágrafos <P>
rotulados com o nome “editorial” (atributo ‘CLASS=editorial’), eles serão
formatados de acordo com as propriedades especificadas se o browser suportar
CSS. Caso o browser não suporte CSS, a estrutura será mantida (embora a
aparência não seja a ideal) e o usuário conseguirá ter acesso a informação
estruturada, mesmo em um meio de visualização mais limitado.
Em nosso primeiro exemplo, ao configurarmos nossa página com margens,

definição de cores e texto para textos e links por trabalharmos com HTML,
todas essas formatações são atribuídas em código CSS.
O Dreamweaver CS3 reforçou bastante o recurso de CSS para formatação nas

páginas. No topo das paletas a direita temos a paleta de CSS. Para trabalhar
com as folhas de estilo, é necessário algum conhecimento em HTML, pois ela
baseia-se na formatação das TAGS HTML e suas funções.
Podemos alterar as propriedades de uma tag existente, como podemos criar

classes e identificadores para as TAGS onde podemos ter dentro de uma folha
de estilo TAGS <TABLE> de tabelas com duas ou mais formatações.
Utilizando Folhas de Estilo
Vamos criar um documento HTML do zero para que possamos criar folhas de
estilo para ele. Para isso, clique em Arquivo e logo em seguida clique em criar
novo HTML.
Com um novo arquivo HTML criado, vamos criar uma folha de estilo baseada
em uma TAG existente. Para criar uma folha de estilo simples, no painel CSS
clique no botão Novo estilo CSS.
100
A opção Tag, automaticamente mostra o H1 que é relativo ao título de nível.

Clique no menu Drop Down de Tipo de seletor: e selecione a opção tag.
Em Nome do seletor digite o texto h1.

101
A opção Definição de regra: permite definir a formatação em um arquivo de

folha de estilos, ou somente no documento atual.
Clique em OK. E você poderá visualizar uma janela onde podemos definir a
forma que terá a nossa TAG H1 similar a imagem abaixo.
A opção Tipo, permite alterar as configurações de fonte da TAG selecionada.

Clique em Fundo.
102
Na opção Fundo podemos definir as configurações de plano de fundo da célula.

Clique em Bloco.
Em Bloco, podemos definir as configurações de parágrafos do texto, como

espaçamento entre palavras, alinhamentos, etc. Clique agora em Caixa.
103
A opção Caixa permite criar um bloco de nossa TAG definindo largura e altura.
Clique agora em Borda.
Em Borda, podemos definir o tipo de borda a ser aplicada em nossa TAG.

Clique em Lista.
104
Lista permite alterar as configurações de nossa lista de marcadores. Clique em

Posicionamento.
Posicionamento permite trabalhar com posicionamento da TAG selecionada

em relação ao documento. Clique em Extensões.
105
Extensões permite definir quebras de página, cursor do mouse e filtros a

serem aplicados ao seu website. Clique na categoria Tipo.
Vamos alterar as configurações de fonte. Para isso, clique no menu Drop Down
de Font-family e em seguida selecione as fontes Verdana, Geneva,
sansserif.
106
Clique agora no menu Drop Down de Font-size e em seguida selecione a opção

12.
Clique no menu Drop Down de Font-weight e em seguida selecione a opção

Bold.
107
Clique agora no menu Drop Down de Font-style e selecione a opção Normal.
Clique no menu Drop Down de Font-variant e selecione a opção Normal.

108
Clique agora no menu Drop Down de Line-height e selecione a opção Normal.
Clique agora na caixa de cores da opção Color e selecione a cor preta em

destaque na imagem abaixo.
109
Clique agora na categoria Fundo.
Em Background-color digite a cor #FFCC99 e em seguida clique em OK.
Veja agora o código que acabamos de configurar.

110
Vamos verificar agora se as configurações estão funcionando. Para isso, digite

na página o seguinte texto: Título com TAG H1.
Com o texto digitado, agora precisamos mudar sua formatação. Para isso,
clique no menu Drop Down de Formato e selecione a opção Cabeçalho 1.
111
Pronto! A configuração de cabeçalho está funcionando. Para alterar algo em sua

folha de estilo, clique no botão Editar regra. Será perguntado qual estilo
existente você deseja alterar.
O que são as Classes?
As classes permitem que se criem uma formatação especial que possa ser
adicionada dentro de outras TAGS. Por exemplo, preciso formatar as células de
uma tabela com duas cores diferentes, posso criar duas classes e aplicar dentro
delas, apenas clicando na tabela e depois clicando nas classes no painel de
estilos.
Clique no botão Novo Estilo CSS.

112
Clique no menu Drop Down de Tipo de seletor: e escolha a opção Classe.
Em Nome de seletor digite teste e clique em OK.

113
No menu Drop Down de Font-family selecione a opção Comic Sans MS,

cursive.
Clique agora no menu Drop Down de Font-size e escolha o tamanho 18.

114
Clique em seguida no menu Drop Down de Font-style e selecione a opção

italic.
Clique agora na caixa de cores da opção Color e selecione a cor Preta indicada
na imagem abaixo.
115
Agora clique na categoria Fundo.
Clique na caixa de cores de Background-color e logo em seguida selecione a

cor preta indicada na imagem abaixo e logo em seguida clique em OK.
116
Depois de criar a classe, selecione o elemento que irá receber a classe e aplique
ela ao conteúdo selecionado pela barra de propriedades.
Agora digite teste de classe em sua página logo abaixo do primeiro cabeçalho.
Selecione o texto que você acabou de digitar e clique no menu Drop Down de
Classe, após isso selecione a classe teste.
117
Em algumas situações será necessário aplicar o estilo em Tags não

selecionáveis pelo modo visual do Dreamweaver.
Nesses casos é necessário aplicar o estilo pelo modo de código, bastando

apenas após o nome da TAG digitar o seguinte:
< TAG class= “nomedaclasse” > <p class="teste>classe</p>
O modo de aplicação de CSS que vimos até o momento está diretamente

aplicado no documento.
Caso tenhamos formatações de CSS que sejam aplicadas a diversos

documentos, podemos gerar um documento com a extensão CSS e criar um
link em cada documento para esse arquivo. Além de padronizar seu site, isso
fará com que qualquer alteração de formatação afete todos os documentos.
Para utilizar a formatação de CSS através de um arquivo externo, temos que

criar um novo documento escolhendo a opção CSS.
Chegamos assim ao fim de nossa décima primeira aula de Dreamweaver CS6.

Exercícios:
1. O que são folhas de estilo?

________________________________________________________
________________________________________________________
________________________________________________________
118
________________________________________________________
2. Como podemos criar uma folha de estilo?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Como podemos criar uma classe?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
4. Que categoria é responsável pela formatação de uma folha de

estilo?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um documento em HTML, logo em seguida, clique na aba Estilos CSS,

depois disso clique em nova regra CSS e crie uma regra do tipo Classe para
ser usada nos cabeçalhos. Crie um cabeçalho baseado na regra assim como
demonstra a imagem abaixo.
119
Aula 12 – Entendendo o funcionamento dos Formulários no

Dreamweaver CS6
120
Tipos de Formulários e seus elementos
No Dreamweaver existem recursos para a criação de um formulário, inclusive

para formulários dinâmicos que atribuam envios para páginas dinâmicas como
ASP, PHP, JSP, CFM.
Vamos conhecer os elementos de um Formulário.
Para isso, inicialmente, vamos criar um novo documento HTML. Sendo assim,
abra o Adobe Dreamweaver CS6 e clique em Criar Novo > HTML.
Criando um Formulário
Para inserir um formulário em nosso novo Dreamweaver clique no Menu

Inserir> Formulário e selecione a opção Formulário.
121
A área do formulário é representada por uma linha pontilhada em vermelho. Na

barra de propriedades deve-se definir qual será o nome do formulário e a forma
de envio.
A forma de envio pode ser para um arquivo dinâmico (ASP, PHP, etc...)
que vai tratar os dados postados no formulário e enviar para um banco de
dados ou direcionar para um e-mail.
É necessário também definir o Método a ser utilizado, se POST ou GET.

122
É importante sempre verificar se os campos estão sendo colocados dentro do

retângulo pontilhado que é a área de nosso formulário.
Para inserir os objetos do formulário, siga o mesmo caminho para inserir um

formulário: Inserir > Formulário.
Os Campo de Texto permitem que se entre com textos e números. Pode ser
de linha simples ou multilinha. Para adicioná-los, clique em Inserir >
Formulários e selecione a opção Campo de Texto.
No campo ID, você deve digitar um nome para a caixa de texto.

123
No campo ID digite nome e logo em seguida clique em OK.
Chamados também de Caixas de Comentários, e senha onde ele

mascara tudo o que for digitado com sinais de (*) asteriscos.
Ao acrescentar um campo de texto é necessário preencher alguns campos de

propriedades.
124
Devemos dar um nome ao nosso campo de texto, definir o número de

caracteres visíveis (Larg. em caracteres), isso implicará no tamanho do campo
do formulário.
Caracteres (máx.) define um número máximo de caracteres que poderá ser

preenchido no campo.
Caixas de Seleção: São as caixas de checagem que permitem que se

selecione várias preferências do visitante e podem ter o seu estado inicial
selecionado ou não. Para criar uma nova, vá em Inserir > Formulário opção
Caixa de Seleção.
Em ID digite o texto caixa, logo em seguida clique em OK.

125
Ao se criar um grupo de opções de marcação, as opções deverão sempre

pertencer ao mesmo grupo.
Botão de Opção: Permite que o usuário faça apenas a seleção de um

objeto entre várias opções possíveis e também podem ter o seu estado
inicial selecionado ou não. Para criar um novo botão de opção, vá em
Inserir > Formulário e clique na opção Botão de Opção.
No campo ID, digite grupo, logo em seguida clique em OK.

126
Ao se criar um grupo de opções de marcação, as opções deverão sempre

pertencer ao mesmo grupo.
A opção Menu de Lista permite que se criem menus de listagem para

escolha do usuário. Para seleciona-la, vá em Inserir > Formulário e
selecione a opção Selecionar (Lista/Menu).
Em ID digite menu de lista e logo em seguida clique em OK.

127
Ao criar o menu de lista na barra de propriedades é necessário clicar no

botão Listar valores e preencher o Label (nome que vai aparecer ao
usuário) e valor do campo ao ser selecionado. Clique então no botão
Lista de Valores.
Em Rótulo de Item, digite masculino e logo em seguida clique em

adicionar.
128
Logo abaixo de Masculino, digite a palavra Feminino e logo em seguida

clique em OK.
Como padrão o campo se coloca como menu, mas podemos definir ele
também como uma lista.
Ao definirmos o campo como uma lista, podemos definir quantas linhas

serão visíveis e se será possível selecionar mais de um item na lista.
Basta marcar o campo Permitir múltiplas.
Botões: Permitem que se crie botões de ação de enviar (Action Submit

Form), e limpar campos (Action Reset Form), ou para eventos através
129
de linguagens de scripts (None). Para acessá-los, vá em Inserir >

Formulário e selecione a opção Botão.
No campo ID digite bt e logo em seguida clique em OK.
Em Valor você pode alterar o nome do botão. Digite nesse campo a

palavra Salvar.
130
Para limpar dados de um formulário, devemos criar um botão e marcar a

opção Redefinir formulário.
Encerramos assim nossa décima segunda aula de Dreamweaver CS6.
Exercícios:
1. Como podemos inserir um formulário em um documento HTML?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Qual é a função dos Campos de Texto?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Qual a utilidade da Caixa de Seleção?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
131
4. Qual a função dos Botões?

_______________________________________________________
_
________________________________________________________
________________________________________________________
________________________________________________________
5. Como podemos configurar um botão para que ele limpe os dados de

nosso formulário?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um documento em HTML e em seu interior, crie um formulário similar ao

criado abaixo.
132
Aula 13 – Desenvolvimento de Formulário completo no

Dreamweaver CS6
Criação de Formulário Completo
Para isso, inicialmente, vamos criar um novo documento HTML. Feche então o
documento atual e crie um novo. Sendo assim, clique em Criar Novo > HTML.
Vamos começar a desenvolver agora nosso formulário. Para isso, clique

em Inserir > Formulário e logo em seguida clique na opção
Formulário.
133
Vamos agora criar uma tabela dentro do formulário para separar cada
campo. Para isso, clique no menu Inserir e logo em seguida selecione a
opção Tabela.
Vamos criar uma tabela com cinco linhas e duas colunas. Para isso, digite
em Linhas o valor 5, em Colunas o valor 2, em Table Width digite
550, vamos utilizar um tabela sem bordas, então em Espessura da
Borda, digite 0. Logo em seguida clique em OK.
134
Já temos a tabela criada, agora vamos preenchê-la com os dados do

formulário.
Digite na primeira célula da primeira linha o texto Nome, na primeira

célula da segunda linha o texto E-mail, na primeira célula da terceira
linha o texto Assunto, na primeira célula da quarta linha Depoimentos.
Pronto! Na primeira coluna temos os dados que o usuário terá que

preencher no formulário. Na segunda coluna vamos colocar os campos do
formulário.
Na primeira célula da primeira linha da segunda iremos colocar um

textfield. Para isso selecione a célula e vá em Inserir > Formulário e
selecione a opção Campo de Texto.
135
No campo ID digite nome e logo em seguida clique em OK.
Em Caracteres (máx.) definimos um limite de caracteres. Vamos

preencher esse campo com o número 50.
136
Em
Larg. em caracteres vamos definir a largura do campo do nome.
Este campo vamos deixar com o número 50.
Clique na segunda célula da segunda coluna. Insira novamente uma

campo de texto pelo caminho Inserir > Formulário > Campo de
Texto. Nela preencha o campo ID como email e logo em seguida
clique em OK.
Em
Larg. em caracteres e Caracteres (max) digite o mesmo que
foi digitado para a célula acima.
Clique agora na terceira célula da segunda coluna. Vamos inserir nela

mais um campo de texto pelo caminho Inserir > Formulário >
Campo de Texto, e no campo ID do mesmo, digite assunto e logo em
seguida clique em OK.
Em
Larg. em caracteres e Caracteres (max) digite o mesmo que

foi digitado para a célula acima.
Agora para o campo depoimentos vamos inserir a área de texto para o

usuário poder digitar com liberdade o número de caracteres, para isso
clique na quarta célula da segunda coluna. Agora vá em Inserir >
Formulário e selecione a opção Área de Texto.
Em
Para o campo ID digite depo e logo em seguida clique em OK.
Vamos agora colocar os botões de enviar e apagar.
Clique na última célula da segunda coluna. Logo após isso vá em Inserir >
Formulário e logo em seguida selecione a opção Botão.
No campo ID digite botao e logo em seguida clique em OK.
Em Valor vamos alterar o nome do nosso botão para Enviar.
Vamos criar agora mais um botão seguindo pelo mesmo caminho Inserir >
Formulário e selecionando a opção Botão, mas dessa vez, vamos em sua ID
a palavra limpar, e logo em seguida clique em OK.
Em Ação vamos alterar para a opção Redefinir formulário.
No campo Valor digite Limpar.

Pronto. Concluímos assim a criação de nosso formulário. Encerramos
desta forma a décima terceira aula de Dreamweaver CS6. Exercícios:
1. Como podemos inserir uma tabela dentro de um formulário em um

documento HTML?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. É possível definir a quantidade de caracteres que podem ser

inseridos em um determinado campo. Descreva basicamente o
procedimento para determinar esse item.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Como inserimos botões em formulários?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
4. Cite uma funcionalidade de um formulário:

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um arquivo em HTML, em seu interior crie um Formulário completo similar

ao criado abaixo.
Aula 14 – Compreendendo a função de SPRY no Dreamweaver CS6
O que é o Spry?
O Framework Spry é na verdade, um conjunto de bibliotecas no formato

JavaScript e CSS, as quais permitem aos usuários do Dreamweaver
desenvolver interfaces mais ricas e dinâmicas.
Além de possibilitar a exibição de dados no formato XML e criar elementos

interativos em páginas que exibem conteúdo dinâmico sem a necessidade de
tais páginas se carregarem por completo.
O Dreamweaver CS6 disponibiliza o Spry em duas perspectivas, uma para

designers e outra para programadores.
Os designers poderão criar efeitos visuais como barra de menus, painéis com
abas, menu sanfonado, painel flexível, entre vários outros.
Já os programadores terão facilidades ao trabalhar com o Ajax e na exibição de
dados armazenados em arquivos XML.
Além desses recursos, tantos para designers quanto para programadores, o

Spry oferece alguns widgets que auxiliam na validação de formulários.
Vamos analisar a interface do Dreamweaver CS6 e localizar os recursos do

Spry.
As opções Spry se localizam em Inserir > Spry.
Utilizando o Spry
Com um novo documento HTML criado, clique no menu Inserir > Spry.
A aba Spry disponibiliza 16 recursos, divididos em três grupos.
O primeiro deles - de cima abaixo - é utilizado para se trabalhar com dados em

arquivos XML;
O segundo e o terceiro são os widgets oferecidos pelo Spry, utilizados na

validação de formulários e na criação de elementos de interface,
respectivamente.
Esses grupos de recursos localizados na aba Spry, estão localizados, também,
em outras abas.
Uma vez que cada grupo de recursos corresponde a finalidades distintas.
O que significa dizer que na aba Data, teremos o primeiro grupo; na aba
Formas o segundo e na aba Layout o terceiro grupo.
Os demais recursos oferecidos pelo Spry são os efeitos.
Quando você seleciona algum recurso do Spry no documento Window do

Dreamweaver, a aba Propriedades é atualizada e exibe as configurações de
recurso em questão.
A Barra de menus vem a facilitar a criação de menus.
Clique em Barra de menus.
Abre-se uma caixa solicitando o layout de menu que você quer criar. Clique
então em OK.
O Dreamweaver monta o menu de acordo com o solicitado.
Para poder remover / acrescentar itens, enfim, alterar os itens de seu menu,
você deve utilizar a barra de propriedades.
Na barra propriedades, em Texto digite: Novidades.
Agora clique em Item 1.1 na barra de propriedades.

Na barra de propriedades, em Texto, digite: Brasil.
Em Barra de menus renomeamos a barra de menu.
Na barra de propriedades, clique em Item 2.

Na barra de propriedades, em Texto, digite: Esportes.
Para adicionar um submenu, basta clicar no sinal de (+) na barra de

propriedades ou para remover clique no sinal de (-).Clique então no sinal de
para inserir um submenu.
Na barra de propriedades, em Texto, digite: Futebol.
Para adicionar um submenu para o Futebol, você terá que clicar no sinal de
(+) no campo correspondente na barra propriedades.
Para poder alterar as propriedades de formatação de nossa aplicação Spry,

você deve alterar o seu CSS.
Clique no painel Para criar uma nova formatação para a Barra de menu, em
CSS, clique em Nova regra CSS.
Vamos ver agora o Menu sanfonado. Clique no menu Inserir > Spry e em
seguida na opção Menu sanfonado do spry.
O Dreamweaver mostra em sua área de trabalho a estrutura do menu
Acordeão.
As alterações nele devem ser feitas através da caixa de ferramentas.
Clique em Rótulo 1, em Menu sanfonado do Spry, na área de trabalho e

digite Tarefas.
Em Rotulo 2, digite Cliente. Vamos adicionar mais uma label. Clique em

<div.Accordion#Accordion1> no rodapé do Dreamweaver.
Na barra de propriedades clique no sinal de (+).Apague Conteúdo 3 e digite
Portifolio.
Para alterar as propriedades do seu Spry é necessário utilizar a paleta de CSS.

Encerramos assim nossa décima quarta aula de
Dreamweaver CS6. Nesta aula, você conheceu o Spry Menu Bar,
o Spry Accordion e o Spry Effects.
Exercícios:
1. Como podemos inserir uma barra de menus do

spry?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
2. É possível desenvolver subcategorias em menus do spry?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
3. Como podemos adicionar um menu sanfonado do spry?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_______________________________________________________
4. Como podemos acrescentar um novo label em nosso menu

sanfonado?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um documento HTML, dentro dele insira uma barra de menus Spry na
Horizontal. Coloque os menos com os seguintes nomes: Comida, Limpeza,
Bebida e Eletrônicos.
Para cada submenu, coloque 3 tipos de comidas, materiais de limpeza, bebidas
e eletrônicos, no exemplo não iremos exibir o submenu de Comida, pois este é
interessante que desenvolva com os conhecimentos adquiridos em aula.
Exibindo Limpeza, Bebida e Eletrônicos:
Aula 15 – Trabalhando com Div’s AP
Como funcionam as Div’s AP no Dreamweaver?
O Dreamweaver permite que você crie e posicione facilmente Divs PA na

página. Também é possível criar Divs PA aninhadas.
Quando você insere uma Div PA, o Dreamweaver exibe um contorno da Div PA
na Visualização de design, por padrão, e realça o bloco quando você move o
ponteiro sobre ela.
Para desativar o auxílio visual que mostra os contornos da Div PA (ou de

qualquer elemento PA), desative Contornos do elemento PA e Contornos do
layout CSS no menu Exibir > Auxílios visuais. Você também pode ativar fundos
e o modelo de caixa dos elementos PA como um auxílio visual enquanto cria a
Div PA.
Após criar uma Div PA, adicione o conteúdo a ela colocando o ponto de
inserção na Div PA e adicionando o conteúdo como adicionaria um conteúdo a
uma página.
Criando Div AP
Para inserir uma Div AP, acessamos o menu Inserir> Objetos de layout>
Div AP.
Uma das facilidades da div AP é que você pode arrastá-la para onde quiser na
área de trabalho. Com isso podemos editar nossos modelos de layout com
mais praticidade, sem ficar se preocupando com códigos HTML ou CSS.
Para aumentarmos o tamanho da nossa Div, clicamos e arrastamos em um dos

seis pontos ancora da div.
Podemos adicionar qualquer conteúdo dentro de nossa Div, como imagens,

objetos flash, textos, formulários, etc...
Além disto, podemos sobrepor uma Div acima da outra, para modelarmos o
site da maneira que quisermos.
E visualizando no navegador, podemos ver que essas Divs alinham os objetos
da forma que quisermos.
Exercícios:
1. O Dreamweaver permite que você crie Divs?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
2. Cite uma das facilidades das divs?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
3. Existe alguma limitação de conteúdo para as divs?

________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Crie um arquivo de HTML, em seu interior, crie duas divs e dentro delas insira
imagens, após isso exiba o resultado em seu navegador. Depois isso, salve seu
arquivo.
Aula 16 – Entendendo o comportamento dos Navegadores
Como funcionam as ferramentas de comportamento de navegadores no

Dreamweaver
As ferramentas de comportamento do Dreamweaver permitem que você aplique as

ações comuns de JavaScript sem escrever nenhum JavaScript. Você pode fazer algo
acontecer em uma página quando seus usuários carregam ela, clicam em um
objeto ou movem o mouse pela tela.
Logicamente que o Dreamweaver possui as rotinas mais comuns de javascript, pois

o JavaScript é uma linguagem de scripts orientada à objetos e a sua estrutura e
construção dependem do seu conhecimento em relação à linguagem.
Como adicionar comportamentos a uma página
Adicionar um comportamento a uma página é incrivelmente simples – o complicado

são os detalhes. Eles se encontram no menu Comportamentos, acessado através de
Inspetor de Tags > Comportamentos.
Para adicionar um comportamento à sua figura, basta apenas clicar sobre o
sinal de (+) na esquerda superior do painel.
O pop-up é uma janela extra que abre no navegador ao visitar uma página
web ou acessar uma hiperligação específica. Isto é bem usado em anúncios e
publicidade.
Ao clicar no sinal de (+) na aba comportamentos, é exibido um menu com
várias opções.
A função abrir janela do navegador é a correspondente ao Pop-up. Ao ser clicada

exibe está janela:
Em URL a ser exibida definimos a página que abrirá. Em largura e altura da
janela, definimos as dimensões do pop-up. Em nome da janela definimos o
título do pop-up.
Após clicar no objeto em que for adicionado o pop-up, abrirá uma nova janela
do navegador com as dimensões definidas com o arquivo .html que você
escolheu em “URL a ser exibida”.
Exercícios
1. Que caminho acessamos para chegar nos comportamentos?

___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
2. O que é Pop-up?
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
3. O que definimos em URL a ser exibida?
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
4. O que definimos em nome da janela?

___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Crie um arquivo em HTML, insira uma imagem, utilizando o inspetor de tags,

crie um menu pop up baseado no arquivo Aula 15.
Abra seu projeto no navegador e clique na imagem para abrir o menu Pop-Up.
Aulas 17 a 18 – Criação de Site completo no Dreamweaver
CS6
Desenvolvimento de Site
No decorrer destas 4 aulas você aprendeu a desenvolver um site completo.

Utilizou diversas ferramentas e aumentou ainda mais seus conhecimentos.
Não há nada nessas 4 aulas que você já não tenha aprendido nas nossas 16
aulas anteriores, mas é sempre importante que você relembre cada passo,
como foi feito nessas 4 ultimas aulas.
Agora é com você, nunca deixe de praticar, pois agora você possui todos os
conhecimentos necessários para se tornar um grande Web Designer.
Exercício de Fixação
Desenvolva um site completo utilizando o Dreamweaver.

75 - Dreamweaver CS6

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

75 - Dreamweaver CS6

Enviado por

Direitos autorais:

Formatos disponíveis

1

Aula 1 - Introdução ao Adobe Dreamweaver CS6

O Adobe Dreamweaver é um Software para construção e edição de códigos de

Ao abrir o Dreamweaver podemos ver que é apresentada uma janela de

Podemos abrir documentos recentes do próprio Dreamweaver, também podemos

A área de trabalho do Dreamweaver permite visualizar documentos e

Visão geral dos elementos da área de trabalho

A tela de boas-vindas: Permite abrir um documento recente ou criar um novo

A barra de aplicativos: A parte superior da janela do aplicativo contém o

A barra de ferramentas de documento: Contém botões que fornecem opções

A barra de ferramentas Padrão: (Não exibida no layout padrão da área de

A barra de ferramentas de codificação: (Exibida somente na Visualização de

A barra de ferramentas Processamento do estilo: (Oculta por padrão.)

A janela do documento: Exibe o documento atual à medida que é criado e

O Inspetor de propriedades: Permite visualizar e alterar diversas propriedades

O seletor de tags: Localizado na barra de status, na parte inferior da janela

Painéis: Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem o

O painel Inserir: Contém botões para inserir vários tipos de objetos em um

1. O que contém no painel Inserir?

3. O que nos proporciona a tela de boas vindas?

4. Qual caminho utilizamos para encontrar a barra de

Abra o Adobe Dreamweaver CS6 e observe todos os recursos que estudamos

Aula 2 – Tags básicas de HTML

HTML significa Hyper Text Markup Language e é a linguagem de marcação de

As informações estão ligadas na forma de páginas ligadas entre si. A página é

HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que

O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee.

HTML é uma linguagem que possibilita apresentar informações (documentação

Genericamente falando, existem dois tipos de tags - tags de abertura:

Mas no navegador aparecerá como mostrado na imagem abaixo.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao

No navegador será apresentado como no exemplo abaixo.

Para a maioria dos navegadores é indiferente se você usa letras maiúscula,

Você deve escrever suas tags em um documento HTML. Um website é constituído

2. O que são Tags?

3. Faz diferença escrever em letras minúsculas ou maiúsculas?

4. Qual é o significado de HTML?

Obs: É muito importante que você modifique o arquivo trabalhando APENAS

Aula 3 - Configuração de páginas no Dreamweaver CS6 –

Após clicar em Novo, a próxima etapa chamada Editando Arquivos, definimos

O nome criado tem importância somente para o Dreamweaver.

Para cada página criada no Dreamweaver, é possível especificar as

A caixa de diálogo Propriedades da página permite especificar a família de fontes

O Dreamweaver define regras CSS para todas as propriedades especificadas nas

Definição de Aparência (CSS)

Tamanho: Especifica o tamanho de fonte padrão a ser usado nas páginas da

Cor do texto: Especifica a cor padrão em que as fontes serão processadas.

Imagem do fundo: Define uma imagem do fundo. Clique no botão Procurar e

Repetir: Especifica como a imagem do fundo será exibida na página:

• Selecione a opção Repeat-x para dispor a imagem lado a lado

Margem esquerda e Margem direita: Especifica o tamanho das margens

Margem superior e Margem inferior: Especifica o tamanho das margens

Definição de Aparência (HTML)

Em Aparência (HTML) você pode determinar uma imagem de fundo para o

Você também pode determinar as margens, tanto esquerda como superior.

Definição de Links (CSS)

Você pode também determinar se os links serão sublinhados ou não.

Definição de propriedades de Cabeçalho (CSS)

Na opção de Cabeçalho (CSS) você pode determinar a fonte do cabeçalho de

Também pode determinar a cor e tamanho de cada um dos sub cabeçalhos,

níveis de cabeçalhos, H1, H2, H3..., esses níveis no Dreamweaver são

Título: Especifica o título de página a ser exibido na barra de título da janela

Tipo de documento (DTD): Especifica uma definição de tipo de documento.

Codificação: Especifica a codificação usada nos caracteres do documento.