Apostila dreamweaver

SumárioINTRODUÇÃO _________________________________ 3

DICAS PARA CRIAR UM BOM SITE ____________________________ 4

CONHECENDO O DREAMWEAVER _____________ 5A JANELA DE DOCUMENTO _________________________________ 6INSPETOR DE ORIGEM DE HTML ____________________________ 8O INSPETOR DE PROPRIEDADES ______________________________ 9A PALETA DE OBJETOS ___________________________________ 10O INICIADOR __________________________________________ 12

CONSTRUINDO PÁGINAS _____________________ 13CRIANDO UM SITE LOCAL ________________________________ 13CRIANDO PÁGINAS ______________________________________ 17PARÁGRAFO E QUEBRA DE LINHA ___________________________ 30A PALETA DE HISTÓRICO _________________________________ 33FECHANDO E ABRINDO ARQUIVOS HTML ___________________ 35

RECURSOS ADICIONAIS ______________________ 38VERIFICAR ORTOGRAFIA __________________________________ 38ALINHAMENTO DE TEXTO __________________________________ 40INSERIR LINHA HORIZONTAL ______________________________ 41LOCALIZAR E SUBSTITUIR _________________________________ 42

TRABALHANDO COM IMAGENS _______________ 46PROPRIEDADES DA IMAGEM ________________________________ 49CRIANDO IMAGENS CAMBIÁVEIS ____________________________ 51

Celta Informatica

Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem previa autorizacao por escrito de Jose Arnaldo Rodrigues (Celta Informatica), podera ser reproduzida total ou parcialmente, por qualquer processo, eletronico, fotocopia, mecanico ou sistema de processamento de dados. Obrigado pela preferencia, Celta Informatica. http://www.celtainformatica.com.br E-mail: [email protected] Fone: (11) 4331-1586

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

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

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

CRIANDO FORMULÁRIOS _____________________ 94OS OBJETOS DE FORMULÁRIOS ____________________________ 94INSERINDO OBJETOS NA PÁGINA ____________________________ 96VALIDANDO CAMPOS DO FORMULÁRIO _____________________ 103FAZENDO O FORMULÁRIO FUNCIONAR ______________________ 105

CRIANDO FOLHAS DE ESTILOS ______________ 106

CRIANDO ESTILOS HTML ____________________ 112

TRABALHANDO COM CAMADAS _____________ 114AS PROPRIEDADES DAS CAMADAS ___________________________115

AS LINHAS DE TEMPO _______________________ 118O INSPETOR LINHAS DE TEMPO ____________________________118ADICIONANDO E MOVENDO CAMADAS _______________________119

LISTA DE EXERCÍCIOS_______________________ 127

Dreamweaver 3.0

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

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 emforma de páginas gravadas em um determinado site). A WWW (WorldWide Web), ou simplesmente Web, é a parte da Internet que contém oconjunto 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 estaspá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, eque também utiliza a linguagem de programação HTML. Se você nãoquiser 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 linguagemHTML).

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

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 emqualquer parte do planeta. Essas pessoas, então, poderão acessar seusite (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 sitebem elaborado exige paciência, dedicação e conhecimentos de algumastécnicas. Para obter os melhores resultados, projete e planeje o seu siteantes de criar qualquer página que o integrará. Procure lembrar sempreque um bom site, além de ter uma aparência atraente, necessita que amensagem seja transmitida de forma sucinta e sem demora no apareci-mento das informações na tela (ou seja, o carregamento das páginasdeve ser rápido). Fique atento às seguintes dicas:

� Defina os seus objetivos de forma clara;

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

� Utilize itens que possam ser exibidos rapidamente na tela;

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

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

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

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

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

� 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 outrasjanelas 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) ealgumas janelas flutuantes, como mostra a figura a seguir.

No ambiente de trabalho do Dreamweaver você poderá exibir ou ocultarqualquer janela, paleta ou inspetor, bastando selecionar seu nome nomenu Janela, você também poderá

OBS: O Dreamweaver se lembrará das posições das janelas quandovocê sair do programa, assim, ao iniciá-lo novamente, as janelas estarãona 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 aJanela de documento, que é onde as páginas do site serão criadas. Aspáginas no Dreamweaver apresentam-se no formato WYSIWYG (“whatyou see is what you get”), isso significa que aquilo que você estiver vendona janela de documento é o que você vai ver no navegador da Web, emoutras palavras, o que você vê é o que você obtém.

