Treinamento Prático em Dream Waver

5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com

http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 1/130



© 2006 by Digerati BooksTodos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.Nenhuma parte deste livro, sem autorização prévia por escrito da editora,poderá ser reproduzida ou transmitida sejam quais forem os meios emprega-dos: eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros.

Diretor EditorialLuis Matos

Assistência EditorialMonalisa NevesErika Sá

Preparação dos originaisJeferson Ferreira

RevisãoLuciana Salgado Guimarães Moreira

Projeto GráficoDaniele Fátima

DiagramaçãoLuciane S. Haguihara

Dados Internacionais de Catalogação na Publicação (CIP)(Câmara Brasileira do Livro, SP, Brasil)

P659h Pinto, Sandra Rita B.

Treinamento prático em Dreamweaver/

Sandra Rita B. Pinto − São Paulo : Digerati

Books, 2006.

128 p.

ISBN: 85-7702-047-9

1.Dreamweaver. – Programa de computador.

2. Web Design. I. Título.

CDD 005.3

Universo dos Livros Editora Ltda.Rua Haddock Lobo, 347 – 12º andarCEP 01414-001 São Paulo/SPFone: (11) 3217-2600 Fax: (11) 3217-2617www.universodoslivros.com.bre-mail: [email protected]

Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,Luis Afonso G. Neira, Luis Matos e William Nakamura.



Prefácio

A diferença entre uma coisa bem-feita e outras não tão bem-feitas

é o modo como o trabalho começa. Existe um princípio metafísico

que diz que uma coisa não pode nascer maior do que o objeto ou ser

que a gerou. Aplicado ao mundo dos trabalhos profissionais, sobre-

tudo na área de informática, esse princípio pode ser bem exempli-

ficado: da bagunça não pode nascer algo organizado, da mediocri-

dade não pode nascer nada sensacional, do simplório não vai surgir

nada sofisticado...

Quando a Internet firmou-se, na década de 1990, juntamente com

a multidão das empresas pontocom que aproveitaram a explosão da

Rede Mundial para ganhar dinheiro, a programação ou desenho depáginas em HTML se tornou equivalente a um curso de engenharia

em alguma coisa muito sofisticada, como fazer foguetes ou conser-

tar reatores nucleares. Criou-se até uma profissão, o webdesign, o

“desenhista de webs”, um sujeito responsável por tornar uma página

funcional e atraente ao mesmo tempo.

Desde o início da Internet, várias pesquisas já foram feitas sobre

o tempo que as pessoas gastam olhando uma página Web a procura

do que desejam. Os resultados mostram que, se o desenho de uma

página não atrai o usuário em até 5 segundos, ele se “desliga” doconteúdo e digita outro endereço. E essa chance é única: ao contrá-

rio do que acontece com o controle remoto da televisão, o usuário

da Internet não dá um zapping por tudo que está disponível e retorna

no final ao mesmo canal.

Bom, não é a toa que as empresas pontocom faliram... Páginas

bonitas e atraentes – como as que as pesquisas advogam como as

ideais para a conquista da audiência – não podem sair de algo tão

simples, linear e, literalmente, textual como o HTML. HTML puro,processado em modo texto, gera conteúdo escrito formatado e dis-

tribuído em certo leiaute – uma página limpa e organizada (ou nem

tanto, dependendo do designer), mas nada mais que isso. Não exis-

tem grandes recursos, ou ao menos não existem recursos que va-

lham a pena. Afinal, o maior não pode sair do menor...

Por que não fazer, então, com que a fonte fique maior? Foi o que

a Macromedia fez ao lançar o Dreamweaver, uma ferramenta gráfica

de produção de sites que permite a edição manual de código HTML,

ao mesmo tempo em que possui uma interface no formato inserir-arrastar-e-soltar, comum à maioria dos programas do Windows.



Você quer trabalhar com formulários dinâmicos e scripts? O Dre-

amweaver possibilita a inserção de objetos de outras linguagens de

programação ainda durante o desenvolvimento da página, e ajuda

a atrelar uma ação programada a um objeto criado anteriormente.

Quer cria menus deslizantes? O Dreamweaver foi a primeira ferra-menta que possibilitou a criação desse tipo de design, muito antes

das facilidades do Flash e do Java.

Por falar em Flash, o Dreamweaver também permite a inserção

de conteúdo Flash dentro de páginas HTML, ou a montagem de ban-

ners e janelas de aplicativo. Isso sem falar nas opções de segurança,

servidor FTP próprio, arquivos virtuias...

Largue seus códigos HTML escritos no Notepad, esqueça o

Front Page, relegue os editores de código “simpáticos” ao esqueci-

mento... Se você quer uma coisa grande, bem-vindo ao mundo do

Dreamweaver.

Tadeu Carmona



Sumário

Capítulo 1– Introdução .........................................6

Capítulo 2 – Iniciando o Dreamweaver ..................9

Capítulo 3 – Trabalhando com textos ....................17

Capítulo 4 – Trabalhando com imagens .................24

Capítulo 5 – Tabelas ...............................................29

Capítulo 6 – Folhas de estilos ................................45

Capítulo 7 – Modelos e bibliotecas ........................52

Capítulo 8 – Molduras ............................................64

Capítulo 9 – Camadas ............................................71

Capítulo 10 – Links .................................................79

Capítulo 11 – Interatividade ..................................86

Capítulo 12 – Formulários .....................................96

Capítulo 13 – Criando banners ..............................107

Capítulo 14 – Editando códigos HTML ...................115

Capítulo 15 – Publicando seu site ..........................123



6Treinamento prático em Dreamweaver

Introdução

Antes de começarmos a elaborar páginas na Web, é importanteter conhecimento de alguns conceitos que podem servir de basepara todo o trabalho. O primeiro, e o mais importante, é: qual a fina-lidade de utilizar o Dreamweaver, sendo que posso criar páginas emHTML sem ter que gastar tanto com software?

A resposta é simples. O Dreamweaver, além de ser um editor deHTML, fornece recursos de projetos diferenciados que permitem co-dificar e desenvolver páginas, sites e aplicações Web. E tudo issosem considerar que ele auxilia na construção de aplicações dinâmi-cas mediante bancos de dados nas linguagens de servidor, como o

ASP, ASP.NET, PHP, ColdFusion e JSP.Para quem tem conhecimentos em HTML, o Dreamweaver per-mite manipular e codificar de forma rápida todos os projetos, já quepara codificar nessa linguagem é preciso não esquecer de inicializare finalizar tags.

Conceitos básicos

Ao longo de todo o livro, falaremos muito sobre sites, páginas

e outros conceitos relacionados à Internet. Portanto, é melhor ir se familiarizando com alguns termos:

• HTML ( HyperText Markup Language): linguagem utilizada parainserir textos na Internet. É definida em tags, ou marcas, que indicamo que é necessário na página. Essas tags sempre aparecem entre ossímbolos < >, como, por exemplo, <b> Palavras em negrito</b>.Ao nos depararmos com o código, o HTML dá início ao recurso ne-grito e finaliza o comando. Nesse caso, </b> finaliza o recurso deexibição em negrito;

Nota: toda tag deve ser iniciada e finalizada.

• Hipertexto: conceito que define a navegação entre segmentosde textos fora de uma seqüência linear. Na verdade, é como um tex-to interligado a diversos conteúdos (links);

• Hipermídia: associação entre elementos de mídia, como tex-tos, fotografias, sons e vídeos. Tais elementos possuem relação com



7Introdução

o tema escolhido. Em um site de pesquisa, por exemplo, a partir deum clique em um determinado assunto, podemos disponibilizar ou-tros pontos de vista sobre o tema;

• Web: é a forma como nos referimos a World Wide Web, a fa-

mosa WWW. Se buscarmos apoio na tradução da palavra, teríamosteia, o que não deixa de ser verdade, já que se trata de uma teia deinformações difundida mundialmente;

• Páginas: são arquivos que armazenam um conjunto de infor-mações. Normalmente, possuem a extensão .html ou .htm;

• Site: local na Internet em que são armazenadas e disponibiliza-das as Webs. Trata-se de um conjunto de Webs armazenadas em umou vários computadores;

• Home page: é a primeira página, também conhecida como pá-gina de abertura. Pode conter ou não links inseridos a fim de levar ousuário a outras páginas, assim como um índice em um livro;

• Web server: servidor da Web equipado com software adequa-do para armazenar as Webs de uma pessoa ou empresa, gerenciandotodo o acesso ao site. Sempre que você criar um site, deverá disponi-bilizá-lo em um servidor de acesso que irá, de fato, colocá-lo no ar;

• Navegador Web: software que permite aos usuários navega-rem pela Web. O mais conhecido é o Internet Explorer;

• Web designer: profissional responsável por projetar todo o sis-tema de Webs;• Website: conjunto de páginas existentes em um servidor;• Site local: arquivos localizados em uma determinada pasta na

unidade de disco, servindo de espelhos ao site remoto;• Site remoto: site do Web server que todos os visitantes vão

acessar. Isso significa que foram feitos os “uploads” de cada infor-mação existente em sua pasta-raiz para o servidor.

Criando um visual

Antes de utilizar qualquer tipo de software é importante pegaruma folha e fazer um rascunho de todo o layout de seu site, definin-do como os elementos devem ser distribuídos na página inicial e es-colhendo todos os tópicos, imagens e sons que pretende visualizar.

Para tanto, faça um desenho de toda essa organização por meiode links, ou seja, desenhe toda a sua estrutura, qual página levará à

outra. Veja um exemplo de disponibilização das informações:




Figura 1.1.

Enumere todas as páginas que devem ser incluídas, assim como

as que devem fazer parte do menu e da área de links. Dessa forma,

você não se perde, pois definiu os tópicos principais de sua página e

de todas as outras ligadas a ela.

Agora sim você pode pôr a mão na massa. Para isso, nos próxi-

mos capítulos exploraremos o Dreamweaver e todas as suas ferra-

mentas.



9Iniciando o Dreamweaver

Iniciando o Dreamweaver

Por padrão, o Dreamweaver está localizado na pasta Macrome-dia. Portanto, caso não possua um atalho na área de trabalho, vocêdeve utilizar o menu Iniciar > Todos os programas > Macrome-

dia > Macromedia Dreamweaver MX 2004 para iniciar a utilizaçãodo aplicativo.

Ao abrir o Dreamweaver pela primeira vez, será exibida uma cai-xa de diálogo que permite ao usuário escolher qual o layout da áreade trabalho. Vejamos nossas opções:

Figura 2.1.

• Design: é a área de trabalho integrada, na qual a janelaDocument e todos os painéis são ligados por uma janela de aplica-ção maior. Nesse caso, os painéis estarão localizados à direita datela. É o layout mais recomendado para todos os tipos de usuários;

Figura 2.2.




• Code: é a mesma área de trabalho, mas, nesse caso, os painéisestão localizados à esquerda. Por outro lado, a janela Document exi-be o código. Esse tipo de área de trabalho é recomendado aos usu-ários já acostumados com códigos e linguagens de programação,

principalmente em HTML.

Figura 2.3.

Para ocultar a página de abertura que aparece sempre que oDreamweaver é carregado, use a opção Don´t show again. Se mu-dar de idéia, use o menu Edit > Preferences e ative a opção Show

start page.Para iniciar o Dreamweaver, utilize a opção Design e um clique

em OK.

Criando uma página em branco

Para verificar todos os elementos da área de trabalho (workspace),devemos criar uma página em branco. Para tanto, siga o menu File >New; será apresentada a janela New Document. Isso feito, simples-mente ative a opção Create, sem escolher qualquer outra opção,para visualizar a área de trabalho.




Figura 2.4.

Nota: para fechar o documento atual, siga o menu File > Close ou utilize o atalho Ctrl + W.

A área de trabalho

Figura 2.5.

Vejamos os elementos encontrados na área de trabalho:• Barra de ferramentas Insert: armazena os atalhos (botões) que

permitem a inserção de vários objetos, tais como imagens, tabelas,camadas e outros. Possui várias categorias, de acordo com o objetoaplicado no documento, que são alteradas conforme utilizamos aseta voltada para baixo ao lado da opção Common. Veja as opções

da barra Insert:




Figura 2.6.

• Barra de ferramentas Document: organiza atalhos (botões) quepermitem visualizar o documento de forma diferente. São eles osmodos Code, Design e Split, que contém as duas visualizações etodas as opções de visualização do documento e da transferênciaentre o site remoto e local;

• Barra de ferramentas Standard: contém atalhos com opera-ções básicas do menu, tais como criar um novo arquivo, salvar, re-

cortar, colar e outros;• Barra de status: guarda todas as informações sobre o documen-

to em uso, como o seletor de tag, tamanho da janela, do documentoe tempo estimado de download;

• Janela Document: exibe o documento atual;• Inspetor Properties: exibe todas as propriedades dos objetos

selecionados na janela do documento. Permite, também, a alteraçãode cada uma das propriedades;

• Grupo de painéis: conjunto de painéis agrupados sob um tí-tulo. Esses painéis podem ser deslocados na tela e têm a forma de

janelas.

É importante que antes de dar início à criação do site seja feitauma pasta na área de trabalho do Windows capaz de armazenar to-dos os objetos e páginas do site. Como vimos, essa pasta vai contero site local que futuramente servirá para passar as informações aoservidor da Web que você utiliza.




Criando um site local

Nessa etapa, utilizaremos o Assistente de criação para nos ajudarna criação de um site local. Para isso, abra o menu Site > Manage

Site. Observe a caixa de diálogo que será aberta:

Figura 2.7.

Utilize o botão New e a opção Site para visualizar a janela de de-finição de seu site:

Figura 2.8.

Na primeira etapa, deve ser definido o nome do site. Para tanto,digite MeuSite e pressione o botão Next. Observe a janela que será

aberta:

Figura 2.9.




A segunda etapa irá perguntar ao usuário se ele deseja trabalharcom uma tecnologia de servidor ou se o site será estático, ou seja,sem a tecnologia de um servidor; para isso, use a opção No, I do not

want to use a server technology e pressione Next novamente.

Nessa etapa você deve informar como deseja trabalhar com os ar-quivos, dos quais, por padrão, faz-se cópias locais na máquina e, emseguida, upload no servidor (Edit local copies on my machine, then

upload to server when ready). Também deve definir qual o local emque o site será armazenado, ou seja, o nome da pasta-raiz com todosos elementos do site. Caso queira alterar a localização, use a opçãorepresentada pela pasta amarela ao lado do caminho atual e indiquea nova pasta. Para concluir, pressione o botão Salvar.

Figura 2.10.

Ao pressionar o botão Next você deve indicar se irá se conectarao servidor remoto. Nesse caso, use a opção Nome, pois o site re-moto será configurado logo adiante.

Figura 2.11.




A última caixa de diálogos vai exibir as informações de configu-ração de seu site, tais como nome, local do site, acesso remoto eteste do servidor. Para finalizar, pressione o botão Done para que ogerenciador dos sites seja finalizado:

Figura 2.12.

Pressione o botão Done para que seu site seja criado. Note queo painel File contém a informação do nome de seu site, bem comoa sua localização:

Figura 2.13.

Criando uma página básica

Para criar uma nova página em seu site, siga o menu File > New e clique na opção Basic Page na lista de categorias e em HTML nacoluna com o tipo de página básica desejada. Depois, pressione obotão Create.

Crie o hábito de salvar suas páginas logo após a criação, ou seja,não espere para salvar até inserir textos e imagens. Dessa forma,ao importar imagens ou textos, todos os caminhos que fazem refe-




rência à sua localização serão criados nos locais corretos. Para sal-var, use o menu File > Save ou o atalho Ctrl + S e indique o nomeda página.

Algumas dicas sobre nomes de páginas

Por padrão, todo arquivo salvo possui a extensão .htm, mas, sevocê quiser, é possível gravar com a extensão .html; o Dreamweavernão fará distinção alguma. No entanto, é preciso um certo cuidado coma criação do nome do arquivo. Para isso, leve em conta o seguinte:

• Não utilize os caracteres especiais, tais como %, #, &, *, >, <,?, }, {, !, @ e [;

• Procure não utilizar acentos, pois a maior parte dos sistemasoperacionais não reconhecem esses caracteres;

• Para cada plataforma utilizada, o nome de um arquivo serádiferente. No Windows, por exemplo, um nome como INDICE.HTMserá visualizado de outra maneira em plataforma Unix, em que é fei-ta distinção entre letras maiúsculas e minúsculas. O ideal é nomearcom todos os caracteres em minúscula;

• Não utilize espaços em branco. Uma boa prática é utilizar ca-racteres de sublinhado ou hífens para simular espaços, como, por

exemplo, primeira_pagina.htm;• Evite utilizar números como nomes de arquivos.

Informando o título do site

Sempre que uma página é visualizada, no topo da janela o nave-gador irá exibir o título da página que, por padrão, tem o nome doseu site. Para atribuir um título, digite-o na opção Title e pressionea tecla Enter. Caso a barra de ferramentas do documento não estejasendo visualizada, use o menu View > Toolbars > Document.

Figura 2.14.



17Trabalhando com textos

Trabalhando com textos

Agora, você já sabe como criar uma página, portanto, chegou ahora de adicionar conteúdo, ou seja, inserir elementos de textos,imagens e de trabalhar com cores e formatações.

Inserindo texto

Para inserir um texto, digite-o diretamente no local em que acharapropriado. Digite o texto e pressione a tecla Enter para mudarde linha.

