Buscar

dreamweaver_cs6

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 169 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 169 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 169 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

2 
 
Sumário 
Aula 1 - Introdução ao Adobe Dreamweaver CS6 ............................... 5 
O que é o Dreamweaver CS6? .................................................... 5 
Visão geral dos elementos da área de trabalho ............................. 7 
Exercícios: ............................................................................... 9 
Exercícios de Fixação: ............................................................. 10 
Aula 02 – Tags básicas de HTML .................................................... 11 
O que é HTML? ....................................................................... 11 
Tags HTML ............................................................................. 12 
Exercícios: ............................................................................. 13 
Exercícios de Fixação: ............................................................. 14 
Aula 3 - Configuração de páginas no Dreamweaver CS6 – Parte 1 ...... 15 
Aprendendo os primeiros passos para configurar o Dreamweaver . 15 
Definição de Aparência (CSS) ................................................... 17 
Definição de Aparência (HTML) ................................................. 19 
Definição de Links (CSS) ......................................................... 19 
Definição de propriedades de Cabeçalho (CSS) ........................... 20 
Definições de Título/codificação ................................................ 20 
Formulário de normalização unicode ......................................... 21 
Exercícios: ............................................................................. 22 
Exercícios de Fixação: ............................................................. 23 
Aula 4 - Configuração de páginas no Dreamweaver CS6 – Parte 2 ...... 24 
Continuando a Configuração de Página ...................................... 24 
Formatação de Hyperlinks ....................................................... 28 
Exercícios: ............................................................................. 29 
Exercícios de Fixação: ............................................................. 30 
Aula 5 – Trabalhando com Textos .................................................. 31 
Formatando textos no Dreamweaver ......................................... 31 
Editar regras CSS no Inspetor de propriedades .......................... 32 
Exercícios: ............................................................................. 37 
Exercícios de Fixação: ............................................................. 38 
Aula 6 – Trabalhando com Imagens ............................................... 39 
Como funcionam as imagens no Dreamweaver CS6 .................... 39 
GIF (Graphic Interchange Format) ............................................ 39 
JPEG (Joint Photographic Experts Group) ................................... 39 
PNG (Portable Network Group) ................................................. 39 
Exercícios: ............................................................................. 47 
Exercícios de Fixação: ............................................................. 48 
 
 
3 
Aula 7 – Compreendendo o funcionamento dos Hyperlinks. ............... 49 
Como funcionam os Hyperlinks no Dreamweaver CS6? ................ 49 
Links Absolutos ...................................................................... 49 
Links Absolutos ...................................................................... 50 
Exercícios: ............................................................................. 57 
Exercícios de Fixação: ............................................................. 58 
Aula 8 – Tabelas no Dreamweaver CS6 ........................................... 59 
Aprendendo a trabalhar com tabelas no Dreamweaver CS6. ........ 59 
Exercícios: ............................................................................. 73 
Exercícios de Fixação: ............................................................. 74 
Aula 9 – Trabalhando com Frames ................................................. 75 
Entendendo a Criação de Frames .............................................. 75 
Propriedades dos Frames ......................................................... 76 
Exercícios: ............................................................................. 83 
Exercícios de Fixação: ............................................................. 84 
Aula 10 – Integração de Flash no Dreamweaver CS6 ........................ 85 
Compreendendo a integração do Flash com o Dreamweaver CS6 .. 85 
Exercícios: ............................................................................. 96 
Exercícios de Fixação: ............................................................. 97 
Aula 11 – Trabalhando com Folhas de Estilo (CSS) ........................... 98 
Aprendendo o que são Folhas de Estilo ...................................... 98 
Utilizando Folhas de Estilo ...................................................... 100 
O que são as Classes? ............................................................ 112 
Exercícios: ............................................................................ 119 
Exercícios de Fixação: ............................................................ 120 
Aula 12 – Entendendo o funcionamento dos Formulários no Dreamweaver 
CS6 ........................................................................................... 121 
Tipos de Formulários e seus elementos .................................... 121 
Criando um Formulário ........................................................... 122 
Exercícios: ............................................................................ 132 
Exercícios de Fixação: ............................................................ 133 
Aula 13 – Desenvolvimento de Formulário completo no Dreamweaver CS6 
Criação de Formulário Completo .............................................. 134 
Exercícios: ............................................................................ 145 
Exercícios de Fixação: ............................................................ 146 
Aula 14 – Compreendendo a função de SPRY no Dreamweaver CS6 .. 147 
O que é o Spry? .................................................................... 147 
Utilizando o Spry ................................................................... 148 
Exercícios: ............................................................................ 157 
Exercícios de Fixação: ............................................................ 158 
Aula 15 – Trabalhando com Div’s AP.............................................. 159 
Como funcionam as Div’s AP no Dreamweaver? ......................... 159 
Criando Div AP ...................................................................... 159 
Exercícios: ............................................................................ 162 
Exercícios de Fixação: ............................................................ 163 
 