A janela de documento é composta pela Barra de título (que exibe o títuloda página e, entre parênteses, o nome do arquivo e um asterisco, caso oarquivo 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 apresentaalgumas informações importantes:

· Seletor de rótulos: exibem todos os rótulos (tags) que controlam otexto ou objeto selecionado (para realçar o conteúdo de algum rótulona 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 queas opções sejam apresentadas). Você também pode redimensionarmanualmente a janela, arrastando suas bordas.

· Tamanho do documento e tempo de descarga: exibe o tamanho totalda 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 etamanho de descarga, escolha menu Editar, opção Preferências, emseguida, 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 serativadas, como a régua, grade, etc. As réguas, exibidas na parte superiorda janela e do lado esquerdo, poderão ser utilizadas para dimensionarmelhor alguns objetos na tela, como tabelas e imagens. Para exibir (ouocultar) 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 menuExibir 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 alteraralgumas configurações da grade (espaçamento e cor das linhas, porexemplo) 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á queeles 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 dajanela, 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 edepois a opção Origem de HTML, outra maneira é clicar no ícone doinspetor de origem de HTML, no Iniciador ou no Mini-iniciador (no cantoinferior 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 últimocaso, conhecer os comandos e recursos da linguagem. Qualquer açãorealizada na página (inclusão de um objeto, mudança da cor e tamanhoda 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 umapá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 objetospertencentes a ela. Quando você quiser exibir ou alterar as propriedadesdos elementos da página, utilize o Inspetor de propriedades. Para exibir oInspetor de propriedades, selecione a opção Propriedades do menuJanela.

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 queestivermos criando as páginas, pois certamente teremos que editar ealterar 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 utilizadospara 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 menuJanela.

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

� O painel Caracteres contém caracteres especiais, como os símbolosde copyright e marca registrada, além de aspas curvas.

� O painel Comuns contém os objetos mais comumente utilizados, comoImagem, Tabela e Camada.

� O painel Formulários contém botões para criar formulários e os seuselementos.

Dreamweaver 3.0


� O painel Head contém botões para adicionar diversos elementosHEAD, 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, cliqueno botão correspondente ao objeto desejado. Para alguns objetos, oDreamweaver necessitará de informações adicionais (como a localiza-ção de uma imagem, por exemplo), sendo assim, uma caixa de diálogoserá 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 domenu 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ãona 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 nobotão com o sinal de adição (+). Para remover um item do Iniciador e doMini-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 quecorresponde a movê-lo respectivamente para a esquerda ou direita noIniciador e no Mini-iniciador, selecione o item e, em seguida, clique nasteclas de seta. Depois de clicar no botão OK, o Iniciador e o Mini-iniciadorserã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 statusda janela do documento.

Os botões do Iniciador serão comentados e utilizados no momento emque 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çãoe sejam bastante funcionais.

CONSTRUINDO PÁGINAS

Antes de começarmos a criar as páginas, devemos primeiro criar umsite 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 queos 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 depoispublicá-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 umapasta 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álogoDefiniçã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á serconfigurada 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 discolocal que armazenará todos os documentos do site. Clique no ícone cor-respondente à pasta, à direita do campo. Na caixa de diálogo Escolher apasta local, crie, na sua pasta raiz (geralmente C:), a pasta Sites. De-pois dê um clique duplo na pasta Sites e crie outra denominadaAgenda_Cultural, dê um clique duplo nela também.

Dreamweaver 3.0


4. Depois de dar um clique duplo na pasta Agenda_Cultural, clique nobotão Salvar. Na caixa de diálogo Definição de Site, selecione a opçãoUtilizar 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 atualizarrapidamente os vínculos quando um arquivo for movido, renomeado ouexcluí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, é ondeseu site da Web fica armazenado.

Dreamweaver 3.0


Em seguida o Dreamweaver exibirá uma mensagem, clique no botãoOK. Uma nova janela será criada, cuja barra de título apresenta: Site –agenda (observe, na barra de tarefas do Windows, que apareceu maisum 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 siteremoto os arquivos que foram alterados), tudo da mesma forma comovocê faz no Windows Explorer do seu computador.

Na janela Site você também poderá visualizar a estrutura de navegaçãodo site, através do Mapa do Site. O mapa do site mostra os arquivosHTML e outros elementos da página como ícones, e os hyperlinks serãoexibidos na ordem em que forem detectados no código de origem deHTML. Por padrão, o site remoto (ou mapa do site) aparecerá no painelesquerdo e o site local será mostrado no painel direito.

OBS: O site que iremos criar será referente a uma agenda cultural, ondeconterá informações sobre os filmes e as peças teatrais que estão emcartaz, 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, ouseja, 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 abrirum documento HTML existente, independente de como tenha sido cria-do, e alterá-lo, e também criar um novo documento com base em ummodelo.

Você já deve estar com uma janela de documento aberta, apresentandoUntitled Document (Untitled-1) Dreamweaver na barra de título, então nãoprecisará criar outra página em branco. Caso contrário, para criar umanova 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, ouseja, 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 aspaletas 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) foramretiradas 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 digitemissao_impossivel, como mostra a próxima figura. Depois clique nobotão Salvar.

Dreamweaver 3.0


Observe que agora na barra de título da janela do documento o nome doarquivo 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ãocorresponde ao ato de dar um título a uma página (o título da página aindacontinua 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 quesalvamos 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 foremexibidas 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 qualquerlugar da página e no menu de contexto que aparecerá, selecione a opçãoPropriedades da página, uma outra maneira é selecionando esta mes-ma opção no menu Modificar. Utilize qualquer um dos métodos paraque 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 detítulo da janela do documento e o nome do arquivo da página e a pasta naqual 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, comodois pontos, barras inclinadas ou pontos nos nomes dos arquivos, poisdepois 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 quemuitos robôs de mecanismos de pesquisa (programas que navegamautomaticamente pela Web, reunindo informações a serem indexadaspelos 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 indexaras páginas nos seus bancos de dados.

Alterando o fundo da página

Como você já percebeu, quando criamos uma nova página noDreamweaver, esta apresenta, por padrão, um fundo branco. Mas nóspodemos alterar essa condição: inserir uma imagem de fundo ou umaoutra cor diferente do branco.

O Dreamweaver disponibiliza 216 cores (chamadas de “cores de nave-gador seguras”) para serem usadas nas páginas, sendo exatamenteessas 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ãoFundo.

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 acor, clique no botão Apagador ( ) para fechá-la.

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

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

Além de inserir uma cor no fundo da página, você também pode inseriruma imagem. Se esta imagem for menor que a janela do documento, elase repetirá a fim de ocupar toda a área da página. Se a página já tiveruma cor de fundo e você inserir uma imagem de fundo, na maioria doscasos esta imagem anulará a cor.

OBS: O Dreamweaver, como a maioria dos navegadores, suporta asimagens nos formatos GIF e JPEG (sendo que o Internet Explorer 4.0 oumais avançado e o Netscape 4.04 ou mais avançado, também suportamas imagens no formato PNG).

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

Dreamweaver 3.0


Caso a imagem selecionada esteja localizada em uma pasta diferentedaquela que contém os arquivos do site, uma janela será exibida (comomostra a próxima figura). Clique no botão Sim para copiar o arquivo paraa 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 dacaixa de diálogo Propriedades da página.

Observe, na figura anterior, que a imagem de fundo foi organizada lado alado para ocupar toda a área da página. Veja também que após o nomedo arquivo, na barra de título da janela, aparece o caractere *, indicandoque 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 tipoe 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 menuTexto 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 dofilme - Missão Impossível 2). Clique no menu Texto e aponte o mousepara a opção Fonte, você verá uma lista com algumas combinações defontes.

No Dreamweaver, ao invés de definir somente um tipo de fonte para umapalavra ou texto, você define várias fontes (uma lista com diversos tiposde fontes), pois assim, o navegador verificará se a primeira fonte da listaestá instalada no computador do usuário, caso não esteja, ele verifica asegunda, e assim por diante. Se nenhuma das fontes sugeridas estiverdisponível, a palavra ou texto será exibido na fonte padrão do navegadordo 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 alteretambém o tipo da fonte (escolha uma combinação de fontes diferente doprimeiro parágrafo).

Conforme você pode observar no submenu Fonte, existe uma opçãodenominada Editar a lista de fontes, a qual é utilizada para definir ascombinaçõ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çãoFonte. Na parte superior da caixa de diálogo exibida é mostrada a Listade 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, depoisclique no botão << (localizado entre as listas Fontes escolhidas e Fontesdisponíveis) para mover a fonte para a lista Fontes escolhidas, repita oprocedimento 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ãode adição (+), e para remover uma combinação de fontes da lista cliqueno 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. Estandocom 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, queconfigura 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 dotamanho ou Redução do tamanho do menu Texto. Por exemplo, se afonte 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 quiserque 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 podemosutilizar os estilos de negrito, itálico e sublinhado. Para aplicar os estilosnegrito 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 depoisSublinhado (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á abertana janela do documento, e aplique o estilo sublinhado. Faça a mesmacoisa com as palavras Elenco, Direção, Gênero, Classificação e Dura-ção. Depois aplique o estilo negrito no primeiro parágrafo, ou seja, notí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 daspalavras e textos da página. Selecione o primeiro parágrafo da página edepois, no inspetor de propriedades, clique no botão Cor do texto, comomostra a próxima figura.

A Paleta de cores é exibida, sendo que você já conhece esta paleta quandoaprendeu a alterar a cor de fundo da página. Com o conta-gotas, cliqueem 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 umtexto para outro ou então excluir a cor anteriormente definida. Para copiara mesma cor de um texto para outro, deixe o cursor posicionado no textoque 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, ecopie-o para a área de transferência, pressionando Ctrl+C. Em seguidaselecione o texto cuja cor você quer alterar, posicione o cursor na caixapróxima ao botão Cor do texto, pressione Ctrl+V para colar o código edepois tecle Enter.

Dreamweaver 3.0


Para remover a cor da fonte de algum texto, selecione-o e depois apagueo 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-aatravé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óximasfiguras você encontrará informações sobre alguns filmes, e que como jádissemos, você poderá criar páginas sobre outros títulos de filmes quedesejar.

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

Dreamweaver 3.0


Após criar e salvar as páginas, altere o fundo de cada uma (trocando acor ou inserindo uma imagem), depois formate os textos (modifique otipo, tamanho e cor das fontes) e aplique, onde achar conveniente, osestilos 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 sejauma ú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 deinserçã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 Segundosapresenta 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 (janelaque 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 umalinha 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, pressioneShift+Enter; a linha se dividirá e o ponto de inserção iniciará na próximalinha.

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 querepresenta 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 dalinha onde inserimos uma quebra de linha.

Dreamweaver 3.0


Agora que você já entendeu o que representa um parágrafo noDreamweaver, 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 (ouTítulo 2), e assim por diante, até o Cabeçalho 6. Entre um cabeçalho e otexto seguinte há sempre uma quebra de parágrafo.

Como exemplo, na página Premonicao, selecione o primeiro parágrafoe, no inspetor de propriedades, retire o estilo Negrito (clicando no íconecorrespondente) e altere o tamanho da fonte para Nenhum (essas modi-ficações estão sendo feitas para você perceber melhor como o estiloCabeç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 Nenhumno 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ésdela será possível desfazer uma ou mais etapas, executá-las novamen-te e criar novos comandos para automatizar tarefas repetitivas. Para abrira 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”), bastaarrastar 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 menuEditar.

Agora se quiséssemos desfazer as últimas três ações simultaneamen-te, bastaria clicar no canto esquerdo da etapa Aplicar a fonte: ArialRounded 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 exibidaselecione 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 najanela do documento, clique no botão Fechar, localizado no canto direitoda barra de título da janela ou então escolha a opção Fechar do menuArquivo. 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 semsalvar) 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ãofechadas.

Para abrir arquivos você também tem mais de uma opção: através dajanela 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 janelado 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 oarquivo 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 noDreamweaver selecionando seus nomes no menu Arquivo da janela dodocumento.

Dreamweaver 3.0


OBS: Cada arquivo aberto no Dreamweaver é exibido em uma janela dedocumento diferente, assim, se você tiver 3 páginas abertas, tambémterá 3 janelas de documentos abertas, as quais são exibidas na barra detarefas do Windows. Mas, se você quiser apenas uma janela aberta porvez, você pode alterar as preferências do Dreamweaver, selecionando aopçã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 arquivosem 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, aprimeira 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 serutilizados e aplicados nas páginas que você criou.

VERIFICAR ORTOGRAFIA

O comando Verificar ortografia faz a verificação e correção ortográficados textos de sua página. Você pode verificar apenas uma seleção detexto 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áginaPremonicao. Posicione o ponto de inserção no início da página (ou emum outro lugar onde queira começar a verificação ortográfica), depoisselecione a opção Verificar a ortografia do menu Texto. Uma caixa dediá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árionã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álogoVerificar 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áficanã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, cliqueno 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 umavez, selecione a palavra correta na caixa Sugestões e clique no botãoAlterar 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áficafoi 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 utilizapara realizar a verificação ortográfica, selecione a opção Preferênciasdo menu Editar. Na Categoria Geral da caixa de diálogo Preferênciasvocê pode alterar o idioma do dicionário através do menu pop-up do campoDicionário.

Dreamweaver 3.0


ALINHAMENTO DE TEXTO

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

Para alterarmos o alinhamento de um texto (sendo que este texto podeser um parágrafo, um título, uma lista ou uma página inteira) primeirodevemos selecioná-lo e depois escolher o alinhamento desejado. Comoexemplo, vamos centralizar o texto que representa o título da páginapremonicao.htm.

Selecione o texto Premonição e, no inspetor de propriedades, clique nobotão Alinhar no centro (ao invés de selecionar o texto, você tambémpode 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ágrafoque 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 tersuas 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 horizontaldo menu Inserir para que uma linha horizontal, que vai de um lado aooutro 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 declicar no botão.

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

Dreamweaver 3.0


Como você pode ver na figura anterior, a terceira linha está com a alturae a largura modificadas.

Para alterar as propriedades da linha dê um clique duplo nela; o inspetorde propriedades exibirá as propriedades da linha (régua) horizontal, quesão:

• L e U especificam a largura e altura da linha, em pixels ou como umpercentual do tamanho da página.• Alinhar especifica o alinhamento da linha (padrão, esquerda, centroou direita). Esta definição se aplica apenas se a largura da linha formenor 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 teclaDelete.

LOCALIZAR E SUBSTITUIR

Você poderá usar o recurso de localizar e substituir do Dreamweaverpara 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émlocalizar e substituir um texto por outro (texto, neste caso, quer dizeruma palavra inteira, uma frase ou parte de uma palavra).

Como exemplo, vamos localizar a palavra carro na página referente aofilme 60 Segundos, para isso é necessário que a página em questãoesteja aberta na janela do documento. Agora selecione a opção Locali-zar do menu Editar, na caixa de diálogo Localizar digite a palavra queestamos procurando, ou seja, digite carro.

Dreamweaver 3.0


Clique no botão Localizar o próximo para o Dreamweaver encontrar oque 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 paraver a palavra destacada). Se o Dreamweaver não conseguir localizar oitem a palavra especificada, uma caixa de diálogo aparecerá informandoque o item não foi localizado.

Clique novamente no botão Localizar o próximo para que outra palavracarro 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 dacaixa 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 nodocumento 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 aescolha da opção Site atual, o nome deste aparecerá à direita do menupop-up. Se este não for o site no qual deseja efetuar a busca, escolhaum outro site no menu pop-up Sites atuais, na janela do site.• Pasta: a busca é realizada em um diretório específico. Após escolhera opção Pasta, clique no ícone correspondente à pasta, para procurare 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 janelado 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 evalores de atributo.

• Coincidir maiúsc./minúsc.: selecione esta opção para procurar letrasmaiúsculas ou minúsculas.

• Ignorar os diferentes espaços em branco: se esta opção estivermarcada, a busca pelo texto especificado irá ignorar os espaços entreas 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 eseqüências pequenas de caracteres (como ?, *, \w e \b) no texto a serlocalizado.

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 textoe 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 textosubstituto (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 pelapalavra veículo. Se por algum motivo não quiser que a palavra destacadaseja substituída, clique no botão Localizar o próximo ao invés de clicarem 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 alado e se repete até preencher todo o fundo da página. Neste capítulovamos aprender a inserir imagens na página e alterar sua propriedades,sendo que as páginas da Web que contém imagens costumam ser maisatraentes 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 deinserção no local onde deseja que a imagem seja inserida, depois utilizeuma 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 deimagem desejado e quando você selecioná-lo, poderá visualizar a ima-gem no lado direito da caixa de diálogo, na área denominada Imagem devisualização. Clique no botão Selecione para que a imagem seja inseridana 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, paraisso a página deverá estar aberta na janela do documento. Com o cursorposicionado 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, ecomo exemplo, vamos inserir a imagem figpatriota.jpg, onde esta já seencontra selecionada. Clique no botão Selecione para que a imagemescolhida 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 janelaserá 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ãochamados de alças de seleção, e podem ser arrastados pararedimensionar a imagem.

As propriedades e uma pequena visualização da imagem, são exibidasno 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 exibidasno inspetor.

Dreamweaver 3.0


Você pode clicar na setinha destacada na figura anterior para expandir oinspetor de propriedades e visualizar o conjunto completo das proprieda-des da imagem selecionada. A imagem em miniatura que aparece noinspetor age como o botão Aplicar (ou Apply) para as propriedades daimagem.

Quando quiser remover uma imagem da página, selecione-a (através deum clique) e depois pressione a tecla Delete. Para selecionar mais deuma imagem, mantenha a tecla Shift pressionada enquanto clica em cadaimagem. Você também pode dar um clique duplo na imagem e acessar acaixa 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, é útildefinir 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 digiteoutros números na caixa de texto ou arraste as alças (quadradinhos) daimagem. Quando você modifica as dimensões da imagem, os númerosdas caixas L e U assumem o estilo negrito, e para retornar às medidasoriginais, 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ê podeclicar no ícone correspondente à pasta (à direita do campo Orig) paraexibir a caixa de diálogo Selecione a origem da imagem e escolher outraimagem (ou seja, outro arquivo de origem).

4 - Vínculo: se a imagem for um hyperlink, ou seja, exibir outra páginaquando 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 donavegador, que é o alinhamento na linha de base, isto é, a parte inferiorda imagem é alinhada com a linha de base do texto ou com o objeto maispróximo. Mas este tipo de alinhamento pode ser modificado através dacaixa 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 lugarda imagem, caso o navegador esteja configurado para exibir somentetexto.

7 - Mapa: este campo é utilizado para inserir um campo de imagens, ouseja, 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úmero7.1) e quando o usuário clicar em um ponto ativo, uma outra página daWeb 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 colocadaem uma linha, e se você quiser que sua imagem tenha algum espaçoextra, você pode colocar um espaço invisível em torno da imagem. Oespaç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 umví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, najanela inteira do navegador, etc).

Dreamweaver 3.0


10 - Orig. Baixa: se a imagem que você inseriu na página demorar paraaparecer no navegador, você pode especificar uma outra imagem menor(em preto e branco, que carrega mais rapidamente) para ser carregadaantes da imagem principal. Assim, definindo uma imagem de baixa reso-lução, evitará que os visitantes do site esperem muito tempo para veremalguma coisa.

11 - Borda: se quiser que a imagem apresente uma borda, digite umnúmero (em pixels) nesta caixa de texto. Insira o número zero para quenão haja nenhuma borda.

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

13 - Botão Editar: se você tiver um editor de imagens associado aoDreamweaver, um clique neste botão abrirá a imagem no editor parapoder 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ãoAplicar) 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, poisprovocam efeitos interessantes. Estas imagens são substituídas por ou-tras quando o usuário passa o ponteiro do mouse sobre elas ou dá umclique, 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 Culturale acrescentar alguns botões que serão, posteriormente, a barra de nave-gação. Estes botões terão um comportamento associado a eles, ondedefiniremos que o evento será quando o usuário passar o mouse sobreeles 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áginainicial da home page. Como exemplo, insira, no início da página, umafigura que já tenha sido criada (ou somente um texto) que represente onome 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 algumtexto 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 onome index.htm, assim, qualquer site que você acessar, este arquivoserá o primeiro a ser exibido no navegador (“arquivo de apresentação dosite”). Vamos, então, salvar esta página que estamos criando com o nomeindex.htm.

Selecione a opção Salvar do menu Arquivo. Na caixa de diálogo SalvarComo, localize a pasta Agenda_Cultural (que contém todos os arquivosdo site), e na caixa de texto Nome do arquivo, digite index.htm (comomostra 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 nobotão OK.

Dreamweaver 3.0


Com a página quase completa, só falta inserirmos as imagens cambiáveise depois os links para as outras páginas que criamos anteriormente.Para criar uma imagem cambiável, precisamos de duas imagens, asquais 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 forposicionado 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ávelaparecerá:

Dreamweaver 3.0


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

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

Clique no botão OK. Agora posicione o ponto de inserção no lado direitoda primeira imagem e insira uma outra imagem cambiável, onde esta sechamará botao2 (lembre-se que estas imagens constituirão a barra denavegação da primeira página do site). Repita o procedimento até inseriras 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 inspetorde propriedades, digite 10 no campo de texto Espaço H para que haja umespaço entre elas.

Para testar o efeito das imagens cambiáveis, devemos abrir a página emum navegador. Estando com a página aberta na janela do documento,pressione a tecla F12 (isso se o seu navegador for o Internet Explorer) ouselecione 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 pararetornar à janela do documento.

Dreamweaver 3.0


INSERINDO HYPERLINKS

Um hyperlink estabelece um link (conexão) de uma página para outrodestino, 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 demultimídia ou documento do Microsoft Office) ou um programa. Umhyperlink 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 doslinks, 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 devínculos:

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

Vínculos de caminho relativo: apontam do documento atual para outrodocumento 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, ena 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 aimagem do botão Filmes da página principal conterá um link para estanova página. Esta página, que terá como título Filmes, exibirá os nomesdos 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 napasta Agenda_Cultural e dê o nome de filmes.htm ao arquivo. Depoisexiba a caixa de diálogo Propriedades da página e digite Filmes na caixade texto Título. Por fim, insira o conteúdo na página Filmes de maneiraque fique parecido com a próxima figura.

Dreamweaver 3.0


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

No inspetor de propriedades, clique na pasta ao lado da caixa de textoVí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 umaoutra caixa denominada Destino. O campo Destino é um atributo de linkso qual especifica onde o link em questão deve ser aberto: na mesmajanela ou em uma nova. Clique na setinha do campo Destino e veja asopçõ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 oconteúdo da janela atual (neste caso ficamos apenas com uma janelaaberta). 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 apágina do filme apropriada.

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

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

Dreamweaver 3.0


Salve seus arquivos. Ainda falta inserirmos outros links na páginafilmes.htm e nas páginas referentes a cada filme. Da página filmes.htmdeverá 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 seucargo criá-las e estabelecer os links). Da página referente a cada filmedeverá haver um link que volte à página filmes.htm, como mostra a figuraa seguir.

Vamos agora visualizar o mapa do site onde poderemos ver a estruturado site e os ícones vinculados. A exibição do mapa do site é ideal parafazer storyboards ou criar o layout da estrutura do site, além de poder serutilizado para adicionar novos arquivos a um site ou modificar, adicionarou remover vínculos.

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

Dreamweaver 3.0


Como padrão, o mapa exibe dois níveis da estrutura do site. Clique nossinais de adição (+) ou subtração (-) ao lado de uma página para mostrarou 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 atecla F12 (se o seu navegador não for o Internet Explorer, utilize a opçãoVisualizar no navegador do menu Arquivo). A janela do seu navegadorserá 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 Dreamweavercria um arquivo temporário (cujo nome inicia-se com as letras TMP) queele utiliza como o arquivo de visualização de navegador (esse arquivopode ser visto na janela do Site, já que ela exibe todos os arquivos dosite). Portanto, se você modificar o arquivo no Dreamweaver e depois najanela do navegador clicar no botão Atualizar ou Refresh, a versão maisatual do arquivo não será mostrada, será necessário fechar a janela donavegador e visualizar o arquivo novamente.

Dreamweaver 3.0


VÍNCULOS DE CAMINHO ABSOLUTO E ÂNCORASIDENTIFICADAS

Todos os hyperlinks que inserimos no site possuem vínculos de caminhorelativo, pois todos os arquivos relacionados estão localizados na pastaAgenda_Cultural. Para inserir vínculo de caminho absoluto (quando odestino do link não está em localizado na pasta local), o processo é omesmo: selecione o texto ou figura e no inspetor de propriedades, digitetodo 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 detexto 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ópicoespecífico ou para a parte superior ou inferior de um página, fazendo-ochegar rapidamente à posição selecionada.

Como exemplo, vamos criar uma âncora identificada na página do filmeO Patriota e depois criar um link para essa âncora. A âncora identificadaserá uma imagem (como mostrada na figura a seguir), e o link a essaimagem 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 textoInserir âncora com nome digite um nome para a âncora, como mostra apró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 detexto 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 sinale o nome). Depois pressione a tecla Enter.

