ESCOLA

Web II

Web II

Escola Alcides Maya - Segundo Mdulo

1 MACROMEDIA FIREWORKS MX 1.1 Desenho vetorial e imagem bitmap

Web II

Antes de iniciar a aprendizagem sobre o software deste mdulo, precisamos falar sobre desenho vetorial e imagem bitmap. Em computao grfica, principalmente com softwares de desktop publishing, trabalha-se com esses dois tipos de imagem. O desenho vetorial obtido atravs de formas geomtricas. Usando o ambiente de trabalho do programa, o artista usa pontos fixos, conhecidos como ns e linhas retas e curvas. O artista cria um desenho atravs de objetos. Com um pouco de pacincia e um software de desenho vetorial, pode-se moldar as formas do desenho at que ele fique como se quer. A base para esse tipo de desenho as curvas de Bzier, que o sistema usado por vrios softwares como Corel Draw, Freehand, Fireworks, Flash, Illustrator e vrios outros. Com esse sistema, o usurio marca pontos na tela e traa linhas entre esses mesmos pontos. O resultado que assim, o desenho ocupa um espao bastante reduzido na hora de armazenar e permite o redesenho de qualquer estgio do processo criativo. J a imagem bitmap usada para reproduo de imagens como fotografias. Dependendo do tipo de imagem bitmap, a qualidade e a quantidade de cores pode ser melhor ou pior. No caso de utilizao de uma imagem desse tipo para uma revista, por exemplo, sua resoluo deve ser no mnimo de 300dpi, enquanto para a web no precisa passar de 72dpi. Quanto maior for a quantidade de pontos por polegada (dpi), maior ser a qualidade da imagem na hora de reproduo, mas uma imagem que ser impressa na tela, como uma foto num website, no precisa de qualidade de impresso. Por isso as diferenas entre dpi entre os tipos de imagem. Para publicao em revistas e jornais, extenses como TIF e EPS so muito utilizadas, enquanto para web, JPG ou GIF so as principais.

1.2 Interface do Fireworks

A interface do Macromedia Fireworks MX difere pouco dos outros softwares de autoria da empresa. Menu principal, barra de ferramentas e opes na esquerda, painis na direita e propriedades na rea inferior. Assim que o programa aberto, necessrio ter um arquivo na rea de edio para iniciar o trabalho. Ou abrimos um arquivo j existente, ou criamos um novo arquivo. Crie um arquivo novo levando o ponteiro do mouse at ARQUIVO>NOVO.

Escola Alcides Maya - Segundo Mdulo

Requisitando um arquivo novo, abre-se uma caixa de dilogo onde definimos a largura, altura do arquivo e resoluo do documento. Na rea inferior, o operador define a cor do fundo do arquivo. Pegue um formato 780X380 pxels. Depois de definir como ser o arquivo, clique em OK.

A interface do Macromedia Fireworks vai aparecer como na imagem: Se preferir, maximize a imagem.

Na Barra de ferramentas, todas esto distribudas em sees. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcaes para web, paletas de cores e exibio.

Web II

1.3 Barra de ferramentas

Na barra de ferramentas esto todas as ferramentas de edio. Atravs destas ferramentas voc poder desenhar vetoriais e editar imagens bitmap.

A interface do Macromedia Fireworks vai aparecer como na imagem: Se preferir, maximize a imagem.

Na Barra de ferramentas, todas esto distribudas em sees. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcaes para web, paletas de cores e exibio. Na barra de ferramentas esto todas as ferramentas de edio. Atravs destas ferramentas voc poder desenhar vetoriais e editar imagens bitmap.
Seta preta seleciona um objeto. Seta branca seleciona um objeto. Permite manipula

Dimensionar tamanho e forma do objeto Cortar altera largura e altura da tela de pintura

Escola Alcides Maya - Segundo Mdulo

Seleo de bitmap, com retngulos, crculos, polgonos e mo-livre. Seleo atravs de tolerncia de cores e ferramenta pincel Ferramenta lpis e ferramenta borracha Ferramentas de manipulao de imagem e carimbo Ferramenta conta-gotas e Balde de tinta.

Ferramenta linha e ferramenta de desenho em curvas de bzier. Ferramenta retngulo/elipse/polgono. Ferramenta texto. Ferramenta de manipulao de ns. Ferramenta faca.

Ferramenta ponto ativo. Ferramenta Fatia Ocultar / mostrar pontos ativos e fatias

Paleta de cor do trao Paleta de cor do preenchimento Definies de trao e preenchimento

Modos de exibio Ferramenta mo. Ferramenta Zoom

1.3.1 Visualizaes
Toda a edio feita no modo ORIGINAL. Na aba VISUALIZAO, o operador ter uma viso de como ficar o documento quando publicado na web. A seguir, temos as abas para 2 PARA CIMA E 4 PARA CIMA, ambos permitem que o operador edite sua arte enquanto visualiza a prvia do que ser o documento em edio. Para utilizar o modo quatro PARA CIMA, necessrio um computador bastante rpido, porque para cada edio no ORIGINAL, ele far trs prvias de como o arquivo pode ser exportado no final do processo.

1.4 Organizao e alinhamento

Quando estiver fazendo uma ilustrao ou layout, nem sempre voc ir criar tudo na ordem que precisa. Normalmente necessrio passar um objeto para frente de outro, por exemplo. Como o ltimo objeto desenhado sempre fica sobre os anteriores, a organizao dos objetos muito importante. Crie alguns quadrilteros e elipses, levemente sobrepostos. Depois escolha um objeto que est no fundo e escolha no menu principal MODIFICAR>ORGANIZAR>TRAZER PARA FRENTE

Web II

O objeto vai passar do fundo para a frente de todos os objetos que voc desenhou. As opes de organizao so:

Para frente de todos os objetos Para frente de um objeto Para trs de todos os objetos Para trs de um objeto
Para alinhar objetos voc precisa ter no mnimo uma seleo contendo dois deles. Depois da seleo, acione o menu principal como indicado na prxima imagem: Alm dos alinhamentos dos objetos esquerda, centralizado vertical, direita, superior, centralizado horizontal, centralizado inferior, ainda possvel definir as larguras e/ou alturas, isto , deixar o espaamento entre os objetos rigorosamente iguais.

1.5 Desenho bsico

O Fireworks um software com muitas possibilidades para criao de um desenho. O bsico da utilizao destes softwares so formas geomtricas como quadrados, crculos, retngulos, elipses, tringulos, pentgonos, hexgonos, estrelas e etc. Esses objetos so encontrados todos na mesma ferramenta, conforme ilustrao. Para desenhar cantos arredondados, basta usar as setas do teclado (seta para cima, seta para baixo). Conforme pressionar as setas, a curvatura aumenta ou diminui.

Escola Alcides Maya - Segundo Mdulo

No caso dos polgonos, a barra de propriedades mostra as opes como quantidade de lados e ngulos para o objeto.

As principais ferramentas de desenho do fireworks so curvas de bzier, principalmente a ferramenta Caneta. Com a ferramenta Caneta, o operador distribui ns e linhas elsticas(curvas de Bzier).

Cada clique do mouse, criado um novo n, que pode ser editado posteriormente atravs das ferramentas de seleo.

Para desenhar segmentos de traado curvo, clique e arrastar durante o ponteiro do mouse sobre a tela. Durante o desenho, o ponto atual mostra alas. Foque sua ateno na linha da sua ilustrao sem perder de vista as alas. No importa se a ilustrao est sendo produzida com a ferramenta Caneta ou com outra ferramenta de desenho do Fireworks, todos os pontos de todos os objetos vetoriais possuem alas de ponto. No entanto, essas alas apenas so visveis nos pontos curvos. Para curvar uma linha reta. Use a ferramenta caneta sobre a linha.

Desenhando com a ferramenta Caneta:

Web II
Selecionar a ferramenta Caneta. Clicar para colocar o primeiro ponto de canto. Mover o local do prximo ponto e, em seguida, clicar e arrastar para elaborar um ponto de curva. Toda vez que clicar e arrastar o mouse, o Fireworks estende o segmento de linha para o novo ponto. Continuar plotando pontos. Se um novo ponto for clicado e arrastado, ser elaborado um ponto de curva, se for apenas clicado, ser produzido um ponto de canto.

Seguir um destes procedimentos para finalizar o traado, aberto ou fechado: o Clicar duas vezes no ltimo ponto para terminar o traado como aberto. o Escolher uma outra ferramenta para termin-lo como um traado aberto. Quando selecionar algumas ferramentas e depois retornar ferramenta Caneta, seu prximo clique continuar com o desenho do objeto. o Clicar no primeiro ponto aplicado na tela para fechar o traado. Os pontos inicial e final de um traado fechado so o mesmo ponto.

1.6 Tamanho da imagem e tamanho da tela

O tamanho da imagem e tamanho da tela so coisas diferentes. Tamanho da imagem se refere ao tamanho em pixels para altura e largura da imagem e sua relao com a resoluo da imagem. Tamanho da tela o formato em pixels da largura e da altura da imagem. Quando se inicia um projeto novo, a primeira coisa que o operador define o tamanho da imagem em conjunto da resoluo. Para o ambiente web, necessrio trabalhar com a menor resoluo de imagem possvel, porque quanto maior a resoluo, mais espao em disco e maior tempo so exigidos para sua visualizao.

O tamanho da imagem sempre vem cadeado, para manter a proporo do original. Liberando o item limitar propores, se pode aumentar ou diminuir a imagem somente na vertical ou horizontal, mas o seu contedo tambm ser distorcido.

Escola Alcides Maya - Segundo Mdulo

tamanho da tela no interfere com o contedo da imagem, apenas na largura e altura da mesma. Atravs da ncora, possvel indicar a direo que essa altura e largura ser editada. A marcao na imagem indica que ir ocorrer uma modificao do centro para fora. Se o marcador estiver na primeira ncora da esquerda, significa que a alterao ser vista no lado contrrio.

1.7 Texto
Criar texto no Fireworks muito parecido com qualquer outro editor de texto existente. Vale lembrar que a funo primria do programa criar imagens para o layout do website, portanto, textos muito grandes e fontes muito pequenas no so recomendados. 1. Acione a ferramenta texto 2. Clique sobre a tela. 3. escreva Depois de escrever, voc pode mudar as propriedades de texto usando a barra de propriedades. 1. Selecione o texto com a seta preta 2. Modifique as propriedades do texto

As opes da barra de propriedade modificam o bloco de texto digitado. Negrito, Itlico, Sublinhado, largura da letra, altura, separao entre linhas, orientao do texto, alinhamento e etc.

1.8 Smbolos parte 1

Para mover ilustraes em grupo e guardar o original no Fireworks, necessrio trabalhar com Smbolos. Smbolos so objetos que esto ligados a uma biblioteca. como uma matriz onde se pode puxar tantos smbolos iguais quantos forem necessrios. Vamos criar um logotipo que exige um desenho mais tcnico, para depois converter em smbolo.

1.8.1 Smbolo Grfico

1. Acionar grade

10

Web II

Mude as configuraes para uma cor neutra e mantenha a distncia entre as linhas da grade iguais. Marque mostrar grade e encaixar na grade.

