Apostila de Aula - Dreamweaver

OURO MODERNO
www.ouromoderno.com.br
Web Designer
1
OURO MODERNO
ndice
APRESENTAO............................................................................. 5
Aula 1 A rea de Trabalho .......................................................... 6
Pgina inicial ................................................................................. 6
Criando documento ........................................................................ 7
Interface ...................................................................................... 8
Formas de visualizao................................................................... 9
Visualizao do Documento............................................................11
Barra de Propriedades ...................................................................11
Paletas ........................................................................................12
Aula 2 Criao de site ............................................................... 14
Propriedades da Pgina .................................................................18
Appearance..................................................................................19
Links ...........................................................................................23
Headings .....................................................................................24
Title/Encoding ..............................................................................25
Tracing Image ..............................................................................26
Exerccios ....................................................................................28
Aula 3 Trabalhando com textos ................................................ 30
Pargrafos e Layout ......................................................................31
Pargrafos e Quebras de linha ........................................................31
DIV e SPAN..................................................................................32
Ttulos .........................................................................................32
Texto Pr-Formatado ....................................................................32
Listas ..........................................................................................33
Recuando Texto............................................................................33
Caracteres Especiais em HTML .......................................................34
Linhas Horizontais.........................................................................34
Exerccios ....................................................................................36
Aula 4 - Imagens ......................................................................... 38
Edio de imagem ........................................................................39
Image Placeholder ........................................................................41
Exerccios ....................................................................................42
Aula 5 - Hyperlinks ...................................................................... 44
Links Absolutos e Relativos ............................................................44
Criando Links ...............................................................................45
ncoras .......................................................................................46
Links para e-mail ..........................................................................47
Mapas de Imagem ........................................................................47
Exerccios ....................................................................................48
Aula 6 - Tabelas........................................................................... 50
Clulas ........................................................................................51
Exerccios ....................................................................................53
Aula 7 Frames........................................................................... 56
2
OURO MODERNO
Criando os Frames ........................................................................56

Salvando Frames ..........................................................................57
Alterando as propriedades de suas molduras ....................................57
Criando Frames Embutidos (IFRAME) ..............................................58
Exerccios ....................................................................................60
Aula 8 - Integrao com o Photoshop CS3 ................................... 64
Exerccios ....................................................................................66
Aula 9 Integrao com o Flash CS3........................................... 68
Insero de Animaes Flash (SWF)................................................68
Inserindo Botes e Textos do Flash .................................................70
Texto Flash ..................................................................................70
Flash Vdeo ..................................................................................71
Plug-ins .......................................................................................72
Image Viewer...............................................................................74
Exerccios ....................................................................................76
Aula 10 Folhas de Estilo............................................................ 79
Editando uma folha de Estilos.........................................................81
Criando uma classe .......................................................................81
Exerccios ....................................................................................84
Aula 11 Camadas e Posicionamento ......................................... 86
Posicionamento CSS......................................................................86
Posicionamento absoluto versus relativo ..........................................86
Criando Camadas..........................................................................87
Escolhendo as TAGS......................................................................88
Aninhando Camadas .....................................................................89
Exerccios ....................................................................................90
Aula 12 - Formulrios .................................................................. 94
Os elementos de um Formulrio .....................................................94
Tipos de campos de formulrio .......................................................94
Menu de Salto ..............................................................................98
Exerccios ....................................................................................99
Aula 13 - Comportamentos ........................................................ 102
Adicionando Comportamentos ......................................................102
Pop-ups.....................................................................................103
Ocultar Mostrar camadas .............................................................103
Validando Formulrios .................................................................104
Exerccios ..................................................................................106
Aula 14 Spry (Ajax no Dreamweaver) .................................... 109
Spry Menu Bar ...........................................................................110
Spry Accordion ...........................................................................112
Spry Effects ...............................................................................113
Exerccios ..................................................................................119
Aula 15 HTML ......................................................................... 122
Tags .........................................................................................123
Estrutura de uma Pgina HTML.....................................................123
Cores e fontes ............................................................................125
Cdigo Hexadecimal de uma cor ...................................................126
3
OURO MODERNO
Tamanho das letras ....................................................................127

Tipos de Fontes ..........................................................................128
Negrito, Itlico e Sublinhado ........................................................128
Comandos de Alinhamento...........................................................129
Listas ........................................................................................131
Links .........................................................................................133
Imagens ....................................................................................133
Tabelas .....................................................................................135
Formulrios................................................................................138
FRAME.......................................................................................144
TARGETS ...................................................................................147
Exerccios ..................................................................................148
Aula 16 FTP ............................................................................ 158
FTP e HTTP ................................................................................159
Exerccios ..................................................................................161
Aula 17 Domnio e emails ....................................................... 162
Servidor de DNS .........................................................................162
ID.............................................................................................163
Exerccios ..................................................................................164
Anotaes ................................................................................... 165
4
OURO MODERNO
APRESENTAO
O curso de Dreamweaver da Ouro Moderno ir te mostrar

que o Dreamweaver CS3 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 Java
Script. 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.
Entre as principais novidades da verso CS3, est a nova
aba SPRY, que um framework para utilizao de tecnologia
AJAX.
Outra grande novidade pelo fato de que, a partir desta
verso, o Dreamweaver faz parte da Adobe, logo ele possui
uma integrao muito boa com o Photoshop.
Integrao com o Adobe Device Central, que possibilita
voc visualizar seu site em um aparelho de celular.
No se esquea de que fundamental cumprir todas as

etapas deste mtodo de ensino, que incluem as aulas
interativas, a resoluo dos exerccios contidos ao final de cada
captulo desta apostila e, posteriormente, os testes para
concluso de cada aula.
Aproveite ao mximo o contedo de nosso curso e

desfrute deste mtodo de ensino interativo, dinmico e
eficiente.
Seja bem-vindo!!!
5
OURO MODERNO
Aula 1 A rea de Trabalho
Pgina inicial
Antes de estudarmos a rea de trabalho, verificamos que

logo no incio temos uma tela onde podemos manipular
documentos.
Em Open a Recent Item podemos escolher qualquer
documento antes criado pelo Dreamweaver.
Em Create New podemos criar um documento conforme o
tipo que queremos (HTML, ColdFusion, PHP, ASP VBScript,
XSLT, CSS, Java Script, XML, um novo site do Dreamweaver ou
mais opes, clicando em More).
Em Create from Samples voc pode criar outra pgina
baseada em modelo pr-existente.
Se no quiser mais ver a tela inicial (voc pode usar as
opes do menu, tendo os mesmos recursos), marcando Dont
Show Again.
6
OURO MODERNO
Caso marque essa opo e deseje ver essa tela

novamente, basta ir ao menu Edit Preferences e na aba
General, na rea Document Options, marcando a caixa de
seleo Show Start Page.
Criando documento
O Dreamweaver CS3 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.
XHTML uma reformulao da linguagem HTML
(Hypertext Markup language) baseada na XML (Extensible
Markup Language). Em termos de sintaxe, a XHTML no to
tolerante como a HTML. Isso ocorre porque a XHTML utiliza as
rgidas regras de XML para realizar as marcaes em um
documento. Por padro a XHTML separa a TAG (elemento que
permite definir qual comando ser utilizado) e as propriedades
para a mesma.
Voc pode atravs da tela de abertura criar sue
documento HTML, ColdFusion, PHP, etc..., como pode tambm
clicar na opo More..., embaixo de todas.
7
OURO MODERNO
Essa opo abre a possibilidade de se criar os diversos

tipos de documentos, alm de utilizar um tipo de layout, na
direita da tela tm a opo de escolha do tipo de documento
HTML, o padro XHTML 1.0 Transitional, mas voc pode
escolher outro tipo de documento.
Ao Clicar em Create, ele cria seu primeiro documento

HTML.
Interface
Ao criar seu primeiro arquivo o Dreamweaver ele apresentar

na parte superior a barra de menus, abaixo dela temos a barra
de Insero de contedo, essa barra pode ser vista de duas
formas, em forma de Menu.
Onde as opes esto junto palavra Common (flechinha) ao

se clicar nessa opo ela vai mostrar as demais opes de
botes de insero, a ltima opo desse menu, chamam-se
Show as Tabs, que permite visualizar as opes em forma de
abas na parte superior.
8
OURO MODERNO
No final dessa barra temos um boto que permite

voltar visualizao de Menus (Show as Menu), a forma de
utilizao fica a critrio de cada profissional, em nosso curso a
deixaremos na opo de abas.
Abaixo dessa barra temos a barra de documentos.
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 erros de
sintaxe de cdigo, comunicao com o servidor de
hospedagem, previso do documento no navegador,
recarregamento da pgina (opo interessante quando a
mesma foi manipulada fora do Dreamweaver com o documento
aberto), opes de visualizao de componentes auxiliares na
pgina, Visual Aids.
Formas de visualizao
No Dreamweaver possvel trabalha com seu documento

de trs formas:
Design: Essa forma a que mais se aproxima dos

editores de textos comuns, pois toda visual, bastando inserir
contedos no documento e digitar os textos.
9
OURO MODERNO
Split: Essa opo divide a sua tela em duas partes, sendo

a de cima a pgina sendo vista atravs de cdigos e a parte de
baixo de forma design.
Code: Essa opo vai mostrar o seu documento sendo

visto atravs da codificao HTML, quando se tem
conhecimento de cdigos HTML, em algumas situaes essa
forma de visualizao se torna mais rpida e pratica.
10
OURO MODERNO
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 d suporte ao device Central, que
permite ver seu site em celulares.
Para poder ver como ficar a sua pgina, basta clicar no
boto Preview/Debug in Browser.
Ao clicar na opo Edit Browser List, voc pode definir qual

o navegador de prioridade, adicionar ou remover navegadores,
etc...
Barra de Propriedades
Na parte inferior de seu documento, ser mostrada a barra

de propriedades, essa barra dinmica de acordo com o que
11
OURO MODERNO
est selecionado em seu documento. Quando no h nada

selecionado ele mostrar as propriedades de texto do
documento.
Paletas
O Dreamweaver, como os demais programas Adobe,

possui para a maioria de seus comandos paletas, posicionadas
direita da tela.
12
OURO MODERNO
Voc pode habilitar / desabilitar as paletas atravs do

Menu Window.
Na parte inferior da pgina h os indicadores das tags

HTML usadas at o ponto que o cursor estiver posicionado. A
rea inferior direita tem um indicativo das dimenses
escolhidas para a pgina. No extremo direito encontra-se um
informativo do peso do arquivo (em Kb) e o tempo estimado
para seu carregamento na web.
Tambm temos um conjunto de controles de zoom, que
auxilia muito o trabalho de criao de pginas. Essa opo
serve somente como auxlio durante a criao. O resultado final
o equivalente ao zoom em 100%.
Para ativar o campo de zoom, no local onde se encontra a

porcentagem de zoom aplicada pgina, clique na seta para
baixo e escolha um dos valores predefinidos.
A rea de trabalho do Dreamweaver pode se adequar

conforme sua preferncia, permitindo, ento, total
personalizao.
Podemos escolher modelos distintos de layout da rea de

trabalho atravs do menu Window Workspace Layout. Opes
como Coder, Designer e Dual Screen.
13
OURO MODERNO
Aula 2 Criao de site
Quando estamos no projeto de um site, precisamos ter

alguma organizao para que as pginas no fiquem
espalhadas.
O Dreamweaver nos d a opo de organizar os projetos

em sites, para auxiliar o trabalho e o gerenciamento dos
arquivos.
A etapa da criao do site deve sempre preceder o

desenvolvimento das pginas. No final do trabalho de criao,
utilizando o prprio Dreamweaver, podemos enviar seus
arquivos para um provedor de hospedagem.
Vamos configurar um site que ser usado no

Dreamweaver. Podemos ter vrios sites configurados no
programa, afinal, voc pode trabalhar em mais de um projeto
ao mesmo tempo.
Na tela que se abre na coluna do meio temos a opo

Dreamweaver Site.
14
OURO MODERNO
Nessa primeira etapa, chamada Editing Files, definimos

um nome que identifica o site no Dreamweaver e seu endereo
(URL). O nome criado tem importncia somente para o
Dreamweaver.
Na rea What would you like to name your site?, escolha o
nome a ser usado no projeto.
Editing Files, Part 2, configuramos a criao de um site

que necessita de alguma tecnologia de servidor, como, por
exemplo, ASP, ASP.NET, PHP, ColdFusion ou JSP.
15
OURO MODERNO
Editing Files, Part 3 o primeiro item a configurar nessa

etapa como voc deseja trabalhar com seus arquivos: se
deseja editar cpias locais nesse computador e efetuar o upload
ao servidor quando terminar (Edit local copies on my machine,
then upload to server when ready), que a opo que
utilizaremos e a mais recomendada, ou a segunda opo, se
deseja editar diretamente no servidor usando a rede local.
Logo em seguida preciso clicar no cone de pasta inferior
e escolher a pasta em que sero gravados os arquivos do site.
Sendo assim, o Dreamweaver saber que os arquivos do
site devem ser armazenados nessa pasta.
Na Sharing Files definimos como o Dreamweaver vai se

conectar ao servidor remoto.
Entre as opes temos:
FTP
Ao escolher a opo FTP, voc deve informar o endereo
do FTP que utilizar (algo como ftp.seusite.com.br ), a pasta,
seu login, senha e, se desejar, testar a conexo.
Local/Network
Nessa opo informe a pasta local ou da rede a ser
utilizada.
RDS
Se a conexo com o site remoto for por Remote
Development Services (RDS), para poder configur-la deve
clicar no boto Settings.
16
OURO MODERNO
Microsoft Visual SourceSafe

Se a conexo com o site remoto utilizar banco de dados
SourceSafe, para configur-la utilize o boto Settings.
WebDAV
J se a conexo com o site remoto utilizar o protocolo
WebDAV, voc pode configur-la clicando no boto Settings.
A rea Summary, que mostra um pequeno relatrio das

opes escolhidas.
17
OURO MODERNO
No painel Manage Sites, veremos o site recm-

configurado.
Com o nome de um site selecionado nesse painel temos a
opo de edit-lo (clicando no boto Edit, abre-se novamente a
janela de definio do site), duplic-lo (clicando em Duplicate,
cria-se uma cpia do site), remov-lo (clicando em Remove) ou
ainda exportar a definio do site (clicando em Export), que
gera um arquivo no formato .ste que pode ser usado em outra
mquina com o Dreamweaver CS3, para importar essa
definio (clicando no boto Import e escolhendo esse arquivo)
na janela que se abre.
Propriedades da Pgina
Para configurar as propriedades da pgina, selecione a

opo de menu Modify Page Properties que abre a janela que
vamos utilizar.
As opes esto divididas em diversas categorias a serem
configuradas e o Dreamweaver usa principalmente folhas de
estilo (CSS) para as definies de uma pgina.
18
OURO MODERNO
Appearance
Page font
Definimos o tipo-padro da fonte a ser utilizada no
documento. As fontes se encontram em grupos de trs. Se no
encontrar a primeira fonte na mquina do usurio, ser
escolhida a segunda e assim por diante. Caso deseje uma fonte
ou grupo de fontes que no se encontrem entre as opes,
escolha Edit Font List.
Na janela que se abre, na parte superior surge a lista das

fontes que esto disponveis nos grupos existentes. Na parte
inferior direita (Available fonts) aparecem as fontes existentes
em seu computador bastando, para criar sua lista de fontes,
selecionar uma no lado direito e clicar no boto de adicionar as
fontes escolhidas (simbolizado por uma seta apontando para a
esquerda).
Dessa mesma forma, podemos adicionar fontes sua lista.
Quando concludo, clique em OK e sua lista de fontes fica
disponvel.
19
OURO MODERNO
Os botes B e I indicam, respectivamente, texto em

