Dreamweaver 3

Sumrio
INTRODUO _________________________________ 3
DICAS PARA CRIAR UM BOM SITE____________________________ 4
CONHECENDO O DREAMWEAVER _____________ 5
A JANELA DE DOCUMENTO _________________________________ 6
INSPETOR DE ORIGEM DE HTML ____________________________ 8
O INSPETOR DE PROPRIEDADES ______________________________ 9
A PALETA DE OBJETOS ___________________________________ 10
O INICIADOR __________________________________________ 12
CONSTRUINDO PGINAS _____________________ 13
CRIANDO UM SITE LOCAL ________________________________ 13
CRIANDO PGINAS ______________________________________ 17
PARGRAFO E QUEBRA DE LINHA ___________________________ 30
A PALETA DE HISTRICO _________________________________ 33
FECHANDO E ABRINDO ARQUIVOS HTML ___________________ 35
RECURSOS ADICIONAIS ______________________ 38
VERIFICAR ORTOGRAFIA __________________________________ 38
ALINHAMENTO DE TEXTO __________________________________ 40
INSERIR LINHA HORIZONTAL ______________________________ 41
LOCALIZAR E SUBSTITUIR _________________________________ 42
TRABALHANDO COM IMAGENS_______________ 46
PROPRIEDADES DA IMAGEM ________________________________ 49
CRIANDO IMAGENS CAMBIVEIS ____________________________ 51
INSERINDO HYPERLINKS _____________________ 57
VNCULO DE CAMINHO RELATIVO___________________________ 58
CAMINHO ABSOLUTO E NCORA IDENTIFICADA _________________ 64
ALTERANDO AS CORES DOS VNCULOS _______________________ 67
CRIANDO PGINAS COM MOLDURAS _________ 69
SALVANDO AS MOLDURAS ________________________________ 74
SELECIONANDO MOLDURAS _______________________________ 76
PROPRIEDADES DAS MOLDURAS ____________________________ 78
INSERINDO UMA BARRA DE NAVEGAO ______________________ 80
CRIANDO TABELAS ___________________________ 84
PROPRIEDADES DA TABELA E DAS CLULAS ____________________ 85
OUTRAS MODIFICAES NA TABELA ________________________ 88
CRIANDO E FORMATANDO UMA TABELA_______________________ 91
CRIANDO FORMULRIOS_____________________ 94
OS OBJETOS DE FORMULRIOS ____________________________ 94
INSERINDO OBJETOS NA PGINA ____________________________ 96
VALIDANDO CAMPOS DO FORMULRIO _____________________ 103
FAZENDO O FORMULRIO FUNCIONAR ______________________ 105
CRIANDO FOLHAS DE ESTILOS ______________ 106
CRIANDO ESTILOS HTML____________________ 112
TRABALHANDO COM CAMADAS _____________ 114
AS PROPRIEDADES DAS CAMADAS ___________________________115
AS LINHAS DE TEMPO _______________________ 118
O INSPETOR LINHAS DE TEMPO ____________________________118
ADICIONANDO E MOVENDO CAMADAS _______________________119
LISTA DE EXERCCIOS_______________________ 127
Dreamweaver 3.0
Pgina: 3
Celta Informtica - F: (11) 4331-1586
INTRODUO
A Internet uma imensa rede de computadores interligados e espalha-
dos pelo mundo inteiro. Atravs desta rede podemos trocar arquivos (de-
nominados arquivos FTP), enviar e receber mensagens (que so os fa-
mosos e-mails), enviar e receber vdeo e udio em tempo real (streaming)
e visualizar informaes (sendo estas as informaes apresentadas em
forma de pginas gravadas em um determinado site). A WWW (World
Wide Web), ou simplesmente Web, a parte da Internet que contm o
conjunto de todas essas pginas que podemos acessar, visualizar e na-
vegar por elas.
A grande maioria das pginas da Web so criadas atravs de uma lin-
guagem de programao denominada HTML, e os navegadores da Web
(mais conhecidos como browsers) so os programas que exibem estas
pginas, pois eles lem e entendem a linguagem HTML.
Nesta apostila iremos estudar o Dreamweaver, que um software desti-
nado a criar, editar e gerenciar as pginas que so exibidas na Web, e
que tambm utiliza a linguagem de programao HTML. Se voc no
quiser ver nada de HTML durante o processo de criao das pginas,
basta no abrir a janela que exibe o cdigo da pgina; caso contrrio,
voc poder, simultaneamente, criar a pgina e ver o cdigo que voc
acabou de fazer (boa oportunidade de conhecer e aprender a linguagem
HTML).
No Dreamweaver voc encontrar ferramentas avanadas de desenho
e layout, recursos de HTML dinmico, camadas animadas, etc, onde to-
dos podem ser utilizados sem que voc tenha que gravar uma linha de
cdigo.
Dreamweaver 3.0
Pgina: 4
Assim, utilizando o Dreamweaver, voc poder facilmente criar e publi-
car suas pginas na Internet, e com isso, divulgar e apresentar as infor-
maes contidas nas pginas a pessoas que estejam praticamente em
qualquer parte do planeta. Essas pessoas, ento, podero acessar seu
site (seja apenas para conhec-lo, ou para fazer compras, pesquisas,
jogar, etc) sem ter que se deslocarem fisicamente.
DICAS PARA CRIAR UM BOM SITE
Criar um site at que no uma tarefa muito complicada, porm, um site
bem elaborado exige pacincia, dedicao e conhecimentos de algumas
tcnicas. Para obter os melhores resultados, projete e planeje o seu site
antes de criar qualquer pgina que o integrar. Procure lembrar sempre
que um bom site, alm de ter uma aparncia atraente, necessita que a
mensagem seja transmitida de forma sucinta e sem demora no apareci-
mento das informaes na tela (ou seja, o carregamento das pginas
deve ser rpido). Fique atento s seguintes dicas:
) Defina os seus objetivos de forma clara;
) Analise o perfil de quem ir visitar seu site;
) Utilize itens que possam ser exibidos rapidamente na tela;
) Crie um bom layout de forma a torn-lo bastante atraente;
) Evite excesso de informaes numa nica pgina;
) De posse dos dados, procure organiz-los de forma inteligente;
) A navegao no site deve ser de tal forma que os visitantes possam
saber em que local do seu site eles esto e como retornar pgina de
nvel superior;
) Fornea uma maneira atravs da qual os visitantes possam en-
trar em contato com o webmaster (quando necessrio);
) Realize vrios testes no seu site com diferentes tipos de navegadores
(browsers) antes de torn-lo disponvel na Internet.
Dreamweaver 3.0
Pgina: 5
CONHECENDO O DREAMWEAVER
O Dreamweaver constitudo por uma janela principal e vrias outras
janelas flutuantes (denominadas paletas ou inspetores). Quando voc
inicia o Dreamweaver, ver a janela principal (denominada janela de do-
cumento - exibe o documento atual medida que criado e editado) e
algumas janelas flutuantes, como mostra a figura a seguir.
No ambiente de trabalho do Dreamweaver voc poder exibir ou ocultar
qualquer janela, paleta ou inspetor, bastando selecionar seu nome no
menu Janela, voc tambm poder
OBS: O Dreamweaver se lembrar das posies das janelas quando
voc sair do programa, assim, ao inici-lo novamente, as janelas estaro
na mesma posio que estavam quando voc fechou o programa pela
ltima vez.
Dreamweaver 3.0
Pgina: 6
A JANELA DE DOCUMENTO
Antes de iniciarmos a construo de um site, vamos conhecer melhor a
Janela de documento, que onde as pginas do site sero criadas. As
pginas no Dreamweaver apresentam-se no formato WYSIWYG (what
you see is what you get), isso significa que aquilo que voc estiver vendo
na janela de documento o que voc vai ver no navegador da Web, em
outras palavras, o que voc v o que voc obtm.
A janela de documento composta pela Barra de ttulo (que exibe o ttulo
da pgina e, entre parnteses, o nome do arquivo e um asterisco, caso o
arquivo contenha alteraes no salvas), rea de visualizao (que exi-
be todo o contedo da pgina) e pela Barra de status, que apresenta
algumas informaes importantes:
Seletor de rtulos: exibem todos os rtulos (tags) que controlam o
texto ou objeto selecionado (para realar o contedo de algum rtulo
na janela do documento, d um clique nele).
Tamanho da janela: exibe o tamanho atual da janela de documento,
permite redimensionar a janela de acordo com dimenses pr-deter-
minadas ou personalizadas (basta dar um clique na setinha para que
as opes sejam apresentadas). Voc tambm pode redimensionar
manualmente a janela, arrastando suas bordas.
Tamanho do documento e tempo de descarga: exibe o tamanho total
da pgina (em Kilobytes) e o tempo de descarga com base na veloci-
dade de conexo definida (para definir as preferncias de tempo e
tamanho de descarga, escolha menu Editar, opo Preferncias, em
seguida, selecione a categoria Barra de status e escolha uma veloci-
dade de conexo com a qual deseja calcular o tempo de descarga).
Dreamweaver 3.0
Pgina: 7
Se por algum motivo voc quiser, ser possvel ocultar a Barra de status.
Para isso, acesse o menu Exibir e clique na opo Barra de status.
A janela de documento oferece vrias opes que podem ou no ser
ativadas, como a rgua, grade, etc. As rguas, exibidas na parte superior
da janela e do lado esquerdo, podero ser utilizadas para dimensionar
melhor alguns objetos na tela, como tabelas e imagens. Para exibir (ou
ocultar) as rguas, acesse o menu Exibir submenu Rguas op-
o Mostrar. No submenu Rgua voc tambm pode escolher as unida-
des da rgua: pixels, polegadas ou centmetros.
Para obter medidas ainda mais precisas, voc pode exibir a grade (ela
muito til quando voc for trabalhar com camadas, pois poder posicion-
las ou dimension-las mais precisamente). Para exibi-la, acesse o menu
Exibir submenu Grade opo Mostrar. Ativando a opo Encai-
xar do submenu Grade, voc poder fazer com que as camadas se en-
caixem e se ajustem s grades quando forem arrastadas. Para alterar
algumas configuraes da grade (espaamento e cor das linhas, por
exemplo) clique na opo Definies do submenu Grade.
Dreamweaver 3.0
Pgina: 8
INSPETOR DE ORIGEM DE HTML
Como j comentamos, voc poder ver o cdigo HTML de qualquer pgi-
na atravs do Inspetor de origem de HTML, mostrado na prxima figura.
Toda pgina criada no Dreamweaver tem um cdigo em HTML associa-
do a ela, e por isso que elas podem ser exibidas no navegador, j que
eles s entendem as instrues do cdigo HTML.