Dreamweaver 3.0


A palavra família agora está vinculada com a âncora identificada. Paraver 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 nomeda â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 nomeda 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 outrolocal da Internet, será necessário digitar o endereço absoluto e no final onome 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 nonavegador, mas somente na janela do documento (desde que a opçãoExibir 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 cliqueduplo sobre ele para abrir o inspetor de propriedades, e assim saber oque é 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 ascores 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 apágina de destino.Vínculos ativos: quando os usuários estão com o mouse no link prontospara 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álogoPropriedades 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 alterara 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 ( ) paraabrir a caixa de diálogo Cor e escolher outra cor que não esteja na paletade 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áginabaseada em molduras é dividida em várias janelas dentro de janelas,assim, uma única página do site pode conter várias molduras, cada umapodendo exibir um conteúdo diferente. Utilizamos as molduras quandoqueremos 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 quehaver um único arquivo com a finalidade de unir todos os arquivos demolduras presentes em uma página, pois este arquivo (que representa oconjunto 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 cadamoldura.

Vamos agora criar um outro site, ou melhor, vamos criar novamente umsite 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. Nacaixa de diálogo apresentada, digite agenda2 na caixa de texto Nome dosite, depois clique no ícone correspondente à pasta, à direita do campoPasta raiz local e, dentro da pasta Site, crie uma nova pasta denominadaAgenda_Cultural_Moldura (como mostra a próxima figura). Depois cliqueno 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 arquivoindex.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 layoutspredefinidos de conjuntos de molduras. Posicione o mousesobre cada botão e veja que aparecerá um pequeno textoinformando 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 umaborda cinza, selecione a opção Bordas da moldura do menu Exibir).

A moldura da esquerda irá conter a barra de navegação do site (sendoque esta moldura ficará sempre visível) e a moldura da direita terá seuconteú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 querepresenta o título da home page, que é Guia Cultural. Dê um clique namoldura 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 utilizamosesta opção, ou seja, quando dividimos uma moldura que já existe napágina (no nosso caso dividimos moldura direita), temos um Conjuntoaninhado de molduras, onde a moldura original é chamada de pai e amoldura 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 comuma estrutura diferente de páginas, copie todos os arquivos (menos oindex.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 arquivosfilmes.htm, 60segundos.htm, etc, selecionando a opção Abrir do menuArquivo (a página será aberta em uma outra janela de documento). Sequiser, 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 apró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 oponto 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 textoGuia Cultural), como mostra a próxima figura.

Posicione o ponto de inserção na moldura da direita para inserirmos otexto de apresentação do site. No menu Arquivo, selecione a opção Abrirna 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ãoSelecione. 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; napróxima caixa de diálogo apresentada (Copiar o arquivo como), digiteprimeira.htm na caixa de texto Nome do arquivo.

O conteúdo do arquivo será inserido na moldura, mas como queremossomente 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 naverdade 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 dediálogo Salvar como você deverá definir um nome para cada arquivo, epara saber qual arquivo (ou moldura) que está sendo salvo, é só obser-var qual moldura ficará selecionada na janela do documento. Como mostraa 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 doarquivo 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ãoSalvar.

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á queela 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ésdo menu Janela, opção Molduras.

O inspetor de molduras fornece uma representação visual das moldurasexistentes 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 namoldura desejada e veja que aparece uma linha forte em torno da moldu-ra, e uma linha tracejada aparece em torno da mesma moldura na janelado documento. Para selecionar qualquer moldura na própria janela dodocumento, pressione a tecla Alt e dê um clique na moldura. Para sele-cionar todo o conjunto de molduras, clique na borda mais externa doinspetor de molduras.

Dreamweaver 3.0


Quando as páginas de um site são criadas utilizando-se molduras, oarquivo 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 detítulo da janela do navegador.

Através do inspetor de molduras, selecione o conjunto de moldurasclicando na borda externa, como mostra a figura anterior. Agora, paradefinir o título Guia Cultural, utilize a opção Propriedades da página domenu Modificar, e realize a alteração da mesma maneira que você apren-deu quando estava construindo páginas sem molduras. Depois salve suapá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 decada 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 amoldura, depois escolha a opção Propriedades do menu Janela (issose o inspetor de propriedades estiver fechado). Se necessário, clique naseta 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 queeste nome será utilizado como referência de destino e roteiro dehipervínculos. O nome de uma moldura dever conter apenas uma pala-vra, e um nome de moldura é diferente de um nome de arquivo. Aproveitee selecione a moldura superior e digite moldurasuperior no campo nomeda moldura, depois selecione a moldura esquerda e dê o nome demolduraesquerda a ela, por fim selecione a moldura da direita e dê onome de molduraprincipal. Após digitar o nome no campo, pressione atecla Enter ou então clique na pequena imagem da moldura exibida noinspetor de propriedades.

2. Orig: determina o documento de origem da moldura. Digite um nomede arquivo ou clique no ícone correspondente à pasta, para procurar eselecionar o arquivo.

3. Paginação: determina se as barras de rolagem aparecerão quandonã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 ePadrão. A definição padrão da maioria dos navegadores é Sim. Paradesativar uma borda, todas as molduras a ela adjacentes deverão estardefinidas 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, empixels (o espaço entre as bordas da moldura e o seu conteúdo).

Além de alterar todas estas propriedades das molduras, você tambémpode modificar o tamanho das molduras, e uma maneira fácil de fazeristo é arrastando as bordas das molduras. Quando você leva o mousepara 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 definiros tamanhos aproximados das molduras; em seguida, utilize o inspetorde propriedades para especificar a quantidade de espaço que o navega-dor reservará para uma moldura, quando o tamanho da tela não permitirque as molduras sejam exibidas no tamanho em que foram criadas.

OBS: Para abrir a página com todas as molduras, abra o arquivo querepresenta o conjunto das molduras (no nosso caso, index.htm) e de-pois, no menu Exibir, selecione a opção Bordas da moldura para queas bordas sejam exibidas e assim você poder visualizar as moldurasclaramente.

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. Quandouma imagem for utilizada como um botão de uma barra de navegação, aimagem pode apresentar quatro estados:

••••• Ativa: a imagem que aparecerá quando a página for inicialmentecarregada.

••••• Sobreposta: a imagem que aparecerá quando o ponteiro formovido sobre uma imagem.

••••• Inativa: a imagem que aparecerá quando o usuário clica sobreela.

••••• 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 (essasimagens foram criadas no Photoshop).

Posicione o ponto de inserção no frame da esquerda. Agora selecione aopção Barra de navegação do menu Inserir, a caixa de diálogo Inserirbarra 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 ouem alguma moldura (na moldurasuperior, molduraprincipal ou namolduraesquerda).

Como nome do ele-mento, digite botao1.Clique no botão Procu-rar para localizar e se-lecionar os arquivos deimagem. Na caixa detexto Quando clicado,vá para a URL cliquena pastinha e selecio-ne o arquivoprimeira.htm, poiscomo estamos inserin-do a imagem do botãoHome 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çãomolduraprincipal (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álogoInserir barra de navegação. Todos os campos estarão livres para quevocê 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çãoestarã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 noinspetor de propriedades, verifique se na caixa Destino está selecionadaa 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 propriedadesda 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 aopção Propriedades da página do menu Modificar (ou então cliquecom o botão direito do mouse na moldura desejada e selecione a opçãoPropriedades da página no menu pop-up que aparecerá).

Agora é bom você visualizar a página principal no navegador e testar oshyperlinks. Pressione a tecla F12; se for exibida uma janela avisando queé necessário salvar a página antes de visualizá-la no navegador, cliqueno 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 tempotodo, enquanto outras partes podem ter o conteúdo alterado. Quandovocê insere os links nas páginas, preocupe-se com o destino desteslinks. Por exemplo, na página Filmes, que apresenta o nome dos filmescomo links, certifique-se onde a página será aberta quando o usuárioclicar 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 namoldura-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 asimagens presentes nas suas páginas. As tabelas são compostas portrês componentes básicos: as linhas, as colunas e as células (que sãoos pequenos retângulos criados pela interseção de uma linha com umacoluna), sendo que nas células podemos inserir textos e imagens, e ostextos podem ser formatados como se estivessem em qualquer outraparte 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 dastabelas: largura, altura, alinhamento, bordas, imagem ou cor de fundo,dentre outras.

Na figura anterior, temos o exemplo de uma tabela construída em umapágina da janela do documento, e observe que alteramos algumas pro-priedades desta tabela e de algumas células. Na região A alteramos acor de fundo das células e a cor da borda também, na região B forammescladas 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, alteramostambé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óximafigura (“cruz”), ou então, com o cursor posicionado em alguma célula databela, pressione Ctrl + A. Para selecionar todas as células de uma linhaou coluna, posicione o ponto de inserção na margem esquerda de umalinha ou no alto de uma coluna e dê um clique quando a seta de seleçãoaparecer; para selecionar blocos de células, clique em uma célula e ar-raste o mouse horizontal ou verticalmente. Se quiser selecionar célulasnão adjacentes, pressione a tecla Ctrl enquanto clica nas células.

Com a tabela ou células selecionadas, vamos ver quais as propriedadesque 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 dascolunas (excluir todos os valores de altura de linha e largura de colunada tabela), Converter as larguras da tabela em pixels e Converter aslarguras da tabela em percentagens.

� Preench. da célula: especifica o número de pixels entre o conteúdo dacélula e os seus limites (ou parede).

� Espaço entre células: especifica o número de pixels entre cada célulada tabela.

� Borda (localizada na parte superior direita do inspetor): especifica alargura, em pixels, da borda da tabela.

� Borda clara e Borda clara: campos utilizados para definir as cores dasbordas que tenham um efeito de realce e de sombreado, respectiva-mente, o que conferirá uma aparência tridimensional à borda (pararetornar ao sombreado em tons de cinza padrão, remova os valoresdas cores e mantenha os campos em branco).

� Borda (localizada na parte inferior direita do inspetor): especifica umacor 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çamentoe preenchimento da célula, os navegadores exibirão a tabela como se oespaç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 (quepode 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 (quepode ser no alto, no meio, embaixo, na linha de base ou com o padrãodo navegador).

� L e U: especificam a largura e altura das células selecionadas, empixels (para utilizar percentagens, coloque um sinal de percentual (%)após o valor).

� Campo Fundo (acima): utilizado para definir uma imagem de fundopara uma célula.

� Campo Fundo (embaixo): utilizado para definir a cor do fundo de umacé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 umacé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 osdados à 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, comoinserir 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 colunasSe você precisar inserir mais linhas ou colunas em uma tabela já exis-tente, o Dreamweaver permite que você faça isso de uma maneira muitosimples. Basta clicar em uma célula na qual deverá aparecer a novalinha 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, nomenu 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 aparecerantes ou depois da linha ou coluna selecionada, use a opção Inserirlinhas ou colunas (do menu Modificar ou do menu contextual).

Utilizando a opção Inserir linhas ou colunas, a caixa de diálogo da figuraanterior é exibida, e você poderá definir o número de linhas ou colunas aser 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 obotão direito do mouse).

Mesclar célulasMesclar células significa produzir uma única célula a partir da combina-ção de células adjacentes e que constituam uma região retangular. Paramesclar células, selecione as células desejadas (lembre-se que as célu-las selecionadas deverão constituir uma região retangular), depois cliqueno 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élulamesclada resultante.

Na figura a seguir observe que as quatro células do centro da tabelaforam 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 oucoluna, 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 emDividir 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 estatabela apresentará apenas o nome dos filmes com algumas informa-ções.

Crie uma nova página a partir da janela do documento do segundo siteGuia 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 atabela terá, e no campo Colunas, especifique o número de colunas. Nocampo Largura, especifique a largura da tabela, em pixels, ou como umpercentual 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 oconteúdo da célula e os seus limites (ou parede), e no campoEspaçamento entre as células, especifique o número de pixels entre cadacélula da tabela. Essas propriedades poderão ser alteradas posterior-mente, como vimos no tópico anterior sobre as propriedades da tabela edas células da tabela.

Dreamweaver 3.0


Na sua caixa de diálogo Inserir tabela, digite os valores como mostra afigura 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 seexpandindo automaticamente. Para movimentar-se pela tabela, pressio-ne a tecla Tab para deslocar-se para a próxima célula ou as setas doteclado 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 caixade seleção Cabeçalho, depois defina uma cor de fundo para as célulasdo cabeçalho. Selecione todas as outras células (menos as da primeiralinha), centralize-as e altere o tipo da fonte, tudo através do inspetor depropriedades. Agora selecione toda a tabela e defina uma cor diferentepara as bordas claras.

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

Dreamweaver 3.0


Assim, selecione o texto da célula da segunda linha da última coluna e, noinspetor de propriedades, digite missao_impossivel.htm na caixa de textoVí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 (obotão Filmes) aponte para essa página, ou seja, quando ele receber umclique, a página relação de Filmes será aberta.

Nos capítulos posteriores iremos estudar as Camadas, onde as tabelase camadas permitem controlar a posição dos elementos na página, evocê verá que com o Dreamweaver é fácil converter um layout de tabelaem um layout de camada, mas as camadas não contam com suportenos 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ãodos visitantes, fazer uma votação onde os visitantes escolhem entre umitem e outro, etc, assim, podemos concluir que os formulários permitemcoletar 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 oferecemopçõ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 deformulário, os quais são denominados:

1, 2, 5 e 7 – Campo de texto3 e 4 – Menu de lista6 - Botão de opção8 - Botão

Além desses quatro objetos, ainda temos: caixa de seleção, campo dearquivos, campo de imagens, campo oculto e menu de salto.Campos de texto: também chamados caixas de texto, são utilizadospara 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 derolagem).Botões: realizam tarefas quando são clicados, ou seja, são aquilo quefaz o formulário fazer algo, como enviar as informações e redefinir osdados 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çõesem 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 emgrupos. A seleção de um dos botões do grupo cancela a seleção detodos os outros.Menus de lista: apresentam um conjunto de valores que os usuáriospoderão escolher.Campos de arquivos: permitem que o usuário procure os arquivos nosdiscos 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 foremrelevantes 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 vinculaa 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 dedocumento do site Guia Cultural (com molduras), clique na opção Novodo menu Arquivo para criar uma nova página. Salve a página com onome formulario.htm (na pasta Guia_Cultural_Moldura) e depois defina oseguinte título para a página: Formulario.

OBS: Antes de inserir o formulário, pressione Enter e deixe o cursorposicionado no segundo parágrafo, pois acima do formulário iremos digitaralgum 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 depoisclique 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 estivervendo nada, verifique se a opção Elementos invisíveis do menu Exibirestá ativada).