A aparncia da sua rea de trabalho vai ficar parecida com a da figura.

Mude o esquema de cores para os objetos que sero desenhados. Linha com cor preta, preenchimento nulo.

11

Escola Alcides Maya - Segundo Mdulo

Com a ferramenta Elipse, tente copiar o exemplo.

Com a ferramenta linha, finalizar a estrutura. Em Exibir Grade, desative a visualizao e encaixar. Criar o lettering.

Essa ilustrao construda em vetores composta de vrios objetos diferentes. Transportar esse conjunto de objetos de um lado para outro seria muito complicado se no tivssemos os smbolos. Selecione todos os objetos Modificar>Smbolo>Converter em Smbolo

Escolha um nome para o futuro grfico e clique em ok.

12

Web II

Depois da converso em smbolo a ilustrao vai parecer diferente. Quando estiver selecionada, apresentar um pontilhado e no canto inferior esquerdo aparece um smbolo.

Para editar qualquer elemento da ilustrao, necessrio acionar uma rea especfica. Para mudar a cor, fonte ou outra coisa, d um duplo clique sobre o smbolo grfico. Isso abrir o ambiente citado. Para saber se est ou no na rea de edio, faa um teste. Observe se o Smbolo:Logotipo aparece no topo do programa. Para editar: 1. Duplo clique sobre o smbolo 2. Verifique se o nome do ambiente mudou como no exemplo:

Para sair do ambiente de edio do smbolo basta fechar como se estivesse fechando um arquivo. Todos os smbolos ficam guardados numa ferramenta chamada Biblioteca. Cada documento pode armazenar vrios smbolos em suas bibliotecas, que podem ser compartilhados entre diferentes documentos. Janela>Biblioteca

13

Escola Alcides Maya - Segundo Mdulo

1.9 Smbolos - parte 2

1.9.1 Smbolo boto
Smbolo boto usado para criar vnculos com outros documentos, por exemplo. Vamos criar um boto que servir de base para criar um menu em lio posterior. J que comeamos criando um logotipo de uma empresa de turismo, vamos continuar no mesmo assunto. Quando se define um menu, sempre melhor planejar quais so os rtulos que cada um desses botes tero. Exemplo: Empresa Promoes Roteiros Notcias Contato Neste caso, a matriz desse menu ser Promoes, porque a palavra que tem o maior nmero de caracteres. Como base desse boto que iremos criar, usaremos um retngulo. Desenhar um retngulo. Escolher a fonte, tamanho, cor, alinhamento. Se possvel, alinhar centralizado. Crie o layout do seu boto preferencialmente do tamanho que ser utilizado.

Ampliao em 300% Selecione o retngulo e a palavra ao mesmo tempo e converta em Smbolo Boto.

14

Web II

Uma vez convertido, o boto j pode ser utilizado como tal. A aparncia semelhante a do smbolo grfico. O boto mostra sempre uma rea verde com linhas vermelhas. Elas so parte do fatiamento que a exportao do arquivo exige. Noutra lio veremos mais profundamente o que o fatiamento.

Se a mancha estiver atrapalhando o seu trabalho, voc pode ligar ou desligar a visualizao clicando no boto branco. Para voltar a visualizar, basta clicar novamente no boto com as cores vermelha e verde.

Agora crie as outras faces do boto, como por exemplo, uma pequena diferena de cor quando o ponteiro do mouse passar por cima do boto. Duplo clique sobre o boto recm criado e voc entra na rea de edio, conforme a imagem.

As abas Acima, Sobre e Abaixo que aparecem agora e o nome do smbolo na barra superior indicam que voc est na rea de edio do smbolo boto. A aba Acima contm os elementos do boto em posio de descanso. Passar para a aba Sobre

15

Essa aba ainda est vazia, para criar os elementos necessrios clique no boto COPIAR GRFICO ACIMA. As ilustraes que aparecem agora so cpias da aba anterior. Troque as cores para causar o efeito desejado quando o ponteiro do mouse estiver sobre o boto.

Escola Alcides Maya - Segundo Mdulo

Para encerrar esta rea de edio, basta fechar, como fizemos na edio de smbolo grfico.

1.10 Comportamentos
Os comportamentos so instrues em javascript que uma vez inseridas na arte, sero transferidas para o documento html na finalizao do processo. Nesta lio veremos como a aplicao desses comportamentos no layout. Exemplo, criar um efeito de permuta de imagem. Quando o ponteiro do mouse passar sobre o boto, a imagem ser trocada. 1. Criar um boto para este exerccio. 2. Criar polgono qualquer ao lado do boto.

Usar a ferramenta fatia para criar uma rea sobre o polgono

Abra o painel de camadas

16

Web II

O painel de camadas aparece j com a marcao MOLDURA 1. Esse o local onde voc est trabalhando. Molduras so planos diferentes que um layout pode ter. Conforme a moldura, temos um ou outro grupo de objetos aparecendo. Agora voc est com dois objetos na Moldura 1. 1. Criar nova moldura.

Se no ocorrer automaticamente, mudar para Moldura 2

Na moldura 2, voc s v imagens que esto no arquivo, mas noutro nvel. Por isso voc s poder visualizar o estgio sobre do boto que voc criou. Desenhar um outro polgono na moldura 2

Selecionar o boto.

17

Observe que ao selecionar o smbolo, aparece um alvo no centro dele. Esse alvo ser usado para ligar o boto ao objeto polgono. Clicar sobre alvo e arrastar at a fatia criada pelo operador

Escola Alcides Maya - Segundo Mdulo

Caso no esteja, marque MOLDURA 2 Retornar para MOLDURA 1