4 
Aula 16 – Entendendo o comportamento dos Navegadores ............... 164 
Como funcionam as ferramentas de comportamento de navegadores no 
Dreamweaver ....................................................................... 164 
Como adicionar comportamentos a uma página ......................... 164 
Exercícios ............................................................................. 166 
Exercícios de Fixação: ............................................................ 167 
Aulas 17, 18, 19 e 20 – Criação de Site completo no Dreamweaver CS6168 
Desenvolvimento de Site ........................................................ 168 
Exercício de Fixação ............................................................... 169 
 
 
 
 
5 
 
Aula 1 - Introdução ao Adobe Dreamweaver CS6 
 
O que é o Dreamweaver CS6? 
 
O Adobe Dreamweaver é um Software para construção e edição de códigos de 
várias linguagens voltadas para a web, ou seja, é um programa largamenteutilizado 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. 
 
 
 
 
 
 
 
 
6 
A área de trabalho do Dreamweaver permite visualizar documentos e 
propriedades de objeto. A área de trabalho também coloca muitas operações 
comuns em barras de ferramentas para que você possa fazer alterações 
rapidamente em seus documentos. 
 
A. Barra de aplicativos. 
B. Barra de ferramentas de documento. 
C. Alternador da área de trabalho. 
D. Janela do documento. 
E. CS Live. 
F. Grupos de painéis. 
G. Seletor de tags. 
H. Inspetor de propriedades. 
I. Painel Arquivos. 
 
 
7 
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. 
 
 
 
 
 
8 
 
 
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. 
 
 
O painel Inserir: Contém botões para inserir vários tipos de objetos em um 
documento, como imagens, tabelas e elementos de mídia. Cada objeto é uma 
parte do código HTML que permite definir vários atributos à medida que são 
inseridos. Por exemplo, você pode inserir uma tabela clicando no botão Tabela 
do painel Inserir. Se preferir, você pode inserir objetos usando o menu Inserir 
em vez do painel Inserir. 
 
 
O painel Arquivos: Permite gerenciar arquivos e pastas, que podem fazer parte 
de um site do Dreamweaver ou estar em um servidor remoto. O painel Arquivos 
também permite acessar todos os arquivos do disco local, assim como o Windows 
Explorer. 
 
 
 
 
 
9 
Exercícios: 
 
1. O que contém no painel Inserir? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
2. O que é o Dreamweaver? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
3. O que nos proporciona a tela de boas vindas? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
4. Qual caminho utilizamos para encontrar a barra de 
ferramentas Padrão? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
 
 
 
10 
Exercícios de Fixação: 
 
Abra o Adobe Dreamweaver CS6 e observe todos os recursos que estudamos 
em nossa primeira aula. 
 
 
 
 
 
 
11 
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. 
 
 
 
12 
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. 
 
 
 
13 
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? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________ 
 
 
 
14 
Exercícios de Fixação: 
 
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. 
 
 
 
 
15 
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. 
 
16 
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. 
 
 
 
17 
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. 
 
18 
(Para evitar que a imagem do fundo seja disposta lado a lado, use as folhas de 
estilos em cascata para desativar esse recurso.) 
 
 Repetir: Especifica como a imagem do fundo será exibida na página: 
 
• Selecione a opção No-repeat para exibir a imagem do fundo apenas uma vez. 
• Selecione a opção Repeat para repetir ou dispor a imagem lado a lado 
horizontalmente e verticalmente. 
• 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. 
 
 
 
 
 
