Escolar Documentos
Profissional Documentos
Cultura Documentos
Sumário
1
CENT RO DE I NF O RM ÁT I CA
2
CENT RO DE I NF O RM ÁT I CA
3
CENT RO DE I NF O RM ÁT I CA
4
CENT RO DE I NF O RM ÁT I CA
1. INTRODUÇÃO AO FIREWORKS MX
Fireworks MX é uma aplicação versátil para Web designers, que possui uma
grande variedade de ferramentas, que permitem facilmente a criação de gráficos
VETORIAIS e/ou BITMAPS (mapas de bits), efeitos visuais para web como rollovers
(rolar sobre), barra de navegação, mensagens em barra de status, menus de
controle. Permite que você crie áreas ativas dentro de uma imagem usando ou não o
conceito de Slices (divisão da imagem), e ainda que você salve suas criações nos
formatos de imagens mais usados na Internet, JPG, GIF e PNG.
Com o Fireworks MX você pode ainda criar layouts completos para home
pages, imagens animadas entre outros.
Ao contrário de outros softwares para criação de imagens, como por exemplo o
Adobe PhotoShop e Corel PhotoPaint, o Fireworks MX é utilizado apenas para
criação de gráficos para web, e não para mídia impressa, por isso, trata-se de uma
ferramenta de fácil utilização, além de possuir total compatibilidade com outras
ferramentas como Dreamweaver MX e o Flash MX.
3. Interface do Fireworks MX
5
CENT RO DE I NF O RM ÁT I CA
4. Modos de Trabalho
Caso ele esta ativado, quer dizer que você está trabalhando no modo de
edição ou criação de imagens bitmap. Para voltar a trabalhar em modo vetorial,
basta dar um clique com o mouse sobre este botão. Lembrando que, em modo
bitmap, você não poderá criar objetos vetoriais e vice-versa.
5. Réguas
Caso você necessite de ajuda, poderá contar com a ajuda de réguas, que
facilitarão a criação de imagens com precisão em suas dimensões. Para exibir ou
ocultar as réguas, selecione o menu Exibir -> Régua. Observe que,
independentemente da unidade de medida do documento, as réguas sempre exibem
pixels.
6. Grade
A grade é um plano de fundo de linhas horizontais e verticais que você pode
utilizar para posicionar seu trabalho, facilitando o trabalho de diagramação.
1. Escolha o menu Exibir -> Grade - > Mostrar Grade para ativar.
6
CENT RO DE I NF O RM ÁT I CA
7. Guias
Utilize guias que, como a grade, são linhas não exportáveis, para alinhar e
posicionar objetos com precisão.
1. Escolha o menu Exibir -> Guias -> Mostrar Guias para exibir ou ocultar as
guias.
2. Para adicionar uma guia, as réguas devem estar visíveis. Arraste as guias
a partir da régua vertical ou horizontal, pressionando o mouse sobre a
régua, e arrastando-o ainda pressionado para cima da imagem.
3. Clicando sobre o menu Exibir -> Guias -> Encaixar nas Guias fará com que os
objetos sejam atraídos para a guia.
Ponteiro Subseleção
Dimensionar Cortar
Linha
Caneta
Retângulo Texto
Forma livre Faca
Cor de contorno
Cor de preenchimento
Definir cores padrão traço/preenchimento
Trocar cores traço/preenchimento
Nenhum traço ou preenchimento
Modo tela cheia
Modo de tela padrão
Modo tela cheia com menus
Mão
Zoom
7
CENT RO DE I NF O RM ÁT I CA
Nesta tela, você poderá definir opções como largura, altura, cor do fundo.
Lembrando sempre de trabalhar com pixels como unidades de medida.
10. Painéis
O Fireworks MX possui vários painéis à direita da tela que permitem que
você altere as propriedades dos objetos e imagens. Você pode acessar esses
painéis selecionando no menu Janela ou através das janelas ancoradas no Grupo de
Painéis.
Nome da camada
Mostrar / Ocultar Camada
Adicionar Máscara
8
CENT RO DE I NF O RM ÁT I CA
12. Exercícios
Paleta de cores
Com o mouse correndo sobre as cores, você poderá ver a cor selecionada
no quadro acima, e ao lado do mesmo, o código hexadecimal da respectiva cor. Para
9
CENT RO DE I NF O RM ÁT I CA
selecionar a cor desejada, basta dar um clique com botão esquerdo do mouse sobre
a mesma. E criar o seu retângulo na área do documento.
Dessa forma, estaremos colocando no retângulo, um preenchimento
chamado sólido. Selecionando o retângulo, podemos ver na barra de Propriedades
(logo abaixo na tela), as seguintes opções:
Opções de Preenchimento
Tipo do objeto
Dimensões
Posição
10
CENT RO DE I NF O RM ÁT I CA
Selecionando então uma outra cor, alteraremos o nosso efeito. Caso você
queira diminuir a área de transferência de uma cor para outra, basta clicar sobre o
potinho de tinta e arrastá-lo para a posição desejada.
Você também poderá adicionar outros potes de tinta na trilha do degradê,
apenas clicando ao lado de um dos já existentes, e poderá removê-los clicando com
o mouse sobre eles e arrastando-os para qualquer área abaixo da linha de cor.
Pronto, assim concluímos o efeito de degrade do tipo linear, agora, crie
novos objetos e experimente as outras opções de preenchimento.
Texturas
Podemos ainda adicionar outros efeitos ao preenchimento dos nossos
objetos chamados de Textura.
As texturas podem ser aplicadas em qualquer tipo de preenchimento, sólido
ou qualquer uma das variações do efeito degrade. Para adicionar uma textura, basta
selecionar o objeto, já com a cor de preenchimento definida, e, na barra de
propriedades, clicar sobre a guia de opções Textura. Quando clicar, o Fireworks MX
mostrará a você uma lista com várias opções de texturas para serem aplicadas, e ao
lado do nome, mostrará um exemplo do resultado final que aquela opção
selecionada trará ao objeto.
Logo ao lado da caixa de opções de texturas, existe uma outra caixa com o
nível de transparência da textura, onde, aumentando o valor até 100%, a textura
sobre o objeto ficará no seu nível máximo de visibilidade. Para retirar a textura, basta
levar esse nível até o valor zero.
11
CENT RO DE I NF O RM ÁT I CA
Tipo do contorno
Cor do contorno
Espessura do contorno
Opções de textura
Suavidade
Distância
Ângulo
Cor
12
CENT RO DE I NF O RM ÁT I CA
Agora você já poderá testar os outros efeitos com outros objetos, lembrando
que podemos também combinar efeitos dentro de um mesmo objeto e vê-los
funcionando ao mesmo tempo.
16. Exercícios
1. Imagine que você foi contratado por uma empresa para fazer a elaboração de
um logotipo. Considere que esta empresa trabalha no ramo dos esportes,
vendendo acessórios para todos os esportes. Crie um logotipo utilizando
13
CENT RO DE I NF O RM ÁT I CA
todos os conhecimentos adquiridos até agora, mas lembre-se, tente fazer algo
profissional.
Nesta barra podemos escolher o tipo de fonte que queremos, modificar seu
tamanho, o espaçamento horizontal entre as letras, a altura da letra, sua largura e
sua formatação de alinhamento, podendo deixar uma palavra na direção vertical ou
horizontal. Veja tabela abaixo:
Outra forma de escrevermos um texto é selecionando o menu Texto ->
Editor, dessa forma aparecerá o editor de textos do Fireworks MX (figura abaixo)
onde você pode digitar o texto e já preparar sua configuração antes de aplicá-lo ao
documento.
14
CENT RO DE I NF O RM ÁT I CA
Agora, selecione os dois objetos juntos clicando sobre eles com a tecla shift
pressionada. Com os dois objetos selecionados, atenção, você deve ter certeza de
ter selecionado somente os dois objetos, o circulo e o texto, caso haja um terceiro
objeto selecionado, o efeito não funcionará corretamente. Então, tendo certeza de
estar com os dois objetos selecionados, siga com o mouse até o menu Texto ->
Anexar ao traçado. Após selecionar esta opção, o seu texto deverá se adaptar ao
caminho informado pelo traçado o círculo, como a figura a seguir:
15
CENT RO DE I NF O RM ÁT I CA
Perfurar ´ Use um objeto para perfurar (cortar) outros objetos que estiverem
abaixo.
Cortar ´ Use o objeto mais acima como modelo para a posição que deseja
recortar. Ele serve como base para o corte nos outros objetos.
16
CENT RO DE I NF O RM ÁT I CA
Para que você consiga fazer o desenho de uma estrela, basta selecionar a
ferramenta Polígono no painel de ferramentas. E Na barra de propriedades, na
opção Forma, alterar para Estrela.
17
CENT RO DE I NF O RM ÁT I CA
Veja que a nossa figura não está ocupando toda a área do nosso
documento. Podemos facilmente resolver este problema, para isso, devemos seguir
com o mouse e clicar sobre o menu Modificar -> Tela -> Ajustar Tela.
Esta opção fará com que a área do documento que está sobrando,
seja automaticamente alterada para o tamanho da imagem
18
CENT RO DE I NF O RM ÁT I CA
Podemos notar nas telas anterior que o botão Sair do modo Bitmap está
desabilitado, por tanto, estamos trabalhando em modo vetorial apesar de termos
importado uma imagem bitmap. Para entrar em modo bitmap, devemos, com a
ferramenta Ponteiro (a primeira da barra de ferramentas) clicar duas vezes sobre a
imagem. Podemos então ter certeza de estarmos em modo bitmap observando que o
botão Sair do modo Bitmap está agora habilitado.
19
CENT RO DE I NF O RM ÁT I CA
ela selecionará automaticamente todas as áreas que contenham a cor branca como
a seguir:
Com uma área de nossa imagem selecionada, podemos ir até o menu Filtros
-> Ajustar cor -> Matiz/Saturação e na tela que nos aparecer, alterar as opções de
Matiz, Saturação e Luminosidade da nossa figura, alterando assim, a cor de toda a
área selecionada.
Outra forma de se fazer isso é a seguinte: Como estamos com o fundo da
imagem selecionado, e queremos mudar somente ele, e como ele já está
selecionado, podemos simplesmente apertar na tecla Delete no nosso teclado, e
remover toda a área selecionada. Note que da forma anterior, não estamos
apagando, mas, modificando a cor, já desta maneira, você irá apagar a área
selecionada e escolher sua cor, definindo a cor de fundo do documento.
Para alterar a cor do fundo da tela (documento), devemos após apagar o
conteúdo selecionado, clicar sobre o menu Modificar -> Tela -> Cor da tela. Veja que
aparece uma caixa com apenas três opções: Branco, Transparente e Personalizar.
Ao lado da ultima opção, podemos encontrar uma caixa de cores e ali, selecionar a
nova cor de fundo da nossa imagem.
Pronto, agora só falta tirarmos a seleção. Para isso, devemos ir até o menu
Selecionar -> Cancelar seleção ou simplesmente digitar no teclado as teclas ctrl+d.
21. Exercícios
1. Pratique os conhecimentos da aula de hoje.
20
CENT RO DE I NF O RM ÁT I CA
Vamos agora exemplificar o primeiro item da tabela acima, ficando com você a tarefa
de experimentar os outros tipos efeitos de máscara. Criando máscara
Devemos para começar, abrir uma imagem para aplicarmos uma máscara.
Após abrir a imagem, devemos criar o objeto máscara, ou seja, o objeto com que
terá a forma que desejo definir para a minha figura, ficaremos então com dois
objetos, como segue:
21
CENT RO DE I NF O RM ÁT I CA
22
CENT RO DE I NF O RM ÁT I CA
Caso você selecione mais um objeto, na hora de criar pontos ativos através
do menu editar, irá aparecer uma mensagem perguntando se você deseja criar um
ponto ativo para cada objeto, ou um para todos os pontos.
Depois que você criou um ponto ativo, você pode ligá-lo a uma URL criando
um link. Caso você não defina um, o ponto ativo será um link para a pagina atual,
onde ele se encontra. E quando uma pessoa clicar com o mouse sobre a área do
ponto ativo, a página referida no link será aberta.
Quando definimos um ponto ativo, podemos ver na barra de Propriedades,
as seguintes configurações:
23
CENT RO DE I NF O RM ÁT I CA
Lista de URL’s
24
CENT RO DE I NF O RM ÁT I CA
Fatias, assim como pontos ativos, são usados para criar objetos da web
interativos. Ambos permitem que você defina regiões interativas nas quais você pode
adicionar links ou comportamentos, embora, cada tipo de ferramenta trabalhe de
uma forma diferente.
Fatias são o resultado de uma imagem muito grande cortada em varias
imagens pequenas. Cada um destes pedaços (fatias) serão exportados em um
arquivo separado. Uma vez que esta imagem é exportada, o Fireworks MX cria um
documento HTML que contém o código responsável pelo reagrupamento dos
pequenos arquivos montando novamente a imagem completa, dentro de uma tabela
HTML.
Existem varias vantagens na utilização de fatias de uma imagem, que
podemos citar dentre elas:
Cada fatia pode ser otimizada com a maioria das propriedades de um arquivo como
formatos e qualidades. Geralmente, diferentes áreas de uma figura muito grande,
requerem diferentes tipos de otimização. Por exemplo: para uma parte da imagem,
JPEG deve ser a melhor escolha para a exportação e em outra parte, GIF pode ser a
melhor escolha. Assim você poderá, dividir uma imagem grande, em duas imagens
menores e de formatos diferentes, e obter novamente a imagem grande quando
exportar.
1. As fatias podem assumir vários tipos de comportamento, e cada
fatia da imagem, pode assumir um diferente.
2. Caso você tenha que alterar uma das fatias, não é necessário
exportar a figura inteira novamente, podendo exportar somente a
região da fatia.
Existem duas formas ferramentas diferentes que podem ser usadas para
criar fatias:
Você pode utilizar a ferramenta Fatia ou Fatia poligonal para criar as fatias
ou você pode também selecionar um objeto e criar uma fatia sobre ele. Utilizando
ambas as técnicas, após criar a fatia, você verá algumas guias que definem as linhas
25
CENT RO DE I NF O RM ÁT I CA
e as colunas da tabela que o Fireworks MX irá criar quando você exportar seu
arquivo. Use estas guias para ter certeza de que os itens fatiados estão alinhados
em colunas. Para esconder as guias, selecione o menu Exibir -> Guias de fatias.
Vale a pena lembrar que, quando você criar uma fatia em algum objeto, você
poderá movê-la para qualquer parte da imagem, onde você desejar que o objeto seja
fatiado.
24.1 Comportamentos
26
CENT RO DE I NF O RM ÁT I CA
27
CENT RO DE I NF O RM ÁT I CA
Agora, criaremos uma fatia sobre a imagem do logotipo e outra fatia abaixo
da imagem:
Agora, se formos até o painel Molduras poderemos verificar que possui
somente uma moldura, chamada Moldura1.
28
CENT RO DE I NF O RM ÁT I CA
29
CENT RO DE I NF O RM ÁT I CA
cor azul, ligando as duas fatias. Clicando sobre o botão OK estaremos completando
nosso efeito de rollover.
Como ainda não aprendemos a exportar os nossos gráficos, para
visualizarmos como funciona o efeito que acabamos de criar, basta, na janela
principal do documento, clicar sobre a guia Visualização e testar o efeito.
26. Exercícios
Podemos criar facilmente um botão utilizando o Fireworks MX, pois ele traz
um assistente para criação que nos ajuda e torna o trabalho mais simples.
Bom, para começarmos, devemos criar um objeto que já servirá como um
dos estados do nosso botão, que veremos a seguir, podendo ser um retângulo ou
qualquer outra forma que quisermos para nosso botão.
Desenharemos então um retângulo medido 90x35 e colocaremos sobre ele
um texto e alguns efeitos como na figura abaixo:
Agora, para editar o nosso botão, devemos clicar duas vezes sobre ele.
30
CENT RO DE I NF O RM ÁT I CA
Um botão é um objeto que possui quatro estados, isto que dizer que ele terá quatro
comportamentos diferentes para quatro eventos diferentes:
31
CENT RO DE I NF O RM ÁT I CA
Menus Pop-up são barras de menus que podemos anexar a uma fatia ou
ponto ativo e posicionar onde quisermos. Como o botão que acabamos de criar
possui uma fatia acima dele, podemos então criar um menu deste tipo e anexá-lo ao
botão.
Para iniciar, iremos clicar com o mouse sobre o botão de comportamentos,
no centro da fatia sobre no botão criado:
Podemos ver que nos aparece uma janela com várias opções, seguindo até
a opção Adicionar menu Pop-up, daremos um clique e veremos uma nova janela
como a que segue, e nesta janela definiremos os rótulos das nossas opções de
menus.
32
CENT RO DE I NF O RM ÁT I CA
33
CENT RO DE I NF O RM ÁT I CA
Clicando sobre o
botão Próximo, ou sobre
a guia Aparência,
veremos a próxima tela
de criação do nosso
menu. Nesta tela,
poderemos criar uma
formatação para o nosso
menu. Poderemos por
exemple escolher se
queremos as opções de
menu na horizontal ou
vertical, e poderemos
também modificar o tipo
de fonte e outras
configurações.
Podemos notar
que temos duas divisões
para dois estados
diferentes: Estado
Acima, e Estado Sobre.
Como já estudamos
isso, sabemos a que se
relaciona cada um dos dois. Para os dois estados, podemos definir a cor do texto e
da célula do menu. A partir desta tela, já podemos ter uma noção de como é e como
vai ficar nosso menu Pop-up.
Nas próximas telas, poderemos definir propriedades como tamanho da
celular de menu e por ultimo a posição do menu com relação a fatia na qual será
anexada e a posição dos sub-menus com relação a posição definida para o menu.
Quando acabarmos de definir todas as prioridades, devemos clicar sobre o botão
Concluído. Após isso, voltaremos para o corpo do documento, porém agora, quando
selecionamos a fatia sobre o botão, veremos um contorno vermelho mostrando onde
irá aparecer o nosso menu pop-up. Caso queiramos mudar a posição basta clicar
com mouse sobre a área vermelha do menu e arrastá-lo até a posição desejada. E
para visualizar, da mesma forma anterior clicando sobre a guia Visualização.
Caso queiramos colocar uma imagem em Tons de Cinza ou com efeito de Sepia,
temos as opções que nos permitem fazer isso apenas selecionando a imagem e
clicando sobre a opção diretamente no menu.
32. Exercícios
Crie um bunner (uma faixa de anuncio) medindo 300x60. Este bunner deverá fazer
um anuncio do seu projeto final, portanto quando acabar, peça para que o seu
instrutor salve em uma basta com seu nome no servidor para evitar algum problema.
35
CENT RO DE I NF O RM ÁT I CA
Para isso, precisamos exportar nosso arquivo. Exportar, quer dizer que
iremos transformar nossa imagem vetorial para bitmap, para que possa ser usada na
internet, uma vez que na internet só são aceitas imagens do tipo bitmap. Como já
falamos, existem vários tipos de imagens bitmaps, algumas permitem que você
tenha uma ótima qualidade com um tamanho reduzido, outras permitem que defina
uma área a ser transparente, e esta se adaptará a qualquer cor de fundo porém, sem
muita definição e com um arquivo de tamanho um pouco maior.
Veremos aqui, um exemplo de exportação para uma imagem do tipo JPEG
que, é hoje um dos formatos mais utilizado na Internet, pois ele, é um exemplo que
permite alta definição por um tamanho de arquivo reduzido.
36
CENT RO DE I NF O RM ÁT I CA
37
CENT RO DE I NF O RM ÁT I CA
38
CENT RO DE I NF O RM ÁT I CA
39
CENT RO DE I NF O RM ÁT I CA
uma outra opção que é a possibilidade de criar uma sub-pasta especialmente para
guardar os arquivos das fatias, já que quando trabalhamos com fatias, já vimos que o
Fireworks MX cria muitos arquivos para formar a nossa imagem original, desta
forma, podemos ter uma melhor organização de nossos arquivos.
Quando clicar sobre o botão Salvar o arquivo estará pronto ser utilizado na
sua home page ou onde for necessário.
40
CENT RO DE I NF O RM ÁT I CA
41
CENT RO DE I NF O RM ÁT I CA
Menu principal
Barra de Linha do
Ferramentas Tempo
Palco
Ferramenta Seta: como todo aplicativo de desenho, tem que existir uma ferramenta
que selecione os objetos, os mova, rotacione e escale (dimensões). Pois é, está
aqui!
42
CENT RO DE I NF O RM ÁT I CA
Ferramenta Caneta: desenha Linhas Bézier (definida por nós) para melhor edição
posterior.
Imã, para desenhar polígono, quadrado e oval perfeitos, manter a ferramenta imã
ativada.
Suavizar contorno
Rotacionar objeto.
43
CENT RO DE I NF O RM ÁT I CA
Cores padrão – Permite voltar para as cores padrão: contorno preto e preenchimento
branco.
44
CENT RO DE I NF O RM ÁT I CA
Cores padrão – Permite voltar para as cores padrão: contorno preto e preenchimento
branco.
Tamanho do pincel
Formato do pincel
45
CENT RO DE I NF O RM ÁT I CA
1- Quadro selecionado
2- Casca de cebola – para adicionar camada guia
3- Contornos da casca de cebola – para visualizar os contornos da camada guia
4- Editar múltiplos quadros – para selecionar os quadros que serão editados
5- Modifica marcadores da cebola
6- Determina quantos quadros tem a animação
7- Determina quantos quadros/segundo
8- Determina o tempo de duração da animação
Painel Alpha
Obs: O mesmo procedimento vale para figuras. Você também pode fazer o
movimento da aplicação anterior junto com essa.
47
CENT RO DE I NF O RM ÁT I CA
Antes de visualizar tente mudar a cor de cada figura que você adicionou
1. Selecione o ímã.
2. Insira uma circulo.
3. Insira um quadro - chave na linha de tempo = 30.
4. Com a linha de tempo = 30 selecionada, insira um retângulo e delete o circulo
5. Selecione da primeira até a penúltima linha
6. Botão direito do mouse na linha selecionada,
Painéis > quadros > quadro:
Rótulo:
Interpol: forma
Atenuação:
Mistura: angular
7. Selecione a primeira linha de tempo,
Modificar > transformar > Adicionar referência de forma.
8. Aparecerá uma bolinha vermelha na figura.
49
CENT RO DE I NF O RM ÁT I CA
tocá-la.
15. Tecle < enter > visualização prévia.
50
CENT RO DE I NF O RM ÁT I CA
39. Máscaras
O efeito máscara cria camadas que escondem parte de outras camadas que
estejam abaixo de camadas em que foi criada a máscara.
Efeito padronagem:
1. Clique em 12.0 fps e modifique o tamanho da animação para 320 x 240 pixels
2. Selecione a ferramenta Brush (pincel) e pinte com várias cores a área de trabalho
3. Selecione a linha do tempo = 40 e insira um quadro > F6
4. Renomeie esta camada como padronagem
5. Insira uma camada acima e renomeie de texto
6. Clique no olho para esconder a camada padronagem
7. Volte a camada do texto e digite a palavra : E F E I T O em arial black, 28
8. Selecione o texto > F8 para transformar em símbolo gráfico
9. Mova o texto para parte superior à esquerda
10. Insira um quadro chave na linha do tempo = 10 e mova o texto para parte
superior à direita
51
CENT RO DE I NF O RM ÁT I CA
11. Insira um quadro chave na linha do tempo 20 e mova o texto para parte superior à
esquerda
12. Insira um quadro chave na linha do tempo 30 e mova o texto para parte superior à
direita
13. Insira um quadro chave na linha do tempo 40 e mova o texto para parte superior à
esquerda
14. Selecione a linha do tempo de 1 até 39, botão direito do mouse > Criar
Interpolação de movimento
15. Clique no olho novamente da camada padronagem para que ela seja exibida
16. Clique sobre a camada texto > botão direto do mouse > Máscara
17. Observe que automaticamente as duas camadas foram trancadas (cadeado)
18. Salve o exercício na sua pasta
19. Ctrl+Enter, para testar a animação
20. Ctrl+F4 para voltar à área de trabalho.
O Flash possui uma série de ações, todas elas pré definidas e fáceis de
encontrar e de usar, vamos tomar como exemplo o quadro chave 10 no filme (vamos
colocar uma ação nele):
53
CENT RO DE I NF O RM ÁT I CA
Para abrir a categoria clique duas vezes na ação desejada. Como exemplo
vamos usar duas ações:
PLAY – Faz com que o Flash execute o filme se este estiver parado, a partir do
quadro onde a ação foi inserida. A sintaxe é simplesmente play.
STOP – faz o filme parar de rodar (como a ação será inserida no quadro 10, o filme
não passará deste ponto, a sintaxe é simplesmente stop; sem parâmetros.
Note que ao inserir uma ação no filme aparece a letra (a) que indica que naquele
quadro há uma ação.
54
CENT RO DE I NF O RM ÁT I CA
55
CENT RO DE I NF O RM ÁT I CA
56
CENT RO DE I NF O RM ÁT I CA
57
CENT RO DE I NF O RM ÁT I CA
43.2 Guias
Desenhar camada;
Imagem Rollover: Insere uma imagem que é substituída por outra ao passar do
mouse;
Linha Horizontal;
Data;
Comentários.
58
CENT RO DE I NF O RM ÁT I CA
43.5 Painéis
- Design: onde buscaremos informações sobre o arquivo .css que será vinculado ao
arquivo; e
- Arquivos: onde teremos a definição e a respectiva árvore de diretórios do site em
evidência. Esses painéis podem ser exibidos e ocultados através do menu “janela”
na opção "ocultar painéis".
A área de desenvolvimento exibe tudo o que está sendo criado no site. Nessa
área usamos um termo WYSIWUG (What You See Is What You Get – O que você vê
é o que você terá), sendo assim tudo o que está na área de desenvolvimento está
como será exibido no browser, excetuando-se as linhas e marcas de símbolos
visíveis que identificam algum atributo à imagem ou texto.
- Tipos de Páginas;
- Configuração de Página; e
- Formatação de Texto.
59
CENT RO DE I NF O RM ÁT I CA
46. Tabelas
- Inserção;
- Mesclagem;
- Fundos;
- Alinhamentos;
- Auto-formatação;
- Fixa e escalonável;
- CellPadding;
- CellSpacing;
- Indexação;
- Criação de layouts com tabelas.
60
CENT RO DE I NF O RM ÁT I CA
47. Imagens
- Inserção de Imagem;
- Alinhamentos.
61
CENT RO DE I NF O RM ÁT I CA
48. Links
- Relativo: você apenas cita o nome do arquivo e o diretório (em alguns casos)
exemplo: nomedoarquivo.html
exemplo: http://www.fflch.usp.br/sti/index2.html
- Download: esse tipo de link depende de um formato, por exemplo, se você colocar
um link para um arquivo do Word e o usuário possuir Word na máquina, o arquivo
será aberto. Caso o arquivo do Word esteja compactado em formato .zip, quando o
usuário clicar sobre ele fará, obrigatoriamente, o download do arquivo e
posteriormente o programa WinZip entrará em ação.
- E-Mail: esse tipo de link faz com que, ao ser clicado, o link abra a janela do
programa de envio de e-mail padrão da máquina do usuário com o endereço do e-
mail já inserido no campo “e-mail”.
exemplo: mailto:abc@usp.br
62
CENT RO DE I NF O RM ÁT I CA
- Âncora: esse tipo de link é muito usado. Ele faz com que o visitante vá a lugares
específicos dentro da página ativa ou qualquer outra página do site.
Quando o usuário clicar sobre a palavra “fim” ele irá para a âncora em questão
nomeada como “fim”, na página ativa ou em qualquer outra página ou site.
- Mapa de imagem: mapear uma imagem pode ser uma mão na roda para aqueles
que não querem muito trabalho quando da criação dos layouts, uma vez que basta
criar a imagem e usar as ferramentas de mapeamento de imagem que estão na
barra de propriedades.
49. Mídias
Fireworks
Flash
Clicando sobre qualquer um deles, uma janela se abre para que você escolha o
arquivo que será inserido no site.
Botão Flash, são botões animados que você poderá utilizar em suas
páginas. Clique em Inserir >> Imagens interativas e no >> Botão Flash,
ou clique no ícone no Painel Inserir.
63
CENT RO DE I NF O RM ÁT I CA
64
CENT RO DE I NF O RM ÁT I CA
50. Layers
Você conhece aquela janela chatinha que se abre logo que um site é aberto?
Então, a tal janela chatinha é uma “Janela PopUp”. Muito boa para dar
informações de última hora, anunciar promoções, eventos, mas, muito inconveniente
quando usada em excesso.
65
CENT RO DE I NF O RM ÁT I CA
52. Formulários
- Insira os dados que serão solicitados de um lado (de preferência do lado esquerdo);
66
CENT RO DE I NF O RM ÁT I CA
67
CENT RO DE I NF O RM ÁT I CA
68
CENT RO DE I NF O RM ÁT I CA
69
CENT RO DE I NF O RM ÁT I CA
- Neste campo,
estando a opção Tipo acionado em Menu, para se inserir as opções clique
em e abrirá uma caixa de diálogo.
- Insere um botão.
71
CENT RO DE I NF O RM ÁT I CA
53. Templates
Nestes templates serão criadas regiões que serão bloqueadas e regiões que
serão editáveis (que podem ser alteradas e etc...).
Vamos criar um exemplo de templates. Abra uma nova página e crie uma
tabela com 3 linhas e as seguintes configurações: Preenchimento da célula=0,
Espaçamento entre as células=0,
Largura=800 e Borda=0.
Vamos supor que nesta primeira linha da tabela, você irá utilizar uma imagem
de logotipo do seu site, e na terceira linha você irá utilizar um texto, mas
somente uma parte dele você deseja que seja editável e a segunda linha
será o corpo da página, a qual será deixada como região editável da página.
72
CENT RO DE I NF O RM ÁT I CA
Você já tem um modelo e poderá utilizá-lo para criar outras páginas para o
seu site. Vá em menu Arquivo/Novo e na caixa de diálogo clique em Modelo, no
campo modelo clique no site — Primeiro Site“. No campo ao lado aparecerá o
templates que você salvou como site_modelo. Clique em criar.
73
CENT RO DE I NF O RM ÁT I CA
Observe que a área de trabalho ficou com uma borda amarela, isto significa
que você está usando um Templates. Repare que ao passar o mouse sobre a
primeira linha o cursor fica com um símbolo — “Pare”, isto significa que esta região
está e só poderá ser modificada no próprio Templates. Na segunda linha que está
demarcada em azul você editá-la, pois a mesma foi definida como uma região
editável. Salve esta página normalmente como HTML, vá em Arquivo/Salvar como e
na caixa de diálogo de um nome a esta página.
74
CENT RO DE I NF O RM ÁT I CA
54. Frames
Este recurso é útil para você que queira que os links e o conteúdo fiquem na mesma
página.
Agora insira esta matéria logo abaixo do link (copie este texto e cole no seu
documento):
PARÁGRAGO 1
Ao contrário do que meu nome indica, não sou judia. Inclusive, estudei em colégio
católico, já quis ser freira, mas faz tempo que concluí que, infelizmente, o discurso
das religiões, em geral, fomenta mais ódio do que amor, mais guerra que paz (sem
falar que sempre achei todas as religiões incrivelmente machistas). Então, graças a
Deus, sobrevivi à escola católica e hoje estou bastante isenta da culpa imposta pela
religião. Isso posto, fui ver “A Paixão de Cristo”, de Mel Gibson, com plena
consciência de que o fundamentalismo cristão tão em voga nos EUA apóia o filme, e
de que ele está sendo acusado de anti-semita e homofóbico. Será que ele é? Contra
os homossexuais, sem dúvida. Herodes é pintado como gay e o diabo usa
maquiagem e lança olhares insinuantes a Jim Caviezel, que faz Jesus (depois
descobri que Satanás, que mais parece aquela criatura computadorizada de “Senhor
dos Anéis”, é interpretado por uma atriz, pra dar-lhe um look mais andrógino ainda).
75
CENT RO DE I NF O RM ÁT I CA
Contra os judeus, não tenho tanta certeza. Certo, eles pedem a morte de Jesus e
são estúpidos, e Pilatos é que é um cara legal, mas pelo menos Judas se mostra
arrependido de sua traição (e eu fiquei com pena dele). Além do mais, culpar os
judeus soa contraditório. Afinal, a história oficial diz que Jesus veio pra cá pra morrer
por nós e redimir-nos de nossos pecados (seja lá quais sejam, como diz o rapaz de
“Eleição”). Ou seja, Jesus é um sacrifício de Deus para os homens. Sob este ângulo,
ninguém além de Deus pode ser acusado de matá-lo. Claro, a gente pode especular
sobre que Deus é esse que condena seu próprio filho à morte, mas o filme nunca
suscita tal discussão. Porque “Paixão” fala da carne, não do espírito.
PARÁGRAFO 2
E quanta carne... Não me lembro de ter visto um filme tão violento, logo eu que amei
“Kill Bill”. Outras aventuras com o Mel, tipo “Mad Max”, têm a violência dos
quadrinhos. Mas esta de “Paixão” parece muito real e ininterrupta. Todo santo
espinho, chicotada e prego recebido por Jesus é visto em close, em câmera lenta.
Nem filme de terror é tão explícito assim. Ver tanto sangue e tortura é perturbador.
Tudo bem, condenar “Paixão” por ser brutal seria hipocrisia, já que toda a religião
cristã é baseada nesses símbolos sangrentos. Não foi o Mel que inventou. Só não
sei qual o propósito de se fazer um filme tão visceral. Tá, o propósito de qualquer
filme, mesmo dos clássicos, pode ser questionado. Mas “Paixão” não traz salvação
nenhuma. Vamos ver: o verdadeiro horror não é se escandalizar com o que fazem a
Jesus. É se escandalizar se fazem isso com qualquer um, ponto final, até com um
psicopata demente como Barrabás. Ou a pena de morte é aceitável em alguns
casos? A ideologia dominante por trás de “Paixão” (e da sua fonte, a Bíblia) vem à
tona quando um dos dois criminosos na cruz diz que ele merece tudo isso, ele sim
merece ser punido e sofrer, mas Jesus, não. Sério? O outro ladrão ri e
instantaneamente é castigado por um corvo que lhe arranca os olhos. Isso é que é
dar a outra face? Esse é o Deus misericordioso? Se bem que esta violência em si
não é enfocada, apenas sugerida. Pode crer que se o corvo atacasse Jesus
veríamos a cena em todos seus detalhes.
PARÁGRAFO 3
Mas vamos à minha parte favorita da análise, que é a reação do público. Olha, não
ouço tanto choro no cinema desde “ET”. O pessoal realmente se comoveu. Lógico
que alguns devotos não viram necessidade de se desligar do mundo material, e até
atenderam seus celulares durante a sessão. Mas foram minoria. Assim que “Paixão”
terminou, ouvi o espectador do meu lado dizer que este era o melhor filme de toda a
sua vida. Já eu saí da sala meio em estado de choque. Não entendo nada de
budismo, por exemplo, mas sinto que uma religião que tem como símbolo um gordo
meditando pacificamente deve passar valores bem diferentes de outras por aí que
glorificam o calvário de um barbudo se esvaindo em sangue. O Mel soube captar
bem essa relação sado-masô. Minha aposta é que o filme vai ser encampado pelas
religiões cristãs por ser fiel à barbárie descrita no Novo Testamento.Como o papa
disse, “é como foi”. O velhinho deve saber.
76
CENT RO DE I NF O RM ÁT I CA
Faça isso nos outros parágrafos também, com seus respectivos nomes.
Agora suba até os links no topo da página e link cada um da seguinte forma:
Isso mesmo, você deve colocar uma cerquilha antes de colocar o nome da
âncora.
Assim o html irá entender que você não quer buscar um link qualquer, e sim
uma âncora. Repita isso nos outros links e você irá obter o resultado esperado.
<SCRIPT LANGUAGE="JAVASCRIPT">
Set de instruções
</SCRIPT>
77
CENT RO DE I NF O RM ÁT I CA
Copie o código JavaScript que você deseja. Você pode utilizar como exemplo
um dos dois códigos abaixo:
O primeiro é o código de “Data AutoAtualizável” em forma escrita e o segundo
também funciona como data autoatualizável só que em forma de “Relógio
Analógico”.
— 1º CÓDIGO
<SCRIPT LANGUAGE="JAVASCRIPT">
if(mdiasemana == 0)
document.write('Domingo, ');
else if(mdiasemana == 1)
document.write('Segunda Feira, ');
else if(mdiasemana == 2)
document.write('Terça Feira, ');
else if(mdiasemana == 3)
document.write('Quarta Feira, ');
else if(mdiasemana == 4)
document.write('Quinta Feira, ');
else if(mdiasemana == 5)
document.write('Sexta Feira, ');
78
CENT RO DE I NF O RM ÁT I CA
else if(mdiasemana == 6)
document.write('Sábado, ');
document.write(mdia+' de ');
if(mmes == 0)
document.write('Janeiro de ');
else if(mmes == 1)
document.write('Fevereiro de ');
else if(mmes == 2)
document.write('Março de ');
else if(mmes == 3)
document.write('Abril de ');
else if(mmes == 4)
document.write('Maio de ');
else if(mmes == 5)
document.write('Junho de ');
else if(mmes == 6)
document.write('Julho de ');
else if(mmes == 7)
document.write('Agosto de ');
else if(mmes == 8)
document.write('Setembro de ');
else if(mmes == 9)
document.write('Outubro de ');
else if(mmes == 10)
document.write('Novembro de ');
else if(mmes == 11)
document.write('Dezembro de ');
document.write(mano+'');
document.write('');
</script>
— 2º CÓDIGO
<SCRIPT TYPE=TEXT/JAVASCRIPT>
var Timer = null;
function OnOff() {
if (Timer != null) {
clearTimeout(Timer);
Timer = null;
Frm3.CLKon.value = ' Ligar ';
return;
} else {
Frm3.CLKon.value = 'Desligar';
Running();
}
}
function Running() {
with (new Date()) {
var Q=getTime();
79
CENT RO DE I NF O RM ÁT I CA
// Relógio Analógico
// =================
dCol='000066';//date colour.
fCol='660000';//face colour.
sCol='990000';//seconds colour.
mCol='660000';//minutes colour.
hCol='660000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=100;
ClockFromMouseX=50;
d=new
Array("DOMINGO","SEGUNDA","TERÇA","QUARTA","QUINTA","SEXTA","SÁBADO
");
m=new
Array("JANEIRO","FEVEREIRO","MARÇO","ABRIL","MAIO","JUNHO","JULHO","AG
OSTO","SETEMBRO","OUTUBRO","NOVEMBRO","DEZEMBRO");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=120;
xmouse=150;
scrll=0;
80
CENT RO DE I NF O RM ÁT I CA
81
CENT RO DE I NF O RM ÁT I CA
document.write('<div id="ieHours"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-
size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-
size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-
size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-
(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
function Move() {
if(frm1.CLmouse.value == 'Movimentar') {
frm1.CLmouse.value = ' Fixar ';
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
} else {
frm1.CLmouse.value = 'Movimentar';
(ns)?window.onMouseMove=Mouse:document.onmousemove='';
ymouse=120;
xmouse=150;
}
}
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
82
CENT RO DE I NF O RM ÁT I CA
83
CENT RO DE I NF O RM ÁT I CA
Vai abrir uma janela. Nesta janela você busca na sua pasta onde esta a
imagem. Após inserida a imagem, vamos mapeá-la facilmente.
84
CENT RO DE I NF O RM ÁT I CA
A primeira da direita pra esquerda é a que você irá usar para mapear bem
certinho cada parte da cidade. Os outros você usaria se fosse um círculo, elipse ou
quadrado. ok ?
Então você seleciona o mapeamento que for adequado e vai contornando
com cliques até fechar.
O FTP pode ser acessado pelo Menu SITE > NEW SITE(Novo Site).
Na tela (Local Info) defina os seguintes dados:
1º Campo: Nome do site.
2º Campo: Local do HD onde está o site.
3º Campo: Endereço virtual do seu site.
4º Campo: "Enable Cache" - Marca o cache da transferência.
85
CENT RO DE I NF O RM ÁT I CA
2º Campo: "Host Directory" - Pasta na qual seu FTP deverá iniciar (deixe em branco
se não existir).
3º Campo: "LOGIN" - Seu Login no servidor.
4º Campo: "PASSWORD" - Sua Senha no servidor.
86