Web II - Alcides Maya · Web II 1 MACROMEDIA FIREWORKS MX 1.1 Desenho vetorial e imagem bitmap...

1

Web IIE S C O L A

Web II

2

Escola Alcides Maya - Segundo Módulo

3

Web II1 MACROMEDIA FIREWORKS MX

1.1 Desenho vetorial e imagem bitmapAntes de iniciar a aprendizagem sobre o software deste módulo, precisamos falar sobre desenho vetorial e imagem

bitmap.Em computação gráfica, principalmente com softwares de desktop publishing, trabalha-se com esses dois tipos de

imagem. O desenho vetorial é obtido através de formas geométricas. Usando o ambiente de trabalho do programa, o artista usa pontos fixos, conhecidos como “nós” e linhas retas e curvas. O artista cria um desenho através de objetos. Com um pouco de paciência 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 Bézier”, que é o sistema usado por vários softwares como Corel Draw, Freehand, Fireworks, Flash, Illustrator e vários outros. Com esse sistema, o usuário marca pontos na tela e traça linhas entre esses mesmos pontos. O resultado é que assim, o desenho ocupa um espaço bastante reduzido na hora de armazenar e permite o redesenho de qualquer estágio do processo criativo.

Já a imagem bitmap é usada para reprodução 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 utilização de uma imagem desse tipo para uma revista, por exemplo, sua resolução deve ser no mínimo de 300dpi, enquanto para a web não precisa passar de 72dpi.

Quanto maior for a quantidade de pontos por polegada (dpi), maior será a qualidade da imagem na hora de reprodução, mas uma imagem que será impressa na tela, como uma foto num website, não precisa de qualidade de impressão. Por isso as diferenças entre dpi entre os tipos de imagem.

Para publicação em revistas e jornais, extensões como TIF e EPS são muito utilizadas, enquanto para web, JPG ou GIF são 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 opções na esquerda, painéis na direita e propriedades na área inferior.Assim que o programa é aberto, é necessário ter um arquivo na área de edição 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.

4


Requisitando um arquivo novo, abre-se uma caixa de diálogo onde definimos a largura, altura do arquivo e resolução do documento. Na área inferior, o operador define a cor do fundo do arquivo.

Pegue um formato 780X380 píxels. 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 estão distribuídas em seções. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcações para web, paletas de cores e exibição.

5

Web II

1.3 Barra de ferramentasNa barra de ferramentas estão todas as ferramentas de edição. Através 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 estão distribuídas em seções. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcações para web, paletas de cores e exibição.

Na barra de ferramentas estão todas as ferramentas de edição. Através 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 objetoCortar – altera largura e altura da tela de pintura

6

Escola Alcides Maya - Segundo MóduloSeleção de bitmap, com retângulos, círculos, polígonos e mão-livre.Seleção através de tolerância de cores e ferramenta pincelFerramenta lápis e ferramenta borrachaFerramentas de manipulação de imagem e carimboFerramenta conta-gotas e Balde de tinta.

Ferramenta linha e ferramenta de desenho em curvas de bézier.Ferramenta retângulo/elipse/polígono. Ferramenta texto.Ferramenta de manipulação de nós. Ferramenta faca.

Ferramenta ponto ativo. Ferramenta FatiaOcultar / mostrar pontos ativos e fatias

Paleta de cor do traçoPaleta de cor do preenchimentoDefinições de traço e preenchimento

Modos de exibiçãoFerramenta mão. Ferramenta Zoom

1.3.1 Visualizações

Toda a edição é feita no modo ORIGINAL. Na aba VISUALIZAÇÃO, o operador terá uma visão 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 prévia do que será o documento em edição. Para utilizar o modo quatro PARA CIMA, é necessário um computador bastante rápido, porque para cada edição no ORIGINAL, ele fará três prévias de como o arquivo pode ser exportado no final do processo.

7

Web II1.4 Organização e alinhamento

Quando estiver fazendo uma ilustração ou layout, nem sempre você irá criar tudo na ordem que precisa. Normalmente é necessário passar um objeto para frente de outro, por exemplo. Como o último objeto desenhado sempre fica sobre os anteriores, a organização dos objetos é muito importante.

Crie alguns quadriláteros e elipses, levemente sobrepostos. Depois escolha um objeto que está no fundo e escolha no menu principal

MODIFICAR>ORGANIZAR>TRAZER PARA FRENTE

O objeto vai passar do fundo para a frente de todos os objetos que você desenhou.As opções de organização são:

Para frente de todos os objetosPara frente de um objetoPara trás de todos os objetosPara trás de um objeto