19 
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. 
 
 
 
20 
 
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 cadaum 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. 
 
 
21 
 
Formulário de normalização unicode 
 
Selecione uma destas opções caso você escolha Unicode (UTF-8) como 
codificação padrão. 
 
Há quatro formulários de normalização unicode. O mais importante deles é o 
formulário de normalização C, pois é o formulário mais comum utilizado no 
modelo de caractere da World Wide Web. A Adobe fornece os outros três para 
ser mais completa. 
 
 
 
22 
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? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
 
 
 
23 
Exercícios de Fixação: 
 
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. 
 
 
 
 
 
24 
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. 
 
 
25 
 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. 
 
 
 
26 
 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. 
 
 
 
 
27 
 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. 
 
 
 
28 
 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 
 
 
 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. 
 
 
29 
 
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? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
 
 
30 
Exercícios de Fixação: 
 
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. 
 
 
 
 
 
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. 
 
 Definir propriedades de texto no Inspetor de propriedades 
 
 
32 
 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. 
 
 
 
34 
 
 3 – Clique agora em HTML. 
 
 
 
 4 – Aqui você poderá editar diversas opções, observe abaixo. 
 
 
 
 
35 
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. 
 
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: 
 
 
36 
• _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. 
 
 
 
 
 
 
37 
Exercícios: 
 
1. Podemos editar estilos de formatação no Dreamweaver? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________ 
 
2. Como funciona a regra alvo? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________ 
 
3. O que faz o campo ID? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________ 
 
4. O que é a lista ordenada? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________ 
 
 
 
 
38 
Exercícios de Fixação: 
 
Crie um arquivo em HTML. Usando a ferramenta Texto, edite diversos textos 
em sua página, assim como o demonstrado na imagem abaixo. 
 
 
 
 
 
 
39 
Aula 6 – Trabalhandocom 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. 
 
 
 
 
41 
- 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. 
 
 
 
- Selecione logo em seguida a imagem Banner.jpg. 
 
 
 
 
42 
 
- 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. 
 
 
 
- 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. 
 
 
 
43 
- 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. 
 
 
- 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. 
 
 
44 
- 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. 
 
 
- 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 tem 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. 
 
 
 
46 
- 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. 
 
47 
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? 
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________ 
 
 
 
 
48 
Exercícios de Fixação: 
 
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. 
 
 
 
 
 
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 chegara 
determinada página, incluindo o protocolo utilizado pelo navegador. 
 
Esse tipo de link é muito usado para paginas que não pertençam ao seu site, 
necessitando, portanto, do caminho completo para que a sua funcionalidade 
esteja correta. 
 
Um problema referente a links absolutos é que, como são para páginas que não 
estão dentro de seu site, caso o webmaster da página troque de local ou 
remova a mesma, você deve atualiza-la; caso contrario, ficará com um link 
quebrado (que não o leva a página alguma). 
 
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 pagina para qual desejamos o link se encontrar no mesmo diretório da 
pagina atual, digite seu nome e extensão no campo Link. 
 
Vamos destacar que sempre o Link Relativo leva em consideração como ponto 
inicial a localização da pagina atual em que estamos inserindo o link. 
 
Abra agora o objeto com o nome de hyper.html para que possamos editá-lo. 
Para isso clique no menu Arquivo: 
 
 
 
 
 
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. 
 
 
 
 
 
 
 
53 
Você pode escolher entre um arquivo que esteja junto de seus arquivos, ou um 
link externo, de outro servidor. 
 
Neste caso iremos redirecionar este link para o site http://www.google.com. 
A operação é simples, você deve apenas clicar com o mouse na caixa de texto 
da opção Link e digitar http://www.google.com da mesma forma em que 
esta a imagem abaixo, logo em seguida clique em OK. 
 
 
 
 
54 
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. 
 
http://www.google.com.br/
 
55 
 
 
Vamos mudar as cores agora dos links visitados. Para isso, clique na caixa de 
cores da opção Links Visitados e selecione a cor vermelha em destaque na 
imagem abaixo. 
 
 
 
