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.


Apostila dreamweaver

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Apostila dreamweaver

Semelhante a Apostila dreamweaver (20)

Mais de Verônica Veiga

Mais de Verônica Veiga (18)

Apostila dreamweaver