negrito e em itlico.
Size
Escolha o tamanha do seu texto. O HTML por padro usa
um valor de 1 a 7.
Ou simplesmente digite o valor e escolha a unidade de
medida desejada (pixels, cm etc.). Ser criado um estilo (CSS)
para utilizar esses tamanhos, no nos limitando, portanto, a
utilizar um tamanho padro HTML.
Text Color
Define a cor-padro para os textos da pgina, o que no
significa que todos utilizaro somente essa cor. Mais adiante
veremos que podemos definir cores para trechos especficos de
texto.
possvel digitar o valor de cada cor em hexadecimal.
Os valores da cor se formam de trs pares representando
as cores vermelha, verde e azul #rrggbb (formato RGB)
precedidos pelo caractere #. Cada par pode receber um valor
entre 00 e FF (equivalente em nmeros decimais a um valor
entre 0 e 225). Por exemplo, a cor #FF0000 representa no
formato RGB (#rrggbb) o valor mximo de vermelho, nada de
verde e nada de azul, ento, a cor ser o vermelho-puro. Dessa
mistura de valores surgem as cores.
Ao falarmos de cores, nos deparamos com uma situao.
Como nem todos os usurios possuem as mesmas
caractersticas (sistema operacional, por exemplo), a
configurao de cores pode no ser a mesma para todos. Para
20
OURO MODERNO
resolver este problema, vamos utilizar uma paleta de cores

chamada web safe (cores seguras) composta por somente 216
cores que aparecem da mesma forma para todos os usurios.
Essa paleta se utiliza das 256 cores bsicas do Windows e
do MAC, mas 40 delas so diferentes entre esses sistemas,
portanto a paleta web safe utiliza apenas as restantes 216.
Para saber se uma cor segura, verificamos se os pares
das rr, gg, e bb so compostos apenas pelos valores 00, 33,
99, CC, FF. Exemplo, #000033 uma cor segura, #66CCFF
tambm, porm #00DDCC no uma cor segura nem
#65CCFF. Podemos tambm, em vez de digitar o valor em
hexadecimal da cor, escolher uma delas clicando na caixa de
cores.
Na caixa aparecem diversas cores. Movimentando o conta-
gotas sobre elas e clicando na cor que deseja. Se quiser voltar
a usar a cor-padro de um elemento, selecione o quadrado
branco com um risco vermelho que se encontra na parte
superior da caixa.
Se desejar escolher uma cor que no tenha na paleta,
clique em Cor do sistema (simbolizada por um crculo colorido
com diversas cores) e defini-a na janela que se abre.
Background color
Define a cor de fundo da pgina. muito importante que
esse campo esteja configurado tambm quando usamos uma
imagem como fundo da pgina. Por exemplo, se usarmos uma
imagem escura como fundo da pgina e configurarmos os
textos com cores claras e, por qualquer motivo, a imagem no
for carregada (erro no endereo configurado etc.), o
Dreamweaver coloca o branco (padro) como fundo e no
haver contraste entre o fundo e os textos, dificultando ou
mesmo impossibilitando a leitura. Portanto, sempre que utilizar
21
OURO MODERNO
imagens como fundo da pgina fique atento cor de fundo

escolhida.
Background image
Selecione alguma imagem que deseje utilizar. Ao escolher
a imagem, se ela no estiver no diretrio do site, aparece uma
caixa de dilogo avisando que o arquivo encontra-se fora da
pasta configurada para o site e perguntando se deseja copi-lo
para a pasta. Caso isso ocorra, basta responder sim para que a
imagem seja copiada para a pasta que foi configurada.
Para remover a imagem, basta deletar seu nome da rea

Background image, deixando-a em branco.
Repeat
Como vimos anteriormente, por padro, quando uma
imagem aplicada ao fundo de um elemento ou da prpria
pgina, se ela for maior do que o espao que a receber como
fundo, apenas as reas comuns entre o elemento e a imagem
sero mostradas. Caso a imagem seja menor, ela repetida
at preencher todo o elemento (no caso a pgina).
Podemos alterar esse procedimento nessa opo de estilo,
escolhendo se a imagem de fundo ser sem repetio (no-
repeat, ser aplicada apenas uma vez na pgina), repetir
(repeat, a imagem ser repetida at preencher a pgina),
22
OURO MODERNO
repetir x (repeat-x, repete a imagem apenas na horizontal) e

repetir y (repeat-y, repete a imagem apenas na vertical).
Margens
Aqui definimos uma margem (espao entre um lado do
navegador e o incio do contedo da pgina) para a esquerda
(Left margin), direita (Right Margin), parte superior (Top
margin) e inferior (Bottom margin).
Links
Nessa categoria definimos as caractersticas visuais que os

links existentes na pgina tero como padro.
Link font
Define-se a fonte padro a ser usada nos links. O
procedimento para configurar a fonte o mesmo que vimos
anteriormente na opo Page Font. Caso deseje a mesma fonte
configurada nessa opo anterior, basta escolher a opo Same
as page font. Temos ainda negrito (boto B) e itlico (I).
Size
Definimos o tamanho da fonte do link (mesmo
procedimento visto tambm anteriormente).
23
OURO MODERNO
Link color
Ajustamos a cor que os links tero.
Rollover links
Configuramos a cor que o link ter quando o usurio
estiver passando o mouse sobre ele, criando um efeito muito
interessante.
Visited links
Quando visualizamos os links existentes numa pgina,
voc pode ter uma diferenciao que indique ao usurio os links
que ele j visitou, bastando escolher a cor para eles nessa
rea.
Active links
Voc escolhe a cor que deve possuir o link em que o
usurio clicou.
Underline Style
Configuramos aqui mais um ajuste visual bastante
utilizado hoje em dia, especificando como ser o
comportamento do sublinhado do link. O link pode ser sempre
sublinhado (Always underline), sem sublinhado nenhum (Never
underline), exibindo o sublinhado apenas quando o usurio
estiver passando o mouse sobre o link (Show underline only on
rollover) ou escondendo o sublinhado quando o usurio estiver
passando o mouse sobre o link (Hide underline on rollover).
Headings
O HTML tem seis opes de cabealho a serem utilizados

como ttulos, textos especiais etc. chamadas Heading e
numeradas de 1 a 6.
Podemos configurar as caractersticas visuais padro para

esses elementos.
24
OURO MODERNO
Heading font
definida a fonte-padro a ser utilizada nos cabealhos. O
procedimento para configurar a fonte o mesmo. Se desejar a
mesma fonte configurada na opo anterior, escolha a opo
Same as page font. Temos ainda negrito (boto B) e itlico (I).
Heading 1 a 6
Nas reas respectivas a cada um dos cabealhos,
configuramos individualmente suas caractersticas de tamanho
(mesmo procedimento j conhecido) e cor.
Title/Encoding
Ajustamos o ttulo e a codificao usada no documento.
Title
O primeiro item a ser ajustado o ttulo. O ttulo de uma
pgina o texto que aparece na parte superior do navegador
do usurio.
25
OURO MODERNO
Outra maneira de fazermos isso na parte superior da

janela do Dreamweaver, na rea Title.
Document Type (DTD)

Aqui onde definimos o tipo de documento (DTD), ou
seja, qual padro de tipo seguir, escolhendo entre as opes
disponveis.
Encoding
Nessa rea selecionado o tipo de codificao de
caracteres utilizados na pgina.
Tracing Image
O Dreamweaver tem uma opo muito interessante para

ajudar a criar uma pgina, seguindo um modelo de interface
que j tenha sido criado em um software grfico, como
Fireworks, Photoshop etc.
Esse sistema se chama Tracing Image que uma imagem
colocada como fundo na pgina apenas enquanto utilizamos o
Dreamweaver, no sendo incorporada ao resultado final (a
pgina HTML ).
Para remover a imagem de rastreamento, basta apagar o
nome dela que est no campo Tracing image da janela de
propriedades da pgina.
Repare que na parte superior do Dreamweaver temos uma
aba com o nome do arquivo.
26
OURO MODERNO
Por enquanto est a palavra Untitled, que simboliza o

nome do arquivo e um sinal de asterisco, que aparece sempre
que voc faz alguma alterao no arquivo e ainda no o tenha
salvado aps a alterao, funcionando como um lembrete.
Voc pode observar que no topo da janela aparece como

documento no salvo o tipo de documento
e o asterisco
representa que o arquivo no foi salvo, ele sempre ir aparecer
quando voc modificar seu documento. Para voc salvar
rapidamente um documento ao qual se esta trabalhando, use
as teclas de atalho CTRL+S.
O arquivo por padro ser salvo com a extenso html. Se
o arquivo a ser salvo for primeira pgina de seu site ele deve
ter o nome de index (index.html).
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.seusite.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
webdesigners optam por usar o nome default, caso exista os
dois arquivos, a preferncia fica para o index.
A extenso html deve ser utilizada em pginas web que
no contenham blocos de cdigos dinmicos. Pginas que
contenham blocos de cdigo PHP devem ser salvas com essa
extenso.
27
OURO MODERNO
Exerccios
1) Abra o Dreamweaver CS3.
2) Crie uma nova pgina acessando o menu File> New.
3) Em Page Type escolha HTML e clique em Create.
4) Acesse o menu Site e clique na opo Manage Site.
5) Na caixa Manage Site, clique em New e depois clique
em site.
6) Na rea What would you like to name your site?, digite
o nome do site de Meu site.
7) Clique em Next.
8) Deixe marcado a opo No, i do not want to use a
server technology e clique em Next.
9) Marque a opo Edit local copies on my machine,
then upload to server when ready (recommended).
10) Em Where on your computer do you want to
store your store files?, escolha a sua pasta para salvar o seu
site. Caso no tenha uma pasta, crie uma para salvar seus
arquivos.
11) Clique em Next.
12) Em How do you connect to your remote server?
escolha a opo None.
13) Clique em Next.
14) Clique em Done.
15) Clique novamente em Done.
16) Acesse as propriedades de pgina(Menu Modify> Page
Properties).
17) Na categoria Appearance, em Page Font, clique em
Edit font List.
18) Em Available fonts escolha as fontes Arial, Georgia,
Times New Roman, Verdana e sans-serif.
19) Clique em OK.
20) Agora em Page Font escolha as fontes que voc
criou.
21) Em Size escolha o tamanho 16.
22) Em Text color digite a cor #FF9900.
23) Em Background color escolha cor branca.
24) Em Background image escolha a imagem com o
nome de arquivo Piscina Ouro para a pgina.
25) Em Repeat escolha a opo no-repeat.
28
OURO MODERNO
26) Clique na categoria Link.

27) Em Link font escolha as fontes que voc criou
anteriormente.
28) Em Size escolha o tamanho de 14.
39) Em Link color digite a cor #0000FF.
30) Em Rollover links digite a cor #FFFF66.
31) Em Visited links digite a cor #99FF66.
32) Em Active links digite a cor #FF0000.
33) Clique na categoria Headings.
34) Em Headings fonts escolha as fontes que voc criou
anteriormente.
35) Para o tamanho dos Headings digite os seguintes
valores:
Heading 1 : 36.
Heading 2: 18.
Heading 3: 14.
Heading 4: 10.
Heading 5: 8.
Heading 6: 6.
36) Clique na categoria Title/Encoding.
37) Em Title digite site.
38) Clique em OK.
39) Veja na rea de trabalho como ficou a configurao da
pgina.
40) Acesse novamente as propriedades da pgina.
41) Clique na categoria Tracing Image.
42) Em Tracing Image insira a imagem com o nome do
arquivo de Fundo.png.
43) Clique em OK.
44) Salve a sua pgina com o nome de arquivo site.html
na sua pasta.
45) Feche o Dreamweaver CS3.
29
OURO MODERNO
Aula 3 Trabalhando com textos
A formatao de textos dentro de um documento HTML

muito semelhante formatao em editores de texto, com
algumas ressalvas. Podemos adicionar observaes de textos
invisveis chamados comentrios, como anotaes para seus
documentos.
Para formatar o seu texto depois de digit-lo, ou copi-lo e

col-lo em seu documento, basta apenas selecion-lo e, atravs
da barra de propriedades, voc pode format-lo.
No desenvolvimento de sites, atualmente no se formata
mais o texto diretamente em sua TAG de chamada.
Exemplo <font face= Arial >texto </font>, cria-se um
estilo para a fonte e aplica-se esse estilo na fonte
Se o estilo for aplicada somente uma palavra ficaria
<span style= fontfamily:Arial >texto</span>.
Na opo formato podemos definir se ser somente texto
ou ter atribuies de cabealho (veremos posteriormente).
Na opo para escolha da fonte, o prprio Dreamweaver
define tipos de letras seguras para a WEB, voc deve lembrar
que as letras so processadas na mquina do usurio, ento o
cuidado com a escolha das letras deve ser grande, mas voc
pode editar a lista existente, assim como criar uma nova lista.
30
OURO MODERNO
No prximo quadro podemos definir qual o tamanho da

letra.
Depois temos a cor da letra, a HTML baseia-se no padro
RGB de cores e os valores so mostrados em cdigos
Hexadecimais. Temos ao lado estilos de texto como Negrito e
itlico, alm dos alinhamentos bsicos como esquerda, centro,
direita e justificado.
Ao lado temos a opo de atribuir um link ao texto
(assunto a ser visto posteriormente). O uso de marcadores e
recuos.
Atravs do Menu Text, temos outras opes de formatao
como: Estilos variados de formatao, como por exemplo,
sublinhado, nfase, citao etc...
Pargrafos e Layout
A unidade bsica de texto em HTML o pargrafo.
Enquanto o pargrafo o nome especfico de texto includo pela
tag <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.
Pargrafos e Quebras de linha
Na HTML existe uma diferena entre pargrafos HTML,
com os pargrafos utilizados em um editor de Textos como o
Microsoft Word, por exemplo. Na HTML, o pargrafo faz um
espaamento duplo entre um pargrafo e outro e permite por
padro os alinhamentos esquerdo (padro), centro, direita e
justificado.
J as quebras de linhas apenas quebram a linha na
posio e o que vier depois da quebra ser colocado na prxima
linha, como um pargrafo de editor de textos.
Para inserir uma quebra de linha devemos pressionar as
teclas Shift+ Enter.
31
OURO MODERNO
DIV e SPAN
H outros tipos de blocos de texto que voc talvez
encontre <div> e <span>. A TAG <div> significa diviso
utilizada para marcar blocos de texto que (geralmente) se
distribuem por mais de um pargrafo. Voc no pode terminar
a diviso dentro de um pargrafo, porque a TAG </div>
automaticamente quebra o pargrafo. A TAG <span>, por outro
lado, pode ser utilizada para marcar uma rea dentro de um
bloco de texto individual, como dentro de um pargrafo ou
blockquote.
Essas duas TAGS so principalmente utilizadas em
conjuno com folhas de estilo.
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.
32
OURO MODERNO
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.
Para voc inserir mais de um espao entre as palavras na
pgina, voc ter que usar o comando Ctrl+Shift+Espao.
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 Text, List,
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.
33
OURO MODERNO
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.
Caracteres Especiais em HTML

H uma variedade de caracteres especiais em HTML que
voc pode querer utilizar em suas pginas. O Dreamweaver
possui alguns destes smbolos e podem ser utilizados a partir
do menu Insert, Special Caracteres, ou atravs da aba Text do
Dreamweaver.
Linhas Horizontais
Uma linha horizontal uma linha que atravessa a pgina
horizontalmente e fornece uma diviso explcita, em vez de
implcita, entre as partes de um documento.
Para criar uma linha horizontal, clique no Menu Insert
Horizontal Rule, ou clique no boto, na caixa de ferramentas
(Aba HTML).
Ao criar a linha horizontal e selecion-la, voc pode
format-la.
Voc pode tambm deixar visvel barra de texto:
34
OURO MODERNO
35
OURO MODERNO
Exerccios
1) Ative o Dreamweaver CS3.

2) Abra a pgina salva na aula anterior com o nome de
arquivo site.html.
3) Acesse o menu File e clique em Save As.
4) Salve com o nome do arquivo de textos.html em sua
pasta.
3) Acesse as propriedades de pgina (menu Modify> Page
Properties).
4) Na categoria Appearance apague o caminho de
Background color.
5) Clique na categoria Tracing image.
6) Apague o caminho de Tracing image.
7) Clique em OK.
8) Digite o seguinte texto na pgina:
Jardim zoolgico
Um jardim zoolgico, tambm chamado de zoolgico ou

simplesmente zoo, um local especfico para se manter
animais, selvagens e domesticados, que podem ser
exibidos ao pblico. Nele existem profissionais
especializados, como veterinrios, que cuidam da
alimentao, das jaulas, da sade mental e fsica dos
animais, entre muitas outras atividades.
Histria
Os seres humanos criam animais em cativeiro h, pelo

menos, 25000 anos. Os primeiros animais mantidos em
cativeiro talvez tenham sido os pombos, h 6500 anos, no
Iraque.
Modernizao
A mudana de atitude e da mentalidade das pessoas, com

os avanos da tecnologia, entre outros fatores, est
fazendo com que os zoolgicos fiquem mais sofisticados.
36
OURO MODERNO
Objetivos
Os zoolgicos possuem vrios objetivos, dentre os quais

esto a pesquisa, a preservao e a educao, sendo que
a diverso o menos relevante. Assim, os zoolgicos tm
o papel de proteger os animais em vez de explor-los.
Curiosidades
Os maiores zoolgicos do mundo so:
Monarto, prximo a Adelaide, na Austrlia (10 km)

Harbin, na China (8,5 km)
San Diego Wildlife Park, nos Estados Unidos (8,2 km)
Jardim zoolgico de So Paulo, Brasil (8,0 km)
9) Selecione o ttulo e faa a seguinte formatao:

Negrito, centralizado e Heading 1.
10) Na primeira linha do pargrafo use o Negrito para
destacar as seguintes palavras:
Jardim zoolgico, zoolgico e zoo.
11) Selecione os subttulos Histria, Modernizao,
Objetivos e Curiosidades e faa a seguinte formatao:
Negrito, Itlico, Hrading 2 e Text Indent(Adicionar
recuo).
12) Salve sua pgina.
37
OURO MODERNO
Aula 4 - 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).
Para inserir uma imagem em sua HP, temos vrias formas,
a mais prtica clicando sobre o boto Insert Image na caixa
de Ferramentas, outra forma, atravs do Menu Insert.
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.
Ao se escolher a imagem a ser inserida, como definimos

no incio 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 Long
description pode deixar em branco.
38
OURO MODERNO
Ao adicionar a imagem, a barra de propriedades modifica-

se para a configurao da imagem.
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.
A opo link permite transformar a sua imagem em um
link, veremos esse assunto posteriormente. E temos as
ferramentas de edio.
Edio de imagem
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.
Entre as opes de manipulao para uma imagem temos:

Opmitize : permite otimizar a imagem:
39
OURO MODERNO
Ferramenta Crop : permite recortar a sua imagem, ao

estar com a imagem selecionada e clicar sobre essa
ferramenta, ele mostrar sob a sua imagem as alas de
recorte, defina o corte e pressione ENTER. Importante, ao ser
recortada a imagem somente possvel voltar atravs de o
comando desfazer.
Resample : ao redimensionar a imagem, possvel
deixar a imagem salva com o novo tamanho.
Brightness and contrast : permite modificar o brilho e
contraste da imagem.
Sharpen : permite trabalhar o desfoque da imagem.
Clicando no boto de editar no Fireworks , o

Dreamweaver abre o editor externo para a edio de imagens.
Se clicar nesse boto, ser aberta uma caixa de dilogo
perguntando se quer utilizar um arquivo j existente do
Fireworks que tenha dado origem a essa imagem (Use a PNG)
ou utilizar diretamente essa imagem (Use This File).
Escolhemos, ento, a opo Use This File porque
queremos editar apenas essa imagem e no uma eventual
matriz da qual ela foi gerada.
No Fireworks podemos editar sua imagem e, quando tiver
finalizado, clique no boto Done.
Automaticamente, a imagem atual que est no
Dreamweaver ser atualizada.
Ainda temos como propriedades da imagem a opo V

Space, que permite colocar um espaamento vertical entre a
40
OURO MODERNO
imagem e demais objetos, H Space permite colocar um

espaamento horizontal entre a imagem e demais objetos.
Low Src: caso a sua imagem venha a ser muito pesada e
demore a abrir, pode-se definir uma imagem em baixa
qualidade para ser aberta antes.
Border: permite definir se sua imagem ter bordas ou no.
Ao colocar link em sua imagem e no utilizar borda, preencha o
campo com 0(zero).
Align: permite definir o alinhamento da imagem em
relao vertical.
Image Placeholder
Image Placeholder um objeto do Dreamweaver que voc

pode acrescentar em seu documento no espao onde ficar
uma imagem, que ainda no est pronta, mas que permite que
voc v diagramando seu HTML. Para inserir uma imagem
placeholder, voc pode clicar no menu, Insert, Image Objects,
Image Placeholder, ou clicar no boto junto s opes de
imagem da aba Common.
41
OURO MODERNO
Exerccios

2) Abra a pgina com o nome do arquivo de textos.html
salvo na aula anterior.
3) Acesse o menu File> Save As e salve a pgina com o
nome do arquivo de imagem.html em sua pasta.
4) Posicione o cursor no incio do ttulo e pressione a
tecla Enter.
5) Posicione o cursor na linha acima do ttulo e clique em
Image Placeholder, junto s opes de imagem da aba
Common.
6) Na caixa de dilogo digite os seguintes dados:
Name: Banner
Width: 970
Heigth: 150
Color: #0099FF
Alternate text: Banner
Depois de ajustar a configurao clique em OK.
8) No final pargrafo de Histria insira uma nova linha.
9) Clique em Image junto s opes de imagem da aba
Common.
10) Localize a pasta Imagem dentro da pasta Site e
insira a imagem com o nome do arquivo Historia.jpeg.
11) Na barra de propriedades digite para Border o
tamanho de 5.
12) Centralize a imagem na pgina.
13) Clique no boto Brightness and contrast e altere os
seguites valores:
Brightness: 10
Contrast: 15
14) No final do pargrafo Modernizao insira uma nova
linha.
Common.
insira a imagem com o nome do arquivo Moderno.jpeg.
17) Na barra propriedades em Border digite o tamanho
de 5.
42
OURO MODERNO
18) Centralize a imagem.

19) Clique no boto Sharpen na barra de propriedades e
altere o Sharpen para o valor 5.
20) Altere o tamanho da imagem na barra de
propriedades para os seguintes valores:
H: 510
W: 333
21) No final do pargrafo Objetivos insira uma nova
linha.
Common.
insira a imagem com o nome do arquivo zoo.jpeg.
24) Altere o tamanho da imagem na barra de
propriedades para os seguintes valores:
H: 510
W:333
25) Centralize a imagem.
26) Na barra de propriedades, em Border digite o
tamanho 5.
27) Salve a sua pgina e feche o Dreamweaver CS3.
43
OURO MODERNO
Aula 5 - Hyperlinks
O principal elemento que fez com a Internet crescesse

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.
Links Absolutos e Relativos
Antes de comear a colocar os links em suas pginas da

WEB, voc deve estar ciente dos diferentes tipos de nomes de
caminho que voc pode utilizar para vincular a outro
documento na Internet.
Os nomes de caminho absolutos

Apontam para uma localizao na Internet fora do site no
qual a pgina atual est localizada. No nome de caminho
http://www.adobe.com.br/index.html, o documento index.html
est localizado dentro da raiz do site.
Os nomes de caminhos relativos

Apontam para links dentro do mesmo site, por exemplo,
no site atual http://www.seusite.com.br/ preciso fazer um link
para o arquivo imagens.html, ento, por estar no mesmo
diretrio, somente ligo ao nome do arquivo. J, se preciso
linkar para uma imagem localizada na pasta imagem, fao da
seguinte forma: imagem/figura.gif, que o link vai procurar
dentro da pasta imagem o arquivo figura.gif.
Em servidores Windows no existe a diferenciao entre
maisculas e minsculas no nome e extenso dos arquivos,
nem sobre acentuao e espaos.
44
OURO MODERNO
Mas na internet, a grande maioria de servidores opera

com o Sistema Operacional LINUX que se baseia na UNIX,
ento, sempre procure utilizar nos nomes dos arquivos de seu
site, letras minsculas, sem acentuao e sem espaos, pois se
voc colocar letra maiscula no nome de um arquivo e fizer o
link com letra minscula, o arquivo no ser encontrado.
Criando Links
Crie um texto, 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.
Defina o arquivo ao qual ser ligado, e no menu pop onde

voc pode especificar se o link relativo pgina ou site Root,
para fazer o link relativo a uma localizao central em seu site
da WEB.
Podemos tambm, para criar um link, arrastar point to

file diretamente at o arquivo a ser linkado.
45
OURO MODERNO
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 voc precisar que o link abra em uma nova
janela, basta eu especificar nesse campo a opo _blank. As
demais opes so:
_parent: Carrega o link no frame de nvel superior ao atual;
_self: Carrega o link na mesma janela ou frame;
_top: Remove todos os frames e carrega o link em uma
janela inteira.
Um item muito importante quando se faz links para um