Agora vamos mudar a cor do link no momento em que o mouse estiver sobre 
ele. Portanto, clique na caixa de cores da opção Links de e selecione a cor cinza 
em destaque na imagem abaixo. 
 
 
 
 
 
 
56 
Agora iremos mudar a cor dos Links ativos. Para isso, clique na caixa de cores 
da opção Links ativos e selecione a cor branca em destaque na imagem abaixo. 
 
 
 
Terminamos assim nossa edição. Clique agora em OK. 
 
 
 
 
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 
Exercícios de Fixação: 
 
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. 
 
 
 
 
 
http://www.google.com.br/
 
59 
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. 
 
 
 
 
 
 
60 
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. 
 
 
 
61 
 
 
 Em Colunas, digite 3. 
 
 
 
 
 Em Espessura da borda digite 1. 
 
 
 
62 
Por fim, clique em OK. 
 
 
 
 Na Barra de Propriedades da tabela, podemos mudar suas 
configurações. Podemos alterar o alinhamento da tabela, sua cor de fundo, de 
borda e sua imagem de fundo, caso ache interessante adicionar. 
 
 Para podermos selecionar as células (TD), linhas (TR) ou toda a nossa 
tabela (Table), podemos usar o rodapé do Dreamweaver. 
 
 Clique na primeira célula da tabela. 
 
 
 
63 
 
 Ao clicar em uma célula ou selecionar mais de uma célula, note que a barra 
de propriedades muda para a formatação de texto e abaixo as propriedades 
referentes as células. 
 
As possibilidades de alteração das células são a opção de mesclar duas ou mais 
células. 
 
 
 
 Ao lado do botão mesclar, podemos visualizar o botão dividir células, 
onde podemosdividir as células em colunas ou linhas. 
 
 
 
64 
 
 
 Logo ao lado, temos as opções para alteração de dimensões da célula, 
sendo elas largura (L) e altura (A). 
 
 A opção Sem quebra tem como objetivo impedir que o conteúdo quebre 
para a linha de baixo da célula ao alcançar a largura da célula. 
 
 
 
 
65 
 A opção Cabeçalho, permite atribuir a célula a propriedade de célula de 
cabeçalho (título), acrescenta um negrito e um peso maior a fonte. 
 
 
 Podemos também acrescentar cor de fundo e de borda á nossa tabela, bem 
como imagem de fundo. 
 
 Clique na tag <table> acima da barra de propriedades. 
 
 
 
 
66 
 Para aumentar o numero de linhas, devemos modificar o seu valor na caixa 
Linhas. 
 
 
 
 Selecione agora as três primeiras células da primeira linha. 
 
 
 
 
 
 
67 
Clique agora na opção Mesclar Células. 
 
 
 
Marque a caixa Cabeçalho. 
 
 
 
 
 
68 
 Agora digite na célula mesclada Aula de Tabelas e centralize o texto para 
que fique similar a imagem abaixo. 
 
 
 
Agora vamos mesclar a primeira coluna de nossa tabela, para isso, selecione as 
duas células em destaque na imagem abaixo e clique no botão Mesclar Células. 
 
 
 
 Agora na célula da primeira coluna, digite Aprendendo, assim como na 
imagem abaixo. 
 
69 
 
 
 
 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. 
 
 
 
 
 
70 
Na célula que você acabou de mesclar, digite Valores e Mais Valores. 
 
 
 
 Vamos aumenta agora o tamanho de nossa tabela. Para isso, clique na tag 
<tr>. 
 
 
 
 
 
 
71 
Em A (altura), digite o valor de 400. 
 
 
 
Vamos mudar agora a cor do cabeçalho da tabela, para isso, selecione o 
Cabeçalho e clique na caixa de cores da opção Fundo que se localiza na aba de 
propriedades. Selecione a cor que preferir. 
 
 
 
 
 
72 
 Agora vamos salvar nosso arquivo. Para isso clique no menu Arquivo e 
logo em seguida na opção Salvar. 
 
 
 
 Digite tabela e logo em seguida clique em Salvar. 
 
 
 
 
 
73 
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? 
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________ 
 
 
 
 
74 
Exercícios de Fixação: 
 
