Apostila dreamweaver

Sumário
INTRODUÇÃO _________________________________ 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 PÁGINAS _____________________ 13
CRIANDO UM SITE LOCAL ________________________________ 13
CRIANDO PÁGINAS ______________________________________ 17
PARÁGRAFO E QUEBRA DE LINHA ___________________________ 30
A PALETA DE HISTÓRICO _________________________________ 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 CAMBIÁVEIS ____________________________ 51

INSERINDO HYPERLINKS _____________________ 57
VÍNCULO DE CAMINHO RELATIVO ___________________________ 58
CAMINHO ABSOLUTO E ÂNCORA IDENTIFICADA _________________ 64
ALTERANDO AS CORES DOS VÍNCULOS _______________________ 67

CRIANDO PÁGINAS COM MOLDURAS _________ 69
SALVANDO AS MOLDURAS ________________________________ 74
SELECIONANDO MOLDURAS _______________________________ 76
PROPRIEDADES DAS MOLDURAS ____________________________ 78
INSERINDO UMA BARRA DE NAVEGAÇÃO ______________________ 80

CRIANDO TABELAS ___________________________ 84
PROPRIEDADES DA TABELA E DAS CÉLULAS ____________________ 85
OUTRAS MODIFICAÇÕES NA TABELA ________________________ 88
CRIANDO E FORMATANDO UMA TABELA _______________________ 91

CRIANDO FORMULÁRIOS _____________________ 94
OS OBJETOS DE FORMULÁRIOS ____________________________ 94
INSERINDO OBJETOS NA PÁGINA ____________________________ 96
VALIDANDO CAMPOS DO FORMULÁRIO _____________________ 103
FAZENDO O FORMULÁRIO 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 EXERCÍCIOS _______________________ 127

Dreamweaver 3.0

INTRODUÇÃO

A Internet é uma imensa rede de computadores interligados e espalha-
dos pelo mundo inteiro. Através desta rede podemos trocar arquivos (de-
nominados arquivos FTP), enviar e receber mensagens (que são os fa-
mosos e-mails), enviar e receber vídeo e áudio em tempo real (streaming)
e visualizar informações (sendo estas as informações apresentadas em
forma de páginas gravadas em um determinado site). A WWW (World
Wide Web), ou simplesmente Web, é a parte da Internet que contém o
conjunto de todas essas páginas que podemos acessar, visualizar e na-
vegar por elas.

A grande maioria das páginas da Web são criadas através de uma lin-
guagem de programação denominada HTML, e os navegadores da Web
(mais conhecidos como browsers) são os programas que exibem estas
páginas, pois eles lêem e entendem a linguagem HTML.

Nesta apostila iremos estudar o Dreamweaver, que é um software desti-
nado a criar, editar e gerenciar as páginas que são exibidas na Web, e
que também utiliza a linguagem de programação HTML. Se você não
quiser ver nada de HTML durante o processo de criação das páginas,
basta não abrir a janela que exibe o código da página; caso contrário,
você poderá, simultaneamente, criar a página e ver o código que você
acabou de fazer (boa oportunidade de conhecer e aprender a linguagem
HTML).

No Dreamweaver você encontrará ferramentas avançadas de desenho
e layout, recursos de HTML dinâmico, camadas animadas, etc, onde to-
dos podem ser utilizados sem que você tenha que gravar uma linha de
código.

Celta Informática - F: (11) 4331-1586 Página: 3

Dreamweaver 3.0
Assim, utilizando o Dreamweaver, você poderá facilmente criar e publi-
car suas páginas na Internet, e com isso, divulgar e apresentar as infor-
mações contidas nas páginas a pessoas que estejam praticamente em
qualquer parte do planeta. Essas pessoas, então, poderão 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 não é uma tarefa muito complicada, porém, um site
bem elaborado exige paciência, dedicação e conhecimentos de algumas
técnicas. Para obter os melhores resultados, projete e planeje o seu site
antes de criar qualquer página que o integrará. Procure lembrar sempre
que um bom site, além de ter uma aparência atraente, necessita que a
mensagem seja transmitida de forma sucinta e sem demora no apareci-
mento das informações na tela (ou seja, o carregamento das páginas
deve ser rápido). Fique atento às seguintes dicas:

A Defina os seus objetivos de forma clara;

A Analise o perfil de quem irá visitar seu site;

A Utilize itens que possam ser exibidos rapidamente na tela;

A Crie um bom layout de forma a torná-lo bastante atraente;

A Evite excesso de informações numa única página;

A De posse dos dados, procure organizá-los de forma inteligente;

A A navegação no site deve ser de tal forma que os visitantes possam
saber em que local do seu site eles estão e como retornar à página de
nível superior;

A Forneça uma maneira através da qual os visitantes possam en-
trar em contato com o webmaster (quando necessário);

A Realize vários testes no seu site com diferentes tipos de navegadores
(browsers) antes de torná-lo disponível na Internet.


Dreamweaver 3.0
CONHECENDO O DREAMWEAVER

O Dreamweaver é constituído por uma janela principal e várias 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ê também poderá

OBS: O Dreamweaver se lembrará das posições das janelas quando
você sair do programa, assim, ao iniciá-lo novamente, as janelas estarão
na mesma posição que estavam quando você fechou o programa pela
última vez.


Dreamweaver 3.0
A JANELA DE DOCUMENTO

Antes de iniciarmos a construção de um site, vamos conhecer melhor a
Janela de documento, que é onde as páginas do site serão criadas. As
páginas 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ê obtém.

A janela de documento é composta pela Barra de título (que exibe o título
da página e, entre parênteses, o nome do arquivo e um asterisco, caso o
arquivo contenha alterações não salvas), Área de visualização (que exi-
be todo o conteúdo da página) e pela Barra de status, que apresenta
algumas informações importantes:

· Seletor de rótulos: exibem todos os rótulos (tags) que controlam o
texto ou objeto selecionado (para realçar o conteúdo de algum rótulo
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 dimensões pré-deter-
minadas ou personalizadas (basta dar um clique na setinha para que
as opções sejam apresentadas). Você também pode redimensionar
manualmente a janela, arrastando suas bordas.

· Tamanho do documento e tempo de descarga: exibe o tamanho total
da página (em Kilobytes) e o tempo de descarga com base na veloci-
dade de conexão definida (para definir as preferências de tempo e
tamanho de descarga, escolha menu Editar, opção Preferências, em
seguida, selecione a categoria Barra de status e escolha uma veloci-
dade de conexão com a qual deseja calcular o tempo de descarga).


Dreamweaver 3.0
Se por algum motivo você quiser, será possível ocultar a Barra de status.
Para isso, acesse o menu Exibir e clique na opção Barra de status.

A janela de documento oferece várias opções que podem ou não ser
ativadas, como a régua, grade, etc. As réguas, exibidas na parte superior
da janela e do lado esquerdo, poderão ser utilizadas para dimensionar
melhor alguns objetos na tela, como tabelas e imagens. Para exibir (ou
ocultar) as réguas, acesse o menu Exibir submenu Réguas op-
ção Mostrar. No submenu Régua você também pode escolher as unida-
des da régua: pixels, polegadas ou centímetros.

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 opção Mostrar. Ativando a opção 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 configurações da grade (espaçamento e cor das linhas, por
exemplo) clique na opção Definições do submenu Grade.


Dreamweaver 3.0
INSPETOR DE ORIGEM DE HTML

Como já comentamos, você poderá ver o código HTML de qualquer pági-
na através do Inspetor de origem de HTML, mostrado na próxima figura.
Toda página criada no Dreamweaver tem um código em HTML associa-
do a ela, e é por isso que elas podem ser exibidas no navegador, já que
eles só entendem as instruções do código HTML.

A barra de título da janela exibe o nome do arquivo. A opção Quebra autom.
de linha faz o texto mudar automaticamente de linha dentro da janela (faci-
litando sua leitura) e a opção Números de linha exibe, no lado esquerdo da
janela, o número de cada linha. Como você pode observar na figura anteri-
or, essas duas opções estão ativas.

Para abrir a janela do Inspetor de origem HTML, acesse o menu Janela e
depois a opção 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 então pressionar a tecla F10.


Dreamweaver 3.0
Você poderá realizar alterações tanto na página exibida na janela do do-
cumento quanto no seu código HTML, sendo necessário, neste último
caso, conhecer os comandos e recursos da linguagem. Qualquer ação
realizada na página (inclusão de um objeto, mudança da cor e tamanho
da fonte, seleção de texto/imagem, etc) também será realizada automa-
ticamente no código HTML da página e vice-versa. Assim, você poderá
acompanhar, através do inspetor de origem HTML, a criação de uma
página e ver como tudo o que você faz na janela do documento é conver-
tido para HTML.

O INSPETOR DE PROPRIEDADES

Os elementos das páginas caracterizam-se por ser os textos e objetos
pertencentes a ela. Quando você quiser exibir ou alterar as propriedades
dos elementos da página, utilize o Inspetor de propriedades. Para exibir o
Inspetor de propriedades, selecione a opção Propriedades do menu
Janela.

A aparência do inspetor, ou seja, as propriedades que serão exibidas,
dependerão do tipo de elemento que está atualmente selecionado. Ob-
serve, na próxima figura, que uma janela do inspetor exibe as proprieda-
des de uma imagem, e a outra as do texto.

Algumas outras propriedades do elemento poderão ser exibidas se você
clicar na seta de expansão 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 páginas, pois certamente teremos que editar e
alterar as propriedades de alguns elementos.


Dreamweaver 3.0
A PALETA DE OBJETOS

Na Paleta de objetos você encontrará vários botões que serão utilizados
para inserir objetos, como tabelas, camadas e imagens nas páginas.
Quando você passar o mouse sobre os botões da paleta de objetos,
uma dica será exibida para lembrá-lo o que cada botão faz.

Para exibir a Paleta de objetos, selecione a opção Objetos do menu
Janela.

A paleta de objetos contém seis painéis: Caracteres, Comuns, Formulá-
rios, Head (Cabeçalho), Invisíveis e Molduras. Cada um desses painéis
exibe botões diferentes, os quais relacionam-se com a função do painel
que estiver selecionado.

· O painel Caracteres contém caracteres especiais, como os símbolos
de copyright e marca registrada, além de aspas curvas.
· O painel Comuns contém os objetos mais comumente utilizados, como
Imagem, Tabela e Camada.
· O painel Formulários contém botões para criar formulários e os seus
elementos.


Dreamweaver 3.0
· O painel Head contém botões para adicionar diversos elementos
HEAD, como os rótulos META, KEYWORDS e BASE.
· O painel Invisíveis contém botões para criar objetos que não são visí-
veis na janela do documento, como as âncoras com nome.
· O painel Molduras contém estruturas comuns dos conjuntos de mol-
duras (frames).

Para inserir na página os objetos pertencentes à paleta de objetos, clique
no botão correspondente ao objeto desejado. Para alguns objetos, o
Dreamweaver necessitará de informações adicionais (como a localiza-
ção de uma imagem, por exemplo), sendo assim, uma caixa de diálogo
será exibida. Preencha a caixa de diálogo e depois de clicar no botão OK,
o objeto será inserido na página.

Você poderá escolher em exibir o conteúdo da paleta como Apenas tex-
to, Apenas ícones ou Ícones e texto. Para realizar estas alterações, sele-
cione a opção Preferências do menu Editar, na caixa de diálogo apre-
sentada, selecione Geral na seção Categoria.


Dreamweaver 3.0
O INICIADOR

As principais janelas, paletas e inspetores podem ser abertos (ou inicia-
dos) a partir do Iniciador. Para exibi-lo, selecione a opção Iniciador do
menu Janela.

Mesmo que o Iniciador não estiver sendo exibido, você poderá abrir facil-
mente qualquer janela através do Mini-iniciador, que se encontra no can-
to inferior direito da barra de status da janela do documento.

Você poderá especificar quais botões (paletas e inspetores) aparecerão
na janela do iniciador, para isso, selecione a caixa de diálogo Preferênci-
as (através do menu Editar, opção Preferências), depois selecione Pa-
letas flutuantes na seção Categorias. A caixa Mostrar no Iniciador con-
tém os itens que são atualmente exibidos no Iniciador e no Mini-iniciador.


Dreamweaver 3.0
Se quiser adicionar um item ao Iniciador e ao Mini-iniciador, clique no
botão com o sinal de adição (+). Para remover um item do Iniciador e do
Mini-iniciador, selecione-o e depois clique no botão com o sinal de sub-
tração (-), 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 botão OK, o Iniciador e o Mini-iniciador
serão alterados, exibindo os itens especificados.
Ainda na caixa de diálogo Preferências, na Categoria Barra de status,
você encontra a opção de exibir ou não o Mini-iniciador na barra de status
da janela do documento.

Os botões do Iniciador serão comentados e utilizados no momento em
que estivermos criando as páginas do nosso site.

Agora que você já teve uma visão geral da interface do Dreamweaver,
vamos começar a construir páginas e ver quais os recursos que o pro-
grama nos oferece para que as páginas tenham uma boa apresentação
e sejam bastante funcionais.

CONSTRUINDO PÁGINAS

Antes de começarmos a criar as páginas, 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 são as páginas que
os usuários vêem quando visitam um site da Web, e podem conter texto,
imagens, som, animação e vínculos a outros documentos.

OBS: Lembre-se que durante a criação e o trabalho com os documen-
tos, o Dreamweaver gera automaticamente o código HTML, o qual pode-
rá ser visto e editado através 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 não 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
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 opção Novo site do menu Site. A caixa de diálogo
Definição de site será exibida (nesta caixa de diálogo, a Categoria Infor-
mações 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 diálogo 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 também.


Dreamweaver 3.0

4. Depois de dar um clique duplo na pasta Agenda_Cultural, clique no
botão Salvar. Na caixa de diálogo Definição de Site, selecione a opção
Utilizar cache para acelerar atualiz. dos vínculos, pois colocando o con-
teúdo da pasta Agenda_Cultural em um cache local, será criado um re-
gistro dos arquivos existentes para que o Dreamweaver possa atualizar
rapidamente os vínculos quando um arquivo for movido, renomeado ou
excluído.

Como estamos definindo um site local (e não remoto), não precisamos pre-
encher o outro campo (Endereço do HTTP), por isso clique no botão OK.

OBS: Site remoto é aquele que já está localizado no seu servidor, é onde
seu site da Web fica armazenado.


Dreamweaver 3.0
Em seguida o Dreamweaver exibirá uma mensagem, clique no botão
OK. Uma nova janela será criada, cuja barra de título apresenta: Site –
agenda (observe, na barra de tarefas do Windows, que apareceu mais
um botão 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ê também poderá visualizar a estrutura de navegação
do site, através do Mapa do Site. O mapa do site mostra os arquivos
HTML e outros elementos da página como ícones, e os hyperlinks serão
exibidos na ordem em que forem detectados no código de origem de
HTML. Por padrão, 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á informações sobre os filmes e as peças teatrais que estão em
cartaz, os shows que serão realizados na semana, os melhores restau-
rantes, casas noturnas, etc.


Dreamweaver 3.0
CRIANDO PÁGINAS

Agora que já temos o local (pasta) onde será armazenado o site da nos-
sa Agenda Cultural, vamos criar os documentos (páginas) para o site, ou
seja, vamos construir as páginas e adicionar título, imagens, texto e vín-
culos a elas.

Lembre-se que uma página da Web é um arquivo HTML contendo infor-
mações, e um site é uma coleção de páginas da Web relacionadas en-
tre si e geralmente localizadas no mesmo servidor.
Vamos inicialmente criar uma página em branco, mas você poderia abrir
um documento HTML existente, independente de como tenha sido cria-
do, e alterá-lo, e também 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 título, então não
precisará criar outra página em branco. Caso contrário, para criar uma
nova página em branco, selecione a opção Novo do menu Arquivo.

Vamos começar a criar as páginas referentes aos filmes, (depois você
criará as outras). Em um outro capítulo faremos a ligação entre elas, ou
seja, adicionaremos os links.

Com o ponto de inserção posicionado no início da janela do documento,
insira os textos de acordo com a próxima figura (se quiser, arraste as
paletas e os inspetores para outro lugar ou feche-os, pois assim terá
mais espaço disponível na janela do documento).


Dreamweaver 3.0

OBS: As informações 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 página.
Para salvá-la, selecione a opção Salvar do menu Arquivo.

OBS: Ao salvar os documentos, evite, sempre que possível, utilizar es-
paços e caracteres especiais nos nomes de arquivos e pastas.

Na caixa de diálogo 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 próxima figura. Depois clique no
botão Salvar.


Dreamweaver 3.0

Observe que agora na barra de título da janela do documento o nome do
arquivo e a pasta onde ele está armazenado são exibidos entre parênte-
ses. No entanto, o ato de salvar um documento e lhe dar um nome não
corresponde ao ato de dar um título a uma página (o título da página ainda
continua sendo Untitled Document, ou seja, documento sem título).

OBS: Por padrão, os PCs salvam os arquivos HTML com a extensão
.htm e os Macs com a extensão 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
Definindo um título para a página

É importante definir um título para as páginas, pois quando elas forem
exibidas no navegador, o seu título aparecerá na barra de título deste,
ajudando os usuários a controlar o que estão exibindo enquanto nave-
gam, o título serve também para identificar a página nas listas de históri-
co e marcadores. Se uma página não tiver um título, na barra do navega-
dor aparecerá Documento sem título.

Para alterar o título, clique com o botão direito do mouse em qualquer
lugar da página e no menu de contexto que aparecerá, selecione a opção
Propriedades da página, uma outra maneira é selecionando esta mes-
ma opção no menu Modificar. Utilize qualquer um dos métodos para
que a caixa de diálogo Propriedades da página seja exibida.

No campo Título digite Missao Impossivel, como mostra a figura anterior,
depois clique no botão OK. Observe que o título aparecerá na barra de
título da janela do documento e o nome do arquivo da página e a pasta na
qual ele foi salvo aparecem entre parênteses, ao lado do título.
OBS: Sempre que for definir nomes de arquivos ou títulos de página,
procure não utilizar caracteres especiais (como é, ç) ou pontuação, 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
servidor remoto), muitos servidores poderão converter esses caracteres,
provocando a ruptura dos vínculos entre os arquivos, sendo também que
muitos robôs de mecanismos de pesquisa (programas que navegam
automaticamente pela Web, reunindo informações a serem indexadas
pelos mecanismos de pesquisa) lêem o título das páginas e outras des-
crições inseridas no cabeçalho e utilizam estas informações para indexar
as páginas nos seus bancos de dados.

Alterando o fundo da página

Como você já percebeu, quando criamos uma nova página no
Dreamweaver, esta apresenta, por padrão, um fundo branco. Mas nós
podemos alterar essa condição: 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 páginas, sendo exatamente
essas cores utilizadas pelos navegadores Windows Explorer e Netscape.
Para aplicar uma cor de fundo na página, abra a caixa de diálogo Propri-
edades da página (através do menu Modificar), depois clique no botão
Fundo.


Dreamweaver 3.0
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 não alterar mais a
cor, clique no botão Apagador ( ) para fechá-la.

OBS: Nas páginas da Web cada cor é representada por um código
hexadecimal (composto por seis dígitos). Observe na figura acima que o
código da cor branco é FFFFFF, mas você não precisará saber o código
hexadecimal de cada cor, pois o Dreamweaver se encarrega de exibir o
código da cor selecionada.

Assim, clique em alguma cor na Paleta de cores para que ela se torne a
cor de fundo da página. Após clicar na cor desejada, observe que seu
código hexadecimal é exibido no campo Fundo, clique no botão OK para
fechar a caixa de diálogo.

Além de inserir uma cor no fundo da página, você também 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 página. Se a página 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 avançado e o Netscape 4.04 ou mais avançado, também suportam
as imagens no formato PNG).

Para inserir uma imagem de fundo, selecione a opção Propriedades da
página do menu Modificar. No campo Imagem do fundo, clique no bo-
tão Procurar para localizar e selecionar a imagem desejada, depois clique
no botão OK.


Dreamweaver 3.0

Caso a imagem selecionada esteja localizada em uma pasta diferente
daquela que contém os arquivos do site, uma janela será exibida (como
mostra a próxima figura). Clique no botão Sim para copiar o arquivo para
a pasta-raiz.


Dreamweaver 3.0
Após clicar em Sim, a caixa de diálogo Copiar o arquivo como aparece,
com a pasta Agenda_Cultural já selecionada. Se quiser, renomeie o ar-
quivo de imagem e clique no botão Salvar, depois clique no botão OK da
caixa de diálogo Propriedades da página.

Observe, na figura anterior, que a imagem de fundo foi organizada lado a
lado para ocupar toda a área da página. Veja também que após o nome
do arquivo, na barra de título da janela, aparece o caractere *, indicando
que a página contém alterações que ainda não foram salvas. Sendo as-
sim, selecione a opção Salvar do menu Arquivo.

Formatando o texto

Vamos agora melhorar a aparência dos textos da página, alterando o tipo
e tamanho das fontes, a cor de algumas palavras, etc. Mais para frente,
nos próximos capítulos, veremos outros recursos que poderão ser apli-
cados às páginas para torná-las ainda mais atraentes.


Dreamweaver 3.0
Você poderá formatar os textos contidos nas páginas através do menu
Texto ou do inspetor de Propriedades, sendo que o texto da página deve-
rá estar previamente selecionado.

Selecione o primeiro parágrafo da página (que corresponde ao nome do
filme - Missão Impossível 2). Clique no menu Texto e aponte o mouse
para a opção Fonte, você verá uma lista com algumas combinações de
fontes.

No Dreamweaver, ao invés de definir somente um tipo de fonte para uma
palavra ou texto, você define várias fontes (uma lista com diversos tipos
de fontes), pois assim, o navegador verificará se a primeira fonte da lista
está instalada no computador do usuário, caso não esteja, ele verifica a
segunda, e assim por diante. Se nenhuma das fontes sugeridas estiver
disponível, a palavra ou texto será exibido na fonte padrão do navegador
do usuário.

Portanto, selecione uma combinação de fontes para alterar o tipo de fon-
te do texto selecionado. Agora selecione todo o restante do texto a altere
também o tipo da fonte (escolha uma combinação de fontes diferente do
primeiro parágrafo).

Conforme você pode observar no submenu Fonte, existe uma opção
denominada Editar a lista de fontes, a qual é utilizada para definir as
combinações de fontes. Para modificar as combinações de fontes, sele-
cione a opção Editar a lista de fontes, através do menu Texto, opção
Fonte. Na parte superior da caixa de diálogo exibida é mostrada a Lista
de fontes já disponível. Para montar outras combinações, selecione uma


Dreamweaver 3.0
fonte da lista Fontes disponíveis, à direita da caixa de diálogo, depois
clique no botão << (localizado entre as listas Fontes escolhidas e Fontes
disponíveis) para mover a fonte para a lista Fontes escolhidas, repita o
procedimento até completar uma seqüência de tipos de fontes. Para re-
mover as fontes de uma combinação, clique no botão >>.

Para adicionar a combinação de fontes à Lista de fontes, clique no botão
de adição (+), e para remover uma combinação de fontes da lista clique
no botão de subtração (-).

Agora vamos alterar o tamanho da fonte, sendo que esta ação poderá
ser feita utilizando o menu Texto ou o Inspetor de propriedades. Estando
com o primeiro parágrafo 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 são alterados de acordo com um tamanho bá-
sico, padrão. Esse tamanho básico é definido pelo próprio usuário, que
configura seu navegador para qualquer que seja o tamanho que ele qui-
ser. Normalmente, o tamanho básico 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 opções Aumento do
tamanho ou Redução do tamanho do menu Texto. Por exemplo, se a
fonte está no tamanho padrão (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 padrão, vá até o menu Texto, aponte para Ta-
manho e depois clique na opção Padrão.

Além de alterar o tipo e tamanho da fonte dos textos, também podemos
utilizar os estilos de negrito, itálico e sublinhado. Para aplicar os estilos
negrito e itálico, selecione o texto e depois, no inspetor de propriedades,
clique no botão B (para negrito) ou I (para itálico). Para sublinhar o texto,
selecione-o e clique no menu Texto, aponte para a opção Estilo e depois
Sublinhado (veja que também é possível aplicar os outros 2 estilos atra-
vés do menu Texto).


Dreamweaver 3.0
Como exemplo, selecione a palavra Sinopse da página que está aberta
na janela do documento, e aplique o estilo sublinhado. Faça a mesma
coisa com as palavras Elenco, Direção, Gênero, Classificação e Dura-
ção. Depois aplique o estilo negrito no primeiro parágrafo, ou seja, no
título do filme.

Outra alteração que iremos realizar com os textos da página é em rela-
ção à sua cor, ou seja, vamos aprender a modificar a cor da fonte das
palavras e textos da página. Selecione o primeiro parágrafo da página e
depois, no inspetor de propriedades, clique no botão Cor do texto, como
mostra a próxima figura.

A Paleta de cores é exibida, sendo que você já conhece esta paleta quando
aprendeu a alterar a cor de fundo da página. Com o conta-gotas, clique
em uma cor da paleta de cores ou da própria página (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 também.

Utilizando o código hexadecimal da cor, você poderá copiar a cor de um
texto para outro ou então 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 código hexadecimal (incluindo o sinal #)
da caixa ao lado do botão Cor do texto, do inspetor de propriedades, e
copie-o para a área de transferência, pressionando Ctrl+C. Em seguida
selecione o texto cuja cor você quer alterar, posicione o cursor na caixa
próxima ao botão Cor do texto, pressione Ctrl+V para colar o código e
depois tecle Enter.


Dreamweaver 3.0
Para remover a cor da fonte de algum texto, selecione-o e depois apague
o código hexadecimal exibido no inspetor de propriedades. Não se es-
queça de teclar Enter.

Agora que sua página já está pronta (pelo menos por enquanto), salve-a
através da opção Salvar do menu Arquivo.

Como você já aprendeu a criar e salvar páginas, inserir textos, formatá-
los, etc, crie outras páginas para outros títulos de filmes. Nas próximas
figuras você encontrará informações sobre alguns filmes, e que como já
dissemos, você poderá criar páginas sobre outros títulos de filmes que
desejar.

Lembre-se que para criar novos arquivos, ou páginas, basta selecionar a
opção Novo do menu Arquivo, e que todos os arquivos devem ser sal-
vos na pasta C:SitesAgenda_Cultural (o nome do arquivo e o título da
página você encontrará na barra de título da janela referente a cada filme
nas próximas figuras).


Dreamweaver 3.0

Após criar e salvar as páginas, 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, itálico e sublinhado. Por último salve cada página.


Dreamweaver 3.0
PARÁGRAFO 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 parágrafo,
sendo que cada parágrafo é separado de outros parágrafos por uma li-
nha em branco. Assim, sempre que você pressionar Enter, o ponto de
inserção pulará uma linha de espaço em branco e iniciará um novo pará-
grafo.

Observe, na próxima figura, que a página relativa ao filme 60 Segundos
apresenta 7 parágrafos.

Como já comentamos, toda página criada no Dreamweaver tem um có-
digo em HTML associado a ela, e no inspetor de Origem de HTML (janela
que exibe o código da página), você verá que cada parágrafo é represen-
tado pelo rótulo <p>.


Dreamweaver 3.0

Se você quiser, poderá mudar de linha (teclar Enter) sem inserir uma
linha de espaço em branco. Para conseguir isto, basta utilizar uma que-
bra de linha, ou seja, deixe o ponto de inserção no final da linha que você
quer dividir e, ao invés de pressionar somente a tecla Enter, pressione
Shift+Enter; a linha se dividirá e o ponto de inserção iniciará na próxima
linha.

Você também pode conseguir uma quebra de linha selecionando a op-
ção Quebra de linha do menu Inserir. No código HTML, o rótulo que
representa uma quebra de linha é <br>.

Na próxima figura você pode ver que depois do segundo parágrafo inse-
rimos uma quebra de linha. Observe que um ícone é exibido no final da
linha onde inserimos uma quebra de linha.


Dreamweaver 3.0

Agora que você já entendeu o que representa um parágrafo no
Dreamweaver, podemos aplicar um estilo a um parágrafo, ou seja, pode-
mos aplicar o formato de Cabeçalho 1 (ou Título 1), Cabeçalho 2 (ou
Título 2), e assim por diante, até o Cabeçalho 6. Entre um cabeçalho e o
texto seguinte há sempre uma quebra de parágrafo.

Como exemplo, na página Premonicao, selecione o primeiro parágrafo
e, no inspetor de propriedades, retire o estilo Negrito (clicando no ícone
correspondente) e altere o tamanho da fonte para Nenhum (essas modi-
ficações estão sendo feitas para você perceber melhor como o estilo
Cabeçalho 1 irá alterar o texto).

Com o texto selecionado, clique no menu drop-down Formato do inspe-
tor de propriedades e selecione o formato Cabeçalho 1.


Dreamweaver 3.0
O texto se tornará um título, isto é, terá uma alteração de tamanho, ficará
em negrito, e uma linha em branco será inserida depois do título.

Agora, no código HTML, o parágrafo não estará mais associado ao rótulo
<p>, e sim ao rótulo <h1>, de Cabeçalho 1 (ou Título 1).

Assim, na sua página, você poderá aplicar títulos diferenciados aos tex-
tos, e para remover um estilo de parágrafo, selecione a opção Nenhum
no menu drop-down Formato do inspetor de propriedades.

A PALETA DE HISTÓRICO

Quando você precisar desfazer a última ação que realizou em uma pági-
na, selecione a opção Desfazer do menu Editar (ou pressione Ctrl + Z),
como em qualquer outro programa. O Dreamweaver, além desta opção,
também permite que várias etapas sejam desfeitas simultaneamente,
através da Paleta de histórico.

A Paleta de histórico contém uma lista com todas as alterações que você
realizou na página ativa, na ordem em que foram realizadas, e através
dela será possível desfazer uma ou mais etapas, executá-las novamen-
te e criar novos comandos para automatizar tarefas repetitivas. Para abrir
a paleta de histórico, selecione a opção Histórico do menu Janela.


Dreamweaver 3.0

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 ação é a mesma coisa que selecionar a opção Desfazer do menu
Editar.

Agora se quiséssemos desfazer as últimas três ações 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 então arrastar o polegar até esta etapa.

Para definir o número de etapas que a paleta de histórico mostrará, sele-
cione a opção Preferências do menu Editar, na caixa de diálogo exibida
selecione Geral na lista de categorias e digite o Número máximo de eta-
pas da paleta de histórico na caixa de texto apropriada.


Dreamweaver 3.0
FECHANDO E ABRINDO ARQUIVOS HTML

Para fechar os arquivos HTML, ou seja, as páginas que estão abertas na
janela do documento, clique no botão Fechar, localizado no canto direito
da barra de título da janela ou então escolha a opção Fechar do menu
Arquivo. Se a página contiver alterações que ainda não foram salvas,
uma caixa de diálogo perguntando se você deseja salvar essas altera-
ções aparecerá, clique no botão Sim (para salvar), Não (para fechar sem
salvar) ou Cancelar (para que a página continue aberta). Com este pro-
cedimento, somente a janela do documento, que exibe a página, será
fechada. Feche, agora, o arquivo missao_impossivel.htm.

OBS: Se você utilizar a opção Sair do menu Arquivo (ao invés de Fe-
char), todas as janelas do Dreamweaver, incluindo a janela do site, serão
fechadas.

Para abrir arquivos você também tem mais de uma opção: através 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 página desejada.


Dreamweaver 3.0
Para abrir um arquivo através da janela do documento, selecione a op-
ção Abrir do menu Arquivo. Na caixa de diálogo apresentada, localize o
arquivo que deseja abrir e selecione-o, em seguida clique no botão Abrir.

Você também pode abrir os quatro últimos arquivos que você editou no
Dreamweaver selecionando seus nomes no menu Arquivo da janela do
documento.


Dreamweaver 3.0
OBS: Cada arquivo aberto no Dreamweaver é exibido em uma janela de
documento diferente, assim, se você tiver 3 páginas abertas, também
terá 3 janelas de documentos abertas, as quais são exibidas na barra de
tarefas do Windows. Mas, se você quiser apenas uma janela aberta por
vez, você pode alterar as preferências do Dreamweaver, selecionando a
opção Preferências do menu Editar. Na caixa de diálogo exibida, sele-
cione a Categoria Geral e desmarque a caixa de opção Abrir os arquivos
em outra janela.

Depois clique no botão OK. Desta maneira, a janela do documento con-
terá apenas uma página aberta, e quando for abrir uma outra página, a
primeira será fechada e não armazenada na mesma janela, como ocor-
re na maioria dos outros programas.


Dreamweaver 3.0
RECURSOS ADICIONAIS

Neste capítulo iremos estudar alguns outros recursos que podem ser
utilizados e aplicados nas páginas que você criou.

VERIFICAR ORTOGRAFIA

O comando Verificar ortografia faz a verificação e correção ortográfica
dos textos de sua página. Você pode verificar apenas uma seleção de
texto ou a página inteira.

Antes de iniciar a correção ortográfica, a página a ser verificada deverá
estar aberta na janela do documento, como exemplo, abra a página
Premonicao. Posicione o ponto de inserção no início da página (ou em
um outro lugar onde queira começar a verificação ortográfica), depois
selecione a opção Verificar a ortografia do menu Texto. Uma caixa de
diálogo será apresentada, e já exibe a primeira palavra não localizada.


Dreamweaver 3.0
A palavra que é exibida no campo Palavra não localizada no dicionário
não pertence ao dicionário ortográfico do Dreamweaver. Você pode re-
solver este problema clicando em algum dos botões da caixa de diálogo
Verificar a ortografia:

· Se a palavra está correta mas não pertence ao dicionário e você gos-
taria de adicioná-la ao seu dicionário pessoal, clique no botão Adicio-
nar ao dicionário pessoal. Assim, uma futura verificação ortográfica
não questionará esta palavra.

· Se a palavra está correta mas você não quer incluí-la em seu dicioná-
rio pessoal, clique no botão Ignorar;

· Se a palavra está correta mas você não quer incluí-la em seu dicioná-
rio pessoal, e acha que ela aparece mais de uma vez na página, clique
no botão Ignorar todas;

· Se a palavra estiver incorreta e sua ortografia correta aparece na cai-
xa de listagem Sugestões, selecione a palavra correta e clique no bo-
tão Alterar;

· Se você acha que a palavra foi digitada incorretamente mais de uma
vez, selecione a palavra correta na caixa Sugestões e clique no botão
Alterar todas;

· Você também pode corrigir manualmente a palavra digitando sua for-
ma correta na caixa de texto Alterar para e depois clicar no botão Alte-
rar.

No nosso caso a palavra vôo não foi encontrada, mas como ela está
correta e poderemos utilizá-la em outras páginas, clique no botão Adici-
onar ao dicionário pessoal. Uma outra palavra será destacada e você
terá que decidir qual opção utilizar, realize o mesmo procedimento até
que uma caixa de diálogo exibindo a mensagem Verificação ortográfica
foi concluída apareça. Depois salve esta página e faça a verificação orto-
gráfica nas outras páginas que você criou.

OBS: Para confirmar ou alterar o dicionário que o Dreamweaver utiliza
para realizar a verificação ortográfica, selecione a opção Preferências
do menu Editar. Na Categoria Geral da caixa de diálogo Preferências
você pode alterar o idioma do dicionário através do menu pop-up do campo
Dicionário.


Dreamweaver 3.0
ALINHAMENTO DE TEXTO

Quando inserimos textos nas páginas, o alinhamento padrão que o
Dreamweaver utiliza é o esquerdo, mas podemos também alinhar todo o
texto ou parte dele com a margem direita ou no centro da página.

Para alterarmos o alinhamento de um texto (sendo que este texto pode
ser um parágrafo, um título, uma lista ou uma página inteira) primeiro
devemos selecioná-lo e depois escolher o alinhamento desejado. Como
exemplo, vamos centralizar o texto que representa o título da página
premonicao.htm.

Selecione o texto Premonição e, no inspetor de propriedades, clique no
botão Alinhar no centro (ao invés de selecionar o texto, você também
pode deixar o ponto de inserção posicionado no parágrafo que será ali-
nhado).

Como você observou na figura anterior, o texto fica centralizado em rela-
ção a ambas as margens da página. Você também pode alinhar os tex-
tos através da opção Alinhamento do menu Texto.

Centralize também os títulos das outras páginas (o primeiro parágrafo
que corresponde ao nome de cada filme), depois salve todas elas.


Dreamweaver 3.0
INSERIR LINHA HORIZONTAL

Você pode inserir, na sua página, linhas (ou réguas) horizontais para se-
parar e organizar informações, separar visualmente o texto e os objetos,
ou simplesmente para mudar o visual da página. Tais linhas poderão ter
suas propriedades modificadas como a altura, largura, o alinhamento,
etc.

Estando com a página Premonicao (ou outra) aberta na janela do docu-
mento, posicione o cursor, por exemplo, no final do terceiro parágrafo
(depois da palavra morte.). Agora selecione a opção Régua horizontal
do menu Inserir para que uma linha horizontal, que vai de um lado ao
outro da página, seja inserida (a linha estará, inicialmente, selecionada,
clique em qualquer lugar da página para retirar a seleção).

OBS: A linha horizontal também pode ser inserida clicando-se no botão
Inserir régua horizontal ( ) da paleta de Objetos, só não se esqueça
de deixar o ponto de inserção posicionado no local desejado antes de
clicar no botão.

Posicione o cursor no final do penúltimo parágrafo e insira outra linha
horizontal.


Dreamweaver 3.0
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 (régua) horizontal, que
são:

• L e U especificam a largura e altura da linha, em pixels ou como um
percentual do tamanho da página.
• Alinhar especifica o alinhamento da linha (padrão, esquerda, centro
ou direita). Esta definição 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 opção se quiser que a linha fique com cores sólidas.
• 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 página atual ou em um deter-
minado diretório. Você poderá apenas localizar um texto como também
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 página referente ao
filme 60 Segundos, para isso é necessário que a página em questão
esteja aberta na janela do documento. Agora selecione a opção Locali-
zar do menu Editar, na caixa de diálogo Localizar digite a palavra que
estamos procurando, ou seja, digite carro.


Dreamweaver 3.0

Clique no botão Localizar o próximo para o Dreamweaver encontrar o
que você está procurando. Se a palavra existir na página, ela será desta-
cada (muitas vezes é necessário mover a caixa de diálogo Localizar para
ver a palavra destacada). Se o Dreamweaver não conseguir localizar o
item a palavra especificada, uma caixa de diálogo aparecerá informando
que o item não foi localizado.

Clique novamente no botão Localizar o próximo para que outra palavra
carro seja encontrada, quando a pesquisa terminar o Dreamweaver exi-
birá uma caixa de mensagem.

Para fechar a caixa de diálogo Localizar, clique no botão Fechar.

Abaixo você encontra uma descrição mais completa sobre os itens da
caixa de diálogo Localizar:

• Campo Localizar em, cujo menu drop-down contém algumas opções:
•Documento atual: a busca do texto especificado é feita somente no
documento ativo.


Dreamweaver 3.0
• Site atual: a pesquisa é feita em todos os documentos HTML, arqui-
vos de biblioteca e documentos de texto localizados no site. Após a
escolha da opção Site atual, o nome deste aparecerá à direita do menu
pop-up. Se este não 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 diretório específico. Após escolher
a opção Pasta, clique no ícone correspondente à pasta, para procurar
e selecionar o diretório no qual será efetuada a busca.

• Campo Localizar - especifica o tipo de texto a ser localizado:
• Texto: permite procurar determinadas seqüências de texto na janela
do documento.
• Origem de HTML: permite buscar determinadas seqüências de tex-
to no código de origem de HTML.
• Texto avanç.: permite buscar determinadas seqüências de texto den-
tro ou fora de um ou mais rótulos (tags).
• Marcador: permite procurar determinados rótulos (tags), atributos e
valores de atributo.

• Coincidir maiúsc./minúsc.: selecione esta opção para procurar letras
maiúsculas ou minúsculas.
• Ignorar os diferentes espaços em branco: se esta opção estiver
marcada, a busca pelo texto especificado irá ignorar os espaços entre
as palavras (por exemplo: tanto o texto autoafirmação como auto afir-
mação serão encontrados).
• Utilizar expressões regulares: você poderá incluir certos caracteres e
seqüências pequenas de caracteres (como ?, *, w e b) no texto a ser
localizado.

Você também 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 página aberta na janela do docu-
mento, selecione a opção Substituir do menu Editar. Na caixa de diálo-
go Substituir, digite o texto que você quer encontrar (por exemplo, carro)
e o texto que irá substituí-lo (por exemplo, veículo), como mostra a próxi-
ma figura.


Dreamweaver 3.0

Em seguida clique no botão Localizar o próximo para que o texto (carro)
seja destacado, depois clique no botão Substituir para trocá-lo pelo texto
substituto (veículo). Após esta ação a próxima palavra carro já é desta-
cada, e você só precisa clicar no botão Substituir se quiser trocá-la pela
palavra veículo. Se por algum motivo não quiser que a palavra destacada
seja substituída, clique no botão Localizar o próximo ao invés de clicar
em Substituir.


Dreamweaver 3.0
TRABALHANDO COM IMAGENS

Quando estudamos o capítulo referente à criação de páginas, vimos,
dentre outros tópicos, como podemos alterar o fundo da página: trocan-
do a cor ou inserindo uma imagem, onde esta última é organizada lado a
lado e se repete até preencher todo o fundo da página. Neste capítulo
vamos aprender a inserir imagens na página e alterar sua propriedades,
sendo que as páginas da Web que contém imagens costumam ser mais
atraentes e mais interessantes do que aquelas que só apresentam tex-
tos.

Vamos também aprender a criar e inserir imagens cambiáveis nas pági-
nas, onde uma imagem cambiável é aquela que se altera quando o pon-
teiro do mouse for posicionado sobre ela.
Para inserir uma imagem (não cambiável) na página, deixe o ponto de
inserção no local onde deseja que a imagem seja inserida, depois utilize
uma das seguintes opções:
· Selecione a opção Imagem do menu Inserir ou
· Clique no botão Inserir imagem da paleta de objetos.

Utilizando qualquer uma das opções, a caixa de diálogo Selecione a ori-
gem da imagem aparecerá. Nesta caixa de diálogo localize o arquivo de
imagem desejado e quando você selecioná-lo, poderá visualizar a ima-
gem no lado direito da caixa de diálogo, na área denominada Imagem de
visualização. Clique no botão Selecione para que a imagem seja inserida
na página.

OBS: Lembre-se que as imagens que serão inseridas nas páginas de-
verão estar nos formatos GIF ou JPG (JPEG).

Vamos inserir uma imagem na página referente ao filme Patriota, para
isso a página deverá estar aberta na janela do documento. Com o cursor
posicionado no início da página, clique na opção Imagem do menu Inse-
rir. A caixa de diálogo Selecione a origem da imagem será exibida, e
como exemplo, vamos inserir a imagem figpatriota.jpg, onde esta já se
encontra selecionada. Clique no botão Selecione para que a imagem
escolhida seja inserida na página.


Dreamweaver 3.0

Como mostra a própria caixa de diálogo da figura anterior, o arquivo es-
colhido não está localizado na pasta-raiz do site, portanto, uma janela
será exibida:

Clique no botão Sim para copiar o arquivo figpatriota.jpg para a pasta-
raiz. A figura é inserida na página, e já aparece selecionada.


Dreamweaver 3.0

Os três quadradinhos que aparecem destacados na figura anterior são
chamados de alças de seleção, e podem ser arrastados para
redimensionar a imagem.

As propriedades e uma pequena visualização da imagem, são exibidas
no inspetor de Propriedades (para exibir o inspetor de propriedades, se-
lecione a opção Propriedades no menu Janela). Lembre-se que a ima-
gem deve estar selecionada para que suas propriedades sejam exibidas
no inspetor.


Dreamweaver 3.0
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 botão Aplicar (ou Apply) para as propriedades da
imagem.

Quando quiser remover uma imagem da página, selecione-a (através 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ê também pode dar um clique duplo na imagem e acessar a
caixa de diálogo 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 serão utilizados para alterar as proprieda-
des da imagem:

1 - Nome: se você está pensando em trabalhar com o código HTML, é útil
definir um nome para a imagem. Este nome não aparecerá na tela.

2 - L e U: exibem as dimensões, em pixels, da imagem, ou seja, a largura
(L) e a altura (U). Estes valores podem ser alterados, para isso digite
outros números na caixa de texto ou arraste as alças (quadradinhos) da
imagem. Quando você modifica as dimensões da imagem, os números
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 dimensões da imagem, o tamanho do ar-
quivo da imagem não é alterado.


Dreamweaver 3.0
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 diálogo Selecione a origem da imagem e escolher outra
imagem (ou seja, outro arquivo de origem).

4 - Vínculo: se a imagem for um hyperlink, ou seja, exibir outra página
quando receber um clique, o endereço desta página associada a ela será
exibido no campo Vínculo.

5 - Alinhar: a imagem, inicialmente, apresenta o alinhamento padrão 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
próximo. Mas este tipo de alinhamento pode ser modificado através da
caixa drop-down Alinhar, ou através dos três botões de alinhamento iden-
tificados pelo número 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 várias regiões ou “pontos ati-
vos” (utilizando os botões identificados na figura anterior pelo número
7.1) e quando o usuário clicar em um ponto ativo, uma outra página da
Web será exibida.

8 - Espaço V e Espaço H: você pode adicionar espaço (em pixel) acima,
abaixo e em ambos os lados utilizando estas caixas de texto. Por pa-
drão, o Dreamweaver coloca um espaço entre cada imagem colocada
em uma linha, e se você quiser que sua imagem tenha algum espaço
extra, você pode colocar um espaço invisível em torno da imagem. O
espaço V é o espaço vertical, acima e abaixo da imagem, e o espaço H é
o espaço horizontal, à esquerda e à direita da imagem.

9 - Destino: quando a imagem for um hyperlink, ou seja, quando tiver um
vínculo associado a ela, você pode especificar, através da opção Desti-
no, a moldura ou a janela na qual a página 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
10 - Orig. Baixa: se a imagem que você inseriu na página 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-
lução, 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
número (em pixels) nesta caixa de texto. Insira o número zero para que
não haja nenhuma borda.

12 - Botão Atualizar: um clique neste botão faz com que os valores dos
campos L e U retornem ao tamanho original.

13 - Botão Editar: se você tiver um editor de imagens associado ao
Dreamweaver, um clique neste botão abrirá a imagem no editor para
poder ser modificada (para especificar um editor de imagens externo,
selecione Preferências no menu Editar e depois na seção 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 botão
Aplicar) para que as alterações sejam refletidas na imagem da página.
Lembre-se sempre que quanto menor for a imagem (em Kilobytes (K)),
mais rápido ela carregará.

CRIANDO IMAGENS CAMBIÁVEIS

As imagens cambiáveis são comumente utilizadas nos Web sites, pois
provocam efeitos interessantes. Estas imagens são substituídas por ou-
tras quando o usuário passa o ponteiro do mouse sobre elas ou dá um
clique, assim, tais imagens possuem um comportamento anexado a elas.

Um comportamento é uma combinação entre um evento e uma ação,
onde você define qual evento acionará uma determinada ação. Por exem-
plo: quando o usuário mover o mouse sobre uma imagem (um evento),
um som poderá ser reproduzido (uma ação).


Dreamweaver 3.0
Vamos, neste tópico, criar a página inicial da home page Agenda Cultural
e acrescentar alguns botões que serão, posteriormente, a barra de nave-
gação. Estes botões terão um comportamento associado a eles, onde
definiremos que o evento será quando o usuário passar o mouse sobre
eles e a ação a ser executada será exibir outro botão (com a cor realçada,
por exemplo).

Na janela do documento, selecione a opção Novo do menu Arquivo.
Uma nova janela sem título será apresentada, e nela criaremos a página
inicial da home page. Como exemplo, insira, no início da página, uma
figura que já tenha sido criada (ou somente um texto) que represente o
nome da home page que o usuário verá. Como esta página será a pri-
meira a ser exibida no navegador, ela deve conter um pequeno texto ex-
plicando o conteúdo e o objetivo do site, portanto, insira também algum
texto de apresentação (comece a digitar o texto dois parágrafos abaixo,
pois acima dele iremos inserir as imagens cambiáveis).


Dreamweaver 3.0
Na Web, a home page padrão 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 apresentação do
site”). Vamos, então, salvar esta página que estamos criando com o nome
index.htm.

Selecione a opção Salvar do menu Arquivo. Na caixa de diálogo Salvar
Como, localize a pasta Agenda_Cultural (que contém todos os arquivos
do site), e na caixa de texto Nome do arquivo, digite index.htm (como
mostra a próxima figura). Depois clique no botão Salvar.

Agora vamos definir um título para essa página. Selecione a opção Pro-
priedades da página no menu Modificar. Na caixa de diálogo de mes-
mo nome, digite Agenda Cultural na caixa de texto Título, depois clique no
botão OK.


Dreamweaver 3.0

Com a página quase completa, só falta inserirmos as imagens cambiáveis
e depois os links para as outras páginas que criamos anteriormente.
Para criar uma imagem cambiável, precisamos de duas imagens, as
quais devem possuir as mesmas dimensões (largura e altura). Uma ima-
gem (chamada primária) será inicialmente apresentada pelo navegador,
enquanto a outra só será mostrada quando o ponteiro do mouse for
posicionado sobre a imagem primária.

OBS: Estas imagens deverão ser previamente criadas em algum pro-
grama de criação/tratamento de imagens, como o Photoshop, Fireworks,
etc, e depois copiadas para a pasta do site.

Posicione o ponto de inserção entre o título da página e o texto de apre-
sentação (deixe-o centralizado). Na paleta de objetos, clique no botão
Inserir imagem cambiável ( ), ou selecione a opção Imagem
cambiável do menu Inserir. A caixa de diálogo Inserir imagem cambiável
aparecerá:


Dreamweaver 3.0

Nesta caixa de diálogo, digite um nome para o objeto que está sendo
inserido e defina qual será a imagem original e a imagem cambiável. Na
caixa de texto Nome da imagem digite botao1, clique no primeiro botão
Procurar e selecione o arquivo da imagem original, depois clique no se-
gundo botão Procurar e selecione o arquivo da imagem cambiável (por
enquanto não vamos inserir nada na última caixa de texto).

OBS: Deixe selecionada a opção Pré-carregar a imagem cambiável para
que a imagem cambiável seja carregada no cache do navegador durante
o carregamento da página, a fim de que não seja notada nenhuma pausa
entre a substituição de uma imagem por outra.

Clique no botão OK. Agora posicione o ponto de inserção no lado direito
da primeira imagem e insira uma outra imagem cambiável, onde esta se
chamará botao2 (lembre-se que estas imagens constituirão a barra de
navegação da primeira página do site). Repita o procedimento até inserir
as outras imagens (botao3 e botao4), como mostra a próxima figura.


Dreamweaver 3.0

De acordo com a figura anterior, selecione cada imagem e, no inspetor
de propriedades, digite 10 no campo de texto Espaço H para que haja um
espaço entre elas.

Para testar o efeito das imagens cambiáveis, devemos abrir a página em
um navegador. Estando com a página aberta na janela do documento,
pressione a tecla F12 (isso se o seu navegador for o Internet Explorer) ou
selecione a opção 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 substituída pela imagem cambiável. Feche o navegador para
retornar à janela do documento.


Dreamweaver 3.0
INSERINDO HYPERLINKS

Um hyperlink estabelece um link (conexão) de uma página para outro
destino, onde o destino pode ser uma outra página da Web, uma figura,
um endereço de correio eletrônico, um arquivo (tal como um arquivo de
multimídia 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 “mãozinha”.

Assim, a grande funcionalidade da Internet se dá graças à existência dos
links, os quais permitem a navegação entre as páginas dos sites. Atra-
vés dos hyperlinks, você pode vincular suas páginas a outros documen-
tos que estejam dentro do seu próprio site ou em qualquer lugar do mun-
do. Quando falamos em documentos, entende-se como sendo imagens,
arquivos multimídia, programas ou outras páginas da Web.

Com o Dreamweaver, é possível criar facilmente os seguintes tipos de
vínculos:

Vínculos de caminho absoluto: apontam para uma localização na
Internet fora do site no qual a página atual está localizada. Para esse tipo
de vínculo devemos informar a URL completa do documento vinculado,
inclusive o protocolo a ser utilizado (normalmente, http:// para as páginas
da Web).

Vínculos 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 através da hierarquia de pastas, do documento atual ao vinculado, e
na especificação desse caminho, não coloque a parte da URL absoluta,
pois é a mesma para ambos os documentos.

Vínculos para âncoras identificadas: vinculam a um ponto previamen-
te identificado dentro de uma página, onde este ponto pode estar na mes-
ma página ou em uma localização específica em outra página.

Vínculos de correio eletrônico: abrem uma janela de mensagem (uti-
lizando o programa de correio eletrônico associado ao navegador do usu-
ário).


Dreamweaver 3.0
VÍNCULOS DE CAMINHO RELATIVO

Vamos, agora, definir os links para as imagens cambiáveis que inseri-
mos na página principal do site (index.htm). Como a página que conterá
o link e o documento de destino estão na mesma pasta, então utilizare-
mos os vínculos de caminho relativo.

Antes de criarmos os links, deveremos criar uma outra página, onde a
imagem do botão Filmes da página principal conterá um link para esta
nova página. Esta página, que terá como título Filmes, exibirá os nomes
dos filmes, onde cada nome será um link para a página apropriada.

Selecione a opção Novo do menu Arquivo. Salve esta nova página na
pasta Agenda_Cultural e dê o nome de filmes.htm ao arquivo. Depois
exiba a caixa de diálogo Propriedades da página e digite Filmes na caixa
de texto Título. Por fim, insira o conteúdo na página Filmes de maneira
que fique parecido com a próxima figura.


Dreamweaver 3.0
Agora, exiba a página Agenda Cultural (arquivo index.htm) e clique no
segundo botão para selecioná-lo, assim as propriedades da imagem serão
exibidas na janela Inspetor de propriedades (se a janela do inspetor não
estiver aberta, selecione a opção Propriedades do menu Janela).

No inspetor de propriedades, clique na pasta ao lado da caixa de texto
Vínculo (como mostra a figura a seguir) e encontre o arquivo que será
exibido quando a imagem (ou o botão) receber um clique, ou seja, seleci-
one o arquivo filmes.htm.

Abaixo da caixa de texto Vínculo, no inspetor de propriedades, existe uma
outra caixa denominada Destino. O campo Destino é um atributo de links
o qual especifica onde o link em questão deve ser aberto: na mesma
janela ou em uma nova. Clique na setinha do campo Destino e veja as
opções existentes.


Dreamweaver 3.0
A opção blank faz o link abrir em uma nova janela em branco do navega-
dor (tendo-se duas janelas abertas). Já a opção top faz o link substituir o
conteúdo da janela atual (neste caso ficamos apenas com uma janela
aberta). As outras opções 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 página filmes.htm, precisamos transformar os nomes dos fil-
mes em hyperlinks, para que cada um, quando receber um clique, abra a
página do filme apropriada.

Com o arquivo filmes.htm aberto na janela do documento, selecione o
texto Missão Impossível 2. No inspetor de propriedades, clique na pasta
da caixa de texto Vínculo, na caixa de diálogo Selecione o arquivo que
surgirá, localize o arquivo missao_impossivel.htm e depois clique no bo-
tão Selecione. Você verá que o texto já ficará sublinhado, indicando que
agora ele é um hyperlink.

Faça a mesma coisa com os outros três textos: 60 Segundos (vincule-o
ao arquivo 60_segundos.htm), O Patriota (vincule-o ao arquivo
patriota.htm) e Premonição (vincule-o ao arquivo premonicao.htm).


Dreamweaver 3.0
Salve seus arquivos. Ainda falta inserirmos outros links na página
filmes.htm e nas páginas referentes a cada filme. Da página filmes.htm
deverá haver links para a página inicial (index.htm), para a página refe-
rente aos shows e aos teatros (que ainda não existem, e ficará a seu
cargo criá-las e estabelecer os links). Da página referente a cada filme
deverá haver um link que volte à página 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 exibição do mapa do site é ideal para
fazer storyboards ou criar o layout da estrutura do site, além de poder ser
utilizado para adicionar novos arquivos a um site ou modificar, adicionar
ou remover vínculos.

Para exibir um mapa de site, selecione a opção Mapa do site do
menu Janela, isto se a janela Site estiver fechada. Agora, se esta
janela estiver aberta, clique no botão Mapa do site ( ) na própria
janela.


Dreamweaver 3.0
Como padrão, o mapa exibe dois níveis da estrutura do site. Clique nos
sinais de adição (+) ou subtração (-) ao lado de uma página para mostrar
ou ocultar as páginas vinculadas abaixo do segundo nível.

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 não for o Internet Explorer, utilize a opção
Visualizar no navegador do menu Arquivo). A janela do seu navegador
será aberta e exibirá a página 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 não é necessário salvar o documento previamente.


Dreamweaver 3.0
Quando visualizamos qualquer arquivo no navegador, o Dreamweaver
cria um arquivo temporário (cujo nome inicia-se com as letras TMP) que
ele utiliza como o arquivo de visualização 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 botão Atualizar ou Refresh, a versão mais
atual do arquivo não será mostrada, será necessário fechar a janela do
navegador e visualizar o arquivo novamente.


Dreamweaver 3.0
VÍNCULOS DE CAMINHO ABSOLUTO E ÂNCORAS
IDENTIFICADAS

Todos os hyperlinks que inserimos no site possuem vínculos de caminho
relativo, pois todos os arquivos relacionados estão localizados na pasta
Agenda_Cultural. Para inserir vínculo de caminho absoluto (quando o
destino do link não 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 pági-
na sobre os produtos da Macromedia, você deveria digitar na caixa de
texto Vínculo: http://www.macromedia.com/br/software.

Agora, para definir um link que aponte para determinada parte (ou ponto)
da página, é necessário usar as âncoras identificadas. Geralmente, as
âncoras identificadas são utilizadas para levar um usuário a um tópico
específico ou para a parte superior ou inferior de um página, fazendo-o
chegar rapidamente à posição selecionada.

Como exemplo, vamos criar uma âncora identificada na página 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 família. Primeiro devemos dar um nome à ima-
gem, já que ela será exibida quando clicarmos na palavra família.

Deixe o ponto de inserção posicionado ao lado da imagem e depois sele-
cione a opção Âncora com nome do menu Inserir. Na caixa de texto
Inserir âncora com nome digite um nome para a âncora, como mostra a
próxima figura (esse nome deverá ser uma única palavra em letras mi-
núsculas ou números). Depois clique no botão OK.


Dreamweaver 3.0

Agora, na janela do documento, selecione a palavra família e, na caixa de
texto Vínculo do inspetor de propriedades, digite o sinal de libra (#) segui-
do do nome da âncora, ou seja, digite #familia (sem espaço entre o sinal
e o nome). Depois pressione a tecla Enter.


Dreamweaver 3.0
A palavra família agora está vinculada com a âncora identificada. Para
ver o resultado, exiba esta página no navegador.

OBS: Se a âncora estiver na mesma página (como foi o nosso caso),
insira na caixa de texto Vínculo apenas o sinal de libra seguido do nome
da âncora. Se a âncora estiver em uma página e o link para ela em outra
(mas ambos na mesma pasta), digite na caixa de texto Vínculo o nome
da página seguido do sinal de libra e do nome da âncora (algo como:
nomedapágina.htm#nomedaâncora). Se a âncora estiver em um outro
local da Internet, será necessário digitar o endereço absoluto e no final o
nome da página mais o sinal e o nome da âncora (exemplo: http://
www.site.com.br/nomedapágina.htm#nomedaâncora).

Elementos invisíveis

Quando inserimos uma âncora identificada na imagem do tópico anteri-
or, uma pequena âncora apareceu ao lado da imagem.

OBS: Para exibir ou ocultar os elementos invisíveis (no caso, a pequena
âncora), utilize a opção Elementos invisíveis do menu Exibir.


Dreamweaver 3.0
Os elementos invisíveis possuem este nome pois não são exibidos no
navegador, mas somente na janela do documento (desde que a opção
Exibir elementos invisíveis esteja selecionada).

Na janela do documento todos os elementos invisíveis aparecem na for-
ma de pequenos ícones. Temos como exemplos de elementos invisí-
veis: formulários, âncoras com nome, comentários e roteiros.

Para visualizar as propriedades de um elemento invisível, dê um clique
duplo sobre ele para abrir o inspetor de propriedades, e assim saber o
que é e o que faz aquele elemento invisível.

ALTERANDO AS CORES DOS VÍNCULOS

Através da caixa de diálogo Propriedades da página, podemos alterar as
cores dos vínculos (ou links), já que cada vínculo assume três estados:

Vínculos: quando os usuários ainda não clicaram no link.
Vínculos visitados: quando os usuários já clicaram no link e já visitaram a
página de destino.
Vínculos ativos: quando os usuários estão 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 usuário saber quais as partes do site que ele já visitou.

Com uma página aberta na janela do documento, abra a caixa de diálogo
Propriedades da página (através do menu Modificar). Você verá as cai-
xas de texto Vínculos, Vínculos visitados e Vínculos ativos, e para alterar
a cor, basta clicar no botão de cor que se encontra ao lado de cada caixa.
Na paleta de cores que será apresentada, clique na cor desejada.


Dreamweaver 3.0

Na paleta de cores você também pode clicar no botão Cores ( ) para
abrir a caixa de diálogo Cor e escolher outra cor que não esteja na paleta
de cores.


Dreamweaver 3.0
CRIANDO PÁGINAS COM MOLDURAS

As molduras (também conhecidas como frames ou quadros) são regi-
ões retangulares que podemos inserir nas páginas da Web. Uma página
baseada em molduras é dividida em várias janelas dentro de janelas,
assim, uma única página do site pode conter várias molduras, cada uma
podendo exibir um conteúdo diferente. Utilizamos as molduras quando
queremos que determinada região da página permaneça estática (apa-
reça o tempo) enquanto outras regiões sempre mudam.

Cada moldura é um arquivo HTML distinto, com seu próprio conteúdo,
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 página, pois este arquivo (que representa o
conjunto de todas as molduras da página) é o que será exibido no nave-
gador. Sendo assim, se temos uma página da Web com duas molduras,
na verdade temos três arquivos distintos: o arquivo do conjunto de mol-
duras e os dois arquivos com o conteúdo 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 páginas utili-
zando molduras.

Para criar um novo site, selecione a opção Novo site do menu Site. Na
caixa de diálogo 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 próxima figura). Depois clique
no botão Abrir.


Dreamweaver 3.0
Em seguida clique no botão Salvar para retornar à caixa de diálogo Defi-
nição de site.

Estando com o Nome do site e a Pasta raiz local definidos,
clique no botão OK. A janela Site – agenda2 será exibida.

Vamos começar a construção do site criando o arquivo
index.htm, que corresponde à página inicial do site.

Na janela do documento, exiba a paleta de objetos (selecio-
ne a opção Objetos do menu Janela). Na paleta de obje-
tos, selecione o painel Molduras.

O painel Molduras contém 8 botões utilizados criar layouts
predefinidos de conjuntos de molduras. Posicione o mouse
sobre cada botão e veja que aparecerá um pequeno texto
informando o objetivo do botão.


Dreamweaver 3.0
Estando com a janela do documento ativa, clique no botão Inserir mol-
dura esquerda (primeiro botão) do painel Molduras da paleta de objetos.
A página será dividida em duas regiões (se você não estiver vendo uma
borda cinza, selecione a opção Bordas da moldura do menu Exibir).

A moldura da esquerda irá conter a barra de navegação do site (sendo
que esta moldura ficará sempre visível) e a moldura da direita terá seu
conteúdo variável. Se necessário, podemos inserir outras molduras nes-
ta mesma página, através do menu Inserir, opção Molduras.

Vamos inserir uma moldura superior onde esta conterá a imagem que
representa o título da home page, que é Guia Cultural. Dê um clique na
moldura da direita para inserir o ponto de inserção, depois no menu Inse-
rir, vá até a opção Molduras e clique em Superior. Quando utilizamos
esta opção, ou seja, quando dividimos uma moldura que já existe na
página (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 página contém três molduras, as quais receberão nomes dife-
rentes na hora em que formos salvá-las.


Dreamweaver 3.0
Poderemos inserir o conteúdo diretamente nas páginas com molduras
(ou seja, criar uma página 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 páginas, copie todos os arquivos (menos o
index.htm) da pasta Guia_Cultural para a pasta Guia_Cultural_Moldura
(faça isso através do Windows Explorer).

OBS: Mesmo com o conjunto de molduras aberto na janela do documen-
to, você poderá realizar modificações nas páginas dos arquivos
filmes.htm, 60segundos.htm, etc, selecionando a opção Abrir do menu
Arquivo (a página será aberta em uma outra janela de documento). Se
quiser, faça as alterações na página (modifique o fundo, as imagens,
formate a fonte, entre outras coisas) e depois salve o arquivo. Observe a
próxima figura e veja as alterações que foram feitas na página Filmes.


Dreamweaver 3.0
Agora, dê um clique na moldura superior da sua página para inserir o
ponto de inserção, depois, através do menu Inserir, opção Imagem, insi-
ra a imagem do título da home page (a imagem que apresenta o texto
Guia Cultural), como mostra a próxima figura.

Posicione o ponto de inserção na moldura da direita para inserirmos o
texto de apresentação do site. No menu Arquivo, selecione a opção Abrir
na moldura. Na caixa de diálogo Selecione o arquivo de HTML, selecio-
ne o arquivo index.htm da pasta Guia_Cultural, depois clique no botão
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 botão Sim; na
próxima caixa de diálogo apresentada (Copiar o arquivo como), digite
primeira.htm na caixa de texto Nome do arquivo.

O conteúdo 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
SALVANDO AS MOLDURAS

Como já comentamos, cada moldura da página constitui um arquivo,
portanto, na página que criamos e inserimos três 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 três.

Para salvar o conjunto das molduras e depois cada moldura individual-
mente, selecione a opção Salvar tudo do menu Arquivo. Na caixa de
diálogo 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 próxima figura, o primeiro arquivo a ser salvo é o conjunto das moldu-
ras, e como inicialmente todo o conjunto é que será exibido no navegador
(e não uma moldura separadamente), digite index.htm como nome do
arquivo do conjunto das molduras e clique no botão Salvar.

A próxima moldura que o Dreamweaver destaca é a moldura superior.
Na caixa de texto Nome do arquivo digite superior.htm e clique no botão
Salvar.


Dreamweaver 3.0

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 página que criamos é então formada por quatro arquivos: superior.htm,
esquerda.htm, primeira.htm e index.htm.


Dreamweaver 3.0
SELECIONANDO MOLDURAS

Muitas alterações 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-
leção no inspetor de molduras e na janela do documento.

O inspetor de molduras (mostrado na próxima figura) é exibido através
do menu Janela, opção Molduras.

O inspetor de molduras fornece uma representação visual das molduras
existentes na página. As molduras são envoltas por uma linha fina cinza,
e cada moldura é identificada por um nome.

Para selecionar uma moldura através 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 própria 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

Quando as páginas de um site são criadas utilizando-se molduras, o
arquivo que representa o conjunto dos molduras (no nosso caso,
index.htm) será a página para a qual seu URL apontará. Dessa maneira,
precisamos definir um título, já que este título será exibido na barra de
título da janela do navegador.

Através do inspetor de molduras, selecione o conjunto de molduras
clicando na borda externa, como mostra a figura anterior. Agora, para
definir o título Guia Cultural, utilize a opção Propriedades da página do
menu Modificar, e realize a alteração da mesma maneira que você apren-
deu quando estava construindo páginas sem molduras. Depois salve sua
página através da opção Salvar tudo do menu Arquivo.


Dreamweaver 3.0
PROPRIEDADES DAS MOLDURAS

As propriedades das molduras determinam o nome da moldura, o arqui-
vo de origem, as margens, paginação, redimensionamento e bordas de
cada moldura em um conjunto e as propriedades dos conjuntos de mol-
duras controlam as dimensões 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 opção Propriedades do menu Janela (isso
se o inspetor de propriedades estiver fechado). Se necessário, clique na
seta de expansão, 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 referência de destino e roteiro de
hipervínculos. 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. Após digitar o nome no campo, pressione a
tecla Enter ou então 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. Paginação: determina se as barras de rolagem aparecerão quando
não houver espaço suficiente para exibir o conteúdo da moldura. A defini-
ção padrão da maioria dos navegadores é Autom.


Dreamweaver 3.0
4. Sem redimens.: se esta opção for selecionada, os usuários não pode-
rão arrastar as bordas das molduras no navegador.

5. Bordas: controlam a borda da moldura. As opções são Sim, Não e
Padrão. A definição padrão da maioria dos navegadores é Sim. Para
desativar uma borda, todas as molduras a ela adjacentes deverão estar
definidas como Não.

6. Cor da borda define a cor de todas as bordas adjacentes à moldura.
Essa definição anula a cor da borda do conjunto de molduras.

7. Largura da margem: define a largura das margens esquerda e direita,
em pixels (o espaço entre as bordas da moldura e o seu conteúdo).

8. Altura da margem: define a altura das margens superior e inferior, em
pixels (o espaço entre as bordas da moldura e o seu conteúdo).

Além de alterar todas estas propriedades das molduras, você também
pode modificar o tamanho das molduras, e uma maneira fácil 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 espaço que o navega-
dor reservará para uma moldura, quando o tamanho da tela não permitir
que as molduras sejam exibidas no tamanho em que foram criadas.

OBS: Para abrir a página 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 opção Bordas da moldura para que
as bordas sejam exibidas e assim você poder visualizar as molduras
claramente.


Dreamweaver 3.0
INSERINDO UMA BARRA DE NAVEGAÇÃO

Vamos inserir, na moldura esquerda, uma barra de navegação. Para isso,
utilizaremos a opção Barra de navegação do menu Inserir. Quando
uma imagem for utilizada como um botão de uma barra de navegação, a
imagem pode apresentar quatro estados:

• Ativa: a imagem que aparecerá quando a página for inicialmente
carregada.
• Sobreposta: a imagem que aparecerá quando o ponteiro for
movido sobre uma imagem.
• Inativa: a imagem que aparecerá quando o usuário clica sobre
ela.
• Inativa e sobreposta: a imagem que aparecerá quando o pon-
teiro for movido sobre ela, após o clique do usuário.

Dessa maneira, os botões (e seus estados) já deverão existir, onde es-
tes podem ser criados em qualquer programa de edição 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 navegação (essas
imagens foram criadas no Photoshop).

Posicione o ponto de inserção no frame da esquerda. Agora selecione a
opção Barra de navegação do menu Inserir, a caixa de diálogo Inserir
barra de navegação será exibida.


Dreamweaver 3.0

Nesta caixa de diálogo você definirá um nome para o elemento que fará
parte da barra de navegação, os quatro arquivos de imagens correspon-
dentes a cada estado, a página que será aberta quando a imagem rece-
ber um clique, se a página 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 botão 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 arquivo
primeira.htm, pois
como estamos inserin-
do a imagem do botão
Home na barra de na-
vegação, sempre que o usuário clicar neste botão a página inicial do site
(primeira.htm) deverá ser exibida. Na caixa ao lado selecione a opção
molduraprincipal (para que a página seja aberta nesta moldura). Por fim,
na caixa de opção Inserir, selecione Verticalmente.


Dreamweaver 3.0
Com este procedimento inserimos um elemento (botão) na barra de na-
vegação, ainda precisamos inserir mais três (filmes, teatro e shows).
Para inserir o próximo elemento, clique no botão que apresenta a ima-
gem do sinal de adição, localizado na parte superior da caixa de diálogo
Inserir barra de navegação. Todos os campos estarão livres para que
você possa inserir e definir outro elemento.

Depois de inserir todos os botões que constituirão a barra de navegação,
clique no botão OK. Você verá que os elementos da barra de navegação
estarão muito perto uns dos outros, e para resolver esta situação, seleci-
one cada botão (dando um clique sobre ele) e, no inspetor de proprieda-
des, insira, por exemplo, o valor 15 na caixa de texto Espaço V. Ainda no
inspetor de propriedades, verifique se na caixa Destino está selecionada
a opção molduraprincipal.


Dreamweaver 3.0
OBS: Para alterar alguma propriedade da barra de navegação (inserir/
excluir um elemento, mudar o hyperlink, etc), selecione a barra de nave-
gação e depois escolha a opção Barra de navegação do menu Modifi-
car. Para alterar alguma propriedade da moldura relativa a propriedades
da página (como a cor ou imagem de fundo, as cores dos vínculos, etc),
deixe o ponto de inserção posicionado na moldura e depois escolha a
opção Propriedades da página do menu Modificar (ou então clique
com o botão direito do mouse na moldura desejada e selecione a opção
Propriedades da página no menu pop-up que aparecerá).

Agora é bom você visualizar a página principal no navegador e testar os
hyperlinks. Pressione a tecla F12; se for exibida uma janela avisando que
é necessário salvar a página antes de visualizá-la no navegador, clique
no botão OK.

Assim, você viu que criar páginas com molduras não é um trabalho difí-
cil, e a vantagem é que você pode exibir uma parte da página o tempo
todo, enquanto outras partes podem ter o conteúdo alterado. Quando
você insere os links nas páginas, preocupe-se com o destino destes
links. Por exemplo, na página Filmes, que apresenta o nome dos filmes
como links, certifique-se onde a página será aberta quando o usuário
clicar em algum destes links, sendo que temos as seguintes opções:

Blank: faz o link abrir em uma nova janela em branco no navegador.
Top: faz o link substituir o conteúdo 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
CRIANDO TABELAS

As tabelas são muito utilizadas para exibir e organizar os dados e as
imagens presentes nas suas páginas. As tabelas são compostas por
três componentes básicos: as linhas, as colunas e as células (que são
os pequenos retângulos criados pela interseção de uma linha com uma
coluna), sendo que nas células podemos inserir textos e imagens, e os
textos podem ser formatados como se estivessem em qualquer outra
parte da página.

Para criar uma tabela, utilizamos a paleta de objetos ou o menu Inserir.
Depois de construídas, 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 construída em uma
página da janela do documento, e observe que alteramos algumas pro-
priedades desta tabela e de algumas células. Na região A alteramos a
cor de fundo das células e a cor da borda também, na região B foram
mescladas três células, resultando em uma célula só, e também altera-
mos a cor de fundo dela. A célula da região C foi dividida em duas colu-
nas, e na célula da região D inserimos uma imagem de fundo, alteramos
também a cor da borda de toda a tabela. Todas as alterações foram rea-
lizadas através do inspetor de propriedades.


Dreamweaver 3.0
PROPRIEDADES DA TABELA E DAS CÉLULAS

Para especificar as propriedades das tabelas ou de alguma célula, você
deve primeiro selecionar toda a tabela ou apenas as células desejadas,
depois escolher a opção 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 próxima
figura (“cruz”), ou então, com o cursor posicionado em alguma célula da
tabela, pressione Ctrl + A. Para selecionar todas as células de uma linha
ou coluna, posicione o ponto de inserção na margem esquerda de uma
linha ou no alto de uma coluna e dê um clique quando a seta de seleção
aparecer; para selecionar blocos de células, clique em uma célula e ar-
raste o mouse horizontal ou verticalmente. Se quiser selecionar células
não adjacentes, pressione a tecla Ctrl enquanto clica nas células.

Com a tabela ou células 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
• Linhas e Cols: exibem o número de linhas e colunas na tabela.
• L e U: utilizados para definir a largura e a altura da tabela (geralmente
não é necessário definir a altura de uma tabela).
• Alinhar: especifica como a tabela se alinhará aos outros elementos no
mesmo parágrafo, como texto ou imagens.
• Espaço V e Espaço H: especificam o número de pixels de espaço em
branco acima, abaixo e em ambos os lados da tabela.
• Os botões localizados ao lado dos campos Espaço V e Espaço H são
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 célula: especifica o número de pixels entre o conteúdo da
célula e os seus limites (ou parede).
• Espaço entre células: especifica o número de pixels entre cada célula
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 aparência tridimensional à borda (para
retornar ao sombreado em tons de cinza padrão, 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 não forem atribuídos valores específicos de espaçamento
e preenchimento da célula, os navegadores exibirão a tabela como se o
espaçamento da célula fosse 2 e o preenchimento da célula 1.

Campos do inspetor de propriedades das células da tabela:


Dreamweaver 3.0
• Horiz: define o alinhamento horizontal do conteúdo de uma célula (que
pode ser à esquerda, à direita, no centro ou com o padrão do navega-
dor).
• Vert: define o alinhamento vertical do conteúdo de uma célula (que
pode ser no alto, no meio, embaixo, na linha de base ou com o padrão
do navegador).
• L e U: especificam a largura e altura das células selecionadas, em
pixels (para utilizar percentagens, coloque um sinal de percentual (%)
após o valor).
• Campo Fundo (acima): utilizado para definir uma imagem de fundo
para uma célula.
• Campo Fundo (embaixo): utilizado para definir a cor do fundo de uma
célula.
• Borda: especifica a cor de borda para as células selecionadas.
• Botão Mesclar as células (que está na parte inferior esquerda do ins-
petor): combina as células, linhas ou colunas selecionadas e cria uma
célula.
• Botão Dividir a célula (que está na parte inferior esquerda do inspetor):
divide a célula em duas.
• Sem quebra: se selecionado, impede a quebra automática de linhas
(esta opção expande as células, a fim de que acomodem todos os
dados à medida que forem digitados).
• Cabeçalho: faz com que as células ou linhas selecionadas compor-
tem-se como um cabeçalho de tabela (geralmente o conteúdo des-
sas células fica em negrito e no centro).


Dreamweaver 3.0
OUTRAS MODIFICAÇÕES NA TABELA

Com relação às tabelas, ainda podemos realizar outras operações, como
inserir e excluir linhas e colunas, aninhar uma tabela dentro de uma célu-
la de outra tabela, dividir células, mesclar células, 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ê faça isso de uma maneira muito
simples. Basta clicar em uma célula na qual deverá aparecer a nova
linha ou coluna e escolher uma das duas opções: no menu Modificar,
apontar para a opção Tabela e clicar em Inserir linha ou Inserir colu-
na, ou, outra opção é clicar com o botão direito do mouse na célula, no
menu contextual apontar para a opção Tabela e escolher a opção Inse-
rir coluna ou Inserir linha.

Utilizando qualquer uma dessas opções, a nova linha será inserida aci-
ma da célula selecionada e a nova coluna à esquerda da célula selecio-
nada. Para especificar se as novas linhas ou colunas deverão aparecer
antes ou depois da linha ou coluna selecionada, use a opção Inserir
linhas ou colunas (do menu Modificar ou do menu contextual).

Utilizando a opção Inserir linhas ou colunas, a caixa de diálogo da figura
anterior é exibida, e você poderá definir o número de linhas ou colunas a
ser inserido, e se a linha será inserida acima ou abaixo da célula seleci-
onada ou a coluna à direita ou esquerda da célula selecionada.


Dreamweaver 3.0
OBS: Quando a tecla Tab for pressionada na última célula de uma tabe-
la, será adicionada automaticamente outra linha à tabela.

Para excluir uma linha ou coluna, clique em uma célula que pertença à
linha ou coluna que você deseja excluir, depois selecione as opções 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
botão direito do mouse).

Mesclar células
Mesclar células significa produzir uma única célula a partir da combina-
ção de células adjacentes e que constituam uma região retangular. Para
mesclar células, selecione as células desejadas (lembre-se que as célu-
las selecionadas deverão constituir uma região retangular), depois clique
no botão Mesclar as células ( ), no inspetor de propriedades, ou en-
tão no menu Modificar, aponte para a opção Tabela e clique em Mes-
clar células. O conteúdo das células individuais será colocado na célula
mesclada resultante.

Na figura a seguir observe que as quatro células do centro da tabela
foram mescladas, resultando em uma célula só.


Dreamweaver 3.0
Dividir células

Você pode dividir uma célula em um determinado número de linha ou
coluna, não importando se a célula foi mesclada anteriormente. Para di-
vidir uma célula, deixe o ponto de inserção posicionado na célula deseja-
da, depois clique no botão Dividir as células ( ) do inspetor de propri-
edades, ou no menu Modificar, aponte para a opção Tabela e clique em
Dividir a célula. Na caixa de diálogo Dividir a célula que será exibida,
escolha se a célula será dividida em linhas ou colunas e, em seguida,
digite o número de linhas ou colunas.


Dreamweaver 3.0
CRIANDO E FORMATANDO UMA TABELA

Vamos criar uma tabela em um página do site Guia Cultural, onde esta
tabela apresentará apenas o nome dos filmes com algumas informa-
ções.

Crie uma nova página a partir da janela do documento do segundo site
Guia Cultural (que apresenta as páginas com molduras). Com a paleta
de objetos visível, clique no botão Inserir tabela ( ); a caixa de diálo-
go Inserir tabela será exibida.

Nesta caixa de diálogo digite, no campo Linhas, o número de linhas que a
tabela terá, e no campo Colunas, especifique o número 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 não haja borda digite 0).
Em Preenchimento da célula, especifique o número de pixels entre o
conteúdo da célula e os seus limites (ou parede), e no campo
Espaçamento entre as células, especifique o número de pixels entre cada
célula da tabela. Essas propriedades poderão ser alteradas posterior-
mente, como vimos no tópico anterior sobre as propriedades da tabela e
das células da tabela.


Dreamweaver 3.0
Na sua caixa de diálogo Inserir tabela, digite os valores como mostra a
figura anterior. Agora, na tabela que foi inserida na página, digite as infor-
mações nas células de acordo com a próxima figura.

OBS: Conforme você vai digitando os textos, as células da tabela vão se
expandindo automaticamente. Para movimentar-se pela tabela, pressio-
ne a tecla Tab para deslocar-se para a próxima célula ou as setas do
teclado para mover-se entre as células (ou dê um clique na célula dese-
jada). A combinação de teclas Shift+Tab faz voltar à célula anterior.

Selecione a primeira linha e no inspetor de propriedades, marque a caixa
de seleção Cabeçalho, depois defina uma cor de fundo para as células
do cabeçalho. Selecione todas as outras células (menos as da primeira
linha), centralize-as e altere o tipo da fonte, tudo através do inspetor de
propriedades. Agora selecione toda a tabela e defina uma cor diferente
para as bordas claras.

Quando inserimos o conteúdo nas células, digitamos Clique aqui nas
células da última coluna. Isto significa que devemos transformar o texto
em um hyperlink, para que quando o usuário der um clique, aquelas pági-
nas já existentes relacionadas a cada filme sejam exibidas (lembre-se
que essas páginas poderão ser abertas, modificadas e salvas na pasta
Guia_Cultural_Moldura).


Dreamweaver 3.0
Assim, selecione o texto da célula da segunda linha da última coluna e, no
inspetor de propriedades, digite missao_impossivel.htm na caixa de texto
Vínculo (ou clique na pastinha para localizar e selecionar o arquivo).

Repita o procedimento e insira os links nas outras células da última colu-
na da tabela. Agora salve a página na pasta Guia_Cultural_Moldura e dê
o nome de tabfilmes.htm para ela. Depois defina um título para a página,
como por exemplo Relação dos Filmes.

Você também pode fazer com que o botão da barra de navegação (o
botão Filmes) aponte para essa página, ou seja, quando ele receber um
clique, a página relação de Filmes será aberta.

Nos capítulos posteriores iremos estudar as Camadas, onde as tabelas
e camadas permitem controlar a posição dos elementos na página, e
você verá que com o Dreamweaver é fácil converter um layout de tabela
em um layout de camada, mas as camadas não contam com suporte
nos navegadores 3.0 e menos avançados.


Dreamweaver 3.0
CRIANDO FORMULÁRIOS

Os formulários são bastante utilizados nos sites da Web, pois através de-
les é possível coletar informações de várias pessoas, solicitar a opinião
dos visitantes, fazer uma votação onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulários permitem
coletar informações dos usuários. As respostas fornecidas pelos visitan-
tes são armazenadas, e depois você pode acessá-las e compará-las.

OS OBJETOS DE FORMULÁRIOS

Os formulários são compostos por vários objetos, onde uns oferecem
opções para serem clicados e outros exibem campos de texto editáveis
(através da utilização de comportamentos, você poderá validar as infor-
mações digitadas pelo usuário). A próxima figura exibe um simples for-
mulário que foi criado em uma página.


Dreamweaver 3.0
Os itens numerados na figura anterior representam alguns objetos de
formulário, os quais são denominados:

1, 2, 5 e 7 – Campo de texto
3 e 4 – Menu de lista
6 - Botão de opção
8 - Botão

Além desses quatro objetos, ainda temos: caixa de seleção, campo de
arquivos, campo de imagens, campo oculto e menu de salto.
Campos de texto: também chamados caixas de texto, são utilizados
para coletar informações dos usuários, onde estes poderão digitar qual-
quer tipo de texto: alfabético ou numérico. O texto digitado pode ser exibi-
do como uma linha simples ou linhas múltiplas (exibem uma barra de
rolagem).
Botões: realizam tarefas quando são clicados, ou seja, são aquilo que
faz o formulário fazer algo, como enviar as informações e redefinir os
dados dos formulários.
Campos de imagens: podem ser utilizados no lugar do botão Enviar,
onde este pode ser substituído por um botão de imagens.
Caixas de seleção: permitem que o usuário faça uma ou mais seleções
em um conjunto de opções.
Botões de opção: enquanto as caixas de seleção podem aparecer indi-
vidualmente ou em grupos, os botões de opção aparecem sempre em
grupos. A seleção de um dos botões do grupo cancela a seleção de
todos os outros.
Menus de lista: apresentam um conjunto de valores que os usuários
poderão escolher.
Campos de arquivos: permitem que o usuário procure os arquivos nos
discos rígidos, carregando-os como dados do formulário.
Campos ocultos: permitem armazenar informações (como o destinatá-
rio dos dados do formulário ou o assunto do formulário) que não forem
relevantes ao usuário, mas que serão utilizadas pelo aplicativo que pro-
cessa o formulário.
Menu de salto: permite inserir um menu no qual cada opção se vincula
a um documento ou arquivo.


Dreamweaver 3.0
INSERINDO OBJETOS NA PÁGINA

Vamos agora criar uma página que conterá um formulário. Na janela de
documento do site Guia Cultural (com molduras), clique na opção Novo
do menu Arquivo para criar uma nova página. Salve a página com o
nome formulario.htm (na pasta Guia_Cultural_Moldura) e depois defina o
seguinte título para a página: Formulario.

OBS: Antes de inserir o formulário, pressione Enter e deixe o cursor
posicionado no segundo parágrafo, pois acima do formulário iremos digitar
algum texto.
Para criar um formulário, clique na opção Formulário do menu Inserir,
ou então, na paleta de objetos, selecione o painel Formulários e depois
clique no botão Inserir formulário. Uma borda tracejada vermelha será
inserida na página (se depois de inserir um formulário você não estiver
vendo nada, verifique se a opção Elementos invisíveis do menu Exibir
está ativada).

Esta borda tracejada representa o formulário propriamente dito, e todos
os objetos de formulário serão inseridos dentro desta área retangular
tracejada. Por padrão, o formulário ocupa toda a largura da página, e a
altura é determinada pelo conteúdo que você coloca dentro das bordas
do formulário.

Todos os objetos que compõem o formulário devem apresentar um rótu-
lo, assim os usuários saberão, por exemplo, o que digitar em cada cam-
po de texto e para que serve os outros campos do formulário.
OBS: Para organizar e distribuir melhor os objetos dentro do formulário,
você poderá colocar uma tabela no formulário e inserir os campos do
formulário nas células da tabela.


Dreamweaver 3.0
Com o cursor posicionado no canto esquerdo do formulário, digite Nome:
(aplique o estilo negrito) e depois clique no botão Inserir campo de tex-
to ( ) do painel Formulário da paleta de objetos. Exiba também o ins-
petor de propriedades.

As propriedades do campo de texto (exibidas no inspetor de proprieda-
des) são 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 número máximo de caracteres que po-
dem ser exibidos no campo (comprimento do campo).
• Nº máx. de caract: define o número máximo de caracteres que podem
ser digitados no campo, como por exemplo, definir que os códigos
postais devem ter oito dígitos.
• Tipo Linha simples: utilizado quando você espera que a resposta dado
pelo usuário será curta.
• Tipo Multi-linha: utilizada quando a resposta a ser dada pelo usuário é
mais longa.
• Tipo Senha: exibirá um campo de texto do tipo Linha simples para que
o usuário digite uma determinada senha, sendo que o navegador exi-
birá marcadores ou asteriscos em vez dos caracteres que forem
digitados.


Dreamweaver 3.0
• 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 inserção após o Campo de texto camponome
e digite E-mail:, insira outro objeto Campo de texto onde o usuário irá
digitar o seu endereço de e-mail (propriedades desse campo de texto -
nome do campo: campoemail, larg. do caractere: 30, tipo Linha).

Pressione a tecla Enter e no próximo parágrafo digite Data de nasci-
mento:. Clique no botão Inserir Lista/menu ( ) do painel Formulário
da paleta de objetos.

No inspetor de propriedades, digite listadia no campo Lista/menu (este
campo é necessário e o seu nome deve ser exclusivo). Em Tipo, deixe a
opção Menu selecionada (a opção Lista permite definir uma altura (nú-
mero de itens exibidos simultaneamente) e indicar se o usuário poderá
selecionar diversos itens da lista).

Agora clique no botão Valores da lista para abrir a caixa de diálogo de
mesmo nome. Nesta caixa você irá definir quais os itens que serão 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 não for especificado
um valor, apenas o identificador será enviado ao aplicativo de
processamento.

Digite o número 1, clique no botão com o sinal de adição (+) e digite o
número 2, vá inserindo os números até chegar no 31. Para remover um
item da lista selecione-o e clique no botão de subtração (-). Os itens
aparecerão na ordem em que aparecem na caixa de diálogo Valores da
lista, e o primeiro item da lista é o que aparecerá quando a página for
carregada em um navegador. Utilize os botões de setas acima e abaixo
para reorganizar os itens na lista.


Dreamweaver 3.0

Agora, no inspetor de propriedades, selecione o número 1 no campo
Selecionados inicialmente (olhe próxima figura). Isso fará com que, quando
a página for aberta no navegador, o objeto listadia exiba o número 1 (se
quiser que o objeto apareça vazio, não selecione nada no campo Seleci-
onados incialmente).

Posicione o ponto de inserção após o objeto Lista/menu (denominado
listadia) e insira outro objeto de formulário 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

Após o campo listames, digite 19 e insira um Campo de texto, onde o
usuário 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 início do parágrafo o texto Opções de
uso da Internet:. Com o cursor na frente do texto, clique no botão Inse-
rir botão de opção ( ) do inspetor de objetos, do lado direito do botão
digite a primeira opção: Estudo, depois dê um clique no botão para
selecioná-lo.


Dreamweaver 3.0

No inspetor de propriedades, como mostra a figura anterior, digite
opcoesinter na caixa de texto Botão de opção (todos os botões de op-
ção que fizerem parte de um mesmo grupo deverão ter o mesmo nome).
O campo Valor selecionado é o valor que será enviado ao aplicativo de
processamento (um roteiro CGI, por exemplo) caso o botão seja seleci-
onado. Digite botaoestudo neste campo (cada botão de opção em um
grupo deve ter um Valor selecionado diferente).

O outro campo, Estado inicial, especifica se o botão estará ativo ou não
quando o formulário for carregado pela primeira vez. Apenas um botão
de um grupo pode apresentar o estado inicial Ativo.

Agora insira mais três botões de opção como mostra a próxima figura.
Cada botão deve apresentar o mesmo nome no campo Botão de opção
(opcoesinter) e no campo Valor selecionado, o nome botaopesquisa,
botaotrabalho e botaolazer.

No próximo parágrafo digite Comentários: e logo abaixo insira um objeto
Campo de texto, onde este deve apresentar as seguintes propriedades:
Larg. do caractere: 85, Tipo: Multi-linha, Número de linhas: 4, nome do
Campo de texto: campocoment.


Dreamweaver 3.0

No nosso formulário agora só falta inserirmos um botão que quando for
clicado enviará os dados contidos no formulário, e outro que apagará os
dados do formulário.

Após o campo de texto referente a Comentários, clique em Inserir bo-
tão ( ) do painel Formulário da paleta de objetos. Um botão será inse-
rido, posicione o ponto de inserção à direita deste botão e clique nova-
mente em Inserir botão. O primeiro botão será o Enviar e o segundo o
Redefinir, vamos então configurá-los.

Selecione o primeiro botão e no inspetor de propriedades, deixe os cam-
pos Botão e Denominação com a palavra Enviar. Agora selecione o se-
gundo botão e no campo Botão digite Redefinir, depois selecione, no cam-
po Ação, a opção Redefinir o formulário.

O formulário da página já está com todos os objetos inseridos e defini-
dos. No primeiro parágrafo, antes do formulário, digite o seguinte texto:
Preencha os campos abaixo, e envie suas dúvidas, sugestões ou recla-
mações. Centralize e formate o texto, depois insira uma imagem ou cor
de fundo na página.


Dreamweaver 3.0
VALIDANDO CAMPOS DO FORMULÁRIO

Como dissemos anteriormente, você poderá validar determinados cam-
pos à medida que o usuário estiver preenchendo o formulário. Como
exemplo, vamos validar o campo de texto onde o usuário deverá digitar o
endereço do seu e-mail (que é o campoemail), ou seja, o Dreamweaver
verificará se o campoemail contém o sinal @, já que todo endereço ele-
trônico deve apresentá-lo.

Selecione o campo de texto campoemail e clique na opção Comporta-
mentos do menu Janela. Na janela Comportamentos, dê um clique no
botão com o sinal de adição (+); um menu de contexto será apresentado
e neste menu selecione a opção Validar o formulário. Na caixa de diálo-
go de mesmo nome, selecione as opções de acordo com a próxima
figura e depois clique no botão OK.

Com este procedimento você inseriu, na janela Comportamentos, um
Evento (chamado onblur) e uma ação.

OBS: Como você pode ver na figura anterior, outros campos podem ser
validados. Se a caixa Necessário for selecionada, significa que o campo
deve necessariamente receber um valor dado pelo usuário, pois o cam-
po não poderá ficar em branco, vazio.

Exiba esta página do formulário na janela do navegador e digite um ende-
reço de correio eletrônico no campo E-mail onde este endereço não 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 usuário que
aquele campo requer que um endereço de e-mail válido seja digitado.


Dreamweaver 3.0

Clique no botão OK e feche a janela do navegador.

Após o usuário clicar no botão OK, uma janela com alguma mensagem
especificada por você poderá ser exibida. Com o campoemail seleciona-
do, clique no botão com o sinal (+) da janela Comportamentos e, no menu
de contexto, selecione a opção Mensagem pop-up. Na caixa de texto
Mensagem pop-up que será apresentada, insira o texto: Digite um ende-
reço de e-mail válido no campo E-mail, depois clique no botão OK.

Abra novamente esta página no navegador e digite um endereço incorre-
to no campo de e-mail, pressione a tecla Tab e veja o resultado.

Agora que a página de formulários está pronta, você deverá acrescentar
mais um item na barra de navegação que se encontra na
molduraesquerda, pois quando o usuário clicar neste item (no botão), a
página Formulários deverá ser exibida. Os quatro arquivos de imagens
que constituirão os quatro estados do botão já deverão estar prontos.
Como exemplo, o nome do botão que aparecerá na barra de navegação
pode ser Consulte-nos. Para inserir o botão na barra de navegação, se-
lecione-a e depois no menu Modificar, clique na opção Barra de nave-
gação.


Dreamweaver 3.0
Depois exiba o site no navegador e teste os hyperlinks.

FAZENDO O FORMULÁRIO FUNCIONAR

Toda vez que um usuário preenche os campos do formulário e clica no
botão Enviar, os dados vão para o servidor e um script CGI (ou outro
script personalizado) é executado, pois só assim você poderá recuperar
e acessar os dados resultantes do formulário. Mas, no Dreamweaver
não é possível escrever o script (e nem o Dreamweaver o fará para você!).

Os formulários são enviados por um dos dois métodos: GET, que envia
os resultados do formulário no URL enviado para o script; e POST, que
codifica o material enviado para o script; estas duas opções aparecem
no inspetor de propriedades do formulário. Na janela do documento, dê
um clique na borda do formulário para selecioná-lo; o inspetor exibirá as
propriedades do formulário, onde é necessário escolher o método (GET
ou POST) e a ação (o URL do script que processará o formulário deve
aparecer nesta caixa de texto). Consulte seu programador ou adminis-
trador de sistema para você saber determinar qual método deve ser uti-
lizado.


Dreamweaver 3.0
CRIANDO FOLHAS DE ESTILOS

As folhas de estilos são uma ótima ferramenta utilizadas principalmente
para a formatação de textos. Você pode definir estilos (como o tipo de
fonte, cor, tamanho, etc), atribuir um nome ao estilo e depois aplicar na
página, onde uma folha de estilo representa um grupo de estilos, e pode
estar vinculada a várias páginas. A grande vantagem de trabalhar com
folhas de estilos é que quando você altera ou atualiza algum atributo do
estilo, todos as páginas que utilizam essa folha de estilos específica se-
rão também automaticamente atualizadas. Sendo assim, basta você cri-
ar uma folha de estilo e utilizá-la em quantas páginas da Web quiser.

Na verdade, quando você cria uma folha de estilos, você está criando um
arquivo de texto (.css) que contém as especificações de estilos e
formatação, e para definir as folhas de estilos, utilizaremos a caixa de
diálogo 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 avançados.

Veja a seguir um exemplo de uma folha de estilo, a qual especifica que o
título 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 então redefinir
algum rótulo (tag) de HTML, de modo que o rótulo mantenha suas propri-
edades atuais e inclua outras novas (como o rótulo H1 do exemplo ante-
rior). Sendo assim, você deverá conhecer quais os rótulos que represen-
tam os parágrafos, tabelas, títulos, etc. A seguir você encontra os rótulos
que mais aparecem no código HTML e a que eles se referem.

<p>: parágrafo
<br>: quebra de linha
<hn>: título, onde n é o número do título
<table>: tabela
<dt>: célula da tabela


Dreamweaver 3.0
<tr>: linha da tabela
<img>: imagem
<body>: todo o conteúdo da página
<form>: formulário
<font>: fonte
<a>: vínculo

Esses rótulos, além de serem exibidos na janela Inspetor de Origem HTML,
também podem ser vistos na parte inferior esquerda (chamada de seletor
de rótulos) da própria janela do documento. Abra algumas páginas e veja
os rótulos dos elementos que estão inseridos na página.

OBS: Para selecionar um rótulo completo (inclusive o seu conteúdo, se
houver), clique em um rótulo do seletor de rótulos.

No exemplo da figura anterior, com o ponto de inserção posicionado em
uma célula da tabela, um clique no rótulo <td> seleciona esta célula.

Lembre-se que qualquer ação realizada na página da janela do docu-
mento é imediatamente refletida no código da página, ou seja, tudo que
você fizer ou alterar na página é também feito e alterado no código. Na
figura acima, quando selecionamos a célula da tabela, se observarmos
na janela do código, a mesma célula também estará selecionada.


Dreamweaver 3.0

Assim, uma maneira fácil de conhecer a linguagem HTML é trabalhar
com a janela Inspetor de Origem HTML aberta, assim você poderá ver
como tudo que você faz na página é transformado em código HTML.

Depois de conhecer um pouco mais sobre os rótulos, vamos ver como
podemos criar uma folha de estilos. Selecione a opção Estilos CSS do
menu Janela ou clique no botão 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
Para criar um estilo novo, clique no botão 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 rótulo de HTML ou definir a formatação para uma determinada
combinação de rótulos. Assim, quando você clica no botão Novo estilo,
estas três opções serão exibidas na janela Novo estilo, e uma delas de-
verá ser selecionada.

Após selecionar uma opção, na caixa de texto Nome você deve digitar
um nome, rótulo ou seletor de rótulos para o novo estilo. Os nomes de
estilos devem iniciar com um ponto, e caso o ponto não seja colocado, o
Dreamweaver o digitará. Se você for redefinir um rótulo de HTML (2ª op-
ção da janela Novo estilo), digite um rótulo HTML ou escolha algum no
menu pop-up, e se for definir a formatação de vários rótulos (3ª opção),
digite todos eles, separados por vírgulas. Depois clique no botão OK.

Na próxima caixa de diálogo, Definição de estilo, selecione uma catego-
ria no lado esquerdo da janela e escolha as definições de formatação do
novo estilo CSS no painel correspondente. Deixe alguns atributos em
branco caso não sejam importantes para o estilo; os atributos que não
aparecerem na janela do documento são 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
Para aplicar o novo estilo em um texto da página, selecione o texto dese-
jado. Na janela Estilos CSS, selecione o estilo e depois clique no botão
Aplicar (canto inferior esquerdo). Se a caixa que está na frente deste
botão estiver selecionada, qualquer texto que você selecionar na página
imediatamente receberá a formatação do estilo, para não acontecer isto,
deixe a caixa desmarcada.

Você viu como criar um estilo para páginas individuais, já que o estilo
criado na figura anterior só pode ser usado na página onde ele foi criado.
Para criar estilos que possam ser aplicados em mais de uma página, é
necessário criar uma folha de estilos linkada ou importada.

Uma folha de estilo é um arquivo que deve apresentar a extensão 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 diálogo Editar a folha de estilos, clique no botão Vínculo. A
caixa de diálogo Vincular a folha de estilo externa será exibida, e nela
você deverá localizar uma folha de estilo já existente (clicando no botão
Procurar) ou criar uma nova folha de estilos externa, onde você deverá
digitar um nome de arquivo que contenha a extensão .css. Depois deve-
rá selecionar uma das duas opções: Vínculo (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 opções passem todos os estilos da folha de estilos
CSS externa para o documento, a opção Vínculo 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 opção Vínculo. Depois destas defi-
nições você deve clicar no botão OK e, em seguida, verá que a caixa de
diálogo Editar a folha de estilos exibirá o nome da folha de estilos (e tam-
bém do estilo que já havia sido criado). Observe que o arquivo (a folha de
estilo) ainda está vazio.


Dreamweaver 3.0

Vamos agora inserir conteúdo (os estilos) no arquivo prop.css. Com o
nome da folha de estilo selecionado na caixa de diálogo Editar a folha de
estilos, clique no botão Editar, aparecerá uma caixa de diálogo de mes-
mo nome da folha de estilos. Clique no botão Novo para definir os estilos
na folha de estilos prop.css. Na caixa de diálogo Novo estilo que você já
conhece, defina o novo estilo e siga os mesmos procedimentos descri-
tos anteriormente no tópico referente à criação de estilos para uma única
página.
Quando terminar de definir os estilos do arquivo prop.css (você poderá
definir quantos estilos quiser), clique no botão Salvar e depois em Con-
cluído. Desta maneira, esta folha de estilo (a prop.css) poderá ser aberta
em outras páginas do site, através da janela Estilos CSS, e além 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 formatação do estilo será ignorada. Desta
maneira, o estilo deve ser aplicado em um texto que não apresente ne-
nhum tipo de formatação.


Dreamweaver 3.0
CRIANDO ESTILOS HTML

No capítulo anterior aprendemos a criar as folhas de estilos, onde, uma
vez definido o arquivo .css e o seu conteúdo, este pode ser aplicado em
quaisquer páginas. Os estilos HTML também são criados para facilitar a
formatação de textos, mas ao contrário das folhas de estilos, os textos
formatados com os estilos HTML são não atualizados automaticamente
quando o estilo é alterado. Assim, quando você modificar um estilo HTML,
você precisará reaplicá-lo.

É possível criar um estilo HTML a partir de um texto já formatado ou
então criar um estilo a partir do zero, e também o estilo poderá ser criado
para modificar apenas um texto que esteja selecionado ou um parágrafo
inteiro. A criação e aplicação dos estilos será feita através da janela Es-
tilos HTML. Para exibir tal janela, selecione a opção Estilos HTML do
menu Janela ou então clique no botão Estilos HTML do Iniciador ou do
Mini-iniciador.

Como você pode ver na figura anterior, os estilos que apresentam o sím-
bolo de parágrafo (¶) alteram a formatação do parágrafo inteiro, e os
estilos com o símbolo 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 diálogo 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
parágrafo inteiro e ajuste a formatação. Para que a caixa de diálogo volte
às opções padrões, clique no botão Limpar, e para concluir clique no
botão OK.


Dreamweaver 3.0
Se você já tem um texto formatado e deseja criar um estilo HTML a partir
da formatação deste texto existente, selecione-o e depois clique no bo-
tão Novo estilo da janela Estilos HTML. Na caixa de diálogo Definir o
estilo HTML, a formatação do texto selecionado já estará especificada,
basta você definir um nome para o novo estilo e clicar no botão OK.

Para editar um estilo HTML existente, clique com o botão direito do mouse
no estilo e selecione a opção Editar do menu contextual (não deverá haver
nenhum texto selecionado na página e a caixa na frente da opção Aplicar,
da janela Estilos HTML, deverá estar desmarcada). Na caixa de diálogo
Definir o estilo HTML, faça as alterações e clique no botão OK. Lembre-se
que quando um estilo HTML for modificado, o Dreamweaver não 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 seleção Aplicar, localizada na parte
inferior da paleta, estiver selecionada, clique uma vez no estilo, e se ela
não estiver selecionada, clique no estilo e depois clique em Aplicar.

Na paleta de estilos HTML, as duas primeiras linhas Limpar o estilo do
parágrafo e Limpar o estilo da seleção devem ser utilizados quando você
quiser limpar a formatação do texto, para isso, selecione o texto formatado
e clique em uma das duas opções.

OBS: As duas opções (Limpar o estilo do parágrafo e Limpar o estilo da
seleção) podem ser utilizadas para remover qualquer formatação, mes-
mo que esta tenha sido aplicada através 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 são armazenados no arquivo
styles.xml, que se encontra na pasta Library (para visualizá-lo, selecione
a opção Arquivos do site do menu Janela para abrir a janela Site). Este
arquivo poderá ser copiado, excluído, etc, como qualquer outro arquivo
do site, e é por isso que os estilos HTML podem ser reutilizados por
quaisquer páginas que utilizem a paleta de estilos HTML.


Dreamweaver 3.0
TRABALHANDO COM CAMADAS

As camadas são 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, formulários, outras camadas, ou
seja, qualquer elemento que pode ser colocado em uma página também
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 sobrepõem.

Dentre as propriedades das camadas, o índice z determina a ordem de
empilhamento da camada, e as camadas com números z mais eleva-
dos aparecerão acima das camadas com números menores, e foi as-
sim que posicionamos as três camadas no exemplo da figura anterior.

No código HTML os rótulos que as definem são <div> (insere uma que-
bra de parágrafo depois da camada) ou <span>. Os rótulos <layer> e
<ilayer>, que também representam as camadas, são suportados ape-
nas pelo Netscape.

Dreamweaver 3.0
Para criar camadas, selecione a opção Camada do menu Inserir (uma
camada padrão será inserida onde o cursor estiver posicionado) ou clique
no botão Desenhar camadas ( ) da paleta de objetos. Quando você
clica no botão Desenhar camadas o ponteiro do mouse transforma-se em
duas pontas, você deverá arrastá-lo no local desejado da página para de-
senhar a camada. Na janela do documento, aparecerá um marcador no
canto superior esquerdo da página para cada camada criada.

AS PROPRIEDADES DAS CAMADAS

As propriedades das camadas são especificadas através do inspetor de
propriedades. Você poderá definir um nome e uma posição para a cama-
da, além de outras opções descritas a seguir.

Id. da camada: campo para especificar o nome que identificará a camada.

E e A: especificam a distância da camada em relação à margem esquer-
da (E) e a distância da camada em relação à 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 números mais elevados aparecerão acima das camadas com nú-
meros menores.

Vis: determina se a camada será visível ou não quando a página for car-
regada.
Rótulo: determina se a camada terá o rótulo SPAN, DIV, LAYER ou ILAYER.

Estouro: se o conteúdo inserido em uma camada for maior que as di-
mensões dessa camada, você poderá escolher uma dentre as seguin-
tes opções - visible (visível): a camada se expandirá para que todo o
conteúdo possa ser visualizado, hidden (oculta): o conteúdo que não
couber na camada será cortado e portanto não será exibido, scroll: adici-
ona barras de rolagem à camada, auto: quando o conteúdo for maior que
o tamanho da camada, a barra de rolagem será exibida.


Dreamweaver 3.0
Corte: especifica qual a parte da camada que será visível, sendo que o
restante será ocultado (e não excluído). 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
específica da imagem seja exibida, então a imagem será “cortada”).

Além do inspetor de propriedades, a janela Inspetor de camadas tam-
bém será bastante utilizada, pois além de listar todas as camadas, faci-
lita a seleção das camadas, o aninhamento, a alteração da ordem de
empilhamento, a visibilidade, etc. Para exibir o inspetor de camadas, se-
lecione a opção Camadas do menu Janela.

Com relação à visibilidade, se não houver um ícone representando um
olho (como mostra a figura anterior), a camada herdará as definições de
visibilidade da camada-mãe. Quando as camadas não estão aninhadas,
a camada-mãe é o corpo do documento, que está sempre visível. 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
A caixa de seleção Evitar sobreposição do inspetor de camadas evita
ou não que as camadas se sobreponham. Se esta opção estiver seleci-
onada, uma camada não poderá ser criada na frente de outra, movida ou
redimensionada sobre outra.

OBS: Algumas versões dos navegadores podem não exibir as camadas
corretamente, e para que a página com camadas seja exibida com preci-
são nos navegadores tanto da versão 3.0 quanto da versão 4.0, você
poderá converter as camadas em tabela. Mas o Dreamweaver não po-
derá criar uma tabela se a página tiver camadas sobrepostas, neste caso
assim utilize a opção Evitar sobreposições.

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 através de várias
maneiras:

• dê um clique na camada e depois clique na alça de seleção 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 rótulo da camada presente na parte inferior da janela do do-
cumento.

Com a camada selecionada você também poderá redimensioná-la (ar-
rastando uma das oito alças) ou movê-la (arrastando a alça de seleção
para uma nova posição).

Neste capítulo você viu como criar uma camada e alterar suas proprie-
dades, no capítulo seguinte, Criando Linhas de Tempo (ou Timelines, como
eram chamadas na versão anterior do Dreamweaver), iremos utilizar as
camadas para criar uma animação.


Dreamweaver 3.0
AS LINHAS DE TEMPO

Com as linhas de tempo temos a possibilidade de inserir animações nas
páginas da Web, onde estas animações alteram a posição, o tamanho, a
visibilidade e a ordem de empilhamento das camadas conforme o tempo
vai passando, e o melhor de tudo é que você não precisa escrever ne-
nhum código.

As linhas de tempo aceitam três tipos de objetos: camadas, imagens e
comportamentos, e elas utilizam o HTML dinâmico para alterar as propri-
edades de camadas e imagens. O DHTML, ou HTML dinâmico, significa
que você pode alterar ou mover camadas mesmo depois que a página
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á através do Inspetor Linhas de tempo que você vai criar e modificar
as animações. Para exibi-lo, selecione a opção Linhas de tempo do
menu Janela. No inspetor você irá controlar o tempo que cada camada
será exibida, a velocidade de reprodução da animação (quadros por se-
gundo), os quadros primários (keyframes), etc.


Dreamweaver 3.0
Se a opção Execução automática do inspetor Linhas de tempo estiver
selecionada, a linha de tempo será executada automaticamente assim
que a página for carregada em um navegador. Já a opção Loop provoca
a repetição indefinida da linha de tempo quando a página estiver aberta
em um navegador.

ADICIONANDO E MOVENDO CAMADAS

Vamos inserir uma camada em uma nova página e ver como podemos
animá-la. Estando com uma nova página aberta na janela do documento,
insira uma camada na página e acrescente uma cor de fundo à camada,
depois abra o inspetor de linhas de tempo. Arraste a alça de seleção 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
OBS: Os únicos objetos que você adicionar nas linhas de tempo são 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 não
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 primário que está no final da barra de animação da camada (exa-
tamente no quadro 15). O cabeçote de execução (barra vermelha) tam-
bém é movido para essa posição.

OBS: Cada “bolinha” que aparece na barra de animação é chamada
Quadro primário, sendo que cada quadro primário é um ponto onde algo
acontece. Por exemplo, se você quiser que em determinado momento
da animação uma camada altere sua dimensão, adicione um quadro pri-
mário no local desejado e determine a ação.
Com o cabeçote de execução no último quadro primário, arraste a alça
de seleção da camada pela página e solte-a em uma posição que você
quer que ela termine. Você verá que uma linha será desenhada desde a
posição de início da camada até a sua nova posição.

Agora para reproduzir a linha de tempo, clique no botão Rebobinar para
que o cabeçote de execução volte para o começo. Vá clicando no botão
Executar e veja a camada se movendo pela página.


Dreamweaver 3.0
Para que a camada não se movimente só em linha reta, vamos adicionar
outros quadros primários na linha de tempo da camada. Primeiro arraste
o quadro primário final para ampliar a barra de animação (até o quadro
30, por exemplo), agora clique em algum quadro no meio da barra de
animação e, no menu Modificar, aponte o mouse para a opção Linha
de tempo e clique em Adicionar quadro primário. Arraste a alça de
seleção da moldura e faça um outro caminho.

Clique novamente no botão Rebobinar do inspetor e reproduza a linha de
tempo para ver como será o novo movimento da camada (para reprodu-
zir vá clicando no botão Executar). Você poderá acrescentar outros qua-
dros primários na barra de animação e modificar o caminho da camada.

OBS: A barra de animação, além de poder ser “esticada”, ou seja, ter
seu comprimento aumentado, poderá também ser movida para qualquer
lugar do inspetor. Para movê-la, clique em algum quadro da barra (desde
que não seja um quadro primário) para que a barra fique selecionada,
depois disso arraste-a para uma nova localização. Estando com a barra
de animação selecionada, também é possível inserir um quadro primário
pressionando a tecla Ctrl e clicando no quadro desejado (assim você
não precisará utilizar a opção de menu).
Vamos considerar que você tenha criado páginas que falam sobre ani-
mais, e gostaria de inserir algumas imagens com movimento neste site,
vamos, então, criar linhas de tempo e animar algumas imagens relativas
a animais.


Dreamweaver 3.0
Em uma nova página na janela do documento, insira uma camada e dê
um clique dentro dela para posicionar o ponto de inserção. Através do
menu Inserir, insira a imagem cachorro.gif, ou outra qualquer (todas as
imagens que iremos inserir nesta página são 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 dimensões da imagem, assim a camada e a imagem terão o mes-
mo tamanho. Ainda nas propriedades da camada, digite cachorro na cai-
xa de texto Id. da camada.

Insira outra camada dois parágrafos abaixo da camada cachorro, e den-
tro da nova camada, insira a imagem cavalo.gif. Deixe a camada com a
mesma dimensão 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ê não 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 próxima 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 alça de seleção, até o ca-
nal 1 para que você tenha uma barra de animação para a referida camada.
Clique no último quadro primário e arraste-o até o quadro 35. Com relação
à camada cavalo, arraste-a até o canal 2 só que solte no quadro 20.


Dreamweaver 3.0

Clique no último quadro primário da barra de animação da camada ca-
chorro e na página, arraste a camada para criar o movimento (arraste-a
em linha reta até a metade da página, você verá o desenho da linha mos-
trando o caminho a ser percorrido pela camada). Agora clique no último
quadro primário da camada cavalo e faça o movimento para ela, arras-
tando a camada em linha reta até um pouco para a frente da camada
cachorro.

Volte o cabeçote de execução até o quadro 1 (basta clicar no botão
Rebobinar ou arrastá-lo para o início). Selecione a guia Camadas que ago-
ra está no Inspetor Linhas de tempo e deixe a camada cachorro visível e a
camada cavalo invisível (com o olho fechado), pois queremos que primei-
ro aparece o cachorro e depois de um tempinho apareça o cavalo. No
inspetor Linhas de tempo selecione a opção Execução automática, salve
a página e depois pressione a tecla F12 para exibi-la no navegador. Feche
a janela do navegador e volte para a página 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 dimensões,
arraste a camada para o lado direito da página, de modo que fique entre
o cachorro e o cavalo. Com a camada nesta posição (que será a posição
inicial), arraste-a para o quadro 45 do canal 3. Aumente o tamanho da
barra de animação para que ela vá do quadro 45 ao quadro 80. Clique no
último quadro primário da barra de animação homem e na página, arras-
te a camada até o outro lado da página, você verá uma linha representan-
do o caminho a ser percorrido pela camada, que irá de um lado a outro.


Dreamweaver 3.0
Insira outra camada e depois a imagem onca.gif dentro dela, ajuste as
dimensões 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 onça “correr” atrás do homem). Arraste a
alça de seleção da camada onca até o inspetor Linhas de tempo e solte-
a no quadro 55 do canal 4.

Clique no último quadro primário da barra onca e movimente, na página,
a camada da onca até o outro lado da página, na mesma direção da
camada homem, mas deixe-a posicionada atrás desta última.


Dreamweaver 3.0
Para fazer com que a camada do homem e da onça apareçam duas
vezes depois que a página é carregada, basta copiá-las no mesmo ca-
nal, só que alguns quadros a frente. Selecione a camada homem, dê um
clique com o botão direito do mouse sobre a camada e no menu de con-
texto, selecione a opção Copiar. Agora clique com o botão direito do mouse
no quadro 90 do canal 3 e selecione a opção Colar, repita o procedimento
de copiar e colar para a camada onca.

Insira outra camada na página e dentro dela insira o arquivo aguia.gif,
deixe os dois objetos com a mesma dimensão e dê o nome de aguia
para a camada. Posicione a camada no canto inferior direito da página,
que é de onde a animação começará, 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 página, mas
não se movimente em linha reta (será necessário inserir outros quadros
primários na barra de animação).
Agora você deverá definir quais as camadas que serão exibidas quando
a página 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 permanecerão na tela enquanto irá sugir o homem e de-
pois a onça atrás dele, eles irão aparecer duas vezes, e depois é a vez
da águia entrar na página. Desta maneira, será necessário posicionar o
cabeçote de execução em determinados quadros e definir, através da
guia Camadas, se a camada será visível ou não.

Por exemplo, salve sua página e visualize-a no navegador. Você verá que
as camadas não estão aparecendo exatamente na ordem que deseja-
mos. Por isso, volte na janela do documento e posicione o cabeçote de
execução no início (quadro 1), selecione a guia Camadas e deixe todas
as camadas, exceto a camada cachorro, invisíveis, como mostra a figu-
ra a seguir.


Dreamweaver 3.0

Posicione o cabeçote nos outros quadros primários e verifique, através da
guia Camadas, se as camadas apresentam a visibilidade correta. Volte o
cabeçote para o início, confira novamente as camadas que deverão estar
inicialmente visíveis ou não e depois visualize a página no navegador.

Desta maneira, você viu que com o Inspetor Linhas de tempo é possível
inserir elementos que se movimentem nas páginas da Web, sendo que
você poderá determinar o caminho que os elementos animados percorre-
rão e quais serão visíveis ou não em determinado momento da animação.


Dreamweaver 3.0
LISTA DE EXERCÍCIOS

1 - Em uma nova página da janela do documento, altere o tamanho da
janela para que ela apresente a seguinte dimensão: 760 x 420.
2 - Através da caixa de diálogo Preferências, faça as seguintes altera-
ções em algumas Categorias:
2.1 - Altere a paleta de objetos para que ela exiba ícones e
textos ao invés de exibir apenas ícones.
2.2 - A fonte do inspetor de HTML deve apresentar o tama-
nho 11 ao invés do tamanho 10.
2.3 - No Iniciador, faça com que a paleta Biblioteca não seja
mais exibida, e no seu lugar adicione o Inspetor de proprieda-
des.
3 - Crie um site denominado turismo na pasta raiz local
Agencia_Turismo (os próximos exercícios o conduzirá a criar pági-
nas que constituirão um site referente a uma agência de viagens
fictícia, a Villar Turismo) .
4 - O Dreamweaver é utilizado para criar páginas para a Web, mas o
que é e o que contém uma página? E o que constitui um site?
5 - Insira algum conteúdo na página em branco da janela do documen-
to, sendo que esta será a página inicial do site. A seguinte figura
mostra um pequeno exemplo do que você poderá digitar.


Dreamweaver 3.0
6 - Para melhorar a aparência da página, aplique alguns estilos e for-
matos nos textos, depois centralize os três primeiros parágrafos.
7 - Agora selecione uma cor ou uma imagem para o fundo da página
criada anteriormente.
8 - Insira duas linhas horizontais: uma acima do terceiro parágrafo e
outra abaixo do quinto parágrafo. A altura das linhas horizontais deve
ser 3 e não devem ser sombreadas.
9 - No local que indicamos na figura anterior, insira uma figura (como
por exemplo a imagem de um avião).
10 - Insira uma moldura esquerda na página; a página será dividida e o
conteúdo já inserido ficará posicionado na moldura da direita (ou na
moldura principal).
11 - Agora crie outras páginas, onde uma deve ser referente às viagens
oferecidas pela agencia (as localidades a serem visitadas, se a via-
gem será área, marítima, etc, o roteiro, preços, etc), e a outra pági-
na deve conter algumas promoções. Salve essas páginas com um
nome fácil de ser identificado. Defina um título e um fundo para es-
sas páginas.
12 - Salve todos os arquivos, onde o conjunto das molduras deve apre-
sentar o nome index.htm. Depois defina um título para o conjunto
das molduras (arquivo index.htm), já que ele é que será exibido no
navegador.
13 - Na moldura esquerda insira uma barra de navegação, sendo que
esta barra deverá apresentar no mínimo os seguintes elementos:
Home, Viagens e Promoção. Aproveite e já estabeleça os hyperlinks
das imagens (que serão os botões da barra de navegação) com as
páginas que você criou.
14 - Na página referente às Promoções, resuma os dados que você in-
seriu na página apresentando-os em uma tabela, ou seja, crie uma
tabela onde esta exibirá, por exemplo, os preços dos hotéis das lo-
calidades que fazem parte do pacote promocional. Utilize os recur-
sos referentes às tabelas: mesclar e dividir células, alterar a cor de
fundo de algumas células, as bordas, etc.
15 - Crie uma nova página na janela do documento. Nesta página insira
um formulário, onde este deve apresentar campos de textos (para o
usuário digitar seu nome e e-mail) e alguns outros campos a sua
escolha. Salve a página (na pasta Agencia_Turismo) e defina um
título para ela.

Dreamweaver 3.0
19 - Edite a barra de navegação já existente e insira um outro elemento
que deverá apresentar o texto Consulte-nos. Quando o usuário clicar
nesta opção da barra de navegação, a página do formulário deverá
ser exibida na moldura da direita.
20 - Crie uma folha de estilos linkada, a qual poderá ser utilizada em
qualquer página.
21 - Insira alguma camada animada em alguma página do site (utilizan-
do o inspetor Linhas de tempo). Como exemplo, faça o avião da
página inicial se movimentar.
22 - Selecione o último quadro da animação e através do menu Modifi-
car, opção Linha de tempo adicione um comportamento à linha de
tempo. O comportamento deverá ser a Mensagem pop-up, ou seja,
quando o avião 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 Informática
http://www.celtainformatica.com.br

Apostila dreamweaver

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Apostila dreamweaver (20)

Mais de Verônica Veiga (18)

Último (19)

Apostila dreamweaver