Alterando a aparência do texto

Para alterar a aparência do texto, é necessário, em primeiro lugar,selecioná-lo. Para definir suas propriedades, trabalhe com a janelaProperties:

Figura 3.1.

Com o inspetor de propriedades, você pode alterar a fonte utili-

zando a opção Font, e o tamanho, com a opção Size. Para texto emnegrito e itálico, pressione os botões representados pelas letras B eI, respectivamente.

Outros estilos podem ser alterados quando utilizamos o menuText > Style e clicamos em uma das opções oferecidas.

Trabalhando com formatos de cabeçalhos

Na opção Format, você encontrará seis níveis de cabeçalhos, no-meados de Heading 1 a Heading 6.




Figura 3.2.

Ao utilizar um estilo de cabeçalho, o Dreamweaver o exibe com fontes maiores do que o corpo do texto, gerando um espaço logoabaixo do mesmo.

É importante saber que, ao escolher uma fonte, ela deve estarinstalada no computador do usuário que visualiza a página. Também

deve-se levar em conta que cada usuário pode alterar o tamanho desua tela, a cor de seu texto bem como o tamanho da fonte emprega-da na exibição das páginas, portanto, o modo como o tipo de carac-tere é exibido em sua tela pode mudar de um usuário a outro.

Devido a esse fato, a fonte que você escolher deve estar insta-lada na máquina de todo mundo. As fontes instaladas instruirão onavegador para que sejam feitas as mudanças do texto para outra

fonte, ou seja, se ao escolher uma determinada fonte ela não estiverdisponível em seu computador, automaticamente o navegador faráuma segunda escolha e, caso essa segunda escolha não se encon-tre, o navegador procurará uma terceira escolha. Se nenhuma delasestiver instalada no computador do usuário, será utilizada uma fon-te-padrão.

Para escolher a lista de fontes, você deve abrir o menu Text >Font > Edit Font List. Observe a caixa de diálogo:

Figura 3.3.




Nela você encontra uma lista de combinações de fontes e podeselecionar as que deseja visualizar por meio da opção Available

fonts. Escolha a fonte desejada e pressione <<. Para remover uma fonte, utilize o sinal de subtração (-) da seção Font list.

Lembre-se de que as fontes sem serifa, como a Arial e Verdana, facilitam a leitura na tela do computador, ao contrário das que pos-suem serifa, como a Times New Roman e a Script.

Figura 3.4.

Alterando a cor

Para alterar a cor dos seus textos, use a opção Text color pre-sente no inspetor de propriedades. Uma paleta com 216 cores seráapresentada. Ao dar um clique sobre uma cor, automaticamente oDreamweaver vai preencher a opção ao lado com um código hexa-decimal.

A forma como esta tabela funciona não é nenhum enigma. Basta

saber que cada cor usa uma tabela RGB – vermelho (Red), verde(Green) e azul (Blue). O sistema de numeração hexadecimal tem porbase 16 pontos, utilizando números de 0 a 9 e letras de A a F. Comocada cor representa um código de seis dígitos, os dois primeiros re-presentam a quantidade de vermelho, os dois seguintes, a quantida-de de verde e os dois últimos, a quantidade de azul. Como exemplo,imagine o código #00FF00. Nele, indicamos 00 de vermelho, FF deverde e 00 de azul, portanto, a cor será um tom de verde. Caso você

já conheça o código hexadecimal que representa a cor, poderá digi-tá-lo na caixa ao lado da opção Text color.

A barra inspetor de propriedades

Além da definição de fonte e do formato do texto, é possível ali-nhar e trabalhar com alguns ajustes do parágrafo, utilizando os bo-tões adequados a essa atividade presentes na barra de inspetor depropriedades:




Figura 3.5.

Trabalhando com recuos

Digite um parágrafo com mais de uma linha e selecione-o. Para

criar um recuo, utilize o botão que avança a tabulação. Isso fará comque o texto recue para o próximo ponto de tabulação existente.Sempre que o botão for pressionado, o seu texto será mais recuado.Caso queira retroceder para o ponto anterior da tabulação, use obotão Desfazer recuo. Observe um exemplo:

Figura 3.6.

Em editores de textos, tais recuos são conhecidos como enden-tações, utilizadas de forma a destacar um ou mais parágrafos, dife-renciando-os dos demais. Caso prefira, você pode utilizar os menusText > Indent para o recuo e Text > Outdent para retroceder osrecuos criados.

Trabalhando com listas

É possível criar parágrafos com listas numeradas ou com marca-dores, fazendo uso dos botões presentes no inspetor de proprieda-




des. Para criar uma lista numerada, dê um clique em qualquer pontodo parágrafo e siga o menu Text > List > Ordered List ou use o ata-lho para lista numerada na barra de propriedades.

Para listas com marcadores, siga o menu Text > List > Unordered

List ou o atalho da barra de propriedades.Para definir o estilo da numeração ou dos marcadores, siga o

menu Text > List > Properties em que você irá encontrar:• List type: tipo da lista, se numerada, com marcadores ou sem

definição;• Style: estilo da numeração ou dos marcadores;• Start count: quando uma lista é numerada, é possível indicar

qual deve ser o número inicial da lista. Dessa forma, ao pressionar atecla Enter após cada um dos parágrafos, o Dreamweaver irá nume-rá-los na seqüência;

• New style: permite definir o estilo do próximo parágrafo, ouseja, do próximo item da lista.

Observe a caixa de diálogo:

Figura 3.7.

Listas de definições

Alguns dos parágrafos devem possuir termos importantes e de-finições desses termos, tais como em um cardápio: você encontra onome do prato e, logo a seguir, os ingredientes (a definição) empre-gados. Nesse caso, tanto o termo importante quanto a sua definiçãodevem ficar em parágrafos separados, sem as quebras de linhas.Saiba como fazer isso:

1. Digite um termo como, por exemplo, Filet à parmegiana.




2. Siga o menu Text > List > Definition e pressione a tecla Enter.

3. O cursor irá se mover para a próxima linha sem criar parágra- fos diferentes.

4. Digite os ingredientes do prato.

Repare que o termo (Nome do prato) está na margem esquerda etodas as suas definições (Ingredientes) estão endentadas nas linhasseguintes.

Figura 3.8.

Importando texto

Caso você tenha digitado todo o texto de sua página em um proces-

sador, basta selecioná-lo, copiá-lo e colá-lo. O Dreamweaver executaráas ações de arrastar e soltar dos processadores mais utilizados.Se houver necessidade, o Dreamweaver pode abrir arquivos que

foram criados e salvos como textos (.txt) ou como páginas da Web(.html) pelos processadores. Esses arquivos serão abertos em novas

janelas e determinados trechos podem ser copiados e colados paraa página atual.

Após colar o texto, você pode trabalhar com os recursos de for-matação e recuos de parágrafo, como feito no caso da digitação di-

reta, utilizando a janela de propriedades.No caso de você ter importado um arquivo de texto criado no Ma-

cintosh, os parágrafos serão apresentados em uma só linha, pois oDreamweaver depende de um caractere de avanço que, nesse caso,está ausente.

Para alterar o formato dos arquivos de textos recebidos pelosprocessadores, você deve utilizar o menu Edit > Preferences e aopção Code Format:




Figura 3.9.

Nesse caso, indique o espaçamento das endentações e, também,

o caractere de quebra de linha ( line break type). Dessa forma, oDreamweaver poderá reconhecer tal caractere e fazer as quebras delinhas nos locais apropriados.

Quebra de linhas

Você deve ter reparado que sempre que a tecla Enter é utilizada,um novo parágrafo é inserido com uma quebra de linha. No caso de

querer uma nova linha sem nenhum espaço entre ela e a anterior,digite o texto e, logo a seguir, pressione as teclas Shift + Enter paraque ele seja inserido na próxima linha, sem a quebra de parágrafo.




Trabalhando com imagens

Não há nada melhor do que uma imagem para representar suas

idéias, ou “vender seu peixe”, como muitas pessoas dizem. Portan-

to, esqueça os textos extensos e adote a inserção de uma ou mais

imagens, tornando a sua página menos cansativa.

Inserindo imagens

Dê um clique em um parágrafo e siga o menu Insert > Image. A

caixa de diálogos Select Image Source será exibida:

Figura 4.1.

Para que sejam inseridas imagens em arquivos, ative opção File

System em Select file name from e automaticamente serão exibidas

miniaturas da pasta atualmente aberta ( Examinar). O Dreamweaver

pode abrir imagens nos formatos GIF, JPG, JPEG e PNG. Você veráas características da imagem com a opção Image preview, que infor-

mará o tamanho em pixels, formato e tamanho em bytes, bem como

o tempo de abertura.

Caso a imagem escolhida não esteja localizada na mesma pasta

em que sua página está sendo criada, automaticamente o Dream-

weaver vai informar e perguntar se você gostaria de criar uma cópia

da imagem para a pasta atual. Ao pressionar o botão Sim, é preciso

informar a pasta e o nome da imagem inserida. Essa é uma forma de

organizar as informações em seu site, e também a melhor maneirade fazer o download de informações em uma única pasta.



25Trabalhando com imagens

Figura 4.2.

Ao gravar a página, o Dreamweaver não faz referências; ele subs-

titui o nome do caminho ( path) da localização da imagem em seu

computador no lugar de criar um link rápido. Por isso, é importante

salvar o documento antes de inserir as imagens. Se a imagem esti-

ver fora da pasta em que seu site está, você verá um alerta referente

à inexistência do arquivo de imagem.

Na caixa de diálogos Select Image Source, encontramos a opção

URL, utilizada para sites dinâmicos, ou seja, sempre que seu documen-

to é executado em um servidor de aplicativos. Em nosso caso, não uti-

lizamos essa opção por não estarmos criando um site dinâmico.

A opção Relative to está configurada por padrão como Document,

o que permite escolher como o Dreamweaver faz referências às ima-

gens. Elas podem ser relativas ao documento, sendo indicado o cami-

nho para a imagem com base na localização do documento, ou rela-

tivas à raiz do site, em que o caminho é indicado para a imagem combase na localização do documento HTML relativo à raiz de seu site.

Quando o site é grande, ou caso pretenda mover as páginas com certa

freqüência, o ideal é utilizar a opção relativa à raiz do site (Site Root).

Um atalho para a inserção de imagens é a barra Insert, na qual

você encontrará o seguinte botão:

Figura 4.3.

Observação: em um site, o melhor formato para uma imagem

é o tipo GIF, pois uma imagem JPEG exibe características em

demasia, como pequenos quadros carregados de informações

sobre a cor. Sua qualidade pode ser melhor, mas, em compen-

sação, o tamanho do arquivo é muito maior.

Redimensionar imagens

Após inserir a imagem, clique nela para observar a seguintes

opções na barra de propriedades:




Figura 4.4.

Figura 4.5.

Para redimensionar, dê um clique em uma das alças de seleção

(quadrinhos pretos ao redor da imagem) e arraste para a esquerdaou direita até torná-la maior. Nesse caso, as especificações, definidas

em largura e altura da imagem, automaticamente serão redefinidas,

mas, em compensação, a qualidade também se altera. A resolução

da tela, por padrão, é de 72 dpi (dts por inch – pontos por polegada),

sendo que essa não é a resolução ideal para exibir imagens no tama-

nho que você alterou. Portanto, a exibição da imagem (download)

demoraria muito mais tempo. Você somente alteraria o tamanho na

tela, sem redimensionar o arquivo. Para isso (ajustar o tamanho da

imagem), o ideal seria utilizar softwares de edição para garantir queseu tamanho e qualidade sejam melhores.

Editando a imagem

Para melhorar a aparência da imagem utilizando softwares grá-

ficos, é possível utilizar a barra de propriedades Edit presente na

barra Properties, que contém os seguintes elementos:

Figura 4.6.

Vinculando imagens a documentos

As imagens inseridas podem guiar o visitante a páginas específi-

cas do site, funcionando como links para botões de navegação. Paracriar esse link, dê um clique na imagem e utilize a pasta existente à



27Trabalhando com imagens

direita do campo Link. Será exibida a caixa de seleção de arquivo.

Indique qual arquivo deve ser aberto e pressione OK.

Figura 4.7.

Dessa forma, sempre que a página for aberta e o visitante clicar

na imagem, automaticamente será aberta a página de link escolhida

por você.

Vinculando arquivos no painel Files

Para criar links com o painel de arquivos (Files), você deve proce-

der da seguinte forma:

1. Clique na imagem que deverá fazer referência a um documento

ou arquivo.

2. Abra o painel de arquivos seguindo o menu Window > Files.

3. Do lado direito da tela, será aberto o painel com todos os do-cumentos e imagens de seu site.

Figura 4.8.

4. Clique na imagem.

5. Na barra de propriedades, pressione o ícone Point to file, ao

lado do campo Link.




6. Arraste o ponteiro até o painel Files.

7. Na lista Local View, indique o arquivo desejado.

Figura 4.9.

8. Ao utilizar a opção Map View no painel Files, o seu site seráatualizado e você verá todos os links existentes:

Figura 4.10.



29Tabelas

Tabelas

Para facilitar o controle de textos e imagens em sua página, é pos-sível fazer uso de uma ferramenta poderosa, as conhecidas tabelas.Elas permitem enquadrar textos ao redor de uma imagem, ajustaro alinhamento e, também, criar blocos de textos com endentações.Com esses recursos, você terá um controle maior sobre a posiçãodos elementos da página.

Criando tabelas

Para criar uma tabela, abra o menu Insert > Table, ou utilize o

atalho da barra Insert (Figura 5.1).

Figura 5.1.

Será aberta a seguinte janela:

Figura 5.2.

Nessa caixa de diálogo, encontramos as opções listadas:

Opção

Rows

ColumnsTable width

Descrição

Número de linhas.

Número de colunas.Largura da tabela.




Tabela 5.1.

Ao pressionar a tecla Enter, a tabela será gerada:

Figura 5.3.

Nesse exemplo, você gerou uma tabela com quatro linhas ( row)e quatro colunas (column). A interseção de uma coluna com umalinha é conhecida como célula. Portanto, sua tabela possui 13 cé-lulas, pois a área em que o título foi digitado (caption) abrange so-mente uma célula.

Fazendo ajustes no layout

É possível ajustar a largura da tabela utilizando os ponteirosexistentes na borda das células. Mantenha o botão do mouse pres-sionado em um dos ponteiros e arraste até a largura desejada.Rapidamente, o Dreamweaver vai informar quais são as novas di-mensões de sua tabela.

Para ajustar a largura de uma coluna, mova o ponteiro do mousesobre ela e note o aparecimento de setas voltadas para a direita epara a esquerda. Mantenha o botão pressionado enquanto arrasta

para a direita, a fim de aumentar, ou para a esquerda, a fim de dimi-nuir a largura da coluna.

Opção

Border thicknessCell padding

Cell spacingHeaderCaptionAlign captionSummary

Descrição

Espessura da borda em pixels.Número de pixels existentes em uma borda da célula.

Número de pixels entre as células adjacentes.Insere linha para o título principal.Título que será adicionado à tabela.Alinhamento do título na tabela.Observações que você insere para determinar a utilida-de da tabela.



31Tabelas

Inserindo textos

Para inserir um texto, posicione o cursor na célula em que desejavisualizá-lo e, simplesmente, digite-o. Para mover de uma célula a

outra, pressione a tecla Tab. Ao mover o cursor para a última célulada tabela e pressionar a tecla Tab, automaticamente o Dreamweavergera uma nova linha com o mesmo número de colunas da linha an-terior. Ou seja, o perfil das células anteriores também será levadopara a nova linha.

Inserindo linhas e colunas

Para inserir uma linha, você deve proceder da seguinte maneira:

1. Posicione o cursor sobre uma célula.

2. Pressione o botão direito do mouse.

3. Clique na opção Table.

4. Selecione a opção Insert Row, para que seja acrescentada uma

linha acima da posição atual do cursor.

Figura 5.4.

Para inserir colunas, dê um clique com o botão direito em alguma

célula e siga o menu Table > Insert Column para acrescentar umacoluna à esquerda da posição do cursor.




Inserindo mais de uma linha ou coluna

No tópico anterior, você acrescentou somente uma linha à tabela.E, como a colocou acima da posição atual do cursor, é fundamental

posicioná-lo em uma célula estratégica, pois você poderá inserir li-nhas na posição indesejada.

Caso tenha de inserir mais de uma linha e determinar se devemser inseridas acima ou abaixo do cursor, siga o menu Insert > Table

Objects > Insert Row Above (Inserir linhas acima) ou Insert Row

Below (Inserir linhas abaixo).Para inserir colunas à esquerda ou à direita do cursor, abra o

menu Insert > Table Objects > Insert Column Left (Inserir colunasà esquerda) ou Insert Column Right (Inserir colunas à direita).

Um atalho para esses comandos é o seguinte caminho:

1. Clique na célula desejada com o botão direito do mouse.

2. Selecione a opção Table.

3. Clique em Insert Rows or Columns.

4. Especifique o que deseja inserir, a quantidade e o local da in-serção.

Opção

Insert

Number of rows

Descrição

Para determinar o que deseja inserir, se linhas (rows) oucolunas (columns).Especifique o número de linhas ou colunas que desejainserir. Você pode digitar a opção desejada ou utilizar o

controle deslizante para determinar o número correto.

Figura 5.5.