Crie um documento em HTML e em seu interior crie uma tabela similar à 
demonstrada abaixo. 
 
 
 
 
 
75 
Aula 9 – Trabalhando com Frames 
 
Entendendo a Criação de Frames 
 
A construção de paginas em Frames, embora seja possível, é considerada 
ultrapassada e fora de padrões de layout atuais e futuros. Mas em algumas 
situações ela pode se tornar muito útil. 
 
Embora uma página baseada em frames funcione como uma única página WEB, 
cada frame, contém um único documento de HTM que pode incluir conteúdos 
completamente separados e barras de rolagem independentes. 
 
Um frameset, pode ser considerado um conjunto de frames e a página de 
frameset é que define como um conjunto. 
 
Para criar um frame, você deve clicar em Arquivo e logo em seguida em 
HTML. 
 
Clique após isso em Inserir > HTML > Molduras. 
 
Clique em Superior aninhada a direita. 
 
Ao clicar no botão Criar, será solicitado que se dê nome aos frames que 
compõe o seu layout. 
Você pode deixar os nomes padrões ou modificar de uma forma que facilite a 
identificação posterior. 
Em nosso caso, no campo título iremos digitar pagina e logo em seguida, clicar 
em OK. 
 
 
 
 
76 
 
 
 
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. 
 
 
 
 
77 
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. 
 
 
 
 
78 
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. 
 
 
79 
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. 
 
 
 
80 
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. 
 
 
 
 
 
 
 
81 
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. 
 
 
 
82 
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. 
 
83 
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? 
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________ 
 
 
 
84 
Exercícios de Fixação: 
 
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. 
 
 
 
 
 
85 
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. 
 
 
86 
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.... 
 
 
 
 
87 
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. 
 
 
 
 
 
 
 
 
88 
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. 
 
 
89 
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. 
 
 
 
 
 
 
90 
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. 
 
 
 
 
91 
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. 
 
 
 
 
92 
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. 
 
 
 
 
 
 
 
93 
 Em modoW podemos definir se o fundo da animação será opaca ou 
transparente. 
 
 
 
 
 
 Em Fundo, você pode definir uma cor de fundo pra animação. 
 
 
 
 
 
94 
 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. 
 
 
 
95 
 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. 
 
96 
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? 
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________ 
 
 
 
 
97 
Exercícios de Fixação: 
 
Crie um arquivo em HTML e insira um arquivo de Flash dentro dele como 
demonstrado na imagem abaixo. 
 
 
 
 
 
98 
Aula 11 – Trabalhando com Folhas de Estilo (CSS) 
 
Aprendendo o que são Folhas de Estilo 
 
Mas o que seriam folhas de estilo? Uma folha de estilo é um conjunto de regras 
que informa a um programa responsável pela formatação de um documento, 
como organizar a página, como posicionar e expor o texto e, dependendo de 
onde é aplicada, como organizar uma coleção de documentos. 
 
A maior parte dos programas de editoração eletrônica e processadores de texto 
modernos trabalham com folhas de estilos. O processo consiste em definir um 
rótulo (nome do estilo) para um determinado parágrafo e em seguida alterar 
seus atributos. 
 
Todoo 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”. 
 
 
99 
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. 
 
 
100 
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. 
 
 
 
 
 
101 
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. 
 
 
 
 
 
 
102 
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. 
 
 
 
 
 
 
103 
 
 
 
Na opção Fundo podemos definir as configurações de plano de fundo da célula. 
Clique em Bloco. 
 
 
 
Em Bloco, podemos definir as configurações de parágrafos do texto, como 
espaçamento entre palavras, alinhamentos, etc. Clique agora em Caixa. 
 
 
 
 
104 
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. 
 
 
 
105 
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. 
 
 
 
106 
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. 
 
 
 
107 
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. 
 
 
 
 
 
 
108 
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. 
 
 
 
 
 
 
 
109 
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. 
 
 
 
 
110 
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. 
 
 
 
 
 
111 
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. 
 
 
 
 
112 
 
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. 
 
 
 
 
113 
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. 
 
 
 
 
114 
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. 
 
 
 
 
115 
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. 
 
 
 
 
116 
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. 
 
 
117 
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. 
 
 
 
 
118 
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

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes