Dreamweavercs 6

DREAMWEAVER CS6
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 boas-

vindas, 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.
2
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.
3
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.
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.
4
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.
5
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?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
6
EXERCÍCIOS DE FIXAÇÃO:
Abra o Adobe Dreamweaver CS6 e observe todos os recursos que

estudamos em nossa primeira aula.
7
Faça sua Anotação
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
8
AULA 02 – 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.
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.
9
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 </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.
10
EXERCÍCIOS:
1. O que é HTML?
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
2. O que são Tags?

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

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
4. Qual é o significado de HTML?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
11
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.
12
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
13
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.
14
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.
15
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.).
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
16
• Selecione a opção Repeat para repetir ou dispor a imagem lado a lado
horizontalmente e verticalmente.
• 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.
17
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.
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.
18
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 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 pop-up.
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.
19
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)?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
4. Para que usamos a caixa de diálogo Propriedades da página?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
21
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.
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
27
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.
28
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?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
4. Quais são as teclas de atalho para acessar o painel Propriedades da

Página?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
29
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.
33
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 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 regra-alvo. 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 regra-alvo.
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.
ID: Atribui uma ID à seleção. O menu pop-up ID (se aplicável) lista todas as IDs
declaradas não utilizadas do documento.
35
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.
• _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.
36
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?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
______________________________________________________________________
________________________________________________________________
37
Crie um arquivo em HTML. Usando a ferramenta Texto, edite diversos textos em

sua página, assim como o demonstrado na imagem abaixo.
38
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
39
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 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.
40
- Inicialmente vamos criar um novo documento HTML.
- 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.
- 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.
43
- 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.
45
- No canto esquerdo, temos as Ferramentas de Ponto Ativo. Elas têm como
função criar links somente em partes da imagem. Clique na ferramenta Ponto Ativo
Retângulo.
- 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.
46
EXERCÍCIOS:
1. Como podemos inserir uma nova imagem a um documento HTML?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
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?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
47
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.
48
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
49
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.
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 páginas 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 contrário, ficará com um link quebrado (que não o
leva a página alguma).
50
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 página para qual desejamos o link se encontrar no mesmo diretório da

página 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 página 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:
51
Logo em seguida clique em Abrir.
Selecione o arquivo hyper.html e clique em Abrir.
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.
52
Iremos inserir um novo hyperlink nesse texto através do menu Inserir >
Hyperlink.
Portanto, clique no menu Inserir e logo em seguida em Hyperlink.
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 está a imagem abaixo,
logo em seguida clique em OK.
53
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).
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.
54
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.
55
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.
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.
56
Terminamos assim nossa edição. Clique agora em OK.
57
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?
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
58
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.
59
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
60
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.
61
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.
62
Em Colunas, digite 3.
Em Espessura da borda digite 1.
63
Por fim, clique em OK.
64
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.
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.
65
Ao lado do botão mesclar, podemos visualizar o botão dividir células, onde
podemos dividir as células em colunas ou linhas.
Logo ao lado, temos as opções para alteração de dimensões da célula, sendo

elas largura (L) e altura (A).
66
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.
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.
67
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.
Para aumentar o número de linhas, devemos modificar o seu valor na caixa

Linhas.
68
Selecione agora as três primeiras células da primeira linha.
Clique agora na opção Mesclar Células.
69
Marque a caixa Cabeçalho.
Agora digite na célula mesclada Aula de Tabelas e centralize o texto para que
fique similar a imagem abaixo.
70
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.
Agora na célula da primeira coluna, digite Aprendendo, assim como na imagem

abaixo.
71
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.
Na célula que você acabou de mesclar, digite Valores e Mais Valores.
72
Vamos aumenta agora o tamanho de nossa tabela. Para isso, clique na tag <tr>.
Em A (altura), digite o valor de 400.
73
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.
Agora vamos salvar nosso arquivo. Para isso clique no menu Arquivo e logo em
seguida na opção Salvar.
74
Digite tabela e logo em seguida clique em Salvar.
75
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?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
4. Como podemos adicionar uma linha a tabela?

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

demonstrada abaixo.
77
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
78
AULA 9 – TRABALHANDO COM FRAMES
Entendendo a Criação de Frames
A construção de páginas 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.
79
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.
80
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.
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.
81
No campo Link, escreva Primeira página.
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.
82
Para salvar todos os Frames, clique em Arquivo e em seguida clique em Salvar
Tudo.
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.
83
Agora o Dreamweaver quer salvar o menu, observe que o menu ficará agora
com a borda mais grossa. Digite Menu e clique em Salvar.
O terceiro frame a ser salvo é o topo. Digite Topo e clique em Salvar.
84
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.
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.
85
Com o topo selecionado, vamos inserir bordas e alterar a cor da borda. Para
isso, na barra de propriedades, opção Bordas selecione Sim.
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.
86
EXERCÍCIOS:
1. Qual o caminho para criarmos um frame do zero?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
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?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
87
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.
88
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
89
AULA 10 – INTEGRAÇÃO DE FLASH NO
DREAMWEAVER CS6
Compreendendo a integração do Flash com o Dreamweaver CS6
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.
90
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....
91
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.
92
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.
Selecione o arquivo flash e logo em seguida clique em OK.
93
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.
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.
94
Em L e A, é definida a Altura e a Largura de nosso objeto Flash.
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.
95
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.
Em Qualidade podemos definir a qualidade de imagem da animação .swf.
96
Em Escala podemos definir entre Padrão (mostrar tudo), sem bordas ou
ajuste exato.
Em alinhar, podemos definir o alinhamento na animação na página.
97
Em modoW podemos definir se o fundo da animação será opaca ou
transparente.
Em Fundo, você pode definir uma cor de fundo para a animação.
98
No botão Editar, podemos editar o arquivo do flash.
No botão Executar o Dreamweaver irá executar o arquivo .swf para que você
teste-o e veja como estão as configurações.
99
Em Parâmetros você pode definir a versão do flash player exigido pelo site.
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.
100
EXERCÍCIOS:
1. O que é um arquivo em Flash?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
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?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
101
Crie um arquivo em HTML e insira um arquivo de Flash dentro dele como

demonstrado na imagem abaixo.
102
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
103
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‖.
104
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 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.
105
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.
106
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.
107
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.
Na opção Fundo podemos definir as configurações de plano de fundo da célula.

Clique em Bloco.
108
Em Bloco, podemos definir as configurações de parágrafos do texto, como
espaçamento entre palavras, alinhamentos, etc. Clique agora em Caixa.
109
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.
110
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.
111
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, sans-serif.
112
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.
113
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.
114
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.
115
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.
116
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.
117
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.
118
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.
119
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.
120
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.
121
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.
Depois de criar a classe, selecione o elemento que irá receber a classe e aplique
ela ao conteúdo selecionado pela barra de propriedades.
122
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.
123
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.
124
EXERCÍCIOS:
1. O que são folhas de estilo?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
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?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
125
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.
126
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
127
AULA 12 – ENTENDENDO O FUNCIONAMENTO DOS FORMULÁRIOS NO
DREAMWEAVER CS6
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.
128
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.
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.
129
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.
É 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.
130
No campo ID, você deve digitar um nome para a caixa de texto.
No campo ID digite nome e logo em seguida clique em OK.
131
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.
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.
132
Em ID digite o texto caixa, logo em seguida clique em OK.
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.
133
No campo ID, digite grupo, logo em seguida clique em OK.
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).
134
Em ID digite menu de lista e logo em seguida clique em OK.
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.
135
Em Rótulo de Item, digite masculino e logo em seguida clique em adicionar.
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.
136
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 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.
137
Em Valor você pode alterar o nome do botão. Digite nesse campo a palavra
Salvar.
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.
138
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?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
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?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
139
Crie um documento em HTML e em seu interior, crie um formulário similar ao

criado abaixo.
140
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
141
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.
142
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.
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.
143
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.
No campo ID digite nome e logo em seguida clique em OK.
144
Em Caracteres (máx.) definimos um limite de caracteres. Vamos preencher esse
campo com o número 50.
145
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.
146
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.
147
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.
148
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.
149
No campo ID digite botao e logo em seguida clique em OK.
Em Valor vamos alterar o nome do nosso botão para Enviar.
150
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.
151
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.
152
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:

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

ao criado abaixo.
154
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
155
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.
156
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.
157
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.
158
Na barra propriedades, em Texto digite: Novidades.
Agora clique em Item 1.1 na barra de propriedades.
159
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.
160
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.
161
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.
162
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.
163
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.
164
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.
165
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?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
166
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:
167
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
168
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.
169
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.
170
E visualizando no navegador, podemos ver que essas Divs alinham os objetos
da forma que quisermos.
171
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?

______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
172
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.
173
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
174
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.
175
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‖.
176
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?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
177
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.
178
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
179
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.
180
EXERCÍCIO DE FIXAÇÃO
Desenvolva um site completo utilizando o Dreamweaver.
181
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
182

Dreamweavercs 6

Enviado por

Dados do documento

Descrição original:

Título original

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

Dreamweavercs 6

Enviado por

Direitos autorais:

Formatos disponíveis

DREAMWEAVER CS6

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

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

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

C. Alternador 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.) Contém

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

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 ferramentas

Abra o Adobe Dreamweaver CS6 e observe todos os recursos que

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. Ao

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

Essa nossa segunda apostila será referente a uma breve explicação da

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

Mas no navegador aparecerá como mostrado na imagem abaixo.

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 é

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

Aprendendo os primeiros passos para configurar o Dreamweaver

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

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

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

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

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 No-repeat para exibir a imagem do fundo apenas uma

Margem esquerda e Margem direita: Especifica o tamanho das margens

Margem superior e Margem inferior: Especifica o tamanho das margens

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.

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

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. Por

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

Formulário de normalização unicode

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

4. Para que usamos a caixa de diálogo Propriedades da página?

Crie um arquivo em HTML.