33Tabelas

Tabela 5.2.

Excluindo uma linha ou coluna

Para excluir uma linha, posicione o cursor na linha desejada, pres-sione o botão direito do mouse e siga o menu Table > Delete Row.Nesse caso, todas as células da linha serão excluídas automatica-

mente. Para excluir uma coluna, dê um clique na coluna usando obotão direito do mouse e abra o menu Table > Delete Column.

Caso queira desfazer a última operação, utilize o menu Edit >Undo, ou pressione o botão Undo da barra de ferramentas:

Opção

Where

Descrição

Determine a posição em que as linhas ou colunas devemser inseridas: Above the selection, acima da posição do

cursor, Below the selection, abaixo.

Figura 5.6.

Mesclando células

Quando inserir título, para que ele seja exibido exatamente nocentro das células, você deve mesclar as células adjacentes. Dessa

forma, as células tornam-se uma só. Saiba como fazer isso utilizandoo exemplo seguinte, baseado na Figura 5.7:

Figura 5.7.




1. Você deve selecionar a célula na qual o texto está digitado etodas as células ao lado utilizando a tecla Shift e as setas à direita.

2. Use o menu Modify > Table > Merge Cells ou o atalho das

teclas Ctrl + Alt + M.

3. Outra forma de mesclar é selecionar as células, usar o botãodireito do mouse e as opções Table > Merge Cells.

Figura 5.8.

Dividindo células

Dependendo do trabalho, talvez seja preciso dividir as células emmais de uma. Para isso, posicione o cursor na célula que será divi-dida e utilize o menu Modify > Table > Split Cells ou o atalho Ctrl+ Alt + S.

Especifique o tipo de divisão desejada, se em linhas ( row) ou co-lunas (column), o número de células e pressione OK.

Figura 5.9.

Selecionando células

Posicione o cursor na célula a selecionar e pressione a tecla Ctrl.

Para selecionar mais de uma célula, pressione Ctrl e, logo a seguir,



35Tabelas

as teclas Shift e as setas para a direita ou para a esquerda, até sele-cionar as células desejadas.

Para mesclar ou dividir células, você deve selecionar mais de umalinha, coluna e, muitas vezes, até mesmo toda a tabela. Vejamos o

que fazer para selecionar células.Para selecionar toda a tabela, posicione o cursor em sua largura

e selecione a opção Select Table, ou o menu Modify > Table >Select Table:

Figura 5.10.

Para selecionar uma coluna, faça o seguinte:

1. Posicione o mouse na borda superior de uma coluna:

Figura 5.11.




2. O ponteiro do mouse será alterado para uma seta voltada parabaixo.

3. Selecione a coluna, ou arraste o ponteiro do mouse até selecio-

nar múltiplas colunas.

Para selecionar uma linha, faça o seguinte:

1. Posicione o mouse na borda superior de uma linha.

2. O ponteiro do mouse será alterado para uma seta voltada paraa direita.

Figura 5.12.

3. Selecione a coluna ou arraste o ponteiro do mouse até selecio-nar várias colunas.

Você pode utilizar o menu contextual (com a largura da tabela ouda coluna) para selecionar a coluna ou linha desejada:

Figura 5.13.

Caso queira selecionar células não adjacentes, use a tecla Ctrl edê um clique em cada uma das células a selecionar:



37Tabelas

Figura 5.14.

Propriedades da tabela

Repare que ao selecionar a tabela, a barra Properties exibirá asseguintes opções:

Figura 5.15.

Vejamos como trabalhar com cada uma das opções:

• Em Table Id, digite um nome para a tabela (Figura 5.16):

Figura 5.16.

• Em Rows, especifique o número de linhas que deseja e, emcols, o número de colunas (Figura 5.17):

Figura 5.17.

• Especifique a largura na opção W e a altura da tabela na opçãoH. Nelas, você poderá alterar as unidades de medida, por padrãodefinidas em pixels (Figura 5.18), para porcentagem. Dessa forma,poderá redimensionar o tamanho levando em conta que a largura e

a altura atuais são de 100%. Para diminuir, digite, por exemplo, 75%,e reduzirá em 25% o tamanho atual:




Figura 5.18.

• Na opção Cell Pad, especifique o número de pixels entre o con-teúdo da célula e o limite, assim como a distância entre as paredes(bordas) da célula e o texto digitado. Na opção CellSpace, você deveespecificar o número de pixels entre cada uma das células da tabela(distância de uma célula a outra). Observe a Figura 5.19:

Figura 5.19.

• Na opção Bg color, escolha uma cor que vai servir de fundopara a tabela (preenchimento) e em Brdr color, especifique uma corpara as linhas de borda da tabela (Figura 5.20):

Figura 5.20.

Algumas vezes, ao definir as bordas das colunas zero, é possível

não visualizar essas bordas. Para isso, ative-as com o menu View >Visual Aids > Table Border. Dessa forma, fica mais fácil visualizar osdelimitadores de cada célula.

Para alterar o alinhamento da tabela com relação à página, use aopção Align e escolha o tipo de alinhamento desejado.

Figura 5.21.

Na opção Border, você deve especificar a largura da borda empixels.

Inserindo uma imagem no fundo da tabela

Você poderá inserir um logotipo no fundo de sua tabela. Para tan-to, use a opção Bg Imagem e especifique o nome do arquivo ou, sepreferir, arraste o nome do arquivo, que deve estar na lista de arqui-

vos existentes, para junto dessa opção:



39Tabelas

Figura 5.22.

Dependendo do tamanho da imagem, ela será exibida em formade azulejos, ou seja, uma ao lado da outra, e, portanto, você poderáter um efeito desastroso:

Figura 5.23.

Outro problema é que a imagem pode sobrepor o texto digitadoao exibir o seu site. Portanto, nem sempre é o ideal inserir imagensno fundo das tabelas. É preferível inserir o logotipo em uma deter-minada célula:

1. Clique na célula desejada.

2. Siga o menu Insert > Image, escolha a imagem desejada edê OK.

Alterando o layout de uma ou mais células

Para alterar o layout de várias células, selecione-as e use a barraProperties, que apresenta as seguintes opções:




Descrição

Permite alterar o estilo dos textos existentes etambém as fontes utilizadas pelos estilos.

Permite alterar o estilo do parágrafo, seu tamanho

e a cor da fonte utilizada.

Permite apresentar o texto em negrito e itálico.

Permite alterar o alinhamento do texto na célula.

Permite inserir marcadores, numeração e alterarrecuos do texto na célula.

Permite definir o alinhamento horizontal e verticaldo texto com relação à célula. As opções W e H servem para especificar a largura (width) e alturada célula ( height).

Impede a quebra automática de textos nas linhas.

Permite formatar as células ou linhas selecionadas

como um cabeçalho de tabela. Por padrão, as cé-lulas apresentadas como cabeçalho ( header) sãoapresentadas em negrito e no centro.

Permite definir uma imagem de fundo para a célu-la (Bg), a cor de fundo da célula e a cor da borda(Brdr).

Figuras das opções

Figura 5.24.

Tabela 5.3.



41Tabelas

Usando layouts predefinidos

Após criar a tabela, é possível utilizar os layouts predefinidos do

Dreamweaver. Para tanto, selecione a tabela e use o menu Commands

> Format Table, escolha o formato desejado e pressione o botãoApply:

Figura 5.25.

Tornando as colunas em larguras consistentes

O Dreamweaver pode redimensionar a largura no código HTML

para combiná-lo com o aspecto visual da tabela, ou seja, é possível

tornar as células consistentes. Para fazê-lo, clique em uma célu-

la, abra o menu contextual e selecione a opção Make All WidthsConsistent.

Figura 5.26.




Figura 5.28.

Opção

Sort byOrder

Then by

Descrição

Permite especificar qual coluna da tabela será classificada.Permite especificar o tipo de classificação (alfabética ounumérica), bem como a ordem da classificação (ascen-dente ou descendente).Permite incluir outra coluna a classificar. Por exemplo, hávárias linhas com a classificação de pescados e, dentro

dessa ordenação, você deseja classificar por porções.

Tabelas aninhadas

O Dreamweaver pode trabalhar com uma tabela dentro de outra.Nesse caso, elas são conhecidas como tabelas aninhadas. Para tan-

to, crie uma tabela e, logo a seguir, posicione o cursor em uma célulapara criar uma nova tabela nessa posição:

Figura 5.27.

Classificando os dados em tabelas

Quando uma tabela tem muitos dados, o Dreamweaver podeclassificá-los, ou seja, pode criar uma ordenação para as linhas deuma tabela ou de uma coluna. Para tanto, selecione a tabela ou umacélula e siga o menu Commands > Sort Table:



43Tabelas

Tabela 5.4.

Inserindo link com textos

Para inserir um link com outra página, você deve selecionar otexto que vai armazenar o link e, na opção Link, digitar o nome dapágina ou a imagem para a qual deseja fazer um link. Dessa forma,quando der um clique no texto, será apresentada a imagem ou pági-na com a qual você faz referência (link). Observe:

Opção

Sort includesthe first row

Sort headersrowsSort footer rowsKeep all colors

Descrição

Inclui a primeira linha da tabela na classificação. Nessecaso, se a primeira linha tiver o título das colunas, ela será

enviada para outro local após a classificação.Inclui a linha de cabeçalhos de colunas na classificação.

Inclui as linhas de rodapé na classificação.Permite manter as cores das linhas da mesma forma apósa classificação.

Figura 5.29.

Removendo o conteúdo dacélula sem alterar sua estrutura

Ao apagar o conteúdo de uma célula, você pode comprometer todaa estrutura da tabela. Para evitar esse problema, selecione uma oumais células e use o menu Edit > Clear, ou pressione a tecla Delete.

Importando dados

Você pode utilizar tabelas criadas por outros aplicativos, comoo Microsoft Excel ou Microsoft Word, sem ter de digitar todos osdados novamente. Para isso, siga o menu File > Import, escolha a




opção que for mais conveniente (Excel Document, Word Document

ou Tabular Data), especifique o arquivo a ser importado e pressione

o botão Abrir:

Figura 5.30.

Exportando uma tabela

O processo inverso também pode ser realizado, ou seja, se você

criou uma tabela no Dreamweaver, pode enviá-la ao Microsoft Excel,

por exemplo. Para tanto, faça o seguinte:

1. Selecione a tabela.

2. Use o menu File > Export > Table. Será aberta seguinte janela:

Figura 5.31.

3. Indique as opções de exportação, como o delimitador dos da-

dos (Tab, espaço, vírgula, ponto-e-vírgula), como devem ser trata-

das as quebras de linhas (se no padrão Windows, Macinstosh ouUnix) e pressione Export.

4. Será aberta a caixa de diálogos Export Table As.

5. Indique o nome que a tabela deve receber e pressione o botão

Salvar.



45Folhas de estilos

Folhas de estilos

O Dreamweaver nos permite trabalhar com padrões técnicos da

Web, os conhecidos layouts CSS.Tais layouts surgiram em 1996 por meio de um órgão do governoamericano que aprovou a primeira versão do Cascading Style She-

ets, o principal método para normatizar elementos de um site. Os layouts CSS substituem os antigos comandos <font> por folhas deestilos, facilitando o gerenciamento de textos em uma página.

No Dreamweaver, é permitido usar o CSS para adicionar blocosde conteúdos e camadas ( layers) para criar seu próprio layout.

Ao utilizar o CSS, o Dreamweaver apresenta réguas e guias que

facilitam nossa orientação durante a criação da página.

Tipos de estilos utilizados no Dreamweaver

O Dreamweaver possui três tipos de estilos CSS. Observe:• Custom CSS Styles: também conhecidos como Class Style.

Permitem a aplicação de atributos do estilo aos blocos de textos;• HTML tag styles: permitem redefinir a formatação de determi-

nada tag, tais como <font>, <h1> e outros;• CSS selector styles: permite redefinir a formatação de uma de-

terminada combinação de tags em uma célula da tabela, como, porexemplo, td h1, aplicada sempre que um cabeçalho h1 for utilizadoem uma tabela.

Criando páginas com os estilos

Para criar uma página em branco utilizando o CSS use o menuFile > New. Na lista Category, escolha a opção Page Design (CSS) eescolha o layout da página na opção Page Design:

Figura 6.1.




Ao pressionar o botão Create, o novo documento aparecerá na janela. Aproveite para salvar o arquivo como Index.htm mediante omenu File > Save.

Caso o arquivo contenha links para outras páginas, será apresen-

tada a caixa de diálogos Copy Dependent Files, exibindo uma listade cada um dos arquivos dependentes que devem ser salvos:

Figura 6.2.

Pressione o botão Copy files to, navegue até a pasta que possuias imagens e pressione Copy para que todos os arquivos sejam gra-vados junto com a página.

Páginas baseadas em templates

É possível criar mais de um tipo de documento no Dreamweaver.

Para tanto, vamos criar uma nova página baseada em um templa-te, que servirá como um modelo para outras páginas criadas. Saibacomo fazer:

1. Crie um novo documento em branco.

2. Abra o menu File > Save As Template.

3. Na opção Site, digite o nome de seu site, no caso, poderá ser

O Chef em casa.

4. Informe o nome do modelo na opção Save as e pressione obotão Save.

Figura 6.3.



47Folhas de estilos

Criando documentos baseados em templates

Para utilizar o modelo criado anteriormente como template, siga omenu File > New. Dê um clique na guia Templates, selecione o templa-

te que você pretende utilizar (Modelo1) e pressione o botão Create.

Figura 6.4.

Após utilizar o modelo, a página em branco se transformará em

um layout definido anteriormente, sem a necessidade de alterar ecriar novas tabelas:

Figura 6.5.

O painel CSS

Para visualizar o painel CSS, abra o arquivo com a folha de estilos,como, por exemplo, o arquivo Index.htm, e siga o menu Window >CSS Styles; o painel aparecerá no lado direito de sua página.

Figura 6.6.




Figuras

Atalhos do painel de estilos

Nomes

Attach Style Sheet

New CSS Style

Edit Style Sheet

Delete CSS Style

Descrição

Abre a caixa Link external style sheet, quepermite selecionar uma folha de estilos ex-terna a ser importada do documento atual.Abre a caixa New CSS Style, que permite se-lecionar o tipo de estilo a ser criado, se Class

style, HTML tag ou CSS selector.Abre a caixa CSS Style definition, que per-mite editar qualquer estilo existente no do-cumento atual.Remove o estilo selecionado do painel CSS

Styles, assim como a formatação de qual-quer elemento nele aplicado.

Dê um clique com o botão direito do mouse sobre um estilo exis-tente e você verá o menu contextual:

Figura 6.7.

Tabela 6.1.

Criando um estilo CSS

Com a página Index aberta, utilize o botão New CSS Style:

Figura 6.8.



49Folhas de estilos

Na tabela seguinte, as opções da janela:

Opção

Name

Selector Type

Define in

Descrição

Informe o nome do estilo. Sempre que o estilo for do tipoClass, é importante iniciar o nome com um ponto.Tipo de estilo CSS (classe) personalizado, que pode serClass, Tag (como em HTML) ou Advanced (contém códigos,seletores contextuais e outros).Permite definir se as folhas serão aplicadas em um novo ar-quivo de folha de estilo ou somente no documento atual.

Tabela 6.2.

Defina as opções da seguinte forma: Name como Títulos, Selec-

tor Type como Class e Define in como This document only. Pressio-ne OK para concluir.

Será apresentada a caixa de diálogos CSS Style Definition, ondedevem ser informadas as opções de Type (tipo de fonte utilizada),Background (fundo da página), Block (controle de blocos de textos,tais como alinhamentos verticais, espaçamento e outros) Border (es-pecificações para as bordas da página e tabelas), List (formatações

para textos existentes no formato de listas), Positioning (posiciona-mento de imagens e tabelas) e Extensions (controle para quebra depáginas).

Após entrar com todas as especificações desejadas para cadauma das opções, pressione o botão OK.

Figura 6.9.




Anexando folhas de estilos externas

Você poderá ter folhas de estilos criadas em outros documentos.Tais folhas podem ser importadas para o documento atual. Para isso,

faça o seguinte:

1. Abra o menu Windows > CSS Styles para visualizar a caixa deestilos aberta.

2. Pressione o botão Attach Style Sheet e será apresentada aseguinte janela:

Figura 6.10.

3. Clique na opção Link.

4. No rodapé da caixa de diálogos, você deve ativar a opçãoSample Style Sheet para que seja aberta a caixa de estilos existentes:

Figura 6.11.

5. Escolha um dos estilos apresentados e pressione OK.



51Folhas de estilos

Editando uma folha de estilo

Você pode fazer alterações nas folhas de estilos. Veja como é fácil:

1. No painel de folhas de estilos, dê um clique no nome da folhade estilo que deseja alterar.

2. Pressione o botão Edit Style Sheet.

Figura 6.12.

3. Clique no estilo que deseja alterar e pressione o botão Edit.

4. Faça todas as alterações necessárias para o estilo.

5. Pressione o botão OK e, logo depois, o botão Done.

6. Pronto, as formatações serão aplicadas.




Modelos e bibliotecas

Em capítulos anteriores, você aprendeu a criar estilos com os re-cursos das folhas de estilos CSS, por isso, agora, acreditamos queseja um bom momento para nos aprofundarmos em modelos.