Para testar o comportamento aplicado, desligue a visualizao das fatias passe para a aba VISUALIZAO. Depois de alguns momentos, voc ver como ficar o efeito na web.

1.11 camadas
Camadas permitem uma edio mais eficiente da ilustrao que est sendo criada. O operador pode facilmente cadear vrios objetos, permitindo assim editar apenas um elemento. Cada camada pode ter nome personalizado. Para a realizao desse exemplo, vamos trabalhar apenas com desenhos simples. Noutra lio faremos um layout mais complicado. Abrir painel de Camadas Janela >Camadas Crie um retngulo conforme exemplo.

No painel de camadas, voc v a CAMADA DA WEB e CAMADA 1, onde dentro dessa camada existe um elemento retngulo. Essa a hierarquia do arquivo atual.

18

Desenhar outro grfico.

Web II

Observe que o novo grfico pertence a mesma camada, porm ocupa outra posio dentro da hierarquia. Observe tambm que no painel de camadas, existe uma miniatura para ajudar o operador quanto posio, cor e forma dos elementos. Inserir nova camada

Desenhar outro polgono na camada 2.

Observe as camadas.

19

Escola Alcides Maya - Segundo Mdulo

A pasta indica camada. O sinal de indica que a camada pode ser fechada O sinal de + indica que a camada pode ser expandida O smbolo do olho indica que a camada ou objeto da camada est visvel Por definio padro, a opacidade de uma camada 100%. Atravs de arraste, um objeto pode ser transferido de uma para outra camada e uma camada pode trocar de lugar dentro da hierarquia do layout que est sendo produzido.

1.12 Bitmap no Fireworks

Imagens bitmap so imagens que no possuem vetor. Sua visualizao se baseia na cor de um conjunto de pixels. Sua qualidade pode ser medida atravs da quantidade desses pixels por polegada e seu tamanho em largura e altura. O Fireworks no um software para manipulao de imagem, mas pode criar alguns efeitos interessantes. Armazene algumas imagens na sua pasta. Abra uma dessas imagens.

1.12.1 Ajuste
Para ajustar o tamanho da imagem, use a ferramenta Cortar. 1. Abrir uma rea com a ferramenta Cortar 2. Ajustar tamanho usando as alas 3. Duplo clique dentro da rea para recorte

20

1.12.2 Seleo
A seleo de uma figura diferente da seleo de objetos vetoriais. Uma imagem bitmap pode ser selecionada em parte. A rea selecionada pode sofrer alteraes, enquanto a rea fora da seleo permanece inalterada. A seleo pode ser retangular ou elptica.

Web II

Uma rea selecionada representada graficamente por um recorte sobre a figura.

Para acrescentar mais uma parte selecionada use a tecla shift enquanto est criando a nova seleo Para retirar uma rea selecionada, faa o mesmo procedimento com a tecla ALT pressionada. Uma seleo mais detalhada, como por exemplo, recortar apenas uma das pessoas na foto, use a ferramenta lao. O lao polgono desenhado ponto por ponto, enquanto o lao depende unicamente da habilidade do usurio com o mouse.

Ferramenta pincel. Desenho em modo bitmap com vrias opes de efeitos.

Ferramenta lpis. Desenho em modo bitmap.

Ferramenta Borracha.

21

Escola Alcides Maya - Segundo Mdulo

Clicando e mantendo o boto da esquerda pressionado, o usurio tem acesso as outras ferramentas. Imagem original Ferramenta Embaar

Ferramenta Nitidez

Ferramenta Escurecer

Ferramenta Manchar

22

Web II

Ferramenta Carimbo. Duplica os pixels de acordo com a distncia determinada pelo usurio. O operador marca origem e local de aplicao atravs do mouse e da tecla ALT.

Dentro de filtros o usurio pode realizar manipulaes nos bitmaps. Os ajustes de cor podem ser usados para mudar o brilho, contraste e a paleta de cores da foto como um todo. Programas como Eye Candy e Alien Skin so includos dentro do Fireworks, aumentando as opes de alterao nas imagens.

23

1.13 Layout

Escola Alcides Maya - Segundo Mdulo

Nesta lio vamos criar um layout de um cliente hipottico. 1. Criar novo documento com as dimenses 780x380pixels 2. Use JANELA>BIBLIOTECA, abra o menu desta janela e acione IMPORTAR SMBOLOS para trazer o smbolo do logotipo que foi criado anteriormente.

Por arraste, traga o logotipo da biblioteca para o layout. Feche a janela Biblioteca. Ajuste o tamanho do logotipo no layout.

Renomear a CAMADA 1 para LOGOTIPO. Logo depois, Cadear a camada conforme exemplo. Essa camada est protegida. Nenhum objeto pode ser selecionado, nem apagado diretamente na rea do layout

Crie nova camada. Renomear como Fundo. Desenhe um retngulo e ajuste seu tamanho conforme o exemplo. Como essa camada foi criada depois da camada logotipo, ela aparecer sobre a primeira, portanto, cobrir o logotipo. No esquea de trocar a ordem das camadas.

Na mesma camada, crie um retngulo com os cantos arredondados e ajuste na tela conforme o exemplo. Para melhor compreenso, a magnificao da tela est maior.

Ainda na camada Fundo, crie outro retngulo com cantos arredondados para servir de base ao menu.

24

Web II

Crie uma nova camada chamada Menu Considere que os links deste site sero: empresa, promoes, roteiros, notcias, contato. O link com maior nmero de caracteres PROMOES. Este ser a matriz dos botes que sero criados. O texto dever ter alinhamento centralizado.

Converta em boto e entre na rea de edio do smbolo.

Faa o SOBRE conforme lio anterior. Duplique o boto usando a propriedade e arraste com ALT.

Na Barra de propriedades, troque os textos dos botes em TEXTO

25

Escola Alcides Maya - Segundo Mdulo

Crie outra camada para fazer o preenchimento da rea que ficou em branco.

Com o layout pronto, temos que analisar como ser a navegao deste site. Primeiro, observe que o globo colocado na rea da capa pode servir como plano de fundo, mas seria estranho repetir aquela imagem cortada. Precisamos ento uma rea maior no sentido vertical para poder usar essa imagem como background. Aumente a tela de pintura o suficiente para poder ver o globo como no exemplo. Alinhe e distribua os botes do menu. Agora o layout est pronto para a prxima etapa.

1.14 Fatiamento, otimizao e exportao

Atravs do fatiamento preparamos as imagens do projeto para a exportao. Use a ferramenta fatia para preparar os cortes.

26

Web II

Cada layout ter um fatiamento diferente.

1.14.1 Exportao
Exportao a tarefa de transformar o contedo criado no Fireworks em contedo para o Dreamweaver. A imagem PNG que foi criada at aqui ser preservada, porm a exportao ir gerar uma srie de imagens bitmap, cdigos escritos em Javascript e os documentos html necessrios para o projeto. 1. Selecione a ferramenta REA DE EXPORTAO Selecione a rea conforme exemplo

Duplo clique sobre a rea selecionada. Isso abre um quadro de dilogo.

Mude o nmero de cores para um nmero mais baixo. Neste exemplo 32 cores so suficientes.

27

Escola Alcides Maya - Segundo Mdulo

Clique em exportar e espere a nova caixa de dilogo abrir.

Agora os arquivos devem receber nome e um local de depsito.

Essa rea que ser exportada se chamar topo. No preciso escrever a extenso do arquivo. Basta escolher os parmetros conforme a necessidade do usurio. No esquea de manter INCLUIR REAS SEM FATIA e COLOCAR AS IMAGENS NA SUBPASTA. Assim, as imagens no ficaro misturadas com os arquivos HTML do projeto.

Repita a operao com as seguintes selees:

28

Web II

A seleo com o logotipo deve ser exportado apenas como imagem. Sem html. D um nome como fundo.Gif por exemplo.

1.15 Menu pop-up

Crie um boto ou uma fatia Menu principal MODIFICAR>MENU POP UP>ADICIONAR MENU POP UP. Vai aparecer a seguinte tela

Preencha os endereos, se for o caso, tambm identifique o destino

Escolha a aparncia dos botes que sero criados.

29

Escola Alcides Maya - Segundo Mdulo

Se precisar, altere a aparncia atravs da aba avanada. Determine a posio que o menu vai ficar na apresentao final.

Clique em Concludo. O Fireworks produzir o menu pop up conforme suas especificaes.

O menu pop up aparece como uma marcao, que pode ser movido com o mouse, permitindo o ajuste de sua posio se necessrio. Para visualizar o menu, necessrio fazer uma prvia do que ser o arquivo finalizado. Pode usar ARQUIVO>VISUALIZAR NO NAVEGADOR ou acionar pela tecla de atalho F12.

30

2 MACROMEDIA DREAMWEAVER MX
2.1 Apresentao e Interface

Web II

O Dreamweaver um programa de autoria para Web. Ele incrementa a velocidade a de produo porque o usurio v o que est programando e viceversa. Ao iniciar o software, o usurio tem uma viso da rea de trabalho, com uma pgina em branco e os painis de controle. Todos os painis no Dreamweaver so mveis, o que facilita muito o trabalho.

A seguir veremos as partes da interface do dreamweaver. Menu principal

Ferramentas

Atalhos para criar novo, abrir, salvar, salvar tudo, recortar, copiar, colar, desfazer e refazer.

Cdigo, cdigo e layout, layout, Live Data, ttulo do documento, gerenciamento, depurao,

Arquivo em uso e/ou lista de arquivos abertos

Inspetor de propriedades. Esse painel dinmico. Conforme a ferramenta em utilizao, o inspetor muda seus campos.

31

Escola Alcides Maya - Segundo Mdulo

Os painis abrem e fecham clicando no smbolo triangular ao lado do nome. O mais importante para este mdulo o painel de arquivos do site, conforme mostra o exemplo. Neste painel, o usurio tem a viso da sua pasta raiz local, essencial para o desenvolvimento de um projeto para o ambiente web. Funes como download e upload de arquivos, fazem parte deste painel.

2.2 Pasta Raiz Local

Atravs da Pasta Raiz Local, o operador determina qual a pasta que guardar todos os arquivos de um projeto de site. Considerando o mdulo anterior, usaremos os arquivos construdos no Fireworks para ser montado no dreamweaver. 1. Menu principal SITE>NOVO SITE

Preencha os campos, indicando o nome para o projeto e a pasta onde os arquivos sero criados.

32

Web II

Confirme e aguarde o aviso

Confirme e aguarde. A pasta raiz local que ir se apresentar, mostra o que tem dentro da pasta escolhida.

Todos os arquivos que fazem parte do projeto devero ser salvos nesta pasta. Arquivos que no estiverem na pasta raiz local, sero ignorados na hora de fazer o upload.

2.3 Ambientes de trabalho

Apenas cdigo

33

Escola Alcides Maya - Segundo Mdulo

Neste modo, o usurio pode trabalhar no Dreamweaver digitando o cdigo de forma direta. A vantagem que como editor, existe diferena de cores para o que pertence s TAGs e o que ser impresso na tela do navegador. O cdigo apresentado o padro na criao de pginas bsicas com linguagem HTML. Cdigo e Layout