endereo absoluto, como no exemplo, sempre colocar o
protocolo a ser utilizado, no caso http://, pois se fosse colocado
somente www.ouromoderno.com.br, o mesmo seria
interpretado como um subdiretrio com esse nome, por esse
motivo foi usado http://www.ouromoderno.com.br.
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 Insert Named Anchor.
Junto ao local onde a ncora ser criada aparecer uma

marca .
Chamando o link da ncora

Para criar agora o link para esta ncora na caixa de links,
digite #nomedancora. Se a ncora estiver em outro
documento coloque documento.htm/#nomedaancora.
46
OURO MODERNO
Links para e-mail

Podemos tambm atribuir link para e-mail, atravs de
textos ou imagens, o que muda a forma de chamada, para se
criar o link para um e-mail, deve-se usar
mailto:endereco@seuemail.com.br.
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.
Mapas de Imagem
Podemos inserir uma imagem no documento e 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.
47
OURO MODERNO
Exerccios

2) Abra a pgina salva com o nome do arquivo de
imagem.html criado na ltima aula.
nome do arquivo de links.html em sua pasta.
4) D um clique duplo sobre a Image Placeholder com o
nome de Banner.
5) Na pasta imagem localize o arquivo banner.png e
clique em OK.
6) Posicione o cursor antes do ttulo Jardim zoolgico.
7) Clique no boto Insert Named Anchor (ncora) junto
s opes da aba Common.
8) Em Anchor name digite o nome para ncora de topo.
9) Agora selecione o subttulo Histria.
10) Na barra de propriedades, em Links localize na pasta
Site a pgina com o nome do arquivo de
historia.html.
11) Ainda com subttulo selecionado, na barra
propriedades, em Target escolha _self.
12) Selecione agora o subttulo Modernizao.
13) Na barra propriedades, em Links localize a pgina
modernizao.html.
14) Em Target escolha _self.
15) Selecione o subttulo Objetivos.
16) Em Link localize a pgina objetivos.html.
17) Em Target escolha _self.
18) Posicione o cursor no final da ltima linha da pgina e
insira uma nova linha.
19) Digite a seguinte frase:
Para enviar um e-mail para o Zoo clique aqui.
20) Selecione as palavras clique aqui da frase que voc
digitou.
21) Em Link na barra de propriedades digite o link:
mailto:ouromoderno@ouromoderno.com.br
22) Insira uma nova linha.
23) Digite para a nova linha a frase:
48
OURO MODERNO
Inicio da pgina
24) Selecione a ltima linha e em Link digite #topo.
25) Salve a pgina.
26) Clique no boto Preview/Debug in browse e
escolha Priview in IExplore.
27) Teste os links para ver se esto funcionando
corretamente.
28) Volte para o Dreamweaver CS3.
29) Crie uma nova pgina em HTML e salve com o
nome de arquivo de mapa.html.
30) Digite para a primeira linha da pgina a seguinte
frase:
Clique em uma regio do mapa para acessar o site de seu

respectivo estado:
31) Insira uma nova linha e clique no boto Image junto

s opes da aba Common.
32) Insira a imagem com o nome do arquivo de
Mapa.png localizado na pasta Imagem dentro da pasta
Site.
33) Selecione a ferramenta Polygon Hotspot Tool na
barra propriedades.
34) Selecione todo o estado do Rio Grande do Sul.
35) Na barra de propriedades em Link digite o seguinte
endereo:
http://www.estado.rs.gov.br/
36) Agora selecione o estado de Santa Catarina.
37) Em Link digite o endereo abaixo:
http://www.sc.gov.br/
38) Selecione o estado do Paran.
39) Em link digite o seguinte endereo:
http://www.pr.gov.br/
escolha Priview in IExplore.
42) Teste os links para ver se esto funcionando
corretamente.
49
OURO MODERNO
Aula 6 - Tabelas
A funcionalidade da tabela foi adicionada a HTML para

simplificar a apresentao de dados tabulares, como relatrios
cientficos. Atualmente a utilizao das tabelas tem crescido e
tomando o lugar dos Frames na distribuio de dados em um
site.
Para criar uma tabela muito importante que a mesma
seja planejada e rascunhada antes para depois minimizar o seu
trabalho.
Para inserir uma tabela clique no boto Insert Table, ou no
boto de insero de tabela na barra de propriedades, ela est
disponvel na aba Common e Layout.
Defina nmero de linhas e colunas desejadas, se quer

borda e qual ser a sua espessura, defina a largura de sua
coluna 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).
50
OURO MODERNO
Na barra de propriedades da tabela podemos alterar as

propriedades de nossa tabela. Podemos tambm alterar o
alinhamento da tabela, a cor de fundo da tabela, cor de borda e
imagem de fundo da tabela.
Ao se clicar na Aba Layout, no meio da barra, temos
tambm os botes de manipulao de nossa tabela.
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.
51
OURO MODERNO
As possibilidades de alterao das clulas so a opo de

mesclar duas ou mais clulas, ao lado do boto mesclar temos
o boto dividir clulas, ao clicar sobre ele podemos dividir em
colunas ou linhas.
Ao lado temos as opes de definir as dimenses da

clula, largura (W width) e altura (H height), as dimenses
podem ser aplicadas em pixels ou em porcentagem.
A opo No wrap tem como objetivo impedir que o
contedo quebre para a linha de baixo da clula ao alcanar a
largura da clula.
A opo Header permite atribuir clula a propriedade de
clula de cabealho (ttulo), acrescenta um negrito e um peso
maior fonte.
Podemos tambm acrescentar cor de fundo e de borda a
nossa tabela, bem como imagem de fundo.
52
OURO MODERNO
Exerccios

2) Crie uma nova pgina em HTML e salve com o nome
do arquivo de tabela.html.
3) Clique no boto Table da aba Cammon ou Layout.
4) Na janela Table faa os seguintes ajustes:
Rows: 5
Columns: 4
Table width:550 pixels
Border thickness: 1 pixels
5) Mescle a primeira linha.
6) Na primeira linha insira uma imagem que est na pasta
Imagem, dentro da pasta Site com o nome do arquivo
de logo.png.
7) Agora na segunda linha vamos digitar o nome dos
futuros botes. Digite os nomes dos botes na ordem a
seguir:
Home, Eventos, Produtos e Contato
8) Faa a seguinte formatao para a segunda linha da
tabela:
Negrito e Centralizado
9) Na primeira coluna, mescle a linha 3 e 4.
10) Digite na clula que voc mesclou anteriormente os
seguintes textos:
Desenvolvimento para web
Conhea a empresa
Oramentos
Fale conosco
Hospedagem
Parceiros comerciais
11) Na linha 3 da tabela, mescle as colunas 2 e 3.
12) Digite na linha que voc mesclou o texto de Seja
Bem-vindo (a).
53
OURO MODERNO
13) Selecione o texto Seja Bem-vindo (a) e faa a

seguinte formatao:
Negrito, itlico e centralizado.
14) Sua pgina deve estar dessa forma:
15) Na ultima coluna mescle as linhas 3 e 4.

16) Mescle a linha abaixo da clula Seja Bem-vindo (a).
17) Para a clula digite o seguinte texto:
"H pouco tempo atrs a internet era um acessrio, sem
impacto nos resultados. Hoje ele um fator decisivo para
os negcios"
A empresa simples.com trabalha com design e solues

para a internet.
Com a difuso e popularizao da Internet no Brasil, cada

vez mais empresas e profissionais liberais esto
percebendo o poder de divulgao e aproximao com os
clientes que um site bem elaborado tem.
18) Selecione o primeiro pargrafo e faa a seguinte

formatao:
Negrito e itlico.
19) Sua pgina deve estar assim:
54
OURO MODERNO
20) Na clula mesclada abaixo de Contato insira a

imagem parceiro.jpeg localizado na pasta Imagem
dentro da pasta Site.
21) Ajuste a largura da coluna da imagem clicando e
arrastando a linha da coluna sobre a imagem.
22) Na ltima linha mescle as clulas 2 e 3.
23) Digite para a ltima linha os seguintes nomes para os
botes:
Pgina inicial, Desenvolvimento e Fale conosco
24) Selecione a ltima linha da tabela e faa a seguinte
formatao:
Negrito e centralizado
25) Acesse a aba Layout.
26) Clique no boto Insert Row Below para inserir uma
nova linha.
27) Mescle a nova linha criada.
28) Digite para a linha o seguinte texto:
simples.com Solues Inteligentes Direitos
autorais reservados
Obs.: Para inserir o smbolo acesse a aba Text e
localize-o no boto Caracters.
29) Na ltima linha centralize o texto.
30) Ajuste a largura das clulas e colunas da pgina para
o seu gosto.
32) Visualize a pgina no navegador pressionando a tecla
F12.
33) Feche o navegador e o Dreamweaver CS3.
55
OURO MODERNO
Aula 7 Frames
A construo de pginas em Frames, embora seja

possvel, considerada ultrapassada e fora de padres de
layout atuais e futuros. Mas, em algumas situaes ela pode se
tornar muito til.
Embora uma pgina baseada em frames funcione como
uma nica pgina WEB, cada frame contm um nico
documento de HTM que pode incluir contedos completamente
separados e barras de rolagem independente. A cola que une
esses documentos chamada documento de definio de
frameset ou pgina de frameset um frameset um conjunto
de frames e a pgina de frameset que define como um
conjunto.
Criando os Frames
Para criar frames clique no Menu File New, e escolha

Framesets.
Ao clicar no boto Create, ser solicitado que se d nome

aos Frames que compe o seu Layout, voc pode deixar os
nomes padres ou modificar de uma forma que facilite a
identificao posterior.
56
OURO MODERNO
Podemos alterar as propriedades de nosso frames

colocando bordas, cores para a borda, largura para a borda
definir unidade de medida atravs da barra de propriedades dos
frames.
Podemos acrescentar novas molduras criando novas

subdivises em seus frames.
Salvando Frames
Existe um cuidado muito grande ao salvar uma pgina

com Frames, pois um frame, por exemplo, pode possuir 4
(quatro) pginas abertas: o topo, o menu, o miolo e o quadro
principal, que armazena o frame.
Para salvar todas as pginas do frames, clique no Menu
File Save All (salvar todos).
Alterando as propriedades de suas molduras
Para modificar o nome e as propriedades de suas

molduras individualmente, chame o painel Frames.
Podemos definir qual ser a pgina a ser aberta dentro do
Frame, formatao das bordas, definir qual ser o nome de
nosso frame, se ser possvel redimensionamento, como ser a
paginao e largura e altura da margem.
57
OURO MODERNO
Criando Frames Embutidos (IFRAME)
Existe uma TAG chamada <IFRAME> para fazer os frames

aparecerem dentro de uma pgina.
Para poder introduzi-la proceda da seguinte maneira: abra
o visualizador de cdigo do HTML e insira uma TAG <IFRAME
SRC= arquivo.html ></IFRAME>. As propriedades do IFRAME
so as mesmas do FRAME.
Podemos tambm acrescentar IFRAME, pelo assistente de

TAG do Dreamweaver. Clique no Menu Insert TAG, Clique em
HTML TAGS, Page elements, General, Iframe.
58
OURO MODERNO
Depois clique em Insert, e especifique as propriedades de

seu Iframe.
Em Source, devemos colocar qual ser a pgina a ser

aberta no IFRAME, em Name, deve-se colocar um nome para o
IFRAME ( imprescindvel o preenchimento desse campo, caso
faa link para abrir outras pginas dentro do IFRAME).
Width e Height para definir a largura e altura do IFRAME.
Margin width e Margin Height para definir as margens de
IFRAME e do contedo interno e externo dele.
Alignment, forma de alinhamento do contedo dentro do
IFRAME Scrolling, definio de como sero apresentadas s
barras de rolagem (A opo Auto apresentar as barras de
rolagem somente quando necessrias).
Show Borders, permitir ter ou no bordas em seu
IFRAME.
59
OURO MODERNO
Exerccios
1) Abra o Dreamweaver CS3.

2) Crie uma nova pgina usando Frameset com layout de
Fixed Top, Nested Left.
3) Na caixa de dilogo digite os seguintes dados:
Para mainFrame digite contedo.
Para topFrame digite topo.
Para leftFrame digite menu.
4) Digite para o frame topo o seguinte texto:
Sites dos clubes de futebol do Brasil
5) Faa a seguinte formatao para o texto:
Cor da fonte: #000000
Size: 36 pixels
6) Agora para o frame menu digite o texto:
Atltico-MG
Atltico-PR
Botafogo
Coritiba
Cruzeiro
Figueirense
Flamengo
Fluminense
Gois
Grmio
Internacional
Ipatinga
Nutico
Palmeiras
Portuguesa
Santos
So Paulo
Sport
Vasco
Vitria
7) Ajuste a largura do frame menu.
60
OURO MODERNO
8) Agora vamos criar links dos sites oficiais de cada clube

brasileiro.
9) Selecione o primeiro clube que o Atltico-MG. Em
Link digite o endereo http://www.atletico.com.br/.
10) Em Target escolha mainFrame.
11) Agora para os demais clubes basta voc seguir o
passo anterior e colocar os respectivos links abaixo
para cada clube.
Atltico-PR
Link: http://www.atleticoparanaense.com/
Target: mainFrame
Botafogo
Link: http://www.botafogonocoracao.com.br
Target: mainFrame
Coritiba
Link: http://www.coritiba.com.br
Target: mainFrame
Cruzeiro
Link: http://www.cruzeiro.com.br/
Target: mainFrame
Figueirense
Link: http://www.figueirense.com.br/
Target: mainFrame
Flamengo
Link: http://www.flamengo.com.br/
Target: mainFrame
Fluminense
Link: http://www.fluminense.com.br/
Target: mainFrame
Gois
Link: http://www.goiasesporteclube.com.br/
Target: mainFrame
Grmio
Link: http://www.gremio.net/
Target: mainFrame
Internacional
Link: http://www.internacional.com.br/
Target: mainFrame
Ipatinga
Link: http://www.ipatingafc.com.br/
61
OURO MODERNO
Target: mainFrame
Nutico
Link: http://www.nautico-pe.com.br/
Target: mainFrame
Palmeiras
Link: http://www.palmeiras.com.br/
Target: mainFrame
Portuguesa
Link: http://www.portuguesa.com.br/
Target: mainFrame
Santos
Link: http://santos.globo.com/
Target: mainFrame
So Paulo
Link: http://www.spfc.com.br/
Target: mainFrame
Sport
Link: http://www.siteoficialdosport.com.br/
Target: mainFrame
Vasco
Link: http://www.crvascodagama.com/
Target: mainFrame
Vitria
Link: http://www.ecvitoria.com.br/
Target: mainFrame
12) No frame contedo digite o texto abaixo:
Clique nos nomes dos clubes ao lado para acessar o site

oficial de cada time.
Abaixo est o site oficial da CBF - Confederao Brasileira
de Futebol.
13) Selecione o texto do frame contedo e altere em Size

para 18 pixels.
14) Insira uma nova linha no frame contedo.
15) Acesse o menu Insert>Tag.
16) Clique em HTML Tags> Page Elements> General.
17) Selecione a opo iframe e clique em Insert.
62
OURO MODERNO
18) Na caixa de dilogo preencha os seguintes dados:

Source: http://www.cbf.com.br/
Name: CBF
Width: 840
Height: 400
19) Selecione o frameset topo e faa as seguintes
alteraes:
Borders escolha a opo Yes
Border Widht digite o tamanho 2.
Border color escolha a cor #000000.
20) Selecione o frameset menu e faa as seguintes
alteraes:
Borders escolha a opo Yes
Border Widht digite o tamanho 2.
Border color escolha a cor #000000.
escolha Preview in IExplore.
22) Salve seu frameset com os seguintes nomes de
arquivos:
Para o primeiro digite principal.html

Para o segundo digite contedo.html
Para o terceiro digite menu.html
Para o quarto digite topo.html
23) Agora teste os links da pgina.

63
OURO MODERNO
Aula 8 - Integrao com o Photoshop CS3
Com a compra da Macromedia pela Adobe, uma integrao

que todos queriam muito, agora j possvel entre o
Dreamweaver e o Photoshop.
Ficou muito mais fcil o intercmbio entre o designer que,
na maioria das vezes, cria as imagens com o Photoshop e o
codificador HTML.
Com um arquivo-fonte do Photoshop (psd) no pode ser
utilizado em pginas HTML, abre-se a janela Image Preview a
mesma que utilizamos antes para otimizar uma imagem onde
fazemos os ajustes necessrios na imagem ser exportada para
ser compatvel com um pgina HTML.
Quando voc clicar no boto OK, dever escolher um

nome para essa imagem gerada a partir de um arquivo do
Photoshop.
Ao selecionar alguma imagem na pgina, perceba que o
inspetor de propriedades ter agora um novo campo Src
representado pelo cone do Photoshop, que contm uma
referncia ao arquivo-fonte (psd) do qual a imagem foi gerada.
64
OURO MODERNO
Na rea de edio de imagens, em vez do boto de editar

no Fireworks, teremos agora o cone do Photoshop para indicar
que, ao clicar nesse boto, o Photoshop ser o programa aberta
para a edio.
Outra forma de integrao, tambm novidade, copiar
uma rea de uma imagem no Photoshop e col-la diretamente
no Dreamweaver.
Quando editar a imagem no Photoshop, acesse a opo de
menu Edit Copy para copiar a rea apenas na camada que
estiver trabalhando (camadas so estruturas existente
principalmente em programas de edio de imagens que
permitem organizar elementos e realizar composies de
imagens, sobrepondo os elementos existentes) ou Edit Copy
Merged para selecionar a rea em todas as camadas.
Isso faz com que o contedo copiado no Photoshop esteja
disponvel na rea de transferncia do Sistema Operacional.
Passe para o Dreamweaver e no programa posicione onde
deseja colar o contedo e escolha a opo de menu Edit
Paste.
Se posteriormente precisa de outra rea ou alterar a que
havia copiado, deve repetir os passos (selecionar no Photoshop,
copiar e depois col-la no Dreamweaver).
65
OURO MODERNO
Exerccios

2) Crie uma nova pagina em HTML e salve a pgina com
o nome do arquivo de photoshop.html.
3) Clique no boto Image localizado na aba Cammon.
4) Insira a imagem com o nome do arquivo de layout.psd
localizado na pasta Imagem.
5) Na janela Image Preview, na aba Options altere o
Quality para 70.
6) Na janela Save Web Image salve com o nome do
arquivo de layout.jpeg.
7) Na barra de propriedades clique no boto Edit no
Photoshop.
8) Janela Camadas clique na camada de texto Site em
construo.
Obs.: Caso voc no esteja visualizando a janela Camadas
acesse o menu Janela> Camadas ou pressione a tecla F7.
9) Com a camada selecionada clique na ferramenta Texto

Horizontal localizado no lado esquerdo da rea de
trabalho.
66
OURO MODERNO
10) Com a ferramenta clique no final do texto Site em

construo!
11) Pressione a tecla Enter para inserir uma nova linha.
12) Digite para a nova linha a seguinte frase:
Em Breve um Contedo
Inovador para Voc Acessar
13) Clique novamente na camada Site em construo!
Em breve na aba Camadas.
14) Na barra de formatao abaixo dos menus clique no
boto Centralizar.
15) Clique na ferramenta Seleo localizado no painel da
esquerda da rea de trabalho.
16) Clique na camada Imagem no painel Camadas.
17) Com a camada pressione a tecla Delete.
18) Agora acesse o menu Arquivo> Abrir.
19) Localize a imagem com o nome do arquivo de
construo.psd localizado na pasta Imagem.
20) Clique sobre a imagem construo.psd e arraste
sobre a imagem layout.psd.
21) Posicione a imagem construo.psd no local que
voc achar melhor.
22) Clique sobre a camada do texto Site em
construo! Em Breve no painel Camadas.
23) Com a ferramenta Seleo arraste o texto para um
local que voc achar melhor na imagem.
24) Acesse agora o menu Selecionar>Tudo.
25) Clique no menu Editar> Copiar Mesclado.
26) Volte para o Dreamweaver CS3.
27) Acesse o menu Edit> Paste.
28) Salve a sua pgina.
29) Visualize a sua pgina no navegador.
31) Feche o Photoshop, se caso ele solicitar para voc
salvar a imagem, clique em Salvar.
67
OURO MODERNO
Aula 9 Integrao com o Flash CS3
A Web atual rica em recursos de multimdia, como

