75 - Dreamweaver CS6
75 - Dreamweaver CS6
75 - Dreamweaver CS6
2
3
Sumário
Aula 1 - Introdução ao Adobe Dreamweaver CS6 ..................................................................................................... 5
Aula 2 – Tags básicas de HTML................................................................................................................................10
Aula 3 - Configuração de páginas no Dreamweaver CS6 – Parte 1 .........................................................................14
Aula 4 - Configuração de páginas no Dreamweaver CS6 – Parte 2 .........................................................................23
Aula 5 – Trabalhando com Textos ...........................................................................................................................31
Aula 6 – Trabalhando com Imagens ........................................................................................................................38
Aula 7 – Compreendendo o funcionamento dos Hyperlinks. .................................................................................47
Aula 8 – Tabelas no Dreamweaver CS6 ...................................................................................................................58
Aula 9 – Trabalhando com Frames..........................................................................................................................74
Aula 10 – Integração de Flash no Dreamweaver CS6..............................................................................................83
Aula 11 – Trabalhando com Folhas de Estilo (CSS) .................................................................................................98
Aula 12 – Entendendo o funcionamento dos Formulários no Dreamweaver CS6................................................119
Aula 13 – Desenvolvimento de Formulário completo no Dreamweaver CS6 .......................................................132
Aula 14 – Compreendendo a função de SPRY no Dreamweaver CS6 ..............................................................145
Aula 15 – Trabalhando com Div’s AP.....................................................................................................................156
Aula 16 – Entendendo o comportamento dos Navegadores ................................................................................161
Aulas 17 a 18 – Criação de Site completo no Dreamweaver CS6 .........................................................................166
4
5
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.
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:
2. O que é o Dreamweaver?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
Exercícios de Fixação:
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.
Se você quer construir websites terá que conhecer HTML. Mesmo que você use
um programa para criar seu website, tal como o Dreamweaver, um conhecimento
básico de HTML será necessário para tornar as coisas mais simples e para criar
um website de melhor qualidade.
Essa nossa segunda apostila será referente a uma breve explicação da linguagem,
para maiores informações sobre HTML, entre em contato com seu instrutor.
Tags HTML
Tags são rótulos usados para informar ao navegador como deve ser apresentado
o website. Todas as tags têm o mesmo formato: começam com um sinal de
menor "<" e acabam com um sinal de maior ">".
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento
será processado segundo o comando contido na tag.
Mas, como toda regra tem sua exceção, no HTML a exceção é que para algumas
tags a abertura e o fechamento se dá na mesma tag.
Tais tags contêm comandos que não necessitam de um conteúdo para serem
processados, isto é, são tags de comandos isolados, por exemplo, um pulo de
linha é conseguido com a tag <br />.
A tag <b> informa ao navegador que todo o texto colocado entre <b> e
12
</b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para
"bold" - negrito.)
Exercícios:
1. O que é HTML?
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
____________________________________________________
____________________________________________________
___________________________________________________
Exercícios de Fixação:
Crie um arquivo em HTML e edite seu código para que ele fique da forma
abaixo.
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.
Propriedades da Página
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.
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.
• Selecione a opção No-repeat para exibir a imagem do fundo apenas uma vez.
• Selecione a opção Repeat para repetir ou dispor a imagem lado a lado
horizontalmente e verticalmente.
17
Definições de Título/codificação
Selecione uma destas opções caso você escolha Unicode (UTF-8) como
codificação padrão.
Exercícios:
____________________________________________________
____________________________________________________
Nesta aula iremos ver passo a passo como se configura uma página no
Dreamweaver CS6.
Feito isto aparecerá duas janelas, uma para os códigos e outra para a
visualização.
24
Abrirá uma janela com todas as propriedades de página que você pode
alterar.
Podemos selecionar uma imagem para plano de fundo conforme você viu
anteriormente nas configurações de página, vamos aplicar uma imagem do
Windows Seven.
27
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.
Exercícios:
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
Exercícios de Fixação:
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.
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
uma nova regra, precisará preencher a caixa de diálogo Nova regra CSS. Para
obter mais informações, consulte os links no final deste tópico. Editar regra:
Abre a caixa de diálogo Definição de regra CSS da regraalvo. Se você selecionar
Nova regra CSS no menu pop-up Regra-alvo e clicar no botão Editar regra, o
Dreamweaver abrirá a caixa de diálogo de definição Nova regra CSS em vez disso.
Painel CSS: Abre o painel de estilos CSS e exibe as propriedades da regra-
alvo na visualização Atual.
Fonte: Altera a fonte da regra-alvo.
Tamanho: Define o tamanho de fonte da regra-alvo.
Cor do texto: Define a cor selecionada como a cor da fonte na regraalvo.
Selecione uma cor aceita pela Web clicando na caixa de cores ou digite um valor
hexadecimal (por exemplo, #FF0000) no campo de texto adjacente.
Negrito: Adiciona a propriedade de negrito à regra-alvo.
Itálico: Adiciona a propriedade de itálico à regra-alvo. Alinhar à
esquerda, Centralizar e Alinhar à direita: Adiciona as respectivas
propriedades de alinhamento à regra-alvo.
ID: Atribui uma ID à seleção. O menu pop-up ID (se aplicável) lista todas as
IDs declaradas não utilizadas do documento.
Exercícios:
Exercícios de Fixação:
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.
- Muito bem! Nossa imagem foi inserida com sucesso na área de trabalho do
Dreamweaver CS6.
- Para reverter a ação que acabamos de fazer, basta deletar o conteúdo dos
campos V e H.
- 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.
- Selecione uma determinada área da imagem para criar um link tendo como
base a imagem.
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Exercícios de Fixação:
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.
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.
Links Absolutos
Esse tipo de link é muito usado para paginas que não pertençam ao seu site,
necessitando, portanto, do caminho completo para que a sua funcionalidade
esteja correta.
Um problema referente a links absolutos é que, como são para páginas que não
estão dentro de seu site, caso o webmaster da página troque de local ou
remova a mesma, você deve atualiza-la; caso contrario, ficará com um link
quebrado (que não o leva a página alguma).
Links Absolutos
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.
Vamos destacar que sempre o Link Relativo leva em consideração como ponto
inicial a localização da pagina atual em que estamos inserindo o link.
Abra agora o objeto com o nome de hyper.html para que possamos editá-lo.
Para isso clique no menu Arquivo:
49
Iremos inserir um novo hyperlink nesse texto através do menu Inserir >
Hyperlink. Portanto, clique no menu Inserir e logo em seguida em
Hyperlink.
51
Você pode escolher entre um arquivo que esteja junto de seus arquivos, ou um
link externo, de outro servidor.
Perceba que nosso texto mudou de cor, isto porque agora ele é um link. Na
web, se ele for clicado, o site irá para www.google.com.br.
Você pode mudar a cor e algumas opções deste link. Vamos fazer essas
modificações através das configurações da página. Para fazer isso devemos
acessar o menu Modificar > Propriedades da página..., ou através da opção
Propriedades da Página da barra de propriedades. Clique, portanto, no botão
Propriedades da Página na barra de propriedades.
O que nos interessa está na aba CSS, portanto clique na aba Links(CSS).
53
Muito bem. Vamos agora modificar as cores de nosso link. Clique na caixa de
cores da opção Cor do Link e clique na cor azul em destaque na imagem
abaixo.
Vamos mudar as cores agora dos links visitados. Para isso, clique na caixa de
cores da opção Links Visitados e selecione a cor vermelha em destaque na
imagem abaixo.
Agora vamos mudar a cor do link no momento em que o mouse estiver sobre ele.
Portanto, clique na caixa de cores da opção Links de e selecione a cor cinza em
destaque na imagem abaixo.
54
Agora iremos mudar a cor dos Links ativos. Para isso, clique na caixa de
cores da opção Links ativos e selecione a cor branca em destaque na imagem
abaixo.
Exercícios:
Exercícios de Fixação:
57
Crie um documento em HTML. Insira uma imagem e utilize ela como banner.
Logo abaixo do banner escreva Link do Google, em seguida selecione o texto
e adicione o link do google (www.google.com.br) nele. Tente fazer o mesmo que
foi feito na imagem abaixo.
58
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.
Em Colunas, digite 3.
Para podermos selecionar as células (TD), linhas (TR) ou toda a nossa tabela
(Table), podemos usar o rodapé do Dreamweaver.
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.
A opção Sem quebra tem como objetivo impedir que o conteúdo quebre para
a linha de baixo da célula ao alcançar a largura da célula.
64
Agora digite na célula mesclada Aula de Tabelas e centralize o texto para que
fique similar a imagem abaixo.
Agora vamos mesclar a primeira coluna de nossa tabela, para isso, selecione
as duas células em destaque na imagem abaixo e clique no botão Mesclar
Células.
68
Vamos aumenta agora o tamanho de nossa tabela. Para isso, clique na tag
<tr>.
70
Agora vamos salvar nosso arquivo. Para isso clique no menu Arquivo e logo
em seguida na opção Salvar.
Exercícios:
Exercícios de Fixação:
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.
Ao clicar no botão Criar, será solicitado que se dê nome aos frames que
compõe o seu layout.
Você pode deixar os nomes padrões ou modificar de uma forma que facilite a
identificação posterior.
Em nosso caso, no campo título iremos digitar pagina e logo em seguida, clicar
em OK.
75
No topo você pode digitar o título de seu site, ou importar uma figura que seja
o título.
Na parte a direita, você poderá definir alguns textos para os links e na esquerda
colocar um conteúdo qualquer. Clique na parte direita do frameset e digite
Principal, logo após isso pressione Enter, em seguida digite Links, logo após
isso pressione Enter novamente, em seguida digite Imagens. Você deverá
ficar com uma coluna similar a destacada abaixo.
76
Agora vamos criar nossos links para dentro de nosso frame. Selecionamos a
palavra Principal e ligamos ao arquivo Primeira página. Para isso selecione a
palavra Principal e clique em Inserir e logo em seguida clique em Hyperlink.
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.
Observe que o frame do quadro será o primeiro a ser salvo. Ele mostra uma
borda grossa em volta de todos os frames. Digite quadro e logo em seguida
clique em Salvar.
Agora o Dreamweaver quer salvar o menu, observe que o menu ficará agora
com a borda mais grossa. Digite Menu e clique em Salvar.
79
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.
Com o topo selecionado, vamos inserir bordas e alterar a cor da borda. Para
isso, na barra de propriedades, opção Bordas selecione Sim.
81
Terminamos assim de editar nosso site com Frameset, assim, encerrando nossa
nona aula de Dreamweaver CS6. Exercícios:
___
_____________________________________________________
___
________________________________________________________
________________________________________________________
________________________________________________________
4. Que painel define qual será a página a ser aberta dentro do frame e
a formatação de suas bordas?
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
Exercícios de Fixação:
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.
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.
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.
O título que iremos colocar na página será o de Flash, para isso, digite Flash
na caixa de título e logo em seguida clique em OK.
Vamos inserir agora um objeto em Flash (.swf), para isso, clique no menu
Inserir, posicione o cursor sobre a opção Mídia e selecione a opção SWF.
87
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.
Arquivo tem a função de puxar o arquivo swf, caso estivesse dentro de outra
pasta após a pasta que se encontra o .html do site, seria pasta /flash.swf.
90
No botão Executar o Dreamweaver irá executar o arquivo .swf para que você
teste-o e veja como estão as configurações.
Em Classe podemos anexar algum estilo CSS no flash, porem isto não é muito
utilizado, pois o CSS não trabalha com arquivos .swf.
_______________________________________________________
Exercícios de Fixação:
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.
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.
Cada parágrafo <P>, cada cabeçalho <H1>, cada imagem <IMG> são
objetos. Os objetos podem ser agrupados de várias formas. A cada objeto ou
grupo de objetos podem ser atribuídas propriedades de estilo definidas em
regras. Por exemplo, considere a seguinte regra: “todo objeto P da classe
“editorial” será azul, terá tamanho de 12 pontos, espaçamento duplo,
alinhamento pela direita e usará a família de fontes Arial, ou se esta não existir,
Helvetica ou então a fonte sans-serif default do sistema”. Um arquivo CSS com
99
apenas essa regra, conteria o texto: P.editorial {color: 0000ff; font-size: 12pt;
line-height: 24pt; text-align: right; font-family: arial, helvetica, sans-serif}.
Se a folha de estilos for aplicada a uma página que possua parágrafos <P>
rotulados com o nome “editorial” (atributo ‘CLASS=editorial’), eles serão
formatados de acordo com as propriedades especificadas se o browser suportar
CSS. Caso o browser não suporte CSS, a estrutura será mantida (embora a
aparência não seja a ideal) e o usuário conseguirá ter acesso a informação
estruturada, mesmo em um meio de visualização mais limitado.
Vamos criar um documento HTML do zero para que possamos criar folhas de
estilo para ele. Para isso, clique em Arquivo e logo em seguida clique em criar
novo HTML.
Com um novo arquivo HTML criado, vamos criar uma folha de estilo baseada
em uma TAG existente. Para criar uma folha de estilo simples, no painel CSS
clique no botão Novo estilo CSS.
100
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 Caixa permite criar um bloco de nossa TAG definindo largura e altura.
Clique agora em Borda.
Vamos alterar as configurações de fonte. Para isso, clique no menu Drop Down
de Font-family e em seguida selecione as fontes Verdana, Geneva,
sansserif.
106
Com o texto digitado, agora precisamos mudar sua formatação. Para isso,
clique no menu Drop Down de Formato e selecione a opção Cabeçalho 1.
111
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 agora na caixa de cores da opção Color e selecione a cor Preta indicada
na imagem abaixo.
115
Depois de criar a classe, selecione o elemento que irá receber a classe e aplique
ela ao conteúdo selecionado pela barra de propriedades.
Agora digite teste de classe em sua página logo abaixo do primeiro cabeçalho.
Selecione o texto que você acabou de digitar e clique no menu Drop Down de
Classe, após isso selecione a classe teste.
117
________________________________________________________
Exercícios de Fixação:
Para isso, inicialmente, vamos criar um novo documento HTML. Sendo assim,
abra o Adobe Dreamweaver CS6 e clique em Criar Novo > HTML.
Criando um Formulário
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.
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.
Como padrão o campo se coloca como menu, mas podemos definir ele
também como uma lista.
Exercícios:
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 agora criar uma tabela dentro do formulário para separar cada
campo. Para isso, clique no menu Inserir e logo em seguida selecione a
opção Tabela.
Vamos criar uma tabela com cinco linhas e duas colunas. Para isso, digite
em Linhas o valor 5, em Colunas o valor 2, em Table Width digite
550, vamos utilizar um tabela sem bordas, então em Espessura da
Borda, digite 0. Logo em seguida clique em OK.
134
Clique na última célula da segunda coluna. Logo após isso vá em Inserir >
Formulário e logo em seguida selecione a opção Botão.
No campo ID digite botao e logo em seguida clique em OK.
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.
Exercícios de Fixação:
O que é o Spry?
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.
Utilizando o Spry
Com um novo documento HTML criado, clique no menu Inserir > Spry.
O que significa dizer que na aba Data, teremos o primeiro grupo; na aba
Formas o segundo e na aba Layout o terceiro grupo.
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.
Para adicionar um submenu para o Futebol, você terá que clicar no sinal de
(+) no campo correspondente na barra propriedades.
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.
Exercícios de Fixação:
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.
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.
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.
Além disto, podemos sobrepor uma Div acima da outra, para modelarmos o
site da maneira que quisermos.
E visualizando no navegador, podemos ver que essas Divs alinham os objetos
da forma que quisermos.
Exercícios:
Exercícios de Fixação:
Crie um arquivo de HTML, em seu interior, crie duas divs e dentro delas insira
imagens, após isso exiba o resultado em seu navegador. Depois isso, salve seu
arquivo.
Aula 16 – Entendendo o comportamento dos Navegadores
2. O que é Pop-up?
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Exercícios de Fixação:
Não há nada nessas 4 aulas que você já não tenha aprendido nas nossas 16
aulas anteriores, mas é sempre importante que você relembre cada passo,
como foi feito nessas 4 ultimas aulas.
Agora é com você, nunca deixe de praticar, pois agora você possui todos os
conhecimentos necessários para se tornar um grande Web Designer.
Exercício de Fixação