Na visualizao de cdigo e layout, tanto faz se o operador escrever o cdigo ou desenvolver o layout. Finalmente temos a visualizao do layout. Sem cdigos, o operador usa a tecnologia WYSIWYG, que uma sigla para O QUE VOC V O QUE VOC TEM. As informaes impressas na tela do navegador sero o que o operador fizer neste ambiente.

2.4 Montagem de layout criado no Fireworks

Considerando os arquivos criados no mdulo Fireworks e a pasta raiz local para este mdulo, antes de fazer a montagem, voc precisa trazer uma cpia daqueles arquivos para dentro deste diretrio, conforme o exemplo.

34

Web II
A pasta imagens contm as imagens dos botes e cabealho, tal qual foram criadas no Fireworks. Neste exemplo, temos ainda a pasta imagens_site, que contm imagens importadas de outros lugares para o site, e ainda uma pasta produo, que contm os arquivos PNG. S para lembrar, os arquivos PNG so os arquivos originais do seu layout, quando estava trabalhando no Fireworks. Outros arquivos, como os temporrios por exemplo, aparecem e desaparecem da pasta raiz local. Esses arquivos so na maioria criados pelo prprio dreamweaver, deletando-os automaticamente quando no forem necessrios. Agora, vamos juntar as partes criadas no Fireworks, usando o dreamweaver. Crie um arquivo novo. ARQUIVO>NOVO

Marque as opes para a criao do documento

Uma vez criado o documento, clique em MOLDURAS e depois observe o formato apresentado para cada layout. Neste exemplo, usaremos o padro molduras superior e esquerda aninhada.

Em ARQUIVO>ABRIR NA MOLDURA, escolha o cabealho.htm. Isso substituir o arquivo em branco pelo arquivo que foi criado previamente no Fireworks. O mesmo com menu. Salve o documento em branco como capa.htm.

35

 normal que as molduras paream desajustadas, como no exemplo:

Escola Alcides Maya - Segundo Mdulo

Ajuste as divisrias da moldura usando o ponteiro do mouse, atravs da propriedade de arraste. As molduras aparecem com o contedo deslocado, para que isso seja eliminado, necessrio um ajuste nas propriedades da pgina. Menu principal Propriedades da pgina>Propriedades da seleo. Ajuste as margens com o valor 0

O resultado que as tabelas ficaro alinhadas pelas paredes da moldura, sem espao sobrando.

36

Web II

Marque a divisria e no menu principal em ARQUIVO>SALVAR O CONJUNTO DE MOLDURAS, salve o arquivo como index.htm O cabealho tem que ser preenchido at o final com a cor do fundo. Essa cor no pode ser interrompida pela resoluo diferente de um usurio. Para que isso ocorra, siga o procedimento. Menu principal, MODIFICAR>PROPRIEDADES DA PGINA Troque a cor do fundo e confirme

Dica: sempre que realizar alguma modificao,salve e teste no navegador usando o atalho F12. Agora vamos colocar o fundo no arquivo capa.htm. 1. Clique no documento capa.htm 2. Neste caso especfico, a imagem tem mais peso do lado direito, neste caso, a nica forma de alinhar uma imagem pela direita usando uma tabela. Passe para a aba comuns. Observe o Inspetor de propriedades. As opes de edio da tabela e seu alinhamento podem ser editados neste painel.

37

Escola Alcides Maya - Segundo Mdulo

Insira uma tabela com 1 linha por 1 coluna, largura 550 pixels, borda 0, preenchimentos 0. Para isso, use o boto inserir tabela. Na barra de propriedades, altere a altura para 100% Alinhamento pela direita. No campo Fundo, coloque o caminho para a imagem de fundo criada no Fireworks. O resultado final a front page de um website montada. Na prxima lio vamos criar os contedos de cada boto do menu.

Com o layout construdo, agora precisamos criar os contedos para cada boto. No planejamento, temos os seguintes botes: Empresa, promoes, roteiros, notcias e contato. Cada link ser um documento de HTML que ser acionado pelo boto e aparecer na janela principal do layout.

38

Vamos primeiro criar um arquivo novo. Menu principal ARQUIVO>NOVO. Salve o arquivo como empresa.htm

Web II

Quando iniciar um layout, lembre-se de que o padro de um documento HTML comear no canto superior esquerdo do navegador. Portanto, no dreamweaver acontece o mesmo. Para comear um layout, precisamos ento recorrer ao uso de tabelas, que ajudam a formatar o documento. O que vamos produzir simples, foto de um lado, texto do outro, texto embaixo ocupando o espao de duas clulas. Primeiro, insira uma tabela usando o boto inserir tabela no menu comuns.

A tabela pode ficar com duas linhas e duas colunas. A largura pode ficar com 600 pixels e para que os elementos no fiquem grudados na parede da clula, coloque um espaamento de 5 pixels. O resultado obtido ser uma tabela vazia, onde o pontilhado identifica a tabela, mas no mostra as divisrias no navegador.

Capture uma imagem na web para servir de contedo. Insira a imagem atravs do boto inserir imagem. Traga a imagem na primeira clula da tabela.

39

Escola Alcides Maya - Segundo Mdulo

Se precisar redimensionar a foto, use o boto SHIFT pressionado e as alas de redimensionamento que aparecem na imagem quando as mesmas so selecionadas.

A aparncia final dever ser como no exemplo:

Escreva um texto qualquer na clula 2 e observe que este aparece no meio da clula, alinhado pela esquerda. Isso acontece porque todo o alinhamento ocorre pela clula com maior objeto. No caso a foto. Mude o alinhamento para o topo com o seguinte procedimento: Por dentro das clulas, faa a seleo por arraste.