vdeos, udio, efeitos, etc..., claro que tudo isso depende de
diversos fatores, 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.
Insero de Animaes Flash (SWF)
Atualmente quando se pensa em animao para pginas

WEB, j se pensa em tecnologia Flash, pois segundo a Adobe,
98% dos computadores com acesso a internet possui alguma
verso do plug-in do flash instalados, e caso o computador no
possua, ao acessar uma pgina que contenha a animao em
Flash ele automaticamente baixa o mesmo e solicita uma
autorizao para a instalao do mesmo.
Para se inserir um arquivo SWF (aplicao criada no flash
e publicada, cuidado, no correto e nem possvel de
visualizao colocar o FLA, que um arquivo de projeto), clique
no menu Insert, Media Flash, ou no painel Insert, na categoria
Common, escolha nas opes de mdia (ao lado das de
imagem) o boto com o cone do Flash (uma pgina vermelha
com a letra F).
Dois conceitos atualmente muito debatidos e utilizados na

web atual so usabilidade e acessibilidade, e o flash sempre foi
considerado um vilo em relao a esses assuntos, mas na
ltima verso a Adobe j trabalhou e melhorou o flash em
relao a isso. Ento, ao inserir sua animao em 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.
68
OURO MODERNO
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.
Pela barra podemos configurar a dimenso do SWF, se ele

ficar em looping e se iniciar automaticamente, o
espaamento vertical e horizontal, a qualidade, a forma de
escala (Scale), quando seu filme possuir elementos que fiquem
fora do palco do Flash e interajam com o filme em tempo de
animao, coloque No Border. O alinhamento do flash em
relao ao local onde est inserido, cor de fundo para o filme.
Para poder visualizar o filme dentro do Dreamweaver,
basta clicar no boto Play.
A opo Parameters permite que voc adicione parmetros
ao seu filme. Um dos parmetros mais utilizados quando se
utiliza banners flutuantes, que muitas vezes se torna
necessrio que o fundo de seu filme fique transparente onde
no existe animao. Ai utiliza-se o parmetro wmode com
valor transparent.
69
OURO MODERNO
Inserindo Botes e Textos do Flash
O Dreamweaver se integra facilmente as outras

ferramentas da Adobe e podemos inserir dentro dele facilmente
componentes do Flash.
O prprio Dreamweaver j possui alguns exemplos de
botes e textos prontos, e voc pode criar seus componentes
no Flash e depois inseri-los dentro de sua pgina no
Dreamweaver.
Para inserir um boto do Flash, clique no Menu Insert,
Media Flash Button, ou atravs do boto Flash Button na barra
de ferramentas.
Texto Flash
Para termos textos interessantes, com design mais

elaborados e opes como troca de cores, podemos utilizar a
opo de Texto em Flash.
Para inserir esse elemento, no painel Insert, na categoria
Common e na parte de mdias voc deve escolher a opo de
texto em Flash (Flash Text).
70
OURO MODERNO
Flash Vdeo
Um dos grandes 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 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 barra de ferramentas no boto Flash Vdeo ou no
Menu Insert, Media, Flash Vdeo.
71
OURO MODERNO
Na tela apresentada, necessrio definir o caminho onde

est o seu arquivo FLV, o Skin de controle do vdeo, as
dimenses (Use o boto Detect Size), as opes Auto play
(inicia automaticamente) e Auto Rewind (reinicia
automaticamente) so opcionais, e a ltima tela uma
mensagem a ser mostrada caso o usurio no tenha o plug-in
do flash.
O Formato Flash Vdeo criado pela Macromedia , e

comprada pela Adobe, atualmente o formato mais
recomendvel para distribuio de vdeos na WEB. Para
transformar seu vdeo AVI, MOV, etc, em FLV necessrio um
programa de converso, pois ele usa como compactador do
vdeo o plug-in OnVp6 ou OnVP7. O Adobe Flash possui junto
a ele o Flash Vdeo Encoder, que faz essa converso, mas j
existem alguns conversores de vdeo que fazem essa
converso.
Plug-ins
Para adicionar outros tipos de arquivos multimdia em seu

website necessrio adio de um recurso chamado de Plug-
in, para inserir um plug-in no Dreamweaver. Boto Plug-in na
barra de ferramentas.
72
OURO MODERNO
Na janela que se abre voc deve localizar no projeto de

seu site o arquivo a ser publicado. Os demais acertos do
arquivo devem ser feitos pela barra de propriedades, como
tamanho, borda. Na opo Plug-in URL, somente preencha se
voc souber o caminho para que o mesmo possa ser baixado,
caso o usurio de seu site no o localize.
Podemos acrescentar alguns parmetros em nosso arquivo

de multimdia, clique no boto Parameters.
Observe na imagem acima, a dois parmetros um para

que ele me mostre os controles do filme como volume, play,
pause stop. E outro para que o filme inicie automaticamente.
Para arquivos que venham a ser publicados como plug-ins,
recomendvel utilizar para vdeo o formato WMV (Windows
media vdeo) e para udio o formato wma (Windows media
udio), existe diversos conversores no mercado que permitem
gerar esse tipo de arquivo. A Microsoft disponibiliza o
programa Windows Media, que freeware, para converter
formatos padres de vdeo para wmv, e arquivos de udio para
wma. Caso voc precise converter um arquivo que esteja em
CD de udio para wma, pode utilizar o Windows Media Player
para fazer a converso.
73
OURO MODERNO
Image Viewer
Atualmente, pela possibilidade de se colocar contedo

multimdia em websites, um uso muito comum criar
slideshow com imagens. Esse recurso normalmente feito pelo
Adobe Flash, mas o Dreamweaver possui um recurso bem
interessante para esse tipo de aplicao, ele mesmo gera o
arquivo SWF e lista as imagens que voc definir para serem
colocadas como slideshow, podendo definir, se as mesmas
tero controles de avano e retrocesso, se ficaro em looping,
possibilidade de se acrescentar legendas e hyperlinks nas
imagens a serem mostradas.
Para criar o slideshow, clique no Menu Insert, Media Image
Viewer, a primeira tela necessrio definir o nome que ser
criado seu SWF.
Aps salvar o seu Viewer, a barra de propriedades, vai

mostrar as configuraes para alterao.
Na barra lateral direita ser criada uma paleta chamada

Flash Element, atravs dela voc pode manipular as
propriedades de nosso visualizador.
74
OURO MODERNO
Na propriedade ImageURLS, onde devemos definir as

imagens as quais utilizamos em nosso slideshow. Ao se clicar
no campo onde esto os colchetes ([]), ele abrir uma nova
janela onde, ao se clicar no sinal de mais (+), ele abre um
campo para voc selecionar a imagem a ser colocada.
Ao clicar em Image Links, podemos definir o site / arquivo

que ser aberto ao se clicar na imagem.
Ao finalizar a escolha das imagens, clique em OK.

Caso voc queira que seu slideshow inicie
automaticamente, basta mudar na propriedade SlideAutoPlay
que est como No, para Yes. Na opo SlideLoop voc pode
definir para o slideshow ficar em looping. Em TransitionsType,
pode-se definir o tipo de transio que as imagens tero.
75
OURO MODERNO
Exerccios

do arquivo de flash.html em sua pasta.
3) Na aba Cammon clique no boto Table.
4) Configure a tabela da seguinte forma:
Rows: 5
Columns: 4
Table width: 550 pixels
Border thickness: 1 pixels
5) Com a tabela seleciona na barra propriedades faa
seguinte configurao:
Bg color: #C0C0C0
6) Mescle todas as clulas da primeira linha.
7) Na primeira linha clique no boto Flash na aba
Cammon.
8) Insira o arquivo do flash com o nome do arquivo de
banner.swf localizado na pasta Animaes.
9) Clique na primeira clula da segunda linha.
10) Clique no boto Flash Button localizado na aba
Cammon.
11) Na janela Insert Flash Button faa a seguinte
configurao:
Style: Beveled Rect-Grey
Button Text: Empresa
12) Clique na segunda clula da segunda linha.
Cammon.
configurao:
Button Text: Fotos
15) Clique na terceira clula da segunda linha.
Cammon.
configurao:
76
OURO MODERNO
Button Text: Vdeos

18) Clique na ltima clula da segunda linha.
Cammon.
configurao:
Button Text: Contato
21) Selecione todas as clulas da segunda linha e
centralize os botes.
22) Agora mescle todas as clulas da terceira linha.
23) Na terceira linha clique no boto Flash Text
localizado na aba Cammon.
24) Na janela Insert Flash Text faa a seguinte
formatao:
Font: Verdana
Size: 30
Color: #000000
Rollover color: #FF0000
Text: Bem vindo ao site Fotos & Vdeos
Bg color: #C0C0C0
25) Selecione a terceira linha da tabela.
26) Na barra propriedades clique em Centralizar.
27) Na quarta linha mescle as clulas 1 e 2.
28) Digite na clula o texto:
Slideshow de fotos recentes
29) Selecione a primeira clula da quarta linha e faa a
seguinte formatao:
Negrito e Centralizado
30) Na quarta linha mescle as clulas 3 e 4.
31) Digite na clula mesclada o seguinte texto:
Assista ao vdeo mais acessado
32) Selecione a clula e faa a formatao:
34) Na clula mesclada insira vamos criar um slideshow,
ento acesse o menu Insert> Media> Image
Viewer.
35) Na janela Save Flash Element salve com o nome do
arquivo de slideshow.swf .
77
OURO MODERNO
36) No painel Flash element, clique em ImageURLs

para inserir as imagens.
37) Na janela Edit image URLs Array insira as 10
imagens que esto localizadas na pasta Slideshow.
38) No painel Flash element faa as seguintes alteraes:
slideAutoPlay: Yes
slideDelay: 7
Title: Frias de vero
Transitions type: Fade
40) Para a clula vamos inserir um vdeo, clique no boto
Flash Vdeo localizado na aba Cammon.
41) Na janela Insert Flash Vdeo faa os seguintes
ajustes:
Vdeo Type: Progressive Download vdeo
URL: insira o vdeo misso.flv que est na pasta
Animaes
Skin: Clear Skin 3(min width:260)
Width: 400
Heigth: 325
43) Visualize sua pgina no navegador.
44) Feche o navegador e Dreamweaver CS3.
78
OURO MODERNO
Aula 10 Folhas de Estilo
O CSS (Cascading Style Sheet), ou folhas de estilo em

cascata, o recurso correto de formatao de elementos dentro
de seu documento HTML, seguindo os padres de internet
atuais recomendados deve-se sempre utilizar a CSS para
formatao e posicionamento de TAGS HTML.
O Dreamweaver CS3 reforou bastante o recurso de CSS

para formatao nas pginas.
No topo das paletas direita temos a paleta de CSS.
79
OURO MODERNO
Para se trabalhar com as folhas de estilo necessrio

algum conhecimento de HTML, pois ela baseia-se na
formatao das TAGS HTML e suas funes.
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 formataes.
Criando uma folha de estilo baseada em uma TAG
existente.
Para criar uma folha de estilo simples clique no painel CSS
clique no boto New CSS Style .
Marcando a opo Redefine HTML Tag, automaticamente

ele mostra o H1 que relativo ao ttulo de nvel 1. A opo
Define in: permite definir a formatao em um arquivo de folha
de estilos, ou somente no documento atual.
Ao clicar em OK ele abre a janela onde podemos definir a
forma que ter a TAG H1.
80
OURO MODERNO
A opo Type, permite alterar as configuraes de fonte da

TAG Selecionada.
Na opo Background podemos definir as configuraes de
plano de fundo da clula.
Em Block, podemos definir as configuraes de pargrafos
do texto, como espaamento entre palavras, alinhamentos,
etc...
A opo Box permite criar um bloco de nossa TAG
definindo largura e altura, etc...
Em Border, podemos definir o tipo de borda a aplicar em
nossa TAG.
List permite alterar as configuraes de nossa lista de
marcadores
Position permite trabalhar com posicionamento da TAG
selecionada em relao ao Documento.
Extensions permite definir quebras de pgina, cursor do
mouse, e filtros a serem aplicados ao seu website.
Editando uma folha de Estilos
Para alterar algo em sua folha de estilo, clique no boto

Edit Style Sheet , ser perguntado, qual o estilo existente que
voc quer alterar.
Criando uma classe
As classes permitem que se crie uma formatao especial

que possa ser adicionada dentro de outras TAGS, por exemplo,
precisamos formatar as clulas de uma tabela com duas cores
diferentes, podemos criar duas classes e aplicar dentro delas,
apelas clicando na tabela e depois clicando nas classes no
painel de estilos.
81
OURO MODERNO
A formatao da Classe igual formatao de uma TAG

HTML, a diferena que necessrio atribuir a classe a TAG.
Depois de criar a classe, selecione o elemento que vai

receber a classe e aplique ela ao contedo selecionado pela
barra de propriedades.
Em algumas situaes ser necessrio aplicar o estilo em

Tags no selecionveis pelo modo visual do Dreamweaver,
nesses casos necessrio aplicar o estilo pelo modo de cdigo,
basta apenas aps o nome da TAG digitar < TAG class=
nomedaclasse >.
O modo de aplicao de CSS que vimos at o momento

est diretamente aplicado no documento.
Caso tenhamos formataes de CSS que sejam aplicadas a

diversos documentos, podemos gerar um documento com a
extenso CSS e criar um link em cada documento para esse
arquivo. Isso, alm de padronizar seu site, far com que
qualquer alterao de formatao afete todos os documentos.
Para utilizar a formatao de CSS atravs de um arquivo

externo, crie um novo documento, e escolha a opo CSS.
82
OURO MODERNO
Para linkar ao arquivo CSS criado ao documento

existente clique no boto Attach Style Sheet
Basta agora todas as formataes a serem feitas no

arquivo CSS, sero aplicadas a todos os documentos ligados ao
arquivo css.
83
OURO MODERNO
Exerccios

2) Crie uma nova pgina CSS e salve como nome do
arquivo de estilo.css.
3) No painel CSS, clique no boto New CSS Rule.
4) Na janela New CSS Rule faa a seguinte configurao:
Selector Type: Tag(redefines the look a specific tag)
Tag: H1
Define in: This document only
5) Na categoria Type faa os seguintes ajustes:
Em font clique em Edit Font List e escolha as fontes
Arial, Times New Roman, Courier New, Georgia,
Verdana e sans-serif.
Size: 26 pixels
Weigth: bold
Style: italic
Variant: normal
Line heigth: normal
Color: #000000
6) Clique no boto New CSS Rule no painel CSS.
7) Na janela New CSS Rule faa a seguinte configurao:
Tag: Body
8) Na categoria Type faa a seguintes ajustes:
Font: Arial, Times New Roman, Courier New, Georgia,
Verdana e sans-serif
Size: 16 pixels
Color: #0000FF
10) Na janela New CSS Rule faa a seguinte
configurao:
Tag: H2
11) Na categoria Type faa a seguintes ajustes:
84
OURO MODERNO
Size: 18 pixels
Color: #0000FF
13) Na janela New CSS Rule faa a seguinte
configurao:
Selector Type: Advanced(IDs, pseudo-class selectors)
Tag: a:link
14) Na categoria Type faa os seguintes ajustes:
Size: 16 pixels
Color: #FF0000
15) Salve seu arquivo CSS.
16) Clique no menu File>Open e abra a pgina com o
nome do arquivo de links.html.
17) Na pgina links.html, no painel CSS clique no boto
Attach Style sheet.
18) Na janela Attach Style Sheet, em File/URL localize o
arquivo estilo.css.
19) Veja que o ttulo do Jardim Zoolgico ganhou outra
formatao.
20) Selecione os pargrafos da pgina e formate-os com
Heading 2.
21) Note que o primeiro pargrafo no ficou igual com os
demais.
22) Para ficar com a mesma formatao, selecione o
pargrafo e em Style escolha a opo None.
23) Salve a pgina.
24) Visualize a pgina no navegador.
85
OURO MODERNO
Aula 11 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 elemento do tipo bloco, uma imagem ou uma
camada. H duas maneiras de aplicar posicionamento: uma
criar uma classe de estilo e aplic-la s selees ou blocos de
texto que voc quer posicionar na pgina. A outra criar uma
camada na janela de documento que voc pode modificar
independentemente de criar um estilo.
Posicionamento absoluto versus relativo
A posio de um elemento de HTML pode ser absoluta,

relativa ou esttica.
O posicionamento normal chamado esttico e faz com
que o elemento seja posicionado dentro do fluxo normal do
texto.
86
OURO MODERNO
O posicionamento relativo significa que a posio de uma

camada ou outro elemento definida em relao ao canto
superior esquerdo do recipiente pai.
Entretanto, o elemento relativo est includo no fluxo da
pgina e tambm embutido ele no causa quebras de linha
automticas.
Para garantir as propriedades, uma tag <SPAN> deve ser
utilizada em vez de uma tag <DIV>.
Criando Camadas
Para poder criar uma camada voc deve deixar sua aba
em Layout e deve usar um dos dois elementos de criao de
camadas.
A caixa de propriedades exibe o nome da layer criada. A

propriedade Overflow como a Layer vai se comportar no
documento, o padro visvel, mas podemos definir ela como
Hidden (escondida), existe esse recurso, pois podemos atravs
de scripts deixar ela visvel atravs de botes, textos e
imagens. Scroll (com barras de rolagem), que manter barras
de rolagem em sua layer, isso permite que ela tenha um
tamanho menor que o seu contedo. Auto que mostrar as
barras de rolagem somente quando forem necessrias.
A opo Left(L) e Top(T) so relativas ao posicionamento
da Layer, observando que os pontos 0,0 (L, T) ficam no canto
superior da pgina.
As dimenses de nossa Layer W (width) e H (height) so
representadas sempre em pixels.
Z-index relativo ao empilhamento de nossas camadas,

isso permite que possamos colocar uma layer sobre a outra, a
camada de Z-index maior sempre ficar acima da outra. Um
detalhe importante, animaes em SWF sempre ficaro acima
87
OURO MODERNO
da layers independente do Z-index, sendo necessrio o uso do

parmetro de Transparncia.
Vis, referente visibilidade da camada.

A opo BG Image permite definir uma imagem de fundo
da Layer e a opo BG Color, permite colocar uma cor de fundo
na Layer.
A opo Clip permite recortar nossa Layer.
No painel camadas possvel marcar a opo Prevent
Overlaps, isso far com no seja possvel sobrepor s
camadas.
Escolhendo as TAGS
H duas tags utilizadas na criao de camadas. As tags

<DIV> e <SPAN> criam o que chamado de camada marquee.
A tag <DIV> utilizada posicionamento absoluto, uma quebra de
pargrafo cerca a tag<DIV>. Se preferir criar uma camada
embutida sem quebras de pargrafo utilize a tag <SPAN>.
Uma das principais vantagens das camadas que se pode
posicion-las e arrast-las para qualquer posio de sua
pgina, basta apenas clicar sobre o quadradinho no topo e
arrast-la, ou alterar as propriedades da Esquerda e do Alto na
barra de propriedades.
Para redimensionar as camadas podem-se utilizar as alas
de redimensionamento ou atravs da largura e altura na caixa
de propriedades.
Aninhando e Sobrepondo Camadas.
88
OURO MODERNO
Aninhando Camadas
A coisa mais interessante sobre as camadas que voc

pode colocar uma camada dentro de outra ou pode criar duas
que se sobrepem.
Para sobrepor duas ou mais camadas, necessrio
somente mover uma sobre a outra.
Para aninhar uma camada dentro de outra, basta criar a
primeira camada e depois criar a segunda dentro da primeira.
No painel Camadas voc tem as camadas sendo
mostradas, clicando sobre a segunda camada criada e
arrastando sobre a primeira, com a tecla CTRL pressionada, a
camada fica como uma subdiviso da primeira.
89
OURO MODERNO
Exerccios

2) Crie uma nova pgina em HTML e salve como nome do
arquivo de camadas.html em sua pasta.
3) Clique no boto Draw AP Div localizado na aba
Layout.
4) Crie uma camada na rea da pgina. No se importe
com o tamanho dela, na prxima etapa vamos ajustar.
5) Selecione a camada e, na barra de propriedades, faa
os seguintes ajustes:
Digite o nome de contedo para a camada
L: 25px
T: 27px
W: 400px
H: 300px
Bg color: #0099FF
6) Digite dentro da camada o texto Contedo.
7) Selecione o texto e faa a formatao:
Negrito, Centralizado e em Size 36 pixels.
8) Agora crie uma nova camada na pgina.
Digite o nome de Imagem para a camada
L: 25px
T: 27px
W: 400px
H: 300px
Bg color: #00CC33
10) Digite dentro da camada o texto Imagem.
12) Crie uma nova camada na pgina.
13) Selecione a camada e na barra de propriedades faa
Digite o nome de Vdeo para a camada
L: 25px
T: 27px
W: 400px
90
OURO MODERNO
H: 300px
Bg color: #FFCC00
14) Digite dentro da camada o texto Vdeo.
16) Crie uma nova camada na pgina.
Digite o nome de menu para a camada
L: 25px
T: 327px
W: 400px
H: 25px
Bg color: #CCCCCC
18) Agora vamos criar uma tabela dentro da camada
menu.
19) Clique dentro da camada menu e, em seguida, clique
no boto Table localizado na aba Layout.
20) Na janela Table faa as seguintes configuraes:
Rows: 1
Columns: 3
Table width: 400 pixels
Border thickeness: 1 pixels
21) Na primeira clula digite Contedo.
22) Na segunda clula digite Imagem.
23) Na terceira clula digite Vdeo.
24) Selecione todas as clulas e faa a seguinte
formatao:
25) Agora clique no painel CSS, e em seguida ative a aba
AP Elements do painel.
Caso tenha dificuldades pea ajuda ao seu instrutor.
26) Clique no boto Olho da aba AP Elements.
91
OURO MODERNO
27) Feche os olhos de Vdeo e Imagem clicando sobre

eles.
28) Na tabela, selecione o texto Contedo da primeira

clula.
29) Na barra propriedades, em Link digite #.
30) Ainda com o Contedo selecionado, ative o painel
Tag Inspetor.
31) Clique na aba Behaviors.
32) Clique no boto Add Behaviors(+).
33) Clique na opo Show-hide Elements.
34) Na janela Show-hide elements faa os seguintes
ajustes:
Selecione divcontedo clique no boto Show.
Selecione divImagem clique no boto Hide.
Selecione divVdeo clique no boto Hide.
Selecione divmenu clique no boto Show.
35) Na aba Behaviors temos duas colunas onde, na
primeira, consiste a configurao do comportamento.
Para que o Behaviors assuma a funo de clique,
precisamos alterar sua configurao para OnClick.
36) Escolha a opo onClick.

37) Agora selecione na tabela o texto Imagem.
38) Na barra de propriedades, em Link digite #.
39) Na aba Behaviors, clique no boto Add Behaviors
(+).
92
OURO MODERNO
41) Na janela Show-hide Elements faa os seguintes

ajustes:
Selecione divcontedo clique no boto Hide.
Selecione divImagem clique no boto Show.
Selecione divVdeo clique no boto Hide.
42) Agora selecione na tabela o texto Vdeo.
43) Na barra de propriedades, em Link digite #.
44) Na aba Behaviors, clique no boto Add
Behaviors(+).
46) Na janela Show-hide Elements faa os seguintes
ajustes:
Selecione divcontedo clique no boto Hide.
Selecione divImagem clique no boto Hide.
Selecione divVdeo clique no boto Show.
48) Visualize sua pgina no navegador e veja se os links
ento funcionando corretamente.
49) Feche o Navegador e o Dreamweaver CS3.
93
OURO MODERNO
Aula 12 - 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 Insert Form, ou deixe visvel a Aba Form do
Dreamweaver.
Ser acrescentado ao seu documento a rea de seu

formulrio, essa rea representada com uma linha pontilhada
de vermelho.
Na barra de propriedades deve-se definir qual ser o nome

do formulrio a forma de envio. A forma de envio pode ser para
um arquivo dinmico (ASP, PHP, etc.) que vai tratar os dados
postados no formulrio e enviar para um banco de dados ou
direcionar para um e-mail, ou diretamente para um e-mail.
necessrio tambm definir o Mtodo a ser utilizado POST
ou GET.
Tipos de campos de formulrio
Para inserir os objetos do formulrio, clique no Menu

Insert Form Objects, ou clicar nos botes correspondentes na
Aba de formulrio.
94
OURO MODERNO
importante sempre verificar se os campos esto sendo

colocados dentro do retngulo pontilhado que a rea de nosso
formulrio.
Caixas de Texto : Permitem que se entre com textos e

nmeros. Pode ser de linha simples, multilinha Chamados de
caixas de comentrios e senha onde ele mascara tudo o que for
digitado com sinais de (*) asteriscos.
Ao acrescentar um campo de texto necessrio preencher

alguns campos de propriedades. Devemos dar um nome ao
nosso campo de texto, definir o nmero de caracteres visveis
(Char width), isso implicar no tamanho do campo do
formulrio. Max Chars define um nmero mximo de caracteres
que poder ser preenchido no campo.
Caixas de Seleo : So as caixas de checagem que

permitem que se selecionem vrias preferncias do visitante e
podem ter o seu estado inicial selecionado ou no.
Ao se criar um grupo de opes de marcao as opes

devero sempre pertencer ao mesmo grupo.
Boto de Opo : Permitem que o usurio faa apenas

a seleo de um objeto entre vrias opes possveis e tambm
podem ter o seu estado inicial selecionado ou no.
Ao se criar um grupo de opes de marcao as opes

devero sempre pertencer ao mesmo grupo.
95
OURO MODERNO
Menu de Lista : Permite que se criem menus de

listagem para escolha do usurio.
Ao criar o menu de lista na barra de propriedades

necessrio clicar no boto Lista Values e preencher o Label
(nome que vai aparecer ao usurio) e valor do campo ao ser
selecionado.
O padro do campo ser um menu, mas podemos definir
ele tambm como uma lista. Ao campo ser definido como uma
lista pode definir quantas linhas sero visveis e se ser
possvel selecionar mais de um item na lista (basta marcar o
campo Selections Allow multiple).
Botes : Permite que se criem botes de ao de enviar

(Action Submit Form), e limpar campos (Action Reset Form), ou
para eventos atravs de linguagens de scripts (None).
Voc pode observar que no mtodo de envio de nosso

formulrio o mesmo envia os dados para um documento
chamado documento.php. Caso voc no tenha preenchido
esse campo, basta apenas clicar na tag <form> no rodap do
Dreamweaver. Esse arquivo documento.php, ser o arquivo
que vai receber os dados postados no formulrio. O cdigo que
vamos criar ser na linguagem PHP.
96
OURO MODERNO
<?
//Recebendo os dados do formulrio.
$nome = $_POST["nome"];
$email = $_POST["email"];
$assunto = $_POST["assunto"];
$mensagem=$_POST["comentario"];
//Setando o restante das variveis para o disparo

do email
$destinatario = "seumail@seuprovedor.com.br";
$formato = "\nContent-type: text/html\n";
//Incluindo os campos nome e email no corpo da

mensagem.
$msg = "- Nome:.$nome."<br>- Assunto:
".$assunto."<br>- Mensagem:".$mensagem;
//Enviando o email
mail("$destinatario","$assunto","$msg","from:".$email.$fo
rmato);
//Criando a mensagem de confirmao de envio de

email.
echo "<div align=center>Mensagem enviada com sucesso!
Aguarde um retorno. Clique <a href='index.php'>
<b>aqui</b> </a> para retornar.</div>";
?>
97
OURO MODERNO
Menu de Salto
Junto criao do Formulrio existe uma opo chamada

Jump Menu, que permite criar um menu de lista, que ao ser
selecionado direcional para um link ou URL.
Para criar seu menu de Salto, clique no boto Jump Menu
na Aba Form .
Na primeira parte da janela vai aparecer o primeiro

elemento a ser colocado no menu, na opo Text deve-se
definir qual ser o nome a ser apresentado, na opo When
selected, go to URL voc deve preencher com o link a ser
aberto ou URL, para criar o seu segundo elemento clique no
sinal de mais (+) no topo da janela. Repita o processo para os
demais campos a serem criados.
Aps definido todos os campos necessrio definir a
forma de abertura dos links, um nome para seu menu e as
opes.
A opo Insert GO Button after menu cria junto ao menu
de lista um boto que permite ir para o destino do link.
98
OURO MODERNO
Exerccios

2) Abra a pgina com o nome do arquivo de flash.html.
nome do arquivo de formulrio.html.
D um clique duplo sobre o texto em flash Bem-vindo ao
site Fotos & Vdeos.
4) Na caixa Text substitua o texto por:
Contato
5) Em Save as digite o nome para o arquivo de
text2.swf.
6) Apague os dados das clulas das linhas 4 e 5.
7) Mescle as linhas 4 e 5.
8) Clique na ltima linha da tabela e acesse a aba Forms
e clique no boto Form.
9) Acesse a aba Layout e clique no boto Table.
10) Na janela Table faa a seguintes ajustes para a
tabela:
Rows: 5
Columns: 2
Teble Width: 400 pixels
Border thickness: 0
11) Clique na primeira clula da tabela.
12) Na clula digite o texto Nome:
13) Clique na primeira clula da segunda coluna.
14) Volte para a aba Forms e clique no boto Text
Field.
15) Em ID digite nome.
16) Na barra propriedades altere os valores de:
Char width: 50
Max chars: 50
17) Clique na segunda clula da primeira coluna.
18) Digite na clula o texto E-mail:
19) Clique na clula ao lado de E-mail.
20) Clique no boto Text Field da aba Forms.
21) Em ID digite email.
22) Na barra propriedades faa os seguintes ajustes:
Char width: 50
99
OURO MODERNO
Max chars: 50
23) Clique na terceira clula da primeira coluna.
24) Digite o texto de Comentrios:
25) Clique na terceira clula da segunda coluna.
26) Clique no boto Textarea da aba Forms.
27) Digite em ID o texto comentrios.
28) Na barra propriedades altere os valores de:
Char width: 40
29) Clique na ltima clula da segunda coluna.
30) Clique em Button da aba Forms.
31) Em ID digite o texto enviar.
32) Na barra propriedades altere em Value o texto para
Enviar.
33) Clique em Button na aba Forms.
34) Digite para o ID o nome de limpar.
35) Faa os seguintes ajustes na barra propriedades:
Value: Limpar
Action: Reset form
36) No rodap do Dreamweaver clique em
<form#form1>.
37) Na barra de propriedades, em Action vamos digitar o
arquivo PHP.
38) Digite em Action o nome do arquivo de
contato.php.
39) Salve a pgina.
40) Salve a pgina formulrio.html com o nome do
arquivo de contato.php.
41) Na pgina contato.php apague o formulrio
pressionado a tecla Delete.
42) Acesse o modo de visualizao Code.
43) Depois do cdigo <td colspan="4"><div
align="center"> digite o seguinte cdigo PHP:
<?
$nome = $_POST["nome"];
$email = $_POST["email"];
$assunto = $_POST["assunto"];
$mensagem=$_POST["comentario"];
$destinatario = "ouromoderno@ouromoderno.com.br";
$formato = "\nContent-type: text/html\n";
100
OURO MODERNO
$msg = "- Nome: ".$nome."- Assunto: ".$assunto."-

Mensagem:".$mensagem;
mail("$destinatario","$assunto","$msg","from:
".$email.$formato);
echo "<div id="center">Mensagem enviada com sucesso!

Aguarde um retorno. Clique <a href='flash.html'>
<b>aqui</b> </a> para
retornar.</div>";
?>
44) Seu cdigo deve estar parecido com a imagem
abaixo:
45) Salve o contato.php.

46) Agora acesse a pasta Site e abra a pgina
formulrio.html no navegador.
47) Teste seu formulrio.
101
OURO MODERNO
Aula 13 - Comportamentos
As ferramentas de comportamento do Dreamweaver

permite que voc aplique as aes comuns de JavaScript sem
escrever nenhum JavaScript.
Voc pode fazer algo acontecer em uma pgina quando
seus usurios carregam uma pgina, clicam em um objeto ou
movem o mouse pela tela.
Logicamente que o Dreamweaver possui as rotinas mais
comuns de javascript, pois o JavaScript uma linguagem de
scripts Orientada a Objetos e a sua estrutura e construo
depende do seu conhecimento em relao linguagem.
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 Behaviors.
Para adicionar um comportamento a sua figura basta
apenas clicar sobre o sinal de (+) na esquerda superior do
Painel.
102
OURO MODERNO
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-Up serem
muito utilizadas para propaganda em WebSites.
Ao terminar coloque Ok e observe o painel behaviors.

Observe que ele mostra a ao e o evento que far com que a
ao se proceda, mude o Evento para OnClick.
Ocultar Mostrar camadas
Atualmente muitos usurios utilizam bloqueadores de

janelas pop-up, embora seja possvel configurar e at mesmo
autorizar a abertura de janela pop-up, a maioria dos usurios
de Internet simplesmente a ignoram. Um dos recursos que tem
crescido ultimamente so os chamados banners flutuantes
que so camadas com a publicidade que antes eram utilizadas
103
OURO MODERNO
dentro das janelas pop-up. necessrio apenas criar dentro

dessa janela a possibilidade de se fechar a camada (assim ela
vai aparecer para o usurio, mas na realidade ela ficar oculta).
Validando Formulrios
Um dos recursos importantes hoje para a comunicao

entre o visitante de um site a possibilidade de ele fazer
contato com o responsvel pelo site. A melhor forma desse
contato atravs de um formulrio. E para certificarmos que os
dados sejam enviados ao destinatrio.
Clique dentro da rea de seu formulrio e na paleta

Behaviors, clique na opo validate Form, ser aberta a janela
onde vo aparecer os campos do formulrio.
104
OURO MODERNO
Quando marcar a opo Required, isso far com o campo

seja obrigatrio.
Marcando a opo, o rdio button Email address, isso
far com ele aceite apenas endereos de e-mail.
Visualizando no Dreamweaver na opo CODE, voc pode
observar que o Dreamweaver faz todo o trabalho de cdigo
para voc.
Voc poder alterar os textos de exibio das mensagens
de validao localizando as linhas correspondentes.
105
OURO MODERNO
Exerccios

2) Crie uma nova pgina em HTML e salve com o nome do
arquivo de pop-up.html.
3) Insira a imagem pop-up.png localizado na pasta
Imagem.
4) Salve a pgina.
5) Agora abra a pgina com o nome do arquivo de
flash.html.
6) Selecione na primeira clula a animao banner.swf.
7) No painel Tag Inspector clique na aba Behaviors.
8) Clique sobre o sinal de (+) da aba Behaviors.
9) Clique na opo Open Browser Window.
10) Faa os seguintes ajustes na janela Open Browser
Window:
URL to display: localize o arquivo pop-up.html
Window width: 250
Window heigth: 280
Window name: digite o texto Promoo
11) No painel Behaviors mude o Evento de onFocus
para OnMouseOver.
12) Salve a e teste ela no navegador para ver se o pop-
up esta funcionando.
13) Volte para o Dreamweaver.
do arquivo de propaganda.html.
15) Acesse a aba Layout e crie uma camada com a
ferramenta Draw AP Div.
16) Selecione a camada e na barra propriedades faa as
seguintes alteraes:
Nome para a camada: propaganda
L: 15px
T: 18px
W: 250px
H: 260px
17) Clique dentro da camada.
18) Insira na camada a imagem com o nome do arquivo
de pop-up.png localizado na pasta Imagem.
106
OURO MODERNO
19) Insira uma nova linha na camada abaixo da imagem.

20) Digite na linha o texto Fechar[x].
21) Selecione o texto e faa a seguinte formatao:
Link: #
23) Clique na opo Show-Hide Elements.
24) Na janela Show-Hide Elements selecione a
divpropaganda e clique no boto Hide.
para OnClick.
27) Volte para a pgina flash.html. Se voc fechou abra
a pgina novamente.
28) Clique sobre o texto em flash Bem-vindo ao site
Fotos & Vdeos.
30) Clique na opo Open Browser Window.
31) Faa os seguintes ajustes na janela Open Browser
Window:
URL to display: localize o arquivo propaganda.html
Window width: 280
Window heigth: 280
Window name: digite o texto Propaganda
para OnClick.
33) Agora abra a pgina com o nome do arquivo de
formulrio.html.
34) Selecione todo formulrio clicando em
<form#form1> no rodap do Dreamweaver.
35) Na paleta Behaviors, clique na opo Validate
Form.
36) Na janela Validate Form faa os seguintes ajustes:
Selecione o inputnome
Value: marque Required
Selecione o inputemail
Value marque Required
Accept: marque Email address
Selecione textareacomentrios
Value marque Required
107
OURO MODERNO
37) Acesse o modo de visualizao Code.

38) Localize a linha com o seguinte cdigo:
39) Substitua a frase must contain no e-mail address

por Digite um endereo de e-mail valido.
41) Altere o texto is required por requerido ou

campo(s) obrigatrio(s).
43) Altere o texto The following error(s) occurred por

Foram encontrados os seguinte(s) erro(s).
45) Teste sua pgina no navegador sem preencher os
campos do formulrio para ver se os dados esto
corretos.
46) Feche o Navegador e o Dreamweaver CS3.
108
OURO MODERNO
Aula 14 Spry (Ajax no Dreamweaver)
O framework Spry so bibliotecas no formato JavaScript e

CSS, as quais permitem aos usurios do Dreamweaver
desenvolver interfaces mais ricas e dinmicas. Alm de
possibilitar a exibio de dados no formato XML e criar
elementos interativos em pginas que exibem contedo
dinmico sem a necessidade de tais pginas se carregarem por
completo.
O Dreamweaver CS3 disponibiliza o Spry em duas
perspectivas, uma para designers e outra para programadores.
Os designers podero criar efeitos visuais como Appear, Fade,
Blinds (Up e Down), Grow, Shake, Slide, entre vrios outros. J
os programadores tero facilidades ao trabalhar com o Ajax e
na exibio de dados armazenados em arquivos XML. Alm
desses recursos, tanto para designers quanto para
programadores, o Spry oferece alguns widgets que auxiliam na
validao de formulrios.
Vamos analisar a interface do Dreamweaver CS3 e
localizar os recursos do Spry. Nas abas da Insert Bar localizam
praticamente todos os recursos do framework em questo.
Vamos analisar:
A aba Spry, como demonstrada na imagem abaixo.
Disponibiliza 13 recursos, divididos em trs grupos. O

primeiro deles da esquerda para a direita - utilizado para se
trabalhar com dados em arquivos XML; o segundo e o terceiro
so os widgets oferecidos pelo Spry, utilizados na validao de
formulrios e na criao de elementos de interface,
respectivamente.
Esses grupos de recursos localizados na aba Spry, esto
localizados, tambm, em outras abas. Uma vez que cada grupo
de recursos corresponde a finalidades distintas. O que significa
dizer que na aba Data, teremos o primeiro grupo; na aba
Forms o segundo e na aba Layout o terceiro grupo.
109
OURO MODERNO
Os demais recursos oferecidos pelo Spry so os efeitos,

effects. Ambos esto localizados na opo Effects do painel
Behaviors, como ilustrado na imagem a seguir:
Quando voc seleciona algum recurso do spry no

Documento window do Dreamweaver, o Property inspector
atualizado e exibe as configuraes de recurso em questo,
veja um exemplo:
Spry Menu Bar
O Spry Menu Bar vem para facilitar a criao de menus.

Ao clicar sobre o boto Spry Menu Bar , o
Dreamweaver vai solicitar que voc salve seu documento para
dar continuidade. Ao salvar o documento, ele vai criar uma
nova pasta em seu projeto chamada SryAssets e vai solicitar o
layout de menu que voc quer criar.
110
OURO MODERNO
Ao clicar em OK ele vai montar o menu de acordo com o

solicitado.
Para poder remover / acrescentar itens, alterar os itens de

seu menu, voc deve utilizar a barra de propriedades.
Para poder alterar as propriedades de formatao de

nossa aplicao Spry, voc deve alterar o seu CSS.
111
OURO MODERNO
Spry Accordion
Clicando no boto Spry Accordion , ser necessrio

salvar seu documento.
O Dreamweaver vai mostrar em sua rea de trabalho a
estrutura do Menu Accordion. As alteraes nele devem ser
feitas atravs da caixa de Ferramentas.
112
OURO MODERNO
Voc pode acrescentar qualquer contedo HTML dentro da

rea Content do Spry Accordion.
Para alterar as propriedades do seu Spry necessrio
utilizar a paleta de CSS.
Spry Effects
O Effects um conjunto de efeitos visuais do Frameworks

