WFLORIPA – Prof. Willians Silva

PCC – PROJETO DE CONCLUSÃO DE CURSO

INÍCIO em 11/03, APRESENTAÇÃO em 26/03

OBJETIVOS: Criar um web site, contendo os requisitos técnicos abaixo,  e utilizando as competências desenvolvidas no curso, preparar documentação impressa (briefing, proposta, estruturação de preços, cronograma do projeto, layout gráfico) à ser entregue em mãos na apresentação do mesmo.

Requisitos técnicos mínimos:

1.     Tema livre (use bom senso);
2.    Layout gráfico do site em resolução de vídeo 1024×768;
3.     Estrutura em Template e tabelas;
4.     Inserção de conteúdos { textos, imagens, 2 videos;
5.    1 formulário de contatos{ 5 campos;
6.    Ferramentas do Google{ analyctics e maps;
7.    Menu de botões {Fireworks ou Flash;
8.    Mínimo de 3 flashs;
9.    Meta tags para facilitar as buscas nos buscadores;
10. Mínimo de 5 áreas;
11. Publicar na web.

Passos:

I – Elaborar o cronograma de tarefas;
II – Criar o Layout Gráfico no Fireworks!
III – Estruturar o template no Dreamweaver
IV – Criar as páginas de Conteúdos
V – Criar os Flashs e Multi-midias
VI – Correções ortográficas e ajustes
VII – Publicação

Abraços, Prof. Willians

Fireworks Tips and Tricks

Importante! estas explicações são exclusivas para meus alunos do curso de web,  muitas informações não estão citadas aqui, foram faladas em aula.

Salve Galera!

Vamos fazer aquele menu com botões rollover, que quando passamos os mouse em cima ele muda.. usando o Fireworks 8

I – Inserir um retângulo e escrever um texto sobre ele, alinhar a caixa de texto no centro, depois selecione a caixa de texto e o retangulo;

II – Pressione a tecla F8 ou vá no menu: modify/Symbol/Convert to Symbol e escolha Button;

III – Utilizando a seta preta ou branca, dê um duplo clique em cima do botão;

IV – Você estará agora dentro das propriedades do botão, visualize na parte superior as áreas: up/over/down/over while down/active area – clique na guia over, copia a imagem que está no estado up, clicando no botão no canto inferior direito da sua tela (copy up Graphic);

V – Clique no estado down, e copie a imagem do estado over, clicando no botão no canto inferior direito da sua tela (copy over Graphic);

Nota: você pode alterar as configurações de texto, cores e formas nos estados up/over/down e over while down.

VI – Vá no botão Done (no canto inferior direito da sua tela) para finalizar o processo.

VII – Selecione o botão com seta preta ou branca, segure a tecla Alt e arraste para gera uma cópia e repita esse processo de cópia para gerar as quantidades  que vc quer…
VIII – Selecione cada botão e vá na barra properties(em baixo da tela) na opção text e edit (troque) o texto para o que você necessita.

IX – Acione a tecla F12 para visualizar no navegador.
X – Para finalizar, dê um Trim Canvas (aparar a tela) usando (ctrl + alt + t), salve em seus arquivos com (ctrl + s) e export para usar no html (ctrl + shift + x) ..

Boa sorte

Profe

I- Escreva o seu nome;
II – Com a seta preta, selecione(marque) o texto escrito e aplique F8(tecla), escolha opção Graphic;
III – Segure a tecla Alt e clique em cima do texto com a ferramenta seta branca, e arraste para gerar uma ou mais cópias;
IV – Você pode aplicar efeitos como: Reduzir a opacidade do objeto(alpha), aumentar e diminuir a escala…

V – Selecione todas as cópias feitas, vá no menu: Modify/Symbol/Tween Instances (marque a opção: Distribute to frames)

VI – acione o play e veja o movimento..
VII – aplique um “Trim Canvas”, para reduzir a tela de trabalho utilize (ctrl + alt + t);
VII – para gerar o arquivo gif Animado, vá no menu: File/Image Preview/ escolha o formato: Animated Gif, após acione o botão Export, escolha a pasta que você irá salvar e dê um nome..
VIII -Está pronto, agora é só colocar dentro do html ou do msn(utilize tamanho 50 x 50) e bingo!!!

Boa Sorte!

I – Escrever um texto com a Ferramenta “A” de texto;
II – Desenhe um círculo (elipse);

III – com a seta preta selecione os dois objetos (texto + elipse);
IV – Vá no menu: Text/Atach to Path (essa função fará o texto seguir o caminho do objeto);

V -  Tanto o texto quanto o objeto estão livres para editar, utilize a seta branca.

Nota: para mover o texto por dentro do caminho, vá no painel properties(na parte inferior da sua tela) e coloque um valor no campo Text off Set…, ou clique no texto e use sua barra de espaço..rs

Boa Sorte!

Utilizando o Fireworks 8

I – Importar uma imagem;
II  – Desenhar um circulo, e posicionar por cima da imagem;

III – com a seta preta, selecione o objeto (circulo) e recorte (ctrl + x);
IV – Selecione a imagem, vá no Painel Layer, em baixo (no rodapé) acione a opcão  “add Mask”, (isso irá criar uma área de máscara na imagem);
V – cole o objeto recortado (ctrl + v)

boa sorte!