Esta borda tracejada representa o formulário propriamente dito, e todosos objetos de formulário serão inseridos dentro desta área retangulartracejada. Por padrão, o formulário ocupa toda a largura da página, e aaltura é determinada pelo conteúdo que você coloca dentro das bordasdo 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 doformulá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 oscampos 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 podemser digitados no campo, como por exemplo, definir que os códigospostais devem ter oito dígitos.

� Tipo Linha simples: utilizado quando você espera que a resposta dadopelo 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 queo usuário digite uma determinada senha, sendo que o navegador exi-birá marcadores ou asteriscos em vez dos caracteres que foremdigitados.

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 detexto, 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 camponomee 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 (estecampo é necessário e o seu nome deve ser exclusivo). Em Tipo, deixe aopçã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 demesmo 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 (otexto que aparece na lista) e um valor (o que será enviado ao aplicativode processamento, se o item for selecionado). Se não for especificadoum valor, apenas o identificador será enviado ao aplicativo deprocessamento.

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

Dreamweaver 3.0


Agora, no inspetor de propriedades, selecione o número 1 no campoSelecionados inicialmente (olhe próxima figura). Isso fará com que, quandoa página for aberta no navegador, o objeto listadia exiba o número 1 (sequiser 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 (denominadolistadia) e insira outro objeto de formulário Lista/menu. No inspetor depropriedades desse objeto, digite listames no campo Lista/menu, seleci-one o Tipo Menu e como valores da lista, digite os meses do ano. Nocampo 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 ousuá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 edigite campoano no Campo de texto.

Pressione a tecla Enter e digite no início do parágrafo o texto Opções deuso 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 paraselecioná-lo.

Dreamweaver 3.0


No inspetor de propriedades, como mostra a figura anterior, digiteopcoesinter 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 deprocessamento (um roteiro CGI, por exemplo) caso o botão seja seleci-onado. Digite botaoestudo neste campo (cada botão de opção em umgrupo deve ter um Valor selecionado diferente).

O outro campo, Estado inicial, especifica se o botão estará ativo ou nãoquando o formulário for carregado pela primeira vez. Apenas um botãode 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 objetoCampo de texto, onde este deve apresentar as seguintes propriedades:Larg. do caractere: 85, Tipo: Multi-linha, Número de linhas: 4, nome doCampo de texto: campocoment.

Dreamweaver 3.0


No nosso formulário agora só falta inserirmos um botão que quando forclicado enviará os dados contidos no formulário, e outro que apagará osdados 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 oRedefinir, 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 corde 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. Comoexemplo, vamos validar o campo de texto onde o usuário deverá digitar oendereço do seu e-mail (que é o campoemail), ou seja, o Dreamweaververificará 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 nobotão com o sinal de adição (+); um menu de contexto será apresentadoe 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óximafigura e depois clique no botão OK.

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

OBS: Como você pode ver na figura anterior, outros campos podem servalidados. Se a caixa Necessário for selecionada, significa que o campodeve 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) eveja que uma caixa de mensagem será exibida, dizendo ou usuário queaquele 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 mensagemespecificada por você poderá ser exibida. Com o campoemail seleciona-do, clique no botão com o sinal (+) da janela Comportamentos e, no menude contexto, selecione a opção Mensagem pop-up. Na caixa de textoMensagem 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á acrescentarmais um item na barra de navegação que se encontra namolduraesquerda, pois quando o usuário clicar neste item (no botão), apágina Formulários deverá ser exibida. Os quatro arquivos de imagensque 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çãopode 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 nobotão Enviar, os dados vão para o servidor e um script CGI (ou outroscript personalizado) é executado, pois só assim você poderá recuperare acessar os dados resultantes do formulário. Mas, no Dreamweavernã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 enviaos resultados do formulário no URL enviado para o script; e POST, quecodifica o material enviado para o script; estas duas opções aparecemno inspetor de propriedades do formulário. Na janela do documento, dêum clique na borda do formulário para selecioná-lo; o inspetor exibirá aspropriedades do formulário, onde é necessário escolher o método (GETou POST) e a ação (o URL do script que processará o formulário deveaparecer 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 principalmentepara a formatação de textos. Você pode definir estilos (como o tipo defonte, cor, tamanho, etc), atribuir um nome ao estilo e depois aplicar napágina, onde uma folha de estilo representa um grupo de estilos, e podeestar vinculada a várias páginas. A grande vantagem de trabalhar comfolhas de estilos é que quando você altera ou atualiza algum atributo doestilo, 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 umarquivo de texto (.css) que contém as especificações de estilos eformatação, e para definir as folhas de estilos, utilizaremos a caixa dediálogo Editar a folha de estilos, a qual permite abrir uma folha de estilosjá existente ou criar uma nova.

Nota: As folhas de estilos funcionam somente em navegadores 4.0 oumais avançados.

Veja a seguir um exemplo de uma folha de estilo, a qual especifica que otítulo H1 tem o tamanho de fonte 20, tipo Arial, negrito e a cor vermelha.

H1 {FONT: 20pt “Arial”font-weight: boldcolor: red}

Você poderá criar um estilo novo (e dar um nome a ele) ou então redefiniralgum 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ótulosque 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 seletorde rótulos) da própria janela do documento. Abra algumas páginas e vejaos rótulos dos elementos que estão inseridos na página.

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