Spry, que pode ser adicionado em diversos elementos do HTML.
No Dreamweaver os efeitos podem ser adicionados no modo
Design, sem a necessidade de trabalhar diretamente com
cdigo, facilitando ainda mais a adio desses efeitos. O Effects
fica localizado no Painel de Behaviors (Windows > Behaviors)
como um comportamento normal, podendo ser ativado com
diversos eventos.
Appear/ Fade
Esse efeito faz o elemento selecionado ir aparecendo ou
surgindo na tela.
Pode usar este efeito com todos os objetos do HTML
exceto o applet, body, iframe, tr, tbody, ou th.Para aplic-lo
voc deve selecionar aonde ser ativado, podendo ser o prprio
elemento, depois ir ao Painel Behaviors do Dreamweaver.
113
OURO MODERNO
Target Element: Selecionar o ID do objeto ou elemento

onde ser aplicado o efeito. Se voc j estiver selecionado o
objeto, pode escolher <Current Selection>.
Effect duration: Tempo de durao do efeito em
milissegundos.
Effect: Tipo de efeito podendo ser o Fade aonde a camada
vai sumindo aos poucos, ou Appear aonde a camada vai
aparecendo.
From: Tamanho da camada em porcentagem quando o
efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito
terminar.
Blind
Esse efeito faz a camada selecionada subir ou descer
lentamente semelhante a uma cortina sendo aberta ou fechada.
Pode ser usado somente com estes objetos do HTML: address,
dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet,
center, dir, menu, ou pr. Para aplic-lo voc deve selecionar
onde ser ativado, podendo ser o prprio elemento, depois ir
ao Painel Behaviors do Dreamweaver.
114
OURO MODERNO

onde ser aplicado o efeito.
milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a
camada vai subindo, ou Blind Down aonde a camada vai
descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando
o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o
efeito terminar.
Grow/ Shrink
Esse efeito faz o elemento selecionado crescer ou diminuir.
Pode ser usado com estes objetos do HTML: address, dd, div,
dl, dt, form, p, ol, ul, applet, center, dir, menu, o pre. Para
aplic-lo voc deve selecionar onde ser ativado, podendo ser o
prprio elemento, depois ir ao Painel Behaviors do
Dreamweaver.

milisegundos.
Effect: Tipo de efeito podendo ser Grow aonde a camada
vai crescer, ou Shrink aonde a camada vai diminuir na tela.
o efeito iniciar.
efeito terminar.
115
OURO MODERNO
To: Para que local a camada deve ir quando o efeito for

selecionado podendo ser ao centro ou a esquerda superior.
Shake
Esse efeito faz o elemento selecionado dar uma tremida.
Voc pode usar este efeito com estes objetos do HTML:
address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3,
h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr,
menu, pre, ou table. Para aplic-lo voc deve selecionar onde
ser ativado, podendo ser o prprio elemento, depois ir ao
Painel Behaviors do Dreamweaver.

Squish
Esse efeito faz o elemento selecionado desaparecer. Voc
pode usar este efeito com estes objetos do HTML: address, dd,
div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or
pre. Para aplic-lo voc deve selecionar aonde ser ativado,
podendo ser o prprio elemento, depois ir ao Painel Behaviors
do Dreamweaver.

Slide
Esse efeito faz uma transio podendo ser para cima ou
para baixo. Voc pode usar este efeito com estes objetos do
HTML: blockquote, dd, div, form, or cente. Esse efeito requer
uma nica tag ID e os efeitos dentro do elemento com tag ID.
116
OURO MODERNO
Para aplic-lo voc deve selecionar onde ser ativado, podendo

ser o prprio elemento, depois ir ao Painel Behaviors do
Dreamweaver.

milisegundos.
Effect: Tipo de efeito podendo ser Slide UP aonde a
camada vai subir, ou Slide Down aonde a camada vai descendo
na tela.
o efeito iniciar.
efeito terminar.
Highlight
Esse efeito faz o elemento selecionado ir trocando as
cores. Pode ser usado com todos os objetos do HTML exceto o
applet, body, frame, frameset, ou noframes. Para aplic-lo voc
deve selecionar onde ser ativado, podendo ser o prprio
elemento, depois ir ao Painel Behaviors do Dreamweaver.
117
OURO MODERNO

milisegundos.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente enquanto a
exibio do efeito.
118
OURO MODERNO
Exerccios

2) Crie uma nova pgina em HTML e salve com nome do
arquivo de spry.html.
3) Acesse a aba Spry e clique no boto Spry menu Bar.
4) Escolha Spry menu Bar no formato Horizontal.
5) Na barra propriedades para o Item 1 altere o nome em
Text para Home.
6) Remova todos os submenus de Home.
7) Clique em Item 2 na barra propriedades.
8) Substitua Item 2 para o texto de Empresa.
9) Em Empresa crie os seguintes submenus:
10) Clique no Item 3 na barra propriedades.

11) Substitua Item3 para o texto Servios.
12) Digite os seguintes submenus para Servios:
13) Clique em Item 4 da barra propriedades.

14) Substitua Item 4 para o texto Contato.
15) Acesse o painel CSS e clique na aba CSS Styles.
16) Na aba CSS Styles clique no boto All.
17) Em All rules clique em ul.MenuBarHorizontal a.
18) Em properties for ul.MenuBarHorizontal a faa
as seguintes alteraes:
Backgorund-color: #00CC66
Color: #000000
119
OURO MODERNO
19) Veja que o Dreamweaver criou um arquivo

SpryMenuBarhorizontal.css.
20) Salve sua pgina e, se solicitar, salve tambm o
arquivo .css.
21) Insira duas novas linhas abaixo do Menu Bar.
22) Clique no boto Spry Accordion na aba Spry.
23) Substitua o texto Label 1 por Intranet.
24) Apague o texto Content 1 e digite o texto abaixo:
Intranet
Resumidamente, o conceito de intranet pode ser

interpretado como "uma verso privada da Internet", ou
uma mini-Internet confinada a uma organizao.
O termo foi utilizado pela primeira vez a 19 de Abril de
1995, num artigo da autoria tcnica de Stephen Lawton,
na Digital News & Reviews.
Caractersticas da intranet
1-Permite o compartilhamento de arquivos;

2-Permite o compartilhamento de impressoras;
3-Utiliza mltiplos protocolos;
4-Permite a transmisso de vdeo.
25) Selecione todo o texto Intranet.

26) Acesse o painel Tag Inspector e clique na aba
Behaviors.
27) Clique no sinal de (+) da aba Behaviors> Effects>
Highlight.
28) Na janela Highlight faa a seguinte alterao:
End color: #00CC66
29) Agora substitua o texto Label 2 por Extranet.
30) Apague o texto Content 2 e digite o texto abaixo:
Extranet
A Extranet de uma empresa a poro de sua rede de

computadores que faz uso da Internet para partilhar com
segurana parte do seu sistema de informao.
120
OURO MODERNO
Site privado
Para apresentao de relatrios, disponibilizao de

documentos, etc. do site, mas que se destinam a um
pblico mais restrito, ou no podem ser apresentados
publicamente (por questes de segurana e/ou
privacidade).
31) Selecione todo texto de Extranet.

32) Clique no sinal de (+) da aba Behaviors> Effects>
Shake.
33) Na janela Shake clique em OK.
35) Visualize sua pgina no navegador e teste.
121
OURO MODERNO
Aula 15 HTML
HTML - Hypertext Markup Language, em ingls, ou em

portugus que significa Linguagem de Marcao de Hipertexto.
uma linguagem dedicada construo de pginas Web. Os
dois objetivos bsicos da HTML so:
- Formatao do contedo de uma pgina Web;

- Criar ligaes entre vrias pginas;
HTML uma linguagem Visual baseada em cdigos especiais

denominados tags. Hipertexto o conceito que possibilita a
"navegao" entre segmentos de texto independentemente de
sua seqncia linear ou de sua localizao. Uma pgina Web
um documento criado atravs do cdigo HTML, que pode ser
visualizado na internet.
Alm de textos, as pginas Web aceitam imagens, animaes,
sons e vdeos. O cdigo HTML, utilizado na criao da pgina
Web, pode ser escrito em qualquer editor de textos, por mais
simples que seja, por exemplo, o Bloco de Notas do Windows.
Visualize abaixo, um exemplo de cdigo-fonte de uma pgina
HTML.
J o navegador, um interpretador, ou seja, ele interpreta a

linguagem HTML e exibe no monitor a formatao da pgina,
definida atravs dos cdigos, conhecidos como tags.
122
OURO MODERNO
Tags
As tags so identificadas facilmente por serem envolvidas pelos

sinais "< >" (menor e maior) e "< / >" (menor, barra,
maior). O formato genrico de uma tag :
<nome da tag>texto</nome da tag>
A barra indica que a tag est sendo fechada. As tags so

utilizadas aos pares. Elas "cercam" uma faixa de texto e o
altera. Exemplo:
<i>texto em itlico</i>
Faz com que o texto entre as tags aparea assim em um

browser:
Texto em itlico.
A tag com a barra "/" indica que ali se fecha o cerco que
envolve um texto.
Estrutura de uma Pgina HTML
Assim como em outras linguagens, existem estruturas bsicas

que identificam partes de uma pgina HTML.
<html> - As tags <html> e </html> so a identificao de

uma pgina HTML, ou seja, fazem com que a pgina no seja
considerada um documento de texto comum. Voc deve utilizar
a tag <html> para iniciar a estrutura de uma pgina HTML e a
tag </html> para encerrar esta estrutura.
<head> - O par de tags <head> e </head> usado para

especificar o cabealho da pgina. O cabealho contm
informaes sobre a pgina que no aparecem no navegador.
123
OURO MODERNO
<body> - Entre as tags <body> e </body> se constri o

corpo da pgina HTML, ou seja, entre elas so colocados os
textos, imagens e links.
Visualize, logo abaixo, a estrutura bsica de uma pgina HTML.
<html>
<head>
</head>
<body>
</body>
</html>
Uma pgina HTML composta basicamente por ttulo, texto,

imagem e links. Esses elementos so posicionados na pgina
atravs de comandos especficos da linguagem HTML.
Para inserir ttulo e texto em uma pgina HTML muito

simples. Depois de ter criado a estrutura bsica, o titulo da
pgina deve ser digitado dentro das tags <head> e </head>
e entre os comandos <title> </title>. Por exemplo, para
adicionar o titulo Exemplo01
Nossa linha de texto ficaria assim:
<head><title>Exemplo01</title></head>
Agora para inserir texto em sua pgina, devemos digitar o texto

entre as tags <body> e </body>. Por exemplo, para inserir o
texto Exemplo de digitao nossa linha de texto ficaria assim:
<body> Exemplo de digitao</body>
Depois de inserido o ttulo e o texto, a estrutura do arquivo

ficar assim:
<html>
<head><title> Exemplo01</title>
</head>
<body> Exemplo de digitao
</body>
124
OURO MODERNO
</html>
Tenha cuidado ao criar a estrutura da pgina, pois se uma tag

estiver aberta, ou seja, sem um dos caracteres <, > ou /, voc
no visualizar corretamente a pgina em um browser. Antes
de mais nada, voc deve salvar o arquivo clicando no menu
ARQUIVO/SALVAR do Bloco de notas com a extenso .htm, por
exemplo Pgina01.htm
Aps ter inserido o ttulo e o texto em sua pgina, voc
visualizar o resultado em seu navegador.
Cores e fontes
As cores so introduzidas atravs do elemento <FONT>,

usando o sistema RGB para cores:
<FONT COLOR="#rrggbb">Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da

definio geral de cores, feita atravs dos atributos de
<BODY>.
125
OURO MODERNO
Cdigo Hexadecimal de uma cor
Em documentos HTML as cores mais comuns podem ser

escritas com os nomes em ingls, como por exemplo: Green,
lime, yellow, red, blue, black, white, fuchsia, etc. Mas e as
outras?
Para definir outras cores utiliza-se o cdigo hexadecimal, sob
a forma de #rrggbb (r=red, g=Green, b=blue). Os dois
primeiros dgitos vo indicar a quantidade de vermelho, os dois
seguintes verde e os dois ltimos azul.
Com um simples programa do gnero Microsoft Paint e outro
como a calculadora do Windows (no modo Cientfica), pode-se
descobrir o cdigo hexadecimal de uma cor. Copia-se o nmero
da quantidade da cor para a calculadora, e transforma-se em
nmero hexadecimal. Basta apenas juntar os nmeros
hexadecimais e tem-se o cdigo completo. Para simplificar,
vejamos um exemplo:
Primeiro abrimos a calculadora do Windows, caso voc no

saiba exibi-la no modo cientifico, clique em Exibir/Cientfica.
Agora abrimos o Paint. D dois cliques em uma das cores na

parte inferior do Paint. Agora clique em Definir cores
personalizadas. Escolhemos uma cor, por exemplo, a que foi
escolhida na imagem:
126
OURO MODERNO
Na figura, note os valores que utilizaremos de vermelho, verde

e azul. Agora temos que transformar tais nmeros para
nmeros hexadecimais.
Na calculadora cientifica, digite o valor de vermelho e clique em

Hex.
Note que o valor foi alterado para 82, este o nmero

hexadecimal. Guarde-o, pois iremos utiliz-lo no cdigo. Clique
novamente em Dec. Pressione a tecla Esc para limpar a
calculadora. Agora repita o processo para os outros dois
valores.
Vermelho 130 - 82
Verde 185 B9
Azul 253 - FD
Agora juntando os cdigos obteremos o cdigo final da cor:

#82B9FD
Obs.: Sempre iniciamos o cdigo de uma cor com o sinal #
Tamanho das letras
A formatao permite-nos alterar o tamanho das letras em

trechos especficos de texto.
<FONT SIZE=tamanho_da_letra>Texto</FONT>
127
OURO MODERNO
O tamanho bsico dos textos 3. Podemos indicar tamanhos

relativos a esse, por exemplo:
<FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=-2>Letra menor</FONT>
No navegador visualizaremos da seguinte forma:
Letra maior Letra normal Letra menor
Tipos de Fontes
O atributo FACE nos permite a escolha da fonte para os textos:
<FONT FACE="fonte_da_letra">Texto</FONT>
Por exemplo:
<FONT FACE="Century" COLOR="#000000">Fonte Century Preta</FONT>
No navegador visualizaremos da seguinte forma:
Fonte Century Preta
Negrito, Itlico e Sublinhado
Para deixar seu texto em negrito, usamos a tag <b></b>.

<b>Meu texto em negrito</b>
Meu texto em negrito
128
OURO MODERNO
Para que seu texto fique em itlico, usamos a tag <i></i>.
<i>Meu texto em itlico</i>
Meu texto em itlico
E finalmente em sublinhado, usamos a tag <u></u>.
<u>Meu texto em sublinhado</u>
Meu texto em sublinhado
Comandos de Alinhamento
As tags de alinhamento do texto so: <div> e </div>. O

atributo de alinhamento : align. As opes de alinhamento
so:
Center - texto centralizado

Right - texto direita
Left - texto esquerda
<div align=center>Texto</div>
Texto
<div align=right>Texto</div>
Texto
<div align=left>Texto</div>
Texto
129
OURO MODERNO
Uma das diferenas na confeco de pginas HTML e textos

tradicionais que no possvel adicionar pargrafo em HTML
apenas pressionando a tecla Enter. necessrio forar o fim do
pargrafo ou a quebra de linha utilizando comandos especiais.
As tags de pargrafo so: <p> e </p>.
A tag <p> no precisa do fechamento para funcionar. No

entanto, em documentos que usam componentes avanados da
linguagem, a correspondente de fechamento necessria. Por
isso melhor se habituar a colocar o par de tags.
A tag para quebra de linha : <br>.
Esta tag pode ser inserida em qualquer ponto do corpo de sua

pgina HTML e no utiliza tag de fechamento.
A tag de cabealho possui 6 opes de tamanho: de <h1>

<h6>. Quanto maior o nmero da tag menor o tamanho do
cabealho, veja o exemplo:
<h1>Este o cabealho 1</h1>

Este o cabealho 1
Este o cabealho 2
Este o cabealho 3
Este o cabealho 4
Este o cabealho 5
Este o cabealho 6
130
OURO MODERNO
Listas
As listas permitem que voc faa algumas listagens na pgina.

Elas podem ser numeradas ou apenas sinalizadas com
marcadores a cada pargrafo. Voc j deve ter percebido que o
bloco de notas no tem os cones de numerador e marcador
para voc clicar e os mesmos serem automaticamente
inseridos. Isso porque para que o browser seja capaz de
reconhecer os marcadores no bastaria clicar em um ou dois
cones, mas necessrio colocar o texto desejado entre as tags
com os comandos que iro orientar o browser a exibir os
marcadores ou os numeradores.
As tags que determinam o incio e o fim dos marcadores e
numeradores so diferentes, variam de acordo com o tipo de
lista que voc deseja, mas cada linha da lista iniciada sempre
com o comando <LI>, que no um comando do tipo incio
fim.
Listas Numeradas:
1. <OL> usado na construo de LISTAS NUMERADAS,

requer o comando <LI> para digitar os dados da lista.
2. <LI> usado para a definio de cada linha na lista
numerada, digitar o texto logo em frente.
3. </OL> finaliza a lista numerada.
Atributos:
TYPE=valor, lista numerada tipo:
1. Valor = a -> Caracteres de numerao como letras

minsculas.
2. Valor = A -> Caracteres de numerao como letras
maisculas.
3. Valor = I -> Caracteres de numerao como numerais
romanos em maisculas.
4. Valor = i -> Caracteres de numerao como numerais
romanos em minsculas.
5. Valor = 1 -> Caracteres de numerao como nmeros
padro.
131
OURO MODERNO
START=valor, em que nmero ou letra vai se iniciar a

enumerao da lista.
Ex.: Para iniciar na letra E - valor = 5

Ex.: Para iniciar no numeral IV - valor = 4
Ex.: Para iniciar no nmero 10 - valor = 10
Estrutura de uma lista com os atributos vistos:
<OL type=A>
<LI> Primeira linha de texto da lista
<LI> Segunda linha de texto da lista
</OL>
Listas no ordenadas (Marcadores)
1. <UL> usado na construo de LISTAS NO ORDENADAS,

requer o uso do comando <LI> para cada linha de dados.
2. <LI> para a definio de cada linha da lista no ordenada,
digitar o texto logo em frente.
3. </UL> finaliza a lista no ordenada.
Atributos:
TYPE=valor, define marcador do tipo:
1. Valor=SQUARE -Define marcador do tipo quadrado

slido (preenchido).
2. Valor=DISC -Define marcador do tipo crculo slido
(preenchido) PADRO.
3. Valor=CIRCLE -Define marcador do tipo crculo
transparente.
Estrutura de uma lista com os atributos acima:
<OL type=1>
<LI> Abaixo exemplo lista no ordenada
<UL type=square>
<LI> Dados da lista no ordenada
<LI> Linha dois da lista
</OL>
132
OURO MODERNO
Links
So os pontos clicveis do documento HTML que levam a

qualquer outro documento da sua pgina ou site na Internet.
Podemos fazer links internos, para documentos no mesmo
servidor, links externos para qualquer lugar na Web, ou at
mesmo links para um mesmo ponto dentro de uma pgina.
Ambos dependem da tag:
<a href="nome-do-lugar-a-ser-levado">descrio</a>
Obs.: "Nome-do-lugar-a-ser-levado" voc coloca o arquivo

html que voc quer que seja visitado, por exemplo dados.htm
ou por um URL como http://www.google.com
"Descrio" o que vai aparecer sublinhado na home Page

indicando que pode ser clicado. Por exemplo, se a descrio
fosse "Clique aqui para visitar o Google", voc colocaria este
cdigo:
<a href="http://www.google.com">Clique aqui para visitar o Google</a>
Imagens
Existem dois tipos de imagens que so bastante utilizados em

pginas da web hoje em dia. So eles: formato .jpg e formato
.gif
O formato .jpg ou .jpeg (Joint Photografic Experts Group)

mais utilizado para fotos.
O formato .gif (Graphics Interchange Format) mais utilizado

para desenhos vetoriais, como os clip-arts.
133
OURO MODERNO
Para incluir uma imagem na pgina HTML utilizamos a sintaxe:
<img src="nome da imagem">
No necessrio fechar esta tag.
A imagem criada deve ser salva na mesma pasta que contm

as pginas HTML. Caso utilize uma pasta diferente da qual as
pginas HTML esto salvas, deve se utilizar a sintaxe da
seguinte maneira:
<img src="PASTA/nome da imagem">
Esse procedimento deve ser feito para que o navegador possa