Para alinhar objetos você precisa ter no mínimo uma seleção contendo dois deles. Depois da seleção, acione o menu principal como indicado na próxima imagem:

Além dos alinhamentos dos objetos à esquerda, centralizado vertical, direita, superior, centralizado horizontal, centralizado inferior, ainda é possível definir as larguras e/ou alturas, isto é, deixar o espaçamento entre os objetos rigorosamente iguais.

1.5 Desenho básico

O Fireworks é um software com muitas possibilidades para criação de um desenho. O básico da utilização destes softwares são formas geométricas como quadrados, círculos, retângulos, elipses, triângulos, pentágonos, hexágonos, estrelas e etc. Esses objetos são encontrados todos na mesma ferramenta, conforme ilustração.

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.

8


No caso dos polígonos, a barra de propriedades mostra as opções como quantidade de lados e ângulos para o objeto.

As principais ferramentas de desenho do fireworks são curvas de bézier, principalmente a ferramenta Caneta. Com a ferramenta Caneta, o operador distribui nós e linhas elásticas(curvas de Bézier).

Cada clique do mouse, é criado um novo nó, que pode ser editado posteriormente através das ferramentas de seleção.

Para desenhar segmentos de traçado curvo, clique e arrastar durante o ponteiro do mouse sobre a tela. Durante o desenho, o ponto atual mostra alças. Foque sua atenção na linha da sua ilustração sem perder de vista as alças. Não importa se a ilustração está sendo produzida com a ferramenta Caneta ou com outra ferramenta de desenho do Fireworks, todos os pontos de todos os objetos vetoriais possuem alças de ponto. No entanto, essas alças apenas são visíveis nos pontos curvos. Para curvar uma linha reta. Use a ferramenta caneta sobre a linha.

Desenhando com a ferramenta Caneta:

9

Web II• Selecionar a ferramenta Caneta. • Clicar para colocar o primeiro ponto de canto. • Mover o local do próximo 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 traçado, aberto ou fechado:o Clicar duas vezes no último ponto para terminar o traçado como aberto. o Escolher uma outra ferramenta para terminá-lo como um traçado aberto. Quando selecionar algumas ferramentas e

depois retornar à ferramenta Caneta, seu próximo clique continuará com o desenho do objeto. o Clicar no primeiro ponto aplicado na tela para fechar o traçado. Os pontos inicial e final de um traçado fechado são o

mesmo ponto.

1.6 Tamanho da imagem e tamanho da tela

O tamanho da imagem e tamanho da tela são coisas diferentes. Tamanho da imagem se refere ao tamanho em pixels para altura e largura da imagem e sua relação com a resolução 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 resolução. Para o ambiente web, é necessário trabalhar com a menor resolução de imagem possível, porque quanto maior a resolução, mais espaço em disco e maior tempo são exigidos para sua visualização.

O tamanho da imagem sempre vem cadeado, para manter a proporção do original.

Liberando o item limitar proporções, se pode aumentar ou diminuir a imagem somente na vertical ou horizontal, mas o seu conteúdo também será distorcido.

10

Escola Alcides Maya - Segundo Módulo tamanho da tela não interfere com o conteúdo da imagem, apenas na largura e

altura da mesma.Através da âncora, é possível indicar a direção que essa altura e largura será

editada. A marcação na imagem indica que irá ocorrer uma modificação do centro para

fora.Se o marcador estiver na primeira âncora da esquerda, significa que a alteração

será vista no lado contrário.

1.7 TextoCriar texto no Fireworks é muito parecido com qualquer outro editor de texto existente. Vale lembrar que a função

primária do programa é criar imagens para o layout do website, portanto, textos muito grandes e fontes muito pequenas não são recomendados.

1. Acione a ferramenta texto2. 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 preta2. Modifique as propriedades do texto

As opções da barra de propriedade modificam o bloco de texto digitado. Negrito, Itálico, Sublinhado, largura da letra, altura, separação entre linhas, orientação do texto, alinhamento e etc.

1.8 Símbolos – parte 1Para mover ilustrações em grupo e guardar o original no Fireworks, é necessário trabalhar com Símbolos.Símbolos são objetos que estão ligados a uma biblioteca. É como uma matriz onde se pode puxar tantos símbolos iguais

quantos forem necessários.Vamos criar um logotipo que exige um desenho mais técnico, para depois converter em símbolo.

1.8.1 Símbolo Gráfico

1. Acionar grade

11

Web II

Mude as configurações para uma cor neutra e mantenha a distância entre as linhas da grade iguais. Marque mostrar grade e encaixar na grade.

A aparência da sua área de trabalho vai ficar parecida com a da figura.

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

12


Com a ferramenta Elipse, tente copiar o exemplo.

Com a ferramenta linha, finalizar a estrutura.

Em Exibir Grade, desative a visualização e encaixar.Criar o lettering.

Essa ilustração construída em vetores é composta de vários objetos diferentes. Transportar esse conjunto de objetos de um lado para outro seria muito complicado se não tivéssemos os símbolos.

Selecione todos os objetosModificar>Símbolo>Converter em Símbolo

Escolha um nome para o futuro gráfico e clique em ok.

13

Web II

Depois da conversão em símbolo a ilustração vai parecer diferente. Quando estiver selecionada, apresentará um pontilhado e no canto inferior esquerdo aparece um símbolo.

Para editar qualquer elemento da ilustração, é necessário acionar uma área específica. Para mudar a cor, fonte ou outra coisa, dê um duplo clique sobre o símbolo gráfico. Isso abrirá o ambiente citado. Para saber se está ou não na área de edição, faça um teste. Observe se o Símbolo:Logotipo aparece no topo do programa.

Para editar:1. Duplo clique sobre o símbolo2. Verifique se o nome do ambiente mudou como no exemplo:

Para sair do ambiente de edição do símbolo basta fechar como se estivesse fechando um arquivo.Todos os símbolos ficam guardados numa ferramenta chamada Biblioteca. Cada documento pode

armazenar vários símbolos em suas bibliotecas, que podem ser compartilhados entre diferentes documentos.Janela>Biblioteca

14


1.9 Símbolos - parte 2

1.9.1 Símbolo botão

Símbolo botão é usado para criar vínculos com outros documentos, por exemplo. Vamos criar um botão que servirá de base para criar um menu em lição posterior.

Já que começamos criando um logotipo de uma empresa de turismo, vamos continuar no mesmo assunto. Quando se define um menu, é sempre melhor planejar quais são os rótulos que cada um desses botões terão.

Exemplo: Empresa Promoções Roteiros Notícias Contato

Neste caso, a matriz desse menu será Promoções, porque é a palavra que tem o maior número de caracteres. Como base desse botão que iremos criar, usaremos um retângulo.

Desenhar um retângulo. Escolher a fonte, tamanho, cor, alinhamento. Se possível, alinhar centralizado. Crie o layout do seu botão

preferencialmente do tamanho que será utilizado.

Ampliação em 300%

Selecione o retângulo e a palavra ao mesmo tempo e converta em Símbolo Botão.

15

Web II

Uma vez convertido, o botão já pode ser utilizado como tal. A aparência é semelhante a do símbolo gráfico. O botão mostra sempre uma área verde com linhas vermelhas. Elas são parte do fatiamento que a exportação do arquivo exige. Noutra lição veremos mais profundamente o que é o fatiamento.

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

Agora crie as outras faces do botão, como por exemplo, uma pequena diferença de cor quando o ponteiro do mouse passar por cima do botão.

Duplo clique sobre o botão recém criado e você entra na área de edição, conforme a imagem.

As abas Acima, Sobre e Abaixo que aparecem agora e o nome do símbolo na barra superior indicam que você está na área de edição do símbolo botão.

A aba Acima contém os elementos do botão em posição de descanso.Passar para a aba Sobre

16

Escola Alcides Maya - Segundo MóduloEssa aba ainda está vazia, para criar os elementos necessários clique no botão COPIAR GRÁFICO ACIMA. As ilustrações

que aparecem agora são cópias da aba anterior.Troque as cores para causar o efeito desejado quando o ponteiro do mouse estiver sobre o botão.

Para encerrar esta área de edição, basta fechar, como fizemos na edição de símbolo gráfico.

1.10 ComportamentosOs comportamentos são instruções em javascript que uma vez inseridas na arte, serão transferidas para o documento html

na finalização do processo. Nesta lição veremos como é a aplicação desses comportamentos no layout.Exemplo, criar um efeito de permuta de imagem. Quando o ponteiro do mouse passar sobre o botão, a imagem será

trocada.1. Criar um botão para este exercício.2. Criar polígono qualquer ao lado do botão.

Usar a ferramenta fatia para criar uma área sobre o polígono

Abra o painel de camadas

17

Web II

O painel de camadas aparece já com a marcação MOLDURA 1. Esse é o local onde você está trabalhando. Molduras são 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 não ocorrer automaticamente, mudar para Moldura 2

Na moldura 2, você só vê imagens que estão no arquivo, mas noutro nível. Por isso você só poderá visualizar o estágio sobre do botão que você criou.

Desenhar um outro polígono na moldura 2

Selecionar o botão.

18

Escola Alcides Maya - Segundo MóduloObserve que ao selecionar o símbolo, aparece um alvo no centro dele. Esse alvo será usado para ligar o botão ao objeto

polígono.Clicar sobre alvo e arrastar até a fatia criada pelo operador

Caso não esteja, marque MOLDURA 2Retornar para MOLDURA 1

Para testar o comportamento aplicado, desligue a visualização das fatias passe para a aba VISUALIZAÇÃO. Depois de alguns momentos, você verá como ficará o efeito na web.

1.11 camadasCamadas permitem uma edição mais eficiente da ilustração que está sendo criada. O operador pode facilmente cadear

vários objetos, permitindo assim editar apenas um elemento. Cada camada pode ter nome personalizado.Para a realização desse exemplo, vamos trabalhar apenas com desenhos simples. Noutra lição faremos um layout mais

complicado.Abrir painel de Camadas – Janela >Camadas

Crie um retângulo conforme exemplo.

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

19

Web IIDesenhar outro gráfico.

Observe que o novo gráfico pertence a mesma camada, porém ocupa outra posição dentro da hierarquia. Observe também que no painel de camadas, existe uma miniatura para ajudar o operador quanto à posição, cor e forma dos elementos.

Inserir nova camada

Desenhar outro polígono na camada 2.

Observe as camadas.

20

Escola Alcides Maya - Segundo MóduloA pasta indica camada.O sinal de – indica que a camada pode ser fechadaO sinal de + indica que a camada pode ser expandidaO símbolo do olho indica que a camada ou objeto da

camada está visívelPor definição padrão, a opacidade de uma camada é

100%.

Através 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 FireworksImagens bitmap são imagens que não possuem vetor. Sua visualização se baseia na cor de um conjunto de pixels. Sua

qualidade pode ser medida através da quantidade desses pixels por polegada e seu tamanho em largura e altura.O Fireworks não é um software para manipulação 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 Cortar2. Ajustar tamanho usando as alças3. Duplo clique dentro da área para recorte

21

Web II1.12.2 Seleção

A seleção de uma figura é diferente da seleção de objetos vetoriais. Uma imagem bitmap pode ser selecionada em parte. A área selecionada pode sofrer alterações, enquanto a área fora da seleção permanece inalterada.

A seleção pode ser retangular ou elíptica.

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 seleçãoPara retirar uma área selecionada, faça o mesmo procedimento com a tecla ALT pressionada.Uma seleção mais detalhada, como por exemplo, recortar apenas uma das pessoas na foto, use a ferramenta laço. O laço

polígono é desenhado ponto por ponto, enquanto o laço depende unicamente da habilidade do usuário com o mouse.

Ferramenta pincel. Desenho em modo bitmap com várias opções de efeitos.

Ferramenta lápis. Desenho em modo bitmap.

Ferramenta Borracha.

22


Clicando e mantendo o botão da esquerda pressionado, o usuário tem acesso as outras ferramentas.

Imagem original Ferramenta Embaçar

Ferramenta Nitidez Ferramenta Escurecer

Ferramenta Manchar

23

Web II

Ferramenta Carimbo. Duplica os pixels de acordo com a distância determinada pelo usuário. O opera-dor marca origem e local de aplicação através do mouse e da tecla ALT.

Dentro de filtros o usuário pode realizar manipulações 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 são incluídos dentro do Fireworks, aumentando as opções de alteração nas imagens.

24

Escola Alcides Maya - Segundo Módulo1.13 Layout

Nesta lição vamos criar um layout de um cliente hipotético.1. Criar novo documento com as dimensões 780x380pixels2. Use JANELA>BIBLIOTECA, abra o menu desta janela e acione IMPORTAR

SÍMBOLOS para trazer o símbolo 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 retângulo 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. Não esqueça de trocar a ordem das camadas.

Na mesma camada, crie um retângulo com os cantos arredondados e ajuste na tela conforme o exemplo. Para melhor compreensão, a magnificação da tela está maior.

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

25

Web II

Crie uma nova camada chamada MenuConsidere que os links deste site serão: empresa, promoções, roteiros, notícias, contato. O link com maior número de

caracteres é PROMOÇÕES. Este será a matriz dos botões que serão criados. O texto deverá ter alinhamento centralizado.

Converta em botão e entre na área de edição do símbolo.

Faça o SOBRE conforme lição anterior.Duplique o botão usando a propriedade e arraste com ALT.

Na Barra de propriedades, troque os textos dos botões em TEXTO

26


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

Com o layout pronto, temos que analisar como será a navegação 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 então 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 botões do menu.Agora o layout está pronto para a próxima etapa.

1.14 Fatiamento, otimização e exportação

Através do fatiamento preparamos as imagens do projeto para a exportação.

Use a ferramenta fatia para preparar os cortes.

27

Web II

Cada layout terá um fatiamento diferente.

1.14.1 Exportação

Exportação é a tarefa de transformar o conteúdo criado no Fireworks em conteúdo para o Dreamweaver. A imagem PNG que foi criada até aqui será preservada, porém a exportação irá gerar uma série de imagens bitmap, códigos escritos em Javascript e os documentos html necessários para o projeto.

1. Selecione a ferramenta ÁREA DE EXPORTAÇÃO

Selecione a área conforme exemplo

Duplo clique sobre a área selecionada. Isso abre um quadro de diálogo.

Mude o número de cores para um número mais baixo. Neste exemplo 32 cores são suficientes.

28


Clique em exportar e espere a nova caixa de diálogo abrir.

Agora os arquivos devem receber nome e um local de depósito.

Essa área que será exportada se chamará topo. Não é preciso escrever a extensão do arquivo. Basta escolher os parâmetros conforme a necessidade do usuário. Não esqueça de manter INCLUIR ÁREAS SEM FATIA e COLOCAR AS IMAGENS NA SUBPASTA. Assim, as imagens não ficarão misturadas com os arquivos HTML do projeto.

Repita a operação com as seguintes seleções:

29

Web II

A seleção 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 botão ou uma fatiaMenu principal MODIFICAR>MENU POP UP>ADICIONAR MENU POP UP. Vai aparecer a seguinte tela

Preencha os endereços, se for o caso, também identifique o destino

.

Escolha a aparência dos botões que serão criados.

30


Se precisar, altere a aparência através da aba avançada. Determine a posição que o menu vai ficar na apresentação final.

Clique em Concluído. O Fireworks produzirá o menu pop up conforme suas especificações.

O menu pop up aparece como uma marcação, que pode ser movido com o mouse, permitindo o ajuste de sua posição se necessário.

Para visualizar o menu, é necessário fazer uma prévia do que será o arquivo finalizado. Pode usar ARQUIVO>VISUALIZAR NO NAVEGADOR ou acionar pela tecla de atalho F12.

31

Web II2 MACROMEDIA DREAMWEAVER MX

2.1 Apresentação e Interface

O Dreamweaver é um programa de autoria para Web. Ele incrementa a velocidade a de produção porque o usuário vê o que está programando e vice-versa. Ao iniciar o software, o usuário tem uma visão da área de trabalho, com uma página em branco e os painéis de controle.

Todos os painéis no Dreamweaver são móveis, 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.

Código, código e layout, layout, Live Data, título do documento, gerenciamento, depuração,

Arquivo em uso e/ou lista de arquivos abertos

Inspetor de propriedades. Esse painel é dinâmico. Conforme a ferramenta em utilização, o inspetor muda seus campos.

32


Os painéis abrem e fecham clicando no símbolo triangular ao lado do nome.

O mais importante para este módulo é o painel de arquivos do site, conforme mostra o exemplo.

Neste painel, o usuário tem a visão da sua pasta raiz local, essencial para o desenvolvimento de um projeto para o ambiente web.

Funções como download e upload de arquivos, fazem parte deste painel.

2.2 Pasta Raiz Local

Através da Pasta Raiz Local, o operador determina qual é a pasta que guardará todos os arquivos de um projeto de site.

Considerando o módulo anterior, usaremos os arquivos construídos 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 serão criados.

33

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 deverão ser salvos nesta pasta. Arquivos que não estiverem na pasta raiz local, serão ignorados na hora de fazer o upload.

2.3 Ambientes de trabalhoApenas código

34


Neste modo, o usuário pode trabalhar no Dreamweaver digitando o código de forma direta. A vantagem é que como editor, existe diferença de cores para o que pertence às TAGs e o que será impresso na tela do navegador.

O código apresentado é o padrão na criação de páginas básicas com linguagem HTML.Código e Layout

Na visualização de código e layout, tanto faz se o operador escrever o código ou desenvolver o layout.Finalmente temos a visualização do layout. Sem códigos, o operador usa a tecnologia WYSIWYG, que

é uma sigla para O QUE VOCÊ VÊ É O QUE VOCÊ TEM. As informações impressas na tela do navegador serão o que o operador fizer neste ambiente.

2.4 Montagem de layout criado no FireworksConsiderando os arquivos criados no módulo Fireworks e a pasta raiz local para este módulo, antes de fazer a montagem,

você precisa trazer uma cópia daqueles arquivos para dentro deste diretório, conforme o exemplo.

35

Web IIA pasta imagens contém as imagens dos botões e cabeçalho, tal qual foram

criadas no Fireworks.Neste exemplo, temos ainda a pasta imagens_site, que contém imagens

importadas de outros lugares para o site, e ainda uma pasta produção, que contém os arquivos PNG.

Só para lembrar, os arquivos PNG são os arquivos originais do seu layout, quando estava trabalhando no Fireworks.

Outros arquivos, como os temporários por exemplo, aparecem e desaparecem da pasta raiz local. Esses arquivos são na maioria criados pelo próprio dreamweaver, deletando-os automaticamente quando não forem necessários.

Agora, vamos juntar as partes criadas no Fireworks, usando o dreamweaver.

Crie um arquivo novo. ARQUIVO>NOVO

Marque as opções para a criação do documento

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

Em ARQUIVO>ABRIR NA MOLDURA, escolha o cabeçalho.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.

36

Escola Alcides Maya - Segundo MóduloÉ normal que as molduras pareçam desajustadas, como no exemplo:

Ajuste as divisórias da moldura usando o ponteiro do mouse, através da propriedade de arraste.

As molduras aparecem com o conteúdo deslocado, para que isso seja eliminado, é necessário um ajuste nas propriedades da página.

Menu principal Propriedades da página>Propriedades da seleção. Ajuste as margens com o valor 0

O resultado é que as tabelas ficarão alinhadas pelas paredes da moldura, sem espaço sobrando.

37

Web II

Marque a divisória e no menu principal em ARQUIVO>SALVAR O CONJUNTO DE MOLDURAS, salve o arquivo como index.htm

O cabeçalho tem que ser preenchido até o final com a cor do fundo. Essa cor não pode ser interrompida pela resolução diferente de um usuário. Para que isso ocorra, siga o procedimento.

Menu principal, MODIFICAR>PROPRIEDADES DA PÁGINATroque a cor do fundo e confirme

Dica: sempre que realizar alguma modificação,salve e teste no navegador usando o atalho F12.Agora vamos colocar o fundo no arquivo capa.htm.1. Clique no documento capa.htm2. Neste caso específico, 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 opções de edição da tabela e seu alinhamento podem ser editados neste painel.

38


Insira uma tabela com 1 linha por 1 coluna, largura 550 pixels, borda 0, preenchimentos 0. Para isso, use o botão 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 próxima lição vamos criar os conteúdos de cada botão do

menu.

Com o layout construído, agora precisamos criar os conteúdos para cada botão. No planejamento, temos os seguintes botões:

Empresa, promoções, roteiros, notícias e contato. Cada link será um documento de HTML que será acionado pelo botão e aparecerá na janela principal do layout.

39

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

Quando iniciar um layout, lembre-se de que o padrão de um documento HTML é começar no canto superior esquerdo do navegador. Portanto, no dreamweaver acontece o mesmo. Para começar um layout, precisamos então 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 espaço de duas células.Primeiro, insira uma tabela usando o botão 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 não fiquem grudados na parede da célula, coloque um espaçamento de 5 pixels.

O resultado obtido será uma tabela vazia, onde o pontilhado identifica a tabela, mas não mostra as divisórias no navegador.

Capture uma imagem na web para servir de conteúdo.Insira a imagem através do botão inserir imagem. Traga a imagem na primeira célula da tabela.

40


Se precisar redimensionar a foto, use o botão SHIFT pressionado e as alças de redimensionamento que aparecem na imagem quando as mesmas são selecionadas.

A aparência final deverá ser como no exemplo:

Escreva um texto qualquer na célula 2 e observe que este aparece no meio da célula, alinhado pela esquerda. Isso acontece porque todo o alinhamento ocorre pela célula com maior objeto. No caso é a foto.

Mude o alinhamento para o topo com o seguinte procedimento:Por dentro das células, faça a seleção por arraste.

Mude o alinhamento no inspetor de propriedades.

41

Web II

O resultado é o seguinte:

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

Use para o título Verdana, tamanho 4, cor vermelha e negrito.

Para criar separação de parágrafos, use ENTER.Para criar quebra de linha, use SHIFT+ENTER.Obs.: Um parágrafo pode conter textos com quebra de linha.Faça um texto conforme o modelo, usando fonte verdana e tamanho 2.

42


Selecione as duas células de baixo:

Mescle as duas células usando a ferramenta indicada:

Resultado:

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

Salve o arquivo e feche-o.

43

Web II2.5 Formulário