No exemplo da figura anterior, com o ponto de inserção posicionado emuma 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 quevocê fizer ou alterar na página é também feito e alterado no código. Nafigura acima, quando selecionamos a célula da tabela, se observarmosna 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 é trabalharcom a janela Inspetor de Origem HTML aberta, assim você poderá vercomo tudo que você faz na página é transformado em código HTML.

Depois de conhecer um pouco mais sobre os rótulos, vamos ver comopodemos criar uma folha de estilos. Selecione a opção Estilos CSS domenu Janela ou clique no botão Estilos CSS do Iniciador (ou Mini-inicia-dor); você verá a janela Estilos CSS (CSS - Cascading Style Sheets, ouFolhas de Estilo em Cascata).

Dreamweaver 3.0


Para criar um estilo novo, clique no botão Novo estilo, como mostra afigura anterior, para que a janela Novo estilo seja apresentada.

Como dissemos anteriormente, você poderá criar um estilo novo, redefiniralgum rótulo de HTML ou definir a formatação para uma determinadacombinaçã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 digitarum nome, rótulo ou seletor de rótulos para o novo estilo. Os nomes deestilos devem iniciar com um ponto, e caso o ponto não seja colocado, oDreamweaver 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 nomenu 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 donovo estilo CSS no painel correspondente. Deixe alguns atributos embranco caso não sejam importantes para o estilo; os atributos que nãoaparecerem 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ãoAplicar (canto inferior esquerdo). Se a caixa que está na frente destebotão estiver selecionada, qualquer texto que você selecionar na páginaimediatamente 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 estilocriado 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 econter um ou mais estilos. Para criar ou vincular uma folha de estilosCSS externa, clique no ícone Abrir a folha de estilos da janela EstilosCSS.