exibir as imagens.
possvel inserir uma imagem de fundo na pgina HTML, caso

no queira utilizar uma nica cor. O comando de insero de
imagem "background um atributo da tag <body>. Ao digitar
a estrutura bsica, substitua a tag <body> por este comando:
<body background= "nome da imagem.gif ou .jpg">
A imagem precisa estar arquivada na pasta onde se encontra a

pgina HTML correspondente, caso esteja em uma pasta
diferente utilize o comando da seguinte maneira:
<body background= "PASTA/nome da imagem.gif ou .jpg">
Exemplo:
<html>
<head>
<title>Titulo do Site</title>
</head>
<body bgcolor=#FFFF00>
<a href="pasta/pagina.htm">clique aqui</a>
<img src=pasta/imagem.jpg>
<b>texto em negrito</b>
</html>
134
OURO MODERNO
Note que sempre iniciamos um cdigo com sinal de menor e

sempre finalizamos com sinal de maior, sobre tudo, em sua
maioria os cdigos HTML so finalizados com barra antes do
ultimo argumento, observe a linha 3 antes do ultimo title na
pgina anterior da apostila, podemos facilmente visualizar a /
demonstrando o final do argumento.
Tabelas
So usadas na maioria das pginas da Web. Elas do uma

aparncia mais elegante pgina alm de permitirem orientar
o browser a posicionar textos e imagens lado a lado na pgina.
Uma das utilidades da tabela quando voc precisa colocar
uma imagem de um lado e o texto deve ser escrito do outro
lado. Com o que voc j conhece do html, j pode perceber que
isso no possvel. Uma forma de conseguir posicionar os
objetos e textos na pgina atravs do recurso tabela. Voc
pode inserir o texto e as imagens dentro de clulas da tabela.
Neste caso o usurio no deve visualizar as bordas da tabela.
Outra grande utilidade do recurso tabela quando voc precisa

construir realmente uma tabela de dados. Pode ser uma tabela
de e-mails, de nomes, de sites e etc. As tags de tabela so do
tipo incio e fim <TABLE> e </TABLE>. Alm dos atributos
que voc j conhece da linguagem HTML, aqueles que ficam
dentro da tag, ainda existem diversos comandos, que inseridos
entre as tags de tabela permitem trabalhar bem as linhas e
colunas da tabela. Os comandos inseridos entre os comandos
de tabela tambm possuem seus atributos.
<TABLE> - usado para se definir uma tabela HTML, seus

atributos so:
1. BORDER ="valor" define a largura da borda externa da

tabela (contorno). Se no incluir a atribuio da borda
aparecer uma tabela sem bordas.
2. CELLSPACING="valor" define o espaamento horizontal
entre uma clula e outra. Refletir na largura da borda.
135
OURO MODERNO
3. CELLPADDING="valor" define o espaamento vertical entre

uma clula e outra. Sem refletir na largura da borda.
4. WIDTH="valor %" define a quantos % de largura dever
conter a tabela em relao largura da tela.
5. HEIGHT="valor %" define quantos % de altura dever
conter a tabela em relao altura da tela.
6. BGCOLOR="#cor" define a cor de fundo da tabela.
7. BACKGROUND="imagem" define uma imagem como fundo
da tabela.
Comandos que sero inseridos entre as tags <TABLE>

</TABLE>:
1. <CAPTION> e </CAPTION> - definem o Ttulo da

Tabela e ALINHA de acordo com o tamanho da tabela.
2. <TR> e </TR> - para se definir o incio e o fim de cada
linha da tabela (Table Row).
Atributos:
1. ALIGN="valor" define alinhamento do texto dentro da

tabela.
2. LEFT= alinhamento esquerda.
3. RIGHT= alinhamento direita.
4. CENTER= alinhamento ao centro.
5. VALIGN="valor" define o alinhamento vertical dentro da
clula.
6. TOP = Alinha no topo da clula.
7. MIDDLE = Alinha no meio das clulas
8. BOTTON = Alinha na parte inferior da clula.
<TH> e </TH> - Define o cabealho da tabela (Table

Header). Iniciam e finalizam cada clula do cabealho.
Atributos:
ALIGN= valor
Define alinhamento horizontal dentro da clula.
136
OURO MODERNO
Se o alinhamento j foi definido em TR no necessrio defini-

lo aqui.
LEFT=alinhamento esquerda.
RIGHT=alinhamento direita.
CENTER=alinhamento ao centro.
VALIGN=valor
Define o alinhamento vertical dentro da clula.

lo aqui.
TOP = Alinha no topo da clula.

MIDDLE = Alinha no meio das clulas.
BOTTON = Alinha na parte inferior da clula.
COLSPAN=valor
Instrui o visualizador (browser) a unir um nmero especfico de
colunas da tabela. (Ocupar lugar de duas clulas, mesclar).
ROWSPAN=valor
Instrui o visualizador a unir um nmero especfico de linhas da
tabela (Mesclar duas linhas).
NOWRAP
Instrui o visualizador a no distribuir o texto do cabealho
dentro da clula da tabela
<TD> e </TD> - Define como ficar o contedo de cada

clula da Linha (Table Data)
Atributos
ALIGN= valor
Define o alinhamento horizontal dentro da clula.
137
OURO MODERNO

lo aqui.
LEFT=alinhamento esquerda.
RIGHT=alinhamento direita.
CENTER=alinhamento ao centro.
VALIGN=valor
Define o alinhamento vertical dentro da clula.
Se o alinhamento j foi definido em TR no . necessrio defini-

lo aqui.
TOP = Alinha no topo da clula.

MIDDLE = Alinha no meio das clulas.
BOTTON = Alinha na parte inferior da clula.
COLSPAN=valor
Instrui o visualizador (browser) a unir um nmero especfico de
colunas da tabela. (Ocupar lugar de duas clulas, mesclar).
ROWSPAN=valor
Instrui o visualizador a unir um nmero especfico de linhas da
tabela (Mesclar duas linhas).
Formulrios
O formulrio uma forma que o webmaster da pgina possui

de colher os dados que o interessam. Para manipular a pgina
ou receber informaes que o interessa. Funciona como um
questionrio ou uma ficha de inscrio, onde o proprietrio da
pgina faz perguntas e o usurio responde.
Como o webmaster da pgina que est fazendo as perguntas,
ele pode coletar os dados que precisa e posteriormente poder
estar cadastrando esses dados num banco de dados ou usando
para manipular alguns elementos da pgina. importante, no
entanto, tomar cuidado para que no se torne desagradvel
138
OURO MODERNO
para o usurio preencher um formulrio muito grande. Voc

mesmo j deve ter preenchido um formulrio alguma vez e com
certeza teve vontade de deixar uma srie de campos em
branco, ou de nem mesmo preencher nenhum. Para que o
formulrio se torne atraente aos olhos do usurio, ele tem que
oferecer algo mais, como algum bom servio, envio de algum
contedo de qualidade aps o cadastro do formulrio e etc.
Ao termino do preenchimento do formulrio, o usurio direciona
o formulrio ao seu destino final. Para que isso seja possvel,
necessrio que exista uma rotina, algumas linhas de cdigo,
normalmente fornecidas pelo provedor que vai hospedar o site.
Os comandos de formulrio so basicamente trs:
1. TEXTAREA: define uma rea onde o usurio poder digitar

linhas de texto.
2. SELECT: define opo em um quadro de rolagem, uma lista
drop down, permitindo que o usurio selecione a opo
desejada.
3. INPUT: define botes e caixas de seleo, botes para
limpar ou enviar os dados, linhas de texto, etc.
As tags de formulrio so do tipo incio e fim <FORM>

</FORM>. Alm dos atributos que voc j est habituado a
utilizar, aqueles que ficam dentro da tag, os comandos de
formulrio devem ser inseridos entre as tags <FORM> e
</FORM>, de maneira semelhante ao que foi feito com os
comandos de tabela. Os comandos inseridos entre os comandos
de formulrio possuem tambm seus prprios atributos.
<FORM> Define o incio do formulrio, atributos:
1. METHOD="POST" o mtodo mais utilizado o POST, que

envia cada informao do formulrio de forma separada para o
URL (endereo de origem).
2. ACTION="email ou pgina que receber as informaes"
fique atento pois cada provedor pode disponibilizar bibliotecas
que contero as ferramentas para que o envio dos dados do
formulrio sejam possveis.
139
OURO MODERNO
ENTRE O <FORM> E O </FORM> SERO INSERIDAS AS

TAGS TEXTAREA, SELECT E INPUT.
Na construo de formulrios um comando que pode ser muito

til o <PRE> ele do tipo incio fim. Voc ainda no viu esse
comando porque existe uma inconvenincia. Ele usa uma fonte
padro no muito bonita e no permitir a formatao.
Em um formulrio porm, ele pode ser de grande utilidade,
evitando que voc tenha que usar diversos <BR> ou <P>.
No tipo HIDDEN podem ser utilizados os seguintes atributos:

<INPUT TYPE="HIDDEN" NAME="email" VALUE= "email@servidor.com.br">
1. NAME define o Nome dos dados.

2. VALUE indica para onde sero enviados os dados de todo o
formulrio.
Obs.: Deve ser colocado logo abaixo do elemento FORM.
Dica para todos os atributos input:
Em vrios tipos de INPUT que voc ver a seguir

(PASSWORD, RADIO, TEXT, CHECKBOX) o atributo NAME,
apesar de no ser um campo obrigatrio, seu uso indicado,
pois ele que define o nome dos dados. ele que no e-mail
recebido pelo proprietrio do site aparece do lado esquerdo, na
frente do que foi marcado ou digitado no campo pelo usurio.
Utilizado quando se deseja armazenar dados comuns digitados
pelo usurio, email, username, idade, etc.
<INPUT TYPE="TEXT" NAME="EMAIL" SIZE="15" MAXLENGTH="35">
No tipo TEXT podem ser utilizados os seguintes atributos:
NAME = define o Nome dos dados.

SIZE = define o tamanho do campo que aparecer na tela.
MAXLENGTH = define o tamanho mximo de caracteres que
podem ser digitados no campo pelo usurio.
140
OURO MODERNO
PASSWORD - Utilizado quando se deseja armazenar dados

confidenciais que no aparecero na tela ao serem digitados,
por exemplo uma senha.
<INPUT TYPE="PASSWORD" NAME="SENHA" SIZE="10" MAXLENGTH="6">
No tipo PASSWORD podem ser utilizados os seguintes

atributos:

SIZE = define o tamanho do campo que aparecer na tela.
MAXLENGTH = define o tamanho mximo do texto a ser
digitado pelo usurio.
CHECKBOX - Define uma caixa de seleo para o usurio

marcar a opo desejada.
<INPUT TYPE="CHECKBOX" NAME= "CURSANDO" VALUE="HTML">Curso HTML
No tipo CHECKBOX podem ser utilizados os seguintes

atributos:

VALUE = define o valor a ser retornado para o Nome escolhido.
RESET - Um boto aparece indicando uma funo de APAGAR

todos os dados preenchidos na pgina (caso o usurio desista
das opes que selecionou):
<INPUT TYPE="RESET" VALUE="APAGAR">
VALUE = Define o texto que aparecer no Boto.
141
OURO MODERNO
SUBMIT - Um boto aparece indicando uma funo de

MANDAR todos os dados preenchidos para o servidor.
<INPUT TYPE="SUBMIT" VALUE="MANDAR">
VALUE = Define o nome que aparecer no Boto.
TEXTAREA - esta tag permite que voc defina uma caixa de

texto com um determinado nmero de linhas e colunas para
que o usurio digite comentrios, idias, crticas e etc. um
comando do tipo incio e fim determinado pelos comandos
<TEXTAREA> e </TEXTAREA>.
Veja a seguir os cdigos do comando TEXTAREA:
<TEXTAREA NAME="rea de Texto" ROWS=4 COLS=40 VALUE= "Comentrios">

Texto Padro
</TEXTAREA>
1. NAME="nome", apesar de no ser obrigatrio, ele define o

nome dos dados. O nome deve ser escolhido como um
indicativo do que ser contido na caixa de texto.
2. ROWS= "n" no obrigatrio mas importante para se
definir quantas linhas ter a caixa de texto na tela. "n" indica o
nmero de linhas da caixa.
3. COLS="n" No obrigatrio. "n" indica o nmero de colunas
da caixa
4. VALUE="texto" no obrigatrio, mas indica qual o texto
ser enviado como ttulo daquele comentrio quando for
enviado para o local de origem.
5. Texto Padro - o texto que aparecer dentro da caixa de
texto na Home Page a fim de identific-la para o usurio.
Pode-se usar textos como: Caixa de Comentrios, Idias,

Crticas e etc.
Qualquer texto entre as tags <TEXTAREA> e </TEXTAREA>

aparecer dentro da caixa de texto.
142
OURO MODERNO
Logo que a pgina estiver pronta, voc precisa inserir os

cdigos fornecidos pelo provedor no local correto para
poder receber o formulrio de volta na sua caixa de
mensagens. Este cdigo depende dos servios que seu
provedor disponibiliza para voc ou dos recursos que ele
suporta, como recursos de linguagens dinmicas.
Um exemplo de cdigo fornecido pelo provedor mostrado

abaixo:
<form method="POST" action="http://www.provedor.com.br/cgi-bin/mailform.exe"

name="formmail">
<input type="hidden" name="_1_MailFrom"value="emailde@provedor.com">
<input type="hidden" name="_1_MailServer" value="smpt.provedor.com.br">
<input type="hidden"name="_1_MailSubject" value="FORMULRIO ENVIADO">
<input type="hidden" name="_1_MailTo" value="emailpara@provedor.com.br">
<input type="hidden" name="_1_SuccessDocument"
value="http://www.domnio.com.br/sucesso.htm">
Como dito anteriormente, este cdigo muda de provedor para

provedor, assim voc pode at inseri-lo no cdigo da pgina,
mas no ir funcionar.
Para colocar este cdigo em sua pgina, faa o seguinte:
Na pgina que contem o formulrio, encontre a linha onde est

<FORM METHOD="..." ACTION="...">
Selecione esta linha e apague-a, no lugar dela, digite o cdigo
que o provedor forneceu para voc.
Voc j deve ter percebido que vai precisar construir uma

pgina de resposta, que ser carregada pelo browser do
usurio no momento em que ele postar os dados no formulrio.
Essa pgina pode ter uma mensagem de confirmao, um
boto para voltar para a pgina inicial e etc.
143
OURO MODERNO
Veja o formulrio com dados j preenchidos pelo usurio:
Aps preencher o formulrio o usurio pode clicar no boto

limpar e apagar todos os campos do formulrio ou clicar em um
boto Enviar.
Veja a seguir de que forma os dados chegaro por e-mail:
nome: marcelo silva

email: marcelo@ouromoderno.com.br
mensagem: mtodo interativo
FRAME
O Frame um recurso muito utilizado na internet, pois facilita a

navegao no site, seu gerenciamento e manuteno. O frame
divide a janela do browser em quadros e abre uma pgina
diferente em cada quadro. O nmero de quadros, tamanho e
posio de cada um deles so determinados por quem constri
o site.
Os sites sem o recurso frame precisam de um link para voltar

pgina principal em quase todas as pginas.
144
OURO MODERNO
Para facilitar a vida do usurio, seria interessante que em cada

pgina tivesse um link para todas as outras. Num site pequeno
voc pode at pensar em fazer isso, mas quando o site possui
um nmero grade de pginas, j comea a ficar muito
trabalhoso e pior ainda quando voc precisar fazer alguma
alterao no site, do tipo mudar o nome de um arquivo ou
acrescentar uma nova pgina. Nos dois casos voc precisaria
entrar em todas as pginas do site alterando ou acrescentando
os links.
Com o recurso frame o problema resolvido de forma muito

simples, bastando modificar a pgina que possui os links. O
frame uma pgina cujo contedo no visualizado em
nenhum momento. Ela serve para dividir o browser em
quadros, determinar a quantidade de quadros, a posio e
tamanho de cada um deles e mais, qual arquivo (pgina) ser
aberto em cada um dos quadros.
A nica coisa que o usurio v da pgina de frame o title, o

que significa numa pgina de frame no existe o comando
<BODY> e uma srie de outros.
O comando <FRAME> do tipo incio e fim, possui atributos

que so inseridos dentro da tag e comandos que ficam entre
<FRAME> e </FRAME>. Veja a seguir:
<FRAMESET> - Responsvel pela criao dos FRAMES
Atributos:
COLS ="n%,m%" - Define que a diviso desejada em

COLUNAS, onde n% determina a porcentagem de ocupao da
primeira coluna em relao tela e m% a porcentagem de
ocupao da segunda coluna.
ROWS ="n%,m%" - Define que a diviso desejada em

LINHAS, onde n% determina a porcentagem de ocupao da
primeira linha em relao a tela e m% a porcentagem de
ocupao da segunda linha.
145
OURO MODERNO
Obs.: Tanto para o COLS quanto para o ROWS, os valores

podem ser dados tambm em pixels e a quantidade de valores
entre vrgulas determina o nmero de divises na tela.
BORDER ="n" - Define a espessura da borda.
<FRAME> - Comando onde ser mostrado o que deve ser

carregado em cada diviso do frame. Para cada frame definido
no comando <FRAMESET> necessrio a utilizao de um
comando <FRAME>.
Atributos:
SRC = "nome do arquivo" - Define o nome do arquivo que

ser carregado no frame
NAME = "nome" - Define o nome ou apelido do frame que

ser muito til quando voc quiser que um arquivo aparea em
um dos frames atravs de um link
NORESIZE - Impossibilita que o usurio redimensione a

largura do frame.
SCROLLING = valor - Define quando a barra de rolagem ser

apresentada no frame. Valor = Never (nunca), Always (sempre)
e se voc no especificar esse atributo a barra de rolagem
aparecer se necessrio.
</FRAMESET> - Fecha o comando <FRAMESET>
Obs.: Para que a pgina que ser carregada ao abrir o site j

mostre o frame na tela, ela deve ser a pgina index.htm. O
<TITLE> escolhido para ela ser exibido em todo o site.
146
OURO MODERNO
TARGETS
Este comando indicar ao navegador em qual dos frames a

pgina solicitada atravs de um link, dever ser aberta. Por
exemplo, voc dever acrescentar uma target para que ao
clicar em um link na parte superior, a pgina a que o link se
refere, aparea na parte inferior da tela.
Tomando como base que o "menu" ser o arquivo "menu.htm",

voc dever cri-lo colocando os links que voc deseja, porm,
de uma forma especial, onde ser usada uma target. Esta
target dever vir logo aps o comando do link, antecedida de
um simples espao e tambm, acompanhada do nome que voc
deu a frame da direita. Observe em frames o comando:
<frame name="inferior">, onde inferior o atributo NAME

do comando FRAME, inserido no arquivo index.htm.
Exemplo de um link com uma Target:
<A HREF="script.htm" target="INFERIOR">Scripts</A>
Onde script.htm o nome da pgina que voc deseja que seja

aberta na parte inferior do browser quando o usurio clicar no
link que voc nomeou como Scripts.
No se esquea de que a target sempre cobrar o nome do

frame com os mnimos detalhes. Se h letras maisculas no
nome do Frame, voc dever tambm, colocar letras
maisculas na target.
147
OURO MODERNO
Exerccios
1) Crie uma pasta dentro da sua pasta com o nome HTML.

2) Abra o bloco de notas.
3) Digite a estrutura bsica de uma pgina html.
<html>
<head>
</head>
<body>
</body>
</html>
4) Salve este documento do bloco de notas como Index.htm

dentro da pasta que voc acabou de criar. Porm no o
feche.
5) Dentro das tags <head> </head> digite:
<title> Minha Pgina HTML</title>
6) Iremos alterar a cor de fundo de nossa pgina, portanto

dentro da tag <body> digite:
bgcolor="#C6FFFF"
Nossa tag ficar assim:
<body bgcolor="#C6FFFF">
7) Para fazer o ttulo de nossa pgina iremos alterar a fonte e

a cor da letra, ento aps a tag que acabamos de
digitar, pressione enter e digite:
<font face="verdana" COLOR="Red">
148
OURO MODERNO
8) Iremos centralizar nosso ttulo, portanto aps a tag

anterior, digite:
<div align=center>
9) O ttulo da pgina ser Minha Pgina HTML, e para ficar

destacado usaremos o cabealho <h1>, portanto,
digite:
<h1>Minha Pgina HTML</h1>
10) Agora voc deve fechar as tags da fonte e do

