Escolar Documentos
Profissional Documentos
Cultura Documentos
Dreamweaver CS6 PDF
Dreamweaver CS6 PDF
com por
Marcos Paulo Furlan
NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 4
PROJETO DE UM SITE................................................................................................................ 5
CRIANDO DOCUMENTOS........................................................................................................... 7
Formas de visualizao............................................................................. 16
Visualizao do Documento ......................................................................... 17
Painis ...................................................................................................... 17
Barra de Propriedades .............................................................................. 18
TRABALHANDO COM TEXTOS................................................................................................ 18
Clulas .......................................................................................................... 41
Criando um Layout de site com Tabelas ...................................................... 43
Os elementos de um Formulrio................................................................... 59
Tipos de campos de formulrio..................................................................... 60
COMPORTAMENTOS ................................................................................................................ 63
Adicionando Comportamentos...................................................................... 64
Pop-ups ........................................................................................................ 64
CONCLUSO ............................................................................................................................. 65
INTRODUO
O Dreamweaver no s outra ferramenta de visual de HTML. Ele faz o que
todos os melhores editores fazem: cria tabelas, edita quadros e alterna
facilmente da visualizao de pginas para visualizao HTML.
Mas o Dreamweaver vai alm dos outros editores para permitir criar animaes
e pginas dinmicas (DHTML). O Dreamweaver suporta completamente as
folhas de estilo em cascata (CSS), bem como camadas e comportamento de
Javascript. Ele tambm inclui sua prpria ferramenta de animao DHTML. E
um cliente FTP repleto de recursos, que incluem mapas visuais do site, est
embutido dentro dele.
Quando iniciar o Dreamweaver pela primeira vez, voc ver uma janela
principal, que permite a voc criar documentos estticos (HTML) e dinmicos
como Coldfusion, PHP, ASP, ASP. NET e arquivos CSS.
PROJETO DE UM SITE
No Dreamweaver podemos editar pginas HTML nicas como podemos
gerenciar sites, ou seja, controlar todo o projeto que est sendo feito, o que
recomendado para a construo de seu site.
Na tela que se abre na coluna do meio temos a opo Site do Dreamweaver
Clique nessa opo. Ele vai abrir um assistente de criao do ambiente site.
Nessa etapa voc deve dar um nome ao seu site e a pasta em seu computador
onde sero salvos os arquivos a serem utilizados. D um nome ao seu site e
clique na opo Servers. Clique no sinal de mais (+) para definirmos o servidor.
Se voc ainda no possui um servidor, pode pular esta etapa. Voc pode
tambm montar todas as suas pgina e somente depois enviar os arquivos
para o seu servidor usando um programa de FTP.
Clique em Save.
Clique em Save Novamente.
conhea
Curso
WebKit
do
Apostilando.com
http://apostilando.com/pagina.php?cod=30.
CRIANDO DOCUMENTOS
O Dreamweaver CS6 tem entre suas propriedades a possibilidade de se criar
sites dentro de padres da W3C (www3c.org) que rgo que cuida das
especificaes tcnicas de desenvolvimentos de tecnologias aplicadas web
sites.
Ento ao se criar uma pgina HTML, ele vai criar ela no padro XHTML, que
um padro que permite uma validao correta para suas pginas.
Propriedades da pgina
As propriedades da pgina so elementos que se aplicam a uma pgina inteira,
em vez de somente a um objeto na pgina. As propriedades visuais incluem o
ttulo da pgina, uma cor de fundo ou imagem e as cores do texto e do link.
Outras propriedades de pgina incluem a codificao de documento e as
pastas de site, se houver.
Clique em Modificar, Propriedades da Pgina.
Na janela que se abre temos vrias categorias, observe que voc pode
configurar diretamente na TAG, ou ento criar um bloco CSS para o mesmo.
recomendvel sempre usar blocos CSS. A primeira delas a Aparncia (CSS),
nessa categoria podemos definir o tipo de fonte da pgina, estilo (negrito e
itlico), tamanho. Cor de texto e cor de fundo, imagem de fundo e as
propriedades dessa imagem (se ele se repetira ou no) e margens.
Na guia links, podemos definir como sero apresentados os links, quando os
mesmos forem textos.
Podemos definir a fonte dos mesmos tamanho, cd. do link (forma como ele vai
aparecer na pgina), Rollover links (muda a cor do texto quando link ao se
passar o mouse sobre ele), Visited Links (cor a ser mostrada em links j
visitados pelo visitante de seu site), Active Links (cor do texto a ser mostrada
quando clicado sobre o link). Underline Style: como deve ser aplicado o
sublinhado em seus links, no caso da imagem est para ser mostrado
conforme o mouse passar pelo link.
A terceira Categoria Ttulos relativa formatao dos ttulos de sua pgina (O
HTML permite a configurao e utilizao de at 6 tipos de ttulos)
10
11
O nome index deve ser dado ao arquivo que ser mostrado em seu
site quando o visitante digitar o seu domnio, como por exemplo
http://www.multimidiaearte.com, ao digitar o endereo ele vai procurar em seu
diretrio o arquivo index, no caso index.html, e vai mostrar ele na tela do
navegador. Alguns Web designer optam por usar o nome default, caso exista
os dois arquivos, a preferncia fica para o index.
12
Para poder ver o arquivo publicado, clique onde est escrito Local view e
escolha Remote View.
13
Voc pode tambm ter uma janela onde fique fcil de arrastar arquivos de uma
janela para outra. Basta clicar no ltimo boto da aba.
14
INTERFACE
Ao criar seu primeiro arquivo o Dreamweaver ele apresentar na parte superior
a barra de menus. Na direita temos o painel Inserir.
Nessa barra para cada documento aberto ele mostrar uma aba, abaixo dessa
aba temos os botes de forma de visualizao do documento, de ttulo do
documento, checagem de compatibilidade com navegadores, checagem de
15
Formas de visualizao
No Dreamweaver possvel trabalha com seu documento de trs formas:
Design
Cdigo
16
Visualizao do Documento
sempre importante ao desenvolver um site que ele tenha um comportamento
semelhante nos principais navegadores (Internet Explorer e Firefox), como o
Dreamweaver tambm da suporte ao device Central que permite ver seu site
em celulares.
Para poder ver como ficar a sua pgina, basta clicar no boto
Visualizar/Debug in Browser.
Painis
O Dreamweaver como os demais programas Adobe possuem para a maioria
de seus comandos painis, posicionadas direita da tela.
17
Barra de Propriedades
Na parte inferior de seu documento, ser mostrada a barra de propriedades,
essa barra dinmica de acordo com o que est selecionado em seu
documento. Quando no h nada selecionado ele mostrar as propriedades de
texto do documento.
18
Para este tipo de mudana ser necessrio trabalharmos com CSS que ser
visto posteriormente.
Localizar e Substituir
O Dreamweaver pode pesquisar seu documento e localizar um pedao de texto
especifico. Ele tambm pode substituir uma Sting de texto por outra.
Para localizar um pedao de texto em seu documento, clique no Menu Editar,
Localizar e Substituir.
19
Pargrafos e Layout
A unidade bsica de texto em HTML o pargrafo. Enquanto o pargrafo o
nome especfico de texto includo pela tal <P>, os pargrafos podem ser mais
amplamente definidos como qualquer bloco de texto especificamente
formatado. Os tipos de pargrafos incluem itens de lista, texto pr-formatado e
divises.
20
Ttulos
Pense em ttulos (Tambm chamados de cabealhos) como sendo o mesmo
que as manchetes de um jornal. Eles so maiores que o corpo do texto de um
artigo e geralmente esto em negrito. Os tamanhos de ttulos vo de 1 a 6,
sendo que o maior 1.
Texto Pr-Formatado
Em geral quando voc cola texto na janela de documento, ele no retm
nenhuma formatao dele. Isso inclui quebras de linha, quebras de pargrafos,
espaamento, tabulaes, tabelas formatadas com texto e outras mais.
Se voc formatou texto em outro programa e deseja reter sua forma, voc pode
inseri-lo no cdigo de HTML da pgina como texto pr-formatado. Nenhuma
das outras convenes de HTML controlar esse texto; por exemplo, em
HTML, somente um espao digitado ser exibido, mesmo se voc digitar 50
espaos em uma linha. No texto pr-formatado, qualquer forma do texto feita
com espaos ou quebras de linha ser preservada.
21
Listas
O Dreamweaver suporta diretamente dois tipos de listas, numeradas
(Ordenadas) e com marcadores (No Ordenadas). E lista de Definies.
Podemos utilizar as propriedades do pargrafo para criar listas ou o Menu
Texto, lista, sendo que no Menu Texto, Lista, temos ainda a opo de lista de
Definio, que utilizada para sumrios em seu site.
Recuando Texto
No h tabulaes em HTML comum, o tipo de recuo de pargrafos com cinco
espaos utilizados em outros tipos de publicao geralmente substitudo
configurando cada pargrafo como uma linha de espao em branco.
Mas existem recuos de pargrafos, chamados <blockquote> que faz este
processo.
Este tipo de recuo pode ser feito atravs da barra de propriedades ou do menu
Texto.
22
Linhas Horizontais
Uma linha horizontal uma linha que atravessa a pgina horizontalmente e
fornece uma diviso explicita em vez de implcita entre as partes de um
documento.
Para criar uma linha horizontal, clique no Menu Inserir, HTML, Rgua
Horizontal.
Ao criar a linha horizontal e selecion-la voc pode format-la.
IMAGENS
Um dos recursos mais utilizados em Home Pages so imagens, e os formatos
mais utilizados so GIF e JPG, outro formato que vem crescendo na utilizao
em HP o formato PNG, formato reconhecido pela W3C(www.w3c.org).
23
Para inserir uma imagem em sua HP, temos vrias formas, a mais prtica
clicando sobre o boto Inserir Imagens na caixa de Ferramentas
, outra
aconselhvel que voc coloque todas as imagens de seu site em uma nica
pasta, pois isto vai facilitar o seu trabalho e organizao do site.
24
Voc pode criar sua pasta de imagens, diretamente pela paleta files do
Dreamweaver, basta apenas clicar com o boto direito do mouse em alguma
rea vazia dela e depois clicar na opo New Folder.
Ao se escolher a imagem a ser inserida, com definimos no inicio do projeto de
nosso site utilizaremos XHTML ele abre uma janela pedindo as teclas de
acessibilidade, no campo ALT, deve-se preencher a descrio da imagem, no
campo Descrio Longa pode deixar em branco
Quando voc tem uma figura selecionada a barra de propriedades da figura lhe
mostra a largura (W) e altura(H) da imagem. A opo Src corresponde ao local
de sua imagem, A opo Alt preenchida anteriormente, a opo Class, permite
atribuir uma classe a imagem, estudaremos as classes posteriormente.
A opo link permite transformar a sua imagem em um link, veremos esse
assunto posteriormente. E temos as ferramentas de edio.
Ao se redimensionar uma imagem por suas alas ao lado das medidas de
Altura e largura, o Dreamweaver mostrar um boto circular que permite
retornar as dimenses originais da imagem.
25
26
Permite
pode-se definir uma imagem em baixa qualidade para ser aberta antes.
Border
Mapas de Imagem
Podemos inserir uma imagem em seu documento atribuir a esta imagem
pontos ativos que faam a ligao com outros documentos, este processo
chamado de Mapa de imagens.
Quando voc insere uma imagem, automaticamente na barra de propriedades,
sero mostradas as ferramentas de pontos ativos retangular, elptica e
polgono. Ao desenhar o ponto ativo na barra de propriedades ser mostrada
uma janela para que se faa o link.
27
28
Imagem Placeholder
Image Placeholder um objeto do Dreamweaver que voc pode acrescentar
em seu documento no espao onde ficar uma imagem, mas que ainda no
est pronta, mas que permite que voc v diagramando seu HTML, Para inserir
uma imagem placeholder, voc pode clicar no menu, Inserir, objeto de imagem,
Image Placeholder, ou clicar no boto junto s opes de imagem da aba
Common.
29
CONTEDO MULTIMIDIA
A Web atual rica em recursos de multimdia, como vdeos, udio, efeitos, etc.,
claro que tudo isso depende de diversos fatores, como principalmente
velocidade de conexo e boa distribuio do contedo no site.
O Dreamweaver permite inserir de forma fcil em suas pginas HTML contedo
multimdia, tornando assim seu site mais rico e interativo.
debatidos
(http://pt.wikipedia.org/wiki/Usabilidade)
utilizados
e acessibilidade
web
atual
so
usabilidade
(http://pt.wikipedia.org/wiki/Acessibilidade),
e o
30
flash no Dreamweaver ele apresentar uma tela onde voc pode adicionar
alguns elementos de acessibilidade como um Title, teclas de acesso e ordem
de tabulao do swf em sua pgina.
Na janela que se abre, localize seu arquivo SWF e insira-o na pgina. Observe
que ele vai aparecer em sua pgina como um retngulo cinza com o smbolo
do flash. A barra de propriedades agora se modifica para configurao do
SWF.
31
Flash Vdeo
Um dos grande recursos criado ultimamente para disponibilizao de vdeos na
WEB foi o formato FLV (Flash Vdeo), pois permite a publicao de vdeo em
websites, sem a necessidade de um servidor de Streaming, plug-ins, etc., basta
apenas que o navegador do usurio tenha o plug-in do Flash instalado (98 %
dos computadores o tem), o maior cone de sucesso do Flash vdeo ao o site
YOUTUBE (www.youtube.com), que atualmente sinnimo de vdeo na Internet.
Para se inserir um arquivo FLV em HTML com o Dreamweaver muito fcil.
Clique na opo Media e depois em FLV
ou no Menu Inserir,
32
33
HYPERLINKS
O principal elemento que fez com a Internet alcanasse o crescimento como
est atualmente o fato de que podemos rapidamente mudar de contedo
atravs de simples clique de mouse, os chamados Hyperlinks.
Podemos criar links para todos os tipos de arquivos existentes, mas somente
alguns podem ser abertos nos navegadores, os demais, sero salvos no
computador do usurio.
preciso
fazer
um
link
para
arquivo
34
Criando Links
Crie um texto e o selecione e observe que na barra de barra de propriedades
ele lhe d opo de criar um link, crie o link para este texto. Se voc no sabe
o nome correto de seu link, clique na pasta amarela direita da caixa de link.
35
Defina o arquivo ao qual ser ligado e no menu pop onde voc pode especificar
se que o link relativo pgina, ou site Root para fazer o link relativo a uma
localizao central em seu site da WEB.
diretamente at o
36
Observe que abaixo do campo link temos um campo chamado Target (alvo),
quando o campo fica vazio, ao se clicar sobre o link no navegador, ele abre na
pgina atual do link sobrepondo-a. Se eu precisar que o link abra em uma nova
janela, basta eu especificar nesse campo a opo _blank. As demais opes
so:
_parent
_self
_top
Crie outro texto e aplique um link nele com a opo de abrir em uma nova
janela.
37
ncoras
Permite criar links internos na mesma pgina, facilitando assim a navegao
em documentos longos.
Criando a ncora
Primeiro defina os links que vo chamar a ncora dentro de sua pgina.
Depois atribua a um texto, figura ou espao em branco a sua ncora, atravs
do Menu Inserir ncora com nome junto ao local onde a ncora ser criada
aparecer uma marca
38
Essa forma de link para e-mail tem um problema que ao ser clicado no
link ele vai abrir o programa de e-mail padro (Outlook Express, Outlook, etc.),
e muitos usurios no utilizam programas de e-mail, acessam o e-mail atravs
dos prprios webmails (hotmail.com, gmail.com, yahoo.com), ento nesses
casos aconselhvel ao se criar o link colocar o e-mail para onde ser
apontado o link.
TABELAS
A funcionalidade da tabela foi adicionada a HTML para simplificar a
apresentao de dados tabulares, como relatrios cientficos. comum
tambm utilizar tabelas na construo de sites, mas este um conceito que
est diminuindo, pois aconselhvel o uso de camadas para a construo de
sites.
Para criar uma tabela muito importante que a mesma seja planejada e
rascunha antes para depois minimizar o seu trabalho.
Para inserir uma tabela clique no boto Inserir Tabela, ou no boto de insero
de tabela no painel Inserir.
39
Defina nmero de linhas e colunas desejadas, se quer borda e qual ser a sua
espessura, defina a largura de sua tabela em relao largura da tabela (em
Pixels ou em porcentagem), o espaamento entre as clulas e o espaamento
entre a clula e o seu contedo (Cell padding e Cell Spacing).
40
Se voc clicar com o boto direito de seu mouse em qualquer clula de sua
tabela, ele habilita tambm as opes de manipulao de nossa tabela.
Para podermos selecionar as clulas (TD), linhas (TR) ou toda nossa tabela
(Table), podemos usar o rodap do Dreamweaver.
Clulas
Ao clicar em uma clula, ou selecionar mais de uma clula, a barra de
propriedades muda para a formatao de texto e abaixo as propriedades
referentes s clulas.
41
Tabela Modificada
42
43
Mescle a primeira linha e acrescente uma imagem para ser o nosso topo.
divida a prxima linha de acordo com desenho de seu layout no caso foi
dividido em trs colunas e a primeira coluna dividida em e duas linhas.
A ltima linha foi deixada como nica, pois ale teremos as informaes de
rodap.
FOLHAS DE ESTILO
O CSS (Cascading Style Sheet) ou folhas de estilo em cascata o recurso
coreto de formatao de elementos dentro de seu documento HTML, seguindo
44
45
46
47
48
A visualizao
, ser
49
50
51
52
Para conhecer mais sobre como aplicar CSS em seus projetos pelo
Dreamweaver
conhea
nosso
curso
WebKit
(http://apostilando.com/pagina.php?cod=30).
CSS3
Consiste na incorporao de novos mecanismos para manter um maior
controle sobre o estilo com o qual se mostram os elementos das pginas, sem
ter que recorrer a truques ou hacks, que a muitas vezes complicavam o cdigo
das webs.
53
lista
de
novas
propriedades
de
CSS3
foi
tirado
de:
Uma pequena amostra de como podemos trabalhar a CSS3. Inicie uma pgina
e nela entre no modo cdigo e adicione a seguinte regra CSS.
54
Vamos adicionar mais algumas propriedades como uma cor de fundo, cor de
fonte e defina uma dimenso de 200px de largura e 200 px de altura.
55
CAMADAS E POSICIONAMENTO
As camadas fazem parte do mundo das folhas de estilo em cascata e da
Dynamic HTML. Uma camada um recipiente para contedo de HTML,
normalmente definido pelas TAGS <DIV> ou <SPAN>, que voc pode
posicionar em qualquer lugar em uma pgina.
As camadas so denominadas camadas, porque podem ser posicionadas em
trs dimenses. Voc pode configurar uma localizao absoluta ou relativa
para uma camada ao longo dos eixos x e y da pgina. A terceira dimenso
denominada ndice Z e permite que as camadas se sobreponham.
Os designers realmente adoram as camadas por sua versatilidade: voc pode
ocultar as camadas (por visibilidade) ou at partes das camadas (com o ndice
Z ou com o recorte de reas) quando uma pgina inicialmente carrega. Ento,
voc pode escrever um script que far com que as reas ocultas apaream
depois que certa quantidade de tempo ou quando certo evento de usurio
acontece.
Posicionamento CSS
Voc pode aplicar posicionamento de CSS para um bloco de texto, um
56
camada
na
janela
de
documento
que
voc
pode
modificar
Criando Camadas
Para poder criar uma camada voc deve deixar seu painel em Layout e deve
usar um dos dois elementos de criao de camadas.
57
58
FORMULRIOS
O Dreamweaver possui todos os recursos para a criao de um formulrio,
inclusive para formulrios dinmicos que atribuam envios para pginas
dinmicas como ASP, PHP, JSP, CFM.
Os elementos de um Formulrio
Para inserir um formulrio no Dreamweaver clique no Menu Inserir Formulrios,
ou no painel Formulrios.
59
60
selecione vrios para preferncias do visitante e podem ter o seu estado inicial
selecionado ou no.
objeto entre vrias opes possveis e tambm podem ter o seu estado inicial
selecionado ou no.
61
Botes
62
Clique
<a
href='index.php'>
<b>aqui</b>
</a>
para
retornar.</div>";
?>
COMPORTAMENTOS
As ferramentas de comportamento do Dreamweaver permite que voc aplique
63
Adicionando Comportamentos
Adicionar um comportamento a uma pgina incrivelmente simples o
complicado so os detalhes. Todos os comportamentos do Dreamweaver so
adicionados e editados com o inspetor de TGAS Comportamentos (Menu
Janela, Comportamentos).
Para adicionar um comportamento a sua figura basta apenas clicar sobre o
sinal de (+) na esquerda superior do Painel.
Pop-ups
Importe uma imagem qualquer e clique sobre ela, depois chame as opes de
comportamentos e escolha Open Browser Window (Abrir uma janela de
navegador), esta uma das opes mais comuns pelo fato de as janelas Pop-
64
CONCLUSO
Como pode ser visto nas pginas anteriores o Adobe Dreamweaver um dos
mais complexos e fascinantes programas do mercado de Web design,
logicamente que no foi possvel explorar todas as ferramentas e opes
existentes em um programa to completo como esse, mas com certeza foi
explorado e explicado as mais importantes ferramentas e modos de trabalhar
com este fascinante programa.
Uma abordagem mais completa dele, bem como de todo o processo de criao
de um Website voc pode aprender com o curso WebKit disponvel no
apostilando.com.
Para conhecer mais sobre a utilizao do Adobe Dreamweaver busque pelas
apostilas de truques e dicas e aplicaes no Dreamweaver que o
Apostilando.com disponibiliza.
65
66