Na caixa de diálogo Editar a folha de estilos, clique no botão Vínculo. Acaixa de diálogo Vincular a folha de estilo externa será exibida, e nelavocê deverá localizar uma folha de estilo já existente (clicando no botãoProcurar) 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 queestá sendo criado como uma folha de estilos linkada) ou Importar (paraque o novo arquivo seja utilizado como uma folha de estilos importada).Embora ambas as opções passem todos os estilos da folha de estilosCSS externa para o documento, a opção Vínculo oferece mais recursose 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 dediá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 deestilo) ainda está vazio.

Dreamweaver 3.0


Vamos agora inserir conteúdo (os estilos) no arquivo prop.css. Com onome da folha de estilo selecionado na caixa de diálogo Editar a folha deestilos, 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 estilosna 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 únicapá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 abertaem 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 estiloCSS neste mesmo texto, a formatação do estilo será ignorada. Destamaneira, 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, umavez definido o arquivo .css e o seu conteúdo, este pode ser aplicado emquaisquer páginas. Os estilos HTML também são criados para facilitar aformatação de textos, mas ao contrário das folhas de estilos, os textosformatados com os estilos HTML são não atualizados automaticamentequando 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 ouentão criar um estilo a partir do zero, e também o estilo poderá ser criadopara modificar apenas um texto que esteja selecionado ou um parágrafointeiro. 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 domenu Janela ou então clique no botão Estilos HTML do Iniciador ou doMini-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 osestilos com o símbolo da letra a sublinhada (a) formatam apenas o textoque estiver selecionado.