A barra de ttulo da janela exibe o nome do arquivo. A opo Quebra autom.
de linha faz o texto mudar automaticamente de linha dentro da janela (faci-
litando sua leitura) e a opo Nmeros de linha exibe, no lado esquerdo da
janela, o nmero de cada linha. Como voc pode observar na figura anteri-
or, essas duas opes esto ativas.
Para abrir a janela do Inspetor de origem HTML, acesse o menu Janela e
depois a opo Origem de HTML, outra maneira clicar no cone do
inspetor de origem de HTML, no Iniciador ou no Mini-iniciador (no canto
inferior direito da janela do documento) ou ento pressionar a tecla F10.
Dreamweaver 3.0
Pgina: 9
Voc poder realizar alteraes tanto na pgina exibida na janela do do-
cumento quanto no seu cdigo HTML, sendo necessrio, neste ltimo
caso, conhecer os comandos e recursos da linguagem. Qualquer ao
realizada na pgina (incluso de um objeto, mudana da cor e tamanho
da fonte, seleo de texto/imagem, etc) tambm ser realizada automa-
ticamente no cdigo HTML da pgina e vice-versa. Assim, voc poder
acompanhar, atravs do inspetor de origem HTML, a criao de uma
pgina e ver como tudo o que voc faz na janela do documento conver-
tido para HTML.
O INSPETOR DE PROPRIEDADES
Os elementos das pginas caracterizam-se por ser os textos e objetos
pertencentes a ela. Quando voc quiser exibir ou alterar as propriedades
dos elementos da pgina, utilize o Inspetor de propriedades. Para exibir o
Inspetor de propriedades, selecione a opo Propriedades do menu
Janela.
A aparncia do inspetor, ou seja, as propriedades que sero exibidas,
dependero do tipo de elemento que est atualmente selecionado. Ob-
serve, na prxima figura, que uma janela do inspetor exibe as proprieda-
des de uma imagem, e a outra as do texto.
Algumas outras propriedades do elemento podero ser exibidas se voc
clicar na seta de expanso no canto inferior direito da janela do inspetor,
como mostra a figura anterior.
O inspetor de propriedades ser melhor estudado no momento em que
estivermos criando as pginas, pois certamente teremos que editar e
alterar as propriedades de alguns elementos.
Dreamweaver 3.0
Pgina: 10
A PALETA DE OBJETOS
Na Paleta de objetos voc encontrar vrios botes que sero utilizados
para inserir objetos, como tabelas, camadas e imagens nas pginas.
Quando voc passar o mouse sobre os botes da paleta de objetos,
uma dica ser exibida para lembr-lo o que cada boto faz.
Para exibir a Paleta de objetos, selecione a opo Objetos do menu
Janela.
A paleta de objetos contm seis painis: Caracteres, Comuns, Formul-
rios, Head (Cabealho), Invisveis e Molduras. Cada um desses painis
exibe botes diferentes, os quais relacionam-se com a funo do painel
que estiver selecionado.
O painel Caracteres contm caracteres especiais, como os smbolos
de copyright e marca registrada, alm de aspas curvas.
O painel Comuns contm os objetos mais comumente utilizados, como
Imagem, Tabela e Camada.
O painel Formulrios contm botes para criar formulrios e os seus
elementos.
Dreamweaver 3.0
Pgina: 11
O painel Head contm botes para adicionar diversos elementos
HEAD, como os rtulos META, KEYWORDS e BASE.
O painel Invisveis contm botes para criar objetos que no so vis-
veis na janela do documento, como as ncoras com nome.
O painel Molduras contm estruturas comuns dos conjuntos de mol-
duras (frames).
Para inserir na pgina os objetos pertencentes paleta de objetos, clique
no boto correspondente ao objeto desejado. Para alguns objetos, o
Dreamweaver necessitar de informaes adicionais (como a localiza-
o de uma imagem, por exemplo), sendo assim, uma caixa de dilogo
ser exibida. Preencha a caixa de dilogo e depois de clicar no boto OK,
o objeto ser inserido na pgina.
Voc poder escolher em exibir o contedo da paleta como Apenas tex-
to, Apenas cones ou cones e texto. Para realizar estas alteraes, sele-
cione a opo Preferncias do menu Editar, na caixa de dilogo apre-
sentada, selecione Geral na seo Categoria.
Dreamweaver 3.0
Pgina: 12
O INICIADOR
As principais janelas, paletas e inspetores podem ser abertos (ou inicia-
dos) a partir do Iniciador. Para exibi-lo, selecione a opo Iniciador do
menu Janela.
Mesmo que o Iniciador no estiver sendo exibido, voc poder abrir facil-
mente qualquer janela atravs do Mini-iniciador, que se encontra no can-
to inferior direito da barra de status da janela do documento.
Voc poder especificar quais botes (paletas e inspetores) aparecero
na janela do iniciador, para isso, selecione a caixa de dilogo Prefernci-
as (atravs do menu Editar, opo Preferncias), depois selecione Pa-
letas flutuantes na seo Categorias. A caixa Mostrar no Iniciador con-
tm os itens que so atualmente exibidos no Iniciador e no Mini-iniciador.
Dreamweaver 3.0
Pgina: 13
Se quiser adicionar um item ao Iniciador e ao Mini-iniciador, clique no
boto com o sinal de adio (+). Para remover um item do Iniciador e do
Mini-iniciador, selecione-o e depois clique no boto com o sinal de sub-
trao (-), para mover um item para cima ou para baixo na lista, o que
corresponde a mov-lo respectivamente para a esquerda ou direita no
Iniciador e no Mini-iniciador, selecione o item e, em seguida, clique nas
teclas de seta. Depois de clicar no boto OK, o Iniciador e o Mini-iniciador
sero alterados, exibindo os itens especificados.
Ainda na caixa de dilogo Preferncias, na Categoria Barra de status,
voc encontra a opo de exibir ou no o Mini-iniciador na barra de status
da janela do documento.
Os botes do Iniciador sero comentados e utilizados no momento em
que estivermos criando as pginas do nosso site.
Agora que voc j teve uma viso geral da interface do Dreamweaver,
vamos comear a construir pginas e ver quais os recursos que o pro-
grama nos oferece para que as pginas tenham uma boa apresentao
e sejam bastante funcionais.
CONSTRUINDO PGINAS
Antes de comearmos a criar as pginas, devemos primeiro criar um
site local (uma pasta), pois ser este site que armazenar todos os do-
cumentos que fizerem parte do site. Os documentos so as pginas que
os usurios vem quando visitam um site da Web, e podem conter texto,
imagens, som, animao e vnculos a outros documentos.
OBS: Lembre-se que durante a criao e o trabalho com os documen-
tos, o Dreamweaver gera automaticamente o cdigo HTML, o qual pode-
r ser visto e editado atravs do inspetor de origem de HTML.
CRIANDO UM SITE LOCAL
Voc dever criar um site que resida no seu disco local para depois
public-lo na Web. Um novo site local pode ou no ter quaisquer docu-
mentos dentro dele quando voc o cria, e pode ser baseado em uma
pasta existente ou ser criada uma pasta em branco.
Dreamweaver 3.0
Pgina: 14
Vamos criar um site local, para isso, siga os passos seguintes:
1. Estando com o programa Dreamweaver aberto, na janela do docu-
mento selecione a opo Novo site do menu Site. A caixa de dilogo
Definio de site ser exibida (nesta caixa de dilogo, a Categoria Infor-
maes locais estar selecionada).
Um site local requer um nome e uma pasta raiz local (pasta que armaze-
nar todos os arquivos do site), sendo que a pasta raiz local dever ser
configurada especificamente para o site.
2. No campo Nome do site digite um nome para seu site, como exemplo,
digite agenda (depois explicarei o porqu deste nome).
3. No campo Pasta raiz local voc deve especificar a pasta do seu disco
local que armazenar todos os documentos do site. Clique no cone cor-
respondente pasta, direita do campo. Na caixa de dilogo Escolher a
pasta local, crie, na sua pasta raiz (geralmente C:), a pasta Sites. De-
pois d um clique duplo na pasta Sites e crie outra denominada
Agenda_Cultural, d um clique duplo nela tambm.
Dreamweaver 3.0
Pgina: 15
4. Depois de dar um clique duplo na pasta Agenda_Cultural, clique no
boto Salvar. Na caixa de dilogo Definio de Site, selecione a opo
Utilizar cache para acelerar atualiz. dos vnculos, pois colocando o con-
tedo da pasta Agenda_Cultural em um cache local, ser criado um re-
gistro dos arquivos existentes para que o Dreamweaver possa atualizar
rapidamente os vnculos quando um arquivo for movido, renomeado ou
excludo.
Como estamos definindo um site local (e no remoto), no precisamos pre-
encher o outro campo (Endereo do HTTP), por isso clique no boto OK.
OBS: Site remoto aquele que j est localizado no seu servidor, onde
seu site da Web fica armazenado.
Dreamweaver 3.0
Pgina: 16
Em seguida o Dreamweaver exibir uma mensagem, clique no boto
OK. Uma nova janela ser criada, cuja barra de ttulo apresenta: Site
agenda (observe, na barra de tarefas do Windows, que apareceu mais
um boto relativo ao Dreamweaver).
Esta janela Site ser utilizada para voc fazer o gerenciamento do site,
ou seja, voc a usar para: copiar, colar, excluir, mover e abrir arquivos,
criar pastas, atualizar os arquivos do site remoto (transferir para o site
remoto os arquivos que foram alterados), tudo da mesma forma como
voc faz no Windows Explorer do seu computador.
Na janela Site voc tambm poder visualizar a estrutura de navegao
do site, atravs do Mapa do Site. O mapa do site mostra os arquivos
HTML e outros elementos da pgina como cones, e os hyperlinks sero
exibidos na ordem em que forem detectados no cdigo de origem de
HTML. Por padro, o site remoto (ou mapa do site) aparecer no painel
esquerdo e o site local ser mostrado no painel direito.
OBS: O site que iremos criar ser referente a uma agenda cultural, onde
conter informaes sobre os filmes e as peas teatrais que esto em
cartaz, os shows que sero realizados na semana, os melhores restau-
rantes, casas noturnas, etc.
Dreamweaver 3.0
Pgina: 17
CRIANDO PGINAS
Agora que j temos o local (pasta) onde ser armazenado o site da nos-
sa Agenda Cultural, vamos criar os documentos (pginas) para o site, ou
seja, vamos construir as pginas e adicionar ttulo, imagens, texto e vn-
culos a elas.
Lembre-se que uma pgina da Web um arquivo HTML contendo infor-
maes, e um site uma coleo de pginas da Web relacionadas en-
tre si e geralmente localizadas no mesmo servidor.
Vamos inicialmente criar uma pgina em branco, mas voc poderia abrir
um documento HTML existente, independente de como tenha sido cria-
do, e alter-lo, e tambm criar um novo documento com base em um
modelo.
Voc j deve estar com uma janela de documento aberta, apresentando
Untitled Document (Untitled-1) Dreamweaver na barra de ttulo, ento no
precisar criar outra pgina em branco. Caso contrrio, para criar uma
nova pgina em branco, selecione a opo Novo do menu Arquivo.
Vamos comear a criar as pginas referentes aos filmes, (depois voc
criar as outras). Em um outro captulo faremos a ligao entre elas, ou
seja, adicionaremos os links.
Com o ponto de insero posicionado no incio da janela do documento,
insira os textos de acordo com a prxima figura (se quiser, arraste as
paletas e os inspetores para outro lugar ou feche-os, pois assim ter
mais espao disponvel na janela do documento).
Dreamweaver 3.0
Pgina: 18
OBS: As informaes referentes aos filmes (sinopse, elenco, etc) foram
retiradas do jornal e do seguinte site: www.cinemaonline.com.br. Se qui-
ser, poder trocar os nomes dos filmes por outros sua escolha.
Salvando um documento
Depois de ter digitado o texto da figura anterior, vamos salvar a pgina.
Para salv-la, selecione a opo Salvar do menu Arquivo.
OBS: Ao salvar os documentos, evite, sempre que possvel, utilizar es-
paos e caracteres especiais nos nomes de arquivos e pastas.
Na caixa de dilogo exibida, selecione a pasta Agenda_Cultural na se-
o Salvar em, j que esta pasta armazenar todos os arquivos referen-
tes ao site que estamos criando. No campo Nome do arquivo digite
missao_impossivel, como mostra a prxima figura. Depois clique no
boto Salvar.
Dreamweaver 3.0
Pgina: 19
Observe que agora na barra de ttulo da janela do documento o nome do
arquivo e a pasta onde ele est armazenado so exibidos entre parnte-
ses. No entanto, o ato de salvar um documento e lhe dar um nome no
corresponde ao ato de dar um ttulo a uma pgina (o ttulo da pgina ainda
continua sendo Untitled Document, ou seja, documento sem ttulo).
OBS: Por padro, os PCs salvam os arquivos HTML com a extenso
.htm e os Macs com a extenso html.
Agora ative a janela do site (Site agenda) e veja que o arquivo que
salvamos j faz parte da estrutura do site.
Dreamweaver 3.0
Pgina: 20
Definindo um ttulo para a pgina
importante definir um ttulo para as pginas, pois quando elas forem
exibidas no navegador, o seu ttulo aparecer na barra de ttulo deste,
ajudando os usurios a controlar o que esto exibindo enquanto nave-
gam, o ttulo serve tambm para identificar a pgina nas listas de histri-
co e marcadores. Se uma pgina no tiver um ttulo, na barra do navega-
dor aparecer Documento sem ttulo.
Para alterar o ttulo, clique com o boto direito do mouse em qualquer
lugar da pgina e no menu de contexto que aparecer, selecione a opo
Propriedades da pgina, uma outra maneira selecionando esta mes-
ma opo no menu Modificar. Utilize qualquer um dos mtodos para
que a caixa de dilogo Propriedades da pgina seja exibida.
No campo Ttulo digite Missao Impossivel, como mostra a figura anterior,
depois clique no boto OK. Observe que o ttulo aparecer na barra de
ttulo da janela do documento e o nome do arquivo da pgina e a pasta na
qual ele foi salvo aparecem entre parnteses, ao lado do ttulo.
OBS: Sempre que for definir nomes de arquivos ou ttulos de pgina,
procure no utilizar caracteres especiais (como , ) ou pontuao, como
dois pontos, barras inclinadas ou pontos nos nomes dos arquivos, pois
depois que estes arquivos forem publicados na Web (colocados em um
Dreamweaver 3.0
Pgina: 21
servidor remoto), muitos servidores podero converter esses caracteres,
provocando a ruptura dos vnculos entre os arquivos, sendo tambm que
muitos robs de mecanismos de pesquisa (programas que navegam
automaticamente pela Web, reunindo informaes a serem indexadas
pelos mecanismos de pesquisa) lem o ttulo das pginas e outras des-
cries inseridas no cabealho e utilizam estas informaes para indexar
as pginas nos seus bancos de dados.
Alterando o fundo da pgina
Como voc j percebeu, quando criamos uma nova pgina no
Dreamweaver, esta apresenta, por padro, um fundo branco. Mas ns
podemos alterar essa condio: inserir uma imagem de fundo ou uma
outra cor diferente do branco.
O Dreamweaver disponibiliza 216 cores (chamadas de cores de nave-
gador seguras) para serem usadas nas pginas, sendo exatamente
essas cores utilizadas pelos navegadores Windows Explorer e Netscape.
Para aplicar uma cor de fundo na pgina, abra a caixa de dilogo Propri-
edades da pgina (atravs do menu Modificar), depois clique no boto
Fundo.
Dreamweaver 3.0
Pgina: 22
Uma Paleta de cores aparecer, e o ponteiro do mouse adquire o forma-
to de um conta-gotas. Para selecionar uma cor, basta clicar com o con-
ta-gotas sobre ela.
Se a paleta de cores j estiver aberta e voc decidir no alterar mais a
cor, clique no boto Apagador ( ) para fech-la.
OBS: Nas pginas da Web cada cor representada por um cdigo
hexadecimal (composto por seis dgitos). Observe na figura acima que o
cdigo da cor branco FFFFFF, mas voc no precisar saber o cdigo
hexadecimal de cada cor, pois o Dreamweaver se encarrega de exibir o
cdigo da cor selecionada.
Assim, clique em alguma cor na Paleta de cores para que ela se torne a
cor de fundo da pgina. Aps clicar na cor desejada, observe que seu
cdigo hexadecimal exibido no campo Fundo, clique no boto OK para
fechar a caixa de dilogo.
Alm de inserir uma cor no fundo da pgina, voc tambm pode inserir
uma imagem. Se esta imagem for menor que a janela do documento, ela
se repetir a fim de ocupar toda a rea da pgina. Se a pgina j tiver
uma cor de fundo e voc inserir uma imagem de fundo, na maioria dos
casos esta imagem anular a cor.
OBS: O Dreamweaver, como a maioria dos navegadores, suporta as
imagens nos formatos GIF e JPEG (sendo que o Internet Explorer 4.0 ou
mais avanado e o Netscape 4.04 ou mais avanado, tambm suportam
as imagens no formato PNG).
Para inserir uma imagem de fundo, selecione a opo Propriedades da
pgina do menu Modificar. No campo Imagem do fundo, clique no bo-
to Procurar para localizar e selecionar a imagem desejada, depois clique
no boto OK.
Dreamweaver 3.0
Pgina: 23
Caso a imagem selecionada esteja localizada em uma pasta diferente
daquela que contm os arquivos do site, uma janela ser exibida (como
mostra a prxima figura). Clique no boto Sim para copiar o arquivo para
a pasta-raiz.
Dreamweaver 3.0
Pgina: 24
Aps clicar em Sim, a caixa de dilogo Copiar o arquivo como aparece,
com a pasta Agenda_Cultural j selecionada. Se quiser, renomeie o ar-
quivo de imagem e clique no boto Salvar, depois clique no boto OK da
caixa de dilogo Propriedades da pgina.
Observe, na figura anterior, que a imagem de fundo foi organizada lado a
lado para ocupar toda a rea da pgina. Veja tambm que aps o nome
do arquivo, na barra de ttulo da janela, aparece o caractere *, indicando
que a pgina contm alteraes que ainda no foram salvas. Sendo as-
sim, selecione a opo Salvar do menu Arquivo.
Formatando o texto
Vamos agora melhorar a aparncia dos textos da pgina, alterando o tipo
e tamanho das fontes, a cor de algumas palavras, etc. Mais para frente,
nos prximos captulos, veremos outros recursos que podero ser apli-
cados s pginas para torn-las ainda mais atraentes.
Dreamweaver 3.0
Pgina: 25
Voc poder formatar os textos contidos nas pginas atravs do menu
Texto ou do inspetor de Propriedades, sendo que o texto da pgina deve-
r estar previamente selecionado.
Selecione o primeiro pargrafo da pgina (que corresponde ao nome do
filme - Misso Impossvel 2). Clique no menu Texto e aponte o mouse
para a opo Fonte, voc ver uma lista com algumas combinaes de
fontes.
No Dreamweaver, ao invs de definir somente um tipo de fonte para uma
palavra ou texto, voc define vrias fontes (uma lista com diversos tipos
de fontes), pois assim, o navegador verificar se a primeira fonte da lista
est instalada no computador do usurio, caso no esteja, ele verifica a
segunda, e assim por diante. Se nenhuma das fontes sugeridas estiver
disponvel, a palavra ou texto ser exibido na fonte padro do navegador
do usurio.
Portanto, selecione uma combinao de fontes para alterar o tipo de fon-
te do texto selecionado. Agora selecione todo o restante do texto a altere
tambm o tipo da fonte (escolha uma combinao de fontes diferente do
primeiro pargrafo).
Conforme voc pode observar no submenu Fonte, existe uma opo
denominada Editar a lista de fontes, a qual utilizada para definir as
combinaes de fontes. Para modificar as combinaes de fontes, sele-
cione a opo Editar a lista de fontes, atravs do menu Texto, opo
Fonte. Na parte superior da caixa de dilogo exibida mostrada a Lista
de fontes j disponvel. Para montar outras combinaes, selecione uma
Dreamweaver 3.0
Pgina: 26
fonte da lista Fontes disponveis, direita da caixa de dilogo, depois
clique no boto << (localizado entre as listas Fontes escolhidas e Fontes
disponveis) para mover a fonte para a lista Fontes escolhidas, repita o
procedimento at completar uma seqncia de tipos de fontes. Para re-
mover as fontes de uma combinao, clique no boto >>.
Para adicionar a combinao de fontes Lista de fontes, clique no boto
de adio (+), e para remover uma combinao de fontes da lista clique
no boto de subtrao (-).
Agora vamos alterar o tamanho da fonte, sendo que esta ao poder
ser feita utilizando o menu Texto ou o Inspetor de propriedades. Estando
com o primeiro pargrafo selecionado, clique no menu drop-down Tam.
do inspetor de propriedades e selecione um tamanho, por exemplo 5.
Imediatamente o tamanho do texto selecionado se modificar.
Os tamanhos das fontes so alterados de acordo com um tamanho b-
sico, padro. Esse tamanho bsico definido pelo prprio usurio, que
configura seu navegador para qualquer que seja o tamanho que ele qui-
ser. Normalmente, o tamanho bsico adotado 3. Voc poder aumen-
tar ou diminuir o tamanho do texto, escolhendo um tamanho relativo (+
ou -1, + ou -7) no inspetor de propriedades ou as opes Aumento do
tamanho ou Reduo do tamanho do menu Texto. Por exemplo, se a
fonte est no tamanho padro (3) e voc escolher +4, o tamanho resul-
tante ser 7.
OBS: Se voc mudar o tamanho da fonte de um texto e depois quiser
que ele volte ao tamanho padro, v at o menu Texto, aponte para Ta-
manho e depois clique na opo Padro.
Alm de alterar o tipo e tamanho da fonte dos textos, tambm podemos
utilizar os estilos de negrito, itlico e sublinhado. Para aplicar os estilos
negrito e itlico, selecione o texto e depois, no inspetor de propriedades,
clique no boto B (para negrito) ou I (para itlico). Para sublinhar o texto,
selecione-o e clique no menu Texto, aponte para a opo Estilo e depois
Sublinhado (veja que tambm possvel aplicar os outros 2 estilos atra-
vs do menu Texto).
Dreamweaver 3.0
Pgina: 27
Como exemplo, selecione a palavra Sinopse da pgina que est aberta
na janela do documento, e aplique o estilo sublinhado. Faa a mesma
coisa com as palavras Elenco, Direo, Gnero, Classificao e Dura-
o. Depois aplique o estilo negrito no primeiro pargrafo, ou seja, no
ttulo do filme.
Outra alterao que iremos realizar com os textos da pgina em rela-
o sua cor, ou seja, vamos aprender a modificar a cor da fonte das
palavras e textos da pgina. Selecione o primeiro pargrafo da pgina e
depois, no inspetor de propriedades, clique no boto Cor do texto, como
mostra a prxima figura.
A Paleta de cores exibida, sendo que voc j conhece esta paleta quando
aprendeu a alterar a cor de fundo da pgina. Com o conta-gotas, clique
em uma cor da paleta de cores ou da prpria pgina (leve em considera-
o a cor (ou imagem) de fundo quando for escolher a cor da fonte).
Depois selecione o restante do texto e altere a cor da fonte tambm.
Utilizando o cdigo hexadecimal da cor, voc poder copiar a cor de um
texto para outro ou ento excluir a cor anteriormente definida. Para copiar
a mesma cor de um texto para outro, deixe o cursor posicionado no texto
que j possui a cor, selecione o cdigo hexadecimal (incluindo o sinal #)
da caixa ao lado do boto Cor do texto, do inspetor de propriedades, e
copie-o para a rea de transferncia, pressionando Ctrl+C. Em seguida
selecione o texto cuja cor voc quer alterar, posicione o cursor na caixa
prxima ao boto Cor do texto, pressione Ctrl+V para colar o cdigo e
depois tecle Enter.
Dreamweaver 3.0
Pgina: 28
Para remover a cor da fonte de algum texto, selecione-o e depois apague
o cdigo hexadecimal exibido no inspetor de propriedades. No se es-
quea de teclar Enter.
Agora que sua pgina j est pronta (pelo menos por enquanto), salve-a
atravs da opo Salvar do menu Arquivo.
Como voc j aprendeu a criar e salvar pginas, inserir textos, format-
los, etc, crie outras pginas para outros ttulos de filmes. Nas prximas
figuras voc encontrar informaes sobre alguns filmes, e que como j
dissemos, voc poder criar pginas sobre outros ttulos de filmes que
desejar.
Lembre-se que para criar novos arquivos, ou pginas, basta selecionar a
opo Novo do menu Arquivo, e que todos os arquivos devem ser sal-
vos na pasta C:\Sites\Agenda_Cultural (o nome do arquivo e o ttulo da
pgina voc encontrar na barra de ttulo da janela referente a cada filme
nas prximas figuras).
Dreamweaver 3.0
Pgina: 29
Aps criar e salvar as pginas, altere o fundo de cada uma (trocando a
cor ou inserindo uma imagem), depois formate os textos (modifique o
tipo, tamanho e cor das fontes) e aplique, onde achar conveniente, os
estilos de negrito, itlico e sublinhado. Por ltimo salve cada pgina.
Dreamweaver 3.0
Pgina: 30
PARGRAFO E QUEBRA DE LINHA
No Dreamweaver, sempre que voc digita um texto (mesmo que seja
uma nica palavra) e pressiona Enter, este texto torna-se um pargrafo,
sendo que cada pargrafo separado de outros pargrafos por uma li-
nha em branco. Assim, sempre que voc pressionar Enter, o ponto de
insero pular uma linha de espao em branco e iniciar um novo par-
grafo.
Observe, na prxima figura, que a pgina relativa ao filme 60 Segundos
apresenta 7 pargrafos.
Como j comentamos, toda pgina criada no Dreamweaver tem um c-
digo em HTML associado a ela, e no inspetor de Origem de HTML (janela
que exibe o cdigo da pgina), voc ver que cada pargrafo represen-
tado pelo rtulo <p>.
Dreamweaver 3.0
Pgina: 31
Se voc quiser, poder mudar de linha (teclar Enter) sem inserir uma
linha de espao em branco. Para conseguir isto, basta utilizar uma que-
bra de linha, ou seja, deixe o ponto de insero no final da linha que voc
quer dividir e, ao invs de pressionar somente a tecla Enter, pressione
Shift+Enter; a linha se dividir e o ponto de insero iniciar na prxima
linha.
Voc tambm pode conseguir uma quebra de linha selecionando a op-
o Quebra de linha do menu Inserir. No cdigo HTML, o rtulo que
representa uma quebra de linha <br>.
Na prxima figura voc pode ver que depois do segundo pargrafo inse-
rimos uma quebra de linha. Observe que um cone exibido no final da
linha onde inserimos uma quebra de linha.
Dreamweaver 3.0
Pgina: 32
Agora que voc j entendeu o que representa um pargrafo no
Dreamweaver, podemos aplicar um estilo a um pargrafo, ou seja, pode-
mos aplicar o formato de Cabealho 1 (ou Ttulo 1), Cabealho 2 (ou
Ttulo 2), e assim por diante, at o Cabealho 6. Entre um cabealho e o
texto seguinte h sempre uma quebra de pargrafo.
Como exemplo, na pgina Premonicao, selecione o primeiro pargrafo
e, no inspetor de propriedades, retire o estilo Negrito (clicando no cone
correspondente) e altere o tamanho da fonte para Nenhum (essas modi-
ficaes esto sendo feitas para voc perceber melhor como o estilo
Cabealho 1 ir alterar o texto).
Com o texto selecionado, clique no menu drop-down Formato do inspe-
tor de propriedades e selecione o formato Cabealho 1.
Dreamweaver 3.0
Pgina: 33
O texto se tornar um ttulo, isto , ter uma alterao de tamanho, ficar
em negrito, e uma linha em branco ser inserida depois do ttulo.
Agora, no cdigo HTML, o pargrafo no estar mais associado ao rtulo
<p>, e sim ao rtulo <h1>, de Cabealho 1 (ou Ttulo 1).
Assim, na sua pgina, voc poder aplicar ttulos diferenciados aos tex-
tos, e para remover um estilo de pargrafo, selecione a opo Nenhum
no menu drop-down Formato do inspetor de propriedades.
A PALETA DE HISTRICO
Quando voc precisar desfazer a ltima ao que realizou em uma pgi-
na, selecione a opo Desfazer do menu Editar (ou pressione Ctrl + Z),
como em qualquer outro programa. O Dreamweaver, alm desta opo,
tambm permite que vrias etapas sejam desfeitas simultaneamente,
atravs da Paleta de histrico.
A Paleta de histrico contm uma lista com todas as alteraes que voc
realizou na pgina ativa, na ordem em que foram realizadas, e atravs
dela ser possvel desfazer uma ou mais etapas, execut-las novamen-
te e criar novos comandos para automatizar tarefas repetitivas. Para abrir
a paleta de histrico, selecione a opo Histrico do menu Janela.
Dreamweaver 3.0
Pgina: 34
De acordo com a figura anterior, para desfazer a etapa (Excluir), basta
arrastar o polegar para a etapa acima, a etapa desfeita se tornar cinza.
Esta ao a mesma coisa que selecionar a opo Desfazer do menu
Editar.
Agora se quisssemos desfazer as ltimas trs aes simultaneamen-
te, bastaria clicar no canto esquerdo da etapa Aplicar a fonte: Arial
Rounded para que o polegar seja automaticamente colocado nesta eta-
pa ou ento arrastar o polegar at esta etapa.
Para definir o nmero de etapas que a paleta de histrico mostrar, sele-
cione a opo Preferncias do menu Editar, na caixa de dilogo exibida
selecione Geral na lista de categorias e digite o Nmero mximo de eta-
pas da paleta de histrico na caixa de texto apropriada.
Dreamweaver 3.0
Pgina: 35
FECHANDO E ABRINDO ARQUIVOS HTML
Para fechar os arquivos HTML, ou seja, as pginas que esto abertas na
janela do documento, clique no boto Fechar, localizado no canto direito
da barra de ttulo da janela ou ento escolha a opo Fechar do menu
Arquivo. Se a pgina contiver alteraes que ainda no foram salvas,
uma caixa de dilogo perguntando se voc deseja salvar essas altera-
es aparecer, clique no boto Sim (para salvar), No (para fechar sem
salvar) ou Cancelar (para que a pgina continue aberta). Com este pro-
cedimento, somente a janela do documento, que exibe a pgina, ser
fechada. Feche, agora, o arquivo missao_impossivel.htm.
OBS: Se voc utilizar a opo Sair do menu Arquivo (ao invs de Fe-
char), todas as janelas do Dreamweaver, incluindo a janela do site, sero
fechadas.
Para abrir arquivos voc tambm tem mais de uma opo: atravs da
janela do site ou da janela do documento. Se a janela do site estiver aber-
ta, d um clique duplo no arquivo que deseja abrir, desta maneira a janela
do documento exibir a pgina desejada.
Dreamweaver 3.0
Pgina: 36
Para abrir um arquivo atravs da janela do documento, selecione a op-
o Abrir do menu Arquivo. Na caixa de dilogo apresentada, localize o
arquivo que deseja abrir e selecione-o, em seguida clique no boto Abrir.
Voc tambm pode abrir os quatro ltimos arquivos que voc editou no
Dreamweaver selecionando seus nomes no menu Arquivo da janela do
documento.
Dreamweaver 3.0
Pgina: 37
OBS: Cada arquivo aberto no Dreamweaver exibido em uma janela de
documento diferente, assim, se voc tiver 3 pginas abertas, tambm
ter 3 janelas de documentos abertas, as quais so exibidas na barra de
tarefas do Windows. Mas, se voc quiser apenas uma janela aberta por
vez, voc pode alterar as preferncias do Dreamweaver, selecionando a
opo Preferncias do menu Editar. Na caixa de dilogo exibida, sele-
cione a Categoria Geral e desmarque a caixa de opo Abrir os arquivos
em outra janela.
Depois clique no boto OK. Desta maneira, a janela do documento con-
ter apenas uma pgina aberta, e quando for abrir uma outra pgina, a
primeira ser fechada e no armazenada na mesma janela, como ocor-
re na maioria dos outros programas.
Dreamweaver 3.0
Pgina: 38
RECURSOS ADICIONAIS
Neste captulo iremos estudar alguns outros recursos que podem ser
utilizados e aplicados nas pginas que voc criou.
VERIFICAR ORTOGRAFIA
O comando Verificar ortografia faz a verificao e correo ortogrfica
dos textos de sua pgina. Voc pode verificar apenas uma seleo de
texto ou a pgina inteira.
Antes de iniciar a correo ortogrfica, a pgina a ser verificada dever
estar aberta na janela do documento, como exemplo, abra a pgina
Premonicao. Posicione o ponto de insero no incio da pgina (ou em
um outro lugar onde queira comear a verificao ortogrfica), depois
selecione a opo Verificar a ortografia do menu Texto. Uma caixa de
dilogo ser apresentada, e j exibe a primeira palavra no localizada.
Dreamweaver 3.0
Pgina: 39
A palavra que exibida no campo Palavra no localizada no dicionrio
no pertence ao dicionrio ortogrfico do Dreamweaver. Voc pode re-
solver este problema clicando em algum dos botes da caixa de dilogo
Verificar a ortografia:
Se a palavra est correta mas no pertence ao dicionrio e voc gos-
taria de adicion-la ao seu dicionrio pessoal, clique no boto Adicio-
nar ao dicionrio pessoal. Assim, uma futura verificao ortogrfica
no questionar esta palavra.
Se a palavra est correta mas voc no quer inclu-la em seu dicion-
rio pessoal, clique no boto Ignorar;
Se a palavra est correta mas voc no quer inclu-la em seu dicion-
rio pessoal, e acha que ela aparece mais de uma vez na pgina, clique
no boto Ignorar todas;
Se a palavra estiver incorreta e sua ortografia correta aparece na cai-
xa de listagem Sugestes, selecione a palavra correta e clique no bo-
to Alterar;
Se voc acha que a palavra foi digitada incorretamente mais de uma
vez, selecione a palavra correta na caixa Sugestes e clique no boto
Alterar todas;
Voc tambm pode corrigir manualmente a palavra digitando sua for-
ma correta na caixa de texto Alterar para e depois clicar no boto Alte-
rar.
No nosso caso a palavra vo no foi encontrada, mas como ela est
correta e poderemos utiliz-la em outras pginas, clique no boto Adici-
onar ao dicionrio pessoal. Uma outra palavra ser destacada e voc
ter que decidir qual opo utilizar, realize o mesmo procedimento at
que uma caixa de dilogo exibindo a mensagem Verificao ortogrfica
foi concluda aparea. Depois salve esta pgina e faa a verificao orto-
grfica nas outras pginas que voc criou.
OBS: Para confirmar ou alterar o dicionrio que o Dreamweaver utiliza
para realizar a verificao ortogrfica, selecione a opo Preferncias
do menu Editar. Na Categoria Geral da caixa de dilogo Preferncias
voc pode alterar o idioma do dicionrio atravs do menu pop-up do campo
Dicionrio.
Dreamweaver 3.0
Pgina: 40
ALINHAMENTO DE TEXTO
Quando inserimos textos nas pginas, o alinhamento padro que o
Dreamweaver utiliza o esquerdo, mas podemos tambm alinhar todo o
texto ou parte dele com a margem direita ou no centro da pgina.
Para alterarmos o alinhamento de um texto (sendo que este texto pode
ser um pargrafo, um ttulo, uma lista ou uma pgina inteira) primeiro
devemos selecion-lo e depois escolher o alinhamento desejado. Como
exemplo, vamos centralizar o texto que representa o ttulo da pgina
premonicao.htm.
Selecione o texto Premonio e, no inspetor de propriedades, clique no
boto Alinhar no centro (ao invs de selecionar o texto, voc tambm
pode deixar o ponto de insero posicionado no pargrafo que ser ali-
nhado).
Como voc observou na figura anterior, o texto fica centralizado em rela-
o a ambas as margens da pgina. Voc tambm pode alinhar os tex-
tos atravs da opo Alinhamento do menu Texto.
Centralize tambm os ttulos das outras pginas (o primeiro pargrafo
que corresponde ao nome de cada filme), depois salve todas elas.
Dreamweaver 3.0
Pgina: 41
INSERIR LINHA HORIZONTAL
Voc pode inserir, na sua pgina, linhas (ou rguas) horizontais para se-
parar e organizar informaes, separar visualmente o texto e os objetos,
ou simplesmente para mudar o visual da pgina. Tais linhas podero ter
suas propriedades modificadas como a altura, largura, o alinhamento,
etc.
Estando com a pgina Premonicao (ou outra) aberta na janela do docu-
mento, posicione o cursor, por exemplo, no final do terceiro pargrafo
(depois da palavra morte.). Agora selecione a opo Rgua horizontal
do menu Inserir para que uma linha horizontal, que vai de um lado ao
outro da pgina, seja inserida (a linha estar, inicialmente, selecionada,
clique em qualquer lugar da pgina para retirar a seleo).
OBS: A linha horizontal tambm pode ser inserida clicando-se no boto
Inserir rgua horizontal ( ) da paleta de Objetos, s no se esquea
de deixar o ponto de insero posicionado no local desejado antes de
clicar no boto.
Posicione o cursor no final do penltimo pargrafo e insira outra linha
horizontal.
Dreamweaver 3.0
Pgina: 42
Como voc pode ver na figura anterior, a terceira linha est com a altura
e a largura modificadas.
Para alterar as propriedades da linha d um clique duplo nela; o inspetor
de propriedades exibir as propriedades da linha (rgua) horizontal, que
so:
L e U especificam a largura e altura da linha, em pixels ou como um
percentual do tamanho da pgina.
Alinhar especifica o alinhamento da linha (padro, esquerda, centro
ou direita). Esta definio se aplica apenas se a largura da linha for
menor do que a largura da janela do navegador.
Sombreado especifica se a linha ser desenhada com sombreado.
Desmarque esta opo se quiser que a linha fique com cores slidas.
Utilize a caixa em branco, esquerda do inspetor de propriedades,
para inserir um nome linha horizontal.
Para excluir uma linha horizontal, selecione-a e depois pressione a tecla
Delete.
LOCALIZAR E SUBSTITUIR
Voc poder usar o recurso de localizar e substituir do Dreamweaver
para fazer uma pesquisa no site inteiro, na pgina atual ou em um deter-
minado diretrio. Voc poder apenas localizar um texto como tambm
localizar e substituir um texto por outro (texto, neste caso, quer dizer
uma palavra inteira, uma frase ou parte de uma palavra).
Como exemplo, vamos localizar a palavra carro na pgina referente ao
filme 60 Segundos, para isso necessrio que a pgina em questo
esteja aberta na janela do documento. Agora selecione a opo Locali-
zar do menu Editar, na caixa de dilogo Localizar digite a palavra que
estamos procurando, ou seja, digite carro.
Dreamweaver 3.0
Pgina: 43
Clique no boto Localizar o prximo para o Dreamweaver encontrar o
que voc est procurando. Se a palavra existir na pgina, ela ser desta-
cada (muitas vezes necessrio mover a caixa de dilogo Localizar para
ver a palavra destacada). Se o Dreamweaver no conseguir localizar o
item a palavra especificada, uma caixa de dilogo aparecer informando
que o item no foi localizado.
Clique novamente no boto Localizar o prximo para que outra palavra
carro seja encontrada, quando a pesquisa terminar o Dreamweaver exi-
bir uma caixa de mensagem.
Para fechar a caixa de dilogo Localizar, clique no boto Fechar.
Abaixo voc encontra uma descrio mais completa sobre os itens da
caixa de dilogo Localizar:
Campo Localizar em, cujo menu drop-down contm algumas opes:
Documento atual: a busca do texto especificado feita somente no
documento ativo.
Dreamweaver 3.0
Pgina: 44
Site atual: a pesquisa feita em todos os documentos HTML, arqui-
vos de biblioteca e documentos de texto localizados no site. Aps a
escolha da opo Site atual, o nome deste aparecer direita do menu
pop-up. Se este no for o site no qual deseja efetuar a busca, escolha
um outro site no menu pop-up Sites atuais, na janela do site.
Pasta: a busca realizada em um diretrio especfico. Aps escolher
a opo Pasta, clique no cone correspondente pasta, para procurar
e selecionar o diretrio no qual ser efetuada a busca.
Campo Localizar - especifica o tipo de texto a ser localizado:
Texto: permite procurar determinadas seqncias de texto na janela
do documento.
Origem de HTML: permite buscar determinadas seqncias de tex-
to no cdigo de origem de HTML.
Texto avan.: permite buscar determinadas seqncias de texto den-
tro ou fora de um ou mais rtulos (tags).
Marcador: permite procurar determinados rtulos (tags), atributos e
valores de atributo.
Coincidir maisc./minsc.: selecione esta opo para procurar letras
maisculas ou minsculas.
Ignorar os diferentes espaos em branco: se esta opo estiver
marcada, a busca pelo texto especificado ir ignorar os espaos entre
as palavras (por exemplo: tanto o texto autoafirmao como auto afir-
mao sero encontrados).
Utilizar expresses regulares: voc poder incluir certos caracteres e
seqncias pequenas de caracteres (como ?, *, \w e \b) no texto a ser
localizado.
Voc tambm pode salvar a pesquisa clicando no cone Salvar (que voc
j conhece) e, posteriormente, carreg-la clicando no cone Abrir e sele-
cionando o arquivo.
Vimos como localizar um texto qualquer, agora vamos localizar um texto
e substitu-lo por outro. Ainda com a pgina aberta na janela do docu-
mento, selecione a opo Substituir do menu Editar. Na caixa de dilo-
go Substituir, digite o texto que voc quer encontrar (por exemplo, carro)
e o texto que ir substitu-lo (por exemplo, veculo), como mostra a prxi-
ma figura.
Dreamweaver 3.0
Pgina: 45
Em seguida clique no boto Localizar o prximo para que o texto (carro)
seja destacado, depois clique no boto Substituir para troc-lo pelo texto
substituto (veculo). Aps esta ao a prxima palavra carro j desta-
cada, e voc s precisa clicar no boto Substituir se quiser troc-la pela
palavra veculo. Se por algum motivo no quiser que a palavra destacada
seja substituda, clique no boto Localizar o prximo ao invs de clicar
em Substituir.
Dreamweaver 3.0
Pgina: 46
TRABALHANDO COM IMAGENS
Quando estudamos o captulo referente criao de pginas, vimos,
dentre outros tpicos, como podemos alterar o fundo da pgina: trocan-
do a cor ou inserindo uma imagem, onde esta ltima organizada lado a
lado e se repete at preencher todo o fundo da pgina. Neste captulo
vamos aprender a inserir imagens na pgina e alterar sua propriedades,
sendo que as pginas da Web que contm imagens costumam ser mais
atraentes e mais interessantes do que aquelas que s apresentam tex-
tos.
Vamos tambm aprender a criar e inserir imagens cambiveis nas pgi-
nas, onde uma imagem cambivel aquela que se altera quando o pon-
teiro do mouse for posicionado sobre ela.
Para inserir uma imagem (no cambivel) na pgina, deixe o ponto de
insero no local onde deseja que a imagem seja inserida, depois utilize
uma das seguintes opes:
Selecione a opo Imagem do menu Inserir ou
Clique no boto Inserir imagem da paleta de objetos.
Utilizando qualquer uma das opes, a caixa de dilogo Selecione a ori-
gem da imagem aparecer. Nesta caixa de dilogo localize o arquivo de
imagem desejado e quando voc selecion-lo, poder visualizar a ima-
gem no lado direito da caixa de dilogo, na rea denominada Imagem de
visualizao. Clique no boto Selecione para que a imagem seja inserida
na pgina.
OBS: Lembre-se que as imagens que sero inseridas nas pginas de-
vero estar nos formatos GIF ou JPG (JPEG).
Vamos inserir uma imagem na pgina referente ao filme Patriota, para
isso a pgina dever estar aberta na janela do documento. Com o cursor
posicionado no incio da pgina, clique na opo Imagem do menu Inse-
rir. A caixa de dilogo Selecione a origem da imagem ser exibida, e
como exemplo, vamos inserir a imagem figpatriota.jpg, onde esta j se
encontra selecionada. Clique no boto Selecione para que a imagem
escolhida seja inserida na pgina.
Dreamweaver 3.0
Pgina: 47
Como mostra a prpria caixa de dilogo da figura anterior, o arquivo es-
colhido no est localizado na pasta-raiz do site, portanto, uma janela
ser exibida:
Clique no boto Sim para copiar o arquivo figpatriota.jpg para a pasta-
raiz. A figura inserida na pgina, e j aparece selecionada.
Dreamweaver 3.0
Pgina: 48
Os trs quadradinhos que aparecem destacados na figura anterior so
chamados de alas de seleo, e podem ser arrastados para
redimensionar a imagem.
As propriedades e uma pequena visualizao da imagem, so exibidas
no inspetor de Propriedades (para exibir o inspetor de propriedades, se-
lecione a opo Propriedades no menu Janela). Lembre-se que a ima-
gem deve estar selecionada para que suas propriedades sejam exibidas
no inspetor.
Dreamweaver 3.0
Pgina: 49
Voc pode clicar na setinha destacada na figura anterior para expandir o
inspetor de propriedades e visualizar o conjunto completo das proprieda-
des da imagem selecionada. A imagem em miniatura que aparece no
inspetor age como o boto Aplicar (ou Apply) para as propriedades da
imagem.
Quando quiser remover uma imagem da pgina, selecione-a (atravs de
um clique) e depois pressione a tecla Delete. Para selecionar mais de
uma imagem, mantenha a tecla Shift pressionada enquanto clica em cada
imagem. Voc tambm pode dar um clique duplo na imagem e acessar a
caixa de dilogo Selecione a origem da imagem, desta maneira poder
selecionar outro arquivo de imagem para substituir a atual.
PROPRIEDADES DA IMAGEM
Estando com uma imagem selecionada, o inspetor de propriedades exi-
bir os seguintes campos que sero utilizados para alterar as proprieda-
des da imagem:
1 - Nome: se voc est pensando em trabalhar com o cdigo HTML, til
definir um nome para a imagem. Este nome no aparecer na tela.
2 - L e U: exibem as dimenses, em pixels, da imagem, ou seja, a largura
(L) e a altura (U). Estes valores podem ser alterados, para isso digite
outros nmeros na caixa de texto ou arraste as alas (quadradinhos) da
imagem. Quando voc modifica as dimenses da imagem, os nmeros
das caixas L e U assumem o estilo negrito, e para retornar s medidas
originais, clique nos identificadores L e U.
OBS: Quando voc altera as dimenses da imagem, o tamanho do ar-
quivo da imagem no alterado.
Dreamweaver 3.0
Pgina: 50
3 - Orig.: exibe o nome do arquivo de origem da imagem. Voc pode
clicar no cone correspondente pasta ( direita do campo Orig) para
exibir a caixa de dilogo Selecione a origem da imagem e escolher outra
imagem (ou seja, outro arquivo de origem).
4 - Vnculo: se a imagem for um hyperlink, ou seja, exibir outra pgina
quando receber um clique, o endereo desta pgina associada a ela ser
exibido no campo Vnculo.
5 - Alinhar: a imagem, inicialmente, apresenta o alinhamento padro do
navegador, que o alinhamento na linha de base, isto , a parte inferior
da imagem alinhada com a linha de base do texto ou com o objeto mais
prximo. Mas este tipo de alinhamento pode ser modificado atravs da
caixa drop-down Alinhar, ou atravs dos trs botes de alinhamento iden-
tificados pelo nmero 5.1 na figura anterior.
6 - Alt: neste campo voc pode inserir um texto que ser exibido no lugar
da imagem, caso o navegador esteja configurado para exibir somente
texto.
7 - Mapa: este campo utilizado para inserir um campo de imagens, ou
seja, voc pode dividir a imagem atual em vrias regies ou pontos ati-
vos (utilizando os botes identificados na figura anterior pelo nmero
7.1) e quando o usurio clicar em um ponto ativo, uma outra pgina da
Web ser exibida.
8 - Espao V e Espao H: voc pode adicionar espao (em pixel) acima,
abaixo e em ambos os lados utilizando estas caixas de texto. Por pa-
dro, o Dreamweaver coloca um espao entre cada imagem colocada
em uma linha, e se voc quiser que sua imagem tenha algum espao
extra, voc pode colocar um espao invisvel em torno da imagem. O
espao V o espao vertical, acima e abaixo da imagem, e o espao H
o espao horizontal, esquerda e direita da imagem.
9 - Destino: quando a imagem for um hyperlink, ou seja, quando tiver um
vnculo associado a ela, voc pode especificar, atravs da opo Desti-
no, a moldura ou a janela na qual a pgina vinculada dever ser carrega-
da (na mesma janela da imagem, em uma nova janela sem nome, na
janela inteira do navegador, etc).
Dreamweaver 3.0
Pgina: 51
10 - Orig. Baixa: se a imagem que voc inseriu na pgina demorar para
aparecer no navegador, voc pode especificar uma outra imagem menor
(em preto e branco, que carrega mais rapidamente) para ser carregada
antes da imagem principal. Assim, definindo uma imagem de baixa reso-
luo, evitar que os visitantes do site esperem muito tempo para verem
alguma coisa.
11 - Borda: se quiser que a imagem apresente uma borda, digite um
nmero (em pixels) nesta caixa de texto. Insira o nmero zero para que
no haja nenhuma borda.
12 - Boto Atualizar: um clique neste boto faz com que os valores dos
campos L e U retornem ao tamanho original.
13 - Boto Editar: se voc tiver um editor de imagens associado ao
Dreamweaver, um clique neste boto abrir a imagem no editor para
poder ser modificada (para especificar um editor de imagens externo,
selecione Preferncias no menu Editar e depois na seo Categoria,
selecione Editores externos).
OBS: Quando alterar algum campo do inspetor de propriedades, pressi-
one Enter ou clique na imagem em miniatura (que corresponde ao boto
Aplicar) para que as alteraes sejam refletidas na imagem da pgina.
Lembre-se sempre que quanto menor for a imagem (em Kilobytes (K)),
mais rpido ela carregar.
CRIANDO IMAGENS CAMBIVEIS
As imagens cambiveis so comumente utilizadas nos Web sites, pois
provocam efeitos interessantes. Estas imagens so substitudas por ou-
tras quando o usurio passa o ponteiro do mouse sobre elas ou d um
clique, assim, tais imagens possuem um comportamento anexado a elas.
Um comportamento uma combinao entre um evento e uma ao,
onde voc define qual evento acionar uma determinada ao. Por exem-
plo: quando o usurio mover o mouse sobre uma imagem (um evento),
um som poder ser reproduzido (uma ao).
Dreamweaver 3.0
Pgina: 52
Vamos, neste tpico, criar a pgina inicial da home page Agenda Cultural
e acrescentar alguns botes que sero, posteriormente, a barra de nave-
gao. Estes botes tero um comportamento associado a eles, onde
definiremos que o evento ser quando o usurio passar o mouse sobre
eles e a ao a ser executada ser exibir outro boto (com a cor realada,
por exemplo).
Na janela do documento, selecione a opo Novo do menu Arquivo.
Uma nova janela sem ttulo ser apresentada, e nela criaremos a pgina
inicial da home page. Como exemplo, insira, no incio da pgina, uma
figura que j tenha sido criada (ou somente um texto) que represente o
nome da home page que o usurio ver. Como esta pgina ser a pri-
meira a ser exibida no navegador, ela deve conter um pequeno texto ex-
plicando o contedo e o objetivo do site, portanto, insira tambm algum
texto de apresentao (comece a digitar o texto dois pargrafos abaixo,
pois acima dele iremos inserir as imagens cambiveis).
Dreamweaver 3.0
Pgina: 53
Na Web, a home page padro da grande maioria dos sites apresenta o
nome index.htm, assim, qualquer site que voc acessar, este arquivo
ser o primeiro a ser exibido no navegador (arquivo de apresentao do
site). Vamos, ento, salvar esta pgina que estamos criando com o nome
index.htm.
Selecione a opo Salvar do menu Arquivo. Na caixa de dilogo Salvar
Como, localize a pasta Agenda_Cultural (que contm todos os arquivos
do site), e na caixa de texto Nome do arquivo, digite index.htm (como
mostra a prxima figura). Depois clique no boto Salvar.
Agora vamos definir um ttulo para essa pgina. Selecione a opo Pro-
priedades da pgina no menu Modificar. Na caixa de dilogo de mes-
mo nome, digite Agenda Cultural na caixa de texto Ttulo, depois clique no
boto OK.
Dreamweaver 3.0
Pgina: 54
Com a pgina quase completa, s falta inserirmos as imagens cambiveis
e depois os links para as outras pginas que criamos anteriormente.
Para criar uma imagem cambivel, precisamos de duas imagens, as
quais devem possuir as mesmas dimenses (largura e altura). Uma ima-
gem (chamada primria) ser inicialmente apresentada pelo navegador,
enquanto a outra s ser mostrada quando o ponteiro do mouse for
posicionado sobre a imagem primria.
OBS: Estas imagens devero ser previamente criadas em algum pro-
grama de criao/tratamento de imagens, como o Photoshop, Fireworks,
etc, e depois copiadas para a pasta do site.
Posicione o ponto de insero entre o ttulo da pgina e o texto de apre-
sentao (deixe-o centralizado). Na paleta de objetos, clique no boto
Inserir imagem cambivel ( ), ou selecione a opo Imagem
cambivel do menu Inserir. A caixa de dilogo Inserir imagem cambivel
aparecer:
Dreamweaver 3.0
Pgina: 55
Nesta caixa de dilogo, digite um nome para o objeto que est sendo
inserido e defina qual ser a imagem original e a imagem cambivel. Na
caixa de texto Nome da imagem digite botao1, clique no primeiro boto
Procurar e selecione o arquivo da imagem original, depois clique no se-
gundo boto Procurar e selecione o arquivo da imagem cambivel (por
enquanto no vamos inserir nada na ltima caixa de texto).
OBS: Deixe selecionada a opo Pr-carregar a imagem cambivel para
que a imagem cambivel seja carregada no cache do navegador durante
o carregamento da pgina, a fim de que no seja notada nenhuma pausa
entre a substituio de uma imagem por outra.
Clique no boto OK. Agora posicione o ponto de insero no lado direito
da primeira imagem e insira uma outra imagem cambivel, onde esta se
chamar botao2 (lembre-se que estas imagens constituiro a barra de
navegao da primeira pgina do site). Repita o procedimento at inserir
as outras imagens (botao3 e botao4), como mostra a prxima figura.
Dreamweaver 3.0
Pgina: 56
De acordo com a figura anterior, selecione cada imagem e, no inspetor
de propriedades, digite 10 no campo de texto Espao H para que haja um
espao entre elas.
Para testar o efeito das imagens cambiveis, devemos abrir a pgina em
um navegador. Estando com a pgina aberta na janela do documento,
pressione a tecla F12 (isso se o seu navegador for o Internet Explorer) ou
selecione a opo Visualizar no navegador do menu Arquivo e esco-
lha o navegador desejado.
Passe o mouse sobre as imagens e veja como a imagem original rapi-
damente substituda pela imagem cambivel. Feche o navegador para
retornar janela do documento.
Dreamweaver 3.0
Pgina: 57
INSERINDO HYPERLINKS
Um hyperlink estabelece um link (conexo) de uma pgina para outro
destino, onde o destino pode ser uma outra pgina da Web, uma figura,
um endereo de correio eletrnico, um arquivo (tal como um arquivo de
multimdia ou documento do Microsoft Office) ou um programa. Um
hyperlink pode ser texto ou figura, e quando o ponteiro do mouse est
sobre um hyperlink, ele se transforma em uma mozinha.
Assim, a grande funcionalidade da Internet se d graas existncia dos
links, os quais permitem a navegao entre as pginas dos sites. Atra-
vs dos hyperlinks, voc pode vincular suas pginas a outros documen-
tos que estejam dentro do seu prprio site ou em qualquer lugar do mun-
do. Quando falamos em documentos, entende-se como sendo imagens,
arquivos multimdia, programas ou outras pginas da Web.
Com o Dreamweaver, possvel criar facilmente os seguintes tipos de
vnculos:
Vnculos de caminho absoluto: apontam para uma localizao na
Internet fora do site no qual a pgina atual est localizada. Para esse tipo
de vnculo devemos informar a URL completa do documento vinculado,
inclusive o protocolo a ser utilizado (normalmente, http:// para as pginas
da Web).
Vnculos de caminho relativo: apontam do documento atual para outro
documento localizado dentro da mesma pasta de trabalho. Se o docu-
mento vinculado estiver localizado em outra pasta, especifique o cami-
nho atravs da hierarquia de pastas, do documento atual ao vinculado, e
na especificao desse caminho, no coloque a parte da URL absoluta,
pois a mesma para ambos os documentos.
Vnculos para ncoras identificadas: vinculam a um ponto previamen-
te identificado dentro de uma pgina, onde este ponto pode estar na mes-
ma pgina ou em uma localizao especfica em outra pgina.
Vnculos de correio eletrnico: abrem uma janela de mensagem (uti-
lizando o programa de correio eletrnico associado ao navegador do usu-
rio).
Dreamweaver 3.0
Pgina: 58
VNCULOS DE CAMINHO RELATIVO
Vamos, agora, definir os links para as imagens cambiveis que inseri-
mos na pgina principal do site (index.htm). Como a pgina que conter
o link e o documento de destino esto na mesma pasta, ento utilizare-
mos os vnculos de caminho relativo.
Antes de criarmos os links, deveremos criar uma outra pgina, onde a
imagem do boto Filmes da pgina principal conter um link para esta
nova pgina. Esta pgina, que ter como ttulo Filmes, exibir os nomes
dos filmes, onde cada nome ser um link para a pgina apropriada.
Selecione a opo Novo do menu Arquivo. Salve esta nova pgina na
pasta Agenda_Cultural e d o nome de filmes.htm ao arquivo. Depois
exiba a caixa de dilogo Propriedades da pgina e digite Filmes na caixa
de texto Ttulo. Por fim, insira o contedo na pgina Filmes de maneira
que fique parecido com a prxima figura.
Dreamweaver 3.0
Pgina: 59
Agora, exiba a pgina Agenda Cultural (arquivo index.htm) e clique no
segundo boto para selecion-lo, assim as propriedades da imagem sero
exibidas na janela Inspetor de propriedades (se a janela do inspetor no
estiver aberta, selecione a opo Propriedades do menu Janela).
No inspetor de propriedades, clique na pasta ao lado da caixa de texto
Vnculo (como mostra a figura a seguir) e encontre o arquivo que ser
exibido quando a imagem (ou o boto) receber um clique, ou seja, seleci-
one o arquivo filmes.htm.
Abaixo da caixa de texto Vnculo, no inspetor de propriedades, existe uma
outra caixa denominada Destino. O campo Destino um atributo de links
o qual especifica onde o link em questo deve ser aberto: na mesma
janela ou em uma nova. Clique na setinha do campo Destino e veja as
opes existentes.
Dreamweaver 3.0
Pgina: 60
A opo blank faz o link abrir em uma nova janela em branco do navega-
dor (tendo-se duas janelas abertas). J a opo top faz o link substituir o
contedo da janela atual (neste caso ficamos apenas com uma janela
aberta). As outras opes se aplicam somente quando estivermos tra-
balhando com as molduras frames. Por enquanto deixe a caixa de tex-
to Destino como estava antes, ou seja, vazia, sem nada selecionado.
Agora, na pgina filmes.htm, precisamos transformar os nomes dos fil-
mes em hyperlinks, para que cada um, quando receber um clique, abra a
pgina do filme apropriada.
Com o arquivo filmes.htm aberto na janela do documento, selecione o
texto Misso Impossvel 2. No inspetor de propriedades, clique na pasta
da caixa de texto Vnculo, na caixa de dilogo Selecione o arquivo que
surgir, localize o arquivo missao_impossivel.htm e depois clique no bo-
to Selecione. Voc ver que o texto j ficar sublinhado, indicando que
agora ele um hyperlink.
Faa a mesma coisa com os outros trs textos: 60 Segundos (vincule-o
ao arquivo 60_segundos.htm), O Patriota (vincule-o ao arquivo
patriota.htm) e Premonio (vincule-o ao arquivo premonicao.htm).
Dreamweaver 3.0
Pgina: 61
Salve seus arquivos. Ainda falta inserirmos outros links na pgina
filmes.htm e nas pginas referentes a cada filme. Da pgina filmes.htm
dever haver links para a pgina inicial (index.htm), para a pgina refe-
rente aos shows e aos teatros (que ainda no existem, e ficar a seu
cargo cri-las e estabelecer os links). Da pgina referente a cada filme
dever haver um link que volte pgina filmes.htm, como mostra a figura
a seguir.
Vamos agora visualizar o mapa do site onde poderemos ver a estrutura
do site e os cones vinculados. A exibio do mapa do site ideal para
fazer storyboards ou criar o layout da estrutura do site, alm de poder ser
utilizado para adicionar novos arquivos a um site ou modificar, adicionar
ou remover vnculos.
Para exibir um mapa de site, selecione a opo Mapa do site do
menu Janela, isto se a janela Site estiver fechada. Agora, se esta
janela estiver aberta, clique no boto Mapa do site ( ) na prpria
janela.
Dreamweaver 3.0
Pgina: 62
Como padro, o mapa exibe dois nveis da estrutura do site. Clique nos
sinais de adio (+) ou subtrao (-) ao lado de uma pgina para mostrar
ou ocultar as pginas vinculadas abaixo do segundo nvel.
Agora vamos visualizar o site no navegador e testar os hyperlinks. Estan-
do com o arquivo index.htm aberto na janela do documento, pressione a
tecla F12 (se o seu navegador no for o Internet Explorer, utilize a opo
Visualizar no navegador do menu Arquivo). A janela do seu navegador
ser aberta e exibir a pgina principal, teste os hyperlinks e depois fe-
che a janela do navegador.
OBS: Os documentos podem ser visualizados nos navegadores a qual-
quer momento, e no necessrio salvar o documento previamente.
Dreamweaver 3.0
Pgina: 63
Quando visualizamos qualquer arquivo no navegador, o Dreamweaver
cria um arquivo temporrio (cujo nome inicia-se com as letras TMP) que
ele utiliza como o arquivo de visualizao de navegador (esse arquivo
pode ser visto na janela do Site, j que ela exibe todos os arquivos do
site). Portanto, se voc modificar o arquivo no Dreamweaver e depois na
janela do navegador clicar no boto Atualizar ou Refresh, a verso mais
atual do arquivo no ser mostrada, ser necessrio fechar a janela do
navegador e visualizar o arquivo novamente.
Dreamweaver 3.0
Pgina: 64
VNCULOS DE CAMINHO ABSOLUTO E NCORAS
IDENTIFICADAS
Todos os hyperlinks que inserimos no site possuem vnculos de caminho
relativo, pois todos os arquivos relacionados esto localizados na pasta
Agenda_Cultural. Para inserir vnculo de caminho absoluto (quando o
destino do link no est em localizado na pasta local), o processo o
mesmo: selecione o texto ou figura e no inspetor de propriedades, digite
todo o caminho do destino, incluindo a URL completa inclusive. Por exem-
plo: se voc quisesse ter um link no seu site que apontasse para a pgi-
na sobre os produtos da Macromedia, voc deveria digitar na caixa de
texto Vnculo: http://www.macromedia.com/br/software.
Agora, para definir um link que aponte para determinada parte (ou ponto)
da pgina, necessrio usar as ncoras identificadas. Geralmente, as
ncoras identificadas so utilizadas para levar um usurio a um tpico
especfico ou para a parte superior ou inferior de um pgina, fazendo-o
chegar rapidamente posio selecionada.
Como exemplo, vamos criar uma ncora identificada na pgina do filme
O Patriota e depois criar um link para essa ncora. A ncora identificada
ser uma imagem (como mostrada na figura a seguir), e o link a essa
imagem ser a palavra famlia. Primeiro devemos dar um nome ima-
gem, j que ela ser exibida quando clicarmos na palavra famlia.
Deixe o ponto de insero posicionado ao lado da imagem e depois sele-
cione a opo ncora com nome do menu Inserir. Na caixa de texto
Inserir ncora com nome digite um nome para a ncora, como mostra a
prxima figura (esse nome dever ser uma nica palavra em letras mi-
nsculas ou nmeros). Depois clique no boto OK.
Dreamweaver 3.0
Pgina: 65
Agora, na janela do documento, selecione a palavra famlia e, na caixa de
texto Vnculo do inspetor de propriedades, digite o sinal de libra (#) segui-
do do nome da ncora, ou seja, digite #familia (sem espao entre o sinal
e o nome). Depois pressione a tecla Enter.
Dreamweaver 3.0
Pgina: 66
A palavra famlia agora est vinculada com a ncora identificada. Para
ver o resultado, exiba esta pgina no navegador.
OBS: Se a ncora estiver na mesma pgina (como foi o nosso caso),
insira na caixa de texto Vnculo apenas o sinal de libra seguido do nome
da ncora. Se a ncora estiver em uma pgina e o link para ela em outra
(mas ambos na mesma pasta), digite na caixa de texto Vnculo o nome
da pgina seguido do sinal de libra e do nome da ncora (algo como:
nomedapgina.htm#nomedancora). Se a ncora estiver em um outro
local da Internet, ser necessrio digitar o endereo absoluto e no final o
nome da pgina mais o sinal e o nome da ncora (exemplo: http://
www.site.com.br/nomedapgina.htm#nomedancora).
Elementos invisveis
Quando inserimos uma ncora identificada na imagem do tpico anteri-
or, uma pequena ncora apareceu ao lado da imagem.
OBS: Para exibir ou ocultar os elementos invisveis (no caso, a pequena
ncora), utilize a opo Elementos invisveis do menu Exibir.
Dreamweaver 3.0
Pgina: 67
Os elementos invisveis possuem este nome pois no so exibidos no
navegador, mas somente na janela do documento (desde que a opo
Exibir elementos invisveis esteja selecionada).
Na janela do documento todos os elementos invisveis aparecem na for-
ma de pequenos cones. Temos como exemplos de elementos invis-
veis: formulrios, ncoras com nome, comentrios e roteiros.
Para visualizar as propriedades de um elemento invisvel, d um clique
duplo sobre ele para abrir o inspetor de propriedades, e assim saber o
que e o que faz aquele elemento invisvel.
ALTERANDO AS CORES DOS VNCULOS
Atravs da caixa de dilogo Propriedades da pgina, podemos alterar as
cores dos vnculos (ou links), j que cada vnculo assume trs estados:
Vnculos: quando os usurios ainda no clicaram no link.
Vnculos visitados: quando os usurios j clicaram no link e j visitaram a
pgina de destino.
Vnculos ativos: quando os usurios esto com o mouse no link prontos
para dar um clique.
Assim, para cada estado do link, podemos definir uma cor diferente, faci-
litando para o usurio saber quais as partes do site que ele j visitou.
Com uma pgina aberta na janela do documento, abra a caixa de dilogo
Propriedades da pgina (atravs do menu Modificar). Voc ver as cai-
xas de texto Vnculos, Vnculos visitados e Vnculos ativos, e para alterar
a cor, basta clicar no boto de cor que se encontra ao lado de cada caixa.
Na paleta de cores que ser apresentada, clique na cor desejada.
Dreamweaver 3.0
Pgina: 68
Na paleta de cores voc tambm pode clicar no boto Cores ( ) para
abrir a caixa de dilogo Cor e escolher outra cor que no esteja na paleta
de cores.
Dreamweaver 3.0
Pgina: 69
CRIANDO PGINAS COM MOLDURAS
As molduras (tambm conhecidas como frames ou quadros) so regi-
es retangulares que podemos inserir nas pginas da Web. Uma pgina
baseada em molduras dividida em vrias janelas dentro de janelas,
assim, uma nica pgina do site pode conter vrias molduras, cada uma
podendo exibir um contedo diferente. Utilizamos as molduras quando
queremos que determinada regio da pgina permanea esttica (apa-
rea o tempo) enquanto outras regies sempre mudam.
Cada moldura um arquivo HTML distinto, com seu prprio contedo,
incluindo diferentes cores de links e imagens de fundo. Portanto, tem que
haver um nico arquivo com a finalidade de unir todos os arquivos de
molduras presentes em uma pgina, pois este arquivo (que representa o
conjunto de todas as molduras da pgina) o que ser exibido no nave-
gador. Sendo assim, se temos uma pgina da Web com duas molduras,
na verdade temos trs arquivos distintos: o arquivo do conjunto de mol-
duras e os dois arquivos com o contedo que aparece dentro de cada
moldura.
Vamos agora criar um outro site, ou melhor, vamos criar novamente um
site como o Guia Cultural s que agora construiremos as pginas utili-
zando molduras.
Para criar um novo site, selecione a opo Novo site do menu Site. Na
caixa de dilogo apresentada, digite agenda2 na caixa de texto Nome do
site, depois clique no cone correspondente pasta, direita do campo
Pasta raiz local e, dentro da pasta Site, crie uma nova pasta denominada
Agenda_Cultural_Moldura (como mostra a prxima figura). Depois clique
no boto Abrir.
Dreamweaver 3.0
Pgina: 70
Em seguida clique no boto Salvar para retornar caixa de dilogo Defi-
nio de site.
Estando com o Nome do site e a Pasta raiz local definidos,
clique no boto OK. A janela Site agenda2 ser exibida.
Vamos comear a construo do site criando o arquivo
index.htm, que corresponde pgina inicial do site.
Na janela do documento, exiba a paleta de objetos (selecio-
ne a opo Objetos do menu Janela). Na paleta de obje-
tos, selecione o painel Molduras.
O painel Molduras contm 8 botes utilizados criar layouts
predefinidos de conjuntos de molduras. Posicione o mouse
sobre cada boto e veja que aparecer um pequeno texto
informando o objetivo do boto.
Dreamweaver 3.0
Pgina: 71
Estando com a janela do documento ativa, clique no boto Inserir mol-
dura esquerda (primeiro boto) do painel Molduras da paleta de objetos.
A pgina ser dividida em duas regies (se voc no estiver vendo uma
borda cinza, selecione a opo Bordas da moldura do menu Exibir).
A moldura da esquerda ir conter a barra de navegao do site (sendo
que esta moldura ficar sempre visvel) e a moldura da direita ter seu
contedo varivel. Se necessrio, podemos inserir outras molduras nes-
ta mesma pgina, atravs do menu Inserir, opo Molduras.
Vamos inserir uma moldura superior onde esta conter a imagem que
representa o ttulo da home page, que Guia Cultural. D um clique na
moldura da direita para inserir o ponto de insero, depois no menu Inse-
rir, v at a opo Molduras e clique em Superior. Quando utilizamos
esta opo, ou seja, quando dividimos uma moldura que j existe na
pgina (no nosso caso dividimos moldura direita), temos um Conjunto
aninhado de molduras, onde a moldura original chamada de pai e a
moldura que foi inserida a moldura-filha.
Agora a pgina contm trs molduras, as quais recebero nomes dife-
rentes na hora em que formos salv-las.
Dreamweaver 3.0
Pgina: 72
Poderemos inserir o contedo diretamente nas pginas com molduras
(ou seja, criar uma pgina digitando textos e inserindo figuras diretamen-
te na moldura) ou podemos abrir algum arquivo existente e vincul-lo
moldura.
Como iremos criar novamente o site Guia Cultural, s que agora com
uma estrutura diferente de pginas, copie todos os arquivos (menos o
index.htm) da pasta Guia_Cultural para a pasta Guia_Cultural_Moldura
(faa isso atravs do Windows Explorer).
OBS: Mesmo com o conjunto de molduras aberto na janela do documen-
to, voc poder realizar modificaes nas pginas dos arquivos
filmes.htm, 60segundos.htm, etc, selecionando a opo Abrir do menu
Arquivo (a pgina ser aberta em uma outra janela de documento). Se
quiser, faa as alteraes na pgina (modifique o fundo, as imagens,
formate a fonte, entre outras coisas) e depois salve o arquivo. Observe a
prxima figura e veja as alteraes que foram feitas na pgina Filmes.
Dreamweaver 3.0
Pgina: 73
Agora, d um clique na moldura superior da sua pgina para inserir o
ponto de insero, depois, atravs do menu Inserir, opo Imagem, insi-
ra a imagem do ttulo da home page (a imagem que apresenta o texto
Guia Cultural), como mostra a prxima figura.
Posicione o ponto de insero na moldura da direita para inserirmos o
texto de apresentao do site. No menu Arquivo, selecione a opo Abrir
na moldura. Na caixa de dilogo Selecione o arquivo de HTML, selecio-
ne o arquivo index.htm da pasta Guia_Cultural, depois clique no boto
Selecione. O Dreamweaver exibir uma janela de mensagem informan-
do que o arquivo index.htm est fora da pasta raiz (Guia_Cultural_Moldura),
e se voc deseja copi-lo para a pasta ativa, clique no boto Sim; na
prxima caixa de dilogo apresentada (Copiar o arquivo como), digite
primeira.htm na caixa de texto Nome do arquivo.
O contedo do arquivo ser inserido na moldura, mas como queremos
somente o texto, selecione as imagens que foram inseridas e exclua-as
(pressione a tecla Delete depois de selecionar cada uma delas).
Dreamweaver 3.0
Pgina: 74
SALVANDO AS MOLDURAS
Como j comentamos, cada moldura da pgina constitui um arquivo,
portanto, na pgina que criamos e inserimos trs molduras, teremos na
verdade quatro arquivos: o arquivo da moldura superior, da moldura es-
querda, da moldura direita e um arquivo que ser o conjunto desses trs.
Para salvar o conjunto das molduras e depois cada moldura individual-
mente, selecione a opo Salvar tudo do menu Arquivo. Na caixa de
dilogo Salvar como voc dever definir um nome para cada arquivo, e
para saber qual arquivo (ou moldura) que est sendo salvo, s obser-
var qual moldura ficar selecionada na janela do documento. Como mostra
a prxima figura, o primeiro arquivo a ser salvo o conjunto das moldu-
ras, e como inicialmente todo o conjunto que ser exibido no navegador
(e no uma moldura separadamente), digite index.htm como nome do
arquivo do conjunto das molduras e clique no boto Salvar.
A prxima moldura que o Dreamweaver destaca a moldura superior.
Na caixa de texto Nome do arquivo digite superior.htm e clique no boto
Salvar.
Dreamweaver 3.0
Pgina: 75
Por fim digite esquerda.htm como nome para o arquivo da moldura es-
querda. A moldura da direita j assumiu o nome primeira.htm.
A pgina que criamos ento formada por quatro arquivos: superior.htm,
esquerda.htm, primeira.htm e index.htm.
Dreamweaver 3.0
Pgina: 76
SELECIONANDO MOLDURAS
Muitas alteraes que voc ter que realizar na(s) moldura(s) exigir que
ela esteja selecionada. Voc pode selecionar uma moldura ou um con-
junto de molduras na janela do documento ou utilizar o inspetor de mol-
duras. Quando uma moldura for selecionada, voc ver as linhas de se-
leo no inspetor de molduras e na janela do documento.
O inspetor de molduras (mostrado na prxima figura) exibido atravs
do menu Janela, opo Molduras.
O inspetor de molduras fornece uma representao visual das molduras
existentes na pgina. As molduras so envoltas por uma linha fina cinza,
e cada moldura identificada por um nome.
Para selecionar uma moldura atravs do inspetor de molduras, clique na
moldura desejada e veja que aparece uma linha forte em torno da moldu-
ra, e uma linha tracejada aparece em torno da mesma moldura na janela
do documento. Para selecionar qualquer moldura na prpria janela do
documento, pressione a tecla Alt e d um clique na moldura. Para sele-
cionar todo o conjunto de molduras, clique na borda mais externa do
inspetor de molduras.
Dreamweaver 3.0
Pgina: 77
Quando as pginas de um site so criadas utilizando-se molduras, o
arquivo que representa o conjunto dos molduras (no nosso caso,
index.htm) ser a pgina para a qual seu URL apontar. Dessa maneira,
precisamos definir um ttulo, j que este ttulo ser exibido na barra de
ttulo da janela do navegador.
Atravs do inspetor de molduras, selecione o conjunto de molduras
clicando na borda externa, como mostra a figura anterior. Agora, para
definir o ttulo Guia Cultural, utilize a opo Propriedades da pgina do
menu Modificar, e realize a alterao da mesma maneira que voc apren-
deu quando estava construindo pginas sem molduras. Depois salve sua
pgina atravs da opo Salvar tudo do menu Arquivo.
Dreamweaver 3.0
Pgina: 78
PROPRIEDADES DAS MOLDURAS
As propriedades das molduras determinam o nome da moldura, o arqui-
vo de origem, as margens, paginao, redimensionamento e bordas de
cada moldura em um conjunto e as propriedades dos conjuntos de mol-
duras controlam as dimenses das molduras, assim como a cor e largu-
ra das bordas entre elas.
Para especificar as propriedades das molduras, primeiro selecione a
moldura, depois escolha a opo Propriedades do menu Janela (isso
se o inspetor de propriedades estiver fechado). Se necessrio, clique na
seta de expanso, situada no canto inferior direito do inspetor de proprie-
dades, para examinar todas as propriedades da moldura.
1. Campo Nome da moldura: digite um nome para a moldura, sendo que
este nome ser utilizado como referncia de destino e roteiro de
hipervnculos. O nome de uma moldura dever conter apenas uma pala-
vra, e um nome de moldura diferente de um nome de arquivo. Aproveite
e selecione a moldura superior e digite moldurasuperior no campo nome
da moldura, depois selecione a moldura esquerda e d o nome de
molduraesquerda a ela, por fim selecione a moldura da direita e d o
nome de molduraprincipal. Aps digitar o nome no campo, pressione a
tecla Enter ou ento clique na pequena imagem da moldura exibida no
inspetor de propriedades.
2. Orig: determina o documento de origem da moldura. Digite um nome
de arquivo ou clique no cone correspondente pasta, para procurar e
selecionar o arquivo.
3. Paginao: determina se as barras de rolagem aparecero quando
no houver espao suficiente para exibir o contedo da moldura. A defini-
o padro da maioria dos navegadores Autom.
Dreamweaver 3.0
Pgina: 79
4. Sem redimens.: se esta opo for selecionada, os usurios no pode-
ro arrastar as bordas das molduras no navegador.
5. Bordas: controlam a borda da moldura. As opes so Sim, No e
Padro. A definio padro da maioria dos navegadores Sim. Para
desativar uma borda, todas as molduras a ela adjacentes devero estar
definidas como No.
6. Cor da borda define a cor de todas as bordas adjacentes moldura.
Essa definio anula a cor da borda do conjunto de molduras.
7. Largura da margem: define a largura das margens esquerda e direita,
em pixels (o espao entre as bordas da moldura e o seu contedo).
8. Altura da margem: define a altura das margens superior e inferior, em
pixels (o espao entre as bordas da moldura e o seu contedo).
Alm de alterar todas estas propriedades das molduras, voc tambm
pode modificar o tamanho das molduras, e uma maneira fcil de fazer
isto arrastando as bordas das molduras. Quando voc leva o mouse
para a borda da moldura, ele se transforma em uma seta de ponta dupla,
nesse momento voc poder arrast-lo e redimensionar a moldura.
Arraste a borda de uma moldura na janela do documento, a fim de definir
os tamanhos aproximados das molduras; em seguida, utilize o inspetor
de propriedades para especificar a quantidade de espao que o navega-
dor reservar para uma moldura, quando o tamanho da tela no permitir
que as molduras sejam exibidas no tamanho em que foram criadas.
OBS: Para abrir a pgina com todas as molduras, abra o arquivo que
representa o conjunto das molduras (no nosso caso, index.htm) e de-
pois, no menu Exibir, selecione a opo Bordas da moldura para que
as bordas sejam exibidas e assim voc poder visualizar as molduras
claramente.
Dreamweaver 3.0
Pgina: 80
INSERINDO UMA BARRA DE NAVEGAO
Vamos inserir, na moldura esquerda, uma barra de navegao. Para isso,
utilizaremos a opo Barra de navegao do menu Inserir. Quando
uma imagem for utilizada como um boto de uma barra de navegao, a
imagem pode apresentar quatro estados:
Ativa: a imagem que aparecer quando a pgina for inicialmente
carregada.
Sobreposta: a imagem que aparecer quando o ponteiro for
movido sobre uma imagem.
Inativa: a imagem que aparecer quando o usurio clica sobre
ela.
Inativa e sobreposta: a imagem que aparecer quando o pon-
teiro for movido sobre ela, aps o clique do usurio.
Dessa maneira, os botes (e seus estados) j devero existir, onde es-
tes podem ser criados em qualquer programa de edio de imagens,
como o Photoshop e o Fireworks. Veja na figura abaixo os quatro esta-
dos de uma imagem que iremos utilizar na barra de navegao (essas
imagens foram criadas no Photoshop).
Posicione o ponto de insero no frame da esquerda. Agora selecione a
opo Barra de navegao do menu Inserir, a caixa de dilogo Inserir
barra de navegao ser exibida.
Dreamweaver 3.0
Pgina: 81
Nesta caixa de dilogo voc definir um nome para o elemento que far
parte da barra de navegao, os quatro arquivos de imagens correspon-
dentes a cada estado, a pgina que ser aberta quando a imagem rece-
ber um clique, se a pgina a ser exibida ser aberta na janela principal ou
em alguma moldura (na moldurasuperior, molduraprincipal ou na
molduraesquerda).
Como nome do ele-
mento, digite botao1.
Clique no boto Procu-
rar para localizar e se-
lecionar os arquivos de
imagem. Na caixa de
texto Quando clicado,
v para a URL clique
na pastinha e selecio-
ne o arqui vo
pri mei ra.htm, poi s
como estamos inserin-
do a imagem do boto
Home na barra de na-
vegao, sempre que o usurio clicar neste boto a pgina inicial do site
(primeira.htm) dever ser exibida. Na caixa ao lado selecione a opo
molduraprincipal (para que a pgina seja aberta nesta moldura). Por fim,
na caixa de opo Inserir, selecione Verticalmente.
Dreamweaver 3.0
Pgina: 82
Com este procedimento inserimos um elemento (boto) na barra de na-
vegao, ainda precisamos inserir mais trs (filmes, teatro e shows).
Para inserir o prximo elemento, clique no boto que apresenta a ima-
gem do sinal de adio, localizado na parte superior da caixa de dilogo
Inserir barra de navegao. Todos os campos estaro livres para que
voc possa inserir e definir outro elemento.
Depois de inserir todos os botes que constituiro a barra de navegao,
clique no boto OK. Voc ver que os elementos da barra de navegao
estaro muito perto uns dos outros, e para resolver esta situao, seleci-
one cada boto (dando um clique sobre ele) e, no inspetor de proprieda-
des, insira, por exemplo, o valor 15 na caixa de texto Espao V. Ainda no
inspetor de propriedades, verifique se na caixa Destino est selecionada
a opo molduraprincipal.
Dreamweaver 3.0
Pgina: 83
OBS: Para alterar alguma propriedade da barra de navegao (inserir/
excluir um elemento, mudar o hyperlink, etc), selecione a barra de nave-
gao e depois escolha a opo Barra de navegao do menu Modifi-
car. Para alterar alguma propriedade da moldura relativa a propriedades
da pgina (como a cor ou imagem de fundo, as cores dos vnculos, etc),
deixe o ponto de insero posicionado na moldura e depois escolha a
opo Propriedades da pgina do menu Modificar (ou ento clique
com o boto direito do mouse na moldura desejada e selecione a opo
Propriedades da pgina no menu pop-up que aparecer).
Agora bom voc visualizar a pgina principal no navegador e testar os
hyperlinks. Pressione a tecla F12; se for exibida uma janela avisando que
necessrio salvar a pgina antes de visualiz-la no navegador, clique
no boto OK.
Assim, voc viu que criar pginas com molduras no um trabalho dif-
cil, e a vantagem que voc pode exibir uma parte da pgina o tempo
todo, enquanto outras partes podem ter o contedo alterado. Quando
voc insere os links nas pginas, preocupe-se com o destino destes
links. Por exemplo, na pgina Filmes, que apresenta o nome dos filmes
como links, certifique-se onde a pgina ser aberta quando o usurio
clicar em algum destes links, sendo que temos as seguintes opes:
Blank: faz o link abrir em uma nova janela em branco no navegador.
Top: faz o link substituir o contedo da janela atual.
Parent: se voc estiver utilizando molduras aninhadas, faz o link abrir na
moldura-pai.
Self: faz o link abrir no mesma moldura que o link.
Dreamweaver 3.0
Pgina: 84
CRIANDO TABELAS
As tabelas so muito utilizadas para exibir e organizar os dados e as
imagens presentes nas suas pginas. As tabelas so compostas por
trs componentes bsicos: as linhas, as colunas e as clulas (que so
os pequenos retngulos criados pela interseo de uma linha com uma
coluna), sendo que nas clulas podemos inserir textos e imagens, e os
textos podem ser formatados como se estivessem em qualquer outra
parte da pgina.
Para criar uma tabela, utilizamos a paleta de objetos ou o menu Inserir.
Depois de construdas, podemos alterar as seguintes propriedades das
tabelas: largura, altura, alinhamento, bordas, imagem ou cor de fundo,
dentre outras.
Na figura anterior, temos o exemplo de uma tabela construda em uma
pgina da janela do documento, e observe que alteramos algumas pro-
priedades desta tabela e de algumas clulas. Na regio A alteramos a
cor de fundo das clulas e a cor da borda tambm, na regio B foram
mescladas trs clulas, resultando em uma clula s, e tambm altera-
mos a cor de fundo dela. A clula da regio C foi dividida em duas colu-
nas, e na clula da regio D inserimos uma imagem de fundo, alteramos
tambm a cor da borda de toda a tabela. Todas as alteraes foram rea-
lizadas atravs do inspetor de propriedades.
Dreamweaver 3.0
Pgina: 85
PROPRIEDADES DA TABELA E DAS CLULAS
Para especificar as propriedades das tabelas ou de alguma clula, voc
deve primeiro selecionar toda a tabela ou apenas as clulas desejadas,
depois escolher a opo Propriedades do menu Janela (isso se o ins-
petor de propriedades estiver fechado).
Para selecionar toda a tabela, clique na parte superior ou inferior da tabe-
la quando o ponteiro do mouse assumir o formato mostrado na prxima
figura (cruz), ou ento, com o cursor posicionado em alguma clula da
tabela, pressione Ctrl + A. Para selecionar todas as clulas de uma linha
ou coluna, posicione o ponto de insero na margem esquerda de uma
linha ou no alto de uma coluna e d um clique quando a seta de seleo
aparecer; para selecionar blocos de clulas, clique em uma clula e ar-
raste o mouse horizontal ou verticalmente. Se quiser selecionar clulas
no adjacentes, pressione a tecla Ctrl enquanto clica nas clulas.
Com a tabela ou clulas selecionadas, vamos ver quais as propriedades
que podem ser modificadas.
Campos do inspetor de propriedades da tabela:
_ Campo Nome da tabela: apresenta o nome da tabela.
Dreamweaver 3.0
Pgina: 86
_ Linhas e Cols: exibem o nmero de linhas e colunas na tabela.
_ L e U: utilizados para definir a largura e a altura da tabela (geralmente
no necessrio definir a altura de uma tabela).
_ Alinhar: especifica como a tabela se alinhar aos outros elementos no
mesmo pargrafo, como texto ou imagens.
_ Espao V e Espao H: especificam o nmero de pixels de espao em
branco acima, abaixo e em ambos os lados da tabela.
_ Os botes localizados ao lado dos campos Espao V e Espao H so
utilizados para Limpar as alturas das linhas, Limpar as larguras das
colunas (excluir todos os valores de altura de linha e largura de coluna
da tabela), Converter as larguras da tabela em pixels e Converter as
larguras da tabela em percentagens.
_ Preench. da clula: especifica o nmero de pixels entre o contedo da
clula e os seus limites (ou parede).
_ Espao entre clulas: especifica o nmero de pixels entre cada clula
da tabela.
_ Borda (localizada na parte superior direita do inspetor): especifica a
largura, em pixels, da borda da tabela.
_ Borda clara e Borda clara: campos utilizados para definir as cores das
bordas que tenham um efeito de realce e de sombreado, respectiva-
mente, o que conferir uma aparncia tridimensional borda (para
retornar ao sombreado em tons de cinza padro, remova os valores
das cores e mantenha os campos em branco).
_ Borda (localizada na parte inferior direita do inspetor): especifica uma
cor de borda para a tabela inteira.
_ Fundo: define a imagem ou a cor do fundo para a tabela.
OBS: Quando no forem atribudos valores especficos de espaamento
e preenchimento da clula, os navegadores exibiro a tabela como se o
espaamento da clula fosse 2 e o preenchimento da clula 1.
Campos do inspetor de propriedades das clulas da tabela:
Dreamweaver 3.0
Pgina: 87
_ Horiz: define o alinhamento horizontal do contedo de uma clula (que
pode ser esquerda, direita, no centro ou com o padro do navega-
dor).
_ Vert: define o alinhamento vertical do contedo de uma clula (que
pode ser no alto, no meio, embaixo, na linha de base ou com o padro
do navegador).
_ L e U: especificam a largura e altura das clulas selecionadas, em
pixels (para utilizar percentagens, coloque um sinal de percentual (%)
aps o valor).
_ Campo Fundo (acima): utilizado para definir uma imagem de fundo
para uma clula.
_ Campo Fundo (embaixo): utilizado para definir a cor do fundo de uma
clula.
_ Borda: especifica a cor de borda para as clulas selecionadas.
_ Boto Mesclar as clulas (que est na parte inferior esquerda do ins-
petor): combina as clulas, linhas ou colunas selecionadas e cria uma
clula.
_ Boto Dividir a clula (que est na parte inferior esquerda do inspetor):
divide a clula em duas.
_ Sem quebra: se selecionado, impede a quebra automtica de linhas
(esta opo expande as clulas, a fim de que acomodem todos os
dados medida que forem digitados).
_ Cabealho: faz com que as clulas ou linhas selecionadas compor-
tem-se como um cabealho de tabela (geralmente o contedo des-
sas clulas fica em negrito e no centro).
Dreamweaver 3.0
Pgina: 88
OUTRAS MODIFICAES NA TABELA
Com relao s tabelas, ainda podemos realizar outras operaes, como
inserir e excluir linhas e colunas, aninhar uma tabela dentro de uma clu-
la de outra tabela, dividir clulas, mesclar clulas, dentre outras.
Inserir e excluir linhas e colunas
Se voc precisar inserir mais linhas ou colunas em uma tabela j exis-
tente, o Dreamweaver permite que voc faa isso de uma maneira muito
simples. Basta clicar em uma clula na qual dever aparecer a nova
linha ou coluna e escolher uma das duas opes: no menu Modificar,
apontar para a opo Tabela e clicar em Inserir linha ou Inserir colu-
na, ou, outra opo clicar com o boto direito do mouse na clula, no
menu contextual apontar para a opo Tabela e escolher a opo Inse-
rir coluna ou Inserir linha.
Utilizando qualquer uma dessas opes, a nova linha ser inserida aci-
ma da clula selecionada e a nova coluna esquerda da clula selecio-
nada. Para especificar se as novas linhas ou colunas devero aparecer
antes ou depois da linha ou coluna selecionada, use a opo Inserir
linhas ou colunas (do menu Modificar ou do menu contextual).
Utilizando a opo Inserir linhas ou colunas, a caixa de dilogo da figura
anterior exibida, e voc poder definir o nmero de linhas ou colunas a
ser inserido, e se a linha ser inserida acima ou abaixo da clula seleci-
onada ou a coluna direita ou esquerda da clula selecionada.
Dreamweaver 3.0
Pgina: 89
OBS: Quando a tecla Tab for pressionada na ltima clula de uma tabe-
la, ser adicionada automaticamente outra linha tabela.
Para excluir uma linha ou coluna, clique em uma clula que pertena
linha ou coluna que voc deseja excluir, depois selecione as opes Ex-
cluir a linha ou Excluir a coluna do menu Modificar (submenu Tabela)
ou do menu contextual (que exibido quando damos um clique com o
boto direito do mouse).
Mesclar clulas
Mesclar clulas significa produzir uma nica clula a partir da combina-
o de clulas adjacentes e que constituam uma regio retangular. Para
mesclar clulas, selecione as clulas desejadas (lembre-se que as clu-
las selecionadas devero constituir uma regio retangular), depois clique
no boto Mesclar as clulas ( ), no inspetor de propriedades, ou en-
to no menu Modificar, aponte para a opo Tabela e clique em Mes-
clar clulas. O contedo das clulas individuais ser colocado na clula
mesclada resultante.
Na figura a seguir observe que as quatro clulas do centro da tabela
foram mescladas, resultando em uma clula s.
Dreamweaver 3.0
Pgina: 90
Dividir clulas
Voc pode dividir uma clula em um determinado nmero de linha ou
coluna, no importando se a clula foi mesclada anteriormente. Para di-
vidir uma clula, deixe o ponto de insero posicionado na clula deseja-
da, depois clique no boto Dividir as clulas ( ) do inspetor de propri-
edades, ou no menu Modificar, aponte para a opo Tabela e clique em
Dividir a clula. Na caixa de dilogo Dividir a clula que ser exibida,
escolha se a clula ser dividida em linhas ou colunas e, em seguida,
digite o nmero de linhas ou colunas.
Dreamweaver 3.0
Pgina: 91
CRIANDO E FORMATANDO UMA TABELA
Vamos criar uma tabela em um pgina do site Guia Cultural, onde esta
tabela apresentar apenas o nome dos filmes com algumas informa-
es.
Crie uma nova pgina a partir da janela do documento do segundo site
Guia Cultural (que apresenta as pginas com molduras). Com a paleta
de objetos visvel, clique no boto Inserir tabela ( ); a caixa de dilo-
go Inserir tabela ser exibida.
Nesta caixa de dilogo digite, no campo Linhas, o nmero de linhas que a
tabela ter, e no campo Colunas, especifique o nmero de colunas. No
campo Largura, especifique a largura da tabela, em pixels, ou como um
percentual da janela do navegador, e no campo Borda especifique a lar-
gura, em pixels, da borda da tabela (para que no haja borda digite 0).
Em Preenchimento da clula, especifique o nmero de pixels entre o
contedo da clula e os seus limites (ou parede), e no campo
Espaamento entre as clulas, especifique o nmero de pixels entre cada
clula da tabela. Essas propriedades podero ser alteradas posterior-
mente, como vimos no tpico anterior sobre as propriedades da tabela e
das clulas da tabela.
Dreamweaver 3.0
Pgina: 92
Na sua caixa de dilogo Inserir tabela, digite os valores como mostra a
figura anterior. Agora, na tabela que foi inserida na pgina, digite as infor-
maes nas clulas de acordo com a prxima figura.
OBS: Conforme voc vai digitando os textos, as clulas da tabela vo se
expandindo automaticamente. Para movimentar-se pela tabela, pressio-
ne a tecla Tab para deslocar-se para a prxima clula ou as setas do
teclado para mover-se entre as clulas (ou d um clique na clula dese-
jada). A combinao de teclas Shift+Tab faz voltar clula anterior.
Selecione a primeira linha e no inspetor de propriedades, marque a caixa
de seleo Cabealho, depois defina uma cor de fundo para as clulas
do cabealho. Selecione todas as outras clulas (menos as da primeira
linha), centralize-as e altere o tipo da fonte, tudo atravs do inspetor de
propriedades. Agora selecione toda a tabela e defina uma cor diferente
para as bordas claras.
Quando inserimos o contedo nas clulas, digitamos Clique aqui nas
clulas da ltima coluna. Isto significa que devemos transformar o texto
em um hyperlink, para que quando o usurio der um clique, aquelas pgi-
nas j existentes relacionadas a cada filme sejam exibidas (lembre-se
que essas pginas podero ser abertas, modificadas e salvas na pasta
Guia_Cultural_Moldura).
Dreamweaver 3.0
Pgina: 93
Assim, selecione o texto da clula da segunda linha da ltima coluna e, no
inspetor de propriedades, digite missao_impossivel.htm na caixa de texto
Vnculo (ou clique na pastinha para localizar e selecionar o arquivo).
Repita o procedimento e insira os links nas outras clulas da ltima colu-
na da tabela. Agora salve a pgina na pasta Guia_Cultural_Moldura e d
o nome de tabfilmes.htm para ela. Depois defina um ttulo para a pgina,
como por exemplo Relao dos Filmes.
Voc tambm pode fazer com que o boto da barra de navegao (o
boto Filmes) aponte para essa pgina, ou seja, quando ele receber um
clique, a pgina relao de Filmes ser aberta.
Nos captulos posteriores iremos estudar as Camadas, onde as tabelas
e camadas permitem controlar a posio dos elementos na pgina, e
voc ver que com o Dreamweaver fcil converter um layout de tabela
em um layout de camada, mas as camadas no contam com suporte
nos navegadores 3.0 e menos avanados.
Dreamweaver 3.0
Pgina: 94
CRIANDO FORMULRIOS
Os formulrios so bastante utilizados nos sites da Web, pois atravs de-
les possvel coletar informaes de vrias pessoas, solicitar a opinio
dos visitantes, fazer uma votao onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulrios permitem
coletar informaes dos usurios. As respostas fornecidas pelos visitan-
tes so armazenadas, e depois voc pode acess-las e compar-las.
OS OBJETOS DE FORMULRIOS
Os formulrios so compostos por vrios objetos, onde uns oferecem
opes para serem clicados e outros exibem campos de texto editveis
(atravs da utilizao de comportamentos, voc poder validar as infor-
maes digitadas pelo usurio). A prxima figura exibe um simples for-
mulrio que foi criado em uma pgina.
Dreamweaver 3.0
Pgina: 95
Os itens numerados na figura anterior representam alguns objetos de
formulrio, os quais so denominados:
1, 2, 5 e 7 Campo de texto
3 e 4 Menu de lista
6 - Boto de opo
8 - Boto
Alm desses quatro objetos, ainda temos: caixa de seleo, campo de
arquivos, campo de imagens, campo oculto e menu de salto.
Campos de texto: tambm chamados caixas de texto, so utilizados
para coletar informaes dos usurios, onde estes podero digitar qual-
quer tipo de texto: alfabtico ou numrico. O texto digitado pode ser exibi-
do como uma linha simples ou linhas mltiplas (exibem uma barra de
rolagem).
Botes: realizam tarefas quando so clicados, ou seja, so aquilo que
faz o formulrio fazer algo, como enviar as informaes e redefinir os
dados dos formulrios.
Campos de imagens: podem ser utilizados no lugar do boto Enviar,
onde este pode ser substitudo por um boto de imagens.
Caixas de seleo: permitem que o usurio faa uma ou mais selees
em um conjunto de opes.
Botes de opo: enquanto as caixas de seleo podem aparecer indi-
vidualmente ou em grupos, os botes de opo aparecem sempre em
grupos. A seleo de um dos botes do grupo cancela a seleo de
todos os outros.
Menus de lista: apresentam um conjunto de valores que os usurios
podero escolher.
Campos de arquivos: permitem que o usurio procure os arquivos nos
discos rgidos, carregando-os como dados do formulrio.
Campos ocultos: permitem armazenar informaes (como o destinat-
rio dos dados do formulrio ou o assunto do formulrio) que no forem
relevantes ao usurio, mas que sero utilizadas pelo aplicativo que pro-
cessa o formulrio.
Menu de salto: permite inserir um menu no qual cada opo se vincula
a um documento ou arquivo.
Dreamweaver 3.0
Pgina: 96
INSERINDO OBJETOS NA PGINA
Vamos agora criar uma pgina que conter um formulrio. Na janela de
documento do site Guia Cultural (com molduras), clique na opo Novo
do menu Arquivo para criar uma nova pgina. Salve a pgina com o
nome formulario.htm (na pasta Guia_Cultural_Moldura) e depois defina o
seguinte ttulo para a pgina: Formulario.
OBS: Antes de inserir o formulrio, pressione Enter e deixe o cursor
posicionado no segundo pargrafo, pois acima do formulrio iremos digitar
algum texto.
Para criar um formulrio, clique na opo Formulrio do menu Inserir,
ou ento, na paleta de objetos, selecione o painel Formulrios e depois
clique no boto Inserir formulrio. Uma borda tracejada vermelha ser
inserida na pgina (se depois de inserir um formulrio voc no estiver
vendo nada, verifique se a opo Elementos invisveis do menu Exibir
est ativada).
Esta borda tracejada representa o formulrio propriamente dito, e todos
os objetos de formulrio sero inseridos dentro desta rea retangular
tracejada. Por padro, o formulrio ocupa toda a largura da pgina, e a
altura determinada pelo contedo que voc coloca dentro das bordas
do formulrio.
Todos os objetos que compem o formulrio devem apresentar um rtu-
lo, assim os usurios sabero, por exemplo, o que digitar em cada cam-
po de texto e para que serve os outros campos do formulrio.
OBS: Para organizar e distribuir melhor os objetos dentro do formulrio,
voc poder colocar uma tabela no formulrio e inserir os campos do
formulrio nas clulas da tabela.
Dreamweaver 3.0
Pgina: 97
Com o cursor posicionado no canto esquerdo do formulrio, digite Nome:
(aplique o estilo negrito) e depois clique no boto Inserir campo de tex-
to ( ) do painel Formulrio da paleta de objetos. Exiba tambm o ins-
petor de propriedades.
As propriedades do campo de texto (exibidas no inspetor de proprieda-
des) so as seguintes:
Campo de texto: local para voc digitar um nome ao campo. Todos os
campos de texto devem ter um nome exclusivo.
_ Larg. do caractere: define o nmero mximo de caracteres que po-
dem ser exibidos no campo (comprimento do campo).
_ N mx. de caract: define o nmero mximo de caracteres que podem
ser digitados no campo, como por exemplo, definir que os cdigos
postais devem ter oito dgitos.
_ Tipo Linha simples: utilizado quando voc espera que a resposta dado
pelo usurio ser curta.
_ Tipo Multi-linha: utilizada quando a resposta a ser dada pelo usurio
mais longa.
_ Tipo Senha: exibir um campo de texto do tipo Linha simples para que
o usurio digite uma determinada senha, sendo que o navegador exi-
bir marcadores ou asteriscos em vez dos caracteres que forem
digitados.
Dreamweaver 3.0
Pgina: 98
_ Valor inicial: o texto digitado neste campo ser exibido quando o formul-
rio for carregado pela primeira vez (por exemplo: Digite seu nome aqui).
No campo de texto que voc inseriu, digite camponome no Campo de
texto, digite 50 no campo Larg. do caractere e selecione o tipo Linha.
Agora posicione o ponto de insero aps o Campo de texto camponome
e digite E-mail:, insira outro objeto Campo de texto onde o usurio ir
digitar o seu endereo de e-mail (propriedades desse campo de texto -
nome do campo: campoemail, larg. do caractere: 30, tipo Linha).
Pressione a tecla Enter e no prximo pargrafo digite Data de nasci-
mento:. Clique no boto Inserir Lista/menu ( ) do painel Formulrio
da paleta de objetos.
No inspetor de propriedades, digite listadia no campo Lista/menu (este
campo necessrio e o seu nome deve ser exclusivo). Em Tipo, deixe a
opo Menu selecionada (a opo Lista permite definir uma altura (n-
mero de itens exibidos simultaneamente) e indicar se o usurio poder
selecionar diversos itens da lista).
Agora clique no boto Valores da lista para abrir a caixa de dilogo de
mesmo nome. Nesta caixa voc ir definir quais os itens que sero exibi-
dos no menu pop-up, sendo que cada item possui um identificador (o
texto que aparece na lista) e um valor (o que ser enviado ao aplicativo
de processamento, se o item for selecionado). Se no for especificado
um valor, apenas o identificador ser enviado ao aplicativo de
processamento.
Digite o nmero 1, clique no boto com o sinal de adio (+) e digite o
nmero 2, v inserindo os nmeros at chegar no 31. Para remover um
item da lista selecione-o e clique no boto de subtrao (-). Os itens
aparecero na ordem em que aparecem na caixa de dilogo Valores da
lista, e o primeiro item da lista o que aparecer quando a pgina for
carregada em um navegador. Utilize os botes de setas acima e abaixo
para reorganizar os itens na lista.
Dreamweaver 3.0
Pgina: 99
Agora, no inspetor de propriedades, selecione o nmero 1 no campo
Selecionados inicialmente (olhe prxima figura). Isso far com que, quando
a pgina for aberta no navegador, o objeto listadia exiba o nmero 1 (se
quiser que o objeto aparea vazio, no selecione nada no campo Seleci-
onados incialmente).
Posicione o ponto de insero aps o objeto Lista/menu (denominado
listadia) e insira outro objeto de formulrio Lista/menu. No inspetor de
propriedades desse objeto, digite listames no campo Lista/menu, seleci-
one o Tipo Menu e como valores da lista, digite os meses do ano. No
campo Selecionados inicialmente do inspetor de propriedades, selecio-
ne a palavra janeiro.
Dreamweaver 3.0
Pgina: 100
Aps o campo listames, digite 19 e insira um Campo de texto, onde o
usurio ir digitar o ano de seu nascimento. No inspetor de propriedades,
digite 6 no campo Larg. do caractere, 2 no campo N max. de caract e
digite campoano no Campo de texto.
Pressione a tecla Enter e digite no incio do pargrafo o texto Opes de
uso da Internet:. Com o cursor na frente do texto, clique no boto Inse-
rir boto de opo ( ) do inspetor de objetos, do lado direito do boto
digite a primeira opo: Estudo, depois d um clique no boto para
selecion-lo.
Dreamweaver 3.0
Pgina: 101
No inspetor de propriedades, como mostra a figura anterior, digite
opcoesinter na caixa de texto Boto de opo (todos os botes de op-
o que fizerem parte de um mesmo grupo devero ter o mesmo nome).
O campo Valor selecionado o valor que ser enviado ao aplicativo de
processamento (um roteiro CGI, por exemplo) caso o boto seja seleci-
onado. Digite botaoestudo neste campo (cada boto de opo em um
grupo deve ter um Valor selecionado diferente).
O outro campo, Estado inicial, especifica se o boto estar ativo ou no
quando o formulrio for carregado pela primeira vez. Apenas um boto
de um grupo pode apresentar o estado inicial Ativo.
Agora insira mais trs botes de opo como mostra a prxima figura.
Cada boto deve apresentar o mesmo nome no campo Boto de opo
(opcoesinter) e no campo Valor selecionado, o nome botaopesquisa,
botaotrabalho e botaolazer.

No prximo pargrafo digite Comentrios: e logo abaixo insira um objeto
Campo de texto, onde este deve apresentar as seguintes propriedades:
Larg. do caractere: 85, Tipo: Multi-linha, Nmero de linhas: 4, nome do
Campo de texto: campocoment.
Dreamweaver 3.0
Pgina: 102
No nosso formulrio agora s falta inserirmos um boto que quando for
clicado enviar os dados contidos no formulrio, e outro que apagar os
dados do formulrio.
Aps o campo de texto referente a Comentrios, clique em Inserir bo-
to ( ) do painel Formulrio da paleta de objetos. Um boto ser inse-
rido, posicione o ponto de insero direita deste boto e clique nova-
mente em Inserir boto. O primeiro boto ser o Enviar e o segundo o
Redefinir, vamos ento configur-los.
Selecione o primeiro boto e no inspetor de propriedades, deixe os cam-
pos Boto e Denominao com a palavra Enviar. Agora selecione o se-
gundo boto e no campo Boto digite Redefinir, depois selecione, no cam-
po Ao, a opo Redefinir o formulrio.
O formulrio da pgina j est com todos os objetos inseridos e defini-
dos. No primeiro pargrafo, antes do formulrio, digite o seguinte texto:
Preencha os campos abaixo, e envie suas dvidas, sugestes ou recla-
maes. Centralize e formate o texto, depois insira uma imagem ou cor
de fundo na pgina.
Dreamweaver 3.0
Pgina: 103
VALIDANDO CAMPOS DO FORMULRIO
Como dissemos anteriormente, voc poder validar determinados cam-
pos medida que o usurio estiver preenchendo o formulrio. Como
exemplo, vamos validar o campo de texto onde o usurio dever digitar o
endereo do seu e-mail (que o campoemail), ou seja, o Dreamweaver
verificar se o campoemail contm o sinal @, j que todo endereo ele-
trnico deve apresent-lo.
Selecione o campo de texto campoemail e clique na opo Comporta-
mentos do menu Janela. Na janela Comportamentos, d um clique no
boto com o sinal de adio (+); um menu de contexto ser apresentado
e neste menu selecione a opo Validar o formulrio. Na caixa de dilo-
go de mesmo nome, selecione as opes de acordo com a prxima
figura e depois clique no boto OK.
Com este procedimento voc inseriu, na janela Comportamentos, um
Evento (chamado onblur) e uma ao.
OBS: Como voc pode ver na figura anterior, outros campos podem ser
validados. Se a caixa Necessrio for selecionada, significa que o campo
deve necessariamente receber um valor dado pelo usurio, pois o cam-
po no poder ficar em branco, vazio.
Exiba esta pgina do formulrio na janela do navegador e digite um ende-
reo de correio eletrnico no campo E-mail onde este endereo no con-
tenha o sinal @, em seguida tecle Tab (ou clique em um outro campo) e
veja que uma caixa de mensagem ser exibida, dizendo ou usurio que
aquele campo requer que um endereo de e-mail vlido seja digitado.
Dreamweaver 3.0
Pgina: 104
Clique no boto OK e feche a janela do navegador.
Aps o usurio clicar no boto OK, uma janela com alguma mensagem
especificada por voc poder ser exibida. Com o campoemail seleciona-
do, clique no boto com o sinal (+) da janela Comportamentos e, no menu
de contexto, selecione a opo Mensagem pop-up. Na caixa de texto
Mensagem pop-up que ser apresentada, insira o texto: Digite um ende-
reo de e-mail vlido no campo E-mail, depois clique no boto OK.
Abra novamente esta pgina no navegador e digite um endereo incorre-
to no campo de e-mail, pressione a tecla Tab e veja o resultado.
Agora que a pgina de formulrios est pronta, voc dever acrescentar
mai s um i tem na barra de navegao que se encontra na
molduraesquerda, pois quando o usurio clicar neste item (no boto), a
pgina Formulrios dever ser exibida. Os quatro arquivos de imagens
que constituiro os quatro estados do boto j devero estar prontos.
Como exemplo, o nome do boto que aparecer na barra de navegao
pode ser Consulte-nos. Para inserir o boto na barra de navegao, se-
lecione-a e depois no menu Modificar, clique na opo Barra de nave-
gao.
Dreamweaver 3.0
Pgina: 105
Depois exiba o site no navegador e teste os hyperlinks.
FAZENDO O FORMULRIO FUNCIONAR
Toda vez que um usurio preenche os campos do formulrio e clica no
boto Enviar, os dados vo para o servidor e um script CGI (ou outro
script personalizado) executado, pois s assim voc poder recuperar
e acessar os dados resultantes do formulrio. Mas, no Dreamweaver
no possvel escrever o script (e nem o Dreamweaver o far para voc!).
Os formulrios so enviados por um dos dois mtodos: GET, que envia
os resultados do formulrio no URL enviado para o script; e POST, que
codifica o material enviado para o script; estas duas opes aparecem
no inspetor de propriedades do formulrio. Na janela do documento, d
um clique na borda do formulrio para selecion-lo; o inspetor exibir as
propriedades do formulrio, onde necessrio escolher o mtodo (GET
ou POST) e a ao (o URL do script que processar o formulrio deve
aparecer nesta caixa de texto). Consulte seu programador ou adminis-
trador de sistema para voc saber determinar qual mtodo deve ser uti-
lizado.
Dreamweaver 3.0
Pgina: 106
CRIANDO FOLHAS DE ESTILOS
As folhas de estilos so uma tima ferramenta utilizadas principalmente
para a formatao de textos. Voc pode definir estilos (como o tipo de
fonte, cor, tamanho, etc), atribuir um nome ao estilo e depois aplicar na
pgina, onde uma folha de estilo representa um grupo de estilos, e pode
estar vinculada a vrias pginas. A grande vantagem de trabalhar com
folhas de estilos que quando voc altera ou atualiza algum atributo do
estilo, todos as pginas que utilizam essa folha de estilos especfica se-
ro tambm automaticamente atualizadas. Sendo assim, basta voc cri-
ar uma folha de estilo e utiliz-la em quantas pginas da Web quiser.
Na verdade, quando voc cria uma folha de estilos, voc est criando um
arquivo de texto (.css) que contm as especificaes de estilos e
formatao, e para definir as folhas de estilos, utilizaremos a caixa de
dilogo Editar a folha de estilos, a qual permite abrir uma folha de estilos
j existente ou criar uma nova.
Nota: As folhas de estilos funcionam somente em navegadores 4.0 ou
mais avanados.
Veja a seguir um exemplo de uma folha de estilo, a qual especifica que o
ttulo H1 tem o tamanho de fonte 20, tipo Arial, negrito e a cor vermelha.
H1 {FONT: 20pt Arial
font-weight: bold
color: red}
Voc poder criar um estilo novo (e dar um nome a ele) ou ento redefinir
algum rtulo (tag) de HTML, de modo que o rtulo mantenha suas propri-
edades atuais e inclua outras novas (como o rtulo H1 do exemplo ante-
rior). Sendo assim, voc dever conhecer quais os rtulos que represen-
tam os pargrafos, tabelas, ttulos, etc. A seguir voc encontra os rtulos
que mais aparecem no cdigo HTML e a que eles se referem.
<p>: pargrafo
<br>: quebra de linha
<hn>: ttulo, onde n o nmero do ttulo
<table>: tabela
<dt>: clula da tabela
Dreamweaver 3.0
Pgina: 107
<tr>: linha da tabela
<img>: imagem
<body>: todo o contedo da pgina
<form>: formulrio
<font>: fonte
<a>: vnculo
Esses rtulos, alm de serem exibidos na janela Inspetor de Origem HTML,
tambm podem ser vistos na parte inferior esquerda (chamada de seletor
de rtulos) da prpria janela do documento. Abra algumas pginas e veja
os rtulos dos elementos que esto inseridos na pgina.
OBS: Para selecionar um rtulo completo (inclusive o seu contedo, se
houver), clique em um rtulo do seletor de rtulos.
No exemplo da figura anterior, com o ponto de insero posicionado em
uma clula da tabela, um clique no rtulo <td> seleciona esta clula.
Lembre-se que qualquer ao realizada na pgina da janela do docu-
mento imediatamente refletida no cdigo da pgina, ou seja, tudo que
voc fizer ou alterar na pgina tambm feito e alterado no cdigo. Na
figura acima, quando selecionamos a clula da tabela, se observarmos
na janela do cdigo, a mesma clula tambm estar selecionada.
Dreamweaver 3.0
Pgina: 108
Assim, uma maneira fcil de conhecer a linguagem HTML trabalhar
com a janela Inspetor de Origem HTML aberta, assim voc poder ver
como tudo que voc faz na pgina transformado em cdigo HTML.
Depois de conhecer um pouco mais sobre os rtulos, vamos ver como
podemos criar uma folha de estilos. Selecione a opo Estilos CSS do
menu Janela ou clique no boto Estilos CSS do Iniciador (ou Mini-inicia-
dor); voc ver a janela Estilos CSS (CSS - Cascading Style Sheets, ou
Folhas de Estilo em Cascata).
Dreamweaver 3.0
Pgina: 109
Para criar um estilo novo, clique no boto Novo estilo, como mostra a
figura anterior, para que a janela Novo estilo seja apresentada.
Como dissemos anteriormente, voc poder criar um estilo novo, redefinir
algum rtulo de HTML ou definir a formatao para uma determinada
combinao de rtulos. Assim, quando voc clica no boto Novo estilo,
estas trs opes sero exibidas na janela Novo estilo, e uma delas de-
ver ser selecionada.
Aps selecionar uma opo, na caixa de texto Nome voc deve digitar
um nome, rtulo ou seletor de rtulos para o novo estilo. Os nomes de
estilos devem iniciar com um ponto, e caso o ponto no seja colocado, o
Dreamweaver o digitar. Se voc for redefinir um rtulo de HTML (2 op-
o da janela Novo estilo), digite um rtulo HTML ou escolha algum no
menu pop-up, e se for definir a formatao de vrios rtulos (3 opo),
digite todos eles, separados por vrgulas. Depois clique no boto OK.
Na prxima caixa de dilogo, Definio de estilo, selecione uma catego-
ria no lado esquerdo da janela e escolha as definies de formatao do
novo estilo CSS no painel correspondente. Deixe alguns atributos em
branco caso no sejam importantes para o estilo; os atributos que no
aparecerem na janela do documento so marcados com um asterisco
(*). Depois de clicar em OK, voc ver que o novo estilo criado j apare-
ce na janela Estilos CSS.
Dreamweaver 3.0
Pgina: 110
Para aplicar o novo estilo em um texto da pgina, selecione o texto dese-
jado. Na janela Estilos CSS, selecione o estilo e depois clique no boto
Aplicar (canto inferior esquerdo). Se a caixa que est na frente deste
boto estiver selecionada, qualquer texto que voc selecionar na pgina
imediatamente receber a formatao do estilo, para no acontecer isto,
deixe a caixa desmarcada.
Voc viu como criar um estilo para pginas individuais, j que o estilo
criado na figura anterior s pode ser usado na pgina onde ele foi criado.
Para criar estilos que possam ser aplicados em mais de uma pgina,
necessrio criar uma folha de estilos linkada ou importada.
Uma folha de estilo um arquivo que deve apresentar a extenso css e
conter um ou mais estilos. Para criar ou vincular uma folha de estilos
CSS externa, clique no cone Abrir a folha de estilos da janela Estilos
CSS.
Na caixa de dilogo Editar a folha de estilos, clique no boto Vnculo. A
caixa de dilogo Vincular a folha de estilo externa ser exibida, e nela
voc dever localizar uma folha de estilo j existente (clicando no boto
Procurar) ou criar uma nova folha de estilos externa, onde voc dever
digitar um nome de arquivo que contenha a extenso .css. Depois deve-
r selecionar uma das duas opes: Vnculo (para utilizar o arquivo que
est sendo criado como uma folha de estilos linkada) ou Importar (para
que o novo arquivo seja utilizado como uma folha de estilos importada).
Embora ambas as opes passem todos os estilos da folha de estilos
CSS externa para o documento, a opo Vnculo oferece mais recursos
e funciona com mais navegadores.
Como voc pode ver na figura anterior, uma nova folha de estilos (prop.css)
ser criada, e ser adicionada com a opo Vnculo. Depois destas defi-
nies voc deve clicar no boto OK e, em seguida, ver que a caixa de
dilogo Editar a folha de estilos exibir o nome da folha de estilos (e tam-
bm do estilo que j havia sido criado). Observe que o arquivo (a folha de
estilo) ainda est vazio.
Dreamweaver 3.0
Pgina: 111
Vamos agora inserir contedo (os estilos) no arquivo prop.css. Com o
nome da folha de estilo selecionado na caixa de dilogo Editar a folha de
estilos, clique no boto Editar, aparecer uma caixa de dilogo de mes-
mo nome da folha de estilos. Clique no boto Novo para definir os estilos
na folha de estilos prop.css. Na caixa de dilogo Novo estilo que voc j
conhece, defina o novo estilo e siga os mesmos procedimentos descri-
tos anteriormente no tpico referente criao de estilos para uma nica
pgina.
Quando terminar de definir os estilos do arquivo prop.css (voc poder
definir quantos estilos quiser), clique no boto Salvar e depois em Con-
cludo. Desta maneira, esta folha de estilo (a prop.css) poder ser aberta
em outras pginas do site, atravs da janela Estilos CSS, e alm de abri-
la, voc poder edit-la.
OBS: Se um texto j foi manualmente formatado e voc aplicar um estilo
CSS neste mesmo texto, a formatao do estilo ser ignorada. Desta
maneira, o estilo deve ser aplicado em um texto que no apresente ne-
nhum tipo de formatao.
Dreamweaver 3.0
Pgina: 112
CRIANDO ESTILOS HTML
No captulo anterior aprendemos a criar as folhas de estilos, onde, uma
vez definido o arquivo .css e o seu contedo, este pode ser aplicado em
quaisquer pginas. Os estilos HTML tambm so criados para facilitar a
formatao de textos, mas ao contrrio das folhas de estilos, os textos
formatados com os estilos HTML so no atualizados automaticamente
quando o estilo alterado. Assim, quando voc modificar um estilo HTML,
voc precisar reaplic-lo.
possvel criar um estilo HTML a partir de um texto j formatado ou
ento criar um estilo a partir do zero, e tambm o estilo poder ser criado
para modificar apenas um texto que esteja selecionado ou um pargrafo
inteiro. A criao e aplicao dos estilos ser feita atravs da janela Es-
tilos HTML. Para exibir tal janela, selecione a opo Estilos HTML do
menu Janela ou ento clique no boto Estilos HTML do Iniciador ou do
Mini-iniciador.
Como voc pode ver na figura anterior, os estilos que apresentam o sm-
bolo de pargrafo () alteram a formatao do pargrafo inteiro, e os
estilos com o smbolo da letra a sublinhada (a) formatam apenas o texto
que estiver selecionado.
Para criar um novo estilo HTML a partir do zero, clique no cone de Novo
estilo da paleta de estilos HTML. Na caixa de dilogo Definir o estilo HTML
que ser apresentada, digite um nome para o estilo que est sendo cria-
do, escolha se deseja aplicar o estilo HTML ao texto selecionado ou ao
pargrafo inteiro e ajuste a formatao. Para que a caixa de dilogo volte
s opes padres, clique no boto Limpar, e para concluir clique no
boto OK.
Dreamweaver 3.0
Pgina: 113
Se voc j tem um texto formatado e deseja criar um estilo HTML a partir
da formatao deste texto existente, selecione-o e depois clique no bo-
to Novo estilo da janela Estilos HTML. Na caixa de dilogo Definir o
estilo HTML, a formatao do texto selecionado j estar especificada,
basta voc definir um nome para o novo estilo e clicar no boto OK.
Para editar um estilo HTML existente, clique com o boto direito do mouse
no estilo e selecione a opo Editar do menu contextual (no dever haver
nenhum texto selecionado na pgina e a caixa na frente da opo Aplicar,
da janela Estilos HTML, dever estar desmarcada). Na caixa de dilogo
Definir o estilo HTML, faa as alteraes e clique no boto OK. Lembre-se
que quando um estilo HTML for modificado, o Dreamweaver no atualizar
automaticamente o texto que tiver sido formatado com esse estilo anterior-
mente.
Para aplicar os estilos HTML existentes, selecione o estilo desejado na
paleta de estilos HTML. Se a caixa de seleo Aplicar, localizada na parte
inferior da paleta, estiver selecionada, clique uma vez no estilo, e se ela
no estiver selecionada, clique no estilo e depois clique em Aplicar.
Na paleta de estilos HTML, as duas primeiras linhas Limpar o estilo do
pargrafo e Limpar o estilo da seleo devem ser utilizados quando voc
quiser limpar a formatao do texto, para isso, selecione o texto formatado
e clique em uma das duas opes.
OBS: As duas opes (Limpar o estilo do pargrafo e Limpar o estilo da
seleo) podem ser utilizadas para remover qualquer formatao, mes-
mo que esta tenha sido aplicada atravs da paleta de estilos HTML ou do
inspetor de propriedades.
Para excluir um estilo da paleta de estilos HTML, verifique se a caixa
Aplicar est desmarcada, depois selecione o estilo HTML que deseja re-
mover e clique no cone de Excluir o estilo (lata de lixo), no canto inferior
direito da paleta.
OBS: Todos os estilos HTML criados so armazenados no arquivo
styles.xml, que se encontra na pasta Library (para visualiz-lo, selecione
a opo Arquivos do site do menu Janela para abrir a janela Site). Este
arquivo poder ser copiado, excludo, etc, como qualquer outro arquivo
do site, e por isso que os estilos HTML podem ser reutilizados por
quaisquer pginas que utilizem a paleta de estilos HTML.
Dreamweaver 3.0
Pgina: 114
TRABALHANDO COM CAMADAS
As camadas so bastante teis, pois os elementos que voc inserir nas
camadas podem ser facilmente reposicionados, garantindo um
posicionamento exato quando forem exibidos no navegador. Nas cama-
das podemos inserir textos, imagens, formulrios, outras camadas, ou
seja, qualquer elemento que pode ser colocado em uma pgina tambm
poder ser colocado em uma camada. E uma coisa muito interessante
sobre as camadas que voc pode colocar uma camada dentro de ou-
tra ou pode criar camadas que se sobrepem.
Dentre as propriedades das camadas, o ndice z determina a ordem de
empilhamento da camada, e as camadas com nmeros z mais eleva-
dos aparecero acima das camadas com nmeros menores, e foi as-
sim que posicionamos as trs camadas no exemplo da figura anterior.
No cdigo HTML os rtulos que as definem so <div> (insere uma que-
bra de pargrafo depois da camada) ou <span>. Os rtulos <layer> e
<ilayer>, que tambm representam as camadas, so suportados ape-
nas pelo Netscape.
Dreamweaver 3.0
Pgina: 115
Para criar camadas, selecione a opo Camada do menu Inserir (uma
camada padro ser inserida onde o cursor estiver posicionado) ou clique
no boto Desenhar camadas ( ) da paleta de objetos. Quando voc
clica no boto Desenhar camadas o ponteiro do mouse transforma-se em
duas pontas, voc dever arrast-lo no local desejado da pgina para de-
senhar a camada. Na janela do documento, aparecer um marcador no
canto superior esquerdo da pgina para cada camada criada.
AS PROPRIEDADES DAS CAMADAS
As propriedades das camadas so especificadas atravs do inspetor de
propriedades. Voc poder definir um nome e uma posio para a cama-
da, alm de outras opes descritas a seguir.
Id. da camada: campo para especificar o nome que identificar a camada.
E e A: especificam a distncia da camada em relao margem esquer-
da (E) e a distncia da camada em relao margem superior (A).
L e U: especificam a largura e altura da camada.
ndice Z: determina a ordem de empilhamento da camada. As camadas
com nmeros mais elevados aparecero acima das camadas com n-
meros menores.
Vis: determina se a camada ser visvel ou no quando a pgina for car-
regada.
Rtulo: determina se a camada ter o rtulo SPAN, DIV, LAYER ou ILAYER.
Estouro: se o contedo inserido em uma camada for maior que as di-
menses dessa camada, voc poder escolher uma dentre as seguin-
tes opes - visible (visvel): a camada se expandir para que todo o
contedo possa ser visualizado, hidden (oculta): o contedo que no
couber na camada ser cortado e portanto no ser exibido, scroll: adici-
ona barras de rolagem camada, auto: quando o contedo for maior que
o tamanho da camada, a barra de rolagem ser exibida.
Dreamweaver 3.0
Pgina: 116
Corte: especifica qual a parte da camada que ser visvel, sendo que o
restante ser ocultado (e no excludo). Voc dever definir medidas a
partir da parte superior da camada (A e X) e a partir da margem esquerda
da camada (E e D). E: esquerda, A: alto, superior, D: direita, X: inferior
(voc pode ter uma imagem na camada e querer que somente uma parte
especfica da imagem seja exibida, ento a imagem ser cortada).
Alm do inspetor de propriedades, a janela Inspetor de camadas tam-
bm ser bastante utilizada, pois alm de listar todas as camadas, faci-
lita a seleo das camadas, o aninhamento, a alterao da ordem de
empilhamento, a visibilidade, etc. Para exibir o inspetor de camadas, se-
lecione a opo Camadas do menu Janela.
Com relao visibilidade, se no houver um cone representando um
olho (como mostra a figura anterior), a camada herdar as definies de
visibilidade da camada-me. Quando as camadas no esto aninhadas,
a camada-me o corpo do documento, que est sempre visvel. No
inspetor de camadas voc ainda poder renomear uma camada dando
um clique duplo no nome dela, digitando outro e pressionando a tecla
Enter.
Dreamweaver 3.0
Pgina: 117
A caixa de seleo Evitar sobreposio do inspetor de camadas evita
ou no que as camadas se sobreponham. Se esta opo estiver seleci-
onada, uma camada no poder ser criada na frente de outra, movida ou
redimensionada sobre outra.
OBS: Algumas verses dos navegadores podem no exibir as camadas
corretamente, e para que a pgina com camadas seja exibida com preci-
so nos navegadores tanto da verso 3.0 quanto da verso 4.0, voc
poder converter as camadas em tabela. Mas o Dreamweaver no po-
der criar uma tabela se a pgina tiver camadas sobrepostas, neste caso
assim utilize a opo Evitar sobreposies.
Para alterar as propriedades de uma determinada camada (ou mesmo
exclu-la, arrast-la ou redimension-la utilizando o mouse), esta dever
estar selecionada. Uma camada pode ser selecionada atravs de vrias
maneiras:
_ d um clique na camada e depois clique na ala de seleo que
exibida na parte superior esquerda da camada;
_ no inspetor de camadas, clique no nome da camada que deseja sele-
cionar;
_ posicione o ponteiro do mouse na borda da tabela e quando ele assu-
mir o formato de uma cruz com setas, d um clique;
_ clique no rtulo da camada presente na parte inferior da janela do do-
cumento.
Com a camada selecionada voc tambm poder redimension-la (ar-
rastando uma das oito alas) ou mov-la (arrastando a ala de seleo
para uma nova posio).
Neste captulo voc viu como criar uma camada e alterar suas proprie-
dades, no captulo seguinte, Criando Linhas de Tempo (ou Timelines, como
eram chamadas na verso anterior do Dreamweaver), iremos utilizar as
camadas para criar uma animao.
Dreamweaver 3.0
Pgina: 118
AS LINHAS DE TEMPO
Com as linhas de tempo temos a possibilidade de inserir animaes nas
pginas da Web, onde estas animaes alteram a posio, o tamanho, a
visibilidade e a ordem de empilhamento das camadas conforme o tempo
vai passando, e o melhor de tudo que voc no precisa escrever ne-
nhum cdigo.
As linhas de tempo aceitam trs tipos de objetos: camadas, imagens e
comportamentos, e elas utilizam o HTML dinmico para alterar as propri-
edades de camadas e imagens. O DHTML, ou HTML dinmico, significa
que voc pode alterar ou mover camadas mesmo depois que a pgina
foi carregada no navegador, e isso que as linhas de tempo fazem, ani-
mam e movimentam as camadas ao longo do tempo.
OBS: Como as linhas de tempo trabalham com as camadas, elas s
podem ser visualizadas em um navegador 4.0 ou superior.
INSPETOR LINHAS DE TEMPO
Ser atravs do Inspetor Linhas de tempo que voc vai criar e modificar
as animaes. Para exibi-lo, selecione a opo Linhas de tempo do
menu Janela. No inspetor voc ir controlar o tempo que cada camada
ser exibida, a velocidade de reproduo da animao (quadros por se-
gundo), os quadros primrios (keyframes), etc.
Dreamweaver 3.0
Pgina: 119
Se a opo Execuo automtica do inspetor Linhas de tempo estiver
selecionada, a linha de tempo ser executada automaticamente assim
que a pgina for carregada em um navegador. J a opo Loop provoca
a repetio indefinida da linha de tempo quando a pgina estiver aberta
em um navegador.
ADICIONANDO E MOVENDO CAMADAS
Vamos inserir uma camada em uma nova pgina e ver como podemos
anim-la. Estando com uma nova pgina aberta na janela do documento,
insira uma camada na pgina e acrescente uma cor de fundo camada,
depois abra o inspetor de linhas de tempo. Arraste a ala de seleo da
camada para o canal 1 do inspetor linhas de tempo, como mostra a pr-
xima figura.
Outra maneira de adicionar uma camada no inspetor selecion-la e
depois no menu Modificar, apontar para Linha de tempo e clicar em
Adicionar objeto na linha de tempo.
Dreamweaver 3.0
Pgina: 120
OBS: Os nicos objetos que voc adicionar nas linhas de tempo so as
camadas e as imagens. Se voc quiser movimentar outro objeto ou ma-
terial, ter que adicion-lo a uma camada e movimentar a camada, e no
o objeto diretamente.
Por enquanto s adicionamos a camada no inspetor, agora vamos faz-
la movimentar. No inspetor de linhas de tempo, clique no marcador de
quadro primrio que est no final da barra de animao da camada (exa-
tamente no quadro 15). O cabeote de execuo (barra vermelha) tam-
bm movido para essa posio.
OBS: Cada bolinha que aparece na barra de animao chamada
Quadro primrio, sendo que cada quadro primrio um ponto onde algo
acontece. Por exemplo, se voc quiser que em determinado momento
da animao uma camada altere sua dimenso, adicione um quadro pri-
mrio no local desejado e determine a ao.
Com o cabeote de execuo no ltimo quadro primrio, arraste a ala
de seleo da camada pela pgina e solte-a em uma posio que voc
quer que ela termine. Voc ver que uma linha ser desenhada desde a
posio de incio da camada at a sua nova posio.
Agora para reproduzir a linha de tempo, clique no boto Rebobinar para
que o cabeote de execuo volte para o comeo. V clicando no boto
Executar e veja a camada se movendo pela pgina.
Dreamweaver 3.0
Pgina: 121
Para que a camada no se movimente s em linha reta, vamos adicionar
outros quadros primrios na linha de tempo da camada. Primeiro arraste
o quadro primrio final para ampliar a barra de animao (at o quadro
30, por exemplo), agora clique em algum quadro no meio da barra de
animao e, no menu Modificar, aponte o mouse para a opo Linha
de tempo e clique em Adicionar quadro primrio. Arraste a ala de
seleo da moldura e faa um outro caminho.
Clique novamente no boto Rebobinar do inspetor e reproduza a linha de
tempo para ver como ser o novo movimento da camada (para reprodu-
zir v clicando no boto Executar). Voc poder acrescentar outros qua-
dros primrios na barra de animao e modificar o caminho da camada.
OBS: A barra de animao, alm de poder ser esticada, ou seja, ter
seu comprimento aumentado, poder tambm ser movida para qualquer
lugar do inspetor. Para mov-la, clique em algum quadro da barra (desde
que no seja um quadro primrio) para que a barra fique selecionada,
depois disso arraste-a para uma nova localizao. Estando com a barra
de animao selecionada, tambm possvel inserir um quadro primrio
pressionando a tecla Ctrl e clicando no quadro desejado (assim voc
no precisar utilizar a opo de menu).
Vamos considerar que voc tenha criado pginas que falam sobre ani-
mais, e gostaria de inserir algumas imagens com movimento neste site,
vamos, ento, criar linhas de tempo e animar algumas imagens relativas
a animais.
Dreamweaver 3.0
Pgina: 122
Em uma nova pgina na janela do documento, insira uma camada e d
um clique dentro dela para posicionar o ponto de insero. Atravs do
menu Inserir, insira a imagem cachorro.gif, ou outra qualquer (todas as
imagens que iremos inserir nesta pgina so gifs animados). Selecione
a imagem e veja qual o valor das propriedades L e U, em seguida seleci-
one a camada e digite, nas suas propriedades L e U, os mesmos valores
das dimenses da imagem, assim a camada e a imagem tero o mes-
mo tamanho. Ainda nas propriedades da camada, digite cachorro na cai-
xa de texto Id. da camada.
Insira outra camada dois pargrafos abaixo da camada cachorro, e den-
tro da nova camada, insira a imagem cavalo.gif. Deixe a camada com a
mesma dimenso da imagem e digite o nome cavalo na caixa de texto Id.
da camada.
Agora abra o inspetor Linhas de tempo e o inspetor Camadas. Para que
voc no fique com muitas janelas (inspetores) abertas, arraste o inspe-
tor Camadas (ou melhor, a guia Camadas) para o inspetor Linhas de
tempo, assim em uma mesma janela voc ter duas guias: Linhas de
tempo e Camadas (observe a prxima figura). Para separ-las, arraste a
guia Camadas para fora do inspetor Linhas de tempo. Deixe a guia Li-
nhas de tempo selecionada.
Selecione a camada cachorro e arraste-a, pela ala de seleo, at o ca-
nal 1 para que voc tenha uma barra de animao para a referida camada.
Clique no ltimo quadro primrio e arraste-o at o quadro 35. Com relao
camada cavalo, arraste-a at o canal 2 s que solte no quadro 20.
Dreamweaver 3.0
Pgina: 123
Clique no ltimo quadro primrio da barra de animao da camada ca-
chorro e na pgina, arraste a camada para criar o movimento (arraste-a
em linha reta at a metade da pgina, voc ver o desenho da linha mos-
trando o caminho a ser percorrido pela camada). Agora clique no ltimo
quadro primrio da camada cavalo e faa o movimento para ela, arras-
tando a camada em linha reta at um pouco para a frente da camada
cachorro.
Volte o cabeote de execuo at o quadro 1 (basta clicar no boto
Rebobinar ou arrast-lo para o incio). Selecione a guia Camadas que ago-
ra est no Inspetor Linhas de tempo e deixe a camada cachorro visvel e a
camada cavalo invisvel (com o olho fechado), pois queremos que primei-
ro aparece o cachorro e depois de um tempinho aparea o cavalo. No
inspetor Linhas de tempo selecione a opo Execuo automtica, salve
a pgina e depois pressione a tecla F12 para exibi-la no navegador. Feche
a janela do navegador e volte para a pgina na janela do documento.
Vamos inserir outras camadas e anim-las. Insira uma nova camada e
dentro dela insira a imagem homem.gif. Digite homem na propriedade Id.
da camada e deixe a imagem e a camada com as mesmas dimenses,
arraste a camada para o lado direito da pgina, de modo que fique entre
o cachorro e o cavalo. Com a camada nesta posio (que ser a posio
inicial), arraste-a para o quadro 45 do canal 3. Aumente o tamanho da
barra de animao para que ela v do quadro 45 ao quadro 80. Clique no
ltimo quadro primrio da barra de animao homem e na pgina, arras-
te a camada at o outro lado da pgina, voc ver uma linha representan-
do o caminho a ser percorrido pela camada, que ir de um lado a outro.
Dreamweaver 3.0
Pgina: 124
Insira outra camada e depois a imagem onca.gif dentro dela, ajuste as
dimenses das duas e d o nome de onca para a camada. Posicione a
camada onca no mesmo local onde voc colocou inicialmente a camada
homem (o objetivo ser fazer a ona correr atrs do homem). Arraste a
ala de seleo da camada onca at o inspetor Linhas de tempo e solte-
a no quadro 55 do canal 4.
Clique no ltimo quadro primrio da barra onca e movimente, na pgina,
a camada da onca at o outro lado da pgina, na mesma direo da
camada homem, mas deixe-a posicionada atrs desta ltima.
Dreamweaver 3.0
Pgina: 125
Para fazer com que a camada do homem e da ona apaream duas
vezes depois que a pgina carregada, basta copi-las no mesmo ca-
nal, s que alguns quadros a frente. Selecione a camada homem, d um
clique com o boto direito do mouse sobre a camada e no menu de con-
texto, selecione a opo Copiar. Agora clique com o boto direito do mouse
no quadro 90 do canal 3 e selecione a opo Colar, repita o procedimento
de copiar e colar para a camada onca.
Insira outra camada na pgina e dentro dela insira o arquivo aguia.gif,
deixe os dois objetos com a mesma dimenso e d o nome de aguia
para a camada. Posicione a camada no canto inferior direito da pgina,
que de onde a animao comear, arraste tal camada para o canal 5
mas no quadro 140. Defina o movimento para a guia de modo que ela
v do canto inferior direito ao canto superior esquerdo da pgina, mas
no se movimente em linha reta (ser necessrio inserir outros quadros
primrios na barra de animao).
Agora voc dever definir quais as camadas que sero exibidas quando
a pgina for carregada, e de acordo com a nossa linha de tempo, quere-
mos que o cachorro seja o primeiro a aparecer, depois de algum tempo o
cavalo, os dois permanecero na tela enquanto ir sugir o homem e de-
pois a ona atrs dele, eles iro aparecer duas vezes, e depois a vez
da guia entrar na pgina. Desta maneira, ser necessrio posicionar o
cabeote de execuo em determinados quadros e definir, atravs da
guia Camadas, se a camada ser visvel ou no.
Por exemplo, salve sua pgina e visualize-a no navegador. Voc ver que
as camadas no esto aparecendo exatamente na ordem que deseja-
mos. Por isso, volte na janela do documento e posicione o cabeote de
execuo no incio (quadro 1), selecione a guia Camadas e deixe todas
as camadas, exceto a camada cachorro, invisveis, como mostra a figu-
ra a seguir.
Dreamweaver 3.0
Pgina: 126
Posicione o cabeote nos outros quadros primrios e verifique, atravs da
guia Camadas, se as camadas apresentam a visibilidade correta. Volte o
cabeote para o incio, confira novamente as camadas que devero estar
inicialmente visveis ou no e depois visualize a pgina no navegador.
Desta maneira, voc viu que com o Inspetor Linhas de tempo possvel
inserir elementos que se movimentem nas pginas da Web, sendo que
voc poder determinar o caminho que os elementos animados percorre-
ro e quais sero visveis ou no em determinado momento da animao.
Dreamweaver 3.0
Pgina: 127
LISTA DE EXERCCIOS
1 - Em uma nova pgina da janela do documento, altere o tamanho da
janela para que ela apresente a seguinte dimenso: 760 x 420.
2 - Atravs da caixa de dilogo Preferncias, faa as seguintes altera-
es em algumas Categorias:
2.1 - Altere a paleta de objetos para que ela exiba cones e
textos ao invs de exibir apenas cones.
2.2 - A fonte do inspetor de HTML deve apresentar o tama-
nho 11 ao invs do tamanho 10.
2.3 - No Iniciador, faa com que a paleta Biblioteca no seja
mais exibida, e no seu lugar adicione o Inspetor de proprieda-
des.
3 - Cri e um si te denomi nado turismo na pasta rai z l ocal
Agencia_Turismo (os prximos exerccios o conduzir a criar pgi-
nas que constituiro um site referente a uma agncia de viagens
fictcia, a Villar Turismo) .
4 - O Dreamweaver utilizado para criar pginas para a Web, mas o
que e o que contm uma pgina? E o que constitui um site?
5 - Insira algum contedo na pgina em branco da janela do documen-
to, sendo que esta ser a pgina inicial do site. A seguinte figura
mostra um pequeno exemplo do que voc poder digitar.
Dreamweaver 3.0
Pgina: 128
6 - Para melhorar a aparncia da pgina, aplique alguns estilos e for-
matos nos textos, depois centralize os trs primeiros pargrafos.
7 - Agora selecione uma cor ou uma imagem para o fundo da pgina
criada anteriormente.
8 - Insira duas linhas horizontais: uma acima do terceiro pargrafo e
outra abaixo do quinto pargrafo. A altura das linhas horizontais deve
ser 3 e no devem ser sombreadas.
9 - No local que indicamos na figura anterior, insira uma figura (como
por exemplo a imagem de um avio).
10 - Insira uma moldura esquerda na pgina; a pgina ser dividida e o
contedo j inserido ficar posicionado na moldura da direita (ou na
moldura principal).
11 - Agora crie outras pginas, onde uma deve ser referente s viagens
oferecidas pela agencia (as localidades a serem visitadas, se a via-
gem ser rea, martima, etc, o roteiro, preos, etc), e a outra pgi-
na deve conter algumas promoes. Salve essas pginas com um
nome fcil de ser identificado. Defina um ttulo e um fundo para es-
sas pginas.
12 - Salve todos os arquivos, onde o conjunto das molduras deve apre-
sentar o nome index.htm. Depois defina um ttulo para o conjunto
das molduras (arquivo index.htm), j que ele que ser exibido no
navegador.
13 - Na moldura esquerda insira uma barra de navegao, sendo que
esta barra dever apresentar no mnimo os seguintes elementos:
Home, Viagens e Promoo. Aproveite e j estabelea os hyperlinks
das imagens (que sero os botes da barra de navegao) com as
pginas que voc criou.
14 - Na pgina referente s Promoes, resuma os dados que voc in-
seriu na pgina apresentando-os em uma tabela, ou seja, crie uma
tabela onde esta exibir, por exemplo, os preos dos hotis das lo-
calidades que fazem parte do pacote promocional. Utilize os recur-
sos referentes s tabelas: mesclar e dividir clulas, alterar a cor de
fundo de algumas clulas, as bordas, etc.
15 - Crie uma nova pgina na janela do documento. Nesta pgina insira
um formulrio, onde este deve apresentar campos de textos (para o
usurio digitar seu nome e e-mail) e alguns outros campos a sua
escolha. Salve a pgina (na pasta Agencia_Turismo) e defina um
ttulo para ela.
Dreamweaver 3.0
Pgina: 129
19 - Edite a barra de navegao j existente e insira um outro elemento
que dever apresentar o texto Consulte-nos. Quando o usurio clicar
nesta opo da barra de navegao, a pgina do formulrio dever
ser exibida na moldura da direita.
20 - Crie uma folha de estilos linkada, a qual poder ser utilizada em
qualquer pgina.
21 - Insira alguma camada animada em alguma pgina do site (utilizan-
do o inspetor Linhas de tempo). Como exemplo, faa o avio da
pgina inicial se movimentar.
22 - Selecione o ltimo quadro da animao e atravs do menu Modifi-
car, opo Linha de tempo adicione um comportamento linha de
tempo. O comportamento dever ser a Mensagem pop-up, ou seja,
quando o avio terminar de se movimentar, uma caixa de mensa-
gem ser exibida, e como exemplo, digite a mensagem Bem-vindo
Villar Turismo! na janela da Mensagem pop-up.
Celta Informtica
http://www.celtainformatica.com.br

Dreamweaver 3

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dreamweaver 3

Enviado por

Direitos autorais:

Formatos disponíveis

Sumrio

Você também pode gostar