Suponha que você tenha um site “grande”, com várias páginaslinkadas em um menu, com cada uma delas representando infor-mações dos vários departamentos de sua empresa. Portanto, vocêdepende de cada um dos elementos de sua equipe para atualizaras informações pertinentes às páginas dos departamentos, e, se-guramente, cada um dos funcionários possui uma idéia e um layout diferente para suas páginas.

O ideal é fazer com que cada funcionário tenha a liberdade paraentrar com as informações necessárias, mas que utilizem um estiloprojetado por você, ou seja, está na hora de trabalhar melhor commodelos. Então, mãos à obra.

Criando modelos

Quando criamos um modelo, a primeira coisa a ser feita é o projeto da página, isto é, inserir tabelas, camadas, elementos gráficos

e links necessários ao projeto. Após todas as definições, contandocom a estática, apresentação de cores e fontes, use o menu File >Save as Template. Indique o nome que o novo modelo deve ter epressione o botão Save:

Figura 7.1.

Todo arquivo com os dados de uma página é gravado com a ex-tensão .html. Nesse caso, porém, os modelos são gravados em ar-quivos com a extensão .dwt, com a localização também em umapasta especial, a /Template/information.dwt. É justamente essa ainformação que você visualiza no título de sua janela:

Figura 7.2.



53Modelos e bibliotecas

Você também pode dar início ao seu trabalho criando uma pági-na em branco e, logo em seguida, salvá-la como um modelo. Vocêé quem decide a ordem de criação de seus modelos e projetosde páginas.

Áreas editáveis

Essa é a hora em que vamos definir todos os elementos e áreasque sua página deve armazenar, o espaço conhecido como área edi-tável, ou seja, local em que os dados podem ser inseridos.

Por padrão, todas as áreas de um moelo são bloqueadas. Casoalguma informação tenha de ser inserida, é preciso criar regiões edi-táveis, portanto, toda informação que não for definida como editávelserá automaticamente bloqueada em sua página.

Toda e qualquer alteração na página deve ser feita enquanto esti-ver trabalhando no modelo original. No entanto, páginas que foramconstruídas a partir de modelos criados por você não permitem ne-nhuma alteração, a não ser nas áreas conhecidas como editáveis.

Criando um título editável

Para melhor exemplificar o título editável, crie uma tabela comduas colunas e duas linhas.

Na primeira linha, selecione as duas células criadas e mescle-as,a fim de utilizá-las como área de título. Para isso, selecione as duascélulas, clique com o botão direito do mouse sobre elas e siga omenu Table > Merge Cells.

Com o cursor na primeira linha, criaremos a primeira área editá-vel. Para isso, use o menu Insert > Templates Objects > Editable

Region. Forneça um nome para a área editável e pressione o bo-tão OK:

Figura 7.3.

Outra maneira de criar uma área editável é, na barra Insert, pressior-nar o botão Make Template e, logo após, a opção Editable Region:




Figura 7.4.

Na hora de inserir áreas editáveis e outros elementos, como ima-gens, o ideal é criar o hábito de não colocar acentos e outros carac-teres especiais, tais como cedilha (ç), exclamação (!) e outros.

Com o cursor posicionado na célula em que a área editável foi cria-da, você verá que, na barra de propriedades, aparecerá o seguinte:

Figura 7.5.

Ao posicionar o cursor sobre a área editável, você verá, logo aci-ma, o nome da região:

Figura 7.6.

Caso não esteja vendo o nome da área editável, utilize o menuView > Visual Aids > Invisible Elements.

Após criar a área com o título, é importante alterar sua aparência,ou seja, o tamanho da fonte, a cor dos caracteres e o alinhamento dotexto. Para tanto, selecione a área abaixo do nome da região editá-vel, que também apresenta a mensagem Titulo Principal, selecioneo texto e utilize a barra de propriedades:

Figura 7.7.




Inserindo um local para fotos

Agora que você criou uma área para o título, crie uma na qualdeve ser colocada uma imagem, como uma foto, por exemplo.

Para fazê-lo, abra o menu Insert > Image Objects > Image Pla-ceholders. Dê um nome para a foto e defina suas dimensões (largurae altura), sua cor de fundo e um possível texto alternativo. Pressioneo botão OK.

Figura 7.8.

O local para a inserção da imagem já está na célula apropriada,agora você não poderá esquecer de que é preciso tornar esta áreaeditável. Para tanto, selecione a área que acaba de criar, dê um cliquesobre a imagem, um clique no botão Template e selecione a opçãoEditable Region. Por fim, forneça um nome para a nova área editável.

Em sua página, você criou duas área editáveis, ou melhor, duasáreas em que a inserção de informações será permitida. Para ve-rificar as áreas editáveis que você criou, siga o menu Modify >Templates; as últimas linhas do menu irão informar todos os nomesdas regiões, inclusive aquela na qual seu cursor estiver:

Figura 7.9.

Portanto, é preciso lembrar de tudo o que deve ser alterado ouincluído, mesmo os links devem estar em uma região editável.

Uma preocupação que devemos ter em conta diz respeito à cria-ção dos links. Assim, sempre use o ícone da pasta para que você




posicione o cursor sobre o arquivo desejado, procure nunca digitaro link direto no campo que lhe é reservado, pois isso pode impedirque o Dreamweaver localize os arquivos:

Figura 7.10.

Para remover uma área editável, selecione a região e siga o menuModify > Templates > Remove Template Markup, ou, se preferir,clique sobre a área e pressione a tecla Delete.

É importante saber que, ao remover uma região editável de umarquivo de modelo que possui páginas subseqüentes, todas as pá-ginas modificadas na região que você tornou editável serão altera-das, de forma que a região editável mude para refletir as alteraçõesefetuadas.

Inserindo conteúdos opcionais

No Dreamweaver, um recurso interessante é conhecido como con-teúdo opcional, áreas nas quais definimos um conteúdo que será ocul-to ou exibido de acordo com as páginas criadas a partir de um mode-lo. Para criar uma área com conteúdo opcional, faça o seguinte:

1. Selecione uma linha de sua tabela e siga o menu Insert >Template Objects > Optional Region.

2. Digite um nome para a área opcional, como por exemplo, Pra-

tos, e desabilite a opção Show by default (Exibir por padrão). Essaopção deve estar habilitada quando na maiorira de suas páginas oconteúdo for definido como opcional.

3. Pressione o botão OK.

Na página que estamos criando, você definiu que algumas áreastêm conteúdos opcionais, ou seja, por padrão elas ficam ocultas naspáginas criadas a partir de seu modelo. Ao criar e editar novas pági-

nas, é possível ocultar ou exibir as áreas com conteúdos opcionais.Vejamos como controlar o conteúdo definido como opcional:




1. Use o menu Modify > Template Properties.

2. Selecione a área opcional criada (Opcional) na lista de nomes.

3. Nesse caso, algumas opções da região tornam-se disponíveis.

4. Ative a opção Show.

5. Repare que a caixa de opções Value tem seu valor alterado. Elapassa de oculto (False) para exibido (True).


Regiões que se repetem

Algumas vezes, há determinadas áreas em uma página que de-vem ser duplicadas, principalmente quando precisamos fazer váriasentradas. O Dreamweaver pode trabalhar com essas áreas e as reco-nhece como áreas repetitivas, permitindo o controle sobre todas.

Para inserir áreas repetitivas, selecione, em suas páginas, duaslinhas vazias na parte inferior da tabela (duas linhas e duas colunas),

abra o menu Insert > Template Objects > Repeating Region, dê umnome à área e pressione o botão OK:

Figura 7.11.

1. Crie uma tabela com duas linhas e três colunas.

2. Na nova tabela, digite cabeçalhos na linha Pratos, na célula àdireita, Sobremesas, e na última célula, Sopas.

3. Selecione a próxima célula em branco, abaixo do título Pratos.

4. Use o menu Insert > Template Objects > Editable Regions, oupressione o botão Editable Region existente na barra Insert.

5. Crie uma área editável chamada Pratos.




6. Na próxima célula à direita, crie uma área editável chamadaSobremesas.

7. Na última célula à direita, crie uma região editável chamada

Sopas.

8. Pronto, sua tabela deverá ter a seguinte aparência:

Figura 7.12.

Construindo páginas a partir de modelos

Após definir as áreas editáveis, aquelas em que seu conteúdopode ser alterado e também as áreas repetidas de seu site, é possí-vel salvar o modelo criado e fechá-lo para que possamos criar umapágina estruturada exatamente nesse modelo.

Para criar uma nova página, use o menu File > New. Na janelaNew from Template, selecione a guia Templates.

Note que aparecerá o nome de seu projeto e, à direita, todos osmodelos gerados a partir dele:

Figura 7.13.

Dê um clique no modelo recém criado (Information.dwt) e pres-sione o botão OK.

Insira o título no local desejado e a foto que pretende colocar em

sua página. Repare que você poderá inserir elementos apenas nasáreas editáveis.




Observe também que em sua página aparecem áreas bloqueadasnas quais a cor padrão é amarelo-fosco e o nome do modelo apare-cerá no canto superior-direito da página.

Caso o cursor esteja posicionado em uma área bloqueada (região

não-editável), o ponteiro do mouse terá a aparência de um círculo comuma linha atravessada. Esse ponteiro também será exibido sempreque estiver em uma área bloqueada, ou quando receber um clique.

Preencha todo o conteúdo e grave o arquivo como Pedidos.html.Nesse caso, você preencherá uma matriz e o modelo original não foialterado; este permanece na pasta do Dreamweaver com os outrosmodelos criados anteriormente.

Alterando modelos

Caso seu modelo precise de alguns ajustes, você poderá editá-loe efetuar as alterações.

Para tanto, abra o modelo utilizado com o menu File > Open

Recent, e dê um clique no arquivo Information.dwt.Faça alguma alteração em seu modelo, como, por exemplo, alte-

rar a parência do título principal, sua fonte ou seu tamanho.Salve seu modelo e feche o arquivo. Anteriormente, você pode

ter criado várias páginas baseadas nesse modelo, mas, agora, fezalterações em sua matriz. Ao abrir os arquivos criados estruturadosem seu modelo, as páginas exibidas podem não refletir suas altera-ções, portanto, para que elas sejam atualizadas, você deve mantero modelo e todas as páginas criadas também abertas na tela, pois,dessa forma, ao alterar o modelo, todas as páginas seguintes, cria-das a partir do modelo, serão atualizadas.

Caso o modelo e as páginas estejam fechados, abra-os e utilize omenu Modify > Templates, selecionando a opção Update Current

Page, para que somente a página atual seja alterada.Mas o que fazer se várias páginas foram criadas com base nesse

modelo? Ora, basta abrir uma a uma e seguir o mesmo menu Modify > Templates > Update Current Page. Outra opção é verificar a al-teração nos modelos, bem como nos links existentes, o que é muitomais conveniente caso várias páginas tenham sido geradas a partirde um modelo.

Para atualizar as páginas, use o menu Modify > Templates >

Update Pages. Para verificar o registro das alterações, marque aopção Show Log e, ao pressionar o botão Done, automaticamente




serão atualizadas todas as páginas, links e modelos, bem como otempo necessário para todas as atualizações:

Figura 7.14.

Trabalhando com bibliotecas

Em muitas das páginas criadas, alguns elementos tornam-se re-petitivos, como botões, direitos autorais do site e esse tipo de infor-mações.

Como exemplo, suponha que, por padrão, todas as suas páginaspossuem os direitos autorais e a data da última atualização. Essas

informações fazem parte de mais de quatro páginas criadas em seusite, portanto, você deverá abri-las uma a uma para alterá-las. Ouseja, é preciso selecionar o texto, fazer as alterações e, logo a seguir,salvar e fechar a página. Imagine ter de fazer isso uma vez por dia emvárias páginas? Um sufoco, não é mesmo?

Dessa forma, podemos chamar esses itens repetidos, tratando-os como elementos, em uma biblioteca de itens e utilizá-los sempreque forem necessários.

É improtante salientar que tais itens somente podem ser criados

na tag <body> e </body>.Saiba como criar itens em uma biblioteca:

1. Ao final de sua página digite o texto 2006, O Chef em Casa.

2. Para inserir a data atualizada, use o menu Insert > Date, sele-cione o estilo desejado da data e pressione o botão OK.

3. Salve sua página.

4. Abra o painel de arquivos usando o menu Window > Files.




5. Dê um clique no painel Assets.

6. Selecione a informação que você acaba de inserir.

7. Arraste até o painel Assets.

8. Clique no último botão da janela, chamado Library:

Figura 7.15.

9. Um novo item de biblioteca será criado. O nome desse itemserá Untitled.

10. Clique sobre o novo item e dê-lhe um novo nome, Direitos,por exemplo, e pressione Enter.

Outra maneira de criar um item é com o botão New Library, naparte inferior do painel de grupos Library:

Figura 7.16.

Inserindo um item de biblioteca em páginas

Para inserir um item de biblioteca em uma página, faça o seguinte:

1. Abra a página em que deseja ver o item de biblioteca.

2. Posicione o cursor no local em que deseja ver o item.

3. Dê um clique sobre o item de biblioteca criado.

4. Pressione o botão Insert existente no painel Library.

5. Automaticamente, o item será inserido em sua página.




Caso queira, você poderá utilizar o seguinte atalho:

1. Abra o painel Files e a guia Assets.

2. Dê um clique sobre o item de biblioteca desejado.

3. Posicione o cursor no local em que deseja ver o item.

4. Arraste o item do painel Assets até o local desejado.

Sempre que um item de biblioteca é inserido em um documento,uma referência a esse item será feita (um código em HTML é inseri-do), mesmo que você não esteja vendo o item na pasta Library de

seu site. Cada item gerado é gravado na pasta Library com o nomeque você informou e a extensão .lbi.

Caso tenha removido um item de biblioteca acidentalmente, des-de que possua várias outras páginas com os elementos utilizados,você poderá recriá-lo rapidamente. Para isso, abra a página com oitem de biblioteca que você removeu. Pressione o botão Recreate existente no painel Assets.

Nesse caso, o item será recriado com o mesmo nome de itemutilizado na página.

Para modificar um item de biblioteca, dê um duplo clique sobre oícone existente no painel Assets e, rapidamente, o mesmo será aber-to em nova janela. Faça todas as alterações que achar conveniente.

Para atualizar todas as referências de bibliotecas utilizadas em suaspáginas, siga o menu Modify > Library > Update Pages. Para alterarsomente a página corrente, a opção deve ser Modify > Library >Update Current Page.

Da mesma forma que os modelos, automaticamente o Dream-

weaver informa a atualização de todas as referências:

Figura 7.17.




Para excluir um item da biblioteca, dê um clique no item desejadoe pressione o botão Delete, presente no painel Assets.

Veja, agora, como criar um item de biblioteca que funcionarácomo referência a menus de outras páginas:

1. Crie uma tabela com uma linha e quatro colunas.

2. Digite os textos seguintes como títulos das colunas: Aulas,Cardápios, Almoços e Jantares e Home.

3. Selecione o texto e formate da forma desejada.

4. Selecione o item Aulas.

5. Crie um link para a página correspondente.

6. Selecione o item Cardápios e crie um link para a página cor-respondente.

7. Selecione o item Almoços e Jantares e crie um link para ele.

8. Selecione o item Home e crie um link para a página Index.

9. Selecione a tabela criada.

10. Pressione o botão New item Library do painel Assets.

11. Digite o nome do novo item, como, por exemplo, Menus, epressione Enter.

Pronto, agora todas as suas páginas podem ter um menu criado.Para isso, arraste o item Menu do painel diretamente para suas pá-ginas.




Molduras

Você pode dividir a página de seu site em várias regiões, sen-

do que cada uma delas funciona como uma página HTML diferente.

Tais divisões são conhecidas como molduras ou frames. Um frame

é uma parte (região) de sua janela que exibe um documento HTML

independente do exibido no restante da janela.

A primeira vantagem que temos ao utilizar frames é o fato de que

a página não precisará ser recarregada continuamente, além de que

cada frame conta com barras de rolagem individuais, permitindo

uma aproximação mais individual.

Por outro lado, muitos programadores preferem não trabalhar

com frames, já que estes sobrecarregam suas páginas. Outras des-vantagens são o alinhamento gráfico, mais difícil, e o teste de nave-

gação, mais demorado.

Criando frames

Para criar um frame, abra um documento e escolha a categoria

Framesets, escolha um tipo de frameset e pressione o botão Create:

Figura 8.1.

Criando frames em documentos em branco

Caso você tenha criado uma página em branco e deseja aplicar

layouts de frames, faça o seguinte:

1. Com o documento aberto, use a barra Insert.



65Molduras

2. Clique na opção Layout.

3. Pressione o botão Frames e dê um clique no tipo de frame

desejado.

Figura 8.2.

Visualizando bordas dos frames

Muitas vezes, as bordas de um frame não estão visíveis. Para

visualizá-las, use o menu View > Visual Aids e selecione a opção

Frame Borders.

Desenhando frames

Você pode desenhar frames dentro de frames existentes. Para isso,

use o menu Modify > Frameset e utilize um dos itens disponíveis:

Figura 8.3.

Opção

Split Frame Left

Split Frame Right

Split Frame Up

Split Frame Down

Descrição

Cria um frame à esquerda do atual.

Cria um frame à direita do atual.

Cria um frame acima do atual.

Cria um frame abaixo do atual.

Tabela 8.1.




Outra maneira de separar os frames em partes menores é manter

a tecla Alt pressionada enquanto arrasta uma borda do frame sele-

cionado para a esquerda ou para a direita.

Redimensionando frames

A maneira mais rápida de redimensionar um frame é manter o

botão do mouse pressionado enquanto o arrasta para a esquerda ou

para a direita.

Excluindo frames

Para excluir um frame, você pode arrastar sua borda para fora dapágina atual. Caso algum documento não tenha sido gravado em

frames removidos, o Dreamweaver nos informa.

Selecionando frames

Para formatar frames, é preciso selecioná-los. Para selecionar,

siga o menu Windows > Frames. Aparecerá do lado direito da tela o

painel de frames. Ao clicar em um dos frames desse painel, automa-

ticamente ele será selecionado na janela do seu site:

Figura 8.4.

Ao selecionar um frame, será acrescida uma linha pontilhada na

janela de design, indicando o frame selecionado. A maneira mais rá-

pida de fazer uma seleção é manter a tecla Alt pressionada enquanto

dá um clique sobre o frame desejado.

Especificando o conteúdo de um frame

Com o Dreamweaver, é possível especificar o conteúdo inicial de

um frame, ou seja, abrir determinada página em um frame. Saibacomo fazê-lo:



67Molduras

1. Dê um clique no frame desejado.

2. Siga o menu File > Open in frame. Será aberta a seguinte janela:

Figura 8.6.

Salvando frames

Se deseja visualizar sua página no browser, você deve, antes de

qualquer coisa, salvar todos os documentos exibidos nos frames

existentes. Para tanto, siga o menu File > Save Frame, ou Save frame

as, e indique o nome do frame no documento.

Se for necessário salvar todos os arquivos associados a um con-

junto de frame, utilize o menu File > Save All.

Figura 8.5.

3. Indique o nome do arquivo que deseja ver aberto e pressio-

ne OK.

4. Você verá, no frame em que o cursor está posicionado, o ar-

quivo aberto:




Propriedades do frame

Selecione um frame e veja as opções apresentadas na barra

Properties:

Figura 8.7.

Na tabela seguinte, a definição de cada um dos botões:

Botão Definição

Permite alterar o formato do parágrafo, do texto e

da fonte utilizada.

Permite aplicar um estilo ao texto, bem como al-

terar seu tamanho e cor.

Permite aplicar negrito e itálico.

Permite alterar o alinhamento do texto no frame.

Permite aplicar marcadores, numeração ou recuos.

Permite especificar um link ao frame com outra

imagem ou documento.

Tabela 8.2.

Alterando a cor do preenchimento da frameset

Para alterar a cor de preenchimento (fundo), posicione o cursor

em um frame e use o menu Modify > Page Properties. Na caixa de

diálogos exibida, use a opção Background color.

Propriedades do frame

Selecione um frame e veja as opções da barra Properties:



69Molduras

Figura 8.8.

Nessa barra, é possível visualizar o número de linhas ( rows) e co-

lunas (columns) do frame, se há bordas ( border), bem como a espes-

sura ( border width) e a cor ( border color) destas. A opção Column

determina qual a medida da coluna do frame em pixels.

Inserindo títulos em frames

Para inserir um título em um frame, selecione o frame desejado e

digite o título no campo Title, na barra de ferramentas.

Figura 8.9.

Utilizando target

Você pode adicionar um link em um frame para abrir um docu-mento existente, utilizando um destino (target) para esse link. Para

isso, no modo de visualização de design, selecione a opção Link,

especifique o arquivo desejado e, na opção Target, selecione o fra-

me, ou janela, no qual o documento linkado deve aparecer. Veja as

opções existentes:

Descrição

Atribui o documento especificado em uma nova janelado browser, fazendo com que a janela atual permaneça

sem alterações.

Abre o documento especificado em um frame que origi-

nou aquele em que o link aparece.

Abre o documento especificado em link no frame atual,

substituindo o conteúdo existente.

Abre o documento especificado em link na janela atual

do browser, substituindo todos os frames.

Opção de target

_blank

_parent

_self

_top

Tabela 8.3.




Vale ressaltar que os nomes dos frames aparecem na lista Target se,

por acaso, você estiver dentro de um. Ao editar o documento em sua

própria janela, os nomes dos frames não aparecem na lista Target.

Alguns browsers não suportam o trabalho com frames; nesse

caso, o conteúdo é armazenado no arquivo de frame em uma tagconhecida como “noframes”.

Para visualizar frames em browsers que não oferecem suporte,

siga o menu Modify > Frameset > Edit Noframes Content e insira o

conteúdo como em um documento comum.



71Camadas

Camadas

Também conhecidas como layers, o Dreamweaver pode traba-lhar com camadas, elementos de uma página HTML que podem serposicionados em qualquer lugar, permitindo a inserção de imagens,textos ou de qualquer outro conteúdo no corpo do código HTML(<body>). Uma camada é uma tag <div> com posicionamento ab-soluto ou relativo.

Inserção de camadas

Assim como as tabelas e os frames, uma camada pode conter ca-

madas aninhadas. Para desenhar uma camada simples, use a barrade ferramentas Insert e clique no botão Draw Layer:

Figura 9.1.

Outra maneira de inserir layers é seguir o menu Insert > Layer.

Na criação de camadas, o ponteiro do mouse será alterado parauma mira (cruz). Ao posicionar o cursor na janela e arrastá-lo para adireita e para baixo, verá a nova camada surgir. Quando terminar decriar, solte o botão do mouse.

Caso não visualize as bordas/marcadores de código das cama-das, use o menu View > Visual Aids > Invisible Elements.

Após criar a primeira camada, mantenha a tecla Ctrl pressionadaenquanto cria novas camadas, sem ter de utilizar o comando nova-mente.

Caso o cursor esteja posicionado em uma camada, ao criar a pró-xima, a camada atual se expande para receber a nova; esse recursoé conhecido como camadas aninhadas.

Visualizando a janela dodocumento e a de código

Caso você tenha conhecimentos em códigos HTML, pode quereranalisar as duas janelas simultaneamente, com um clique no botãoda Figura 9.2:




Figura 9.2.

Figura 9.3.

Por padrão, o código de uma camada é inserido na parte superior dapágina, logo após a tag <body>. A tag <div> permite que um públicomaior visualize suas camadas. Ela cria um posicionamento da camadaem relação aos lados superior e esquerdo da janela do browser:

Figura 9.4.

Ao posicionar o cursor e digitar o texto, a camada se expandepara acomodar todo o texto digitado; esse é o padrão em camadas.

Gerenciando camadas

Para gerenciar as camadas existentes de seu documento, use omenu Window > Layers, ou o atalho F2:

Figura 9.5.



73Camadas

Para exibir ou ocultar camadas aninhadas, utilize os botões Plus

(+) ou Minus (-).Repare que será apresentada uma lista com o nome da camada

acompanhado por um número (z), o índice de camadas criadas.

Ao selecionar uma camada com um clique do mouse, automati-camente seu nome aparecerá em negrito. Para selecionar várias ca-madas de uma só vez, mantenha pressionada a tecla Shift enquanto

faz a seleção:

Figura 9.7.

Figura 9.6.

Caso o cursor esteja posicionado na janela de documento, dê umclique na borda da camada e utilize as teclas Ctrl e Shift para selecio-nar múltiplas camadas.

Preferência de camadas

Para especificar as configurações padrão das camadas, utilize omenu Edit > Preferences e dê um clique na categoria Layers:




Definindo as propriedades de uma camada

Ao selecionar uma camada, você observará as seguintes proprie-dades na barra Properties:

Figura 9.8.

Nomeando camadas

Cada camada criada vai receber um nome genérico, como layer1,layer2, e assim sucessivamente. Para nomear suas camadas, utilizea barra Layers, no lado direito da tela. Dê um duplo clique sobre onome da camada, digite um novo nome e pressione a tecla Enter:

Figura 9.9.

Outra maneira de nomear camadas é digitar um nome na opçãoLayer ID:

Figura 9.10.

Largura e altura das camadas

Para alterar a largura e a altura de uma ou mais camadas, selecio-ne-as e utilize as opções H ( height /altura) e W (width /largura) e digiteas medidas em pixels:

Figura 9.11.

Para alterar a posição da camada em sua página com relação à mar-

gem superior e esquerda do documento, use as opções R ( right /direita)e L ( left /esquerda):



75Camadas

Figura 9.12.

Para redimensionar em uma camada um pixel de cada vez, se-lecione a camada e arraste as alças de redimensionamento até alargura desejada.

Alterando o posicionamento de uma camada

Para alterar a ordem em que a camada aparece na janela do docu-mento, digite um novo valor do índice na opção Z-Index:

Figura 9.13.

No exemplo seguinte, é possível observar que, dependendo dascamadas, devemos alterar a ordem de empilhamento. Por padrão, aprimeira camada aparece abaixo da segunda, mas o resultado podenão ser o esperado:

Figura 9.14.

Alterando a cor de fundo da camada

A cor de fundo de uma camada é alterada quando utilizamos aopção Bg color presente na barra Properties:

Figura 9.15.

Para inserir uma imagem no fundo da camada, use a opção Bg

image:

Figura 9.16.

Alterando a visibilidade da camada

Caso não esteja visualizando o painel de camadas, siga o menuWindow > Layers ou pressione a tecla F2. Para ocultar a visualiza-




ção de uma camada, dê um clique no ícone com a figura de um olhoaberto ao lado do nome da camada. Para voltar a exibir a camada,basta dar um clique no ícone com a figura de um olho fechado:

Figura 9.17.

Alinhando camadas

Para alinhar duas ou mais camadas, selecione as que desejaalinhar, use o menu Modify > Align e escolha uma das opções de

alinhamento apresentadas.É possível fazer cortes em uma camada utilizando as seguintes

opções da barra Properties:

Figura 9.18.

Sobreposição de camadas

O Dreamweaver não permite criar uma tabela com camadas so-brepostas. Caso você pretenda converter as camadas em tabelas,será necessário prevenir-se com relação às sobreposições. Paraisso, siga o menu Modify > Arrange > Prevent Layer Overlaps.

Convertendo camadas em tabelas

Para converter as camadas selecionadas em tabelas, abra o menuModify > Convert > Layers to Table:

Figura 9.19.



77Camadas

O ideal é ativar as opções Most accurate, útil para preservar o layout do texto e Prevent layer overlaps, com a qual nos prevenimosdas sobreposições de camadas.

Na tabela a seguir, saiba a descrição das funcionalidades de cada

uma das opções apresentadas na figura anterior:

Tabela 9.1.

Convertendo tabelas em camadas

O procedimento contrário também pode ser aplicado, ou seja,converter uma tabela em layers. Para isso, siga o menu Modify >Convert > Table to Layers. Após escolher as opções desejadas,pressione o botão OK:

Opção

Most accurateSmallest: collapse empty cellsLess than: X pixels wide.Use transparent GIFsCenter on pagePrevent layer overlapsShow layers panelShow gridSnap to grid

Descrição

Para maior precisão.Para fechar células vazias.Menores que X pixels de largura.Utilizar GIFs transparentes.Centralizar na página.Evitar sobreposição de camadasMostrar o painel camadas.Mostrar a grade.Encaixar na grade.

Figura 9.20.

Opções de grade e régua

Quando trabalhar com camadas, é ideal utilizar grades e réguasque sirvam como guias em seu documento. Para tanto, siga o menuView > Grid > Show grid:




Opções

ColorShow gridSnap to grid

SpacingDisplay

Definições

Permite especificar a cor das linhas de grades.Permite exibir as linhas de grade.Permite ancorar as camadas e objetos às grades.

Permite especificar o espaçamento entre as grades.Permite visualizar as grades como linhas ( lines) ou pontos(dots).

Figura 9.21.

Para facilitar o posicionamento de camadas, é possível prendê-las em pontos pré-determinados das grades. Para isso, use o menuView > Grid > Snap to grid.

Para configurar as especificações das grades existentes, siga omenu View > Grid > Grid Settings. Você encontrará as seguintes

opções:

Figura 9.22.

Na tabela seguinte, veja o que cada uma das opções possibilita:

Tabela 9.2.

Nota: para excluir uma camada, selecione-a e pressione a teclaDelete.



79Links

Links

Ao criar um site com documentos da Web, é preciso fazer algu-

mas conexões entre imagens e documentos. Por exemplo, há em

todo site uma página inicial (index) que possui chamadas (conexões)

a outras páginas.

O Dreamweaver permite fazer essas conexões criando links para

documentos, imagens, arquivos de som e imagem (multimídia) ou,

ainda, para programas em que podemos fazer o download de outras

informações.

Caminhos de arquivos

Ao criar um link, é importante perceber que o caminho ( path) do

documento na tela é vinculado àquele que está sendo habilitado.

Por isso, o ideal é manter todos os arquivos de documentos em uma

mesma pasta, para que facilite a conexão.

Cada página em seu site possui um endereço único, conhecido

como URL (Universal Resource Locator); sempre que você fizer a

conexão dessa página com outro arquivo, será indicado o caminho

relativo ao documento ou à pasta à qual ele pertence.

A maioria dos aplicativos de criação de páginas entende que te-mos três tipos de caminhos de link de arquivos. São eles:

• Caminhos absolutos: aqueles em que são fornecidas as infor-

mações completas para a URL, como, por exemplo http://www.dige-

rati.com.br/livros/dreamweaver.htm, em que tanto no arquivo atual

como no linkado são fornecidas informações absolutas (completas);

• Caminhos relativos ao documento: esse tipo de caminho é o mais

apropriado para os links locais da maioria das páginas da Web, pois em

suas especificações não há registro da URL completa, sendo diferente

apenas o segmento do caminho. Como exemplo, temos aulas.htm

• Caminhos relativos à raiz: esse tipo de caminho fornece a loca-

lização da pasta-raiz de seu site a um determinado documento. Esse

processo é bastante utilizado quando trabalhamos com sites mais

complexos e grandes (os portais, por exemplo), pois utilizam vários

servidores ou, até mesmo, um servidor capaz de hospedar vários

sites diferentes. Por exemplo, /livros/dreamweaver.htm.

Por isso, é importante armazenar os arquivos linkados e com ima-gens na mesma pasta em que está o seu site. Como exemplo, temos




a página Index.htm que, por sua vez, chama a página Aulas e a página

Cardápios. Cada uma dessas pastas abre imagens, fotos e sons que

fazem referência a outros documentos e mensagens. Para não perder

um tempão no servidor tentando localizar essas informações, o ideal

é armazenar tudo em pastas distintas. Ou seja, quanto às páginas re- feridas, deixe-as na raiz principal, as imagens, em uma página conhe-

cida como Imagem, o mesmo com sons e assim sucessivamente.

Estabelecendo caminhos relativos ao documento

Quando o arquivo está na mesma pasta do documento atual, se

faz necessário digitar o nome do arquivo que deseja linkar:

Figura 10.1.

Para fazer vínculo com um arquivo que está em uma subpasta,

você deve fornecer o caminho dessa subpasta:

Figura 10.2.

Em qualquer um dos exemplos citados, é importante, para nãocausar erros de digitação, utilizarmos o botão com a pasta amarela

ao lado da palavra Link. Dessa forma, o Dreamweaver procura o ar-

quivo e transcreve, nesse local, todo o caminho:

Figura 10.3.

Sempre que utilizar a pasta amarela para fazer referência a um

arquivo externo à pasta atual, automaticamente o Dreamweaver irá

perguntar se deseja fazer uma cópia desse arquivo, evitando o trans-

torno de localizar o documento linkado:

Figura 10.4.



81Links

Criando links

Até agora, trabalhamos com links sobre textos (hipertextos), ou

seja, com o cursor posicionado em determinada palavra, e utiliza-

mos a opção Link, existente na barra Properties. Isso é conhecidocomo uma tag de âncora, na qual o Dreamweaver gera um par de

âncoras para os objetos linkados, textos ou imagens. Portanto, ao

criar um link, automaticamente o código HTML será:

<a href=”fi le:///C:/Documents%20and%20Settings/

Sandra/logos/aulas.JPG”Aulas</a>

Você pode criar links com outros documentos, arquivos de ima-

gem, filmes, sons, arquivos PDF, nomes, correios eletrônicos e, tam-

bém, links nulos, que permitem anexar determinado comportamen-

to a um objeto.

Uma maneira rápida de criar esse tipo de link é digitar o nome

que lhe pertence na opção Link, na barra Properties. Por outro lado,

se deseja maior paticidade, arraste o nome do arquivo existente na

barra Files (lado direito da tela) até a opção Link.

Outra maneira de criar um link é selecionar o texto ou imagem e

usar o menu Modify > Make link ou pressionar as teclas Ctrl + L.

Fazendo links em imagens

1. Dê um clique na página que deve receber a imagem.

2. Na janela Properties, na opção Src, arraste o nome de um ar-

quivo de imagem.

3. Na opção Link, arraste o nome de um documento que deve ser

linkado:

Figura 10.5.




Outra forma rápida e eficiente de fazer links é dar um clique no

ícone Point to file (relógio), à direita do campo Link e, em seguida,

arrastar o ponteiro do mouse para o painel Files até o arquivo que

deseja linkar.

Uma seta aparecerá indicando que os dados foram linkados.

Criando link usando o site Map

No painel Files (lado direito da tela), você pode ter uma visão

global de todos os arquivos que estão dentro da mesma pasta, bem

como dos links gerados. A visualização atual recebe o nome de Lo-

cal view:

Figura 10.6.

Para mudar o modo de visualização, mude a opção Local view para Map view:

Figura 10.7.

Para visualizar os arquivos e o mapa do site, é preciso expandir

essa janela por meio do botão Expand/collapse (Figura 10.8):

Figura 10.8.

Com a tela do mapa do site expandida, você verá o arquivo Index.

htm. Dê um clique nesse arquivo e verá o ícone Point to File.Arraste esse ícone e aponte-o para outro arquivo que será linkado:



83Links

Figura 10.9.

Esse método funciona muito bem quando você precisa criar links

no site inteiro.

Para retornar à janela do Dreamweaver, pressione novamente o

botão Expand/collapse.

Testando

Para verificar os links criados, você pode testá-los simulando a

utilização no navegador. Para isso, basta pressionar a tecla F12 e dar

um clique em cada link gerado para ver se estão fazendo as referên-

cias corretas.

Links de correio eletrônicos

Um link de correio eletrônico abre uma nova janela de uma nova

mensagem e utiliza o programa de correio eletrônico associado aonavegador utilizado pelo usuário. Para saber qual é esse programa

de correio eletrônico, use o menu Iniciar e clique, com o botão direi-

to do mouse, sobre o ícone Internet, ative a opção Propriedades e,

na guia Programas, você terá todas as informações necessárias:

Figura 10.10.




Portanto, ao criar um link com um correio eletrônico, automatica-

mente será exibida a janela de seu programa de correio.

Para criar um link, faça o seguinte:

1. Digite Fale conosco:

2. Com o ponto de inserção logo após os dois pontos da expres-

são digitada, use o menu Insert > Email Link:

Figura 10.11.

3.No campo Text, digite o texto que deseja exibir no documento,

funcionando como link.

4. No campo E-Mail, digite o endereço eletrônico do contato e

pressione OK.

Ao testar seu site, veja que, ao clicar sobre esse endereço, auto-

maticamente o navegador irá exibir uma janela em branco com uma

nova mensagem.

Gerenciando links

Caso você mude os links de pastas (endereços) ao abrir sua página

e utilizar um link ao qual você se referiu, automaticamente o Dream-

weaver busca essa informação na pasta de seu documento atual. Esseprocesso pode levar algum tempo, portanto, se a mudança foi feita, é

necessário atualizá-la. Como? Digite os links novamente.

Com esse método você percorrerá link a link, efetuando a tro-

ca da informação. Para facilitar seu tabalho, você pode indicar ao

Dreamweaver que faça a atualização automaticamente. Veja como

é fácil:

1. Use o menu Edit > Preferences.

2. Clique na categoria General.



85Links

3. Ative a opção Always (Sempre) da opção Update links when

moving files (Atualizar os links ao mover arquivos) e dê OK.

Essa opção fará uma atualização automática de todos os links

para um documento selecionado, ou de um documento selecionadoque for movido ou renomeado.

A opção Prompt, do mesmo comando, irá exibir uma caixa de

diálogos com uma lista de todos os arquivos alterados. Estando in-

formado, você deve pressionar o botão Update para que o Dream-

weaver faça a atualização.

Uma maneira rápida de cumprir esse processo de atualização é

criar um arquivo de cachê, que armazena todas as informações sobre

os links e seus respectivos locais no site. Para tanto, faça o seguinte:

1. Siga o menu Site > Manage Sites.

2. Selecione o site desejado com um clique.

3. Pressione o botão Edit.

4. Na caixa de diálogos Local Info, use a opção Enable cache.


Figura 10.12.




Interatividade

O objetivo desse capítulo é criar interatividade com o visitante dapágina mediante sobreposições e comportamentos do Dreamweaver.

Antes de qualquer coisa, é importante falar um pouco sobrecomportamentos, espécies de ações do usuário (visitante da pá-gina) combinadas com atividades relativas ao evento disparado.Por exemplo, quando o usuário movimenta o mouse sobre umbotão, isso dispara um evento (uma ação): alterar a imagem des-se botão.

Todos os comportamentos em Dreamweaver são como códigospreviamente escritos em linguagem JavaScript e podem ser incor-

porados rapidamente e sem grandes transtornos em seu site.O Dreamweaver possui vários comportamentos que lhe sãopróprios. Caso tenha conhecimentos em JavaScript, poderá criá-los e anexá-los em seu site. Outra coisa interessante é fazer odownload de diversos comportamentos no site do Dreamweaver.Porém, para fazê-lo, é preciso associar-se ao Macromedia.com,uma operação simples e gratuita. Para o ingresso e download, uti-lize o seguinte endereço: http://www.macromedia.com/exchange/dreamweaver.

Imagens cambiáveis

Já vimos o conceito de imagens cambiáveis no Capítulo 4, imagensque mudam quando o usuário as toca com o ponteiro do mouse. Parainseri-las, siga o menu Insert > Image Objects > Rollover Image.

Dê um nome para a imagem na opção Image Name. Informequal imagem deve ser visualizada inicialmente em Original Image.Como, ao posicionarmos o cursor, a imagem deve ser trocada poroutra, indique qual será essa imagem na opção Rollover Image.Como texto alternativo, é possível digitar Pratos Típicos da Cozinha

Internacional .Caso queira que sua imagem acesse um determinado site ou lo-

cal, digite seu endereço na opção When clicked, Go to URL (Quantoclicado, vá para a URL). Dessa forma, quando o visitante clicar sobrea imagem, será enviado para uma página diferente ou para um siteligado ao assunto:



87Interatividade

Figura 11.1.