Para criar um novo estilo HTML a partir do zero, clique no ícone de Novoestilo da paleta de estilos HTML. Na caixa de diálogo Definir o estilo HTMLque será apresentada, digite um nome para o estilo que está sendo cria-do, escolha se deseja aplicar o estilo HTML ao texto selecionado ou aopará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 nobotão OK.

Dreamweaver 3.0


Se você já tem um texto formatado e deseja criar um estilo HTML a partirda 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 oestilo 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 mouseno estilo e selecione a opção Editar do menu contextual (não deverá havernenhum 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álogoDefinir o estilo HTML, faça as alterações e clique no botão OK. Lembre-seque 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 napaleta de estilos HTML. Se a caixa de seleção Aplicar, localizada na parteinferior da paleta, estiver selecionada, clique uma vez no estilo, e se elanão estiver selecionada, clique no estilo e depois clique em Aplicar.

Na paleta de estilos HTML, as duas primeiras linhas Limpar o estilo dopará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 formatadoe clique em uma das duas opções.

OBS: As duas opções (Limpar o estilo do parágrafo e Limpar o estilo daseleção) podem ser utilizadas para remover qualquer formatação, mes-mo que esta tenha sido aplicada através da paleta de estilos HTML ou doinspetor de propriedades.

Para excluir um estilo da paleta de estilos HTML, verifique se a caixaAplicar está desmarcada, depois selecione o estilo HTML que deseja re-mover e clique no ícone de Excluir o estilo (lata de lixo), no canto inferiordireito da paleta.

OBS: Todos os estilos HTML criados são armazenados no arquivostyles.xml, que se encontra na pasta Library (para visualizá-lo, selecionea opção Arquivos do site do menu Janela para abrir a janela Site). Estearquivo poderá ser copiado, excluído, etc, como qualquer outro arquivodo site, e é por isso que os estilos HTML podem ser reutilizados porquaisquer 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 nascamadas podem ser facilmente reposicionados, garantindo umposicionamento exato quando forem exibidos no navegador. Nas cama-das podemos inserir textos, imagens, formulários, outras camadas, ouseja, qualquer elemento que pode ser colocado em uma página tambémpoderá ser colocado em uma camada. E uma coisa muito interessantesobre 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 deempilhamento 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 (umacamada padrão será inserida onde o cursor estiver posicionado) ou cliqueno botão Desenhar camadas ( ) da paleta de objetos. Quando vocêclica no botão Desenhar camadas o ponteiro do mouse transforma-se emduas pontas, você deverá arrastá-lo no local desejado da página para de-senhar a camada. Na janela do documento, aparecerá um marcador nocanto superior esquerdo da página para cada camada criada.

AS PROPRIEDADES DAS CAMADAS

As propriedades das camadas são especificadas através do inspetor depropriedades. 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 camadascom 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 oconteúdo possa ser visualizado, hidden (oculta): o conteúdo que nãocouber na camada será cortado e portanto não será exibido, scroll: adici-ona barras de rolagem à camada, auto: quando o conteúdo for maior queo 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 orestante será ocultado (e não excluído). Você deverá definir medidas apartir da parte superior da camada (A e X) e a partir da margem esquerdada 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 parteespecí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 deempilhamento, 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 umolho (como mostra a figura anterior), a camada herdará as definições devisibilidade 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. Noinspetor de camadas você ainda poderá renomear uma camada dandoum clique duplo no nome dela, digitando outro e pressionando a teclaEnter.

Dreamweaver 3.0


A caixa de seleção Evitar sobreposição do inspetor de camadas evitaou 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 ouredimensionada sobre outra.

OBS: Algumas versões dos navegadores podem não exibir as camadascorretamente, 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 casoassim utilize a opção Evitar sobreposições.

Para alterar as propriedades de uma determinada camada (ou mesmoexcluí-la, arrastá-la ou redimensioná-la utilizando o mouse), esta deveráestar selecionada. Uma camada pode ser selecionada através de váriasmaneiras:

� 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çãopara 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, comoeram chamadas na versão anterior do Dreamweaver), iremos utilizar ascamadas para criar uma animação.