Crie um arquivo novo. Faremos um formulário para envio de dados por e-mail.Salve-o como contato.htm.Na aba formulário clique no botão inserir formulário.No inspetor de propriedades, dê um nome para o formulário e digite a url de ação, fornecida pelo provedor. Marque o

método post.

Obs.: Para os formulários, os métodos mais utilizados são: GET e POST. O método GET, extrai informações de uma base de dados. O método POST envia informações para algum lugar.

Na aba de formulário, insira 3 campos ocultos. Esses campos não serão visualizados no navegador, mas são importantes para o funcionamento do documento.

Os campos ocultos tem funções muito específicas. São semelhantes aos campos de um e-mail.No primeiro campo, nomeie com o parâmetro fornecido pelo provedor para envio de informação. Cada provedor tem um

critério diferente para a mesma função, ou seja, enviar o formulário para um endereço de e-mail. O valor deverá ser o e-mail do responsável pela tabulação desses dados.

O segundo campo obrigatório é o assunto do e-mail que o responsável pela tabulação de dados vai compreender que recebeu novas informações enviadas pelo formulário. O critério de nome para o campo oculto é sempre o mesmo: muda de acordo com o provedor.

O terceiro campo obrigatório é o que determina a página de resposta quando o usuário envia um formulário. O critério para o nome do campo é o mesmo dos outros campos ocultos: é determinado pelo provedor. O valor é a URL da página de resposta.

A resposta deve ser direcionada para uma página que tenha uma resposta para o usuário. Salve esse arquivo como resposta.html, por exemplo.

44


Insira uma tabela com duas colunas e 10 linhas. Na primeira coluna, distribua as perguntas que farão parte do formulário. Siga o exemplo:

Agora vamos inserir os campos no formulário.

2.5.1 Campo de texto

Use o botão inserir campo de texto

Um campo vazio aparece na célula. Quando um campo está selecionado, a marcação é pontilhada, como no exemplo:

Quando selecionado, o inspetor de propriedades mostra os parâmetros referentes ao campo de texto.

Nome é o nome do campo de texto

45

Web IILargura do caractere é o número de caracteres que serão visíveis para o usuárioNúmero máximo de caracteres é o número de caracteres que podem ser digitados no campo.Tipo determina como essa informação é vista pelo usuário. Linha simples, é para texto. Senha substitui caracteres por

asteriscos, mas envia caracteres para o responsável pela tabulação dos dados.Valor inicial pode ser um texto que já aparece escrito no campo quando o formulário é acessado pelo usuário. Pode ser

um tanto estranho para o usuário ter que apagar um texto para depois escrever o que será enviado.

Faça o mesmo para o campo senha. Lembre-se de determinar o tipo.

2.5.2 Menu de lista

Com a lista ou com o menu, o usuário pode escolher uma, ou mais respostas pré-determinadas para a questão alvo. Como resultado, aparece no layout uma marcação simplicada.

Para inserir dados, use o botão valores da lista no inspetor de propriedades. Ao clicar no botão, 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 usuário. 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 usuário pode escolher mais de uma opção. É pouco utilizado porque o usuário comum não sabe quando pode ou não escolher mais de uma opção. É sempre mais lógico usar a caixa de seleção.

2.5.3 Caixa de seleção

Com a caixa de seleção o usuário pode escolher mais de uma opção numa listagem apresentada no layout da página.Clique em inserir caixa de seleção.

46


O resultado é um campo quadrado quem tem as seguintes propriedadesCaixa de seleção indica o nome do grupoValor selecionado indica o que será enviado por e-mail para o responsável pela tabulação dos dados.Estado inicial indica se o campo já aparece marcado ou não.Para cada campo, é necessário digitar a resposta novamente para que o usuário possa escolher.

2.5.4 Campo de texto com várias linhas

Para inserir um campo com várias linhas, o procedimento é parecido com o inserir campo de texto.

No inspetor de propriedades, mude os parâmetros conforme o exemplo:

Campo de texto indica o nome do campoLargura do caractere indica quantos caracteres perfilados terá o campo.Número de linhas indica o número de linhas visíveis para o usuário.Quebra automática de linha indica o estilo de quebra de linha que será usado.

2.5.5 Botão de rádio

Através do botão de rádio, o usuário poderá responder uma pergunta com uma única resposta.O procedimento é muito parecido com a caixa de seleção. Clique em inserir botão de rádio.

47

Web IIUma vez inserido, o botão de rádio se apresenta como um pequeno círculo. No inspetor de propriedades, você pode

alterar os parâmetros de forma idêntica à caixa de seleção. Observe o exemplo:

2.5.6 Botões

Para ativar o script que envia o formulário por e-mail, é necessário inserir um botão. O responsável pelo layout pode optar também por inserir um segundo botão para redefinir o formulário.

Clique em inserir botão

Insira dois botões. Para o primeiro, deixe os parâmetros como no exemplo:

Para o segundo botão, troque os parâmetros conforme o exemplo:

Para o segundo botão, troque os parâmetros conforme o exemplo:

Selecione o restante das células da tabela e depois delete.O resultado final será como o exemplo:

48


2.6 ÂncoraUtilizando âncora, o usuário poderá navegar em diferentes assuntos dentro de uma mesma página.

Crie um arquivo novo e salve-o com o nome roteiros.htmUsando uma tabela, crie um menu como no exemplo:

Prepare os conteúdos para cada um dos links. Faça os conteúdos algumas linhas abaixo do menu. Um conteúdo para cada região.

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

49

Web II

Quando a caixa de diálogo abrir, insira o nome topo.

Confirme. Observe que após a confirmação vai aparecer na tela uma marcação como no exemplo:

Essa marcação é a âncora. Através dela, a navegação no mesmo documento será possível.Distribua ancoras de acordo com a região, sempre no título. Use os nomes: sul, sudeste, centro, nordeste e norte. Sempre

em caixa baixa.Selecione as palavras região sul.

50

Escola Alcides Maya - Segundo MóduloNo inspetor de propriedades, digite em link: #sul

Faça o mesmo procedimento para as outras regiões. Não esqueça de colocar o # antes de cada nome. Cada nome tem que ser escrito igual ao dado na âncora.

Em voltar para o topo, faça o link(vínculo) 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 VínculosVínculos ou links permitem ligar um documento html com outros documentos ou aplicativos web.Crie um documento novo chamado noticias.htm.Crie parágrafos que servirão como links

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

Repita a operação para criar o vínculo para o site Bol.

Na terceira e quarta frases, além do vínculo, digite uma mesma palavra em destino. Não importa qual, mas deve ser

51

Web IIrepetida de forma igual, incluindo caixas alta e baixa se for o caso. Isso garante a criação de uma nova janela do navegador com o conteúdo variando entre os dois sites indicados.

Na quarta frase, coloque um destino diferente. Isso faz com que outra janela se abra para que o conteúdo 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:[email protected]

Para fazer vínculos de um documento para outro, dentro da pasta raiz local, siga o procedimento:Abra o index.

Clique sobre a imagem do botão para selecionar.Use o inspetor de propriedades para fazer a ligação entre a imagem e o documento que abrirá.Clique sobre o alvo e arraste até o nome do arquivo desejado.

No caso deste projeto, não esqueça de determinar o destino. Quando trabalhar com molduras, é necessário marcar mainFrame como destino. Isto faz com que o conteúdo indicado pelo link abra sempre na janela de navegação.

52

Escola Alcides Maya - Segundo Módulo2.8 Textos e botões em Flash

Além dos textos com os caracteres padrão, pode-se inserir textos especiais usando a inserção de elementos em .swf, tanto para criar botões quanto para textos.

1. Crie um arquivo chamado promoções.htm2. Clique em mídia 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 acentuação.

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 endereçar 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:

53

Web IIInserir um botão é praticamente a mesma coisa.Clique no botão inserir botão flash.No quadro de diálogo, preencha os campos conforme desejado, escolhendo o estilo, o texto do botão, a fonte que será

usada, a URL(link), destino.

O resultado será

Os botões só funcionarão plenamente dentro do navegador, não no ambiente de edição do Dreamweaver.

2.9 CamadasAtravés do uso de camadas, a produção do layout fica mais solta, porém, a posição das camadas pode ser prejudicada

dependendo do navegador usado.Neste exemplo, vamos colocar algum conteúdo na página principal do projeto.Abra o arquivo index.htm

Clique na moldura da capa e acione o botão inserir camada.

54


Através de clique e arraste, abra uma moldura no documento.

As vezes ocorre um deslocamento do conteúdo já presente na página. Isso acontece porque os auxílios visuais estão mostrando elementos invisíveis para o navegador.

Dentro dessa moldura, é possível inserir fotos, textos, tabelas, etc. Funciona como se tivesse um documento html flutuando sobre outro documento.

Web II - Alcides Maya · Web II 1 MACROMEDIA FIREWORKS MX 1.1 Desenho vetorial e imagem bitmap...

Documents

Transcript of Web II - Alcides Maya · Web II 1 MACROMEDIA FIREWORKS MX 1.1 Desenho vetorial e imagem bitmap...