alinhamento, digite:
</div></font>
11) Vamos ver como est nosso trabalho at agora. Salve o

documento, porm no o feche, entre em sua pasta e
d dois cliques sobre ele. Ele abrir pelo navegador de
internet.
12) Nosso ttulo deve estar assim:
13) Muito bem, feche o navegador e volte para o bloco de

notas.
14) Agora iremos digitar um texto, mas para que a letra
no fique to padro, alteraremos sua fonte para
verdana e seu tamanho para +1. Digite:
<font face="verdana" size +1>
15) Queremos o texto centralizado, portanto digite:
<div align=center>
16) Agora digite o texto a seguir:

O intuito desta pgina demonstrar os comandos de HTML que foram
ensinados na aula. Nela, temos 5 links que so os seguintes:
149
OURO MODERNO
17) Para que a sigla HTML que acabamos digitar fique em

negrito em nossa pgina, coloque as tags <b> antes e
</b> depois da sigla. Assim:
<b>HTML</b>
18) Como voc j sabe, temos que realizar a quebra de

linha para que o texto inteiro no fique em uma linha
s, ento aps as palavra na aula. digite a tag <br>.
Veja a seguir:
na aula.<br>
19) Agora s nos resta fechar as tags da fonte e do

alinhamento. Digite:
</div></font>
20) Agora iremos criar uma lista no numerada para inserir

nossos links. A linha ter o tipo de marcador SQUARE,
ento digite:
<UL type=SQUARE>
21) Para cada linha de nossa lista devemos inserir uma tag
<LI>. Digite <LI>.
22) Agora inseriremos o link. A tag para link a seguinte:
<a href="endereo">Texto</a>
23) O primeiro link a ser inserido o de voltar a pgina

principal, como j estamos na pgina principal ele no
necessrio, mas mesmo assim iremos inseri-lo. Digite:
<a href="index.htm">Home</a>
150
OURO MODERNO
24) Agora na mesma linha do link que acabamos de criar,

iremos adicionar uma descrio do que o link faz.
Pressione espao e digite:
- Volta para a pgina inicial.
25) Agora, como voc j sabe o que cada comando faz,

iremos inserir os prximos quatro links. Pressione enter
e digite:
<LI> <a href="contato.htm">Contato</a> - Pgina onde possumos o

formulrio a ser preenchido.
<LI> <a href="lista.htm">10 Maiores Empresas</a> - Lista com as 10

Maiores empresas do mundo em 2008.
<LI> <a href="http://www.ouromoderno.com.br">Ouro Moderno</a> - Site

do mtodo de ensino interativo da Ouro Moderno.
<LI> <a href="http://www.google.com">Google</a> - Site de pesquisa

mais famoso da internet.
26) Aps ter digitado os links, daremos duas linhas de

espao utilizando a tag <br>. Digite:
<br><br>
27) Agora fecharemos a tag de lista. Digite </UL>
28) Mais uma vez iremos alterar a fonte e seu tamanho.

Digite:
<font face="verdana" size +1>
29) O alinhamento ser no centro. Digite:
<div align=center>
151
OURO MODERNO
30) Agora digite a ltima frase de nossa primeira pgina:
Clique em cada um dos links para ser redirecionado.
31) Feche as tags de alinhamento e de fonte:
</div></font>
32) Fecharemos tambm as tags <body> e <html>. Digite:
</body></html>
33) Salve o documento e feche o bloco de notas. Nossa

primeira pgina est pronta, porm ainda temos duas
para criar, que so a de contato e a outra com as 10
maiores empresas de 2008.
34) Veja como ficou esta primeira pagina:
35) Muito bem, vamos para a prxima. Abra o bloco de

notas.
152
OURO MODERNO
36) Digite a estrutura bsica de uma pgina HTML.

37) Salve o documento com o nome de contato.htm,
dentro da mesma pasta que est a index.htm
38) Entre as tags <head>e</head> digite:
<title> Minha Pgina HTML - Contato</title>
39) Dentro da tag body, altere a cor de fundo da pgina

com o comando bgcolor="#C6FFFF". Assim:
40) Agora iremos digitar um texto com a fonte Verdana, cor

vermelha, alinhamento central e cabealho <h1>.
Portanto digite:
<font face="verdana" COLOR="Red"><div align=center><h1>
41) Digite: Contato

42) Feche as tags que foram abertas no passo 40:
</font></div></h1>
43) Altere a fonte para Verdana tamanho +1 e alinhamento

central:
<font face="verdana" size +1><div align=center>
44) Digite:
Aqui possumos os campos para serem preenchidos,<br>

e os botes de envio e limpar. Nosso formulrio infelizmente<br> no ser
funcional pois no iremos hosped-lo.
45) Feche as tags de fonte e de alinhamento:
</div></font>
153
OURO MODERNO
46) Para que nosso formulrio fique centralizado, digite:
<div align="center">
47) A primeira linha do formulrio deve conter o mtodo e a

ao do mesmo. Utilizaremos o mtodo post e a ao
mailto(enviar para). Digite:
<form METHOD="POST" action="mailto:seuemail@provedor.com.br">
48) Agora para inserir o primeiro campo de texto digite:
Nome <INPUT TYPE="TEXT" NAME="NOME" SIZE="45"

MAXLENGTH="35"><br><br>
49) Para o campo de e-mail, digite:
E-mail <INPUT TYPE="TEXT" NAME="EMAIL" SIZE="45"

MAXLENGTH="35"><br><br>
50) Este cdigo ser para criar uma rea de texto para
mensagens:
<TEXTAREA ROWS=4 COLS=40>
Deixe sua Mensagem aqui.
</TEXTAREA><br>
51) Criaremos agora o boto de envio:
<INPUT TYPE="SUBMIT" VALUE="Enviar">
52) E agora o boto de apagar:
<INPUT TYPE="RESET" VALUE="Apagar">
53) Feche agora as tags de alinhamento e do formulrio:
</div></form>
154
OURO MODERNO
54) Criaremos um link centralizado para voltar pagina

principal. Digite:
<div align="center"><a href="index.htm">Home</a> - Volta para a pgina

inicial.</div>
55) Feche as tags <body> e <html>:
</body></html>
56) Salve o documento. Veja se sua pgina est como essa:
57) Criaremos agora a ltima pgina que falta. Abra o bloco

de notas e digite a estrutura bsica da pgina.
58) Salve com o nome de lista.htm, na mesma pasta das
outras duas.
59) Entre as tags <head> e </head> digite:
<title> Minha Pgina HTML - Contato</title>
155
OURO MODERNO
60) Novamente iremos alterar a cor de fundo de nossa

pgina, portanto dentro da tag <body> digite:
bgcolor="#C6FFFF"
Nossa tag ficar assim:
61) Como nas duas pginas anteriores digitamos Minha

pgina HTML e Contato, digite:
<font face="verdana" COLOR="Red"><div align=center><h1>As 10

Maiores Empresas do Mundo</h1></div></font>
62) Como descrio da pgina digite:
<font face="verdana" size +1><div align=center><br> Em 2008, e

combinando uma frmula de faturao, aumento de negcios,<br> capital
e recursos humanos, elas so:</div></font><br>
63) Agora criaremos uma lista numerada, contendo links

das 10 empresas. Portanto digite:
<OL type=1>
<LI><a href="http://walmartstores.com">Wal-mart stores</a>
<LI><a href="http://www.exxonmobil.com/corporate">Exxon Mobil</a>
<LI><a href="http://www.shell.com">Royal Dutch Shell</a>
<LI><a href="http://www.bp.com">BP</a>
<LI><a href="http://www.toyota.co.jp/en/index.html">Toyota Motor</a>
<LI><a href="http://www.chevron.com">Chevron</a>
<LI><a href="http://www.ing.com/group/index.jsp">Grupo ING</a>
<LI><a href="http://www.total.com">Total</a>
<LI><a href="http://www.gm.com">General Motors</a>
<LI><a
href="http://www.conocophillips.com/index.htm">ConocoPhillips</a>
</OL>
<br>
</UL>
156
OURO MODERNO
64) Criaremos agora um link com a pgina inicial:
<div align="center"><a href="index.htm">Home</a> - Volta para a pgina

inicial.</div>
65) Feche as tags <body> e <html>:
</body></html>
66) Salve o documento e feche o bloco de notas.
67) Pronto, criamos um pequeno e simples site em HTML.
157
OURO MODERNO
Aula 16 FTP
FTP significa File Transfer

Protocol, traduzindo Protocolo de
Transferncia de Arquivos.
uma forma bastante rpida e
verstil de transferir arquivos,
sendo uma das mais usadas na
internet. Pode referir-se tanto ao
protocolo quanto ao programa
que implementa este protocolo.
A transferncia de dados em
redes de computadores envolve,
normalmente, transferncia de
arquivos e acesso a sistemas de arquivos remotos com a
mesma interface usada nos arquivos locais.
O FTP baseado no protocolo TCP, mas anterior pilha de
protocolos TCP/IP, sendo posteriormente adaptado para o
TCP/IP.
O padro da pilha TCP/IP para transferir arquivos um
protocolo genrico independente de hardware e do sistema
operacional e transfere arquivos por livre arbtrio, tendo em
conta restries de acesso e propriedades dos mesmos.
A transferncia de arquivos d-se entre um computador

chamado "cliente" (aquele que solicita a conexo para a
transferncia de dados) e um servidor (aquele que recebe a
solicitao de transferncia). O utilizador, atravs de software
especfico, pode selecionar quais arquivos enviar ao servidor.
Para existir uma conexo ao servidor, o utilizador informa um
nome de utilizador (ou username, em ingls) e uma senha
(password), bem como o nome correto do servidor ou seu
endereo IP. Se os dados foram informados corretamente, a
conexo pode ser estabelecida, utilizando-se um "canal" de
comunicao, chamado de porta (port). Tais portas so
conexes nas quais possvel trocar dados. No caso da
comunicao FTP, o padro para porta o nmero 21.
O acesso a servidores FTP pode ocorrer de dois modos:
158
OURO MODERNO
Atravs de uma interface ou atravs da linha de comando.

Tanto usurios UNIX como usurios Windows podem acessar
atravs dos dois modos.
Embora um pouco complicado, o modo linha de comando est
presente em qualquer distribuio UNIX-like e Windows,
atravs do telnet. A partir de qualquer browser credenciado (IE,
FIREFOX, ou mesmo no Explorer do Windows) tambm
possvel aceder a um servidor FTP. Basta, para isso, digitar na
barra de endereo:
ftp:// [username] : [password] @ [servidor] -->Go
FTP e HTTP
A principal diferena entre

FTP e HTTP que o FTP
um sistema de duplo
sentido - pode ser utilizado
para copiar ou mover
arquivos de um servidor
para um computador
cliente, bem como
carregar ou transferir
arquivos de um cliente
para um servidor.
HTTP, por outro lado, estritamente um sistema de ida:
transfere texto, imagens e outros dados (formulado em uma
pgina da web), a partir do "servidor" para um computador
cliente que utiliza um navegador para visualizar os dados.
Outro aspecto a ter em mente que no FTP, o significado File
Transfer tem exatamente essa caracterstica: os arquivos so
automaticamente copiados ou movidos a partir de um servidor
de arquivos para um disco rgido do computador cliente, e vice-
versa.
Por outro lado, os arquivos em uma transferncia HTTP so
vistos e podem 'desaparecer' quando o navegador est
desativado, a menos que o utilizador execute comandos para
mover os dados para a memria do computador.
159
OURO MODERNO
Outra grande diferena entre os dois sistemas reside na

maneira pela qual os dados so codificados e transmitidos. Os
sistemas FTP geralmente codificam e transmitem os dados em
binrio fixos, que permitem uma rpida transferncia de dados.
J os sistemas HTTP codificam os seus dados em formato MIME
que maior e mais complexo.
Voc j deve ter notado que quando anexamos arquivos a e-
mails, o tamanho do arquivo geralmente maior do que o
original, devido s codificaes adicionais envolvidas.
Eventualmente ocorrem problemas de conexo a servidores de
FTP, isso na maioria das vezes est relacionado presena de
um servidor firewall/NAT (pode ser um modem ADSL, o
servidor proxy de sua empresa etc.) entre seu computador e o
servidor FTP.
160
OURO MODERNO
Exerccios
1) Qual a principal diferena entre FTP e HTTP?
__________________________________________________
__________________________________________________
2) O acesso a servidores FTP pode ocorrer de dois modos.
Quais so eles?
__________________________________________________
__________________________________________________
3) Como feita a transferncia de arquivos?
__________________________________________________
__________________________________________________
4) Nos sistema FTP, como os dados so codificados e
transmitidos?
__________________________________________________
__________________________________________________
5) Para existir uma conexo com o servidor, o que
necessrio?
__________________________________________________
__________________________________________________
161
OURO MODERNO
Aula 17 Domnio e emails
Domnio um nome que

serve para localizar e
identificar conjuntos de
computadores na Internet.
O nome de domnio foi
concebido com o objetivo de
facilitar a memorizao dos
endereos de computadores na Internet. Sem ele, teramos que
memorizar uma seqncia grande de nmeros.
Pelas atuais regras, para que o registro de um domnio seja
efetivado, so necessrios ao menos dois servidores DNS
conectados Internet e j configurados para o domnio que
est sendo solicitado.
O registro de domnios no Brasil feito pelo site REGISTRO.BR,

do Comit Gestor da Internet Brasileira.
Para registrar um domnio, necessrio ser uma entidade
legalmente representada ou estabelecida no Brasil como pessoa
jurdica (instituies que possuam CNPJ) ou fsica (CPF) que
possua um contato em territrio nacional.
Registrar um domnio a forma mais eficaz de proteger,
posicionar e fixar seu nome, sua marca e seus produtos na
Internet. Alm disso, voc pode criar e-mails personalizados e
permanentes.
Servidor de DNS
Servidor DNS um servidor que faz a converso de nomes em
endereos IPs. Os servidores presentes na Internet so
acessados atravs de um endereo numrico chamado
endereo IP. Porm, muito mais prtico para ns, seres
humanos, guardarmos nomes do que nmeros. O papel do
Servidor DNS basicamente converter endereos em forma de
nome (ex: www.seudominio.com.br) em endereos numricos
(ex: 200.200.200.200), j que a conexo feita atravs dos
endereos IPs.
162
OURO MODERNO
No caso da navegao na Internet, o seu micro precisa ter

acesso a um Servidor DNS justamente para que o seu browser
consiga converter endereos nominais em numricos e possa
acessar as pginas da Internet.
Existem uma infinidade de extenses de domnios que os sites

podem ter, como .com, .net, .info, .org e os brasileiros como
o .com.br, .edu.br e art.br
Perante os buscadores as diferentes extenses dos domnios
no garantem um melhor posicionamento quando comparado
um com outro. Um site s ter um bom posicionamento, se
merecer. Porm, podem fazer uma grande diferena, caso seja
necessrio criar uma campanha publicitria em qualquer outro
tipo de mdia fora da internet.
Clicar em um banner ou um link escrito em um site no exige
esforo do visitante em relao a lembrar o endereo correto do
site, basta apenas clicar que ele ser direcionado para a pgina
de destino.
Porm, o mesmo no ocorre quando o usurio deve digitar o
endereo que tenha visto em um outdoor, revista, folheto ou
televiso. A maioria dos sites divulgados no Brasil possuem
extenses .com ou .com.br, o que torna um hbito chegar no
navegador e digitar o nome do site + a extenso .com ou
.com.br deixando de lado o fato que o endereo do site pode
ter outro tipo de extenso.
Se voc pretende desenvolver um site no qual a maioria das

visitas vir de resultados de campanhas publicitrias,
definitivamente recomendado que o domnio possua uma
extenso .com ou .com.br
ID
a abreviao de Identificao.
Como o prprio nome j diz, ele a
identificao do usurio ou mais
normalmente conhecido como login.
Neste cadastro devem ser
especificados os dados pessoais do
Usurio.
163
OURO MODERNO
Exerccios
1) O que domnio?
__________________________________________________
__________________________________________________
2) Em qual site podemos registrar um domnio?
__________________________________________________
__________________________________________________
3) O que um servidor DNS?
__________________________________________________
__________________________________________________
4) Porque o seu micro precisa ter acesso a um Servidor DNS
para navegar na internet?
__________________________________________________
__________________________________________________
5) Cite 6 possveis extenses de domnios.
__________________________________________________
__________________________________________________
164
OURO MODERNO
Anotaes
Aula:________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
165
OURO MODERNO
Anotaes
Aula:________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
166
OURO MODERNO
Anotaes
Aula:________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
167
OURO MODERNO
Anotaes
Aula:________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
__________________________________________________
168
OURO MODERNO
OURO MODERNO
INTERATIVO EDUCACIONAL
Endereo:
Rua Joo Pessoa, 1918 sala 05 Centro
Montenegro/RS CEP 95780-000
Telefone: 51 3057 2333
E-mails:
ouro@ouromoderno.com.br
suporte@ouromoderno.com.br
vendas@ouromoderno.com.br
financeiro@ouromoderno.com.br
administracao@ouromoderno.com.br
169

Apostila de Aula - Dreamweaver

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila de Aula - Dreamweaver

Caricato da

Copyright:

Formati disponibili

OURO MODERNO

Criando os Frames ........................................................................56

Tamanho das letras ....................................................................127

O curso de Dreamweaver da Ouro Moderno ir te mostrar

No se esquea de que fundamental cumprir todas as

Aproveite ao mximo o contedo de nosso curso e

Aula 1 A rea de Trabalho

Antes de estudarmos a rea de trabalho, verificamos que

Caso marque essa opo e deseje ver essa tela

O Dreamweaver CS3 tem entre suas propriedades a

Essa opo abre a possibilidade de se criar os diversos

Ao Clicar em Create, ele cria seu primeiro documento

Ao criar seu primeiro arquivo o Dreamweaver ele apresentar

Onde as opes esto junto palavra Common (flechinha) ao

No final dessa barra temos um boto que permite

Nessa barra, para cada documento aberto ele mostrar

No Dreamweaver possvel trabalha com seu documento

Design: Essa forma a que mais se aproxima dos

Split: Essa opo divide a sua tela em duas partes, sendo

Code: Essa opo vai mostrar o seu documento sendo

sempre importante ao desenvolver um site que ele

Ao clicar na opo Edit Browser List, voc pode definir qual

Na parte inferior de seu documento, ser mostrada a barra

est selecionado em seu documento. Quando no h nada

O Dreamweaver, como os demais programas Adobe,

Voc pode habilitar / desabilitar as paletas atravs do

Na parte inferior da pgina h os indicadores das tags

Para ativar o campo de zoom, no local onde se encontra a

A rea de trabalho do Dreamweaver pode se adequar

Podemos escolher modelos distintos de layout da rea de

Aula 2 Criao de site

Quando estamos no projeto de um site, precisamos ter

O Dreamweaver nos d a opo de organizar os projetos

A etapa da criao do site deve sempre preceder o

Vamos configurar um site que ser usado no

Na tela que se abre na coluna do meio temos a opo

Nessa primeira etapa, chamada Editing Files, definimos

Editing Files, Part 2, configuramos a criao de um site

Editing Files, Part 3 o primeiro item a configurar nessa

Na Sharing Files definimos como o Dreamweaver vai se

Microsoft Visual SourceSafe

A rea Summary, que mostra um pequeno relatrio das

No painel Manage Sites, veremos o site recm-

Para configurar as propriedades da pgina, selecione a

Na janela que se abre, na parte superior surge a lista das

Os botes B e I indicam, respectivamente, texto em

resolver este problema, vamos utilizar uma paleta de cores

imagens como fundo da pgina fique atento cor de fundo

Para remover a imagem, basta deletar seu nome da rea

repetir x (repeat-x, repete a imagem apenas na horizontal) e

Nessa categoria definimos as caractersticas visuais que os

O HTML tem seis opes de cabealho a serem utilizados

Podemos configurar as caractersticas visuais padro para

Ajustamos o ttulo e a codificao usada no documento.

Outra maneira de fazermos isso na parte superior da

Document Type (DTD)

O Dreamweaver tem uma opo muito interessante para

Por enquanto est a palavra Untitled, que simboliza o

Voc pode observar que no topo da janela aparece como

26) Clique na categoria Link.

Aula 3 Trabalhando com textos

A formatao de textos dentro de um documento HTML

Para formatar o seu texto depois de digit-lo, ou copi-lo e

No prximo quadro podemos definir qual o tamanho da