Dreamweaver 3.0


AS LINHAS DE TEMPO

Com as linhas de tempo temos a possibilidade de inserir animações naspáginas da Web, onde estas animações alteram a posição, o tamanho, avisibilidade e a ordem de empilhamento das camadas conforme o tempovai 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 ecomportamentos, e elas utilizam o HTML dinâmico para alterar as propri-edades de camadas e imagens. O DHTML, ou HTML dinâmico, significaque você pode alterar ou mover camadas mesmo depois que a páginafoi 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 modificaras animações. Para exibi-lo, selecione a opção Linhas de tempo domenu Janela. No inspetor você irá controlar o tempo que cada camadaserá 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 estiverselecionada, a linha de tempo será executada automaticamente assimque a página for carregada em um navegador. Já a opção Loop provocaa repetição indefinida da linha de tempo quando a página estiver abertaem um navegador.

ADICIONANDO E MOVENDO CAMADAS

Vamos inserir uma camada em uma nova página e ver como podemosanimá-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 dacamada 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 edepois no menu Modificar, apontar para Linha de tempo e clicar emAdicionar objeto na linha de tempo.

Dreamweaver 3.0


OBS: Os únicos objetos que você adicionar nas linhas de tempo são ascamadas 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ãoo objeto diretamente.

Por enquanto só adicionamos a camada no inspetor, agora vamos fazê-la movimentar. No inspetor de linhas de tempo, clique no marcador dequadro 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 é chamadaQuadro primário, sendo que cada quadro primário é um ponto onde algoacontece. Por exemplo, se você quiser que em determinado momentoda 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çade 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 aposição de início da camada até a sua nova posição.

Agora para reproduzir a linha de tempo, clique no botão Rebobinar paraque o cabeçote de execução volte para o começo. Vá clicando no botãoExecutar 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 adicionaroutros quadros primários na linha de tempo da camada. Primeiro arrasteo quadro primário final para ampliar a barra de animação (até o quadro30, por exemplo), agora clique em algum quadro no meio da barra deanimação e, no menu Modificar, aponte o mouse para a opção Linhade tempo e clique em Adicionar quadro primário. Arraste a alça deseleção da moldura e faça um outro caminho.

Clique novamente no botão Rebobinar do inspetor e reproduza a linha detempo 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, terseu comprimento aumentado, poderá também ser movida para qualquerlugar do inspetor. Para movê-la, clique em algum quadro da barra (desdeque 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 barrade animação selecionada, também é possível inserir um quadro primáriopressionando 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 relativasa 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 domenu Inserir, insira a imagem cachorro.gif, ou outra qualquer (todas asimagens que iremos inserir nesta página são gifs animados). Selecionea 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 valoresdas 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 amesma 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 quevocê não fique com muitas janelas (inspetores) abertas, arraste o inspe-tor Camadas (ou melhor, a guia Camadas) para o inspetor Linhas detempo, assim em uma mesma janela você terá duas guias: Linhas detempo e Camadas (observe a próxima figura). Para separá-las, arraste aguia 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-aem 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 últimoquadro 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 camadacachorro.

Volte o cabeçote de execução até o quadro 1 (basta clicar no botãoRebobinar 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 acamada cavalo invisível (com o olho fechado), pois queremos que primei-ro aparece o cachorro e depois de um tempinho apareça o cavalo. Noinspetor Linhas de tempo selecione a opção Execução automática, salvea página e depois pressione a tecla F12 para exibi-la no navegador. Fechea janela do navegador e volte para a página na janela do documento.

Vamos inserir outras camadas e animá-las. Insira uma nova camada edentro 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 entreo cachorro e o cavalo. Com a camada nesta posição (que será a posiçãoinicial), arraste-a para o quadro 45 do canal 3. Aumente o tamanho dabarra 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 asdimensões das duas e dê o nome de onca para a camada. Posicione acamada onca no mesmo local onde você colocou inicialmente a camadahomem (o objetivo será fazer a onça “correr” atrás do homem). Arraste aalç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 dacamada 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 duasvezes depois que a página é carregada, basta copiá-las no mesmo ca-nal, só que alguns quadros a frente. Selecione a camada homem, dê umclique 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 mouseno quadro 90 do canal 3 e selecione a opção Colar, repita o procedimentode 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 aguiapara 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 5mas no quadro 140. Defina o movimento para a águia de modo que elavá do canto inferior direito ao canto superior esquerdo da página, masnão se movimente em linha reta (será necessário inserir outros quadrosprimários na barra de animação).Agora você deverá definir quais as camadas que serão exibidas quandoa 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 ocavalo, 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 vezda águia entrar na página. Desta maneira, será necessário posicionar ocabeçote de execução em determinados quadros e definir, através daguia Camadas, se a camada será visível ou não.

Por exemplo, salve sua página e visualize-a no navegador. Você verá queas camadas não estão aparecendo exatamente na ordem que deseja-mos. Por isso, volte na janela do documento e posicione o cabeçote deexecução no início (quadro 1), selecione a guia Camadas e deixe todasas 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 daguia Camadas, se as camadas apresentam a visibilidade correta. Volte ocabeçote para o início, confira novamente as camadas que deverão estarinicialmente 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ívelinserir elementos que se movimentem nas páginas da Web, sendo quevocê 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 dajanela 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 etextos 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 sejamais exibida, e no seu lugar adicione o Inspetor de proprieda-des.

3 - Crie um site denominado turismo na pasta raiz localAgencia_Turismo (os próximos exercícios o conduzirá a criar pági-nas que constituirão um site referente a uma agência de viagensfictícia, a Villar Turismo) .

4 - O Dreamweaver é utilizado para criar páginas para a Web, mas oque é 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 figuramostra 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áginacriada anteriormente.

8 - Insira duas linhas horizontais: uma acima do terceiro parágrafo eoutra abaixo do quinto parágrafo. A altura das linhas horizontais deveser 3 e não devem ser sombreadas.

9 - No local que indicamos na figura anterior, insira uma figura (comopor exemplo a imagem de um avião).

10 - Insira uma moldura esquerda na página; a página será dividida e oconteúdo já inserido ficará posicionado na moldura da direita (ou namoldura principal).

11 - Agora crie outras páginas, onde uma deve ser referente às viagensoferecidas 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 umnome 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 conjuntodas molduras (arquivo index.htm), já que ele é que será exibido nonavegador.

13 - Na moldura esquerda insira uma barra de navegação, sendo queesta barra deverá apresentar no mínimo os seguintes elementos:Home, Viagens e Promoção. Aproveite e já estabeleça os hyperlinksdas imagens (que serão os botões da barra de navegação) com aspá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 umatabela 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 defundo de algumas células, as bordas, etc.

15 - Crie uma nova página na janela do documento. Nesta página insiraum formulário, onde este deve apresentar campos de textos (para ousuário digitar seu nome e e-mail) e alguns outros campos a suaescolha. Salve a página (na pasta Agencia_Turismo) e defina umtítulo para ela.

Dreamweaver 3.0


19 - Edite a barra de navegação já existente e insira um outro elementoque deverá apresentar o texto Consulte-nos. Quando o usuário clicarnesta 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 emqualquer 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 dapá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 detempo. 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áticahttp://www.celtainformatica.com.br

Technology

Apostila dreamweaver