Caso você tenha deixado essa opção em branco, o Dreamweavervai preenche-la com um sinal de link nulo, representado por cer-quilha (#). Nesse caso, será exibida, pelo navegador, a imagem deuma mãozinha apontando para a imagem, fazendo com que o cursor

permaneça na mesma página. Portanto, não deixe essa opção embranco, pois irá remover o código em JavaScript que cria a sobrepo-sição de imagens.

Por enquanto, você está visualizando uma imagem. A interativi-dade será percebida somente ao visualizar a página em seu navega-dor, por isso faça um teste pressionando a tecla F12.

Comportamentos

Agora que você verificou como inserir imagens cambiáveis, va-mos aprender a criar sobreposições de imagens de forma diferente,usando os comportamentos do Dreamweaver. Dê um clique sobre aimagem cambiável que acabou de inserir e abra o painel de compor-tamentos utilizando o menu Window > Behaviors ou, se preferir, oatalho Shift+F3.

Figura 11.2.

Ao abrir o painel de comportamentos, você notará um sinal deadição (+); com ele, inserimos novas ações. Para trocar a imagem,pressione o sinal de adição e use a opção Swap Image (Permutarimagem).

A imagem selecionada aparece em uma lista. Altere a imagemcambiável utilizando a opção Set source to, indicando qual deve ser




a imagem a ser exibida. Você percebeu que cumpriu o mesmo pro-cesso do exemplo anterior, mas, nesse caso, usou uma ação (com-portamento) para obter o mesmo resultado. Outra coisa importanteé que, ao fornecer um nome para a imagem, facilitamos sua procura

e inserção. Caso o nome não tenha sido definido, aparecerá a men-sagem unnamed image <img>.

A opção Preload images, por padrão, aparece habilitada, indican-do que é importante pré-carregar as imagens. Nesse caso, as ima-gens que serão trocadas, substituindo as originais, serão carregadas

junto com o restante da página, sobrepondo-as rapidamente e elimi-nando o atraso que, geralmente, ocorre no download sempre que ousuário posiciona o ponteiro do mouse sobre a imagem.

Outra opção que vem habilitada por padrão é Restore images

onMouseOut (Restaurar as imagens onMouseOut), que permite areversão para as imagens originais quando o usuário sair.

Após clicar no botão OK, você verá o comportamento definidono painel:

Figura 11.3.

Nesse exemplo, você tornou uma imagem cambiável. Vejamos,agora, o que fazer para trocar várias imagens com um evento:

1. Abra a página com as imagens que você inseriu.

2. Ative o painel de comportamentos (menu Window > Behaviors).

3.

Use o sinal de adição.

4. Ative a opção Swap Images.

5. Veja o que acontece caso não defina um nome para as imagens:

Figura 11.4.



89Interatividade

6. Nesse caso, dê um clique na imagem da lista Images.

7. Ative a opção Browse para trocar a imagem.

8. Indique qual deve ser a imagem cambiável (Set source to).

9. Repita os passos de 6 a 8 até trocar todas as imagens neces-sárias.

Exibindo mensagens pop-up

É possível apresentar pequenas caixas de diálogos ao usuárioclicando em algum botão ou texto inserido. Para testar esse tipo deefeito, faça o seguinte:

1. Digite o texto Cardápios.

2. Selecione-o.

3. Use o sinal de adição (+) do painel de comportamentos.

4. Ative a opção Popup Message.

Figura 11.5.

5. Digite a mensagem que o usuário vai visualizar.


Para ver o que ocorre, faça um teste no navegador (F12):

Figura 11.6.




Outro tipo de mensagem que você pode inserir em seu site sãoas existentes na barra de status. Para tanto, selecione uma imageme, novamente, ative o sinal de adição no painel de comportamentos.Siga o menu Set Text > Set Text of Status Bar. Será aberta a se-

guinte janela:

Figura 11.7.

Digite a mensagem que deseja ver na barra de status e pressio-ne OK.

Faça um teste em seu navegador e, ao movimentar o mouse so-bre a imagem, verá a mensagem sendo exibida na barra de statusde sua página.

Figura 11.8.

Menus flutuantes

Outro comportamento bastante utilizado é o que cria menus flu-tuantes com ações criadas no ambiente JavaScript. Tais menus sãoexibidos em navegadores Netscape e em Explorer, mas, provavel-mente, não terá os mesmos efeitos se o usuário estiver utilizando onavegador Opera.

Selecione a imagem desejada e use o sinal de adição do painelde comportamentos. Ative a opção Show Pop-Up Menu para ver acaixa de diálogos:

Figura 11.9.



91Interatividade

1. Digite Cardápios na opção Text.

2. Na opção Link, digite a página que deseja visualizar, por exem-plo cardápios.html.

3. Pressione o sinal de adição para criar um novo item de menu.

4. Caso queira criar um subitem de menu, use o botão da Figura

11.10:

Figura 11.10.

5. Após criar todas as opções do menu, você terá a seguinte con-figuração:

Figura 11.11.

Para remover um item do menu, dê-lhe um clique e pressione osinal de subtração.

Para mover os itens, você deve dar um clique na opção desejadae utilizar as setas para cima ou para baixo.

Concluída a criação de seu menu, pressione OK. Para conferir oresultado, faça um teste na janela de seu navegador:

Figura 11.12.




Alterando a aparência do menu

No painel de comportamento, dê um duplo clique sobre a ação

Show Pop-Up Menu para ver a caixa de diálogos que acabou de uti-

lizar. Dê um clique na guia Appearance e veja as opções existentes:

Figura 11.13.

Para alterar a exibição do menu, use as opções Vertical ou Ho-

rizontal Menu. As fontes devem ser alteradas por meio da opção

Font, Size, B (negrito) e I (itálico).

As opções de Up state indicam o estado do menu quando o pon-teiro do mouse for pressionado e as opções de Over state funcio-

nam quando o ponteiro estiver sobre ele.

Para alterar a aparência das células (bordas ao redor do texto), uti-

lize a guia Advanced, na qual você encontrará as seguintes opções:

Opção

Cell width

Cell height

Cell padding

Text indent

Cell spacing

Show borders

Border width

Shadow

Border color

Highlight

Descrição

Define a largura da célula.

Define a altura da célula.

Define o espaço em branco antes do menu.

Define o espaçamento das células.

Define o espaçamento do texto dentro da célula.

Exibe bordas ao redor das células.

Altera a largura da linha de borda das células.

Permite definir a cor do sombreamento da célula.

Permite definir a cor da borda das células.

Permite definir a cor do brilho das células.

Tabela 11.1.



93Interatividade

Para definir o posicionamento do menu com relação à imagem,utilize a guia Position:

Figura 11.14.

Incorporando som à imagem ou ao texto

Um evento que pode chamar a atenção do visitante de seu site éuma música ou um sinal sonoro que pode ser incorporado ao textoselecionado ou à imagem. Para tanto, selecione a imagem ou o tex-to, utilize o sinal de adição do painel de comportamentos e ative aopção Play Sound.

Indique o nome do arquivo de som que deseja incorporar e pres-sione OK. Ao clicar sobre a imagem ou texto, automaticamente oarquivo de som será executado:

Figura 11.15.

Verificando o navegador

Como podemos observar, o navegador utilizado pelo seu visi-tante pode causar alguns transtornos na hora de exibir e executaras camadas e animações. Devido a esse fato, é importante detectarquais os navegadores estão sendo utilizados e tentar redirecionar osusuários para outra página.

Nesse caso, quando o usuário estiver utilizando um navegadordiferente, é possível criar uma página estática sem as camadas ouanimações, redirecionando-a com navegadores do Explorer 4.0 parapáginas com animações.

Para verificar esse comportamento, selecione a tag <body> pararedirecionar o usuário antes que a página seja recarregada.




Para selecioná-la, vá à barra de status (antes da janela Properties)e dê-lhe um clique.

Figura 11.16.

No painel de comportamentos, clique no sinal de adição e ative a

opção Check Browser:

Figura 11.17.

No caso do Netscape, ou de navegadores mais avançados, comoo Internet Explorer 4.0, direcione a URL (Go to URL), indicando paraqual página o visitante deverá ir.

As opções de Otherwise permitem o redirecionamento com acontinuidade na página.

Caso utilize outros navegadores, marque a opção Other brow-

sers e direcione o visitante para alguma página.A opção URL permite especificar a página para a qual os usuários

dos navegadores mais recentes serão redirecionados. Ao pressionara tecla OK, será inserido o código JavaScript na página.

Abrindo a janela do navegador

Quando sua página for carregada, é possível exibir informações

como anúncios, promoções e outros tipos de dados em uma nova janela do navegador. Nesse caso, podemos controlar o tamanho e



95Interatividade

outros atributos da nova janela do navegador, tais como as barras demenus existentes e as barras de rolagem.

Para abrir em uma nova janela do navegador, use o sinal de adiçãodo painel de comportamentos e a opção Open Browser Window:

Figura 11.18.

Na opção URL to display indique qual página (URL) será exibida.A largura da janela deve ser definida na opção Window width e aaltura em Window height.

Controle todos os atributos da janela utilizando as opções Navi-

gation toolbar (Barra de ferramenta de navegação), Menu bar (Bar-ra de menus), Location toolbar (Barra de ferramenta local), Status

bar (Barra de status), Scrollbars as needed (Barras de rolagem, se

necessárias), Resize handles (Alças de preenchimento) e Window

name, para definir o nome da janela.




Formulários

Se pretende interagir com o usuário solicitando informações,como o endereço de e-mail do visitante, você pode contar com os

formulários que, além de colher informações, permitem maior rapi-dez na venda de seu produto.

Quando falamos de formulários, falamos também de um códi-go-fonte escrito em HTML que armazena as informações sobre o

formulário, como, por exemplo, todos os campos e botões que ousuário visualiza na página. Por trás do código-fonte, há os scriptsde processamento, mais conhecidos como aplicativos, que proces-sam todas as informações enviadas.

A maior parte dos formulários é processada por scripts CommomGateway Interface, popularmente chamados de scripts CGI, que, naverdade, trata-se de um padrão de envio de informações entre umservidor e um script de processamento. A maioria desses scripts éescrita na linguagem Perl, mas também podem ser feitos nas lingua-gens Java, VBScript, JavaScript e C++.

Antes de criar um formulário, é importante verificar sé é possívelexecutar scripts CGI no seu servidor.

Os objetos dos formulários

Para acessar a barra de formulários, siga o menu Insert > Form >Forms, ou na barra Insert, selecione Forms:

Figura 12.1.

Ao inserir um formulário, aparecem na tela linhas pontilhadasvermelhas que servem para identificar visualmente a área do formu-lário. Essa área é reconhecida pelas tags <form> e </form>.

Vejamos os botões de formulários presentes na barra Forms:

Nome dos botões

Form

Descrição

Insere um formulário na página. Serão visualizadas astags <form> e </form>, que abrem o formulário. Éimportante que todas as informações estejam inseri-

das entre as duas tags para que os dados sejam pro-cessados pelo navegador.



97Formulários

Nome dos botões

TextFieldHiddenField

TextAreaCheckBoxRadio ButtonRadio GroupList/MenuJump MenuImage FieldFile Field

Button

Descrição

Insere um campo de texto no formulário.Insere um campo oculto na página.

Insere uma área de texto no formulário.Insere uma caixa de seleção.Insere um botão de opções.Insere um grupo de botões de opções.Insere uma lista de opções.Insere uma lista de navegação ou um menu pop-up.Insere uma imagem.Insere um campo de texto em branco e um botãoBrowse (Procurar).

Insere um botão de ação que realiza uma tarefa.

Tabela 12.1.

Construindo o formulário

Para criar um formulário, em um documento novo, siga o menuInsert > Form > Form e note o contorno pontilhado em vermelhoexibido em sua página.

Ao selecionar esse contorno, você verá a barra Properties:

Figura 12.2.

Digite um nome para o formulário na opção Form Name, como,por exemplo, Visitantes.

No campo Action (ação do formulário), especifique o caminho até

a URL na qual reside o script que vai processar as informações noservidor. Por exemplo: http://www.digerati.com/cgi-bin/forms.cgi.

Em Method (Método), selecione a opção POST. Dessa forma, to-dos os valores digitados no formulário serão enviados ao servidor.

A outra opção existente é GET, que serve para enviar as informa-ções ao servidor e anexá-las à URL. Porém, essa opção não deve serutilizada em formulários extensos, pois as URLs têm um limite de 8.192caracteres; caso os dados sejam enormes, os valores podem ficar trun-cados. É importante, também, não utulizar o método GET quando asinformações solicitadas são confidenciais, como números de cartõesde crédito ou dados bancários, pois esse método não é seguro.




Criando campos

Criada a tag de formulário, é possível, para facilitar o trabalho ea visualização, criar uma tabela. Assim, controlamos a largura e a

altura de cada um dos objetos do formulário. Para tanto, siga o menuInsert > Table e defina o número de linhas e colunas desejadas.

Para criar um campo de texto simples, com uma linha, faça o se-guinte:

1. Pressione, na barra Form, o botão TextField.

2. Digite um nome para o campo na opção TextField, presente nabarra Properties do campo.

3. Para especificar a extensão do campo de texto, digite 40 naopção Char Width.

4. Para especificar o número máximo de caracteres no campo,use a opção Max Chars.

5. Na opção Type, defina como Single line.

6. Para que apareceça um texto inicial, ao carregar o formuláriuona tela, digite o texto na opção Init val (Valor inicial).

7. Pressione a tecla Enter para criar um novo parágrafo.

Tipos de campos de texto permitidos na opção Type:

Tipo

Single line

Mult line

Password

Descrição

Cria um campo com uma única linha, para textos curtos, comonome, endereço, CEP e outros.Cria um campo de texto maior, no qual podem ser digitadasinformações, como respostas, observações e outros camposextensos. É possível determinar o número de caracteres ou delinhas disponíveis.Cria um tipo de texto especial no qual o que é digitado torna-seoculto ou será substituído por asteriscos ou marcadores. São

utilizados para a inserção de senhas e códigos especiais.Tabela 12.2.



99Formulários

Exemplo de campos com múltiplas linhas:

Figura 12.3.

A opção Wrap identifica se o texto deve ou não passar automa-ticamente à linha seguinte (Default ou Off). A opção Virtual definea quebra de linha na área do texto, ao passo que e a opção Physical especifica essa quebra quanto aos dados.

Observe um exemplo de um campo de senhas:

Figura 12.4.

Campos ocultos

Alguns elementos em seu formulários podem ser invisíveis parao usuário, com a finalidade de coletar informações ou mesmo deenviá-las ao servidor. Todas as informações contidas em camposocultos são transmitidas ao servidor quando o formulário é enviado,

utilizando o nome/valor definido na configuração do campo. Vejacomo criar um campo oculto:

1. Em um novo parágrafo, aperte o botão HiddenField.

2. Aparecerá um marcador em seu documento.

3. Na barra de propriedades, digite o nome do campo na opçãoHiddenField.

4. Em Value, digite Catálogo de Produtos.




5. Crie um novo campo oculto e, em HiddenField, digite Enviar

para.

6. Em Value, digite [email protected].

7. Salve a página. Observe o resultado:

Figura 12.5.

Inserindo caixas de seleçãoUm campo bastante útil em formulários é aquele que permite fa-

zer com que o usuário escolha uma ou mais opções em um grupo deitens previamente relacionados. Saiba como construí-lo:

1. Em um novo parágrafo, digite a pergunta que deseja fazer aousuário. Por exemplo: Qual seu prato preferido?

2. Pressione a tecla Enter para criar uma linha.

3. Use o botão CheckBox name da barra de formulários.

4. Será criada uma caixa de seleção.

5. Na barra de propriedades, digite o nome da caixa de seleção,Carnes.

6. Em Checked value, digite Carnes ao lado do botão criado.

7. Repita os procedimentos dos passos 3 a 6 para inserir novasopções em seu formulário.

Figura 12.6.



101Formulários

A opção Initial state serve para definir se, ao carregarmos o formu-lário, a opção aparecerá como ativa (Checked) ou não (Uncheked).

Botões de opção

Para que o usuário possa selecionar apenas uma opção, vocêdeve utilizar o Radio Button. Observe:

1. Em um novo parágrafo, digite Estado Civil .

2. Na barra Form, dê um clique no botão Radio Button.

3. Na barra de propriedades, digite o nome do campo como Sol-

teiro.

4. Em Cheked value, digite Solteiro.

5. Em Initial state, escolha a opção Checked para que estaapareça selecionada quando carregamos o formulário, ouUncheked, para que não apareça selecionada.

6. Para criar uma nova opção, repita os passos de 2 a 5. Observeo resultado:

Figura 12.7.

Listas de rolagem

Podemos configurar uma lista de opções em um espaço limita-do por meio do botão List/Menu. Veja como é fácil criar esse tipode campo:

1. Em um novo parágrafo, digite Escolha um Prato.

2. Pressione Enter e, em seguida, o botão List/Menu.




3. Na barra de propriedades, digite o nome do campo (Carnes)abaixo da opção List/Menu.

4. Em Type, escolha a opção List, para criar uma lista de pratos

com carne.

5. No campo Height você deve especificar o número de linhasque serão exibidas pela lista. Digite 3.

6. Se deseja permitir ao usuário a seleção de mais de uma opção,habilite Allow multiple.

7. Dê um clique no botão List Values para entrar com as opçõespermitidas.

Figura 12.8.

8. Digite o primeiro elemento, por exemplo, Bife à parmegiana.

9. Em Value, digite Parmegiana.

10. Para criar um novo item, pressione o sinal de adição.

11. Após inserir todos os itens da lista, pressione o botão OK.

12. O campo Value deve armazenar o texto a ser enviado ao ser-vidor quando o usuário seleciona um item.

Menus pop-up

Outro recurso do botão List/Menu da barra de formulários é o fatode podermos criar, com facilidade, menus pop-up que permitem ainclusão de várias opções em espaços limitados. Ao carregarmos o

menu em um navegador, estará visível somente uma das opções, mas



103Formulários

se clicarmos na seta que indica para baixo nesse mesmo menu, todasas opções serão exibidas. Em bancos de dados e em outras lingua-gens, esse tipo de campo é conhecido como caixa de combinação.

Para criar um menu pop-up, faça o seguinte:

1. Em um novo parágrafo, digite Cardápios de congelados e pres-sione Enter.

2. Dê um clique no botão List/Menu da barra de formulários.

3. Dê um nome para o menu utilizando a opção List/Menu.

4. Pressione o botão List Values para criar a lista de elementos.

5. Digite o primeiro elemento da lista na opção Item Label.

6. Em Value digite a informação que será enviada ao servidor,Carnes.

7. Para criar mais itens, use o sinal de adição.

8. Repita os passos de 5 a 7 para criar todos os elementos dese- jados.

9. Para alterar a ordem de exibição, dê um clique sobre o elemen-to e utilize a seta indicando para cima para subir o item, ou a setapara baixo, para descê-lo.

10. Pressione OK quando terminar a lista. Observe:

Figura 12.9.

Menus de salto

É possível criar um menu suspenso com links para outras páginasde seu site; algo similar ao menu pop-up criado anteriormente, mas,




agora, com a facilidade de se ligar às páginas mais rapidamente.Saiba como fazer:

1. Em uma área nova de seu formulário, digite Escolha sua opção

e pressione Enter.

2. Pressione o botão Jump Menu.

3. Na opção Text, digite o texto que deseja visualizar no menu: Aulas particulares.

4. Na opção When selected, go to URL, digite o endereço da pági-na para a qual deseja ir, ou pressione o botão Browse para localizá-la.

5. A opção Open URLs in permite informar onde devemos abriras URLs; a opção padrão é na janela principal (Main window).

6. Informe o nome do menu na opção Menu name.

7. Para acrescentar um novo item, utilize o sinal de adição.

8. Para excluir um item, dê-lhe um clique e pressione o sinal desubtração.

9. Ao terminar, pressione o botão OK.

Figura 12.10.

Botões de comando

Criados os campos em seu formulário, será interessante enviarseus dados ao servidor. Para tanto, você pode criar um botão decomando conhecido como Submeter ou Enviar, que informa ao na-vegador o envio de todos os dados de acordo com ação e métodoespecificados. Outro botão importante é o Limpar, que apaga todas

as informações da página e permite a inserção de novos dados. Vejacomo criar o botão Submeter:



105Formulários

1. Posicione o ponteiro na última linha de seu formulário.

2. Dê um clique no botão Button, na barra de formulários.

3. Automaticamente, será exibido um botão com o texto Submit.

4. Na opção Button da barra de propriedades digite o nome dobotão.

5. Na opção Label digite o texto que deseja ver no botão. Podeser Submeter ou Enviar, por exemplo.

6. A ação do botão (Action) deve ser Submit form, para que osdados sejam enviados ao servidor.

7. Crie outro botão com o nome Limpar, que tem a função de re-definir o formulário (Reset form).

Figura 12.11.

Campos de imagem

Uma opção interessante em seu formuláiro é a de inserir imagensque podem ser enviadas a outras páginas do site. Esse tipo de cam-po é conhecido como campo de imagem.

Para criar um campo de imagem, use o botão Image Field nolocal em que deseja ver a foto e selecione a figura que que queiravisualizar.

A barra de propriedades da imagem é parecida com a de umaimagem normal. Defina um nome para a imagem na opção abaixode Image Field. Para alterar a largura e a altura, utilize as opções W




(width /largura) e H ( height /altura). A opção Src define o nome daimagem de origem. Em Alt, defina o texto que deseja visualizar aoposicionar o ponteiro do mouse sobre a imagem.

Para editar a imagem, use o botão Edit image; se necessário,

altere o alinhamento da imagem utilizando a opção Align.Se achar interessante que a imagem abra o painel de comporta-

mentos, use o sinal de adição e escolha a opção Go to URL.Teste seu formulário pressionando a tecla F12. Ao dar um clique

na imagem, automaticamente você será levado para a página inicialdefinida na opção Alt.

Figura 12.12.

Validando formulários

Para garantir que os dados digitados pelo usuário são os quevocê realmente definiu, é possível validar seu formulário para queseja feita a verificação das informações e acidentes não aconteçamquando enviarmos dados ao servidor.

Para validar os dados, é importante visualizar o painel de com-portamento Window > Behaviors. Posicione o cursor no contor-no de seu formulário, escolha o sinal de adição e, depois, a opçãoValidate form.

Nesse momento, todos os campos existentes no formulário se-rão listados na janela Validate por meio da opção Named Fields.Selecione um campo da lista e ative a opção

Required (É necessário). Você pode definir qual tipo de dado seráaceito em seu campo com a opção Accept (Aceitar), que permitequalquer tipo de dado (Anything), números (Number), endereço dee-mail (Email address) ou um intervalo de números (Number from),no qual você deve digitar o intervalo inicial e o final.

Faça isso com cada um dos campos existentes, ou seja, cliqueno campo Named Fields, indique se é necessário ou não (Required)e o tipo de dado que deve receber (Accept). Após definir todos oscampos, pressione o botão OK.

Para testar seu formulário, salve a página e pressione a tecla F12

para visualizar no navegador. Preencha o campo de e-mail com valo-res e veja o que acontece.



107Criando banners

Criando banners

Um diferencial para qualquer site pode ser a inserção de banners,

anúncios que chamam a atenção dos usuários.

Por padrão, a maioria dos desenvolvedores de páginas insere

banners no topo das páginas. Alguns, porém, adotam a criação de

janelas pop-up, mas, infelizmente, a maior parte dos provedores

consegue bloquear tais janelas. Portanto, a solução para esse pro-

blema pode ser a inserção de um banner que flutue sobre a página.

Veja como criá-lo:

1. Em um documento em branco, siga o menu Insert > Layout

Objects > Layer.

2. Aparecerá uma pequena moldura na tela, indicando que uma

layer foi criada.

3. Nela, insira uma imagem por meio do menu Insert > Image.

4. Nesse caso, o ideal é inserir figuras do tipo JPEG ou GIF. Se prefe-

rir, você pode inserir as animações criadas com o Macromedia Flash:

Figura 13.1.

5. Para criar um efeito de movimento em sua imagem, selecione

a camada.

Tome cuidado para não selecionar apenas a imagem. Para sele-

cionar a camada é necessário dar um clique no canto superior es-

querdo da tela (quadradinho no canto superior esquerdo da layer).

6. Para movimentar a imagem, clique-a com o botão direito do

mouse. Use a opção Record Path.




7. Será exibida, logo abaixo da barra de propriedades da imagem,

a barra com a linha de tempo, conhecida como timeline, que permite

animar e criar efeitos de movimento em sua imagem:

Figura 13.2.

Caso a barra Timelines não esteja sendo visualizada, você pode

ativá-la com o menu Window > Timelines ou utilizando o atalho Alt

+ F9.

8. Dê um clique na alça da camada (quadradinho no canto supe-

rior-esquerdo) e arraste a imagem pela tela.

9. Automaticamente, o Dreamweaver cria um percurso na tela.

10. O Dreamweaver exibe uma caixa de mensagens informando

quais os atributos da camada que a timeline pode animar. Vai indicar

que os atributos como topo, largura, altura, valor de índice e visibilidade

podem ser animados em uma imagem e que as alterações efetuadas

na largura e na altura da imagem não provocam efeitos no Netscape.

Figura 13.3.



109Criando banners

11. Ative a opção AutoPlay existente na barra Timelines para que

a imagem seja executada ao abrir a página.

12. Ao testar a página com a tecla F12 você verá sua imagem sen-

do movimentada pela tela.

Sempre que quiser animar objetos do tipo imagem, você, inicial-

mente, deve inserir uma camada ( layer) e, dentro desta, a imagem;

sem ela, será impossível criar efeitos de movimentação.

Outra forma de animar objetos

1. Crie um documento em branco e salve-o com o nome de

anima.html.

2. Altere as propriedades da página com o menu Modify > Page

Properties.

3. Na opção Background image, escolha uma imagem usando o

botão Browse, que deve servir como fundo de página.

4. Crie uma pequena camada com o menu Insert > LayoutObjects > Layer.

5. Na barra de propriedades, dê um nome a essa camada e defina

as propriedades L (margem esquerda) como 364, T (margem supe-

rior) como 354, W (largura) como 64 e H (altura) como 61.

6. Ative a barra Timelines usando o menu Window > Timelines.

7. Para modificar a timeline da camada selecionada, siga o menu

Modify > Timeline > Add objects to timeline.

8. O Dreamweaver irá apresentar uma caixa de mensagens infor-

mando quais atributos da imagem podem ser alterados.


10.Automaticamente, o tempo é adicionado à timeline na primei-ra linha.




11. Ao arrastar o objeto (camada) para a timeline, esse objeto

aparecerá na linha de animação, na qual você pode soltar o mouse.

12. Caso uma nova camada seja inserida, o Dreamweaver coloca-

rá o objeto na linha seguinte ao canal de animação atual.

13. Dê um clique na primeira camada e insira uma imagem. Faça

o mesmo na segunda camada:

Figura 13.4.

14. Para controlar o tempo da imagem, dê um clique na barra

espessa presente na barra Timelines e arraste-a para a direita ou

para a esquerda até definir o tempo em que a imagem deve ser

apresentada.

Elementos da barra Timelines

Cada linha da barra Timelines é conhecida como um canal de ani-

mação, representando todos os elementos existentes em sua página.

Cada linha pode conter somente uma camada e cada timeline

pode receber apenas um nome. O painel Timelines pode controlar a

posição, a dimensão, a visibilidade e a ordem de empilhamento das

camadas de seu documento.

Sempre que um objeto for inserido em uma timeline, a imagemserá posicionada no quadro de número um, ou seja, a camada movi-

menta-se quadro a quadro no tempo definido por você.

A opção Fps indica o número de quadros por segundo que serão

exibidos em sua camada.

Cada quadro define o que deve acontecer com a imagem (cama-

da) na sua página. Um quadro define um ponto na animação, bem

como o seu tamanho e sua posição. Tais efeitos são chamados de

interpolação de valores, ou seja, o Dreamweaver cria valores neces-



111Criando banners

sários para cada quadro existente a fim de produzir o caminho que

a camada deve percorrer. Portanto, uma camada teria, sempre, um

quadro inicial e um quadro final, indicados por círculos abertos no

início e no final da barra de animação.

Ao selecionar a opção Loop no painel Timelines será adiconada aoúltimo quadro da camada uma ação que retorna a reprodução do mo-

vimento ao quadro um, iniciando, novamente, a apresentação do obje-

to como um loop que, ao chegar ao final, retorna ao ponto de início.

Posicionando objetos

Para criar uma animação de determinada imagem, podemos utili-

zar sua barra de propriedades. Veja como fazer:

1. Selecione a camada.

2. Dê um clique na barra Timelines, mais precisamente no quadro

em que deseja criar o movimento.

3. Dessa forma, você indicará o tempo desejado.

4. Na barra de propriedades da imagem, altere as margens do topo(T) e, a partir da esquerda (L), coloque valores diferentes dos iniciais.

5. Se quiser criar um efeito visual diferente, altere também as

propriedades de largura (W) e altura da imagem (H).

6. Salve o arquivo e teste a exibição de movimentação utilizando

a tecla F12 para visualizar seu navegador:

Figura 13.5.

Caso queira inserir alguns caracteres especiais como se fossem

botões, use o menu Insert > HTML > Special Characters:




Figura 13.6.

Controlando a exibição da imagem

Até agora, todas as imagens inseridas e animadas ficam “passean-

do” pela janela e isso pode ser um pouco desagradável depois de

alguns segundos de exibição. Portanto, é melhor controlar quando

deve ser iniciada e finalizada a exibição da animação. Observe:

1. Selecione a imagem.

2. Isso feito, crie duas áreas nas quais o usuário deve dar um

clique.

3. Na primeira área, o usuário deve ser levado à página informa-

da na opção de link, ao passo que na outra deve fechar a animação,

como se você trabalhasse com um banner.

4. Selecione uma das alternativas de mapeamento da imagem,

usando um dos botões da barra de propriedades (reto, circular ou

desenho livre).

5. Será apresentada uma área sombreada indicando o que está

sendo mapeado, ou seja, o local em que o usuário dará um clique

com o mouse para ativar determinada página (indicada na opçãoSrc).



113Criando banners

6. Na barra Properties, crie um link com a página cardapios.html

(opção Src).

7. Na opção Target, escolha _blank para que o link seja aberto em

uma nova janela (em branco):

Figura 13.7.

8. Pronto, a área foi mapeada. Assim que o usuário posicionar o

mouse na área indicada e der um clique, será levado à página indi-

cada. Portanto, ao mapear a área dentro da imagem, procure não

fazê-lo em um espaço pequeno, pois o usuário pode não saber o que

fazer com a imagem “dançando” pela tela.

Fechando o banner

Para parar a exibição do seu banner, é preciso criar uma nova

área dentro da camada, como se estivesse criando um botão. Obser-

ve as etapas seguintes para conseguir esse efeito:

1. Dê um clique na camada com a imagem.

2. Crie uma nova camada aninhada na camada atual por meio do

menu Insert > Layouts Objects > Layer.

3. Insira uma imagem com o botão Sair nesta camada.

4. Nesse caso, o usuário deve disparar uma ação de fechar o ban-

ner e não ativar uma página qualquer. Para que funcione corretamen-

te, adicione um evento como os utilizados em comportamentos.

5. Selecione a área mapeada com o botão Sair.




6. Use o menu Window > Behaviors para abrir o painel de com-

portamentos no lado direito de sua tela.

7. Pressione o sinal de adição (+), pois um novo comportamento

deve ser adicionado.

8. Clique na opção Show-Hide Layer.

9. Será apresentada uma caixa de diálogos indicando quais layers

estão ativadas no momento.

10. Caso não tenha fornecido um nome para a primeira camada,

automaticamente ela será nomeada como Layer1.

11. Indique a ação que deseja para essa layer, que, no caso, deve

ser oculta.


13. Nesse caso, a ação vai ocultar a camada que possui a ima-

gem, fechando a janela atual.

14. Um evento onMouseOver foi criado pelo Dreamweaver in-

dicando que a imagem será fechada quando o usuário “passar” o

mouse sobre o botão Sair.

15. Salve o arquivo e teste a sua página apertando a tecla F12.

Nesse caso, a imagem será fechada quando o usuário passar o

mouse sobre o botão. Porém, a ação que deve ser executada é o de-

saparecimento do banner quando o usuário der-lhe um clique, e nãoapenas “passar” sobre ele com o ponteiro do mouse.

Para corrigir esse ponto, dê um clique na janela Behaviors que

você acabou de criar. No comportamento onMouseOver, clique na

seta voltada para baixo a fim de trocar o comportamento.

Selecionar a opção OnClick fará com que a ação seja alterada

para o clique com o mouse.

Pronto, a partir de agora seu banner se movimenta sobre a tela e

você terá acesso às ações com um clique sobre a imagem. Ao clicar

sobre o botão Sair, o usuário fechará o banner.



115Editando códigos HTML

Editando códigos HTML

Até agora, criamos todo o design da página sem nos preocupar-mos com os códigos gerados pelo Dreamweaver. Muitas vezes, épreciso acessar o código HTML subjacente à página, o que propor-ciona maior controle das alterações e, também, uma tentativa maisefetiva quanto às soluções de alguns problemas da página.

Suponha que você tenha alterado a fonte de um determinadotexto, mas parte dele apresenta-se com a fonte não alterada. Pararesolver esse problema, é importante editar o código HTML e moversuas tags de forma que o texto permaneça dentro das tags de fonte.Observe:

<font><b> texto </b></font> selecionado

Nesse caso, indicamos que somente a palavra texto apareceráem negrito, pois as tags /b e /font fecham a execução dos caracte-res nesse estilo.

O Dreamweaver permite a visualização de códigos quando utiliza-mos o botão Code, da janela de documento:

Figura 14.1.

O código HTML e a janela de design são visualizadas simultanea-mente. Dessa forma, ao mover qualquer elemento da página, vocêobservará o que ocorre na janela de códigos, tornando-se fácil per-ceber as tags básicas, como por exemplo:




Tag inicial

<p align= >

<font color = “#FF9900”

<i>

<img src=”fi le:///C|/San-

dra/Desktop/LogosCinza.

GIF”width=”209”height=

”114”alt=”dolma”></body>

Tag final

</p>

</font>

</i>

</body>

Descrição

Faz o alinhamento do texto exis-tente dentro das tags.Altera a cor da fonte do textoexistente dentro da tags.Aplica itálico nos caracteres dastags.Insere a imagem LogosCinza.

gif, da pasta C:\Sandra, comlargura de 209 pixels e altura de114 pixels, e apresenta o texto

alternativo (alt) como dolma.

Tabela 14.1.

Ao longo do desenvolvimento de seu site, você perceberá as inú-meras tags existentes. Não se preocupe em decorá-las ou criar umalista de tais elementos.

Adicionar comentários em seu código

Imagine que você resolveu passar a administração de sua pági-na para outro desenvolvedor, sendo que este não conseguiu perce-ber quais problemas devem ser solucionados ou melhorados, con-siderando mais fácil reiniciar o desenvolvimento da página do queconsertá-la. Para prevenir esse tipo de situação, é possível inserircomentários, textos descritivos para transmitir a terceiros as infor-mações necessárias, tais como a mudança de determinada imagem,do endereço, e outros dados importantes. Observe:

1. Para inserir comentários, posicione o cursor no local que de-seja comentar.

2. Você poderá estar na visualização no modo Design ou no modoCode.

3. Pressione o botão Comment existente na barra Insert.

4. Digite o comentário necessário.




Figura 14.2.

Para exibir os marcadores de comentários, siga o menu View >Visual Aids > Invisible Elements.

Inserindo palavras–chave

Outro recurso interessante é inserir palavras-chave que facilitema pesquisa em sites de localização, como o Google por exemplo.Para tanto, faça o seguinte:

1. Ative a barra de inserção HTML:

Figura 14.3.

2. Clique no botão Head.

3. Selecione a opção Keywords.

4. Digite todas as palavras-chave necessárias.


Figura 14.4.

Inserindo descrições

Podemos entrar com uma definição para a página por meio dobotão Description, presente na barra de inserção HTML. Digite a

descrição de seu site e pressione o botão OK.




Figura 14.5.

Ajustando o posicionamento da janela

Com o código em HTML, você pode controlar o posicionamentodas janelas de seu site. Veja como fazer:

1. Visualize o documento.

2. Posicione o cursor sobre o link criado, ou seja, um texto quevocê digitou e no qual inseriu um link.

3. Veja a janela de códigos:

Figura 14.6.

4. Nela, Você encontrará o código:

<a href=”#” onClick=”MM _ openBrWindow(‘aulas.html’,

’defi nition’,

‘scrollbars=yes,width=300,height=100’)”>legumes