Mude o alinhamento no inspetor de propriedades.

40

Web II

O resultado o seguinte:

Selecionando o texto como em qualquer editor de texto, troque o tipo, tamanho e estilo

Use para o ttulo Verdana, tamanho 4, cor vermelha e negrito.

Para criar separao de pargrafos, use ENTER. Para criar quebra de linha, use SHIFT+ENTER. Obs.: Um pargrafo pode conter textos com quebra de linha. Faa um texto conforme o modelo, usando fonte verdana e tamanho 2.

41

Escola Alcides Maya - Segundo Mdulo

Selecione as duas clulas de baixo:

Mescle as duas clulas usando a ferramenta indicada:

Resultado:

Copie e cole o texto de teste para completar o layout.

Salve o arquivo e feche-o.

42

2.5 Formulrio

Web II

Crie um arquivo novo. Faremos um formulrio para envio de dados por e-mail. Salve-o como contato.htm. Na aba formulrio clique no boto inserir formulrio. No inspetor de propriedades, d um nome para o formulrio e digite a url de ao, fornecida pelo provedor. Marque o mtodo post.

Obs.: Para os formulrios, os mtodos mais utilizados so: GET e POST. O mtodo GET, extrai informaes de uma base de dados. O mtodo POST envia informaes para algum lugar. Na aba de formulrio, insira 3 campos ocultos. Esses campos no sero visualizados no navegador, mas so importantes para o funcionamento do documento.

Os campos ocultos tem funes muito especficas. So semelhantes aos campos de um e-mail. No primeiro campo, nomeie com o parmetro fornecido pelo provedor para envio de informao. Cada provedor tem um critrio diferente para a mesma funo, ou seja, enviar o formulrio para um endereo de e-mail. O valor dever ser o e-mail do responsvel pela tabulao desses dados.

O segundo campo obrigatrio o assunto do e-mail que o responsvel pela tabulao de dados vai compreender que recebeu novas informaes enviadas pelo formulrio. O critrio de nome para o campo oculto sempre o mesmo: muda de acordo com o provedor.

O terceiro campo obrigatrio o que determina a pgina de resposta quando o usurio envia um formulrio. O critrio para o nome do campo o mesmo dos outros campos ocultos: determinado pelo provedor. O valor a URL da pgina de resposta. A resposta deve ser direcionada para uma pgina que tenha uma resposta para o usurio. Salve esse arquivo como resposta.html, por exemplo.

43

Escola Alcides Maya - Segundo Mdulo

Insira uma tabela com duas colunas e 10 linhas. Na primeira coluna, distribua as perguntas que faro parte do formulrio. Siga o exemplo:

Agora vamos inserir os campos no formulrio.

2.5.1 Campo de texto

Use o boto inserir campo de texto

Um campo vazio aparece na clula. Quando um campo est selecionado, a marcao pontilhada, como no exemplo:

Quando selecionado, o inspetor de propriedades mostra os parmetros referentes ao campo de texto.

Nome o nome do campo de texto

44

Largura do caractere o nmero de caracteres que sero visveis para o usurio Nmero mximo de caracteres o nmero de caracteres que podem ser digitados no campo. Tipo determina como essa informao vista pelo usurio. Linha simples, para texto. Senha substitui caracteres por asteriscos, mas envia caracteres para o responsvel pela tabulao dos dados. Valor inicial pode ser um texto que j aparece escrito no campo quando o formulrio acessado pelo usurio. Pode ser um tanto estranho para o usurio ter que apagar um texto para depois escrever o que ser enviado. Faa o mesmo para o campo senha. Lembre-se de determinar o tipo.

Web II

2.5.2 Menu de lista

Com a lista ou com o menu, o usurio pode escolher uma, ou mais respostas pr-determinadas para a questo alvo. Como resultado, aparece no layout uma marcao simplicada. Para inserir dados, use o boto valores da lista no inspetor de propriedades. Ao clicar no boto, aparece uma janela onde o operador insere os valores para indentificador do item e valor.

Em identificador do item, coloque o que aparecer para o usurio. Em valor coloque o que o tabulador dos dados receber. Desta forma voc estar inserindo um item tipo menu. Trocando para lista, o operador pode colocar a altura do campo. Com lista, o usurio pode escolher mais de uma opo. pouco utilizado porque o usurio comum no sabe quando pode ou no escolher mais de uma opo. sempre mais lgico usar a caixa de seleo.

2.5.3 Caixa de seleo

Com a caixa de seleo o usurio pode escolher mais de uma opo numa listagem apresentada no layout da pgina. Clique em inserir caixa de seleo.

45

Escola Alcides Maya - Segundo Mdulo

O resultado um campo quadrado quem tem as seguintes propriedades Caixa de seleo indica o nome do grupo Valor selecionado indica o que ser enviado por e-mail para o responsvel pela tabulao dos dados. Estado inicial indica se o campo j aparece marcado ou no. Para cada campo, necessrio digitar a resposta novamente para que o usurio possa escolher.

2.5.4 Campo de texto com vrias linhas

Para inserir um campo com vrias linhas, o procedimento parecido com o inserir campo de texto.

No inspetor de propriedades, mude os parmetros conforme o exemplo:

Campo de texto indica o nome do campo Largura do caractere indica quantos caracteres perfilados ter o campo. Nmero de linhas indica o nmero de linhas visveis para o usurio. Quebra automtica de linha indica o estilo de quebra de linha que ser usado.

2.5.5 Boto de rdio

Atravs do boto de rdio, o usurio poder responder uma pergunta com uma nica resposta. O procedimento muito parecido com a caixa de seleo. Clique em inserir boto de rdio.

46

Uma vez inserido, o boto de rdio se apresenta como um pequeno crculo. No inspetor de propriedades, voc pode alterar os parmetros de forma idntica caixa de seleo. Observe o exemplo:

Web II

2.5.6 Botes
Para ativar o script que envia o formulrio por e-mail, necessrio inserir um boto. O responsvel pelo layout pode optar tambm por inserir um segundo boto para redefinir o formulrio. Clique em inserir boto

Insira dois botes. Para o primeiro, deixe os parmetros como no exemplo:

Para o segundo boto, troque os parmetros conforme o exemplo:

Para o segundo boto, troque os parmetros conforme o exemplo:

Selecione o restante das clulas da tabela e depois delete. O resultado final ser como o exemplo:

47

Escola Alcides Maya - Segundo Mdulo

2.6 ncora
Utilizando ncora, o usurio poder navegar em diferentes assuntos dentro de uma mesma pgina. Crie um arquivo novo e salve-o com o nome roteiros.htm Usando uma tabela, crie um menu como no exemplo:

Prepare os contedos para cada um dos links. Faa os contedos algumas linhas abaixo do menu. Um contedo para cada regio.

Posicione o ponteiro do mouse ao lado da tabela e clique em inserir ncora.

48

Web II

Quando a caixa de dilogo abrir, insira o nome topo.

Confirme. Observe que aps a confirmao vai aparecer na tela uma marcao como no exemplo:

Essa marcao a ncora. Atravs dela, a navegao no mesmo documento ser possvel. Distribua ancoras de acordo com a regio, sempre no ttulo. Use os nomes: sul, sudeste, centro, nordeste e norte. Sempre em caixa baixa. Selecione as palavras regio sul.

49

No inspetor de propriedades, digite em link: #sul

Escola Alcides Maya - Segundo Mdulo

Faa o mesmo procedimento para as outras regies. No esquea de colocar o # antes de cada nome. Cada nome tem que ser escrito igual ao dado na ncora. Em voltar para o topo, faa o link(vnculo) para a ncora topo. Para testar, use a tecla de atalho F12, ou v at MENU PRINCIPAL>ARQUIVO>VISUALIZAR NO NAVEGADOR e escolha o navegador.

2.7 Vnculos
Vnculos ou links permitem ligar um documento html com outros documentos ou aplicativos web. Crie um documento novo chamado noticias.htm. Crie pargrafos que serviro como links

Criar um vnculo Selecione a frase v para o terra e no inspetor de propriedades digite em link a url do portal Terra.

Repita a operao para criar o vnculo para o site Bol. Na terceira e quarta frases, alm do vnculo, digite uma mesma palavra em destino. No importa qual, mas deve ser

50

repetida de forma igual, incluindo caixas alta e baixa se for o caso. Isso garante a criao de uma nova janela do navegador com o contedo variando entre os dois sites indicados. Na quarta frase, coloque um destino diferente. Isso faz com que outra janela se abra para que o contedo do site Tcheloco seja inserido. A ltima frase aciona o programa de e-mail que o cliente estiver usando. Tanto faz se for o menssager, Outlook, Pegasus, Eudora... para fazer isso, siga o procedimento selecione a frase digite em link: mailto:fulano@provedor.com.br Para fazer vnculos de um documento para outro, dentro da pasta raiz local, siga o procedimento: Abra o index.

Web II

Clique sobre a imagem do boto para selecionar. Use o inspetor de propriedades para fazer a ligao entre a imagem e o documento que abrir. Clique sobre o alvo e arraste at o nome do arquivo desejado. No caso deste projeto, no esquea de determinar o destino. Quando trabalhar com molduras, necessrio marcar mainFrame como destino. Isto faz com que o contedo indicado pelo link abra sempre na janela de navegao.

51

2.8 Textos e botes em Flash

Escola Alcides Maya - Segundo Mdulo

Alm dos textos com os caracteres padro, pode-se inserir textos especiais usando a insero de elementos em .swf, tanto para criar botes quanto para textos. 1. Crie um arquivo chamado promoes.htm 2. Clique em mdia no menu inserir

Para inserir um texto: Clique no cone com o

Quando abrir a janela, use como um processador de texto. Algumas fontes podem apresentar problemas de acentuao.

Quando terminar de preparar o texto, clique em OK. Um arquivo tipo .swf ser criado e o texto especial aparecer no layout. Esse tipo de texto pode servir como link, basta enderear a URL e o Destino. Em salvar como, determine o nome do arquivo .swf que ser salvo na sua pasta raiz local. O resultado ser como no exemplo:

52

Inserir um boto praticamente a mesma coisa. Clique no boto inserir boto flash. No quadro de dilogo, preencha os campos conforme desejado, escolhendo o estilo, o texto do boto, a fonte que ser usada, a URL(link), destino.

Web II

O resultado ser

Os botes s funcionaro plenamente dentro do navegador, no no ambiente de edio do Dreamweaver.

2.9 Camadas
Atravs do uso de camadas, a produo do layout fica mais solta, porm, a posio das camadas pode ser prejudicada dependendo do navegador usado. Neste exemplo, vamos colocar algum contedo na pgina principal do projeto. Abra o arquivo index.htm

Clique na moldura da capa e acione o boto inserir camada.

53

Escola Alcides Maya - Segundo Mdulo

Atravs de clique e arraste, abra uma moldura no documento.

As vezes ocorre um deslocamento do contedo j presente na pgina. Isso acontece porque os auxlios visuais esto mostrando elementos invisveis para o navegador. Dentro dessa moldura, possvel inserir fotos, textos, tabelas, etc. Funciona como se tivesse um documento html flutuando sobre outro documento.

54