</a>.</font></p>

5. Logo após o parâmetro height (altura), digite uma vírgula,pois você acrescentará um parâmetro e, depois, o seguinte código:

screenX=0, screenY=0, top=0, left=0

Os parâmetros screenX e screenY são utilizados pelo Netscapee navegadores posteriores, posicionando a janela na parte superioresquerda da tela. Por outro lado, os parâmetros top e left são para

o navegador Internet Explorer, fazendo o mesmo que os parâmetros




screenX e screenY. Nesse caso, qualquer um dos navegadores uti-lizados pelo visitante posicionará a janela no canto superior esquer-do da tela.

Para perceber a diferença, teste sua página no navegador e, a

seguir, altere os parâmetros para 400 para ver a diferença de posi-cionamento da janela.

Seletores de tag

O seletor de tags permite que você acesse mais facilmente a hie-rarquia de tags HTML, podendo ser útil para selecionar um item de

forma mais rápida.Uma tag difícil de controlar é a de tabelas aninhadas, pois, muitas

vezes, selecionamos determinada tabela quando na verdade outraaninhada é que acaba sendo selecionada. Veja como utilizar o sele-tor de tags:

1. Veja o código HTML de sua página pressionando o botão Code.

2. Na barra de tags, você verá as tags criadas para o ponto emque seu cursor está dentro do código.

3. Dê um clique com o botão direito sobre a tag <meta> ou<head>.

4. Ative a opção Edit Tag:

Figura 14.7.

5. Rapidamente, o Dreamweaver vai exibir a tag selcionada emuma janela à parte, permitindo alterações:

Figura 14.8.




Tags rápidas

Tags rápidas nos auxiliam a inserir tags HTML com maior rapidez.Isso é bastante útil quando, por algum motivo, você conhece muito

bem os códigos HTML e resolve escrevê-los manualmente.Vejamos como inserir tags rápidas:

1. Posicione o cursor no ponto de inserção entre uma imagem eum texto.

2. Dê um clique no botão direito e use a opção Insert Tag. Seráaberta a seguinte janela:

Figura 14.9.

3. Escolha a opção HTML.

4. Escolha a tag que pretende inserir.

5. Pressione o botão Insert. Serão solicitadas algumas proprieda-des para inserir a tag.

6. Defina as propriedades e pressione OK.

Limpando tags vazias

Muitas vezes, criamos tags que contêm problemas, como redun-dância e o fato de serem vazias. O Dreamweaver pode limpar essas




tags para você, sendo altamente recomendável que, após a criaçãode seu site, seja executado esse comando a fim de não causar trans-tornos e lentidão em seu carregamento.

Para eliminar essas tags, siga o menu Commands > Clean Up

HTML. Aparecerá a seguinte caixa de diálogos:

Figura 14.10.

A partir de dois pontos de opções (Remove e Options), vejamosas características dessa caixa:

Opção

Empty container tags

Redundant nested tags

Non-DreamweaverHTML comments

Dreamweaver specialmarkup

Specific tag(s)

Descrição

Para remover tags vazias, como por exemplo tags

apresentadas como <b> </b>, não possuindoqualquer texto a deixar em negrito.Para remover tags redundantes. É útil quando setem um conjunto duplicado de tags dentro de ou-tro que produz o mesmo resultado, conhecidascomo tags duplicadas, como por exemplo <b>

<b> texto negrito </b> </b>.Para remover comentários em HTML que não

pertencem ao Dreamweaver. Faz com que todosos comentários inseridos pelo Dreamweaver sejam removidos.O Dreamweaver cria várias tags que não estão nopadrão do HTML, como <mm:libitem>, que indi-ca um item de biblioteca. Apenas o Dreamweaverreconhece essa marcação, os navegadores irãoignorá-la.Para remover tags específicas. Permite instruir o

Dreamweaver para que remova as tags digitadasna caixa de texto.




Opção

Combine nested <font>Tags when possible

Show log oncompletion

Descrição

Opção útil para combinar tags de <font> quando formatamos um texto com tags que podem ser

aninhadas.Opção útil para mostar o registro no sistema.Permite identificar os itens que o Dreamweavereliminou.

Tabela 14.2.

Se precissar, você pode importar todos os seus códigos para oMicrosoft Word. Basta utilizar o menu File > Import > Word Docu-

ment ou outro recurso que achar mais conveniente.



123Publicando seu site

Publicando seu site

Após testar todo o seu site para verificar possíveis erros em di-

ferentes navegadores, está na hora de colocá-lo no ar, ou seja, pu-

blicá-lo.

Para isso, é importante que você obedeça aos seguintes proce-

dimentos:

• Verifique o desempenho de cada página do site para ver se os

links e botões funcionam de forma correta;

• Visualize todas as páginas em vários tipos de navegadores e

plataformas diferentes, verificando todas as fontes e cores utilizadas

pela página;

• Verifique todos os links rompidos, ajustando-os;• Controle o tempo de download de todas as páginas e imagens

do site;

• Faça o maior número possível de relatórios.

Download de arquivos

Caso esteja trabalhando em um ambiente multi-usuários, utilize

os métodos de devoluções e retiradas para a transferência de arqui-

vos. Em sites remotos, é possível utilizar as opções Get Files e PutFiles para transferir arquivos.

O primeiro passo é contatar o provedor que vai hospedar o seu

site e verificar como é feito o gerenciamento. Normalmente, eles dis-

ponibilizarão login e senha para que você transfira e gerencie infor-

mações rapidamente.

Após contatar o provedor, faça o download e o upload de todos

os arquivos utilizados em suas páginas. Por isso, foi fundamental, no

ponto de partida, a criação de todas as páginas, imagens e botões

exatamente na mesma página, o que evita erros na hora de efetuar a

transferência de informações.

Para fazer o download de arquivos em servidores remotos, pro-

ceda da seguinte forma:

1. Use o painel de arquivos.

2. Selecione a opção Manage Sites.




Figura 15.1.

3. Na caixa Manage Sites, selecione o item desejado (O Chef em

casa).

4. Pressione o botão Edit.

5. Verifique as configurações do site remoto:

Figura 15.2.

6. Dê um clique na guia Advanced.

7. Ative a opçãoRemote Info

, que apresenta as informações dosite remoto.




Figura 15.3.

8. Informe o método de acesso, como, por exemplo, FTP.

9. Entre com as informações necessárias e presisone OK.

10. Clique no botão Done para fechar a janela de gerenciamento

de seu site.

11. No painel Files, utilize o botão Connects to remote host (Figu-

ra 15.4), para que seja aberta uma conexão com o servidor remoto.

Figura 15.4.

12. Se, anteriormente, uma conexão foi feita, o botão irá indicar

Disconnect from remote host. Ignore essa etapa.

13. Caso os arquivos remotos estejam visíveis no painel remoto,

ignore o botão Connect e pressione o botão Get Files.

14. Selecione os arquivos do download.

15. Pressione o botão Get Files (Figura 15.5).

Figura 15.5.




16. Para eftuar o download dos arquivos da página, clique no

botão Sim. Agora, se pretende ignorar esses arquivos, pressione o

botão Não.

17. Para evitar essa caixa de diálogos no próximo download, ativea opção Don´t show me this message again.

Efetuando o upload de arquivosem servidores remotos

Os comandos Put Files copiam os arquivos do site local para o

site remoto, sem alterar seus status de retirada. Esse processo é

conhecido como upload. Observe:

1. Selecione o arquivo com a primeira página.

2. No painel File, dê um clique no botão Connects to remote host.

3. Será aberta uma conexão com o servidor remoto.

4. Pressione o botão Put Files (Figura 15.6).

Figura 15.6.

5. Para arquivos dependentes, clique em Sim e será feito o upload.

Clique em Cancel, na caixa de diálogos Status, para interromper

a transferência de arquivos.

Sincronizando arquivos nos sites local e remoto

Após criar todos os arquivos (páginas) nos sites local e remoto, é

possível sincronizá-los. No caso do site remoto ser um servidor FTP,

a sincronização utilizará o FTP.

1. Para sincronizar arquivos ou pastas específicas no lugar de sin-

cronizar todo o site, selecione os arquivos ou as pastas desejadas no

painel Files.




2. Dê um clique com o botão direito do mouse em um dos ar-

quivos.

3. Clique na opção Synchronize.

4. Você verá a caixa de diálogos Synchronize Files:

Opção

Put newer files to remote

Get newer files from remote

Get and Put newer files

Descrição

Carrega todos os arquivos locais que tenham

datas de modificação mais recentes do que

os seus correspondentes remotos.

Efetua o download de todos os arquivos remo-

tos com datas de modificação mais recentes

do que as de seus correspondentes locais.

Coloca as versões mais recentes de todos os

arquivos nos sites remoto e local.

Tabela 15.1.

Figura 15.7.

5. Selecione a opção para o site inteiro.

6. Nesse caso, todo o site será sincronizado.

7. Se quiser sincronizar apenas os arquivos selecionados, use a

opção Selected Local Files Only.

8. Na opção Direction, defina uma direção para a cópia dos arqui-vos. (veja a Tabela 15.1).

9. Pressione Preview para visualizar a sincronização.

Veja, a seguir, as possíveis direções para as cópias dos arquivos.




Registrando todas as transferências

O Dreamweaver nos permite registrar todas as atividades de

transferência de arquivos com FTP. Caso ocorra um erro durante a

transferência de arquivos, o registro (FTP Log) do site irá auxiliá-lo afim de determinar qual foi o problema.

Para exibir o registro, use o painel Results por meio do menu

Window > Results ou da tecla F7 e ative a opção FTP Log:

Figura 15.8.

Treinamento Prático em Dream Waver

Documents

Transcript of Treinamento Prático em Dream Waver